/* ═══════════════════════════════════════════════════════════════
   Schwarzwald Wohnen, Hüfingen · Basis: Look solar-premium (Closing-Entwurf 12.10.2026)
   Kundenwunsch aus dem Onboarding: Gold #AA7F2E, Nahschwarz #1C1C1C, Mineralgrün #46584C,
   Schriften Quattrocento (Headlines) + Quattrocento Sans (Text), Cormorant Garamond kursiv fürs Keyword.
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Quattrocento';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/quattrocento-400.woff2') format('woff2');}
@font-face{font-family:'Quattrocento';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/quattrocento-700.woff2') format('woff2');}
@font-face{font-family:'Quattrocento Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/quattrocento-sans-400.woff2') format('woff2');}
@font-face{font-family:'Quattrocento Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/quattrocento-sans-400-italic.woff2') format('woff2');}
@font-face{font-family:'Quattrocento Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/quattrocento-sans-700.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-600-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-500-italic.woff2') format('woff2');}

:root{
  color-scheme: light only;
  --ink:#1C1C1C; --body:#4F5761; --muted:#7D8590;
  --line:rgba(20,23,28,.10);
  --white:#FFFFFF; --gray:#F5F6F8;
  --dark:#2A2E36; --dark2:#1F2228; --darkest:#17191E;
  --dline:rgba(255,255,255,.10);
  --dtext:rgba(255,255,255,.72);
  --accent:#AA7F2E; --on-accent:#FFFFFF; --green:#46584C;
  --hero-ov-d:.34; --hero-ov-m:.4; --hero-fx:50%;
  --accent-ink: var(--accent);            /* Akzent als Text auf Hell */
  --acc-d: var(--accent);                 /* Akzent auf Dunkel (Flächen + Text) */
  --on-acc-d: var(--on-accent);
  --acc-dt: var(--accent);               /* Akzent als Text/Icon auf Dunkel */
  --em-d: var(--accent);                  /* betontes Keyword auf Dunkel */
  --em-d-mark: transparent;
  --acc-soft: color-mix(in srgb, var(--accent) 9%, #fff);
  --acc-glow: color-mix(in srgb, var(--accent) 40%, transparent);
  --r: 8px; --r-sm: 6px;
  --ease: cubic-bezier(.16,1,.3,1);
  --gut: 20px;
  --maxw: 1280px;
  --sec-y: clamp(64px, 5.2vw + 40px, 120px);
  --hdr-h: 64px;
  /* Typo-Skala: EINE Regel für alle H2, H1 immer größer */
  --fs-h1: clamp(1.95rem, 1.05rem + 4.1vw, 4.4rem);
  --fs-h2: clamp(1.6rem, 1.12rem + 1.85vw, 3rem);
  --fs-h3: clamp(1.12rem, 1.02rem + .35vw, 1.3rem);
  --fs-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
}
html[data-acclight="y"]{ --accent-ink: color-mix(in srgb, var(--accent) 62%, #000); --acc-soft: color-mix(in srgb, var(--accent) 14%, #fff); }
/* sehr dunkle Rottöne: auf Graphit nie aufhellen, Keyword weiß + Markerstrich */
html[data-accent="mark"]{ --em-d:#fff; --em-d-mark: var(--accent); --acc-dt: rgba(255,255,255,.86); }
html:is([data-accent="mark"],[data-accent="tint"]) :is(.sec--dark .kicker,.sec--dark2 .kicker,.hero-kicker,.ident-kicker){ color:rgba(255,255,255,.78); }
html:is([data-accent="mark"],[data-accent="tint"]) .vnum{ color:rgba(255,255,255,.1); }
/* sehr dunkle Blau-/Grüntöne: auf Graphit getönt aufhellen */
html[data-accent="tint"]{ --acc-d:#FFFFFF; --on-acc-d: var(--accent); --acc-dt: rgba(255,255,255,.86); --em-d:#fff; --em-d-mark: color-mix(in srgb, var(--accent) 55%, #fff); }

@media (min-width:768px){ :root{ --gut: 32px; --hdr-h: 72px; } }
@media (min-width:1200px){ :root{ --gut: 48px; } }
@media (min-width:1800px){ :root{ --maxw: 1480px; --fs-h1: 4.9rem; --fs-h2: 3.25rem; --fs-body: 1.125rem; } }
@media (min-width:2300px){ :root{ --maxw: 1640px; --fs-h1: 5.4rem; --fs-h2: 3.5rem; --fs-body: 1.1875rem; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; background:var(--white); color:var(--body); font-family:'Quattrocento Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; }
img,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
p,li{ text-wrap:pretty; }
h1,h2,h3,h4{ text-wrap:balance; hyphens:none; -webkit-hyphens:none; overflow-wrap:normal; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
::selection{ background:color-mix(in srgb, var(--accent) 30%, transparent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:200; background:#fff; color:var(--ink); padding:10px 14px; border-radius:var(--r-sm); }
.skip:focus{ left:8px; }

.wrap{ width:100%; max-width:calc(var(--maxw) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut); }

/* ─── Typo ─────────────────────────────────────────────── */
.h1,.h2,.h3,.h4{ font-family:'Quattrocento',Georgia,serif; color:var(--ink); }
.h1{ font-size:var(--fs-h1); font-weight:700; line-height:1.04; letter-spacing:-.012em; color:#fff; }
.h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.1; letter-spacing:-.01em; }
.h3{ font-size:var(--fs-h3); font-weight:700; line-height:1.25; letter-spacing:0; }
.h4{ font-size:1.0625rem; font-weight:700; line-height:1.3; }
.h1 .em, .h2 .em, .h3 .em{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.12em; line-height:.9; color:var(--accent-ink); letter-spacing:0; }
.kicker{ font-family:'Quattrocento Sans',sans-serif; font-weight:600; font-size:.95rem; color:var(--accent-ink); margin-bottom:12px; letter-spacing:0; }
.sub{ margin-top:16px; max-width:640px; font-size:1.0625em; line-height:1.6; color:var(--body); }
.head{ text-align:center; margin:0 auto clamp(36px, 3vw + 20px, 60px); max-width:860px; }
.head .sub{ margin-left:auto; margin-right:auto; }
.head--left{ text-align:left; margin-left:0; margin-right:0; }
.head--left .sub{ margin-left:0; }

/* Dunkle Sections */
.sec--dark,.sec--dark2,.hero,.ftr{ color:var(--dtext); }
.sec--dark .h2,.sec--dark2 .h2,.sec--dark .h3,.sec--dark2 .h3,.sec--dark .h4{ color:#fff; }
.sec--dark .kicker,.sec--dark2 .kicker,.hero .kicker{ color:var(--acc-dt); font-weight:700; }
.sec--dark .sub,.sec--dark2 .sub{ color:var(--dtext); }
.sec--dark .h2 .em,.sec--dark2 .h2 .em{ color:var(--em-d); }
html:is([data-accent="mark"],[data-accent="tint"]) :is(.sec--dark,.sec--dark2) .h2 .em, html:is([data-accent="mark"],[data-accent="tint"]) .h1 .em{
  background:linear-gradient(transparent 72%, var(--em-d-mark) 72%, var(--em-d-mark) 92%, transparent 92%); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
html:is([data-accent="mark"],[data-accent="tint"]) .h1 .em{ color:#fff; }

/* ─── Sections ─────────────────────────────────────────── */
.sec{ position:relative; padding:var(--sec-y) 0; overflow:clip; }
.sec--white{ background:var(--white); }
.sec--gray{ background:var(--gray); }
.sec--dark{ background:var(--dark); }
.sec--dark2{ background:var(--dark2); }
section[id]{ scroll-margin-top:calc(var(--hdr-h) + var(--kb, 0px) + 20px); }
.glow{ position:absolute; pointer-events:none; width:min(640px, 90vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 62%); z-index:0; }
.glow--tr{ top:-260px; right:-200px; }
.glow--c{ left:50%; top:50%; transform:translate(-50%,-50%); width:min(900px, 120vw); background:radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 60%); }
.glow--light{ top:-280px; right:-220px; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 62%); }
.sec > .wrap{ position:relative; z-index:1; }

/* ─── Buttons ──────────────────────────────────────────── */
.ic{ width:1.1em; height:1.1em; flex:0 0 auto; }
.btn{ --bh:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--bh); padding:0 24px; border-radius:var(--r-sm); border:1px solid transparent; font-family:'Quattrocento Sans',system-ui,sans-serif; font-weight:700; font-size:1rem; line-height:1.1; letter-spacing:-.005em; white-space:nowrap; transition:transform .35s var(--ease), background-color .25s, box-shadow .35s var(--ease), border-color .25s, color .25s; }
.btn .ic{ transition:transform .35s var(--ease); }
.btn:hover .ic:last-child{ transform:translateX(3px); }
.btn:hover{ transform:translateY(-2px); }
.btn--lg{ --bh:58px; padding:0 28px; font-size:1.0625rem; }
.btn--sm{ --bh:44px; padding:0 18px; font-size:.95rem; }
.btn--block{ width:100%; }
.btn--accent{ background:var(--accent); color:var(--on-accent); box-shadow:0 10px 28px -12px var(--acc-glow); }
.btn--accent:hover{ background:color-mix(in srgb, var(--accent) 88%, #000); box-shadow:0 16px 34px -12px var(--acc-glow); }
.btn--accent[disabled]{ opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }
.sec--dark .btn--accent,.sec--dark2 .btn--accent,.hero .btn--accent,.hdr .btn--accent,.thx .btn--accent{ background:var(--acc-d); color:var(--on-acc-d); }
.sec--dark .btn--accent:hover,.hero .btn--accent:hover,.hdr .btn--accent:hover,.thx .btn--accent:hover{ background:color-mix(in srgb, var(--acc-d) 88%, #000); }
html[data-accent="mark"] .hero .btn--accent, html[data-accent="mark"] .sec--dark .btn--accent, html[data-accent="mark"] .hdr .btn--accent, html[data-accent="mark"] .thx .btn--accent{ box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 10px 28px -12px rgba(0,0,0,.6); }
.btn--ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.28); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); }
.btn--line{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--line:hover{ border-color:rgba(20,23,28,.3); }
.tlink{ display:inline-flex; align-items:center; gap:8px; font-family:'Quattrocento Sans',system-ui,sans-serif; font-weight:700; font-size:.95rem; color:var(--acc-dt); }
.tlink .ic{ transition:transform .35s var(--ease); }
.tlink:hover .ic{ transform:translateX(4px); }

/* ─── Scroll-Fortschritt ───────────────────────────────── */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none; }
.progress span{ display:block; height:100%; width:100%; background:var(--acc-d); transform-origin:0 50%; transform:scaleX(0); }

/* ─── Header ───────────────────────────────────────────── */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:100; padding:10px 10px 0; }
@media (min-width:768px){ .hdr{ padding:14px 16px 0; } }
.hdr-in{ max-width:calc(var(--maxw) + 2 * var(--gut) - 8px); margin:0 auto; height:var(--hdr-h); display:flex; align-items:center; gap:24px; padding:0 10px 0 14px; border-radius:10px; background:transparent; border:1px solid transparent; transition:background-color .35s ease, border-color .35s ease; }
@media (min-width:1200px){ .hdr-in{ padding:0 12px 0 calc(var(--gut) - 16px); } }
.hdr.is-solid .hdr-in{ background:rgba(23,25,30,.96); border-color:rgba(255,255,255,.08); }
.hdr-logo{ display:flex; align-items:center; height:100%; flex:0 0 auto; }
.hdr-logo img{ height:46px; width:auto; max-width:190px; object-fit:contain; object-position:left center; }
@media (min-width:768px){ .hdr-logo img{ height:52px; max-width:230px; } }
.hdr-name{ font-family:'Quattrocento Sans'; font-weight:700; color:#fff; font-size:1.1rem; }
.hdr-nav{ display:none; flex:1; justify-content:center; gap:clamp(18px, 2.2vw, 36px); }
.hdr-nav a{ position:relative; font-family:'Quattrocento Sans',system-ui,sans-serif; font-weight:600; font-size:1rem; color:rgba(255,255,255,.86); padding:8px 0; transition:color .2s; }
.hdr-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--acc-dt); transform:scaleX(0); transition:transform .3s var(--ease); }
.hdr-nav a:hover{ color:#fff; }
.hdr-nav a:hover::after,.hdr-nav a.is-active::after{ transform:scaleX(1); }
.hdr-nav a.is-active{ color:#fff; }
.hdr-cta{ display:none; margin-left:auto; }
@media (min-width:1024px){
  .hdr-nav{ display:flex; }
  .hdr-cta{ display:inline-flex; margin-left:0; }
}

/* ─── Hero ─────────────────────────────────────────────── */
.hero{ position:relative; background:#121418; height:auto; min-height:var(--hero-h, 100vh); display:flex; flex-direction:column; isolation:isolate; overflow:clip; }
.hero-media{ position:absolute; inset:0; z-index:-1; }
.hero-vid{ width:100%; height:100%; object-fit:cover; object-position:var(--hero-fx) 50%; }
.hero-shade{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(14,16,20,.62) 0%, rgba(14,16,20,0) 22%),
  linear-gradient(0deg, rgba(14,16,20,.75) 0%, rgba(14,16,20,0) 34%),
  linear-gradient(90deg, rgba(14,16,20,.86) 0%, rgba(14,16,20,.62) 42%, rgba(14,16,20,calc(.2 + var(--hero-ov-d))) 100%); }
@media (max-width:767px){ .hero-shade{ background:
  linear-gradient(180deg, rgba(14,16,20,.6) 0%, rgba(14,16,20,0) 20%),
  linear-gradient(0deg, rgba(14,16,20,.9) 0%, rgba(14,16,20,.55) 60%, rgba(14,16,20,calc(.25 + var(--hero-ov-m))) 100%); } }
.hero-grid{ flex:1; display:grid; align-items:center; gap:40px; padding-top:calc(var(--hdr-h) + var(--kb, 0px) + 44px); padding-bottom:44px; }
.hero-copy{ max-width:780px; }
@media (min-width:1800px){ .hero-copy{ max-width:960px; } }
@media (min-width:2300px){ .hero-copy{ max-width:1080px; } }
.hero-kicker{ font-weight:600; font-size:1rem; color:var(--acc-dt); margin-bottom:16px; }
.h1-l.em{ color:var(--em-d); }
.h1 .em{ color:var(--em-d); }
.hero-lead{ margin-top:22px; max-width:600px; color:rgba(255,255,255,.86); font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height:1.55; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
@media (max-width:599px){ .hero-ctas .btn{ width:100%; } .hero-grid{ padding-top:calc(var(--hdr-h) + var(--kb, 0px) + 36px); } }
@media (min-width:600px){ .hero-ctas{ display:grid; grid-template-columns:repeat(2, max-content); } .hero-ctas .btn{ min-width:250px; } }

/* Ansprechpartner-Karte (Signature) */
.ident{ display:none; position:relative; }
@media (min-width:1080px){
  .hero-grid.has-ident{ grid-template-columns:minmax(0,1fr) clamp(320px, 27vw, 420px); gap:clamp(40px, 5vw, 90px); }
  .ident{ display:block; align-self:end; margin-bottom:8px; }
}
.ident{ padding:10px 10px 12px; border-radius:var(--r); background:rgba(23,25,30,.55); border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 80px -40px rgba(0,0,0,.8); }
.ident-photo{ position:relative; aspect-ratio:4/4.1; border-radius:var(--r-sm); overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 55%), linear-gradient(180deg, #2B2F37 0%, #1A1D22 100%); }
.ident-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; }
.ident-photo::after{ content:''; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(0deg, rgba(23,25,30,.85), transparent); }
.ident-card{ position:relative; margin-top:-72px; margin-inline:10px; padding:20px 22px 20px; border-radius:var(--r); background:rgba(23,25,30,.94); border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.ident-kicker{ font-size:.85rem; font-weight:600; color:var(--acc-dt); margin-bottom:4px; }
.ident-name{ font-family:'Quattrocento Sans'; font-weight:700; font-size:1.375rem; color:#fff; line-height:1.2; }
.ident-role{ font-size:.875rem; color:rgba(255,255,255,.62); margin-top:2px; }
.ident-proof{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); display:grid; gap:8px; }
.ident-proof li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; line-height:1.4; color:rgba(255,255,255,.86); }
.ident-proof .ic{ color:var(--acc-dt); width:16px; height:16px; margin-top:2px; }
.ki{ position:absolute; top:10px; left:10px; z-index:2; font:700 10px/1 'Quattrocento Sans',sans-serif; letter-spacing:.04em; color:rgba(255,255,255,.92); padding:5px 7px; border-radius:4px; background:rgba(15,17,21,.42); border:1px solid rgba(255,255,255,.22); }

/* Leistungs-Laufband am Hero-Boden (Signature) */
.band{ position:relative; background:rgba(31,34,40,.94); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.06); overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.band-track{ display:flex; width:max-content; animation:band 46s linear infinite; }
.band.is-off .band-track{ animation-play-state:paused; }
.band:hover .band-track{ animation-play-state:paused; }
.band-list{ display:flex; flex:0 0 auto; }
.band-list li{ display:flex; align-items:center; gap:10px; padding:17px 30px; white-space:nowrap; font-family:'Quattrocento Sans'; font-weight:600; font-size:.95rem; color:rgba(255,255,255,.82); }
.band-list .ic{ color:var(--acc-dt); width:16px; height:16px; }
@keyframes band{ to{ transform:translateX(-50%); } }

/* ─── Google-Widget (score / voices / facts) ───────────── */
.gw{ display:inline-flex; align-items:center; gap:14px; margin-top:22px; padding:12px 16px 12px 12px; border-radius:var(--r); background:rgba(17,19,23,.62); border:1px solid rgba(255,255,255,.14); color:#fff; max-width:100%; transition:border-color .3s, transform .35s var(--ease); }
a.gw:hover{ border-color:rgba(255,255,255,.32); transform:translateY(-2px); }
.gw-g{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-sm); background:#fff; flex:0 0 auto; }
.gw-glogo{ width:24px; height:24px; }
.gw-body{ display:flex; flex-direction:column; min-width:0; }
.gw-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gw-num{ font-family:'Quattrocento Sans'; font-weight:700; font-size:1.375rem; line-height:1; }
.gw-stars{ display:inline-flex; gap:1px; color:#FBBC04; }
.gw-stars .ic{ width:16px; height:16px; }
.gw-sub{ font-size:.85rem; color:rgba(255,255,255,.7); margin-top:3px; line-height:1.35; }
.gw-label{ font-size:.85rem; font-weight:600; color:rgba(255,255,255,.88); }
.gw-av{ display:flex; margin-left:4px; }
.gw-av img{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid #1B1E23; margin-left:-10px; background:#2a2e36; }
.gw-av img:first-child{ margin-left:0; }
.gw--voices{ align-items:flex-start; width:min(100%, 520px); }
.gw-quotes{ position:relative; display:grid; margin-top:6px; }
.gw-quote{ grid-area:1/1; font-size:.92rem; line-height:1.45; color:rgba(255,255,255,.9); opacity:0; transform:translateY(6px); transition:opacity .6s ease, transform .6s var(--ease); }
.gw-quote.is-on{ opacity:1; transform:none; }
.gw-quote em{ font-style:normal; color:rgba(255,255,255,.6); white-space:nowrap; }
.gw-badge{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-sm); background:var(--acc-d); color:var(--on-acc-d); flex:0 0 auto; }
.gw-badge .ic{ width:22px; height:22px; }
.gw-title{ font-family:'Quattrocento Sans'; font-weight:700; font-size:1.0625rem; line-height:1.2; }
.gw--cta{ margin-top:0; }
@media (max-width:420px){ .gw-av img{ width:28px; height:28px; } .gw{ gap:12px; } }

/* ─── Karten: gemeinsame Basis ─────────────────────────── */
.cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.cards > *{ flex:1 1 100%; }
@media (min-width:768px){
  .cards.cols-2 > *,.cards.cols-4 > *{ flex:0 1 calc((100% - 20px) / 2); }
  .cards.cols-3 > *{ flex:0 1 calc((100% - 40px) / 3); }
}
@media (min-width:1200px){ .cards.cols-4 > *{ flex:0 1 calc((100% - 72px) / 4); } .cards{ gap:24px; } .cards.cols-3 > *{ flex:0 1 calc((100% - 48px) / 3); } .cards.cols-2 > *{ flex:0 1 calc((100% - 24px) / 2); } }

/* Vorteile: dunkle Karten mit großer gefüllter Zahl (Signature „Unsere Werte“) */
.vcard{ position:relative; padding:clamp(26px, 2.2vw, 36px); border-radius:var(--r); overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid color-mix(in srgb, var(--acc-dt) 22%, rgba(255,255,255,.08)); transition:transform .6s var(--ease), border-color .4s, box-shadow .6s var(--ease); }
.vcard:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--acc-dt) 45%, transparent); box-shadow:0 24px 50px -30px rgba(0,0,0,.8); }
.vnum{ display:block; font-family:'Quattrocento Sans'; font-weight:700; font-size:min(calc(var(--fs-h1) * .92), 4.5rem); line-height:.9; letter-spacing:-.03em; color:color-mix(in srgb, var(--acc-dt) 30%, transparent); margin-bottom:22px; }
.vcard .h3{ margin-bottom:10px; }
.vcard p{ color:var(--dtext); font-size:.98rem; line-height:1.6; }

/* ─── Anfrage-Quiz (Signature Solareinschätzung) ───────── */
.quiz{ position:relative; max-width:780px; margin:0 auto; background:#fff; border-radius:var(--r); border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(20,23,28,.32), 0 2px 6px rgba(20,23,28,.04); padding:clamp(22px, 3vw, 40px); overflow-anchor:none; }
.quiz-steps{ display:grid; grid-template-columns:repeat(var(--n, 3), 1fr); gap:10px; counter-reset:qs; }
.quiz-steps{ --n:3; }
.qs-bar{ display:block; height:5px; border-radius:3px; background:#E8EAEE; overflow:hidden; }
.qs-bar i{ display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--ease); }
.quiz-steps li.is-on .qs-bar i,.quiz-steps li.is-done .qs-bar i{ transform:scaleX(1); }
.qs-t{ display:block; margin-top:8px; font-size:.82rem; font-weight:600; color:var(--muted); line-height:1.3; }
.quiz-steps li.is-on .qs-t{ color:var(--ink); }
.quiz-steps li.is-done .qs-t{ color:var(--accent-ink); }
@media (max-width:479px){ .qs-t{ display:none; } }
.quiz-count{ margin-top:22px; font-size:.85rem; color:var(--muted); }
.quiz-count b{ color:var(--ink); }
.qstep{ border:0; margin:0; padding:0; min-width:0; }
.qstep[hidden]{ display:none; }
.qlegend{ display:block; float:left; width:100%; padding:0; margin-top:6px; font-family:'Quattrocento'; font-weight:700; font-size:clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height:1.2; color:var(--ink); letter-spacing:-.01em; outline:0; text-wrap:balance; }
.qlegend + *{ clear:both; }
.qtext{ padding-top:8px; color:var(--body); font-size:.98rem; }
.qopts{ display:grid; gap:12px; margin-top:22px; }
@media (min-width:520px){ .qopts{ grid-template-columns:1fr 1fr; } .qopts.n3{ grid-template-columns:1fr 1fr 1fr; } .qopts.n1{ grid-template-columns:1fr; } }
.qopt{ position:relative; display:flex; align-items:center; gap:14px; min-height:72px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); background:#fff; cursor:pointer; transition:border-color .25s, background-color .25s, transform .45s var(--ease), box-shadow .45s var(--ease); }
.qopt:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow:0 14px 30px -20px rgba(20,23,28,.35); }
.qopt input{ position:absolute; opacity:0; width:1px; height:1px; }
.qopt-ring{ width:22px; height:22px; border-radius:50%; border:2px solid #C9CDD3; flex:0 0 auto; display:grid; place-items:center; transition:border-color .25s, background-color .25s; }
.qopt-ring::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--on-accent); transform:scale(0); transition:transform .3s var(--ease); }
.qopt-t{ font-family:'Quattrocento Sans'; font-weight:700; font-size:1rem; line-height:1.3; color:var(--ink); }
.qopt:has(input:checked){ border-color:var(--accent); background:var(--acc-soft); }
.qopt input:checked + .qopt-ring{ border-color:var(--accent); background:var(--accent); }
.qopt input:checked + .qopt-ring::after{ transform:scale(1); }
.qopt input:focus-visible + .qopt-ring{ outline:2px solid var(--accent); outline-offset:3px; }
.qnav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; }
.qnav .btn{ min-width:150px; }
@media (max-width:420px){ .qnav .btn{ min-width:0; flex:1; padding:0 16px; } .qnav > span{ display:none; } }
.qfields{ display:grid; gap:12px; margin-top:22px; }
@media (min-width:340px){ .qfields{ grid-template-columns:1fr 1fr; } }
@media (max-width:339px){ .qfields{ grid-template-columns:1fr; } }
.fld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.fld span{ font-size:.85rem; font-weight:600; color:var(--ink); }
.fld i,.consent i{ font-style:normal; color:var(--accent-ink); }
.fld input{ width:100%; min-width:0; height:52px; padding:0 14px; border-radius:var(--r-sm); border:1px solid #D5D9DF; background:#fff; font:inherit; font-size:16px; color:var(--ink); transition:border-color .2s, box-shadow .2s; }
.fld input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.fld input.is-bad{ border-color:#C62828; }
.consent{ display:flex; gap:12px; align-items:flex-start; margin-top:18px; font-size:.86rem; line-height:1.5; color:var(--body); cursor:pointer; }
.consent input{ width:20px; height:20px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--accent); }
.consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.consent.is-bad span{ color:#C62828; }
.qerr{ margin-top:12px; font-size:.9rem; color:#C62828; font-weight:600; }
.qdemo{ display:flex; gap:8px; align-items:center; margin-top:16px; font-size:.82rem; color:var(--muted); }
.qdemo .ic{ width:15px; height:15px; }
.qsend{ flex:1 1 auto; max-width:380px; }
@media (max-width:559px){
  .qnav:has(.qsend){ flex-direction:column-reverse; align-items:stretch; }
  .qnav:has(.qsend) .btn{ width:100%; max-width:none; }
  .qnav:has(.qsend) > span{ display:none; }
}
.qsend{ white-space:normal; text-align:center; }

/* ─── Leistungen: nummerierte Karten (Signature 01/03-Badge) ─── */
.svc-rail{ position:relative; }
.svc-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px 22px; }
.scard{ position:relative; display:flex; flex-direction:column; flex:0 1 100%; padding:12px 12px 0; border-radius:var(--r);
  background:linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.09);
  transition:transform .6s var(--ease), border-color .4s, box-shadow .6s var(--ease); }
.scard:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--acc-dt) 40%, transparent); box-shadow:0 30px 60px -36px rgba(0,0,0,.9); }
.snum{ position:absolute; z-index:2; top:-14px; left:22px; display:flex; align-items:baseline; gap:2px; padding:7px 11px 7px 12px; border-radius:var(--r-sm); background:var(--acc-d); color:var(--on-acc-d); font-family:'Quattrocento Sans'; font-weight:700; font-size:1.05rem; line-height:1; box-shadow:0 0 0 5px color-mix(in srgb, var(--acc-d) 16%, transparent), 0 12px 26px -10px var(--acc-glow); }
.snum small{ font-size:.66rem; font-weight:700; opacity:.7; }
.scard-img{ position:relative; aspect-ratio:16/10; border-radius:var(--r-sm); overflow:hidden; background:#22252B; }
.scard-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.scard:hover .scard-img img{ transform:scale(1.04); }
.scard-body{ display:flex; flex-direction:column; flex:1; padding:20px 10px 22px; }
.scard .h3{ display:flex; align-items:flex-start; }
.scard p{ margin-top:8px; color:var(--dtext); font-size:.96rem; line-height:1.55; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }
.scard .tlink{ margin-top:auto; padding-top:16px; }
@media (min-width:768px){
  .scard{ flex-basis:calc((100% - 22px) / 2); }
}
@media (min-width:1100px){
  .svc-n3 .scard,.svc-n5 .scard,.svc-n6 .scard{ flex-basis:calc((100% - 44px) / 3); }
  .svc-n7 .scard,.svc-n8 .scard{ flex-basis:calc((100% - 66px) / 4); }
  .svc-n7 .scard p,.svc-n8 .scard p{ font-size:.92rem; }
  /* 2 oder 4 Leistungen: breite Zeilen-Karten, Bild abwechselnd links/rechts wie im Original */
  .svc-wide .scard{ flex-basis:calc((100% - 22px) / 2); flex-direction:row; align-items:stretch; padding:12px; gap:4px; }
  .svc-wide .scard-img{ flex:0 0 46%; aspect-ratio:auto; min-height:250px; }
  .svc-wide .scard-body{ padding:26px 16px 14px 22px; }
  .svc-wide .scard:nth-child(4n+2),.svc-wide .scard:nth-child(4n+3){ flex-direction:row-reverse; }
  .svc-wide .scard:nth-child(4n+2) .scard-body,.svc-wide .scard:nth-child(4n+3) .scard-body{ padding:26px 22px 14px 16px; }
  .svc-wide .scard:nth-child(4n+2) .snum,.svc-wide .scard:nth-child(4n+3) .snum{ left:auto; right:22px; }
}
.rail-ctl{ display:none; }
/* Handy: Leistungen als Wisch-Schiene (Cases-Slider-DNA) */
@media (max-width:767px){
  .svc-rail{ margin:0 calc(-1 * var(--gut)); }
  .svc-grid{ flex-wrap:nowrap; justify-content:flex-start; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); padding:18px var(--gut) 8px; scrollbar-width:none; overscroll-behavior-x:contain; }
  .svc-grid::-webkit-scrollbar{ display:none; }
  .svc-grid::after{ content:''; flex:0 0 1px; margin-left:calc(var(--gut) - 15px); }
  .scard{ flex:0 0 84%; scroll-snap-align:start; }
  .scard:hover{ transform:none; }
  .rail-ctl{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px; }
  .rail-btn{ width:46px; height:46px; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#fff; }
  .rail-btn[disabled]{ opacity:.35; }
  .rail-count{ font-family:'Quattrocento Sans'; font-weight:700; color:rgba(255,255,255,.65); font-size:.95rem; min-width:56px; text-align:center; }
  .rail-count b{ color:#fff; }
}

/* ─── Ablauf: Bild + dunkle Schritt-Kacheln (Signature „Wer wir sind“) ─── */
.split{ display:grid; gap:clamp(32px, 4vw, 72px); align-items:stretch; }
@media (min-width:1024px){ .split{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .split--solo{ grid-template-columns:minmax(0, 760px); justify-content:center; } }
.pimg{ position:relative; border-radius:var(--r); overflow:hidden; min-height:320px; box-shadow:0 40px 70px -45px rgba(20,23,28,.55); }
.pimg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pimg figcaption{ position:absolute; left:0; right:0; bottom:0; padding:60px 22px 18px; background:linear-gradient(0deg, rgba(14,16,20,.85), transparent); color:#fff; font-family:'Quattrocento Sans'; font-weight:700; font-size:1rem; }
@media (max-width:1023px){ .pimg{ aspect-ratio:4/3; min-height:0; } }
.pcopy{ display:flex; flex-direction:column; align-items:flex-start; }
.pcopy .head{ margin-bottom:28px; }
.psteps{ display:grid; gap:12px; width:100%; margin-bottom:28px; }
.pstep{ display:flex; gap:18px; align-items:flex-start; padding:20px 22px; border-radius:var(--r); background:var(--green); color:var(--dtext); transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.pstep:hover{ transform:translateY(-4px); box-shadow:0 24px 40px -28px rgba(20,23,28,.8); }
.pnum{ font-family:'Quattrocento Sans'; font-weight:700; font-size:1.6rem; line-height:1; color:var(--acc-dt); min-width:40px; padding-top:2px; }
.pstep .h4{ color:#fff; margin-bottom:4px; }
.pstep p{ font-size:.94rem; line-height:1.55; }

/* ─── Über uns: Porträt + weiße Karte (Signature „Ihr Partner“) ─── */
.about-grid{ display:grid; gap:clamp(24px, 3vw, 40px); align-items:stretch; }
@media (min-width:1024px){ .about-grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } .about-grid--solo{ grid-template-columns:minmax(0, 820px); justify-content:center; } }
.aphoto{ position:relative; border-radius:var(--r); overflow:hidden; min-height:340px; background:#2A2E36; box-shadow:0 40px 70px -45px rgba(20,23,28,.6); }
.aphoto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.aphoto.is-person img{ object-position:50% 15%; }
@media (max-width:1023px){ .aphoto{ aspect-ratio:4/4; min-height:0; max-height:560px; } }
.acard{ background:#fff; border-radius:var(--r); border:1px solid var(--line); padding:clamp(24px, 3vw, 44px); box-shadow:0 30px 60px -45px rgba(20,23,28,.4); display:flex; flex-direction:column; }
.aloc{ display:flex; align-items:center; gap:8px; margin-top:14px; font-weight:600; font-size:.95rem; color:var(--ink); }
.aloc .ic{ color:var(--accent-ink); width:17px; height:17px; }
.atext{ margin-top:16px; line-height:1.7; }
.asig{ display:flex; align-items:center; gap:16px; margin-top:24px; padding:14px 18px; border-radius:var(--r); background:var(--green); }
.asig img{ height:42px; max-width:140px; width:auto; object-fit:contain; object-position:left center; }
.asig-t{ display:flex; flex-direction:column; margin-left:auto; text-align:right; }
.asig-t b{ font-family:'Quattrocento Sans'; font-weight:700; color:#fff; font-size:1rem; line-height:1.25; }
.asig-t small{ color:rgba(255,255,255,.6); font-size:.82rem; }
.afacts{ display:grid; gap:10px; margin:16px 0 24px; }
@media (min-width:600px){ .afacts.n3{ grid-template-columns:repeat(3, 1fr); } .afacts.n2,.afacts.n4{ grid-template-columns:1fr 1fr; } }
.afacts li{ display:flex; gap:10px; align-items:flex-start; padding:14px 14px; border-radius:var(--r-sm); background:var(--gray); font-family:'Quattrocento Sans'; font-weight:700; font-size:.92rem; line-height:1.35; color:var(--ink); transition:transform .5s var(--ease); }
.afacts li:hover{ transform:translateY(-3px); }
.afacts .ic{ color:var(--accent-ink); width:17px; height:17px; margin-top:1px; }
.acard .btn{ margin-top:auto; }

/* ─── Einsatzgebiet: Bildkarte mit Schleier (Signature) ─── */
.area-card{ position:relative; border-radius:var(--r); overflow:hidden; min-height:clamp(420px, 34vw, 560px); display:grid; place-items:center; text-align:center; padding:clamp(48px, 6vw, 90px) clamp(20px, 4vw, 60px); isolation:isolate; }
.area-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.area-shade{ position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 80% at 50% 50%, rgba(20,22,27,.8) 0%, rgba(20,22,27,.62) 100%); }
.area-in{ max-width:780px; }
.area .sub{ margin-left:auto; margin-right:auto; color:rgba(255,255,255,.84); }
.area-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:24px; }
.area-tags li{ display:flex; align-items:center; gap:7px; font-family:'Quattrocento Sans'; font-weight:700; color:#fff; font-size:1rem; }
.area-tags .ic{ color:var(--acc-dt); width:17px; height:17px; }
.area-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px; }
@media (max-width:599px){ .area-ctas .btn{ width:100%; } }

/* ─── FAQ ──────────────────────────────────────────────── */
.faq-grid{ display:grid; gap:clamp(28px, 4vw, 72px); }
@media (min-width:1024px){ .faq-grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:start; } .faq-side{ position:sticky; top:calc(var(--hdr-h) + var(--kb, 0px) + 40px); } }
.faq-side .head{ margin-bottom:24px; }
.talk{ display:flex; align-items:center; gap:16px; max-width:380px; padding:18px 18px 18px 22px; border-radius:var(--r); background:var(--green); color:#fff; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.talk:hover{ transform:translateY(-4px); box-shadow:0 24px 40px -26px rgba(20,23,28,.8); }
.talk-t{ display:flex; flex-direction:column; }
.talk-t b{ font-family:'Quattrocento Sans'; font-weight:700; font-size:1.1rem; }
.talk-t small{ font-size:.9rem; color:rgba(255,255,255,.65); margin-top:2px; }
.talk-ic{ margin-left:auto; width:48px; height:48px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--acc-d); color:var(--on-acc-d); flex:0 0 auto; }
.acc{ overflow-anchor:none; border-top:1px solid var(--line); }
.acc-it{ border-bottom:1px solid var(--line); }
.acc-h{ font:inherit; }
.acc-h button{ width:100%; display:flex; align-items:center; gap:16px; padding:22px 0; background:none; border:0; text-align:left; }
.acc-n{ font-family:'Quattrocento Sans'; font-weight:700; font-size:.85rem; color:var(--muted); min-width:24px; }
.acc-q{ flex:1; font-family:'Quattrocento'; font-weight:700; font-size:clamp(1.02rem, .98rem + .25vw, 1.18rem); line-height:1.35; color:var(--ink); transition:color .2s; }
.acc-h button:hover .acc-q{ color:var(--accent-ink); }
.acc-pm{ width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--gray); color:var(--ink); transition:transform .4s var(--ease), background-color .25s, color .25s; }
.acc-pm .ic{ width:18px; height:18px; }
.acc-h button[aria-expanded="true"] .acc-pm{ transform:rotate(45deg); background:var(--accent); color:var(--on-accent); }
.acc-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.acc-a > div{ overflow:hidden; min-height:0; }
.acc-a p{ padding:0 52px 24px 40px; line-height:1.7; }
.acc-it.is-open .acc-a{ grid-template-rows:1fr; }
@media (max-width:599px){ .acc-a p{ padding:0 0 22px 40px; } }

/* ─── Kontakt (ohne Formular) ──────────────────────────── */
.ccopy{ display:flex; flex-direction:column; justify-content:center; }
.ccopy .head{ margin-bottom:28px; }
.ctiles{ display:grid; gap:10px; }
.ctile{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:var(--r); background:#fff; border:1px solid var(--line); transition:transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
a.ctile:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:0 18px 34px -26px rgba(20,23,28,.5); }
.ctile-ic{ color:var(--accent-ink); display:grid; place-items:center; width:24px; flex:0 0 auto; }
.ctile-ic .ic{ width:22px; height:22px; }
.ctile-t{ display:flex; flex-direction:column; min-width:0; }
.ctile-t small{ font-size:.8rem; color:var(--muted); font-weight:600; }
.ctile-t b{ font-family:'Quattrocento Sans'; font-weight:700; color:var(--ink); font-size:1.02rem; line-height:1.35; overflow-wrap:anywhere; }
.ctile-go{ margin-left:auto; color:var(--muted); transition:transform .35s var(--ease), color .2s; }
a.ctile:hover .ctile-go{ color:var(--accent-ink); transform:translateX(3px); }
.cimg{ position:relative; border-radius:var(--r); overflow:hidden; min-height:360px; box-shadow:0 40px 70px -45px rgba(20,23,28,.55); }
.cimg > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cimg-logo{ position:absolute; left:18px; bottom:18px; padding:12px 16px; border-radius:var(--r-sm); background:rgba(23,25,30,.9); border:1px solid rgba(255,255,255,.1); }
.cimg-logo img{ height:40px; max-width:160px; width:auto; object-fit:contain; }
@media (max-width:1023px){ .cimg{ aspect-ratio:16/10; min-height:0; } }

/* ─── CTA (letzte Section) ─────────────────────────────── */
.cta .head{ margin-bottom:30px; }
.cta-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
@media (min-width:600px){ .cta-ctas .btn{ min-width:250px; } }
@media (max-width:599px){ .cta-ctas .btn{ width:100%; } }
.cta-trust{ display:flex; justify-content:center; margin-top:26px; }

/* ─── Footer ───────────────────────────────────────────── */
.ftr{ background:var(--darkest); padding:clamp(56px, 6vw, 88px) 0 28px; font-size:.95rem; }
.ftr-grid{ display:grid; gap:36px; }
@media (max-width:767px){ .ftr-grid{ grid-template-columns:1fr 1fr; gap:32px 20px; } .ftr-brand,.ftr-col:last-child{ grid-column:1 / -1; } }
@media (min-width:768px){ .ftr-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .ftr-grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; } }
.ftr-logo{ height:54px; max-width:220px; width:auto; object-fit:contain; object-position:left center; margin-bottom:18px; }
.ftr-name{ font-family:'Quattrocento Sans'; font-weight:700; color:#fff; font-size:1.2rem; margin-bottom:14px; }
.ftr-brand p{ color:rgba(255,255,255,.62); line-height:1.65; max-width:360px; }
.ftr-h{ font-family:'Quattrocento Sans'; font-weight:700; color:#fff; font-size:1rem; margin-bottom:16px; }
.ftr-col li{ margin-bottom:10px; }
.ftr-col a{ color:rgba(255,255,255,.7); transition:color .2s; }
.ftr-col a:hover{ color:#fff; }
.ftr-contact li{ display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.7); }
.ftr-contact .ic{ color:var(--acc-dt); width:17px; height:17px; margin-top:3px; }
.ftr-contact a,.ftr-contact span{ overflow-wrap:anywhere; }
.ftr-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px; margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); }
.ftr-copy{ color:rgba(255,255,255,.5); font-size:.86rem; }
.ftr-badge{ display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.5); font-size:.8rem; transition:color .2s; }
.ftr-badge img{ width:84px; height:auto; }
.ftr-badge:hover{ color:#fff; }
.ftr-legal{ display:flex; gap:20px; }
.ftr-legal a{ color:rgba(255,255,255,.7); font-size:.9rem; }
.ftr-legal a:hover{ color:#fff; }
@media (max-width:767px){ .ftr-bottom{ flex-direction:column; align-items:flex-start; } }

/* ─── WhatsApp ─────────────────────────────────────────── */
.wa{ position:fixed; right:18px; bottom:18px; z-index:90; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(0,0,0,.45); transition:transform .4s var(--ease); }
.wa .ic{ width:30px; height:30px; }
.wa:hover{ transform:translateY(-3px) scale(1.04); }
@media (min-width:768px){ .wa{ right:24px; bottom:24px; } }

/* ─── Danke-Popup ──────────────────────────────────────── */
.thx{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:16px; pointer-events:none; }
.thx[hidden]{ display:none; }
.thx-card{ pointer-events:auto; position:relative; width:min(420px, 100%); max-height:340px; padding:26px 24px 22px; border-radius:var(--r); background:var(--dark); border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 100px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.2); text-align:center; color:var(--dtext); overflow:hidden; animation:thx-in .5s var(--ease); }
@keyframes thx-in{ from{ opacity:0; transform:translateY(16px) scale(.97); } }
.thx-x{ position:absolute; top:10px; right:10px; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:var(--r-sm); background:rgba(255,255,255,.06); color:#fff; z-index:2; }
.thx-logo{ height:46px; max-width:190px; width:auto; object-fit:contain; margin:0 auto 14px; position:relative; z-index:1; }
.thx-h{ font-family:'Quattrocento Sans'; font-weight:700; font-size:1.6rem; color:#fff; line-height:1.15; position:relative; z-index:1; }
.thx-p{ margin-top:8px; font-size:.95rem; line-height:1.5; position:relative; z-index:1; }
.thx-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; position:relative; z-index:1; }
.thx-btns .btn{ --bh:48px; padding:0 12px; width:100%; }
.thx-btns .btn:only-child{ grid-column:1 / -1; }
.thx-confetti{ position:absolute; inset:0; pointer-events:none; }
.thx-confetti i{ position:absolute; left:50%; top:38%; width:8px; height:12px; border-radius:2px; opacity:0; animation:conf 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes conf{ 0%{ opacity:1; transform:translate(-50%,-50%) rotate(0); } 100%{ opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); } }

/* ─── Reveals (IntersectionObserver, nie dauerhaft unsichtbar) ─── */
/* nur opacity/transform, max. 500 ms, Staffelung gedeckelt (200 ms), am Handy ohne; app.js nimmt .rv/.in danach wieder weg */
html.rv-on .rv{ opacity:0; transform:translate3d(0,18px,0); transition:opacity .45s ease-out, transform .5s var(--ease); transition-delay:min(calc(var(--d, 0ms) * .6), 200ms); }
@media (max-width:760px){ html.rv-on .rv{ transition-delay:0s; } }
html.rv-on .rv.in{ opacity:1; transform:none; }
.hero-copy > *{ animation:hero-in .9s var(--ease) both; }
.hero-copy > *:nth-child(2){ animation-delay:.08s; } .hero-copy > *:nth-child(3){ animation-delay:.16s; } .hero-copy > *:nth-child(4){ animation-delay:.24s; } .hero-copy > *:nth-child(5){ animation-delay:.32s; }
.ident{ animation:hero-in 1.1s var(--ease) .25s both; }
@keyframes hero-in{ from{ opacity:0; transform:translateY(22px); } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .band-track{ animation:none; }
  html.rv-on .rv{ opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════════════
   Erweiterungen für die Mehrseiten-Site (Dropdown, Unterseiten-Hero, Split, Links, Ratgeber, Karte, Bewertung, Rechtliches)
   ═══════════════════════════════════════════════════════════════ */
/* Nav mit Dropdowns */
.hdr-nav{ align-items:center; }
.has-dd{ position:relative; }
.has-dd .nav-link{ display:inline-flex; align-items:center; gap:4px; }
.has-dd .nav-link .ic{ width:14px; height:14px; transition:transform .25s var(--ease); }
.has-dd.open .nav-link .ic{ transform:rotate(180deg); }
.has-dd::after{ content:''; position:absolute; inset:100% 0 auto 0; height:18px; }
.dd{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px); min-width:360px; padding:8px; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 30px 60px -24px rgba(20,23,28,.35); opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:5; }
.has-dd.open .dd{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dd__grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.dd__item{ display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:center; padding:9px 10px; border-radius:var(--r-sm); transition:background .15s ease; color:var(--ink); }
.dd__item:hover{ background:var(--gray); }
.dd__icon{ width:38px; height:38px; display:grid; place-items:center; color:var(--accent-ink); background:var(--acc-soft); border-radius:var(--r-sm); }
.dd__icon .ic{ width:20px; height:20px; }
.dd__txt strong{ display:block; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.95rem; line-height:1.25; }
.dd__txt small{ display:block; color:var(--muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd__foot{ margin-top:6px; padding:8px 0 2px; border-top:1px solid var(--line); text-align:center; }
.dd__foot a{ display:inline-flex; align-items:center; gap:6px; color:var(--accent-ink); font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.92rem; padding:6px 0; }
.dd__foot a:hover .ic{ transform:translateX(3px); }
.dd__foot .ic{ transition:transform .25s var(--ease); }
.dd--orte{ min-width:420px; }
@media (min-width:1024px) and (max-width:1200px){ .hdr-nav{ gap:14px; } .hdr-nav a{ font-size:.92rem; } .hdr-logo img{ max-width:190px; } }
/* Unterseiten-Hero: feste Höhe je Breite, alle gleich */
.hero--sub{ min-height:0; height:auto; }
.hero--sub .hero-grid{ min-height:740px; padding-top:calc(var(--hdr-h) + var(--kb, 0px) + 56px); padding-bottom:56px; align-content:center; }
@media (max-width:767px){ .hero--sub .hero-grid{ min-height:790px; padding-top:calc(var(--hdr-h) + var(--kb, 0px) + 40px); padding-bottom:44px; } }
@media (min-width:1800px){ .hero--sub .hero-grid{ min-height:800px; } }
.hero--sub .hero-shade{ background:linear-gradient(180deg, rgba(14,16,20,.62) 0%, rgba(14,16,20,0) 24%), linear-gradient(0deg, rgba(14,16,20,.6) 0%, rgba(14,16,20,0) 36%), linear-gradient(90deg, rgba(14,16,20,.88) 0%, rgba(14,16,20,.66) 44%, rgba(14,16,20,.3) 100%); }
@media (max-width:767px){ .hero--sub .hero-shade{ background:linear-gradient(180deg, rgba(14,16,20,.6) 0%, rgba(14,16,20,0) 22%), linear-gradient(0deg, rgba(14,16,20,.9) 0%, rgba(14,16,20,.6) 55%, rgba(14,16,20,.35) 100%); } }
.hero--sub .hero-copy{ max-width:820px; }
.hero--sub .h1{ max-width:16ch; }
.hero .ki{ top:auto; bottom:14px; left:14px; }
.hero--sub .hero-media > .ki{ top:auto; bottom:14px; right:14px; left:auto; }
.crumbs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; font-size:.86rem; color:rgba(255,255,255,.62); }
.crumbs a{ color:rgba(255,255,255,.82); }
.crumbs a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.crumbs span[aria-hidden]{ color:rgba(255,255,255,.4); }
/* Section-CTA unten mittig / links in Split-Sections */
.sec-cta{ display:flex; justify-content:center; margin-top:clamp(28px, 3vw, 44px); }
.sec-cta--left{ justify-content:flex-start; margin-top:24px; }
/* Split-Sections (Intro, Details, Vor Ort) */
.split--c{ align-items:center; }
.simg{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; box-shadow:0 40px 70px -45px rgba(20,23,28,.55); background:#22252B; }
.simg img{ width:100%; height:100%; object-fit:cover; }
.scopy .head{ margin-bottom:22px; }
.txt{ margin-top:14px; line-height:1.7; color:var(--body); }
.txt:first-child{ margin-top:0; }
.txt--lead{ font-size:1.0625em; color:var(--ink); }
.txt--c{ text-align:center; max-width:760px; margin:28px auto 0; }
.txt a{ color:var(--accent-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.sec--dark2 .txt, .sec--dark .txt{ color:var(--dtext); }
.checks{ display:grid; gap:10px; margin-top:22px; }
@media (min-width:600px){ .checks{ grid-template-columns:1fr 1fr; } .checks--1{ grid-template-columns:1fr; } }
.checks li{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-sm); background:var(--gray); font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.95rem; line-height:1.35; color:var(--ink); transition:transform .5s var(--ease); }
.sec--gray .checks li{ background:#fff; border:1px solid var(--line); }
.checks li:hover{ transform:translateY(-3px); }
.checks .ic{ color:var(--accent-ink); width:17px; height:17px; margin-top:1px; }
.checks a{ color:var(--ink); }
/* Textkarten (Standortseiten) */
.tcard{ padding:clamp(24px, 2.4vw, 36px); border-radius:var(--r); background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); transition:transform .6s var(--ease), border-color .4s; }
.tcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--acc-dt) 40%, transparent); }
.tcard .h3{ color:#fff; margin-bottom:6px; }
/* Link-Karten (zwei gleich hohe Karten) */
.lcard{ padding:clamp(22px, 2.4vw, 34px); border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; }
.lcard .h3{ color:#fff; margin-bottom:14px; }
.llist{ display:grid; gap:8px; }
.llist a{ display:flex; align-items:center; gap:12px; min-height:50px; padding:0 12px; border-radius:var(--r-sm); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#fff; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.96rem; transition:transform .4s var(--ease), border-color .25s, background-color .25s; }
.llist a:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--acc-dt) 45%, transparent); background:rgba(255,255,255,.08); }
.llist a > .ic:first-child{ color:var(--acc-dt); width:18px; height:18px; }
.llist a > .ic:last-child{ margin-left:auto; color:rgba(255,255,255,.5); transition:transform .3s var(--ease); }
.llist a:hover > .ic:last-child{ transform:translateX(3px); color:#fff; }
/* Orte-Chips (Startseite) */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.chips a{ display:inline-flex; align-items:center; gap:8px; min-height:50px; padding:0 18px 0 14px; border-radius:var(--r-sm); background:var(--gray); border:1px solid var(--line); color:var(--ink); font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.96rem; transition:transform .45s var(--ease), border-color .25s, box-shadow .45s var(--ease); }
.chips a:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:0 14px 28px -20px rgba(20,23,28,.4); }
.chips .ic{ color:var(--accent-ink); width:17px; height:17px; }
.chips .chip--hub{ background:var(--accent); color:var(--on-accent); border-color:transparent; }
.chips .chip--hub .ic{ color:var(--on-accent); }
/* Orte-Karten (Hub) */
.ogrid{ display:grid; gap:22px; }
@media (min-width:700px){ .ogrid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .ogrid{ grid-template-columns:1fr 1fr 1fr; } }
.ocard{ display:flex; flex-direction:column; border-radius:var(--r); background:#fff; border:1px solid var(--line); overflow:hidden; transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s; }
.ocard:hover{ transform:translateY(-5px); box-shadow:0 30px 50px -36px rgba(20,23,28,.5); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ocard-img{ display:block; aspect-ratio:16/10; overflow:hidden; background:#22252B; }
.ocard-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.ocard:hover .ocard-img img{ transform:scale(1.04); }
.ocard-body{ display:flex; flex-direction:column; flex:1; padding:20px 22px 22px; }
.ocard-body .kicker{ margin-bottom:6px; font-size:.86rem; }
.ocard .h3 a{ color:var(--ink); }
.ocard .txt{ font-size:.96rem; margin-top:8px; }
.ocard .tlink{ margin-top:auto; padding-top:16px; color:var(--accent-ink); }
/* Ratgeber-Karten */
.rgrid{ display:grid; gap:22px; }
@media (min-width:700px){ .rgrid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .rgrid{ grid-template-columns:repeat(4, 1fr); } .rgrid--3{ grid-template-columns:repeat(3, 1fr); } }
.rcard{ display:flex; flex-direction:column; border-radius:var(--r); background:#fff; border:1px solid var(--line); overflow:hidden; transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s; }
.sec--dark2 .rcard, .sec--dark .rcard{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
.rcard:hover{ transform:translateY(-5px); box-shadow:0 30px 50px -36px rgba(20,23,28,.5); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.rcard-img{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#22252B; }
.rcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.rcard:hover .rcard-img img{ transform:scale(1.04); }
.rcard-body{ display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; }
.rcard-body .kicker{ margin-bottom:6px; font-size:.84rem; }
.rcard .h3{ font-size:1.12rem; }
.rcard .h3 a{ color:inherit; }
.rcard .rtxt{ margin-top:8px; font-size:.94rem; line-height:1.55; color:var(--body); }
.sec--dark2 .rcard .rtxt, .sec--dark .rcard .rtxt{ color:var(--dtext); }
.sec--dark2 .rcard .h3, .sec--dark .rcard .h3{ color:#fff; }
.rcard .tlink{ margin-top:auto; padding-top:14px; color:var(--accent-ink); }
.sec--dark2 .rcard .tlink, .sec--dark .rcard .tlink{ color:var(--acc-dt); }
/* Ratgeber-Artikel */
.article-grid{ display:grid; gap:40px; }
@media (min-width:1024px){ .article-grid{ grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); align-items:start; } .aside{ position:sticky; top:calc(var(--hdr-h) + var(--kb, 0px) + 40px); } }
.prose{ max-width:72ch; }
.prose .kicker{ margin-bottom:18px; }
.prose .h3{ margin-top:34px; margin-bottom:6px; font-size:clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.prose .txt{ font-size:1.0625rem; }
.prose .checks{ margin-top:14px; }
.acard--sm{ padding:clamp(22px, 2.4vw, 32px); }
.acard--sm .h4{ font-size:1.3rem; color:var(--ink); margin-top:6px; }
.acard--sm .btn{ margin-top:14px; }
.acard--c{ text-align:center; }
.acard--c .h3{ color:var(--ink); }
.acard--c .btn{ margin-top:16px; }
/* Studio-Karte: Öffnungszeiten */
.hours{ display:grid; gap:8px; margin-top:22px; max-width:560px; margin-inline:auto; }
.hours li{ display:flex; justify-content:space-between; gap:16px; padding:10px 14px; border-radius:var(--r-sm); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#fff; font-size:.95rem; text-align:left; }
.hours li b{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; }
.hours li span{ color:rgba(255,255,255,.8); text-align:right; }
.hours--dark{ margin-inline:0; margin-top:18px; }
.area-link{ margin-top:18px; }
.area-link a{ display:inline-flex; align-items:center; gap:6px; color:#fff; font-family:'Quattrocento Sans',sans-serif; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.area-link a:hover .ic{ transform:translateX(3px); }
.area-link .ic{ transition:transform .3s var(--ease); }
/* Google Maps 2-Klick */
.map{ position:relative; min-height:380px; border-radius:var(--r); overflow:hidden; background:#E9ECF0; display:grid; place-items:center; text-align:center; padding:28px 22px; isolation:isolate; box-shadow:0 40px 70px -45px rgba(20,23,28,.55); }
.map-bg{ position:absolute; inset:0; z-index:-1; }
.map-bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.55); }
.map__ph{ max-width:420px; }
.map__note{ color:#fff; font-size:.92rem; line-height:1.5; }
.map__note a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.map__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px; }
.map__btns .btn{ --bh:48px; }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; }
.map.is-loaded .map__ph, .map.is-loaded .map-bg{ display:none; }
@media (max-width:599px){ .map__btns{ flex-direction:column; } .map__btns .btn{ width:100%; } }
/* Formular: breites Feld, Honeypot, Textarea */
.fld--wide{ grid-column:1 / -1; }
.fld textarea{ width:100%; min-height:110px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid #D5D9DF; background:#fff; font:inherit; font-size:16px; color:var(--ink); resize:vertical; }
.fld textarea:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
/* KI-Badge auf Karten/Bildern (relative Container) */
.scard-img, .rcard-img, .simg, .pimg, .aphoto, .cimg{ position:relative; }
.hero-media picture{ display:block; width:100%; height:100%; }
.scard-img .ki, .rcard-img .ki, .simg .ki, .pimg .ki{ top:auto; bottom:10px; left:10px; }
.scard-img{ display:block; }
.scard .h3 a{ color:inherit; }
/* Seitenkopf (Bewertung, Impressum, Datenschutz, 404) */
.page-head{ background:var(--dark2); color:#fff; padding:calc(var(--hdr-h) + var(--kb, 0px) + 56px) 0 44px; }
.page-head .crumbs{ margin-bottom:10px; }
.page-head .h2{ color:#fff; }
body.solid-hdr .hdr .hdr-in{ background:rgba(23,25,30,.96); border-color:rgba(255,255,255,.08); }
.legal .prose{ max-width:76ch; }
.legal .h3{ margin-top:30px; }
.legal .h3:first-child{ margin-top:0; }
.legal a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
/* Bewertungs-Seite */
.rate-in{ max-width:720px; margin:0 auto; text-align:center; }
.stars-pick{ display:flex; justify-content:center; gap:6px; margin:24px 0 28px; }
.stars-pick button{ width:56px; height:56px; border:0; background:none; color:#D5D9DF; transition:transform .2s var(--ease), color .2s; padding:0; }
.stars-pick button .ic{ width:44px; height:44px; }
.stars-pick button.is-hot, .stars-pick button.is-set{ color:#FBBC04; }
.stars-pick button:hover{ transform:scale(1.1); }
.rate-panel{ text-align:left; }
.rate-panel[hidden]{ display:none; }
.fb .h3{ color:var(--ink); }
.fb .txt{ margin-top:6px; margin-bottom:16px; }
.fb .fld{ margin-top:12px; }
/* Satzfluss-Helfer (keine einzelnen Wörter in der letzten Zeile) */
.nb{ white-space:nowrap; }
@media (max-width:599px){ .nb--d{ white-space:normal; } }
/* Bewertungs-Kärtchen auf Hell (CTA auf Dunkel bleibt) */
.cta-trust .gw{ max-width:min(100%, 560px); }
/* Handy: lange Button-Texte dürfen umbrechen, Grid-Spalten nie breiter als der Rahmen */
.article-grid > *, .split > *, .about-grid > *, .faq-grid > *{ min-width:0; }
.btn--block, .acard--sm .btn, .map__btns .btn{ white-space:normal; text-align:center; }
@media (max-width:599px){ .btn{ white-space:normal; text-align:center; line-height:1.2; } }
/* debugmax-Lauf 13.10.: Scroll-Anker, eine Button-Höhe, Tippflächen, Keyword-Größe, Kanten */
html, body{ overflow-anchor:none; }
.h1 .em, .h2 .em, .h3 .em{ font-size:1em; }
.btn--lg{ --bh:52px; padding:0 26px; font-size:1rem; }
.btn--sm{ --bh:44px; }
.map__btns .btn{ --bh:52px; }
.chips a{ min-height:52px; }
.skip{ min-height:52px; display:inline-flex; align-items:center; }
.tlink{ min-height:44px; align-items:center; }
.ftr-col a, .ftr-legal a, .crumbs a, .scard .h3 a, .rcard .h3 a, .ocard .h3 a, .area-link a, .dd__foot a, .ftr-contact a, .hours--dark li b{ display:inline-block; padding:11px 0; margin:-11px 0; }
.ftr-badge{ min-height:44px; }
.wa{ min-width:56px; }
@media (min-width:1200px){ .hdr-in{ padding-left:calc(var(--gut) - 4px); } }
.legal .prose{ margin:0; }
.tcard .h2{ color:#fff; margin-bottom:12px; }
.map-img{ width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.55); }
.map-bg picture{ display:block; width:100%; height:100%; }
.area-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.area-card picture{ position:absolute; inset:0; z-index:-2; }
.llist a{ min-height:52px; }
.crumbs a, .ftr-col a{ min-width:44px; }
.prose .h3{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.cimg picture{ position:absolute; inset:0; }
.cimg-img{ width:100%; height:100%; object-fit:cover; }
.prose p, .prose li, .ftr-contact li, .ctile-t b, .txt{ overflow-wrap:break-word; }
/* ═══ 13.10. Runde 2: Agent-Funde + Section-Vielfalt (Referenzen, Palette, Marken, Bento, Zeitleiste, Vergleich, Zitat, Themen) ═══ */
.pc{ display:none; }
@media (min-width:1024px){ .pc{ display:inline; } }
/* Karten-Reihen: Tablet zweispaltig, dritte Karte voll breit; nichts schmaler als der Inhalt */
.cards > *{ min-width:0; }
@media (min-width:768px) and (max-width:1023px){ .cards.cols-2 > *, .cards.cols-3 > *{ flex:1 1 calc((100% - 20px) / 2); } }
@media (min-width:1024px) and (max-width:1199px){ .cards.cols-2 > *{ flex:1 1 calc((100% - 20px) / 2); } .cards.cols-3 > *{ flex:1 1 calc((100% - 40px) / 3); } }
@media (max-width:1199px){ .nb--d{ white-space:normal; } }
/* Dropdown-Einträge lesbar (Nav-Linkfarbe nicht erben) */
.hdr-nav .dd a{ color:var(--ink); padding:9px 10px; font-weight:700; }
.hdr-nav .dd a::after{ display:none; }
.hdr-nav .dd a:hover{ color:var(--ink); }
.hdr-nav .dd .dd__foot a{ color:var(--accent-ink); padding:6px 0; }
.hdr.is-solid .hdr-in{ background:#17191E; }
/* Kontakt-Bild: Querformat, Schaufenster-Schrift frei, Logo-Badge nur am PC */
.cimg-img{ object-position:50% 30%; }
.map-img{ object-position:50% 30%; }
@media (max-width:1023px){ .cimg{ aspect-ratio:4/3; } .cimg-logo{ display:none; } }
.cimg > picture, .cimg > img.cimg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Studio-Karte: Schrift im Foto unter dem Schleier */
.area-bg{ object-position:50% 78%; }
.area-shade{ background:radial-gradient(70% 80% at 50% 50%, rgba(20,22,27,.86) 0%, rgba(20,22,27,.72) 100%); }
@media (max-width:479px){ .hours li{ flex-direction:column; gap:2px; } .hours li span{ text-align:left; } }
/* Link-Karten mit Hover, FAQ-Fragen schmal ok */
.lcard{ transition:transform .6s var(--ease), border-color .4s; }
.lcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--acc-dt) 40%, transparent); }
.acc-q{ min-width:0; }
@media (max-width:339px){ .acc-h button{ gap:10px; } .acc-n{ min-width:20px; } }
/* Rechtliches: Text an der H1-Kante, kein WhatsApp-Knopf über dem Text */
body.solid-hdr .wa{ display:none; }
.prose .checks{ margin-bottom:18px; }
.prose{ max-width:68ch; }
.prose .txt{ font-size:clamp(1.0625rem, 1rem + .15vw, 1.2rem); }
/* Bewertung */
.rate-in .sub{ margin-inline:auto; }
.acard--c{ align-items:center; }
.acard--c .btn{ align-self:center; }
.fb.is-done .fld, .fb.is-done .qfields, .fb.is-done .consent, .fb.is-done .qnav{ display:none; }
/* Handy-Hero: oberer Schleier höher für Dachzeile/H1 */
@media (max-width:767px){
  .hero-shade{ background:linear-gradient(180deg, rgba(14,16,20,.68) 0%, rgba(14,16,20,0) 40%), linear-gradient(0deg, rgba(14,16,20,.9) 0%, rgba(14,16,20,.55) 60%, rgba(14,16,20,calc(.25 + var(--hero-ov-m))) 100%); }
  .hero--sub .hero-shade{ background:linear-gradient(180deg, rgba(14,16,20,.68) 0%, rgba(14,16,20,0) 40%), linear-gradient(0deg, rgba(14,16,20,.9) 0%, rgba(14,16,20,.6) 55%, rgba(14,16,20,.35) 100%); }
  .ctile-t b{ font-size:.95rem; }
}
@media (max-width:419px){ .ctile-t b{ font-size:.9rem; } }
.hero--sub .hero-copy{ max-width:min(100%, 820px); }
@media (min-width:1800px){ .hero--sub .hero-copy{ max-width:960px; } .hero--sub .h1{ max-width:18ch; } }
@media (min-width:2300px){ .hero--sub .hero-copy{ max-width:1080px; } }
@media (min-width:900px) and (max-width:1099px){ .rgrid--3{ grid-template-columns:repeat(3, 1fr); } }
.crumbs a{ min-width:0; padding:11px 2px; margin:-11px -2px; }
.ocard .h3 br{ display:block; }
.sec--slim{ padding:clamp(44px, 4vw + 20px, 80px) 0; }
.textblocks .cards{ align-items:stretch; }

/* ─── Referenzen-Slider (Kundenprojekt) ─────────────────── */
.ref-rail{ position:relative; margin:0 calc(-1 * var(--gut)); }
.ref-track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); padding:6px var(--gut) 12px; scrollbar-width:none; overscroll-behavior-x:contain; }
.ref-track::-webkit-scrollbar{ display:none; }
.ref-track::after{ content:''; flex:0 0 1px; margin-left:calc(var(--gut) - 15px); }
.ref-item{ flex:0 0 82%; scroll-snap-align:start; display:flex; flex-direction:column; border-radius:var(--r); background:#fff; border:1px solid var(--line); overflow:hidden; transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s; }
.ref-item:hover{ transform:translateY(-5px); box-shadow:0 30px 50px -36px rgba(20,23,28,.5); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ref-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#22252B; }
.ref-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.ref-item:hover .ref-img img{ transform:scale(1.04); }
.ref-img .ki{ top:auto; bottom:10px; left:10px; }
.ref-item figcaption{ display:flex; flex-direction:column; gap:3px; padding:16px 18px 18px; }
.ref-item figcaption b{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; color:var(--ink); font-size:1.02rem; }
.ref-item figcaption span{ font-size:.9rem; color:var(--muted); }
.ref-item--q{ justify-content:center; padding:26px 24px 24px; background:var(--dark2); border-color:rgba(255,255,255,.1); color:var(--dtext); }
.ref-qmark{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:4.5rem; line-height:.5; color:var(--acc-dt); margin-bottom:12px; }
.ref-q{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500; font-size:clamp(1.25rem, 1.1rem + .5vw, 1.55rem); line-height:1.3; color:#fff; }
.ref-by{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-top:18px; font-size:.88rem; color:rgba(255,255,255,.7); }
.ref-by .gw-g{ width:32px; height:32px; }
.ref-by .gw-g .gw-glogo{ width:20px; height:20px; }
.ref-by em{ font-style:normal; }
.ref-ctl{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:16px; }
.rail-btn--l{ width:46px; height:46px; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; color:var(--ink); transition:border-color .25s, transform .4s var(--ease); }
.rail-btn--l:hover{ border-color:rgba(20,23,28,.3); transform:translateY(-2px); }
.rail-btn--l[disabled]{ opacity:.35; transform:none; }
.rail-count--l{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; color:var(--muted); font-size:.95rem; min-width:56px; text-align:center; }
.rail-count--l b{ color:var(--ink); }
@media (min-width:600px){ .ref-item{ flex-basis:calc((100% - 14px) / 2); } }
@media (min-width:1024px){ .ref-rail{ margin:0; } .ref-track{ gap:22px; padding:6px 0 12px; scroll-padding-inline:0; } .ref-track::after{ display:none; } .ref-item{ flex-basis:calc((100% - 44px) / 3); } .ref-ctl{ margin-top:22px; } }

/* ─── Material-Palette ──────────────────────────────────── */
.pal-grid{ display:grid; gap:18px; }
@media (min-width:768px){ .pal-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; } }
.pal-item{ display:flex; flex-direction:column; padding:clamp(22px, 2.2vw, 32px); border-radius:var(--r); background:var(--gray); border:1px solid var(--line); transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s; }
.pal-item:hover{ transform:translateY(-5px); box-shadow:0 24px 44px -34px rgba(20,23,28,.5); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pal-sw{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:18px; }
.pal-sw li{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.74rem; font-weight:600; color:var(--muted); text-align:center; width:52px; }
.pal-sw i{ display:block; width:44px; height:44px; border-radius:var(--r-sm); border:1px solid rgba(20,23,28,.12); box-shadow:inset 0 0 0 2px #fff; }
.pal-sub{ font-size:.86rem; font-weight:600; color:var(--accent-ink); margin-bottom:6px; }
.pal-item .h3{ margin-bottom:8px; }
.pal-p{ color:var(--body); line-height:1.6; font-size:.98rem; }

/* ─── Marken-Band (nur Schrift) ─────────────────────────── */
.brands-in{ display:grid; gap:28px; align-items:center; }
@media (min-width:1024px){ .brands-in{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; } }
.brands-head .kicker{ margin-bottom:10px; }
.brands-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
@media (min-width:600px){ .brands-list{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1024px){ .brands-list{ grid-template-columns:repeat(5, 1fr); gap:12px; } }
.brands-list li{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:92px; padding:14px 10px; border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:transform .5s var(--ease), border-color .3s; }
.brands-list li:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--acc-dt) 45%, transparent); }
.brands-list b{ font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:clamp(1.2rem, 1rem + .7vw, 1.6rem); color:#fff; letter-spacing:.01em; }
.brands-list small{ font-size:.78rem; font-weight:600; color:var(--acc-dt); }

/* ─── Bento (Wohnzimmer, Büro, Hauswirtschaftsraum) ────── */
.bento-grid{ display:grid; gap:18px; }
.bento-big{ position:relative; border-radius:var(--r); overflow:hidden; min-height:260px; border:1px solid rgba(255,255,255,.1); }
.bento-big--img{ background:#22252B; }
.bento-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bento-big--img figcaption{ position:absolute; left:0; right:0; bottom:0; padding:60px 22px 18px; background:linear-gradient(0deg, rgba(14,16,20,.85), transparent); color:#fff; font-family:'Quattrocento Sans',sans-serif; font-weight:700; }
.bento-big--txt{ display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(26px, 3vw, 44px); background:radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 38%, transparent) 0%, transparent 55%), linear-gradient(160deg, #2B2F37 0%, #1A1D22 100%); }
.bento-kicker{ font-size:.92rem; font-weight:700; color:var(--acc-dt); margin-bottom:14px; }
.bento-state{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500; font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height:1.15; color:#fff; }
.bento-state .em{ color:var(--em-d); font-weight:600; }
.bento-item{ position:relative; padding:clamp(24px, 2.2vw, 34px); border-radius:var(--r); overflow:hidden; background:linear-gradient(160deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%); border:1px solid color-mix(in srgb, var(--acc-dt) 22%, rgba(255,255,255,.08)); transition:transform .6s var(--ease), border-color .4s, box-shadow .6s var(--ease); }
.bento-item:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--acc-dt) 45%, transparent); box-shadow:0 24px 50px -30px rgba(0,0,0,.8); }
.bento-item .vnum{ font-size:2.4rem; margin-bottom:12px; }
.bento-item .h3{ color:#fff; margin-bottom:8px; }
.bento-item p{ color:var(--dtext); font-size:.98rem; line-height:1.6; }
@media (min-width:768px){
  .bento-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
  .bento-big{ grid-column:1 / -1; min-height:320px; }
  .bento-item:last-child{ grid-column:1 / -1; }
}
@media (min-width:1024px){
  .bento-grid{ grid-template-columns:1.15fr 1fr 1fr; grid-template-rows:auto auto; gap:22px; }
  .bento-big{ grid-column:1; grid-row:1 / 3; min-height:0; }
  .bento-item:last-child{ grid-column:2 / 4; }
  .bento-item:last-child{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:start; }
  .bento-item:last-child .vnum{ grid-row:1 / 3; margin:0; }
  .bento-item:last-child p{ grid-column:2; }
}

/* ─── Zeitleiste (Küchenservice) ────────────────────────── */
.tl-wrap{ max-width:820px; margin:0 auto; }
.tl-wrap .head{ margin-left:auto; margin-right:auto; }
.tl{ position:relative; display:grid; gap:14px; padding-left:0; }
.tl::before{ content:''; position:absolute; left:23px; top:24px; bottom:24px; width:2px; background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent)); }
.tl-item{ position:relative; display:flex; gap:18px; align-items:flex-start; }
.tl-dot{ position:relative; z-index:1; flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:1rem; box-shadow:0 0 0 5px #fff; }
.sec--gray .tl-dot{ box-shadow:0 0 0 5px var(--gray); }
.tl-body{ flex:1; min-width:0; padding:18px 20px; border-radius:var(--r); background:var(--gray); border:1px solid var(--line); transition:transform .5s var(--ease); }
.sec--gray .tl-body{ background:#fff; }
.tl-item:hover .tl-body{ transform:translateY(-3px); }
.tl-body .h4{ color:var(--ink); margin-bottom:4px; }
.tl-p{ color:var(--body); line-height:1.6; font-size:.96rem; }
@media (min-width:768px){
  .tl{ gap:0; }
  .tl::before{ left:50%; margin-left:-1px; }
  .tl-item{ width:50%; padding-right:40px; margin-bottom:18px; }
  .tl-item:nth-child(even){ margin-left:50%; padding-right:0; padding-left:40px; flex-direction:row; }
  .tl-item:nth-child(odd){ flex-direction:row-reverse; text-align:right; }
  .tl-item:nth-child(odd) .tl-dot{ margin-right:-64px; }
  .tl-item:nth-child(even) .tl-dot{ margin-left:-64px; }
  .tl-item:nth-child(odd) .tl-body{ text-align:right; }
}

/* ─── Zwei Wege (Küche modernisieren) ───────────────────── */
.cmp-grid{ display:grid; gap:18px; }
@media (min-width:860px){ .cmp-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; align-items:stretch; } }
.cmp-col{ display:flex; flex-direction:column; padding:clamp(24px, 2.6vw, 38px); border-radius:var(--r); background:#fff; border:1px solid var(--line); border-top:4px solid rgba(20,23,28,.18); transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.cmp-col:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -36px rgba(20,23,28,.5); }
.cmp-col--acc{ border-top-color:var(--accent); background:var(--acc-soft); }
.cmp-sub{ font-size:.86rem; font-weight:600; color:var(--accent-ink); margin-bottom:6px; }
.cmp-col .checks{ margin-top:18px; margin-bottom:22px; }
.cmp-col--acc .checks li{ background:#fff; border:1px solid var(--line); }
.cmp-col .btn{ margin-top:auto; align-self:flex-start; }

/* ─── Kundenstimme (große Zitat-Section) ───────────────── */
.quote-in{ max-width:900px; margin:0 auto; text-align:center; }
.quote-mark{ display:block; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:6rem; line-height:.4; color:var(--acc-dt); margin-bottom:22px; }
.quote-text{ margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500; font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.7rem); line-height:1.25; color:#fff; text-wrap:balance; }
.quote-text::before{ content:'„'; } .quote-text::after{ content:'“'; }
.quote-by{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 14px; margin-top:26px; font-size:.95rem; color:rgba(255,255,255,.72); }
.quote-by .gw-g{ width:36px; height:36px; }

/* ─── Themenübersicht (Ratgeber-Hub) ────────────────────── */
.themen-grid{ display:grid; gap:28px; }
@media (min-width:1024px){ .themen-grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:56px; align-items:center; } .themen-grid .head{ margin-bottom:0; } }
.themen-list{ display:grid; gap:10px; counter-reset:th; }
.themen-list a{ display:flex; align-items:center; gap:16px; min-height:72px; padding:14px 18px; border-radius:var(--r); background:var(--gray); border:1px solid var(--line); color:var(--ink); transition:transform .5s var(--ease), border-color .25s, box-shadow .5s var(--ease); }
.themen-list a:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:0 18px 34px -26px rgba(20,23,28,.5); }
.th-n{ flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--accent); color:var(--on-accent); font-family:'Quattrocento Sans',sans-serif; font-weight:700; }
.th-t{ display:flex; flex-direction:column; min-width:0; }
.th-t small{ font-size:.82rem; font-weight:600; color:var(--accent-ink); }
.th-t b{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:1.02rem; line-height:1.3; }
.themen-list a > .ic:last-child{ margin-left:auto; color:var(--muted); transition:transform .3s var(--ease); }
.themen-list a:hover > .ic:last-child{ transform:translateX(3px); color:var(--accent-ink); }

/* ─── Textkarten, helle Variante (Standortseiten) ──────── */
.textblocks--alt .tcard{ position:relative; background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); padding-top:clamp(28px, 2.6vw, 40px); }
.textblocks--alt .tcard:hover{ border-color:var(--line); border-left-color:var(--accent); box-shadow:0 26px 50px -36px rgba(20,23,28,.45); }
.textblocks--alt .tcard .h2{ color:var(--ink); }
.textblocks--alt .tcard .txt{ color:var(--body); }
.tnum{ display:block; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:.06em; color:var(--accent-ink); margin-bottom:12px; }
/* Nachmessung 2: Palette-Labels einzeilig, Legal-Seiten ohne seitlichen Überhang bei 320, Marken-Band Kopfzeile */
.pal-sw li{ white-space:nowrap; }
.pal-sw{ min-height:76px; }
.legal .prose{ max-width:min(76ch, 100%); }
.legal .prose p, .legal .prose a{ overflow-wrap:anywhere; }
.brands-head .h2{ max-width:14ch; }
/* ═══ 13.10. Runde 3: Kundenfotos aus WhatsApp (Schild „Ausstellung“, Vorher/Nachher, Wohnideen-Mosaik) ═══ */
.ki-expo{ letter-spacing:.02em; font-size:10.5px; padding:5px 8px; background:rgba(15,17,21,.55); }
.ref-img .ki, .vn-img .ki, .mo-item .ki, .bento-big .ki{ top:10px; bottom:auto; left:10px; }
.cimg-img{ object-position:50% 50%; }
.map-img{ object-position:50% 50%; }
.area-bg{ object-position:50% 50%; }
@media (max-width:1023px){ .cimg-logo{ display:block; } }
/* Vorher / Umbau / Nachher */
.vn-rail{ position:relative; margin:0 calc(-1 * var(--gut)); }
.vn-track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); padding:6px var(--gut) 12px; scrollbar-width:none; overscroll-behavior-x:contain; }
.vn-track::-webkit-scrollbar{ display:none; }
.vn-track::after{ content:''; flex:0 0 1px; margin-left:calc(var(--gut) - 15px); }
.vn-item{ position:relative; flex:0 0 80%; scroll-snap-align:start; display:flex; flex-direction:column; padding:10px 10px 0; border-radius:var(--r); background:linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.09); transition:transform .6s var(--ease), border-color .4s, box-shadow .6s var(--ease); }
.vn-item:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--acc-dt) 40%, transparent); box-shadow:0 30px 60px -36px rgba(0,0,0,.9); }
.vn-img{ position:relative; aspect-ratio:4/5; border-radius:var(--r-sm); overflow:hidden; background:#22252B; }
.vn-img img{ width:100%; height:100%; object-fit:cover; }
.vn-tag{ position:absolute; left:12px; bottom:12px; padding:7px 12px; border-radius:var(--r-sm); background:rgba(23,25,30,.88); border:1px solid rgba(255,255,255,.16); color:#fff; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.86rem; line-height:1; }
.vn-tag--acc{ background:var(--acc-d); color:var(--on-acc-d); border-color:transparent; }
.vn-item figcaption{ display:flex; flex-direction:column; gap:3px; padding:16px 8px 18px; }
.vn-item figcaption b{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; color:#fff; font-size:1.02rem; }
.vn-item figcaption span{ font-size:.9rem; color:var(--dtext); }
.vn-ctl{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:16px; }
.vn-ctl .rail-btn{ width:46px; height:46px; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#fff; }
.vn-ctl .rail-btn[disabled]{ opacity:.35; }
.vn-ctl .rail-count{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; color:rgba(255,255,255,.65); font-size:.95rem; min-width:56px; text-align:center; }
.vn-ctl .rail-count b{ color:#fff; }
@media (min-width:600px){ .vn-item{ flex-basis:calc((100% - 14px) / 2); } }
@media (min-width:900px){
  .vn-rail{ margin:0; } .vn-track{ gap:22px; padding:6px 0 0; overflow:visible; } .vn-track::after{ display:none; }
  .vn-item{ flex:1 1 0; } .vn-ctl{ display:none; }
  .vn-item + .vn-item::before{ content:'›'; position:absolute; left:-22px; top:38%; width:22px; text-align:center; font-family:'Quattrocento Sans',sans-serif; font-size:1.6rem; line-height:1; color:var(--acc-dt); }
}
/* Wohnideen-Mosaik */
.mo-grid{ display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.mo-item{ position:relative; display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4; background:#22252B; isolation:isolate; transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.mo-item:hover{ transform:translateY(-5px); box-shadow:0 30px 50px -34px rgba(20,23,28,.6); }
.mo-item--big{ grid-column:1 / -1; aspect-ratio:16/10; }
.mo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease); }
.mo-item:hover .mo-img{ transform:scale(1.04); }
.mo-item::after{ content:''; position:absolute; inset:45% 0 0 0; z-index:-1; background:linear-gradient(0deg, rgba(14,16,20,.88), transparent); }
.mo-cap{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:16px 16px 14px; color:#fff; }
.mo-cap .h3{ color:#fff; }
.mo-cap .ic{ width:20px; height:20px; color:var(--acc-dt); flex:0 0 auto; margin-bottom:3px; transition:transform .35s var(--ease); }
.mo-item:hover .mo-cap .ic{ transform:translateX(4px); }
@media (min-width:900px){
  .mo-grid{ grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2, clamp(230px, 19vw, 330px)); gap:20px; }
  .mo-item{ aspect-ratio:auto; }
  .mo-item--big{ grid-column:1; grid-row:1 / 3; aspect-ratio:auto; }
  .mo-cap{ padding:20px 22px 18px; }
}
.brands-head .h2{ max-width:none; }
/* ═══ 14.10. Maxim-Feedback: Kontaktformular statt Karte, Unterseiten-Hero einheitlich ohne Google-Kärtchen, Hover langsamer, Ablauf mittig ═══ */
/* Kontaktformular */
.cform{ position:relative; align-self:start; background:#fff; border-radius:var(--r); border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(20,23,28,.32), 0 2px 6px rgba(20,23,28,.04); padding:clamp(22px, 2.6vw, 36px); scroll-margin-top:calc(var(--hdr-h) + var(--kb, 0px) + 32px); }
.sec--white .cform{ background:var(--gray); box-shadow:none; }
.cform .h3{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.cform-sub{ margin-top:6px; color:var(--body); font-size:.98rem; }
.cform .qfields{ margin-top:20px; }
.cform-nav{ margin-top:22px; }
.sec--white .cform .fld input, .sec--white .cform .fld textarea{ background:#fff; }
.contact--form .split{ align-items:start; }
@media (min-width:1024px){ .contact--form .ccopy{ justify-content:flex-start; } }
/* Unterseiten-Hero: eine Höhe für alle, Headline am PC zweizeilig */
.hero--sub .hero-grid{ min-height:620px; padding-top:calc(var(--hdr-h) + var(--kb, 0px) + 56px); padding-bottom:56px; }
@media (max-width:767px){ .hero--sub .hero-grid{ min-height:640px; padding-top:calc(var(--hdr-h) + var(--kb, 0px) + 40px); padding-bottom:44px; } }
@media (min-width:1800px){ .hero--sub .hero-grid{ min-height:700px; } }
.hero--sub .hero-copy{ max-width:min(100%, 980px); }
.hero--sub .h1{ max-width:none; }
@media (min-width:1800px){ .hero--sub .hero-copy{ max-width:1100px; } .hero--sub .h1{ max-width:none; } }
@media (min-width:2300px){ .hero--sub .hero-copy{ max-width:1220px; } }
/* Ablauf ohne Bild: mittig, Schritte 2 x 2 */
.psteps--grid{ max-width:1080px; margin:0 auto; }
@media (min-width:860px){ .psteps--grid{ grid-template-columns:1fr 1fr; gap:16px; } }
.process--grid .sec-cta{ margin-top:clamp(28px, 3vw, 44px); }
/* Karten-Hover: deutlich langsamer und weicher */
:root{ --hov: cubic-bezier(.3,.05,.25,1); --hov-t: 1.1s; }
.vcard, .scard, .pstep, .afacts li, .qopt, .ctile, .talk, .tcard, .lcard, .llist a, .chips a, .ocard, .rcard, .ref-item, .pal-item, .brands-list li, .bento-item, .tl-body, .cmp-col, .themen-list a, .vn-item, .mo-item, .checks li, a.gw{
  transition:transform var(--hov-t) var(--hov), box-shadow var(--hov-t) var(--hov), border-color .7s ease, background-color .7s ease; }
.scard-img img, .ocard-img img, .rcard-img img, .ref-img img, .mo-img{ transition:transform 1.8s var(--hov); }
/* ═══ 14.10. Buttons hochwertiger: haptische Form, Pfeil im runden Feld (eine Farbfamilie, kein Fremdfarb-Block), Glanz beim Hover ═══ */
.btn{ --bh:54px; --bdg:calc(var(--bh) - 18px); position:relative; overflow:hidden; border-radius:999px; padding:0 26px; gap:12px; letter-spacing:.005em;
  transition:transform .7s var(--hov), box-shadow .7s var(--hov), background-color .4s, border-color .4s, color .3s, filter .4s; }
.btn--lg{ --bh:54px; padding:0 28px; }
.btn--sm{ --bh:44px; padding:0 20px; gap:10px; }
.map__btns .btn{ --bh:54px; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); transition-duration:.15s; }
/* Hauptbutton: Gold mit feiner Lichtkante oben, Schattenkante unten, weicher Tiefe */
.btn.btn--accent{ color:var(--on-accent); background-color:var(--accent);
  background-image:linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 46%, color-mix(in srgb, var(--accent) 86%, #000) 100%);
  border-color:color-mix(in srgb, var(--accent) 76%, #000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.24), 0 14px 26px -14px color-mix(in srgb, var(--accent) 72%, transparent); }
.btn.btn--accent:hover{ background-color:var(--accent);
  background-image:linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #fff) 0%, color-mix(in srgb, var(--accent) 94%, #fff) 46%, color-mix(in srgb, var(--accent) 90%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.24), 0 22px 36px -16px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn.btn--accent[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
/* Glanzstreifen läuft beim Hover einmal durch */
.btn.btn--accent::after{ content:''; position:absolute; top:-20%; bottom:-20%; left:-40%; width:34%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:translateX(-120%) skewX(-18deg); transition:transform 0s; }
.btn.btn--accent:hover::after{ transform:translateX(520%) skewX(-18deg); transition:transform 1.2s var(--hov); }
.btn.btn--accent[disabled]::after{ display:none; }
/* Pfeil im runden Feld, Ton in Ton */
.btn > .ic--end{ box-sizing:border-box; width:var(--bdg); height:var(--bdg); padding:calc((var(--bdg) - 16px) / 2); margin-right:-15px; border-radius:50%; flex:none;
  transition:transform .6s var(--hov), background-color .4s; }
.btn.btn--accent > .ic--end{ background:rgba(255,255,255,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.16); }
.btn.btn--accent:hover > .ic--end{ background:rgba(255,255,255,.44); }
.btn.btn--accent[disabled] > .ic--end{ box-shadow:none; }
.btn:hover > .ic--end{ transform:translateX(3px); }
.btn[disabled]:hover > .ic--end{ transform:none; }
/* Zweitbutton auf Dunkel: Glas mit Lichtkante */
.btn.btn--ghost{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.btn.btn--ghost:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.62); }
.btn.btn--ghost > .ic--end{ background:rgba(255,255,255,.12); }
/* Zweitbutton auf Hell */
.btn.btn--line{ background-color:#fff; background-image:linear-gradient(180deg, #fff 0%, #F2F4F7 100%); border-color:rgba(28,28,28,.3);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(20,23,28,.06), 0 12px 24px -16px rgba(20,23,28,.32); }
.btn.btn--line:hover{ border-color:rgba(20,23,28,.3); box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(20,23,28,.06), 0 18px 30px -16px rgba(20,23,28,.4); }
.btn.btn--line > .ic--end{ background:var(--acc-soft); color:var(--accent-ink); }
/* Volle Breite: Text mittig, Pfeilfeld am rechten Rand */
:is(.btn--block, .qsend):has(> .ic--end)::before{ content:''; flex:none; width:var(--bdg); margin-left:-15px; margin-right:auto; }
:is(.btn--block, .qsend) > .ic--end{ margin-left:auto; }
@media (max-width:599px){
  :is(.hero-ctas, .cta-ctas, .area-ctas, .map__btns, .qnav) .btn:has(> .ic--end)::before{ content:''; flex:none; width:var(--bdg); margin-left:-15px; margin-right:auto; }
  :is(.hero-ctas, .cta-ctas, .area-ctas, .map__btns, .qnav) .btn > .ic--end{ margin-left:auto; }
}

.btn:hover > .ic:not(.ic--end){ transform:none; }
.btn > .ic:not(.ic--end){ width:1.15em; height:1.15em; }
.skip{ min-height:54px; }

/* KI-bearbeitet-Hinweis im Ablauf-Bild oben, damit er die Bildunterschrift nicht überdeckt (14.10.2026) */
.pimg .ki{ top:10px; bottom:auto; left:10px; }

/* Einzugsgebiet-Liste: am PC Chips, am Handy gleich breite Zeilen mit Pfeil (Maxim 14.10.2026) */
.chips .chip-t small{ font:inherit; font-size:inherit; color:inherit; }
.chips .chip-go{ display:none; }
@media (max-width:767px){
  .chips{ flex-direction:column; align-items:stretch; gap:8px; max-width:520px; margin-inline:auto; }
  .chips li{ display:block; }
  .chips a{ display:flex; width:100%; min-height:62px; padding:10px 14px 10px 14px; gap:12px; }
  .chips a:hover{ transform:none; }
  .chips .chip-t{ flex:1; display:flex; flex-direction:column; gap:1px; line-height:1.25; font-size:1.02rem; }
  .chips .chip-t small{ display:block; font-weight:400; font-size:.8rem; color:var(--muted, #6b7280); letter-spacing:.01em; }
  .chips .chip-go{ display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:#fff; color:var(--accent-ink); }
  .chips .chip-go .ic{ width:15px; height:15px; color:inherit; }
  .chips .chip--hub{ justify-content:flex-start; margin-top:6px; }
  .chips .chip--hub .chip-t{ font-size:1.02rem; }
  .chips .chip--hub .chip-go{ background:rgba(255,255,255,.22); color:var(--on-accent); }
}

/* Weiße Schrift auf Gold (Maxim 14.10.2026): leichte Schattenkante für Lesbarkeit */
.btn.btn--accent, .chips .chip--hub{ text-shadow:0 1px 1px rgba(0,0,0,.2); }

/* Studio-Section kompakt: Split ohne Hintergrundfoto (Maxim 14.10.2026) */
.studio{ padding:clamp(56px, 5vw, 84px) 0; }
.studio-grid{ display:grid; gap:clamp(28px, 4vw, 64px); align-items:center; }
@media (min-width:1024px){ .studio-grid{ grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); } }
.studio-copy .sub{ margin-left:0; color:rgba(255,255,255,.82); }
.studio-copy .area-tags{ justify-content:flex-start; margin-top:20px; }
.studio-copy .area-ctas{ justify-content:flex-start; margin-top:26px; }
.studio-hours{ padding:clamp(20px, 2.4vw, 30px); border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.studio-h{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; color:#fff; font-size:1.05rem; margin-bottom:4px; }
.studio-hours .hours{ margin:12px 0 0; max-width:none; }
.studio-hours .area-link{ margin-top:16px; }
@media (max-width:1023px){ .studio-copy{ text-align:left; } }
/* Kontakt mit Formular: Formular-Karte endet am PC bündig mit der letzten Kontaktkachel (Maxim 14.10.) */
@media (min-width:1024px){
  .contact--form .split{ align-items:stretch; }
  .contact--form .cform{ align-self:stretch; display:flex; flex-direction:column; }
  .contact--form .cform .qfields{ flex:1 1 auto; grid-template-rows:auto 1fr; }
  .contact--form .cform .fld--wide textarea{ flex:1 1 auto; }
}

/* ═══ Onboarding 16.10.2026: Kochkurse, Küche im Neubau, Badmöbel (20.10.2026) ═══ */
.sec--dark2 .checks li, .sec--dark .checks li{ background:rgba(255,255,255,.07); border:1px solid var(--dline); color:#fff; }
.sec--dark2 .checks li .ic, .sec--dark .checks li .ic{ color:var(--acc-dt); }
/* Kochkurse: Bild mit Schild, Terminliste */
.kk-img{ position:relative; }
.kk-badge{ position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:var(--r-sm); background:rgba(23,25,30,.82); color:#fff; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.9rem; line-height:1; }
.kk-badge .ic{ width:18px; height:18px; color:var(--accent); }
.kk-h{ margin:22px 0 10px; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.kk-list{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.kk-list li{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--r-sm); background:var(--gray); border:1px solid var(--line); transition:transform var(--hov-t) var(--hov); }
.kk-list li:hover{ transform:translateY(-3px); }
.kk-dat{ flex:none; display:grid; place-items:center; width:54px; height:54px; border-radius:var(--r-sm); background:var(--accent); color:var(--on-accent); line-height:1; text-align:center; }
.kk-dat b{ font-family:'Quattrocento',serif; font-size:1.35rem; }
.kk-dat small{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.kk-t{ display:grid; gap:3px; }
.kk-t b{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; color:var(--ink); }
.kk-t small{ color:var(--body); font-size:.92rem; }
.kk-leer{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-radius:var(--r-sm); background:var(--gray); border:1px solid var(--line); }
.kk-leer .ic{ flex:none; width:22px; height:22px; margin-top:2px; color:var(--accent); }
.kk-leer p{ margin:0; color:var(--body); line-height:1.55; }
.kk-list--lg li{ padding:16px 18px; }
.kk-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.kk-sec .ccopy .kk-list, .kk-sec .ccopy .kk-leer{ margin-top:6px; }
@media (max-width:519px){ .kk-ctas .btn{ width:100%; justify-content:center; } }
/* Badmöbel-Galerie: gleiche Optik wie Vorher/Nachher, aber ohne Ablauf-Pfeile und ohne Gold-Schild am letzten Bild */
#badideen .vn-item + .vn-item::before{ display:none; }
#badideen .vn-tag--acc{ background:rgba(23,25,30,.88); color:#fff; border-color:rgba(255,255,255,.16); }
/* Kochkurs-Buttons: in jeder Breite gleich breit (debugmax 20.10.) */
.kk-ctas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; }
.kk-ctas .btn{ width:100%; justify-content:center; }
.cform{ scroll-margin-top:100px; }
/* debugmax 20.10.: Pfeilfeld im Quiz am Handy mit Abstand zum Rand, Luft unter der Kontakt-Frage, Hover auch für Lilia- und Öffnungszeiten-Karte */
@media (max-width:420px){ .qnav .btn{ padding-right:24px; } }
.qlegend + .qfields{ padding-top:18px; }
.acard, .studio-hours{ transition:transform var(--hov-t) var(--hov); }
.acard:hover, .studio-hours:hover{ transform:translateY(-3px); }
/* Lange H1 (Wohnzimmer und Hauswirtschaftsraum): am PC zweizeilig, bei 320 px nicht abgeschnitten (debugmax 20.10.) */
@media (min-width:1024px){ .h1-lang .hero--sub .hero-copy{ max-width:min(100%, 1240px); } }
@media (max-width:359px){ .h1-lang .hero .h1{ font-size:1.75rem; } }

/* ═══ Eckige Buttons (Maxim 20.10.2026: „das Runde passt gar nicht rein“), Pfeilfeld ebenfalls eckig ═══ */
.btn{ border-radius:4px; }
.btn > .ic--end{ border-radius:3px; }
.chips .chip-go{ border-radius:3px; }
/* Hinweis-Leiste aus dem Kunden-Dashboard (Urlaub, Betriebsferien), nur sichtbar, wenn ein Text gesetzt ist */
.hero-notice{ display:block; max-width:620px; margin:0 0 20px; padding:12px 16px; border-left:3px solid var(--accent); border-radius:4px; background:rgba(23,25,30,.72); color:#fff; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.98rem; line-height:1.45; }
.hero-notice[hidden]{ display:none !important; }

/* ═══ Maxim 20.10.2026 (Feedback-Runde 2): kein Schimmer, kein Pfeil, Ablauf schlicht, Über uns kompakt ═══ */
.btn.btn--accent::after{ display:none; }
/* Ablauf: Schritte nebeneinander, feine Linie mit Goldstück oben, keine Kacheln */
.psteps--line{ list-style:none; margin:0; padding:0; display:grid; gap:28px 32px; max-width:none; }
@media (min-width:640px){ .psteps--line{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1024px){ .psteps--line.n4{ grid-template-columns:repeat(4, minmax(0, 1fr)); } .psteps--line.n3{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.psteps--line .pstep{ position:relative; display:block; padding:22px 0 0; border-radius:0; background:none; border-top:1px solid var(--line); color:var(--body); box-shadow:none; }
.psteps--line .pstep::before{ content:''; position:absolute; left:0; top:-1px; width:48px; height:2px; background:var(--accent); }
.psteps--line .pstep:hover{ transform:none; box-shadow:none; }
.psteps--line .pnum{ display:block; min-width:0; padding:0; margin-bottom:10px; font-size:1.05rem; letter-spacing:.06em; color:var(--accent-ink); }
.psteps--line .pstep .h4{ color:var(--ink); margin-bottom:6px; }
.psteps--line .pstep-p{ font-size:.95rem; line-height:1.6; color:var(--body); margin:0; }
.process--line .sec-cta{ margin-top:clamp(32px, 3.4vw, 48px); }
/* Über uns: kleineres Foto, kein Kasten */
@media (min-width:1024px){ .about-grid{ grid-template-columns:minmax(0, 380px) minmax(0, 1fr); align-items:center; gap:clamp(40px, 5vw, 80px); } }
.aphoto{ min-height:0; aspect-ratio:4/5; max-height:none; }
@media (max-width:1023px){ .aphoto{ aspect-ratio:4/5; max-width:420px; } }
.about .acard{ background:none; border:0; box-shadow:none; padding:0; }
.about .acard:hover{ transform:none; }
.about .acard .btn{ margin-top:4px; align-self:flex-start; }
.about .afacts{ margin:18px 0 26px; }
/* Öffnungszeiten-Hinweis */
.hours-note{ margin:14px 0 0; font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.72); }
/* Ratgeber-Seitenleiste: Ansprechpartnerin */
.aperson{ display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.aperson img{ width:56px; height:56px; border-radius:var(--r-sm); object-fit:cover; object-position:50% 15%; flex:none; }
.aperson-t{ display:flex; flex-direction:column; line-height:1.25; }
.aperson-t b{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; color:var(--ink); }
.aperson-t small{ font-size:.86rem; color:var(--muted); }
.about .acard .btn--block{ width:auto; min-width:240px; }

/* ═══ Maxim 20.10.2026 Runde 3: Leistungs-Kacheln auf Weiß, Hersteller-Logos ═══ */
.services--light .scard{ background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(20,23,28,.04), 0 18px 40px -30px rgba(20,23,28,.35); }
.services--light .scard:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:0 28px 50px -32px rgba(20,23,28,.45); }
.services--light .scard .h3, .services--light .scard .h3 a{ color:var(--ink); }
.services--light .scard p{ color:var(--body); }
.services--light .rail-btn{ border-color:var(--line); background:#fff; color:var(--ink); }
.services--light .rail-count{ color:var(--muted); }
.services--light .rail-count b{ color:var(--ink); }
/* Marken: Original-Logos, auf Dunkel weiß */
.brands-list li{ gap:10px; min-height:104px; }
.brands-list img{ display:block; height:34px; width:auto; max-width:100%; object-fit:contain; filter:brightness(0) invert(1); opacity:.92; }
/* Marken in Originalfarben (Maxim 20.10.: „nicht alle weiß“): weiße Kacheln, damit Häcker (schwarz) und Neff/Nobilia (dunkelrot) lesbar sind */
.brands-list li{ background:#fff; border-color:rgba(255,255,255,.9); }
.brands-list li:hover{ border-color:#fff; box-shadow:0 22px 40px -26px rgba(0,0,0,.8); }
.brands-list img{ filter:none; opacity:1; }
.brands-list small{ color:var(--accent-ink); }
@media (max-width:599px){ .brands-list li:last-child:nth-child(odd){ grid-column:1 / -1; } }
@media (min-width:600px){ .brands-list{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }
/* Logo-Laufband in Über uns (Originalfarben, läuft endlos, stoppt beim Drüberfahren) */
.logo-run{ margin:0 0 26px; }
.logo-run-h{ margin:0 0 10px; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.logo-run-win{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-run-track{ display:flex; width:max-content; animation:logo-run 26s linear infinite; }
.logo-run-win:hover .logo-run-track{ animation-play-state:paused; }
.logo-run ul{ display:flex; align-items:center; gap:56px; margin:0; padding:6px 28px; list-style:none; }
.logo-run img{ display:block; height:30px; width:auto; }
@keyframes logo-run{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .logo-run-track{ animation:none; } }
.ident-photo .ki{ top:10px; bottom:auto; left:10px; z-index:2; }
/* Maxim 20.10.2026: kein dunkler Schatten beim Hover auf Karten („einfach wegmachen“), nur das sanfte Anheben bleibt */
:is(.vcard, .qopt, .scard, .pstep, .talk, a.ctile, .chips a, .ocard, .rcard, .ref-item, .pal-item, .bento-item, .cmp-col, .themen-list a, .textblocks--alt .tcard, .vn-item, .mo-item, .brands-list li, .tcard, .lcard, .llist a, .checks li, .afacts li, .kk-list li, .tl-body):hover{ box-shadow:none; }
.services--light .scard:hover{ box-shadow:0 1px 2px rgba(20,23,28,.04), 0 18px 40px -30px rgba(20,23,28,.35); }
@media (min-width:1024px){ .ident{ align-self:center; margin-bottom:0; } }   /* Maxim 20.10.: Karte war zu weit unten */
/* Maxim 20.10. (Handy): Über uns kompakter */
.about .afacts li{ padding:8px 0; }
@media (max-width:1023px){
  .aphoto{ aspect-ratio:1 / 1; max-width:none; }
  .aphoto.is-person img{ object-position:50% 8%; }
  .about .afacts{ gap:2px; margin:14px 0 22px; }
}

/* ═══════════ Runde 22.10.2026 (Maxim + Dustin): dunkle Sections ruhiger, Fotos statt Leuchtflecken, Kochkurse als Event ═══════════ */
.glow{ display:none !important; }
.vnum{ font-size:1.5rem; margin-bottom:14px; color:var(--acc-dt); letter-spacing:.02em; }
.bento-item .vnum{ font-size:1.5rem; }

/* Leiste über der Navi: nächster Kochabend */
.kbar{ position:fixed; top:0; left:0; right:0; z-index:101; height:var(--kb, 0px); display:flex; align-items:center; justify-content:center; gap:14px; padding:0 16px;
  background:var(--accent); color:#fff; font-family:'Quattrocento Sans',sans-serif; font-size:.9rem; line-height:1; white-space:nowrap; overflow:hidden; text-decoration:none; }
.kbar[hidden]{ display:none !important; }
body.has-kbar{ --kb:38px; }
.hdr{ top:var(--kb, 0px); }
.kbar-k{ font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.kbar-t b{ font-weight:700; }
.kbar-go{ display:inline-flex; align-items:center; gap:6px; font-weight:700; padding-left:14px; border-left:1px solid rgba(255,255,255,.4); }
.kbar-go .ic{ width:15px; height:15px; transition:transform .5s var(--hov); }
.kbar:hover .kbar-go .ic{ transform:translateX(3px); }
@media (max-width:899px){ .kbar-x{ display:none; } }
@media (max-width:599px){ body.has-kbar{ --kb:36px; } .kbar{ font-size:.82rem; gap:10px; } .kbar-k{ display:none; } .kbar-go{ padding-left:10px; } }

/* Termin als Ticket */
.ticket{ position:relative; display:flex; align-items:stretch; background:#fff; color:var(--ink); border-radius:6px; text-align:left;
  -webkit-mask:radial-gradient(circle 9px at var(--tk, 96px) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at var(--tk, 96px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask:radial-gradient(circle 9px at var(--tk, 96px) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at var(--tk, 96px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.ticket-date{ flex:0 0 var(--tk, 96px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:18px 8px; background:var(--accent); color:#fff; }
.ticket-date small{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; opacity:.9; }
.ticket-date b{ font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:2.6rem; line-height:.95; }
.ticket-date span{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.04em; }
.ticket-body{ flex:1; min-width:0; padding:18px 22px 18px 24px; border-left:2px dashed rgba(20,23,28,.14); }
.ticket-k{ margin:0 0 6px; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
.ticket-h{ margin:0 0 6px; font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:1.22rem; line-height:1.25; color:var(--ink); }
.ticket-meta{ margin:0; font-size:.94rem; color:var(--body); }
.ticket-text{ margin:12px 0 0; font-size:1rem; line-height:1.6; color:var(--body); }
.ticket-info{ margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line); font-size:.88rem; font-weight:700; font-family:'Quattrocento Sans',sans-serif; color:var(--ink); }
.ticket--lg{ --tk:150px; box-shadow:none; }
.ticket--lg .ticket-date b{ font-size:4.2rem; }
.ticket--lg .ticket-date span{ font-size:1rem; }
.ticket--lg .ticket-body{ padding:26px 30px; }
.ticket--lg .ticket-h{ font-size:1.5rem; }
@media (max-width:479px){ .ticket{ --tk:84px; } .ticket-date b{ font-size:2.2rem; } .ticket--lg{ --tk:100px; } .ticket--lg .ticket-date b{ font-size:3rem; } .ticket-body, .ticket--lg .ticket-body{ padding:16px 16px 16px 18px; } .ticket--lg .ticket-h{ font-size:1.22rem; } }
.kk-box{ margin:24px 0 0; }
.kk-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.kk-ctas .btn .ic{ width:18px; height:18px; }

/* Startseite: Kochkurse als dunkle Event-Section mit Foto der Ausstellungsküche */
.kk-home{ position:relative; overflow:hidden; isolation:isolate; }
.kk-home-media{ position:absolute; top:0; right:0; bottom:0; width:56%; z-index:-1; }
.kk-home-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.kk-home-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--dark2) 0%, rgba(31,34,40,.72) 22%, rgba(31,34,40,.12) 60%, rgba(31,34,40,0) 100%); }
.kk-home-grid{ position:relative; min-height:clamp(520px, 44vw, 640px); display:flex; align-items:center; }
.kk-home-copy{ max-width:560px; }
.kk-home .ticket{ box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.kk-home .kk-leer{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.kk-home .kk-leer p{ color:var(--dtext); }
@media (max-width:1023px){
  .kk-home{ padding-top:0; }
  .kk-home-media{ position:relative; width:auto; height:auto; aspect-ratio:16 / 11; margin:0 0 30px; z-index:0; }
  .kk-home-media::after{ background:linear-gradient(180deg, rgba(31,34,40,0) 45%, var(--dark2) 100%); }
  .kk-home-grid{ min-height:0; display:block; }
  .kk-home-copy{ max-width:none; }
}

/* Anfrage: Formular-Karte mit Bild der Kupferspüle */
.quiz-wrap{ display:grid; max-width:1120px; margin:0 auto; background:#fff; border-radius:var(--r); border:1px solid var(--line); overflow:hidden; box-shadow:0 40px 80px -40px rgba(20,23,28,.32), 0 2px 6px rgba(20,23,28,.04); }
.quiz-wrap .quiz{ max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; }
.quiz-aside{ position:relative; min-height:220px; overflow:hidden; background:#121418; color:#fff; display:flex; align-items:flex-end; }
.quiz-aside-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.quiz-aside::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,16,20,.05) 20%, rgba(14,16,20,.88) 100%); }
.quiz-aside-t{ position:relative; z-index:1; padding:26px 28px; }
.quiz-aside-k{ margin:0 0 6px; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#E2C38A; }
.quiz-aside-h{ margin:0 0 14px; font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:1.35rem; line-height:1.25; color:#fff; }
.quiz-aside ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.quiz-aside li{ display:flex; gap:10px; align-items:center; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.95rem; color:rgba(255,255,255,.92); }
.quiz-aside li .ic{ width:16px; height:16px; color:#E2C38A; flex:none; }
@media (min-width:1024px){ .quiz-wrap{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } .quiz-aside{ min-height:0; } }
@media (max-width:1023px){ .quiz-aside ul{ display:none; } .quiz-aside-t{ padding:20px 22px; } .quiz-aside-h{ margin:0; font-size:1.15rem; } }

/* CTA mit Foto vom Studio am Abend */
.cta--photo{ position:relative; isolation:isolate; overflow:hidden; background:#121418; padding-block:clamp(96px, 9vw, 160px); }
.cta-media{ position:absolute; inset:0; z-index:-1; }
.cta-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 58%; }
.cta-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,16,20,.66) 0%, rgba(14,16,20,.72) 55%, rgba(14,16,20,.9) 100%); }
.cta--photo .sub{ color:rgba(255,255,255,.86); }
.cta--photo .gw{ background:rgba(14,16,20,.72); }

/* Kochkurs-Seite */
.kk-next-grid{ display:grid; gap:clamp(28px, 4vw, 64px); align-items:center; }
@media (min-width:1024px){ .kk-next-grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } }
.kk-next-ticket .ticket{ border:1px solid var(--line); background:#fff; box-shadow:0 30px 60px -40px rgba(20,23,28,.35); }
.kk-next-ticket .kk-box{ margin:0; }
.sec--dark2 .psteps--line .pstep{ border-top-color:rgba(255,255,255,.14); }
.sec--dark2 .psteps--line .pstep .h4{ color:#fff; }
.sec--dark2 .psteps--line .pstep-p{ color:var(--dtext); }
.sec--dark2 .psteps--line .pnum{ color:var(--acc-dt); }
.kk-gal-grid{ display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:180px; }
.kk-gal-it{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; background:#22252B; }
.kk-gal-it img{ width:100%; height:100%; object-fit:cover; transition:transform 1.8s var(--hov); }
.kk-gal-it:hover img{ transform:scale(1.04); }
.kk-gal-it:first-child{ grid-column:1 / -1; grid-row:span 2; }
@media (min-width:900px){ .kk-gal-grid{ grid-template-columns:2fr 1fr 1fr; grid-auto-rows:clamp(200px, 17vw, 280px); } .kk-gal-it:first-child{ grid-column:auto; grid-row:span 2; } .kk-gal-it:nth-child(4){ grid-column:span 2; } }
.kk-sec .ccopy .kk-ctas{ margin-top:8px; }
.kk-home .head{ margin-bottom:18px; }
.kk-home .kk-ctas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.kk-home .kk-ctas .btn{ width:100%; justify-content:center; }
.kk-home-media img{ object-position:40% 55%; }
.cta-media::after{ background:linear-gradient(180deg, rgba(14,16,20,.5) 0%, rgba(14,16,20,.62) 55%, rgba(14,16,20,.86) 100%); }
.kk-ctas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.kk-ctas .btn{ width:100%; justify-content:center; }
.kk-next .head, .kk-sec .head{ margin-bottom:20px; }
@media (max-width:899px){ .kk-gal-it:nth-child(4){ grid-column:1 / -1; } }

/* Kochkurs-Startseite kompakt (Maxim 22.10.: rechts „lost“, zu groß): Foto als gerahmte Karte neben dem Text */
.kk-home{ padding-top:clamp(64px, 7vw, 104px); }
.kk-home-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 72px); align-items:stretch; min-height:0; }
.kk-home-copy{ max-width:none; display:flex; flex-direction:column; justify-content:center; }
.kk-home-media{ position:relative; inset:auto; width:auto; height:auto; z-index:0; margin:0; min-height:400px; aspect-ratio:auto; border-radius:var(--r); overflow:hidden; background:#22252B; }
.kk-home-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:35% 60%; transition:transform 1.8s var(--hov); }
.kk-home-media:hover img{ transform:scale(1.03); }
.kk-home-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%); pointer-events:none; }
.kk-home-media figcaption{ position:absolute; left:20px; bottom:16px; z-index:1; color:#fff; font-size:.88rem; font-weight:600; letter-spacing:.01em; }
@media (max-width:1023px){
  .kk-home-grid{ grid-template-columns:minmax(0, 1fr); gap:28px; }
  .kk-home-media{ order:-1; min-height:0; aspect-ratio:16 / 10; }
}

/* Kochkurs-Anmeldung: linke Spalte bleibt beim Scrollen am PC stehen (Maxim 22.10.) */
@media (min-width:1024px){
  #anmeldung .split{ align-items:start; }
  #anmeldung .ccopy{ position:sticky; top:calc(var(--hdr-h) + var(--kb, 0px) + 40px); }
}

/* Kochkurs-Startseite rechts: Einladungskarte mit Countdown + Mini-Anmeldung (Maxim 22.10.: „noch geiler, richtig premium“) */
.kk-home .kk-ctas--one{ grid-template-columns:minmax(0, 1fr); max-width:340px; }
.kk-form{ --gold:#C49A4A; position:relative; align-self:center; isolation:isolate; padding:clamp(28px, 3vw, 44px); border-radius:var(--r);
  background:linear-gradient(180deg, #24272E 0%, #17191E 100%); border:1px solid rgba(196,154,74,.42); box-shadow:0 50px 90px -40px rgba(0,0,0,.75); color:#fff; }
.kk-form::before{ content:''; position:absolute; inset:7px; border:1px solid rgba(196,154,74,.16); border-radius:calc(var(--r) - 2px); pointer-events:none; z-index:-1; }
.kk-cd{ text-align:center; }
.kk-cd-k{ margin:0 0 18px; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.kk-cd-row{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.kk-cd-z{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:2px 4px; }
.kk-cd-z + .kk-cd-z{ border-left:1px solid rgba(196,154,74,.22); }
.kk-cd-z b{ display:block; overflow:hidden; font-family:'Quattrocento', Georgia, serif; font-weight:700; font-size:clamp(2.4rem, 3.6vw, 3.6rem); line-height:1; letter-spacing:-.01em; color:#fff; font-variant-numeric:tabular-nums; }
.kk-cd-z b.is-tick{ animation:kkTick .45s cubic-bezier(.2,.7,.2,1); }
@keyframes kkTick{ from{ opacity:0; transform:translateY(-35%); } to{ opacity:1; transform:none; } }
.kk-cd-z small{ font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.kk-cd-when{ margin:20px 0 0; font-family:'Quattrocento', Georgia, serif; font-size:1.05rem; color:rgba(255,255,255,.86); }
.kk-cd-when b{ color:var(--gold); font-weight:700; }
.kk-plaetze{ display:flex; justify-content:center; align-items:center; gap:10px; margin:14px 0 0; font-size:.92rem; font-weight:700; color:#fff; }
.kk-dot{ width:8px; height:8px; border-radius:50%; background:#3DBE74; box-shadow:0 0 0 4px rgba(61,190,116,.18); }
.kk-plaetze[hidden], .kk-cd[hidden]{ display:none; }
.kk-form-top{ margin:26px 0 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); }
.kk-form-h{ margin:0; font-family:'Quattrocento', Georgia, serif; font-weight:700; font-size:1.45rem; line-height:1.2; color:#fff; }
.kk-form-sub{ margin:6px 0 0; font-size:.92rem; color:rgba(255,255,255,.62); }
.kk-form .qfields{ margin-top:18px; gap:12px; }
.kk-form .fld span{ color:rgba(255,255,255,.82); font-weight:600; }
.kk-form .fld i{ color:var(--gold); font-style:normal; }
.kk-form .fld input{ height:52px; background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.14); color:#fff; }
.kk-form .fld input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(196,154,74,.2); background:rgba(255,255,255,.07); }
.kk-pers{ grid-column:1 / -1; border:0; margin:0; padding:0; min-width:0; }
.kk-pers legend{ padding:0; margin-bottom:6px; font-size:.85rem; font-weight:600; color:rgba(255,255,255,.82); }
.kk-pers-row{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.kk-pers label{ position:relative; cursor:pointer; }
.kk-pers input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.kk-pers label span{ display:flex; align-items:center; justify-content:center; height:48px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.045);
  font-weight:700; color:rgba(255,255,255,.82); transition:border-color .2s, background-color .2s, color .2s; }
.kk-pers label:hover span{ border-color:rgba(196,154,74,.6); }
.kk-pers input:checked + span{ border-color:var(--gold); background:rgba(196,154,74,.16); color:#fff; }
.kk-pers input:focus-visible + span{ box-shadow:0 0 0 3px rgba(196,154,74,.35); }
.kk-form .consent{ margin-top:16px; color:rgba(255,255,255,.62); }
.kk-form .consent a{ color:#fff; }
.kk-form .consent input{ accent-color:var(--gold); }
.kk-form .cform-nav{ margin-top:18px; }
.kk-form .qdemo{ color:rgba(255,255,255,.45); justify-content:center; }
.kk-form .qerr{ color:#FF8A80; }
@media (max-width:1023px){ .kk-home .kk-ctas--one{ max-width:none; } }
@media (max-width:420px){ .kk-cd-z small{ font-size:.58rem; letter-spacing:.1em; } .kk-cd-z b{ font-size:2.1rem; } .kk-form{ padding:24px 18px; } }
@media (prefers-reduced-motion:reduce){ .kk-cd-z b.is-tick{ animation:none; } }
/* Kochkurs-Karte kompakter (Maxim 22.10.: Section „bissl groß“) */
.kk-form{ padding:clamp(22px, 2.2vw, 32px) clamp(22px, 2.4vw, 34px); max-width:540px; justify-self:end; width:100%; }
.kk-cd-k{ margin-bottom:12px; }
.kk-cd-z{ gap:6px; }
.kk-cd-z b{ font-size:clamp(2rem, 2.8vw, 2.8rem); }
.kk-cd-when{ margin-top:12px; font-size:.98rem; }
.kk-form-top{ margin-top:18px; padding-top:16px; }
.kk-form-h{ font-size:1.2rem; }
.kk-form-sub{ margin-top:2px; font-size:.86rem; }
.kk-form .qfields{ margin-top:12px; gap:10px; }
.kk-form .fld{ gap:4px; }
.kk-form .fld input{ height:44px; }
.kk-pers legend{ margin-bottom:4px; }
.kk-pers label span{ height:40px; }
.kk-form .consent{ margin-top:12px; font-size:.8rem; }
.kk-form .cform-nav{ margin-top:14px; }
.kk-form .btn--lg{ --bh:50px; }
.kk-form .qdemo{ margin-top:10px; font-size:.76rem; }
@media (max-width:1023px){ .kk-form{ max-width:none; justify-self:stretch; } }

/* Neubau-Section Startseite (Maxim 22.10.): Headline trägt die Botschaft, Vorteile als ruhige, fette Liste ohne Kachel */
.bp-grid{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:clamp(36px, 5vw, 96px); align-items:center; }
.bp-copy .sec-cta{ margin-top:30px; }
.bp-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.12); }
.bp-it{ display:grid; grid-template-columns:44px minmax(0, 1fr); gap:10px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.bp-n{ padding-top:5px; font-size:.82rem; font-weight:700; letter-spacing:.08em; color:var(--acc-dt); font-variant-numeric:tabular-nums; }
.bp-t{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.bp-t b{ font-family:'Quattrocento', Georgia, serif; font-weight:700; font-size:clamp(1.25rem, 1.7vw, 1.55rem); line-height:1.2; color:#fff; }
.bp-t small{ font-size:1rem; line-height:1.55; color:rgba(255,255,255,.66); }
@media (max-width:1023px){
  .bp-grid{ grid-template-columns:minmax(0, 1fr); gap:28px; }
  .bp-copy{ display:contents; }
  .bp-copy .head{ order:-1; margin-bottom:0; }
  .bp-copy .sec-cta{ order:1; margin-top:0; }
  .bp-it{ grid-template-columns:34px minmax(0, 1fr); padding:18px 0; }
}
.sec--gray .kk-form{ box-shadow:0 34px 64px -34px rgba(20,23,28,.4); }

/* Kochkurs-Seite: Ticket auf Weiß war kaum sichtbar (Maxim 22.10.) → dunkles Ticket im Stil der Anmeldekarte */
.kk-next-ticket .ticket{ background:linear-gradient(180deg, #24272E 0%, #17191E 100%); border:0; color:#fff; }
.kk-next-ticket .ticket-body{ border-left:2px dashed rgba(196,154,74,.45); }
.kk-next-ticket .ticket-k{ color:#C49A4A; }
.kk-next-ticket .ticket-h{ color:#fff; }
.kk-next-ticket .ticket-meta{ color:rgba(255,255,255,.7); }
.kk-next-ticket .ticket-text{ color:rgba(255,255,255,.78); }
.kk-next-ticket .ticket-info{ color:#fff; border-top-color:rgba(255,255,255,.12); }
.kk-next-ticket .kk-list{ margin-top:4px; }

/* ─── Startseiten-Hero: Vollbild-Küche + Lilia im Türbogen (22.10.) ── */
.hero--split{ background:#121418; }
.hs-media img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; animation:hs-zoom 2.4s var(--ease) both; }
.hs-shade{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(14,16,20,.55) 0%, rgba(14,16,20,0) 24%),
  linear-gradient(0deg, rgba(14,16,20,.75) 0%, rgba(14,16,20,0) 30%),
  linear-gradient(90deg, rgba(14,16,20,.92) 0%, rgba(14,16,20,.8) 36%, rgba(14,16,20,.2) 64%, rgba(14,16,20,.08) 100%); }
@keyframes hs-zoom{ from{ transform:scale(1.07); } to{ transform:none; } }
.hs-grid{ flex:1; display:grid; gap:56px; align-items:center; padding-top:calc(var(--hdr-h) + var(--kb, 0px) + 40px); padding-bottom:72px; }
.hs-copy{ max-width:680px; }
.hs-kicker{ display:flex; align-items:center; gap:14px; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; }
.hs-kicker::before{ content:""; width:40px; height:1px; background:currentColor; opacity:.8; }
.hs-h1{ font-size:clamp(2.2rem, 1.1rem + 3.4vw, 4.6rem); line-height:1; letter-spacing:-.02em; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.hs-h1 .em{ display:block; font-size:1.08em; line-height:1; padding-bottom:.04em; }
.hero--split .hero-lead{ max-width:520px; color:rgba(255,255,255,.82); }

/* Trust ohne Kasten: Google-Stimme mit Haarlinie, darunter Hersteller */
.hs-trust{ margin-top:36px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); display:grid; gap:24px; max-width:560px; }
.hs-voice{ margin:0; }
.hs-voice-top{ display:flex; align-items:center; gap:10px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.hs-g{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff; flex:none; }
.hs-g svg{ width:15px; height:15px; }
.hs-voice .gw-stars{ display:inline-flex; gap:1px; color:#F4B63F; }
.hs-voice .gw-stars .ic{ width:14px; height:14px; }
.hs-voice .gw-quotes{ margin-top:14px; padding-left:20px; border-left:2px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.hs-voice .gw-quote{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500; font-size:clamp(1.2rem, 1.05rem + .5vw, 1.5rem); line-height:1.3; color:rgba(255,255,255,.94); }
.hs-voice .gw-quote em{ display:block; margin-top:6px; font-family:'Quattrocento Sans',sans-serif; font-style:normal; font-size:.82rem; letter-spacing:.06em; color:var(--acc-dt); }
.hs-brands{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hs-brands-l{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.hs-brands ul{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.hs-brands img{ height:15px; width:auto; filter:brightness(0) invert(1); opacity:.6; transition:opacity .3s; }
.hs-brands li:hover img{ opacity:.95; }

/* Lilia im Türbogen: Bogen mit abgesetztem Goldrahmen */
.hs-door{ position:relative; margin:0 auto; width:min(72%, 300px); animation:hs-up 1.1s .3s var(--ease) both; }
.hs-door::before{ content:""; position:absolute; inset:-14px; border:1px solid color-mix(in srgb, var(--accent) 75%, transparent); border-radius:999px 999px 6px 6px; pointer-events:none; }
.hs-door-in{ aspect-ratio:4/5.6; border-radius:999px 999px 4px 4px; overflow:hidden; background:linear-gradient(180deg, #D9DCE1, #B9BEC6); box-shadow:0 40px 80px -30px rgba(0,0,0,.8); }
.hs-door-in img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.hs-door-cap{ position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); display:grid; justify-items:center; gap:2px; padding:10px 26px; white-space:nowrap; border-radius:999px; background:rgba(18,20,24,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.14); }
.hs-door-cap strong{ color:#fff; font-family:'Quattrocento',Georgia,serif; font-size:1.05rem; line-height:1.2; }
.hs-door-cap span{ color:var(--acc-dt); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; }
@keyframes hs-up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

@media (min-width:1024px){
  .hs-grid{ grid-template-columns:minmax(0,1fr) auto; gap:clamp(40px, 6vw, 120px); min-height:min(var(--hero-h, 100vh), 1000px); padding-top:calc(var(--hdr-h) + var(--kb, 0px) + 32px); }
  .hs-door{ width:clamp(270px, 24vw, 380px); margin:0 2vw 0 0; }
}
@media (min-width:1800px){ .hs-copy{ max-width:760px; } }
@media (max-width:1023px){
  .hs-shade{ background:linear-gradient(180deg, rgba(14,16,20,.55) 0%, rgba(14,16,20,.48) 42%, rgba(14,16,20,.9) 78%, #121418 100%); }
}
@media (max-width:599px){
  .hs-grid{ gap:56px; padding-top:calc(var(--hdr-h) + var(--kb, 0px) + 28px); padding-bottom:64px; }
  .hs-kicker{ font-size:.72rem; gap:10px; }
  .hs-kicker::before{ width:24px; }
  .hs-trust{ margin-top:32px; padding-top:22px; }
  .hs-brands{ gap:12px; }
  .hs-brands ul{ gap:16px; }
  .hs-brands img{ height:13px; }
  .hs-door{ width:62%; }
}
@media (prefers-reduced-motion:reduce){ .hs-media img, .hs-door{ animation:none; } }

/* ─── Mehr Bilder: Vorteile, Ablauf, Neubau, Studio (22.10.) ─────── */
.vcard--pic{ padding-top:0; display:flex; flex-direction:column; }
.vpic{ position:relative; margin:0 calc(clamp(26px, 2.2vw, 36px) * -1) 24px; aspect-ratio:4/3; overflow:hidden; }
.vpic img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.vpic::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(31,34,40,.85) 0%, rgba(31,34,40,0) 45%); }
.benefits--pic .vpic .vnum{ position:absolute; z-index:1; left:clamp(26px, 2.2vw, 36px); bottom:14px; margin:0; font-size:1.5rem; color:#fff; }
@media (hover:hover){ .vcard--pic:hover .vpic img{ transform:scale(1.05); } }

.process--pic .ppic{ position:relative; margin:0 0 20px; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--gray); }
.process--pic .ppic img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.process--pic .ppic figcaption{ position:absolute; left:12px; bottom:12px; padding:5px 12px; border-radius:999px; background:rgba(18,20,24,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:.78rem; letter-spacing:.04em; }
.process--pic .psteps--line .pstep{ border-top:0; padding-top:0; }
.process--pic .psteps--line .pstep::before{ display:none; }
@media (hover:hover){ .process--pic .pstep:hover .ppic img{ transform:scale(1.05); } }

.bp--pic .bp-copy{ display:block; }
.bp-pic{ position:relative; margin:32px 0 0; aspect-ratio:16/10; border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(0,0,0,.7); }
.bp-pic img{ width:100%; height:100%; object-fit:cover; }
.bp-pic::after{ content:""; position:absolute; inset:auto 0 0; height:50%; background:linear-gradient(0deg, rgba(14,16,20,.75), transparent); }
.bp-pic figcaption{ position:absolute; z-index:1; left:20px; bottom:16px; right:20px; color:#fff; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.3rem; }

.studio-pics{ grid-column:1 / -1; display:grid; gap:12px; margin-top:clamp(12px, 2vw, 24px); }
.studio-pics figure{ position:relative; margin:0; border-radius:14px; overflow:hidden; aspect-ratio:4/3; }
.studio-pics img{ width:100%; height:100%; object-fit:cover; }
.sp-main figcaption{ position:absolute; left:16px; bottom:14px; padding:6px 14px; border-radius:999px; background:rgba(18,20,24,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:.85rem; }
@media (min-width:768px){
  .studio-pics{ grid-template-columns:2fr 1fr; grid-template-rows:repeat(2, minmax(0, 1fr)); height:clamp(380px, 38vw, 560px); }
  .studio-pics figure{ aspect-ratio:auto; }
  .sp-main{ grid-row:span 2; }
}
@media (max-width:767px){ .sp-side:last-child{ display:none; } }

/* ═══ Startseite Premium, Teil 3 (22.10.) ═══════════════════════════ */
:root{ --gold:#C49A4A; --gold-l:#E2C38A; --cream:#F6F3EE; --edge:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut))); }
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ─── Erstgespräch „Concierge“ (23.10.): helles Foto, Formular als kompakte Glaskarte ─── */
.cq-sec{ position:relative; isolation:isolate; overflow:hidden; background:var(--cream); scroll-margin-top:calc(var(--hdr-h) + var(--kb, 0px)); }
.cq-bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:var(--cq-x, 60%) 50%; }
.cq-sec::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(246,243,238,.97) 0%, rgba(246,243,238,.9) 46%, rgba(246,243,238,.55) 100%); }
.cq-grid{ display:grid; gap:40px; padding-block:clamp(64px, 7.5vw, 116px); align-items:center; }
/* linke Spalte */
.cq-kick{ display:flex; align-items:center; gap:14px; margin:0; color:var(--accent-ink); font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; }
.cq-kick::before{ content:""; width:40px; height:1px; background:currentColor; }
.cq-h2{ max-width:12ch; margin-top:16px; color:var(--ink); font-size:clamp(2.2rem, 1.2rem + 3vw, 4.1rem); line-height:1.03; letter-spacing:-.02em; text-wrap:balance; }
.cq-h2 .em{ color:var(--accent-ink); }
.cq-promise{ list-style:none; max-width:460px; margin:30px 0 0; padding:0; border-top:1px solid var(--line); }
.cq-promise li{ display:flex; align-items:baseline; gap:18px; padding:13px 0; border-bottom:1px solid var(--line); font-size:1.02rem; line-height:1.4; color:var(--body); }
.cq-promise b{ min-width:22px; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.1em; color:var(--accent-ink); }
.cq-quote{ max-width:470px; margin:30px 0 0; }
.cq-quote blockquote{ margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500; font-size:clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height:1.3; color:var(--ink); }
.cq-quote figcaption{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; font-size:.8rem; letter-spacing:.06em; color:var(--muted); }
.cq-quote .hs-g{ width:24px; height:24px; box-shadow:0 1px 3px rgba(0,0,0,.14); }
.cq-quote .hs-g svg{ width:14px; height:14px; }
.cq-quote .gw-stars{ display:inline-flex; gap:1px; color:#F4B63F; }
.cq-quote .gw-stars .ic{ width:13px; height:13px; }
/* Glaskarte: die Küche schimmert durch */
.cq-card{ position:relative; padding:clamp(22px, 2.6vw, 34px); border-radius:12px; border:1px solid rgba(255,255,255,.78);
  background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 30px 60px -34px rgba(20,23,28,.4), 0 80px 120px -70px rgba(20,23,28,.38); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .cq-card{ background:rgba(255,255,255,.95); } }
.cq-card::before{ content:""; position:absolute; top:-1px; left:clamp(22px, 2.6vw, 34px); right:clamp(22px, 2.6vw, 34px); height:2px; background:linear-gradient(90deg, transparent, var(--gold-l) 25%, var(--brass) 50%, var(--gold-l) 75%, transparent); }
.cq.quiz{ max-width:none; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
/* Kopf: Kicker und Schrittzahl */
.cq-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.cq-k{ margin:0; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); }
.cq .cq-no{ margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:2.2rem; line-height:.75; color:var(--accent-ink); white-space:nowrap; }
.cq .cq-no b{ font-weight:600; color:inherit; }
.cq .cq-no b::before{ content:"0"; }
.cq .cq-no small{ font-family:'Quattrocento Sans',sans-serif; font-style:normal; font-weight:700; font-size:.7rem; letter-spacing:.14em; color:var(--muted); }
.cq-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Schrittleiste */
.cq .quiz-steps{ gap:6px; margin:14px 0 22px; padding:0; list-style:none; }
.cq .qs-bar{ height:2px; border-radius:2px; background:rgba(28,28,28,.1); }
.cq .qs-bar i{ background:var(--brass); transition:transform .6s var(--ease); }
.cq .qs-t{ display:block; margin-top:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
/* Frage */
.cq .qlegend{ margin-top:0; font-size:clamp(1.45rem, 1.2rem + .9vw, 1.9rem); line-height:1.12; letter-spacing:-.005em; }
.cq .qtext{ padding-top:4px; font-size:.95rem; }
/* Auswahl: kompakte Zeilen mit Symbol, das Symbol wird beim Wählen zum Häkchen */
.cq .qopts{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:16px; }
.cq .qopt{ flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; min-height:62px; padding:10px 14px 10px 10px; border:1px solid rgba(28,28,28,.08); border-radius:8px; background:rgba(255,255,255,.6); box-shadow:none;
  transition:border-color .35s, background-color .35s, box-shadow .5s var(--ease), transform .5s var(--ease); }
.cq .qopt:hover{ transform:translateY(-1px); border-color:rgba(148,107,34,.4); background:rgba(255,255,255,.92); box-shadow:0 12px 26px -18px rgba(20,23,28,.4); }
.cq-ic{ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(245,238,225,.95); color:var(--accent-ink); transition:background-color .35s; }
.cq-ic svg{ width:19px; height:19px; transition:opacity .25s, transform .35s var(--ease); }
.cq .qopt-t{ min-width:0; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.93rem; line-height:1.25; color:var(--ink); -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; }
.cq .qopt-ring{ display:none; }
.cq .qopt:has(input:checked){ border-color:var(--brass); background:#fff; box-shadow:inset 0 0 0 1px var(--brass), 0 14px 28px -20px rgba(148,107,34,.65); }
.cq .qopt:has(input:checked) .cq-ic{ animation:cq-pop .45s var(--ease);
  background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/17px no-repeat; }
.cq .qopt:has(input:checked) .cq-ic svg{ opacity:0; transform:scale(.5); }
.cq .qopt:has(input:focus-visible){ outline:2px solid var(--gold); outline-offset:2px; }
@keyframes cq-pop{ 0%{ transform:scale(.7); } 60%{ transform:scale(1.1); } 100%{ transform:scale(1); } }
/* Navigation: Antippen schaltet weiter, „Weiter“ nur wenn beim Öffnen schon etwas gewählt war (Zurück, Vorauswahl) */
.cq .qnav{ margin-top:18px; }
.cq .qstep:not(.has-pick) .qnext{ display:none; }
.cq .qstep[data-step="0"]:not(.has-pick) .qnav{ display:none; }
.cq .qnav .btn{ min-width:156px; }
.cq .qnav .qback{ flex:0 0 auto; min-width:0; padding-left:2px; padding-right:12px; border-color:transparent; color:var(--muted); }
.cq .qnav .qback:hover{ border-color:transparent; color:var(--ink); transform:none; }
/* Kontakt: Zusammenfassung und Felder */
.cq-sum{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.cq-sum span{ padding:5px 10px; border-radius:3px; background:rgba(245,238,225,.95); font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.76rem; line-height:1.3; color:var(--accent-ink); }
.cq .qfields{ margin-top:16px; }
.cq .fld span{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.cq .fld input{ height:48px; border-color:rgba(28,28,28,.12); border-radius:6px; background:rgba(255,255,255,.88); transition:border-color .25s, box-shadow .25s, background-color .25s; }
.cq .fld input:focus{ border-color:var(--brass); background:#fff; box-shadow:0 0 0 3px rgba(148,107,34,.14); }
.cq .consent{ margin-top:14px; font-size:.82rem; }
.cq .consent input{ accent-color:var(--brass); }
/* Fußzeile in einer Zeile */
.cq-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:20px; padding-top:16px; border-top:1px solid rgba(28,28,28,.08); font-size:.8rem; line-height:1.4; color:var(--muted); }
.cq-foot span, .cq-foot a{ display:inline-flex; align-items:center; gap:8px; }
.cq-foot svg{ flex:none; width:15px; height:15px; color:var(--accent-ink); }
.cq-foot a{ color:var(--accent-ink); font-weight:700; }
.cq-foot a:hover{ text-decoration:underline; text-underline-offset:3px; }
/* weicher Wechsel zwischen den Schritten */
.cq .qstep:not([hidden]){ animation:cq-in .5s var(--ease) both; }
@keyframes cq-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .cq .qstep:not([hidden]), .cq .qopt:has(input:checked) .cq-ic{ animation:none; }
  .cq .qopt:hover{ transform:none; }
}
@media (max-width:519px){ .cq .qopt{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; min-height:0; padding:12px 12px 13px; } .cq-ic{ width:34px; height:34px; } .cq-ic svg{ width:17px; height:17px; } .cq .qopt-t{ font-size:.9rem; } }
@media (min-width:1024px){
  .cq-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 500px); gap:clamp(48px, 6vw, 120px); }
  .cq-sec::before{ background:linear-gradient(90deg, rgba(246,243,238,.97) 0%, rgba(246,243,238,.88) 38%, rgba(246,243,238,.2) 64%, rgba(246,243,238,0) 100%); }
}

/* ─── Leistungen: aufklappende Bildpaneele ─── */
.services--panels{ background:#121418; }
.services--panels .head{ max-width:780px; margin-left:0; text-align:left; }
.services--panels .head .sub{ margin-left:0; }
.services--panels .scard .h3{ min-height:0 !important; }
.services--panels .scard-v{ display:none; }
.services--panels .btn--line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.services--panels .btn--line:hover{ border-color:rgba(255,255,255,.7); }
.services--panels .sec-cta{ justify-content:flex-start; }
@media (min-width:1100px){
  .services--panels .svc-grid{ flex-wrap:nowrap; gap:12px; height:clamp(540px, 42vw, 660px); }
  .services--panels .scard{ flex:1 1 0; min-width:0; padding:0; border:0; border-radius:18px; overflow:hidden; background:#1F2228; transition:flex-grow .8s var(--ease); }
  .services--panels .scard:hover{ transform:none; box-shadow:none; }
  .services--panels .scard-img{ position:absolute; inset:0; aspect-ratio:auto; border-radius:0; }
  .services--panels .scard-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,16,20,.94) 0%, rgba(14,16,20,.5) 40%, rgba(14,16,20,.22) 100%); }
  .services--panels .scard-img .ki{ top:52px; left:24px; right:auto; bottom:auto; }
  .services--panels .snum{ top:24px; left:24px; padding:0; background:none; box-shadow:none; color:var(--gold-l); font-size:.9rem; letter-spacing:.1em; }
  .services--panels .snum small{ opacity:.55; }
  .services--panels .scard-v{ display:block; position:absolute; z-index:2; left:50%; bottom:30px; writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg); white-space:nowrap; font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:1.2rem; color:#fff; transition:opacity .3s; }
  .services--panels .scard-body{ position:absolute; z-index:2; left:0; bottom:0; width:400px; padding:30px; opacity:0; transform:translateY(18px); pointer-events:none; transition:opacity .3s, transform .6s var(--ease); }
  .services--panels .scard .h3{ font-size:1.6rem; }
  .services--panels .scard p{ color:rgba(255,255,255,.8); -webkit-line-clamp:3; }
  .services--panels .scard .tlink{ color:var(--gold-l); }
  .services--panels .svc-grid:hover .scard:hover,
  .services--panels .svc-grid:focus-within .scard:focus-within,
  .services--panels .svc-grid:not(:hover):not(:focus-within) .scard:first-child{ flex-grow:3.4; }
  .services--panels .svc-grid:hover .scard:hover .scard-body,
  .services--panels .svc-grid:focus-within .scard:focus-within .scard-body,
  .services--panels .svc-grid:not(:hover):not(:focus-within) .scard:first-child .scard-body{ opacity:1; transform:none; pointer-events:auto; transition-delay:.28s; }
  .services--panels .svc-grid:hover .scard:hover .scard-v,
  .services--panels .svc-grid:focus-within .scard:focus-within .scard-v,
  .services--panels .svc-grid:not(:hover):not(:focus-within) .scard:first-child .scard-v{ opacity:0; }
  .services--panels .svc-grid:hover .scard:hover .scard-img img{ transform:scale(1.04); }
}

/* ─── Kochkurse: Kochinsel als Bühne, Anmeldekarte überlappt ─── */
.kk-x{ background:var(--cream); }
.kkx-band{ position:relative; isolation:isolate; overflow:hidden; height:clamp(420px, 44vw, 580px); margin:0; border-radius:22px; background:#121418; }
.kkx-band img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 58%; }
.kkx-band::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,16,20,.82) 0%, rgba(14,16,20,.4) 46%, rgba(14,16,20,0) 72%), linear-gradient(0deg, rgba(14,16,20,.55) 0%, rgba(14,16,20,0) 42%); }
.kkx-band-in{ position:absolute; top:clamp(32px, 4vw, 64px); left:clamp(24px, 4vw, 64px); right:24px; max-width:600px; }
.kkx-band-in .kicker{ display:flex; align-items:center; gap:14px; color:var(--gold-l); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.kkx-band-in .kicker::before{ content:""; width:40px; height:1px; background:currentColor; }
.kkx-band-in .h2{ color:#fff; font-size:clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem); line-height:1.02; letter-spacing:-.02em; }
.kkx-band-in .h2 .em{ color:var(--gold-l); }
.kkx-tag{ position:absolute; left:clamp(24px, 4vw, 64px); bottom:24px; display:flex; align-items:center; gap:10px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.kkx-tag span{ width:28px; height:1px; background:var(--gold-l); }
.kkx-grid{ display:grid; gap:40px; margin-top:40px; }
.kkx-lead{ max-width:580px; font-size:clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height:1.65; color:var(--body); }
.kkx-steps{ list-style:none; max-width:580px; margin:26px 0 0; padding:0; border-top:1px solid rgba(20,23,28,.12); }
.kkx-steps li{ display:flex; gap:18px; padding:16px 0; border-bottom:1px solid rgba(20,23,28,.12); }
.kkx-steps b{ min-width:22px; padding-top:5px; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.1em; color:var(--accent-ink); }
.kkx-steps span{ display:grid; gap:2px; font-size:.96rem; line-height:1.5; color:var(--body); }
.kkx-steps strong{ font-family:'Quattrocento',Georgia,serif; font-size:1.15rem; color:var(--ink); }
.kk-x .kk-box{ max-width:580px; margin-top:28px; }
.kk-x .ticket{ border:1px solid rgba(20,23,28,.08); box-shadow:0 30px 60px -36px rgba(20,23,28,.45); }
.kkx-more{ margin-top:18px; }
.kk-x .kkx-more .tlink{ color:var(--accent-ink); }
.kk-x .kk-form{ align-self:start; box-shadow:0 50px 90px -40px rgba(20,23,28,.55); }
@media (min-width:1024px){
  .kkx-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 520px); gap:clamp(40px, 6vw, 104px); margin-top:0; }
  .kkx-copy{ padding-top:56px; }
  .kk-x .kk-form{ position:relative; z-index:2; margin-top:-220px; margin-right:clamp(16px, 2.5vw, 40px); }
  .kkx-tag{ max-width:calc(100% - 620px); line-height:1.6; }
}

/* ─── Kundenprojekte: großer Filmstreifen auf Dunkel ─── */
.referenzen--film{ background:#17191E; }
.referenzen--film .head{ max-width:780px; margin-left:0; text-align:left; }
.referenzen--film .head .sub{ margin-left:0; }
.referenzen--film .ref-item{ position:relative; aspect-ratio:4/5; border:0; border-radius:18px; background:#1F2228; }
.referenzen--film .ref-item:hover{ transform:none; box-shadow:none; }
.referenzen--film .ref-img{ position:absolute; inset:0; aspect-ratio:auto; }
.referenzen--film .ref-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,16,20,.86) 0%, rgba(14,16,20,0) 46%); }
.referenzen--film .ref-item figcaption{ position:absolute; z-index:1; left:0; right:0; bottom:0; padding:22px 24px 24px; }
.referenzen--film .ref-item figcaption b{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.55rem; line-height:1.15; color:#fff; }
.referenzen--film .ref-item figcaption span{ color:rgba(255,255,255,.72); }
.referenzen--film .ref-item--q{ padding:clamp(26px, 3vw, 40px); background:linear-gradient(160deg, #262A31, #1A1C21); border:1px solid rgba(226,195,138,.25); }
.referenzen--film .ref-qmark{ font-size:6rem; color:var(--gold-l); }
.referenzen--film .ref-q{ font-size:clamp(1.35rem, 1.15rem + .6vw, 1.75rem); }
.referenzen--film .ref-by .gw-g{ background:#fff; border-radius:50%; display:grid; place-items:center; }
.referenzen--film .ref-by .gw-stars{ display:inline-flex; gap:1px; color:#F4B63F; }
.referenzen--film .ref-by .gw-stars .ic{ width:14px; height:14px; }
.referenzen--film .rail-btn--l{ background:transparent; border-color:rgba(255,255,255,.25); color:#fff; }
.referenzen--film .rail-btn--l:hover{ border-color:rgba(255,255,255,.6); }
.referenzen--film .rail-count--l{ color:rgba(255,255,255,.55); }
.referenzen--film .rail-count--l b{ color:#fff; }
@media (min-width:1024px){
  .referenzen--film .ref-rail{ margin-right:calc(50% - 50vw); }
  .referenzen--film .ref-track{ padding-right:var(--gut); }
  .referenzen--film .ref-item{ flex:0 0 clamp(340px, 31vw, 450px); }
  .referenzen--film .ref-ctl{ justify-content:flex-start; }
}

/* ─── Neubau: Anschlussplan, der sich selbst zeichnet ─── */
.bpx-grid{ display:grid; gap:36px; grid-template-areas:"head" "plan" "list"; }
.bpx-head{ grid-area:head; margin-bottom:0; }
.bpx-plan{ grid-area:plan; position:relative; margin:0; }
.bpx-list{ grid-area:list; }
.bpx-sheet{ position:relative; padding:clamp(14px, 2.4vw, 32px); border-radius:18px; border:1px solid rgba(226,195,138,.18); background:radial-gradient(120% 90% at 30% 20%, #262A31 0%, #181A1F 72%); box-shadow:0 40px 80px -40px rgba(0,0,0,.75); }
.plan{ display:block; width:100%; height:auto; }
.plan path{ fill:none; stroke:var(--gold-l); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.plan .pl-grid{ stroke:rgba(255,255,255,.05); stroke-width:1; }
.plan .pl-grid--l{ stroke:rgba(255,255,255,.09); }
.plan .pl-wall path{ stroke:#fff; stroke-width:2.2; }
.plan .pl-thin{ stroke-width:1; opacity:.75; }
.plan .pl-wall .pl-thin{ stroke:rgba(255,255,255,.8); }
.plan .pl-dash{ stroke-dasharray:4 5; stroke-width:1.2; opacity:.7; }
.plan .pl-dim path{ stroke:rgba(255,255,255,.38); stroke-width:1; }
.plan text{ font-family:'Quattrocento Sans',sans-serif; font-size:11px; letter-spacing:.06em; fill:rgba(255,255,255,.62); }
.plan .pl-cap{ font-size:9.5px; letter-spacing:.2em; fill:rgba(226,195,138,.9); }
.plan .pl-mark circle{ fill:var(--gold); stroke:#1F2228; stroke-width:3; }
.plan .pl-mark text{ fill:#121418; font-size:11px; font-weight:700; letter-spacing:0; text-anchor:middle; }
.plan .pm{ transform-box:fill-box; transform-origin:center; }
.plan .pl-scale path{ stroke:rgba(255,255,255,.4); stroke-width:1; }
.plan .pl-scale text{ font-size:9.5px; }
.bpx-stamp{ position:absolute; left:clamp(16px, 2.6vw, 34px); bottom:clamp(14px, 2vw, 26px); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(226,195,138,.75); }
.bpx-photo{ position:relative; margin-top:16px; border-radius:14px; overflow:hidden; }
.bpx-photo img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.bpx-photo span{ position:absolute; left:14px; right:14px; bottom:10px; font-size:.78rem; line-height:1.3; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.bpx-photo::after{ content:""; position:absolute; inset:auto 0 0; height:55%; background:linear-gradient(0deg, rgba(14,16,20,.7), transparent); }
.bpx-photo span{ z-index:1; }
.bpx-cap{ margin-top:20px; }
.bpx-legend{ display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; margin:0; padding:0; font-size:.86rem; color:var(--dtext); }
.bpx-legend li{ display:flex; align-items:center; gap:8px; }
.bpx-legend i{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--gold); color:#121418; font-style:normal; font-weight:700; font-size:.72rem; }
@media (min-width:1024px){
  .bpx-grid{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas:"head plan" "list plan"; column-gap:clamp(48px, 6vw, 104px); row-gap:30px; align-items:start; }
  .bpx-plan{ align-self:center; padding-bottom:40px; }
  .bpx-photo{ position:absolute; right:-18px; bottom:0; width:min(40%, 250px); margin:0; border:5px solid var(--dark2); box-shadow:0 30px 60px -24px rgba(0,0,0,.85); }
  .bpx-photo img{ aspect-ratio:4/3; }
  .bpx-cap{ max-width:56%; }
}
.draw-on .bpx-plan path[pathLength]{ stroke-dasharray:1; stroke-dashoffset:1; }
.draw-on .bpx-plan .pl-dash, .draw-on .bpx-plan text, .draw-on .bpx-plan .pm{ opacity:0; }
.draw-on .bpx-plan.is-drawn .pl-dim path{ animation:pl-draw 1.2s .1s var(--ease) forwards; }
.draw-on .bpx-plan.is-drawn .pl-wall path[pathLength]{ animation:pl-draw 1.6s .2s var(--ease) forwards; }
.draw-on .bpx-plan.is-drawn .pl-cab path[pathLength]{ animation:pl-draw 1.4s .9s var(--ease) forwards; }
.draw-on .bpx-plan.is-drawn .pl-isl path[pathLength]{ animation:pl-draw 1.4s 1.3s var(--ease) forwards; }
.draw-on .bpx-plan.is-drawn .pl-dash{ animation:pl-fade7 .6s 1.9s forwards; }
.draw-on .bpx-plan.is-drawn text{ animation:pl-fade .8s 2s forwards; }
.draw-on .bpx-plan.is-drawn .pm{ animation:pl-pop .55s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay:calc(2.2s + var(--i) * .15s); }
@keyframes pl-draw{ to{ stroke-dashoffset:0; } }
@keyframes pl-fade{ to{ opacity:1; } }
@keyframes pl-fade7{ to{ opacity:.7; } }
@keyframes pl-pop{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:none; } }

/* ─── Über uns: Porträt mit Rahmen, Team als Liste ─── */
.about--x{ background:var(--cream); }
.abx-grid{ display:grid; gap:56px; align-items:center; }
.abx-photo{ position:relative; isolation:isolate; width:min(100%, 440px); margin:16px auto 0; }
.abx-photo::before{ content:""; position:absolute; z-index:-1; inset:-16px 16px 16px -16px; border:1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius:24px; }
.abx-frame{ position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:20px; background:linear-gradient(180deg, #D9DCE1, #B9BEC6); box-shadow:0 40px 80px -40px rgba(20,23,28,.45); }
.abx-frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.abx-photo figcaption{ position:absolute; left:22px; bottom:22px; display:grid; gap:1px; padding:10px 22px; border-radius:999px; background:rgba(18,20,24,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); }
.abx-photo figcaption strong{ font-family:'Quattrocento',Georgia,serif; font-size:1.05rem; color:#fff; }
.abx-photo figcaption span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-l); }
.abx-lead{ margin-top:20px; font-family:'Quattrocento',Georgia,serif; font-size:clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height:1.5; color:var(--ink); }
.abx-text{ max-width:600px; margin-top:14px; line-height:1.7; color:var(--body); }
.abx-team{ list-style:none; margin:28px 0 0; padding:0; border-top:1px solid rgba(20,23,28,.12); }
.abx-team li{ display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid rgba(20,23,28,.12); }
.abx-team li > span:last-child{ display:grid; }
.abx-team strong{ font-family:'Quattrocento',Georgia,serif; font-size:1.08rem; color:var(--ink); }
.abx-team small{ font-size:.9rem; color:var(--body); }
.abx-mono{ flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.15rem; color:var(--accent-ink); }
.abx-mono .ic{ width:18px; height:18px; }
.abx-brands{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin:26px 0 30px; }
.abx-brands p{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.abx-brands ul{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; list-style:none; margin:0; padding:0; }
.abx-brands img{ height:16px; width:auto; filter:grayscale(1); opacity:.7; transition:filter .3s, opacity .3s; }
.abx-brands li:hover img{ filter:none; opacity:1; }
@media (min-width:1024px){ .abx-grid{ grid-template-columns:minmax(0, 440px) minmax(0, 1fr); gap:clamp(56px, 7vw, 120px); } .abx-photo{ margin:16px 0 0 16px; } }

/* ─── Ratgeber: Magazin mit Aufmacher ─── */
.ratgeber--mag .rcard .h3{ min-height:0 !important; }
@media (min-width:1100px){
  .ratgeber--mag .rgrid{ grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows:repeat(3, auto); gap:0 clamp(40px, 5vw, 72px); align-items:start; }
  .ratgeber--mag .rcard{ overflow:visible; border:0; border-radius:0; background:none; }
  .ratgeber--mag .rcard:hover{ transform:none; box-shadow:none; }
  .ratgeber--mag .rcard:first-child{ grid-row:1 / 4; }
  .ratgeber--mag .rcard:first-child .rcard-img{ aspect-ratio:4/3; border-radius:18px; }
  .ratgeber--mag .rcard:first-child .rcard-body{ padding:26px 0 0; }
  .ratgeber--mag .rcard:first-child .h3{ font-size:clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height:1.15; }
  .ratgeber--mag .rcard:first-child .rtxt{ font-size:1.02rem; max-width:560px; }
  .ratgeber--mag .rcard:not(:first-child){ flex-direction:row; align-items:center; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); }
  .ratgeber--mag .rcard:nth-child(2){ padding-top:0; }
  .ratgeber--mag .rcard:not(:first-child) .rcard-img{ flex:0 0 clamp(150px, 15vw, 210px); aspect-ratio:4/3; border-radius:12px; }
  .ratgeber--mag .rcard:not(:first-child) .rcard-body{ padding:0; }
  .ratgeber--mag .rcard:not(:first-child) .rtxt{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .ratgeber--mag .rcard:not(:first-child) .tlink{ padding-top:8px; }
}

/* ─── FAQ, Kontakt, Abschluss: ruhiger und edler ─── */
.faq--x .talk{ background:#1F2228; }
.faq--x .talk-ic{ background:var(--accent); color:#fff; }
.contact--x .ctiles{ gap:0; border-top:1px solid rgba(20,23,28,.12); }
.contact--x .ctile{ padding:18px 2px; border:0; border-bottom:1px solid rgba(20,23,28,.12); border-radius:0; background:none; }
.contact--x a.ctile:hover{ transform:none; box-shadow:none; padding-left:10px; border-bottom-color:var(--accent); }
.contact--x .ctile-ic{ width:42px; height:42px; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.contact--x .ctile-ic .ic{ width:18px; height:18px; }
.contact--x .cform{ border:0; box-shadow:0 40px 80px -50px rgba(20,23,28,.45); }
.cta--x{ display:flex; align-items:center; min-height:clamp(560px, 62vw, 780px); }
.cta--x .wrap{ width:100%; }
.cta--x .h2{ font-size:clamp(2.4rem, 1.2rem + 3.8vw, 4.6rem); line-height:1.02; letter-spacing:-.02em; }
.cta--x .gw{ padding:0; border:0; background:none; }
.cta--x .gw .gw-g{ background:#fff; border-radius:50%; }

/* ─── Einzugsgebiet: eigene Karte im Lageplan-Stil ─── */
.orx-grid{ display:grid; gap:40px; align-items:center; }
.orx-copy .sub{ margin-left:0; }
.orx-list{ list-style:none; margin:30px 0 0; padding:0; display:grid; border-top:1px solid rgba(20,23,28,.12); }
.orx-list a{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 2px; border-bottom:1px solid rgba(20,23,28,.12); color:var(--ink); transition:padding .4s var(--ease), border-color .25s, color .25s; }
.orx-list a span{ display:grid; font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:1.15rem; line-height:1.25; }
.orx-list a small{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.orx-list a .ic{ width:18px; height:18px; color:var(--accent-ink); transition:transform .35s var(--ease); }
.orx-list a:hover, .orx-list a:focus-visible{ padding-left:12px; border-bottom-color:var(--accent); color:var(--accent-ink); }
.orx-list a:hover .ic{ transform:translateX(4px); }
.orx-all{ margin-top:22px; color:var(--accent-ink); }
.orx-map{ position:relative; margin:0; }
.orx-frame{ position:relative; overflow:hidden; aspect-ratio:1280 / 1080; border-radius:22px; border:1px solid rgba(20,23,28,.1); background:#EEE8DD; box-shadow:0 50px 90px -50px rgba(20,23,28,.45); }
.mapx{ display:block; width:100%; height:100%; }
.mp-bg{ fill:#EEE8DD; }
.mp-grat{ fill:none; stroke:rgba(28,28,28,.06); stroke-width:1.5; }
.mp-gl text{ font-family:'Quattrocento Sans',sans-serif; font-size:15px; letter-spacing:.06em; fill:rgba(28,28,28,.32); }
.mp-urban{ fill:#E0D5C2; }
.mp-lake{ fill:#C5D1D5; }
.mp-river{ fill:none; stroke:#B0C2C7; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; }
.mp-road-minor{ fill:none; stroke:#D6CAB6; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.mp-road-case{ fill:none; stroke:#D3C6B0; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.mp-road{ fill:none; stroke:#FBF8F2; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; }
.mp-border{ fill:none; stroke:#A68E6B; stroke-width:2.5; stroke-dasharray:14 9; stroke-linecap:round; }
.mp-area{ font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:28px; letter-spacing:.42em; fill:rgba(28,28,28,.22); }
.mp-water{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:30px; fill:#7D959B; }
.mp-zone{ transform-box:view-box; transform-origin:640px 540px; }
.mp-ring{ fill:none; stroke:#B08A3C; stroke-width:2.5; stroke-dasharray:2 10; stroke-linecap:round; transform-box:view-box; transform-origin:640px 540px; }
.mp-ring--in{ stroke-opacity:.75; }
.mp-rl rect{ fill:#F7F2E9; stroke:rgba(176,138,60,.45); stroke-width:1.5; }
.mp-rl text{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:15px; letter-spacing:.12em; fill:#8E6F2E; }
.mp-ctx circle{ fill:#A2967F; }
.mp-ctx text{ font-family:'Quattrocento Sans',sans-serif; font-size:20px; fill:#887E6B; paint-order:stroke; stroke:#EEE8DD; stroke-width:5px; stroke-linejoin:round; }
.mp-pin{ cursor:pointer; }
.mp-pin .pin-o{ fill:#fff; stroke:#1C1C1C; stroke-width:3; transition:fill .25s, stroke .25s; }
.mp-pin .pin-d{ fill:#1C1C1C; transition:fill .25s; }
.mp-pin text{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:25px; fill:#1C1C1C; paint-order:stroke; stroke:#EEE8DD; stroke-width:6px; stroke-linejoin:round; transition:fill .25s; }
.mp-pin:hover .pin-o,
.orte--x:has(.orx-list a[data-ort="donaueschingen"]:is(:hover,:focus-visible)) .mp-pin[data-ort="donaueschingen"],
.orte--x:has(.orx-list a[data-ort="villingen-schwenningen"]:is(:hover,:focus-visible)) .mp-pin[data-ort="villingen-schwenningen"],
.orte--x:has(.orx-list a[data-ort="bad-duerrheim"]:is(:hover,:focus-visible)) .mp-pin[data-ort="bad-duerrheim"],
.orte--x:has(.orx-list a[data-ort="blumberg"]:is(:hover,:focus-visible)) .mp-pin[data-ort="blumberg"],
.orte--x:has(.orx-list a[data-ort="tuttlingen"]:is(:hover,:focus-visible)) .mp-pin[data-ort="tuttlingen"],
.orte--x:has(.orx-list a[data-ort="titisee-neustadt"]:is(:hover,:focus-visible)) .mp-pin[data-ort="titisee-neustadt"] .pin-o{ fill:var(--gold); stroke:var(--gold); }
.mp-pin:hover .pin-d,
.orte--x:has(.orx-list a[data-ort="donaueschingen"]:is(:hover,:focus-visible)) .mp-pin[data-ort="donaueschingen"] .pin-d,
.orte--x:has(.orx-list a[data-ort="villingen-schwenningen"]:is(:hover,:focus-visible)) .mp-pin[data-ort="villingen-schwenningen"] .pin-d,
.orte--x:has(.orx-list a[data-ort="bad-duerrheim"]:is(:hover,:focus-visible)) .mp-pin[data-ort="bad-duerrheim"] .pin-d,
.orte--x:has(.orx-list a[data-ort="blumberg"]:is(:hover,:focus-visible)) .mp-pin[data-ort="blumberg"] .pin-d,
.orte--x:has(.orx-list a[data-ort="tuttlingen"]:is(:hover,:focus-visible)) .mp-pin[data-ort="tuttlingen"] .pin-d,
.orte--x:has(.orx-list a[data-ort="titisee-neustadt"]:is(:hover,:focus-visible)) .mp-pin[data-ort="titisee-neustadt"] .pin-d{ fill:#fff; }
.mp-pin:hover text,
.orte--x:has(.orx-list a[data-ort="donaueschingen"]:is(:hover,:focus-visible)) .mp-pin[data-ort="donaueschingen"] text,
.orte--x:has(.orx-list a[data-ort="villingen-schwenningen"]:is(:hover,:focus-visible)) .mp-pin[data-ort="villingen-schwenningen"] text,
.orte--x:has(.orx-list a[data-ort="bad-duerrheim"]:is(:hover,:focus-visible)) .mp-pin[data-ort="bad-duerrheim"] text,
.orte--x:has(.orx-list a[data-ort="blumberg"]:is(:hover,:focus-visible)) .mp-pin[data-ort="blumberg"] text,
.orte--x:has(.orx-list a[data-ort="tuttlingen"]:is(:hover,:focus-visible)) .mp-pin[data-ort="tuttlingen"] text,
.orte--x:has(.orx-list a[data-ort="titisee-neustadt"]:is(:hover,:focus-visible)) .mp-pin[data-ort="titisee-neustadt"] text{ fill:#8E6F2E; }
.mp-hdot{ fill:var(--gold); stroke:#fff; stroke-width:4; }
.mp-pulse{ fill:var(--gold); opacity:0; transform-box:fill-box; transform-origin:center; animation:mp-pulse 2.8s ease-out infinite; }
.mp-pulse--2{ animation-delay:1.4s; }
@keyframes mp-pulse{ 0%{ opacity:.45; transform:scale(1); } 100%{ opacity:0; transform:scale(3.4); } }
.mp-hk{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:16px; letter-spacing:.24em; fill:#8E6F2E; paint-order:stroke; stroke:#EEE8DD; stroke-width:5px; }
.mp-hn{ font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:32px; fill:#1C1C1C; paint-order:stroke; stroke:#EEE8DD; stroke-width:6px; stroke-linejoin:round; }
.mp-north{ fill:#1C1C1C; }
.mp-meta text{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:15px; letter-spacing:.08em; fill:rgba(28,28,28,.55); }
.mp-scale{ fill:none; stroke:rgba(28,28,28,.55); stroke-width:2; }
.mp-meta .mp-src{ font-weight:400; font-size:13px; letter-spacing:.02em; fill:rgba(28,28,28,.38); }
.orx-legend{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:16px; font-size:.86rem; color:var(--body); }
.orx-legend span{ display:flex; align-items:center; gap:10px; }
.lg-home{ width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px #fff, 0 0 0 4px rgba(196,154,74,.5); }
.lg-ring{ width:22px; height:0; border-top:2px dotted #B08A3C; }
@media (min-width:1024px){ .orx-grid{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(48px, 6vw, 104px); } }
@media (max-width:767px){
  .orx-frame{ aspect-ratio:1 / 1.05; }
  .mp-pin text{ font-size:34px; stroke-width:9px; }
  .mp-hn{ font-size:40px; } .mp-hk{ font-size:20px; }
  .mp-ctx text{ font-size:26px; } .mp-area{ font-size:36px; } .mp-water{ font-size:38px; }
  .mp-rl{ display:none; } .mp-gl{ display:none; }
}
.draw-on .orx-map .mp-zone, .draw-on .orx-map .mp-ring{ opacity:0; transform:scale(.6); }
.draw-on .orx-map .pin-in, .draw-on .orx-map .mp-ctx, .draw-on .orx-map .mp-rl{ opacity:0; }
.draw-on .orx-map.is-drawn .mp-zone{ animation:mp-grow 1.4s .2s var(--ease) forwards; }
.draw-on .orx-map.is-drawn .mp-ring{ animation:mp-grow 1.4s .35s var(--ease) forwards; }
.draw-on .orx-map.is-drawn .mp-ring--in{ animation-delay:.2s; }
.draw-on .orx-map.is-drawn .mp-rl, .draw-on .orx-map.is-drawn .mp-ctx{ animation:pl-fade .8s 1.2s forwards; }
.draw-on .orx-map.is-drawn .pin-in{ animation:mp-drop .6s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay:calc(.9s + var(--i) * .12s); }
.pin-in{ transform-box:fill-box; transform-origin:center bottom; }
@keyframes mp-grow{ to{ opacity:1; transform:none; } }
@keyframes mp-drop{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .mp-pulse{ animation:none; } }

/* ═══ Unterseiten Premium: Leistungen (22.10.) ═══════════════════════ */
:root{ --gray:#F4F1EB; }

/* Hero mit Bild, Faktenzeile */
.hero--subx .hero-grid{ min-height:clamp(640px, 80vh, 860px); padding-bottom:72px; }
.hero--subx .hero-shade{ background:linear-gradient(180deg, rgba(14,16,20,.55) 0%, rgba(14,16,20,0) 26%), linear-gradient(0deg, rgba(14,16,20,.72) 0%, rgba(14,16,20,0) 36%), linear-gradient(90deg, rgba(14,16,20,.9) 0%, rgba(14,16,20,.72) 38%, rgba(14,16,20,.22) 70%, rgba(14,16,20,.08) 100%); }
.hero--subx .crumbs{ margin-bottom:22px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.hero--subx .crumbs span[aria-hidden]{ color:var(--gold-l); }
.hero--subx .hero-kicker{ display:flex; align-items:center; gap:14px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.hero--subx .hero-kicker::before{ content:""; width:40px; height:1px; background:currentColor; opacity:.8; }
.hero--subx .h1{ font-size:clamp(2.2rem, 1.1rem + 3.4vw, 4.6rem); line-height:1.02; letter-spacing:-.02em; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.hero--subx .hero-lead{ max-width:560px; color:rgba(255,255,255,.84); }
.hsx-facts{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; max-width:780px; margin:34px 0 0; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.16); }
.hsx-facts li{ display:flex; align-items:center; gap:10px; font-size:.92rem; color:rgba(255,255,255,.88); }
.hsx-facts .ic{ flex:none; width:16px; height:16px; color:var(--gold-l); }
@media (max-width:767px){ .hero--subx .hero-kicker{ font-size:.7rem; gap:10px; } .hero--subx .hero-kicker::before{ width:24px; } .hsx-facts{ flex-direction:column; gap:10px; margin-top:28px; } }

/* Text und Bild: Rahmen, Haarlinien statt Kästchen */
.splitsec--x.sec--gray{ background:var(--cream); }
.splitsec--x .split{ gap:clamp(40px, 6vw, 104px); }
.splitsec--x .kicker{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.splitsec--x .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.splitsec--x .head--left .sub{ font-family:'Quattrocento',Georgia,serif; font-size:clamp(1.15rem, 1.05rem + .4vw, 1.4rem); line-height:1.5; color:var(--ink); }
.splitsec--x .txt{ max-width:620px; line-height:1.75; }
.splitsec--x .txt + .txt{ margin-top:14px; }
.splitsec--x .simg{ overflow:visible; isolation:isolate; background:none; box-shadow:none; }
.splitsec--x .simg img{ border-radius:20px; box-shadow:0 40px 80px -40px rgba(20,23,28,.45); }
.splitsec--x .simg::before{ content:""; position:absolute; z-index:-1; inset:-16px 16px 16px -16px; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius:24px; }
.splitsec--x.splitsec--rev .simg::before{ inset:-16px -16px 16px 16px; }
.splitsec--x .checks{ gap:0 28px; margin-top:26px; border-top:1px solid rgba(20,23,28,.12); }
.splitsec--x .checks li, .splitsec--x.sec--gray .checks li{ padding:13px 2px; border:0; border-bottom:1px solid rgba(20,23,28,.12); border-radius:0; background:none; font-weight:600; }
.splitsec--x .checks li:hover{ transform:none; }
.splitsec--x .sec-cta--left{ margin-top:30px; }
@media (min-width:1024px){ .splitsec--x .simg{ aspect-ratio:4/5; } }
@media (max-width:1023px){ .splitsec--x .simg{ margin:16px 16px 0; } }

/* Material: Musterwand-Foto, Farben als Liste */
.palx-grid{ display:grid; gap:44px; align-items:center; }
.palx-photo{ position:relative; margin:0; overflow:hidden; aspect-ratio:4/5; border-radius:20px; box-shadow:0 40px 80px -40px rgba(20,23,28,.45); }
.palx-photo img{ width:100%; height:100%; object-fit:cover; }
.palx-photo figcaption{ position:absolute; left:18px; bottom:18px; padding:7px 16px; border-radius:999px; background:rgba(18,20,24,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:.82rem; }
.palette--x .head .kicker{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.palette--x .head .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.palette--x .pal-grid{ grid-template-columns:1fr; gap:0; border-top:1px solid rgba(20,23,28,.12); }
.palette--x .pal-item{ display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:24px; padding:22px 2px; border:0; border-bottom:1px solid rgba(20,23,28,.12); border-radius:0; background:none; }
.palette--x .pal-item:hover{ transform:none; }
.palette--x .pal-sw{ grid-column:2; grid-row:1 / 4; align-self:center; min-height:0; margin:0; gap:8px 12px; }
.palette--x .pal-sub, .palette--x .pal-item .h3, .palette--x .pal-p{ grid-column:1; }
.palette--x .pal-sub{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.palette--x .pal-sw li{ width:48px; font-size:.68rem; }
.palette--x .pal-sw i{ width:38px; height:38px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.6), 0 6px 14px -8px rgba(20,23,28,.5); }
.palette--x .sec-cta{ justify-content:flex-start; }
@media (min-width:1024px){ .palx-grid{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(48px, 6vw, 104px); } }
@media (max-width:599px){ .palette--x .pal-item{ grid-template-columns:1fr; } .palette--x .pal-sw{ grid-column:1; grid-row:auto; margin-bottom:14px; } }

/* Bento mit Foto */
.bento--x{ background:#17191E; }
.bento--x .head{ max-width:780px; margin-left:0; text-align:left; }
.bento--x .head .sub{ margin-left:0; }
.bento--x .bento-big{ border:0; border-radius:20px; }
.bento--x .bento-big--photo{ isolation:isolate; background:#1F2228; }
.bento--x .bento-big--photo .bento-img{ z-index:-2; }
.bento--x .bento-big--photo::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(14,16,20,.94) 0%, rgba(14,16,20,.45) 50%, rgba(14,16,20,.12) 100%); }
.bento--x .bento-big--img figcaption{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.45rem; }
.bento--x .bento-kicker{ color:var(--gold-l); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; }
.bento--x .bento-item{ border-radius:18px; background:rgba(255,255,255,.035); border:1px solid rgba(226,195,138,.16); }
.bento--x .bento-item:hover{ transform:none; border-color:rgba(226,195,138,.4); }
.bento--x .bento-item .vnum{ color:var(--gold-l); font-size:.85rem; letter-spacing:.12em; }
.bento--x .bento-item .h3{ font-size:1.35rem; }
@media (max-width:767px){ .bento--x .bento-big--photo{ min-height:420px; } }

/* Galerien: große Bilder, Text im Bild */
.vn--x{ background:#17191E; }
.vn--x .vn-item{ padding:0; border:0; border-radius:18px; background:#1F2228; }
.vn--x .vn-item:hover{ transform:none; }
.vn--x .vn-img{ border-radius:18px; }
.vn--x .vn-item figcaption{ position:absolute; z-index:1; left:0; right:0; bottom:0; padding:70px 22px 20px; border-radius:0 0 18px 18px; background:linear-gradient(0deg, rgba(14,16,20,.92), rgba(14,16,20,0)); }
.vn--x .vn-item figcaption b{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.5rem; line-height:1.15; }
.vn--x .vn-item figcaption span{ color:rgba(255,255,255,.75); }
.vn--x .vn-tag{ top:16px; bottom:auto; left:16px; padding:6px 13px; border-radius:999px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }

/* Zwei Wege: einer dunkel, einer hell */
.compare--x .cmp-col{ padding:clamp(28px, 3vw, 46px); border:0; border-radius:20px; background:var(--cream); }
.compare--x .cmp-col:hover{ transform:none; }
.compare--x .cmp-col--acc{ background:#1F2228; }
.compare--x .cmp-col--acc .h3{ color:#fff; }
.compare--x .cmp-col--acc .cmp-sub{ color:var(--gold-l); }
.compare--x .cmp-sub{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.compare--x .h3{ font-size:clamp(1.5rem, 1.2rem + .8vw, 2rem); }
.compare--x .checks{ gap:0; border-top:1px solid rgba(20,23,28,.12); }
.compare--x .checks li, .compare--x .cmp-col--acc .checks li{ padding:13px 2px; border:0; border-bottom:1px solid rgba(20,23,28,.12); border-radius:0; background:none; }
.compare--x .checks li:hover{ transform:none; }
.compare--x .cmp-col--acc .checks{ border-top-color:rgba(255,255,255,.14); }
.compare--x .cmp-col--acc .checks li{ border-bottom-color:rgba(255,255,255,.14); color:#fff; }
.compare--x .cmp-col--acc .checks .ic{ color:var(--gold-l); }
.compare--x .btn--line{ background:transparent; }

/* Zeitstrahl */
.timeline--x .tl::before{ background:linear-gradient(180deg, var(--gold), rgba(196,154,74,.12)); }
.timeline--x .tl-dot{ background:#1F2228; color:var(--gold-l); font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.25rem; box-shadow:0 0 0 6px #fff, 0 0 0 7px rgba(196,154,74,.45); }
.timeline--x .tl-body{ padding:22px 24px; border:0; border-radius:18px; background:var(--cream); }
.timeline--x .tl-item:hover .tl-body{ transform:none; }
.timeline--x .tl-body .h4{ font-family:'Quattrocento',Georgia,serif; font-size:1.25rem; }

/* Ablauf: große Ziffern */
.process--x.sec--gray{ background:var(--cream); }
.process--x .psteps--line .pnum{ margin-bottom:14px; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:2.6rem; line-height:1; letter-spacing:0; }
.process--x .psteps--line .pstep::before{ width:64px; }
.process--x .psteps--line .pstep .h4{ font-size:1.2rem; }

/* Weiterführende Links: Haarlinien auf Dunkel */
.links--x{ background:#17191E; }
.links--x .cards{ display:grid; gap:48px clamp(40px, 6vw, 96px); }
@media (min-width:768px){ .links--x .cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.links--x .lcard{ padding:0; border:0; background:none; }
.links--x .lcard:hover{ transform:none; }
.links--x .lcard .kicker{ display:flex; align-items:center; gap:12px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.links--x .lcard .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.links--x .lcard .h3{ margin-bottom:20px; font-size:clamp(1.5rem, 1.2rem + .8vw, 2rem); }
.links--x .llist{ gap:0; border-top:1px solid rgba(255,255,255,.12); }
.links--x .llist a{ min-height:62px; padding:0 2px; border:0; border-bottom:1px solid rgba(255,255,255,.12); border-radius:0; background:none; font-family:'Quattrocento',Georgia,serif; font-size:1.08rem; transition:padding .4s var(--ease), border-color .25s; }
.links--x .llist a:hover{ transform:none; padding-left:12px; background:none; border-bottom-color:var(--gold); }

/* Übersicht: Wohnideen und Kontaktbild */
.mosaic--x{ background:var(--cream); }
.mosaic--x .head{ max-width:780px; margin-left:0; text-align:left; }
.mosaic--x .head .sub{ margin-left:0; }
.mosaic--x .mo-item{ border-radius:18px; }
.mosaic--x .mo-item:hover{ transform:none; }
.mosaic--x .mo-cap .h3{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.6rem; }
.contact--x .cimg{ border-radius:20px; }
@media (max-width:899px){ .mosaic--x .mo-cap .h3{ font-size:1.2rem; line-height:1.15; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; min-width:0; } }

/* ═══ Unterseiten Premium: Kochkurse, Orte, Ratgeber, Kontakt (22.10.) ═══ */

/* Karte: Linien, Schrift und Punkte skalieren mit --k (Routenkarten zoomen näher heran) */
.mapx .mp-grat{ stroke-width:calc(1.5px * var(--k, 1)); }
.mapx .mp-river{ stroke-width:calc(4.5px * var(--k, 1)); }
.mapx .mp-road-minor{ stroke-width:calc(2.5px * var(--k, 1)); }
.mapx .mp-road-case{ stroke-width:calc(8px * var(--k, 1)); }
.mapx .mp-road{ stroke-width:calc(4.5px * var(--k, 1)); }
.mapx .mp-border{ stroke-width:calc(2.5px * var(--k, 1)); stroke-dasharray:calc(14px * var(--k, 1)) calc(9px * var(--k, 1)); }
.mapx .mp-area{ font-size:calc(28px * var(--k, 1)); }
.mapx .mp-water{ font-size:calc(30px * var(--k, 1)); }
.mapx .mp-ring{ stroke-width:calc(2.5px * var(--k, 1)); stroke-dasharray:calc(2px * var(--k, 1)) calc(10px * var(--k, 1)); }
.mapx .mp-ctx text{ font-size:calc(20px * var(--k, 1)); stroke-width:calc(5px * var(--k, 1)); }
.mapx .mp-pin text{ font-size:calc(25px * var(--k, 1)); stroke-width:calc(6px * var(--k, 1)); }
.mapx .mp-pin .pin-o{ stroke-width:calc(3px * var(--k, 1)); }
.mapx .mp-hdot{ stroke-width:calc(4px * var(--k, 1)); }
.mapx .mp-hk{ font-size:calc(16px * var(--k, 1)); stroke-width:calc(5px * var(--k, 1)); }
.mapx .mp-hn{ font-size:calc(32px * var(--k, 1)); stroke-width:calc(6px * var(--k, 1)); }
.mapx .mp-meta > text, .mapx .mp-meta > g:nth-child(2) text{ font-size:calc(15px * var(--k, 1)); }
.mapx .mp-meta .mp-src{ font-size:calc(13px * var(--k, 1)); }
.mapx .mp-scale{ stroke-width:calc(2px * var(--k, 1)); }
.mapx .mp-more{ fill:#EEE8DD; stroke:#8C826F; stroke-width:calc(2px * var(--k, 1)); }
.mp-route{ fill:none; stroke:#B08A3C; stroke-width:calc(5px * var(--k, 1)); stroke-linecap:round; stroke-dasharray:calc(1px * var(--k, 1)) calc(13px * var(--k, 1)); animation:mp-march 1.4s linear infinite; }
@keyframes mp-march{ to{ stroke-dashoffset:calc(-14px * var(--k, 1)); } }
.mp-rlab rect{ fill:#1C1C1C; }
.mp-rlab text{ font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:17px; letter-spacing:.06em; fill:#E2C38A; }
.mapx .mp-pin.is-focus .pin-o{ fill:var(--gold); stroke:#1C1C1C; }
.mapx .mp-pin.is-focus .pin-d{ fill:#1C1C1C; }
.mapx .mp-pin.is-focus text{ font-size:calc(31px * var(--k, 1)); }
.mapx .mp-pin.is-dim{ opacity:.5; }
@media (max-width:767px){
  .mapx .mp-pin text{ font-size:calc(34px * var(--k, 1)); stroke-width:calc(9px * var(--k, 1)); }
  .mapx .mp-pin.is-focus text{ font-size:calc(40px * var(--k, 1)); }
  .mapx .mp-hn{ font-size:calc(40px * var(--k, 1)); } .mapx .mp-hk{ font-size:calc(20px * var(--k, 1)); }
  .mapx .mp-ctx text{ font-size:calc(26px * var(--k, 1)); } .mapx .mp-area{ font-size:calc(36px * var(--k, 1)); } .mapx .mp-water{ font-size:calc(38px * var(--k, 1)); }
}
@media (prefers-reduced-motion:reduce){ .mp-route{ animation:none; } }

/* Ortsseiten: Routenkarte statt Foto */
.splitsec--x .simg--map{ aspect-ratio:4/5; }
.smap{ position:relative; overflow:hidden; width:100%; height:100%; border-radius:20px; background:#EEE8DD; box-shadow:0 40px 80px -40px rgba(20,23,28,.45); }
.smap .mapx{ width:100%; height:100%; }
.smap-cap{ position:absolute; left:18px; right:18px; bottom:18px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:12px 18px; border-radius:14px; background:rgba(18,20,24,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:.86rem; }
.smap-cap b{ font-family:'Quattrocento',Georgia,serif; font-size:1rem; }
.smap-cap .ic{ width:16px; height:16px; color:var(--gold-l); }
.smap-cap span{ margin-left:auto; font-weight:700; letter-spacing:.06em; color:var(--gold-l); }

/* Orte-Übersicht: große Karte, Liste mit Beschreibung */
.orx-grid--hub .head{ margin-bottom:8px; }
.orx-list--rich a{ display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:16px; padding:20px 2px; }
.orx-list--rich a .orx-km{ display:block; grid-column:1; font-family:'Quattrocento Sans',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.orx-list--rich a .orx-n{ display:block; grid-column:1; margin-top:4px; font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:1.25rem; line-height:1.25; }
.orx-list--rich a .orx-n small{ font:inherit; letter-spacing:0; text-transform:none; color:inherit; }
.orx-list--rich a .orx-d{ display:block; grid-column:1; margin-top:6px; font-family:'Quattrocento Sans',sans-serif; font-weight:400; font-size:.95rem; line-height:1.55; color:var(--body); }
.orx-list--rich a .ic{ grid-column:2; grid-row:1 / 4; align-self:center; }
.orx-more{ margin-top:24px; font-size:.95rem; line-height:1.65; color:var(--body); }
.lg-more{ width:12px; height:12px; border-radius:50%; border:2px solid #8C826F; background:#EEE8DD; }
@media (min-width:1024px){ .orx-grid--hub{ align-items:start; } .orte-hub--x .orx-map{ position:sticky; top:calc(var(--hdr-h) + var(--kb, 0px) + 24px); } }

/* Kochkurse: Termin als Einladung */
.kk-next--x{ background:var(--cream); }
.kk-next--x .kk-next-grid{ align-items:start; }
.kk-next--x .kicker{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.kk-next--x .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.kkn-photo{ position:relative; overflow:hidden; aspect-ratio:16/10; margin:28px 0 0; border-radius:18px; box-shadow:0 40px 80px -44px rgba(20,23,28,.5); }
.kkn-photo img{ width:100%; height:100%; object-fit:cover; }
.kkn-photo figcaption{ position:absolute; left:16px; bottom:14px; padding:6px 14px; border-radius:999px; background:rgba(18,20,24,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:.82rem; }
.kk-next--x .kk-next-ticket .ticket{ flex-direction:column; border-radius:22px; box-shadow:0 60px 100px -50px rgba(20,23,28,.7); outline:1px solid rgba(196,154,74,.4); outline-offset:-14px; }
.kk-next--x .kk-next-ticket .ticket-date{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:20px; align-items:center; justify-items:start; flex:none; padding:44px 46px 18px; background:none; color:#fff; }
.kk-next--x .kk-next-ticket .ticket-date b{ grid-row:1 / 3; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:clamp(5rem, 3rem + 4vw, 7.5rem); line-height:.8; color:var(--gold-l); }
.kk-next--x .kk-next-ticket .ticket-date span{ align-self:end; font-family:'Quattrocento',Georgia,serif; font-size:1.7rem; letter-spacing:0; }
.kk-next--x .kk-next-ticket .ticket-date small{ align-self:start; margin-top:4px; font-size:.72rem; letter-spacing:.22em; opacity:1; color:var(--gold-l); }
.kk-next--x .kk-next-ticket .ticket-body{ margin:0 46px; padding:24px 0 44px; border-left:0; border-top:1px dashed rgba(196,154,74,.45); }
.kk-next--x .kk-next-ticket .ticket-k{ letter-spacing:.16em; }
.kk-next--x .kk-next-ticket .ticket-h{ font-size:clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height:1.15; }
.kk-next--x .kk-next-ticket .ticket-info{ color:var(--gold-l); }
.kk-next--x .kk-ctas{ margin-top:26px; }
.kk-next--x .btn--line{ background:transparent; }
@media (max-width:479px){ .kk-next--x .kk-next-ticket .ticket-date{ padding:34px 30px 14px; } .kk-next--x .kk-next-ticket .ticket-body{ margin:0 30px; padding-bottom:34px; } }

/* Kochkurse: Ausstellungsküche als Panorama */
.kk-gal--x .head{ max-width:780px; margin-left:0; text-align:left; }
.kk-gal--x .head .sub{ margin-left:0; }
.kk-gal--x .kk-gal-it{ border-radius:18px; }
.kk-gal--x .kk-gal-it::after{ content:""; position:absolute; inset:auto 0 0; height:45%; background:linear-gradient(0deg, rgba(14,16,20,.72), transparent); pointer-events:none; }
.kk-gal--x .kk-gal-it figcaption{ position:absolute; z-index:1; left:20px; bottom:16px; color:#fff; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.4rem; }
@media (min-width:900px){
  .kk-gal--x .kk-gal-grid{ grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-rows:clamp(220px, 18vw, 300px); gap:14px; }
  .kk-gal--x .kk-gal-it:nth-child(1){ grid-column:1 / span 7; grid-row:span 2; }
  .kk-gal--x .kk-gal-it:nth-child(2), .kk-gal--x .kk-gal-it:nth-child(3){ grid-column:8 / span 5; }
  .kk-gal--x .kk-gal-it:nth-child(4){ grid-column:1 / -1; }
  .kk-gal--x .kk-gal-it:nth-child(4) img{ object-position:50% 62%; }
  .kk-gal--x .kk-gal-it:nth-child(1) figcaption{ font-size:1.8rem; left:28px; bottom:24px; }
}

/* Kochkurse: Anmeldung vor Studio-Kulisse */
.kk-sec--x{ isolation:isolate; background:#121418; }
.kksx-media{ position:absolute; inset:0; z-index:-1; }
.kksx-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.kksx-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,16,20,.94) 0%, rgba(14,16,20,.74) 45%, rgba(14,16,20,.5) 100%); }
.kk-sec--x .head .kicker{ display:flex; align-items:center; gap:12px; color:var(--gold-l); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.kk-sec--x .head .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.kk-sec--x .h2{ color:#fff; font-size:clamp(2.4rem, 1.2rem + 3.4vw, 4.4rem); line-height:1.02; letter-spacing:-.02em; }
.kk-sec--x .h2 .em{ color:var(--gold-l); }
.kk-sec--x .sub{ color:rgba(255,255,255,.82); }
.kk-sec--x .btn--line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.kk-sec--x .btn--line:hover{ border-color:rgba(255,255,255,.7); }
.kk-sec--x .kk-form{ box-shadow:0 60px 100px -40px rgba(0,0,0,.85); }

/* Große Kundenstimme */
.quote--x{ background:#17191E; }
.quote--x .quote-mark{ margin-bottom:38px; font-size:6rem; color:var(--gold-l); }
.quote--x .quote-text{ font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); line-height:1.15; }
.quote--x .quote-by .gw-g{ display:grid; place-items:center; border-radius:50%; background:#fff; }
.quote--x .quote-by .gw-stars{ display:inline-flex; gap:2px; color:#F4B63F; }
.quote--x .quote-by .gw-stars .ic{ width:15px; height:15px; }

/* Textblöcke der Ortsseiten: redaktionell statt Kästen */
.textblocks--x.sec--dark2{ background:#17191E; }
.textblocks--x .cards{ display:grid; gap:48px clamp(40px, 6vw, 96px); }
@media (min-width:900px){ .textblocks--x .cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.textblocks--x .tcard, .textblocks--x.textblocks--alt .tcard{ padding:32px 0 0; border:0; border-top:1px solid rgba(20,23,28,.14); border-radius:0; background:none; }
.textblocks--x.sec--dark2 .tcard{ border-top-color:rgba(255,255,255,.16); }
.textblocks--x .tcard:hover{ transform:none; }
.textblocks--x .tnum{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:2.6rem; line-height:1; letter-spacing:0; margin-bottom:16px; }
.textblocks--x.sec--dark2 .tnum{ color:var(--gold-l); }
.textblocks--x .tcard .h2{ font-size:clamp(1.6rem, 1.25rem + 1vw, 2.2rem); line-height:1.15; }
.textblocks--x .tcard .txt + .txt{ margin-top:14px; }
.textblocks--x .tcard .txt{ line-height:1.75; }

/* Ratgeber: Themenliste */
.themen--x .themen-list{ gap:0; border-top:1px solid rgba(20,23,28,.12); }
.themen--x .themen-list a{ min-height:0; gap:22px; padding:20px 2px; border:0; border-bottom:1px solid rgba(20,23,28,.12); border-radius:0; background:none; transition:padding .4s var(--ease), border-color .25s; }
.themen--x .themen-list a:hover{ transform:none; box-shadow:none; padding-left:12px; border-bottom-color:var(--accent); }
.themen--x .th-n{ flex:0 0 auto; width:auto; height:auto; background:none; color:var(--accent-ink); font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:2.3rem; line-height:1; }
.themen--x .th-t small{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.themen--x .th-t b{ font-family:'Quattrocento',Georgia,serif; font-size:1.25rem; }

/* Ratgeber-Artikel: Leselayout */
.article--x .article-grid{ gap:clamp(40px, 6vw, 104px); }
.article--x .prose{ counter-reset:art; }
.article--x .prose > .kicker{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; }
.article--x .prose > .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.article--x .prose .txt--lead{ font-family:'Quattrocento',Georgia,serif; font-size:clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height:1.6; color:var(--ink); }
.article--x .prose > .kicker + .txt--lead::first-letter{ float:left; margin:.06em .12em 0 0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:4.4em; line-height:.8; color:var(--accent-ink); }
.article--x .prose .h3{ counter-increment:art; margin-top:52px; padding-top:24px; border-top:1px solid rgba(20,23,28,.1); font-family:'Quattrocento',Georgia,serif; }
.article--x .prose .h3::before{ content:counter(art, decimal-leading-zero); display:block; margin-bottom:8px; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.7rem; color:var(--accent-ink); }
.article--x .prose .txt{ line-height:1.8; }
.article--x .prose a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:3px; }
.article--x .prose .checks{ gap:0; margin-top:22px; border-top:1px solid rgba(20,23,28,.12); }
.article--x .prose .checks li{ padding:14px 2px; border:0; border-bottom:1px solid rgba(20,23,28,.12); border-radius:0; background:none; font-weight:600; }
.article--x .prose .checks li:hover{ transform:none; }
.article--x .acard{ border:0; background:#1F2228; box-shadow:0 40px 80px -44px rgba(20,23,28,.6); }
.article--x .acard:hover{ transform:none; }
.article--x .aperson{ border-bottom-color:rgba(255,255,255,.12); }
.article--x .aperson img{ width:64px; height:64px; border-radius:50%; }
.article--x .aperson-t b, .article--x .acard .h4{ color:#fff; }
.article--x .aperson-t small{ color:rgba(255,255,255,.6); }
.article--x .acard .kicker{ color:var(--gold-l); }
.article--x .acard .txt{ color:rgba(255,255,255,.76); }
.article--x .acard .btn--line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }

/* Ratgeber: weitere Artikel als Bildkarten auf Dunkel */
.ratgeber--dark{ background:#17191E; }
.ratgeber--dark .head{ max-width:780px; margin-left:0; text-align:left; }
.ratgeber--dark .rcard{ position:relative; justify-content:flex-end; min-height:clamp(380px, 32vw, 460px); border:0; border-radius:18px; background:#1F2228; }
.ratgeber--dark .rcard:hover{ transform:none; }
.ratgeber--dark .rcard-img{ position:absolute; inset:0; aspect-ratio:auto; }
.ratgeber--dark .rcard-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,16,20,.95) 0%, rgba(14,16,20,.55) 48%, rgba(14,16,20,.12) 100%); }
.ratgeber--dark .rcard-img .ki{ top:14px; bottom:auto; left:14px; }
.ratgeber--dark .rcard-body{ position:relative; z-index:1; flex:none; padding:26px; }
.ratgeber--dark .rcard .h3{ font-size:1.35rem; }
.ratgeber--dark .rcard .rtxt{ color:rgba(255,255,255,.76); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ratgeber--dark .rcard .kicker{ color:var(--gold-l); }

/* Kontakt: Öffnungszeiten und Anfahrt */
.hoursec--x{ background:#17191E; }
.hoursec--x .head .kicker{ display:flex; align-items:center; gap:12px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.hoursec--x .head .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.hoursec--x .hours{ gap:0; max-width:none; border-top:1px solid rgba(255,255,255,.12); }
.hoursec--x .hours li{ padding:17px 2px; border:0; border-bottom:1px solid rgba(255,255,255,.12); border-radius:0; background:none; font-size:1rem; }
.hoursec--x .hours li b{ font-family:'Quattrocento',Georgia,serif; font-size:1.12rem; color:var(--gold-l); }
.hoursec--x .map{ min-height:480px; border-radius:20px; }
.hoursec--x .map-img{ filter:saturate(.8) brightness(.45); }
.hoursec--x .txt{ margin-top:20px; color:rgba(255,255,255,.72); }
@media (max-width:599px){ .cta--x .h2{ font-size:var(--fs-h2); } }
@media (max-width:599px){ .smap-cap{ left:10px; right:10px; bottom:10px; gap:2px 8px; padding:9px 13px; font-size:.76rem; } .smap-cap b{ font-size:.88rem; } }

/* Leistungs-Übersicht: Paneele auf Weiß, damit sie sich vom dunklen Hero absetzen (Zebra) */
.services--panels.sec--white{ background:#fff; }
.services--panels.sec--white .btn--line{ color:var(--ink); border-color:var(--line); }
.services--panels.sec--white .btn--line:hover{ border-color:rgba(20,23,28,.35); }
@media (min-width:1100px){ .services--panels .scard .h3, .services--panels .scard .h3 a{ color:#fff; } }

/* Footer: Blitzwebsite-Logo grau wie die übrigen Texte, farbig erst beim Überfahren */
.ftr-badge img{ filter:brightness(0) invert(1); opacity:.5; transition:filter .3s ease, opacity .3s ease; }
.ftr-badge:hover img, .ftr-badge:focus-visible img{ filter:none; opacity:1; }

/* ─── Ablauf als Showroom-Story (Startseite, 23.10.) ─── */
.story-grid{ display:grid; gap:40px; }
.story-stage{ display:none; }
.story-copy .head{ margin-bottom:0; }
.story-copy .kicker{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.story-copy .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.story-copy .h2{ font-size:clamp(2.1rem, 1.2rem + 2.6vw, 3.6rem); line-height:1.04; letter-spacing:-.015em; }
.story-steps{ list-style:none; margin:32px 0 36px; padding:0; }
.story-steps > li{ padding:28px 0; border-top:1px solid var(--line); }
.story-mimg{ position:relative; overflow:hidden; aspect-ratio:4/3; margin:0 0 22px; border-radius:18px; background:#1F2228; }
.story-mimg img{ width:100%; height:100%; object-fit:cover; }
.story-mimg figcaption{ position:absolute; left:14px; bottom:14px; padding:6px 14px; border-radius:999px; background:rgba(18,20,24,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:.8rem; letter-spacing:.04em; }
.story-n{ display:block; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:3.2rem; line-height:.9; color:var(--accent-ink); }
.story-t h3{ margin-top:10px; font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.5rem); line-height:1.1; color:var(--ink); }
.story-t p{ max-width:36ch; margin-top:12px; font-size:1.08rem; line-height:1.75; color:var(--body); }
.story-copy > .btn{ margin-top:4px; }
@media (min-width:600px) and (max-width:1023px){
  .story-steps{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:32px; }
}
@media (min-width:1024px){
  .story-grid{ grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr); gap:clamp(64px, 7vw, 128px); align-items:start; }
  .story-stage{ display:block; position:sticky; top:calc(var(--hdr-h) + var(--kb, 0px) + 40px); isolation:isolate; margin:14px 0 0 14px; }
  .story-stage::before{ content:""; position:absolute; z-index:-1; inset:-14px 14px 14px -14px; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius:32px; }
  .story-frame{ position:relative; isolation:isolate; overflow:hidden; height:min(calc(100vh - var(--hdr-h) - var(--kb, 0px) - 110px), 820px); min-height:540px; border-radius:28px; background:#1F2228; box-shadow:0 60px 110px -60px rgba(20,23,28,.6); }
  .story-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:inset(100% 0 0 0); transform:scale(1.12); }
  .story-frame img.is-under{ clip-path:inset(0); transform:none; }
  .story-frame img.is-on{ clip-path:inset(0); transform:none; transition:clip-path 1.15s cubic-bezier(.7, 0, .2, 1), transform 2.6s var(--ease); }
  .story-frame::after{ content:""; position:absolute; z-index:50; inset:auto 0 0; height:40%; background:linear-gradient(0deg, rgba(14,16,20,.66), transparent); pointer-events:none; }
  .story-hud{ position:absolute; z-index:60; left:32px; right:32px; bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; color:#fff; }
  .story-cap{ display:flex; align-items:baseline; gap:16px; }
  .story-cap b{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:3.4rem; line-height:.8; color:var(--gold-l); }
  .story-cap span{ font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.88); }
  .story-bars{ list-style:none; display:flex; gap:6px; margin:0 0 8px; padding:0; }
  .story-bars li{ position:relative; overflow:hidden; width:36px; height:2px; border-radius:2px; background:rgba(255,255,255,.3); }
  .story-bars li::after{ content:""; position:absolute; inset:0; background:var(--gold-l); transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--ease); }
  .story-bars li.is-on::after, .story-bars li.is-done::after{ transform:scaleX(1); }
  .story-mimg{ display:none; }
  .story-steps{ position:relative; margin:24px 0 40px; padding-left:40px; }
  .story-steps::before, .story-steps::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line); }
  .story-steps::after{ width:2px; left:-.5px; background:var(--accent); transform:scaleY(var(--p, 0)); transform-origin:50% 0; }
  .story-steps > li{ display:grid; grid-template-columns:88px minmax(0, 1fr); align-content:center; align-items:start; min-height:min(48vh, 440px); padding:40px 0; border-top:0; }
  .story-n{ font-size:4.2rem; color:transparent; -webkit-text-stroke:1px rgba(28,28,28,.28); transition:color .6s ease, -webkit-text-stroke-color .6s ease; }
  .story-steps > li.is-on .story-n{ color:var(--accent-ink); -webkit-text-stroke-color:transparent; }
  .story-t{ opacity:.3; transform:translateY(10px); transition:opacity .6s ease, transform .9s var(--ease); }
  .story-steps > li.is-on .story-t{ opacity:1; transform:none; }
  .story-t h3{ margin-top:4px; }
}
@media (prefers-reduced-motion:reduce){
  .story-frame img, .story-frame img.is-on{ transition:none; transform:none; }
  .story-t{ transform:none; transition:none; }
}

/* ─── Impressum, Datenschutz, Bewertung im Premium-Stil (23.10.) ─── */
/* kompakter Foto-Hero für die Rechtstexte */
.hero--legal .hero-grid{ min-height:clamp(460px, 58vh, 620px); padding-bottom:64px; }
.hero--legal .h1{ -webkit-hyphens:manual; hyphens:manual; }

/* Abschnitte: goldene Ziffer, Überschrift, Text, Haarlinie mit Goldansatz */
.lx-sec{ position:relative; padding:32px 0 38px; border-top:1px solid var(--line); }
.lx-sec::before{ content:""; position:absolute; left:0; top:-1px; width:40px; height:1px; background:var(--accent); }
.lx-n{ display:block; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:2.4rem; line-height:.9; color:var(--accent-ink); }
.lx-h{ margin-top:12px; font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:clamp(1.3rem, 1.1rem + .6vw, 1.7rem); line-height:1.2; color:var(--ink); }
.lx-sec p{ margin-top:12px; font-size:1.0625rem; line-height:1.75; color:var(--body); overflow-wrap:break-word; }

/* Impressum: Angaben als Kacheln */
.lx-tiles{ display:grid; column-gap:clamp(32px, 4vw, 64px); }
@media (min-width:640px){ .lx-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1024px){ .lx-tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* Datenschutz: Inhaltsverzeichnis links, Text rechts */
.lx-grid{ display:grid; gap:40px; }
.lx-body{ max-width:74ch; }
.lx-body .lx-sec{ scroll-margin-top:calc(var(--hdr-h) + var(--kb, 0px) + 28px); }
.lx-toc{ padding:26px 28px 20px; border-radius:18px; background:var(--cream); }
.lx-toc-h{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.lx-toc ol{ list-style:none; display:grid; margin:12px 0 0; padding:0; }
.legal .lx-toc a{ display:flex; align-items:baseline; gap:12px; padding:8px 0; font-size:.95rem; line-height:1.35; color:var(--body); text-decoration:none; transition:color .2s; }
.lx-toc a span{ flex:none; min-width:22px; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.15rem; color:var(--muted); transition:color .2s; }
.legal .lx-toc a:hover, .legal .lx-toc a.is-on{ color:var(--ink); }
.lx-toc a:hover span, .lx-toc a.is-on span{ color:var(--accent-ink); }
@media (min-width:600px) and (max-width:1023px){ .lx-toc ol{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:28px; } }
@media (min-width:1024px){
  .lx-grid{ grid-template-columns:280px minmax(0, 1fr); gap:clamp(56px, 6vw, 112px); align-items:start; }
  .lx-aside{ position:sticky; top:calc(var(--hdr-h) + var(--kb, 0px) + 40px); }
}

/* Bewertung: Küchenfoto links, Sterne und Rückmeldung rechts */
.rate-x{ display:grid; background:var(--cream); }
.rx-media{ position:relative; overflow:hidden; min-height:clamp(300px, 42vh, 440px); background:#121418; }
.rx-media picture{ position:absolute; inset:0; }
.rx-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.rx-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,16,20,.5) 0%, rgba(14,16,20,0) 32%), linear-gradient(0deg, rgba(14,16,20,.78) 0%, rgba(14,16,20,0) 52%); pointer-events:none; }
.rx-quote{ position:absolute; z-index:1; left:var(--gut); right:var(--gut); bottom:24px; margin:0; color:#fff; }
.rx-quote blockquote{ margin:0; max-width:20ch; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500; font-size:clamp(1.45rem, 1.05rem + 1.5vw, 2.6rem); line-height:1.12; text-wrap:balance; }
.rx-quote figcaption{ display:flex; align-items:center; gap:12px; margin-top:14px; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-l); }
.rx-quote figcaption::before{ content:""; width:28px; height:1px; background:currentColor; }
.rx-panel{ display:flex; align-items:center; padding:44px var(--gut) 72px; }
.rx-in{ width:100%; max-width:560px; }
.rate-x .crumbs{ margin-bottom:22px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.rate-x .crumbs a{ color:var(--body); }
.rate-x .crumbs a:hover{ color:var(--ink); }
.rate-x .crumbs span[aria-hidden]{ color:var(--accent); }
.rate-x .kicker{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.rate-x .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.rate-x .h1{ color:var(--ink); font-size:clamp(2.2rem, 1.2rem + 3vw, 4.2rem); line-height:1.04; letter-spacing:-.02em; }
.rate-x .h1 .em{ color:var(--accent-ink); }
.rate-x .sub{ margin:18px 0 0; max-width:32em; }
.rate-x .stars-pick{ justify-content:flex-start; gap:clamp(2px, .8vw, 8px); margin:34px 0 8px; }
.rate-x .stars-pick button{ width:clamp(52px, 14vw, 66px); height:clamp(52px, 14vw, 66px); color:rgba(20,23,28,.13); }
.rate-x .stars-pick button .ic{ width:82%; height:82%; }
.rate-x .stars-pick button.is-hot, .rate-x .stars-pick button.is-set{ color:var(--gold); }
.rx-scale{ display:flex; justify-content:space-between; max-width:calc(5 * clamp(52px, 14vw, 66px) + 4 * clamp(2px, .8vw, 8px)); font-size:.8rem; color:var(--muted); }
.rate-x .rate-panel{ margin-top:30px; }
.rate-x .acard, .rate-x .fb{ max-width:none; margin:0; border:0; border-radius:20px; background:#fff; box-shadow:0 40px 80px -48px rgba(20,23,28,.45); }
.rate-x .acard--c{ align-items:flex-start; text-align:left; }
@media (min-width:1024px){
  .rate-x{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); min-height:max(100vh, 760px); }
  .rx-media{ min-height:0; }
  .rx-quote{ left:clamp(32px, 4vw, 64px); right:clamp(32px, 4vw, 64px); bottom:clamp(36px, 5vw, 64px); }
  .rx-panel{ padding:calc(var(--hdr-h) + var(--kb, 0px) + 56px) clamp(40px, 6vw, 112px) 80px; }
}

/* ─── 404 im Premium-Stil (23.10.) ─── */
.nf-big{ position:absolute; right:clamp(16px, 4vw, 72px); top:50%; transform:translateY(-44%); font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:clamp(9rem, 22vw, 22rem); line-height:.8; letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1px rgba(226,195,138,.5); pointer-events:none; user-select:none; }
@media (max-width:1023px){ .nf-big{ top:calc(var(--hdr-h) + var(--kb, 0px) + 28px); transform:none; font-size:clamp(6.5rem, 18vw, 11rem); -webkit-text-stroke-color:rgba(226,195,138,.4); } }
.nf-ways .wrap{ display:grid; gap:36px; }
.nf-ways .head{ margin-bottom:0; }
.nf-ways .kicker{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.nf-ways .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.nf-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.nf-list a{ display:grid; grid-template-columns:48px minmax(0, 1fr) auto; align-items:center; gap:16px; padding:26px 4px; border-bottom:1px solid var(--line); color:var(--ink); transition:padding .4s var(--ease), border-color .3s; }
.nf-list a:hover{ padding-left:14px; border-bottom-color:var(--accent); }
.nf-n{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.9rem; line-height:1; color:var(--accent-ink); }
.nf-t b{ display:block; font-family:'Quattrocento',Georgia,serif; font-weight:700; font-size:clamp(1.25rem, 1rem + .9vw, 1.75rem); line-height:1.2; }
.nf-t small{ display:block; margin-top:6px; font-size:.95rem; line-height:1.5; color:var(--body); }
.nf-list .ic{ width:22px; height:22px; color:var(--accent-ink); transition:transform .3s var(--ease); }
.nf-list a:hover .ic{ transform:translateX(4px); }
@media (min-width:1024px){ .nf-ways .wrap{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(56px, 7vw, 120px); align-items:start; } }

/* ═══ Buttons neu (23.10.): flaches Messing statt Goldverlauf, keine Prägekante, kein Textschatten.
   Eckig, kein Schimmer, kein Pfeil (Maxim 20.10.), weiße Schrift auf Messing (Maxim 14.10., Kontrast 4,8:1) ═══ */
:root{ --brass:#946B22; --brass-h:#7E5B1C; }
.btn{ --bh:54px; border-radius:2px; padding:0 30px; gap:10px; font-family:'Quattrocento Sans',system-ui,sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.2;
  transition:background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .5s var(--ease), transform .5s var(--ease); }
.btn--lg{ --bh:56px; padding:0 34px; font-size:.82rem; }
.btn--sm{ --bh:44px; padding:0 20px; font-size:.74rem; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:none; transition-duration:.1s; }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn > .ic--end{ width:16px; height:16px; padding:0; margin:0; border-radius:0; background:none; box-shadow:none; }
/* Hauptbutton */
.btn.btn--accent{ background-color:var(--brass); background-image:none; border-color:var(--brass); color:#fff; text-shadow:none; box-shadow:none; }
.btn.btn--accent:hover{ background-color:var(--brass-h); border-color:var(--brass-h); box-shadow:0 16px 30px -18px rgba(126,91,28,.75); }
/* noch nicht wählbar: neutral statt ausgewaschenem Gold */
.btn.btn--accent:disabled, .btn.btn--accent[disabled]{ background-color:rgba(28,28,28,.06); border-color:rgba(28,28,28,.1); color:rgba(28,28,28,.38); box-shadow:none; opacity:1; transform:none; cursor:not-allowed; }
:is(.sec--dark, .sec--dark2, .hero, .hdr, .thx) .btn.btn--accent:disabled{ background-color:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.42); }
/* Zweitbutton auf Dunkel: Kontur, beim Überfahren weiß gefüllt */
.btn.btn--ghost{ background-color:transparent; border-color:rgba(255,255,255,.45); box-shadow:none; }
.btn.btn--ghost:hover{ background-color:#fff; border-color:#fff; color:var(--ink); }
/* Zweitbutton auf Hell: Kontur ohne Verlauf; Farben bleiben je Umgebung, Rahmen nimmt beim Überfahren die Schriftfarbe an */
.btn.btn--line{ background-color:transparent; background-image:none; box-shadow:none; }
.btn.btn--line:hover{ border-color:currentColor; box-shadow:none; }

/* ═══ Handy-Hero (23.10.): Küche oben hell und scharf im Hochformat, Schrift darunter auf Graphit, ein klarer Hauptbutton ═══ */
.hs-call-k{ display:none; }
/* Google-Vertrauenszeile: am Handy statt der Dachzeile, damit Google und Sterne ohne Scrollen zu sehen sind */
.hs-rate{ display:none; }
@media (max-width:767px){
  .hero--split{ --hs-img:min(133.333vw, calc(var(--hero-h, 100vh) * .64)); }
  .hero--split .hs-media{ inset:0 0 auto; height:var(--hs-img); height:round(down, var(--hs-img), 1px); overflow:hidden; } /* Zoom beim Laden bleibt im Bildbereich, ganze Pixel gegen Haarlinie an der Kante */
  .hero--split .hs-media img{ object-position:50% 45%; }
  .hero--split .hs-shade{ background:
    linear-gradient(180deg, rgba(14,16,20,.6) 0%, rgba(14,16,20,.16) 17%, rgba(14,16,20,0) 28%),
    linear-gradient(0deg, #121418 0%, rgba(18,20,24,.93) 14%, rgba(18,20,24,.62) 25%, rgba(18,20,24,.24) 35%, rgba(18,20,24,0) 46%); }
  .hero--split .hs-grid{ padding-top:calc(var(--hs-img) - 92px); padding-bottom:64px; }
  .hs-h1{ font-size:min(9.4vw, 2.6rem); line-height:1.04; }
  .hs-h1 .em{ font-size:1.24em; line-height:1; padding-bottom:.08em; }
  .hero--split .hero-lead{ margin-top:16px; font-size:1rem; line-height:1.6; color:rgba(255,255,255,.76); }
  .hero--split .hero-ctas{ gap:6px; margin-top:26px; }
  .hero--split .hero-ctas .btn--ghost{ --bh:48px; justify-content:flex-start; padding:0; border-color:transparent; background:none; font-size:.98rem; letter-spacing:.03em; text-transform:none; color:#fff; }
  .hero--split .hero-ctas .btn--ghost:hover{ background:none; border-color:transparent; color:#fff; transform:none; }
  .hero--split .hero-ctas .btn--ghost .ic{ color:var(--acc-dt); }
  .hs-call-k{ display:inline; font-weight:400; color:rgba(255,255,255,.62); }
  .hs-kicker::before, .hs-kick-t{ display:none; }
  .hs-rate{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
  .hs-rate .hs-g{ width:24px; height:24px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
  .hs-rate .hs-g svg{ width:14px; height:14px; }
  .hs-rate .gw-stars{ display:inline-flex; gap:1px; color:#F4B63F; }
  .hs-rate .gw-stars .ic{ width:14px; height:14px; }
  .hs-rate-t{ color:rgba(255,255,255,.8); }
}

/* ═══ Handymenü „Salon“ (23.10.): Vollbild in Graphit, große Serifenschrift, nummeriert, Unterpunkte klappen auf ═══ */
html.mm-lock, html.mm-lock body{ overflow:hidden; }
.mm-trig{ display:flex; align-items:center; gap:12px; margin-left:auto; height:44px; padding:0 2px 0 10px; border:0; background:none; color:#fff; }
.mm-trig-t{ font:700 .72rem/1 'Quattrocento Sans',sans-serif; letter-spacing:.22em; text-transform:uppercase; }
.mm-lines{ display:grid; gap:6px; justify-items:end; width:26px; }
.mm-lines i{ display:block; width:26px; height:1.5px; background:currentColor; transition:width .45s var(--ease); }
.mm-lines i:last-child{ width:16px; background:var(--gold-l); }
.mm-trig:hover .mm-lines i:last-child{ width:26px; }
.mm{ position:fixed; inset:0; z-index:130; display:flex; flex-direction:column; padding:0 24px calc(20px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; background:#0F1114; color:#fff; isolation:isolate; opacity:0; transition:opacity .45s ease; }
.mm::-webkit-scrollbar{ display:none; }
.mm[hidden]{ display:none !important; }
html.mm-open .mm{ opacity:1; }
@media (min-width:1024px){ .mm-trig, .mm{ display:none !important; } }
.mm-bg{ position:absolute; left:0; right:0; bottom:0; height:70%; z-index:-1; pointer-events:none; }
.mm-bg img{ width:100%; height:100%; object-fit:cover; opacity:.2; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 70%); mask-image:linear-gradient(180deg, transparent 0%, #000 70%); }
.mm-top{ display:flex; align-items:center; justify-content:space-between; flex:none; height:64px; margin-top:calc(var(--kb, 0px) + 10px); }
.mm-logo img{ height:46px; width:auto; }
.mm-x{ display:flex; align-items:center; gap:12px; height:44px; margin-right:-2px; padding:0 2px 0 10px; border:0; background:none; color:#fff; font:700 .72rem/1 'Quattrocento Sans',sans-serif; letter-spacing:.22em; text-transform:uppercase; }
.mm-x-i{ position:relative; width:26px; height:26px; }
.mm-x-i i{ position:absolute; left:0; top:50%; width:26px; height:1.5px; margin-top:-.75px; background:currentColor; transform:rotate(45deg); }
.mm-x-i i:last-child{ transform:rotate(-45deg); background:var(--gold-l); }
.mm-nav{ margin-top:clamp(14px, 3.5svh, 36px); }
.mm-list{ border-top:1px solid rgba(255,255,255,.08); }
.mm-it{ border-bottom:1px solid rgba(255,255,255,.08); }
.mm-row{ display:flex; align-items:baseline; gap:16px; width:100%; padding:16px 0 14px; border:0; background:none; color:#fff; text-align:left; }
.mm-no{ flex:none; width:22px; font:700 .66rem/1 'Quattrocento Sans',sans-serif; letter-spacing:.12em; color:var(--gold-l); transform:translateY(-.6em); }
.mm-t{ font-family:'Quattrocento',Georgia,serif; font-size:clamp(1.7rem, 1.1rem + 2.7vw, 2.15rem); line-height:1.05; letter-spacing:-.01em; transition:color .35s; }
.mm-row .ic{ margin-left:auto; align-self:center; width:18px; height:18px; color:var(--gold-l); transition:transform .45s var(--ease); }
.mm-row[aria-expanded="true"] .ic{ transform:rotate(180deg); }
.mm-row[aria-expanded="true"] .mm-t, .mm-row:hover .mm-t, .mm-row.is-active .mm-t{ color:var(--gold-l); }
.mm-tag{ margin-left:auto; align-self:center; font:700 .6rem/1.3 'Quattrocento Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); text-align:right; }
.mm-sub{ display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .5s var(--ease), visibility 0s linear .5s; }
[data-mm-acc][aria-expanded="true"] + .mm-sub{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .5s var(--ease), visibility 0s; }
.mm-sub > div{ min-height:0; overflow:hidden; }
.mm-subl{ display:grid; padding:0 0 16px 38px; }
.mm-subl a{ display:flex; align-items:center; gap:12px; min-height:42px; font-size:1.02rem; line-height:1.3; color:rgba(255,255,255,.78); transition:color .3s; }
.mm-subl a::before{ content:""; flex:none; width:14px; height:1px; background:var(--gold); transition:width .35s var(--ease); }
.mm-subl a:hover{ color:#fff; }
.mm-subl a:hover::before{ width:22px; }
.mm-subl .mm-all{ color:var(--gold-l); font-weight:700; }
.mm-subl .mm-all::before{ display:none; }
.mm-subl .ic{ width:16px; height:16px; }
.mm-foot{ margin-top:auto; padding-top:26px; }
.mm-cta{ width:100%; }
.mm-quick{ display:grid; grid-template-columns:repeat(3, 1fr); margin-top:10px; border:1px solid rgba(255,255,255,.1); }
.mm-quick a{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px 12px; font:700 .64rem/1 'Quattrocento Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82); transition:background-color .3s; }
.mm-quick a:hover{ background:rgba(255,255,255,.04); }
.mm-quick a + a{ border-left:1px solid rgba(255,255,255,.1); }
.mm-quick .ic{ width:20px; height:20px; color:var(--gold-l); }
.mm-addr{ margin-top:12px; text-align:center; font-size:.8rem; letter-spacing:.04em; color:rgba(255,255,255,.48); }
/* gestaffelter Auftritt */
.mm-top, .mm-it, .mm-foot{ opacity:0; transition:opacity .45s ease, transform .7s var(--ease); }
.mm-it, .mm-foot{ transform:translateY(18px); }
html.mm-open .mm-top, html.mm-open .mm-it, html.mm-open .mm-foot{ opacity:1; transform:none; transition-delay:calc(.06s + var(--i, 0) * .05s); }

/* ═══ Unterseiten auf Startseiten-Niveau (23.10.): Handy-Hero mit Bild oben, Text-Bild-Sektionen mit randlosem Bild ═══ */
@media (max-width:767px){
  .hero--subx{ --hs-img:min(133.333vw, calc(var(--hero-h, 100vh) * .56)); }
  .hero--subx .hero-media{ inset:0 0 auto; height:var(--hs-img); height:round(down, var(--hs-img), 1px); overflow:hidden; }
  .hero--subx .hero-shade{ background:
    linear-gradient(180deg, rgba(14,16,20,.6) 0%, rgba(14,16,20,.16) 17%, rgba(14,16,20,0) 28%),
    linear-gradient(0deg, #121418 0%, rgba(18,20,24,.93) 14%, rgba(18,20,24,.62) 25%, rgba(18,20,24,.24) 35%, rgba(18,20,24,0) 46%); }
  .hero--subx .hero-grid{ min-height:0; padding-top:calc(var(--hs-img) - 88px); padding-bottom:48px; }
  .hero--subx .crumbs{ margin-bottom:14px; }
  .hero--subx .hero-kicker{ display:none; } /* Brotkrumen nennen den Ort schon, so passt der Button ins erste Bild */
  .hero--subx .hero-ctas{ gap:4px; }
  .hero--subx .hero-ctas .btn--ghost{ --bh:46px; justify-content:flex-start; padding:0; border-color:transparent; background:none; font-size:.98rem; letter-spacing:.03em; text-transform:none; color:#fff; }
  .hero--subx .hero-ctas .btn--ghost:hover{ background:none; border-color:transparent; color:#fff; transform:none; }
  .hero--subx .hero-ctas .btn--ghost .ic{ color:var(--acc-dt); }
}
/* Text-Bild: Bild randlos bis an den Rand, feine Goldkante an der Innenseite */
.splitsec--x .simg:not(.simg--map)::after{ content:""; position:absolute; z-index:1; pointer-events:none; }
@media (min-width:1024px){
  .splitsec--x:has(.simg:not(.simg--map)){ position:relative; overflow:hidden; padding-block:clamp(96px, 8vw, 140px); }
  .splitsec--x:has(.simg:not(.simg--map)) .split{ position:static; min-height:clamp(480px, 38vw, 620px); }
  .splitsec--x .simg:not(.simg--map){ position:absolute; top:0; bottom:0; right:0; width:50%; margin:0; aspect-ratio:auto; overflow:hidden; border-radius:0; }
  .splitsec--x.splitsec--rev .simg:not(.simg--map){ right:auto; left:0; }
  .splitsec--x .simg:not(.simg--map)::before{ display:none; }
  .splitsec--x .simg:not(.simg--map)::after{ top:0; bottom:0; left:0; width:3px; background:linear-gradient(180deg, transparent, var(--gold-l) 30%, var(--brass) 70%, transparent); }
  .splitsec--x.splitsec--rev .simg:not(.simg--map)::after{ left:auto; right:0; }
  .splitsec--x .simg:not(.simg--map) img{ border-radius:0; box-shadow:none; }
  .splitsec--x:has(.simg:not(.simg--map)) .scopy{ grid-column:1; padding-right:clamp(0px, 2vw, 32px); }
  .splitsec--x.splitsec--rev:has(.simg:not(.simg--map)) .scopy{ grid-column:2; padding-right:0; padding-left:clamp(0px, 2vw, 32px); }
}
@media (max-width:1023px){
  .splitsec--x .simg:not(.simg--map){ margin:4px calc(var(--gut) * -1) 0; border-radius:0; aspect-ratio:4/3; }
  .splitsec--x .simg:not(.simg--map)::before{ display:none; }
  .splitsec--x .simg:not(.simg--map) img{ border-radius:0; box-shadow:none; }
  .splitsec--x .simg:not(.simg--map)::after{ left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, transparent, var(--gold-l) 30%, var(--brass) 70%, transparent); }
}
/* Material-Sektion im selben Stil: Musterwand randlos rechts (danach folgt ein Bild links) */
@media (min-width:1024px){
  .palette--x{ position:relative; overflow:hidden; }
  .palette--x .palx-grid{ position:static; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .palette--x .palx-photo{ position:absolute; top:0; bottom:0; right:0; width:50%; margin:0; aspect-ratio:auto; border-radius:0; box-shadow:none; }
  .palette--x .palx-photo img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
  .palette--x .palx-photo::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:3px; background:linear-gradient(180deg, transparent, var(--gold-l) 30%, var(--brass) 70%, transparent); }
  .palette--x .palx-copy{ grid-column:1; grid-row:1; padding-right:clamp(0px, 2vw, 32px); }
}
/* ═══ Übersichtsseiten, Ratgeber, Kontakt (23.10.): Bilder im Artikel, große Ortsliste, randloses Studiobild ═══ */
/* Ratgeber-Artikel: Bild nach dem Einstieg und in der Mitte, damit der Text nicht als Wand wirkt */
.article--x .art-fig{ position:relative; margin:44px 0 0; }
.article--x .art-fig img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:16px; box-shadow:0 40px 70px -48px rgba(20,23,28,.55); }
.article--x .art-fig figcaption{ display:flex; align-items:center; gap:12px; margin-top:14px; font-size:.86rem; line-height:1.5; color:var(--muted); }
.article--x .art-fig figcaption::before{ content:""; flex:none; width:32px; height:1px; background:var(--accent); }
.article--x .art-fig + .h3{ margin-top:44px; }
@media (min-width:1024px){ .article--x .art-fig img{ aspect-ratio:16/10; } }
@media (max-width:767px){
  .article--x .art-fig{ margin:36px calc(var(--gut) * -1) 0; }
  .article--x .art-fig img{ border-radius:0; box-shadow:none; }
  .article--x .art-fig figcaption{ padding-inline:var(--gut); }
}
/* Einzugsgebiete: Orte als große, nummerierte Zeilen */
.orte-hub--x .orx-list--rich{ counter-reset:ort; }
.orte-hub--x .orx-list--rich a{ counter-increment:ort; grid-template-columns:auto minmax(0, 1fr) auto; padding:26px 2px; }
.orte-hub--x .orx-list--rich a::before{ content:counter(ort, decimal-leading-zero); grid-column:1; grid-row:1 / span 3; align-self:start; margin-right:clamp(14px, 2vw, 26px); font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; font-size:1.6rem; line-height:1.1; color:var(--accent-ink); }
.orte-hub--x .orx-list--rich a .orx-km, .orte-hub--x .orx-list--rich a .orx-n, .orte-hub--x .orx-list--rich a .orx-d{ grid-column:2; }
.orte-hub--x .orx-list--rich a .orx-n{ font-size:clamp(1.4rem, 1.15rem + .8vw, 1.85rem); line-height:1.15; }
.orte-hub--x .orx-list--rich a .orx-n small{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* bleibt im Linktext, die Überschrift nennt es schon */
.orte-hub--x .orx-list--rich a .ic{ grid-column:3; grid-row:1 / span 3; align-self:center; box-sizing:content-box; padding:13px; border:1px solid rgba(20,23,28,.14); border-radius:50%; transition:transform .35s var(--ease), background .25s, border-color .25s, color .25s; }
.orte-hub--x .orx-list--rich a:is(:hover, :focus-visible) .ic{ background:var(--accent); border-color:var(--accent); color:#fff; }
@media (max-width:767px){
  .orte-hub--x .orx-list--rich a{ padding:22px 0; column-gap:12px; }
  .orte-hub--x .orx-list--rich a::before{ margin-right:2px; font-size:1.3rem; }
  .orte-hub--x .orx-list--rich a .ic{ padding:9px; }
}
/* Kontakt: Studiobild mit Karte randlos rechts, wie bei den Text-Bild-Sektionen */
@media (min-width:1024px){
  .hoursec--x{ position:relative; overflow:hidden; padding-block:clamp(96px, 8vw, 140px); }
  .hoursec--x .split{ position:static; min-height:clamp(440px, 34vw, 560px); }
  .hoursec--x .map{ position:absolute; top:0; bottom:0; right:0; width:50%; min-height:0; border-radius:0; box-shadow:none; }
  .hoursec--x .map::after{ content:""; position:absolute; z-index:2; top:0; bottom:0; left:0; width:3px; background:linear-gradient(180deg, transparent, var(--gold-l) 30%, var(--brass) 70%, transparent); pointer-events:none; }
  .hoursec--x .scopy{ grid-column:1; padding-right:clamp(0px, 2vw, 32px); }
}
@media (max-width:1023px){
  .hoursec--x .map{ margin:8px calc(var(--gut) * -1) 0; border-radius:0; box-shadow:none; }
}
/* Karten-Platzhalter auf abgedunkeltem Foto: zweiter Knopf war dunkel auf dunkel */
.map:has(.map-bg) .map__btns .btn--line{ color:#fff; border-color:rgba(255,255,255,.45); background:rgba(14,16,20,.25); }
.map:has(.map-bg) .map__btns .btn--line:hover{ border-color:#fff; background:rgba(14,16,20,.45); color:#fff; }
/* Bewertung: Button linksbündig wie der Text, Countdown zur Google-Bewertung */
.rate-x .acard--c .btn{ align-self:flex-start; }
.rx-redir{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; width:100%; margin-top:18px; font-size:.9rem; color:var(--muted); }
.rx-redir[hidden]{ display:none; }
.rx-bar{ flex:0 0 100%; height:2px; overflow:hidden; background:rgba(20,23,28,.08); }
.rx-bar i{ display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.rx-redir.is-run .rx-bar i{ transform:scaleX(1); transition:transform 3s linear; }
.rx-redir button{ padding:0; border:0; background:none; font:inherit; font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; cursor:pointer; }
/* ═══ Offboarding 23.10.2026: Logo größer, Countdown lesbarer, Material ohne Farbmuster, Marken mit Quooker und Franke ═══ */
.hdr-logo img{ height:54px; max-width:200px; }
.mm-logo img{ height:54px; }
@media (min-width:768px){ .hdr-logo img{ height:64px; max-width:240px; } }
@media (min-width:1024px) and (max-width:1200px){ .hdr-logo img{ height:58px; max-width:200px; } }
/* Countdown: Zeile darüber und Datum mit Uhrzeit darunter deutlich größer (Lilia) */
.kk-cd-k{ margin-bottom:16px; font-size:.95rem; letter-spacing:.12em; }
.kk-cd-when{ margin-top:18px; font-size:clamp(1.25rem, 1.05rem + .7vw, 1.5rem); color:#fff; }
@media (max-width:420px){ .kk-cd-k{ font-size:.82rem; letter-spacing:.08em; } }
/* Material: ein Kreis für alle RAL-Farben, ein Kreis für die Wunschmarke statt Herstellerpunkten */
.pal-sw--one li{ width:auto; min-width:72px; }
.palette--x .pal-sw--one li{ width:auto; }
.pal-ral{ background:conic-gradient(#C0392B, #E67E22, #F1C40F, #7DA453, #2E86AB, #3B4A8C, #7D4E8F, #C0392B) !important; }
.pal-wunsch{ position:relative; background:#1F2228 !important; }
.pal-wunsch::after{ content:"+"; position:absolute; inset:0; display:grid; place-items:center; font-size:1.3rem; font-weight:700; color:var(--gold-l); }
/* Marken als Schriftzug, wo kein Logo vorliegt */
.hs-brands .brand-word span, .abx-brands .brand-word span{ font-family:'Quattrocento Sans', sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.hs-brands .brand-word span{ color:rgba(255,255,255,.6); }
.abx-brands .brand-word span{ color:var(--muted); }
.abx-brands .brand-more{ font-size:.82rem; font-style:italic; color:var(--muted); }
.brands-note{ margin-top:12px; max-width:34ch; color:rgba(255,255,255,.72); }
@media (min-width:600px){ .brands-list{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.brands-list .bl-word b{ color:var(--ink); font-size:1.3rem; letter-spacing:.02em; }
.brands-list .bl-more{ background:transparent !important; border:1px dashed rgba(255,255,255,.35) !important; }
.brands-list .bl-more b{ color:#fff; font-size:1.1rem; }
.brands-list .bl-more small{ color:var(--gold-l); text-align:center; }
.kk-cd-uhr::before{ content:" · "; }
@media (max-width:520px){ .kk-cd-uhr{ display:block; margin-top:2px; } .kk-cd-uhr::before{ content:none; } }
/* Hero: Marken als Laufband unter Lilias Bogen, linke Spalte dadurch kürzer und mittig (24.10.) */
.hs-side{ display:grid; justify-items:center; gap:52px; width:min(72%, 300px); margin:0 auto; animation:hs-up 1.1s .3s var(--ease) both; }
.hs-side .hs-door{ width:100%; margin:0; animation:none; }
.hs-marq{ width:100%; display:grid; justify-items:center; gap:12px; }
.hs-marq-l{ display:flex; align-items:center; gap:12px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.hs-marq-l::before, .hs-marq-l::after{ content:""; width:22px; height:1px; background:color-mix(in srgb, var(--accent) 70%, transparent); }
.hs-marq-win{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.hs-marq-track{ display:flex; width:max-content; animation:hsMarq 26s linear infinite; }
.hs-marq:hover .hs-marq-track{ animation-play-state:paused; }
.hs-marq ul{ display:flex; align-items:center; gap:34px; margin:0; padding:0 34px 0 0; list-style:none; }
.hs-marq li{ flex:none; display:flex; align-items:center; height:22px; }
.hs-marq img{ height:16px; width:auto; filter:brightness(0) invert(1); opacity:.66; }
.hs-marq .brand-word span{ font-family:'Quattrocento Sans', sans-serif; font-weight:700; font-size:.84rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.66); }
@keyframes hsMarq{ to{ transform:translateX(-50%); } }
@media (min-width:1024px){ .hs-side{ width:clamp(260px, 21vw, 340px); gap:46px; margin:0 3vw 0 0; } .hero--split .hs-grid{ padding-bottom:40px; } }
@media (max-width:599px){ .hs-side{ width:min(80%, 320px); gap:48px; } }
@media (prefers-reduced-motion:reduce){ .hs-side{ animation:none; } .hs-marq-track{ animation:none; } .hs-marq ul[aria-hidden]{ display:none; } .hs-marq ul{ flex-wrap:wrap; justify-content:center; padding:0; gap:14px 24px; } .hs-marq-win{ -webkit-mask-image:none; mask-image:none; } }
/* Laufband lesbar: dunkle Kapsel wie Lilias Namensschild, nicht direkt auf dem hellen Foto (24.10.) */
.hs-side{ gap:40px; }
.hs-marq{ gap:10px; }
.hs-marq-l::before, .hs-marq-l::after{ display:none; }
.hs-marq-l{ color:rgba(255,255,255,.62); text-shadow:0 1px 8px rgba(0,0,0,.6); }
.hs-marq-win{ width:calc(100% + 28px); padding:12px 0; border-radius:999px; background:rgba(18,20,24,.84); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1); box-shadow:0 18px 40px -18px rgba(0,0,0,.7); -webkit-mask-image:none; mask-image:none; position:relative; }
.hs-marq-win::before, .hs-marq-win::after{ content:""; position:absolute; z-index:1; top:0; bottom:0; width:44px; pointer-events:none; }
.hs-marq-win::before{ left:0; border-radius:999px 0 0 999px; background:linear-gradient(90deg, rgba(18,20,24,1), rgba(18,20,24,0)); }
.hs-marq-win::after{ right:0; border-radius:0 999px 999px 0; background:linear-gradient(270deg, rgba(18,20,24,1), rgba(18,20,24,0)); }
.hs-marq img{ opacity:.82; }
.hs-marq .brand-word span{ color:rgba(255,255,255,.82); }
/* Google-Stimme im Hero kleiner */
.hs-voice .gw-quote{ font-size:clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height:1.35; }
.hs-voice .gw-quote em{ font-size:.76rem; margin-top:4px; }
.hs-voice .gw-quotes{ margin-top:10px; padding-left:16px; }
.hs-voice-top{ font-size:.72rem; }
.hs-trust{ margin-top:30px; padding-top:20px; }
/* Laufband ohne Kapsel (Dustin 24.10.): kein Hintergrund, weiche Ränder, Logos mit leichtem Schatten für Lesbarkeit */
.hs-marq-win{ width:calc(100% + 28px); padding:6px 0; border:0; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.hs-marq-win::before, .hs-marq-win::after{ display:none; }
.hs-marq img{ opacity:.9; filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.75)); }
.hs-marq .brand-word span{ color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,0,0,.75); }
/* Neubau-Grundriss nach Lilias Küche: Eichenflächen (Backofenblock, Theke) dezent gefüllt */
.plan .pl-oakf rect{ fill:rgba(196,154,74,.2); stroke:none; }
.draw-on .bpx-plan .pl-oakf{ opacity:0; }
.draw-on .bpx-plan.is-drawn .pl-oakf{ animation:pl-fade .9s 1.7s forwards; }
.plan .pl-wallf path{ fill:rgba(255,255,255,.14); stroke:none; }
.draw-on .bpx-plan .pl-wallf{ opacity:0; }
.draw-on .bpx-plan.is-drawn .pl-wallf{ animation:pl-fade .8s 1.2s forwards; }

/* Waldemar im Hero (25.10.2026): versetzte Bögen, Namen in einer Zeile darunter */
.hs-side:has(.hs-duo){ width:clamp(320px, 27vw, 420px); gap:76px; }
@media (max-width:1023px){ .hs-side:has(.hs-duo){ width:min(88%, 400px); } }
.hs-duo{ position:relative; container-type:inline-size; width:100%; aspect-ratio:1/1.08; margin-bottom:64px; }
.hs-duo .hs-door, .hs-owner{ position:absolute; margin:0; }
.hs-duo .hs-door{ top:0; right:0; width:68%; }
.hs-owner{ left:0; bottom:0; width:50%; z-index:2; }
.hs-duo .hs-door::before, .hs-owner::before{ content:""; position:absolute; inset:-10px; border:1px solid color-mix(in srgb, var(--gold-l) 70%, transparent); border-radius:999px 999px 6px 6px; pointer-events:none; }
.hs-duo .hs-door-in, .hs-owner-in{ background:linear-gradient(180deg, #E4E6E9, #C9CDD3); }
.hs-owner-in{ aspect-ratio:4/5.4; border-radius:999px 999px 4px 4px; overflow:hidden; box-shadow:0 34px 60px -22px rgba(0,0,0,.95), 0 0 0 7px #121418; }
.hs-owner-in img{ width:100%; height:100%; object-fit:cover; object-position:50% 10%; }
.hs-duo::after{ content:""; position:absolute; left:0; right:0; bottom:-12px; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-l) 60%, transparent) 20%, color-mix(in srgb, var(--gold-l) 60%, transparent) 80%, transparent); }
.hs-duo .hs-door-cap, .hs-owner-cap{ position:absolute; z-index:3; isolation:isolate; display:grid; gap:3px; margin:0; padding:0; white-space:nowrap; background:none; border:0; border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none; transform:none; text-shadow:0 1px 3px rgba(0,0,0,.55); }
/* Lesbarkeit der Namen über einen tieferen Verlauf im unteren Hero, ohne Fläche hinter dem Text */
@media (min-width:768px){ .hero--split:has(.hs-duo) .hs-shade{ background:
  linear-gradient(180deg, rgba(14,16,20,.55) 0%, rgba(14,16,20,0) 24%),
  linear-gradient(0deg, rgba(14,16,20,.9) 0%, rgba(14,16,20,.62) 30%, rgba(14,16,20,0) 54%),
  linear-gradient(90deg, rgba(14,16,20,.92) 0%, rgba(14,16,20,.8) 36%, rgba(14,16,20,.2) 64%, rgba(14,16,20,.08) 100%); } }
.hs-owner-cap{ top:calc(100% + 26px); left:0; justify-items:start; text-align:left; }
.hs-duo .hs-door-cap{ top:calc(100% + 26px + 12.8cqw); bottom:auto; left:auto; right:0; justify-items:end; text-align:right; }
.hs-owner-cap strong, .hs-duo .hs-door-cap strong{ color:#fff; font-family:'Quattrocento',Georgia,serif; font-size:1.02rem; line-height:1.2; }
.hs-owner-cap span, .hs-duo .hs-door-cap span{ color:var(--gold-l); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }

/* Über uns: Waldemar groß, Lilia klein */
.abx-photo--duo{ margin-bottom:56px; }
.abx-photo--duo .abx-frame img{ object-position:50% 12%; }
.abx-sub{ position:absolute; right:-14px; bottom:-48px; z-index:2; display:grid; justify-items:center; gap:8px; width:34%; }
.abx-sub-in{ width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:16px; background:linear-gradient(180deg, #D9DCE1, #B9BEC6); border:5px solid var(--cream); box-shadow:0 24px 48px -24px rgba(20,23,28,.55); }
.abx-sub-in img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.abx-sub p{ display:grid; justify-items:center; gap:0; margin:0; text-align:center; }
.abx-sub strong{ font-family:'Quattrocento',Georgia,serif; font-size:.95rem; line-height:1.2; }
.abx-sub span{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.abx-mono--pic{ overflow:hidden; padding:2px; }
.abx-mono--pic img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; border-radius:50%; }
.abx-sub p{ white-space:nowrap; }
@media (max-width:599px){ .abx-sub{ right:12px; width:34%; } .abx-sub span{ letter-spacing:.08em; } }