/* ===========================================================================
   STARTSEITE — Aufbau

   Grundsatz dieser Datei: jeder Zahlenwert ist an der Originalseite gemessen
   (Fensterbreite 1440px), nicht geschaetzt. Die Messprotokolle liegen in
   werkzeuge/vergleich/. Wer einen Wert aendert, sollte danach
   "node shot.js" laufen lassen und gegen das Original vergleichen.
   =========================================================================== */


/* ===========================================================================
   1. KOPFBEREICH — DESKTOP

   Der Kopfbereich ist eine Scroll-Inszenierung, keine feste Grafik:
   Video, Logo, Laufzeitanzeige und Mauszeiger stehen auf position:fixed und
   bleiben stehen, waehrend die Textplatten (glasplatten.css) darueber
   hinwegziehen. Der Inhalt weiter unten schiebt sich anschliessend darueber.

   Ohne diese Fixierung faellt der ganze Kopfbereich in sich zusammen — genau
   das war der Fehler in der Fassung vom 02.08.
   =========================================================================== */

/* Video: im Original genau 40px Rand links und rechts, Verhaeltnis 16:9.
   Bei 1440px Fenster ergibt das 1360x765px — exakt der gemessene Wert. */
.kopf-video {
  /* position: fixed ist zugleich der Bezugsrahmen fuer die absolut
     positionierte Laufzeitanzeige darin - eine zusaetzliche Angabe
     position: relative waere nicht nur ueberfluessig, sie wuerde die
     Fixierung sogar aufheben. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 40px;
  background: var(--dunkel);
  z-index: 1;
}
.kopf-video__medium {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

/* Logo: im Original ein Hintergrundbild, linksbuendig oben, feste 163px
   Hoehe ueber die volle Fensterbreite. */
.kopf-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 163px;
  background: url('../bilder/Header-Bild-15-3-Desktop.png') no-repeat 0 0 / contain;
  /* Bleibt beim Scrollen permanent im Vordergrund. Vorher lag das Logo mit
     z-index 3 unter den Glasplatten (4) und der Inhaltsflaeche (5) und wurde
     ueberschoben. 9998 liegt ueber beiden, aber weiter unter dem
     Mauszeigersymbol (9999) und dem Sprunglink (10000). */
  z-index: 9998;
  /* Der Streifen liegt jetzt ueber dem Inhalt und wuerde dort saemtliche
     Klicks abfangen - obwohl er zu grossen Teilen durchsichtig ist. Deshalb
     nimmt der Container keine Zeigereingaben mehr an; nur der Link darin
     tut es. */
  pointer-events: none;
}
/* Die Grafik ist 8000x652px und wird mit contain eingepasst, ist also
   1/12,27 so hoch wie breit. Der Schriftzug "3D BAUSTELLE" mit der orangen
   Zeile darunter sitzt links und nimmt rund 25 % der Breite und 69 % der
   Hoehe der Grafik ein - genau dieser Bereich ist anklickbar. Ab etwa
   2000px Fensterbreite ist die Grafik hoehenbegrenzt, dann gelten die
   festen Werte.  */
.kopf-logo a {
  display: block;
  width: min(25vw, 500px);
  height: min(5.6vw, 112px);
  pointer-events: auto;
}

/* Laufzeitanzeige unter dem Video.

   Wichtig zum Verstaendnis: Die Videodatei ist 16:9, das SICHTBARE Bild
   darin ist es nicht. Oben und unten liegt je ein Streifen in genau der
   Hintergrundfarbe der Website (#12161e) - er wirkt fuer den Betrachter
   wie Seitenhintergrund, gehoert aber noch zum Video. Am Vorschaubild
   (bilder/Header-Desktop-Thumpnail-3-2.png, 1920x1080) ausgemessen:
     oberer Streifen    47px  =  4,35 % der Videohoehe
     unterer Streifen  273px  = 25,28 % der Videohoehe
     Bildunterkante bei 807px = 74,72 % der Videohoehe

   Die Anzeige haengt deshalb nicht an der Unterkante der Videodatei,
   sondern an der Unterkante des sichtbaren Bildes - plus 20px Abstand.
   Sie liegt damit IM unteren Streifen, also optisch dicht unter dem Bild.

   Die Anzeige liegt im Videobehaelter, dessen Hoehe genau die Videohoehe
   ist. 74.72% davon sind die Unterkante des sichtbaren Bildes, plus 20px
   Abstand.
   Aendert sich der Videoschnitt, ist 0.7472 der einzige Wert, der
   angepasst werden muss. */
.kopf-timer {
  position: absolute;
  top: calc(74.72% + 20px);
  left: 39px;
  z-index: 2;
}

/* Mauszeigersymbol, 50px ueber dem Fensterboden, mittig. */
.scroll-maus {
  transition: opacity 0.35s, transform 0.35s;
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* Ausgeblendet, sobald der Leitsatz im Bild ist - gesetzt von
   js/maus-ausblenden.js. pointer-events: none verhindert, dass das
   unsichtbare Symbol noch Klicks abfaengt. */
.scroll-maus--weg {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}

.scroll-maus__gehaeuse {
  width: 26px;
  height: 42px;
  padding-top: 6px;
  border: 2px solid #fff;
  border-radius: 13px;
  display: flex;
  justify-content: center;
}
.scroll-maus__rad {
  width: 4px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
  animation: maus-rad 1.6s ease-in-out infinite;
}
@keyframes maus-rad {
  0%, 100% { transform: translateY(0);    opacity: 1;   }
  50%      { transform: translateY(10px); opacity: 0.3; }
}
.scroll-maus__pfeil {
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  transform: rotate(45deg);
}

/* Die Textplatten liegen ueber Video und Logo. */
#srp-wrapper { z-index: 4; }


/* ===========================================================================
   2. KOPFBEREICH — SMARTPHONE
   Hochkantes Video im normalen Textfluss, Logo darueber.
   =========================================================================== */
.kopf-mobil {
  background: var(--dunkel);
  padding: 18px 20px 0;
  text-align: center;
}
.kopf-mobil__logo { width: 100%; max-width: 340px; height: auto; }
.kopf-mobil__video {
  display: block;
  width: 100%;
  background: #000;
}


/* ===========================================================================
   3. INHALTSFLAECHE

   Alles ab hier scrollt ueber den fixierten Kopfbereich.

   Der Hintergrund ist bewusst NICHT ganz deckend (Stand 11.08.2026):
   96 % Hintergrundfarbe, 4 % durchsichtig. Dadurch schimmert das fixierte
   Kopfvideo im oberen Bildbereich ganz schwach durch. Erkennen soll man
   davon nichts - es geht allein um die wahrnehmbare Bewegung, die den
   Besucher daran erinnert, dass oben noch ein Video laeuft.

   Wer den Effekt staerker oder schwaecher will, aendert nur die Zahl:
   kleiner = mehr Video (z. B. 88 %), 100 % = wieder ganz deckend.
   Achtung: zu viel Durchlaessigkeit kostet Lesbarkeit, da im oberen
   Bildbereich Text darueber steht.
   =========================================================================== */
/* Die Platte beginnt 80px weiter oben als der Text darauf (11.08.2026).
   Der negative Aussenabstand zieht die Oberkante der Flaeche nach oben,
   der um denselben Betrag groessere Innenabstand des Leitsatzes schiebt
   den Text wieder an seine alte Stelle zurueck. Unterm Strich: mehr
   getoente Flaeche ueber der Ueberschrift, die Ueberschrift selbst bleibt
   auf exakt derselben Hoehe.
   Beide Werte gehoeren zusammen - wer einen aendert, muss den anderen
   mitaendern (hier -80px / dort +80px). */
.inhaltsflaeche {
  margin-top: -80px;
  position: relative;
  z-index: 5;
  background: color-mix(in srgb, var(--dunkel) 96%, transparent);
  padding: 10px;
}

.abschnitt { padding: 0; }


/* ===========================================================================
   4. LEITSATZ mit den beiden Schaltflaechen
   =========================================================================== */
/* Vorlauf vor dem Leitsatz. Urspruenglich 379px (309px aus dem Original
   plus 70px fuer die entfernte "3D"-Zeile). Auf 100px gekuerzt, damit der
   Leitsatz beim Herunterscrollen frueher nachkommt und die Luecke zur
   zweiten Glasplatte kleiner wird. Der Rest der Seite rutscht dadurch um
   279px mit nach oben. Zweiter Schritt: nochmals um eine Zeilenhoehe des
   Leitsatzes (54px) auf 46px gekuerzt. */
/* Vorlauf ueber dem Leitsatz. Er enthaelt den Ausgleich fuer den negativen
   Aussenabstand der Inhaltsflaeche darueber (siehe dort) und bestimmt
   zugleich, wie frueh der Text erscheint, wenn die zweite Glasplatte nach
   oben herausgeschoben wird: kleinerer Wert = frueher sichtbar. */
.leitsatz { padding-top: 66px; text-align: center; }

/* Original: 54px, Schnitt 700, Laufweite -1px. */
.leitsatz__zeile {
  margin: 0;
  font-size: 54px;
  line-height: 54px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -1px;
}

/* Die drei Leistungen in einer Reihe, getrennt durch orange Punkte.
   Frueher: 21px, Schnitt 400, drei Zeilen untereinander, hoechstens 574px
   breit - das wirkte neben dem grossen Leitsatz darueber unscheinbar. */
.leitsatz__marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 900px;
  margin: 64px auto 0;
}
.leitsatz__marken span {
  font-size: 27px;
  line-height: 34px;
  font-weight: 500;
  color: #fff;
}
/* Die Trennpunkte: leere Elemente ohne Textinhalt - sie tauchen deshalb in
   keiner Vorlesefassung auf. */
.leitsatz__marken i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/* ---------------------------------------------------------------------------
   AKTIONSLEISTE (11.08.2026)

   Ersetzt die frueheren zwei untereinanderstehenden Schaltflaechen
   (.leitsatz__knopfreihe, entfallen). Drei Verweise nebeneinander in einem
   abgesetzten Kasten - die Seite hat bewusst keine Navigation im Kopf,
   diese Leiste uebernimmt deren Aufgabe an der Stelle, an der der Besucher
   nach dem Kopfvideo zum ersten Mal etwas anklicken will.

   Aufbau: ein Raster mit drei Spalten. Die mittlere ist mit 1.4fr breiter als
   die beiden anderen (je 1fr) - der Preisrechner bekommt mehr Flaeche,
   orange Fuellung und einen weichen Schein, die anderen sind nur umrandet.
   Wer eine vierte Schaltflaeche will, ergaenzt im HTML ein weiteres <a>
   und traegt hier eine weitere Spalte ein (z. B. 1fr 1.4fr 1fr 1fr).
   --------------------------------------------------------------------------- */
.aktionsleiste {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 14px;
  width: min(980px, 92vw);
  margin: 72px auto 0;
  padding: 14px;
  box-sizing: border-box;
  text-align: center;
  background: color-mix(in srgb, var(--karte) 78%, transparent);
  border: 1px solid var(--rahmen);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

/* Grundform aller drei Felder. */
.aktion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 92px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--rahmen);
  background: transparent;
  color: #fff;
  transition: border-color 0.22s, background 0.22s, transform 0.22s;
}
.aktion:hover {
  color: #fff;
  border-color: var(--orange);
  background: var(--orange-schleier-12);
  transform: translateY(-2px);
}
.aktion:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.aktion__titel {
  font-size: 17px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.aktion__unterzeile {
  font-size: 12.5px;
  line-height: 16px;
  font-weight: 600;
  color: var(--grau-4);
  letter-spacing: 0.02em;
}

/* Die hervorgehobene Schaltflaeche: gefuellt, groessere Schrift, oranger
   Schein. */
.aktion--haupt {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--orange) 38%, transparent);
}
.aktion--haupt:hover {
  background: var(--orange);
  border-color: #fff;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--orange) 52%, transparent);
}
.aktion--haupt .aktion__titel {
  font-size: 21px;
  line-height: 24px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.aktion--haupt .aktion__unterzeile { color: rgba(255, 255, 255, 0.88); }

/* Schmale Fenster: die drei Felder untereinander statt nebeneinander. */
@media (max-width: 860px) {
  .aktionsleiste { grid-template-columns: 1fr; }
}


/* ===========================================================================
   5. KARTENRASTER — von Leistungen, Ablauf und Verweisen gemeinsam genutzt

   Drei Auspraegungen, alle im Original gemessen:
     karten--drei      1104px breit, 3 Spalten a 348px, Luecke 20px
     karten--zwei       968px breit, 2 Spalten a 464px, Luecke 20px
     karten--verweise  1326px breit, 3 Spalten a 388px, Luecke 71px
   =========================================================================== */
.karten {
  display: grid;
  margin: 0 auto;
  padding: 10px;
}
.karten--drei     { max-width: 1104px; grid-template-columns: repeat(3, 1fr); gap: 20px;
                    grid-auto-rows: minmax(607px, auto); }
.karten--zwei     { max-width:  968px; grid-template-columns: repeat(2, 1fr); gap: 20px;
                    grid-auto-rows: minmax(519px, auto); }
.karten--verweise { max-width: 1326px; grid-template-columns: repeat(3, 1fr); gap: 71px; }

/* ---------------------------------------------------------------------------
   KACHELN (11.08.2026)

   Neue Form der Leistungs- und Verweiskarten. Die alten Regeln (.karte,
   .karte__bild, .karte__titel, .karte__text) bleiben unveraendert bestehen -
   der Abschnitt "So funktioniert's" benutzt sie weiterhin.

   Aufbau einer Kachel:
     .kachel              der umschliessende Kasten mit Rahmen
       .kachel__bildfeld  Bildkopf, randlos, festes Seitenverhaeltnis 16:10
       .kachel__inhalt    Titel, kurzer Strich, Text
   --------------------------------------------------------------------------- */
.karten--kachel {
  max-width: 1200px;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.kachel {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--karte);
  border: 1px solid var(--rahmen);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.kachel:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}

/* aspect-ratio haelt alle Bildkoepfe gleich hoch, egal wie die Bilddatei
   beschnitten ist. object-fit: cover fuellt die Flaeche ohne Verzerrung. */
.kachel__bildfeld { aspect-ratio: 16 / 10; overflow: hidden; }

/* Vier Kacheln in einer Reihe - fuer den Ablauf "So funktioniert's". */
.karten--kachel-vier { grid-template-columns: repeat(4, 1fr); }

/* Schrittnummer im Bild. position:absolute verlangt ein
   position:relative am Bildfeld (siehe unten). */
.kachel__bildfeld { position: relative; }
.kachel__nummer {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.kachel__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s;
}
.kachel:hover .kachel__bild { transform: scale(1.05); }

.kachel__inhalt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 28px;
}
.kachel__titel {
  margin: 0;
  font-size: 21px;
  line-height: 27px;
  font-weight: 700;
  color: #fff;
}
/* Kurzer oranger Strich unter dem Titel. Er waechst beim Ueberfahren -
   eine ruhige Rueckmeldung ohne Farbwechsel. */
.kachel__strich {
  width: 34px;
  height: 2px;
  background: var(--orange);
  transition: width 0.25s;
}
.kachel:hover .kachel__strich { width: 64px; }

.kachel__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 25px;
  font-weight: 300;
  color: var(--text-leise);
}

/* Nur bei den Verweiskacheln: die ganze Kachel ist anklickbar. */
.kachel--verweis { color: inherit; }
.kachel--verweis:hover { color: inherit; }
.kachel--verweis:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.kachel__mehr {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
}
.kachel__mehr::after { content: ' \203A'; font-weight: 400; }

/* Schmale Fenster: hoechstens drei, mindestens ZWEI Spalten - eine einzelne
   Spalte soll es nie geben (Vorgabe vom 11.08.2026). Damit zwei Kacheln auch
   auf einem schmalen Telefon nebeneinander passen, werden Innenabstaende und
   Schriftgrade im zweiten Block deutlich kleiner. */
@media (max-width: 1040px) {
  .karten--kachel { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  .karten--kachel-vier { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .karten--kachel,
  .karten--kachel-vier { grid-template-columns: repeat(2, 1fr); max-width: none; gap: 12px; }

  .kachel { border-radius: 12px; }
  .kachel__inhalt { padding: 14px 14px 16px; gap: 8px; }
  .kachel__titel { font-size: 15px; line-height: 19px; }
  .kachel__strich { width: 24px; }
  .kachel:hover .kachel__strich { width: 40px; }
  .kachel__text { font-size: 12.5px; line-height: 19px; }
  .kachel__mehr { font-size: 11px; letter-spacing: 0.04em; }

  /* Schrittnummer entsprechend kleiner. */
  .kachel__nummer {
    left: 8px;
    top: 8px;
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  /* Ausnahme "Fuer die, die es genau wissen wollen" (11.08.2026):
     Drei Kacheln sind eine ungerade Zahl - im Zweierraster bliebe unten
     eine Luecke. Deshalb stehen sie auf dem Telefon einspaltig, dafuer
     quer: Bild links, Text rechts. Das fuellt die Zeile und laesst dem
     laengeren Text mehr Platz.
     Betrifft nur diesen Abschnitt - Leistungen und Ablauf bleiben im
     Zweierraster. */
  .weiterlesen .karten--kachel { grid-template-columns: 1fr; gap: 12px; }

  .weiterlesen .kachel {
    flex-direction: row;
    align-items: stretch;
  }
  /* aspect-ratio muss hier weg: die Bildhoehe richtet sich jetzt nach der
     Texthoehe daneben, nicht mehr nach der eigenen Breite. */
  .weiterlesen .kachel__bildfeld {
    flex: 0 0 38%;
    aspect-ratio: auto;
  }
  .weiterlesen .kachel__inhalt {
    flex: 1;
    justify-content: center;
    padding: 12px 14px;
  }
  .weiterlesen .kachel__text { font-size: 12px; line-height: 18px; }
}


.karte {
  padding: 10px;
  text-align: center;
}

/* Bildgroesse im Original: 274x200px. Die Dateien liegen in voller
   Aufloesung vor und werden hier heruntergerechnet — das haelt sie auf
   hochaufloesenden Bildschirmen scharf. */
.karte__bild {
  width: 274px;
  height: 200px;
  max-width: 100%;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

/* Original: 28px, Schnitt 900, Abstand zum Bild 50px. */
.karte__titel {
  margin: 50px 0 0;
  font-size: 28px;
  line-height: 36px;
  font-weight: 900;
  color: #fff;
}

/* Original: 26px, Schnitt 300, Zeilenhoehe 44px. */
.karte__text {
  margin: 36px 0 0;
  font-size: 26px;
  line-height: 44px;
  font-weight: 300;
  color: var(--text);
}


/* ===========================================================================
   6. LEISTUNGEN
   =========================================================================== */
.leistungen { padding-top: 50px; }
.leistungen .unterueberschrift { margin-top: 53px; }
.leistungen .karten { margin-top: 57px; }
/* Die Leistungskarten stehen im Original einen Hauch dunkler als der
   uebrige Fliesstext. */
.leistungen .karte__text { color: var(--text-karte); max-width: 280px; margin-left: auto; margin-right: auto; }


/* ===========================================================================
   7. ABLAUF
   =========================================================================== */
/* 50px ist der Leitwert fuer den Abstand UEBER der Trennlinie: seit
   11.08.2026 tragen alle Abschnitte der Startseite denselben Wert, damit
   die Linien gleichmaessig sitzen. Mobil sind es entsprechend 36px
   (siehe Medienabfrage weiter unten). Wer den Abstand aendern will,
   aendert ihn bei ALLEN sieben Abschnitten gemeinsam. */
.ablauf { padding-top: 50px; }
.ablauf .unterueberschrift { margin-top: 27px; }
.ablauf .karten { margin-top: 91px; }
.ablauf .karte__text { margin-top: 29px; }
.ablauf .karte__text { max-width: 384px; margin-left: auto; margin-right: auto; }


/* ===========================================================================
   8. PROBIER ES SELBST — eingebetteter Rundgang
   =========================================================================== */
.rundgang { padding-top: 50px; }
.rundgang .unterueberschrift { margin-top: 23px; }

/* Original: 19px, Schnitt 400 bzw. 300, gedaempftes Grau. */
.rundgang__hinweis {
  margin: 56px 0 0;
  font-size: 19px;
  line-height: 19px;
  font-weight: 400;
  color: var(--text-leise);
  text-align: center;
}
.rundgang__tasten {
  margin: 22px 0 0;
  font-size: 19px;
  line-height: 19px;
  font-weight: 300;
  color: var(--text-leise);
  text-align: center;
}

/* Original: 1210px breit, 680px hoch. */
.rundgang__rahmen {
  max-width: 1210px;
  margin: 49px auto 0;
  background: var(--dunkel);
}
.rundgang__fenster {
  display: block;
  width: 100%;
  height: 680px;
  border: 0;
}


/* ===========================================================================
   9. PREISRECHNER
   Der Rechner selbst kommt unveraendert aus preisrechner.css. Hier steht
   nur, was drumherum gehoert.
   =========================================================================== */
.rechner { padding-top: 50px; }
.rechner__untertitel {
  margin: 26px 0 0;
  font-size: 28px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.rechner__hinweis {
  margin: 20px 0 0;
  font-size: 19px;
  line-height: 19px;
  font-weight: 300;
  color: var(--text-leise);
  text-align: center;
}
/* Original: Formularbreite 976px, mittig. */
.rechner .lsc-wrap { max-width: 976px; margin: 81px auto 0; }


/* ===========================================================================
   10. WEITERFUEHRENDE SEITEN
   =========================================================================== */
.weiterlesen { padding-top: 50px; }
.weiterlesen .ueberschrift { margin-top: 70px; }
.weiterlesen .unterueberschrift { margin-top: 51px; }
.weiterlesen .karten { margin-top: 65px; }

/* Bilder hier etwas schmaler als in den uebrigen Karten: 266px. */
.karten--verweise .karte__bild { width: 266px; height: 200px; }
/* Der Kartentitel ist eine h3 um den Knopf. font:inherit stellt genau den
   Zeilenkasten wieder her, den der Knopf vorher als direktes Kind hatte -
   die h3 aendert dadurch optisch nichts. */
.karte__verweistitel { margin: 0; font: inherit; }
.karten--verweise .knopf--verweis { margin-top: 20px; }
.karten--verweise .karte__text { max-width: 309px; margin: 5px auto 0; }


/* ===========================================================================
   11. WER SIND WIR
   Original: Bild links (238px breit), Text rechts (870px), Luecke 60px.
   =========================================================================== */
.vorstellung { padding-top: 50px; }
/* 70px wie unter allen Trennlinien (frueher 27px). */
.vorstellung .ueberschrift { margin-top: 70px; }

.vorstellung__raster {
  display: grid;
  grid-template-columns: 320px minmax(0, 780px);
  gap: 56px;
  justify-content: center;
  align-items: start;
  margin-top: 50px;
  padding: 10px;
}

/* Foto ohne Rahmen und ohne Flaeche dahinter - es steht frei auf dem
   Seitenhintergrund. */
/* 50px tiefer als der Text daneben. */
.vorstellung__person { margin: 50px 0 0; }
.vorstellung__bild {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.vorstellung__name {
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 700;
  color: #fff;
}
/* Kurzer oranger Strich zwischen Name und Funktion - dasselbe Mittel wie
   in den Kacheln, damit die Seite eine gemeinsame Sprache spricht. */
.vorstellung__strich {
  display: block;
  width: 40px;
  height: 2px;
  margin: 12px 0;
  background: var(--orange);
}
/* Funktion unter dem Namen: bewusst zurueckhaltend in Grau, damit sie den
   Namen nicht ueberstrahlt.
   Zwei Klassen im Selektor, damit ".vorstellung__text p" weiter unten
   Farbe und Schriftgrad nicht ueberschreibt - sonst waeren beide gleich
   stark und die spaetere Regel gewaenne. */
.vorstellung__text .vorstellung__rolle {
  margin: 0 0 30px;
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grau-4);
}

/* Fliesstext. Kleiner und mit mehr Zeilenabstand als frueher (21/23px) -
   der alte Wert war fuer die lange Spalte zu eng gesetzt. */
.vorstellung__text p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 30px;
  font-weight: 300;
  color: var(--text-leise);
}
/* Erster Absatz als Auftakt: groesser und heller. */
.vorstellung__auftakt {
  font-size: 23px !important;
  line-height: 36px !important;
  font-weight: 400 !important;
  color: #fff !important;
  margin-bottom: 30px !important;
}

/* Das Zitat, abgesetzt mit orangem Balken. Die Anfuehrungszeichen setzt
   das CSS - im Text stehen sie nicht. */
.vorstellung__zitat {
  margin: 30px 0;
  padding: 22px 26px;
  border-left: 3px solid var(--orange);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--karte) 70%, transparent);
}
.vorstellung__zitat p {
  margin: 0;
  font-size: 21px !important;
  line-height: 32px !important;
  font-weight: 400 !important;
  color: #fff !important;
}
.vorstellung__zitat p::before { content: '\201E'; color: var(--orange); }
.vorstellung__zitat p::after  { content: '\201C'; color: var(--orange); }

/* Orange Hervorhebungen mitten im Fliesstext. Sie tragen die Hausfarbe in
   die untere Haelfte des Abschnitts, in der sonst nur Grau steht. */
.vorstellung__text .vorstellung__akzent { color: var(--orange); font-weight: 400; }

/* Der Satz, mit dem aus dem Werkzeug eine Firma wurde - hervorgehoben
   allein durch weisse Schrift, ohne Linie darueber. */
.vorstellung__stark {
  font-weight: 500 !important;
  color: #fff !important;
}
.vorstellung__text p:last-child { margin-bottom: 0; }
.vorstellung__text strong { font-weight: 400; }


/* ===========================================================================
   12. KONTAKT
   Formular unveraendert aus kontaktformular.css. Hier nur die Ueberschrift.
   =========================================================================== */
.kontakt { padding-top: 50px; }

/* Original: 30px, Schnitt 700, Grossbuchstaben, Laufweite 2.4px.
   Farbe seit 08.2026 wie alle uebrigen Abschnittsueberschriften. */
.kontakt__titel {
  /* 50px Abstand zur Trennlinie wie in allen uebrigen Abschnitten
     (frueher 78px). */
  margin: 70px 0 36px;
  font-size: 30px;
  line-height: 39px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 2.392px;
  text-align: center;
}
.lsc-kf-divider-sub {
  display: block;
  font-size: 23px;
  line-height: 34px;
  font-weight: 400;
  color: var(--text-grau);
  text-align: center;
}
/* padding-top auf 0: der Abstand zur Trennlinie kommt allein aus dem
   margin-top der Ueberschrift (70px wie ueberall), sonst addierte sich
   der Innenabstand aus kontaktformular.css dazu. */
.kontakt .lsc-kf-wrap { max-width: 976px; margin: 0 auto; padding-top: 0; }


/* ===========================================================================
   13. SMARTPHONE

   Alle Werte an der Originalseite bei 390px Fensterbreite gemessen
   (werkzeuge/vergleich/stile-original-mobil.txt).

   Wichtigste Erkenntnis: Die Raster bleiben auf dem Smartphone MEHRSPALTIG
   (Leistungen 3 Spalten, Ablauf 2) und werden nur kleiner. Sie einspaltig
   zu schalten war der Grund, warum der Nachbau mobil fast doppelt so lang
   war wie das Original.
   =========================================================================== */
@media (max-width: 1024px) {

  /* Seitenrand auf schmalen Bildschirmen (11.08.2026).
     Vorher stand hier padding: 0 - saemtliche Inhalte klebten dadurch an
     der Displaykante. 14px geben ihnen Luft, ohne nennenswert Breite zu
     kosten. Gilt fuer alles innerhalb von <main>: Kacheln, Ueberschriften,
     Vorstellungstext, Rechner und Formulare.
     Die Trennlinien bekommen weiter unten volle Breite, damit sie durch
     den neuen Rand nicht doppelt eingerueckt werden. */
  /* Kein Hochziehen in der Handy-Ansicht: der Leitsatz, der den Versatz
     oben ausgleicht, ist hier ausgeblendet. */
  .inhaltsflaeche { margin-top: 0; padding: 0 14px; }
  .trennlinie { width: 100%; }

  /* --- Kopfbereich ------------------------------------------------------ */
  .kopf-mobil { padding: 20px 10px 0; }
  .kopf-mobil__logo { max-width: 300px; }

  /* Beide Zeilen bilden zusammen die h1 der Smartphone-Fassung. Die h1
     selbst traegt keine eigenen Masse, die Zeilen darin sind unveraendert
     die beiden Bloecke von vorher. */
  .kopf-mobil__titel { margin: 0; }

  /* Original: 21px, Schnitt 700, orange, zentriert. */
  .kopf-mobil__zeile {
    display: block;
    margin: 9px 0 0;
    font-size: 21px;
    line-height: 21px;
    font-weight: 700;
    color: var(--orange);
    text-align: center;
  }

  /* Video laeuft mobil ueber die volle Breite, ohne Rand. */
  .kopf-mobil__video { width: 100%; height: auto; margin-top: 40px; }

  /* --- Kopfbereich Handy, neu gestaltet 11.08.2026 -----------------------
     Vorher: zwei Textbloecke mit je einer Schaltflaeche darunter, dazwischen
     100px Leerraum - der Bereich wirkte dadurch beliebig gefuellt.
     Jetzt eine Abfolge mit klarer Rangfolge: Leitsatz, Leistungsbegriffe,
     Aussage, Schaltflaechen, Einladung zum Video. */
  .kopf-mobil-texte { padding: 30px 16px 0; text-align: center; }

  /* Die drei Leistungsbegriffe stehen auf dem Handy untereinander und
     zentriert - nebeneinander brachen sie auf schmalen Bildschirmen
     ungleichmaessig um. Die orangen Trennpunkte der Desktop-Ansicht
     (die <i>-Elemente im HTML) sind hier ausgeblendet. */
  .kopf-mobil-texte__marken {
    display: grid;
    gap: 7px;
    margin: 0;
    text-align: center;
  }
  .kopf-mobil-texte__marken i { display: none; }
  .kopf-mobil-texte__marken span {
    font-size: 14px;
    line-height: 17px;
    font-weight: 600;
    color: #fff;
  }

  /* Original: 18px, Zeilenhoehe 27px, Schnitt 800, 100px Abstand nach
     unten. Jetzt kleiner gesetzt und mit normalem Abstand. */
  .kopf-mobil-texte__block {
    margin: 26px 0 0;
    font-size: 17px;
    line-height: 27px;
    font-weight: 400;
    color: #fff;
  }
  /* Zweiter Block: Schriftart, Groesse, Schnitt und Farbe wie beim ersten -
     nur der Abstand nach oben ist eigens gesetzt. */
  .kopf-mobil-texte__block--zwei { margin-top: 30px; }
  .kopf-mobil-texte .akzent { color: var(--orange); }

  /* Schaltflaechen: "Preis berechnen" breit und gefuellt, darunter Login
     und Kontakt zu zweit in einer Reihe. Dieselbe Rangfolge wie in der
     Aktionsleiste der Desktop-Ansicht. */
  .kopf-mobil-texte__leiste { display: grid; gap: 9px; margin-top: 26px; }
  .kopf-mobil-texte__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

  .mobil-akt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 48px Mindesthoehe: kleiner sollte auf einem Beruehrungsbildschirm
       nichts sein, was angetippt werden muss. */
    min-height: 48px;
    padding: 14px 12px;
    border: 1px solid var(--rahmen);
    border-radius: 13px;
    color: #fff;
  }
  .mobil-akt__titel { font-size: 15px; line-height: 19px; font-weight: 700; }
  .mobil-akt__unterzeile {
    font-size: 11.5px;
    line-height: 15px;
    font-weight: 600;
    color: var(--grau-4);
  }

  .mobil-akt--haupt {
    background: var(--orange);
    border-color: var(--orange);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--orange) 38%, transparent);
  }
  .mobil-akt--haupt .mobil-akt__titel {
    font-size: 19px;
    line-height: 23px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .mobil-akt--haupt .mobil-akt__unterzeile { color: rgba(255, 255, 255, 0.88); }

  /* --- Ueberschriften --------------------------------------------------- */
  .ueberschrift        { font-size: 35px; line-height: 46px; }
  .ueberschrift--eng   { line-height: 35px; }
  .unterueberschrift   { font-size: 20px; line-height: 26px; }
  .unterueberschrift--eng { line-height: 20px; }

  /* --- Abschnittsabstaende ---------------------------------------------- */
  .leistungen  { padding-top: 36px; }
  .ablauf      { padding-top: 36px; }
  .rundgang    { padding-top: 36px; }
  .rechner     { padding-top: 36px; }
  .weiterlesen { padding-top: 36px; }
  /* Diese eine Ueberschrift laeuft mobil abweichend: 32px auf 50px Zeile. */
  .weiterlesen .ueberschrift { font-size: 32px; line-height: 50px; }
  /* Diese Unterzeile laeuft mobil abweichend: 28px Zeile, Schnitt 800. */
  .weiterlesen .unterueberschrift { margin-top: 16px; line-height: 28px; font-weight: 800; }
  .vorstellung { padding-top: 36px; }
  .kontakt     { padding-top: 36px; }

  .leistungen .unterueberschrift { margin-top: 50px; }
  .leistungen .karten { margin-top: 1px; }
  .ablauf .unterueberschrift { margin-top: 42px; }
  .ablauf .karten { margin-top: 26px; }
  .weiterlesen .karten { margin-top: 30px; }

  /* --- Kartenraster: bleibt mehrspaltig, nur kleiner -------------------- */
  .karten { padding: 10px 0; }
  .karten--drei     { max-width: 370px; gap: 20px; grid-auto-rows: minmax(240px, auto); }
  .karten--zwei     { max-width: 370px; grid-template-columns: repeat(2, 1fr);
                      gap: 50px 0; grid-auto-rows: minmax(191px, auto); }
  .karten--verweise { max-width: 370px; gap: 17px; }

  .karte { padding: 0; }

  /* Original: Bilder 110x80px in Leistungen und Ablauf. */
  .karte__bild { width: 110px; height: 80px; }
  .karten--verweise .karte__bild { width: 106px; height: 80px; }

  /* Original: Titel 15/17 Schnitt 900, Text 11/14 Schnitt 400. */
  .karte__titel {
    margin-top: 14px;
    font-size: 15px;
    line-height: 17px;
    font-weight: 900;
  }
  .karte__text {
    margin-top: 16px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 400;
  }
  .leistungen .karte__text,
  .ablauf .karte__text,
  .karten--verweise .karte__text { max-width: none; }
  .ablauf .karte__text { margin-top: 35px; }

  .karten--verweise .knopf--verweis {
    margin-top: 14px;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 13px;
  }
  .karten--verweise .karte__text { margin-top: 17px; }

  /* --- Rundgang --------------------------------------------------------- */
  .rundgang .unterueberschrift { margin-top: 19px; }
  .rundgang__hinweis { margin-top: 19px; font-size: 15px; line-height: 15px; }
  .rundgang__tasten  { display: none; }   /* im Original mobil ausgeblendet */
  .rundgang__rahmen  { margin-top: 26px; }
  /* Feste Hoehe: das Original gibt dem Rundgang mobil ebenfalls eine
     feste Hoehe, kein Anteil der Fensterhoehe. */
  .rundgang__fenster { height: 741px; }

  /* --- Preisrechner ----------------------------------------------------- */
  .rechner__untertitel { margin-top: 0; font-size: 20px; line-height: 20px; }
  .rechner__hinweis    { margin-top: 0; font-size: 15px; line-height: 17px; }
  .rechner .lsc-wrap   { margin-top: 30px; }

  /* --- Wer sind wir ----------------------------------------------------- */
  .vorstellung__raster {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 99px;
    padding: 0;
  }
  /* Der Versatz von 50px gilt nur nebeneinander - untereinander entstuende
     daraus eine unnoetig grosse Luecke zur Ueberschrift. */
  .vorstellung__person { margin-top: 0; }
  .vorstellung__bild { width: 190px; max-width: 190px; }
  .vorstellung__name { font-size: 20px; line-height: 25px; }
  .vorstellung__strich { margin: 9px 0; }
  .vorstellung__text .vorstellung__rolle { font-size: 11.5px; margin-bottom: 20px; }

  .vorstellung__text p { font-size: 15px; line-height: 26px; margin-bottom: 18px; }
  .vorstellung__auftakt { font-size: 18px !important; line-height: 28px !important; margin-bottom: 22px !important; }
  .vorstellung__zitat { margin: 22px 0; padding: 16px 18px; }
  .vorstellung__zitat p { font-size: 16px !important; line-height: 26px !important; }
  .vorstellung__stark { padding-top: 18px; }

  /* --- Kontakt ---------------------------------------------------------- */
  .kontakt__titel { margin-top: 70px; font-size: 30px; line-height: 39px; }
  /* !important noetig: kontaktformular.css wird spaeter geladen und
     wuerde sonst mit einem kleineren Grad gewinnen. */
  .lsc-kf-divider-sub { font-size: 19px !important; line-height: 28px; }
  /* Text der Verweiskarten mobil etwas gedaempfter und leichter. */
  .karten--verweise .karte__text { color: var(--text-karte); font-weight: 300; }
}