@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant.woff2") format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-italic.woff2") format("woff2-variations");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken.woff2") format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --paper:#FBF8F2;
  --paper-2:#F3ECE0;
  --ink:#1B1813;
  --ink-soft:#4A453D;
  --muted:#8C8475;
  --brass:#A47E48;
  --brass-deep:#8A6736;
  --line:#E2D9C9;
  --line-soft:#ECE4D6;
  --shadow:28px 40px 80px -40px rgba(40,32,18,.35);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Hanken Grotesk", system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
::selection{background:var(--brass);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;color:var(--brass-deep);display:inline-flex;align-items:center;gap:.9em}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em}
.sec-no{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:1.2rem}

/* NAV */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .5s ease,box-shadow .5s ease,padding .4s ease;padding:26px 0}
header.scrolled{background:rgba(251,248,242,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:16px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:clamp(30px,4.5vw,72px)}
.brand{font-family:var(--serif);font-size:1.55rem;letter-spacing:.18em;font-weight:500;color:var(--ink);transition:color .4s;white-space:nowrap;flex-shrink:0}
.brand small{display:block;font-family:var(--sans);font-size:.52rem;letter-spacing:.4em;color:var(--muted);margin-top:2px;font-weight:500}
header.transparent:not(.scrolled) .brand,header.transparent:not(.scrolled) .nav-links a{color:var(--paper)}
header.transparent:not(.scrolled) .brand small{color:rgba(251,248,242,.7)}
.nav-links{display:flex;align-items:center;gap:clamp(22px,2.3vw,38px);flex-shrink:0}
.nav-links a{font-size:.82rem;letter-spacing:.05em;color:var(--ink-soft);transition:color .3s;position:relative}
.nav-links a.cta{border:1px solid currentColor;padding:11px 22px;border-radius:2px;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;font-weight:500}
header.scrolled .nav-links a.cta{border-color:var(--brass);color:var(--brass-deep)}
.nav-links a:not(.cta):hover{color:var(--brass)}
.nav-links a.cta:hover,.nav-links a.cta:focus-visible{background:var(--brass-deep);border-color:var(--brass-deep);color:var(--paper)}
/* Auf dem dunklen Hero ist die Umkehr auf Papier der staerkste Kontrast. */
header.transparent:not(.scrolled) .nav-links a.cta:hover,header.transparent:not(.scrolled) .nav-links a.cta:focus-visible{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:6px;color:var(--ink)}
.burger span{width:26px;height:1.5px;background:currentColor;transition:.3s}
header.transparent:not(.scrolled) .burger{color:var(--paper)}

/* BUTTONS */
.btn{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:16px 32px;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:.35s;display:inline-block;text-align:center}
.btn-solid{background:var(--brass);color:#fff}
.btn-solid:hover{background:var(--ink);color:#fff}
.btn-ghost{border-color:rgba(251,248,242,.55);color:var(--paper)}
.btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-dark{border-color:var(--ink);color:var(--ink)}
.btn-dark:hover{background:var(--ink);color:var(--paper)}

/* HERO (home) */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;color:var(--paper);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;transform:scale(1.08);animation:slowzoom 14s ease-out forwards}
@keyframes slowzoom{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,16,10,.55) 0%,rgba(20,16,10,.18) 32%,rgba(20,16,10,.5) 72%,rgba(16,12,8,.82) 100%)}
.hero-inner{padding-bottom:8vh;padding-top:140px;width:100%}
.hero .eyebrow{color:#E7C893}.hero .eyebrow::before{background:#E7C893}
.hero h1{font-size:clamp(3rem,7.4vw,6.6rem);margin:.28em 0 .42em;max-width:15ch;font-weight:500}
.hero h1 em{font-style:italic;color:#EBCF9A}
.hero-lead{max-width:46ch;font-size:1.12rem;color:rgba(251,248,242,.9);font-weight:300}
.hero-actions{display:flex;gap:18px;align-items:center;margin-top:38px;flex-wrap:wrap}
.hero-meta{position:absolute;right:40px;bottom:8vh;writing-mode:vertical-rl;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(251,248,242,.6)}

/* SUBPAGE HERO */
.subhero{position:relative;min-height:62vh;display:flex;align-items:flex-end;color:var(--paper);overflow:hidden}
.subhero-bg{position:absolute;inset:0;z-index:-2}
.subhero-bg img{width:100%;height:100%;object-fit:cover}
.subhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,16,10,.5),rgba(16,12,8,.78))}
.subhero-inner{padding:170px 0 64px;width:100%}
.subhero .eyebrow{color:#E7C893}.subhero .eyebrow::before{background:#E7C893}
.subhero h1{font-size:clamp(2.6rem,5.5vw,4.6rem);margin:.3em 0 .35em;max-width:18ch}
.subhero h1 em{font-style:italic;color:#EBCF9A}
.subhero p{max-width:50ch;color:rgba(251,248,242,.9);font-weight:300;font-size:1.08rem}
.crumb{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,242,.6)}
.crumb a:hover{color:#E7C893}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* SECTION */
section{position:relative;z-index:2}
.pad{padding:130px 0}
.pad-s{padding:90px 0}
.offer-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:64px}
.offer-head h2{font-size:clamp(2rem,3.6vw,3.2rem);max-width:18ch}
.offer-head p{color:var(--ink-soft);max-width:36ch;font-weight:300}
.lead{color:var(--ink-soft);font-size:1.1rem;font-weight:300;max-width:60ch}

/* INTRO / SPLIT */
.intro{background:var(--paper)}
.intro-grid,.split{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:center}
.split.rev .split-text{order:2}
.intro h2,.split h2{font-size:clamp(2rem,3.6vw,3.2rem);margin:.4em 0 .6em;max-width:18ch}
.intro h2 em,.split h2 em{font-style:italic;color:var(--brass-deep)}
.intro p,.split p{color:var(--ink-soft);font-size:1.05rem;max-width:48ch;font-weight:300;margin-bottom:1.4em}
.intro-figure,.split-figure{position:relative}
.intro-figure img,.split-figure img{width:100%;border-radius:3px;box-shadow:var(--shadow);object-fit:cover;aspect-ratio:4/5}
.split-figure.wide img{aspect-ratio:4/3}
.intro-figure figcaption{position:absolute;left:-28px;bottom:30px;background:var(--paper);padding:18px 26px;border-left:2px solid var(--brass);box-shadow:var(--shadow)}
.intro-figure figcaption b{font-family:var(--serif);font-size:2.4rem;color:var(--ink);font-weight:500;display:block;line-height:1}
.intro-figure figcaption span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* CHECK LIST */
.checks{list-style:none;margin:1.4em 0 2em}
.checks li{font-size:1rem;color:var(--ink-soft);padding:11px 0;border-top:1px solid var(--line-soft);display:flex;gap:12px;font-weight:300}
.checks li::before{content:"✓";color:var(--brass);font-weight:600}

/* OFFER CARDS */
.offer{background:var(--paper-2)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.card{background:var(--paper);border:1px solid var(--line-soft);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.card-img{overflow:hidden;aspect-ratio:3/2}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img img{transform:scale(1.06)}
.card-body{padding:34px 30px 36px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.9rem;margin-bottom:.35em}
.card .price{font-family:var(--serif);color:var(--brass-deep);font-size:1.15rem;font-style:italic;margin-bottom:1em}
.card p{color:var(--ink-soft);font-size:.95rem;font-weight:300;margin-bottom:1.6em;flex:1}
.card ul{list-style:none;margin-bottom:1.8em}
.card li{font-size:.88rem;color:var(--ink-soft);padding:7px 0;border-top:1px solid var(--line-soft);display:flex;gap:10px}
.card li::before{content:"—";color:var(--brass)}
.card-link{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);display:inline-flex;gap:9px;align-items:center;transition:gap .3s,color .3s}
.card-link:hover{gap:16px;color:var(--brass)}

/* WHY (dark) */
.why{background:var(--ink);color:var(--paper);overflow:hidden;position:relative}
.why::before{content:"";position:absolute;top:-30%;right:-10%;width:60%;height:160%;background:radial-gradient(circle,rgba(164,126,72,.18),transparent 60%);pointer-events:none}
.why .eyebrow{color:#E7C893}.why .eyebrow::before{background:#E7C893}
.why h2{font-size:clamp(2rem,3.6vw,3.2rem);color:var(--paper);max-width:20ch;margin:.4em 0 .8em}
.why-lead{color:rgba(251,248,242,.72);max-width:54ch;font-weight:300;margin-bottom:72px}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(251,248,242,.12);border:1px solid rgba(251,248,242,.12)}
.feat{background:var(--ink);color:var(--paper);padding:38px 30px;transition:background .4s}
.feat:hover{background:#23201a}
.feat .n{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:1.4rem;margin-bottom:.7em}
.feat h4{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin-bottom:.4em;color:inherit}
.feat p{font-size:.88rem;color:rgba(251,248,242,.65);font-weight:300}
.feat.light{background:var(--paper);color:var(--ink)}
.feat.light:hover{background:var(--paper-2)}
.feat.light .n{color:var(--brass-deep)}
.feat.light p{color:var(--ink-soft)}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:step}
.step{padding:34px 30px;border:1px solid var(--line);border-radius:3px;background:var(--paper)}
.step .n{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:2.2rem;display:block;margin-bottom:.3em}
.step h4{font-family:var(--serif);font-size:1.6rem;font-weight:500;margin-bottom:.3em}
.step p{color:var(--ink-soft);font-size:.94rem;font-weight:300}

/* GALLERY */
.gallery{background:var(--paper)}
.gal-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:180px;gap:18px}
.gal-grid figure{overflow:hidden;border-radius:3px;position:relative}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gal-grid figure:hover img{transform:scale(1.07)}
.g1{grid-column:span 5;grid-row:span 2}.g2{grid-column:span 4}.g3{grid-column:span 3;grid-row:span 2}
.g4{grid-column:span 4}.g5{grid-column:span 4}.g6{grid-column:span 5}.g7{grid-column:span 3}

/* PRICING */
.pricing{background:var(--paper-2)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:44px 36px;display:flex;flex-direction:column;position:relative}
.plan.feature{border-color:var(--brass);box-shadow:var(--shadow)}
.plan .tag{position:absolute;top:-13px;left:36px;background:var(--brass);color:#fff;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:6px 14px;border-radius:2px;font-weight:600}
.plan h3{font-size:1.8rem;margin-bottom:.2em}
.plan .sub{color:var(--muted);font-size:.82rem;letter-spacing:.04em;margin-bottom:1.4em}
.plan .amt{font-family:var(--serif);font-size:3.4rem;color:var(--ink);font-weight:500;line-height:1}
.plan .amt small{font-size:1rem;color:var(--muted);font-family:var(--sans);font-weight:400}
.plan .from{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:1.6em;display:block;margin-top:.5em}
.plan ul{list-style:none;margin-bottom:2.2em;flex:1}
.plan li{font-size:.9rem;color:var(--ink-soft);padding:11px 0;border-bottom:1px solid var(--line-soft);display:flex;gap:11px;font-weight:300}
.plan li::before{content:"✓";color:var(--brass);font-weight:600}
.plan:not(.feature) .btn{background:transparent;border-color:var(--ink);color:var(--ink)}
.plan:not(.feature) .btn:hover{background:var(--ink);color:var(--paper)}
.price-note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:34px;font-weight:300}

/* TABLE (pricing detail) */
.ptable{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.ptable th,.ptable td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--line-soft);font-size:.95rem}
.ptable th{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--paper-2)}
.ptable td.num{font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.ptable tr:last-child td{border-bottom:0}

/* TESTIMONIALS */
.quotes{background:var(--paper)}
.q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.q{padding:42px 36px;border:1px solid var(--line-soft);border-radius:3px;background:var(--paper);position:relative}
.q .mark{font-family:var(--serif);font-size:5rem;color:var(--brass);opacity:.25;line-height:.6;height:.4em}
.q p{font-family:var(--serif);font-size:1.35rem;line-height:1.4;color:var(--ink);font-style:italic;margin-bottom:1.4em;font-weight:400}
.q .who{font-size:.82rem;letter-spacing:.04em;color:var(--ink)}
.q .who b{font-weight:600;display:block}
.q .who span{color:var(--muted)}
.gtrust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin-top:46px;font-size:.95rem;color:var(--ink-soft);text-align:center}
.gtrust .stars{position:relative;display:inline-block;font-size:1.1rem;line-height:1;letter-spacing:.1em}
.gtrust .stars-bg{color:var(--line)}
.gtrust .stars-fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--brass-deep)}
.gtrust b{color:var(--ink);font-weight:600}
.gtrust a{color:var(--brass-deep);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .3s}
.gtrust a:hover{color:var(--ink)}

/* IMAGEFILM, laedt erst auf Klick */
.film-block{margin-top:80px}
@media(max-width:900px){.film-block{margin-top:48px}}
.film-frame{position:relative;border-radius:3px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;background:var(--ink)}
.film-frame img{width:100%;height:100%;object-fit:cover;display:block}
.film-frame iframe{width:100%;height:100%;border:0;display:block}
.film-play{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;background:linear-gradient(180deg,rgba(27,24,19,.05),rgba(27,24,19,.45));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--paper);font-family:var(--sans);transition:background .4s}
.film-play:hover{background:linear-gradient(180deg,rgba(27,24,19,.15),rgba(27,24,19,.6))}
.film-play svg{width:34px;height:34px;fill:var(--ink);background:var(--paper);border-radius:50%;padding:8px 6px 8px 10px;box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.film-play:hover svg{transform:scale(1.08)}
.film-play span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:14px;background:rgba(27,24,19,.78);color:var(--paper);padding:11px 22px;border-radius:999px;backdrop-filter:blur(2px)}
.film-play span b{font-weight:400;color:#E7C893;font-variant-numeric:lining-nums;letter-spacing:.08em}
.film-hinweis{margin-top:18px;font-size:.82rem;color:var(--muted);text-align:center}
.film-hinweis a{color:var(--brass-deep);text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.film-play span{font-size:.66rem;letter-spacing:.12em}}

/* CTA BAND */
.band{background:var(--ink);color:var(--paper);text-align:center;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(164,126,72,.22),transparent 60%)}
.band .wrap{position:relative}
.band h2{font-size:clamp(2rem,4vw,3.4rem);color:var(--paper);margin-bottom:.4em;max-width:20ch;margin-inline:auto}
.band h2 em{font-style:italic;color:#EBCF9A}
.band p{color:rgba(251,248,242,.75);font-weight:300;max-width:48ch;margin:0 auto 34px}

/* CONTACT */
.contact{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.contact.bgimg::before{content:"";position:absolute;inset:0;background:url("img/empfang.webp") center/cover;opacity:.10}
.contact .wrap{position:relative}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.contact .eyebrow{color:#E7C893}.contact .eyebrow::before{background:#E7C893}
.contact h2{font-size:clamp(2.2rem,4vw,3.6rem);color:var(--paper);margin:.4em 0 .5em;max-width:14ch}
.contact h2 em{font-style:italic;color:#EBCF9A}
.contact-lead{color:rgba(251,248,242,.75);font-weight:300;max-width:42ch;margin-bottom:36px}
.contact-info{display:flex;flex-direction:column;gap:18px;margin-top:10px}
.contact-info a,.contact-info div{display:flex;align-items:center;gap:14px;color:var(--paper);font-size:1rem}
.contact-info .lbl{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);width:70px;font-weight:600}
form{background:rgba(251,248,242,.04);border:1px solid rgba(251,248,242,.16);border-radius:3px;padding:40px}
form.light{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.field{margin-bottom:20px}
.field label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,242,.6);margin-bottom:8px}
form.light .field label{color:var(--muted)}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(251,248,242,.28);color:var(--paper);font-family:var(--sans);font-size:1rem;padding:10px 0;transition:border-color .3s}
form.light .field input,form.light .field textarea{border-bottom-color:var(--line);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--brass)}
.field textarea{resize:vertical;min-height:70px}
form .btn-solid{width:100%;border:0;font-family:var(--sans);margin-top:8px}
.form-fine{font-size:.72rem;color:rgba(251,248,242,.45);margin-top:16px;font-weight:300}
form.light .form-fine{color:var(--muted)}

/* FOOTER */
footer{background:#141009;color:rgba(251,248,242,.6);padding:70px 0 40px;font-size:.86rem}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(251,248,242,.12)}
.foot-brand{font-family:var(--serif);font-size:1.6rem;letter-spacing:.18em;color:var(--paper)}
.foot-brand small{display:block;font-family:var(--sans);font-size:.55rem;letter-spacing:.36em;color:var(--muted);margin-top:4px}
.foot-cols{display:flex;gap:70px;flex-wrap:wrap}
.foot-col h5{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.foot-col a{display:block;color:rgba(251,248,242,.6);padding:4px 0;transition:color .3s}
.foot-col a:hover{color:var(--paper)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:28px;color:var(--muted);font-size:.78rem}

/* ===== LANDING PAGE specifics ===== */
.lp-header{position:absolute;top:0;left:0;right:0;z-index:50;padding:24px 0}
.lp-header .nav{align-items:center}
.lp-header .brand{color:var(--paper)}
.lp-phone{color:var(--paper);font-size:1rem;display:flex;align-items:center;gap:10px;font-weight:500}
.lp-phone .lbl{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#E7C893}
.lp-hero{position:relative;min-height:100vh;display:flex;align-items:center;color:var(--paper);overflow:hidden}
.lp-hero-bg{position:absolute;inset:0;z-index:-2}
.lp-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.lp-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(16,12,8,.88) 0%,rgba(16,12,8,.6) 48%,rgba(16,12,8,.25) 100%)}
.lp-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;width:100%;padding-top:80px}
.lp-hero .eyebrow{color:#E7C893}.lp-hero .eyebrow::before{background:#E7C893}
.lp-hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem);margin:.3em 0 .4em}
.lp-hero h1 em{font-style:italic;color:#EBCF9A}
.lp-hero .sub{font-size:1.15rem;color:rgba(251,248,242,.9);font-weight:300;max-width:46ch;margin-bottom:30px}
.lp-usp{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.lp-usp li{display:flex;align-items:center;gap:12px;font-size:1.02rem;color:#fff}
.lp-usp li::before{content:"✓";color:#E7C893;font-weight:700;font-size:1.1rem}
.lp-card{background:var(--paper);border-radius:4px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);padding:38px 34px}
.lp-card h3{font-size:1.7rem;margin-bottom:.15em;color:var(--ink)}
.lp-card .ck{color:var(--brass-deep);font-style:italic;font-family:var(--serif);font-size:1.05rem;margin-bottom:1.3em}
.lp-card .field label{color:var(--muted)}
.lp-card .field input,.lp-card .field textarea{border-bottom-color:var(--line);color:var(--ink)}
.lp-card .btn-solid{width:100%;border:0}
.lp-card .fine{font-size:.72rem;color:var(--muted);margin-top:14px;font-weight:300;text-align:center}
.trustbar{background:var(--ink);color:rgba(251,248,242,.8);padding:22px 0}
.trustbar .wrap{display:flex;justify-content:center;gap:46px;flex-wrap:wrap;font-size:.86rem;letter-spacing:.02em}
.trustbar b{color:#E7C893;font-weight:600}
.lp-proof{background:var(--paper-2)}
.lp-cta-final{background:var(--brass);color:#fff;text-align:center}
.lp-cta-final h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem);margin-bottom:.3em}
.lp-cta-final p{color:rgba(255,255,255,.85);margin-bottom:30px;font-weight:300}
.lp-cta-final .btn{background:var(--ink);color:#fff}
.lp-cta-final .btn:hover{background:#fff;color:var(--ink)}
.lp-foot{background:#141009;color:var(--muted);text-align:center;padding:34px 0;font-size:.8rem}
.lp-foot a{color:var(--muted)}

/* RESPONSIVE */
@media(max-width:980px){
  .intro-grid,.split,.contact-grid,.lp-hero-grid{grid-template-columns:1fr;gap:48px}
  .split.rev .split-text{order:0}
  .cards,.q-grid,.price-grid,.steps{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .intro-figure,.split.rev .split-figure{order:-1}
  .gal-grid{grid-auto-rows:140px}
}
@media(max-width:680px){
  .wrap{padding:0 22px}
  .pad{padding:84px 0}.pad-s{padding:64px 0}
  .nav-links{display:none}
  .burger{display:flex}
  .nav-links.open{display:flex;position:fixed;inset:0;background:var(--paper);flex-direction:column;justify-content:center;align-items:center;gap:30px;z-index:60}
  .nav-links.open a{color:var(--ink)!important;font-size:1.1rem}
  .feat-grid{grid-template-columns:1fr}
  .gal-grid{display:flex;flex-direction:column}.gal-grid figure{height:240px}
  .hero-meta,.lp-phone .lbl{display:none}
  .intro-figure figcaption{left:0}
  .hero h1{font-size:clamp(2.6rem,11vw,3.4rem)}
  .trustbar .wrap{gap:18px;font-size:.78rem}
}

/* 2x2 price grid variant */
.price-grid.cols2{grid-template-columns:repeat(2,1fr);max-width:900px;margin-inline:auto}
@media(max-width:980px){.price-grid.cols2{grid-template-columns:1fr}}

/* ===== FAQ ===== */
.faq-wrap{background:var(--paper)}
.faq{max-width:840px;margin:0 auto}
.faq details{border-top:1px solid var(--line);padding:6px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 4px;font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;color:var(--brass);font-size:1.8rem;transition:transform .3s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 4px 26px;color:var(--ink-soft);font-weight:300;font-size:1.02rem;max-width:64ch}

/* ===== ARTICLE / RATGEBER ===== */
.article{max-width:740px;margin:0 auto}
.article .kicker{margin-bottom:1.4em}
.article h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.05;margin-bottom:.3em}
.article .meta-line{color:var(--muted);font-size:.85rem;letter-spacing:.04em;margin-bottom:2.4em;border-bottom:1px solid var(--line);padding-bottom:1.6em}
.article h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:500;margin:1.6em 0 .5em}
.article h3{font-family:var(--serif);font-size:1.4rem;font-weight:500;margin:1.3em 0 .4em}
.article p{color:var(--ink-soft);font-size:1.08rem;font-weight:300;margin-bottom:1.2em;line-height:1.7}
.article ul,.article ol{margin:0 0 1.4em 1.2em;color:var(--ink-soft);font-weight:300}
.article li{margin-bottom:.5em;line-height:1.6;padding-left:.3em}
.article strong{font-weight:600;color:var(--ink)}
.article blockquote{border-left:2px solid var(--brass);padding:.4em 0 .4em 1.4em;margin:1.6em 0;font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--ink)}
.article .cta-inline{margin:2.4em 0;padding:32px 34px;background:var(--paper-2);border-left:2px solid var(--brass);border-radius:3px}
.article .cta-inline p{margin-bottom:1em;color:var(--ink)}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.acard{display:block;border:1px solid var(--line-soft);border-radius:3px;overflow:hidden;background:var(--paper);transition:transform .4s,box-shadow .4s}
.acard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.acard .ac-img{aspect-ratio:16/10;overflow:hidden}
.acard .ac-img img{width:100%;height:100%;object-fit:cover}
.acard .ac-body{padding:26px 26px 30px}
.acard h3{font-size:1.45rem;margin-bottom:.3em}
.acard p{color:var(--ink-soft);font-size:.92rem;font-weight:300}
@media(max-width:880px){.cardgrid{grid-template-columns:1fr}}

/* ============================================================
   AUDIT 09/2026: heller zweispaltiger Hero, Kontrast, Ziffern
   ============================================================ */

/* Zweispaltiger Hero: Papier links, Tageslichtbild rechts.
   Entspricht der Flyer-Konstruktion und loest das Kontrastproblem,
   ohne das helle Bild wieder abdunkeln zu muessen. */
.hero-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:stretch;background:var(--paper);border-bottom:1px solid var(--line);
}
.hs-text{display:flex;align-items:center;padding:150px 0 70px}
.hs-inner{max-width:560px;margin-left:auto;padding:0 56px 0 40px;width:100%}
.hs-text h1{
  font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(2.5rem,4.4vw,4.1rem);line-height:1.03;letter-spacing:-.015em;
  margin:.3em 0 .38em;text-wrap:balance;
}
.hs-text h1 em{font-style:italic;color:var(--brass-deep)}
.hs-lead{max-width:44ch;font-size:1.08rem;color:var(--ink-soft)}
.hs-facts{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.hs-facts li{
  position:relative;padding-left:22px;font-size:.97rem;color:var(--ink-soft);
  font-variant-numeric:lining-nums tabular-nums;
}
.hs-facts li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--brass);
}
.hs-facts b{color:var(--ink);font-weight:600}
.hs-actions{display:flex;gap:14px;align-items:center;margin-top:34px;flex-wrap:wrap}
.hs-avail{
  margin-top:22px;font-size:.9rem;color:var(--ink-soft);
  display:flex;align-items:center;gap:9px;
}
.hs-avail .dot{
  width:8px;height:8px;border-radius:50%;background:#4A6B4F;flex:none;
  box-shadow:0 0 0 3px rgba(74,107,79,.16);
}
.hs-img{position:relative;min-height:560px}
.hs-img img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 55%;
}

@media (max-width:1080px){
  .hs-inner{padding:0 34px;max-width:none}
  .hs-text{padding:130px 0 56px}
}
@media (max-width:860px){
  .hero-split{grid-template-columns:1fr}
  .hs-img{order:-1;min-height:0;aspect-ratio:16/10}
  .hs-text{padding:34px 0 48px}
  .hs-inner{padding:0 22px}
  .hs-actions .btn{width:100%;text-align:center}
}

/* Kontrast: Messing auf Weiss lag bei 3,71:1, jetzt 5,15:1 */
.btn-solid{background:var(--brass-deep)}
.btn-solid:hover{background:var(--ink)}

/* Preise in Versalziffern, Mediaevalziffern verlangsamen das Erfassen */
.plan .amt,.card .price,.ptable td,.price-note,.hs-facts,.pill{
  font-variant-numeric:lining-nums tabular-nums;
}

/* Telefonnummer im Kopfbereich, auf Mobil der wichtigste Weg */
.nav-tel{
  font-size:.82rem;letter-spacing:.02em;color:var(--ink-soft);
  font-variant-numeric:lining-nums;white-space:nowrap;
}
.nav-tel:hover{color:var(--brass-deep)}
.nav-tel b{font-weight:600;color:var(--ink)}

/* Feste Aktionsleiste auf Mobil: anrufen oder Termin, immer erreichbar */
.mobile-bar{display:none}
@media (max-width:860px){
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--paper);border-top:1px solid var(--line);
    box-shadow:0 -6px 24px -18px rgba(40,32,18,.6);
  }
  .mobile-bar a{
    padding:15px 10px;text-align:center;font-size:.8rem;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;min-height:52px;
    display:flex;align-items:center;justify-content:center;
  }
  .mobile-bar .call{background:var(--brass-deep);color:#fff}
  .mobile-bar .visit{color:var(--ink)}
  body{padding-bottom:52px}
}

/* Groessere Beruehrungsziele */
@media (max-width:860px){
  .burger{padding:11px}
  .foot-col a{padding:9px 0;display:block}
  .field input,.field textarea{min-height:46px}
}

/* Ohne Bewegungswunsch keine Einblendanimation */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
}

/* Ansprechpartner: bei einer persoenlichen Entscheidung wirkt ein Gesicht
   staerker als jedes Fullservice-Versprechen. */
.person{
  display:flex;gap:18px;align-items:center;margin-top:28px;
  padding:18px 20px;background:var(--paper-2);border:1px solid var(--line-soft);
}
.person img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.person .pt{display:flex;flex-direction:column;gap:2px;min-width:0}
.person .pn{font-weight:600;color:var(--ink)}
.person .pr{font-size:.88rem;color:var(--muted)}
.person .pl{font-size:.9rem;color:var(--brass-deep);font-weight:600;font-variant-numeric:lining-nums}

/* Der helle Hero traegt keine weisse Navigation mehr: fester Papiergrund,
   damit die Menuepunkte ueber dem Bild lesbar bleiben. */
header:not(.transparent){
  background:var(--paper);
  box-shadow:0 1px 0 var(--line);
}
header:not(.transparent) .nav-links a{color:var(--ink-soft)}
header:not(.transparent) .nav-links a.cta{border-color:var(--brass);color:var(--brass-deep)}
header:not(.transparent) .brand{color:var(--ink)}

/* Der Hero beginnt unter dem Kopfbereich, nicht dahinter. */
.hero-split{margin-top:0}
.hs-text{padding-top:70px}
@media (max-width:1080px){ .hs-text{padding-top:60px} }
@media (max-width:860px){ .hs-text{padding-top:34px} }

/* Kopfbereich ist fixiert: der Hero beginnt darunter, damit weder Text
   noch Bild hinter der Navigation verschwinden. */
.hero-split{padding-top:98px}
.hs-text{padding-top:56px;padding-bottom:64px}
.hs-img{min-height:600px}
@media (max-width:860px){
  .hero-split{padding-top:82px}
  .hs-text{padding-top:30px;padding-bottom:42px}
  .hs-img{min-height:0}
}

/* Mobil: flacherer Bildausschnitt, damit Preis und Handlungsflaeche
   frueher sichtbar werden. */
@media (max-width:860px){
  .hs-img{aspect-ratio:16/9}
  .hs-lead{font-size:1rem;max-width:none}
  .hs-facts{margin-top:22px}
  .hs-actions{margin-top:26px;gap:10px}
}

/* Landingpage-Kopf: fester Papiergrund statt weisser Schrift ueber dem Bild.
   Die alte Fassung setzte auf dunkle Heros, ueber hellen Fotos war die
   Telefonnummer unlesbar. Jetzt einheitlich zur Startseite. */
.lp-header{
  position:relative;background:var(--paper);
  box-shadow:0 1px 0 var(--line);padding:18px 0;
}
.lp-header .brand{color:var(--ink)}
.lp-phone{color:var(--ink);font-variant-numeric:lining-nums}
.lp-phone .lbl{color:var(--brass-deep)}
.lp-phone:hover{color:var(--brass-deep)}

/* Optischer Randausgleich: Cormorant-Versalien haben mehr linkes Seitenbearing
   als die Grotesk darunter, dadurch wirkte die Headline eingerueckt. */
.hs-text h1{margin-left:-.045em}
@media (max-width:860px){ .hs-text h1{margin-left:-.03em} }

/* Hero kompakter: kleinere Schrift, flacherer Aufbau, damit die Fakten
   und die Handlungsflaeche frueher im Blick sind. */
.hs-text h1{font-size:clamp(2.1rem,3.5vw,3.2rem);margin:.26em 0 .34em}
.hs-text{padding-top:44px;padding-bottom:48px}
.hs-lead{font-size:1.02rem;max-width:46ch}
.hs-facts{margin-top:24px;gap:7px}
.hs-actions{margin-top:26px}
.hs-avail{margin-top:18px}
@media (max-width:860px){
  .hs-text h1{font-size:clamp(1.9rem,7vw,2.4rem)}
  .hs-text{padding-top:26px;padding-bottom:36px}
}

/* --- Breites Hinweisband unter Karten- und Preisraster ---------------------
   Fuer Angebote, die kein eigener Spaltenkopf sein sollen: Besprechungsraeume
   sind stundenweise buchbar, das Teambuero ist die Stufe ueber dem Einzelplatz.
   Beides bekommt so eine eigene Flaeche mit Klickziel, ohne das Dreierraster
   zu einem gedraengten Viererraster zu machen. */
.addon{display:flex;align-items:center;justify-content:space-between;gap:32px;
  margin-top:30px;padding:28px 36px;background:var(--paper);
  border:1px solid var(--line);border-radius:3px}
.addon-txt{max-width:64ch}
.addon h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;line-height:1.2;margin-bottom:6px}
.addon h3 .addon-amt{font-style:italic;color:var(--brass-deep);white-space:nowrap}
.addon p{color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.addon .btn{flex-shrink:0}
@media (max-width:860px){
  .addon{flex-direction:column;align-items:flex-start;gap:20px;padding:26px 24px}
  .addon .btn{width:100%;text-align:center}
}

/* --- Auffangnetz fuer Ueberschriften und Absaetze ohne Kontextklasse -------
   Bisher bekam ein h2 nur ueber .offer-head, .split-text oder .article eine
   Groesse. Stand es direkt in einem .wrap, rendete es in Browser-Standard
   (24px) und sah kaputt aus. Gleiches galt fuer .lead ohne Abstand nach
   unten: zwei Absaetze klebten aneinander. */
section > .wrap > h2{font-size:clamp(1.9rem,3.4vw,3.2rem);margin-bottom:.5em}
/* Die Kontaktspalte lag ausserhalb aller Ueberschriftenregeln und rendete in
   Browser-Standardgroesse. */
.contact-grid h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:.4em}
section > .wrap > h3{font-size:clamp(1.3rem,2vw,1.8rem);margin-bottom:.4em}
section > .wrap > p + p,
section > .wrap > .lead + .lead{margin-top:1.1em}
.lead + .lead,.lead + p,.lead + ul,.lead + .btn{margin-top:1.1em}

/* --- Mobile Korrekturen, gemessen bei 390 px ------------------------------
   Die Landingpages liefen auf iPhone-Breite rund 20 px ueber den Rand hinaus.
   Ursache: die Grid-Spalte 1fr nimmt als Minimum die min-content-Breite des
   Formularblocks an. Der ist wegen Innenabstand und Eingabefeldern 387 px
   breit und sprengt damit die 346 px, die bei 390 px Viewport uebrig sind.
   minmax(0,1fr) und min-width:0 loesen die Spalte aus dieser Bindung. */
.lp-hero-grid,.intro-grid,.split,.contact-grid,.cards,.q-grid,.price-grid{min-width:0}
.lp-hero-grid > *,.intro-grid > *,.split > *,.contact-grid > *,
.cards > *,.q-grid > *,.price-grid > *{min-width:0}
.field input,.field textarea,.lp-card input,.lp-card textarea{min-width:0;max-width:100%}

@media(max-width:980px){
  .intro-grid,.split,.contact-grid,.lp-hero-grid{grid-template-columns:minmax(0,1fr)}
  .cards,.q-grid,.price-grid,.steps{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:680px){
  .lp-card{padding:28px 22px}
  /* Fingerkuppen brauchen mindestens 44 px, das Menuesymbol hatte 37. */
  .burger{padding:15px 10px;min-height:44px;min-width:44px;justify-content:center}
  .form-fine,.lp-card .fine{font-size:.78rem}
}

/* Preistabellen sind breiter als ein Telefon. Sie duerfen im eigenen
   Container scrollen, statt die Seite abzuschneiden. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll .ptable{min-width:520px}

/* --- Menue-Umbruchpunkt --------------------------------------------------
   Das Burgermenue griff erst ab 680 px. Zwischen 681 und rund 1160 px passte
   die volle Navigation aber nicht mehr neben die Wortmarke und lief aus dem
   Bild. Gemessen auf iPad hoch (768 und 834 px) und Telefon quer.
   Gemessen: Wortmarke 275 px, Navigation mindestens 775 px, Mindestabstand
   30 px, Rand 2x40 px, macht 1160 px. Die uebrigen 680er-Regeln bleiben. */
@media(max-width:1160px){
  .nav-links{display:none}
  .burger{display:flex;padding:15px 10px;min-height:44px;min-width:44px;justify-content:center}
  .nav-links.open{display:flex;position:fixed;inset:0;background:var(--paper);
    flex-direction:column;justify-content:center;align-items:center;gap:30px;z-index:60}
  .nav-links.open a{color:var(--ink)!important;font-size:1.1rem}
  .nav-links.open a.cta{border-color:var(--brass);color:var(--brass-deep)!important}
}

/* --- Sehr schmale Telefone (iPhone SE, 360 px) ---------------------------
   Wortmarke, Mindestabstand und das 44-px-Menuesymbol ergaben zusammen
   393 px und schoben das Symbol aus dem Bild. */
@media(max-width:420px){
  .nav{gap:14px}
  .brand{font-size:1.28rem;letter-spacing:.14em}
  .brand small{letter-spacing:.28em}
  .lp-header .nav{gap:12px;flex-wrap:nowrap}
  .lp-phone{font-size:.86rem;gap:6px;white-space:nowrap}
}

/* Kleinstes noch verbreitetes Format (iPhone SE 1. Generation, 320 px). */
@media(max-width:360px){
  .wrap{padding:0 16px}
  .brand{font-size:1.12rem;letter-spacing:.1em}
  .lp-phone{font-size:.78rem}
  .lp-hero h1,.hs-text h1,.subhero h1{overflow-wrap:anywhere;hyphens:auto}
}