/* Robert Daberer – Coaching & Begleitung
   Warm, ruhig, nahbar. Markenfarben (Petrol, Mint, Gold) nur als feine Akzente.
   Schrift: dünne Grotesk + fette Schlüsselwörter + Handschrift-Akzent (Anlehnung an Damian Richter).
   Für WordPress später selbst gehostete Schriften (z. B. Jost Thin + Caveat), keine Google-Verbindung. */
:root {
  --creme: #FAF6F0;
  --leinen: #F3EBE0;
  --sand: #E7D9C6;
  --karamell: #A9744A;
  --karamell-dunkel: #8C5D38;
  --espresso: #45322A;
  --text: #4A3E37;
  --grau: #7A6D64;
  --gold: #B8903F;
  --petrol: #1E5F74;
  --petrol-dunkel: #174C5D;
  --mint: #7FC4C2;
  --weiss: #FFFFFF;
  --flaeche: #45322A;
  --hell-akzent: #E2BC8D;
  --btn-schatten: rgba(169,116,74,.22);
  --duenn: "Segoe UI Light", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  --sans: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  --hand: "Segoe Script", "Lucida Handwriting", "Brush Script MT", cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--text); font-family: var(--sans); font-size: 1.08rem; line-height: 1.75; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--karamell-dunkel); }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--duenn); font-weight: 300; color: var(--espresso); line-height: 1.18; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 b, h2 b, h3 b, .zitat b { font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
h3 { font-size: 1.35rem; font-weight: 600; }
.hand { font-family: var(--hand); font-weight: 400; color: var(--karamell); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.schmal { max-width: 760px; margin-left: auto; margin-right: auto; }
.mitte { text-align: center; }
.kicker { display: inline-block; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--grau); margin-bottom: 14px; }
.kicker::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--karamell); vertical-align: middle; margin-right: 10px; }
.mitte .kicker::after { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--karamell); vertical-align: middle; margin-left: 10px; }

/* Buttons: warmes Karamell, weich */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: .01em; text-decoration: none; padding: 15px 28px; border-radius: 40px; background: var(--karamell); color: var(--weiss); transition: background .25s ease, transform .2s ease, box-shadow .25s ease; box-shadow: 0 8px 20px var(--btn-schatten); }
.btn:hover { background: var(--karamell-dunkel); transform: translateY(-2px); }
.btn-ruhig { background: transparent; color: var(--espresso); box-shadow: inset 0 0 0 1.5px rgba(69,50,42,.35); }
.btn-ruhig:hover { background: var(--flaeche); color: var(--creme); }
.btn-petrol { background: var(--petrol); box-shadow: 0 8px 20px rgba(30,95,116,.2); }
.btn-petrol:hover { background: var(--petrol-dunkel); }
.aktionen { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Themen-Variante Unternehmer: Petrol aus dem Namensschriftzug als Akzent */
.thema-petrol { --karamell: #1E5F74; --karamell-dunkel: #164A5B; --flaeche: #173F4D; --hell-akzent: #9ED6D2; --btn-schatten: rgba(30,95,116,.25); }
.thema-petrol .zahl { background: #DDEBEA; }
.thema-petrol .dunkel .btn { background: var(--hell-akzent); color: #173F4D; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.thema-petrol .dunkel .btn:hover { background: var(--weiss); }

/* Scroll-Effekt: Felder gleiten sanft herein */
/* Auftauchen aus dem Hintergrund: von leicht verkleinert, unscharf und tiefer zu klar */
.js .reveal { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(4px); transition: opacity .6s ease, transform .7s cubic-bezier(.16,.8,.24,1), filter .35s ease; }
.js .reveal.sichtbar { opacity: 1; transform: none; filter: none; }
.js .reveal.v1 { transition-delay: .08s; } .js .reveal.v2 { transition-delay: .16s; } .js .reveal.v3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Kopf */
.kopf { background: rgba(250,246,240,.94); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(69,50,42,.08); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.kopf .logo img { width: 210px; height: auto; }
.menue { display: flex; gap: 18px; align-items: center; }
.menue .btn { padding: 10px 20px; font-size: .92rem; color: var(--weiss); white-space: nowrap; }

/* Drei-Striche-Menü */
.menue-knopf { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(69,50,42,.25); background: transparent; cursor: pointer; display: grid; place-content: center; gap: 5px; padding: 0; transition: border-color .2s ease, background .2s ease; }
.menue-knopf span { display: block; width: 20px; height: 1.5px; background: var(--espresso); border-radius: 2px; }
.menue-knopf:hover { border-color: var(--karamell); background: var(--weiss); }
.menue-panel { position: fixed; inset: 0; z-index: 50; visibility: hidden; }
.menue-panel.offen { visibility: visible; }
.menue-hinter { position: absolute; inset: 0; background: rgba(42,30,25,.45); opacity: 0; transition: opacity .3s ease; }
.menue-panel.offen .menue-hinter { opacity: 1; }
.menue-lade { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); background: var(--creme); padding: 70px 36px 30px; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); transition: transform .35s ease; box-shadow: -20px 0 50px rgba(42,30,25,.18); }
.menue-panel.offen .menue-lade { transform: none; }
.menue-lade > a { text-decoration: none; color: var(--espresso); font-family: var(--duenn); font-weight: 300; font-size: 1.45rem; padding: 12px 0; border-bottom: 1px solid rgba(69,50,42,.1); }
.menue-lade > a small { display: block; font-family: var(--sans); font-size: .8rem; color: var(--grau); margin-top: 2px; }
.menue-lade > a:hover { color: var(--karamell); }
.menue-lade .menue-pflege { margin-top: 18px; font-size: 1.1rem; border-bottom: 0; background: var(--leinen); border-radius: 14px; padding: 14px 18px; }
.menue-zu { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(69,50,42,.2); background: transparent; font-size: 1.6rem; line-height: 1; color: var(--espresso); cursor: pointer; }
.menue-recht { margin-top: auto; padding-top: 28px; display: flex; gap: 18px; flex-wrap: wrap; }
.menue-recht a { font-size: .8rem; color: var(--grau); text-decoration: none; }
.menue-recht a:hover { color: var(--karamell); }

/* Hero */
.hero { position: relative; padding: 84px 0 96px; overflow: hidden;
  background: radial-gradient(ellipse 45% 55% at 92% 12%, rgba(127,196,194,.18), transparent 70%),
              radial-gradient(ellipse 55% 60% at 0% 100%, rgba(169,116,74,.10), transparent 70%), var(--creme); }
.hero .wrap { display: grid; grid-template-columns: 1.45fr .55fr; gap: 50px; align-items: center; }
.hero .hand.vorzeile { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.zitat { font-family: var(--duenn); font-weight: 300; color: var(--espresso); font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 22px; }
.zitat b { color: var(--karamell-dunkel); }
.hero .unter { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.55; color: var(--text); margin-bottom: 16px; max-width: 32em; }
.hero .text { color: var(--grau); max-width: 34em; margin-bottom: 30px; }
.vertrauen { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; font-size: .92rem; color: var(--grau); }
.vertrauen span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--karamell); margin-right: 8px; vertical-align: middle; }
.portrait-klein { justify-self: center; text-align: center; }
.portrait-klein img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 5px solid var(--weiss); box-shadow: 0 16px 36px rgba(69,50,42,.16); margin: 0 auto 12px; }
.portrait-klein strong { display: block; font-weight: 600; color: var(--espresso); }
.portrait-klein small { color: var(--grau); }

/* Abschnitte */
section { padding: 96px 0; }
.leinen { background: var(--leinen); }
.dunkel { background: var(--flaeche); color: #EFE6DB; }
.dunkel h2, .dunkel h3 { color: var(--creme); }
.einleitung { max-width: 720px; margin: 0 auto 50px; }
.einleitung p { color: var(--grau); font-size: 1.12rem; }
.dunkel .einleitung p { color: #D9CBBB; }

/* Kennst du das */
.saetze { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 0 auto 44px; padding: 0; list-style: none; }
.saetze li { background: var(--weiss); border-radius: 18px; padding: 24px 58px 22px 58px; position: relative; font-family: var(--duenn); font-weight: 300; font-size: 1.22rem; line-height: 1.45; color: var(--espresso); box-shadow: 0 10px 30px rgba(69,50,42,.06); }
/* Anführungszeichen links und rechts: gleiche Größe, gleiche Höhe */
.saetze li::before, .saetze li::after { position: absolute; top: 22px; font-family: Georgia, serif; font-size: 3rem; line-height: 1; height: .5em; overflow: visible; color: var(--karamell); opacity: .7; }
.saetze li::before { content: "„"; left: 20px; transform: translateY(-.62em); }
.saetze li::after { content: "“"; right: 20px; }
.wende { font-family: var(--duenn); font-weight: 300; font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--espresso); margin-bottom: 10px; }
.wende b { color: var(--karamell-dunkel); }

/* Zahl-Band: du bist nicht allein */
.zahl { background: var(--sand); border-radius: 26px; padding: 44px; display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; max-width: 920px; margin: 0 auto; }
.zahl .gross { font-family: var(--duenn); font-weight: 200; font-size: clamp(4rem, 9vw, 6.4rem); line-height: 1; color: var(--karamell-dunkel); }
.zahl p { margin: 0; color: var(--text); font-size: 1.12rem; }
.zahl small { display: block; margin-top: 10px; color: var(--grau); font-size: .82rem; }

/* Gegenüberstellung: rechte Spalte klar hervorgehoben */
.vergleich { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; max-width: 960px; margin: 0 auto; align-items: center; }
.spalte { border-radius: 22px; padding: 30px 32px; }
.spalte.alt { background: transparent; border: 1px dashed rgba(69,50,42,.25); }
.spalte.alt h3 { color: var(--grau); font-weight: 400; font-size: 1.15rem; }
.spalte.alt li { color: var(--grau); font-size: .98rem; text-decoration: line-through; text-decoration-color: rgba(169,116,74,.5); }
.spalte.neu { background: var(--flaeche); color: #F3EBE0; padding: 40px 42px; box-shadow: 0 26px 50px rgba(69,50,42,.28); }
.spalte.neu h3 { color: var(--creme); font-size: 1.6rem; font-weight: 300; }
.spalte.neu h3 b { color: var(--hell-akzent); }
.spalte ul { list-style: none; padding: 0; margin: 0; }
.spalte li { padding: 11px 0 11px 34px; position: relative; }
.spalte.alt li::before { content: "–"; position: absolute; left: 8px; color: var(--grau); text-decoration: none; }
.spalte.neu li { font-size: 1.1rem; border-bottom: 1px solid rgba(243,235,224,.12); }
.spalte.neu li:last-child { border-bottom: 0; }
.spalte.neu li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 16px; height: 9px; border-left: 2px solid var(--hell-akzent); border-bottom: 2px solid var(--hell-akzent); transform: rotate(-45deg); }

/* Bereiche mit Illustrationen */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.kachel { background: var(--weiss); border-radius: 22px; padding: 34px 30px; box-shadow: 0 12px 32px rgba(69,50,42,.07); transition: transform .3s ease, box-shadow .3s ease; }
.kachel:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(69,50,42,.12); }
.kachel .illu { width: 92px; height: 92px; margin-bottom: 20px; }
.kachel p { color: var(--grau); }

/* Schritte */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: s; position: relative; }
.schritte::before { content: ""; position: absolute; top: 34px; left: 16%; right: 16%; border-top: 1px dashed rgba(169,116,74,.45); }
.schritt { text-align: center; padding: 0 16px; position: relative; }
.schritt::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; background: var(--creme); border: 1.5px solid var(--karamell); color: var(--karamell-dunkel); font-family: var(--duenn); font-weight: 300; font-size: 1.8rem; position: relative; z-index: 1; }
.leinen .schritt::before { background: var(--leinen); }
.schritt p { color: var(--grau); }

/* Buch */
.buch .wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 64px; align-items: center; }
.buch .cover { max-width: 290px; justify-self: center; transform: rotate(-2deg); margin: 0; }
.buch .cover img { border-radius: 3px 8px 8px 3px; box-shadow: 0 26px 50px rgba(69,50,42,.28); }
.buch .untertitel { font-family: var(--hand); color: var(--karamell); font-size: 1.35rem; margin-top: -4px; }
.badge { display: inline-block; background: var(--sand); color: var(--espresso); font-size: .8rem; font-weight: 600; letter-spacing: .06em; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }

/* WeAreReal */
.community .karte { max-width: 920px; margin: 0 auto; background: var(--weiss); border-radius: 26px; padding: 46px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 36px; align-items: center; box-shadow: 0 16px 40px rgba(69,50,42,.08); }
.gutschein { background: var(--leinen); border: 1.5px dashed var(--karamell); border-radius: 20px; padding: 26px 22px; text-align: center; position: relative; }
.gutschein .hand { font-size: 1.15rem; display: block; margin-bottom: 4px; }
.gutschein strong { display: block; font-family: var(--duenn); font-weight: 300; font-size: 2rem; color: var(--espresso); line-height: 1.15; }
.gutschein span { color: var(--grau); font-size: .9rem; }

/* Pflege: zwei Türen */
.tueren { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.tuer { background: var(--weiss); border-radius: 22px; padding: 34px 32px; box-shadow: 0 12px 32px rgba(69,50,42,.07); display: flex; flex-direction: column; }
.tuer .fuer { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--karamell); margin-bottom: 10px; }
.tuer p { color: var(--grau); flex: 1; }
.tuer .btn { align-self: flex-start; }

/* Blog */
.beitraege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.beitrag { background: var(--weiss); border-radius: 20px; overflow: hidden; box-shadow: 0 12px 32px rgba(69,50,42,.07); display: flex; flex-direction: column; transition: transform .3s ease; }
.beitrag:hover { transform: translateY(-4px); }
.beitrag .flaeche { height: 160px; background: linear-gradient(135deg, var(--leinen), var(--sand)); display: grid; place-items: center; }
.beitrag .flaeche svg { width: 96px; height: 96px; filter: drop-shadow(0 10px 16px rgba(23,63,77,.28)); transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
/* ganze Karte anklickbar, Medaillon hebt sich beim Darüberfahren */
.beitrag { position: relative; cursor: pointer; }
.beitrag a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.beitrag:hover .flaeche svg { transform: translateY(-4px) scale(1.07); filter: drop-shadow(0 16px 22px rgba(23,63,77,.36)); }
.beitrag:hover a { text-decoration: underline; }
.beitrag .inhalt { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.beitrag .kat { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--karamell); margin-bottom: 8px; }
.beitrag h3 { font-size: 1.12rem; font-weight: 600; flex: 1; }
.beitrag a { font-weight: 600; text-decoration: none; font-size: .95rem; }

/* Über mich */
.ueber .wrap { display: grid; grid-template-columns: .55fr 1.45fr; gap: 60px; align-items: center; }
.ueber img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; object-position: center 20%; max-width: 270px; justify-self: center; border: 5px solid var(--weiss); box-shadow: 0 18px 40px rgba(69,50,42,.15); }
.ueber .hand.spruch { font-size: 1.55rem; line-height: 1.45; margin: 24px 0; }
.fakten { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 10px; }
.fakten div { font-size: .95rem; color: var(--grau); }
.fakten strong { display: block; font-family: var(--duenn); font-weight: 300; font-size: 1.6rem; color: var(--espresso); }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { background: var(--weiss); border-radius: 16px; padding: 18px 24px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(69,50,42,.05); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--espresso); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--karamell); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; color: var(--grau); }

/* Coaching-Seite */
.seitenkopf { padding: 80px 0 70px; background: radial-gradient(ellipse 45% 55% at 92% 10%, rgba(127,196,194,.16), transparent 70%), radial-gradient(ellipse 55% 60% at 0% 100%, rgba(169,116,74,.10), transparent 70%), var(--creme); }
.seitenkopf h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); max-width: 14em; }
.seitenkopf .hand { font-size: 1.6rem; display: block; margin-bottom: 8px; }
.seitenkopf .unter { font-size: clamp(1.15rem, 2vw, 1.35rem); max-width: 34em; margin-bottom: 28px; }
.janein { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; max-width: 980px; margin: 0 auto; align-items: start; }
.janein .ja { background: var(--weiss); border-radius: 22px; padding: 36px 38px; box-shadow: 0 16px 40px rgba(69,50,42,.09); }
.janein .nein { border: 1px dashed rgba(69,50,42,.25); border-radius: 22px; padding: 30px 32px; }
.janein h3 { margin-bottom: 14px; }
.janein .nein h3 { color: var(--grau); font-weight: 400; }
.janein ul { list-style: none; padding: 0; margin: 0; }
.janein li { padding: 9px 0 9px 32px; position: relative; }
.janein .ja li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 15px; height: 8px; border-left: 2px solid var(--karamell); border-bottom: 2px solid var(--karamell); transform: rotate(-45deg); }
.janein .nein li { color: var(--grau); font-size: .98rem; }
.janein .nein li::before { content: "–"; position: absolute; left: 8px; }
.phasen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.phase { background: var(--weiss); border-radius: 22px; padding: 32px 28px; box-shadow: 0 12px 32px rgba(69,50,42,.07); position: relative; }
.phase .wann { font-family: var(--hand); color: var(--karamell); font-size: 1.25rem; display: block; margin-bottom: 8px; }
.phase p { color: var(--grau); margin: 0; }
.angebote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.angebot { background: var(--weiss); border-radius: 22px; padding: 34px 30px; box-shadow: 0 12px 32px rgba(69,50,42,.07); display: flex; flex-direction: column; }
.angebot.hervor { background: var(--flaeche); color: #F3EBE0; box-shadow: 0 24px 48px rgba(69,50,42,.26); transform: translateY(-10px); }
.angebot.hervor h3 { color: var(--creme); }
.angebot .dauer { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--karamell); margin-bottom: 10px; }
.angebot.hervor .dauer { color: var(--hell-akzent); }
.angebot ul { list-style: none; padding: 0; margin: 14px 0 24px; flex: 1; }
.angebot li { padding: 6px 0 6px 24px; position: relative; font-size: .98rem; }
.angebot li::before { content: "•"; position: absolute; left: 6px; color: var(--karamell); }
.angebot.hervor li::before { color: var(--hell-akzent); }
.angebot .preis { font-size: .9rem; color: var(--grau); margin-bottom: 14px; }
.angebot.hervor .preis { color: #D9CBBB; }
.angebot .btn { align-self: flex-start; }
.themen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; }
.thema { background: var(--weiss); border-radius: 18px; padding: 22px 24px; border-left: 3px solid var(--karamell); }
.thema strong { display: block; color: var(--espresso); font-weight: 600; margin-bottom: 4px; }
.thema span { color: var(--grau); font-size: .96rem; }
.grenzen { max-width: 860px; margin: 0 auto; background: var(--leinen); border-radius: 22px; padding: 34px 38px; }
.grenzen ul { margin: 12px 0 0; padding-left: 20px; color: var(--grau); }
.grenzen li { margin-bottom: 6px; }
.wurzeln { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.wurzeln span { background: var(--weiss); border-radius: 999px; padding: 7px 16px; font-size: .9rem; color: var(--text); box-shadow: 0 4px 12px rgba(69,50,42,.06); }
@media (max-width: 920px) {
  .janein, .phasen, .angebote, .themen { grid-template-columns: 1fr; }
  .angebot.hervor { transform: none; }
  .grenzen { padding: 26px; }
}

/* Pflege-Seite */
.weiche { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.wegweiser { max-width: 980px; margin: 0 auto; background: var(--weiss); border-radius: 26px; padding: 44px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; box-shadow: 0 16px 40px rgba(69,50,42,.09); }
.wegweiser .pdf { background: var(--leinen); border-radius: 18px; padding: 28px; text-align: center; }
.wegweiser .pdf .blatt { width: 120px; height: 160px; margin: 0 auto 18px; background: var(--weiss); border-radius: 6px; box-shadow: 6px 6px 0 var(--sand), 0 10px 24px rgba(69,50,42,.12); display: grid; place-items: center; font-family: var(--duenn); font-size: .85rem; color: var(--espresso); padding: 12px; line-height: 1.3; transform: rotate(-3deg); }
.formular-platz { display: grid; gap: 10px; margin-top: 14px; }
.formular-platz input { font: inherit; padding: 13px 16px; border: 1px solid var(--sand); border-radius: 12px; background: var(--creme); }
.formular-platz .klein { font-size: .82rem; color: var(--grau); }
.preiskarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.preiskarte { background: var(--weiss); border-radius: 22px; padding: 32px 28px; box-shadow: 0 12px 32px rgba(69,50,42,.07); display: flex; flex-direction: column; }
.preiskarte.hervor { background: var(--flaeche); color: #F3EBE0; box-shadow: 0 24px 48px rgba(69,50,42,.26); transform: translateY(-10px); }
.preiskarte.hervor h3 { color: var(--creme); }
.preiskarte .betrag { font-family: var(--duenn); font-weight: 300; font-size: 2.6rem; color: var(--espresso); line-height: 1; margin: 6px 0 4px; }
.preiskarte.hervor .betrag { color: var(--hell-akzent); }
.preiskarte .nach { font-size: .88rem; color: var(--grau); margin-bottom: 14px; }
.preiskarte.hervor .nach { color: #D9CBBB; }
.preiskarte ul { list-style: none; padding: 0; margin: 10px 0 22px; flex: 1; }
.preiskarte li { padding: 6px 0 6px 24px; position: relative; font-size: .97rem; }
.preiskarte li::before { content: "•"; position: absolute; left: 6px; color: var(--karamell); }
.preiskarte.hervor li::before { color: var(--hell-akzent); }
.preiskarte .btn { align-self: flex-start; }
.rechtlich { max-width: 860px; margin: 30px auto 0; font-size: .88rem; color: var(--grau); text-align: center; }
.optionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.option { background: rgba(255,255,255,.06); border: 1px solid rgba(243,235,224,.16); border-radius: 22px; padding: 30px 26px; }
.option .hand { color: var(--hell-akzent); font-size: 1.5rem; display: block; margin-bottom: 6px; }
.option p { color: #D9CBBB; margin: 0; }
.einrichtung { max-width: 900px; margin: 40px auto 0; border-top: 1px solid rgba(243,235,224,.16); padding-top: 30px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.einrichtung p { color: #D9CBBB; margin: 0; }
.btn-hell { background: transparent; color: var(--creme); box-shadow: inset 0 0 0 1.5px rgba(243,235,224,.5); }
.btn-hell:hover { background: var(--creme); color: var(--espresso); }
.vermaechtnis { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: var(--weiss); border-radius: 22px; padding: 30px 34px; box-shadow: 0 12px 32px rgba(69,50,42,.07); }
.vermaechtnis svg { width: 70px; height: 70px; }
@media (max-width: 920px) {
  .wegweiser, .preiskarten, .optionen, .einrichtung, .vermaechtnis { grid-template-columns: 1fr; }
  .preiskarte.hervor { transform: none; }
  .wegweiser { padding: 28px; }
}

/* Startseite: zwei Wege */
.wege { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.weg { border-radius: 28px; padding: 44px 40px; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 0 18px 44px rgba(69,50,42,.10); transition: transform .3s ease, box-shadow .3s ease; text-decoration: none; }
.weg:hover { transform: translateY(-5px); box-shadow: 0 26px 54px rgba(69,50,42,.16); }
.weg .illu { width: 84px; height: 84px; margin-bottom: 22px; }
.weg h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.weg p { flex: 1; }
.weg .mehr { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.weg-unternehmer { background: #173F4D; color: #DCEBEA; }
.weg-unternehmer h2 { color: #FFFFFF; }
.weg-unternehmer .hand { color: #9ED6D2; }
.weg-unternehmer .mehr { color: #9ED6D2; }
.weg-pflege { background: var(--weiss); color: var(--text); }
.weg-pflege .hand { color: var(--karamell); }
.weg-pflege .mehr { color: var(--karamell-dunkel); }
.weg .hand { font-size: 1.4rem; display: block; margin-bottom: 6px; }
.weg .fuer { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; opacity: .8; margin-bottom: 12px; }
.pflege-tueren { margin-top: 40px; }
.pflege-tueren .weg { border: 1.5px solid rgba(169,116,74,.28); }
.pflege-tueren .weg .illu { width: 80px; height: 80px; margin-top: -62px; position: relative; filter: drop-shadow(0 8px 14px rgba(69,50,42,.22)); }
.tuer-foto { display: block; max-width: none; width: calc(100% + 80px); margin: -44px -40px 22px; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 920px) { .tuer-foto { width: calc(100% + 56px); margin: -32px -28px 22px; } }

/* Fotos im Hintergrund, mit Schleier in der Markenfarbe */
.hero.mit-foto { background: linear-gradient(90deg, rgba(250,246,240,.97) 0%, rgba(250,246,240,.9) 48%, rgba(250,246,240,.25) 100%), var(--foto) center / cover no-repeat; }
.abschluss.mit-foto { background: linear-gradient(rgba(58,42,35,.80), rgba(58,42,35,.86)), var(--foto) center / cover no-repeat; }
.thema-petrol .abschluss.mit-foto { background: linear-gradient(rgba(23,63,77,.82), rgba(23,63,77,.88)), var(--foto) center / cover no-repeat; }
.geschichte-bild { max-width: 820px; margin: 0 auto 36px; }
.geschichte-bild img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 22px; box-shadow: 0 20px 44px rgba(23,63,77,.18); }
@media (max-width: 920px) { .hero.mit-foto { background: linear-gradient(rgba(250,246,240,.93), rgba(250,246,240,.93)), var(--foto) center / cover no-repeat; } }
.wege-drei { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wege-drei .weg { padding: 36px 30px; }
.wege-drei .weg h2 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); }
.wege-drei .weg .illu { width: 96px; height: auto; }
.weg .illu-foto { border-radius: 50%; border: 2px solid #D4AF5A; box-shadow: 0 10px 22px rgba(0,0,0,.28); }
.weg-buch .illu-cover { width: 70px; border-radius: 2px 5px 5px 2px; box-shadow: 0 10px 22px rgba(69,50,42,.25); transform: rotate(-3deg); margin-bottom: 22px; }
@media (max-width: 920px) { .wege, .wege-drei { grid-template-columns: 1fr; } .weg { padding: 32px 28px; } }

/* Goldmend: Schale mit goldener Naht */
.goldmend { max-width: 980px; margin: 0 auto; background: var(--weiss); border-radius: 28px; padding: 48px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: center; box-shadow: 0 18px 44px rgba(69,50,42,.10); }
.goldmend .schale { width: 100%; max-width: 300px; justify-self: center; }
.goldmend h2 b { color: #B08A3E; }
.goldmend .hand { font-size: 1.45rem; display: block; margin: -6px 0 16px; color: #B08A3E; }
.goldmend p { color: var(--grau); }
.goldmend .btn { margin-top: 8px; }
.goldnaht { display: block; width: 100%; max-width: 420px; height: 24px; margin: 0 auto; }
.geschichte { max-width: 820px; margin: 0 auto; }
.geschichte p { font-size: 1.12rem; }
.geschichte .schluss { font-family: var(--duenn); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--espresso); margin-top: 26px; }
.geschichte .schluss b { color: #B08A3E; }
.pflege-hinweis { padding: 0 0 96px; background: var(--leinen); }
.hinweis-karte { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; border: 1px dashed rgba(169,116,74,.45); border-radius: 22px; padding: 24px 30px; }
.hinweis-karte svg { width: 54px; height: 54px; }
.hinweis-karte strong { display: block; color: var(--espresso); font-weight: 600; }
.hinweis-karte span { color: var(--grau); font-size: .96rem; }
@media (max-width: 920px) {
  .goldmend, .hinweis-karte { grid-template-columns: 1fr; }
  .goldmend { padding: 30px 26px; gap: 20px; }
  .goldmend .schale { max-width: 220px; }
  .pflege-hinweis { padding-bottom: 66px; }
}

/* Abschluss */
.abschluss .hand { font-size: 1.7rem; display: block; margin-bottom: 8px; color: var(--hell-akzent); }

/* Fuß */
.fuss { background: #3A2A23; color: #BFAF9F; padding: 18px 0; font-size: .8rem; }
.fuss .wrap { display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap; }
.fuss nav { display: flex; gap: 18px; }
.fuss a { color: #BFAF9F; text-decoration: none; }
.fuss a:hover { color: var(--hell-akzent); }
.hinweis-entwurf { background: var(--sand); color: var(--espresso); text-align: center; font-size: .85rem; padding: 6px 12px; }

@media (max-width: 920px) {
  .hero .wrap, .buch .wrap, .ueber .wrap, .community .karte, .vergleich, .zahl, .tueren { grid-template-columns: 1fr; }
  .kacheln, .schritte, .beitraege, .saetze { grid-template-columns: 1fr; }
  .schritte::before { display: none; }
  .portrait-klein { display: flex; align-items: center; gap: 14px; text-align: left; justify-self: start; }
  .portrait-klein img { width: 72px; height: 72px; border-width: 3px; margin: 0; }
  section { padding: 66px 0; }
  .community .karte, .zahl { padding: 28px; }
  .spalte.neu { padding: 30px 26px; }
}
@media (max-width: 480px) {
  .kopf .logo img { width: 150px; }
  .btn { width: 100%; justify-content: center; }
  .menue .btn { display: none; }
}
/* Noch nicht freigeschaltete Bereiche */
.weg-bald:hover { transform: none; box-shadow: 0 18px 44px rgba(69,50,42,.10); }
.bald-marke { align-self: flex-start; margin-top: 10px; padding: 6px 14px; border-radius: 999px; border: 1px solid #B08A3E; color: #8A6A2C; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.weg-unternehmer .bald-marke { border-color: #D4AF5A; color: #E9CF8C; }
.menue-lade > .menue-bald { color: var(--grau); font-family: var(--duenn); font-weight: 300; font-size: 1.45rem; padding: 12px 0; border-bottom: 1px solid rgba(69,50,42,.1); }
.menue-bald small { display: block; font-family: var(--sans); font-size: .8rem; color: #8A6A2C; margin-top: 2px; }
/* Goldmend: acht Programmwochen */
.themen.wochen { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .themen.wochen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .themen.wochen { grid-template-columns: 1fr; } }
/* Blog */
.blog-liste { margin-top: 34px; display: grid; gap: 20px; }
.blog-karte { background: var(--weiss); border-radius: 18px; padding: 28px 30px; box-shadow: 0 8px 24px rgba(69,50,42,.07); }
.blog-karte h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 0 0 8px; }
.blog-karte h2 a { color: inherit; text-decoration: none; }
.blog-karte p { color: var(--grau); }
.blog-meta { color: var(--grau); font-size: .9rem; margin: 0 0 8px; }
.blog-artikel h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.2; }
.blog-text { font-size: 1.08rem; }
.blog-text h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-top: 36px; }
.blog-text ul { padding-left: 1.2em; }
.blog-text li { margin-bottom: 6px; }
.blog-tabelle { overflow-x: auto; margin: 20px 0; }
.blog-tabelle table { width: 100%; border-collapse: collapse; background: var(--weiss); }
.blog-tabelle th, .blog-tabelle td { padding: 11px 12px; text-align: left; border-bottom: 1px solid rgba(69,50,42,.12); font-size: .96rem; vertical-align: top; }
.blog-tabelle th { background: var(--leinen); }
.blog-tabelle td:last-child { white-space: nowrap; }
.blog-schluss { margin-top: 40px; padding: 28px; background: var(--leinen); border-radius: 18px; text-align: center; }