/* ============================================================================
   Gestaltung der Leistungsseiten (Direktfahrten, Express, Europa ...)
   ----------------------------------------------------------------------------
   Bewusst eigenständiges Stylesheet und nicht Tailwind: Die Tailwind-Datei wird
   lokal kompiliert und enthaelt nur die Klassen, die zum Zeitpunkt des
   Kompilierens verwendet wurden. Neue Klassen waeren ohne erneuten
   Kompiliervorgang wirkungslos. Mit dieser Datei bleiben die Leistungsseiten
   davon unabhaengig - Farben und Schriften entsprechen exakt der Startseite.
   ============================================================================ */
:root{
  --ink:#161F28; --steel:#48586A; --paper:#EEF1F0; --mercury:#CBD5D9;
  --marke:#305787; --markehell:#8FB2D1; --rust:#B4472A; --moss:#3E7A5B;
}
*{ box-sizing:border-box; }
body{ margin:0; background:#fff; color:var(--ink); font-family:"Public Sans","Segoe UI",Arial,sans-serif;
      line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,.display{ font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif; }
.mono{ font-family:"JetBrains Mono",monospace; }
a{ color:inherit; }

.schale{ max-width:80rem; margin:0 auto; padding:0 1.25rem; }
@media (min-width:640px){ .schale{ padding:0 2rem; } }

/* Kopfleiste */
.kopf{ position:sticky; top:0; z-index:50; background:var(--marke); color:var(--paper);
       padding:.9rem 0; }
.kopf .innen{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.kopf .marke{ font-weight:700; letter-spacing:.05em; font-size:1.05rem; text-decoration:none;
              display:flex; align-items:center; }
/* Das Logo ersetzt den Schriftzug. Die Höhe ist begrenzt, damit die Leiste
   nicht wächst; die Breite ergibt sich von selbst. */
.kopf .marke-logo{ height:2rem; width:auto; display:block; }
@media (max-width:640px){
  .kopf .marke-logo{ height:1.6rem; }
}
.kopf nav{ display:flex; gap:1.5rem; align-items:center; font-size:.9rem; font-weight:600; }
.kopf nav a{ text-decoration:none; }
.kopf .knopf{ background:var(--paper); color:var(--marke); padding:.5rem 1.1rem;
              border-radius:999px; font-size:.82rem; text-transform:uppercase;
              letter-spacing:.04em; font-weight:700; }

/* Brotkrumen */
.krumen{ background:var(--paper); border-bottom:1px solid var(--mercury); padding:.7rem 0;
         font-size:.8rem; color:var(--steel); }
.krumen a{ text-decoration:none; }
.krumen a:hover{ text-decoration:underline; }

/* Titelbereich */
.titel-bereich{ background:var(--paper); padding:3.5rem 0 3rem; border-bottom:1px solid var(--mercury); }
.augenbraue{ font-family:"JetBrains Mono",monospace; font-size:.72rem; text-transform:uppercase;
             letter-spacing:.25em; color:var(--steel); margin-bottom:.6rem; }
h1{ font-size:clamp(2.4rem,6vw,4.2rem); font-weight:700; text-transform:uppercase;
    line-height:.95; margin:0 0 1.2rem; letter-spacing:-.01em; }
.vorspann{ font-size:1.15rem; color:var(--steel); max-width:44rem; margin:0 0 1.8rem; }
.knopfreihe{ display:flex; gap:.8rem; flex-wrap:wrap; }
.knopf-voll{ background:var(--marke); color:#fff; padding:.85rem 1.6rem; text-decoration:none;
             font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.88rem;
             border-radius:2px; display:inline-block; }
.knopf-rand{ background:#fff; color:var(--ink); border:1px solid var(--mercury);
             padding:.85rem 1.6rem; text-decoration:none; font-weight:700; text-transform:uppercase;
             letter-spacing:.04em; font-size:.88rem; border-radius:2px; display:inline-block; }

/* Merkmalsleiste */
.merkmale{ background:var(--ink); color:var(--paper); padding:1.6rem 0; }
.merkmale .gitter{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.5rem; }
.merkmal{ display:flex; gap:.7rem; align-items:flex-start; }
.merkmal .zahl{ font-family:"JetBrains Mono",monospace; color:var(--markehell); font-size:.75rem; padding-top:.2rem; }
.merkmal strong{ display:block; font-size:.95rem; }
.merkmal span{ font-size:.82rem; color:var(--mercury); }

/* Inhaltsabschnitte */
section{ padding:4rem 0; }
section.hell{ background:var(--paper); }
h2{ font-size:clamp(1.7rem,3.5vw,2.4rem); font-weight:700; text-transform:uppercase;
    line-height:1.05; margin:0 0 1rem; }
h3{ font-size:1.2rem; font-weight:700; margin:0 0 .5rem; }
.einleitung{ color:var(--steel); max-width:46rem; margin-bottom:2.2rem; }

.karten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.5rem; }
.karte{ background:#fff; border:1px solid var(--mercury); padding:1.6rem; }
section.hell .karte{ background:#fff; }
.karte .symbol{ width:2.4rem; height:2.4rem; background:var(--marke); color:#fff;
                display:flex; align-items:center; justify-content:center; font-weight:700;
                margin-bottom:.9rem; font-family:"Barlow Condensed",sans-serif; font-size:1.2rem; }
.karte p{ color:var(--steel); font-size:.95rem; margin:0; }

/* Ablauf */
.ablauf{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:0; }
.schritt{ padding:1.4rem; border-left:2px solid var(--mercury); }
.schritt:first-child{ border-left:2px solid var(--marke); }
.schritt .nr{ font-family:"JetBrains Mono",monospace; font-size:.72rem; color:var(--marke);
              letter-spacing:.15em; margin-bottom:.4rem; }
.schritt strong{ display:block; margin-bottom:.3rem; }
.schritt span{ font-size:.9rem; color:var(--steel); }

/* Branchen */
.branchen{ display:flex; flex-wrap:wrap; gap:.6rem; }
.branche{ background:#fff; border:1px solid var(--mercury); padding:.55rem 1rem;
          font-size:.88rem; text-decoration:none; }
.branche:hover{ border-color:var(--marke); color:var(--marke); }

/* Fahrzeugtabelle */
.fahrzeuge{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--mercury); }
.fahrzeuge th{ text-align:left; background:var(--paper); font-family:"Barlow Condensed",sans-serif;
               text-transform:uppercase; font-size:.8rem; letter-spacing:.05em; color:var(--steel);
               padding:.75rem 1rem; border-bottom:2px solid var(--mercury); }
.fahrzeuge td{ padding:.75rem 1rem; border-bottom:1px solid var(--paper); font-size:.92rem; }

/* Fragen */
.frage{ background:#fff; border:1px solid var(--mercury); margin-bottom:.7rem; }
.frage summary{ padding:1.1rem 1.3rem; cursor:pointer; font-weight:700; list-style:none;
                display:flex; justify-content:space-between; gap:1rem; }
.frage summary::-webkit-details-marker{ display:none; }
.frage[open] summary{ border-bottom:1px solid var(--mercury); color:var(--marke); }
.frage .antwort{ padding:1.1rem 1.3rem; color:var(--steel); font-size:.95rem; }

/* Abschluss */
.abschluss{ background:var(--marke); color:#fff; padding:3.5rem 0; }
.abschluss h2{ color:#fff; }
.abschluss p{ color:var(--markehell); max-width:38rem; margin:0 0 1.6rem; }
.abschluss .knopf-voll{ background:var(--paper); color:var(--marke); }
.abschluss .knopf-rand{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }

/* Verwandte Leistungen */
.verwandt{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; }
.verwandt a{ background:#fff; border:1px solid var(--mercury); padding:1.1rem 1.3rem;
             text-decoration:none; display:block; }
.verwandt a:hover{ border-color:var(--marke); }
.verwandt strong{ display:block; margin-bottom:.25rem; }
.verwandt span{ font-size:.85rem; color:var(--steel); }

.fuss{ background:var(--ink); color:var(--mercury); padding:2.5rem 0; font-size:.85rem; }
.fuss a{ text-decoration:underline; }

.hinweis-kasten{ background:#FFF8E6; border:1px solid #E8D9A8; padding:1rem 1.2rem;
                 font-size:.85rem; color:#6B5518; margin-bottom:2rem; }

/* Ergaenzungen fuer die fertige Seite */
.tabellen-fuss{ font-size:.85rem; color:var(--steel); margin-top:.8rem; }
.branche{ background:#fff; border:1px solid var(--mercury); padding:.55rem 1rem;
          font-size:.88rem; display:inline-block; }
.frage summary span:last-child{ color:var(--marke); }