/* ==========================================================================
   Malhi Express - Grundlage: Reset, Design-Tokens, Typografie, Utilities

   Die Marken-Farbwerte stammen aus den Pixeln von assets/Logo.jpeg
   (ermittelt mit `python3 tools/imgtool.py info`):
   Navy #0A1C34, Orange #FC6E00.
   ========================================================================== */

/* --------------------------------------------------------------- Schrift --
 * Inter als Variable Font, Latin-Subset, selbst gehostet. Kein Request an
 * eine fremde CDN - das haelt die Datenschutzerklaerung kurz.
 */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

:root {
  /* --- Marke ----------------------------------------------------------- */
  --mx-navy-900: #0a1628;   /* Footer, Hero-Overlay, Favicon-Kachel */
  --mx-navy-800: #12263f;   /* Header, dunkle Abschnitte */
  --mx-navy-700: #1b3556;
  --mx-navy-600: #24405f;   /* Karten auf dunklem Grund */
  --mx-orange:   #fc6e00;   /* Akzentflaechen, Icons, Text auf Navy (6.5:1) */
  --mx-orange-300: #ffa24d; /* helle Akzente auf Navy */
  --mx-orange-700: #c2410c; /* Orange als TEXT auf Weiss (5.2:1) */

  /* --- Flaechen und Text ----------------------------------------------- */
  --mx-ink:    #14202e;
  --mx-muted:  #55677c;     /* 5.7:1 auf Weiss */
  --mx-snow:   #f5f8fc;     /* Abschnittsflaeche */
  --mx-line:   #dfe6ef;
  --mx-white:  #ffffff;
  --mx-on-navy:      #eef3f9;
  --mx-on-navy-mute: #a9bbd0;  /* 9.3:1 auf --mx-navy-900 */

  /* --- Abstaende ------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* --- Form ------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(10 22 40 / 6%), 0 2px 8px rgb(10 22 40 / 6%);
  --shadow-md: 0 4px 14px rgb(10 22 40 / 8%), 0 14px 36px rgb(10 22 40 / 10%);
  --shadow-lg: 0 8px 24px rgb(10 22 40 / 12%), 0 28px 64px rgb(10 22 40 / 16%);
  --shadow-orange: 0 10px 28px rgb(252 110 0 / 34%);

  --container: 1180px;
  --measure: 68ch;

  /* --- Bewegung -------------------------------------------------------- */
  /* Eine gemeinsame Kurve fuer alles - das haelt die Seite ruhig. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* --- Schrift --------------------------------------------------------- */
  --font-body: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --fs-xl:   clamp(1.25rem, 0.7vw + 1.1rem, 1.55rem);
  --fs-2xl:  clamp(1.55rem, 1.4vw + 1.25rem, 2.15rem);
  --fs-3xl:  clamp(1.95rem, 2.4vw + 1.4rem, 2.95rem);
  --fs-4xl:  clamp(2.35rem, 3.8vw + 1.4rem, 4.05rem);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;   /* damit Anker nicht unter dem Header landen */
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--mx-ink);
  background: var(--mx-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;           /* faengt die versetzten Deko-Elemente ab */
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; }

ul, ol { padding: 0; }

/* ==========================================================================
   Typografie
   ========================================================================== */

h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--mx-navy-900);
  text-wrap: balance;
  /* Deutsche Komposita wie "Verbraucherstreitbeilegung" sind breiter als ein
     Telefondisplay. Ohne Trennung schiebt sich die Seite quer. `hyphens`
     greift nur, wenn ein Wort sonst nicht passt - dafuer steht lang="de"
     am <html>. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-lg); letter-spacing: -0.01em; }

p, li, address, dd { text-wrap: pretty; overflow-wrap: break-word; }

a {
  color: var(--mx-orange-700);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

a:hover { color: var(--mx-navy-800); }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--mx-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--mx-orange);
  color: var(--mx-navy-900);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

@media (max-width: 480px) {
  .container { width: min(100% - 2rem, var(--container)); }
}

.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section--snow { background: var(--mx-snow); }

/* Dunkler Abschnitt: setzt die Textfarben komplett um, damit einzelne
   Bausteine nicht jedes Mal eine Sonderregel brauchen. */
.section--navy {
  background: var(--mx-navy-900);
  color: var(--mx-on-navy);
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--mx-white); }

.section--navy .lead,
.section--navy .section-head p { color: var(--mx-on-navy-mute); }

.section--navy a { color: var(--mx-orange-300); }
.section--navy a:hover { color: var(--mx-white); }

.section-head {
  max-width: var(--measure);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--mx-muted);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--mx-muted);
  max-width: var(--measure);
}

/* Kleines Label ueber der Ueberschrift - gibt jedem Abschnitt einen Anker. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mx-orange-700);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--mx-orange);
  border-radius: 2px;
}

.section--navy .eyebrow { color: var(--mx-orange-300); }

.section-head--center .eyebrow { justify-content: center; }

/* --------------------------------------------------------------- Buttons --*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Schrift dunkelblau, nicht weiss: Weiss auf diesem Orange erreicht nur
   2.85:1 und verfehlt WCAG AA deutlich - und das beim wichtigsten Element
   der Seite. Dunkelblau kommt auf 6.4:1, die Markenfarbe bleibt unangetastet,
   und die Kombination steckt ohnehin schon im Logo. */
.btn--primary {
  background: var(--mx-orange);
  color: var(--mx-navy-900);
  box-shadow: var(--shadow-orange);
}

.btn--primary:hover {
  background: #ff8526;
  color: var(--mx-navy-900);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgb(252 110 0 / 42%);
}

.btn--ghost {
  border-color: rgb(255 255 255 / 45%);
  color: var(--mx-white);
  background: rgb(255 255 255 / 6%);
  backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  border-color: var(--mx-white);
  background: rgb(255 255 255 / 14%);
  color: var(--mx-white);
  transform: translateY(-2px);
}

.btn--outline {
  border-color: var(--mx-line);
  color: var(--mx-navy-800);
  background: var(--mx-white);
}

.btn--outline:hover {
  border-color: var(--mx-navy-800);
  color: var(--mx-navy-900);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Auf sehr schmalen Geraeten duerfen lange Beschriftungen umbrechen.
   "Passt Ihre Sendung? Fragen Sie nach" ist sonst breiter als ein iPhone SE
   und schiebt die ganze Seite quer. */
@media (max-width: 520px) {
  .btn { white-space: normal; }
}

/* Kompakte Fassung fuer zwei Knoepfe nebeneinander in einer Karte. */
.btn--sm {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font-size: var(--fs-xs);
}

.btn:active { transform: translateY(0); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* ------------------------------------------------------------- Skip-Link --*/

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--mx-orange);
  color: var(--mx-navy-900);       /* siehe .btn--primary */
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--sp-4);
  color: var(--mx-navy-900);
}

/* ------------------------------------------------------ Nur fuer Screenreader */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------- Offene Punkte im Text --
 * Platzhalter fuer Angaben, die der Kunde noch liefern muss. Absichtlich
 * grell: so faellt beim Durchsehen sofort auf, was noch fehlt.
 */
.todo {
  background: #fff3cd;
  border-bottom: 2px solid #e0a800;
  color: #6b4e00;
  padding: 0 0.25em;
  font-weight: 600;
}