/* GastroMotivator 2026 — Kompatibilitätsschicht.
   Bringt Seiten, die noch auf tokens.css + site.css (Relaunch „hell“, 08/2026) gebaut sind,
   in den neuen Look, ohne ihren Inhalt anzufassen. Laden NACH den Inline-Styles der Seite
   und NACH gm-2026.css. Wird überflüssig, sobald eine Seite auf gm-Bausteine umgebaut ist. */

/* Alte Display-Schrift (Archivo Black, immer weight 400 gesetzt) -> Geist SemiBold, ohne jede Seite anzufassen */
@font-face{font-family:'GM Display';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-display-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'GM Display';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-display-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Alte Variablen -> neue Tokens (gleiche Namen wie in tokens.css, späterer Block gewinnt) */
:root {
  --bone: var(--bg);
  --bone-2: var(--surface);
  --pergament: var(--surface-sunk);
  --ink-mute: var(--ink-muted);           /* war #8d8574 (3.4:1) -> jetzt 5.9:1 */
  --sienna: var(--glut-ink);              /* kleine Akzentschrift + Flächen mit weißer Schrift: AA-tauglich (Sienna dunkel) */
  --sienna-deep: #7e3b26;
  --sienna-light: #f6e8e2;
  --olive: var(--glut-ink);
  --olive-soft: rgba(22, 19, 15, 0.55);
  --green: var(--ok);
  --marker-green: #ffd9c7;
  --marker-ink: var(--ink);
  --font-display: 'GM Display', var(--font-sans);
  --font-body: var(--font-sans);
  --font-label: var(--font-mono);
}
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* Überschriften: engerer Satz wie im neuen System */
html body :is(.hero-title, .section-title, .service-bridge-title, .step-title, .more-card .title, .ask-gm-title) { letter-spacing: -0.035em; }
html body .hero-title em, html body .section-title em, html body .service-bridge-title em { font-style: normal; color: var(--glut); }

/* Labels: Mono, weniger gesperrt */
html body :is(.hero-eyebrow, .section-eyebrow, .service-bridge-kicker, .ask-gm-kicker, .more-card .label, .related-label) { letter-spacing: .06em; font-weight: 500; color: var(--glut-ink); }
html body :is(.section-eyebrow, .hero-eyebrow)::after { height: 3px; width: 40px; border-radius: 2px; background: var(--glut); }

/* Buttons */
html body .btn-primary { border-radius: var(--radius-md); font-weight: 500; font-size: 15px; padding: 14px 22px; background: var(--accent-fill); color: var(--on-accent); }
html body .btn-primary:hover, html body .btn-primary:focus { background: var(--glut-ink); color: var(--on-accent); }
html body .btn-secondary { border-radius: var(--radius-md); font-weight: 500; }
html body :is(.ask-gm-chips button, .ask-gm-input-row input) { border-radius: var(--radius-sm); }

/* Karten aus site.css bekommen die neuen Ecken */
html body :is(.step, .more-card, .voice, .for-path, .ask-gm-panel, .ask-gm-result, .who-portrait img, .home-services-grid .step) { border-radius: var(--radius-lg); }
html body .who-portrait img { overflow: hidden; }


/* Kontrast-Fixes (axe-geprüft 10.10.2026) */
/* Sienna-Kasten (.for): Links weiß statt dunkelgrau */
html body .for .secondary-paths a { color: var(--on-accent) !important; border-bottom-color: rgba(255, 255, 255, 0.5); } /* !important: Seiten setzen color:inherit inline */
html body .for .secondary-paths a:hover { color: var(--on-accent); border-bottom-color: #ffffff; }
/* Dunkle Flächen: Sienna als Schrift wird zum hellen Sienna */
html body :is(.form-block, .selektion-col.falsch) :is(.section-eyebrow, .selektion-eyebrow) { color: var(--glut-on-band); }
html body :is(section[style*="background:var(--ink)"], section[style*="background: var(--ink)"]) { --sienna: var(--glut-on-band); --olive: var(--glut-on-band); }
/* Listenmarken auf Keynote: keine halbe Deckkraft */
html body .selektion-list .mark { opacity: 1; color: var(--ink-muted); }
html body .selektion-col.falsch .selektion-list .mark { color: var(--on-band-muted); }
/* Dunkle Kästen der Seiten (background: var(--ink)): Sienna-Schrift darin wird helles Sienna.
   Nicht für .form-block / .inline-cta / .final-cta, weil dort Sienna auch als Flächenfarbe mit heller Schrift dient. */
html body :is(.pullquote, .selektion-col.falsch, .kauf-card.frei, .score-block, .zitate-strip, .fehler-box, .selfcheck, .gl-formula, .code-block, .voice-col.dont, .logo-preview.bg-ink, .gl-table th) { --sienna: var(--glut-on-band); --olive: var(--glut-on-band); }
html body .final-cta-eyebrow { color: var(--glut-on-band); }
/* Altes dunkles „Amber“-Template (nur 6 NL-Blogartikel nutzen diese Variablen) -> helles System */
:root { --dark: var(--bg); --dark-2: var(--surface); --dark-3: var(--surface-sunk); --footer: var(--surface-sunk); --amber: var(--glut-ink); --amber-light: var(--glut); --amber-pale: #f6e8e2; --amber-border: rgba(184, 90, 61, 0.3); --white: var(--ink); --text: var(--ink-soft); --muted: var(--ink-muted); --border: var(--line); }
html body .takeaway-box li { color: var(--ink-soft); }
html body .post-body em { color: var(--ink); }

/* Große Seitenüberschrift (.hero-title, site.css bis 148px) auf die Größe des neuen Systems: 80px wie .gm-display,
   bis 900px Breite höchstens 46px. Doppelte Klasse schlägt .hero-home/.hero-compact/.buch-hero .hero-title.
   Blogartikel setzen ihre Größe inline (max. 80px) und bleiben unberührt; nur die 88px-Inline-Größe (KI-Gastronomie) wird gedeckelt.
   Roelof 10.10.2026: „Wissen“ (/blog/) hatte 148px statt 80px wie die Startseite. */
html body .hero-title.hero-title { font-size: 80px; }
html body .hero-title.hero-title[style*="88px"] { font-size: clamp(40px, 7vw, 80px) !important; }
@media (max-width: 900px) {
  html body .hero-title.hero-title { font-size: min(46px, 11.5vw); }
}

/* ---------- Auswahl-Raster als Kästchen (wie der Wegweiser auf der Startseite) ----------
   Roelof 10.10.2026: „statt das hier" — die alten Raster mit dunklen Linien (Leistungen A–D, Alle Leistungen,
   Kontaktwege, Weiterlesen, Blog-Highlights, Blog-Archiv, Glossar) werden einzelne weiße Kästchen:
   feine Kante, runde Ecken, Sienna-Rand beim Drüberfahren. Texte bleiben, nur der Look ändert sich.
   Die KI-Karte auf /beratung/ ist dunkel wie auf der Startseite. */
html body .hub-grid, html body .competence-grid, html body .ways-grid, html body .article-links-grid,
html body .featured-grid, html body .archive-grid, html body .glossar-grid { gap: var(--space-3); border: 0; background: none; }
html body .hub-card, html body .competence-card, html body .ways-grid > .way, html body .article-link-card,
html body .featured-card, html body .archive-card, html body .glossar-card {
  display: flex; flex-direction: column; min-width: 0; height: 100%;
  padding: var(--space-5); background: var(--surface); color: var(--ink); text-decoration: none; opacity: 1;
  border: var(--hairline) solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .15s ease, transform .15s ease;
}
html body .hub-card:hover, html body .competence-card:hover, html body .ways-grid > .way:hover, html body .article-link-card:hover,
html body .featured-card:hover, html body .archive-card:hover, html body .glossar-card:hover {
  background: var(--surface); border-color: var(--glut); transform: translateY(-2px); padding-left: var(--space-5); opacity: 1;
}
/* Kleine Überschrift (Label) */
html body .hub-card .hub-num, html body .competence-card .label, html body .ways-grid .way-label, html body .article-link-card .label,
html body .featured-card .feat-label, html body .archive-card .arch-meta, html body .glossar-card .gl-label {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--glut-ink); margin: 0 0 var(--space-3);
}
html body .archive-card .arch-meta .topic { color: var(--glut-ink); }
/* Titel */
html body .hub-card .hub-title, html body .competence-card h2, html body .ways-grid .way-value, html body .article-link-card .title,
html body .featured-card .feat-title, html body .archive-card .arch-title, html body .glossar-card .gl-term {
  font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 var(--space-3); overflow-wrap: break-word;
}
/* Text */
html body .hub-card .hub-body, html body .competence-card p, html body .ways-grid .way-note, html body .article-link-card .desc,
html body .featured-card .feat-desc, html body .archive-card .arch-desc, html body .glossar-card .gl-desc {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--ink-muted); margin: 0;
}
/* Link unten, wie „Das ist mein Thema →" */
html body .hub-card .hub-foot, html body .competence-card .competence-link, html body .featured-card .feat-foot, html body .archive-card .arch-link {
  margin-top: auto; padding-top: var(--space-4); border: 0; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--glut-ink);
}
html body .hub-card .hub-arrow, html body .featured-card .feat-arrow { font-family: var(--font-sans); font-size: 14px; color: inherit; }
html body .hub-card .hub-body { margin-bottom: 0; }
/* Leistungen A–D: vier nebeneinander wie auf der Startseite */
html body .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1140px) { html body .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { html body .hub-grid { grid-template-columns: minmax(0, 1fr); } }
/* KI-Karte dunkel */
html body .hub-card[href="/ki-beratung/"], html body .competence-card[href="/ki-beratung/"] { background: var(--band); border-color: var(--band); color: var(--on-band); }
html body .hub-card[href="/ki-beratung/"]:hover, html body .competence-card[href="/ki-beratung/"]:hover { background: var(--band); border-color: var(--glut); }
html body .hub-card[href="/ki-beratung/"] .hub-title, html body .competence-card[href="/ki-beratung/"] h2 { color: var(--on-band); }
html body .hub-card[href="/ki-beratung/"] .hub-body, html body .competence-card[href="/ki-beratung/"] p { color: var(--on-band-muted); }
html body .hub-card[href="/ki-beratung/"] .hub-num, html body .competence-card[href="/ki-beratung/"] .label,
html body .hub-card[href="/ki-beratung/"] .hub-foot, html body .competence-card[href="/ki-beratung/"] .competence-link { color: var(--glut-on-band); }
@media (max-width: 700px) {
  html body .hub-card, html body .competence-card, html body .ways-grid > .way, html body .article-link-card,
  html body .featured-card, html body .archive-card, html body .glossar-card { padding: var(--space-5) var(--space-4); }
  html body .hub-card:hover, html body .competence-card:hover, html body .ways-grid > .way:hover, html body .article-link-card:hover,
  html body .featured-card:hover, html body .archive-card:hover, html body .glossar-card:hover { padding-left: var(--space-4); }
}

/* ---------- Ein Label-Stil auf allen Seiten (Roelof 10.10.2026: „hier sind die Sachen unterschiedlich") ----------
   Kleine Überzeilen/Labels waren je nach Seite 11–20 px, fett, weit gesperrt, teils als Fließtext gesetzt
   (z. B. „Was am Ende da liegt" auf /methode/, „Wer berät", „Mein Fazit" in 35 Artikeln) oder mit rosa Textmarker.
   Jetzt überall wie auf der Startseite: Mono, 12 px, normal stark, .06em, Großbuchstaben. Farbe bleibt, wie sie ist
   (hell auf dunklen Flächen). :not(#gm-label) hebt die Regel über die seiteneigenen Container-Regeln (.prose p usw.). */
html body :is(.section-eyebrow, .hero-eyebrow, .related-label, .takeaway-label, .extra-eyebrow, .legal-stand, .stat-label,
  .acliff-eyebrow, .action-eyebrow, .article-brief-label, .archive-divider-label, .case-label, .method-step .num, .act-num,
  .phase-label, .scenario-label, .reason-num, .kauf-format, .ki-eyebrow, .q-block-label, .q-axis-label, .toc-label, .toc-title,
  .insight-eyebrow, .observation-eyebrow, .reveal-eyebrow, .selektion-eyebrow, .persona-num, .suende-num, .fehler-label,
  .teil-number, .zitat-origin, .final-cta-eyebrow, .score-eyebrow, .selfcheck-eyebrow, .briefing h4, .post-meta-item,
  .post-cta-label, .takeaway-box-label, .author-role, .share-label, .article-meta span, .gl-related h3):not(#gm-label) {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
}
/* Labels, die direkt im HTML gestylt sind (style="font-family:var(--font-label)…uppercase") */
html body [style*="font-label"][style*="uppercase"] {
  font-family: var(--font-mono) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .06em !important;
}
/* Dunkles Sienna (alt) -> Sienna wie überall, nur auf hellem Grund */
html body :is(.acliff-eyebrow, .action-eyebrow, .article-brief-label, .case-label, .method-step .num, .observation-eyebrow, .reveal-eyebrow) { color: var(--glut-ink); }
html body [style*="font-label"][style*="--sienna-deep"] { color: var(--glut-ink) !important; }
/* Sechs alte NL-Artikel: Überschriften noch in Archivo Black / Buttons in Public Sans */
html body :is(.post-header h1, .post-title, .post-body h1, .post-body h2, .post-body h3, div.author-name):not(#gm-label) { font-family: var(--font-display); }
html body :is(.share-btn, .back-btn) { font-family: var(--font-sans); }

/* ---------- Feine Linien statt dicker schwarzer (Roelof 10.10.2026, „Weg 2") ----------
   Alte Seiten trennten Abschnitte mit 1–3 px Schwarz; die Startseite nutzt eine feine Linie (1 px, --line).
   Gemessen auf allen 90 Seiten, hier jede Fundstelle. Sienna-Akzentbalken links (Zitate, Kästen) und die
   dunkle KI-Karte bleiben bewusst. */
html body :is(.beratung-output, .founding-output, .planning-output, .ki-output, .kitchen-output, .method-output,
  .mietkoch-output, .number-box, .phase-grid, .phases-grid, .selektion):not(#gm-line) {
  border-top: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line);
}
html body :is(.act, .method-step, .reason, .action, .area-card, .article-brief, .author-block, .extra, .gl-related,
  .kauf-grid, .quoten-table, .related, .teile-grid, .tool-card, .kauf-block, .legal-page h2, .faq-list):not(#gm-line) {
  border-top: var(--hairline) solid var(--line);
}
html body :is(.archive-divider, .faq-item):not(#gm-line) { border-bottom: var(--hairline) solid var(--line); }
html body :is(.gl-table, .gl-content table, table) :is(td, th):not(#gm-line) { border-color: var(--line); }
/* Inline gesetzte Linien (u. a. /mietkoch/) */
html body [style*="border-top: 2px solid var(--ink)"], html body [style*="border-top: 1px solid var(--ink)"] { border-top: var(--hairline) solid var(--line) !important; }
/* Zweitbuttons: 1 px Rand wie auf der Startseite (Farbe bleibt je Fläche) */
html body .btn-secondary { border-width: var(--hairline); }
html body [style*="border:1.5px solid var(--ink)"] { border-width: var(--hairline) !important; }
/* Altes Website-Orange #D4501F in Link-Unterstreichungen (--marker-soft, 22 Seiten) -> Logo-Sienna */
:root { --marker-soft: rgba(184, 90, 61, 0.25); }