/* 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}
}

*{box-sizing:border-box}
/* Auf der Website heissen sie weiter `.rahmen` und `.kopf`. Der gemeinsame
   Baustein oben benutzt `ws-`, damit er im Portal nichts umwirft. */
.rahmen{max-width:var(--breit);margin:0 auto;padding:0 24px}
.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}
body{margin:0;background:var(--weiss);color:var(--text);
     font:400 17px/1.6 'Source Sans 3',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,.versal{font-family:Oswald,'Arial Narrow',sans-serif;text-transform:uppercase;
                 letter-spacing:.04em;line-height:1.08;margin:0}
.hand{font-family:Caveat,cursive;text-transform:none;letter-spacing:0}
section{padding:72px 0}

/* Der mitlaufende Anmelde-Knopf. Benny am 13.10.2026: „Einen Anmelde-Button,
   so als Floating-Button, wo man aber mit dem kleinen X den auch mal
   wegklicken kann."

   Er steht unten rechts und bleibt beim Scrollen stehen. Das X daneben ist
   kein Zierrat: Ein Knopf, der sich nicht wegklicken laesst, verdeckt auf dem
   Handy dauerhaft ein Stueck Seite. Wer ihn schliesst, hat oben weiter den
   Knopf in der Leiste.

   Erst sichtbar, wenn der Aufmacher durch ist. Ganz oben steht der Knopf in
   der Leiste direkt daneben, zwei gleiche Knoepfe nebeneinander sind einer
   zu viel. */
.mitlauf{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;
         align-items:stretch;box-shadow:0 6px 24px rgba(0,0,0,.28);
         opacity:0;visibility:hidden;transform:translateY(12px);
         transition:opacity .25s,transform .25s,visibility .25s}
.mitlauf.da{opacity:1;visibility:visible;transform:none}
.mitlauf a{background:var(--cyan);color:var(--weiss);text-decoration:none;
           font-family:Oswald,sans-serif;text-transform:uppercase;
           letter-spacing:.07em;font-size:14px;padding:14px 22px;
           display:flex;align-items:center}
.mitlauf a:hover{background:var(--schwarz)}
.mitlauf button{background:#1E8FC0;color:var(--weiss);border:0;cursor:pointer;
                font-size:17px;line-height:1;padding:0 12px;
                border-left:1px solid rgba(255,255,255,.35)}
.mitlauf button:hover{background:var(--schwarz)}
@media(max-width:700px){
  .mitlauf{right:12px;bottom:12px}
  .mitlauf a{font-size:13px;padding:12px 16px}
}


.auf img{width:100%}
.zaehler{background:var(--cyan);color:var(--weiss)}
.zaehler .rahmen{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
                 gap:16px 44px;padding-top:22px;padding-bottom:22px}
.zelle{text-align:center;min-width:76px}
.zelle b{display:block;font-family:Oswald,sans-serif;font-size:40px;font-weight:600;line-height:1}
.zelle span{font-family:Oswald,sans-serif;font-size:11.5px;letter-spacing:.17em;
            text-transform:uppercase;opacity:.9}
.zaehler .wozu{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.1em;
               font-size:14px;border-left:2px solid rgba(255,255,255,.45);padding-left:22px}

.breitbild{max-height:460px;overflow:hidden;background:var(--schwarz)}
.breitbild img{width:100%;object-fit:cover;max-height:460px}

.anmeldung{background:var(--schwarz);color:var(--weiss);
           border-bottom:3px solid var(--cyan)}
.anmeldung .rahmen{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;
                   justify-content:space-between;padding-top:20px;padding-bottom:20px}
.anmeldung b{display:block;font-family:Oswald,sans-serif;text-transform:uppercase;
             letter-spacing:.05em;font-size:17px}
.anmeldung span{font-size:15px;color:#B9B9BE}
.anmeldung a{background:var(--cyan);color:var(--weiss);text-decoration:none;
             font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.09em;
             font-size:14px;padding:13px 28px;white-space:nowrap}
.anmeldung a:hover{background:var(--weiss);color:var(--schwarz)}


.kapitel{margin-bottom:34px}
.kapitel h2{font-size:clamp(26px,3.6vw,38px);font-weight:600;color:var(--schwarz)}
.kapitel .strich{width:64px;height:4px;background:var(--cyan);margin-top:14px}
.kapitel p{margin:16px 0 0;max-width:64ch;color:var(--leise)}
/* Mailadresse und Telefonnummer stehen im Text, nicht in einem Kasten.
   Benny am 10.10.2026: ueber den Fotos waren es zu viele Kaesten
   uebereinander. */
.kapitel p a{color:var(--schwarz);text-decoration:none;
             border-bottom:2px solid var(--cyan);white-space:nowrap}
.kapitel p a:hover{border-bottom-color:var(--schwarz)}

.grau{background:var(--grau)}
.karten{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.karte{background:var(--weiss);border-top:5px solid var(--cyan);padding:30px 26px;
       display:flex;flex-direction:column}
.karte h3{font-size:20px;font-weight:600;color:var(--schwarz)}
.karte .was{font-size:14.5px;color:var(--leise);margin:6px 0 20px;min-height:2.7em}
.karte .preis{font-family:Oswald,sans-serif;font-size:46px;font-weight:600;
              color:var(--schwarz);line-height:1}
.karte .preis i{font-style:normal;font-size:17px;color:var(--leise);margin-left:6px}
.karte ul{list-style:none;margin:20px 0 24px;padding:0;font-size:15.5px}
.karte li{padding:7px 0 7px 24px;position:relative;border-bottom:1px solid var(--grau-linie)}
.karte li:last-child{border-bottom:0}
.karte li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;background:var(--cyan)}
.knopf{margin-top:auto;display:block;text-align:center;font-family:Oswald,sans-serif;
       text-transform:uppercase;letter-spacing:.09em;font-size:14px;padding:13px;
       background:var(--grau);color:var(--leise);text-decoration:none}
/* Ein Knopf ist schwarz oder blau, immer mit weisser Schrift. Bennys Regel
   vom 12.10.2026: „Ich moechte gerne solche Buttons, dass es entweder
   schwarze Button sind mit weisser Schrift drin oder blaue Button mit weisser
   Schrift drin."

   `a.knopf` reichte, solange jeder Knopf ein Verweis war. Im Kundenkonto sind
   es Formularknoepfe, und die fielen auf die graue Grundregel darueber
   zurueck: graue Schrift auf grauem Grund, kaum lesbar. Gefunden am
   13.10.2026 beim Ansehen der fertigen Seite. */
a.knopf, button.knopf{background:var(--schwarz);color:var(--weiss);border:0;
                      cursor:pointer}
a.knopf:hover, button.knopf:hover{background:var(--cyan);color:var(--weiss)}
.hinweis{margin:26px 0 0;font-size:15px;color:var(--leise)}

.worte{background:var(--schwarz);color:var(--weiss);padding:36px 0}
.worte .rahmen{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px}
.worte span{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:15px}
.worte span:nth-child(even){color:var(--cyan)}

.zwei{display:grid;gap:44px;grid-template-columns:1.15fr .85fr;align-items:start}
.kasten{background:var(--grau);padding:30px}
.kasten h3{font-size:18px;font-weight:600;color:var(--schwarz);margin-bottom:14px}
.liste{list-style:none;margin:0;padding:0}
.liste li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--grau-linie)}
.liste li:last-child{border-bottom:0}
.liste li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:3px;background:var(--cyan)}

.wege{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));margin-top:26px}
.weg{background:var(--weiss);padding:22px 24px}
.grau .weg{background:var(--weiss)}
.weg b{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.07em;
       font-size:13.5px;color:var(--cyan);display:block;margin-bottom:8px}
.weg p{margin:0;font-size:15.5px}

/* Workshops als Zeitstrahl */
.strahl{position:relative;padding-left:0}
.tag{margin:38px 0 20px;display:flex;align-items:center;gap:16px}
.tag:first-child{margin-top:0}
.tag h3{font-size:24px;font-weight:600;color:var(--schwarz);white-space:nowrap}
.tag::after{content:"";flex:1;height:3px;background:var(--cyan)}
.block{display:grid;grid-template-columns:104px 1fr;gap:24px;align-items:start;
       padding:0 0 26px;position:relative}
.block::before{content:"";position:absolute;left:51px;top:8px;bottom:0;width:2px;
               background:var(--grau-linie)}
.block:last-child::before{display:none}
.uhr{position:relative;text-align:right;padding-right:22px;padding-top:2px}
.uhr::after{content:"";position:absolute;right:-6px;top:6px;width:14px;height:14px;
            background:var(--cyan);border:3px solid var(--grau);border-radius:50%}
.uhr .punkt{display:inline-block;width:10px;height:10px;background:var(--grau-linie);
            border-radius:50%;margin-top:9px}
.uhr b{display:block;font-family:Oswald,sans-serif;font-size:20px;font-weight:600;
       color:var(--schwarz);line-height:1.1}
.uhr span{font-size:13px;color:var(--leise)}
.kurse{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.kurs{background:var(--weiss);border-top:3px solid var(--cyan);padding:16px 18px}
.kurs-kopf{margin-bottom:10px;display:flex;gap:12px;align-items:flex-start}
.icon{width:26px;height:26px;flex:none;stroke:var(--cyan);stroke-width:1.7;fill:none;
      stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
/* Der Ausschnitt sitzt bewusst oberhalb der Mitte. Auf den Workshopbildern
   stehen Menschen auf einer Bühne, und deren Köpfe sind im oberen Drittel.
   Mit dem Vorgabewert 50% schnitt es ihnen den Kopf ab (Benny, 11.10.2026). */
.mini{width:100%;height:132px;object-fit:cover;object-position:center 30%;
      background:var(--grau);margin:-16px -18px 12px;width:calc(100% + 36px)}
.kurs h4{font-family:Oswald,sans-serif;text-transform:none;letter-spacing:0;
         font-size:16.5px;font-weight:600;color:var(--schwarz);margin:0;line-height:1.25}
.kurs .meta{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.06em;
            font-size:11.5px;color:var(--cyan);margin-top:5px}
.kurs p{margin:0;font-size:14.5px;line-height:1.5;color:var(--text)}
.plan{display:inline-flex;gap:18px;align-items:center;background:var(--grau);
      padding:14px 22px 14px 14px;text-decoration:none;max-width:100%}
.plan:hover{background:#E3E2DD}
.plan img{width:62px;height:auto;box-shadow:0 1px 8px rgba(0,0,0,.2);flex:none}
.plan-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.plan-text b{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.05em;
             font-size:17px;color:var(--schwarz)}
.plan-text span{font-size:14.5px;color:var(--leise)}
.plan-oeffnen{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;
              font-size:12.5px;color:var(--cyan)!important;margin-top:4px}

/* Personen */
/* Kleinere Kacheln seit dem 13.10.2026. Benny: „Viele sind ja durch KI
   generiert und sehen nicht hundertprozentig so aus, und umso kleiner die
   Bilder sind, umso unscheinbarer ist das Ganze."

   Vorher 216 und 166 Pixel Mindestbreite. Das Raster füllt die Zeile weiter
   aus, es passen nur mehr Kacheln nebeneinander. */
.leute{display:grid;gap:16px;align-items:start;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.leute h3{font-size:16px}
.leute .rolle{font-size:10.5px}
.leute .person-text{padding:12px 14px 14px}
.leute.klein{gap:12px;grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}
.leute.klein h3{font-size:14px}
.leute.klein .rolle{font-size:9.5px}
.leute.klein .person-text{padding:9px 10px 11px}
.leute.klein .kein-bild{font-size:24px}
.leute.klein .kein-bild.frage{font-size:42px}
.person{background:var(--weiss);border-top:4px solid var(--cyan);overflow:hidden;
        display:flex;flex-direction:column}
.grau .person{background:var(--weiss)}
.person img,.kein-bild{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
                       background:var(--grau)}
.kein-bild{display:flex;align-items:center;justify-content:center;
           font-family:Oswald,sans-serif;font-size:40px;letter-spacing:.06em;
           background:#E4F3FB;color:#6AA6C4}
.kein-bild.frage{font-size:56px}   /* Grund und Farbe wie bei einem fehlenden Foto, damit der cyanfarbene Streifen oben die Kachel fuehrt */
.person-text{padding:16px 18px 18px}
.person h3{font-size:18px;font-weight:600;color:var(--schwarz);
           text-transform:none;letter-spacing:0}
.person .rolle{font-family:Oswald,sans-serif;text-transform:uppercase;
               letter-spacing:.06em;font-size:11.5px;color:var(--cyan);margin-top:5px}
.person p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--leise)}
.person a{display:inline-block;margin-top:12px;font-family:Oswald,sans-serif;
          text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;
          color:var(--schwarz);text-decoration:none;border-bottom:2px solid var(--cyan);
          padding-bottom:2px}
/* Die Mitmach-Kachel sieht aus wie jede andere und stellt die Erklaerung
   daneben. Benny am 10.10.2026: „Das blaue Kachel mit dem Fragezeichen soll
   gleich groß sein wie die Bilder, Höhe und Breite." Deshalb ist die linke
   Haelfte **exakt eine Rasterspalte** breit (die halbe Kachel minus den
   halben Abstand), und das Feld bleibt quadratisch wie ein Foto. */
.person.mitmachen{grid-column:span 2;background:none;border-top:0;
                  flex-direction:row;align-items:flex-start;gap:14px}
.mitmach-kachel{flex:0 0 calc(50% - 7px);background:var(--weiss);
                border-top:4px solid var(--cyan);overflow:hidden}
.grau .mitmach-kachel{background:var(--weiss)}
.mitmach-text{flex:1;padding-top:14px}
.mitmach-text p{margin:0;font-size:14.5px;line-height:1.5;color:var(--leise)}
.mitmach-text a{display:inline-block;margin-top:12px;font-family:Oswald,sans-serif;
                text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;
                color:var(--schwarz);text-decoration:none;
                border-bottom:2px solid var(--cyan);padding-bottom:2px}

/* Bleibt nur eine Spalte uebrig, steht die Erklaerung unter der Kachel. */
@media(max-width:470px){
  .person.mitmachen{flex-direction:column;gap:0}
  .mitmach-kachel{flex:none;width:100%}
  .mitmach-text{padding-top:10px}
}

/* Bleibt nur eine Spalte uebrig, passt nichts Breites mehr hin. */
@media(max-width:470px){
  .person.mitmachen{flex-direction:column}
  .person.mitmachen .kein-bild{flex:none;aspect-ratio:1/1}
}

/* Kontaktleiste. Mail und Telefon sollen im Text stehen, nicht erst
   unten im Kasten. Im grauen Abschnitt heller Grund, sonst verschwindet
   die Fläche im Hintergrund (derselbe Fehler wie bei den Platzhaltern). */
.kontaktleiste{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 6px}
.kontaktleiste a{display:block;flex:1 1 250px;max-width:520px;background:var(--grau);
                 border-left:4px solid var(--cyan);padding:14px 20px;
                 text-decoration:none;color:var(--schwarz);
                 font-family:Oswald,sans-serif;font-size:19px;letter-spacing:.02em}
.kontaktleiste a span{display:block;font-family:'Source Sans 3',sans-serif;
                      font-size:13.5px;letter-spacing:0;color:var(--leise);
                      margin-bottom:3px}
.kontaktleiste a:hover{border-left-color:var(--schwarz)}
.grau .kontaktleiste a{background:var(--weiss)}

/* Hier wird noch gearbeitet. Der Balken laeuft einmal durch und faengt von
   vorn an - dieselbe Aussage wie eine Sanduhr, nur ohne Kitsch. */
.in-arbeit{background:#E4F3FB;border-left:4px solid var(--cyan);margin:4px 0 32px;
           overflow:hidden;max-width:72ch}
/* Benny am 11.10.2026: „Wollen wir das ein bisschen machen wie CMC 2027 ist
   Loading, so ein bisschen wie wenn was installiert wird." Der Balken fuellt
   sich einmal bis zwei Drittel und bleibt dort, ein Schimmer laeuft weiter
   darin. Bewusst **ohne Prozentzahl** - eine Zahl wuerde eine Genauigkeit
   behaupten, die es nicht gibt, und niemand koennte sagen, warum es gerade
   62 Prozent sind. */
.in-arbeit-laden{padding:11px 20px 7px;font-family:Oswald,sans-serif;
                 text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;
                 color:var(--cyan)}
.punkte{display:inline-block;margin-left:3px}
.punkte i{display:inline-block;width:3px;height:3px;border-radius:50%;
          background:var(--cyan);margin-left:2px;vertical-align:middle;
          animation:tippen 1.4s ease-in-out infinite}
.punkte i:nth-child(2){animation-delay:.2s}
.punkte i:nth-child(3){animation-delay:.4s}
@keyframes tippen{0%,60%,100%{opacity:.25}30%{opacity:1}}

.in-arbeit-balken{height:5px;background:rgba(41,168,224,.2);position:relative;
                  overflow:hidden;margin:0 20px 2px}
.in-arbeit-balken span{display:block;height:100%;width:0;background:var(--cyan);
                       position:relative;overflow:hidden}
.in-arbeit.sichtbar .in-arbeit-balken span{
                       animation:fuellen 2.4s cubic-bezier(.2,.8,.3,1) forwards}
.in-arbeit-balken span::after{content:"";position:absolute;inset:0 auto 0 0;width:44px;
                              background:linear-gradient(90deg,transparent,
                                         rgba(255,255,255,.75),transparent);
                              animation:schimmer 1.8s linear infinite}
@keyframes fuellen{from{width:0}to{width:66%}}
@keyframes schimmer{from{transform:translateX(-60px)}to{transform:translateX(520px)}}
.in-arbeit-text{padding:10px 20px 16px;font-size:14.5px;line-height:1.55;color:var(--text)}
.in-arbeit-text b{display:block;font-family:Oswald,sans-serif;text-transform:uppercase;
                  letter-spacing:.07em;font-size:13px;color:var(--schwarz);margin-bottom:5px}
.in-arbeit-mitmachen{border-top:1px solid rgba(41,168,224,.3);
                     padding:13px 20px 16px}
.in-arbeit-mitmachen p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text)}
.wege{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:11px}
.in-arbeit-mitmachen a{display:inline-block;
                       font-family:Oswald,sans-serif;text-transform:uppercase;
                       letter-spacing:.07em;font-size:12.5px;color:var(--schwarz);
                       text-decoration:none;border-bottom:2px solid var(--cyan);
                       padding-bottom:2px}
.in-arbeit-mitmachen a:hover{border-bottom-color:var(--schwarz)}

/* Wer Bewegung abgeschaltet hat, bekommt den Balken als ruhige Flaeche. */
@media(prefers-reduced-motion:reduce){
  .in-arbeit .in-arbeit-balken span{animation:none;width:66%}
  .in-arbeit-balken span::after,.punkte i{animation:none}
  .punkte i{opacity:.6}
}

/* --- Die Bildansicht der Galerie ------------------------------------------
   Vorher öffnete jedes Bild einen neuen Tab. Wer einen Jahrgang durchsehen
   wollte, hatte danach zweihundert davon. Benny am 11.10.2026. */
.leuchtkasten{position:fixed;inset:0;z-index:90;background:rgba(8,8,10,.97);
              display:flex;align-items:center;justify-content:center;padding:52px 16px 64px}
.leuchtkasten[hidden]{display:none}
body.kasten-offen{overflow:hidden}
#lk-bild{max-width:100%;max-height:100%;object-fit:contain;display:block;
         box-shadow:0 10px 40px rgba(0,0,0,.5)}

.lk-zu{position:absolute;top:12px;right:16px;background:none;border:0;
       color:var(--weiss);font-size:34px;line-height:1;cursor:pointer;
       padding:4px 10px;opacity:.75}
.lk-zu:hover{opacity:1}

.lk-pfeil{position:absolute;top:50%;transform:translateY(-50%);background:none;
          border:0;color:var(--weiss);font-size:52px;line-height:1;cursor:pointer;
          padding:10px 18px;opacity:.6}
.lk-pfeil:hover{opacity:1}
.lk-zurueck{left:4px}
.lk-vor{right:4px}

.lk-zaehler{position:absolute;bottom:20px;left:0;right:0;text-align:center;
            color:var(--weiss);font-family:Oswald,sans-serif;font-size:13px;
            letter-spacing:.08em;opacity:.8}

/* Am Handy wird gewischt, dafür brauchen die Pfeile weniger Platz. */
@media(max-width:560px){
  .leuchtkasten{padding:44px 6px 54px}
  .lk-pfeil{font-size:38px;padding:8px 10px}
}

/* Der Trailer. Das Vorschaubild traegt die Flaeche, bis jemand auf Abspielen
   drueckt, erst dann wird geladen. */
.video{margin:0 0 30px}
.video video{width:100%;max-width:860px;display:block;background:var(--schwarz);
             aspect-ratio:16/9}
.video-hinweis{margin:9px 0 0;font-size:13.5px;color:var(--leise);max-width:860px}

.kasten-bild{width:100%;height:auto;display:block;margin:14px 0 0}
.kasten-klein{margin:7px 0 0;font-size:12.5px;color:var(--leise)}
/* `:not(.knopf)` ist hier kein Schmuck. Ohne die Ausnahme traf diese Regel
   auch die schwarzen Knöpfe im Kasten und färbte deren Schrift schwarz, also
   schwarz auf schwarz. Lesbar wurde es erst beim Darüberfahren, wenn der
   Grund cyan wird (gefunden von Benny am 11.10.2026 auf der Ausstellerseite).
   Beide Regeln sind gleich spezifisch, also gewinnt die spätere. */
.kasten a:not(.knopf){color:var(--schwarz);text-decoration:none;
                      border-bottom:2px solid var(--cyan);padding-bottom:1px}
.kasten a:not(.knopf):hover{border-bottom-color:var(--schwarz)}

/* Text und Video sollen ungefähr gleich hoch enden. Bei 1,15 zu 0,85 blieb
   das Video 53 Pixel kürzer als die Textspalte und darunter eine weiße
   Fläche (gemessen am 11.10.2026). Gleiche Spalten lassen das Video wachsen,
   und die mittige Ausrichtung verteilt den Rest auf beide Seiten. */
.zwei-mittig{grid-template-columns:1fr 1fr;align-items:center}
.zwei-mittig .video{margin-bottom:0}

/* Kennzahlen in einer Textspalte. Dieselben Ziffern wie im Zähler auf der
   Startseite, damit die Seite eine Handschrift behält. */
.kennzahlen{display:flex;flex-wrap:wrap;gap:10px 38px;margin-top:22px}
.kennzahlen b{display:block;font-family:Oswald,sans-serif;font-size:34px;
              font-weight:600;line-height:1;color:var(--cyan)}
.kennzahlen span{display:block;font-family:Oswald,sans-serif;font-size:11px;
                 letter-spacing:.14em;text-transform:uppercase;color:var(--leise);
                 margin-top:6px}

/* Die fünf Aussagen, für wen die CMC ist. Vorher eine Liste in einem Kasten
   neben dem Fließtext, wo sie niemand gelesen hat. Jetzt eine eigene Reihe
   mit einem Schlagwort voran, das beim Überfliegen hängen bleibt. */
.fuer-wen{font-family:Oswald,sans-serif;font-size:19px;font-weight:600;
          color:var(--schwarz);margin:0 0 20px;text-transform:none;letter-spacing:0}
.merkmale{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.merkmale > div{border-top:3px solid var(--cyan);padding-top:12px}
.merkmale b{display:block;font-family:Oswald,sans-serif;text-transform:uppercase;
            letter-spacing:.07em;font-size:12.5px;color:var(--cyan);margin-bottom:5px}
.merkmale span{display:block;font-size:14.5px;line-height:1.5;color:var(--text)}

/* Das individuelle Paket. Bewusst anders als die vier Karten darüber:
   breiter, zweispaltig, ohne Preiszeile. Es ist kein fünftes Produkt in
   derselben Reihe, sondern der Weg für alle, denen die vier nicht passen. */
.eigenbau{display:grid;gap:0;grid-template-columns:1.25fr .75fr;margin-top:30px;
          background:var(--schwarz);color:var(--weiss)}
.eigenbau-text{padding:30px 34px}
.eigenbau-text h3{font-family:Oswald,sans-serif;font-size:22px;font-weight:600;
                  color:var(--weiss);margin:0 0 14px;text-transform:none;letter-spacing:0}
.eigenbau-text p{margin:0 0 12px;font-size:15px;line-height:1.6;
                 color:rgba(255,255,255,.76)}
.eigenbau-text p:last-child{margin-bottom:0;color:var(--weiss)}

.eigenbau-karte{background:rgba(255,255,255,.07);padding:30px 30px 28px;
                display:flex;flex-direction:column}
.marke-klein{font-family:Oswald,sans-serif;text-transform:uppercase;
             letter-spacing:.1em;font-size:12px;color:var(--cyan);margin-bottom:14px}
.eigenbau-karte ul{list-style:none;margin:0 0 20px;padding:0}
.eigenbau-karte li{font-size:14.5px;line-height:1.45;padding:7px 0 7px 18px;
                   position:relative;border-bottom:1px solid rgba(255,255,255,.12)}
.eigenbau-karte li::before{content:"";position:absolute;left:0;top:14px;width:7px;
                           height:7px;background:var(--cyan)}
.eigenbau-karte .knopf{margin-top:auto;background:var(--cyan);color:var(--weiss)}
.eigenbau-karte .knopf:hover{background:var(--weiss);color:var(--schwarz)}

@media(max-width:700px){
  .eigenbau{grid-template-columns:1fr}
  .eigenbau-text{padding:24px 22px 20px}
  .eigenbau-karte{padding:22px}
}

/* Die Anreisewege. Zwei Spalten, getrennt durch Linien statt durch Kästen. */
.anfahrt{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.anfahrt > div{padding:13px 0;border-top:1px solid var(--grau-linie)}
.anfahrt > div:first-child,.anfahrt > div:nth-child(2){border-top:0;padding-top:0}
.anfahrt b{display:block;font-family:Oswald,sans-serif;text-transform:uppercase;
           letter-spacing:.07em;font-size:12px;color:var(--cyan);margin-bottom:4px}
.anfahrt span{display:block;font-size:14px;line-height:1.5;color:var(--leise);
              padding-right:22px}

/* Die Mailadresse im Schlussabschnitt. Vorher in Textfarbe und ohne
   Kennzeichnung, dahinter ein Satzpunkt, der aussah, als gehöre er zur
   Adresse (Benny, 11.10.2026). Jetzt eine erkennbare Marke, und der Satz
   endet mit der Adresse statt mit einem Punkt dahinter. */
.ruf a.ruf-mail{display:inline;background:none;padding:0;color:inherit;
                font-family:inherit;text-transform:none;letter-spacing:0;
                font-size:inherit;border-bottom:2px solid rgba(255,255,255,.55);
                white-space:nowrap}
.ruf a.ruf-mail:hover{border-bottom-color:var(--weiss)}

/* Der Hinweis über der Händlerkarte. Abgesetzt, damit er nicht wie ein
   weiterer Einleitungssatz wirkt und überlesen wird. */
.karten-hinweis{background:#E4F3FB;border-left:4px solid var(--cyan);
                padding:16px 22px;margin:0}
.karten-hinweis b{display:block;font-family:Oswald,sans-serif;font-size:16px;
                  font-weight:600;color:var(--schwarz);margin-bottom:7px}
.karten-hinweis p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text)}

/* Ausstellerwände */
.wand{background:var(--weiss);margin-bottom:12px}
.wand summary{cursor:pointer;padding:16px 22px;font-family:Oswald,sans-serif;
              text-transform:uppercase;letter-spacing:.06em;font-size:17px;
              color:var(--schwarz);display:flex;justify-content:space-between;
              align-items:baseline;gap:16px;border-left:4px solid var(--cyan)}
.wand summary::-webkit-details-marker{display:none}
.wand summary span{font-family:'Source Sans 3',sans-serif;text-transform:none;
                   letter-spacing:0;font-size:14.5px;color:var(--leise)}
.wand[open] summary{border-bottom:1px solid var(--grau)}
.logos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
       padding:20px}
.logo{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;
      background:var(--weiss);padding:8px;position:relative;
      transition:transform .16s ease, box-shadow .16s ease}
.logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* Manche Schriftzüge sind in einer 104 Pixel breiten Kachel kaum zu lesen,
   Elettromedia zum Beispiel. Beim Darüberfahren wächst die Kachel aus der
   Reihe heraus, statt dass man die Seite vergrößern muss (Benny, 11.10.2026).
   `z-index` hebt sie über die Nachbarn, sonst wird sie beschnitten. */
/* Beim Vergrößern hatte die weiße Kachel eine harte Kante, die quer über die
   Nachbarlogos lief. Benny am 11.10.2026: „Gibt es die Möglichkeit, es nach
   außen ausfaden zu lassen?" Also keine Fläche mehr, sondern ein weicher
   weißer Hof hinter dem Logo, der nach außen durchsichtig wird. */
.logo:hover{transform:scale(1.85);z-index:6;background:transparent;box-shadow:none}
.logo::before{content:"";position:absolute;inset:-16%;z-index:-1;opacity:0;
              transition:opacity .16s ease;pointer-events:none;
              background:radial-gradient(closest-side,
                         #fff 54%, rgba(255,255,255,.85) 76%, rgba(255,255,255,0) 100%)}
.logo:hover::before{opacity:1}

@media(prefers-reduced-motion:reduce){
  .logo{transition:none}
}
/* Auf Geräten ohne Mauszeiger gibt es kein Darüberfahren, dort bleibt alles,
   wie es ist. Ohne diese Abfrage bliebe eine Kachel nach dem Antippen
   vergrößert stehen. */
@media(hover:none){
  .logo:hover{transform:none;box-shadow:none}
}

.karte-huelle{background:var(--grau)}
.karte-huelle iframe{width:100%;height:68vh;min-height:520px;max-height:760px;
                     border:0;display:block}
.karte-start{flex:1;border:0;cursor:pointer;background:var(--grau);padding:40px 24px;
             display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.karte-start:hover{background:#E3E2DD}
.karte-start strong{font-family:Oswald,sans-serif;text-transform:uppercase;
                    letter-spacing:.07em;font-size:17px;color:var(--schwarz)}
.karte-start span{font-size:14.5px;color:var(--leise)}

/* Galerie */
.jahre{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.jahre button{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;
              font-size:14px;padding:10px 20px;border:0;cursor:pointer;
              background:var(--grau);color:var(--text)}
.jahre button.aktiv{background:var(--schwarz);color:var(--weiss)}
.gitter{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.gitter a{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--grau)}
.gitter img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gitter a:hover img{transform:scale(1.05)}
/* **Dieser eine Selektor ist wichtiger als er aussieht.** Jede Regel mit
   einer Klasse wiegt in CSS mehr als `[hidden]`, also blieb der Knopf
   „Mehr anzeigen" sichtbar, obwohl das Javascript ihn längst auf hidden
   gesetzt hatte. Man klickte und es passierte nichts (Benny, 11.10.2026).
   Dasselbe gilt für jedes andere Element, das über `hidden` gesteuert wird. */
[hidden]{display:none!important}

.mehr{display:block;margin:30px auto 0;font-family:Oswald,sans-serif;text-transform:uppercase;
      letter-spacing:.09em;font-size:14px;padding:14px 34px;border:0;cursor:pointer;
      background:var(--schwarz);color:var(--weiss)}

.ruf{background:var(--cyan);color:var(--weiss);text-align:center}
.ruf h2{font-size:clamp(26px,3.6vw,38px);font-weight:600}
.ruf .hand{display:block;font-size:clamp(30px,4.4vw,46px);margin-top:10px}
.ruf p{max-width:58ch;margin:18px auto 26px}
.ruf a{display:inline-block;background:var(--schwarz);color:var(--weiss);text-decoration:none;
       font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.1em;
       font-size:15px;padding:15px 38px}


@media(max-width:900px){
  .zwei{grid-template-columns:1fr}
  .karte-huelle iframe{height:70vh;min-height:420px}
  .block{grid-template-columns:1fr;gap:12px}
  .block::before{display:none}
  .uhr{text-align:left;padding-right:0;display:flex;align-items:baseline;gap:10px}
  .uhr::after{display:none}
  section{padding:52px 0}
  .zaehler .wozu{border-left:0;padding-left:0;width:100%;text-align:center}
}

/* Der Zaehler lief auf dem iPhone ueber drei Zeilen und war 233 Pixel hoch
   (gemessen am 11.10.2026). Benny: „Auf dem Desktop ist es eine Zeile, wo
   alles drin ist. Auf dem Handy mehrzeilig. Einfach kleiner machen, dass es
   auch einzeilig unter dem Bild ist." Also alles verkleinern, bis die vier
   Zahlen und der Zusatz nebeneinander passen, und den Umbruch verbieten. */
@media(max-width:560px){
  .mini{height:170px}
  .zaehler .rahmen{flex-wrap:nowrap;gap:0 9px;padding-top:13px;padding-bottom:13px}
  .zelle{min-width:0;flex:0 0 auto}
  .zelle b{font-size:23px}
  .zelle span{font-size:8.5px;letter-spacing:.08em}
  .zaehler .wozu{width:auto;font-size:9.5px;letter-spacing:.06em;line-height:1.25;
                 border-left:2px solid rgba(255,255,255,.45);padding-left:9px;
                 text-align:left}
}

/* Am Handy immer zwei Personen nebeneinander. Ohne diese Regel wird aus dem
   216er-Raster eine einzige Spalte, und dann steht ein quadratisches Porträt
   über die volle Bildschirmbreite. Benny am 10.10.2026. */
@media(max-width:620px){
  .leute,.leute.klein{grid-template-columns:repeat(2,1fr);gap:12px}
  .leute h3{font-size:15.5px}
  .leute .rolle{font-size:10.5px}
  .leute p{font-size:13.5px}
  .leute .person-text{padding:11px 13px 13px}
  .leute .kein-bild{font-size:28px}
  .leute .kein-bild.frage{font-size:38px}
  .kontaktleiste a{font-size:17px}
}