/* Sandbox-Ausbau (08.11.2026): ergänzt style.css um Kopfleiste, Menü, Startseite, Seitenleiste */

/* Sandbox-Hinweis */
.sandbox { background: #FFF3C4; color: var(--anthrazit); font-size: 0.85rem; text-align: center; padding: 0.35rem 1rem; border-bottom: 1px solid #E6D58A; }
.platzhalter { border: 2px dashed var(--silber); background: repeating-linear-gradient(45deg, var(--weiss), var(--weiss) 10px, #F2EEE7 10px, #F2EEE7 20px); color: var(--silber-text); padding: 1.1rem 1.2rem; border-radius: 6px; font-size: 0.95rem; }
.platzhalter strong { color: var(--anthrazit); }
.platzhalter p:last-child { margin-bottom: 0; }

/* Kopfleiste */
.kopfleiste { background: var(--anthrazit); color: #E9E3D8; font-size: 0.85rem; }
.kopfleiste .huelle { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem 1.4rem; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.kopfleiste a { color: #fff; text-decoration: none; }
.kopfleiste a:hover { text-decoration: underline; color: #fff; }
.kopfleiste .ort { margin-right: auto; color: #CFC8BC; }
@media (max-width: 39.99rem) { .kopfleiste .ort { display: none; } .kopfleiste .huelle { justify-content: center; } }

/* Kopf mit Menü */
.kopf { position: sticky; top: 0; z-index: 20; }
.kopf .huelle { flex-wrap: wrap; }
.burger { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--linie); border-radius: 999px; padding: 0.5rem 0.9rem; font: 700 0.95rem/1 var(--sans); color: var(--anthrazit); cursor: pointer; }
.burger-striche, .burger-striche::before, .burger-striche::after { display: block; width: 1.1rem; height: 2px; background: var(--anthrazit); position: relative; content: ""; }
.burger-striche::before { position: absolute; top: -6px; }
.burger-striche::after { position: absolute; top: 6px; }
@media (max-width: 29.99rem) {
  .kopfleiste { font-size: 0.76rem; }
  .kopfleiste .huelle { flex-wrap: nowrap; gap: 0.9rem; padding-left: 0.75rem; padding-right: 0.75rem; white-space: nowrap; }
  .kopf .huelle { flex-wrap: wrap; gap: 0.5rem; }
  .marke img { width: 2.2rem; height: 2.2rem; }
  .marke-name { font-size: 1.15rem; }
  .marke-zusatz { font-size: 0.72rem; }
  .burger { padding: 0.55rem 0.7rem; }
  .burger-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.menue { display: none; width: 100%; padding: 0 0 1rem; }
.menue.offen { display: block; max-height: calc(100vh - 7rem); overflow-y: auto; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue > ul > li { border-top: 1px solid var(--linie); }
.menue a, .menue .unter-knopf { display: block; width: 100%; text-align: left; padding: 0.8rem 0.2rem; color: var(--anthrazit); text-decoration: none; font: 700 1rem/1.3 var(--sans); background: none; border: 0; cursor: pointer; }
.menue a:hover, .menue .unter-knopf:hover { color: var(--rot); }
.menue a[aria-current="page"] { color: var(--rot); }
.unter-knopf::after { content: "▾"; margin-left: 0.4rem; color: var(--rot); font-size: 0.85em; }
.unter-knopf[aria-expanded="true"]::after { content: "▴"; }
.untermenue { display: none; padding: 0 0 0.6rem 1rem !important; }
.untermenue.offen { display: block; }
.untermenue a { font-weight: 400; padding: 0.5rem 0.2rem; }
.menue .menue-knopf { display: inline-block; margin-top: 0.8rem; }
.menue .menue-knopf a { display: inline-block; width: auto; color: #fff; background: var(--rot); padding: 0.8rem 1.3rem; }
.menue .menue-knopf a:hover { background: var(--rot-dunkel); color: #fff; }

@media (min-width: 64rem) {
  .burger { display: none; }
  .kopf .huelle { flex-wrap: nowrap; }
  .menue { display: block; width: auto; padding: 0; }
  .menue > ul { display: flex; align-items: center; gap: 0.2rem; }
  .menue > ul > li { border: 0; position: relative; }
  .menue a, .menue .unter-knopf { padding: 0.6rem 0.65rem; font-size: 0.95rem; white-space: nowrap; }
  .untermenue { position: absolute; left: 0; top: 100%; min-width: 15rem; background: var(--weiss); border: 1px solid var(--linie); box-shadow: 0 10px 24px rgba(44,44,44,0.12); padding: 0.4rem 0 !important; }
  .menue > ul > li:hover > .untermenue, .menue > ul > li:focus-within > .untermenue { display: block; }
  .untermenue a { padding: 0.55rem 1rem; }
  .menue .menue-knopf { margin: 0 0 0 0.6rem; }
  .menue .menue-knopf a { padding: 0.65rem 1.1rem; }
  .kopf .kopf-knopf { display: none !important; }
}
@media (min-width: 64rem) and (max-width: 74rem) { .marke-zusatz { display: none; } }

/* Startseite: großes Foto */
.held { position: relative; min-height: 34rem; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.held img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(44,44,44,0.05) 15%, rgba(44,44,44,0.78) 75%); }
.held .huelle { position: relative; z-index: 1; padding-top: 6rem; padding-bottom: 2.6rem; }
.held h1 { color: #fff; }
.held .unterzeile { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 4.6vw, 1.7rem); line-height: 1.3; max-width: 32rem; margin-bottom: 1rem; }
.held .vorstellung { max-width: 32rem; margin-bottom: 1.6rem; color: #F2EDE4; }
@media (min-width: 64rem) { .held { min-height: 34rem; } .held .huelle { padding-bottom: 3rem; } }  /* 08.11.2026: von 40rem gesenkt, damit die Anliegen auf dem Laptop schon im ersten Bild anlaufen */

/* Vertrauensleiste */
.vertrauen { background: var(--weiss); border-bottom: 1px solid var(--linie); padding: 1.6rem 0; }
.siegel-reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: center; justify-items: center; }
.siegel-reihe img { width: 100%; max-width: 6.5rem; height: auto; }
.siegel-reihe .vfp img { filter: none; }
.vertrauen-text { text-align: center; font-size: 0.95rem; margin: 1.2rem auto 0; max-width: 34rem; }
.vertrauen .platzhalter { margin: 1rem auto 0; max-width: 34rem; text-align: center; font-size: 0.85rem; padding: 0.6rem 1rem; }
@media (min-width: 52rem) {
  .vertrauen .huelle { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
  .siegel-reihe { grid-template-columns: repeat(3, 6.5rem); gap: 1.6rem; }
  .vertrauen-text { text-align: left; margin: 0; }
  .vertrauen .platzhalter { margin: 0; max-width: 15rem; }
}

/* Formular-Attrappe */
.formular { display: grid; gap: 0.9rem; max-width: var(--text); }
.formular label { display: grid; gap: 0.3rem; font-weight: 700; font-size: 0.95rem; }
.formular input, .formular textarea { font: 400 1rem/1.4 var(--sans); padding: 0.75rem 0.85rem; border: 1px solid #CFC6B7; border-radius: 6px; background: var(--weiss); color: var(--anthrazit); width: 100%; }
.formular textarea { min-height: 7rem; resize: vertical; }
.formular .knopf[disabled] { opacity: 0.55; cursor: not-allowed; }
.formular .attrappe { font-size: 0.85rem; color: var(--silber-text); margin: 0; }
.formular .feld-hinweis { font-size: 0.9rem; line-height: 1.45; margin: -0.5rem 0 0; color: var(--anthrazit); }
.formular .kenntnisnahme { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-size: 0.9rem; line-height: 1.45; }
.formular .kenntnisnahme input { width: auto; margin-top: 0.2rem; flex: none; }
.formular .fallen-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kontakt-raster { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .kontakt-raster { grid-template-columns: 1.3fr 1fr; align-items: start; } }

/* Anliegen-Kacheln mit Bild */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.kachel a { display: block; height: 100%; background: var(--creme); color: var(--anthrazit); text-decoration: none; border-radius: 6px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kachel a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(44,44,44,0.12); color: var(--anthrazit); }
.kachel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kachel img.zeichnung { object-fit: contain; padding: 1rem 1.2rem 0.4rem; background: var(--weiss); }  /* Probe 09.11.2026: Einlinien-Zeichnung statt Raumfoto */
.kachel-text { padding: 1rem 1.15rem 1.2rem; border-top: 3px solid var(--rot); }
.kachel h3 { font-size: 1.4rem; }
.kachel q { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.15rem; line-height: 1.35; quotes: "„" "“"; display: block; }
.kachel .mehr { display: inline-block; margin-top: 0.6rem; font-weight: 700; font-size: 0.95rem; color: var(--rot); text-decoration: underline; text-underline-offset: 0.18em; }
@media (max-width: 39.99rem) {
  .kachel a { display: grid; grid-template-columns: 6.5rem 1fr; }
  .kachel img { aspect-ratio: auto; height: 100%; }
  .kachel img.zeichnung { padding: 0.4rem; }
  .kachel-text { border-top: 0; border-left: 3px solid var(--rot); padding: 0.8rem 0.9rem 0.9rem; }
  .kachel h3 { font-size: 1.25rem; }
  .kachel q { font-size: 1.05rem; }
  .kachel-ohne-bild a { grid-template-columns: 1fr; }
  /* 09.11.2026: Spiegel liegt rechts im Bild, die schmale Spalte zeigte sonst nur Griff und Glasrand */
  .kachel img[src*="kachel-selbstwert-spiegel-riss"] { object-position: 92% 50%; }
}
.kachel-ohne-bild a { display: flex; align-items: flex-end; background: var(--weiss); border: 1px solid var(--linie); }
.kachel-ohne-bild .kachel-text { border-top: 0; border-left: 3px solid var(--rot); }
.kontakt-foto { width: 100%; border-radius: 6px; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 40rem) { .kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .kacheln { grid-template-columns: repeat(3, 1fr); } }

/* Person mit großem Porträt */
.person-gross { display: grid; gap: 1.8rem; align-items: center; }
.person-gross img { width: 100%; max-width: 16rem; border-radius: 6px; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 52rem) { .person-gross { grid-template-columns: 22rem 1fr; gap: 3rem; } .person-gross img { max-width: 22rem; } }

/* Video-Platzhalter */
.video { position: relative; aspect-ratio: 16 / 9; max-width: 48rem; border-radius: 6px; overflow: hidden; background: var(--anthrazit); }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.video-mitte { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.8rem; color: #fff; text-align: center; padding: 1rem; }
.video-play { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--rot); display: grid; place-items: center; }
.video-play::before { content: ""; border-left: 1.3rem solid #fff; border-top: 0.8rem solid transparent; border-bottom: 0.8rem solid transparent; margin-left: 0.3rem; }
.video-mitte span { font-weight: 700; background: rgba(44,44,44,0.6); padding: 0.3rem 0.8rem; border-radius: 4px; font-size: 0.95rem; }

/* Echtes Begrüßungsvideo (09.11.2026), selbst gehostet. Quer: bis 48rem breit. Hochkant (Kai nimmt mit Teleprompter hochkant auf):
   schmal und mittig, nie höher als der Bildschirm, damit die Steuerleiste sichtbar bleibt. */
.video-echt { display: block; width: 100%; height: auto; max-width: 48rem; border-radius: 6px; background: var(--anthrazit); }
.video-echt.hochkant { width: auto; max-width: 100%; max-height: 85vh; max-height: 85svh; aspect-ratio: 9 / 16; margin-inline: auto; }
@media (min-width: 52rem) { .video-echt.hochkant { max-height: min(44rem, calc(100svh - 7rem)); } }

/* Sicherheit mit Links */
.zwei-spalten { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .zwei-spalten { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.link-liste { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.link-liste a { font-weight: 700; }
.link-liste a::before { content: "→ "; }

/* Unterseiten (neu) */
.seitenkopf { background: var(--creme); padding: 2.4rem 0 2.6rem; }
.seitenkopf h1 { font-size: clamp(2.3rem, 8vw, 3rem); margin-bottom: 0.3em; }
.seitenkopf .pfad { margin-bottom: 1rem; }

/* Anliegen-Seiten mit Seitenleiste */
.mit-leiste { display: grid; gap: 2.4rem; padding-top: 3rem; padding-bottom: 3.5rem; }
.mit-leiste .block { margin-bottom: 2.6rem; }
.mit-leiste .block:last-child { margin-bottom: 0; }
.mit-leiste .block-creme { background: var(--creme); padding: 1.6rem 1.4rem 0.6rem; border-radius: 6px; }
.leiste { display: grid; gap: 1.2rem; align-content: start; }
.leiste-karte { background: var(--creme); border-radius: 6px; padding: 1.2rem 1.2rem 1.3rem; font-size: 0.95rem; }
.leiste-karte h2 { font-size: 1.45rem; margin-bottom: 0.5em; }
.leiste-karte p { margin-bottom: 0.6em; }
.leiste-foto { width: 100%; max-width: 14rem; border-radius: 6px; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 64rem) { .leiste-foto { max-width: none; } }
.leiste .formular { gap: 0.7rem; }
.leiste .formular input, .leiste .formular textarea { padding: 0.6rem 0.7rem; font-size: 0.95rem; }
.leiste .formular textarea { min-height: 5rem; }
.leiste .knopf { font-size: 0.95rem; padding: 0.75rem 1.2rem; }
.siegel-klein { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.siegel-klein img { width: 4.2rem; height: auto; }
/* 09.11.2026: Hypno School ohne Siegelbild als Textmarke neben dem VFP-Siegel */
.siegel-klein .siegel-text { flex: 1 1 9rem; max-width: 14rem; font-size: 0.88rem; line-height: 1.35; border-left: 3px solid var(--rot); padding: 0.2rem 0 0.2rem 0.7rem; }
@media (min-width: 64rem) {
  .mit-leiste { grid-template-columns: minmax(0, 1fr) 19rem; gap: 3.5rem; }
  .leiste { position: sticky; top: 6rem; }
}

/* Über mich: Ausbildungen */
.ausbildungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ausbildungen li { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: center; background: var(--creme); padding: 0.9rem 1rem; border-radius: 6px; }
.ausbildungen img { width: 5rem; height: auto; }
/* Ausbildungen ohne Siegel: nur Text, bündig mit den anderen; kein leerer Kreis (Kai, 08.11.2026: wirkte wie fehlende Bilder) */
.ausbildungen .ohne-bild { width: 5rem; }

/* Fuß (erweitert) */
.fuss-raster { display: grid; gap: 1.6rem; }
.fuss h2 { font-size: 1.3rem; margin-bottom: 0.4em; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.fuss-unten { border-top: 1px solid var(--linie); margin-top: 1.6rem; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.fuss.fuss-neu .huelle { display: block; }
@media (min-width: 52rem) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; } }

/* 09.11.2026, Inhalts-Review Befund 8: Zeile unter dem Buchungsknopf, kompakter Kasten auf den Anliegen-Seiten */
.knopf-zeile { font-size: 0.9rem; line-height: 1.45; margin: 0.6rem 0 0; max-width: 34rem; color: var(--anthrazit); }
.held .knopf-zeile { color: inherit; }
.kasten .kasten-liste { margin: 0 0 1.2rem; padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.kasten .kasten-orte { margin-top: 1rem; }
.kasten .kasten-links { margin-top: 0.4rem; }
.mit-leiste .kasten { padding-bottom: 1.4rem; }

/* 09.11.2026, Inhalts-Review Befund 1: „Warum zu mir?“ unter den Kacheln, Heilerlaubnis breit, Ort klein darunter */
.warum h3 { margin: 0 0 0.5rem; }
.warum .warum-haupt { max-width: 46rem; border-left: 3px solid var(--rot); padding-left: 1.2rem; }
.warum .warum-haupt p { margin: 0 0 0.8rem; }
.warum .warum-neben { max-width: 46rem; margin-top: 1.8rem; padding-left: calc(1.2rem + 3px); }
.warum .warum-neben p { margin: 0; }