/* Naturheilpraxis Mechthild Breitung · Faszien-Webseite
   Layout nach „Mehr Leben mit Migräne“, Farben aus dem Praxislogo */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("schriften/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
:root {
  --blau: #2F5597;            /* Figur im Logo */
  --blau-tief: #1C3463;       /* Überschriften */
  --blau-container: #E3ECF8;  /* helle Flächen */
  --himmel: #F4F8FD;          /* Seitenhintergrund */
  --gelb: #E5C15C;            /* Akzent: Punkte, Markierungen */
  --gelb-hell: #FBF5DF;       /* helle gelbe Flächen */
  --tuerkis: #2B8A96;         /* Logo-Ring, sparsam */
  --text: #1F2633;
  --linie: #E6EBF2;
  --grau: #76829A;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--himmel);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blau); }
img { max-width: 100%; }

/* ---------- Kopfleiste ---------- */
.kopfleiste { background: #fff; border-bottom: 1px solid var(--linie); position: relative; z-index: 3; }
.kopfleiste-innen { max-width: 1160px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kopfleiste img { height: 112px; width: auto; display: block; }
.logo-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; padding: 2px 0; }
.praxisname {
  margin-top: 4px; text-align: center;
  font-size: .82rem; font-weight: 600; line-height: 1.25; letter-spacing: .02em; color: var(--blau-tief);
}
.kopfleiste ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; margin: 0; padding: 0; }
.kopfleiste nav a { color: var(--blau-tief); text-decoration: none; text-transform: uppercase; letter-spacing: .03em; font-size: .8rem; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; }
.kopfleiste nav a:hover { color: var(--blau); }
.kopfleiste nav a[aria-current="page"] { border-bottom-color: var(--gelb); }

/* Freigestelltes Foto auf weißem Grund: Weiß verschmilzt mit dem hellblauen Header */
header.hell .kopf-bild img.freigestellt { mix-blend-mode: multiply; }
/* Foto mit Personen am linken Bildrand (Netzwerk): nur schmaler Auslauf links */
@media (min-width: 821px) {
  header.hell.randlos .kopf-bild.wenig-auslauf img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%); }
}
/* Bild mit Schrift (Challenge): immer vollständig zeigen, nichts abschneiden */
header.hell.randlos .kopf-bild.ganz img { object-fit: contain; }
@media (max-width: 820px) { header.hell.randlos .kopf-bild.ganz img { height: auto; aspect-ratio: 3 / 2; } }
/* Etwas kleineres Foto (Über mich): ganzes Bild sichtbar, mit Abstand nach oben */
@media (min-width: 821px) {
  header.hell.randlos .kopf-bild.kleiner img { object-fit: contain; object-position: 50% 100% !important; top: 40px; height: calc(100% - 40px); }
}
@media (max-width: 820px) {
  header.hell.randlos .kopf-bild.kleiner img { height: 260px; object-fit: contain; object-position: 50% 100% !important; }
}

/* Über-mich-Kasten auf der Startseite: Überschrift und Foto führen zur Über-mich-Seite */
#ueber-mich .abschnitt-marke a, #ueber-mich h2 a { color: inherit; text-decoration: none; }
#ueber-mich h2 a:hover, #ueber-mich .abschnitt-marke a:hover { text-decoration: underline; }

/* Kundenstimmen in kleinen Kästchen */
.stimmen { text-align: center; margin: 8px auto 26px; }
.stimmen h2 { margin: 0 0 18px; }
.stimmen-raster { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; text-align: left; }
.stimmen-raster .stimme { flex: 1 1 0; min-width: 0; box-sizing: border-box; }
.spalte-breit.stimmen { max-width: 1280px; }
@media (max-width: 1100px) { .stimmen-raster .stimme { flex: 0 1 calc((100% - 32px) / 3); } }
.stimme { margin: 0; background: #fff; border-radius: 16px; padding: 18px 20px 16px; box-shadow: 0 2px 10px rgba(28, 52, 99, .07);
  border-top: 3px solid var(--gelb); display: flex; flex-direction: column; }
.stimme blockquote { margin: 0 0 12px; font-size: .98rem; line-height: 1.6; color: var(--text, #1F2633); flex: 1; }
.stimme figcaption { font-size: .82rem; color: var(--blau-tief); opacity: .75; }
.stimmen-link { margin: 16px 0 0; font-size: .95rem; }
.stimmen-link a { color: var(--blau); font-weight: 600; }
@media (max-width: 900px) { .stimmen-raster .stimme { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 600px) { .stimmen-raster .stimme { flex-basis: 100%; } }

/* Goldene Termin-Leiste unter dem Menü (wie auf mehr-leben-mit-migraene.de) */
.termin-leiste { display: block; text-align: center; text-decoration: none; color: var(--blau-tief); font-size: .95rem; padding: 9px 16px;
  background: linear-gradient(100deg, #C9A23E 0%, #E6C660 30%, #F6E3A0 48%, #E9CB68 62%, #C99F3A 100%); }
.termin-leiste span { text-decoration: underline; white-space: nowrap; }
.termin-leiste a { color: var(--blau-tief); text-decoration: underline; text-underline-offset: 3px; }
.termin-leiste a:hover { text-decoration-thickness: 2px; }
.termin-leiste .trenner { text-decoration: none; margin: 0 8px; }
@media (max-width: 600px) { .termin-leiste .trenner { display: none; } .termin-leiste a { display: block; padding: 2px 0; } }
.termin-leiste:hover { background: linear-gradient(100deg, #BD9534 0%, #DDBB52 30%, #F0D98C 48%, #DFC05A 62%, #BD9330 100%); }

/* ---------- Kopf ---------- */
header.hell { background: var(--blau-container); overflow: hidden; }
.banner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: flex; gap: 48px; align-items: stretch; justify-content: center; }
.banner-text { flex: 0 1 760px; padding: 64px 0 56px; align-self: center; }
.hell h1 {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; color: var(--blau-tief);
  font-size: clamp(2.2rem, 3.9vw, 3.15rem); line-height: 1.12; margin: 0 0 22px; max-width: 28ch;
}
.eyebrow { margin: 0 0 10px; font-size: .85rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blau); }
.kopf-lage { font-size: 1.13rem; line-height: 1.65; max-width: 68ch; margin: 0 0 20px; }
.herkunft { margin: 0; font-size: .92rem; color: var(--blau-tief); opacity: .8; letter-spacing: .02em; }
.foto-platz { flex: 0 0 auto; display: flex; align-items: flex-end; }
.banner-foto { display: block; height: clamp(380px, 40vw, 540px); width: auto; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-block; font-size: 1.02rem; font-weight: 600; text-decoration: none;
  border-radius: 999px; padding: 13px 24px; margin: 5px; transition: background .15s ease;
}
.knopf-haupt { background: var(--blau); color: #fff; }
.knopf-haupt:hover { background: var(--blau-tief); }
.knopf-neben { background: #fff; color: var(--blau-tief); box-shadow: inset 0 0 0 1.5px var(--blau); }
.knopf-neben:hover { background: var(--blau-container); }
.knopf-zusatz { display: block; font-size: .8em; font-weight: 500; opacity: .9; margin-top: 3px; }
.knopf:has(.knopf-zusatz) { text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }
/* Knöpfe im Abschluss-Kasten gleich groß (z. B. „Persönliches Gespräch buchen“ und „Anrufen“) */
.abschluss .knopf { display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 290px; min-height: 62px; box-sizing: border-box; vertical-align: middle; text-align: center; line-height: 1.25; }
@media (max-width: 400px) { .abschluss .knopf { min-width: 0; width: 100%; } }
.knopf-hinweis { display: block; margin-top: 8px; font-size: .85rem; color: var(--blau-tief); opacity: .8; }

/* ---------- Inhalt ---------- */
main { padding: 22px 0 40px; }
.spalte { max-width: 800px; margin: 0 auto; padding: 0 16px; }
.spalte-breit { max-width: 1000px; margin: 0 auto 18px; padding: 0 16px; }
section { margin-bottom: 18px; }
.card {
  background: #fff; border-radius: 18px; padding: 24px 22px;
  box-shadow: 0 2px 10px rgba(28, 52, 99, .07);
}
h2 { color: var(--blau-tief); font-size: 1.35rem; line-height: 1.3; margin: 0 0 12px; }
h3 { color: var(--blau-tief); font-size: 1.08rem; margin: 0 0 6px; }
p { margin: 0 0 12px; }
ul.punkte { margin: 0 0 12px; padding-left: 0; list-style: none; }
ul.punkte li { position: relative; padding-left: 26px; margin-bottom: 8px; }
ul.punkte li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gelb);
}
.abschnitt-marke {
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blau); margin: 0 0 6px;
}

/* Leitfrage und Einleitung unter dem Kopf */
.leitfrage {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; color: var(--blau-tief);
  font-size: clamp(1.8rem, 3.1vw, 2.45rem); line-height: 1.2; text-align: center;
  max-width: 18em; margin: 34px auto 18px;
}
.einleitung { text-align: center; padding: 10px 6px 8px; margin-bottom: 10px; }
.einleitung p { font-size: 1.2rem; line-height: 1.6; }
.spalte > .einleitung { margin-left: calc((100% - min(900px, 100vw - 32px)) / 2); margin-right: calc((100% - min(900px, 100vw - 32px)) / 2); }
.leitfrage-knoepfe { text-align: center; margin: 0 0 30px; }

/* Vier Kacheln „Zusammenspiel“ */
.zusammenspiel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.zusammenspiel div { background: var(--himmel); border-radius: 12px; padding: 12px 14px; font-size: .95rem; }
.zusammenspiel strong { display: block; color: var(--blau-tief); }

/* Hinweis-Kasten in einer Karte */
.passt-nicht { background: var(--gelb-hell); border-radius: 12px; padding: 14px 16px 4px; }
.passt-nicht ul.punkte li::before { background: var(--grau); }
/* Praxisfoto auf „Über mich“: etwas höher, damit Gesichter und Schilder ganz zu sehen sind */
.karten-foto.praxis-foto { aspect-ratio: 4 / 3; object-position: 50% 30%; max-width: none; }
/* Einzelner Knopf mittig im Kasten */
.knopf-mitte { text-align: center; margin: 10px 0 0; }
/* Unterpunkte innerhalb eines Ablauf-Schritts */
ul.punkte.ablauf-details { margin: 8px 0 8px; }
ul.punkte.ablauf-details li { margin-bottom: 4px; }
/* Arzt-Warnzeichen auf der Akut-Seite */
.warnzeichen h3 { font-size: 1rem; margin: 18px 0 6px; color: var(--blau-tief); }
.warnzeichen p.notfall { background: #FBE9E7; border-left: 4px solid #B3412E; border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; color: #5A1E14; }
.warnzeichen p.notfall strong { color: #8E2A1A; }

/* ---------- Angebotskarten ---------- */
.karten-kopf { text-align: center; margin-bottom: 18px; }
.karten-lead { max-width: 52ch; margin: 0 auto; color: var(--blau-tief); }
.karten-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.karte {
  background: #fff; border-radius: 16px; padding: 20px 18px;
  box-shadow: 0 2px 10px rgba(28, 52, 99, .07);
  display: flex; flex-direction: column;
}
.karte.akzent-gelb   { border-top: 5px solid var(--gelb); }
.karte.akzent-blau   { border-top: 5px solid var(--blau); }
.karte.akzent-tuerkis { border-top: 5px solid var(--tuerkis); }
.karte.akzent-tief { border-top: 5px solid var(--blau-tief); }
.karten-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.karten-4:has(details[open]) { align-items: start; }
.karte details.mehr { border: none; padding: 0 0 10px; font-size: .93rem; }
.karte details.mehr summary { font-size: .93rem; color: var(--blau); }
.karte details.mehr p, .karte details.mehr ul { margin-top: 10px; }
.termine { list-style: none; padding: 0; margin: 12px 0; }
.termine li { display: flex; gap: 12px; align-items: baseline; background: var(--himmel); border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; }
.termine .datum { font-weight: 700; color: var(--blau-tief); min-width: 7.5em; }
.passt-zeile { font-weight: 700; color: var(--blau-tief); }
.nutzen { background: var(--himmel); border-radius: 12px; padding: 12px 14px 4px; margin: 0 0 12px; font-size: .93rem; }
.nutzen p { margin: 0 0 6px; color: var(--blau-tief); }
.nutzen ul.punkte li { margin-bottom: 5px; }
.karte .preis { font-size: 1.3rem; font-weight: 700; color: var(--blau-tief); margin: auto 0 10px; padding-top: 8px; }
.karte .preis small { display: block; font-size: .85rem; font-weight: 600; color: var(--tuerkis); }
.karte .knopf { margin: 0; text-align: center; }

.unsicher {
  max-width: 680px; margin: 18px auto 0; text-align: center;
  background: var(--blau-container); border-radius: 16px; padding: 18px 20px;
}
.unsicher p { color: var(--blau-tief); }
.unsicher .knopf { margin: 0; }
.faustregel { list-style: none; margin: 0 auto 16px; padding: 0; max-width: 560px; text-align: left; display: grid; gap: 8px; }
.faustregel li { background: #fff; border-radius: 12px; padding: 10px 14px; color: var(--blau-tief); font-size: .97rem; }

/* ---------- Über mich ---------- */
.ueber-mich { display: flex; gap: 18px; align-items: flex-start; }
.portrait {
  flex: 0 0 130px; width: 130px; height: 130px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 0 4px var(--gelb-hell);
}
/* Foto als Link (Startseite): Link behält die feste Größe, damit das runde Foto nicht verzerrt */
.ueber-mich > a { flex: 0 0 130px; display: block; width: 130px; height: 130px; line-height: 0; }
.ueber-mich > a .portrait { display: block; width: 130px; height: 130px; max-width: none; }

/* ---------- Fragen ---------- */
details { border-bottom: 1px solid var(--linie); padding: 12px 0; }
details:last-child { border-bottom: none; }
summary { cursor: pointer; font-weight: 600; color: var(--blau-tief); list-style: none; padding-right: 26px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 1.3rem; color: var(--blau); }
details[open] summary::after { content: "–"; }
details p { margin: 10px 0 0; }

/* ---------- Abschluss ---------- */
.abschluss { text-align: center; }
.foto-gespraech {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 14px; margin: 0 0 18px;
}
.hinweis-box {
  background: var(--gelb-hell); color: var(--blau-tief);
  border-radius: 14px; padding: 14px 16px; font-size: .93rem;
}

footer { text-align: center; font-size: .85rem; color: var(--grau); padding: 10px 20px 40px; }
footer a { color: var(--blau); margin: 0 6px; }

/* ---------- Platzhalter (nur solange Bilder fehlen) ---------- */
.platzhalter {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, #fff 0 10px, var(--blau-container) 10px 20px);
  color: var(--blau-tief); font-size: .85rem; border: 1.5px dashed var(--blau);
}
.banner-foto.platzhalter { width: clamp(260px, 26vw, 360px); border-radius: 18px 18px 0 0; border-bottom: none; }
.portrait.platzhalter { padding: 10px; }
.foto-gespraech.platzhalter { height: auto; }

/* ---------- Ergänzungen Faszien-Seite ---------- */
/* Kopf-Foto: Rechteck mit runden Ecken oben, sitzt unten auf */
.banner-foto.foto { height: clamp(380px, 38vw, 500px); aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 20%; border-radius: 22px 22px 0 0; }

/* Foto oben in einer Karte */
.karten-foto { display: block; max-width: none; width: calc(100% + 44px); margin: -24px -22px 18px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px 18px 0 0; }

/* Beschwerden als ruhige Schlagworte */
.schlagworte { list-style: none; padding: 0; margin: 4px 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.schlagworte li { background: var(--blau-container); color: var(--blau-tief); border-radius: 999px; padding: 6px 14px; font-size: .95rem; font-weight: 600; }

/* Hinweis auf das Migräne-Coaching */
.querverweis { background: var(--gelb-hell); border-left: 5px solid var(--gelb); border-radius: 12px; padding: 12px 16px; margin-top: 16px; }
.querverweis p { margin: 0 0 6px; }
.querverweis a { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--gelb); }
.querverweis a:hover { border-bottom-color: var(--blau); }

/* Sechs Kacheln (Alltag) – Faszien in der Mitte hervorgehoben */
.zusammenspiel.sechs { grid-template-columns: repeat(3, 1fr); }
.zusammenspiel .mitte { background: var(--gelb-hell); }

/* Konzept in vier Schritten mit Bildern */
.konzept { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: schritt; }
.konzept-schritt { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(28, 52, 99, .07); display: flex; flex-direction: column; }
.konzept-schritt img, .konzept-schritt .bild-ersatz { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bild-ersatz { display: grid; place-items: center; background: linear-gradient(140deg, var(--blau-container), var(--gelb-hell)); color: var(--blau); }
.bild-ersatz svg { width: 64px; height: 64px; }
.konzept-text { padding: 16px 16px 18px; position: relative; }
.konzept-text::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; top: -18px; left: 16px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--blau); color: #fff; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 4px #fff;
}
.konzept-text h3 { margin-top: 10px; }
.konzept-text p { font-size: .95rem; margin: 0; }
.konzept-schritt.ziel { border-top: 5px solid var(--gelb); }

/* Termine in Zahlen */
.eckdaten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; text-align: center; }
.eckdaten div { background: var(--himmel); border-radius: 12px; padding: 14px 10px; }
.eckdaten strong { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 2rem; line-height: 1.1; color: var(--blau-tief); }
.eckdaten span { font-size: .9rem; }

/* Bild neben Text in einer Karte */
.bild-text { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.bild-text img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.portrait.foto { object-position: 48% 25%; }

/* Kopf-Variante: blasses Hintergrundfoto (Foto 0180), links heller für den Text */
header.mit-foto {
  background:
    linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.88) 42%, rgba(227,236,248,.55) 70%, rgba(227,236,248,.35) 100%),
    url("bilder/kopf-bewegung.jpg") 60% 45% / cover no-repeat;
}
header.mit-foto .banner { justify-content: flex-start; max-width: 1160px; }
header.mit-foto .banner-text { padding: 80px 0 72px; flex-basis: 640px; }
@media (max-width: 820px) {
  header.mit-foto { background:
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)),
    url("bilder/kopf-bewegung.jpg") 70% 50% / cover no-repeat; }
  header.mit-foto .banner-text { padding: 36px 0 30px; }
}

/* Kopf-Foto hochkant (Foto 0370), rechts neben dem Text */
.kopf-bild { flex: 0 1 400px; align-self: center; padding: 40px 0; }
.kopf-bild img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 20%; border-radius: 18px; box-shadow: 0 8px 28px rgba(28, 52, 99, .14); }
@media (max-width: 820px) {
  .kopf-bild { flex-basis: auto; width: 100%; max-width: 420px; padding: 0 0 28px; }
  .kopf-bild img { aspect-ratio: 1; object-position: 60% 15%; }
}

/* ---------- Unterseiten ---------- */
.hell-unter .banner-text { padding: 46px 0 42px; }
.hell h1.klein { font-size: clamp(2.2rem, 3.9vw, 3.15rem); }
.unterzeile { margin: 0 0 18px; color: var(--blau-tief); }
.hell-unter .kopf-bild { flex-basis: 340px; padding: 28px 0; }
.einstieg {
  text-align: center; font-size: .95rem; color: var(--blau-tief);
  background: var(--blau-container); border-radius: 999px; padding: 8px 18px; margin: 0 auto 18px;
}
.einstieg a { font-weight: 600; }
.passt { background: var(--gelb-hell); border-radius: 12px; padding: 14px 16px 4px; margin-bottom: 12px; }
.preis-etikett { display: inline-block; background: var(--gelb); color: var(--blau-tief); font-weight: 700; font-size: .85rem; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.karte .mehr-link { display: block; text-align: center; margin-top: 10px; font-weight: 600; text-decoration: none; }
.karte .mehr-link:hover { text-decoration: underline; }
/* Zwei Wege: akut / länger bestehend */
.wege { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto; }
.weg {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text);
  background: #fff; border-radius: 16px; padding: 20px 20px 18px; border-top: 5px solid var(--blau);
  box-shadow: 0 2px 10px rgba(28, 52, 99, .07); transition: transform .15s ease, box-shadow .15s ease;
}
.weg.akut { border-top-color: var(--gelb); }
.weg:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(28, 52, 99, .12); }
.weg strong { font-size: 1.2rem; color: var(--blau-tief); }
.weg .abschnitt-marke { margin: 0; }
.weg-eckdaten { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--blau-tief); }
.wege + .wege-titel { margin-top: 26px; }
.wege-titel { max-width: 860px; margin: 0 auto 10px; font-weight: 700; color: var(--blau-tief); font-size: 1.05rem; }
.weg.klein { border-top-color: var(--tuerkis); }
.wege.einzeln { grid-template-columns: minmax(0, 422px); justify-content: start; }
.kopf-knopf { margin: 18px 0 0; }
@media (max-width: 820px) { .wege.einzeln { justify-content: center; } }
@media (max-width: 560px) { .wege { grid-template-columns: 1fr; } }

.schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 0; }
.schritte > li { position: relative; padding: 0 0 16px 46px; }
.schritte > li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blau); color: #fff; font-weight: 700; text-align: center; line-height: 30px;
}
.schritte > li:last-child { padding-bottom: 0; }
.schritte + p { margin-top: 20px; }
@media (max-width: 560px) { .einstieg { border-radius: 14px; } }

/* Über mich: Werdegang als Zeitleiste */
.werdegang { list-style: none; margin: 16px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--blau-container); }
.werdegang li { position: relative; margin: 0 0 18px; }
.werdegang li:last-child { margin-bottom: 0; }
.werdegang li::before {
  content: ""; position: absolute; left: -30px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blau);
}
.werdegang li:last-child::before { background: var(--gelb); border-color: var(--gelb); }
.werdegang strong { color: var(--blau-tief); font-size: 1.05rem; }
.werdegang p { margin: 4px 0 0; }

/* ---------- Netzwerk ---------- */
.partner-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.partner { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 2px 10px rgba(28, 52, 99, .07); display: flex; flex-direction: column; gap: 6px; border-top: 5px solid var(--blau-container); }
.partner h3 { margin: 0; }
.partner .fach { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blau); }
.partner p { margin: 0; font-size: .95rem; }
.partner a.partner-link { margin-top: auto; padding-top: 8px; font-weight: 600; text-decoration: none; }
.partner a.partner-link:hover { text-decoration: underline; }
@media (max-width: 820px) { .partner-liste { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* ---------- Blog ---------- */
.blog-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.blog-karte { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(28, 52, 99, .07); display: flex; flex-direction: column; text-decoration: none; color: var(--text); transition: transform .15s ease, box-shadow .15s ease; }
.blog-karte:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(28, 52, 99, .12); }
.blog-karte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.blog-karte .blog-text { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.blog-karte h3 { margin: 0; }
.blog-karte p { margin: 0; font-size: .95rem; }
.blog-datum { font-size: .82rem; color: var(--grau); }
.blog-weiter { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--blau); }
.artikel h2 { margin-top: 22px; }
.artikel-bild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; margin: 0 0 18px; }
@media (max-width: 820px) { .blog-liste { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* Terminliste (mehrere Termine einer Aktion) */
.terminliste { list-style: none; padding: 0; margin: 14px 0 16px; display: grid; gap: 8px; }
.terminliste li { display: grid; grid-template-columns: 9.5em 1fr auto; gap: 14px; align-items: center; background: var(--himmel); border-radius: 12px; padding: 10px 14px; }
.terminliste .wann { font-weight: 700; color: var(--blau-tief); }
.terminliste .wann small { display: block; font-weight: 400; color: var(--grau); }
.terminliste .knopf { margin: 0; padding: 8px 16px; font-size: .9rem; }
@media (max-width: 560px) { .terminliste li { grid-template-columns: 1fr; gap: 4px; } .terminliste .knopf { justify-self: start; margin-top: 6px; } }

/* Startseite: Kopf-Foto randlos mit weichem Übergang (nur Startseite, Unterseiten behalten ihr Foto im Rahmen) */
header.hell.randlos .banner { max-width: none; padding: 0 0 0 max(32px, calc((100vw - 1240px) / 2 + 32px)); gap: 0; justify-content: space-between; }
header.hell.randlos .banner-text { flex: 0 1 640px; padding-right: 32px; }
header.hell.randlos .kopf-bild { flex: 0 0 46%; align-self: stretch; padding: 0; position: relative; }
header.hell.randlos.hell-unter .banner { min-height: 340px; }
/* Foto liegt absolut im Feld, damit die Kopfhöhe vom Text bestimmt wird und nicht vom Hochformat-Foto */
header.hell.randlos .kopf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; object-position: 60% 25%;
  /* weich nach links und leicht nach oben und unten auslaufen, damit kein Bildrand sichtbar ist */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect; }
/* Header am Computer: Text und Foto bilden zusammen eine Einheit in der Seitenmitte,
   links und rechts gleich viel Abstand; das Foto läuft zu beiden Seiten weich aus. */
@media (min-width: 821px) {
  header.hell.randlos .banner,
  header.hell.randlos.hell-unter .banner { max-width: 1680px; margin: 0 auto; padding: 0 clamp(24px, 3.5vw, 56px); gap: 0; justify-content: space-between; min-height: clamp(460px, 36vw, 600px); }
  header.hell.randlos .banner-text,
  header.hell.randlos.hell-unter .banner-text { flex: 0 0 50%; box-sizing: border-box; padding: 56px 32px 56px 0; }
  header.hell.randlos .kopf-bild,
  header.hell.randlos.hell-unter .kopf-bild { flex: 0 0 50%; padding: 0; }
  header.hell.randlos h1, header.hell.randlos h1.klein { font-size: clamp(2.5rem, 4.3vw, 3.7rem); max-width: none; }
  header.hell.randlos .kopf-lage, header.hell.randlos .unterzeile { font-size: 1.22rem; max-width: none; }
  header.hell.randlos .eyebrow { font-size: .92rem; }
  header.hell.randlos .herkunft { font-size: 1rem; }
  header.hell.randlos .kopf-bild img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%); }
}@media (max-width: 820px) {
  header.hell.randlos h1.klein { font-size: clamp(2.2rem, 3.9vw, 3.15rem); }
  /* Handy: Foto randlos ganz oben, läuft nach unten in den Hintergrund aus */
  header.hell.randlos .banner { padding: 0 16px; }
  header.hell.randlos .kopf-bild { order: -1; flex-basis: auto; width: calc(100% + 32px); margin: 0 -16px; padding: 0; }
  header.hell.randlos.hell-unter .banner { min-height: 0; }
  header.hell.randlos .kopf-bild img { position: static; height: 300px; width: 100%; object-position: 60% 20%;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); }
  header.hell.randlos .banner-text { flex: none; padding: 0 0 26px; margin-top: -24px; position: relative; }
}

/* Aufklappbares Menü auf dem Handy (Knopf + menue.js) */
.menue-knopf { display: none; }
@media (max-width: 820px) {
  .kopfleiste .kopfleiste-innen { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 6px 16px; }
  .kopfleiste .kopfleiste-innen img { height: 76px; }
  .menue-knopf { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--blau-container); color: var(--blau-tief);
    border-radius: 999px; padding: 8px 14px; font: 600 .9rem/1 -apple-system, "Segoe UI", Arial, sans-serif; cursor: pointer; }
  .menue-knopf .striche { width: 18px; height: 2px; background: currentColor; position: relative; display: inline-block; transition: background .2s; }
  .menue-knopf .striche::before, .menue-knopf .striche::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .2s; }
  .menue-knopf .striche::before { top: -6px; }
  .menue-knopf .striche::after { top: 6px; }
  .kopfleiste.offen .menue-knopf .striche { background: transparent; }
  .kopfleiste.offen .menue-knopf .striche::before { transform: translateY(6px) rotate(45deg); }
  .kopfleiste.offen .menue-knopf .striche::after { transform: translateY(-6px) rotate(-45deg); }
  .kopfleiste nav { display: none; width: 100%; }
  .kopfleiste.offen nav { display: block; }
  .kopfleiste nav ul { flex-direction: column; gap: 0; padding: 8px 0 10px; }
  .kopfleiste nav li { border-top: 1px solid var(--linie); }
  .kopfleiste nav a { display: block; padding: 13px 4px; font-size: .95rem; border-bottom: none; }
  .kopfleiste nav a[aria-current="page"] { color: var(--blau); font-weight: 700; border-bottom: none; }
}

/* ProvenExpert-Siegel im Kopfbereich */
.siegel { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.siegel img { display: block; width: 130px; height: auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(28, 52, 99, .12); }
.siegel p { margin: 0; font-size: .92rem; font-weight: 600; color: var(--blau-tief); max-width: 12em; }
@media (max-width: 820px) { .siegel { justify-content: center; } }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 900px) {
  .konzept { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .kopfleiste-innen { flex-direction: column; padding: 8px 16px; gap: 4px; }
  .kopfleiste ul { justify-content: center; gap: 2px 16px; }
  .banner { flex-direction: column; padding: 0 16px; gap: 0; }
  .banner-text { flex: none; padding: 28px 0 10px; text-align: center; }
  .hell h1, .kopf-lage, .herkunft { margin-left: auto; margin-right: auto; }
  .foto-platz, .banner-foto { align-self: center; }
  .banner-foto { height: 230px; }
  .banner-foto.platzhalter { width: 200px; }
  .einleitung { text-align: left; }
  .karten-3, .karten-4 { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .termine li { flex-direction: column; gap: 0; }
}
@media (max-width: 820px) {
  .banner-foto.foto { height: 260px; }
}
@media (max-width: 560px) {
  .zusammenspiel, .zusammenspiel.sechs { grid-template-columns: 1fr 1fr; }
  .konzept { grid-template-columns: 1fr; }
  .eckdaten { grid-template-columns: 1fr; }
  .bild-text { grid-template-columns: 1fr; }
  .ueber-mich { flex-direction: column; align-items: center; }
  .knopf { display: block; margin: 8px 0; text-align: center; }
}

/* ============ Startseite: schmale Kennenlern-Leiste ============ */
.kennen-leiste { max-width: 860px; margin: 26px auto 0; background: #fff; border-radius: 16px; border-left: 5px solid var(--tuerkis);
  padding: 16px 20px; box-shadow: 0 2px 10px rgba(28,52,99,.07); }
.kennen-titel { margin: 0 0 12px; color: var(--text); }
.kennen-titel strong { color: var(--blau-tief); font-size: 1.1rem; margin-right: 6px; }
.kennen-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kennen-liste a { display: flex; flex-direction: column; gap: 2px; height: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  background: #F3F6FB; text-decoration: none; color: var(--blau-tief); transition: background .15s ease; }
.kennen-liste a:hover { background: #E6EDF7; }
.kennen-art { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tuerkis); }
.kennen-liste strong { font-size: .98rem; line-height: 1.3; }
.kennen-datum { font-size: .88rem; color: var(--text); }
.kennen-alle { margin: 12px 0 0; text-align: right; font-weight: 700; }
.kennen-alle a { color: var(--blau); }
@media (max-width: 820px) { .kennen-liste { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .kennen-liste { grid-template-columns: 1fr; } .kennen-alle { text-align: left; } }

/* ============ Desktop: größere Schrift und breitere Inhalte (Handy unverändert) ============ */
@media (min-width: 1100px) {
  html { font-size: 112.5%; }
  .spalte { max-width: 960px; }
  .spalte-breit { max-width: 1200px; }
  .spalte-breit.stimmen { max-width: 1360px; }
  .wege, .wege-titel, .kennen-leiste { max-width: 1040px; }
  .kopfleiste-innen { max-width: 1320px; }
}
@media (min-width: 1600px) {
  html { font-size: 125%; }
  .spalte { max-width: 1060px; }
  .spalte-breit { max-width: 1340px; }
  .spalte-breit.stimmen { max-width: 1500px; }
  .wege, .wege-titel, .kennen-leiste { max-width: 1160px; }
  .kopfleiste-innen { max-width: 1480px; }
}

/* ============ Startseite Desktop: ProvenExpert-Siegel oben rechts im Kopfbereich ============ */
@media (min-width: 821px) {
  header.hell.randlos { position: relative; }
  header .siegel {
    /* rechts, knapp unter dem Gesicht im Foto (Gesicht liegt im oberen Viertel des Fotos) */
    position: absolute; top: calc(25% + 3vw + 36px); right: clamp(16px, 2.5vw, 44px); z-index: 2; margin: 0;
    flex-direction: column; gap: 6px; background: #fff; padding: 10px 10px 8px; border-radius: 16px;
    box-shadow: 0 6px 22px rgba(28, 52, 99, .18); text-align: center;
  }
  header .siegel img { width: 170px; box-shadow: none; }
  header .siegel p { font-size: .75rem; max-width: 170px; }
}
/* Breite Bildschirme: rechts neben dem Foto ist genug hellblauer Rand frei, dort oben rechts */
@media (min-width: 1840px) {
  header .siegel { top: 32px; right: 40px; }
}

/* ============ Aktionen-Seite: vier Karten nebeneinander (Desktop), zwei (Tablet), eine (Handy) ============ */
.karten-3.karten-vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1099px) { .karten-3.karten-vier { grid-template-columns: repeat(2, 1fr); max-width: none; } }
@media (max-width: 600px) { .karten-3.karten-vier { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }