/* =========================================================================
   Enzian Glanz, Fahrzeugaufbereitung Luzern
   Gestaltung und Umsetzung: Lorino Co.

   Die Farben sind aus dem Markenmaterial ausgemessen, nicht aus einer
   Palette gewaehlt. Grundlage sind das Schluesselbild und die Preisliste
   des Kunden.

   01 Grundwerte
   02 Grundgeruest
   03 Typografie
   04 Zierelemente und Knoepfe
   05 Kopfzeile und Navigation
   06 Hero
   07 Versprechenband
   08 Nummerierte Leistungsliste
   09 (frei, die alte Galerie steht jetzt unter 24)
   10 Preise
   11 Ablauf
   12 Einzugsgebiet
   13 Abschlussband
   14 Kontaktseite
   15 Rechtstexte
   16 Fusszeile
   17 Schwebender Anruf, Mobil
   18 Bewegung und Zugaenglichkeit
   19 Hintergrundmuster
   20 Segmente, Auto LKW Aviation
   21 Abo-Kasten und Abzeichen
   22 Sozialverweise und Google-Bewertung
   23 Ueber mich
   24 Arbeiten, Vorher und Nachher
   ========================================================================= */

/* ------------------------------------------------------ 01 Grundwerte --- */
:root {
  /* gemessen aus dem Schluesselbild und der Preisliste */
  --creme:        #fffbef;
  --creme-2:      #f6eeda;
  --creme-3:      #efe4c9;
  --papier:       #ffffff;

  --marine:       #0a2151;   /* Wortmarke */
  --marine-tief:  #061640;
  --enzian:       #0f3fb0;   /* Bluete */
  --enzian-hell:  #2c66e8;

  --gold:         #a8803a;   /* nur Linien und Ornamente */
  --gold-tief:    #8a6420;   /* Gold, das Text tragen darf */
  --gold-hell:    #e3cb93;   /* Linien auf dunklem Grund */

  --tinte:        #16202f;
  --tinte-leise:  #5a6474;

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --grot:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rand: clamp(1.25rem, 5vw, 3.5rem);
  --spalte: min(1180px, 100% - 2 * var(--rand));

  --luft-s: clamp(2.5rem, 5vw, 4rem);
  --luft-m: clamp(4rem, 8vw, 7rem);
  --luft-l: clamp(5.5rem, 11vw, 9.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--grot);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.wrap { width: var(--spalte); margin-inline: auto; }
.band { padding-block: var(--luft-m); }
.band--gross { padding-block: var(--luft-l); }
.band--creme2 { background: var(--creme-2); }
.band--marine { background: var(--marine); color: var(--creme); }
.band--marine a { color: var(--gold-hell); }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: 0; top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--marine); color: #fff; padding: 0.75rem 1.25rem;
  text-decoration: none; font-weight: 600;
}
.sprung:focus-visible { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--enzian); outline-offset: 3px; }
.band--marine :focus-visible { outline-color: var(--gold-hell); }

/* ------------------------------------------------------ 03 Typografie --- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--marine);
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5rem); }
h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); }
.band--marine h1, .band--marine h2, .band--marine h3 { color: var(--creme); }

p { margin: 0 0 1.15em; max-width: 62ch; }
.lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem); line-height: 1.55; color: #26313f; }
.band--marine .lead { color: #d8dfec; }
.leise { color: var(--tinte-leise); font-size: 0.94rem; }
.band--marine .leise { color: #9fadc4; }

a { color: var(--enzian); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--marine); }

strong, b { font-weight: 650; }

/* Versalsatz der Wortmarke, gesperrt wie im Logo */
.versal {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

.kicker {
  font-family: var(--grot);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.kicker::after { content: ''; flex: 1; height: 1px; background: var(--gold); opacity: 0.45; }
.band--marine .kicker { color: var(--gold-hell); }
.band--marine .kicker::after { background: var(--gold-hell); opacity: 0.35; }

/* --------------------------------------- 04 Zierelemente und Knoepfe --- */
.linie-gold { border: 0; height: 1px; background: var(--gold); opacity: 0.35; margin: 0; }

.knopf {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--grot); font-size: 0.95rem; font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--marine);
  background: var(--marine); color: #fff;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  min-height: 48px;
}
.knopf:hover { background: var(--enzian); border-color: var(--enzian); color: #fff; }

.knopf--geist {
  background: transparent; color: var(--marine); border-color: var(--gold);
}
.knopf--geist:hover { background: var(--marine); border-color: var(--marine); color: #fff; }

.band--marine .knopf { background: var(--creme); border-color: var(--creme); color: var(--marine); }
.band--marine .knopf:hover { background: var(--gold-hell); border-color: var(--gold-hell); }
.band--marine .knopf--geist { background: transparent; color: var(--creme); border-color: var(--gold-hell); }
.band--marine .knopf--geist:hover { background: var(--creme); color: var(--marine); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.tel-gross {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem);
  letter-spacing: 0.02em;
  color: var(--marine); text-decoration: none;
  display: inline-block; line-height: 1.1;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.08em;
}
.tel-gross:hover { color: var(--enzian); border-color: var(--enzian); }
.band--marine .tel-gross { color: var(--creme); border-color: var(--gold-hell); }
.band--marine .tel-gross:hover { color: var(--gold-hell); }

/* ------------------------------------- 05 Kopfzeile und Navigation --- */
.infozeile {
  background: var(--marine-tief); color: #cfd8e8;
  font-size: 0.8rem; letter-spacing: 0.01em;
}
.infozeile .wrap {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-block: 0.55rem;
}
.infozeile .wrap > span {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.8rem;
}
/* Etwas Polster, damit die Nummer auch auf dem Handy sicher zu treffen ist. */
.infozeile a { color: #fff; font-weight: 600; text-decoration: none; display: inline-block; padding: 0.35rem 0; }
.infozeile a:hover { color: var(--gold-hell); }
.infozeile .stern { color: var(--gold-hell); }

.kopf {
  position: sticky; top: 0; z-index: 90;
  background: var(--creme);
  border-bottom: 1px solid rgba(168, 128, 58, 0.3);
}
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.85rem;
}

.marke { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.marke svg, .marke img { width: 38px; height: 38px; flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1; }
.marke-name { font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.2rem); color: var(--marine); }
.marke-zusatz {
  font-family: var(--grot); font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-tief); margin-top: 0.35rem;
}

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  font-size: 0.93rem; font-weight: 550; color: var(--marine);
  text-decoration: none; letter-spacing: 0.01em; padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-color: var(--gold); }
.nav a[aria-current='page'] { border-color: var(--enzian); }

.kopf-tel {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--gold); padding: 0.6rem 1.05rem;
  font-weight: 650; font-size: 0.92rem; color: var(--marine);
  text-decoration: none; white-space: nowrap; min-height: 44px;
}
.kopf-tel:hover { background: var(--marine); color: #fff; border-color: var(--marine); }

.menue-schalter {
  display: none; background: none; border: 1px solid var(--gold);
  width: 46px; height: 46px; cursor: pointer; color: var(--marine);
  align-items: center; justify-content: center;
}

@media (max-width: 900px) {
  .menue-schalter { display: inline-flex; }
  .kopf .nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--creme); border-bottom: 1px solid rgba(168,128,58,0.35);
    padding: 0.5rem var(--rand) 1.25rem;
    display: none;
  }
  .kopf .nav[data-offen='ja'] { display: flex; }
  .kopf .nav a {
    padding: 0.9rem 0; border-bottom: 1px solid rgba(168,128,58,0.2);
    font-size: 1.05rem;
  }
  .kopf-tel span { display: none; }
}

/* Auf sehr schmalen Geraeten passen Marke, Nummer und Menueknopf nicht
   nebeneinander, die Zeile wurde breiter als der Bildschirm. Die Nummer
   steht dort ohnehin im festen Balken am unteren Rand und in der
   Infozeile darueber, also faellt sie hier weg. */
@media (max-width: 400px) {
  .kopf-tel { display: none; }
}

/* ------------------------------------------------------------ 06 Hero --- */
/* Das Titelbild laeuft randlos ueber die ganze Breite und fast ueber die
   ganze Bildschirmhoehe: drei eigene Aufnahmen nebeneinander, der Titel
   liegt darauf. Kein Karussell, nichts zum Wischen. */
.hero {
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(30rem, 78vh, 46rem);
  padding-block: var(--luft-s);
  border-bottom: 1px solid var(--gold);
}
.hero .wrap { position: relative; z-index: 3; }
.hero-text { max-width: 34rem; }

/* Die Buehne liegt hinter allem. Im Quelltext steht sie hinter dem Text,
   damit ein Screenreader zuerst die Ueberschrift liest. */
.hero-buehne {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-template-columns: 1fr 1.2fr 0.85fr;
  background: var(--marine-tief);
}
.hero-buehne figure { margin: 0; overflow: hidden; }
.hero-buehne figure + figure { border-left: 1px solid rgba(227, 203, 147, 0.3); }
.hero-buehne img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Beim E350 steht die Sitzbank etwas links der Mitte. */
.hero-buehne figure:nth-child(3) img { object-position: 44% 50%; }

/* Der Schleier: links dicht genug, dass der Titel steht, nach rechts
   duenner, damit von den Fotos etwas uebrig bleibt. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(97deg,
      rgba(6, 22, 64, 0.88) 0%,
      rgba(6, 22, 64, 0.80) 38%,
      rgba(6, 22, 64, 0.42) 58%,
      rgba(6, 22, 64, 0.22) 100%),
    linear-gradient(to top, rgba(6, 22, 64, 0.5), rgba(6, 22, 64, 0) 40%);
}

/* die Bogenform aus dem Markenmaterial, hier nur noch als Goldlinie */
.hero::before {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  right: -16%; top: -32%; width: 64vw; height: 152%;
  border-radius: 50%;
  border: 1px solid rgba(227, 203, 147, 0.4);
}

.hero h1 { margin-bottom: 0.35em; }
.hero h1 em { font-style: normal; color: var(--gold-hell); }

.hero-klassen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem;
  margin: 0 0 1.5rem; padding: 0; list-style: none;
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem); font-weight: 600;
  color: var(--gold-hell);
}
.hero-klassen li::after { content: '\00b7'; margin-left: 1.1rem; color: var(--gold-hell); opacity: 0.6; }
.hero-klassen li:last-child::after { content: ''; margin: 0; }

/* Schmaler wird es eng fuer drei Spalten: erst faellt der E350 weg, dann
   bleibt die S-Klasse allein stehen. Drei Streifen a 120 Pixel zeigen
   kein Auto mehr, sondern Muster. */
@media (max-width: 900px) {
  .hero-buehne { grid-template-columns: 1fr 1.15fr; }
  .hero-buehne figure:nth-child(3) { display: none; }
}
@media (max-width: 620px) {
  .hero { min-height: clamp(26rem, 66vh, 34rem); }
  .hero-buehne { grid-template-columns: 1fr; }
  .hero-buehne figure:nth-child(1) { display: none; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(6, 22, 64, 0.78) 0%, rgba(6, 22, 64, 0.62) 50%, rgba(6, 22, 64, 0.88) 100%);
  }
  .hero::before { display: none; }
}

/* --------------------------------------------- 07 Versprechenband --- */
.versprechen { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .versprechen { grid-template-columns: 1fr; } }
.versprechen > div {
  padding: clamp(1.75rem, 3vw, 2.6rem) clamp(1.25rem, 2.5vw, 2.4rem);
  border-left: 1px solid rgba(227, 203, 147, 0.28);
}
.versprechen > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 800px) {
  .versprechen > div { border-left: 0; border-top: 1px solid rgba(227,203,147,0.28); padding-inline: 0; }
  .versprechen > div:first-child { border-top: 0; padding-top: 0; }
}
.versprechen .zahl {
  font-family: var(--serif); font-size: 2.6rem; line-height: 1;
  color: var(--gold-hell); display: block; margin-bottom: 0.5rem;
}
.versprechen h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.versprechen p { margin: 0; font-size: 0.95rem; color: #c3cddf; max-width: 34ch; }

/* --------------------------------- 08 Nummerierte Leistungsliste --- */
.leist-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: end; margin-bottom: var(--luft-s);
}
@media (max-width: 800px) { .leist-kopf { grid-template-columns: 1fr; } }

.liste-nummeriert { list-style: none; margin: 0; padding: 0; }
.liste-nummeriert > li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.9rem, 3.5vw, 2.9rem);
  border-top: 1px solid rgba(168, 128, 58, 0.35);
  align-items: start;
}
.liste-nummeriert > li:last-child { border-bottom: 1px solid rgba(168, 128, 58, 0.35); }
@media (max-width: 800px) {
  .liste-nummeriert > li { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .liste-nummeriert > li > .li-extra { grid-column: 2; }
}
.li-nr {
  font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  color: var(--gold); line-height: 1; padding-top: 0.15em;
}
.li-haupt h3 { margin-bottom: 0.45rem; }
.li-haupt p { margin: 0; }
.li-extra { font-size: 0.93rem; color: var(--tinte-leise); }
.li-extra ul { margin: 0; padding-left: 1.1rem; }
.li-extra li { margin-bottom: 0.3rem; }

/* --------------------------------------------------------- 10 Preise --- */
.preis-block { max-width: 820px; }
.preis-liste { list-style: none; margin: 0; padding: 0; }
.preis-liste li {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid rgba(168, 128, 58, 0.3);
}
.preis-liste li:first-child { border-top: 1px solid rgba(168, 128, 58, 0.3); }
.preis-zeile-text { display: flex; flex-direction: column; }
.preis-name { font-size: 1.06rem; color: var(--marine); font-weight: 500; }
.preis-fueller { flex: 1; border-bottom: 1px dotted rgba(168, 128, 58, 0.6); transform: translateY(-0.28em); min-width: 1.5rem; }
.preis-wert {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  color: var(--marine); white-space: nowrap; letter-spacing: 0.01em;
}
.preis-wert small {
  font-family: var(--grot); font-size: 0.68rem; font-weight: 650;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-tief);
  margin-right: 0.4rem;
}
.preis-liste li p { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--tinte-leise); max-width: 46ch; }

.preis-gruppe { margin-top: var(--luft-s); }
.preis-gruppe h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.preis-hinweis {
  margin-top: 1.5rem; padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--gold); background: var(--creme-2);
  font-size: 0.94rem; color: #33404f; max-width: 62ch;
}
.band--creme2 .preis-hinweis { background: var(--creme); }

/* --------------------------------------------------------- 11 Ablauf --- */
.ablauf {
  list-style: none; margin: 0; padding: 0; counter-reset: schritt;
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .ablauf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ablauf { grid-template-columns: 1fr; } }
.ablauf li { counter-increment: schritt; padding-top: 1.4rem; border-top: 2px solid var(--gold); }
.ablauf li::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--serif); font-size: 1.15rem; color: var(--gold-tief);
  letter-spacing: 0.1em; display: block; margin-bottom: 0.7rem;
}
.ablauf h3 { font-size: 1.22rem; margin-bottom: 0.3rem; }
.ablauf p { margin: 0; font-size: 0.94rem; color: var(--tinte-leise); }

/* -------------------------------------------------- 12 Einzugsgebiet --- */
.gebiet-raster {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 860px) { .gebiet-raster { grid-template-columns: 1fr; } }
.orte {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0;
}
.orte li {
  padding: 0.7rem 0.2rem; border-bottom: 1px solid rgba(168, 128, 58, 0.3);
  font-size: 0.96rem; color: var(--marine); display: flex; align-items: baseline; gap: 0.5rem;
}
.orte li::before { content: ''; width: 5px; height: 5px; background: var(--enzian); flex: none; transform: translateY(-2px); }

/* ---------------------------------------------------- 13 Abschluss --- */
.abschluss-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 860px) { .abschluss-raster { grid-template-columns: 1fr; } }

/* ------------------------------------------------- 14 Kontaktseite --- */
.anruf-karte {
  background: var(--marine); color: var(--creme);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; border: 1px solid var(--gold);
}
@media (max-width: 760px) { .anruf-karte { grid-template-columns: 1fr; } }
.anruf-karte h2 { color: var(--creme); margin-bottom: 0.3rem; }
.anruf-karte p { color: #c3cddf; margin: 0; }
/* Die Karte ist dunkel, steht aber in einem hellen Band. Kicker und Nummer
   brauchen deshalb eigene Farben, sonst stehen sie Marine auf Marine. */
.anruf-karte .kicker { color: var(--gold-hell); }
.anruf-karte .kicker::after { background: var(--gold-hell); opacity: 0.35; }
.anruf-karte .tel-gross { color: var(--creme); border-color: var(--gold-hell); }
.anruf-karte .tel-gross:hover { color: var(--gold-hell); border-color: var(--gold-hell); }
.anruf-karte :focus-visible { outline-color: var(--gold-hell); }
/* Wenn die Karte einem Textblock folgt, statt allein im Band zu stehen. */
.anruf-karte--nachtrag { margin-top: var(--luft-s); }

.zeiten { list-style: none; margin: 0; padding: 0; max-width: 480px; }
.zeiten li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.7rem; border-bottom: 1px solid rgba(168, 128, 58, 0.3);
  font-size: 0.97rem;
}
.zeiten li span:first-child { color: var(--marine); font-weight: 550; }

/* --------------------------------------------------- 15 Rechtstexte --- */
.rechtstext { max-width: 68ch; }
.rechtstext h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 2.5rem; }
.rechtstext h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: 0.45rem; }
.rechtstext p, .rechtstext li { max-width: 68ch; }

/* ----------------------------------------------------- 16 Fusszeile --- */
.fuss { background: var(--marine-tief); color: #b9c4d8; padding-block: var(--luft-s) 2rem; }
.fuss a { color: #e8edf6; text-decoration: none; }
.fuss a:hover { color: var(--gold-hell); text-decoration: underline; }
.fuss-raster {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss-raster { grid-template-columns: 1fr; } }
.fuss h2 {
  font-family: var(--grot); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-hell); margin: 0 0 1rem; font-weight: 650;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.55rem; font-size: 0.93rem; }
.fuss .marke-name { color: var(--creme); }
.fuss .marke-zusatz { color: var(--gold-hell); }
.fuss p { font-size: 0.93rem; max-width: 40ch; }
.fuss-schluss {
  margin-top: var(--luft-s); padding-top: 1.5rem;
  border-top: 1px solid rgba(227, 203, 147, 0.2);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.83rem; color: #8fa0bc;
}

/* ------------------------------------------- 17 Schwebender Anruf --- */
.anruf-schwebend {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; align-items: center; justify-content: center; gap: 0.6rem;
  background: var(--marine); color: #fff; text-decoration: none;
  padding: 0.95rem 1rem; font-weight: 650; font-size: 1rem;
  border-top: 1px solid var(--gold);
}
@media (max-width: 700px) {
  .anruf-schwebend { display: flex; }
  body { padding-bottom: 60px; }
}

/* ------------------------------ 18 Bewegung und Zugaenglichkeit --- */
.auf { opacity: 0; transform: translateY(18px); }
.auf.sichtbar { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
html.kein-js .auf { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .auf { opacity: 1; transform: none; }
}

@media print {
  .kopf, .infozeile, .anruf-schwebend, .knopf-reihe, .segmente { display: none; }
  body { background: #fff; padding-bottom: 0; }
  .segment-tafel[hidden] { display: block !important; }
}

/* ------------------------------------------- 19 Hintergrundmuster --- */
/* Der vierstrahlige Stern aus der Infozeile, als ruhiges Raster hinter der
   Seite. Zwei Sterne je Kachel, diagonal versetzt, in Gold bei sehr
   kleiner Deckkraft. Auf Papier und in den dunklen Baendern bleibt er weg. */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%23a8803a' fill-opacity='0.085'%3E%3Cpath d='M16 11.6l1.6 2.8 2.8 1.6-2.8 1.6-1.6 2.8-1.6-2.8-2.8-1.6 2.8-1.6z'/%3E%3Cpath d='M48 43.6l1.6 2.8 2.8 1.6-2.8 1.6-1.6 2.8-1.6-2.8-2.8-1.6 2.8-1.6z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
  background-attachment: fixed;
}
.band--marine, .fuss, .anruf-karte { background-image: none; }
/* Die hellen Baender liegen auf dem Muster, sollen es aber nicht doppeln. */
.band--creme2 { background-color: var(--creme-2); background-image: none; }

/* ------------------------ 20 Segmente, Auto LKW Aviation --- */
.segmente {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--gold); margin-bottom: var(--luft-s);
  background: var(--papier);
}
.segment {
  flex: 1 1 10rem; min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 1.2rem;
  font-family: var(--grot); font-size: 0.95rem; font-weight: 650;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--marine); background: transparent;
  border: 0; border-left: 1px solid rgba(168, 128, 58, 0.45);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.segment:first-child { border-left: 0; }
.segment:hover { background: var(--creme-2); }
.segment[aria-selected='true'] { background: var(--marine); color: var(--creme); }
.segment[aria-selected='true']:hover { background: var(--marine); }
.segment .segment-zusatz {
  font-family: var(--serif); text-transform: none; letter-spacing: 0.01em;
  font-size: 0.95rem; font-weight: 600; color: var(--gold-tief);
}
.segment[aria-selected='true'] .segment-zusatz { color: var(--gold-hell); }
@media (max-width: 560px) {
  .segmente { flex-direction: column; }
  .segment { border-left: 0; border-top: 1px solid rgba(168, 128, 58, 0.45); }
  .segment:first-child { border-top: 0; }
  .segment .segment-zusatz { margin-left: auto; }
}
.segment-tafel:focus-visible { outline-offset: 8px; }
/* Ohne JavaScript stehen alle drei Tafeln untereinander da. */
html.kein-js .segmente { display: none; }
html.kein-js .segment-tafel + .segment-tafel { margin-top: var(--luft-s); }

/* ------------------------------ 21 Abo-Kasten und Abzeichen --- */
.abzeichen {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--enzian); color: #fff;
  font-family: var(--grot); font-size: 0.68rem; font-weight: 650;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; vertical-align: 0.3em; margin-left: 0.7rem;
}
.preis-gruppe--abo {
  background: var(--creme-3);
  border: 1px solid var(--gold);
  border-left: 4px solid var(--enzian);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.band--creme2 .preis-gruppe--abo { background: var(--creme); }
.preis-gruppe--abo .preis-liste li { border-bottom-color: rgba(168, 128, 58, 0.45); }
.preis-gruppe--abo .preis-liste li:first-child { border-top-color: rgba(168, 128, 58, 0.45); }

/* --------------- 22 Sozialverweise und Google-Bewertung --- */
.sozial { display: inline-flex; align-items: center; gap: 0.5rem; }
.sozial a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: inherit; text-decoration: none;
  border: 1px solid currentColor; opacity: 0.85;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.sozial a:hover { opacity: 1; }
.sozial svg { width: 17px; height: 17px; }
.infozeile .sozial a { border-color: rgba(227, 203, 147, 0.5); color: #e8edf6; width: 30px; height: 30px; }
.infozeile .sozial a:hover { background: var(--gold-hell); color: var(--marine-tief); }
.fuss .sozial a { border-color: rgba(227, 203, 147, 0.45); color: #e8edf6; }
.fuss .sozial a:hover { background: var(--gold-hell); color: var(--marine-tief); }

.google-knopf {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1.25rem; min-height: 48px;
  border: 1px solid var(--gold); background: var(--papier);
  color: var(--marine); text-decoration: none;
  font-size: 0.93rem; font-weight: 600; line-height: 1.3;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.google-knopf:hover { background: var(--creme-2); border-color: var(--marine); color: var(--marine); }
.google-knopf .sterne { color: #c8912f; letter-spacing: 0.1em; font-size: 0.95rem; }
.google-knopf b { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.google-knopf span.leise { display: block; font-size: 0.8rem; }
.fuss .google-knopf { background: transparent; border-color: rgba(227, 203, 147, 0.45); color: #e8edf6; width: 100%; padding: 0.8rem 1rem; }
.fuss .google-knopf:hover { background: rgba(227, 203, 147, 0.12); color: #fff; }
.fuss .google-knopf b { color: #fff; }
.fuss .google-knopf span.leise { color: #b9c4d8; }
.band--marine .google-knopf { background: transparent; border-color: var(--gold-hell); color: var(--creme); }
.band--marine .google-knopf:hover { background: rgba(227, 203, 147, 0.14); color: #fff; }

/* ----------------------------------------------- 23 Ueber mich --- */
.person-raster {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 860px) { .person-raster { grid-template-columns: 1fr; } }
.person-bild { position: relative; }
.person-bild img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border: 1px solid rgba(168, 128, 58, 0.55);
  box-shadow: 0 30px 60px -40px rgba(10, 33, 81, 0.6);
  background: var(--creme-2); position: relative; z-index: 1;
}
.person-bild::after {
  content: ''; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid var(--gold); z-index: 0;
}
.person-name {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600; color: var(--marine); margin: 1.6rem 0 0.2rem;
}
.person-rolle {
  font-family: var(--grot); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-tief); margin: 0;
}

/* ------------------------ 24 Arbeiten, Vorher und Nachher --- */
/* Je Fahrzeug eine Karte. Die Bilder liegen uebereinander, sichtbar ist
   immer nur eines. Ohne JavaScript stehen sie untereinander, dann werden
   die Bedienelemente ausgeblendet. */
.werke {
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.werk { margin: 0; }

.werk-buehne {
  position: relative; aspect-ratio: 4 / 5;
  background: var(--marine-tief);
  border: 1px solid rgba(168, 128, 58, 0.55);
  box-shadow: 0 22px 40px -32px rgba(10, 33, 81, 0.7);
  overflow: hidden;
}
.werk--quer .werk-buehne { aspect-ratio: 4 / 3; }
.werk-buehne img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  display: none;
}
.werk-buehne img.sichtbar { display: block; }

.werk-marke {
  position: absolute; left: 0; top: 0; z-index: 2;
  background: var(--marine); color: var(--creme);
  font-family: var(--grot); font-size: 0.64rem; font-weight: 650;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.38rem 0.75rem;
}
.werk-marke[data-phase='nachher'] { background: var(--enzian); }

.werk-zaehler {
  position: absolute; right: 0; top: 0; z-index: 2;
  background: rgba(6, 22, 64, 0.8); color: var(--gold-hell);
  font-family: var(--grot); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; padding: 0.38rem 0.7rem;
}

.werk-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 56px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(6, 22, 64, 0.62); color: var(--creme);
  border: 1px solid rgba(227, 203, 147, 0.35);
  transition: background 0.18s ease;
}
.werk-pfeil:hover { background: var(--enzian); }
.werk-pfeil--zurueck { left: 0; border-left: 0; }
.werk-pfeil--vor { right: 0; border-right: 0; }
.werk-pfeil:focus-visible { outline-color: var(--gold-hell); outline-offset: -4px; }

.werk-phasen { display: flex; gap: 0; margin-top: 0.9rem; border: 1px solid rgba(168, 128, 58, 0.55); }
.werk-phase {
  flex: 1; min-height: 42px; padding: 0.55rem 0.8rem; cursor: pointer;
  background: var(--papier); color: var(--marine);
  border: 0; border-left: 1px solid rgba(168, 128, 58, 0.45);
  font-family: var(--grot); font-size: 0.78rem; font-weight: 650;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease;
}
.werk-phase:first-child { border-left: 0; }
.werk-phase span { font-family: var(--serif); font-size: 0.9rem; letter-spacing: 0; color: var(--gold-tief); margin-left: 0.3rem; }
.werk-phase:hover { background: var(--creme-2); }
.werk-phase[aria-current='true'] { background: var(--marine); color: var(--creme); }
.werk-phase[aria-current='true'] span { color: var(--gold-hell); }

.werk figcaption {
  margin-top: 0.85rem; font-size: 0.88rem; color: var(--tinte-leise); line-height: 1.5;
}
.werk figcaption b {
  display: block; color: var(--marine); font-family: var(--serif);
  font-size: 1.15rem; font-weight: 600; margin-bottom: 0.15rem;
}

html.kein-js .werk-buehne { aspect-ratio: auto; display: grid; gap: 2px; }
html.kein-js .werk-buehne img { position: static; display: block; height: auto; }
html.kein-js .werk-buehne img[data-src] { display: none; }
html.kein-js .werk-pfeil, html.kein-js .werk-zaehler,
html.kein-js .werk-marke, html.kein-js .werk-phasen { display: none; }

/* ---------------------------------------------- 25 Formular --- */
.formular { max-width: 820px; }

.feld-gruppe {
  border: 0; border-top: 1px solid var(--gold);
  margin: 0 0 var(--luft-s); padding: 1.6rem 0 0;
}
.feld-gruppe legend {
  font-family: var(--serif); font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.55rem);
  font-weight: 600; color: var(--marine); padding: 0 1rem 0 0;
}

.feld { margin-bottom: 1.4rem; }
.feld-raster {
  display: grid; gap: 0 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.feld label, .feld-titel {
  display: block; margin-bottom: 0.45rem;
  font-size: 0.88rem; font-weight: 600; color: var(--marine); letter-spacing: 0.01em;
}
.feld .hinweis { font-weight: 400; color: var(--tinte-leise); }

.formular input[type='text'],
.formular input[type='tel'],
.formular input[type='email'],
.formular select,
.formular textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinte);
  background: var(--papier);
  border: 1px solid rgba(168, 128, 58, 0.55);
  padding: 0.75rem 0.9rem; min-height: 48px;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.formular textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.formular select {
  /* Der eigene Pfeil, weil das System-Dreieck nicht zur Seite passt. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a2151' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.6rem;
}
.formular input::placeholder, .formular textarea::placeholder { color: #98a1ae; }
.formular input:focus, .formular select:focus, .formular textarea:focus { border-color: var(--enzian); }

.wahl-reihe { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wahl {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 0; padding: 0.7rem 1.1rem; min-height: 48px;
  background: var(--papier); border: 1px solid rgba(168, 128, 58, 0.55);
  font-size: 0.95rem; font-weight: 500; color: var(--marine); cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.wahl:hover { border-color: var(--marine); }
.wahl input { width: 16px; height: 16px; margin: 0; accent-color: var(--enzian); flex: none; }
.wahl:has(input:checked) { border-color: var(--enzian); background: var(--creme); box-shadow: inset 0 0 0 1px var(--enzian); }

.fehler {
  display: none; margin: 0.4rem 0 0;
  font-size: 0.85rem; font-weight: 600; color: #9c2b1c;
}
.feld.hat-fehler .fehler { display: block; }
.feld.hat-fehler input, .feld.hat-fehler select { border-color: #9c2b1c; }
.feld.hat-fehler .wahl { border-color: #9c2b1c; }

.form-hinweis {
  margin: 0; padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--gold); background: var(--creme);
  font-size: 0.9rem; color: #33404f; max-width: 62ch;
}
.band--creme2 .form-hinweis { background: var(--papier); }

.form-status {
  display: none; margin: 1.4rem 0 0; padding: 1rem 1.2rem;
  border: 1px solid var(--gold); background: var(--papier);
  font-size: 0.95rem; color: var(--marine); max-width: 62ch;
}
.form-status.sichtbar { display: block; }
.formular button[aria-busy='true'] { opacity: 0.7; cursor: progress; }

/* ------------------------------------------- 26 Pakete, Auto --- */
/* Ausnahme vom Grundsatz "kein Kachelbrett": Pakete kann man nur
   vergleichen, wenn die Rahmen gleich sind. Deshalb hier Spalten,
   aber in der Sprache der Seite: Creme, Haarlinie in Gold, kein
   Schatten, kein runder Rahmen. */

.preis-block--breit { max-width: none; }

.paket-gruppe { margin-top: var(--luft-s); }
.paket-gruppe > h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  margin-bottom: 1.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--gold);
}

.pakete {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(168, 128, 58, 0.45);
  border: 1px solid rgba(168, 128, 58, 0.45);
}
.pakete--zwei { grid-template-columns: repeat(2, 1fr); }

.paket {
  background: var(--creme);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex; flex-direction: column;
}
.band--creme2 .paket { background: var(--creme); }

.paket-marke {
  font-family: var(--grot); font-size: 0.7rem; font-weight: 650;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-tief);
  margin: 0 0 0.5rem;
}
.paket h4 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.85rem);
  line-height: 1.1; color: var(--marine);
  margin: 0;
}
.paket-dauer {
  margin: 0.35rem 0 0;
  font-size: 0.88rem; color: var(--tinte-leise);
}
.paket-preis {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem);
  color: var(--marine); letter-spacing: 0.01em;
  margin: 0.9rem 0 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(168, 128, 58, 0.45);
  line-height: 1;
}
.paket-preis small {
  display: block;
  font-family: var(--grot); font-size: 0.68rem; font-weight: 650;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-tief);
  margin-bottom: 0.4rem;
}

.paket-titel {
  font-family: var(--grot); font-size: 0.72rem; font-weight: 650;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--marine);
  margin: 0 0 0.7rem;
}
.paket-titel + .paket-liste { margin-bottom: 1.6rem; }
.paket-liste:last-child { margin-bottom: 0; }

.paket-liste { list-style: none; margin: 0; padding: 0; }
.paket-liste li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.93rem; line-height: 1.45;
  color: var(--tinte);
}
/* Der vierstrahlige Stern der Marke statt eines Hakens im Kreis. */
.paket-liste li::before {
  content: '\2726';
  position: absolute; left: 0; top: 0.05em;
  font-size: 0.72em; color: var(--gold);
}
.paket-liste--zusatz li { color: var(--tinte-leise); }
.paket-liste--zusatz li::before { opacity: 0.55; }

/* Die Zusatzliste rutscht nach unten, damit die Kartenfuesse
   auf einer Linie liegen, auch wenn oben verschieden viel steht. */
.paket .paket-liste + .paket-titel { margin-top: auto; padding-top: 0.4rem; }

@media (max-width: 980px) {
  .pakete { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 660px) {
  .pakete, .pakete--zwei { grid-template-columns: 1fr; }
  .paket .paket-liste + .paket-titel { margin-top: 0; }
}

/* Bild in der LKW- und Aviation-Tafel */
.tafel-bild { margin: 1.8rem 0 2rem; max-width: 820px; }
.tafel-bild img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(168, 128, 58, 0.45);
}
.tafel-bild figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem; color: var(--tinte-leise);
}

/* Mehrere Symbolbilder in einer Tafel: eins gross oben, zwei kleinere
   darunter nebeneinander. Die kleinen laufen ins Breitformat, damit die
   Zeile trotz unterschiedlicher Originale gerade bleibt. */
.tafel-bilder {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem clamp(0.6rem, 1.4vw, 1rem);
  max-width: 820px;
  margin: 1.8rem 0 2rem;
}
.tafel-bilder .tafel-bild { margin: 0; max-width: none; }
.tafel-bilder .tafel-bild--gross { grid-column: 1 / -1; }
.tafel-bilder .tafel-bild:not(.tafel-bild--gross) img {
  aspect-ratio: 3 / 2; object-fit: cover;
}
@media (max-width: 520px) {
  .tafel-bilder { grid-template-columns: 1fr; }
  .tafel-bilder .tafel-bild:not(.tafel-bild--gross) img { aspect-ratio: auto; }
}