/* ============================================================
   SENIW-FEHRER IMMOBILIEN · STYLESHEET
   Farben ausschließlich über Tokens (assets/css/tokens.css)
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:130px}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bg);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue-btn);outline-offset:3px}

.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--dark);color:var(--on-dark);
  padding:12px 20px;font-weight:600;
}
.skip-link:focus{left:12px;top:12px}

/* ---------- Scroll-Reveals ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s ease-out,transform .85s ease-out}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Eyebrow-Label-System ---------- */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text);
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold);flex:none;
}

/* ---------- Buttons & Links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--blue-btn);color:var(--white);
  font-family:var(--font-body);font-size:15px;font-weight:600;
  line-height:1;letter-spacing:.02em;
  padding:15px 26px;border-radius:var(--radius-btn);
  transition:background .18s ease;
}
.btn:hover{background:var(--blue-btn-hover)}
.btn svg{flex:none}
.txtlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;line-height:1.2;color:var(--text);
  border-bottom:2px solid var(--gold);padding-bottom:3px;
  transition:color .18s ease;
}
.txtlink:hover{color:var(--blue-btn)}

/* ---------- Sektionsköpfe ---------- */
.sec-head{max-width:760px}
.sec-head .eyebrow{margin-bottom:22px}
.sec-head h2{
  font-family:var(--font-display);
  font-size:var(--fs-h2);font-weight:600;
  line-height:1.1;letter-spacing:-.018em;
}
.sec-head .lead{margin-top:18px;font-size:18.5px;color:var(--text-2);max-width:62ch}
.h2-std{
  font-family:var(--font-display);
  font-size:var(--fs-h2);font-weight:600;
  line-height:1.1;letter-spacing:-.018em;
  margin-top:22px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
  box-shadow:var(--shadow-header);
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:112px;position:relative}
.brand{display:flex;align-items:center;gap:3px}
.brand-logo{height:clamp(42px,5.4vw,72px);width:auto;display:block}
.brand-name{
  font-family:var(--font-display);
  font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1;
  color:var(--text);
}
.brand-sub{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text-2);line-height:1;
}
.brand-sub::before{content:"";width:16px;height:1px;background:var(--gold)}

.header-nav{display:flex;align-items:center;gap:34px}
.header-nav a{
  font-size:15px;font-weight:500;color:var(--text);
  padding-bottom:3px;border-bottom:2px solid transparent;
  transition:border-color .18s ease;
}
.header-nav a:hover{border-bottom-color:var(--gold)}

/* ---------- Sprachumschalter DE | EN ----------
   Segment-Pille. Aktive Sprache auf der Markenfarbe mit weißem Text,
   inaktive in vollem Textton (nicht --text-2, das reißt bei 13px die
   4,5:1 nach WCAG AA). */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;
  padding:3px;border-radius:var(--radius-pill);
  background:var(--surface-cool);
}
.lang-switch a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:30px;padding:0 10px;
  border-radius:var(--radius-pill);
  font-size:13px;font-weight:700;letter-spacing:.04em;
  color:var(--text);
  transition:background .18s ease,color .18s ease;
}
.lang-switch a:hover{background:rgba(255,255,255,.7)}
.lang-switch a.is-active{background:var(--blue-btn);color:var(--white)}
.lang-switch a.is-active:hover{background:var(--blue-btn-hover)}
.lang-switch a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:var(--radius-btn);
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--text);
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO (B-Stil, ohne Geo-Chip, ohne Overlay-Karte)
   ============================================================ */
.hero{position:relative;z-index:2}
.hero-in{display:grid;grid-template-columns:46% 54%;align-items:stretch}
.hero-copy{align-self:center;padding:104px 56px 150px 0}
.hero-kicker{margin:0}
.hero-display{
  font-family:var(--font-display);
  font-size:var(--fs-display);font-weight:600;
  line-height:1.08;letter-spacing:-.01em;
  color:var(--text);
  margin:24px 0 26px;
}
.hero-display .hl{color:var(--blue)}
.hero-copy .hero-text{max-width:46ch;color:var(--text)}
.hero-actions{display:flex;align-items:center;gap:30px;margin-top:38px;flex-wrap:wrap}

.hero-media{
  position:relative;
  min-height:660px;
  margin-right:calc(-1 * (max((100vw - var(--container)) / 2, 0px) + var(--pad)));
  margin-bottom:calc(-1 * var(--hero-overlap));
}
/* Kein grauer Unterbau mehr: der Kartenstapel liegt frei auf dem Hero und
   ragt unten in die nächste Sektion (Kundenwunsch 03.08.2026). */
.hero-ph{
  position:absolute;top:52px;right:64px;bottom:0;left:0;
  overflow:hidden;
}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-ph::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;background:var(--gold);z-index:5}

/* Hero-Bildstapel (Vorbild: 3D Card Slider, CodePen Madbones3/RwmjLwb).
   Die Fotos liegen wie ein Stapel übereinander, gestaffelt nach RECHTS und
   ohne Drehung, damit es ruhig und aufgeräumt wirkt. Das vorderste Foto
   rückt weg, das nächste kommt nach vorne, danach beginnt es von vorne.
   Jede Karte ist ein <button>: anklickbar mit Maus, Tastatur und Screenreader.
   Die Rundung sitzt am Button, das <img> darin bleibt eckig. */
.hero-show{overflow:visible}
.hero-show .hero-slide{
  position:absolute;inset:0;
  padding:0;border:0;background:none;
  border-radius:var(--radius-card);
  overflow:hidden;
  cursor:pointer;
  transform-origin:right center;   /* rechte Kante bleibt beim Verkleinern stehen */
  transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .8s ease;
  will-change:transform,opacity;
}
.hero-show .hero-slide:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Position 0 = vorne, 1 und 2 = dahinter nach rechts versetzt,
   3 = unsichtbares Wartefeld auf Höhe von 2, aus dem die Karte einblendet. */
.hero-show .hero-slide.p0{transform:translateX(0) scale(1);z-index:4;opacity:1;box-shadow:var(--shadow-card-hover)}
.hero-show .hero-slide.p1{transform:translateX(26px) scale(.945);z-index:3;opacity:1;box-shadow:var(--shadow-card)}
.hero-show .hero-slide.p2{transform:translateX(50px) scale(.89);z-index:2;opacity:1;box-shadow:var(--shadow-card)}
.hero-show .hero-slide.p3{transform:translateX(50px) scale(.89);z-index:1;opacity:0;pointer-events:none;cursor:default}

/* Beim Überfahren rücken die hinteren Karten etwas heraus: sichtbares
   Signal, dass sie anklickbar sind. */
@media (hover:hover){
  .hero-show .hero-slide.p1:hover{transform:translateX(38px) scale(.945)}
  .hero-show .hero-slide.p2:hover{transform:translateX(66px) scale(.89)}
}

/* Punkte unten links im Bild, über dem Goldstrich: zeigen, wie viele Fotos
   im Stapel liegen und welches gerade vorne ist. Gleiche Sprache wie die
   Punkte der Objektkarten. */
.hero-dots{
  position:absolute;left:18px;bottom:18px;z-index:6;
  display:flex;gap:7px;pointer-events:none;
}
.hero-dots span{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(35,38,43,.2);
  transition:background .2s ease,transform .2s ease;
}
.hero-dots span.is-on{background:#fff;transform:scale(1.3)}

@media (prefers-reduced-motion:reduce){
  .hero-show .hero-slide{transition:none}
}
/* Am Handy reicht der Rahmen fast bis an den Bildschirmrand, dort muss der
   Versatz kleiner sein, sonst ragt der Stapel rechts hinaus und die Seite
   scrollt seitlich. */
@media (max-width:1024px){
  .hero-show .hero-slide.p1{transform:translateX(13px) scale(.955)}
  .hero-show .hero-slide.p2,
  .hero-show .hero-slide.p3{transform:translateX(25px) scale(.915)}
  @media (hover:hover){
    .hero-show .hero-slide.p1:hover{transform:translateX(19px) scale(.955)}
    .hero-show .hero-slide.p2:hover{transform:translateX(33px) scale(.915)}
  }
}
/* Ab 768px sitzt der Rahmen nur noch 22px vom Bildschirmrand entfernt
   (.hero-ph right:22px), der Versatz muss darunter bleiben. */
@media (max-width:768px){
  .hero-show .hero-slide.p1{transform:translateX(9px) scale(.962)}
  .hero-show .hero-slide.p2,
  .hero-show .hero-slide.p3{transform:translateX(17px) scale(.928)}
}

/* ============================================================
   ZAHLEN-BAND (Meridian-Band, Kornblau-Vollfläche)
   ============================================================ */
.band{
  background:var(--blue-deep);color:var(--on-blue);
  padding:calc(56px + var(--hero-overlap)) 0 64px;
}
.band-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--on-blue-soft);
  margin-bottom:44px;
}
.band-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

.route{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:30px}
.route::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold)}
.stop{position:relative}
.stop::before{
  content:"";position:absolute;top:-34px;left:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--gold);
}
.stop-ort{display:block;font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.2}
.stop-geo{display:block;margin-top:4px;font-size:13px;font-weight:500;letter-spacing:.07em;color:var(--on-blue-soft)}

.nums{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  margin-top:52px;padding-top:38px;border-top:1px solid var(--on-blue-line);
}
.num b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(30px,3vw,42px);font-weight:600;
  line-height:1.1;letter-spacing:-.01em;
}
.num .num-label{display:block;margin-top:6px;font-size:15px;font-weight:600}
.num .num-sub{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--on-blue-soft)}

/* ============================================================
   VORTEILE · editoriale Nummern-Liste
   ============================================================ */
.vorteile{padding:var(--space-section) 0 var(--space-section-s)}
.vorteile .sec-head{margin-bottom:clamp(44px,7vh,72px)}
.vorteil-liste{border-bottom:1px solid var(--hairline)}
.vorteil{
  display:grid;grid-template-columns:150px 300px 1fr;gap:36px;
  align-items:start;
  padding:38px 0;
  border-top:1px solid var(--hairline);
}
.vorteil-nr{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,3.4vw,3.4rem);font-weight:600;
  line-height:1;letter-spacing:-.01em;
  color:var(--gold);
}
.vorteil h3{
  font-family:var(--font-display);
  font-size:var(--fs-h3);font-weight:600;
  line-height:1.25;letter-spacing:-.012em;
  padding-top:6px;
}
.vorteil p{color:var(--text-2);max-width:62ch;padding-top:8px}

/* ============================================================
   LEISTUNGEN · asymmetrischer Zweispalter
   ============================================================ */
.leistungen{padding:var(--space-section-s) 0 var(--space-section)}
.leist-grid{display:block}
.leist-intro{max-width:760px;margin-bottom:clamp(32px,4.5vw,56px)}
.leist-intro .lead{margin-top:18px;font-size:18px;color:var(--text-2);max-width:60ch}
.leist-pillars{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px);align-items:stretch}
.pillar{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--hairline-cool);
  border-radius:var(--radius-card);
  padding:clamp(28px,3.4vw,44px);
  box-shadow:var(--shadow-card);
}
.pillar + .pillar{margin:0;background:var(--card)}
.pillar h3{
  font-family:var(--font-display);
  font-size:24px;font-weight:600;letter-spacing:-.012em;line-height:1.2;
}
.pillar h4{
  margin-top:6px;
  font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);
}
.pillar > p{margin-top:16px;color:var(--text-2)}
.pillar ul{margin-top:20px;display:grid;gap:11px}
.pillar li{position:relative;padding-left:24px;font-size:16px}
.pillar li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:12px;height:2px;background:var(--gold);
}

/* ============================================================
   OBJEKTÜBERSICHT · Gruppenköpfe + geteilte Karten
   ============================================================ */
.objekte{padding:var(--space-section) 0;background:var(--bg)}
.objekte .sec-head{margin-bottom:clamp(40px,6vh,64px)}

.group-head{
  display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
  margin:clamp(56px,8vh,92px) 0 clamp(26px,4vh,38px);
}
.group-head:first-of-type{margin-top:0}
.group-name{
  font-family:var(--font-display);
  font-size:var(--fs-group);font-weight:600;
  line-height:1.05;letter-spacing:-.018em;
}
.group-sub{font-size:15px;font-weight:500;color:var(--text-2);white-space:nowrap}
.group-rule{flex:1;height:1px;background:var(--hairline);align-self:center;min-width:60px}

.obj-card{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--card);
  border:1px solid var(--hairline-cool);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:box-shadow .25s ease,transform .25s ease;
}
.obj-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.obj-card + .obj-card{margin-top:clamp(28px,4.5vh,44px)}
.obj-photo{position:relative;min-height:420px;overflow:hidden;background:var(--surface-cool)}
.obj-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.obj-card--flip .obj-photo{order:2}

/* kleines Foto (800px) gerahmt statt full-bleed */
.obj-photo--framed{display:grid;place-items:center;padding:clamp(28px,4vw,56px)}
.obj-photo--framed .framed-in{
  position:relative;width:100%;max-width:440px;
  border-radius:6px;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.obj-photo--framed .framed-in img{position:static;width:100%;height:auto}

.loc-chip{
  position:absolute;top:18px;left:18px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  background:var(--chip-photo-bg);color:var(--chip-photo-text);
  font-size:12.5px;font-weight:600;letter-spacing:.06em;line-height:1;
  padding:9px 13px;border-radius:var(--radius-btn);
}
.loc-chip svg{flex:none}
.obj-photo--framed .loc-chip{top:18px;left:18px}

.obj-info{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(28px,3.6vw,48px);
}
.obj-tags{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;line-height:1;letter-spacing:.02em;
  padding:8px 14px;border-radius:var(--radius-pill);
  background:var(--surface-cool);color:var(--text);
}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-2);flex:none}
.pill--frei{background:var(--blue-soft);color:var(--blue-btn)}
.pill--frei::before{background:var(--blue)}
.pill--aufbau{background:var(--gold-soft)}
.pill--aufbau::before{background:var(--gold)}
.obj-type{
  font-size:12.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);
}
.obj-info h3{
  margin-top:22px;
  font-family:var(--font-display);
  font-size:clamp(1.6rem,2.3vw,2.1rem);font-weight:600;
  line-height:1.12;letter-spacing:-.016em;
}
.obj-addr{margin-top:7px;font-size:16px;color:var(--text-2)}
.obj-rule{width:100%;height:1px;background:var(--hairline-cool);margin:24px 0 20px}
.obj-facts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15.5px}
.obj-facts .fact{font-weight:600}
.obj-facts .fact-sep{width:4px;height:4px;border-radius:50%;background:var(--hairline-cool);flex:none}
.obj-facts .fact--muted{font-weight:500;color:var(--text-2)}
.obj-facts .fact--frei{color:var(--blue-btn)}
.obj-cta{margin-top:auto;padding-top:28px}
.obj-soon{font-size:15px;font-weight:500;color:var(--text-2)}

/* ============================================================
   MIETER-ERWARTUNGEN · Zweiblock auf Kühlfläche
   ============================================================ */
.erwartungen{background:var(--surface-cool);padding:var(--space-section-s) 0}
.erw-block h2{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:600;
  line-height:1.15;letter-spacing:-.016em;
}
.erw-block .eyebrow{margin-bottom:20px}
.erw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(30px,4vh,44px)}
.erw-item{border-top:1px solid var(--hairline-cool);padding-top:20px}
.erw-item h3{
  font-family:var(--font-display);
  font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.3;
}
.erw-item p{margin-top:9px;font-size:15.5px;color:var(--text-2)}

.erw-panel{
  margin-top:clamp(48px,7vh,72px);
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:clamp(30px,4vw,56px);
  display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,64px);align-items:start;
}
.erw-panel-title{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:600;
  line-height:1.15;letter-spacing:-.016em;
}
.erw-panel-list{display:grid;gap:26px}
.erw-row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.erw-check{
  width:34px;height:34px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--blue-soft);color:var(--blue-btn);
}
.erw-row h3{
  font-family:var(--font-display);
  font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3;
}
.erw-row p{margin-top:5px;font-size:15.5px;color:var(--text-2)}

/* ============================================================
   ÜBER UNS
   ============================================================ */
.ueber{padding:var(--space-section) 0}
.ueber-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,88px);align-items:center}
.portrait{position:relative}
.portrait-panel{position:absolute;top:-24px;left:-24px;right:22%;bottom:26%;background:var(--surface-cool);z-index:0}
/* Portrait: Rundung und Beschnitt sitzen am Container, das Bild bleibt eckig. */
.portrait-foto{
  position:relative;z-index:1;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.portrait-foto img{
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  border-radius:0;
}
.ueber-copy .eyebrow{margin-bottom:22px}
.ueber-copy .ueber-title{
  font-family:var(--font-display);
  font-size:var(--fs-h2);font-weight:600;line-height:1.1;letter-spacing:-.018em;
}
.ueber-line{width:64px;height:2px;background:var(--gold);margin:26px 0}
.ueber-copy p{max-width:60ch}
.ueber-copy p + p{margin-top:16px;color:var(--text-2)}

/* ============================================================
   ABLAUF · 5-Schritte-Leiste
   ============================================================ */
.ablauf{padding:0 0 var(--space-section)}
.ablauf .sec-head{margin-bottom:clamp(40px,6vh,60px)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.4vw,32px)}
.step{position:relative;border-top:1px solid var(--hairline);padding-top:26px}
.step::before{
  content:"";position:absolute;top:-5px;left:0;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
}
.step-nr{
  display:block;
  font-family:var(--font-display);
  font-size:15px;font-weight:600;letter-spacing:.14em;
  color:var(--gold);
}
.step h3,.step-title{
  margin-top:12px;
  font-family:var(--font-display);
  font-size:18.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;
}
.step p{margin-top:8px;font-size:15px;color:var(--text-2)}

/* ============================================================
   FAQ · zugängliches Akkordeon
   ============================================================ */
.faq{background:var(--surface-cool);padding:var(--space-section-s) 0}
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,5vw,80px);align-items:start}
.faq-intro{position:sticky;top:120px}
.faq-intro .lead{margin-top:18px;font-size:17.5px;color:var(--text-2);max-width:44ch}
.faq-intro .txtlink{margin-top:26px}
.faq-liste{border-bottom:1px solid var(--hairline-cool)}
.faq-item{border-top:1px solid var(--hairline-cool)}
.faq-item h3{font-size:inherit;font-weight:inherit;line-height:inherit}
.faq-trigger{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  text-align:left;
  padding:22px 2px;
  font-family:var(--font-display);
  font-size:18px;font-weight:600;letter-spacing:-.008em;line-height:1.35;
  transition:color .18s ease;
}
.faq-trigger:hover{color:var(--blue-btn)}
.faq-icon{
  flex:none;width:30px;height:30px;
  display:grid;place-items:center;
  border:1px solid var(--hairline-cool);border-radius:50%;
  color:var(--blue-btn);
  transition:transform .3s ease,background .18s ease;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--blue-soft)}
.faq-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}
.faq-panel-in{overflow:hidden}
.faq-panel p{padding:0 44px 24px 2px;color:var(--text-2);max-width:58ch}
.faq-panel p a{color:var(--blue-btn);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.faq-item.open .faq-panel{grid-template-rows:1fr}
@media (prefers-reduced-motion:reduce){
  .faq-panel{transition:none}
  .faq-icon{transition:none}
}

/* ============================================================
   KONTAKT · Formular + Ansprechpartnerin
   ============================================================ */
.kontakt{padding:var(--space-section) 0 var(--space-section-s)}
.kontakt .sec-head{margin-bottom:clamp(40px,6vh,60px)}
.kontakt-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(36px,5vw,72px);align-items:start}

.form-card{
  background:var(--card);
  border:1px solid var(--hairline-cool);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:clamp(28px,3.6vw,48px);
}
.form-card h3{
  font-family:var(--font-display);
  font-size:22px;font-weight:600;letter-spacing:-.012em;line-height:1.25;
}
.form-card .form-intro{margin-top:10px;font-size:15.5px;color:var(--text-2)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1 / -1}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:16px;color:var(--text);
  background:var(--white);
  border:1px solid var(--hairline-cool);
  border-radius:var(--radius-input);
  padding:13px 14px;
  width:100%;
  transition:border-color .18s ease;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--blue-btn);outline-offset:1px;
}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='gray' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
  padding-right:38px;
}

.consent{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:2px}
.consent input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin-top:3px;
  border:1.5px solid var(--hairline-cool);
  border-radius:4px;
  background-color:var(--white);
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.consent input[type="checkbox"]:checked{
  background-color:var(--blue-btn);
  border-color:var(--blue-btn);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5L5 9l4.5-5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px 12px;
}
.consent label{font-size:14px;line-height:1.55;color:var(--text-2);cursor:pointer}
.form-submit{grid-column:1 / -1;margin-top:6px}
/* Honeypot: fuer Menschen unsichtbar, nicht per display:none (manche Bots ueberspringen das) */
.hp-feld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kontakt-form{position:relative}
.form-hinweis{margin-top:14px;font-size:15px;line-height:1.55;color:var(--text-2)}
.form-hinweis:empty{display:none}
.form-hinweis.is-ok{color:var(--green-extra)}
.form-hinweis.is-error{color:var(--rust)}
.form-hinweis a{color:inherit;text-decoration:underline}

.kontakt-aside{display:grid;gap:28px}
.aside-card{
  background:var(--surface-cool);
  border-radius:var(--radius-card);
  padding:clamp(26px,3vw,38px);
}
.aside-label{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:16px;
}
.aside-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.aside-card h3,.aside-title{
  font-family:var(--font-display);
  font-size:21px;font-weight:600;letter-spacing:-.012em;line-height:1.25;
}
.aside-card p{margin-top:10px;font-size:15.5px;color:var(--text-2)}
.aside-rule{height:1px;background:var(--hairline-cool);margin:22px 0}
.aside-fact{display:grid;gap:3px}
.aside-fact + .aside-fact{margin-top:14px}
.aside-fact .k{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.aside-fact .v{font-size:16px;font-weight:500;color:var(--text)}
.aside-fact a.v{border-bottom:1.5px solid var(--gold);padding-bottom:1px;display:inline-block;width:fit-content}
.aside-fact a.v:hover{color:var(--blue-btn)}

/* ============================================================
   FOOTER · Anthrazit + angeschnittene Wortmarke
   ============================================================ */
.site-footer{background:var(--dark);color:var(--on-dark);padding-top:clamp(64px,9vh,104px)}
.footer-grid{
  display:grid;grid-template-columns:5fr 3fr 4fr;gap:clamp(32px,4vw,64px);
  padding-bottom:clamp(40px,6vh,64px);
  border-bottom:1px solid var(--on-dark-line);
}
.footer-logo{height:clamp(64px,6vw,84px);width:auto;display:block;margin-bottom:4px}
.footer-brand .brand-name{color:var(--on-dark);font-size:22px}
.footer-brand .brand-sub{color:var(--on-dark-soft)}
.footer-brand p{margin-top:18px;font-size:15px;color:var(--on-dark-soft);max-width:38ch}
.footer-col h4{
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-soft);margin-bottom:18px;
}
.footer-col ul{display:grid;gap:10px}
.footer-col a{font-size:15px;color:var(--on-dark);transition:color .18s ease}
.footer-col a:hover{color:var(--gold)}
.footer-col p{font-size:15px;color:var(--on-dark);line-height:1.7}
.footer-col p a{border-bottom:1px solid var(--gold)}
.footer-meta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 0 6px;
  font-size:13.5px;color:var(--on-dark-soft);
}
.footer-meta nav{display:flex;gap:24px}
.footer-meta a{color:var(--on-dark-soft)}
.footer-meta a:hover{color:var(--on-dark)}

/* Die angeschnittene Wortmarke wurde auf Kundenwunsch entfernt (Feedback 02.08.2026). */
.site-footer{padding-bottom:clamp(34px,5vh,56px)}

/* ============================================================
   RESPONSIVE · Breakpoints 1024 / 768
   ============================================================ */
@media (max-width:1024px){
  html{scroll-padding-top:96px}
  .header-in{height:84px}
  .header-nav{display:none}
  .header-nav.mobile-open{
    display:flex;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);
    border-bottom:1px solid var(--hairline);
    box-shadow:var(--shadow-card);
    padding:10px 0 14px;
    z-index:99;
  }
  .header-nav.mobile-open a{
    padding:14px var(--pad);
    border-bottom:none;
    font-size:16.5px;
  }
  .nav-toggle{display:flex}
  /* Der Umschalter darf mit der Navigation NICHT verschwinden, sonst gibt es
     am Handy keinen Weg in die andere Sprache. Touch-Ziel mind. 44x40. */
  .lang-switch{margin-left:auto;margin-right:10px}
  .lang-switch a{min-width:44px;height:40px;font-size:14px}

  .hero-in{grid-template-columns:1fr}
  .hero-copy{padding:64px 0 48px}
  .hero-media{
    min-height:480px;
    margin-left:calc(-1 * var(--pad));
    margin-right:calc(-1 * var(--pad));
  }
  .hero-ph{top:36px;right:36px}

  .leist-pillars{grid-template-columns:1fr;gap:20px}

  .erw-panel{grid-template-columns:1fr}
  .ueber-grid{grid-template-columns:1fr;gap:56px}
  .portrait{max-width:440px}
  .steps{grid-template-columns:1fr;gap:0}
  .step{border-top:none;border-left:1px solid var(--hairline);padding:0 0 30px 26px}
  .step:last-child{padding-bottom:0}
  .step::before{top:2px;left:-5px}
  .faq-grid{grid-template-columns:1fr}
  .faq-intro{position:static}
  .kontakt-grid{grid-template-columns:1fr}
}

@media (max-width:768px){
  body{font-size:16px}
  html{scroll-padding-top:88px}
  .header-in{height:78px}

  .hero-copy{padding:48px 0 38px}
  .hero-media{min-height:400px;margin-bottom:calc(-1 * 48px)}
  .hero-ph{top:26px;right:22px}
  .hero-actions{gap:22px}

  .band{padding:calc(44px + 48px) 0 52px}
  .band-title{margin-bottom:36px}
  .route{grid-template-columns:1fr;gap:20px;padding-top:0;padding-left:24px}
  .route::before{top:5px;bottom:5px;left:0;right:auto;width:1px;height:auto}
  .stop::before{top:6px;left:-28px}
  .nums{grid-template-columns:1fr;gap:24px;margin-top:40px;padding-top:30px}
  .num b{font-size:30px}

  .vorteil{grid-template-columns:1fr;gap:10px;padding:30px 0}
  .vorteil-nr{font-size:2rem}
  .vorteil h3{padding-top:0}
  .vorteil p{padding-top:0}

  .erw-grid{grid-template-columns:1fr;gap:22px}

  .group-head{gap:12px}
  /* Unterhalb 768px darf die Unterzeile umbrechen: laengere Bezeichnungen
     (z.B. EN "Holiday properties on Lake Traunsee & in Hinterstoder")
     sprengten mit white-space:nowrap sonst den Viewport. */
  .group-sub{white-space:normal}
  .group-rule{flex-basis:100%;order:3}

  .obj-card{grid-template-columns:1fr}
  .obj-card--flip .obj-photo{order:0}
  .obj-photo{min-height:0;aspect-ratio:16/10}
  .obj-photo--framed{aspect-ratio:auto;padding:22px}
  .obj-info{padding:24px 22px 28px}
  .obj-info h3{font-size:1.5rem}
  .obj-facts{font-size:15px}

  .form-grid{grid-template-columns:1fr}
  .field--half{grid-column:auto}

  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-meta{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ============================================================
   OBJEKT-FOTO-SLIDER · scroll-snap, dependency-frei
   Erscheint nur bei mehreren Fotos (sonst statisches Einzelbild).
   ============================================================ */
.obj-slider .slides{
  position:absolute;inset:0;
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.obj-slider .slides::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:no-preference){
  .obj-slider .slides{scroll-behavior:smooth}
}
.obj-slider .slide{
  position:relative;flex:0 0 100%;height:100%;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.obj-slider .slide img{
  position:static;width:100%;height:100%;object-fit:cover;display:block;
}
/* Pfeile */
.slider-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:var(--radius-pill);
  background:var(--chip-photo-bg);color:var(--chip-photo-text);
  opacity:0;transition:opacity .2s ease,background .18s ease;
}
.obj-photo:hover .slider-nav,.slider-nav:focus-visible{opacity:1}
.slider-nav:hover{background:rgba(35,38,43,.9)}
.slider-nav:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.slider-prev{left:14px}
.slider-next{right:14px}
@media (hover:none){.slider-nav{opacity:.92}}
/* Punkte */
.slider-dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:3;
  display:flex;justify-content:center;gap:7px;
}
.slider-dots button{
  width:8px;height:8px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(35,38,43,.2);
  transition:background .18s ease,transform .18s ease;
}
.slider-dots button[aria-current="true"]{background:#fff;transform:scale(1.3)}

/* ============================================================
   RECHTSTEXTE (Impressum, Datenschutz)
   ============================================================ */
.rechtstext{padding:clamp(56px,8vh,96px) 0 var(--space-section-s)}
.rechtstext-in{max-width:72ch}
.rechtstext .eyebrow{margin-bottom:22px}
.rechtstext h1{
  font-family:var(--font-display);
  font-size:var(--fs-h2);font-weight:600;
  line-height:1.1;letter-spacing:-.018em;
}
.rechtstext .lead{margin-top:18px;font-size:18.5px;color:var(--text-2)}
.rechtstext h2{
  font-family:var(--font-display);
  font-size:1.375rem;font-weight:600;line-height:1.25;
  margin:38px 0 12px;
}
.rechtstext h3{
  font-family:var(--font-body);
  font-size:1.0625rem;font-weight:700;line-height:1.35;
  margin:26px 0 8px;
}
.rechtstext p{color:var(--text);line-height:1.75}
.rechtstext p + p{margin-top:14px}
.rechtstext a:not(.txtlink){color:var(--blue-btn);border-bottom:1px solid var(--gold)}
.rechts-liste{display:grid;grid-template-columns:112px 1fr;gap:8px 18px;margin-top:6px}
.rechts-liste dt{font-weight:600}
.rechts-liste dd{color:var(--text)}
.rechts-hinweis{
  margin-top:26px;padding:22px 24px;
  background:var(--surface-cool);
  border-left:3px solid var(--gold);
  border-radius:var(--radius-card);
}
.rechts-hinweis p + p{margin-top:8px;color:var(--text-2)}
.rechtstext p.rechts-abs{margin-top:26px}
.rechtstext ul{list-style:disc;margin:12px 0 0;padding-left:22px}
.rechtstext ul li{color:var(--text);line-height:1.75;margin-top:4px}
.rechtstext ul + p{margin-top:14px}
.rechts-quelle{margin-top:40px;font-size:14px;color:var(--text-2)}
.rechts-zurueck{margin-top:44px}
@media (max-width:600px){
  .rechts-liste{grid-template-columns:1fr;gap:2px}
  .rechts-liste dd{margin-bottom:10px}
}

/* ============================================================
   SIGNET-WASSERZEICHEN · dezent im Hintergrund
   ============================================================ */
.band,.erwartungen{position:relative;overflow:hidden}
.site-footer{position:relative;overflow:hidden}
.band::before,.erwartungen::before,.site-footer::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.band::before{
  right:-150px;bottom:-190px;width:520px;height:520px;
  background-image:url("/assets/signet-white.svg");opacity:.07;
}
.erwartungen::before{
  right:-160px;top:-150px;width:500px;height:500px;
  background-image:url("/assets/signet.svg");opacity:.06;
}
.site-footer::before{
  right:-170px;top:10px;width:520px;height:520px;
  background-image:url("/assets/signet-white.svg");opacity:.06;
}
.band .wrap,.erwartungen .wrap,.site-footer .wrap{position:relative;z-index:1}
@media (max-width:768px){
  .band::before{width:340px;height:340px;right:-120px;bottom:-120px}
  .erwartungen::before{width:320px;height:320px;right:-130px;top:-110px}
  .site-footer::before{width:340px;height:340px;right:-140px;top:8px}
}

/* ============================================================
   WOHNEINHEITEN-MODAL (natives <dialog>)
   ============================================================ */
.units-modal{
  margin:auto;                       /* zentriert im Viewport (CSS-Reset setzt sonst margin:0) */
  width:min(560px,calc(100vw - 32px));
  max-height:min(84vh,760px);
  padding:0;border:none;
  border-radius:calc(var(--radius-card) + 2px);
  background:var(--card);color:var(--text);
  box-shadow:0 40px 90px rgba(30,40,70,.28);
  overflow:hidden;
}
.units-modal::backdrop{background:rgba(22,25,32,.52)}
.units-modal[open]{display:flex;flex-direction:column}
.units-modal__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:clamp(24px,3.2vw,34px) clamp(24px,3.2vw,34px) 20px;
  border-bottom:1px solid var(--hairline-cool);
}
.units-modal__head .eyebrow{color:var(--text-2)}
.units-modal__head h3,.units-modal__title{
  margin-top:8px;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.012em;line-height:1.15;
}
.units-modal__head .obj-addr{margin-top:4px;color:var(--text-2);font-size:15px}
.units-modal__close{
  flex:none;display:grid;place-items:center;
  width:40px;height:40px;border-radius:var(--radius-pill);
  border:1px solid var(--hairline-cool);background:var(--bg);color:var(--text);
  cursor:pointer;transition:background .18s,border-color .18s;
}
.units-modal__close:hover{background:var(--surface-cool)}
.units-modal__close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.units-list{
  list-style:none;margin:0;padding:8px clamp(16px,2.4vw,26px);
  overflow-y:auto;display:grid;gap:2px;
}
.unit-row{
  display:grid;grid-template-columns:96px 1fr auto;align-items:start;gap:16px;
  padding:15px clamp(8px,1.4vw,16px);
  border-bottom:1px solid var(--hairline);
}
.unit-row:last-child{border-bottom:none}
.unit-top{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.35}
.unit-spec{color:var(--text-2);font-size:15px;line-height:1.5}
/* Besonderheit der Wohnung, eine Zeile unter der Aufteilung */
.unit-extra{display:block;width:fit-content;margin-top:8px;padding:5px 11px;border-radius:8px;background:var(--green-soft);font-size:13.5px;line-height:1.45;font-weight:500;color:var(--green-extra);font-style:italic}
.unit-row .pill{margin-top:2px}
.units-note{
  padding:18px clamp(24px,3.2vw,34px) clamp(24px,3.2vw,34px);
  border-top:1px solid var(--hairline-cool);
  color:var(--text-2);font-size:14.5px;
}
.units-note a{color:var(--blue-btn);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (max-width:768px){
  .unit-row{grid-template-columns:88px 1fr;row-gap:6px}
  .unit-row .pill{grid-column:2;justify-self:start}
}

/* ============================================================
   COOKIEBOX (Klaro, selbst gehostet) · Markenfarbe + Schloss
   klaro.js injiziert sein Stylesheet zur Laufzeit ans Ende des head und
   gewinnt damit jede Regel gleicher Spezifitaet. Daher Akzent ueber die
   Klaro-Variable --green1 und Buttons mit !important (Muster Hans Mannsberger).
   Tiefblau #3F647F auf Weiss = 6,1:1 (WCAG AA).
   ============================================================ */
.klaro, #klaro{--green1:var(--blue-btn)}
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-accept{background-color:var(--blue-btn) !important;color:var(--on-blue) !important}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept-all:hover,
.klaro .cm-btn.cm-btn-accept:hover{background-color:var(--blue-btn-hover) !important}
.klaro .cm-btn.cm-btn-danger,
.klaro .cn-decline{background-color:var(--dark) !important;color:var(--on-dark) !important}
.klaro .cookie-modal a, .klaro .cookie-notice a,
.klaro a.cm-link, .klaro .cm-link{color:var(--blue-btn)}
.klaro .cm-powered-by{display:none !important}
.klaro .cookie-notice, .klaro .cookie-modal{font-family:var(--font-body)}
/* Schloss unten links: jederzeitiger Widerruf, Agentur-Standard */
#klaro-widerruf{
  position:fixed;left:16px;bottom:16px;z-index:120;
  width:42px;height:42px;display:grid;place-items:center;
  background:var(--dark);color:var(--on-dark);border:1px solid var(--on-dark-line);border-radius:50%;
  cursor:pointer;opacity:.75;transition:opacity .2s, transform .2s;
}
#klaro-widerruf:hover, #klaro-widerruf:focus-visible{opacity:1;transform:translateY(-2px)}