/* 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.
   ===================================================================== */

/* Das Fenster hat Monitorformat, nicht Briefkastenformat.
   Über die volle Spaltenbreite ergab 318 px Höhe ein Verhältnis von
   3,5:1 — Ole: „das format des kastens finde ich seltsam, so breit,
   lass es wie ein pc bildschirm aussehen." Also 16:10 wie ein Notebook,
   und dafür schmaler: die wahrgenommene Größe hängt an der Breite, und
   zu groß sollte es auch nicht werden. */
.vorfuehrung { margin: 30px auto 0; max-width: 820px; }
.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);
  aspect-ratio: 16 / 10;
  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) {
  /* Auf dem Telefon ist ein Notebookformat zu hoch — dort zählt, dass
     der Ausschnitt oben vollständig lesbar ist. */
  .vf-glas { aspect-ratio: 4 / 3; }
  .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; }
}

/* =====================================================================
   Der Kundenbereich (19.09.2026)

   Dieselbe Schrift und dieselben Farben wie die Landingpage — der
   Betrieb soll merken, dass er bei derselben Firma ist. Aber ruhiger:
   Hier wird gearbeitet, nicht geworben.
   ===================================================================== */

.bt-schmal { max-width: 460px; padding-block: clamp(48px, 9vw, 96px); }
.bt-formular { display: grid; gap: 18px; margin-top: 28px; }
.bt-feld { display: grid; gap: 7px; }
.bt-feld label { font-size: 14px; font-weight: 600; color: var(--getoent); }
.bt-feld input {
  font: inherit; font-size: 16px;
  padding: 12px 14px; border-radius: 10px;
  color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie);
}
.bt-feld input:focus { outline: 2px solid var(--bernstein); outline-offset: 2px; border-color: transparent; }
.bt-hilfe { font-size: 13px; line-height: 1.5; color: var(--getoent); }
.bt-formular .knopf { justify-self: start; }
.bt-fehler {
  margin: 0; padding: 12px 14px; border-radius: 10px;
  font-size: 14.5px; color: #ffb4a2;
  background: rgba(255, 120, 100, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 100, .30);
}

.bt-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bt-hinweis {
  margin: 0; padding: 14px 16px; border-radius: 10px;
  font-size: 14.5px; color: var(--tinte);
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bernstein) 35%, transparent);
}
.bt-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; }
.bt-kachel {
  display: grid; gap: 7px; align-content: start;
  padding: 22px; border-radius: var(--radius);
  background: var(--flaeche); border: 1px solid var(--linie);
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.bt-kachel:hover { border-color: var(--bernstein); background: var(--flaeche-hoch); transform: translateY(-2px); }
.bt-kachel b { font-size: 1.05rem; letter-spacing: -.02em; }
.bt-kachel span { font-size: 14.5px; line-height: 1.55; color: var(--getoent); }
.bt-kachel em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--bernstein); margin-top: 4px; }
.bt-leer { margin-top: 22px; font-size: 15.5px; line-height: 1.6; color: var(--getoent); max-width: 60ch; }
.bt-leer a { color: var(--bernstein); }

/* =====================================================================
   Die Objektverwaltung (19.09.2026)

   Der erste Baustein, den ein Betrieb selbst bedient. Er sieht aus wie
   der Rest des Kundenbereichs, ist aber dichter gesetzt: hier wird
   nicht gelesen, sondern getippt und gesucht.

   Die Felder der Maske erben von `.bt-feld`; nur der Kasten drumherum
   und die Liste sind neu. Alles unter `.ob-`, damit es sich mit den
   Bausteinseiten (`.lst-`) und der Vorabfrage nicht beisst - genau
   dieser Zusammenstoss ist am 18.09.2026 schon einmal passiert.
   ===================================================================== */

.bt-zurueck { color: var(--getoent); text-decoration: none; font-weight: 600; }
.bt-zurueck:hover { color: var(--tinte); }

/* Die Felder der Maske: dieselbe Form wie beim Anmelden, aber fuer
   ALLE Steuerelemente und nicht nur fuer <input>. */
.bt-feld select,
.bt-feld textarea,
.bt-feld input[type="file"] {
  font: inherit; font-size: 16px;
  padding: 12px 14px; border-radius: 10px;
  color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie);
  width: 100%;
}
.bt-feld textarea { line-height: 1.55; resize: vertical; min-height: 92px; }
.bt-feld select:focus, .bt-feld textarea:focus, .bt-feld input[type="file"]:focus {
  outline: 2px solid var(--bernstein); outline-offset: 2px; border-color: transparent;
}
/* Die Auswahlliste faerbt ihre Eintraege im Browser selbst - ohne das
   hier steht dunkle Schrift auf dunklem Grund, sobald sie aufklappt. */
.bt-feld select option { color: #101426; background: #ffffff; }

.knopf.klein { padding: 9px 16px; font-size: 14px; font-weight: 700; box-shadow: none; }
.knopf.klein:hover { transform: none; box-shadow: none; }
.knopf.gefahr {
  background: transparent; color: #ffb4a2; border-color: rgba(255,120,100,.45);
  box-shadow: none;
}
.knopf.gefahr:hover { background: rgba(255,120,100,.12); border-color: #ffb4a2; transform: none; box-shadow: none; }

/* ---------- Die Liste ---------- */

.ob-zaehler { font-size: 14.5px; color: var(--getoent); margin-bottom: 18px; }
.ob-liste { display: grid; gap: 12px; }

.ob-zeile {
  display: grid;
  grid-template-columns: 148px 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--flaeche);
  border: 1px solid var(--linie);
}
/* Was nicht online ist, tritt zurueck - aber lesbar: ein halb
   durchsichtiger Kasten waere auf diesem dunklen Grund Matsch. */
.ob-zeile.ist-still { background: transparent; border-style: dashed; }
.ob-zeile.ist-still .ob-bild img { filter: grayscale(1); opacity: .6; }

.ob-bild {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--linie-zart);
  text-decoration: none;
}
.ob-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-kein-bild { font-size: 12.5px; color: var(--getoent); }

.ob-text { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ob-marke { font-size: 12.5px; font-weight: 700; color: var(--bernstein); }
.ob-zeile h2 { font-size: 1.15rem; margin: 0; max-width: none; letter-spacing: -.02em; }
.ob-zeile h2 a { color: var(--tinte); text-decoration: none; }
.ob-zeile h2 a:hover { color: var(--bernstein); }
.ob-kurz { font-size: 14.5px; line-height: 1.5; color: var(--getoent); }
.ob-daten { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--getoent); margin-top: 2px; }
.ob-daten b { color: var(--tinte); font-weight: 700; }

.ob-rechts { display: grid; gap: 8px; justify-items: end; text-align: right; }
.ob-preis { font-size: 1.05rem; font-weight: 800; color: var(--tinte); }
.ob-stand {
  font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--flaeche-hoch); color: var(--getoent);
}
.ob-stand-online { color: #7ee2b8; background: rgba(126,226,184,.12); }
.ob-stand-reserviert { color: var(--bernstein); background: rgba(232,145,60,.14); }
.ob-schalter { display: flex; gap: 8px; align-items: center; }
.ob-schalter select {
  font: inherit; font-size: 13.5px; padding: 7px 10px; border-radius: 9px;
  color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie);
}
.ob-schalter select option { color: #101426; background: #ffffff; }

.ob-leer {
  display: grid; gap: 14px; justify-items: start;
  padding: 42px; border-radius: var(--radius);
  background: var(--flaeche); border: 1px dashed var(--linie);
}
.ob-leer h2 { margin: 0; font-size: 1.4rem; }
.ob-leer p { max-width: 58ch; font-size: 15.5px; line-height: 1.6; }

/* ---------- Die Maske ---------- */

.ob-form { display: grid; gap: 26px; max-width: 880px; }
.ob-satz {
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 22px 24px 26px; margin: 0;
  background: var(--flaeche);
}
.ob-satz legend {
  padding: 0 10px; font-size: 13px; font-weight: 800;
  letter-spacing: .02em; color: var(--bernstein);
}
.ob-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.ob-spalte { display: grid; gap: 16px; }
/* Die Ueberschrift ist das einzige Pflichtfeld und das laengste - sie
   bekommt die ganze Zeile, sonst steht sie in einer 210-px-Spalte. */
.ob-feld-titel { grid-column: 1 / -1; }
.ob-recht { max-width: 70ch; margin-bottom: 16px; }

/* Ein Haken ist kein Textfeld: Kaestchen und Beschriftung nebeneinander,
   und das Kaestchen behaelt seine eigene Groesse. */
.ob-haken { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.ob-haken label { order: 2; font-weight: 500; color: var(--tinte); }
.ob-haken input[type="checkbox"] { order: 1; width: 18px; height: 18px; accent-color: var(--bernstein); padding: 0; }
.ob-breit { grid-column: 1 / -1; }

.ob-fotos { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ob-foto { margin: 0; display: grid; gap: 8px; justify-items: center; }
.ob-foto img {
  width: 150px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--linie); display: block;
}
.ob-foto figcaption { font-size: 12.5px; color: var(--bernstein); font-weight: 700; }

.ob-fuss { display: flex; gap: 12px; flex-wrap: wrap; }

.ob-bildpflege { margin-top: 42px; }
.ob-bildpflege h2, .ob-loeschen h2 { font-size: 1.2rem; margin-bottom: 14px; max-width: none; }
.ob-loeschen {
  margin-top: 42px; padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,120,100,.25);
  display: grid; gap: 12px; justify-items: start; max-width: 880px;
}
.ob-loeschen p { font-size: 14.5px; line-height: 1.6; max-width: 62ch; }
.ob-loeschen em { font-style: normal; color: var(--tinte); font-weight: 600; }

@media (max-width: 760px) {
  .ob-zeile { grid-template-columns: 96px 1fr; }
  .ob-rechts { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .ob-schalter { flex-wrap: wrap; }
  .ob-satz { padding: 18px 16px 22px; }
  .ob-foto img { width: 120px; }
}

/* Die Verwaltung atmet weniger als die Landingpage. Gemessen am
   19.09.2026: zwischen „Ihre Objekte" und der ersten Zeile der Liste
   standen 190 px Luft, weil beide Bloecke `.abschnitt` waren. Auf
   einer Werbeseite ist das richtig, in einer Maske nicht. */
.ob-abschnitt { padding-block: 30px; }
/* Die Kopfzeile der Seite liegt ABSOLUT (siehe .kopf, Zeile 82) - der
   erste Abschnitt einer Seite muss ihre Hoehe selbst freihalten. Mit
   34 px stand „Objekt bearbeiten" im Schriftzug (19.09.2026). */
.ob-abschnitt.bt-kopf { padding-block: 104px 22px; }
.ob-meldung { padding-block: 0 8px; display: grid; gap: 8px; }
.ob-meldung + .ob-meldung { padding-top: 0; }

/* =====================================================================
   Die KI-Seite (19.09.2026)

   Eigene Seite, weil der Baustein als letzter Kasten auf /bausteine/
   untergegangen ist. Ole: „das geht unter, da brauchen wir einen
   eigenen menuepunkt."

   Gestalterisch unterscheidet sie sich von den uebrigen Landingseiten
   an genau EINER Stelle, und das mit Absicht: die Buehne zeigt keine
   Website, sondern eine Kommandozentrale. Alles darin ist HTML und
   CSS - kein Bild, kein Skript, keine fremde Quelle. Das ist nicht nur
   billiger, es ist auch das ehrlichere Schaubild: Wir zeigen, was wir
   bauen, indem wir es bauen.

   Alle Angaben im Schaubild sind ERFUNDEN (siehe Kommentar in der
   Vorlage).
   ===================================================================== */

/* ---------- Buehne ---------- */

.ki-buehne {
  position: relative;
  overflow: hidden;
  padding-block: clamp(96px, 14vw, 150px) clamp(48px, 8vw, 90px);
  /* Ein einziger kalter Schimmer von rechts oben - er bindet das
     Blau der Zentrale an die Seite, ohne eine zweite Farbe
     einzufuehren. */
  background:
    radial-gradient(90% 70% at 88% -10%,
      color-mix(in srgb, var(--blau) 16%, transparent) 0%, transparent 62%),
    var(--nacht);
}
.ki-buehne-innen {
  display: grid;
  /* Die Textspalte etwas breiter als das Schaubild: sonst bricht die
     Schlagzeile in vier Zeilen und die zwei Knoepfe stehen
     untereinander (gemessen 19.09.2026, 1440 px). */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
.ki-buehne h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.5rem);
  letter-spacing: -.035em;
  line-height: 1.04;
  margin-bottom: 20px;
}
.ki-buehne .vorspann { max-width: 46ch; }
.ki-knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ki-beiwort { margin-top: 18px; }

@media (max-width: 900px) {
  .ki-buehne-innen { grid-template-columns: 1fr; }
  .ki-buehne { padding-block: clamp(84px, 16vw, 110px) 40px; }
}

/* ---------- Das Schaubild: eine Kommandozentrale ----------
   Bewusst dichter gesetzt als die uebrige Seite. Ein Werkzeug, mit dem
   jemand acht Stunden arbeitet, hat andere Abstaende als eine Seite,
   die jemand einmal liest - und genau dieser Unterschied soll zu sehen
   sein. */

.kz { margin: 0; }
.kz-rahmen {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--blau) 7%, transparent) 0%, transparent 38%),
    var(--nacht-tief);
  border: 1px solid var(--linie);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: 13px;
}

.kz-kopf { display: flex; align-items: center; gap: 10px; padding-bottom: 2px; }
.kz-punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: #48d597;
  box-shadow: 0 0 0 4px color-mix(in srgb, #48d597 18%, transparent);
  animation: kz-puls 2.6s ease-in-out infinite;
}
@keyframes kz-puls {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, #48d597 18%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, #48d597 6%, transparent); }
}
.kz-marke { font-weight: 700; letter-spacing: -.01em; font-size: 13.5px; }
.kz-uhr { margin-left: auto; color: var(--getoent); font-variant-numeric: tabular-nums; }

.kz-dach {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--getoent); opacity: .75;
  margin-bottom: 8px;
}

.kz-briefing {
  padding: 14px 15px;
  border-radius: 12px;
  background: var(--flaeche);
  border-left: 2px solid var(--bernstein);
}
.kz-briefing p { font-size: 13px; line-height: 1.55; color: var(--getoent); margin: 0; }
.kz-briefing b { color: var(--tinte); font-weight: 600; }

.kz-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kz-zahlen > div {
  padding: 12px 14px; border-radius: 12px;
  background: var(--flaeche); border: 1px solid var(--linie-zart);
  display: grid; gap: 2px;
}
.kz-wert { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.kz-wert small { font-size: .5em; font-weight: 700; color: var(--getoent); margin-left: 1px; }
.kz-marke2 { font-size: 10.5px; color: var(--getoent); }

.kz-unten { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10px; }
.kz-balken, .kz-liste {
  padding: 12px 14px; border-radius: 12px;
  background: var(--flaeche); border: 1px solid var(--linie-zart);
}
.kz-saeulen { display: flex; align-items: flex-end; gap: 5px; height: 62px; }
.kz-saeulen i {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--blau-hell) 38%, transparent);
  /* Die Saeulen wachsen einmal beim Laden hoch. Einmal, nicht als
     Dauerschleife - eine Zentrale, die dauernd zappelt, sieht nicht
     nach Arbeit aus, sondern nach Bildschirmschoner. */
  transform-origin: bottom;
  animation: kz-wachsen .9s cubic-bezier(.2, .8, .2, 1) both;
}
.kz-saeulen i:nth-child(2) { animation-delay: .06s; }
.kz-saeulen i:nth-child(3) { animation-delay: .12s; }
.kz-saeulen i:nth-child(4) { animation-delay: .18s; }
.kz-saeulen i:nth-child(5) { animation-delay: .24s; }
.kz-saeulen i:nth-child(6) { animation-delay: .30s; }
.kz-saeulen i:nth-child(7) { animation-delay: .36s; }
.kz-saeulen i.jetzt { background: var(--bernstein); }
@keyframes kz-wachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.kz-zeile {
  display: grid; grid-template-columns: 7px 1fr auto;
  gap: 9px; align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--linie-zart);
  font-size: 12px; color: var(--getoent);
}
.kz-zeile:first-of-type { border-top: 0; }
.kz-zeile i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.kz-zeile i.neu { background: var(--blau-hell); }
.kz-zeile i.warn { background: var(--bernstein); }
.kz-zeile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-zeile em { font-style: normal; font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }

.kz-assistent {
  display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: center;
  padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--blau) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--blau-hell) 24%, transparent);
}
.kz-avatar {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--blau); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: -.02em;
}
.kz-assistent p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tinte); }
.kz-cursor {
  display: inline-block; width: 2px; height: 1em;
  margin-left: 3px; vertical-align: -2px;
  background: var(--blau-hell);
  animation: kz-blinken 1.1s steps(1) infinite;
}
@keyframes kz-blinken { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.kz figcaption { margin-top: 11px; font-size: 12px; line-height: 1.5; color: var(--getoent); opacity: .8; }

@media (max-width: 560px) {
  .kz-rahmen { padding: 13px; gap: 10px; }
  .kz-unten { grid-template-columns: 1fr; }
  .kz-zahlen { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .kz-zahlen > div { padding: 10px 11px; }
  .kz-wert { font-size: 1.25rem; }
}

/* ---------- Zwei Richtungen ---------- */

.ki-zweiwege { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px 56px; align-items: start; }
.ki-zweiwege h2 { margin-bottom: 0; }
.ki-zweiwege-text { display: grid; gap: 16px; }
.ki-zweiwege-text p { font-size: 17px; line-height: 1.65; max-width: 60ch; }
@media (max-width: 860px) { .ki-zweiwege { grid-template-columns: 1fr; } }

/* ---------- Die Felder ---------- */

.ki-feld { padding-block: clamp(52px, 8vw, 88px); }
.ki-feldkopf { max-width: 62ch; margin-bottom: 34px; }
.ki-feldkopf h2 { margin-bottom: 16px; }

.ki-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.ki-karte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 20px;
  border-radius: var(--radius);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  transition: border-color .18s ease, background .18s ease;
}
.ki-karte:hover { border-color: color-mix(in srgb, var(--bernstein) 45%, transparent); background: var(--flaeche-hoch); }
.ki-karte h3 { font-size: 1.1rem; letter-spacing: -.025em; line-height: 1.25; margin: 0; }
.ki-was { font-size: 15px; line-height: 1.6; color: var(--getoent); margin: 0; }

/* Der Fall aus dem Alltag ist der Kern jeder Karte - er steht deshalb
   abgesetzt und nicht als dritter Absatz. Wer nur diese Zeile liest,
   hat das Werkzeug verstanden. */
.ki-fall {
  margin: 0;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
  border-left: 2px solid color-mix(in srgb, var(--bernstein) 60%, transparent);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinte);
}
.ki-fall span {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bernstein);
  margin-bottom: 5px;
}

.ki-mehr { margin-top: auto; }
.ki-mehr summary {
  cursor: pointer;
  list-style: none;
  /* Zeile und Pfeil in einer Reihe. Mit einem schlichten ::after brach
     der Pfeil in eine eigene Zeile (gemessen 19.09.2026). */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--getoent);
  padding-top: 12px;
  border-top: 1px solid var(--linie-zart);
  transition: color .15s ease;
}
.ki-mehr summary::-webkit-details-marker { display: none; }
.ki-mehr summary::after { content: "▾"; flex: 0 0 auto; font-size: .9em; opacity: .7; }
.ki-mehr[open] summary::after { content: "▴"; }
.ki-mehr summary:hover { color: var(--tinte); }
.ki-mehr summary:focus-visible { outline: 2px solid var(--bernstein); outline-offset: 3px; border-radius: 4px; }
.ki-mehr p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--getoent); }
.ki-mehr b { color: var(--tinte); font-weight: 600; }

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

.ki-ablauf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.ki-schritt {
  display: grid; gap: 9px; align-content: start;
  padding: 24px 22px;
  border-radius: var(--radius);
  background: var(--flaeche);
  border: 1px solid var(--linie);
}
.ki-nr { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--bernstein); }
.ki-schritt h3 { font-size: 1.05rem; letter-spacing: -.02em; margin: 0; }
.ki-schritt p { font-size: 14.5px; line-height: 1.6; color: var(--getoent); margin: 0; }

/* ---------- Datenhoheit ---------- */

.ki-daten { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px 56px; align-items: start; }
.ki-daten h2 { margin-bottom: 14px; }
.ki-datenliste { display: grid; gap: 0; }
.ki-datenposten { padding: 20px 0; border-top: 1px solid var(--linie-zart); }
.ki-datenposten:first-child { border-top: 0; padding-top: 0; }
.ki-datenposten h3 { font-size: 1.02rem; letter-spacing: -.02em; margin: 0 0 6px; }
.ki-datenposten p { font-size: 15px; line-height: 1.6; color: var(--getoent); margin: 0; max-width: 62ch; }
@media (max-width: 860px) { .ki-daten { grid-template-columns: 1fr; } }

/* ---------- Grenzen ---------- */

.ki-grenzen { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px 56px; align-items: start; }
.ki-grenzen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.ki-grenzen li {
  padding-left: 24px; position: relative;
  font-size: 15.5px; line-height: 1.65; color: var(--getoent); max-width: 66ch;
}
.ki-grenzen li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 11px; height: 2px; border-radius: 1px;
  background: var(--bernstein);
}
@media (max-width: 860px) { .ki-grenzen { grid-template-columns: 1fr; } }

/* ---------- Termin ---------- */

.ki-termin { padding-bottom: clamp(70px, 11vw, 120px); }
.ki-terminkasten {
  padding: clamp(34px, 5vw, 56px);
  border-radius: var(--radius);
  background:
    radial-gradient(80% 140% at 82% 0%,
      color-mix(in srgb, var(--bernstein) 13%, transparent) 0%, transparent 60%),
    var(--flaeche);
  border: 1px solid var(--linie);
}
.ki-terminkasten h2 { max-width: 20ch; margin-bottom: 16px; }
.ki-terminkasten .vorspann { max-width: 58ch; }
.ki-terminkasten .beiwort { margin-top: 18px; }

/* ---------- Die Referenzzeile ----------
   Sitzt direkt unter der Buehne: erst das Versprechen, dann der Beleg.
   Etwas heller abgesetzt als der Rest, damit sie nicht im Fluss
   untergeht - aber ohne Kasten, denn sie soll nicht wie eine Anzeige
   aussehen. (19.09.2026) */

.ki-referenz {
  padding-block: clamp(46px, 7vw, 76px);
  border-block: 1px solid var(--linie-zart);
  background: rgba(255, 255, 255, .022);
}
.ki-referenz .dach { display: flex; align-items: center; gap: 9px; }
/* Der gruene Punkt bedeutet genau eine Sache: das laeuft gerade. Er
   steht deshalb nirgendwo sonst auf dieser Seite. */
.ki-laeuft {
  width: 7px; height: 7px; border-radius: 50%;
  background: #48d597;
  box-shadow: 0 0 0 3px color-mix(in srgb, #48d597 18%, transparent);
  flex: 0 0 auto;
}
.ki-referenz h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); max-width: 24ch; margin-bottom: 14px; }
.ki-referenz .vorspann { max-width: 64ch; margin-bottom: 34px; }

.ki-referenzliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px 34px;
}
.ki-referenzposten { padding-top: 16px; border-top: 2px solid color-mix(in srgb, var(--bernstein) 55%, transparent); }
.ki-referenzposten h3 { font-size: 1rem; letter-spacing: -.02em; line-height: 1.3; margin: 0 0 8px; }
.ki-referenzposten p { font-size: 14.5px; line-height: 1.6; color: var(--getoent); margin: 0; }

.ki-referenzhinweis {
  margin-top: 30px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--getoent);
  max-width: 62ch;
  padding-left: 15px;
  border-left: 2px solid var(--linie);
}

/* ---------- Die eigene Adresse im Kundenbereich (19.09.2026) ---------- */

.ad-kopf { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ad-domain { font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 800; letter-spacing: -.03em; color: var(--tinte); }
.ad-stand {
  padding: 7px 15px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  background: var(--flaeche-hoch); color: var(--getoent);
}
.ad-stand-gut { color: #7ee2b8; background: rgba(126,226,184,.13); }
.ad-stand-warte { color: var(--bernstein); background: rgba(232,145,60,.14); }
.ad-stand-offen { color: #ffb4a2; background: rgba(255,120,100,.12); }
.ad-pruefung { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--getoent); max-width: 68ch; }

.ad-anleitung, .ad-fertig {
  margin-top: 28px; padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--flaeche); border: 1px solid var(--linie);
}
.ad-anleitung h2, .ad-fertig h2 { font-size: 1.25rem; max-width: none; margin-bottom: 12px; }
.ad-fertig p { font-size: 15.5px; line-height: 1.6; max-width: 66ch; margin-bottom: 18px; }

.ad-tabelle { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.ad-tabelle th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--getoent);
  padding: 0 14px 8px 0; border-bottom: 1px solid var(--linie);
}
.ad-tabelle td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--linie-zart); color: var(--tinte); }
/* Die Zahl darf man abtippen koennen - und ein Tippfehler darin kostet
   den Betrieb einen halben Tag Warten. Deshalb Monospace und gross. */
.ad-wert { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.ad-fussnote { font-size: 14px; line-height: 1.6; color: var(--getoent); max-width: 70ch; margin-top: 12px; }
.ad-fussnote b { color: var(--tinte); }

/* ---------- Ein Beitrag im Kundenbereich (19.09.2026) ---------- */

.be-titelbild { margin: 0 0 28px; }
.be-titelbild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); display: block; }

/* Der Text so, wie er spaeter auf der Kundenseite steht - nur in
   unseren Farben. Wer hier freigibt, soll sehen, was er freigibt. */
.be-leib { max-width: 68ch; }
.be-leib p { font-size: 16.5px; line-height: 1.75; color: var(--getoent); margin: 0 0 18px; }
.be-leib h2 { font-size: 1.35rem; max-width: 30ch; margin: 34px 0 12px; line-height: 1.25; }
.be-leib h3 { font-size: 1.08rem; margin: 24px 0 8px; }
.be-leib ul, .be-leib ol { margin: 0 0 18px; padding-left: 20px; color: var(--getoent); }
.be-leib li { font-size: 16px; line-height: 1.65; margin-bottom: 7px; }
.be-leib strong { color: var(--tinte); font-weight: 700; }
.be-leib a { color: var(--bernstein); }
.be-leib blockquote {
  margin: 26px 0; padding: 4px 0 4px 18px;
  border-left: 2px solid var(--bernstein);
}
.be-leib blockquote p { color: var(--tinte); }
.be-leib details { border-top: 1px solid var(--linie-zart); padding: 13px 0; }
.be-leib details:last-of-type { border-bottom: 1px solid var(--linie-zart); }
.be-leib summary {
  cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 700; color: var(--tinte);
  display: flex; justify-content: space-between; gap: 12px;
}
.be-leib summary::-webkit-details-marker { display: none; }
.be-leib summary::after { content: "+"; flex: 0 0 auto; font-weight: 400; color: var(--getoent); }
.be-leib details[open] summary::after { content: "−"; }
.be-leib details p { margin: 9px 0 0; font-size: 15.5px; }