/* Elden Ring Run Planner — v0.11.9
   Dichte statt Kacheln: eine Zeile pro Gegenstand, die Hierarchie traegt die
   Gruppenueberschrift. Laut ist nur die Lockout-Leiste. */

:root{
  --bg:#0f0d0a;
  --panel:#18140f;
  --panel2:#211b14;
  --line:#3a3025;
  --line2:#2a2219;
  --gold:#c7a14a;
  --gold2:#8f7130;
  --text:#eee7da;
  --muted:#9f9588;
  --red:#d26054;
  --amber:#d49b43;
  --green:#7fa86a;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:radial-gradient(circle at 20% 0%,rgba(199,161,74,.09),transparent 28rem),var(--bg);
  color:var(--text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
}
.hidden{display:none !important}

/* Kopf */
/* ---------------------------------------------------------------- Kopf
   Titel und Bild in einer Zeile, das Bild rechts und angeschnitten. Die
   Schrift ist Cormorant Garamond (SIL OFL, selbst gehostet unter fonts/).
   Die Originalschrift des Spiels ist lizenzpflichtig und liegt nicht bei. */
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}

.hero{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 78% 40%, rgba(155,44,40,.16), transparent 62%),
    linear-gradient(180deg, #100d09, #0d0b08);
}
/* Titel ueber die volle Breite, darunter Text links und Bild rechts. Das
   Bild bekommt eine eigene Spalte statt hinter dem Text zu liegen — dort
   musste es blass sein, um die Schrift nicht zu stoeren, und war damit
   kaum zu erkennen. */
.hero .hero-inner{
  --art-w:clamp(170px,38%,340px);
  position:relative;display:grid;column-gap:18px;
  grid-template-columns:minmax(0,1fr) var(--art-w);
  grid-template-areas:"title art" "text art";
  align-items:end;padding:30px 16px 12px;
}
h1{grid-area:title}
/* Der Absatz haengt oben am Titel. Unten ausgerichtet klaffte zwischen
   "Missables" und dem ersten Satz eine Luecke, sobald die Figur hoeher war. */
.hero-text{grid-area:text;align-self:start;position:relative;z-index:1;min-width:0}
/* Der Geltungsbereich steht direkt unter der Einleitung im selben Block.
   Als eigene Rasterzeile unter dem Bild klaffte davor eine Luecke, sobald
   die Figur hoeher war als der Absatz — genau der Abstand, der stoerte. */
.hero .scope{max-width:none;position:relative;z-index:1}
.hero-art{
  grid-area:art;align-self:stretch;justify-self:end;
  width:calc(100% + 16px);margin:0 -16px -12px 0;pointer-events:none;
  /* Die Figur fuellt die Zeilenhoehe, aber hoechstens das 1,35-fache ihrer
     Breite. Ohne diese Grenze wurde sie auf schmalen Schirmen, wo die
     Absaetze viele Zeilen brauchen, zu einem hochkantigen Ausschnitt, der
     die Figur bis zur Unkenntlichkeit heranzoomt. */
  max-height:calc(var(--art-w) * 1.35);
  /* Nach unten und rechts ausblenden, damit das Bild in den Hintergrund
     laeuft, statt als Aufkleber auf dem Kasten zu sitzen. */
  /* Unten und rechts weich auslaufen. Rechts ist noetig, weil `cover` die
     Figur dort beschneidet — eine harte Kante saehe aus wie ein Aufkleber. */
  -webkit-mask-image:
    linear-gradient(to bottom,#000 76%,transparent 99%),
    linear-gradient(to right,#000 80%,transparent 100%);
  mask-image:
    linear-gradient(to bottom,#000 76%,transparent 99%),
    linear-gradient(to right,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  filter:saturate(.9) brightness(.95);
}
/* `cover` statt natuerlicher Hoehe: der Kasten gibt die Hoehe vor, die Figur
   fuellt ihn und wird links beschnitten. Ueber die Breite groesser zu werden
   ginge nur auf Kosten der Textspalte — und die wuerde dann mehr Zeilen
   brauchen, also waere der Kopf am Ende hoeher statt das Bild groesser. */
.hero-art img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:left bottom;
}

h1{
  margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  display:flex;flex-direction:column;line-height:.98;
}
.t-ring{
  font-size:clamp(24px,5.4vw,42px);letter-spacing:.20em;
  color:#e8dcc2;text-transform:uppercase;
}
.t-miss{
  font-size:clamp(40px,10.5vw,86px);letter-spacing:.06em;font-weight:600;
  color:#a32e26;text-transform:uppercase;
  text-shadow:0 0 26px rgba(163,46,38,.34);
}
.hero p{color:var(--muted);margin:10px 0 0;max-width:46ch;font-size:14px}
.hero .scope{font-size:12.5px;color:var(--gold2);margin-top:6px}
.hero-inner,main,.lockbar-inner,.tabs{max-width:940px;margin:0 auto}
h2{margin:0;font-family:Georgia,serif;font-weight:500}

.hero p{color:var(--muted);margin:8px 0 0;max-width:60ch;font-size:14px}

/* Lockout-Leiste */
.lockbar{background:#120f0b;border-bottom:1px solid var(--line)}
.lockbar-inner{padding:6px 16px}
.lockbar-rail{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.lockbar-rail::-webkit-scrollbar{display:none}
.lockbar-idle{color:var(--muted);font-size:12.5px;padding:5px 0;white-space:nowrap}
.lock-chip{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);
  padding:5px 10px;border-radius:2px;font:inherit;font-size:13px;cursor:pointer;
}
.lock-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}
.lock-chip.hot{border-color:#6d3730}
.lock-chip.hot .dot{background:var(--red)}
.lock-chip .num{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
.lock-chip.open{border-color:var(--gold);background:#2a2115}
.lock-chip:hover{border-color:var(--gold2)}
.lockbar-detail{border-top:1px solid var(--line2);margin-top:9px;padding-top:9px}
.lockbar-lead{margin:0 0 6px;font-size:13px;color:#d9cfbe}
.lockbar-list{list-style:none;margin:0;padding:0;font-size:13px;columns:2;column-gap:22px}
.lockbar-list li{display:flex;justify-content:space-between;gap:12px;padding:2px 0;break-inside:avoid}
.lockbar-list .where{color:var(--muted);font-size:12px}

/* Tabs */
.tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.tab{
  background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--muted);font:inherit;padding:11px 14px;cursor:pointer;
}
.tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.tab:hover{color:var(--text)}

main{padding:18px 16px 90px}

/* Werkzeugleiste */

#search{
  width:100%;padding:10px 12px;background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:2px;font:inherit;
}
#search:focus,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  padding:5px 11px;border-radius:2px;font:inherit;font-size:13px;cursor:pointer;
}
.chip.on{border-color:var(--gold);color:var(--gold);background:rgba(199,161,74,.09)}
.toolbar-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:11px}
.count{color:var(--muted);font-size:13px}

/* Gruppen — die Ueberschrift ordnet, sie soll nicht lauter sein als der Inhalt */
.group{margin-bottom:20px}
.group-head{border-bottom:1px solid var(--line);margin-bottom:2px}
.group.hot .group-head{border-bottom-color:#6d3730}
.group-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:transparent;border:0;padding:6px 2px;color:var(--gold2);
  font:inherit;text-align:left;cursor:pointer;
}
.group-title{font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.group.hot .group-title{color:#cf8d81}
.group-toggle::after{content:"−";margin-left:4px;color:var(--line)}
.group.collapsed .group-toggle::after{content:"+"}
.group.collapsed .rows,.group.collapsed .group-sub{display:none}
.group-count{color:var(--gold);font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;margin-left:auto}
.group-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px 7px}
.group-lead{margin:0;font-size:12px;color:var(--muted)}

/* Zeilen — dicht, ein Farbbalken traegt die Kategorie */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:stretch;border-bottom:1px solid var(--line2)}
.row::before{content:"";width:3px;flex:none;background:var(--cat);opacity:.75}
.row:hover{background:rgba(199,161,74,.05)}
.row-pick{display:flex;gap:9px;align-items:center;cursor:pointer;padding:6px 6px;flex:1;min-width:0}
.row input{margin:0;width:18px;height:18px;flex:none;accent-color:var(--gold)}

/* Das Bild ist der schnellste Weg zum Wiedererkennen. Bei 20 px war es
   Dekoration; auf 44 px erkennt man den Gegenstand tatsaechlich. Die
   Zeile wird davon nicht hoeher, weil Name und Untertitel ohnehin zwei
   Zeilen fuellen. */
.cat-mark{flex:none;display:grid;place-items:center;color:var(--cat)}
.cat-mark.is-row{width:44px;height:44px}
.cat-mark.is-sheet{width:64px;height:64px}
.cat-mark img{width:100%;height:100%;object-fit:contain;display:block}
.cat-mark svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.cat-mark.has-item-icon{
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.05),transparent 70%);
  border-radius:3px;
}
.row.is-secured .cat-mark img{opacity:.45}

.row-main{display:flex;flex-direction:column;gap:0;min-width:0}
.row-name{font-weight:600;line-height:1.22}
.row-meta{font-size:11.5px;color:var(--muted);line-height:1.3}
.badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.badge{font-size:10.5px;border:1px solid var(--line);padding:0 5px;color:#c7bcae}
.badge.choice{border-color:#725e2a;color:#e0bd62}
.badge.open{border-color:#4a4438;color:var(--muted)}
.badge.secured{border-color:#4a6b3f;color:#a9c79a}
.row.is-secured .row-name{color:var(--muted)}
.row-info{
  flex:none;width:32px;border:0;background:transparent;
  color:var(--muted);font-family:Georgia,serif;font-style:italic;font-size:16px;cursor:pointer;
}
.row-info:hover{color:var(--gold);background:rgba(199,161,74,.07)}
.empty{color:var(--muted)}

/* Questziele */
.quests{border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.quests summary{cursor:pointer;font-family:Georgia,serif;font-size:17px;color:var(--gold)}
.quests .hint{display:block;font-family:system-ui,sans-serif;font-size:12.5px;color:var(--muted);margin-top:3px}
.quests .rows{margin-top:12px}

/* Aktion */
button{border:1px solid var(--line);border-radius:2px;padding:9px 14px;color:var(--text);background:var(--panel2);font:inherit;cursor:pointer}
button.primary{width:100%;background:var(--gold);border-color:var(--gold);color:#171109;font-weight:800;padding:13px}
button.ghost{background:transparent;color:var(--muted)}

/* Route */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}
.alert{border-left:3px solid var(--amber);background:#2a2115;padding:11px 12px;margin:0 0 10px}
.alert.danger{border-left-color:var(--red);background:#2d1715}
.alert.good{border-left-color:var(--green);background:#172217}
.alert .title{font-weight:800;margin-bottom:2px}
.alert .small{font-size:12px;color:#c6bbac}
.progress{margin-bottom:16px}
.progress-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.progress-num{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.progress-bar{height:4px;background:var(--line2);margin-top:8px}
.progress-bar span{display:block;height:100%;background:var(--gold)}
.progress-next{margin:8px 0 0;font-size:13px;color:var(--muted)}
.progress-next strong{color:var(--text);font-weight:600}

.route{margin-top:18px}
.block{margin-bottom:14px}
.block-head{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:transparent;border:0;border-bottom:1px solid var(--gold2);
  padding:8px 2px;color:var(--gold2);font:inherit;cursor:pointer;text-align:left;
}
.block-head:hover{color:var(--gold)}
.block-name{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.block-count{color:var(--gold);font-variant-numeric:tabular-nums;font-size:13px}
.block-head::after{content:"−";color:var(--gold2);font-size:15px;line-height:1}
.block.collapsed .block-head::after{content:"+"}
.block.collapsed .steps{display:none}
.steps{list-style:none;margin:0;padding:0}
/* Links 11 px Luft, damit der Nummernkreis nicht am Markierungsbalken des
   naechsten Schritts klebt. Der Balken ist 3 px breit und liegt innen; bei
   2 px Abstand schnitt er in den Kreis. */
.steps li{display:flex;gap:12px;padding:11px 2px 11px 11px;border-bottom:1px solid var(--line2)}
.steps li:last-child{border-bottom:0}
.step-check{display:flex;align-items:flex-start;cursor:pointer;position:relative}
.step-check input{position:absolute;opacity:0;width:28px;height:28px;margin:0;cursor:pointer}
.step-num{
  width:28px;height:28px;flex:none;border:1px solid var(--gold2);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);font-size:12px;font-weight:800;
}
.step-check input:focus-visible + .step-num{outline:2px solid var(--gold);outline-offset:2px}
.step-check:hover .step-num{border-color:var(--gold)}
.steps li.done .step-num{background:var(--gold);border-color:var(--gold);color:#171109;font-size:0}
.steps li.done .step-num::after{content:"✓";font-size:14px}
.steps li.done .step-body{opacity:.42}
.steps li.done .name{text-decoration:line-through}
.steps li.next{background:rgba(199,161,74,.08);box-shadow:inset 3px 0 0 var(--gold)}
.step-body{min-width:0}
.route .name{font-weight:700}
.route .actions{font-size:12.5px;color:var(--muted);margin-top:3px}
.route .item-step .name{color:var(--gold)}
.step-title{display:inline-flex;align-items:center;gap:9px;min-width:0}
.cat-mark.is-route{width:32px;height:32px}
.route .decision{margin-top:5px;padding:5px 8px;border-left:2px solid var(--gold2);background:rgba(199,161,74,.07);font-size:13px}
ul.plain{margin:7px 0 0;padding-left:18px;font-size:13px}
.status{color:var(--muted);font-size:12.5px;margin:26px 0 0}

@media(max-width:620px){
  .hero{padding:22px 16px 16px}
  .lockbar-list{columns:1}
  .group-head{flex-direction:column;align-items:flex-start;gap:4px}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* Entscheidungen sind keine Weltereignisse und werden anders markiert. */
.lock-chip.choice .dot{background:var(--gold);box-shadow:0 0 0 2px rgba(199,161,74,.2)}

/* v0.9 */
.lock-chip.passed{border-color:#6d3730;background:#2d1715;text-decoration:line-through}
.lock-chip.passed .dot{background:var(--red)}
.lockbar-lead.passed{color:#e8a99f}
.row.is-secured .row-name{color:var(--muted)}
.badge.secured{border-color:#4a6b3f;color:#a9c79a}

/* v0.9.5 — Reise. Eine Kette von Stationen, keine Karte. */
.journey{margin-top:16px}
.stop{
  display:grid;grid-template-columns:22px 1fr;align-items:start;gap:12px;
  width:100%;text-align:left;background:transparent;border:0;border-radius:0;
  padding:0 4px;color:var(--text);font:inherit;cursor:pointer;position:relative;
}
.stop::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:1px;background:var(--line)}
.stop:first-child::before{top:20px}
.stop:last-child::before{bottom:calc(100% - 20px)}
.stop[disabled]{cursor:default}
.stop-dot{
  width:11px;height:11px;margin:15px 0 0 5px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);position:relative;z-index:1;
}
.stop.todo .stop-dot,.stop.active .stop-dot{border-color:var(--gold);background:var(--gold)}
.stop.active .stop-dot{box-shadow:0 0 0 4px rgba(199,161,74,.18)}
.stop.done .stop-dot{background:var(--green);border-color:var(--green)}
.stop-body{display:flex;flex-direction:column;gap:2px;padding:10px 0;min-width:0}
.stop-name{font-family:Georgia,serif;font-size:17px;color:var(--muted)}
.stop.todo .stop-name,.stop.active .stop-name{color:var(--gold)}
.stop.done .stop-name{color:var(--green)}
.stop-facts{font-size:12.5px;color:var(--muted)}
.stop-lock{
  margin-top:5px;font-size:12px;color:#e8a99f;
  border-left:2px solid var(--red);padding:1px 0 1px 8px;
}
.stop-lock.passed{text-decoration:line-through}
.stop:not([disabled]):hover .stop-name{text-decoration:underline}
.stop:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.stop-targets{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:5px}
.journey-target{
  display:grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--line);border-radius:3px;background:rgba(255,255,255,.025);
}
.cat-mark.is-journey{width:28px;height:28px}
.target-more{font-size:11px;color:var(--gold);padding:0 3px}

/* v0.9.6 */
.hero .scope{font-size:12.5px;color:var(--gold2);margin-top:6px;max-width:60ch}
.lockbar-idle{white-space:normal}
.toolbar-foot{flex-wrap:wrap}
.group-head-right{display:flex;align-items:center;gap:12px;white-space:nowrap}
button.small{padding:4px 9px;font-size:12.5px}
.rewards{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.reward{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;color:var(--gold);
  border:1px solid var(--gold2);border-radius:2px;padding:2px 8px 2px 4px;
  background:rgba(199,161,74,.07);
}
.cat-mark.is-reward{width:24px;height:24px}
.steps li.has-reward{background:rgba(199,161,74,.04)}
.steps li.done .reward{color:var(--muted);border-color:var(--line)}
.blank{
  border:1px solid var(--line);background:var(--panel);
  padding:22px 18px;margin-top:16px;max-width:52ch;
}
.blank p{margin:0}
.blank-sub{margin-top:6px !important;color:var(--muted);font-size:13.5px}
.blank .primary{width:auto;margin-top:14px}
.rewards{align-items:center}
.rewards-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fixes{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px}
.alert .side{margin-top:6px;font-size:13.5px}
.alert .side strong{color:var(--text)}

.lang-switch{display:flex;gap:6px;justify-content:flex-end;margin-bottom:10px}.lang-btn{border:1px solid #6f624b;background:transparent;color:#bdb5a6;padding:6px 10px;border-radius:4px;font-weight:700}.lang-btn.active{color:#e3c47f;border-color:#a78336;background:#2b2415}


/* v0.11 — Glyphen, Detailblatt, Abstand unter der Liste */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
#view-items{padding-bottom:76px}
/* Der Knopf muss ueber den klebenden Gruppenkoepfen liegen. Ohne eigenen
   z-index gewinnt deren 15, und der Kopf des naechsten Blocks legt sich beim
   Scrollen ueber "Route erstellen". Unter der oberen Leiste (25/30) bleibt er
   trotzdem — die beruehren sich nie, aber die Reihenfolge soll stimmen. */
.sticky-cta{
  position:sticky;bottom:0;z-index:20;padding:10px 0 12px;margin-top:16px;
  background:var(--bg);border-top:1px solid var(--line);
}

body.sheet-open{overflow:hidden}
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.66)}
.sheet-panel{
  position:relative;width:100%;max-width:640px;max-height:86vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-bottom:0;
  padding:18px 18px 24px;
}
.sheet-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.sheet-head .cat-mark{width:64px;height:64px;padding:4px;margin-top:0;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.025)}
.sheet-head .cat-mark svg{width:34px;height:34px}
.sheet-head .cat-mark img{width:100%;height:100%;object-fit:contain}
.sheet-head .cat-mark.has-item-icon{border-color:color-mix(in srgb,var(--cat) 45%,var(--line))}
.sheet-head h3{margin:0;font-family:Georgia,serif;font-weight:500;font-size:21px;color:var(--gold)}
.sheet-sub{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.sheet-close{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:24px;line-height:1;padding:0 4px;cursor:pointer}
.sheet-close:hover{color:var(--text)}
.sheet-summary{margin:0 0 14px;font-size:15px;line-height:1.55}
.sheet-verdict{margin:0 0 14px;padding:10px 11px;border-left:3px solid var(--cat, var(--gold));background:rgba(199,161,74,.055);font-size:14px;line-height:1.5}
.sheet-warn{margin:-8px 0 14px;font-size:12.5px;color:#e8a99f;border-left:2px solid var(--red);padding-left:8px}
.sheet-panel h4{
  margin:16px 0 6px;font-family:system-ui,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold2);
}
.sheet-list{list-style:none;margin:0;padding:0;font-size:13.5px}
.sheet-list li{padding:4px 0 4px 10px;border-left:2px solid var(--line)}
.sheet-list li.is-lock{border-left-color:var(--red)}
.sheet-list li.is-choice{border-left-color:var(--gold)}
.sheet-steps{margin:0;padding-left:20px;font-size:13.5px}
.sheet-steps li{padding:3px 0}
.sheet-steps .s-name{display:block;font-weight:600}
.sheet-steps .s-act{display:block;color:var(--muted);font-size:12.5px}
.sheet-foot{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.sheet-note{margin:0;font-size:12px;color:var(--muted)}
.sheet-links{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:8px;font-size:12.5px}
.sheet-links a{color:var(--gold)}
.sheet-links .s-date{color:var(--muted);font-size:11.5px}
.sheet-pick{display:flex;align-items:center;gap:9px;margin-top:14px;cursor:pointer;font-weight:600}
.sheet-pick input{width:17px;height:17px;accent-color:var(--gold)}
@media(min-width:700px){.sheet{align-items:center}.sheet-panel{border-bottom:1px solid var(--line)}}

/* Der Kopf darf auf dem Handy nicht den halben Bildschirm kosten. */
@media(max-width:620px){
  .hero{padding:16px 16px 12px}
  .hero h1{font-size:24px}
  .hero p{font-size:13px;margin-top:5px}
  .hero .intro{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap}
  .toolbar-foot{flex-wrap:nowrap;gap:8px}
  .toolbar-foot .count{flex:1;min-width:0;font-size:12px}
  .toolbar-foot button{padding:6px 9px;font-size:12px;white-space:nowrap}
  .lang-switch{transform:scale(.85);transform-origin:top right}
}
.lead-region{color:var(--gold2)}
.lead-text + .lead-region::before{content:" · ";color:var(--muted)}
@media(max-width:620px){
  .lead-text{display:none}
  .group-sub{padding-bottom:5px}
  .group-toggle{padding:5px 2px}
}

/* v0.11.2 — Teilen / Import / Export */
.run-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.share-banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0 0 12px;padding:10px 12px;border:1px solid var(--gold2);
  background:rgba(199,161,74,.07);font-size:13px;
}
.share-banner strong{display:block;color:var(--gold);margin-bottom:2px}
.share-banner span{color:var(--muted)}
.share-banner-actions{display:flex;gap:7px;flex:0 0 auto}
@media(max-width:620px){
  .section-head{align-items:flex-start}
  .run-actions{justify-content:flex-start}
  .run-actions .ghost{font-size:11.5px;padding:6px 8px}
  .share-banner{align-items:flex-start;flex-direction:column}
}


/* ---------------------------------------------------------------- v0.11.6
   Der Kopf soll den Bildschirm nicht dauerhaft besetzen.

   Drei Ebenen kleben oben: Sperrleiste plus Reiter als ein Block, darunter
   die Werkzeugleiste. Ihre Hoehen misst `js/sticky.js` und schreibt sie nach
   --topbar-h und --sticky-h; feste Pixelwerte wuerden bei zwei Zeilen
   Sperrleiste oder in der englischen Fassung nicht mehr passen.

   Die Werkzeugleiste klebt bewusst nicht mit. Sie zusammenschrumpfen zu
   lassen war ein Versuch von v0.11.6 und wurde zurueckgebaut: der Nutzen war
   gering, das Umschalten wirkte hakelig, und ohne Schrumpfen haetten obere
   Leiste und Werkzeugleiste zusammen rund 290 px dauerhaft belegt. Sie
   scrollt jetzt einfach weg. */

:root{--topbar-h:0px;--sticky-h:0px}

.topbar{position:sticky;top:0;z-index:30}

.toolbar{margin-bottom:16px}

/* Gruppenkopf bleibt sichtbar, solange man in der Gruppe ist. Bei 71 Zeilen
   ist die Frage "in welcher Sperrgruppe bin ich gerade" sonst nur durch
   Zurueckscrollen zu beantworten. */
/* Nur die Titelzeile klebt. Die Unterzeile mit Beschreibung und
   "Alle wählen" darf wegscrollen — sie beantwortet keine Frage, die man
   mitten in einer langen Liste noch hat. */
.group-head{
  position:sticky;top:calc(var(--sticky-h) - 1px);z-index:15;
  background:var(--bg);margin:0 -16px;padding:0 16px;
  border-bottom:1px solid var(--line);
}
.group.hot .group-head{border-bottom-color:#6d3730}
.group-bar{display:flex;align-items:center;gap:10px;padding:6px 0}
.group-toggle{flex:1;min-width:0;justify-content:flex-start}
.group-sub{padding:0 0 6px}

/* Der Kopf selbst darf auf dem Handy kuerzer sein. */
@media(max-width:620px){
  .hero{padding:14px 16px 12px}
  .hero p{margin-top:4px}
  .hero .scope{font-size:12px}
  body.netlify-host .sticky-cta{bottom:64px}
}
/* Die klebende Ueberschrift darf nicht drei Zeilen hoch werden. */
.group-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}


/* ---------------------------------------------------------------- v0.11.8
   Auf breiten Schirmen stehen die Zeilen in zwei Spalten. Bei 71 Eintraegen
   ist eine einspaltige Liste auf dem Desktop halb leerer Bildschirm.
   Auf dem Handy bleibt es einspaltig — dort ist die Breite knapp. */
@media(min-width:820px){
  .rows{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .rows .row:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line2)}
}

/* Gruppen duerfen enger aneinander stehen, seit die Ueberschrift klebt. */
.group{margin-bottom:14px}

/* ---------------------------------------------------------------- v0.11.13
   Warnungen bei grossen Auswahlen. Zehn Kaesten vor Schritt 1 verdecken das
   Ergebnis; die Zusammenfassung sagt in einer Zeile, worum es geht. */
.alert-fold{border:1px solid var(--line);background:var(--panel);margin-bottom:12px}
.alert-fold > summary{
  list-style:none;cursor:pointer;padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.alert-fold > summary::-webkit-details-marker{display:none}
.fold-sum{font-weight:700;color:var(--amber)}
.fold-cta{color:var(--gold);font-size:13px}
.alert-fold[open] .fold-cta::after{content:" ▴"}
.alert-fold:not([open]) .fold-cta::after{content:" ▾"}
.fold-body{padding:0 12px 10px}
.fold-body .alert:last-child{margin-bottom:0}

.alert .more{display:inline}
.alert .more > summary{cursor:pointer;color:var(--gold);list-style:none}
.alert .more > summary::-webkit-details-marker{display:none}
.alert .more[open] > summary{display:block;margin-bottom:2px}

/* Vier Knoepfe neben der Ueberschrift brachen "Deine Route" in zwei Zeilen.
   Auf schmalen Schirmen bekommt der Titel eine eigene Zeile. Die Knoepfe
   selbst bleiben, wie sie sind — das gehoert in einen eigenen Schritt. */
@media(max-width:620px){
  .section-head{flex-wrap:wrap;row-gap:8px}
  .section-head h2{flex:1 0 100%}
}


/* Kopf auf schmalen Schirmen: das Bild rutscht hinter den Text und wird
   ruhiger, damit "Missables" lesbar bleibt. */
@media(max-width:620px){
  .hero p{max-width:none}
  .t-ring{letter-spacing:.16em}
}

/* Sprachwahl gehört in die Ecke, nicht in den Textfluss: seit der Kopf ein
   Flex-Layout ist, sass sie sonst mitten zwischen Titel und Beschreibung. */
.hero .lang-switch{
  position:absolute;top:14px;right:16px;z-index:2;margin:0;
}
/* Die Figur nach links ausblenden, damit „Missables“ nicht gegen die Lupe
   läuft, und insgesamt zurücknehmen: sie ist Kulisse, nicht Inhalt. */
/* Nur noch nach unten ausblenden: seit das Bild eine eigene Spalte hat,
   liegt keine Schrift mehr darauf, und es darf wieder deutlich sein. */
.hero-art{
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
  filter:saturate(.9) brightness(.95);
}


/* Auf dem Handy stand die Figur mitten im Schriftzug. Sie rutscht in die
   untere rechte Ecke, wird kleiner und deutlich blasser; der Titel bekommt
   dafür Luft nach rechts. */
@media(max-width:620px){
  /* Schmal reicht die Spaltenbreite nicht mehr fuer Titel und Bild
     nebeneinander: "MISSABLES" liefe in die Bildspalte. Der Titel bekommt
     deshalb die volle Breite, das Bild steht nur neben den Absaetzen. */
  .hero .hero-inner{
    padding-top:16px;column-gap:12px;
    /* Schmaler als etwa 420 px wird die Textspalte sonst so eng, dass die
     Absaetze mehr Zeilen brauchen als das Bild an Hoehe gewinnt. */
    --art-w:clamp(140px,min(42%,180px),300px);
    grid-template-areas:"title title" "text art";
  }
  .t-ring{font-size:clamp(17px,4.6vw,24px)}
  .t-miss{font-size:clamp(32px,9vw,48px)}
  /* Kein Abschneiden mit Auslassungspunkten: der Satz laesst sich nirgends
     aufklappen, drei Zeilen mit "…" waeren also nur eine kaputte Erklaerung.
     Der Kopf scrollt ohnehin weg. */
  .hero .intro{display:block;-webkit-line-clamp:none;overflow:visible}
  .hero p{max-width:none;padding-right:0}
}

.hero .lang-switch{position:absolute;top:14px;right:16px;z-index:2;margin:0}
@media(max-width:620px){.hero .lang-switch{top:10px;right:12px}}