/* ===== 01-basis.css ===== */
/* ============================================================
   LK Autoservice Kandy — Basis
   ------------------------------------------------------------
   Die Schrift liegt LOKAL unter /fonts/ (kein Google-Fonts-Abruf).
   Dadurch baut die Seite keine einzige Verbindung nach draußen
   auf — und braucht deshalb auch kein Cookie-Banner.

   Inter ist ein "variable font": EINE Datei deckt alle Stärken
   von 100 bis 900 ab.
   ============================================================ */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-var.woff2") format("woff2");
}

:root {
  --schrift: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ----------------------------------------------------------
     FARBEN — an EINER Stelle
     ----------------------------------------------------------
     --blau ist das Logo-Cyan. Es taugt für Flächen, Knöpfe und
     Schrift auf Dunkel, aber NICHT für kleine Schrift auf Weiß:
     dort kommt es nur auf 2,6:1 Kontrast, gefordert sind 4,5:1.
     Deshalb gibt es --blau-text, ein abgedunkeltes Cyan.

     Gemessen mit `node _build/messen.js` an echten Pixeln.
     Der ungünstigste Platz auf der ganzen Seite ist die kleine
     Zeile über der Überschrift der Unterseiten: sie sitzt genau
     im blauen Schimmer oben links im Kopfbereich, gemessen
     rgb(204,229,236). Dort muss die Farbe bestehen — überall
     sonst ist der Grund heller.

       auf rgb(204,229,236)  4,7:1   (der schlechteste Platz)
       auf #f5f7f8           5,6:1
       auf Weiß              6,1:1

     Zwei hellere Fassungen sind vorher durchgefallen:
     #0a7c9e kam auf #f5f7f8 nur auf 4,45:1, #0a6e8c im blauen
     Schimmer nur auf 4,41:1. Wer die Markenfarbe ändert, muss
     beide Werte anpassen UND neu messen.
     ---------------------------------------------------------- */
  --blau: #08aedd;
  --blau-text: #0a6a87;
  --blau-tief: #0691b8;
  --dunkel: #111417;
  --dunkel-2: #151a20;
  --text: #15191d;
  --gedaempft: rgba(21, 25, 29, 0.68);
  --soft: #f5f7f8;
  --linie: rgba(17, 20, 23, 0.12);

  --schatten: 0 24px 70px rgba(17, 20, 23, 0.10);
  --schatten-stark: 0 34px 95px rgba(17, 20, 23, 0.16);

  --rund-xl: 34px;
  --rund-l: 24px;
  --rund-m: 20px;

  /* ----------------------------------------------------------
     KOPFHÖHE — an EINER Stelle
     ----------------------------------------------------------
     Der Kopfbereich schwebt fest über der Seite und ist damit
     aus dem Textfluss raus. Im alten Shopify-Aufbau stand der
     Abstand nach oben je Seite von Hand drin (132 px hier,
     118 px dort) — auf schmalen Bildschirmen rutschte die erste
     Überschrift dadurch unter die Menü-Pille.

     Jetzt rechnet jede Seite ihren Abstand aus diesem Wert.
     Ändert sich der Kopf, stimmen alle Seiten automatisch mit.
     ---------------------------------------------------------- */
  --kopf-hoehe: 100px;
  --kopf-luft: clamp(26px, 4vw, 52px);

  --breite: 1180px;
}

@media (max-width: 1180px) {
  :root {
    --kopf-hoehe: 90px;
  }
}

@media (max-width: 650px) {
  :root {
    --kopf-hoehe: 82px;
  }
}

/* ------------------------------------------------------------
   FEHLERBEHEBUNG „Seite lässt sich nach rechts schieben"
   ------------------------------------------------------------
   `overflow-x: clip` als Fangnetz. Bewusst `clip` und NICHT
   `hidden`: `hidden` erzeugt einen Scroll-Container und macht
   damit `position: sticky` und `position: fixed`-Rechnungen
   kaputt — daran hängt hier der Kopfbereich.
   `width: 100vw` kommt in diesem Projekt nirgends vor; es zählt
   die Scrollleiste mit und war bei Aura Beauty die Ursache
   genau dieses Fehlers.
   ------------------------------------------------------------ */

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Sprungmarken dürfen nicht unter dem festen Kopf landen. */
  scroll-padding-top: calc(var(--kopf-hoehe) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--soft);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   FEHLERBEHEBUNG „Bild ist lang gezogen"
   ------------------------------------------------------------
   Die Bilder tragen width/height als HTML-Attribute, damit beim
   Laden nichts springt. Diese Attribute setzen aber auch eine
   ECHTE Höhe. Wo ein Bild per CSS über `aspect-ratio` oder
   `object-fit` in Form gebracht wird, gehört deshalb immer
   `height: auto` oder eine ausdrückliche Höhe dazu.
   ------------------------------------------------------------ */

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

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

button,
input,
select,
textarea {
  font: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--dunkel);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

/* Sichtbarer Fokusrahmen für die Bedienung mit der Tastatur.
   Im alten Shopify-Aufbau fehlte er komplett. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blau-tief);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sprunglink an den Anfang des Inhalts */
.ak-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2147483001;
  padding: 12px 20px;
  border-radius: 0 0 14px 0;
  background: var(--dunkel);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ak-skip:focus {
  left: 0;
}

/* Nur für Vorleseprogramme — nirgends sichtbar, aber im Bauplan
   der Seite vorhanden. */
.nur-vorlesen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sanftes Einblenden beim Scrollen. Lag im alten Aufbau viermal
   fast wortgleich auf der Seite — einmal je Abschnitt. */
.ak-auf {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ak-auf.ist-da {
  opacity: 1;
  transform: none;
}

/* Ohne JavaScript bliebe sonst die halbe Seite unsichtbar. */
.kein-js .ak-auf {
  opacity: 1;
  transform: none;
}

/* Stelle, an der noch Firmendaten fehlen. Fällt absichtlich auf
   und wird von `node _build/pruefen.js` gezählt. */
.ak-luecke {
  background: #ffe38a;
  color: #6b4300;
  padding: 1px 8px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.92em;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ===== 05-bausteine.css ===== */
/* ============================================================
   Bausteine, die auf mehreren Seiten vorkommen
   ------------------------------------------------------------
   Im alten Shopify-Aufbau war jeder dieser Bausteine in JEDER
   Section noch einmal beschrieben — der Route-Hinweis zum
   Beispiel viermal, mit vier eigenen Klassennamen. Hier steht
   jeder Baustein einmal.
   ============================================================ */

.ak-bahn {
  width: min(100% - 32px, var(--breite));
  margin: 0 auto;
}

.ak-abschnitt {
  position: relative;
  padding: clamp(62px, 8vw, 106px) 0;
}

.ak-abschnitt--hell {
  background: #fff;
}

/* Erster Abschnitt einer Unterseite: Abstand zum festen Kopf */
.ak-kopfseite {
  position: relative;
  padding: calc(var(--kopf-hoehe) + var(--kopf-luft)) 0 clamp(58px, 8vw, 100px);
  background:
    radial-gradient(circle at 12% 12%, rgba(8, 174, 221, 0.16), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, var(--soft) 100%);
}

/* ---------- Überschriften-Zeile ---------- */

.ak-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--blau-text);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ak-marke::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blau);
  box-shadow: 0 0 0 6px rgba(8, 174, 221, 0.14);
  flex: 0 0 auto;
}

.ak-marke--hell {
  color: rgba(255, 255, 255, 0.82);
}

.ak-titel {
  font-size: clamp(40px, 6.6vw, 84px);
  letter-spacing: -0.06em;
}

.ak-titel span {
  color: var(--blau-text);
}

.ak-h2 {
  font-size: clamp(30px, 4.4vw, 54px);
  letter-spacing: -0.052em;
}

.ak-vorspann {
  margin: 20px 0 0;
  max-width: 660px;
  color: var(--gedaempft);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
}

.ak-kopfzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
  gap: clamp(22px, 5vw, 66px);
  align-items: end;
  margin-bottom: clamp(28px, 5vw, 54px);
}

.ak-kopfzeile .ak-vorspann {
  margin-top: 0;
}

/* ---------- Kopfblock mit Bild (Dienstleistungen, Über uns) ---------- */

.ak-bildkopf {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
  gap: clamp(26px, 5vw, 68px);
  align-items: center;
}

.ak-bildrahmen {
  position: relative;
  min-height: 480px;
  border: 1px solid rgba(17, 20, 23, 0.1);
  border-radius: var(--rund-xl);
  background: #fff;
  box-shadow: var(--schatten-stark);
  overflow: hidden;
}

.ak-bildrahmen img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}

.ak-bildrahmen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 38%, rgba(0, 0, 0, 0.6) 100%);
}

.ak-bildschild {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  /* Dunkel genug, dass die weiße Schrift auf JEDEM Foto lesbar
     bleibt — unabhängig davon, was darunter liegt. */
  background: rgba(7, 10, 13, 0.82);
  color: #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ak-bildschild strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.ak-bildschild span {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Knöpfe ---------- */

.ak-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
              background 0.22s ease, border-color 0.22s ease;
}

.ak-knopf:hover {
  transform: translateY(-2px);
}

.ak-knopf svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ak-knopf--blau {
  color: #061016;
  background: var(--blau);
  box-shadow: 0 18px 44px rgba(8, 174, 221, 0.28);
}

.ak-knopf--weiss {
  color: var(--dunkel);
  background: #fff;
  border-color: var(--linie);
  box-shadow: 0 14px 38px rgba(17, 20, 23, 0.06);
}

.ak-knopf--glas {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ak-knopf[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ak-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- Pillen ---------- */

.ak-pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.ak-pille {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 700;
}

.ak-pille--hell {
  border-color: var(--linie);
  background: #fff;
  color: var(--gedaempft);
}

/* ---------- Karten ---------- */

.ak-karte {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--linie);
  border-radius: var(--rund-l);
  background: #fff;
  box-shadow: 0 16px 44px rgba(17, 20, 23, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.ak-karte:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 174, 221, 0.34);
  box-shadow: 0 22px 58px rgba(17, 20, 23, 0.08);
}

.ak-karte h3 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: -0.03em;
}

.ak-karte p {
  color: var(--gedaempft);
  font-size: 15px;
  line-height: 1.6;
}

.ak-symbol {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 15px;
  background: rgba(8, 174, 221, 0.11);
  color: var(--blau-text);
}

.ak-symbol svg {
  width: 23px;
  height: 23px;
}

/* ---------- Dunkler Abschluss-Block ---------- */

.ak-ruf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  padding: clamp(28px, 5vw, 54px);
  border-radius: var(--rund-xl);
  background: var(--dunkel);
  color: #fff;
  box-shadow: var(--schatten-stark);
  overflow: hidden;
}

.ak-ruf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(8, 174, 221, 0.20), transparent 34%);
  pointer-events: none;
}

.ak-ruf > * {
  position: relative;
  z-index: 2;
}

.ak-ruf h2 {
  color: #fff;
}

.ak-ruf .ak-vorspann {
  color: rgba(255, 255, 255, 0.74);
  max-width: 720px;
}

.ak-ruf-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* ---------- Route-Hinweis ----------------------------------
   Die Zufahrt liegt hinter anderen Hallen. Wer blind auf
   "Route" tippt, landet auf der falschen Seite des Geländes.
   Deshalb kommt vor dem Kartenlink einmal die Skizze.

   Gebaut als natives <dialog>: Escape-Taste, Hintergrund-
   abdunklung und das Festhalten der Tastaturbedienung im
   Fenster liefert der Browser mit — im alten Aufbau waren
   dafür in JEDER der vier Sections rund 60 Zeilen eigenes
   JavaScript nötig.
   ------------------------------------------------------------ */

.ak-route {
  width: min(100% - 36px, 720px);
  max-height: min(90vh, 820px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}

.ak-route::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ak-route-inhalt {
  padding: clamp(20px, 4vw, 34px);
}

.ak-route-oben {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}

.ak-route-hinweis {
  display: inline-flex;
  padding: 7px 11px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(8, 174, 221, 0.12);
  color: var(--blau-text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ak-route h2 {
  font-size: clamp(24px, 4vw, 38px);
}

.ak-route p {
  margin: 10px 0 0;
  color: var(--gedaempft);
  line-height: 1.6;
}

.ak-route-zu {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: #fff;
  color: var(--dunkel);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ak-route-bild {
  display: block;
  width: 100%;
  height: auto;
  margin: 18px 0;
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  background: #f1f3f4;
}

.ak-route-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* Ohne JavaScript öffnet sich kein Dialog. Dann muss der Knopf
   ein echter Link zur Karte sein — sonst führt er ins Leere. */
.kein-js .ak-route-knopf {
  display: none;
}

.ak-route-ersatz {
  display: none;
}

.kein-js .ak-route-ersatz {
  display: inline-flex;
}

/* ---------- Umbrüche für schmale Bildschirme ---------- */

@media (max-width: 990px) {
  .ak-kopfzeile,
  .ak-bildkopf,
  .ak-ruf {
    grid-template-columns: 1fr;
  }

  .ak-ruf-knoepfe {
    justify-content: flex-start;
  }
}

@media (max-width: 650px) {
  .ak-bahn {
    width: min(100% - 22px, var(--breite));
  }

  .ak-bildrahmen,
  .ak-bildrahmen img {
    min-height: 360px;
  }

  .ak-knopfreihe,
  .ak-ruf-knoepfe,
  .ak-route-knoepfe {
    flex-direction: column;
    align-items: stretch;
  }

  .ak-knopf {
    width: 100%;
  }

  .ak-route-knoepfe {
    flex-direction: column-reverse;
  }
}


/* ===== 10-kopf.css ===== */
/* ============================================================
   Kopfbereich — schwebende Pille über der Seite
   ============================================================ */

.ak-kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  /* Der Kopf selbst fängt keine Klicks ab, sonst wäre der
     Streifen neben der Pille eine unsichtbare Sperre über der
     Seite. Nur die Pille und das Klappmenü nehmen Klicks an. */
  pointer-events: none;
}

.ak-kopf-schale {
  width: min(100% - 28px, 1240px);
  margin: 12px auto 0;
  position: relative;
  pointer-events: auto;
  transition: margin-top 0.22s ease;
}

.ak-kopf-pille {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 11px 14px 11px 18px;
  border: 1px solid rgba(17, 20, 23, 0.10);
  border-radius: 999px;
  background:
    radial-gradient(circle at 0% 0%, rgba(8, 174, 221, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(246, 248, 249, 0.88));
  box-shadow: 0 18px 55px rgba(17, 20, 23, 0.14);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: min-height 0.22s ease, box-shadow 0.22s ease;
}

.ak-kopf.ist-gescrollt .ak-kopf-schale {
  margin-top: 8px;
}

.ak-kopf.ist-gescrollt .ak-kopf-pille {
  min-height: 70px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 249, 0.94));
  box-shadow: 0 14px 44px rgba(17, 20, 23, 0.16);
}

.ak-kopf-logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ak-kopf-logo img {
  display: block;
  width: 150px;
  height: auto;
  max-width: 38vw;
}

.ak-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(17, 20, 23, 0.08);
  border-radius: 999px;
  background: rgba(17, 20, 23, 0.045);
}

.ak-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 13px;
  border-radius: 999px;
  color: rgba(21, 25, 29, 0.76);
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.ak-nav a:hover {
  color: var(--text);
  background: rgba(17, 20, 23, 0.07);
}

.ak-nav a[aria-current="page"] {
  color: #061016;
  background: var(--blau);
  box-shadow: 0 12px 34px rgba(8, 174, 221, 0.24);
}

.ak-nav a.ak-nav-extern {
  background: rgba(8, 174, 221, 0.10);
  color: rgba(21, 25, 29, 0.82);
}

.ak-kopf-tat {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ak-kopf-tat .ak-knopf {
  min-height: 48px;
  padding: 13px 18px;
}

/* ---------- Menüknopf und Klappmenü ---------- */

.ak-menue-knopf {
  display: none;
  width: 48px;
  height: 48px;
  justify-self: end;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 20, 23, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  cursor: pointer;
}

.ak-menue-knopf span {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.ak-menue-knopf span i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: var(--text);
  transition: transform 0.24s ease, top 0.24s ease, opacity 0.24s ease;
}

.ak-menue-knopf span i:nth-child(1) { top: 0; }
.ak-menue-knopf span i:nth-child(2) { top: 6px; }
.ak-menue-knopf span i:nth-child(3) { top: 12px; }

.ak-kopf.ist-offen .ak-menue-knopf span i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.ak-kopf.ist-offen .ak-menue-knopf span i:nth-child(2) { opacity: 0; }
.ak-kopf.ist-offen .ak-menue-knopf span i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.ak-menue {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  padding: 12px;
  border: 1px solid rgba(17, 20, 23, 0.10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(8, 174, 221, 0.13), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 248, 0.98));
  box-shadow: 0 24px 80px rgba(17, 20, 23, 0.16);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.ak-menue-inhalt {
  display: grid;
  gap: 6px;
}

.ak-menue a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 50 px hohe Tippfläche — unter 44 px wird es auf dem Handy
     unzuverlässig. */
  min-height: 50px;
  padding: 14px 15px;
  border: 1px solid rgba(17, 20, 23, 0.07);
  border-radius: 18px;
  background: rgba(17, 20, 23, 0.035);
  color: rgba(21, 25, 29, 0.82);
  font-weight: 800;
}

.ak-menue a[aria-current="page"] {
  background: rgba(8, 174, 221, 0.14);
  border-color: rgba(8, 174, 221, 0.3);
  color: var(--text);
}

.ak-menue .ak-knopf {
  margin-top: 6px;
  width: 100%;
  min-height: 52px;
}

/* ---------- Umbruch: ab hier Klappmenü statt Leiste ---------- */

@media (max-width: 1180px) {
  .ak-kopf-pille {
    min-height: 70px;
    padding: 10px 12px 10px 15px;
  }

  .ak-nav,
  .ak-kopf-tat {
    display: none;
  }

  .ak-menue-knopf {
    display: flex;
  }

  .ak-kopf.ist-offen .ak-menue {
    display: block;
    animation: ak-menue-auf 0.24s ease both;
  }

  .ak-kopf-logo img {
    width: 128px;
    max-width: 52vw;
  }
}

@media (max-width: 650px) {
  .ak-kopf-schale {
    width: min(100% - 20px, 1240px);
    margin-top: 8px;
  }

  .ak-kopf-pille {
    border-radius: 26px;
  }

  .ak-menue {
    border-radius: 24px;
  }
}

@keyframes ak-menue-auf {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}


/* ===== 11-fuss.css ===== */
/* ============================================================
   Fußbereich
   ============================================================ */

.ak-fuss {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(8, 174, 221, 0.16), transparent 34%),
    linear-gradient(180deg, var(--soft) 0%, #ffffff 62%, var(--soft) 100%);
}

/* Leuchtender Trennstrich nach oben */
.ak-fuss::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(8, 174, 221, 0.7) 0%,
    var(--blau) 18%,
    #00d3ff 50%,
    var(--blau) 82%,
    rgba(8, 174, 221, 0.7) 100%);
  box-shadow: 0 0 12px rgba(8, 174, 221, 0.9), 0 0 34px rgba(8, 174, 221, 0.5);
}

.ak-fuss-bahn {
  position: relative;
  z-index: 2;
  width: min(100% - 32px, var(--breite));
  margin: 0 auto;
  padding: clamp(52px, 7vw, 84px) 0 24px;
}

.ak-fuss-block {
  position: relative;
  display: grid;
  grid-template-columns: minmax(270px, 1.05fr) repeat(3, minmax(140px, 0.55fr));
  gap: clamp(24px, 5vw, 66px);
  align-items: start;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--linie);
  border-radius: var(--rund-xl);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--schatten);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

.ak-fuss-block::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 174, 221, 0.14), transparent 36%, transparent 72%, rgba(8, 174, 221, 0.08));
}

.ak-fuss-marke,
.ak-fuss-spalte {
  position: relative;
  z-index: 2;
}

.ak-fuss-marke img {
  display: block;
  width: 180px;
  height: auto;
  margin-bottom: 18px;
}

.ak-fuss-marke p {
  max-width: 420px;
  color: var(--gedaempft);
  font-size: 15px;
  line-height: 1.7;
}

.ak-fuss-spalte h2 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ak-fuss-liste {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die Fußzeilen-Links sind echte Navigation, keine Links im
   Fließtext — sie brauchen eine Tippfläche von 44 px. Ohne das
   `inline-flex` waren sie gemessen nur 17 px hoch. */
.ak-fuss-liste a,
.ak-fuss-liste button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gedaempft);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

.ak-fuss-liste span {
  color: var(--gedaempft);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

.ak-fuss-liste {
  gap: 2px;
}

.ak-fuss-liste a:hover,
.ak-fuss-liste button:hover {
  color: var(--blau-text);
}

.ak-fuss-liste button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.ak-fuss-zeiten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0;
  color: var(--gedaempft);
  font-size: 14px;
}

.ak-fuss-zeiten dt {
  font-weight: 800;
  color: var(--text);
}

.ak-fuss-zeiten dd {
  margin: 0;
}

.ak-fuss-marke .ak-knopf {
  margin-top: 20px;
  min-height: 46px;
  padding: 12px 18px;
  font-size: 14px;
}

.ak-fuss-unten {
  padding-top: 26px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(21, 25, 29, 0.72);
}

.ak-fuss-unten a {
  display: inline-block;
  padding: 10px 4px;
  color: rgba(21, 25, 29, 0.72);
  opacity: 0.75;
  transition: opacity 0.6s;
}

.ak-fuss-unten a:hover {
  opacity: 1;
}

@media (max-width: 950px) {
  .ak-fuss-block {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .ak-fuss-bahn {
    width: min(100% - 22px, var(--breite));
    padding-top: 44px;
  }

  .ak-fuss-block {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 28px;
  }

  .ak-fuss-marke img {
    width: 152px;
  }
}


/* ===== 20-start.css ===== */
/* ============================================================
   Startseite
   ============================================================ */

/* ---------- Kopfbild ----------------------------------------
   Im alten Aufbau lief hier ein 65 MB großes Video als
   Hintergrund. Auf dem Handy war das eine halbe Datenflatrate
   für ein paar Sekunden Bewegung. Jetzt steht ein Foto aus dem
   Betrieb (127 KB) an derselben Stelle.
   ------------------------------------------------------------ */

.ak-buehne {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(620px, 88vh, 900px);
  overflow: hidden;
  background: #07090b;
}

.ak-buehne-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Abdunklung. Gemessen, nicht geschätzt: weiße Schrift kommt
   damit auf über 10:1 gegen den Bildhintergrund. */
.ak-buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 6, 8, 0.45) 0%, rgba(4, 6, 8, 0.55) 42%, rgba(4, 6, 8, 0.86) 100%),
    linear-gradient(90deg, rgba(4, 6, 8, 0.72) 0%, rgba(4, 6, 8, 0.34) 62%, rgba(4, 6, 8, 0.5) 100%);
}

.ak-buehne-inhalt {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: calc(var(--kopf-hoehe) + 40px) 0 clamp(42px, 8vw, 88px);
}

.ak-buehne-text {
  width: min(100%, 830px);
}

.ak-buehne h1 {
  color: #fff;
  font-size: clamp(40px, 6.6vw, 88px);
  letter-spacing: -0.058em;
  line-height: 0.98;
}

.ak-buehne .ak-vorspann {
  color: rgba(255, 255, 255, 0.86);
  max-width: 620px;
}

/* ---------- Angebotskarte mit Leuchtring ---------------------
   Der Ring ist ein einzelner drehender Farbkreis, der über eine
   Maske nur auf dem Rand sichtbar wird. Im alten Aufbau lagen
   dafür drei Ebenen übereinander; zwei davon waren unter der
   Karte nicht zu sehen.
   ------------------------------------------------------------ */

@property --ak-winkel {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ak-angebot-huelle {
  --ring: 5px;
  --ecke: 42px;
  position: relative;
  padding: var(--ring);
  border-radius: var(--ecke);
  isolation: isolate;
  box-shadow:
    0 0 42px rgba(8, 174, 221, 0.34),
    0 34px 95px rgba(17, 20, 23, 0.20);
}

.ak-angebot-huelle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: var(--ring);
  border-radius: var(--ecke);
  pointer-events: none;
  background: conic-gradient(from var(--ak-winkel),
    rgba(8, 174, 221, 0.22) 0deg,
    rgba(8, 174, 221, 0.22) 44deg,
    rgba(8, 174, 221, 1) 70deg,
    #ffffff 84deg,
    rgba(8, 174, 221, 1) 98deg,
    rgba(8, 174, 221, 0.25) 134deg,
    rgba(8, 174, 221, 0.22) 192deg,
    rgba(8, 174, 221, 0.9) 250deg,
    rgba(255, 255, 255, 0.9) 268deg,
    rgba(8, 174, 221, 0.5) 292deg,
    rgba(8, 174, 221, 0.22) 360deg);
  box-shadow: 0 0 18px rgba(8, 174, 221, 0.85), 0 0 42px rgba(8, 174, 221, 0.55);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ak-ring 3.2s linear infinite;
}

@keyframes ak-ring {
  to { --ak-winkel: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ak-angebot-huelle::before {
    animation: none;
  }
}

.ak-angebot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.14fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
  padding: clamp(26px, 4.6vw, 54px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--ecke) - 8px);
  background:
    radial-gradient(circle at 0% 0%, rgba(8, 174, 221, 0.16), transparent 32%),
    linear-gradient(135deg, var(--dunkel-2) 0%, var(--dunkel) 48%, #0d1116 100%);
  color: #fff;
  overflow: hidden;
}

.ak-angebot h2 {
  color: #fff;
  font-size: clamp(32px, 5vw, 66px);
  letter-spacing: -0.068em;
  line-height: 0.94;
}

/* `p:not([class])` statt `p`, sonst schlägt diese Regel (0-1-1)
   die Klassen .ak-marke und .ak-preis (0-1-0), die hier drin
   liegen — Media Queries und Klassen erhöhen die Spezifität
   nicht, die Reihenfolge im Stylesheet hilft hier auch nicht,
   weil diese Datei nach den Bausteinen kommt. */
.ak-angebot p:not([class]) {
  margin: 18px 0 0;
  max-width: 600px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.68;
}

.ak-preis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100%, 320px);
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--rund-l);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 48px rgba(0, 0, 0, 0.2);
}

.ak-preis small {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ak-preis strong {
  color: var(--blau);
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.07em;
}

.ak-preis span {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 700;
}

.ak-angebot-bild {
  position: relative;
  min-height: 400px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  background: #20242a;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  overflow: hidden;
}

.ak-angebot-bild img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  display: block;
  filter: saturate(0.94) contrast(1.03) brightness(0.9);
}

/* ---------- Leistungsraster ---------- */

.ak-leistungen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ak-leistungen .ak-karte {
  min-height: 186px;
}

/* ---------- Ablauf ---------- */

.ak-ablauf {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 4vw, 46px);
  align-items: center;
}

.ak-ablauf-bild {
  position: relative;
  min-height: 480px;
  border-radius: var(--rund-xl);
  overflow: hidden;
  background: #dfe5e8;
  box-shadow: var(--schatten);
}

.ak-ablauf-bild img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  display: block;
}

.ak-schritte {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.ak-schritte li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 22px;
  border: 1px solid var(--linie);
  border-radius: 22px;
  background: #fff;
}

.ak-schritte li::before {
  counter-increment: schritt;
  content: "0" counter(schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--dunkel);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.ak-schritte h3 {
  margin: 0 0 6px;
  font-size: 19px;
  letter-spacing: -0.03em;
}

.ak-schritte p {
  color: var(--gedaempft);
  font-size: 15px;
}

/* ---------- Warum-Kacheln ---------- */

.ak-gruende {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ak-gruende .ak-karte strong {
  display: block;
  margin-bottom: 10px;
  color: var(--dunkel);
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.ak-gruende .ak-karte span {
  display: block;
  color: var(--gedaempft);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 990px) {
  .ak-angebot,
  .ak-ablauf {
    grid-template-columns: 1fr;
  }

  .ak-leistungen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-gruende {
    grid-template-columns: 1fr;
  }

  .ak-angebot-bild,
  .ak-angebot-bild img {
    min-height: 320px;
  }
}

@media (max-width: 650px) {
  .ak-buehne {
    min-height: 640px;
  }

  .ak-angebot-huelle {
    --ecke: 32px;
  }

  .ak-angebot {
    padding: 24px;
  }

  .ak-angebot-bild,
  .ak-angebot-bild img {
    min-height: 260px;
  }

  .ak-preis {
    width: 100%;
  }

  .ak-leistungen {
    grid-template-columns: 1fr;
  }

  .ak-ablauf-bild,
  .ak-ablauf-bild img {
    min-height: 340px;
  }

  .ak-schritte li {
    grid-template-columns: 1fr;
  }
}


/* ===== 21-dienstleistungen.css ===== */
/* ============================================================
   Dienstleistungen
   ------------------------------------------------------------
   Im alten Aufbau lagen hier sechs Fotokacheln mit Stockfotos
   von Unsplash — mehrere davon doppelt (das Ölwechsel-Bild war
   dasselbe wie das Angebotsbild, das Klima-Bild dasselbe wie
   das Kopfbild). Fotos gibt es jetzt nur noch dort, wo es
   ECHTE Aufnahmen aus dem Betrieb gibt: Autoglas und Räder.
   Alles andere läuft über Symbole. Lieber ein sauberes Symbol
   als ein beliebiges Stockfoto.
   ============================================================ */

/* ---------- Leistungsliste ---------- */

.ak-dienst-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ak-dienst-karte {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--linie);
  border-radius: var(--rund-l);
  background: #fff;
  box-shadow: 0 16px 44px rgba(17, 20, 23, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.ak-dienst-karte:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 174, 221, 0.34);
  box-shadow: 0 22px 58px rgba(17, 20, 23, 0.08);
}

.ak-dienst-karte h3 {
  margin: 0 0 10px;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.035em;
}

.ak-dienst-karte p {
  color: var(--gedaempft);
  font-size: 15px;
  line-height: 1.62;
}

.ak-dienst-schild {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 30px;
  margin-bottom: 14px;
  padding: 7px 11px;
  border: 1px solid rgba(8, 174, 221, 0.3);
  border-radius: 999px;
  background: rgba(8, 174, 221, 0.1);
  color: var(--blau-text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Karte mit echtem Foto oben */
.ak-dienst-karte--foto {
  padding: 0;
  overflow: hidden;
}

.ak-dienst-karte--foto img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.ak-dienst-karte--foto > div {
  padding: clamp(22px, 3vw, 30px);
}

/* ---------- Kurzliste unten ---------- */

.ak-kurzliste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ak-kurzliste li {
  padding: 18px;
  border: 1px solid var(--linie);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(17, 20, 23, 0.05);
}

.ak-kurzliste strong {
  display: block;
  margin-bottom: 7px;
  color: var(--dunkel);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.ak-kurzliste span {
  display: block;
  color: var(--gedaempft);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 990px) {
  .ak-dienst-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-kurzliste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .ak-dienst-raster,
  .ak-kurzliste {
    grid-template-columns: 1fr;
  }
}


/* ===== 22-ueber-uns.css ===== */
/* ============================================================
   Über uns
   ============================================================ */

.ak-geschichte {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4.8vw, 54px);
  border: 1px solid var(--linie);
  border-radius: var(--rund-xl);
  background: #fff;
  box-shadow: var(--schatten);
}

.ak-geschichte-bild {
  min-height: 420px;
  border-radius: 28px;
  background: #dde4e7;
  overflow: hidden;
}

.ak-geschichte-bild img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.ak-geschichte-text h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.2vw, 50px);
}

/* `p:not([class])`, damit diese Regel (0-1-1) nicht die Klasse
   .ak-marke (0-1-0) überstimmt, die als <p> hier drin liegt. */
.ak-geschichte-text p:not([class]) {
  margin: 0 0 16px;
  color: var(--gedaempft);
  font-size: 16px;
  line-height: 1.75;
}

.ak-geschichte-text p:not([class]):last-child {
  margin-bottom: 0;
}

/* ---------- Zeitleiste ---------- */

.ak-zeitleiste {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.ak-zeitleiste > div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--linie);
  border-radius: var(--rund-l);
  background: #fff;
  box-shadow: 0 16px 44px rgba(17, 20, 23, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.ak-zeitleiste > div:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 174, 221, 0.34);
  box-shadow: 0 22px 54px rgba(17, 20, 23, 0.08);
}

.ak-jahr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  border-radius: var(--rund-m);
  background: var(--blau);
  color: #061016;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.05em;
  box-shadow: 0 16px 40px rgba(8, 174, 221, 0.22);
}

.ak-zeitleiste h3 {
  margin: 0 0 7px;
  font-size: 21px;
  letter-spacing: -0.035em;
}

.ak-zeitleiste p:not([class]) {
  color: var(--gedaempft);
  font-size: 15px;
  line-height: 1.62;
}

/* ---------- Dunkle Familien-Tafel ---------- */

.ak-tafel {
  position: relative;
  padding: clamp(28px, 5vw, 58px);
  border-radius: var(--rund-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(8, 174, 221, 0.18), transparent 30%),
    linear-gradient(135deg, var(--dunkel-2) 0%, var(--dunkel) 52%, #0c1014 100%);
  color: #fff;
  box-shadow: var(--schatten-stark);
  overflow: hidden;
}

.ak-tafel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.ak-tafel-raster {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: clamp(26px, 5vw, 66px);
  align-items: center;
}

.ak-tafel h2 {
  color: #fff;
  font-size: clamp(30px, 4.6vw, 58px);
  letter-spacing: -0.058em;
}

.ak-tafel p:not([class]) {
  margin: 18px 0 0;
  max-width: 740px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.75;
}

.ak-merkliste {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ak-merkliste li {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ak-merkliste strong {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.ak-merkliste span {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- Werte ---------- */

.ak-werte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ak-werte .ak-karte h3 {
  font-size: 22px;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

@media (max-width: 990px) {
  .ak-geschichte,
  .ak-tafel-raster,
  .ak-werte {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .ak-geschichte-bild,
  .ak-geschichte-bild img {
    min-height: 300px;
  }

  .ak-zeitleiste > div {
    grid-template-columns: 1fr;
  }

  .ak-jahr {
    justify-content: flex-start;
    min-height: 54px;
    padding-left: 18px;
  }
}


/* ===== 23-kontakt.css ===== */
/* ============================================================
   Kontakt
   ============================================================ */

.ak-kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 18px;
  align-items: start;
}

.ak-flaeche {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--linie);
  border-radius: var(--rund-xl);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--schatten);
}

.ak-flaeche > h2 {
  margin: 0 0 10px;
  font-size: clamp(23px, 3vw, 32px);
  letter-spacing: -0.045em;
}

.ak-flaeche > p {
  color: var(--gedaempft);
  font-size: 15px;
  line-height: 1.62;
}

/* ---------- Direktkontakt ---------- */

.ak-direkt {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--rund-l);
  background: var(--dunkel);
  color: #fff;
  overflow: hidden;
}

.ak-direkt::before {
  content: "";
  position: absolute;
  inset: -80px auto auto -80px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(8, 174, 221, 0.22);
  pointer-events: none;
}

.ak-direkt-kopf {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ak-direkt-symbol {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(8, 174, 221, 0.16);
  color: var(--blau);
}

.ak-direkt-symbol svg {
  width: 23px;
  height: 23px;
}

.ak-direkt-kopf strong {
  display: block;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.ak-direkt-kopf span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 700;
}

.ak-direkt .ak-knopf {
  position: relative;
  z-index: 2;
  width: 100%;
}

.ak-punkte {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

/* `flex-wrap` ist hier kein Schmuck: ohne es quetscht der
   Flex-Kasten die Beschriftung zusammen, bis „Per E-Mail:“ mitten
   im Wort umbricht. Mit Umbruch rutscht die lange Adresse in die
   nächste Zeile und die Beschriftung bleibt ganz. */
.ak-punkte li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 13px 14px;
  border: 1px solid var(--linie);
  border-radius: 18px;
  background: #fff;
  color: rgba(21, 25, 29, 0.8);
  font-size: 14px;
  font-weight: 700;
}

.ak-punkte li a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ak-punkte li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blau);
}

.ak-anschrift {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
  color: var(--gedaempft);
  font-size: 15px;
  font-style: normal;
  line-height: 1.7;
}

.ak-anschrift strong {
  display: block;
  color: var(--dunkel);
  font-weight: 900;
}

.ak-anschrift a {
  color: var(--blau-text);
  font-weight: 700;
}

.ak-zeiten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 16px;
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--gedaempft);
}

.ak-zeiten dt {
  color: var(--dunkel);
  font-weight: 800;
}

.ak-zeiten dd {
  margin: 0;
}

/* ---------- Formular ---------- */

.ak-formular {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.ak-formular-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ak-feld {
  display: grid;
  gap: 6px;
}

.ak-feld label {
  color: var(--dunkel);
  font-size: 13px;
  font-weight: 800;
}

.ak-feld input,
.ak-feld select,
.ak-feld textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 15px;
  border: 1px solid var(--linie);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ak-feld textarea {
  min-height: 140px;
  resize: vertical;
}

.ak-feld input::placeholder,
.ak-feld textarea::placeholder {
  color: rgba(21, 25, 29, 0.44);
}

.ak-feld input:focus,
.ak-feld select:focus,
.ak-feld textarea:focus {
  border-color: rgba(8, 174, 221, 0.6);
  box-shadow: 0 0 0 4px rgba(8, 174, 221, 0.12);
}

/* Falle für selbsttätige Werbeprogramme — für Menschen unsichtbar,
   aber nicht per display:none (das füllen manche Programme trotzdem). */
.ak-falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ak-einwilligung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 6px;
}

/* 26 px Kästchen plus die anklickbare Beschriftung daneben —
   zusammen deutlich über der Daumenbreite von 44 px. */
.ak-einwilligung input {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  accent-color: var(--blau-tief);
}

.ak-einwilligung label {
  padding: 4px 0;
}

.ak-einwilligung label {
  color: var(--gedaempft);
  font-size: 13.5px;
  line-height: 1.55;
}

.ak-einwilligung a {
  color: var(--blau-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Kleingedrucktes bleibt lesbar: rgba(…,.56) kam gemessen nur
   auf 4,06:1, gefordert sind 4,5:1. */
.ak-formular-fuss {
  margin-top: 6px;
  color: var(--gedaempft);
  font-size: 12.5px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .ak-kontakt-raster {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .ak-flaeche {
    border-radius: 26px;
  }

  .ak-formular-reihe {
    grid-template-columns: 1fr;
  }
}


/* ===== 24-textseiten.css ===== */
/* ============================================================
   Textseiten: Impressum, Datenschutz, Danke, 404, Passwort
   ============================================================ */

.ak-text {
  padding: calc(var(--kopf-hoehe) + var(--kopf-luft)) 0 clamp(58px, 8vw, 100px);
  background:
    radial-gradient(circle at 50% 0%, rgba(8, 174, 221, 0.1), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, var(--soft) 100%);
}

.ak-text-bahn {
  width: min(100% - 32px, 820px);
  margin: 0 auto;
}

.ak-text h1 {
  font-size: clamp(34px, 5.2vw, 60px);
  letter-spacing: -0.055em;
}

.ak-text-block {
  margin-top: clamp(24px, 4vw, 38px);
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--linie);
  border-radius: var(--rund-xl);
  background: #fff;
  box-shadow: var(--schatten);
}

.ak-text-block h2 {
  margin: 34px 0 12px;
  font-size: clamp(19px, 2.2vw, 24px);
  letter-spacing: -0.03em;
}

.ak-text-block h2:first-child {
  margin-top: 0;
}

.ak-text-block h3 {
  margin: 22px 0 8px;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.ak-text-block p,
.ak-text-block li {
  color: var(--gedaempft);
  font-size: 15.5px;
  line-height: 1.75;
}

.ak-text-block p + p {
  margin-top: 12px;
}

.ak-text-block ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.ak-text-block li + li {
  margin-top: 6px;
}

.ak-text-block address {
  margin: 0;
  color: var(--gedaempft);
  font-size: 15.5px;
  font-style: normal;
  line-height: 1.8;
}

.ak-text-block a {
  color: var(--blau-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ak-text-block strong {
  color: var(--dunkel);
}

.ak-text .ak-knopfreihe {
  margin-top: 26px;
}

/* ---------- Seiten ohne Kopf und Fuß: 404, Danke, Passwort ---------- */

.ak-solo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(60px, 9vw, 120px) 18px clamp(40px, 6vw, 70px);
  overflow: hidden;
}

.ak-solo--hell {
  background:
    radial-gradient(circle at 50% 0%, rgba(8, 174, 221, 0.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, var(--soft) 100%);
  color: var(--text);
}

.ak-solo--dunkel {
  background: #07090b;
  color: #fff;
}

.ak-solo-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.ak-solo--dunkel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 6, 8, 0.5) 0%, rgba(4, 6, 8, 0.62) 52%, rgba(4, 6, 8, 0.88) 100%),
    linear-gradient(90deg, rgba(4, 6, 8, 0.74) 0%, rgba(4, 6, 8, 0.4) 52%, rgba(4, 6, 8, 0.74) 100%);
}

.ak-solo-karte {
  position: relative;
  z-index: 3;
  width: min(100%, 820px);
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid rgba(17, 20, 23, 0.1);
  border-radius: clamp(26px, 5vw, 46px);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 30px 90px rgba(17, 20, 23, 0.1);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  text-align: center;
}

.ak-solo-karte img.ak-solo-logo {
  display: block;
  width: min(210px, 60vw);
  height: auto;
  margin: 0 auto clamp(24px, 4vw, 36px);
}

.ak-solo-karte h1 {
  font-size: clamp(34px, 7vw, 72px);
  letter-spacing: -0.06em;
}

.ak-solo-karte > p {
  width: min(100%, 560px);
  margin: 18px auto 0;
  color: var(--gedaempft);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.7;
}

.ak-solo-karte .ak-knopfreihe {
  justify-content: center;
}

.ak-marke-mitte {
  justify-content: center;
}

.ak-solo-fuss {
  margin-top: 28px;
  color: rgba(21, 25, 29, 0.72);
  font-size: 0.875rem;
  line-height: 1.7;
}

.ak-solo-fuss a {
  color: rgba(21, 25, 29, 0.72);
  opacity: 0.75;
  transition: opacity 0.6s;
}

.ak-solo-fuss a:hover {
  opacity: 1;
}

/* ---------- Passwortseite (Vorhang) ---------- */

.ak-vorhang {
  position: relative;
  z-index: 3;
  width: min(100% - 32px, var(--breite));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(28px, 7vw, 86px);
  align-items: center;
}

.ak-vorhang img.ak-vorhang-logo {
  display: block;
  width: min(190px, 62vw);
  height: auto;
  margin-bottom: clamp(22px, 4vw, 40px);
}

.ak-vorhang h1 {
  color: #fff;
  font-size: clamp(38px, 6.6vw, 84px);
  letter-spacing: -0.06em;
}

.ak-vorhang .ak-vorspann {
  color: rgba(255, 255, 255, 0.8);
}

.ak-vorhang-karte {
  position: relative;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rund-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(8, 174, 221, 0.18), transparent 38%),
    rgba(255, 255, 255, 0.1);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}

.ak-vorhang-karte h2 {
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.045em;
}

.ak-vorhang-karte p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.65;
}

.ak-vorhang-form {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.ak-vorhang-form label {
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 800;
}

.ak-vorhang-form input {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
}

.ak-vorhang-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.ak-vorhang-form input:focus {
  border-color: rgba(8, 174, 221, 0.8);
  box-shadow: 0 0 0 4px rgba(8, 174, 221, 0.16);
}

.ak-vorhang-fehler {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 120, 120, 0.4);
  border-radius: 16px;
  background: rgba(255, 90, 90, 0.16);
  color: #fff;
  font-size: 14px;
}

.ak-vorhang-unten {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  line-height: 1.6;
}

.ak-vorhang-gruss {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 4;
  width: min(100% - 32px, 720px);
  text-align: center;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.875rem;
}

.ak-vorhang-gruss a {
  color: rgba(255, 255, 255, 0.74);
  opacity: 0.8;
}

@media (max-width: 900px) {
  .ak-solo {
    align-items: flex-start;
  }

  .ak-vorhang {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 650px) {
  .ak-text-bahn {
    width: min(100% - 22px, 820px);
  }

  .ak-vorhang {
    width: min(100% - 22px, var(--breite));
  }

  .ak-solo {
    padding-bottom: 96px;
  }
}