/* Farben aus dem Entwurf gemessen: Cyan #29A8E0, Hellgrau #ECEBE7, Schwarz. */
:root{
  --cyan:#29A8E0; --grau:#ECEBE7; --grau-linie:#D8D6D1;
  --schwarz:#0B0B0C; --text:#2A2A2D; --leise:#6E6E73; --weiss:#fff;
  --breit:1240px;
}
/* `ws-` davor, und zwar aus Erfahrung. Die erste Fassung nannte das hier
   `.rahmen` und `.kopf` wie auf der Website. Im Portal heisst `.rahmen` aber
   der Inhaltsbereich neben der Seitenleiste und traegt `min-height:100vh` -
   der Fuss der Anmeldeseite wurde dadurch 980 Pixel hoch und lief unten ins
   Schwarze aus. Zwei Stylesheets auf einer Seite vertragen nur Namen, die es
   genau einmal gibt. */
.ws-rahmen{max-width:var(--breit);margin:0 auto;padding:0 24px}

/* Der Fuss gehoert an den unteren Rand, auch wenn die Seite kurz ist. Auf
   der Anmeldung mit einer Frage blieb sonst ein grauer Streifen darunter
   stehen. Bewusst an `body.gast` und `body.konto-seite` gehaengt und nicht an
   `body`: Die Teamseiten laden dieses Stylesheet nicht, aber eine Regel auf
   blankem `body` waere trotzdem eine Einladung zum naechsten Konflikt. */
body.gast, body.konto-seite{min-height:100vh;display:flex;flex-direction:column}
body.gast > footer, body.konto-seite > footer{margin-top:auto}

/* Der schwarze Seitenkopf. Steht im gemeinsamen Baustein, weil ihn auch die
   Anmeldung traegt. Benny am 13.10.2026: „Dass du bei der Buchung oben noch so
   einen schwarzen Header reinmachst, damit alle Seiten wirklich komplett
   gleich aussehen." */
.seitenkopf{background:var(--schwarz);color:var(--weiss);padding:58px 0 52px}
.seitenkopf h1{font-family:Oswald,'Arial Narrow',sans-serif;text-transform:uppercase;
               letter-spacing:.04em;line-height:1.08;margin:0;
               font-size:clamp(30px,4.6vw,48px);font-weight:600}
.seitenkopf h1::after{content:"";display:block;width:64px;height:4px;background:var(--cyan);margin-top:16px}
.seitenkopf p{margin:18px 0 0;max-width:64ch;color:#C8C8CC;
              font:400 17px/1.6 'Source Sans 3',system-ui,sans-serif}

/* Die Jahre zum Anklicken. Kaestchen, keine Liste - man sieht auf einen Blick,
   wo Luecken sind.
 
   Steht im gemeinsamen Baustein, weil es zweimal gebraucht wird: im Konto und
   in der Rueckmeldestrecke. Die beiden schreiben dieselben Felder, also
   sollen sie auch gleich aussehen. */
.jahr-wahl{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.jahr-feld{display:block;margin:0;cursor:pointer}
.jahr-feld input{position:absolute;opacity:0;width:0;height:0}
.jahr-feld span{display:block;padding:8px 14px;border:1px solid var(--grau-linie);
                background:var(--weiss);font-family:Oswald,sans-serif;
                letter-spacing:.05em;font-size:15px;color:var(--leise)}
.jahr-feld input:checked + span{background:var(--cyan);border-color:var(--cyan);
                                color:var(--weiss)}
.jahr-feld input:focus-visible + span{outline:2px solid var(--schwarz);outline-offset:2px}

header{position:sticky;top:0;z-index:50;background:var(--schwarz);color:var(--weiss)}
.ws-kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;
      min-height:72px;max-width:var(--breit);margin:0 auto;padding:0 24px}
.marke{display:flex;align-items:center;text-decoration:none;flex:none}
.marke img{height:38px;width:auto;filter:invert(1)}
.schalter{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer}
nav ul{display:flex;flex-wrap:wrap;gap:4px 22px;list-style:none;margin:0;padding:0}
nav a{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.07em;
      font-size:13.5px;text-decoration:none;color:#D5D5D8;padding:6px 0;
      border-bottom:2px solid transparent;display:block}
nav a:hover,nav a.hier{color:var(--weiss);border-bottom-color:var(--cyan)}
/* „Mein Konto" steht neben dem Anmelde-Knopf, aber als Umriss statt gefuellt.
   Beides gleich laut waere falsch: Buchen ist der Weg fuer viele, ins eigene
   Konto gehen der fuer die, die schon gebucht haben. */
nav a.konto{border:1px solid rgba(255,255,255,.4);padding:8px 14px;margin-left:8px;
            border-bottom-width:1px}
nav a.konto:hover{border-color:var(--weiss);color:var(--weiss);
                  border-bottom-color:var(--weiss)}
footer{background:var(--schwarz);color:#9A9AA0;font-size:14.5px;padding:40px 0}
footer .ws-rahmen{display:flex;flex-wrap:wrap;gap:20px 30px;justify-content:space-between}
footer a{color:#D5D5D8;text-decoration:none}
footer a:hover{color:var(--cyan)}

@media(max-width:900px){
  .marke img{height:30px}
  .schalter{display:block;order:3}
  nav{order:4;width:100%;display:none}
  body.offen nav{display:block}
  nav ul{flex-direction:column;gap:0;padding-bottom:12px}
  nav a{padding:11px 0;border-bottom:1px solid #26262A}
}