/* ==========================================================
   Eis4rent GmbH — Stylesheet
   Schriften werden lokal ausgeliefert (kein Abruf bei Google).
   Dateien: /fonts/  ·  Lizenz: SIL Open Font License 1.1
   ========================================================== */

@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/poppins-v24-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/poppins-v24-latin_latin-ext-500.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/poppins-v24-latin_latin-ext-600.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/poppins-v24-latin_latin-ext-700.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/poppins-v24-latin_latin-ext-800.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2'); }
@font-face{ font-family:'Kaushan Script'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/kaushan-script-v19-latin_latin-ext-regular.woff2') format('woff2'); }


:root{
  /* Markenfarben (aus Logo & Broschüre gepickt) */
  --brown-900: #2A130A;   /* tiefes Kakaobraun – dunkle Flächen */
  --brown-700: #3B1B10;   /* Logo-Braun – Überschriften/Text */
  --brown-500: #5C2E1C;

  --teal-500: #8ECEC9;    /* Logo-Türkis */
  /* --- Akzentfarben, Entscheidung vom 4.9.2026 (Melwin) ---
     Button-Türkis   = Logo-Türkis #8ECEC9 (Flächen: Buttons, Punkte, Marker)
     Schrift-Türkis  = #6FB5AF, eine Stufe dunkler (Variante C). Grund: dünne Striche der
     Schreibschrift Kaushan wirken in #8ECEC9 heller als der Button; #6FB5AF sieht neben
     dem Button gleichwertig aus und ist besser lesbar. Gilt für ALLE .eyebrow und .script. */
  --accent: #8ECEC9;          /* Flächen (Buttons) */
  --accent-text: #6FB5AF;     /* Schreibschrift-Überschriften */
  --teal-600: #6FB5AF;    /* Hover / kräftiger */
  --teal-100: #E4F3F1;

  --beige-100: #FBF6EF;
  --beige-300: #F1E7DC;   /* Broschüre-Beige */
  --beige-400: #E9DBC9;

  --white: #FFFFFF;
  --text-body: #4A3B32;
  --text-muted: #6F6156;   /* abgedunkelt für WCAG-AA-Kontrast auf Beige (4,9:1) */

  --shadow-sm: 0 4px 16px rgba(42, 19, 10, 0.06);
  --shadow-md: 0 12px 32px rgba(42, 19, 10, 0.10);
  --shadow-lg: 0 24px 60px rgba(42, 19, 10, 0.14);

  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 40px;

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Kaushan Script', 'Brush Script MT', cursive;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
}

h1,h2,h3,h4{
  font-family: var(--font-head);
  color: var(--brown-700);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.4rem, 4.2vw, 3.6rem); font-weight: 800; }
h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3{ font-size: 1.25rem; }

.center{ text-align:center; margin-left:auto; margin-right:auto; }
.light{ color: var(--white); }
.light h2, .light.eyebrow{ color: var(--teal-100); }

.eyebrow{
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--teal-600);
  margin-bottom: 6px;
  display:block;
}
.eyebrow.light{ color: var(--teal-500); }

.section-intro{
  max-width: 620px;
  color: var(--text-muted);
  margin: 14px auto 0;
}

section{ padding: 100px 0; }
.section-white{ background: var(--white); }
.section-beige{ background: var(--beige-300); }

.script{ font-family: var(--font-script); font-weight:400; color: var(--teal-600); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 13px 26px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border: 2px solid transparent;
  cursor:pointer;
}
.btn-primary{
  background: var(--accent);
  color: var(--brown-900);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{ background: var(--teal-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline{
  border-color: var(--brown-700);
  color: var(--brown-700);
}
.btn-outline:hover{ background: var(--brown-700); color: var(--white); transform: translateY(-2px); }

.btn-white{
  background: var(--white);
  color: var(--brown-700);
  box-shadow: var(--shadow-sm);
}
.btn-white:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline-light{
  border-color: rgba(255,255,255,.6);
  color: var(--white);
}
.btn-outline-light:hover{ background: rgba(255,255,255,.15); }

.btn-lg{ padding: 16px 32px; font-size: 1rem; }
.btn.full{ width:100%; justify-content:center; }

/* ---------- Circle Icons (Broschüre-Signatur-Element) ---------- */
.circle-icon{
  width: 152px;
  height: 152px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--teal-500);   /* schmalerer Ring, größerer Kreis (4.9.2026) */
  box-shadow: var(--shadow-md);
  margin: 0 auto 22px;
  background: var(--white);
}
.circle-icon img{ width:100%; height:100%; object-fit: cover; }
.circle-icon.lg{ width: 188px; height: 188px; }

/* ============ HEADER ============ */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  isolation: isolate;
}
.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(42,19,10,0.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand-logo{ height: 58px; width:auto; }

.main-nav{ display:flex; gap: 34px; }
.main-nav a{
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brown-700);
  position: relative;
  padding: 4px 0;
}
.main-nav a::after{
  content:'';
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--teal-500);
  transition: width .2s ease;
}
.main-nav a:hover::after{ width:100%; }

.nav-login-mobile{ display:none; }

.header-actions{ display:flex; align-items:center; gap: 20px; }
.btn-login{ padding: 11px 20px; font-size: .92rem; }
.header-phone{ font-weight:600; font-size:.92rem; color: var(--brown-700); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.nav-toggle span{ width:24px; height:2px; background: var(--brown-700); }

/* ============ HERO ============ */
.hero{
  padding: 80px 0 60px;
  background: linear-gradient(180deg, var(--beige-100) 0%, var(--white) 100%);
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items:center;
}
.hero-sub{
  margin: 20px 0 32px;
  font-size: 1.08rem;
  color: var(--text-muted);
  max-width: 520px;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 46px; }

.hero-stats{
  display:flex;
  gap: 36px;
  flex-wrap:wrap;
  padding-top: 30px;
  border-top: 1px solid var(--beige-400);
}
.stat strong{ display:block; font-family: var(--font-head); font-size:1.5rem; color: var(--brown-700); font-weight:800; }
.stat span{ font-size:.82rem; color: var(--text-muted); }

.hero-visual{ position: relative; }
.hero-circle-deco{
  position:absolute;
  top: -40px; right: -60px;
  width: 340px; height:340px;
  background: var(--teal-100);
  border-radius:50%;
  z-index:0;
}
.hero-img{
  width: 100%;
  height: auto;   /* nötig, seit das img width/height-Attribute hat (17.9.2026) */
  position:relative;
  z-index:1;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 8px solid var(--white);
}
.hero-badge{
  position:absolute;
  bottom: -24px; left: -24px;
  z-index:2;
  width: 108px; height:108px;
  background: var(--white);
  border-radius:50%;
  box-shadow: var(--shadow-md);
  padding: 10px;
  display:flex; align-items:center; justify-content:center;
}

/* ============ LOGO SLIDER ============ */
.logo-strip{ padding: 50px 0 60px; background: var(--white); }
.logo-strip-label{
  text-align:center;
  color: var(--text-muted);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.logo-marquee{
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-track{
  display:flex;
  gap: 24px;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.logo-marquee:hover .logo-track{ animation-play-state: paused; }
.logo-chip{
  flex: 0 0 auto;
  padding: 22px 40px;
  background: var(--beige-300);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============ VALUES ============ */
.values-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 56px;
}
.value-card{ text-align:center; }
.value-card p{ color: var(--text-muted); max-width: 320px; margin: 8px auto 0; }

/* ============ SERVICES ============ */
.services-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.service-card{
  background: var(--beige-300);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-number{
  font-family: var(--font-head);
  font-weight:800;
  font-size: 1.6rem;
  color: var(--teal-600);
  margin-bottom: 14px;
}
.service-card p{ color: var(--text-muted); font-size: .95rem; margin-top:10px; }

/* ============ FLEET ============ */
.fleet-hero{
  margin-top: 56px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.fleet-hero img{ width:100%; height: 480px; object-fit: cover; }
.fleet-hero-caption{
  position:absolute;
  left: 32px; bottom: 32px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  padding: 14px 24px;
  border-radius: 100px;
  font-weight:600;
  color: var(--brown-700);
  box-shadow: var(--shadow-sm);
}
.fleet-hero-caption span{ color: var(--teal-600); }

.fleet-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 64px;
  text-align:center;
}
.fleet-card p{ color: var(--text-muted); font-size: .92rem; }

.color-swatches{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 14px;
}
.swatch{
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1.5px var(--beige-400);
  background: var(--swatch-color);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.swatch:hover, .swatch:focus-visible{ transform: scale(1.15); box-shadow: 0 0 0 1.5px var(--teal-600); }
.swatch.active{ box-shadow: 0 0 0 2px var(--teal-600); }

/* ============ FLAVORS ============ */
.flavor-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 14px 18px;
  margin: 50px 0 80px;
}
.flavor-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 22px;
  border: 1.5px solid var(--beige-400);
  border-radius: 100px;
  font-weight:600;
  font-size: .92rem;
  color: var(--brown-700);
  background: var(--beige-100);
}
.dot{ width:8px; height:8px; border-radius:50%; background: var(--teal-500); }

/* ============ SHOWCASE SLIDER (Genusswelten) ============ */
.showcase-slider{
  position: relative;
  background: var(--beige-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.slider-track{
  display:flex;
  width: 100%;
  transition: transform .55s cubic-bezier(.65,0,.35,1);
}
.slide{
  flex: 0 0 100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items:center;
  padding: 56px;
  min-height: 380px;
}
.slide-text p{ color: var(--text-muted); margin: 16px 0 26px; }
.slide-text .eyebrow{ margin-bottom: 4px; }

.slide-visual{ display:flex; justify-content:center; align-items:center; height: 260px; }

.visual-single{
  height: 300px;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.visual-single img{ width:100%; height:100%; object-fit: cover; }

.visual-sketch{ height: 320px; }
.visual-sketch img{
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(var(--shadow-sm));
}

.visual-trio{ gap: 18px; }
.visual-trio img{
  height: 260px;
  width: auto;
  max-width: 30%;
  object-fit: contain;
  filter: drop-shadow(var(--shadow-md));
  transition: transform .3s ease;
}
.visual-trio img:hover{ transform: translateY(-10px) rotate(-2deg); }
.visual-sketch img{ transition: transform .35s ease; }
.visual-sketch:hover img{ transform: translateY(-8px) scale(1.03); }
.slider-arrow{
  position:absolute;
  bottom: 20px;
  width: 42px; height:42px;
  border-radius:50%;
  border:none;
  background: var(--white);
  color: var(--brown-700);
  box-shadow: var(--shadow-sm);
  font-size: .85rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease;
  z-index: 5;
}
.slider-arrow:hover{ background: var(--teal-500); transform: scale(1.08); }
.slider-arrow.prev{ left: 24px; }
.slider-arrow.next{ right: 24px; }

.slider-dots{
  display:flex;
  justify-content:center;
  gap: 10px;
  padding-bottom: 30px;
}
.slider-dot{
  width: 10px; height:10px;
  border-radius: 50%;
  border: none;
  background: var(--beige-400);
  cursor:pointer;
  padding:0;
  transition: background .2s ease, transform .2s ease;
}
.slider-dot.active{ background: var(--teal-600); transform: scale(1.3); }

/* ============ STATS BAND (dark) ============ */
.stats-band{
  background: var(--brown-900);
  background-image: radial-gradient(circle at 15% 20%, rgba(142,206,201,0.10), transparent 45%),
                     radial-gradient(circle at 85% 80%, rgba(142,206,201,0.08), transparent 45%);
  color: var(--white);
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.stat-box{
  text-align:center;
  padding: 32px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
}
.stat-box strong{
  display:block;
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--teal-500);
}
.stat-box span{ font-size: .85rem; color: rgba(255,255,255,0.75); }

/* ============ PROCESS ============ */
.process-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 56px;
}
.process-step{ text-align:center; padding: 0 10px; }
.process-num{
  width: 56px; height:56px;
  border-radius:50%;
  background: var(--teal-500);
  color: var(--brown-900);
  font-family: var(--font-head);
  font-weight:800;
  font-size: 1.3rem;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px;
  box-shadow: var(--shadow-sm);
}
.process-step p{ color: var(--text-muted); font-size: .92rem; }

/* ============ ABOUT ============ */
.about-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.about-img img{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  height: 460px;
  width:100%;
}
.about-copy p{ color: var(--text-muted); margin: 18px 0; }
.about-copy .btn{ margin-top: 12px; }

/* ============ TESTIMONIAL ============ */
.testimonial-card{
  max-width: 780px;
  margin: 56px auto 0;
  text-align:center;
  background: var(--beige-100);
  border: 1px dashed var(--beige-400);
  border-radius: var(--radius-lg);
  padding: 60px 50px;
}
.quote-mark{
  font-family: var(--font-script);
  font-size: 4rem;
  color: var(--teal-500);
  line-height: .5;
  margin-bottom: 18px;
}
.quote-text{ font-size: 1.25rem; color: var(--brown-700); font-style: italic; margin-bottom: 20px; }
.quote-author{ color: var(--text-muted); font-weight:600; font-size:.9rem; }

/* ============ CTA BAND ============ */
.cta-band{
  background: var(--brown-700);
  background-image: radial-gradient(circle at 90% 10%, rgba(142,206,201,0.14), transparent 40%);
}
.cta-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items:center;
}
.cta-copy p.light{ color: rgba(255,255,255,0.8); margin: 16px 0 30px; }
.cta-contact{ display:flex; gap:16px; flex-wrap:wrap; }

.cta-form{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow-lg);
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.cta-form h3{ margin-bottom: 2px; }
.form-intro{ font-size: .9rem; color: var(--text-muted); margin: 0 0 6px; }
.form-note{ font-size: .78rem; color: var(--text-muted); margin: 0; text-align:center; line-height:1.45; }
.form-note a{ color: var(--teal-600); text-decoration: underline; }
.cta-form .optional{ font-weight:400; color: var(--text-muted); font-size: .8rem; }
.cta-form label{
  display:flex;
  flex-direction:row;       /* Beschriftung und „(optional)“ in einer Zeile … */
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
  font-size: .85rem;
  font-weight:600;
  color: var(--brown-700);
}
.cta-form label input, .cta-form label textarea{ flex: 1 1 100%; }   /* … das Feld darunter in voller Breite */
.cta-form input, .cta-form textarea{
  font-family: var(--font-body);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--beige-400);
  font-size: .95rem;
  resize: vertical;
}
.cta-form input:focus, .cta-form textarea:focus{
  outline: none;
  border-color: var(--teal-500);
}

/* ============ FOOTER ============ */
.site-footer{ background: var(--brown-900); color: rgba(255,255,255,0.85); padding-top: 80px; }
.footer-inner{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
}
.footer-brand img{ height: 64px; margin-bottom: 16px; }
.footer-brand p{ font-size: .88rem; color: rgba(255,255,255,0.6); max-width: 280px; }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.07); transition:background .18s ease, transform .18s ease;
}
.footer-social svg{ width:19px; height:19px; fill:var(--teal-500); transition:fill .18s ease; }
.footer-social a:hover{ background:var(--teal-500); transform:translateY(-2px); }
.footer-social a:hover svg{ fill:var(--brown-900); }
.footer-social a:focus-visible{ outline:3px solid var(--teal-500); outline-offset:3px; }

.footer-col h4{ color: var(--white); font-size: .95rem; margin-bottom: 18px; }
.footer-col a, .footer-col p{
  display:block;
  color: rgba(255,255,255,0.65);
  font-size: .9rem;
  margin-bottom: 10px;
}
.footer-col a:hover{ color: var(--teal-500); }

.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0; }
.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  font-size: .82rem;
  color: rgba(255,255,255,0.55);
}
.footer-legal{ display:flex; gap: 20px; }
.footer-legal a:hover{ color: var(--teal-500); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .hero-inner, .about-inner, .cta-inner, .slide{
    grid-template-columns: 1fr;
  }
  .values-grid, .services-grid, .fleet-grid{ grid-template-columns: repeat(2, 1fr); }
  .stats-grid{ grid-template-columns: repeat(3, 1fr); }
  .process-grid{ grid-template-columns: repeat(2, 1fr); }
  .main-nav{
    display:flex;
    position: absolute;
    top: 100%; left:0; right:0;
    flex-direction:column;
    background: var(--white);
    padding: 20px 32px 28px;
    gap: 18px;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .main-nav.open{ opacity:1; transform: translateY(0); pointer-events:auto; }
  .nav-toggle{ display:flex; }
  .hero-visual{ order:-1; }
  .about-img img{ height: 320px; }
  .btn-login{ display:none; }
  .nav-login-mobile{
    display:flex; align-items:center; gap:8px;
    margin-top: 6px; padding-top: 18px;
    border-top: 1px solid var(--beige-400);
    font-weight:600; font-size:.95rem; color: var(--teal-600);
  }
}

@media (min-width: 981px){
  .nav-toggle{ display:none; }
}

@media (max-width: 620px){
  section{ padding: 70px 0; }
  .wrap{ padding: 0 24px; }
  .header-phone{ display:none; }
  .values-grid, .services-grid, .fleet-grid{ grid-template-columns: 1fr; }
  /* Zahlen und Ablauf sind kurze Einheiten: zweispaltig lesbar und viel
     kompakter als sechs bzw. vier Blöcke untereinander. */
  .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .stat-box{ padding: 22px 10px; }
  .stat-box strong{ font-size: 1.7rem; }
  .process-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .process-step{ padding: 24px 18px; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  .hero-stats{ gap: 20px 28px; }
  .hero-badge{ width: 88px; height: 88px; left: 12px; bottom: -16px; }
  /* Fußbereich auf dem Handy zweispaltig: Markenblock und Kontakt über die
     volle Breite, die beiden Linklisten nebeneinander. Spart Scrollweg. */
  .footer-inner{ grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-col:last-child{ grid-column: 1 / -1; }
  .footer-brand p{ max-width: none; }
  .footer-bottom-inner{ flex-direction:column; gap:10px; text-align:center; }
  /* Auf dem Handy zuerst das Bild, dann Text und Knopf. So endet jede Folie
     mit der Handlung statt mit einer Abbildung. */
  .slide{ padding: 28px 24px 24px; gap: 22px; min-height: unset; display: flex; flex-direction: column; }
  .slide-visual{ height: auto; order: -1; }
  .slide-text .btn{ width: 100%; justify-content: center; }
  .visual-single{ height: 200px; }
  .visual-trio{ flex-wrap: nowrap; gap: 8px; }
  .visual-trio img{ height: 120px; max-width: 31%; }
  /* Pfeile bleiben auch auf dem Handy erreichbar, wandern aber unter den
     Inhalt neben die Punkte. Seitlich hätten sie den Text überlagert. */
  /* Pfeile bleiben erreichbar, wandern aber nach unten neben die Punkte.
     Seitlich lagen sie über dem Text. */
  .slider-arrow{
    top: auto; bottom: 16px; transform: none;
    width: 38px; height: 38px; font-size: 1rem;
  }
  .slider-arrow.prev{ left: calc(50% - 92px); }
  .slider-arrow.next{ right: calc(50% - 92px); }
  .slider-dots{ padding-bottom: 26px; }

  /* Kontaktknöpfe im Anfrage-Band: Telefon und E-Mail nebeneinander,
     WhatsApp darunter über die volle Breite. Spart rund 60 Pixel Höhe. */
  .cta-contact{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cta-contact .btn{
    padding: 12px 10px; font-size: .8rem; justify-content: center;
    text-align: center; white-space: normal; line-height: 1.25;
  }
  .cta-contact .btn-whatsapp,
  .cta-contact .btn-whatsapp-light{ grid-column: 1 / -1; justify-content: center; }
  /* Auf dem Handy das ganze Bild zeigen statt einen Ausschnitt: sonst sind
     von den drei Maxi Carrettinos nur eineinhalb zu sehen. Die Beschriftung
     rückt dafür unter das Bild, damit sie nichts verdeckt. */
  .fleet-hero{ background: var(--white); box-shadow: var(--shadow-md); }
  .fleet-hero img{ height: auto; aspect-ratio: 1410 / 945; object-fit: contain; }
  .fleet-hero-caption{
    position: static;
    left: auto; right: auto; bottom: auto;
    background: none; backdrop-filter: none;
    padding: 14px 18px 18px;
    border-radius: 0;
    text-align: center;
    font-size: .85rem;
    line-height: 1.4;
  }
  .testimonial-card{ padding: 40px 26px; }
  .cta-form{ padding: 28px; }
  .service-card{ padding: 30px 24px; }
}


/* ============ BARRIEREFREIHEIT ============ */
.skip-link{ position:absolute; left:-9999px; top:16px; z-index:1000; background:var(--brown-700); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; }
.skip-link:focus{ left:16px; outline:3px solid var(--teal-500); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:3px solid var(--teal-600); outline-offset:3px; }
.cta-form input:focus-visible, .cta-form textarea:focus-visible{ outline:3px solid var(--teal-600); outline-offset:2px; border-color: var(--teal-500); }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; }

/* ============ UNTERSEITEN (Impressum, Datenschutz, AGB, Kontakt) ============ */
.page-hero{ background: var(--beige-300); padding: 70px 0 50px; }
.page-hero h1{ font-size: clamp(2rem, 3.6vw, 3rem); }
.page-hero .section-intro{ margin-left:0; }
.legal{ padding: 70px 0 100px; }
.legal-inner{ max-width: 820px; }
.legal h2{ font-size: 1.45rem; margin: 44px 0 14px; }
.legal h3{ font-size: 1.1rem; margin: 26px 0 8px; }
.legal p, .legal li{ margin-bottom: 12px; }
.legal ul, .legal ol{ padding-left: 22px; margin-bottom: 14px; }
.legal a{ color: var(--teal-600); text-decoration: underline; }
.legal a:hover{ color: var(--brown-700); }
.legal .table-wrap{ overflow-x:auto; }
.legal table{ width:100%; border-collapse: collapse; font-size:.9rem; margin: 10px 0 20px; min-width: 560px; }
.legal th, .legal td{ text-align:left; padding: 10px 12px; border-bottom: 1px solid var(--beige-400); vertical-align: top; }
.legal th{ background: var(--beige-300); color: var(--brown-700); }
.legal address{ font-style: normal; }
.legal .box{ background: var(--beige-300); border-radius: var(--radius-md); padding: 22px 26px; margin: 20px 0; }
.legal .meta{ color: var(--text-muted); font-size: .9rem; }
.legal .doc-actions{ display:flex; gap:12px; flex-wrap:wrap; margin: 20px 0 10px; }
.legal .toc{ background: var(--beige-300); border-radius: var(--radius-md); padding: 22px 26px 12px; margin: 0 0 30px; }
.legal .toc ol{ columns: 2; column-gap: 30px; margin:0; }
.legal .toc li{ margin-bottom: 6px; break-inside: avoid; }
.legal .toc a{ text-decoration: none; }

/* Kontakt */
.contact-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.contact-card{ background: var(--white); border-radius: var(--radius-md); padding: 30px; box-shadow: var(--shadow-sm); }
.contact-card h3{ margin-bottom: 8px; }
.contact-card p{ color: var(--text-muted); font-size: .95rem; }
.contact-card a.big{ display:block; font-family: var(--font-head); font-weight:700; color: var(--brown-700); font-size: 1.15rem; margin: 8px 0 6px; }
.contact-card a.big:hover{ color: var(--teal-600); }

/* Formular-Status */
.form-status{ border-radius: 12px; padding: 14px 16px; font-size: .95rem; }
.form-status.ok{ background: var(--teal-100); color: var(--brown-700); }
.form-status.error{ background: #FBE9E4; color: #7A2E1B; }
.cta-form button[disabled]{ opacity:.6; cursor: wait; }

/* 404 */
.notfound{ text-align:center; padding: 120px 0; }
.notfound h1{ font-size: clamp(2.4rem, 5vw, 4rem); }
.notfound .actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top: 30px; }

@media (max-width: 980px){ .contact-grid{ grid-template-columns: 1fr; } .legal .toc ol{ columns: 1; } }
@media print{
  .site-header, .site-footer, .doc-actions, .skip-link, .page-hero .btn{ display:none !important; }
  .page-hero{ background:none; padding: 0 0 10px; }
  .legal{ padding:0; }
  body{ color:#000; }
  .legal a{ color:#000; text-decoration:none; }
}

/* FAQ (Kontaktseite) */
.faq{ padding: 90px 0 80px; }
.faq-list{ margin-top: 36px; display:flex; flex-direction:column; gap: 12px; }
.faq-list details{ background: var(--white); border-radius: var(--radius-sm); padding: 0 24px; border: 1px solid var(--beige-400); }
.band-weiss .faq-list details{ background: var(--beige-300); }
.faq-list summary{ cursor:pointer; list-style:none; padding: 18px 36px 18px 0; font-family: var(--font-head); font-weight:600; color: var(--brown-700); position:relative; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; position:absolute; right:0; top:14px; font-size:1.5rem; color: var(--teal-600); transition: transform .2s ease; }
.faq-list details[open] summary::after{ transform: rotate(45deg); }
.faq-list details p{ padding: 0 0 20px; color: var(--text-body); margin:0; }
.faq-list details a{ color: var(--teal-600); text-decoration: underline; }

/* ============ KORREKTUREN 4.9.2026 ============ */
/* Schreibschrift (Kaushan) ist das Akzentelement: überall dasselbe Logo-Türkis.
   :not(.light) hebt die Regel über Absatzregeln wie .slide-text p oder .about-copy p. */
.eyebrow, .eyebrow.light, .script{
  color: var(--accent-text) !important;   /* Variante C, siehe Kommentar bei --accent-text; gilt überall */
  -webkit-text-stroke: 0.5px var(--accent-text);   /* dünne Striche kräftiger, damit der Farbton wie beim Button wirkt */
  paint-order: stroke fill;
}
/* Zahlen-Band: helle Creme-Kacheln statt dunkler, Text in Braun */
.stat-box{ background: var(--beige-300); border: 1px solid var(--beige-400); }
.stat-box strong{ color: var(--brown-700); }
.stat-box span{ color: var(--text-body); }
.section-intro.light{ color: rgba(255,255,255,0.82); }
/* Mobil: lange Überschriften und Web-Adressen dürfen nicht seitlich überstehen */
.page-hero h1{ overflow-wrap: anywhere; hyphens: auto; }
.legal p, .legal li, .legal td, .legal address{ overflow-wrap: anywhere; }
@media (max-width: 620px){ .page-hero h1{ font-size: 1.7rem; } }

/* Formular: Vorname/Nachname nebeneinander, auf dem Handy untereinander */
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px){ .form-row{ grid-template-columns: 1fr; gap: 16px; } }

/* ============ WHATSAPP-BUTTON ============
   Umsetzung nach den WhatsApp-Markenrichtlinien (Brand Resource Center):
   · Offizielle Farbe „WhatsApp Green" #25D366, Hover eine Stufe dunkler.
   · Offizielles Glyph, unverändert: nicht drehen, verzerren, umfärben oder mit
     dem Eis4rent-Logo kombinieren. Freiraum um das Glyph mindestens 8 px.
   · Schreibweise immer „WhatsApp" (ein Wort, W und A groß).
   · Der Button ist reine Kontaktaufnahme und darf keine Partnerschaft oder
     Empfehlung durch WhatsApp suggerieren.
   · Das Glyph liegt als Inline-SVG im Code, es wird nichts von Meta nachgeladen.
   Zwei erlaubte Varianten: .btn-whatsapp (grün, weißes Glyph) und
   .btn-whatsapp-light (weiß, grünes Glyph) für farbige Hintergründe. */
.btn-whatsapp,
.btn-whatsapp-light{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 26px; border-radius: 100px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  border: 2px solid transparent; cursor:pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-whatsapp{ background: #25D366; color: #FFFFFF; box-shadow: var(--shadow-sm); }
.btn-whatsapp:hover{ background: #1DA851; transform: translateY(-2px); }
.btn-whatsapp-light{ background: var(--white); color: #1F2C34; border-color: var(--white); box-shadow: var(--shadow-sm); }
.btn-whatsapp-light:hover{ background: #F2F5F4; transform: translateY(-2px); }
.btn-whatsapp svg{ width: 20px; height: 20px; flex: 0 0 20px; fill: #FFFFFF; }
.btn-whatsapp-light svg{ width: 20px; height: 20px; flex: 0 0 20px; fill: #25D366; }
.wa-inline{ display:inline-flex; align-items:center; gap:10px; }
/* Kartenlink auf der Kontaktseite: ohne Symbol war nicht zu erkennen, dass der
   Satz anklickbar ist (13.9.2026) */
.maps-link{ display:inline-flex; align-items:center; gap:8px; color:var(--accent-text); font-weight:500; }
.maps-link svg{ width:16px; height:16px; flex:none; }
.maps-link:hover{ text-decoration:underline; }   /* Freiraum um das Glyph nach Richtlinie */
.footer-col .wa-inline{ display:flex; margin-bottom:10px; }   /* wie die übrigen Kontaktzeilen */
.wa-inline svg{ width: 17px; height: 17px; flex: 0 0 17px; fill: #25D366; }
.contact-card .btn-whatsapp{ margin-top: 12px; }

/* ---- Schwebender WhatsApp-Knopf ----
   Unten rechts, auf allen Seiten. Zusammengeklappt ein runder Knopf, bei Hover oder
   Tastaturfokus fährt die Beschriftung aus. Auf dem Handy bleibt er rund, damit er
   keinen Inhalt verdeckt. Farbe und Glyph nach WhatsApp-Richtlinie unverändert. */
.wa-float{
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  display: inline-flex; align-items: center; gap: 0;
  height: 58px; width: 58px; padding: 0; overflow: hidden;
  border-radius: 100px; background: #25D366; color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(37,211,102,.38), 0 2px 8px rgba(0,0,0,.14);
  transition: width .28s ease, gap .28s ease, padding .28s ease, background .2s ease, transform .2s ease;
}
.wa-float svg{ width: 30px; height: 30px; flex: 0 0 30px; fill: #FFFFFF; margin: 0 14px; }
.wa-float-text{
  font-family: var(--font-head); font-weight: 600; font-size: .93rem;
  white-space: nowrap; opacity: 0; transition: opacity .2s ease .06s;
}
@media (hover: hover){
  .wa-float:hover{ width: 258px; background: #1DA851; transform: translateY(-2px); }
  .wa-float:hover .wa-float-text{ opacity: 1; }
}
.wa-float:focus-visible{
  width: 258px; background: #1DA851;
  outline: 3px solid var(--brown-700); outline-offset: 3px;
}
.wa-float:focus-visible .wa-float-text{ opacity: 1; }
.wa-float:hover .wa-float-text, .wa-float:focus-visible .wa-float-text{ padding-right: 22px; }
@media (max-width: 620px){
  .wa-float{ right: 16px; bottom: 16px; height: 54px; width: 54px; }
  .wa-float svg{ width: 27px; height: 27px; flex: 0 0 27px; margin: 0 13px; }
}
@media (prefers-reduced-motion: reduce){ .wa-float{ transition: none; } }
@media print{ .wa-float{ display: none !important; } }

/* ---- WhatsApp-Vorschalter ----
   Kleines Fenster, das beim Klick auf WhatsApp fragt, worum es geht. Konkrete Anfragen
   gehen ins Formular, kurze Fragen zu WhatsApp. Speichert nichts im Browser. */
.wa-dialog{ position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.wa-dialog[hidden]{ display: none !important; }
.wa-dialog-backdrop{ position: absolute; inset: 0; background: rgba(42,19,10,.55); backdrop-filter: blur(2px); }
.wa-dialog-box{
  position: relative; width: min(500px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--white); border-radius: var(--radius-lg); padding: 34px 36px 30px;
  box-shadow: var(--shadow-lg); animation: waIn .22s ease-out;
}
@keyframes waIn{ from{ opacity:0; transform: translateY(14px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .wa-dialog-box{ animation: none; } }
.wa-dialog-box h2{ font-size: 1.5rem; margin-bottom: 22px; }
.wa-dialog-close{
  position: absolute; top: 14px; right: 18px; background: none; border: none;
  font-size: 1.9rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 4px 8px;
}
.wa-dialog-close:hover{ color: var(--brown-700); }
.wa-choice{ border-top: 1px solid var(--beige-400); padding-top: 18px; margin-top: 18px; }
.wa-choice:first-of-type{ border-top: none; padding-top: 0; margin-top: 0; }
.wa-choice h3{ font-size: 1.08rem; margin-bottom: 6px; }
.wa-choice p{ font-size: .92rem; color: var(--text-body); margin-bottom: 14px; }
@media (max-width: 620px){ .wa-dialog-box{ padding: 28px 22px 24px; } }

/* ---- Auswahlschalter in den Flotten-Karten (Market Carts, Coffee Bikes) ----
   Kleine runde Punkte wie zuvor, aber mit einer Miniatur des jeweiligen Bildes,
   damit ohne Beschriftung erkennbar ist, was sich dahinter verbirgt.
   Beschriftung steckt in title und aria-label. */
.opt-switch{ display:flex; gap:10px; justify-content:center; margin-top:16px; }
.opt-switch .opt{
  width:30px; height:30px; padding:0; border-radius:50%; cursor:pointer;
  background-image: var(--opt-thumb); background-size: cover; background-position: center;
  border:2px solid var(--white); box-shadow: 0 0 0 1.5px var(--beige-400);
  transition: transform .15s ease, box-shadow .15s ease;
}
.opt-switch .opt:hover{ transform: scale(1.15); box-shadow: 0 0 0 1.5px var(--accent-text); }
.opt-switch .opt.active{ box-shadow: 0 0 0 2.5px var(--accent-text); }
.opt-switch .opt:focus-visible{ outline:3px solid var(--accent-text); outline-offset:3px; }

/* ============ EINWILLIGUNGSBANNER ============
   Gestaltung nach den Vorgaben der Aufsichtsbehörden: "Alle akzeptieren" und
   "Alle ablehnen" sind gleich groß, gleich gefärbt und stehen nebeneinander.
   Keine Vorauswahl, kein Overlay über Impressum und Datenschutz hinaus. */
.cc{ position:fixed; inset:0; z-index:2000; display:none; place-items:end center; padding:20px; }
.cc.cc-offen{ display:grid; }
.cc::before{ content:""; position:absolute; inset:0; background:rgba(42,19,10,.5); }
.cc-box{
  position:relative; width:min(620px,100%); max-height:88vh; overflow-y:auto;
  background:var(--white); border-radius:var(--radius-md); padding:30px 32px 26px;
  box-shadow:var(--shadow-lg);
}
.cc-box h2{ font-size:1.3rem; margin-bottom:10px; }
.cc-text{ font-size:.92rem; color:var(--text-body); margin-bottom:18px; }
.cc-text a{ color:var(--accent-text); text-decoration:underline; }
.cc-liste{ border-top:1px solid var(--beige-400); margin-bottom:18px; }
.cc-zeile{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 0; border-bottom:1px solid var(--beige-400);
  font-size:.88rem; color:var(--text-body); cursor:pointer;
}
.cc-zeile.cc-fest{ cursor:default; color:var(--text-muted); }
.cc-zeile input{ margin-top:3px; width:18px; height:18px; accent-color:var(--accent-text); flex:0 0 18px; }
.cc-zeile strong{ display:block; color:var(--brown-700); font-family:var(--font-head); margin-bottom:2px; }
.cc-knoepfe{ display:flex; gap:12px; flex-wrap:wrap; }
.cc-btn{
  flex:1 1 0; min-width:150px; font-family:var(--font-head); font-size:.95rem; font-weight:600;
  padding:14px 20px; border-radius:100px; cursor:pointer;
  background:var(--accent); color:var(--brown-900); border:2px solid var(--accent);
  transition:background .18s ease, transform .18s ease;
}
.cc-btn:hover{ background:var(--teal-600); border-color:var(--teal-600); transform:translateY(-1px); }
.cc-btn:focus-visible{ outline:3px solid var(--brown-700); outline-offset:3px; }
/* "Einstellungen" ist nachrangig, aber lesbar – niemals der Ablehnen-Knopf */
.cc-btn-neben{ background:var(--white); color:var(--brown-700); border-color:var(--beige-400); flex:1 1 100%; }
.cc-btn-neben:hover{ background:var(--beige-100); border-color:var(--brown-700); }
.cc-speichern{ width:100%; margin-top:12px; }
@media (max-width:620px){
  .cc-box{ padding:24px 20px 20px; }
  .cc-btn{ flex:1 1 100%; }
}

/* Über uns: Person */
.person{ display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; margin:18px 0 6px; }
.person img{ width:220px; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.person > div{ flex:1 1 300px; }
.person-rolle{ color:var(--accent-text); font-weight:600; margin-bottom:8px; }

/* ============ UNTERSEITEN: RHYTHMUS UND AKZENTE ============
   Die Startseite wechselt zwischen weißen und beigen Bändern und setzt runde
   Bildkreise als Akzent. Die Unterseiten hatten das nicht und wirkten flach.
   Diese Regeln geben ihnen denselben Takt. */

/* Kopfbereich mit dem Kreis-Motiv der Startseite */
.page-hero{ position:relative; overflow:hidden; }
.page-hero::after{
  content:""; position:absolute; right:-90px; top:-110px;
  width:340px; height:340px; border-radius:50%;
  background:var(--teal-100); opacity:.55; z-index:0;
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero.mit-bild .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; }
.page-hero-bild{ position:relative; }
.page-hero-bild{ display:flex; justify-content:center; }
.page-hero-bild img{
  width:280px; height:280px; flex:0 0 280px;
  border-radius:50%; object-fit:cover;
  border:4px solid var(--teal-500);          /* gleicher Ring wie auf der Startseite */
  box-shadow:var(--shadow-md); background:var(--white);
}
@media (max-width:980px){ .page-hero-bild img{ width:220px; height:220px; flex-basis:220px; } }
@media (max-width:980px){
  .page-hero.mit-bild .wrap{ grid-template-columns:1fr; gap:30px; }
  .page-hero-bild{ order:-1; }
}

/* Inhaltsbänder: wechselnd, mit Luft wie auf der Startseite */
.band{ padding:80px 0; }
.band-weiss{ background:var(--white); }
.band-beige{ background:var(--beige-300); }
.band-creme{ background:var(--beige-300); }   /* nur noch ein Beigeton */
.band-dunkel{
  background:var(--brown-900);
  background-image:radial-gradient(circle at 15% 20%, rgba(142,206,201,.10), transparent 45%),
                   radial-gradient(circle at 85% 80%, rgba(142,206,201,.08), transparent 45%);
  color:var(--white);
}
.band-dunkel h2, .band-dunkel h3{ color:var(--white); }
.band-dunkel p, .band-dunkel li{ color:rgba(255,255,255,.85); }
.band-inner{ max-width:900px; margin:0 auto; }
.band h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:14px; }
.band h2.center{ text-align:center; }
.band > .wrap > .section-intro{ margin-bottom:40px; }

/* Karten für Aufzählungen, die vorher graue Listen waren */
.karten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; margin-top:34px; }
.karte{
  background:var(--white); border-radius:var(--radius-md); padding:30px 28px;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.band-beige .karte{ background:var(--white); }
.band-weiss .karte{ background:var(--beige-300); }
.band-dunkel .karte{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); box-shadow:none; }
.karte:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.karte h3{ font-size:1.1rem; margin-bottom:8px; }
.karte p{ font-size:.94rem; color:var(--text-body); }
.band-dunkel .karte h3{ color:var(--teal-500); }
.karte-nummer{
  font-family:var(--font-head); font-size:2rem; font-weight:800;
  color:var(--accent); line-height:1; margin-bottom:10px; display:block;
}

/* Zahlenreihe, schlanker als das große Band der Startseite */
.zahlen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px; margin-top:36px; }
.zahl{ text-align:center; padding:26px 12px 20px; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.band-beige .zahl{ background:var(--white); }
.zahl strong{ display:block; font-family:var(--font-head); font-size:2.1rem; font-weight:800; color:var(--brown-700); }
.zahl span{ font-size:.85rem; color:var(--text-muted); }

/* Zweispalter Text und Bild */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.duo img{
  width:300px; height:300px; margin:0 auto; display:block;
  border-radius:50%; object-fit:cover;
  border:4px solid var(--teal-500);
  box-shadow:var(--shadow-md); background:var(--white);
}
.duo.umgekehrt .duo-text{ order:2; }
@media (max-width:900px){ .duo{ grid-template-columns:1fr; gap:30px; } .duo.umgekehrt .duo-text{ order:0; } }

/* Überschriften in Karten und Rechtstexten klarer vom Fließtext trennen */
.legal h2, .band h2{ position:relative; padding-top:6px; }
.legal h2::before{
  content:""; display:block; width:44px; height:3px; border-radius:2px;
  background:var(--accent); margin-bottom:14px;
}
.legal h3{ color:var(--brown-700); font-size:1.12rem; }

/* Kontaktkarten: Überschrift deutlicher */
.contact-card h3{
  font-size:1.05rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent-text); margin-bottom:12px;
}
.contact-card a.big{ font-size:1.25rem; margin:0 0 10px; }
.contact-card address.big{ line-height:1.5; }

/* Geschäftsführung */
.person{ display:grid; grid-template-columns:240px 1fr; gap:44px; align-items:center; margin-top:36px; }
.person-bild img{
  width:240px; height:240px; border-radius:50%; object-fit:cover;
  object-position:center 22%;              /* Gesicht sitzt im oberen Drittel */
  border:4px solid var(--teal-500);
  box-shadow:var(--shadow-md);
  background:var(--beige-300);
}
.person-platzhalter{
  width:240px; height:240px; display:grid; place-items:center;
  background:var(--white); border-radius:50%;
  border:4px solid var(--teal-500); box-shadow:var(--shadow-md);
}
.person-platzhalter img{ width:120px; height:auto; opacity:.4; border:none; box-shadow:none; border-radius:0; }
.person-text > p:first-child{ font-size:1.12rem; line-height:1.7; color:var(--brown-700); }
.person-rolle{ color:var(--accent-text); font-weight:600; margin:10px 0 18px; }
.person-social{ display:flex; gap:18px; flex-wrap:wrap; }
.person-social a{ font-weight:600; font-size:.92rem; color:var(--brown-700); border-bottom:2px solid var(--accent); padding-bottom:2px; }
.person-social a:hover{ color:var(--accent-text); border-color:var(--accent-text); }
@media (max-width:820px){ .person{ grid-template-columns:1fr; gap:26px; justify-items:center; text-align:center; } .person-social{ justify-content:center; } }

/* Gerätebeschreibungen auf /vermietung/ */
.geraet{
  background:var(--white); border-radius:var(--radius-md);
  padding:30px 34px; margin-top:22px; box-shadow:var(--shadow-sm);
  border-left:4px solid var(--accent);
}
.geraet h3{ font-size:1.25rem; margin-bottom:10px; }
.geraet p{ color:var(--text-body); margin-bottom:12px; }
.geraet ul{ margin:0; padding-left:20px; }
.geraet li{ font-size:.94rem; color:var(--text-body); margin-bottom:6px; }
@media (max-width:620px){ .geraet{ padding:24px 22px; } }

/* Einzugsgebiet: Karte und Text nebeneinander */
.gebiet{ display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:56px; align-items:center; margin-top:40px; }
.gebiet-karte{ width:100%; height:auto; }
.gebiet-karte text{ font-family:var(--font-body); }
.gebiet-karte .gk-ring{ font-size:12px; fill:var(--text-muted); text-anchor:middle; letter-spacing:.02em; }
.gebiet-karte .gk-ort circle{ fill:var(--accent); }
.gebiet-karte .gk-ort text{ font-size:14px; fill:var(--text-body); dominant-baseline:middle; }
.gebiet-karte .gk-mitte circle{ fill:var(--brown-700); }
.gebiet-karte .gk-mitte text{ font-family:var(--font-head); font-size:16px; font-weight:700; fill:var(--brown-700); text-anchor:middle; }
.gebiet-text h3{ font-size:1.1rem; margin-bottom:6px; }
.gebiet-text h3 + p{ margin-bottom:18px; }
@media (max-width:900px){ .gebiet{ grid-template-columns:1fr; gap:32px; } .gebiet-karte{ max-width:360px; margin:0 auto; } }

/* Geräteliste: Kreisbild links, Beschreibung rechts */
.geraete-liste{ margin-top:40px; }
.geraet-karte{
  display:grid; grid-template-columns:188px 1fr; gap:40px; align-items:center;
  background:var(--white); border-radius:var(--radius-lg);
  padding:34px 40px; margin-bottom:22px; box-shadow:var(--shadow-sm);
}
.band-weiss .geraet-karte{ background:var(--beige-300); }
.geraet-karte .circle-icon{ margin:0; }
.geraet-inhalt h3{ font-size:1.35rem; margin-bottom:10px; }
.geraet-inhalt p{ color:var(--text-body); }
.geraet-fakten{ display:flex; gap:26px; flex-wrap:wrap; align-items:stretch; list-style:none; padding:0; margin:16px 0 0; }
/* Jede Angabe ist eine eigene Spalte, deren Inhalt unten sitzt. So stehen die
   grauen Beschriftungen alle auf einer Linie, auch wenn über manchen eine Zahl
   steht und über anderen nicht. */
.geraet-fakten li{ display:flex; flex-direction:column; justify-content:flex-end; font-size:.88rem; color:var(--text-muted); }
.geraet-fakten strong{ display:block; font-family:var(--font-head); font-size:1.3rem; color:var(--accent-text); }
@media (max-width:820px){
  .geraet-karte{ grid-template-columns:1fr; gap:22px; justify-items:center; text-align:center; padding:28px 24px; }
  .geraet-fakten{ justify-content:center; gap:20px; }
}

/* Kontaktkarte mit zwei Anschriften */
.adress-label{
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-muted); margin:0 0 2px;
}
.adress-label + address.big{ margin-bottom:16px; }
.contact-card address.big + .adress-label{ margin-top:4px; }

/* Team: zwei Personen nebeneinander */
.personen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:34px; margin-top:40px; }
.person-karte{
  background:var(--white); border-radius:var(--radius-md);
  padding:34px 30px 30px; text-align:center; box-shadow:var(--shadow-sm);
}
.person-karte .person-bild{ display:flex; justify-content:center; margin-bottom:20px; }
.person-karte h3{ font-size:1.3rem; margin-bottom:4px; }
.person-karte .person-rolle{ margin:0 0 14px; }
.person-karte > p{ font-size:.95rem; color:var(--text-body); }
.person-karte .person-social{ justify-content:center; margin-top:18px; }

/* Kontaktzeile und Social-Icons in den Personenkarten */
/* E-Mail und Telefon stehen nebeneinander, getrennt durch einen Strich.
   Auf schmalen Schirmen bricht die Zeile um, dann fällt der Strich weg. */
.person-kontakt{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:4px 10px; margin-top:16px; }
.person-kontakt .trenner{ color:var(--beige-400); font-weight:400; }
@media (max-width:430px){
  .person-kontakt{ flex-direction:column; gap:4px; }
  .person-kontakt .trenner{ display:none; }
}
.person-kontakt a{ font-weight:600; font-size:.93rem; color:var(--brown-700); }
.person-kontakt a:hover{ color:var(--accent-text); }
.person-karte .person-social{ display:flex; gap:14px; justify-content:center; margin-top:16px; }
.person-social a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--beige-300); border:none; padding:0; transition:background .18s ease, transform .18s ease; }
.person-social a:hover{ background:var(--accent); transform:translateY(-2px); }
.person-social svg{ width:19px; height:19px; fill:var(--brown-700); }
.person-social a:hover svg{ fill:var(--brown-900); }
.person-social a:focus-visible{ outline:3px solid var(--accent-text); outline-offset:3px; }

/* Landingpage Eis Pops: Preisblock und Galerie */
.preis-zeile{ display:flex; gap:40px; align-items:center; flex-wrap:wrap; margin-top:32px; }
.preis{ background:var(--white); border-radius:var(--radius-md); padding:22px 30px; box-shadow:var(--shadow-sm); }
.preis-label{ display:block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }
.preis strong{ display:block; font-family:var(--font-head); font-size:2.4rem; font-weight:800; color:var(--brown-700); line-height:1.1; }
.preis-zusatz{ font-size:.85rem; color:var(--text-muted); }
.preis-fakten{ display:flex; gap:34px; }
.preis-fakten strong{ display:block; font-family:var(--font-head); font-size:1.7rem; font-weight:800; color:var(--accent-text); line-height:1.1; }
.preis-fakten span{ font-size:.85rem; color:var(--text-muted); }
.pop-galerie{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:28px; margin-top:40px; }
.pop-galerie figure{ margin:0; text-align:center; }
.pop-galerie img{ height:230px; width:auto; margin:0 auto 12px; object-fit:contain; }
.pop-galerie figcaption{ font-size:.85rem; color:var(--text-muted); }
@media (max-width:620px){
  .preis-zeile{ gap:22px; }
  .preis-fakten{ gap:24px; }
  .pop-galerie img{ height:170px; }
}

/* Sechs Karten in zwei Reihen zu dritt, Größe wie bei den übrigen Karten */
.karten.karten-drei{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .karten.karten-drei{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .karten.karten-drei{ grid-template-columns:1fr; } }
.galerie-hinweis{ margin-top:26px; text-align:center; font-size:.85rem; color:var(--text-muted); max-width:720px; margin-left:auto; margin-right:auto; }

/* Gerätekarte mit Umschalter: Auswahl sitzt unter dem Bild */
.geraet-bild{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.geraet-bild .circle-icon{ margin:0; }
.geraet-bild .opt-switch{ margin-top:0; }

/* Widerrufs-Knopf unten links, Gegenstück zum WhatsApp-Knopf rechts.
   Bewusst zurückhaltend: er soll erreichbar sein, aber nicht ablenken. */
.cc-knopf{
  position:fixed; left:20px; bottom:20px; z-index:900;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; padding:0;
  background:var(--white); border:1.5px solid var(--beige-400);
  box-shadow:0 6px 18px rgba(42,19,10,.16);
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.cc-knopf svg{ width:22px; height:22px; fill:var(--brown-700); }
.cc-knopf:hover{ background:var(--beige-100); border-color:var(--brown-700); transform:translateY(-2px); }
.cc-knopf:focus-visible{ outline:3px solid var(--accent-text); outline-offset:3px; }
@media (max-width:620px){ .cc-knopf{ left:14px; bottom:14px; width:40px; height:40px; } }
@media print{ .cc-knopf{ display:none !important; } }

/* Technische Daten: kleiner Knopf unten rechts in jeder Gerätekachel,
   dahinter ein Fenster mit Maßskizze und Datenblatt. */
.geraet-fuss{ display:flex; justify-content:flex-end; margin-top:18px; }
.technik-knopf{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:.82rem; font-weight:500;
  color:var(--text-muted); background:transparent;
  border:1.5px solid var(--beige-400); border-radius:999px;
  padding:7px 15px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.technik-knopf svg{ width:15px; height:15px; flex:none; }
.technik-knopf:hover{ color:var(--brown-700); border-color:var(--accent-text); background:var(--beige-100); }
.technik-knopf:focus-visible{ outline:3px solid var(--accent-text); outline-offset:2px; }
.band-weiss .technik-knopf{ border-color:var(--white); }
.band-weiss .technik-knopf:hover{ background:var(--white); border-color:var(--accent-text); }

.technik-pop{
  width:min(440px, calc(100vw - 28px)); max-height:calc(100vh - 40px);
  margin:auto; overflow-y:auto;
  border:0; border-radius:var(--radius-md); padding:24px 26px 22px;
  background:var(--white); color:var(--text-body); box-shadow:var(--shadow-lg);
}
.technik-pop::backdrop{ background:rgba(42,19,10,.55); }
.technik-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.technik-kopf h4{ font-family:var(--font-head); font-size:1.15rem; color:var(--brown-700); margin:0; }
.technik-zu{
  flex:none; width:32px; height:32px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; padding:0;
  background:var(--beige-100); border:1px solid var(--beige-300); color:var(--brown-700);
}
.technik-zu svg{ width:16px; height:16px; }
.technik-zu:hover{ background:var(--beige-300); }
.technik-zu:focus-visible{ outline:3px solid var(--accent-text); outline-offset:2px; }
.technik-skizze{ background:var(--beige-300); border-radius:var(--radius-sm); padding:12px 14px; color:var(--brown-700); }
.technik-skizze svg{ display:block; width:100%; height:auto; }
.technik-skizze-hinweis{ font-size:.73rem; color:var(--text-muted); text-align:center; margin:8px 0 0; }
.technik-daten{ margin:16px 0 0; }
.technik-daten > div{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:9px 0; border-bottom:1px solid var(--beige-300); }
.technik-daten > div:last-child{ border-bottom:0; }
.technik-daten dt{ font-size:.86rem; font-weight:500; color:var(--text-body); }
.technik-daten dd{ font-size:.84rem; color:var(--brown-700); margin:0; text-align:right; }
.technik-daten dd.offen{ color:var(--text-muted); font-style:italic; }
.technik-hinweis{ font-size:.79rem; color:var(--text-muted); margin:14px 0 0; }
.technik-hinweis a{ color:var(--accent-text); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:820px){
  .geraet-fuss{ justify-content:center; }
}

/* Abverkaufsseite 069/FFM: drei Produktkarten nebeneinander, Bild oben.
   Die Pops sind hochformatig und freigestellt, deshalb feste Bildhöhe und
   contain, damit die drei Motive trotz unterschiedlicher Dateiformate
   gleich groß wirken. */
.pop-produkte{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; margin-top:40px; }
.pop-produkt{
  background:var(--beige-300); border-radius:var(--radius-lg);
  padding:30px 26px 28px; text-align:center;
}
.band-beige .pop-produkt{ background:var(--white); }
.pop-produkt-bild{ display:grid; place-items:center; height:250px; margin-bottom:20px; }
.pop-produkt-bild img{ max-height:250px; width:auto; object-fit:contain; }
.pop-produkt h3{ font-size:1.2rem; margin-bottom:10px; }
.pop-produkt p{ color:var(--text-body); }
.pop-merkmale{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:6px; }
.pop-merkmale li{ font-size:.84rem; color:var(--text-muted); }
/* Vegan-Abzeichen auf den Eis-Pop-Karten (13.9.2026). Alle drei Motive der
   Edition FFM sind vegan, das Abzeichen steht deshalb auf jeder Karte. */
.pop-vegan{
  display:inline-flex; align-items:center; gap:6px;
  margin:0 0 10px; padding:4px 11px; border-radius:999px;
  background:#EAF4EC; color:#2F6B3C;
  font-family:var(--font-body); font-size:.76rem; font-weight:600;
}
.pop-vegan svg{ width:13px; height:13px; flex:none; }
/* Englischer Name der drei Motive, Schreibschrift im Logo-Türkis. Die Farbe
   kommt aus der .script-Regel weiter unten (13.9.2026). */
.pop-name-en{ font-family:var(--font-script); font-size:1.15rem; line-height:1.1; margin:-4px 0 10px; }
.preis-fakten-drei strong{ font-size:1.5rem; }
@media (max-width:900px){
  .pop-produkte{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
  .pop-produkt:last-child{ grid-column:1 / -1; max-width:360px; margin:0 auto; }
}
@media (max-width:620px){
  .pop-produkte{ grid-template-columns:1fr; }
  .pop-produkt:last-child{ grid-column:auto; }
  .pop-produkt-bild{ height:200px; }
  .pop-produkt-bild img{ max-height:200px; }
  .preis-fakten-drei{ gap:20px; }
}

/* Geräte, die es in zwei Größen gibt: je Größe eine eigene Skizze samt Daten */
.technik-variante + .technik-variante{ margin-top:26px; padding-top:22px; border-top:1px solid var(--beige-300); }
.technik-variante h5{ font-family:var(--font-head); font-size:.95rem; color:var(--brown-700); margin:0 0 10px; }
.technik-skizze img{ display:block; width:100%; height:auto; border-radius:6px; }
.technik-skizze:has(img){ background:var(--white); border:1px solid var(--beige-300); padding:8px; }

.technik-pop-breit{ width:min(620px, calc(100vw - 28px)); }

/* Druckdaten-Abschnitt im Fenster mit den technischen Daten */
.technik-druck{ margin-top:22px; padding-top:20px; border-top:1px solid var(--beige-300); }
.technik-druck h5{ font-family:var(--font-head); font-size:.95rem; color:var(--brown-700); margin:0 0 10px; }
.technik-druck .technik-daten{ margin-top:0; }
.technik-druck p{ font-size:.82rem; color:var(--text-muted); margin:14px 0 0; }

/* Zufahrtshinweis und einklappbare Detaildaten im Technikfenster */
.technik-zufahrt{
  font-size:.83rem; color:var(--brown-700); background:var(--beige-100);
  border:1px solid var(--beige-300); border-radius:var(--radius-sm);
  padding:10px 14px; margin:0 0 16px;
}
.technik-mehr{ margin-top:16px; border-top:1px solid var(--beige-300); padding-top:14px; }
.technik-mehr > summary{
  cursor:pointer; list-style:none; font-family:var(--font-head);
  font-size:.9rem; color:var(--brown-700);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.technik-mehr > summary::-webkit-details-marker{ display:none; }
.technik-mehr > summary::after{
  content:""; width:8px; height:8px; flex:none;
  border-right:2px solid var(--accent-text); border-bottom:2px solid var(--accent-text);
  transform:rotate(45deg); transition:transform .18s ease;
}
.technik-mehr[open] > summary::after{ transform:rotate(-135deg); }
.technik-mehr > summary:focus-visible{ outline:3px solid var(--accent-text); outline-offset:3px; border-radius:6px; }
.technik-mehr-inhalt{ padding-top:4px; }
.technik-mehr-inhalt p{ font-size:.82rem; color:var(--text-muted); margin:14px 0 0; }

/* ============ HANDY-FEINSCHLIFF (17.9.2026) ============ */
@media (max-width: 620px){
  /* .wrap{ padding:0 24px } setzte oben und unten 0: Logo und Anfrage-Knopf
     stießen an die Kanten. Luft zurückgeben, beides minimal kleiner. */
  .site-header .header-inner{ padding-top: 9px; padding-bottom: 9px; }
  .brand-logo{ height: 48px; }
  .header-actions .btn-primary{ padding: 11px 18px; font-size: .88rem; }

  /* Kontaktknöpfe im Schlussband entfallen auf dem Handy: das Formular steht
     direkt darunter, WhatsApp schwebt ohnehin unten rechts. */
  .cta-contact{ display: none; }

  /* „Mehr als nur Catering“: Bild flacher, spart Scrollweg */
  .about-img img{ height: 210px; }

  /* Genusswelten: Pillen behalten ihre natürliche Länge und laufen frei
     umbrochen, sind aber so kompakt, dass mindestens zwei nebeneinander passen. */
  .flavor-grid{ gap: 8px 8px; margin: 32px 0 44px; }
  .flavor-item{ padding: 8px 11px; font-size: .74rem; gap: 6px; white-space: nowrap; }
  /* Reihenfolge nur auf dem Handy so gemischt, dass jede Zeile mindestens
     zwei Pillen trägt (lange und kurze Begriffe abwechselnd). */
  .flavor-item:nth-child(1){ order: 1; }  /* Eis & Sorbet */
  .flavor-item:nth-child(4){ order: 2; }  /* Burger & Grill */
  .flavor-item:nth-child(5){ order: 3; }  /* Bowls */
  .flavor-item:nth-child(2){ order: 4; }  /* Kaffee & Espresso */
  .flavor-item:nth-child(3){ order: 5; }  /* Crêpes & Waffeln */
  .flavor-item:nth-child(7){ order: 6; }  /* Früchtebar & Schokobrunnen */
  .flavor-item:nth-child(6){ order: 7; }  /* Candy Bar */
  .flavor-item:nth-child(8){ order: 8; }  /* Milchshakes & Smoothies */
  .flavor-item:nth-child(9){ order: 9; }  /* Detox & Matcha */
  .flavor-item .dot{ flex: 0 0 6px; width: 6px; height: 6px; }

  /* Slider: jede Folie hat dieselbe Bildhöhe. Vorher war die Branding-Skizze
     fast 280 px hoch und hat alle Folien auf diese Höhe gestreckt. */
  .slide-visual,
  .visual-single,
  .visual-trio,
  .visual-sketch{ height: 190px; }
  .visual-trio img{ height: 100%; max-width: 31%; object-fit: contain; }
  .visual-sketch img{ height: 100%; width: auto; }
}

/* Google-Bewertung unter der Kundenstimme (statischer Link, kein Google-Skript) */
.google-rating{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 6px 14px;
  max-width: 620px; margin: 36px auto 0; padding: 14px 20px;
  border: 1.5px solid var(--beige-400); border-radius: 100px;
  color: var(--brown-700); font-size: .95rem; text-align:center;
}
.google-rating-stars{ color: #F5B301; letter-spacing: 2px; font-size: 1.05rem; }
.google-rating-link{ color: var(--teal-600); font-weight: 600; }
.google-rating:hover .google-rating-link{ text-decoration: underline; }
@media (max-width: 620px){ .google-rating{ border-radius: 18px; font-size: .88rem; } }

.rezensionen{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; margin-top: 34px; }
.rezension{
  margin:0; display:flex; flex-direction:column; gap: 12px;
  background: var(--beige-100); border: 1px dashed var(--beige-400);
  border-radius: var(--radius-lg); padding: 28px 26px;
}
.rezension-sterne{ color:#F5B301; letter-spacing:2px; }
.rezension blockquote{ margin:0; color: var(--brown-700); font-style: italic; flex:1; }
.rezension figcaption{ color: var(--text-muted); font-weight:600; font-size:.85rem; }
.rezensionen-hinweis{ text-align:center; color: var(--text-muted); font-size:.8rem; margin-top: 18px; }
@media (max-width: 900px){ .rezensionen{ grid-template-columns: 1fr; gap: 14px; } .rezension{ padding: 22px 20px; } }
/* Sehr schmale Handys (360 px): Pillen noch etwas kompakter, damit auch die
   letzte Zeile zwei Begriffe trägt. */
@media (max-width: 380px){
  .flavor-item{ padding: 7px 9px; font-size: .7rem; gap: 5px; }
}
.rezension blockquote{ white-space: pre-line; }

/* Handy, Runde 3 (17.9.2026) */
@media (max-width: 620px){
  /* Slider-Pfeile nach außen, Punkte bleiben mittig: keine Überlappung mehr,
     auch wenn der aktive Punkt beim Wechsel größer wird. */
  .slider-arrow.prev{ left: 18px; }
  .slider-arrow.next{ right: 18px; }
  .slider-dots{ gap: 8px; }

  /* „So einfach geht's“: schmalere Innenabstände, damit Zeilen nicht nach
     einem Wort umbrechen. */
  .process-grid{ gap: 10px; }
  .process-step{ padding: 14px 0; }
  .process-step p{ font-size: .83rem; line-height: 1.45; }
  .process-num{ width: 46px; height: 46px; font-size: 1.1rem; margin-bottom: 12px; }
}

/* Eiswagen & Carts auf dem Handy als Wisch-Leiste (17.9.2026):
   eine Karte gut drei Viertel breit, die nächste schaut rechts an. */
.wisch-punkte{ display:none; }
@media (max-width: 620px){
  .fleet-grid{
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; margin: 40px -24px 0; padding: 4px 24px 16px;
    scroll-padding: 0 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .fleet-grid::-webkit-scrollbar{ display: none; }
  .fleet-card{ flex: 0 0 80%; scroll-snap-align: start; }
  .wisch-punkte{ display:flex; justify-content:center; gap: 8px; margin-top: 2px; }
  .wisch-punkte button{
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px;
    background: var(--beige-400); cursor: pointer; transition: width .2s ease, background .2s ease;
  }
  .wisch-punkte button.aktiv{ width: 22px; background: var(--teal-600); }
}

/* Handy, Runde 4 (17.9.2026): Kundenstimmen als Wisch-Leiste, Formular kompakter */
@media (max-width: 620px){
  .rezensionen{
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; margin: 28px -24px 0; padding: 4px 24px 14px;
    scroll-padding: 0 24px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .rezensionen[hidden]{ display: none; }
  .rezensionen::-webkit-scrollbar{ display: none; }
  .rezension{ flex: 0 0 85%; scroll-snap-align: start; padding: 22px 20px; }

  /* Anfrage-Band und Formular */
  .cta-band{ padding: 48px 0; }
  .cta-inner{ gap: 22px; }
  .cta-copy h2{ font-size: 1.55rem; line-height: 1.2; }
  .cta-copy p.light{ margin: 8px 0 0; font-size: .92rem; }
  .cta-form{ padding: 22px 18px; gap: 10px; }
  .cta-form h3{ font-size: 1.1rem; }
  .form-intro{ font-size: .82rem; margin: 0 0 2px; }
  .form-row{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .form-row input{ min-width: 0; width: 100%; }
  .cta-form label{ font-size: .8rem; gap: 4px; }
  /* 16 px Schrift im Feld: darunter zoomt das iPhone beim Antippen hinein */
  .cta-form input{ padding: 10px 12px; font-size: 16px; border-radius: 10px; }
  .cta-form .btn-lg{ padding-top: 14px; padding-bottom: 14px; }
  .form-note{ font-size: .72rem; }
}
@media (max-width: 620px){ .rezension blockquote{ font-size: .92rem; line-height: 1.5; } }
/* Karten nicht auf die längste Rezension strecken: sonst viel Leerraum bei kurzen Texten */
@media (max-width: 620px){ .rezensionen{ align-items: flex-start; } }

/* Unsere Werte auf dem Handy als Wisch-Leiste (17.9.2026, Variante C) */
@media (max-width: 620px){
  .values-grid{
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; margin: 28px -24px 0; padding: 4px 24px 14px;
    scroll-padding: 0 24px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .values-grid::-webkit-scrollbar{ display: none; }
  .value-card{
    flex: 0 0 80%; scroll-snap-align: start;
    background: var(--white); border-radius: 18px; padding: 22px 16px;
  }
  .value-card .circle-icon{ width: 110px; height: 110px; margin-bottom: 14px; }
}