/*
Theme Name: Kulturring Wittmund
Theme URI: https://kulturring-wittmund.de
Author: Biel Digital
Author URI: https://biel-digital.de
Description: Eigenes Theme fuer den Kulturring Wittmund e. V. – Startseite als
  Scroll-Film mit Vorhang-Ouvertuere. Kein Page-Builder, keine CDN-Aufrufe.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: proprietaer
Text Domain: kulturring
*/

/* ====== Schriften: lokal ausgeliefert, kein Google-CDN (DSGVO) ====== */

@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/InstrumentSerif-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/InstrumentSerif-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/InstrumentSerif-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/InstrumentSerif-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Manrope-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Manrope-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Manrope-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Manrope-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Manrope-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Manrope-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   Kulturring Wittmund – Startseite als Scroll-Film (Testszene)
   Szene 0: Vorhang-Ouvertüre (GSAP-Timeline, einmal pro Gerät)
   Szene 1: Held „Als Nächstes in Wittmund" (Pin + Scrub-Abgang)
   Szenen 2–5 (Saison-Fahrt, Sparten, Verein, Papier-Outro)
   werden als weitere <section class="kr-szene"> hinter #kr-held angehängt.
   Präfix kr- = 1:1 ins WordPress-Child-Theme übertragbar.
   ============================================================ */
:root{
  --kr-grund:#04101F;        /* Bühnen-Ground (Flyer-Tiefblau) */
  --kr-samt-0:#020C11;       /* Vorhang-Tiefe, aus dem Foto gemessen */
  --kr-samt-1:#09232D;
  --kr-teal:#0E82A2;         /* Corporate-Teal (Logo-Ring) */
  --kr-teal-btn:#0C7692;     /* Teal 6 % abgedunkelt: Weiß darauf 5,2:1 statt 4,4:1 */
  --kr-teal-hell:#5AC0DD;    /* Teal für Text auf der dunklen Bühne (8,9:1) */
  --kr-licht:#E8C79A;        /* warmes Bühnenlicht */
  --kr-weiss:#FFFFFF;
  --kr-hell:#E6ECEF;
  --kr-hell-mut:#AEBBC3;
  --kr-rand:clamp(22px, 4vw, 64px);
  --kr-band-h:28px;          /* wird per JS nachgemessen */
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html{background:var(--kr-grund)}
html.kr-zu{background:#000}
html.kr-lock{overflow:hidden}
body{background:var(--kr-grund);color:var(--kr-hell);font-family:"Manrope",system-ui,sans-serif;font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--kr-teal);color:#fff}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--kr-licht);outline-offset:2px}
.kr-serif{font-family:"Instrument Serif","Times New Roman",serif;font-weight:400}
.kr-kicker{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--kr-teal-hell)}

/* Vor dem Vorhang: nichts aufblitzen lassen */
.kr-zu .kr-band,.kr-zu .kr-kopf,.kr-zu .kr-held-foto,.kr-zu .kr-held-inhalt,.kr-zu .kr-scroll-hinweis{visibility:hidden}

/* --- Entwurfs-Band (fixiert, oben; erscheint erst bei offenem Vorhang) --- */
.kr-band{position:fixed;top:0;left:0;right:0;z-index:60;text-align:center;padding:5px var(--kr-rand);font-size:12.5px;line-height:1.4;color:#C9D3D8;background:rgba(4,16,31,.94);border-bottom:1px solid rgba(14,130,162,.45)}
.kr-band b{color:#fff;font-weight:700}
.kr-band a{color:#fff}
/* Nur Entwurfs-Moebel: faellt zusammen mit dem Band weg, wenn die Seite live geht. */
.kr-band .kr-nochmal{font:inherit;color:#fff;background:none;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:1px 10px;cursor:pointer;letter-spacing:.01em}
.kr-band .kr-nochmal:hover{background:#fff;color:var(--kr-grund);border-color:#fff}

/* --- Kopfzeile (fixiert, unter dem Band) --- */
.kr-kopf{position:fixed;top:var(--kr-band-h);left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:14px var(--kr-rand)}
.kr-marke{display:inline-flex;align-items:center}
.kr-logo-kopf{height:clamp(30px,3.2vw,44px);width:auto}
.kr-kopf-tel{font-size:15px;font-weight:500;color:var(--kr-hell);text-decoration:none;padding:12px 0;letter-spacing:.02em}
.kr-kopf-tel:hover{color:#fff;text-decoration:underline}

/* ====== Szene 1 · HELD ====== */
.kr-held{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--kr-grund);display:flex;flex-direction:column;justify-content:flex-end}
.kr-held-buehne{position:absolute;inset:0}
.kr-held-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;will-change:transform}
/* Desktop: Flügel bis zu 86 px nach rechts aus der Textspalte, ohne je eine Lücke links zu reißen */
@media (min-width:46rem){.kr-held-foto{object-position:min(0px,calc(50% + 86px)) 58%}}
.kr-held-schatten{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,31,.42) 0%,rgba(4,16,31,0) 26%,rgba(4,16,31,0) 42%,rgba(4,16,31,.9) 100%)}
.kr-held-dim{position:absolute;inset:0;background:var(--kr-grund);opacity:0;pointer-events:none}
.kr-held-inhalt{position:relative;z-index:2;padding:calc(var(--kr-band-h) + 84px) var(--kr-rand) clamp(72px,10vh,110px);max-width:calc(30rem + 2 * var(--kr-rand));display:grid;gap:clamp(14px,2.2vh,22px)}
.kr-h1{font-size:clamp(3rem,8vw,8.5rem);line-height:.98;letter-spacing:-.01em;color:#fff;margin-top:2px}
.kr-z{display:block;overflow:hidden;padding:0 .04em .08em .04em;margin:0 -.04em -.08em -.04em}
.kr-z>span{display:block;will-change:transform}
.kr-h1 em{font-style:italic;color:var(--kr-licht)}
/* Datenzeile als 2x2-Ticket (gemessen: in einer Zeile laege "Forum der KGS" auf dem hellen Klavierhocker, 2,9:1) */
.kr-daten{list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.28);font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-top:6px}
.kr-daten li{padding:10px 12px 10px 0}
.kr-daten li:nth-child(2n){padding-left:14px;border-left:1px solid rgba(255,255,255,.28)}
.kr-daten li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}
.kr-satz{max-width:40ch;color:var(--kr-hell);font-size:19.5px}
.kr-ctas{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:6px}
.kr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 28px;border-radius:999px;font-size:17px;font-weight:700;text-decoration:none;letter-spacing:.01em;transition:background-color .25s,color .25s,border-color .25s}
.kr-btn-voll{background:var(--kr-teal-btn);color:#fff}
.kr-btn-voll:hover{background:#0A5F76}
.kr-btn-rand{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.kr-btn-rand:hover{background:#fff;color:var(--kr-grund);border-color:#fff}
.kr-scroll-hinweis{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--kr-hell-mut)}
.kr-scroll-hinweis i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--kr-licht),transparent);transform-origin:top;animation:kr-faden 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes kr-faden{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

@media (max-width:46rem){
  /* Opak: der Text faehrt auf Mobil hinter Band und Kopfzeile weg, nicht mehr aus einer Maske */
  .kr-band{font-size:11.5px;padding:4px 14px;background:var(--kr-grund)}
  /* Der Knopf soll auf dem Handy keine eigene Zeile kosten – das Band ist Entwurfs-
     Moebel und darf den ersten Eindruck nicht auffressen. Kurzes Label, enge Pille. */
  .kr-band .kr-nochmal{font-size:11px;padding:0 8px;position:relative}
  .kr-band .kr-nochmal span{display:none}
  .kr-band .kr-nochmal::after{content:"Vorhang ↻"}
  /* Trefferflaeche auf ~35 px vergroessern, ohne das Band hoeher zu machen.
     Nach unten nur so weit, dass die Telefonnummer im Kopf keine Taps verliert. */
  .kr-band .kr-nochmal::before{content:"";position:absolute;inset:-9px -10px}
  .kr-logo-kopf{height:30px}
  .kr-kopf-tel{font-size:14px}
  /* Foto und Text getrennt statt gestapelt: das Foto bekommt oben ein eigenes Feld
     (46 svh) und klebt beim Scrollen unter Band und Kopfzeile; der Text sitzt darunter auf dem
     vollen Grund – Kontrast ohne Schleier, das Foto darf wirken. Kein Pin auf Mobil:
     der Text faehrt beim Scrollen unter die weich maskierte Unterkante des Fotos
     (das ist das "nach oben wegmaskiert"), das Foto zieht per scrub heran. */
  /* Kopfzeile auf festen 58 px, opak und AUF dem Grund, nicht ueber dem Foto: gemessen
     lag sonst die Lampe des Scheinwerfers genau unter der Telefonnummer (1,4:1), und
     der unter dem Foto wegfahrende Text tauchte hinter der durchsichtigen Kopfzeile
     wieder auf. */
  .kr-kopf{height:58px;padding-top:0;padding-bottom:0;background:var(--kr-grund)}
  .kr-held{display:block;min-height:0;overflow:visible;padding-top:calc(var(--kr-band-h) + 58px)}
  .kr-held-buehne{position:sticky;top:calc(var(--kr-band-h) + 58px);z-index:2;height:clamp(240px,46svh,380px);overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 86%,transparent 100%)}
  /* 124 % Layout-Groesse statt transform: die Ouvertuere und der Scrub skalieren obendrauf */
  .kr-held-foto{inset:-12%;width:124%;max-width:none;height:124%;object-position:44% 50%}
  /* Oben nur eine leise Vignette; unten laeuft das Foto ab 62 % ueber den Stuhlreihen in
     den Grund aus und ist bei 86 % reiner Grund – erst DANN beginnt die Maske (86–100 %),
     damit der darunter wegfahrende Text in Grundfarbe ausblendet statt ueber dem Foto
     durchzuscheinen. */
  .kr-held-schatten{background:linear-gradient(180deg,rgba(4,16,31,.25) 0%,rgba(4,16,31,0) 22%,rgba(4,16,31,0) 62%,var(--kr-grund) 86%)}
  .kr-held-inhalt{z-index:1;max-width:none;padding:8px var(--kr-rand) 84px;gap:14px}
  .kr-h1{font-size:clamp(2.75rem,12.8vw,3.4rem)}
  .kr-daten{font-size:14px;letter-spacing:.05em}
  .kr-satz{font-size:19px}
  .kr-ctas{flex-direction:column}
  .kr-btn{width:100%}
  /* Ohne Pin ragt der Held unter die Falz – die angeschnittene Textzeile ist der
     Scroll-Hinweis; die Deko-Version braeuchte einen Platz, der nicht im ersten
     Viewport liegt. */
  .kr-scroll-hinweis{display:none}
}

/* ====== Stub: hier docken Szenen 2–5 an ====== */
.kr-szene{position:relative;background:var(--kr-grund)}
.kr-stub{min-height:70vh;display:grid;align-content:center;gap:18px;padding:clamp(80px,14vh,140px) var(--kr-rand)}
.kr-stub h2{font-size:clamp(2.2rem,5vw,4.5rem);line-height:1;color:#fff;max-width:18ch}
.kr-stub p{max-width:52ch;color:var(--kr-hell-mut)}
.kr-stub p b{color:var(--kr-hell);font-weight:500}
.kr-fuss address{font-style:normal}
.kr-fuss a{color:var(--kr-hell);text-decoration:underline;text-underline-offset:3px;padding:6px 0;display:inline-block}

/* ====== Szene 0 · VORHANG (per JS aus dem Template gebaut) ====== */
#kr-vorhang{position:fixed;inset:0;z-index:100;overflow:hidden}
.kr-haelfte{position:absolute;top:0;bottom:0;width:52vw;background:var(--kr-samt-0);will-change:transform;overflow:hidden}
.kr-haelfte,.kr-falte{background-repeat:no-repeat}
.kr-rechts{right:0;z-index:2}
.kr-links{left:0;z-index:1;background-image:none}  /* Spiegelung setzt GSAP (scaleX:-1), sonst zerlegt es die Matrix als Rotation 180° */
.kr-falte{position:absolute;inset:0}
/* Innenkante beider Hälften weich in die Samt-Tiefe – Überlappung der Stoffbahnen */
.kr-haelfte::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,12,17,.8),rgba(2,12,17,0) 16%)}
.kr-spot{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;
  background:radial-gradient(58vw 62vh at 70% 16%,rgba(232,199,154,.19),rgba(232,199,154,0) 62%)}
.kr-flug{position:absolute;z-index:4;left:50%;top:50%;width:clamp(180px,26vw,340px);height:auto;opacity:0;will-change:transform}
@media (max-aspect-ratio:5/6){ .kr-flug{top:34%} }
.kr-skip{position:fixed;z-index:110;right:var(--kr-rand);bottom:max(22px,env(safe-area-inset-bottom));min-height:48px;padding:11px 20px;background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:999px;font:500 15px/1.2 "Manrope",system-ui,sans-serif;cursor:pointer;letter-spacing:.02em}
.kr-skip:hover{border-color:#fff;background:rgba(0,0,0,.55)}

@media (prefers-reduced-motion:reduce){
  .kr-scroll-hinweis i{animation:none;transform:none}
  .kr-btn{transition:none}
  /* Der Vorhang wird hier nie gebaut – dann darf der Knopf ihn auch nicht versprechen. */
  .kr-band .kr-nochmal{display:none}
}

/* ====== WordPress-Zugaben ====== */
.kr-sprung{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;
  background:var(--kr-teal-btn);color:#fff;font-weight:700;border-radius:0 0 8px 0}
/* :focus-visible statt :focus – nach einem Mausklick auf "Nach oben" bekommt
   der Sprunglink den Fokus, und mit :focus blitzte dann fuer Mausnutzer ein
   Banner auf, das sie nie angefordert haben. Tastaturnutzer sehen ihn weiter.
   Fallback fuer Browser ohne :focus-visible bleibt :focus. */
.kr-sprung:focus-visible{left:0}
@supports not selector(:focus-visible){.kr-sprung:focus{left:0}}
.kr-fuss-recht{display:flex;gap:20px;flex-wrap:wrap}
.kr-fliess{max-width:62ch;display:grid;gap:1em}
.kr-fliess a{color:var(--kr-teal-hell)}
/* Die WordPress-Adminleiste sitzt sonst ueber Kopfzeile und Vorhang. */
body.admin-bar .kr-kopf{top:calc(var(--kr-band-h) + 32px)}
@media (max-width:782px){body.admin-bar .kr-kopf{top:calc(var(--kr-band-h) + 46px)}}
body.admin-bar #kr-vorhang{z-index:99}

/* ====== Szene 2 · DIE SAISON ======
   Index-Tabelle statt Kartenstapel: Haarlinien, gemeinsame Achse, die Zeile
   traegt die Information. Karten wuerden hier acht Mal dasselbe Rechteck
   wiederholen und die Termine gleich wichtig aussehen lassen. */
.kr-saison{padding:clamp(90px,16vh,180px) var(--kr-rand) clamp(70px,12vh,130px)}
.kr-saison-kopf{margin-bottom:clamp(36px,6vh,64px)}
.kr-saison-kopf h2{font-size:clamp(2.4rem,7vw,5.5rem);line-height:1;color:#fff;margin-top:10px}
.kr-saison-kopf em{font-style:italic;color:var(--kr-licht)}

.kr-termine{list-style:none;border-top:1px solid rgba(255,255,255,.18)}
.kr-termin{display:grid;gap:2px 18px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.18);
  grid-template-columns:2.6rem 9.5rem 1fr auto;align-items:baseline}
.kr-termin-nr{font-size:12px;letter-spacing:.12em;color:var(--kr-hell-mut);font-variant-numeric:tabular-nums}
.kr-termin-datum{font-size:15px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--kr-teal-hell);font-variant-numeric:tabular-nums}
.kr-termin-titel{font-family:"Instrument Serif","Times New Roman",serif;font-size:clamp(1.35rem,2.6vw,2.1rem);
  line-height:1.15;color:#fff}
.kr-termin-titel a{text-decoration:none}
.kr-termin-titel a:hover{color:var(--kr-licht)}
.kr-termin-ort{grid-column:3;font-size:15px;color:var(--kr-hell-mut)}
.kr-termin-sparte{grid-column:4;grid-row:1;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kr-hell-mut);white-space:nowrap}
.kr-termin-status{grid-column:4;font-size:13px;font-weight:700;color:var(--kr-licht);white-space:nowrap}
.kr-termin--abgesagt .kr-termin-titel{text-decoration:line-through;text-decoration-thickness:1px;color:var(--kr-hell-mut)}
.kr-termin--abgesagt .kr-termin-status{color:#FFA98A}
.kr-saison-fuss{margin-top:clamp(30px,5vh,52px);color:var(--kr-hell-mut);max-width:56ch}
.kr-saison-fuss a{color:var(--kr-hell)}

@media (max-width:46rem){
  .kr-termin{grid-template-columns:2.2rem 1fr;gap:4px 14px;padding:16px 0}
  .kr-termin-datum{grid-column:2}
  .kr-termin-titel{grid-column:2}
  .kr-termin-ort{grid-column:2}
  .kr-termin-sparte{grid-column:2;grid-row:auto}
  .kr-termin-status{grid-column:2}
}

/* Status: eine Absage ist eine Information, kein Kleingedrucktes. */
.kr-status{font-size:15px;font-weight:700;letter-spacing:.04em;padding:8px 14px;border-radius:6px;
  background:rgba(232,199,154,.14);border:1px solid rgba(232,199,154,.5);color:var(--kr-licht);justify-self:start}
.kr-status--abgesagt{background:rgba(236,94,9,.16);border-color:rgba(255,169,138,.6);color:#FFC4AC}

/* Gemessen 03.09.2026: Die Kopfzeile ist fixiert und war auf dem Desktop
   durchsichtig – beim Scrollen lagen Logo und Telefonnummer mitten in der
   Saison-Ueberschrift. Auf dem Held sass sie auf dem Foto und fiel nicht auf.
   Jetzt opak wie auf Mobil: eine Loesung fuer alle Breiten statt einer
   Sonderregel, die beim naechsten Abschnitt wieder bricht. */
.kr-kopf{background:var(--kr-grund)}

/* ====== Szene 3 · VIER FORMEN (gepinnte Horizontal-Fahrt) ======
   Ohne JS steht dasselbe untereinander und ist vollstaendig lesbar – die Fahrt
   ist eine Zugabe. Deshalb KEINE Startzustaende mit opacity:0 im CSS. */
.kr-sparten{padding:clamp(80px,14vh,150px) 0 0}
.kr-sparten-kopf{padding:0 var(--kr-rand) clamp(30px,5vh,54px)}
.kr-sparten-kopf h2{font-size:clamp(2.4rem,7vw,5.5rem);line-height:1;color:#fff;margin-top:10px}
.kr-sparten-kopf em{font-style:italic;color:var(--kr-licht)}
.kr-sparten-bahn{display:grid;gap:clamp(40px,7vh,80px);padding:0 var(--kr-rand) clamp(80px,14vh,150px)}

.kr-sparte{position:relative;display:grid;gap:20px;align-content:start}
.kr-sparte-bild{width:100%;height:clamp(220px,34vh,340px);object-fit:cover;border-radius:2px}
.kr-sparte-nr{display:block;font-size:12px;letter-spacing:.16em;color:var(--kr-hell-mut);
  font-variant-numeric:tabular-nums;margin-bottom:8px}
.kr-sparte-text h3{font-size:clamp(1.8rem,4vw,3rem);line-height:1.05;color:#fff;margin-bottom:10px}
.kr-sparte-text p{color:var(--kr-hell);max-width:46ch}
.kr-sparte-link{display:inline-block;margin-top:14px;padding:10px 0;font-size:15px;font-weight:700;
  color:var(--kr-akzent,var(--kr-teal-hell));text-decoration:none;
  border-bottom:2px solid currentColor}
.kr-sparte-link:hover{color:#fff}
.kr-sparte--blau{--kr-akzent:#7FB3F0}
.kr-sparte--teal{--kr-akzent:#5AC0DD}
.kr-sparte--gruen{--kr-akzent:#8FD9BC}
.kr-sparte--orange{--kr-akzent:#FFA470}
.kr-sparte-nr{color:var(--kr-akzent)}

/* Ab Tablet: echte Fahrt. Die Bahn wird breit, das JS pinnt und schiebt sie. */
@media (min-width:52rem){
  .kr-sparten{padding-bottom:0}
  .kr-sparten-bahn{display:flex;gap:clamp(28px,4vw,64px);padding-bottom:0;
    width:max-content;align-items:stretch}
  .kr-sparte{width:min(34vw,460px);grid-template-rows:auto 1fr}
  .kr-sparte-bild{height:min(46vh,420px)}
  .kr-sparten-fortschritt{height:2px;background:rgba(255,255,255,.16);margin:clamp(30px,5vh,54px) var(--kr-rand) 0}
  .kr-sparten-fortschritt i{display:block;height:100%;width:0;background:var(--kr-licht)}
}

/* ====== Szene 4 · SPIELORTE ====== */
.kr-orte{display:grid;gap:0}
.kr-orte-bild{margin:0;overflow:hidden}
/* Bei echten Fotos entscheidet die Bildlage, ob Koepfe im Bild bleiben.
   Derselbe Platz zeigt am Rechner 3,08 und am Handy 0,89 – mittig
   geschnitten waeren die Musiker am Rechner oben abgeschnitten. 52 % ist
   gemessen, nicht geschaetzt. */
.kr-orte-bild img{width:100%;height:clamp(260px,52vh,620px);object-fit:cover;
  object-position:50% 52%;display:block}
/* 68 %: dort zeigt das schmale Band Bogen, Kacheln und Stuehle – das liest
   sich als Raum. Weiter oben (42 %) sah man nur Ornament. Die Regel haengt
   am BILD, nicht an der Seite: `page-template-default` haetten auch Kontakt
   und Rechtliches getragen und deren Kopfbilder mitverschoben. */
.kr-seitenkopf-bild img[src*="saal-kamin"]{object-position:50% 68%}
.kr-orte-text{padding:clamp(46px,8vh,90px) var(--kr-rand) clamp(60px,10vh,120px);display:grid;gap:16px;
  max-width:calc(62ch + 2*var(--kr-rand))}
.kr-orte-text h2{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.02;color:#fff}
.kr-orte-text em{font-style:italic;color:var(--kr-licht)}
.kr-orte-liste{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:8px}
.kr-orte-liste li{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--kr-hell-mut);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 14px}

/* ====== Szene 5 · PAPIER ======
   Harte Kante dunkel/hell – hier hoert die Inszenierung auf. */
.kr-papier{background:#FCFCFC;color:#152230;
  padding:clamp(70px,12vh,140px) var(--kr-rand) clamp(80px,13vh,150px)}
.kr-papier-innen{max-width:60ch;display:grid;gap:18px}
.kr-kicker--dunkel{color:#0C6E88}
.kr-papier h2{font-family:"Instrument Serif","Times New Roman",serif;font-weight:400;
  font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.02;color:#0B1722}
.kr-papier-satz{font-size:19px;color:#33465A;max-width:54ch}
.kr-papier-klein{font-size:16px;color:#5A6B7C;max-width:54ch}
.kr-beitrag{display:flex;flex-wrap:wrap;gap:14px 40px;margin:10px 0 4px;
  border-top:1px solid rgba(11,23,34,.16);border-bottom:1px solid rgba(11,23,34,.16);padding:18px 0}
.kr-beitrag dt{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#5A6B7C;margin-bottom:4px}
.kr-beitrag dd{font-size:20px;color:#0B1722}
.kr-beitrag b{font-family:"Instrument Serif",serif;font-size:30px;font-weight:400}
.kr-btn-dunkel{background:#0C6E88;color:#fff}
.kr-btn-dunkel:hover{background:#095466}
.kr-btn-linie{border:1.5px solid rgba(11,23,34,.45);color:#0B1722}
.kr-btn-linie:hover{background:#0B1722;color:#fff;border-color:#0B1722}


/* ====== NAVIGATION ====== */
.kr-kopf{gap:18px}
.kr-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.kr-nav-liste{list-style:none;display:flex;gap:clamp(14px,2vw,30px);align-items:center}
.kr-nav-liste a{font-size:15px;font-weight:500;letter-spacing:.04em;text-decoration:none;color:var(--kr-hell);
  padding:10px 0;display:inline-block;position:relative}
.kr-nav-liste a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.kr-nav-liste a:hover{color:#fff}
.kr-nav-liste a:hover::after{transform:scaleX(1)}
.kr-nav-liste .current-menu-item > a{color:#fff}
.kr-nav-liste .current-menu-item > a::after{transform:scaleX(1);background:var(--kr-licht)}
.kr-nav-tel{font-size:15px;font-weight:700;color:#fff;text-decoration:none;white-space:nowrap;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 16px}
.kr-nav-tel:hover{background:#fff;color:var(--kr-grund)}
.kr-menue-knopf{display:none;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  color:#fff;font:700 15px/1 "Manrope",system-ui,sans-serif;padding:12px 4px;min-height:48px}
.kr-menue-striche{display:block;width:22px}
.kr-menue-striche i{display:block;height:2px;background:currentColor;margin:5px 0;transition:transform .3s}
.kr-menue-knopf[aria-expanded="true"] .kr-menue-striche i:first-child{transform:translateY(3.5px) rotate(45deg)}
.kr-menue-knopf[aria-expanded="true"] .kr-menue-striche i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media (max-width:60rem){
  .kr-menue-knopf{display:inline-flex}
  /* An der Kopfzeile verankert statt auf festen 58 px: die Kopfhoehe aendert
     sich mit Breite und Inhalt (gemessen 76 px bei 780 px Fensterbreite), und
     das Menue klappte dadurch 18 px UNTER die Kopfzeile. */
  .kr-nav{position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--kr-grund);border-bottom:1px solid rgba(255,255,255,.16);
    padding:8px var(--kr-rand) 22px}
  .kr-nav[hidden]{display:none}
  .kr-nav-liste{flex-direction:column;gap:0;align-items:stretch}
  .kr-nav-liste a{padding:15px 0;font-size:19px;border-bottom:1px solid rgba(255,255,255,.12)}
  .kr-nav-liste a::after{display:none}
  .kr-nav-tel{margin-top:18px;text-align:center;padding:14px 16px}
}

/* ====== SEITENKOPF (Unterseiten) ====== */
.kr-seitenkopf{position:relative;min-height:clamp(360px,62vh,620px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--kr-grund)}
.kr-seitenkopf-bild{position:absolute;inset:0}
.kr-seitenkopf-bild img{width:100%;height:100%;object-fit:cover;display:block}
.kr-seitenkopf-schatten{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,16,31,.74) 0%,rgba(4,16,31,.3) 34%,rgba(4,16,31,.88) 82%,var(--kr-grund) 100%)}
.kr-seitenkopf-text{position:relative;z-index:2;padding:98px var(--kr-rand) clamp(38px,6vh,70px);
  display:grid;gap:14px;max-width:calc(34rem + 2*var(--kr-rand))}
.kr-seitenkopf-h1{font-size:clamp(2.6rem,7.6vw,6.5rem);line-height:.98;letter-spacing:-.01em;color:#fff}
.kr-seitenkopf-h1 em{font-style:italic;color:var(--kr-licht)}

/* ====== TEXTKOPF (Rechtliches, einfache Seiten) ====== */
.kr-textkopf{padding:calc(58px + clamp(60px,11vh,130px)) var(--kr-rand) clamp(26px,4vh,44px);
  display:grid;gap:14px;max-width:calc(46rem + 2*var(--kr-rand))}
.kr-textkopf h1{font-size:clamp(2.4rem,6.4vw,5rem);line-height:1;color:#fff}

/* ====== INHALTSBLOECKE ====== */
.kr-block{padding:clamp(48px,8vh,100px) var(--kr-rand)}
.kr-block-innen{max-width:74rem;margin:0 auto;display:grid;gap:18px}
.kr-block h2{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.04;color:#fff}
.kr-block h2 em{font-style:italic;color:var(--kr-licht)}
.kr-zweispalt{display:grid;gap:clamp(20px,3vw,48px);grid-template-columns:1fr;margin-top:6px}
@media (min-width:48rem){.kr-zweispalt{grid-template-columns:1fr 1fr}}
.kr-zweispalt p{max-width:52ch}
.kr-klein{font-size:16px;color:var(--kr-hell-mut);max-width:56ch}
.kr-klein-h{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--kr-teal-hell);margin-bottom:12px}
.kr-nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.kr-vorstand{list-style:none;border-top:1px solid rgba(255,255,255,.18);margin-top:8px}
.kr-vorstand li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.kr-vorstand-name{font-family:"Instrument Serif",serif;font-size:clamp(1.25rem,2.4vw,1.8rem);color:#fff}
.kr-vorstand-rolle{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--kr-hell-mut);align-self:center}

.kr-liste-linien{list-style:none;border-top:1px solid rgba(255,255,255,.16)}
.kr-liste-linien li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.16);color:var(--kr-hell)}
.kr-liste-breit li b{color:#fff}

/* ====== KONTAKTWEGE ====== */
.kr-wege{display:grid;gap:clamp(18px,2.4vw,32px);grid-template-columns:1fr;margin-top:10px}
@media (min-width:46rem){.kr-wege{grid-template-columns:repeat(3,1fr)}}
.kr-weg{display:grid;gap:8px;align-content:start;padding-top:18px;border-top:2px solid var(--kr-teal-hell)}
.kr-weg-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--kr-teal-hell)}
.kr-weg-wert{font-family:"Instrument Serif",serif;font-size:clamp(1.3rem,2.4vw,1.9rem);color:#fff;
  text-decoration:none;line-height:1.25;word-break:break-word}
a.kr-weg-wert:hover{color:var(--kr-licht)}
.kr-weg p{font-size:16px;color:var(--kr-hell-mut)}
.kr-hinweis{padding:16px 18px;border:1px solid rgba(232,199,154,.45);border-radius:6px;
  background:rgba(232,199,154,.1);color:var(--kr-hell)}
.kr-hinweis a{color:var(--kr-licht)}

/* ====== FILTER auf der Programmseite ====== */
.kr-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,4vh,42px)}
.kr-filter-knopf{font-size:14px;font-weight:500;letter-spacing:.05em;text-decoration:none;color:var(--kr-hell);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:11px 18px;min-height:44px;
  display:inline-flex;align-items:center;transition:background-color .2s,color .2s,border-color .2s}
.kr-filter-knopf:hover{border-color:#fff;color:#fff}
.kr-filter-knopf.ist-aktiv{background:#fff;color:var(--kr-grund);border-color:#fff;font-weight:700}

/* ====== RECHTSLISTE ====== */
.kr-rechtsliste{list-style:none;border-top:1px solid rgba(255,255,255,.18)}
.kr-rechtsliste li{border-bottom:1px solid rgba(255,255,255,.18)}
.kr-rechtsliste a,.kr-rechtsliste button{display:grid;gap:5px;width:100%;text-align:left;
  padding:20px 0;text-decoration:none;background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.kr-rechtsliste-titel{font-family:"Instrument Serif",serif;font-size:clamp(1.4rem,3vw,2.2rem);color:#fff}
.kr-rechtsliste a:hover .kr-rechtsliste-titel,.kr-rechtsliste button:hover .kr-rechtsliste-titel{color:var(--kr-licht)}
.kr-rechtsliste-text{font-size:16px;color:var(--kr-hell-mut)}

/* ====== EINZELNE VERANSTALTUNG ====== */
.kr-einzel{padding:calc(58px + clamp(56px,10vh,120px)) var(--kr-rand) clamp(60px,10vh,130px);
  max-width:calc(58rem + 2*var(--kr-rand));margin:0 auto;display:grid;gap:16px}
.kr-einzel-h1{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.02;color:#fff}
.kr-eckdaten{display:grid;grid-template-columns:auto 1fr;gap:0 24px;margin:12px 0 6px;
  border-top:1px solid rgba(255,255,255,.2)}
.kr-eckdaten dt{padding:14px 0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--kr-teal-hell);border-bottom:1px solid rgba(255,255,255,.12)}
.kr-eckdaten dd{padding:14px 0;color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
.kr-einzel-bild{margin:14px 0}
.kr-einzel-bild img{width:100%;height:auto;border-radius:2px}

/* ====== FUSS ====== */
.kr-fuss{background:#020A14;border-top:1px solid rgba(255,255,255,.14);
  padding:clamp(48px,8vh,86px) var(--kr-rand) 0}
.kr-fuss-innen{max-width:74rem;margin:0 auto;display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:1fr}
@media (min-width:46rem){.kr-fuss-innen{grid-template-columns:1.6fr 1.2fr 1fr 1fr}}
.kr-fuss-logo{height:38px;width:auto;opacity:.9;margin-bottom:14px}
.kr-fuss-satz{color:var(--kr-hell-mut);max-width:34ch;font-size:16px}
.kr-fuss-h{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--kr-teal-hell);margin-bottom:14px}
.kr-fuss address{font-style:normal;color:var(--kr-hell-mut);line-height:1.9;font-size:16px}
.kr-fuss-liste{list-style:none;display:grid;gap:2px}
.kr-fuss a{color:var(--kr-hell);text-decoration:none;padding:6px 0;display:inline-block}
.kr-fuss a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.kr-fuss-unten{max-width:74rem;margin:clamp(34px,5vh,56px) auto 0;padding:20px 0 26px;
  border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:8px 28px;
  justify-content:space-between;font-size:14px;color:var(--kr-hell-mut)}


/* ====== Korrekturen aus der Bildschirmaufnahme vom 03.09.2026 ====== */

/* Die gepinnte Sparten-Szene war hoeher als der Bildschirm – alles unterhalb,
   auch "Termine dieser Sparte", war waehrend des Pins nicht erreichbar.
   Jetzt teilt sich die Szene genau eine Bildschirmhoehe auf. */
@media (min-width:52rem){
  .kr-sparten{height:100svh;padding:0;overflow:hidden}
  .kr-sparten-buehne{height:100%;display:flex;flex-direction:column;justify-content:center;
    gap:clamp(12px,2.4vh,28px);padding:calc(58px + 2vh) 0 3vh}
  .kr-sparten-kopf{padding:0 var(--kr-rand);margin:0}
  .kr-sparten-kopf h2{font-size:clamp(1.7rem,4vw,3.4rem);margin-top:6px}
  .kr-sparten-bahn{padding:0 var(--kr-rand);margin:0}
  /* Gemessen bei 1920x1040: mit 400 px Karten war die Bahn exakt so breit wie
     der Bildschirm – die Fahrt hatte null Weg und die Karten standen nur da.
     Breitere Karten geben ihr wieder Strecke (bei 1920: rund 640 px). */
  .kr-sparte{width:min(38vw,560px);gap:clamp(10px,1.6vh,18px)}
  .kr-sparte-bild{height:clamp(140px,26vh,280px)}
  .kr-sparte-text h3{font-size:clamp(1.4rem,2.4vw,2.1rem);margin-bottom:6px}
  .kr-sparte-text p{font-size:16px;line-height:1.5}
  .kr-sparte-link{margin-top:10px;padding:6px 0}
  .kr-sparten-fortschritt{margin:0 var(--kr-rand)}
}

/* Der Held soll uebergeben, nicht ausloeschen: 55 % statt 78 %. */
.kr-held-dim{background:var(--kr-grund)}


/* ====== KONTAKTFORMULAR (Contact Form 7) ======
   CF7 bringt keine eigene Gestaltung mit – ohne diese Regeln stehen hier
   weisse Browser-Kaesten auf der dunklen Buehne. */
.kr-formular-block .wpcf7{margin-top:10px}
.kr-formular-block .wpcf7 form > p{margin:0}
.kr-formular-block .wpcf7-form > p:empty{display:none}

.kr-form-reihe{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:40rem){.kr-form-reihe{grid-template-columns:1fr 1fr;gap:18px 24px}}

.kr-feld{display:block;margin-bottom:18px;font-size:15px;font-weight:500;
  letter-spacing:.04em;color:var(--kr-hell)}
.kr-form-reihe .kr-feld{margin-bottom:0}
.kr-feld br{display:none}
.kr-pflicht{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kr-teal-hell);margin-left:6px;vertical-align:1px}

/* Die Felder selbst */
.kr-formular-block input[type=text],
.kr-formular-block input[type=email],
.kr-formular-block select,
.kr-formular-block textarea{
  width:100%;margin-top:8px;min-height:52px;padding:13px 16px;
  font:400 17px/1.5 "Manrope",system-ui,sans-serif;color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.26);border-radius:4px;
  transition:border-color .2s,background-color .2s}
.kr-formular-block textarea{min-height:150px;resize:vertical}
.kr-formular-block input::placeholder,
.kr-formular-block textarea::placeholder{color:var(--kr-hell-mut);opacity:1}
.kr-formular-block input:hover,
.kr-formular-block select:hover,
.kr-formular-block textarea:hover{border-color:rgba(255,255,255,.45)}
.kr-formular-block input:focus,
.kr-formular-block select:focus,
.kr-formular-block textarea:focus{outline:2px solid var(--kr-licht);outline-offset:2px;
  border-color:var(--kr-licht);background:rgba(255,255,255,.08)}

/* Auswahlfeld: eigener Pfeil, sonst zeichnet der Browser einen hellen Kasten */
.kr-formular-block select{appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,#E6ECEF 50%),
                   linear-gradient(135deg,#E6ECEF 50%,transparent 50%);
  background-position:calc(100% - 22px) 23px,calc(100% - 16px) 23px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.kr-formular-block select option{background:var(--kr-grund);color:#fff}

/* Einwilligung: grosses Kaestchen, grosse Trefferflaeche */
.kr-formular-block .wpcf7-acceptance .wpcf7-list-item{margin:0}
.kr-formular-block .wpcf7-acceptance label{display:flex;gap:13px;align-items:flex-start;
  cursor:pointer;padding:10px 0;font-size:16px;color:var(--kr-hell);line-height:1.5}
.kr-formular-block .wpcf7-acceptance input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;width:26px;height:26px;margin:0;
  border:1px solid rgba(255,255,255,.45);border-radius:4px;background:rgba(255,255,255,.05);
  cursor:pointer;position:relative;top:1px}
.kr-formular-block .wpcf7-acceptance input[type=checkbox]:checked{
  background:var(--kr-teal-btn);border-color:var(--kr-teal-btn)}
.kr-formular-block .wpcf7-acceptance input[type=checkbox]:checked::after{
  content:"";position:absolute;left:8px;top:3px;width:7px;height:14px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.kr-formular-block .wpcf7-acceptance input[type=checkbox]:focus-visible{
  outline:2px solid var(--kr-licht);outline-offset:2px}
.kr-form-klein{font-size:15px;color:var(--kr-hell-mut);margin:4px 0 22px;max-width:52ch}
.kr-form-klein a{color:var(--kr-teal-hell)}

/* Absenden – dieselbe Pille wie ueberall sonst */
.kr-formular-block input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:13px 34px;border:0;border-radius:999px;
  background:var(--kr-teal-btn);color:#fff;cursor:pointer;
  font:700 17px/1.2 "Manrope",system-ui,sans-serif;letter-spacing:.01em;
  transition:background-color .25s}
.kr-formular-block input[type=submit]:hover{background:#0A5F76}
.kr-formular-block input[type=submit]:focus-visible{outline:2px solid var(--kr-licht);outline-offset:3px}
.kr-formular-block .wpcf7-spinner{margin:0 0 0 14px;background:var(--kr-licht)}

/* Rueckmeldungen: nie nur ueber Farbe – Rahmen und Text tragen die Aussage */
.kr-formular-block .wpcf7-response-output{
  margin:22px 0 0;padding:15px 18px;border-radius:6px;font-size:16px;line-height:1.5;
  border:1px solid rgba(255,255,255,.3);color:var(--kr-hell);background:rgba(255,255,255,.05)}
.kr-formular-block .wpcf7 form.sent .wpcf7-response-output{
  border-color:#8FD9BC;background:rgba(143,217,188,.12);color:#CFEFE1}
.kr-formular-block .wpcf7 form.invalid .wpcf7-response-output,
.kr-formular-block .wpcf7 form.unaccepted .wpcf7-response-output,
.kr-formular-block .wpcf7 form.failed .wpcf7-response-output{
  border-color:#FFA98A;background:rgba(236,94,9,.14);color:#FFC9B4}
.kr-formular-block .wpcf7-not-valid-tip{
  display:block;margin-top:8px;font-size:15px;font-weight:500;color:#FFC9B4}
/* Mit Element im Selektor – sonst hat die Feldregel oben mehr Gewicht und
   das fehlerhafte Feld bleibt unmarkiert (am 03.09.2026 genau so passiert). */
.kr-formular-block input.wpcf7-not-valid,
.kr-formular-block select.wpcf7-not-valid,
.kr-formular-block textarea.wpcf7-not-valid{border-color:#FFA98A;background:rgba(236,94,9,.09)}
.kr-formular-block .screen-reader-response{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}


/* ====== "Nach oben" ======
   Stapelplatz bewusst unter Vorhang (100) und Skip (110). */
.kr-hoch{position:fixed;z-index:50;right:var(--kr-rand);
  bottom:max(24px,env(safe-area-inset-bottom));
  width:52px;height:52px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;
  background:rgba(4,16,31,.82);color:#fff;cursor:pointer;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s,transform .3s,background-color .2s,border-color .2s}
.kr-hoch.ist-da{opacity:1;transform:none;pointer-events:auto}
.kr-hoch:hover{background:var(--kr-teal-btn);border-color:var(--kr-teal-btn)}
.kr-hoch:focus-visible{outline:2px solid var(--kr-licht);outline-offset:3px}
/* Auf hellem Grund (Papier-Abschnitt) wuerde er sonst verschwinden. */
@supports (backdrop-filter: blur(2px)){.kr-hoch{backdrop-filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){.kr-hoch{transition:opacity .01s}}


/* ====== "Vorhang" in der Kopfzeile (nur Startseite) ====== */
.kr-vorhang-knopf{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  min-height:44px;padding:9px 16px;cursor:pointer;
  background:none;border:1px solid rgba(255,255,255,.32);border-radius:999px;
  color:var(--kr-hell);font:700 14px/1 "Manrope",system-ui,sans-serif;letter-spacing:.04em;
  transition:background-color .2s,color .2s,border-color .2s}
.kr-vorhang-knopf svg{transition:transform .5s cubic-bezier(.65,0,.35,1)}
.kr-vorhang-knopf:hover{background:#fff;color:var(--kr-grund);border-color:#fff}
.kr-vorhang-knopf:hover svg{transform:rotate(-180deg)}
.kr-vorhang-knopf:focus-visible{outline:2px solid var(--kr-licht);outline-offset:3px}
/* Neben dem Logo, nicht am rechten Rand kleben – die Navigation kommt danach. */
.kr-kopf .kr-marke{margin-right:14px}
@media (min-width:60.01rem){.kr-vorhang-knopf{margin-left:0;margin-right:auto}}
/* Auf schmalen Schirmen nur das Zeichen: der Kopf hat dort 58 px und
   drei Beschriftungen nebeneinander sprengen ihn. */
@media (max-width:34rem){
  .kr-vorhang-knopf span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .kr-vorhang-knopf{padding:9px 12px}
}
/* Der Vorhang wird hier nie gebaut – dann darf der Knopf ihn nicht versprechen. */
@media (prefers-reduced-motion:reduce){.kr-vorhang-knopf{display:none}}
/* Waehrend der Ouvertuere ist die Kopfzeile ohnehin unsichtbar (.kr-zu). */


/* ====== Eigene Zeichen des Vereins ======
   Buch, Leier, Masken, Pinsel im Teal-Ring – von der bisherigen Seite und aus
   dem Programmflyer. Sie tragen den Wiedererkennungswert, deshalb bleiben sie
   unveraendert und werden nicht eingefaerbt. */
.kr-sparte-kopf{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.kr-sparte-zeichen{width:38px;height:38px;flex:0 0 auto}
.kr-sparte-kopf .kr-sparte-nr{margin:0}
@media (min-width:52rem){.kr-sparte-zeichen{width:44px;height:44px}}

/* ====== Zitat ====== */
.kr-zitat{padding:clamp(70px,13vh,150px) var(--kr-rand);
  border-top:1px solid rgba(255,255,255,.12)}
.kr-zitat-innen{max-width:34ch;margin:0 auto;text-align:center;display:grid;gap:20px}
.kr-zitat blockquote{position:relative;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.3;
  color:#fff;letter-spacing:-.005em;text-wrap:balance}
.kr-zitat blockquote em{font-style:italic;color:var(--kr-licht)}
.kr-zitat-marke{color:var(--kr-teal-hell)}
.kr-zitat figcaption{font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kr-hell-mut)}


/* ====== Schlagzeile des Helden: einzeilig auf jeder Breite ======
   Die laengste Zeile misst bei Instrument Serif rund 7,8 em. Damit sie in die
   verfuegbare Breite passt, wird die Groesse aus der Fensterbreite gedeckelt
   (7,4vw ~ 142 px bei 1920 -> ~1110 px Bedarf) und die Spalte entsprechend
   weit gelassen. Fliesstext und Kicker behalten ihre Lesebreite. */
@media (min-width:46rem){
  .kr-held-inhalt{max-width:calc(74rem + 2 * var(--kr-rand))}
  .kr-h1{font-size:min(7.2vw,8.5rem);max-width:min(92vw,1280px)}
  .kr-held-inhalt .kr-kicker{max-width:60ch}
  .kr-held-inhalt .kr-satz{max-width:46ch}
  .kr-held-inhalt .kr-ctas{max-width:46ch}
}


/* ====== Schlagzeilen der Unterseiten: gleiche Regel wie beim Helden ======
   Gemessen am 03.09.2026 auf /kontakt/: "Schreiben Sie uns." und "Wir sind
   Menschen." brachen bei 6,5 rem Schriftgroesse in einer 34-rem-Spalte auf je
   zwei Zeilen um – vier statt zwei. Spalte weit lassen, Groesse deckeln,
   Fliesstext behaelt seine Lesebreite. */
@media (min-width:46rem){
  .kr-seitenkopf-text{max-width:calc(74rem + 2 * var(--kr-rand))}
  .kr-seitenkopf-h1{font-size:min(6.2vw,7rem);max-width:min(92vw,1280px)}
  .kr-seitenkopf-text .kr-satz{max-width:46ch}
  .kr-seitenkopf-text .kr-kicker{max-width:60ch}
}

/* ====== Startseite als Haus ====== */
.kr-haus{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;vertical-align:-4px}
.kr-nav-liste .kr-nur-vorleser{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:60rem){
  /* Im aufgeklappten Menue traegt das Symbol allein zu wenig – dort das Wort. */
  .kr-nav-liste .kr-nur-vorleser{position:static;width:auto;height:auto;
    clip-path:none;margin-left:10px}
  .kr-haus{vertical-align:-5px}
}


/* ====== PROGRAMMHEFT: helle Fassung der Leseseiten ======
   Nur die Farbwerte wechseln – kein Bauteil kennt die Fassung, deshalb kann
   jede Seite ohne weitere Arbeit umgestellt werden. Gemessene Kontraste stehen
   in der Uebergabe. */
body.kr-heft{
  --kr-grund:#F4EFE6;          /* warmes Programmheft-Papier, aus dem Wolframlicht der Fotos */
  --kr-hell:#2A3542;           /* Fliesstext */
  --kr-hell-mut:#5C6875;       /* Nebentext */
  --kr-teal:#0C6E88;
  --kr-teal-hell:#0A5F76;      /* auf Papier muss das Teal DUNKLER werden, nicht heller */
  --kr-teal-btn:#0C6E88;
  --kr-licht:#8A5A22;          /* der warme Akzent als Sepia, sonst verschwindet er */
  --kr-weiss:#121A24;
  background:var(--kr-grund);
  color:var(--kr-hell);
}
body.kr-heft .kr-kopf,
body.kr-heft .kr-nav{background:var(--kr-grund);
  border-bottom:1px solid rgba(18,26,36,.14)}
body.kr-heft .kr-logo-kopf,
body.kr-heft .kr-fuss-logo{filter:invert(1) brightness(.28) saturate(1.5)}
body.kr-heft .kr-nav-liste a,
body.kr-heft .kr-menue-knopf,
body.kr-heft .kr-nav-tel{color:#121A24}
body.kr-heft .kr-nav-tel{border-color:rgba(18,26,36,.4)}
body.kr-heft .kr-nav-tel:hover{background:#121A24;color:#fff}
body.kr-heft .kr-nav-liste a{border-bottom-color:rgba(18,26,36,.12)}

/* Ueberschriften und Linien */
body.kr-heft h1,body.kr-heft h2,body.kr-heft h3,
body.kr-heft .kr-seitenkopf-h1,body.kr-heft .kr-textkopf h1,
body.kr-heft .kr-vorstand-name,body.kr-heft .kr-weg-wert,
body.kr-heft .kr-termin-titel{color:#121A24}
body.kr-heft em,body.kr-heft .kr-block h2 em,
body.kr-heft .kr-seitenkopf-h1 em{color:var(--kr-licht)}
body.kr-heft .kr-liste-linien,body.kr-heft .kr-liste-linien li,
body.kr-heft .kr-vorstand,body.kr-heft .kr-vorstand li,
body.kr-heft .kr-termine,body.kr-heft .kr-termin,
body.kr-heft .kr-eckdaten,body.kr-heft .kr-eckdaten dt,body.kr-heft .kr-eckdaten dd,
body.kr-heft .kr-rechtsliste,body.kr-heft .kr-rechtsliste li{
  border-color:rgba(18,26,36,.18)}
body.kr-heft .kr-orte-liste li{border-color:rgba(18,26,36,.28)}

/* Der Seitenkopf behaelt sein Foto – dort bleibt der Text weiss. */
body.kr-heft .kr-seitenkopf-h1,
body.kr-heft .kr-seitenkopf-text .kr-satz,
body.kr-heft .kr-seitenkopf-text .kr-kicker{color:#fff}
body.kr-heft .kr-seitenkopf-h1 em{color:#E8C79A}
body.kr-heft .kr-seitenkopf-text .kr-kicker{color:#8FD7EA}
body.kr-heft .kr-seitenkopf-schatten{
  background:linear-gradient(180deg,rgba(4,16,31,.72) 0%,rgba(4,16,31,.3) 34%,rgba(4,16,31,.86) 78%,var(--kr-grund) 100%)}

/* Knoepfe */
body.kr-heft .kr-btn-rand{border-color:rgba(18,26,36,.5);color:#121A24}
body.kr-heft .kr-btn-rand:hover{background:#121A24;color:var(--kr-grund);border-color:#121A24}
body.kr-heft .kr-hoch{background:rgba(244,239,230,.9);border-color:rgba(18,26,36,.35);color:#121A24}
body.kr-heft .kr-hoch:hover{background:var(--kr-teal-btn);border-color:var(--kr-teal-btn);color:#fff}
body.kr-heft .kr-sprung{background:var(--kr-teal-btn);color:#fff}

/* Formular */
body.kr-heft .kr-formular-block input[type=text],
body.kr-heft .kr-formular-block input[type=email],
body.kr-heft .kr-formular-block select,
body.kr-heft .kr-formular-block textarea{
  background:#FFFDF9;border-color:rgba(18,26,36,.34);color:#121A24}
body.kr-heft .kr-formular-block select{
  background-image:linear-gradient(45deg,transparent 50%,#2A3542 50%),
                   linear-gradient(135deg,#2A3542 50%,transparent 50%)}
body.kr-heft .kr-formular-block select option{background:#FFFDF9;color:#121A24}
body.kr-heft .kr-formular-block .wpcf7-acceptance input[type=checkbox]{
  background:#FFFDF9;border-color:rgba(18,26,36,.42)}
body.kr-heft .kr-hinweis{background:rgba(138,90,34,.1);border-color:rgba(138,90,34,.45);color:#4A3416}
body.kr-heft .kr-hinweis a{color:#7A4E1C}

/* Fuss: bleibt dunkel – er schliesst die Seite ab wie ein Buchruecken. */
body.kr-heft .kr-fuss{background:#0B1622;color:#C4CED8;border-top:0}
body.kr-heft .kr-fuss a{color:#E6ECEF}
body.kr-heft .kr-fuss-h{color:#5AC0DD}
body.kr-heft .kr-fuss address,body.kr-heft .kr-fuss-satz,
body.kr-heft .kr-fuss-unten{color:#9FADBA}
body.kr-heft .kr-fuss-logo{filter:none}


/* ====== Signatur im Fuss – Hausstandard seit 20.09.2026 ======
   Kleine entsaettigte Marke neben dem Copyright, rechts aussen. Im
   Ruhezustand ordnet sie sich unter (grau, 62 % Deckkraft), beim
   Darueberfahren springt sie in Farbe. Sie darf dem Kundenlogo im selben
   Fuss nicht die Schau stehlen.
   Gemessen auf dem Fussgrund #020A14: Text 10,1:1, Hover 19,9:1.
   Die Regeln stehen auf zwei Klassen, weil `.kr-fuss a` sonst Farbe,
   Polster und Unterstreichung durchsetzt. */
.kr-fuss-unten .kr-gemacht{display:inline-flex;align-items:center;gap:10px;padding:0;
  color:var(--kr-hell-mut);text-decoration:none;font-size:12.5px;white-space:nowrap}
.kr-fuss-unten .kr-gemacht img{height:22px;width:auto;display:block;
  filter:grayscale(1) opacity(.62);transition:filter .3s,transform .3s}
.kr-fuss-unten .kr-gemacht b{font-weight:600;color:var(--kr-hell-mut);transition:color .25s}
.kr-fuss-unten .kr-gemacht:hover{text-decoration:none}
.kr-fuss-unten .kr-gemacht:hover img{filter:none;transform:translateY(-1px)}
.kr-fuss-unten .kr-gemacht:hover b{color:#fff}
.kr-fuss-unten .kr-gemacht:focus-visible{outline:2px solid var(--kr-licht);outline-offset:3px}
@media (max-width:760px){.kr-fuss-unten .kr-gemacht{font-size:12px}}
body.kr-heft .kr-fuss-unten .kr-gemacht,
body.kr-heft .kr-fuss-unten .kr-gemacht b{color:#9FADBA}
body.kr-heft .kr-fuss-unten .kr-gemacht:hover b{color:#E6ECEF}


/* ====== Fuss: Sozial-Knoepfe und Urhebervermerk in der vierten Spalte ====== */
.kr-sozial{list-style:none;display:flex;gap:16px;margin-bottom:24px}
.kr-sozial-knopf{display:grid;place-items:center;width:48px;height:48px;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#E6ECEF;
  transition:background-color .25s,border-color .25s,color .25s,transform .25s}
.kr-sozial-knopf svg{width:22px;height:22px}
.kr-sozial-knopf img{width:100%;height:100%;border-radius:999px;object-fit:cover}
.kr-sozial-knopf:hover{transform:translateY(-2px);border-color:#fff}
.kr-sozial--facebook:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.kr-sozial--instagram:hover{background:#C1358A;border-color:#C1358A;color:#fff}
.kr-sozial-knopf:focus-visible{outline:2px solid var(--kr-licht);outline-offset:3px}

.kr-sozial{justify-content:center;max-width:190px}
/* space-between aus der Grundregel bleibt: Copyright links, Signatur rechts
   aussen. Am Handy bricht die Zeile um und die Signatur steht darunter. */

/* Mit eigenem Bild braucht der Knopf keinen Ring: der Farbklecks IST die Form.
   Die Glyphen-Fassung (ohne Bild) behaelt ihren Ring – beide Faelle stehen
   nebeneinander, weil das Template das Bild nur nimmt, wenn es existiert. */
.kr-sozial-knopf:has(img){width:78px;height:78px;border:0;background:none}
.kr-sozial-knopf:has(img):hover{background:none;transform:translateY(-2px) scale(1.06)}
.kr-sozial-knopf img{width:100%;height:100%;border-radius:0;object-fit:contain}
.kr-sozial-knopf:has(img):focus-visible{outline-offset:4px;border-radius:12px}

/* ====== Held: Textblock hoeher setzen ======
   Gemessen bei 1860x810: der Block endete bei 755 von 810 Bildpunkten und
   klebte damit am unteren Rand – der Fluegel wirkte dazwischen eingequetscht,
   und der Scroll-Hinweis lag auf den Knoepfen. Mehr Polster unten schiebt den
   Block nach oben (er ist unten ausgerichtet), das Foto bekommt Luft. */
@media (min-width:46rem){
  .kr-held-inhalt{padding-bottom:clamp(115px,24vh,250px)}
  /* Zwei Atempausen: nach der Displayzeile und vor den Knoepfen. Der Kicker
     bleibt eng an der Zeile – er gehoert dazu, ist keine eigene Aussage. */
  .kr-held-inhalt .kr-satz{margin-top:clamp(6px,1.4vh,18px)}
  .kr-held-inhalt .kr-ctas{margin-top:clamp(12px,2.2vh,28px)}
}

/* Kurze Desktop-Fenster (geteilter Bildschirm, kleines Fenster, Laptop quer).
   Gemessen bei 780x430: durch die neuen Abstaende endeten die Knoepfe 24 px
   UNTER der Kante. Der Held ist auf Bildschirmhoehe festgelegt – was nicht
   hineinpasst, ist unerreichbar. Also greifen hier kleinere Werte. */
@media (min-width:46rem) and (max-height:620px){
  .kr-held-inhalt{padding-top:calc(var(--kr-band-h) + 56px);padding-bottom:clamp(40px,8vh,70px);
    gap:clamp(8px,1.4vh,14px)}
  .kr-held-inhalt .kr-satz{margin-top:4px;font-size:18px}
  .kr-held-inhalt .kr-ctas{margin-top:8px}
  .kr-h1{font-size:min(5.6vw,4.2rem)}
  .kr-scroll-hinweis{display:none}
}


/* ==========================================================================
   ZWEITE STARTSEITE – /buehne-frei/, Body-Klasse .kr-jung
   --------------------------------------------------------------------------
   Kein zweites Theme, kein zweites Stylesheet: dieselben Bausteine, eine
   andere Palette. Die Farben kommen vom NEUEN Flyer (Magenta/Cyan auf
   Tiefblau) – wer den QR-Code scannt, soll das Papier in der Hand
   wiedererkennen. Statt Instrument Serif traegt hier Manrope in Versalien
   die Schlagzeilen; das ist der eine typografische Unterschied und kostet
   keine einzige neue Schriftdatei.

   Kontraste gerechnet (kontrast-jung.py), die drei knappen Werte:
     Tinte auf Magenta   4,69:1   ← deshalb Tinte und nicht Weiss (4,18:1)
     Tinte auf Cyan      7,47:1
     Magenta als Text    7,26:1   ← dafuer die hellere Variante --kr-pink-t
   ========================================================================== */
body.kr-jung{
  --kr-grund:#080B1A;
  --kr-karte:#101528;
  --kr-pink:#EC1E79;        /* Plakat-Magenta, nur als Flaeche */
  --kr-pink-t:#FF67AC;      /* dieselbe Farbe aufgehellt, fuer Text */
  --kr-cyan:#29ABE2;
  --kr-cyan-t:#5BC8F5;
  --kr-tinte:#080B1A;       /* Schrift auf den Farbflaechen, wie auf dem Plakat */
  --kr-hell:#E9EDF5;
  --kr-hell-mut:#AEB8CC;
  --kr-teal:var(--kr-cyan);
  --kr-teal-hell:var(--kr-cyan-t);
  --kr-licht:var(--kr-pink-t);
}
/* Der Grund liegt am html-Element; ohne das hier blitzt beim Ueberscrollen
   das Blau der Hauptseite durch. */
html:has(body.kr-jung){background:#080B1A}
body.kr-jung ::selection{background:var(--kr-cyan);color:var(--kr-tinte)}

/* --- Held: gleiche Mechanik, Plakatschrift und Neonschleier --- */
body.kr-jung .kr-held-inhalt{max-width:calc(44rem + 2 * var(--kr-rand))}
body.kr-jung .kr-h1{font-family:"Manrope",system-ui,sans-serif;font-weight:700;
  text-transform:uppercase;font-size:clamp(2.6rem,7.6vw,6.4rem);line-height:.94;letter-spacing:-.025em}
/* Gemessen bei 961 px: "Deine Buehne." ist 359 px breit in einer 704 px
   breiten Spalte – es war reichlich Luft da, und ein Plakat lebt von der
   Groesse. Bei 1920 px steht die laengere Zeile bei 657 von 832 px. */
body.kr-jung .kr-h1 em{font-style:normal;color:var(--kr-pink-t)}
/* Im Helden steht der Kicker WEISS, nicht cyan. Gemessen auf dem hellsten
   Fuenftel des Fotos an dieser Hoehe: Cyan kaeme auf 3,75:1 und faellt bei
   13 px durch, Weiss steht bei 5,45:1. In allen Abschnitten darunter liegt
   der Kicker auf einem ruhigen Grund und bleibt cyan (10,27:1). */
body.kr-jung .kr-held-inhalt .kr-kicker{color:#fff}
/* Magenta von links, Cyan von rechts, darueber der uebliche Abdunkler nach
   unten – sonst steht der Text auf der Kostuemstange. */
body.kr-jung .kr-held-schatten{background:
  linear-gradient(96deg,rgba(236,30,121,.30) 0%,rgba(236,30,121,0) 46%),
  linear-gradient(266deg,rgba(41,171,226,.26) 0%,rgba(41,171,226,0) 52%),
  linear-gradient(180deg,rgba(8,11,26,.62) 0%,rgba(8,11,26,.14) 32%,rgba(8,11,26,.58) 70%,rgba(8,11,26,.97) 100%)}

/* --- Knoepfe: Tinte auf Magenta. Weiss faellt hier durch (4,18:1). --- */
body.kr-jung .kr-btn-voll{background:var(--kr-pink);color:var(--kr-tinte)}
body.kr-jung .kr-btn-voll:hover{background:var(--kr-pink-t);color:var(--kr-tinte)}
body.kr-jung .kr-btn-rand:hover{background:var(--kr-cyan);color:var(--kr-tinte);border-color:var(--kr-cyan)}

/* --- Abschnitte --- */
/* position:relative ist hier PFLICHT, kein Beiwerk. Der Held wird gepinnt;
   ScrollTrigger laesst dabei eine Transformation auf ihm stehen, und ein
   transformiertes Element malt ueber alles Nachfolgende, was nicht selbst
   positioniert ist. Ohne diese Zeile landet der Sprung auf "#preis"
   rechnerisch richtig, zu sehen ist aber weiter das Heldfoto. Auf der
   Startseite erledigt das die Klasse .kr-szene. */
.kr-jung-block{position:relative;padding:clamp(58px,9vh,112px) var(--kr-rand);background:var(--kr-grund)}
.kr-jung-block--karte{background:#0C1020}
.kr-jung-innen{max-width:74rem;margin:0 auto}
.kr-jung-h{font-family:"Manrope",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.04;letter-spacing:-.02em;color:#fff;margin:10px 0 20px}
.kr-jung-h em{font-style:normal;color:var(--kr-pink-t)}
.kr-jung-satz{max-width:58ch;color:var(--kr-hell);margin-bottom:26px}
.kr-jung-klein{margin-top:24px;font-size:16px;color:var(--kr-hell-mut);max-width:62ch}
.kr-jung-klein a{color:var(--kr-cyan-t);text-underline-offset:3px}

/* --- Preis: die erste echte Frage, deshalb der erste Abschnitt --- */
.kr-preis{list-style:none;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.kr-preis-karte{background:var(--kr-karte);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:24px 24px 26px}
.kr-preis-karte--pink{border-color:var(--kr-pink)}
.kr-preis-was{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--kr-cyan-t)}
.kr-preis-karte--pink .kr-preis-was{color:var(--kr-pink-t)}
.kr-preis-zahl{font-family:"Manrope",system-ui,sans-serif;font-weight:700;
  font-size:clamp(2.4rem,5.6vw,3.4rem);line-height:1.06;color:#fff;margin:8px 0 12px}
.kr-preis-wer{font-size:16px;color:var(--kr-hell-mut)}
/* Platzhalter. Sichtbar als Luecke, nicht als Zahl – erfundene Preise waeren
   auf genau dieser Seite die schlimmste Sorte Fehler. */
.kr-lueck{color:var(--kr-pink-t);border-bottom:3px dashed currentColor}

/* --- Was laeuft: Raster statt gepinnter Fahrt --- */
.kr-formen{list-style:none;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.kr-form-link{display:block;height:100%;background:var(--kr-grund);border:1px solid rgba(255,255,255,.10);
  border-radius:20px;padding:22px;text-decoration:none;transition:border-color .2s,transform .2s}
.kr-form-link:hover{border-color:var(--kr-cyan);transform:translateY(-3px)}
/* Die Zeichen der jungen Seite sind Bildausschnitte aus dem Plakat, keine
   flaechigen Symbole – bei 54 px waere davon nichts mehr zu erkennen. */
.kr-form-zeichen{width:88px;height:88px;border-radius:50%}
.kr-form-h{font-family:"Manrope",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:19px;color:#fff;margin:14px 0 6px}
.kr-form-link p{font-size:16px;color:var(--kr-hell-mut)}
.kr-form-mehr{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--kr-cyan-t)}

/* --- Mitmachen: der eigentliche Unterschied zur Startseite --- */
.kr-mitmach{list-style:none;counter-reset:m;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.kr-mitmach li{counter-increment:m;background:var(--kr-karte);border-radius:16px;
  padding:20px 20px 22px;border-left:3px solid var(--kr-pink)}
.kr-mitmach li::before{content:counter(m,decimal-leading-zero);display:block;font-weight:700;
  font-size:13px;letter-spacing:.16em;color:var(--kr-pink-t);margin-bottom:10px}
.kr-mitmach b{display:block;color:#fff;font-size:18px;margin-bottom:4px}
.kr-mitmach span{font-size:16px;color:var(--kr-hell-mut)}

/* --- Die Frage zurueck --- */
.kr-jung-ruf{position:relative;padding:clamp(66px,11vh,130px) var(--kr-rand);border-top:3px solid var(--kr-pink);
  background:linear-gradient(135deg,#12061B 0%,#0B0F22 55%,#071A2A 100%)}

/* --- Fuss: derselbe Bau, nur die Kante in Magenta --- */
body.kr-jung .kr-fuss{background:#050718;border-top-color:rgba(236,30,121,.40)}

/* Das Vorhangbild wird in functions.php gesetzt, nicht hier: nur dort laesst
   sich ?ver=filemtime anhaengen. Ohne die Versionsnummer liefert der Browser
   nach einem Bildwechsel wochenlang das alte Bild, und Cache-Leeren auf dem
   Server hilft dagegen nicht. Am 04.09.2026 genau so passiert. */

/* ====== BLOCKINHALTE AUS DEM EDITOR (.kr-fliess) ======
   Gemessen am 31.10.2026 auf /rechtliches/ bei 320 px Bildschirm: Der Absatz
   war 330 px breit in einem 276 px breiten Raster. Die Ursache ist NICHT der
   Umbruch, sondern `min-width:auto` - die Vorgabe fuer Raster- und Flex-Kinder.
   Sie verbietet dem Kind, unter seine kleinste Inhaltsbreite zu gehen; eine
   lange Mailadresse (Info@Kulturring-Wittmund.de) macht damit den ganzen Block
   breiter als den Bildschirm.

   Warum `overflow-wrap:break-word` allein nicht reicht: Es bricht sichtbar,
   aendert aber die BERECHNETE Mindestbreite nicht. Erst `min-width:0` laesst
   die Rasterspur schrumpfen, dann greift der Umbruch. Bei Links zusaetzlich
   `anywhere`, weil Mailadressen und URLs keine Trennstellen haben - im
   Fliesstext waere das haesslich, in einem Link nicht. */
.kr-fliess > *{min-width:0}
.kr-fliess{overflow-wrap:break-word}
.kr-fliess a{overflow-wrap:anywhere}