/* =========================================================================
   Komponenten

   Bewusst wenige: Schaltflaeche, Kopfzeile, Hinweisblock, Fusszeile.
   Der Rest der Seite besteht aus Zeilen und Rastern, die in layout.css
   liegen - dort, wo die Struktur beschrieben wird.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Schaltflaeche
   ------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--bg-brand);
  --btn-fg: var(--fg-on-brand);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: 0.625rem 1.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

/* Hover: sichtbar dunkler, leicht angehoben. Die Vorlage wechselte auf
   denselben Ton wie den Grundzustand, da sah man nichts. */
.btn:hover {
  background: var(--brand-800);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active { transform: translateY(0); box-shadow: none; }
.btn svg { flex: none; }

.btn--accent { --btn-bg: var(--bg-accent); --btn-fg: var(--fg-on-accent); }
.btn--accent:hover { background: var(--brand-800); }

.btn--outline {
  --btn-bg: var(--bg-surface);
  --btn-fg: var(--fg-default);
  --btn-border: var(--border-default);
}

.btn--outline:hover { background: var(--bg-muted); border-color: var(--border-strong); }

.btn--lg { min-height: 3rem; padding: 0.875rem 1.5rem; font-size: var(--text-base); }
.btn--sm { min-height: var(--tap-target); padding: 0.5rem 1rem; font-size: var(--text-sm); }

/* -------------------------------------------------------------------------
   Kopfzeile
   ------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: var(--border-width) solid transparent;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.header.is-stuck {
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-subtle);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

/* Logo der Fahrschule. Bildmarke ist die Strichzeichnung, die auch auf dem
   Fahrzeug klebt, leicht gekippt. Auf dunklen Flaechen wird die invertierte
   Fassung eingeblendet, weil die Wortmarke sonst im Schwarz verschwindet. */
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.logo img {
  display: block;
  height: 3.9rem;   /* das Logo ist sehr breit angelegt; darunter wird die
                       Wortmarke unleserlich klein */
  width: auto;
}

.logo__invers { display: none; }

@media (max-width: 48rem) {
  .logo img { height: 3rem; }
}

.nav { display: none; align-items: center; gap: var(--space-1); }

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.nav a:hover { color: var(--fg-default); background: var(--bg-muted); }

.header__actions { display: flex; align-items: center; gap: var(--space-2); }

.nav-toggle {
  display: grid;
  place-items: center;
  width: var(--tap-target); height: var(--tap-target);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-input);
  cursor: pointer;
}

.nav-toggle span {
  position: relative;
  display: block;
  width: 16px; height: 1.5px;
  background: var(--fg-default);
  border-radius: var(--radius-full);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 1.5px;
  background: var(--fg-default);
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 auto 0;
  z-index: var(--z-overlay);
  padding: var(--space-3) var(--gutter) var(--space-6);
  background: var(--bg-surface);
  border-bottom: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    visibility var(--duration-base);
}

.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-3);
  border-radius: var(--radius-input);
  color: var(--fg-default);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.mobile-nav a:hover { background: var(--bg-muted); }

@media (min-width: 64rem) {
  .nav { display: flex; }
  .nav-toggle, .mobile-nav { display: none; }
}

/* -------------------------------------------------------------------------
   Hinweisblock
   ------------------------------------------------------------------------- */

.panel {
  display: grid;
  gap: var(--space-6);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--bg-inverse);
  border-radius: var(--radius-panel);
  color: var(--fg-on-inverse);
}

@media (min-width: 56rem) {
  .panel { grid-template-columns: 1.5fr 1fr; align-items: center; gap: var(--space-10); }
}

.panel h2 { font-size: var(--display-sm); color: var(--gray-0); }
.panel p { margin-top: var(--space-3); color: var(--gray-400); max-width: 56ch; }
.panel .eyebrow { background: var(--gray-0); color: var(--gray-900); }

.panel__aside {
  padding: var(--space-5);
  background: rgb(255 255 255 / 0.06);
  border: var(--border-width) solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-card);
}

.panel__aside b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--gray-0);
}

.panel__aside p { margin-top: var(--space-2); font-size: var(--text-sm); }

/* -------------------------------------------------------------------------
   Fusszeile
   ------------------------------------------------------------------------- */

.footer {
  padding-block: var(--space-12) var(--space-6);
  background: var(--bg-inverse);
  color: var(--fg-on-inverse);
}

.footer__grid {
  display: grid;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-width) solid rgb(255 255 255 / 0.1);
}

/* Zwei Spalten: das Seiten-Menü ist entfallen, links Text, rechts Kontakt. */
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.5fr 1fr; } }

.footer h4 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: var(--space-3);
}

.footer p, .footer li { color: var(--gray-400); font-size: var(--text-sm); }
.footer ul { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.footer a { color: var(--gray-300); text-decoration: none; }
.footer a:hover { color: var(--gray-0); }

.footer__logo { display: inline-flex; margin-bottom: var(--space-4); }
.footer__logo img { height: 4rem; }
.footer__logo .logo__normal { display: none; }
.footer__logo .logo__invers { display: block; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--gray-500);
}

.footer__bottom nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Trenner als eigenes Element, nicht als ::before im Link: sonst gehoerte der
   Strich zum Linktext und wuerde beim Ueberfahren mit unterstrichen. */
.footer__sep { color: var(--gray-600); }