/* ==========================================================================
   Baukasten des Website-Agenten. Jeder Wert stammt aus REGELWERK-Phase-2.md,
   die Regelnummer steht dahinter. Nichts wird von einem fremden Server geladen.
   ========================================================================== */

/* --- Marken -------------------------------------------------------------- */
:root {
  /* Farbe, Regel 3.1: fuenf Rollen, mehr nicht.
     Die Werte werden je Betrieb ersetzt, die Rollen bleiben. */
  --grund:        #FBFAF8;   /* Seitengrund, nie reines Weiss, Regel 3.4 */
  --flaeche:      #F1EEE9;   /* abgesetzte Blöcke */
  --text:         #1A1D21;   /* Fliesstext, nie reines Schwarz, Regel 3.4 */
  --leise:        #5B6068;   /* Nebentext, gegen --grund 6.2:1 */
  --akzent:       #A8431F;   /* gehoert der Handlungsaufforderung, Regel 3.3 */
  --akzent-text:  #FFFFFF;   /* Schrift auf dem Akzent, 5.9:1 */
  --rand:         #DDD8D0;

  /* Schrift, Regel 1.1: eine Familie. Die Datei liegt lokal, Regel 1.7.
     Ohne Datei greift der Systemstapel, die Seite bleibt benutzbar. */
  --schrift: "Agentschrift", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Groessenstufen, Regel 1.6: genau vier, nicht mehr.
     Basis 16 px (1.2), h1 zwischen 40 und 56 px, also Faktor 2,5 bis 3,5 (1.5) */
  --t-klein: 0.875rem;                        /* 14 px, nur Label und Fuss */
  --t-basis: 1rem;                            /* 16 px, Fliesstext */
  --t-mittel: 1.75rem;                        /* 28 px, Abschnittsueberschrift */
  --t-gross: clamp(2.5rem, 9vw, 3.5rem);      /* 40 bis 56 px, genau eine h1 */

  /* Raster, Regel 2.4: alles ist ein Vielfaches von 8 px */
  --r1: 0.5rem;   /* 8 */
  --r2: 1rem;     /* 16, zugleich der Seitenrand, Regel 2.1 */
  --r3: 1.5rem;   /* 24 */
  --r4: 2rem;     /* 32 */
  --r6: 3rem;     /* 48 */
  --r8: 4rem;     /* 64, Abstand zwischen Abschnitten mobil, Regel 2.3 */
  --r12: 6rem;    /* 96, ab Tablet */

  /* Der Seitensaum, Regel 2.1. Nicht mit --rand verwechseln, das ist eine
     Farbe. Bis zum 08.09.2026 waren es feste 16 px, und genau daran ist der
     Bildeinbau gescheitert: bei 16 px klebt der Text am Rand, ein randloses
     Bild daneben unterscheidet sich um 16 Pixel und liest sich als Versehen
     statt als Absicht. Gemessen bei 1180 px Fenster: odysseeclinic.com.au
     rueckt auf 212 px ein, wearedirect.co auf 586. Die Formel trifft 20 px
     bei 375 und 212 px bei 1180, darueber bleibt sie stehen. */
  --saum: clamp(1.25rem, 23.85vw - 69.4px, 13.25rem);

  --breite: 75rem;    /* 1200 px, Regel 2.2 */
  /* 448 px. Bei 16 px Schrift sind das rund 56 Zeichen je Zeile und damit
     innerhalb von Regel 1.4. Mit 32rem waren es am 07.09.2026 gemessene 68. */
  --spalte: 28rem;
  --radius: 0.75rem;
  --tipp: 2.75rem;    /* 44 px Mindestkante, Regel 5.4 */
}

/* --- Grundlagen ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--t-basis);      /* Regel 1.2 */
  line-height: 1.5;               /* Regel 1.3 */
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;

  /* Regel 2.6: deutsche Komposita brechen um, statt ihren Behaelter zu
     sprengen. Beide Eigenschaften werden vererbt, einmal am body genuegt
     also fuer jeden Behaelter darunter. `hyphens` wirkt nur, wenn im
     html-Tag `lang="de"` oder `lang="de-AT"` steht, sonst kennt der
     Browser die Trennregeln nicht. */
  overflow-wrap: break-word;
  hyphens: auto;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0 0 var(--r2); line-height: 1.15; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--t-gross); letter-spacing: -0.02em; }
h2 { font-size: var(--t-mittel); letter-spacing: -0.01em; }
h3 { font-size: var(--t-basis); }
p  { margin: 0 0 var(--r2); max-width: var(--spalte); text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Regel 2.1 und 2.2: mitwachsender Saum, hoechstens 1200 px Inhalt.
   Alles, was am Text fluchten soll, sitzt in einer .bahn. Was randlos laufen
   soll, sitzt ausserhalb. Ein Drittes gibt es nicht, sonst entstehen die
   fuenf zusammenhanglosen Kanten vom 08.09.2026. */
.bahn {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--saum);
}

/* Regel 2.3: 64 px mobil, 96 px ab Tablet */
section { padding-block: var(--r8); }
@media (min-width: 48rem) { section { padding-block: var(--r12); } }

.label {
  font-size: var(--t-klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 var(--r1);
}

/* --- Handlungsaufforderung, Regel 5.4 und 3.3 ---------------------------- */
.tat, .tat-leise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r1);
  min-height: var(--tipp);
  min-width: var(--tipp);
  padding: var(--r1) var(--r3);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
}
.tat {
  background: var(--akzent);
  color: var(--akzent-text);
}
.tat-leise {
  background: transparent;
  color: var(--text);
  border-color: var(--rand);
}
.tat:hover, .tat-leise:hover { filter: brightness(0.94); }

/* --- Kopf, fest, mit Wählknopf, Regel 4.1 und 5.3 ----------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rand);
}
.kopf .bahn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r2);
  min-height: 3.5rem;
}
/* Auch der Markenname ist antippbar und braucht die Mindestkante, Regel 5.4 */
.marke {
  display: inline-flex;
  align-items: center;
  min-height: var(--tipp);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* --- Hero, Regel 4.2: Angebot, Ort, erste Tat ohne Scrollen ------------- */
.hero { padding-block: var(--r6) var(--r8); }
.hero p.fuehrung {
  font-size: var(--t-basis);
  color: var(--leise);
  max-width: var(--spalte);
}
.hero .taten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2);
  margin-top: var(--r4);
}

/* --- Beweisleiste, Regel 4.3 -------------------------------------------- */
.beweisleiste {
  background: var(--flaeche);
  border-block: 1px solid var(--rand);
  padding-block: var(--r3);
}
.beweisleiste ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--r3);
  margin: 0; padding: 0; list-style: none;
}
.beweisleiste strong { display: block; font-size: var(--t-mittel); line-height: 1.1; }
.beweisleiste span { font-size: var(--t-klein); color: var(--leise); }

/* --- Karten für Leistungen, Ablauf, Fragen ------------------------------ */
/* 20rem als Mindestbreite ergibt auf 1200 px drei Spalten. Mit 16rem waren es
   vier, und bei fuenf Leistungen stand eine Karte allein in der zweiten Reihe,
   gesehen am 07.09.2026. */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--r3);
  margin: 0; padding: 0; list-style: none;
}
.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: var(--r3);
}
.karte h3 { margin-bottom: var(--r1); }
.karte p { margin: 0; color: var(--leise); }

.schritte { counter-reset: schritt; }
.schritte .karte::before {
  counter-increment: schritt;
  content: counter(schritt);
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-bottom: var(--r2);
  border-radius: 50%;
  background: var(--akzent); color: var(--akzent-text);
  font-weight: 700;
}

/* --- Häufige Fragen ------------------------------------------------------ */
details {
  border-bottom: 1px solid var(--rand);
  padding-block: var(--r2);
  max-width: var(--spalte);
}
summary {
  cursor: pointer;
  font-weight: 600;
  min-height: var(--tipp);
  display: flex; align-items: center;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details p { margin-top: var(--r1); color: var(--leise); }

/* --- Kontakt, Regel 4.11 ------------------------------------------------- */
.kontakt { background: var(--flaeche); border-top: 1px solid var(--rand); }
/* Verweise im Kontaktblock stehen meist allein auf einer Zeile und sind dann
   echte Ziele, keine Verweise im Fliesstext. Sie bekommen die Mindestkante. */
.kontakt p > a:not(.tat):not(.tat-leise):not(.telefon-gross) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tipp);
}
.telefon-gross {
  display: inline-flex;
  align-items: center;
  min-height: var(--tipp);
  font-size: var(--t-mittel);
  font-weight: 700;
  text-decoration: none;
  color: var(--akzent);
}

/* --- Fuss ---------------------------------------------------------------- */
/* 15 px statt 14, weil Regel 1.2 keine Ausnahme fuer den Fuss kennt. Am
   07.09.2026 ist genau die Adresszeile im Fuss durch die Pruefung gefallen. */
.fuss {
  border-top: 1px solid var(--rand);
  padding-block: var(--r4);
  font-size: 0.9375rem;
  color: var(--leise);
}
.fuss ul { display: flex; flex-wrap: wrap; gap: var(--r3); list-style: none; margin: 0; padding: 0; }
.fuss a { min-height: var(--tipp); display: inline-flex; align-items: center; }

/* --- Bewegung, Regel 7.3 und 7.4 ---------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .auftritt {
    animation: auftritt 300ms ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  @keyframes auftritt {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}
/* --- Bilder ---------------------------------------------------------------
   Gebaut nach der Messung der Vorbilder vom 08.09.2026,
   BEFUND-Bildeinsatz.md. Die vier Befunde, die hier Code werden:
   1. Das Bild oeffnet die Seite und fuellt den ersten Bildschirm fast ganz,
      86 bis 100 Prozent der Fensterhoehe bei beiden messbaren Vorbildern.
      Die Schrift liegt darueber, unten im Bild.
   2. Hochformat ist die Regel. susannekaufmann.com setzt 3:4 fuenfmal ein.
   3. Eckenradius null. Ueber 38 gemessene Bilder hinweg kein einziges
      abgerundetes.
   4. Bildanteil 28 bis 64 Prozent der Seitenflaeche, nicht 7.

   Was NICHT uebernommen wird: das Gewicht. Die Vorbilder brauchen zehn bis
   dreiundzwanzig Sekunden. AVIF traegt denselben Bildanteil bei einem Zehntel
   davon. */

.bild { display: block; width: 100%; height: auto; border-radius: 0; }

/* Der Heldenbereich mit Bild. svh statt vh, weil vh auf Mobilgeraeten die
   Adressleiste mitrechnet und der Bereich beim Scrollen sonst springt. */
.hero-bild {
  position: relative;
  isolation: isolate;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bild > picture,
.hero-bild > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ohne diese Angabe schneidet cover mittig. Bei einem hochformatigen
     Fenster, etwa 820 auf 1080, verschwand das Motiv am 08.09.2026 dadurch
     ganz aus dem Bild: das Bild ist 3:2, der Rahmen 0,86, und das Kupfer
     sitzt rechts oben. Der Ausschnitt haelt deshalb die obere rechte Ecke im
     Blick, wo das Motiv liegt und wo keine Schrift steht. */
  object-position: 72% 26%;
  z-index: -2;
}
/* Die Abdunklung ist kein Schmuck, sondern die Bedingung dafuer, dass Regel
   3.2 mit 4,5 zu 1 auf einem Foto ueberhaupt einzuhalten ist. Sie sitzt
   unten links, wo die Schrift steht, und laesst das Motiv oben rechts frei. */
.hero-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(105% 90% at 26% 76%,
      rgba(8,9,11,0.93) 0%, rgba(8,9,11,0.84) 30%, rgba(8,9,11,0.50) 58%,
      rgba(8,9,11,0.14) 82%, rgba(8,9,11,0) 100%),
    linear-gradient(to top, rgba(8,9,11,0.42) 0%, rgba(8,9,11,0.18) 50%, rgba(8,9,11,0.06) 100%);
}
/* Bis 64rem gibt es kein Nebeneinander von Schrift und Motiv: der Text fuellt
   die Breite, der seitliche Verlauf greift ins Leere. Gemessen am 08.09.2026
   fiel das Label bei 375 px auf 1,68 und bei 800 px auf 2,79, waehrend
   dieselbe Seite bei 1180 px auf 6,55 kam. Die Grenze liegt bewusst auf
   denselben 64rem wie der Rasterumbruch: erst dort ist Platz fuer Schrift
   links und Motiv rechts. */
/* Die Abdunklung haengt am Textblock, nicht am Bild.
   Vorher lag sie als Verlauf ueber dem ganzen Heldenbereich und musste raten,
   wo das Bild hell ist. Am 08.09.2026 gemessen: dasselbe Bild hat ueber seine
   Breite die Helligkeiten 0,17 / 0,30 / 0,02 / 0,34 / 0,01, und die Schrift
   fiel genau in einen hellen Streifen, 4,41 statt 4,5. Jeder neue Prompt
   verschiebt diese Streifen wieder. Eine Abdunklung, die dem Text folgt,
   ueberlebt den Bildwechsel; eine, die dem Bild folgt, nicht. */
.hero-bild .bahn-innen > div { position: relative; }
/* Der Verlauf liegt ueber dem ganzen Heldenbereich, sein Mittelpunkt aber dort,
   wo die Schrift steht: links unten. Auf den Textblock selbst gelegt hinterlaesst
   er eine sichtbare rechteckige Kante, weil ein runder Verlauf die Ecken eines
   Rechtecks nicht erreicht. Ueber die volle Flaeche gelegt gibt es keine Kante,
   und er folgt trotzdem dem Text statt dem Bild. */

/* Auf schmalen Schirmen fuellt der Text die Breite, es gibt kein Links und
   Rechts. Der Mittelpunkt rueckt deshalb in die Mitte und der Verlauf wird
   flacher, also grossflaechiger. Ohne das lag der Wert am 08.09.2026 bei
   3,64 statt 4,5, waehrend dieselbe Seite bei 820 px auf 7,09 kam. */
@media (max-width: 47.99rem) {
  .hero-bild::after {
    background:
      radial-gradient(150% 78% at 50% 78%,
        rgba(8,9,11,0.92) 0%, rgba(8,9,11,0.86) 34%, rgba(8,9,11,0.62) 62%,
        rgba(8,9,11,0.30) 84%, rgba(8,9,11,0.14) 100%),
      linear-gradient(to top, rgba(8,9,11,0.50) 0%, rgba(8,9,11,0.24) 55%, rgba(8,9,11,0.10) 100%);
  }
}

/* Die Schrift bleibt in der dunklen Haelfte. Ohne diese Grenze lief die
   Ueberschrift am 08.09.2026 ueber 94 Prozent der Fensterbreite bis ins helle
   Kupfer, gemessen 2,34 zu 1 statt der verlangten 4,5. Nebenbei haelt sie
   Regel 1.4 mit 45 bis 60 Zeichen je Zeile ein, die eine ueber die ganze
   Breite laufende Ueberschrift ohnehin reisst. */
.hero-bild .bahn-innen > div { max-width: 30rem; }
/* Auf dem Bild gilt immer die dunkle Lesart, unabhaengig davon, ob der
   Besucher hell oder dunkel eingestellt hat. Sonst waere der Kontrast in
   einer der beiden Fassungen nicht zu halten. */
.hero-bild .bahn-innen { position: relative; }
/* Genau EIN neuer Farbwert fuer alles auf dem Bild. Die Abstufung des Labels
   laeuft ueber die Deckkraft, nicht ueber einen zweiten Wert: Regel 3.1
   erlaubt acht gerenderte Farben, und am 08.09.2026 hat eine zweite Marke
   hier die Abnahme gerissen. */
.hero-bild, .hero-bild .label, .hero-bild h1, .hero-bild p { color: #F4F2EF; }
.hero-bild .label { opacity: 0.82; }

/* Ein Bild im Textfluss, vollbreit und ohne Rundung, Befund 3. */
.bildband { position: relative; overflow: hidden; margin: 0; }

/* Text und Hochformat nebeneinander. Das Bild traegt die Spalte, die bei den
   Vorbildern durchweg schmal und hoch ist, 23 bis 31 Prozent der Breite. */
.bild-neben { display: grid; gap: var(--r3); align-items: center; }
/* Untereinander bleibt das Hochformat ein Hochformat, wuerde ueber die ganze
   Bahnbreite aber zwei Bildschirme hoch. Deshalb zeigt es hier nur einen
   breiten Ausschnitt seiner selbst. */
.bild-neben .bild-spalte img { aspect-ratio: 3 / 2; object-fit: cover; }
/* Erst ab 64rem nebeneinander. Bei 48rem waren beide Spalten zu schmal,
   gemessen am 08.09.2026 bei 800 px Fenster: 377 px Text neben 352 px Bild,
   waehrend die Karten einspaltig untereinander liefen. */
@media (min-width: 64rem) {
  /* Zwei gleiche Spalten, nicht 1fr neben einer festen Breite. Am 08.09.2026
     gemessen: mit minmax begann das Bild bei 601, waehrend die Kartenspalte
     daneben bei 595 begann. Sechs Pixel daneben ist genau das, was als
     "nicht buendig" auffaellt. Gleiche Spalten koennen nicht auseinander
     laufen. */
  .bild-neben { grid-template-columns: 1fr 1fr; }
  .bild-neben.links > .bild-spalte { order: -1; }
  .bild-neben .bild-spalte img { aspect-ratio: 3 / 4; }
  /* Die Karten in der Textspalte laufen dort untereinander, sonst waeren es
     vier Spalten auf einer Seite, die nur zwei kennt. */
  .bild-neben .raster { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Bewegung nur bei Bildern im Fluss, nie im Heldenbereich: dort steht die
       Schrift darauf, und ein wanderndes Bild unter feststehender Schrift
       liest sich als Fehler. */
    .bildband .bild {
      animation: bildzug linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    /* 4 Prozent Wanderung je Richtung, der Ueberzug von 1,12 gibt 6 Prozent
       Reserve je Seite frei. Bei 2,6 Prozent waren es gemessen nur 35 Pixel
       ueber den ganzen Scrollweg, das sieht niemand. */
    @keyframes bildzug {
      from { transform: scale(1.12) translateY(-4%); }
      to   { transform: scale(1.12) translateY(4%); }
    }
  }
}

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

/* --- Dunkelfassung: nur Marken tauschen, nie Regeln ---------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:   #16181A;
    --flaeche: #1E2124;
    --text:    #ECEAE6;
    --leise:   #A7ADB5;
    --akzent:  #E08A5F;
    --akzent-text: #1A1208;
    --rand:    #33383D;
  }
}