/* Schriften – lokal eingebunden, keine Verbindung zu Google (DSGVO) */
@font-face{font-family:"Big Shoulders Display";src:url("fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url("fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url("fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans-latin-wght-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

/* Grundlagen */
: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}
/* Layout: Bänder in Fliesengrün wie die Kacheln im alten Schlachterladen, mit feinem
   Kachelfugen-Muster. Helle Flächen kühl wie ein Kühlhaus. Das Rot aus dem Zeichen des Fleischerhandwerks ist
   der Akzent (Buttons, Links), Messing für Details im Band. Überschriften in einer
   schmalen, kräftigen Schildschrift in Versalien. */
:root{
  --bg:#F4F7F5; --surface:#FFFFFF; --sunk:#E6EDE9; --line:#D2DCD6;
  --fg:#16201C; --muted:#55625C;
  --band:#1D3A31; --band-deep:#0E1F1A; --on-band:#FFFFFF;
  --messing:#D4B26A; --btn-ink:#16201C;
  --rot:#C50A4F; --accent:#A30842; --btn:#C50A4F; --btn-on:#FFFFFF; --ok:#2F8F55;
  --rose:#FBEEF3; --rose-line:#F0D3DE; --band-rot:#C50A4F; --band-rot-deep:#9E0840;
  --z1:#7E1820; --z2:#C4525C; --z3:#E5A3A0; --z4:#9A7A62; --z5:#6A5444;
  --f-display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --w:1180px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1412; --surface:#161F1C; --sunk:#1E2925; --line:#2D3A35;
  --fg:#EDF3F0; --muted:#A4B3AC;
  --band:#17302A; --band-deep:#070F0C; --on-band:#FFFFFF;
  --messing:#DCBE7C; --btn-ink:#16201C;
  --rot:#EE4A86; --accent:#F48BB1; --btn:#D51E63; --btn-on:#FFFFFF; --ok:#4ADE80;
  --rose:#1C1418; --rose-line:#3A2630; --band-rot:#8E0B3D; --band-rot-deep:#5E0628;
  --z1:#A3222B; --z2:#D9636C; --z3:#EBB0AC; --z4:#B08F74; --z5:#87705E;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1412; --surface:#161F1C; --sunk:#1E2925; --line:#2D3A35;
  --fg:#EDF3F0; --muted:#A4B3AC;
  --band:#17302A; --band-deep:#070F0C; --on-band:#FFFFFF;
  --messing:#DCBE7C; --btn-ink:#16201C;
  --rot:#EE4A86; --accent:#F48BB1; --btn:#D51E63; --btn-on:#FFFFFF; --ok:#4ADE80;
  --rose:#1C1418; --rose-line:#3A2630; --band-rot:#8E0B3D; --band-rot-deep:#5E0628;
  --z1:#A3222B; --z2:#D9636C; --z3:#EBB0AC; --z4:#B08F74; --z5:#87705E;
  color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:17px/1.65 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:2px solid var(--rot);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);text-transform:uppercase;letter-spacing:.01em;line-height:.94}
h1{font-size:clamp(3rem,8vw,6.2rem);font-weight:900}
h2{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:800}
h3{font:700 1.2rem/1.25 var(--f-body);letter-spacing:-.01em}
p{margin:0;max-width:65ch}
.eyebrow{font:500 .74rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--rot);flex:none}
.lead{font-size:1.15rem;color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:400}

/* Kachelreihe unter dem Kopf */
.fliese{height:12px;border-bottom:3px solid var(--rot);background:
  linear-gradient(90deg,color-mix(in srgb,var(--on-band) 26%,transparent) 1px,transparent 1px) 0 0/16px 100%,var(--band)}

/* Zeichen des Fleischerhandwerks (assets/logo.svg, Seitenverhältnis 396:465) */
.lg{flex:none;display:block;height:auto}

/* Header */
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,.5)}
.topbar{background:var(--band-deep);color:var(--on-band);font:.8rem/1 var(--f-mono)}
.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 .lg{width:46px;transition:transform .4s}
.brand:hover .lg{transform:translateY(-2px)}
.brand b{display:block;font:800 1.5rem/.92 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.brand small{display:block;font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;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 .98rem/1 var(--f-body)}
.menu a::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:var(--rot);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.menu a:hover{color:var(--accent)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu a[aria-current="page"]{color:var(--accent)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--fg);padding:8px 12px;font:500 .85rem var(--f-mono);cursor:pointer}
@media (max-width:960px){
  .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:12px 4px;border-bottom:1px solid var(--line)}
  .menu a::after{display:none}
}
@media (max-width:420px){.brand b{font-size:1.3rem}.brand .lg{width:38px}.brand small{display:none}}

/* Buttons */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:2px;background:var(--btn);color:var(--btn-on);text-decoration:none;font:700 .98rem/1 var(--f-body);border:2px solid var(--btn);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 var(--btn)}
.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:76px}
section + section{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:14px;margin-bottom:36px}
.band{background:var(--band);color:var(--on-band);position:relative;overflow:hidden}
/* Kachelfugen im Verband, sehr zurückhaltend */
.band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36'%3E%3Cpath d='M0 .5H72M0 18.5H72M.5 0V18M36.5 18V36' stroke='white' fill='none'/%3E%3C/svg%3E")}
.band .eyebrow,.band .lead,.band p{color:color-mix(in srgb,var(--on-band) 82%,transparent)}
.band a:not(.btn){color:var(--on-band)}
.band h1 em{font-style:normal;color:var(--messing)}
.band .eyebrow::before,.callout .eyebrow::before{background:var(--messing)}
.deco{position:absolute;pointer-events:none;opacity:.08}
.deco .f{fill:none;stroke:var(--on-band);stroke-width:2}
.deco .s{fill:var(--on-band)}
.page-hero{padding-block:58px 52px}
.page-hero h1{margin-top:14px;font-size:clamp(2.6rem,6.4vw,4.8rem)}
.page-hero p{margin-top:16px;font-size:1.12rem}
.page-hero .deco{right:3%;top:14px;width:min(30vw,240px);height:auto}

/* Startseite: Hero */
.hero{padding-block:76px 72px}
.hero-grid{display:grid;grid-template-columns:1.35fr 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}
.hero .deco{right:-60px;bottom:-90px;width:min(52vw,480px);height:auto;opacity:.06}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}}
.stats{display:flex;flex-wrap:wrap;gap:0;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:800 2.1rem/1 var(--f-display);color:var(--messing)}
.stats span{font:.74rem/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--on-band) 72%,transparent)}
.plate{background:var(--surface);color:var(--fg);border:1px solid var(--line);padding:26px;display:grid;gap:18px;min-width:0;align-content:start}
.hero .plate{background:color-mix(in srgb,var(--on-band) 7%,transparent);border:1px solid color-mix(in srgb,var(--on-band) 34%,transparent);color:var(--on-band)}
.hero .plate .eyebrow,.hero .plate dt{color:color-mix(in srgb,var(--on-band) 76%,transparent)}
.hero .plate .open-now i{background:color-mix(in srgb,var(--on-band) 60%,transparent)}
.hero .plate .open-now.on i{background:#4ADE80}
.plate dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px}
.plate dt{font:.74rem/1.6 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.plate dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.open-now{display:inline-flex;align-items:center;gap:8px;font:500 .82rem var(--f-mono)}
.open-now i{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.open-now.on i{background:var(--ok);animation:ping 2s infinite}

/* Kerntemperatur */
.kern{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:start}
.kern > *{min-width:0}
.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:9px 14px;border:1px solid var(--line);background:var(--surface);font:600 .95rem var(--f-body);color:var(--fg);transition:border-color .2s,background .2s,color .2s}
.chips button:hover{border-color:var(--rot)}
.chips button:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
.chips.tiere button[aria-pressed="true"]{background:var(--band);border-color:var(--band);color:var(--on-band)}
.chips.stuecke button[aria-pressed="true"]{border-color:var(--rot);background:var(--sunk)}
.kern .label{margin:26px 0 10px}
.kern .label:first-of-type{margin-top:22px}
.thermo{background:var(--surface);border:1px solid var(--line);padding:28px;display:grid;gap:18px}
.thermo .kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.thermo .grad{font:500 clamp(3rem,7vw,4.4rem)/1 var(--f-mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.thermo .grad small{font-size:.42em;color:var(--muted);letter-spacing:0;margin-left:4px}
.thermo .urteil{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;font:600 .95rem var(--f-body);background:var(--sunk);border-left:4px solid var(--zc,var(--muted))}
.thermo h3{font-size:1.35rem}
.skala{position:relative;height:64px;background:var(--sunk);margin-top:6px}
.skala .zone{position:absolute;top:0;bottom:0;background:var(--zc)}
.stufen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.stufen li{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem}
.stufen i{width:14px;height:14px;background:var(--zc);flex:none}
.stufen b{font:400 .85rem var(--f-mono);color:var(--muted)}
.skala .nadel{position:absolute;top:-8px;bottom:-8px;width:3px;margin-left:-1.5px;background:var(--fg);transition:left .15s}
.skala .nadel::before{content:"";position:absolute;top:-4px;left:50%;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--fg)}
.ticks{position:relative;height:20px;font:.72rem/1 var(--f-mono);color:var(--muted)}
.ticks span{position:absolute;transform:translateX(-50%);top:6px}
.ticks span:first-child{transform:none}.ticks span:last-child{transform:translateX(-100%)}
.thermo input[type=range]{width:100%;padding:0;border:0;background:none;accent-color:var(--rot);margin:0}
.thermo .tipp{font-size:.95rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.thermo .tipp b{color:var(--fg)}
@media (max-width:860px){.kern{grid-template-columns:1fr}}
@media (max-width:480px){.thermo{padding:18px}.skala .zone span{font-size:.6rem}}

/* Orte */
.orte{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,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:800 1.5rem/1.1 var(--f-display);text-transform:uppercase;transition:background .2s,color .2s}
.orte a span{font:500 .8rem var(--f-mono);color:var(--muted);text-transform:none}
.orte a:hover{background:var(--surface);color:var(--accent)}

/* Raster */
.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))}
@media (max-width:960px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.item{display:grid;gap:10px;align-content:start;padding:24px;background:var(--surface);border:1px solid var(--line);transition:transform .25s,box-shadow .25s,border-color .25s}
.item:hover{transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(0,0,0,.55);border-color:color-mix(in srgb,var(--rot) 40%,var(--line))}
.item p{color:var(--muted)}
.item .tag{font:.72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rot)}
.item .ico{width:46px;height:46px;display:grid;place-items:center;background:var(--sunk);color:var(--accent);transition:background .25s,color .25s}
.item:hover .ico{background:var(--band);color:var(--messing)}
.item .ico svg{width:23px;height:23px}

/* 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}
.callout > *{position:relative}
.callout::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36'%3E%3Cpath d='M0 .5H72M0 18.5H72M.5 0V18M36.5 18V36' stroke='white' fill='none'/%3E%3C/svg%3E")}
.callout h2,.callout h3{color:var(--on-band)}
.callout p,.callout li{color:color-mix(in srgb,var(--on-band) 86%,transparent)}
.callout .eyebrow{color:color-mix(in srgb,var(--on-band) 75%,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)}

/* Berufe auf der Startseite */
.berufe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);background:var(--surface)}
.beruf{padding:28px;display:grid;gap:10px;align-content:start}
.beruf + .beruf{border-left:1px solid var(--line)}
.beruf .dauer{font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rot)}
.beruf h3{font:800 1.9rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.beruf p{color:var(--muted)}
.beruf ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.beruf li{display:grid;grid-template-columns:18px 1fr;gap:8px;color:var(--fg);font-size:.97rem}
.beruf li::before{content:"";width:10px;height:10px;background:var(--rot);margin-top:8px}
@media (max-width:760px){.berufe{grid-template-columns:1fr}.beruf + .beruf{border-left:0;border-top:1px solid var(--line)}}

/* Vorstand */
.person{background:var(--surface);border:1px solid var(--line);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,.55)}
.person .avatar{width:58px;height:58px;display:grid;place-items:center;background:var(--band);color:var(--on-band);font:800 1.4rem var(--f-display);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--rot)}
.person .role{font:.72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rot);margin-top:6px}
.person h3{font:800 1.9rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.person address{font-style:normal;color:var(--muted);font-size:.97rem;line-height:1.55;overflow-wrap:anywhere}
.person .co{color:var(--fg);font-weight:600}
.person.lead-p{border-top:4px solid var(--rot)}

/* Verzeichnis */
.tools{display:grid;grid-template-columns:1fr auto auto;gap:12px;margin-bottom:12px}
@media (max-width:700px){.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:0;transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rot);outline-offset:-1px}
.count{font:.85rem var(--f-mono);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-top:4px solid var(--band);padding:18px;display:grid;gap:8px;align-content:start;min-width:0;transition:transform .2s,box-shadow .2s;animation:pop .35s ease both}
.co-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -22px rgba(0,0,0,.55)}
.co-card h3{font:700 1.08rem/1.3 var(--f-body);overflow-wrap:anywhere}
.co-card .inh{font-size:.93rem;color:var(--fg);margin-top:-4px}
.co-card .k{font:.68rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px;align-items:center}
.co-card .vs{background:var(--rot);color:#fff;padding:4px 7px;letter-spacing:.06em}
.co-card address{font-style:normal;font-size:.93rem;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.co-card .c{font-size:.88rem;overflow-wrap:anywhere}
.empty{background:var(--surface);border:1px solid var(--line);padding:28px;grid-column:1/-1;color:var(--muted)}
.hint{margin-top:28px;padding:18px 20px;background:var(--sunk);border-left:3px solid var(--rot);color:var(--muted);font-size:.97rem}

/* 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.1rem/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:30px;height:30px;display:grid;place-items:center;background:var(--sunk);color:var(--accent);font:500 1.1rem var(--f-mono);transition:background .3s,color .3s}
details.faq[open] summary::after{content:"–";background:var(--rot);color:#fff}
details.faq p{margin-top:10px;color:var(--muted);animation:in .3s ease}

/* Ausbildung */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);background:var(--surface)}
.step{padding:24px;display:grid;gap:8px;align-content:start;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step .yr{font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rot)}
.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}
.step .bar i{display:block;height:100%;background:var(--rot)}
@media (max-width:760px){.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}}
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ladder li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.ladder li::before{content:"";width:28px;height:3px;background:var(--rot);margin-top:12px}
.ladder b{display:block}
.ladder span{color:var(--muted);font-size:.95rem}
.wahl{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.wahl li{padding:8px 12px;border:1px solid var(--line);background:var(--surface);font-size:.95rem}

/* Links */
.links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0;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.02rem var(--f-body)}
.links a span{font:.8rem var(--f-mono);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:.93rem;font-weight:600}
.note{font-size:.88rem;color:var(--muted)}
.result{background:var(--sunk);border-left:4px solid var(--rot);padding:18px;display:grid;gap:10px;animation:in .3s ease}
.result pre{margin:0;white-space:pre-wrap;font:.88rem/1.5 var(--f-mono);overflow-wrap:anywhere}
.err{color:var(--rot);font-size:.93rem;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:.9rem;color:var(--muted)}
.check input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--rot)}
.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{background:var(--band-deep);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 .95rem var(--f-body);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
footer p,footer li,footer address{font-size:.94rem;color:color-mix(in srgb,var(--on-band) 78%,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:12px;margin-bottom:14px}
.flogo .lg{width:40px}
.flogo b{font:800 1.35rem/.95 var(--f-display);text-transform:uppercase;color:#FFFFFF}
footer .zeiten{margin-top:10px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:.88rem;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:.8rem var(--f-mono);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:color-mix(in srgb,var(--on-band) 62%,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}}

/* Rechtstexte */
.doc{display:grid;gap:14px;justify-items:start}
.doc > *{max-width:72ch}
.doc h2{font-size:2rem;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,143,85,.6)}80%,100%{box-shadow:0 0 0 8px rgba(47,143,85,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== Lebendigere Startseite ============================================ */
.hero{padding-block:72px 84px}
.hero-grid{grid-template-columns:1.25fr 1fr}
/* Schaufenster: großes Zeichen mit Preisschildern wie in der Theke */
.schau{position:relative;justify-self:center;width:min(360px,100%);aspect-ratio:396/465;max-width:100%}
.schau::before{content:"";position:absolute;inset:-18%;background:radial-gradient(closest-side,color-mix(in srgb,var(--band-rot) 55%,transparent),transparent 72%);z-index:0}
.schau-logo{position:relative;z-index:1;width:100%;height:auto;display:block;filter:drop-shadow(0 26px 30px rgba(0,0,0,.35));animation:schweben 8s ease-in-out infinite}
.schild{position:absolute;z-index:2;background:#FFFDF8;color:#16201C;padding:12px 16px 10px 22px;display:grid;gap:2px;box-shadow:0 14px 26px -12px rgba(0,0,0,.55);border-radius:3px;transform-origin:50% -30px;animation:pendeln 6s ease-in-out infinite}
.schild::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--band);box-shadow:inset 0 0 0 1.5px #FFFDF8}
.schild small{font:500 .62rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#55625C}
.schild b{font:800 1.55rem/1 var(--f-display);text-transform:uppercase;color:#C50A4F}
.schild.s1{left:-14%;top:12%;--r:-5deg;transform:rotate(-5deg)}
.schild.s2{right:-12%;top:46%;--r:4deg;transform:rotate(4deg);animation-delay:-2s}
.schild.s3{left:-4%;bottom:4%;--r:-2deg;transform:rotate(-2deg);animation-delay:-4s}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pendeln{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) * -.6))}}
@media (max-width:820px){.schau{width:min(260px,70%);margin-top:16px}.schild b{font-size:1.25rem}.schild.s1{left:-22%}.schild.s2{right:-20%}}

/* Laufband mit Spezialitäten */
.laufband{background:var(--band-rot);color:#fff;overflow:hidden;display:flex;border-block:1px solid var(--band-rot-deep)}
.laufband ul{list-style:none;margin:0;padding:14px 0;display:flex;flex:none;gap:0;animation:lauf 46s linear infinite}
.laufband li{font:800 1.7rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;display:flex;align-items:center}
.laufband li::after{content:"";width:12px;height:12px;margin:0 26px;background:currentColor;transform:rotate(45deg);opacity:.55}
.laufband:hover ul{animation-play-state:paused}
@keyframes lauf{to{transform:translateX(-100%)}}

/* Karten der Innung: farbige Symbole */
.item .ico{background:var(--rot);color:#fff}
.item:hover .ico{background:var(--band);color:var(--messing)}
.item{border-top:3px solid transparent}
.item:hover{border-top-color:var(--rot)}

/* Rosé-Fläche */
section.rose{background:var(--rose);border-top-color:var(--rose-line)}
section.rose + section{border-top-color:var(--rose-line)}

/* Saisonkalender */
.saison{display:grid;gap:0;background:var(--surface);border:1px solid var(--rose-line)}
.sz-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;align-items:center;padding:16px 20px;border-top:1px solid var(--rose-line)}
.sz-kopf{border-top:0;padding-block:12px 6px}
.sz-t h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sz-t p{color:var(--muted);font-size:.93rem;margin-top:2px}
.sz-m{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.sz-m span{font:500 .7rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;padding:6px 0;border-radius:2px}
.sz-m span.akt{background:var(--rot);color:#fff}
.sz-m i{height:26px;background:var(--sunk);border-radius:2px;position:relative}
.sz-m i.an{background:color-mix(in srgb,var(--rot) 55%,var(--surface))}
.sz-m i.akt{box-shadow:0 0 0 2px var(--fg)}
.sz-m i.an.akt{background:var(--rot)}
.jetzt{display:none;font:500 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--rot);color:#fff;padding:5px 7px}
.sz-row.ist .jetzt{display:inline-block}
.sz-row.ist{background:color-mix(in srgb,var(--rot) 6%,var(--surface))}
@media (max-width:720px){.sz-row{grid-template-columns:1fr;gap:10px;padding:14px}.sz-kopf{display:none}.sz-m i{height:18px}
  .sz-row .sz-m{position:relative;padding-bottom:16px}
  .sz-row .sz-m::after{content:"J F M A M J J A S O N D";position:absolute;left:0;right:0;bottom:0;font:500 .62rem/1 var(--f-mono);color:var(--muted);word-spacing:0;display:grid;letter-spacing:0;text-align:justify;text-align-last:justify}}

/* Ausbildungsband in Logo-Rot */
section.band-rot{background:var(--band-rot);color:#fff;position:relative;overflow:hidden;border-top:0}
section.band-rot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;
  background:repeating-linear-gradient(0deg,#fff 0 3px,transparent 3px 14px)}
section.band-rot > .wrap{position:relative}
section.band-rot + section{border-top:0}
.band-rot h2{color:#fff}
.band-rot .lead,.band-rot .eyebrow{color:rgba(255,255,255,.86)}
.band-rot .eyebrow::before{background:#fff}
.band-rot .berufe{border:0;background:transparent;gap:16px}
.band-rot .beruf{background:var(--surface);color:var(--fg);border:0!important;box-shadow:0 24px 40px -28px rgba(0,0,0,.6)}
.btn.weiss{background:#fff;color:#9E0840;border-color:#fff}
.btn.weiss:hover{box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}

/* Orte und Geschäftsstelle nebeneinander */
.office{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.office > *{min-width:0}
.office .orte{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (max-width:860px){.office{grid-template-columns:1fr}}

/* Seitenköpfe der Unterseiten: Raute in Logo-Rot */
.page-hero .deco{opacity:.5;right:4%;top:50%;transform:translateY(-50%) rotate(0deg);width:min(26vw,220px)}
.page-hero .deco .f{stroke:var(--rot);stroke-width:2.4}
.page-hero .deco .s{fill:var(--rot);opacity:.55}
.page-hero{border-bottom:4px solid var(--band-rot)}
@media (max-width:620px){.page-hero .deco{opacity:.25;width:150px;right:-30px}}

/* Sanftes Hereingleiten beim Scrollen (Inhalt ist immer sichtbar) */
.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)}
@media (prefers-reduced-motion:reduce){.laufband{flex-wrap:wrap}.laufband ul{flex-wrap:wrap;padding-inline:16px}.laufband ul[aria-hidden]{display:none}.js .rv{transform:none}}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero{padding-block:56px 64px}}
@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.4rem}.stats span{font-size:.62rem}}
@media (max-width:420px){.topbar{font-size:.7rem}.topbar span{white-space:nowrap}}