/* joergklumpp.de – neues Design 2026. Farben aus dem JKL-Logo (Marine, Orange, Weinrot, Silber). Mobil zuerst, ohne Frameworks. */
@font-face{font-family:"Outfit";font-weight:400;font-display:swap;src:url(fonts/outfit-400.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:700;font-display:swap;src:url(fonts/outfit-700.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;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-display:swap;src:url(fonts/instrumentsans-700.woff2) format("woff2")}

:root{
  --marine:#12284A;--marine-2:#1B3A68;--tief:#071226;
  --orange:#F0983F;--orange-2:#E88A2E;--orange-3:#C96A1E;--orange-hell:#FFC27A;
  --wein:#A33949;--silber:#B7BEC8;
  --bg:#F6F4EF;--flaeche:#FFFFFF;--flaeche-2:#EFEBE3;--text:#1C2230;--leise:#505A69;--linie:rgba(18,40,74,.13);
  --akzent-text:#8A1F31;--glas:rgba(246,244,239,.78);
  --schatten:0 1px 2px rgba(7,18,38,.05),0 12px 40px -12px rgba(7,18,38,.18);
  --r:1.6rem;--r-s:1rem;--breit:76rem;--kopf:4.4rem;
  --verlauf:linear-gradient(120deg,var(--orange-hell),var(--orange) 40%,#E9764A 75%,var(--wein));
}
@media (prefers-color-scheme:dark){
  :root{--bg:#081428;--flaeche:#0F2140;--flaeche-2:#0B1A33;--text:#E9EDF3;--leise:#A9B5C6;--linie:rgba(183,190,200,.16);
    --akzent-text:#FFC27A;--glas:rgba(8,20,40,.72);--schatten:0 1px 2px rgba(0,0,0,.4),0 16px 44px -14px rgba(0,0,0,.6)}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*:not(.hero-bild img){animation:none!important}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.7 "Instrument Sans",system-ui,"Segoe UI",Roboto,sans-serif;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--akzent-text);text-underline-offset:.2em;text-decoration-thickness:.07em}
a:hover{color:var(--orange-2)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--tief);color:#fff;padding:.7rem 1rem;z-index:200;border-radius:.6rem}
.skip:focus{left:.5rem}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(100% - 2.5rem,var(--breit));margin-inline:auto}
.eng{width:min(100% - 2.5rem,46rem);margin-inline:auto}
h1,h2,h3,h4{font-family:Outfit,system-ui,sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.5rem,8.2vw,5.6rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.2rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem);letter-spacing:-.01em}
p{margin:0 0 1em;text-wrap:pretty}
.lead{font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.55;color:var(--leise);max-width:40rem}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font:700 .78rem/1 Outfit,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--akzent-text);margin:0 0 1.1rem}
.kicker::before{content:"";width:1.6rem;height:2px;background:var(--verlauf)}
.verlauf{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Mark (JKL-Logo als SVG) */
.mark{overflow:visible}
.mark .st{stroke:currentColor}
.mark .dot{fill:var(--wein)}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--kopf)}
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;background:transparent;transition:background .3s,box-shadow .3s}
.kopf.scroll::before,.innen .kopf::before{background:var(--glas);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--linie)}
.kopf-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{position:relative;z-index:120;display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--text)}
.start .kopf:not(.scroll) .logo{color:#fff}
body:has(#menue:checked) .logo{color:var(--text)!important}
.logo .mark{height:2.1rem;width:auto}
.logo-name{font:700 1.02rem/1 Outfit,sans-serif;letter-spacing:.04em;white-space:nowrap}
.menue-knopf{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--linie);background:var(--glas);position:relative;z-index:120}
.start .kopf:not(.scroll) .menue-knopf{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.menue-knopf i,.menue-knopf i::before,.menue-knopf i::after{display:block;width:1.2rem;height:2px;background:var(--text);border-radius:2px;position:relative;transition:transform .25s,top .25s,background .25s}
.start .kopf:not(.scroll) .menue-knopf i,.start .kopf:not(.scroll) .menue-knopf i::before,.start .kopf:not(.scroll) .menue-knopf i::after{background:#fff}
.menue-knopf i::before,.menue-knopf i::after{content:"";position:absolute;left:0}
.menue-knopf i::before{top:-6px}.menue-knopf i::after{top:6px}
#menue:checked + .menue-knopf i{background:transparent!important}
#menue:checked + .menue-knopf i::before{top:0;transform:rotate(45deg);background:var(--text)!important}
#menue:checked + .menue-knopf i::after{top:0;transform:rotate(-45deg);background:var(--text)!important}
#menue:focus-visible + .menue-knopf{outline:3px solid var(--orange);outline-offset:3px}
.nav{position:fixed;inset:0;background:var(--bg);padding:calc(var(--kopf) + 1.5rem) 1.5rem 2rem;display:flex;flex-direction:column;justify-content:center;gap:.2rem;opacity:0;visibility:hidden;transform:translateY(-1rem);transition:opacity .3s,transform .3s,visibility .3s;z-index:110}
#menue:checked ~ .nav{opacity:1;visibility:visible;transform:none}
.nav a{font:700 clamp(1.7rem,7vw,2.4rem)/1.2 Outfit,sans-serif;text-decoration:none;color:var(--text);padding:.45rem 0;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;align-items:center}
.nav a[aria-current]{color:var(--akzent-text)}
.nav a.extern::after{content:"↗";font-size:.7em;color:var(--leise)}
.nav .cta{margin-top:1.2rem;border:0;justify-content:center;border-radius:99px;background:var(--verlauf);color:#1b1206;padding:1rem;font-size:1.2rem}
body:has(#menue:checked){overflow:hidden}
@media (min-width:76rem){
  .menue-knopf{display:none}
  .nav{position:static;inset:auto;background:none;padding:0;flex-direction:row;align-items:center;justify-content:flex-end;gap:.15rem;opacity:1;visibility:visible;transform:none}
  .nav a{font:400 .98rem/1 "Instrument Sans",sans-serif;font-weight:700;padding:.7rem 1rem;border:0;border-radius:99px;transition:background .2s}
  .start .kopf:not(.scroll) .nav a{color:#fff}
  .nav a:hover{background:rgba(127,140,160,.16)}
  .nav a.extern::after{margin-left:.3rem}
  .nav .cta{margin:0 0 0 .6rem;padding:.75rem 1.25rem;font-size:.98rem;color:#1b1206!important}
  .nav .cta:hover{filter:brightness(1.08);background:var(--verlauf)}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;font:700 1.02rem/1 Outfit,sans-serif;text-decoration:none;padding:1.05rem 1.6rem;border-radius:99px;border:1.5px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,color .2s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-voll{background:var(--verlauf);color:#1b1206;box-shadow:0 10px 30px -8px rgba(240,152,63,.6)}
.btn-voll:hover{color:#1b1206;box-shadow:0 16px 36px -8px rgba(240,152,63,.7)}
.btn-glas{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(6px)}
.btn-glas:hover{background:rgba(255,255,255,.2);color:#fff}
.btn-rand{border-color:var(--linie);color:var(--text);background:var(--flaeche)}
.btn-rand:hover{border-color:var(--orange);color:var(--text)}
.pfeil::after{content:"→";transition:transform .2s}
.pfeil:hover::after{transform:translateX(.25rem)}
.aktionen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* Hero */
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:center;color:#fff;background:var(--tief);overflow:hidden}
.hero-bild{position:absolute;inset:0;z-index:-3;overflow:hidden;opacity:.62}
.hero-bild img{position:absolute;top:0;left:0;height:100%;width:auto;min-width:135%;max-width:none;object-fit:cover;object-position:center 62%;will-change:left,transform;animation:schwenk 90s linear 1s forwards}
/* Das Bild wandert von rechts nach links, bis sein rechter Rand den Bildschirmrand erreicht, und bleibt dann stehen. */
@keyframes schwenk{from{left:0;transform:translateX(0)}to{left:100%;transform:translateX(-100%)}}
.hero.pause .hero-bild img{animation-play-state:paused}
.pause-knopf{position:absolute;right:1.25rem;bottom:2.2rem;z-index:3;display:inline-flex;align-items:center;gap:.5rem;font:700 .8rem/1 Outfit,sans-serif;letter-spacing:.06em;color:#fff;background:rgba(7,18,38,.55);border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:.6rem .9rem;cursor:pointer;backdrop-filter:blur(6px)}
.pause-knopf:hover{background:rgba(7,18,38,.8)}
.pause-knopf::before{content:"❚❚";font-size:.7rem;letter-spacing:-.1em}
.pause-knopf[aria-pressed="true"]::before{content:"▶"}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60rem 38rem at 85% 8%,rgba(240,152,63,.30),transparent 60%),
  radial-gradient(48rem 36rem at 0% 100%,rgba(163,57,73,.40),transparent 62%),
  linear-gradient(180deg,rgba(7,18,38,.55),rgba(7,18,38,.92))}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:8rem;z-index:-1;background:linear-gradient(180deg,transparent,var(--bg))}
.hero-in{padding:calc(var(--kopf) + 3rem) 0 7rem;display:grid;gap:2.5rem}
.hero .kicker{color:var(--orange-hell)}
.hero h1{font-size:clamp(2.1rem,5.6vw,3.9rem);margin-bottom:.4em}
.hero .lead{color:#D2DAE6}
.hero-logo{width:min(70%,22rem);color:#fff;filter:drop-shadow(0 20px 50px rgba(0,0,0,.4))}
.hero-logo .dot{fill:#C5495B}
.motto{font:italic 400 1.05rem/1.5 "Instrument Sans",sans-serif;color:#B9C4D4;border-left:2px solid var(--orange);padding-left:1rem;margin-top:2.4rem;max-width:34rem}
@media (min-width:60rem){.hero-in{grid-template-columns:1.35fr .65fr;align-items:center}.hero-logo{width:100%;justify-self:end}}
.scroll-hinweis{position:absolute;left:50%;bottom:2.2rem;translate:-50% 0;width:1.7rem;height:2.7rem;border:2px solid rgba(255,255,255,.5);border-radius:99px;display:none}
.scroll-hinweis::after{content:"";position:absolute;left:50%;top:.5rem;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--orange);animation:rolle 1.8s infinite}
@keyframes rolle{50%{transform:translateY(.8rem);opacity:.2}}
@media (min-width:60rem) and (min-height:46rem){.scroll-hinweis{display:block}}

/* Zahlenband */
.zahlen{margin-top:-4.5rem;position:relative;z-index:2}
.zahlen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten)}
.zahlen li{background:var(--flaeche);padding:1.4rem 1.2rem}
.zahlen b{display:block;font:700 clamp(2rem,5vw,3rem)/1 Outfit,sans-serif;letter-spacing:-.03em;margin-bottom:.35rem}
.zahlen span{font-size:.92rem;line-height:1.35;color:var(--leise);display:block}
@media (min-width:52rem){.zahlen ul{grid-template-columns:repeat(4,1fr)}.zahlen li{padding:1.8rem 1.6rem}}

/* Abschnitte */
.abschnitt{padding:clamp(4rem,9vw,8rem) 0}
.kopfzeile{max-width:48rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.dunkel{background:linear-gradient(160deg,var(--marine),var(--tief));color:#E9EDF3;position:relative;isolation:isolate;overflow:hidden}
.dunkel::before{content:"";position:absolute;z-index:-1;width:50rem;height:50rem;right:-18rem;top:-14rem;background:radial-gradient(closest-side,rgba(240,152,63,.2),transparent)}
.dunkel h2,.dunkel h3{color:#fff}
.dunkel .lead,.dunkel p{color:#C3CDDB}
.dunkel .kicker{color:var(--orange-hell)}
.dunkel a:not(.btn){color:var(--orange-hell)}
.band{background:var(--flaeche-2)}

/* Bento */
.bento{display:grid;gap:1.1rem}
.kachel{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--schatten);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s}
a.kachel{text-decoration:none;color:inherit}
a.kachel:hover{transform:translateY(-4px);border-color:var(--orange)}
.kachel p{color:var(--leise);margin-bottom:0}
.kachel h3{margin-bottom:.6rem}
.kachel .nr{font:700 .8rem/1 Outfit,sans-serif;letter-spacing:.16em;color:var(--akzent-text);margin-bottom:1.6rem}
.kachel .mehr{margin-top:auto;padding-top:1.4rem;font:700 .98rem/1 Outfit,sans-serif;color:var(--akzent-text)}
.kachel .mehr::after{content:" →"}
.kachel.gross{background:linear-gradient(150deg,var(--marine),var(--tief));color:#fff;border-color:transparent}
.kachel.gross h3{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem)}
.kachel.gross p{color:#C3CDDB}
.kachel.gross .nr,.kachel.gross .mehr{color:var(--orange-hell)}
.kachel.gross::after{content:"";position:absolute;right:-5rem;bottom:-5rem;width:18rem;height:18rem;background:radial-gradient(closest-side,rgba(240,152,63,.45),transparent)}
.kachel.warm{background:linear-gradient(150deg,#FBE3C6,#F7C58E);border-color:transparent;color:#2a1a08}
.kachel.warm p{color:#4a3419}.kachel.warm .nr,.kachel.warm .mehr{color:#7A2A1E}
@media (prefers-color-scheme:dark){.kachel.warm{background:linear-gradient(150deg,#3b2a1a,#5a3a1d);color:#fff}.kachel.warm p{color:#E7D2B8}.kachel.warm .nr,.kachel.warm .mehr{color:var(--orange-hell)}}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.chips span{font:700 .78rem/1 Outfit,sans-serif;letter-spacing:.04em;padding:.5rem .8rem;border-radius:99px;border:1px solid rgba(127,140,160,.35)}
@media (min-width:44rem){.bento{grid-template-columns:repeat(2,1fr)}.bento .breit{grid-column:span 2}}
@media (min-width:64rem){.bento{grid-template-columns:repeat(6,1fr)}.bento .k3{grid-column:span 3}.bento .k2{grid-column:span 2}.bento .k4{grid-column:span 4}.bento .breit{grid-column:span 6}}

/* Produkte */
.produkte{display:grid;gap:1.1rem;margin-top:2.4rem}
.produkt{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:1.6rem;backdrop-filter:blur(8px);transition:background .3s,transform .3s}
.produkt:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.produkt .nr{font:700 .78rem/1 Outfit,sans-serif;letter-spacing:.16em;color:var(--orange-hell);display:block;margin-bottom:1rem}
.produkt h3{margin-bottom:.3rem;font-size:1.35rem}
.produkt .rolle{font-size:.92rem;color:var(--orange-hell)!important;margin-bottom:.8rem}
.produkt p:last-child{margin:0;font-size:.98rem}
.beta{display:inline-block;font:700 .68rem/1 Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .6rem;border-radius:99px;background:rgba(240,152,63,.18);color:var(--orange-hell);margin-left:.4rem;vertical-align:middle}
@media (min-width:44rem){.produkte{grid-template-columns:repeat(2,1fr)}}
@media (min-width:72rem){.produkte{grid-template-columns:repeat(4,1fr)}}
.screens{display:grid;gap:1.1rem;margin-top:1.1rem}
.screens figure{margin:0;border-radius:var(--r-s);overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#000;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.screens img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.screens figcaption{font-size:.85rem;padding:.7rem 1rem;color:#C3CDDB;background:rgba(7,18,38,.8)}
@media (min-width:44rem){.screens{grid-template-columns:repeat(3,1fr)}}
.hinweis-klein{font-size:.85rem;color:var(--leise);margin-top:1.4rem}
.dunkel .hinweis-klein{color:#97A5B9}

/* Judo-Verweis */
.judo{position:relative;border-radius:calc(var(--r) + .4rem);overflow:hidden;background:linear-gradient(120deg,var(--wein),#6E1F2A 60%,var(--tief));color:#fff;padding:clamp(1.8rem,5vw,3.6rem);display:grid;gap:1.6rem;align-items:center}
.judo h2{color:#fff;margin-bottom:.4em}
.judo p{color:#F0D8DC;margin:0;max-width:38rem}
.judo .kicker{color:var(--orange-hell)}
@media (min-width:52rem){.judo{grid-template-columns:1fr auto}}

/* Zwei Spalten / Prosa */
.zwei{display:grid;gap:2rem}
@media (min-width:60rem){.zwei{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.zwei.eng-links{grid-template-columns:.8fr 1.2fr}}
.prosa h2{margin-top:1.8em;font-size:clamp(1.4rem,3vw,1.9rem)}
.prosa h2:first-child{margin-top:0}
.liste{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:.7rem}
.liste li{position:relative;padding-left:1.7rem}
.liste li::before{content:"";position:absolute;left:0;top:.7em;width:.7rem;height:.7rem;border-radius:2px;background:var(--verlauf)}
.zitat{font:700 clamp(1.4rem,3.2vw,2.2rem)/1.25 Outfit,sans-serif;letter-spacing:-.015em;text-wrap:balance;margin:0}

/* Zeitleiste */
.zeit{list-style:none;margin:0;padding:0 0 0 1.4rem;border-left:2px solid var(--linie);display:grid;gap:1.8rem}
.zeit li{position:relative}
.zeit li::before{content:"";position:absolute;left:calc(-1.4rem - 7px);top:.55rem;width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px var(--bg)}
.zeit .jahr{font:700 .85rem/1 Outfit,sans-serif;letter-spacing:.12em;color:var(--akzent-text);display:block;margin-bottom:.3rem}
.zeit h3{font-size:1.15rem;margin-bottom:.25rem}
.zeit p{margin:0;color:var(--leise);font-size:.98rem}
.band .zeit li::before{box-shadow:0 0 0 5px var(--flaeche-2)}

/* Projekt-Karten */
.projekte{display:grid;gap:1.1rem}
@media (min-width:44rem){.projekte{grid-template-columns:repeat(2,1fr)}}
@media (min-width:66rem){.projekte{grid-template-columns:repeat(3,1fr)}}
.projekt{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:1.6rem;box-shadow:var(--schatten)}
.projekt h3{font-size:1.15rem;margin-bottom:.6rem}
.projekt p{font-size:.98rem;color:var(--leise);margin:0}
.projekt .tag{display:inline-block;font:700 .7rem/1 Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-text);margin-bottom:.9rem}

/* Fotostreifen */
.foto-reihe{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(1.25rem,calc((100vw - var(--breit))/2)) 1.4rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.foto-reihe figure{margin:0;flex:0 0 min(82vw,30rem);scroll-snap-align:center;border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:4/3;box-shadow:var(--schatten)}
.foto-reihe img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.foto-reihe figure:hover img{transform:scale(1.05)}
.foto-raster{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.foto-raster figure{margin:0;border-radius:var(--r-s);overflow:hidden;aspect-ratio:4/3}
.foto-raster img{width:100%;height:100%;object-fit:cover}
@media (min-width:52rem){.foto-raster{grid-template-columns:repeat(3,1fr)}}

/* Kontakt-Band */
.kontakt-band{text-align:center}
.kontakt-band .lead{margin-inline:auto}
.kontakt-band .aktionen{justify-content:center}

/* Seitenkopf innen */
.seitenkopf{padding:calc(var(--kopf) + clamp(3rem,7vw,6rem)) 0 clamp(2rem,5vw,4rem);position:relative;isolation:isolate;overflow:hidden}
.seitenkopf::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40rem 24rem at 90% -10%,rgba(240,152,63,.22),transparent 65%),radial-gradient(34rem 24rem at 0% 0%,rgba(18,40,74,.14),transparent 65%)}
.seitenkopf h1{font-size:clamp(2.2rem,6vw,4.2rem);max-width:18ch}

/* Formular */
.formular{display:grid;gap:1.1rem;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:clamp(1.4rem,4vw,2.4rem);box-shadow:var(--schatten)}
.feld{margin:0;display:grid;gap:.4rem}
.feld label{font:700 .92rem/1.2 Outfit,sans-serif}
.feld input,.feld select,.feld textarea{font:inherit;color:var(--text);background:var(--bg);border:1.5px solid var(--linie);border-radius:.9rem;padding:.9rem 1rem;width:100%;transition:border-color .2s,box-shadow .2s}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(240,152,63,.25)}
.feld-haken{display:flex;gap:.7rem;align-items:flex-start}
.feld-haken input{width:1.3rem;height:1.3rem;margin-top:.2rem;flex:none;accent-color:var(--orange-2)}
.feld-haken label{font:400 .95rem/1.5 "Instrument Sans",sans-serif}
.feld-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.klein{font-size:.88rem;color:var(--leise)}
.meldung{border-radius:1rem;padding:1.1rem 1.3rem;margin-bottom:1.2rem}
.meldung ul{margin:.4rem 0 0;padding-left:1.2rem}
.meldung-ok{background:rgba(47,111,79,.14);border:1px solid rgba(47,111,79,.5)}
.meldung-fehler{background:rgba(163,57,73,.12);border:1px solid rgba(163,57,73,.5)}
.kontakt-daten{display:grid;gap:1rem}
.kontakt-daten .kachel{padding:1.3rem 1.5rem}
.kontakt-daten b{font:700 .78rem/1 Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-text);display:block;margin-bottom:.4rem}

/* Fuß */
.fuss{background:var(--tief);color:#B4C0D2;padding:clamp(3rem,6vw,5rem) 0 2rem;position:relative}
.fuss::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--verlauf)}
.fuss-in{display:grid;gap:2.4rem}
@media (min-width:56rem){.fuss-in{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.fuss .mark{height:3rem;width:auto;color:#fff;margin-bottom:1rem}
.fuss .mark .dot{fill:#C5495B}
.fuss h2{font:700 .78rem/1 Outfit,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fuss a{color:#B4C0D2;text-decoration:none}
.fuss a:hover{color:var(--orange-hell)}
.fuss-unten{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);font-size:.86rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem}
.fuss-unten p{margin:0}

/* Einblenden beim Scrollen (nur mit JS; ohne JS bleibt alles sichtbar) */
.js .reveal{opacity:0;transform:translateY(1.6rem);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.da{opacity:1;transform:none}
.js .reveal:nth-child(2){transition-delay:.08s}.js .reveal:nth-child(3){transition-delay:.16s}.js .reveal:nth-child(4){transition-delay:.24s}

@media print{.kopf,.nav,.hero-bild,.scroll-hinweis{display:none!important}body{background:#fff;color:#000}.hero,.dunkel{background:#fff!important;color:#000!important}}

/* Leitsatz, Phasen, Tabelle, Linkkarten */
.leitsatz{display:grid;gap:1.1rem;counter-reset:ls}
.leitsatz>div{counter-increment:ls;position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:1.6rem 1.6rem 1.7rem}
.leitsatz>div::before{content:counter(ls);display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--verlauf);color:#1b1206;font:700 1.15rem/1 Outfit,sans-serif;margin-bottom:1rem}
.leitsatz h3{font-size:1.6rem;margin-bottom:.4rem}
.leitsatz p{margin:0;font-size:1rem}
@media (min-width:52rem){.leitsatz{grid-template-columns:repeat(3,1fr)}.leitsatz>div:not(:last-child)::after{content:"→";position:absolute;right:-1.05rem;top:2rem;z-index:2;color:var(--orange-hell);font:700 1.4rem/1 Outfit,sans-serif}}
.phasen{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:ph}
.phasen li{counter-increment:ph;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:1.3rem 1.3rem 1.4rem;box-shadow:var(--schatten)}
.phasen li::before{content:"0" counter(ph);display:block;font:700 .8rem/1 Outfit,sans-serif;letter-spacing:.16em;color:var(--akzent-text);margin-bottom:.9rem}
.phasen h3{font-size:1.15rem;margin-bottom:.4rem}
.phasen p{margin:0;font-size:.95rem;color:var(--leise)}
@media (min-width:44rem){.phasen{grid-template-columns:repeat(2,1fr)}}
@media (min-width:72rem){.phasen{grid-template-columns:repeat(5,1fr)}}
.tabelle-rahmen{overflow-x:auto;border-radius:var(--r);border:1px solid var(--linie);box-shadow:var(--schatten);background:var(--flaeche)}
.tabelle{width:100%;border-collapse:collapse;min-width:34rem;font-size:.98rem}
.tabelle th,.tabelle td{text-align:left;padding:.95rem 1.2rem;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle thead th{font:700 .8rem/1.2 Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-text);background:var(--flaeche-2)}
.tabelle tbody th{font-weight:700}
.tabelle tr:last-child>*{border-bottom:0}
.linkkarten{display:grid;gap:1.1rem}
@media (min-width:44rem){.linkkarten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.linkkarten{grid-template-columns:repeat(3,1fr)}}
.linkkarte{display:flex;flex-direction:column;gap:.35rem;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:1.5rem;box-shadow:var(--schatten);text-decoration:none;color:var(--text);transition:transform .3s,border-color .3s}
.linkkarte:hover{transform:translateY(-4px);border-color:var(--orange);color:var(--text)}
.linkkarte .tag{font:700 .72rem/1 Outfit,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-text)}
.linkkarte h3{margin:.3rem 0 .2rem;font-size:1.25rem}
.linkkarte p{margin:0;color:var(--leise);font-size:.96rem}
.linkkarte .adr{margin-top:auto;padding-top:.9rem;font:700 .95rem/1 Outfit,sans-serif;color:var(--akzent-text)}
.linkkarte .adr::after{content:" ↗"}
.kachel.gross.zwei-ton{background:linear-gradient(150deg,#6E1F2A,var(--tief))}
.zwei-spalten-liste{columns:1;column-gap:2rem}
@media (min-width:44rem){.zwei-spalten-liste{columns:2}}
.zwei-spalten-liste li{break-inside:avoid}

/* Menü: Untermenü Projekte unter Projektmanagement */
.nav-gruppe{display:contents}
.nav .unter a{font-size:clamp(1.2rem,5vw,1.5rem);padding-left:1.4rem;color:var(--leise)}
.nav .unter a::before{content:"– ";margin-right:.3rem}
.nav .unter a[aria-current]{color:var(--akzent-text)}
.nav-gruppe.aktiv>a:first-child{color:var(--akzent-text)}
@media (min-width:76rem){
  .nav-gruppe{display:block;position:relative}
  .nav-gruppe>a:first-child::after{content:"▾";font-size:.8em;margin-left:.35rem;opacity:.7}
  .nav .unter{position:absolute;left:0;top:100%;min-width:100%;padding:.4rem;border-radius:1rem;background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--schatten);opacity:0;visibility:hidden;transform:translateY(-.4rem);transition:opacity .2s,transform .2s,visibility .2s}
  .nav-gruppe:hover .unter,.nav-gruppe:focus-within .unter{opacity:1;visibility:visible;transform:none}
  .nav .unter a{font:700 .98rem/1 "Instrument Sans",sans-serif;padding:.8rem 1rem;display:block;border-radius:.7rem;color:var(--text)!important;white-space:nowrap}
  .nav .unter a::before{content:none}
  .start .kopf:not(.scroll) .nav-gruppe.aktiv>a:first-child{color:var(--orange-hell)}
}

/* Ehrenamt-Unterseiten: Browser-Vorschau, Steckbrief */
.vorschau{margin:0;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--linie);background:var(--flaeche);box-shadow:var(--schatten)}
.vorschau-leiste{display:flex;align-items:center;gap:.4rem;padding:.65rem .9rem;background:var(--flaeche-2);border-bottom:1px solid var(--linie);font:400 .82rem/1 "Instrument Sans",sans-serif;color:var(--leise)}
.vorschau-leiste i{width:.65rem;height:.65rem;border-radius:50%;background:var(--linie);display:block}
.vorschau-leiste span{margin-left:.6rem;background:var(--bg);border-radius:99px;padding:.35rem .8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vorschau img{width:100%;height:auto;display:block}
.vorschau figcaption{font-size:.84rem;color:var(--leise);padding:.7rem 1rem}
.steckbrief{display:grid;gap:.9rem;margin:0 0 1.5rem}
.steckbrief div{display:grid;gap:.15rem;padding-bottom:.9rem;border-bottom:1px solid var(--linie)}
.steckbrief dt{font:700 .75rem/1 Outfit,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-text)}
.steckbrief dd{margin:0}
.seite-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.seite-nav a{font:700 .92rem/1 Outfit,sans-serif;text-decoration:none;padding:.7rem 1.1rem;border-radius:99px;border:1px solid var(--linie);background:var(--flaeche);color:var(--text)}
.seite-nav a:hover,.seite-nav a[aria-current]{border-color:var(--orange)}