/*
 * Nordway Logistics — site.css
 * Quelle: Design System „Nordway Logistics“ (docs/branding/, Artefakt
 * https://claude.ai/artifact/PbS3D5kr3MuQNtCdneJNHK). Hier steht NUR, was
 * tokens.css und bundle.css nicht mitbringen: Abschnittskopf, das mobile
 * Menü ohne Skript, das Formularraster, die Bestätigung nach dem Absenden,
 * der Honeypot und der Textblock der Unterseiten. Jede Farbe, jeder Abstand,
 * jeder Radius, jeder Schatten und jede Schrift ist ein Token — Werte stehen
 * nur in tokens.css (scripts/check-site.py S5 haelt das).
 * Deploy-Weg: Repo terrant/nordway-logistics → CI → Generic Package →
 * Pin-PR im Homelab (Rolle web_lxc). NICHT auf dem Host editieren.
 */

/* Abschnittskopf: Eyebrow → H2 → Lead, darunter space-8 bis zum Inhalt
   (Brand Book „Abstände und Layout“; Abstände wie im ContactCta). */
.nw-section-head { margin-bottom: var(--space-8); }
.nw-section-head .nw-h2 { margin-top: var(--space-2); }
.nw-section-head .nw-lead { margin-top: var(--space-3); }

/* Mobiles Menü (unter 720 px). bundle.css blendet die Navigation dort aus;
   die Website baut das Menü selbst (Header-README). Der Host erlaubt kein
   JavaScript (CSP script-src 'none'), deshalb <details>: Tastatur und
   Screenreader bekommen den Auf/Zu-Zustand vom Browser. Das Overlay in
   surface-raised mit shadow-md liegt unter der Kopfleiste ueber der ganzen
   Breite und reicht bis zum unteren Bildrand; es scrollt mit der Seite, damit
   ein Sprung zu einem Abschnitt nicht unter einem offenen Menue endet. */
.nw-menu { display: none; }
@media (max-width: 719px) {
  /* Logo-Zug (56 px hoch), Menue und Telefon-Button passen in 375 px nicht
     in eine Zeile — schon Logo und Telefon allein nicht. Mobil deshalb zwei
     Zeilen: Logo und Menue oben, der Telefon-Button darunter ueber die volle
     Breite, damit die Nummer ohne Scrollen erreichbar bleibt
     (docs/branding/OFFENE-PUNKTE.md). */
  .nw-header .nw-container { position: relative; flex-wrap: wrap; row-gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .nw-menu { display: block; margin-left: auto; }
  .nw-header-cta { order: 3; flex: 1 0 100%; margin-left: 0; }
  .nw-header-cta .nw-btn { width: 100%; }
  .nw-menu > summary { list-style: none; }
  .nw-menu > summary::-webkit-details-marker { display: none; }
  .nw-menu[open] > summary { background: var(--brand-soft); border-color: var(--link); color: var(--link); }
  .nw-menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; min-height: calc(100vh - var(--space-16) - var(--space-4)); padding: var(--space-4); background: var(--surface-raised); border-top: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .nw-menu-panel nav { display: flex; flex-direction: column; }
  .nw-menu-panel a { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font: var(--text-button); letter-spacing: .01em; color: var(--ink); text-decoration: none; transition: color .15s ease-out; }
  .nw-menu-panel a:hover { color: var(--link); }
  .nw-menu-panel a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
}

/* Anfrageformular unter dem ContactCta (TextField-README): Felder
   untereinander mit space-4, Abholort und Zielort ab 720 px nebeneinander. */
.nw-form { display: grid; gap: var(--space-4); max-width: var(--content-max); margin-top: var(--space-8); }
.nw-form-route { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .nw-form-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Bestaetigung nach dem Absenden. Der Relay im Homelab leitet auf
   /#gesendet (contact.success_url); :target zeigt die Zeile ohne Skript. */
.nw-sent { display: none; }
.nw-sent:target { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--success-soft); color: var(--success); }

/* Honeypot fuer Formular-Bots: fuer Menschen und Screenreader unsichtbar. */
.nw-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Unterseiten (Impressum, Datenschutz): Textblock in content-max. */
.nw-prose { max-width: var(--content-max); }
.nw-prose > .nw-h2 { margin-bottom: var(--space-8); }
.nw-prose > .nw-lead { margin-bottom: var(--space-8); }
.nw-prose h2 { margin: var(--space-8) 0 var(--space-3); color: var(--ink); }
.nw-prose p, .nw-prose ul { margin: 0 0 var(--space-4); color: var(--ink); }
.nw-prose ul { padding-left: var(--space-6); }
.nw-prose a { color: var(--link); text-underline-offset: var(--space-1); }
.nw-prose a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .nw-menu-panel a { transition: none !important; }
}