:root {
  --bg: #0a0a0a;
  --fg: #f5f5f7;
  --muted: #a1a1a6;
  --accent: #0071e3;
  --card: #111112;
  --line: #222225;
  --radius: 20px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg); color: var(--fg);
  scroll-behavior: smooth;
}

a { color: var(--fg); text-decoration: none; }
img { max-width: 100%; display: block; border-radius: 14px; }

/* ==================== NAVIGATION ==================== */

/* aktive Unterpunkte im Dropdown */
.dropdown-menu a.active {
  color: #fff;
  background: rgba(0, 113, 227, 0.15);
  border: 1px solid rgba(0, 113, 227, 0.4);
  box-shadow: 0 0 12px rgba(0, 113, 227, 0.25);
}

/* sanfter Übergang beim Aktivieren */
.dropdown-menu a {
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(10,10,10,0.75);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
}
.brand {
  display:flex; align-items:center; gap: 12px;
  font-weight: 600; letter-spacing: .3px;
}
.brand .logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #1f1f20, #2b2b2e);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.brand-title { color: var(--fg); }

.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a {
  color: var(--muted); font-weight: 500;
  position: relative;
  padding: 8px 12px;
  border-radius: 999px;
  transition: color .2s ease, background .3s ease, box-shadow .3s ease;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a.active {
  color: #fff;
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px var(--line), 0 8px 20px rgba(0,113,227,0.15);
}

/* ============ DROPDOWN (Dienste) ============ */
.dropdown { position: relative; }
.dropbtn {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 12px; border-radius: 999px;
  cursor: pointer; font: inherit;
  transition: color .2s ease, background .3s ease, box-shadow .3s ease;
}
.dropbtn:hover,
.dropdown[aria-expanded="true"] .dropbtn {
  color: #fff;
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px var(--line), 0 8px 20px rgba(0,113,227,.15);
}
.dropbtn .chev { opacity: .7; margin-left: 2px; transition: transform .2s ease; }
.dropdown[aria-expanded="true"] .chev { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px;
  background: #0f0f11;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  padding: 8px; display: none; z-index: 60;
}
.dropdown-menu a {
  display: block; padding: 10px 12px;
  border-radius: 10px; color: var(--fg);
  background: transparent;
  transition: background .2s ease;
}
.dropdown-menu a:hover { background: rgba(255,255,255,.06); }

@media (hover:hover) and (pointer:fine) {
  .dropdown:hover .dropdown-menu { display: block; }
}
.dropdown.open .dropdown-menu { display: block; }


/* Glow für den "Dienste"-Button, wenn ein Dienst aktiv ist */
.nav .dropbtn.glow {
  color:#fff;
  background: rgba(0,113,227,.14);
  box-shadow: 0 0 0 1px rgba(0,113,227,.45), 0 10px 24px rgba(0,113,227,.22);
  border: 1px solid rgba(0,113,227,.35);
}


/* optional: ganz dezentes Pulsieren */
@media (prefers-reduced-motion: no-preference) {
  .nav .dropbtn.glow {
    animation: dropPulse 1.6s ease-in-out infinite alternate;
  }
  @keyframes dropPulse {
    from { transform: translateY(0); }
    to   { transform: translateY(-1px); }
  }
}


/* ==================== HERO ==================== */
.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(0,113,227,.25), transparent),
              radial-gradient(600px 400px at -10% 20%, rgba(255,255,255,.05), transparent);
}
.hero-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 80px 20px 60px;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 40px; align-items: center;
}
.eyebrow {
  color: var(--muted); font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em; font-size: 12px;
}
h1 {
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.05; margin: 12px 0 16px;
}
.lead { color: #d0d0d4; font-size: clamp(16px, 2.2vw, 20px); }
.hero-actions { margin-top: 24px; display:flex; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  background: var(--accent); color: #000;
  border: none; border-radius: 999px;
  padding: 12px 18px; font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--fg); background: transparent;
}
.hero-media {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #1a1a1c, #101012);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
}

/* ==================== LAYOUT SECTIONS ==================== */
section {
  max-width: 1200px; margin: 0 auto; padding: 60px 20px;
}
.section-title {
  display:flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 22px;
}
.section-title h2 {
  font-size: clamp(22px, 4vw, 36px); margin:0;
}
.muted { color: var(--muted); }

/* ==================== GRID & CARDS ==================== */
.grid { display:grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .grid.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .grid.cols-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3 { margin: 8px 0 6px; font-size: 18px; }
.sep { border:0;border-top:1px solid var(--line); margin:16px 0 }

/* Chips */
.chip {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background:#151517;
  border:1px solid var(--line);
  color: var(--muted);
  display:inline-block;
  margin-top: 10px;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
}

/* ==================== STEPS ==================== */
.steps { counter-reset: step; }
.step {
  display:flex; gap: 16px; align-items: flex-start;
  padding: 18px; border:1px dashed #2a2a2e; border-radius: 16px;
}
.step::before {
  counter-increment: step; content: counter(step);
  width: 36px; height: 36px; display:grid; place-items:center;
  border-radius: 10px; background: #151517; border: 1px solid var(--line);
  font-weight: 700;
}

/* ==================== WARUM + STATS ==================== */
.why { display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } }
.stats {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.stat {
  padding: 18px; border-radius: 16px;
  border:1px solid var(--line); background:#111114;
  text-align:center;
}
.stat .num { font-size: 28px; font-weight: 700; }

/* ==================== BEWERTUNGEN ==================== */
.review {
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 18px; background:#101012;
}
.stars { letter-spacing: 2px; }

/* ==================== KONTAKT ==================== */
.contact {
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.map {
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden; min-height: 300px;
}

/* ==================== FOOTER ==================== */
footer {
  border-top: 1px solid var(--line);
  padding: 30px 20px; color: var(--muted);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display:flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

/* ==================== SCROLL REVEAL ==================== */
[data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].visible {
  opacity: 1; transform: translateY(0);
}

/* Anchor offset */
.anchor { scroll-margin-top: 80px; }

/* ===================================================== */
/* ================= APPLE-STYLE EXTRAS ================= */
/* ===================================================== */

.display {
  font-size: clamp(32px, 5.4vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}
.kicker { align-self: center; }

.card.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 30px rgba(0,0,0,0.35);
}
.card.glass h3 { font-weight: 700; }
.lift { transition: transform .18s ease, box-shadow .18s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.45); }

/* ===================================================== */
/* =============== WINTERDIENST – PRO ================== */
/* ===================================================== */

.winter-pro { padding-top: 36px; }

.winter-pro .split {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr);
  gap: 24px;
  align-items: stretch;
}

.winter-pro .left .cards {
  display: grid;
  gap: 14px;
}

/* Bild rechts */
.winter-hero.pro {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  isolation: isolate;
}

.winter-hero.pro img {
  width: 100%;
  height: 100%;         /* Füllt jetzt den gesamten Bereich der Spalte */
  object-fit: cover;
  display: block;
  border-radius: 0;     /* Optional: lässt es flach wirken wie Apple-Layout */
}

.right .winter-hero.pro {
  height: 100%;
  max-height: 100%;
}

/* Gradient Overlay + Shine */
.winter-hero.pro::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 85% 15%, rgba(0,113,227,.25), transparent 60%),
    radial-gradient(80% 60% at 10% 90%, rgba(174,0,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,10,12,.0) 40%, rgba(10,10,12,.45) 100%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.winter-hero.pro::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 18%);
  opacity: .2; pointer-events: none;
}

/* Caption */
.pill {
  position: absolute; left: 16px; bottom: 14px;
  padding: 8px 12px; border-radius: 999px;
  color: #fff; font-weight: 600;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}

/* Sticky */
.right { position: relative; }
.right .winter-hero.pro { position: sticky; top: 96px; }

/* Hintergrundschimmer */
.winter-pro {
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(800px 500px at 110% 30%, rgba(0,113,227,.08), transparent 60%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Responsive */
@media (max-width: 1100px) {
  .winter-pro .split { grid-template-columns: 1fr; }
  .right .winter-hero.pro { position: relative; top: 0; max-height: 460px; }
}
@media (max-width: 640px) {
  .winter-pro .left .cards { gap: 12px; }
}

/* ===================================================== */
/* =================== Chips & Pill leuchten ================== */
/* sanftes Leuchten für .chip & .pill */
.chip, .pill {
  transition: background-color .25s ease, border-color .25s ease,
              color .25s ease, box-shadow .35s ease, transform .25s ease;
  will-change: box-shadow, transform;
}

/* sichtbares Leuchten */
.glow {
  color: #fff;
  background: rgba(0,113,227,.18);
  border-color: rgba(0,113,227,.65);
  box-shadow:
    0 0 0 1px rgba(0,113,227,.55),
    0 10px 26px rgba(0,113,227,.25),
    0 0 32px rgba(0,113,227,.35) inset;
}

/* optional: leichtes Pulsieren – sehr dezent */
@media (prefers-reduced-motion: no-preference) {
  .glow {
    animation: pillPulse 1.8s ease-in-out infinite alternate;
  }
  @keyframes pillPulse {
    from { transform: translateY(0); box-shadow: 0 0 0 1px rgba(0,113,227,.55), 0 8px 22px rgba(0,113,227,.18), 0 0 24px rgba(0,113,227,.25) inset; }
    to   { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(0,113,227,.65), 0 14px 34px rgba(0,113,227,.28), 0 0 36px rgba(0,113,227,.36) inset; }
  }
}

/* --- Google Reviews Carousel --- */
.reviews-carousel {
  position: relative;
  overflow: hidden;
  padding: 0;             /* Card hat schon Rahmen/Radius */
}
.reviews-carousel .slides {
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
}
.review-slide {
  min-width: 100%;
  padding: 22px;
}
.review-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.review-head img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line);
}
.review-author { font-weight: 600; }
.review-meta { color: var(--muted); font-size: 12px; }

.stars { font-size: 14px; letter-spacing: 2px; }
.stars span { color: #ffd166; }  /* Sterne-Farbe */

.review-text {
  margin-top: 10px; line-height: 1.6; color: #e6e6e9;
}



/* Dots */
#reviewDots { display: flex; gap: 8px; justify-content: center; padding: 12px 0 16px; }
#reviewDots button {
  width: 8px; height: 8px; border-radius: 999px; border: none; background: #2a2a2e; cursor: pointer;
}
#reviewDots button.active { background: var(--accent); }

/* Mobile: Text etwas größer */
@media (max-width: 440px) {
  .review-text { font-size: 15px; }
}


/* ========================BILD überlappen============================= */
/* Bildwechsel im Hero – robust */
/* Hover-Bildwechsel ohne <img> – robust, Apple-ish */
.hero-media.hero-swap{
  position: relative;
  /* Größe: wähle EINE Variante */
  aspect-ratio: 1 / 1;                 /* quadratisch, passt gut als Card */
  /* oder: height: clamp(280px, 50vh, 520px); */

  border-radius: 14px;
  overflow: hidden;

  /* Default-Bild */
  background: var(--img-default) center/cover no-repeat; /* für Logos: contain */
  background-color: #0f0f10; /* Card-Farbe hinter Logo */
}

/* Hover-Bild liegt als Layer oben drüber */
.hero-media.hero-swap::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--img-hover)  center/cover no-repeat;
  /*fürFotosnimm/cover*/transition: opacity .45s ease, transform .5s ease;
  opacity: 0;
  transform: scale(1.02);
  -webkit-transition: opacity .45s ease, transform .5s ease;
  -moz-transition: opacity .45s ease, transform .5s ease;
  -ms-transition: opacity .45s ease, transform .5s ease;
  -o-transition: opacity .45s ease, transform .5s ease;
}


.hero-media.hero-swap:hover::after,
.hero-media.hero-swap:focus-visible::after,
.hero-media.hero-swap.is-active::after{
  opacity: 1;
  transform: scale(1.0);
}

/* Weniger Bewegung, wenn Nutzer das wünscht */
@media (prefers-reduced-motion: reduce){
  .hero-media.hero-swap::after{ transition: opacity .2s linear; transform: none; }
}


/* ==================== MOBILE NAVIGATION ==================== */

/* =========================
   Floating Menu (oben rechts)
   ========================= */
#aof-mobile .container {
  position: fixed;
  top: 1px;
  right: 1px;
  z-index: 4000;
  height: auto;           /* nicht 100%: nur Button + Drawer */
  pointer-events: none;   /* nur die Kinder sind klickbar */
}

/* runde Schaltfläche */
#aof-mobile .hamburger-container {
  top: 1px;
  right: 1px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
  transition: transform .3s ease, background .2s ease, box-shadow .2s ease;
  margin: 0;
  /*ausVorlageentfernen*/z-index: 10;
  pointer-events: auto;
}

/* 3 Striche */
/* Maße zentral einstellen */
#aof-mobile .hamburger-container{
  --bar-w: 22px;   /* Breite der Striche */
  --bar-h: 2px;    /* Höhe */
  --bar-gap: 5px;  /* Abstand zwischen den Strichen */
}

/* Wrapper für die drei Balken */
#aof-mobile .hamburger{
  position: absolute;
  inset: 0;                 /* füllt die runde Bubble */
}

/* Gemeinsamer Stil für alle Balken */
#aof-mobile .hamburger .strich{
  position: absolute;
  left: 50%;
  width: var(--bar-w);
  height: var(--bar-h);
  border-radius: 2px;
  background: #fff;
  transition: transform .25s ease, opacity .2s ease;
  will-change: transform, opacity;
  -webkit-transition: transform .25s ease, opacity .2s ease;
  -moz-transition: transform .25s ease, opacity .2s ease;
  -ms-transition: transform .25s ease, opacity .2s ease;
  -o-transition: transform .25s ease, opacity .2s ease;
}

/* Mittlerer Balken exakt zentriert */
#aof-mobile .hamburger .strich.mitte{
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Oberer/Unterer Balken ausrichten */
#aof-mobile .hamburger .strich.oben{
  top: calc(50% - (var(--bar-gap) + var(--bar-h)));
  transform: translateX(-50%);
}
#aof-mobile .hamburger .strich.unten{
  top: calc(50% + var(--bar-gap));
  transform: translateX(-50%);
}

/* === OFFEN: 3 Striche -> X === */
#aof-mobile .hamburger-container.open .hamburger .strich.mitte{
  opacity: 0;                           /* mittlerer verschwindet */
}

#aof-mobile .hamburger-container.open .hamburger .strich.oben,
#aof-mobile .hamburger-container.open .hamburger .strich.unten{
  top: 50%;                              /* beide in die Mitte holen */
}

/* oberer wird „/“ */
#aof-mobile .hamburger-container.open .hamburger .strich.oben{
  transform: translate(-50%, -50%) rotate(45deg);
}

/* unterer wird „\“ */
#aof-mobile .hamburger-container.open .hamburger .strich.unten{
  transform: translate(-50%, -50%) rotate(-45deg);
}




/* Drawer-Backdrop */
#aof-mobile .menu{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1;
}

/* Drawer (rechte Leiste) – nutzt deinen .page-body-Namen */
#aof-mobile .page-body{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 380px);
  height: 100vh;
  background: #0b0b0c;
  border-left: 1px solid rgba(255,255,255,.12);
  transform: translateX(110%);        /* geschlossen: außerhalb */
  transition: transform .3s ease;
  transform-origin: 0 0;              /* Name & Idee aus deiner Vorlage bleiben */
  z-index: 2;
  overflow: auto;
  padding: 76px 16px 24px;
  pointer-events: auto;
}

/* Links im Drawer */
#aof-mobile .fm-links{
  display: flex; flex-direction: column; gap: 10px;
}
#aof-mobile .fm-links h3{
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #a1a1a6; margin: 0 0 6px;
}
#aof-mobile .fm-links hr{
  border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 8px 0;
}
#aof-mobile .fm-links a{
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: #f5f5f7;
}
#aof-mobile .fm-links a:hover{
  background: rgba(255,255,255,.08);
}

#aof-mobile .hamburger-container.open + .menu{
  opacity: 1; pointer-events: auto;
}
#aof-mobile .page-body.open{
  transform: translateX(0);
}

/* Mobile*/

/* ========= Mobile Typografie-Polish ========= */
:root{
  /* falls du später feinjustieren willst */
  --mobile-text: 15.5px;
  --mobile-h3: 17px;
}

/* Sanfteres Rendering & korrekte Auto-Vergrößerung auf iOS */
@media (max-width: 900px){
  html, body{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  *{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
}

/* Globale Mikrotypografie (auch Desktop gut, stört nicht) */
:where(h1,h2,h3){ text-wrap: balance; hyphens: auto; }
:where(p, li){ overflow-wrap: anywhere; }

/* ---------- Basistypo auf Mobile ---------- */
@media (max-width: 900px){
  section{ padding: 44px 16px; }

  /* Hero */
  .eyebrow{ letter-spacing:.14em; font-size: 11px; }
  h1{ font-size: clamp(26px, 8.5vw, 34px); line-height: 1.15; margin: 10px 0 8px; }
  .lead{
    font-size: var(--mobile-text);
    line-height: 1.7;
    color: #e4e4e6;
  }
  .hero-actions{ gap: 10px; }
  .btn-primary, .btn-ghost{ width: 100%; padding: 12px 16px; font-size: 15px; }

  /* Sektionstitel */
  .section-title{ gap: 6px; flex-direction: column; align-items: flex-start; }
  .section-title h2{ font-size: clamp(20px, 7vw, 28px); margin: 0; }
  .section-title .muted{ font-size: 13px; }

  /* Grids: einspaltig für bessere Lesbarkeit */
  .grid.cols-3{ grid-template-columns: 1fr; }
  .grid.cols-2{ grid-template-columns: 1fr; }

  /* Cards & Copy */
  .card{ padding: 18px; }
  .card h3{ font-size: var(--mobile-h3); line-height: 1.25; margin: 6px 0; }
  .card p, p{ font-size: var(--mobile-text); line-height: 1.7; }

  /* Chips/Pills etwas kleiner + Abstand zur Headline */
  .pill, .chip{
    font-size: 12px; padding: 6px 10px; margin-bottom: 8px;
  }

  /* Listenabstände angenehmer */
  ul{ padding-left: 1.1rem; }
  li{ margin: 6px 0; }

  /* Kontaktblock */
  .contact{ grid-template-columns: 1fr; }
  .contact .card p{ font-size: var(--mobile-text); }
  .map{ min-height: 260px; }

  /* Winterdienst: Bild oberhalb, Cards darunter */
  .winter-pro .split{ display: grid; grid-template-columns: 1fr; gap: 16px; }
  .winter-hero.pro{ border-radius: 16px; }
}

/* ---------- Review-Slider Text ---------- */
@media (max-width: 520px){
  .review-head img{ width: 36px; height: 36px; }
  .review-text{ font-size: 15px; line-height: 1.7; }
}

/* ---------- Mobile-Drawer Links (größeres Tap-Ziel) ---------- */
@media (max-width: 900px){
  #aof-mobile .fm-links a{
    padding: 14px 16px;                /* größerer Touch-Bereich */
    font-size: 15px;
    line-height: 1.2;
  }
}

/* Mini-Fix: zu große Wortbrocken umbrechen (z. B. Straßennamen) */
:where(h1,h2,h3,p,a,li){ word-break: break-word; }




/* Nur auf Mobile sichtbar; Desktop: Standardnav benutzen */
/* Desktop: Mobile-Floating-UI ausblenden */
@media (min-width: 901px){
  #aof-mobile {
    display: none !important;  /* versteckt Button + Drawer + Backdrop */
  }
}




/* Mobile: Desktop-Navigation ausblenden, Floating-UI aktiv lassen */
@media (max-width: 900px){
  .nav-links{
    display: none !important;  /* deine Top-Navi-Links verbergen */
  }
  #aof-mobile{
    display: block;            /* sicherstellen, dass der Mobile-Button sichtbar ist */
  }
}

/* Scroll sperren bei offenem Menü */
html.noscroll, html.noscroll body{ overflow: hidden; }