/* ============================================================
   TriCore Facility Solutions — Unternehmenswebsite
   Zielgruppe: Investoren, Asset Manager, B2B-Entscheider.
   Tonalitaet laut Briefing: sachlich, klar, hochwertig,
   zurueckhaltend-modern.

   TYPOGRAFIE
   Die ganze Seite folgt der Schrift und dem Schriftbild der
   Hero-Sektion: Inter, grosse Ueberschriften im Light-Schnitt (300)
   mit enger Laufweite, dazu die kleine Versalzeile als Rubrik-Label
   (11-12 px, 0.14em Sperrung) – exakt wie .tchero__label/.tchero__title.

   FARBEN
   Alle Flaechen-, Text- und Linienfarben haengen an Tokens, gebuendelt
   in :root. Die Seite steht durchgehend in warmem Anthrazit; die
   Akzente kommen vom hellen Ende des Markenverlaufs. Die Hero-Sektion
   ist bewusst NICHT ueber Tokens eingefaerbt: sie liegt auf dem Video
   und bekommt ihren Filter in hero-video.css.

   CTA-BUTTONS
   Uebernehmen die Formsprache der Navbar-Pillen: runde Pille, links ein
   kreisrunder Knopf mit Icon, rechts der Text. Masse aus hero-video.css.
   ============================================================ */

/* ============================================================
   1. FARB-TOKENS
   ============================================================ */
:root {
  /* Markenfarben, direkt aus der Logo-Datei gemessen (Pixelwerte des
     Verlaufs von links nach rechts). Diese vier Werte sind die
     Leitfarben laut Briefing Abschnitt 3. */
  --brand-navy: #002557;
  --brand-blue: #01498c;
  --brand-teal: #018e92;
  --brand-green: #4daf56;
  --brand-grad: linear-gradient(120deg, #002557 0%, #01498c 36%, #018e92 68%, #4daf56 100%);

  /* Schrift & Bewegung – identisch zur Hero-Sektion */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  /* Pillenmasse – gleiche Formsprache wie in hero-video.css.
     Auf dem Handy 36 px Knopf + 2 x 4 px Rand = 44 px Gesamthoehe:
     das ist die Mindestgroesse fuer Touch-Ziele (Apple HIG 44 pt).
     Ab 768 px greift der Desktop-Knopf mit 42 px. */
  --pill-ctl: 36px;
  --pill-pad: 4px;
  --pill-gap: 9px;
  --pill-font: 13.5px;
  --pill-icon: 14px;
}

@media (min-width: 768px) {
  :root {
    --pill-ctl: 42px;
    --pill-pad: 4px;
    --pill-gap: 10px;
    --pill-font: 14px;
    --pill-icon: 16px;
  }
}

/* ---------- Farbwelt: warmes Anthrazit ----------
   Der Verlauf #1c1b17 / #24241f / #2c3029 stellt den Sektionsgrund,
   das Naturweiss #fffdf9 traegt die Schrift. */
:root {
  --bg: #24241f;
  --bg-alt: #1c1b17;
  --surface: #2c2c26;
  --surface-2: #34342d;
  --line: rgba(255, 253, 249, 0.13);
  --line-strong: rgba(255, 253, 249, 0.24);

  --ink: #fffdf9;
  --ink-2: rgba(255, 253, 249, 0.76);
  --ink-3: rgba(255, 253, 249, 0.58);

  /* Auf dunklem Grund tragen die dunklen Logotoene nicht mehr – die
     Akzente werden auf die hellen Enden des Markenverlaufs gezogen. */
  --accent: #3fc0c5;
  --accent-2: #2fb0b5;
  --accent-3: #6cc96f;
  --accent-soft: rgba(63, 192, 197, 0.14);
  --accent-soft-2: rgba(108, 201, 111, 0.15);

  --pill-bg: #fffdf9;
  --pill-ink: #22221e;
  --pill-dot-bg: #22221e;
  --pill-dot-ink: #fffdf9;
  --chip-bg: rgba(255, 253, 249, 0.1);
  --chip-ink: #fffdf9;
  --chip-dot-bg: #fffdf9;
  --chip-dot-ink: #22221e;

  /* Eine Stufe dunkler als der Seitengrund, sonst ginge die Kontakt-
     Sektion im umgebenden Anthrazit unter. Das gruenstichige Ende
     zitiert den Sand-Verlauf (#2c3029). */
  --cta-bg: linear-gradient(160deg, #131311 0%, #1a1a15 48%, #232823 100%);
  --cta-glow: radial-gradient(closest-side, rgba(108, 201, 111, 0.28),
    rgba(1, 142, 146, 0.15) 55%, transparent 72%);
  --cta-ink: #fffdf9;
  --cta-ink-2: rgba(255, 253, 249, 0.82);
  --cta-line: rgba(255, 253, 249, 0.2);

  --footer-bg: #1c1b17;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.28), 0 24px 60px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.34), 0 40px 90px rgba(0, 0, 0, 0.36);
}

/* ============================================================
   2. GRUNDLAGEN
   ============================================================ */

/* Inter, selbst ausgeliefert statt von Google Fonts – beim Seitenaufruf
   geht so keine Anfrage an Dritte (siehe Datenschutzerklaerung).

   Eine variable Datei je Zeichensatz traegt alle Schnitte von 300 bis
   700. Dateien und Zeichenbereiche sind genau die, die Google Fonts
   selbst ausliefert; der Browser laedt latin-ext nur, wenn ein Zeichen
   daraus tatsaechlich vorkommt. Kyrillisch, Griechisch und Vietnamesisch
   fehlen bewusst – solche Zeichen fallen auf die Systemschrift zurueck.
   Lizenz: SIL Open Font License 1.1, liegt als assets/fonts/OFL.txt bei. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/inter-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;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* Englisch gewaehlt: bis js/i18n.js die Texte getauscht hat, bleibt die
   Seite verdeckt. Die Klasse setzt ein Einzeiler im <head>, der sie
   nach kurzer Frist auch von selbst wieder abnimmt. */
html.i18n-pending body { visibility: hidden; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-soft-2); }

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   3. TYPOGRAFIE — Schriftbild der Hero-Sektion
   ============================================================ */

/* Rubrikzeile: das Gegenstueck zu .tchero__label */
.eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--center { text-align: center; }

@media (min-width: 768px) {
  .eyebrow { font-size: 12px; }
}

/* Grosse Ueberschrift: Light-Schnitt und enge Laufweite wie
   .tchero__title – nur eine Stufe kleiner, damit die Hero-Headline
   die groesste Type der Seite bleibt. */
.section__title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.section__title--left { text-align: left; }

.section__lead {
  margin: 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-2);
}

.section__head {
  max-width: 700px;
  margin: 0 auto clamp(44px, 6vw, 72px);
  text-align: center;
}

/* Ausgewogene Zeilenumbrueche: balance verteilt Ueberschriften auf
   gleich lange Zeilen, pretty verhindert einzelne Woerter in der
   letzten Zeile der Vorspaenne. Progressive Enhancement – Browser
   ohne text-wrap brechen wie bisher. */
.section__title,
.cta__title,
.intro__claim,
.proc__panel-title,
.values__claim {
  text-wrap: balance;
}
.section__lead,
.cta__sub,
.feature__lead {
  text-wrap: pretty;
}

/* ============================================================
   4. BUTTONS — Formsprache der Navbar-Pillen
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--pill-gap);
  /* Links nur der Knopfrand, rechts Textluft: identisch zu .tcnav__menu */
  padding: var(--pill-pad) calc(var(--pill-pad) * 5.5) var(--pill-pad) var(--pill-pad);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--pill-font);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    background-color 0.25s ease, color 0.25s ease;
}

/* Der runde Knopf in der Pille – das Gegenstueck zu .tcnav__dot */
.btn__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pill-ctl);
  height: var(--pill-ctl);
  flex-shrink: 0;
  border-radius: 50%;
  transition: transform 0.35s var(--ease);
}
.btn__dot svg {
  width: var(--pill-icon);
  height: var(--pill-icon);
  display: block;
}

.btn:active { transform: scale(0.97); }
.btn:hover .btn__dot { transform: translateX(2px); }

/* Primaer = schwarze Pille mit hellem Knopf (wie die Menue-Pille) */
.btn--primary {
  background: var(--pill-bg);
  color: var(--pill-ink);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}
.btn--primary .btn__dot { background: var(--pill-dot-bg); color: var(--pill-dot-ink); }
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Sekundaer = helle Pille mit dunklem Knopf (wie die Notdienst-Pille) */
.btn--secondary {
  background: var(--chip-bg);
  color: var(--chip-ink);
}
.btn--secondary .btn__dot { background: var(--chip-dot-bg); color: var(--chip-dot-ink); }
.btn--secondary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Auf dunklem Grund (CTA-Sektion) kehren sich beide um. */
.btn--on-dark { background: #ffffff; color: #0a0a0a; }
.btn--on-dark .btn__dot { background: #0a0a0a; color: #ffffff; }
.btn--on-dark:hover { background: #f2f4f7; }

.btn--on-dark-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px var(--cta-line);
}
.btn--on-dark-ghost .btn__dot { background: #ffffff; color: #0a0a0a; }
.btn--on-dark-ghost:hover { background: rgba(255, 255, 255, 0.18); }

/* ============================================================
   5. SEKTIONEN
   ============================================================ */
.section { padding: clamp(72px, 9vw, 120px) 0; background: var(--bg); }
.section--alt { background: var(--bg-alt); }

/* ---------- Intro: Kurzportraet ---------- */
/* Die Textspalte bekommt etwas mehr Breite als die Anrede: die
   Ueberschrift traegt ihre Spalte ueber Schriftgroesse, der Fliesstext
   ueber Zeilen. Bei glatten 1fr/1fr stand links zu viel Weissraum. */
.intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 4.5vw, 64px) clamp(36px, 5vw, 72px);
  align-items: start;
}

/* Desktop: Fliesstext links, Anrede mit Button rechts. Bewusst ueber
   explizite Plaetze statt order: die Saeulen (grid-column 1/-1) wuerden
   sich sonst zwischen die getauschten Spalten schieben. Im Quelltext
   bleibt die Anrede vorn – Screenreader lesen weiter Ueberschrift vor
   Fliesstext. */
@media (min-width: 901px) {
  .intro__body { grid-column: 1; grid-row: 1; }
  .intro__lead { grid-column: 2; grid-row: 1; }
}
.intro__claim {
  margin: 0 0 24px;
  font-size: clamp(1.875rem, 3.6vw, 2.875rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.intro__body p {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.intro__body p:last-of-type { margin-bottom: 0; }

/* Volle Breite unter beiden Spalten: die drei Saeulen sind der
   gemeinsame Boden der Sektion, nicht ein Anhang der Textspalte. */
.intro__pillars {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: clamp(28px, 3.5vw, 44px) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.intro__pillars li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.intro__pillars b {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.intro__pillars svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-2);
}

/* Bewusst an die linke Spalte gebunden: der Button gehoert dort zur
   Anrede. Stuende die Regel frei, wuerde sie auch greifen, wenn der
   Button spaeter woanders landet. */
.intro__lead .intro__cta { margin: 32px 0 0; }

/* ============================================================
   6. LEISTUNGEN — zwei Bloecke, Kacheln mit Akkordeon
   ============================================================ */
.svc-block + .svc-block { margin-top: clamp(48px, 6vw, 76px); }

.svc-block__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.svc-block__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
}
.svc-block__badge svg { width: 22px; height: 22px; }
.svc-block__title {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.svc-block__title span { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.svc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.25s ease;
}
.svc:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.svc.is-open { border-color: var(--accent); box-shadow: var(--shadow-md); transform: none; }

.svc__toggle {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  padding: 26px 24px;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.svc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* Einheitlicher Linien-Icon-Satz: gleiche Strichstaerke, gleiche Geometrie */
.svc__icon svg { width: 26px; height: 26px; }
.svc:hover .svc__icon,
.svc.is-open .svc__icon { background: var(--accent); color: #1c1b17; }

.svc__head { flex: 1; min-width: 0; }
/* display: block ist hier tragend, nicht Kosmetik: beides sind <span>
   und damit von Haus aus inline. Ohne die Umstellung liefe die
   Beschreibung direkt hinter der Ueberschrift weiter ("Wartung &
   Instandhaltung Planmaessige Wartung ...") und der Abstand darunter
   bliebe wirkungslos – senkrechte Abstaende greifen an Inline-
   Elementen nicht. */
.svc__title {
  display: block;
  /* Ein sichtbarer Absatz zwischen Headline und Beschreibung –
     12 px entsprechen etwa einer Leerzeile im 15-px-Fliesstext. */
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.svc__text {
  display: block;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Der Hinweis auf die Detailebene erscheint beim Ueberfahren – auf
   Touch-Geraeten steht er dauerhaft (siehe Media-Query unten). */
.svc__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.svc:hover .svc__more,
.svc:focus-within .svc__more,
.svc.is-open .svc__more { opacity: 1; transform: none; }

.svc__chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--chip-ink);
  transition: transform 0.35s var(--ease), background-color 0.25s ease;
}
.svc__chev svg { width: 14px; height: 14px; }
.svc.is-open .svc__chev { transform: rotate(180deg); background: var(--accent); color: #fff; }

/* Aufklappbereich: 0fr -> 1fr animiert die echte Inhaltshoehe,
   ohne eine max-height raten zu muessen. */
.svc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.svc.is-open .svc__body { grid-template-rows: 1fr; }
.svc__body > div { overflow: hidden; }
.svc__body p {
  margin: 0;
  padding: 0 24px 26px 90px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.svc__body ul {
  margin: 0;
  padding: 0 24px 26px 90px;
  list-style: none;
  display: grid;
  gap: 9px;
}
.svc__body li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.svc__body li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-3);
}

/* ============================================================
   7. REPORTING / TRANSPARENZ
   ============================================================ */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
}
.feature__lead { margin: 0 0 26px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.feature__list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 14px; }
.feature__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.feature__list svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  padding: 3px;
  border-radius: 50%;
  background: var(--accent-soft-2);
  color: var(--accent-3);
}

.feature__visual { position: relative; }

.report-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.report-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.report-card__title { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.report-card__badge {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.report-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.report-row__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}
.report-row__ico svg { width: 19px; height: 19px; }
.report-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-row__info b { font-size: 14.5px; font-weight: 500; }
.report-row__info span { font-size: 12.5px; color: var(--ink-3); }
.report-row__state {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 500;
}
.report-row__state--ok { background: var(--accent-soft-2); color: var(--accent-3); }
.report-row__state--run { background: var(--accent-soft); color: var(--accent); }
.report-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
}
.report-card__foot b { font-weight: 500; color: var(--ink); }

.report-float {
  position: absolute;
  right: -14px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
.report-float__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--accent-soft-2);
  color: var(--accent-3);
}
.report-float__ico svg { width: 18px; height: 18px; }
.report-float b { display: block; font-size: 13.5px; font-weight: 500; }
.report-float span { font-size: 12px; font-weight: 500; color: var(--accent-3); }

/* ============================================================
   8. PROZESS — interaktiver Stepper
   ============================================================ */
.proc { display: grid; gap: clamp(32px, 4vw, 48px); }

/* Ohne JavaScript stehen alle sechs Phasen untereinander – der Inhalt
   ist damit immer vollstaendig lesbar und indexierbar. Schiene und
   Blaetter-Knoepfe erscheinen erst, wenn main.js den Block uebernommen
   hat; erst dann fuehren sie auch irgendwohin. */
.proc__rail,
.proc__nav { display: none; }
.proc.is-enhanced .proc__rail { display: grid; }
.proc.is-enhanced .proc__nav { display: flex; }

.proc.is-enhanced .proc__item { display: none; }
.proc.is-enhanced .proc__item.is-active { display: block; }
.proc__item + .proc__item { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.proc.is-enhanced .proc__item + .proc__item { margin-top: 0; padding-top: 0; border-top: 0; }

/* Die Schiene: sechs nummerierte Stationen auf einer Linie. */
.proc__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Durchgehende Linie hinter den Stationen. Sie endet in den Mitten der
   aeusseren Knoten, damit sie nicht ins Leere laeuft. */
.proc__rail::before {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 1px;
  background: var(--line-strong);
}

.proc__step { position: relative; }
.proc__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.25s ease;
}
.proc__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  transition: background-color 0.3s var(--ease), border-color 0.3s ease,
    color 0.3s ease, transform 0.3s var(--ease);
}
.section--alt .proc__dot { background: var(--bg-alt); }
.proc__name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.01em;
}
.proc__btn:hover { color: var(--ink); }
.proc__btn:hover .proc__dot { border-color: var(--accent); color: var(--accent); }

.proc__step.is-active .proc__btn { color: var(--ink); }
.proc__step.is-active .proc__dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #1c1b17;
  transform: scale(1.12);
}
/* Erledigte Stationen bleiben markiert – der Strang liest sich als Weg. */
.proc__step.is-done .proc__dot { border-color: var(--accent); color: var(--accent); }

/* Auf dem Desktop ist die Spur die Karte: genau eine Phase liegt darin.
   Auf dem Handy wird daraus eine wischbare Reihe – siehe Abschnitt 15. */
.proc__track {
  padding: clamp(28px, 3.5vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.proc__panel-num {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.proc__panel-title {
  margin: 0 0 16px;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.proc__panel-body { display: grid; gap: 14px; max-width: 68ch; }
.proc__panel-body p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }

/* Wechsel der Station: kurzes Einblenden, kein Springen. Nur dort, wo
   die Karte wirklich getauscht wird – im Handy-Slider stehen alle
   Karten nebeneinander, dort waere das ein Flackern beim Wischen. */
@media (min-width: 701px) {
  .proc.is-enhanced .proc__item.is-active { animation: proc-in 0.35s var(--ease) both; }
}
@keyframes proc-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.proc__nav {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
.proc__nav-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.proc__nav-btns { display: flex; gap: 8px; }
.proc__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40 px statt 36: naeher am 44-px-Touch-Ziel, ohne die Leiste
     optisch schwerer zu machen als die Stationsknoten (34 px). */
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.proc__nav-btn svg { width: 16px; height: 16px; }
.proc__nav-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #1c1b17; }
.proc__nav-btn:disabled { opacity: 0.35; cursor: default; }

/* ============================================================
   9. WERTE
   ============================================================ */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.value {
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 20px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
}
.value__ico svg { width: 23px; height: 23px; }
.value h3 { margin: 0 0 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.value p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.values__claim {
  margin: clamp(36px, 4vw, 52px) 0 0;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: clamp(1.125rem, 2.2vw, 1.625rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--ink);
}
.values__claim span { color: var(--ink-3); }

/* ============================================================
   10. TEAM
   ============================================================ */
/* Drei Karten: die beiden Gesellschafter und die Assistenz. Bei zwei
   Spalten stuende die dritte allein in der linken Haelfte - deshalb
   volle Reihe, und dafuer die volle Containerbreite statt der frueheren
   720 px. Unter 1000 px wird daraus wieder das Zweierraster mit der
   dritten Karte ueber beide Spalten. */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 auto;
}
.member {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
/* Platzhalter statt Stockfoto: Monogramm im Markenverlauf. Sobald echte
   Portraets vorliegen, ersetzt ein <img> diesen Block. */
.member__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.02em;
}
.member__name { margin: 0 0 4px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.member__role { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); }

/* Direktwahl und E-Mail laut Visitenkarte. Das Icon nimmt die gruene
   Akzentfarbe der Kontaktliste unten auf. */
.member__contact {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 2px;
}
.member__contact li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-2);
}
.member__contact svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent-3); }
/* Etwas Hoehe um den Link, damit er sich auf dem Handy treffen laesst. */
.member__contact a { padding: 3px 0; transition: color 0.2s ease; }
.member__contact a:hover { color: var(--ink); }
/* Bewusst --ink-2 statt --ink-3: die Chip-Flaeche ist im dunklen Theme
   selbst halbtransparent, das hellt den Untergrund auf. Mit --ink-3
   kaeme die Zeile dort nur auf Kontrast 4,1 – zu wenig fuer 11,5 px. */
.member__tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 500;
}

/* ============================================================
   11. KONTAKT / CTA
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--cta-bg);
  color: var(--cta-ink);
}
.cta__glow {
  position: absolute;
  right: -160px;
  bottom: -320px;
  width: 720px; height: 720px;
  background: var(--cta-glow);
  pointer-events: none;
}
.cta__inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.cta__title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.cta__sub {
  max-width: 580px;
  margin: 0 auto 38px;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: var(--cta-ink-2);
}
/* Nutzt denselben Wert wie der Fliesstext, statt einen zweiten,
   ungeprueften Alphawert einzufuehren. */
.cta .eyebrow { color: var(--cta-ink-2); }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 44px;
}

.cta__contact {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  margin: 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--cta-line);
}
.cta__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--cta-ink-2);
  /* Bricht ein Eintrag auf dem Handy um (Adresse mit "Germany"),
     steht die zweite Zeile buendig unter der ersten statt zentriert. */
  text-align: left;
}
.cta__contact svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--accent-3); }
.cta__contact a { transition: color 0.2s ease; }
.cta__contact a:hover { color: var(--cta-ink); }

/* ============================================================
   12. FOOTER
   ============================================================ */
.footer { padding: clamp(48px, 6vw, 72px) 0 32px; background: var(--footer-bg); }
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
/* Die Wortmarke ist schwarz angelegt und wird fuer den dunklen Grund gedreht.
   168 px mit der randlosen Datei entsprechen den frueheren 200 px mit Rand. */
.footer__logo { width: 168px; height: auto; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer__brand p { margin: 0; max-width: 320px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.footer__col h4 {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer__col a {
  display: block;
  margin-bottom: 11px;
  font-size: 14px;
  color: var(--ink-2);
  transition: color 0.2s ease;
}
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ============================================================
   12b. RECHTLICHE SEITEN — Impressum, Datenschutz
   ============================================================ */
.legal {
  /* Die Nav steht fest ueber dem Inhalt; oben so viel Luft, dass die
     Ueberschrift frei unter der Glasleiste beginnt. */
  padding: clamp(128px, 15vw, 184px) 0 clamp(72px, 9vw, 112px);
}
.legal__inner { max-width: 760px; }

.legal__title {
  margin: 0 0 14px;
  font-size: clamp(2.25rem, 5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.legal__meta {
  margin: 0 0 clamp(36px, 5vw, 56px);
  font-size: 14px;
  color: var(--ink-3);
}

.legal section + section {
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.legal h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.legal h3 {
  margin: 20px 0 8px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Fliesstext nur innerhalb der Abschnitte. Eine Regel auf ".legal p"
   waere spezifischer als .eyebrow, .legal__meta und .legal__note und
   wuerde deren Schriftgroesse, Farbe und Abstaende ueberschreiben. */
.legal section p,
.legal section li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.legal section p { margin: 0 0 14px; }
.legal section p:last-child { margin-bottom: 0; }
.legal section ul { margin: 0 0 14px; padding-left: 20px; }
.legal section li + li { margin-top: 4px; }
.legal strong { font-weight: 500; color: var(--ink); }
.legal a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal a:hover { color: var(--ink); }

/* Angaben, die der Auftraggeber noch liefert (HRB, USt-IdNr.). Bewusst
   sichtbar statt eines erfundenen Platzhalters. */
.legal__todo {
  display: inline-block;
  padding: 1px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

/* Hinweis der englischen Fassung: verbindlich ist die deutsche. */
.legal__note {
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

.footer__col a[aria-current="page"] { color: var(--ink); }

/* ============================================================
   12c. KARRIERE — Bewerbungsweg und Checkliste
   ============================================================ */

/* Wie .legal: die Leiste steht fest ueber dem Inhalt, die erste Sektion
   braucht deshalb Luft nach oben. Nur die erste - alle weiteren haben
   ihren regulaeren Sektionsabstand. */
.career > .section:first-child { padding-top: clamp(128px, 15vw, 184px); }

/* Der Einstieg besteht nur noch aus der Anrede. Der Abstand unter
   .section__head ist fuer den Inhalt gedacht, der dort folgt - folgt
   keiner, klafft darunter eine leere Flaeche. */
.career > .section:first-child .section__head { margin-bottom: 0; }


/* ---------- Bewerbungsweg ---------- */
.steps {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.step__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Checkliste fuer die Mail ---------- */
.career__note {
  max-width: 760px;
  margin: clamp(36px, 4vw, 52px) auto 0;
  padding: clamp(28px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.career__note h3 {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.career__note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.career__note li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.career__note li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 15px; height: 15px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236cc96f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
/* Der Datenschutzhinweis ist Beiwerk zur Checkliste - eine Stufe kleiner
   und abgesetzt, damit er die Liste nicht verlaengert. */
.career__privacy {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-3);
}
.career__privacy a { color: var(--accent); transition: color 0.2s ease; }
.career__privacy a:hover { color: var(--ink); }

/* ============================================================
   13. SCROLL-REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .proc__rail { grid-template-columns: repeat(3, 1fr); gap: 20px 8px; }
  .proc__rail::before { display: none; }

  /* Zu dritt nebeneinander bricht hier die Kontaktzeile um. Zurueck auf
     zwei Spalten; die dritte Karte nimmt die ganze zweite Reihe, damit
     keine halbe Luecke daneben steht. */
  .team { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
  .team .member:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; }
  /* Einspaltig steht der Button direkt zwischen Ueberschrift und
     Fliesstext – mit 24 statt 32 px Abstand bleibt er bei der Anrede,
     ohne ein eigenes Zwischenkapitel aufzumachen. */
  .intro__lead .intro__cta { margin-top: 24px; }
  .feature { grid-template-columns: 1fr; }
  .feature__visual { width: 100%; max-width: 460px; margin: 0 auto; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .section__title--left { text-align: center; }
  .feature__text { text-align: center; }
  .feature__list { max-width: 380px; margin-left: auto; margin-right: auto; text-align: left; }
  .feature__text .btn { margin: 0 auto; }
}

/* ---------- Prozess als Slider ----------
   Untereinander gestapelt waren das sechs Stationsknoepfe plus ein
   langer Textblock – auf einem Telefon eine sehr lange Strecke. Hier
   wird daraus eine wischbare Reihe: eine Karte pro Blick, die naechste
   schaut am Rand hervor.

   Getragen wird das vom nativen Scroll-Snapping, nicht von einer
   Gestenerkennung in JavaScript: das wischt sich mit der gewohnten
   Physik des Geraets, funktioniert mit Tastatur und Screenreader
   weiter und kostet keine Bibliothek. main.js haelt nur Punktreihe,
   Zaehler und Pfeile mit der Scrollposition im Gleichstand.

   Bewusst an .is-enhanced gebunden: ohne JavaScript gibt es weder
   Punkte noch Pfeile, dann bleibt die lesbare Liste untereinander
   stehen statt einer Reihe ohne sichtbare Bedienung. */
@media (max-width: 700px) {
  .svc-grid { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .team .member:nth-child(3) { grid-column: auto; }
  .intro__pillars { grid-template-columns: 1fr; gap: 12px; }

  .proc { gap: 20px; }

  /* Die Karte wandert von der Spur auf die einzelne Phase. */
  .proc.is-enhanced .proc__track {
    display: flex;
    gap: 14px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Der Nachlauf rechts erzeugt den Blick auf die naechste Karte und
       laesst zugleich die letzte ihre Snap-Position erreichen. Da die
       Karten ueber 100 % der Inhaltsbreite laufen, ist dieser Wert der
       einzige Ort, an dem der Ausschnitt festgelegt wird – nicht noch
       einmal an der Kartenbreite. */
    padding-right: 26px;
    /* Karten in ihrer natuerlichen Hoehe. Bei "stretch" wuerden alle
       sechs auf die hoechste gezogen und die kurzen Phasen haetten
       mehrere hundert Pixel leere Kartenflaeche unter dem Text. */
    align-items: flex-start;
  }
  .proc.is-enhanced .proc__track::-webkit-scrollbar { display: none; }

  /* Der zweite Selektor uebersteuert die Basisregel
     ".proc.is-enhanced .proc__item + .proc__item { padding-top: 0 }":
     sie ist spezifischer als die Kartenregel hier und drueckte den
     Karten 2-6 das obere Polster weg – "Phase 02" klebte am Rand,
     waehrend "Phase 01" seine 24 px hatte. */
  .proc.is-enhanced .proc__item,
  .proc.is-enhanced .proc__item + .proc__item {
    display: block;
    flex: 0 0 100%;
    scroll-snap-align: start;
    margin-top: 0;
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }

  /* Auf der schmalen Karte zaehlt jede Zeile: etwas kleinerer Satz und
     ein knapperes Zeilenmass halten die Phase in Sichthoehe. */
  .proc.is-enhanced .proc__panel-body { gap: 12px; }
  .proc.is-enhanced .proc__panel-body p { font-size: 15px; line-height: 1.6; }
  .proc.is-enhanced .proc__panel-title { margin-bottom: 12px; }

  /* Aus der Stationsreihe wird die Punktreihe des Sliders. */
  .proc.is-enhanced .proc__rail {
    grid-template-columns: repeat(6, auto);
    justify-content: center;
    gap: 10px;
  }
  .proc.is-enhanced .proc__name { display: none; }
  .proc.is-enhanced .proc__dot { width: 32px; height: 32px; }
  .proc.is-enhanced .proc__nav { justify-content: center; gap: 20px; }
}

@media (max-width: 620px) {
  .container { padding: 0 20px; }
  .values { grid-template-columns: 1fr; }
  .svc__toggle { padding: 22px 18px; gap: 14px; }
  .svc__body p, .svc__body ul { padding-left: 18px; padding-right: 18px; }

  /* Buttons nur so breit wie ihr Inhalt und mittig – ueber die volle
     Breite gezogen stand neben "Anrufen" sonst eine leere Flaeche. */
  .cta__actions { flex-direction: column; align-items: center; gap: 12px; }

  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-bottom: 32px; }
  .footer__brand { grid-column: 1 / -1; }
  /* Gleicher Abstand ueber und unter der Trennlinie. */
  .footer__bottom { justify-content: center; text-align: center; padding-top: 32px; }
}

/* Auf Touch-Geraeten gibt es kein Hover – die Detailzeile steht dort
   dauerhaft, sonst bliebe der Hinweis unsichtbar. */
@media (hover: none) {
  .svc__more { opacity: 1; transform: none; }
}

/* ============================================================
   15. BARRIEREFREIHEIT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 6px;
}