/* ============================================================
   SOHO GALLERY STUDIOS
   Alle Farben, Abstände und Schriftgrößen sind hier oben
   als Variablen definiert. Wer etwas global ändern will,
   ändert es hier — nicht weiter unten im Dokument.
   ============================================================ */

:root{
  --ink:        #14120f;
  --ink-soft:   #6b645b;
  --ink-faint:  #9a938a;
  --paper:      #faf8f5;
  --paper-warm: #f2eee8;
  --sand:       #e7e0d6;
  --line:       rgba(20,18,15,.13);
  --line-soft:  rgba(20,18,15,.07);

  /* Akzentfarbe aus dem Logo. Wird ausschliesslich für Interaktion
     und für Zahlen eingesetzt, nie für Flächen. */
  --accent:      #ea5599;
  --accent-soft: rgba(234,85,153,.16);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;

  --wrap: 1440px;
  --gut: clamp(20px, 5vw, 72px);
  --sec: clamp(80px, 11vw, 180px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--ink); color:var(--paper); }

/* ---------- Typo ---------- */

h1,h2,h3,h4{
  margin:0;
  font-weight:300;
  letter-spacing:-.035em;
  line-height:1.03;
}

.display{ font-size:clamp(2.6rem,7.4vw,7rem); }
.h2{ font-size:clamp(1.9rem,4.4vw,4.1rem); line-height:1.06; }
.h3{ font-size:clamp(1.3rem,2.1vw,2rem); letter-spacing:-.025em; line-height:1.15; }

.kicker{
  font-size:.685rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-faint);
  margin:0 0 clamp(18px,2.4vw,30px);
}

.lead{
  font-size:clamp(1.05rem,1.55vw,1.4rem);
  line-height:1.5;
  letter-spacing:-.012em;
  color:var(--ink-soft);
  max-width:56ch;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.muted{ color:var(--ink-soft); }
.tiny{ font-size:.8rem; line-height:1.55; color:var(--ink-faint); }

/* ---------- Layout ---------- */

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:var(--gut);
}
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:clamp(56px,7vw,110px); }
.bleed{ width:100%; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Header ---------- */

.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:clamp(16px,1.8vw,26px) var(--gut);
  color:var(--paper);
  transition:background .45s var(--ease), color .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
/* Fallback ohne JavaScript: Seiten ohne Hero-Bild bekommen die
   dunkle Kopfzeile direkt, damit sie beim Laden nicht kurz unsichtbar ist. */
body:not(:has(.hero)) .hdr{
  background:rgba(250,248,245,.93);
  color:var(--ink);
  padding-block:clamp(11px,1.2vw,16px);
}

.hdr.is-solid{
  background:rgba(250,248,245,.93);
  backdrop-filter:saturate(1.4) blur(14px);
  color:var(--ink);
  padding-block:clamp(11px,1.2vw,16px);
  box-shadow:0 1px 0 var(--line-soft);
}
/* ---------- Logo ---------- */

.brand{ display:flex; align-items:center; line-height:0; text-decoration:none; }
.brand__logo{
  height:clamp(40px,3.9vw,56px);
  width:auto; display:block;
}

/* Über dem Hero-Bild die helle Fassung, auf hellem Grund die dunkle. */
.brand__logo--dark{ display:none; }
.hdr.is-solid .brand__logo--light,
.hdr.nav-open  .brand__logo--light{ display:none; }
.hdr.is-solid .brand__logo--dark,
.hdr.nav-open  .brand__logo--dark{ display:block; }

/* Seiten ohne Hero: immer die dunkle Fassung */
body:not(:has(.hero)) .brand__logo--light{ display:none; }
body:not(:has(.hero)) .brand__logo--dark{ display:block; }

/* Logo in der Fusszeile — dort ist der Grund dunkel */
.ftr__logo{ height:clamp(56px,6vw,82px); width:auto; display:block; margin-bottom:1.3em; }

.nav{ display:flex; align-items:center; gap:clamp(20px,2.4vw,40px); }
.nav a{
  font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; opacity:.82; transition:opacity .25s;
}
.nav a:hover{ opacity:1; }

.navtoggle{
  display:none; background:none; border:0; color:inherit; cursor:pointer;
  font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; padding:6px 0;
}

@media(max-width:860px){
  .nav{
    position:fixed; inset:0; z-index:1;
    background:var(--paper); color:var(--ink);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:6px; padding:var(--gut);
    overflow-y:auto;
    transform:translateY(-101%);
    visibility:hidden;
    transition:transform .5s var(--ease), visibility 0s linear .5s;
  }
  .nav.is-open{
    transform:none;
    visibility:visible;
    transition:transform .5s var(--ease), visibility 0s;
  }
  .nav a{ font-size:1.6rem; text-transform:none; letter-spacing:-.02em; opacity:1; padding:8px 0; }

  /* Logo und Menü-Knopf müssen über dem Overlay liegen, sonst
     verschwinden sie darunter, sobald das Menü offen ist. */
  .brand, .navtoggle{ position:relative; z-index:2; }
  .navtoggle{ display:block; }

  /* Wichtig: Solange das Menü offen ist, darf die Kopfzeile keinen
     eigenen Positionierungs-Kontext erzeugen. backdrop-filter würde
     das Overlay sonst an der Kopfzeile statt am Bildschirm verankern —
     dann bleibt es beim Schliessen halb sichtbar. */
  .hdr.nav-open{
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
    color:var(--ink);
  }
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex; align-items:center; gap:.7em;
  padding:.95em 1.7em;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  text-decoration:none; border:1px solid currentColor; border-radius:100px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s;
  white-space:nowrap;
}
.btn--solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--solid:hover{ background:transparent; color:inherit; }
.btn--ghost:hover{ background:currentColor; }
.btn--ghost:hover span{ mix-blend-mode:difference; }
.btn--light{ color:var(--paper); }
.btn--light.btn--solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--light.btn--solid:hover{ background:transparent; color:var(--paper); }

.btns{ display:flex; flex-wrap:wrap; gap:12px; }

.arrowlink{
  display:inline-flex; align-items:center; gap:.55em;
  text-decoration:none; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:.35em;
  transition:gap .3s var(--ease), border-color .3s;
}
.arrowlink:hover{ gap:1.1em; border-color:var(--ink); }

/* ---------- Hero ---------- */

.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  color:var(--paper); overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  animation:heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,9,7,.42) 0%,rgba(10,9,7,.06) 38%,rgba(10,9,7,.62) 100%);
}
.hero__inner{ position:relative; width:100%; padding-bottom:clamp(48px,7vw,104px); }
.hero .kicker{ color:rgba(250,248,245,.72); }
.hero .display{ max-width:15ch; }
.hero__sub{
  margin-top:clamp(20px,2.6vw,34px);
  max-width:46ch; font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.5;
  color:rgba(250,248,245,.88);
}
.hero .btns{ margin-top:clamp(28px,3.4vw,44px); }

.scrollhint{
  position:absolute; right:var(--gut); bottom:clamp(48px,7vw,104px);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(250,248,245,.6);
  writing-mode:vertical-rl;
}
@media(max-width:700px){ .scrollhint{ display:none; } }

/* ---------- Faktenband ---------- */

.facts{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(22px,2.6vw,34px);
  overflow:hidden;
}
.facts__track{
  display:flex; gap:clamp(28px,4vw,64px);
  align-items:center; white-space:nowrap;
  animation:marquee 42s linear infinite;
  width:max-content;
}
.facts:hover .facts__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.facts__item{
  display:inline-flex; align-items:baseline; gap:.6em;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
}
.facts__item b{ font-weight:500; }
.facts__item::after{ content:"·"; color:rgba(250,248,245,.35); margin-left:.6em; }

/* ---------- Statement ---------- */

.statement{ max-width:24ch; }
.grid2{
  display:grid; gap:clamp(28px,4vw,90px);
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:900px){
  .grid2{ grid-template-columns:1.05fr .95fr; }
  .grid2--split{ grid-template-columns:.85fr 1.15fr; }
}

/* ---------- Bereiche ---------- */

.areas{
  display:grid; gap:clamp(18px,2.4vw,34px);
  grid-template-columns:1fr;
  margin-top:clamp(40px,5vw,80px);
}
@media(min-width:820px){ .areas{ grid-template-columns:1fr 1fr; } }

.area{ position:relative; }
.area__media{ position:relative; overflow:hidden; background:var(--sand); aspect-ratio:4/5; }
.area__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.area:hover .area__media img{ transform:scale(1.035); }
.area__tag{
  position:absolute; top:16px; left:16px; z-index:2;
  background:rgba(250,248,245,.94); color:var(--ink);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.55em 1em; border-radius:100px;
}
.area__body{ padding-top:clamp(18px,2vw,26px); }
.area__body h3{ margin-bottom:.5em; }
.area__meta{
  list-style:none; margin:1.1em 0 0; padding:0;
  border-top:1px solid var(--line);
}
.area__meta li{
  display:flex; justify-content:space-between; gap:20px;
  padding:.62em 0; border-bottom:1px solid var(--line-soft);
  font-size:.88rem;
}
.area__meta span:first-child{ color:var(--ink-soft); }
.area__meta span:last-child{ text-align:right; }

.joiner{
  margin-top:clamp(28px,3.4vw,46px);
  padding:clamp(20px,2.6vw,32px) clamp(22px,3vw,40px);
  background:var(--paper-warm);
  display:flex; gap:clamp(16px,2.4vw,34px); align-items:center; flex-wrap:wrap;
}
.joiner__num{
  font-family:var(--font-serif); font-size:clamp(2.2rem,4vw,3.4rem);
  line-height:1; letter-spacing:-.03em;
}

/* ---------- Lichtdramaturgie ---------- */

.light{ background:var(--ink); color:var(--paper); }
.light .kicker{ color:rgba(250,248,245,.5); }
.light .lead{ color:rgba(250,248,245,.72); }

.lighttabs{
  display:flex; gap:0; flex-wrap:wrap;
  margin-top:clamp(36px,4.6vw,64px);
  border-top:1px solid rgba(250,248,245,.18);
}
.lighttab{
  flex:1 1 200px; text-align:left; background:none; border:0; cursor:pointer;
  color:rgba(250,248,245,.5); font-family:inherit;
  padding:clamp(18px,2.2vw,28px) clamp(14px,1.6vw,22px) clamp(18px,2.2vw,28px) 0;
  border-top:2px solid transparent; margin-top:-1px;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.lighttab:hover{ color:rgba(250,248,245,.8); }
.lighttab.is-on{ color:var(--paper); border-top-color:var(--paper); }
.lighttab__time{ display:block; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.7em; }
.lighttab__ttl{ display:block; font-size:clamp(1.05rem,1.6vw,1.45rem); font-weight:300; letter-spacing:-.02em; line-height:1.2; }

.lightpanes{ position:relative; margin-top:clamp(28px,3.4vw,48px); }
.lightpane{
  display:none; gap:clamp(24px,3.4vw,64px);
  grid-template-columns:1fr;
}
.lightpane.is-on{ display:grid; animation:fadeUp .8s var(--ease) both; }
@media(min-width:900px){ .lightpane{ grid-template-columns:1.35fr .65fr; align-items:end; } }
.lightpane__media{ aspect-ratio:16/10; overflow:hidden; background:#26221d; }
.lightpane__media img{ width:100%; height:100%; object-fit:cover; }
.lightpane__txt p{ color:rgba(250,248,245,.75); }
.lightpane__txt .h3{ margin-bottom:.6em; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ---------- Galerie ---------- */

.gal{
  display:grid; gap:clamp(10px,1.1vw,18px);
  grid-template-columns:repeat(2,1fr);
  margin-top:clamp(36px,4.4vw,64px);
}
@media(min-width:820px){ .gal{ grid-template-columns:repeat(12,1fr); } }
.gal figure{ margin:0; overflow:hidden; background:var(--sand); position:relative; cursor:zoom-in; }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), opacity .5s; }
.gal figure:hover img{ transform:scale(1.04); }
@media(min-width:820px){
  .g-a{ grid-column:span 7; aspect-ratio:16/11; }
  .g-b{ grid-column:span 5; aspect-ratio:4/5; }
  .g-c{ grid-column:span 4; aspect-ratio:1/1; }
  .g-d{ grid-column:span 4; aspect-ratio:1/1; }
  .g-e{ grid-column:span 4; aspect-ratio:1/1; }
  .g-f{ grid-column:span 5; aspect-ratio:4/5; }
  .g-g{ grid-column:span 7; aspect-ratio:16/11; }
}
@media(max-width:819px){ .gal figure{ aspect-ratio:1/1; } .gal .g-a{ grid-column:span 2; aspect-ratio:16/11; } }

/* ---------- Lightbox ---------- */

.lb{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(12,11,9,.94); align-items:center; justify-content:center;
  padding:clamp(16px,4vw,60px);
}
.lb.is-open{ display:flex; animation:fade .35s var(--ease) both; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.lb img{ max-width:100%; max-height:88vh; object-fit:contain; }
.lb__close{
  position:absolute; top:clamp(14px,2.4vw,28px); right:clamp(14px,2.4vw,28px);
  background:none; border:0; color:var(--paper); cursor:pointer;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-family:inherit;
}

/* ---------- Feature-Reihe (Umräumen etc.) ---------- */

.feat{ display:grid; gap:clamp(30px,4vw,72px); grid-template-columns:1fr; align-items:center; }
@media(min-width:900px){
  .feat{ grid-template-columns:1fr 1fr; }
  .feat--flip .feat__media{ order:2; }
}
.feat__media{ aspect-ratio:5/4; overflow:hidden; background:var(--sand); }
.feat__media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Listen / Ausstattung ---------- */

.cols{
  display:grid; gap:clamp(26px,3vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:clamp(34px,4vw,60px);
}
.col h4{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  padding-bottom:.9em; margin-bottom:1.1em; border-bottom:1px solid var(--line);
}
.col ul{ list-style:none; margin:0; padding:0; }
.col li{ padding:.34em 0; font-size:.92rem; color:var(--ink-soft); }

/* ---------- Zugang / offene Karten ---------- */

/* Zwei Korrekturen gegenüber vorher:
   1. Feste Spaltenzahl statt auto-fit — sonst entsteht bei sechs Karten
      auf breiten Bildschirmen 5 + 1.
   2. Die Trennlinien liegen jetzt an den Karten selbst, nicht als
      Hintergrund am Container. Dadurch bleibt bei einer unvollständigen
      letzten Reihe keine graue Restfläche stehen — unabhängig davon,
      wie viele Karten eine Sektion hat. */
.cards{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  margin-top:clamp(34px,4vw,60px);
  border-top:1px solid var(--line);
  overflow:hidden;
}
@media(min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .cards{ grid-template-columns:repeat(3,1fr); } }

.card{ background:var(--paper); padding:clamp(24px,2.8vw,40px); }
.cards > .card{ box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line); }
.card__n{
  font-size:.7rem; letter-spacing:.2em; color:var(--ink-faint);
  display:block; margin-bottom:1.4em;
}
.card h4{ font-size:clamp(1.02rem,1.4vw,1.25rem); font-weight:400; letter-spacing:-.02em; margin:0 0 .55em; }
.card p{ font-size:.9rem; color:var(--ink-soft); margin:0; }

/* ---------- Preis-Teaser ---------- */

.pricerow{
  display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  padding:1.05em 0; border-bottom:1px solid var(--line);
}
.pricerow:first-of-type{ border-top:1px solid var(--line); }
.pricerow b{ font-weight:400; }
.pricerow span{ color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- Preistabelle (Preisseite) ---------- */

.ptable{ width:100%; border-collapse:collapse; margin-top:clamp(22px,2.4vw,34px); }
.ptable th{
  text-align:left; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--ink-faint); padding:0 0 .9em; border-bottom:1px solid var(--line);
}
.ptable th:last-child, .ptable td:last-child{ text-align:right; }
.ptable td{ padding:.82em 0; border-bottom:1px solid var(--line-soft); font-size:.95rem; font-variant-numeric:tabular-nums; }
.ptable tr:last-child td{ border-bottom:1px solid var(--line); }

.tariff{ margin-bottom:clamp(50px,6vw,90px); }
.tariff__head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; }
.tariff__from{ font-family:var(--font-serif); font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.03em; }

/* ---------- FAQ ---------- */

.faq{ margin-top:clamp(30px,3.6vw,54px); border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:clamp(18px,2.1vw,28px) 44px clamp(18px,2.1vw,28px) 0;
  position:relative; font-size:clamp(1rem,1.35vw,1.2rem); font-weight:300; letter-spacing:-.02em;
  transition:color .25s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:13px; height:1px;
  background:var(--ink); transition:transform .35s var(--ease);
}
.faq summary::before{
  content:""; position:absolute; right:14px; top:50%; width:1px; height:13px;
  background:var(--ink); margin-top:-6px; transition:transform .35s var(--ease), opacity .3s;
}
.faq details[open] summary::before{ opacity:0; transform:rotate(90deg); }
.faq summary:hover{ color:var(--ink-soft); }
.faq__body{ padding:0 clamp(40px,8vw,140px) clamp(22px,2.4vw,32px) 0; color:var(--ink-soft); font-size:.95rem; }

/* ---------- CTA ---------- */

.cta{
  position:relative; color:var(--paper); overflow:hidden;
  display:flex; align-items:center; min-height:clamp(460px,66vh,760px);
}
.cta__media{ position:absolute; inset:0; }
.cta__media img{ width:100%; height:100%; object-fit:cover; }
.cta__media::after{ content:""; position:absolute; inset:0; background:rgba(12,11,9,.5); }
.cta__inner{ position:relative; width:100%; }

/* ---------- Formular ---------- */

.form{ display:grid; gap:clamp(16px,1.8vw,24px); grid-template-columns:1fr; margin-top:clamp(30px,3.4vw,48px); }
@media(min-width:760px){ .form{ grid-template-columns:1fr 1fr; } .form .f-full{ grid-column:1/-1; } }
.field label{
  display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.7em;
}
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.55em 0; border-radius:0; transition:border-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-bottom-color:var(--ink);
}
.field textarea{ resize:vertical; min-height:110px; }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:.86rem; color:var(--ink-soft); }
.check input{ width:16px; height:16px; margin-top:3px; flex:none; accent-color:var(--ink); }

/* --- Auswahl mit zwei Möglichkeiten --- */
.radiogroup{ border:0; padding:0; margin:0; min-width:0; }
.radiogroup legend{
  display:block; padding:0;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:1em;
}
.radios{ display:grid; gap:10px; grid-template-columns:1fr; }
@media(min-width:620px){ .radios{ grid-template-columns:1fr 1fr; } }
.radio{
  display:flex; align-items:center; gap:12px;
  padding:.95em 1.1em; cursor:pointer;
  border:1px solid var(--line); border-radius:4px;
  font-size:.92rem; line-height:1.35;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.radio:hover{ border-color:var(--ink-faint); }
.radio input{ width:17px; height:17px; flex:none; margin:0; accent-color:var(--accent); }
.radio:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.radiogroup .setinfo{
  margin:1.1em 0 0; font-size:.82rem; line-height:1.6; color:var(--ink-faint);
}
.radiogroup .setinfo b{ font-weight:500; color:var(--ink-soft); }
.radio small{ display:block; font-size:.78rem; margin-top:.2em; }

/* Hinweisbereich, der abhängig von einer Auswahl erscheint.
   Geschaltet wird über die Klasse is-on, nicht über das hidden-Attribut —
   das ist unempfindlich gegen Kollisionen mit anderen display-Regeln. */
.fieldnote{
  display:none;
  margin:0; padding:1em 1.2em;
  background:var(--accent-soft);
  border-left:2px solid var(--accent);
}
.fieldnote.is-on{ display:block; animation:noteIn .35s var(--ease) both; }

/* Beide Meldungen teilen sich exakt dieselben Regeln — kein Fettdruck,
   keine Sonderformatierung. Der pinke Hintergrund reicht als Betonung. */
.fieldnote p{
  display:none;
  margin:0;
  font-size:.86rem; line-height:1.55; font-weight:400;
  color:var(--ink-soft);
}
.fieldnote p.is-on{ display:block; }
/* Abstand nur, wenn wirklich zwei Meldungen gleichzeitig sichtbar sind.
   Ohne das .is-on am ersten Absatz würde die Regel auch dann greifen,
   wenn der Absatz davor ausgeblendet ist — der Kasten wäre dann höher
   und der Text säße nicht mittig. */
.fieldnote p.is-on + p.is-on{ margin-top:.6em; }
@keyframes noteIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* --- Zweistufiges Formular --- */
.anfrage{ margin-top:clamp(30px,3.4vw,48px); }
.anfrage .form{ margin-top:0; }

.steps{
  display:flex; align-items:center; gap:10px;
  margin-bottom:clamp(24px,2.6vw,34px);
  padding-bottom:clamp(16px,1.8vw,22px);
  border-bottom:1px solid var(--line);
}
.steps__dot{
  width:26px; height:3px; border-radius:2px;
  background:var(--line); transition:background .4s var(--ease);
}
.steps__dot.is-on{ background:var(--accent); }
.steps__txt{
  margin-left:6px; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}
.steps__txt b{ color:var(--ink); font-weight:600; }

.step{ display:none; }
.step.is-on{ display:block; animation:stepIn .45s var(--ease) both; }
@keyframes stepIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

.stepnav{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* Feld mit Fehler nach dem Weiter-Klick */
.field.has-error input,
.field.has-error select{ border-bottom-color:var(--accent); }
.field .fielderr{
  display:block; margin-top:.5em; font-size:.78rem; color:var(--accent);
}

.contactlist{ list-style:none; margin:0; padding:0; }
.contactlist li{ padding:1.05em 0; border-bottom:1px solid var(--line); }
.contactlist li:first-child{ border-top:1px solid var(--line); }
.contactlist .k{ display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.45em; }
.contactlist a{ text-decoration:none; border-bottom:1px solid var(--line); }
.contactlist a:hover{ border-color:var(--ink); }

/* ---------- Platzhalter für fehlende Fotos ---------- */

.ph{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:14px; text-align:center;
  background:
    repeating-linear-gradient(45deg,transparent 0 12px,rgba(20,18,15,.035) 12px 24px),
    var(--paper-warm);
  border:1px dashed rgba(20,18,15,.28);
  color:var(--ink-soft);
  padding:clamp(24px,3vw,44px);
  min-height:220px;
  width:100%; height:100%;
}
.ph__badge{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  background:var(--ink); color:var(--paper); padding:.45em .9em; border-radius:100px;
}
.ph__ttl{ font-size:clamp(.98rem,1.3vw,1.14rem); font-weight:400; letter-spacing:-.01em; color:var(--ink); max-width:32ch; }
.ph__hint{ font-size:.8rem; max-width:40ch; line-height:1.5; }
.ph--dark{
  background:
    repeating-linear-gradient(45deg,transparent 0 12px,rgba(250,248,245,.05) 12px 24px),
    #221f1a;
  border-color:rgba(250,248,245,.28); color:rgba(250,248,245,.66);
}
.ph--dark .ph__ttl{ color:var(--paper); }
.ph--dark .ph__badge{ background:var(--paper); color:var(--ink); }

/* ---------- Footer ---------- */

.ftr{ background:var(--ink); color:var(--paper); padding-block:clamp(56px,7vw,110px) clamp(28px,3vw,44px); }
.ftr a{ text-decoration:none; opacity:.72; transition:opacity .25s; }
.ftr a:hover{ opacity:1; }
.ftr__top{ display:grid; gap:clamp(30px,4vw,60px); grid-template-columns:1fr; }
@media(min-width:820px){ .ftr__top{ grid-template-columns:1.6fr 1fr 1fr; } }
.ftr h4{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:rgba(250,248,245,.45); margin:0 0 1.3em; }
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr li{ padding:.28em 0; font-size:.92rem; }
.ftr__mark{ font-size:clamp(1.5rem,3.4vw,2.6rem); font-weight:300; letter-spacing:-.035em; line-height:1.05; margin:0 0 .5em; }
.ftr__bot{
  margin-top:clamp(46px,6vw,90px); padding-top:24px;
  border-top:1px solid rgba(250,248,245,.16);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.78rem; color:rgba(250,248,245,.55);
}
.ftr__bot nav{ display:flex; gap:22px; flex-wrap:wrap; }

/* ---------- Scroll-Reveal ---------- */

.rv{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-2{ transition-delay:.09s; }
.rv-3{ transition-delay:.18s; }
.rv-4{ transition-delay:.27s; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .rv{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   AKZENTFARBE — Pink aus dem Logo
   Bewusst als eigener Block am Ende, damit er sich komplett
   entfernen lässt, ohne den Rest anzufassen.
   Regel: Pink markiert Interaktion und Zahlen. Nie Flächen,
   nie Fliesstext, nie Überschriften.
   ============================================================ */

::selection{ background:var(--accent); color:#fff; }

/* --- Zahlen und Kennziffern --- */
.joiner__num,          /* "01 + 02" bei den zwei Bereichen */
.tariff__from,         /* "ab 300 €" auf der Preisseite */
.card__n{              /* die 01–06 in den Karten */
  color:var(--accent);
}
.facts__item b{ color:var(--accent); }

/* --- Textlinks --- */
.lead a, .muted a, .faq__body a, .legal a, .contactlist a{
  text-decoration:none;
  border-bottom:1px solid var(--accent-soft);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.lead a:hover, .muted a:hover, .faq__body a:hover,
.legal a:hover, .contactlist a:hover{
  color:var(--accent); border-bottom-color:var(--accent);
}

/* --- Pfeil-Links --- */
.arrowlink:hover{ border-color:var(--accent); color:var(--accent); }

/* --- Buttons: Umrandung beim Überfahren --- */
.btn:not(.btn--solid):hover{ border-color:var(--accent); color:var(--accent); }
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--light:not(.btn--solid):hover{ border-color:var(--accent); color:var(--accent); background:transparent; }
.btn--light.btn--solid:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--ghost:hover span{ mix-blend-mode:normal; }

/* --- Lichtdramaturgie: aktiver Reiter --- */
.lighttab.is-on{ border-top-color:var(--accent); }

/* --- Bereichs-Etiketten auf den beiden Karten --- */
.area:hover .area__tag{ color:var(--accent); }

/* --- FAQ: geöffnete Frage --- */
.faq details[open] > summary{ color:var(--accent); }
.faq details[open] summary::after{ background:var(--accent); }

/* --- Formular: aktives Feld --- */
.field input:focus, .field select:focus, .field textarea:focus{
  border-bottom-color:var(--accent);
}
.check input{ accent-color:var(--accent); }

/* --- Tastatur-Fokus, für Barrierefreiheit --- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* --- Fusszeile --- */
.ftr a:hover{ color:var(--accent); opacity:1; }

/* ---------- Einwilligungs-Banner ---------- */
/* Beide Buttons bewusst gleich gestaltet: Ablehnen muss so leicht
   sein wie Akzeptieren. Nicht ändern. */

.cc{
  position:fixed; z-index:110;
  left:clamp(12px,2vw,24px); right:clamp(12px,2vw,24px); bottom:clamp(12px,2vw,24px);
  max-width:780px; margin-inline:auto;
  max-height:calc(100svh - 24px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--ink); color:var(--paper);
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  opacity:0; transform:translateY(16px); visibility:hidden;
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.cc.is-on{
  opacity:1; transform:none; visibility:visible;
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s;
}

/* Ebene 1 oder Ebene 2 — immer nur eine sichtbar */
.cc__main{ display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; }
.cc__prefs{ display:none; }
.cc.is-prefs .cc__main{ display:none; }
.cc.is-prefs .cc__prefs{ display:block; }

.cc__txt{ flex:1 1 360px; margin:0; font-size:.84rem; line-height:1.6; color:rgba(250,248,245,.78); }
.cc__txt b{ color:var(--paper); font-weight:500; }
.cc__txt a, .cc__svc a{ color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(250,248,245,.35); }
.cc__txt a:hover{ border-bottom-color:var(--paper); }
.cc__ttl{ margin:0 0 .5em; font-size:1.05rem; font-weight:400; letter-spacing:-.01em; color:var(--paper); }

.cc__btns{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; flex:0 0 auto; }
.cc__prefs .cc__btns{ margin-top:clamp(18px,2vw,24px); justify-content:flex-end; }

/* „Nur notwendige“ und „Alle akzeptieren“ bewusst identisch */
.cc__btn{
  font:inherit; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.95em 1.5em; min-width:9.5em; cursor:pointer;
  background:transparent; color:var(--paper);
  border:1px solid rgba(250,248,245,.55); border-radius:0;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.cc__btn:hover{ border-color:var(--accent); color:var(--accent); }
.cc__prefs .cc__btn{ min-width:0; padding:.95em 1.2em; }
.cc__link{
  font:inherit; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  background:none; border:0; padding:.95em .4em; cursor:pointer;
  color:rgba(250,248,245,.75); text-decoration:underline; text-underline-offset:4px;
  transition:color .25s;
}
.cc__link:hover{ color:var(--accent); }

/* Kategorien */
.cc__cat{ border-top:1px solid rgba(250,248,245,.14); padding:14px 0 12px; }
.cc__cat:first-of-type{ margin-top:16px; }
.cc__row{ display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; }
.cc__name{ font-size:.9rem; color:var(--paper); }
.cc__desc{ margin:.35em 0 0; font-size:.8rem; line-height:1.55; color:rgba(250,248,245,.6); max-width:60ch; }

/* Schalter */
.cc__sw{
  -webkit-appearance:none; appearance:none; margin:0; flex:none; cursor:pointer;
  width:40px; height:22px; border-radius:22px; position:relative;
  background:rgba(250,248,245,.22); transition:background .25s var(--ease);
}
.cc__sw::after{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
  background:var(--paper); transition:transform .25s var(--ease);
}
.cc__sw:checked{ background:var(--accent); }
.cc__sw:checked::after{ transform:translateX(18px); }
.cc__sw:disabled{ opacity:.5; cursor:not-allowed; }

/* Aufklappbare Dienstliste */
.cc__svc{ margin-top:.5em; font-size:.78rem; color:rgba(250,248,245,.6); }
.cc__svc summary{ cursor:pointer; color:rgba(250,248,245,.75); width:max-content; }
.cc__svc summary:hover{ color:var(--accent); }
.cc__svc ul{ list-style:none; margin:.6em 0 0; padding:0; }
.cc__svc li{ padding:.6em 0 .6em .9em; border-left:1px solid rgba(250,248,245,.18); line-height:1.55; }
.cc__svc li + li{ margin-top:.5em; }
.cc__svc li b{ display:block; color:var(--paper); font-weight:500; }
.cc__svc li span{ display:block; color:rgba(250,248,245,.5); margin-bottom:.2em; }

@media(max-width:560px){
  .cc__main .cc__btns, .cc__prefs .cc__btns{ width:100%; }
  .cc__btn{ flex:1 1 40%; min-width:0; }
  .cc__link{ flex:1 1 100%; text-align:center; order:3; padding-top:.4em; }
}

/* Fusszeilen-Link "Cookie-Einstellungen" (ist ein Button) */
.ftr__cc{
  font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  opacity:.72; transition:opacity .25s, color .25s;
}
.ftr__cc:hover{ opacity:1; color:var(--accent); }

/* ---------- Legal-Seiten ---------- */

.legal{ max-width:74ch; }
.legal h2{ margin-top:2.2em; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ margin-top:1.8em; font-size:1.1rem; letter-spacing:-.015em; }
.todo{
  background:var(--paper-warm); border-left:2px solid var(--ink);
  padding:1em 1.3em; font-size:.9rem; color:var(--ink-soft); margin:1.4em 0;
}