/* ============================================================
   DRUCKEREI HUWIG — Website-Stylesheet
   Design „Klar": hell, luftig, feine Linien. Schibsted Grotesk für
   Titel, Instrument Sans für den Text — beide liegen als variable
   woff2-Dateien unter assets/fonts (SIL Open Font License) und werden
   vom eigenen Server geladen. Keine Fremdserver, keine Frameworks.
   Signalrot #e2001a nur noch als Punkt vor Vorspann-Zeilen, für die
   Telefonnummer und als Hover-Farbe der Knöpfe.
   ============================================================ */

@font-face{
  font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("../assets/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  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:"Schibsted Grotesk"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("../assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  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:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  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:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../assets/fonts/instrument-sans-latin.woff2") format("woff2");
  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;
}

:root{
  --rot:         #e2001a;
  --rot-dunkel:  #b80015;
  --schwarz:     #101114;   /* Text, Knöpfe */
  --weiss:       #fcfcfb;   /* Seitengrund, minimal warm gebrochen */
  --flaeche:     #f2f2f0;   /* ruhige Wechselfläche */
  --linie:       #e2e3e0;   /* Hairline */
  --linie-dunkel:#d9dad6;
  --ghost:       #d3d4d0;   /* die große Jahreszahl */
  --text:        #101114;
  --text-mut:    #5f6167;
  --text-hell:   #5f6167;   /* frühere Hellgrau-Variable: auf hellem Grund jetzt gleiches Grau */
  --text-hell2:  #8a8c91;
  --grau-bg:     #f2f2f0;   /* alte Namen bleiben gültig */
  --grau-linie:  #e2e3e0;

  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --inhalt-breite: 1208px;  /* 1160px Inhalt + 2 × 24px Rand */
  --kopf-hoehe: 112px;      /* Service-Leiste 36px + Kopfzeile 76px; für die klebende Sprungleiste */
}

/* ---------- Basis ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  font-size:16.5px; line-height:1.6;
  color:var(--text); background:var(--weiss);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.inhalt{ max-width:var(--inhalt-breite); margin:0 auto; padding-left:24px; padding-right:24px; }

.display{
  font-family:var(--display); font-weight:500;
  letter-spacing:-.02em; line-height:1.05; text-wrap:balance;
}
.display mark{ background:none; color:inherit; padding:0; }

.sprungmarke{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--schwarz); color:#fff; padding:10px 18px; font-weight:500;
}
.sprungmarke:focus{ left:0; }

:focus-visible{ outline:2px solid var(--schwarz); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- Ikonen ---------- */
.ikon{ flex:none; width:24px; height:24px; }
.ikon *{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 24px;
  font-family:var(--body); font-weight:500; font-size:16px; text-decoration:none;
  background:var(--schwarz); color:#fff; border:1px solid var(--schwarz); border-radius:0;
  white-space:nowrap; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ background:var(--rot); border-color:var(--rot); color:#fff; }
/* Alle früheren Farbvarianten (Kontur auf Dunkel, Weiß auf Rot) sind jetzt eine ruhige Kontur */
.btn--kontur, .btn--kontur-hell{ background:transparent; color:var(--schwarz); border-color:var(--schwarz); }
.btn--kontur:hover, .btn--kontur-hell:hover{ background:var(--schwarz); border-color:var(--schwarz); color:#fff; }
.btn--weiss{ background:var(--schwarz); color:#fff; border-color:var(--schwarz); }
.btn-reihe{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Vorspann-Zeilen ---------- */
.kicker{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-mut); margin:0 0 14px;
}
.kicker::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--rot); flex:none; margin-top:.5em; }
/* Nummerierte Variante der Startseite: „01 / Beschriftung" */
.kicker--nr{ font-family:var(--display); font-size:14px; letter-spacing:.04em; text-transform:none; }
.kicker--nr::before{ display:none; }
.nr{ font-family:var(--display); font-weight:500; font-size:14px; letter-spacing:.04em; color:var(--text-mut); white-space:nowrap; }

/* ---------- Kopf / Navigation ---------- */
.kopf{
  position:sticky; top:0; z-index:100;
  background:var(--weiss); border-bottom:1px solid var(--linie);
}
.service{ border-bottom:1px solid var(--linie); font-size:13px; color:var(--text-mut); }
.service .inhalt{ display:flex; align-items:center; gap:26px; height:36px; white-space:nowrap; overflow:hidden; }
.service a{ text-decoration:none; }
.service a:hover{ color:var(--text); }
.service .service-tel{ margin-left:auto; color:var(--rot); font-weight:500; }
.kopf-zeile{ display:flex; align-items:center; gap:24px; height:75px; }
/* flex:0 0 auto + feste Breite: ohne das schrumpft das Logo als einziges
   nachgiebiges Element im Kopf auf null, sobald die Navigation breiter wird
   (das SVG hat nur eine viewBox, keine eigene Breite). */
.logo{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.logo img{ height:18px; width:182px; }
.hauptnav{ display:flex; gap:14px; margin-left:auto; align-items:center; }
.hauptnav a{
  text-decoration:none; color:var(--text-mut); font-weight:500; font-size:14px;
  padding:4px 0; border-bottom:1.5px solid transparent; white-space:nowrap;
}
.hauptnav a:hover{ color:var(--text); }
.hauptnav a.aktiv{ color:var(--text); border-bottom-color:var(--rot); }
.hauptnav .nur-mobil{ display:none; }
.kopf-tel{ display:none; }
.kopf-anfrage{ height:42px; padding:0 18px; font-size:15px; }
.nav-knopf{ display:none; }

/* Kopf-Umbruch: unterhalb von 1160px passen Logo, acht Menüpunkte und der
   Anfrage-Knopf nicht mehr nebeneinander (gemessen: 1080px Inhaltsbreite).
   Dann: Service-Leiste weg, Telefon als Ikon-Knopf, Menü aufklappbar. */
@media (max-width:1160px){
  :root{ --kopf-hoehe:64px; }
  .service{ display:none; }
  .kopf-zeile{ height:63px; gap:10px; }
  .logo img{ height:17px; width:172px; }
  .kopf-tel{
    display:flex; align-items:center; justify-content:center; flex:none;
    margin-left:auto; width:44px; height:44px;
    border:1px solid var(--schwarz); color:var(--rot); text-decoration:none;
  }
  .kopf-tel .ikon{ width:20px; height:20px; }
  .kopf-anfrage{ display:none; }
  .nav-knopf{
    display:block; height:44px; padding:0 14px;
    border:1px solid var(--schwarz); background:var(--schwarz); color:#fff;
    font-family:var(--body); font-weight:500; font-size:14px; cursor:pointer;
  }
  .hauptnav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--weiss); flex-direction:column; align-items:stretch;
    gap:0; padding:8px 24px 16px; border-bottom:1px solid var(--linie);
    box-shadow:0 16px 32px rgba(16,17,20,.06);
  }
  .hauptnav a{ padding:12px 0; font-size:16px; border-bottom:1px solid var(--linie); color:var(--text); }
  .hauptnav a.aktiv{ border-bottom-color:var(--rot); }
  .hauptnav .nur-mobil{ display:block; }
  .kopf.offen .hauptnav{ display:flex; }
}

/* ---------- Hero (Startseite) ---------- */
.held{ background:var(--weiss); }
.held .inhalt{ padding-top:96px; padding-bottom:96px; display:flex; flex-direction:column; gap:40px; }
.held h1{ font-size:clamp(48px, 8vw, 104px); font-weight:600; max-width:1000px; }
.held-raster{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:64px; align-items:end; }
.held-raster > div{ display:flex; flex-direction:column; gap:28px; align-items:flex-start; }
.held-text{ color:var(--text-mut); font-size:20px; line-height:1.55; max-width:52ch; margin:0; }
.held-fakten{ display:flex; flex-direction:column; margin:0; padding:0; list-style:none; border-bottom:1px solid var(--linie); }
.held-fakten > *{
  display:flex; gap:12px; align-items:flex-start;
  font-size:16px; padding:10px 0; border-top:1px solid var(--linie);
}
.held-fakten > *::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--rot); flex:none; margin-top:9px; }
.held-bild{ margin:0; display:flex; flex-direction:column; gap:12px; }
.held-bild img{ width:100%; aspect-ratio:21/9; object-fit:cover; }
.held-bild figcaption{ font-size:13.5px; color:var(--text-mut); }

/* Leistungsübersicht im Hero: acht Piktogramm-Kacheln statt Foto */
.piktos{ display:flex; flex-direction:column; gap:22px; }
.piktos-kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; }
.piktos-kopf .kicker{ margin:0; }
.piktos-alle{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--text-mut); text-decoration:none; }
.piktos-alle:hover{ color:var(--rot); }
.pikto-raster{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 32px; border-bottom:1px solid var(--linie); }
.pikto-kachel{ display:flex; flex-direction:column; gap:6px; padding:22px 0 26px; border-top:1px solid var(--linie); text-decoration:none; color:inherit; min-width:0; }
.pikto{ width:44px; height:44px; color:var(--text); margin-bottom:10px; flex:none; }
.pikto *{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.pikto-kachel b{ font-family:var(--display); font-weight:500; font-size:17px; line-height:1.2; letter-spacing:-.01em; }
.pikto-kachel span{ font-size:13.5px; color:var(--text-mut); line-height:1.45; }
.pikto-kachel:hover .pikto, .pikto-kachel:hover b{ color:var(--rot); }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf{ background:var(--weiss); }
.seitenkopf .inhalt{ padding-top:88px; padding-bottom:64px; }
.seitenkopf h1{ font-size:clamp(40px, 6.8vw, 88px); font-weight:600; max-width:1000px; margin-bottom:28px; }
.seitenkopf .kicker{ margin-bottom:28px; }
.seitenkopf .held-text{ max-width:56ch; }
.seitenkopf .btn-reihe{ margin-top:28px; }
.seitenkopf .held-fakten{ margin-top:28px; max-width:520px; }
/* Breites Bildband unter dem Seitenkopf-Text (echtes <img>, kein
   CSS-Hintergrund: Chrome löst url() aus Inline-Variablen relativ zum
   Stylesheet auf, das Bild bliebe leer). */
.seitenkopf-bild{ width:100%; aspect-ratio:21/9; object-fit:cover; margin-top:56px; background:var(--flaeche); }

/* ---------- Abschnitte ---------- */
.abschnitt{ padding:88px 0; }
.abschnitt--grau{ background:var(--flaeche); }
/* Die früheren roten und schwarzen Bänder sind jetzt helle Wechselflächen */
.abschnitt--rot{ background:var(--weiss); border-top:1px solid var(--linie); }
.abschnitt--schwarz{ background:var(--flaeche); }
.abschnitt--schmal{ padding:56px 0; }
.abschnitt + .abschnitt:not(.abschnitt--grau):not(.abschnitt--schwarz){ border-top:1px solid var(--linie); }
/* Zwei graue Flächen hintereinander bekommen eine Trennlinie */
.abschnitt--grau + .abschnitt--grau, .abschnitt--grau + .abschnitt--schwarz,
.abschnitt--schwarz + .abschnitt--grau, .abschnitt--schwarz + .abschnitt--schwarz{ border-top:1px solid var(--linie-dunkel); }

.titel{ font-size:clamp(30px, 3.8vw, 48px); margin-bottom:16px; }
.einleitung{
  font-size:17.5px; line-height:1.6; color:var(--text-mut);
  max-width:66ch; margin-bottom:36px;
}
.abschnitt-kopf{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:end; margin-bottom:44px; }
.abschnitt-kopf .titel, .abschnitt-kopf .einleitung{ margin-bottom:0; }
.abschnitt-kopf .einleitung{ font-size:18px; }
.claim{ font-size:21px; font-weight:500; letter-spacing:-.01em; margin:0 0 10px; }

/* Ein Abschnitt, der als Seitenkopf dient (Gastronomie) */
.abschnitt h1.display{ font-size:clamp(40px, 6vw, 72px); font-weight:600; }

/* ---------- Leistungsliste (Startseite) ---------- */
.leistungs-liste{ display:flex; flex-direction:column; border-bottom:1px solid var(--linie); }
.leistungs-zeile{
  display:grid; grid-template-columns:56px minmax(0,1fr) minmax(0,1.35fr) 32px;
  grid-template-areas:"nr titel text pfeil";
  gap:28px; align-items:center; padding:24px 0;
  border-top:1px solid var(--linie); text-decoration:none; color:inherit;
}
.leistungs-zeile .nr{ grid-area:nr; }
.leistungs-zeile h3{ grid-area:titel; }
.leistungs-zeile p{ grid-area:text; }
.leistungs-zeile .pfeil{ grid-area:pfeil; }
.leistungs-zeile h3{ font-family:var(--display); font-weight:500; font-size:23px; line-height:1.15; letter-spacing:-.01em; }
.leistungs-zeile p{ font-size:15.5px; color:var(--text-mut); line-height:1.5; margin:0; }
.leistungs-zeile .pfeil{ transition:transform .15s ease, color .15s ease; }
.leistungs-zeile:hover .pfeil{ color:var(--rot); transform:translateX(4px); }

/* ---------- Karten (Unterseiten) ---------- */
.karten-raster{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.karte{
  border:1px solid var(--linie-dunkel); background:var(--weiss);
  padding:28px; display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit;
}
a.karte:hover{ border-color:var(--schwarz); }
.karte--akzent{ border:1.5px solid var(--schwarz); }
.karte .ikon{ color:var(--schwarz); width:28px; height:28px; margin-bottom:6px; }
.karte .nr{ margin-bottom:2px; }
.karte h3{ font-family:var(--display); font-weight:500; font-size:22px; line-height:1.2; letter-spacing:-.01em; }
.karte p{ font-size:15px; line-height:1.5; color:var(--text-mut); margin:0; }
.karte .mehr{ margin-top:auto; padding-top:8px; font-size:14.5px; font-weight:500; }
.abschnitt--grau .karte, .abschnitt--schwarz .karte{ background:#fff; }

/* ---------- Listenraster (Druckprodukte, Werte) ---------- */
.listen-raster{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 32px; }
.listen-raster > div{ border-top:1px solid var(--linie); padding:12px 0 14px; display:flex; flex-direction:column; gap:2px; }
.listen-raster b{ font-weight:500; font-size:16px; }
.listen-raster span{ font-size:14px; color:var(--text-mut); line-height:1.5; }
.zweispalter .listen-raster{ grid-template-columns:repeat(2, minmax(0,1fr)); }

/* ---------- Leistungsblöcke (Unterseiten) ---------- */
.leistung{ padding:72px 0; border-bottom:1px solid var(--linie); }
.leistung:last-of-type{ border-bottom:none; }
.leistung-kopf{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:16px; }
.leistung h2{ font-size:clamp(30px, 3.4vw, 44px); }
.leistung .einleitung{ margin-bottom:24px; }
.leistung-raster{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; }

/* ---------- Galerien ---------- */
.galerie{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.galerie--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.galerie--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.galerie img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--flaeche); }
.galerie figure{ margin:0; }
.galerie figcaption{ font-size:12.5px; color:var(--text-mut); padding-top:6px; }

/* ---------- Merkmal-Punkte ---------- */
.punkte{ display:flex; flex-direction:column; margin:0 0 26px; padding:0; list-style:none; border-bottom:1px solid var(--linie); }
.punkte li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; padding:12px 0; border-top:1px solid var(--linie); }
.punkte .ikon{ display:none; }
/* Reine Stichpunkte (ohne Titel + Erklärung) bekommen den roten Punkt */
.punkte li:not(:has(div))::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--rot); flex:none; margin-top:9px; }
.punkte b{ display:block; font-weight:500; }
.punkte span{ font-size:14.5px; color:var(--text-mut); line-height:1.5; }

.merkmal-raster{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 32px; margin:10px 0 26px; border-bottom:1px solid var(--linie); }
.merkmal-raster > div{
  display:flex; gap:12px; align-items:flex-start; font-size:16px;
  padding:10px 0; border-top:1px solid var(--linie);
}
.merkmal-raster > div::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--rot); flex:none; margin-top:9px; }
.merkmal-raster .ikon{ display:none; }

/* Linienzeichnung (Gastronomie) in einem ruhigen Rahmen */
.linienbild{ border:1px solid var(--linie); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:56px; color:var(--schwarz); }
.linienbild svg{ width:100%; height:auto; }

/* ---------- Zahlen / Fakten ---------- */
.zahlen{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin:32px 0 28px; border-top:1px solid var(--linie); padding-top:20px; }
.zahlen b{
  display:block; font-family:var(--display); font-weight:500;
  font-size:clamp(34px, 3.6vw, 46px); line-height:1; letter-spacing:-.02em; color:var(--text);
}
.zahlen span{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mut); }

.riesenzahl{
  font-family:var(--display); font-weight:600;
  font-size:clamp(96px, 15vw, 190px); line-height:.85; letter-spacing:-.04em;
  color:var(--ghost);
}
.riesenzahl small{
  display:block; color:var(--text-mut);
  font-family:var(--display); font-size:14px; font-weight:500; letter-spacing:.04em; margin-top:14px;
}

/* ---------- Referenzen ---------- */
.kunden-logos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 24px; }
.kunden-logos div{
  display:flex; align-items:center; justify-content:center;
  padding:14px; height:84px; border-top:1px solid var(--linie);
}
.kunden-logos img{ max-height:44px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.8; transition:filter .15s ease, opacity .15s ease; }
.kunden-logos div:hover img{ filter:none; opacity:1; }

.marken-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.marken-chips span{ border:1px solid var(--linie-dunkel); padding:6px 14px; font-size:13px; font-weight:500; }

/* ---------- Zweispalter ---------- */
.zweispalter{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; }
.held-raster > *, .zweispalter > *, .leistung-raster > *{ min-width:0; }
.zweispalter--start{ align-items:start; }
.zweispalter .bildseite img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.zweispalter .bildseite--portrait{ max-width:300px; }
.zweispalter .bildseite--portrait img{ aspect-ratio:4/5; object-position:50% 15%; }
.zweispalter > svg{ width:100%; height:auto; }

/* ---------- Hinweiskasten ---------- */
.hinweis{
  border:1px solid var(--linie-dunkel); padding:18px 20px;
  display:flex; flex-direction:column; gap:8px; max-width:680px;
}
.hinweis .stempel{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mut);
}
.hinweis .stempel::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--rot); flex:none; }
.hinweis p{ margin:0; font-size:15.5px; }

/* ---------- Kontaktband ---------- */
.kontaktband{ background:var(--weiss); border-top:1px solid var(--linie); }
.kontaktband .inhalt{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:64px; align-items:center;
  padding-top:80px; padding-bottom:80px;
}
.kontaktband h2{ font-size:clamp(34px, 4.4vw, 56px); font-weight:600; margin-bottom:18px; }
.kontaktband .btn-reihe{ justify-content:flex-end; }
.adresse{ display:flex; flex-direction:column; gap:6px; font-size:17px; color:var(--text-mut); }
.adresse b{ color:var(--text); font-weight:500; }
.adresse a{ color:var(--rot); text-decoration:none; font-weight:500; }
.adresse a:hover{ color:var(--text); }

/* ---------- Formular ---------- */
.formular{ max-width:720px; }
.formular-raster{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.feld{ display:flex; flex-direction:column; gap:6px; }
.feld--voll{ grid-column:1 / -1; }
.feld label{ font-size:12.5px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--text-mut); }
.feld input, .feld textarea{
  font-family:var(--body); font-size:16px; color:var(--text);
  padding:0 14px; height:48px; border:1px solid #c9cbc7; background:#fff;
  border-radius:0; appearance:none; width:100%;
}
.feld textarea{ min-height:160px; height:auto; padding:12px 14px; resize:vertical; }
.feld input:focus, .feld textarea:focus{ outline:2px solid var(--schwarz); outline-offset:-1px; border-color:var(--schwarz); }
.pflicht{ color:var(--rot); }
.formular .datenschutz-hinweis{ font-size:13.5px; color:var(--text-mut); margin:16px 0 20px; }
.formular .datenschutz-hinweis a{ text-decoration:underline; text-underline-offset:3px; }
.honigtopf{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* Erreichbarkeit auf der Kontaktseite */
.kontaktbild{ width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:22px; }
.portrait{ width:56px; height:56px; object-fit:cover; object-position:50% 18%; flex:none; }
.punkte li.mit-portrait{ align-items:center; }
.zeiten{ border-collapse:collapse; font-size:15.5px; width:100%; }
.zeiten td{ padding:10px 22px 10px 0; border-top:1px solid var(--linie); vertical-align:top; }
.zeiten td:last-child{ padding-right:0; color:var(--text-mut); text-align:right; white-space:nowrap; }
.zeiten tr:last-child td{ border-bottom:1px solid var(--linie); }

/* ---------- Fußzeile ---------- */
.fuss{ background:var(--flaeche); color:var(--text-mut); font-size:14px; border-top:1px solid var(--linie); }
.fuss a{ color:var(--text-mut); text-decoration:none; }
.fuss a:hover{ color:var(--text); }
.fuss-raster{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px;
  padding-top:48px; padding-bottom:36px;
}
.fuss h3{
  font-weight:500; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); margin-bottom:12px;
}
.fuss ul{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.fuss .logo-fuss img{ height:18px; width:182px; margin-bottom:14px; }
.fuss-unten{
  border-top:1px solid var(--linie);
  padding-top:18px; padding-bottom:18px;
  display:flex; gap:22px; flex-wrap:wrap; font-size:13px;
}
.fuss-unten span:first-child{ margin-right:auto; }

/* ---------- Rechtstexte ---------- */
.rechtstext{ max-width:76ch; }
.rechtstext h1{ margin-bottom:24px; }
.rechtstext h2{ font-family:var(--display); font-weight:500; font-size:24px; letter-spacing:-.01em; margin:36px 0 10px; }
.rechtstext h3{ font-weight:500; font-size:17px; margin:24px 0 8px; }
.rechtstext p, .rechtstext li{ color:var(--text-mut); font-size:15.5px; }

/* ---------- Sprungleiste (Unterseiten) ---------- */
.anker-leiste{
  background:var(--weiss); border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
  position:sticky; top:var(--kopf-hoehe); z-index:50;
}
.anker-leiste .inhalt{
  display:flex; gap:26px; overflow-x:auto; height:52px; align-items:center;
  scrollbar-width:none;   /* auf dem Handy seitlich wischbar, ohne Rollbalken */
}
.anker-leiste .inhalt::-webkit-scrollbar{ display:none; }
.anker-leiste a{ text-decoration:none; font-size:14px; white-space:nowrap; color:var(--text-mut); }
.anker-leiste a:hover{ color:var(--text); }
.anker-leiste a:last-child{ margin-left:auto; color:var(--text); }

/* ---------- Häufige Fragen (Leistungsseiten) ---------- */
.fragen{ max-width:840px; border-bottom:1px solid var(--linie-dunkel); margin-top:8px; }
.frage{ border-top:1px solid var(--linie-dunkel); }
.frage summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:18px 0; font-weight:500; font-size:18px; line-height:1.3;
}
.frage summary::-webkit-details-marker{ display:none; }
.frage summary::after{
  content:"+"; flex:none; color:var(--rot);
  font-weight:400; font-size:28px; line-height:1;
}
.frage[open] summary::after{ content:"–"; }
.frage summary:hover{ color:var(--rot); }
.frage p{ margin:0 0 20px; font-size:16px; line-height:1.6; color:var(--text-mut); max-width:68ch; }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .held-raster, .zweispalter, .kontaktband .inhalt, .leistung-raster, .abschnitt-kopf{ grid-template-columns:1fr; }
  .abschnitt-kopf{ gap:20px; }
  .held-raster{ gap:32px; }
  .kontaktband .inhalt{ gap:28px; }
  .kontaktband .btn-reihe{ justify-content:flex-start; }
  .karten-raster{ grid-template-columns:1fr 1fr; }
  .listen-raster{ grid-template-columns:1fr 1fr; }
  .kunden-logos{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .pikto-raster{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 24px; }
  .galerie, .galerie--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fuss-raster{ grid-template-columns:1fr 1fr; }
  .leistungs-zeile{
    grid-template-columns:40px minmax(0,1fr) 24px; grid-template-areas:"nr titel pfeil" "nr text pfeil";
    gap:0 14px; align-items:start; padding:18px 0;
  }
  .leistungs-zeile h3{ font-size:20px; margin-bottom:4px; }
  .leistungs-zeile p{ font-size:14.5px; }
  .leistungs-zeile .pfeil{ margin-top:2px; }
  .linienbild{ aspect-ratio:16/9; padding:32px 48px; }
  .riesenzahl{ font-size:clamp(96px, 22vw, 150px); }
}
@media (max-width:640px){
  body{ font-size:16px; line-height:1.55; }
  .abschnitt{ padding:56px 0; }
  .abschnitt--schmal{ padding:40px 0; }
  .inhalt{ padding-left:20px; padding-right:20px; }
  .held .inhalt{ padding-top:40px; padding-bottom:48px; gap:24px; }
  .held h1{ font-size:clamp(40px, 13.5vw, 54px); }
  .held-text{ font-size:17px; }
  .held-bild img{ aspect-ratio:4/3; }
  .pikto-raster{ gap:0 16px; }
  .pikto-kachel{ padding:16px 0 18px; }
  .pikto-kachel .pikto{ width:36px; height:36px; margin-bottom:6px; }
  .pikto-kachel b{ font-size:15.5px; }
  .seitenkopf .inhalt{ padding-top:40px; padding-bottom:40px; }
  .seitenkopf h1{ font-size:clamp(34px, 11vw, 48px); margin-bottom:20px; }
  .seitenkopf .held-text{ font-size:17px; }
  .seitenkopf-bild{ aspect-ratio:4/3; margin-top:32px; }
  .titel{ font-size:clamp(30px, 9vw, 36px); }
  .einleitung{ font-size:16px; margin-bottom:24px; }
  .abschnitt h1.display{ font-size:clamp(34px, 11vw, 48px); }
  .leistung{ padding:48px 0; }
  .leistung h2{ font-size:30px; }
  .karten-raster, .listen-raster, .merkmal-raster{ grid-template-columns:1fr; }
  .kunden-logos{ grid-template-columns:1fr 1fr; }
  .zahlen{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
  .zahlen b{ font-size:30px; white-space:nowrap; }
  .zahlen span{ font-size:12px; }
  .formular-raster{ grid-template-columns:1fr; }
  .fuss-raster{ grid-template-columns:1fr; gap:28px; }
  .btn{ width:100%; }
  .btn-reihe{ flex-direction:column; gap:10px; width:100%; }
  .kopf-anfrage{ width:auto; }
  .kontaktband .inhalt{ padding-top:56px; padding-bottom:56px; }
  .kontaktband h2{ font-size:clamp(32px, 10vw, 40px); }
  .anker-leiste .inhalt{ gap:20px; height:48px; }
  .frage summary{ font-size:16.5px; padding:14px 0; }
  .galerie, .galerie--2, .galerie--4{ grid-template-columns:1fr 1fr; gap:8px; }
  .zweispalter, .leistung-raster, .held-raster{ gap:28px; }
  .zweispalter .bildseite--portrait{ max-width:220px; }
}