/* ============================================================
   Britta Karres — Bausteine
   Abgeleitet aus Andreas Canva-Vorlage. Die Vorlage ist ein
   starrer Entwurf bei 1024 Einheiten Breite; hier wird daraus
   ein Aufbau, der von 320 px bis ueber 1400 px traegt.
   ============================================================ */

/* ---- Inhaltsbreite -------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ---- Abschnitt ------------------------------------------ */

.abschnitt { padding-block: var(--abstand-5); }
.abschnitt--creme { background: var(--creme); }
.abschnitt--sand  { background: var(--sand); }
.abschnitt--eng   { padding-block: var(--abstand-4); }

/* Zwei gleichfarbige Abschnitte hintereinander sehen aus wie EINE Flaeche -
   die Naht ist unsichtbar. Ihre Innenabstaende addieren sich dann aber zu
   einer doppelt so grossen Luecke wie ueberall sonst (64 + 64 = 128 px), und
   mitten im Block klafft ein Loch.

   Betrifft auf der Beratungsseite "Wobei ich Euch unterstuetzen kann" und
   "Hochbegabung & Hochsensibilitaet", seit Andrea den zweiten am 31.08. auf
   Creme gestellt hat. Der obere Abstand entfaellt deshalb; der untere des
   Abschnitts davor traegt den Zwischenraum allein. */
.abschnitt--creme + .abschnitt--creme,
.abschnitt--sand  + .abschnitt--sand { padding-top: 0; }

/* Auf Sand gilt: Fliesstext in Schwarz. Das kam vom alten Goldbeige,
   auf dem Rot nur 3,80:1 erreichte und durch WCAG AA fiel. Auf dem neuen
   helleren Sand (#f4e9c8) waeren es 4,86:1 - Rot bestuende die Pruefung.
   Schwarz bleibt trotzdem: 14,37:1, und die Entscheidung liegt bei Tim. */
.abschnitt--sand h1,
.abschnitt--sand h3,
.abschnitt--sand a { color: var(--text); }
.abschnitt--sand h2 { color: var(--gruen); }

/* ---- Spalten -------------------------------------------- */

.spalten {
  display: grid;
  gap: var(--spalte-luft);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .spalten--2 { grid-template-columns: 1fr 1fr; }
  .spalten--text-bild { grid-template-columns: 1.35fr 1fr; }
  .spalten--bild-text { grid-template-columns: 1fr 1.35fr; }
}
@media (min-width: 900px) {
  .spalten--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Kopfzeile ------------------------------------------ */

.kopfzeile { background: var(--papier); }

.kopfzeile__marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-1);
  padding-block: var(--abstand-3) var(--abstand-2);
  text-align: center;
  text-decoration: none;
  color: var(--text);
}
.kopfzeile__logo { width: clamp(72px, 8vw, 104px); }
/* Andrea wollte den Claim kraeftiger. Lato kennt zwischen 400 und 700
   NICHTS - kein 500, kein 600 (siehe Gestaltungsregeln Abschnitt 5). Der
   naechste verfuegbare Schritt ist deshalb 700. Waere das zu viel, ginge
   nur noch 300/400 zurueck oder 900 nachladen. */
.kopfzeile__claim {
  font-size: var(--grad-claim);
  font-weight: var(--fett);
  line-height: 1.3;
}

.kopfzeile__navigation { background: var(--sand); }

/* Unter 560 px ein sauberes 2x2-Raster statt umbrechender Zeilen.
   Vorher hing "Mein Fachbuch" allein in der zweiten Zeile - das sah
   nach Versehen aus.

   Bewusst KEIN Burger-Menue: Bei vier Punkten kostet es einen Tipp mehr,
   versteckt die Navigation und braucht JavaScript samt Fokusfuehrung und
   Escape-Behandlung. Vier sichtbare Punkte sind hier die bessere Loesung. */
.kopfzeile__liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kopfzeile__liste li { margin: 0; }

/* Trennlinien im Raster, damit es als Menue lesbar bleibt */
@media (max-width: 559px) {
  .kopfzeile__liste li:nth-child(odd)  .kopfzeile__link { border-right: 1px solid rgba(59, 67, 30, 0.18); }
  .kopfzeile__liste li:nth-child(n+3)  .kopfzeile__link { border-top:   1px solid rgba(59, 67, 30, 0.18); }
}

@media (min-width: 560px) {
  .kopfzeile__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.75rem, 3vw, 2.75rem);
  }
}

.kopfzeile__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;            /* ueber den geforderten 44 px */
  padding: 0.6rem 0.75rem;
  font-size: var(--grad-nav);
  color: var(--text);
  /* Der Unterstrich kam aus dem Canva-Export, nicht aus der Gestaltung.
     Navigationspunkte sind durch ihre Lage in der Sandleiste als Menue
     erkennbar; beim Ueberfahren und im Tastaturfokus kommt er zurueck. */
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.kopfzeile__link:hover,
.kopfzeile__link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* Aktuelle Seite: fett UND Balken - nicht allein ueber Farbe, die waere
   fuer Farbfehlsichtige kein Unterschied. Zusaetzlich traegt der Punkt
   aria-current="page" im HTML. */
.kopfzeile__link[aria-current="page"] {
  font-weight: var(--fett);
  border-bottom-color: var(--gruen);
}

/* ---- Hero ----------------------------------------------- */

.hero { position: relative; }

.hero__bild {
  width: 100%;
  height: clamp(240px, 34vw, 420px);
  object-fit: cover;
}

/* Unter 800 px steht die Tafel UNTER dem Bild: Text auf einem unruhigen
   Foto ist auf kleinen Geraeten nicht sicher lesbar. Erst ab 800 px wird
   .hero__lage ueber das Bild gelegt. */
.hero__tafel {
  background: var(--creme);
  padding: var(--abstand-3) var(--abstand-4);
  border-radius: var(--radius);
}

@media (min-width: 800px) {
  .hero__lage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
  }
  .hero__lage > .huelle { width: 100%; }
  .hero__tafel {
    max-width: 34rem;
    margin-left: auto;                 /* Vorlage: Tafel rechts */
    background: rgba(255, 255, 255, 0.86);
  }
  .hero--tafel-links .hero__tafel { margin-left: 0; margin-right: auto; }
}

/* Variante der Beratungsseite: heller Text direkt auf dem Foto.
   Ohne Abdunklung ist der Kontrast dort bildabhaengig und nicht gesichert. */
.hero--auf-foto .hero__bild { filter: brightness(0.62); }
.hero--auf-foto .hero__tafel { background: none; padding-inline: 0; }
.hero--auf-foto .hero__titel,
.hero--auf-foto .hero__unterzeile { color: var(--papier); }
@media (max-width: 799px) {
  .hero--auf-foto .hero__bild { filter: none; }
  .hero--auf-foto .hero__tafel { background: var(--creme); padding-inline: var(--abstand-4); }
  .hero--auf-foto .hero__titel { color: var(--gruen); }
  .hero--auf-foto .hero__unterzeile { color: var(--text); }
}

/* Über mich: Tafel links, Portraet rechts - wie in der Vorlage.
   Unter 800 px stehen beide untereinander unter dem Bild. */
.hero__inhalt { display: flex; flex-direction: column; gap: var(--abstand-3); }
.hero__portraet { border-radius: var(--radius); max-width: 220px; }
@media (min-width: 800px) {
  .hero__inhalt {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spalte-luft);
  }
  .hero__inhalt .hero__tafel { margin-left: 0; flex: 1 1 24rem; }
  .hero__portraet { flex: 0 0 auto; max-width: min(240px, 22vw); }
}

.hero__titel { color: var(--gruen); margin-bottom: var(--abstand-2); }
.hero__unterzeile {
  font-size: var(--grad-lead);
  line-height: 1.35;
  margin: 0;
}

/* ---- Karte ---------------------------------------------- */

.karte h4 { color: var(--rot); font-size: var(--grad-h3); font-weight: var(--normal); }
.karte ul { margin-top: var(--abstand-2); }

/* ---- Schaltflaeche -------------------------------------- */

.schaltflaeche {
  display: inline-block;
  min-height: 44px;
  padding: 0.7rem 1.6rem;
  background: var(--rot);       /* Weiss auf Rot = 5,89:1, besteht AA */
  color: var(--papier);
  font-weight: var(--fett);
  text-align: center;
  text-decoration: none;
  border: 2px solid var(--rot);
  border-radius: var(--radius);
}
.schaltflaeche:hover {
  background: var(--papier);
  color: var(--rot);
}

/* ---- Zitat ---------------------------------------------- */

.zitat {
  margin: 0;
  padding-left: var(--abstand-3);
  border-left: 4px solid var(--gruen);   /* war --sand; auf dem neuen
       helleren Sand haette der Balken nur 1,21:1 gegen Weiss - unsichtbar.
       Gruen nimmt die Farbe auf, die der Zitattext ohnehin traegt. */
  font-style: italic;           /* echter Lato-Kursivschnitt */
  font-size: var(--grad-lead);
  line-height: 1.4;
  color: var(--gruen);
}
.zitat cite { display: block; margin-top: var(--abstand-2); font-size: var(--grad-klein); font-style: normal; }

/* ---- Bild mit Unterschrift ------------------------------ */

.bildblock img { border-radius: var(--radius); }
.bildblock figcaption {
  margin-top: var(--abstand-2);
  font-size: var(--grad-klein);
  line-height: 1.45;
}
.bildblock figcaption strong { display: block; }

/* ---- Empfehlungsliste ----------------------------------- */

.empfehlungen h4 { margin-bottom: var(--abstand-1); }
.empfehlungen__eintrag { margin-bottom: var(--abstand-3); }
.empfehlungen__eintrag p { margin-bottom: var(--abstand-1); }
.empfehlungen a { word-break: break-word; }

/* ---- Fusszeile ------------------------------------------ */

/* Die Fusszeile traegt seit 31.08. Gruen (#bbd455) statt Sand. Damit
   entfaellt die 2-px-Trennlinie: Sie war noetig, solange Fusszeile und der
   Sandblock darueber (Start, Ueber mich, Fachbuch) dieselbe Farbe hatten und
   ohne Kante zu einer Flaeche verschmolzen. Der Farbwechsel leistet das jetzt.

   Schrift hier IMMER dunkel: Text auf #bbd455 traegt mit 10,49:1, Weiss
   dagegen nur mit 1,66:1 und Rot mit 3,55:1 (Fliesstext faellt durch). */
.fusszeile {
  background: var(--gruen-hell);
  padding-block: var(--abstand-4);
  font-size: var(--grad-klein);
}
.fusszeile a { color: var(--text); }

.fusszeile__liste { margin: 0; padding: 0; list-style: none; }
.fusszeile__liste li { margin-bottom: var(--abstand-1); }

/* Icons: reines Beiwerk. Nummer und Adresse stehen als Text
   daneben, damit ein Screenreader sie vorliest. */
.fusszeile__zeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.fusszeile__icon {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fusszeile__rechtliches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  margin-top: var(--abstand-3);
}
.fusszeile__rechtliches a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---- Kontaktdialog --------------------------------------- */

/* <dialog> bringt Fokusfalle, ESC und Hintergrundsperre selbst mit.
   Hier wird nur noch Aussehen gesetzt. */
.kontaktdialog {
  width: min(34rem, calc(100vw - 2 * var(--rand)));
  max-height: calc(100dvh - 2rem);   /* sonst laeuft das Formular auf
       kleinen Schirmen unten aus dem Bild und ist nicht erreichbar */
  overflow-y: auto;
  padding: var(--abstand-4);
  border: none;
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--text);
}
.kontaktdialog::backdrop { background: rgba(26, 26, 26, 0.55); }

.kontaktdialog h2 { color: var(--gruen); }

.kontaktdialog__schliessen { display: flex; justify-content: flex-end; }
.kontaktdialog__schliessen button {
  min-width: 44px;              /* Trefferflaeche wie in der Navigation */
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.kontaktdialog__schliessen button:hover { color: var(--rot); }

.feld { display: block; margin-bottom: var(--abstand-3); }
.feld label { display: block; font-weight: var(--fett); margin-bottom: var(--abstand-1); }
.feld input,
.feld textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border: 2px solid var(--gruen);
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--text);
  font: inherit;                /* sonst erbt das Feld die Browserschrift */
}
.feld textarea { min-height: 7rem; resize: vertical; }
/* :user-invalid statt :invalid - sonst stehen alle Pflichtfelder schon
   beim Oeffnen rot da, bevor jemand etwas eingegeben hat. :user-invalid
   greift erst, wenn tatsaechlich etwas eingetippt oder abgeschickt wurde. */
.feld input:user-invalid,
.feld textarea:user-invalid { border-color: var(--rot); }

.feld__zusatz  { font-weight: var(--normal); }
.feld__hinweis {
  display: block;
  margin-top: var(--abstand-1);
  font-size: var(--grad-klein);
  line-height: 1.45;
}

/* Einwilligung: Kaestchen und Text nebeneinander, Text nicht fett -
   er ist Fliesstext, keine Beschriftung. */
.feld--einwilligung label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: var(--normal);
  font-size: var(--grad-klein);
  line-height: 1.45;
}
.feld--einwilligung input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin-top: 0.15rem;
  accent-color: var(--gruen);
}

/* Botfalle. Nicht display:none - manche Bots ueberspringen genau das.
   Aus dem Blickfeld geschoben und aus der Tabreihenfolge genommen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__meldung { margin-top: var(--abstand-2); font-weight: var(--fett); }
.formular__meldung--gut    { color: var(--gruen); }   /* 10,46:1 auf Weiss */
.formular__meldung--fehler { color: var(--rot); }     /*  5,89:1 auf Weiss */

/* ---- Agenturnennung im Impressum ------------------------- */

/* Logo und Adresse sitzen in EINEM Verweis, untereinander. Der Block
   ist bewusst zurueckhaltend: Es ist Brittas Impressum, nicht unsere
   Visitenkarte. Deshalb auch keine Agenturfarben, sondern die
   Schriftfarbe dieser Seite. */
.agenturnennung a {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-2);
  color: var(--text);
  text-decoration: none;
}
.agenturnennung img {
  width: 140px;                 /* Datei ist 200 px breit - reicht fuer
                                   feine Schirme */
  height: auto;
}
/* Unterstrich nur unter der Adresse, nicht unter dem Logo. */
.agenturnennung span { text-decoration: underline; }
.agenturnennung a:hover span { color: var(--rot); }