/* ========= Kaufe-Alle-Wagen – MAIN CSS (ÜBERARBEITET) ========= */
:root{
  --primary:#0b5fff;
  --dark:#0c2236;
  --yellow:#ffcc00;
  --light:#f5f7fb;
  --card:#ffffff;
  --shadow:0 10px 24px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;color:#1f2a33;background:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.h2{margin:18px 0 14px}

/* ========================================
   TOPBAR
   ======================================== */
.topbar{background:var(--dark);color:#fff;position:sticky;top:0;z-index:1000}
.topbar-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none}
.logo{width:32px;height:32px;border-radius:50%;background:var(--yellow);color:#000;display:grid;place-items:center;font-weight:800}
.brand-text{font-weight:800;font-size:15px}
.actions{display:flex;align-items:center;gap:.5rem}
.btn{appearance:none;border:1px solid rgba(255,255,255,.2);padding:.45rem .7rem;border-radius:999px;background:transparent;color:#fff;text-decoration:none;font-weight:700;cursor:pointer}
.btn.wa{background:#25D366;border-color:#1fb656}
.nav-toggle{margin-left:.25rem;width:38px;height:34px;border:0;background:transparent;cursor:pointer}
.nav-toggle span{display:block;height:3px;background:#fff;margin:6px 0;border-radius:2px}
.nav{display:none;background:#0f2a45}
.nav.show{display:block}
.nav a{display:block;color:#fff;text-decoration:none;padding:12px 16px;border-top:1px solid rgba(255,255,255,.08)}
.nav a:hover{background:rgba(255,255,255,.06)}

/* ========================================
   HERO BEREICH
   ======================================== */
.hero{position:relative;padding-bottom:28px}
.hero-bg img{display:block;width:100%;height:450px;object-fit:cover;filter:brightness(.92);border-bottom-left-radius:28px;border-bottom-right-radius:28px;box-shadow:var(--shadow)}
.hero-inner{position:relative;margin-top:-400px}
.hero-title{color:#fff;font-size:34px;font-weight:900;text-shadow:0 4px 22px rgba(0,0,0,.25)}
.hero-sub{color:#eaf2ff;margin:6px 0 10px}
.yellow-bar{display:inline-block;background:var(--yellow);color:#222;font-weight:800;padding:.55rem 1rem;border-radius:999px;border:1px solid #e3b800;box-shadow:0 6px 18px rgba(0,0,0,.12);margin:6px 0 14px}

/* ========================================
   FORMULAR + SIDE-CARD LAYOUT (FIXED!)
   ======================================== */
.section.form {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Formular - linke Seite */
.section.form .form-wrap {
  flex: 1 1 600px;
  min-width: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  padding: 1.5rem;
  border: 1px solid #e0e3e8;
}

/* Side-Card - rechte Seite (BLEIBT OBEN!) */
.section.form .side-card {
  flex: 0 0 360px;
  align-self: flex-start;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  padding: 1.5rem;
  border: 1px solid #e0e3e8;
  display: flex;
  flex-direction: column;
  order: 2;
}

/* Bild in der Side-Card */
.section.form .side-card .photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.side-card h4 {
  margin: 6px 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: #0c2236;
}

.side-card p,
.side-card .small {
  color: #444;
  margin-bottom: 10px;
  line-height: 1.4;
  font-size: 14px;
}

.side-card .cta {
  background: #0b5fff;
  color: #fff;
  text-align: center;
  font-weight: 800;
  border-radius: 12px;
  border: 2px solid #000;
  padding: .45rem .8rem;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 3px 0 #000, 0 8px 12px rgba(0,0,0,.18);
  margin: 8px 0 10px;
  text-decoration: none;
  display: block;
}

.side-card .badge {
  align-self: start;
  background: #ffcc00;
  border: 1px solid #e3b800;
  border-radius: 999px;
  padding: .25rem .6rem;
  font-weight: 800;
  margin-top: auto;
}

/* ========================================
   CHIPS (Buttons)
   ======================================== */
.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 10px;
}

.chip {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 40px;
  padding: .5rem .9rem;
  text-align: center;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}

.chip::before {
  content: "○";
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.chip.active::before {
  content: "✓";
}

/* ========================================
   FORMULAR KARTE
   ======================================== */
.card {
  background: #ffffff;
  border: 2px solid #000;
  border-radius: 14px;
  padding: 14px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.30), 0 10px 20px rgba(0,0,0,.15);
}

.card .info {
  margin: 0 0 8px;
  color: #32404c;
}

/* Formular Grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: #0c2236;
}

.form-grid input,
.form-grid textarea,
.form-grid select {
  border-radius: 12px;
  border: 1px solid #aab4c4;
  background: linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  padding: 0.65rem 0.8rem;
  font: inherit;
  height: 46px;
  transition: all 0.2s ease;
}

.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus {
  outline: none;
  border-color: #0051ff;
  box-shadow: 0 0 0 3px rgba(0,81,255,0.15);
}


.form-grid .full {
  grid-column: 1 / -1;
}

.form-grid textarea {
  height: auto;
  min-height: 80px;
  resize: vertical;
}

/* ========================================
   Formular-Icons (Step 1)
   ======================================= */

.form-grid .field-with-icon {
  /* Label ist schon flex-column, kommt aus .form-grid label */
}

.form-grid .field-input {
  position: relative;
  display: flex;
  align-items: center;
}

.form-grid .field-input input {
  width: 100%;
}

.form-grid .field-icon {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  pointer-events: none; /* Icon klickt nicht */
}

.form-grid .field-icon img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Platz nach links für das Icon */
.form-grid .field-with-icon input {
  padding-left: 46px;
}


/* ========================================
   BUTTONS
   ======================================== */
.btn.primary {
  background: linear-gradient(180deg, #0b5fff 0%, #0846c2 100%);
  border: none;
  border-radius: 14px;
  color: #fff;
  padding: 0.65rem 1.2rem;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  box-shadow: 0 4px 0 #072b82, 0 8px 16px rgba(0,0,0,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.btn.primary:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.btn.primary:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.25);
}

.hint {
  color: #6e7781;
  font-size: 12px;
  margin: .25rem 0 0;
}

/* ========================================
   SCHRITTE 1-2-3
   ======================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.step {
  background: linear-gradient(180deg, #ffffff 0%, #f1f4fa 100%);
  border: 1px solid #cfd5e0;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .2s, box-shadow .2s;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.step-ico {
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  object-fit: contain;
}

.step-num {
  font-weight: 900;
  color: #0b5fff;
  font-size: 18px;
  margin-bottom: 4px;
}

.step-title {
  font-weight: 800;
  color: #0c2236;
  margin-bottom: 4px;
}

.step-text {
  color: #444;
  font-size: 14px;
  line-height: 1.5;
}

/* ========================================
   DREI BILDER KACHELN
   ======================================== */
.tiles {
  padding: 22px 0;
  display: grid;
  gap: 12px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Desktop: zwei nebeneinander */
@media (min-width: 900px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: automatisch 1 Spalte, Karten-Format */
.tile {
  width: 100%;
  aspect-ratio: 16 / 9;     /* gleiches Format für beide */
  object-fit: cover;        /* füllt die Karte sauber */
  object-position: center;  /* mittig ausrichten */
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: block;
}

/* ========================================
   VORTEILE & BEWERTUNGEN
   ======================================== */
.section {
  padding: 30px 0;
}

.section.light {
  background: var(--light);
}

.cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.card.adv {
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e7ecf4;
  box-shadow: var(--shadow);
}

.card .ico {
  font-size: 26px;
  margin-bottom: 6px;
}

/* Slider */
.slider {
  position: relative;
  background: #fff;
  border: 1px solid #e7ecf4;
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.slides {
  display: flex;
  transition: transform 1.2s cubic-bezier(0.55, 0.05, 0.35, 1);
}

.slide {
  min-width: 100%;
  text-align: center;
}

.dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: #cfd4db;
  cursor: pointer;
}

.dots button.active {
  background: var(--primary);
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
  background: #0f1216;
  color: #cbd5e1;
  text-align: center;
  padding: 24px 0;
}

.footer small {
  color: #9aa5b1;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablets & kleine Laptops */
@media (min-width: 769px) and (max-width: 1024px) {
  .section.form {
    gap: 1.5rem;
  }
  
  .section.form .side-card {
    flex: 0 0 300px;
  }
}

/* Nur auf SEHR KLEINEN Handys unter Formular */
@media (max-width: 768px) {
  .section.form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .section.form .side-card {
    flex: 1 1 auto;
    order: 2;
  }
  
  .section.form .form-wrap {
    order: 1;
  }
  
  .section.form .side-card .photo {
    max-height: 400px;
  }
}

/* Allgemeine Mobile Anpassungen */
@media (max-width: 700px) {
  .hero-bg img {
    height: 400px;
  }
  
  .hero-inner {
    margin-top: -360px;
  }
  
  .hero-title {
    font-size: 28px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .grid-3 {
    grid-template-columns: 1fr;
  }
  
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .btn.primary {
    font-size: 15px;
    padding: 0.6rem 1rem;
  }
}

@media (max-width: 600px) {
  .chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .chip {
    width: 100%;
    padding: .5rem;
    min-height: 44px;
    font-size: 14px;
    border-radius: 12px;
  }
  
  .steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .cards {
    grid-template-columns: 1fr;
  }
  
  .btn.primary {
    font-size: 14px;
  }
}
/* ===== FINAL: Formular links, Bildkasten rechts (stabil) ===== */

/* Debug-Rand sicher aus */
body{ border:none !important; }  /* roter Balken weg */  /*  */

/* 1) Zweispaltiges Layout erzwingen */
.section.form .form-row{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) 380px !important; /* links flexibel, rechts 380px */
  gap:16px !important;
  align-items:start !important;
}

/* 2) Keine Selbst-Umsortierung / Höhenlimits */
.section.form .form-wrap{ order:0 !important; min-width:0; }
.section.form .side-card{ order:0 !important; width:auto; max-height:none !important; }

/* 3) Side-Card-Optik */
.section.form .side-card{
  background:#fff;
  border:1px solid #e0e3e8;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  padding:16px;
}

/* 4) Bild: voll in der Breite, nie abschneiden */
.section.form .side-card .photo,
.section.form .side-card img{
  display:block;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;   /* Logo bleibt immer sichtbar */
  object-position:center bottom;
  margin:0 0 12px 0 !important;
  border-radius:12px !important;
  max-height:none !important;      /* alle alten Limits neutralisieren */
}

/* 5) Mobil untereinander anordnen (Formular zuerst) */
@media (max-width:900px){
  .section.form .form-row{ grid-template-columns:1fr !important; }
  .section.form .form-wrap{ order:1 !important; }
  .section.form .side-card{ order:2 !important; margin-top:12px; }
}
/* ===== Fix passend zu deiner HTML-Struktur (HERO -> #form) ===== */

/* 1) Der ganze Bereich bleibt Block – keine Spalten */
#form{
  display:block !important;
}

/* 2) Side-Card (Mann) mittig unter dem Formular-/Steps-Block */
#form .side-card{
  max-width:520px;          /* Desktop-Breite des Kastens */
  margin:24px auto 0;       /* zentriert unter den 1-2-3-Kästchen */
  padding:16px;
  background:#fff;
  border:1px solid #e0e3e8;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  display:block;            /* sicherstellen, dass keine alten Flex-Regeln wirken */
}

/* 3) Foto im Kasten: komplett sichtbar, ohne Beschneiden */
#form .side-card .photo{
  display:block;
  width:100%;
  height:auto !important;
  object-fit:contain !important;
  object-position:center bottom;
  border-radius:12px;
  margin:0 0 12px 0;
}

/* 4) Mobil: etwas schmaler, damit es nicht übergroß wirkt */
@media (max-width: 700px){
  #form .side-card{
    max-width:92%;
    margin:18px auto 0;
  }
}
/* ===== Feinoptimierung: Mann-Kasten auf Desktop breiter + graue Umrandung weg ===== */

/* Desktop */
#form .side-card {
  max-width: 620px;             /* etwas breiter */
  margin: 32px auto 0;
  padding: 18px;
  background: linear-gradient(to bottom, #ffffff, #f7f9fb); /* ganz leichter Verlauf */
  border: none !important;      /* graue Linie komplett weg */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* sanfter Schatten */
  border-radius: 18px;
}

/* Bild ohne Rahmen oder graue Linie */
#form .side-card .photo,
#form .side-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border: none !important;
  box-shadow: none !important;
  border-radius: 18px;  /* passt optisch zu Kasten */
  background: none;
}

/* Optional: ganz leichter Hintergrund, um den Weißraum optisch zu trennen */
body {
  background: #f4f6f9;
}

/* Mobile (automatisch wieder etwas schmaler) */
@media (max-width: 700px) {
  #form .side-card {
    max-width: 92%;
    background: #fff; /* neutral mobil */
  }
}
/* Gesamtbereich für Mann + Teaser links/rechts */
.man-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  margin: 40px auto;
  max-width: 1100px;
}

/* Mann-Kasten */
.man-card {
  text-align: center;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 20px;
  flex: 1 1 300px;
  max-width: 340px;
}

.man-photo {
  width: 78%;
  max-width: 320px;
  border-radius: 14px;
  display: block;
  margin: 0 auto 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* Teaser links/rechts */
.teaser {
  flex: 1 1 280px;
  max-width: 320px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.teaser h4 {
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: #1e1e1e;
}

.teaser-text {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #444;
}

/* Bilder in Teasern */
.teaser-media img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* Mobilanpassung */
@media (max-width: 950px) {
  .man-row {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .teaser, .man-card {
    max-width: 95%;
    width: 95%;
  }

  .man-photo {
    width: 85%;
    max-width: none;
  }
}
/* === FEINSCHLIFF: Bereich unter den 1–2–3 Kästchen === */

/* 0) Sicherheitsnetz für Motion */
@media (prefers-reduced-motion: reduce) {
  .man-row .teaser,
  .man-row .man-card { animation: none !important; }
}

/* 1) Sanfte Hintergrund-Bande hinter dem ganzen Block */
.man-row{
  position: relative;
  padding: 22px 24px;                  /* innen etwas Luft */
  border-radius: 20px;                  /* weiche Rundung der Bande */
  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
  box-shadow: 0 12px 32px rgba(16,36,94,0.06);  /* sehr dezent */
}

/* 2) Boxen-Look (Teaser & Mann) – etwas edler */
.man-row .teaser,
.man-row .man-card{
  background: #fff;
  border: 1px solid #e8edf3;           /* feiner Rahmen */
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* 2a) Hover-Effekt (nur Desktop spürbar) */
@media (hover:hover){
  .man-row .teaser:hover,
  .man-row .man-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
  }
}

/* 3) Typo-Kosmetik in Teasern */
.man-row .teaser h4{
  letter-spacing: .2px;
}
.man-row .teaser .teaser-text{
  color:#3f4852;
  line-height:1.58;
}

/* 4) Leichte Einblend-Animation beim Laden */
.man-row .teaser, .man-row .man-card{ animation: floatIn .55s ease both; }
.man-row > *:nth-child(1){ animation-delay: .05s; }
.man-row > *:nth-child(2){ animation-delay: .12s; }
.man-row > *:nth-child(3){ animation-delay: .19s; }

@keyframes floatIn{
  from{ opacity:0; transform: translateY(12px); }
  to{   opacity:1; transform: translateY(0); }
}

/* 5) Mobile Feinschliff: Bande schlanker, Schatten etwas kleiner */
@media (max-width: 950px){
  .man-row{
    padding: 16px 14px;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(16,36,94,0.05);
    background: #ffffff;               /* mobil neutraler */
  }
  .man-row .teaser, .man-row .man-card{
    box-shadow: 0 6px 16px rgba(0,0,0,0.07);
  }
}
/* === MITTELBOX halbieren: oben Mann, unten Deutschland === */
.man-card.man-split{
  display: grid;
  grid-template-rows: 1fr auto 1fr;   /* 50% / Inhalt / 50% */
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

/* oben: Mann kompakt */
.man-card.man-split .man-media{ min-height: 140px; overflow: hidden; }
.man-card.man-split .man-media .man-photo{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Mitte: etwas straffer; Button bleibt 3D durch .btn.primary */
.man-card.man-split .man-content{ padding: 10px 0 6px; text-align:center; }
.man-card.man-split .man-content h3{ margin: 6px 0 2px; }
.man-card.man-split .man-content p{  margin: 6px 0; }

/* unten: kleine Deutschlandkarte */
.man-card.man-split .man-map{
  display:grid; grid-template-rows: 1fr auto;
  background:#f7f9fc; padding:8px 10px; border-radius:12px;
}
.man-card.man-split .man-map .map-photo{
  width:100%; height:100%; object-fit:contain; display:block;
}
.man-card.man-split .man-map .map-caption{
  text-align:center; font-size:14px; color:#1b2a3a; margin-top:6px;
}
/* --- MITTE: feste Reihen + kompakte Höhen --- */
.man-card.man-split{
  display: grid;
  /* feste, kompakte Reihen: oben Foto, Mitte Inhalt, unten Karte */
  grid-template-rows: 160px auto 130px;   /* bei Bedarf 150/120/140 feinjustieren */
  background:#fff; border-radius:16px; overflow:hidden; padding:20px;
}

/* Reihen eindeutig festlegen, damit nichts nach oben springt */
.man-card.man-split .man-media   { grid-row: 1; overflow:hidden; }
.man-card.man-split .man-content { grid-row: 2; padding:10px 0 6px; text-align:center; }
.man-card.man-split .man-map     { grid-row: 3; display:grid; grid-template-rows:1fr auto;
                                   background:#f7f9fc; padding:6px 8px; border-radius:12px; }

/* Foto oben: klein & sauber */
.man-card.man-split .man-media .man-photo{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Button wieder „3D“ in Blau */
.btn.primary.man-btn{
  display:inline-block; padding:7px 14px; border-radius:6px;
  background:#0a2a66; color:#fff; font-weight:700; text-decoration:none;
  box-shadow: 0 4px 0 #071a44, 0 8px 16px rgba(0,0,0,.15);
}

/* Karte unten: bewusst klein halten */
.man-card.man-split .man-map .map-photo{
  width:100%; height:100%; max-height:120px;   /* Karte bleibt klein */
  object-fit:contain; display:block; background:#f7f9fc;
}
.man-card.man-split .man-map .map-caption{
  text-align:center; font-size:14px; color:#1b2a3a; margin-top:4px;
}

/* Optional: Gesamtblock dichter an die oberen Kacheln rücken */
.man-row{ margin-top: 10px; }
/* === MITTEL-BOX final: oben Mann komplett & rund, Mitte Text, unten Karte groß & rund === */

/* gleiche Höhe wie links/rechts – das Grid teilt nur innen auf */
.man-card.man-split{
  display: grid;
  grid-template-rows: 230px auto 210px;   /* Foto / Text / Karte -> bei Bedarf 240/220 feinjustieren */
  background:#fff; border-radius:16px; overflow:hidden; padding:20px;
}

/* OBERES FOTO: rund & vollständig sichtbar (Logo bleibt drin) */
.man-card.man-split .man-media{
  border-radius:14px; overflow:hidden; background:#f7f9fc; /* neutrale Fläche */
}
.man-card.man-split .man-media .man-photo{
  width:100%; height:100%;
  object-fit: contain;                     /* zeigt das komplette Motiv inkl. HM-Logo */
  object-position: center;
  display:block;
}

/* TEXT-MITTE: kompakt; 3D-Blauer Button bleibt erhalten */
.man-card.man-split .man-content{ padding:10px 0 6px; text-align:center; }
.man-card.man-split .man-content h3{ margin:6px 0 2px; }
.man-card.man-split .man-content p{  margin:6px 0; }
.btn.primary.man-btn{
  display:inline-block; padding:7px 14px; border-radius:6px;
  background:#0a2a66; color:#fff; font-weight:700; text-decoration:none;
  box-shadow: 0 4px 0 #071a44, 0 8px 16px rgba(0,0,0,.15);
}

/* UNTERE KARTE: rund, größer, randlos im grauen Feld */
.man-card.man-split .man-map{
  grid-template-rows: 1fr auto;
  background:#f0f3f8;                      /* sehr hellgrau, wirkt wie deine Kacheln */
  padding:0; border-radius:14px; overflow:hidden;
}
.man-card.man-split .man-map .map-photo{
  width:100%; height:100%;
  object-fit: contain;                      /* ganze Deutschlandkarte sichtbar, ohne Beschnitt */
  display:block;
}
.man-card.man-split .man-map .map-caption{
  padding:6px 8px; margin:0;
  text-align:center; font-size:14px; color:#1b2a3a;
}

/* Mini-Feinjustage: rechter Kasten darf nicht „kürzer“ wirken */
.teaser{ height:100%; }
.man-card.man-split .man-map .map-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* zeigt das komplette Bild */
  transform: rotate(5deg) scale(1.25); /* leicht schräg + etwas größer */
  transform-origin: center center;
  display: block;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.15)); /* sanfter Schatten */
  margin-top: 5px;              /* leicht nach unten schieben, optional */
}
/* === Karte unten: kein Schrägbalken, kompakt, sauber === */

/* 1) Mittlere Box: unteren Bereich kürzer machen */
.man-card.man-split{
  grid-template-rows: 230px auto 160px;   /* vorher >200px; hier kürzer */
}

/* 2) Hintergrund & Schräglage der Karte neutralisieren */
.man-card.man-split .man-map{
  background: transparent !important;     /* grauen Kasten aus */
  padding: 0 0 6px !important;            /* nur kleiner Abstand unten */
  border-radius: 14px;
  overflow: hidden;
}

/* 3) Karte selbst: NICHT drehen/zoomen, keine Schatten */
.man-card.man-split .man-map .map-photo{
  width:100%; height:100%;
  object-fit: contain;                    /* komplette Karte sichtbar */
  transform: none !important;             /* Rotation/Scale AUS */
  filter: none !important;                /* Schatten AUS */
  display:block; margin: 0 auto;
}

/* 4) Caption direkt unter die Karte, damit der Bereich kurz endet */
.man-card.man-split .man-map .map-caption{
  margin: 6px 0 0 !important;
  padding: 0 !important;
  text-align: center; font-size:14px; color:#1b2a3a;
}
/* === FINALE VERSION: Deutschlandkarte sichtbar auf Desktop + Mobil === */

/* Mittlere Box mit Mann + Karte */
.man-card.man-split {
  display: grid;
  grid-template-rows: 230px auto 190px; /* Platz für Karte unten */
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

/* Bild oben (Mann) bleibt komplett sichtbar */
.man-card.man-split .man-media .man-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bereich unten für Karte */
.man-card.man-split .man-map {
  background: transparent;
  padding: 0;
  margin-top: 6px;
  overflow: hidden;
  text-align: center;
}

/* Deutschlandkarte selbst */
.man-card.man-split .man-map .map-photo {
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: contain;
  transform: none;
  display: block;
  margin: 0 auto;
}

/* Text unter Karte */
.man-card.man-split .man-map .map-caption {
  font-size: 14px;
  color: #1b2a3a;
  margin-top: 4px;
}

/* === MOBIL: Karte bleibt sichtbar und zentriert === */
@media (max-width: 950px) {
  .man-row {
    flex-direction: column;
    align-items: center;
  }

  .man-card.man-split {
    grid-template-rows: 220px auto 200px; /* mehr Platz unten */
  }

  .man-card.man-split .man-map .map-photo {
    max-height: 220px; /* größere Karte mobil */
  }
}
/* === Mobile-Fix: Karten nicht kollabieren lassen, volle Breite === */
@media (max-width: 900px){
  .man-row{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* alle drei Boxen: volle Breite, keine feste max-width, nicht auf 0 zusammenfallen */
  .man-row > .teaser,
  .man-row > .man-card{
    flex: 1 1 auto !important;  /* statt 1 1 300px / 0 */
    width: 100% !important;
    max-width: 100% !important;
  }
}
.man-card.man-split .man-map {
  position: relative;
}

.map-ribbon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: #0a2a66; /* dunkles H.M.-Blau */
  color: #fff;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  text-align: center;
  white-space: nowrap;
  width: 115%;
  letter-spacing: .3px;
}

@media (max-width: 900px) {
  .map-ribbon {
    font-size: 14px;
    padding: 6px 14px;
    width: 120%;
    transform: translate(-50%, -50%) rotate(-6deg);
  }
}
/* leichte Tiefenwirkung für den Kartenbereich */
.man-card.man-split .man-map{ position:relative; perspective:800px; }

/* RIBBON: 3D/Gloss/Shadow */
.map-ribbon{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) rotate(-6deg) translateZ(1px);
  z-index:2;

  /* Farbe: an Button-Blau angelehnt */
  --ribbon:#0a2a66;         /* dunkles Blau */
  --ribbon-mid:#1b3e8a;     /* Mittelblau */
  --ribbon-light:#2b64ff;   /* Lichtkante */

  padding:10px 22px;
  border-radius:10px;
  color:#fff; font-weight:800; letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);

  /* leichter Glanz + Tiefen-Schatten */
  background:
    linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 45%),
    linear-gradient(to bottom, var(--ribbon-light), var(--ribbon-mid) 55%, var(--ribbon));
  box-shadow:
    0 10px 18px rgba(0,0,0,.25),      /* weicher Fall-Schatten */
    inset 0 2px 0 rgba(255,255,255,.25), /* obere Lichtkante */
    inset 0 -2px 0 rgba(0,0,0,.18);      /* untere Schattenkante */
  white-space:nowrap;
  width:118%;
}

/* Gefaltete Enden (kleine 3D-Laschen) */
.map-ribbon::before,
.map-ribbon::after{
  content:"";
  position:absolute; top:50%;
  width:18px; height:18px;
  background:rgba(0,0,0,.15);
  filter:blur(0.3px);
  transform: translateY(-50%) rotate(45deg);
  z-index:-1;
}
.map-ribbon::before{ left:-6px; }
.map-ribbon::after{  right:-6px; }

/* Mobil etwas kompakter */
@media (max-width:900px){
  .map-ribbon{ padding:8px 16px; width:124%; font-size:14px; }
  .map-ribbon::before, .map-ribbon::after{ width:14px; height:14px; }
}
.man-card.man-split .man-map .map-photo {
  width: 100%;
  height: auto;
  max-height: 210px; /* bisher vermutlich 180px */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.teaser {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.man-card.man-split,
.teaser {
  min-height: 620px; /* gleiche Höhe für alle drei Boxen */
}
/* Mittlere Karte: feste Reihenhöhen, damit das Foto- und Kartenfeld genau passen */
.man-card.man-split{
  grid-template-rows: 240px auto 200px;   /* Foto / Text / Karte (bei Bedarf 230/210 feinjustieren) */
}

/* Foto-Container: keine Rundung mehr */
.man-card.man-split .man-media{
  border-radius: 0;
  overflow: hidden;
}
/* Einheitliche Bildform mit leicht abgerundeten Ecken */
.man-card.man-split .man-media .man-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* Bild füllt sauber den Rahmen */
  display: block;
  border-radius: 16px;    /* gleiche Rundung wie die anderen Bilder */
}
/* === Vorteile: sanftes Hüpfen & Wackeln === */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.card.adv {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  padding: 16px;
  text-align: center;
}

#vorteile .card.adv { will-change: transform; }  /* für flüssige GPU-Bewegung */
/* Karussell – stabile Größe + Bereich begrenzen */
#vorteile .cards{
  position: relative;   /* für absolute Kinder */
  overflow: hidden;     /* nichts ragt raus */
}

#vorteile .card.adv{
  box-sizing: border-box;  /* keine Größen-Aufblähung durch Padding/Border */
  will-change: transform;  /* flüssigere GPU-Bewegung */
}
/* Karussell – stabile Größe + Bereich begrenzen */
#vorteile .cards{
  position: relative;   /* für absolute Kinder */
  overflow: hidden;     /* nichts ragt raus */
}

#vorteile .card.adv{
  box-sizing: border-box;  /* keine Größen-Aufblähung durch Padding/Border */
  will-change: transform;  /* flüssigere GPU-Bewegung */
}
/* Sichtfenster für den kleinen Kundenstimmen-Slider */
[data-slider]{
  position: relative;
  overflow: hidden;       /* verhindert Überlaufen an den Rändern */
  isolation: isolate;     /* verhindert „Durchmalen“ in Eltern */
}

/* Track mit den Slides */
[data-slider] .slides{
  display: flex;                  /* Slides nebeneinander */
  will-change: transform;         /* flüssiger */
  transition: transform .6s ease; /* weiches Gleiten */
  backface-visibility: hidden;
}

/* Jede Slide: genau 100% Breite des Sichtfensters */
[data-slider] .slide{
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: .6rem 1rem;            /* etwas Innenabstand, damit Sterne nicht „am Rand kleben“ */
  white-space: nowrap;            /* kein Zeilenumbruch in der Bewertung */
  overflow: hidden;               /* falls Text zu lang ist */
  text-overflow: ellipsis;        /* „…“ statt umbrechen */
}
/* Desktop: Kopf vom Mann komplett zeigen */
@media (min-width: 900px){
  .hero-bg img{
    object-position: center 30%;   /* nach oben ziehen – bei Bedarf 10–30% testen */
  }
}
/* Formular – stärker transparent */
.card {
  background: rgba(255, 255, 255, 0.72) !important;  /* 72% Weiß */
}
/* Chips oben – gleiche Transparenz wie Formular */
.chip {
  background: rgba(255, 255, 255, 0.70) !important;
}

.chip.active {
  background: rgba(11, 95, 255, 0.78) !important; /* Blau bleibt kräftiger */
}
/* Text im Topbar – standardmäßig ausblenden */
.topbar-text {
  display: none;
}

/* Nur auf Desktop anzeigen */
@media (min-width: 900px) {
  .topbar-row {
    gap: 24px; /* etwas Luft zwischen Brand, Text und Buttons */
  }

  .topbar-text {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.95;
    text-align: center;
    white-space: nowrap;
  }
}
/* Block für Status + Buttons rechts oben */
.actions {
  position: relative;              /* für saubere Ausrichtung */
  display: flex;
  align-items: center;
  gap: .5rem;
}

.actions-main {
  display: flex;
  flex-direction: column;          /* oben Status, darunter Buttons */
  align-items: center;          /* rechtsbündig */
  gap: 4px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Mini-Status über den Buttons */
.action-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #e7ffef;                  /* helles Grün/Weiß im blauen Balken */
  opacity: 0.95;
}

/* kleiner grüner Punkt */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: pulseDot 1.0s ease-out infinite;
}

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Mobile: alles etwas kompakter, aber gleicher Aufbau */
@media (max-width: 700px) {
  .actions-main {
    align-items: flex-end;   /* kannst du auch auf flex-start stellen, wenn dir das besser gefällt */
  }

  .action-status {
    font-size: 11px;
  }
}
/* Erzwingt Mittig für Desktop UND Mobile */
.actions-main{
  align-items: center !important;
  width: 100%;
}

/* Die Buttons sauber zentrieren */
.action-buttons{
  justify-content: center !important;
  width: 100%;
}
/* Scroll Reveal */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease-out, transform .6s ease-out;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Mikro-Puls für den Anruf-Button */
.pulse-once{
  animation:pulseOnce .6s ease-out;
}
@keyframes pulseOnce{
  0%   { transform:scale(1); }
  45%  { transform:scale(1.18); }
  100% { transform:scale(1); }
}
/* WhatsApp Puls */
.pulse-once-wa {
  animation: pulseOnceWA 0.9s ease-out;
}

@keyframes pulseOnceWA {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(37, 211, 102, 0);
  }
  40% {
    transform: scale(1.12);
    box-shadow: 0 0 14px rgba(37, 211, 102, 0.9);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(37, 211, 102, 0);
  }
}
/* Animierter Info-Text unter den Chips */
#infoText {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;              /* dunkles, professionelles Grau */
  line-height: 1.45;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease-out, transform .35s ease-out;
}

/* Sobald Text gesetzt ist, blenden wir ihn ein */
#infoText.show {
  opacity: 1;
  transform: translateY(0);
}
/* Edler Textblock unter den Chips — Glass + Linie, aber ohne Blinken */
#infoText {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.48;
  color: #1b2533;

  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  border-radius: 10px;

  padding: 14px 18px;
  margin-top: 12px;

  border-bottom: 3px solid #f5b400; /* gelbe Linie */

  /* KEINE Animation mehr: */
  opacity: 1;
  transform: none;
  transition: none;
}

#infoText.show {
  animation: popIn .28s ease-out;
}

@keyframes popIn {
  0%   { transform: scale(0.96) translateY(8px); opacity: 0; }
  80%  { transform: scale(1.02) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}
/* Standard: auf Desktop NICHT anzeigen */
.mobile-footer-contact {
  display: none;
}

/* Nur auf Mobile anzeigen */
@media (max-width: 768px) {

  .mobile-footer-contact {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 8px 6px;
    z-index: 999;
    pointer-events: none; /* Container durchlässig */
  }

  .mfc-inner {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 14px 14px 0 0;
    padding: 18px 10px 8px;       /* Höhe des Balkens */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.16);
    border-top: 3px solid #f5b400;
    pointer-events: auto;          /* Inhalt klickbar */
  }

  /* Kreis nach links, halb über dem Balken */
  .mfc-avatar {
    position: absolute;
    top: 10px;
    left: 14px;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #f1f5f9;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mfc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Inhalt rechts neben dem Kopf */
  .mfc-content {
    text-align: left;
    padding-left: 82px;   /* Platz für den Kreis links */
  }

  .mfc-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 1px;
  }

  /* Telefonnummer + WhatsApp kompakt */
  .mfc-line {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    margin: 0 8px 0 0;
    line-height: 1.3;
  }

  .mfc-phone {
    color: #0f172a;
  }

  .mfc-wa {
    color: #059669;
  }

  .mfc-hours {
    margin-top: 2px;
    font-size: 11px;
    color: #475569;
    line-height: 1.3;
  }
}

/* Platz nach unten, damit Inhalt nicht unter die Leiste rutscht */
@media (max-width: 768px) {
  body {
    padding-bottom: 110px;
  }
}
/* Liste unter „Wir kaufen auch“ */
.also-buy {
  margin-top: 8px;
  padding: 14px 16px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.also-buy ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.also-buy li {
  font-size: 14px;
  line-height: 1.4;
  color: #1f2933;
  margin-bottom: 4px;
  padding-left: 20px;
  position: relative;
}

.also-buy li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  color: #16a34a;
}
/* STEP-2 Optik: Radios und Full-Zeilen hübscher */

/* komplette Breite für die .full-Blöcke */
.form-grid label.full,
.form-grid .full {
  grid-column: 1 / -1;
}

/* Radio-Labels in einer Reihe, nicht riesig */
.form-grid label.full > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  font-weight: 400;
}

/* etwas kleinere, saubere Radios */
.form-grid label.full > label input[type="radio"] {
  width: 16px;
  height: 16px;
}
/* ============================
   RADIO-GRUPPEN – FINAL VERSION
   Für Holgers Step-2-Formular
   ============================ */

.radio-group {
    width: 100%;
    margin: 18px 0;
}

.radio-group.full {
    grid-column: 1 / -1;
}

.radio-group .group-title {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 16px;
}

.radio-group .radio-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 26px;
    font-size: 15px;
    cursor: pointer;
}

/* Schöne, kleine Radio-Buttons */
.radio-group .radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #0056ff; /* dein Blau */
}

/* MOBILE ANSICHT */
@media (max-width: 768px) {
    .radio-group .radio-option {
        display: flex;
        margin-bottom: 10px;
        margin-right: 0;
    }
}
/* =====================================
   STEP 2 – DETAIl-FORMULAR (details.html)
   Layout für Unfallwagen / Fahrbereit
   ===================================== */

/* Radio-Gruppen über die volle Breite im Grid */
.form-grid .radio-group.full {
  grid-column: 1 / -1;
  margin-top: 8px;
  margin-bottom: 12px;
}

/* Grundlayout für die Radio-Gruppe */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Titel "Unfallwagen?" / "Fahrbereit?" */
.radio-group .group-title {
  font-weight: 600;
  font-size: 16px;
  margin-right: 12px;
}

/* Einzelne Option (Ja / Nein / Weiß ich nicht) */
.radio-group .radio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  cursor: pointer;
}

/* Optik der Radiobuttons selbst */
.radio-group .radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #0056ff; /* dein Blau */
}

/* MOBILE: untereinander statt gequetscht nebeneinander */
@media (max-width: 768px) {
  .radio-group {
    align-items: flex-start;
  }

  .radio-group .radio-option {
    display: flex;
    margin-right: 0;
  }
}
/* ===== RADIO BUTTON DESIGN ===== */

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;           
    margin: 6px 0 18px 0;
    align-items: center;
}

.radio-opt {
    display: flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
}

.radio-opt input[type="radio"] {
    margin-right: 6px;
    width: 18px;
    height: 18px;
}

/* Dropdown so groß machen wie andere Eingabefelder */
select {
    width: 100%;
    height: 48px;
    padding: 10px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
}
select {
    width: 100%;
    height: 48px;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    background-color: #fff;
}
/* =========================================================
   FIX: TILES (3 Bilder) sollen groß / bis zum Rand der Box
   ========================================================= */

/* Falls irgendwo ein Grid/Flex reinfunkt: Tiles immer „block“ */
.tiles{
  display: block !important;
  width: 100%;
}

/* Falls .tiles in einem Grid hängt (z.B. 2-spaltiges Layout): über beide Spalten ziehen */
.tiles{
  grid-column: 1 / -1;
}

/* 3 Bilder nebeneinander – richtig „stretch“ */
.tiles .grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

/* Bilder größer + sauber geschnitten */
.tiles .tile{
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 14px;
}

/* Tablet */
@media (max-width: 1100px){
  .tiles .tile{ height: 200px; }
}

/* Handy: untereinander */
@media (max-width: 768px){
  .tiles .grid-3{ grid-template-columns: 1fr; }
  .tiles .tile{ height: 260px; }
}
/* =========================
   BRAND LOGO – FINAL
   ========================= */

/* Autoankauf24. */
.brand-text {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;

  /* cremiges Weiß */
  color: #f4f1ea;

  letter-spacing: 0.2px;
  line-height: 1;
  display: inline-block;

  /* deutliches 3D */
  text-shadow:
    0 1px 0 #d6d1c7,
    0 2px 0 #bdb8ae,
    0 3px 6px rgba(0,0,0,0.45);
}

/* Online */
.brand-text .online {
  font-family: inherit;
  font-size: 18px;
  font-weight: 900;

  /* dunkles edles Rot */
  color: #b11212;

  /* GANZ WICHTIG: Abstand zum Punkt */
  margin-left: -2px;

  letter-spacing: 0.1px;
  display: inline-block;

  /* stärkeres 3D */
  text-shadow:
    0 1px 0 #6d0b0b,
    0 2px 0 #520808,
    0 3px 6px rgba(0,0,0,0.55);
}

/* Mobile etwas kleiner */
@media (max-width: 480px) {
  .brand-text,
  .brand-text .online {
    font-size: 16px;
  }
}
/* === TOPBAR: Logo/Text scharf (kein Matsch) === */
.topbar .brand-text{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  text-shadow: none !important;
}

.topbar .brand-text .online{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  text-shadow: none !important;
  margin-left: -2px; /* Abstand bleibt */
}
/* ========== IMPRESSUM – FINAL FIX ========== */

.impressum_wrapper {
  font-size: 15px;
  line-height: 1.6;
}

.impressum_wrapper h1,
.impressum_wrapper h2 {
  margin: 18px 0 8px;
  font-size: 18px;
}

.impressum_wrapper p {
  margin: 0 0 10px;
}

/* Platzhalter-Box oben */
.legal-placeholder {
  background: rgba(0,86,255,.08);
  border: 1px dashed rgba(0,86,255,.35);
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 18px;
  font-weight: 600;
}

/* Zurück-Button seitlich */
.back-side {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  background: #0056ff;
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.back-side:hover {
  filter: brightness(1.05);
}

/* Mobil */
@media (max-width: 768px) {
  .back-side {
    top: auto;
    bottom: 16px;
    right: 12px;
    transform: none;
  }
}
/* ===============================
   BEWERTUNGEN – OPTISCHE AUFWERTUNG
   =============================== */

/* Überschrift */
#bewertungen h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Bewertungs-Zusammenfassung (⭐⭐⭐⭐☆ Überwiegend …) */
.rating-summary {
  font-size: 14px;
  color: #f0c14b;
  margin-bottom: 14px;
  font-weight: 500;
}

/* Slider-Container */
#bewertungen .slider {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  padding: 18px 22px;
}

/* Einzelner Slide */
.slides .slide {
  font-size: 14px;
  line-height: 1.45;
  color: #333;
  opacity: 0.95;
}

/* Sterne im Text */
.slides .slide span,
.slides .slide strong {
  color: #f0c14b;
}

/* Punkte unter dem Slider */
.dots {
  margin-top: 14px;
  text-align: center;
}

.dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background: #d0d0d0;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.dots span.active {
  background: #1e88e5;
  width: 18px;
  border-radius: 6px;
}

/* ===============================
   MOBILE FEINSCHLIFF
   =============================== */
@media (max-width: 768px) {

  #bewertungen h2 {
    font-size: 20px;
    text-align: center;
  }

  .rating-summary {
    text-align: center;
    font-size: 13px;
  }

  #bewertungen .slider {
    padding: 16px;
  }

  .slides .slide {
    font-size: 13.5px;
    text-align: center;
  }
}
/* =========================================================
   STEP 2 (details.html) – Radio-Optik + Select wie Input
   ========================================================= */

/* inputs / selects / textarea: gleiche Optik */
.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="tel"],
.form-grid input[type="number"],
.form-grid select,
.form-grid textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  line-height: 1.2;
  outline: none;
}

/* Fokus (schön, aber nicht übertrieben) */
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: rgba(0,86,255,0.55);
  box-shadow: 0 0 0 3px rgba(0,86,255,0.12);
}

/* Select soll NICHT kleiner wirken als Inputs */
.form-grid select {
  min-height: 44px;            /* gleiche “Höhe” wie Inputs */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;         /* Platz für Pfeil */
  cursor: pointer;

  /* Dropdown-Pfeil */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Vollbreite im Grid (falls bei dir noch nicht global gesetzt) */
.form-grid .full,
.form-grid label.full,
.form-grid .radio-group.full {
  grid-column: 1 / -1;
}

/* RADIO-GRUPPE: kompakt, nebeneinander, wie ein “Feld” */
.form-grid .radio-group {
  margin: 6px 0 10px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 12px;
  background: #fff;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;  /* kleiner = weniger “weit weg” */
}

/* Titel oben – nicht so riesig */
.form-grid .radio-group .group-title {
  flex: 0 0 100%;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,0.75);
}

/* Optionen nebeneinander */
.form-grid .radio-group .radio-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

/* Radio selber: klein und sauber */
.form-grid .radio-group .radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #0056ff;
}

/* Mobile: Optionen umbrechen/stacken, aber ordentlich */
@media (max-width: 768px) {
  .form-grid .radio-group {
    gap: 8px 12px;
  }
  .form-grid .radio-group .radio-option {
    flex: 0 0 auto;
  }
}

/* Optional: Textarea fühlt sich “gleich” an */
.form-grid textarea {
  resize: vertical;
  min-height: 110px;
}
/* ================================
   STÄDTE-SLI unter Bewertungen
   ================================ */

.city-sli {
  background: #f7f9fc;
  padding: 36px 0;
  margin-top: 40px;
}

.city-sli .h2 {
  margin-bottom: 18px;
}

.city-sli-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.city-sli-grid a {
  display: block;
  padding: 14px 10px;
  background: #ffffff;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  color: #0c2236;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  transition: all 0.18s ease;
}

.city-sli-grid a:hover {
  background: #0b5fff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(11,95,255,0.35);
}

.city-sli-hint {
  margin-top: 14px;
  font-size: 14px;
  color: #475569;
  text-align: center;
}
.city-intro {
  max-width: 820px;
  margin: 20px auto 30px;
  font-size: 16px;
  line-height: 1.6;
  color: #110f0feb;
  background: rgba(255, 255, 255, 0.04);
  padding: 18px 22px;
  border-radius: 10px;
}
.city-info {
  margin-top: 40px;
  padding: 24px 28px;
  background: #f6f7f9;
  border-radius: 12px;
  max-width: 900px;
}

.city-info h3 {
  margin-bottom: 14px;
  font-size: 1.25rem;
  color: #1c1c1c;
}

.city-info p {
  margin-bottom: 12px;
  line-height: 1.6;
  color: #444;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .city-info {
    padding: 20px;
  }
}
/* ===== Gelber 3D-Unterstrich unter Formularfeldern ===== */
.form-grid .field-input {
  position: relative;
  margin-bottom: 18px;
}

.form-grid .field-input::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -6px;

  height: 4px;                 /* dünner als vorher */
  background: #f1b600;         /* dein Gelb */
  border-radius: 0 0 8px 8px;  /* folgt der Rundung */

  opacity: 0.85;
}
/* Feiner gelber Akzent unter den Formularfeldern */
.form-grid .field-input {
  position: relative;
}

.form-grid .field-input::after {
  content: "";
  position: absolute;
  left: 12px;          /* folgt der Rundung */
  right: 12px;         /* folgt der Rundung */
  bottom: -6px;        /* HIER: näher an den Kasten */
  height: 3px;         /* dünner = eleganter */
  background: linear-gradient(
    to right,
    rgba(255,193,7,0.0),
    rgba(255,193,7,0.85),
    rgba(255,193,7,0.0)
  );
  border-radius: 999px;
  pointer-events: none;
}
.nav-city {
    font-weight: 600;
    color: #ffffff;
    position: relative;
}

.nav-city::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #f5b400, #ffd45a);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nav-city:hover::after {
    opacity: 1;
}
/* NUR Link "Unsere Städte" */
.city-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 12px;
  padding: 10px 16px;

  border-radius: 999px;
  background: #0b2a3a;          /* dunkles Blau wie Header */
  color: #fff !important;
  text-decoration: none !important;

  font-weight: 700;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
}

.city-link:hover{
  opacity: .92;
  transform: translateY(-1px);
}

.city-link:active{
  transform: translateY(0);
}
/* =========================
   FAQ (Accordion)
   ========================= */
.faq .faq-list{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.experience-note{
  margin: 8px 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(11,95,255,.08);
  border: 1px dashed rgba(11,95,255,.35);
  font-weight: 600;
}

.faq-item{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  overflow: hidden;
}

.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 800;
  color: #0c2236;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary::after{
  content: "+";
  font-weight: 900;
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(11,95,255,.10);
  color: #0b5fff;
  flex: 0 0 auto;
}

.faq-item[open] summary::after{
  content: "–";
  background: rgba(37,211,102,.12);
  color: #059669;
}

.faq-content{
  padding: 0 16px 14px;
  color: #3f4852;
  line-height: 1.6;
  font-size: 15px;
}

.faq-content p{ margin: 8px 0 0; }
/* =========================
   Bewertungen – modern & glaubwürdig
   ========================= */

#bewertungen .rating-summary{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 8px 0 14px;
  font-weight:800;
  font-size:14px;
  color:#0c2236;
}

#bewertungen .rating-summary .stars{
  color:#d4a106;
  letter-spacing:1px;
}

#bewertungen .slide{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

#bewertungen .slide .quote{
  display:block;
  color:#2b3440;
  line-height:1.65;
  font-size:15px;
}

#bewertungen .slide .who{
  display:block;
  color:#667085;
  font-weight:800;
  font-size:14px;
}

#bewertungen .slide .stars{
  display:block;
  color:#d4a106;
  letter-spacing:1px;
  font-size:14px;
}

#bewertungen .dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}

#bewertungen .dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
}

#bewertungen .dot.active{
  width:18px;
  background:rgba(11,95,255,.85);
}

@media (max-width: 768px){
  #bewertungen .slide{
    padding:16px 16px;
    border-radius:14px;
  }
}
/* --- FIX Mobile: Bewertungen Text bricht sauber um --- */
#bewertungen .slide{
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

#bewertungen .slide .quote{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
/* --- FIX Mobile: kein horizontales Scrollen --- */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

.slider, .slides, .slide{
  max-width: 100%;
}

img, video, iframe{
  max-width: 100%;
  height: auto;
}
/* ===== FIX: Topbar immer oben fest (Desktop + Mobile) ===== */
.topbar{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999 !important;
}

/* Damit der Content nicht unter die Topbar rutscht */
body{
  padding-top: 64px; /* ggf. 58–72px feinjustieren */
}