/* ==========================================================================
   TFS Fenestra — "Licht & Handwerk"
   Ein ehrlicher Fensterbau aus Oberhausen. Warm, nahbar, solide.
   ========================================================================== */

:root {
  /* Marke: tiefes Schiefer-Blau = Vertrauen & Handwerk */
  --ink:        #131c27;
  --ink-2:      #1e2c3b;
  --ink-3:      #0d1620;
  --brand:      #1f5f9e;   /* Schüco-Blau, Links & Sekundär */
  --brand-deep: #16496f;

  /* Akzent: warmes Sonnenlicht durchs Fenster (kein Terrakotta) */
  --sun:        #f5b73f;
  --sun-deep:   #cf8f16;
  --sun-soft:   #fdf1d6;
  --sun-ink:    #402d05;   /* Text auf Honig */
  --sun-text:   #8a5e0a;   /* lesbares Amber für Labels/Preise auf hellen Flächen (AA) */

  /* Semantisch: Ökologie/Energie – nur sparsam */
  --eco:        #3c8c66;
  --eco-soft:   #e6f2ec;
  --eco-text:   #2c6b4d;   /* lesbares Grün für Text auf eco-soft (AA) */

  /* Flächen */
  --paper:      #f6f4ee;   /* Seitenhintergrund, minimal warm */
  --paper-2:    #eee9df;
  --card:       #ffffff;
  --line:       #e6e0d4;
  --line-soft:  #efeae0;

  /* Text */
  --text:       #232f3a;
  --muted:      #59646e;
  --on-dark:        #eef3f7;
  --on-dark-muted:  #a3b3c1;

  --radius:     18px;
  --radius-sm:  11px;
  --shadow-sm:  0 1px 2px rgba(19,28,39,.05), 0 3px 8px -4px rgba(19,28,39,.12);
  --shadow:     0 1px 2px rgba(19,28,39,.04), 0 10px 24px -14px rgba(19,28,39,.22);
  --shadow-lg:  0 2px 6px rgba(19,28,39,.06), 0 34px 64px -28px rgba(19,28,39,.40);
  --maxw:       1180px;
  --pad:        clamp(1.1rem, 4vw, 2rem);
  /* Bewegung: starke, intentionale Kurven (Emil Kowalski) */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.65;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg { display: block; max-width: 100%; }
picture { display: contents; }   /* Wrapper layout-neutral: <img> verhält sich wie direktes Kind */
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-deep); }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; color: var(--ink); letter-spacing: -0.015em; }
ul,ol { padding-left: 1.15em; }

/* Fokus: Honig-Ring + dunkler Halo -> sichtbar auf hellen UND dunklen Flächen */
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(19,28,39,.4); border-radius: 4px; }
.section--ink :focus-visible, .hero :focus-visible, .site-footer :focus-visible { box-shadow: 0 0 0 5px rgba(255,255,255,.35); }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2.2rem, 5vw, 3.5rem); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: linear-gradient(175deg, var(--ink-2), var(--ink) 55%, var(--ink-3)); color: var(--on-dark); }
.section--paper2 { border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.section--ink h1,.section--ink h2,.section--ink h3 { color: #fff; }
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun-text); display: inline-flex; align-items: center; gap: .6rem;
}
.section--ink .eyebrow { color: var(--sun); }
/* Sprossen-Akzent: kurze Linie mit Knoten (Fensterkreuz-Detail) */
.eyebrow::before {
  content:""; width: 2rem; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, currentColor 0 42%, transparent 42% 58%, currentColor 58% 100%);
}
.section-head { max-width: 47rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); margin-top: .7rem; letter-spacing: -.022em; }
.section-head p { color: var(--muted); font-size: 1.1rem; margin-top: .8rem; max-width: 42rem; }
.section--ink .section-head p { color: var(--on-dark-muted); }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: var(--muted); }

/* ---------- Skip link ---------- */
.skip { position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1rem; z-index:200; border-radius:0 0 8px 0; }
.skip:focus { left:0; color:#fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem; justify-content:center;
  font-family: var(--font-body); font-weight: 700; font-size: .92rem;
  padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap;
  transition: transform .16s var(--ease-out), background .15s ease, box-shadow .16s var(--ease-out), border-color .15s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn--sun { background: linear-gradient(180deg, #f8c25a, var(--sun)); color: var(--sun-ink); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 24px -12px rgba(207,143,22,.85); }
.btn--sun:hover { background: linear-gradient(180deg, var(--sun), var(--sun-deep)); color: var(--sun-ink); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 16px 30px -12px rgba(207,143,22,.95); }
.btn--ink { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn--ink:hover { background: var(--ink-2); color:#fff; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.section--ink .btn--ghost,
.hero .btn--ghost,
.cta-band .btn--ghost { border-color: rgba(255,255,255,.32); color:#fff; }
.section--ink .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover { border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
/* Hover-Lift nur auf echten Zeigegeräten (Touch löst sonst :hover fälschlich aus) */
@media (hover: hover) and (pointer: fine) {
  .btn--sun:hover, .btn--ink:hover, .btn--ghost:hover { transform: translateY(-1px); }
}
/* Druck-Feedback: nach den Hover-Regeln, damit :active immer gewinnt */
.btn:active { transform: scale(0.97); }
.btn--lg { padding: .72rem 1.35rem; font-size: .98rem; }
/* Auf Touch-Geräten das 44px-Mindestmaß sicherstellen (Desktop bleibt kompakt) */
@media (max-width: 860px) {
  .btn { min-height: 44px; }
}
.btn-row { display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,245,240,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display:flex; align-items:center; gap:1rem; min-height: 72px; }
.nav__panel { display:flex; align-items:center; gap:1rem; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; flex:0 0 auto; }
.brand__mark { width: 38px; height: 38px; flex:0 0 auto; }
.brand__name { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.12rem; letter-spacing:-.02em; line-height:1.05; white-space:nowrap; }
.brand__name span { color: var(--brand); }
.brand__sub { display:block; font-family:var(--font-body); font-weight:600; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:3px; white-space:nowrap; }
/* Bei knappem Platz Navigation verdichten, statt umzubrechen */
@media (min-width: 961px) and (max-width: 1400px) {
  .nav__links a { padding:.5rem .48rem; font-size:.9rem; }
  .nav__phone { display:none; }
  .brand__sub { display:none; }
}

.nav__links { display:flex; align-items:center; gap:.2rem; list-style:none; padding:0; margin:0; }
.nav__links a { color: var(--ink); text-decoration:none; font-weight:600; font-size:.96rem; padding:.5rem .7rem; border-radius:8px; display:block; }
.nav__links a:hover { background: var(--paper-2); color: var(--ink); }
.nav__cta { display:flex; align-items:center; gap:.6rem; margin-left:.4rem; }
.nav__cta .btn { font-size:.86rem; padding:.52rem .95rem; }
.nav__phone { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.92rem; color:var(--ink); text-decoration:none; white-space:nowrap; }
.nav__phone:hover { color: var(--brand); }
.nav__phone svg { width:18px; height:18px; }

.nav__toggle { display:none; background:transparent; border:2px solid var(--line); border-radius:10px; width:46px; height:44px; cursor:pointer; align-items:center; justify-content:center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content:""; display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition: transform .22s var(--ease-out), top .22s var(--ease-out), background-color .18s ease; }
.nav__toggle span::before{ position:absolute; top:-7px; }
.nav__toggle span::after { position:absolute; top:7px; }
.nav[data-open="true"] .nav__toggle span { background:transparent; }
.nav[data-open="true"] .nav__toggle span::before{ transform:rotate(45deg); top:0; }
.nav[data-open="true"] .nav__toggle span::after { transform:rotate(-45deg); top:0; }

@media (max-width: 960px) {
  .nav__toggle { display:inline-flex; }
  /* Panel bleibt gelayoutet (position:absolute), nur unsichtbar – damit es
     ein-/ausgleiten kann statt hart zu erscheinen. */
  .nav__panel {
    display:flex; flex-direction:column; align-items:stretch; gap:.35rem;
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.6rem var(--pad) 1.1rem; box-shadow:var(--shadow); z-index:110;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition: opacity .2s var(--ease-out), transform .24s var(--ease-out), visibility .24s;
  }
  .nav[data-open="true"] .nav__panel { opacity:1; visibility:visible; transform:none; }
  .nav__links { flex-direction:column; align-items:stretch; gap:.1rem; }
  .nav__links a { padding:.75rem .6rem; border-radius:8px; }
  .nav__cta { flex-direction:column; align-items:stretch; gap:.6rem; margin:.5rem 0 0; }
  .nav__phone { justify-content:center; padding:.6rem; border:1px solid var(--line); border-radius:999px; }
  /* Abdunkelnder Backdrop hinter dem offenen Menü */
  body::after {
    content:""; position:fixed; inset:0; z-index:90; background:rgba(19,28,39,.32);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .2s var(--ease-out), visibility .2s;
  }
  body.menu-open::after { opacity:1; visibility:visible; }
}

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; color: var(--on-dark);
  background: linear-gradient(158deg, var(--ink-2) 0%, var(--ink) 46%, var(--ink-3) 100%); }
.hero__glow {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 52% at 80% 12%, rgba(245,183,63,.36), transparent 62%),
    radial-gradient(46% 56% at 95% 82%, rgba(31,95,158,.42), transparent 66%),
    linear-gradient(114deg, transparent 38%, rgba(245,183,63,.07) 50%, transparent 60%);
}
/* Sprossen-Motiv (Signature): feines Fensterraster */
.hero__mullion {
  position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: clamp(70px,9vw,120px) clamp(70px,9vw,120px);
  -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000 40%, transparent 75%);
          mask-image: radial-gradient(70% 70% at 70% 30%, #000 40%, transparent 75%);
}
.hero__inner { position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem,4vw,3rem); align-items:center; padding-block: clamp(3rem,7vw,5.5rem); }
.hero__eyebrow { color: var(--sun); }
.hero h1 { color:#fff; font-size: clamp(2.3rem, 6vw, 4rem); letter-spacing:-.03em; }
.hero h1 em { font-style:normal; color: var(--sun); }
.hero__sub { color: var(--on-dark-muted); font-size: clamp(1.05rem,2.2vw,1.25rem); max-width: 34rem; margin-top:1rem; }
.hero .btn-row { margin-top: 1.6rem; }
.hero__chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.chip {
  display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:600;
  padding:.42rem .8rem; border-radius:999px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); color:var(--on-dark);
}
.chip svg { width:15px; height:15px; color: var(--sun); }

/* Hero-Visual: gerahmtes Foto mit warmer Lichtstimmung */
.hero__pane {
  position:relative; aspect-ratio: 4/5; border-radius: 22px; overflow:hidden;
  border: 11px solid #fff; box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(19,28,39,.06);
  background:#16202c;
}
.hero__paneimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__pane::before { /* warme Lichtstimmung über dem Foto */
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(245,183,63,.28), transparent 45%, rgba(22,32,44,.55) 100%);
}
.hero__panecap {
  position:absolute; z-index:2; left:14px; right:14px; bottom:14px;
  background:rgba(255,255,255,.94); border-radius:12px; padding:.85rem 1rem;
  display:flex; align-items:center; gap:.7rem; box-shadow: var(--shadow);
}
.hero__panecap b { font-family:var(--font-display); color:var(--ink); font-size:1.05rem; display:block; }
.hero__panecap span { font-size:.85rem; color:var(--muted); }
.hero__panecap .badge { flex:0 0 auto; width:42px; height:42px; border-radius:10px; background:var(--sun-soft); display:grid; place-items:center; color:var(--sun-text); }

@media (max-width: 860px){
  .hero__inner { grid-template-columns: 1fr; }
  .hero__pane { max-width: 380px; margin-inline:auto; order:-1; aspect-ratio: 16/11; }
  .hero__mullion{ mask-image:none; -webkit-mask-image:none; opacity:.3; }
}

/* ---------- Trust bar ---------- */
.trustbar { border-bottom:1px solid var(--line); background:var(--card); }
.trustbar__row { display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; padding-block:1rem; }
.trustbar__item { display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--ink); font-size:.95rem; }
.trustbar__item svg { width:22px; height:22px; color:var(--brand); flex:0 0 auto; }

/* ---------- Cards / grids ---------- */
.grid { display:grid; gap:1.1rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid--3,.grid--4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .grid--2,.grid--3,.grid--4 { grid-template-columns: 1fr; } }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow); position:relative;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
.card--link { cursor:pointer; }
@media (hover: hover) and (pointer: fine) {
  .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #ecce86; }
}
.card h3 { font-size: 1.22rem; margin-bottom:.4rem; }
.card p { color: var(--muted); font-size:.98rem; }
.card__ico {
  position:relative; width:54px; height:54px; border-radius:15px;
  background:linear-gradient(158deg,#ffffff, var(--paper-2)); border:1px solid var(--line);
  color:var(--brand-deep); display:grid; place-items:center; margin-bottom:1rem; box-shadow:var(--shadow-sm);
}
.card__ico::after { content:""; position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:2px; background:var(--sun); }
.card__ico svg { width:26px; height:26px; }
.card--photo { padding:0; overflow:hidden; }
.card--photo .card__body { padding:1.4rem 1.5rem 1.5rem; }
.card__media { position:relative; aspect-ratio:16/10; background:var(--paper-2); overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,28,39,.10) 0 12%, transparent 34% 68%, rgba(19,28,39,.14)); pointer-events:none; }
@media (hover: hover) and (pointer: fine) {
  .card--link.card--photo:hover .card__media img { transform:scale(1.05); }
}
.card__more { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; margin-top:1rem; color:var(--brand); text-decoration:none; }
.card__more svg { width:18px; height:18px; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card--link:hover .card__more { color:var(--brand-deep); }
  .card--link:hover .card__more svg { transform: translateX(4px); }
}
.card--link::after { content:""; position:absolute; inset:0; border-radius:var(--radius); }
.card__price { font-size:.85rem; font-weight:700; color:var(--sun-text); background:var(--sun-soft); padding:.25rem .6rem; border-radius:999px; display:inline-block; margin-top:.7rem; }
.card a { position:relative; z-index:1; }

/* ---------- Feature list ---------- */
.checklist { list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.checklist li { display:flex; gap:.7rem; align-items:flex-start; }
.checklist svg { width:22px; height:22px; flex:0 0 auto; color:var(--eco); margin-top:2px; }
.section--ink .checklist svg { color: var(--sun); }

/* ---------- Split (text + aside) ---------- */
.split { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,4vw,3rem); align-items:center; }
.split--reverse .split__media { order:-1; }
@media (max-width: 820px){ .split { grid-template-columns:1fr; } .split--reverse .split__media{ order:0; } }
.media-card {
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--line);
  background: linear-gradient(135deg, #2a3f57, #16202c); color:#fff; padding: clamp(1.5rem,4vw,2.4rem);
  min-height: 260px; display:flex; flex-direction:column; justify-content:flex-end; position:relative;
  box-shadow: var(--shadow);
}
.media-card::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(70% 60% at 75% 15%, rgba(245,183,63,.4), transparent 60%);
}
.media-card > * { position:relative; }
.media-card .kicker { color:var(--sun); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.78rem; }
.media-card h3 { color:#fff; font-size:1.5rem; margin-top:.3rem; }
.media-card p { color:var(--on-dark-muted); margin-top:.4rem; }
/* Foto-Variante der Medienbox */
.media-card--photo { padding:0; min-height:340px; }
.media-card--photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.media-card--photo::before { z-index:1; background: linear-gradient(180deg, rgba(22,32,44,.05) 30%, rgba(22,32,44,.85)); }
.media-card--photo figcaption { position:relative; z-index:2; margin-top:auto; padding: clamp(1.3rem,3vw,1.8rem); }
.media-card--photo .kicker { color:var(--sun); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.78rem; }
.media-card--photo h3 { color:#fff; font-size:1.4rem; margin-top:.3rem; }
.media-card--photo p { color:#dfe7ee; margin-top:.35rem; }

/* ---------- Process steps (echte Reihenfolge) ---------- */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap:1.1rem; counter-reset: step; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
.step { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.5rem 1.5rem; position:relative; box-shadow:var(--shadow-sm); }
.step::before {
  counter-increment: step; content: counter(step,decimal-leading-zero);
  font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--sun-ink);
  background:linear-gradient(180deg,#f8c25a,var(--sun)); width:2.8rem; height:2.8rem; border-radius:14px;
  display:grid; place-items:center; margin-bottom:1rem; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--shadow-sm);
}
.step h3 { font-size:1.15rem; }
.step p { color:var(--muted); margin-top:.35rem; font-size:.97rem; }

/* ---------- Stats ---------- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
@media (max-width:700px){ .stats{ grid-template-columns:repeat(2,1fr);} }
.stat { text-align:left; }
.stat b { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem); color:#fff; display:block; letter-spacing:-.02em; }
.stat span { color:var(--on-dark-muted); font-size:.92rem; }

/* ---------- Local / Standorte ---------- */
.places { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
@media (max-width:760px){ .places{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .places{ grid-template-columns:1fr;} }
.place {
  display:flex; align-items:center; gap:.7rem; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:.85rem 1rem; text-decoration:none; color:var(--ink); font-weight:700;
  box-shadow:var(--shadow-sm);
  transition: transform .15s var(--ease-out), border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.place svg { width:20px; height:20px; color:var(--brand); transition:color .15s ease; }
@media (hover: hover) and (pointer: fine) {
  .place:hover { border-color:#ecce86; color:var(--ink); transform:translateY(-3px); box-shadow:var(--shadow); }
  .place:hover svg { color:var(--sun-deep); }
}
.place span { display:block; font-weight:500; font-size:.82rem; color:var(--muted); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--brand-deep), var(--ink)); color:#fff; border-radius: var(--radius); padding: clamp(1.8rem,5vw,3rem); position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(245,183,63,.4), transparent 65%); }
.cta-band h2 { color:#fff; font-size:clamp(1.6rem,4vw,2.3rem); position:relative; }
.cta-band p { color:var(--on-dark-muted); margin-top:.6rem; max-width:40rem; position:relative; }
.cta-band .btn-row { margin-top:1.4rem; position:relative; }

/* ---------- Breadcrumb ---------- */
.crumb { font-size:.85rem; color:var(--muted); padding-top:1.2rem; }
.crumb a { color:var(--muted); text-decoration:none; }
.crumb a:hover { color:var(--brand); }
.crumb span { color:var(--ink); font-weight:600; }

/* ---------- Page hero (Unterseiten) ---------- */
.page-hero { position:relative; overflow:hidden; background: linear-gradient(180deg, var(--paper-2), var(--paper)); border-bottom:1px solid var(--line); }
.page-hero::before { /* dezentes Fensterraster als Signature */
  content:""; position:absolute; top:0; right:0; width:38%; height:100%; z-index:0; pointer-events:none; opacity:.5;
  background-image: linear-gradient(rgba(19,28,39,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(19,28,39,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000);
}
.page-hero .wrap, .page-hero__inner, .page-hero .crumb { position:relative; z-index:1; }
.page-hero__inner { padding-block: clamp(1.6rem,4vw,2.6rem) clamp(2rem,5vw,3rem); max-width:52rem; }
.page-hero h1 { font-size:clamp(2rem,5vw,3.1rem); margin-top:.6rem; }
.page-hero p { color:var(--muted); font-size:1.12rem; margin-top:.8rem; }

/* ---------- Prose (Ratgeber / rechtl.) ---------- */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.05rem; }
.prose h2 { font-size:1.5rem; margin-top:2.2rem; }
.prose h3 { font-size:1.2rem; margin-top:1.6rem; }
.prose p, .prose li { color:var(--text); }
.prose ul,.prose ol { display:grid; gap:.5rem; }
.prose a { font-weight:600; }
.prose strong { color:var(--ink); }
.callout { background:var(--sun-soft); border:1px solid #f0dcae; border-left:4px solid var(--sun); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; }
.callout--eco { background:var(--eco-soft); border-color:#c8e5d6; border-left-color:var(--eco); }
.callout p { margin:0; }
.callout b { color:var(--ink); }
/* Autoren-/Aktualisierungszeile über Ratgeber-Artikeln */
.byline { font-size:.86rem; color:var(--muted); padding-bottom:1rem; border-bottom:1px solid var(--line); margin-bottom:.4rem; }
/* Ort-Label auf Referenzkarten */
.card__meta { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--sun-text); margin-bottom:.45rem; }
.card__meta svg { width:15px; height:15px; }

/* Kosten-Tabelle */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm); }
table { border-collapse:collapse; width:100%; min-width: 460px; background:var(--card); font-size:.96rem; }
th,td { text-align:left; padding:.75rem .95rem; border-bottom:1px solid var(--line-soft); }
th { background:var(--paper-2); font-family:var(--font-display); color:var(--ink); font-weight:700; }
tbody tr:last-child td { border-bottom:0; }

/* ---------- FAQ ---------- */
.faq { display:grid; gap:.7rem; max-width:48rem; }
.faq details { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 1.1rem; }
.faq summary { list-style:none; cursor:pointer; padding:1.05rem 0; font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.05rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after { content:"+"; font-family:var(--font-body); font-weight:700; color:var(--sun-text); font-size:1.4rem; transition: transform .2s var(--ease-out); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details[open] summary { border-bottom:1px solid var(--line-soft); }
.faq p { color:var(--muted); padding:.9rem 0 1.1rem; margin:0; }

/* ---------- Team ---------- */
.team { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:760px){ .team{ grid-template-columns:1fr;} }
.member { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; text-align:center; }
.member__avatar { width:78px; height:78px; border-radius:50%; margin:0 auto .8rem; background:linear-gradient(135deg,var(--brand),var(--ink)); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.5rem; }
.member h3 { font-size:1.15rem; }
.member span { color:var(--sun-deep); font-weight:600; font-size:.9rem; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,4vw,2.5rem); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr;} }
.contact-list { list-style:none; padding:0; margin:0; display:grid; gap:1.1rem; }
.contact-list li { display:flex; gap:.85rem; align-items:flex-start; }
.contact-list .ci { position:relative; flex:0 0 auto; width:48px; height:48px; border-radius:13px; background:linear-gradient(158deg,#fff,var(--paper-2)); border:1px solid var(--line); color:var(--brand-deep); display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.contact-list .ci::after { content:""; position:absolute; top:7px; right:7px; width:6px; height:6px; border-radius:2px; background:var(--sun); }
.contact-list .ci svg{ width:22px; height:22px; }
.contact-list b { display:block; color:var(--ink); font-family:var(--font-display); }
.contact-list a { color:var(--text); text-decoration:none; }
.contact-list a:hover { color:var(--brand); }
.map-card { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--card); }
.map-card iframe { width:100%; height:100%; min-height:320px; border:0; display:block; }

/* ---------- Formular ---------- */
.form { max-width: 46rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.form label { display:block; font-weight:600; color:var(--ink); font-size:.95rem; }
.form-full { margin-top:1rem; }
.form input, .form select, .form textarea {
  width:100%; margin-top:.4rem; font:inherit; color:var(--text);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.7rem .85rem;
}
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,95,158,.15); }
.form textarea { resize:vertical; }
.form-consent { display:flex; gap:.6rem; align-items:flex-start; margin-top:1rem; font-weight:500; color:var(--muted); font-size:.92rem; }
.form-consent input { width:auto; margin-top:.25rem; flex:0 0 auto; accent-color:var(--brand); }
.form .btn-row { margin-top:1.4rem; }
.form-note { max-width:46rem; margin-top:1rem; color:var(--muted); font-size:.86rem; }
.form-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }  /* Spamfalle */
.form-status { margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--radius-sm); font-weight:600; display:none; }
.form-status:not(:empty) { display:block; }
.form-status.is-ok    { background:var(--eco-soft); color:var(--eco-text); border:1px solid #c8e5d6; }
.form-status.is-warn  { background:var(--sun-soft); color:var(--sun-text); border:1px solid #f0dcae; }
.form-status.is-error { background:#fdeaea; color:#9b2226; border:1px solid #f3c9c9; }
.form-status a { color:inherit; }

/* ---------- Footer ---------- */
.site-footer { background:var(--ink); color:var(--on-dark-muted); padding-block: clamp(2.6rem,6vw,4rem) 1.6rem; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(1.4rem,4vw,2.5rem); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr;} }
.footer-grid h4 { color:#fff; font-size:1rem; margin-bottom:.9rem; letter-spacing:.02em; }
.footer-grid ul { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer-grid a { color:var(--on-dark-muted); text-decoration:none; }
.footer-grid a:hover { color:#fff; }
.footer-brand .brand__name { color:#fff; }
.footer-brand p { margin-top:.8rem; font-size:.92rem; max-width:24rem; }
.footer-contact { font-style:normal; display:grid; gap:.45rem; font-size:.94rem; }
.footer-contact a { color:var(--on-dark); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:2.4rem; padding-top:1.4rem; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; justify-content:space-between; font-size:.85rem; }
.footer-bottom a { color:var(--on-dark-muted); text-decoration:none; }
.footer-bottom a:hover{ color:#fff; }
/* Mobil: komfortablere Tap-Flächen für Footer-Links */
@media (max-width: 640px) {
  .footer-grid ul a, .footer-contact a, .footer-bottom a { display:inline-block; padding-block:.4rem; }
}

/* ---------- Reveal on scroll ---------- */
/* Nur wenn JS aktiv ist, wird zunächst versteckt – sonst bleibt Inhalt sichtbar.
   Entrance läuft als animation (nicht transition), damit die transition der
   Elemente für Hover/Interaktion frei bleibt. */
.js .reveal { opacity:0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .reveal.is-in { opacity:1; transform:none; }
/* Sanfter Stagger, wenn eine Reihe gemeinsam erscheint (nur während des Reveals) */
.grid > .reveal:nth-child(2), .steps > .reveal:nth-child(2), .team > .reveal:nth-child(2) { transition-delay:.06s; }
.grid > .reveal:nth-child(3), .steps > .reveal:nth-child(3), .team > .reveal:nth-child(3) { transition-delay:.12s; }
.grid > .reveal:nth-child(4) { transition-delay:.18s; }
@media (prefers-reduced-motion: reduce){
  .js .reveal { opacity:1; transform:none; transition:none; }
  /* Bewegung entfernen, Farb-/Schatten-Feedback behalten */
  .card--link:hover, .place:hover,
  .btn--sun:hover, .btn--ink:hover, .btn--ghost:hover,
  .card--link.card--photo:hover .card__media img,
  .card--link:hover .card__more svg { transform:none !important; }
}

/* ---------- Utilities ---------- */
.center { text-align:center; }
.mt-0{margin-top:0}.mt-1{margin-top:.8rem}.mt-2{margin-top:1.6rem}.mt-3{margin-top:2.4rem}
.narrow { max-width:52rem; }
.narrow--center { max-width:52rem; margin-inline:auto; }
.pill-note { display:inline-block; background:var(--eco-soft); color:var(--eco-text); font-weight:700; font-size:.8rem; padding:.3rem .7rem; border-radius:999px; }

/* ============================================================
   Interaktions-Politur (emil-design-eng)
   ============================================================ */

/* Links: sanfter Farbwechsel statt hartem Umspringen */
a { transition: color .15s ease; }
.nav__links a { transition: background-color .15s var(--ease-out), color .15s ease; }

/* #1 Hero: gestaffelter Einlauf beim Laden (Delight-Moment).
   transition-basiert + per JS getriggert (.in) -> fällt robust auf „sichtbar" zurück. */
.js .hero-copy > * { opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .hero-figure   { opacity:0; transform: translateY(24px) scale(.985); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay:.16s; }
.js .hero-copy.in > *, .js .hero-figure.in { opacity:1; transform:none; }
.js .hero-copy > *:nth-child(1) { transition-delay:.04s; }
.js .hero-copy > *:nth-child(2) { transition-delay:.11s; }
.js .hero-copy > *:nth-child(3) { transition-delay:.18s; }
.js .hero-copy > *:nth-child(4) { transition-delay:.25s; }
.js .hero-copy > *:nth-child(5) { transition-delay:.32s; }

/* #2 FAQ: weiches Auf-/Zuklappen – Höhe wird von main.js gesteuert */
.faq details > p { overflow:hidden; transition: height .28s var(--ease-out), opacity .22s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .js .hero-copy > *, .js .hero-figure { opacity:1 !important; transform:none !important; transition:none; }
  .faq details > p { transition:none; }
}

/* ============================================================
   Scroll-Effekte (native CSS scroll-driven, dezent & robust)
   Nur bei erlaubter Bewegung UND vorhandener Browser-Unterstützung;
   sonst statisches, voll sichtbares Bild (graceful degradation).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero-Parallax: das Foto driftet minimal langsamer als der Text */
  @supports (animation-timeline: scroll()) {
    .hero__paneimg {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
      will-change: transform;
    }
    @keyframes hero-parallax {
      from { transform: translateY(-3.5%) scale(1.09); }
      to   { transform: translateY(4.5%)  scale(1.09); }
    }
  }

  /* Bild-Aufdeckung: Fotos werden beim Reinscrollen aufgezogen (Vorhang) */
  @supports (animation-timeline: view()) {
    .card__media img, .media-card--photo img {
      animation: img-wipe linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
    }
    @keyframes img-wipe {
      from { clip-path: inset(0 0 100% 0); }
      to   { clip-path: inset(0 0 0 0); }
    }
  }
}

/* Ziffern beim Hochzählen ohne Breiten-Zittern */
.stat b { font-variant-numeric: tabular-nums; }

/* ============================================================
   Schnellkontakt-Leiste (nur Mobil) – kürzester Weg zur Anfrage
   ============================================================ */
.callbar { display: none; }
@media (max-width: 860px) {
  .callbar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);   /* iPhone-Gestenleiste */
    box-shadow: 0 -6px 24px -12px rgba(19,28,39,.35);
  }
  .callbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
    min-height: 58px; padding: .45rem .3rem; text-decoration: none;
    color: var(--ink); font-weight: 700; font-size: .78rem; line-height: 1.1;
    border-right: 1px solid var(--line-soft);
  }
  .callbar__item:last-child { border-right: 0; }
  .callbar__item svg { width: 21px; height: 21px; color: var(--brand); }
  .callbar__item--phone svg { color: var(--eco-text); }
  .callbar__item--cta { background: linear-gradient(180deg,#f8c25a,var(--sun)); color: var(--sun-ink); }
  .callbar__item--cta svg { color: var(--sun-ink); }
  .callbar__item:active { filter: brightness(.95); }
  /* Platz schaffen, damit die Leiste nichts verdeckt */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}