/* Schriften lokal gehostet: Archivo und Hanken Grotesk (SIL Open Font License) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/hanken-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/hanken-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/hanken-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/hanken-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/hanken-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/hanken-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================================
   LUCHS Gebäudeservice – gemeinsames Stylesheet für alle Seiten
   Palette: die LUCHS-Fellfarben. Ein Akzent (Amber), ein Radius (10px).
   Dunkles Design über [data-mode="dark"], gesetzt im <head>-Skript.
   ================================================================== */

:root{
  --bg:#F7F1E6;             /* Seitengrund, Fell hell */
  --hero-bg:#EFE3CE;        /* oberer Bereich, leicht dunkler abgesetzt */
  --surface:#FFFFFF;
  --tint:#FBF5EA;
  --gold-soft:#EFE3CE;
  --ink:#2A2520;
  --muted:#665C4D;
  --line:#E7DAC3;
  --line-strong:#D6C6A8;
  --accent:#C88A2E;         /* Bernstein, Luchs-Augen */
  --accent-hover:#D49A45;
  --accent-text:#8A5A10;
  --on-accent:#2A2520;
  --panel:#BAA57F;          /* Kopfleiste, Beigebraun */
  --on-panel:#2A2520;
  --on-panel-muted:#382A15;
  --panel-line:rgba(42,37,32,.16);
  --brand-dot:#5C3A21;
  --stage:#2E2A24;          /* dunkler Statement-Block, Anthrazit */
  --on-stage:#F0E2C4;
  --on-stage-muted:#C9BEA9;
  --stage-accent:#D9A04A;
  --field:#FFFDF9;
  --field-border:#948A78;
  --error:#A8321E;
  --shadow-card:0 1px 2px rgba(58,46,30,.06),0 16px 36px -18px rgba(58,46,30,.26);
  --img-grade:sepia(.22) saturate(.9) brightness(.98) contrast(1.02);   /* leichter warmer Ton (15.09.2026, Variante B), Fotos wirken echt */
  --map-filter:grayscale(1) contrast(1.05);
  --map-op:.34;
  --map-blend:multiply;
  --radius:10px;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Archivo","Hanken Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
:root[data-mode="dark"]{
  --bg:#201C17;
  --hero-bg:#26211B;
  --surface:#2A251F;
  --tint:#241F1A;
  --gold-soft:#33291C;
  --ink:#F0E2C4;
  --muted:#AAA08D;
  --line:#3A342F;
  --line-strong:#4A4238;
  --accent:#C49A6C;
  --accent-hover:#D1AC80;
  --accent-text:#D9C29A;
  --on-accent:#201C17;
  --panel:#17140F;
  --on-panel:#F0E2C4;
  --on-panel-muted:#C9BEA9;
  --panel-line:rgba(255,255,255,.08);
  --brand-dot:#C49A6C;
  --stage:#17140F;
  --on-stage:#F0E2C4;
  --on-stage-muted:#C9BEA9;
  --stage-accent:#E0B366;
  --field:#1E1A16;
  --field-border:#877C6A;
  --error:#F08A73;
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 18px 40px -18px rgba(0,0,0,.6);
  --img-grade:sepia(.2) saturate(.88) brightness(.88) contrast(1.02);
  --map-filter:invert(1) grayscale(1) brightness(.85);
  --map-op:.3;
  --map-blend:screen;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Große Bildschirme: Schrift und Abstände wachsen mit */
@media (min-width:1600px){html{font-size:106.25%}}
@media (min-width:1920px){html{font-size:112.5%}}
@media (min-width:2400px){html{font-size:125%}}
/* clip statt hidden: schneidet überstehende Breite ab, ohne einen Rollbereich
   aufzumachen. hidden würde sticky und fixed in manchen Browsern aushebeln. */
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
/* Flächen, die der Browser sonst selbst einfärbt: Auswahl, Schreibmarke, Rollbalken */
::selection{background:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--ink)}
html{scrollbar-color:var(--line-strong) transparent}
input,textarea,select{caret-color:var(--accent)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
/* Volle Breite: Seitenränder wachsen mit dem Bildschirm, kein fester Maximalwert */
.wrap{width:100%;margin:0 auto;padding:0 max(clamp(20px,5vw,120px),env(safe-area-inset-right)) 0 max(clamp(20px,5vw,120px),env(safe-area-inset-left))}
section[id],[id].anchor{scroll-margin-top:92px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--radius)}
.skip:focus{top:12px}

/* Keine Silbentrennung in Überschriften: zusammen mit text-wrap:balance trennte sie
   sogar kurze Wörter („oder ho-len“). Überlange Wörter fängt overflow-wrap ab. */
h1,h2,h3{font-family:var(--display);font-stretch:87.5%;font-weight:700;letter-spacing:0;font-kerning:normal;font-feature-settings:"kern" 1;text-wrap:balance;color:var(--ink);-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}
h1{font-size:clamp(2.6rem,5.1vw,3.6rem);line-height:1.02}
/* Hält Wortgruppen zusammen, die sonst nach einem Bindestrich umbrechen. */
.nowrap{white-space:nowrap}
h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.06}
h3{font-size:1.3rem;line-height:1.2}
.lead{font-size:1.2rem;line-height:1.55;color:var(--muted);max-width:46ch}
.eyebrow{display:flex;align-items:center;gap:11px;font:600 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:18px}
.eyebrow::before{content:"";flex:none;width:26px;height:2px;background:var(--accent)}
.todo{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--ink);padding:.05em .3em;border-radius:4px}

/* Buttons und Links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--radius);border:1px solid transparent;font:600 1rem/1 var(--sans);white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
/* Alle vollflächigen Knöpfe im Sandton der Kopfleiste. Im dunklen Design bleibt Bernstein,
   dort hat der Sandton zu wenig Kontrast zum Hintergrund. */
.btn-primary{background:var(--panel);color:var(--on-panel);border-color:var(--panel)}
.btn-primary:hover{background:color-mix(in srgb,var(--panel) 86%,#fff);border-color:color-mix(in srgb,var(--panel) 86%,#fff)}
:root[data-mode="dark"] .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
:root[data-mode="dark"] .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{border-color:var(--field-border);color:var(--ink);background:transparent}
/* In der Kopfleiste nur umrandet: gefülltes Bernstein wirkte auf dem Beige schlammig.
   Im Hero, in der Leiste unten und beim Anruf-Knopf bleibt die Füllung. */
.nav-links .btn-primary{background:transparent;color:var(--on-panel);border-color:var(--on-panel);border-width:1.5px}
.nav-links .btn-primary:hover{background:color-mix(in srgb,var(--on-panel) 12%,transparent);border-color:var(--on-panel)}
/* In der Kopfleiste bleibt der Knopf eine Kontur, auch im dunklen Design */
:root[data-mode="dark"] .nav-links .btn-primary{background:transparent;color:var(--on-panel);border-color:var(--on-panel)}
:root[data-mode="dark"] .nav-links .btn-primary:hover{background:color-mix(in srgb,var(--on-panel) 12%,transparent)}
/* Im hellen Design tragen der Hero-Knopf und der Anruf-Knopf den Sandton der Kopfleiste.
   Im dunklen Design bleibt beides im Bernstein. */
.btn-ghost:hover{background:var(--gold-soft);border-color:var(--ink)}
/* Unterstrich im selben Ton wie die Navigation oben (--brand-dot), nicht im Bernstein. */
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:underline;text-decoration-color:var(--brand-dot);text-decoration-thickness:1.5px;text-underline-offset:5px;transition:color .2s}
.tlink:hover{color:var(--accent-text)}
.tlink svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Kopfleiste */
header{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--panel-line);transition:box-shadow .25s}
header.is-scrolled{box-shadow:0 10px 26px -18px rgba(30,24,16,.55)}
.nav{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;flex-direction:column;line-height:1;color:var(--on-panel)}
.brand .bname{font:800 1.75rem/1 var(--display);font-stretch:87.5%;letter-spacing:.01em}
.brand .bname i{display:inline-block;width:.17em;height:.17em;border-radius:50%;background:var(--brand-dot);margin-left:.07em}
.brand .btag{font:600 .69rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--on-panel-muted);margin-top:6px}
/* Optisch bündig (26.10.2026): L und G haben links etwas Leerraum in der Schrift (L 0,065 em, G 0,043 em). Ohne Ausgleich
   stand das Logo gut 2 px rechts von der Kachel im Kopfbereich und das G leicht vor dem L. */
.brand .bname{margin-left:-.065em}
.brand .btag{margin-left:-.043em}
/* Wortmarke im Fließtext einer Überschrift: gleiche Schrift, Stärke und Punkt wie das Logo
   in der Kopfleiste, die Größe kommt von der Überschrift */
.wortmarke{font-family:var(--display);font-stretch:87.5%;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.wortmarke i{display:inline-block;width:.17em;height:.17em;border-radius:50%;background:var(--brand-dot);margin-left:.07em}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-links a.link{font-weight:500;font-size:.97rem;color:var(--on-panel-muted);transition:color .2s;position:relative}
.nav-links a.link:hover,.nav-links a.link[aria-current]{color:var(--on-panel)}
.nav-links a.link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--brand-dot);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav-links a.link:hover::after,.nav-links a.link:focus-visible::after,.nav-links a.link:active::after,.nav-links a.link[aria-current]::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:var(--radius);border:1px solid var(--panel-line);background:transparent;color:var(--on-panel);display:grid;place-items:center;cursor:pointer;transition:background-color .2s}
.icon-btn:hover{background:rgba(42,37,32,.08)}
/* Telefon-Symbol in der Kopfzeile: im Handwerk rufen die meisten Leute lieber an. */
/* Schwebender Anruf-Knopf unten rechts, im Bernstein der Knöpfe. */
[data-mode="dark"] .icon-btn:hover{background:rgba(255,255,255,.06)}
.icon-btn svg{width:20px;height:20px}
.theme-toggle .i-sun{display:none}
[data-mode="dark"] .theme-toggle .i-sun{display:block}
[data-mode="dark"] .theme-toggle .i-moon{display:none}
.menu-toggle{display:none}
.menu-toggle .i-close{display:none}
.menu-toggle[aria-expanded="true"] .i-open{display:none}
.menu-toggle[aria-expanded="true"] .i-close{display:block}
#navSentinel{position:absolute;top:1px;height:1px;width:1px}

/* Hero Startseite */
/* Hero: Video füllt den ganzen Bereich, der Text steht auf einer eigenen Sandfläche */
.hero{position:relative;overflow:hidden;background:var(--stage);display:flex;align-items:center;min-height:clamp(560px,78vh,980px);padding:clamp(56px,9vh,120px) 0}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:72px;align-items:center}
/* Keine Silbentrennung in der Hero-Überschrift: der Zeilenausgleich (text-wrap:balance)
   trennte "Handwerkerservice" sonst auch dann, wenn das Wort ganz auf die Zeile passt. */
.hero h1{margin-bottom:24px;-webkit-hyphens:manual;hyphens:manual}
.hero .lead{margin-bottom:36px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.hero-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--gold-soft)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
/* Hero-Video: Standbild darunter, zwei Videos für die überblendete Schleife */
.hero-media{position:absolute;inset:0}
/* Unterkante des Videos läuft ins Seitenbeige aus, sonst schneidet es hart zur
   Merkmalzeile ab. */
.hero-media::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;height:clamp(26px,4vh,54px);background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--bg) 18%,transparent) 55%,color-mix(in srgb,var(--bg) 62%,transparent) 84%,var(--bg) 100%)}
/* Im dunklen Design darf der Verlauf länger sein, dort fällt er nicht auf. */
:root[data-mode="dark"] .hero-media::after{height:clamp(70px,11vh,150px);background:linear-gradient(to bottom,transparent,var(--bg))}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 64%}
.hero-inner{position:relative;z-index:1;width:100%}
.hero-copy{background:var(--hero-bg);border-radius:var(--radius);padding:clamp(28px,3.2vw,60px);max-width:min(42rem,100%);box-shadow:0 30px 70px -34px rgba(20,16,12,.6)}
.hv-clip{opacity:0;transition:opacity .8s var(--ease)}
.hv-clip.on{opacity:1}
/* Unten links, auf gleicher Höhe wie der Anruf-Knopf rechts. Fest am Fenster, damit beide
   oben auf der Seite miteinander abschließen; verschwindet, sobald der Hero weg ist. */
.hv-toggle{position:fixed;z-index:46;left:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,32px);width:58px;height:58px;border-radius:var(--radius);border:1px solid rgba(247,241,230,.35);background:rgba(23,20,15,.55);color:#F7F1E6;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s}
.hv-toggle:hover{background:rgba(23,20,15,.75)}
.js .hv-toggle{transition:opacity .25s var(--ease),transform .25s var(--ease),background-color .2s}
.hv-toggle svg{width:24px;height:24px}
.hv-toggle.weg{opacity:0;pointer-events:none;transform:translateY(10px)}
.hv-toggle .i-play{display:none}
.hv-toggle[aria-pressed="true"] .i-pause{display:none}
.hv-toggle[aria-pressed="true"] .i-play{display:block}
@media (min-width:1440px){.hero-photo{aspect-ratio:5/4}}
@media (min-width:2000px){.hero-photo{aspect-ratio:4/3}}

/* Seiten-Intro Unterseiten */
/* Zurück-Zeile auf den Unterseiten, sitzt im Farbfeld über der Überschrift. */
.backrow{background:var(--hero-bg);padding:22px 0 0}
.backlink{display:inline-flex;align-items:center;gap:9px;font:600 .95rem/1 var(--sans);color:var(--muted);text-decoration:none;padding:8px 14px 8px 10px;border-radius:var(--radius);border:1px solid transparent;transition:color .2s,border-color .2s,background-color .2s}
.backlink svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.backlink:hover{color:var(--ink);border-color:var(--line-strong);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.backlink:hover svg{transform:translateX(-3px)}
.backrow + .page-intro{padding-top:20px}
.page-intro{background:var(--hero-bg);padding:64px 0 76px}
.page-intro h1{font-size:clamp(2.4rem,4.4vw,3.6rem);margin-bottom:18px}
.page-intro .lead{max-width:58ch}

/* Merkmale */
.facts{border-bottom:1px solid var(--line)}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.fact{padding:36px 28px 40px 0}
.fact + .fact{padding-left:28px;border-left:1px solid var(--line)}
.fact b{display:block;font:700 1.15rem/1.25 var(--display);font-stretch:87.5%;margin-bottom:8px}
.fact span{color:var(--muted);font-size:.95rem;line-height:1.55;display:block}

/* Abschnitte */
.blk{padding:84px 0}
/* Getönte Abschnitte laufen oben und unten über 120 px in den Seitengrund aus,
   statt mit einer harten Linie abzuschneiden. */
.blk.tint{background:var(--tint);position:relative;isolation:isolate}
.blk.tint::before,.blk.tint::after{content:"";position:absolute;left:0;right:0;height:clamp(70px,9vw,130px);pointer-events:none;z-index:-1}
.blk.tint::before{top:0;background:linear-gradient(to bottom,var(--bg),transparent)}
.blk.tint::after{bottom:0;background:linear-gradient(to top,var(--bg),transparent)}
.sec-head{max-width:40rem;margin-bottom:56px}
.sec-head p{margin-top:16px;color:var(--muted);font-size:1.1rem;max-width:52ch}

/* Leistungen */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:48px 24px}
.svc{grid-column:span 2;display:flex;flex-direction:column;text-align:left;background:none;border:0;padding:0;cursor:pointer}
.svc.lg{grid-column:span 3}
.svc .ph{position:relative;display:block;width:100%;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--gold-soft);margin-bottom:18px}
.svc.lg .ph{aspect-ratio:16/10}
.svc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-grade);transition:transform .6s var(--ease)}
.svc:hover .ph img{transform:scale(1.03)}
.svc h3{display:inline;background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--ease)}
.svc:hover h3,.svc:focus-visible h3{background-size:100% 1.5px}
.svc.lg h3{font-size:1.6rem}
.svc p{color:var(--muted);font-size:.96rem;line-height:1.55;margin-top:8px;max-width:44ch}
.svc .more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:600;font-size:.92rem;color:var(--accent-text)}
.svc .more svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.svc:hover .more svg{transform:translateX(3px)}

/* Dialog */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(20,16,12,.62);animation:fade .2s ease}
.modal-card{position:relative;background:var(--surface);border-radius:var(--radius);max-width:40rem;width:100%;max-height:90vh;overflow:auto;animation:rise .35s var(--ease)}
.modal-card .mph{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--gold-soft)}
.modal-card .mph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-grade)}
.modal-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:var(--radius);border:0;background:var(--surface);display:grid;place-items:center;cursor:pointer}
.modal-close svg{width:20px;height:20px;pointer-events:none}
.modal-body{padding:30px 32px 32px}
.modal-body h3{font-size:1.75rem;margin-bottom:12px}
.modal-body p{color:var(--muted)}
.modal-body ul{list-style:none;margin:20px 0 26px;border-top:1px solid var(--line)}
.modal-body li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.98rem}
.modal-body .cta{display:flex;flex-wrap:wrap;gap:12px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Zwei Spalten mit Trennlinie (Zielgruppen, Karriere) */
.split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-strong)}
/* Spalten als Spalte gestapelt: die Liste rutscht nach unten, damit beide Listen auf
   einer Höhe beginnen, auch wenn der Text darüber verschieden lang ist */
.split > div{padding:40px 48px 8px 0;display:flex;flex-direction:column}
.split > div + div{padding-left:48px;padding-right:0;border-left:1px solid var(--line-strong)}
.split h3{font-size:1.55rem;margin-bottom:12px}
.split p{color:var(--muted);max-width:46ch}
.split ul{list-style:none;margin-top:auto;padding-top:22px}
.split li{padding:10px 0;font-weight:500;border-top:1px solid var(--line)}
.split h3 + ul{padding-top:8px}

/* Dunkler Block */
.stage{margin-top:72px;background:var(--stage);color:var(--on-stage);border-radius:var(--radius);padding:56px;border:1px solid var(--line)}
/* Zwei Zeilen: der goldene Teil beginnt auf einer eigenen Zeile. */
.stage h3{color:var(--on-stage);font-size:clamp(1.7rem,2.6vw,2.2rem);max-width:42ch;margin-bottom:28px;text-wrap:pretty}
.stage h3 span{color:var(--stage-accent);display:block}
.stage-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.stage p{color:var(--on-stage-muted);line-height:1.7}
.stage .btn{margin-top:28px}

/* Kontakt */
.contact{position:relative;overflow:hidden;isolation:isolate}
.contactmap{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* Ausblenden zum Rand per Verlauf darüber: CSS-Masken blenden eingebettete iframes in Chrome komplett aus */
.contactmap::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse var(--map-rx,330px) var(--map-ry,390px) at calc(var(--mx,40%) + var(--map-shift,0px)) var(--my,50%),transparent 30%,var(--bg) 100%)}
.contactmap iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;filter:var(--map-filter);opacity:var(--map-op);mix-blend-mode:var(--map-blend)}
/* Hinweis und Knopf, solange die Karte noch nicht geladen ist */
.map-laden{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.map-laden .tlink{align-self:flex-start;background:none;border:0;padding:0;cursor:pointer}
.map-hinweis{font-size:.82rem;color:var(--muted);line-height:1.5;max-width:46ch}
.map-hinweis a{text-decoration:underline;text-underline-offset:3px}
.map-credit{position:absolute;right:20px;bottom:12px;font-size:.72rem;color:var(--muted)}
.map-credit a{text-decoration:underline;text-underline-offset:2px}
.contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(104px,7vw,160px);align-items:stretch}
.contact-grid > div{display:flex;flex-direction:column}
.ci{margin-top:40px;border-top:1px solid var(--line-strong)}
.ci-row{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line-strong)}
.ci-row dt{color:var(--muted);font-size:.92rem}
.ci-row dd{font-weight:500;font-variant-numeric:tabular-nums}
.ci-row dd a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;transition:text-decoration-color .2s}
.ci-row dd a:hover{text-decoration-color:var(--accent)}
.map-actions{margin-top:18px;margin-bottom:128px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.cal{margin-top:auto;padding:24px 24px 20px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-title{font:700 1.15rem/1 var(--display);font-stretch:87.5%}
.cal-sub{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.cal-navs{display:flex;gap:8px}
.cal-nav{width:40px;height:40px;border-radius:var(--radius);border:1px solid var(--line-strong);background:transparent;display:grid;place-items:center;cursor:pointer;transition:border-color .2s}
.cal-nav:hover:not(:disabled){border-color:var(--ink)}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal-nav svg{width:16px;height:16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-variant-numeric:tabular-nums}
.cal-dow span{text-align:center;font-size:.72rem;font-weight:600;color:var(--muted);padding-bottom:6px}
.cal-day{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;font-size:.92rem;font-weight:500;border:1px solid transparent;background:none}
.cal-day.empty{visibility:hidden}
.cal-day.off{color:var(--muted);opacity:.45}
.cal-day.pick{cursor:pointer;transition:background-color .15s,border-color .15s}
.cal-day.pick:hover{border-color:var(--ink)}
.cal-day.few{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.cal-day.today{border-color:var(--line-strong)}
.cal-day.sel{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:.82rem;color:var(--muted)}
.cal-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.cal-legend .l-few{background:color-mix(in srgb,var(--accent) 32%,transparent)}
.cal-legend .l-off{background:var(--line-strong)}

form.card{--karten-innen:36px;--reihe-abstand:22px;padding:var(--karten-innen);display:flex;flex-direction:column;gap:var(--reihe-abstand);scroll-margin-top:100px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.frow.frow-anrede{grid-template-columns:minmax(130px,.4fr) 1fr}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.9rem;font-weight:600;color:var(--ink)}
.field label .opt{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--field-border);border-radius:var(--radius);background:var(--field);color:var(--ink);font:400 1rem/1.4 var(--sans);transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.9}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
textarea{resize:vertical;min-height:120px}
form.card .field:has(> textarea){flex:1}
form.card .field > textarea{flex:1}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23948A78' d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--error)}
.err{color:var(--error);font-size:.86rem;line-height:1.4}
/* Vorschlag unter einem Feld, z. B. das ergänzte Datum beim Wunschtermin */
.feld-tipp{font-size:.86rem;line-height:1.4;color:var(--muted)}
.feld-tipp button{font:inherit;font-weight:600;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.dropzone{border:1px dashed var(--field-border);border-radius:var(--radius);padding:24px 18px;text-align:center;cursor:pointer;background:var(--field);color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .2s,background-color .2s}
.dropzone:hover,.dropzone.drag{border-color:var(--ink);background:var(--gold-soft)}
.dropzone svg{width:26px;height:26px;color:var(--ink)}
.dropzone .dz-text b{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.dropzone .dz-hint{font-size:.82rem}
.dropzone .dz-files{font-size:.86rem;color:var(--ink);font-weight:600;word-break:break-word}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--muted);line-height:1.5;font-weight:400!important}
.chk input{width:18px;height:18px;min-height:0;margin-top:2px;accent-color:var(--accent);flex:none}
.chk a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
/* auto oben und unten: der Knopf sitzt mittig im freien Platz zwischen dem Text
   darüber und dem unteren Rand der Karte, statt unten zu kleben */
/* Über dem Knopf liegt der Zeilenabstand des Formulars, darunter der Innenabstand der Karte.
   Die Differenz kommt als Polsterung dazu, dann ist oben und unten gleich viel Luft, auch am
   Handy, wo die Karte enger gepolstert ist. Die auto-Ränder verteilen zusätzlichen freien
   Platz gleichmäßig, wenn die Karte höher wird. */
.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding-top:calc(var(--karten-innen) - var(--reihe-abstand));margin-top:auto;margin-bottom:auto}
#status{font-size:.95rem;color:var(--muted)}
#status.is-error{color:var(--error)}

/* Über uns */
.about{display:grid;grid-template-columns:.75fr 1.25fr;gap:72px;align-items:start}
.about-photo{aspect-ratio:4/5;border-radius:var(--radius);background:var(--gold-soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font-size:.9rem;text-align:center;padding:24px}
.about-text h2{margin-bottom:22px}
.about-head h2{max-width:14ch}
.about-head .plain-list{margin-top:32px}
.about-text p b{color:var(--ink);font-weight:600}
.about-text p{color:var(--muted);font-size:1.08rem;max-width:58ch;margin-bottom:16px}
.about-sign{color:var(--ink)!important;margin-top:22px}
.plain-list{list-style:none;margin-top:28px;border-top:1px solid var(--line-strong);max-width:26rem}
.plain-list li{padding:12px 0;border-bottom:1px solid var(--line);font-weight:500}

.rows{border-top:1px solid var(--line-strong)}
.row{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:48px;padding:34px 0;border-bottom:1px solid var(--line)}
.row h3{font-size:1.45rem}
.row p{color:var(--muted);max-width:62ch}

.refs{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,24vw,520px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px max(40px,calc((100vw - 1200px)/2 + 40px)) 18px;scroll-padding-inline:max(40px,calc((100vw - 1200px)/2 + 40px));scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.refs figure{scroll-snap-align:start}
.refs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);filter:var(--img-grade);background:var(--gold-soft)}
.refs figcaption{margin-top:12px;font-size:.93rem;color:var(--muted)}

.faq-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:72px;align-items:start}
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;font:600 1.1rem/1.35 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;color:var(--accent-text);transition:transform .25s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .faq-a{padding:0 40px 24px 0;color:var(--muted);max-width:68ch}

/* Karriere */
.trades{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border-top:1px solid var(--line-strong)}
.trades li{padding:13px 0;border-bottom:1px solid var(--line);font-weight:500}
.lead-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.lead-split p{color:var(--muted);font-size:1.08rem;margin-top:18px;max-width:52ch}

/* Rechtstexte */
/* Rechtstexte bündig unter der Überschrift, Zeilenlänge begrenzt statt mittig schwebender Spalte */
.legal > section,.legal > .stand{max-width:52rem}
.legal section{padding:8px 0 28px;border-bottom:1px solid var(--line)}
.legal section + section{padding-top:36px}
.legal h2{font-size:1.55rem;margin-bottom:14px}
.legal h3{font:600 1.05rem/1.4 var(--sans);font-stretch:normal;letter-spacing:0;margin:22px 0 6px}
.legal p{color:var(--ink);opacity:.92;margin-bottom:10px}
.legal a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.legal .stand{color:var(--muted);font-size:.92rem;margin-top:28px;border:0}

/* Danke */
.thanks{padding:96px 0 120px}
.thanks h1{font-size:clamp(2.4rem,4.4vw,3.6rem);margin-bottom:20px}
.thanks p{color:var(--muted);font-size:1.12rem;max-width:52ch;margin-bottom:10px}
.thanks .btn{margin-top:28px}

/* Fuß */
/* Dunkle Fußzeile: fängt die Seite unten ab und trennt sie klar vom letzten Abschnitt,
   der ja getönt sein kann. Farben wie im Statement-Block. */
footer{background:var(--stage);color:var(--on-stage-muted);padding:64px 0 40px}
footer .brand{color:var(--on-stage)}
footer .brand .btag{color:var(--on-stage-muted)}
footer .brand .bname i{background:var(--stage-accent)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px 40px}
.foot-grid p{color:var(--on-stage-muted);font-size:.95rem;max-width:38ch;margin-top:14px}
/* Kontaktspalte in der Fußzeile: Telefon und E-Mail auf jeder Seite erreichbar */
.foot-kontakt{display:flex;flex-direction:column;gap:6px;font-size:.95rem;color:var(--on-stage-muted)}
.foot-kopf{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-stage);margin-bottom:8px}
.foot-kontakt a{color:var(--on-stage);text-decoration:underline;text-decoration-color:rgba(240,226,196,.35);text-underline-offset:4px;transition:text-decoration-color .2s}
.foot-kontakt a:hover{text-decoration-color:var(--stage-accent)}
.foot-kontakt address{font-style:normal;line-height:1.5}
.foot-leistungen a{text-decoration:none;color:var(--on-stage-muted);transition:color .2s}
.foot-leistungen a:hover,.foot-leistungen a[aria-current]{color:var(--on-stage)}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:.95rem;color:var(--on-stage-muted)}
.foot-links a:hover{color:var(--on-stage)}
.foot-bottom{border-top:1px solid rgba(240,226,196,.16);margin-top:40px;padding-top:22px;color:var(--on-stage-muted);font-size:.86rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* Mobile Anruf-Leiste */
/* Sicherheitsabstände: am iPhone liegen unten die runden Ecken und der Home-Balken.
   env() liefert nur Werte, wenn im viewport viewport-fit=cover steht. */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--bg);border-top:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));gap:10px}
.callbar .btn{flex:1}
.js .callbar{transition:transform .3s var(--ease)}
.js .callbar:not(.show){transform:translateY(110%)}

/* Einblenden beim Scrollen, nur mit JavaScript */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .modal-bg,.modal-card{animation:none}
  .svc .ph img,.svc h3,.tlink svg,.svc .more svg,.faq summary svg,.js .callbar{transition:none}
}

/* Responsiv */
@media (max-width:1024px){
  .hero-grid{gap:48px}
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:44px 24px}
  .svc,.svc.lg{grid-column:span 1}
  .svc.lg .ph{aspect-ratio:4/3}
  .svc.lg h3{font-size:1.3rem}
  .about,.faq-wrap,.lead-split{gap:48px}
  .contact-grid{gap:80px}
}
@media (pointer:coarse){
  /* Am Finger bedient: Textlinks bekommen eine Trefferfläche von 44px,
     die Schrift bleibt dabei an ihrem Platz. */
  .tlink{min-height:44px}
  .ci-row dd a{display:inline-flex;align-items:center;min-height:44px}
  .chk input{width:22px;height:22px}
  .foot-links a{display:inline-flex;align-items:center;min-height:44px}
  .cal-nav{width:44px;height:44px}
}
@media (max-width:900px){
  .menu-toggle{display:grid}
  .nav-right{margin-left:auto}
  .nav-links{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;background:var(--panel);border-bottom:1px solid var(--panel-line);padding:4px 24px 20px;
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;box-shadow:0 20px 40px -24px rgba(0,0,0,.4)}
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links a.link{padding:15px 0;border-bottom:1px solid var(--panel-line);font-size:1.05rem;color:var(--on-panel)}
  .nav-links a.link::after{display:none}
  .nav-links .btn{margin-top:16px}
  .hero{display:block;min-height:0;padding:0 0 48px;background:var(--hero-bg)}
  .hero-media{position:relative;inset:auto;aspect-ratio:4/3}
  .hero-inner{margin-top:-56px}
  .hero-copy{padding:28px 22px}
  /* Auf dem Handy wächst die Überschrift mit der Bildschirmbreite mit. So bleibt
     "Handwerkerservice" auf einer Zeile, ohne Trennstrich und ohne Überlauf. */
  .hero h1{font-size:clamp(1.6rem,8.6vw,3.1rem)}
  .hv-toggle{position:absolute;z-index:2;top:14px;right:14px;left:auto;bottom:auto;width:44px;height:44px}
  .hv-toggle svg{width:20px;height:20px}
  .page-intro{padding:48px 0 56px}
  .backrow{padding-top:16px}
  .backrow + .page-intro{padding-top:14px}
  .facts-grid{grid-template-columns:1fr 1fr}
  .fact,.fact + .fact{padding:28px 20px 30px 0;border-left:0}
  .fact:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .split{grid-template-columns:1fr}
  .split > div,.split > div + div{padding:32px 0 8px;border-left:0}
  .split > div + div{border-top:1px solid var(--line-strong);margin-top:24px}
  .stage{padding:36px 28px;margin-top:56px}
  .stage-cols{grid-template-columns:1fr;gap:16px}
  .contact-grid,.about,.faq-wrap,.lead-split{grid-template-columns:1fr}
  .contact-grid{gap:132px}   /* Platz für den Kartenausschnitt zwischen Kalender und Formular */
  .about-photo{max-width:360px}
  .row{grid-template-columns:1fr;gap:10px}
  .blk{padding:64px 0}
  /* Kein Versatz: der Schriftzug Mannheim liegt mittig in der Lücke zwischen Kalender
     und Formular. Enger Ausschnitt, damit Ludwigshafen im Rand verschwindet. */
  .contactmap{--map-rx:270px;--map-ry:320px;--map-shift:0px}
  .map-actions{margin-bottom:28px}
}
@media (pointer:coarse){
  .foot-kontakt a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:600px){
  body{font-size:16px;padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .wrap{padding:0 20px}
  .refs{padding-inline:20px;scroll-padding-inline:20px;grid-auto-columns:78%}
  .svc-grid{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:1fr}
  .fact,.fact + .fact,.fact:nth-child(even){padding:22px 0;border-left:0;border-top:1px solid var(--line)}
  .fact:first-child{border-top:0}
  .frow,.trades{grid-template-columns:1fr}
  .frow.frow-anrede{grid-template-columns:120px 1fr;gap:14px}
  form.card{--karten-innen:24px;padding:24px 20px}
  .cal{padding:18px 16px 16px}
  .ci-row{grid-template-columns:1fr;gap:2px}
  .modal-body{padding:24px 22px 26px}
  .callbar{display:flex}
  /* Leiste behält beide Knöpfe, der schwebende Anruf-Knopf sitzt darüber und etwas kleiner. */
  .brand .bname{font-size:1.5rem}
}
.err .datum-vorschlag{font:inherit;font-weight:600;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

/* Leistungsseiten (seit 18.10.2026): eine Seite je Leistung, gebaut aus leistungsseiten.py */
.m-mehr{margin:-8px 0 22px}
.lp-head{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.lp-intro h1{text-wrap:balance}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.lp-gebiet{margin-top:22px;color:var(--muted);font-size:.92rem}
.lp-bild{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--gold-soft)}
.lp-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-grade)}
.lead-split h2 + p{margin-top:22px}
.lp-listenkopf{font-size:1.25rem;margin-bottom:4px}
.lp-liste{max-width:none;margin-top:18px}
.lp-ablauf{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong);counter-reset:schritt}
.lp-ablauf li{padding:30px 28px 8px 0;counter-increment:schritt}
.lp-ablauf li + li{padding-left:28px;border-left:1px solid var(--line)}
.lp-ablauf li::before{content:counter(schritt,decimal-leading-zero);display:block;margin-bottom:14px;font:800 .95rem/1 var(--display);font-stretch:87.5%;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.lp-ablauf b{display:block;font:700 1.15rem/1.25 var(--display);font-stretch:87.5%;margin-bottom:8px}
.lp-ablauf span{display:block;color:var(--muted);font-size:.98rem;line-height:1.55;max-width:34ch}
.stage .lp-cta{margin-top:0}
.stage .btn-ghost{color:var(--on-stage);border-color:color-mix(in srgb,var(--on-stage) 38%,transparent)}
.stage .btn-ghost:hover{background:color-mix(in srgb,var(--on-stage) 10%,transparent);border-color:var(--on-stage)}
.lp-mehr{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-top:1px solid var(--line-strong)}
.lp-mehr a{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.lp-mehr img{width:96px;height:72px;flex:none;object-fit:cover;border-radius:calc(var(--radius) * .6);filter:var(--img-grade)}
.lp-mehr span{flex:1;min-width:0}
.lp-mehr b{display:block;font-weight:600;font-size:1.02rem;line-height:1.3;transition:color .2s}
.lp-mehr small{display:block;margin-top:4px;color:var(--muted);font-size:.9rem;line-height:1.45}
.lp-mehr svg{width:18px;height:18px;flex:none;color:var(--accent-text);transition:transform .2s var(--ease)}
.lp-mehr a:hover b{color:var(--accent-text)}
.lp-mehr a:hover svg{transform:translateX(3px)}
@media (max-width:1024px){
  .lp-head{gap:40px}
  .lp-mehr{column-gap:32px}
}
@media (max-width:900px){
  .lp-head{grid-template-columns:1fr}
  .lp-bild{order:-1;aspect-ratio:16/10}
  .lp-ablauf{grid-template-columns:1fr}
  .lp-ablauf li,.lp-ablauf li + li{padding:22px 0;border-left:0;border-top:1px solid var(--line)}
  .lp-ablauf li:first-child{border-top:0}
  .lp-mehr{grid-template-columns:1fr}
}
@media (max-width:600px){
  .lp-cta .btn{flex:1 1 100%}
  .lp-mehr img{width:72px;height:56px}
  .lp-mehr small{display:none}
}