/* =========================================================
   ALEX' FAHRSCHULE – ZENTRALES FARB- & DESIGN-SYSTEM
   Farben hier ändern -> gesamte Website passt sich an.
   ========================================================= */
:root{
  /* Markenfarben: Rot · Grau · Weiß · Hellblau (aufeinander abgestimmt) */
  --brand:      #D6212E;   /* Rot – leicht entschärft, wirkt hochwertiger als reines Signalrot */
  --brand-dark: #AB1A25;   /* Rot dunkel (Hover) */
  --ink:        #2F3842;   /* Grau – blaustichiges Anthrazit, harmoniert mit dem Hellblau */
  --ink-2:      #3E4956;   /* Grau hell (Karten auf dunklen Flächen) */
  --paper:      #F2F5F8;   /* Weiß mit hellblauem Hauch – Seitenhintergrund */
  --accent-rgb: 143 193 227; /* Hellblau (#8FC1E3) als RGB für Transparenzstufen */
  --accent:     #8FC1E3;   /* Hellblau – Chips, Badges, dezente Akzente */
  --star:       #FFB800;   /* Bewertungs-Sterne */
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:Barlow,system-ui,sans-serif}
.font-display{font-family:"Barlow Condensed",sans-serif}

/* Signatur: gestrichelte Fahrbahnmarkierung */
.lane{background-image:repeating-linear-gradient(90deg,var(--brand) 0 28px,transparent 28px 48px);height:4px}
.lane-light{background-image:repeating-linear-gradient(90deg,var(--accent) 0 28px,transparent 28px 48px);height:4px;opacity:.55}

/* Schräge Sektionskanten für Dynamik */
.slant-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 2.5rem),0 100%)}
.slant-t{clip-path:polygon(0 2.5rem,100% 0,100% 100%,0 100%)}
@media (max-width:768px){.slant-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 1.2rem),0 100%)}.slant-t{clip-path:polygon(0 1.2rem,100% 0,100% 100%,0 100%)}}

/* Akkordeons (details) */
details.acc{border:1px solid rgba(21,25,30,.12);border-radius:.75rem;background:#fff;overflow:hidden}
details.acc>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.1rem;font-weight:600}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--brand);transition:transform .2s}
details.acc[open]>summary::after{transform:rotate(45deg)}
details.acc>div{padding:0 1.1rem 1.1rem}
details.acc[open]>summary{border-bottom:1px dashed rgba(21,25,30,.12)}

/* Fokus-Sichtbarkeit */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:.25rem}