@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'),url('/assets/fonts/instrument-serif-latin-400-normal.woff') format('woff');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'),url('/assets/fonts/instrument-serif-latin-400-italic.woff') format('woff');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/fonts/dm-sans-latin-300-normal.woff2') format('woff2'),url('/assets/fonts/dm-sans-latin-300-normal.woff') format('woff');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2'),url('/assets/fonts/dm-sans-latin-400-normal.woff') format('woff');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2'),url('/assets/fonts/dm-sans-latin-500-normal.woff') format('woff');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2'),url('/assets/fonts/dm-sans-latin-700-normal.woff') format('woff');}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/dm-sans-latin-400-italic.woff2') format('woff2'),url('/assets/fonts/dm-sans-latin-400-italic.woff') format('woff');}

:root{
  --ink:#241829; --plum:#3E2C46; --mauve:#7B6285;
  --veil:#EDE8EA; --linen:#EFE7DC; --shell:#FAF8F6; --champ:#C4A57B;
  --line:rgba(62,44,70,.14); --soft:rgba(62,44,70,.08);
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --pad:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--shell);color:var(--plum);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)}
@media(max-width:900px){:root{--pad:24px}body{font-size:16px}}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);
  line-height:1.06;letter-spacing:-.01em}
h1{font-size:clamp(42px,6.6vw,76px)}
.hero .slogan{font-size:clamp(30px,4.0vw,54px);line-height:1.1;text-wrap:balance}
@media(max-width:820px){.hero .slogan{font-size:clamp(32px,9vw,46px);line-height:1.12}
  .hero .slogan .it{display:block}}
h2{font-size:clamp(30px,4.2vw,52px)}
h3{font-size:clamp(22px,2.6vw,34px);line-height:1.14}
h4{font-size:24px;line-height:1.2}
p{max-width:68ch}
em{font-style:italic}
a{color:inherit}
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mauve)}
.lead{font-size:19px;line-height:1.6;max-width:62ch}
.small{font-size:14px}

/* ---------- Navigation ---------- */
nav{position:sticky;top:0;z-index:60;background:rgba(250,248,246,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--soft)}
nav .wrap{display:flex;align-items:center;gap:34px;height:76px}
nav .mark{margin-right:auto;display:flex;align-items:center;gap:15px;cursor:pointer;background:none;border:none;padding:0}
nav .mark svg{height:27px;width:auto;color:var(--ink)}
nav .mark .sig{height:38px}
nav .markrule{width:1px;height:26px;background:var(--line);flex:0 0 auto}
@media(max-width:900px){nav .mark{gap:11px}nav .mark svg{height:22px}nav .mark .sig{height:30px}
  nav .markrule{height:20px}}
nav .nl{font:inherit;font-size:13px;font-weight:500;letter-spacing:.1em;white-space:nowrap;
  text-transform:uppercase;color:var(--mauve);background:none;border:none;
  border-bottom:1px solid transparent;padding:4px 0;cursor:pointer;transition:.18s}
nav .nl:hover,nav .nl.on{color:var(--ink);border-color:var(--ink)}
@media(max-width:900px){nav .wrap{gap:18px;height:64px;overflow-x:auto;scrollbar-width:none}
  nav .wrap::-webkit-scrollbar{display:none} nav .nl{font-size:11.5px;padding:11px 0} nav .btn{display:none}}
@media(max-width:560px){nav .mark svg:last-of-type{display:none} nav .markrule{display:none} nav .mark{gap:0}}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-size:14px;font-weight:500;
  letter-spacing:.06em;padding:15px 30px;border:1px solid var(--ink);background:var(--ink);
  color:var(--shell);cursor:pointer;transition:.2s;text-decoration:none;white-space:nowrap}
.btn:hover{background:transparent;color:var(--ink)}
.on-dark .btn{background:var(--shell);border-color:var(--shell);color:var(--ink)}
.on-dark .btn:hover{background:transparent;color:var(--shell)}
.tlink{display:inline-block;margin-top:18px;font-size:15px;color:var(--mauve);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.tlink:hover{color:var(--ink);border-color:var(--ink)}
.on-dark .tlink{color:rgba(237,232,234,.75);border-color:rgba(237,232,234,.3)}
.on-dark .tlink:hover{color:var(--shell);border-color:var(--shell)}

/* ---------- Sections ---------- */
section{padding:110px 0}
@media(max-width:900px){section{padding:72px 0}}
.s-shell{background:var(--shell)}
.s-veil{background:var(--veil)}
.s-linen{background:var(--linen)}
.s-ink{background:var(--ink);color:var(--veil);position:relative;overflow:hidden}
.s-ink h1,.s-ink h2,.s-ink h3,.s-ink h4{color:var(--shell)}
.s-ink .eyebrow{color:var(--champ)}
.s-ink p{color:rgba(237,232,234,.82)}
.glow{position:absolute;width:900px;height:900px;right:-260px;top:-420px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,98,133,.45) 0%,rgba(36,24,41,0) 68%);pointer-events:none}
.s-ink .wrap{position:relative;z-index:1}

/* ---------- Hero ---------- */
.hero{padding:132px 0 118px}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center}
.hero .hero-grid{grid-template-columns:1.35fr .65fr;gap:56px}
@media(max-width:900px){.hero .hero-grid{grid-template-columns:1fr;gap:40px}}
@media(max-width:900px){.hero{padding:76px 0 68px}.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero .kw{display:block;font-family:var(--sans);font-size:clamp(15px,1.45vw,19px);
  font-weight:400;letter-spacing:.01em;line-height:1.45;color:rgba(237,232,234,.78);
  margin-top:20px;max-width:none}
.hero .hero-grid{align-items:center}
.hero .portrait{aspect-ratio:4/5}
.portrait.filled{border:none;background:none;padding:0;overflow:hidden;
  box-shadow:0 30px 78px rgba(0,0,0,.48), 0 6px 18px rgba(0,0,0,.26)}
.portrait.filled.soft{box-shadow:none}
.portrait.filled img{width:100%;height:100%;object-fit:cover;display:block}
h1 .it{color:var(--champ)}
.portrait{aspect-ratio:4/5;background:rgba(237,232,234,.07);
  border:1px dashed rgba(237,232,234,.28);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px;font-size:13px;
  color:rgba(237,232,234,.5);letter-spacing:.04em}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--shell);padding:34px 32px;display:flex;flex-direction:column}
.s-veil .card,.s-linen .card{background:var(--shell)}
.card h4{margin-bottom:14px}
.card p{font-size:16px}
.card .meta{margin-top:auto;padding-top:20px;border-top:1px solid var(--soft);
  font-size:14.5px;color:var(--mauve);line-height:1.55}
.card .price{font-family:var(--serif);font-size:30px;color:var(--ink);display:block;margin-top:4px}

.head{margin-bottom:48px;max-width:70ch}
.head .eyebrow{display:block;margin-bottom:18px}
.head h2+p{margin-top:18px}

ul.arrows{list-style:none;margin-top:18px}
ul.arrows li{font-size:16px;padding:10px 0 10px 26px;position:relative;
  border-bottom:1px solid var(--soft);line-height:1.5}
ul.arrows li:last-child{border-bottom:none}
ul.arrows li::before{content:"→";position:absolute;left:0;color:var(--champ)}
.s-ink ul.arrows li{border-color:rgba(237,232,234,.14);color:rgba(237,232,234,.85)}

/* ---------- Beliefs ---------- */
.beliefs li{font-family:var(--serif);font-size:clamp(21px,2.3vw,29px);
  line-height:1.3;color:var(--ink);padding:22px 0;border-bottom:1px solid var(--line);list-style:none}
.beliefs li:last-child{border-bottom:none}

/* ---------- Table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;margin-top:8px}
.tbl th,.tbl td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font-family:var(--serif);font-size:20px;color:var(--ink);font-weight:400}
.tbl tbody th{font-weight:500;color:var(--mauve);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;width:26%}
@media(max-width:900px){.tbl{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  footer a,footer button{padding:11px 0} .tlink{padding-bottom:8px}}
.tblhint{display:none}
@media(max-width:900px){.tblhint{display:block;font-size:13.5px;color:var(--mauve);margin:0 0 12px}}

/* ---------- Stimmen ---------- */
.quote{border:1px solid var(--line);background:var(--shell);padding:32px}
.quote .q{font-family:var(--serif);font-size:23px;line-height:1.3;color:var(--ink)}
.quote .who{display:flex;align-items:center;gap:14px;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--soft)}
.quote .av{width:54px;height:54px;border-radius:50%;background:var(--veil);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--mauve);overflow:hidden}
.quote .av.filled{background:none}
.quote .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.quote .who b{display:block;font-weight:500;font-size:15.5px;color:var(--ink)}
.quote details{margin-top:18px}
.quote summary{font-size:14px;color:var(--mauve);cursor:pointer;list-style:none}
.quote summary::-webkit-details-marker{display:none}
.quote summary::before{content:"+ ";}
.quote details[open] summary::before{content:"– ";}
.quote details p{font-size:15.5px;margin-top:14px}
.quote details p+p{margin-top:12px}

/* ---------- Platzhalter ---------- */
.ph{border:1px dashed var(--mauve);background:rgba(123,98,133,.05);padding:20px 22px;
  font-size:14.5px;color:var(--mauve);line-height:1.55}
.ph b{color:var(--plum)}
.shots{column-count:3;column-gap:18px;margin-top:28px}
@media(max-width:900px){.shots{column-count:2;column-gap:14px}}
@media(max-width:560px){.shots{column-count:1}}
.shot{break-inside:avoid;margin:0 0 18px;border:1px solid var(--line);background:var(--shell);
  overflow:hidden;display:block}
.shot img{display:block;width:100%;height:auto}
.shot.legacy{aspect-ratio:4/3;border:1px dashed var(--mauve);background:rgba(123,98,133,.05);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;
  font-size:12.5px;color:var(--mauve);line-height:1.4}

/* ---------- Newsletter-Streifen ---------- */
.nlbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.nlform{display:flex;gap:12px;margin-top:22px;max-width:520px;flex-wrap:wrap}
.nlform input{flex:1;min-width:220px;font:inherit;font-size:16px;padding:14px 16px;
  border:1px solid var(--line);background:var(--shell);color:var(--plum)}
.nlform input:focus{outline:none;border-color:var(--plum)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:12px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
.step .n{font-family:var(--serif);font-size:40px;color:var(--champ);line-height:1;display:block;margin-bottom:12px}
.step h4{font-size:19px;margin-bottom:8px}
.step p{font-size:15.5px}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{font-family:var(--serif);font-size:22px;color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mauve);font-family:var(--sans);font-size:22px}
.faq details[open] summary::after{content:"–"}
.faq details p,.faq details .ph{margin-top:16px}

footer{background:var(--ink);color:rgba(237,232,234,.6);padding:64px 0 48px;font-size:14.5px}
footer .row{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
footer svg{height:44px;width:auto;color:var(--shell)}
footer a,footer button{color:rgba(237,232,234,.6);text-decoration:none;display:block;padding:5px 0;
  background:none;border:none;font:inherit;cursor:pointer;text-align:left}
footer a:hover,footer button:hover{color:var(--shell)}
footer .cl{font-family:var(--serif);font-size:19px;color:var(--shell);margin-top:8px}


/* ---------- Rechtsseiten ---------- */
.legal{max-width:820px}
.legal h2{font-size:clamp(23px,2.4vw,30px);margin:0 0 16px}
.legal .blk{padding-top:38px;margin-top:38px;border-top:1px solid var(--line)}
.legal h3{font-family:var(--serif);font-size:21px;margin:28px 0 8px;color:var(--ink)}
.legal p{font-size:16px;margin-top:13px;max-width:none}
.legal ul.arrows{margin-top:12px}
.legal ul.arrows li{font-size:15.5px}
.legal .adr{font-size:16px;line-height:1.75;margin-top:14px;color:var(--ink)}
.legal .num{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mauve);display:block;margin-bottom:12px}
.pl{background:rgba(196,165,123,.3);box-shadow:0 1px 0 var(--champ);padding:0 4px;color:var(--plum);font-weight:500}
.note{border-left:2px solid var(--champ);padding:2px 0 2px 18px;margin-top:20px;
  font-size:14.5px;color:var(--mauve);line-height:1.55}
.note b{color:var(--plum)}
.warn{border:1px solid var(--champ);background:rgba(196,165,123,.09);padding:26px 28px;margin-top:34px}
.warn p{font-size:15.5px;margin-top:10px}
.warn p:first-child{margin-top:0}
.legal .toc{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-size:14px;color:var(--mauve)}
.legal .toc a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.legal .toc a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- Noch nicht aktiv (Rechtsseiten) ---------- */
.legal .blk.soon{background:rgba(123,98,133,.05);border:1px dashed var(--mauve);
  border-top:1px dashed var(--mauve);padding:32px 30px 34px;margin-top:38px}
.legal .blk.soon .num{color:var(--plum)}
.legal .blk.soon>p,.legal .blk.soon .adr,.legal .blk.soon h3{opacity:.55}
.legal .blk.soon>p.soonnote,.legal .blk.soon>p.note{opacity:1}
.soonnote{border:1px solid var(--champ);background:rgba(196,165,123,.16);
  padding:16px 18px;font-size:15px;color:var(--plum);margin-top:14px}

/* ---------- Newsletter: coming soon ---------- */
.nl-soon-el{display:none}
body.nl-soon .nl-live{display:none}
body.nl-soon .nl-soon-el{display:block}
body.nl-soon span.nl-soon-el{display:inline-flex !important}
.soonbadge{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:11px;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--champ)}
.soonbadge::before{content:"";width:7px;height:7px;background:var(--champ);border-radius:50%;flex:0 0 auto}
.s-shell .soonbadge,.s-linen .soonbadge{color:var(--mauve)}
.s-shell .soonbadge::before,.s-linen .soonbadge::before{background:var(--champ)}

/* ---------- Zwei-Klick-Lösung für den Terminkalender ---------- */
.embed{border:1px solid var(--line);background:var(--shell);padding:48px 36px;text-align:center}
.embed h4{margin-bottom:12px}
.embed p{font-size:15.5px;color:var(--mauve);max-width:52ch;margin:0 auto}
.embed .btn{margin-top:26px}
.embed .fine{font-size:13.5px;margin-top:18px}
.embed .frame{width:100%;min-height:660px;border:none;display:block}
/* ---------- Alltagsbilder ---------- */
.alltag{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.alltag img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
@media(max-width:900px){.alltag{gap:10px}}



/* ---------- Produktivfassung: Links statt Buttons ---------- */
nav .nl{text-decoration:none;display:inline-block}
nav .mark{text-decoration:none}
a.btn,a.tlink{text-decoration:none}
main{display:block}