/* ============================================================
   1. DESIGN-TOKENS  – hier zentral anpassen
   ============================================================ */

:root {
  --color-white: #ffffff;
  --color-page-bg: var(--color-dark);
  --color-surface: var(--color-dark-soft);
  --color-primary: #245e9b;
  --color-primary-rgb: 36, 94, 155;
  --color-primary-hover: #2f74bd;
  --color-primary-dark: #1a4d82;
  --color-primary-12: rgba(var(--color-primary-rgb), 0.12);
  --color-danger: #f87171;
  --color-danger-rgb: 248, 113, 113;
  --color-success: #4ade80;
  --color-text-strong: #f4f6f8;
  --color-text-body-strong: rgba(255, 255, 255, 0.82);
  --chrome-text: #ffffff;
  --chrome-text-rgb: 255, 255, 255;
  --scroll-offset: 124px;
  --z-nav-backdrop: 990;
  --z-header: 1000;
  --z-back-to-top: 1500;
  --z-modal: 2000;
  --z-modal-legal: 2050;
  --z-toast: 3000;
}

/* ============================================================
   2. RESET & BASIS
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: var(--color-page-bg);
  scrollbar-color: var(--color-primary) var(--color-surface);
  scrollbar-width: thin;
  /* Platz für den Scrollbalken reservieren, damit die Seite beim
     Öffnen eines Overlays (Scrollsperre) nicht seitlich springt */
  scrollbar-gutter: stable;
  /* "clip" statt "hidden": verhindert horizontales Scrollen, macht
     html/body aber nicht zu eigenen Scroll-Containern – sonst bricht
     position: sticky beim Header */
  overflow-x: clip;
}

/* Scrollsperre, solange ein Overlay (Modal / Bild-Viewer) offen ist
   (Klasse wird in scripts.js per updateScrollLock() gesetzt) */

html.is-scroll-locked { overflow: hidden; }

/* Einheitlicher Scrollbalken (Seite, Rechtstexte, Formular) */

::-webkit-scrollbar { width: 8px; background: var(--color-surface); }

::-webkit-scrollbar-track { background: var(--color-surface); }

::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 999px;
  border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary-dark); }

/* Markierter Text: Markenblau mit 25 % Deckkraft, Schrift bleibt unverändert */

::selection { background-color: rgba(var(--color-primary-rgb), 0.25); }

ul { list-style: none; }

a { text-decoration: none; color: inherit; }

button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

body {
  background-color: var(--color-page-bg);
  font-family: "Roboto Flex", sans-serif;
  min-height: 100vh;
  color: var(--color-text-strong);
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* Dünne Kontaktzeile ganz oben – scrollt normal mit der Seite weg.
   Höhe = 30px Inhalt + 1px Rahmen. */

.header-top {
  height: 31px;
  background-color: var(--color-page-bg);
  border-bottom: 1px solid var(--chrome-border);
}

/* Hauptzeile mit Logo + Navigation – bleibt beim Scrollen oben stehen */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background-color: var(--color-page-bg);
}

.header-top-text {
  height: 30px;
  max-width: 1200px;
  padding: 0 30px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 20px;
  font-size: 12px;
  color: rgba(var(--chrome-text-rgb), 0.42);
}

/* Info-Meldung (z. B. Hinweis/Aktion) */

.header-top-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-top-info__label {
  font-weight: 700;
}

/* margin-left: auto hält die Kontakte rechts – auch wenn die
   Info-Meldung links ausgeblendet ist */

.header-top-contacts {
  display: flex;
  align-items: center;
  column-gap: 20px;
  margin-left: auto;
}

.header-contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bottom-bar {
  background-color: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--chrome-border);
}

.bottom-bar__content {
  position: relative;
  height: 72px;
  /* Logo 48px + je 12px Luft */
  max-width: 1200px;
  padding: 0 30px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo links in der Hauptzeile */

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.site-logo__image {
  display: block;
  height: 48px;
  width: auto;
}

.site-logo__textgroup {
  display: flex;
  flex-direction: column;
}

.site-logo__text {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 700;
  color: var(--chrome-text);
  white-space: nowrap;
}

.site-logo__subtext {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  color: rgba(var(--chrome-text-rgb), 0.58);
}

/* Rechte Gruppe neben der Navigation (Hamburger) */

.header-actions {
  display: flex;
  align-items: center;
}

/* Desktop: Navigation mittig zwischen Logo und Aktionen */

@media (min-width: 651px) {
  .bottom-bar__content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 24px;
  }
  .nav {
    display: flex;
  }
}

.nav__list {
  display: flex;
  align-items: center;
  column-gap: 26px;
}

.nav__item { color: rgba(var(--chrome-text-rgb), 0.58); }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 8px 12px;
  font-weight: 500;
  border-radius: 8px;
}

.nav__icon { font-size: 15px; line-height: 1; }

/* Hamburger-Button (nur mobil sichtbar – siehe Breakpoints) */

.hamburger { cursor: pointer; display: none; }

.bar {
  display: block;
  height: 2px;
  width: 27px;
  background-color: var(--chrome-text);
  margin: 5px 0;
  opacity: 0.85;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hamburger -> X */

.hamburger--open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.hamburger--open .bar:nth-child(2) { opacity: 0; }

.hamburger--open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Blur-Hintergrund für das mobile Menü – nur ≤ 650px aktiv */

.nav-backdrop { display: none; }

/* ============================================================
   5. MAIN-LAYOUT & SEKTIONS-HELFER
   ============================================================ */

.main {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 50px 30px 80px;
  display: flex;
  flex-direction: column;
  row-gap: 70px;
  flex: 1;
}

.main > * { position: relative; z-index: 1; }

/* Dezente Trennlinie über jeder Inhaltssektion (Leistungen, Ablauf,
   FAQ, Kontakt, Produkte) – liegt mittig im row-gap von .main */

.main > .content-section::after {
  content: "";
  position: absolute;
  top: -35px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-strong) 15%,
              var(--color-border-strong) 85%, transparent);
}

/* Anker-Offset, damit Sprungziele nicht unter dem Header verschwinden */

.content-section { scroll-margin-top: var(--scroll-offset); }

/* "Start" springt ganz nach oben (inkl. Kontaktleiste): der große
   Abstand wird vom Browser auf Scrollposition 0 begrenzt */

#startseite { scroll-margin-top: 100vh; }

/* Kleines Label über Überschriften */

.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-weight: 700;
  text-transform: uppercase;
  background-color: var(--surface-glass-soft);
}

.section-title {
  margin-bottom: 14px;
  color: var(--color-text-strong);
}

/* ============================================================
   6. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  font-weight: 600;
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Das eBay-Logo ist sehr flach – etwas größer, damit es erkennbar bleibt */

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
}

/* ============================================================
   17. FOOTER
   ============================================================ */

.footer { width: 100%; margin-top: auto; }

.footer-top {
  background-color: var(--card-bg);
  border-top: 1px solid var(--chrome-border);
}

.footer-top-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  display: grid;
  gap: 40px;
}

/* Untere Footer-Leiste: Copyright + Rechtslinks */

.footer-bottom-content {
  max-width: 1200px;
  padding: 0 30px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-bottom-list {
  display: flex;
  align-items: center;
}

/* ============================================================
   HOVER – nur Farbwechsel als Rückmeldung, ohne Bewegung.
   Nur für Geräte mit echtem Mauszeiger (auf Touchscreens bleibt
   :hover sonst nach dem Antippen "hängen").
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .header-contact-item__link:hover { color: var(--color-primary); }
  .nav__link:hover { color: var(--color-primary); }
  .nav__link.active:hover { color: var(--color-white); }
  .footer-text-link:hover { color: var(--color-primary); }
  /* Straße & PLZ/Ort sind zwei Links zur selben Adresse – beim Hover
     über einen der beiden leuchtet die ganze Adresse blau auf */
  .footer-bottom-link:hover { color: var(--color-primary); }
  /* blau wie die Links in der Top-Bar */
  .modal__close:hover { background-color: var(--color-primary); color: var(--color-white); }
  .request-form__consent-link:hover { text-decoration-color: var(--color-primary); }
}

/* ============================================================
   18. SICHTBARER FOKUSRAHMEN (Barrierefreiheit)
   ============================================================ */

.btn:focus-visible, .nav__link:focus-visible, .site-logo:focus-visible, .hamburger:focus-visible, .modal__close:focus-visible, .back-to-top:focus-visible {
  outline: 3px solid rgba(var(--color-primary-rgb), 0.5);
  outline-offset: 3px;
}

/* ============================================================
   19. MODAL  (Rechtstexte + Anfrageformular)
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
}

/* Rechtstexte-Modal lässt sich über dem Anfrageformular öffnen
   (Link in der Datenschutz-Checkbox) */

#modal { z-index: var(--z-modal-legal); }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(900px, calc(100% - 32px));
  /* feste Höhe: alle Fenster (Rechtstexte + Formular) gleich groß */
  height: 86vh;
  height: 86dvh;
  margin: 5vh auto;
  margin: 5dvh auto;
  padding: 28px 36px 24px 28px;
  overflow: hidden;
  color: var(--color-text-strong);
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.modal__close {
  position: absolute;
  top: 18px;
  right: 28px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--color-text-strong);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scrollbereiche im Modal (Rechtstext, Formular) */

.modal__body,
.request-form {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 18px;
  scrollbar-color: var(--color-primary) var(--color-page-bg);
  scrollbar-width: thin;
}

.modal__body::-webkit-scrollbar,
.request-form::-webkit-scrollbar,
.modal__body::-webkit-scrollbar-track,
.request-form::-webkit-scrollbar-track { background: var(--color-page-bg); }

.modal__body::-webkit-scrollbar-track,
.request-form::-webkit-scrollbar-track {
  border-radius: 999px;
  margin-bottom: 8px;
}

/* Einzelner Rechtstext – nur der aktive ist sichtbar */

.modal__body {
  display: none;
  margin-top: 52px;
}

.modal__body.active { display: block; }

.modal__body h2 {
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 24px;
  padding-right: 64px;
  /* Platz für den Schließen-Button */
}

.modal__body h3 {
  font-size: 19px;
  line-height: 1.35;
  margin-top: 26px;
  margin-bottom: 10px;
}

.modal__body p,
.modal__body li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-body-strong);
}

.modal__body p { margin-bottom: 14px; }

.modal__body ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 16px;
}

.modal__body li { margin-bottom: 6px; }

/* --- Anfrageformular (eigene Modalbox) --- */

.modal__content--form h2 {
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 8px;
  padding-right: 56px;
}

.request-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
  padding-left: 4px;
}

.request-form__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.request-form__row[hidden] { display: none; }

/* Anrede | Vorname | Nachname nebeneinander */

.request-form__row-group { display: flex; gap: 16px; }

.request-form__row--salutation { flex: 0 0 190px; min-width: 0; }

.request-form__row--salutation select { text-overflow: ellipsis; }

.request-form__name-fields {
  display: flex;
  flex: 1;
  gap: 16px;
}

.request-form__name-fields .request-form__row { flex: 1 1 0; min-width: 0; }

.request-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.request-form__row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-strong);
}

.request-form__optional { font-weight: 400; color: var(--color-text-muted); }

.request-form__required { color: var(--color-primary); }

.request-form__row input,
.request-form__row select,
.request-form__row textarea {
  padding: 11px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--color-text-strong);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
}

.request-form__row input:focus,
.request-form__row select:focus,
.request-form__row textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-12);
}

.request-form__row select { cursor: pointer; color-scheme: dark; }

.request-form__row select option {
  background-color: var(--color-surface);
  color: var(--color-text-strong);
}

.request-form__row textarea { resize: vertical; min-height: 110px; }

.request-form__row input[type="file"] { padding: 9px 14px; cursor: pointer; }

/* Eigene Validierungshinweise statt der nativen Browser-Sprechblase */

.request-form__row .is-invalid,
.request-form__row .is-invalid:focus { border-color: var(--color-danger); }

.request-form__row .is-invalid:focus { box-shadow: 0 0 0 3px rgba(var(--color-danger-rgb), 0.18); }

.request-form__consent.is-invalid { color: var(--color-danger); }

.request-form__consent.is-invalid input[type="checkbox"] {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

.request-form__field-error {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-danger);
}

.request-form__char-counter {
  align-self: flex-end;
  font-size: 13px;
  color: var(--color-text-muted);
}

.request-form__hint {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Bild-Captcha: Bild | neu laden | Eingabefeld in einer Zeile */

.request-form__captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.request-form__captcha-image {
  display: block;
  width: 180px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
  background-color: #1b1f24;
}

.request-form__captcha-refresh {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.request-form__captcha-refresh .ms { font-size: 20px; }

@media (hover: hover) and (pointer: fine) {
  .request-form__captcha-refresh:hover { color: var(--color-text-strong); border-color: var(--color-primary); }
}

.request-form__captcha-refresh:focus-visible {
  outline: 3px solid rgba(var(--color-primary-rgb), 0.5);
  outline-offset: 2px;
}

.request-form__row--captcha .request-form__captcha input[type="text"] {
  width: 130px;
  height: 56px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.request-form__row--captcha input::placeholder {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-muted);
}

/* Honeypot-Feld für Spam-Bots – für Menschen unsichtbar */

.request-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

.request-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-body-strong);
  cursor: pointer;
}

.request-form__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.request-form__consent-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-primary-12);
}

.request-form__submit { align-self: flex-start; }

.request-form__status {
  min-height: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.request-form__status--error { color: var(--color-danger); }

/* ============================================================
   BUTTON "NACH OBEN" (unten rechts, erscheint nach dem ersten Scrollen)
   ============================================================ */

.back-to-top {
  position: fixed;
  right: 24px;
  z-index: var(--z-back-to-top);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

.back-to-top[hidden] { display: none; }

/* ============================================================
   20. TOAST  (Erfolgsmeldung als Popup)
   ============================================================ */

.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: var(--z-toast);
  display: none;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100% - 32px));
  padding: 16px 22px;
  border-radius: 12px;
  background-color: #173b27;
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #d7f7e3;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
  /* mittig ausrichten */
}

.toast.active { display: flex; }

.toast i {
  flex-shrink: 0;
  color: var(--color-success);
  font-size: 20px;
}

/* --- bis 1100px: Layouts gestapelt --- */

@media (max-width: 1100px) {
  /* Platz für die Navigation freihalten, solange sie noch horizontal ist */
  .site-logo__textgroup { display: none; }
  /* Footer: senkrechte Trennlinien weg, Spalten rücken enger */
  .footer-top-content { gap: 30px; }
}

/* --- bis 768px: kleinere Schrift, Deko ausgeblendet --- */

@media (max-width: 768px) {
  :root { --scroll-offset: 108px; }
  /* Kompakter Header, damit mobil mehr Platz für Inhalt bleibt */
  .bottom-bar__content { height: 64px; }
  .site-logo__image { height: 40px; }
  .main { row-gap: 56px; }
  .main > .content-section::after { top: -28px; }
  /* mobil genügt der Hinweis unter der Liste */
  /* Footer: "Über mich" über die volle Breite, darunter Adresse | Kontakt */
  .modal__content {
    width: calc(100% - 24px);
    height: 88vh;
    height: 88dvh;
    margin: 3vh auto;
    margin: 3dvh auto;
    padding: 22px 30px 18px 20px;
  }
  .modal__close { top: 14px; right: 20px; }
  .modal__body h2 {
    font-size: 24px;
    margin-bottom: 18px;
    padding-right: 56px;
  }
  .modal__body h3 { font-size: 17px; }
  .modal__body p,
    .modal__body li { font-size: 14px; }
}

/* --- bis 650px: Navigation wird zum mobilen Klappmenü --- */

@media (max-width: 650px) {
  /* Dropdown sitzt direkt unter der Bottom-Bar – unabhängig davon,
     wie hoch die (ein- bis dreizeilige) Top-Leiste gerade ist */
  .bottom-bar { position: relative; }
  .bottom-bar__content { position: static; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    padding: 14px 0 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    /* Geschlossen: unsichtbar und nicht anklickbar/fokussierbar.
         visibility wird erst nach dem Ausblenden umgeschaltet. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  /* Geöffnetes Menü (Klasse per JS) – gleitet weich herein */
  .nav.nav--open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
  }
  /* Blur-Hintergrund hinter Header + Menü. Liegt als eigenes, fixiertes
     Element im body, weil backdrop-filter in verschachtelten Elementen
     (Menü innerhalb der geblurrten Bottom-Bar) nicht zuverlässig wirkt.
     Oberkante und Höhe setzt scripts.js: Der Hintergrund beginnt an der
     Header-Leiste (die Kontaktleiste darüber bleibt frei sichtbar) und
     endet an der Unterkante des Menüs. */
  .nav-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: var(--z-nav-backdrop);
    background-color: var(--chrome-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav-backdrop--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s;
  }
  .nav__list {
    flex-direction: column;
    align-items: center;
    row-gap: 8px;
  }
  .nav__link { font-size: 14px; }
  .hamburger { display: block; }
  .header-actions { flex-shrink: 0; }
  /* Titel neben dem Logo mobil wieder anzeigen; darf umbrechen, damit
     der Hamburger nicht aus dem sichtbaren Bereich gedrängt wird */
  .site-logo { gap: 10px; }
  .site-logo__textgroup { display: flex; max-width: 200px; }
  /* Top-Leiste zwei- bis dreizeilig: Info oben, Kontaktangaben darunter */
  .header-top { height: auto; }
  .header-top-text {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    row-gap: 4px;
    padding: 6px 30px;
  }
  .header-top-info {
    min-width: 0;
  }
  .header-top-info__text { min-width: 0; }
  /* darf umbrechen, damit der Hinweis ganz lesbar bleibt */
  .header-top-contacts {
    margin-left: 0;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 4px;
    font-size: 10px;
  }
  .header-contact-item { gap: 4px; }
}

/* --- bis 480px: engere Ränder, volle Buttonbreite, Footer einspaltig --- */

@media (max-width: 480px) {
  .header-top-text,
    .bottom-bar__content,
    .main,
    .footer-top-content,
    .footer-bottom-content { padding-left: 20px; padding-right: 20px; }
  /* Footer einspaltig, Abschnitte durch waagerechte Linien getrennt */
  .footer-bottom-list { flex-wrap: wrap; row-gap: 8px; }
  .request-form__row-group { flex-direction: column; }
  .request-form__row--salutation { flex: 1; }
  .modal__content { width: calc(100% - 16px); padding: 18px 24px 14px 16px; }
  .modal__close {
    top: 10px;
    right: 14px;
    width: 34px;
    height: 34px;
  }
  .modal__body { padding-right: 12px; }
  .modal__body h2 { padding-right: 48px; }
  .back-to-top {
    right: 16px;
    width: 36px;
    height: 36px;
  }
}

/* --- bis 360px: kleinste Geräte --- */

@media (max-width: 360px) {
  .header-top-text { font-size: 10px; }
  .header-top-contacts { font-size: 9px; column-gap: 8px; }
  .site-logo { gap: 8px; }
  .site-logo__textgroup { max-width: 175px; }
}

/* ============================================================
   23. VARIANTE 2 – RUHIGERE GESTALTUNG
   ------------------------------------------------------------
   Alles gegenüber der Live-Seite Geänderte steht hier gesammelt:
   weniger "Technik-/Trading-Look", sachlicher und professioneller.
     - Grafit statt fast reinem Schwarz, weichere Kontraste
     - Eine Schrift für alles: Roboto Flex (statt Inter + Orbitron), auch Logo-Titel und Kennzahlen
     - Icons: Material Symbols (Google) + Logos von Simple Icons
     - Überzeilen schlicht statt Pillen, linksbündig zur Überschrift
     - Zweit-Buttons als Umriss statt hellgrauer Fläche
     - Vertrauens-Hinweise im Hero als blaue Häkchen statt Pillen
     - Icons (Menü, Buttons, Deko-Kreise, Karten) wie auf der Live-Seite
   ============================================================ */

:root {
  --color-dark: #131619;
  --color-dark-soft: #1a1e22;
  --card-bg: #181c20;
  --surface-glass-soft: rgba(255, 255, 255, 0.03);
  --color-border: #2a3036;
  --color-border-strong: rgba(255, 255, 255, 0.22);
  --chrome-border: #262b31;
  --chrome-glass-bg: rgba(21, 24, 27, 0.92);
  --color-text-body: rgba(255, 255, 255, 0.78);
  --color-text-muted: rgba(255, 255, 255, 0.66);
}

/* Überzeile: schlichte Kleinschrift mit Icon, linksbündig wie die Überschrift */

.section-eyebrow {
  justify-content: flex-start;
  margin: 0 0 10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #7fa6cf;
}

/* Buttons: etwas eckiger, Zweit-Button als Umriss */

.btn { border-radius: 8px; }

.btn--primary { box-shadow: none; }

/* ============================================================
   24. BUTTONS – HOVER-EFFEKT "AUFLEUCHTEN"
   ------------------------------------------------------------
   Dezent und kurz: Buttons heben sich beim Überfahren minimal an
   und leuchten in der Markenfarbe auf. Einzige Stelle mit
   Übergängen (Rest der Seite bleibt ohne Animation).
   ============================================================ */

.btn,
.modal__close,
.back-to-top {
  transition: background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  /* Blauer Button: etwas heller, leicht angehoben, weicher Lichtschein */
  .btn--primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px rgba(var(--color-primary-rgb), 0.9);
  }
  /* Transparenter Button: Rand und Fläche leuchten blau auf */
  /* Runde Buttons: Markenfarbe + sanfter Leuchtring */
  .modal__close:hover,
.back-to-top:hover {
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.25);
  }
}

/* Weniger Bewegung gewünscht: Menü nur ein-/ausblenden, nicht gleiten */

@media (prefers-reduced-motion: reduce) {
  .nav { transform: none; }
  .bar { transition: none; }
}

/* Beim Klicken/Antippen: kurz "eingedrückt" (auch auf Touchscreens) */

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Wer in den Systemeinstellungen weniger Bewegung wünscht: ohne Anheben */

@media (prefers-reduced-motion: reduce) {
  .btn,
.modal__close,
.back-to-top { transition: none; }
  .btn:hover { transform: none !important; }
}

/* ============================================================
   25. INFOLEISTE – LAUFSCHRIFT
   ------------------------------------------------------------
   "Information:" bleibt stehen, der Hinweistext läuft in einem
   festen Feld ruhig von rechts nach links durch und wird an den
   Rändern weich ein- und ausgeblendet (läuft immer durch).
   Text ändern: einfach in index.html (.header-top-info__text).
   ============================================================ */

.header-top-info__ticker {
  display: block;
}

.header-top-info__ticker .header-top-info__text {
  display: inline-block;
  /* startet rechts außerhalb des Feldes */
}

/* Mobil: das Feld nimmt die verfügbare Breite neben "Information:" ein */

@media (max-width: 650px) {
  .header-top-info__ticker {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* "Aktuelle Information:" steht fest (Markenfarbe), nur der Text daneben läuft */

.header-top-info__label { white-space: nowrap; }

/* ============================================================
   26. FOOTER – ÖFFNUNGSZEITEN (4. Spalte)
   ============================================================ */

.footer-top-content { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Mittlere Breiten: 2 × 2 statt "Über mich" über die volle Breite */

@media (max-width: 1100px) {
  .footer-top-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Schmale Handys: einspaltig (wie bisher) */

@media (max-width: 560px) {
  .footer-top-content { grid-template-columns: 1fr; }
}

/* --- Hauptbereich --- */

.footer-top { padding: 48px 0 40px; }

/* --- Untere Leiste --- */

.footer-bottom-content {
  gap: 12px 24px;
  flex-wrap: wrap;
}

.footer-bottom-list { column-gap: 24px; }

/* --- Responsiv --- */

@media (max-width: 560px) {
  .footer-bottom-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Untere Leiste: möglichst flach, Icons mittig zum Text */

.footer-bottom-content {
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
  row-gap: 6px;
}

.footer-bottom-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.footer-bottom-text .ms { font-size: 14px; line-height: 1; }

@media (max-width: 560px) {
  .footer-bottom-content { padding-top: 10px; padding-bottom: 10px; }
}

/* ============================================================
   33. LEISTUNGEN ALS GERÄTEKATEGORIEN
   ------------------------------------------------------------
   6 Kacheln (alle Kundengruppen gemeinsam), darunter eine schlanke
   Zeile "Nicht im Angebot" und der Hinweis für andere Geräte.
   ============================================================ */

.scope-note { font-size: 14px; color: var(--color-text-muted); }

.scope-note a { color: var(--color-primary-hover); }

/* ============================================================
   37. BUTTON "NACH OBEN" – BESSER SICHTBAR
   ------------------------------------------------------------
   Dunkler Kreis mit blauem Rand und blauem Pfeil; beim Überfahren
   wird der Button weiß (Pfeil blau).
   ============================================================ */

.back-to-top {
  background-color: #1b2026;
  border: 2px solid var(--color-primary-hover);
}

.back-to-top .ms { font-size: 22px; }

@media (max-width: 480px) {
  .back-to-top .ms { font-size: 20px; }
}

/* Aktiver Menüpunkt: Rahmen und Fläche in der Markenfarbe */

.nav__link.active .nav__icon { color: var(--color-primary-hover); }

/* Handy: Überschrift näher an den Header (vorher 50 + 30px Abstand) */

@media (max-width: 650px) {
  .main { padding-top: 28px; }
  /* Häkchen -> "Reparieren lohnt sich oft": nur der normale
     Abschnittsabstand (vorher 36 + 56 + 40px) */
}

/* ============================================================
   44. KONTAKTFORMULAR – LISTE DER ANGEHÄNGTEN DATEIEN
   ------------------------------------------------------------
   Dateien werden schrittweise hinzugefügt; jede mit Größe und
   "×" zum Entfernen. Darunter: Anzahl und belegte MB.
   ============================================================ */

.request-form__files-error {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-danger);
}

.request-form__files {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.request-form__files:empty { display: none; }

.request-form__file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
}

.request-form__file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-strong);
}

.request-form__file-size { flex-shrink: 0; color: var(--color-text-muted); }

.request-form__file-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  background: none;
  border: 0;
}

.request-form__file-remove .ms { font-size: 18px; }

.request-form__file-remove:hover { color: var(--color-danger); background-color: rgba(var(--color-danger-rgb), 0.1); }

.request-form__file-remove:focus-visible { outline: 2px solid var(--color-primary-hover); outline-offset: 1px; }

.request-form__files-summary {
  padding: 2px 2px 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Kontakt-Hinweise unter Leistungen, Ablauf und FAQ: überall der gleiche,
   ausgewogene Abstand zum Inhalt darüber */

.scope-note { margin-top: 32px; }

/* Button "Nach oben": weißer Rand, beim Überfahren in der Markenfarbe */

.back-to-top {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary-hover);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.3), 0 10px 24px -6px rgba(var(--color-primary-rgb), 0.8);
  }
}

/* Kontaktformular ohne Einleitungstext: etwas Luft unter dem Titel */

#request-modal-title { margin-bottom: 20px; }

/* ============================================================
   45. ALLE FENSTER (Formular, AGB, Datenschutz, Impressum)
   ------------------------------------------------------------
   Gleiche Größe, senkrecht exakt mittig: oben und unten derselbe
   Abstand zum Browserrand (vorher oben 5 %, unten 9 %).
   ============================================================ */

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__content,
.modal__content--form {
  width: min(900px, calc(100% - 32px));
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  max-height: 1000px;
  margin: 0;
}

@media (max-width: 1100px) {
  .modal__content,
    .modal__content--form { width: calc(100% - 24px); height: calc(100dvh - 32px); }
}

@media (max-width: 560px) {
  .modal__content,
    .modal__content--form { width: calc(100% - 16px); height: calc(100dvh - 16px); }
}

/* Button "Nach oben": Rand in Markenfarbe (Hover bleibt: blau aufleuchten) */

.back-to-top { border-color: var(--color-primary-hover); }

/* Pfeil in Markenfarbe, beim Überfahren weiß (auf blauem Grund) */

.back-to-top { color: var(--color-primary-hover); }

@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover { color: var(--color-white); }
}

/* Laufschrift: Dauer eines Durchlaufs. Bei längerem Text erhöhen,
   sonst läuft er schneller (Strecke = Feldbreite + Textlänge) */

.header-top-info__ticker .header-top-info__text { animation-duration: 11s; }

/* neues Logo (nur Buchstaben, breit) – Höhe fest, Breite automatisch */
.site-logo__image--breit { height: 38px; width: auto; }

@media (max-width: 768px) {
  .site-logo__image--breit { height: 30px; }
}

/* "Aktuelle Information:" in Weißton, Hinweistext steht still in Hellgrau */
.header-top-info__label { color: #f4f6f8; }
.header-top-info__ticker {
  width: auto;
  overflow: visible;
  white-space: normal;
  -webkit-mask-image: none;
  mask-image: none;
}
.header-top-info__ticker .header-top-info__text {
  padding-left: 0;
  animation: none;
  transform: none;
  color: rgba(255, 255, 255, .62);
}
@media (max-width: 650px) {
  .header-top-info { align-items: flex-start; }
  .header-top-info__label { line-height: inherit; }
}

/* Kontakte oben – Text hellgrau, Icons weiß */
.header-contact-item__link { color: rgba(255, 255, 255, .62); }
.header-contact-item__icon { color: #ffffff; }
@media (hover: hover) {
  .header-contact-item__link:hover { color: #ffffff; }
}

/* Schriftzug neben dem Logo größer, passend zur Logohöhe */
.site-logo__text { font-size: 18px; letter-spacing: .05em; }
.site-logo__subtext { font-size: 13.5px; letter-spacing: .14em; }
.site-logo__textgroup { row-gap: 3px; }
@media (max-width: 768px) {
  .site-logo__text { font-size: 15px; }
  .site-logo__subtext { font-size: 11.5px; }
}

/* Navigation ohne Blau – Schrift grau, beim Überfahren und aktiv weiß */
.nav__item, .nav__link { color: rgba(255, 255, 255, .62); }
.nav__link .nav__icon, .nav__link.active .nav__icon { color: inherit; }
@media (hover: hover) {
  .nav__link:hover, .nav__link.active:hover { color: #ffffff; }
}
.nav__link.active {
  color: #ffffff;
}
.nav__link.active { background-color: transparent; box-shadow: none; }

/* untere Footer-Leiste identisch zur Hinweisleiste oben */
.footer-bottom { background-color: var(--color-page-bg); border-top: 1px solid var(--chrome-border); }
.footer-bottom-content { font-size: 12px; color: rgba(255, 255, 255, .62); }
.footer-bottom-text { color: rgba(255, 255, 255, .62); }
.footer-bottom-text .ms { color: #ffffff; }
.footer-bottom-link { color: rgba(255, 255, 255, .62); }
@media (hover: hover) {
  .footer-bottom-link:hover { color: #ffffff; }
}

/* ============================================================
   Hero (18°-Schräge wie im Logo): dunkler Seitenhintergrund,
   Blau als Akzent.
   Schräge: Element mit skewX(-18deg), Inhalt mit skewX(18deg).
   ============================================================ */
.shero {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  /* Text beginnt oben statt mittig */
  /* volle Fensterbreite, bricht aus .main (max. 1200px) aus */
  width: 100vw;
  margin: -50px calc(50% - 50vw) 0;
  min-height: min(calc(100vh - 124px), 820px);
  padding-block: clamp(40px, 5vw, 76px) clamp(56px, 7vw, 100px);
  overflow: hidden;
  background-color: var(--color-page-bg);
}
.shero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}
.shero__copy { max-width: 52%; }
.shero__title {
  font-size: clamp(36px, 4.2vw, 66px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--color-text-strong);
}
.shero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.shero__line > span {
  display: block;
  white-space: nowrap;
  animation: shero-line 900ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.shero__line:nth-child(2) > span { animation-delay: 110ms; }
.shero__lead {
  margin-top: 28px;
  max-width: 34em;
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text-body-strong);
}
.shero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
  margin-top: 36px;
}

.shero__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 30px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.shero__cta::before,
.shero__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--color-primary);
  transform: skewX(-18deg);
  transition: background-color 180ms ease, transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.shero__cta::before { left: 0; right: 0; }
.shero__cta::after { right: -16px; width: 7px; }
.shero__cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .shero__cta:hover::before { background-color: var(--color-primary-hover); }
  .shero__cta:hover::after { background-color: var(--color-primary-hover); transform: skewX(-18deg) translateX(5px); }
}

.shero__link {
  color: var(--color-text-strong);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: var(--color-primary-hover);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .shero__link:hover { color: #ffffff; text-decoration-color: #ffffff; }
}

.shero__facts {
  flex-wrap: wrap;
  margin-top: 44px;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 520;
  color: var(--color-text-strong);
}
.shero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.shero__facts li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 16px;
  background-color: var(--color-primary-hover);
  transform: skewX(-18deg);
}

.shero__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.shero__shot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58%;
  right: -22%;
  overflow: hidden;
  transform: skewX(-18deg);
  background-color: var(--color-surface);
  animation: shero-shutter 1100ms cubic-bezier(0.77, 0, 0.175, 1) 150ms both;
}
.shero__shot img {
  position: absolute;
  top: 0;
  left: -20%;
  width: 140%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 35% 50%;
  transform: skewX(18deg);
  animation: shero-settle 1500ms cubic-bezier(0.23, 1, 0.32, 1) 150ms both;
}
.shero__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--color-primary);
  transform: skewX(-18deg);
  animation: shero-bar 800ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.shero__bar--a { left: calc(58% - 74px); width: 22px; }
.shero__bar--b {
  left: calc(58% - 38px);
  width: 12px;
  background-color: var(--color-primary-hover);
  opacity: 0.55;
  animation-delay: 90ms;
}

/* Text darunter gleitet gestaffelt herein */
.shero__lead, .shero__actions, .shero__facts { animation: shero-rise 800ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.shero__lead { animation-delay: 260ms; }
.shero__actions { animation-delay: 330ms; }
.shero__facts { animation-delay: 400ms; }
@keyframes shero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes shero-line { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes shero-shutter { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes shero-settle { from { transform: skewX(18deg) scale(1.12); } to { transform: skewX(18deg) scale(1); } }
@keyframes shero-bar { from { transform: skewX(-18deg) translateY(-102%); } to { transform: skewX(-18deg) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .shero__line > span, .shero__shot, .shero__shot img, .shero__bar { animation: none; }
  .shero__lead, .shero__actions, .shero__facts { animation: shero-fade 300ms ease both; }
  @keyframes shero-fade { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 1000px) {
  .shero {
    display: block;
    min-height: 0;
    padding-block: 48px 0;
  }
  .shero__copy { max-width: none; }
  .shero__stage {
    position: relative;
    inset: auto;
    height: clamp(260px, 52vw, 440px);
    margin-top: 56px;
  }
  .shero__shot { left: 12%; right: -14%; }
  .shero__bar--a { left: calc(12% - 64px); }
  .shero__bar--b { left: calc(12% - 32px); }
}

@media (max-width: 650px) {
  .shero { margin-top: -28px; }
  .shero__inner { padding: 0 20px; }
  .shero__title { font-size: 8.6vw; }
  .shero__lead { font-size: 17.5px; }
  .shero__actions { gap: 20px; }
  .shero__facts { flex-direction: column; }
}

/* ============================================================
   Top-Bar und Header – Inhalte blenden beim Laden von oben ein.
   Die Leisten selbst bleiben stehen (kein Verschieben/Überlappen, kein
   transform am Sticky-Header); nur Texte, Logo und Menüpunkte gleiten
   kurz von oben herein. fill-mode backwards: danach bleibt nichts stehen.
   ============================================================ */
.header-top-info,
.header-top-contacts,
.site-logo,
.nav__item,
.hamburger { animation: er-fade-down 560ms cubic-bezier(0.23, 1, 0.32, 1) backwards; }
.header-top-info { animation-delay: 0ms; }
.header-top-contacts { animation-delay: 60ms; }
.site-logo { animation-delay: 140ms; }
.hamburger { animation-delay: 220ms; }
.nav__item:nth-child(1) { animation-delay: 200ms; }
.nav__item:nth-child(2) { animation-delay: 240ms; }
.nav__item:nth-child(3) { animation-delay: 280ms; }
.nav__item:nth-child(4) { animation-delay: 320ms; }
.nav__item:nth-child(5) { animation-delay: 360ms; }
.nav__item:nth-child(6) { animation-delay: 400ms; }
@keyframes er-fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 650px) {
  /* Handy: Menüpunkte liegen im Klappmenü – dort kein Lade-Effekt */
  .nav__item { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .header-top-info, .header-top-contacts, .site-logo, .nav__item, .hamburger { animation: er-fade 300ms ease backwards; }
  @keyframes er-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* Einblenden beim Hineinscrollen: Überschrift, Text, dann
   die Fälle gestaffelt. Ohne JS bleibt alles sichtbar. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 800ms cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: var(--d, 0ms);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
/* die schräge Fläche gleitet von rechts herein */

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { transform: none; transition: opacity 300ms ease; }
}

/* 6 Menüpunkte (mit "Kosten") – auf mittleren Breiten enger,
   damit alles in eine Zeile passt (unter 651px gilt das Klappmenü) */
@media (min-width: 651px) and (max-width: 1100px) {
  .nav__list { column-gap: 4px; }
  .nav__link { padding: 8px 9px; }
}
@media (min-width: 651px) and (max-width: 820px) {
  .nav__icon { display: none; }
  .nav__list { column-gap: 0; }
  .nav__link { padding: 8px 8px; font-size: 15px; }
}

/* ============================================================
   Navigationsleiste über die volle Breite:
   Logo + Titel links, Menüpunkte rechtsbündig ohne Icons,
   schräger Anfrage-Button. Top-Bar auf dieselben Ränder.
   ============================================================ */

.bottom-bar__content,
.header-top-text {
  max-width: none;
  padding-left: var(--bar-gutter);
  padding-right: var(--bar-gutter);
}
@media (min-width: 651px) {
  .nav { justify-content: flex-end; }
}
.nav__link { position: relative; }
/* aktiver Punkt: weißer schräger Balken darunter (18° wie im Logo) */
.nav__link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 1px;
  height: 3px;
  background-color: #ffffff;
  transform: skewX(-18deg) scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav__link.active::after { transform: skewX(-18deg) scaleX(1); }
.header-actions { gap: 22px; }

.header-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 22px;
  margin-right: 10px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  animation: er-fade-down 560ms cubic-bezier(0.23, 1, 0.32, 1) 440ms backwards;
}
.header-cta::before,
.header-cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--color-primary);
  transform: skewX(-18deg);
  transition: background-color 180ms ease, transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.header-cta::before { left: 0; right: 0; }
.header-cta::after { right: -13px; width: 6px; }
.header-cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .header-cta:hover::before,
  .header-cta:hover::after { background-color: var(--color-primary-hover); }
  .header-cta:hover::after { transform: skewX(-18deg) translateX(4px); }
}
@media (min-width: 651px) and (max-width: 820px) {
  .nav__link::after { left: 8px; right: 8px; }
  .header-cta { padding: 0 16px; font-size: 14px; }
  .header-actions { gap: 16px; }
  .bottom-bar__content { column-gap: 12px; }
}
@media (max-width: 650px) {
  .header-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .header-cta { animation: er-fade 300ms ease backwards; }
}

/* ============================================================
   Balken „Jede erfolgreiche Reparatur …“: schmale blaue Fläche in
   voller Breite mit dunklerer Schrägfläche links (Feinschliff weiter
   unten). Schrägfläche und Satz gleiten beim Hineinscrollen herein
   (initReveal in scripts.js).
   ============================================================ */
.eband {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background-color: var(--color-primary);
  color: #ffffff;
  overflow: hidden;
}

.eband__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}
.eband__text {
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #ffffff;
}

@media (max-width: 650px) {
  .eband__inner { padding: 0 20px; }
}

/* Top-Bar auf mittleren Breiten – Kontakte nicht umbrechen,
   Ort ausblenden, damit Telefonnummer und Mail einzeilig bleiben */
.header-contact-item__link { white-space: nowrap; }
@media (min-width: 651px) and (max-width: 860px) {
  .header-contact-item:first-child { display: none; }
}

@media (min-width: 651px) and (max-width: 860px) {
  .header-top { height: auto; }
  .header-top-text {
    height: auto;
    min-height: 30px;
    padding-block: 5px;
  }
}
@media (min-width: 651px) and (max-width: 760px) {
  .header-contact-item:last-child { display: none; }
}

/* ============================================================
   Seitenbreite besser ausnutzen –
   Inhalt bis 1280px breit, mittig mit Rand.
   ============================================================ */
:root {
  --page-max: 1280px;
  --bar-gutter: clamp(20px, 3vw, 48px);
  --main-gutter: clamp(20px, 5vw, 80px);
}
/* Inhalt und Footer: max. 1280px, mittig, mit deutlichem Rand links/rechts
   (Kopfleiste bleibt über die volle Breite) */
.main,
.shero__inner,
.eband__inner,
.footer-top-content,
.footer-bottom-content {
  max-width: calc(var(--page-max) + 2 * var(--main-gutter));
  padding-left: var(--main-gutter);
  padding-right: var(--main-gutter);
}

/* ============================================================
   Header – oben groß (Großbuchstaben, Icons), beim
   Scrollen kompakt (Top-Leiste scrollt weg, Leiste wird flacher,
   Icons verschwinden). Klasse .header--compact setzt scripts.js.
   Der Header behält seine volle Höhe (keine Sprünge im Inhalt);
   nur die sichtbare Leiste darin wird flacher.
   ============================================================ */
@media (min-width: 651px) {
  .header {
    height: 93px;
    background-color: transparent;
    pointer-events: none;
  }
  .bottom-bar { pointer-events: auto; }
  .bottom-bar__content { height: 92px; transition: height 320ms cubic-bezier(0.23, 1, 0.32, 1); }
  .site-logo__image--breit { height: 44px; transition: height 320ms cubic-bezier(0.23, 1, 0.32, 1); }
  .site-logo__text { font-size: 19px; transition: font-size 320ms cubic-bezier(0.23, 1, 0.32, 1); }
  .site-logo__subtext { font-size: 14px; transition: font-size 320ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease; }
  .nav__link {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 14.5px;
    font-weight: 600;
    gap: 9px;
    transition: font-size 320ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms ease, gap 320ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .nav__icon {
    display: inline-block;
    font-size: 18px;
    overflow: hidden;
  }
  .header-cta {
    min-height: 48px;
    padding: 0 26px;
    font-size: 15.5px;
    transition: min-height 320ms cubic-bezier(0.23, 1, 0.32, 1), padding 320ms cubic-bezier(0.23, 1, 0.32, 1), font-size 320ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  /* kompakt */
  .header--compact .bottom-bar__content { height: 62px; }
  .header--compact .site-logo__image--breit { height: 32px; }
  .header--compact .site-logo__text { font-size: 16px; }
  .header--compact .site-logo__subtext { font-size: 12px; }
  .header--compact .nav__link { font-size: 13px; gap: 0; }
  .header--compact .nav__icon { width: 0; opacity: 0; }
  .header--compact .header-cta {
    min-height: 38px;
    padding: 0 20px;
    font-size: 14px;
  }
}
/* mittlere Breiten: ohne Icons, damit alles in eine Zeile passt */
@media (min-width: 651px) and (max-width: 1280px) {
  .nav__icon { display: none; }
  .nav__link { font-size: 13.5px; letter-spacing: 0.06em; }
  .header--compact .nav__link { font-size: 12.5px; }
}
@media (min-width: 651px) and (max-width: 900px) {
  .nav__link {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    padding: 8px 6px;
  }
  .nav__link::after { left: 6px; right: 6px; }
  .header--compact .nav__link { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-bar__content, .site-logo__image--breit, .site-logo__text, .site-logo__subtext, .nav__link, .nav__icon, .header-cta { transition: none; }
}

/* Sprungziele: Abstand passend zur kompakten Leiste */
@media (min-width: 651px) {
  :root { --scroll-offset: 92px; }
}

/* Icons im großen Header nicht abschneiden (die Symbolschrift
   ist per size-adjust 125 % breiter als 1em), Menüpunkte enger,
   Anfragen-Button in Großbuchstaben */
@media (min-width: 651px) {
  .nav__icon { width: auto; max-width: 1.6em; }
  .header--compact .nav__icon { max-width: 0; }
  .nav__icon { transition: max-width 320ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease; }
}
@media (min-width: 1101px) {
  .nav__list { column-gap: 4px; }
}
.header-cta { text-transform: uppercase; letter-spacing: 0.06em; }

/* Bildbalken: Recycling-Icon vor dem Satz */
.eband__icon { color: #ffffff; }

/* Bildbalken flacher, Foto in Originalfarben (gut erkennbar) */

.eband__icon { margin-bottom: 12px; }

/* Bildbalken ohne Foto: schmaler blauer Balken in zwei Blautönen
   (wie Kosten) – dunklere schräge Fläche rechts gleitet beim
   Hineinscrollen herein; Icon und Satz in einer Zeile */
.eband { padding-block: clamp(30px, 3.2vw, 46px); }
.eband__slant {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--color-primary-dark);
  transform: skewX(-18deg);
}
.js-reveal .eband__slant { transition: transform 1100ms cubic-bezier(0.77, 0, 0.175, 1); }

.eband__text {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: none;
  font-size: clamp(19px, 1.7vw, 24px);
}
.eband__icon {
  display: inline-block;
  flex: none;
  margin: 0;
  font-size: 1.5em;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .eband__slant { transition: none; }
}
@media (max-width: 650px) {
  .eband__text { font-size: 18px; }
}

/* Bildbalken: Icon und Satz mittig */
.eband__text { justify-content: center; text-align: center; }
@media (max-width: 650px) {
  .eband__text {
    max-width: none;
    align-items: center;
    text-align: left;
  }
}

/* ============================================================
   zweiter Hero-Teil „Lässt sich Ihr Gerät reparieren?“
   Links Text, rechts Bildfolge im 18°-Rahmen mit laufenden
   Fortschrittsbalken, darunter Laufband der letzten Reparaturen.
   Logik der Bildfolge: initRepairSlider in scripts.js.
   ============================================================ */
.rep { position: relative; }
.rep__grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 48px clamp(40px, 6vw, 100px);
  align-items: center;
}
.rep__title {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text-strong);
  margin-bottom: 24px;
  text-wrap: balance;
}
.rep__copy p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 40em;
}
.rep__copy p + p { margin-top: 14px; }
.rep__copy .rep__lead { font-size: 19px; color: var(--color-text-body-strong); }

/* Bildfolge */
.rep__media { min-width: 0; }
.rep__frame {
  position: relative;
  aspect-ratio: 4 / 3;
}
.rep__slides { position: absolute; }
.rep__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 500ms ease;
}
.rep__slide img {
  position: absolute;
  top: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.rep__slide.is-active {
  opacity: 1;
  z-index: 2;
  animation: rep-shutter 900ms cubic-bezier(0.77, 0, 0.175, 1) both;
}
.rep__slide.is-active img { animation: rep-settle 5200ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.rep__slide.was-active { opacity: 1; z-index: 1; }
@keyframes rep-shutter { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes rep-settle { from { transform: skewX(18deg) scale(1.14); } to { transform: skewX(18deg) scale(1.02); } }

/* laufende Balken unter dem Bild */
.rep__segs {
  display: flex;
  gap: 10px;
  width: 84%;
  margin: 22px 0 0 8%;
}
.rep__seg {
  position: relative;
  flex: 1;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rep__seg::before,
.rep__seg span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 5px;
  transform: skewX(-18deg);
}
.rep__seg::before { background-color: rgba(255, 255, 255, 0.16); transition: background-color 160ms ease; }
.rep__seg span {
  background-color: var(--color-primary-hover);
  transform: skewX(-18deg) scaleX(0);
  transform-origin: left;
}
.rep__seg.is-done span { transform: skewX(-18deg) scaleX(1); }
.rep__seg.is-active span { animation: rep-fill var(--rep-dur, 5000ms) linear forwards; }
.rep__media.is-paused .rep__seg.is-active span { animation-play-state: paused; }
@keyframes rep-fill { from { transform: skewX(-18deg) scaleX(0); } to { transform: skewX(-18deg) scaleX(1); } }
@media (hover: hover) and (pointer: fine) {
  .rep__seg:hover::before { background-color: rgba(255, 255, 255, 0.32); }
}
.rep__seg:focus-visible { outline: 2px solid var(--color-primary-hover); outline-offset: 2px; }
.rep__caption {
  width: 84%;
  margin: 10px 0 0 8%;
  min-height: 1.5em;
  font-size: 14.5px;
  color: var(--color-text-body);
  transition: opacity 250ms ease;
}
.rep__caption.is-swapping { opacity: 0; }

/* Laufband der letzten Reparaturen */
.rep__done { margin-top: clamp(56px, 6vw, 84px); }
.rep__heading {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-hover);
  margin-bottom: 18px;
}
.rep__ticker {
  display: flex;
  overflow: hidden;
  padding-block: 18px;
  border-top: 1px solid var(--chrome-border);
  border-bottom: 1px solid var(--chrome-border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rep__track {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: rep-ticker 46s linear infinite;
}
.rep__ticker:hover .rep__track,
.rep__ticker:focus-within .rep__track { animation-play-state: paused; }
@keyframes rep-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.rep__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 56px 0 28px;
  white-space: nowrap;
}
.rep__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 7px;
  height: 18px;
  background-color: var(--color-primary-hover);
  transform: skewX(-18deg);
}
.rep__dev {
  font-size: 18px;
  font-weight: 650;
  color: var(--color-text-strong);
}
.rep__fix { font-size: 15px; color: var(--color-text-body); }
.rep__new {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
  color: #ffffff;
  background-color: var(--color-primary);
}
.rep__more {
  margin-top: 14px;
  font-size: 15px;
  font-style: italic;
  color: var(--color-text-body);
}

@media (prefers-reduced-motion: reduce) {
  .rep__slide.is-active, .rep__slide.is-active img { animation: none; }
  .rep__seg.is-active span { animation: none; transform: skewX(-18deg) scaleX(1); }
  .rep__ticker { -webkit-mask-image: none; mask-image: none; }
  .rep__track {
    animation: none;
    flex-wrap: wrap;
    row-gap: 18px;
    flex-shrink: 1;
  }
  .rep__track--copy { display: none; }
}

@media (max-width: 1000px) {
  .rep__grid { grid-template-columns: 1fr; }
  .rep__frame, .rep__segs, .rep__caption { width: 80%; margin-left: 10%; }
}
@media (max-width: 650px) {
  .rep__copy .rep__lead { font-size: 17.5px; }
  .rep__copy p { font-size: 16.5px; }
  .rep__frame, .rep__segs, .rep__caption { width: 78%; margin-left: 11%; }
  .rep__dev { font-size: 16.5px; }
  .rep__fix { font-size: 14px; }
  .rep__item { padding-right: 40px; }
  .rep__track { animation-duration: 38s; }
}

/* Sprungziel aus dem Hero-Link */
.rep { scroll-margin-top: var(--scroll-offset); }

/* Zweiter Hero-Teil: Bilder links, Text rechts (Zickzack zum Hero);
   unter 1001px bleibt die Reihenfolge Text → Bilder */

/* Zweiter Hero-Teil: Bilder gerade (nicht mehr schräg). Akzent:
   eine blaue 18°-Fläche schaut unten links hinter dem Foto hervor
   (Markenfarbe, ohne die zwei Balken aus dem Hero zu wiederholen) */
.rep__stage {
  position: relative;
  width: 84%;
  margin-left: 8%;
  isolation: isolate;
}
.rep__stage::before {
  left: -22px;
  bottom: -22px;
  background-color: var(--color-primary);
}
.rep__frame {
  width: 100%;
  margin-left: 0;
  transform: none;
}
.rep__slide img {
  left: 0;
  width: 100%;
  transform: none;
}
@keyframes rep-settle { from { transform: scale(1.1); } to { transform: scale(1); } }
.rep__segs, .rep__caption { width: 84%; margin-left: 8%; }

/* Akzent gleitet beim Hineinscrollen von links herein */

@media (prefers-reduced-motion: reduce) {
  .rep__slide img { transform: none; }
}
@media (max-width: 1000px) {
  .rep__stage, .rep__segs, .rep__caption { width: 84%; margin-left: 8%; }
}
@media (max-width: 650px) {
  .rep__stage, .rep__segs, .rep__caption { width: calc(100% - 16px); margin-left: 16px; }
  .rep__stage::before { left: -16px; bottom: -14px; }
}

/* Bildfolge am Computer etwas größer */
@media (min-width: 1001px) {
  .rep__stage, .rep__segs, .rep__caption { width: 92%; margin-left: 4%; }
}

/* Akzent neu: statt Fläche am Bild ein kurzer, schräger blauer Strich
   über der Überschrift, der beim Hineinscrollen von links wächst */

.rep__title { position: relative; }
.rep__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 56px;
  height: 6px;
  background-color: var(--color-primary-hover);
  transform: skewX(-18deg);
  transform-origin: left;
}
.js-reveal .rep__title::before { transform: skewX(-18deg) scaleX(0); transition: transform 900ms cubic-bezier(0.23, 1, 0.32, 1) 300ms; }
.js-reveal .rep__title.is-in::before { transform: skewX(-18deg) scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .rep__title::before { transform: skewX(-18deg); transition: none; }
}

/* Abgerundete Ecken: Bildfolge im zweiten Hero-Teil und Hero-Foto.
   Hero-Foto blendet zum Seitenhintergrund hin weich aus. */
.rep__frame { border-radius: 14px; }
.shero__shot {
  border-radius: 18px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%);
  mask-composite: intersect;
}
.shero__shot img { opacity: 0.88; }
.shero__bar { border-radius: 4px; }

/* Bildfolge: dezente blaue Kontur mit etwas Abstand ums Bild
   (folgt den runden Ecken), löst sich beim Hineinscrollen vom Bild */
.rep__frame {
  overflow: visible;
  outline: 1px solid rgba(var(--color-primary-rgb), 0.75);
  outline-offset: 7px;
}
.rep__slides { overflow: hidden; }
.js-reveal .rep__frame { outline-offset: 0; transition: outline-offset 900ms cubic-bezier(0.23, 1, 0.32, 1) 350ms, outline-color 600ms ease 350ms; }
.js-reveal .rep__media.is-in .rep__frame { outline-offset: 7px; }
.rep__segs { margin-top: 28px; }
@media (max-width: 650px) {
  .rep__frame { outline-offset: 5px; }
  .js-reveal .rep__media.is-in .rep__frame { outline-offset: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .rep__frame { transition: none; outline-offset: 7px; }
}

/* Kontur der Bildfolge in Weiß */
.rep__frame { outline-color: rgba(255, 255, 255, 0.55); }
.js-reveal .rep__frame { outline-color: rgba(255, 255, 255, 0); }
.js-reveal .rep__media.is-in .rep__frame { outline-color: rgba(255, 255, 255, 0.55); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .rep__frame { outline-color: rgba(255, 255, 255, 0.55); }
}

/* Bildfolge: Foto reicht bis an die weiße Kontur und blendet zum
   Rand hin weich aus (keine harte Bildkante mehr vor der Linie) */
.rep__slides {
  inset: -7px;
  border-radius: 21px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.rep__frame { background-color: transparent; }
@media (max-width: 650px) {
  .rep__slides { inset: -5px; border-radius: 19px; }
}

/* Kontur nur an den vier abgerundeten Ecken (statt rundum) */
.rep__frame,
.js-reveal .rep__frame,
.js-reveal .rep__media.is-in .rep__frame { outline: none; }
.rep__frame::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 3;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 21px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) top left / 46px 46px no-repeat,
    linear-gradient(#000 0 0) top right / 46px 46px no-repeat,
    linear-gradient(#000 0 0) bottom left / 46px 46px no-repeat,
    linear-gradient(#000 0 0) bottom right / 46px 46px no-repeat;
  mask: linear-gradient(#000 0 0) top left / 46px 46px no-repeat,
    linear-gradient(#000 0 0) top right / 46px 46px no-repeat,
    linear-gradient(#000 0 0) bottom left / 46px 46px no-repeat,
    linear-gradient(#000 0 0) bottom right / 46px 46px no-repeat;
}
/* beim Hineinscrollen rücken die Ecken von innen nach außen */
.js-reveal .rep__frame::after {
  inset: 6px;
  opacity: 0;
  transition: inset 900ms cubic-bezier(0.23, 1, 0.32, 1) 350ms, opacity 600ms ease 350ms;
}
.js-reveal .rep__media.is-in .rep__frame::after { inset: -7px; opacity: 1; }
@media (max-width: 650px) {
  .rep__frame::after, .js-reveal .rep__media.is-in .rep__frame::after { inset: -5px; border-radius: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .rep__frame::after {
    inset: -7px;
    opacity: 1;
    transition: none;
  }
}

/* Ecken-Kontur der Bildfolge in Blau (Akzent der Markenfarbe) */
.rep__frame::after { border-color: var(--color-primary-hover); border-width: 2px; }

/* Aktiver Menüpunkt: nur der Text wird unterstrichen, nicht das Icon */
.nav__link::after { display: none; }
.nav__link > span { position: relative; }
.nav__link > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  background-color: #ffffff;
  transform: skewX(-18deg) scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav__link.active > span::after { transform: skewX(-18deg) scaleX(1); }
@media (max-width: 650px) {
  .nav__link > span::after { display: none; }
}

/* Bildfolge: Ecken-Kontur entfernt, stattdessen ein schwacher blauer
   Schimmer hinter dem Bild (als würde es leicht blau hinterleuchtet) */
.rep__frame::after { display: none; }
.rep__stage::before {
  display: block;
  content: "";
  position: absolute;
  z-index: -1;
  transform: none;
  opacity: 1;
  transition: none;
}
.js-reveal .rep__stage::before {
  transform: scale(0.85);
  opacity: 0;
  transition: transform 1200ms cubic-bezier(0.23, 1, 0.32, 1) 300ms, opacity 1000ms ease 300ms;
}
.js-reveal .rep__media.is-in .rep__stage::before { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .rep__stage::before {
    transform: none;
    opacity: 1;
    transition: none;
  }
}
.rep__stage::before {
  inset: -12% -9%;
  filter: blur(30px);
}
.rep__stage::before {
  width: auto;
  height: auto;
  transform-origin: center;
}
.rep__stage::before { background: radial-gradient(ellipse at center, rgba(var(--color-primary-rgb), 0.85) 0%, rgba(var(--color-primary-rgb), 0.4) 50%, rgba(var(--color-primary-rgb), 0) 74%); }

/* Bildfolge ohne Schimmer und ohne Kontur – nur die weich auslaufenden Bilder */
.rep__stage::before, .js-reveal .rep__stage::before, .js-reveal .rep__media.is-in .rep__stage::before { display: none; }

/* ============================================================
   Ablauf: Treppe aus wachsenden 18°-Balken; Titel bleibt stehen,
   Fortschrittsbalken füllt sich beim Scrollen.
   Logik: initAblauf2 in scripts.js.
   ============================================================ */
.abl2__grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: start;
}
.abl2__side { position: sticky; top: calc(var(--scroll-offset) + 24px); }
.abl2__title { margin-bottom: 16px; }
.abl2__intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 30em;
}

.abl2__meter {
  position: relative;
  margin-top: 34px;
  width: min(100%, 360px);
  height: 10px;
  overflow: hidden;
  transform: skewX(-18deg);
  background-color: rgba(255, 255, 255, 0.1);
}
.abl2__fill {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary-hover);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abl2__now {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  min-height: 2.4em;
}
.abl2__now-num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.abl2__now-of {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-body);
  margin-left: -4px;
}
.abl2__now-title {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-strong);
  transition: opacity 200ms ease;
}
.abl2__now.is-swapping .abl2__now-title, .abl2__now.is-swapping .abl2__now-num { opacity: 0; }
.abl2__now-num { transition: opacity 200ms ease; }
.abl2__note { margin-top: 36px; }

.abl2__steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.abl2__step {
  position: relative;
  padding: 34px 30px 28px;
  background-color: var(--card-bg);
  border: 1px solid var(--chrome-border);
  border-radius: 14px;
  transition: border-color 300ms ease, background-color 300ms ease;
}
.abl2__step.is-current { border-color: rgba(var(--color-primary-rgb), 0.7); }

/* Treppe: der Balken oben wird mit jedem Schritt länger */
.abl2__bar {
  position: absolute;
  top: 0;
  left: 30px;
  height: 5px;
  width: calc((100% - 60px) * var(--w, 0.16));
  background-color: rgba(255, 255, 255, 0.14);
  transform: skewX(-18deg);
  transform-origin: left;
  transition: background-color 300ms ease;
}
.abl2__step:nth-child(1) .abl2__bar { --w: 0.16; }
.abl2__step:nth-child(2) .abl2__bar { --w: 0.32; }
.abl2__step:nth-child(3) .abl2__bar { --w: 0.5; }
.abl2__step:nth-child(4) .abl2__bar { --w: 0.66; }
.abl2__step:nth-child(5) .abl2__bar { --w: 0.83; }
.abl2__step:nth-child(6) .abl2__bar { --w: 1; }
.abl2__step.is-done .abl2__bar { background-color: var(--color-primary-hover); }
.js-reveal .abl2__step .abl2__bar { transform: skewX(-18deg) scaleX(0); transition: transform 900ms cubic-bezier(0.23, 1, 0.32, 1) 200ms, background-color 300ms ease; }
.js-reveal .abl2__step.is-in .abl2__bar { transform: skewX(-18deg) scaleX(1); }

.abl2__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.abl2__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  font-size: 20px;
  color: var(--color-text-body);
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: color 300ms ease, background-color 300ms ease;
}
.abl2__step.is-done .abl2__icon { color: #ffffff; background-color: var(--color-primary); }
.abl2__label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-hover);
}
.abl2__name {
  margin-top: 2px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--color-text-strong);
}
.abl2__text {
  margin-top: 14px;
  padding-left: 62px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-body);
  max-width: 40em;
}

.abl2__fork {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-left: 62px;
}
.abl2__opt {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--chrome-border);
}
.abl2__opt .ms {
  font-size: 20px;
  color: var(--color-primary-hover);
  margin-top: 2px;
}
.abl2__opt h4 { font-size: 15.5px; color: var(--color-text-strong); }
.abl2__opt p {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-body);
}
.abl2__or {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-body);
}

@media (prefers-reduced-motion: reduce) {
  .abl2__fill { transition: none; }
  .js-reveal .abl2__step .abl2__bar { transform: skewX(-18deg); transition: none; }
}
@media (max-width: 1000px) {
  .abl2__grid { grid-template-columns: 1fr; }
  .abl2__side { position: static; }
  .abl2__now { display: none; }
  .abl2__note { display: none; }
}
@media (max-width: 650px) {
  .abl2__step { padding: 30px 18px 22px; }
  .abl2__bar { left: 18px; width: calc((100% - 36px) * var(--w, 0.16)); }
  .abl2__text, .abl2__fork { padding-left: 0; }
  .abl2__fork { grid-template-columns: 1fr; }
  .abl2__or { justify-self: center; }
}

/* ============================================================
   FAQ: Überschrift links (bleibt beim Scrollen
   stehen), rechts aufklappbare Boxen. Plus wird beim Öffnen zum
   Minus (schräge 18°-Balken). Weiches Auf-/Zuklappen: initFaq2.
   ============================================================ */
.faq2__grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq2__head { top: calc(var(--scroll-offset) + 24px); }
.faq2__title { margin-bottom: 16px; }
.faq2__note {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-body);
  max-width: 26em;
}
.faq2__note a { color: var(--color-primary-hover); }

.faq2__list { display: grid; gap: 10px; }
.faq2__item {
  background-color: var(--card-bg);
  border: 1px solid var(--chrome-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 250ms ease, background-color 250ms ease;
}
.faq2__item[open] { border-color: rgba(var(--color-primary-rgb), 0.6); }
.faq2__q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-strong);
  cursor: pointer;
  list-style: none;
  transition: background-color 200ms ease;
}
.faq2__q::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .faq2__q:hover { background-color: rgba(255, 255, 255, 0.03); }
}
.faq2__q:focus-visible {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: -2px;
  border-radius: 14px;
}

/* Plus/Minus aus zwei schrägen Balken: der senkrechte klappt beim
   Öffnen in die Waagerechte und verschmilzt mit dem anderen → Minus */
.faq2__sign {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}
.faq2__sign::before,
.faq2__sign::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background-color: var(--color-primary-hover);
  transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease;
}
.faq2__sign::after { transform: rotate(90deg); }
.faq2__item[open] .faq2__sign::after { transform: rotate(0deg); }
.faq2__item[open] .faq2__sign::before,
.faq2__item[open] .faq2__sign::after { background-color: #ffffff; }

.faq2__a { padding: 0 24px 22px; }
.faq2__a p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 46em;
}
.faq2__a p + p { margin-top: 10px; }
/* Antwort gleitet beim Öffnen leicht herein */
.faq2__item[open] .faq2__a > * { animation: faq2-in 420ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes faq2-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .faq2__sign::before, .faq2__sign::after { transition: none; }
  .faq2__item[open] .faq2__a > * { animation: none; }
}
@media (max-width: 1000px) {
  .faq2__grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .faq2__q { padding: 18px 18px; font-size: 16.5px; }
  .faq2__a { padding: 0 18px 18px; }
}

/* Einheitliche große Bereichsüberschriften (wie im Kosten-Bereich):
   Lässt sich Ihr Gerät reparieren?, Ablauf, FAQ */
.faq2__title,
.abl2__title,
.rep__title {
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.faq2__title, .abl2__title { margin-bottom: 20px; }

/* Zweiter Hero-Teil: Text links, Bilder rechts (Überschriften auf der
   ganzen Seite immer links). Bilder etwas kleiner und nach rechts gerückt,
   damit sie nicht direkt unter dem Hero-Foto kleben. */
@media (min-width: 1001px) {
  .rep__grid { grid-template-columns: 6fr 5fr; }
  .rep__media { order: 0; }
  .rep__slide.is-active { animation-name: rep-shutter; }
  .rep__stage, .rep__segs, .rep__caption { width: 88%; margin-left: 12%; }
}

/* Kleine Icons in den Überzeilen (dieselben Symbole wie im Menü);
   jeder Bereich beginnt gleich: Icon + Bereichsname, darunter Überschrift */
.section-eyebrow .ms { font-size: 15px; }

.rep .section-eyebrow { margin-bottom: 12px; }
/* der kurze blaue Strich über „Lässt sich Ihr Gerät reparieren?“ entfällt –
   die Überzeile übernimmt diese Rolle */
.rep__title { padding-top: 0; }
.rep__title::before { display: none; }

/* Alle Bereichsüberschriften einheitlich groß (Leistungen, Kontakt …),
   Deko-Kreise rechts entfernt → Überschrift über die volle Breite */
.section-title {
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}

/* ============================================================
   Kosten neu: kein blaues Vollflächen-Band mehr, sondern vier
   Karten auf dem dunklen Hintergrund. Der wichtigste Fall
   („0 €“) ist blau hervorgehoben. Effekte: Karten gleiten
   gestaffelt herein, der schräge Balken oben wächst, beim
   Überfahren hebt sich die Karte leicht an.
   ============================================================ */
.kost2__head {
  grid-template-columns: 5fr 6fr;
  gap: 20px clamp(40px, 6vw, 96px);
  align-items: end;
}
.kost2__title { margin-bottom: 0; }

.kost2__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 40px 0 0;
}
.kost2__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--chrome-border);
  border-radius: 14px;
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), border-color 250ms ease, opacity 700ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .kost2__card:hover { transform: translateY(-4px); }
}
.kost2__bar {
  position: absolute;
  top: 0;
  left: 24px;
  width: 52px;
  height: 5px;
  transform: skewX(-18deg);
  transform-origin: left;
}
.js-reveal .kost2__card .kost2__bar { transform: skewX(-18deg) scaleX(0); transition: transform 800ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--d, 0ms) + 250ms); }
.js-reveal .kost2__card.is-in .kost2__bar { transform: skewX(-18deg) scaleX(1); }

.kost2__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  font-size: 20px;
  border-radius: 11px;
}
.kost2__card dt {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.kost2__card dd { margin: 0; }
.kost2__big {
  margin-top: 8px !important;
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  hyphens: auto;
}

/* Hervorgehoben: Reparatur nicht möglich → 0 € */

@media (prefers-reduced-motion: reduce) {
  .kost2__card { transition: none; }
  .js-reveal .kost2__card .kost2__bar { transform: skewX(-18deg); transition: none; }
}
@media (max-width: 1100px) {
  .kost2__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .kost2__head { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kost2__cards { grid-template-columns: 1fr; }
  .kost2__bar { left: 20px; }
}

/* Kosten: blaue Fläche wieder da – aber nur so breit wie der Inhalt
   (zwischen den Trennlinien), mit abgerundeten Ecken und dunklerer
   Schrägfläche rechts. Die vier Kacheln liegen darauf, alle gleich
   (keine Hervorhebung einzelner Fälle). */
.kost2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(32px, 3.4vw, 52px) clamp(24px, 3vw, 48px);
  background-color: var(--color-primary);
}
.main > .kost2::after { display: none; }
.kost2__slant {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -14%;
  width: 36%;
  z-index: -1;
  background-color: var(--color-primary-dark);
  transform: skewX(-18deg);
}
.js-reveal .kost2__slant { transform: skewX(-18deg) translateX(40%); transition: transform 1100ms cubic-bezier(0.77, 0, 0.175, 1); }
.js-reveal .kost2.is-in .kost2__slant { transform: skewX(-18deg) translateX(0); }
.kost2 .section-eyebrow { color: rgba(255, 255, 255, 0.82); }
.kost2__title { color: #ffffff; }

.kost2__cards { margin-top: 32px; }
.kost2__card {
  background-color: rgba(10, 20, 35, 0.28);
  border-color: rgba(255, 255, 255, 0.16);
}
@media (hover: hover) and (pointer: fine) {
  .kost2__card:hover { border-color: rgba(255, 255, 255, 0.5); }
}
.kost2__bar { background-color: #ffffff; }
.kost2__icon { color: #ffffff; background-color: rgba(255, 255, 255, 0.14); }
.kost2__card dt { color: rgba(255, 255, 255, 0.78); }
.kost2__big { color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .kost2__slant { transform: skewX(-18deg); transition: none; }
}
@media (max-width: 650px) {
  .kost2__slant { width: 30%; right: -20%; }
}

/* Kosten: blaue Fläche wieder über die volle Bildschirmbreite (wie der
   Balken „Jede erfolgreiche Reparatur …“), Inhalt bleibt auf der
   Inhaltsbreite und fluchtet mit den anderen Bereichen */
.kost2 {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  padding-block: clamp(40px, 4.2vw, 64px);
  padding-inline: max(var(--main-gutter), calc((100vw - var(--page-max)) / 2));
}
@media (max-width: 650px) {
  .kost2 { border-radius: 0; }
}

/* Ablauf: Einleitungssatz direkt über den Wahlmöglichkeiten */
.abl2__text + .abl2__fork { margin-top: 12px; }

/* Kosten: Erklärtext rechts entfällt (steht in den FAQ) */
.kost2__head { display: block; }

/* Kosten: Kacheln nur noch mit Fall + Ergebnis; Erläuterungen in einer
   aufklappbaren Box darunter (gleiche Klappe wie bei den FAQ) */
.kost2__card { padding: 26px 22px 24px; }

.kost2__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 36px;
  margin: 0;
}
.kost2__detail dt {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
.kost2__detail dd {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 760px) {
  .kost2__details { grid-template-columns: 1fr; }
}

/* Kosten-Details als Infobox (bewusst anders als die FAQ-Boxen):
   kleiner Text-Schalter mit Info-Icon und Pfeil, darunter eine helle,
   eingerückte Hinweisfläche mit Info-Kante links */
.kost2__info { margin-top: 18px; }
.kost2__info-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  list-style: none;
}
.kost2__info-toggle::-webkit-details-marker { display: none; }
.kost2__info-toggle > span {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 4px;
  transition: text-decoration-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .kost2__info-toggle:hover > span { text-decoration-color: #ffffff; }
}
.kost2__info-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 4px;
}
.kost2__info-toggle .ms { font-size: 18px; }
.kost2__info-chev { transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.kost2__info[open] .kost2__info-chev { transform: rotate(90deg); }
.kost2__info-body {
  position: relative;
  margin-top: 12px;
  padding: 20px 24px 20px 28px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.kost2__info-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background-color: #ffffff;
}
.kost2__info[open] .kost2__info-body { animation: kost2-info 380ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes kost2-info { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kost2__info-chev { transition: none; }
  .kost2__info[open] .kost2__info-body { animation: none; }
}

/* Trennlinien wie bei den übrigen Bereichen auch über „Lässt sich Ihr Gerät
   reparieren?“ und über dem Kosten-Bereich (dieser schneidet eigene
   Pseudo-Elemente ab – daher sitzt die Linie unter dem Ablauf) */
.main > .rep::after,
.main > #ablauf::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-strong) 15%,
              var(--color-border-strong) 85%, transparent);
  pointer-events: none;
}
.main > .rep::after { top: -35px; }
.main > #ablauf::before { bottom: -35px; }
@media (max-width: 768px) {
  .main > .rep::after { top: -28px; }
  .main > #ablauf::before { bottom: -28px; }
}

/* ============================================================
   Leistungen: sechs Kacheln im Raster mit Licht-Effekt
   unter dem Mauszeiger,
   drei Spalten „möglich / im Einzelfall / nicht möglich“.
   Mauszeiger-Licht: initLeistungen2 in scripts.js.
   ============================================================ */
.lei2__head {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 20px clamp(40px, 6vw, 96px);
  align-items: end;
}
.lei2__title { margin-bottom: 0; }
.lei2__intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 34em;
}

.lei2__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.lei2__tile {
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
  padding: 30px 26px 28px;
  background-color: var(--card-bg);
  border: 1px solid var(--chrome-border);
  border-radius: 14px;
  isolation: isolate;
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), border-color 250ms ease, opacity 700ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* weiches blaues Licht folgt dem Mauszeiger */
.lei2__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(var(--color-primary-rgb), 0.22), transparent 70%);
  opacity: 0;
  transition: opacity 300ms ease;
}
.lei2__bar {
  position: absolute;
  top: 0;
  left: 26px;
  width: 44px;
  height: 4px;
  background-color: var(--color-primary-hover);
  transform: skewX(-18deg);
  transform-origin: left;
  transition: width 500ms cubic-bezier(0.23, 1, 0.32, 1);
}
.lei2__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  font-size: 22px;
  color: var(--color-primary-hover);
  background-color: rgba(var(--color-primary-rgb), 0.14);
  border-radius: 12px;
  transition: color 250ms ease, background-color 250ms ease, transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.lei2__name {
  font-size: 19px;
  line-height: 1.25;
  color: var(--color-text-strong);
}
.lei2__text {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-text-body);
}
@media (hover: hover) and (pointer: fine) {
  .lei2__tile:hover { transform: translateY(-4px); border-color: rgba(var(--color-primary-rgb), 0.6); }
  .lei2__tile:hover::before { opacity: 1; }
  .lei2__tile:hover .lei2__bar { width: calc(100% - 52px); }
  .lei2__tile:hover .lei2__icon {
    color: #ffffff;
    background-color: var(--color-primary);
    transform: rotate(-6deg);
  }
}
.js-reveal .lei2__tile .lei2__bar { transform: skewX(-18deg) scaleX(0); transition: transform 800ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--d, 0ms) + 250ms), width 500ms cubic-bezier(0.23, 1, 0.32, 1); }
.js-reveal .lei2__tile.is-in .lei2__bar { transform: skewX(-18deg) scaleX(1); }

/* möglich / im Einzelfall / nicht möglich */

@media (prefers-reduced-motion: reduce) {
  .lei2__tile, .lei2__icon, .lei2__bar { transition: none; }
  .js-reveal .lei2__tile .lei2__bar { transform: skewX(-18deg); transition: none; }
}
@media (max-width: 1000px) {
  .lei2__head { grid-template-columns: 1fr; }
  .lei2__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .lei2__grid { grid-template-columns: 1fr; }
}

/* FAQ: Überschrift bleibt an ihrer Stelle (läuft nicht mit) */
.faq2__head { position: static; }

/* Überzeile „Reparaturservice“ über dem Hero-Titel, blendet zuerst ein */
.shero__eyebrow { margin-bottom: 16px; animation: shero-rise 700ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .shero__eyebrow { animation: shero-fade 300ms ease both; }
}

/* Hero-Punkte als 2×2-Raster: die zweite Spalte fluchtet untereinander */
.shero__facts { display: grid; }

/* Hero-Punkte untereinander */
.shero__facts { grid-template-columns: 1fr; gap: 10px; }

/* Kosten-Infobox: Einleitungssatz über den Fällen */
.kost2__info-lead {
  margin-bottom: 18px;
  padding-bottom: 16px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.faq2__a a { color: var(--color-primary-hover); }

/* Kosten: schräge Kante oben verankern – beim Aufklappen der Infobox
   läuft sie nur nach unten weiter, statt sich seitlich zu verschieben */
.kost2__slant { transform-origin: top left; }

/* Balken „Jede erfolgreiche Reparatur …“: dunkle Schrägfläche links statt
   rechts (gespiegelt zum Kosten-Bereich) und schmaler; gleitet von links herein */
.eband__slant {
  left: -14%;
  right: auto;
  width: 26%;
  transform-origin: top left;
}
.js-reveal .eband__slant { transform: skewX(-18deg) translateX(-45%); }
.js-reveal .eband.is-in .eband__slant { transform: skewX(-18deg) translateX(0); }
@media (max-width: 650px) {
  .eband__slant {
    left: -22%;
    right: auto;
    width: 34%;
  }
}

/* Laufband per JS (ziehbar): CSS-Animation aus, Greif-Cursor */
.rep__ticker.is-js .rep__track { animation: none; will-change: transform; }
.rep__ticker.is-js {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.rep__ticker.is-js.is-dragging { cursor: grabbing; }

/* Leistungen: Hinweis „… und vieles mehr“ als dezente Infozeile */
.lei2__hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-body);
}
.lei2__hint .ms {
  flex: none;
  font-size: 18px;
  color: var(--color-primary-hover);
}
.lei2__hint strong { color: var(--color-text-strong); font-weight: 600; }

/* Leistungen: möglich / Einzelfall / nicht möglich als schlichte Übersicht
   – Zeilen mit farbigem Status-Schild links, Text rechts, feine Trennlinien */
.lei2__status { margin: 40px 0 0; border-top: 1px solid var(--chrome-border); }
.lei2__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 8px 28px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--chrome-border);
}
.lei2__row dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-text-body);
}
.lei2__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
}
.lei2__badge .ms { font-size: 16px; }
.lei2__badge--ok { color: #4ade80; background-color: rgba(74, 222, 128, 0.12); }
.lei2__badge--ask { color: #fbbf24; background-color: rgba(251, 191, 36, 0.12); }
.lei2__badge--no { color: #f87171; background-color: rgba(248, 113, 113, 0.12); }
.lei2__note { margin-top: 24px; }
@media (max-width: 650px) {
  .lei2__row { grid-template-columns: 1fr; padding: 14px 2px; }
  .lei2__hint { align-items: flex-start; }
}

/* ============================================================
   Kontakt: links die Reparaturanfrage als Karte mit
   Checkliste (Häkchen setzen sich beim Hineinscrollen nacheinander),
   rechts die direkten Wege und eine Live-Anzeige „jetzt erreichbar“.
   Logik: initKontakt2 in scripts.js.
   ============================================================ */
.kon2__title { margin-bottom: 0; }
.kon2__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 18px;
  margin-top: 36px;
}

.kon2__main {
  position: relative;
  padding: 36px 34px 32px;
  background-color: var(--card-bg);
  border: 1px solid var(--chrome-border);
  border-radius: 16px;
}
.kon2__bar {
  position: absolute;
  top: 0;
  left: 34px;
  width: 64px;
  height: 5px;
  background-color: var(--color-primary-hover);
  transform: skewX(-18deg);
  transform-origin: left;
}
.js-reveal .kon2__main .kon2__bar { transform: skewX(-18deg) scaleX(0); transition: transform 900ms cubic-bezier(0.23, 1, 0.32, 1) 250ms; }
.js-reveal .kon2__main.is-in .kon2__bar { transform: skewX(-18deg) scaleX(1); }
.kon2__main-title {
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-text-strong);
}
.kon2__main-text {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--color-text-body);
  max-width: 40em;
}

.kon2__checks {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.kon2__checks li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-body);
}
.kon2__checks strong { color: var(--color-text-strong); font-weight: 600; }
.kon2__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  border-radius: 7px;
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.7);
  background-color: var(--color-primary);
  color: #ffffff;
  transition: background-color 260ms ease, border-color 260ms ease;
}
.kon2__tick .ms { font-size: 16px; transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease; }
/* Häkchen setzen sich nacheinander, sobald die Karte im Bild ist */
.js-reveal .kon2__main .kon2__tick { background-color: transparent; }
.js-reveal .kon2__main .kon2__tick .ms { transform: scale(0.4); opacity: 0; }
.js-reveal .kon2__main.is-in .kon2__tick { background-color: var(--color-primary); }
.js-reveal .kon2__main.is-in .kon2__tick .ms { transform: none; opacity: 1; }
.js-reveal .kon2__main.is-in li:nth-child(1) .kon2__tick, .js-reveal .kon2__main.is-in li:nth-child(1) .kon2__tick .ms { transition-delay: 500ms; }
.js-reveal .kon2__main.is-in li:nth-child(2) .kon2__tick, .js-reveal .kon2__main.is-in li:nth-child(2) .kon2__tick .ms { transition-delay: 750ms; }
.js-reveal .kon2__main.is-in li:nth-child(3) .kon2__tick, .js-reveal .kon2__main.is-in li:nth-child(3) .kon2__tick .ms { transition-delay: 1000ms; }

.kon2__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
  margin-top: 30px;
}
.kon2__cta {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.kon2__reply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--color-text-body);
}
.kon2__reply .ms { font-size: 18px; color: var(--color-primary-hover); }

.kon2__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kon2__side-head {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-strong);
  padding: 4px 2px 2px;
}
.kon2__way {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background-color: var(--card-bg);
  border: 1px solid var(--chrome-border);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 220ms ease, transform 260ms cubic-bezier(0.23, 1, 0.32, 1), opacity 700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.kon2__way-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 21px;
  color: var(--color-primary-hover);
  background-color: rgba(var(--color-primary-rgb), 0.14);
  transition: color 220ms ease, background-color 220ms ease;
}
.kon2__way-icon svg { width: 21px; height: 21px; }
.kon2__way-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kon2__way-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-body);
}
.kon2__way-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-strong);
  overflow-wrap: anywhere;
}
.kon2__way-arrow {
  font-size: 20px;
  color: var(--color-text-body);
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .kon2__way:hover { border-color: rgba(var(--color-primary-rgb), 0.7); transform: translateY(-2px); }
  .kon2__way:hover .kon2__way-icon { color: #ffffff; background-color: var(--color-primary); }
  .kon2__way:hover .kon2__way-arrow { color: #ffffff; transform: translateX(4px); }
}
.kon2__way:focus-visible { outline: 2px solid var(--color-primary-hover); outline-offset: 3px; }

.kon2__hours {
  padding: 18px 20px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.18);
}
.kon2__status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-strong);
}
.kon2__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
  flex: none;
}
.kon2__status.is-open .kon2__dot {
  background-color: var(--color-success);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: kon2-pulse 2s ease-out infinite;
}
.kon2__status.is-closed .kon2__dot { background-color: #fbbf24; }
@keyframes kon2-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.kon2__times {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}
.kon2__times div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14.5px;
}
.kon2__times dt { color: var(--color-text-body); }
.kon2__times dd {
  margin: 0;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .kon2__main .kon2__bar { transform: skewX(-18deg); transition: none; }
  .js-reveal .kon2__main .kon2__tick { background-color: var(--color-primary); }
  .js-reveal .kon2__main .kon2__tick .ms {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .kon2__status.is-open .kon2__dot { animation: none; }
  .kon2__way { transition: none; }
}
@media (max-width: 1000px) {
  .kon2__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kon2__main { padding: 30px 20px 24px; }
  .kon2__bar { left: 20px; }
  .kon2__way { padding: 16px; }
}

/* Kontakt: als Abschluss der Seite eine Tonstufe heller hinterlegt
   (volle Breite), Karten darin etwas dunkler als die Fläche */
.kon2 {
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 5vw, 76px);
}
.kon2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background-color: #1b2026;
  border-top: 1px solid var(--chrome-border);
}
.main > .kon2::after { display: none; }

.kon2 .kon2__main,
.kon2 .kon2__way { background-color: #14181c; }
.kon2 .kon2__hours { background-color: rgba(0, 0, 0, 0.18); }
.kon2 { padding-bottom: clamp(64px, 6vw, 96px); }

/* Footer (oberer Teil): Schrift wie im Header – hellgrau, beim Überfahren
   weiß und unterstrichen statt blau. Icons-Buttons ebenfalls ohne Blau. */

.footer-top .footer-text-link {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer-top .footer-text-link:hover { color: #ffffff; text-decoration-thickness: 1px; }
}

/* ============================================================
   Footer: links Marke mit Leitsatz und Icon-Knöpfen,
   rechts drei Spalten (Anschrift, Kontakt, Öffnungszeiten) mit
   kleiner Überschrift und kurzem schrägem Balken als Akzent.
   ============================================================ */
.ft2__inner {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: start;
}
.ft2__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.ft2__logo img { height: 30px; width: auto; }
.ft2__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
}
.ft2__claim {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  max-width: 30em;
}
.ft2__actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.ft2__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--chrome-border);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.ft2__icon svg { width: 18px; height: 18px; }
.ft2__icon .ms { font-size: 19px; }
@media (hover: hover) and (pointer: fine) {
  .ft2__icon:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
  }
}
.ft2__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0;
}
.ft2__fact { position: relative; }
.ft2__fact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  width: 28px;
  height: 3px;
  background-color: var(--color-primary-hover);
  transform: skewX(-18deg);
}
.ft2__fact dt {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 10px;
}
.ft2__fact dt.ft2__sub { margin-top: 18px; }
.ft2__fact dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}
.ft2__note {
  margin-top: 8px !important;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
}
@media (max-width: 1000px) {
  .ft2__inner { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .ft2__facts { grid-template-columns: 1fr; gap: 26px; }
}

/* Footer: Icons vor den Spaltentiteln und beim Termin-Hinweis */
.ft2__fact dt { align-items: center; gap: 8px; }
.ft2__dt-icon {
  flex: none;
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--color-primary-hover);
}
.ft2__note { align-items: flex-start; gap: 7px; }
.ft2__note .ms {
  flex: none;
  font-size: 15px;
  margin-top: 2px;
  color: var(--color-primary-hover);
}

/* Footer: Icons hängen links vor der Textkante, damit Titel und
   Text darunter exakt bündig stehen */
.ft2__fact dt { position: relative; display: block; }
.ft2__dt-icon {
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
}
.ft2__note { position: relative; display: block; }
.ft2__note .ms {
  position: absolute;
  left: -22px;
  top: 1px;
  margin: 0;
}
@media (max-width: 1000px) {
  .ft2__facts { padding-left: 24px; }
}
.ft2__nowrap { white-space: nowrap; }

/* Footer: Öffnungszeiten-Spalte breiter, damit Tag und Uhrzeit
   jeweils in einer Zeile stehen */
@media (min-width: 1001px) {
  .ft2__inner { grid-template-columns: 3.4fr 8.6fr; gap: 40px clamp(32px, 4vw, 72px); }
  .ft2__facts { grid-template-columns: 1fr 1fr 1.45fr; gap: 28px; }
}
@media (min-width: 651px) and (max-width: 1200px) {
  .ft2__inner { grid-template-columns: 1fr; }
  .ft2__facts { grid-template-columns: 1fr 1fr 1.3fr; padding-left: 24px; }
}
@media (min-width: 651px) and (max-width: 900px) {
  .ft2__facts { grid-template-columns: 1fr 1fr; }
  .ft2__fact:last-child { grid-column: 1 / -1; }
}

/* Footer: beim Überfahren nur weiß, ohne Unterstreichung; Akzentstriche über
   den Spalten entfallen (die blauen Icons setzen bereits den Akzent) */
@media (hover: hover) and (pointer: fine) {
  .footer-top .footer-text-link:hover { text-decoration: none; }
}
.ft2__fact { padding-top: 0; }
.ft2__fact::before { display: none; }

/* Footer und untere Leiste: gleiche Ränder wie Top-Bar und Header
   (volle Breite, Abstand --bar-gutter links/rechts) */
.footer-top-content,
.footer-bottom-content {
  max-width: none;
  padding-left: var(--bar-gutter);
  padding-right: var(--bar-gutter);
}

/* Footer: Spalten so breit wie ihr Inhalt und gleichmäßig verteilt –
   die rechte Spalte endet damit genau am rechten Rand (gleicher Abstand wie links) */
@media (min-width: 1201px) {
  .ft2__facts {
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    column-gap: 40px;
    padding-left: 24px;
  }
}

/* Footer flacher: weniger Leerraum oben und unten */
.footer-top.ft2 { padding: 34px 0 30px; }
.ft2__inner { padding-top: 0; padding-bottom: 0; }
@media (max-width: 650px) {
  .footer-top.ft2 { padding: 30px 0 26px; }
}

/* „Nach oben“-Knopf knapp über der unteren Leiste (37 px bzw. 65 px hoch) */
.back-to-top { bottom: 48px; }

/* Kontakt: Erreichbarkeit als Wochenübersicht – sieben Tage mit Balken
   (Zeitfenster auf einer 0–24-Uhr-Skala), heutiger Tag hervorgehoben.
   Füllt die Fläche sinnvoll statt leerem Platz. */
.kon2__hours { flex-direction: column; }

/* Kontakt: Erreichbarkeit wieder als zwei Zeilen; Box nur so hoch wie ihr
   Inhalt, Anfrage-Karte links kompakter – beide Spalten enden bündig */
.kon2__hours { flex: none; display: block; }
.kon2__grid { align-items: stretch; }
.kon2__side { justify-content: space-between; }
@media (min-width: 1001px) {
  .kon2__main { padding: 26px 34px 22px; }
  .kon2__checks { margin-top: 16px; }
  .kon2__actions { margin-top: 22px; }
}

/* Kontakt ist der letzte Bereich: helle Fläche reicht bis an den Footer;
   Menü mit 7 Punkten auf mittleren Breiten enger */
.main:has(> .kon2) { padding-bottom: 0; }
@media (min-width: 1101px) and (max-width: 1440px) {
  .nav__link {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 13.5px;
  }
}
.nav__item:nth-child(7) { animation-delay: 440ms; }
.header-cta { animation-delay: 480ms; }

/* Handy: Einblenden schneller und mit kürzerem Weg; „Nach oben“-Knopf tiefer */
@media (max-width: 650px) {
  .js-reveal [data-reveal] {
    transform: translateY(14px);
    transition-duration: 450ms, 500ms;
  }
  .js-reveal [data-reveal].is-in { transform: none; }
  .js-reveal .lei2__tile .lei2__bar,
  .js-reveal .kost2__card .kost2__bar,
  .js-reveal .abl2__step .abl2__bar { transition-duration: 550ms; transition-delay: calc(var(--d, 0ms) + 120ms); }
  .back-to-top { bottom: 20px; }
}

/* Rahmen der Seite neutral: Footer-Icons weiß statt blau (wie Top-Bar);
   Blau bleibt dem Inhalt und dem Anfragen-Button vorbehalten */
.ft2__dt-icon,
.ft2__note .ms { color: rgba(255, 255, 255, 0.85); }

/* Footer: dezenter Link zur Google-Bewertung unter den Icon-Knöpfen */
.ft2__review {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 160ms ease;
}
.ft2__review svg {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.85);
}
@media (hover: hover) and (pointer: fine) {
  .ft2__review:hover { color: #ffffff; }
}

/* Menüpunkt „Shop“: noch nicht verfügbar – kein Link, kein Unterstrich;
   beim Überfahren/Fokus erscheint der Hinweis „In Kürze verfügbar“ */
.nav__link--soon { position: relative; cursor: default; }
.nav__link--soon > span::after { display: none; }
.nav__soon {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 5;
  padding: 6px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  color: #ffffff;
  background-color: var(--card-bg);
  border: 1px solid var(--chrome-border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav__link--soon:hover .nav__soon,
.nav__link--soon:focus-visible .nav__soon { opacity: 1; transform: translate(-50%, 0); }
.nav__link--soon:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Handy (Klappmenü): Hinweis direkt neben dem Wort */
@media (max-width: 650px) {
  .nav__soon {
    position: static;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    opacity: 1;
    transform: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.75);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav__soon { transition: none; }
}

/* Footer flacher, vor allem unten */
.footer-top.ft2 { padding: 30px 0 16px; }
.ft2__review { margin-top: 12px; }
@media (max-width: 650px) { .footer-top.ft2 { padding: 26px 0 14px; } }

/* Kontaktformular: Preisvorstellung als Zahlenfeld mit €-Zeichen rechts */
.request-form__money { position: relative; max-width: 220px; }
.request-form__money input { padding-right: 40px; }
.request-form__money-unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-body);
  pointer-events: none;
}

/* Cookie-Banner: „Ablehnen“ eine Stufe dunkler als „Akzeptieren“
   (dezent, beide bleiben gut sichtbar und gleich groß). Selektor mit
   .cc-knoepfe, weil cookie-consent.css nach dieser Datei geladen wird */
.cc-knoepfe .cc-knopf--ablehnen { background-color: #153d68; border-color: #153d68; }
.cc-knoepfe .cc-knopf--ablehnen:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); }

/* „Nach oben“-Knopf im 18°-Motiv: schräge Fläche wie die Hauptbuttons,
   blaue Füllung steigt mit dem Lesefortschritt; gleitet sanft ein/aus */
.back-to-top {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 280ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 280ms;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 220ms ease, transform 280ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
}
.back-to-top__shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #1b2026;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transform: skewX(-18deg);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.55);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 220ms ease;
}
.back-to-top__fill {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: background-color 180ms ease;
}
.back-to-top .ms {
  position: relative;
  font-size: 22px;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.back-to-top:active .back-to-top__shape { background-color: var(--color-primary-dark); }
.back-to-top.is-visible:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover { background: none; border: 0; box-shadow: none; color: #ffffff; }
  .back-to-top:hover .back-to-top__shape {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.28), 0 8px 26px -4px rgba(var(--color-primary-rgb), 0.85);
  }
  .back-to-top:hover .back-to-top__fill { background-color: var(--color-primary-hover); }
  .back-to-top:hover .ms { transform: translateY(-3px); }
}
.back-to-top:focus-visible { outline-offset: 4px; }
@media (max-width: 650px) {
  .back-to-top { width: 42px; height: 42px; right: 18px; }
  .back-to-top .ms { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top, .back-to-top.is-visible { transform: none; transition: opacity 150ms ease, visibility 0s; }
  .back-to-top .ms { transition: none; }
}

/* Erster Besuch: Animationen der Seite stehen still, solange der
   Cookie-Banner offen ist (html.cc-wartet), und laufen erst danach an.
   Der Banner selbst bleibt beweglich. */
html.cc-wartet body > :not(.cc-banner):not(.cc-hintergrund),
html.cc-wartet body > :not(.cc-banner):not(.cc-hintergrund) *,
html.cc-wartet body > :not(.cc-banner):not(.cc-hintergrund)::before,
html.cc-wartet body > :not(.cc-banner):not(.cc-hintergrund)::after,
html.cc-wartet body > :not(.cc-banner):not(.cc-hintergrund) *::before,
html.cc-wartet body > :not(.cc-banner):not(.cc-hintergrund) *::after {
  animation-play-state: paused !important;
}

/* Hinweis rechts neben der Bereichsüberschrift (Leistungen, Ablauf,
   Kosten): kein Kasten, sondern zwei schräge Balken davor – das
   Doppelstrich-Motiv aus Hero und Logo – und etwas größere, hellere
   Schrift. --hell: Variante auf dem blauen Kosten-Band. */
.head-note {
  position: relative;
  max-width: 31em;
  margin: 0;
  padding: 2px 0 2px 46px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--color-text-strong);
  text-wrap: pretty;
}
.head-note::before,
.head-note::after {
  content: "";
  position: absolute;
  top: 3px;
  height: 46px;
  width: 6px;
  background-color: var(--color-primary-hover);
  transform: skewX(-18deg);
}
.head-note::before { left: 10px; }
.head-note::after { left: 24px; opacity: 0.45; }
.head-note--hell { color: #ffffff; }
.head-note--hell::before, .head-note--hell::after { background-color: #ffffff; }

/* Kopfzeilen: Titel links, Hinweis rechts, unten bündig */
.kost2__head,
.abl2__top {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 20px clamp(40px, 6vw, 96px);
  align-items: end;
}
.lei2__head .head-note, .kost2__head .head-note, .abl2__top .head-note { justify-self: end; }
.abl2__top { margin-bottom: 40px; }
.abl2__top .abl2__title { margin-bottom: 0; }
.abl2__side .abl2__meter { margin-top: 6px; }
@media (max-width: 1000px) {
  .kost2__head, .abl2__top { grid-template-columns: 1fr; }
  .lei2__head .head-note, .kost2__head .head-note, .abl2__top .head-note { justify-self: start; }
  .abl2__top { margin-bottom: 28px; }
}
@media (max-width: 650px) {
  .head-note { padding-left: 38px; font-size: 16px; }
  .head-note::before { left: 6px; width: 5px; }
  .head-note::after { left: 18px; width: 5px; }
}

/* Ablauf auf Handy/Tablet: Der waagerechte Balken oben würde aus dem Bild
   scrollen – stattdessen läuft links neben den Schritten eine senkrechte
   Leiste, die sich beim Scrollen füllt (--rail aus initAblauf2). */
@media (max-width: 1000px) {
  .abl2__side { display: none; }
  .abl2__steps { position: relative; padding-left: 24px; }
  .abl2__steps::before,
  .abl2__steps::after {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 5px;
    width: 4px;
    border-radius: 2px;
  }
  .abl2__steps::before { background-color: rgba(255, 255, 255, 0.1); }
  .abl2__steps::after {
    background-color: var(--color-primary-hover);
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.7);
    transform: scaleY(var(--rail, 0));
    transform-origin: top;
  }
}
@media (max-width: 650px) {
  .abl2__steps { padding-left: 18px; }
  .abl2__steps::before, .abl2__steps::after { left: 3px; width: 3px; }
}

/* Kosten-Details: weiches Auf-/Zuklappen (Höhe per JS, smoothDetails);
   beim Zuklappen blendet der Inhalt zugleich aus */
.kost2__info.is-animating { overflow: hidden; }
.kost2__info-body { transition: opacity 220ms ease; }
.kost2__info.is-closing .kost2__info-body { opacity: 0; }
.kost2__info[open] .kost2__info-body { animation-duration: 520ms; }

/* Handy: „Alle Rechte vorbehalten.“ in eigener Zeile unter dem Copyright */
@media (max-width: 650px) {
  .footer-bottom-text { align-items: flex-start; line-height: 1.5; }
  .footer-bottom-text .ms { margin-top: 3px; }
  .footer-bottom-rights { display: block; }
}

/* Handy: kein hellblaues Rechteck beim Antippen (Standard-Markierung von
   Chrome/Android). Rückmeldung geben die Knöpfe selbst (Farbe, Eindrücken);
   der Fokusrahmen für die Tastatur (:focus-visible) bleibt erhalten. */
html { -webkit-tap-highlight-color: transparent; }