/* Schriften – lokal eingebunden, keine Verbindung zu Google (DSGVO) */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-600-italic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

/* Gestaltung: Leinen als Grund, Greige (warmes Grau-Beige) für die Bänder, Rot aus dem Zeichen der
   Innung als Akzent (Kordel, Knöpfe, Markierungen). Unter dem Kopf ein Faltenwurf
   wie ein Vorhang mit Kordel. Die Variablen heißen aus historischen Gründen
   noch "ocker", sie tragen jetzt das Rot des Zeichens. Überschriften in Fraunces (Serifenschrift mit
   weichen Formen), Fließtext in Source Sans 3. Kleine Beschriftungen als
   Kapitälchen mit Sperrung, wie auf einem Musteretikett. */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{
  --bg:#FBF7F1; --surface:#FFFFFF; --sunk:#F4ECE2; --line:#E6DACB;
  --fg:#211C16; --muted:#665B4E;
  --band:#E2DCD3; --band-deep:#2E2622; --on-band:#2A201B; --foot:#2E2622; --topbar:#B3241A;
  --ocker:#C8281A; --ocker-ink:#FFFFFF; --accent:#A8231A; --ok:#2F7D4F; --warn:#B4400C;
  --falte-a:#D8402F; --falte-b:#A9231A; --kordel:#E3B04B;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --w:1180px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#16130F; --surface:#201C18; --sunk:#29231E; --line:#3D352D;
  --fg:#F2ECE2; --muted:#B5AA9A;
  --band:#2A2421; --band-deep:#100F0E; --on-band:#FFFFFF;
  --ocker:#EA5A4B; --ocker-ink:#160F0E; --accent:#F08A7E; --ok:#5BC48A; --warn:#F39159;
  --falte-a:#B93226; --falte-b:#7E1A12; --kordel:#D9A640; --foot:#0E0D0C; --topbar:#7E1A12;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#16130F; --surface:#201C18; --sunk:#29231E; --line:#3D352D;
  --fg:#F2ECE2; --muted:#B5AA9A;
  --band:#2A2421; --band-deep:#100F0E; --on-band:#FFFFFF;
  --ocker:#EA5A4B; --ocker-ink:#160F0E; --accent:#F08A7E; --ok:#5BC48A; --warn:#F39159;
  --falte-a:#B93226; --falte-b:#7E1A12; --kordel:#D9A640; --foot:#0E0D0C; --topbar:#7E1A12;
  color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:18px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--ocker);outline-offset:2px}
.wrap{max-width:var(--w);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{margin:0;text-wrap:balance}
h1,h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.015em;line-height:1.02}
h1{font-size:clamp(2.8rem,7vw,5.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h1 em,h2 em{font-style:italic}
h3{font:700 1.2rem/1.3 var(--f-body)}
p{margin:0;max-width:65ch}
.eyebrow{font:700 .76rem/1 var(--f-body);text-transform:uppercase;letter-spacing:.16em;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--ocker);flex:none;box-shadow:0 4px 0 -0px color-mix(in srgb,var(--ocker) 45%,transparent)}
.lead{font-size:1.2rem;color:var(--muted)}
.zahl{font-variant-numeric:tabular-nums}

/* Faltenwurf mit Kordel unter dem Kopf */
.falten{height:14px;background:
  repeating-linear-gradient(90deg,var(--falte-b) 0,var(--falte-a) 9px,var(--falte-b) 18px);
  position:relative}
.falten::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:4px;
  background:repeating-linear-gradient(135deg,var(--kordel) 0 4px,color-mix(in srgb,var(--kordel) 70%,#5A3A0A) 4px 6px)}

/* Zeichen der Innung */
.lg{flex:none;display:block;height:auto;background:#FFFFFF;padding:5px 6px;border-radius:3px;box-sizing:content-box}

/* Kopf */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);transition:box-shadow .25s}
header.scrolled{box-shadow:0 8px 24px -16px rgba(0,0,0,.45)}
.topbar{--on-band:#FFFFFF;background:var(--topbar);color:var(--on-band);font:.84rem/1 var(--f-body)}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:8px;flex-wrap:wrap}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg)}
.brand{flex-direction:column;align-items:flex-start;gap:6px}
.brand .lg{width:250px;padding:4px 6px;transition:transform .4s}
.brand:hover .lg{transform:translateY(-2px)}
.brand small{margin:0 0 0 6px}
.brand b{display:block;font:600 1.42rem/1 var(--f-display);letter-spacing:-.01em}
.brand small{display:block;font:700 .64rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.menu{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.menu a{position:relative;display:block;padding:9px 11px;text-decoration:none;color:var(--fg);font:600 1rem/1 var(--f-body)}
.menu a::after{content:"";position:absolute;left:11px;right:11px;bottom:1px;height:2px;background:var(--ocker);transform:scaleX(0);transform-origin:center;transition:transform .25s}
.menu a:hover{color:var(--accent)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--fg);padding:9px 14px;font:600 .9rem var(--f-body);cursor:pointer;border-radius:99px}
@media (max-width:1060px){
  .burger{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--line);padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
  .menu.open{display:flex}
  .menu a{padding:13px 4px;border-bottom:1px solid var(--line)}
  .menu a::after{display:none}
}
@media (max-width:480px){.brand .lg{width:200px}.brand small{display:none}}

/* Knöpfe */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:99px;background:var(--ocker);color:var(--ocker-ink);text-decoration:none;font:700 1rem/1 var(--f-body);border:2px solid var(--ocker);cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn::after{content:"→";transition:transform .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
.btn:hover::after{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg);box-shadow:none}
.btn.light{background:transparent;color:var(--on-band);border-color:var(--on-band)}
.btn.light:hover{background:var(--on-band);color:var(--band);box-shadow:none}
.btn.noarrow::after{content:none}

/* Abschnitte */
section{padding-block:80px}
section + section{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:14px;margin-bottom:38px}
.band{background:var(--band);color:var(--on-band);position:relative;overflow:hidden}
/* Fischgrat-Gewebe, sehr zurückhaltend */
.band::before,.callout::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg stroke='%23756B5F' stroke-width='1.4' fill='none'%3E%3Cpath d='M0 5 5 0M5 10 10 5M10 5 15 10M15 0 20 5M0 15 5 10M5 20 10 15M10 15 15 20M15 10 20 15'/%3E%3C/g%3E%3C/svg%3E")}
.band .eyebrow,.band .lead,.band p{color:color-mix(in srgb,var(--on-band) 86%,transparent)}
.band a:not(.btn){color:var(--on-band)}
.band h1 em,.band h2 em{color:var(--ocker)}
.page-hero{padding-block:62px 56px}
.page-hero h1{margin-top:14px;font-size:clamp(2.5rem,6vw,4.4rem)}
.page-hero p{margin-top:16px;font-size:1.18rem}
.page-hero .deco{position:absolute;right:3%;bottom:0;height:100%;width:auto;opacity:.22;pointer-events:none;color:var(--ocker)}
@media (max-width:620px){.page-hero .deco{opacity:.09;right:-60px}}
.page-hero + .falten-unten,.hero + .falten-unten{display:none}

/* Startseite: Hero */
.hero{padding-block:72px 84px}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
.hero-grid > *{min-width:0}
.hero p.lead{margin-top:24px}
.hero .btns{margin-top:32px}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero{padding-block:56px 64px}}
.stats{display:flex;flex-wrap:wrap;margin-top:40px;border-top:1px solid color-mix(in srgb,var(--on-band) 25%,transparent)}
.stats div{padding:14px 26px 0 0;margin-right:26px;display:grid;gap:4px}
.stats b{font:600 2.3rem/1 var(--f-display);color:var(--ocker);font-variant-numeric:tabular-nums}
.stats span{font:700 .72rem/1.3 var(--f-body);text-transform:uppercase;letter-spacing:.12em;color:color-mix(in srgb,var(--on-band) 74%,transparent)}
@media (max-width:560px){.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.stats div{margin-right:0;padding-right:10px}.stats b{font-size:1.7rem}.stats span{font-size:.62rem}}

/* Fenster mit Vorhang (Hero und Rechner) */
.fenster-wrap{justify-self:center;width:min(400px,100%);display:grid;gap:14px;justify-items:center;margin:0;position:relative}
.fenster-wrap::before{content:"";position:absolute;inset:-6% -10% 18%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--surface) 85%,transparent),transparent);z-index:-1}
.fenster-wrap svg{filter:drop-shadow(0 18px 24px rgba(120,40,20,.22))}
.fenster-wrap svg{width:100%;height:auto;display:block}
.fenster-wrap figcaption{font-size:.92rem;line-height:1.45;color:color-mix(in srgb,var(--on-band) 80%,transparent);text-align:center;max-width:36ch}
.vh-l{transform-box:fill-box;transform-origin:left center}
.vh-r{transform-box:fill-box;transform-origin:right center}
@media (prefers-reduced-motion:no-preference){
  .hero .vh-l{animation:aufL 1.6s .2s cubic-bezier(.2,.8,.2,1) both}
  .hero .vh-r{animation:aufR 1.6s .2s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes aufL{from{transform:scaleX(2.05)}to{transform:none}}
@keyframes aufR{from{transform:scaleX(2.05)}to{transform:none}}

/* Vorhang-Rechner */
.rechner{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.rechner > *{min-width:0}
.felder{display:grid;gap:18px;margin-top:22px}
.feld{display:grid;gap:8px}
.feld .kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:600;font-size:.98rem}
.feld output{font:600 1.15rem var(--f-display);font-variant-numeric:tabular-nums;color:var(--accent)}
input[type=range]{width:100%;accent-color:var(--ocker);padding:0;border:0;background:none;height:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--line);background:var(--surface);font:600 .97rem var(--f-body);color:var(--fg);border-radius:99px;min-height:44px;transition:border-color .2s,background .2s,color .2s}
.chips button:hover{border-color:var(--fg)}
.chips button:focus-visible{outline:3px solid var(--ocker);outline-offset:2px}
.chips button[aria-pressed="true"]{border-color:var(--ocker);background:var(--ocker);color:var(--ocker-ink)}
.chips button small{font-weight:400;opacity:.8}
.r-out{background:var(--surface);border:1px solid var(--line);padding:26px;display:grid;gap:20px}
.r-bild{background:var(--sunk);border-radius:16px;padding:14px 14px 0;overflow:hidden}
.r-bild svg{display:block;width:100%;height:auto}
.r-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.r-zahlen div{padding:14px 12px 0 0;display:grid;gap:4px;align-content:start}
.r-zahlen b{font:600 clamp(1.6rem,3.4vw,2.2rem)/1 var(--f-display);font-variant-numeric:tabular-nums}
.r-zahlen span{font:700 .7rem/1.3 var(--f-body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.r-zahlen .gross b{color:var(--accent)}
@media (max-width:860px){.rechner{grid-template-columns:1fr}}
@media (max-width:460px){.r-zahlen{grid-template-columns:1fr 1fr}.r-zahlen div:last-child{grid-column:1/-1}}
.r-weg{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:.95rem;color:var(--muted)}
.r-weg li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline}
.r-weg li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ocker);transform:translateY(-2px)}
.r-weg li b{color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}

/* Raster und Karten */
section.hell{background:var(--sunk);border-top-color:var(--line)}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1060px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}
.item{display:grid;gap:10px;align-content:start;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:transform .25s,box-shadow .25s,border-color .25s}
.item:hover{transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(0,0,0,.5);border-color:color-mix(in srgb,var(--ocker) 70%,var(--line))}
.item p,.item li{color:var(--muted)}
.item ul{margin:0;padding-left:18px;display:grid;gap:4px}
.item .tag{font:700 .7rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.item .ico{width:54px;height:54px;display:grid;place-items:center;background:var(--band);color:var(--ocker);border-radius:50%;transition:background .25s,color .25s}
.item:hover .ico{background:var(--ocker);color:var(--ocker-ink)}
.item .ico svg{width:24px;height:24px}
.item .kurz{font:600 1.7rem/1.05 var(--f-display);color:var(--fg)}
.item .nr{font:600 1rem var(--f-display);color:var(--accent);font-style:italic}

/* Arbeitsgebiete als Musterkarten */
.muster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1060px){.muster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.muster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.muster{grid-template-columns:1fr}}
.karte{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:transform .25s,box-shadow .25s}
.karte:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 20px 36px -26px rgba(0,0,0,.55)}
.karte .stoff{height:92px;position:relative;background:var(--sw)}
.karte .stoff::after{content:"";position:absolute;inset:0;opacity:.22;background:var(--pat)}
.karte .stoff span{position:absolute;left:12px;bottom:-14px;width:30px;height:30px;border-radius:50%;background:var(--ocker);box-shadow:0 0 0 3px var(--surface);display:grid;place-items:center;font:600 .95rem var(--f-display);color:var(--ocker-ink);z-index:1}
.karte div.t{padding:24px 16px 18px;display:grid;gap:6px;align-content:start}
.karte h3{font:600 1.22rem/1.2 var(--f-display)}
.karte p{font-size:.95rem;color:var(--muted)}

/* Zweispaltige Blöcke */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split > *{min-width:0}
.split p + p{margin-top:14px}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
.callout{background:var(--band);color:var(--on-band);padding:34px;display:grid;gap:16px;position:relative;overflow:hidden;border-radius:16px}
.callout > *{position:relative}
.callout h2,.callout h3{color:var(--on-band)}
.callout h3.gross{font:600 2rem/1.05 var(--f-display)}
.callout p,.callout li{color:color-mix(in srgb,var(--on-band) 88%,transparent)}
.callout .eyebrow{color:color-mix(in srgb,var(--on-band) 78%,transparent)}
.callout .btn{justify-self:start}
.callout ul{margin:0;padding-left:18px;display:grid;gap:4px}
.callout a:not(.btn){color:var(--on-band)}

/* Ablauf in Schritten */
.ablauf{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--line);background:var(--surface);counter-reset:s;border-radius:16px}
.ablauf li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:20px;border-top:1px dashed var(--line);counter-increment:s}
.ablauf li:first-child{border-top:0}
.ablauf li::before{content:counter(s);width:44px;height:44px;display:grid;place-items:center;background:var(--ocker);color:var(--ocker-ink);font:600 1.35rem var(--f-display);border-radius:50%;box-shadow:inset 0 0 0 3px var(--ocker),inset 0 0 0 5px color-mix(in srgb,var(--ocker-ink) 25%,transparent)}
.ablauf p{color:var(--muted);font-size:.97rem;margin-top:2px}

/* Berufe / Schwerpunkte */
.berufe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.beruf{padding:24px;display:grid;gap:10px;align-content:start;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:16px}
.beruf .dauer{font:700 .7rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.beruf h3{font:600 1.5rem/1.1 var(--f-display)}
.beruf p{color:var(--muted);font-size:.97rem}
.beruf ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.beruf li{display:grid;grid-template-columns:16px 1fr;gap:8px;font-size:.95rem}
.beruf li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ocker);margin-top:9px}
@media (max-width:1000px){.berufe{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.berufe{grid-template-columns:1fr}}
section.band-aus{background:var(--band);color:var(--on-band);position:relative;overflow:hidden;border-top:0}
section.band-aus > .wrap{position:relative}
section.band-aus + section{border-top:0}
.band-aus .lead,.band-aus .eyebrow{color:color-mix(in srgb,var(--on-band) 86%,transparent)}
.band-aus .beruf{border:0;box-shadow:0 24px 40px -28px rgba(0,0,0,.6)}

/* Orte und Geschäftsstelle */
.office{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.office > *{min-width:0}
@media (max-width:860px){.office{grid-template-columns:1fr}}
.orte{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));column-gap:28px;border-top:1px solid var(--line)}
.orte a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg);font:600 1.45rem/1.15 var(--f-display);transition:background .2s,color .2s}
.orte a span{font:600 .82rem var(--f-body);color:var(--muted);white-space:nowrap}
.orte a:hover{background:var(--surface);color:var(--accent)}
.kreise{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:.92rem;color:var(--muted)}
.plate{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:16px;padding:26px;display:grid;gap:18px;min-width:0;align-content:start}
.plate dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px}
.plate dt{font:700 .72rem/1.9 var(--f-body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.plate dd{margin:0;font-weight:600;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.open-now{display:inline-flex;align-items:center;gap:8px;font:600 .88rem var(--f-body)}
.open-now i{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.open-now.on i{background:var(--ok);animation:ping 2s infinite}

/* Vorstand */
.person{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;gap:10px;align-content:start;transition:transform .25s,box-shadow .25s}
.person:hover{transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(0,0,0,.5)}
.person .avatar{width:60px;height:60px;display:grid;place-items:center;background:var(--band);color:var(--ocker);font:600 1.45rem var(--f-display);border-radius:50%;box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--ocker)}
.person .role{font:700 .7rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.person h3{font:600 1.75rem/1.05 var(--f-display)}
.person address{font-style:normal;color:var(--muted);font-size:.97rem;line-height:1.55;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.person .co{color:var(--fg);font-weight:600}
.person.lead-p{border-top:4px solid var(--ocker)}

/* Verzeichnis */
.tools{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;margin-bottom:12px}
@media (max-width:760px){.tools{grid-template-columns:1fr 1fr}.tools #q{grid-column:1/-1}}
@media (max-width:420px){.tools{grid-template-columns:1fr}}
input,select,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);padding:12px 14px;width:100%;border-radius:16px;transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:3px solid var(--ocker);outline-offset:-1px}
.count{font:600 .9rem var(--f-body);color:var(--muted);margin:8px 0 14px}
.dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.co-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:8px;align-content:start;min-width:0;position:relative;transition:transform .2s,box-shadow .2s;animation:pop .35s ease both}
.co-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:6px;border-radius:16px 16px 0 0;background:repeating-linear-gradient(90deg,var(--falte-b) 0,var(--falte-a) 5px,var(--falte-b) 10px)}
.co-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -22px rgba(0,0,0,.5)}
.co-card h3{font:700 1.1rem/1.3 var(--f-body);overflow-wrap:anywhere;margin-top:4px}
.co-card .inh{font-size:.95rem;margin-top:-4px}
.co-card .k{font:700 .68rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.co-card .k span:last-child{display:flex;gap:6px;flex-wrap:wrap}
.co-card .rolle{background:var(--ocker);color:var(--ocker-ink);padding:4px 8px;border-radius:99px;letter-spacing:.06em}
.co-card .gast{border:1px solid var(--line);color:var(--fg);padding:3px 7px;border-radius:99px}
.co-card address{font-style:normal;font-size:.95rem;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.co-card .c{font-size:.92rem;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.empty{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;grid-column:1/-1;color:var(--muted)}
.hint{margin-top:28px;padding:18px 20px;background:var(--sunk);border-left:4px solid var(--ocker);color:var(--muted);font-size:.98rem;border-radius:0 16px 16px 0}
section.hell .hint{background:var(--surface)}

/* Fragen */
details.faq{border-top:1px solid var(--line);padding:18px 4px}
details.faq:last-child{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;font:700 1.12rem/1.35 var(--f-body);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";flex:none;width:32px;height:32px;display:grid;place-items:center;background:var(--sunk);color:var(--fg);font:600 1.2rem var(--f-display);border-radius:50%;transition:background .3s}
details.faq[open] summary::after{content:"–";background:var(--ocker);color:var(--ocker-ink)}
details.faq p{margin-top:10px;color:var(--muted);animation:in .3s ease}

/* Ausbildungsseite */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:var(--surface);border-radius:16px}
.step{padding:22px;display:grid;gap:8px;align-content:start;border-right:1px dashed var(--line)}
.step:last-child{border-right:0}
.step .yr{font:700 .7rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.step p,.step li{color:var(--muted);font-size:.97rem}
.step ul{margin:0;padding-left:18px;display:grid;gap:4px}
.step .bar{height:6px;background:var(--sunk);margin-top:6px;overflow:hidden;border-radius:99px}
.step .bar i{display:block;height:100%;background:var(--ocker);border-radius:99px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px dashed var(--line)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px dashed var(--line)}.step:last-child{border-bottom:0}}
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ladder li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.ladder li::before{content:"";width:12px;height:12px;border-radius:50%;border:3px solid var(--ocker);margin-top:7px}
.ladder b{display:block}
.ladder span{color:var(--muted);font-size:.97rem}
.wahl{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.wahl li{padding:8px 14px;border:1px solid var(--line);background:var(--surface);font-size:.97rem;border-radius:99px}

/* Links */
.links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));column-gap:28px;border-top:1px solid var(--line)}
.links li{border-bottom:1px solid var(--line)}
.links a{display:grid;gap:2px;padding:16px 6px;text-decoration:none;color:var(--fg)}
.links a b{font:700 1.05rem var(--f-body)}
.links a span{font-size:.88rem;color:var(--muted)}
.links a:hover b{color:var(--accent)}

/* Formular */
form{display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.row2{grid-template-columns:1fr}}
label{display:grid;gap:6px;font-size:.95rem;font-weight:600}
.note{font-size:.92rem;color:var(--muted)}
.result{background:var(--sunk);border-left:4px solid var(--ocker);padding:18px;display:grid;gap:10px;animation:in .3s ease}
.result pre{margin:0;white-space:pre-wrap;font:.9rem/1.5 ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.err{color:var(--warn);font-size:.95rem;font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.93rem;color:var(--muted)}
.check input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--ocker)}
.ok-box{background:color-mix(in srgb,var(--ok) 12%,var(--surface));border-left:4px solid var(--ok);padding:18px;font-weight:600;animation:in .3s ease}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}

/* Fuß */
footer{--on-band:#FFFFFF;background:var(--foot);color:var(--on-band)}
footer .wrap{padding-block:52px 28px}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
footer h2{font:700 .9rem var(--f-body);text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
footer p,footer li,footer address{font-size:.95rem;color:color-mix(in srgb,var(--on-band) 80%,transparent);font-style:normal}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer a{color:var(--on-band)}
.flogo{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.flogo .lg{width:240px;background:none;padding:0;border-radius:0}
.flogo b{font:600 1.3rem/1.02 var(--f-display);color:#FFFFFF}
footer .zeiten{margin-top:10px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:.9rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.legal{margin-top:36px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--on-band) 20%,transparent);font-size:.85rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:color-mix(in srgb,var(--on-band) 68%,transparent)}
.legal a{color:inherit}
.legal nav{display:flex;gap:18px}
@media (max-width:620px){.topbar span:first-child{display:none}.topbar .wrap{justify-content:center}}
@media (max-width:420px){.topbar{font-size:.74rem}.topbar span{white-space:nowrap}}

/* Rechtstexte */
.doc{display:grid;gap:14px;justify-items:start}
.doc > *{max-width:72ch}
.doc h2{font-size:1.9rem;margin-top:22px}
.doc h3{font-size:1.15rem;margin-top:8px}
.doc p,.doc li{color:var(--muted)}
.doc ul{margin:0;padding-left:20px;display:grid;gap:4px}
.doc strong{color:var(--fg)}

/* Bewegung */
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}
@keyframes in{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:.3;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:.5;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,125,79,.6)}80%,100%{box-shadow:0 0 0 8px rgba(47,125,79,0)}}
.js .rv{transform:translateY(16px);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{transform:none}
.js .item.rv.in:hover,.js .person.rv.in:hover{transform:translateY(-3px)}
.js .karte.rv.in:hover{transform:translateY(-4px) rotate(-.4deg)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{transform:none}}