/* =====================================================================
   Xamu Systems — Gestaltungssystem
   Angelegt 14.08.2026 als Ersatz für ein über Jahre gewachsenes CSS,
   das an drei Stellen gleichzeitig gepflegt werden musste.

   WAS HIER ANDERS IST

   1. Namen beschreiben die ROLLE, nicht die Farbe.
      Alt: --gold-primary  (war blau, --text-white war dunkel)
      Neu: --accent, --text-strong — die können nicht falsch werden.

   2. Beide Modi von Anfang an. Der helle Modus ist kein Aufsatz mit
      !important, sondern ein zweiter Wertesatz. Es gibt in dieser Datei
      KEIN einziges !important.

   3. Eine Karte, nicht elf. Vorher: wizard-card, xcard, benefit-card,
      feature-card, module-card, blog-card, card, product-card, hsc,
      partner-showcase-card, kaiser-rule-card — alle mit eigener Logik.

   REGEL FÜR ALLE, DIE HIER ERGÄNZEN
   Flächen und Farben kommen ausschliesslich aus den Variablen unten.
   Eine feste Farbe im Komponententeil ist im jeweils anderen Modus
   falsch — das war die Ursache fast aller Fehler im alten System.

   AUSNAHME, die keine ist: Was über einem dunklen Bild liegt (Hero,
   Kopfbereich der Startseite), behält helle Werte in BEIDEN Modi.
   Der Hintergrund dort ist dunkel, unabhängig von der Einstellung.
   ===================================================================== */

/* ── Werte: dunkler Modus (Grundzustand) ──────────────────────────── */
:root {
  /* Flächen — von hinten nach vorne */
  --surface-base:    #0c1a2e;   /* Seitengrund */
  --surface-sunken:  #091524;   /* abgesetzte Bänder */
  --surface-raised:  #162640;   /* Karten */
  --surface-overlay: #1e3a5f;   /* Hervorhebungen in Karten */

  /* Schrift */
  --text-strong:     #ffffff;   /* Überschriften, Namen */
  --text-body:       #d4d4d8;   /* Fliesstext */
  --text-muted:      #a1a1aa;   /* Beschriftungen, Nebensachen */

  /* Akzent — die Signalfarbe, in BEIDEN Modi gleich.
     Sie ist die Marke; ein Wechsel würde sie schwächen. */
  --accent:          #f59e0b;
  --accent-bright:   #fbbf24;
  --accent-deep:     #d97706;
  --on-accent:       #0c1a2e;   /* Schrift auf Akzentflächen */

  /* Akzent als SCHRIFT (Links, Schlagworte, Kennzahlen).
     Im dunklen Modus ist das dieselbe Farbe. Im hellen NICHT — dort steht
     Amber auf Weiss bei 2,15:1 und ist unlesbar (gemessen 16.08. an der
     Preiszahl auf /website-ab-60). Flächen behalten --accent, nur Text
     wechselt. Wer eine neue Regel schreibt: Schrift = --accent-text. */
  --accent-text:     #f59e0b;

  /* Linien und Tiefe */
  --line:            rgba(255, 255, 255, .10);
  --line-strong:     rgba(255, 255, 255, .18);
  --shadow-soft:     0 1px 3px rgba(0, 0, 0, .30);
  --shadow-lifted:   0 10px 30px rgba(0, 0, 0, .40);

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

  /* Abstände — eine Reihe, keine Zufallswerte */
  --gap-xs:  .5rem;
  --gap-sm:  .875rem;
  --gap-md:  1.5rem;
  --gap-lg:  2.5rem;
  --gap-xl:  4rem;

  /* Schrift */
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --step-0:  1rem;
  --step-1:  1.15rem;
  --step-2:  1.5rem;
  --step-3:  2rem;
  --step-4:  2.75rem;

  --ease: .25s cubic-bezier(.4, 0, .2, 1);
}

/* ── Werte: heller Modus ──────────────────────────────────────────── */
[data-theme="light"] {
  --surface-base:    #f8fafc;
  --surface-sunken:  #f1f5f9;
  --surface-raised:  #ffffff;
  --surface-overlay: #eef2f7;

  --text-strong:     #0f172a;
  --text-body:       #334155;
  --text-muted:      #64748b;

  /* Akzent UND die Schrift darauf bleiben unveraendert: Amber ist in
     beiden Modi dieselbe helle Flaeche. Weisse Schrift darauf ergab
     2.1:1 — gemessen, nicht geschaetzt. Dunkel bleibt bei 8.1:1. */

  /* Amber als SCHRIFT auf hellem Grund braucht dagegen eine dunklere
     Stufe: #f59e0b auf Weiss = 2,15:1, #b45309 = 5,0:1. */
  --accent-text:     #b45309;

  --line:            rgba(15, 23, 42, .10);
  --line-strong:     rgba(15, 23, 42, .18);
  --shadow-soft:     0 1px 3px rgba(15, 23, 42, .08);
  --shadow-lifted:   0 10px 30px rgba(15, 23, 42, .10);
}


/* ── Hinweis zur Spezifitaet ──────────────────────────────────────
   Alle Bausteine stehen unter `.x-page`. Grund: Solange das alte
   style.css mitlaeuft, konkurrieren dessen Regeln mit diesen. Eine
   einfache Klasse (0,1,0) verliert dort; `.x-page .x-tile` (0,2,0)
   gewinnt — ohne !important.

   Nach dem Abschalten des alten Stylesheets kann der Praefix wieder
   entfallen. Bis dahin ist er die Brücke zwischen beiden Welten. */

/* ── Grundlagen ───────────────────────────────────────────────────── */
.x-page {
  background: var(--surface-base);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: 1.65;
}
.x-page h1, .x-page h2, .x-page h3, .x-page h4 { color: var(--text-strong); line-height: 1.25; }
/* Nur echte Textlinks einfärben. Ohne die Ausnahme gewinnt diese
   Regel (Klasse + Typ) gegen .x-btn--primary (nur Klasse) — die
   Beschriftung wird amber auf amber und verschwindet. */
.x-page a:not([class*="x-btn"]) { color: var(--accent-text); text-decoration: none; }
.x-page a:not([class*="x-btn"]):hover { color: var(--accent-bright); text-decoration: underline; }
.x-page a[class*="x-btn"] { text-decoration: none; }

.x-page .x-container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.x-page .x-section { padding-block: var(--gap-xl); }
.x-page .x-section--sunken { background: var(--surface-sunken); }

/* ── Abschnittskopf ───────────────────────────────────────────────── */
.x-page .x-eyebrow {
  color: var(--accent-text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.x-page .x-heading { font-size: var(--step-3); margin: var(--gap-xs) 0 var(--gap-sm); }
.x-page .x-heading em { color: var(--accent-text); font-style: italic; }
.x-page .x-lead { color: var(--text-muted); font-size: var(--step-1); max-width: 62ch; }

/* ── Karte — ersetzt elf Varianten ────────────────────────────────
   Innere Bereiche bekommen bewusst KEINE eigene Fläche. Genau das
   war der Fehler bei den Referenzkarten: Ein weisser Innencontainer
   deckte die Kartenfarbe ab, der Moduswechsel wirkte nicht mehr. */
.x-page .x-tile {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--gap-md);
  box-shadow: var(--shadow-soft);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.x-page .x-tile > * { background: transparent; }
.x-page .x-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lifted); border-color: var(--line-strong); }
.x-page .x-tile__title { font-size: var(--step-2); margin-bottom: var(--gap-xs); }
.x-page .x-tile__text { color: var(--text-body); }
.x-page .x-tile__note { color: var(--text-muted); font-size: .9rem; }
.x-page .x-tile--flat:hover { transform: none; box-shadow: var(--shadow-soft); }
.x-page .x-tile--accent { border-color: var(--accent); }

/* min(…, 100%) ist Pflicht, nicht Kosmetik: Ohne das erzwingt minmax(380px, …)
   auf einem 375px breiten Telefon eine 380px-Spalte — die Seite laesst sich dann
   seitwaerts schieben. Gemessen 16.08. auf /website-ab-60 (25px Ueberstand).
   Betrifft JEDES Raster, dessen Mindestbreite groesser sein kann als der Bildschirm. */
.x-page .x-grid { display: grid; gap: var(--gap-md); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.x-page .x-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }

/* ── Hervorhebung innerhalb einer Karte ───────────────────────────── */
.x-page .x-highlight {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--radius);
  padding: var(--gap-sm);
}

/* ── Schaltflächen — drei Varianten statt 74 Klassen ──────────────── */
.x-page .x-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: .8rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--ease), background var(--ease), border-color var(--ease);
}
.x-page .x-btn:hover { transform: translateY(-1px); text-decoration: none; }
.x-page .x-btn--primary { background: var(--accent); color: var(--on-accent); }
.x-page .x-btn--primary:hover { background: var(--accent-bright); color: var(--on-accent); }
.x-page .x-btn--outline { border-color: var(--line-strong); color: var(--text-strong); }
.x-page .x-btn--outline:hover { border-color: var(--accent); color: var(--accent-text); }
.x-page .x-btn--quiet { color: var(--text-muted); padding-inline: .4rem; }
.x-page .x-btn--quiet:hover { color: var(--accent-text); }

/* ── Abzeichen und Schlagworte ────────────────────────────────────── */
.x-page .x-badge {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.x-page .x-badge--accent { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); color: var(--accent-text); }
.x-page .x-tags { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }
.x-page .x-tag { padding: .28rem .7rem; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--text-muted); font-size: .82rem; }

/* ── Kennzahlen ───────────────────────────────────────────────────── */
.x-page .x-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--gap-sm); }
.x-page .x-stat__value { display: block; color: var(--accent-text); font-size: var(--step-2); font-weight: 800; line-height: 1.1; }
.x-page .x-stat__label { color: var(--text-muted); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }

/* ── Über dunklen Bildern: Werte bleiben hell, in beiden Modi ─────
   Kein Sonderfall, sondern die Wahrheit über den Hintergrund dort. */
.x-on-image {
  --text-strong: #ffffff;
  --text-body:   #e5e7eb;
  --text-muted:  #cbd5e1;
  --line:        rgba(255, 255, 255, .22);
  --line-strong: rgba(255, 255, 255, .38);
  --on-accent:   #0c1a2e;
}

/* ── Barrierefreiheit ─────────────────────────────────────────────── */
.x-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.x-page .x-tile, .x-page .x-btn { transition: none; }
.x-page .x-tile:hover, .x-page .x-btn:hover { transform: none; }
}

/* ── Warum die Karte "x-tile" heisst und nicht "x-card" ───────────
   14.08.2026, nach der Migration von /referenzen: Das alte style.css
   erzwang seine Kartenfarben auch gegen `.x-page .x-card` (0,2,0), und
   die Regel war über `document.styleSheets` nicht auffindbar.

   URSACHE (gemessen, style.css Zeile 249 ff.): dort stehen 15 Regeln
   mit dem Selektor `[class*='-card']` — allesamt mit !important. Das
   ist ein TEXTMUSTER, kein Klassenname: "x-card" enthaelt "-card" und
   wurde deshalb voll erfasst. Kein Spezifitaets-, sondern ein
   Namensproblem.

   Die frueher noetige Uebergangsbruecke (15 Regeln mit !important)
   konnte daraufhin ersatzlos entfallen.

   ⚠️ REGEL FUER NEUE KLASSEN: Vor jedem neuen Namen pruefen, ob er ein
   Muster aus einem Attribut-Selektor des alten style.css enthaelt:
       grep -o "\[class\*=['\"][^'\"]*['\"]\]" assets/css/*.css | sort -u
   Aktuell heikel: `-card`, `glow`, `xcard-ribbon`.

   ── WAS TROTZDEM NOCH VON AUSSEN KOMMT (gemessen 14.08., heller Modus)
   style.css Zeile ~312:
       [data-theme="light"] h1, h2, h3, h4 { color:#1e293b !important; }
   Diese Regel nennt keine Klasse und erfasst deshalb JEDE Ueberschrift,
   auch `.x-tile__title`. Sichtbar unkritisch (14,6:1 statt 17,9:1), aber
   das System bestimmt die Ueberschriftenfarbe im hellen Modus nicht
   selbst. Ebenso der Kartenrahmen: bleibt hell statt dunkel.

   Beides ist mit einem Klassennamen NICHT loesbar — nur dadurch, dass
   umgestellte Seiten style.css gar nicht mehr laden (Schritt 2 des
   Umbaus). Bis dahin bewusst hingenommen, NICHT mit !important
   uebersteuern. */


/* =====================================================================
   KOPF- UND FUSSBEREICH
   Angelegt 14.08.2026 (Schritt 1 des Umbaus).

   Diese Sektion greift NUR auf Seiten, die im Kopf $use_system = true
   setzen. Dort wird style.css gar nicht erst geladen — deshalb genuegen
   hier einfache Klassen ohne .x-page-Praefix und ohne !important.

   ⚠️ DAS MARKUP IST ABSICHTLICH UNVERAENDERT geblieben. Die IDs
   #header, #nav, #theme-toggle, #mobileMenuToggle, #mobileMenu,
   #search-strip, #xamu-search-* haengen an JavaScript (nav-search.js,
   theme-switcher.js, main.js). Wer sie umbenennt, legt Suche,
   Umschalter und Mobilmenue still — ohne Fehlermeldung.
   ===================================================================== */

body { background: var(--surface-base); color: var(--text-body); font-family: var(--font-body); margin: 0; }

/* ── Kopfbereich ──────────────────────────────────────────────────── */
#header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: color-mix(in srgb, var(--surface-base) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
#header .container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
#header .header-content {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding-block: .7rem;
}
#header .logo { display: inline-flex; align-items: center; flex-shrink: 0; }
#header .logo-image { height: 42px; width: auto; display: block; }

/* Navigation */
#nav { margin-left: auto; }
#nav > ul { display: flex; align-items: center; gap: var(--gap-sm); list-style: none; margin: 0; padding: 0; }
#nav a, #nav .nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem .6rem;
  border: 0;
  background: none;
  border-radius: var(--radius);
  color: var(--text-body);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
}
#nav a:hover, #nav .nav-dropdown-trigger:hover, #nav a.active { color: var(--accent-text); }
#nav a.active { font-weight: 700; }

/* Aufklappmenue — sichtbar bei Hover UND bei Tastaturfokus */
#nav .nav-dropdown { position: relative; }
#nav .mega-panel {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  translate: -50% 0;
  min-width: 520px;
  padding: var(--gap-sm);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lifted);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease);
}
#nav .mega-panel-sm { min-width: 300px; }
#nav .nav-dropdown:hover .mega-panel,
#nav .nav-dropdown:focus-within .mega-panel { opacity: 1; visibility: visible; }
#nav .mega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .25rem; }
#nav .mega-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-xs);
  padding: .6rem .7rem;
  border-radius: var(--radius);
}
#nav .mega-item:hover { background: var(--surface-overlay); }
#nav .mega-item-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.4; }
#nav .mega-item-text { display: flex; flex-direction: column; }
#nav .mega-item-title { color: var(--text-strong); font-weight: 600; font-size: .9rem; }
#nav .mega-item-desc { color: var(--text-muted); font-size: .78rem; line-height: 1.4; }

/* Handlungsknopf in der Navigation */
#nav .nav-cta-item { list-style: none; }
#nav .nav-cta-btn {
  background: var(--accent);
  color: var(--on-accent);
  padding: .5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
}
#nav .nav-cta-btn:hover { background: var(--accent-bright); color: var(--on-accent); }

/* Umschalter hell/dunkel */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* Suchzeile — Innenleben kommt aus nav-search.css, die bleibt geladen */
#search-strip { padding-bottom: .7rem; }

/* Mobilmenue */
.mobile-menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  cursor: pointer;
}
.mobile-menu-toggle svg { width: 20px; height: 20px; margin: auto; }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-base);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease);
}
.mobile-menu.active { opacity: 1; visibility: visible; }
.mobile-menu-content ul { list-style: none; padding: 0; margin: 0; text-align: center; }
.mobile-menu-content li { margin-bottom: var(--gap-md); }
.mobile-menu-content a { color: var(--text-strong); font-size: 1.35rem; font-weight: 700; text-decoration: none; }
.mobile-menu-content a:hover, .mobile-menu-content a.active { color: var(--accent-text); }
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  #nav { display: none; }
  .mobile-menu-toggle { display: inline-flex; margin-left: auto; }
}

/* ── Fussbereich ──────────────────────────────────────────────────── */
footer {
  margin-top: var(--gap-xl);
  padding-block: var(--gap-lg) var(--gap-md);
  background: var(--surface-sunken);
  border-top: 1px solid var(--line);
  color: var(--text-body);
}
footer .container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap-lg);
}
footer h4 {
  color: var(--text-strong);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 var(--gap-sm);
}
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: .45rem; }
footer a { color: var(--text-body); text-decoration: none; font-size: .9rem; }
footer a:hover { color: var(--accent-text); text-decoration: underline; }
/* Fliesstext im Fuss bewusst --text-body statt --text-muted: gedaempfte
   Schrift auf der gedaempften Fussflaeche ergab im hellen Modus 4,34:1
   und lag damit unter dem Grenzwert 4,5 (gemessen 14.08.). Mit
   --text-body sind es 9,9:1. */
footer p, footer .footer-address { color: var(--text-body); font-size: .9rem; font-style: normal; line-height: 1.7; }
footer .footer-address strong, footer .footer-address b { color: var(--text-body); }
footer .footer-logo-image { height: 48px; width: auto; }
footer .footer-bottom {
  margin-top: var(--gap-lg);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line);
  text-align: center;
}
footer .footer-copyright { color: var(--text-muted); font-size: .82rem; margin: 0; }

/* Der Bewertungsknopf traegt feste Farben als style-Attribut im Markup
   (weisse Flaeche, dunkle Schrift). In beiden Modi lesbar, deshalb
   bewusst unangetastet. */

/* ── Hinweisleiste Cookies ────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  padding: var(--gap-md);
  background: var(--surface-raised);
  border-top: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lifted);
}
.cookie-banner-content {
  width: min(1100px, 100% - 2rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  flex-wrap: wrap;
}
.cookie-banner h3 { color: var(--text-strong); font-size: var(--step-1); margin: 0 0 .3rem; }
.cookie-banner p { color: var(--text-muted); font-size: .88rem; margin: 0; }
.cookie-banner-actions { display: flex; align-items: center; gap: var(--gap-sm); }
.cookie-banner .btn-accept {
  padding: .6rem 1.4rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  cursor: pointer;
}
.cookie-banner .btn-accept:hover { background: var(--accent-bright); }
.cookie-banner .btn-more { color: var(--text-muted); font-size: .88rem; }