/* =========================================================
   Fahrschule Aschmann – Zentrale CSS-Datei
   Stand: bereinigt + sortiert + Media Queries gebündelt
   Ziel: Aufräumen/Entdoppeln ohne Layoutänderung
   ========================================================= */

/* =========================================================
   0) DESIGN TOKENS / VARIABLEN
   ========================================================= */

:root{
  --fs-body: 16px; /* body */
  --lh-body: 1.5;  /* body */

  /* ===================================================================================
     Start Seite Hero Bereich (blau) + Sections
     =================================================================================== */
  --fs-hero-title: clamp(1.02rem, 2.7vw, 2rem);                     /* Hero Titel */
  --fs-hero-text:  clamp(1rem, 2.7vw, 1.2rem);                      /* Hero Text */
  --fs-section-usp-icon: clamp(0.9rem, 2vw, 1.6rem);                /* Icon-Größe */

  --fs-section-title: clamp(1rem, 2vw, 1.5rem);                     /* section Titel */
  --fs-section-usp-title: clamp(0.9rem, 2vw, 1.3rem);               /* Kärtchen Überschrift */
  --fs-section-usp-text:  clamp(0.9rem, 2vw, 1.1rem);               /* Kärtchen Text */

  /* ====================================================================================
     Buttons global
     ==================================================================================== */
  --pad-btn-y: clamp(0.2rem, 1.1vw, 0.5rem);                        /* globale buttons */
  --pad-btn-x: clamp(1.1rem, 2.2vw, 1.2rem);                        /* globale buttons */
  --pad-btn-text: clamp(0.92rem, 1.4vw + 0.55rem, 1.08rem);         /* globale buttons */

  --aschmann-blau: #003366;
  --aschmann-blau-hell: #2a6fbf;
  --aschmann-orange: #ff8c00;
  --aschmann-orange-dunkel: #f07b00;

  --aschmann-grau-hell: #f3f4f8;
  --aschmann-grau-mittel: #d0d4dd;

  /* Text / Background */
  --aschmann-text: #222222;
  --aschmann-bg: #cccccc;

  /* Container */
  --container-max: 1120px;
  --container-max-xl: 1320px;

  /* Spacing */
  --step: 0.25rem;

  /* Radius */
  --radius-sm: 0.55rem;
  --radius-md: 0.8rem;
  --radius-lg: 0.9rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 4px 10px rgba(0,0,0,0.10);
  --shadow-card: 0 6px 16px rgba(0,0,0,0.12);
  --shadow-hero: 0 12px 30px rgba(0,0,0,0.35);
  --shadow-heavy: 0 30px 80px rgba(0,0,0,0.45);

  /* Nav font sizes */
  --aschmann-nav-menu: 1rem;
  --aschmann-nav-menu-mobile: 0.9rem;

  /* Header diagonal badge */
  --header-badge-top: 60px;
  --header-badge-right: -80px;
  --header-badge-pad-y: 10px;
  --header-badge-pad-x: 110px;

  /* Instagram badge (steuerbar via Media Queries) */
  --ig-badge-w: 190px;
  --ig-badge-h: 70px;
  --ig-badge-radius: 12px;
  --ig-ico-size: 60px;

  /* IG badge position (desktop default) */
  --ig-badge-top: 60px;
  --ig-badge-left: 20px;
  --ig-badge-right: auto; /* optional */

  /* Instagram Textgröße */
  --ig-text-top-size: 1.3rem;
  --ig-text-sub-size: 1.2rem;

  /* Gradients */
  --grad-hero: linear-gradient(135deg, #0058a8, #003f7f);
  --grad-home-section: linear-gradient(to bottom, #ff9900, #ffb84d);
  --grad-info-section: linear-gradient(to bottom, #cfe1ff, #a9c8ff);
  --grad-contact: linear-gradient(135deg, #0088a8, #003f7f);
  --grad-theorie: linear-gradient(to bottom, #ff9900, #ffb84d);
  --grad-pruefung: linear-gradient(to bottom, #cfe1ff , #a9c8ff);

  /* Form inputs */
  --input-bg: #ffffff;
  --input-text: #222222;
  --input-border: #ccd2e0;
  --input-border-focus: var(--aschmann-blau-hell);
  --input-radius: var(--radius-sm);
  --input-padding-y: 0.55rem;
  --input-padding-x: 0.65rem;
  --input-focus-ring: 0 0 0 2px rgba(42, 111, 191, 0.2);

  --input-ok-border: #2e7d32;
  --input-ok-bg: #edf7ed;

  --input-error-border: #ff3b3b;
  --input-error-bg: #ffe6e6;

  /* Custom checkbox / radio (scoped) */
  --control-size: 22px;
  --control-scale: 1.1;
  --control-border: 2px solid #003366;
  --control-bg: #ffffff;
  --control-accent: #003366;
  --control-hover: #0066cc;
  --control-hover-ring: 0 0 6px rgba(0, 102, 204, 0.4);
  --control-focus-ring: 0 0 8px rgba(0, 102, 204, 0.6);
  --control-error-ring: 0 0 0 2px rgba(255, 59, 59, 0.45);

  /* Legal layout */
  --legal-badge-space: 10rem;
  --legal-card-gap: 1.15rem;

  --theorie-filter-font: clamp(0.95rem, 0.6vw + 0.85rem, 1.05rem);

  /* Pills separat */
  --theorie-pill-font: clamp(0.95rem, 0.55vw + 0.85rem, 1.05rem);
  --theorie-pill-pad-y: clamp(0.48rem, 0.35vw + 0.42rem, 0.62rem);
  --theorie-pill-pad-x: clamp(0.75rem, 0.45vw + 0.65rem, 1.00rem);

  /* NAV Tiles (Desktop Default) */
  --nav-icon-box: 2.7rem;           /* Slot-Höhe für Icons (für Text-Ausrichtung) */
  --nav-icon-size: 1.65rem;         /* Desktop Icon-Größe */
  --nav-icon-size-contact: 2.5rem;  /* Desktop Kontakt-Icon */

  --nav-tile-min-w: 90px;
  --nav-tile-min-h: 85px;
  --nav-tile-pad-y: 0.40rem;
  --nav-tile-pad-x: 0.2rem;

  /* NAV Mobile List (Default) */
  --nav-mobile-min-h: 50px;
  --nav-mobile-pad-y: 0.14rem;
  --nav-mobile-pad-x: 0.50rem;
  --nav-mobile-gap: 0.32rem;
  --nav-mobile-icon: 1.30rem;
  --nav-mobile-font: 0.90rem;

  /* =========================
     Extra Tokens (pixel-genau wie bisher)
     ========================= */
  --radius-section: 12px;   /* bisher oft 12px */
  --radius-logo: 18px;      /* header-logo-link */

  --shadow-section: 0 5px 15px rgba(0,0,0,0.05);
  --shadow-section-strong: 0 5px 15px rgba(0,0,0,0.08);

  --shadow-chip: 0 3px 12px rgba(0,0,0,0.12);
  --shadow-card-compact: 0 3px 12px rgba(0,0,0,0.18);
  --shadow-card-compact-hover: 0 8px 22px rgba(0,0,0,0.25);

  --shadow-card-lg: 0 6px 18px rgba(0,0,0,0.12);
  --shadow-card-lg-hover: 0 10px 26px rgba(0,0,0,0.18);

  --shadow-branch-card: 0 8px 26px rgba(0,0,0,0.18);
  --shadow-placeholder: 0 4px 16px rgba(0,0,0,0.14);
  --shadow-media: 0 10px 22px rgba(0,0,0,0.18);

  --grad-soft-blue: linear-gradient(135deg, #e9f0ff, #cfe1ff);
  --grad-card-white-blue: linear-gradient(135deg, #ffffff, #f3f7ff);

  --grad-info-bf: linear-gradient(135deg, #ffc999, #ff9f55);
  --grad-info-ablauf: linear-gradient(135deg, #bcd4ff, #5c96ff);
  --grad-info-fahrschulwahl: linear-gradient(135deg, #ffe1a3, #ffba47);
  --grad-info-warn: linear-gradient(135deg, #ffb899, #ff7f55);
  --grad-info-warumwir: linear-gradient(135deg, #ADFF2F, #98FB98);
}

/* =========================================================
   1) RESET
   ========================================================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
  display: block;
}

ol, ul{ list-style: none; }

blockquote, q{ quotes: none; }
blockquote::before,
blockquote::after,
q::before,
q::after{ content:""; }

table{
  border-collapse: collapse;
  border-spacing: 0;
}

/* Box model */
*,
*::before,
*::after{ box-sizing: border-box; }

/* =========================================================
   2) BASIS / TYPO / LAYOUT
   ========================================================= */

html{ scroll-behavior: smooth; }

body{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-family: Arial, sans-serif;
  color: var(--aschmann-text);
  background-color: var(--aschmann-bg);
}

/* zentrale Inhaltsbreite */
.page-wrapper{
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

/* Links */
a{
  color: var(--aschmann-blau);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

/* Fallback headings (falls irgendwo noch unstyled) */
h1{ font-size: 1.6em;  margin: 0.6em 0; }
h2{ font-size: 1.35em; margin: 0.8em 0 0.4em; }
h3{ font-size: 1.1em;  margin: 0.6em 0 0.3em; }

/* =========================================================
   3) HEADER / LOGO / BADGES
   ========================================================= */

.site-header{
  background: var(--aschmann-bg);
  margin-bottom: 0.75rem;
  border-bottom: none;
  box-shadow: none;
}

.header-inner{
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0.4rem 1.25rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.header-logo{ width: 100%; position: relative; }

.header-logo-link{
  position: relative;
  display: block;
  border-radius: var(--radius-logo);
  overflow: hidden;
}

.header-logo img{
  display: block;
  width: 100%;
  height: auto;
}

/* Diagonal badge */
.header-badge{
  position: absolute;
  top: var(--header-badge-top);
  right: var(--header-badge-right);
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 56px;
  padding: var(--header-badge-pad-y) var(--header-badge-pad-x);
  gap: 2px;

  background: #ffd500;
  color: #1b1b1b;

  transform: rotate(35deg);
  transform-origin: center;

  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
  border: 1px solid rgba(0,0,0,0.12);

  text-align: center;
  line-height: 1.05;
  white-space: nowrap;
}

.header-badge .badge-line-1{
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.header-badge .badge-line-2{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

/* Instagram badge (Desktop) */
.header-badge--ig{
  --ig-rot: -8deg;

  position: absolute;
  top: var(--ig-badge-top);
  left: var(--ig-badge-left);
  right: var(--ig-badge-right);
  z-index: 8;

  width: var(--ig-badge-w);
  height: var(--ig-badge-h);
  border-radius: var(--ig-badge-radius);

  background: linear-gradient(135deg, var(--aschmann-blau), var(--aschmann-orange));
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 12px 28px rgba(0,0,0,0.26);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: rotate(var(--ig-rot));
  transform-origin: left center;

  text-decoration: none;
  color: #fff;

  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

/* Shine */
.header-badge--ig::before{
  content: "";
  position: absolute;
  top: -40%;
  left: -80%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.00),
    rgba(255,255,255,0.45),
    rgba(255,255,255,0.00)
  );
  transform: rotate(18deg);
  opacity: 0.85;
  pointer-events: none;
  transition: left 0.55s ease;
}

/* Glow border */
.header-badge--ig::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--ig-badge-radius) + 2px);
  border: 2px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.header-badge--ig .ig-badge-inner{
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  padding: 0 0.28rem;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
.header-badge--ig .ig-badge-ico{
  width: var(--ig-ico-size);
  height: var(--ig-ico-size);
  fill: currentColor;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.16));
}
.header-badge--ig .ig-badge-text{
  display: flex;
  flex-direction: column;
  line-height: 1.0;
}
.header-badge--ig .ig-badge-top{
  font-size: var(--ig-text-top-size);
}
.header-badge--ig .ig-badge-sub{
  font-size: var(--ig-text-sub-size);
  opacity: 0.92;
}

.header-badge--ig:hover{
  transform: rotate(var(--ig-rot)) translateY(-2px) scale(1.02);
  box-shadow: 0 16px 38px rgba(0,0,0,0.32);
  filter: brightness(1.05);
}
.header-badge--ig:hover::before{ left: 120%; }
.header-badge--ig:focus-visible{
  outline: 3px solid rgba(255, 140, 0, 0.55);
  outline-offset: 4px;
}

/* =========================================================
   4) NAVIGATION (KACHELN) + HAMBURGER (MOBILE)
   ========================================================= */

.header-nav{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 0 1rem;
}

/* Tile buttons */
.nav-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: var(--nav-tile-min-w);
  min-height: var(--nav-tile-min-h);
  padding: var(--nav-tile-pad-y) var(--nav-tile-pad-x);

  border-radius: 20px;
  background: #f9fcff;
  border: 1px solid rgba(0,0,0,0.03);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);

  color: var(--aschmann-blau);
  font-weight: 600;
  font-size: var(--aschmann-nav-menu);
  text-decoration: none;

  gap: 0.30rem;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.nav-label{ display: block; }

.nav-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,0,0,0.14);
  background: #ffffff;
}

.nav-item.nav-active{
  background: radial-gradient(circle at 25% 0, #4ca7ff 0, #003f7f 55%, #002852 100%);
  color: #ffeeb2;
  border-color: #ffdb66;
  box-shadow:
    0 0 0 3px rgba(255,219,102,0.9),
    0 18px 38px rgba(0,0,0,0.45);
}
.nav-item.nav-active .nav-icon{
  color: #ffffff;
  text-shadow: 0 0 6px rgba(0,0,0,0.4);
}
.nav-item.nav-active:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(255,230,140,1),
    0 22px 44px rgba(0,0,0,0.55);
}

.nav-icon,
.nav-icon-contact{
  margin-bottom: 0;
  line-height: 1;
  height: var(--nav-icon-box);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon{ font-size: var(--nav-icon-size); }
.nav-icon-contact{ font-size: var(--nav-icon-size-contact); }

/* Falls irgendwo a::after Unterstrich-Linie war */
.header-nav a::after{
  content: "";
  display: none;
}

/* Hamburger */
.nav-toggle-checkbox{ display: none; }

.nav-toggle{
  display: none; /* per MQ */
  width: 40px;
  height: 32px;
  margin-left: auto;
  cursor: pointer;

  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span{
  width: 26px;
  height: 3px;
  background-color: #333;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-checkbox:checked + .nav-toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle-checkbox:checked + .nav-toggle span:nth-child(2){ opacity: 0; }
.nav-toggle-checkbox:checked + .nav-toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   5) HERO (STARTSEITE)
   ========================================================= */

.hero{
  background: var(--grad-hero);
  color: #ffffff;
  padding: clamp(1.2rem, 3.5vw, 1.8rem)
           clamp(1rem, 3vw, 1.75rem)
           clamp(1.6rem, 4vw, 2.4rem);
  margin: 0 auto 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
}

.hero-inner{
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.hero-text{ flex: 1 1 55%; }

.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.85rem;
  margin-bottom: 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.45);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-title{
  font-size: var(--fs-hero-title);
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}

.hero-text p{
  font-size: var(--fs-hero-text);
  line-height: 1.55;
  margin-bottom: 1.2rem;
  max-width: 36rem;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* Gemeinsame Button-Basis (hero + kontakt) */
.hero-primary,
.hero-secondary,
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--radius-pill);
  border: none;

  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

/* Hero Buttons (nur Werte, die hier abweichen/gehören) */
.hero-primary,
.hero-secondary{
  padding: var(--pad-btn-y) var(--pad-btn-x);
  font-size: var(--pad-btn-text);
}

.hero-primary,
.btn-primary{
  background-color: #ffd500;
  color: #1b1b1b;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.hero-primary:hover,
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  background-color: #ffe03a;
}

.hero-secondary,
.btn-secondary{
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.75);
}
.hero-secondary:hover,
.btn-secondary:hover{
  background-color: rgba(0,0,0,0.18);
}

.hero-image{
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
}
.hero-image img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 1.4rem;
  box-shadow: 0 14px 32px rgba(0,0,0,0.55);
}

.hero-video{
  width: 100%;
  height: 100%;
  max-height: 340px;
  border-radius: 1.4rem;
  box-shadow: 0 14px 32px rgba(0,0,0,0.55);
  object-fit: cover;
  display: block;
}

/* =========================================================
   6) STARTSEITE – SECTIONS / CARDS / ICON-ANIMATIONEN
   ========================================================= */

.home-section{
  background: var(--grad-home-section);
  border-radius: var(--radius-section);
  padding: 2em 1.6em;
  margin: 1em auto;
  max-width: 1200px;
  box-shadow: var(--shadow-section);
  border-left: 5px solid #004a8f;
}

.home-section-title{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-section-title);
  font-weight: 700;
  color: #003366;
}

/* Icons */
.home-section--why .home-section-title::before{
  content: "❓";
  font-size: var(--fs-section-usp-icon);
  color: #ff8800;
  animation: icon-question 1.6s ease-in-out 3.5s infinite;
}
.home-section--locations .home-section-title::before{
  content: "📍";
  font-size: var(--fs-section-usp-icon);
  color: #0077c8;
  animation: icon-pin 1.8s ease-out 5s infinite;
}
.home-section--start .home-section-title::before{
  content: "🚀";
  font-size: var(--fs-section-usp-icon);
  color: #003366;
  animation: icon-rocket 1.6s ease-out 3s infinite;
}

.home-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 1.1rem;
}

.usp-card{
  background-color: #ffffff;
  border-radius: 0.8rem;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1rem 0.9rem;
}

.usp-title{
  font-size: var(--fs-section-usp-title);
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--aschmann-blau);
}

.usp-text{
  font-size: var(--fs-section-usp-text);
  color: #444444;
  line-height: 1.5;
}

.location-list{ margin-top: 0.8rem; }
.location-item{
  margin: 0.25rem 0;
  font-size: 0.95rem;
}

/* =========================================================
   7) FOOTER
   ========================================================= */

.footer{
  margin-top: 0.2rem;
  background: #101624;
  color: #c7ccd8;
  padding: 4rem 1.25rem 3rem;
}

.footer-inner{
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 1.6rem 1.25rem;

  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;

  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.footer-brand{ flex: 1 1 260px; }

.footer-links{
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  flex: 2 1 320px;
}

.footer-column-title{
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e0e5f0;
  margin-bottom: 0.4rem;
}

.footer-list{ list-style: none; }
.footer-list li{ margin: 0.12rem 0; }

/* Footer-link (alt .button4) */
.button4{
  color: #e0e0e0;
  font-size: 0.95em;
  cursor: pointer;
  margin: 0.1em 0;
  text-decoration: none;
  opacity: 0.9;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.button4:hover{
  color: #ffffff;
  opacity: 1;
  text-decoration: none;
}
.button4:active,
.button4:visited,
.button4:focus{ text-decoration: none; }

.footer-bottom{
  max-width: var(--container-max);
  width: 100%;
  margin: 0.6rem auto 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 0.8rem;
  color: #9aa2b5;
}

.footer-bar{
  margin-top: 0.15rem;
  background: transparent;
  font-size: 1rem;
}

.footer-bar-inner{
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 1.4rem 0.75rem;

  background: #000000;
  color: #f0f0f0;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
}

.footer-link{
  color: #f0f0f0;
  text-decoration: none;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.footer-link::before{ content: ""; }
.footer-link.impressum::before{ content: "⚖️"; font-size: 1rem; }
.footer-link.agbs::before{ content: "📄"; font-size: 1rem; }
.footer-link.disclaimer::before{ content: "⚠️"; font-size: 1rem; }
.footer-link.datenschutz::before{ content: "🔒"; font-size: 1rem; }
.footer-link.kontakt::before{ content: "✉️"; font-size: 1rem; }
.footer-link:hover{ text-decoration: underline; }

.footer-separator{
  color: #bbbbbb;
  font-size: 0.8rem;
}

/* =========================================================
   8) LEGAL (Impressum / AGB / Datenschutz / Disclaimer)
   ========================================================= */

.legal-shell{
  max-width: var(--container-max);
  margin: 0 auto 2rem;
  padding: 0 1.25rem;
}

.legal-wrapper,
.legal-page{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.legal-header{ margin-bottom: 1.35rem; }

.legal-header-top{
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.legal-icon-circle{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(255, 140, 0, 0.14);
  border: 1px solid rgba(0, 51, 102, 0.18);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);

  color: #003366;
  font-size: 26px;
  line-height: 1;

  flex: 0 0 auto;
}

.legal-tag{
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.15rem;
}

.legal-title{
  font-size: 1.65rem;
  margin: 0;
  color: #111;
}

.legal-intro{
  margin-top: 0.75rem;
  max-width: 70ch;
  line-height: 1.55;
  color: #222;
}

.legal-section-card{
  position: relative;
  margin: 0 0 var(--legal-card-gap);
  padding: 1.25rem 1.25rem 1.15rem;
  padding-right: calc(1.25rem + var(--legal-badge-space));
  background: rgba(255,255,255,0.98);
  border-radius: 1rem;
  box-shadow: 0 8px 26px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.06);
}

.legal-section-label{
  position: absolute;
  top: 14px;
  right: 14px;

  display: inline-flex;
  align-items: center;

  width: 160px;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;

  font-size: 0.8rem;
  letter-spacing: 0.02em;

  background: rgba(0, 51, 102, 0.10);
  border: 1px solid rgba(0, 51, 102, 0.18);
  color: rgba(0, 0, 0, 0.75);
  font-weight: 600;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  z-index: 2;
}

.legal-heading{
  margin: 0.15rem 0 0.65rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: #003366;
  overflow-wrap: anywhere;
}

.legal-text{
  margin: 0 0 0.85rem;
  line-height: 1.55;
  max-width: 100ch;
}
.legal-list{
  margin: 0 0 0.85rem;
  padding-left: 1.15rem;
  list-style: disc;
  max-width: 100ch;
}
.legal-text:last-child,
.legal-list:last-child{ margin-bottom: 0; }

/* =========================================================
   9) KONTAKT (kontakt.php)
   ========================================================= */

.contact-shell{
  max-width: var(--container-max);
  margin: 2rem auto 3rem;
  padding: 0 1.25rem;
}

.contact-wrapper{
  background: var(--grad-contact);
  border-radius: var(--radius-xl);
  padding: 2rem 1.8rem 2.2rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  position: relative;
}

.contact-wrapper::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 1rem 1rem 0 0;
  background: linear-gradient(to right, #8bc6ff, #ffffff55, #8bc6ff);
  opacity: 0.8;
}

.contact-header{
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1.1rem;
  margin-bottom: 1.2rem;
}

.contact-header-left{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon-circle{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4da3ff, #1e6fd1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.contact-tagline{
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffdd55;
  margin-bottom: 0.2rem;
}

.contact-title{
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
  color: #ffffff;
}

.contact-intro{
  font-size: 0.95rem;
  color: #e8e8e8;
  max-width: 32rem;
}

#contactErrorBox{
  display: block;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  font-weight: 600;
  background: rgba(255,255,255,0.15);
  color: #ffffff;
}

#contactErrorBox.is-error{
  background: #ffdddd;
  border-color: var(--input-error-border);
  color: #8a0000;
}

#contactErrorBox.is-success{
  background: #2e7d32;
  border-color: #2e7d32;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
}

.contact-form{ margin-top: 0.6rem; }

.contact-honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.contact-col{ flex: 1 1 260px; }

.form-field{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.9rem;
}

.contact-wrapper .form-field label{
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
}

/* Inputs */
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form input[type="number"],
.contact-form input[type="password"],
.contact-form select,
.contact-form textarea{
  padding: var(--input-padding-y) var(--input-padding-x);
  border-radius: var(--input-radius);
  border: 1px solid var(--input-border);
  font-size: 0.95rem;
  background-color: var(--input-bg);
  color: var(--input-text);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
  width: 100%;
}

.contact-form textarea{
  resize: vertical;
  min-height: 140px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color: var(--input-border-focus);
  box-shadow: var(--input-focus-ring);
  background-color: var(--input-bg);
}

/* OK */
.contact-form input.input-ok,
.contact-form select.input-ok,
.contact-form textarea.input-ok{
  border: 2px solid var(--input-ok-border);
  background-color: var(--input-ok-bg);
}

/* Fehlerblöcke */
.form-field-error{
  background: rgba(255, 80, 80, 0.15);
  border: 2px solid var(--input-error-border);
  border-radius: 0.6rem;
  padding: 0.8rem;
  margin: 0.4rem 0;
}
.checkbox-field.form-field-error{
  background: transparent;
  border: none;
  padding: 0;
  margin: 0.4rem 0;
}

.contact-form input.input-error:not([type="radio"]):not([type="checkbox"]),
.contact-form textarea.input-error,
.contact-form select.input-error{
  border: 3px solid var(--input-error-border);
  background-color: var(--input-error-bg);
}

.contact-radio-group{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.4rem 1rem;
  padding: 0.3rem 0.2rem;
}

.contact-wrapper .radio-option{
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #ffffff;
  white-space: nowrap;
}


.radio-option-other{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.radio-option-other .radio-other-input{
  flex: 0 0 190px;
  max-width: 100%;
  padding: 0.45rem 0.6rem;
}

/* Checkbox fields */
.checkbox-field{
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}
.checkbox-field input[type="checkbox"]{
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.contact-wrapper .checkbox-field label{
  font-weight: 400;
  font-size: 0.9rem;
  color: #ffffff;
}


/* Actions */
.contact-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* Buttons (.btn bleibt eigen, Farben sind oben zusammengefasst) */
.btn{
  padding: 0.8rem 1.6rem;
  font-size: 1.05rem;
  box-shadow: none; /* bleibt hier neutral */
}
.btn-secondary{ border: 1px solid rgba(255, 255, 255, 0.8); }

.contact-wrapper a{
  color: #ffdd55;
  text-decoration: underline;
}
.contact-wrapper a:hover{ color: #ffffff; }

/* =========================================================
   10) PREISRECHNER (rechner.php)
   ========================================================= */

.preisrechner{
  max-width: 1200px;
  margin: 1.5rem auto 0.5rem;
  background: var(--grad-home-section);
  border-radius: var(--radius-section);
  padding: 1em 1.8em 2em;
  box-shadow: var(--shadow-section-strong);
  border-left: 5px solid #004a8f;
  position: relative;
}

.preisrechner-title{
  font-size: 1.8rem;
  color: #003366;
  margin: 0 0 0.35rem 0;
}
.preisrechner-intro{
  font-size: 0.95rem;
  color: #1b1b1b;
  margin-bottom: 1.3rem;
  max-width: 48rem;
}

.preisrechner-filial-row{
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-bottom: 1.4rem;
}

.preisrechner-filial-box,
.preisrechner-info-box{
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 1rem 1.15rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.preisrechner-filial-box{ flex: 2 1 260px; }
.preisrechner-info-box{ flex: 1 1 190px; }

.preisrechner input[type="checkbox"],
.preisrechner input[type="radio"]{ margin-right: 0.45rem; }

.pr-box-title{
  font-weight: 600;
  color: #003366;
  margin-bottom: 0.5rem;
}

.pr-filial-options{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.95rem;
}

.pr-filial-option{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.pr-filial-option input{ accent-color: #003366; }

.pr-selection-text{
  font-size: 0.9rem;
  color: #333333;
}

.preisrechner-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.pr-klasse-box{
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 0.85rem 1rem 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.pr-checkbox{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  margin: 0.18rem 0;
  cursor: pointer;
}
.pr-checkbox input{ accent-color: #003366; }

.preisrechner-result-wrapper{ margin-top: 0.3rem; }

.preisrechner-result-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.pr-result-card{
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.1rem 1.25rem 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-top: 4px solid #003366;
}

.pr-result-title{
  font-size: 1.1rem;
  color: #003366;
  margin-bottom: 0.55rem;
}

.pr-price-list{
  font-size: 0.9rem;
}

.pr-price-list div{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0.12rem 0;
}

.pr-price-list div > :first-child{
  font-weight: 600;
  color: #444444;
}

.pr-price-list div > :last-child{
  margin: 0;
  color: #1c1c1c;
  white-space: nowrap;
}

.pr-disabled{
  opacity: 0.4;
  pointer-events: none;
}

.pr-hinweisbox{
  background: var(--grad-home-section);
  border-radius: var(--radius-section);
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 5rem 1.7rem 5rem;
  position: relative;
  box-shadow: var(--shadow-section-strong);
}

.pr-hinweis-title{
  font-weight: 700;
  color: #003366;
  font-size: 1rem;
  margin-bottom: 0.45rem;
  padding-left: 0.6rem;
}

.pr-hinweis-list{
  margin: 0;
  padding: 0 0 0 1.4rem;
  color: #212121;
  font-size: 0.94rem;
  line-height: 1.35rem;
}
.pr-hinweis-list li{ margin: 0.2rem 0; }

.pr-button-row{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 1rem 0;
  padding: 0 0.3rem;
}

.pr-btn{
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: 0.2s ease-in-out;
  text-align: center;
  flex: 1;
}

.pr-btn-primary{
  background: #003366;
  color: #ffffff;
  border: 2px solid #00264d;
}
.pr-btn-primary:hover{ background: #004080; }

.pr-btn-secondary{
  background: #ffffff;
  color: #003366;
  border: 2px solid #003366;
}
.pr-btn-secondary:hover{ background: #e6e6e6; }

.pr-btn:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================
   11) ANMELDUNG (anmeldung.php)
   ========================================================= */

.anmeldung-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.anmeldung-col{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.anmeldung-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.anmeldung-actions .primary-button,
.anmeldung-actions .secondary-button{
  min-width: 190px;
  text-align: center;
}

.anmeldung-price-wrapper{
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.anmeldung-price-table{
  border-collapse: collapse;
  min-width: 360px;
  max-width: 480px;
  background: #fdfdfd;
  border: 1px solid #555;
  font-size: 0.95rem;
}
.anmeldung-price-table th,
.anmeldung-price-table td{
  border: 1px solid #555;
  padding: 0.25rem 0.5rem;
}
.anmeldung-price-table th{
  background: #e0e0e0;
  font-weight: 700;
  text-align: left;
}

/* Anmeldung Eingabefelder */
.anmeldung-page input[type="text"],
.anmeldung-page input[type="email"],
.anmeldung-page input[type="tel"],
.anmeldung-page input[type="date"],
.anmeldung-page input[type="number"],
.anmeldung-page textarea,
.anmeldung-page select{
  border: 2px solid #003366;
  border-radius: 6px;
  padding: 6px 10px;
  box-sizing: border-box;
  color: #003366;
  background-color: #ffffff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  font-weight:600;
}
.anmeldung-page input[type="text"]:focus,
.anmeldung-page input[type="email"]:focus,
.anmeldung-page input[type="tel"]:focus,
.anmeldung-page input[type="date"]:focus,
.anmeldung-page input[type="number"]:focus,
.anmeldung-page textarea:focus,
.anmeldung-page select:focus{
  border-color: #0066cc;
  box-shadow: 0 0 8px rgba(0, 102, 204, 0.45);
  outline: none;
}

.anmeldung-page input.error-field,
.anmeldung-page select.error-field,
.anmeldung-page textarea.error-field{
  border-color: #cc0000;
  background: #ffe6e6;
}

/* Pflichtfeld Icon */
.anmeldung-page .required-label{
  position: relative;
  padding-right: 1.6rem;
  cursor: help;
  font-weight:600;
}

.anmeldung-page .required-label::after{
  content: "!";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #cc0000;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.anmeldung-page .form-field.required:focus-within .required-label::after{
  transform: translateY(-50%) scale(1.2);
  box-shadow: 0 0 7px rgba(204, 0, 0, 0.7);
  background-color: #e60000;
}

.anmeldung-page .required-label::before{
  content: "Pflichtfeld";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 0.7rem;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.anmeldung-page .required-label:hover::before{
  opacity: 1;
  transform: translateY(-70%);
}

/* =========================================================
   12) CUSTOM CHECKBOXEN / RADIO (scoped: Kontakt + Anmeldung)
   ========================================================= */

.contact-wrapper input[type="checkbox"],
.contact-wrapper input[type="radio"],
.anmeldung-page input[type="checkbox"],
.anmeldung-page input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;

  width: var(--control-size);
  height: var(--control-size);

  border: var(--control-border);
  border-radius: 4px;
  background: var(--control-bg);
  cursor: pointer;
  position: relative;

  transform: scale(var(--control-scale));

  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.1s ease;
}

.contact-wrapper input[type="radio"],
.anmeldung-page input[type="radio"]{ border-radius: 50%; }

.contact-wrapper input[type="checkbox"]:hover,
.contact-wrapper input[type="radio"]:hover,
.anmeldung-page input[type="checkbox"]:hover,
.anmeldung-page input[type="radio"]:hover{
  border-color: var(--control-hover);
  box-shadow: var(--control-hover-ring);
}

.contact-wrapper input[type="checkbox"]:focus,
.contact-wrapper input[type="radio"]:focus,
.anmeldung-page input[type="checkbox"]:focus,
.anmeldung-page input[type="radio"]:focus{
  box-shadow: var(--control-focus-ring);
}

.contact-wrapper input[type="checkbox"]:checked,
.contact-wrapper input[type="radio"]:checked,
.anmeldung-page input[type="checkbox"]:checked,
.anmeldung-page input[type="radio"]:checked{
  background: var(--control-accent);
  border-color: var(--control-accent);
  transform: scale(1.05);
}

.contact-wrapper input[type="checkbox"]:checked::after,
.anmeldung-page input[type="checkbox"]:checked::after{
  content: "✓";
  color: #ffffff;
  font-size: 17px;
  position: absolute;
  left: 2px;
  top: -1px;
  font-weight: 700;
}

.contact-wrapper input[type="radio"]:checked::after,
.anmeldung-page input[type="radio"]:checked::after{
  content: "";
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  top: 4px;
}

/* =========================================================
   13) THEORIEPLAN (theorieplan.php) — CLEAN
   ========================================================= */

.theorie-section{
  margin: 2rem auto;
  padding: 1.8rem 1.6rem 2rem;
  background: var(--grad-theorie);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* Titel */
.theorie-title{
  margin-bottom: 0.4rem;
  color: #003366;
  font-size: clamp(1.35rem, 1.1vw + 1.15rem, 2.1rem);
  line-height: 1.15;
}

.theorie-title .theorie-icon{
  font-size: 1.25em;
  margin-right: 0.45rem;
  vertical-align: -0.08em;
}

.theorie-intro{
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  color: #333333;
}

/* Filterbereich (Labels + Pills skalieren hierüber) */
.theorie-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.8rem;
  font-size: var(--theorie-filter-font);
}

.theorie-filter-group{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 0 0 200px;
}

.theorie-filter label{
  font-size: inherit;
  font-weight: 600;
  color: #003366;
}

.theorie-filter label .theorie-icon{
  font-size: 1.15em;
  margin-right: 0.35rem;
  vertical-align: -0.08em;
}

/* Selects (falls Thema sichtbar bleibt / später wieder einblenden) */
.theorie-filter select{
  width: 100%;
  max-width: 100%;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #cccccc;
  font-size: inherit;
  min-width: 10rem;
  background-color: #ffffff;
}

/* Dropdowns ausblenden (Filiale + Termine) */
#theorie-filiale,
#theorie-anzahl{
  display: none;
}

/* Pills */
.theorie-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;

  padding: 0;
  font-size: inherit;
}

.theorie-chip{
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.75);

  font-size: var(--theorie-pill-font);
  padding: var(--theorie-pill-pad-y) var(--theorie-pill-pad-x);

  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  line-height: 1;

  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.theorie-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.theorie-chip.is-active{
  background: rgba(0,63,127,0.10);
  border-color: rgba(0,63,127,0.35);
}

/* Filial-Pills: 2 Spalten, feste Anordnung */
.theorie-chips--branches{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* Landsberg alleine unten */
.theorie-chip--wide{
  grid-column: 1 / -1;
}

/* Grid Karten */
.theorie-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
}

.theorie-card{
  background: #fffbe6;
  border-radius: 0.8rem;
  padding: 0.8rem 0.9rem 0.9rem;
  box-shadow: 0 3px 9px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.05);
}

.theorie-card-date{
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  color: #555555;
}

.theorie-card-topic{
  font-size: 1.08rem;
  font-weight: 600;
  color: #003366;
  margin-bottom: 0.25rem;
}

.theorie-card-note{
  font-size: 0.95rem;
  color: #444444;
}

.theorie-card--kein{
  background: #c0c0c0;
  border: 1px solid #000000;
}

.theorie-card--kein .theorie-card-topic{ color: #d30000; }
.theorie-card--kein .theorie-card-date{ color: #a00000; }

.theorie-card--empty{
  background: #f3f4f8;
  border-style: dashed;
}

.theorie-today-dot{
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  background: #28a745;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(40,167,69,0.9);
  animation: theorie-today-pulse 1.1s ease-in-out infinite;
}

/* Filter-Icons animieren */
#theorieplan .theorie-filter label .theorie-icon{
  display: inline-block;
  transform-origin: center;
}

#theorieplan .theorie-icon--pin{ animation: icon-pin 1.8s ease-out 5s infinite; }
#theorieplan .theorie-icon--calendar{ animation: icon-pin 1.8s ease-out 4s infinite; }
#theorieplan .theorie-icon--question{ animation: icon-question 1.6s ease-in-out 3.5s infinite; }

/* =========================================================
   14) FIXER ANMELDE-BUTTON
   ========================================================= */

.anmeldung-fixed-btn{
  position: fixed;
  top: 30vh;
  right: 1rem;

  padding: 0.45rem 0.8rem;
  font-size: 0.9rem;

  background: rgba(255, 204, 0, 0.5);
  color: #003366;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;

  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.18);
  z-index: 10000;
  cursor: pointer;
  transition: 0.2s ease;
}
.anmeldung-fixed-btn:hover{
  background: rgba(255, 204, 0, 1);
  transform: scale(1.04);
}
.anmeldung-fixed-btn:active{ transform: scale(0.97); }

/* =========================================================
   15) ANMELDUNG – ERFOLGSSEITE
   ========================================================= */

.anmeldung-success-shell{
  max-width: var(--container-max);
  margin: 2.5rem auto 3.5rem;
  padding: 0 1.25rem;
}

.anmeldung-success-card{
  position: relative;
  background: linear-gradient(135deg, var(--aschmann-orange), var(--aschmann-orange-dunkel));
  border-radius: 18px;
  padding: 2.2rem 2.2rem 2.4rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  color: #222222;
  overflow: hidden;
}

.anmeldung-success-card::after{
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 60%);
  opacity: 0.6;
}

.anmeldung-success-icon{
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.65);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.anmeldung-success-icon span{
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #111;
}

.anmeldung-success-heading{
  margin: 0 0 0.6rem;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  color: #111;
}

.anmeldung-success-text{
  margin: 0 0 1.4rem;
  font-size: 0.98rem;
  max-width: 40rem;
  line-height: 1.5;
  color: #222;
}

.anmeldung-success-steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.8rem;
  margin-bottom: 1.6rem;
}

.anmeldung-success-step{
  background: rgba(255,255,255,0.65);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}

.anmeldung-success-step h2{
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: #111;
}
.anmeldung-success-step p{
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #333;
}

.anmeldung-success-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.anmeldung-success-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  min-width: 220px;
  height: 48px;
  transition: 0.15s ease;
}

.anmeldung-success-btn-primary{
  background: var(--aschmann-blau);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.anmeldung-success-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.30);
}

.anmeldung-success-btn-secondary{
  background: #ffffff;
  color: #333333;
  border: 1px solid rgba(0,0,0,0.25);
}
.anmeldung-success-btn-secondary:hover{
  background: rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* =========================================================
   16) INFO-SEITE (info.php) – Basis / Sektionen / Cards
   ========================================================= */

.info-page{ margin-top: 1.2rem; }

.info-hero{
  background: var(--grad-hero);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.7rem 1.5rem;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

.info-hero-title{
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
}

.info-hero-text{
  font-size: 1rem;
  margin-bottom: 0.3rem;
  max-width: 40rem;
}

/* Section wrapper */
.info-section{
  position: relative;
  background: var(--grad-info-section);
  border-radius: var(--radius-section);
  padding: 2em 1.6em;
  margin: 1.2em auto 2em;
  max-width: 1200px;
  box-shadow: var(--shadow-section-strong);
  border-left: 5px solid #003f7f;
  overflow: hidden;
}
.info-section::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--aschmann-blau);
  border-radius: 0.9rem 0.9rem 0 0;
}

.info-section-title{
  display: block;
  padding: 1rem 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.3rem;
  color: #1a1a1a;
  box-shadow: 0 3px 14px rgba(0,0,0,0.18);
}

.info-section-nav{
  border-left: none;
  box-shadow: none;
  background: transparent;
  padding: 1.3rem 0 0.5rem;
}
.info-section-nav::before{ display: none; }

.info-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.info-card{
  border-radius: 0.7rem;
  padding: 0.55rem 0.7rem 0.5rem;
  border: none;
  color: #1b1b1b;
  box-shadow: var(--shadow-card-compact);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.info-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-compact-hover);
}

.info-card-title{
  position: relative;
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
  color: #1b1b1b;
  font-weight: 600;
  padding-bottom: 0.35rem;
}
.info-card-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
}

.info-list{
  margin: 0.4rem 0 0.3rem;
  padding-left: 1.1rem;
  list-style: disc;
}
.info-list li{
  margin-bottom: 0.18rem;
  font-size: 0.95rem;
}
.info-note{
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: #333;
}

.info-card-link{
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.info-card-warning{
  border: 1px solid rgba(0,0,0,0.12);
}

/* Section color variants */
.info-section--bf17,
.info-section--b197,
.info-section--b196{
  background: linear-gradient(to bottom, #e9f7ff 0%, #ffffff 55%);
}
.info-section--bf17::before,
.info-section--b197::before,
.info-section--b196::before{
  background: linear-gradient(to right, #ffb577, #ff9f55);
}
.info-section--bf17 .info-section-title,
.info-section--b197 .info-section-title,
.info-section--b196 .info-section-title{
  background: linear-gradient(135deg, #ffc999, #ff9f55);
  color: #1a1a1a;
}
.info-section--bf17 .info-card,
.info-section--b197 .info-card,
.info-section--b196 .info-card{
  background: var(--grad-info-bf);
}
.info-section--bf17 .info-card-warning,
.info-section--b197 .info-card-warning,
.info-section--b196 .info-card-warning{
  background: var(--grad-info-warn);
}
.info-section--bf17{ border-left-color: #ff9f55; }
.info-section--b197{ border-left-color: #ff9f55; }
.info-section--b196{ border-left-color: #ff9b3d; }

.info-section--ablauf,
.info-section--lernen{
  background: linear-gradient(to bottom, #eef3ff 0%, #ffffff 55%);
  border-left-color: #5c96ff;
}
.info-section--ablauf::before,
.info-section--lernen::before{
  background: linear-gradient(to right, #bcd4ff, #5c96ff);
}
.info-section--ablauf .info-section-title,
.info-section--lernen .info-section-title{
  background: linear-gradient(135deg, #bcd4ff, #5c96ff);
  color: #1a1a1a;
}
.info-section--ablauf .info-card,
.info-section--lernen .info-card{
  background: var(--grad-info-ablauf);
}
.info-section--ablauf .info-card-warning,
.info-section--lernen .info-card-warning{
  background: var(--grad-info-warn);
}

.info-section--fahrschulwahl,
.info-section--pruefungsangst{
  background: linear-gradient(to bottom, #fff6e2 0%, #ffffff 55%);
  border-left-color: #ffba47;
}
.info-section--fahrschulwahl::before,
.info-section--pruefungsangst::before{
  background: linear-gradient(to right, #ffe1a3, #ffba47);
}
.info-section--fahrschulwahl .info-section-title,
.info-section--pruefungsangst .info-section-title{
  background: linear-gradient(135deg, #ffe1a3, #ffba47);
  color: #1a1a1a;
}
.info-section--fahrschulwahl .info-card,
.info-section--pruefungsangst .info-card{
  background: var(--grad-info-fahrschulwahl);
}
.info-section--fahrschulwahl .info-card-warning,
.info-section--pruefungsangst .info-card-warning{
  background: var(--grad-info-warn);
}

/* Warum wir */
.info-section--warumwir{
  background: linear-gradient(to bottom, #fff6e2 0%, #ffffff 55%);
  border-left-color: #98FB98;
}
.info-section--warumwir::before{
  background: linear-gradient(to right, #ADFF2F, #98FB98);
}
.info-section--warumwir .info-section-title{
  background: linear-gradient(135deg, #ADFF2F, #98fb98);
  color: #1a1a1a;
}
.info-section--warumwir .info-card{
  background: var(--grad-info-warumwir);
}
.info-section--warumwir .info-card-warning{
  background: var(--grad-info-warn);
}

/* =========================================================
   17) ÜBER UNS – Team / Fahrzeuge / Platzhalter
   ========================================================= */

.info-section--about{ max-width: 1200px; }

.info-section-lead{
  margin-top: -0.25rem;
  margin-bottom: 1.25rem;
  opacity: 0.95;
}

.about-row{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.2rem;
  align-items: center;
  margin-top: 1.15rem;
}

.about-title{
  font-size: 1.25rem;
  margin: 0 0 0.6rem;
}
.about-text p{ margin: 0 0 0.75rem; }

.about-media{ margin: 0; }

.about-placeholder{
  border-radius: 0.8rem;
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  color: #003f7f;
  background: var(--grad-soft-blue);
  box-shadow: var(--shadow-placeholder);
  border: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.about-ph--hero{ min-height: 260px; }
.about-ph--team{ min-height: 220px; }
.about-ph--equip{ min-height: 220px; }

.about-mini-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.about-actions{
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.about-row--reverse{ grid-template-columns: 0.85fr 1.15fr; }
.about-row--reverse .about-text{ order: 2; }
.about-row--reverse .about-media{ order: 1; }

#fahrlehrer,
#fahrzeuge{ scroll-margin-top: 110px; }

/* Team grid */
.team-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.team-card{
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-card-lg);
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.team-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-lg-hover);
}

.team-card img{
  width: 100%;
  height: auto;
  display: block;
}

.team-card figcaption{
  padding: 0.8rem 0.7rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #003366;
}
.team-card .team-role{
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: #666;
}

/* Fahrzeuge */
.vehicle-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
  margin-top: 1.6rem;
}

.vehicle-card{
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-card-lg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vehicle-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-lg-hover);
}

.vehicle-card img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.vehicle-info{
  padding: 0.9rem 1rem 1.1rem;
}
.vehicle-info h3{
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: #003366;
}
.vehicle-info p{
  margin: 0;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.45;
}

.vehicle-features{
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #666;
}

/* =========================================================
   18) FILIALEN
   ========================================================= */

.info-section--branches{ max-width: 1200px; }

.branches-jumplist{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 1.2rem;
}

.branches-jump{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  color: #003f7f;
  background: var(--grad-soft-blue);
  box-shadow: var(--shadow-chip);
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.branches-jump:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}

.branches-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.branch-card{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-areas: "media body";
  gap: 1.1rem;
  border-radius: 1rem;
  padding: 1rem;
  /* odd = leichtes Blau */
  background: linear-gradient(135deg, rgba(0, 63, 127, 0.045), rgba(0, 63, 127, 0.020));
  box-shadow: var(--shadow-branch-card);
  border: 1px solid rgba(0,0,0,0.06);
}

.branch-card:nth-of-type(even){
  grid-template-areas: "body media";
  /* even = etwas intensiveres Blau */
  background: linear-gradient(135deg, rgba(0, 63, 127, 0.15), rgba(0, 63, 127, 0.10));
}



.branch-media{ grid-area: media; }
.branch-body{ grid-area: body; }

.branch-icon{
  margin-right: 0.3rem;
  font-size: 0.95em;
  opacity: 0.85;
}

.branch-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.9rem;
}
.branch-card:nth-of-type(even) .branch-img{ object-position: center top; }
.branch-card:nth-of-type(odd)  .branch-img{ object-position: center center; }

.branch-placeholder{
  border-radius: 0.9rem;
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  color: #003f7f;
  background: var(--grad-soft-blue);
  box-shadow: var(--shadow-placeholder);
  border: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.branch-title{
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
}
.branch-text{ margin: 0 0 0.9rem; }

.branch-info{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.branch-block{
  border-radius: 0.9rem;
  padding: 0.75rem 0.85rem;
  background: rgba(0, 63, 127, 0.05);
  border: 1px solid rgba(0,0,0,0.05);
}

.branch-label{
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #003f7f;
}
.branch-lines{ line-height: 1.35; }

.branch-link{ color: inherit; text-decoration: none; }
.branch-link:hover{ text-decoration: underline; }

.branch-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}

.branches-outro{
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(0, 63, 127, 0.05);
  border: 1px solid rgba(0,0,0,0.05);
}

.branches-outro-title{
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}
.branches-outro-text{ margin: 0 0 0.9rem; }

.branches-outro-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.branch-media--two{
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.branch-placeholder--main{ min-height: 220px; }
.branch-placeholder--secondary{ min-height: 140px; opacity: 0.85; }

.branch-hours{
  display: grid;
  gap: 0.12rem;
}

.branch-hours .hours-row{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  align-items: baseline;
}

.branch-hours .hours-day{
  white-space: nowrap;
}

.branch-hours .hours-time{
  justify-self: end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   19) BUCHEN (Fahrstunden buchen)
   ========================================================= */

.info-section--booking{ max-width: 1200px; }

.booking-title{
  margin: 1.25rem 0 0.75rem;
  font-size: 1.2rem;
}

.booking-steps,
.booking-tips,
.booking-faq{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.booking-card{
  border-radius: 1rem;
  padding: 1rem 1rem 0.95rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 20px rgba(0,0,0,0.16);
  border: 1px solid rgba(0,0,0,0.06);
}

.booking-icon{
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 0.45rem;
}

.booking-card-title{
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.booking-text{
  margin: 0 0 0.7rem;
  line-height: 1.45;
}
.booking-text:last-child{ margin-bottom: 0; }

.booking-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.5rem 0 0.6rem;
}

.booking-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  color: #003f7f;
  background: var(--grad-soft-blue);
  box-shadow: var(--shadow-chip);
  border: 1px solid rgba(0,0,0,0.05);
  font-weight: 700;
}

.booking-note{ margin-top: 0.2rem; opacity: 0.9; }

.booking-alert{
  margin-top: 1rem;
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(0, 63, 127, 0.05);
  border: 1px solid rgba(0,0,0,0.05);
}

.booking-alert-title{
  margin: 10px 0 0.55rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.booking-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

/* =========================================================
   20) PRÜFUNG (Technik + Grundfahraufgaben) + Modal
   ========================================================= */

.info-section--pruefung{
  background: var(--grad-pruefung);
  border-left-color: #5c96ff;
}
.info-section--pruefung::before{
  background: linear-gradient(to right, #bcd4ff, #5c96ff);
}
.info-section--pruefung .info-section-title{
  background: linear-gradient(135deg, #bcd4ff, #5c96ff);
  color: #1a1a1a;
}

/* Switch */
.pr-class-switch{
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.2rem 0 1rem;
}
.pr-switch-btn{ opacity: 0.85; }
.pr-switch-btn.is-active{ opacity: 1; transform: translateY(-1px); }

.pr-class-panel{ display: none; }
.pr-class-panel.is-visible{ display: block; }

/* Anchor nav */
.pr-anchor-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.4rem 0 1.1rem;
}
.pr-anchor-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.10);
  text-decoration: none;
  color: #003366;
  font-weight: 600;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pr-anchor-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* Grid / Cards */
.pr-grid{
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.pr-card{
  background: var(--grad-card-white-blue);
  border-radius: 0.9rem;
  padding: 0.95rem 1rem 1rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pr-card-title{
  font-size: 0.95rem;
  font-weight: 800;
  color: #003366;
  margin-bottom: 0.4rem;
}

.pr-text{
  font-size: 0.9rem;
  color: #2b2b2b;
  line-height: 1.5;
  flex-grow: 1;
}

/* Media */
.pr-media-caption{
  font-size: 0.85rem;
  font-weight: 800;
  color: #003366;
  margin: 0 0 0.35rem;
}

.pr-media-box{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.9rem;
  box-shadow: var(--shadow-media);
  background: #eeeeee;
}

.pr-media-box img,
.pr-media-box video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pr-media--img .pr-media-box{ cursor: zoom-in; }
.pr-media--video .pr-media-box{ cursor: pointer; }

.pr-media--video .pr-media-box::after{
  content: "▶";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: #ffffff;
  font-size: 1.9rem;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
  pointer-events: none;
}

.pr-placeholder{
  width: 100%;
  height: 100%;
  border-radius: 0.9rem;
  background: var(--grad-soft-blue);
  border: 2px dashed rgba(0, 63, 127, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
.pr-placeholder-icon{ font-size: 2.1rem; }
.pr-placeholder-text{
  font-size: 0.95rem;
  font-weight: 800;
  color: #003366;
  line-height: 1.2;
}

/* Modal */
.tech-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.55);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.tech-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}

.tech-modal-content{
  position: relative;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.2rem;

  max-width: 960px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;

  transform: scale(0.96) translateY(12px);
  opacity: 0;

  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.25s ease;

  box-shadow: var(--shadow-heavy);
}

.tech-modal.is-open .tech-modal-content{
  transform: scale(1) translateY(0);
  opacity: 1;
}

.tech-modal-title{
  font-size: 1.6rem;
  margin: 0 0 0.8rem;
  color: #003366;
}

.tech-modal-text{
  font-size: 1.05rem;
  line-height: 1.6;
  color: #333;
  margin: 0.8rem 0 0;
}

.tech-modal-img,
.tech-modal-video{
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 0.9rem;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.tech-modal-close{
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.8rem;
  line-height: 1;

  background: rgba(255,255,255,0.95);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);

  cursor: pointer;
  z-index: 10;

  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* =========================================================
   21) ANIMATIONEN (Keyframes)
   ========================================================= */

@keyframes theorie-today-pulse{
  0%{ transform: scale(1); box-shadow: 0 0 6px rgba(40,167,69,0.6); }
  50%{ transform: scale(1.65); box-shadow: 0 0 20px rgba(40,167,69,1); }
  100%{ transform: scale(1); box-shadow: 0 0 6px rgba(40,167,69,0.6); }
}

@keyframes icon-question{
  0%{ transform: rotate(0deg); }
  10%{ transform: rotate(-10deg); }
  20%{ transform: rotate(7deg); }
  30%{ transform: rotate(-5deg); }
  40%{ transform: rotate(2deg); }
  50%{ transform: rotate(0deg); }
  100%{ transform: rotate(0deg); }
}

@keyframes icon-pin{
  0%{ transform: translateY(0) scale(1); }
  10%{ transform: translateY(-6px) scale(1.06); }
  20%{ transform: translateY(0) scale(1); }
  30%{ transform: translateY(-3px) scale(1.03); }
  40%{ transform: translateY(0) scale(1); }
  100%{ transform: translateY(0) scale(1); }
}

@keyframes icon-rocket{
  0%{ transform: translateY(0) rotate(0deg); }
  10%{ transform: translateY(-10px) rotate(-12deg); }
  20%{ transform: translateY(-16px) rotate(-15deg); }
  40%{ transform: translateY(-6px) rotate(-6deg); }
  60%{ transform: translateY(0) rotate(0deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}

/* IG animations */
@keyframes igShineFast{
  0%{ left: -110%; }
  55%{ left: 140%; }
  100%{ left: 140%; }
}
@keyframes igPulse{
  0%, 100%{ transform: rotate(var(--ig-rot)) scale(1); }
  50%{ transform: rotate(var(--ig-rot)) scale(1.06); }
}
@keyframes igWobble{
  0%, 100%{ transform: rotate(var(--ig-rot)) scale(1); }
  25%{ transform: rotate(calc(var(--ig-rot) + 1.5deg)) scale(1.02); }
  50%{ transform: rotate(calc(var(--ig-rot) - 1.5deg)) scale(1.04); }
  75%{ transform: rotate(calc(var(--ig-rot) + 0.5deg)) scale(1.02); }
}

/* =========================================================
   22) RESPONSIVE BREAKPOINTS (gebündelt am Ende)
   ========================================================= */

/* Reduced motion (zusammengeführt) */
@media (prefers-reduced-motion: reduce){
  /* Theorieplan */
  #theorieplan .theorie-title::before,
  #theorieplan .theorie-icon--pin,
  #theorieplan .theorie-icon--calendar,
  #theorieplan .theorie-icon--question{
    animation: none;
  }

  /* Modal */
  .tech-modal,
  .tech-modal-content{
    transition: none;
    transform: none;
  }
}

/* >= 1600px */
@media (min-width: 1600px){
  :root{ --container-max: var(--container-max-xl); }

  .page-wrapper,
  .header-inner,
  .footer-inner,
  .footer-bar-inner,
  .contact-shell{
    max-width: var(--container-max);
  }
}

/* <= 1024px */
@media (max-width: 1024px){
  .header-inner{ align-items: flex-start; }

  .hero-video{ max-height: 370px; }
  .hero-text p{ font-size: 0.95rem; }

  .home-section{ margin-bottom: 1.6rem; padding: 1.4rem 1.3rem 1.6rem; }

  .footer-inner{ flex-direction: column; gap: 1.2rem; }
  .footer-links{ flex-direction: column; gap: 0.8rem; }

  .about-row{ grid-template-columns: 1fr; }
  .about-row--reverse{ grid-template-columns: 1fr; }
  .about-row--reverse .about-text,
  .about-row--reverse .about-media{ order: initial; }
}

/* <= 820px */
@media (max-width: 820px){
  :root{ --legal-badge-space: 9rem; }
}

/* <= 768px */
@media (max-width: 768px){
  :root{
    /* Header badge responsive */
    --header-badge-top: 45px;
    --header-badge-pad-y: 8px;
    --header-badge-pad-x: 72px;

    /* Legal: label in flow */
    --legal-badge-space: 0rem;

    /* IG badge size (mobile) */
    --ig-badge-w: 60px;
    --ig-badge-h: 60px;
    --ig-badge-radius: 999px;
    --ig-ico-size: 25px;

    --ig-badge-top: 20px;
    --ig-badge-left: 10px;
    --ig-badge-right: auto;

    --nav-icon-box: 2.2rem;
    --nav-icon-size: 1.4rem;
    --nav-icon-size-contact: 2rem;
  }

  .nav-icon,
  .nav-icon-contact{ height: var(--nav-icon-box); }

  .header-badge{ line-height: 1.0; }
  .header-badge .badge-line-1{ font-size: 0.8rem; }
  .header-badge .badge-line-2{ font-size: 0.7rem; }

  .header-inner{ padding: 0.5rem 1rem 0.8rem; align-items: stretch; }

  .nav-toggle{ display: flex; margin-top: 0.4rem; margin-right: 0.3rem; }

  .header-nav{
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: #ffffff;
    padding: 0.25rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    gap: 0.12rem;
  }

  .nav-item{
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: var(--nav-mobile-gap);
    padding: var(--nav-mobile-pad-y) var(--nav-mobile-pad-x);
    min-height: var(--nav-mobile-min-h);

    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;

    font-size: var(--nav-mobile-font);
  }

  .nav-item.nav-active{
    background: #003f7f;
    color: #ffefc5;
    border-color: #ffdb66;
    box-shadow: none;
  }

  .nav-toggle-checkbox:checked ~ .header-nav{ display: flex; }

  .hero-text p{ font-size: 0.75rem; }
  .hero-video{ max-height: 250px; }

  .contact-grid{ flex-direction: column; }
  .contact-col{ width: 100%; }
  .contact-actions{ justify-content: center; gap: 1rem; }
  .btn-primary,
  .btn-secondary{ max-width: 340px; width: 100%; text-align: center; }

  .info-hero{ padding: 1.3rem 1.2rem 1.2rem; }
  .info-hero-title{ font-size: 1.5rem; }
  .info-grid{ grid-template-columns: 1fr; }

  .anmeldung-grid{ grid-template-columns: 1fr; }
  .preisrechner-filial-row{ flex-direction: column; }
  .pr-button-row{ flex-direction: column; }
  .anmeldung-success-steps{ grid-template-columns: 1fr; }

  .footer-bar-inner{ flex-wrap: wrap; row-gap: 0.3rem; }
  .pr-hinweisbox{ margin: 1.2rem 1rem 1.7rem; }

  .theorie-filter{ flex-direction: column; align-items: stretch; }
  .theorie-filter-group{ flex: 1 1 auto; }

  .anmeldung-success-actions{ flex-direction: column; align-items: stretch; }
  .anmeldung-success-btn{ width: 100%; min-width: unset; text-align: center; }

  /* Branches: stack */
  .branch-card,
  .branch-card:nth-of-type(even){
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "body";
  }

  /* Booking: stack */
  .booking-steps,
  .booking-tips,
  .booking-faq{ grid-template-columns: 1fr; }

  /* Modal text */
  .tech-modal-title{ font-size: 1.35rem; }
  .tech-modal-text{ font-size: 1.0rem; }

  /* IG badge mobile: icon only */
  .header-badge--ig{
    --ig-rot: -20deg;
    animation: igPulse 1.6s ease-in-out infinite, igWobble 3.4s ease-in-out infinite;
    will-change: transform;
  }
  .header-badge--ig .ig-badge-inner{ padding: 0; gap: 0; }
  .header-badge--ig .ig-badge-text{ display: none; }

  .header-badge--ig::before{
    opacity: 1;
    width: 90%;
    animation: igShineFast 1.35s ease-in-out infinite;
    transition: none;
  }

  /* Legal: label in flow */
  .legal-section-card{ padding-right: 1.25rem; }
  .legal-section-label{
    position: static;
    width: auto;
    max-width: 100%;
    margin: 0.6rem 0 0.95rem;
  }
}

/* <= 750px */
@media (max-width: 750px){
  .home-grid{ grid-template-columns: 1fr; }
  .hero-inner{ flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .hero-image{ order: -1; width: 100%; }
  .hero-video{ max-width: 350px; margin: 0 auto; display: block; border-radius: 1rem; }
}

/* <= 480px */
@media (max-width: 480px){
  :root{
    /* nur die Abweichungen zu <=768 */
    --header-badge-top: 30px;

    --ig-badge-w: 35px;
    --ig-badge-h: 35px;
    --ig-badge-radius: 100px;
    --ig-ico-size: 15px;

    --ig-badge-top: 50px;
    --ig-badge-left: 1px;

    --pad-btn-text: 0.88rem;
    --pad-btn-x: 1.00rem;

    --theorie-filter-font: 0.98rem;
    --theorie-pill-font: 1.00rem;
    --theorie-pill-pad-y: 0.55rem;
    --theorie-pill-pad-x: 0.90rem;
  }

  .page-wrapper{ padding: 0 0.9rem 2.2rem; }

  .hero-primary,
  .hero-secondary{ min-width: 0; width: 100%; }

  .footer{ padding-inline: 1rem; }
  .footer-bottom{ flex-direction: column; gap: 0.4rem; text-align: center; }
  .button4{ font-size: 0.9em; }

  .hero-video{ max-height: 150px; }

  .theorie-section{ padding: 1.4rem 1rem 1.6rem; margin: 1.6rem 0.4rem; }
  .theorie-grid{ grid-template-columns: 1fr; }

  .header-badge .badge-line-1{ font-size: 0.7rem; }
  .header-badge .badge-line-2{ font-size: 0.6rem; }

  .branch-info{ grid-template-columns: 1fr; }

  /* Bild + Banner untereinander im Link */
  .header-logo-link{
    display: flex;
    flex-direction: column;
  }

  /* gelben Banner: waagrecht unter dem Bild */
  .header-badge{
    position: static;
    top: auto;
    right: auto;
    left: auto;

    transform: none;
    width: 100%;
    margin: auto;
    padding: 0.3rem 0.3rem;
    min-height: 0;

    border-radius: 0 0 18px 18px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.20);
    border: 1px solid rgba(0,0,0,0.12);

    white-space: normal;
    line-height: 1.15;
    text-align: center;
  }
}

/* <= 320px */
@media (max-width: 320px){
  .theorie-filter-group{
    min-width: 0;
  }

  .theorie-chips--branches{
    grid-template-columns: 1fr;
  }

  .theorie-chip{
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .theorie-filter{ gap: 0.7rem; }
  .theorie-chips{ gap: 0.4rem; }

  :root{
    --theorie-filter-font: 0.92rem;
    --theorie-pill-font: 0.95rem;
    --theorie-pill-pad-y: 0.48rem;
    --theorie-pill-pad-x: 0.75rem;
  }
}