/* JKL Judo – Stylesheet. Farben aus dem JKL-Logo: Marineblau, Weinrot, Anthrazit, Silber, Metallic-Orange. */
@font-face{font-family:"Outfit";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/outfit-400.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/outfit-700.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/instrumentsans-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/instrumentsans-400i.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/instrumentsans-700.woff2) format("woff2")}

:root{
  --marine:#12284A; --marine-2:#1B3A68; --marine-tief:#0B1B35;
  --wein:#6E1F2A; --wein-hell:#A33949;
  --anth:#2A2D34; --anth-weich:#3F434C; --silber:#B7BEC8; --blaugrau:#5C6B7A;
  --orange:#E88A2E; --orange-dunkel:#C96A1E; --orange-hell:#FFC27A;
  --papier:#F4F1EC; --papier-warm:#EDE7DD;

  --bg:var(--papier); --flaeche:#FFFFFF; --band:var(--papier-warm);
  --text:var(--anth); --text-leise:#4F5864; --linie:#D9D3C8;
  --kopf:var(--marine); --link:#8A1F31; --link-hover:var(--marine);
  --mark:var(--marine); --punkt:var(--wein);
  --schatten:0 1px 2px rgba(18,40,74,.06),0 8px 28px rgba(18,40,74,.10);
  --radius:14px; --breit:72rem; --schmal:46rem;
  --kopf-bg:rgba(244,241,236,.92); --kopf-text:var(--marine);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="hell"]){
    --bg:#0D1B33; --flaeche:#13274A; --band:#0A1830;
    --text:#E7EBF1; --text-leise:#B3BDCB; --linie:#27406B;
    --link:#FFC27A; --link-hover:#FFFFFF;
    --mark:#E7EBF1; --punkt:#C5495B;
    --schatten:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35);
    --kopf-bg:rgba(13,27,51,.92); --kopf-text:#E7EBF1;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 "Instrument Sans",system-ui,"Segoe UI",Roboto,sans-serif;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:var(--link);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--marine);color:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:0}
.wrap{max-width:var(--breit);margin:0 auto;padding:0 1.25rem}
.schmal{max-width:var(--schmal)}
.zentriert{text-align:center}
h1,h2,h3,h4{font-family:Outfit,"Instrument Sans",system-ui,sans-serif;font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0 0 .6em;color:var(--text)}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.55rem,3.2vw,2.15rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.lead{font-size:clamp(1.12rem,2vw,1.3rem);line-height:1.55;color:var(--text-leise);max-width:42rem}
.eyebrow{font:700 .8rem/1.2 Outfit,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--wein);margin:0 0 .9rem}
.eyebrow a{color:inherit}
.eyebrow-hell{color:var(--orange-hell)}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]) .eyebrow{color:var(--orange-hell)}}

/* Entwurf-Banner */
.entwurf{background:var(--orange);color:#1b1206;text-align:center;font:700 .85rem/1.3 Outfit,sans-serif;padding:.45rem 1rem;letter-spacing:.04em}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:var(--kopf-bg);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie)}
.kopf-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.2rem}
.logo{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--kopf-text)}
.mark{display:block;height:2.1rem;width:auto;overflow:visible}
.mark .st{stroke:var(--mark)}
.mark .dot{fill:var(--punkt)}
.logo-text{display:flex;flex-direction:column;font:400 .78rem/1.15 Outfit,sans-serif;letter-spacing:.06em;color:var(--text-leise);border-left:1px solid var(--linie);padding-left:.8rem}
.logo-text strong{font-size:1.05rem;letter-spacing:.2em;text-transform:uppercase;color:var(--kopf-text)}
.menue-knopf{cursor:pointer;display:flex;align-items:center;justify-content:center;width:2.8rem;height:2.8rem;border-radius:0;border:1px solid var(--linie)}
.menue-knopf i{display:block;width:1.3rem;height:2px;background:var(--text);position:relative}
.menue-knopf i::before,.menue-knopf i::after{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--text)}
.menue-knopf i::before{top:-6px}.menue-knopf i::after{top:6px}
#menue-schalter:focus-visible + .menue-knopf{outline:3px solid var(--orange);outline-offset:3px}
#menue-schalter:checked + .menue-knopf{background:var(--band)}
.menue nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--flaeche);border-bottom:1px solid var(--linie);box-shadow:var(--schatten);padding:.5rem 1.25rem 1rem}
#menue-schalter:checked ~ nav{display:block}
.menue ul{list-style:none;margin:0;padding:0;display:grid}
.menue a{display:block;padding:.75rem .2rem;font:700 1.05rem/1.2 Outfit,sans-serif;text-decoration:none;color:var(--text);border-bottom:1px solid var(--linie)}
.menue a[aria-current]{color:var(--wein-hell)}
.menue .nav-cta a{border:0;margin-top:.7rem;text-align:center;background:var(--orange);color:#1b1206;border-radius:0}
@media (min-width:66rem){
  .menue-knopf{display:none}
  .menue nav,#menue-schalter:checked ~ nav{display:block;position:static;background:none;border:0;box-shadow:none;padding:0}
  .menue ul{display:flex;gap:.2rem;align-items:center}
  .menue a{border:0;padding:.55rem .85rem;border-radius:0;font-size:.98rem}
  .menue a:hover{background:var(--band)}
  .menue .nav-cta a{margin:0 0 0 .5rem;padding:.6rem 1.15rem}
}
@media (max-width:30rem){.logo-text span{display:none}}

/* Buttons */
.btn{display:inline-block;font:700 1rem/1 Outfit,sans-serif;text-decoration:none;padding:.95rem 1.5rem;border-radius:0;border:2px solid transparent;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primaer{background:linear-gradient(135deg,var(--orange-hell),var(--orange) 45%,var(--orange-dunkel));color:#1b1206;box-shadow:0 6px 18px rgba(232,138,46,.35)}
.btn-primaer:hover{color:#1b1206;box-shadow:0 10px 24px rgba(232,138,46,.45)}
.btn-hell{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);color:#fff}
.btn-hell:hover{background:rgba(255,255,255,.2);color:#fff}
.btn-aus{border-color:var(--marine);color:var(--marine)}
.btn-aus:hover{background:var(--marine);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]) .btn-aus{border-color:var(--silber);color:var(--silber)}:root:not([data-theme="hell"]) .btn-aus:hover{background:var(--silber);color:var(--marine)}}
.hero-aktionen{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 0}
.link-pfeil{font:700 1rem/1.2 Outfit,sans-serif;text-decoration:none}
.link-pfeil::after{content:" →";transition:margin .15s}
.link-pfeil:hover::after{margin-left:.25rem}
.mehr{margin:1.2rem 0 0}

/* Hero */
.hero{position:relative;color:#fff;background:var(--marine-tief);overflow:hidden;isolation:isolate}
.hero-bild{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(11,27,53,.96) 0%,rgba(11,27,53,.82) 45%,rgba(11,27,53,.35) 100%),url(fotos/foto-10.webp) center/cover no-repeat}
.hero-in{padding:clamp(4rem,11vw,8rem) 1.25rem clamp(3rem,8vw,6rem)}
.hero h1{color:#fff;max-width:14ch}
.hero .lead{color:#D5DBE4}
.bild-hinweis{font-size:.78rem;color:#9AA6B6;margin:2rem 0 0}
.bild-hinweis.dunkel{color:var(--text-leise);margin-top:1.2rem}

/* Abschnitte */
.abschnitt{padding:clamp(3rem,7vw,5.5rem) 0}
.abschnitt-warm{background:var(--band)}
.abschnitt-marine{background:linear-gradient(135deg,var(--marine),var(--marine-tief));color:#fff}
.abschnitt-marine h2{color:#fff}
.abschnitt-kopf{max-width:46rem;margin-bottom:2.2rem}
.seitenkopf{padding:clamp(2.6rem,6vw,4.4rem) 0 1.8rem;background:linear-gradient(180deg,var(--band),var(--bg))}
.seitenkopf h1{font-size:clamp(1.9rem,4.4vw,3rem);max-width:22ch}

/* Karten */
.karten{display:grid;gap:1.6rem}
@media (min-width:48rem){.karten{grid-template-columns:repeat(2,1fr)}}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);overflow:hidden;display:flex;flex-direction:column}
.karte-medien{background:var(--marine-tief);aspect-ratio:16/9;overflow:hidden;display:flex}
.karte-bild{margin:0;width:100%;height:100%}
.karte-bild a{display:block;height:100%}
.karte-bild img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.karte-platz{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--marine-2),var(--marine-tief))}
.karte-platz .mark{height:4rem}.karte-platz .mark .st{stroke:#E7EBF1}.karte-platz .mark .dot{fill:var(--wein-hell)}
.karte-text{padding:1.4rem 1.5rem 1.6rem}
.karte-text h3{margin-bottom:.5rem;font-size:1.4rem}
.karte-text h3 a{color:inherit;text-decoration:none}
.karte-text h3 a:hover{color:var(--wein-hell)}

/* Zusammenspiel */
.fluss{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:48rem){.fluss{grid-template-columns:repeat(4,1fr)}}
.fluss li{counter-increment:s;position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1.2rem 1.2rem 1.3rem;box-shadow:var(--schatten)}
.fluss li::before{content:counter(s);font:700 .9rem/1 Outfit,sans-serif;display:inline-flex;width:1.9rem;height:1.9rem;align-items:center;justify-content:center;border-radius:50%;background:var(--marine);color:#fff;margin-bottom:.7rem}
.fluss strong{display:block;font:700 1.1rem/1.2 Outfit,sans-serif;margin-bottom:.3rem}
.fluss span{font-size:.97rem;color:var(--text-leise)}
@media (min-width:48rem){.fluss li:not(:last-child)::after{content:"";position:absolute;right:-.75rem;top:2.2rem;width:.5rem;height:.5rem;border-top:3px solid var(--orange);border-right:3px solid var(--orange);transform:rotate(45deg)}}

/* Zwei Spalten */
.zwei{display:grid;gap:3rem}
@media (min-width:56rem){.zwei{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.seitenspalte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1.6rem;align-self:start;box-shadow:var(--schatten)}
.regel-liste{list-style:none;padding:0;margin:0}
.regel-liste a{display:block;padding:.7rem 0;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--text)}
.regel-liste a strong{display:block;font:700 1rem/1.25 Outfit,sans-serif}
.regel-liste a span{display:block;font-size:.9rem;color:var(--text-leise)}
.regel-liste a:hover strong{color:var(--wein-hell)}
.trend-karte{display:block;margin-top:1.4rem;padding:1.2rem;border-radius:12px;background:linear-gradient(135deg,var(--marine),var(--marine-2));color:#fff;text-decoration:none}
.trend-karte h3{color:#fff;font-size:1.15rem;margin-bottom:.4rem}
.trend-karte p{color:#D5DBE4;font-size:.95rem}
.trend-karte .eyebrow{color:var(--orange-hell)}
.trend-karte .link-pfeil{color:var(--orange-hell)}

/* Neuigkeiten */
.news-liste{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.news-eintrag{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1.2rem 1.4rem;border-left:5px solid var(--orange)}
.news-eintrag h3{font-size:1.2rem;margin:.1rem 0 .5rem}
.news-eintrag p{margin-bottom:.6rem}
.meta{font-size:.85rem;color:var(--text-leise);margin-bottom:.2rem}
.chip{display:inline-block;font:700 .72rem/1 Outfit,sans-serif;text-transform:uppercase;letter-spacing:.08em;background:var(--marine);color:#fff;padding:.35rem .6rem;border-radius:0;margin-right:.4rem}
.quelle{font-size:.9rem;color:var(--text-leise);margin:0}
.quelle-block{margin-top:2.4rem}
.quelle-block h2{font-size:1.3rem;padding-bottom:.4rem;border-bottom:2px solid var(--silber)}
.wochentitel small{font:400 1rem Instrument Sans,sans-serif;color:var(--text-leise)}
.archiv{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linie)}
.archiv ul{padding-left:1.1rem}
.callout{border-left:5px solid var(--wein);background:var(--flaeche);border-radius:0 12px 12px 0;padding:1rem 1.2rem;margin:0 0 2rem;font-size:.97rem;box-shadow:var(--schatten)}

/* Regelkunde / Trends */
.regel-raster{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:44rem){.regel-raster{grid-template-columns:1fr 1fr}}
.regel-raster a,.bericht-liste a{display:block;height:100%;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1.2rem 1.3rem;text-decoration:none;color:var(--text);box-shadow:var(--schatten)}
.regel-raster a:hover,.bericht-liste a:hover{border-color:var(--orange)}
.regel-raster strong,.bericht-liste strong{display:block;font:700 1.15rem/1.25 Outfit,sans-serif;margin:.2rem 0 .3rem}
.regel-raster span:not(.nr),.bericht-liste span{display:block;color:var(--text-leise);font-size:.95rem}
.nr{font:700 .8rem/1 Outfit,sans-serif;color:var(--orange-dunkel);letter-spacing:.1em}
.bericht-liste{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.stand{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin:0 0 2rem;padding:1rem 1.2rem;background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;font-size:.92rem}
.stand dt{font:700 .72rem/1 Outfit,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--text-leise);margin-bottom:.2rem}
.stand dd{margin:0}
.prosa h2{margin-top:2rem}
.prosa h3{margin-top:1.6rem}
.prosa ul,.prosa ol{padding-left:1.3rem}
.prosa li{margin-bottom:.35rem}
.prosa table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:.96rem}
.prosa th,.prosa td{border-bottom:1px solid var(--linie);padding:.55rem .7rem;text-align:left;vertical-align:top}
.prosa th{font:700 .85rem/1.2 Outfit,sans-serif;text-transform:uppercase;letter-spacing:.06em;background:var(--band)}
.prosa blockquote{margin:1.2rem 0;padding:.2rem 1.2rem;border-left:4px solid var(--silber);color:var(--text-leise)}
.quellenliste{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--linie);font-size:.95rem}
.quellenliste ul{padding-left:1.2rem}
.blaettern{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.blaettern a{font:700 .98rem/1.3 Outfit,sans-serif;text-decoration:none}

/* Produktseiten */
.produkt-kopf-in{display:grid;gap:2.2rem;align-items:center}
@media (min-width:60rem){.produkt-kopf-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.shot{margin:0}
.shot a{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);border:1px solid var(--linie);background:var(--marine-tief);cursor:zoom-in}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-size:.92rem;color:var(--text-leise);margin-top:.6rem}
.shot figcaption strong{color:var(--text)}
.shot-gross a{box-shadow:0 18px 50px rgba(18,40,74,.25)}
.highlights{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
@media (min-width:44rem){.highlights{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.highlights{grid-template-columns:repeat(4,1fr)}}
.highlights li{background:var(--flaeche);border:1px solid var(--linie);border-top:4px solid var(--orange);border-radius:var(--radius);padding:1.2rem 1.2rem 1.3rem;box-shadow:var(--schatten)}
.highlights h3{font-size:1.1rem}
.highlights p{margin:0;font-size:.97rem;color:var(--text-leise)}
.funktionen{display:grid;gap:1.4rem}
@media (min-width:50rem){.funktionen{grid-template-columns:repeat(2,1fr)}}
.funktion{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1.3rem 1.5rem}
.funktion h3{font-size:1.15rem;color:var(--marine)}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]) .funktion h3{color:var(--orange-hell)}}
.funktion ul,.haken{list-style:none;padding:0;margin:0}
.funktion li,.haken li{position:relative;padding-left:1.5rem;margin-bottom:.45rem}
.funktion li::before,.haken li::before{content:"";position:absolute;left:.1rem;top:.55em;width:.55rem;height:.55rem;background:var(--orange);transform:rotate(45deg)}
.galerie{display:grid;gap:1.6rem}
@media (min-width:44rem){.galerie{grid-template-columns:repeat(2,1fr)}}
@media (min-width:70rem){.galerie{grid-template-columns:repeat(3,1fr)}}
.nachbarn{list-style:none;margin:0;padding:0}
.nachbarn li{padding:.7rem 0;border-bottom:1px solid var(--linie)}
.nachbarn a{font:700 1.05rem/1.2 Outfit,sans-serif}
.nachbarn span{display:block;font-size:.9rem;color:var(--text-leise)}

/* Beratung / Kontakt */
.drei{display:grid;gap:1.4rem}
@media (min-width:52rem){.drei{grid-template-columns:repeat(3,1fr)}}
.kasten{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--schatten);border-top:4px solid var(--wein)}
.kontakt-kasten{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1.6rem 1.8rem;box-shadow:var(--schatten)}
.beratung-band{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.beratung-band p{color:#D5DBE4;max-width:38rem}

/* Fuß */
.fuss{background:var(--marine-tief);color:#C8D0DC;margin-top:0}
.fuss a{color:#E7EBF1}
.fuss-in{display:grid;gap:2rem;padding-top:3rem;padding-bottom:2rem}
@media (min-width:48rem){.fuss-in{grid-template-columns:1.4fr 1fr 1fr}}
.fuss-marke .mark{height:2.4rem}.fuss-marke .mark .st{stroke:#E7EBF1}.fuss-marke .mark .dot{fill:var(--wein-hell)}
.fuss-marke p{margin-top:1rem;max-width:26rem;font-size:.95rem}
.fuss h2{font:700 .8rem/1 Outfit,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--orange-hell);margin-bottom:.9rem}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.45rem}
.fuss-unten{border-top:1px solid #27406B;padding-top:1.2rem;padding-bottom:2rem;font-size:.82rem;color:#93A0B4}

/* Bildzoom */
dialog#zoom{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible}
dialog#zoom::backdrop{background:rgba(5,12,26,.88)}
dialog#zoom img{max-width:94vw;max-height:84vh;display:block;border-radius:10px;background:#000}
dialog#zoom p{color:#E7EBF1;text-align:center;font-size:.95rem;margin:.7rem 0 0}
dialog#zoom .zu{position:absolute;right:-.4rem;top:-2.6rem;width:2.4rem;height:2.4rem;border-radius:0;border:0;font:700 1.6rem/1 Outfit,sans-serif;background:#fff;color:var(--marine);cursor:pointer}

@media print{.kopf,.fuss,.hero-aktionen,.menue,.skip,.entwurf{display:none}body{background:#fff;color:#000;font-size:11pt}a{color:#000}}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]) .menue a[aria-current]{color:var(--orange-hell)}}

/* Kontaktformular */
.formular{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1.6rem 1.8rem;box-shadow:var(--schatten)}
.feld{margin:0 0 1.1rem}
.feld label{display:block;font:700 .92rem/1.3 Outfit,sans-serif;margin-bottom:.35rem}
.feld input[type=text],.feld input[type=email],.feld select,.feld textarea{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1.5px solid var(--linie);border-radius:0;padding:.7rem .9rem}
.feld textarea{resize:vertical;min-height:9rem}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--orange);outline:3px solid rgba(232,138,46,.35)}
.feld-haken{display:flex;gap:.7rem;align-items:flex-start}
.feld-haken input{margin-top:.35rem;width:1.1rem;height:1.1rem;flex:none}
.feld-haken label{font:400 .95rem/1.5 "Instrument Sans",sans-serif;margin:0}
.feld-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.klein{font-size:.88rem;color:var(--text-leise)}
.meldung{border-radius:12px;padding:1rem 1.2rem;margin:0 0 1.4rem}
.meldung ul{margin:.4rem 0 0;padding-left:1.2rem}
.meldung-ok{background:#E3F1E6;border:1px solid #9CCBA6;color:#17391F}
.meldung-fehler{background:#FBE9EA;border:1px solid #E2A5AC;color:#5B1620}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]) .meldung-ok{background:#12301D;border-color:#2E6A41;color:#CBEBD4}:root:not([data-theme="hell"]) .meldung-fehler{background:#3A1219;border-color:#8A2F3C;color:#F6CFD4}}

/* Startseite: kompakter Kopf, Feed im Mittelpunkt */
.hero-kompakt .hero-in{padding-top:clamp(2.6rem,6vw,4.4rem);padding-bottom:clamp(2.2rem,5vw,3.4rem)}
.hero-kompakt h1{max-width:20ch;font-size:clamp(1.9rem,4.6vw,3.1rem)}
.hero-kompakt .lead{max-width:40rem}
.abschnitt-schmal{padding:clamp(2rem,4vw,3rem) 0}
.seite-h2{margin-top:1.8rem}
.chip-trend{background:var(--wein)}
.news-trend{border-left-color:var(--wein)}
.news-trend h3 a{color:inherit;text-decoration:none}
.news-trend h3 a:hover{color:var(--wein-hell)}

@media (min-width:64rem){.highlights-6{grid-template-columns:repeat(3,1fr)}}

/* Banner der Startseite: mittlere Höhe */
.hero-kompakt .hero-in{padding-top:clamp(2.6rem,5vw,3.8rem);padding-bottom:clamp(2.2rem,4.4vw,3.3rem)}
.hero-kompakt h1{font-size:clamp(1.9rem,4.2vw,2.9rem);max-width:none;margin-bottom:.45em}
.hero-kompakt .eyebrow{margin-bottom:.7rem}
.hero-kompakt .lead{font-size:clamp(1.05rem,1.8vw,1.2rem);margin-bottom:0;max-width:44rem}
.hero-kompakt .hero-aktionen{margin-top:1.3rem}
.hero-kompakt .btn{padding:.85rem 1.4rem}
.hero-kompakt .bild-hinweis{margin-top:1.1rem}

/* Zusammenspiel-Skizze */
.skizze{margin:0}
.skizze svg.sk{display:none;width:100%;height:auto}
.skizze-mobil{display:block}
@media (min-width:52rem){.skizze svg.sk{display:block}.skizze-mobil{display:none}}
.skizze figcaption{font-size:.92rem;color:var(--text-leise);margin-top:.8rem;text-align:center}
:root{--ik:#12284A;--ik2:#E7EBF1;--ik3:#0B1B35;--ik-fuss:#8A95A5;--ik-hell:#5C6B7A;--ik-linie:#C5CCD6;--ik-akz:#E88A2E;--sk-pille:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]){--ik:#C5CCD6;--ik2:#12284A;--ik3:#0B1B35;--ik-fuss:#8895A3;--ik-hell:#8895A3;--ik-linie:#5C6B7A;--sk-pille:#0D1B33}}
.sk-bg{fill:var(--flaeche);stroke:var(--linie);stroke-width:2}
.sk-karte{fill:var(--bg);stroke:var(--linie);stroke-width:2.5}
.sk-kopf-wein{fill:#6E1F2A}.sk-kopf-marine{fill:#12284A}.sk-kopf-orange{fill:#C96A1E}.sk-kopf-anth{fill:#2A2D34}
.sk-feld{fill:var(--flaeche);stroke:var(--linie);stroke-width:2}
.sk text{font-family:"Instrument Sans",system-ui,sans-serif}
.sk .sk-h,.sk .sk-r,.sk .sk-bereich,.sk .sk-fett,.sk .sk-pt{font-family:Outfit,"Instrument Sans",sans-serif}
.sk-w{fill:#fff}.sk-h{font-size:24px;font-weight:700}.sk-r{font-size:17px;opacity:.88}
.sk-t{fill:var(--text)}.sk-t2{fill:var(--text);font-size:21px}.sk-t3{fill:var(--text-leise);font-size:18px}
.sk-fett{font-size:23px;font-weight:700}
.sk-bereich{fill:var(--text-leise);font-size:17px;font-weight:700;letter-spacing:.14em}
.sk-pille{fill:var(--sk-pille);stroke:var(--linie);stroke-width:2}.sk-pt{fill:var(--text);font-size:17px;font-weight:700}
.ik{fill:var(--ik)}.ik2{fill:var(--ik2)}.ik3{fill:var(--ik3)}.ik-fuss{fill:var(--ik-fuss)}.ik-hell{fill:var(--ik-hell)}.ik-linie{fill:var(--ik-linie)}.ik-akz{fill:var(--ik-akz)}.ik-wein{fill:#A33949}
.sk-lw,.sk-lm,.sk-lo{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:11 9}
.sk-lw{stroke:#A33949}.sk-lm{stroke:#5C6B7A}.sk-lo{stroke:#E88A2E}
.sk-pf-w{fill:#A33949}.sk-pf-m{fill:#5C6B7A}.sk-pf-o{fill:#E88A2E}
.sk-leg-w{fill:#A33949}.sk-leg-o{fill:#E88A2E}.sk-leg-m{fill:#5C6B7A}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]) .sk-lm{stroke:#B7BEC8}:root:not([data-theme="hell"]) .sk-pf-m,:root:not([data-theme="hell"]) .sk-leg-m{fill:#B7BEC8}}

.chip-leiste{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 .5rem;padding:0}
.chip-leiste a{display:inline-block;padding:.5rem 1rem;border-radius:0;border:1.5px solid var(--linie);background:var(--flaeche);color:var(--text);text-decoration:none;font:700 .92rem/1 Outfit,sans-serif}
.chip-leiste a:hover{border-color:var(--orange)}

.hinweis{font-size:.92rem;background:var(--band);border-left:3px solid var(--orange);padding:.5rem .8rem;border-radius:0 8px 8px 0;margin:.2rem 0 .7rem}

.callout-beta{border-left-color:var(--orange);margin-bottom:1.6rem}
.beta-chip{display:inline-block;margin-left:.4rem;padding:.2rem .5rem;border-radius:0;background:var(--orange);color:#1b1206;font:700 .68rem/1 Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.praxis{background:var(--flaeche);border:1px solid var(--linie);border-left:5px solid var(--wein);border-radius:var(--radius);padding:1.6rem 1.8rem;box-shadow:var(--schatten)}
.praxis h2{margin-bottom:.4em}
.seitenspalte .klein{margin:.6rem 0 0}

/* Untermenü „Neuigkeiten“ */
.menue .unter{list-style:none;margin:0;padding:0 0 0 1rem;display:block}
.menue .unter a{font-size:.98rem;font-weight:400;padding:.55rem .2rem}
.unternavi{background:var(--band);border-bottom:1px solid var(--linie)}
.unternavi ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:.6rem 0}
.unternavi a{display:block;padding:.45rem .95rem;border-radius:0;text-decoration:none;color:var(--text);font:700 .92rem/1 Outfit,sans-serif}
.unternavi a:hover{background:var(--flaeche)}
.unternavi a[aria-current]{background:var(--marine);color:#fff}
@media (min-width:66rem){
  .menue .hat-unter{position:relative}
  .menue .unter{display:none;position:absolute;left:0;top:100%;min-width:14rem;padding:.5rem;margin-top:0;background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;box-shadow:var(--schatten);z-index:60}
  .menue .hat-unter::after{content:"";position:absolute;left:0;right:0;top:100%;height:.6rem}
  .menue .hat-unter:hover>.unter,.menue .hat-unter:focus-within>.unter{display:block}
  .menue .unter a{display:block;padding:.6rem .8rem;border-radius:0;font-size:.98rem}
  .menue .unter a:hover{background:var(--band)}
  .menue .hat-unter>a::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-.15em)}
}

/* Graduierungen: Gürtelübersicht */
.grade{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.8rem}
.grad{display:grid;gap:.4rem .9rem;grid-template-columns:1fr;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1rem 1.2rem}
@media (min-width:48rem){.grad{grid-template-columns:6rem 9.5rem 1fr;align-items:start}}
.grad-kopf strong{font:700 1.1rem/1.2 Outfit,sans-serif}
.grad-titel{color:var(--text-leise);font-size:.92rem}
.grad-gurt{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--text-leise)}
.gurt{display:inline-block;width:6.2rem;height:1.5rem;border-radius:.35rem;border:1.5px solid rgba(0,0,0,.35);flex:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]) .gurt{border-color:rgba(255,255,255,.4)}}
.grad-text p{margin:0 0 .4rem}
.grad-hinweis,.grad-meta{font-size:.88rem;color:var(--text-leise)}
.stand-hinweis{font-size:.92rem;color:var(--text-leise)}
.wissen-raster{grid-template-columns:1fr}
@media (min-width:44rem){.wissen-raster{grid-template-columns:repeat(3,1fr)}}

/* Suche */
.nav-suche a{display:inline-flex;align-items:center;gap:.5rem}
.menue .nav-suche a svg{flex:none}
@media (min-width:66rem){.menue .nav-suche .suche-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.menue .nav-suche a{padding:.55rem .7rem}}
.suchform{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.suchform input{flex:1 1 16rem;font:inherit;font-size:1.1rem;color:var(--text);background:var(--flaeche);border:2px solid var(--linie);border-radius:0;padding:.8rem 1.2rem}
.suchform input:focus{border-color:var(--orange);outline:3px solid rgba(232,138,46,.35)}
.treffer-liste{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.9rem}
.treffer{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1rem 1.2rem}
.treffer a{display:block;text-decoration:none;color:var(--text)}
.treffer strong{display:block;font:700 1.08rem/1.3 Outfit,sans-serif;color:var(--link)}
.treffer a:hover strong{text-decoration:underline}
.treffer-bereich{display:inline-block;font:700 .7rem/1 Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--marine);border-radius:0;padding:.3rem .55rem;margin-bottom:.4rem}
.treffer p{margin:.4rem 0 0;color:var(--text-leise);font-size:.96rem}
mark{background:rgba(232,138,46,.35);color:inherit;border-radius:3px;padding:0 .1em}

/* Suche: überarbeitet */
.seitenkopf-suche{padding-bottom:1.6rem}
.seitenkopf-suche h1{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:.8rem}
.suchform{display:flex;gap:.7rem;flex-wrap:nowrap;align-items:stretch;margin-bottom:.7rem}
.suchfeld-huelle{position:relative;flex:1 1 auto;display:block;min-width:0}
.suchfeld-huelle svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);color:var(--text-leise);pointer-events:none}
.suchform input{width:100%;font:inherit;font-size:1.15rem;color:var(--text);background:var(--flaeche);border:2px solid var(--linie);border-radius:0;padding:.95rem 1.2rem .95rem 3.1rem;box-shadow:var(--schatten)}
.suchform input:focus{border-color:var(--orange);outline:3px solid rgba(232,138,46,.35)}
.suchform .btn{flex:none}
@media (max-width:30rem){.suchform .btn{padding:.9rem 1.1rem}}
.suche-hinweis{font-size:.95rem;color:var(--text-leise);margin:0}
.suche-status{font:700 1rem/1.4 Outfit,sans-serif;color:var(--text);margin:0 0 1rem}
#beispiele[hidden]{display:none}
.treffer-liste{margin-top:.2rem}
.treffer{position:relative;transition:border-color .15s,transform .15s}
.treffer:hover{border-color:var(--orange);transform:translateY(-1px)}
.treffer a::after{content:"→";position:absolute;right:1.1rem;top:1rem;color:var(--text-leise);font-weight:700}
.treffer strong{padding-right:2rem}

/* Gürtelfarben (aus content/graduierungen/gurte.json) */
.gurt-111111{background:#111111}
.gurt-1F5FBF{background:#1F5FBF}
.gurt-2E9E3E{background:#2E9E3E}
.gurt-7A4A21{background:#7A4A21}
.gurt-C8102E{background:#C8102E}
.gurt-C8102E-FFFFFF{background:linear-gradient(to bottom,#C8102E 0 50%,#FFFFFF 50% 100%)}
.gurt-F28C00{background:#F28C00}
.gurt-F28C00-2E9E3E{background:linear-gradient(to bottom,#F28C00 0 50%,#2E9E3E 50% 100%)}
.gurt-F2D600{background:#F2D600}
.gurt-F2D600-F28C00{background:linear-gradient(to bottom,#F2D600 0 50%,#F28C00 50% 100%)}
.gurt-F4F4F4-F2D600{background:linear-gradient(to bottom,#F4F4F4 0 50%,#F2D600 50% 100%)}