/* ==========================================================================
   Südbaden Digital — Stylesheet
   Gebaut am 06.08.2026. Entscheidungen: Notizen\02 Projekte\
   2026-08-06 — Agentur-Website Neubau.md

   Grundgedanke: dunkler, kinoartiger Einstieg mit Bild und Bewegung —
   danach helle, ruhige Flächen, damit alles mühelos lesbar bleibt.
   Zielgruppe schaut überwiegend auf dem Handy, oft draußen bei Sonne.
   ========================================================================== */

:root {
  /* Dunkel — Vulkangestein, leicht ins Grüne gezogen statt Marineblau */
  --tinte:        #121613;
  --tinte-weich:  #1B211C;
  --stein:        #2E3630;

  /* Hell — Löss, der warme Sandboden am Kaiserstuhl */
  --loess:        #FAF6EF;
  --loess-tief:   #F1E9DB;
  --papier:       #FFFFFF;

  /* Akzent — Löss-Rot / Spätburgunder.
     ACHTUNG, diese Werte sind seit dem 13.08.2026 NICHT MEHR WIRKSAM:
     der Abschnitt „Wald" am Ende der Datei überschreibt sie. Sie stehen
     hier weiter, weil der ganze obere Teil die helle Fassung beschreibt.

     Die urspruengliche Begruendung lautete: bewusst NICHT Gold, weil der
     Wettbewerber aus Teningen Nachtblau mit Gold faehrt. „Wald" arbeitet
     mit Messing und Ocker und geht damit in genau diese Richtung.
     Dieser Widerspruch ist Yanick bekannt und noch nicht entschieden
     (Stand 13.08.2026). Nicht stillschweigend in die eine oder andere
     Richtung aufloesen. */
  --rot:          #9E3823;
  --rot-hell:     #C0492C;
  --rot-blass:    #F3E2DC;
  --ocker:        #C79A4B;

  --text:         #1E2420;
  --text-leise:   #5D6862;
  --linie:        #E2D8C8;
  --linie-dunkel: rgba(255, 255, 255, .14);

  --schrift-titel: "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;
  --schrift-text:  "Source Serif 4", Georgia, serif;
  --schrift-ui:    "Fira Sans", system-ui, -apple-system, sans-serif;

  --bahn: 1180px;
  --rund: 14px;
  --schatten: 0 18px 50px rgba(18, 22, 19, .12);
  --schatten-tief: 0 30px 80px rgba(18, 22, 19, .22);
}

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

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

body {
  margin: 0;
  background: var(--loess);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: clamp(1.0625rem, .98rem + .38vw, 1.1875rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem); }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); }
p  { margin: 0 0 1.1em; }
a  { color: var(--rot); }

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.bahn--schmal { max-width: 780px; }

/* Große Bildschirme --------------------------------------------------------
   Bei 1180 px fester Breite bleiben auf einem 2000-px-Monitor links und
   rechts je rund 400 px leer, und die Überschrift steckt am oberen Ende
   ihrer clamp-Formel fest. Beides wächst deshalb ab 1500 px mit.
   Die Lesebreite der Absätze begrenzt weiterhin max-width in ch, die
   Zeilen werden also nicht zu lang. */
@media (min-width: 1500px) {
  :root { --bahn: 1320px; }
  h1 { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.4rem); }
  h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.5rem); }
  .hero__inhalt { max-width: 1120px; }
}
@media (min-width: 1900px) {
  :root { --bahn: 1440px; }
  h1 { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 6rem); }
  .hero__inhalt { max-width: 1240px; }
}

.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Kopfzeile — liegt über dem Hero und wird beim Scrollen zur hellen Pille
   -------------------------------------------------------------------------- */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: clamp(.75rem, 2vw, 1.25rem) 0;
  transition: padding .3s ease;
}
.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .6rem .6rem .6rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.kopf--fest .kopf__innen {
  background: rgba(250, 246, 239, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--linie);
  box-shadow: 0 10px 34px rgba(18, 22, 19, .13);
}

/* Die Marke ist seit dem 13.08.2026 ein Bild, kein gesetzter Text mehr.
   Das fertige Firmenlogo bringt Bildzeichen und Schriftzug als eine
   Einheit mit; beides nachzubauen waere ein zweites, abweichendes Logo.

   Folge davon: die Marke faerbt sich NICHT mehr mit der Kopfzeile um.
   Das ist hier unkritisch, weil das Logo auf hellem Himmel wie auf
   dunklem Grund traegt (am 13.08.2026 auf beidem geprueft). Wer das
   Logo austauscht, muss das erneut pruefen.

   Der zugaengliche Name steckt jetzt im alt-Text des Bildes und im
   aria-label des Verweises. */
.marke {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}
/* Die Hoehe gilt fuer das GANZE Bild, und das ist absichtlich hoeher als
   das, was man sieht: unten sitzen 27 durchsichtige Zeilen. Sie sorgen
   dafuer, dass die Bildmitte genau auf der Mitte des SCHRIFTZUGS liegt.

   Grund: in der Bildmarke ragt die Tanne nach oben und die Welle nach
   unten ueber den Schriftzug hinaus. Wird das Bild einfach mittig
   ausgerichtet, sitzt der Schriftzug rund 6 Pixel unter der Navigation
   daneben - genau das war am 14.08.2026 der Einwand. Mit dem Unterbau
   stimmt es ohne Verschiebung im Stylesheet.

   Wer das Logo austauscht, muss den Unterbau neu berechnen, sonst
   verrutscht es wieder. Wie das geht, steht in bilder/BILDQUELLEN.txt. */
.marke__bild {
  height: 48px;
  width: auto;
  display: block;
  transition: transform .4s ease;
}
.marke:hover .marke__bild { transform: scale(1.03); }

@media (max-width: 560px) {
  /* Auf schmalen Handys sonst zu wenig Platz fuer das Menuesymbol */
  .marke__bild { height: 40px; }
}

.menue { display: flex; gap: clamp(.6rem, 1.6vw, 1.5rem); align-items: center; }
.menue a {
  font-family: var(--schrift-ui);
  font-size: .95rem;
  text-decoration: none;
  color: rgba(255, 255, 255, .86);
  padding: .4rem .2rem;
  position: relative;
  transition: color .25s ease;
  white-space: nowrap;
}
.menue a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem;
  height: 2px; background: var(--rot-hell);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.menue a:hover::after, .menue a[aria-current="page"]::after { transform: scaleX(1); }
.menue a[aria-current="page"] { color: #fff; }
.kopf--fest .menue a { color: var(--text-leise); }
.kopf--fest .menue a:hover,
.kopf--fest .menue a[aria-current="page"] { color: var(--tinte); }

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

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--schrift-ui);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1),
              box-shadow .22s ease, background .22s ease, color .22s ease;
}
.knopf:hover { transform: translateY(-3px); }
/* Beim Drücken geht der Knopf spürbar nach unten und wird minimal
   kleiner. Ohne diese Rückmeldung wirkt ein Klick auf dem Handy so, als
   wäre nichts passiert. */
.knopf:active { transform: translateY(1px) scale(.97); transition-duration: .08s; }
.karte:active, .stueck:active { transform: translateY(-3px) scale(.995); transition-duration: .1s; }
.preis:active { transform: translateY(-6px) scale(1); transition-duration: .1s; }

.knopf--rot {
  background: var(--rot);
  color: #fff;
  box-shadow: 0 10px 26px rgba(158, 56, 35, .34);
}
.knopf--rot:hover { background: var(--rot-hell); box-shadow: 0 16px 34px rgba(158, 56, 35, .42); }

.knopf--klar {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
  backdrop-filter: blur(6px);
}
.knopf--klar:hover { background: rgba(255, 255, 255, .2); }

.knopf--rand {
  background: transparent;
  border-color: var(--linie);
  color: var(--tinte);
}
.knopf--rand:hover { border-color: var(--rot); color: var(--rot); }

.knopf--klein { padding: .7rem 1.15rem; font-size: .9rem; }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--tinte);
  isolation: isolate;
}
/* Bildgröße nach Bildschirmgröße ------------------------------------------
   Vorher bekam JEDER Besucher die 1920er Fassung, auch am kleinen Laptop.
   Jetzt wird die kleinste ausreichende Datei geladen. Weil ein dunkler
   Schleier über dem Bild liegt und Text darauf steht, fällt eine etwas
   geringere Schärfe nicht auf — Ladezeit dagegen schon, gerade bei den
   Betrieben auf dem Land mit wenig Empfang. */
.hero__bild {
  position: absolute;
  inset: -8% 0 -8% 0;
  background-image: url("bilder/hero-1280.webp");
  background-size: cover;
  background-position: 50% 45%;
  /* Nur leicht beruhigt. Vorher stand hier brightness(.92) zusätzlich zu
     vier Dunkelschichten im Schleier — zusammen war vom Kaiserstuhl kaum
     noch etwas zu erkennen. */
  filter: saturate(.92) contrast(1.03);
  z-index: -2;
}
@media (min-width: 1300px) {
  .hero__bild { background-image: url("bilder/hero-1920.webp"); }
}
@media (min-width: 1900px) {
  .hero__bild { background-image: url("bilder/hero-2560.webp"); }
}

/* Parallax rein in CSS: das Bild wandert langsamer als die Seite.
   Läuft im Browser-Compositor, ohne dass JavaScript beim Scrollen
   überhaupt aufwacht. Browser ohne scroll()-Zeitleiste zeigen das Bild
   einfach still — das ist eine saubere Verschlechterung, kein Fehler. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hero-tiefe {
      from { transform: translate3d(0, 0, 0); }
      to   { transform: translate3d(0, 16%, 0); }
    }
    .hero__bild {
      animation: hero-tiefe linear both;
      animation-timeline: scroll();
      animation-range: 0 100vh;
      will-change: transform;
    }
  }
}
/* Handy: hochkantes Motiv, 800 px breit und damit nur 138 statt 315 KB.
   Auf einem Handy mit dreifacher Pixeldichte ist das rechnerisch weniger
   scharf, sichtbar ist es unter dem Schleier nicht. Die Ladezeit auf
   schlechter Verbindung ist hier wichtiger als Schärfe. */
@media (max-width: 820px) {
  .hero__bild {
    background-image: url("bilder/hero-hoch-800.webp");
    background-position: 50% 38%;
  }
}

/* Farbschleier — abgedunkelt wird die TEXTSEITE, nicht das ganze Bild.
   Vorher lagen vier Dunkelschichten übereinander, darunter eine
   flächendeckende: die Landschaft war praktisch weg. Jetzt trägt ein
   Verlauf von links unten den Text, rechts oben bleibt das Motiv offen.
   Unten bleibt es kräftig, weil dort Überschrift und Knöpfe sitzen. */
.hero__schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* trägt Überschrift, Fließtext und Knöpfe unten */
    linear-gradient(180deg,
      rgba(11, 15, 12, .52) 0%,
      rgba(11, 15, 12, .16) 26%,
      rgba(11, 15, 12, .34) 52%,
      rgba(11, 15, 12, .88) 100%),
    /* nimmt die linke Hälfte zurück, wo der Text steht */
    linear-gradient(100deg,
      rgba(11, 15, 12, .58) 0%,
      rgba(11, 15, 12, .26) 42%,
      rgba(11, 15, 12, 0) 78%),
    /* warmer Ton, damit das Grün nicht kalt kippt */
    radial-gradient(120% 80% at 16% 92%, rgba(158, 56, 35, .3) 0%, transparent 60%);
}
/* Hochkant ist weniger Platz neben dem Text, deshalb dort etwas kräftiger. */
@media (max-width: 820px) {
  .hero__schleier {
    background:
      linear-gradient(180deg,
        rgba(11, 15, 12, .58) 0%,
        rgba(11, 15, 12, .24) 22%,
        rgba(11, 15, 12, .52) 52%,
        rgba(11, 15, 12, .92) 100%),
      radial-gradient(130% 70% at 20% 92%, rgba(158, 56, 35, .3) 0%, transparent 62%);
  }
}

.hero__inhalt {
  position: relative;
  /* Oben nur so viel, dass die Kopfzeile freibleibt. Der Inhalt sitzt
     unten (align-items: flex-end), großer Kopfabstand würde ihn in die
     Mitte schieben und wie ein Layoutfehler aussehen. */
  padding: 6.5rem 0 clamp(3.5rem, 9vh, 7rem);
  color: #fff;
  max-width: 940px;
}
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 em {
  font-style: normal;
  /* Helleres Gold als im übrigen Auftritt. Nachgemessen über dem Foto:
     das normale --ocker kommt nur auf 3,53:1, dieses auf 5,16:1.
     Auf einfarbig dunklem Grund (Fußzeile, Schlussband) bleibt --ocker. */
  color: #E3BE79;
  position: relative;
}
/* Der Strich unter der Zeile setzt voraus, dass sie nicht umbricht.
   Auf schmalen Bildschirmen muss sie umbrechen dürfen — sonst läuft
   der Text rechts aus dem Bild. Deshalb beides erst ab 900 px. */
@media (min-width: 900px) {
  .hero h1 em { white-space: nowrap; }
}
.hero__vor {
  font-family: var(--schrift-ui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Weiß statt Gold: der Vorspann sitzt am höchsten, dort ist der
     Schleier am dünnsten. Gold kam hier nur auf 2,37:1 und war damit
     unter der Barrierefreiheits-Grenze. Weiß erreicht 6,12:1.
     Der Strich davor bleibt golden, der Akzent geht nicht verloren. */
  color: #fff;
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.6rem;
}
.hero__vor::before {
  content: ""; width: 42px; height: 1px; background: var(--ocker); opacity: .7;
}
.hero__text {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  color: rgba(255, 255, 255, .86);
  max-width: 46ch;
  margin-bottom: 2.2rem;
}
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: .9rem; }

/* --------------------------------------------------------------------------
   Seitenkopf der Unterseiten — dieselbe Handschrift, kompakter
   -------------------------------------------------------------------------- */

.seitenkopf {
  position: relative;
  background: var(--tinte);
  color: #fff;
  padding: clamp(9rem, 18vh, 12rem) 0 clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}
/* Das Bild liegt voll da, abgedunkelt wird allein über den Verlauf
   darüber. Vorher stand das Bild auf 30 % Deckkraft UND hatte eine 82
   bis 94 % dunkle Schicht darüber: davon kamen keine 4 % durch, das
   Motiv war nicht mehr zu erkennen. */
/* Der Seitenkopf ist nur ein schmaler Streifen, keine ganze Bildschirmhöhe.
   Deshalb reicht hier die kleinere Fassung; die große erst ab 1300 px. */
.seitenkopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("bilder/hero-1280.webp");
  background-size: cover; background-position: 50% 46%;
  filter: saturate(.88);
}
/* Links unten, wo Überschrift und Text sitzen, bleibt es kräftig.
   Nach rechts oben gibt der Verlauf das Bild frei. */
@media (min-width: 1300px) {
  .seitenkopf::before { background-image: url("bilder/hero-1920.webp"); }
}
.seitenkopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(11, 15, 12, .62) 0%,
      rgba(11, 15, 12, .5) 38%,
      rgba(11, 15, 12, .8) 100%),
    linear-gradient(100deg,
      rgba(11, 15, 12, .5) 0%,
      rgba(11, 15, 12, .22) 52%,
      rgba(11, 15, 12, 0) 84%),
    radial-gradient(100% 90% at 12% 100%, rgba(158, 56, 35, .26) 0%, transparent 60%);
}
.seitenkopf h1 { color: #fff; max-width: 16ch; }
.seitenkopf p {
  color: rgba(255, 255, 255, .82);
  max-width: 52ch;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem);
  margin-bottom: 0;
}
/* .seitenkopf p ist stärker als .krumen und hat Größe und Farbe
   überschrieben: die Brotkrume lief dadurch auf 19,5 px statt 0,8 rem.
   Deshalb hier mitqualifiziert, damit die vorgesehene Größe greift. */
.seitenkopf .krumen,
.krumen {
  font-family: var(--schrift-ui);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ocker);
  margin-bottom: 1.4rem;
}
/* Nachgemessen über dem Bild: bei 60 % Weiß kam die Brotkrume nur auf
   4,09:1 und lag damit unter der Barrierefreiheits-Grenze von 4,5:1.
   Kleine Schrift braucht mehr Kontrast, nicht weniger. */
.krumen a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.krumen a:hover { color: #fff; text-decoration: underline; }

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

.block { padding: clamp(4rem, 10vw, 7.5rem) 0; }
.block--hell  { background: var(--loess); }
.block--tief  { background: var(--loess-tief); }
.block--weiss { background: var(--papier); }
.block--dunkel { background: var(--tinte); color: rgba(255, 255, 255, .82); }
.block--dunkel h2, .block--dunkel h3 { color: #fff; }

.aufhaenger { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.aufhaenger--mitte { margin-inline: auto; text-align: center; }
.aufhaenger p:last-child { margin-bottom: 0; }
.aufhaenger .lead { font-size: 1.15em; color: var(--text-leise); }
.block--dunkel .aufhaenger .lead { color: rgba(255, 255, 255, .74); }

.etikett {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--schrift-ui);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--rot);
  margin-bottom: 1.1rem;
}
.etikett::before { content: ""; width: 26px; height: 2px; background: var(--rot); }
.block--dunkel .etikett { color: var(--ocker); }
.block--dunkel .etikett::before { background: var(--ocker); }
.aufhaenger--mitte .etikett { justify-content: center; }

/* Branchen-Laufband -------------------------------------------------------
   Läuft einzeilig durch und bricht nie um. Zwei identische Listen liegen
   hintereinander; die Spur wandert um genau ihre halbe Breite, danach
   springt sie zurück — dadurch sieht es aus wie ein endloser Ring.
   Die zweite Liste ist für Vorleseprogramme ausgeblendet, sonst würde
   jede Branche doppelt vorgelesen. */

.branchen {
  position: relative;
  background: var(--tinte);
  border-block: 1px solid var(--linie-dunkel);
  padding: 1.5rem 0;
  overflow: hidden;
}
/* Ausblenden an den Rändern, damit kein Wort hart abgeschnitten wirkt.
   Bewusst KEINE Maske auf dem ganzen Band: die hätte auch dessen dunklen
   Hintergrund durchsichtig gemacht, und der helle Seitenhintergrund wäre
   als weißer Schleier an den Rändern durchgeschlagen. Stattdessen zwei
   Verläufe in der Bandfarbe selbst, die über dem Text liegen. */
.branchen::before,
.branchen::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: clamp(40px, 7%, 110px);
  z-index: 2; pointer-events: none;
}
.branchen::before {
  left: 0;
  background: linear-gradient(90deg, var(--tinte) 15%, rgba(18, 22, 19, 0));
}
.branchen::after {
  right: 0;
  background: linear-gradient(270deg, var(--tinte) 15%, rgba(18, 22, 19, 0));
}
.branchen__spur {
  display: flex;
  width: max-content;
  animation: laufband 64s linear infinite;
}
.branchen:hover .branchen__spur,
.branchen:focus-within .branchen__spur { animation-play-state: paused; }

.branchen__liste {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2rem;
  padding: 0 1rem;
  margin: 0;
  list-style: none;
  font-family: var(--schrift-ui);
  font-size: clamp(.9rem, .84rem + .3vw, 1.02rem);
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
}
.branchen__liste li { display: flex; align-items: center; gap: 2rem; }
/* Trennzeichen bewusst zurückhaltend: 21 kräftig rote Punkte in einer
   Zeile wären lauter als die Branchennamen selbst. */
.branchen__liste li::after {
  content: ""; flex: none;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, .3);
}

@keyframes laufband {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .branchen__spur { animation: none; }
}

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

.raster { display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); }
/* Bewusst höchstens ZWEI Spalten, auch auf breiten Bildschirmen.
   Mit auto-fit passten ab etwa 1400 px drei Karten nebeneinander, und
   die vierte stand allein in der zweiten Reihe. Eine einzelne Karte am
   Ende einer Reihe sieht aus wie ein Fehler, nicht wie Gestaltung. */
.raster--2 { grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .raster--2 { grid-template-columns: 1fr 1fr; }
}

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease,
              border-color .3s ease;
}
/* Beim Darüberfahren hebt sich die Karte deutlich an und bekommt oben
   eine rote Kante. Der Schatten allein war zu leise, um als Rückmeldung
   wahrgenommen zu werden. */
.karte { position: relative; overflow: hidden; }
.karte::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--rot);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}
.karte:hover {
  transform: translateY(-7px);
  box-shadow: var(--schatten-tief);
  border-color: #D9CCB6;
}
.karte:hover::before { transform: scaleX(1); }
.karte h3 { margin-bottom: .5rem; }
.karte p:last-child { margin-bottom: 0; }
.block--tief .karte { background: var(--papier); }

/* Treppe — drei Blöcke, die nach rechts versetzt einrücken.
   Ersetzt bewusst die drei gleich großen Kacheln nebeneinander: die
   wirken auf jeder zweiten Website gleich und tragen keine Rangfolge. */

.treppe { display: grid; gap: 0; counter-reset: stufe; }
.treppe__stufe {
  position: relative;
  counter-increment: stufe;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 clamp(1rem, 3vw, 2.25rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
}
/* Trennlinie als Pseudo-Element statt border-top: nur so lässt sie sich
   aufziehen. Ohne Scroll-Zeitleiste steht sie vollständig da. */
.treppe__stufe::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--linie);
  transform-origin: left;
}
.treppe__stufe::before {
  content: counter(stufe, decimal-leading-zero);
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: 1;
  color: var(--rot);
  opacity: .38;
}
.treppe__stufe h3 { margin-bottom: .35rem; }
.treppe__stufe p { margin-bottom: 0; max-width: 60ch; }
/* Abschlusslinie unter der letzten Stufe, damit die Treppe unten
   geschlossen ist. Bleibt statisch, sie gehört zu keiner Stufe. */
.treppe { border-bottom: 1px solid var(--linie); }

@media (min-width: 900px) {
  .treppe__stufe:nth-child(2) { padding-left: 5rem; }
  .treppe__stufe:nth-child(3) { padding-left: 10rem; }
}

/* Gerät — echtes Bildschirmfoto in einem Handy-Rahmen -------------------
   Der Rahmen ist bewusst schlicht: er soll das Bild halten, nicht selbst
   auffallen. Das Bild darin ist eine echte Aufnahme einer fertigen Seite,
   kein aus Kästchen nachgebautes Schein-Handy. */

/* Zwei Geräte: Rechner groß, Handy überlappend davor. Zeigt in einem
   Bild, was der Text daneben behauptet — dieselbe Seite auf jedem
   Bildschirm. Unter 700 px stehen beide untereinander, weil das Handy
   sonst den Rechner überdecken würde. */

.geraete { position: relative; margin: 0; padding-bottom: 3.5rem; }
.geraete__schirm {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-tief);
  background: var(--papier);
}
/* Lichtreflex, läuft einmal über den Bildschirm, während er ins Bild kommt */
.geraete__schirm::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; opacity: 0;
  background: linear-gradient(104deg,
    transparent 34%, rgba(255, 255, 255, .3) 46%,
    rgba(255, 255, 255, .07) 52%, transparent 62%);
}
.geraete__schirm img { width: 100%; height: auto; display: block; }
.geraete__handy {
  position: absolute;
  /* Sitzt in der unteren linken Ecke und überlappt nur den Rand.
     Größer oder weiter innen verdeckt es die Überschrift der Seite,
     die es eigentlich zeigen soll. */
  left: -7%;
  bottom: -.5rem;
  width: 25%;
  min-width: 96px;
}
.geraete__handy .geraet__rahmen { width: 100%; padding: 5px; border-radius: 20px; }
.geraete__handy .geraet__rahmen img { border-radius: 15px; }
.geraete__handy .geraet__rahmen::after { inset: 5px; border-radius: 15px; }
.geraete figcaption {
  font-family: var(--schrift-ui);
  font-size: .92rem;
  color: var(--text-leise);
  margin: 1.1rem 0 0;
  padding-left: 22%;   /* beginnt rechts neben dem überstehenden Handy */
}

@media (max-width: 700px) {
  .geraete { padding-bottom: 0; display: flex; flex-direction: column; gap: 1.25rem; }
  .geraete__handy {
    position: static;
    width: 62%;
    align-self: center;
  }
  .geraete figcaption { padding-left: 0; text-align: center; margin-top: 0; }
}

.geraet { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.geraet__rahmen {
  position: relative;
  width: min(100%, 300px);
  padding: 9px;
  border-radius: 34px;
  background: linear-gradient(160deg, #33393a, #171b1a 55%, #2b3131);
  box-shadow: var(--schatten-tief), inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* Glanz über dem Bildschirm, wie Licht auf echtem Glas. Läuft einmal
   durch, während das Gerät ins Bild kommt — keine Dauerschleife. */
.geraet__rahmen::after {
  content: ""; position: absolute; inset: 9px;
  border-radius: 26px; pointer-events: none;
  background: linear-gradient(104deg,
    transparent 34%, rgba(255, 255, 255, .26) 46%,
    rgba(255, 255, 255, .06) 52%, transparent 62%);
  opacity: 0;
}
.geraet__rahmen img {
  width: 100%; height: auto;
  border-radius: 26px;
  display: block;
}
.geraet figcaption {
  font-family: var(--schrift-ui);
  font-size: .92rem;
  color: var(--text-leise);
  text-align: center;
  margin: 0;
}

/* Bewegung beim Hereinscrollen -------------------------------------------
   Alles unten hängt an der Scroll-Position (animation-timeline: view()),
   nicht an einem Zeitgeber. Dadurch läuft nichts endlos im Hintergrund,
   und ohne JavaScript. Browser, die das nicht können, zeigen den
   Endzustand — also einfach das fertige Bild. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Das Gerät kippt beim Erscheinen aus der Schräge in die Gerade.
       Begründung: es ist der einzige echte Beleg auf der Seite, es darf
       den Blick holen. */
    @keyframes geraet-stellen {
      from { transform: perspective(1400px) rotateY(-15deg) rotateX(7deg) translateY(46px) scale(.93); }
      to   { transform: perspective(1400px) rotateY(0) rotateX(0) translateY(0) scale(1); }
    }
    /* Beide Geräte kippen gemeinsam, nicht jedes für sich — sonst
       liefe das kleine Handy gegen den großen Bildschirm. */
    .geraete {
      animation: geraet-stellen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }

    @keyframes geraet-glanz {
      0%   { opacity: 0; transform: translateX(-115%); }
      45%  { opacity: 1; }
      100% { opacity: 0; transform: translateX(115%); }
    }
    .geraete__schirm::after {
      animation: geraet-glanz linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 55%;
    }

    /* Bildbänder bekommen Tiefe: das Motiv geht beim Vorbeiscrollen
       minimal zurück. Zwei Prozent, mehr wäre Effekthascherei. */
    @keyframes band-tiefe {
      from { transform: scale(1.07); }
      to   { transform: scale(1); }
    }
    .bildband img {
      animation: band-tiefe linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 65%;
    }

    /* Die Trennlinien der Treppe ziehen sich von links auf, eine nach der
       anderen. Begründung: die drei Stufen sind eine Reihenfolge, und die
       Linie führt das Auge in genau dieser Reihenfolge nach unten. */
    @keyframes linie-ziehen {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
    .treppe__stufe::after {
      animation: linie-ziehen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
  }
}

/* Schaufenster — eine gebaute Seite als Beleg, nicht als Dekoration */
.schaufenster__stueck { margin: 0; max-width: 860px; margin-inline: auto; }
.schaufenster figcaption {
  font-family: var(--schrift-ui);
  font-size: .98rem;
  color: var(--text-leise);
  text-align: center;
  margin-top: 1.1rem;
}
.schaufenster figcaption a { color: var(--rot); font-weight: 600; }

/* Schema — gezeichnete Darstellung, kein Foto. Der Bildrand ist
   durchsichtig, die Karten darin tragen ihre eigene Fläche. */
.schema { margin: 0 0 2rem; }
.schema img { width: 100%; height: auto; display: block; }

/* Bildkasten — gerahmtes Bild neben Text, gleiche Rundung wie die Karten */
.bildkasten { margin: 0; }
.bildkasten img {
  width: 100%;
  /* Feste Höhe statt Seitenverhältnis: ein hochkantes Bild würde sonst in
     einer breiten Spalte den Text neben sich erschlagen. */
  height: clamp(300px, 44vh, 500px);
  object-fit: cover;
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}

/* Bildband — durchgehendes Bild zwischen zwei Textabschnitten.
   Bricht lange Textstrecken auf, ohne eine neue Aussage zu behaupten. */

.bildband {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--tinte);
}
.bildband img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .bildband img { aspect-ratio: 16 / 10; }
}

/* Pfeiler — Textblöcke mit Oberkante statt Kastenrahmen */
.pfeiler {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.pfeiler > * { border-top: 2px solid var(--rot); padding-top: 1.25rem; }
.pfeiler h3 { margin-bottom: .4rem; }
.pfeiler p { margin-bottom: 0; }

/* Fragen — aufklappbar, ohne JavaScript (natives <details>) */
.fragen { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem);
  line-height: 1.25;
  color: var(--tinte);
  transition: color .2s ease;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--rot); }
.frage summary::after {
  content: ""; flex: none;
  width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E3823' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.frage[open] summary::after { transform: rotate(135deg); }
.frage__text { padding-bottom: 1.5rem; max-width: 68ch; }
.frage__text p:last-child { margin-bottom: 0; }

/* Häkchenlisten ---------------------------------------------------------- */

.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.haken li {
  display: flex; gap: .75rem; align-items: flex-start;
  font-family: var(--schrift-ui);
  font-size: .98rem; line-height: 1.5;
}
.haken li::before {
  content: ""; flex: none;
  width: 20px; height: 20px; margin-top: .16rem;
  border-radius: 50%;
  background: var(--rot-blass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E3823' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.haken--nein li::before {
  background: #EFE9E0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6862' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.block--dunkel .haken li::before {
  background-color: rgba(199, 154, 75, .18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C79A4B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Bild neben Text -------------------------------------------------------- */

.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.duo--gedreht > *:first-child { order: 2; }
@media (max-width: 780px) { .duo--gedreht > *:first-child { order: 0; } }

/* Preise ----------------------------------------------------------------- */

.preise { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.preis {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 18px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
/* Die Pakete heben sich stärker an als normale Karten: hier fällt die
   Entscheidung, deshalb darf die Rückmeldung deutlicher sein. Der Preis
   selbst wächst minimal mit, das lenkt den Blick auf die Zahl. */
.preis:hover {
  transform: translateY(-10px) scale(1.012);
  box-shadow: var(--schatten-tief);
  border-color: var(--rot);
  z-index: 2;
}
.preis__zahl { transition: transform .45s cubic-bezier(.2, .8, .3, 1); transform-origin: left; }
.preis:hover .preis__zahl { transform: scale(1.06); }
.preis--stark:hover { border-color: var(--ocker); }
.preis--stark {
  background: var(--tinte);
  border-color: var(--tinte);
  color: rgba(255, 255, 255, .8);
  box-shadow: var(--schatten-tief);
  position: relative;
}
.preis--stark h3 { color: #fff; }
.preis__art {
  font-family: var(--schrift-ui);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--rot); margin-bottom: .9rem;
}
.preis--stark .preis__art { color: var(--ocker); }
.preis__zahl {
  font-family: var(--schrift-titel); font-weight: 700;
  font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
  line-height: 1; color: var(--tinte);
  display: flex; align-items: baseline; gap: .5rem;
  margin-bottom: 0;
}
.preis--stark .preis__zahl { color: #fff; }
.preis__zahl small {
  font-family: var(--schrift-ui); font-size: .95rem; font-weight: 400;
  color: var(--text-leise);
}
.preis--stark .preis__zahl small { color: rgba(255,255,255,.6); }
.preis__lauf {
  font-family: var(--schrift-ui); font-size: .92rem;
  color: var(--text-leise); margin: .7rem 0 1.5rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--linie);
}
.preis--stark .preis__lauf { color: rgba(255,255,255,.66); border-color: var(--linie-dunkel); }
.preis .haken { margin-bottom: 2rem; }
.preis .knopf { margin-top: auto; justify-content: center; }
.preis__fahne {
  position: absolute; top: -.85rem; right: 1.75rem;
  background: var(--rot); color: #fff;
  font-family: var(--schrift-ui); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: 999px;
}

/* Beispiele-Galerie ------------------------------------------------------ */

.galerie { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* Fuer Galerien mit nur einer Kachel: sonst zieht sie sich ueber die ganze
   Breite und wirkt groesser als die mehrspaltigen Galerien darueber. Die
   Obergrenze entspricht der Breite einer Kachel im zweispaltigen Raster. */
.galerie--einzeln { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 580px)); }
.stueck {
  border: 1px solid var(--linie);
  border-radius: 18px;
  background: var(--papier);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.stueck:hover { transform: translateY(-5px); box-shadow: var(--schatten); }
.stueck__bild {
  aspect-ratio: 16 / 10;
  background: var(--loess-tief);
  display: grid; place-items: center;
  border-bottom: 1px solid var(--linie);
  position: relative;
}
/* Vorschaubild einer Kachel. Fuellt das 16:10-Feld ganz aus, damit
   Bildkacheln und Platzhalterkacheln gleich hoch bleiben. */
.stueck__bild img { width: 100%; height: 100%; object-fit: cover; }

.stueck__text { padding: 1.5rem 1.65rem 1.75rem; }
.stueck__text h3 { margin-bottom: .3rem; }
.stueck__meta {
  font-family: var(--schrift-ui); font-size: .86rem;
  color: var(--rot); margin-bottom: .8rem;
}
.stueck__pfeil {
  font-family: var(--schrift-ui); font-size: .92rem; font-weight: 600;
  color: var(--tinte); display: inline-flex; align-items: center; gap: .4rem;
}
.stueck:hover .stueck__pfeil { color: var(--rot); }

/* Platzhalter — sollen stören, damit nichts versehentlich online geht ---- */

.platzhalter {
  border: 2px dashed var(--rot);
  background: repeating-linear-gradient(-45deg,
    rgba(158, 56, 35, .05) 0 12px, transparent 12px 24px);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  font-family: var(--schrift-ui);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--rot);
}
.platzhalter strong { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .3rem; }
.platzhalter--fläche { display: grid; place-items: center; text-align: center; min-height: 260px; }
/* Platzhalter, der eine ganze Bildfläche einnimmt (Galerie, Fotoplätze) */
.stueck__bild .platzhalter { position: absolute; inset: 1rem; min-height: 0; }
.block--dunkel .platzhalter, .seitenkopf .platzhalter, .fuss .platzhalter {
  border-color: var(--ocker); color: var(--ocker);
  background: repeating-linear-gradient(-45deg, rgba(199,154,75,.1) 0 12px, transparent 12px 24px);
}

.warnkasten {
  border-left: 4px solid var(--rot);
  background: var(--rot-blass);
  padding: 1.25rem 1.5rem;
  border-radius: 0 12px 12px 0;
  margin-bottom: 2.5rem;
  font-family: var(--schrift-ui);
  font-size: .95rem;
}
.warnkasten p:last-child { margin-bottom: 0; }

/* Neutrale Fassung: setzt einen Abschnitt vom Fließtext ab, ohne wie eine
   Warnung auszusehen. Gebraucht für den Hinweis auf das Widerspruchsrecht,
   den Art. 21 Abs. 4 DSGVO "getrennt von anderen Informationen" verlangt. */
.warnkasten--neutral {
  border-left-color: var(--tinte);
  background: var(--loess-tief);
  font-family: var(--schrift-text);
  font-size: 1em;
  margin-block: 2.5rem;
}
.warnkasten--neutral h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }

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

.schritte {
  --abstand: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--abstand);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  position: relative;
}
/* Verbindungslinie von Ziffer zu Ziffer: macht sichtbar, dass die Schritte
   aufeinander folgen, statt drei gleichwertige Kacheln zu sein.
   Die Linie hängt am Schritt, nicht am Behälter — sonst liefe sie hinter
   dem letzten Kreis weiter ins Leere. Der nächste Kreis ist deckend und
   verdeckt den Überstand. Nur ab 820 px, darunter stehen sie untereinander. */
/* Die Linie endet exakt in der Mitte der letzten Ziffer, nicht am
   Rand des Rasters. Spaltenbreite bei drei Spalten ist
   (100% - 2 Abstände) / 3; der letzte Kreismittelpunkt liegt eine halbe
   Kreisbreite (26px) darin. Vorher lief die Linie ins Leere weiter. */
@media (min-width: 820px) {
  .schritte::before {
    content: ""; position: absolute;
    top: 25px; height: 2px;
    left: 26px;
    right: calc((100% - 2 * var(--abstand)) / 3 - 26px);
    background: var(--linie);
  }
}
.schritt__zahl {
  position: relative;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--schrift-titel); font-weight: 700; font-size: 1.4rem;
  color: var(--rot); background: var(--loess);
  border: 2px solid var(--rot);
  margin-bottom: 1.2rem;
}
.block--tief .schritt__zahl { background: var(--loess-tief); }
.block--weiss .schritt__zahl { background: var(--papier); }
.schritte article p { max-width: 38ch; margin-bottom: 0; }

/* Kontakt ---------------------------------------------------------------- */

.draht {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.draht__feld {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  text-decoration: none; color: inherit;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.draht__feld:hover { border-color: var(--rot); transform: translateY(-3px); box-shadow: var(--schatten); }
.draht__symbol {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--rot-blass);
  color: var(--rot);
  display: grid; place-items: center;
}
.draht__feld:hover .draht__symbol { background: var(--rot); color: #fff; }
.draht__feld .draht__art {
  font-family: var(--schrift-ui); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise);
}
.draht__wert { font-family: var(--schrift-ui); font-weight: 600; font-size: 1.05rem; color: var(--tinte); }

.schlussband {
  background: var(--rot);
  color: #fff;
  padding: clamp(3.5rem, 8vw, 5.5rem) 0;
  text-align: center;
}
.schlussband h2 { color: #fff; }
.schlussband p { color: rgba(255, 255, 255, .88); max-width: 52ch; margin-inline: auto; }
.schlussband .knopf--klar { border-color: rgba(255,255,255,.6); }
.schlussband__knoepfe { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2rem; }

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

.fuss {
  background: var(--tinte);
  color: rgba(255, 255, 255, .66);
  padding: clamp(3rem, 7vw, 4.5rem) 0 2rem;
  font-family: var(--schrift-ui);
  font-size: .94rem;
}
.fuss__oben {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linie-dunkel);
}
.fuss h4 {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ocker); margin-bottom: 1.1rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.fuss a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss__marke {
  font-family: var(--schrift-titel); font-weight: 700; font-size: 1.35rem;
  color: #fff; margin-bottom: .8rem;
}
.fuss__marke em { font-style: normal; color: var(--ocker); }
.fuss__unten {
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem;
  justify-content: space-between;
  font-size: .86rem; color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Kontaktleiste am unteren Rand — nur auf dem Handy.
   Entscheidung 06.08.2026: „Der Weg zur Kontaktaufnahme immer präsent."
   -------------------------------------------------------------------------- */

.leiste {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  display: none;
  gap: .6rem;
  padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(250, 246, 239, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linie);
}
.leiste .knopf { flex: 1; justify-content: center; padding: .85rem 1rem; }
@media (max-width: 720px) {
  .leiste { display: flex; }
  body { padding-bottom: 4.6rem; }
}

/* Menü auf dem Handy ------------------------------------------------------ */

.menue__schalter {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  place-items: center;
}
.kopf--fest .menue__schalter { border-color: var(--linie); background: transparent; color: var(--tinte); }

@media (max-width: 900px) {
  .kopf__innen { padding-right: .5rem; }
  .menue__schalter { display: grid; }
  .menue {
    position: fixed; inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--tinte);
    padding: 6rem 1.5rem 2rem;
    border-radius: 0 0 22px 22px;
    transform: translateY(-102%);
    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
    z-index: -1;
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
  }
  .menue.offen { transform: translateY(0); }
  .menue a, .kopf--fest .menue a {
    color: rgba(255,255,255,.86);
    font-size: 1.2rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--linie-dunkel);
  }
  .menue a::after { display: none; }
  .menue a[aria-current="page"], .kopf--fest .menue a[aria-current="page"] { color: var(--ocker); }
  .kopf__knopf { display: none; }
}

/* --------------------------------------------------------------------------
   Bewegung — kräftig im Hero, danach nur ruhiges Einblenden.
   Versteckt wird ausschließlich, wenn JavaScript nachweislich läuft
   (Klasse "js" auf <html>), sonst stünde die Seite ohne Skript leer da.
   -------------------------------------------------------------------------- */

/* WICHTIG: Hier wird "translate" benutzt, NICHT "transform".
   Grund: Karten und Pakete tragen selbst die Klasse .auf. Solange das
   Einblenden über transform lief, überschrieb ".auf.da { transform:
   none }" jede :hover-Regel, die weiter oben im Stylesheet steht. Die
   Karten hoben sich dadurch beim Darüberfahren überhaupt nicht an.
   "translate" ist eine eigene Eigenschaft und kommt transform nicht in
   die Quere. Nicht zurück auf transform ändern. */
.js .auf { opacity: 0; translate: 0 26px; }
.auf {
  transition: opacity .8s cubic-bezier(.2, .8, .3, 1),
              translate .8s cubic-bezier(.2, .8, .3, 1);
}
.auf.da { opacity: 1; translate: none; }

/* Versetztes Einblenden ---------------------------------------------------
   Elemente, die nebeneinander stehen, kommen nacheinander statt alle auf
   einmal. Die Verzögerung setzt skript.js als --stufe je Element; hier
   steht nur, wie daraus eine Wartezeit wird. Höchstens sechs Stufen,
   sonst wartet man beim letzten Element zu lange. */
.js .auf { transition-delay: calc(var(--stufe, 0) * 90ms); }

/* Seitenkopf der Unterseiten: fliegt beim Öffnen der Seite ein, nicht
   erst beim Scrollen. Die Reihenfolge ist Brotkrume, Überschrift, Text. */
.js .seitenkopf .krumen,
.js .seitenkopf h1,
.js .seitenkopf p:not(.krumen) {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .8s cubic-bezier(.2, .8, .3, 1),
              translate .8s cubic-bezier(.2, .8, .3, 1);
}
.js .seitenkopf h1 { transition-delay: .1s; }
.js .seitenkopf p:not(.krumen) { transition-delay: .2s; }
.js .seitenkopf.da .krumen,
.js .seitenkopf.da h1,
.js .seitenkopf.da p:not(.krumen) { opacity: 1; translate: none; }

.js .hero__stufe { opacity: 0; translate: 0 30px; }
.hero__stufe { transition: opacity .9s cubic-bezier(.2,.8,.3,1), translate .9s cubic-bezier(.2,.8,.3,1); }
.hero__stufe.da { opacity: 1; translate: none; }

/* Enthüllungsstrich unter der Hero-Überschrift — nur, wenn die Zeile
   garantiert nicht umbricht (siehe Medienabfrage weiter oben). */
@media (min-width: 900px) {
  .hero h1 em::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .06em;
    height: .07em; background: var(--rot-hell);
    transform: scaleX(0); transform-origin: left;
    transition: transform 1s cubic-bezier(.2,.8,.3,1) .5s;
  }
  .hero h1.da em::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .js .auf, .js .hero__stufe { opacity: 1; translate: none; }
  .js .seitenkopf .krumen, .js .seitenkopf h1, .js .seitenkopf p:not(.krumen) {
    opacity: 1; translate: none;
  }
  .hero__bild { transform: none !important; }
  .hero h1 em::after { transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Fokus sichtbar halten — Tastaturbedienung ------------------------------ */
:focus-visible {
  outline: 3px solid var(--rot-hell);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible, .kopf :focus-visible, .fuss :focus-visible { outline-color: var(--ocker); }


/* ==========================================================================
   FARBWELT „Wald" — gewaehlt von Yanick am 13.08.2026, live seit 13.08.2026

   Tannengruen und Messing. Aus vier Vorschlaegen (Loess, Wald, Schiefer,
   Rebe) ausgewaehlt, siehe farbwahl.html. Ueberschreibt ab hier die helle
   Loess-Farbwelt oben im Dokument durch reine Kaskaden-Reihenfolge: bei
   gleicher Spezifitaet gewinnt die spaeter stehende Regel. Wer diese
   Grenze veraendert, muss die Kontraste unten neu gegenrechnen.

   Vier klar unterscheidbare Flaechen, von tief nach hell:
     #101613  tiefste Flaeche   Hero, Fusszeile, „Was wir nicht machen"
     #18211C  Grundton          die Seite als Ganzes
     #212C25  Abschnitt         abgesetzte Bloecke
     #2C382F  Karte             alles, was schweben soll

   Grundregel: Dunkle Flaechen tragen einen Farbton, sie sind nicht
   neutrales Schwarz. Alle vier Stufen sind Tannengruen, kein Grau.

   Alle Kontraste am 13.08.2026 gegen ALLE vier Flaechen nachgerechnet,
   schlechtester Wert 5,57:1 (leiser Text auf der Karte). Grenze 4,5:1.
   Wer hier Farben aendert, muss neu rechnen.

   War bis zum 13.08.2026 eine eigene Datei (stil-wald.css), die stil.css
   per @import nachlud. Zusammengefuehrt, weil verschachteltes @import
   ueber file:// in mindestens einem Pruefwerkzeug nicht rendert -- echte
   Browser haetten damit kein Problem gehabt, aber eine Datei ist robuster
   und braucht eine Anfrage weniger.
   ========================================================================== */

:root {
  /* --- Die vier Flächen ------------------------------------------------ */
  --tinte:        #101613;
  --tinte-weich:  #141C18;
  --stein:        #212C25;

  --loess:        #18211C;
  --loess-tief:   #212C25;
  --papier:       #2C382F;

  /* --- Schrift ---------------------------------------------------------- */
  /* Kein reines Weiß: das flimmert auf dunklem Grund. */
  --text:         #E8EFE7;   /* 10,46:1 selbst auf der hellsten Fläche */
  --text-leise:   #A6B2A6;   /*  5,57:1 auf der Karte */

  --linie:        #3A4840;
  --linie-dunkel: rgba(255, 255, 255, .1);

  /* --- Akzente ----------------------------------------------------------
     WICHTIG: Der warme Akzent hat ZWEI Rollen mit zwei Werten.
     Als Schrift auf dunklem Grund muss er hell sein, als Knopffläche mit
     weißer Schrift dunkel. Ein einziger Wert kann beides nicht.
       --rot        Schrift, Links, Linien  → hell,   5,66:1 auf Karte
       .knopf--rot  Knopffläche             → Messing, weiß 5,81:1     */
  --rot:          #E9A06B;
  --rot-hell:     #F2B183;
  --rot-blass:    #2A2018;
  --ocker:        #D6B368;   /* 6,13:1 selbst auf der Karte */

  /* Schatten wirken auf dunklem Grund nur, wenn sie sehr tief sind. */
  --schatten:      0 18px 50px rgba(0, 0, 0, .5);
  --schatten-tief: 0 30px 80px rgba(0, 0, 0, .65);
}

/* ---- SCHWARZE SCHRIFT AUF DUNKLEM GRUND -------------------------------
   Das Grund-Stylesheet setzt an fünf Stellen `color: var(--tinte)`, also
   die dunkelste Farbe. Im hellen Entwurf ist das richtig. Sobald --tinte
   zur HINTERGRUNDFARBE wird, steht dort Schwarz auf Schwarz.

   Gefunden am 13.08.2026, nachdem Yanick meldete, dass Schrift teilweise
   nicht lesbar ist. Der Preis „490 €" im Grundpaket war unsichtbar.

   Wer weitere Regeln ergänzt: NIE `var(--tinte)` als Schriftfarbe
   verwenden, sondern `var(--text)`. --tinte ist eine Flächenfarbe. */

.knopf--rand { color: var(--text); border-color: var(--linie); }
.knopf--rand:hover { border-color: var(--rot); color: var(--rot); }

/* Die aufklappbaren Fragen auf der Preisseite */
.frage summary { color: var(--text); }
.frage summary:hover { color: var(--rot); }

/* Die Preiszahl im Grundpaket — war komplett unsichtbar */
.preis__zahl { color: var(--text); }

/* „Kommt bald" und der Pfeil auf den Beispiel-Kacheln */
.stueck__pfeil { color: var(--text); }
.stueck:hover .stueck__pfeil { color: var(--rot); }

/* Das Menü-Symbol auf dem Handy, sobald die Kopfzeile mitfährt */
.kopf--fest .menue__schalter { color: var(--text); border-color: var(--linie); }

/* Kontaktdaten auf der Kontaktseite */
.draht__wert { color: var(--text); }

/* --- Weitere Stellen, die über HELLIGKEIT gearbeitet haben --------------
   Solche Regeln kippen beim Umdrehen von hell auf dunkel. */

/* Knopf und Schlussband: Messing, weiße Schrift darauf 5,81:1 */
.knopf--rot { background: #8C5A2B; box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
.knopf--rot:hover { background: #A46B34; box-shadow: 0 16px 34px rgba(0, 0, 0, .6); }
.schlussband { background: #8C5A2B; }

/* Die Kopfzeile wurde beim Scrollen zur HELLEN Pille und hätte als
   einziges Element geleuchtet. */
.kopf--fest .kopf__innen {
  background: rgba(33, 44, 37, .93);
  border-color: #43524A;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}
.kopf--fest .menue a { color: var(--text-leise); }
.kopf--fest .menue a:hover,
.kopf--fest .menue a[aria-current="page"] { color: var(--text); }

/* Karten in abgesetzten Abschnitten waren auf Weiß gesetzt. */
.block--tief .karte { background: var(--papier); }

/* Der Abschnitt hieß „weiß" und war es auch. */
.block--weiss { background: var(--loess-tief); }

/* Die Ziffern im Ablauf standen auf hellem Grund. */
.schritt__zahl { background: var(--loess-tief); color: var(--rot); border-color: var(--rot); }
.block--weiss .schritt__zahl { background: var(--loess); }
.block--tief .schritt__zahl { background: var(--papier); }

/* Das hervorgehobene Paket stach im hellen Entwurf dadurch heraus, dass
   es DUNKEL war. Auf dunklem Grund verschwindet es. Es muss sich also
   umgekehrt nach oben absetzen: heller, mit ockerner Kante. */
.preis--stark {
  background: #36453B;
  border-color: var(--ocker);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.preis--stark h3,
.preis--stark .preis__zahl { color: #fff; }
.preis--stark:hover { border-color: var(--rot); }

/* Das gerenderte Bild „Adressleiste" wurde am 13.08.2026 in den
   Wald-Farben NEU erzeugt und braucht deshalb keinen Notbehelf mehr.
   Vorher trug es weiße Flächen fest im Bild und stand auf dem dunklen
   Grund wie ein Fremdkörper, notdürftig abgefangen durch einen Rahmen.
   Vorlage jetzt dauerhaft unter bilder/adressleiste-vorlage.html. */

/* Platzhalter-Streifen waren auf einen hellen Ton eingestellt. */
.platzhalter { background-color: #253028 !important; }