/* ============================================================
   TATENGOLD — Studio für modernes Papeterie-Design
   Farbwelt: weinrote Aubergine, dusty rosé, elegantes Pink, soft beige
   ============================================================ */

:root{
  --aubergine:#2E5484;      /* Moosgrün – Hauptton (Logofarbe) */
  --aubergine-deep:#22406A;  /* Moosgrün tief – Footer */
  --wine:#2F5E9E;            /* Rostrot – Auszeichnungen */
  --pink:#998513;            /* Rostrot – Handlungsflächen */
  --pink-light:#F5B9CB;      /* Gold hell */
  --rose:#F4B6AE;            /* Gold hell – Text auf dunklen Flächen */
  --rose-soft:#F4B6AE;       /* Sand hell */
  --beige:#F6F2EC;           /* Sand */
  --cream:#FCFAF7;
  --moos:#2E5484;            /* Burgund – Akzentfläche */
  --gold:#998513;
  --ink:#2A3440;
  --ink-soft:#5E6A76;

  --max:1240px;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(48px,6vw,96px);

  --display:"Playfair Display",Georgia,'Times New Roman',serif;
  --sans:"Jost",'Avenir Next',-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:150px}
body{
  margin:0; background:var(--cream); color:var(--ink); overflow-wrap:break-word;
  font-family:var(--sans); font-size:17px; font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font-family:inherit}

h1,h2,h3,h4{font-family:var(--display); font-weight:500; margin:0; line-height:1.08; letter-spacing:-.01em}
h1{font-size:clamp(2.7rem,7.4vw,5.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.9rem)}
p{margin:0 0 1em}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}
.wrap-wide{max-width:1480px; margin:0 auto; padding-inline:var(--gut)}

/* ---------- Marken-Elemente ---------- */
.eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:400; color:var(--wine); margin:0 0 1.1rem;
}
.eyebrow--light{color:var(--rose)}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--ink-soft); max-width:52ch}
.rule{height:1px; background:var(--gold); opacity:.55; border:0; margin:0}

/* Signaturform: die Pille — aus Kristinas eigener Formensprache.
   Kapselform, weil Radius = halbe Breite. Skaliert in jeder Größe. */
.pill{border-radius:9999px; overflow:hidden}
.pill img{border-radius:inherit}

/* ---------- Buttons (kantig, nie abgerundet) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.05em 2.1em; border:1px solid var(--aubergine); background:var(--aubergine);
  color:var(--beige); text-decoration:none; cursor:pointer;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.btn:hover{background:var(--wine); border-color:var(--wine)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent; color:var(--aubergine)}
.btn--ghost:hover{background:var(--aubergine); color:var(--beige)}
.btn--pink{background:var(--pink); border-color:var(--pink); color:#fff}
.btn--pink:hover{background:var(--wine); border-color:var(--wine)}
.btn--light{background:var(--beige); border-color:var(--beige); color:var(--aubergine)}
.btn--light:hover{background:var(--rose-soft); border-color:var(--rose-soft); color:var(--aubergine)}
.btn--outline-light{background:transparent; border-color:var(--rose); color:var(--beige)}
.btn--outline-light:hover{background:var(--beige); color:var(--aubergine); border-color:var(--beige)}
.btn--sm{padding:.85em 1.5em; font-size:.7rem}
:focus-visible{outline:2px solid var(--pink); outline-offset:3px}

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:80;
  background:rgba(252,250,247,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(46,84,132,.1);
}
.head-in{
  max-width:1480px; margin:0 auto; padding:0 var(--gut);
  min-height:78px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding-top:14px; padding-bottom:12px; position:relative;
}
.brand{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.brand img{height:50px; width:auto; display:block}
@media (max-width:560px){ .brand img{height:38px} }
.nav{display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.8vw,28px); flex-wrap:wrap; row-gap:10px}
.nav a{
  text-decoration:none; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold);
  transition:width .3s ease;
}
.nav a:hover::after{width:100%}
.nav .btn{margin-left:10px; border:1px solid var(--pink); padding:1em 2em; font-size:.74rem}
.nav .btn--pink:hover{background:var(--aubergine); border-color:var(--aubergine); color:var(--beige)}
.burger{
  display:none; position:absolute; right:var(--gut); top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:1px solid var(--aubergine); background:transparent;
  cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{display:block; width:20px; height:1px; background:var(--aubergine); transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-nav{
  position:fixed; inset:0; padding-top:104px; background:var(--aubergine); color:var(--beige);
  padding:var(--gut); display:none; flex-direction:column; gap:6px; z-index:70; overflow-y:auto;
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  text-decoration:none; font-family:var(--display); font-size:2rem; padding:.35em 0;
  border-bottom:1px solid rgba(246,242,236,.18);
}
.mobile-nav .btn{margin-top:22px; align-self:flex-start}
body.locked{overflow:hidden}

/* ---------- Kapazitäts-Laufband (bewusst klein) ---------- */
.ticker{background:var(--aubergine); color:var(--rose-soft); overflow:hidden; padding:9px 0}
.ticker-track{display:flex; width:max-content; animation:slide 46s linear infinite}
.ticker span{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; padding:0 22px; white-space:nowrap;
}
.ticker span::after{content:"·"; margin-left:22px; color:var(--gold)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Hero ---------- */
.hero{background:var(--beige); position:relative; overflow:hidden}
.hero-grid{
  max-width:1480px; margin:0 auto; padding:clamp(40px,6vw,80px) var(--gut) clamp(48px,6vw,88px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center;
}
.hero-copy{padding-bottom:0}
.hero h1{margin-bottom:.35em}
.hero h1 em{font-style:italic; color:var(--wine)}
.hero-sub{font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--ink-soft); max-width:34ch; margin-bottom:2.2em}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}
.hero-figure{position:relative; max-width:440px; margin:0 auto; width:100%}
.hero-figure img{width:100%; aspect-ratio:3/5; height:auto; object-fit:cover; display:block}
.hero-note{
  position:absolute; left:-16px; bottom:34px; background:var(--pink); color:#fff;
  padding:14px 18px; max-width:180px; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.5;
}

/* ---------- Sektionen ---------- */
.section{padding-block:var(--sec)}
.section--beige{background:var(--beige)}
.section--rose{background:var(--rose-soft)}
.section--dark{background:var(--aubergine); color:var(--beige)}
.section--moss{background:var(--moos); color:var(--beige)}
.section--moss .lead,.section--moss .quotes-note{color:#FAE5E0}
.section--moss .eyebrow{color:var(--rose)}
.section--moss .quote{background:rgba(252,250,247,.96)}
.section--moss .pull cite{color:#F4B6AE}
.section--dark .lead{color:var(--rose-soft)}
.section-head{max-width:64ch; margin-bottom:clamp(28px,3.5vw,48px)}
.section-head h2{margin-bottom:.4em}

/* ---------- Werteversprechen ---------- */
.values{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px)}
.value{border-top:1px solid rgba(246,242,236,.35); padding-top:22px}
.value .num{
  font-family:var(--display); font-size:.9rem; letter-spacing:.2em; color:var(--rose); display:block; margin-bottom:12px;
}
.value h3{font-size:1.28rem; margin-bottom:.5em}
.value p{font-size:.95rem; color:var(--rose-soft); margin:0}

/* ---------- Zeitgewinn-Panel ---------- */
.timepanel{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,70px); align-items:center;
}
.timepanel figure{margin:0}
.timepanel img{width:100%; height:clamp(320px,42vw,560px); object-fit:cover; display:block}
.savings{list-style:none; margin:2rem 0 2.4rem; padding:0}
.savings li{
  display:flex; gap:16px; align-items:baseline; padding:14px 0; border-bottom:1px solid rgba(46,84,132,.12);
  font-size:1rem;
}
.savings b{font-family:var(--display); font-size:1.5rem; color:var(--wine); min-width:104px; font-weight:400}

/* ---------- Referenzen: drei Spalten, oben groß, darunter zwei ---------- */
.refs{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,38px)}
.ref{display:flex; flex-direction:column}
.ref figure{overflow:hidden; margin:0}
.ref-stack{display:grid; gap:clamp(8px,1vw,14px)}
.ref-duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1vw,14px)}
.ref img{
  width:100%; height:auto; object-fit:cover; display:block; cursor:zoom-in;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.ref-duo img{aspect-ratio:3/4}
.ref-big img{aspect-ratio:3/2}
.ref figure:hover img{transform:scale(1.04)}
.ref h3{font-size:clamp(1.25rem,1.9vw,1.6rem); margin:22px 0 6px}
.ref-meta{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
.ref-note{margin-top:12px; color:var(--ink-soft); font-size:.95rem}

/* ---------- Blogkopf: hell, kontrastreich, editorial ---------- */
.page-head--dark{
  background:var(--cream); color:var(--ink);
  padding-block:clamp(52px,7vw,96px) clamp(30px,4vw,54px);
  text-align:center;
}
.page-head--dark .wrap{max-width:900px}
.page-head--dark h1{color:var(--ink); margin-inline:auto; text-wrap:balance}
.page-head--dark .lead{color:var(--ink-soft); margin-inline:auto; max-width:58ch}
.page-head--dark .eyebrow{color:var(--wine)}
.page-head--dark .eyebrow a{color:var(--wine); text-decoration:none; border-bottom:1px solid var(--gold)}
.page-head--dark .eyebrow a:hover{color:var(--ink)}
.page-head--dark::after{
  content:""; display:block; width:56px; height:1px; background:var(--gold); margin:30px auto 0;
}
/* Fehler- und Dankeseite bleiben dunkel */
.page-head--dark.page-head--invert{
  background:var(--aubergine); color:var(--beige); text-align:left;
}
.page-head--invert h1{color:var(--beige)}
.page-head--invert .lead{color:var(--beige)}
.page-head--invert .eyebrow{color:var(--rose)}
.page-head--invert::after{margin-left:0}

/* ---------- Blogbeitrag ---------- */
.post-hero{margin:0; overflow:hidden}
.post-hero img{
  width:100%; height:clamp(300px,54vh,660px); object-fit:cover; object-position:var(--fokus,center 40%);
  display:block; cursor:zoom-in;
}
.post-hero figcaption{
  max-width:1480px; margin:12px auto 0; padding-inline:var(--gut);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.article{max-width:68ch; margin:0 auto}
.article p{font-size:1.06rem; line-height:1.78; color:var(--ink)}
.article--lead > p:first-of-type::first-letter{
  float:left; font-family:var(--display); font-size:3.6em; line-height:.86;
  padding:.06em .12em 0 0; color:var(--aubergine);
}
.article h2::before{
  content:""; display:block; width:38px; height:1px; background:var(--gold); margin-bottom:16px;
}
.article h2{font-size:clamp(1.4rem,2.4vw,2rem); margin:1.6em 0 .5em}
.article-quote{
  margin:clamp(32px,4vw,52px) 0; padding:clamp(26px,3vw,38px) 0; text-align:center;
  border-top:1px solid rgba(46,84,132,.22); border-bottom:1px solid rgba(46,84,132,.22);
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:1.32; color:var(--aubergine);
}
.post-gallery{
  display:grid; gap:clamp(12px,1.6vw,22px);
  margin:clamp(36px,5vw,76px) auto; max-width:1480px;
}
.post-gallery figure{margin:0; overflow:hidden}
.post-gallery img{
  width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.post-gallery figure:hover img{transform:scale(1.03)}
.post-gallery figcaption{font-size:.82rem; color:var(--ink-soft); margin-top:10px; line-height:1.5}

/* Ein Bild: breites Querformat */
.gal-1{grid-template-columns:1fr; max-width:1240px}
.gal-1 img{aspect-ratio:16/9}

/* Zwei Bilder nebeneinander, Hochformat */
.gal-2{grid-template-columns:repeat(2,1fr); max-width:1240px}
.gal-2 img{aspect-ratio:4/5}

/* Drei quadratische Bilder nebeneinander */
.gal-3{grid-template-columns:repeat(3,1fr)}
.gal-3 img{aspect-ratio:1/1}

/* Zwei Hochformate, darunter ein Querformat über die volle Breite */
.gal-2plus1{grid-template-columns:repeat(2,1fr); max-width:1240px}
.gal-2plus1 img{aspect-ratio:4/5}
.gal-2plus1 figure:nth-child(3){grid-column:1/-1}
.gal-2plus1 figure:nth-child(3) img{aspect-ratio:16/7}

/* Vier Bilder als ruhiges Zweierraster */
.gal-4{grid-template-columns:repeat(2,1fr); max-width:1240px}
.gal-4 img{aspect-ratio:4/5}

@media (max-width:700px){
  .gal-3{grid-template-columns:repeat(2,1fr)}
  .gal-3 figure:nth-child(3){grid-column:1/-1}
  .gal-3 figure:nth-child(3) img{aspect-ratio:16/9}
  .gal-2plus1 figure:nth-child(3) img{aspect-ratio:3/2}
}
@media (max-width:520px){
  .gal-2,.gal-4,.gal-2plus1,.gal-3{grid-template-columns:1fr}
  .post-gallery img{aspect-ratio:4/5 !important}
  .gal-2plus1 figure:nth-child(3) img,.gal-3 figure:nth-child(3) img{aspect-ratio:3/2 !important}
}

.credits{
  margin-top:clamp(40px,5vw,72px); padding-top:20px;
  border-top:1px solid rgba(46,84,132,.16); background:transparent;
}
.credits h2{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 10px; font-weight:400;
}
.credits h2::before{display:none}
.credits ul{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 0;
  font-size:.8rem; line-height:1.7; color:var(--ink-soft);
}
.credits li{display:inline; padding:0; border:0}
.credits li + li::before{content:"·"; color:var(--gold); margin:0 10px}
.credits li span{color:var(--ink-soft)}
.credits li span::after{content:" "}
.credits li a{color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(46,84,132,.28)}
.credits li a:hover{color:var(--wine); border-color:var(--wine)}
.credit-note{font-size:.7rem; color:var(--ink-soft); opacity:.7; margin-top:12px}

/* ---------- Referenzenseite ---------- */
.case{padding-bottom:clamp(38px,5vw,64px); margin-bottom:clamp(38px,5vw,64px); border-bottom:1px solid rgba(46,84,132,.14)}
.case:last-child{border-bottom:0; margin-bottom:0}
.case-head{display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(20px,4vw,56px); align-items:start; margin-bottom:26px}
.case-name{font-size:clamp(1.5rem,2.6vw,2.1rem); margin:6px 0 6px}
.case-meta{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin:0}
.case-meta a{text-decoration:none}
.case-meta a:hover{color:var(--wine)}
.case-quote{
  margin:0; font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.35rem); line-height:1.4;
  color:var(--ink); border-left:2px solid var(--pink); padding-left:22px;
}
.case-credit{font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft); margin:10px 0 0}
.case-credit a{color:var(--wine); text-underline-offset:3px}
.case-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.2vw,16px)}
.case-grid figure{margin:0; position:relative; overflow:hidden}
.case-grid figure:first-child{grid-column:span 2; grid-row:span 2}
.case-grid img{width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; display:block; cursor:zoom-in; transition:transform .6s ease}
.case-grid figure:first-child img{aspect-ratio:4/5}
.case-grid figure:hover img{transform:scale(1.03)}
figcaption.on-image{
  position:absolute; left:0; bottom:0; z-index:2; background:rgba(46,84,132,.78); color:var(--beige);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:7px 12px;
}
figcaption.on-image a{color:#fff}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:120; background:rgba(34,64,106,.94);
  display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out;
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px,92vw); max-height:82vh; width:auto; height:auto; object-fit:contain}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px;
  background:transparent; border:1px solid rgba(246,242,236,.45); color:var(--beige);
  font-size:1.2rem; cursor:pointer; line-height:1; transition:.2s;
}
.lb-nav:hover{background:var(--beige); color:var(--aubergine)}
.lb-prev{left:clamp(10px,3vw,40px)}
.lb-next{right:clamp(10px,3vw,40px)}
.lb-count{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:var(--rose); font-size:.72rem; letter-spacing:.22em;
}
@media (max-width:560px){ .lb-nav{width:44px; height:44px} }
.lightbox-close{
  position:absolute; top:18px; right:18px; width:46px; height:46px; background:transparent;
  border:1px solid rgba(246,242,236,.5); color:var(--beige); font-size:1.4rem; cursor:pointer; line-height:1;
}
.lightbox-close:hover{background:var(--beige); color:var(--aubergine)}
.mosaic img{cursor:zoom-in}

/* ---------- Stimmen echter Paare ---------- */
.pull{
  max-width:34ch; margin:0 auto clamp(36px,5vw,60px); text-align:center;
}
.pull blockquote{
  font-family:var(--display); font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.25; margin:0 0 18px;
}
.stars{letter-spacing:.3em; color:var(--wine); font-size:.85rem; display:block; margin-bottom:16px}
.section--moss .stars,.section--dark .stars{color:var(--gold)}
.pull cite{font-style:normal; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft)}
.quotes{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,28px)}
.quote{background:var(--cream); padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column}
.quote p{font-size:.97rem; color:var(--ink); margin:0 0 18px}
.quote cite{
  margin-top:auto; font-style:normal; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--wine);
}
.quotes-note{margin-top:clamp(28px,4vw,44px); text-align:center; font-size:.9rem; color:var(--ink-soft)}

/* ---------- Prozess ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,40px); counter-reset:s}
.step{position:relative; padding-top:26px; border-top:1px solid rgba(46,84,132,.2)}
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:var(--display); font-size:.8rem; letter-spacing:.18em; color:var(--wine);
  position:absolute; top:-2px; transform:translateY(-100%);
}
.step h3{font-size:1.2rem; margin-bottom:.45em}
.step p{font-size:.94rem; color:var(--ink-soft); margin:0}

/* ---------- Preise ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,28px); align-items:stretch}
.plan{
  position:relative;
  background:#ECEFF4;                       /* zarter Blauton, damit die Karten nicht verloren wirken */
  border:1px solid rgba(46,84,132,.18); padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column;
}
.plan li{border-bottom-color:rgba(46,84,132,.16)}
.plan--hero{
  background:var(--aubergine); color:var(--beige); border-color:var(--aubergine);
  position:relative; box-shadow:0 30px 60px -34px rgba(34,64,106,.85);
}
@media (min-width:1021px){
  .plan--hero{margin-block:-20px; padding-top:calc(clamp(26px,3vw,40px) + 20px);
              padding-bottom:calc(clamp(26px,3vw,40px) + 20px)}
}
.plan-flag{
  position:absolute; top:0; right:0; background:var(--gold); color:#241E00;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; padding:8px 14px;
}
.plan-name{font-family:var(--display); font-size:1.6rem; margin-bottom:.15em}
.plan-claim{font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--wine); margin-bottom:1.4em}
.plan--hero .plan-claim{color:var(--rose)}
.plan-price{font-family:var(--display); font-size:2.5rem; line-height:1; margin-bottom:.2em}
.plan-price small{font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:10px}
.plan--hero .plan-price small{color:var(--rose-soft)}
.plan ul{list-style:none; margin:1.8rem 0 2rem; padding:0; font-size:.95rem}
.plan li{padding:9px 0 9px 22px; position:relative; border-bottom:1px solid rgba(46,84,132,.1)}
.plan--hero li{border-color:rgba(246,242,236,.18)}
.plan li::before{content:""; position:absolute; left:0; top:18px; width:9px; height:1px; background:var(--gold)}
.plan .btn{margin-top:auto; width:100%}
.plan-bonus{font-size:.85rem; color:var(--wine); margin-top:-.6rem}
.plan--hero .plan-bonus{color:var(--pink-light)}

.addon-note{margin-top:clamp(40px,5vw,64px); font-size:.92rem; color:var(--ink-soft)}

/* Weitere Bestandteile */
.addons{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,4vw,60px); margin-top:clamp(40px,6vw,80px)}
.pricelist{list-style:none; margin:1.4rem 0 0; padding:0}
.pricelist li{
  display:flex; justify-content:space-between; gap:18px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid rgba(46,84,132,.12); font-size:.97rem;
}
.pricelist li span:last-child{white-space:nowrap; color:var(--wine); font-family:var(--display)}
.pricelist li em{display:block; font-style:normal; font-size:.82rem; color:var(--ink-soft); margin-top:3px}
.addon-title{font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--wine)}

/* ---------- Bildband ---------- */
.band{margin:0 auto; max-width:900px; padding:0 var(--gut) clamp(40px,6vw,80px)}
.band img{width:100%; height:auto; display:block}

/* ---------- About ---------- */
.about{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,80px); align-items:center}
.about img{width:100%; aspect-ratio:3/5; height:auto; object-fit:cover; display:block}
.about figure{max-width:440px}
.signature{font-family:var(--display); font-style:italic; font-size:1.6rem; margin-top:1.2rem}

/* ---------- Inspiration / Instagram ---------- */
.mosaic{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.2vw,16px)}
.mosaic img{width:100%; height:clamp(140px,19vw,300px); object-fit:cover; transition:transform .6s ease}
.mosaic a{overflow:hidden; display:block}
.mosaic a:hover img{transform:scale(1.05)}
.insta-bar{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; margin-top:32px}

/* ---------- Terminbuchung ---------- */
.booking{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,4vw,64px); align-items:start}
.cal{background:var(--cream); color:var(--ink); padding:clamp(20px,3vw,32px); border:1px solid rgba(46,84,132,.15)}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.cal-head strong{font-family:var(--display); font-weight:400; font-size:1.25rem}
.cal-nav{display:flex; gap:8px}
.cal-nav button{
  width:38px; height:38px; border:1px solid rgba(46,84,132,.3); background:transparent; cursor:pointer;
  color:var(--aubergine); font-size:1rem; line-height:1;
}
.cal-nav button:hover:not(:disabled){background:var(--aubergine); color:var(--beige)}
.cal-nav button:disabled{opacity:.3; cursor:not-allowed}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal-dow{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; text-align:center;
  color:var(--ink-soft); padding-bottom:6px;
}
.cal-day{
  aspect-ratio:1/1; border:1px solid transparent; background:var(--beige); color:var(--ink);
  font-family:var(--sans); font-size:.9rem; cursor:pointer; transition:.2s;
}
.cal-day:hover:not(:disabled){background:var(--rose-soft)}
.cal-day:disabled{background:transparent; color:rgba(42,52,64,.22); cursor:not-allowed}
.cal-day.is-selected{background:var(--aubergine); color:var(--beige)}
.cal-legend{font-size:.72rem; color:var(--ink-soft); margin-top:14px}
.slots{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.slot{
  padding:.7em 1.1em; border:1px solid rgba(46,84,132,.3); background:transparent; cursor:pointer;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aubergine);
}
.slot:hover{background:var(--rose-soft)}
.slot.is-selected{background:var(--pink); border-color:var(--pink); color:#fff}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose)}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; font-weight:300; padding:.85em 1em; color:var(--beige);
  background:rgba(252,250,247,.06); border:1px solid rgba(246,242,236,.3); border-radius:0;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(246,242,236,.45)}
.field select option{color:var(--ink)}
.field textarea{resize:vertical; min-height:110px}
.form-foot{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:22px}
.form-hint{font-size:.8rem; color:var(--rose-soft); max-width:44ch}
.summary{
  border:1px solid rgba(246,242,236,.3); padding:16px 18px; margin-bottom:22px;
  font-size:.9rem; color:var(--rose-soft);
}
.summary b{color:var(--beige); font-weight:400}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--rose-soft); grid-column:1/-1}
.consent input{width:18px; height:18px; margin-top:3px; accent-color:var(--pink)}
.consent a{color:var(--pink-light)}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status{
  border:1px solid var(--rose); padding:14px 18px; margin:0 0 20px; font-size:.95rem; color:var(--beige);
}
.form-status.is-error{border-color:var(--pink); color:#F4B6AE}
.form-status.is-ok{border-color:var(--rose); background:rgba(211,181,132,.12)}

/* ---------- FAQ / Legal ---------- */
.page-head{background:var(--beige); padding-block:clamp(48px,7vw,96px)}
.head-split{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,4vw,60px); align-items:center}
.head-figure{margin:0; overflow:hidden; max-width:480px}
.head-figure img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; cursor:zoom-in}
@media (max-width:860px){
  .head-split{grid-template-columns:1fr}
  .head-figure{order:2; max-width:520px; margin-inline:auto}
}
.intro{max-width:62ch; margin-top:18px}
.intro p{color:var(--ink-soft)}
.intro .lead{color:var(--ink); margin-bottom:.9em}
.acc{border-top:1px solid rgba(46,84,132,.18)}
.acc-item{border-bottom:1px solid rgba(46,84,132,.18)}
.acc-btn{
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:26px 44px 26px 0; font-family:var(--display); font-size:clamp(1.1rem,2vw,1.45rem);
  color:var(--ink); position:relative;
}
.acc-btn::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:1.4rem; color:var(--wine); transition:transform .3s ease;
}
.acc-btn[aria-expanded="true"]::after{transform:translateY(-50%) rotate(45deg)}
.acc-panel{display:none; padding:0 0 28px; max-width:70ch; color:var(--ink-soft)}
.acc-panel.open{display:block}

.legal{max-width:80ch; padding-block:clamp(48px,7vw,96px)}
.legal h2{font-size:clamp(1.5rem,3vw,2.1rem); margin:2.4em 0 .7em}
.legal h3{font-size:1.15rem; margin:1.8em 0 .5em}
.legal p,.legal li{color:var(--ink-soft); font-size:1rem}
.legal ul{padding-left:1.1em}
.legal a{color:var(--wine)}
.toc{background:var(--beige); padding:24px 28px; columns:2; column-gap:32px; font-size:.94rem}
.toc a{text-decoration:none; color:var(--wine)}
.toc a:hover{text-decoration:underline}

/* ---------- Footer ---------- */
.site-foot{background:var(--aubergine-deep); color:var(--rose-soft); padding-block:clamp(56px,7vw,96px) 0}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(24px,4vw,56px)}
.site-foot h4{font-family:var(--sans); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--rose); margin:0 0 16px}
.site-foot a{color:var(--rose-soft); text-decoration:none}
.site-foot a:hover{color:#fff}
.foot-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.95rem}
.foot-brand img{height:46px; width:auto; display:block}
.foot-claim{font-size:.95rem; margin-top:14px; max-width:34ch}
.insta-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:8px; font-size:.95rem;
  border:1px solid rgba(246,242,236,.35); padding:.75em 1.2em;
}
.insta-link:hover{background:var(--pink); border-color:var(--pink); color:#fff}
.foot-bottom{
  margin-top:clamp(40px,6vw,72px); border-top:1px solid rgba(246,242,236,.16); padding:22px 0 28px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.78rem; color:rgba(246,242,236,.7);
}

/* ---------- Motion ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .post--feature{grid-column:span 2}
  .refs{grid-template-columns:repeat(3,1fr); gap:14px}
  .case-head{grid-template-columns:1fr; gap:16px}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .post-gallery{grid-template-columns:repeat(2,1fr)}
  .credits ul{grid-template-columns:1fr}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr); gap:34px}
  .plans{grid-template-columns:1fr; gap:18px}
  .plan--hero{order:-1}
  .booking{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  html{scroll-padding-top:90px}
  .hero-grid{grid-template-columns:1fr; padding-top:clamp(30px,7vw,60px)}
  .hero-copy{padding-bottom:34px}
  .hero-figure img{height:clamp(340px,80vw,520px)}
  .hero-note{left:auto; right:14px; bottom:14px}
  .timepanel,.about{grid-template-columns:1fr}
  .about img{order:-1}
  .addons{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .toc{columns:1}
}
@media (max-width:700px){
  .refs{grid-template-columns:1fr; gap:34px}
  .ref img{aspect-ratio:16/11}
  .hero-figure,.about figure{max-width:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .post--feature{grid-column:span 1}
  .case-grid figure:first-child{grid-column:span 2; grid-row:auto}
  .post-gallery{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .hero-actions{flex-direction:column; align-items:stretch}
  .savings b{min-width:78px; font-size:1.25rem}
}


/* ---------- Ergänzungen: Trust, Details, Blog, Consent ---------- */
.hero-trust{
  margin-top:26px; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--wine);
}
figure{margin:0}

.addon-details{margin-top:clamp(36px,5vw,60px); border-top:1px solid rgba(46,84,132,.18)}
.addon-details summary{
  cursor:pointer; padding:22px 0; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--wine);
  list-style:none;
}
.addon-details summary::-webkit-details-marker{display:none}
.addon-details summary::after{content:" +"; color:var(--gold)}
.addon-details[open] summary::after{content:" –"}
.addon-details .addons{margin-top:0; padding-bottom:20px}

.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px)}
.post--feature{grid-column:span 3; display:grid; grid-template-columns:1.25fr 1fr;
  gap:clamp(20px,3vw,44px); align-items:center; padding-bottom:clamp(16px,2.5vw,30px);
  border-bottom:1px solid rgba(46,84,132,.18)}
.post--feature > a{display:grid; grid-template-columns:subgrid; grid-column:span 2; align-items:center;
  gap:clamp(20px,3vw,44px)}
.post--feature img{height:clamp(260px,34vw,460px)}
.post--feature .post-title{font-size:clamp(1.7rem,3vw,2.6rem)}
.post--feature .post-teaser{font-size:1.05rem}
@supports not (grid-template-columns:subgrid){
  .post--feature > a{grid-template-columns:1.25fr 1fr}
}
@media (max-width:860px){
  .post--feature,.post--feature > a{grid-template-columns:1fr}
}
.post a{text-decoration:none; display:block}
.post img{width:100%; height:clamp(220px,26vw,340px); object-fit:cover; transition:transform .6s ease}
.post picture{display:block; overflow:hidden}
.post a:hover img{transform:scale(1.04)}
.post-meta{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin:18px 0 8px;
}
.post-title{font-family:var(--display); font-size:1.35rem; font-weight:400; line-height:1.15; margin:0 0 .5em}
.post-teaser{font-size:.95rem; color:var(--ink-soft); margin-bottom:.8em}
.post-more{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--wine);
  border-bottom:1px solid var(--pink); padding-bottom:3px;
}

.consent-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--aubergine); color:var(--rose-soft);
  padding:18px var(--gut); display:none; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  box-shadow:0 -20px 40px -30px rgba(0,0,0,.8);
}
.consent-bar.show{display:flex}
.consent-bar p{margin:0; font-size:.85rem; max-width:62ch}
.consent-bar a{color:var(--pink-light)}
.consent-actions{display:flex; gap:10px; flex-wrap:wrap}
.consent-bar .btn{padding:.7em 1.4em; font-size:.7rem}

@media (max-width:1020px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .posts{grid-template-columns:1fr}
  .consent-bar .btn{width:auto}
}


/* --- Feinschliff Riviera --- */
.btn--pink{color:#241E00}
.btn--pink:hover{background:var(--aubergine); border-color:var(--aubergine); color:var(--beige)}
.nav .btn--pink:hover{background:var(--aubergine); border-color:var(--aubergine); color:var(--beige)}
.plan-flag{background:var(--pink); color:#241E00}
.stars{color:var(--wine)}
.section--moss .stars,.section--dark .stars{color:#F4B6AE}
.section--rose{background:#F5B9CB; color:var(--ink)}
.section--rose .eyebrow{color:#22406A}
.section--rose .step p{color:#3B4654}
.section--rose .step{border-top-color:rgba(34,64,106,.32)}
.section--rose .step::before{color:#22406A}
.section--moss .quote{background:rgba(252,250,247,.96)}
.section--moss .lead,.section--moss .quotes-note{color:#EDE4DC}
.section--moss .pull cite{color:#F4B6AE}
.ticker{background:#F5B9CB; color:#22406A}
.ticker span::after{color:#2E5484}
.article--lead > p:first-of-type::first-letter{color:var(--wine)}

.skip{position:absolute;left:-9999px;top:0;background:var(--aubergine);color:var(--beige);padding:12px 18px;z-index:100}
.skip:focus{left:0}