/* Autoverwertung Weiser — Schrägschnitt-Felder
   Gestaltungsprinzip: Die Seite ist ein Stapel gescherter Blechtafeln. Jeder Abschnitt
   trägt eine geneigte Oberkante mit heller Schnittkanten-Linie; die Neigung wechselt
   von Abschnitt zu Abschnitt die Richtung. */

@font-face{font-family:'Familjen';src:url('schriften/familjen-var-latin.woff2') format('woff2');font-weight:400 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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Familjen';src:url('schriften/familjen-var-latin-ext.woff2') format('woff2');font-weight:400 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:'Asap';src:url('schriften/asap-var-latin.woff2') format('woff2');font-weight:400 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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Asap';src:url('schriften/asap-var-latin-ext.woff2') format('woff2');font-weight:400 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;}

:root{
  --schleif:#F2F1EE;      /* Schleifstaub-Weiß, Grund */
  --zink:#E3E5E4;         /* Zink, zweite helle Fläche */
  --zink-tief:#C6CBCC;    /* Zinkschatten, Schnittkante hell */
  --schwarz:#121517;      /* Schredderschwarz */
  --schwarz-2:#1E2426;
  --grau:#5A6266;
  --rot:#DC231A;          /* Logo-Rot */
  --rot-text:#B81A12;     /* dunkleres Rot für kleinen Text auf Hell */
  --rot-hell:#FF6A5C;     /* Rot auf dunklem Grund */
  --kante-dunkel:#6E7A80;
  --k:clamp(16px,3vw,46px);
  --breite:1180px;
  --luft:clamp(2.6rem,6vw,5.2rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--schleif);color:var(--schwarz);
  font-family:'Asap',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(1.02rem,.98rem + .25vw,1.13rem);line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot-text);text-underline-offset:.18em}
a:hover{color:var(--schwarz)}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}

h1,h2,h3,h4{font-family:'Familjen',system-ui,sans-serif;font-weight:700;line-height:1.08;margin:0 0 .5em;letter-spacing:-.012em}
h1{font-size:clamp(2.15rem,1.3rem + 4.2vw,4.1rem);text-transform:uppercase;letter-spacing:-.02em}
h2{font-size:clamp(1.65rem,1.2rem + 2.1vw,2.7rem);text-transform:uppercase}
h3{font-size:clamp(1.16rem,1.05rem + .7vw,1.45rem)}
h4{font-size:1.03rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.rahmen{width:min(100% - 2.2rem,var(--breite));margin-inline:auto}
.klein{font-size:.86rem;line-height:1.55}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:0;top:-100px;z-index:200;background:var(--schwarz);color:#fff;padding:.8rem 1.2rem}
.skip:focus{top:0}

/* ---------- Marke / Kennzeichnung ---------- */
.marke{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Familjen',sans-serif;font-weight:700;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--rot-text);
  margin:0 0 .9rem;
}
.marke::before{content:'';width:26px;height:2px;background:var(--rot);flex:none}
.dunkel .marke{color:var(--rot-hell)}
.dunkel .marke::before{background:var(--rot-hell)}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:100;background:var(--schwarz);color:#fff;border-bottom:2px solid var(--rot)}
.kopf-innen{display:flex;align-items:center;gap:1rem;min-height:62px;padding-block:.5rem}
.kopf-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff;margin-right:auto}
.kopf-logo img{width:132px;height:41px;background:#fff;padding:3px 6px}
@media (max-width:400px){.kopf-logo img{width:108px;height:34px}}
.kopf-tel{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .8rem;
  color:#fff;text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums;
  border:1px solid rgba(255,255,255,.28);
}
.kopf-tel:hover{background:var(--rot);border-color:var(--rot);color:#fff}
.kopf-tel .nr{display:none}
@media (min-width:560px){.kopf-tel .nr{display:inline}}

.menue-knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-width:44px;min-height:44px;padding:.4rem .7rem;background:var(--rot);color:#fff;
  border:0;font:600 .82rem/1 'Familjen',sans-serif;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;
}
.menue-knopf .balken{display:block;width:20px;height:12px;position:relative}
.menue-knopf .balken::before,.menue-knopf .balken::after,.menue-knopf .balken i{
  content:'';position:absolute;left:0;width:100%;height:2px;background:#fff;transition:.2s}
.menue-knopf .balken::before{top:0}
.menue-knopf .balken i{top:5px}
.menue-knopf .balken::after{top:10px}
.menue-knopf[aria-expanded="true"] .balken::before{top:5px;transform:rotate(45deg)}
.menue-knopf[aria-expanded="true"] .balken::after{top:5px;transform:rotate(-45deg)}
.menue-knopf[aria-expanded="true"] .balken i{opacity:0}
@media (min-width:1000px){.menue-knopf{display:none}}

.navi{background:var(--schwarz-2)}
.navi ul{list-style:none;margin:0;padding:0}
.navi a{
  display:block;padding:.85rem 0;color:#fff;text-decoration:none;
  font-family:'Familjen',sans-serif;font-weight:600;font-size:.94rem;
  text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid rgba(255,255,255,.1);
  min-height:44px;
}
.navi a:hover,.navi a:focus-visible{color:var(--rot-hell)}
.navi a[aria-current="page"]{color:var(--rot-hell)}
@media (max-width:999px){
  .navi{display:none}
  .navi.offen{display:block;position:sticky;top:62px;z-index:99;max-height:calc(100dvh - 62px);overflow:auto}
}
@media (min-width:1000px){
  .navi ul{display:flex;flex-wrap:wrap;gap:0 1.6rem;justify-content:flex-end}
  .navi a{border-bottom:0;padding:.7rem 0;position:relative}
  .navi a[aria-current="page"]::after,.navi a:hover::after{content:'';position:absolute;left:0;right:0;bottom:.3rem;height:2px;background:var(--rot)}
}

/* ---------- Schrägschnitt-Felder ---------- */
.feld{
  position:relative;isolation:auto;
  margin-top:calc(var(--k) * -1);
  padding-top:calc(var(--k) + var(--luft));
  padding-bottom:var(--luft);
  --flaeche:var(--schleif);
  --kante:var(--zink-tief);
  --schnitt:polygon(0 var(--k),100% 0,100% 100%,0 100%);
}
.feld:first-of-type{margin-top:0}
.feld::before,.feld::after{content:'';position:absolute;left:0;right:0;pointer-events:none}
.feld::before{top:0;bottom:0;background:var(--kante);clip-path:var(--schnitt)}
.feld::after{top:2px;bottom:0;background:var(--flaeche);clip-path:var(--schnitt)}
.feld > *{position:relative;z-index:1}
.feld:nth-of-type(even){--schnitt:polygon(0 0,100% var(--k),100% 100%,0 100%)}
.feld.zink{--flaeche:var(--zink)}
.feld.dunkel{--flaeche:var(--schwarz);--kante:var(--kante-dunkel);color:var(--schleif)}
.feld.dunkel h2,.feld.dunkel h3{color:#fff}
.feld.dunkel a{color:var(--rot-hell)}
.feld.dunkel a:hover{color:#fff}

/* ---------- Einstieg ---------- */
.einstieg{background:var(--schwarz);color:#fff;padding:0;position:relative;overflow:hidden}
.einstieg-bild{position:relative}
.einstieg-bild img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.einstieg-bild::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,21,23,.62) 0%,rgba(18,21,23,.30) 26%,rgba(18,21,23,.78) 58%,rgba(18,21,23,.97) 100%)}
.einstieg-text{position:absolute;inset:auto 0 0 0;padding-block:clamp(1.5rem,5vw,3.2rem);z-index:2}
.einstieg .marke{color:#fff}
.einstieg .marke::before{background:var(--rot-hell)}
.einstieg h1{margin-bottom:.35em;text-shadow:0 2px 20px rgba(0,0,0,.55)}
.einstieg h1 em{font-style:normal;color:var(--rot-hell);display:block}
.einstieg-unter{font-size:clamp(1rem,.95rem + .5vw,1.3rem);max-width:52ch;color:#EDEDEA}
@media (max-width:880px){
  .einstieg-bild img{aspect-ratio:4/3}
  .einstieg-bild::after{background:linear-gradient(180deg,rgba(18,21,23,.28) 0%,rgba(18,21,23,.55) 70%,rgba(18,21,23,1) 100%)}
  .einstieg-text{position:static;padding-block:1.5rem 2.6rem;background:var(--schwarz)}
  .einstieg h1{text-shadow:none}
}

/* ---------- Kennzahlenband ---------- */
.band{background:var(--rot);color:#fff;position:relative;z-index:2}
.band ul{list-style:none;margin:0;padding:1rem 0;display:grid;gap:.7rem 1.6rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.band ul{grid-template-columns:repeat(4,1fr);padding:1.15rem 0}}
.band li{display:flex;flex-direction:column;line-height:1.25}
.band b{font-family:'Familjen',sans-serif;font-size:clamp(1.2rem,1rem + 1vw,1.7rem);font-weight:700}
.band span{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;font-weight:500}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 1.5rem;background:var(--rot);color:#fff;
  font-family:'Familjen',sans-serif;font-weight:700;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border:2px solid var(--rot);cursor:pointer;
}
.knopf:hover,.knopf:focus-visible{background:var(--schwarz);border-color:var(--schwarz);color:#fff}
.knopf.zweit{background:transparent;color:var(--schwarz);border-color:var(--schwarz)}
.knopf.zweit:hover,.knopf.zweit:focus-visible{background:var(--schwarz);color:#fff}
.dunkel .knopf.zweit{color:#fff;border-color:#fff}
.dunkel .knopf.zweit:hover{background:#fff;color:var(--schwarz)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* ---------- Aufmaß-Zeilen (Bild + Text, wechselseitig) ---------- */
.zeile{display:grid;gap:1.5rem;align-items:center;margin-top:2.4rem}
.zeile:first-of-type{margin-top:0}
@media (min-width:840px){
  .zeile{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;margin-top:3.4rem}
  .zeile.gedreht > .bild{order:2}
}
.bild{position:relative}
.bild img{width:100%;aspect-ratio:3/2;object-fit:cover;clip-path:polygon(0 4%,100% 0,100% 96%,0 100%)}
.bild.hoch img{aspect-ratio:3/4}
.bild .nummer{
  position:absolute;left:0;bottom:8%;background:var(--rot);color:#fff;
  font-family:'Familjen',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.14em;
  padding:.35rem .7rem;text-transform:uppercase;
}

/* ---------- Leistungsliste (Startseite) ---------- */
.leistungen{display:grid;gap:1.4rem;margin-top:2.2rem}
@media (min-width:700px){.leistungen{grid-template-columns:repeat(2,1fr);gap:1.6rem}}
@media (min-width:1050px){.leistungen{grid-template-columns:repeat(3,1fr)}}
.leistung{display:flex;flex-direction:column;background:#fff;border-bottom:3px solid var(--rot);text-decoration:none;color:inherit}
.leistung img{width:100%;aspect-ratio:16/10;object-fit:cover}
.leistung .inhalt{padding:1.1rem 1.2rem 1.3rem}
.leistung h3{margin-bottom:.35em}
.leistung p{font-size:.95rem;color:#3A4144}
.leistung .weiter{margin-top:.9rem;font-family:'Familjen',sans-serif;font-weight:700;font-size:.83rem;text-transform:uppercase;letter-spacing:.1em;color:var(--rot-text)}
.leistung:hover .weiter,.leistung:focus-visible .weiter{color:var(--schwarz)}
.leistung:hover,.leistung:focus-visible{outline:2px solid var(--schwarz);outline-offset:0}

/* ---------- Datenblöcke (Zertifikate, Kontakt) ---------- */
.datenblatt{background:#fff;border-left:4px solid var(--rot);padding:1.3rem 1.4rem}
.dunkel .datenblatt{background:var(--schwarz-2);color:var(--schleif)}
.datenblatt dl{margin:0;display:grid;grid-template-columns:1fr;gap:.15rem .9rem}
@media (min-width:520px){.datenblatt dl{grid-template-columns:auto 1fr}}
.datenblatt dt{font-family:'Familjen',sans-serif;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--grau);padding-top:.35rem}
.dunkel .datenblatt dt{color:#A9B3B7}
.datenblatt dd{margin:0 0 .5rem;font-variant-numeric:tabular-nums}
@media (min-width:520px){.datenblatt dd{padding-top:.3rem}}

.paar{display:grid;gap:1.4rem;margin-top:2rem}
@media (min-width:820px){.paar{grid-template-columns:repeat(2,1fr);gap:2rem}}

/* ---------- Tabellen ---------- */
.tabellenfeld{overflow-x:auto;margin-top:1.6rem;background:#fff}
.dunkel .tabellenfeld{background:var(--schwarz-2)}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:.95rem}
caption{text-align:left;padding:.9rem 1rem;font-family:'Familjen',sans-serif;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;color:var(--grau)}
th,td{text-align:left;padding:.62rem 1rem;border-bottom:1px solid var(--zink-tief)}
.dunkel th,.dunkel td{border-bottom-color:#333B3E}
th{font-family:'Familjen',sans-serif;font-weight:600;font-size:.83rem;text-transform:uppercase;letter-spacing:.06em;background:var(--zink)}
.dunkel th{background:#262D30;color:#fff}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* ---------- Listen ---------- */
.haken{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem}
.haken li{position:relative;padding-left:1.6rem}
.haken li::before{content:'';position:absolute;left:0;top:.62em;width:10px;height:10px;background:var(--rot);clip-path:polygon(0 20%,100% 0,100% 80%,0 100%)}
.spalten2{columns:2;column-gap:2rem}
@media (max-width:560px){.spalten2{columns:1}}
.spalten2 li{break-inside:avoid}

/* ---------- Orte ---------- */
.orte{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.orte li{background:#fff;border:1px solid var(--zink-tief);padding:.45rem .85rem;font-family:'Familjen',sans-serif;font-weight:600;font-size:.9rem}
.dunkel .orte li{background:var(--schwarz-2);border-color:#394144}

/* ---------- Formular ---------- */
.formular{display:grid;gap:1rem;margin-top:1.6rem;max-width:640px}
@media (min-width:640px){.formular .halb{display:grid;grid-template-columns:1fr 1fr;gap:1rem}}
.feldgruppe{display:flex;flex-direction:column;gap:.3rem}
label{font-family:'Familjen',sans-serif;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
input,textarea{
  font:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid #9BA3A6;background:#fff;color:var(--schwarz);
  min-height:48px;border-radius:0;width:100%;
}
textarea{min-height:140px;resize:vertical}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--rot);outline-offset:1px;border-color:var(--schwarz)}
.zustimmung{display:flex;gap:.7rem;align-items:flex-start}
.zustimmung input{width:24px;height:24px;min-height:24px;flex:none;margin-top:.15rem;accent-color:var(--rot)}
.zustimmung label{text-transform:none;letter-spacing:0;font-family:'Asap',sans-serif;font-weight:400;font-size:.92rem;line-height:1.5}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hinweis{background:var(--zink);border-left:4px solid var(--grau);padding:.9rem 1.1rem;font-size:.92rem}
.dunkel .hinweis{background:var(--schwarz-2);border-left-color:var(--rot-hell)}

/* ---------- Rechtstexte ---------- */
.recht{max-width:74ch}
.recht h2{margin-top:2.2rem;font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem)}
.recht h3{margin-top:1.6rem}
.recht ul{padding-left:1.2rem}
.recht li{margin-bottom:.35rem}

/* ---------- Fuß ---------- */
.fuss{background:var(--schwarz);color:#C9CFD1;padding-block:var(--luft) 1.5rem;margin-top:calc(var(--k) * -1);position:relative}
.fuss::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--k);background:var(--kante-dunkel);clip-path:polygon(0 0,100% 100%,0 100%)}
.fuss > *{position:relative}
.fuss-gitter{display:grid;gap:1.8rem;padding-top:var(--k)}
@media (min-width:760px){.fuss-gitter{grid-template-columns:1.3fr 1fr 1fr;gap:2.4rem}}
.fuss h2{font-size:1rem;color:#fff;letter-spacing:.09em;margin-bottom:.9rem}
.fuss a{color:#DDE2E4;text-decoration:none}
.fuss a:hover,.fuss a:focus-visible{color:var(--rot-hell);text-decoration:underline}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fuss img.logo{width:150px;height:47px;background:#fff;padding:5px 8px;margin-bottom:1rem}
.fuss-schluss{border-top:1px solid #2C3336;margin-top:2rem;padding-top:1.1rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.85rem}
.fuss address{font-style:normal}

/* ---------- Nach oben ---------- */
.hoch{
  position:fixed;right:1rem;bottom:1rem;z-index:90;width:48px;height:48px;
  display:none;align-items:center;justify-content:center;background:var(--schwarz);color:#fff;
  border:2px solid var(--rot);text-decoration:none;font-size:1.2rem;line-height:1;
}
.hoch.sichtbar{display:flex}
.hoch:hover{background:var(--rot);color:#fff}