/* ==========================================================================
   agencyg.de, Neugestaltung November 2026
   Grundlage: DESIGN.md im Projektwurzelverzeichnis (Linear-System, Akzent
   Agency-Gold, heller und dunkler Modus).

   Diese Datei laedt als LETZTE Stildatei. Sie definiert die Variablen aus
   tokens.css neu, damit Startseite, Neubau-Bauteile und die rund 1800
   uebernommenen Seiten gemeinsam mitziehen, und gestaltet Kopf, Fuss,
   Artikel, Uebersichten und Karten neu.

   Modus: Klasse `light-mode` am <html> (setzt das Kopfskript im Layout),
   `light-dark()` waehlt danach den Wert.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* Flaechenleiter (Linear), hell aus den Inverse-Tokens */
  --bg:        light-dark(#ffffff, #08090a);
  --surface:   light-dark(#f6f7f7, #0f1011);
  --surface-2: light-dark(#f0f1f2, #141516);
  --surface-3: light-dark(#e9eaec, #18191a);
  --line:      light-dark(#e3e4e7, #23252a);
  --line-2:    light-dark(#cfd1d6, #34343a);
  --rand: var(--line);

  /* Text */
  --tx:   light-dark(#0b0c0e, #f7f8f8);
  --tx-2: light-dark(#33363c, #d0d6e0);
  --tx-3: light-dark(#5d626b, #8a8f98);
  --text-primary: var(--tx);
  --text-secondary: var(--tx-2);
  --text-tertiary: var(--tx-3);
  --ds-mute: light-dark(#5d626b, #8a8f98);

  /* Akzent: nur Gold */
  --brand: #e2b649;
  --brand-ink: #17120a;
  --brand-hover: #ecc566;
  --brand-text: light-dark(#7a5a12, #e2b649);
  --brand-soft: color-mix(in oklab, var(--brand) 12%, transparent);
  --brand-line: color-mix(in oklab, var(--brand) 38%, transparent);
  --focus: light-dark(#7a5a12, #e2b649);
  --live: light-dark(#1f8a3a, #27a644);

  /* Radien (Linear) */
  --r-1: 6px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;

  /* Masse */
  --wrap: 1280px;
  --gutter: clamp(1rem, 3vw, 2rem);
  --header-h: 60px;
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --grid-gap: clamp(0.75rem, 1.6vw, 1rem);

  /* Schrift (Linear-Stufen mit Inter) */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-7: clamp(2.5rem, 1.7rem + 3.2vw, 3.5rem);   /* display-lg 56 */
  --fs-6: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem); /* display-md 40 */
  --fs-5: clamp(1.125rem, 1.05rem + .35vw, 1.375rem); /* card-title 22 */
  --fs-4: clamp(1rem, .97rem + .14vw, 1.125rem);
  --fw-max: 600;
  --fw-head: 600;
  --ls-h1: -0.032em;
  --ls-h2: -0.025em;

  --btn-h-md: 40px; --btn-pad-md: 14px;
  --btn-h-sm: 34px; --btn-pad-sm: 12px;
  --btn-h-lg: 48px; --btn-pad-lg: 20px;

  --shadow-1: none;
  --shadow-2: light-dark(0 12px 32px rgba(15, 17, 20, .10), 0 16px 40px rgba(0, 0, 0, .45));
  --kante: inset 0 1px 0 light-dark(rgba(255,255,255,0), rgba(255,255,255,.04));
}
html.light-mode { color-scheme: light; }

html { background: var(--bg); }
body {
  background: var(--bg) !important;
  color: var(--tx);
  font-family: var(--font);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in oklab, var(--brand) 35%, transparent); color: var(--tx); }
:focus-visible { outline: 2px solid color-mix(in oklab, var(--focus) 70%, transparent); outline-offset: 2px; }

/* Ueberschriften: 600, stark negative Laufweite */
h1, h2, h3 { font-family: var(--font); font-weight: 600; }
h1 { letter-spacing: var(--ls-h1); }
h2 { letter-spacing: var(--ls-h2); }
h3 { letter-spacing: -0.015em; }

/* --- Knoepfe -------------------------------------------------------------- */
.knopf {
  min-block-size: var(--btn-h-md);
  padding: 8px var(--btn-pad-md);
  border-radius: var(--r-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  filter: none !important;
}
.knopf-voll { background: var(--brand); color: var(--brand-ink) !important; border: 1px solid transparent; }
.knopf-voll:hover { background: var(--brand-hover); }
.knopf-rand {
  background: var(--surface);
  color: var(--tx) !important;
  border: 1px solid var(--line);
  box-shadow: var(--kante);
}
.knopf-rand:hover { background: var(--surface-2); border-color: var(--line-2); }
.knopf-klein { min-block-size: var(--btn-h-sm); padding: 6px var(--btn-pad-sm); }
.knopf-gross { min-block-size: var(--btn-h-lg); padding: 10px var(--btn-pad-lg); font-size: 15px; }
@media (max-width: 767px) { .knopf { min-block-size: 44px; } .knopf-klein { min-block-size: 40px; } }
.knopf svg { flex: 0 0 auto; }

/* --- Kopfzeile ------------------------------------------------------------ */
header[data-kopf] {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-block-end: 1px solid var(--line);
}
header[data-kopf] .bahn { max-inline-size: var(--wrap); }
.kopf-innen { min-block-size: var(--header-h); gap: 12px; }
.kopf-marke { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; gap: 10px; }
.kopf-marke img { inline-size: 28px; block-size: 28px; }
.kopf-nav { gap: 2px; }
.kopf-link {
  color: var(--tx-3) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--r-2);
  transition: color .14s ease, background-color .14s ease;
}
.kopf-link:hover { color: var(--tx) !important; background: var(--surface-2); }
.kopf-lumo-link { display: inline-flex; align-items: center; gap: 6px; }
.kopf-lumo-link img { inline-size: 20px; block-size: 20px; }
.kopf-neu {
  font-size: 10px; font-weight: 600; letter-spacing: .02em; line-height: 1;
  padding: 3px 5px; border-radius: 4px;
  color: var(--brand-text); background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.kopf-klapp, .sprach-liste {
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  padding: calc(6px + 8px) 6px 6px;
}
.kopf-klapp { min-inline-size: 15rem; }
.kopf-eintrag { font-size: 14px; color: var(--tx-2) !important; border-radius: var(--r-2); padding: 8px 10px; }
.kopf-eintrag:hover { background: color-mix(in oklab, var(--tx) 7%, transparent); color: var(--tx) !important; }
.kopf-rechts { gap: 6px; }
.suche-knopf {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-2) !important;
  color: var(--tx-3) !important;
  box-shadow: none !important;
}
.suche-knopf:hover { border-color: var(--line-2) !important; color: var(--tx) !important; }
.suche-knopf kbd {
  background: var(--surface-2) !important; border: 1px solid var(--line) !important;
  color: var(--tx-3) !important; border-radius: 4px !important;
}
.thema-knopf {
  display: inline-grid; place-items: center;
  inline-size: 36px; block-size: 36px;
  border-radius: var(--r-2);
  border: 0;
  background: transparent;
  color: var(--tx-3);
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.thema-knopf svg { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.thema-knopf:hover { color: var(--tx); background: var(--surface-2); }
.thema-knopf:hover svg { transform: rotate(-18deg) scale(1.08); }
.thema-knopf .thema-sonne { display: none; }
html.light-mode .thema-knopf .thema-sonne { display: block; }
html.light-mode .thema-knopf .thema-mond { display: none; }
.kopf-shop { margin-inline-start: 6px; }
.kopf-handy-liste { background: var(--bg); border-block-end: 1px solid var(--line); }
.kopf-handy-gruppe > p { color: var(--tx-3) !important; }
@media (max-width: 767px) {
  .kopf-marke span { font-size: 15px; letter-spacing: -0.01em; }
}
@media (max-width: 440px) { .kopf-marke span { display: none; } }

/* --- Ueberzeilen, Titel ---------------------------------------------------- */
.t-ueber {
  font-size: 13px; font-weight: 500; letter-spacing: .4px; text-transform: none;
  color: var(--brand-text);
}
.t-titel { font-size: var(--fs-7); line-height: 1.08; letter-spacing: var(--ls-h1); font-weight: 600; }
.t-kopf { font-size: var(--fs-6); line-height: 1.15; letter-spacing: var(--ls-h2); font-weight: 600; }
.t-text { color: var(--tx-2); }
.t-klein { color: var(--tx-3); }

/* --- Karten und Raster ----------------------------------------------------- */
.karte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 24px;
  box-shadow: var(--kante);
  transition: background-color .16s ease, border-color .16s ease;
}
.karte:hover { background: var(--surface-2); border-color: var(--line-2); transform: none; }
.karte-titel { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.karte-text { font-size: 14px; color: var(--tx-3); }
.karte-mehr { color: var(--tx-2); font-size: 13px; font-weight: 500; }
.karte:hover .karte-mehr { color: var(--brand-text); }
.marke {
  border-radius: var(--r-dot, 9999px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--tx-2);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  letter-spacing: 0;
}
.aufruf {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 48px 24px;
  box-shadow: var(--kante);
}

/* --- Brotkrumen, Artikel ---------------------------------------------------- */
.krumen ol { font-size: 13px; color: var(--tx-3); }
.zurueck-link { color: var(--tx-3) !important; font-size: 14px; }
.zurueck-link:hover { color: var(--tx) !important; }
.artikel-kopf h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); line-height: 1.1; letter-spacing: -0.03em; }
.artikel-vorspann { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--tx-2); line-height: 1.5; letter-spacing: -0.01em; }
.artikel-verfasser { border-color: var(--line); }
.fliess { color: var(--tx-2); font-size: 17px; line-height: 1.65; letter-spacing: -0.005em; }
.fliess h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); letter-spacing: -0.025em; line-height: 1.2; }
.fliess h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.fliess a { color: var(--brand-text); text-decoration-color: color-mix(in oklab, var(--brand-text) 45%, transparent); }
.fliess code, .fliess pre { background: var(--surface); border-color: var(--line); }
.fliess pre { border-radius: var(--r-3); }
.fliess :is(th, td) { border-color: var(--line); }
.fliess th { background: var(--surface-2); }
.fliess blockquote { border-color: var(--brand); }
.fliess .glass-panel, .glass-panel {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-3) !important;
  box-shadow: var(--kante) !important;
  backdrop-filter: none !important;
}
@media (max-width: 767px) { .fliess { font-size: 16px; } }

/* --- Fusszeile --------------------------------------------------------------- */
.fuss {
  background: var(--bg);
  border-block-start: 1px solid var(--line);
  margin-block-start: 0;
}
.fuss .bahn { max-inline-size: var(--wrap); }
.fuss-raster { grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.fuss .t-ueber { color: var(--tx); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.fuss-link { font-size: 14px; color: var(--tx-3) !important; transition: color .14s ease; }
.fuss-link:hover { color: var(--tx) !important; }
.fuss-recht button.fuss-link { font-size: 14px !important; }
.fuss-unten { border-color: var(--line); }
.fuss-herkunft { color: var(--tx-3); }
.fuss-lumo {
  display: flex; align-items: center; gap: 12px;
  margin-block-start: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  max-inline-size: 22rem;
  box-shadow: var(--kante);
  text-decoration: none;
}
.fuss-lumo img { inline-size: 44px; block-size: 44px; flex: 0 0 44px; }
.fuss-lumo b { display: block; color: var(--tx); font-size: 14px; font-weight: 600; }
.fuss-lumo span { display: block; color: var(--tx-3); font-size: 13px; line-height: 1.4; }
.fuss-lumo-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-block-start: 4px; }
.fuss-lumo-links a { font-size: 13px; color: var(--brand-text) !important; text-decoration: none; font-weight: 500; }
.fuss-lumo-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr 1fr; } .fuss-marke { grid-column: 1 / -1; } }
@media (max-width: 560px) { .fuss-raster { grid-template-columns: 1fr 1fr; gap: 24px 16px; } }

/* --- Uebernommene Seiten: Grund und Flaechen ruhiger -------------------------- */
.uebernommen .agency-primary-button,
.uebernommen a.agency-primary-button {
  border-radius: var(--r-2) !important;
  background: var(--brand) !important;
  color: var(--brand-ink) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  transform: none !important;
}
.uebernommen .agency-primary-button:hover { background: var(--brand-hover) !important; }

/* Der Chatknopf steht unten rechts; am Handy Platz fuer die Rechtslinks. */
@media (max-width: 900px) { .fuss { padding-block-end: 120px; } }

/* --- Lumo-Chat unten rechts (agencyai.js, seit 11/2026 "Frag Lumo") ------------
   Das Widget bringt feste dunkle Werte mit; hier bekommen Knopf und Fenster die
   Flaechen der Seite, damit es im hellen Modus nicht als dunkler Block steht. */
html .kai-launcher, html .kai-fenster {
  --surface-1: light-dark(#ffffff, #0f1011);
  --surface-2: light-dark(#f6f7f7, #141516);
  --surface-3: light-dark(#f0f1f2, #18191a);
  --line-2: light-dark(#e3e4e7, #23252a);
  --tx: light-dark(#0b0c0e, #f7f8f8);
  --tx-2: light-dark(#33363c, #d0d6e0);
  --tx-3: light-dark(#5d626b, #8a8f98);
  --brand-text: light-dark(#7a5a12, #e2b649);
  --focus: light-dark(#7a5a12, #e2b649);
  --r-2: 8px; --r-3: 12px;
}
html .kai-launcher {
  block-size: 52px;
  padding-inline: 6px 18px;
  gap: 10px;
  background: var(--surface-3);
  color: var(--tx);
  border: 1px solid light-dark(#cfd1d6, #34343a);
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow-2);
}
html .kai-launcher:hover { background: var(--surface-2); transform: none; }
html .kai-launcher-glyph img { inline-size: 40px; block-size: 40px; border-radius: 9999px; background: light-dark(#f0f1f2, #1c1d1f); }
html .kai-launcher.ist-offen { padding-inline: 6px; }
html .kai-avatar img { border-radius: 9999px; background: var(--surface-3); }
html .kai-fenster { box-shadow: var(--shadow-2); }
@media (max-width: 640px) {
  html .kai-launcher { inset-block-end: 16px; inset-inline-end: 16px; block-size: 48px; }
  html .kai-launcher-glyph img { inline-size: 36px; block-size: 36px; }
}

/* --- Uebernommene Seiten im hellen Modus -----------------------------------
   seiten.css setzt je Stilgruppe feste Werte (--highlight-start:#e2b649,
   --text-primary:#eef2ff ...) in :where(), also mit 0 Spezifitaet. Eine
   Klasse genuegt, um sie auf die Tokens zu biegen. */
.uebernommen {
  --highlight-start: var(--brand-text);
  --highlight-end: var(--brand-text);
  --highlight-purple: var(--brand-text);
  --text-primary: var(--tx);
  --text-secondary: var(--tx-2);
  --text-tertiary: var(--tx-3);
  --glass-border: var(--line);
}
/* Feste Farben im Inhalt (aus daten/seiten.json, produkte.json), gedacht fuer dunklen Grund.
   Hinweis: einige stehen kaputt im HTML (rgba(255,223,150.65)), deshalb Teilmuster. */
html.light-mode .uebernommen :is([style*="#fff4cf"], [style*="#f1e6c9"], [style*="#eef2ff"], [style*="241,230,201"], [style*="242,233,214"]) { color: var(--tx) !important; }
html.light-mode .uebernommen :is([style*="#d6ab44"], [style*="#d6a321"], [style*="#e2b649"], [style*="#f0d79a"], [style*="#ffdf96"], [style*="255,223,150"]) { color: var(--brand-text) !important; }
html.light-mode .uebernommen [style*="255,255,255,.38"] { color: var(--tx-3) !important; }
html.light-mode .uebernommen :is(.companion-beta-badge, .page-kicker, .cl-version, .agency-kicker) { color: var(--brand-text) !important; }

/* Uebersichten und Brotkrumen auf dieselbe Bahn wie Kopf und Fuss (1280) */
.bahn-weit { max-inline-size: var(--wrap); }
html.light-mode .uebernommen .app-card span { color: var(--tx-2) !important; }

/* TopV-Zahl in der Fusszeile: keine zusaetzliche Deckkraft, sonst zu wenig Kontrast im hellen Modus */
.fuss-unten .t-klein[style*="opacity"] { opacity: 1 !important; }


/* --- Handy und Bewegung (Leon, 08.11.2026) ---------------------------------- */
.thema-wahl { display: flex; align-self: flex-start; flex: 0 0 auto; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9999px; background: var(--surface); }
.thema-wahl button { display: inline-grid; place-items: center; inline-size: 56px; block-size: 40px; border: 0; border-radius: 9999px; background: transparent; color: var(--tx-3); cursor: pointer; transition: color .18s ease, background-color .18s ease; }
html:not(.light-mode) .thema-wahl-dunkel, html.light-mode .thema-wahl-hell { background: var(--surface-3, var(--surface-2)); color: var(--tx); }

/* Kein Eintrag im Menue wird zusammengedrueckt, die Lumo-Karte passt in die Breite */
.kopf-handy-liste > * { flex: 0 0 auto; }
.kopf-handy-liste .fuss-lumo { box-sizing: border-box; inline-size: 100%; max-inline-size: none; margin-block-start: 0; min-inline-size: 0; }
.kopf-handy-liste .fuss-lumo > span { flex: 1 1 auto; min-inline-size: 0; }

@media (max-width: 767px) {
  .suche-knopf { border-color: transparent !important; background: transparent !important; }
  .sprach-menue > summary { border-color: transparent !important; background: transparent !important; }
}

/* Lumo-Chat am Handy nur als rundes Symbol, damit er keine Inhalte verdeckt */
@media (max-width: 767px) {
  .kai-launcher:not(.ist-offen) .kai-launcher-text { display: none; }
  .kai-launcher:not(.ist-offen) { padding: 9px !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .kopf-handy[open] .kopf-handy-liste { animation: agc-menue .3s cubic-bezier(.16,1,.3,1) both; }
  .kopf-handy[open] .kopf-handy-liste > * { animation: agc-hoch .42s cubic-bezier(.16,1,.3,1) both; }
  .kopf-handy[open] .kopf-handy-liste > :nth-child(2) { animation-delay: .04s; }
  .kopf-handy[open] .kopf-handy-liste > :nth-child(3) { animation-delay: .08s; }
  .kopf-handy[open] .kopf-handy-liste > :nth-child(n+4) { animation-delay: .12s; }
  .kopf-gruppe[open] > :not(summary), .sprach-menue[open] > :not(summary) { animation: agc-menue .22s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes agc-menue { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes agc-hoch { from { opacity: .01; transform: translateY(12px); } to { opacity: 1; transform: none; } }