/* ===========================================================================
   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); }

.kachel__bildfeld { position: relative; }

/* Schrittnummer im Abschnitt "So funktioniert's" -- rechts neben der
   Ueberschrift, im selben Stil wie das Infozeichen bei den Leistungen:
   gleiche Groesse, Ziffer im Dunkelblau der Kachel. Das Element steht im
   HTML deshalb im Inhalt und nicht im Bildfeld. */
.ablauf .kachel__inhalt { position: relative; }
.ablauf .kachel__nummer {
  position: absolute;
  /* ACHTUNG: Diese Kacheln haben den urspruenglichen Innenabstand von
     24 px, nicht die 18 px der Leistungskacheln -- Werte nicht von dort
     uebernehmen. Die 25 px sind nachgemessen: Die Mitte der Zahl trifft
     damit die Mitte der Titelzeile. */
  right: 24px;
  top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--karte);
  font-family: Arial, Helvetica, sans-serif;
  /* Ausgleich UNTEN, nicht oben: Bei 14 px sitzt die Ziffer von sich aus
     einen Pixel zu tief (oben 6,5, unten 5,5). */
  padding-bottom: 1px;
  font-size: 14px;
  line-height: 1;
  /* KEINE -webkit-text-stroke, auch wenn die Ziffer kraeftiger sein
     soll: Die Kontur liegt mittig auf der Buchstabenkante, waechst zur
     Haelfte nach innen und stumpft die Form ab. Kraft kommt hier ueber
     die Schriftgroesse. */
  font-weight: 900;
}
/* Die Zwei einen halben Pixel nach links. Ihre Glyphe sitzt in Arial
   rechtslastig (Rand links 0,30 px, rechts 0,54 px bei 14 px), und der
   breite Fuss verstaerkt den Eindruck. Ein Pixel Innenabstand rechts
   verschiebt sie um einen halben.
   Der Selektor zaehlt die Kacheln durch: Wird die Reihenfolge der
   Schritte geaendert, gehoert diese Regel zur neuen Position. */
.ablauf .kachel:nth-child(2) .kachel__nummer { padding-right: 1px; }

/* Damit ein zweizeiliger Titel nicht unter die Zahl laeuft. */
.ablauf .kachel__titel { padding-right: 30px; }

.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; }

/* ---------------------------------------------------------------------------
   LEISTUNGEN — flachere Kacheln als im Rest der Seite

   Diese sechs Kacheln haben keinen "Mehr erfahren"-Knopf; anklickbar ist
   die ganze Kachel, angekuendigt wird das durch ein Infozeichen. Bildfeld,
   Innenabstand und Zeilenhoehe sind knapper als die Grundwerte weiter
   oben -- eine Kachel ist dadurch 345 statt 429 px hoch.

   Die Kacheln im Abschnitt "So funktioniert's" behalten ihren Knopf und
   die grosszuegigeren Abstaende. Werte dort nicht von hier ableiten.
   --------------------------------------------------------------------------- */
/* Das Infozeichen: kleiner oranger Kreis mit ausgestanztem i, rechts auf
   Hoehe der Kachelueberschrift. Es ist absolut im Inhalt verankert und
   NICHT Teil der Titelzeile -- als es das einmal war, nahm es dem Titel
   Platz weg und wanderte mit dessen Zeilenzahl auf und ab.
   Auf sehr schmalen Telefonen sitzt es im Bild, siehe Dateiende. */
/* Achtung: Dieses position:relative wuerde die Oeffner-Schaltflaeche der
   Kachel einfangen, wenn sie im Inhalt laege. Sie steht deshalb im HTML
   direkt in der <article> -- siehe css/leistungen-fenster.css. */
.leistungen .kachel__inhalt { position: relative; }
.leistungen .kachel__inhalt::after {
  /* Das i ist GEZEICHNET, nicht gesetzt: zwei Verlaeufe bilden Punkt und
     Strich. Als Buchstabe liess es sich nicht befriedigend einstellen --
     der Abstand zwischen Punkt und Strich ist in jeder Standardschrift zu
     klein fuer diese Groesse, und die senkrechte Lage haengt an den
     Schriftmetriken, sodass es nach jedem Groessenwechsel verrutschte.

     Desktop, 21 px Kreis:
       Punkt   5 px rund, von oben 3 -> 3 bis 8
       Luecke  2 px                  -> 8 bis 10
       Strich  3 x 8, von unten 3    -> 10 bis 18
     Oben wie unten bleiben 3 px Rand.

     ZWEI FALLEN, in beide schon hineingetappt:
     1. Alle Masse in GANZEN Pixeln. Bei halben Pixeln legt der Browser
        die Kante zwischen zwei Bildpunkte und rechnet sie grau aus --
        der Strich wirkt ausgefranst.
     2. Kreisbreite und Strichbreite muessen beide gerade oder beide
        ungerade sein. 3 px mittig in 22 px laegen auf 9,5 -- unscharf;
        auf 9 geschoben sitzt der Strich sichtbar links der Mitte.
        Daher 21 px: (21 - 3) / 2 = 9, scharf und mittig.

     Der Punkt ist rund und ein Viertel breiter als der Strich. Gleiche
     Breite wirkte zart, weil eine Kreisflaeche nur rund vier Fuenftel
     eines Quadrats misst; anderthalbfach wirkte kopflastig. */
  content: '';
  position: absolute;
  /* rechte Innenkante der Kachel */
  right: 20px;
  /* Innenabstand oben + halber Ueberschuss der Titelzeile (27 - 21) */
  top: 21px;
  box-sizing: border-box;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  /* Punkt und Strich in der Farbe der Kachelflaeche -- sie wirken aus dem
     Kreis ausgestanzt. Zuletzt die Kreisfarbe selbst. */
  background:
    radial-gradient(circle at center, var(--karte) 49%, transparent 50%)
      center top 3px / 5px 5px no-repeat,
    linear-gradient(var(--karte), var(--karte))
      center bottom 3px / 3px 8px no-repeat,
    var(--orange);
  transition: transform 0.25s, box-shadow 0.25s;
}
/* Damit ein zweizeiliger Titel nicht unter das Zeichen laeuft. */
.leistungen .kachel__titel { padding-right: 30px; }
.leistungen .kachel:hover .kachel__inhalt::after {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.22);
}

.leistungen .kachel__bildfeld { aspect-ratio: 16 / 9; }
.leistungen .kachel__inhalt   { padding: 18px 20px 20px; gap: 10px; }
.leistungen .kachel__text     { line-height: 22px; }

/* 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; }

  /* Leistungen: dieselbe Kuerzung wie oben, in den Massen des Telefons. */
  /* Silbentrennung im Kacheltext. Die Spalten sind hier nur rund 142 px
     breit; ein langes Wort am Zeilenende reisst leicht eine ganze Zeile
     auf -- "Einrichtungsberater" kostete die Kachel Raumvermessung eine
     fuenfte Zeile. Setzt lang="de" am <html>-Element voraus, sonst
     trennt der Browser nicht. */
  .leistungen .kachel__text { hyphens: auto; -webkit-hyphens: auto; }

  /* Telefon: rechts neben der Ueberschrift wie auf dem Desktop, aber
     dichter am Kachelrand. KNAPP GERECHNET: Textbereich 142 px,
     laengster einzeiliger Titel 129 px, das Zeichen ragt 7 px hinein,
     der Titel haelt 9 px frei -- 4 px Reserve, bevor ein Titel umbricht.
     Wer die Titel aendert, sollte das nachmessen. */
  .leistungen .kachel__titel { padding-right: 9px; }
  .leistungen .kachel__inhalt::after {
    bottom: auto;
    right: 4px;
    /* Innenabstand oben + halber Ueberschuss der Titelzeile (19 - 15) */
    top: 14px;
    /* Kleiner als auf dem Desktop -- dort wirkte der Kreis zu praegnant.
       Eigene Masse fuer das gezeichnete i, 15 px Kreis:
         Punkt   4 px rund, von oben 2 -> 2 bis 6
         Luecke  2 px                  -> 6 bis 8
         Strich  3 x 5, von unten 2    -> 8 bis 13
       Oben wie unten bleiben 2 px Rand. Der Strich sitzt waagerecht auf
       ganzen Pixeln; beim runden Punkt faellt der halbe Pixel nicht auf,
       weil eine Rundung ohnehin weiche Kanten hat. */
    width: 15px;
    height: 15px;
    background:
      radial-gradient(circle at center, var(--karte) 49%, transparent 50%)
        center top 2px / 4px 4px no-repeat,
      linear-gradient(var(--karte), var(--karte))
        center bottom 2px / 3px 5px no-repeat,
      var(--orange);
  }

  .leistungen .kachel__inhalt { padding: 12px 12px 13px; gap: 7px; }
  .leistungen .kachel__text { line-height: 17px; }

  /* Schrittnummer -- hier groesser als das Infozeichen bei den
     Leistungen. Die vier Titel sind kurz, es ist also Platz, und bei
     15 px wirkte die Ziffer duenn und sass nicht sauber mittig.

     20 px Kreis mit 13 px Ziffer geht ohne jeden Ausgleich exakt auf:
     oben wie unten 5 px. Kein halber Pixel, der auf Geraeten mit
     hoher Punktdichte kippen koennte -- das war der Fehler zuvor.

     Der Kreis ragt 14 px in den Textbereich, der Titel haelt deshalb
     16 px frei. */
  .ablauf .kachel__titel { padding-right: 16px; }
  .ablauf .kachel__nummer {
    right: 8px;
    top: 13px;
    width: 20px;
    height: 20px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
  }

  /* Feinausgleich je Ziffer, nur auf dem Telefon.

     Die Zwei: Der halbe Pixel nach links, den sie auf dem Desktop
     bekommt, ist hier zu viel -- zusammen mit ihrem eigenen Versatz
     stand sie 0,67 px zu weit links. Hier also ohne.

     Drei und Vier: Messbar sitzen alle vier Ziffern senkrecht gleich
     (Oberkante 9,55 px ueber der Grundlinie). Die Drei hat oben zwei
     Rundungen, die Vier eine Spitze -- beide wirken dadurch hoeher, als
     sie sind. Der halbe Pixel ist ein Ausgleich fuers Auge, nicht fuer
     das Massband. */
  .ablauf .kachel:nth-child(2) .kachel__nummer { padding-right: 0; }
  .ablauf .kachel:nth-child(3) .kachel__nummer,
  .ablauf .kachel:nth-child(4) .kachel__nummer { padding-top: 1px; }

  /* 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; }
}

/* ---------------------------------------------------------------------------
   Sehr schmale Telefone (iPhone SE und aehnliche, bis 380 px)

   Die Kachelspalte ist hier rund 11 px schmaler, und beide Plaetze im
   Textbereich gehen schief: Neben der Ueberschrift kippen Titel in eine
   zweite Zeile, unten rechts stoesst die letzte Textzeile dagegen.
   Deshalb sitzt das Zeichen hier im Bild -- dort laeuft kein Text
   dagegen.

   Dieser Block gehoert als EIGENE Regel ans Dateiende, nicht
   verschachtelt in den 700-px-Block: Ein @media in einem @media wurde
   beim Nachmessen nicht ausgewertet. Bitte nicht nach oben schieben.
   --------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .leistungen .kachel__titel { padding-right: 0; }
  .leistungen .kachel__inhalt::after { content: none; }
  .leistungen .kachel__bildfeld::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    /* Masse wie im Block darueber, dazu ein Schatten fuer helle Bilder */
    background:
      radial-gradient(circle at center, var(--karte) 49%, transparent 50%)
        center top 2px / 4px 4px no-repeat,
      linear-gradient(var(--karte), var(--karte))
        center bottom 2px / 3px 5px no-repeat,
      var(--orange);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  }
}

/* ===========================================================================
   Kopf "Preis berechnen" (06.10.2026)
   Auf Tablet und Telefon standen Ueberschrift und "Sofort & Anonym" mit
   0 px Abstand und einer Zeilenhoehe gleich der Schriftgroesse direkt
   aufeinander -- das wirkte gedraengt. Die Hinweiszeile darunter ist
   entfallen (sie steht jetzt am Feld Projektadresse).
   =========================================================================== */
@media (max-width: 1024px) {
  .rechner__untertitel { margin-top: 14px; line-height: 1.25; }
}

/* ===========================================================================
   Handy-Kopfvideo: festes Seitenverhaeltnis 4:3 (06.10.2026)
   Das Handy-Video ist 960 x 720. Ohne feste Angabe richtet sich die Hoehe
   zuerst nach dem Vorschaubild und erst nach dem Laden nach dem Video --
   unterscheiden sich die beiden, springt der Kasten und der Inhalt
   darunter rutscht. Mit aspect-ratio steht die Hoehe ab dem ersten
   Bildaufbau fest. object-fit: cover fuellt den Kasten auch dann sauber,
   falls einmal ein Bild in anderem Format eingesetzt wird.
   Wird das Video gegen eines mit anderem Format getauscht: Wert anpassen.
   =========================================================================== */
.kopf-mobil__video { aspect-ratio: 4 / 3; object-fit: cover; }

/* ===========================================================================
   Handy: Leistungsbegriffe unter dem Video auf zwei Zeilen (06.10.2026)
   Vorher drei Zeilen a 17 px mit 7 px Abstand = 65 px Gesamthoehe. Jetzt
   zwei Zeilen mit groesserem Abstand dazwischen; min-height haelt die
   Gesamthoehe bei 65 px, damit der Absatz "Wir verbinden ..." darunter
   NICHT nach oben rueckt (Vorgabe des Betreibers). Der Rest bleibt unten
   als Leerraum stehen.
   Wer die Zeilenhoehe oder Schriftgroesse der Begriffe aendert, muss
   min-height mit nachziehen.
   =========================================================================== */
@media (max-width: 1024px) {
  .kopf-mobil-texte__marken--zwei { gap: 14px; min-height: 65px; align-content: start; }
}

/* ===========================================================================
   Handy-Kopf (06.10.2026, Teil 2)
   =========================================================================== */
@media (max-width: 1024px) {
  /* "Laservermessung" mit je einer kurzen, feinen Linie links und rechts. */
  .kopf-mobil-texte__einzel {
    display: flex; justify-content: center; align-items: center; gap: 10px;
  }
  .kopf-mobil-texte__einzel::before,
  .kopf-mobil-texte__einzel::after {
    content: ""; width: 22px; height: 2px; border-radius: 1px;
    background: var(--orange);
  }

  /* Drei Knoepfe in einer Reihe, "Preis berechnen" in der Mitte etwas
     breiter. Gleich hoch durch das Raster (align-items: stretch). */
  /* minmax(0, ...): Spalten bleiben exakt im Verhaeltnis, auch wenn ein
     langes Wort ("Kundenbereich") eine Spalte sonst aufdruecken wuerde. */
  .kopf-mobil-texte__leiste--reihe {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .kopf-mobil-texte__leiste--reihe .mobil-akt { padding: 12px 6px; text-align: center; }

  /* Der mittlere Knopf: weiterhin orange gefuellt, aber ohne den
     kraeftigen Leuchtschatten und ohne Grossbuchstaben -- er soll nicht
     mehr so "knallen". Schrift wie die Nachbarn, nur fetter. */
  .kopf-mobil-texte__leiste--reihe .mobil-akt--haupt {
    box-shadow: none;
  }
  .kopf-mobil-texte__leiste--reihe .mobil-akt--haupt .mobil-akt__titel {
    font-size: 15px; line-height: 18px; font-weight: 800;
    text-transform: none; letter-spacing: 0;
    text-wrap: balance;
  }
}

/* Sehr schmale Telefone (unter 360 px, z. B. iPhone SE 1. Gen.): etwas
   kleinere Unterzeilen und weniger Innenabstand, damit "Kundenbereich"
   in den schmalen Knopf passt. */
@media (max-width: 359px) {
  .kopf-mobil-texte__leiste--reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 7px; }
  .kopf-mobil-texte__leiste--reihe .mobil-akt { padding: 10px 3px; }
  .kopf-mobil-texte__leiste--reihe .mobil-akt__unterzeile { font-size: 10.5px; }
}

/* Leistungsbegriffe gleich gross wie der Absatz darunter (06.10.2026):
   17 px wie "Wir verbinden ...", Schnitt 500 statt 600 -- bei gleicher
   Groesse wirkte halbfett dominanter als der Absatz. Zwei Zeilen a 22 px
   + 14 px Abstand = 58 px; min-height 65 px (oben) haelt die Hoehe, der
   Absatz darunter rueckt also weiterhin nicht. */
@media (max-width: 1024px) {
  .kopf-mobil-texte__marken--zwei span { font-size: 17px; line-height: 22px; font-weight: 500; }
}
/* Sehr schmale Telefone: "3D-Gebaeudescan & 360° Rundgang" muss in eine
   Zeile passen. */
@media (max-width: 359px) {
  .kopf-mobil-texte__marken--zwei span { font-size: 15.5px; }
}

/* Mehr Luft ueber und unter den drei Knoepfen (06.10.2026):
   ueber den Knoepfen 26 -> 40 px, darunter 30 -> 40 px. */
@media (max-width: 1024px) {
  .kopf-mobil-texte__leiste--reihe { margin-top: 40px; }
  .kopf-mobil-texte__block--zwei { margin-top: 40px; }
}

/* "Unsere Leistungen" auf dem Handy (06.10.2026): Der weisse Text
   "Fuer Handwerker, Bauherren ..." stand 50 px unter der Ueberschrift,
   aber nur 11 px ueber den Kacheln. Jetzt 34 px darueber, 30 px darunter
   (Kacheln: 1 px -> 20 px Aussenabstand, plus 10 px aus dem Raster). */
@media (max-width: 1024px) {
  .leistungen .unterueberschrift { margin-top: 34px; }
  .leistungen .karten { margin-top: 20px; }
}

/* Kopf "Preis berechnen" auf Tablet/Handy (06.10.2026, Teil 2): Seit die
   Hinweiszeile entfallen ist, stand "Sofort & Anonym" 14 px unter der
   Ueberschrift, aber 62 px ueber "Flaeche". Jetzt 28 px darueber und
   44 px darunter (12 px Aussenabstand + 32 px Innenabstand von .lsc-wrap). */
@media (max-width: 1024px) {
  .rechner__untertitel { margin-top: 28px; }
  .rechner .lsc-wrap { margin-top: 12px; }
}