/* ==========================================================================
   Scheidtmann Karosserie & Lackierung – Gestaltung
   Leitidee „Zweifarbenlackierung“: oben Perlweiß, unten Babyblau, getrennt
   durch eine Chrom-Zierleiste; das Logo sitzt darauf wie ein Emblem.
   ========================================================================== */

/* ---------- Schriften (lokal, keine externen Server) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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: "Archivo";
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  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: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  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: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  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: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  font-weight: 500;
  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;
}

/* ---------- Design-Variablen ---------- */
:root {
  /* Farben – aus Logo und Kundenwunsch (Babyblau) */
  --nacht: #0E1E33;        /* Schrift, dunkle Flächen */
  --nacht-tief: #0A1626;   /* Seitenfuß */
  --logo: #0D5CB6;         /* Logo-Blau: Knöpfe, Links */
  --logo-tief: #0A4A94;
  --baby: #89CFF0;         /* Babyblau: unterer Lackton, Akzente */
  --baby-hell: #E1F2FB;
  --baby-tief: #4FA8D6;    /* nur Linien, nie Schrift auf Hell */
  --perl: #F3F6F8;         /* Perlweiß: oberer Lackton */
  --weiss: #FFFFFF;
  --stahl: #E6ECF1;        /* Typenschild */
  --text: #0E1E33;
  --text-leise: #42566F;
  --linie: #D2DCE5;
  --offen: #1E8A50;
  --fehler: #B42318;

  /* Chrom-Zierleiste */
  --chrom: linear-gradient(180deg, #7F8B97 0%, #FFFFFF 16%, #DCE3E9 40%, #95A1AD 58%, #EEF2F5 80%, #6C7884 100%);

  /* Schrift */
  --schrift: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-anzeige: clamp(2.6rem, 1rem + 6vw, 5.6rem);
  --fs-seite: clamp(2.3rem, 1.2rem + 4.8vw, 5rem);
  --fs-titel: clamp(1.7rem, 1.05rem + 2.5vw, 2.85rem);
  --fs-gross: clamp(1.1rem, 1rem + .45vw, 1.3rem);

  /* Raster */
  --rand: clamp(1rem, 4vw, 2.5rem);
  --breite: 1240px;
  --abstand: clamp(4rem, 3rem + 5vw, 7.5rem);
  --rund: 14px;
  --kopf-hoehe: 84px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--logo); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--logo-tief); }
h1, h2, h3, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--logo); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--baby); color: var(--nacht); }

.mono { font-family: var(--mono); font-weight: 500; letter-spacing: -.01em; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprunglink { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--nacht); color: var(--weiss); padding: .7rem 1rem; border-radius: 8px; }
.sprunglink:focus { top: 1rem; color: var(--weiss); }

.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.rahmen--schmal { max-width: calc(820px + 2 * var(--rand)); }
.abschnitt { padding-block: var(--abstand); }
.abschnitt--hell { background: var(--perl); }
.abschnitt__kopf { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); max-width: 46rem; }

/* ---------- Typografie ---------- */
.kicker {
  font-weight: 650;
  font-size: 1rem;
  color: var(--logo);
  margin-bottom: .75rem;
}
.kicker--hell { color: var(--baby); }

/* Emblem-Schrift: breit, kräftig, Großbuchstaben – wie Schriftzüge an Fahrzeugen */
.anzeige {
  font-size: var(--fs-anzeige);
  font-weight: 820;
  font-stretch: 125%;
  line-height: .9;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--nacht);
}
.anzeige__zeile { display: block; }
/* --zeichen = Länge des längsten Wortes: am Handy wird die Schrift so weit
   verkleinert, dass auch lange Wörter wie „Karosseriebau“ in die Zeile passen. */
.anzeige { font-size: min(var(--fs-anzeige), calc((100vw - 2 * var(--rand)) / (var(--zeichen, 10) * .8))); }
.anzeige--seite { font-size: min(var(--fs-seite), calc((100vw - 2 * var(--rand)) / (var(--zeichen, 10) * .8))); }
/* Startseite: ganzer Satz statt Schlagwörter – normale Schreibung, etwas schmaler */
.anzeige--satz {
  text-transform: none;
  font-stretch: 112%;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.022em;
  font-size: min(clamp(2.4rem, 1rem + 4.4vw, 4.6rem), calc((100vw - 2 * var(--rand)) / (var(--zeichen, 10) * .55)));
}

.titel {
  font-size: var(--fs-titel);
  font-weight: 760;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.titel--seite {
  font-size: min(clamp(2rem, 1.2rem + 3vw, 3.4rem), calc((100vw - 2 * var(--rand)) / (var(--zeichen, 10) * .68)));
  overflow-wrap: break-word;
  font-stretch: 115%; line-height: 1.02; margin-bottom: 2rem;
  hyphens: auto;
}
.titel--klein { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 1.5rem; }
.zwischentitel { font-size: 1.15rem; font-weight: 720; font-stretch: 110%; margin: 2.5rem 0 1rem; }
.einleitung { font-size: var(--fs-gross); line-height: 1.5; color: var(--text-leise); max-width: 38rem; text-wrap: pretty; }
.fliesstext { max-width: 38rem; color: var(--text-leise); text-wrap: pretty; }
.fliesstext--lang p + p { margin-top: 1.1em; }
.fliesstext--lang { color: var(--text); }

.textlink {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.75rem;
  font-weight: 650; font-stretch: 105%;
  color: var(--logo); text-decoration: none;
  border-bottom: 2px solid var(--baby);
  padding-bottom: .15rem;
}
.textlink:hover { color: var(--logo-tief); border-bottom-color: var(--logo); }
.textlink .icon { transition: transform .2s ease; }
.textlink:hover .icon { transform: translateX(3px); }

/* ---------- Knöpfe ---------- */
.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.1rem;
  padding: .75rem 1.35rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 680; font-stretch: 106%; font-size: 1rem; line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.knopf--voll { background: var(--logo); color: var(--weiss); }
.knopf--voll:hover { background: var(--logo-tief); color: var(--weiss); }
.knopf--rand { border-color: var(--nacht); color: var(--nacht); background: transparent; }
.knopf--rand:hover { background: var(--nacht); color: var(--weiss); }
.knopf--hell { border-color: rgba(255,255,255,.45); color: var(--weiss); }
.knopf--hell:hover { background: var(--baby); border-color: var(--baby); color: var(--nacht); }
.knopf--baby { background: var(--baby); color: var(--nacht); }
.knopf--baby:hover { background: var(--weiss); color: var(--nacht); }
.knopf--klein { min-height: 2.6rem; padding: .5rem 1rem; font-size: .95rem; }
.knopf--tel { background: var(--weiss); border: 1.5px solid var(--linie); color: var(--nacht); min-height: 2.75rem; padding: .5rem 1rem; }
.knopf--tel .icon { color: var(--logo); }
.knopf--tel:hover { border-color: var(--logo); color: var(--nacht); }

/* ---------- Hinweis-Banner ---------- */
.hinweis { background: var(--baby); color: var(--nacht); text-align: center; font-weight: 600; font-size: .95rem; padding: .6rem var(--rand); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--perl);
  transition: box-shadow .25s ease;
}
.kopf--gescrollt { box-shadow: 0 1px 0 var(--linie), 0 8px 24px -16px rgba(14,30,51,.35); }
.kopf__innen {
  display: flex; align-items: center; gap: 1.5rem;
  max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto;
  padding: .6rem var(--rand);
  min-height: var(--kopf-hoehe);
}
.kopf__logo { flex: none; display: block; transition: opacity .3s ease, transform .3s ease; }
.kopf__logo { position: relative; color: var(--nacht); text-decoration: none; }
.kopf__emblem { width: 112px; height: auto; transition: opacity .3s ease, transform .3s ease; }
.kopf__wortmarke {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: none;
  font-weight: 840; font-stretch: 125%; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05;
  white-space: nowrap;
}
.kopf__wortmarke small { display: block; font-weight: 600; font-stretch: 100%; font-size: .78rem; letter-spacing: .01em; text-transform: none; color: var(--logo); margin-top: .2rem; }
/* Startseite: oben steht das große Emblem auf der Zierleiste – im Kopf steht
   dann nur der Name; das kleine Logo erscheint beim Scrollen. */
.js .kopf--start:not(.kopf--logo) .kopf__emblem { opacity: 0; transform: translateY(-6px); }
.js .kopf--start:not(.kopf--logo) .kopf__wortmarke { display: block; }
.js .kopf--start:not(.kopf--logo) .kopf__logo { min-width: 12.5rem; }

.navi { margin-left: auto; }
.navi__liste { display: flex; gap: clamp(.9rem, .3rem + 1.2vw, 1.7rem); }
.navi__link {
  position: relative; display: block; padding: .35rem 0;
  color: var(--nacht); text-decoration: none;
  font-weight: 620; font-stretch: 104%; font-size: .98rem;
}
.navi__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 4px; border-radius: 2px;
  background: var(--baby); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.navi__link:hover { color: var(--nacht); }
.navi__link:hover::after, .navi__link[aria-current="page"]::after { transform: scaleX(1); }

.kopf__aktion { display: flex; align-items: center; gap: .9rem; flex: none; }
.kopf__menu {
  display: none; align-items: center; gap: .4rem;
  background: var(--nacht); color: var(--weiss); border: 0; border-radius: 999px;
  min-height: 2.75rem; padding: .5rem 1rem; font-weight: 650; cursor: pointer;
}

/* Öffnungsstatus */
.status { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--text-leise); white-space: nowrap; }
.status__punkt { width: .55rem; height: .55rem; border-radius: 50%; background: #9AA6B2; flex: none; }
.status--offen .status__punkt { background: var(--offen); box-shadow: 0 0 0 4px rgba(30,138,80,.16); }
.status--hell { color: #C7D4E1; }

/* ---------- Startseite: Zweiton ---------- */
.zweiton__oben {
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.75) 46%, rgba(255,255,255,0) 60%),
    var(--perl);
  padding-top: clamp(2rem, 1rem + 3vw, 4rem);
}
.zweiton__raster { display: grid; gap: 0 4rem; }
.zweiton__kopf { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.zweiton__text { padding-bottom: clamp(4.5rem, 3rem + 4vw, 6.5rem); }
.zweiton__foto { position: relative; z-index: 3; margin-bottom: -5rem; }
.zweiton__neben { display: none; }
.zweiton__foto img, .seitenkopf__foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rund);
  box-shadow: 0 30px 60px -30px rgba(14,30,51,.55), 0 0 0 1px rgba(14,30,51,.08);
}

.zierleiste { position: relative; z-index: 2; height: 12px; background: var(--chrom); box-shadow: 0 2px 0 rgba(14,30,51,.12); }
.zierleiste--emblem .rahmen { position: relative; height: 100%; }
.zierleiste__emblem {
  position: absolute; left: var(--rand); top: 50%;
  transform: translateY(-50%);
  width: clamp(190px, 120px + 14vw, 300px);
  filter: drop-shadow(0 14px 20px rgba(14,30,51,.3));
}
.emblem { width: 100%; height: auto; }

.zweiton__unten {
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 46%, rgba(255,255,255,0) 62%),
    var(--baby);
  color: var(--nacht);
  padding-top: clamp(8rem, 6rem + 6vw, 10.5rem);
  padding-bottom: var(--abstand);
}
.vertrauen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.vertrauen__punkt {
  border-top: 3px solid var(--nacht); padding-top: .7rem;
  font-weight: 760; font-stretch: 110%; font-size: clamp(1rem, .92rem + .35vw, 1.2rem); line-height: 1.2;
  color: var(--nacht);
  hyphens: auto; overflow-wrap: break-word;
}
.unfall__kopf { display: grid; gap: 2rem; }
.kicker--nacht { color: var(--nacht); margin-bottom: .4rem; }
.unfall__wege .unfall__tel { margin-top: 0; }
.unfall__text { font-size: var(--fs-gross); margin-top: 1rem; max-width: 34rem; }
.unfall__tel {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 1.75rem;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  color: var(--nacht); text-decoration: none;
  border-bottom: 3px solid var(--nacht);
  line-height: 1.2;
}
.unfall__tel .icon { width: .8em; height: .8em; }
.unfall__tel:hover { color: var(--logo-tief); border-bottom-color: var(--logo-tief); }
.unfall__wa { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; color: var(--nacht); font-weight: 600; }
.unfall__wa:hover { color: var(--logo-tief); }

.ablauf {
  display: grid; gap: 1.25rem;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  counter-reset: schritt;
}
.ablauf__schritt {
  position: relative;
  background: rgba(255,255,255,.6);
  border-radius: var(--rund);
  padding: 1.4rem 1.4rem 1.5rem;
}
.ablauf__nr {
  display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--nacht); color: var(--baby);
  font-size: 1rem; font-weight: 750;
  margin-bottom: .9rem;
}
.ablauf__titel { font-size: 1.3rem; font-weight: 780; font-stretch: 115%; text-transform: uppercase; letter-spacing: .01em; margin-bottom: .4rem; }
.ablauf__schritt p { font-size: .98rem; line-height: 1.5; }

/* ---------- Unterseiten: Seitenkopf ---------- */
.seitenkopf__oben { background: var(--perl); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 4.5rem); }
.seitenkopf__raster { display: grid; gap: 0 4rem; }
.seitenkopf__kopf { margin-bottom: 1.5rem; }
.seitenkopf__foto { margin-top: 1.5rem; }
/* Feine Zierlinie unter der Chromleiste; das breite Farbband nur dort, wo das Foto hineinragt (ab 1000px) */
.seitenkopf::after { content: ""; display: block; height: 11px; background: linear-gradient(var(--weiss) 0 4px, var(--baby) 4px); }

/* Karte „Direkt anfragen“ im Seitenkopf (nur Seiten ohne Foto, nur am PC) */
.kopfkarte { display: none; }

/* ---------- Startseite: Leistungen ---------- */
.neu {
  display: grid; gap: .75rem 1.25rem; align-items: center;
  grid-template-columns: auto 1fr;
  background: var(--baby-hell);
  border: 2px solid var(--baby);
  border-radius: var(--rund);
  padding: 1.1rem 1.25rem;
  margin-bottom: 2.5rem;
}
.neu__marke, .marke {
  display: inline-block; align-self: start;
  background: var(--logo); color: var(--weiss);
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  padding: .25rem .6rem; border-radius: 6px;
}
.neu__titel { font-weight: 720; font-stretch: 108%; }
.neu__text { color: var(--text-leise); font-size: .98rem; }
.neu__link { grid-column: 2; display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; text-decoration: none; }

.kacheln { display: grid; gap: 1.25rem; }
.kachel {
  display: flex; flex-direction: column; height: 100%;
  background: var(--weiss); color: var(--nacht); text-decoration: none;
  border-radius: var(--rund); overflow: hidden;
  box-shadow: 0 0 0 1px var(--linie);
  transition: box-shadow .25s ease, transform .25s ease;
}
.kachel__bild { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nacht); container-type: inline-size; }
.kachel__bild picture, .kachel__bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kachel__bild img { object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kachel__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,30,51,0) 38%, rgba(14,30,51,.82)); }
.kachel__name {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem; z-index: 1;
  color: var(--weiss);
  font-size: min(clamp(1.45rem, 1rem + 1.9vw, 2.5rem), 7.6cqi); font-weight: 820; font-stretch: 125%;
  text-transform: uppercase; line-height: 1; letter-spacing: -.01em;
}
/* Bereich ohne Foto: babyblaue Lackfläche statt Bild */
.kachel--farbe .kachel__bild {
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.3) 46%, rgba(255,255,255,0) 62%),
    var(--baby);
}
.kachel--farbe .kachel__bild::after { content: none; }
.kachel--farbe .kachel__name { color: var(--nacht); }
.kachel__unten { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.kachel__text { color: var(--text-leise); max-width: 30rem; }
.kachel__pfeil {
  flex: none; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 2px solid var(--nacht);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.kachel:hover { box-shadow: 0 0 0 1px var(--linie), 0 24px 48px -28px rgba(14,30,51,.55); transform: translateY(-3px); }
.kachel:hover .kachel__bild img { transform: scale(1.04); }
.kachel:hover .kachel__pfeil { background: var(--nacht); color: var(--baby); transform: translateX(3px); }
.kachel:focus-visible { outline-offset: 4px; }

/* ---------- Werkstatt & Fakten ---------- */
.werkstatt { background: var(--nacht); color: var(--weiss); }
.werkstatt .titel { color: var(--weiss); }
.werkstatt .fliesstext { color: #C3D0DD; }
.werkstatt .fakten__liste { border-top-color: var(--baby); }
.werkstatt .fakten__eintrag { border-bottom-color: rgba(255,255,255,.14); }
.werkstatt .fakten__wer { color: var(--weiss); }
.werkstatt .fakten__was { color: #C3D0DD; }
.werkstatt :focus-visible { outline-color: var(--baby); }
.textlink--hell { color: var(--baby); border-bottom-color: rgba(137,207,240,.45); }
.textlink--hell:hover { color: var(--weiss); border-bottom-color: var(--baby); }
.werkstatt__raster { display: grid; gap: 3rem; align-items: center; }
.technik__raster { display: grid; gap: 3rem; align-items: start; }
.technik__raster--oben { align-items: start; }
.werkstatt__text .fliesstext { margin-top: 1.5rem; }
.werkstatt__text .textlink { margin-top: 2rem; }
.werkstatt__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rund); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }

.fakten__titel { font-size: 1.15rem; font-weight: 740; font-stretch: 108%; margin-bottom: .75rem; }
.fakten__liste { border-top: 2px solid var(--nacht); }
.werkstatt__text .fakten { margin-top: 2rem; }
.fakten__eintrag { padding: .85rem 0; border-bottom: 1px solid var(--linie); }
.fakten__wer { display: block; font-weight: 720; font-stretch: 106%; color: var(--nacht); }
.fakten__was { display: block; color: var(--text-leise); margin-top: .1rem; }

/* ---------- Vorher/Nachher ---------- */
.projektraster { display: grid; gap: 2.5rem; }
.projekt__titel { font-size: 1.3rem; font-weight: 740; font-stretch: 110%; margin-top: 1.1rem; }
.projekt__fahrzeug { color: var(--logo); font-size: .85rem; margin-top: .25rem; }
.projekt__text { color: var(--text-leise); margin-top: .4rem; max-width: 36rem; }
.vergleich { position: relative; border-radius: var(--rund); overflow: hidden; aspect-ratio: 4 / 3; background: var(--stahl); touch-action: pan-y; }
.vergleich__bild, .vergleich__bild picture, .vergleich__bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vergleich__bild img { object-fit: cover; }
.vergleich__bild--vorher { clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.vergleich__etikett {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  font-size: .85rem; font-weight: 700;
  background: rgba(14,30,51,.82); color: var(--weiss); padding: .3rem .55rem; border-radius: 6px;
}
.vergleich__etikett--nachher { left: auto; right: .85rem; background: var(--baby); color: var(--nacht); }
.vergleich__griff {
  position: absolute; top: 0; bottom: 0; left: var(--position); z-index: 3;
  width: 10px; transform: translateX(-50%);
  background: linear-gradient(90deg, #7F8B97, #FFFFFF 22%, #DCE3E9 45%, #95A1AD 62%, #EEF2F5 82%, #6C7884);
  box-shadow: 0 0 0 1px rgba(14,30,51,.18);
  pointer-events: none;
}
.vergleich__griff::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 2.6rem; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--weiss); box-shadow: 0 4px 14px rgba(14,30,51,.35), inset 0 0 0 3px var(--baby);
}
.vergleich__regler { position: absolute; inset: 0; z-index: 4; }
.vergleich__regler input { width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vergleich:has(input:focus-visible) { outline: 3px solid var(--logo); outline-offset: 3px; }

/* ---------- Bewertungen ---------- */
.stimmen__liste { display: grid; gap: 1.25rem; align-items: start; }
.stimme { background: var(--weiss); border-radius: var(--rund); padding: 1.6rem 1.6rem 1.4rem; box-shadow: 0 0 0 1px var(--linie); }
.stimme__text { font-size: 1.1rem; line-height: 1.55; color: var(--nacht); }
.stimme--gross { background: var(--nacht); box-shadow: none; padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.stimme--gross .stimme__text { color: var(--weiss); font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); line-height: 1.45; font-weight: 500; }
.stimme--gross .stimme__wer { color: var(--baby); }
.stimme--gross .stimme__quelle { color: #A9B9CA; }
.stimme__text p::before { content: "„"; }
.stimme__text p::after { content: "“"; }
.stimme__wer { margin-top: .9rem; font-weight: 680; font-stretch: 108%; }
.stimme__quelle { color: var(--text-leise); font-weight: 400; }

/* ---------- Kontaktband ---------- */
.kontaktband { background: var(--nacht); color: var(--weiss); }
.kontaktband__raster { display: grid; gap: 2.5rem; align-items: end; padding-block: var(--abstand); }
.kontaktband__titel { font-size: var(--fs-titel); font-weight: 760; font-stretch: 112%; line-height: 1.05; text-wrap: balance; }
.kontaktband__tel { display: block; width: fit-content; margin: 1.5rem 0 1rem; font-size: clamp(1.8rem, 1.2rem + 2.8vw, 3.3rem); color: var(--baby); text-decoration: none; line-height: 1.1; }
.kontaktband__tel:hover { color: var(--weiss); }
.kontaktband__wege { display: flex; flex-wrap: wrap; gap: .75rem; }
.kontaktband :focus-visible { outline-color: var(--baby); }

/* ---------- Leistungsbereich ---------- */
.leistungsliste { border-bottom: 1px solid var(--linie); }
.leistung { display: grid; gap: 1rem 4rem; padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); border-top: 2px solid var(--nacht); }
.leistung + .leistung { border-top-width: 1px; border-top-color: var(--linie); }
.leistung__titel {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 780; font-stretch: 115%; line-height: 1.08;
  hyphens: auto; overflow-wrap: break-word;
}
.leistung__foto { margin-top: 1.5rem; }
.leistung__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rund); }
.leistung__inhalt .fliesstext { max-width: 40rem; }
.stichpunkte { display: grid; gap: .35rem 2rem; margin-top: 1.25rem; }
.stichpunkte li { position: relative; padding-left: 1.1rem; font-weight: 600; color: var(--nacht); }
.stichpunkte li::before { content: ""; position: absolute; left: 0; top: .62em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--baby-tief); }
.technik__text .fliesstext { margin-top: 1.5rem; }

.fragen__raster { display: grid; gap: 2rem 4rem; align-items: start; }
.fragen__kopf .fliesstext { margin-top: 1rem; }
.fragen__tel { display: inline-flex; align-items: center; gap: .6rem; margin-top: .75rem; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); color: var(--nacht); text-decoration: none; border-bottom: 3px solid var(--baby); }
.fragen__tel:hover { color: var(--logo); }
.fragen { border-top: 2px solid var(--nacht); max-width: 52rem; }
.frage { border-bottom: 1px solid var(--linie); }
.frage__titel {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; font-weight: 680; font-stretch: 106%; font-size: 1.1rem;
}
.frage__titel::-webkit-details-marker { display: none; }
.frage__titel::after { content: "+"; font-size: 1.6rem; font-weight: 500; color: var(--logo); transition: transform .2s ease; }
.frage[open] .frage__titel::after { transform: rotate(45deg); }
.frage__antwort { padding: 0 0 1.25rem; color: var(--text-leise); max-width: 40rem; }

.leer { font-size: var(--fs-gross); color: var(--text-leise); max-width: 36rem; }

/* ---------- Kontaktseite ---------- */
.kontakt__raster { display: grid; gap: 3rem; align-items: start; }
.formular { display: grid; gap: 1.25rem; }
.formular__zeile { display: grid; gap: 1.25rem; }
.formular__koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld__label { display: block; font-weight: 650; margin-bottom: .4rem; }
.feld__optional { font-weight: 400; color: var(--text-leise); font-size: .9rem; }
.feld__eingabe {
  width: 100%; min-height: 3.1rem;
  padding: .75rem .95rem;
  border: 1.5px solid #B4C2CF; border-radius: 10px;
  background: var(--weiss);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.feld__eingabe { resize: vertical; min-height: 9rem; }
.feld__eingabe:focus { outline: none; border-color: var(--logo); box-shadow: 0 0 0 4px rgba(137,207,240,.55); }
.feld__eingabe[aria-invalid="true"] { border-color: var(--fehler); }
.feld__fehler { color: var(--fehler); font-size: .92rem; margin-top: .35rem; font-weight: 600; }
.formular__hinweis { font-size: .9rem; color: var(--text-leise); }
.formular .knopf { justify-self: start; }

.meldung { border-radius: var(--rund); padding: 1.25rem 1.4rem; margin-bottom: 1.5rem; }
.meldung--erfolg { background: var(--baby-hell); border: 2px solid var(--baby); }
.meldung--fehler { background: #FDEEEC; border: 2px solid #E9A79F; color: #7A1A12; font-weight: 600; }
.meldung__titel { font-size: 1.4rem; font-weight: 760; font-stretch: 112%; margin-bottom: .5rem; }

.kontakt__wege { display: grid; gap: 1.25rem; }
.kontaktkarte { background: var(--perl); border-radius: var(--rund); padding: 1.5rem; }
.kontaktkarte .kicker { margin-bottom: .6rem; }
.kontaktkarte__tel { display: block; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); color: var(--nacht); text-decoration: none; margin-bottom: .6rem; }
.kontaktkarte__tel:hover { color: var(--logo); }
.kontaktkarte__liste { display: grid; gap: .6rem; margin-top: 1.1rem; }
.kontaktkarte__liste a { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; text-decoration: none; }
.kontaktkarte__fax { color: var(--text-leise); font-size: .95rem; }
.kontaktkarte__adresse { font-weight: 600; margin-bottom: 1rem; }

.karte { border: 1.5px dashed #AFC0CF; border-radius: 12px; padding: 1.1rem; background: var(--weiss); }
.karte__hinweis { font-size: .9rem; color: var(--text-leise); margin-bottom: .9rem; }
.karte .textlink { margin-top: 1rem; display: flex; width: fit-content; }
.karte--geladen { padding: 0; border: 0; overflow: hidden; }
.karte iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 12px; }

.zeiten { display: grid; gap: .3rem; margin: 0; }
.zeiten__zeile { display: flex; justify-content: space-between; gap: 1rem; }
.zeiten__zeile dt { font-weight: 600; }
.zeiten__zeile dd { margin: 0; text-align: right; }
.zeiten__zeile--zu dd { color: var(--text-leise); }
.zeiten--gross .zeiten__zeile { padding: .35rem 0; border-bottom: 1px solid var(--linie); }

/* ---------- Rechtstexte ---------- */
.abschnitt--text { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
.rechtstext {
  hyphens: auto; overflow-wrap: break-word; color: var(--text); }
.rechtstext h2 { font-size: 1.45rem; font-weight: 760; font-stretch: 110%; margin: 2.75rem 0 .9rem; }
.rechtstext h3 { font-size: 1.12rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.rechtstext p, .rechtstext ul { margin: 0 0 1rem; color: var(--text-leise); max-width: 46rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext a { word-break: break-word; }

/* ---------- Seitenfuß ---------- */
.fuss { background: var(--nacht-tief); color: #C3D0DD; font-size: 1rem; }
.fuss .zeiten__zeile { flex-wrap: wrap; column-gap: .75rem; }
.fuss .zeiten__zeile dd { white-space: nowrap; }
.fuss__innen {
  display: grid; gap: 2.5rem;
  max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto;
  padding: clamp(3rem, 2rem + 3vw, 4.5rem) var(--rand) 2.5rem;
}
.fuss__emblem { width: 168px; height: auto; margin-bottom: 1.25rem; }
.fuss__adresse { line-height: 1.55; }
.fuss__titel { font-size: 1rem; font-weight: 700; color: var(--baby); margin-bottom: .9rem; }
.fuss__liste { display: grid; gap: .45rem; }
.fuss a { color: #E4ECF3; text-decoration: none; }
.fuss a:hover { color: var(--baby); text-decoration: underline; }
.fuss .zeiten__zeile dt { font-weight: 500; }
.fuss .zeiten__zeile--zu dd { color: #8193A7; }
.fuss :focus-visible { outline-color: var(--baby); }
.fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto;
  padding: 1.5rem var(--rand) 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .9rem; color: #8FA2B6;
}
.fuss__recht { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- Mobile Schnellkontakt-Leiste ---------- */
.aktionsleiste { display: none; }

/* ---------- Bewegung (sparsam) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .zierleiste--emblem { animation: leiste .9s cubic-bezier(.2,.75,.2,1) both; transform-origin: left center; }
  .js .zierleiste__emblem { animation: emblem .7s .55s cubic-bezier(.2,.75,.2,1) both; }
}
@keyframes leiste { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes emblem { from { opacity: 0; transform: translateY(calc(-50% - 14px)); } to { opacity: 1; transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 700px) and (max-width: 999px) {
  .zweiton__foto, .seitenkopf__foto { width: min(100%, 34rem); justify-self: end; }
  .zweiton__foto { margin-bottom: -4rem; }
  .zierleiste__emblem { width: 200px; }
}

@media (min-width: 700px) {
  .ablauf { grid-template-columns: repeat(2, 1fr); }
  .stimmen__liste { grid-template-columns: repeat(2, 1fr); }
  .stimme--gross { grid-column: 1 / -1; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .vertrauen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .formular__zeile { grid-template-columns: 1fr 1fr; }
  .fuss__innen { grid-template-columns: repeat(2, 1fr); }
  .neu { grid-template-columns: auto 1fr auto; }
  .neu__link { grid-column: 3; }
}

@media (min-width: 1000px) {
  .zweiton__raster { grid-template-columns: 1fr 1fr; grid-template-areas: "kopf kopf" "text foto"; }
  .zweiton__kopf { grid-area: kopf; }
  .zweiton__text { grid-area: text; }
  .zweiton__foto { grid-area: foto; align-self: start; }
  /* Zweites Foto im Startbereich: klein, unten links über dem Hauptfoto */
  .zweiton__foto--paar { padding-left: 16%; }
  .zweiton__neben { display: block; position: absolute; left: 0; bottom: -2.75rem; width: 44%; z-index: 2; }
  .zweiton__neben img { aspect-ratio: 4 / 3; border-radius: 12px; box-shadow: 0 0 0 6px var(--perl), 0 24px 44px -20px rgba(14,30,51,.6); }
  .seitenkopf__raster { grid-template-columns: 7fr 5fr; grid-template-areas: "kopf kopf" "text foto"; }
  .seitenkopf__kopf { grid-area: kopf; }
  .seitenkopf__text { grid-area: text; }
  .seitenkopf__foto { grid-area: foto; align-self: start; margin-top: 0; margin-bottom: calc(-1 * clamp(3rem, 2rem + 3vw, 4.5rem) - 3.5rem); position: relative; z-index: 3; }
  .seitenkopf--bild + .abschnitt { padding-top: calc(var(--abstand) + 2rem); }
  .seitenkopf--bild::after { height: clamp(1.25rem, .8rem + 1.5vw, 2.25rem); background: var(--baby); }
  .ablauf { grid-template-columns: repeat(4, 1fr); }
  .unfall__kopf { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 4rem; }
  .werkstatt__raster, .technik__raster { grid-template-columns: 7fr 5fr; gap: 5rem; }
  .werkstatt__raster--bild { grid-template-columns: 6fr 5fr; }
  .stimmen__liste--mehr { grid-template-columns: 7fr 5fr; }
  .stimmen__liste--mehr .stimme--gross { grid-column: 1; grid-row: 1 / span 6; }
  .stimmen__liste--mehr .stimme:not(.stimme--gross) { grid-column: 2; }
  body { font-size: 1.125rem; }
  .werkstatt__raster--bild .werkstatt__foto { order: 0; }
  .projektraster { grid-template-columns: 1fr 1fr; }
  .kontaktband__raster { grid-template-columns: 1fr auto; }
  .kontaktband__wege { flex-direction: column; align-items: stretch; }
  .leistung { grid-template-columns: 5fr 7fr; }
  .leistung__inhalt { padding-top: .35rem; }
  .stichpunkte { grid-template-columns: repeat(2, max-content); }
  .fragen__raster { grid-template-columns: 5fr 7fr; }
  .fragen__kopf { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
  .seitenkopf__raster:has(.kopfkarte) { grid-template-columns: 7fr 4fr; }
  .kopfkarte {
    display: block; grid-area: foto; align-self: end; justify-self: end; width: 100%; max-width: 24rem;
    background: var(--nacht); color: var(--weiss); border-radius: var(--rund);
    padding: 1.6rem 1.6rem 1.5rem; box-shadow: 0 30px 60px -34px rgba(14,30,51,.7);
  }
  .kopfkarte__titel { font-weight: 700; color: var(--baby); }
  .kopfkarte__tel { display: block; margin: .35rem 0 .5rem; font-size: 1.9rem; color: var(--weiss); text-decoration: none; line-height: 1.15; }
  .kopfkarte__tel:hover { color: var(--baby); }
  .kopfkarte__wege { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
  .kopfkarte :focus-visible { outline-color: var(--baby); }
  .kontakt__raster { grid-template-columns: 7fr 5fr; gap: 4rem; }
  .fuss__innen { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

}

/* Navigation: unterhalb 1180px als ausklappbares Menü */
@media (max-width: 1179px) {
  .kopf__menu { display: inline-flex; }
  .kopf__aktion { margin-left: auto; }
  .navi {
    position: fixed; inset: var(--kopf-hoehe) 0 auto 0; z-index: 40;
    background: var(--perl); border-bottom: 1px solid var(--linie);
    box-shadow: 0 24px 40px -24px rgba(14,30,51,.45);
    padding: .5rem var(--rand) 1.5rem;
    display: none;
  }
  .no-js .navi { position: static; display: block; box-shadow: none; border: 0; padding: 0; }
  .kopf--offen .navi { display: block; }
  .navi__liste { flex-direction: column; gap: 0; }
  .navi__link { padding: .95rem 0; font-size: 1.35rem; font-stretch: 115%; font-weight: 760; text-transform: uppercase; border-bottom: 1px solid var(--linie); }
  .navi__link::after { display: none; }
  .navi__link[aria-current="page"] { color: var(--logo); }
}

@media (max-width: 699px) {
  .ablauf { gap: .75rem; }
  .ablauf__schritt { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.1rem 1.1rem 1.2rem; }
  .ablauf__nr { grid-row: 1 / span 2; margin-bottom: 0; }
  .ablauf__titel { align-self: center; margin-bottom: .25rem; }
  .ablauf__schritt p { grid-column: 2; }
}
@media (max-width: 400px) {
  .js .kopf--start:not(.kopf--logo) .kopf__logo { min-width: 9.5rem; }
  .kopf__wortmarke { font-size: .92rem; }
  .kopf__wortmarke small { font-size: .72rem; }
  .kopf__aktion { gap: .5rem; }
}

@media (max-width: 760px) {
  :root { --kopf-hoehe: 68px; }
  .kopf__emblem { width: 88px; }
  .knopf--tel .mono { display: none; }
  .knopf--tel { padding: .5rem .75rem; }
  .kopf__aktion .status { display: none; }
  .kopf__menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kopf__menu { padding: .5rem .8rem; }
  .zweiton__text { padding-bottom: 2rem; }
  .zweiton__raster { gap: 0; }
  .zweiton__foto { margin-bottom: 4.5rem; }
  .zierleiste__emblem { left: 50%; transform: translate(-50%, -50%); }
  @media (prefers-reduced-motion: no-preference) {
    .js .zierleiste__emblem { animation-name: emblem-mitte; }
  }
  .seitenkopf__foto { margin-top: .5rem; }

  /* Schnellkontakt-Leiste unten */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .aktionsleiste {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    display: flex; gap: 1px;
    background: rgba(255,255,255,.14);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 24px -12px rgba(14,30,51,.45);
    transition: transform .25s ease;
  }
  .aktionsleiste--weg { transform: translateY(110%); }
  .aktionsleiste__knopf {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 64px; background: var(--nacht); color: var(--weiss);
    font-weight: 680; text-decoration: none; font-size: .98rem;
  }
  .aktionsleiste__knopf:hover { color: var(--baby); }
  .aktionsleiste__knopf--haupt { background: var(--baby); color: var(--nacht); }
  .aktionsleiste__knopf--haupt:hover { color: var(--nacht); background: #A5DBF4; }
}
@keyframes emblem-mitte { from { opacity: 0; transform: translate(-50%, calc(-50% - 14px)); } to { opacity: 1; transform: translate(-50%, -50%); } }

@media (max-width: 400px) {
  .aktionsleiste__knopf { font-size: .88rem; gap: .35rem; }
  .aktionsleiste__knopf .icon { width: 1.1rem; height: 1.1rem; }
}

@media print {
  .kopf, .aktionsleiste, .kontaktband, .zierleiste, .fuss__marke { display: none !important; }
  body { padding: 0; }
}