/* ============================================================
   PROJEKT-Ergaenzungen luetje - nur Struktur, alle Werte aus Tokens.
   base.css bleibt unangetastet (Framework-Regel); was dem Skelett
   fehlt, wird HIER ergaenzt (CLAUDE.md Regel 8).
   ============================================================ */

/* Display-Schrift nutzt die Breiten-Achse des variablen Archivo */
h1, h2, h3, h4, .knopf, .kennzahl, .zusage {
  font-stretch: var(--display-breite);
}

/* Links: Gelb auf hellem Grund ist unlesbar - Text bleibt Textfarbe,
   das Gelb sitzt in der Unterstreichung (abgedunkelt fuer Kontrast) */
a {
  color: var(--farbe-text);
  text-decoration: underline;
  text-decoration-color: var(--farbe-akzent-tief);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-color: var(--farbe-text); }
.knopf, .knopf:hover { text-decoration: none; }

/* Signatur-Element: der Logo-Strahl (dna.yaml -> signatur).
   Orte: vor dem Kicker (klein), unter Sektions-H2 (gross), Listenmarker. */
.strahl {
  display: inline-block;
  width: var(--strahl-breite);
  height: var(--strahl-hoehe);
  background: var(--farbe-akzent);
}
.strahl--klein { width: var(--strahl-breite-klein); }
.strahl--blau { background: var(--farbe-gewerk-blau); }
.strahl--rot { background: var(--farbe-gewerk-rot); }
.liste-strahl { list-style: none; padding: 0; }
.liste-strahl > li {
  padding-left: calc(1.1rem + var(--raum-2));
  position: relative;
}
.liste-strahl > li + li { margin-top: var(--raum-1); }
.liste-strahl > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 1.1rem;
  height: calc(var(--strahl-hoehe) / 2);
  background: var(--farbe-akzent-tief);
}

/* Kicker: Strahl + Zeile ueber der H1/H2 (KEIN Uppercase, keine Sperrung -
   Verbotskatalog; der Strahl ersetzt das) */
.kicker {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  font-weight: 600;
}

/* Die EINE dunkle Buehne (nur Hero): Foto + Overlay + helle Schrift */
.buehne {
  position: relative;
  background: var(--farbe-buehne);
  color: var(--farbe-auf-buehne);
  isolation: isolate;
}
.buehne > picture img, .buehne > img.buehne__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--verlauf-buehne);
  z-index: -1;
}
.buehne a { color: var(--farbe-auf-buehne); }
.buehne .meta { color: var(--farbe-auf-buehne-gedimmt); }
.buehne h2, .buehne h3 { color: var(--farbe-auf-buehne); }
.buehne .knopf--sekundaer { color: var(--farbe-auf-buehne); border-color: var(--farbe-auf-buehne-gedimmt); }
.buehne .textspalte { color: var(--farbe-auf-buehne-gedimmt); }

/* Dunkle Flaeche ohne Foto (Soforthilfe): traegt die Hero-Stimmung weiter */
.dunkel { background: var(--farbe-buehne); color: var(--farbe-auf-buehne); }
.dunkel .meta { color: var(--farbe-auf-buehne-gedimmt); }
.dunkel .textspalte { color: var(--farbe-auf-buehne-gedimmt); }
.dunkel a { color: var(--farbe-auf-buehne); }
.dunkel .knopf--sekundaer { color: var(--farbe-auf-buehne); border-color: var(--farbe-auf-buehne-gedimmt); }
/* Gelbe Knoepfe behalten auf dunklen Flaechen ihre dunkle Schrift */
.buehne .knopf:not(.knopf--sekundaer), .dunkel .knopf:not(.knopf--sekundaer) { color: var(--farbe-auf-akzent); }

/* Blauer Knopf (Soforthilfe: Wasser-Gewerk) - dunkle Schrift auf Cyan */
.dunkel .knopf--blau, .knopf--blau { background: var(--farbe-gewerk-blau); color: var(--farbe-text); }

/* Formular-Karte: Ueberschrift bleibt dunkel, auch auf der Buehne */
.formkarte h2, .formkarte h3 { color: var(--farbe-text); }

/* CTA-Baender: IMMER dunkel, die Gewerk-Farbe sitzt nur in Knopf und Strich
   (Paul 26.08., Runde 6) */
.band--dunkel { background: var(--farbe-buehne); color: var(--farbe-auf-buehne); }
.band--dunkel .zusage { color: var(--farbe-auf-buehne); }
.band--dunkel .knopf--sekundaer { color: var(--farbe-auf-buehne); border-color: var(--farbe-auf-buehne-gedimmt); }
.knopf--rot { background: var(--farbe-gewerk-rot); color: var(--farbe-auf-buehne); }

/* Gewerk-Block: Vollton-Kopfleiste in Gewerk-Farbe (leistungen-uebersicht) */
.gewerk-block { display: flex; flex-direction: column; }
.gewerk-block__kopf {
  font-family: var(--schrift-display);
  font-stretch: var(--display-breite);
  font-weight: var(--display-gewicht);
  font-size: calc(var(--text-basis) * 1.05);
  padding: var(--raum-2) var(--raum-2);
  color: var(--farbe-auf-buehne);
  white-space: nowrap;
}
.gewerk-block__kopf--rot { background: var(--farbe-gewerk-rot); }
.gewerk-block__kopf--blau { background: var(--farbe-gewerk-blau); }
.gewerk-block__kopf--gelb { background: var(--farbe-akzent); color: var(--farbe-text); }
.gewerk-block__bild img { width: 100%; display: block; }
.gewerk-block__koerper {
  background: var(--farbe-flaeche);
  border: var(--linie);
  border-top: none;
  padding: var(--raum-2);
  flex-grow: 1;
}

/* Galerie: quadratische Kacheln aus dem Alt-Bestand */
.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--raum-2);
}
.galerie img { width: 100%; display: block; }
@media (max-width: 720px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
}

/* Gelbe Oberkante als Sektions-Signatur (person-vorstellung) */
.kante-oben { border-top: var(--akzentkante); }

/* Ablauf-Schritt mit gelbem Nummern-Quadrat (Canvas-Auswahl 22.08.) */
.schritt-quadrate { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-3); position: relative; }
.schritt-quadrate::before {
  content: "";
  position: absolute;
  top: calc(2.125rem - 1px);
  left: 2.125rem;
  right: 2.125rem;
  height: 3px;
  background: var(--farbe-linie);
}
.schritt-quadrate > li { list-style: none; position: relative; }
.schritt-quadrate > li > * + * { margin-top: var(--raum-2); }
.schritt-quadrate .nummer {
  width: 4.25rem;
  height: 4.25rem;
  font-size: var(--text-xl);
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--schrift-display);
  font-stretch: var(--display-breite);
  font-weight: var(--display-gewicht);
  font-size: var(--text-l);
}
@media (max-width: 720px) {
  .schritt-quadrate { grid-template-columns: 1fr; }
  .schritt-quadrate::before { display: none; }
}

/* Mobil: Display-Groessen eine Stufe runter, lange Komposita brechen sauber */
@media (max-width: 720px) {
  h1 { font-size: var(--text-2xl); hyphens: auto; }
  h2 { font-size: var(--text-xl); }
}

/* Person-Raster: Zitat links, Foto rechts; mobil gestapelt */
.person-raster {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--raum-4);
  align-items: center;
}
@media (max-width: 720px) {
  .person-raster { grid-template-columns: 1fr; }
}

/* --- Seiten-Chrome ------------------------------------------ */

/* Header: kompakt, sticky, Logo links, Telefon + CTA rechts */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--farbe-flaeche);
  border-bottom: var(--linie);
}
.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding-block: var(--raum-2);
}
.kopf__logo { min-width: 0; }
.kopf__logo img { width: auto; height: auto; max-height: 3.4rem; max-width: 100%; }
.kopf__nav { display: flex; gap: var(--raum-3); }
.kopf__nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: calc(var(--text-basis) * 1.1);
}
.kopf__nav a:hover { text-decoration: underline; text-decoration-color: var(--farbe-akzent-tief); }
.kopf__kontakt { margin-left: auto; display: flex; align-items: center; gap: var(--raum-2); }
@media (max-width: 960px) {
  .kopf__nav { display: none; }
}
/* Mobil traegt die Sticky-Leiste die Kontaktwege - der Header-CTA fliegt raus */
@media (max-width: 720px) {
  .kopf__kontakt { display: none; }
}

/* Hero-Telefon: gross und im Logo-Gelb auf der Buehne, Zeiten darunter */
.hero-tel { margin-top: var(--raum-2); }
.hero-tel a {
  font-family: var(--schrift-display);
  font-stretch: var(--display-breite);
  font-weight: var(--display-gewicht);
  font-size: var(--text-2xl);
  color: var(--farbe-akzent);
  text-decoration: none;
  white-space: nowrap;
}
.hero-tel .meta { display: block; margin-top: var(--raum-1); }

/* Hero-Raster: Text links, Formular-Karte rechts */
.hero-raster {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--raum-3);
  align-items: start;
  padding-block: var(--raum-3) var(--raum-4);
}
@media (max-width: 960px) {
  .hero-raster { grid-template-columns: 1fr; }
}

/* Formular-Karte (im Hero auf der Buehne) */
.formkarte {
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  padding: var(--raum-3);
}
.formkarte a { color: var(--farbe-text); }
.formkarte .meta { color: var(--farbe-text-gedimmt); }
.formkarte select { font-size: var(--text-s); color: var(--farbe-text-gedimmt); }

/* Erfolgs-Bestaetigung des Formulars (js/rueckruf.js + :target-Fallback).
   Wichtig: [hidden] muss auch gegen Klassen mit eigenem display gewinnen,
   sonst bleiben Felder nach dem Absenden stehen (Befund Paul 26.08.). */
.formkarte [hidden] { display: none !important; }
.form-ok { display: none; }
.form-ok:target, .form-ok--sichtbar {
  display: block;
  font-family: var(--schrift-display);
  font-stretch: var(--display-breite);
  font-weight: var(--display-gewicht);
  font-size: var(--text-xl);
  line-height: 1.3;
  text-wrap: balance;
}

/* Honeypot-Feld: fuer Menschen unsichtbar */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Vertrauensleiste: eine Zeile, feine Trenner, auf Weiss */
.leiste {
  background: var(--farbe-flaeche);
  border-bottom: var(--linie);
  padding-block: var(--raum-2);
}
.leiste__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  flex-wrap: wrap;
}
.leiste__innen > span { font-weight: 600; font-size: calc(var(--text-basis) * 1.05); white-space: nowrap; }
.leiste__trenner { width: 1px; height: 1.4em; background: var(--farbe-linie); }
@media (max-width: 720px) {
  .leiste__innen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-2); }
  .leiste__innen > span { white-space: normal; }
  .leiste__trenner { display: none; }
}

/* Sticky-Kontaktleiste: beide Knoepfe farbig (Paul 26.08.) */
@media (max-width: 720px) {
  .sticky-kontakt > a { font-weight: 600; text-decoration: none; }
  .sticky-kontakt > a:first-child { background: var(--farbe-buehne); color: var(--farbe-auf-buehne); }
  .sticky-kontakt > a:last-child { background: var(--farbe-akzent); color: var(--farbe-auf-akzent); border-left: none; }
}

/* Fusszeile: dunkel, schliesst die Buehnen-Klammer der Seite */
.fuss {
  background: var(--farbe-buehne);
  color: var(--farbe-auf-buehne-gedimmt);
  border-top: 1px solid rgb(255 255 255 / 14%);
  padding-block: var(--raum-3);
}
.fuss a { color: var(--farbe-auf-buehne); }
.fuss .meta { color: var(--farbe-auf-buehne-gedimmt); }