/* Gestaltung der Askune-Website (askune.ai) — greift nur unter `.site--askune`, der Klasse, die
   DataChrome aus dem Site-Namen bildet. Andere datengepflegte Kundenseiten bleiben unberuehrt.

   Seit dem 25.09.2026 nach dem Entwurf `Askune.ai/POC/new.html` (Michael: „baue mal nach new.html
   um"): Figtree, reines Weiss und Hellgrau als Flaechen, fette Ueberschriften ohne Serif, grosse
   Rundungen (Kacheln 32 px, Knoepfe und Felder als Pillen), Schatten nur am Chatfenster. Davor stand
   hier „Richtung B · Hell" (Serif, Mono-Etiketten) — Michael gefiel es nicht.

   Die FARBEN kommen aus dem SiteTheme (AskuneSeed.Theme) — hier stehen Formen und Masse. Die Masse
   sind die des Entwurfs bei 1440 px Breite (Rand 120, Inhalt 1200) und schrumpfen darunter mit. */

.site--askune {
  --askune-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --askune-hover: #2440E6;
  --askune-warn: #C2410C;
  --askune-rand: clamp(20px, 8.4vw, 120px);
  --askune-breite: 1200px;
  font-family: var(--askune-sans);
  background: var(--bg, #FFFFFF);
  color: var(--ink, #1D1D1F);
  -webkit-font-smoothing: antialiased;
}

/* BusinessOS setzt KEIN globales `box-sizing: border-box`. Ohne diese Zeile addierte sich der
   Seitenabstand zur vollen Breite — die Seite liefe in schmalen Fenstern seitlich heraus. */
.site--askune, .site--askune *, .site--askune *::before, .site--askune *::after { box-sizing: border-box; }
.site--askune a { color: inherit; }
/* ga-theme.css setzt GLOBAL h1–h4 auf Rubik (fuer Global Appartements). Ohne diese Zeile standen alle
   Ueberschriften ausser dem Aufmacher in Rubik — fetter und breiter als im Entwurf. */
.site--askune :is(h1, h2, h3, h4) { font-family: var(--askune-sans); }

/* ── Kopfzeile: Marke links, Rubriken in der Mitte, Konto rechts ──────────────────────────────── */
.site--askune .nsite-nav {
  min-height: 56px; padding: 0 var(--askune-rand);
  background: var(--bg, #FFFFFF); border-bottom: 1px solid var(--line, #E8E8ED); box-shadow: none;
}
.site--askune .nsite-brand { order: -1; flex: 1 1 0; gap: 8px; }
.site--askune .nsite-brand__logo { width: 22px; height: 22px; }
.site--askune .nsite-brand__name { font-family: var(--askune-sans); font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink, #1D1D1F); }
.site--askune .nsite-nav__links { flex: 3 1 auto; align-items: center; gap: 8px 36px; }
.site--askune .nsite-nav__links a {
  font-family: var(--askune-sans); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink-soft, #424245); text-decoration: none;
}
.site--askune .nsite-nav__links a:hover { color: var(--askune-hover); }
/* „Anmelden" und „Konto anlegen" rechts. Erkannt am ZIEL, nicht an der Position — die Reihenfolge
   der Links ist gepflegte Daten. `flex: 1` an „Anmelden" nimmt den Platz rechts ein, sodass die
   Rubriken in der Mitte stehen wie im Entwurf. */
.site--askune .nsite-nav__links a[href="/app"] { flex: 1 1 0; text-align: right; color: var(--ink, #1D1D1F); padding: 8px 0; }
.site--askune .nsite-nav__links a[href="/account/registrieren"] {
  margin-left: -30px; padding: 8px 16px; border-radius: 999px;
  background: var(--ink, #1D1D1F); color: #fff; font-weight: 500;
}
.site--askune .nsite-nav__links a[href="/account/registrieren"]:hover { background: var(--askune-hover); color: #fff; }
.site--askune .nsite-nav__burger { width: 40px; height: 40px; border: 1px solid var(--line-strong, #D2D2D7); border-radius: 99px; }

/* Breite Fenster: Raster statt Flex, damit die Rubriken wirklich in der Mitte stehen. Die Links
   stecken in EINEM <nav>; `display: contents` macht jeden zum eigenen Rasterfeld. „Anmelden" und
   „Konto anlegen" teilen sich das rechte Feld — die Pille rechtsbuendig, „Anmelden" um ihre Breite
   davor. Bis 900 px gilt das Klappmenue aus site-modern.css — dieselbe Grenze wie dort. Vorher
   begann das Raster hier schon bei 721 px, und zwischen 721 und 900 px standen Links UND
   Klappknopf gleichzeitig im Kopf (29.09.2026 beim vierten Menuepunkt aufgefallen). */
@media (min-width: 901px) {
  .site--askune .nsite-nav {
    /* Je Menuepunkt eine auto-Spalte (seit 29.09.2026 vier: + „Askune × Qlikeit") — sonst
       rutscht der letzte in eine zweite Zeile. */
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);
    align-items: center; column-gap: 36px;
  }
  .site--askune .nsite-nav__links { display: contents; }
  .site--askune .nsite-nav__switch { position: absolute; }
  .site--askune .nsite-nav__links a[href="/app"],
  .site--askune .nsite-nav__links a[href="/account/registrieren"] { grid-column: 6; grid-row: 1; justify-self: end; margin: 0; }
  .site--askune .nsite-nav__links a[href="/app"] { margin-right: 132px; }
}
@media (min-width: 901px) and (max-width: 1099px) {
  .site--askune .nsite-nav { column-gap: 20px; }
}
/* Aufgeklappt (bis 900 px): die Links in eine eigene Zeile UNTER Marke und Knopf. `flex: 3 1 auto`
   von oben hielt sie in derselben Zeile — die Marke wurde zusammengedrueckt und der Knopf lag auf ihr. */
@media (max-width: 900px) {
  .site--askune .nsite-nav__links { flex: 1 1 100%; }
}

/* ── Leiste unter dem Kopf (site.hinweisleiste) ──────────────────────────────────────────────── */
.site--askune .askune-leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
  min-height: 44px; padding: 10px var(--askune-rand);
  background: var(--bg-alt, #F5F5F7); color: var(--ink-soft, #424245); font-size: 14px; text-align: center;
}
.site--askune .askune-leiste a { color: var(--askune-hover); font-weight: 500; text-decoration: none; }
.site--askune .askune-leiste a:hover { text-decoration: underline; }

/* ── Kurztest-Feld (site.kurztest): Aufmacher und Schluss ─────────────────────────────────────── */
.site--askune .nsite-kurztest { background: var(--bg, #FFFFFF); color: var(--ink, #1D1D1F); text-align: center; scroll-margin-top: 24px; }
.site--askune .nsite-kurztest__inner { max-width: 1000px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.site--askune .nsite-kurztest--hero { padding: clamp(56px, 6.7vw, 96px) var(--askune-rand) 0; }
.site--askune .nsite-kurztest--accent { padding: clamp(80px, 9.7vw, 140px) var(--askune-rand); }

.site--askune .nsite-kurztest .nsite-kurztest__label {
  font-family: var(--askune-sans); font-size: clamp(17px, 1.5vw, 21px); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--askune-hover); opacity: 1;
}
.site--askune .nsite-kurztest .nsite-kurztest__h {
  margin: 14px 0 0; font-family: var(--askune-sans); font-weight: 700; color: var(--ink, #1D1D1F);
  font-size: clamp(44px, 6.1vw, 88px); line-height: 1.08; letter-spacing: -.005em;
}
.site--askune .nsite-kurztest--accent .nsite-kurztest__h { margin-top: 0; font-size: clamp(38px, 5vw, 72px); }
/* Der Aufmacher traegt seit dem 25.09.2026 eine ganze Frage („Wer empfiehlt Ihr Unternehmen, wenn …")
   — bei 88 px wurden das vier Zeilen. */
.site--askune .nsite-kurztest--hero .nsite-kurztest__h { font-size: clamp(38px, 5.2vw, 72px); max-width: 1000px; }
.site--askune .nsite-kurztest .nsite-kurztest__intro {
  margin: 24px 0 0; max-width: 760px; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.4;
  color: var(--muted, #6E6E73); opacity: 1;
}
.site--askune .nsite-kurztest--accent .nsite-kurztest__intro { margin-top: 20px; font-size: clamp(18px, 1.5vw, 22px); }

/* Das Formular als EINE Pille: Globus, Eingabe, Knopf. */
.site--askune .nsite-kurztest__form {
  width: min(620px, 100%); margin: 40px auto 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  padding: 6px 6px 6px 24px; border-radius: 999px;
  background: var(--bg-alt, #F5F5F7); border: 1px solid var(--line-strong, #D2D2D7); box-shadow: none;
}
.site--askune .nsite-kurztest--accent .nsite-kurztest__form { margin-top: 44px; }
.site--askune .nsite-kurztest__form:focus-within { border-color: var(--brand, #3355FF); box-shadow: 0 0 0 3px rgba(51, 85, 255, .15); }
.site--askune .nsite-kurztest__field { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 0; }
/* Die Beschriftung bleibt fuer Screenreader da, sichtbar steht der Globus. */
.site--askune .nsite-kurztest__field > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.site--askune .nsite-kurztest--hero .nsite-kurztest__field::before {
  content: ""; flex: 0 0 18px; height: 18px; margin-right: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site--askune .nsite-kurztest__field input,
.site--askune .nsite-kurztest--hero .nsite-kurztest__field input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0; border: 0; outline: none; background: transparent; box-shadow: none;
  font-family: var(--askune-sans); font-size: 18px; color: var(--ink, #1D1D1F);
}
.site--askune .nsite-kurztest__field input::placeholder { color: #86868B; }
.site--askune .nsite-kurztest__form .nsite-btn {
  flex: 0 0 auto; height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--brand, #3355FF); color: #fff; font-family: var(--askune-sans); font-size: 16px; font-weight: 500;
  box-shadow: none; cursor: pointer;
}
.site--askune .nsite-kurztest__form .nsite-btn:hover { background: var(--askune-hover); }
.site--askune .nsite-kurztest__link { margin-top: 14px; font-size: 17px; color: var(--askune-hover); text-decoration: none; }
.site--askune .nsite-kurztest__link:hover { text-decoration: underline; }
.site--askune .nsite-kurztest__hint {
  margin: 16px 0 0; font-family: var(--askune-sans); font-size: 14px; letter-spacing: 0; text-transform: none;
  color: var(--muted, #6E6E73); opacity: 1;
}
.site--askune .nsite-kurztest__err {
  margin: 24px auto 0; max-width: 620px; padding: 12px 18px; border-radius: 16px;
  background: #FFF6F1; border: 1px solid #F2A57E; color: var(--askune-warn); font-size: 15px;
}

/* ── KI-Antwort als Chatfenster (site.kiantwort) ─────────────────────────────────────────────── */
.site--askune .askune-ki {
  position: relative; width: min(var(--askune-breite), calc(100% - 2 * var(--askune-rand)));
  margin: 72px auto 0; padding: clamp(48px, 7vw, 100px) clamp(16px, 4vw, 48px) 72px;
  border-radius: 36px; background: var(--bg-alt, #F5F5F7);
  display: flex; flex-direction: column; align-items: center;
}
.site--askune .askune-ki__fenster {
  width: min(720px, 100%); border-radius: 22px; background: #fff; overflow: hidden; text-align: left;
  box-shadow: 0 40px 80px -30px rgba(29, 29, 31, .28), 0 0 0 1px rgba(29, 29, 31, .05);
}
.site--askune .askune-ki__leiste {
  height: 48px; padding: 0 20px; display: grid; grid-template-columns: 47px 1fr 47px; align-items: center;
  border-bottom: 1px solid #F0F0F2;
}
.site--askune .askune-ki__punkte { display: flex; gap: 7px; }
.site--askune .askune-ki__punkte i { width: 11px; height: 11px; border-radius: 99px; background: #E3E3E8; }
.site--askune .askune-ki__titel { text-align: center; font-size: 13px; font-weight: 500; color: var(--muted, #6E6E73); }
.site--askune .askune-ki__inhalt { padding: 28px clamp(18px, 3vw, 32px) 32px; display: flex; flex-direction: column; gap: 18px; }
.site--askune .askune-ki__frage {
  align-self: flex-end; max-width: 78%; margin: 0; padding: 12px 18px; border-radius: 20px 20px 6px 20px;
  background: var(--brand, #3355FF); color: #fff; font-size: 16px; line-height: 1.4;
}
.site--askune .askune-ki__einleitung { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft, #424245); }
.site--askune .askune-ki__liste { margin: 0; padding: 4px 18px; list-style: none; border-radius: 16px; background: var(--bg-alt, #F5F5F7); }
.site--askune .askune-ki__liste li { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-size: 16px; font-weight: 500; }
.site--askune .askune-ki__liste li + li { border-top: 1px solid var(--line, #E8E8ED); }
.site--askune .askune-ki__nr {
  flex: 0 0 26px; height: 26px; border-radius: 99px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
}
.site--askune .askune-ki__eigenes {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  border-radius: 16px; border: 1.5px dashed #F2A57E; background: #FFF6F1; font-size: 16px; font-weight: 600;
}
.site--askune .askune-ki__vermerk {
  flex-shrink: 0; padding: 5px 12px; border-radius: 999px; background: var(--askune-warn); color: #fff;
  font-size: 13px; font-weight: 600;
}
.site--askune .askune-ki__hinweis {
  position: absolute; left: 16px; right: 16px; bottom: 24px; margin: 0; text-align: center;
  font-size: 13px; color: var(--muted, #6E6E73);
}

/* ── Zwei Kacheln (site.suchwandel) ─────────────────────────────────────────────────────────── */
.site--askune .askune-kacheln {
  width: min(var(--askune-breite), calc(100% - 2 * var(--askune-rand))); margin: 120px auto 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.site--askune .askune-kachel {
  min-height: 560px; padding: clamp(32px, 3.9vw, 56px); border-radius: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.site--askune .askune-kachel--dunkel { background: var(--dark, #000); color: #F5F5F7; }
.site--askune .askune-kachel--marke { background: var(--brand, #3355FF); color: #fff; }
.site--askune .askune-kachel__etikett { font-size: 17px; font-weight: 600; }
.site--askune .askune-kachel--dunkel .askune-kachel__etikett,
.site--askune .askune-kachel--dunkel .askune-kachel__text { color: #A1A1A6; }
.site--askune .askune-kachel__titel {
  margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; font-weight: 700; letter-spacing: -.015em; color: inherit;
}
.site--askune .askune-kachel__titel--gross { font-size: clamp(38px, 4.45vw, 64px); line-height: 1.08; letter-spacing: -.018em; }
.site--askune .askune-kachel__text { margin: 0; font-size: 19px; line-height: 1.45; }
.site--askune .askune-kachel__fuss { margin-top: auto; }
.site--askune .askune-kachel__wandel { display: flex; flex-direction: column; gap: 10px; }
.site--askune .askune-kachel__begriff {
  align-self: flex-start; padding: 12px 18px; border-radius: 999px; background: #1C1C1E;
  font-size: 15px; color: #86868B;
}
.site--askune .askune-kachel__frage {
  align-self: flex-end; margin: 0; padding: 12px 18px; border-radius: 20px 20px 6px 20px;
  background: var(--brand, #3355FF); color: #fff; font-size: 16px;
}
.site--askune .askune-kachel__knopf {
  align-self: flex-start; padding: 14px 26px; border-radius: 999px; background: #fff;
  color: var(--askune-hover); font-size: 17px; font-weight: 600; text-decoration: none;
}
.site--askune .askune-kachel__knopf:hover { background: var(--ink, #1D1D1F); color: #fff; }

/* ── Fragenkarten (site.fragenliste) ────────────────────────────────────────────────────────── */
.site--askune .askune-fragen { width: min(var(--askune-breite), calc(100% - 2 * var(--askune-rand))); margin: 20px auto 120px; }
.site--askune .askune-fragen__titel { margin: 0 0 32px; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.018em; }
.site--askune .askune-fragen__karten { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.site--askune .askune-fragen__karte {
  min-height: 380px; padding: 40px; border-radius: 32px; background: var(--bg-alt, #F5F5F7);
  display: flex; flex-direction: column; gap: 14px;
}
.site--askune .askune-fragen__art { font-size: 15px; font-weight: 600; color: var(--muted, #6E6E73); }
.site--askune .askune-fragen__frage { margin: 0; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.site--askune .askune-fragen__link { margin-top: auto; font-size: 17px; color: var(--askune-hover); text-decoration: none; }
.site--askune .askune-fragen__link:hover { text-decoration: underline; }

/* ── Schritte (site.schritte) ───────────────────────────────────────────────────────────────── */
.site--askune .askune-schritte { background: var(--bg-alt, #F5F5F7); padding: clamp(72px, 8.4vw, 120px) var(--askune-rand); scroll-margin-top: 24px; }
.site--askune .askune-schritte__inner { max-width: var(--askune-breite); margin-inline: auto; display: flex; flex-direction: column; gap: 56px; }
.site--askune .askune-schritte__kopf { display: flex; flex-direction: column; gap: 12px; }
.site--askune .askune-schritte__h { margin: 0; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.018em; }
.site--askune .askune-schritte__unter { margin: 0; font-size: 21px; color: var(--muted, #6E6E73); }
.site--askune .askune-schritte__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: stretch; }
.site--askune .askune-schritt { position: relative; padding: 26px 0 26px 24px; border-bottom: 1px solid var(--line-strong, #D2D2D7); }
/* Der senkrechte Balken: blau am offenen Schritt, grau an den anderen. */
.site--askune .askune-schritt::before {
  content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 4px; border-radius: 4px;
  background: var(--line-strong, #D2D2D7);
}
.site--askune .askune-schritt[open]::before { background: var(--brand, #3355FF); }
.site--askune .askune-schritt summary { display: flex; flex-direction: column; gap: 8px; cursor: pointer; list-style: none; }
.site--askune .askune-schritt summary::-webkit-details-marker { display: none; }
.site--askune .askune-schritt summary:focus-visible { outline: 2px solid var(--brand, #3355FF); outline-offset: 4px; border-radius: 6px; }
.site--askune .askune-schritt__nr { font-size: 14px; font-weight: 600; color: var(--muted, #6E6E73); }
.site--askune .askune-schritt__titel { font-size: clamp(22px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.005em; color: var(--ink, #1D1D1F); }
.site--askune .askune-schritt__text { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-soft, #424245); }
.site--askune .askune-schritte__bild {
  min-height: 520px; padding: 48px; border-radius: 32px; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.site--askune .askune-schritte__form { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.site--askune .askune-schritte__feldetikett { font-size: 15px; font-weight: 600; color: var(--muted, #6E6E73); }
.site--askune .askune-schritte__feld {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 24px; border-radius: 999px;
  background: var(--bg-alt, #F5F5F7); border: 1.5px solid var(--brand, #3355FF);
}
.site--askune .askune-schritte__feld input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0; border: 0; outline: none; background: transparent;
  font-family: var(--askune-sans); font-size: 20px; color: var(--ink, #1D1D1F);
}
.site--askune .askune-schritte__feld input::placeholder { color: #86868B; }
.site--askune .askune-schritte__feld:focus-within { box-shadow: 0 0 0 3px rgba(51, 85, 255, .15); background: #fff; }
.site--askune .askune-schritte__feld button {
  border: 0; cursor: pointer; font-family: var(--askune-sans);
  flex: 0 0 auto; height: 48px; padding: 0 24px; border-radius: 999px; background: var(--brand, #3355FF); color: #fff;
  display: flex; align-items: center; font-size: 16px; font-weight: 500;
}
.site--askune .askune-schritte__feld button:hover { background: var(--askune-hover); }

/* ── Bausteine der User Story „Messbarkeit statt GEO-Versprechen" (25.09.2026) ──────────────────── */
/* Genannt / nicht genannt: dieselben Farben wie das „Nicht genannt" im Chatfenster. */
.site--askune .askune-marke-ja { color: #1E7B45; }
.site--askune .askune-marke-nein { color: var(--askune-warn); }
.site--askune .askune-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Vorher / nachher (site.messvergleich): vier Karten in einer Reihe, auf schmalen Fenstern untereinander. */
.site--askune .askune-vergleich { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.site--askune .askune-vergleich > div {
  display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 24px; background: #fff;
}
.site--askune .bos-section--tone-none .askune-vergleich > div { background: var(--bg-alt, #F5F5F7); }
.site--askune .askune-vergleich__etikett { font-size: 14px; font-weight: 600; color: var(--muted, #6E6E73); }
.site--askune .askune-vergleich__frage { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; }
.site--askune .askune-vergleich__frage--gleich { color: var(--askune-hover); }
.site--askune .askune-vergleich ul { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.site--askune .askune-vergleich li { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; padding-top: 8px; border-top: 1px solid var(--line, #E8E8ED); }
.site--askune .askune-vergleich li b { font-weight: 600; }
.site--askune .askune-vergleich p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-soft, #424245); }
.site--askune .askune-vergleich .askune-vergleich__ergebnis { background: var(--brand, #3355FF); }
.site--askune .askune-vergleich .askune-vergleich__ergebnis :is(p, span) { color: #fff; }
.site--askune .askune-vergleich .askune-vergleich__ergebnis p { font-size: 20px; line-height: 1.3; font-weight: 600; }
.site--askune .askune-vergleich__hinweis,
.site--askune .askune-matrix__hinweis { margin: 12px 0 0; font-size: 13px; color: var(--muted, #6E6E73); }

/* Kette (site.kette): Begriffe als Pillen mit Pfeil dazwischen, umbrechend. */
.site--askune .askune-kette { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.site--askune .askune-kette li {
  padding: 10px 18px; border-radius: 999px; background: var(--bg-alt, #F5F5F7); font-size: 16px; font-weight: 500;
}
.site--askune .bos-section--tone-light .askune-kette li { background: #fff; }
.site--askune .askune-kette li + li::before { content: "→"; margin: 0 14px 0 -8px; color: var(--muted, #6E6E73); font-weight: 400; }
.site--askune .askune-kette li + li { padding-left: 18px; }

/* Kundenweg (site.kundenweg, Askune × Qlikeit): Schritte je Produkt — Askune blau, Qlikeit rot,
   der Uebergang in beiden Farben. Handy: untereinander mit ↓. Ab 1024 px: nebeneinander mit →. */
.site--askune { --qlikeit: #E0243A; --qlikeit-hell: rgba(224, 36, 58, .06); }
.site--askune .askune-weg { margin-top: 8px; width: 100%; min-width: 0; }
.site--askune .askune-weg__legende { display: flex; gap: 10px; margin: 0 0 18px; }
.site--askune .askune-weg__marke { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; }
.site--askune .askune-weg__marke--askune { background: var(--brand, #3355FF); }
.site--askune .askune-weg__marke--qlikeit { background: var(--qlikeit); }
.site--askune .askune-weg__schritte { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 34px; }
.site--askune .askune-weg__schritt {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 27px 18px 22px;
  border-radius: 24px; min-width: 0;
  /* Farbbalken oben als Hintergrundschicht: folgt den runden Ecken, ohne etwas abzuschneiden. */
  background: linear-gradient(var(--brand, #3355FF), var(--brand, #3355FF)) top / 100% 5px no-repeat, rgba(51, 85, 255, .06);
}
.site--askune .askune-weg__schritt--qlikeit {
  background: linear-gradient(var(--qlikeit), var(--qlikeit)) top / 100% 5px no-repeat, var(--qlikeit-hell);
}
.site--askune .askune-weg__schritt--uebergang {
  background: linear-gradient(90deg, var(--brand, #3355FF), var(--qlikeit)) top / 100% 5px no-repeat,
              linear-gradient(135deg, rgba(51, 85, 255, .06), rgba(224, 36, 58, .06));
}
/* Pfeil zum naechsten Schritt: unter der Karte (Handy), rechts daneben (breit). */
.site--askune .askune-weg__schritt + .askune-weg__schritt::after {
  content: "↓"; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  font-size: 20px; line-height: 26px; color: var(--muted, #6E6E73);
}
.site--askune .askune-weg__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.site--askune .askune-weg__nr {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; font-weight: 700; color: #fff; background: var(--brand, #3355FF);
}
.site--askune .askune-weg__schritt--qlikeit .askune-weg__nr { background: var(--qlikeit); }
.site--askune .askune-weg__schritt--uebergang .askune-weg__nr { background: linear-gradient(135deg, var(--brand, #3355FF), var(--qlikeit)); }
.site--askune .askune-weg__produkt { font-size: 13px; font-weight: 600; color: var(--askune-hover, #2442D9); }
.site--askune .askune-weg__schritt--qlikeit .askune-weg__produkt { color: var(--qlikeit); }
.site--askune .askune-weg__schritt--uebergang .askune-weg__produkt { color: var(--muted, #6E6E73); }
.site--askune .askune-weg__titel { margin: 4px 0 0; font-size: 21px; line-height: 1.2; font-weight: 700; }
.site--askune .askune-weg__kern { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; }
.site--askune .askune-weg__text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-soft, #424245); }
.site--askune .askune-weg__punkte { margin: 2px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink-soft, #424245); }
.site--askune .askune-weg__rueck {
  margin: 22px 0 0; padding: 14px 18px; border-radius: 16px; font-size: 15px; font-weight: 500;
  border: 2px dashed var(--brand, #3355FF);
}
.site--askune .askune-weg__rueck span { color: var(--brand, #3355FF); font-weight: 700; margin-right: 4px; }
@media (min-width: 1024px) {
  .site--askune .askune-weg__schritte { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
  .site--askune .askune-weg__schritt + .askune-weg__schritt::after { content: "→"; top: 50%; left: -20px; transform: translateY(-50%); }
  .site--askune .askune-weg__titel { font-size: 18px; }
  .site--askune .askune-weg__kern { font-size: 15px; }
  .site--askune .askune-weg__text, .site--askune .askune-weg__punkte { font-size: 14px; }
  .site--askune .askune-weg__punkte { padding-left: 16px; }
}

/* Eingefaerbte Glieder (Askune × Qlikeit): Blau → neutral → Rot. */
.site--askune .askune-kette li.askune-kette__glied--askune { background: var(--brand, #3355FF); color: #fff; }
.site--askune .askune-kette li.askune-kette__glied--qlikeit { background: var(--qlikeit, #E0243A); color: #fff; }
.site--askune .askune-kette li.askune-kette__glied--neutral { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line, #D2D2D7); }
.site--askune .askune-kette li:is(.askune-kette__glied--askune, .askune-kette__glied--qlikeit)::before { color: rgba(255, 255, 255, .85); }
/* Der Uebergabepunkt: der Abschnitt selbst laeuft von Askune-Blau nach Qlikeit-Rot. */
.site--askune #uebergabe { background: linear-gradient(90deg, rgba(51, 85, 255, .10), var(--bg-alt, #F5F5F7) 50%, rgba(224, 36, 58, .10)); }
/* Der Qlikeit-Teil der Seite traegt Qlikeit-Rot (Punkte und Etikett), damit die Aufgabenteilung sichtbar bleibt. */
.site--askune #qlikeit-teil .bos-list__item::before { background: var(--qlikeit, #E0243A); }
.site--askune #qlikeit-teil .bos-text--stat-label { color: var(--qlikeit, #E0243A); }
/* „Sichtbarkeit" bricht auf dem Handy sonst mitten im Wort (overflow-wrap) — mit lang="de" trennt der Browser richtig. */
@media (max-width: 620px) { .site--askune :is(#uebergabe, #qlikeit-teil) :is(.bos-text--title, .bos-text--heading) { hyphens: auto; hyphenate-limit-chars: 10 4 4; } }

/* Paketanfrage (site.paketanfrage, 30.09.2026): Formular fuer Askune × Qlikeit. */
.site--askune .askune-anfrage { max-width: 760px; scroll-margin-top: 90px; }
.site--askune .askune-anfrage__h { margin: 0 0 10px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 700; }
.site--askune .askune-anfrage__intro { margin: 0 0 22px; font-size: 17px; line-height: 1.5; color: var(--ink-soft, #424245); }
.site--askune .askune-anfrage__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.site--askune .askune-anfrage__feld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.site--askune .askune-anfrage__feld--voll, .site--askune .askune-anfrage__einwilligung,
.site--askune .askune-anfrage__form button { grid-column: 1 / -1; }
.site--askune .askune-anfrage__feld :is(input, textarea) {
  font: inherit; font-weight: 400; font-size: 16px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line-strong, #D2D2D7); background: #fff; color: var(--ink, #1D1D1F);
}
.site--askune .askune-anfrage__feld :is(input, textarea):focus-visible { outline: 2px solid var(--brand, #3355FF); outline-offset: 1px; }
.site--askune .askune-anfrage__einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-soft, #424245); }
.site--askune .askune-anfrage__einwilligung input { margin-top: 3px; }
.site--askune .askune-anfrage__form button { justify-self: start; }
.site--askune .askune-anfrage__hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.site--askune .askune-anfrage__fehler { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: rgba(224, 36, 58, .08); color: #B0182B; font-size: 15px; }
.site--askune .askune-anfrage__ok { margin: 0; padding: 16px 18px; border-radius: 14px; background: rgba(51, 85, 255, .08); font-size: 16px; line-height: 1.5; }
@media (max-width: 620px) { .site--askune .askune-anfrage__form { grid-template-columns: 1fr; } }

/* Matrix (site.matrix): Tabelle mit Kopfzeile, die eigene Spalte hervorgehoben. */
.site--askune .askune-matrix { margin-top: 8px; overflow-x: auto; border-radius: 24px; background: #fff; }
.site--askune .bos-section--tone-none .askune-matrix { background: var(--bg-alt, #F5F5F7); }
.site--askune .askune-matrix table { width: 100%; border-collapse: collapse; font-size: 16px; }
.site--askune .askune-matrix th, .site--askune .askune-matrix td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--line, #E8E8ED); }
.site--askune .askune-matrix thead th { font-size: 14px; font-weight: 600; color: var(--muted, #6E6E73); }
.site--askune .askune-matrix tbody th { text-align: left; font-weight: 600; }
.site--askune .askune-matrix tr:last-child :is(th, td) { border-bottom: 0; }
.site--askune .askune-matrix td { font-size: 20px; font-weight: 700; }
.site--askune .askune-matrix .askune-matrix__eigen { background: rgba(51, 85, 255, .06); }
.site--askune .askune-matrix thead .askune-matrix__eigen { color: var(--askune-hover); }

/* ── Abschnitte aus Atomen (Methodik, Preise) ───────────────────────────────────────────────── */
.site--askune .bos-section { padding: clamp(64px, 8.4vw, 120px) 0; }
.site--askune .bos-section__inner { width: min(var(--askune-breite), 100%); max-width: none; margin-inline: auto; padding-inline: var(--askune-rand); }
@media (min-width: 1441px) { .site--askune .bos-section__inner { padding-inline: 0; } }
.site--askune .bos-section__inner > * + * { margin-top: 20px; }
.site--askune .bos-section--tone-light,
.site--askune .bos-section--tone-alt { background: var(--bg-alt, #F5F5F7); }
.site--askune .bos-section--tone-hero { background: var(--bg, #FFFFFF); color: var(--ink, #1D1D1F); }
/* Dunkler Ton → die blaue Kachel des Entwurfs, randlos. */
.site--askune .bos-section--tone-dark { background: var(--brand, #3355FF); color: #fff; }
.site--askune .bos-section--tone-dark > .bos-section__inner { background: transparent; border-radius: 0; }
.site--askune .bos-section--tone-dark :is(.bos-text--title, .bos-text--heading, .bos-text--subheading,
                                          .bos-text--body, .bos-text--lead, .bos-list, .bos-text--caption,
                                          .bos-text--stat-label) { color: #fff; }
.site--askune .bos-section--tone-dark .bos-link--primary { background: #fff; color: var(--askune-hover); }
.site--askune .bos-section--tone-dark .bos-link--primary:hover { background: var(--ink, #1D1D1F); color: #fff; }
.site--askune .bos-section--tone-dark .bos-link--secondary { color: #fff; border-color: #fff; }
.site--askune .bos-section--tone-dark .bos-stack--card { background: rgba(255, 255, 255, .1); }

.site--askune :is(.bos-text--title, .bos-text--heading, .bos-text--subheading) {
  font-family: var(--askune-sans); color: var(--ink, #1D1D1F);
}
.site--askune .bos-text--title { font-size: clamp(44px, 6.1vw, 88px); line-height: 1.08; font-weight: 700; letter-spacing: -.005em; max-width: 20ch; }
.site--askune .bos-text--heading { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.018em; max-width: 24ch; margin-bottom: .3em; }
.site--askune .bos-text--heading.bos-text--center { margin-inline: auto; }
.site--askune .bos-text--subheading { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -.005em; margin: 0; }
.site--askune .bos-text--body { color: var(--ink-soft, #424245); font-size: 17px; line-height: 1.5; }
.site--askune .bos-text--lead { color: var(--muted, #6E6E73); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; }
.site--askune .bos-text--center:is(.bos-text--body, .bos-text--lead) { max-width: 64ch; margin-inline: auto; }
/* Abschnitte mit Listen, Tabellen und Karten: Ueberschrift linksbuendig wie im Entwurf („So funktioniert
   der Kurztest."). Mittig stand sie ueber linksbuendigen Listen — das las sich wie zwei Spalten.
   Die blaue Flaeche (tone-dark) bleibt mittig; sie ist ein Aufruf, kein Inhalt. */
.site--askune .bos-section:not(.bos-section--tone-dark) :is(.bos-text--heading, .bos-text--lead, .bos-text--body, .bos-text--stat-label).bos-text--center {
  text-align: left; margin-inline: 0;
}
.site--askune .bos-text--stat-label { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted, #6E6E73); opacity: 1; }
.site--askune .bos-text--caption { font-size: 13px; line-height: 1.5; color: var(--muted, #6E6E73); }
.site--askune .bos-text--stat-value {
  font-size: clamp(30px, 2.8vw, 44px); white-space: nowrap; line-height: 1; font-weight: 700; letter-spacing: -.018em;
  color: var(--ink, #1D1D1F); margin: 4px 0 0; font-variant-numeric: tabular-nums;
}
.site--askune :is(.bos-text--title, .bos-text--heading) em { font-style: normal; color: var(--brand, #3355FF); }

/* Knoepfe: Pillen. */
.site--askune .bos-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px;
  font-family: var(--askune-sans); font-weight: 600; font-size: 17px; border: 1px solid transparent; text-decoration: none;
}
.site--askune .bos-link + .bos-link { margin-left: 12px; }
.site--askune .bos-link--primary { background: var(--brand, #3355FF); color: #fff; }
.site--askune .bos-link--primary:hover { background: var(--askune-hover); }
.site--askune .bos-link--secondary { background: transparent; color: var(--ink, #1D1D1F); border-color: var(--line-strong, #D2D2D7); }
.site--askune .bos-link--secondary:hover { border-color: var(--ink, #1D1D1F); }
.site--askune .bos-link--plain { padding: 4px 0; border-radius: 0; color: var(--askune-hover); font-weight: 400; }
.site--askune .bos-link--plain::after { content: " ›"; }
.site--askune .bos-link--plain:hover { text-decoration: underline; }

/* Karten: Hellgrau auf Weiss, Weiss auf Hellgrau, grosse Rundung, kein Schatten. */
.site--askune .bos-stack--card {
  background: var(--bg-alt, #F5F5F7); border: 0; border-radius: var(--radius-card, 32px); box-shadow: none;
  padding: clamp(28px, 2.8vw, 40px); display: flex; flex-direction: column; gap: 12px; height: 100%;
}
.site--askune .bos-section--tone-light .bos-stack--card { background: #fff; }
.site--askune .bos-stack--card .bos-link { align-self: flex-start; margin-top: auto; }
.site--askune .bos-grid { gap: 20px; align-items: stretch; }
.site--askune .bos-grid > * { min-width: 0; }

/* Preistafel (site.abopreise): „/ Monat" klein hinter der Zahl. */
.site--askune .askune-preise__einheit { font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--muted, #6E6E73); }
.site--askune .askune-preise__ohne { margin-top: 16px; }

/* Listen. */
.site--askune .bos-list { margin: 6px 0 0; padding-left: 1.1rem; color: var(--ink-soft, #424245); align-self: stretch; font-size: 17px; }
.site--askune .bos-list li { margin-bottom: 6px; line-height: 1.5; }
.site--askune .bos-list--plain { list-style: none; padding-left: 0; }
.site--askune .bos-list--plain li { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line, #E8E8ED); }
.site--askune .bos-list--check { list-style: none; padding-left: 0; }
.site--askune .bos-list--check li { padding-left: 1.6rem; position: relative; }
.site--askune .bos-list--check li::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 99px; background: var(--brand, #3355FF);
}

/* ── Fusszeile: hellgrau, klein ─────────────────────────────────────────────────────────────── */
.site--askune .nsite-footer {
  background: var(--bg-alt, #F5F5F7); color: var(--muted, #6E6E73); border-top: 0;
  padding: 40px var(--askune-rand) 48px; font-size: 13px; text-align: left;
}
.site--askune .nsite-footer__inner {
  width: 100%; max-width: var(--askune-breite); margin-inline: auto; display: flex; flex-direction: column; gap: 24px;
}
.site--askune .nsite-footer__brand { max-width: none; align-items: stretch; gap: 8px; }
.site--askune .nsite-footer__name { display: none; }
.site--askune .nsite-footer__tag { margin: 0; padding-bottom: 20px; border-bottom: 1px solid var(--line-strong, #D2D2D7); line-height: 1.5; }
.site--askune :is(.nsite-footer__tag, .nsite-footer__addr, .nsite-footer__copy) { color: var(--muted, #6E6E73); font-size: 13px; }
.site--askune .nsite-footer__addr { margin: 0; }
.site--askune .nsite-footer__nav { flex-direction: row; flex-wrap: wrap; gap: 10px 32px; }
.site--askune .nsite-footer a {
  font-family: var(--askune-sans); font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--ink-soft, #424245); text-decoration: none;
}
.site--askune .nsite-footer a:hover { color: var(--askune-hover); }
.site--askune .nsite-footer__legal,
.site--askune .nsite-footer__copy { width: 100%; max-width: var(--askune-breite); margin: 16px auto 0; justify-content: flex-start; text-align: left; }

/* ── Schmale Fenster ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .site--askune .askune-kacheln,
  .site--askune .askune-fragen__karten,
  .site--askune .askune-schritte__raster { grid-template-columns: minmax(0, 1fr); }
  .site--askune .askune-kachel { min-height: 0; }
  .site--askune .askune-kachel__fuss { margin-top: 24px; }
  .site--askune .askune-fragen__karte { min-height: 0; }
  .site--askune .askune-fragen__link { margin-top: 12px; }
  .site--askune .askune-schritte__bild { min-height: 0; padding: 32px 20px; }
  .site--askune .askune-vergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site--askune .bos-grid[class*="bos-grid--cols-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site--askune .nsite-nav__links a[href="/app"] { flex: none; text-align: left; }
  .site--askune .nsite-nav__links a[href="/account/registrieren"] { margin-left: 0; align-self: flex-start; }
}
@media (max-width: 620px) {
  .site--askune .bos-grid[class*="bos-grid--cols-"] { grid-template-columns: minmax(0, 1fr); }
  .site--askune .bos-link { width: 100%; justify-content: center; }
  .site--askune .bos-link + .bos-link { margin-left: 0; margin-top: 10px; }
  .site--askune .bos-link--plain { width: auto; }
  .site--askune .askune-ki { border-radius: 24px; margin-top: 56px; }
  .site--askune .askune-kacheln { margin-top: 72px; }
  .site--askune .askune-kachel, .site--askune .askune-fragen__karte { border-radius: 24px; padding: 28px; }
  /* Das Formular zerfaellt in Feld und Knopf untereinander — beide volle Pillen. */
  .site--askune .nsite-kurztest__form { flex-direction: column; align-items: stretch; padding: 0; border: 0; background: transparent; gap: 10px; }
  .site--askune .nsite-kurztest__form:focus-within { box-shadow: none; }
  .site--askune .nsite-kurztest__field {
    padding: 0 20px; border-radius: 999px; background: var(--bg-alt, #F5F5F7); border: 1px solid var(--line-strong, #D2D2D7);
  }
  .site--askune .nsite-kurztest__field:focus-within { border-color: var(--brand, #3355FF); }
  .site--askune .nsite-kurztest__form .nsite-btn { width: 100%; height: 52px; }
  .site--askune .askune-schritte__feld input { font-size: 16px; }
  .site--askune .askune-vergleich { grid-template-columns: minmax(0, 1fr); }
  /* Vier Spalten auf 350 px: knapp, aber ohne seitliches Scrollen — sonst lag „Wettbewerber B" unsichtbar rechts. */
  .site--askune .askune-matrix table { table-layout: fixed; }
  .site--askune .askune-matrix th, .site--askune .askune-matrix td { padding: 10px 4px; font-size: 13px; }
  .site--askune .askune-matrix thead th { font-size: 11px; line-height: 1.3; }
  .site--askune .askune-matrix th:first-child { width: 26%; padding-left: 12px; }
  .site--askune .askune-schritte__feld button { padding: 0 16px; font-size: 14px; }
}
.site--askune :is(.bos-text--stat-value, .bos-text--title, .bos-text--heading, .nsite-kurztest__h) { overflow-wrap: break-word; }

/* Nach einer Navigation setzt Blazor den Fokus auf die h1 (FocusOnNavigate in Routes.razor — fuer
   Vorleseprogramme). Die Umrandung dafuer versteckte bis zum 01.10.2026 app.css; seit PR 532 laden die
   oeffentlichen Askune-Seiten app.css nicht mehr, und auf PROD stand nach Klick aufs Logo ein schwarzer
   Rahmen um „Wer empfiehlt …“. Die h1 ist kein Bedienelement — ihr Fokus braucht keinen Rahmen. */
.site--askune h1:focus { outline: none; }