/* =========================================================
   1. GRUNDLAGEN & FARBSYSTEM
   ========================================================= */
:root{
  --color-primary: #0d3b66;
  --color-primary-dark: #082745;
  --color-primary-light: #17588f;
  --color-accent: #f7a821;
  --color-accent-dark: #de8f0a;
  --color-yellow: #ffcf40;
  --color-bg: #ffffff;
  --color-bg-alt: #f3f8fc;
  --color-text: #1b2733;
  --color-text-muted: #5a6b7a;
  --radius: 14px;
  --shadow-sm: 0 4px 14px rgba(13,59,102,.10);
  --shadow-md: 0 12px 32px rgba(13,59,102,.16);
  --header-h: 72px;
  --max-width: 1180px;
  --transition: .25s ease;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3{ line-height:1.2; margin: 0 0 .6em; color: var(--color-primary-dark); }
p{ margin: 0 0 1em; }
.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }
.section{ padding: clamp(2rem, 4vw, 3.4rem) 0; }
.section-alt{ background: var(--color-bg-alt); }
.eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.08em;
  font-size:.78rem; font-weight:700; color: var(--color-accent-dark);
  background: rgba(247,168,33,.12); padding:.35em .9em; border-radius: 999px;
  margin-bottom: .9em;
}
.section-head{ max-width: 640px; margin: 0 0 1.6rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding: .85em 1.6em; border-radius: 999px; font-weight:700; font-size: .98rem;
  text-decoration:none; border: 2px solid transparent; cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-accent{ background: var(--color-accent); color: #201400; box-shadow: var(--shadow-sm); }
.btn-accent:hover{ background: var(--color-accent-dark); box-shadow: var(--shadow-md); }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,.6); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,.12); }
.btn-primary{ background: var(--color-primary); color:#fff; }
.btn-primary:hover{ background: var(--color-primary-dark); }

/* =========================================================
   2. HEADER / NAVIGATION
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 1000;
  min-height: var(--header-h);
  display:flex; align-items:center;
  background: rgba(13,59,102,.96);
  backdrop-filter: blur(6px);
  transition: box-shadow var(--transition), background var(--transition);
}
.site-header.is-scrolled{ box-shadow: 0 6px 20px rgba(0,0,0,.18); background: var(--color-primary); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; padding: .7rem 1.25rem; }
.logo{ display:flex; align-items:center; gap:.65em; color:#fff; text-decoration:none; line-height:1.1; }
.logo-badge{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background: linear-gradient(145deg, var(--color-accent), var(--color-accent-dark));
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), var(--shadow-sm);
}
.logo-badge svg{ width:22px; height:22px; stroke:#201400; }
.logo-word{ display:flex; flex-direction:column; }
.logo-word strong{ font-size:1.05rem; font-weight:800; letter-spacing:.01em; }
.logo-word small{ font-size:.62rem; font-weight:700; letter-spacing:.14em; color: var(--color-accent); text-transform:uppercase; }
.main-nav ul{ list-style:none; display:flex; gap: 1.8rem; margin:0; padding:0; }
.main-nav a{
  color:#dce8f4; text-decoration:none; font-size:.95rem; font-weight:600;
  padding:.4em 0; border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition);
}
.main-nav a:hover, .main-nav a.is-active{ color:#fff; border-color: var(--color-accent); }
.header-cta{ display:flex; align-items:center; gap:.9rem; }
.call-btn{
  display:flex; align-items:center; gap:.5em;
  background: var(--color-accent); color:#201400; text-decoration:none;
  font-weight:700; padding:.6em 1.1em; border-radius:999px; font-size:.92rem;
  box-shadow: var(--shadow-sm); transition: background var(--transition), transform var(--transition);
}
.call-btn:hover{ background: var(--color-accent-dark); transform: translateY(-2px); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem; }
.nav-toggle span{ width:26px; height:3px; background:#fff; border-radius:2px; }

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset: var(--header-h) 0 0 0; background: var(--color-primary-dark);
    transform: translateX(100%); transition: transform var(--transition);
    padding: 2rem 1.5rem; overflow-y:auto;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap: 1.4rem; }
  .main-nav a{ font-size:1.15rem; display:block; }
  .nav-toggle{ display:flex; }
  .header-cta .call-btn span.call-text{ display:none; }
}

/* =========================================================
   3. HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-primary-light) 100%);
  color:#fff; padding: clamp(2rem, 6vw, 3.6rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.hero-bg{
  position:absolute; inset:-10% -5% -5% -5%; z-index:-1;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 2px, transparent 2px 90px),
    radial-gradient(circle at 80% 20%, rgba(247,168,33,.18), transparent 55%);
}
.hero-inner{ display:grid; gap: 2.5rem; align-items:center; }
@media (min-width: 900px){ .hero-inner{ grid-template-columns: 1.1fr .9fr; } }
.hero-rating{
  display:inline-flex; align-items:center; gap:.6em; background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); padding:.5em 1em; border-radius:999px; font-size:.88rem;
  margin-bottom:1.2rem;
}
.hero-rating .stars{ color: var(--color-yellow); letter-spacing:1px; }
.hero h1{ color:#fff; font-size: clamp(2.1rem, 5vw, 3.1rem); max-width: 16ch; }
.hero p.lead{ color:#dce8f4; font-size:1.1rem; max-width: 46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.3rem; }
.hero-note{ margin-top:1rem; font-size:.9rem; color: var(--color-yellow); font-weight:600; }
.hero-scene{ position:relative; height: 170px; display:flex; align-items:flex-end; justify-content:center; }
.road{ position:absolute; left:0; right:0; bottom: 34px; height:6px; background: rgba(255,255,255,.25); border-radius:3px; }
.road::after{
  content:""; position:absolute; inset:0; margin:auto 0; height:2px;
  background: repeating-linear-gradient(90deg, var(--color-yellow) 0 22px, transparent 22px 40px);
}
.hero-car{ position:relative; width: min(200px, 55vw); animation: driveIn 1.4s cubic-bezier(.2,1,.3,1) .2s both; }
.hero-car svg{ width:100%; height:auto; display:block; overflow:visible; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.wheel{ transform-box: fill-box; transform-origin: 50% 50%; animation: spin .7s linear infinite; }
@keyframes driveIn{ 0%{ transform: translateX(-260px); opacity:0; } 100%{ transform: translateX(0); opacity:1; } }
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .hero-car, .wheel{ animation: none !important; } }

/* Kleinerer Hero-Kopfbereich für Unterseiten */
.page-hero{
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color:#fff; padding: clamp(2.2rem, 5vw, 3rem) 0;
}
.page-hero h1{ color:#fff; margin-bottom:.3em; }
.page-hero p{ color:#dce8f4; margin:0; max-width: 60ch; }

/* =========================================================
   4. REVEAL-ON-SCROLL
   ========================================================= */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   5. BILD + TEXT LAYOUT
   ========================================================= */
.split{ display:grid; gap: 2.5rem; align-items:center; }
@media (min-width: 900px){
  .split{ grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .split.reverse > .split-media{ order:2; }
}
.split-media{ position:relative; }
.split-media img{
  width:100%; aspect-ratio: 2740 / 1536; object-fit:cover;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  background: var(--color-bg-alt);
}
.split-media .tag{
  position:absolute; bottom:-16px; left:-16px; background: var(--color-accent); color:#201400;
  font-weight:800; padding:.6em 1.1em; border-radius: 10px; box-shadow: var(--shadow-sm); font-size:.9rem;
}
.split-body h2{ font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.checklist{ list-style:none; margin: 1.4rem 0 0; padding:0; display:grid; gap:.7rem; }
.checklist li{ display:flex; gap:.7em; align-items:flex-start; color: var(--color-text); }
.checklist li::before{
  content:"✓"; flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background: var(--color-primary); color:#fff; font-size:.75rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:.15em;
}

/* Bild + Content ohne feste Bildquote (für einfachere Unterseiten) */
.rounded-image{ border-radius: var(--radius); box-shadow: var(--shadow-md); margin-bottom: 1.6rem; }
.rounded-image.full-width{ width:100%; object-fit:cover; max-height: 360px; }

/* Klassen-Karten */
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:1rem; margin-top:1.3rem; }
.class-card{
  background:#fff; border:1px solid rgba(13,59,102,.1); border-radius: var(--radius);
  padding:1.4rem 1.1rem; text-align:center; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.class-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.class-card .icon{ font-size:1.8rem; margin-bottom:.5rem; }
.class-card h3{ font-size:1rem; margin:0 0 .3em; color: var(--color-primary); }
.class-card p{ font-size:.85rem; color: var(--color-text-muted); margin:0; }

/* Erfolge Stats */
.stat-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1.3rem; }
.stat{ text-align:center; background:#fff; border-radius: var(--radius); padding:1.2rem .5rem; box-shadow: var(--shadow-sm); }
.stat strong{ display:block; font-size:1.7rem; color: var(--color-primary); }
.stat span{ font-size:.8rem; color: var(--color-text-muted); }

/* =========================================================
   6. GOOGLE-BEWERTUNG (aggregiert, keine erfundenen Einzelzitate)
   ========================================================= */
.rating-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  background:#fff; border:1px solid rgba(13,59,102,.1); border-radius: var(--radius);
  padding:1.8rem 2rem; box-shadow: var(--shadow-sm);
}
.rating-banner .score{ display:flex; align-items:center; gap:1rem; }
.rating-banner .score strong{ font-size:2.4rem; color: var(--color-primary); }
.rating-banner .score .stars{ color: var(--color-yellow); font-size:1.2rem; letter-spacing:2px; display:block; }
.rating-banner .score .count{ font-size:.85rem; color: var(--color-text-muted); }

/* =========================================================
   7. KONTAKT
   ========================================================= */
.contact-grid{ display:grid; gap:2.5rem; }
@media (min-width: 900px){ .contact-grid{ grid-template-columns: 1fr 1fr; } }
.info-card{ background: var(--color-primary); color:#fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-md); }
.info-card h2, .info-card h3{ color:#fff; }
.info-list{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:1rem; }
.info-list li{ display:flex; gap:.9em; align-items:flex-start; }
.info-list .ic{ width:34px; height:34px; border-radius:9px; background: rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-list a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.note-box{
  margin-top:1.4rem; background: rgba(247,168,33,.16); border:1px solid rgba(247,168,33,.4);
  color: var(--color-yellow); padding:.9em 1.1em; border-radius:10px; font-size:.88rem; font-weight:600;
}
.hours-table{ width:100%; border-collapse: collapse; margin-top:1rem; }
.hours-table td{ padding:.55em .2em; border-bottom:1px solid rgba(13,59,102,.08); font-size:.94rem; }
.hours-table td:last-child{ text-align:right; font-weight:700; color: var(--color-primary); }
.hours-table tr.closed td:last-child{ color: var(--color-text-muted); font-weight:500; }
.hours-table tr.open-today td:first-child{ color: var(--color-accent-dark); font-weight:700; }

/* Kontaktformular */
.kontakt-form{ display:grid; gap:1rem; margin-top: 1rem; }
.kontakt-form label{ font-weight:600; font-size:.9rem; margin-bottom:-.5rem; }
.kontakt-form input, .kontakt-form textarea{
  width:100%; padding:.8em 1em; border-radius:10px; border:1px solid rgba(13,59,102,.18);
  font: inherit; color: var(--color-text); background: var(--color-bg-alt);
}
.kontakt-form input:focus, .kontakt-form textarea:focus{ outline: 2px solid var(--color-primary-light); outline-offset: 1px; }
.kontakt-form .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Preistabelle */
.preistabelle{ width:100%; border-collapse: collapse; margin: 1.5rem 0; background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.preistabelle th, .preistabelle td{ padding: .9em 1.2em; text-align:left; border-bottom: 1px solid rgba(13,59,102,.08); }
.preistabelle th{ background: var(--color-primary); color:#fff; font-weight:700; }
.preistabelle tr:last-child td{ border-bottom:none; }

/* =========================================================
   8. FOOTER + MAP
   ========================================================= */
.site-footer{ background: var(--color-primary-dark); color:#cfe0ee; }
.footer-top{ display:grid; gap:1.6rem; padding: 2.2rem 1.25rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); max-width: var(--max-width); margin: 0 auto; }
.footer-top h4{ color:#fff; margin:0 0 .8em; font-size:1rem; }
.footer-top a{ color:#cfe0ee; text-decoration:none; }
.footer-top a:hover{ text-decoration:underline; }
.footer-top ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; font-size:.92rem; }

.map-wrap{ position:relative; width:100%; aspect-ratio: 16/4.5; min-height:190px; border-top: 4px solid var(--color-accent); overflow:hidden; }
.map-wrap iframe{ width:100%; height:100%; border:0; filter: grayscale(25%) sepia(55%) hue-rotate(175deg) saturate(320%) brightness(.95) contrast(.92); }
.map-tint{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(160deg, rgba(13,59,102,.35), rgba(247,168,33,.12)); mix-blend-mode: multiply; }
.map-label{
  position:absolute; top:1rem; left:1rem; background:#fff; color: var(--color-primary-dark);
  padding:.6em 1em; border-radius:10px; font-weight:700; font-size:.85rem; box-shadow: var(--shadow-sm);
  display:flex; align-items:center; gap:.5em;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:1.2rem 1.25rem; font-size:.8rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; justify-content:space-between;
  max-width: var(--max-width); margin: 0 auto;
}
.footer-bottom a{ color:#cfe0ee; }

.fab-call{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:999;
  width:56px; height:56px; border-radius:50%; background: var(--color-accent);
  color:#201400; display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  text-decoration:none; box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
@media (min-width: 900px){ .fab-call{ display:none; } }