/* =========================================================================
   Schwarz Metallbau GmbH — Werkstattzeichnung mit Bemassung
   Gestaltungsrichtung laut DESIGN-REGISTER.md (Metallbau-Schwarz)
   Handgeschrieben, keine Fremdbibliothek, komplett offline.
   ========================================================================= */

/* ---------- Schriften (lokal, assets/schriften) ---------- */
@font-face{font-family:"Space Grotesk";src:url("schriften/space-grotesk-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";src:url("schriften/space-grotesk-500-latin-ext.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";src:url("schriften/space-grotesk-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";src:url("schriften/space-grotesk-700-latin-ext.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Barlow";src:url("schriften/barlow-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";src:url("schriften/barlow-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";src:url("schriften/barlow-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";src:url("schriften/barlow-500-latin-ext.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";src:url("schriften/barlow-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";src:url("schriften/barlow-600-latin-ext.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Space Mono";src:url("schriften/space-mono-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono";src:url("schriften/space-mono-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono";src:url("schriften/space-mono-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono";src:url("schriften/space-mono-700-latin-ext.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --zunder:#16232F;      /* Zunderblau — Tiefe, Text */
  --stahl:#24384F;       /* Stahlblau */
  --zinnober:#D4211E;    /* einzige Buntfarbe */
  --zinnober-hell:#FF6A5E;
  --zink:#F4F4F1;        /* Zinkweiss — Grund */
  --blatt:#FCFCFA;       /* Blattweiss */
  --rost:#B4763A;        /* Rostpatina, nur Firmenhistorie */
  --linie:#9AA5AF;       /* Zeichnungs-Haarlinie */
  --linie-fein:#C6CCD2;
  --neben:#5A6875;       /* Nebentext */
  --raster:36px;
  --rand:clamp(14px,4vw,44px);
  --breite:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:400;font-size:clamp(16px,1.02rem,18px);line-height:1.62;
  color:var(--zunder);
  background-color:var(--zink);
  /* Millimeterpapier: zwei Rasterstufen als Verlauf, keine Bilddatei */
  background-image:
    linear-gradient(to right,rgba(22,35,47,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(22,35,47,.055) 1px,transparent 1px),
    linear-gradient(to right,rgba(22,35,47,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(22,35,47,.028) 1px,transparent 1px);
  background-size:var(--raster) var(--raster),var(--raster) var(--raster),
                  calc(var(--raster)/4) calc(var(--raster)/4),calc(var(--raster)/4) calc(var(--raster)/4);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--zinnober);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--zunder)}
:focus-visible{outline:3px solid var(--zinnober);outline-offset:2px}
::selection{background:var(--zinnober);color:#fff}

/* Sprungmarke */
.sprung{position:absolute;left:-9999px;top:0;z-index:60;background:var(--zunder);color:#fff;
  padding:12px 20px;font-weight:600}
.sprung:focus{left:8px;top:8px}

/* ---------- Kopfleiste = Zeichnungskopf ---------- */
.kopf{
  position:sticky;top:0;z-index:40;
  background:var(--blatt);
  border-bottom:2px solid var(--zunder);
  box-shadow:0 1px 0 0 var(--blatt),0 3px 0 0 var(--zunder);
}
.kopf-innen{
  max-width:var(--breite);margin:0 auto;padding:10px var(--rand);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:0 0 auto}
.marke img{width:120px;height:64px;object-fit:contain}
.marke b{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:.02em;display:block;line-height:1.15}
.marke span{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--neben)}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.tel-kopf{
  font-family:"Space Mono",monospace;font-weight:700;font-size:.92rem;
  color:var(--zunder);text-decoration:none;border:2px solid var(--zunder);
  padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;gap:8px;
}
.tel-kopf:hover{background:var(--zunder);color:#fff}

/* Menuschalter (nur mobil) */
.menu-schalter{
  display:none;min-width:44px;min-height:44px;align-items:center;justify-content:center;gap:8px;
  background:var(--zunder);color:#fff;border:0;padding:10px 14px;cursor:pointer;
  font-family:"Space Mono",monospace;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}
.haupt-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.haupt-nav a{
  display:block;padding:12px 12px;min-height:44px;
  font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:.95rem;
  color:var(--zunder);text-decoration:none;border-bottom:2px solid transparent;
}
.haupt-nav a:hover{border-bottom-color:var(--zinnober)}
.haupt-nav a[aria-current="page"]{border-bottom-color:var(--zinnober);color:var(--zinnober)}

@media (max-width:900px){
  .menu-schalter{display:inline-flex}
  .haupt-nav{flex-basis:100%;display:none;border-top:1px solid var(--linie-fein);margin-top:8px;padding-top:8px}
  .haupt-nav.offen{display:block}
  .haupt-nav ul{flex-direction:column;gap:0}
  .haupt-nav a{border-bottom:1px solid var(--linie-fein);padding:14px 4px}
  .marke img{width:96px;height:52px}
  .tel-kopf span{display:none}
}

/* ---------- Blatt = Abschnitt im doppelten Zeichnungsrahmen ---------- */
.blaetter{max-width:var(--breite);margin:0 auto;padding:clamp(18px,3vw,34px) var(--rand) 0}
.blatt{
  position:relative;background:var(--blatt);
  border:2px solid var(--zunder);
  padding:clamp(18px,3vw,34px);
  margin-bottom:clamp(22px,4vw,44px);
}
/* zweite, innere Rahmenlinie */
.blatt::before{
  content:"";position:absolute;inset:6px;border:1px solid var(--linie);pointer-events:none;
}
.blatt>*{position:relative}
.blatt-dunkel{background:var(--zunder);color:var(--zink);border-color:var(--zunder)}
.blatt-dunkel::before{border-color:rgba(244,244,241,.35)}
.blatt-dunkel a{color:var(--zinnober-hell)}
.blatt-dunkel a:hover{color:#fff}
.blatt-dunkel .neben,.blatt-dunkel .bu{color:#B8C3CE}

/* Blattkopf: Positionsnummer + Ueberschrift, gefasst von einer Masskette */
.blatt-kopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.pos{
  font-family:"Space Mono",monospace;font-weight:700;font-size:.78rem;letter-spacing:.14em;
  color:var(--zinnober);border:1px solid var(--zinnober);padding:3px 8px;white-space:nowrap;
}
.blatt-dunkel .pos{color:var(--zinnober-hell);border-color:var(--zinnober-hell)}
h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif;font-weight:700;line-height:1.14;
  letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(1.85rem,5.2vw,3.15rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.25rem)}
h3{font-size:clamp(1.12rem,2.1vw,1.4rem);font-weight:500}
h4{font-size:1.02rem;font-weight:500}
p{margin:0 0 1em;max-width:68ch}
.vor{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--neben);margin:0 0 .6em}
.blatt-dunkel .vor{color:#96A5B3}
.gross{font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.55}
.neben{color:var(--neben)}

/* ---------- Masskette: Linie mit Pfeilenden und Maszahl ---------- */
.masskette{
  --mk:var(--linie);
  display:flex;align-items:center;gap:10px;margin:clamp(18px,3vw,30px) 0;
  font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.1em;color:var(--neben);
}
.masskette>.mass{white-space:nowrap;padding:0 2px}
.mk-linie{flex:1 1 auto;height:1px;background:var(--mk)}
/* Massgrenzen links/rechts als kurze senkrechte Striche */
.mk-grenze{width:1px;height:14px;background:var(--mk);flex:0 0 1px}
.mk-pfeil{width:9px;height:9px;flex:0 0 9px;background:var(--mk);
  clip-path:polygon(0 50%,100% 0,100% 100%)}
.mk-pfeil.rechts{clip-path:polygon(100% 50%,0 0,0 100%)}
.blatt-dunkel .masskette{--mk:rgba(244,244,241,.5);color:#96A5B3}

/* ---------- Diagonalschraffur 45 Grad ---------- */
.schraffur{
  background-image:repeating-linear-gradient(45deg,
    rgba(22,35,47,.14) 0 1px,transparent 1px 8px);
}
.schraffur-hell{
  background-image:repeating-linear-gradient(45deg,
    rgba(244,244,241,.16) 0 1px,transparent 1px 8px);
}

/* ---------- Schriftfeld (Tabelle am Blattfuss) ---------- */
.schriftfeld{
  width:100%;border-collapse:collapse;margin-top:clamp(18px,3vw,28px);
  font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.04em;
}
.schriftfeld caption{
  text-align:left;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--neben);padding-bottom:6px;
}
.schriftfeld th,.schriftfeld td{border:1px solid var(--linie);padding:7px 9px;text-align:left;vertical-align:top}
.schriftfeld th{font-weight:400;color:var(--neben);text-transform:uppercase;letter-spacing:.1em;
  font-size:.64rem;width:1%;white-space:nowrap;background:rgba(22,35,47,.035)}
.schriftfeld td{font-weight:700;color:var(--zunder)}
.blatt-dunkel .schriftfeld th,.blatt-dunkel .schriftfeld td{border-color:rgba(244,244,241,.3)}
.blatt-dunkel .schriftfeld th{color:#96A5B3;background:rgba(244,244,241,.05)}
.blatt-dunkel .schriftfeld td{color:var(--zink)}
.stempel{
  display:inline-block;border:2px solid var(--zinnober);color:var(--zinnober);
  font-family:"Space Mono",monospace;font-weight:700;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px;transform:rotate(-2deg);
}
.stempel.zu{border-color:var(--neben);color:var(--neben)}
.blatt-dunkel .stempel,.fuss .stempel{border-color:var(--zinnober-hell);color:var(--zinnober-hell)}
.blatt-dunkel .stempel.zu,.fuss .stempel.zu{border-color:#96A5B3;color:#96A5B3}
/* Nebentexte auf dunklem Grund aufhellen (Kontrast >= 4,5:1) */
.blatt-dunkel .schriftfeld caption,.blatt-dunkel .stueckliste caption,
.blatt-dunkel .stueckliste thead th,.blatt-dunkel .neben,
.blatt-dunkel .hilfe{color:#A9B6C2}

/* ---------- Bild im Bemassungsrahmen ---------- */
.zeichnung{
  margin:0;position:relative;
  padding:26px 26px 0 26px;   /* Platz fuer die Maszlinien oben und links */
  border:1px solid var(--linie-fein);
  background:#fff;
}
.zeichnung .rahmen{position:relative;display:block;border:1px solid var(--linie)}
.zeichnung img{width:100%;height:auto;display:block}
.zeichnung .pos-nr{
  position:absolute;top:5px;left:26px;
  font-family:"Space Mono",monospace;font-weight:700;font-size:.64rem;letter-spacing:.12em;
  color:var(--zinnober);
}
/* waagerechte Masskette an der Oberkante */
.zeichnung .mass-o{
  position:absolute;top:17px;left:26px;right:26px;height:1px;background:var(--linie);
}
.zeichnung .mass-o::before,.zeichnung .mass-o::after{
  content:"";position:absolute;top:-4px;width:8px;height:9px;background:var(--linie);
}
.zeichnung .mass-o::before{left:0;clip-path:polygon(0 50%,100% 0,100% 100%)}
.zeichnung .mass-o::after{right:0;clip-path:polygon(100% 50%,0 0,0 100%)}
/* senkrechte Masskette an der linken Kante */
.zeichnung .mass-l{
  position:absolute;left:17px;top:26px;bottom:var(--bu-h,54px);width:1px;background:var(--linie);
}
.zeichnung .mass-l::before,.zeichnung .mass-l::after{
  content:"";position:absolute;left:-4px;width:9px;height:8px;background:var(--linie);
}
.zeichnung .mass-l::before{top:0;clip-path:polygon(50% 0,0 100%,100% 100%)}
.zeichnung .mass-l::after{bottom:0;clip-path:polygon(50% 100%,0 0,100% 0)}
.zeichnung figcaption{
  display:flex;gap:10px;align-items:baseline;justify-content:space-between;
  padding:9px 0 10px;border-top:1px solid var(--linie-fein);margin-top:9px;
  font-size:.86rem;line-height:1.35;color:var(--zunder);
}
.zeichnung figcaption .nr{font-family:"Space Mono",monospace;font-size:.68rem;color:var(--neben);
  letter-spacing:.1em;white-space:nowrap}
.bu{color:var(--neben);font-size:.86rem}

/* ---------- Raster fuer Bilder und Blockinhalte ---------- */
.reihe{display:grid;gap:clamp(14px,2.4vw,26px)}
@media (min-width:640px){.reihe.z2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .reihe.z3{grid-template-columns:repeat(3,1fr)}
  .reihe.z4{grid-template-columns:repeat(4,1fr)}
  .reihe.z2-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:640px) and (max-width:899px){
  .reihe.z3,.reihe.z4{grid-template-columns:repeat(2,1fr)}
}
.split{display:grid;gap:clamp(18px,3.2vw,38px);align-items:start}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr}.split.eng{grid-template-columns:1fr 1fr}}

/* ---------- Listen im Zeichnungsstil ---------- */
.liste{list-style:none;margin:0 0 1em;padding:0}
.liste li{
  position:relative;padding:7px 0 7px 26px;border-bottom:1px dotted var(--linie);
}
.liste li::before{
  content:"";position:absolute;left:4px;top:1.05em;width:10px;height:1px;background:var(--zinnober);
}
.liste li::after{
  content:"";position:absolute;left:12px;top:calc(1.05em - 3px);width:6px;height:7px;
  background:var(--zinnober);clip-path:polygon(100% 50%,0 0,0 100%);
}
.blatt-dunkel .liste li{border-bottom-color:rgba(244,244,241,.22)}
.blatt-dunkel .liste li::before,.blatt-dunkel .liste li::after{background:var(--zinnober-hell)}

/* Stueckliste (nummerierte Positionsliste) */
.stueckliste{width:100%;border-collapse:collapse;font-size:.94rem}
.stueckliste caption{text-align:left;font-family:"Space Mono",monospace;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--neben);padding-bottom:8px}
.stueckliste th,.stueckliste td{border-bottom:1px solid var(--linie-fein);padding:10px 8px;text-align:left;vertical-align:top}
.stueckliste thead th{border-bottom:1px solid var(--zunder);font-family:"Space Mono",monospace;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--neben);font-weight:400}
.stueckliste td:first-child{font-family:"Space Mono",monospace;font-weight:700;color:var(--zinnober);width:1%;white-space:nowrap}
.blatt-dunkel .stueckliste th,.blatt-dunkel .stueckliste td{border-bottom-color:rgba(244,244,241,.24)}
.blatt-dunkel .stueckliste td:first-child{color:var(--zinnober-hell)}

/* ---------- Schaltflaechen ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.98rem;letter-spacing:.01em;
  text-decoration:none;border:2px solid var(--zunder);background:var(--zunder);color:var(--zink);
  cursor:pointer;
}
.knopf:hover{background:var(--zinnober);border-color:var(--zinnober);color:#fff}
.knopf.zweit{background:transparent;color:var(--zunder)}
.knopf.zweit:hover{background:var(--zunder);color:var(--zink);border-color:var(--zunder)}
.blatt-dunkel .knopf{background:var(--zinnober);border-color:var(--zinnober);color:#fff}
.blatt-dunkel .knopf:hover{background:var(--zink);border-color:var(--zink);color:var(--zunder)}
.blatt-dunkel .knopf.zweit{background:transparent;border-color:var(--zink);color:var(--zink)}
.blatt-dunkel .knopf.zweit:hover{background:var(--zink);color:var(--zunder)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.2em}

/* ---------- Kopfblatt (Startseite) ---------- */
.kopfblatt{padding:0;overflow:hidden}
.kopfblatt .bild{position:relative;border-bottom:2px solid var(--zunder)}
.kopfblatt .bild img{width:100%;height:clamp(210px,34vw,420px);object-fit:cover;filter:saturate(.92)}
.kopfblatt .text{padding:clamp(20px,3.4vw,38px)}
.kopfblatt h1{margin-bottom:.35em}
.kopfblatt .vor{margin-bottom:.9em}

/* Kennzahlenband */
.kennzahlen{display:grid;gap:0;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--linie)}
@media (min-width:820px){.kennzahlen{grid-template-columns:repeat(4,1fr)}}
.kennzahlen div{padding:16px clamp(14px,2.4vw,24px);border-right:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.kennzahlen div:last-child{border-right:0}
.kennzahlen dt,.kennzahlen .k{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--neben);margin:0 0 4px}
.kennzahlen dd,.kennzahlen .w{margin:0;font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(1.2rem,2.6vw,1.6rem);line-height:1.1}

/* ---------- Leistungskarte ---------- */
.leistung{border:1px solid var(--linie);background:#fff;display:flex;flex-direction:column}
.leistung>a.bildlink{display:block;border-bottom:1px solid var(--linie)}
.leistung img{width:100%;aspect-ratio:4/3;object-fit:cover}
.leistung .inhalt{padding:18px}
.leistung h3{margin-bottom:.4em}
.leistung h3 a{color:var(--zunder);text-decoration:none}
.leistung h3 a:hover{color:var(--zinnober)}
.leistung p{font-size:.94rem;margin-bottom:.6em}
.leistung .nr{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.14em;color:var(--zinnober);display:block;margin-bottom:6px}

/* ---------- Galerie ---------- */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(16px,2.6vw,26px)}
.filter button{
  min-height:44px;padding:10px 16px;cursor:pointer;background:#fff;
  border:1px solid var(--linie);color:var(--zunder);
  font-family:"Space Mono",monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
}
.filter button:hover{border-color:var(--zunder)}
.filter button[aria-pressed="true"]{background:var(--zunder);border-color:var(--zunder);color:var(--zink)}
.galerie{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.galerie .zeichnung{padding:22px 22px 0 22px}
.galerie img{aspect-ratio:4/3;object-fit:cover}
.galerie .hoch img{aspect-ratio:3/4}

/* ---------- Formular ---------- */
form{margin:0}
.feld{margin-bottom:18px}
.feld label{display:block;font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--neben);margin-bottom:6px}
.feld .pflicht{color:var(--zinnober)}
.feld input,.feld select,.feld textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font-family:"Barlow",sans-serif;font-size:1rem;color:var(--zunder);
  background:#fff;border:1px solid var(--linie);border-radius:0;
}
.feld textarea{min-height:150px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--zunder)}
.feld .hilfe{font-size:.82rem;color:var(--neben);margin-top:5px}
.zustimmung{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--linie);padding:14px;background:rgba(22,35,47,.03)}
.zustimmung input{width:22px;height:22px;min-height:22px;flex:0 0 22px;margin-top:3px;accent-color:var(--zinnober)}
.zustimmung label{text-transform:none;letter-spacing:0;font-family:"Barlow",sans-serif;font-size:.92rem;
  color:var(--zunder);margin:0;line-height:1.5}
.hinweis{
  border-left:4px solid var(--zinnober);background:rgba(212,33,30,.06);
  padding:14px 16px;font-size:.92rem;margin:0 0 20px;
}
.hinweis strong{font-family:"Space Grotesk",sans-serif}
@media (min-width:700px){.feldreihe{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}}

/* ---------- Zwei-Klick-Karte ---------- */
.karte{border:1px solid var(--linie);background:#fff;padding:0;position:relative}
.karte .lageplan{display:block;width:100%;height:auto;background:#EEF0EE}
.karte .freigabe{padding:16px;border-top:1px solid var(--linie)}
.karte .freigabe p{font-size:.9rem;margin-bottom:.8em}
.karte .eingebettet{width:100%;aspect-ratio:16/10;border:0;display:block}

/* ---------- Fuss ---------- */
.fuss{
  margin-top:clamp(24px,4vw,48px);
  background:var(--zunder);color:var(--zink);
  border-top:6px solid var(--zinnober);
}
.fuss-schraffur{height:14px;background-image:repeating-linear-gradient(45deg,
  rgba(244,244,241,.24) 0 1px,transparent 1px 8px);border-bottom:1px solid rgba(244,244,241,.25)}
.fuss-innen{max-width:var(--breite);margin:0 auto;padding:clamp(26px,4vw,44px) var(--rand)}
.fuss-raster{display:grid;gap:clamp(20px,3vw,38px)}
@media (min-width:760px){.fuss-raster{grid-template-columns:1.2fr 1fr 1fr}}
.fuss h2,.fuss h3{font-size:.74rem;font-family:"Space Mono",monospace;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:#96A5B3;margin-bottom:.9em}
.fuss a{color:var(--zink);text-decoration:none}
.fuss a:hover{color:var(--zinnober-hell);text-decoration:underline}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{padding:5px 0}
.fuss address{font-style:normal;line-height:1.7}
.fuss-unten{
  border-top:1px solid rgba(244,244,241,.25);margin-top:clamp(20px,3vw,34px);padding-top:16px;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.08em;color:#96A5B3;
}

/* ---------- Kleinkram ---------- */
.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brotkrume{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.1em;color:var(--neben);
  margin:0 0 10px}
.brotkrume ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.brotkrume li::after{content:"›";margin-left:6px;color:var(--linie)}
.brotkrume li:last-child::after{content:""}
.brotkrume a{color:var(--neben)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .kopf,.fuss,.filter,.knopfreihe{display:none}
  body{background:#fff}
  .blatt{break-inside:avoid;border-color:#000}
}