/* =============================================================================
   Elbstern Autovermietung · Website
   -----------------------------------------------------------------------------
   Dieselbe Schwarz-Silber-Palette wie die Vermietungssoftware (src/index.css),
   damit Website, Buchungsstrecke und die späteren Belege wie eine Marke wirken.
   Bewusst ohne Framework: Die Seite soll ohne Build auskommen und auf jedem
   Webspace laufen.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Schrift lokal einbinden (Geist, SIL Open Font License 1.1).
   Bewusst NICHT über die Google-Fonts-CDN: Die überträgt die IP-Adresse jedes
   Besuchers an Google, was in Deutschland abmahnfähig ist und eine
   Einwilligung bzw. einen Eintrag in der Datenschutzerklärung nötig machen
   würde. Lokal ausgeliefert entfällt beides – und es lädt schneller.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/geist-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/geist-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/geist-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/geist-800.woff2') format('woff2');
}

:root {
  /* Marke: 50–400 sind die Silbertöne, ab 500 kippt die Skala in Schwarz. */
  --silber-50: #f5f6f8;
  --silber-100: #eaecef;
  --silber-200: #d8dbe0;
  --silber-300: #b9bec6;
  --silber-400: #8d949e;
  --graphit: #22262c;
  --tinte: #0d0f12;
  --tiefschwarz: #07080a;

  --flaeche: #ffffff;
  --flaeche-2: #f4f5f7;
  --flaeche-3: #eef0f2;
  --text: #0d0f12;
  /* 6,3 : 1 auf Weiß, 5,7 : 1 auf --flaeche-2. Der frühere Wert #6d747d lag
     auf der grauen Fläche bei 4,3 : 1 und damit unter der Lesbarkeitsschwelle. */
  --text-leise: #5a616b;
  --linie: #e2e5e9;
  --linie-stark: #c6cad0;

  --schatten-karte: 0 1px 2px rgba(8, 9, 11, 0.06), 0 12px 28px -14px rgba(8, 9, 11, 0.22);
  --schatten-hoch: 0 2px 4px rgba(8, 9, 11, 0.07), 0 18px 40px -18px rgba(8, 9, 11, 0.34);

  /* Wie weit die Suchmaske unten aus dem Hero herausragt. Hero-Polsterung und
     negativer Rand der Box lesen denselben Wert – sonst driften sie auseinander. */
  --suchbox-ueberstand: clamp(3rem, 6vw, 4.5rem);

  --radius: 14px;
  --radius-gross: 20px;
  --breite: 1180px;
  --uebergang: 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
}
h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}
h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

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

.container {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

.eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 0.8rem;
}

.leise {
  color: var(--text-leise);
}

.zentriert {
  text-align: center;
}

/* --------------------------------- Buttons -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--uebergang), color var(--uebergang), transform var(--uebergang),
    box-shadow var(--uebergang);
}

.btn:active {
  transform: scale(0.975);
}

.btn-primaer {
  background: var(--graphit);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(8, 9, 11, 0.55);
}

.btn-primaer:hover {
  background: var(--tinte);
}

.btn-hell {
  background: #fff;
  color: var(--tinte);
}

.btn-hell:hover {
  background: var(--silber-100);
}

.btn-rand {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}

.btn-rand:hover {
  background: var(--flaeche-2);
}

.btn-gross {
  padding: 1.05rem 2rem;
  font-size: 1rem;
}

.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* --------------------------------- Kopfzeile ------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}

.kopf-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
}

.marke {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.marke img {
  height: 42px;
  width: auto;
}

.haupt-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.haupt-nav a:not(.btn) {
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-leise);
  transition: color var(--uebergang), background var(--uebergang);
}

.haupt-nav a:not(.btn):hover {
  color: var(--text);
  background: var(--flaeche-2);
}

.haupt-nav a:not(.btn)[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
}

.kopf .btn {
  padding: 0.62rem 1.25rem;
  font-size: 0.9rem;
}

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text);
}

@media (max-width: 900px) {
  .burger {
    display: block;
    margin-left: auto;
  }

  .haupt-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--linie);
    padding: 0.5rem 1.25rem 1.25rem;
    box-shadow: var(--schatten-karte);
    display: none;
  }

  .haupt-nav.offen {
    display: flex;
  }

  .haupt-nav a {
    padding: 0.85rem 0.5rem;
    border-radius: 0;
    border-bottom: 1px solid var(--linie);
  }

  .kopf .btn {
    margin-top: 0.85rem;
    justify-content: center;
  }
}

/* ----------------------------------- Hero ---------------------------------- */

.hero {
  position: relative;
  background: linear-gradient(140deg, #07080a 0%, #16191d 38%, #2b3037 68%, #565e69 135%);
  color: #fff;
  /* Bewusst KEIN overflow:hidden: Die Suchbox ragt unten aus dem Hero heraus und
     wurde damit abgeschnitten. Die Deko-Ebenen unten liegen ohnehin bei inset:0
     und laufen nicht über. */
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(5rem, 10vw, 7.5rem);
}

/* Feines Punktraster – dieselbe Textur wie die Sidebar der Software. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom right, #000, transparent 68%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 120% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 60%);
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero h1 {
  max-width: 15ch;
}

.hero-text {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
}

.hero .eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

.hero-merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.94rem;
}

.hero-merkmale li::before {
  content: '✓';
  color: var(--silber-300);
  font-weight: 700;
  margin-right: 0.5rem;
}

/* --------------------------- Suchmaske im Hero ----------------------------- */

/* Eigenes Band zwischen Hero und Inhalt: Der negative Rand zieht die Maske nach
   oben über die Hero-Kante, sodass sie auf beiden Flächen liegt. Innerhalb des
   Heros wäre der Rand mit dem Container kollabiert und hätte nichts bewirkt. */
.suchbox-band {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--suchbox-ueberstand));
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.suchbox {
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
  padding: 1.5rem;
}

.such-felder {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr auto;
  gap: 1rem;
  align-items: end;
}

@media (max-width: 860px) {
  .such-felder {
    grid-template-columns: 1fr 1fr;
  }
  .such-felder .feld-aktion {
    grid-column: 1 / -1;
  }
  .such-felder .feld-aktion .btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .such-felder {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------- Formulare ------------------------------- */

.feld {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.feld > label,
.feld-titel {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-leise);
  letter-spacing: 0.01em;
}

.feld input,
.feld select,
.feld textarea {
  font: inherit;
  font-size: 0.97rem;
  color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 0.72rem 0.85rem;
  width: 100%;
  transition: border-color var(--uebergang), box-shadow var(--uebergang), background var(--uebergang);
}

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

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--graphit);
  box-shadow: 0 0 0 4px rgba(8, 9, 11, 0.1);
}

.feld-hinweis {
  font-size: 0.8rem;
  color: var(--text-leise);
}

.feld-fehler {
  font-size: 0.82rem;
  color: #b42318;
}

/* ------------------------------- Abschnitte -------------------------------- */

.abschnitt {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.abschnitt-grau {
  background: var(--flaeche-2);
}

.abschnitt-kopf {
  max-width: 62ch;
  margin-bottom: 2.75rem;
}

.abschnitt-kopf.mitte {
  margin-inline: auto;
  text-align: center;
}

.raster {
  display: grid;
  gap: 1.5rem;
}

/* `min(… , 100%)` statt der nackten Mindestbreite: Auf einem 320px-Gerät bleiben
   nach dem Seitenrand 280px übrig – `minmax(320px, 1fr)` erzwang trotzdem eine
   320px-Spalte, und die Kontaktseite ließ sich seitwärts schieben. */
.raster-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}

.raster-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

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

.karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.karte-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tinte);
  color: #fff;
  margin-bottom: 1.1rem;
}

.karte p:last-child {
  margin-bottom: 0;
}

/* Fahrzeugkarte */
.fahrzeug {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}

.fahrzeug:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--linie-stark);
}

.fahrzeug-bild {
  aspect-ratio: 16 / 10;
  background: var(--flaeche-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--silber-400);
}

.fahrzeug-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fahrzeug-inhalt {
  padding: 1.25rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
}

.fahrzeug-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.fahrzeug h3 {
  margin: 0;
  font-size: 1.05rem;
}

.fahrzeug-daten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.85rem;
  color: var(--text-leise);
  list-style: none;
  padding: 0;
  margin: 0;
}

.preis {
  text-align: right;
  flex-shrink: 0;
}

.preis-betrag {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1.1;
}

.preis-hinweis {
  font-size: 0.75rem;
  color: var(--text-leise);
}

.marke-chip {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-leise);
  letter-spacing: 0.02em;
}

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

.schritte {
  counter-reset: schritt;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.schritte li {
  counter-increment: schritt;
  position: relative;
  padding-top: 3.25rem;
}

.schritte li::before {
  content: counter(schritt);
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--tinte);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.schritte h3 {
  font-size: 1.02rem;
}

.schritte p {
  color: var(--text-leise);
  font-size: 0.94rem;
  margin: 0;
}

/* ----------------------------------- FAQ ----------------------------------- */

.faq-liste {
  display: grid;
  gap: 0.85rem;
  max-width: 820px;
}

details.faq {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
}

details.faq[open] {
  border-color: var(--linie-stark);
  box-shadow: var(--schatten-karte);
}

details.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

details.faq summary::-webkit-details-marker {
  display: none;
}

details.faq summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-leise);
  line-height: 1;
  transition: transform var(--uebergang);
}

details.faq[open] summary::after {
  transform: rotate(45deg);
}

details.faq p {
  margin: 0.85rem 0 0;
  color: var(--text-leise);
}

/* ------------------------------- Handlungsband ----------------------------- */

.band {
  background: var(--tinte);
  color: #fff;
  border-radius: var(--radius-gross);
  padding: clamp(2.25rem, 5vw, 3.25rem);
  text-align: center;
}

.band p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 55ch;
  margin-inline: auto;
}

/* --------------------------------- Fußzeile -------------------------------- */

.fuss {
  background: var(--tiefschwarz);
  color: rgba(255, 255, 255, 0.62);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  font-size: 0.92rem;
}

.fuss-raster {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}

@media (max-width: 860px) {
  .fuss-raster {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .fuss-raster {
    grid-template-columns: 1fr;
  }
}

.fuss img {
  height: 46px;
  width: auto;
  margin-bottom: 1.1rem;
}

.fuss h4 {
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.fuss ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.fuss a {
  text-decoration: none;
  transition: color var(--uebergang);
}

.fuss a:hover {
  color: #fff;
}

.fuss-unten {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
  /* 0.45 ergab auf dem schwarzen Fuß 4,48 : 1 – knapp unter der Schwelle, und
     hier steht mit „Mitarbeiter-Login" ein Link, den man finden können muss. */
  color: rgba(255, 255, 255, 0.62);
}

/* ------------------------------ Inhaltsseiten ------------------------------ */

.seiten-kopf {
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.seiten-kopf p {
  max-width: 62ch;
  color: var(--text-leise);
  font-size: 1.05rem;
  margin: 0;
}

.fliesstext {
  max-width: 75ch;
}

.fliesstext h2 {
  margin-top: 2.5rem;
  font-size: 1.35rem;
}

.fliesstext h3 {
  margin-top: 1.75rem;
  font-size: 1.05rem;
}

.fliesstext ul,
.fliesstext ol {
  padding-left: 1.25rem;
  margin: 0 0 1em;
}

.fliesstext li {
  margin-bottom: 0.4rem;
}

.platzhalter {
  background: #fff8e6;
  border: 1px solid #f0d089;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  color: #7a5a00;
  display: inline-block;
}

.daten-liste {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.5rem;
  margin: 0;
}

.daten-liste dt {
  color: var(--text-leise);
}

.daten-liste dd {
  margin: 0;
  font-weight: 500;
}

/* ------------------------------ Buchungsstrecke ---------------------------- */

.buchung-raster {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}

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

  /* Einspaltig steht die Zusammenfassung als letzter Block unter dem Inhalt.
     `sticky` ließ sie dort beim Weiterscrollen am oberen Rand kleben, ohne dass
     darunter noch etwas käme – sie verdeckte nur die Angaben, die man gerade
     ausfüllt. */
  .zusammenfassung {
    position: static;
  }
}

.zusammenfassung {
  position: sticky;
  top: 90px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--schatten-karte);
}

.summen-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  font-size: 0.92rem;
}

.summen-zeile.gesamt {
  border-top: 1px solid var(--linie);
  margin-top: 0.6rem;
  padding-top: 0.85rem;
  font-size: 1.12rem;
  font-weight: 700;
}

.summen-zeile span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fortschritt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem;
  font-size: 0.88rem;
  color: var(--text-leise);
}

.fortschritt li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fortschritt li::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--linie-stark);
}

.fortschritt li[aria-current='step'] {
  color: var(--text);
  font-weight: 600;
}

.fortschritt li[aria-current='step']::before,
.fortschritt li.erledigt::before {
  background: var(--tinte);
}

.wahl {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  cursor: pointer;
  transition: border-color var(--uebergang), background var(--uebergang);
}

.wahl:hover {
  border-color: var(--linie-stark);
}

.wahl input {
  margin-top: 0.25rem;
  accent-color: var(--tinte);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.wahl-text {
  flex: 1;
  min-width: 0;
}

.wahl-titel {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.meldung {
  border-radius: 12px;
  padding: 0.9rem 1.15rem;
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.meldung-fehler {
  background: #fef3f2;
  border: 1px solid #fda29b;
  color: #b42318;
}

.meldung-info {
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  color: var(--text-leise);
}

.meldung-gut {
  background: #ecfdf3;
  border: 1px solid #a6f4c5;
  color: #067647;
}

.laden {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--linie-stark);
  border-top-color: var(--tinte);
  border-radius: 999px;
  animation: dreh 0.8s linear infinite;
  vertical-align: -3px;
}

@keyframes dreh {
  to {
    transform: rotate(360deg);
  }
}

.versteckt {
  display: none !important;
}

/* Sprungmarke für Tastaturnutzer */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--tinte);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 10px 0;
  z-index: 100;
}

.skip:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================ Metallic-Schicht ==============================
   Elbstern tritt in Silber auf – bis hierher trug das nur die Farbpalette:
   silberne Flächen, aber flach. Diese Schicht macht daraus Metall, und zwar an
   zwei Stellen: bei den Flächen (gebürsteter Verlauf statt Volltonfarbe) und
   bei der Schrift (Chrom-Verlauf durch den Text geclippt).

   Warum die Verläufe harte Kanten haben: Ein weicher Hell-nach-dunkel-Verlauf
   sieht nach Grau aus, nicht nach Metall. Den metallischen Eindruck erzeugt
   erst der schnelle Wechsel zwischen hellen und dunklen Zonen – er liest sich
   als Spiegelung einer Umgebung. Deshalb liegen die Farbstopps dicht.

   Die Schrift-Variante steht komplett in einem @supports-Block: Ohne
   `background-clip: text` (sehr alte Browser) bleibt die normale Textfarbe
   stehen, statt dass transparenter Text auf transparentem Grund verschwindet.
   ========================================================================== */

:root {
  /* Chrom auf dunklem Grund (Hero, Handlungsband). */
  --chrom-hell: linear-gradient(
    176deg,
    #ffffff 0%, #eef1f5 13%, #b9c0ca 33%, #ffffff 46%,
    #d2d8e0 57%, #9aa2ad 73%, #e7ebf0 91%, #ffffff 100%
  );
  /* Chrom auf hellem Grund – dieselbe Kantenfolge, nur in dunklen Werten.
     ⚠️ Der hellste Stopp bestimmt die Lesbarkeit: Hier stand einmal #ffffff
     (Glanzband) und #9aa2ad – auf weißem Grund sind das Kontraste von 1,0 und
     2,6. Die Überschrift bekam dadurch quer durch die Buchstaben unsichtbare
     Streifen und sah aus wie verwischt. Der Bereich endet jetzt bei #5f6771:
     5,7 : 1 selbst auf der grauen Fläche --flaeche-2. Metall lebt vom schnellen
     Wechsel hell/dunkel, nicht von der absoluten Helligkeit – der Eindruck
     bleibt, die Schrift wird lesbar. */
  --chrom-dunkel: linear-gradient(
    176deg,
    #4a515a 0%, #1a1e23 14%, #0d0f12 31%, #545c66 44%,
    #5f6771 47%, #3a4149 51%, #14181c 63%, #434a54 79%,
    #0d0f12 92%, #4a515a 100%
  );
  --metall-hell: linear-gradient(180deg, #fdfdfe 0%, #eef0f3 44%, #dfe3e8 56%, #f6f7f9 100%);
  --metall-dunkel: linear-gradient(180deg, #363c44 0%, #1c2126 46%, #0e1114 58%, #282e35 100%);
  /* Obere Lichtkante + untere Schattenkante: der Trick, der eine Fläche
     gewölbt statt bedruckt wirken lässt. */
  --metall-kante: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(8, 9, 11, 0.14);
  --metall-kante-dunkel: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .metall-text,
  .hero h1,
  .band h2,
  .seiten-kopf h1,
  .abschnitt-kopf h2 {
    background-image: var(--chrom-dunkel);
    /* Der Verlauf wiederholt sich je Zeilenhöhe statt sich über den ganzen
       Block zu spannen. Sonst bekäme bei einer dreizeiligen Überschrift die
       erste Zeile das Licht und die letzte nur noch die dunkelste Zone – auf
       dunklem Grund wird sie dann unlesbar. So glänzt jede Zeile gleich, wie
       bei gefrästen Metallbuchstaben. */
    background-size: 100% 1.15em;
    background-position: 0 0.08em;
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Die Prägung: heller Lichtsaum oben, weicher Schlagschatten darunter.
       text-shadow ginge hier nicht – es läge über der geclippten Fläche. */
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4))
      drop-shadow(0 3px 8px rgba(8, 9, 11, 0.16));
  }

  .metall-text-hell,
  .hero h1,
  .band h2 {
    background-image: var(--chrom-hell);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45))
      drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
  }

  /* Einmalige Glanzfahrt beim Laden – nur über die Hauptüberschrift. Eine
     dauerhaft laufende Animation würde beim Lesen stören. */
  .hero h1 {
    animation: metall-glanz 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }

  @keyframes metall-glanz {
    from { background-position: 0 -1.07em; }
    to   { background-position: 0 0.08em; }
  }
}

/* Gebürstete Textur über dem Hero-Verlauf: sehr feine, sehr schwache Streifen.
   Über 0.05 Deckkraft wirkt es wie ein Druckfehler statt wie Metall.
   Darunter die Hamburger Silhouette – vier Ebenen, von oben nach unten:

     1. die gebürstete Textur,
     2. ein **Schleier**, der nach links hin dicht wird: Dort stehen Überschrift,
        Fließtext und Merkmale. Ohne ihn liefe die Schrift über die Kaikante und
        die Reflexionen im Wasser, und der mühsam hergestellte Kontrast wäre
        wieder dahin. Rechts läuft er fast auf null aus, dort darf das Bild wirken.
     3. das Bild selbst, an *unten rechts* verankert – die Skyline soll auf der
        Kante der Suchbox aufsitzen, nicht in der Mitte schweben,
     4. der ursprüngliche Verlauf als Grund für den Fall, dass das Bild fehlt.

   Die ::before/::after-Ebenen (Punktraster, Lichtkegel) bleiben unberührt; sie
   liegen über allem und geben dem Ganzen weiterhin die metallische Tiefe. */
.hero {
  background-image: repeating-linear-gradient(
      92deg,
      rgba(255, 255, 255, 0.045) 0px,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(
      100deg,
      #07080a 0%,
      rgba(7, 8, 10, 0.94) 24%,
      rgba(7, 8, 10, 0.72) 44%,
      rgba(7, 8, 10, 0.3) 70%,
      rgba(7, 8, 10, 0.12) 100%
    ),
    url('brand/hero-skyline.webp'),
    linear-gradient(140deg, #07080a 0%, #16191d 38%, #2b3037 68%, #565e69 135%);
  background-size: auto, auto, cover, auto;
  background-position: 0 0, 0 0, right bottom, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

/* Tablets hochkant: `cover` würde die Silhouette so weit heranziehen, dass nur noch
   ein Gebäude im Bild steht. Stattdessen etwas herausgezoomt, rechts unten. */
@media (max-width: 820px) {
  .hero {
    background-size: auto, auto, 190% auto, auto;
    background-position: 0 0, 0 0, 72% bottom, 0 0;
  }
}

/* Handys: eigener Bildzuschnitt und ein anders laufender Schutzverlauf.
   Zwei Dinge, die auf dem schmalen Schirm sonst nicht aufgehen:

   1. Das Panorama ist 2:1 und trägt über der Silhouette viel leeren Himmel. Bei
      390px Breite blieb davon ein hineingezoomter Häuserfetzen in der Ecke – kein
      erkennbares Motiv. `hero-skyline-mobil.webp` ist derselbe Blick, aber auf
      Michel bis Elbphilharmonie beschnitten (754×400 statt 1774×887): Bei gleicher
      Breite steht die Silhouette damit rund dreimal so hoch im Bild.

   2. Der Verlauf darüber dunkelt am Rechner **seitlich** ab – Text links auf
      Schwarz, Bild rechts frei. Auf dem Handy stehen Text und Bild untereinander,
      der seitliche Verlauf löschte die Skyline also genau dort, wo sie liegt.
      Hier läuft er deshalb von oben nach unten.

   Das Bild sitzt am Hero-Boden auf: Die Suchbox ragt von unten hinein und schneidet
   das Wasser ab, statt dass das Band mitten in der Fläche hart endet. Der größere
   Fußraum (`padding-bottom`) gibt der Silhouette ihr eigenes Feld unter dem Text. */
@media (max-width: 640px) {
  .hero {
    background-image: repeating-linear-gradient(
        92deg,
        rgba(255, 255, 255, 0.045) 0px,
        rgba(255, 255, 255, 0.045) 1px,
        transparent 1px,
        transparent 3px
      ),
      linear-gradient(
        180deg,
        #07080a 0%,
        rgba(7, 8, 10, 0.72) 30%,
        rgba(7, 8, 10, 0.3) 52%,
        rgba(7, 8, 10, 0) 72%
      ),
      url('brand/hero-skyline-mobil.webp?v=20260919');
    /* **Die Kante löst das Bild selbst auf, nicht die Fläche darunter.**
       `hero-skyline-mobil.webp` läuft über die oberen 300 seiner 550 Pixel in
       Transparenz aus und verschmilzt dadurch mit jedem Untergrund.

       Der Versuch davor, die Fläche auf die gemessene Farbe der Bildoberkante
       (#121212) zu setzen, reichte nicht: Diese Oberkante ist gar nicht
       einheitlich, sondern geht von #181818 links nach #0d0d0b rechts. Gegen eine
       einheitliche Fläche muss das eine Naht geben – und in so dunklen Tönen sieht
       das Auge schon sechs Stufen von 255, auf einem OLED-Schirm erst recht.
       Ein Alphaverlauf im Bild hat dieses Problem prinzipiell nicht.

       ⚠️ Das `?v=` an der Bildadresse gehört dazu: Der Dateiname bleibt gleich,
       also hätten alle, die die Seite schon einmal offen hatten, weiter die alte
       Fassung aus dem Cache bekommen – die versionierte CSS allein hilft dem
       Bild nicht. Bei jeder Neufassung des Bildes mit hochzählen. */
    background-color: #0f1012;
    background-size: auto, auto, 100% auto;
    background-position: 0 0, 0 0, 50% bottom;
    padding-bottom: 11.5rem;
  }
}

/* ------------------------------ Mobile Bedienung ---------------------------- */
/* Gilt für Handy-Breiten; am Rechner ändert sich nichts.

   **16px in Feldern:** Darunter zoomt iOS Safari beim Antippen selbsttätig in die
   Seite hinein. Der Ausschnitt bleibt danach verschoben – wer die Anfrage ausfüllt,
   rückt die Seite zwischen jedem Feld zurecht und bricht im Zweifel ab.
   Die Felder standen auf 0.97rem (≈15.5px) und lagen damit knapp darunter.

   **44px Mindesthöhe:** Fingerbreite statt Mauszeiger-Genauigkeit. */
@media (max-width: 767.98px) {
  .feld input,
  .feld select,
  .feld textarea,
  input[type='text'],
  input[type='email'],
  input[type='tel'],
  input[type='number'],
  input[type='date'],
  input[type='datetime-local'],
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }

  .feld textarea {
    min-height: 120px;
  }

  /* Fußzeilen-Links waren 20px hohe Textzeilen und lagen dicht beieinander –
     mit dem Daumen traf man regelmäßig den Nachbarn. */
  .fuss ul {
    gap: 0.15rem;
  }

  .fuss ul a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .fuss-unten {
    gap: 0.25rem 1.5rem;
  }

  .fuss-unten a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* --------------------------- Metallische Flächen --------------------------- */

.kopf {
  background-image: var(--metall-hell);
  box-shadow: var(--metall-kante);
}

.btn-primaer {
  position: relative;
  overflow: hidden;
  background-image: var(--metall-dunkel);
  box-shadow: var(--metall-kante-dunkel), 0 8px 18px -8px rgba(8, 9, 11, 0.55);
}

.btn-primaer:hover {
  background-image: linear-gradient(180deg, #444b54 0%, #23282e 46%, #14171b 58%, #30363d 100%);
}

.btn-hell {
  background-image: var(--metall-hell);
  box-shadow: var(--metall-kante);
}

.btn-hell:hover {
  background-image: linear-gradient(180deg, #ffffff 0%, #e6e9ed 44%, #d5d9df 56%, #eef0f3 100%);
}

/* Lichtreflex, der beim Überfahren einmal über den Knopf wandert. Das ::after
   liegt schräg und wird von overflow:hidden beschnitten. */
.btn-primaer::after,
.btn-hell::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -30%;
  width: 28%;
  transform: translateX(-320%) rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  pointer-events: none;
}

.btn-hell {
  position: relative;
  overflow: hidden;
}

.btn-hell::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}

.btn-primaer:hover::after,
.btn-hell:hover::after {
  animation: metall-reflex 0.75s ease-out;
}

@keyframes metall-reflex {
  from { transform: translateX(-320%) rotate(18deg); }
  to   { transform: translateX(520%) rotate(18deg); }
}

/* Handlungsband: dieselbe gebürstete Fläche wie der Hero, damit die dunklen
   Zonen der Seite als ein Material gelesen werden. */
.band {
  background-image: repeating-linear-gradient(
      92deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(160deg, #1b1f24 0%, #0d0f12 55%, #24292f 100%);
}

/* Erhabene Kante auf den weißen Flächen – ein Pixel Licht oben genügt. */
.suchbox {
  box-shadow: var(--metall-kante), var(--schatten-hoch);
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 { animation: none; }
  .btn-primaer:hover::after,
  .btn-hell:hover::after { animation: none; }
}