/* Taxi Lakis Leonberg — Theme-Overrides auf Basis von styles.css (Atelier-Kit) */
/* Selbstgehostet, lokale Dateien (Google Fonts / OFL), kein Google-CDN. */
@font-face{font-family:"Jost";src:url("fonts/Jost-Variable.woff2") format("woff2-variations"),url("fonts/Jost-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Variable.woff2") format("woff2-variations"),url("fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* --- Token-Overrides: gleiche Variablen wie das Kit, eigene Werte ------- */
:root{
  --font-heading: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --color-text:          #070331;  /* Taxi-Lakis-Blau als Ink */
  --color-text-2:        #4d4a6b;
  --color-text-3:        #7b78a0;
  --color-bg:            #ececeb;
  --color-surface:       #ffffff;
  --color-surface-2:     #DFEFF7;
  --color-border:        #e4e6ef;

  --color-accent:        #FFED00;  /* Taxi-Lakis-Gelb */
  --color-accent-strong: #e6d600;
  --color-on-accent:     #070331;

  --color-dark-bg:   #070331;
  --color-dark-text: #ffffff;

  --radius: 12px;
  --radius-pill: 999px;
}
html[data-contrast="high"]{
  --color-bg: #070331; --color-surface: #070331; --color-surface-2: #1a1360;
  --color-text: #ffffff; --color-text-2: #cfcbea; --color-text-3: #cfcbea;
  --color-border: #443b9c;
}
html[data-contrast="high"] body{ background:#070331; }

/* --- Buttons: Pillenform statt Kit-Standard --------------------------- */
.button{ border-radius: var(--radius-pill); border-color: var(--color-text); }
.button--phone{ font-family:var(--font-heading); font-weight:900; font-size:clamp(1.4rem,2.6vw,2rem); }

/* --- Barrierefrei-Leiste ------------------------------------------------ */
.a11y-bar{ background:var(--color-surface-2); font-family:var(--font-display); font-size:var(--text-small); }
.a11y-bar__inner{ display:flex; flex-wrap:wrap; gap:var(--space-8) var(--space-24); align-items:center; justify-content:space-between; padding-block:var(--space-8); }
.a11y-bar__controls{ display:flex; flex-wrap:wrap; gap:var(--space-8); align-items:center; }
.a11y-bar__group{ display:flex; gap:2px; align-items:center; }
.pill{ height:2.1rem; padding:0 var(--space-16); border-radius:var(--radius-pill); border:1px solid var(--color-border); background:transparent; color:var(--color-text); cursor:pointer; font:inherit; white-space:nowrap; }
.pill:hover, .pill[aria-pressed="true"]{ background:var(--color-accent); border-color:var(--color-accent); }
.pill--sq{ min-width:2.1rem; padding:0; font-weight:700; }

/* --- Header: dunkle Variante -------------------------------------------- */
.site-header--dark{ background:var(--color-dark-bg); border-bottom:0; }
.site-header--dark .logo{ padding-block:var(--space-8); }
.site-header--dark .logo img{ display:block; height:2.4rem; width:auto; }
.site-header--dark .nav-toggle{ color:var(--color-dark-text); }
.site-header--dark .nav .button{ padding:.55rem 1.15rem; }

/* Our nav (6 links + phone + CTA) is wider than the kit's default nav, so the
   kit's 48em burger cutoff is too narrow and the row wraps instead of
   collapsing. Push the collapse point out to 82em; above that, show the full row. */
@media (min-width:48em) and (max-width:74.99em){
  .site-header__inner{ justify-content:center; position:relative; }
  .nav-toggle{ display:block; position:absolute; right:var(--pad-inline); top:50%; transform:translateY(-50%); }
  .nav{ position:absolute; inset-inline:0; top:100%; background:var(--color-surface); border-bottom:var(--border); box-shadow:var(--shadow-card); display:none; }
  .nav[data-open="true"]{ display:block; }
  .nav ul{ flex-direction:column; gap:0; padding-inline:var(--pad-inline); }
  .nav li{ border-top:var(--border); }
  .nav li:first-child{ border-top:none; }
  .nav a{ display:block; padding-block:var(--space-16); }
  .nav a::after{ display:none; }
}
@media (max-width:74.99em){
  .site-header--dark .nav{ background:var(--color-dark-bg); box-shadow:0 1.5rem 2.5rem rgba(7,3,49,.35); }
  .site-header--dark .nav li{ border-top-color:rgba(255,255,255,.18); }
}
@media (min-width:75em){
  .nav a{ font-size:.92rem; }
  .nav ul{ gap:var(--space-16); }
}
.site-header--dark .nav a{ color:var(--color-dark-text); }
.site-header--dark .nav a::after{ background:var(--color-accent); }
.site-header--dark .nav a.button{ color:var(--color-on-accent); }
.site-header--dark .nav a.button:hover{ color:var(--color-accent); }
.site-header--dark .nav a.button.button--ghost{ color:var(--color-dark-text); }

/* --- Modal (Fahrt anfragen) — nutzt die vorhandenen .scrim/.modal-Klassen des Kits --- */
.modal{ position:relative; }
.modal__close{ position:absolute; top:var(--space-16); right:var(--space-16); width:2.5rem; height:2.5rem; border-radius:50%; border:2px solid var(--color-text); background:var(--color-surface); color:var(--color-text); cursor:pointer; font-size:1.1rem; line-height:1; }
.modal__close:hover{ background:var(--color-text); color:var(--color-surface); }

/* --- dunkle Sections (Hero, Über uns) ----------------------------------- */
.section--dark{ background:var(--color-dark-bg); color:var(--color-dark-text); }
.section--dark h1, .section--dark h2, .section--dark h3{ color:var(--color-dark-text); }
.section--dark .overline{ color:var(--color-accent); }
.section--dark .lead, .section--dark .prose{ color:rgba(255,255,255,.85); }
.section--dark .prose a{ color:#fff; }

/* --- Hero ---------------------------------------------------------------- */
.hero h1 .accent{ color:var(--color-accent); }
.hero__lead{ margin-top:var(--space-24); max-width:34rem; font-size:var(--text-h5); color:rgba(255,255,255,.85); }
.hero .button{ margin-top:var(--space-32); }

/* --- Kennzahlen-Streifen -------------------------------------------------- */
.facts{ background:var(--color-accent); color:var(--color-on-accent); }
.facts__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:var(--space-24); padding-block:var(--space-24); }
.facts__grid b{ display:block; font-family:var(--font-heading); font-weight:900; font-size:var(--text-h4); }
.facts__grid span{ font-size:var(--text-small); }

/* --- Auf-/Zuklapp-Indikator: gemeinsam von Service-Karten und FAQ genutzt --- */
.disclosure-icon{ flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--color-accent); color:var(--color-on-accent); display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-weight:700; line-height:1; }
details[open] .disclosure-icon::after{ content:"\2212"; }
details:not([open]) .disclosure-icon::after{ content:"+"; }

/* --- Service-Karten (native <details>) -----------------------------------
   CSS-Spalten statt Grid: Grid-Zeilen würden alle Karten einer Zeile auf die
   Höhe der jeweils größten (aufgeklappten) Karte strecken -> Leerraum neben
   den geschlossenen Karten. Spalten fließen wie Masonry, jede Karte behält
   ihre eigene Höhe. */
.service-grid{ margin-top:var(--space-40); column-gap:var(--gutter); }
@media (min-width:40em){ .service-grid{ column-count:2; } }
@media (min-width:64em){ .service-grid{ column-count:3; } }
.service-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--space-24); break-inside:avoid; margin-bottom:var(--gutter); }
.service-card + .service-card{ margin-top:0; }
.service-card summary{ cursor:pointer; list-style:none; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-16); }
.service-card summary::-webkit-details-marker{ display:none; }
.service-card__lead{ display:flex; align-items:flex-start; gap:var(--space-16); }
.service-card__dot{ flex:none; width:2rem; height:2rem; border-radius:50%; background:var(--color-accent); margin-top:2px; }
.service-card__title{ font-family:var(--font-heading); font-weight:600; font-size:var(--text-h5); display:block; }
.service-card__desc{ color:var(--color-text-2); font-size:var(--text-small); margin-top:var(--space-8); }
.service-card__body{ margin-top:var(--space-24); padding-top:var(--space-24); border-top:var(--border); }
.service-card__points{ list-style:none; padding:0; margin:0; display:grid; gap:var(--space-8); }
.service-card__points li{ padding-left:1.25rem; position:relative; color:var(--color-text-2); }
.service-card__points li::before{ content:""; position:absolute; left:0; top:.55em; width:.6rem; height:.6rem; background:var(--color-accent); }
.service-card__note{ margin-top:var(--space-16); background:var(--color-surface-2); border-radius:var(--radius); padding:var(--space-16); font-size:var(--text-small); }
.service-card__actions{ margin-top:var(--space-16); display:flex; flex-wrap:wrap; gap:var(--space-16); }

/* --- Schritte-Liste (Krankenfahrten) ------------------------------------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-16); }
.steps li{ background:var(--color-surface); border-left:.4rem solid var(--color-accent); border-radius:var(--radius); padding:var(--space-24); }
.steps b{ font-family:var(--font-heading); font-weight:900; font-size:var(--text-h4); }
.steps strong{ display:block; font-family:var(--font-heading); font-weight:600; margin-top:var(--space-8); }
.steps span{ color:var(--color-text-2); font-size:var(--text-small); }

/* --- Fuhrpark-Slider: Farbfotos statt S/W -------------------------------- */
.slide--fleet{ background:var(--color-dark-bg); align-items:center; }
.slide--fleet .slide__media{ object-fit:contain; filter:none; padding:var(--space-32); }
.slide--fleet::after{ display:none; }
.slide--fleet .slide__inner{ position:absolute; inset-inline:0; bottom:0; padding-block-end:var(--space-24); text-align:center; }
.slide--fleet .slide__title{ font-size:var(--text-h5); }
.slide--fleet .slide__text{ font-size:var(--text-small); margin-top:var(--space-8); }

/* --- Kennzahlen (Über uns) ------------------------------------------------ */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:var(--space-16); margin-top:var(--space-24); }
.stats div{ border:1px solid rgba(255,255,255,.25); padding:var(--space-16); border-radius:var(--radius); }
.stats b{ display:block; font-family:var(--font-heading); font-weight:900; font-size:var(--text-h3); color:var(--color-accent); }
.stats span{ font-size:var(--text-small); color:rgba(255,255,255,.8); }

/* --- FAQ (native <details>) ----------------------------------------------- */
.faq details{ border-top:var(--border); padding-block:var(--space-16); }
.faq details:last-child{ border-bottom:var(--border); }
.faq summary{ font-family:var(--font-heading); font-weight:600; font-size:var(--text-h5); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-16); }
.faq summary::-webkit-details-marker{ display:none; }
.faq details p{ margin-top:var(--space-16); color:var(--color-text-2); }

/* --- Kontakt-Karten -------------------------------------------------------- */
.contact-cards{ display:grid; gap:var(--space-16); align-content:start; }
.contact-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--space-24); }
.contact-card strong{ font-family:var(--font-heading); font-weight:600; display:block; }
.contact-card p, .contact-card address{ margin-top:var(--space-8); font-style:normal; }

/* --- Formular: Zwei Felder pro Zeile -------------------------------------- */
.form__row--pair{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:var(--space-24); }
.form select{ width:100%; padding:var(--space-16); background:var(--color-surface); border:var(--border); border-radius:var(--radius); font:inherit; color:inherit; }
.form select:focus{ outline:none; border-color:var(--color-text); box-shadow:0 0 0 3px var(--color-accent); }
.form__hint{ margin-top:var(--space-16); font-size:var(--text-small); color:var(--color-text-2); }
.form__status{ margin-bottom:var(--space-24); padding:var(--space-16); border-radius:var(--radius); font-size:var(--text-small); }
.form__status--success{ background:#e4f6ea; color:#1e6b3a; border:1px solid #a9e0bb; }
.form__status--error{ background:#fdeceb; color:#a3261a; border:1px solid #f3b9b3; }

/* --- Leichte Sprache ------------------------------------------------------- */
[data-txt="easy"]{ display:none; }
html[data-easy="on"] [data-txt="easy"]{ display:block; }
html[data-easy="on"] [data-txt="normal"]{ display:none; }

/* --- Impressum / Datenschutz: gelbe Hinweisboxen für offene Textstellen --- */
.todo-box{ background:var(--color-surface-2); border-left:.4rem solid var(--color-accent); border-radius:var(--radius); padding:var(--space-24); }
.todo-box h2{ font-size:var(--text-h5); }