/* ==========================================================================
   Startseite – „filmisch"
   ==========================================================================
   Anlass: Die Kundschaft nennt die Seite „altbacken und völlig unspektakulär".
   Der erste Entwurf hat nur Bilder getauscht – zu Recht als „genauso wie vorher"
   zurückgewiesen. Dieser hier greift das Grundgerüst an.

   Drei Entscheidungen:
     1. Dunkel als Grundton statt Weiß. Die Seite hatte einen dunklen Abschnitt,
        und ausgerechnet der wirkte – also wird er zur Regel.
     2. Kein Kartenraster mehr. Inhalte liegen in ganzflächigen Bändern und in
        einem Raster aus Bildkacheln.
     3. Der Imagefilm trägt den Einstieg, statt unten auf der Seite zu warten.

   Die Seite besteht aus echten Gutenberg-Blöcken, damit alles editierbar
   bleibt. Deshalb stehen hier viele Regeln auf .wp-block-* – Bilder kommen in
   einer <figure>, Knöpfe in .wp-block-buttons, Listen in <ul class="wp-block-list">.

   Wird nur auf der Startseite geladen (siehe functions.php). Alles ist mit
   e2- vorangestellt und berührt die übrige Website nicht.
   ========================================================================== */

.seite-start {
  --e2-nacht: #0b0708;
  --e2-tief: #150d10;
  --e2-linie: rgba(255, 255, 255, .13);
  --e2-text: rgba(255, 255, 255, .78);
  background: var(--e2-nacht);
  color: #fff;
}

/* Der Inhalt läuft über die volle Breite – die Theme-Begrenzung stört hier.
   Der dunkle Grund muss an jeder Hülle stehen: „transparent" genügt nicht,
   weil GeneratePress weiter oben Weiß setzt und die Abschnitte selbst keinen
   eigenen Hintergrund haben – die Überschriften standen dadurch weiß auf
   weiß. */
.seite-start #page,
.seite-start .site,
.seite-start .site-content,
.seite-start .content-area,
.seite-start .site-main,
.seite-start article,
.seite-start .inside-article,
.seite-start .entry-content {
  max-width: none;
  padding: 0;
  margin: 0;
  background: var(--e2-nacht);
  border: 0;
  box-shadow: none;
}
.seite-start .entry-content > * { margin-block: 0; }

/* Gutenberg schiebt zwischen jede Gruppe und ihren Inhalt eine weitere Hülle
   (.wp-block-group__inner-container). Die hat weder Rand noch Hintergrund,
   zerreißt aber jedes Raster: Die Gruppe sieht dann nur noch ein einziges
   Kind. „display:contents" nimmt die Hülle aus dem Layout heraus, ohne sie aus
   dem Dokument zu nehmen – damit greifen Raster, Flächenbilder und
   Absolutsetzung wieder direkt auf den Blöcken darin. */
.seite-start .entry-content .wp-block-group__inner-container { display: contents; }

.e2-innen {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.seite-start .entry-content h1,
.seite-start .entry-content h2,
.seite-start .entry-content h3 {
  font-family: var(--titel);
  letter-spacing: -.025em;
  line-height: 1.04;
  color: #fff;
  margin: 0;
}
/* Nur die eigenen Absatzblöcke auf null stellen. Auszeichnungen, Bewertungen
   und Standortkarten bringen ihre eigenen <p> mit – die hatten sonst keinen
   Abstand mehr und die zentrierten unter ihnen keine Mitte. */
.seite-start .entry-content p.wp-block-paragraph { margin: 0; }

/* Anklickbare Flächen: Der Verweis sitzt in der Überschrift und wird über die
   ganze Kachel gedehnt. Ein Block-Wrapper kann kein <a> sein – so bleibt die
   Überschrift im Editor eine normale Überschrift. */
.e2-weg h2 a,
.e2-kachel h3 a,
.e2-karte h3 a,
.e2-marke__name a {
  color: inherit;
  text-decoration: none;
}
.e2-weg h2 a::after,
.e2-kachel h3 a::after,
.e2-karte h3 a::after,
.e2-marke__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   1 · Film als Einstieg
   Der Film läuft stumm und in Schleife als Hintergrund. Weil bewegtes Bild
   länger als fünf Sekunden eine Pausenmöglichkeit braucht (WCAG 2.2.2), sitzt
   unten rechts ein Knopf. Wer „Bewegung reduzieren" eingestellt hat, bekommt
   von vornherein nur das Standbild – das regelt das Skript auf der Seite.
   -------------------------------------------------------------------------- */
.e2-film {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex;
  align-items: flex-end;
  overflow: clip;
  background: var(--e2-nacht);
}
.e2-film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.e2-film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(11, 7, 8, .72) 0%, rgba(11, 7, 8, .32) 34%, rgba(11, 7, 8, .80) 78%, var(--e2-nacht) 100%),
    linear-gradient(90deg, rgba(11, 7, 8, .70) 0%, rgba(11, 7, 8, .18) 58%, rgba(11, 7, 8, 0) 100%);
}
.e2-film__inhalt {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(48px, 9vh, 120px);
}
.e2-film__augenbraue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(11, 7, 8, .9);
}
.e2-film__augenbraue::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--rot);
}
.e2-film h1 {
  font-size: clamp(38px, 6.6vw, 104px);
  max-width: 17ch;
  text-wrap: balance;
}
/* Die zweite Zeile stand in Rot auf dem Bild – über einer bewegten Szene ist
   das je nach Einzelbild kaum zu lesen (Rückmeldung 23.09.2026). Sie bleibt
   hervorgehoben, aber über die Helligkeit statt über die Farbe: Die erste
   Zeile tritt zurück, die zweite steht in vollem Weiß. */
.e2-film h1 {
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 2px 24px rgba(11, 7, 8, .55);
}
.e2-film h1 em {
  font-style: normal;
  color: #fff;
}
.e2-film__text {
  margin: 24px 0 0 !important;
  max-width: 54ch;
  font-size: clamp(16.5px, 1.35vw, 20px);
  line-height: 1.6;
  color: var(--e2-text);
}

/* Knöpfe kommen als Block-Knöpfe – die Form macht das Stylesheet. */
.e2-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px !important;
}
.e2-knopfreihe .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--rot);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.e2-knopfreihe .wp-block-button__link:hover {
  background: var(--rot-tief);
  transform: translateY(-1px);
  color: #fff;
}
/* style.css setzt das Rot der Knöpfe mit !important – der leise Knopf kommt
   sonst nicht dagegen an. */
.e2-knopfreihe .e2-knopf--leise .wp-block-button__link {
  background: rgba(255, 255, 255, .07) !important;
  border-color: var(--e2-linie);
  backdrop-filter: blur(6px);
}
.e2-knopfreihe .e2-knopf--leise .wp-block-button__link:hover { background: rgba(255, 255, 255, .16) !important; }

.e2-film__pause {
  position: absolute;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  z-index: 3;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--e2-linie);
  background: rgba(11, 7, 8, .6);
  backdrop-filter: blur(6px);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.e2-film__pause:hover { background: rgba(11, 7, 8, .85); }

/* --------------------------------------------------------------------------
   2 · Kennzahlen als Streifen
   -------------------------------------------------------------------------- */
.e2-zahlen {
  border-block: 1px solid var(--e2-linie);
  background: var(--e2-tief);
}
.e2-zahlen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  padding-block: clamp(36px, 5vw, 64px);
}
.e2-zahl__wert {
  font-family: var(--titel);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1;
  letter-spacing: -.035em;
}
.e2-zahl__text {
  margin-top: 10px !important;
  font-size: 15px;
  color: rgba(255, 255, 255, .58);
}

/* --------------------------------------------------------------------------
   3 · Zwei Wege – geteilter Bildschirm statt zwei weißer Karten
   Die Leistungsliste aus den alten Karten steht mit drin: Sie ist der Grund,
   warum Leute anrufen, und darf beim Umbau nicht verlorengehen.
   -------------------------------------------------------------------------- */
.e2-wege { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .e2-wege { grid-template-columns: 1fr; } }

.e2-weg {
  position: relative;
  min-height: min(82svh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: clip;
  color: #fff;
  isolation: isolate;
}
.e2-weg .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: -2;
  line-height: 0;
}
.e2-weg .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.e2-weg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 7, 8, .30) 0%, rgba(11, 7, 8, .62) 40%, rgba(11, 7, 8, .95) 100%);
  transition: background .35s ease;
}
.e2-weg:hover .wp-block-image img,
.e2-weg:focus-within .wp-block-image img { transform: scale(1.05); }
.e2-weg__inhalt { padding: clamp(28px, 4vw, 56px); }
/* Über dem Foto steht kein verlässlicher Grund: Rotes Kleingedrucktes war dort
   kaum zu lesen (Rückmeldung 23.09.2026). Deshalb weiß mit rotem Strich davor –
   das Rot bleibt als Akzent, die Schrift wird lesbar. */
.e2-weg__augenbraue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(11, 7, 8, .9);
}
.e2-weg__augenbraue::before { content: ""; width: 34px; height: 3px; background: var(--rot); }
.e2-weg h2 { font-size: clamp(28px, 3.2vw, 46px); }
.e2-weg__inhalt p:not([class]) {
  margin: 14px 0 0 !important;
  max-width: 44ch;
  color: var(--e2-text);
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.6;
}
.e2-liste {
  list-style: none;
  margin: 22px 0 0 !important;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 46ch;
}
.e2-liste li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 10px 0;
  border-top: 1px solid var(--e2-linie);
  font-size: 15.5px;
}
.e2-liste li b { font-weight: 600; }
.e2-liste .e2-preis { color: rgba(255, 255, 255, .6); }
.e2-weg__mehr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px !important;
  font-weight: 700;
  color: #fff;
}
.e2-weg__mehr::after { content: "→"; transition: transform .2s ease; }
.e2-weg:hover .e2-weg__mehr::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   4 · Abschnittskopf und Leistungsraster
   -------------------------------------------------------------------------- */
/* Jeder Abschnitt polstert oben und unten. Wo zwei davon aufeinanderfolgen,
   addieren sich die Polster zu einem Loch von über 250 px – deshalb trägt in
   einer Folge nur der untere Rand des vorherigen Abschnitts den Abstand.
   Ausgenommen sind Abschnitte mit eigenem Hintergrund: Dort ist das Polster
   Teil der Fläche und darf nicht fehlen. */
.e2-abschnitt { padding-block: clamp(56px, 6.5vw, 96px); }
.e2-abschnitt + .e2-abschnitt:not(.e2-bewertungen) { padding-top: 0; }
.e2-kopf { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 54px); }
.e2-augenbraue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rot-hell);
}
.e2-augenbraue::before { content: ""; width: 34px; height: 2px; background: var(--rot); }
.e2-kopf h2 { font-size: clamp(30px, 4.2vw, 60px); max-width: 900px; text-wrap: balance; }
.e2-kopf p:not([class]) { margin: 18px 0 0 !important; color: var(--e2-text); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; }
.e2-kopf__link { margin-top: 20px !important; }
.e2-pfeil {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--rot);
  padding-bottom: 3px;
}
.e2-pfeil::after { content: "→"; transition: transform .2s ease; }
.e2-pfeil:hover { color: var(--rot-hell); }
.e2-pfeil:hover::after { transform: translateX(4px); }

.e2-mosaik {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
@media (max-width: 1000px) { .e2-mosaik { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .e2-mosaik { grid-template-columns: 1fr; } }
.e2-kachel {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  border-radius: 18px;
  color: #fff;
  isolation: isolate;
  aspect-ratio: 4 / 3;
}
/* Alle Kacheln gleich: gleiches Seitenverhältnis, gleicher Aufbau, gleich
   kurze Sätze. Die erste Fassung mischte drei Breiten – das wirkte unruhig. */
.e2-kachel .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: -2;
  line-height: 0;
}
.e2-kachel .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.e2-kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 7, 8, .12) 30%, rgba(11, 7, 8, .84) 100%);
}
.e2-kachel:hover .wp-block-image img,
.e2-kachel:focus-within .wp-block-image img { transform: scale(1.06); }
.e2-kachel__inhalt { padding: clamp(20px, 2vw, 30px); }
.e2-kachel h3 { font-size: clamp(20px, 1.9vw, 27px); }
.e2-kachel__inhalt p:not([class]) {
  margin: 8px 0 0 !important;
  color: rgba(255, 255, 255, .72);
  font-size: 15.5px;
  line-height: 1.55;
  /* Zwei Zeilen, nicht mehr: Sonst stehen die Überschriften der Kacheln auf
     unterschiedlicher Höhe und die Reihe wirkt zerfasert. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.e2-kachel__preis { margin-top: 12px !important; font-weight: 700; font-size: 15.5px; color: #fff; }

/* --------------------------------------------------------------------------
   5 · Eigene Software
   -------------------------------------------------------------------------- */
/* Fest drei Spalten: Bei sechs Karten ergibt „auto-fit" vier und zwei, und die
   zweite Zeile bleibt halb leer. Dreimal zwei sieht aufgeräumt aus. */
.e2-marken { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); }
@media (max-width: 1000px) { .e2-marken { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .e2-marken { grid-template-columns: 1fr; } }
.e2-marke {
  position: relative;
  border: 1px solid var(--e2-linie);
  border-radius: 20px;
  padding: clamp(26px, 2.6vw, 38px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .2s ease, transform .2s ease;
}
.e2-marke:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-3px); }
/* Zeichen in einer festen Fläche – die Marken liefern mal ein Bild, mal ein
   SVG; ohne gemeinsame Hülle stehen die Karten unterschiedlich hoch. */
.e2-marke__zeichen {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--e2-linie);
  color: #fff;
}
.e2-marke__zeichen .wp-block-image { margin: 0; line-height: 0; }
.e2-marke__zeichen img { width: 62px; height: 62px; border-radius: 15px; }
/* AnyDNS hat keine eigene Bildmarke und bekommt das Globus-Zeichen. Das Theme
   zeichnet es rot – auf den anderen Platten steht ein weißes C, deshalb hier
   ebenfalls weiß. */
.e2-marke__zeichen svg { width: 42px; height: 42px; color: #fff; }
.e2-marke__name { font-family: var(--titel); font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.e2-marke__text { color: var(--e2-text); font-size: 16px; line-height: 1.6; }
.e2-marke__preis { margin-top: auto !important; padding-top: 10px; font-weight: 700; font-size: 15px; color: var(--rot-hell); }

/* --------------------------------------------------------------------------
   6 · Der ganze Imagefilm
   Die Schleife im Einstieg ersetzt ihn nicht: Sie ist stummer Hintergrund,
   der Film erzählt die Geschichte. Deshalb steht er als eigener Abschnitt da,
   mit Bedienelementen und Transkript.
   -------------------------------------------------------------------------- */
/* Der Film nimmt die ganze Breite des Inhaltsbereichs ein – nicht mehr (über
   die Fensterbreite wirkte er zu groß) und nicht weniger (der Videoblock
   bringt aus style.css eine Begrenzung auf 960 px mit). */
.e2-kino__rahmen {
  border-radius: 20px;
  overflow: clip;
  border: 1px solid var(--e2-linie);
  background: #000;
  line-height: 0;
}
/* Der Videoblock bringt aus style.css seine eigene Breite (960 px) und einen
   eigenen Rahmen mit – hier trägt den Rahmen die Gruppe, der Film füllt sie. */
.e2-kino__rahmen figure.wp-block-video.sw-video {
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.e2-kino__rahmen video { display: block; width: 100%; height: auto; }
.e2-kino .sw-transkript { margin: 24px 0 0; max-width: 80ch; }
/* Nur Farbe ändern: Die Pille (Innenabstand, Rand, Pfeil) kommt aus style.css –
   ein eigenes „padding" hier hat die Schrift über den Rand laufen lassen. */
.e2-kino .sw-transkript > summary {
  color: #fff;
  border-color: var(--e2-linie);
}
.e2-kino .sw-transkript > summary:hover { color: var(--rot-hell); border-color: var(--rot); }
.e2-kino .sw-transkript p,
.e2-kino .sw-transkript li { color: var(--e2-text); font-size: 15.5px; line-height: 1.6; }
.e2-kino .sw-transkript li { border-bottom-color: var(--e2-linie); }
.e2-kino .sw-transkript b { color: #fff; }

/* --------------------------------------------------------------------------
   7 · Karten ohne Bild (Onlineshop)
   -------------------------------------------------------------------------- */
.e2-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.e2-karte {
  position: relative;
  border: 1px solid var(--e2-linie);
  border-radius: 18px;
  padding: clamp(24px, 2.4vw, 34px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  transition: border-color .2s ease, transform .2s ease;
}
.e2-karte:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-3px); }
.e2-karte h3 { font-size: 23px; }
.e2-karte p { margin-top: 12px !important; color: var(--e2-text); font-size: 15.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   8 · Auszeichnungen, Bewertungen, Standorte
   Diese drei kommen aus ihren Pflegeseiten und bringen die hellen Stile der
   übrigen Website mit. Hier werden sie auf den dunklen Grund umgestellt –
   ohne die Ursprungsregeln anzufassen, die anderswo weiter gelten.
   -------------------------------------------------------------------------- */
.e2-awards .sw-laufband { margin: 0; }
/* Die Urkunden sind für weißes Papier gemacht – zwei von acht sind selbst
   fast schwarz und verschwanden im dunklen Grund. Deshalb steht jede auf
   einer hellen Platte, wie auf der übrigen Website. */
/* Gleich hoch: Die Spur richtet sonst am unteren Rand aus, und weil manche
   Bildunterschrift zweizeilig ist, stehen die Platten unterschiedlich hoch. */
.e2-awards .sw-laufband__spur { align-items: stretch; }
.e2-awards .sw-laufband__stueck {
  width: 168px;
  padding: 18px 12px 14px;
  border-radius: 16px;
  background: #fff;
  justify-content: flex-start;
}
.e2-awards .sw-laufband__stueck figcaption { margin-top: auto; }
.e2-awards .sw-laufband__stueck figcaption b { color: var(--nacht); }
.e2-awards .sw-laufband__stueck figcaption span { color: var(--leise); }
.e2-awards .sw-laufband__fuss b { color: #fff; }
.e2-awards button.sw-laufband__pause,
.e2-awards button.sw-laufband__pause:hover,
.e2-awards button.sw-laufband__pause:focus {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .82);
}
.e2-awards button.sw-laufband__pause:hover,
.e2-awards button.sw-laufband__pause:focus { color: #fff; border-color: #fff; }
.e2-awards .sw-laufband__fuss { border-color: var(--e2-linie); color: var(--e2-text); }
.e2-awards .sw-pfeil { color: #fff; }

.e2-bewertungen { background: var(--e2-tief); border-block: 1px solid var(--e2-linie); }
.e2-bewertungen .sw-bewertungen__kopf { border-color: var(--e2-linie); }
.e2-bewertungen .sw-bewertungen__note b { color: #fff; }
.e2-bewertungen .sw-bewertungen__note span,
.e2-bewertungen .sw-bewertungen__fuss { color: rgba(255, 255, 255, .6); }
.e2-bewertungen .sw-stimme {
  background: rgba(255, 255, 255, .05);
  border-color: var(--e2-linie);
  color: #fff;
}
.e2-bewertungen .sw-stimme blockquote { color: var(--e2-text); }
.e2-bewertungen .sw-stimme__kopf b { color: #fff; }
.e2-bewertungen .sw-stimme__kopf span,
.e2-bewertungen .sw-stimme__kuerzel { color: rgba(255, 255, 255, .6); }
.e2-bewertungen .sw-stimme__kuerzel { background: rgba(255, 255, 255, .08); }
.e2-bewertungen .sw-stimme__mehr { color: var(--rot-hell); }
.e2-bewertungen .sw-pfeil { color: #fff; }
/* Der Hinweis unter den Stimmen stand zu dicht am Laufband und zu schmal. */
.e2-bewertungen .sw-bewertungen__fuss { margin: 38px auto 0; max-width: 82ch; }
.e2-bewertungen .sw-bewertungen__fuss a { color: var(--rot-hell); }
.e2-bewertungen button.sw-laufband__pause,
.e2-bewertungen button.sw-laufband__pause:hover,
.e2-bewertungen button.sw-laufband__pause:focus {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .82);
}
.e2-bewertungen button.sw-laufband__pause:hover,
.e2-bewertungen button.sw-laufband__pause:focus { color: #fff; border-color: #fff; }

.e2-standorte .sw-standort {
  background: rgba(255, 255, 255, .05);
  border-color: var(--e2-linie);
  color: #fff;
}
.e2-standorte .sw-standort h3 { color: #fff; }
.e2-standorte .sw-standort .adresse,
.e2-standorte .sw-standort dt,
.e2-standorte .sw-standort .sw-offen { color: rgba(255, 255, 255, .62); }
.e2-standorte .sw-standort dd { color: #fff; }
.e2-standorte .sw-standort dl { border-color: var(--e2-linie); }
/* Der Hinweis auf abweichende Öffnungszeiten steht sonst auf hellem Bernstein –
   mit heller Schrift darauf war er nicht zu lesen. Auf dem dunklen Grund wird
   aus der Fläche ein schwacher Bernsteinschimmer mit hellem Text. */
.e2-standorte .sw-standort__abweichung {
  background: rgba(245, 201, 138, .14);
  color: rgba(255, 255, 255, .88);
}
.e2-standorte .sw-standort__abweichung-titel { color: #F5C98A; }
.e2-standorte .sw-standort .sw-tel { color: #fff; }
.e2-standorte .sw-standort .sw-tel:hover { color: var(--rot-hell); }
.e2-standorte .sw-standort .sw-pfeil { color: #fff; }

/* --------------------------------------------------------------------------
   9 · Eine Stimme, ganzflächig
   -------------------------------------------------------------------------- */
.e2-stimme {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(70svh, 560px);
  overflow: clip;
  isolation: isolate;
}
.e2-stimme .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: -2;
  line-height: 0;
}
.e2-stimme .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.e2-stimme::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 7, 8, .88) 0%, rgba(11, 7, 8, .80) 100%);
}
.e2-stimme blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.e2-stimme blockquote p {
  font-family: var(--titel);
  font-weight: 700;
  font-size: clamp(26px, 3.8vw, 56px);
  line-height: 1.14;
  letter-spacing: -.03em;
  max-width: 22ch;
  color: #fff;
}
.e2-stimme cite {
  display: block;
  margin-top: 26px;
  color: rgba(255, 255, 255, .6);
  font-size: 15.5px;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   10 · Abschluss
   -------------------------------------------------------------------------- */
.e2-schluss { background: var(--e2-tief); border-top: 1px solid var(--e2-linie); }
.e2-schluss__raster {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 110px);
}
@media (max-width: 860px) { .e2-schluss__raster { grid-template-columns: 1fr; } }
.e2-schluss h2 { font-size: clamp(28px, 3.6vw, 52px); }
.e2-schluss__text p:not([class]) { margin: 18px 0 0 !important; color: var(--e2-text); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; }
.e2-orte { display: grid; gap: 14px; }
.e2-ort { border: 1px solid var(--e2-linie); border-radius: 16px; padding: 26px 28px; }
.e2-ort__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rot-hell);
}
.e2-ort__tel { margin-top: 10px !important; }
.e2-ort__tel a {
  font-family: var(--titel);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
}
.e2-ort__tel a:hover { text-decoration: underline; }
.e2-ort__adresse { margin-top: 12px !important; color: var(--e2-text); font-size: 15px; line-height: 1.55; }
.e2-ort__mehr { margin-top: 18px !important; }

/* Wer Bewegung reduziert, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .seite-start .entry-content * { transition: none !important; animation: none !important; }
  .e2-weg img, .e2-kachel img { transform: none !important; }
}