/* =====================================================================
   Webprojekt Donauwörth
   Reines HTML/CSS/PHP/JS (kein WordPress)

   Farben und Schriften stammen unverändert aus der bestehenden Website.
   Es kommen bewusst keine neuen Markenfarben dazu: Abstufungen entstehen
   ausschließlich als Transparenzstufen der vorhandenen Werte.

   Aufbau
   01 Tokens
   02 Grundlagen
   03 Layout
   04 Typografie und Listen
   05 Buttons
   06 Kopfbereich und Navigation
   07 Seitenkopf
   08 Startseite
   09 Karten und Raster
   10 Referenzen
   11 Preise und Tabellen
   12 Kundenstimmen
   13 FAQ
   14 Inhaltsverzeichnis
   15 Formulare und Anfrage-Assistent
   16 Fußbereich
   17 Bewegung
   18 Umbrüche
   ===================================================================== */

/* -------------------------------------------------- 00 Schriften
   Raleway und Open Sans werden lokal ausgeliefert, nicht über Google Fonts.
   Dadurch entsteht beim Seitenaufruf keine Verbindung zu einem externen
   Server, was die Datenschutzerklärung deutlich vereinfacht.

   Es sind variable Schriften: eine Datei je Familie und Zeichensatz deckt
   alle benötigten Schnitte ab. Deshalb steht bei font-weight ein Bereich
   statt eines einzelnen Werts.

   unicode-range sorgt dafür, dass latin-ext nur geladen wird, wenn ein
   Zeichen daraus tatsächlich vorkommt. Für deutsche Texte bleibt es also
   in der Regel bei den beiden latin-Dateien.

   Beide Schriften stehen unter der SIL Open Font License, das Selbsthosten
   ist damit ausdrücklich erlaubt. */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/opensans-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: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/opensans-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: 'Raleway';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/raleway-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;
}

/* -------------------------------------------------- 01 Tokens */
:root {
  --color-red:        #b31f1d;
  --color-red-hover:  #911917;
  --color-dark:       #1f1f1f;
  --color-text:       #444444;
  --color-muted:      #666977;
  --color-light:      #f6f4f1;
  --color-line:       #eaeaea;
  --color-white:      #ffffff;

  /* Abstufungen der Markenfarbe, keine neuen Farbwerte */
  --red-04:  rgba(179, 31, 29, .04);
  --red-08:  rgba(179, 31, 29, .08);
  --red-16:  rgba(179, 31, 29, .16);
  --red-30:  rgba(179, 31, 29, .30);

  --shadow-sm: 0 1px 2px rgba(31, 31, 31, .04), 0 2px 8px rgba(31, 31, 31, .04);
  --shadow-md: 0 2px 4px rgba(31, 31, 31, .04), 0 12px 28px rgba(31, 31, 31, .08);
  --shadow-lg: 0 4px 8px rgba(31, 31, 31, .05), 0 24px 48px rgba(31, 31, 31, .10);

  --font-head: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw: 1310px;      /* Contentbreite */
  /* Lesebreite für Fließtext, Überschriften, Listen und Inhaltsverzeichnis.
     Bewusst px und nicht ch: ch hängt an der Schriftgröße des jeweiligen
     Elements. Mit 68ch ergaben sich vier verschiedene Breiten auf derselben
     Seite (H1 609 px, Absatz 700 px, Intro 759 px, H2 volle Breite), die
     rechte Kante war dadurch ausgefranst. 900 px entsprechen rund 84
     Zeichen pro Zeile. */
  --readw: 900px;
  --legalw: none;      /* Rechtstexte laufen ueber die volle Contentbreite,
                          siehe Abschnitt 14. Falls doch wieder begrenzt:
                          bewusst px und nicht ch setzen, ch haengt an der
                          Schriftgroesse des Elements und laesst die rechte
                          Kante ausfransen. */
  --gutter: 24px;
  --radius: 0px;       /* Buttons bleiben kantig wie bisher */
  --radius-card: 3px;  /* nur für Flächen, kaum sichtbar, nimmt Härte raus */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------- 02 Grundlagen */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-red-hover); }

/* Sichtbarer Fokus auf allen bedienbaren Elementen (Anforderung AA).
   Bewusst als normale Selektorliste statt :where(), damit die Regel nicht
   versehentlich von spezifischeren Regeln ausgehebelt wird. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--color-dark); color: #fff; padding: 14px 22px;
  font-family: var(--font-body); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* Nur für Screenreader */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------- 03 Layout */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: 104px 0; }
.section--light { background: var(--color-light); }
.section--tight { padding: 56px 0; }
.section--flush-top { padding-top: 0; }

/* Der Contentbereich bleibt in voller Breite (1310px), damit Raster und
   Bilder Platz haben. Nur Fließtext bekommt eine angenehme Lesebreite und
   sitzt dabei linksbündig, statt in der Mitte zu schweben. */
.page-content > p,
.page-content > ul,
.page-content > ol,
.page-content > h2,
.page-content > h3,
.page-content > .note,
.page-content > .toc,
.page-content > .price-table-wrap,
.page-content > blockquote {
  max-width: var(--readw);
  margin-inline: 0;
}
.page-content > h2 { margin-top: 2.2em; scroll-margin-top: 120px; }
.page-content > h2:first-child { margin-top: 0; }
.page-content > h3 { margin-top: 1.7em; font-size: 1.2rem; }
.page-content > p:last-child { margin-bottom: 0; }

.lead { font-size: 1.22rem; color: var(--color-muted); max-width: var(--readw); margin-inline: 0; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: start; }
.split--reverse > *:first-child { order: 2; }
.split--media { grid-template-columns: .85fr 1.15fr; align-items: center; }

/* -------------------------------------------------- 04 Typografie und Listen */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--color-dark);
  line-height: 1.15;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); font-weight: 700; letter-spacing: -.5px; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 700; letter-spacing: -.2px; }
h3 { font-size: 1.35rem; font-weight: 700; }

p { margin: 0 0 1.25em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--color-red); margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--color-red); flex: 0 0 auto;
}

.note {
  font-size: .95rem; color: var(--color-muted);
  border-left: 3px solid var(--red-30); padding: 4px 0 4px 18px;
  max-width: var(--readw);
}

/* --- Aufzählungen ---------------------------------------------------
   Keine klassischen Punkte oder Striche, sondern ein zurückhaltendes
   Häkchen in einer getönten Fläche. Der Haken ist rein dekorativ und
   wird von Screenreadern nicht vorgelesen. */
.feature-list {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; gap: 4px;
}
.feature-list li {
  position: relative;
  padding: 10px 0 10px 44px;
  color: var(--color-text);
  font-size: 1.02rem;
}
.feature-list li::before {
  content: "";
  position: absolute; left: 0; top: 13px;
  width: 26px; height: 26px;
  background: var(--red-08);
  border-radius: 50%;
}
.feature-list li::after {
  content: "";
  position: absolute; left: 9px; top: 20px;
  width: 6px; height: 11px;
  border-right: 2px solid var(--color-red);
  border-bottom: 2px solid var(--color-red);
  transform: rotate(42deg);
}
/* Zweispaltig nur dort, wo es viele kurze Einträge sind */
.feature-list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }

/* Nummerierte Abläufe */
.process {
  list-style: none; counter-reset: schritt; margin: 52px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.process li {
  counter-increment: schritt; position: relative;
  padding: 0 26px 0 0;
}
.process li::before {
  content: counter(schritt);
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  color: var(--color-red); background: var(--color-white);
  border: 2px solid var(--red-16); border-radius: 50%;
  position: relative; z-index: 1;
}
/* Verbindungslinie zwischen den Schritten */
.process li::after {
  content: ""; position: absolute; left: 46px; top: 22px; right: 0; height: 2px;
  background: var(--color-line);
}
.process li:last-child::after { display: none; }
.process strong {
  display: block; font-family: var(--font-head); font-size: 1.05rem;
  color: var(--color-dark); margin-bottom: 8px;
}
.process span { font-size: .95rem; color: var(--color-muted); line-height: 1.55; }

/* -------------------------------------------------- 05 Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 600; letter-spacing: .3px;
  padding: 16px 34px; border-radius: var(--radius);
  border: 2px solid var(--color-red); cursor: pointer;
  text-decoration: none;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
.btn--primary { background: var(--color-red); color: var(--color-white); }
.btn--primary:hover {
  background: var(--color-red-hover); border-color: var(--color-red-hover);
  color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.btn--ghost { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,.7); }
.btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--color-red); }
.btn--outline:hover { background: var(--color-red); color: #fff; transform: translateY(-2px); }
.btn--full { width: 100%; }
.btn--sm { padding: 11px 22px; font-size: .93rem; }

/* Pfeil, der beim Überfahren mitgeht */
.btn--arrow::after {
  content: "→"; transition: transform .22s var(--ease); font-size: 1.1em; line-height: 1;
}
.btn--arrow:hover::after { transform: translateX(4px); }

/* Textlink im Fließtext-Stil */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}

/* -------------------------------------------------- 06 Kopfbereich und Navigation */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(255,255,255,.98); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 88px;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
/* Die Datei ist auf den Inhalt zugeschnitten (Verhältnis 4,52 zu 1), die
   angegebene Breite entspricht deshalb direkt der sichtbaren Logogröße. */
.brand__logo { width: 290px; height: auto; display: block; }

.main-nav ul {
  list-style: none; display: flex; align-items: center; gap: 30px; margin: 0; padding: 0;
}
.main-nav li { position: relative; }
.main-nav > ul > li > a {
  display: inline-block; padding: 8px 0;
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  color: var(--color-dark); text-decoration: none; position: relative;
}
/* Unterstrich wächst beim Überfahren aus der Mitte */
.main-nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-red); transform: scaleX(0);
  transition: transform .25s var(--ease);
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li > a.is-active::after { transform: scaleX(1); }
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a.is-active { color: var(--color-red); }

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav__cta { padding: 12px 24px; font-size: .95rem; }

.sub-toggle { display: none; background: none; border: 0; cursor: pointer; }
.sub-nav {
  position: absolute; top: calc(100% + 10px); left: -20px; min-width: 280px;
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 10px 0 !important; margin: 0;
  flex-direction: column; align-items: stretch !important; gap: 0 !important;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-sub:hover > .sub-nav,
.has-sub:focus-within > .sub-nav { opacity: 1; visibility: visible; transform: none; }
.sub-nav a {
  display: block; padding: 11px 24px; font-size: .97rem;
  font-family: var(--font-body); font-weight: 400; color: var(--color-text);
  text-decoration: none; border-left: 3px solid transparent;
}
.sub-nav a:hover, .sub-nav a.is-active {
  background: var(--red-04); color: var(--color-red); border-left-color: var(--color-red);
}

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 48px; height: 48px; padding: 0; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; position: relative; width: 26px; height: 2px;
  background: var(--color-dark); margin: 0 auto;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before { position: absolute; top: -8px; }
.nav-toggle span::after  { position: absolute; top:  8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-8px) rotate(-45deg); }

/* -------------------------------------------------- 07 Seitenkopf */
.page-head {
  position: relative;
  padding: 76px 0 84px;
  background: var(--color-light);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}
/* Zurückhaltende Fläche im Hintergrund, rein dekorativ */
.page-head::after {
  content: ""; position: absolute; right: -120px; top: -80px;
  width: 420px; height: 420px; border-radius: 50%;
  background: var(--red-04); pointer-events: none;
}
.page-head > .container { position: relative; z-index: 1; }
/* Gleiche Breite wie der Fließtext, damit Seitenkopf und Content auf
   derselben rechten Kante enden. */
.page-head h1 { max-width: var(--readw); }
.page-head .lead { margin-bottom: 0; }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: .87rem; color: var(--color-muted); margin-bottom: 26px;
}
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-red); text-decoration: underline; }
.breadcrumb span[aria-hidden] { opacity: .5; }

/* -------------------------------------------------- 08 Startseite */
.hero {
  position: relative; color: #fff; padding: 168px 0 148px;
  background:
    linear-gradient(180deg, rgba(20,22,28,.74), rgba(20,22,28,.80)),
    url("../img/hero.jpg") center/cover no-repeat;
}
/* Der Container laeuft auf voller Contentbreite, damit der Hero-Text auf
   derselben linken Kante sitzt wie der uebrige Seiteninhalt. Nur die
   einzelnen Bloecke darin bleiben auf angenehmer Breite begrenzt, statt
   den ganzen Kasten mittig schweben zu lassen. */
.hero__inner { max-width: var(--maxw); }
.hero__inner > * { max-width: 820px; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,.94); font-size: 1.24rem; max-width: 58ch; }
.hero .eyebrow { color: #ff8a87; }
.hero .eyebrow::before { background: #ff8a87; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.hero__meta {
  margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.22);
  display: flex; flex-wrap: wrap; gap: 32px; font-size: .96rem; color: rgba(255,255,255,.88);
}
.hero__meta strong { color: #fff; font-family: var(--font-head); }

.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 64px; margin-top: 56px; }
.service { display: grid; grid-template-columns: 60px 1fr; gap: 22px; }
.service__icon {
  width: 60px; height: 60px; display: grid; place-items: center;
  background: var(--red-08); color: var(--color-red); border-radius: var(--radius-card);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.service:hover .service__icon { background: var(--color-red); color: #fff; transform: translateY(-3px); }
.service__icon svg { width: 28px; height: 28px; }
.service h3 { margin-bottom: .4em; font-size: 1.28rem; }
.service h3 a { color: var(--color-dark); text-decoration: none; }
.service:hover h3 a { color: var(--color-red); }
.service p { margin: 0; color: var(--color-muted); font-size: 1rem; }

/* Die drei Merkmale neben "Unser Anspruch". Vorher standen sie oben an der
   Zeilenkante neben der Eyebrow und wirkten dadurch lose hingestellt. Jetzt
   sind sie eine eigene Flaeche, die mittig zur Textspalte sitzt, mit feinen
   Trennlinien statt schwebender Zeilen. */
.split--claim { align-items: center; }
.claim {
  background: var(--color-light); border-radius: var(--radius-card);
  padding: 10px 40px;
}
.claim__item { padding: 28px 0; }
.claim__item + .claim__item { border-top: 1px solid rgba(31, 31, 31, .09); }
.claim__title {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 1.1rem; color: var(--color-red); margin-bottom: 6px;
}
.claim__text { color: var(--color-muted); font-size: .98rem; line-height: 1.5; }

.trust { display: flex; flex-wrap: wrap; gap: 40px; }
.trust__item { display: flex; align-items: flex-start; gap: 16px; }
.trust__num {
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem;
  color: var(--color-red); text-transform: uppercase; letter-spacing: 1px;
}
.trust__lbl { color: var(--color-muted); font-size: .98rem; line-height: 1.45; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; counter-reset: step; }
.step {
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card);
  padding: 38px 34px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--red-16); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-head); font-weight: 800; font-size: 1.5rem;
  color: var(--color-red); display: block; margin-bottom: 16px;
}
.step h3 { font-size: 1.18rem; }
.step p { margin: 0; color: var(--color-muted); font-size: .98rem; }

.cta-band { background: var(--color-dark); color: #fff; }
/* Ueberschrift und Text laufen ueber die volle Contentbreite. Vorher waren
   sie auf 24ch bzw. 68ch begrenzt, also auf zwei verschiedene
   schriftabhaengige Maße: Im 1310er Container brach die Ueberschrift schon
   bei 542 px um, der Absatz bei 700 px, rechts blieb die Haelfte leer und
   die rechte Kante war ungleich. Beide Texte sind kurz genug, dass die
   volle Breite lesbar bleibt. */
.cta-band h2 { color: #fff; max-width: none; }
.cta-band p { color: rgba(255,255,255,.86); max-width: none; }
.cta-band .eyebrow { color: #ff8a87; }
.cta-band .eyebrow::before { background: #ff8a87; }
.cta-band .btn { margin-top: 12px; }

/* Portrait auf der Über-uns-Seite.
   Das Bild ist freigestellt und liegt auf der hellen Flächenfarbe, deshalb
   trägt die Fläche denselben Wert wie das eingebrannte Hintergrund im JPEG. */
.portrait { margin: 0; position: relative; }
.portrait img {
  width: 100%; max-width: 480px;
  background: var(--color-light);
  border-radius: var(--radius-card);
}
.portrait figcaption {
  display: flex; flex-direction: column; gap: 2px;
  max-width: 480px; margin-top: -28px; margin-left: 24px;
  position: relative; z-index: 1;
  background: #fff; border-left: 4px solid var(--color-red);
  box-shadow: var(--shadow-md); border-radius: var(--radius-card);
  padding: 18px 24px;
}
.portrait figcaption strong {
  font-family: var(--font-head); font-size: 1.1rem; color: var(--color-dark);
}
.portrait figcaption span { font-size: .92rem; color: var(--color-muted); line-height: 1.45; }

/* -------------------------------------------------- 09 Karten und Raster */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card {
  position: relative; background: #fff;
  border: 1px solid var(--color-line); border-radius: var(--radius-card);
  padding: 36px 32px 38px; display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--red-16); }
.card__icon {
  width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--red-08); color: var(--color-red);
  border-radius: var(--radius-card); margin-bottom: 22px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.card:hover .card__icon { background: var(--color-red); color: #fff; }
.card__icon svg { width: 26px; height: 26px; }
.card__claim {
  font-size: .72rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--color-red);
}
.card :is(h2, h3) { font-size: 1.24rem; margin: 8px 0 .5em; }
.card :is(h2, h3) a { color: var(--color-dark); text-decoration: none; }
/* Ganze Karte klickbar, ohne die Semantik des Links zu verlieren */
.card :is(h2, h3) a::before { content: ""; position: absolute; inset: 0; }
.card:hover :is(h2, h3) a { color: var(--color-red); }
.card p { color: var(--color-muted); font-size: .98rem; }
.card__points { list-style: none; margin: 0 0 26px; padding: 0; font-size: .93rem; }
.card__points li { position: relative; padding: 6px 0 6px 20px; color: var(--color-text); }
.card__points li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red-30);
}
.card__link {
  margin-top: auto; font-weight: 600; font-size: .97rem;
  color: var(--color-red); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.card__link::after { content: "→"; transition: transform .25s var(--ease); }
.card:hover .card__link::after { transform: translateX(5px); }

/* -------------------------------------------------- 10 Referenzen */
.filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
.filter__btn {
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  padding: 11px 24px; border: 2px solid var(--color-line); background: #fff;
  color: var(--color-muted); cursor: pointer; border-radius: 100px;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background-color .2s var(--ease);
}
.filter__btn:hover { border-color: var(--color-red); color: var(--color-red); }
.filter__btn.is-active { background: var(--color-red); border-color: var(--color-red); color: #fff; }

.ref-gruppe { margin-bottom: 76px; }
.ref-gruppe:last-of-type { margin-bottom: 0; }
.ref-gruppe__kopf {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 30px; padding-bottom: 16px; border-bottom: 1px solid var(--color-line);
}
.ref-gruppe__kopf h2 { margin: 0; font-size: 1.5rem; }
.ref-gruppe__anzahl { font-size: .92rem; color: var(--color-muted); }

.projects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.projects--grid { grid-template-columns: repeat(3, 1fr); }

/* Referenzkachel: Bild, darunter eine Textzeile mit fester Höhe,
   damit lange Titel das Raster nicht auseinanderziehen. */
.project {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-card); overflow: hidden;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.project:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--red-16); }
.project__media { position: relative; overflow: hidden; background: var(--color-light); }
.project__media img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  transition: transform .6s var(--ease);
}
.project:hover .project__media img { transform: scale(1.05); }

/* Zwischenloesung, solange ein Screenshot fehlt: Das Bild wird vollstaendig
   eingepasst statt zugeschnitten, damit ein Logo nicht an den Raendern
   abgeschnitten wird. Ohne Vergroesserung beim Ueberfahren, weil ein Logo
   dabei unruhig wirkt. */
.project__media img.project__vorschau {
  aspect-ratio: 4 / 3; object-fit: contain; width: 100%;
  padding: 13% 15%; background: var(--color-light);
}
.project:hover .project__media img.project__vorschau { transform: none; }
.project__placeholder {
  display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%;
  background: linear-gradient(135deg, var(--color-light), #fff);
  color: var(--color-red);
  font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; letter-spacing: 2px;
}
.project__chip {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.94); color: var(--color-dark);
  font-size: .72rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px;
}
.project__body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--color-line);
}
/* Titel bleibt einzeilig, zu lange Namen werden abgekürzt */
.project__label {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--color-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .25s var(--ease);
}
.project:hover .project__label { color: var(--color-red); }
.project__meta {
  font-size: .86rem; color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project[hidden] { display: none; }

/* Detailseite */
.ref-shot {
  width: 100%; border: 1px solid var(--color-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
}
.ref-meta {
  background: var(--color-light); border-radius: var(--radius-card);
  padding: 36px 34px; position: sticky; top: 116px;
}
.ref-meta__title { font-size: 1.1rem; margin-bottom: 22px; }
.ref-meta dl { margin: 0 0 28px; }
.ref-meta dl > div { padding: 14px 0; border-bottom: 1px solid rgba(31,31,31,.08); }
.ref-meta dl > div:last-child { border-bottom: 0; }
.ref-meta dt {
  font-size: .76rem; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--color-muted); margin-bottom: 6px;
}
.ref-meta dd { margin: 0; font-size: .97rem; color: var(--color-text); }
/* Link zur Kundenwebsite. Lange Domains duerfen umbrechen, die Spalte ist
   schmal und soll nicht seitlich ueberlaufen. */
.ref-meta__link { color: var(--color-red); text-decoration: none; overflow-wrap: anywhere; }
.ref-meta__link:hover { text-decoration: underline; }
.ref-meta dd ul { list-style: none; margin: 0; padding: 0; }
.ref-meta dd li { position: relative; padding: 4px 0 4px 18px; }
.ref-meta dd li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red-30);
}

/* -------------------------------------------------- 11 Preise und Tabellen */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; align-items: start; }
.plan {
  position: relative; background: #fff;
  border: 1px solid var(--color-line); border-radius: var(--radius-card);
  padding: 40px 32px 38px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan--recommended { border-color: var(--color-red); border-width: 2px; box-shadow: var(--shadow-md); }
.plan__badge {
  position: absolute; top: -14px; left: 32px;
  background: var(--color-red); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; padding: 6px 16px; border-radius: 100px;
}
.plan h3 { font-size: 1.3rem; margin-bottom: .2em; }
.plan__price {
  font-family: var(--font-head); font-weight: 800; font-size: 2.1rem;
  color: var(--color-dark); margin: 0 0 .4em;
}
.plan__price span { font-family: var(--font-body); font-weight: 400; font-size: .95rem; color: var(--color-muted); }
.plan__intro { color: var(--color-muted); font-size: .95rem; }
.plan__rows { margin: 0 0 30px; }
.plan__rows > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--color-line); font-size: .95rem;
}
.plan__rows dt { color: var(--color-muted); }
.plan__rows dd { margin: 0; font-weight: 600; color: var(--color-dark); text-align: right; }

.price-table-wrap { overflow-x: auto; margin: 30px 0 24px; max-width: var(--readw); }
.price-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.price-table caption {
  text-align: left; font-family: var(--font-head); font-weight: 700;
  color: var(--color-dark); padding-bottom: 14px;
}
.price-table th, .price-table td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--color-line); }
.price-table thead th { background: var(--color-light); font-family: var(--font-head); font-size: .95rem; }
.price-table tbody tr:hover { background: var(--red-04); }

/* -------------------------------------------------- 12 Kundenstimmen */
.testimonial {
  position: relative; margin: 0;
  background: #fff; border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius-card);
  padding: 38px 38px 32px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Großes Anführungszeichen als Akzent */
.testimonial::before {
  content: "„";
  position: absolute; top: 6px; right: 26px;
  font-family: var(--font-head); font-weight: 800; font-size: 5.5rem;
  color: var(--red-08); line-height: 1; pointer-events: none;
}
.testimonial blockquote {
  margin: 0; font-size: 1.06rem; line-height: 1.65; color: var(--color-text);
  position: relative; z-index: 1;
}
.testimonial figcaption {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-line);
  font-family: var(--font-head); font-weight: 700; font-size: .93rem; color: var(--color-dark);
}

/* Hervorgehobene Variante, z. B. auf der Über-uns-Seite */
.testimonial--featured {
  background: var(--color-dark); border-color: var(--color-dark);
  border-left-color: var(--color-red); box-shadow: var(--shadow-lg);
  padding: 44px 42px 38px;
}
.testimonial--featured blockquote { color: rgba(255,255,255,.95); font-size: 1.15rem; }
.testimonial--featured figcaption { color: #fff; border-top-color: rgba(255,255,255,.18); }
.testimonial--featured::before { color: rgba(255,255,255,.10); }

.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; }

/* -------------------------------------------------- 13 FAQ
   Bewusst auf weißem Grund statt auf der hellen Fläche: die Toggles sind
   selbst die Flächen und treten dadurch deutlicher hervor. */
.faq-section { border-top: 1px solid var(--color-line); background: #fff; }
.faq { margin-top: 44px; display: grid; gap: 14px; max-width: 900px; }
.faq__item {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__item:hover { border-color: var(--red-30); box-shadow: var(--shadow-sm); }
.faq__item[open] {
  border-color: var(--color-red);
  box-shadow: var(--shadow-md);
}
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 24px 68px 24px 26px; position: relative;
  font-family: var(--font-head); font-weight: 700; font-size: 1.08rem;
  color: var(--color-dark);
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Runder Schalter mit Plus, das sich beim Öffnen zum Minus dreht */
.faq__item summary::before {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 34px; height: 34px; margin-top: -17px;
  background: var(--red-08); border-radius: 50%;
  transition: background-color .25s var(--ease);
}
.faq__item summary::after {
  content: ""; position: absolute; right: 32px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  background:
    linear-gradient(var(--color-red), var(--color-red)) center/14px 2px no-repeat,
    linear-gradient(var(--color-red), var(--color-red)) center/2px 14px no-repeat;
  transition: transform .3s var(--ease), background-size .3s var(--ease);
}
.faq__item[open] summary::before { background: var(--color-red); }
.faq__item[open] summary::after {
  transform: rotate(180deg);
  background:
    linear-gradient(#fff, #fff) center/14px 2px no-repeat,
    linear-gradient(#fff, #fff) center/2px 0 no-repeat;
}
.faq__item summary:hover { color: var(--color-red); }
.faq__answer {
  padding: 0 68px 26px 26px; color: var(--color-muted); font-size: 1rem;
}
.faq__answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------- 14 Inhaltsverzeichnis */
.toc {
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius-card);
  padding: 26px 30px; margin: 0 0 48px;
  max-width: var(--readw);
  background: #fff;
}
.toc__title {
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--color-dark);
  margin: 0 0 14px;
}
/* Einspaltig, wie auf der bisherigen Website */
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { padding: 4px 0; }
.toc a {
  font-size: .98rem; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 10px;
}
.toc a::before { content: "›"; color: var(--color-red); font-weight: 700; }
.toc a:hover { text-decoration: underline; }

/* Rechtstexte: eigene Abstände, weil der Inhalt von eRecht24 kommt und
   nur begrenzt beeinflussbar ist. */
.legal h2 { font-size: 1.4rem; }
.legal h3 { font-size: 1.12rem; }
.legal p, .legal li { font-size: 1rem; }

/* Rechtstexte laufen breiter als der uebrige Fliesstext. Sie werden
   ueberflogen und nicht am Stueck gelesen, deshalb waere die schmale
   Lesebreite hier verschenkter Platz. Der eRecht24-Text besteht aus
   flachen Geschwistern (h1 bis h4, p, ul) ohne Verschachtelung, eine
   Regel auf die direkten Kinder erfasst also alles. Sie ueberschreibt
   bewusst die Lesebreite aus Abschnitt 03. */
.page-content.legal > * { max-width: var(--legalw); margin-inline: 0; }
/* Ausnahme: Ein Formular bleibt schmal. Eingabefelder ueber die volle
   Contentbreite sind unbedienbar, egal wie breit der Text daneben laeuft. */
.page-content.legal > .form { max-width: 760px; }
.legal ul { max-width: var(--legalw); }
/* Von eRecht24 geliefertes Markup einfangen */
.legal :is(h1, h2, h3, h4) { font-family: var(--font-head); color: var(--color-dark); }
.legal a { color: var(--color-red); }

/* -------------------------------------------------- 15 Formulare */
.form { margin-top: 32px; max-width: 760px; }
.form__row { margin-bottom: 24px; }
.form__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form label {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: .97rem; color: var(--color-dark); margin-bottom: 8px;
}
.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form select, .form textarea {
  /* Rahmenfarbe erreicht 3,4:1 gegen Weiß und 3,1:1 gegen die helle Fläche.
     WCAG 1.4.11 verlangt für Bedienelemente mindestens 3:1. */
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--color-text);
  padding: 15px 16px; border: 1px solid #858c9c; background: #fff;
  border-radius: var(--radius-card); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* Kein outline:none: der Tastaturfokus muss sichtbar bleiben.
   Der Rahmenwechsel ist die zusätzliche Rückmeldung bei Mausbedienung. */
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--color-red); box-shadow: 0 0 0 3px var(--red-16);
}
.form [aria-invalid="true"] { border-color: var(--color-red); background: var(--red-04); }
.form textarea { resize: vertical; min-height: 170px; }
.form__row--check label {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--font-body); font-weight: 400; font-size: .95rem;
  color: var(--color-muted); line-height: 1.55;
}
.form__row--check input { margin-top: 4px; flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--color-red); }
.form__error { margin: 8px 0 0; font-size: .9rem; color: var(--color-red); font-weight: 600; }
.form__hint { font-size: .88rem; font-weight: 400; color: var(--color-muted); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Direktkanäle auf der Kontaktseite --- */
.kanaele { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kanal {
  display: flex; align-items: center; gap: 18px;
  padding: 24px 26px; background: #fff; text-decoration: none;
  border: 1px solid var(--color-line); border-radius: var(--radius-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.kanal:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--red-16); }
.kanal__icon {
  flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--red-08); color: var(--color-red); border-radius: 50%;
}
.kanal__icon svg { width: 24px; height: 24px; }
.kanal__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kanal__body strong { font-family: var(--font-head); font-size: 1.08rem; color: var(--color-dark); }
.kanal__body span {
  font-size: .93rem; color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Anfrage-Assistent --- */
.wizard { max-width: 900px; margin-top: 36px; }
.wizard__head { margin-bottom: 30px; }
/* Fortschritt und Zähler ergeben erst mit JavaScript Sinn */
.wizard__count { font-size: .88rem; color: var(--color-muted); margin: 0 0 10px; font-weight: 600; }
.wizard__bar { height: 4px; background: var(--color-line); border-radius: 100px; overflow: hidden; }
.wizard__bar span {
  display: block; height: 100%; background: var(--color-red);
  transform-origin: left; transform: scaleX(0);
  transition: transform .4s var(--ease);
}
.wizard:not(.is-enhanced) .wizard__head,
.wizard:not(.is-enhanced) .wizard__nav { display: none; }
/* Ohne JavaScript lässt sich Schritt 2 nicht sinnvoll auf das Thema abstimmen.
   Die Angabe ist freiwillig, deshalb entfällt der Schritt dann ganz, statt
   alle sieben Fassungen untereinander zu zeigen. */
.wizard:not(.is-enhanced) .wizard__step--bedingt { display: none; }

.wizard__step { border: 0; padding: 0; margin: 0; }
.wizard__step + .wizard__step { margin-top: 52px; }
.wizard.is-enhanced .wizard__step + .wizard__step { margin-top: 0; }
.wizard__step h3 { font-size: 1.45rem; margin-bottom: .3em; }
.wizard__step h3:focus { outline: none; }
.wizard__hilfe { color: var(--color-muted); font-size: .98rem; max-width: 58ch; }

.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
.choices--kompakt { grid-template-columns: repeat(2, 1fr); }
.choice {
  display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 20px 22px; background: #fff; cursor: pointer;
  border: 2px solid var(--color-line); border-radius: var(--radius-card);
  font-family: var(--font-body);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.choice:hover { border-color: var(--red-30); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.choice[aria-pressed="true"] { border-color: var(--color-red); background: var(--red-04); }
.choice__icon {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--red-08); color: var(--color-red); border-radius: var(--radius-card);
}
.choice__icon svg { width: 21px; height: 21px; }
.choice__body { display: flex; flex-direction: column; gap: 3px; }
.choice__body strong { font-family: var(--font-head); font-size: 1.02rem; color: var(--color-dark); }
.choice__body span { font-size: .9rem; color: var(--color-muted); line-height: 1.45; }

.wizard__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }

.notice {
  padding: 24px 28px; margin-bottom: 30px;
  border-left: 4px solid var(--color-line); background: var(--color-light);
  border-radius: var(--radius-card); font-size: .98rem;
}
.notice p:last-child { margin-bottom: 0; }
.notice--ok { border-left-color: var(--color-red); background: var(--red-04); }
.notice--ok h2 { font-size: 1.35rem; }
.notice--error { border-left-color: var(--color-red); background: var(--red-08); }
.notice--todo { border-left-color: var(--color-dark); }

/* -------------------------------------------------- 16 Fußbereich */
.site-footer { background: #16171b; color: rgba(255,255,255,.72); padding: 72px 0 62px; font-size: .96rem; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 56px; }

/* Logo im dunklen Fußbereich weiß einfärben, damit es lesbar bleibt.
   Die rote Bildmarke wird dabei bewusst mit eingefärbt. */
.footer-brand__logo { width: 250px; height: auto; margin-bottom: 22px; filter: brightness(0) invert(1); opacity: .92; }
.footer-brand p { max-width: 46ch; margin: 0; }

/* Spaltenüberschrift mit Linie darüber und darunter */
.footer-col__title {
  font-family: var(--font-head); font-weight: 700;
  font-size: .82rem; letter-spacing: 2.4px; text-transform: uppercase;
  color: #fff; margin: 0 0 22px; padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.24);
  border-bottom: 1px solid rgba(255,255,255,.24);
}

.footer-contact { display: flex; flex-direction: column; gap: 14px; font-style: normal; }
.footer-contact__item {
  display: flex; align-items: center; gap: 14px;
  color: rgba(255,255,255,.82); text-decoration: none;
}
a.footer-contact__item:hover { color: #fff; }
.footer-contact__icon {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border-radius: 50%; color: #fff;
}
.footer-contact__icon svg { width: 17px; height: 17px; }

/* Rechtliches steht als Liste untereinander in der eigenen Spalte,
   nicht mehr als Zeile am unteren Rand. */
.footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-legal a, .footer-legal .linkish {
  color: rgba(255,255,255,.82); text-decoration: none; text-align: left;
}
.footer-legal a:hover, .footer-legal .linkish:hover { color: #fff; text-decoration: underline; }

/* Vorbereitet für die Partner-Banner, siehe Kommentar in footer.php.
   Greift erst, sobald dort Banner eingesetzt werden. */
.footer-partner {
  margin-top: 52px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; align-items: center; gap: 30px;
}
.footer-partner img { max-height: 60px; width: auto; opacity: .9; transition: opacity .2s var(--ease); }
.footer-partner a:hover img { opacity: 1; }

.floating { position: fixed; left: 20px; bottom: 24px; z-index: 190; display: flex; flex-direction: column; gap: 14px; }
.floating a {
  width: 54px; height: 54px; border-radius: 50%; color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease);
}
.floating a:hover { transform: scale(1.08); color: #fff; }
.floating a.call { background: var(--color-red); }
.floating a.mail { background: var(--color-dark); }
.floating svg { width: 24px; height: 24px; }

/* -------------------------------------------------- 17 Bewegung */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* -------------------------------------------------- 18 Umbrüche */
@media (max-width: 1180px) {
  .cards, .plans, .projects--grid { grid-template-columns: repeat(2, 1fr); }
  .projects { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .process li:nth-child(3)::after { display: none; }
  .main-nav { gap: 22px; }
  .main-nav ul { gap: 20px; }
  /* Der Schalter bleibt sichtbar, weil er der einzige Weg zur Kontaktseite
     ist. Er wird nur schmaler, statt zu verschwinden. */
  .main-nav__cta { padding: 11px 18px; font-size: .9rem; }
  .brand__logo { width: 250px; }
}

@media (max-width: 980px) {
  .split, .services, .steps { grid-template-columns: 1fr; }
  /* Marke über die volle Breite, Kontakt und Rechtliches nebeneinander */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .split { gap: 44px; }
  .split--reverse > *:first-child { order: 0; }
  .section { padding: 72px 0; }
  .quotes { grid-template-columns: 1fr; }
  .ref-meta { position: static; margin-top: 36px; }
  .feature-list--split { grid-template-columns: 1fr; }
  .hero { padding: 116px 0 96px; }
  .page-head { padding: 52px 0 58px; }

  /* Mobiles Menü.
     Dunkle Fläche: Auf weissem Grund lagen weisses Menü, hellblaues
     Untermenü und der rote Schalter dicht beieinander und waren schwer
     auseinanderzuhalten. Die Kopfleiste selbst bleibt hell, nur die
     aufgeklappte Fläche darunter ist dunkel. */
  .site-header__inner { min-height: 74px; }
  .brand__logo { width: 210px; }
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-dark); border-bottom: 0;
    display: block; max-height: 0; overflow: hidden;
    transition: max-height .35s var(--ease);
    box-shadow: var(--shadow-md);
  }

  /* 74px ist die Höhe der Kopfleiste, das Menü hängt darunter.
     vh rechnet auf dem iPhone mit eingeklappter Adressleiste, dadurch reichte
     das Menü unter die Bedienleiste. dvh folgt der wirklich sichtbaren Höhe,
     die vh-Zeile bleibt als Rückfall für ältere Browser stehen. */
  /* Die Sicherheitszone am unteren Rand nur im geöffneten Zustand freihalten.
     Steht sie an der Grundregel, kann das Menü nicht auf null zusammenklappen:
     Bei box-sizing: border-box begrenzt max-height die Aussenkante, das
     Innenabstand-Polster bleibt aber bestehen. Auf dem iPhone blieb dadurch
     ein 34 px hoher dunkler Streifen stehen, in dem der fixierte Schalter
     durchschimmerte. */
  .main-nav.is-open {
    max-height: calc(88vh - 74px); overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  @supports (height: 100dvh) {
    .main-nav.is-open { max-height: calc(100dvh - 74px); }
  }

  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
  .main-nav li { width: 100%; }
  .main-nav > ul > li + li { border-top: 1px solid rgba(255, 255, 255, .10); }
  .main-nav > ul > li > a { display: block; padding: 14px 0; width: 100%; color: #fff; }
  .main-nav > ul > li > a::after { display: none; }
  .main-nav > ul > li > a:hover,
  .main-nav > ul > li > a.is-active { color: #ff8a87; }

  /* Der Schalter bleibt beim Scrollen am unteren Rand stehen. Vorher stand er
     hinter dem letzten Menüpunkt und rutschte bei aufgeklapptem Untermenü
     unter die Bedienleiste des Telefons. Der äussere Schatten malt die
     Menüfläche rings um den Schalter, damit nichts darunter durchscrollt.
     Der helle Innenrand grenzt ihn vom dunklen Grund ab: Markenrot auf
     #1f1f1f erreicht nur 2,46 zu 1 und wäre als Fläche kaum erkennbar. */
  .main-nav__cta {
    display: flex; position: sticky; bottom: 24px; z-index: 1;
    margin: 10px 24px 24px;
    box-shadow: 0 0 0 24px var(--color-dark),
                inset 0 0 0 1px rgba(255, 255, 255, .30);
  }
  .main-nav__cta:hover {
    transform: none;
    box-shadow: 0 0 0 24px var(--color-dark),
                inset 0 0 0 1px rgba(255, 255, 255, .30);
  }

  .has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .has-sub > a { flex: 1; }
  .sub-toggle { display: block; width: 48px; height: 48px; position: relative; }
  .sub-toggle::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px;
    border-right: 2px solid rgba(255, 255, 255, .72);
    border-bottom: 2px solid rgba(255, 255, 255, .72);
    transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease);
  }
  .sub-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .sub-nav {
    position: static; width: 100%; min-width: 0; border: 0; box-shadow: none;
    background: rgba(255, 255, 255, .06);
    opacity: 1; visibility: visible; transform: none;
    max-height: 0; overflow: hidden; padding: 0 !important;
    transition: max-height .3s var(--ease); border-radius: 0;
  }
  .sub-nav.is-open { max-height: 600px; padding: 8px 0 !important; }
  .sub-nav a { padding: 12px 20px; color: rgba(255, 255, 255, .86); }
  .sub-nav a:hover, .sub-nav a.is-active {
    background: transparent; color: #ff8a87; border-left-color: #ff8a87;
  }
}

@media (max-width: 980px) {
  .kanaele { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cards, .plans, .projects, .projects--grid { grid-template-columns: 1fr; }
  .choices, .choices--kompakt { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .process { grid-template-columns: 1fr; row-gap: 28px; }
  .process li::after { display: none; }
  .process li { padding-right: 0; }
  .form__row--split { grid-template-columns: 1fr; }
  .filter__btn { flex: 1 1 auto; }
  .section { padding: 60px 0; }
  .testimonial, .testimonial--featured { padding: 30px 26px 26px; }
  .floating { left: 14px; bottom: 16px; }
  .floating a { width: 48px; height: 48px; }
}

/* Wer weniger Bewegung möchte, bekommt sie auch nicht.
   Inhalte bleiben in jedem Fall sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}