/* Kroneland · Startseite und Bestenliste */
:root{--paper:#f8f5ed;--card:#fffdf8;--ink:#292925;--muted:#6f6c64;--line:#c9c6bc;--soft:#ebe7dd;--shadow:#b7b3a9;--alert:#9b3a24}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Georgia,'Times New Roman',serif;-webkit-text-size-adjust:100%}
a{color:inherit}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}

.site-head{border-bottom:1px solid #99958b;background:#faf8f2}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.wordmark{font-size:20px;font-weight:bold;letter-spacing:.13em;text-decoration:none;white-space:nowrap}
.wordmark small{display:block;font:9px Arial,sans-serif;color:#77746c;letter-spacing:.16em;margin-top:4px;font-weight:normal}
.site-nav{display:flex;gap:6px;font:13px Arial,sans-serif}
.site-nav a{text-decoration:none;padding:7px 12px;border:1px solid transparent}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-color:#beb8a9;background:var(--card)}

.intro{padding:44px 0 30px;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
.eyebrow{font:11px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h1{font-size:clamp(28px,4.4vw,42px);line-height:1.12;margin:0 0 14px;letter-spacing:.01em;text-wrap:balance}
.lead{font-size:17px;color:#46443e;margin:0 0 22px;max-width:52ch}
.features{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.features li{display:grid;grid-template-columns:28px 1fr;gap:6px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.features li span{font-size:17px;line-height:1.35}
.features b{font-weight:bold}

.card{background:var(--card);border:1px solid var(--ink);box-shadow:5px 6px 0 var(--shadow);padding:22px 22px 18px}
.tabs{display:flex;border-bottom:1px solid var(--line);margin:-4px 0 18px}
.tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:10px 4px;font:15px Georgia,serif;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:bold}
label{display:block;font:11px Arial,sans-serif;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
input{display:block;width:100%;margin-top:5px;padding:11px 12px;font:16px Georgia,serif;border:1px solid #a9a397;background:#fff;color:var(--ink);border-radius:0}
input:focus{outline:2px solid var(--ink);outline-offset:1px}
.btn{display:block;width:100%;padding:13px;margin-top:6px;background:var(--ink);color:#fff;border:1px solid var(--ink);font:bold 14px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-align:center;text-decoration:none}
.btn:hover{background:#000}
.btn.secondary{background:none;color:var(--ink);font-weight:normal;letter-spacing:.06em}
.btn.secondary:hover{background:var(--soft)}
.btn:disabled{opacity:.55;cursor:wait}
.hint{font:12px/1.5 Arial,sans-serif;color:var(--muted);margin:12px 0 0}
.msg{font:13px/1.45 Arial,sans-serif;margin:0 0 12px;padding:9px 11px;border:1px solid var(--alert);color:var(--alert);background:#fff5f1}
.msg.ok{border-color:#3d5c35;color:#3d5c35;background:#f3f8ef}
.welcome h2{margin:0 0 6px;font-size:22px}
.welcome p{margin:0 0 14px;color:#46443e}

.gallery{padding:10px 0 50px}
.gallery h2,.board h2{font:11px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:normal}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
figure{margin:0}
.frame{aspect-ratio:4/3;border:1px solid var(--ink);background:var(--card);box-shadow:4px 5px 0 var(--shadow);overflow:hidden;display:flex;align-items:center;justify-content:center}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame .placeholder{font:12px/1.5 Arial,sans-serif;color:var(--muted);text-align:center;padding:12px}
.frame .placeholder b{display:block;font:15px Georgia,serif;color:var(--ink);margin-bottom:4px}
figcaption{font-size:14px;color:#46443e;margin-top:10px}

.board{padding-top:40px;padding-bottom:60px}
.board h1{margin-bottom:6px}
.table-scroll{overflow-x:auto;border:1px solid var(--ink);box-shadow:5px 6px 0 var(--shadow);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
th{font:10px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 12px;border-bottom:1px solid var(--ink);font-weight:normal}
td{padding:11px 12px;border-bottom:1px solid #e7e2d7}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.rank{font-weight:bold;width:52px}
tr.me td{background:#efeadf}
tr:last-child td{border-bottom:0}
td small{display:block;font:11px Arial,sans-serif;color:var(--muted)}
.empty{padding:24px;text-align:center;color:var(--muted)}
.rules{margin-top:22px;font:13px/1.6 Arial,sans-serif;color:var(--muted)}

.site-foot{border-top:1px solid var(--line);font:11px Arial,sans-serif;color:var(--muted)}
.site-foot .wrap{padding:16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

@media (max-width:780px){
 .intro{grid-template-columns:1fr;gap:28px;padding-top:28px}
 .gallery-grid{grid-template-columns:1fr}
}
@media (max-width:420px){.wordmark{font-size:16px}.site-nav a{padding:6px 8px}}

/* Neuigkeiten auf der Startseite */
.news{border:1px solid var(--ink);background:var(--card);box-shadow:4px 5px 0 var(--shadow);padding:12px 16px;margin:24px 0 0}
.news h2{font:11px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;font-weight:normal}
.news p{margin:6px 0;font-size:15px}
.news small{font:11px Arial,sans-serif;color:var(--muted);margin-left:6px}
.adminlink{display:block;margin-top:10px;text-align:center;font:13px Arial,sans-serif}

/* Adminbereich */
.admin .tabs{flex-wrap:wrap;margin:18px 0}
.admin .tabs button{flex:0 1 auto;padding:10px 14px}
.admin h2{font:11px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:28px 0 12px;font-weight:normal}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{background:var(--card);border:1px solid var(--ink);box-shadow:3px 4px 0 var(--shadow);padding:12px 14px}
.tile b{display:block;font-size:26px;line-height:1.1}
.tile span{font:12px Arial,sans-serif;color:var(--muted)}
.bars{display:flex;gap:8px;align-items:flex-end;height:150px;border-bottom:1px solid var(--ink);padding-top:20px;margin-bottom:44px}
.bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.bar i{display:block;width:100%;background:#8b8577;min-height:2px}
.bar b{position:absolute;top:-2px;font:12px Arial,sans-serif}
.bar span{position:absolute;bottom:-20px;font:10px Arial,sans-serif;color:var(--muted);white-space:nowrap}
.toplist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.toplist li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.toplist small{font:11px Arial,sans-serif;color:var(--muted)}
.toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.toolbar input{flex:1;min-width:200px;margin:0}
select{padding:10px;font:15px Georgia,serif;border:1px solid #a9a397;background:#fff;color:var(--ink);border-radius:0}
textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;font:16px/1.45 Georgia,serif;border:1px solid #a9a397;background:#fff;color:var(--ink);border-radius:0;resize:vertical}
label.check{display:flex;gap:10px;align-items:center;font:15px Georgia,serif;color:var(--ink);letter-spacing:0}
label.check input{width:auto;margin:0}
.admin table{min-width:860px}
.admin td{vertical-align:top}
.acts{display:flex;flex-wrap:wrap;gap:4px;max-width:260px}
.mini{font:11px Arial,sans-serif;padding:5px 8px;border:1px solid #a9a397;background:#fff;cursor:pointer;color:var(--ink)}
.mini:hover{background:var(--soft)}
.mini.warn{border-color:var(--alert);color:var(--alert)}
.mini:disabled{opacity:.5}
.tag{display:inline-block;font:10px Arial,sans-serif;letter-spacing:.06em;padding:2px 6px;border:1px solid var(--ink);margin:0 4px 4px 0}
.tag.bad{border-color:var(--alert);color:var(--alert)}
.tag.ok{border-color:#3d5c35;color:#3d5c35}
.tag.dim,.dim{color:var(--muted);border-color:var(--line)}
tr.blocked td{background:#fbf1ee}
.newslist{list-style:none;padding:0;margin:20px 0 0}
.newslist li{border-bottom:1px solid var(--line);padding:12px 0}
.newslist li.off{opacity:.55}
.newslist p{margin:0 0 4px}
.newslist small{display:block;font:11px Arial,sans-serif;color:var(--muted);margin-bottom:6px}
.newslist .mini{margin-right:6px}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}.bars{gap:3px}.bar span{transform:rotate(-40deg);transform-origin:top right;right:50%;bottom:-8px}}

/* Spielanleitung */
.guide{padding-top:40px;padding-bottom:60px}
.guide .lead{max-width:62ch}
.toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:8px 0 34px}
.toc a{display:flex;gap:10px;align-items:center;text-decoration:none;border:1px solid var(--line);background:var(--card);padding:10px 12px;font-size:15px}
.toc a:hover{border-color:var(--ink)}
.toc span,.guide h2 span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--ink);border-radius:50%;font:bold 12px Arial,sans-serif;flex:0 0 auto}
.guide section{border-top:1px solid var(--line);padding:26px 0 8px;scroll-margin-top:16px}
.guide h2{display:flex;gap:12px;align-items:center;font-size:26px;margin:0 0 14px}
.guide h3{font-size:18px;margin:22px 0 8px}
.guide p{max-width:70ch}
.facts{margin:0 0 16px;padding:0;list-style:none}
.facts li{padding:8px 0 8px 18px;border-bottom:1px solid #e7e2d7;position:relative;max-width:78ch}
.facts li::before{content:'';position:absolute;left:2px;top:17px;width:6px;height:6px;background:var(--ink);transform:rotate(45deg)}
.facts.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));column-gap:24px}
.steps{margin:0 0 16px;padding-left:0;list-style:none;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding:9px 0 9px 40px;border-bottom:1px solid #e7e2d7;max-width:78ch}
.steps li::before{content:counter(step);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font:bold 12px/26px Arial,sans-serif;text-align:center}
.guide .table-scroll{margin:12px 0 18px}
.guide table{min-width:520px}
tr.crown td{background:#efeadf;font-weight:bold}
.tip{background:var(--card);border-left:3px solid var(--ink);padding:10px 14px;font-size:15px}
.starter{background:#fbf9f3}
.guidebox{border:1px solid var(--ink);background:var(--card);box-shadow:4px 5px 0 var(--shadow);padding:14px 16px;margin:22px 0 0}
.guidebox h2{font:11px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:normal}
.guidebox ol{margin:0 0 10px;padding-left:20px;font-size:15px}
.guidebox a{font:13px Arial,sans-serif}
@media (max-width:560px){.site-head .wrap{flex-wrap:wrap;gap:2px 12px;padding-top:10px;padding-bottom:8px;min-height:0}.site-nav{width:100%;margin-left:-8px}}
.site-foot .legal a{color:var(--muted);text-decoration:none}.site-foot .legal a:hover{text-decoration:underline}
.deleteBox{margin-top:18px;font:13px Arial,sans-serif;color:var(--muted)}
.deleteBox summary{cursor:pointer}
.deleteBox form{margin-top:10px}

/* Werbebanner Startseite (728 × 90, passt sich auf dem Handy an) */
.adbanner{margin:36px auto 0;max-width:728px;text-align:center}
.adbanner small{display:block;font:10px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;text-align:left}
.adbanner a{display:block;line-height:0}
.adslides{position:relative;aspect-ratio:728/90}.adslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}.adslide.on{opacity:1;visibility:visible}
.adThumb{display:block;max-width:364px;width:100%;border:1px solid var(--line);margin-bottom:6px}
.adbanner img{display:block;width:100%;height:auto;aspect-ratio:728/90;object-fit:cover;border:1px solid var(--line)}
.adfree{display:flex;align-items:center;justify-content:center;aspect-ratio:728/90;border:1px dashed var(--muted);color:var(--muted);font:14px Georgia,serif;line-height:1.3;padding:0 12px;background:var(--card)}
.adfree b{color:var(--ink);margin-right:4px}
.adbanner a:hover .adfree{border-color:var(--ink);color:var(--ink)}
.setHead{font-size:16px;margin:22px 0 4px;border-top:1px solid var(--line);padding-top:16px}
.bannerPreview{margin:8px 0 14px}.bannerPreview img{display:block;max-width:100%;border:1px solid var(--line);margin-top:4px}.bannerPreview small{color:var(--muted);font:12px Arial,sans-serif}
[hidden]{display:none!important}
.adbanner{margin-bottom:40px}.adbanner a,.adbanner a:hover{text-decoration:none}
#adForm .setHead{border-top:0;padding-top:0;margin-top:0}
/* Startseite: rechte Spalte mit Anmeldung, Neuigkeiten, Titeln und erstem Schritt */
.side{display:flex;flex-direction:column;gap:0}
.side .news,.side .guidebox{margin:22px 0 0}
.startbox ol{margin-bottom:8px}
/* Anleitung: historische Hinweise hervorheben */
.histgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:16px 0}
.histbox{background:#f4ecd6;border:1px solid #b8a06a;border-left:4px solid #8a6d2f;box-shadow:3px 4px 0 var(--shadow);padding:12px 14px}
p.histbox{margin:16px 0}
.histbox h3{font-size:16px;margin:0 0 6px;color:#5c4614}
.histbox p{margin:0;font-size:14.5px;line-height:1.5}
.histbox b{color:#5c4614}
.simplebox{margin-top:22px;border-left-color:#8a6d2f}
.simplebox p{margin:6px 0 8px}

.dangerCard{border-color:#8a3b2a;margin-bottom:22px}.warnBtn{background:#8a3b2a;border-color:#8a3b2a}
/* Eindrücke vergrößern */
.frame.zoomable{cursor:zoom-in;transition:transform .15s}.frame.zoomable:hover{transform:translateY(-2px)}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(30,28,24,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:calc(100vh - 110px);border:1px solid #fffbe8;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox p{color:#f4ecd6;font:15px Georgia,serif;margin:12px 0 0;text-align:center}
.lbClose{position:absolute;top:12px;right:16px;background:none;border:0;color:#fffbe8;font-size:34px;line-height:1;cursor:pointer}