/* ============================================================
   Stark Bau- und Mietservice · Stylesheet der Leistungsseiten
   Tokens, Fonts, Buttons, Eyebrow, Header, Formular und Footer
   sind identisch zu index.html (dort im <style>-Block).
   Schriftpfade sind relativ zu dieser Datei: ../fonts/
   ============================================================ */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;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:100 900;font-stretch:62% 125%;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;}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body,h1,h2,h3,p,figure,figcaption,ul,ol,dl,dd,table{ margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
table{ border-collapse:collapse; }

/* ---------- Tokens ---------- */
:root{
  --bg:#F7F5F1; --surface:#FFFFFF; --bg-alt:#EFEBE4;
  --ink:#15161A; --ink-muted:#5F6168; --ink-soft:#6A6C73;
  --line:#E3DFD8; --stone:#D9D2C5;
  --accent:#F74B35; --accent-deep:#D5361F; --accent-ink:#FFFFFF;
  --num:'Archivo', sans-serif;
  --wrap:1200px; --gutter:1.25rem;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --shadow:0 18px 40px -20px rgba(58,48,32,0.35);
  --header-h:64px;
  --line-ink:rgba(247,245,241,0.18);
  color-scheme:light;
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; background:var(--bg); scroll-padding-top:var(--header-h); }
body{
  font-family:'Archivo', sans-serif;
  font-variation-settings:'wdth' 100,'wght' 400;
  background:var(--bg); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:var(--wrap); margin-inline:auto; }
section{ padding-block:3.5rem; padding-inline:var(--gutter); }
.site-header,.site-footer{ padding-inline:var(--gutter); }
@media (min-width:900px){ :root{ --gutter:2rem; } section{ padding-block:6rem; } }

/* Deutsche Komposita: die Trennstellen stehen als &shy; im Markup.
   hyphens:auto trennte „mie-ten“ und „EIN-FASSUNGEN“ – deshalb manual.
   overflow-wrap bleibt als Notbremse für 320px. */
h1,h2,h3{ text-wrap:balance; color:var(--ink); hyphens:manual; overflow-wrap:break-word; }
h1{ font-variation-settings:'wdth' 100,'wght' 700; letter-spacing:-0.03em; line-height:1.02; font-size:clamp(2.05rem,6vw,3.2rem); }
h2{ font-variation-settings:'wdth' 118,'wght' 700; text-transform:uppercase; letter-spacing:-0.005em; line-height:0.98; font-size:clamp(1.9rem,4.4vw,3.1rem); }
h3{ font-variation-settings:'wdth' 100,'wght' 600; letter-spacing:-0.015em; line-height:1.15; font-size:1.25rem; }
p{ text-wrap:pretty; }
.muted{ color:var(--ink-muted); }
.lead{ font-size:1.05rem; color:var(--ink-muted); max-width:58ch; }
.eyebrow{
  display:block; font-variation-settings:'wdth' 80,'wght' 600; text-transform:uppercase;
  letter-spacing:0.18em; font-size:0.6875rem; color:var(--accent); margin-bottom:0.8rem;
}
.eyebrow.is-muted{ color:var(--ink-muted); }
.num{ font-family:var(--num); font-variant-numeric:tabular-nums; letter-spacing:0; }
.sec-head{ margin-bottom:2rem; }
.sec-head .lead{ margin-top:0.9rem; }
@media (min-width:900px){ .sec-head{ margin-bottom:3rem; } }
.u{ text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:0.09em; text-underline-offset:0.12em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.55rem;
  min-height:48px; padding:0.8rem 1.35rem; border-radius:4px;
  font-variation-settings:'wdth' 90,'wght' 600; font-size:0.95rem; line-height:1.2;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn svg{ flex:none; }
.btn:active{ transform:translateY(1px); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-accent:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.btn-ink{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn-ink:hover{ background:#2A2B31; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--bg); }
.btn-light{ background:rgba(255,255,255,0.14); color:#fff; border-color:rgba(255,255,255,0.6); }
.btn-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-white{ background:#fff; color:var(--accent); border-color:#fff; }
.btn-white:hover{ background:var(--bg); }
.arrow-link{
  display:inline-flex; align-items:center; gap:0.5rem; min-height:44px;
  font-variation-settings:'wdth' 90,'wght' 600; font-size:0.95rem;
}
.arrow-link::after{ content:'→'; transition:transform .3s var(--ease); }
.arrow-link:hover::after{ transform:translateX(4px); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

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

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; height:var(--header-h);
  background:rgba(247,245,241,0.92); border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.header-inner{ height:100%; display:flex; align-items:center; gap:0.4rem; }
.wordmark{ display:flex; flex-direction:column; line-height:1; min-height:44px; justify-content:center; margin-right:auto; }
/* Offizielles Logo (Kundendatei 24.09.) als transparentes WebP, 2x-Auflösung.
   Höhe fest, damit die Headerhöhe gleich bleibt; die rote Zeile bleibt bei 40px lesbar. */
.wordmark-logo{ display:block; height:40px; width:auto; max-width:none; align-self:flex-start; }
.site-footer .wordmark-logo{ height:48px; }
@media (max-width:359px){ .site-header .wordmark-logo{ height:34px; } }
@media (min-width:900px){ .site-header .wordmark-logo{ height:46px; } }
.nav-main{ display:none; gap:1.8rem; margin-right:1.6rem; }
.nav-main a{ font-variation-settings:'wdth' 90,'wght' 600; font-size:0.9rem; min-height:44px; display:inline-flex; align-items:center; color:var(--ink); border-bottom:2px solid transparent; }
.nav-main a:hover{ border-bottom-color:var(--accent); }
.header-tel{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; min-width:44px; min-height:44px; border-radius:4px; color:var(--ink); font-variation-settings:'wdth' 90,'wght' 600; font-size:0.9rem; }
.header-tel span{ display:none; }
.header-tel:hover{ color:var(--accent); }
.site-header .btn{ min-height:44px; padding:0.6rem 0.85rem; }
/* Unter 360px lief der Header über (scrollWidth 346 bei 320px):
   WhatsApp wird zum Icon-Button, das Logo wird etwas kleiner.
   font-size:0 blendet den Text optisch aus, der Accessible Name bleibt. */
@media (max-width:389px){
  .site-header .btn-accent{ font-size:0; gap:0; padding-inline:0.7rem; }
  .site-header .btn-accent svg{ width:20px; height:20px; }
  .header-tel{ min-width:40px; }
}
@media (min-width:900px){ .site-header .btn{ padding-inline:1.35rem; } .header-inner{ gap:0.6rem; } }
@media (min-width:900px){
  :root{ --header-h:76px; }
  .nav-main{ display:flex; }
  .header-tel span{ display:inline; }
  .header-tel{ padding-inline:0.6rem; margin-right:0.4rem; }
}

/* ---------- Dunkle Bänder ---------- */
.on-ink{ background:var(--ink); color:var(--bg); }
.on-ink h1, .on-ink h2, .on-ink h3{ color:#fff; }
.on-ink .eyebrow{ color:#fff; opacity:0.75; }
.on-ink p{ color:rgba(247,245,241,0.82); }
/* Im Seitenkopf wie auf der Startseite: keine getrackten Versalien über der H1,
   sondern eine ruhige Zeile im Fließsatz. */
.lhero .eyebrow{
  text-transform:none; letter-spacing:0.02em; font-size:0.95rem;
  font-variation-settings:'wdth' 95,'wght' 500; opacity:0.9; margin-bottom:0.7rem;
}

/* ---------- 1 · Hero der Leistungsseite ---------- */
.lhero{ padding-block:2rem 0; overflow:hidden; }
.crumbs{ margin-bottom:0.9rem; }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:0 0.45rem; font-size:0.8rem; color:rgba(247,245,241,0.65); }
.crumbs li{ display:flex; align-items:center; gap:0.45rem; }
.crumbs li + li::before{ content:'/'; color:rgba(247,245,241,0.35); }
/* Tap-Target: 44px über Padding, nicht über Schriftgröße. */
.crumbs a, .crumbs [aria-current]{ display:inline-flex; align-items:center; min-height:44px; padding-block:0.2rem; }
.crumbs a{ text-decoration:underline; text-decoration-color:rgba(247,245,241,0.3); text-underline-offset:3px; }
.crumbs a:hover{ color:#fff; text-decoration-color:var(--accent); }
.crumbs [aria-current]{ color:rgba(247,245,241,0.9); }
.lhero-grid{ display:grid; gap:2rem; }
.lhero h1{ margin-bottom:1.1rem; max-width:20ch; }
.lhero-lead{ font-size:1.05rem; max-width:52ch; }
.lhero-actions{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1.8rem; }
.lhero-actions .btn{ flex:1 1 auto; }
.lhero-figure{
  margin-inline:calc(var(--gutter) * -1);
  aspect-ratio:4/3; overflow:hidden; background:#000;
}
.lhero-figure img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:700px){
  .lhero-actions .btn{ flex:0 0 auto; }
  .lhero-lead{ font-size:1.12rem; }
}
@media (min-width:900px){
  .lhero{ padding-block:2.6rem 4.5rem; }
  /* Textspalte breiter als das Foto: die H1 soll auf drei Zeilen passen. */
  .lhero-grid{ grid-template-columns:1.25fr minmax(280px,440px); gap:3.5rem; align-items:center; }
  .lhero-figure{
    margin-inline:0; aspect-ratio:4/5; border-radius:6px;
    border:1px solid rgba(247,245,241,0.14); box-shadow:var(--shadow);
  }
}

/* ---------- 2 · Umfang ---------- */
.umfang{ background:var(--bg); }
.umfang-grid{ display:grid; gap:2.6rem; }
.umfang-col h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); margin-bottom:1.2rem; }
.umfang-col > p{ color:var(--ink-muted); max-width:46ch; margin-bottom:1rem; }
/* Hängender Einzug statt Flex – sonst bricht ein <strong> am Zeilenanfang
   in eine eigene schmale Spalte um. */
.hairlist li{ position:relative; padding:0.75rem 0 0.75rem 1.4rem; border-top:1px solid var(--line); font-size:0.98rem; }
.hairlist li:last-child{ border-bottom:1px solid var(--line); }
.hairlist li::before{ content:'–'; position:absolute; left:0; top:0.75rem; color:var(--accent); }
.hairlist strong{ font-variation-settings:'wdth' 100,'wght' 600; }
.umfang-note{ margin-top:2rem; padding-top:1.2rem; border-top:2px solid var(--ink); font-size:0.95rem; max-width:62ch; }
@media (min-width:900px){
  .umfang-grid{ grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
  .umfang-col + .umfang-col{ border-left:1px solid var(--line); padding-left:4rem; margin-left:-4rem; }
}

/* ---------- 2b · Themenabschnitt (eigener H2-Block je Leistung) ---------- */
/* Eigener Ton, damit der Block sich vom Rest absetzt. Padding kommt wie bei
   allen Sections aus --gutter (detect meldet dafür cramped-padding – bekannt). */
.thema{ background:var(--bg-alt); }
.thema-grid{ display:grid; gap:1.8rem; }
.thema-text h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); margin-bottom:1.1rem; }
.thema-text p{ color:var(--ink-muted); max-width:62ch; }
.thema-text p + p{ margin-top:0.9rem; }
.thema-aside h3{ font-size:1.02rem; margin-bottom:0.6rem; }
.thema-aside .hairlist li{ font-size:0.94rem; }
@media (min-width:900px){
  .thema-grid{ grid-template-columns:1.3fr 1fr; gap:4rem; align-items:start; }
}

/* Verweise im Fließtext */
.tx-link{
  text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:0.08em; text-underline-offset:0.15em;
}
.tx-link:hover{ color:var(--accent); }

/* ---------- 3 · Ablauf als mitlaufender Zeitstrahl ----------
   Dunkles Band, damit die rote Linie trägt. Titel bleiben weiß:
   STARK-Rot auf --ink kommt nur auf 2,9:1 und wäre als Text nicht lesbar.
   Das Rot liegt deshalb allein auf Linie und Punkt, beide zusätzlich mit
   hellem Ring, damit die Grafik auch ohne Farbunterschied erkennbar ist. */
.ablauf{ background:var(--ink); color:var(--bg); }
.ablauf h2, .ablauf h3{ color:#fff; }
.ablauf .eyebrow{ color:#fff; opacity:0.75; }
.ablauf .lead{ color:rgba(247,245,241,0.82); }
.ablauf-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:2.2rem; }

.stufen-wrap{ position:relative; padding-inline-start:2.25rem; }
.spine{
  position:absolute; inset-block:0.5rem; inset-inline-start:calc(0.525rem - 1.5px);
  width:3px; background:rgba(247,245,241,0.16);
}
.spine::after{
  content:''; position:absolute; inset:0; background:var(--accent);
  transform-origin:top; transform:scaleY(var(--fuellung,0));
  transition:transform .12s linear;
}
.stufen{ display:grid; gap:clamp(2rem,4vw,3rem); }
.stufe{ position:relative; }
.stufe-marke{
  position:absolute; inset-inline-start:-2.25rem; top:0.45rem;
  width:1.05rem; display:grid; place-items:center;
}
.stufe-punkt{
  width:0.7rem; height:0.7rem; border-radius:50%;
  background:var(--ink); border:3px solid rgba(247,245,241,0.3);
  transition:transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.stufe.ist-dran .stufe-punkt{
  background:var(--accent); border-color:rgba(247,245,241,0.6); transform:scale(1.25);
}
.stufe-schritt{
  display:block; font-variation-settings:'wdth' 85,'wght' 600;
  text-transform:uppercase; letter-spacing:0.16em; font-size:0.72rem;
  color:rgba(247,245,241,0.55); margin-bottom:0.45rem;
}
.stufe h3{ font-size:1.15rem; }
.stufe p{ color:rgba(247,245,241,0.82); font-size:0.95rem; max-width:46ch; margin-top:0.4rem; }

/* Ohne JavaScript: Linie voll, alle Punkte aktiv. */
html:not(.js) .spine::after{ transform:scaleY(1); }
html:not(.js) .stufe-punkt{ background:var(--accent); border-color:rgba(247,245,241,0.6); transform:scale(1.25); }

@media (min-width:900px){
  .ablauf-grid{ grid-template-columns:minmax(240px,0.85fr) 1.4fr; gap:4rem; align-items:start; }
  .ablauf .sec-head{ position:sticky; top:calc(var(--header-h) + 2rem); margin-bottom:0; }
  .stufen-wrap{ padding-inline-start:3rem; }
  .stufe-marke{ inset-inline-start:-3rem; }
  .stufe h3{ font-size:1.3rem; }
}

/* ---------- 4 · Fotos ---------- */
.fotos{ background:var(--bg); }
.foto-grid{ display:grid; gap:0.9rem; }
.foto-grid figure{ min-width:0; }
.foto-grid .shot{ aspect-ratio:4/5; overflow:hidden; border-radius:4px; background:var(--bg-alt); }
.foto-grid .shot img{ width:100%; height:100%; object-fit:cover; }
/* Kleines Original (225×300) nicht hochskalieren – lieber klein und scharf. */
.foto-grid .shot.is-contain{ display:flex; align-items:center; justify-content:center; }
.foto-grid .shot.is-contain img{ object-fit:contain; width:auto; height:auto; max-width:225px; max-height:100%; }
.foto-grid figcaption{ margin-top:0.6rem; font-size:0.88rem; color:var(--ink-muted); text-wrap:pretty; }
.foto-grid.is-one .shot{ aspect-ratio:4/3; }
@media (min-width:700px){
  .foto-grid{ grid-template-columns:repeat(2,1fr); gap:1.2rem; }
  .foto-grid.is-one{ grid-template-columns:1fr; }
  .foto-grid.is-one .shot{ aspect-ratio:16/9; max-height:520px; }
}
@media (min-width:1000px){
  .foto-grid.is-three{ grid-template-columns:repeat(3,1fr); }
}
/* Rodung: fünf Fotos, das Querformat läuft über zwei Spalten und schließt die letzte Reihe. */
.foto-grid .is-wide .shot{ aspect-ratio:4/3; }
@media (min-width:700px){
  .foto-grid .is-wide{ grid-column:span 2; }
  .foto-grid .is-wide .shot{ aspect-ratio:8/5; }
}

/* ---------- 5 · Bewertungen ---------- */
.stimmen{ background:var(--surface); border-top:1px solid var(--line); }
.quotes{ border-top:1px solid var(--line); }
.quote{ padding:1.8rem 0; border-bottom:1px solid var(--line); }
.stars{ display:flex; gap:0.15rem; color:var(--accent); margin-bottom:0.8rem; }
.quote blockquote{ margin:0; font-size:1.12rem; text-wrap:pretty; max-width:54ch; }
.quote figcaption{ margin-top:0.8rem; font-size:0.88rem; color:var(--ink-muted); }
.quote figcaption strong{ color:var(--ink); font-variation-settings:'wdth' 100,'wght' 600; }
.quote-sum{ margin-top:1.4rem; font-size:0.95rem; }
.quote-sum .num{ font-size:1.15rem; }
.quote-sum a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; }
.quote-sum a:hover{ color:var(--accent); }
@media (min-width:900px){
  .quotes{ display:grid; grid-template-columns:1fr 1fr; }
  .quote{ padding:2.2rem 2.5rem 2.2rem 0; border-bottom:0; }
  .quote + .quote{ border-left:1px solid var(--line); padding-left:2.5rem; }
}

/* ---------- 6 · FAQ ---------- */
.faq{ background:var(--bg); }
.faq-list{ max-width:70ch; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  min-height:56px; display:flex; align-items:center;
  padding:0.9rem 2.6rem 0.9rem 0;
  font-variation-settings:'wdth' 95,'wght' 600; font-size:1.02rem; line-height:1.3;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:0; top:50%;
  width:1.4rem; height:1.4rem; margin-top:-0.7rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--num); font-size:1.3rem; color:var(--accent);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--accent); }
.faq-answer{ padding:0 0 1.2rem; color:var(--ink-muted); max-width:62ch; }

/* ---------- 7 · Einsatzgebiet (eine Karte, ohne Karteneinbettung) ---------- */
/* Schmaleres Band als die übrigen Sections – die Karte trägt den Abschnitt. */
.gebiet{ background:var(--bg-alt); padding-block:2.6rem; }
.gebiet-card{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  /* Engerer Schatten als --shadow: 1px Rahmen plus 40px Weichzeichnung ist die
     typische „schwebende Karte“ – hier liegt sie ruhig auf dem Ton auf. */
  box-shadow:0 10px 22px -16px rgba(58,48,32,0.45); padding:1.5rem 1.2rem;
  display:grid; gap:1.4rem; max-width:var(--wrap);
}
.gebiet-text h2{ font-size:clamp(1.45rem,3vw,1.9rem); margin-bottom:0.6rem; }
.gebiet-text p{ color:var(--ink-muted); max-width:52ch; }
.gebiet-adr{ margin-top:1.1rem; font-size:0.95rem; }
.gebiet-adr a{
  display:inline-flex; align-items:center; gap:0.45rem; min-height:44px;
  font-variation-settings:'wdth' 90,'wght' 600;
  text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:0.08em; text-underline-offset:0.18em;
}
.gebiet-adr a:hover{ color:var(--accent); }
.orte{ display:flex; flex-wrap:wrap; gap:0.45rem; }
.orte li{
  font-size:0.8rem; line-height:1.3; font-variation-settings:'wdth' 95,'wght' 500;
  border:1px solid var(--line); border-radius:3px; padding:0.4rem 0.6rem;
  color:var(--ink-muted); background:var(--bg);
}
@media (min-width:760px){
  .gebiet-card{ grid-template-columns:1.15fr 1fr; gap:2.5rem; padding:1.6rem 1.9rem; align-items:start; }
}
@media (min-width:900px){
  .gebiet{ padding-block:3.5rem; }
}

/* ---------- 10 · Weitere Leistungen als flache Foto-Kacheln ----------
   Steht unter dem Kontaktband. Bildsprache wie die Kacheln der Startseite,
   nur flacher und ohne Beschreibungszeile. „Ansehen →“ bleibt weiß –
   Rot auf dem dunklen Verlauf käme nur auf rund 3:1. */
.mehr{ background:var(--bg); border-top:1px solid var(--line); padding-block:1.9rem; }
.mehr .sec-head{ margin-bottom:0.85rem; }
.mehr h2{ font-size:clamp(1.3rem,2.2vw,1.55rem); }
.mehr .eyebrow{ margin-bottom:0.5rem; }
.mehr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.7rem; }
.kachel{
  position:relative; display:block; overflow:hidden; border-radius:5px;
  background:var(--ink); aspect-ratio:16/10; min-height:110px; isolation:isolate;
}
.kachel-media{ position:absolute; inset:0; }
.kachel-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.kachel::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(21,22,26,0) 24%, rgba(21,22,26,0.5) 52%, rgba(21,22,26,0.9) 100%);
}
.kachel-body{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; gap:0.15rem; padding:0.7rem 0.75rem; color:#fff;
}
.kachel-body h3{
  color:#fff; font-variation-settings:'wdth' 112,'wght' 700; text-transform:uppercase;
  letter-spacing:-0.005em; line-height:1.05; font-size:0.85rem; text-wrap:balance;
}
.kachel-go{
  display:inline-flex; align-items:center; gap:0.35rem;
  font-variation-settings:'wdth' 90,'wght' 600; font-size:0.74rem; color:#fff;
}
.kachel-go::after{ content:'→'; transition:transform .3s var(--ease); }
.kachel:hover .kachel-media img{ transform:scale(1.05); }
.kachel:hover .kachel-go::after{ transform:translateX(4px); }
.kachel-alle{
  background:var(--ink); aspect-ratio:16/10; min-height:110px; border-radius:5px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0.7rem 0.75rem; color:#fff;
}
.kachel-alle h3{
  color:#fff; font-variation-settings:'wdth' 112,'wght' 700; text-transform:uppercase;
  line-height:1.05; font-size:0.85rem;
}
.kachel-alle:hover{ background:#22242A; }
@media (min-width:900px){
  .mehr{ padding-block:1.9rem; }
  .mehr-grid{ grid-template-columns:repeat(4,1fr); gap:1rem; }
  /* Breitere Spalten: 16/10 würde hier 180px hoch – der Streifen soll flach bleiben. */
  .kachel, .kachel-alle{ aspect-ratio:16/9; min-height:132px; }
  .kachel-body, .kachel-alle{ padding:0.85rem 0.9rem; }
  .kachel-body h3, .kachel-alle h3{ font-size:0.95rem; }
}

/* ---------- 8 · Kontaktband ----------
   Links ein kompakter Infoblock, rechts das Formular als Karte –
   identisch zur Startseite. */
.kontakt{ background:var(--bg); }
.kontakt-grid{ display:grid; grid-template-columns:1fr; gap:2rem; }
.kontakt-tel{
  display:flex; width:fit-content; align-items:center; min-height:44px;
  font-family:var(--num); font-variant-numeric:tabular-nums; font-variation-settings:'wdth' 100,'wght' 600;
  font-size:clamp(1.6rem,5.5vw,2.1rem); letter-spacing:-0.02em; color:var(--ink);
}
.kontakt-tel:hover{ color:var(--accent); }
.kontakt-wa{ display:inline-flex; margin-top:0.7rem; }
.kontakt-hint{ color:var(--ink-muted); font-size:0.9rem; margin-top:0.9rem; max-width:34ch; }
.kontakt-dl{ margin-top:1.4rem; border-top:1px solid var(--line); }
.kontakt-dl dt{
  font-variation-settings:'wdth' 85,'wght' 600; text-transform:uppercase;
  letter-spacing:0.12em; font-size:0.7rem; color:var(--ink-muted); padding-top:0.9rem;
}
.kontakt-dl dd{ font-size:0.95rem; padding-bottom:0.9rem; border-bottom:1px solid var(--line); }
.kontakt-dl dd a{ text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.kontakt-dl dd a:hover{ color:var(--accent); }
.zeit{ display:inline-flex; align-items:baseline; gap:0.45rem; margin-right:1.1rem; white-space:nowrap; }
.zeit span:first-child{ color:var(--ink-muted); }
.zeit.is-off span:last-child{ color:var(--ink-soft); }

.form{ display:grid; gap:0.85rem; align-content:start; }
.form-card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); padding:1.25rem;
}
.form-head h3{ font-size:1.25rem; }
.field{ display:grid; gap:0.4rem; }
.field label{ font-variation-settings:'wdth' 90,'wght' 600; font-size:0.85rem; }
.field label small{ color:var(--ink-soft); font-weight:normal; font-variation-settings:'wdth' 90,'wght' 400; }
.field input, .field select, .field textarea{
  width:100%; min-height:48px; background:var(--surface); border:1px solid var(--line); border-radius:4px;
  padding:0.7rem 0.85rem; font-size:1rem; transition:border-color .3s var(--ease);
}
.field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315161A' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.9rem center; padding-right:2.4rem; }
.field textarea{ resize:vertical; min-height:96px; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--stone); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
.honeypot{ position:absolute; left:-9999px; top:-9999px; }
.form-privacy{ font-size:0.8125rem; color:var(--ink-muted); max-width:52ch; }
.form-privacy a{ display:inline-block; padding-block:0.6rem; text-decoration:underline; text-underline-offset:3px; }
.form .btn{ width:100%; }
.form-status{ font-size:0.92rem; padding:0.8rem 1rem; background:var(--bg-alt); border-radius:4px; }
.form-status[hidden]{ display:none; }
.form-status.is-error{ color:var(--accent-deep); }
.form button[disabled]{ opacity:0.55; cursor:progress; }
@media (min-width:700px){
  .form{ grid-template-columns:1fr 1fr; gap:0.85rem 1.1rem; }
  .form-head, .form .span, .form-privacy, .form .btn, .form-status, .rech-confirm{ grid-column:1 / -1; }
  .form .btn{ width:auto; justify-self:start; }
}
@media (min-width:900px){
  .kontakt{ padding-block:4rem; }
  .kontakt .sec-head{ margin-bottom:2rem; }
  .kontakt-grid{ grid-template-columns:0.8fr 1.1fr; gap:3.5rem; align-items:start; }
  .form-card{ padding:2rem; }
}

/* ---------- Mietpreise (nur minibagger-mieten) ---------- */
.table-scroll{ overflow-x:auto; }
.preise{ width:100%; min-width:0; }
/* Tabellen-Caption nur für Screenreader – die Überschrift darüber sagt es schon. */
.visually-hidden-caption{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.preise th, .preise td{ text-align:right; padding:0.6rem 0 0.6rem 0.7rem; border-bottom:1px solid var(--line); vertical-align:bottom; }
.preise th:first-child, .preise tbody th{ text-align:left; padding-left:0; }
.preise th{ font-variation-settings:'wdth' 85,'wght' 600; text-transform:uppercase; letter-spacing:0.08em; font-size:0.72rem; color:var(--ink-muted); font-weight:normal; }
.preise th small{ display:block; text-transform:none; letter-spacing:0; font-size:0.72rem; color:var(--ink-soft); }
.preise td{ font-family:var(--num); font-variant-numeric:tabular-nums; font-variation-settings:'wdth' 100,'wght' 600; font-size:1.05rem; color:var(--ink); white-space:nowrap; }
@media (min-width:700px){ .preise td{ font-size:1.3rem; } }
.preise tbody th{ font-family:'Archivo', sans-serif; text-transform:none; letter-spacing:0; font-size:0.9rem; color:var(--ink); font-variation-settings:'wdth' 95,'wght' 600; }
.preis-note{ font-size:0.8rem; color:var(--ink-soft); margin-top:0.6rem; }
.kond-list{ margin-top:1.6rem; }
.kond-list li{ padding:0.55rem 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; font-size:0.95rem; }
.kond-list li:last-child{ border-bottom:1px solid var(--line); }
.kond-list .num{ color:var(--ink); }
.kond-head{ font-variation-settings:'wdth' 95,'wght' 600; font-size:0.98rem; margin-top:1.8rem; }

/* ---------- Footer ----------
   Werte 1:1 aus dem <style>-Block von index.html – Startseite und Unterseiten
   sollen denselben Footer haben. Klassennamen bitte nicht umbenennen. */
.site-footer{ background:var(--ink); color:var(--bg); padding-block:2.6rem 2rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2rem; }
.footer-col{ min-width:0; }
.footer-col h3{
  font-variation-settings:'wdth' 85,'wght' 600; text-transform:uppercase; letter-spacing:0.14em;
  font-size:0.7rem; color:rgba(247,245,241,0.55); margin-bottom:0.4rem;
}
.footer-adr{ margin-top:1rem; font-size:0.9rem; color:rgba(247,245,241,0.75); }
.footer-links a, .footer-links span{
  display:flex; align-items:center; min-height:44px; font-size:0.9rem;
  color:rgba(247,245,241,0.82);
}
.footer-links a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* Ältere Footer-Variante (minibagger-mieten.html) – gleiche Trefferfläche. */
.footer-contact a{ display:inline-flex; align-items:center; min-height:44px; font-size:0.95rem; color:rgba(247,245,241,0.85); }
.footer-contact a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer-hours{ font-size:0.82rem; color:rgba(247,245,241,0.6); padding-top:0.7rem; line-height:1.5; }
.footer-copy{ font-size:0.78rem; color:rgba(247,245,241,0.5); margin-top:1rem; }
@media (min-width:700px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2.4rem; }
}
@media (min-width:1000px){
  .footer-grid{ grid-template-columns:1.2fr 1.2fr 1fr 0.9fr; gap:3rem; }
}

/* ---------- Reveal ----------
   Nur wenn JavaScript läuft: ohne .js bleibt alles sichtbar, auch wenn
   leistung.js nicht lädt. Die Klasse setzt das Inline-Skript im <head>. */
.js [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}