/* Schriften liegen in der Seite selbst, es geht keine Anfrage
   an Google oder einen anderen Server hinaus. */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/lato-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lato-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/lato-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/lato-latin-900-normal.woff2) format("woff2")}

  :root{
    --bg:#1B1A18;
    --rail:#131211;
    --card:#262421;
    --card-hi:#35322D;
    --gold:#E0AE5E;
    --gold-deep:#C6924A;
    --ink:#17150F;
    --text:#F3F1EE;
    --muted:#9E9B95;
    --muted-2:#78756F;
    --line:rgba(255,255,255,.13);
    --line-soft:rgba(255,255,255,.07);
    --maxw:1320px;
    --ui:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    --display:"Anton","Haettenschweiler","Arial Narrow",Impact,sans-serif;
    --r:26px;
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--text);
    font-family:var(--ui);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img{max-width:100%}
  h1,h2,h3{margin:0}
  p{margin:0}
  ::selection{background:var(--gold);color:#17150F}

  .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:22px}
  @media (max-width:640px){.wrap{padding-inline:16px}}

  .dsp{font-family:var(--display);font-weight:400;text-transform:uppercase;
    line-height:.92;letter-spacing:-.005em}
  .tagline{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}

  /* ---------- Schwebende Bedienelemente ---------- */
  .float{position:fixed;z-index:80;top:max(18px,env(safe-area-inset-top,0px));
    left:0;right:0;pointer-events:none}
  .float .row{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .mark{pointer-events:auto;cursor:pointer;display:flex;align-items:center;
    background:rgba(19,18,17,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:24px;padding:11px 28px 10px;
    transition:border-color .3s}
  .mark:hover{border-color:rgba(224,174,94,.5)}
  /* Wortmarke im Einladungssatz: gesperrt unter einer Haarlinie */
  .mark b{display:block;position:relative;text-align:center;padding-top:9px;
    font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1;
    font-size:clamp(16px,1.75vw,23px);letter-spacing:.42em;
    color:#F6F2EA;text-shadow:none}
  .mark b::before{content:"";position:absolute;left:0;right:0;top:0;height:1.3px;
    background:var(--gold)}
  .mark b em{font-style:normal;margin-right:-.42em;display:block}
  .mark b span{display:block;font-family:var(--ui);font-weight:700;font-size:6.2px;
    letter-spacing:.5em;margin:4px 0 1px;margin-right:-.5em;color:var(--gold);text-shadow:none}
  @media (max-width:520px){.mark{padding:9px 17px 8px}.mark b{font-size:13.5px;letter-spacing:.36em}
    .mark b em{margin-right:-.36em}.mark b span{font-size:5.6px;letter-spacing:.44em;margin:3px 0 0;margin-right:-.44em}}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
  .menub{pointer-events:auto;cursor:pointer;border:1px solid var(--line);border-radius:999px;
    background:rgba(19,18,17,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    color:var(--text);font:inherit;font-size:12px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;padding:13px 22px;display:flex;align-items:center;gap:11px;
    transition:background .3s,border-color .3s,color .3s}
  .menub:hover{background:var(--gold);border-color:var(--gold);color:#17150F}
  .menub .bars{display:grid;gap:3px}
  .menub .bars span{display:block;width:16px;height:1.5px;background:currentColor}

  .cta-dock{position:fixed;z-index:80;left:50%;transform:translateX(-50%);
    bottom:max(20px,env(safe-area-inset-bottom,0px));pointer-events:auto}
  .cta-dock .pill{display:flex;align-items:center;gap:12px;border-radius:999px;
    background:var(--gold);color:#17150F;border:0;cursor:pointer;
    font:inherit;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
    padding:16px 28px;box-shadow:0 14px 40px rgba(0,0,0,.45);transition:transform .3s,background .3s}
  .cta-dock .pill:hover{transform:translateY(-3px);background:#EFBD70}
  .cta-dock .pill:hover{background:#EFBD70}
  .cta-dock .pill em{font-style:normal;width:7px;height:7px;border-radius:50%;background:#17150F}

  /* ---------- Vollbildmenü ---------- */
  .overlay{position:fixed;inset:0;z-index:90;background:var(--rail);display:none;
    padding:max(24px,env(safe-area-inset-top,0px)) 0 40px}
  .overlay.open{display:flex;flex-direction:column;animation:fade .3s ease}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .overlay .top{display:flex;justify-content:space-between;align-items:center}
  .overlay .close{background:none;border:1px solid var(--line);border-radius:999px;color:var(--text);
    cursor:pointer;font:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:13px 22px}
  .overlay .close:hover{border-color:var(--gold);color:var(--gold)}
  .omenu{display:flex;flex-direction:column;justify-content:center;flex:1;gap:4px;padding-block:30px}
  .omenu a{cursor:pointer;font-family:var(--display);text-transform:uppercase;
    font-size:clamp(38px,9vw,104px);line-height:1.02;color:var(--text);
    transition:color .25s,padding-left .35s;padding-left:0}
  .omenu a:hover{color:var(--gold);padding-left:18px}
  .overlay .bot{display:flex;gap:26px;flex-wrap:wrap;color:var(--muted);font-size:14px}
  .overlay .bot a{color:var(--gold)}

  /* ---------- Knöpfe ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;
    padding:16px 30px;border:1px solid var(--gold);background:var(--gold);color:#17150F;
    font-size:12.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
    transition:transform .28s,background .28s,color .28s,border-color .28s}
  .btn:hover{transform:translateY(-2px);background:#EFBD70;border-color:#EFBD70}
  .btn.ghost{background:transparent;color:var(--text);border-color:rgba(255,255,255,.4)}
  .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:var(--text)}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--gold);outline-offset:3px}

  /* ---------- Bilder ---------- */
  .photo{position:relative;overflow:hidden;background:
      radial-gradient(120% 90% at 22% 14%,rgba(224,174,94,.22) 0%,rgba(224,174,94,0) 55%),
      radial-gradient(90% 70% at 84% 86%,rgba(198,146,74,.16) 0%,rgba(198,146,74,0) 60%),
      linear-gradient(160deg,#332E28 0%,#211F1C 46%,#161513 100%)}
  .photo.real{background-size:cover;background-position:center 56%}
  .photo .tag{position:absolute;left:14px;bottom:12px;z-index:3;font-size:9.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted-2);border:1px dashed var(--line);border-radius:999px;
    padding:5px 11px;background:rgba(19,18,17,.6)}

  /* ---------- Hero ---------- */
  .hero{position:relative;height:100svh;min-height:560px;display:flex;align-items:flex-end;
    overflow:hidden;border-radius:0 0 var(--r) var(--r)}
  .hero .photo{position:absolute;inset:0;z-index:0;will-change:transform;transform-origin:58% 62%}
  .hero .veil{position:absolute;inset:0;z-index:2;
    background:linear-gradient(to top,rgba(19,18,17,.94) 0%,rgba(19,18,17,.78) 12%,rgba(19,18,17,.44) 26%,
        rgba(19,18,17,.18) 48%,rgba(19,18,17,.04) 82%),
      linear-gradient(to right,rgba(19,18,17,.5),rgba(19,18,17,0) 62%)}
  .hero-in{position:relative;z-index:3;padding-block:0 108px;width:100%}
  .hero h1{font-size:clamp(26px,8.4vw,132px);max-width:none}
  .hero h1 .ln i{white-space:nowrap}
  .hero h1 .ln{display:block;overflow:hidden}
  .hero h1 .ln i{display:block;font-style:normal}
  .hero h1 u{text-decoration:none;color:var(--gold)}
  @keyframes rise{to{transform:none}}
  .hero .under{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
    margin-top:26px;flex-wrap:wrap}
  .hero .under p{color:var(--muted);max-width:34ch;font-size:15.5px}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}.hero h1 .ln i{transform:none;animation:none}*{animation:none!important}
  }

  /* ---------- Reveal ---------- */
  .js [data-rv]{opacity:0;transform:translateY(22px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
  .js [data-rv].in{opacity:1;transform:none}
  /* Nach der Einblendung keine Transition mehr: sonst haelt der Browser eine
     eigene Grafikebene, und grosse Schrift wird darin unscharf und fett. */
  .js [data-rv].fertig{transition:none;transform:none;will-change:auto}
  @media (prefers-reduced-motion:reduce){.js [data-rv]{opacity:1;transform:none;transition:none}}

  /* ---------- Abschnitte ---------- */
  section{padding-block:clamp(66px,9vw,120px);scroll-margin-top:20px;position:relative}
  .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:34px}
  .hd h2{font-size:clamp(34px,7vw,92px)}
  .hd .sub{color:var(--muted);max-width:40ch;font-size:15.5px}

  /* Pills mit Leistungen */
  .pills{display:flex;flex-wrap:wrap;gap:12px}
  .pl{border:1px solid var(--line);border-radius:999px;padding:14px 22px;font-size:15px;
    display:flex;align-items:center;gap:10px;transition:border-color .3s,background .3s,transform .3s}
  .pl:hover{border-color:var(--gold);background:rgba(224,174,94,.08);transform:translateY(-2px)}
  .pl b{font-weight:700}
  .pl small{color:var(--muted-2);font-size:12.5px}
  .pl .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}

  /* Location-Karten */
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:820px){.cards{grid-template-columns:1fr}}
  .card{position:relative;border:0;padding:0;background:none;color:inherit;font:inherit;
    cursor:pointer;border-radius:var(--r);overflow:hidden;display:block;text-align:left;isolation:isolate}
  .card .frame{position:relative;aspect-ratio:4/3;overflow:hidden}
  .card.tall .frame{aspect-ratio:4/5}
  @media (max-width:820px){.card .frame,.card.tall .frame{aspect-ratio:4/3}}
  .card .ph{position:absolute;inset:0;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
  .card:hover .ph{transform:scale(1.07)}
  .card .veil{position:absolute;inset:0;z-index:2;
    background:linear-gradient(to top,rgba(19,18,17,.9) 3%,rgba(19,18,17,.25) 52%,rgba(19,18,17,0) 82%)}
  .card .cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:24px;
    display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
  .card h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3.4vw,46px);line-height:.95}
  .card .where{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  .card .go{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.45);
    display:grid;place-items:center;font-size:19px;transition:background .3s,color .3s,border-color .3s,transform .3s}
  .card:hover .go{background:var(--gold);color:#17150F;border-color:var(--gold);transform:rotate(-45deg)}
  .card .flags{position:absolute;top:18px;left:18px;z-index:4;display:flex;gap:7px;flex-wrap:wrap}
  .card .flag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;
    padding:6px 12px;background:rgba(19,18,17,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid var(--line);color:var(--text)}

  /* Filterknöpfe */
  .chips{display:flex;gap:9px;flex-wrap:wrap}
  .chip{background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);cursor:pointer;
    font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;
    transition:border-color .3s,color .3s,background .3s}
  .chip:hover{color:var(--text);border-color:rgba(224,174,94,.55)}
  .chip.on{border-color:var(--gold);color:#17150F;background:var(--gold);font-weight:700}

  /* Ablauf */
  .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  @media (max-width:980px){.flow{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.flow{grid-template-columns:1fr}}
  .fc{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--card);padding:26px 24px 30px;
    display:flex;flex-direction:column;gap:16px;min-height:230px;transition:background .3s,border-color .3s,transform .3s}
  .fc:hover{background:var(--card-hi);border-color:rgba(224,174,94,.35);transform:translateY(-4px)}
  .fc .n{width:44px;height:44px;border-radius:50%;background:rgba(224,174,94,.14);color:var(--gold);
    display:grid;place-items:center;font-weight:900;font-size:14px}
  .fc h3{font-family:var(--display);text-transform:uppercase;font-size:27px;line-height:1}
  .fc p{color:var(--muted);font-size:14.5px}

  /* Duo */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:760px){.duo{grid-template-columns:1fr}}

  /* Formular */
  .fbox{border-radius:var(--r);background:var(--card);border:1px solid var(--line-soft);padding:38px}
  @media (max-width:560px){.fbox{padding:24px 20px}}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media (max-width:640px){.form-grid{grid-template-columns:1fr}}
  .field{display:flex;flex-direction:column;gap:6px}
  .field.full{grid-column:1/-1}
  label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
  label .opt{text-transform:none;letter-spacing:0;font-size:12px}
  input,select,textarea{background:var(--rail);border:1px solid var(--line);border-radius:12px;
    color:var(--text);padding:12px 14px;font:inherit;font-size:15.5px;width:100%;transition:border-color .3s}
  input:focus,select:focus,textarea:focus{border-color:var(--gold)}
  input::placeholder{color:#5E5A54}
  select{appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
    background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat}
  /* Safari uebernimmt nur den Hintergrund der Optionen in sein Aufklappmenue, nicht die Schriftfarbe.
     Deshalb hell mit dunkler Schrift, sonst steht schwarz auf schwarz. */
  select{color-scheme:light}
  select option{background:#FFFFFF;color:#17150F}
  .pick{display:flex;gap:10px;flex-wrap:wrap;position:relative}
  .pick label{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:11px 18px;
    font-size:13.5px;color:var(--muted);transition:border-color .3s,color .3s,background .3s}
  .pick input{position:absolute;opacity:0;width:1px;height:1px}
  .pick input:checked + label{border-color:var(--gold);color:#17150F;background:var(--gold);font-weight:700}
  .pick input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}
  .consent{display:flex;gap:12px;align-items:flex-start;grid-column:1/-1;margin-top:4px}
  .consent input{width:17px;height:17px;flex:0 0 auto;margin-top:3px;accent-color:var(--gold);border-radius:4px}
  .consent span{font-size:13px;color:var(--muted);line-height:1.5}
  .ok{display:none;border-radius:var(--r);border:1px solid var(--gold);background:rgba(224,174,94,.08);padding:28px}
  .ok h3{font-family:var(--display);text-transform:uppercase;color:var(--gold);font-size:30px}
  .ok p{color:var(--muted);margin-top:10px;font-size:15px}

  /* Detailseiten */
  .split{display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,.55fr);gap:52px;align-items:start}
  @media (max-width:900px){.split{grid-template-columns:1fr;gap:30px}}
  .facts{margin-top:28px}
  /* Drei Themenbloecke auf der Locationseite. Bewusst keine Karten und keine
     Rahmen, nur eine Goldlinie darueber, so wie die Linie ueber der Wortmarke.
     Dadurch bleibt der Abschnitt in der Sprache der uebrigen Seite. */
  .themen{display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(28px,3.4vw,56px);margin-top:clamp(56px,6vw,90px)}
  .thema{padding-top:clamp(18px,1.8vw,24px);border-top:1px solid rgba(224,174,94,.45)}
  .thema h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
    font-size:clamp(19px,1.9vw,26px);letter-spacing:.03em;line-height:1.04;margin:0}
  .thema p{color:var(--muted);font-size:15.5px;line-height:1.66;margin:13px 0 0}
  /* Der erste Satz traegt die Seite, deshalb heller und etwas groesser. */
  .loctext p{color:var(--muted);font-size:15.5px;line-height:1.7;margin:14px 0 0;max-width:46ch}
  .loctext p.loclead{color:var(--text);font-size:clamp(17px,1.5vw,20.5px);
    line-height:1.46;margin-top:18px;max-width:38ch}
  /* Die Eckdaten stehen jetzt unter den Bloecken ueber die volle Breite. */
  .faktenband{margin-top:clamp(50px,5.5vw,82px)}
  .faktenband .facts{display:grid;grid-template-columns:1fr 1fr;
    gap:0 clamp(34px,4vw,66px);margin-top:0}
  .faktenband .fact{border-top:1px solid var(--line-soft);border-bottom:0}
  @media (max-width:860px){
    .themen{grid-template-columns:1fr;gap:28px}
    .faktenband .facts{grid-template-columns:1fr}
  }
  .fact{display:flex;gap:20px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .fact:first-child{border-top:1px solid var(--line-soft)}
  .fact dt{flex:0 0 130px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);padding-top:4px}
  .fact dd{margin:0;font-size:16px}
  @media (max-width:520px){.fact{flex-direction:column;gap:4px}.fact dt{flex:none}}
  .gal{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .gal .photo{aspect-ratio:1;border-radius:20px}
  .gal .photo.wide{grid-column:1/-1;aspect-ratio:16/10}

  footer.site{background:var(--rail);border-radius:var(--r) var(--r) 0 0;
    padding-block:56px 130px;margin-top:20px;overflow:hidden}
  /* Wortmarke im Fuss: dieselbe Konstruktion wie das Logo oben, nur gross und
     als Leuchtschrift. Alle Masse haengen an der Schriftgroesse der Wortmarke und
     stehen im selben Verhaeltnis wie im Logo: Linie .057em stark, .391em Abstand,
     HAMBURG .270em gross mit .174em Abstand. */
  .fmark{position:relative;display:block;width:fit-content;margin:0 auto 40px;
    text-align:center;user-select:none;
    font-size:clamp(21px,6.7vw,96px);padding-top:.391em;
    animation:hum 6.2s 1s ease-in-out infinite}
  .fmark::before{content:"";position:absolute;left:0;right:0;top:0;height:.057em;
    background:var(--gold);
    box-shadow:0 0 7px rgba(224,174,94,1),0 0 22px rgba(224,174,94,.8),
      0 0 56px rgba(224,174,94,.5)}
  .fmark em{display:block;font-style:normal;font-family:var(--display);font-weight:400;
    text-transform:uppercase;line-height:.88;color:#FFF3E0;
    font-size:1em;letter-spacing:.42em;margin-right:-.42em;
    text-shadow:0 0 6px rgba(255,246,228,.85),0 0 20px rgba(224,174,94,.7),
      0 0 52px rgba(224,174,94,.42),0 0 110px rgba(224,174,94,.22)}
  .fmark span{display:block;font-family:var(--ui);font-weight:700;color:var(--gold);text-transform:uppercase;
    font-size:.27em;letter-spacing:.5em;margin-right:-.5em;margin-top:.174em;
    text-shadow:0 0 7px rgba(224,174,94,.9),0 0 20px rgba(224,174,94,.55)}
  @media (prefers-reduced-motion:reduce){.fmark{animation:none}}
  .foot{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
  .foot p,.foot a{color:var(--muted);font-size:14px;text-decoration:none}
  .foot a{cursor:pointer;transition:color .25s}
  .foot a:hover{color:var(--gold)}
  .foot h4{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text);margin:0 0 13px;font-weight:700}
  .foot .col{display:flex;flex-direction:column;gap:8px}
  .legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line-soft);color:var(--muted-2);font-size:12.5px}


  /* Scroll-Fortschritt */
  .prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:95}

  /* Film-Widget */
  .filmw{position:fixed;z-index:79;left:22px;bottom:max(20px,env(safe-area-inset-bottom,0px));
    display:flex;align-items:center;gap:13px;background:rgba(19,18,17,.62);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);
    border-radius:999px;padding:9px 20px 9px 9px;cursor:pointer;color:var(--text);
    transition:border-color .3s,transform .3s}
  .filmw:hover{border-color:var(--gold);transform:translateY(-3px)}
  .filmw .thumb{width:46px;height:46px;border-radius:50%;flex:0 0 auto;position:relative;overflow:hidden;
    background:#1A1917 center/cover no-repeat}
  .filmw .thumb::before{content:"";position:absolute;inset:0;background:rgba(10,9,8,.42)}
  .filmw .thumb::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
    border-left:11px solid var(--gold);border-top:7px solid transparent;border-bottom:7px solid transparent;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
  .filmw .lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
  .filmw .lbl b{display:block;font-weight:900;color:var(--gold)}
  @media (max-width:980px){
    .filmw{left:14px;bottom:max(20px,env(safe-area-inset-bottom,0px));padding:5px}
    .filmw .lbl{display:none}
    .filmw .thumb{width:40px;height:40px}
  }

  /* Sticker */
  .sticker{display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:112px;height:112px;border-radius:50%;background:var(--gold);color:var(--ink);
    line-height:1;text-align:center;box-shadow:0 12px 34px rgba(0,0,0,.4)}
  .sticker b{font-family:var(--display);font-size:34px;font-weight:400}
  .sticker span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;margin-top:5px;font-weight:700}
  .hero .stick{position:absolute;right:7%;top:24%;z-index:4;transform:rotate(-11deg)}
  @media (max-width:900px){.hero .stick{display:none}}

  /* Goldflaeche mit schraegen Kanten */
  .slab{background:var(--gold);color:var(--ink);overflow:hidden;
    clip-path:polygon(0 3.4vw,100% 0,100% 100%,0 calc(100% - 3.4vw));
    padding-block:calc(clamp(66px,9vw,120px) + 3.4vw);margin-block:-2px}
  .slab .sub{color:rgba(23,21,15,.72)}
  .slab .tagline{color:rgba(23,21,15,.6)}
  .slab .pl{border-color:rgba(23,21,15,.26);color:var(--ink)}
  .slab .pl .dot{background:var(--ink)}
  .slab .pl small{color:rgba(23,21,15,.6)}
  .slab .pl:hover{background:rgba(23,21,15,.08);border-color:var(--ink);transform:translateY(-2px)}
  .slab label{color:rgba(23,21,15,.62)}
  .slab input,.slab select{background:rgba(255,255,255,.6);border-color:rgba(23,21,15,.25);color:var(--ink)}
  .slab input:focus,.slab select:focus{border-color:var(--ink);background:#fff}
  .slab input::placeholder{color:rgba(23,21,15,.42)}
  .slab select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%),linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6));background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px,0 0;background-size:6px 6px,6px 6px,100% 100%;background-repeat:no-repeat}
  .slab select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%),linear-gradient(#fff,#fff)}
  .slab .fbox{background:rgba(23,21,15,.08);border-color:rgba(23,21,15,.2)}
  .slab .pick label{border-color:rgba(23,21,15,.3);color:rgba(23,21,15,.82);padding:8px 14px;font-size:12.5px}
  .slab .pick input:checked + label{border-color:var(--ink);color:var(--gold);background:var(--ink);font-weight:700}
  .slab .consent span{color:rgba(23,21,15,.75)}
  .dslink{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
  .dslink:hover{color:#000}
  .slab .consent input{accent-color:var(--ink)}
  .slab .ok{border-color:var(--ink);background:rgba(23,21,15,.1)}
  .slab .ok h3{color:var(--ink)}
  .slab .ok p{color:rgba(23,21,15,.75)}
  .btn.dark{background:var(--ink);border-color:var(--ink);color:var(--gold)}
  .btn.dark:hover{background:#000;border-color:#000;color:var(--gold)}

  /* fliegende Objekte */
  .fly{position:absolute;z-index:1;pointer-events:none;will-change:transform;opacity:.85}
  .fly svg{display:block;animation:bob 7s ease-in-out infinite}
  .fly:nth-of-type(2) svg{animation-duration:9s;animation-delay:-2s}
  @keyframes bob{0%,100%{transform:translateY(-6px) rotate(-1.5deg)}50%{transform:translateY(8px) rotate(1.5deg)}}
  @media (prefers-reduced-motion:reduce){.fly svg{animation:none}}
  /* Ab hier wandert das Leuchtschild in die Mitte, dann waeren die fliegenden
     Objekte darunter, also blenden wir sie beim selben Punkt aus. */
  @media (max-width:900px){.fly{display:none}}

  /* Ablauf als Fokus-Timeline */
  .tl{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:56px;align-items:start}
  @media (max-width:900px){.tl{grid-template-columns:1fr;gap:24px}}
  .tl .sticky{position:sticky;top:120px}
  .tl .big{font-family:var(--display);font-size:clamp(70px,11vw,170px);line-height:.85;color:var(--gold)}
  .tl .big small{font-family:var(--ui);font-size:12px;color:var(--muted-2);letter-spacing:.22em;
    display:block;margin-top:12px;text-transform:uppercase}
  /* Abgeblendet wird ueber die Farben, nicht ueber opacity: eine eigene
     Kompositionsebene laesst grossen Text in manchen Browsern streifig werden. */
  .stp{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:32px 0;
    border-top:1px solid var(--line-soft)}
  .stp:last-child{border-bottom:1px solid var(--line-soft)}
  .stp .ring{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.07);
    display:grid;place-items:center;font-size:12px;font-weight:900;color:rgba(158,155,149,.62);
    transition:border-color .45s,color .45s,background .45s}
  .stp.on .ring{border-color:var(--gold);color:var(--ink);background:var(--gold)}
  .stp h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3.4vw,40px);
    line-height:1.06;letter-spacing:.012em;color:rgba(243,241,238,.56);transition:color .45s;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  .stp.on h3{color:#E8E5E0}
  .stp p{color:rgba(158,155,149,.54);font-size:15px;margin-top:8px;max-width:42ch;
    transition:color .45s}
  .stp.on p{color:var(--muted)}

  .modal{position:fixed;inset:0;z-index:100;background:rgba(10,9,8,.86);display:none;
    align-items:center;justify-content:center;padding:24px}
  .modal.open{display:flex}
  .modal .box{max-width:520px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px}
  .modal h3{font-family:var(--display);text-transform:uppercase;font-size:30px}
  .modal p{color:var(--muted);margin-top:12px}
  /* Aftermovie im Hochformat */
  .modal .filmbox{position:relative;max-width:min(94vw,440px);width:100%}
  .modal .filmbox video{display:block;width:100%;max-height:min(86vh,860px);border-radius:var(--r);
    background:#0A0908;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .modal .zu{position:absolute;top:-46px;right:0;background:none;border:0;cursor:pointer;color:var(--muted);
    font:inherit;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
    display:flex;align-items:center;gap:9px;padding:6px 2px;transition:color .25s}
  .modal .zu:hover{color:var(--gold)}
  .modal .zu i{width:15px;height:15px;position:relative;display:block}
  .modal .zu i::before,.modal .zu i::after{content:"";position:absolute;left:0;top:7px;width:15px;height:1.6px;
    background:currentColor}
  .modal .zu i::before{transform:rotate(45deg)} .modal .zu i::after{transform:rotate(-45deg)}
  @media (max-height:640px){.modal .zu{top:auto;bottom:-38px}}


  .count-big{font-family:var(--display);font-size:clamp(56px,9vw,120px);line-height:.82;color:var(--ink)}
  .countrow{display:flex;gap:clamp(20px,2.6vw,34px);align-items:flex-start;flex-wrap:wrap}
  .countsub{flex:1;min-width:240px}
  .countsub b{color:var(--ink);font-weight:700}
  @media (max-width:620px){.countrow{gap:14px}}


  /* Alles drin: Icon zeichnet sich, danach erscheint der Text */
  .pl .ico{width:26px;height:26px;flex:0 0 auto;display:block;overflow:visible}
  .pl .ico path,.pl .ico circle,.pl .ico rect,.pl .ico line{
    fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1;stroke-dashoffset:1}
  .js .pills.go .pl .ico path,.js .pills.go .pl .ico circle,
  .js .pills.go .pl .ico rect,.js .pills.go .pl .ico line{
    animation:draw .9s cubic-bezier(.4,0,.2,1) forwards;animation-delay:inherit}
  @keyframes draw{to{stroke-dashoffset:0}}
  .pl .txt{opacity:0;transform:translateX(-6px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
  .js .pills.go .pl .txt{opacity:1;transform:none}
  .pl .ico{transition:transform .5s cubic-bezier(.34,1.35,.5,1)}
  .pl:hover .ico{transform:scale(1.14) rotate(-6deg)}
  @media (prefers-reduced-motion:reduce){
    .pl .ico path,.pl .ico circle,.pl .ico rect,.pl .ico line{stroke-dashoffset:0}
    .pl .txt{opacity:1;transform:none}
  }


  /* Leistungen als laufender Wechsler */
  .reel{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;position:relative;z-index:2}
  @media (max-width:900px){.reel{grid-template-columns:1fr;gap:30px}}
  .stage{min-height:360px;display:flex;flex-direction:column;justify-content:center;gap:20px}
  @media (max-width:900px){.stage{min-height:280px}}
  .stagehead{display:flex;align-items:center;gap:14px}
  .ring{width:38px;height:38px;transform:rotate(-90deg);overflow:visible}
  .ring circle{fill:none;stroke:rgba(23,21,15,.2);stroke-width:2}
  .ring circle.run{stroke:var(--ink);stroke-dasharray:126;stroke-dashoffset:126}
  .ring circle.run.go{animation:ringrun var(--dur,3s) linear forwards}
  @keyframes ringrun{to{stroke-dashoffset:0}}
  .stagehead .idx{font-size:10.5px;letter-spacing:.24em;font-weight:900;color:rgba(23,21,15,.62)}
  .iconbig{height:96px}
  .iconbig svg{width:96px;height:96px;overflow:visible}
  .iconbig svg path{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1;stroke-dashoffset:1;animation:draw .85s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .word{font-family:var(--display);text-transform:uppercase;font-size:clamp(38px,6.6vw,92px);
    line-height:.95;overflow:hidden;color:var(--ink)}
  .word i{display:block;font-style:normal;transform:translateY(102%);
    animation:wordrise .75s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes wordrise{to{transform:none}}
  .reellist{list-style:none;margin:0;padding:0}
  .reellist li{cursor:pointer;display:flex;align-items:center;gap:16px;padding:13px 0;
    border-top:1px solid rgba(23,21,15,.16);color:rgba(23,21,15,.42);
    transition:color .45s,padding-left .45s}
  .reellist li:last-child{border-bottom:1px solid rgba(23,21,15,.16)}
  .reellist li.on{color:var(--ink);padding-left:12px}
  .reellist li:hover{color:rgba(23,21,15,.8)}
  .reellist .n{font-size:10px;letter-spacing:.2em;font-weight:900;width:22px;flex:0 0 auto}
  .reellist .t{font-weight:700;font-size:16px}
  .reellist .ln{flex:1;height:1px;background:currentColor;opacity:0;transition:opacity .45s}
  .reellist li.on .ln{opacity:.35}
  @media (prefers-reduced-motion:reduce){
    .iconbig svg path{stroke-dashoffset:0;animation:none}
    .word i{transform:none;animation:none}
    .ring circle.run{display:none}
  }


  .wordtext{max-width:46ch;color:rgba(23,21,15,.78);font-size:16px;line-height:1.6;min-height:3.2em}
  .wordtext span{display:inline-block;margin-right:.3em;opacity:0;transform:translateY(10px);
    animation:wfade .5s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes wfade{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.wordtext span{opacity:1;transform:none;animation:none}}


  /* Karte: Location nicht dabei */
  .card.wish{border:1px dashed rgba(224,174,94,.45);border-radius:var(--r);background:var(--card)}
  .card.wish .frame{aspect-ratio:4/3;display:flex}
  .card.wish .wishin{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:34px;width:100%}
  .card.wish .wishk{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
  .card.wish h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3.4vw,44px);line-height:.95}
  .card.wish p{color:var(--muted);font-size:15px;max-width:42ch}
  .card.wish .wishgo{margin-top:6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
  .card.wish:hover{border-color:var(--gold);background:var(--card-hi)}
  @media (max-width:820px){.card.wish .frame{aspect-ratio:auto}.card.wish .wishin{padding:26px}}


  /* Merkmale einer Location */
  .feats{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
  .featk{flex:0 0 100%;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold);font-weight:700;margin-bottom:4px}
  .feat{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;
    padding:9px 16px;font-size:14px;color:var(--text);opacity:0;transform:translateY(10px);
    animation:featin .55s cubic-bezier(.22,.61,.36,1) forwards}
  .feat svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--gold);stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
    animation:draw .5s .25s ease forwards}
  @keyframes featin{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.feat{opacity:1;transform:none;animation:none}
    .feat svg{stroke-dashoffset:0;animation:none}}


  /* Wunschtermine und Hinweiskasten */
  .dates{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  @media (max-width:560px){.dates{grid-template-columns:1fr}}
  .slab .dates input{color-scheme:light}
  .slab input:disabled{opacity:.45;cursor:not-allowed}
  .slab textarea{background:rgba(255,255,255,.6);border:1px solid rgba(23,21,15,.25);border-radius:12px;
    color:var(--ink);padding:12px 14px;font:inherit;font-size:15.5px;width:100%;resize:vertical}
  .slab textarea:focus{border-color:var(--ink);background:#fff;outline:none}
  .slab textarea::placeholder{color:rgba(23,21,15,.42)}
  .infobox{display:flex;gap:11px;align-items:flex-start;margin-top:10px;
    border:1px dashed rgba(23,21,15,.32);border-radius:14px;padding:11px 14px;
    font-size:13px;line-height:1.5;color:rgba(23,21,15,.78)}
  .infobox .ic{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--ink);color:var(--gold);
    display:grid;place-items:center;font-size:11px;font-weight:900;font-style:italic;margin-top:1px}


  /* Formular: leicht und flach statt wuchtig */
  .slab .fbox{background:none;border:0;padding:0;max-width:760px}
  .slab .form-grid{gap:16px 22px}
  .slab label{font-size:10px;letter-spacing:.2em;color:rgba(23,21,15,.55)}
  .slab input,.slab select,.slab textarea{background:none;border:0;border-bottom:1px solid rgba(23,21,15,.3);
    border-radius:0;padding:9px 2px;font-size:16px;color:var(--ink);transition:border-color .3s}
  .slab input:focus,.slab select:focus,.slab textarea:focus{background:none;border-bottom-color:var(--ink);outline:none}
  .slab input::placeholder,.slab textarea::placeholder{color:rgba(23,21,15,.38)}
  .slab select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
    background-position:calc(100% - 12px) 18px,calc(100% - 6px) 18px;background-size:6px 6px;background-repeat:no-repeat}
  .slab select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%)}
  .slab .pick label{padding:7px 13px;font-size:12.5px;border-color:rgba(23,21,15,.28)}
  .slab .dates input{padding-right:2px}
  .infobox{border:0;border-left:2px solid rgba(23,21,15,.4);border-radius:0;padding:4px 0 4px 13px;
    font-size:12.5px;margin-top:12px}
  .infobox .ic{display:none}
  .slab .consent{margin-top:16px}
  .slab .consent span{font-size:12.5px}
  .slab .btn.dark{margin-top:4px}


  /* Locations als Plakatwand mit umlaufender Neonröhre */
  .wall{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 34px;margin-top:28px;
    perspective:1500px;perspective-origin:50% 40%}
  @media (max-width:980px){.wall{grid-template-columns:repeat(2,1fr);gap:36px 26px}}
  @media (max-width:620px){.wall{grid-template-columns:1fr;gap:40px}}

  .poster{position:relative;border:0;padding:0;background:none;color:inherit;font:inherit;text-align:left;
    cursor:pointer;display:block;transform-style:preserve-3d;
    transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
    transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .poster:hover{transition:transform .15s linear;z-index:5}

  /* umlaufende Röhre */
  .neon{position:absolute;inset:-9px;border-radius:12px;border:3px solid #FFF6E4;opacity:0;
    box-shadow:0 0 5px rgba(255,236,200,.95),0 0 14px rgba(224,174,94,.85),0 0 34px rgba(224,174,94,.6),
      0 0 70px rgba(224,174,94,.35),inset 0 0 8px rgba(255,236,200,.8),inset 0 0 26px rgba(224,174,94,.45);
    pointer-events:none}
  .neon::after{content:"";position:absolute;inset:-18px;border-radius:20px;
    box-shadow:0 0 60px 10px rgba(224,174,94,.22)}
  /* Lichtschein auf dem Plakat */
  .beam{position:absolute;inset:0;border-radius:8px;pointer-events:none;opacity:0;
    background:radial-gradient(120% 80% at 50% -10%,rgba(224,174,94,.4),rgba(224,174,94,.08) 45%,rgba(224,174,94,0) 72%),
      linear-gradient(to bottom,rgba(255,240,215,.16),rgba(255,240,215,0) 40%);
    mix-blend-mode:screen}

  .pframe{display:block;position:relative;overflow:hidden;border-radius:8px;aspect-ratio:3/4;
    background:var(--card);filter:brightness(.2) saturate(.5);
    box-shadow:0 34px 60px rgba(0,0,0,.6),0 8px 18px rgba(0,0,0,.4)}
  .pframe .ph{display:block;position:absolute;inset:0;background-size:cover;background-position:center;
    transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
  .poster:hover .pframe .ph{transform:scale(1.07)}
  .pframe .pveil{display:block;position:absolute;inset:0;
    background:linear-gradient(to top,rgba(19,18,17,.93) 4%,rgba(19,18,17,.25) 48%,rgba(19,18,17,0) 78%)}
  .pcap{display:block;position:absolute;left:0;right:0;bottom:0;padding:22px 20px;z-index:3;
    transform:translateZ(34px)}
  .pcap .where{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
  .pcap h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.2vw,30px);
    line-height:.95;margin-top:6px}
  .pcap .rule{display:block;height:1px;background:var(--gold);width:0;margin-top:12px;transition:width .5s}
  .poster:hover .pcap .rule{width:60px}
  .pflags{position:absolute;top:16px;left:16px;z-index:3;display:flex;gap:6px;flex-wrap:wrap;transform:translateZ(30px)}
  .pflag{font-size:9px;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:5px 10px;
    background:rgba(19,18,17,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid var(--line)}
  .pgo{position:absolute;right:18px;bottom:20px;z-index:4;width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;font-size:15px;
    transform:translateZ(44px);transition:background .3s,color .3s,border-color .3s}
  .poster:hover .pgo{background:var(--gold);color:var(--ink);border-color:var(--gold)}

  /* Einschalten */
  .wall.on .neon{animation:tubeon 1.7s steps(1,end) forwards}
  .wall.on .beam{animation:beamon 1.7s ease-out forwards}
  .wall.on .pframe{animation:lighton 1.8s ease-out forwards}
  @keyframes tubeon{
    0%{opacity:0}4%{opacity:1}6%{opacity:.08}9%{opacity:.9}12%{opacity:.05}
    17%{opacity:1}20%{opacity:.15}24%{opacity:.85}28%{opacity:.1}
    33%{opacity:1}38%{opacity:.4}44%{opacity:1}60%{opacity:.92}100%{opacity:1}}
  @keyframes beamon{
    0%{opacity:0}4%{opacity:.9}6%{opacity:.05}9%{opacity:.8}12%{opacity:.04}
    17%{opacity:.9}20%{opacity:.12}24%{opacity:.8}33%{opacity:.95}44%{opacity:.85}100%{opacity:.7}}
  @keyframes lighton{
    0%{filter:brightness(.2) saturate(.5)}
    4%{filter:brightness(.95) saturate(1)}
    6%{filter:brightness(.22) saturate(.5)}
    9%{filter:brightness(.85) saturate(.95)}
    12%{filter:brightness(.2) saturate(.5)}
    17%{filter:brightness(1) saturate(1)}
    20%{filter:brightness(.3) saturate(.7)}
    24%{filter:brightness(.92) saturate(1)}
    33%{filter:brightness(1) saturate(1)}
    100%{filter:brightness(1) saturate(1)}}
  /* leises Pulsieren, wenn die Röhre brennt */
  .wall.on .poster .neon{animation:tubeon 1.7s steps(1,end) forwards, hum 4.5s 2.2s ease-in-out infinite}
  @keyframes hum{0%,100%{filter:brightness(1)}42%{filter:brightness(.93)}58%{filter:brightness(1.05)}}
  .poster:hover .neon{filter:brightness(1.18)}
  @media (prefers-reduced-motion:reduce){
    .wall.on .neon,.wall.on .beam,.wall.on .pframe{animation:none}
    .neon{opacity:1}.beam{opacity:.6}.pframe{filter:none}
    .poster{transform:none}
  }

  /* Wunschplakat */
  .poster.wish .pframe{background:var(--card);border:1px dashed rgba(224,174,94,.4);filter:brightness(.35)}
  .poster.wish .inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
    gap:12px;padding:28px;transform:translateZ(30px)}
  .poster.wish h3,.poster.wish p,.poster.wish .wishk{max-width:62%}
  .poster.wish .wishgo{white-space:nowrap}
  .poster.wish .wishk{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
  .poster.wish h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.4vw,32px);line-height:.95}
  .poster.wish p{color:var(--muted);font-size:13.5px;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.55)}
  .poster.wish .wishgo{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}



  /* Karten bauen sich nach einem Filterwechsel auf */
  .cfring.spawn .card{animation:cardin .7s cubic-bezier(.22,.61,.36,1) backwards}
  @keyframes cardin{from{opacity:0;scale:.78}to{opacity:1;scale:1}}
  @media (prefers-reduced-motion:reduce){.cfring.spawn .card{animation:none}}


  /* Formular in Abschnitte gegliedert */
  .fstep{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:26px;
    padding-bottom:9px;border-bottom:1px solid rgba(23,21,15,.22);
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:900;color:var(--ink)}
  .fstep:first-child{margin-top:0}
  .fnum{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
    background:var(--ink);color:var(--gold);font-size:10px;letter-spacing:0}


  /* großes Fragezeichen auf dem Wunschplakat */
  .qmark{position:absolute;left:86%;top:64%;transform:translate(-50%,-50%) rotate(-9deg);
    font-family:var(--display);font-size:clamp(190px,25vw,320px);line-height:.8;
    color:transparent;-webkit-text-stroke:2px rgba(224,174,94,.34);
    pointer-events:none;user-select:none;z-index:1;
    transition:transform .7s cubic-bezier(.22,.61,.36,1),-webkit-text-stroke-color .4s}
  .poster.wish:hover .qmark{transform:translate(-50%,-50%) rotate(-4deg) scale(1.1);
    -webkit-text-stroke-color:rgba(224,174,94,.7)}
  .poster.wish .inner{z-index:2}
  .poster.wish .pframe{background:
    radial-gradient(90% 70% at 50% 40%,rgba(224,174,94,.10),rgba(38,36,33,0) 70%),var(--card)}


  /* Fragezeichen als Neonröhre */
  .qmark{-webkit-text-stroke:3px #FFF6E4;opacity:0;
    text-shadow:0 0 6px rgba(255,236,200,.9),0 0 16px rgba(224,174,94,.85),
      0 0 38px rgba(224,174,94,.6),0 0 74px rgba(224,174,94,.35)}
  .wall.on .poster.wish .qmark{animation:tubeon 1.7s steps(1,end) forwards,
    hum 4.5s 2.2s ease-in-out infinite}
  .wall.on .poster.wish .pframe{animation:none;filter:none}
  .poster.wish:hover .qmark{-webkit-text-stroke-color:#FFFDF6;filter:brightness(1.15)}
  @media (prefers-reduced-motion:reduce){.qmark{opacity:1;animation:none}}


  /* Fragezeichen als Neonröhre: leuchtende Wand, dunkler Glaskörper */
  .qmark{position:absolute;left:88%;top:62%;width:clamp(150px,20vw,230px);
    transform:translate(-50%,-50%) rotate(-7deg);pointer-events:none;z-index:1;opacity:1;
    -webkit-text-stroke:0;text-shadow:none;
    transition:transform .7s cubic-bezier(.22,.61,.36,1)}
  .qmark svg{display:block;width:100%;height:auto;overflow:visible}
  .qmark g path,.qmark g circle{fill:none;stroke-linecap:round;stroke-linejoin:round}
  /* äußere, leuchtende Röhrenwand */
  .qmark .qglow path,.qmark .qglow circle{stroke:#FFF6E2;stroke-width:30}
  .qmark .qglow circle{stroke-width:9;fill:rgba(24,22,18,.72)}
  .qmark .qglow{filter:drop-shadow(0 0 3px rgba(255,244,222,.95))
    drop-shadow(0 0 9px rgba(224,174,94,.95)) drop-shadow(0 0 22px rgba(224,174,94,.7))
    drop-shadow(0 0 52px rgba(224,174,94,.45));
    animation:qflick 5.5s infinite steps(1,end)}
  /* dunkles Glasinneres */
  .qmark .qcore path,.qmark .qcore circle{stroke:rgba(24,22,18,.72);stroke-width:22}
  .qmark .qcore circle{display:none}
  /* Abstrahlung nach innen in den Glaskörper */
  .qmark .qinner path,.qmark .qinner circle{stroke:rgba(255,238,208,.30);stroke-width:16;
    filter:blur(5px)}
  .qmark .qinner circle{stroke-width:5}
  .qmark .qinner{animation:qflick 5.5s infinite steps(1,end)}
  @keyframes qflick{
    0%,7%{opacity:1}7.6%{opacity:.16}8.3%{opacity:1}
    31%{opacity:1}31.5%{opacity:.1}32%{opacity:.8}32.6%{opacity:.14}33.3%{opacity:1}
    62%{opacity:1}62.4%{opacity:.2}63%{opacity:1}
    84%{opacity:1}84.5%{opacity:.08}85.2%{opacity:.7}85.9%{opacity:1}100%{opacity:1}}
  .poster.wish:hover .qmark{transform:translate(-50%,-50%) rotate(-4deg) scale(1.06)}
  @media (prefers-reduced-motion:reduce){.qmark .qglow{animation:none}}


  /* das Licht der Röhre strahlt auf die Plakatfläche ab */
  .qwash{position:absolute;left:72%;top:58%;width:clamp(260px,40vw,440px);height:clamp(300px,46vw,500px);
    transform:translate(-50%,-50%);pointer-events:none;z-index:0;
    background:radial-gradient(50% 50% at 50% 50%,rgba(224,174,94,.22),rgba(224,174,94,.07) 45%,rgba(224,174,94,0) 72%);
    animation:qflick 5.5s infinite steps(1,end)}
  @media (prefers-reduced-motion:reduce){.qwash{animation:none}}


  /* Claim im Neonrahmen, der beim Laden zündet */
  .heroneon{position:relative;display:inline-block;max-width:min(100%,1040px);
    padding:clamp(22px,3vw,44px) clamp(24px,3.4vw,52px) clamp(20px,2.6vw,38px)}
  .heroneon .ncontent{position:relative;z-index:2;filter:brightness(.22) saturate(.55)}
  .heroneon .nframe{position:absolute;inset:0;border-radius:16px;border:3px solid #FFF6E4;opacity:0;
    box-shadow:0 0 5px rgba(255,236,200,.95),0 0 15px rgba(224,174,94,.85),0 0 36px rgba(224,174,94,.6),
      0 0 78px rgba(224,174,94,.34),inset 0 0 10px rgba(255,236,200,.7),inset 0 0 30px rgba(224,174,94,.4);
    pointer-events:none;z-index:1}
  .heroneon .nwash{position:absolute;inset:-6% -4%;border-radius:30px;opacity:0;pointer-events:none;z-index:0;
    background:radial-gradient(60% 60% at 50% 50%,rgba(224,174,94,.20),rgba(224,174,94,.05) 55%,rgba(224,174,94,0) 78%)}
  .hero .hsub{color:var(--muted);max-width:46ch;font-size:15.5px;margin-top:22px}

  /* Erstkontakt: nur die Mailadresse */
  .hmail{margin-top:clamp(20px,2.4vw,30px);max-width:520px}
  .hmail .hk{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
    font-weight:700;display:block;margin-bottom:11px;
    text-shadow:0 1px 4px rgba(19,18,17,.9)}
  .hmail form{display:flex;align-items:center;gap:8px;background:rgba(19,18,17,.58);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 7px 7px 20px;
    transition:border-color .3s,box-shadow .3s}
  .hmail form:focus-within{border-color:var(--gold);
    box-shadow:0 0 0 1px rgba(224,174,94,.4),0 0 34px rgba(224,174,94,.22)}
  .hmail input{flex:1;min-width:0;background:none;border:0;border-radius:0;padding:10px 0;
    color:var(--text);font:inherit;font-size:16px}
  .hmail input::placeholder{color:#7E7A73}
  .hmail input:focus{outline:none;border:0;background:none}
  .hmail .sub{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
    background:var(--gold);color:var(--ink);display:grid;place-items:center;
    transition:background .3s,transform .3s}
  .hmail .sub:hover{background:#EFBD70;transform:translateX(3px)}
  .hmail .sub svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round}
  .hmail .fine{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--muted);
    max-width:none;text-shadow:0 1px 4px rgba(19,18,17,.8)}
  .hmail .fine a{color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .hmail .hdone{display:none;align-items:flex-start;gap:13px;
    border-left:2px solid var(--gold);padding:4px 0 4px 16px}
  .hmail.fertig form,.hmail.fertig .fine,.hmail.fertig .hk{display:none}
  .hmail.fertig .hdone{display:flex}
  .hmail .hdone b{display:block;font-family:var(--display);text-transform:uppercase;
    font-size:clamp(20px,2.4vw,28px);color:var(--gold);line-height:1}
  .hmail .hdone span{display:block;margin-top:8px;font-size:14px;color:var(--text);max-width:40ch}
  .hmail .hdone a{color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  @media (max-width:620px){
    .hmail{max-width:none}
    .hmail form{padding-left:16px}
    .hmail input{font-size:16px}
  }
  .js .heroneon .nframe{animation:tubeon 1.9s .45s steps(1,end) forwards, hum 5s 2.6s ease-in-out infinite}
  .js .heroneon .nwash{animation:beamon 1.9s .45s ease-out forwards}
  .js .heroneon .ncontent{animation:lighton 2s .45s ease-out forwards}
  @media (prefers-reduced-motion:reduce){
    .js .heroneon .nframe,.js .heroneon .nwash,.js .heroneon .ncontent{animation:none}
    .heroneon .nframe{opacity:1}.heroneon .nwash{opacity:.6}.heroneon .ncontent{filter:none}
  }
  @media (max-width:620px){.heroneon{padding:18px 18px 16px}}


  /* Scroll-Hinweis unten rechts */
  .scrollcue{position:absolute;left:0;right:0;bottom:120px;z-index:4;pointer-events:none}
  .scrollcue .wrap{display:flex;justify-content:flex-end}
  .cuebox{display:flex;flex-direction:column;align-items:center;gap:12px;
    animation:cuebob 2.8s ease-in-out infinite}
  .cuebox .tagline{text-shadow:0 1px 3px rgba(19,18,17,.9),0 0 14px rgba(19,18,17,.7)}
  .cuebox svg{width:22px;height:48px;overflow:visible}
  .cuebox svg path,.cuebox svg circle{stroke:var(--gold);stroke-width:2;fill:none;
    filter:drop-shadow(0 0 5px rgba(224,174,94,.6)) drop-shadow(0 0 14px rgba(224,174,94,.35))}
  .cuebox svg circle{fill:var(--gold)}
  @keyframes cuebob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(7px)}}
  @media (max-width:760px){.scrollcue{display:none}}
  @media (prefers-reduced-motion:reduce){.cuebox{animation:none}}


  /* Fahrplan fürs Komitee */
  .roadmap{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  @media (max-width:860px){.roadmap{grid-template-columns:1fr}}
  .rstep{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--card);
    padding:26px 24px 28px;display:flex;gap:18px;transition:background .3s,border-color .3s,transform .3s}
  .rstep:hover{background:var(--card-hi);border-color:rgba(224,174,94,.35);transform:translateY(-3px)}
  .rstep .rn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:rgba(224,174,94,.14);
    color:var(--gold);display:grid;place-items:center;font-weight:900;font-size:13px}
  .rstep h3{font-family:var(--display);text-transform:uppercase;font-size:23px;line-height:1}
  .rstep p{color:var(--muted);font-size:14.5px;margin-top:8px}
  .rstep .when{display:inline-block;margin-top:12px;font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold);border:1px solid rgba(224,174,94,.4);
    border-radius:999px;padding:5px 11px}

  /* FAQ */
  .faq{border-top:1px solid rgba(23,21,15,.22)}
  .faq .q{border-bottom:1px solid rgba(23,21,15,.22)}
  .faq button.qh{width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;
    display:flex;align-items:center;gap:18px;padding:20px 0;color:var(--ink)}
  .faq .qt{flex:1;font-size:clamp(17px,2vw,22px);font-weight:700;line-height:1.3}
  .faq .qi{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(23,21,15,.35);
    display:grid;place-items:center;position:relative;transition:background .3s,border-color .3s,transform .4s}
  .faq .qi::before,.faq .qi::after{content:"";position:absolute;background:var(--ink);border-radius:2px}
  .faq .qi::before{width:13px;height:2px}
  .faq .qi::after{width:2px;height:13px;transition:transform .35s}
  .faq .q.open .qi{background:var(--ink);transform:rotate(90deg)}
  .faq .q.open .qi::before,.faq .q.open .qi::after{background:var(--gold)}
  .faq .q.open .qi::after{transform:scaleY(0)}
  .faq .qa{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.61,.36,1)}
  .faq .qa p{color:rgba(23,21,15,.78);font-size:15.5px;line-height:1.65;max-width:70ch;padding-bottom:22px}
  .faq button.qh:hover .qt{color:#000}


  /* Formular: klar abgegrenzte Felder wie in der ersten Fassung */
  .slab .fbox{background:rgba(23,21,15,.07);border:1px solid rgba(23,21,15,.18);
    border-radius:20px;padding:30px;max-width:720px}
  .slab .form-grid{gap:18px}
  .slab label{font-size:10.5px;letter-spacing:.18em;color:rgba(23,21,15,.62)}
  .slab input,.slab select,.slab textarea{background:rgba(255,255,255,.62);
    border:1px solid rgba(23,21,15,.26);border-radius:12px;padding:13px 14px;font-size:15.5px}
  .slab input:focus,.slab select:focus,.slab textarea:focus{background:#fff;border-color:var(--ink)}
  .slab select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%),linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62));
    background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px,0 0;
    background-size:6px 6px,6px 6px,100% 100%;background-repeat:no-repeat}
  .slab select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%),linear-gradient(#fff,#fff)}
  .slab .pick label{padding:9px 15px;font-size:13px;border-radius:999px;
    border-color:rgba(23,21,15,.28);background:rgba(255,255,255,.35)}
  .slab .pick input:checked + label{background:var(--ink);border-color:var(--ink);color:var(--gold)}
  .slab .dates input{padding:12px 12px}


  /* Sprechblase als Leuchtroehre, passend zu den Plakaten und zum Formular */
  .blasewrap{max-width:42ch}
  .nblase{position:relative;background:#17150F;border:2.5px solid #FFF6E4;border-radius:24px;
    padding:20px 24px 17px;transform:rotate(-2.4deg);opacity:0;
    box-shadow:0 0 4px rgba(255,246,228,.95),0 0 15px rgba(255,241,214,.85),
      0 0 40px rgba(255,236,200,.5),0 0 84px rgba(255,236,200,.26),
      inset 0 0 14px rgba(255,241,214,.34)}
  .nblase::after{content:"";position:absolute;left:30px;bottom:-11px;width:20px;height:20px;
    background:#17150F;border-right:2.5px solid #FFF6E4;border-bottom:2.5px solid #FFF6E4;
    border-bottom-right-radius:6px;transform:rotate(45deg);
    box-shadow:4px 4px 14px rgba(255,236,200,.55)}
  .nblase p{margin:0;color:#FFF1D6;font-size:15.5px;line-height:1.6;letter-spacing:.005em;
    text-shadow:0 0 14px rgba(255,236,200,.45)}
  .nblase p b{font-family:var(--display);font-weight:400;text-transform:uppercase;
    font-size:1.24em;letter-spacing:.01em;color:#FFF8EA}
  .nblase .haken{display:block;margin-top:9px;text-align:right;line-height:0}
  .nblase .haken svg{width:22px;height:12px;display:inline-block;fill:none;stroke:#FFE9C0;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 5px rgba(255,236,200,.8))}
  .js [data-rv].in .nblase{animation:tubeon 1.8s .25s steps(1,end) forwards,
    hum 5.4s 2.6s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){.nblase{opacity:1}.js [data-rv].in .nblase{animation:none}}
  @media (max-width:760px){.blasewrap{max-width:none}.nblase{transform:rotate(-1.4deg)}}

  /* ---------- schmaler Goldkeil: wer ist Abikontakt ---------- */
  #wer{padding-block:calc(clamp(44px,6vw,86px) + 3.4vw) calc(clamp(70px,9vw,130px) + 3.4vw)}
  #wer .wrap{position:relative;z-index:1}
  .werhead{font-size:clamp(30px,4.5vw,66px);color:var(--ink);line-height:1.02;margin-top:14px;
    max-width:24ch}
  .werstrip{display:inline-block;max-width:min(100%,780px);margin-top:clamp(16px,2.1vw,26px);
    transform:rotate(-2.6deg)}
  .werstrip i{display:inline;font-style:normal;background:var(--ink);color:var(--gold);
    font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;
    font-size:clamp(25px,4vw,57px);line-height:1.46;padding:.1em .28em;
    box-decoration-break:clone;-webkit-box-decoration-break:clone;
    box-shadow:0 16px 34px rgba(23,21,15,.26)}
  .wertext{margin-top:clamp(20px,2.4vw,30px);max-width:60ch;font-size:17px;line-height:1.62;
    color:rgba(23,21,15,.78)}
  .wertext b{color:var(--ink);font-weight:700}
  /* Nebentext der Locations als Beitrag aus dem Gruppenchat. Die drei Punkte
     oben tippen dauerhaft vor sich hin, die Zahlen unten zaehlen hoch, sobald
     die Karte ins Bild kommt, und der Goldrahmen zuendet dabei einmal an. */
  /* Die Karte ist nicht in Zeichen breit, sondern in einem Anteil der Seite.
     Ihre Schriftgroesse haengt wiederum an ihrer eigenen Breite (cqi), deshalb
     schrumpft sie als Ganzes mit und erdrueckt die Ueberschrift nicht mehr. */
  .hd .sub.breit{max-width:none;width:clamp(325px,27vw,390px);container-type:inline-size}
  /* Unter 1000px rutscht sie unter die Ueberschrift, dort hat sie wieder Platz
     und die Ueberschrift bekommt die volle Breite. */
  @media (max-width:880px){
    .hd:has(.sub.breit){flex-direction:column;align-items:flex-start;gap:24px}
    .hd .sub.breit{width:min(100%,430px)}
  }
  .komkarte{position:relative;background:#141311;border-radius:1.067em;
    font-size:clamp(12.4px,3.85cqi,15px);
    transform:rotate(1.6deg);box-shadow:0 26px 54px rgba(0,0,0,.5)}
  .komkarte .rand{position:absolute;inset:0;border-radius:1.067em;pointer-events:none;
    border:1px solid rgba(224,174,94,.42)}
  .komkarte.an .rand{animation:kkzuend 1.5s steps(1,end) forwards}
  @keyframes kkzuend{
    0%{border-color:rgba(224,174,94,.1);box-shadow:none}
    6%{border-color:rgba(240,205,150,.95);box-shadow:0 0 9px rgba(224,174,94,.7),0 0 28px rgba(224,174,94,.32)}
    9%{border-color:rgba(224,174,94,.14);box-shadow:none}
    16%{border-color:rgba(240,205,150,.9);box-shadow:0 0 8px rgba(224,174,94,.6),0 0 24px rgba(224,174,94,.28)}
    21%{border-color:rgba(224,174,94,.18);box-shadow:none}
    34%{border-color:rgba(240,205,150,1);box-shadow:0 0 10px rgba(224,174,94,.7),0 0 30px rgba(224,174,94,.34)}
    46%{border-color:rgba(224,174,94,.5);box-shadow:0 0 5px rgba(224,174,94,.3)}
    100%{border-color:rgba(224,174,94,.62);box-shadow:0 0 7px rgba(224,174,94,.34),0 0 22px rgba(224,174,94,.16)}}

  .kk-kopf{display:flex;align-items:center;justify-content:space-between;
    padding:.867em 1.133em;border-bottom:1px solid rgba(224,174,94,.22)}
  .kk-punkte{display:flex;gap:.4em}
  .kk-punkte i{display:block;width:.467em;height:.467em;border-radius:50%;background:var(--gold);
    opacity:.42;animation:kktipp 1.5s ease-in-out infinite}
  .kk-punkte i:nth-child(2){animation-delay:.2s}
  .kk-punkte i:nth-child(3){animation-delay:.4s}
  @keyframes kktipp{0%,62%,100%{opacity:.34;transform:translateY(0)}
    28%{opacity:1;transform:translateY(-2.5px)}}
  .kk-zu{position:relative;width:.867em;height:.867em;opacity:.65}
  .kk-zu::before,.kk-zu::after{content:"";position:absolute;left:0;top:.4em;width:.867em;height:.093em;
    background:var(--gold)}
  .kk-zu::before{transform:rotate(45deg)} .kk-zu::after{transform:rotate(-45deg)}

  .kk-in{padding:1.133em 1.2em 1.067em}
  .kk-kl{display:block;font-size:.667em;letter-spacing:.26em;margin-right:-.26em;
    text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:1.1em}
  .kk-in p{margin:0;font-size:1em;line-height:1.62}
  .kk-in p b{color:var(--text);font-weight:700}

  .kk-fuss{display:flex;align-items:center;gap:1.733em;padding:.8em 1.2em .933em;
    border-top:1px solid rgba(224,174,94,.22)}
  .kk-re{display:flex;align-items:center;gap:.6em;color:var(--gold);font-size:.933em}
  .kk-re svg{width:1.214em;height:1.214em;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .kk-re b{font-weight:700;font-variant-numeric:tabular-nums}
  .kk-re.ja.voll svg{animation:kkdaumen .5s cubic-bezier(.34,1.5,.5,1) 2}
  @keyframes kkdaumen{0%,100%{transform:none}40%{transform:translateY(-3px) rotate(-9deg)}}
  .kk-re.ja b{transition:color .3s,text-shadow .3s}
  .kk-re.ja.voll b{color:#FFE9C0;text-shadow:0 0 8px rgba(224,174,94,.85),0 0 20px rgba(224,174,94,.4)}
  .kk-re.nein{transition:opacity 3.4s ease-in}
  .komkarte.an .kk-re.nein{opacity:.55}
  @media (prefers-reduced-motion:reduce){
    .kk-punkte i,.komkarte .rand,.komkarte .kk-re svg{animation:none}
    .komkarte .rand{border-color:rgba(224,174,94,.6)}
  }
  @media (max-width:640px){
    .komkarte{transform:rotate(1.1deg)}
    .kk-fuss{gap:1.333em}
  }

  /* Leuchtreklame: glühende Röhre ohne Füllung, flackert unregelmäßig */
  /* Leuchtschild, an zwei starren Rohren von der Decke abgehaengt. Es bewegt
     sich nicht, nur die Roehre im Inneren flackert. Die Tiefe des Gehaeuses
     entsteht aus vielen winzigen Schattenstufen nach rechts unten, dadurch
     bleibt die Front unverzerrt und der Kasten wirkt trotzdem massiv.
     Alle Masse haengen an der Schriftgroesse von KOMITEE OFF DUTY, damit das
     Schild in jeder Breite dieselben Verhaeltnisse behaelt. */
  .hangsign{--decke:calc(clamp(44px,6vw,86px) + 3.4vw - 4px);
    position:absolute;top:calc(-1 * var(--decke));right:5%;
    width:clamp(178px,24vw,358px);font-size:clamp(15.5px,2.16vw,31px);
    z-index:3;pointer-events:none}
  .hangsign .rohr{position:absolute;top:0;width:.36em;height:clamp(50px,5.6vw,84px);
    border-radius:2px;
    background:linear-gradient(90deg,#000 0%,#2E2B27 34%,#514C44 48%,#211F1B 66%,#000 100%)}
  .hangsign .rohr.l{left:17%}
  .hangsign .rohr.r{right:21%}
  /* Deckenteller */
  .hangsign .rohr::before{content:"";position:absolute;top:-.16em;left:-.36em;
    width:1.08em;height:.39em;border-radius:50%;
    background:radial-gradient(60% 120% at 40% 25%,#4A453D,#15130F 70%);
    box-shadow:0 3px 7px rgba(0,0,0,.5)}
  /* Ansatz am Kasten */
  .hangsign .rohr::after{content:"";position:absolute;bottom:-.1em;left:-.16em;
    width:.68em;height:.29em;border-radius:3px;
    background:linear-gradient(90deg,#0A0908,#3A3630 50%,#0A0908)}

  .hangsign .kasten{display:block;position:relative;
    margin-top:clamp(48px,5.4vw,80px);transform:rotate(-1.6deg)}
  .hangsign .front{display:block;position:relative;background:#0C0B0A;
    border-radius:.16em;padding:.48em .52em .55em;text-align:center;
    background-image:linear-gradient(158deg,#2B2721,#0C0B0A 42%,#17150F);
    box-shadow:0.02em 0.01em 0 #27231D,
      0.05em 0.03em 0 #24211C,
      0.07em 0.05em 0 #231F1A,
      0.10em 0.06em 0 #211E19,
      0.12em 0.07em 0 #1F1D18,
      0.15em 0.09em 0 #1E1B17,
      0.17em 0.11em 0 #1D1A16,
      0.20em 0.12em 0 #1B1915,
      0.22em 0.14em 0 #1A1814,
      0.25em 0.15em 0 #191713,
      0.27em 0.16em 0 #181612,
      0.30em 0.18em 0 #171511,
      0.32em 0.20em 0 #151410,
      0.35em 0.21em 0 #141310,
      0.37em 0.23em 0 #13120F,
      0.39em 0.24em 0 #12110E,
      0.42em 0.26em 0 #11100D,
      0.44em 0.27em 0 #100F0C,
      0.47em 0.28em 0 #0F0E0C,
      0.49em 0.30em 0 #0E0D0B,
      0.52em 0.32em 0 #0D0C0A,
      0.54em 0.33em 0 #0C0B09,
      0.57em 0.35em 0 #0B0B09,
      0.59em 0.36em 0 #0A0A08,
      0.62em 0.38em 0 #090907,
      0.64em 0.39em 0 #090807,
      0.67em 0.41em 0 #080706,
      0.69em 0.42em 0 #070705,
      0.72em 0.43em 0 #060605,
      0.74em 0.45em 0 #050504,
      1.06em .98em .84em rgba(0,0,0,.5)}

  /* Leuchtfeld: die Roehre liegt als Rahmen im Kasten, innen bleibt es dunkel */
  .hangsign .leuchte{display:block;position:relative;border-radius:.1em;
    border:clamp(1.8px,.097em,3px) solid #FFF6E4;
    padding:.39em .45em .45em;background:#0A0908;
    box-shadow:0 0 4px rgba(255,236,200,.95),0 0 13px rgba(224,174,94,.8),
      0 0 34px rgba(224,174,94,.5),0 0 74px rgba(224,174,94,.26),
      inset 0 0 10px rgba(255,236,200,.5),inset 0 0 26px rgba(224,174,94,.3);
    animation:sflickA 13s infinite steps(1,end)}
  .hangsign em{display:block;font-style:normal;font-size:.325em;letter-spacing:.3em;
    margin-right:-.3em;text-transform:uppercase;color:#E0AE5E;margin-bottom:.8em;
    text-shadow:0 0 6px rgba(224,174,94,.8)}
  .hangsign b{display:block;font-family:var(--display);font-weight:400;
    text-transform:uppercase;white-space:nowrap;font-size:1em;line-height:1;
    color:#FFF3DC;letter-spacing:.012em;
    text-shadow:0 0 5px rgba(255,246,228,.95),0 0 17px rgba(224,174,94,.85),
      0 0 38px rgba(224,174,94,.45)}
  /* Erst wenn daneben wirklich kein Platz mehr ist, rutscht das Schild unter
     den Text. Bis dahin haengt es oben rechts an der Decke. */
  @media (max-width:620px){
    .hangsign{position:static;--decke:0px;width:min(100%,272px);
      margin:34px auto 0;font-size:24px}
    .hangsign .rohr{display:none}
    .hangsign .kasten{margin-top:0}
  }
  /* ---------- Rechtliche Seiten ----------
     Zweispaltig: links ein mitlaufendes Inhaltsverzeichnis, rechts der Text.
     Die Abschnitte sind nummeriert, der gerade sichtbare wird markiert. */
  .rwrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(34px,5vw,80px);
    align-items:start}
  @media (max-width:900px){.rwrap{grid-template-columns:1fr;gap:26px}}

  .rnav{position:sticky;top:122px}
  .rnav .rnav-kl{display:block;font-size:10px;letter-spacing:.24em;margin-right:-.24em;
    text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:14px}
  .rnav a{display:flex;gap:10px;align-items:baseline;padding:7px 0;cursor:pointer;
    font-size:13.5px;line-height:1.35;color:var(--muted-2);
    border-left:1px solid var(--line-soft);padding-left:14px;
    transition:color .25s,border-color .25s}
  .rnav a i{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.06em;
    color:rgba(224,174,94,.45);flex:0 0 auto;transition:color .25s}
  .rnav a:hover{color:var(--text)}
  .rnav a.hier{color:var(--text);border-color:var(--gold)}
  .rnav a.hier i{color:var(--gold)}
  @media (max-width:900px){
    .rnav{position:static;border:1px solid var(--line-soft);border-radius:14px;
      padding:18px 20px;background:var(--card)}
    .rnav a{border-left:0;padding-left:0}
    .rnav a.hier{border-color:transparent}
  }

  .rtext{max-width:74ch}
  .rabs{scroll-margin-top:110px}
  .rabs + .rabs{margin-top:46px;padding-top:40px;border-top:1px solid var(--line-soft)}
  .rtext h2{display:flex;gap:14px;align-items:baseline;margin:0 0 14px;
    font-size:clamp(17px,1.9vw,21px);font-weight:900;letter-spacing:.01em;color:var(--text)}
  .rtext h2 i{font-style:normal;font-family:var(--display);font-weight:400;
    font-size:clamp(20px,2.3vw,26px);color:var(--gold);line-height:1;flex:0 0 auto}
  .rtext h3{font-size:14.5px;font-weight:700;margin:24px 0 4px;color:var(--text);
    letter-spacing:.01em}
  .rtext p{color:var(--muted);font-size:15.5px;line-height:1.68;margin:9px 0}
  .rtext p b,.rtext li b{color:var(--text);font-weight:700}
  .rtext a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
  .rtext ul{margin:9px 0;padding-left:20px;color:var(--muted);font-size:15.5px;line-height:1.68}
  .rtext li{margin:4px 0}
  .rtext .anschrift{color:var(--text);font-size:16px;line-height:1.7;margin:10px 0}
  /* Kasten fuer Angaben, die noch ergaenzt werden muessen */
  .rluecke{border-left:2px solid var(--gold);background:rgba(224,174,94,.06);
    padding:13px 17px;margin:15px 0;border-radius:0 8px 8px 0}
  .rluecke b{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold);margin-bottom:6px}
  .rluecke p{margin:0;font-size:14px;color:var(--muted)}
  .rstand{font-size:13px;color:var(--muted-2);margin-top:40px;
    padding-top:22px;border-top:1px solid var(--line-soft)}

  .neonobj{filter:drop-shadow(0 0 2px rgba(255,246,228,1)) drop-shadow(0 0 8px rgba(255,241,214,.95))
    drop-shadow(0 0 22px rgba(255,236,200,.6)) drop-shadow(0 0 46px rgba(255,236,200,.35));animation:sflickB 10.4s infinite steps(1,end)}
  @media (max-width:760px){
    .werhead{max-width:none}
  }

  /* Formular auf der Goldfläche, drumherum eine leuchtende Neonröhre wie bei den Plakaten */
  .slab .fbox{position:relative;background:rgba(23,21,15,.07);border:1px solid rgba(23,21,15,.14);
    border-radius:18px;padding:clamp(24px,3vw,38px);max-width:760px}
  .slab .fbox .finner{position:relative;z-index:2}
  .fneon{position:absolute;inset:-7px;border-radius:24px;border:3px solid #FFF6E4;opacity:0;z-index:1;
    pointer-events:none;
    box-shadow:0 0 4px rgba(255,246,228,.95),0 0 15px rgba(255,241,214,.9),0 0 40px rgba(255,236,200,.55),
      0 0 84px rgba(255,236,200,.3),inset 0 0 12px rgba(255,241,214,.5)}
  .js .fbox.in .fneon{animation:tubeon 1.8s steps(1,end) forwards, hum 5s 2.4s ease-in-out infinite}

  /* Leuchtende Neonröhre um den Absendeknopf, dauerhaft flackernd */
  .sendwrap{position:relative;display:block;margin-top:6px}
  .sendneon{position:absolute;inset:0;border-radius:999px;border:2.5px solid #FFF6E4;pointer-events:none;
    box-shadow:0 0 4px rgba(255,246,228,.95),0 0 13px rgba(255,241,214,.9),0 0 32px rgba(255,236,200,.55),
      0 0 64px rgba(255,236,200,.3),inset 0 0 12px rgba(255,241,214,.35);
    animation:sflickA 13s infinite steps(1,end)}
  .sendneon::after{content:"";position:absolute;inset:5px;border-radius:999px;pointer-events:none;
    border:1px solid rgba(255,241,214,.28);
    box-shadow:0 0 14px rgba(255,236,200,.35);
    animation:sflickB 8.7s infinite steps(1,end)}
  .slab .fbox .sendwrap .btn.dark{background:#17150F;border-color:transparent;color:#FFE9C0;
    letter-spacing:.14em;
    text-shadow:0 0 4px rgba(255,246,228,.85),0 0 14px rgba(224,174,94,.7),0 0 30px rgba(224,174,94,.35)}
  .slab .fbox .sendwrap .btn.dark:hover{background:#0F0E0C;border-color:transparent;color:#FFF6E4}
  /* zwei Röhrenlagen mit unterschiedlicher Laufzeit, dadurch nie derselbe Takt */
  @keyframes sflickA{
    0%,2.4%{opacity:1}2.7%{opacity:.14}3%{opacity:1}
    9.1%{opacity:1}9.3%{opacity:.1}9.6%{opacity:.75}9.9%{opacity:.12}10.4%{opacity:1}
    26%{opacity:1}26.2%{opacity:.2}26.5%{opacity:1}
    27.1%{opacity:.08}27.4%{opacity:1}
    44.8%{opacity:1}45%{opacity:.16}45.6%{opacity:1}
    61.3%{opacity:1}61.5%{opacity:.09}61.8%{opacity:.6}62.2%{opacity:.14}62.9%{opacity:1}
    78.4%{opacity:1}78.6%{opacity:.22}78.9%{opacity:1}
    91.7%{opacity:1}91.9%{opacity:.1}92.3%{opacity:.8}92.6%{opacity:.15}93.2%{opacity:1}100%{opacity:1}}
  @keyframes sflickB{
    0%,6.3%{opacity:1}6.6%{opacity:.25}7%{opacity:1}
    19.4%{opacity:1}19.7%{opacity:.12}20.3%{opacity:1}
    35.2%{opacity:1}35.4%{opacity:.3}35.7%{opacity:.7}36.1%{opacity:.18}36.7%{opacity:1}
    53.9%{opacity:1}54.2%{opacity:.14}54.6%{opacity:1}
    70.1%{opacity:1}70.4%{opacity:.28}70.8%{opacity:1}
    88.6%{opacity:1}88.9%{opacity:.11}89.4%{opacity:.65}89.8%{opacity:1}100%{opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .fneon{opacity:1;animation:none}.sendneon,.sendneon::after{animation:none}
    .hangsign .leuchte{animation:none}
  }

  .page{display:none}
  .page.active{display:block}
  .back{background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);font:inherit;
    font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:11px 20px;
    margin-bottom:28px;transition:color .25s,border-color .25s}
  .back:hover{color:var(--gold);border-color:var(--gold)}

  /* Fragen auf der Komiteeseite. Frueher eine goldene Flaeche ueber die ganze
     Breite, dadurch wirkte der Abschnitt wie von einer anderen Seite. Jetzt
     dunkel wie der Rest, Gold nur noch als Linie und im Pluszeichen. */
  #faqsec{background:var(--rail);padding-block:clamp(72px,9vw,124px);margin-block:-2px}
  .vorteile{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px);
    margin-bottom:clamp(44px,5vw,72px)}
  .vorteil{background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:clamp(22px,2.4vw,30px);position:relative;overflow:hidden}
  .vorteil::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,var(--gold),rgba(224,174,94,0))}
  .vorteil h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
    font-size:clamp(17px,1.65vw,22px);letter-spacing:.03em;line-height:1.1;margin:0}
  .vorteil p{color:var(--muted);font-size:15px;line-height:1.66;margin:12px 0 0}
  .fgruppe + .fgruppe{margin-top:clamp(36px,4vw,58px)}
  .fgruppe > .tagline{display:block;margin-bottom:12px}
  .faq{border-top:1px solid var(--line-soft)}
  .faq .q{border-bottom:1px solid var(--line-soft)}
  .faq button.qh{color:var(--text)}
  .faq .qi{border-color:rgba(224,174,94,.45)}
  .faq .qi::after,.faq .qi::before{background:var(--gold)}
  .faq .q.open .qi{background:var(--gold);border-color:var(--gold)}
  .faq .q.open .qi::before{background:var(--ink)}
  .faq .qa p{color:var(--muted)}
  .faq button.qh:hover .qt{color:#FFF}
  @media (max-width:860px){.vorteile{grid-template-columns:1fr;gap:14px}}

/* ---------- Ergaenzungen fuer WordPress ----------
   Plakate, Karten und Rueckwege sind jetzt echte Links, keine Schaltflaechen. */
a{color:inherit}
a.poster,a.card,a.back,a.btn,a.pill,.foot a,.omenu a,.rnav a,.mark,.fine a,.hdone a{text-decoration:none}
a.back{display:inline-block}
.page{display:block}
.wall .poster[hidden]{display:none}
.formfehler{color:#E0704A;font-size:14px;margin:0 0 14px}
.hp-feld{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}
.admin-bar .float{top:calc(32px + 18px)}
@media (max-width:782px){.admin-bar .float{top:calc(46px + 18px)}}
.einleitung p{font-size:17px;line-height:1.65;color:var(--muted);margin:0}
.einleitung p+p{margin-top:14px}
.einleitung b{color:var(--text)}
.rtext p.rluecke{font-size:14px;color:var(--muted)}
.rtext h2.wp-block-heading,.rtext h3.wp-block-heading{font-family:inherit}
form[hidden]{display:none!important}
/* Die Display-Schrift Anton gibt es nur in einer Staerke. Ohne diese Regel rechnet der
   Browser bei fett gesetzten Ueberschriften (h3, b) eine Kunstfette, die unscharf wirkt. */
html{font-synthesis:none;-webkit-font-synthesis:none}
.card h3,.fc h3,.ok h3,.stp h3,.modal h3,.word,.pcap h3,.poster.wish h3,.rstep h3,
.hmail .hdone b,.sticker b,.omenu a,.tl .big,.count-big,.hero h1,.dsp{font-weight:400}

/* ---------- Location-Seite, Layout C: Claim und Einstieg breit, Themen links, Galerie rechts */
.claimgross{font-size:clamp(34px,5.2vw,64px);max-width:16ch;margin:0}
.loclead.gross{color:var(--text);font-size:clamp(18px,1.8vw,24px);line-height:1.45;max-width:30ch;margin:16px 0 clamp(28px,3vw,44px)}
.split.c{align-items:stretch}
.split.c .loctext p.lt{color:var(--muted);font-size:15.5px;line-height:1.7;margin:0 0 14px;max-width:48ch}
.split.c .gal{align-content:start}
.themen.stapel{grid-template-columns:1fr;gap:22px;margin-top:28px}
.themen.stapel .thema{padding-top:16px}
.split.c .feats{margin-top:28px}
@media (max-width:900px){.loclead.gross{max-width:none}}

/* ---------- Location-Seite im Stil der Startseite ---------- */
/* Name und Ortsteil wie im Logo: mittig, der Ort klein und weit gesperrt darunter */
.lochero .ncontent{text-align:center}
.lochero .tagline{display:block;margin:clamp(10px,1.3vw,18px) -.5em 0 0;font-size:clamp(12px,1.75vw,24px);letter-spacing:.5em;font-weight:700;line-height:1}
/* Safari schneidet bei Filtern alles ab, was ueber die Zeile ragt; Luft oben haelt die Ue-Punkte im Bild */
.lochero h1{font-size:clamp(44px,8.5vw,118px);line-height:.92;margin:0;padding-top:.16em}
.locclaim{display:inline-block;margin-top:18px;background:var(--ink);color:var(--gold);font-family:var(--display);
  text-transform:uppercase;letter-spacing:.01em;font-size:clamp(17px,2vw,28px);line-height:1.3;padding:.18em .6em;
  border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,.35)}
#haus{padding-top:clamp(40px,5vw,64px);padding-bottom:calc(clamp(34px,4vw,56px) + 3.4vw)}
#haus .back{border-color:rgba(23,21,15,.35);color:var(--ink);margin-bottom:34px}
#haus .hd .sub{max-width:46ch}
/* Fotobuehne als Leuchtplakat: Neonroehre rundherum, kippt zur Maus, Bildwechsel mit Flackern */
.lbuehne{margin-top:clamp(34px,4.4vw,60px)}
.lposter{position:relative;transform-style:preserve-3d;
  transform:perspective(1800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.lposter.kippt{transition:transform .14s linear}
.lneon{position:absolute;inset:-11px;border-radius:24px;border:3px solid #FFF6E4;opacity:0;pointer-events:none;z-index:1;
  box-shadow:0 0 5px rgba(255,236,200,.95),0 0 16px rgba(255,241,214,.85),0 0 38px rgba(255,236,200,.55),
    0 0 80px rgba(255,236,200,.3),inset 0 0 10px rgba(255,236,200,.75),inset 0 0 28px rgba(255,236,200,.35)}
.lframe{display:block;position:relative;overflow:hidden;border-radius:14px;aspect-ratio:2/1;background:#17150F;
  filter:brightness(.18) saturate(.4);box-shadow:0 44px 70px rgba(23,21,15,.42),0 12px 24px rgba(23,21,15,.3)}
.lframe .ph{position:absolute;inset:-4%;background-size:cover;background-repeat:no-repeat;
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.01);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.lposter.kippt .lframe .ph{transition:transform .14s linear}
.lveil{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,11,10,.78),rgba(12,11,10,0) 42%)}
.lbeam{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(120% 90% at var(--lx,50%) var(--ly,-10%),rgba(255,236,200,.32),rgba(255,236,200,.06) 45%,rgba(255,236,200,0) 70%)}
.lposter .bleiste{position:absolute;left:clamp(20px,3.4vw,48px);bottom:clamp(20px,3vw,40px);right:auto;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;transform:translateZ(46px)}
.lposter .bpfeil{z-index:3;transform:translateY(-50%) translateZ(40px)}
.lposter .bpfeil.zurueck{left:clamp(16px,2.6vw,38px)}
.lposter .bpfeil.weiter{right:clamp(16px,2.6vw,38px)}
/* Einschalten wie bei den Plakaten der Startseite */
.lposter.an .lneon{animation:tubeon 1.7s steps(1,end) forwards}
.lposter.an .lframe{animation:lighton 1.8s ease-out forwards}
.lposter.an .lbeam{animation:beamon 1.7s ease-out forwards}
.lposter.brennt .lneon{opacity:1;animation:hum 4.5s ease-in-out infinite}
.lposter.brennt .lframe{filter:none;animation:none}
.lposter.brennt .lbeam{opacity:.7;animation:none}
/* Bildwechsel: Roehre flackert aus, Bild wechselt im Dunkeln, Roehre springt wieder an */
.lposter.brennt.wechsel .lneon{animation:roehreaus .95s steps(1,end)}
.lposter.brennt.wechsel .lframe{animation:bildaus .95s steps(1,end)}
.lposter.brennt.wechsel .lbeam{animation:roehreaus .95s steps(1,end)}
@keyframes roehreaus{0%{opacity:1}7%{opacity:.12}11%{opacity:.85}16%{opacity:.06}42%{opacity:.06}
  47%{opacity:.9}51%{opacity:.18}57%{opacity:1}63%{opacity:.55}69%{opacity:1}100%{opacity:1}}
@keyframes bildaus{0%{filter:none}7%{filter:brightness(.35) saturate(.6)}11%{filter:brightness(.9)}
  16%{filter:brightness(.14) saturate(.4)}42%{filter:brightness(.14) saturate(.4)}47%{filter:brightness(.95)}
  51%{filter:brightness(.32) saturate(.6)}57%{filter:none}63%{filter:brightness(.75)}69%{filter:none}100%{filter:none}}
.lposter:hover .lneon{filter:brightness(1.15)}
@media (max-width:900px){.lframe{aspect-ratio:3/2}}
@media (max-width:620px){
  .lframe{aspect-ratio:4/5}
  .lneon{inset:-8px;border-radius:20px}
  .lposter .bpfeil{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .lneon{opacity:1}.lframe{filter:none}.lbeam{opacity:.7}
  .lposter.an .lneon,.lposter.an .lframe,.lposter.an .lbeam,.lposter.brennt.wechsel .lneon,.lposter.brennt.wechsel .lframe,.lposter.brennt.wechsel .lbeam{animation:none}
}
.bpfeil{position:absolute;top:50%;background:none;border:0;cursor:pointer;
  color:#FFF6E4;font:inherit;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 4px;text-shadow:0 1px 10px rgba(0,0,0,.75)}
.bpfeil::after{content:"";display:block;height:2px;margin-top:8px;background:currentColor;box-shadow:0 1px 8px rgba(0,0,0,.5);
  transform-origin:left;transition:transform .35s}
.bpfeil:hover::after{transform:scaleX(.45)}
.bleiste .ring circle{stroke:rgba(255,246,228,.3)}
.bleiste .ring circle.run{stroke:#FFF6E4}
.bleiste .stagehead .idx{color:#FFF6E4;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.bleiste .word{color:#FFF6E4;font-size:clamp(34px,5vw,74px);max-width:16ch;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.bleiste .word.klein{font-size:clamp(24px,3vw,42px)}
.bunter{margin-top:clamp(30px,3.6vw,48px);align-items:start}
.bunter .wordtext{margin:0;min-height:0}
.bunter .wordtext.leer{visibility:hidden}
.bunter .reellist{margin-top:0}
@media (max-width:760px){.bunter{gap:24px}.bunter .wordtext.leer{display:none}}
.feats.gold{margin-top:8px}
.feats.gold .featk{color:rgba(23,21,15,.6)}
.feats.gold .feat{border-color:rgba(23,21,15,.3);color:var(--ink);background:rgba(255,255,255,.18)}
.feats.gold .feat svg{stroke:var(--ink)}
/* Eckdaten auf Schwarz im Neonkasten */
#eckdaten .fbox{position:relative;border-radius:18px;padding:clamp(24px,3vw,40px);max-width:none}
#eckdaten .fbox .finner{position:relative;z-index:2}
.faktenneon{margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.faktenneon .fact{border-color:var(--line-soft)}
.faktenneon .fact dt{color:var(--muted-2)}
.faktenneon .fact dd{color:var(--text);font-weight:700}
#eckdaten .sendwrap{margin-top:26px;max-width:420px}
#eckdaten .sendwrap .btn{width:100%;display:flex}
@media (max-width:760px){.faktenneon{grid-template-columns:1fr}}
@media (max-width:620px){.lochero h1{font-size:clamp(40px,12vw,64px)}.lochero .tagline{font-size:13px}}

/* Leuchtschild bei den Eckdaten, haengt an der Unterkante der Goldflaeche */
.hangsign.locschild{--decke:0px;top:0;right:6%;width:clamp(200px,23vw,340px);font-size:clamp(15px,2vw,29px)}
.hangsign.locschild .kasten{transform:rotate(1.4deg)}
.hangsign.locschild b{font-size:1.55em}
.hangsign.locschild em{margin-bottom:.55em}
.hangsign.locschild small{display:block;font-size:.3em;letter-spacing:.24em;margin:.9em -.24em 0 0;text-transform:uppercase;
  color:#FFE9C0;text-shadow:0 0 6px rgba(224,174,94,.8)}
@media (max-width:620px){.hangsign.locschild{width:min(100%,280px);margin:6px auto 22px;font-size:22px}}
/* Umlautpunkte in der zweiten Zeile brauchen Luft, sonst verschmelzen sie mit der Zeile darüber */
#haus .hd h2,#eckdaten .hd h2{line-height:1.06}
#loc-hero{background-position:center 18%}
@media (max-width:620px){#loc-hero{background-position:24% 18%}}
#eckdaten .sendwrap{margin-left:auto;margin-right:auto}


/* Lange Namen (z. B. Altonaer Kaispeicher) kleiner, damit der Leuchtrahmen so gross bleibt wie bei den anderen */
.lochero h1.lang{font-size:clamp(34px,5.8vw,84px)}
@media (max-width:620px){.lochero h1.lang{font-size:clamp(30px,9vw,44px)}}

/* ---------- Komitee: Zeitstrahl mit Neonroehre, die beim Scrollen mitlaeuft ---------- */
.zs{position:relative;margin-top:clamp(30px,4vw,56px)}
.zs::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);
  background:rgba(23,21,15,.16);border-radius:4px}
.zfill{position:absolute;left:50%;top:0;width:4px;height:var(--p,0%);transform:translateX(-50%);border-radius:4px;
  background:#FFF6E4;box-shadow:0 0 4px rgba(255,246,228,.95),0 0 14px rgba(255,241,214,.85),0 0 34px rgba(255,236,200,.55);
  transition:height .12s linear}
/* Zeit sitzt als Schild direkt auf der Roehre, Titel und Text frei daneben */
.zitem{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 290px minmax(0,1fr);align-items:center;
  padding:clamp(18px,2.4vw,34px) 0}
.zknoten{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:2;white-space:nowrap;text-align:center;
  padding:10px 18px;border-radius:999px;background:var(--gold);border:2px solid rgba(23,21,15,.3);color:rgba(23,21,15,.55);
  font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(15px,1.3vw,19px);line-height:1.05;letter-spacing:.02em;
  transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.zinhalt{grid-column:3;grid-row:1;justify-self:start;max-width:42ch;opacity:.35;transform:translateX(14px);transition:opacity .5s,transform .5s}
.zinhalt h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.6vw,36px);line-height:1;color:var(--ink);margin:0}
.zinhalt p{margin:10px 0 0;color:rgba(23,21,15,.8);font-size:15.5px;line-height:1.6}
.zitem:nth-of-type(even) .zinhalt{grid-column:1;justify-self:end;text-align:right;transform:translateX(-14px)}
.zitem.an .zinhalt{opacity:1;transform:none}
.zitem.an .zknoten{background:#17150F;color:#FFE9C0;border-color:#FFF6E4;
  text-shadow:0 0 4px rgba(255,246,228,.8),0 0 14px rgba(224,174,94,.6);
  box-shadow:0 0 0 2px rgba(23,21,15,.25),0 0 6px rgba(255,246,228,.95),0 0 18px rgba(255,241,214,.8),0 0 40px rgba(255,236,200,.5)}
.zitem.ziel .zknoten{font-size:clamp(18px,1.7vw,24px);padding:14px 24px}
.zitem.ziel .zinhalt h3{font-size:clamp(30px,3.4vw,48px)}
@media (max-width:760px){
  .zs::before,.zfill{left:14px}
  .zitem,.zitem:nth-of-type(even){grid-template-columns:minmax(0,1fr);padding:14px 0 14px 0}
  .zknoten,.zitem:nth-of-type(even) .zknoten{grid-column:1;grid-row:1;justify-self:start;max-width:none;font-size:14px;padding:8px 14px}
  .zinhalt,.zitem:nth-of-type(even) .zinhalt{grid-column:1;grid-row:2;justify-self:start;text-align:left;transform:none;margin:12px 0 0 34px}
  .zitem.ziel .zknoten{font-size:16px;padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){.zwann,.zinhalt{opacity:1;transform:none;transition:none}.zfill{transition:none}}

/* ---------- Komitee: Fragen als laufender Wechsler wie die Leistungen auf der Startseite ---------- */
.vlicht .vorteil{background:none;border:0;border-radius:0;padding:22px 0 0}
.vlicht .vorteil::before{height:3px;background:#FFF6E4;border-radius:3px;right:auto;width:64px;
  box-shadow:0 0 4px rgba(255,246,228,.95),0 0 14px rgba(255,241,214,.8),0 0 30px rgba(224,174,94,.5)}
.vlicht .vorteil h3{font-size:clamp(22px,2.2vw,30px);line-height:1}
.ftabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,3vw,40px)}
.ftab{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;padding:10px 18px;cursor:pointer;
  transition:color .3s,border-color .3s,background .3s,box-shadow .3s}
.ftab span{font-size:10px;letter-spacing:.2em;font-weight:900;color:var(--gold)}
.ftab:hover{color:var(--text);border-color:rgba(224,174,94,.55)}
.ftab.on{color:#17150F;background:var(--gold);border-color:var(--gold);box-shadow:0 0 18px rgba(224,174,94,.35)}
.ftab.on span{color:#17150F}
.fbuehne{align-items:start}
.fbuehne .stage{min-height:340px;justify-content:flex-start}
.fbuehne .ring circle{stroke:rgba(224,174,94,.22)}
.fbuehne .ring circle.run{stroke:var(--gold)}
.fbuehne .stagehead .idx{color:var(--muted)}
.fbuehne .word.fq{color:var(--text);font-size:clamp(28px,3.4vw,48px);line-height:1.02}
.fbuehne .wordtext.fa{color:var(--muted);font-size:16px;max-width:52ch}
.fbuehne .reellist li{border-color:var(--line-soft);color:rgba(243,241,238,.42)}
.fbuehne .reellist li:last-child{border-bottom-color:var(--line-soft)}
.fbuehne .reellist li.on{color:var(--text)}
.fbuehne .reellist li.on .n{color:var(--gold)}
.fbuehne .reellist li:hover{color:rgba(243,241,238,.8)}
.fbuehne .reellist .t{font-size:15px;line-height:1.35}
@media (max-width:900px){.fbuehne .stage{min-height:0}}

/* Umlautpunkte in Grossbuchstaben ragen ueber die Zeile, die Wechsler schneiden oben sonst ab */
.word{padding-top:.12em}
@media (max-width:760px){.zknoten{white-space:normal}}

/* ---------- Komitee: Fragen als Kacheln, die sich beim Drueberfahren umdrehen ---------- */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.fkarte{height:clamp(290px,24vw,340px);perspective:1400px;cursor:pointer;outline:none}
.fkarte[hidden]{display:none}
.fkinner{position:relative;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.fkarte.dreh .fkinner{transform:rotateY(180deg)}
@media (hover:hover){.fkarte:hover .fkinner{transform:rotateY(180deg)}}
.fkarte:focus-visible .fkinner{transform:rotateY(180deg)}
.fkseite{position:absolute;inset:0;border-radius:18px;padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.fvorn{background:var(--card);border:1px solid var(--line);justify-content:flex-end;transition:border-color .3s,box-shadow .3s}
.fkarte:hover .fvorn{border-color:rgba(224,174,94,.55)}
.fkopf{display:flex;gap:10px;align-items:baseline;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.fkopf b{color:var(--gold);font-weight:900}
.fvorn .fkopf{position:absolute;top:clamp(22px,2.2vw,30px);left:clamp(22px,2.2vw,30px);right:clamp(22px,2.2vw,30px)}
.fqm{position:absolute;right:-6px;top:22px;font-family:var(--display);font-size:clamp(150px,13vw,210px);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(224,174,94,.55);pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(224,174,94,.25))}
.fvorn h3{position:relative;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2vw,28px);
  line-height:1.05;margin:0;color:var(--text);max-width:85%;padding-top:.1em}
.fhinweis{margin-top:14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:900;color:var(--gold)}
.fhinweis::after{content:" ↻"}
.fhinten{background:var(--gold);color:var(--ink);transform:rotateY(180deg);border:1px solid var(--gold);
  box-shadow:0 0 0 1px rgba(255,246,228,.4),0 0 22px rgba(224,174,94,.35)}
.fhinten .fkopf{color:rgba(23,21,15,.62);letter-spacing:.12em;line-height:1.4;margin-bottom:14px}
.fhinten .fkopf b{color:var(--ink)}
.fhinten p{margin:0;font-size:clamp(14px,1.05vw,15.5px);line-height:1.6;color:var(--ink);overflow:auto}
@media (max-width:980px){.fgrid{grid-template-columns:1fr 1fr}.fkarte{height:340px}}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}.fkarte{height:320px}}
@media (prefers-reduced-motion:reduce){.fkinner{transition:none}}
/* Kacheln kompakter: vier nebeneinander, niedriger, kleinere Schrift */
.fgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fkarte{height:220px}
.fkseite{padding:18px 18px 16px;border-radius:14px}
.fvorn .fkopf{top:18px;left:18px;right:18px}
.fkopf{font-size:9.5px;letter-spacing:.16em}
.fqm{font-size:120px;top:14px;right:-4px;-webkit-text-stroke-width:1.5px}
.fvorn h3{font-size:clamp(17px,1.35vw,20px);max-width:88%}
.fhinweis{margin-top:10px;font-size:9.5px}
.fhinten .fkopf{margin-bottom:8px}
.fhinten p{font-size:13px;line-height:1.5}
@media (max-width:1100px){.fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.fkarte{height:230px}}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}.fkarte{height:240px}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}.fkarte{height:auto;min-height:150px}
  .fkinner{display:grid}.fkseite{position:relative;inset:auto;grid-area:1/1}
  .fvorn{min-height:150px}}
.fkarte{height:236px}
.fhinten .fkopf{display:none}
.fhinten{justify-content:center}
.fhinten p{font-size:13px;line-height:1.48}
@media (max-width:560px){.fhinten .fkopf{display:flex}.fkarte{height:auto}}
.fkarte{height:250px}
@media (max-width:820px){.fkarte{height:270px}}
@media (max-width:560px){.fkarte{height:auto}}
@media (max-width:1100px) and (min-width:821px){.fkarte{height:272px}}

/* ---------- Komitee: Fragen als Chatverlauf, ein Thema auf einmal ---------- */
.fchat{max-width:820px}
.fphone{background:#141311;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45)}
.fphkopf{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#1E1C19;border-bottom:1px solid var(--line-soft)}
.fphbild{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#17150F;
  font-family:var(--display);font-size:18px}
.fphname{display:flex;flex-direction:column;line-height:1.25}
.fphname b{font-size:14.5px;color:var(--text)}
.fphname small{font-size:12px;color:var(--gold)}
.fverlauf{display:flex;flex-direction:column;gap:10px;padding:22px clamp(14px,2.4vw,26px) 26px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(224,174,94,.06),rgba(224,174,94,0) 60%)}
.fverlauf[hidden]{display:none}
.fbl{max-width:78%;padding:10px 14px 11px;border-radius:16px;font-size:15px;line-height:1.5;
  opacity:0;transform:translateY(8px) scale(.98);transition:opacity .35s,transform .35s}
.fbl.da{opacity:1;transform:none}
.fwer{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:900;margin-bottom:3px}
.fbl.frage{align-self:flex-end;background:var(--gold);color:#17150F;border-bottom-right-radius:4px;font-weight:700;margin-top:8px}
.fbl.frage .fwer{color:rgba(23,21,15,.55)}
.fbl.antwort{align-self:flex-start;background:#2A2723;color:var(--text);border-bottom-left-radius:4px}
.fbl.antwort .fwer{color:var(--gold)}
.fbl.frage:first-child{margin-top:0}
@media (max-width:560px){.fbl{max-width:90%;font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.fbl{opacity:1;transform:none;transition:none}}

/* Bildnachweis im Kopfbild (z. B. Unsplash) */
.bildnachweis{position:absolute;right:16px;bottom:calc(3.4vw + 12px);z-index:3;font-size:10.5px;letter-spacing:.04em;
  color:rgba(243,241,238,.6);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.bildnachweis a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bildnachweis a:hover{color:#FFF}
#page-komitee #loc-hero{background-position:center 30%}
@media (max-width:620px){.bildnachweis{bottom:12px;right:12px;font-size:9.5px}#page-komitee #loc-hero{background-position:58% 30%}}
#page-komitee #loc-hero{background-position:center 12%}
@media (max-width:620px){#page-komitee #loc-hero{background-position:58% 12%}.lochero .tagline{letter-spacing:.32em;margin-right:-.32em;font-size:11.5px}}

/* Zeitstrahl: Strichzeichnung auf der freien Seite, zeichnet sich, wenn die Roehre den Schritt erreicht */
.zicon{grid-column:1;grid-row:1;justify-self:end;margin-right:clamp(10px,3vw,60px);width:clamp(70px,7vw,104px);
  opacity:.28;transform:rotate(-6deg) scale(.92);transition:opacity .6s,transform .6s}
.zitem:nth-of-type(even) .zicon{grid-column:3;justify-self:start;margin:0 0 0 clamp(10px,3vw,60px);transform:rotate(6deg) scale(.92)}
.zsvg{display:block;width:100%;height:auto;overflow:visible}
.zsvg *{stroke:#17150F;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.zsvg .d{stroke-width:1.7;opacity:.7}
.zsvg *:not([stroke-dasharray]){stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}
.zitem.an .zicon{opacity:.85;transform:rotate(-3deg) scale(1)}
.zitem:nth-of-type(even).an .zicon{transform:rotate(3deg) scale(1)}
:is(.zitem.an,.zan) .zsvg *{stroke-dashoffset:0}
.zitem.ziel .zicon{width:clamp(96px,9vw,130px)}
@media (max-width:760px){
  .zicon,.zitem:nth-of-type(even) .zicon{grid-column:1;grid-row:1;justify-self:end;margin:0;width:54px;transform:none}
  .zitem.an .zicon,.zitem:nth-of-type(even).an .zicon{transform:none}
}
@media (prefers-reduced-motion:reduce){.zsvg *{stroke-dashoffset:0;transition:none}}
#page-komitee .lochero .tagline{font-size:clamp(11px,1.15vw,16px);letter-spacing:.34em;margin-right:-.34em}

/* Komitee-Kopf: kleine Zeile über der Überschrift */
.lochero .tagline.kopfzeile{margin:0 -.34em clamp(10px,1.2vw,16px) 0;font-size:clamp(11px,1.05vw,14px);letter-spacing:.34em}
#page-komitee .lochero h1{line-height:.95}
/* Komitee: Fahrplan-Abschnitt oben so knapp wie bei den Locations, Rueckweg auf Gold lesbar */
#zeit{padding-top:clamp(40px,5vw,64px)}
#zeit .back{border-color:rgba(23,21,15,.35);color:var(--ink);margin-bottom:28px}
#page-komitee .lochero h1{white-space:nowrap}
@media (max-width:620px){#page-komitee .lochero h1{font-size:7.4vw}}
#page-komitee .lochero h1{font-size:clamp(28px,3.8vw,56px)}
@media (max-width:620px){#page-komitee .lochero h1{font-size:6.8vw}}
/* Zeitstrahl-Icons: jedes Icon spielt seine eigene kleine Szene, sobald der Schritt leuchtet */
.zsvg .fb{transform-box:fill-box;transform-origin:center}
.zsvg .kp,.zsvg .muenze,.zsvg .stapel,.zsvg .hoerer,.zsvg .lid,.zsvg .stern,.zsvg .platz,.zsvg .meri,.zsvg .glanz,.zsvg .mikro,.zsvg .abriss{transform-box:fill-box;transform-origin:center}
:is(.zitem.an,.zan) .zsvg *{animation-delay:1.3s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both}
/* Komitee: die zwei rücken an die Mitte, alle hüpfen kurz, Funken */
@keyframes zkpl{0%,100%{transform:translateX(-22px)}28%,72%{transform:translateX(0)}}
@keyframes zkpr{0%,100%{transform:translateX(22px)}28%,72%{transform:translateX(0)}}
@keyframes zkpm{0%,30%,44%,100%{transform:translateY(0)}37%{transform:translateY(-7px)}}
@keyframes zfunkauf{0%,32%,70%,100%{opacity:0}40%,60%{opacity:.8}}
:is(.zitem.an,.zan) .z-komitee .kp.l{animation-name:zkpl;animation-duration:5s}
:is(.zitem.an,.zan) .z-komitee .kp.r{animation-name:zkpr;animation-duration:5s}
:is(.zitem.an,.zan) .z-komitee .kp.m{animation-name:zkpm;animation-duration:5s}
:is(.zitem.an,.zan) .z-komitee .funk{animation-name:zfunkauf;animation-duration:5s}
/* Budget: Münze fällt, dreht sich und landet auf dem Stapel */
@keyframes zmuenze{0%{transform:translateY(-34px) scaleX(1);opacity:0}10%{opacity:1}18%{transform:translateY(-26px) scaleX(.12)}27%{transform:translateY(-18px) scaleX(1)}36%{transform:translateY(-10px) scaleX(.12)}46%{transform:translateY(0) scaleX(1);opacity:1}52%,100%{transform:translateY(8px) scaleX(1);opacity:0}}
@keyframes zstapel{0%,46%,58%,100%{transform:translateY(0)}51%{transform:translateY(2.5px)}}
@keyframes zklirr{0%,47%,72%,100%{opacity:0}52%,62%{opacity:.85}}
:is(.zitem.an,.zan) .z-budget .muenze{animation-name:zmuenze;animation-duration:3.4s;animation-timing-function:cubic-bezier(.45,0,.75,.6)}
:is(.zitem.an,.zan) .z-budget .stapel{animation-name:zstapel;animation-duration:3.4s}
:is(.zitem.an,.zan) .z-budget .klirr{animation-name:zklirr;animation-duration:3.4s}
/* Anfrage: Flieger kommt rein, segelt und fliegt davon */
@keyframes zflieg{0%{transform:translate(-20px,16px);opacity:0}16%{transform:translate(0,0);opacity:1}32%{transform:translate(2px,-4px) rotate(-2deg)}48%{transform:translate(0,0)}62%{transform:translate(3px,-2px) rotate(1deg)}74%{transform:translate(0,0);opacity:1}92%,100%{transform:translate(30px,-24px);opacity:0}}
@keyframes zspur{0%,8%{opacity:0}20%,74%{opacity:.7}88%,100%{opacity:0}}
:is(.zitem.an,.zan) .z-anfrage .flieger{animation-name:zflieg;animation-duration:4.6s}
:is(.zitem.an,.zan) .z-anfrage .spur{animation-name:zspur;animation-duration:4.6s}
/* Call: Hörer klingelt, Wellen gehen raus */
@keyframes zkling{0%,34%,100%{transform:rotate(0)}3%,11%,19%,27%{transform:rotate(-11deg)}7%,15%,23%{transform:rotate(11deg)}31%{transform:rotate(5deg)}}
@keyframes zwelle{0%,100%{opacity:0}10%,30%{opacity:.85}42%{opacity:0}}
:is(.zitem.an,.zan) .z-call .hoerer{animation-name:zkling;animation-duration:3s;animation-timing-function:linear}
:is(.zitem.an,.zan) .z-call .welle{animation-name:zwelle;animation-duration:3s}
:is(.zitem.an,.zan) .z-call .w2{animation-delay:1.45s}
:is(.zitem.an,.zan) .z-call .w3{animation-delay:1.6s}
/* Besichtigung: Auge schaut links, rechts und blinzelt */
@keyframes ziris{0%,8%,70%,100%{transform:translateX(0)}18%,32%{transform:translateX(-16px)}44%,58%{transform:translateX(16px)}}
@keyframes zblinz{0%,76%,84%,100%{transform:scaleY(1)}80%{transform:scaleY(.08)}}
@keyframes zstrahl{0%,80%,100%{opacity:0}86%,94%{opacity:.8}}
:is(.zitem.an,.zan) .z-besicht .iris{animation-name:ziris;animation-duration:5.2s}
:is(.zitem.an,.zan) .z-besicht .lid{animation-name:zblinz;animation-duration:5.2s;animation-timing-function:linear}
:is(.zitem.an,.zan) .z-besicht .strahl{animation-name:zstrahl;animation-duration:5.2s}
/* Specials: Sterne funkeln nacheinander */
@keyframes zstern{0%,40%,100%{transform:scale(1) rotate(0)}14%{transform:scale(1.3) rotate(25deg)}28%{transform:scale(.85) rotate(-6deg)}}
@keyframes zblink{0%,100%{opacity:0}20%,40%{opacity:.85}}
:is(.zitem.an,.zan) .z-special .stern{animation-name:zstern;animation-duration:2.8s}
:is(.zitem.an,.zan) .z-special .s2{animation-delay:2.2s}
:is(.zitem.an,.zan) .z-special .s3{animation-delay:2.7s}
:is(.zitem.an,.zan) .z-special .funk{animation-name:zblink;animation-duration:1.4s}
/* Vertrag: Stift setzt die Unterschrift */
.zsvg .stift{transform:translate(72px,98px)}
.zsvg .sig{stroke-dashoffset:100}
@keyframes zstift{0%,100%{transform:translate(74px,100px) rotate(0)}8%{transform:translate(32px,92px)}16%{transform:translate(37px,86px)}22%{transform:translate(41px,92px)}30%{transform:translate(46px,95px)}38%{transform:translate(50px,91px)}44%{transform:translate(54px,87px)}50%{transform:translate(58px,91px)}57%{transform:translate(62px,92px)}64%{transform:translate(68px,88px)}74%{transform:translate(70px,86px) rotate(-8deg)}86%{transform:translate(74px,100px) rotate(0)}}
@keyframes zsig{0%,8%{stroke-dashoffset:100;opacity:1}64%,84%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
:is(.zitem.an,.zan) .z-vertrag .stift{animation-name:zstift;animation-duration:4.6s;animation-timing-function:linear}
:is(.zitem.an,.zan) .z-vertrag .sig{animation-name:zsig;animation-duration:4.6s;animation-timing-function:linear}
/* Tickets: der Abschnitt wird abgerissen und kommt wieder */
.zsvg .abriss{transform-origin:0 0}
@keyframes zriss{0%,30%{transform:rotate(0) translate(0,0);opacity:1}40%{transform:rotate(9deg) translate(1px,0);opacity:1}52%{transform:rotate(26deg) translate(8px,22px);opacity:0}53%,82%{transform:rotate(0) translate(0,0);opacity:0}96%,100%{transform:rotate(0) translate(0,0);opacity:1}}
:is(.zitem.an,.zan) .z-ticket .abriss{animation-name:zriss;animation-duration:4.2s}
/* Programm: Mikro wippt im Takt, Schall geht raus */
@keyframes zwipp{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes zbeat{0%,100%{opacity:0}25%,45%{opacity:.85}70%{opacity:0}}
:is(.zitem.an,.zan) .z-programm .mikro{animation-name:zwipp;animation-duration:1.6s}
:is(.zitem.an,.zan) .z-programm .welle{animation-name:zbeat;animation-duration:1.6s}
:is(.zitem.an,.zan) .z-programm .w2{animation-delay:1.55s}
/* Gäste und Sitzplan: die Plätze füllen sich nacheinander */
@keyframes zplatz{0%{transform:scale(0);opacity:0}8%{transform:scale(1.25);opacity:1}12%,82%{transform:scale(1);opacity:.7}92%,100%{transform:scale(0);opacity:0}}
:is(.zitem.an,.zan) .z-gaeste .platz{animation-name:zplatz;animation-duration:5.6s;animation-delay:calc(1.3s + var(--i) * .3s)}
/* Abend: Discokugel schwingt, dreht sich und glitzert */
.zsvg .kugel{transform-origin:60px 2px}
@keyframes zschwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes zdrehen{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.12)}}
@keyframes zglanz{0%,100%{transform:scale(0) rotate(0);opacity:0}15%{transform:scale(1.4) rotate(45deg);opacity:1}35%{transform:scale(0) rotate(90deg);opacity:0}}
@keyframes zstrahlwechsel{0%,100%{opacity:.1}25%,45%{opacity:.85}}
:is(.zitem.an,.zan) .z-abend .kugel{animation-name:zschwing;animation-duration:4.4s}
:is(.zitem.an,.zan) .z-abend .meri{animation-name:zdrehen;animation-duration:2.2s;animation-timing-function:linear}
:is(.zitem.an,.zan) .z-abend .glanz{animation-name:zglanz;animation-duration:2.4s}
:is(.zitem.an,.zan) .z-abend .g2{animation-delay:2.5s}
:is(.zitem.an,.zan) .z-abend .strahl{animation-name:zstrahlwechsel;animation-duration:1.8s}
:is(.zitem.an,.zan) .z-abend .r2{animation-delay:2.2s}
@media (prefers-reduced-motion:reduce){:is(.zitem.an,.zan) .zsvg *{animation:none!important}.zsvg .sig{stroke-dashoffset:0}}

/* ================= Abireisen: Flughafen ================= */
/* Abflugtafel mit Fallblattanzeige */
#abflug{padding-top:clamp(50px,6vw,84px)}
#abflug .back{margin-bottom:28px}
.tafel{background:#0E0D0B;border:1px solid var(--line);border-radius:22px;padding:clamp(12px,2vw,26px);
  box-shadow:inset 0 0 0 6px #171613,0 30px 60px -30px rgba(0,0,0,.7)}
.tkopf{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:6px 10px 16px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}
.tabflug{display:flex;align-items:center;gap:12px;font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.3vw,32px);color:var(--gold);letter-spacing:.04em;line-height:1}
.tabflug i{font-style:normal;color:var(--muted-2);font-size:.55em;letter-spacing:.22em}
.tabflug svg{width:1.05em;height:1.05em;fill:var(--gold)}
.tabflug svg path+path{fill:none;stroke:var(--gold);stroke-width:1.6}
.tuhr{font-family:var(--display);font-size:clamp(20px,2.2vw,30px);color:#FFE9C0;letter-spacing:.1em;background:#1D1B18;padding:4px 12px 3px;border-radius:7px;line-height:1.1}
.trow{display:grid;grid-template-columns:150px minmax(0,1fr) 110px 170px;gap:18px;align-items:center;padding:13px 10px;border-radius:12px;color:inherit;text-decoration:none;transition:background .25s}
.trow + .trow{border-top:1px solid var(--line-soft)}
.trow.thead{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);font-weight:700;padding-block:10px}
a.trow{cursor:pointer}
a.trow:hover,a.trow:focus-visible{background:rgba(224,174,94,.08)}
.fl{display:inline-block;width:.74em;height:1.24em;line-height:1.28em;margin-right:.07em;text-align:center;vertical-align:middle;
  font-family:var(--display);color:#F6EEDD;background:linear-gradient(#2C2925 0 50%,#211F1B 50% 100%);border-radius:.12em;position:relative;
  box-shadow:0 1px 0 #000}
.fl::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.8)}
.fl.kl{animation:klapp .08s linear}
@keyframes klapp{50%{transform:scaleY(.08)}}
.tziel{font-size:clamp(17px,2.1vw,31px);white-space:nowrap;overflow:hidden}
.tflug,.tc{font-size:clamp(13px,1.35vw,19px);white-space:nowrap}
.tc .fl,.trow.frei .tziel .fl{color:var(--gold)}
.tstatus{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#FFE9C0}
.tstatus i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.tstatus.blink i{animation:tblink 1.1s steps(1) infinite}
@keyframes tblink{50%{opacity:.12}}
.trow.frei .tstatus{color:var(--muted)}
.trow.frei .tstatus i{background:var(--muted-2);box-shadow:none}
@media (max-width:760px){
  .trow{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-inline:6px}
  .trow > .tflug,.trow > .tc,.thead span:nth-child(1),.thead span:nth-child(3){display:none}
  .tziel{font-size:3.7vw}
  .tstatus{font-size:9.5px;letter-spacing:.12em;gap:7px}
}

/* Bordkarten */
.paesse{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px)}
@media (max-width:920px){.paesse{grid-template-columns:1fr}}
.pass{--stub:clamp(110px,10vw,140px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);height:100%;
  background:#FFF9EE;color:#17150F;border-radius:18px;box-shadow:0 18px 40px -22px rgba(23,21,15,.6);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;outline:none;scroll-margin-top:90px}
.pass::before,.pass::after{content:"";position:absolute;right:calc(var(--stub) - 13px);width:26px;height:26px;border-radius:50%;background:var(--gold);z-index:3}
.pass::before{top:-13px}.pass::after{bottom:-13px}
.pass:hover,.pass:focus-visible{transform:translateY(-6px) rotate(-.7deg);box-shadow:0 30px 50px -24px rgba(23,21,15,.7)}
.pass.blitz{animation:pblitz 1.6s ease}
@keyframes pblitz{0%,100%{box-shadow:0 18px 40px -22px rgba(23,21,15,.6)}25%,55%{box-shadow:0 0 0 5px #17150F,0 18px 40px -22px rgba(23,21,15,.6)}}
.pmain{padding:0 0 22px;min-width:0;display:flex;flex-direction:column}
.pkopf{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#17150F;color:#FFF6E4;padding:0 18px;height:44px;border-radius:18px 0 0 0}
.pkopf b{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.3em;font-size:13px;white-space:nowrap}
.pkopf b em{font-style:normal;color:var(--gold)}
.pkopf span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:rgba(255,246,228,.72);white-space:nowrap}
.pkopf span i{font-style:normal;color:rgba(255,246,228,.4);margin-left:6px}
.pfoto{height:clamp(130px,12vw,176px);background-size:cover;background-position:center}
.pfoto.leer{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(-45deg,#F4E6CB 0 14px,#FBF1DE 14px 28px)}
.pfoto.leer span{font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,1.7vw,23px);color:rgba(23,21,15,.6);
  transform:rotate(-4deg);border:2px dashed rgba(23,21,15,.4);padding:8px 14px 7px;border-radius:10px;text-align:center}
.proute{display:flex;align-items:center;gap:12px;padding:16px 18px 8px}
.proute > div{display:flex;flex-direction:column;min-width:0}
.proute .ziel{text-align:right;align-items:flex-end;margin-left:auto}
.proute small,.pfelder small,.pstub small{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:rgba(23,21,15,.5)}
.proute b{font-family:var(--display);font-weight:400;font-size:clamp(36px,3.6vw,54px);line-height:1;letter-spacing:.02em}
.proute span{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pflieger{flex:1 1 auto;height:24px;min-width:40px;fill:#17150F;
  background:linear-gradient(90deg,rgba(23,21,15,.3) 50%,transparent 0) 0 50%/8px 1.5px repeat-x}
.pass:hover .pflieger,.pass:focus-visible .pflieger{animation:pflug 1.1s cubic-bezier(.3,.6,.2,1)}
@keyframes pflug{0%{transform:translateX(-26px);opacity:0}100%{transform:none;opacity:1}}
.pfelder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:8px 18px 14px;margin-bottom:14px;border-bottom:1px dashed rgba(23,21,15,.22)}
.pfelder span{display:block;font-weight:900;font-size:13.5px;line-height:1.3}
.ptext{padding:0 18px;font-size:14.5px;line-height:1.55;color:rgba(23,21,15,.8)}
.pbtn{margin:18px 18px 0;align-self:flex-start;background:#17150F;color:#FFF6E4;border-color:#17150F}
.pbtn:hover{background:#2E2B26;border-color:#2E2B26}
.pstub{position:relative;border-left:2px dashed rgba(23,21,15,.3);padding:60px 14px 22px;display:flex;flex-direction:column;gap:14px;
  background:#FFF2DA;border-radius:0 18px 18px 0;transform-origin:0 0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pstub::before{content:"";position:absolute;top:0;left:0;right:0;height:44px;background:#17150F;border-radius:0 18px 0 0}
.pstub b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.05;text-transform:uppercase}
.pcode{margin-top:auto;height:52px;opacity:.85;
  background:repeating-linear-gradient(90deg,#17150F 0 2px,transparent 2px 4px,#17150F 4px 7px,transparent 7px 9px,#17150F 9px 10px,transparent 10px 13px,#17150F 13px 16px,transparent 16px 17px)}
.pass:hover .pstub,.pass:focus-visible .pstub{transform:rotate(5deg) translate(4px,3px)}
.pass.frei .pstub b{color:#9C6F2A}
@media (max-width:560px){
  .pass{grid-template-columns:1fr}
  .pass::before,.pass::after{display:none}
  .pkopf{border-radius:18px 18px 0 0}
  .pstub{border-left:0;border-top:2px dashed rgba(23,21,15,.3);border-radius:0 0 18px 18px;flex-direction:row;flex-wrap:wrap;padding:16px 18px 18px;gap:12px 22px}
  .pstub::before{display:none}
  .pcode{flex:1 1 100%;height:34px}
  .pass:hover .pstub,.pass:focus-visible .pstub{transform:none}
  .pkopf span i{display:none}
}

/* Check-in mit den Zeitstrahl-Icons */
.rschritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
@media (max-width:820px){.rschritte{grid-template-columns:1fr}}
.rschritt{position:relative;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--card);padding:26px 24px 28px}
.rsicon{display:block;width:clamp(74px,7vw,92px);margin-bottom:16px}
.rsicon .zsvg *{stroke:var(--gold)}
.rsnr{position:absolute;top:20px;right:24px;font-family:var(--display);font-size:46px;line-height:1;color:rgba(224,174,94,.16)}
.rschritt h3{font-size:clamp(24px,2.3vw,32px);margin-bottom:10px}
.rschritt p{color:var(--muted);font-size:15.5px}

/* Startseite: Karte Abireisen zeigt Ente und Füße */
.duo a.card[href*="abireisen"] .ph{background-position:60% 80%}
.trow.thead .tc{font-size:inherit}
@media (max-width:760px){.tziel{font-size:4vw}}
/* Abireisen Kopf: Entenfoto, Ausschnitt so, dass Füße, Ente und etwas Himmel zu sehen sind */
#page-reisen > .hero .photo{background-position:60% 72%}
.pfoto{background-position:center 18%}
/* Abireisen: Erklärtext neben der Abflugtafel in zwei luftigen Absätzen */
#abflug .hd .sub{max-width:46ch}
#abflug .hd .sub p+p{margin-top:.9em}

/* Versalumlaute in Kompaktform: In der Anton stehen die Punkte von Ä, Ö, Ü weit über der Versalhöhe
   und stoßen bei engem Zeilenabstand in die Zeile darüber. Der Buchstabe wird darum leicht
   gestaucht, so sitzen die Punkte innerhalb der eigenen Zeile. Der Zeilenabstand bleibt gleich. */
.uml{display:inline-block;transform:scaleY(.86);transform-origin:50% 100%}

/* Weniger Leerraum zwischen den Abschnitten: Text soll schneller kommen.
   Goldene Abschnitte behalten den Zuschlag für die Schräge (3,4vw), sonst ragt die Kante in den Inhalt. */
section{padding-block:clamp(40px,4.6vw,66px)}
.slab{padding-block:calc(clamp(34px,3.6vw,52px) + 3.4vw)}
#wer{padding-block:calc(clamp(30px,3.4vw,50px) + 3.4vw) calc(clamp(44px,5vw,76px) + 3.4vw)}
#faqsec{padding-block:clamp(44px,5vw,72px)}
#haus{padding-top:clamp(30px,3.6vw,48px)}
#zeit{padding-top:clamp(30px,3.6vw,48px)}
#abflug{padding-top:clamp(32px,4vw,54px)}
#pass-3 .pfoto{background-position:center 60%}

/* Abireisen: Flugzeug auf der goldenen Fläche, im Strich der Discokugel. Es schaukelt im Flug,
   die Speedlines ziehen nach hinten weg, ein Wölkchen treibt vorbei. */
.fly.flugzeug svg{animation:none;overflow:visible}
.flugzeug .fz-jet{transform-box:fill-box;transform-origin:50% 60%;animation:fzflug 4.6s ease-in-out infinite}
@keyframes fzflug{0%,100%{transform:translate(0,0) rotate(-3deg)}25%{transform:translate(6px,-7px) rotate(-6deg)}55%{transform:translate(10px,-2px) rotate(-2deg)}80%{transform:translate(3px,4px) rotate(1deg)}}
.flugzeug .fz-speed path{stroke-dasharray:10 9;animation:fzspeed .9s linear infinite}
@keyframes fzspeed{to{stroke-dashoffset:19}}
.flugzeug .fz-wolke{animation:fzwolke 9s linear infinite}
@keyframes fzwolke{0%{transform:translateX(30px);opacity:0}15%{opacity:.45}80%{opacity:.45}100%{transform:translateX(-120px);opacity:0}}
@media (prefers-reduced-motion:reduce){.flugzeug .fz-jet,.flugzeug .fz-speed path,.flugzeug .fz-wolke{animation:none}}
/* Erster goldener Abschnitt unter dem Kopf (Locations, Abipartys, Komitee): Platz für die Schräge mitrechnen */
#haus{padding-top:calc(clamp(20px,2.2vw,32px) + 3.4vw)}
#zeit.slab{padding-top:calc(clamp(20px,2.2vw,32px) + 3.4vw)}
/* Süllberg: Kopfbild auf die beleuchtete Terrasse statt in den Himmel */
#loc-hero.kopf-suellberg{background-position:center 84%}
@media (max-width:620px){#loc-hero.kopf-suellberg{background-position:40% 84%}}

/* ================= Euer Bereich ================= */
/* Pille oben: kleiner Backstage-Pass am Band, der leicht schaukelt */
.frechts{display:flex;align-items:center;gap:10px}
.zugang{pointer-events:auto;display:flex;align-items:center;gap:9px;position:relative;
  border:1px solid rgba(224,174,94,.45);border-radius:999px;background:rgba(19,18,17,.5);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--text);text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:9px 18px 9px 13px;
  transition:background .3s,border-color .3s,color .3s}
.zugang svg{width:22px;height:22px;overflow:visible;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.zugang .karte{transform-box:view-box;transform-origin:12px 6px;animation:zschwing 6s ease-in-out infinite}
@keyframes zschwing{0%,72%,100%{transform:rotate(0)}78%{transform:rotate(12deg)}84%{transform:rotate(-9deg)}90%{transform:rotate(5deg)}95%{transform:rotate(-2deg)}}
.zugang:hover{border-color:var(--gold);background:rgba(224,174,94,.12)}
.zugang:hover .karte{animation:zschwingh 1.1s ease-in-out}
@keyframes zschwingh{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}55%{transform:rotate(-10deg)}80%{transform:rotate(4deg)}}
.zugang i{display:none;position:absolute;top:6px;left:28px;width:7px;height:7px;border-radius:50%;background:#7BD88F;box-shadow:0 0 8px #7BD88F}
.zugang.drin i{display:block}
.zugang.hier{background:var(--gold);color:#17150F;border-color:var(--gold)}
.zugang.hier svg{stroke:#17150F}
@media (max-width:640px){.zugang span{display:none}.zugang{padding:10px 11px}}
@media (prefers-reduced-motion:reduce){.zugang .karte{animation:none}}
.overlay .bot .obereich{color:var(--gold)}

/* Gemeinsam: Pass am Band */
.blpass,.bpass{position:relative;display:flex;flex-direction:column;align-items:center}
.blband,.bpband{width:200px;height:auto;margin-bottom:-14px;position:relative;z-index:1}
.blband path,.bpband path{fill:none;stroke:var(--gold);stroke-width:6;stroke-linejoin:round}
.blband path+path,.bpband path+path{stroke:#C6924A;stroke-width:3;opacity:.7}
.blkarte,.bpkarte{position:relative;width:min(400px,100%);background:#FFF9EE;color:#17150F;border-radius:22px;
  padding:34px 26px 24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transform-origin:50% -60px;
  animation:passschwing 7s ease-in-out infinite}
@keyframes passschwing{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@media (prefers-reduced-motion:reduce){.blkarte,.bpkarte{animation:none}}
.blloch{position:absolute;top:14px;left:50%;width:56px;height:9px;margin-left:-28px;border-radius:9px;background:#1B1A18;box-shadow:inset 0 2px 3px rgba(0,0,0,.6)}
.blkopf{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:2px dashed rgba(23,21,15,.25);padding:10px 0 14px;margin-bottom:18px}
.blkopf b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3vw,40px);line-height:1;letter-spacing:.02em}
.blkopf span{font-size:10.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#9C6F2A}
.blcode{display:block;height:44px;margin-top:22px;opacity:.85;
  background:repeating-linear-gradient(90deg,#17150F 0 2px,transparent 2px 4px,#17150F 4px 7px,transparent 7px 9px,#17150F 9px 10px,transparent 10px 13px,#17150F 13px 16px,transparent 16px 17px)}

/* Anmeldung */
.blogin{min-height:100svh;display:flex;align-items:center;padding-top:clamp(120px,12vw,160px)}
.blwrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:center}
@media (max-width:860px){.blwrap{grid-template-columns:1fr}}
.bltext h1{font-size:clamp(50px,7.4vw,120px);margin:14px 0 22px}
.bltext p{color:var(--muted);max-width:44ch;font-size:16.5px}
.blneu{display:inline-flex;gap:8px;margin-top:22px;color:var(--gold);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(224,174,94,.4);padding-bottom:3px}
.blneu span{transition:transform .3s}.blneu:hover span{transform:translateX(4px)}
.blform{display:flex;flex-direction:column;gap:6px}
.blform label{font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:rgba(23,21,15,.6);margin-top:6px}
.blform input:not([type=checkbox]){font:inherit;font-size:16px;color:#17150F;background:#F3E9D6;border:1px solid rgba(23,21,15,.18);border-radius:12px;padding:12px 14px;outline:none}
.blform input:focus{border-color:#17150F}
.blform .blmerken{display:flex;gap:8px;align-items:center;text-transform:none;letter-spacing:0;font-size:14px;font-weight:400;color:#17150F}
.blform .btn{margin-top:12px}
.blvergessen{align-self:center;margin-top:8px;font-size:13px;color:rgba(23,21,15,.65)}
.blfehler,.blok,.blhinweis{font-size:14px;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.blfehler{background:#F6DCD5;color:#7A2414}.blok{background:#E5F1DF;color:#24502A}.blhinweis{background:#F3E9D6}

/* Abikontakt-Ansicht */
.bteam{padding-top:clamp(130px,13vw,170px);min-height:70vh}
.bteam h1{font-size:clamp(40px,6vw,90px)}
.bteamliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.bteamliste a{display:block;background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:18px 20px;color:var(--text);text-decoration:none;transition:border-color .3s}
.bteamliste a:hover{border-color:var(--gold)}
.bteamliste b{display:block;font-size:17px}.bteamliste span{color:var(--muted);font-size:14px}
.bvorschau{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:5;background:var(--gold);color:#17150F;border-radius:999px;padding:7px 16px;font-size:13px;white-space:nowrap}
.bvorschau a{color:#17150F;font-weight:700}
@media (max-width:760px){.bvorschau{white-space:normal;width:calc(100% - 32px);text-align:center;border-radius:14px}}

/* Kopf: Pass und Countdown */
.bkopf{padding-top:clamp(150px,14vw,190px)}
.bkwrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
@media (max-width:860px){.bkwrap{grid-template-columns:1fr}}
.bpkarte h1{font-size:clamp(34px,3.6vw,54px);line-height:.95;margin-bottom:18px}
.bpkarte dl{margin:0;display:grid;gap:10px}
.bpkarte dt{font-size:9.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:rgba(23,21,15,.5)}
.bpkarte dd{margin:0;font-weight:700;font-size:15px}
.bczahl{font-size:clamp(110px,15vw,230px);line-height:.85;color:var(--gold);margin:10px 0 6px;text-shadow:0 0 40px rgba(224,174,94,.25)}
.bcunter{font-size:18px;color:var(--text)}
.bhinweis{margin-top:22px;border:1px solid rgba(224,174,94,.4);border-left:4px solid var(--gold);border-radius:14px;padding:14px 16px;background:rgba(224,174,94,.06);max-width:52ch}
.bhinweis b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.bhinweis p{color:var(--muted);font-size:15px}
.bcknoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.bcansprech{margin-top:16px;color:var(--muted);font-size:14px}.bcansprech b{color:var(--text)}

/* Stand */
.bprog{min-width:min(320px,100%)}
.bprog b{font-family:var(--display);font-weight:400;font-size:clamp(44px,5vw,72px);line-height:1;display:block}
.bprog span{display:block;height:10px;border-radius:10px;background:rgba(23,21,15,.15);overflow:hidden;margin:10px 0 6px}
.bprog span i{display:block;height:100%;background:#17150F;border-radius:10px}
.bprog small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(23,21,15,.6)}
.bschritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.bschritte li{display:flex;flex-direction:column;gap:6px;border:1px solid rgba(23,21,15,.2);border-radius:14px;padding:14px 16px;background:rgba(255,249,238,.25)}
.bschritte li.ja{background:rgba(23,21,15,.06);border-color:rgba(23,21,15,.12)}
.bschritte li.ja b{opacity:.55}
.bsk{width:26px;height:26px;border-radius:50%;border:2px solid #17150F;display:flex;align-items:center;justify-content:center}
.bschritte li.ja .bsk{background:#17150F}
.bsk svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bschritte b{font-size:15px}
.bschritte small{font-size:12px;color:rgba(23,21,15,.65)}
.braten-h{font-size:clamp(26px,2.6vw,36px);margin:clamp(30px,3.6vw,46px) 0 14px}
.braten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:820px){.braten{grid-template-columns:1fr}}
.brate{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto;gap:6px 16px;align-items:end;background:#FFF9EE;border-radius:16px;padding:16px 18px;box-shadow:0 14px 30px -20px rgba(23,21,15,.6)}
.brnr{grid-row:1/3;font-family:var(--display);font-size:52px;line-height:.9;color:rgba(23,21,15,.25)}
.brate small{display:block;font-size:9.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:rgba(23,21,15,.5)}
.brate b{font-family:var(--display);font-weight:400;font-size:24px}
.brate span{font-weight:700}
.brate em{grid-column:2/4;justify-self:start;font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;border:1.5px solid #17150F;border-radius:999px;padding:4px 10px}
.brate.ja em{background:#17150F;color:var(--gold)}
.brate.spaet em{background:#8A2A1E;border-color:#8A2A1E;color:#FFF3E8}
.brate.ja .brnr{color:#17150F}
.bzahl{margin-top:16px;border:1.5px solid rgba(23,21,15,.3);border-radius:16px;padding:14px 18px;max-width:70ch}
.bzahl b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}

/* Gästeliste */
.gl{background:var(--card);border:1px solid var(--line-soft);border-radius:22px;padding:clamp(16px,2.4vw,28px)}
.glkopf{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.glzahlen{display:flex;gap:clamp(18px,3vw,36px);flex-wrap:wrap}
.glzahlen b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--gold)}
.glzahlen small{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
.glstatus{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--muted)}
.glstatus[data-s=eingereicht]{border-color:var(--gold);color:var(--gold)}
.glstatus[data-s=freigegeben]{background:#7BD88F;border-color:#7BD88F;color:#12301A}
.gltab{max-height:min(62vh,640px);overflow:auto;border-top:1px solid var(--line-soft)}
.glzeile{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px 40px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.glhead{position:sticky;top:0;background:var(--card);z-index:1;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700;padding:10px 0}
.glzeile input{width:100%;font:inherit;font-size:15px;color:var(--text);background:#1D1B18;border:1px solid var(--line-soft);border-radius:10px;padding:9px 11px;outline:none}
.glzeile input:focus{border-color:var(--gold)}
.glzeile input:disabled{opacity:.7}
.glweg{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-soft);background:none;color:var(--muted);font-size:18px;cursor:pointer}
.glweg:hover{border-color:#C96A55;color:#E79A85}
.gl.gesperrt .glweg,.gl.gesperrt #gladd,.gl.gesperrt .glpaste,.gl.gesperrt #glsave,.gl.gesperrt #glsend{display:none}
.glleer{color:var(--muted);padding:18px 0;font-size:15px}
.glaktion{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.glspacer{flex:1}
.glmeldung{font-size:13px;color:var(--muted)}
.glpaste{flex-basis:100%;order:5;color:var(--muted);font-size:14px}
.glpaste summary{cursor:pointer;color:var(--gold);font-weight:700;margin:6px 0}
.glpaste textarea{width:100%;font:inherit;font-size:14px;color:var(--text);background:#1D1B18;border:1px solid var(--line-soft);border-radius:12px;padding:10px 12px;margin:8px 0}
@media (max-width:640px){.glzeile{grid-template-columns:minmax(0,1fr) 64px 64px 36px;gap:6px}.glzeile input{padding:8px;font-size:14px}}

/* Unterlagen und Abikasse */
.bkarten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.bkarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bkarten{grid-template-columns:1fr}}
.bkarte{background:#FFF9EE;border-radius:18px;padding:22px 20px 24px;box-shadow:0 18px 40px -26px rgba(23,21,15,.6);display:flex;flex-direction:column;gap:10px}
.bkicon{display:block;width:64px}
.bkarte h3{font-size:clamp(22px,2vw,28px)}
.bkarte p{font-size:14.5px;color:rgba(23,21,15,.8)}
.bkarte .btn{align-self:flex-start;margin-top:auto}
.bkleer{color:rgba(23,21,15,.55)!important;font-style:italic}
.bdocs,.bspecials{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bdocs a{color:#17150F;font-weight:700}
.bspecials li{padding-left:16px;position:relative;font-weight:700;font-size:14.5px}
.bspecials li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--gold-deep)}
.btipps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
@media (max-width:820px){.btipps{grid-template-columns:1fr}}
.btipp{position:relative;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--card);padding:26px 24px 28px}
.btipp h3{font-size:clamp(22px,2.2vw,30px);margin-bottom:10px;padding-right:50px}
.btipp p{color:var(--muted);font-size:15.5px}
/* Login-Pass pendelt nur einmal ein, damit man in Ruhe tippen kann. Der Pass in der Übersicht hält bei Berührung an. */
.blkarte{animation:passein 1.8s cubic-bezier(.3,.7,.3,1) both}
@keyframes passein{0%{transform:rotate(-7deg)}35%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}100%{transform:rotate(0)}}
.bpkarte:hover,.bpkarte:focus-within{animation-play-state:paused}
.cta-dock[hidden]{display:none}
.blform .blmerken{justify-content:flex-start;margin-top:12px}
.blmerken input{width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:#17150F}
@media (max-width:640px){.glhead{font-size:9px;letter-spacing:.06em}}

/* Euer Bereich, Phase 1: Vertragsdaten */
.bwa svg{width:18px;height:18px;fill:currentColor}
.bteamliste em{display:block;margin-top:6px;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bteamknoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.vform{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(18px,3vw,34px);align-items:start}
@media (max-width:960px){.vform{grid-template-columns:1fr}}
.vteil{border:1px solid var(--line-soft);border-radius:20px;background:var(--card);padding:clamp(16px,2.2vw,26px);margin:0 0 16px;min-width:0}
.vteil legend{display:flex;align-items:center;gap:10px;font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,1.9vw,26px);padding:0 8px;margin-left:-8px}
.vteil legend .vnr{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#17150F;font-size:16px}
.vhilfe{color:var(--muted);font-size:14.5px;margin:4px 0 14px;max-width:70ch}
.vteil label{display:flex;flex-direction:column;gap:6px;font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.vteil input:not([type=checkbox]):not([type=radio]),.vteil textarea{font:inherit;font-size:15.5px;letter-spacing:0;text-transform:none;color:var(--text);background:#1D1B18;border:1px solid var(--line-soft);border-radius:12px;padding:11px 13px;outline:none;width:100%}
.vteil input:focus,.vteil textarea:focus{border-color:var(--gold)}
.vteil input:disabled,.vteil textarea:disabled{opacity:.7}
.vgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vgrid2 .breit{grid-column:1/-1}
@media (max-width:700px){.vgrid3,.vgrid2{grid-template-columns:1fr}}
.vteil > label + label{margin-top:12px}
.vpartner{border-top:1px dashed var(--line);padding-top:14px;margin-top:14px}
.vpartner:first-of-type{border-top:0;padding-top:0;margin-top:0}
.vpnr{display:block;font-size:14px;margin-bottom:10px}.vpnr small{color:var(--muted);font-weight:400}
.valter{display:block;color:#E79A85;font-size:13px;margin-top:8px}
.vmehr{margin-top:14px}
.vextras{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.vx{flex-direction:row!important;align-items:center;gap:10px!important;cursor:pointer;border:1px solid var(--line-soft);border-radius:14px;padding:12px 14px;background:#1D1B18;transition:border-color .25s,background .25s;text-transform:none!important;letter-spacing:0!important}
.vx input{width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:var(--gold)}
.vx b{flex:1;font-size:14.5px;color:var(--text);font-weight:700}
.vx span{font-size:13.5px;color:var(--gold);font-weight:700;white-space:nowrap}
.vx.an{border-color:var(--gold);background:rgba(224,174,94,.09)}
.vpflicht{margin-top:14px;border-left:3px solid #E79A85;padding:8px 12px;background:rgba(231,154,133,.08);color:#F2C2B4;font-size:14px;border-radius:0 10px 10px 0}
.vrechts{position:sticky;top:110px}
@media (max-width:960px){.vrechts{position:static}}
.vsumme{background:#FFF9EE;color:#17150F;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.vsumme .tagline{color:#9C6F2A}
.vsumme dl{margin:4px 0 0;display:grid;gap:8px}
.vsumme dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(23,21,15,.2);padding-bottom:8px}
.vsumme dt{font-size:14px;color:rgba(23,21,15,.7)}
.vsumme dd{margin:0;font-weight:900}
.vsumme .vgross dd{font-family:var(--display);font-weight:400;font-size:30px;line-height:1}
.vmin{font-size:13px;color:rgba(23,21,15,.7)}
.vmuster{color:#17150F;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(23,21,15,.35);align-self:flex-start;padding-bottom:2px}
.vsumme .glstatus{align-self:flex-start;color:rgba(23,21,15,.7);border-color:rgba(23,21,15,.25)}
.vsumme .glstatus[data-s=eingereicht],.vsumme .glstatus[data-s=geprueft]{background:#17150F;color:var(--gold);border-color:#17150F}
.vsumme .btn{width:100%}
.vsumme .btn.ghost{color:#17150F;border-color:rgba(23,21,15,.4)}
.vsumme .btn.ghost:hover{background:rgba(23,21,15,.06)}
.vsumme .vhilfe,.vsumme .glmeldung{color:rgba(23,21,15,.7)}
.bkarte.zu{opacity:.75;background:rgba(255,249,238,.6)}
.bkschloss svg{width:30px;height:30px;fill:none;stroke:#17150F;stroke-width:1.8;stroke-linecap:round}

/* Euer Bereich, Phase 2: Tischplan und Belegung */
.tplan{background:var(--card);border:1px solid var(--line-soft);border-radius:22px;padding:clamp(14px,2vw,22px);margin-bottom:16px}
.tpkopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.tpkopf b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(20px,2vw,26px)}
.tpkopf > span{font-size:12px;color:var(--muted)}
.tpbilder{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tpbild{display:block;padding:0;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:#fff;cursor:zoom-in;transition:transform .3s,border-color .3s}
.tpbild:hover{transform:translateY(-3px);border-color:var(--gold)}
.tpbild img{display:block;width:100%;height:auto}
.tpdialog{border:0;padding:0;border-radius:16px;max-width:min(96vw,1600px);max-height:94vh;background:#fff;overflow:auto}
.tpdialog::backdrop{background:rgba(10,9,8,.82)}
.tpdialog img{display:block;width:100%;height:auto;min-width:900px}
.tpzu{position:sticky;top:10px;float:right;margin:10px;width:42px;height:42px;border-radius:50%;border:0;background:#17150F;color:#fff;font-size:24px;cursor:pointer;z-index:2}
.gltische{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.gt{display:inline-flex;align-items:baseline;gap:6px;font-size:12px;color:var(--muted);border:1px solid var(--line-soft);border-radius:999px;padding:5px 10px}
.gt b{color:var(--text);font-size:12.5px}
.gt.teil{border-color:rgba(224,174,94,.45);color:var(--gold)}
.gt.genau{background:rgba(123,216,143,.12);border-color:#7BD88F;color:#9BE5AB}
.gt.voll{background:rgba(231,154,133,.14);border-color:#E79A85;color:#F2B4A2}
.gt.fremd{border-style:dashed;border-color:#E79A85;color:#F2B4A2}
.glzeile input.falsch{border-color:#E79A85;border-style:dashed}
.glzeile input.ueber{border-color:#E79A85;background:rgba(231,154,133,.1)}

/* Euer Bereich, Phase 2: DJ-Sheet auf Gold */
.djwer{display:flex;align-items:center;gap:18px;background:#17150F;color:var(--text);border-radius:20px;padding:16px 22px;margin-bottom:16px;max-width:560px}
.djwer .bkicon{width:56px}
.djwer .bkicon .zsvg *{stroke:var(--gold)}
.djwer small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:900}
.djwer b{display:block;font-size:30px;line-height:1.05}
.djwer a,.djwer span{color:var(--muted)}
.djform .vteil{background:#FFF9EE;border-color:transparent;color:#17150F}
.djform .vteil legend{color:#17150F}
.djform .vteil label{color:rgba(23,21,15,.6)}
.djform .vteil input:not([type=radio]),.djform .vteil textarea{background:#F3E9D6;color:#17150F;border-color:rgba(23,21,15,.18)}
.djform .vteil input:focus,.djform .vteil textarea:focus{border-color:#17150F}
.djgenres{display:grid;gap:6px}
.djg{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(70px,110px));gap:6px;align-items:center;padding:4px 0;border-bottom:1px solid rgba(23,21,15,.08)}
.djghead{font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:rgba(23,21,15,.5);border:0}
.djghead span{text-align:center}
.djg b{font-size:15px}
.djg label{flex-direction:row!important;justify-content:center;cursor:pointer}
.djg input{position:absolute;opacity:0;pointer-events:none}
.djg label span{display:block;width:100%;text-align:center;padding:8px 6px;border-radius:999px;border:1.5px solid rgba(23,21,15,.2);font-size:11.5px;font-weight:900;letter-spacing:.06em;color:rgba(23,21,15,.55);text-transform:none;transition:all .2s}
.djg label:hover span{border-color:#17150F;color:#17150F}
.djg input:checked + span{background:#17150F;border-color:#17150F;color:var(--gold)}
.djg input:focus-visible + span{outline:2px solid #17150F;outline-offset:2px}
@media (max-width:640px){.djg{grid-template-columns:1fr repeat(3,1fr)}.djg b{grid-column:1/-1;font-size:14px}.djghead span:first-child{display:none}.djghead{grid-template-columns:repeat(3,1fr)}}
.djform .glaktion .glstatus{color:rgba(23,21,15,.65);border-color:rgba(23,21,15,.3)}
.djform .glaktion .glstatus[data-s=eingereicht]{background:#17150F;color:var(--gold);border-color:#17150F}
.djform .glmeldung{color:rgba(23,21,15,.7)}
.djform .btn.ghost{color:#17150F;border-color:rgba(23,21,15,.4)}
#bkasse .btipp{background:#17150F}
.vteil legend .vlt{font-weight:400}

/* Euer Bereich: Saalplan als Zeichnung (aus dem Gäste-Briefing), Tische färben sich mit der Gästeliste */
.saal{background:var(--card);border:1px solid var(--line-soft);border-radius:22px;padding:clamp(14px,2vw,22px);margin-bottom:16px}
.saalhinweis{display:flex;gap:12px;align-items:flex-start;background:rgba(224,174,94,.1);border:1px solid rgba(224,174,94,.4);border-radius:14px;padding:12px 16px;margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--text)}
.saalhinweis b{color:var(--gold)}
.saalhinweis .spmk{flex:none;width:12px;height:12px;border-radius:50%;background:#C9973F;margin-top:5px;box-shadow:0 0 0 4px rgba(201,151,63,.22)}
.saalplaene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:900px){.saalplaene{grid-template-columns:1fr}}
.splan{margin:0}
.splan figcaption{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:900;color:var(--muted);margin:0 0 7px 4px}
.spgross{display:block;width:100%;padding:8px;border:1px solid var(--line-soft);border-radius:14px;background:#FBF8F2;cursor:zoom-in;transition:border-color .3s,transform .3s}
.spgross:hover{border-color:var(--gold);transform:translateY(-2px)}
.spsvg{display:block;width:100%;height:auto}
.spraum{fill:#F1ECE2;stroke:#1A1A1A;stroke-width:3.4;stroke-linejoin:miter}
.spsaeule{fill:#2A2724}
.spfn{fill:#F0E3CB}
.spgal{fill:#F8F5EF;stroke:#DCD5C7;stroke-width:1.3}
.spsvg .fl,.spsvg .gl{font-family:var(--ui),sans-serif;font-weight:700;text-anchor:middle;dominant-baseline:central;letter-spacing:.3em;text-transform:uppercase}
.spsvg .fl{fill:#C9973F;font-size:17px}
.spsvg .gl{fill:#8E8981;font-size:18px}
.sptisch .spf{fill:#FDFBF6;stroke:#C9973F;stroke-width:2;transition:fill .35s,stroke .35s}
.sptisch .spi{fill:none;stroke:#E2C48F;stroke-width:.9}
.sptisch .spm{fill:#C9973F}
.sptisch .tn{font-family:var(--display),Impact,sans-serif;font-size:30px;fill:#1A1A1A;text-anchor:middle;dominant-baseline:central}
.sptisch .tb{font-family:var(--ui),sans-serif;font-weight:900;font-size:16.5px;fill:#8E8981;text-anchor:middle;dominant-baseline:central;letter-spacing:.04em}
.sptisch .tb.tbr{text-anchor:end;font-size:16px}
.sptisch.teil .spf{fill:#F6E7C9}
.sptisch.genau .spf{fill:#CFEBD3;stroke:#3E9A55}
.sptisch.genau .tb{fill:#2E7A43}
.sptisch.voll .spf{fill:#F7D3C8;stroke:#C4553A;stroke-width:3}
.sptisch.voll .tb{fill:#B0412A}
.sptisch.teil .tb{fill:#8A6420}
.sptisch.hinweis .spf{stroke:#C4553A;stroke-dasharray:7 6;stroke-width:3}
.splegende{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 4px 0;font-size:12.5px;color:var(--muted)}
.splegende span{display:inline-flex;align-items:center;gap:7px}
.splegende i{display:inline-block;flex:none}
.lg-t{width:15px;height:15px;border-radius:50%;background:#FDFBF6;border:2px solid #C9973F}
.lg-t.teil{background:#F6E7C9}
.lg-t.genau{background:#CFEBD3;border-color:#3E9A55}
.lg-t.voll{background:#F7D3C8;border-color:#C4553A}
.lg-t.abbau{position:relative}
.lg-t.abbau::after{content:"";position:absolute;right:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:#C9973F}
.lg-s{width:11px;height:11px;border-radius:50%;background:#2A2724;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.lg-f{width:20px;height:11px;border-radius:2px;background:#F0E3CB}
.saalwarn{margin:12px 0 0;padding:11px 15px;border-radius:12px;background:rgba(231,154,133,.12);border:1px dashed #E79A85;color:#F2B4A2;font-size:14px;line-height:1.5}
.spdialog{background:#FBF8F2}
.spdinhalt{padding:12px 16px 18px;min-width:min(1100px,94vw)}
.spdinhalt .spsvg{min-width:900px}
.spdinhalt h3{font-family:var(--display);font-weight:400;text-transform:uppercase;color:#17150F;font-size:22px;margin:4px 0 8px}
.glhead span:first-child{letter-spacing:.08em}

/* Euer Bereich: Fragen als Chat, wie auf der Komiteeseite */
#bfragen{background:var(--rail);margin-block:-2px}

/* Gästeliste und Saalplan nebeneinander: der Plan bleibt beim Eintippen stehen */
.glraster.mitplan{display:flex;flex-direction:column;gap:16px}
.glraster.mitplan .saal{margin-bottom:0}
@media (min-width:1100px){
  .glraster.mitplan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:start}
  .glraster.mitplan .gl{order:1}
  .glraster.mitplan .saal{order:2;position:sticky;top:92px;max-height:calc(100vh - 104px);overflow:auto;overscroll-behavior:contain}
  .glraster.mitplan .glzeile{grid-template-columns:minmax(0,1fr) 84px 84px 36px}
  .glraster.mitplan .glhead{top:-1px}
}
.saal .tpkopf{align-items:center}
.spgross{display:inline-flex;width:auto;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:12px;letter-spacing:.06em;cursor:zoom-in;transition:color .25s,border-color .25s}
.spgross:hover{transform:none;color:var(--gold);border-color:var(--gold)}
.saal .saalhinweis{font-size:13.5px;padding:10px 14px;margin-bottom:12px}
.spreiter{display:flex;gap:6px;margin:0 0 10px}
.spreit{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .25s}
.spreit i{font-style:normal;font-size:11px;font-weight:900;color:var(--gold)}
.spreit.on{background:var(--gold);border-color:var(--gold);color:#17150F}
.spreit.on i{color:#17150F}
.saalplaene{display:block}
.splan{background:#FBF8F2;border:1px solid var(--line-soft);border-radius:14px;padding:8px}
.splan[hidden]{display:none}
.sptisch{cursor:pointer}
.sptisch:hover .spf{stroke-width:3.5}
.sptisch.aktiv .spf{stroke:#17150F;stroke-width:4.5}
.sptisch.aktiv{animation:spaktiv 1.1s ease-in-out infinite}
@keyframes spaktiv{50%{opacity:.62}}
@media (prefers-reduced-motion:reduce){.sptisch.aktiv{animation:none}}
.sptipp{margin:9px 2px 0;font-size:12.5px;color:var(--muted-2,var(--muted))}
.saal .splegende{margin-top:8px;gap:6px 14px;font-size:12px}
.glzeile.aktiv input[data-f=t]{border-color:var(--gold)}
.sptipp.blink{animation:sptipp .9s ease 2}
@keyframes sptipp{50%{color:var(--gold)}}
.glraster.mitplan .gltische{display:none}

/* Musikwünsche: eine helle Karte, links Kontakt und Do's/Don'ts, rechts die Musikrichtungen */
.djkarte{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,2.6vw,40px);background:#FFF9EE;color:#17150F;border-radius:22px;padding:clamp(18px,2.4vw,30px);margin-bottom:16px}
@media (max-width:900px){.djkarte{grid-template-columns:1fr}}
.djlinks{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,28px);min-width:0}
.djblock{min-width:0}
.djh{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-family:var(--ui);font-weight:900;font-size:15px;letter-spacing:.02em;text-transform:none;color:#17150F}
.djh span{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#17150F;color:var(--gold);font-size:12px}
.djfelder{display:flex;flex-direction:column;gap:10px}
.djzwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:480px){.djzwei{grid-template-columns:1fr}}
.djkarte label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:rgba(23,21,15,.55)}
.djkarte input:not([type=radio]),.djkarte textarea{font:inherit;font-size:15px;letter-spacing:0;text-transform:none;color:#17150F;background:#F3E9D6;border:1px solid rgba(23,21,15,.14);border-radius:10px;padding:9px 12px;outline:none;width:100%;resize:vertical}
.djkarte input:focus,.djkarte textarea:focus{border-color:#17150F;background:#fff}
.djkarte .djgenres{gap:0}
.djkarte .djg{grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:6px 0;border-bottom:1px solid rgba(23,21,15,.08)}
.djkarte .djg:last-child{border-bottom:0}
.djkarte .djg b{font-size:14px;font-weight:700;line-height:1.3}
.djkarte .djghead{display:none}
.djkarte .djg label{display:contents}
.djkarte .djg{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,auto);align-items:center}
.djkarte .djg label span{width:auto;min-width:0;padding:5px 11px;border:0;border-radius:0;font-size:12px;font-weight:700;letter-spacing:.02em;color:rgba(23,21,15,.6);background:#F3E9D6;cursor:pointer}
.djkarte .djg label:nth-of-type(1) span{border-radius:999px 0 0 999px}
.djkarte .djg label:nth-of-type(3) span{border-radius:0 999px 999px 0}
.djkarte .djg label:nth-of-type(2) span{border-left:1px solid rgba(23,21,15,.1);border-right:1px solid rgba(23,21,15,.1)}
.djkarte .djg label:hover span{color:#17150F;background:#EADCC1}
.djkarte .djg input:checked + span{background:#17150F;color:var(--gold)}
@media (max-width:420px){.djkarte .djg{grid-template-columns:repeat(3,1fr);row-gap:6px}.djkarte .djg b{grid-column:1/-1}.djkarte .djg label span{text-align:center}}
.djform > .glaktion{margin-top:0}
.djkarte .djg{position:relative;column-gap:0}
.djkarte .djg b{padding-right:12px}
/* Kompakte Umlaute: Stauchung an der Grundlinie ansetzen, sonst rutscht der Buchstabe nach unten.
   Grundlinie im Kasten = halber Durchschuss + Oberlänge der Anton (1.18em, Unterlänge .33em). */
.uml{transform-origin:50% calc((1lh - 1.51em) / 2 + 1.18em)}
.djkarte .djg.djghead{display:none}
@media (max-width:900px){.djlinks{display:contents}.djlinks .djblock:last-child{order:3}.djrechts{order:2}}

/* ===== Musikwünsche als Mischpult (dunkel auf Gold) ===== */
.djform{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:16px;align-items:stretch}
.djform > .mixer,.djform > .djdos,.djform > .glaktion{grid-column:1/-1}
@media (max-width:900px){.djform{grid-template-columns:1fr}}
.djbox{background:#17150F;color:var(--text);border-radius:22px;padding:clamp(18px,2.2vw,28px);min-width:0;position:relative}
.djform .djh{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-family:var(--display);font-weight:400;font-size:clamp(20px,1.8vw,24px);letter-spacing:.01em;text-transform:uppercase;color:var(--text)}
.djform .djh span{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#17150F;font-family:var(--ui);font-weight:900;font-size:13px}
.djform label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.djform input:not([type=radio]),.djform textarea{font:inherit;font-size:15px;letter-spacing:0;text-transform:none;color:var(--text);background:#24211C;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px 13px;outline:none;width:100%;resize:vertical;transition:border-color .2s,background .2s}
.djform input:focus,.djform textarea:focus{border-color:var(--gold);background:#2B2721}
.djform textarea::placeholder,.djform input::placeholder{color:#6E6A63}
.djfelder{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:12px}
@media (max-width:700px){.djfelder{grid-template-columns:1fr}}
.djhinweis{margin:-2px 0 14px;font-size:14px;line-height:1.5;color:var(--muted)}
.djhinweis b{color:var(--gold)}

/* Euer DJ */
.djoben{display:flex}
.djoben .djwer{flex:1;max-width:none;margin:0;align-items:flex-start;background:#17150F;border-radius:22px;padding:clamp(18px,2.2vw,28px);gap:16px}
.djwer .bkicon{flex:none;width:58px}
.djwtext{min-width:0}
.djwer .djwtext b{display:block;font-size:clamp(28px,2.6vw,36px);line-height:1.05;margin:4px 0 6px;color:var(--text)}
.djwer .djtel{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:8px 14px;border-radius:999px;background:var(--gold);color:#17150F!important;font-weight:900;font-size:14px;text-decoration:none}
.djwer .djtel::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
.djwer.offen{background:repeating-linear-gradient(135deg,#17150F 0 14px,#1C1A15 14px 28px);outline:2px dashed rgba(224,174,94,.55);outline-offset:-8px}
.djwer.offen .bkicon{opacity:.55}
.djplatz i{font-style:normal;color:var(--gold);display:inline-block;animation:djfrage 2.4s ease-in-out infinite}
@keyframes djfrage{0%,100%{opacity:1}50%{opacity:.35}}
.djwer.offen p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.djplatz i{animation:none}}

/* Mischpult */
.mixer{background:linear-gradient(180deg,#1E1C18 0%,#121110 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(23,21,15,.25)}
.mixer::before,.mixer::after{content:"";position:absolute;top:14px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6A655C,#2A2724);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.mixer::before{left:14px}.mixer::after{right:14px}
.mxkopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-bottom:18px}
.mxkopf .djh{margin:0}
.mxkopf p{flex:1 1 320px;margin:0;font-size:14px;color:var(--muted)}
.mxzahl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:900}
.mxzahl b{color:var(--gold);font-size:15px}
.mxpult{display:flex;gap:10px;background:#0E0D0C;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px 14px 14px}
.mxskala{flex:none;display:flex;flex-direction:column;justify-content:space-between;height:156px;padding:0 4px;font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);text-align:right}
.mxskala span{line-height:1;transform:translateY(-50%)}
.mxskala span:first-child{transform:translateY(0)}
.mxskala span:last-child{transform:translateY(0)}
.mxkanaele{flex:1;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px}
@media (max-width:1180px){.mxkanaele{grid-template-columns:repeat(7,minmax(0,1fr));row-gap:18px}}
@media (max-width:560px){.mxskala{display:none}.mxkanaele{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kanal{--v:1;display:grid;grid-template-columns:1fr;justify-items:center;gap:8px;outline:none;border-radius:12px;padding:4px 0 6px;position:relative}
.kanal:focus-visible{box-shadow:0 0 0 2px var(--gold)}
.kanal + .kanal::before{content:"";position:absolute;left:-3px;top:4px;height:156px;width:1px;background:rgba(255,255,255,.05)}
.kmeter{position:absolute;top:4px;left:calc(50% - 22px);height:156px;width:5px;display:flex;flex-direction:column-reverse;gap:3px;cursor:pointer}
.kmeter i{flex:1;border-radius:2px;background:#26231F;transition:background .25s,box-shadow .25s}
.kbahn{position:relative;width:44px;height:156px;cursor:ns-resize;touch-action:none}
.kbahn::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;border-radius:3px;background:#050505;box-shadow:inset 0 1px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.06)}
.kbahn::after{content:"";position:absolute;left:calc(50% + 9px);width:8px;top:0;bottom:0;background:linear-gradient(#4A463F,#4A463F) 0 0/100% 1px no-repeat,linear-gradient(#4A463F,#4A463F) 0 50%/100% 1px no-repeat,linear-gradient(#4A463F,#4A463F) 0 100%/100% 1px no-repeat}
.kknopf{position:absolute;left:50%;top:calc((2 - var(--v)) * 50%);width:36px;height:20px;margin:-10px 0 0 -18px;border-radius:5px;background:linear-gradient(180deg,#F2CB86 0%,#E0AE5E 45%,#B9853A 100%);box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5);transition:top .22s cubic-bezier(.3,1.4,.5,1)}
.kknopf::after{content:"";position:absolute;left:5px;right:5px;top:9px;height:2px;background:#17150F;border-radius:1px}
.kanal.zieht .kknopf{transition:top .08s}
.kanal.offen .kknopf{background:linear-gradient(180deg,#77726A,#4E4A44);box-shadow:0 3px 8px rgba(0,0,0,.6)}
.kanal.offen .kknopf::after{background:#2A2724}
.kanal[data-w="wenig"]:not(.offen) .kmeter i:nth-child(-n+4),
.kanal[data-w="viel"]:not(.offen) .kmeter i{background:var(--gold);box-shadow:0 0 6px rgba(224,174,94,.55)}
.kanal[data-w="viel"]:not(.offen) .kmeter i:nth-child(n+7){background:#FF8A4C;box-shadow:0 0 8px rgba(255,138,76,.7)}
.kanal[data-w="gar nicht"]:not(.offen) .kmeter i:first-child{background:#E5484D;box-shadow:0 0 6px rgba(229,72,77,.7)}
.kname{display:block;text-align:center;font-size:12.5px;font-weight:900;line-height:1.15;color:var(--text);min-height:2.4em}
.kname small{display:block;font-size:10px;font-weight:700;color:var(--muted-2);letter-spacing:.02em}
.kwert{font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:3px 8px;border-radius:999px;background:rgba(224,174,94,.12);white-space:nowrap}
.kanal.offen .kwert{color:var(--muted-2);background:rgba(255,255,255,.05)}
.kanal[data-w="gar nicht"]:not(.offen) .kwert{color:#F2A0A2;background:rgba(229,72,77,.14)}

/* Do's und Don'ts */
.djdos .djzwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.djdos .djzwei{grid-template-columns:1fr}}
.djdo,.djdont{position:relative}
.djdo i,.djdont i{position:absolute;right:12px;top:-2px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:17px;font-weight:900;letter-spacing:0}
.djdo i{background:var(--gold);color:#17150F}
.djdont i{background:#E5484D;color:#fff}
.djdo textarea{border-left:3px solid var(--gold)}
.djdont textarea{border-left:3px solid #E5484D}
.djform > .glaktion{background:#17150F;border-radius:999px;padding:10px 12px 10px 18px;margin:0}
.djform > .glaktion .glstatus{color:var(--muted);border-color:rgba(255,255,255,.18)}
.djform > .glaktion .glstatus[data-s=eingereicht]{background:var(--gold);color:#17150F;border-color:var(--gold)}
.djform > .glaktion .glmeldung{color:var(--muted)}
.djform > .glaktion .btn.ghost{color:var(--text);border-color:rgba(255,255,255,.3)}
.djform > .glaktion .btn.dark{background:var(--gold);color:#17150F}
@media (max-width:700px){.djform > .glaktion{border-radius:20px}}
.djform > .glaktion .btn.dark{border-color:var(--gold)}.djform > .glaktion .btn.dark:hover{background:#F2C77F;border-color:#F2C77F;color:#17150F}
.blansprech{border-top:2px dashed rgba(23,21,15,.18);padding-top:10px}
.blansprech dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:17px}
.blansprech a{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#17150F;color:var(--gold);font-size:13px;font-weight:900;text-decoration:none}
.djform .djh b{font-weight:400}
.djlt{display:flex;align-items:center;gap:8px}
.djdo .djlt i,.djdont .djlt i{position:static;width:22px;height:22px;font-size:15px}
.bfchat{max-width:none}.bfchat .fphone{max-width:820px}
.fchat{max-width:none}.fchat .fphone{max-width:820px}


/* Kopf: Mailfeld mit zweifarbigem Hinweis, Frage hell, Rest gold, wie die Überschrift darüber */
.hmail form{position:relative}
.hmail .hph{position:absolute;left:20px;right:64px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:15.5px;line-height:1.25;transition:opacity .2s}
.hmail .hph b{color:var(--text);font-weight:700}
.hmail .hph em{font-style:normal;color:var(--gold);font-weight:700}
.hmail form:focus-within .hph,.hmail form.voll .hph{opacity:0}
@media (max-width:620px){.hmail .hph{left:16px;font-size:13.5px}}
@media (max-width:620px){.hmail .hph em{display:block}}


/* Nachtrag: Die Karten im Jahrgangsbereich stehen auf hellem Papier.
   Ueberschriften und Specials muessen darauf dunkel sein, sonst sind sie
   nicht zu lesen. */
.bkarte h3,
.bkarte h3.dsp{color:#17150F}
.bkarte,
.bkarte p,
.bkarte li,
.bkarte .bspecials li{color:#2A2724}
.bkarte .bspecials li::marker{color:#C9973F}