/* ==========================================================================
   Pölzl Fire Campus – Basis
   Grundlayout, Typografie, Buttons, Navigation, Fußzeile, Prototyp-Leiste
   ========================================================================== */

/* Inter selbst gehostet (v4.1, SIL OFL 1.1). Ohne optische Größenanpassung,
   damit Laufweite und Zeilenfall der geprüften Google-Fonts-Fassung gleichen.
   Zwei Dateien (#701): InterVariable-latein.woff2 (131 statt 352 kB) hat die lateinischen Zeichen aller Sprachen der Seite
   und die übliche Typografie (Satzzeichen, €, Pfeile, Mathematik, Formen, ✓), die Achse opsz fest auf 14 — denselben Wert,
   den font-optical-sizing: none ohnehin nimmt; Umrisse und Breiten wie im Original (geprüft 15.10.2026). Für jedes andere
   Zeichen lädt der Browser die vollständige Datei, also fehlt nie eines. Erzeugt mit fontTools, werkzeuge/schrift/. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../schrift/InterVariable-latein.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-024F, U+0300-036F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2200-22FF, U+25A0-25FF, U+2713;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../schrift/InterVariable.woff2") format("woff2");
  unicode-range: U+0000, U+0250-0254, U+0256-027B, U+027E-0284, U+0286-0290, U+0292-02A4, U+02A6-02FF, U+0374-0376, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03D7, U+03DC-03DD, U+03F0-03F6, U+03F9-03FA, U+03FC-0479, U+0480-049D, U+04A0-04FF, U+052F, U+0E3F, U+1D00, U+1D0D, U+1D1B, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1E9B, U+1E9D-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+20DB-20DE, U+20E8, U+20F0, U+2150-217F, U+2183-2186, U+2189, U+2303-2305, U+2318, U+2325-2327, U+232B, U+2380, U+2387, U+238B, U+23CE-23CF, U+2423, U+2460-2468, U+24B6-24CF, U+24EA, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+266A-266B, U+26A0, U+2717, U+2756, U+2764, U+2780-2788, U+27EF, U+27F5-27FA, U+2913, U+2A38, U+2B06, U+2B12-2B13, U+2B1C, U+2B24, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+A69F, U+A7FF, U+A92E, U+E000, U+E002-E05E, U+E06A-E0BD, U+E0C8-E0CC, U+E0DC-E0E6, U+E0F3-E0F5, U+E106, U+E109-E10A, U+E10C-E10F, U+E111-E113, U+E117-E118, U+E121-E122, U+E124, U+E12A-E15E, U+E163, U+E1C3, U+E1D2-E1DF, U+E1E1-E2DC, U+EE01-EE07, U+EE09-EE0A, U+EE0C-EE12, U+EE14, U+EE17, U+EE1D-EE45, U+EE47-EE84, U+EE87-EED6, U+EED8-EEE1, U+F6C3, U+FEFF, U+1F12F-1F149, U+1F16A-1F16B, U+1F850, U+1F852;
}
html { font-optical-sizing: none; }

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--linen);
  padding-bottom: var(--proto-h);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
/* Schmale Spalte, deren Karten am Desktop bis an die 820 px reichen (Test, Ergebnis). Ist der Bildschirm schmaler,
   bekommt sie den Seitenrand wie jede Seite — sonst stoßen Text und Karten am Handy an den Rand (freigegeben 28.09.2026). */
.wrap-narrow.randlos { padding-inline: 0; }
@media (max-width: 884px) {
  .wrap-narrow.randlos { padding-inline: var(--gutter); }
}

/* ── Typografie ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); font-weight: 800; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; font-weight: 700; }
p  { line-height: var(--lh-normal); }
a  { color: inherit; }

.display { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
.display .grn { color: var(--campus); }
.display .org { color: var(--blaze); }

.lead { font-size: var(--fs-lead); color: var(--ink-70); max-width: var(--textmax); }
/* Markenhandbuch Seite 9: 65 bis 75 Zeichen je Zeile. Ab etwa 80 verliert
   man beim Zeilenwechsel die Zeile. Gilt für Fließtext, nicht für
   Tabellen, Beschriftungen und Aufzählungen in Karten. */
.lead strong { color: var(--ink); font-weight: 700; }
.muted { color: var(--ink-45); }
.small { font-size: var(--fs-sm); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--campus); margin-bottom: var(--sp-4);
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: currentColor; flex-shrink: 0; }
.eyebrow.org { color: var(--blaze); }

.section-head { max-width: 640px; margin-bottom: var(--sp-6); }
.section-head p { font-size: var(--fs-body); color: var(--ink-70); max-width: var(--textmax); }
/* Zweite, leisere Abschnittsform. Neun Abschnitte, die alle gleich laut
   rufen, lesen sich lang – die tragenden bleiben groß, die zuarbeitenden
   werden ruhiger. */
.section-head.leise h2 { font-size: 24px; letter-spacing: -0.02em; }
.section-head.leise { margin-bottom: var(--sp-5); }
.section-head.leise .eyebrow { margin-bottom: var(--sp-2); }

section { padding: var(--sp-8) 0; }
.sec-white { background: var(--white); }
.sec-linen { background: var(--linen); }
.sec-mint  { background: var(--mint); }
.sec-ink   { background: var(--ink); color: var(--on-ink); }
.sec-ink h2, .sec-ink h3, .sec-ink h4 { color: var(--on-ink); }
.sec-ink p { color: var(--on-ink-70); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-family: inherit;
  font-size: var(--fs-sm); font-weight: 600;
  padding: 11px 22px; border-radius: var(--r);
  border: none; cursor: pointer; text-decoration: none; text-align: center;
  transition: background .15s, border-color .15s;
}
.btn-primary { background: var(--campus); color: var(--white); font-weight: 700; }
.btn-primary:hover { background: var(--campus-dark); }
.btn-orange { background: var(--blaze); color: var(--white); font-weight: 700; }
.btn-orange:hover { background: var(--blaze-dark); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--surface); }
.btn-ghost:hover { border-color: var(--ink-45); }
.btn-outline-w { background: transparent; color: var(--white); border: 1.5px solid var(--ink-line); }
.btn-outline-w:hover { border-color: #55556d; }
.btn-lg { padding: 15px 30px; font-size: 15px; }
.btn-sm { padding: 8px 14px; font-size: var(--fs-xs); }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Logo ───────────────────────────────────────────────────────────────── */
.logo { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.logo svg { width: 48px; height: 48px; display: block; flex-shrink: 0; }
.logo-name { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; }
.logo-name .fire { color: var(--campus); }
.logo-claim { font-size: 10.5px; color: var(--ink-45); letter-spacing: 0.03em; white-space: nowrap; }

/* ── Entwurfsbanner ─────────────────────────────────────────────────────── */
.draft-banner {
  background: var(--ink); color: var(--white);
  font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 9px 16px;
}
.draft-banner strong { color: var(--campus); font-weight: 700; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.site-nav { background: var(--white); border-bottom: 1px solid var(--surface); position: sticky; top: 0; z-index: 60; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
.nav-links { display: flex; gap: 18px; }  /* fünf Punkte seit #597: Wortmarke, Punkte und Knöpfe passen in die Breite des Inhalts */
.nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-70); text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); font-weight: 600; }
.nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.nav-tel { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-70); text-decoration: none; white-space: nowrap; margin-inline-end: 4px; }
.nav-tel svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nav-tel:hover { color: var(--ink); }
.nav-tel-mobil { display: none; }
.nav-links-mehr { display: none; }   /* nur im Menü für schmale Geräte */
.nav-burger { display: none; width: 40px; height: 40px; border: 1px solid var(--surface);
  border-radius: var(--r); background: var(--white); cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.nav-burger span { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .18s, opacity .18s; }
body.nav-offen .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-offen .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-offen .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Profilmenü (#192): angemeldet das Symbol statt Name, „Abmelden“, „Login“
   und „Kurs buchen“. Klappt unter dem Symbol auf, zur Endkante ausgerichtet. */
.profil { position: relative; }
/* Rund mit grünem Ring auf Mint (#353). */
.profil-knopf { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 2px solid var(--campus); border-radius: 50%; background: var(--mint); color: var(--ink);
  cursor: pointer; padding: 0; }
.profil-knopf:hover, .profil-knopf[aria-expanded="true"] { background: var(--mint-mid); }
.profil-knopf svg { width: 20px; height: 20px; }
.profil-menue { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 70;
  width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 32px));
  background: var(--white); border: 1px solid var(--surface); border-radius: var(--r);
  box-shadow: 0 12px 28px rgba(26,26,46,.10); padding: 6px 0; }
.profil-menue[hidden] { display: none; }
.profil-kopf { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 12px; }
.profil-kopf strong { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.profil-kopf span { font-size: 12.5px; color: var(--ink-45); overflow-wrap: anywhere; }
/* Die E-Mail läuft von links nach rechts (.ltr), steht aber an der Anfangskante der Seite wie der Name. */
.profil-kopf > * { align-self: flex-start; }
.profil-gruppe { display: flex; flex-direction: column; border-top: 1px solid var(--linen); padding: 6px 0; }
.profil-gruppe a { padding: 9px 16px; font-size: 14px; font-weight: 500; color: var(--ink-70); text-decoration: none; }
.profil-gruppe a:hover, .profil-gruppe a:focus-visible { background: var(--linen); color: var(--ink); }
.profil-gruppe a.is-active { color: var(--ink); font-weight: 600; }

/* ── Rahmen hinter der Anmeldung ────────────────────────────────────────
   Kursansicht, Dashboard und Kontoseiten sind die Anwendung, nicht die
   Verkaufsseite: schmale Kopfzeile, keine Verkaufsnavigation, einzeilige
   Fußzeile. */
.app-nav .nav-inner { height: 64px; }
.app-nav .logo-claim { display: none; }
.app-links { display: flex; gap: 26px; }
.app-links a { font-size: 14px; font-weight: 500; color: var(--ink-70); text-decoration: none; white-space: nowrap; }
.app-links a:hover { color: var(--ink); }
.app-links a.is-active { color: var(--ink); font-weight: 600; }
.app-footer { background: var(--white); border-top: 1px solid var(--surface); padding: 20px 0; margin-top: var(--sp-6); }
.app-footer-inner { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-45); }
.app-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.app-footer-links a { color: var(--ink-45); text-decoration: none; }
.app-footer-links a:hover { color: var(--ink); }

/* ── Fußzeile ───────────────────────────────────────────────────────────── */
.site-footer { background: #11111E; color: var(--white); padding: var(--sp-7) 0 var(--sp-5); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--sp-6); margin-bottom: var(--sp-6); }
.site-footer .logo { color: var(--white); }
.site-footer .logo-name { color: var(--white); }
.site-footer .logo-claim { color: var(--on-ink-45); }
.footer-desc { font-size: var(--fs-sm); color: #8A8A9A; line-height: var(--lh-relaxed); max-width: 270px; margin-top: var(--sp-3); }
.footer-col h5 { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-45); margin-bottom: var(--sp-3); }
.footer-col a { display: block; font-size: var(--fs-sm); color: #A9A9B8; text-decoration: none; margin-bottom: 9px; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: var(--sp-4); border-top: 1px solid #24243A; flex-wrap: wrap; }
.footer-bottom > * { min-width: 0; }
.footer-legal { font-size: var(--fs-xs); color: var(--on-ink-45); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.footer-legal a { color: #8A8A9A; text-decoration: none; }
.footer-legal a:hover { color: var(--white); }
.footer-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-parent { font-size: var(--fs-xs); color: var(--on-ink-45); }
.footer-parent a { color: #A9A9B8; text-decoration: none; }
/* Partner (#225): Logos weiß und klein, im Satz an Stelle der Namen. */
.footer-partner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: var(--sp-4);
  font-size: var(--fs-xs); color: var(--on-ink-45); }
.footer-partner a { display: inline-flex; align-items: center; color: #A9A9B8; text-decoration: none; transition: color .15s; }
.footer-partner a:hover, .footer-partner a:focus-visible { color: var(--white); }
.footer-partner-ph { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.footer-partner-ph .amp { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; }
.footer-partner-ph small { font-size: 11px; font-weight: 500; letter-spacing: 0; margin-inline-start: 2px; }
.footer-partner-innolab svg { width: 104px; height: 12.5px; }

/* ── Platzhalter-Markierung ─────────────────────────────────────────────── */
/* Kennzeichnet Inhalte, die von uns erfunden und noch zu bestätigen sind. */
.ph { border-bottom: 1px dotted var(--ink-25); cursor: help; }
body.show-ph .ph {
  background: #FFF3C4; border-bottom: 1px solid #E5B700;
  box-shadow: 0 0 0 2px #FFF3C4;
}
body.show-ph .ph-block { outline: 2px dashed #E5B700; outline-offset: 4px; }

/* ── Prototyp-Leiste ────────────────────────────────────────────────────── */
.proto-bar {
  position: fixed; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: 200;
  height: var(--proto-h); max-width: 100%;
  background: var(--ink); color: var(--white);
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; box-shadow: var(--shadow-bar);
  overflow-x: auto; overflow-y: hidden;
  /* verhindert, dass die Werkzeugleiste die Seitenbreite beeinflusst */
  contain: paint;
}
.proto-brand { font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--campus); white-space: nowrap; }
.proto-current { font-size: var(--fs-sm); font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto-tier { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; white-space: nowrap; }
.proto-spacer { flex: 1; }
.proto-btn {
  font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
  color: #B9B9C6; background: transparent;
  border: 1px solid var(--ink-line); border-radius: var(--r);
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
.proto-btn:hover { color: var(--white); border-color: #55556D; }
.proto-btn.on { background: var(--campus); border-color: var(--campus); color: var(--white); }
.proto-nav { display: flex; gap: 6px; }

/* Seitenübersicht */
.proto-panel {
  position: fixed; bottom: var(--proto-h); inset-inline-start: 0; inset-inline-end: 0; z-index: 199;
  background: var(--ink-2); border-top: 1px solid var(--ink-line);
  padding: var(--sp-4) 18px; display: none;
  max-height: 62vh; overflow-y: auto;
  box-shadow: var(--shadow-bar);
}
.proto-panel.open { display: block; }
.proto-groups { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); max-width: 1400px; margin: 0 auto; }
.proto-group h6 { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-45); margin-bottom: 9px; }
.proto-link {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); color: #B9B9C6; text-decoration: none;
  padding: 5px 8px; border-radius: var(--r); margin-bottom: 2px;
}
.proto-link:hover { background: rgba(255,255,255,.06); color: var(--white); }
.proto-link.is-current { background: var(--campus); color: var(--white); font-weight: 600; }
.proto-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-1 { background: var(--campus); }
.dot-2 { background: var(--ink-45); }
.dot-3 { background: transparent; border: 1px solid var(--on-ink-45); }
.proto-legend { max-width: 1400px; margin: var(--sp-4) auto 0; padding-top: var(--sp-3); border-top: 1px solid var(--ink-line); display: flex; gap: 20px; flex-wrap: wrap; font-size: 10.5px; color: var(--on-ink-45); }
.proto-legend span { display: flex; align-items: center; gap: 6px; }

/* ── Responsiv ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .proto-groups { grid-template-columns: repeat(3, 1fr); }
}
/* Ab hier passen die Punkte nicht mehr neben die Wortmarke. Sie wandern
   deshalb in ein Menü – ausblenden ohne Ersatz hieße, dass am Telefon nur
   die Fußzeile als Navigation bleibt. Mit „Kontakt“ als fünftem Punkt (#597)
   ab 1180 px statt 1120 px: darunter würde die Leiste breiter als der Inhalt. */
@media (max-width: 1180px) {
  .nav-burger { display: flex; }
  .nav-inner { justify-content: flex-start; gap: 12px; }
  .nav-inner .logo { margin-inline-end: auto; }
  .nav-links, .app-links {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    background: var(--white); border-bottom: 1px solid var(--surface);
    box-shadow: 0 12px 28px rgba(26,26,46,.10);
    flex-direction: column; gap: 0; padding: 8px 0 14px;
  }
  body.nav-offen .nav-links, body.nav-offen .app-links { display: flex; }
  .nav-links > a, .app-links > a, .nav-links-mehr a {
    padding: 13px var(--gutter); font-size: 15px; border-bottom: 1px solid var(--linen);
  }
  .nav-links-mehr { display: flex; flex-direction: column; }
  .nav-links-mehr a { color: var(--ink-45); font-size: 14px; }
  .nav-tel-mobil { display: block; padding: 14px var(--gutter) 4px; font-size: 15px; font-weight: 700;
    color: var(--ink); text-decoration: none; }
  .site-nav { position: sticky; }
  .nav-inner { position: relative; }
}

@media (max-width: 960px) {
  .nav-tel span { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .proto-current { display: none; }
  .proto-groups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .proto-brand, .proto-tier { display: none; }
  .proto-groups { grid-template-columns: 1fr; }
  .proto-btn { padding: 7px 10px; }

  /* Kopfzeile: Login und Telefonsymbol entfallen, Wortmarke kompakter –
     sonst passt der Haupt-CTA nicht. Beide stehen im Menü. */
  .nav-actions .btn-ghost { display: none; }
  .nav-tel { display: none; }
  .app-nav .nav-actions .btn-ghost { display: inline-flex; }
  .nav-inner { height: 64px; }
  .logo { gap: 9px; }
  .logo svg { width: 36px; height: 36px; }
  .logo-name { font-size: 16px; }
  .logo-claim { display: none; }

  /* Fußzeile einspaltig */
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .site-footer .logo-claim { display: block; }
}

/* Kleine Geräte ab 320 px */
@media (max-width: 420px) {
  .wrap, .wrap-narrow, .wrap-narrow.randlos { padding: 0 16px; }
  .logo { gap: 8px; }
  .logo svg { width: 32px; height: 32px; }
  .logo-name { font-size: 14.5px; }
  .nav-actions .btn { padding: 9px 14px; font-size: 12.5px; }
  .draft-banner { font-size: 10.5px; letter-spacing: 0.06em; }
  .nav-inner { gap: 10px; }
  .nav-burger { flex: 0 0 36px; width: 36px; height: 36px; }
}

/* Unter 360 px reicht der Platz nicht für Wortmarke, Menüknopf und Haupt-CTA
   nebeneinander. Die Bildmarke bleibt, der Schriftzug tritt zurück – der
   Aktionsknopf ist an dieser Stelle wichtiger. */
@media (max-width: 360px) {
  .site-nav .logo-name { display: none; }
  .nav-inner { gap: 8px; }
}

/* Zahlen, Preise und Kennungen bleiben in jeder Textrichtung von links nach rechts */
.ltr { direction: ltr; unicode-bidi: isolate; }