/* Atelier Vu – zentrales Stylesheet (Session 19: aus index.html ausgelagert,
   damit alle Seiten EINE Stil-Quelle teilen). Pfade root-absolut. */

  /* ===== Self-hosted Webfonts (DSGVO) – Newsreader (Headline) + Instrument Sans (Text) ===== */
  @font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap;
    src:url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
  @font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap;
    src:url(/fonts/instrument-sans-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
  @font-face { font-family:'Newsreader'; font-style:italic; font-weight:400 500; font-display:swap;
    src:url(/fonts/newsreader-italic-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
  @font-face { font-family:'Newsreader'; font-style:italic; font-weight:400 500; font-display:swap;
    src:url(/fonts/newsreader-italic-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
  @font-face { font-family:'Newsreader'; font-style:normal; font-weight:400 600; font-display:swap;
    src:url(/fonts/newsreader-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
  @font-face { font-family:'Newsreader'; font-style:normal; font-weight:400 600; font-display:swap;
    src:url(/fonts/newsreader-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

  /* ===== Design-Tokens (Palette „Werkstatt Warm“) ===== */
  :root{
    --paper:#F4EDE1; --paper-2:#ECE1CF; --card:#fff;
    --ink:#2A2018; --ink-2:#4a3f34; --ink-3:#5a4d3f; --muted:#6f6250;
    --accent:#B4693C;        /* Marken-Terracotta: Flächen, große/Deko-Elemente */
    --accent-text:#93502A;   /* dunkler nur für kleinen Text auf hell → WCAG AA (>=4.5:1) */
    --accent-deep:#9C552C;   /* tieferer Ton für Wiesn-Banner-Grund → heller Text besteht AA */
    --gold:#E0A96B;
    --wa:#0E7F48; --wa-bright:#25D366; --dark:#1d150f;   /* --wa dunkler → weißer Text ≥4.5:1 (WCAG AA) */
    --fh:'Newsreader', Georgia, serif;
    --fb:'Instrument Sans', system-ui, sans-serif;
    --wrap:1160px;
  }

  /* ===== Reset & Basis ===== */
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; background:var(--dark); }   /* iOS Safari: Overscroll-/Toolbar-Bereich am dunklen Trustbar-/Footer-Ende einfärben statt cremefarbene body-Lücke */
  body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--fb); -webkit-font-smoothing:antialiased; }
  img{ max-width:100%; }
  a{ color:var(--accent-text); text-decoration:none; }
  a:hover{ color:var(--ink); }
  /* In-Text-Links zusätzlich unterstreichen (WCAG 1.4.1 „Use of Color“) */
  .ctCardSub a, .ctDs a, .prose a, .faq__answer a, .legal a, .rte a{ text-decoration:underline; text-underline-offset:.16em; }
  h1,h2,h3,p{ margin:0; }
  :where(section)[id]{ scroll-margin-top:88px; }

  /* ===== Accessibility ===== */
  .skip-link{ position:absolute; left:16px; top:-56px; z-index:200; background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 10px 10px; font-weight:600; transition:top .18s; }
  .skip-link:focus{ top:0; color:#fff; }
  :focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:6px; }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

  /* ===== Icons (Sprite) ===== */
  .ic{ display:inline-block; flex:none; vertical-align:middle; }
  .ic--gold{ color:var(--gold); }
  .sprite{ position:absolute; width:0; height:0; overflow:hidden; }

  /* ===== Layout-Helfer ===== */
  .wrap{ max-width:var(--wrap); margin-inline:auto; }
  .eyebrow{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); font-weight:600; margin-bottom:10px; }
  .star{ color:var(--gold); }

  /* ===== Buttons ===== */
  .btn{ display:inline-flex; align-items:center; gap:10px; border-radius:999px; font-weight:600; line-height:1; cursor:pointer; }
  .btn-wa{ background:var(--wa); color:#fff; padding:15px 24px; font-size:16px; box-shadow:0 6px 20px rgba(18,140,82,.3); }
  .btn-wa:hover{ color:#fff; }
  .btn-outline{ background:transparent; border:1px solid rgba(42,32,24,.22); color:var(--ink); padding:15px 24px; font-size:16px; justify-content:center; }
  .btn-wa-bright{ background:var(--wa-bright); color:#0a2e1a; padding:17px 30px; font-size:17px; font-weight:700; box-shadow:0 8px 24px rgba(37,211,102,.35); }
  .btn-wa-bright:hover{ color:#0a2e1a; }
  .btn-light-outline{ border:1px solid rgba(255,255,255,.35); color:#fff; padding:17px 30px; font-size:17px; }
  .btn-light-outline:hover{ color:#fff; }

  /* ===== Trust-Bar ===== */
  .trustbar{ background:var(--ink); color:#e7dccb; font-size:12.5px; }
  .trustbar__inner{ padding:8px 24px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .trustbar__usps{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
  .trustbar__usps > span{ display:inline-flex; align-items:center; gap:7px; }
  .trustbar__phone{ display:inline-flex; align-items:center; gap:7px; color:#fff; font-weight:600; white-space:nowrap; }
  .trustbar__phone:hover{ color:#fff; }
  .trustbar__rotate{ display:none; }

  /* ===== Header ===== */
  .site-header{ position:sticky; top:0; z-index:50; background:rgba(244,237,225,.9); backdrop-filter:blur(10px); border-bottom:1px solid rgba(42,32,24,.1); }
  .site-header__inner{ padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
  .brand{ display:flex; align-items:center; gap:13px; color:var(--ink); }
  .brand:hover{ color:var(--ink); }
  .brand__logo{ height:56px; width:auto; display:block; }
  .brand__name{ display:flex; flex-direction:column; line-height:1.05; }
  .brand__name b{ font-family:var(--fh); font-weight:600; font-size:23px; color:var(--ink); }
  .brand__name span{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-text); font-weight:600; }
  .main-nav{ display:flex; align-items:center; gap:22px; font-size:14.5px; font-weight:500; }
  .main-nav a{ color:var(--ink-2); }
  .header-cta{ display:flex; align-items:center; gap:10px; }
  .hdr-call{ display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border:1px solid rgba(42,32,24,.22); border-radius:999px; color:var(--ink); font-weight:600; font-size:14px; }
  .hdr-wa{ display:inline-flex; align-items:center; gap:9px; padding:10px 17px; background:var(--wa); border-radius:999px; color:#fff; font-weight:600; font-size:14px; box-shadow:0 4px 14px rgba(18,140,82,.28); }
  .hdr-wa:hover{ color:#fff; }
  .hdr-burger{ display:none; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; border:1px solid rgba(42,32,24,.22); border-radius:12px; cursor:pointer; color:var(--ink); padding:0; }

  /* ===== Mobiles Vollbild-Menü (<dialog>) ===== */
  #mobileMenu{ border:0; margin:0; padding:20px 24px 28px; width:100%; max-width:none; height:100%; max-height:none; inset:0; background:var(--paper); color:var(--ink); }
  #mobileMenu:not([open]){ display:none; }
  #mobileMenu[open]{ display:flex; flex-direction:column; }
  #mobileMenu::backdrop{ background:var(--paper); }
  .menu__top{ display:flex; align-items:center; justify-content:space-between; }
  .menu__brand{ display:flex; align-items:center; gap:10px; }
  .menu__brand img{ height:36px; width:auto; display:block; }
  .menu__brand b{ font-family:var(--fh); font-weight:600; font-size:20px; color:var(--ink); }
  .menu__close{ width:44px; height:44px; background:transparent; border:1px solid rgba(42,32,24,.22); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; padding:0; }
  .menu__nav{ display:flex; flex-direction:column; margin-top:26px; overflow-y:auto; min-height:0; }
  .menu__nav a{ font-family:var(--fh); font-size:24px; font-weight:500; color:var(--ink); padding:15px 0; border-bottom:1px solid rgba(42,32,24,.1); }
  .menu__nav a:last-child{ border-bottom:0; }
  /* Leistungs-Untergruppe im Mobilmenü: kompakter als die Hauptpunkte, sonst sprengt das Menü den Bildschirm.
     .menu__nav scrollt intern (min-height:0), damit der CTA-Block unten sichtbar bleibt. */
  /* Aufklappbare Leistungs-Gruppe im Mobilmenü (S47, standardmäßig zu).
     Nativer <details>-Mechanismus – kein JS, also CSP-konform; Optik und
     rotierendes Plus wie bei den FAQ-Akkordeons (siehe .faq__item weiter unten). */
  .menu__group summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
    font-family:var(--fh); font-size:24px; font-weight:500; color:var(--ink); padding:15px 0; border-bottom:1px solid rgba(42,32,24,.1); }
  .menu__group summary::-webkit-details-marker{ display:none; }
  .menu__plus{ flex:none; font-size:22px; color:var(--accent-text); transition:transform .2s; }
  .menu__group[open] summary{ border-bottom:0; }
  .menu__group[open] .menu__plus{ transform:rotate(45deg); }
  .menu__sub{ display:flex; flex-direction:column; padding:2px 0 8px 14px; border-bottom:1px solid rgba(42,32,24,.1); }
  .menu__nav .menu__sub a{ font-size:17px; font-weight:400; color:var(--ink-2); padding:8px 0; border-bottom:0; }

  /* ===== Hero ===== */
  .hero{ padding:clamp(44px,7vw,84px) 24px; }
  .hero__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(34px,5vw,64px); align-items:center; }
  .hero__h1{ font-family:var(--fh); font-weight:500; font-size:clamp(36px,5.2vw,58px); line-height:1.04; letter-spacing:-.01em; color:var(--ink); margin:0 0 20px; }
  .hero__h1 em{ font-style:italic; color:var(--accent); }
  .hero__sub{ font-size:clamp(17px,2vw,20px); line-height:1.55; color:var(--ink-2); margin:0 0 30px; max-width:46ch; }
  .hero__sub b{ display:block; color:var(--ink); font-weight:600; }
  .hero__sub span{ display:block; margin-top:5px; }
  .hero__sub-m{ display:none; font-size:18px; line-height:1.5; color:var(--ink-2); margin:0 0 26px; }
  .hero__sub-m b{ display:block; color:var(--ink); font-weight:600; }
  .hero__sub-m span{ display:block; margin-top:7px; }
  .hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
  .hero__chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; color:var(--ink); background:#fff; border:1px solid rgba(42,32,24,.1); padding:8px 13px; border-radius:8px; }
  .hero__chips-m{ display:none; flex-wrap:wrap; gap:8px; margin-top:2px; }
  .hero__chips-m .chip{ font-size:12.5px; gap:6px; padding:8px 12px; white-space:nowrap; }
  .hero__media{ position:relative; }
  .hero__img{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(42,32,24,.45); aspect-ratio:4/5; margin:0; }
  .hero__img img{ width:100%; height:100%; object-fit:cover; object-position:72% 35%; display:block; }
  .hero__badge{ position:absolute; bottom:-18px; left:-18px; background:var(--ink); color:#fff; padding:16px 20px; border-radius:12px; box-shadow:0 14px 30px rgba(42,32,24,.35); max-width:210px; }
  .hero__badge b{ font-family:var(--fh); font-size:30px; font-weight:600; line-height:1; color:var(--gold); display:block; }
  .hero__badge span{ font-size:13px; line-height:1.35; margin-top:5px; color:#d8c9b6; display:block; }
  /* Mobiles Hero-Foto (im Textfluss) */
  .hero__photo-in{ display:none; position:relative; margin:0 0 16px; }
  .hero__photo-in-frame{ border-radius:16px; overflow:hidden; box-shadow:0 20px 44px -22px rgba(42,32,24,.4); }
  .hero__photo-in-frame img{ width:100%; height:100%; object-fit:cover; object-position:72% 30%; display:block; }
  .hero__photo-in-badge{ position:absolute; left:-24px; bottom:-16px; background:var(--ink); color:#fff; border-radius:0 14px 14px 0; padding:13px 18px 13px 24px; display:inline-flex; align-items:center; gap:12px; max-width:92%; box-shadow:0 10px 24px -12px rgba(42,32,24,.5); }
  .hero__photo-in-badge b{ font-family:var(--fh); font-size:26px; font-weight:600; line-height:1; color:var(--gold); white-space:nowrap; }
  .hero__photo-in-badge span{ font-size:12.5px; line-height:1.3; color:#d8c9b6; }

  /* ===== Wiesn-Banner ===== */
  .wiesn{ padding:0 24px 8px; }
  .wiesn__inner{ background:var(--accent-deep); border-radius:14px; padding:18px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .wiesn__text{ display:flex; align-items:center; gap:14px; color:#fff; }
  .wiesn__text b{ font-family:var(--fh); font-size:19px; font-weight:600; }
  .wiesn__text span{ font-size:15px; color:#fdeee0; }
  .wiesn__emoji{ font-size:24px; }
  .wiesn__btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; background:#fff; border-radius:999px; color:var(--accent-text); font-weight:700; font-size:14px; white-space:nowrap; }

  /* ===== Vertrauens-Triade ===== */
  .triade{ padding:clamp(44px,6vw,64px) 24px; }
  .triade__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:28px; }
  .triade__item{ display:flex; gap:14px; align-items:flex-start; }
  .triade__icon{ flex:none; width:44px; height:44px; border-radius:11px; background:rgba(180,105,60,.14); display:flex; align-items:center; justify-content:center; color:var(--accent); }
  .triade__item h3{ font-family:var(--fh); font-size:19px; font-weight:600; color:var(--ink); margin-bottom:4px; }
  .triade__item p{ font-size:14.5px; line-height:1.5; color:var(--ink-3); }

  /* ===== Sektions-Kopf & Titel ===== */
  .section-head{ max-width:640px; margin-bottom:clamp(32px,4vw,48px); }
  .section-title{ font-family:var(--fh); font-weight:500; font-size:clamp(28px,4vw,42px); line-height:1.1; color:var(--ink); }
  .section-title--sm{ font-size:clamp(26px,3.6vw,38px); line-height:1.12; }

  /* ===== Ablauf ===== */
  .ablauf{ padding:clamp(56px,8vw,90px) 24px; background:var(--paper-2); }
  .ablauf__steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); background:var(--paper); border:1px solid rgba(42,32,24,.1); border-radius:16px; overflow:hidden; }
  .step{ padding:26px; border-right:1px solid rgba(42,32,24,.1); }
  .step:last-child{ border-right:0; }
  .step__num{ font-family:var(--fh); font-size:30px; font-weight:600; color:var(--accent); margin-bottom:12px; }
  .step h3{ font-family:var(--fh); font-size:20px; font-weight:600; color:var(--ink); margin-bottom:7px; }
  .step p{ font-size:14px; line-height:1.55; color:var(--ink-3); }
  .ablauf__note{ margin-top:18px; font-size:13.5px; color:var(--muted); }

  /* ===== Garn-Band ===== */
  .band{ position:relative; height:clamp(140px,20vw,200px); overflow:hidden; }
  .band img{ width:100%; height:100%; object-fit:cover; object-position:50% 35%; display:block; }
  .band__overlay{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(42,32,24,.35),rgba(42,32,24,.08)); }

  /* ===== Leistungen & Preise ===== */
  .leistungen{ padding:clamp(56px,8vw,90px) 24px; }
  .section-head__more{ margin-top:8px; font-size:14px; }
  .section-head__more a{ text-decoration:underline; text-underline-offset:.16em; }
  .price-table{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); border:1px solid rgba(42,32,24,.12); border-radius:16px; overflow:hidden; background:#fff; }
  .price-row{ padding:22px 24px; border-bottom:1px solid rgba(42,32,24,.1); display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
  .price-row h3{ font-family:var(--fh); font-size:19px; font-weight:600; color:var(--ink); }
  .price-row p{ margin-top:3px; font-size:13.5px; color:var(--muted); }
  .price-row__amount{ font-weight:700; color:var(--accent-text); white-space:nowrap; font-size:16px; }
  .price-row--dark{ background:var(--ink); }
  .price-row--dark h3{ color:#fff; }
  .price-row--dark p{ color:#c9b79f; }
  .price-row--dark .price-row__amount{ color:var(--gold); }
  /* Verlinkte Preiszeilen (Startseite): ganze Zeile ist die Trefferfläche – mobil entscheidend.
     color:inherit, weil h3/p/Betrag ihre Farbe selbst setzen; der Pfeil sitzt als ::after am Titel. */
  a.price-row{ color:inherit; text-decoration:none; transition:background-color .15s ease; }
  a.price-row h3::after{ content:"\2009\2192"; color:var(--accent-text); font-weight:400; }
  a.price-row:hover{ background:rgba(180,105,60,.06); }
  a.price-row:hover h3{ color:var(--accent-text); }
  /* .price-table hat overflow:hidden – ohne negativen Offset wird der Fokusring an den Rändern abgeschnitten */
  a.price-row:focus-visible{ outline-offset:-3px; }
  a.price-row--dark h3::after{ color:var(--gold); }
  a.price-row--dark:hover{ background:#3a2b1f; }
  a.price-row--dark:hover h3{ color:var(--gold); }
  .price-foot p a{ text-decoration:underline; text-underline-offset:.16em; color:var(--accent-text); white-space:nowrap; }
  .price-foot{ margin-top:20px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
  .price-foot p{ font-size:13.5px; color:var(--muted); max-width:62ch; }
  .price-foot .btn-wa{ padding:12px 20px; font-size:14.5px; }

  /* ===== Warum ===== */
  .warum{ padding:clamp(56px,8vw,90px) 24px; background:var(--paper-2); }
  .warum .section-head{ margin-bottom:clamp(30px,4vw,44px); }
  .warum__intro{ margin-top:14px; font-size:15.5px; line-height:1.6; color:var(--ink-2); }
  .warum__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
  .warum__card{ background:var(--paper); border:1px solid rgba(42,32,24,.1); border-radius:14px; padding:26px; }
  .warum__card h3{ font-family:var(--fh); font-size:20px; font-weight:600; color:var(--ink); margin-bottom:9px; }
  .warum__card p{ font-size:14.5px; line-height:1.55; color:var(--ink-3); }

  /* ===== Einzugsgebiet ===== */
  .gebiet{ padding:clamp(56px,8vw,90px) 24px; }
  .gebiet__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,5vw,56px); align-items:center; }
  .gebiet__lead{ font-size:15.5px; line-height:1.6; color:var(--ink-2); }
  .gebiet .section-title--sm{ margin:0 0 16px; }
  .chips-area{ display:flex; flex-wrap:wrap; gap:10px; }
  .chips-area li{ list-style:none; background:#fff; border:1px solid rgba(42,32,24,.12); border-radius:999px; padding:9px 16px; font-size:14px; font-weight:500; color:var(--ink); }
  .chips-area{ padding:0; margin:0; }

  /* ===== Über Herrn Vu ===== */
  .ueber{ padding:clamp(56px,8vw,90px) 24px; background:var(--paper-2); }
  .ueber__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(32px,5vw,60px); align-items:center; }
  .ueber .section-title--sm{ margin:0 0 18px; }
  .ueber p{ font-size:15.5px; line-height:1.65; color:var(--ink-2); margin:0 0 14px; }
  .ueber p + p{ margin-bottom:22px; }
  .ueber__tags{ display:flex; flex-wrap:wrap; gap:10px; }
  .ueber__tags span{ font-size:13.5px; font-weight:500; color:var(--ink); border:1px solid rgba(180,105,60,.4); padding:8px 14px; border-radius:8px; }
  .ueber__figure{ border-radius:16px; overflow:hidden; box-shadow:0 24px 50px -22px rgba(42,32,24,.5); aspect-ratio:4/5; max-width:440px; justify-self:center; margin:0; }
  .ueber__figure img{ width:100%; height:100%; object-fit:cover; object-position:65% 50%; display:block; }

  /* ===== FAQ ===== */
  .faq{ padding:clamp(56px,8vw,90px) 24px; }
  .faq__inner{ max-width:820px; margin-inline:auto; }
  .faq__head{ text-align:center; margin-bottom:clamp(28px,4vw,44px); }
  .faq__list{ display:flex; flex-direction:column; gap:12px; }
  .faq__item{ background:#fff; border:1px solid rgba(42,32,24,.1); border-radius:12px; }
  .faq__item summary{ cursor:pointer; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--fh); font-size:18px; font-weight:600; color:var(--ink); list-style:none; }
  .faq__item summary::-webkit-details-marker{ display:none; }
  .faq__plus{ flex:none; font-size:22px; color:var(--accent-text); transition:transform .2s; }
  .faq__item[open] .faq__plus{ transform:rotate(45deg); }
  .faq__answer{ padding:0 22px 20px; font-size:14.5px; line-height:1.6; color:var(--ink-3); }

  /* ===== Kontakt-Sektion (Formular + Direkt-CTAs) ===== */
  [hidden]{ display:none !important; }
  #kontakt{ padding:clamp(64px,9vw,110px) 24px; background:var(--ink); }
  .ctWrap{ max-width:1080px; margin:0 auto; }
  .ctHead{ text-align:center; margin-bottom:clamp(32px,5vw,48px); }
  .ctEyebrow{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:16px; }
  #kontakt h2{ font-family:var(--fh); font-weight:500; font-size:clamp(30px,4.6vw,50px); line-height:1.08; color:#fff; margin:0 0 18px; }
  .ctIntro{ font-size:clamp(16px,2vw,19px); line-height:1.6; color:#d8c9b6; margin:0 auto; max-width:52ch; }
  .ctGrid{ display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:start; text-align:left; }
  .ctCard{ background:var(--paper); border-radius:18px; padding:clamp(22px,3vw,30px); scroll-margin:24px 0; }
  .ctCardTitle{ font-family:var(--fh); font-size:22px; font-weight:600; color:var(--ink); margin-bottom:5px; }
  .ctCardSub{ margin:0 0 18px; font-size:14px; line-height:1.55; color:var(--ink-3); }
  .ctCardSub a{ color:var(--accent-text); font-weight:600; white-space:nowrap; }
  .ctForm{ display:flex; flex-direction:column; gap:16px; }
  .ctForm label.fld{ display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
  .ctForm .opt{ font-weight:400; color:var(--muted); }
  .ctForm input[type=text],.ctForm input[type=email],.ctForm input[type=tel],.ctForm textarea{ box-sizing:border-box; width:100%; padding:12px 14px; border:1px solid rgba(42,32,24,.25); border-radius:10px; background:#fff; font-family:inherit; font-size:15px; color:var(--ink); }
  .ctForm textarea{ line-height:1.5; resize:vertical; }
  .ctForm input:focus,.ctForm textarea:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(180,105,60,.15); }
  .ctRow2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .ctErr{ color:#a4442a; font-size:12.5px; margin-top:5px; }
  #errDs{ margin-top:-8px; }
  .ctFile{ display:flex; align-items:center; gap:10px; border:1px dashed rgba(42,32,24,.35); border-radius:10px; padding:12px 14px; cursor:pointer; color:var(--ink-3); font-size:14px; }
  .ctFile:hover{ border-color:var(--accent); color:var(--ink); }
  .ctFile svg{ flex:none; }
  .ctDs{ display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:var(--ink-3); cursor:pointer; }
  .ctDs input{ flex:none; width:17px; height:17px; margin-top:1px; accent-color:var(--accent); }
  .ctDs a{ color:var(--accent-text); }
  .ctSubmit{ display:block; width:100%; background:var(--ink); color:var(--paper); border:none; border-radius:999px; padding:15px 24px; font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; }
  .ctSubmit:hover{ background:var(--dark); }
  .ctSubmit:disabled{ opacity:.65; cursor:default; }
  .ctMicro{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:-4px; }
  .ctThanks{ text-align:center; padding:28px 10px; }
  .ctThanks .ok{ width:52px; height:52px; border-radius:50%; background:rgba(18,140,82,.12); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
  .ctThanks b{ display:block; font-family:var(--fh); font-size:24px; font-weight:600; color:var(--ink); margin-bottom:8px; }
  .ctThanks p{ margin:0 auto; font-size:14.5px; line-height:1.6; color:var(--ink-3); max-width:40ch; }
  .ctSide{ border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); border-radius:18px; padding:clamp(22px,3vw,30px); }
  .ctSide .ctCardTitle{ color:#fff; margin-bottom:8px; }
  .ctSide .lead{ margin:0 0 20px; font-size:14.5px; line-height:1.6; color:#d8c9b6; }
  .ctSide .btns{ display:flex; flex-direction:column; gap:12px; }
  .ctWa{ display:inline-flex; align-items:center; justify-content:center; gap:11px; padding:16px 26px; background:var(--wa-bright); border-radius:999px; color:#0a2e1a; font-weight:700; font-size:16.5px; box-shadow:0 8px 24px rgba(37,211,102,.3); }
  .ctWa:hover{ color:#0a2e1a; }
  .ctCall{ display:inline-flex; align-items:center; justify-content:center; gap:11px; padding:15px 26px; border:1px solid rgba(255,255,255,.35); border-radius:999px; color:#fff; font-weight:600; font-size:16px; }
  .ctCall:hover{ background:rgba(255,255,255,.07); color:#fff; }
  .ctNote{ border-top:1px solid rgba(255,255,255,.14); margin-top:20px; padding-top:16px; font-size:13.5px; line-height:1.6; color:#b9a992; }
  .ct-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

  /* ===== Footer ===== */
  .site-footer{ background:var(--dark); color:#b3a595; padding:48px 24px 96px; }
  .site-footer__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px; align-items:start; }
  .footer-brand__row{ display:flex; align-items:center; gap:12px; }
  .footer-brand__row img{ height:44px; width:auto; display:block; }
  .footer-brand__row b{ font-family:var(--fh); font-weight:600; font-size:21px; color:#fff; }
  .footer-brand__tag{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-top:10px; }
  .footer-brand p{ margin-top:14px; font-size:13.5px; line-height:1.6; max-width:34ch; }
  .footer-col h2{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#9a8b76; margin-bottom:12px; font-weight:600; }
  .footer-col__links{ display:flex; flex-direction:column; gap:9px; font-size:14px; }
  .footer-col__links a{ color:#d8c9b6; }
  .footer-col__links span{ color:#a89a86; }
  .footer-col__legal{ margin-top:14px; font-size:12px; line-height:1.5; color:#9a8b76; }
  .site-footer__bottom{ margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; color:#9a8b76; }

  /* ===== Sticky-Leiste ===== */
  #stickyBar{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(29,21,15,.96); backdrop-filter:blur(8px); padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid rgba(224,169,107,.3); }
  #stickyBar .barText{ color:#f4ede1; font-size:14.5px; }
  #stickyBar .barText strong{ font-family:var(--fh); font-weight:600; }
  #stickyBar .barActions{ display:flex; gap:10px; }
  #stickyBar .barActions a{ text-decoration:none; }
  #stickyBar .barBtn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 16px; border:1px solid rgba(255,255,255,.4); border-radius:999px; color:#fff; font-weight:600; font-size:14px; flex:none; }
  #stickyBar .barBtn:hover{ background:rgba(255,255,255,.08); color:#fff; }
  #stickyBar .barBtn svg{ flex:none; }
  #stickyBar .barWa{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; background:var(--wa-bright); border-radius:999px; color:#0a2e1a; font-weight:700; font-size:14px; }
  #stickyBar .barWa:hover{ color:#0a2e1a; }

  /* ===== Responsive: Tablet-Breakpoint (Nav → Burger) ===== */
  @media (max-width:860px){
    .main-nav, .hdr-wa{ display:none; }
    .hdr-burger{ display:inline-flex; }
    .ctGrid{ grid-template-columns:1fr; }
    .ctSide{ order:-1; }
    .ctRow2{ grid-template-columns:1fr; }
  }

  /* ===== Responsive: Mobil-CRO ===== */
  @keyframes tbFade{ 0%{opacity:0} 3%{opacity:1} 22%{opacity:1} 25%{opacity:0} 100%{opacity:0} }
  @media (prefers-reduced-motion: reduce){ .trustbar__rotate > *{ animation:none !important; } .trustbar__rotate > *:first-child{ opacity:1 !important; } }
  @media (max-width:600px){
    .hdr-call{ display:none; }
    .trustbar__usps, .trustbar__phone{ display:none; }
    .trustbar__inner{ justify-content:center; }
    .trustbar__rotate{ display:block; position:relative; width:100%; height:18px; }
    .trustbar__rotate > *{ position:absolute; left:0; right:0; text-align:center; opacity:0; white-space:nowrap; animation:tbFade 12s step-end infinite both; }
    .trustbar__rotate > *:nth-child(2){ animation-delay:3s; }
    .trustbar__rotate > *:nth-child(3){ animation-delay:6s; }
    .trustbar__rotate > *:nth-child(4){ animation-delay:9s; }
    .trustbar__rotate a{ color:#fff; font-weight:600; }

    .hero{ padding-top:22px; }
    .hero__h1{ font-size:31px; line-height:1.08; }
    .hero__sub, .hero__chips, .hero__media{ display:none; }
    .hero__sub-m{ display:block; order:3; }
    .hero__chips-m{ display:flex; order:5; }
    .hero__text{ display:flex; flex-direction:column; gap:18px; }
    .hero__text > *{ margin:0 !important; }
    .hero__h1{ order:1; }
    .hero__ctas{ order:4; flex-direction:column; align-items:stretch; }
    .hero__ctas > a{ width:100%; justify-content:center; padding-top:16px; padding-bottom:16px; }
    .hero__photo-in{ display:block; order:2; margin-bottom:16px !important; }
    .hero__photo-in-frame{ aspect-ratio:16/10; }

    #stickyBar{ padding:10px 14px; }
    #stickyBar .barText{ display:none; }
    #stickyBar .barActions{ width:100%; gap:8px; }
    #stickyBar .barActions a{ justify-content:center; padding-top:13px; padding-bottom:13px; }
    #stickyBar .barActions a:last-child{ flex:1; }
    #stickyBar .barMailLabel{ display:none; }
  }

  /* ============================================================
     UNTERSEITEN-BAUSTEINE (Session 19: Leistungs-/Info-Seiten)
     Nutzen dieselben Tokens & Komponenten wie die Startseite –
     kein neues Design, nur auf neue Inhalte angewandt.
     ============================================================ */

  /* ===== Breadcrumb ===== */
  .breadcrumb{ padding:16px 24px 0; }
  .breadcrumb__list{ max-width:var(--wrap); margin-inline:auto; list-style:none; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
  .breadcrumb__list li{ display:inline-flex; align-items:center; gap:8px; }
  .breadcrumb__list li + li::before{ content:"›"; color:var(--muted); }
  .breadcrumb a{ color:var(--accent-text); }
  .breadcrumb a:hover{ color:var(--ink); }
  .breadcrumb [aria-current]{ color:var(--ink-3); font-weight:500; }

  /* ===== Seiten-Hero (text-geführt, kein LCP-Bild) ===== */
  .page-hero{ padding:clamp(28px,4.5vw,50px) 24px clamp(30px,4.5vw,52px); }
  .page-hero__inner{ max-width:760px; }
  .page-hero__h1{ font-family:var(--fh); font-weight:500; font-size:clamp(32px,5vw,52px); line-height:1.06; letter-spacing:-.01em; color:var(--ink); margin:10px 0 18px; }
  .page-hero__h1 em{ font-style:italic; color:var(--accent); }
  .page-hero__lead{ font-size:clamp(16px,2vw,19px); line-height:1.6; color:var(--ink-2); margin:0 0 26px; max-width:60ch; }
  .page-hero__lead strong{ color:var(--ink); font-weight:600; }
  .page-hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; }
  .page-hero__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

  /* ===== Generischer Abschnitt + 2-Spalten-Split + Prosa ===== */
  .section{ padding:clamp(44px,6vw,74px) 24px; }
  .section--tint{ background:var(--paper-2); }
  .split-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,5vw,56px); align-items:center; }
  .prose{ max-width:68ch; }
  .prose p{ font-size:15.5px; line-height:1.7; color:var(--ink-2); margin:0 0 16px; }
  .prose p:last-child{ margin-bottom:0; }
  .prose strong{ color:var(--ink); font-weight:600; }
  .prose ul{ margin:6px 0 16px; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
  .prose ul li{ position:relative; padding-left:26px; font-size:15.5px; line-height:1.5; color:var(--ink-2); }
  .prose ul li::before{ content:"✦"; position:absolute; left:0; top:1px; color:var(--accent); }
  .prose ul li strong{ color:var(--ink); }

  /* ===== „Ihr Schneider"-Vertrauensblock auf hellem Grund (Unterseiten) ===== */
  .ueber--plain{ background:var(--paper); }

  /* ===== CTA-Band (dunkel, Abschluss jeder Unterseite) ===== */
  .cta-band{ padding:clamp(48px,7vw,82px) 24px; background:var(--ink); }
  .cta-band__inner{ max-width:720px; margin-inline:auto; text-align:center; }
  .cta-band .eyebrow{ color:var(--gold); }
  .cta-band h2{ font-family:var(--fh); font-weight:500; font-size:clamp(26px,4vw,40px); line-height:1.1; color:#fff; margin:0 0 14px; }
  .cta-band p{ font-size:16px; line-height:1.6; color:#d8c9b6; margin:0 auto 26px; max-width:48ch; }
  .cta-band__ctas{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

  @media (max-width:600px){
    .page-hero__ctas{ flex-direction:column; align-items:stretch; }
    .page-hero__ctas > a{ width:100%; justify-content:center; padding-top:16px; padding-bottom:16px; }
    .cta-band__ctas{ flex-direction:column; align-items:stretch; }
    .cta-band__ctas > a{ width:100%; justify-content:center; }
  }