/* 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: 11px; text-decoration: none; font-weight: 800; letter-spacing: -.03em; font-size: 1.1rem; }
.marke-zeichen { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; }
.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; }
}