/* Spieleabend-Planer. Eigenstaendiges Stylesheet statt gallery.css:
   Die Seite teilt mit der Startseite nur Farben und Schrift, nicht das
   Layout — und gallery.css ist inzwischen ueber 100 kB gross. */

:root{
  --ink:#17152d; --muted:#68667a; --purple:#6437d6; --purple-dark:#4d21aa;
  --cream:#fff9eb; --gold:#f2c14f; --line:#e4dfee; --mint:#35cda5;
  --shadow:0 18px 55px rgba(46,29,83,.10);
  --display:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,var(--cream) 0%,#fff 42%);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.pl-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


#pl-main{width:min(940px,calc(100% - 32px));margin:0 auto;padding-bottom:60px}
.pl-eyebrow{display:block;color:var(--purple);font-size:.68rem;font-weight:950;letter-spacing:.14em}
.pl-intro{padding:22px 0 8px}
.pl-intro h1{margin:10px 0 12px;font-size:clamp(2.1rem,5.5vw,3.3rem);line-height:1.04;letter-spacing:-.02em}
.pl-intro p{max-width:62ch;margin:0;color:var(--muted)}

.pl-form{display:grid;gap:18px;margin:26px 0 0;padding:0;border:0}
.pl-step{margin:0;padding:20px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 10px 28px rgba(45,25,80,.06)}
/* Ein <legend> wird vom Browser in die Rahmenlinie des <fieldset> gesetzt: die
   Linie bekommt an dieser Stelle eine Luecke, und die Ueberschrift sitzt halb
   darueber. Auf den weissen Karten sah sie dadurch aus, als haenge sie in der
   Luft. float:left nimmt das Element aus dieser Sonderbehandlung — der Rahmen
   bleibt geschlossen, die Zeile steht normal im Kasten. Das ::after raeumt den
   Float wieder auf, damit die Karte ihre volle Hoehe behaelt. */
.pl-step legend{float:left;width:100%;display:flex;align-items:center;gap:10px;padding:0;font-size:1.05rem;font-weight:950}
.pl-step::after{content:"";display:block;clear:both}
.pl-step__number{display:grid;width:28px;height:28px;place-items:center;border-radius:9px;background:var(--purple);color:#fff;font-size:.82rem}
/* clear:both, weil die Legende darueber floatet — ohne das ruecken Hinweis und
   Auswahlfelder neben sie statt darunter. */
.pl-step__hint{clear:both;margin:10px 0 0;color:var(--muted);font-size:.78rem}
.pl-options{clear:both;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}
.pl-options--compact{grid-template-columns:repeat(6,minmax(0,1fr))}
.pl-option{position:relative;display:grid;align-content:center;justify-items:center;gap:3px;min-height:58px;padding:10px 8px;border:1.5px solid var(--line);border-radius:14px;background:#fcfbfd;text-align:center;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.pl-option input{position:absolute;opacity:0;width:1px;height:1px}
.pl-option__label{font-size:.86rem;font-weight:800}
.pl-option small{color:var(--muted);font-size:.66rem}
.pl-option:hover{border-color:var(--purple);transform:translateY(-1px)}
/* Die Klasse .is-selected setzt niemand: spieleabend-planen.js rendert die
   Felder neu und markiert das Radio mit checked. Ohne die zweite Zeile war die
   getroffene Wahl deshalb unsichtbar — dieselbe Loesung wie bei
   .pl-price-option weiter unten. */
.pl-option.is-selected,
.pl-option:has(input:checked){border-color:var(--purple);background:#efe8fd}
.pl-option:has(input:focus-visible){outline:3px solid var(--purple);outline-offset:2px}
.pl-status{margin:14px 2px 0;color:var(--muted);font-size:.8rem;font-weight:700}

.pl-result{margin-top:26px;padding:24px;border:1px solid #d8ceea;border-top:4px solid var(--gold);border-radius:26px;background:#fff;box-shadow:var(--shadow)}
.pl-result__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pl-result__head h2{margin:8px 0 6px;font-size:clamp(1.6rem,3.6vw,2.2rem);line-height:1.05}
.pl-result__facts{margin:0;color:var(--muted);font-size:.82rem;font-weight:700}
.pl-reroll{min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--purple);font:inherit;font-size:.76rem;font-weight:900;cursor:pointer}
.pl-reroll:hover{border-color:var(--purple)}

.pl-sequence{display:grid;gap:9px;margin:20px 0 0;padding:0;list-style:none;counter-reset:pl}
.pl-sequence li{display:grid;grid-template-columns:30px 44px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fcfbfd;counter-increment:pl}
.pl-sequence li::before{content:counter(pl);display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;font-size:.68rem;font-weight:950}
.pl-sequence img{width:42px;height:42px;border-radius:10px;object-fit:contain;background:#f6f2ff}
.pl-sequence div{display:grid;min-width:0}
.pl-sequence strong{font-size:.9rem}
.pl-sequence small{color:var(--muted);font-size:.68rem}
.pl-sequence time{color:var(--purple);font-size:.7rem;font-weight:900}

.pl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.pl-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 22px;border:0;border-radius:15px;background:var(--purple);color:#fff;font:inherit;font-weight:900;text-decoration:none;cursor:pointer;transition:background .16s ease,transform .16s ease}
.pl-primary:hover{background:var(--purple-dark);transform:translateY(-1px)}
.pl-primary--gold{background:var(--gold);color:#4a3708}
.pl-primary--gold:hover{background:#e0ad39}
.pl-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.pl-secondary{min-height:52px;padding:0 18px;border:1px solid var(--line);border-radius:15px;background:#fff;color:inherit;font:inherit;font-weight:800;cursor:pointer}
.pl-secondary:hover{border-color:var(--purple);color:var(--purple)}
.pl-free-note{margin:12px 2px 0;color:var(--mint);font-size:.76rem;font-weight:800}

.pl-premium{margin-top:26px;padding:20px;border:1px dashed #d9c48a;border-radius:20px;background:linear-gradient(150deg,#fffaf0 0%,#fff 70%)}
.pl-premium__badge{display:inline-block;padding:4px 9px;border-radius:7px;background:var(--gold);color:#4a3708;font-size:.6rem;font-weight:950;letter-spacing:.12em}
.pl-premium__head h3{margin:11px 0 7px;font-size:1.25rem}
.pl-premium__head p{margin:0;max-width:60ch;color:var(--muted);font-size:.84rem}
.pl-premium__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px;margin:16px 0 0;padding:0;list-style:none}
.pl-premium__list li{position:relative;padding-left:24px;color:var(--ink);font-size:.82rem;font-weight:700}
.pl-premium__list li::before{content:"🔒";position:absolute;left:0;font-size:.8rem}
.pl-premium__cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px}
.pl-price{color:var(--muted);font-size:.76rem;font-weight:800}

.pl-modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(23,21,45,.55)}
.pl-modal[hidden]{display:none}
.pl-modal__card{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;padding:26px 24px;border-radius:22px;background:#fff;box-shadow:var(--shadow)}
.pl-modal__close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:10px;background:#f2eefb;color:var(--purple);font-size:1.3rem;line-height:1;cursor:pointer}
.pl-modal__card h3{margin:0 0 8px;font-size:1.35rem}
.pl-modal__card>p{margin:0 0 16px;color:var(--muted);font-size:.84rem}
.pl-field{display:block;margin:0 0 14px;padding:0;border:0}
.pl-field>span,.pl-field legend{display:block;margin-bottom:6px;color:var(--muted);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.pl-field input[type=email]{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--line);border-radius:13px;background:#fcfbfd;font:inherit}
.pl-field input[type=email]:focus-visible{outline:3px solid var(--purple);outline-offset:1px}
.pl-price-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.pl-price-option{position:relative;display:grid;place-items:center;min-height:44px;border:1.5px solid var(--line);border-radius:12px;background:#fcfbfd;font-size:.78rem;font-weight:800;cursor:pointer}
.pl-price-option input{position:absolute;opacity:0;width:1px;height:1px}
.pl-price-option:has(input:checked){border-color:var(--purple);background:#efe8fd;color:var(--purple)}
.pl-price-option:has(input:focus-visible){outline:3px solid var(--purple);outline-offset:2px}
.pl-modal__card button[type=submit]{width:100%;margin-top:4px}
.pl-modal__message{margin:10px 0 0;color:var(--purple);font-size:.8rem;font-weight:800;min-height:1.2em}
.pl-modal__legal{margin:12px 0 0;color:var(--muted);font-size:.68rem}
.pl-modal__legal a{color:var(--purple)}

.pl-footer{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding:26px 16px 40px;border-top:1px solid var(--line)}
.pl-footer a{color:var(--muted);font-size:.76rem;font-weight:700;text-decoration:none}
.pl-footer a:hover{color:var(--purple)}

@media(max-width:720px){
  .pl-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Acht Spielerzahlen und vier Dauern passen in vier Spalten. Vorher standen
     sie zu dritt und brauchten drei bzw. zwei Zeilen — zwei Zeilen mehr, die
     das Ergebnis nach unten geschoben haben. */
  .pl-options--compact{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pl-premium__list{grid-template-columns:1fr}
  .pl-actions>*{width:100%}
  .pl-price-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Kompakter auf dem Handy ----------------------------------------------
   Dieselbe Ueberlegung wie im 900-px-Block, nur andersherum geloest: Auf dem
   Handy koennen die drei Schritte nicht nebeneinander stehen, also wird jede
   einzelne Zeile flacher. Ziel ist, dass der Vorschlag nach einem kurzen Wisch
   erscheint statt nach dreien. Die Tippflaechen bleiben dabei ueber 44 px hoch,
   damit WCAG 2.5.8 (AA) weiter erfuellt ist. */
@media(max-width:720px){
  #pl-main{padding-bottom:34px}
  .pl-intro{padding:12px 0 2px}
  .pl-intro h1{margin:6px 0 7px;font-size:clamp(1.7rem,6.4vw,2.2rem);line-height:1.08}
  .pl-intro p{font-size:.87rem;line-height:1.42}

  .pl-form{gap:11px;margin-top:15px}
  .pl-step{padding:13px 13px 14px;border-radius:18px}
  .pl-step legend{gap:8px;font-size:.95rem}
  .pl-step__number{width:24px;height:24px;border-radius:8px;font-size:.76rem}
  /* Der Hinweis wiederholt, was die ausgegrauten Felder ohnehin zeigen: zu
     kleine Runden sind nicht waehlbar. Fuer Screenreader bleibt er lesbar. */
  .pl-step__hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pl-options{gap:7px;margin-top:10px}
  .pl-option{min-height:46px;padding:7px 5px;border-radius:12px}
  /* Die Beschriftung kommt aus spieleabend-planen.js als schlichtes <span>
     ohne Klasse — .pl-option__label greift dort nie und die Felder standen
     deshalb in voller Fliesstextgroesse. Deshalb hier das Element selbst. */
  .pl-option>span{font-size:.84rem;font-weight:800;line-height:1.2}
  .pl-options--compact .pl-option>span{font-size:.78rem}
  .pl-status{margin-top:9px;font-size:.76rem}

  .pl-result{margin-top:15px;padding:16px 15px;border-radius:20px}
  .pl-result__head{gap:10px}
  .pl-result__head h2{margin:5px 0 5px;font-size:1.4rem}
  .pl-result__facts{font-size:.78rem}
  .pl-sequence{gap:7px;margin-top:13px}
  .pl-sequence li{grid-template-columns:24px 34px minmax(0,1fr) auto;gap:9px;padding:7px 9px;border-radius:12px}
  .pl-sequence img{width:34px;height:34px}
  .pl-actions{gap:8px;margin-top:14px}
  .pl-primary,.pl-secondary{min-height:48px}
  .pl-free-note{margin-top:9px}

  .pl-footer{gap:14px;padding:18px 16px 26px}
}
@media(max-width:400px){
  /* Auf den schmalsten Geraeten bleiben es vier Spalten — gerade dort zaehlt
     jede eingesparte Zeile am meisten. Statt einer Spalte weniger wird die
     Schrift kleiner, damit "12 Personen" nicht dreizeilig umbricht. */
  .pl-options--compact .pl-option{padding:6px 3px}
  .pl-options--compact .pl-option>span{font-size:.73rem}
  .pl-intro h1{font-size:1.62rem}
}
@media(prefers-reduced-motion:reduce){
  .pl-option,.pl-primary{transition:none}
  .pl-option:hover,.pl-primary:hover{transform:none}
}

/* --- Kompaktere Anordnung -------------------------------------------------
   Auf dem Desktop standen die drei Schritte untereinander; zusammen mit der
   Einleitung lag der Vorschlag dadurch immer unter der Falz — ausgerechnet
   das Ergebnis, wegen dem die Seite existiert. Ab 900 px stehen die Schritte
   nebeneinander, sodass das Ergebnis direkt darunter beginnt. */
@media(min-width:900px){
  #pl-main{width:min(1120px,calc(100% - 40px))}
  .pl-intro{padding:12px 0 4px}
  .pl-intro h1{margin:6px 0 6px;font-size:2.3rem}
  .pl-intro p{font-size:.9rem}
  .pl-form{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
  .pl-step{padding:15px 15px 16px}
  .pl-step legend{font-size:.94rem}
  /* Der Hinweis unter Schritt 2 wuerde die drei Spalten unterschiedlich hoch
     machen. Er bleibt fuer Screenreader lesbar, kostet aber keine Zeile. */
  .pl-step__hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pl-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px}
  .pl-options--compact{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl-option{min-height:46px;padding:7px 6px}
  .pl-option__label{font-size:.8rem}
  .pl-status{margin-top:10px;font-size:.76rem}
  .pl-result{margin-top:14px;padding:18px 20px}
  .pl-result__head h2{margin:5px 0 4px;font-size:1.5rem}
  .pl-sequence{gap:6px;margin-top:13px}
  .pl-sequence li{padding:7px 11px}
  .pl-actions{margin-top:14px}
  .pl-primary,.pl-secondary{min-height:46px}
  .pl-free-note{margin-top:9px}
  /* Der Premium-Block ist bewusst der letzte Baustein: Er darf den kostenlosen
     Vorschlag nicht aus dem Bild schieben. */
  .pl-premium{margin-top:18px;padding:16px 18px}
}

/* --- Header, 1:1 aus gallery.css -----------------------------------------
   Der Planer soll denselben Kopf tragen wie die Startseite. Diese Regeln
   sind woertlich uebernommen, damit "gleich aussehen" nicht heisst
   "aehnlich aussehen". Wer den Header auf der Startseite aendert, muss ihn
   hier mitaendern — tests/planner.cjs prueft, dass beide Seiten dasselbe
   Markup tragen, und schlaegt sonst fehl. */
@font-face{font-family:"JOKO Nunito";src:url("assets/fonts/Nunito-Variable.ttf") format("truetype");font-weight:200 1000;font-style:normal;font-display:swap}
body{font-family:"JOKO Nunito","Trebuchet MS",system-ui,sans-serif}
a{color:inherit;text-decoration:none}

.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:1000;top:10px;left:10px;padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff;transform:translateY(-150%)}
.skip-link:focus{transform:none}

.site-header{position:sticky;z-index:50;top:0;border-bottom:1px solid rgba(228,223,238,.8);background:rgba(255,255,255,.9);backdrop-filter:blur(16px)}
.nav-shell{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:38px;width:min(1240px,calc(100% - 32px));min-height:74px;margin:auto}
.brand-link img{width:126px;height:58px;object-fit:contain}
.site-nav{display:flex;align-items:center;justify-content:center;gap:30px}
.site-nav a{position:relative;color:#504d61;font-size:.9rem;font-weight:700}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:2px;background:var(--purple);transition:right .2s ease}
.site-nav a:hover{color:var(--ink)}
.site-nav a:hover::after{right:0}
/* Einziger Zusatz gegenueber der Startseite: Dort ist kein Eintrag je die
   aktuelle Seite, hier schon. */
.site-nav a[aria-current="page"]{color:var(--purple)}
.site-nav a[aria-current="page"]::after{right:0}
.header-actions{display:flex;align-items:center;gap:12px}
.overview-lang{position:relative;display:block}
.overview-lang::after{content:"⌄";position:absolute;right:10px;top:50%;color:var(--purple);font-size:.82rem;font-weight:950;line-height:1;pointer-events:none;transform:translateY(-58%)}
.overview-lang select{width:72px;height:40px;padding:0 28px 0 13px;border:1px solid var(--line);border-radius:10px;background:#f7f5fb;color:var(--purple);font:900 .75rem/1 "JOKO Nunito","Trebuchet MS",system-ui,sans-serif;cursor:pointer;appearance:none;box-shadow:0 2px 8px rgba(45,25,80,.06)}
.overview-lang select:hover{border-color:#c7b7e6;background:#fff}
.overview-lang select:focus-visible{outline:3px solid #20afe1;outline-offset:3px}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.menu-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

@media(max-width:1050px){
  .nav-shell{gap:18px}
  .site-nav{gap:16px}
  .site-nav a{font-size:.82rem}
}
@media(max-width:780px){
  .nav-shell{grid-template-columns:auto 1fr auto;min-height:66px}
  .menu-toggle{display:grid;place-items:center;grid-column:3}
  .header-actions{grid-column:2;grid-row:1;justify-content:end}
  .site-nav{position:fixed;top:66px;left:0;right:0;display:none;align-items:stretch;flex-direction:column;gap:0;padding:14px 20px 22px;border-bottom:1px solid var(--line);background:#fff;box-shadow:0 20px 40px rgba(45,25,80,.12)}
  .site-nav.open{display:flex}
  .site-nav a{padding:12px;font-size:1rem}
  .site-nav a::after{display:none}
}
@media(max-width:560px){
  .nav-shell{width:calc(100% - 20px)}
  .brand-link img{width:110px;height:52px}
  .overview-lang select{width:67px;height:38px}
  .menu-toggle{width:38px;height:38px}
}
@media(pointer:coarse){
  .site-nav a{min-height:44px}
}

/* Feinschliff fuer die Falz. Gemessen bei 1920x911: Der Vorschlag begann bei
   449 px, die dritte Zeile endete bei 741 px. Auf einem 1366x768-Laptop
   (rund 640 px sichtbar) waere die dritte Zeile abgeschnitten gewesen.
   Die folgenden Werte holen das zurueck, ohne die Karten zu quetschen —
   der Header bleibt unangetastet, er soll identisch zur Startseite sein. */
@media(min-width:900px){
  .pl-intro{padding:8px 0 2px}
  .pl-intro h1{margin:4px 0 4px}
  /* Ohne Breitenbegrenzung passt der Satz in eine Zeile statt in zwei. */
  .pl-intro p{max-width:none}
  .pl-step{padding:13px 14px 14px}
  .pl-option{min-height:42px}
  .pl-status{margin-top:8px}
  .pl-result{padding:16px 20px}
  .pl-result__head h2{font-size:1.35rem}
  .pl-sequence{gap:5px;margin-top:11px}
  .pl-sequence li{padding:6px 11px}
  .pl-sequence img{width:36px;height:36px}
}
@media(min-width:900px){
  /* "SPIELEABEND PLANEN" ueber "Drei Klicks. Ein fertiger Abend." und
     "EUER ABEND" ueber "Das schlagen wir vor" sagen jeweils dasselbe zweimal.
     Auf dem Desktop kosten sie zusammen 34 px — genau die, die der dritte
     Spielvorschlag auf einem 1366x768-Laptop braucht. Auf schmalen Geraeten
     bleiben sie stehen, dort wird ohnehin gescrollt. */
  .pl-intro .pl-eyebrow,.pl-result__head .pl-eyebrow{display:none}
}
.pl-option:has(input:disabled){opacity:.38;cursor:not-allowed}.pl-option:has(input:disabled) span{cursor:not-allowed}