/* ==========================================================================
   Herrenhaus Lübbenow, Uckerland
   Typografie und Farbwelt nach Maison Lumière: Cormorant Garamond + Inter,
   Sandpalette, Nachtton für dunkle Flächen
   ========================================================================== */

:root{
  --ink:#2A241D;
  --ink-70:#5A4F43;
  --ink-50:#8A7C6B;
  --deep:#14110D;
  --deep-2:#1C1814;
  --paper:#F6EFE6;
  --paper-2:#EFE6D9;
  --paper-3:#E9DDCB;
  --card:#FBF6EF;
  --accent:#A6714E;
  --accent-dk:#7A5236;
  --accent-lt:#D4A574;
  --line:#D8C9B4;
  --line-light:rgba(241,231,215,.22);

  --serif:"Cormorant Garamond",'Times New Roman',serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1320px;
  --gut:clamp(1.35rem,5vw,3.5rem);
  --sec:clamp(5rem,11vw,10rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .22vw,1.06rem);
  line-height:1.68;
  font-weight:300;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent-dk);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.04;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(3rem,7.6vw,6.4rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.06}
h3{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.18;letter-spacing:-.008em}
h4{font-size:.72rem;font-family:var(--sans);font-weight:500;letter-spacing:.2em;text-transform:uppercase}
em{font-style:italic}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:66ch}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(3.5rem,7vw,6rem)}

/* Flächen */
.bg-deep{background:var(--deep);color:#F1E7D7}
.bg-deep h1,.bg-deep h2,.bg-deep h3{color:#F6EFE6}
.bg-deep a{color:var(--accent-lt)}
.bg-deep a:hover{color:#fff}
.bg-paper2{background:var(--paper-2)}
.bg-facade{background:var(--paper-3);color:var(--ink)}
.bg-facade h2,.bg-facade h3{color:var(--ink)}

/* Eyebrow ------------------------------------------------------------------ */
.eyebrow{
  font-size:.688rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--accent-dk);margin:0 0 1.35rem;
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";flex:0 0 1.75rem;height:1px;background:var(--accent)}
.bg-deep .eyebrow{color:var(--accent-lt)}
.bg-deep .eyebrow::before{background:var(--accent-lt)}
.bg-facade .eyebrow{color:var(--accent-dk)}

.cornice{border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:4px}
.bg-deep .cornice{border-color:var(--line-light)}

.lead{font-size:clamp(1.08rem,1.02rem + .4vw,1.22rem);line-height:1.65;color:var(--ink-70);font-weight:300}
.bg-deep .lead{color:#C9BDA8}
.serif-note{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.4;color:var(--accent-dk)}

/* Kopfzeile ---------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(246,239,230,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:78px}
.brand{font-family:var(--serif);font-size:1.35rem;font-style:italic;letter-spacing:.01em;text-decoration:none;color:var(--ink);line-height:1.1}
.brand span{display:block;font-family:var(--sans);font-size:.6rem;font-style:normal;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-dk);margin-top:.4rem}
.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2.1rem)}
.nav a{
  font-size:.75rem;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-70);padding-block:.4rem;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent-dk);border-bottom-color:var(--accent)}
.nav .btn{border-bottom:none;color:var(--paper)}
.nav .btn:hover{color:var(--paper);border-bottom:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);padding:.55rem .8rem;font:inherit;font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;color:var(--ink)}

@media (max-width:960px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:.5rem var(--gut) 1.6rem;display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav a,.nav a:not(.btn){width:100%;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.82rem}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-top:1.2rem;width:100%;text-align:center}
}

/* Buttons ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:1.05rem 1.9rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:background .25s ease,color .25s ease,border-color .25s ease;cursor:pointer;
}
.btn:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:var(--paper)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bg-deep .btn--ghost{color:#F1E7D7;border-color:rgba(241,231,215,.4)}
.bg-deep .btn--ghost:hover{background:#F1E7D7;border-color:#F1E7D7;color:var(--deep)}
.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--light:hover{background:var(--accent-lt);color:var(--deep);border-color:var(--accent-lt)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem}

/* Hero --------------------------------------------------------------------- */
.hero{position:relative;min-height:min(100svh,900px);display:flex;align-items:flex-end;overflow:hidden;background:var(--deep)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.92) contrast(1.02)}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,13,.3) 0%,rgba(20,17,13,.06) 32%,rgba(20,17,13,.58) 74%,rgba(20,17,13,.9) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(3rem,8vw,5.5rem)}
.hero h1{color:#F6EFE6;max-width:22ch}
.hero h1 em{font-style:italic;color:var(--accent-lt)}
.hero__eyebrow{color:var(--accent-lt)}
.hero__eyebrow::before{background:var(--accent-lt)}
.hero__sub{color:rgba(246,239,230,.86);max-width:46ch;margin-top:1.6rem;font-size:clamp(1.02rem,.98rem + .35vw,1.18rem);line-height:1.65;font-weight:300}
.hero__facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(2.4rem,5vw,3.8rem);
  background:rgba(241,231,215,.16);border:1px solid rgba(241,231,215,.16);
}
.hero__facts div{background:rgba(20,17,13,.5);backdrop-filter:blur(6px);padding:1.2rem 1.3rem}
.hero__facts b{display:block;white-space:nowrap;font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:400;color:#F6EFE6;line-height:1}
.hero__facts span{display:block;margin-top:.55rem;font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,239,230,.7)}
@media (max-width:720px){
  .hero{min-height:auto}
  .hero__media img{object-position:center 34%}
  .hero__inner{padding-top:clamp(11rem,33vh,17rem);padding-bottom:2.4rem}
  .hero__sub{margin-top:1.1rem}
  .hero__facts{grid-template-columns:repeat(2,1fr);margin-top:2rem}
  .hero__facts div{padding:.85rem .9rem}
  .hero__facts b{font-size:1.5rem}
  .hero__facts span{font-size:.6rem;letter-spacing:.16em}
}

/* Seitenkopf (Unterseiten) -------------------------------------------------- */
.pagehead{position:relative;background:var(--deep);color:#F1E7D7;overflow:hidden}
.pagehead__media{position:absolute;inset:0;opacity:.36}
.pagehead__media img{width:100%;height:100%;object-fit:cover}
.pagehead__inner{position:relative;z-index:2;padding-block:clamp(4.5rem,11vw,8.5rem)}
.pagehead h1{color:#F6EFE6;font-size:clamp(2.6rem,6vw,4.8rem);max-width:24ch}
.pagehead .lead{margin-top:1.5rem;max-width:58ch;color:rgba(246,239,230,.82)}
.crumbs{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,239,230,.58);margin-bottom:1.8rem}
.crumbs a{color:rgba(246,239,230,.58);text-decoration:none}
.crumbs a:hover{color:var(--accent-lt)}

/* Raster ------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,6vw,5.5rem);align-items:center}
.split--top{align-items:start}
.split--wide-left{grid-template-columns:1.15fr .85fr}
.split--wide-right{grid-template-columns:.85fr 1.15fr}
@media (max-width:880px){.split,.split--wide-left,.split--wide-right{grid-template-columns:1fr;gap:2.4rem}}
.order-first{order:-1}
@media (max-width:880px){.split .order-md-first{order:-1}}

.cols-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.8rem,3.5vw,3.4rem)}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,3.5vw,3rem)}
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
@media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* Bilder ------------------------------------------------------------------- */
figure{margin:0}
figcaption{margin-top:.85rem;font-size:.75rem;letter-spacing:.06em;color:var(--ink-50)}
.bg-deep figcaption{color:rgba(241,231,215,.58)}
.frame{position:relative;overflow:hidden;background:var(--paper-2);border-radius:10px}
.frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.94);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.frame:hover img{transform:scale(1.04)}
.frame--43{aspect-ratio:4/3}
.frame--45{aspect-ratio:4/5}
.frame--169{aspect-ratio:16/9}
.frame--11{aspect-ratio:1/1}

/* Signatur: der Bogen, abgeleitet von Spitzbogenportal und Fächerfenster */
.arch{border-radius:999px 999px 10px 10px;overflow:hidden;aspect-ratio:3/4;background:var(--paper-2)}
.arch img{width:100%;height:100%;object-fit:cover;filter:saturate(.94);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.arch:hover img{transform:scale(1.04)}
.arch--wide{aspect-ratio:4/5}

/* Merkmalslisten ------------------------------------------------------------ */
.feature{padding-top:1.6rem;border-top:1px solid var(--line)}
.bg-deep .feature{border-color:var(--line-light)}
.feature h3{margin-bottom:.7rem}
.feature p{font-size:.94rem;color:var(--ink-70)}
.bg-deep .feature p{color:#C9BDA8}

.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:.72rem 0 .72rem 1.6rem;border-bottom:1px solid var(--line);position:relative;font-size:.94rem}
.ticks li::before{content:"";position:absolute;left:0;top:1.45rem;width:.4rem;height:.4rem;background:var(--accent);border-radius:50%}
.bg-deep .ticks li{border-color:var(--line-light)}
.bg-deep .ticks li::before{background:var(--accent-lt)}

/* Zahlen ------------------------------------------------------------------- */
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:400;line-height:1;color:var(--accent-dk)}
.bg-deep .stat b{color:var(--accent-lt)}
.stat span{display:block;margin-top:.6rem;font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50)}
.bg-deep .stat span{color:rgba(241,231,215,.62)}

/* Tabellen ----------------------------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:540px}
caption{text-align:left;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);padding-bottom:1rem}
th,td{text-align:left;padding:1rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-dk);border-bottom:1px solid var(--ink)}
tbody th{font-weight:500}
td.num{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Karten ------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);padding:clamp(1.7rem,3.5vw,2.6rem)}
.bg-paper2 .card{background:#fff}
.card h3{margin-bottom:.8rem}
.card p{font-size:.94rem;color:var(--ink-70)}

.quote{border-left:1px solid var(--accent);padding-left:clamp(1.4rem,3.5vw,2.4rem)}
.quote p{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.34;font-style:italic;font-weight:300}
.quote cite{display:block;margin-top:1.3rem;font-family:var(--sans);font-style:normal;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50)}
.bg-deep .quote cite{color:rgba(241,231,215,.6)}

/* FAQ ---------------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.4rem 2.5rem 1.4rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:1.35rem;font-family:var(--sans);font-size:1.2rem;font-weight:300;color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:1.6rem;max-width:70ch;color:var(--ink-70);font-size:.96rem}

/* Galerie ------------------------------------------------------------------ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0;border-radius:10px;overflow:hidden}
.gallery button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gallery img{width:100%;filter:saturate(.94);transition:opacity .3s,transform .7s cubic-bezier(.2,.7,.2,1)}
.gallery button:hover img{transform:scale(1.04);opacity:.9}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,17,13,.96);display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lightbox[data-open="true"]{display:flex}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:10px}
.lightbox figcaption{color:rgba(241,231,215,.78);text-align:center;margin-top:1.2rem}
.lightbox button{position:absolute;top:1.2rem;right:1.3rem;background:none;border:1px solid rgba(241,231,215,.35);color:#F1E7D7;font:inherit;font-size:1.4rem;font-weight:300;line-height:1;padding:.3rem .8rem;cursor:pointer}
.lightbox button:hover{border-color:#F1E7D7}

/* Formular ----------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media (max-width:680px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field--full{grid-column:1/-1}
label{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-70)}
input,select,textarea{
  font:inherit;font-size:.98rem;padding:.9rem 1rem;border:1px solid var(--line);
  background:#fff;color:var(--ink);width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px rgba(166,113,78,.14)}
textarea{min-height:150px;resize:vertical}
.consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.88rem;font-weight:300;letter-spacing:0;text-transform:none;color:var(--ink-70)}
.consent input{width:auto;margin-top:.3rem}
.hp{position:absolute;left:-9999px}

/* Fußzeile ----------------------------------------------------------------- */
.site-foot{background:var(--deep);color:#C9BDA8;padding-block:clamp(4rem,8vw,6rem) 2.2rem;font-size:.9rem}
.site-foot h4{color:#F6EFE6;font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.3rem}
.site-foot a{color:#C9BDA8;text-decoration:none;transition:color .2s}
.site-foot a:hover{color:var(--accent-lt)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.65rem}
.foot-brand{font-family:var(--serif);font-style:italic;font-size:1.75rem;color:#F6EFE6;line-height:1.15}
.foot-bottom{margin-top:3.4rem;padding-top:1.7rem;border-top:1px solid var(--line-light);display:flex;flex-wrap:wrap;gap:1rem 1.8rem;justify-content:space-between;font-size:.76rem;letter-spacing:.04em;color:rgba(241,231,215,.5)}

/* Bewegung ----------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:.6rem;z-index:99;background:var(--ink);color:var(--paper);padding:.75rem 1.2rem}
.mt-0{margin-top:0}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}
.note{font-size:.84rem;color:var(--ink-50)}
.bg-deep .note{color:rgba(241,231,215,.58)}

/* Vermietungspartner ------------------------------------------------------- */
.partner{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.4rem,4vw,3rem);justify-content:space-between;border:1px solid var(--line);background:var(--card);padding:clamp(1.6rem,3.5vw,2.4rem)}
.partner__mark{font-family:var(--sans);font-size:1.05rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--accent-dk);white-space:nowrap}
.partner__mark img{height:34px;width:auto}
.partner__text{flex:1 1 26ch;min-width:0}
.partner__text p{font-size:.95rem;color:var(--ink-70)}
.partner__text strong{font-weight:500;color:var(--ink)}
.bg-deep .partner{background:rgba(241,231,215,.06);border-color:var(--line-light)}
.bg-deep .partner__mark{color:var(--accent-lt)}
.bg-deep .partner__text p{color:#C9BDA8}
.bg-deep .partner__text strong{color:#F6EFE6}

/* ==========================================================================
   Premium-Schicht: Textur, Tiefe, Bewegung
   ========================================================================== */

body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media (prefers-reduced-motion:reduce){body::after{display:none}}

/* Kopfzeile verdichtet sich beim Scrollen */
.site-head{transition:min-height .35s ease,background .35s ease,box-shadow .35s ease}
.site-head__inner{transition:min-height .35s ease}
.site-head.is-scrolled{background:rgba(246,239,230,.94);box-shadow:0 1px 0 var(--line),0 14px 40px -30px rgba(42,36,29,.5)}
.site-head.is-scrolled .site-head__inner{min-height:64px}
.brand,.brand span{transition:font-size .35s ease,letter-spacing .35s ease}
.site-head.is-scrolled .brand{font-size:1.18rem}

/* Navigation: Linie wächst aus der Mitte */
.nav a:not(.btn){position:relative;border-bottom:none}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--accent);
  transition:left .32s cubic-bezier(.2,.7,.2,1),right .32s cubic-bezier(.2,.7,.2,1);
}
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current="page"]::after{left:0;right:0}

/* Buttons: Füllung schiebt sich hoch */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-dk);
  transform:translateY(101%);transition:transform .42s cubic-bezier(.2,.7,.2,1);
}
.btn:hover::before{transform:translateY(0)}
.btn--ghost::before{background:var(--ink)}
.bg-deep .btn--ghost::before{background:#F1E7D7}
.btn--light::before{background:var(--accent-lt)}

/* Textlinks im Fließtext */
main p a:not(.btn){
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .25s;
}
main p a:not(.btn):hover{background-size:0 1px;color:var(--accent-dk)}

/* Bilder: Vorhang öffnet sich, Motiv fährt zurück */
.frame,.arch{will-change:transform}
.frame::after,.arch::after{
  content:"";position:absolute;inset:0;background:var(--paper);
  transform-origin:bottom;transition:transform 1.05s cubic-bezier(.76,0,.24,1);z-index:2;
}
.arch{position:relative}
.reveal .frame::after,.reveal .arch::after,.reveal.frame::after,.reveal.arch::after{transform:scaleY(1)}
.reveal.is-in .frame::after,.reveal.is-in .arch::after,.reveal.is-in.frame::after,.reveal.is-in.arch::after{transform:scaleY(0)}
.frame img,.arch img{transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .6s}
.reveal.is-in .frame img,.reveal.is-in .arch img,.reveal.is-in.frame img,.reveal.is-in.arch img{transform:scale(1)}
.frame:hover img,.arch:hover img{transform:scale(1.05)}
.frame,.arch{box-shadow:0 40px 80px -60px rgba(42,36,29,.65)}

/* Hero: Ebenen bewegen sich unterschiedlich schnell */
.hero__media{transform:translate3d(0,var(--par,0px),0) scale(1.06);will-change:transform}
.hero__inner>*{opacity:0;transform:translateY(26px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.hero__eyebrow{animation-delay:.15s}
.hero h1{animation-delay:.28s}
.hero__sub{animation-delay:.44s}
.hero .btn-row{animation-delay:.58s}
.hero__facts{animation-delay:.72s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero__inner>*{opacity:1;transform:none;animation:none}
  .hero__media{transform:none}
  .frame::after,.arch::after{display:none}
  .frame img,.arch img{transform:none}
}
.hero__facts div{transition:background .4s ease}
.hero__facts div:hover{background:rgba(20,17,13,.68)}

/* Karten und Merkmale heben sich an */
.card{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(42,36,29,.55);border-color:var(--accent)}
.feature{transition:border-color .4s ease}
.feature:hover{border-color:var(--accent)}
.ticks li{transition:padding-left .35s ease,color .35s ease}
.ticks li:hover{padding-left:1.9rem;color:var(--ink)}
.faq summary{transition:color .3s ease}
.faq summary:hover{color:var(--accent-dk)}
.faq details[open] summary{color:var(--accent-dk)}
.partner{transition:border-color .45s ease,box-shadow .45s ease}
.partner:hover{border-color:var(--accent);box-shadow:0 30px 60px -45px rgba(42,36,29,.5)}

/* Zahlen zählen hoch */
.stat b,.hero__facts b{font-variant-numeric:tabular-nums}

/* Reihen mit Verzögerung */
.stagger>*{opacity:0;transform:translateY(20px)}
.stagger.is-in>*{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.stagger.is-in>*:nth-child(2){transition-delay:.09s}
.stagger.is-in>*:nth-child(3){transition-delay:.18s}
.stagger.is-in>*:nth-child(4){transition-delay:.27s}
.stagger.is-in>*:nth-child(5){transition-delay:.36s}
.stagger.is-in>*:nth-child(6){transition-delay:.45s}
@media (prefers-reduced-motion:reduce){.stagger>*{opacity:1;transform:none}}

/* Fortschrittslinie am oberen Rand */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--accent);z-index:70;pointer-events:none}

@media (max-width:960px){
  .nav a:not(.btn){border-bottom:1px solid var(--line)}
  .nav a:not(.btn)::after{display:none}
}

/* Raster mit nur noch einem Element füllen die Breite */
.split:has(> :only-child),.cols-2:has(> :only-child),.cols-3:has(> :only-child),.cols-4:has(> :only-child){grid-template-columns:1fr}
.cols-3:has(> :nth-child(2):last-child),.cols-4:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}

/* Links auf dunklen Flächen bleiben hell */
.pagehead a:not(.btn),.bg-deep main p a:not(.btn),.hero a:not(.btn),.site-foot a:not(.btn){color:var(--accent-lt)}
.pagehead a:not(.btn):hover,.bg-deep main p a:not(.btn):hover,.hero a:not(.btn):hover{color:#F6EFE6}

.nav__lang{font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink-50);border:1px solid var(--line);padding:.4rem .6rem;line-height:1;transition:color .25s,border-color .25s}
.nav__lang:hover{color:var(--accent-dk);border-color:var(--accent)}
.nav__lang::after{display:none}

/* ==========================================================================
   Ansichtsvarianten (Tweaks): Stimmung, Auftritt, Bewegung
   ========================================================================== */

[data-palette="rose"]{
  --ink:#2E1F1D;--ink-70:#604842;--ink-50:#9A7A73;
  --deep:#231413;--deep-2:#2E1B19;
  --paper:#F6ECEA;--paper-2:#EDDFDB;--paper-3:#E3CFC9;--card:#FCF2EF;
  --accent:#B06C5F;--accent-dk:#834C41;--accent-lt:#E0A99B;
  --line:#DCC3BC;
}
[data-palette="sage"]{
  --ink:#1F231C;--ink-70:#4A5143;--ink-50:#7B8473;
  --deep:#141813;--deep-2:#1C221A;
  --paper:#EFF0E8;--paper-2:#E4E6DA;--paper-3:#D6D9C7;--card:#F6F6EE;
  --accent:#7A8C68;--accent-dk:#566447;--accent-lt:#AFC098;
  --line:#C6CBB5;
}
[data-palette="noir"]{
  --ink:#F1E7D7;--ink-70:#C9BDA8;--ink-50:#8B806D;
  --deep:#0E0C09;--deep-2:#171410;
  --paper:#14110D;--paper-2:#1C1814;--paper-3:#24201A;--card:#1F1A14;
  --accent:#D4A574;--accent-dk:#E0BB94;--accent-lt:#D4A574;
  --line:#3A3228;
}
[data-palette="noir"] .site-head{background:rgba(20,17,13,.86)}
[data-palette="noir"] .site-head.is-scrolled{background:rgba(20,17,13,.95);box-shadow:0 1px 0 var(--line),0 14px 40px -30px #000}
[data-palette="noir"] .nav-toggle{color:var(--ink)}
[data-palette="noir"] input,[data-palette="noir"] select,[data-palette="noir"] textarea{background:#1F1A14;color:var(--ink)}
[data-palette="noir"] .bg-paper2 .card{background:var(--card)}
[data-palette="noir"] .btn{background:var(--accent);border-color:var(--accent);color:#14110D}
[data-palette="noir"] .btn::before{background:var(--accent-dk)}
[data-palette="noir"] .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
[data-palette="noir"] body::after{mix-blend-mode:screen;opacity:.32}
[data-palette="noir"] .frame::after,[data-palette="noir"] .arch::after{background:var(--paper)}

/* Auftritt */
[data-density="kompakt"]{--sec:clamp(3rem,6vw,5.5rem);--wrap:1140px}
[data-density="kompakt"] h1{font-size:clamp(2.2rem,5vw,3.6rem)}
[data-density="kompakt"] h2{font-size:clamp(1.6rem,3vw,2.4rem)}
[data-density="kompakt"] h3{font-size:clamp(1.15rem,1.6vw,1.35rem)}
[data-density="kompakt"] .lead{font-size:clamp(1rem,.98rem + .2vw,1.08rem)}
[data-density="kompakt"] .hero{min-height:min(70svh,620px)}
[data-density="kompakt"] .pagehead__inner{padding-block:clamp(3rem,6vw,4.5rem)}
[data-density="kompakt"] th,[data-density="kompakt"] td{padding:.7rem .8rem}
[data-density="kompakt"] .faq summary{padding-block:1rem}
[data-density="kompakt"] .card{padding:clamp(1.2rem,2.5vw,1.7rem)}
[data-density="kompakt"] .btn{padding:.8rem 1.4rem}

/* Bewegung */
[data-motion="ruhig"] body::after{display:none}
[data-motion="ruhig"] .frame::after,[data-motion="ruhig"] .arch::after{display:none}
[data-motion="ruhig"] .frame img,[data-motion="ruhig"] .arch img{transform:none;transition:none}
[data-motion="ruhig"] .frame:hover img,[data-motion="ruhig"] .arch:hover img{transform:none}
[data-motion="ruhig"] .hero__media{transform:none}
[data-motion="ruhig"] .hero__inner>*{opacity:1;transform:none;animation:none}
[data-motion="ruhig"] .reveal{opacity:1;transform:none}
[data-motion="ruhig"] .stagger>*{opacity:1;transform:none}
[data-motion="ruhig"] .btn::before{display:none}
[data-motion="ruhig"] .card:hover{transform:none;box-shadow:none}
[data-motion="ruhig"] .progress{display:none}

/* Bedienfeld */
.tweaks{position:fixed;right:1.1rem;bottom:1.1rem;z-index:150;font-family:var(--sans);font-size:.72rem}
.tweaks__toggle{display:flex;align-items:center;gap:.5rem;background:var(--ink);color:var(--paper);border:0;padding:.7rem 1rem;font:inherit;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.tweaks__toggle:hover{background:var(--accent-dk)}
.tweaks__body{display:none;background:var(--card);border:1px solid var(--line);padding:1.2rem;margin-bottom:.6rem;min-width:15rem;box-shadow:0 30px 60px -40px rgba(0,0,0,.5)}
.tweaks[data-open="true"] .tweaks__body{display:block}
.tweaks fieldset{border:0;padding:0;margin:0 0 1.1rem}
.tweaks fieldset:last-of-type{margin-bottom:0}
.tweaks legend{font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);margin-bottom:.5rem;padding:0}
.tweaks__row{display:flex;flex-wrap:wrap;gap:.35rem}
.tweaks__row button{background:transparent;border:1px solid var(--line);color:var(--ink-70);font:inherit;padding:.42rem .6rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.tweaks__row button:hover{color:var(--ink);border-color:var(--accent)}
.tweaks__row button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media print{.tweaks{display:none}}