/* ===== Schriften (lokal gehostet, keine Verbindung zu Google) ===== */
@font-face{font-family:"Marcellus";src:url("/assets/fonts/marcellus-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/fonts/jost-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/fonts/jost-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/fonts/jost-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/fonts/jost-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

/* ===== Farben aus dem Logo ===== */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --papier:#FFFFFF; --nebel:#F5F6F6; --tinte:#2B2723; --grau:#675F57; --linie:#E6E1D8;
  --gold:#A07726; --gold-hell:#F7F0E1;
  --tuerkis:#17769A; --tuerkis-hell:#E6F3F7;
  --magenta:#BE1F66; --orange:#DE7A12; --farbe-hell:#FCEDF2;
  --ph-grund:#FFF1A8; --ph-text:#5A4700;
  --akzent:var(--tuerkis); --akzent-hell:var(--tuerkis-hell);
  --radius:18px;
  --schrift:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --titel:"Marcellus","Palatino Linotype","Book Antiqua",Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#1D1B19; --nebel:#25221F; --tinte:#F2EDE5; --grau:#B8AFA3; --linie:#3A3530;
    --gold:#DDB468; --gold-hell:#2D271E; --tuerkis:#5EC1DF; --tuerkis-hell:#1A2A30;
    --magenta:#F2649F; --orange:#F5A44D; --farbe-hell:#2F1E26; --ph-grund:#5A4A00; --ph-text:#FFF1A8;
  }
}
:root[data-theme="dark"]{
  --papier:#1D1B19; --nebel:#25221F; --tinte:#F2EDE5; --grau:#B8AFA3; --linie:#3A3530;
  --gold:#DDB468; --gold-hell:#2D271E; --tuerkis:#5EC1DF; --tuerkis-hell:#1A2A30;
  --magenta:#F2649F; --orange:#F5A44D; --farbe-hell:#2F1E26; --ph-grund:#5A4A00; --ph-text:#FFF1A8;
}
.welt-balance{--akzent:var(--gold);--akzent-hell:var(--gold-hell)}
.welt-wasser{--akzent:var(--tuerkis);--akzent-hell:var(--tuerkis-hell)}
.welt-farbe{--akzent:var(--magenta);--akzent-hell:var(--farbe-hell)}

/* ===== Grundlagen ===== */
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 1.0625rem/1.65 var(--schrift)}
img{max-width:100%;height:auto;display:block}
a{color:var(--akzent);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--titel);font-weight:400;line-height:1.18;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.3rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.35rem}
p,ul,ol,dl{margin:0 0 1em}
.sprung{position:absolute;left:-999px;top:0;background:var(--tinte);color:var(--papier);padding:10px 16px;z-index:50}
.sprung:focus{left:12px;top:12px}
.innen{max-width:1120px;margin:0 auto;padding:0 24px}
.text{max-width:68ch}
.innen.text{max-width:1120px}
.innen.text > *{max-width:68ch}
.lead{font-size:1.2rem;font-weight:300;color:var(--grau);max-width:56ch}
mark.ph{background:var(--ph-grund);color:var(--ph-text);padding:0 .25em;border-radius:4px;border-bottom:1px dashed currentColor}

/* ===== Knöpfe ===== */
.knopf{display:inline-block;background:var(--akzent);color:#fff;text-decoration:none;font-weight:500;padding:.8em 1.5em;border-radius:999px;border:2px solid var(--akzent);line-height:1.2;transition:filter .15s}
.knopf:hover{filter:brightness(1.08)}
.knopf-rand{background:transparent;color:var(--tinte);border-color:var(--linie)}
.knopf-rand:hover{border-color:var(--akzent);filter:none}
.knopf-klein{padding:.55em 1.1em;font-size:.95rem;white-space:nowrap}
.welt-farbe .knopf:not(.knopf-rand){background:linear-gradient(100deg,var(--magenta),var(--orange));border-color:transparent}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .knopf:not(.knopf-rand){color:#1D1B19}}
:root[data-theme="dark"] .knopf:not(.knopf-rand){color:#1D1B19}

/* ===== Angebotsleiste ===== */
.angebot-leiste{background:var(--tinte);color:var(--papier);font-size:.95rem}
.angebot-leiste .leiste-innen{max-width:1120px;margin:0 auto;padding:9px 56px 9px 24px;position:relative;text-align:center}
.angebot-leiste a{color:inherit;font-weight:500}
.angebot-leiste button{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:1.4rem;line-height:1;padding:6px 10px;cursor:pointer}

/* ===== Kopfbereich ===== */
.kopf{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie);padding-top:env(safe-area-inset-top,0px)}
.kopf-innen{max-width:1120px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:24px}
.marke{display:flex;align-items:center;gap:10px;margin-right:auto}
.marke img{height:42px;width:auto}
.marke .marke-schrift{height:26px}
.kopf nav{display:flex;align-items:center;gap:22px}
.kopf nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.kopf nav ul a{white-space:nowrap;color:var(--tinte);text-decoration:none;font-size:.97rem;padding:6px 0;border-bottom:2px solid transparent}
.kopf nav ul a:hover,.kopf nav ul a[aria-current="page"]{border-bottom-color:var(--akzent)}
.menue-knopf{display:none;background:none;border:1px solid var(--linie);border-radius:999px;padding:7px 16px;font:inherit;color:var(--tinte);cursor:pointer}
@media (max-width:1100px){
  .menue-knopf{display:block}
  .kopf nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--papier);border-bottom:1px solid var(--linie);flex-direction:column;align-items:flex-start;padding:12px 24px 22px}
  .kopf.offen nav{display:flex}
  .kopf nav ul{flex-direction:column;gap:4px;width:100%}
  .kopf nav ul a{display:block;padding:10px 0;font-size:1.08rem}
}

/* ===== Startseite ===== */
.start-held{padding:56px 0 64px;overflow:hidden}
.start-held .innen{display:grid;grid-template-columns:minmax(240px,420px) 1fr;gap:56px;align-items:center}
.slogan{font-family:var(--titel);font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.02;margin:0 0 .35em}
.slogan span{display:block}
.s-balance{color:var(--gold)} .s-wasser{color:var(--tuerkis)}
.s-farbe{background:linear-gradient(95deg,var(--magenta),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.start-held h1{font-size:clamp(1.3rem,2.2vw,1.65rem);font-family:var(--schrift);font-weight:500;margin-bottom:.6em;max-width:34ch}
.start-held .lead{margin-bottom:1.4em}
.weiche{display:flex;flex-wrap:wrap;gap:12px}
.weiche a{display:flex;flex-direction:column;text-decoration:none;color:var(--tinte);border:1px solid var(--linie);border-radius:14px;padding:14px 20px;min-width:200px}
.weiche a strong{font-weight:600}
.weiche a span{font-size:.9rem;color:var(--grau)}
.weiche a:hover{border-color:var(--tinte)}
.weiche a:first-child{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.weiche a:first-child span{color:color-mix(in srgb,var(--papier) 75%,transparent)}

.welten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.welt{display:flex;flex-direction:column;border-radius:var(--radius);background:var(--akzent-hell);padding:0 26px 28px;overflow:hidden;position:relative}
.welt::before{content:"";height:5px;margin:0 -26px 0;background:var(--akzent)}
.welt.welt-farbe::before{background:linear-gradient(90deg,var(--magenta),var(--orange))}
.welt .kunst{height:190px;display:flex;align-items:center;justify-content:center;margin:12px 0 8px}
.welt .kunst img{max-height:170px;width:auto}
.welt .bereich{font-size:.92rem;color:var(--akzent);font-weight:500;margin-bottom:.3em}
.welt h3{font-size:1.5rem}
.welt p{color:var(--grau)}
.welt .weiter{margin-top:auto;font-weight:500;text-decoration:none;color:var(--tinte);border-bottom:2px solid var(--akzent);align-self:flex-start;padding-bottom:2px}

/* ===== Abschnitte ===== */
.abschnitt{padding:72px 0}
.abschnitt + .abschnitt{border-top:1px solid var(--linie)}
.abschnitt-nebel{background:var(--nebel);border-top:0 !important}
.abschnitt-kopf{margin-bottom:32px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.zwei-schmal{grid-template-columns:1.35fr 1fr}

/* Seitenkopf der Unterseiten */
.seiten-held{background:var(--akzent-hell);padding:60px 0 56px;overflow:hidden;position:relative}
.seiten-held .innen{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.seiten-held .kunst img{max-height:320px;width:auto;margin-left:auto}
.seiten-held .knopfreihe{margin-top:8px}
.seiten-held-schlicht{background:var(--nebel)}
.seiten-held-schlicht .innen{grid-template-columns:1fr}
.welt-farbe .seiten-held{background:linear-gradient(120deg,var(--farbe-hell),color-mix(in srgb,var(--farbe-hell) 60%,var(--papier)))}

/* Leistungsblöcke */
.leistungen{display:grid;gap:0}
.leistung{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:40px;padding:30px 0;border-top:1px solid var(--linie)}
.leistung:first-child{border-top:0;padding-top:0}
.leistung h2,.leistung h3{font-size:1.55rem;margin:0}
.leistung .hinweis{color:var(--grau);font-size:.95rem;margin-top:.4em}

/* Preise */
.preise{margin:0;border-top:1px solid var(--linie)}
.preise div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--linie)}
.preise dt{font-weight:500}
.preise dt small{display:block;font-weight:400;color:var(--grau);font-size:.9rem}
.preise dd{margin:0;white-space:nowrap;font-weight:500}

/* Hinweis-Kästen, Zitat, Liste */
.kasten{background:var(--akzent-hell);border-radius:var(--radius);padding:26px 28px}
.kasten > :last-child{margin-bottom:0}
.zitat{font-family:var(--titel);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.25;color:var(--akzent);margin:0 0 .6em}
.haken{list-style:none;padding:0}
.haken li{position:relative;padding-left:1.6em;margin-bottom:.45em}
.haken li::before{content:"";position:absolute;left:0;top:.62em;width:.62em;height:.62em;border-radius:50%;background:var(--akzent)}

/* Angebote */
.angebot-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),440px));gap:20px}
.angebot-karte{border:1px solid var(--linie);border-left:5px solid var(--akzent);border-radius:var(--radius);padding:24px 26px;background:var(--papier)}
.angebot-karte.welt-farbe{border-left-color:var(--magenta)}
.angebot-frist{font-size:.9rem;color:var(--akzent);font-weight:500;margin-bottom:.3em}
.angebot-preis{font-size:1.25rem;font-weight:500}

/* Handlungsband */
.band{background:var(--tinte);color:var(--papier);border-radius:var(--radius);padding:44px 40px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.band h2{margin-bottom:.25em}
.band p{margin:0;color:color-mix(in srgb,var(--papier) 78%,transparent)}
.band .knopf-rand{color:var(--papier);border-color:color-mix(in srgb,var(--papier) 40%,transparent)}

/* Buchungs-Einbettung (erst nach Klick geladen) */
.einbettung{border:1px dashed var(--linie);border-radius:var(--radius);padding:32px;background:var(--nebel);text-align:center}
.einbettung p{max-width:56ch;margin:0 auto 1em;color:var(--grau);font-size:.95rem}
.einbettung.geladen{padding:0;border:0;background:none}
.einbettung iframe{width:100%;height:880px;border:0;border-radius:var(--radius);background:#fff}

/* Fragen */
.fragen details{border-bottom:1px solid var(--linie);padding:4px 0}
.fragen summary{cursor:pointer;font-weight:500;padding:14px 0;list-style-position:outside}
.fragen details p{color:var(--grau)}

/* Rechtstexte */
.recht h2{font-size:1.45rem;margin-top:1.6em}
.recht h3{font-size:1.15rem;margin-top:1.2em}

/* ===== Fussbereich ===== */
.fuss{background:var(--nebel);margin-top:72px;padding:56px 0 calc(28px + env(safe-area-inset-bottom,0px))}
.fuss-innen{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.fuss h2{font-family:var(--schrift);font-size:.95rem;font-weight:600;margin-bottom:.8em}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.4em}
.fuss a{color:var(--tinte);text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-marke img{height:30px;width:auto;margin-bottom:12px}
.fuss-slogan{font-family:var(--titel);font-size:1.15rem;margin-bottom:.5em}
.fuss-marke p:last-child{color:var(--grau);font-size:.95rem;max-width:36ch}
.fuss-recht{max-width:1120px;margin:40px auto 0;padding:20px 24px 0;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.9rem;color:var(--grau)}
.fuss-recht span{margin-right:auto}

/* ===== Mobil ===== */
@media (max-width:860px){
  .start-held{padding:32px 0 48px}
  .start-held .innen,.zwei,.zwei-schmal,.seiten-held .innen{grid-template-columns:1fr;gap:28px}
  .start-held .innen > img{max-width:260px}
  .welten{grid-template-columns:1fr}
  .weiche a{flex:1 1 100%}
  .leistung{grid-template-columns:1fr;gap:10px}
  .seiten-held .kunst img{max-height:180px;margin:0}
  .band{grid-template-columns:1fr;padding:32px 26px}
  .fuss-innen{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1/-1}
  .abschnitt{padding:52px 0}
  .einbettung iframe{height:760px}
}
@media (prefers-reduced-motion:no-preference){
  .start-held .slogan span{animation:auf .8s cubic-bezier(.2,.7,.2,1) both}
  .start-held .slogan span:nth-child(2){animation-delay:.15s}
  .start-held .slogan span:nth-child(3){animation-delay:.3s}
  @keyframes auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}