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

.fenster-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fenster { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; }
.fenster-leiste { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--linie-zart); }
.fenster-leiste i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.fenster-leiste span { margin-left: 8px; font-size: 10.5px; color: var(--getoent); opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mini { aspect-ratio: 4 / 3.1; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; }
.mini-kopf { height: 13px; border-radius: 3px; width: 72%; }
.mini-zeile { height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); }
.mini-zeile.kurz { width: 55%; }
.mini-knopf { height: 15px; width: 40%; border-radius: 999px; margin-top: 3px; }
.mini-band { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: auto; }
.mini-band i { height: 22px; border-radius: 5px; background: rgba(255,255,255,.08); }

.m-werkstatt { background: linear-gradient(150deg, #1a1d22, #0f1114); }
.m-werkstatt .mini-kopf, .m-werkstatt .mini-knopf { background: #e8913c; }
.m-praxis { background: linear-gradient(150deg, #f4efe4, #e8e1d2); }
.m-praxis .mini-kopf, .m-praxis .mini-knopf { background: #1c5c46; }
.m-praxis .mini-zeile { background: rgba(28,92,70,.22); }
.m-praxis .mini-band i { background: rgba(28,92,70,.12); }
.m-handel { background: linear-gradient(150deg, #151f2e, #0c1220); }
.m-handel .mini-kopf, .m-handel .mini-knopf { background: #4a6cf7; }

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

@media (max-width: 720px) {
  .fenster-reihe { grid-template-columns: 1fr; }
  .fenster:nth-child(3) { display: 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; }
.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; }
.baustein-preis { font-size: 13px; font-weight: 700; color: var(--bernstein); }
.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 span {
  padding: 5px 13px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 13px;
  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;
}