/* Fulmora Media — die oeffentliche Seite
   ================================================================

   FARBEN, BEWUSST GEWAEHLT

   Die Zielgruppe ist der frisch gegruendete deutsche Mittelstaendler:
   vorsichtig, wertet Solidität hoeher als Schwung, und sein erster
   Gedanke bei einem unaufgeforderten Angebot ist "wo ist der Haken".
   Die Farbwahl arbeitet genau gegen diesen Gedanken.

   TIEFES MITTERNACHTSBLAU als Grund (#0a0e18). Blau ist die
   Vertrauensfarbe im Geschaeftlichen - Verlaesslichkeit, Kompetenz,
   Ruhe. Tief und dunkel statt hell, weil dunkle Flaechen wertiger
   wirken. Kein reines Schwarz: das ist hart und kalt. Kein Violett:
   das ist der Startup-Griff und wirkt hier fehl am Platz.

   KUEHLES BLAU als Struktur (#4a6cf7). Traegt Linien, Zahlen,
   Dachzeilen - alles, was Ordnung und Kompetenz signalisiert.

   WARMES BERNSTEIN als Handlungsfarbe (#e8913c). Jeder Knopf, jede
   Stelle, an der jemand etwas tun soll. Warme Farben treiben zur
   Handlung, kuehle beruhigen - deshalb die Aufteilung: kuehl fuer
   Vertrauen, warm fuer den naechsten Schritt. Bernstein ist zugleich
   die Farbe von Werkstattlicht, Messing und Feierabendsonne. Es
   verbindet die Seite mit den Bildern und mit der Welt des Handwerks.

   DIE BILDER zeigen Licht selbst, nicht die Welt der Kunden. Der erste
   Versuch waren Werkstattaufnahmen - falsch: ein Besucher haelt uns dann
   fuer eine Schlosserei. Fulmora kommt von fulmen, dem Blitz - das Motiv ist
   Lichtstrahl aus der Bildmarke, fotografiert: abstrakt, dunkel,
   zurueckhaltend, in genau dieser Farbwelt. Das bindet Bernstein und
   Blau zusammen, statt sie nebeneinanderzustellen.
   ================================================================ */

:root {
  --nacht: #0a0e18;
  --nacht-tief: #06080f;
  --tinte: #ffffff;
  --getoent: #9aa4c0;
  --blau: #4a6cf7;
  --blau-hell: #7a92ff;
  --bernstein: #e8913c;
  --bernstein-tief: #cf7a28;
  --flaeche: rgba(255, 255, 255, .05);
  --flaeche-hoch: rgba(255, 255, 255, .085);
  --linie: rgba(255, 255, 255, .12);
  --linie-zart: rgba(255, 255, 255, .06);
  --radius: 20px;
  --spalte: 1160px;
  --rand: clamp(22px, 5vw, 56px);
  --schrift: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
.innen { max-width: var(--spalte); margin-inline: auto; padding-inline: var(--rand); }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.034em; line-height: 1.03; }
p { margin: 0; color: var(--getoent); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bernstein); outline-offset: 3px; border-radius: 4px; }

/* ---------- Kopfzeile ---------- */

.kopf {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  max-width: var(--spalte);
  margin-inline: auto;
  padding: 24px var(--rand);
}
.marke { display: flex; align-items: center; gap: 13px; text-decoration: none; font-weight: 800; letter-spacing: -.03em; font-size: 1.1rem; }
/* Groesser als der Schriftzug hoch ist: das Zeichen soll die
   Kopfzeile tragen. Bei 30 px sass es daneben, statt zu wirken. */
.marke-zeichen { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 11px; }
.marke-zweit { color: var(--blau-hell); font-weight: 700; }
.kopf-link { color: var(--getoent); text-decoration: none; font-size: 15px; font-weight: 500; }
.kopf-link:hover { color: var(--tinte); }

/* ---------- Buehne mit Foto ---------- */

.buehne { position: relative; min-height: min(88vh, 760px); display: flex; align-items: flex-end; overflow: hidden; }

.buehne-bild {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center 58%;
  /* Das Foto traegt die Stimmung, nicht die Aussage - deshalb gedaempft
     und leicht ins Blaue gezogen, damit die Schrift steht. */
  filter: saturate(1.02) brightness(.82);
}

.buehne-schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--nacht) 4%, rgba(10,14,24,.86) 34%, rgba(10,14,24,.42) 68%, rgba(10,14,24,.55) 100%),
    radial-gradient(90% 70% at 12% 100%, rgba(232,145,60,.16) 0%, transparent 62%);
}

/* Der Inhalt sitzt am unteren Rand und waechst nach oben. Ohne
   Abstand oben stiess er in die schwebende Kopfzeile, sobald eine
   Zeile dazukam - genau das ist mit der Absenderzeile passiert. */
.buehne-inhalt {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(96px, 14vw, 132px) clamp(52px, 9vw, 96px);
}

h1 { font-size: clamp(2.35rem, 6.6vw, 4.3rem); max-width: 15ch; margin-bottom: 24px; }
.vorspann { font-size: clamp(1.06rem, 2.2vw, 1.3rem); line-height: 1.5; max-width: 50ch; color: #c6cde2; }

/* ---------- Die Zeitzusage ----------
   Der erste Entwurf war eine gefuellte Pille mit pulsierendem Punkt -
   der Standardgriff jeder SaaS-Seite, und genau deshalb wirkte er
   billig. Jetzt traegt die Typografie die Aussage, und das einzige
   bewegte Element ist Licht, das ueber eine Haarlinie wandert: das
   Motiv der Marke, nicht ein Abzeichen von der Stange. */

.zeitzusage { margin-top: 34px; max-width: 34rem; }

.lichtlinie {
  display: block;
  height: 1px;
  background: var(--linie);
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}
.lichtlinie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,145,60,.15) 26%,
    var(--bernstein) 50%,
    rgba(232,145,60,.15) 74%,
    transparent 100%);
  transform: translateX(-100%);
  animation: wandern 4.6s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes wandern {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .lichtlinie::after {
    animation: none;
    transform: none;
    background: linear-gradient(90deg, var(--bernstein) 0%, transparent 62%);
    opacity: .7;
  }
}

.zeitzusage p {
  font-size: clamp(.98rem, 1.9vw, 1.08rem);
  line-height: 1.5;
  color: var(--getoent);
  letter-spacing: -.008em;
}
.zeitzusage b { color: var(--tinte); font-weight: 700; }

/* Die Zahl ist die Aussage - also bekommt sie den Akzent und etwas
   mehr Groesse, statt eines Kastens drumherum. */
.zeitzusage .zahl {
  color: var(--bernstein);
  font-size: 1.24em;
  font-weight: 800;
  letter-spacing: -.03em;
}

/* ---------- Knoepfe ---------- */

.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 36px; }

.knopf {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--bernstein);
  color: #1a1207;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.015em;
  text-decoration: none;
  border: 1px solid var(--bernstein);
  box-shadow: 0 10px 30px -12px rgba(232,145,60,.55);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.knopf:hover { background: var(--bernstein-tief); border-color: var(--bernstein-tief); transform: translateY(-2px); box-shadow: 0 16px 38px -14px rgba(232,145,60,.7); }

.knopf.still { background: transparent; color: var(--tinte); border-color: var(--linie); box-shadow: none; }
.knopf.still:hover { border-color: var(--tinte); background: transparent; transform: none; }

.beiwort { font-size: 14.5px; color: var(--getoent); }

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

.abschnitt { padding-block: clamp(64px, 10vw, 118px); }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie-zart); }
.abschnitt h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); max-width: 18ch; margin-bottom: 18px; }
.abschnitt .vorspann { margin-bottom: 42px; }

.dach { font-size: 14px; font-weight: 700; color: var(--blau-hell); margin-bottom: 13px; letter-spacing: -.005em; }

/* ---------- Beweis: drei Fenster ----------

   Die Fenster zeigen echte Aufnahmen aus dem Generator und fuehren auf
   die vollstaendige Seite. Sie stehen leicht nach innen gedreht, wie
   drei aufgestellte Bildschirme; beim Zeigen richtet sich das
   angesteuerte auf, hebt sich an, und die Seite darin faehrt nach
   unten weiter.

   Das ist die ganze Bewegung, und sie hat einen Zweck: Sie beantwortet
   die Frage, die der Besucher an dieser Stelle wirklich hat - ist das
   eine Attrappe oder eine ganze Seite? Im Ruhezustand ist alles
   sichtbar, es wartet nichts auf einen Scrollauslöser.
*/

.fenster-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1400px;
}

.fenster {
  position: relative;
  display: block;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transform-style: preserve-3d;
  transform: rotateY(var(--dreh, 0deg)) translateZ(0);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1),
              box-shadow .5s cubic-bezier(.2, .7, .2, 1),
              border-color .3s ease;
}
.fenster:nth-child(1) { --dreh: 7deg; }
.fenster:nth-child(2) { --dreh: 0deg; }
.fenster:nth-child(3) { --dreh: -7deg; }

.fenster:hover, .fenster:focus-visible {
  --dreh: 0deg;
  transform: rotateY(0deg) translateY(-8px) scale(1.015);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .95);
  border-color: var(--bernstein);
}
.fenster:focus-visible { outline: 2px solid var(--bernstein); outline-offset: 4px; }

.fenster-leiste {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--linie-zart);
  position: relative; z-index: 2;
  background: var(--flaeche);
}
.fenster-leiste i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); flex: 0 0 auto; }
.fenster-leiste span { margin-left: 8px; font-size: 10.5px; color: var(--getoent); opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Das Glas zeigt den oberen Ausschnitt; das Bild ist hoeher als der
   Rahmen und faehrt beim Zeigen weiter herunter. */
.fenster-glas {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
  background: var(--flaeche-hoch);
}
.fenster-glas img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: transform 3.4s cubic-bezier(.25, .6, .25, 1);
}
.fenster:hover .fenster-glas img,
.fenster:focus-visible .fenster-glas img {
  /* So weit, dass der Abschnitt „Über uns" ins Bild kommt - der
     Beweis, dass darunter noch eine Seite weitergeht. */
  transform: translateY(-52%);
}

/* Die Marke unten: im Ruhezustand das Fach, beim Zeigen die
   Aufforderung. Beides an derselben Stelle, damit nichts springt. */
.fenster-marke {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 26px 14px 11px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tinte);
  background: linear-gradient(to top, rgba(10,11,13,.92) 40%, rgba(10,11,13,0));
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.fenster-marke em {
  font-style: normal;
  font-size: 12px;
  color: var(--bernstein);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.fenster:hover .fenster-marke em,
.fenster:focus-visible .fenster-marke em { opacity: 1; transform: translateX(0); }

.beweis-zeile { margin-top: 24px; font-size: 14.5px; color: var(--getoent); text-align: center; }

@media (max-width: 720px) {
  .fenster-reihe { grid-template-columns: 1fr; perspective: none; }
  /* Kein Kippen auf dem Handy: dort gibt es kein Zeigen, und ein
     dauerhaft schraeger Bildschirm sieht nach Fehler aus. */
  .fenster, .fenster:nth-child(1), .fenster:nth-child(3) { --dreh: 0deg; }
  .fenster:nth-child(3) { display: none; }
}

/* Wer Bewegung abbestellt hat, bekommt die Fenster gerade und still -
   sichtbar ist alles ohnehin. */
@media (prefers-reduced-motion: reduce) {
  .fenster, .fenster:nth-child(1), .fenster:nth-child(3) { --dreh: 0deg; }
  .fenster, .fenster-glas img, .fenster-marke em { transition: none; }
  .fenster:hover, .fenster:focus-visible { transform: none; }
  .fenster:hover .fenster-glas img, .fenster:focus-visible .fenster-glas img { transform: none; }
  .fenster-marke em { opacity: 1; transform: none; }
}

/* ---------- Zeitleiste ---------- */

.zeitleiste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.takt { padding: 30px 28px 32px; border-right: 1px solid var(--linie-zart); display: flex; flex-direction: column; gap: 10px; }
.takt:last-child { border-right: 0; }
.takt-zeit { font-size: 13px; font-weight: 800; color: var(--bernstein); letter-spacing: -.005em; }
.takt h3 { font-size: 1.16rem; letter-spacing: -.024em; }
.takt p { font-size: 15.5px; line-height: 1.5; }
@media (max-width: 760px) {
  .zeitleiste { grid-template-columns: 1fr; }
  .takt { border-right: 0; border-bottom: 1px solid var(--linie-zart); }
  .takt:last-child { border-bottom: 0; }
}

/* ---------- Bildband ---------- */

.bildband { position: relative; height: clamp(260px, 38vw, 420px); overflow: hidden; }
.bildband-bild { position: absolute; inset: 0; background-size: cover; background-position: center 60%; filter: saturate(1.02) brightness(.78); }
.bildband-schleier {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--nacht) 2%, rgba(10,14,24,.72) 42%, rgba(10,14,24,.25) 100%);
}
.bildband-inhalt { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.bildband h2 { max-width: 15ch; margin: 0; }
.bildband p { max-width: 42ch; margin-top: 14px; color: #c6cde2; }

/* ---------- Preis ---------- */

.preisfeld {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 36px 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; align-items: start;
}
@media (max-width: 760px) { .preisfeld { grid-template-columns: 1fr; } }
.preiszahl { font-size: clamp(2.5rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.preiszahl.klein { font-size: clamp(1.7rem, 4vw, 2.2rem); margin-top: 28px; }
.preiszahl small { font-size: .46em; font-weight: 700; letter-spacing: -.01em; color: var(--getoent); }
.preisunter { font-size: 15.5px; margin-top: 10px; }

/* Zwei Wege untereinander, der empfohlene mit einer ruhigen Kante.
   Kein zweiter Kasten im Kasten: das Preisfeld ist schon einer. */
.preiswege { display: grid; gap: 26px; }
.preisweg { padding-left: 18px; border-left: 2px solid var(--linie); }
.preisweg.empfohlen { border-left-color: var(--bernstein); }
.preisweg .preiszahl { font-size: clamp(2.1rem, 5vw, 2.9rem); }
.preisweg-name {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--getoent); margin-bottom: 10px;
}
.preisweg-name em { font-style: normal; color: var(--bernstein); }
.preisfuss { font-size: 14px; color: var(--getoent); border-top: 1px solid var(--linie); padding-top: 16px; }
.preisliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.preisliste li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 15.5px; color: var(--getoent); }
.preisliste b { color: var(--tinte); font-weight: 600; }
.haken { color: var(--bernstein); font-weight: 800; }

/* ---------- Vertrauen ---------- */

.vertrauen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.vertrauensblock { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; padding: 24px 24px 26px; }
.vertrauensblock h3 { font-size: 1.04rem; margin-bottom: 7px; letter-spacing: -.022em; }
.vertrauensblock p { font-size: 15px; line-height: 1.5; }

/* ---------- Formular / Warten ---------- */

.formularseite { max-width: 620px; margin-inline: auto; padding-block: clamp(90px, 12vw, 130px) 80px; }
.formularseite h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); max-width: 18ch; }
.feldsatz { display: grid; gap: 22px; margin-top: 34px; }
.feld { display: grid; gap: 7px; }
.feld label { font-size: 15px; font-weight: 600; color: var(--tinte); }

input[type="text"], input[type="email"], textarea {
  font: inherit; font-size: 16.5px; width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--tinte);
}
input:focus, textarea:focus { outline: none; border-color: var(--bernstein); background: var(--flaeche-hoch); }
::placeholder { color: var(--getoent); opacity: .45; }
textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
.feldfehler { font-size: 14px; color: #ff9d8a; }

.formularfuss { margin-top: 32px; display: grid; gap: 14px; }
.formularfuss .knopf { text-align: center; }
.kleingedruckt { font-size: 14px; color: var(--getoent); opacity: .8; }

.warteseite { max-width: 620px; margin-inline: auto; padding-block: clamp(90px, 12vw, 130px) 80px; text-align: center; }
.warteseite h1 { max-width: none; }
.ring { width: 54px; height: 54px; margin: 0 auto 28px; border-radius: 50%; border: 3px solid var(--linie); border-top-color: var(--bernstein); animation: dreh 1.1s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.wartekarte { margin-top: 32px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px 26px; text-align: left; }
.wartekarte dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.wartekarte dt { font-size: 14px; color: var(--getoent); }
.wartekarte dd { margin: 0; font-size: 15.5px; font-weight: 600; }

/* ---------- Fuss ---------- */

.fuss { border-top: 1px solid var(--linie-zart); padding-block: 36px; }
.fussreihe { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.fussreihe p, .fussreihe a { font-size: 14.5px; color: var(--getoent); text-decoration: none; }
.fussreihe a:hover { color: var(--tinte); }

@media (max-width: 560px) {
  .knopf { width: 100%; text-align: center; }
  .beiwort { width: 100%; }
  .buehne { min-height: 0; padding-top: 96px; }
}

/* ---------- Das Gespräch statt des Formulars ---------- */

.gespraech { max-width: 640px; margin-inline: auto; padding-block: clamp(96px, 13vw, 140px) 90px; }

.punktreihe { display: flex; gap: 7px; margin-bottom: 34px; }
.punktreihe i { width: 26px; height: 3px; border-radius: 2px; background: var(--linie); transition: background .25s ease; }
.punktreihe i.hier { background: var(--bernstein); }
.punktreihe i.fertig { background: rgba(232,145,60,.45); }

.frage-zahl { font-size: 13.5px; font-weight: 700; color: var(--blau-hell); margin-bottom: 12px; }
.frage h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); max-width: 17ch; margin-bottom: 14px; }
.frage-hilfe { font-size: 16px; line-height: 1.5; max-width: 48ch; margin-bottom: 26px; }
.frage .feld { display: grid; gap: 8px; }
.frage-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }

.zurueck { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--getoent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.zurueck:hover { color: var(--tinte); }

/* Die Felder sind hier die Hauptsache - also gross und ruhig. */
.frage input[type="text"], .frage input[type="email"] { font-size: 19px; padding: 16px 18px; }
.frage textarea { font-size: 17px; min-height: 128px; }

/* ---------- Die Farbwahl ----------
   Der Betrieb soll Farben sehen, nicht Farbnamen lesen. Jede Kachel
   zeigt deshalb eine winzige Seite in dieser Welt: Grundflaeche,
   Akzentbalken, zwei Textzeilen im getoenten Grau. Wer „Metallbau
   Mueller" heisst, entscheidet in zwei Sekunden, ob dunkel oder hell -
   und genau diese Entscheidung wollen wir von ihm, keine andere. */

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

/* Die Wahl darf breiter laufen als die Textspalte - sie ist an dieser
   Stelle die Hauptsache, und in der 640er Spalte brachen die Namen um. */
.farbwahl {
  border: 0; margin: 0; padding: 0;
  width: min(820px, 100%);
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (min-width: 900px) {
  .farbwahl { width: 820px; margin-left: -90px; }
}

.farbkachel {
  position: relative;
  display: grid;
  grid-template-columns: 66px 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.farbkachel:hover { border-color: rgba(255,255,255,.26); background: var(--flaeche-hoch); }

/* Das Auswahlfeld selbst wird nicht gezeigt, bleibt aber bedienbar -
   sonst geht die Tastaturbedienung verloren. */
.farbkachel input {
  position: absolute; opacity: 0;
  width: 1px; height: 1px; margin: 0;
}
.farbkachel:has(input:focus-visible) { outline: 2px solid var(--blau-hell); outline-offset: 3px; }
.farbkachel:has(input:checked) {
  border-color: var(--bernstein);
  background: rgba(232,145,60,.08);
}

/* Die kleine Seite in dieser Farbwelt. */
.farbprobe {
  position: relative;
  display: block;
  height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  overflow: hidden;
}
.farbkachel.ist-hell .farbprobe { border-color: rgba(0,0,0,.16); }
.farbprobe i {
  position: absolute; left: 9px; top: 10px;
  width: 26px; height: 6px; border-radius: 2px;
}
.farbprobe b {
  position: absolute; left: 8px;
  height: 3px; border-radius: 2px; opacity: .8;
}
.farbprobe b:nth-of-type(1) { top: 25px; width: 42px; }
.farbprobe b:nth-of-type(2) { top: 33px; width: 28px; }

/* „Entscheiden Sie fuer mich" ist keine siebte Farbe, sondern der
   Verzicht auf die Wahl. Deshalb ueber die ganze Breite und unten -
   sonst stand die Kachel allein in einer angefangenen Reihe. */
.farbkachel.ist-offen { grid-column: 1 / -1; }

/* Sie bekommt keine Farbe, sondern die Abwesenheit einer: ein feines
   Raster, das nichts behauptet. */
.farbprobe-offen {
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.10) 0 2px, transparent 2px 6px),
    var(--nacht-tief);
}

.farbtext { display: grid; gap: 3px; min-width: 0; }
.farbtext strong { font-size: 15px; text-wrap: balance; font-weight: 700; color: var(--tinte); letter-spacing: -.01em; }
.farbtext em { font-style: normal; font-size: 13.5px; line-height: 1.4; color: var(--getoent); }

@media (max-width: 420px) {
  .farbkachel { grid-template-columns: 48px 1fr; gap: 12px; }
  .farbprobe { height: 40px; }
}

/* ---------- Rechtstexte ----------
   Ein Impressum, das man suchen muss, gilt als nicht vorhanden - also
   steht es in jeder Fusszeile. Der Text selbst darf ruhig sein, muss
   aber lesbar bleiben: schmale Spalte, klare Zwischenueberschriften. */

.rechtstext { max-width: 720px; margin-inline: auto; padding-block: clamp(96px, 13vw, 132px) 90px; }
.rechtstext h1 { font-size: clamp(2rem, 5vw, 2.8rem); max-width: none; margin-bottom: 14px; }
.rechtstext .vorspann { margin-bottom: 44px; }
.rechtstext h2 {
  font-size: 1.12rem;
  letter-spacing: -.022em;
  margin: 40px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--linie-zart);
}
.rechtstext h2:first-of-type { border-top: 0; padding-top: 0; }
.rechtstext p { font-size: 16px; line-height: 1.7; margin-bottom: 14px; }
.rechtstext p:last-child { margin-bottom: 0; }
.rechtstext strong { color: var(--tinte); font-weight: 600; }
.rechtstext a { color: var(--blau-hell); }
.rechtstext ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 7px; }
.rechtstext li { font-size: 16px; line-height: 1.65; color: var(--getoent); }
.rechtstext .anschrift { line-height: 1.75; }

/* Eine sichtbare Luecke ist besser als eine erfundene Angabe. */
.offen {
  color: var(--bernstein);
  background: rgba(232,145,60,.1);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 15px;
}

/* Hinweise, die man wirklich lesen soll. */
.merk {
  background: var(--flaeche);
  border-left: 3px solid var(--bernstein);
  border-radius: 0 8px 8px 0;
  padding: 15px 18px;
  font-size: 15.5px !important;
  color: #c6cde2 !important;
}

.fussrecht { display: flex; flex-wrap: wrap; gap: 12px 22px; }

/* ---------- Was wir sonst bauen ----------
   Eigene Menueseite und bewusst nicht die Startseite: die hat genau eine
   Aufgabe. Hier geht es um Vertrauen, nicht um Umwandlung - deshalb
   ruhiger gesetzt, mehr Text, kein zweiter Knopf vor dem Schluss.

   Der Kopf schwebt (position: absolute), weil er auf der Startseite ueber
   dem Bild liegt. Ohne Buehne darunter muss der Inhalt ihm ausweichen -
   daher der grosse obere Abstand, wie bei den Rechtstexten. */

.kopf-navi { display: flex; align-items: center; gap: 22px; }
/* Im Menue gewinnt kurz. Platz dafuer gibt es erst ab Tablet. */
.kopf-link .kurz { display: none; }
@media (max-width: 620px) {
  .kopf-link .lang { display: none; }
  .kopf-link .kurz { display: inline; }
}

/* Schmaler als die Startseite: hier wird gelesen, nicht gescannt. */
.projektseite { max-width: 860px; margin-inline: auto; padding-block: clamp(96px, 13vw, 132px) 90px; }
.projektseite h1 { font-size: clamp(2rem, 5.4vw, 3rem); max-width: 19ch; margin-bottom: 16px; }
.projektseite > .vorspann { max-width: 60ch; margin-bottom: 48px; }

.projektliste { display: grid; gap: 14px; }

.projekt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.projekt-leib { padding: 24px 26px 28px; }

/* Das Bild zeigt die Sache selbst. Oben angeschnitten, weil der Kopf
   der jeweiligen Seite das Aussagekraeftigste daran ist - der Rest
   waere nur Flaeche. */
.projekt-bild { margin: 0; }
.projekt-bild img {
  display: block;
  width: 100%;
  /* Feste Hoehe statt aspect-ratio: das Bild ist ein Ausschnitt, kein
     Format. So bleibt die Kachelreihe ruhig, egal wie hoch die Aufnahme
     ist - und es gibt keinen Sprung beim Laden. */
  height: clamp(200px, 26vw, 300px);
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--linie);
}
/* Die Bildunterschrift steht unter dem Bild, nicht darauf. Als
   Schleier darueber lag sie in der Schrift der gezeigten Seite - zwei
   Texte uebereinander, beide schlecht lesbar. */
.projekt-bild figcaption {
  padding: 9px 26px 10px;
  font-size: 12.5px;
  color: var(--getoent);
  background: var(--nacht-tief);
  border-bottom: 1px solid var(--linie);
}
.projekt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.projekt h3 { font-size: clamp(1.3rem, 3.2vw, 1.65rem); letter-spacing: -.03em; margin: 0; }

.projekt-lage {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
  border: 1px solid var(--linie);
  color: var(--getoent);
}
/* Nur das Laufende bekommt Farbe. Was noch gebaut wird, sagt das leise. */
.projekt-lage.l-swingdesk { color: #6fd6a2; border-color: rgba(111,214,162,.35); background: rgba(111,214,162,.1); }
.projekt-lage.l-hier { color: var(--bernstein); border-color: rgba(232,145,60,.4); background: rgba(232,145,60,.1); }

.projekt-fuer {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blau-hell);
  margin: 10px 0 14px;
}
.projekt-text { font-size: 16.5px; line-height: 1.6; color: var(--getoent); max-width: 62ch; }

.projekt-technik {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linie-zart);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--getoent);
  max-width: 62ch;
}
.projekt-technik span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau-zart, rgba(154,164,192,.7));
  margin-bottom: 6px;
}

.projekt-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blau-hell);
  text-decoration: none;
}
.projekt-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.projektschluss { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--linie); }
.projektschluss h2 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); letter-spacing: -.03em; margin-bottom: 16px; }
.projektschluss p { font-size: 16.5px; line-height: 1.65; color: var(--getoent); max-width: 62ch; margin-bottom: 14px; }
.projektschluss .knopfreihe { margin-top: 30px; }

@media (max-width: 560px) {
  .kopf-navi { gap: 16px; }
  .kopf-link { font-size: 14px; }
  .projekt { padding: 20px 18px 22px; }
}


/* ---------- Die Textstrecke der Projektseite ---------- */

.projekt-ueber {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--getoent);
  margin: 0 0 16px;
}

.projektsatz { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--linie); }
.projektsatz h2 { font-size: clamp(1.4rem, 3.6vw, 1.95rem); letter-spacing: -.03em; margin-bottom: 18px; max-width: 24ch; }
.projektsatz p { font-size: 16.5px; line-height: 1.68; color: var(--getoent); max-width: 64ch; margin-bottom: 15px; }
.projektsatz strong { color: var(--tinte); font-weight: 600; }

.koennen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.kann {
  background: var(--flaeche);
  border: 1px solid var(--linie-zart);
  border-radius: 14px;
  padding: 20px 20px 22px;
}
.kann h3 { font-size: 1.05rem; letter-spacing: -.02em; margin: 0 0 9px; }
.kann p { font-size: 15px; line-height: 1.58; margin: 0; max-width: none; }

.danach { margin: 22px 0 18px; padding: 0; list-style: none; display: grid; gap: 0; }
.danach li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--getoent);
  padding: 13px 0 13px 26px;
  border-top: 1px solid var(--linie-zart);
  position: relative;
  max-width: 64ch;
}
.danach li:last-child { border-bottom: 1px solid var(--linie-zart); }
/* Ein gesetzter Punkt statt eines Hakens: das hier ist eine Liste von
   Moeglichkeiten, nicht von Erledigtem. */
.danach li::before {
  content: "";
  position: absolute; left: 4px; top: 21px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blau);
}
.danach-schluss { color: var(--getoent); }

@media (max-width: 560px) {
  .projekt-leib { padding: 20px 18px 22px; }
  .projekt-bild img { height: 180px; }
}

/* ---------- „Wer das baut" ----------
   Steht direkt hinter dem Preis, weil der Besucher genau dort denkt:
   250 Euro — an wen eigentlich? Die anderen Produkte sind hier BELEG,
   nicht Angebot. Deshalb Bildunterschriften statt Karten mit Knoepfen,
   und kein Bernstein: die einzige Handlung der Seite bleibt der Entwurf. */

.buehne-dach { color: var(--blau-hell); margin-bottom: 14px; }

.wer { background: #0f1524; }

.belege {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 34px;
}
.beleg { margin: 0; }
.beleg img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  object-position: top left;
  border: 1px solid rgba(74,108,247,.2);
  border-radius: 10px;
  /* Zurueckgenommen, damit die Belege nicht mit den drei Fenstern
     weiter oben um Aufmerksamkeit streiten. Bei Interesse volle Farbe. */
  filter: saturate(.55) brightness(.82);
  transition: filter .25s ease;
}
.beleg:hover img { filter: none; }
.beleg figcaption {
  margin: 11px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--getoent);
}
.beleg b { color: var(--tinte); font-weight: 600; }

.wer-schluss {
  margin-top: 34px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--getoent);
  max-width: 64ch;
}
.wer-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--blau-hell);
  text-decoration: none;
}
.wer-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Kleinigkeiten auf der Ueber-uns-Seite ---------- */

.projektseite .nachsatz {
  font-size: 16px;
  line-height: 1.68;
  color: var(--getoent);
  max-width: 64ch;
  margin: 16px 0 48px;
}
.spaeter { font-size: 16px; line-height: 1.85; color: var(--getoent); max-width: 66ch; margin-bottom: 15px; }
.spaeter b { color: var(--tinte); font-weight: 600; }

/* ---------- Absender in der Fusszeile ---------- */

.fussabsender {
  font-size: 13.5px;
  color: var(--getoent);
  margin: 0 0 14px;
}

@media (max-width: 820px) {
  .belege { grid-template-columns: 1fr; gap: 16px; }
  .beleg img { height: 150px; }
}

/* =====================================================================
   Vorabfrage, zweiter Ausbau (17.09.2026)

   Drei neue Stuecke: der Hinweiskasten an der wichtigsten Frage, die
   Ausbaukacheln mit dem Preisrechner, und die Ablageflaechen fuer Logo
   und Fotos.

   Die Ausbaufrage und die Materialfrage sind BREITER als die uebrigen -
   .gespraech ist auf 640 px gesetzt, damit eine einzelne Frage nicht
   wie ein Formular wirkt. Sieben Kacheln in 640 px waeren eine Spalte
   Untereinander; sie bekommen deshalb Platz nach links, genau wie die
   Farbwahl es schon tut.
   ===================================================================== */

/* ---------- Der Hinweiskasten an Frage 2 ----------
   Er steht nur EINMAL im Formular. Ein Kasten an jeder Frage ist
   Tapete; einer an der einen Frage, auf die es ankommt, ist ein
   Hinweis. */

.hinweiskasten {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--bernstein);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--flaeche);
  padding: 20px 24px;
  margin-bottom: 24px;
  max-width: 54ch;
}
.hinweis-dach {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bernstein);
  margin: 0 0 12px;
}
.hinweiskasten ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.hinweiskasten li { font-size: 15px; line-height: 1.5; color: var(--getoent); }
.hinweis-fuss { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--getoent); }

/* Der Zaehler unter dem Textfeld. Er lobt, statt zu mahnen - die Farbe
   wandert von neutral ueber warm nach gruen. */
.feldzaehler { font-size: 13.5px; color: var(--getoent); }
.feldzaehler[data-lage="kurz"] { color: var(--bernstein); }
.feldzaehler[data-lage="gut"],
.feldzaehler[data-lage="satt"] { color: #6ee7a8; }

/* ---------- Die Ausbaukacheln ---------- */

.frage-breit { width: min(880px, 100%); }
@media (min-width: 1080px) {
  .frage-breit { width: 880px; margin-left: -120px; }
}

.bausteine {
  border: 0; margin: 0 0 22px; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.baustein {
  position: relative;
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.baustein:hover { border-color: rgba(255,255,255,.26); background: var(--flaeche-hoch); }

/* Das Kaestchen selbst ist weg - die ganze Kachel ist die Schaltflaeche.
   Sichtbar bleibt der Zustand am Rahmen und am Haken oben rechts. */
.baustein input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.baustein:has(input:focus-visible) { outline: 2px solid var(--blau-hell); outline-offset: 3px; }
.baustein:has(input:checked) {
  border-color: var(--bernstein);
  background: rgba(232,145,60,.09);
}
.baustein:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 14px; right: 16px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bernstein);
  color: var(--nacht);
  font-size: 13px;
  font-weight: 800;
}

.baustein-leib { display: grid; gap: 5px; }
/* Titel und Preis stehen untereinander, nicht nebeneinander. Nebenein-
   ander sah bei kurzen Titeln gut aus und brach bei langen um - dann
   stand der Preis mal rechts und mal darunter, und das Raster wirkte
   kaputt. Eine Zeile je Sache ist in beiden Faellen dasselbe Bild. */
.baustein-kopf { display: grid; gap: 3px; padding-right: 30px; }
.baustein-kopf strong { font-size: 16.5px; font-weight: 700; color: var(--tinte); line-height: 1.25; }
/* Der Monatspreis gross, der Einmalbetrag klein darunter. Vorher stand
   hier nur „ab 390 €" - die Zahl, die abschreckt, und nicht die, die
   der Betrieb monatlich spuert. */
.baustein-preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; margin-top: 2px; }
.baustein-preis b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--bernstein); font-variant-numeric: tabular-nums; }
.baustein-preis i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--bernstein); }
.baustein-preis s { text-decoration: none; font-size: 12.5px; color: var(--getoent); flex-basis: 100%; }
.baustein-leib em { font-style: normal; font-size: 14.5px; line-height: 1.5; color: var(--getoent); }
.baustein-fuer {
  margin-top: 3px;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--getoent);
  opacity: .72;
}

.feld-notiz { max-width: 54ch; }
.feldmarke { font-size: 15px; font-weight: 600; color: var(--tinte); margin: 0 0 7px; }
.feldmarke .zart { font-weight: 400; color: var(--getoent); }

/* ---------- Der Preisrechner ----------
   Fest unten rechts, wie die Summe bei einer Fahrzeugkonfiguration.
   Auf schmalen Bildschirmen waere das eine Flaeche vor den Knoepfen -
   dort rutscht er unter das Formular und laeuft mit. */

.rechner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 310px;
  padding: 18px 20px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: rgba(10, 14, 24, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
}

.rechner-dach {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--getoent);
  margin: 0 0 12px;
}

.rechner-zeilen { display: grid; gap: 8px; margin-bottom: 14px; }
.rechner-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--getoent);
}
.rechner-zeile.ist-sockel { color: var(--tinte); font-weight: 600; }
.rechner-wert { text-align: right; white-space: nowrap; color: var(--tinte); }
.rechner-wert em { display: block; font-style: normal; font-size: 11.5px; color: var(--getoent); }

.rechner-summe {
  display: flex;
  gap: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--linie);
}
.rechner-summe > div { display: grid; gap: 2px; }
.rechner-summe span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--getoent); }
.rechner-summe strong { font-size: 20px; font-weight: 700; color: var(--bernstein); }

.rechner-fuss { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--getoent); opacity: .8; }

@media (max-width: 1080px) {
  .rechner {
    position: static;
    width: 100%;
    margin-top: 28px;
    backdrop-filter: none;
    background: var(--flaeche);
  }
}

/* ---------- Ablageflaechen fuer Logo und Fotos ---------- */

.material {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: 6px;
}
.materialfeld { display: grid; gap: 0; align-content: start; }

.ablage {
  display: grid;
  gap: 5px;
  padding: 22px 20px;
  border: 1.5px dashed var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.ablage:hover { border-color: var(--bernstein); background: var(--flaeche-hoch); }
.ablage-marke { font-size: 15.5px; font-weight: 700; color: var(--tinte); }
.ablage-hilfe { font-size: 13.5px; line-height: 1.5; color: var(--getoent); }
.ablage-gewaehlt {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #6ee7a8;
  overflow-wrap: anywhere;
}
.ablage-gewaehlt:empty { display: none; }

/* Das Ueberspringen ist bewusst kein Knopf: es soll erreichbar sein,
   aber nicht die erste Wahl. */
.ueberspringen {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 15px;
  color: var(--getoent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ueberspringen:hover { color: var(--tinte); }

.feldfehler-breit { max-width: 54ch; margin-bottom: 18px; }


/* Die Preiszeile in den Ausbaukacheln auf der Startseite. Sie steht
   unten und in der Handlungsfarbe: der Preis ist hier kein
   Kleingedrucktes, sondern das Argument - fast alles davon ist
   billiger, als der Betrieb vermutet. */
.ausbauliste .kann { display: flex; flex-direction: column; }
.kann-preis {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bernstein);
}

/* =====================================================================
   Der Blog (18.09.2026)

   Er ist kein Anhängsel, sondern eine zweite Eingangstür: wer über eine
   Suchanfrage hier landet, soll denselben Auftritt sehen wie auf der
   Startseite und von jedem Beitrag aus zum Entwurf kommen.

   Die Lesespalte ist bewusst schmal — 68 Zeichen. Ein Fachbeitrag, der
   über die volle Breite läuft, wird nicht zu Ende gelesen.
   ===================================================================== */

.blogkopf { padding-block: clamp(70px, 12vw, 120px) clamp(28px, 5vw, 48px); }
.blogkopf h1 { font-size: clamp(2.1rem, 5.6vw, 3.2rem); max-width: 20ch; margin-bottom: 18px; }

.blogsilos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.blogsilos a {
  padding: 5px 13px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 13px;
  color: var(--getoent);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.blogsilos a:hover { border-color: var(--tinte); color: var(--tinte); }

/* Blättern. Steht unter der letzten Karte, nicht darüber — wer
   weiterblättern will, ist am Ende der Liste angekommen. */
.blogblaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 48px;
}
.blogstand { font-size: 14px; color: var(--getoent); }

/* ---------- Die Übersicht ---------- */

.bloglisteseite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.blogkarte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie-zart);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche);
  transition: border-color .16s ease, transform .16s ease;
}
.blogkarte:hover { border-color: rgba(255,255,255,.2); transform: translateY(-2px); }

.blogbild { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.blogbild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blogkarte-leib { display: flex; flex-direction: column; gap: 9px; padding: 22px 22px 24px; flex: 1; }
.blogsilo {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bernstein);
}
.blogkarte h2, .blogkarte h3 { font-size: 1.16rem; line-height: 1.24; letter-spacing: -.02em; margin: 0; }
.blogkarte h2 a, .blogkarte h3 a { color: var(--tinte); text-decoration: none; }
.blogkarte h2 a:hover, .blogkarte h3 a:hover { color: var(--bernstein); }
.blogtext { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--getoent); }
.blogfuss {
  margin: auto 0 0;
  padding-top: 12px;
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  color: var(--getoent);
  opacity: .75;
}

.blogleer { text-align: center; padding-block: 40px 80px; }
.blogleer .vorspann { margin-inline: auto; }
.blogleer .knopfreihe { justify-content: center; }

.blogruf { border-top: 1px solid var(--linie-zart); }

/* ---------- Der einzelne Beitrag ----------
   Hier zählt nur eins: dass der Text gern gelesen wird. Alles, was
   dabei stört, ist weg. */

.beitragskopf { padding-block: clamp(64px, 11vw, 104px) clamp(20px, 4vw, 32px); max-width: 780px; }
.beitragskopf h1 { font-size: clamp(2rem, 5.2vw, 3rem); line-height: 1.08; margin-bottom: 16px; }
.beitragskopf .dach a { color: inherit; text-decoration: none; }
.beitragskopf .dach a:hover { text-decoration: underline; }
.beitragsdatum { display: flex; gap: 8px; margin: 0; font-size: 14px; color: var(--getoent); }

.beitragsbild {
  margin: 0 0 clamp(28px, 5vw, 48px);
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--rand);
}
.beitragsbild img { width: 100%; border-radius: var(--radius); display: block; }

/* Die Lesespalte. 68 Zeichen, größere Schrift als im Rest der Seite,
   großzügige Zeilenhöhe — ein Beitrag wird gelesen, nicht überflogen. */
.beitragsleib {
  max-width: 780px;
  padding-bottom: clamp(50px, 9vw, 90px);
  font-size: 18px;
  line-height: 1.72;
  color: #ccd3e6;
}
.beitragsleib > * { max-width: 68ch; }
.beitragsleib p { margin: 0 0 22px; }
.beitragsleib h2 {
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -.024em;
  margin: 46px 0 16px;
  color: var(--tinte);
}
.beitragsleib h3 {
  font-size: 1.16rem;
  line-height: 1.3;
  margin: 32px 0 12px;
  color: var(--tinte);
}
.beitragsleib ul, .beitragsleib ol { margin: 0 0 22px; padding-left: 22px; display: grid; gap: 9px; }
.beitragsleib li { padding-left: 4px; }
.beitragsleib li::marker { color: var(--bernstein); }
.beitragsleib strong { color: var(--tinte); font-weight: 600; }
.beitragsleib a { color: var(--bernstein); text-decoration: underline; text-underline-offset: 3px; }
.beitragsleib a:hover { color: var(--tinte); }

/* Der FAQ-Block am Ende trägt die Fragen, die Google als Snippet zieht.
   Er bekommt deshalb eine eigene, ruhigere Fläche — sichtbar getrennt
   vom Fließtext, ohne ihn zu unterbrechen. */
.beitragsleib h2 + h3 { margin-top: 20px; }

@media (max-width: 560px) {
  .beitragsleib { font-size: 17px; }
  .beitragsleib h2 { margin-top: 36px; }
}


/* Der Anriss: der erste Absatz, der die Frage aus der Ueberschrift
   bereits beantwortet. Er steht groesser als der Fliesstext, weil er
   als einziger Absatz fuer sich allein gelesen werden koennen muss -
   Google zeigt ihn als hervorgehobenes Ergebnis. */
.beitragsleib .anriss {
  font-size: 1.16em;
  line-height: 1.6;
  color: var(--tinte);
  margin-bottom: 28px;
}


/* =====================================================================
   Kopfzeile: Menüknebel (18.09.2026)

   Ole: „oben die menuleiste wird zu voll, mach die anklickbar dass die
   sich öffnet, das sieht auf der mobilen version so nicht gut aus."

   Gelöst ohne Javascript — ein Kästchen, ein Label, der Rest ist CSS.
   Das Kästchen wird weggeschnitten statt ausgeblendet, damit es mit der
   Tastatur erreichbar bleibt.

   Der Knopf „Entwurf ansehen" steht außerhalb des Menüs: Er ist die
   eine Handlung, um die es auf dieser Seite geht, und darf nie hinter
   einem Klick verschwinden.
   ===================================================================== */

.navi-schalter {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.navi-knebel { display: none; }

.kopf-knopf {
  display: none;
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--bernstein);
  color: var(--nacht);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 860px) {
  /* KEIN `position: relative` hier. Die Kopfzeile ist absolut gesetzt
     und schwebt ueber der Buehne - das ist die Gestaltung der Seite.
     Ein Wechsel auf relativ haette sie in den Fluss geholt und die
     Buehne nach unten geschoben. Fuer die aufklappende Flaeche genuegt
     `absolute` ohnehin als Bezugsrahmen. */
  .kopf { flex-wrap: nowrap; gap: 10px; }
  .marke { font-size: 1rem; }
  .marke-zeichen { width: 36px; height: 36px; }

  .kopf-knopf { display: inline-block; margin-left: auto; }

  .navi-knebel {
    display: grid;
    gap: 5px;
    padding: 10px 2px;
    cursor: pointer;
    flex: 0 0 auto;
    color: var(--tinte);
  }
  .navi-knebel span {
    display: block;
    width: 24px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
  }
  .navi-schalter:checked ~ .navi-knebel span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navi-schalter:checked ~ .navi-knebel span:nth-child(2) { opacity: 0; }
  .navi-schalter:checked ~ .navi-knebel span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .navi-schalter:focus-visible ~ .navi-knebel { outline: 2px solid var(--bernstein); outline-offset: 3px; }

  .kopf-navi {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 10px;
    background: var(--nacht);
    border-bottom: 1px solid var(--linie);
    /* Ein weicher Schatten legte einen grauen Schleier ueber die
       Schlagzeile darunter - sie sah aus, als scheine sie durch. Eine
       harte Kante trennt sauberer und laesst den Text darunter in
       Ruhe. */
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
    z-index: 60;
  }
  .navi-schalter:checked ~ .kopf-navi { display: flex; }
  .kopf-link {
    padding: 15px var(--rand);
    font-size: 16.5px;
    border-top: 1px solid var(--linie-zart);
    color: var(--tinte);
  }
  .kopf-link:first-child { border-top: 0; }
}

@media (max-width: 420px) {
  .marke span.marke-zweit { display: none; }
  .kopf-knopf { padding: 9px 14px; font-size: 13.5px; }
}


/* Die Adresse, unter der der Betrieb seinen Entwurf wiederfindet.
   Solange kein Mailversand läuft, ist sie sein einziger Zugang — also
   steht sie groß genug da, um sie abzuschreiben oder zu kopieren. */
.zugangszeile {
  margin: 14px auto 0;
  max-width: 560px;
  text-align: center;
  word-break: break-all;
}
.zugangszeile code {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  font-size: 14px;
  color: var(--tinte);
  background: rgba(255,255,255,.03);
}

/* =====================================================================
   Die Bausteine: Kachel als Weg, Leistungsseite als Ziel (18.09.2026)

   Die Kacheln auf der Startseite waren tote Kästen mit zwei Sätzen.
   Ole: „ich will das in dem bereich die seite wächst mit dem betrieb
   anklickbar sind, auf eine leistungs seite kommen, wo die
   verschiedenen add ons nochmal genau erklärt werden, aber so das
   jeder es versteht."

   Also: Kachel führt auf /leistungen/#<baustein>. Dort steht je
   Baustein ein Fall aus dem Alltag, was drin ist, was es kostet — und
   was es ausdrücklich NICHT kann.
   ===================================================================== */

a.kann {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
a.kann:hover {
  border-color: var(--bernstein);
  background: var(--flaeche-hoch);
  transform: translateY(-2px);
}
.kann-mehr {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--getoent);
  transition: color .18s ease;
}
.kann-mehr::after { content: " →"; }
a.kann:hover .kann-mehr { color: var(--bernstein); }

/* „kommt bald": verkauft, aber noch nicht gebaut. Das muss dranstehen,
   wo der Baustein angeboten wird — sonst ist es ein Versprechen, das
   wir beim Kauf nicht halten. */
.bald {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bernstein);
  border: 1px solid var(--bernstein);
  border-radius: 999px;
  padding: 3px 9px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- Die Leistungsseite ---------- */

.lst { scroll-margin-top: 90px; }
.lst-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: start;
}
.lst-preis { text-align: right; }
.lst-preis .preisunter { margin-top: 6px; }
.lst-preis .zart { font-size: 13px; color: var(--getoent); }

.lst-leib {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 28px 44px;
  margin-top: 30px;
  align-items: start;
}

/* Der Fall aus dem Alltag steht als Zitat und nicht als weiterer
   Absatz: Er ist das Einzige auf dieser Seite, was der Leser sich
   merkt — eine Szene, die er kennt. */
.lst-fall {
  margin: 0;
  padding: 24px 26px;
  background: var(--flaeche);
  border-left: 2px solid var(--bernstein);
  border-radius: 0 12px 12px 0;
}
.lst-fall blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--tinte);
}
.lst-fall figcaption {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--getoent);
}

.lst-liste .preisliste { margin-top: 14px; }
.lst-grenze {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--linie-zart);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--getoent);
}
.lst-grenze b { color: var(--tinte); }

@media (max-width: 760px) {
  .lst-kopf, .lst-leib { grid-template-columns: 1fr; }
  .lst-preis { text-align: left; }
}


/* ---------- Die Kachel mit Aufklapper (18.09.2026) ----------

   Die Kachel ist die Schaltflaeche, der Aufklapper darunter gehoert
   NICHT dazu: Wer nachliest, was ein Baustein bedeutet, will ihn nicht
   damit auswaehlen. Deshalb liegt <details> ausserhalb des <label>.

   <details> und nicht Javascript, weil es ohne Skript funktioniert,
   mit der Tastatur bedienbar ist und der Browser die Zustaende selbst
   verwaltet. */

.baustein-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  overflow: hidden;
  transition: border-color .16s ease;
}
.baustein-karte:has(input:checked) { border-color: var(--bernstein); }
/* Die Kachel darin traegt den Rahmen nicht mehr selbst - sonst stuenden
   zwei Linien ineinander. */
.baustein-karte .baustein { border: 0; border-radius: 0; background: none; }
.baustein-karte .baustein:hover { background: var(--flaeche-hoch); }
.baustein-karte:has(input:checked) .baustein { background: rgba(232,145,60,.09); }

.baustein-mehr { border-top: 1px solid var(--linie-zart); }
.baustein-mehr summary {
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--getoent);
  cursor: pointer;
  list-style: none;
  transition: color .16s ease;
}
.baustein-mehr summary::-webkit-details-marker { display: none; }
.baustein-mehr summary::after { content: " ↓"; }
.baustein-mehr[open] summary::after { content: " ↑"; }
.baustein-mehr summary:hover { color: var(--tinte); }
.baustein-mehr summary:focus-visible { outline: 2px solid var(--blau-hell); outline-offset: -2px; }

.baustein-mehr-leib { padding: 4px 20px 20px; display: grid; gap: 14px; }
.baustein-fall {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--bernstein);
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--tinte);
}
.baustein-punkte { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.baustein-punkte li { font-size: 14px; line-height: 1.5; color: var(--getoent); }
.baustein-grenze { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--getoent); }
.baustein-grenze b { color: var(--tinte); }
.baustein-dauer { margin: 0; font-size: 13px; color: var(--getoent); }
.baustein-dauer a { color: var(--bernstein); }

/* Verkauft, aber noch nicht gebaut: das muss an der Kachel stehen,
   nicht nur auf der Leistungsseite. */
.baustein-karte.ist-bald .baustein-preis b { color: var(--getoent); }

/* =====================================================================
   Vorführung: der Baustein als fertige Seite (19.09.2026)

   Dritter Anlauf. Erst animierte Balken (zu spielerisch), dann fertige
   Ansichten in einer Welt (zu gleichförmig). Ole: „irgendwie hat das
   noch nicht das niveau wie es später wirklich aussehen soll … auch mal
   mit farbakzenten, besseren schriftarten und zeichenabständen."

   Der Grund war, dass alle acht dieselbe Schrift und denselben Akzent
   der Landingpage geerbt haben. Ein Immobilienportal sieht aber nicht
   aus wie eine Werkstatt-Terminbuchung, und ein Adminpanel ist fast nie
   dunkel. Also bekommt jede Ansicht ihre eigene Welt: eigene Akzent-
   farbe, eigener Grund — vier hell, vier dunkel.

   Technisch über Variablen: `.vf-glas` setzt `--ton`, `--grundfarbe`,
   `--tinte`, `--gedaempft` und `--kante` neu, die Bausteine darin
   benutzen nur diese. Deshalb funktioniert jedes Stück auf hellem wie
   auf dunklem Grund, ohne dass es zweimal geschrieben werden muss.
   ===================================================================== */

.vorfuehrung { margin: 30px 0 0; }
.vf-fenster {
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9);
  transition: border-color .3s ease, box-shadow .4s ease;
}
.vorfuehrung:hover .vf-fenster {
  border-color: var(--bernstein);
  box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .95);
}
.vf-leiste {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linie-zart);
}
.vf-leiste i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); flex: 0 0 auto; }
.vf-leiste span { margin-left: 8px; font-size: 10.5px; color: var(--getoent); opacity: .6; }

/* Nicht höher als nötig. 380 px war zu viel — Ole: „so riesig muss die
   ansicht nicht sein". Auf dem Telefon noch einmal deutlich flacher. */
.vf-glas {
  --ton: #e8913c;
  --grundfarbe: #15171c;
  --tinte: #f2f4f8;
  --gedaempft: #98a2b3;
  --kante: rgba(255, 255, 255, .10);
  --fuellung: rgba(255, 255, 255, .06);
  height: 318px;
  overflow: hidden;
  position: relative;
  background: var(--grundfarbe);
  color: var(--tinte);
  font-size: 12px;
  line-height: 1.45;
}
.vf-glas > * { transition: transform 2.8s cubic-bezier(.25, .6, .25, 1); }
.vorfuehrung:hover .vf-glas > * { transform: translateY(-24%); }
.vf-glas::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: linear-gradient(to top, var(--grundfarbe), transparent);
  pointer-events: none;
}
.vf-inhalt { display: grid; gap: 12px; padding: 16px 18px; align-content: start; }
.vorfuehrung figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--getoent); }

/* ---- Die acht Welten ----
   Vier hell, vier dunkel. Die Akzentfarbe kommt aus dem Gewerbe, nicht
   aus der Palette der Landingpage: Immobilien ruhig grün, Verwaltung
   indigo, Handel türkis, KI elektrisch. */
.vf-termine       { --ton: #f0a04b; }
.vf-beitraege     { --ton: #c9705a; --grundfarbe: #17161a; }
.vf-kundenbereich { --ton: #7f9cf5; --grundfarbe: #14161c; }
.vf-ki            { --ton: #4cc9d9; --grundfarbe: #0f1418; }

.vf-objekte, .vf-admin, .vf-verkauf, .vf-sprachen {
  --tinte: #16181c;
  --gedaempft: #6b7280;
  --kante: rgba(0, 0, 0, .11);
  --fuellung: rgba(0, 0, 0, .045);
}
.vf-objekte  { --ton: #2f6b4f; --grundfarbe: #f7f5f1; }
.vf-admin    { --ton: #4f46e5; --grundfarbe: #f6f7fb; }
.vf-verkauf  { --ton: #0f766e; --grundfarbe: #f5f8f7; }
.vf-sprachen { --ton: #2563eb; --grundfarbe: #f6f7f9; }

/* ---- gemeinsame Bausteine ---- */
.vf-glas b { color: var(--tinte); font-weight: 700; }
.vf-seitekopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vf-seitekopf > div { display: grid; gap: 2px; }
.vf-seitekopf b { font-size: 15px; letter-spacing: -.022em; }
.vf-seitekopf span { font-size: 11px; color: var(--gedaempft); }
.vf-marke {
  font-size: 9px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gedaempft);
}
.vf-sortier { font-size: 10px; color: var(--gedaempft); padding: 4px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--kante); }
.vf-wahlzeile { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-wahl, .vf-filter i {
  font-style: normal; font-size: 10px; letter-spacing: .01em;
  padding: 5px 11px; border-radius: 999px;
  color: var(--gedaempft); box-shadow: inset 0 0 0 1px var(--kante);
}
.vf-wahl.an, .vf-filter i.an {
  color: #fff; background: var(--ton); box-shadow: none; font-weight: 700;
}
.vf-knopf {
  display: inline-block; padding: 8px 15px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: -.005em;
  color: #fff; background: var(--ton);
  box-shadow: 0 6px 16px -8px var(--ton);
}
.vf-knopf.klein { padding: 6px 12px; font-size: 10.5px; }
/* Eine Haarlinie um jedes Foto. Auf dem hellen Grund der Immobilien-
   ansicht gehen weiße Wände sonst in die Karte über, und das Bild sieht
   kleiner aus, als es ist — derselbe Befund wie am 18.09.2026 bei L&M
   Living im Bildstreifen der Entwürfe. */
.vf-bild {
  position: relative; overflow: hidden; display: block;
  background: var(--fuellung);
  box-shadow: inset 0 0 0 1px var(--kante);
}
.vf-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-schild {
  position: absolute; top: 6px; left: 6px;
  font-style: normal; font-size: 8px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
  color: #fff; background: var(--ton);
}
.vf-schild.miete { color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }

/* ---- Terminbuchung ---- */
.vf-kalenderkopf { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 12px; letter-spacing: -.01em; }
.vf-pfeil { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: var(--gedaempft); background: var(--fuellung); font-size: 12px; }
.vf-woche { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.vf-woche span { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); display: grid; gap: 3px; }
.vf-woche b { font-size: 13px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vf-raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.vf-raster i {
  height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: var(--tinte); background: var(--fuellung);
  box-shadow: inset 0 0 0 1px var(--kante);
}
.vf-raster i.belegt { font-size: 8.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gedaempft); opacity: .5; background: transparent; }
.vf-raster i.wahl { background: var(--ton); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 26%, transparent); }
.vf-zusammen {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-radius: 10px;
  background: var(--fuellung); box-shadow: inset 0 0 0 1px var(--kante);
}
.vf-zusammen b { display: block; font-size: 11.5px; letter-spacing: -.01em; }
.vf-zusammen span { font-size: 10px; color: var(--gedaempft); }
.vf-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.vf-felder label { display: grid; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gedaempft); }
.vf-felder i {
  font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: -.005em; color: var(--tinte);
  padding: 8px 10px; border-radius: 8px;
  background: var(--fuellung); box-shadow: inset 0 0 0 1px var(--kante);
}

/* ---- Objekte: Immobilienportal, hell und ruhig ---- */
.vf-objektraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vf-objekt { display: grid; gap: 3px; align-content: start; }
.vf-objekt .vf-bild { height: 116px; border-radius: 9px; }
.vf-objekt b { font-size: 12.5px; line-height: 1.25; letter-spacing: -.018em; margin-top: 7px; }
.vf-ort { font-size: 9.5px; letter-spacing: .02em; color: var(--gedaempft); }
.vf-kennzahlen { display: flex; gap: 6px; margin-top: 3px; }
.vf-kennzahlen span {
  font-size: 9px; letter-spacing: .02em; color: var(--gedaempft);
  padding: 3px 7px; border-radius: 5px; background: var(--fuellung);
  font-variant-numeric: tabular-nums;
}
.vf-objekt em { font-style: normal; font-size: 14px; font-weight: 800; letter-spacing: -.03em; color: var(--ton); margin-top: 5px; font-variant-numeric: tabular-nums; }
.vf-objekt em small { font-size: 9px; font-weight: 500; letter-spacing: 0; color: var(--gedaempft); }

/* ---- Blog: redaktionell ---- */
.vf-aufmacher { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.vf-aufmacher .vf-bild { height: 104px; border-radius: 9px; }
.vf-aufmacher > div { display: grid; gap: 5px; }
.vf-thema { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ton); }
.vf-aufmacher b { font-size: 16px; line-height: 1.2; letter-spacing: -.028em; }
.vf-anriss { font-size: 10.5px; color: var(--gedaempft); line-height: 1.55; }
.vf-aufmacher em, .vf-beitrag em { font-style: normal; font-size: 9px; letter-spacing: .04em; color: var(--gedaempft); opacity: .8; }
.vf-beitragsliste { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--kante); }
.vf-beitrag { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: start; }
.vf-beitrag .vf-bild { height: 54px; border-radius: 7px; }
.vf-beitrag div { display: grid; gap: 3px; }
.vf-beitrag b { font-size: 11px; line-height: 1.3; letter-spacing: -.018em; }

/* ---- Premium-Zugang: Produktoberfläche, hell ---- */
.vf-adminleiste { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--kante); padding-bottom: 9px; }
.vf-adminleiste span { font-size: 11px; letter-spacing: -.005em; color: var(--gedaempft); padding-bottom: 8px; margin-bottom: -10px; }
.vf-adminleiste .an { color: var(--tinte); font-weight: 700; border-bottom: 2px solid var(--ton); }
.vf-gespeichert { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--ton); }
.vf-adminleib { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.vf-adminspalte { display: grid; gap: 9px; }
.vf-adminspalte label { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gedaempft); }
.vf-farben { display: flex; gap: 8px; }
.vf-farben i { width: 21px; height: 21px; border-radius: 50%; }
.vf-farben .f1 { background: #4f46e5; } .vf-farben .f2 { background: #e8913c; }
.vf-farben .f3 { background: #1c5c46; } .vf-farben .f4 { background: #b4472c; }
.vf-farben .an { box-shadow: 0 0 0 2px var(--grundfarbe), 0 0 0 4px var(--ton); }
.vf-auswahl { font-size: 11px; color: var(--tinte); padding: 8px 10px; border-radius: 8px; background: var(--fuellung); box-shadow: inset 0 0 0 1px var(--kante); }
.vf-schalter { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vf-schalter span { font-size: 10.5px; color: var(--gedaempft); }
.vf-kippe { width: 31px; height: 18px; border-radius: 999px; flex: 0 0 auto; background: var(--ton); position: relative; }
.vf-kippe::after { content: ""; position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.vf-kippe.aus { background: color-mix(in srgb, currentColor 22%, transparent); }
.vf-kippe.aus::after { right: auto; left: 3px; }
.vf-vorschau { display: grid; gap: 8px; }
.vf-minifenster { border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--kante); background: var(--fuellung); }
.vf-minikopf { display: flex; align-items: center; gap: 7px; padding: 8px 10px; font-size: 9.5px; }
.vf-minikopf i { width: 15px; height: 15px; border-radius: 4px; background: var(--ton); flex: 0 0 auto; }
.vf-minikopf span { margin-left: auto; font-size: 8px; letter-spacing: .03em; color: var(--gedaempft); }
.vf-minifenster .vf-bild { height: 62px; }
.vf-minileib { display: grid; gap: 7px; padding: 10px; }
.vf-minititel { font-size: 12.5px; font-weight: 800; line-height: 1.22; letter-spacing: -.025em; }
.vf-minitext { font-size: 9.5px; color: var(--gedaempft); line-height: 1.5; }
.vf-vorschau .vf-knopf { justify-self: start; }

/* ---- Kundenbereich: Tabelle ---- */
.vf-tabelle { display: grid; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--kante); }
.vf-tabelle > div { display: grid; grid-template-columns: 1fr 88px 62px; gap: 10px; padding: 10px 13px; align-items: center; font-size: 10.5px; }
.vf-tabelle .vf-kopf { background: var(--fuellung); font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gedaempft); }
.vf-tabelle .vf-reihe + .vf-reihe { border-top: 1px solid var(--kante); }
.vf-tabelle .vf-reihe span:first-child { display: flex; align-items: center; gap: 10px; color: var(--tinte); letter-spacing: -.005em; }
.vf-tabelle .vf-reihe span { color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.vf-tabelle i { font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .07em; padding: 3px 6px; border-radius: 4px; color: var(--ton); background: color-mix(in srgb, var(--ton) 14%, transparent); }

/* ---- Verkauf ---- */
.vf-waren { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vf-ware { display: grid; gap: 5px; }
.vf-ware .vf-bild { height: 112px; border-radius: 9px; }
.vf-ware b { font-size: 12px; letter-spacing: -.018em; margin-top: 3px; }
.vf-ware > span { font-size: 10px; color: var(--gedaempft); line-height: 1.45; }
.vf-kaufzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.vf-kaufzeile em { font-style: normal; font-size: 13.5px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.vf-korb { font-size: 10.5px; color: var(--gedaempft); padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--kante); }
.vf-zahlzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--kante); }
.vf-zahlarten { display: flex; gap: 5px; }
.vf-zahlarten i { font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .04em; padding: 4px 7px; border-radius: 4px; color: var(--gedaempft); background: var(--fuellung); }
.vf-kasse { font-size: 11.5px; letter-spacing: -.01em; color: var(--ton); }

/* ---- Zweite Sprache ---- */
.vf-sprachen { display: flex; gap: 4px; }
.vf-sprachen i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; padding: 4px 9px; border-radius: 6px; color: var(--gedaempft); }
.vf-sprachen .an { color: #fff; background: var(--ton); }
.vf-zweisprachig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vf-zweisprachig > div { display: grid; gap: 7px; padding: 12px; border-radius: 10px; background: var(--fuellung); box-shadow: inset 0 0 0 1px var(--kante); align-content: start; }
.vf-fahne { font-size: 8.5px; letter-spacing: .02em; color: var(--gedaempft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.vf-zweisprachig .vf-bild { height: 86px; border-radius: 7px; }
.vf-zweisprachig b { font-size: 12px; line-height: 1.25; letter-spacing: -.02em; }
.vf-zweisprachig > div > span:last-child { font-size: 10px; color: var(--gedaempft); line-height: 1.5; }

/* ---- Kommandozentrale ---- */
.vf-kz { display: grid; grid-template-columns: 112px 1fr; gap: 14px; }
.vf-kz-navi { display: grid; gap: 3px; align-content: start; }
.vf-kz-marke { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.vf-kz-marke i { width: 16px; height: 16px; border-radius: 5px; background: var(--ton); }
.vf-kz-navi span { font-size: 10px; color: var(--gedaempft); padding: 6px 9px; border-radius: 7px; display: flex; align-items: center; gap: 6px; }
.vf-kz-navi .an { color: var(--tinte); background: var(--fuellung); font-weight: 600; box-shadow: inset 0 0 0 1px var(--kante); }
.vf-kz-navi b { margin-left: auto; font-size: 8px; padding: 1px 6px; border-radius: 999px; color: #fff; background: var(--ton); }
.vf-kz-leib { display: grid; gap: 12px; align-content: start; }
.vf-kz-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vf-kz-kopf b { font-size: 14px; letter-spacing: -.025em; }
.vf-kz-datum { font-size: 9.5px; color: var(--gedaempft); }
.vf-kz-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.vf-kz-zahlen > div { padding: 10px 11px; border-radius: 9px; background: var(--fuellung); box-shadow: inset 0 0 0 1px var(--kante); display: grid; gap: 2px; }
.vf-kz-zahlen em { font-style: normal; font-size: 20px; font-weight: 800; letter-spacing: -.045em; color: var(--ton); font-variant-numeric: tabular-nums; line-height: 1; }
.vf-kz-zahlen span { font-size: 8.5px; letter-spacing: .02em; color: var(--gedaempft); line-height: 1.3; }
.vf-kz-unten { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; align-items: start; }
.vf-kz-agent { padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--ton) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 30%, transparent); display: grid; gap: 8px; }
.vf-kz-agent p { margin: 0; font-size: 10px; line-height: 1.55; color: var(--gedaempft); }
.vf-kz-agent b { color: var(--tinte); }
.vf-kz-eingabe { font-size: 9.5px; color: var(--gedaempft); opacity: .7; padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--kante); }
.vf-kz-liste { display: grid; gap: 7px; }
.vf-kz-liste > div { display: grid; grid-template-columns: 27px 1fr auto; gap: 9px; align-items: center; font-size: 9.5px; color: var(--tinte); }
.vf-kz-liste i { font-style: normal; font-size: 7px; font-weight: 800; letter-spacing: .06em; padding: 3px 4px; border-radius: 3px; text-align: center; color: var(--ton); background: color-mix(in srgb, var(--ton) 14%, transparent); }
.vf-kz-liste em { font-style: normal; font-size: 8.5px; color: var(--gedaempft); opacity: .8; }
.vf-kz-vorgaenge { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--kante); }
.vf-kz-vorgaenge > div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.vf-kz-vorgaenge b { font-size: 10.5px; letter-spacing: -.01em; }
.vf-kz-vorgaenge em { font-style: normal; color: var(--gedaempft); font-size: 9.5px; }
.vf-kz-vorgaenge i {
  font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .09em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
  color: var(--gedaempft); background: var(--fuellung);
}
.vf-kz-vorgaenge i.eilig { color: #fff; background: var(--ton); }

/* ---- Der Ableger: Unterbausteine und Terminblock ---- */
.preiszahl.anfrage { font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--bernstein); }
.lst-zweige { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--linie-zart); }
.lst-zweig b { display: block; font-size: 1.02rem; letter-spacing: -.02em; margin-bottom: 8px; }
.lst-zweig p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--getoent); }
.lst-termin {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 26px; padding: 22px 24px;
  border-radius: var(--radius); background: var(--flaeche);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bernstein) 30%, transparent);
}
.lst-termin b { display: block; font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: 6px; }
.lst-termin p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--getoent); max-width: 60ch; }
.baustein-preis b.anfrage { font-size: 15px; letter-spacing: -.01em; }
.rechner-zeile.ist-anfrage .rechner-wert { font-size: 12.5px; font-weight: 600; color: var(--getoent); }

/* ---- Auf dem Telefon ----
   Ole: „sieh zu das es auch in der mobil ansicht gut ausschaut."
   Alles, was nebeneinander steht, geht untereinander; das Fenster wird
   flacher, und die Schrift bleibt gleich groß — kleiner wäre auf einem
   Telefon nicht mehr lesbar, und das Fenster darf lieber weniger zeigen
   als schlechter. */
@media (max-width: 860px) {
  .vf-objektraster, .vf-beitragsliste, .lst-zweige { grid-template-columns: 1fr 1fr; }
  .vf-kz-zahlen { grid-template-columns: 1fr 1fr; }
  .vf-kz, .vf-kz-unten, .vf-adminleib, .vf-zweisprachig, .vf-waren { grid-template-columns: 1fr; }
  .vf-aufmacher { grid-template-columns: 112px 1fr; }
}
@media (max-width: 560px) {
  .vf-glas { height: 248px; }
  .vorfuehrung:hover .vf-glas > * { transform: translateY(-30%); }
  .vf-inhalt { padding: 14px; gap: 10px; }
  .vf-objektraster, .vf-beitragsliste, .lst-zweige, .vf-felder { grid-template-columns: 1fr; }
  .vf-kz-zahlen { grid-template-columns: 1fr 1fr; }
  .vf-kz-navi { display: none; }
  .vf-tabelle > div { grid-template-columns: 1fr auto; }
  .vf-tabelle > div > span:nth-child(2) { display: none; }
  .vf-raster i { height: 24px; font-size: 10px; }
  .vf-objekt .vf-bild { height: 132px; }
  .vf-ware .vf-bild { height: 120px; }
  .vf-zweisprachig .vf-bild { height: 92px; }
  .vf-aufmacher .vf-bild { height: 78px; }
  .vf-zusammen { flex-direction: column; align-items: stretch; gap: 9px; }
  .vf-seitekopf { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .vf-glas > *, .vf-fenster { transition: none; }
  .vorfuehrung:hover .vf-glas > * { transform: none; }
}