/* Arrowtrade-Website — Designsprache: Felix (Basis) + V08 Swiss Grid (Kennzahlen, Nummerierung, Orange-Disziplin) */

/* ---------- Schriften, selbst ausgeliefert ----------
   Bewusst lokal statt von api.fontshare.com und fonts.googleapis.com: sonst
   uebermittelt jeder Seitenaufruf die IP des Besuchers an Dritte in den USA,
   was die Datenschutzerklaerung ausdruecklich ausschliesst. Nebeneffekt: zwei
   render-blockierende Anfragen an fremde Hosts entfallen.

   Die Pfade sind relativ zu dieser Datei, nicht zur aufrufenden Seite. Sie
   stimmen deshalb auf allen Verzeichnisebenen ohne Sonderfall.

   Lizenzen: Clash Display steht unter der ITF Free Font License, Urbanist
   unter der SIL Open Font License. Beide erlauben das Selbsthosten. */

@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Urbanist ist eine Variable Font: eine Datei deckt den gesamten Bereich
   100 bis 900 ab. Dadurch stimmen auch die 700er und 800er Schnitte, die
   vorher auf den naechstbesten Schnitt zurueckgefallen sind. */
@font-face {
  font-family: "Urbanist";
  src: url("fonts/urbanist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Urbanist";
  src: url("fonts/urbanist-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --orange: #FF893E;
  --orange-600: #E5732B;
  --orange-tief: #B85417;
  --orange-300: #FFB27E;
  --orange-100: #FFE4D2;
  --maroon: #AA5253;
  --warmgrau: #83847E;
  --ink: #231F20;
  --white: #FFFFFF;
  --paper: #FBF9F7;
  --paper-2: #F3F0EC;
  --linie: #E7E4DF;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .15s; --t-base: .25s;
  --font-display: "Clash Display", "Urbanist", system-ui, sans-serif;
  --font-body: "Urbanist", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --breite: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  counter-reset: sek;
}

/* Feines Vertikalraster im Hintergrund (Felix) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(35,31,32,.02) 1px, transparent 1px);
  background-size: 8.333% 100%;
}
@media (max-width: 899px) {
  body::before { display: none; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.8vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.18rem; font-weight: 600; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--orange-600); text-decoration: none; }
a:hover { color: var(--ink); }
main p a, main li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--orange-600); outline-offset: 3px; border-radius: var(--r-sm); }

.skip { position: absolute; left: -9999px; top: var(--s-3); background: var(--ink); color: var(--white); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); z-index: 100; }
.skip:focus { left: var(--s-3); color: var(--white); }

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding-inline: clamp(20px, 4vw, 36px); }

.band { padding-block: var(--s-8); border-bottom: 1px solid var(--linie); }
.band--paper2 { background: var(--paper-2); }
.band--ink { background: var(--ink); color: var(--paper); border-bottom: 0; }
.band--tight { padding-block: var(--s-7); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--white); }
.band--ink a { color: var(--orange-300); }
.band--ink a:hover { color: var(--white); }

/* Seitenrhythmus: nummerierter Kicker (V08) → Headline → Lead */

.kicker {
  display: block;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-tief);
  margin: 0 0 var(--s-3);
}
.kicker::before {
  counter-increment: sek;
  content: counter(sek, decimal-leading-zero) " / ";
}
.band--ink .kicker { color: var(--orange-300); }

.lead { font-size: 1.16rem; color: #4A4648; max-width: 62ch; margin-top: var(--s-4); }
.band--ink .lead { color: #CFCAC6; }
.kopf { max-width: 70ch; margin-bottom: var(--s-6); }
.kopf h2 { max-width: 28ch; }
.nowrap { white-space: nowrap; }

/* ---------- Kopfzeile (Felix) ---------- */

.kopfzeile {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,249,247,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopfzeile .wrap { display: flex; align-items: center; gap: 28px; min-height: 70px; }
.kopfzeile img { height: 25px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); margin-left: auto; }
.nav a { color: #4A4648; font-weight: 600; font-size: 14px; padding: 6px 0; }
.nav a:hover { color: var(--ink); }
.kopfzeile .kontakt-cta { padding: 10px 20px; }

/* ---------- Schaltflächen ---------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 13px var(--s-5);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primaer { background: var(--orange); color: var(--ink); }
.btn--primaer:hover { background: var(--orange-600); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.band--ink .btn--ghost { color: var(--paper); border-color: rgba(251,249,247,.45); }
.band--ink .btn--ghost:hover { background: var(--paper); color: var(--ink); }

/* Ohne diese zwei Zeilen faerbt der Kontextselektor .band--ink a (weiter oben)
   auch den Primaerbutton um, weil er spezifischer ist als .btn--primaer.
   Der Text wuerde dann hellorange auf orange stehen, also praktisch unsichtbar.
   Schwarz auf Orange ergibt 7:1, im Hover 5,5:1. Beides ueber WCAG AA.
   Die Rueckmeldung beim Zeigen kommt aus dem dunkleren Hintergrund, nicht
   aus der Schriftfarbe: Weiss auf Orange laege bei 3:1 und faellt durch. */
.band--ink .btn--primaer { color: var(--ink); }
.band--ink .btn--primaer:hover { color: var(--ink); }
.btn-reihe { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ---------- Hero ---------- */

.hero { padding-block: var(--s-8); border-bottom: 1px solid var(--ink); }
.hero .claim {
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 600;
  letter-spacing: .04em;
  color: var(--maroon);
  margin: 0 0 var(--s-4);
}
.hero h1 { max-width: 28ch; }
.hero .lead { font-size: 1.24rem; max-width: 58ch; }

/* ---------- Kennzahlen (V08) ---------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5) var(--s-5);
}
.zahl { border-left: 1px solid var(--linie); padding-left: var(--s-5); }
.zahl:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 699px) {
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .zahl { border-left: 0; padding-left: 0; }
}
.zahl b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.zahl span {
  display: block; margin-top: var(--s-2);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--warmgrau);
}
.band--ink .zahl { border-left-color: #453F40; }

/* ---------- Karten ---------- */

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: var(--s-5); }

.karte {
  background: var(--white);
  border: 1px solid var(--linie);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-5) var(--s-4);
  display: flex; flex-direction: column;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.karte:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(35,31,32,.06), 0 12px 28px rgba(35,31,32,.07); }
.karte h3 { margin-bottom: var(--s-3); padding-top: var(--s-3); border-top: 2px solid var(--ink); }
.karte p { color: #5c5b57; font-size: .95rem; }
.karte .mehr { margin-top: auto; padding-top: var(--s-4); font-weight: 700; font-size: .92rem; }
.karte .preis { font-weight: 800; color: var(--orange-tief); font-size: .95rem; margin-top: var(--s-3); }
.band--ink .karte { background: #2E292A; border-color: #453F40; }
.band--ink .karte h3 { border-top-color: var(--paper); }
.band--ink .karte p { color: #CFCAC6; }

/* ---------- Ablauf ---------- */

.ablauf { counter-reset: schritt; display: grid; gap: var(--s-5); }
.schritt {
  counter-increment: schritt;
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s-5);
  align-items: start;
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink);
}
.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600;
  color: var(--orange-tief);
  line-height: 1.2;
}
.schritt h3 { margin-bottom: var(--s-2); }
.schritt p { color: #4A4648; }

/* ---------- Artefakte ---------- */

.artefakte { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.artefakt {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: #2E292A; border: 1px solid #453F40; border-radius: var(--r-md);
}
.artefakt code { font-family: var(--font-mono); font-size: .95rem; color: var(--orange-300); }
.artefakt span { font-size: .92rem; color: #CFCAC6; }

/* ---------- Callout ---------- */

.callout {
  border-left: 3px solid var(--orange);
  background: var(--orange-100);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink); font-size: .98rem;
}

/* ---------- Produktzeile ---------- */

.produkt { display: grid; gap: var(--s-4); }
.produkt .marke { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; }

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

.fuss { background: var(--ink); color: #CFCAC6; padding-block: var(--s-8) var(--s-6); font-size: .95rem; }
.fuss a { color: #CFCAC6; }
.fuss a:hover { color: var(--orange-300); }
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-6); margin-bottom: var(--s-7); }
.fuss h4 { font-family: var(--font-body); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--warmgrau); margin: 0 0 var(--s-3); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.fuss-unten { border-top: 1px solid #453F40; padding-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; font-size: .88rem; color: var(--warmgrau); }

/* ---------- Bausteine Unterseiten ---------- */

.brotkrume { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--warmgrau); padding-top: var(--s-5); }
.brotkrume a { color: var(--warmgrau); }
.brotkrume a:hover { color: var(--orange-600); }
.brotkrume span { margin-inline: var(--s-2); }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.liste li { position: relative; padding-left: var(--s-5); color: #4A4648; }
.liste li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 8px; height: 10px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.band--ink .liste li { color: #CFCAC6; }

.problem { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-6) var(--s-7); }
.problem h3 { padding-top: var(--s-4); border-top: 2px solid var(--ink); margin-bottom: var(--s-3); }
.problem p { color: #5c5b57; font-size: .96rem; }
.band--ink .problem h3 { border-top-color: var(--paper); }

.preisblock { background: var(--white); border: 1px solid var(--linie); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); }
.preiszeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--linie); }
.preiszeile:last-of-type { border-bottom: 0; }
.preiszeile b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; white-space: nowrap; color: var(--orange-tief); }
.preiszeile span { color: #4A4648; }
.preiszeile small { display: block; width: 100%; font-size: .85rem; color: var(--warmgrau); margin-top: -6px; }

.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--s-5) var(--s-6) var(--s-5) 0;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: var(--s-2); top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--orange-tief);
  border-bottom: 2px solid var(--orange-tief);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 var(--s-7) var(--s-5) 0; color: #4A4648; max-width: 68ch; }

.person { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-6); align-items: start; padding-block: var(--s-6); border-top: 1px solid var(--ink); }
.person img { width: 100%; height: auto; border-radius: var(--r-md); display: block; }
.person h3 { margin-bottom: 2px; }
.person .rolle { color: var(--orange-tief); font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s-3); }
.person p { color: #4A4648; max-width: 62ch; }
.person a { font-weight: 700; font-size: .95rem; }
@media (max-width: 620px) { .person { grid-template-columns: 1fr; } .person img { max-width: 240px; } }

.formular { display: grid; gap: var(--s-4); max-width: 560px; }
.feld { display: grid; gap: var(--s-1); }
.feld label { font-weight: 700; font-size: .92rem; }
.feld input, .feld textarea {
  font-family: var(--font-body); font-size: 1rem;
  padding: 12px var(--s-4);
  border: 1px solid var(--linie); border-radius: var(--r-md);
  background: var(--white); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease);
}
.feld input:focus, .feld textarea:focus { border-color: var(--orange-600); outline: none; }
.feld textarea { min-height: 140px; resize: vertical; }
.einwilligung { display: flex; gap: var(--s-3); align-items: start; font-size: .92rem; color: #4A4648; }
.einwilligung input { margin-top: 4px; }
.pflicht { color: var(--warmgrau); font-size: .85rem; }

/* Buchungswidget: nur die Platzierung auf der Seite. Das Widget bringt seine
   eigenen Styles mit und liest die Markenwerte aus :root. Der Ausweichtext
   steht im Light DOM und verschwindet von selbst, sobald das Widget lädt. */
.buchung { max-width: 760px; }
.buchung-ausweich { margin: 0; color: #4A4648; }

.datenliste { display: grid; gap: 0; max-width: 620px; margin: 0; }
.datenzeile { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--linie); font-size: .98rem; }
.datenzeile dt { color: var(--warmgrau); margin: 0; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; padding-top: 3px; }
.datenzeile dd { margin: 0; }
@media (max-width: 520px) { .datenzeile { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Live-Mitschnitt (Startseite) ---------- */

.mitschnitt { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s-6); margin-top: var(--s-7); }
.terminal { background: #1A1718; border: 1px solid #453F40; border-radius: var(--r-lg); overflow: hidden; min-width: 0; }
.terminal-kopf { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: #231F20; border-bottom: 1px solid #453F40; }
.terminal-titel { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--warmgrau); }
.terminal-status { margin-left: auto; display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: #6FBF8B; }
.terminal-status .punkt { width: 6px; height: 6px; border-radius: 50%; background: #6FBF8B; }
.terminal-status[hidden], .terminal-replay[hidden] { display: none; }
.terminal-replay { margin-left: auto; background: transparent; border: 1px solid #453F40; border-radius: var(--r-sm); color: var(--warmgrau); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; padding: 5px 10px; cursor: pointer; }
.terminal-replay:hover { color: var(--white); border-color: var(--warmgrau); }
.terminal-body { padding: var(--s-4); min-height: 348px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85; color: #EDE9E6; }
.terminal-zeile { display: flex; gap: 10px; align-items: baseline; }
.terminal-zeile .zeit { color: #5C5758; flex: none; }
.terminal-zeile .text { flex: 1; min-width: 0; white-space: pre-wrap; }
.terminal-zeile .ms { color: #6FBF8B; flex: none; }
.terminal-fuss { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #453F40; color: var(--warmgrau); }
.mitschnitt h3 { color: var(--white); font-size: 1.35rem; }
.mitschnitt .erklaerung { color: #CFCAC6; margin-top: var(--s-4); }

.latenz { margin-top: var(--s-6); }
.latenz-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--warmgrau); }
.latenz-zeile b { color: var(--orange-300); font-weight: 400; }
.latenz-balken { height: 10px; background: #2E292A; border-radius: 5px; overflow: hidden; margin-top: 9px; }
.latenz-balken + .latenz-zeile { margin-top: var(--s-5); }
.latenz-balken span { display: block; height: 100%; width: 0; border-radius: 5px; background: #5C5758; transition: width 1.2s var(--ease); }
.latenz-balken span.orange { background: var(--orange); }
.latenz-skala { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: #5C5758; margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid #453F40; }

/* ---------- Nachweise (Startseite) ---------- */

.nachweise { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: var(--s-5); margin-bottom: var(--s-6); }
.nachweise .endpunkte { margin-top: auto; padding-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.nachweise .endpunkte code { font-family: var(--font-mono); font-size: .88rem; color: var(--orange-300); }

/* ---------- Vergleich: Behaupten vs. Belegen ---------- */

.vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); }
.vergleich-karte { border-radius: var(--r-lg); padding: var(--s-6); }
.vergleich-karte--aussage { background: var(--paper-2); border: 1px solid var(--linie); }
.vergleich-karte--beleg { background: var(--white); border: 1.5px solid var(--ink); }
.vergleich-titel { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--warmgrau); margin-bottom: var(--s-4); }
.vergleich-karte--beleg .vergleich-titel { color: var(--orange-600); }
.vergleich ul { list-style: none; margin: 0; padding: 0; }
.vergleich li { padding: var(--s-4) 0; border-bottom: 1px solid var(--linie); font-size: .97rem; line-height: 1.55; }
.vergleich li:first-child { padding-top: 0; }
.vergleich li:last-child { border-bottom: 0; padding-bottom: 0; }
.vergleich-karte--aussage li { color: #6E6A6B; }
.vergleich-karte--beleg li { color: var(--ink); }
.vergleich code { font-family: var(--font-mono); font-size: .88em; }

/* ---------- Klein ---------- */

/* ---------- Menueknopf ----------
   Auf Desktopbreite gibt es ihn nicht, dort steht die Navigation ohnehin
   waagerecht in der Kopfzeile. */

.menue-knopf {
  display: none;
  align-items: center; justify-content: center;
  /* 44px ist die uebliche Mindestgroesse fuer eine Fingerzielflaeche. */
  width: 44px; height: 44px; padding: 0;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}
.menue-knopf:hover { border-color: var(--ink); }

/* Drei Balken: der aeussere und der innere aus den Pseudoelementen, der
   mittlere als Verlauf im Hintergrund des Elements selbst.

   Die Masse sind nicht beliebig gewaehlt. Der Kasten ist 18px hoch, die Balken
   sitzen bei 0, 8 und 16, der Abstand betraegt also 8px. Bei den ueblichen
   Skalierungen (100, 125, 150, 200 Prozent) ergibt das jedes Mal ganze
   Geraetepixel, alle drei Balken landen auf derselben Phase im Pixelraster und
   werden gleich scharf gezeichnet. Mit 6px Abstand war das nicht so: dort fiel
   der mittlere Balken auf eine halbe Pixelzeile und wirkte dicker als die
   beiden anderen. Wer die Groesse aendert, sollte den Abstand bei einem
   Vielfachen von 4px belassen. */
.menue-balken, .menue-balken::before, .menue-balken::after {
  display: block; width: 19px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t-fast) var(--ease);
}
.menue-balken { position: relative; }
.menue-balken::before, .menue-balken::after { content: ""; position: absolute; left: 0; }
.menue-balken::before { top: -8px; }
.menue-balken::after { top: 8px; }

.kopfzeile[data-menue="auf"] .menue-balken { background: transparent; }
.kopfzeile[data-menue="auf"] .menue-balken::before { transform: translateY(8px) rotate(45deg); }
.kopfzeile[data-menue="auf"] .menue-balken::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 780px) {
  .band { padding-block: var(--s-7); }
  .hero { padding-block: var(--s-7); }

  /* Die Kopfzeile darf umbrechen, damit die Navigation eine eigene Zeile
     unter Logo, Menueknopf und Kontakt bekommt. */
  .kopfzeile .wrap { flex-wrap: wrap; gap: 0 14px; padding-block: 11px; min-height: 0; }
  .kopfzeile .kontakt-cta { order: 2; padding: 9px 16px; font-size: .88rem; }

  /* Ohne JavaScript bleibt es hierbei: die Navigation steht gestapelt und ist
     vollstaendig bedienbar. Das ist der Ausgangszustand, nicht der Notfall. */
  .nav {
    order: 3; flex-basis: 100%; margin: 10px 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--linie);
  }
  .nav a { font-size: 1rem; padding: 13px 2px; border-bottom: 1px solid var(--linie); }
  .nav a:last-child { border-bottom: 0; }

  /* Erst mit Skript wird daraus ein Klappmenue. */
  .js .menue-knopf { display: inline-flex; order: 1; }
  .js .kopfzeile:not([data-menue="auf"]) .nav { display: none; }
}

/* Rueckmeldung des Kontaktformulars. Wird vom Skript eingeblendet und ist
   ausserdem eine Live-Region, damit Screenreader sie ansagen. */
.formular-status {
  margin: 0;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border-left: 3px solid currentColor;
  font-size: .95rem;
}
.formular-status[data-art="gut"] { color: var(--orange-tief); background: var(--orange-100); }
.formular-status[data-art="fehler"] { color: var(--maroon); background: #F7E9E9; }

/* ---------- Einblenden beim Scrollen ----------
   Scroll-getrieben und ohne eine Zeile JavaScript. Wichtig ist die Bauweise,
   nicht der Effekt:

   Der Grundzustand ist "fertig und sichtbar". Die Animation kommt
   ausschliesslich innerhalb des @supports-Blocks dazu. Der uebliche Weg mit
   opacity:0 im Stylesheet und einem IntersectionObserver, der es wieder
   einblendet, macht den Inhalt dauerhaft unsichtbar, sobald das Skript
   ausfaellt, und KI-Crawler fuehren haeufig gar kein JavaScript aus. Hier kann
   das nicht passieren: faellt die Unterstuetzung weg, steht schlicht alles da.

   Bewegt werden nur opacity und transform. Beide laufen auf dem Compositor,
   also ohne Layout und ohne Repaint. Der CLS-Wert bleibt dadurch bei 0.

   Der Hero ist bewusst ausgenommen. Die h1 ist das LCP-Element, und eine
   Einblendung darauf verschiebt den LCP-Zeitpunkt messbar nach hinten. */

@keyframes einblenden {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band .kopf,
    .karte, .zahl, .person, .produkt, .schritt, .vergleich-karte, .artefakt {
      animation: einblenden linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 65%;
    }

    /* Versatz statt Gleichzeitigkeit. Karten einer Reihe treten zusammen in den
       Viewport ein; ohne verschobene Bereiche wirkt das wie ein Lichtschalter.
       14px Weg statt der ueblichen 40: bei einem Rasterlayout wirkt viel
       Bewegung billig. */
    .karte:nth-child(2), .zahl:nth-child(2), .person:nth-child(2),
    .produkt:nth-child(2), .schritt:nth-child(2) { animation-range: entry 9% entry 69%; }

    .karte:nth-child(3), .zahl:nth-child(3), .person:nth-child(3),
    .produkt:nth-child(3), .schritt:nth-child(3) { animation-range: entry 13% entry 73%; }

    .karte:nth-child(4), .zahl:nth-child(4), .person:nth-child(4),
    .schritt:nth-child(4) { animation-range: entry 17% entry 77%; }

    .karte:nth-child(n+5), .person:nth-child(n+5) { animation-range: entry 21% entry 81%; }
  }
}

/* ---------- Seitenwechsel ----------
   Drei Zeilen fuer einen weichen Uebergang zwischen den 14 Seiten. Die
   Kopfzeile bekommt einen eigenen Namen und bleibt dadurch stehen, waehrend
   der Inhalt wechselt. Wo der Browser das nicht kann, passiert ein ganz
   normaler Seitenwechsel: kein Fallback noetig, kein Risiko. */

@view-transition { navigation: auto; }

.kopfzeile { view-transition-name: kopfzeile; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  /* Seitenwechsel ebenfalls ruhigstellen. Die Regel oben greift hier nicht,
     weil die Uebergangs-Pseudoelemente ausserhalb des Dokumentbaums liegen. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}