/* ==========================================================================
   Startseite, Neubau 03.10.2026
   Reihenfolge: Hero (D) · Fuer wen (L) · Leistungen (L getoent) · AVPQ (D) ·
   Ablauf (L) · Team (L getoent) · Karte (D) · FAQ (L) · Kontakt (D) ·
   Formular (L) · Footer (D). Hell/dunkel ueber .light/.light-tint (base.css).
   Alle Masse in rem: unter 440 px schrumpft die Seite im Verhaeltnis
   Breite/440 (iPhone 17 Pro Max ist die Vorlage). Ueberschriften in normaler
   Schreibweise, Montserrat. Untere Haelfte: Bausteine, die auch die Leistungs-
   und Stadtseiten nutzen (.problem, .guide, .badges, .world, .faq, .final ...).
   ========================================================================== */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.375rem;box-sizing:border-box}
.wrap *,.hx *,.hx-inner,.faq *,.contact-form-wrap,.contact-form *{box-sizing:border-box}
.light,.light-tint,.pq,.world,.final{position:relative;z-index:1}

/* Gemeinsamer Sektionskopf ------------------------------------------------- */
.sh{max-width:46rem;margin:0 auto clamp(2.25rem,4.5vw,3.5rem);text-align:center}
.sh .eyebrow{margin-bottom:.875rem}
.sh-title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.75rem,3.9vw,3rem);line-height:1.12;margin:0;text-wrap:balance;color:var(--ink);
}
.sh-lead{font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.6;color:var(--ink-70);margin:1rem auto 0;max-width:38rem;text-wrap:pretty}
.eyebrow{font-size:.75rem;letter-spacing:.22em}

.ki-note{font-size:.6875rem;color:var(--ink-50);margin:1.25rem 0 0;text-align:right;letter-spacing:.02em}

/* Buttons in normaler Schreibweise */
.btn{letter-spacing:.01em}
.btn-primary{font-size:1rem;padding:1.0625rem 1.875rem}
.btn-ghost{font-size:.9375rem;padding:1rem 1.75rem}

/* 01 Hero -------------------------------------------------------------------- */
.hx{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--bg)}
.hx-media{position:absolute;inset:0}
.hx-media img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;display:block}
.hx-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,12,18,.92) 0%,rgba(8,12,18,.72) 38%,rgba(8,12,18,.15) 70%,rgba(8,12,18,.05) 100%),
    linear-gradient(0deg,rgba(8,12,18,.95) 0%,rgba(8,12,18,.4) 26%,transparent 50%);
}
.hx-inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:8.5rem 1.375rem 0}
.hx-badge{
  display:inline-flex;align-items:center;gap:.625rem;
  font-size:.8125rem;font-weight:600;color:#fff;letter-spacing:.02em;
  padding:.5rem 1rem .5rem .75rem;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);
  margin-bottom:1.5rem;
}
.hx-badge:hover{color:#fff;border-color:var(--yellow)}
.hx-badge .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 .25rem rgba(135,199,31,.22)}
.hx-title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(2.25rem,5.6vw,4.75rem);line-height:1.04;margin:0 0 1.375rem;color:#fff;text-wrap:balance;
}
.hx-title span{display:block;white-space:nowrap}
.hx-title .accent{color:var(--purple-light)}
.hx-sub{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;color:rgba(255,255,255,.84);max-width:32rem;margin:0 0 2.125rem;font-weight:500}
.hx-actions{display:flex;gap:.875rem;flex-wrap:wrap;align-items:center}

.hx-trust{
  position:relative;z-index:2;list-style:none;
  width:calc(100% - 2.75rem);max-width:calc(var(--wrap) - 2.75rem);margin:clamp(3rem,6vw,4.5rem) auto 1.375rem;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(10,14,21,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);border-radius:1.125rem;overflow:hidden;
}
.hx-trust li{display:flex;flex-direction:column;gap:.25rem;padding:1.125rem 1.375rem;border-left:1px solid rgba(255,255,255,.1)}
.hx-trust li:first-child{border-left:0}
.hx-trust strong{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;color:#fff}
.hx-trust span{font-size:.8125rem;color:var(--ink-65)}
.hx-trust li:first-child strong{color:var(--yellow)}
.ki-note--hero{position:absolute;z-index:2;right:1.375rem;bottom:.375rem;margin:0;color:rgba(255,255,255,.5)}

@media (max-width:900px){
  .hx-scrim{background:linear-gradient(0deg,rgba(8,12,18,.97) 0%,rgba(8,12,18,.85) 45%,rgba(8,12,18,.35) 75%,rgba(8,12,18,.25) 100%)}
  .hx-media img{object-position:58% 30%}
  .hx-trust{grid-template-columns:repeat(2,1fr)}
  .hx-trust li:nth-child(3){border-left:0}
  .hx-trust li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
}
@media (max-width:560px){
  .hx-inner{padding:7rem 1.25rem 0}
  .hx-title{font-size:1.8125rem;margin-bottom:1rem}
  .hx-sub{font-size:1rem;margin-bottom:1.5rem}
  .hx-actions{flex-direction:column;align-items:stretch}
  .hx-actions .btn{justify-content:center}
  .hx-trust{width:calc(100% - 2.5rem);margin:2rem auto 1.5rem}
  .hx-trust li{padding:.875rem 1rem}
  .hx-trust strong{font-size:.9375rem}
  .hx-trust span{font-size:.75rem}
  .ki-note--hero{right:1.25rem;bottom:.25rem;font-size:.625rem}
}

/* Hero mit Firmenwagen-Video: gleiches Layout wie vorher (Text unten links),
   Video ruhig im Hintergrund, insgesamt abgedunkelt. Alles passt auf einen Bildschirm. */
.hx--autos{height:100svh;min-height:34rem}
.hx--autos .hx-media picture,.hx--autos .hx-media img,.hx-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.hx-video{opacity:0;transition:opacity .8s ease}
.hx-video.on{opacity:1}
.hx--autos .hx-scrim{background:
  linear-gradient(90deg,rgba(8,12,18,.88) 0%,rgba(8,12,18,.62) 40%,rgba(8,12,18,.3) 72%,rgba(8,12,18,.22) 100%),
  linear-gradient(0deg,rgba(8,12,18,.92) 0%,rgba(8,12,18,.35) 30%,rgba(8,12,18,.15) 60%,rgba(8,12,18,.45) 100%)}
@media (min-width:901px){
  .hx--autos .hx-inner{padding-top:min(8.5rem,14svh)}
  .hx--autos .hx-badge{margin-bottom:min(1.5rem,2.4svh)}
  .hx--autos .hx-title{font-size:clamp(2.25rem,min(5.6vw,8.6svh),4.75rem);margin-bottom:min(1.375rem,2.2svh)}
  .hx--autos .hx-sub{margin-bottom:min(2.125rem,3.4svh)}
  .hx--autos .hx-trust{margin-top:min(4.5rem,6svh);margin-bottom:min(1.375rem,2.4svh)}
}
@media (max-width:560px) and (orientation:portrait){
  /* Handy: Video nach oben schieben, damit die Autos (im 9:16-Video bei ca. 48 bis 70 % Hoehe)
     mittig im freien Bereich zwischen Kopfleiste und Ueberschrift stehen.
     Textblock ab Badge ca. 123vw hoch, Kopfleiste ca. 16vw, Autos-Mitte im Video bei 106vw. */
  .hx--autos .hx-media picture,.hx--autos .hx-media img,.hx--autos .hx-video{
    inset:auto 0 auto 0;top:calc(50svh - 159.5vw);height:177.78vw;object-fit:cover;object-position:50% 50%;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
  .hx--autos .hx-scrim{background:linear-gradient(0deg,rgba(8,12,18,.97) 0%,rgba(8,12,18,.9) 44%,rgba(8,12,18,.55) 52%,rgba(8,12,18,.12) 60%,rgba(8,12,18,.08) 82%,rgba(8,12,18,.45) 100%)!important}
}
@media (max-width:900px){
  .hx--autos{height:auto;min-height:100svh}
  .hx--autos .hx-scrim{background:linear-gradient(0deg,rgba(8,12,18,.97) 0%,rgba(8,12,18,.85) 42%,rgba(8,12,18,.4) 70%,rgba(8,12,18,.45) 100%)}
}

/* 02 Fuer wen ---------------------------------------------------------------- */
.fw{padding:clamp(4.5rem,9vw,7.5rem) 0}
.fw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.fw-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:1.25rem;overflow:hidden;
  box-shadow:0 1px 2px rgba(12,27,42,.04),0 .75rem 2rem rgba(12,27,42,.06);
  transition:transform .25s ease,box-shadow .25s ease;
}
.fw-card:hover{transform:translateY(-.25rem);box-shadow:0 1px 2px rgba(12,27,42,.05),0 1.25rem 2.75rem rgba(12,27,42,.12)}
.fw-img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-tint)}
.fw-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.fw-card:hover .fw-img img{transform:scale(1.04)}
.fw-body{display:flex;flex-direction:column;flex:1;padding:1.5rem 1.5rem 1.625rem}
.fw-tag{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.625rem}
.fw-card h3{text-wrap:balance;font-family:var(--font-display);font-weight:700;font-size:1.375rem;line-height:1.2;letter-spacing:-.01em;margin:0 0 .625rem;color:var(--ink)}
.fw-card p{font-size:.9375rem;line-height:1.6;color:var(--ink-70);margin:0 0 1.125rem}
.ticks{list-style:none;padding:0;margin:0 0 1.375rem;display:grid;gap:.5rem}
.ticks li{display:flex;gap:.625rem;align-items:flex-start;font-size:.875rem;font-weight:600;color:var(--ink-85);line-height:1.45}
.ticks svg{width:1.125rem;height:1.125rem;flex:none;color:#5a9a10;margin-top:.0625rem}
.fw-links{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.fw-ask{display:inline-flex;align-items:center;line-height:1.2;padding:.75rem 1.125rem;border-radius:var(--radius-pill);background:var(--purple);color:#fff;font-weight:700;font-size:.875rem;transition:background .2s ease}
.fw-ask:hover{background:var(--purple-deep);color:#fff}
.fw-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9375rem;color:var(--accent)}
.fw-link svg{width:1rem;height:1rem;transition:transform .2s ease}
.fw-link:hover svg{transform:translateX(.25rem)}
.fw-card--lead{border-color:rgba(14,107,151,.35)}
.fw-card--lead .fw-tag::after{content:'Schwerpunkt';margin-left:.625rem;padding:.1875rem .5rem;border-radius:var(--radius-pill);background:var(--yellow);color:var(--yellow-ink);font-size:.625rem;letter-spacing:.06em;vertical-align:.0625rem}

@media (max-width:900px){
  .fw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fw-card--lead{grid-column:1/-1;flex-direction:row}
  .fw-card--lead .fw-img{aspect-ratio:auto;flex:0 0 46%}
}
@media (max-width:560px){
  .fw-grid{grid-template-columns:minmax(0,1fr);gap:1rem}
  .fw-card--lead{flex-direction:column}
  .fw-card--lead .fw-img{aspect-ratio:16/10;flex:none}
  .fw-body{padding:1.25rem 1.25rem 1.375rem}
  .fw-card h3{font-size:1.25rem}
}

/* 03 Leistungen -------------------------------------------------------------- */
.lx{padding:clamp(4.5rem,9vw,7.5rem) 0}
.lx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.lx-card{
  position:relative;display:flex;flex-direction:column;gap:.5rem;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:1.125rem;padding:1.5rem 1.375rem 1.375rem;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.lx-card:hover{transform:translateY(-.25rem);border-color:rgba(14,107,151,.4);box-shadow:0 1rem 2.25rem rgba(12,27,42,.1);color:inherit}
.lx-icon{display:flex;width:2.75rem;height:2.75rem;border-radius:.75rem;align-items:center;justify-content:center;background:rgba(14,107,151,.09);color:var(--purple);margin-bottom:.5rem}
.lx-icon svg{width:1.375rem;height:1.375rem}
.lx-card h3{text-wrap:balance;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;line-height:1.25;margin:0;color:var(--ink)}
.lx-card p{font-size:.875rem;line-height:1.5;color:var(--ink-65);margin:0}
.lx-more{position:absolute;top:1.5rem;right:1.25rem;color:var(--ink-40);transition:color .2s ease,transform .2s ease}
.lx-more svg{width:1.125rem;height:1.125rem;display:block}
.lx-card:hover .lx-more{color:var(--purple);transform:translateX(.1875rem)}
.lx-card:first-child{border-color:rgba(14,107,151,.35)}
.lx-card:first-child .lx-icon{background:var(--purple);color:#fff}

@media (max-width:900px){.lx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .lx-grid{gap:.625rem}
  .lx-card{padding:1rem .875rem 1.125rem;gap:.375rem}
  .lx-icon{width:2.25rem;height:2.25rem;border-radius:.625rem;margin-bottom:.25rem}
  .lx-icon svg{width:1.125rem;height:1.125rem}
  .lx-card h3{font-size:.875rem}
  .lx-card p{font-size:.75rem}
  .lx-more{top:1rem;right:.75rem}
  .lx-more svg{width:.9375rem;height:.9375rem}
}

/* 04 Praequalifizierung (dunkel) ------------------------------------------- */
.pq{padding:clamp(4.5rem,10vw,7.5rem) 1.375rem;background:var(--bg)}
.pq-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(1.75rem,5vw,4rem);align-items:center}
@media (max-width:820px){.pq-grid{grid-template-columns:minmax(0,1fr)}}
.pq-badge{display:flex;flex-direction:column;align-items:center;gap:1.125rem;background:#fff;border-radius:1.125rem;padding:clamp(1.5rem,4vw,2.125rem) clamp(1.25rem,3vw,1.75rem);box-shadow:0 1.125rem 3.125rem rgba(0,0,0,.38)}
.pq-badge img{display:block;width:clamp(8.75rem,22vw,12.5rem);height:auto}
.pq-badge-meta{display:flex;flex-direction:column;gap:.3125rem;text-align:center}
.pq-badge-meta strong{font-size:.84375rem;line-height:1.4;color:#0e6b97;font-weight:700;text-wrap:balance}
.pq-badge-meta span{font-size:.78125rem;line-height:1.45;color:#4a5560;font-weight:500;text-wrap:balance}
.pq-text h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.12;margin:0 0 1.25rem;text-wrap:balance}
.pq-text h2 span{color:var(--purple-light)}
.pq-text .eyebrow{margin-bottom:1rem}
.pq-text p{font-size:1rem;line-height:1.62;color:var(--ink-75);font-weight:500;margin:0 0 .875rem;max-width:34rem}
.pq-text p strong{color:#fff}
.pq-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 .625rem;padding:0}
.pq-chips li{font-size:.8125rem;font-weight:600;color:var(--ink-80);background:var(--purple-surface);border:1px solid var(--purple-border);border-radius:99px;padding:.3125rem .8125rem}
.pq-note{font-size:.84375rem !important;color:var(--ink-55) !important;margin:0 !important}

/* 05 Ablauf ---------------------------------------------------------------- */
.ab{padding:clamp(4.5rem,9vw,7.5rem) 0}
.ab-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;counter-reset:none}
.ab-step{position:relative;padding:1.75rem 1.5rem 1.625rem;background:#fff;border:1px solid var(--line);border-radius:1.125rem}
.ab-no{
  display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;
  font-family:var(--font-display);font-weight:800;font-size:.9375rem;color:#fff;background:var(--purple);
  box-shadow:0 0 0 .375rem rgba(14,107,151,.1);margin-bottom:1.125rem;
}
.ab-step:last-child .ab-no{background:var(--yellow);color:var(--yellow-ink);box-shadow:0 0 0 .375rem rgba(135,199,31,.18)}
.ab-step h3{text-wrap:balance;font-family:var(--font-display);font-weight:700;font-size:1.1875rem;margin:0 0 .5rem;color:var(--ink)}
.ab-step p{font-size:.9375rem;line-height:1.58;color:var(--ink-70);margin:0}
@media (min-width:901px){
  .ab-step:not(:last-child)::after{
    content:'';position:absolute;top:3.125rem;left:calc(100% - .25rem);width:1.75rem;height:2px;z-index:1;
    background:repeating-linear-gradient(90deg,rgba(14,107,151,.45) 0 .375rem,transparent .375rem .625rem);
  }
}
@media (max-width:900px){.ab-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .ab-list{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .ab-step{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;padding:1.125rem 1.125rem 1.25rem}
  .ab-no{grid-row:span 2;margin:0;width:2.5rem;height:2.5rem;font-size:.875rem}
  .ab-step h3{font-size:1.0625rem;margin:.375rem 0 .375rem}
  .ab-step p{font-size:.875rem}
}

/* 06 Team ---------------------------------------------------------------------- */
.tm{padding:clamp(4.5rem,9vw,7.5rem) 0}
.tm-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.75rem,4.5vw,4rem);align-items:center}
.tm-photo{border-radius:1.375rem;overflow:hidden;aspect-ratio:16/11;box-shadow:0 1.5rem 3.5rem rgba(12,27,42,.18)}
.tm-photo img{width:100%;height:100%;object-fit:cover;object-position:55% 50%;display:block}
.tm-text .eyebrow{margin-bottom:.875rem}
.tm-text .sh-title{margin-bottom:1.125rem}
.tm-text p{font-size:1.0625rem;line-height:1.62;color:var(--ink-75);margin:0 0 1.75rem;max-width:32rem}
.tm-text p strong{color:var(--ink)}
.tm-stats{display:flex;gap:clamp(1.5rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line-strong)}
.tm-stats .num{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.4vw,2.75rem);line-height:1;color:var(--purple)}
.tm-stats .label{font-size:.8125rem;font-weight:600;color:var(--ink-60);margin-top:.375rem}
.tm-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.tm-tile{position:relative;margin:0;border-radius:1rem;overflow:hidden;aspect-ratio:4/3}
.tm-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.tm-tile:hover img{transform:scale(1.05)}
.tm-tile figcaption{
  position:absolute;left:.75rem;bottom:.75rem;padding:.375rem .75rem;border-radius:var(--radius-pill);
  background:rgba(10,14,21,.72);backdrop-filter:blur(6px);color:#fff;font-size:.75rem;font-weight:700;
}
@media (max-width:900px){
  .tm-grid{grid-template-columns:minmax(0,1fr)}
  .tm-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .tm-text p{font-size:1rem}
  .tm-stats{gap:1.25rem;justify-content:space-between}
  .tm-stats .num{font-size:1.875rem}
  .tm-stats .label{font-size:.75rem}
  .tm-strip{gap:.625rem}
  .tm-tile{border-radius:.75rem}
  .tm-tile figcaption{left:.5rem;bottom:.5rem;font-size:.6875rem;padding:.3125rem .625rem}
}

/* 08 FAQ (hell) ------------------------------------------------------------- */
.faq-band{padding:clamp(4.5rem,9vw,7.5rem) 0}
.faq{padding:0 1.375rem;max-width:51.25rem;margin:0 auto}
.faq-list{display:flex;flex-direction:column;gap:.75rem}
.faq details{background:var(--surface);border:1px solid var(--line-strong);border-radius:1rem;padding:0 1.5rem}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:.875rem;
  padding:1.25rem 0;font-weight:700;font-size:1rem;color:var(--ink);
}
.faq summary .marker{color:var(--accent);font-size:1.25rem;flex:none;transition:transform .2s ease}
.faq details[open] summary .marker{transform:rotate(45deg)}
.faq .answer{padding:0 0 1.25rem;font-size:.9375rem;line-height:1.62;color:var(--ink-72);font-weight:500}
.faq .answer strong{color:var(--ink)}
@media (max-width:560px){
  .faq details{padding:0 1.125rem}
  .faq summary{font-size:.9375rem;padding:1.0625rem 0}
  .faq .answer{font-size:.875rem}
}

/* 09 Kontakt (dunkel) -------------------------------------------------------- */
.final{padding:clamp(4rem,9vw,7rem) 1.375rem;text-align:center;background:var(--bg)}
.final h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.875rem,4.6vw,3.25rem);margin:0 0 1rem;line-height:1.08;text-wrap:balance}
.final p{font-size:1.0625rem;color:var(--ink-75);font-weight:500;margin:0 auto 1.875rem;max-width:32rem;line-height:1.55}
.final .eyebrow{margin-bottom:1rem}
.final-methods{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:center;margin-top:1.5rem}
.final-methods a{font-size:.9375rem;font-weight:600;color:var(--ink-80)}
.final-methods a:hover{color:#fff}
.final--photo{position:relative;overflow:hidden;padding:clamp(6rem,13vw,10rem) 1.375rem}
.final-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.final-scrim{position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(8,12,18,.82) 0%,rgba(8,12,18,.62) 60%,rgba(8,12,18,.45) 100%)}
.final-inner{position:relative;z-index:2;max-width:46rem;margin:0 auto}

/* 10 Formular (hell) ------------------------------------------------------- */
.form-band{padding:clamp(4rem,8vw,6.5rem) 0}
.sh--center{text-align:center}
.zw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.25rem;align-items:stretch;margin-top:2rem}
.zw *{box-sizing:border-box}
.zw-card{background:#fff;border:1px solid var(--line);border-radius:1.25rem;padding:1.75rem;box-shadow:0 1rem 2.5rem rgba(12,27,42,.07);display:flex;flex-direction:column}
.zw .zw-card .contact-form{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin-top:1.125rem;flex:1}
.zw .contact-form .row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.zw .contact-form input,.zw .contact-form textarea{width:100%;min-width:0;background:var(--paper)}
.zw .contact-form label{min-width:0}
.zw-tag{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem}
.zw-card h3{font-family:var(--font-display);font-weight:700;font-size:1.375rem;line-height:1.2;margin:0;color:var(--ink);text-wrap:balance}
.zw-lead{font-size:.9375rem;line-height:1.5;color:var(--ink-70);margin:.5rem 0 0;text-wrap:pretty}
.zw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:1.125rem 0 1.25rem}
.zw-opt{display:flex;align-items:center;gap:.625rem;padding:.625rem .75rem;border:1.5px solid var(--line-strong);border-radius:.875rem;background:#fff;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s;min-height:3.25rem}
.zw-opt:hover{border-color:rgba(14,107,151,.5)}
.zw-opt:has(input:checked){border-color:var(--purple);box-shadow:0 0 0 .1875rem rgba(14,107,151,.12)}
.zw-opt:has(input:focus-visible){outline:2px solid var(--purple);outline-offset:2px}
.zw-ic{display:flex;flex:none;width:2rem;height:2rem;border-radius:.625rem;align-items:center;justify-content:center;background:rgba(14,107,151,.09);color:var(--purple)}
.zw-ic svg{width:1.0625rem;height:1.0625rem}
.zw-opt:has(input:checked) .zw-ic{background:var(--purple);color:#fff}
.zw-name{font-size:.875rem;font-weight:600;line-height:1.25;color:var(--ink)}
.zw-opt--rat{grid-column:1/-1;border-style:dashed;background:var(--paper)}
.zw-opt--rat:has(input:checked){border-style:solid;background:#fff}
.zw-go{margin-top:auto;justify-content:center;width:100%}
.zw-card--genau .form-note{font-size:.75rem;color:var(--ink-50);margin:.625rem 0 0;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zw-tabs{display:none}
@media (max-width:900px){
  .zw{grid-template-columns:minmax(0,1fr);margin-top:1rem}
  .zw-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;margin:1.5rem auto 0;padding:.3125rem;background:#fff;border:1px solid var(--line-strong);border-radius:999px;max-width:26rem;box-shadow:0 .5rem 1.5rem rgba(12,27,42,.06)}
  .zw-tabs button{font:inherit;font-weight:700;font-size:.9375rem;border:0;border-radius:999px;padding:.75rem .5rem;background:none;color:var(--ink-70);cursor:pointer;transition:background .2s,color .2s}
  .zw-tabs button[aria-selected="true"]{background:linear-gradient(135deg,var(--purple),var(--purple-light));color:#fff}
  /* Hinweis „hier umschalten“: der inaktive Reiter leuchtet kraeftig (Neon-Tuerkis,
     pulsierender Lichtschein, Lichtstreifen), bis einmal umgeschaltet wurde */
  .zw-tabs{position:relative;overflow:visible}
  .zw-tabs button{position:relative;overflow:hidden;z-index:1}
  .zw-tabs:not(.is-used) button[aria-selected="false"]{
    color:#0b4f5c;background:linear-gradient(135deg,#bff3ec,#e3fbf7);
    box-shadow:inset 0 0 0 1.5px rgba(26,163,154,.55),0 0 .75rem rgba(47,211,196,.35);
    animation:zwGlow 2.2s ease-in-out infinite}
  .zw-tabs:not(.is-used) button[aria-selected="false"]::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-120%);animation:zwSweep 2.2s ease-in-out infinite}
  @keyframes zwGlow{
    0%,100%{box-shadow:inset 0 0 0 1.5px rgba(26,163,154,.5),0 0 .5rem rgba(47,211,196,.25)}
    50%{box-shadow:inset 0 0 0 1.5px rgba(26,163,154,.85),0 0 1.125rem .125rem rgba(47,211,196,.5)}}
  @keyframes zwSweep{0%,30%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
  @media (prefers-reduced-motion:reduce){.zw-tabs button,.zw-tabs button::after{animation:none!important}}
  .zw.is-js[data-show="kurz"] [data-zw-pane="genau"],.zw.is-js[data-show="genau"] [data-zw-pane="kurz"]{display:none}
}
@media (max-width:560px){.zw-card{padding:1.25rem}.zw-grid{grid-template-columns:minmax(0,1fr)}.zw .contact-form .row2{grid-template-columns:minmax(0,1fr)}}
.contact-form-wrap{padding:0 1.375rem;max-width:40rem;margin:0 auto}
.contact-form{
  display:flex;flex-direction:column;gap:.875rem;
  border:1px solid var(--line-strong);border-radius:1.25rem;background:var(--surface-2);
  padding:clamp(1.625rem,4vw,2.375rem);
}
.light .contact-form{box-shadow:0 1rem 2.5rem rgba(12,27,42,.07)}
.contact-form label{display:flex;flex-direction:column;gap:.375rem;font-size:.8125rem;font-weight:700;color:var(--ink-70);letter-spacing:.02em}
.contact-form input,.contact-form textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);border-radius:.75rem;
  padding:.8125rem 1rem;resize:vertical;
}
.light .contact-form input,.light .contact-form textarea{background:var(--paper)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--purple-light)}
.contact-form textarea{min-height:6.875rem}
.contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}
.contact-form button{margin-top:.375rem;justify-content:center;width:100%}
.contact-form .form-note{font-size:.75rem;color:var(--ink-50);margin:0}
@media (max-width:560px){.contact-form .row2{grid-template-columns:1fr}}

/* 07 Einsatzgebiet (dunkel) ---------------------------------------------------
   Karte und Interaktion unveraendert aus dem Claude-Design-Handoff. */
.world{padding:clamp(4.5rem,10vw,7.5rem) 1.375rem;max-width:var(--wrap);margin:0 auto;text-align:center}
.world .eyebrow{margin-bottom:1rem}
.world h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.75rem,4.4vw,3.125rem);margin:0;line-height:1.1;text-wrap:balance}
.world h2 .accent,.world h2 .outline{color:var(--purple-light)}
.world .lead{max-width:35rem;margin:1.125rem auto 0}
.eg-map-wrap{position:relative;max-width:none;margin:clamp(1.875rem,4.6vw,3.125rem) auto 0}
.eg-map{position:relative}
.eg-map svg{display:block;width:100%;height:auto;max-height:85vh;touch-action:auto}
.eg-map svg.dragging{cursor:grabbing}

.eg-shape{fill:#1c3050;stroke:rgba(255,255,255,.35);stroke-width:1;stroke-opacity:.55;transition:fill .18s;cursor:pointer}
.eg-shape:hover{fill:#2c4972}
.eg-shape.is-core{fill:var(--yellow);stroke:#eafbee;stroke-opacity:.7}
.eg-shape.is-core:hover{fill:#9fe040}
.eg-shape.is-ext{fill:#1c3050;stroke:rgba(255,255,255,.6);stroke-dasharray:5 4;stroke-opacity:.8}
.eg-shape.is-ext:hover{fill:#2c4972}
.eg-shape.selected{stroke:#fff;stroke-opacity:1;stroke-width:1.6}
.eg-kreis-outline{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.4}

.eg-pin{pointer-events:none}
.eg-pin circle{fill:#fff}
.eg-pin rect{fill:rgba(9,13,19,.9);stroke:rgba(255,255,255,.1)}
.eg-pin text{font-family:var(--font-body);font-size:12.5px;font-weight:600;fill:var(--ink-90);dominant-baseline:middle}
.eg-pin.is-core text{fill:#fff}
.eg-pin.is-ext text{fill:var(--ink-90)}
.eg-pin.dim{opacity:.35;transition:opacity .18s}

.eg-hint{margin-top:.875rem;font:400 .75rem/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--ink-40);text-align:center}
.eg-credit{margin-top:.375rem;font-size:.65625rem;color:var(--ink-40);text-align:center}

.eg-pop{
  position:absolute;width:16.5rem;max-height:15.625rem;overflow:auto;overscroll-behavior:contain;
  background:#0e161f;border:1px solid rgba(255,255,255,.12);border-radius:.75rem;padding:1rem 1rem .875rem;
  box-shadow:0 1.125rem 3.125rem rgba(0,0,0,.6);opacity:0;transform:translateY(.375rem);pointer-events:none;
  text-align:left;transition:opacity .16s,transform .16s;z-index:5;
}
.eg-pop.open{opacity:1;transform:translateY(0);pointer-events:auto}
.eg-pop h3{margin:0 0 .125rem;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;color:#fff}
.eg-pop .eg-role{font:700 .65625rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);margin-bottom:.75rem}
.eg-pop .eg-role.ext{color:var(--ink-50)}
.eg-pop dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:.375rem .875rem;font-size:.8125rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.09)}
.eg-pop dt{color:var(--ink-40)}
.eg-pop dd{margin:0;color:var(--ink-90);text-align:right;font-variant-numeric:tabular-nums}
.eg-pop p.hello{margin:.75rem 0 0;font-size:.84375rem;line-height:1.5;color:var(--ink-90)}
.eg-pop p.note{margin:.375rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--ink-60)}
.eg-pop .eg-close{position:absolute;top:.625rem;right:.625rem;width:1.375rem;height:1.375rem;border:0;border-radius:.375rem;background:transparent;color:var(--ink-40);font-size:.9375rem;line-height:1;cursor:pointer}
.eg-pop .eg-close:hover{background:rgba(255,255,255,.07);color:#fff}
.eg-pop .eg-more{display:flex;align-items:center;justify-content:center;gap:.375rem;margin-top:.875rem;padding:.625rem .875rem;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--purple),var(--purple-light));color:#051627;font-weight:700;font-size:.8125rem;text-decoration:none}
.eg-pop .eg-more:hover{filter:brightness(1.08)}

.eg-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;margin-top:clamp(1.5rem,3.6vw,2.25rem)}
.eg-chip{appearance:none;font:inherit;font-size:.875rem;padding:.6875rem 1.25rem;border-radius:var(--radius-pill);cursor:pointer;background:transparent;color:var(--ink-85);border:1px solid var(--line-strong);transition:.16s}
.eg-chip:hover{border-color:rgba(255,255,255,.4);background:var(--surface)}
.eg-chip.is-core{border-color:var(--yellow);color:var(--yellow)}
.eg-chip.is-core:hover{background:rgba(135,199,31,.14)}
.eg-chip.is-ext{border-style:dashed;color:var(--ink-50)}
.eg-chip.active{background:#fff;color:#0a1018;border-color:#fff}
.eg-chip.is-core.active{background:var(--yellow);color:#132b06;border-color:var(--yellow)}

/* ==========================================================================
   Bausteine fuer Leistungs- und Stadtseiten (bis zu deren Umbau unveraendert
   im Verhalten, nur auf rem umgestellt)
   ========================================================================== */
.section{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto}
.section-pad{padding:6.25rem 1.375rem}
.section-head{max-width:43.75rem;margin:0 auto 3.25rem;text-align:center}
.section-head .eyebrow{margin-bottom:.875rem}
.section-head .h2{margin-bottom:.875rem}
.section--tint{position:relative;z-index:1;background:var(--bg-soft);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
@media (max-width:900px){.section-pad{padding:4.5rem 1.25rem}}

.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;align-items:center}

.problem{position:relative;z-index:1;padding:clamp(4.375rem,11vw,8.125rem) 1.375rem;text-align:center;max-width:62.5rem;margin:0 auto}
.problem h1,.problem h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.75rem,4.6vw,3.25rem);line-height:1.1;margin:0 0 1.75rem;text-wrap:balance}
.problem .eyebrow{margin-bottom:1.125rem}
.problem p.intro{text-wrap:balance;font-size:clamp(1rem,2vw,1.1875rem);line-height:1.6;color:var(--ink-75);max-width:37.5rem;margin:0 auto;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;max-width:56.25rem;margin:0 auto}
.chip{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--radius-pill);padding:.75rem 1.25rem;font-size:.875rem;font-weight:600;color:var(--ink-85)}
.problem .chips{margin-top:2rem}
.problem .closer{font-size:clamp(1.125rem,2.2vw,1.4375rem);font-weight:700;margin:2.125rem 0 0;color:#fff}
.problem .closer em{color:var(--yellow);font-style:normal}

.guide{padding:clamp(4.375rem,10vw,7.5rem) 1.375rem}
.guide-single{max-width:45rem;margin:0 auto;text-align:center}
.guide h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.75rem,4vw,2.875rem);line-height:1.1;margin:0 0 1.125rem;text-wrap:balance}
.guide .eyebrow{margin-bottom:1rem}
.guide p{font-size:1.03125rem;line-height:1.6;color:var(--ink-78);font-weight:500;margin:0 0 1.875rem}
.guide p strong{color:var(--ink)}
.badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;text-align:left}
.leistung-grid>*{min-width:0}
.badge{hyphens:auto;overflow-wrap:break-word;background:var(--purple-surface);border:1px solid var(--purple-border);border-radius:.875rem;padding:1rem 1.125rem;font-weight:700;font-size:.875rem;line-height:1.4}
@media (max-width:640px){.badges{grid-template-columns:1fr}}

.leistung-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:clamp(1.875rem,5vw,3.75rem);align-items:center;text-align:left;max-width:60rem;margin:0 auto}
.leistung-photo-col{position:relative;display:flex;flex-direction:column;align-items:center}
.leistung-photo-col .glow{position:absolute;inset:8% 12%;background:radial-gradient(circle,rgba(31,156,216,.4),transparent 70%);filter:blur(50px)}
.leistung-photo-col img{position:relative;width:100%;max-width:25rem;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:1.25rem;display:block;filter:drop-shadow(0 1.5rem 3.125rem rgba(0,0,0,.5))}
@media (max-width:900px){.leistung-grid{text-align:center}}

/* Ueberschriften der Bausteine auf Handybreite an die Fensterbreite haengen */
@media (max-width:430px){
  .h2{font-size:1.6875rem}
}

/* Startseite: Firmenwagen unter der Karte */
.eg-auto{margin:clamp(2.5rem,6vw,4rem) auto 0;max-width:60rem}
.eg-auto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:1.25rem;box-shadow:0 1.5rem 3rem rgba(0,0,0,.45)}
.eg-auto figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.375rem 1rem;margin-top:.875rem;text-align:left}
.eg-auto figcaption strong{font-family:var(--font-display);font-size:1.0625rem;color:#fff}
.eg-auto figcaption span{font-size:.6875rem;color:var(--ink-50);letter-spacing:.02em}

/* Stadtseiten-Kopf mit Foto: volle Breite, Inhalt bleibt in der Mitte */
.problem.stadt-hero{max-width:none;padding-left:max(1.375rem,calc((100% - 59.75rem) / 2));padding-right:max(1.375rem,calc((100% - 59.75rem) / 2));padding-bottom:clamp(5rem,12vw,9rem)}

/* Stadtseiten: Leistungen, Stadtteile, FAQ (SEO-Ausbau 05.10.) */
.stadt-block{padding:clamp(4rem,9vw,6.5rem) 1.375rem}
.stadt-block .sh{max-width:46rem;margin:0 auto;text-align:center}
.stadt-block .sh p{color:var(--ink-66);margin:1rem auto 0;line-height:1.6}
.stadt-leistungen{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:var(--wrap);margin:2.5rem auto 0}
@media (max-width:1100px){.stadt-leistungen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stadt-leistungen{grid-template-columns:1fr}}
.stadt-leistung{display:flex;gap:.875rem;align-items:flex-start;padding:1.125rem 1.125rem;border-radius:1rem;background:var(--surface,#fff);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.stadt-leistung:hover{transform:translateY(-2px);border-color:var(--purple)}
.stadt-leistung svg{flex:none;width:1.5rem;height:1.5rem;color:var(--purple);margin-top:.125rem}
.stadt-leistung strong{display:block;font-family:var(--font-display);font-size:.9375rem;line-height:1.3}
.stadt-leistung small{display:block;margin-top:.25rem;font-size:.8125rem;line-height:1.45;color:var(--ink-66)}
.stadt-teile{list-style:none;padding:0;margin:2rem auto 0;max-width:52rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.stadt-teile li{padding:.5rem 1rem;border-radius:var(--radius-pill);border:1px solid var(--line);font-weight:600;font-size:.875rem;color:var(--ink)}
.stadt-faq{max-width:46rem;margin:2.25rem auto 0;display:grid;gap:.625rem}
.stadt-faq details{border:1px solid var(--line);border-radius:.875rem;background:var(--surface,#fff);padding:0 1.125rem}
.stadt-faq summary{cursor:pointer;list-style:none;padding:1rem 1.75rem 1rem 0;font-weight:700;font-size:.9375rem;position:relative}
.stadt-faq summary::-webkit-details-marker{display:none}
.stadt-faq summary::after{content:'+';position:absolute;right:0;top:.875rem;font-size:1.25rem;color:var(--purple)}
.stadt-faq details[open] summary::after{content:'–'}
.stadt-faq p{margin:0 0 1.125rem;color:var(--ink-66);line-height:1.6;font-size:.9375rem}
.stadt-teile li:has(a){padding:0}
.stadt-teile li a{display:block;padding:.5rem 1rem;color:inherit;text-decoration:none;border-radius:inherit}
.stadt-teile li a:hover{color:var(--purple)}

/* Ueber uns (05.10.) */
.uu-zahlen{list-style:none;padding:0;margin:2.5rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:40rem}
.uu-zahlen li{display:flex;flex-direction:column;gap:.25rem;padding:1rem .75rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface)}
.uu-zahlen strong{font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2rem);color:var(--purple-light)}
.uu-zahlen span{font-size:.8125rem;color:var(--ink-66);line-height:1.35}
.uu-grid{display:grid;gap:1rem;max-width:var(--wrap);margin:2.5rem auto 0}
.uu-grid--3{grid-template-columns:repeat(3,1fr)}
.uu-grid--2{grid-template-columns:repeat(2,1fr);max-width:60rem}
@media (max-width:900px){.uu-grid--3,.uu-grid--2{grid-template-columns:1fr}}
.uu-card{padding:1.5rem 1.375rem;border:1px solid var(--line);border-radius:1.125rem;background:var(--surface)}
.uu-card h3{margin:0 0 .5rem;font-family:var(--font-display);font-size:1.1875rem}
.uu-card p{margin:0;color:var(--ink-66);line-height:1.6;font-size:.9375rem}
.uu-nr{display:block;font-family:var(--font-display);font-weight:800;color:var(--purple);margin-bottom:.5rem}
.uu-team{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;max-width:var(--wrap);margin:0 auto}
@media (max-width:900px){.uu-team{grid-template-columns:1fr}}
.uu-team-img{margin:0}
.uu-team-img img{display:block;width:100%;height:auto;border-radius:1.25rem}
.uu-team-img figcaption,.uu-hinweis{font-size:.6875rem;color:var(--ink-50);text-align:right;margin-top:.625rem}
.uu-team-text p{color:var(--ink-66);line-height:1.65;margin:1rem 0 0}
.uu-autos{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.5rem}
.uu-autos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:.875rem}
.uu-siegel{width:8rem;height:auto;margin:0 auto 1.5rem;display:block;border-radius:1rem;background:#fff;padding:.5rem}
.tm-tile{position:relative}
.tm-ki{position:absolute;top:.5rem;right:.5rem;font-size:.625rem;line-height:1;padding:.3rem .45rem;border-radius:.375rem;background:rgba(10,14,21,.6);color:rgba(255,255,255,.85);pointer-events:none}
.tm-photo{position:relative}

.final h2,.uu-card h3{text-wrap:balance}