/* GastroMotivator 2026 — Feinschliff (21.10.2026, Impeccable Craft-Floor + Emil Kowalski Motion).
   Laden NACH gm-2026.css und gm-compat.css. Ändert keine Farbe, keine Schrift, keinen Text:
   nur Zeilenfall, Browser-Details und Bewegung. Rückbau = diese Datei nicht mehr laden. */

:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); }

/* ---------- Zeilenfall ---------- */
html body :is(h1, h2, h3, .gm-h, .hero-title, .section-title) { text-wrap: balance; }
html body :is(p, li, summary, .gm-lead, .gm-body) { text-wrap: pretty; }
.gm-hello > span { text-wrap: balance; }
.nw { white-space: nowrap; }

/* ---------- Browser-Details in Markenfarbe ---------- */
::selection { background: var(--glut); color: var(--on-accent); }
html body :is(input, textarea, select) { caret-color: var(--glut); accent-color: var(--glut); }

/* ---------- Bewegung: eigene Kurven, kurze Zeiten ---------- */
.gm-btn, html body :is(.btn-primary, .btn-secondary) {
  transition: background-color .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out), filter .16s var(--ease-out), transform .14s var(--ease-out);
}
.gm-btn .arr, .gm-card__go .arr { transition: transform .2s var(--ease-out); }
/* Druck-Feedback: der Knopf bestätigt den Klick */
.gm-btn:active, html body :is(.btn-primary, .btn-secondary):active, .gm-header__burger:active { transform: scale(.97); }
.gm-header__burger { transition: transform .14s var(--ease-out), background-color .16s var(--ease-out); }

.gm-card, .gm-weg, html body :is(.hub-card, .competence-card, .ways-grid > .way, .article-link-card, .featured-card, .archive-card, .glossar-card) {
  transition: border-color .18s var(--ease-out), transform .22s var(--ease-out);
}

/* FAQ: Plus dreht weich, Antwort blendet ein statt aufzuspringen */
.gm-faq summary::after { transition: transform .2s var(--ease-out); }
details[open] > :not(summary) { animation: gm-auf .22s var(--ease-out); }

/* Mobiles Menü klappt auf statt hart zu erscheinen */
@media (max-width: 1140px) {
  .gm-header.is-open nav { animation: gm-menue .2s var(--ease-out); transform-origin: top center; }
}

@keyframes gm-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gm-menue { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Hover-Effekte nur bei echter Maus — auf dem Handy bleiben sie sonst nach dem Tippen hängen */
@media (hover: none) {
  .gm-weg:hover, html body :is(.hub-card, .competence-card, .ways-grid > .way, .article-link-card, .featured-card, .archive-card, .glossar-card):hover { transform: none; }
  .gm-btn:hover .arr, .gm-card:hover .arr { transform: none; }
}

/* Weniger Bewegung, wenn das Gerät darum bittet (fehlte bisher ganz) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ======================================================================
   Durchsicht aller Seiten (21.10.2026): Fehler, die auf vielen Seiten gleich auftreten
   ====================================================================== */

/* Unsichtbare Texte (auch live): Sienna-Label auf Sienna-Box am Seitenende, schwarze Zitate auf schwarzem Kasten */
html body .for .section-eyebrow { color: var(--on-accent); opacity: .85; }
/* Zitat- und Fazitkästen der Blogartikel als GM2026-Karte: weiß, 1-px-Linie, Radius 20 px, Text in Tinte.
   Behebt zugleich die unsichtbaren Zitate (vorher schwarze Schrift auf schwarzem Kasten) und die vielen dunklen Flächen je Artikel. */
html body :is(.pullquote, .pull-quote, .takeaway, .takeaway-box) {
  background: var(--surface); background-image: none; color: var(--ink);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-lg);
}
html body :is(.pullquote, .pull-quote) :is(.pullquote-text, p, cite) { color: var(--ink); }
html body :is(.pullquote, .pull-quote) .pullquote-meta { color: var(--ink-muted); }
html body :is(.takeaway, .takeaway-box) li::marker { color: var(--glut); }

/* Mono-Labels der Alt-Seiten auf GM2026: .06em gesperrt, mindestens 12 px */
html body :is(.back-link, .back-btn, .post-tag, .share-btn, .share-btn span, .linkedin-origin, .mark, .service-bridge-links a,
  .progress-pos, .reveal-foot, .axis-focus, .axis-focus span, .recipe-meta span, .teil-kap, .legal-page h3, .tool-verdict,
  .lang-strip, .lang-strip strong, .pillar-meta span, .dot-sep, .article-brief a, .pullquote-meta, .ki-tool, .region-box strong,
  .case-meta span, .case-proof span, .case-links a) { letter-spacing: .06em; }
html body :is(.back-link, .post-tag, .share-btn, .share-btn span, .linkedin-origin, .reveal-foot, .axis-focus, .axis-focus span,
  .recipe-meta span, .tool-verdict, .pillar-meta span, .dot-sep, .pullquote-meta, .ki-tool, .case-meta span, .case-proof span) { font-size: 12px; }
html body .author-name { letter-spacing: .06em; }
html body .legal-page h3 { overflow-wrap: normal; hyphens: manual; }

/* Tippziele auf dem Handy: Menü-Knopf und Cookie-Knopf mindestens 44 px */
@media (max-width: 900px) {
  .gm-header__burger { min-height: 44px; min-width: 64px; }
  body #gm-cookie-reopen { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Überschriften auf dem Handy: lange Wörter mit echtem Trennstrich trennen statt mitten im Wort abzureißen
   (Alt-Seiten setzen overflow-wrap:anywhere -> „Bewertungsmanag|ement“). Nur Wörter ab 10 Zeichen. */
@media (max-width: 900px) {
  html body :is(h1, h2, h3, .hero-title, .section-title) { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}

/* Abstand: erster Absatz eines Artikels und erste Überschrift der Rechtstexte kleben an der Trennlinie */
/* Seiten setzen padding-top:0 inline (Abschnitt direkt unter dem Kopfbereich) -> nur dort Luft unter die Linie */
html body section.hero + section:is([style*="padding-top:0"], [style*="padding-top: 0"]) { padding-top: var(--space-7) !important; }
@media (max-width: 640px) { html body section.hero + section:is([style*="padding-top:0"], [style*="padding-top: 0"]) { padding-top: var(--space-6) !important; } }
html body .legal-page h2:first-of-type { margin-top: var(--space-6); padding-top: var(--space-6); }

/* Fußzeile überall auf dem Seitengrund (war je nach Seite weiß, Off-White oder Beige) */
html body .gm-footer { background: var(--bg); }

/* Meta-Zeile der Artikel: Angaben brechen als Ganzes um */
html body .article-meta > span:not(.sep) { white-space: nowrap; }

/* Altes Artikel-Template (6 NL-Artikel): Verlauf, rosa Kästen, dunkelblaue Autorbox -> GM2026 */
html body .header-bg-glow { display: none; }
html body .post-tag { background: var(--surface-sunk); border: 0; border-radius: var(--radius-sm); color: var(--glut-ink); }
html body .author-box { background: var(--surface); background-image: none; border: var(--hairline) solid var(--line); border-radius: var(--radius-lg); color: var(--ink); }
html body .author-box :is(h3, h4, p, span, strong, .author-name, .author-bio) { color: var(--ink); }
html body .author-box a { color: var(--glut-ink); }
html body .share-btn { border-radius: var(--radius-md); border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
html body :is(.pullquote, .pull-quote) .pullquote-text, html body .pull-quote > p:first-child { font-size: 20px; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; font-style: normal; }
/* Bild-Platzhalter ohne Bild (NL-Artikel) ausblenden; LinkedIn-Hinweis in Markenfarben statt LinkedIn-Blau */
html body .post-hero-img-placeholder { display: none; }
html body .linkedin-origin { color: var(--ink-muted); background: var(--surface-sunk); border-color: var(--line); border-radius: var(--radius-sm); }
html body .linkedin-origin svg { color: inherit; fill: currentColor; }
/* Reste, die gegen seiteneigene Styles verloren haben (höhere Spezifität nötig) */
html body .selektion-list .mark.mark { letter-spacing: .06em; }
html body p.ki-tool.ki-tool { font-size: 12px; letter-spacing: .06em; }
html body .selektion-col.richtig.richtig { border-width: var(--hairline); border-color: var(--line); }

/* Eckige Kästen der Alt-Seiten auf GM2026-Form: Karten Radius 20 px, Knöpfe und Felder 12 px */
html body :is(.selektion-col, .author-block, .gl-def, .gl-author, .kauf-card, .info-box, .toc, .area-card, .fehler-box,
  .inline-cta, .perspective, .ki-card, .selfcheck, .related, blockquote.example, .gl-formula, .region-box, .stat-block,
  .gl-warn, .pillar-link) { border-radius: var(--radius-lg); }
/* helle Hinweiskästen: feine Linie statt dickem Farbbalken links */
html body :is(.info-box, .gl-warn, .gl-def, .gl-author, .author-block, .region-box, .toc, .related, .perspective, .area-card,
  .ki-card, blockquote.example, .stat-block, .pillar-link) { border: var(--hairline) solid var(--line); }
html body :is(.btn-outline-light, .btn-outline, .back-btn) { border-radius: var(--radius-md); }
html body form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) { border-radius: var(--radius-md); }
/* Buchseiten: Preiskarten und Richtig/Falsch-Spalten als einzelne Karten mit Abstand */
html body .kauf-grid { gap: var(--space-3); border: 0; }
html body .kauf-card:not(.frei) { background: var(--surface); border: var(--hairline) solid var(--line); }
html body .selektion { gap: var(--space-3); }
html body .selektion-col.richtig.richtig { background: var(--surface); border: var(--hairline) solid var(--line); }
/* Handy: Brand-Seite stapelt die Schriftkarten, Buchseite zeigt erst Überschrift, dann Cover (kleiner) */
@media (max-width: 640px) {
  html body .bk-grid { grid-template-columns: minmax(0, 1fr); }
  html body .bk-type { overflow-wrap: break-word; }
  html body .buch-hero-grid > .buch-cover-wrap, html body .buch-hero-grid > :has(.buch-cover-wrap) { order: 2; max-width: 240px; margin-inline: auto; }
}
html body .bk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { html body .bk-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Restbefunde DE-Kernseiten, Blog 2, Glossar ---------- */
/* Verlaufskasten /beratung/ -> flache Karte */
html body .audit-cliff { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-lg); }

/* Zweit-Knöpfe: Geist statt Mono-Versalien, gleiche Größe wie der Erstknopf (CTA-Band, Hero /mietkoch/) */
html body .btn-secondary, html body .btn-primary { font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { html body .for :is(.btn-primary, .btn-secondary) { width: 100%; } }

/* Autorbox: feine Linie rundum statt dickem Balken links */
html body .author-block.author-block { border: var(--hairline) solid var(--line); }
/* Hinweis im Glossar: weiß statt Pfirsich, lesbare Schrift */
html body .gl-warn.gl-warn { background: var(--surface); font-size: 16px; }
/* Fazit-Kasten: Kernaussagen in Fließtextgröße */
html body :is(.takeaway, .takeaway-box) :is(li, p:not(.takeaway-label)) { font-size: 16px; line-height: 1.55; }
/* Glossar-Einträge: Text so groß wie in den Artikeln */
html body :is(.gl-def, .gl-def p, .gl-author, .gl-author p) { font-size: 16px; line-height: 1.6; }
html body .gl-author { font-size: 14px; }

/* Glossar-Tabellen auf dem Handy: kleiner setzen und sauber trennen statt mitten im Wort abreißen */
@media (max-width: 640px) {
  html body .gl-table { font-size: 13px; }
  html body .gl-table :is(th, td) { padding: 8px 6px; overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
  html body .gl-table th { letter-spacing: .02em; }
}

/* /methode/: Schritt-Überschriften eine Stufe unter der Abschnitts-Überschrift */
html body .method-step h2 { font-size: clamp(28px, 3.2vw, 40px); }

/* Telefonnummern brechen nie um */
html body a[href^="tel:"] { white-space: nowrap; }

/* ---------- Nachprüfung 23.10.2026: Nebenwirkungen und Reste ---------- */
/* Silbentrennung nur in deutschen Überschriften, nur lange Wörter, nie in Kickern (EN brach „insolven-cies“) */
@media (max-width: 900px) {
  html body :is(h1, h2, h3, .hero-title, .section-title) { -webkit-hyphens: manual; hyphens: manual; }
  html body :is(h1, h2, h3, .hero-title, .section-title):lang(de) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
  html body :is(.hero-eyebrow, .section-eyebrow, .gm-label, .gm-kicker) { -webkit-hyphens: manual !important; hyphens: manual !important; }
}
html body :is(.hero-eyebrow, .section-eyebrow) { text-wrap: balance; }

/* Gerundete Kästen: dicke Farbkante links lief als Sichel um die Ecke -> feine Linie */
html body :is(.fehler-box, blockquote.example, .stat-block, .info-box, .inline-cta, .selfcheck) { border-left-width: var(--hairline); }
/* Buchseiten: alte Rasterlinie oben weg, Abstand nach unten */
html body :is(.kauf-grid, .selektion, .teile-grid) { border-top: 0; border-bottom: 0; }
html body .selektion { margin-bottom: var(--space-7); }
html body .teile-grid { gap: var(--space-3); }
html body .teil-card { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-lg); }

/* Kennzahl im Insolvenz-Artikel wieder groß */
html body .stat-block .stat-number { font-size: clamp(48px, 7vw, 80px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--glut); margin: 0 0 8px; }

/* Knopf ohne Klasse im dunklen CTA-Kasten (KI-Leitfaden EN/NL/DE) wie GM-Knopf */
html body .inline-cta a:not([class]) { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 13px 20px; border-radius: var(--radius-md); background: var(--accent-fill); color: var(--on-accent); font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; }

/* Themen-Kacheln im Kontaktformular wie die Felder: Radius 12 px */
html body .theme-option label { border-radius: var(--radius-md); }

/* Glossar: Weiterführend-Links in Sienna, Domain in der Autorbox bricht nicht, Kästen gleicher Innenabstand */
html body .gl-related a { color: var(--glut-ink); }
html body .gl-author a { white-space: nowrap; }
html body :is(.gl-def, .gl-warn) { padding: 20px 24px; }

/* Karten mit Innenabstand (vorher nur Linie oben -> Inhalt klebte nach dem Runden an der Linie) */
html body :is(.author-block, .related) { padding: 28px 32px !important; border-left-width: var(--hairline) !important; }
@media (max-width: 640px) { html body :is(.author-block, .related) { padding: 22px 20px !important; } }
html body .author-box { padding: 24px 28px; }
/* Zitatkarten: oben und unten gleich viel Luft */
html body :is(.pullquote, .pull-quote) { padding: 28px 32px; }
html body :is(.pullquote, .pull-quote) > :first-child { margin-top: 0; }
html body :is(.pullquote, .pull-quote) > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { html body :is(.pullquote, .pull-quote) { padding: 22px 20px; } }
/* Altes NL-Template: CTA-Kasten, Teilen-/Zurück-Knöpfe, Werkzeug-Etiketten */
html body .post-cta { background: var(--surface); background-image: none; border: var(--hairline) solid var(--line); border-radius: var(--radius-lg); }
html body .post-cta a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 13px 20px; border-radius: var(--radius-md); background: var(--accent-fill); color: var(--on-accent); font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; }
html body :is(.share-btn, .back-btn) { font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; border: var(--hairline) solid var(--line-strong) !important; color: var(--ink); background: var(--surface); }
html body .tool-verdict { border-radius: var(--radius-sm); }
/* Zweitknöpfe auf dunklen Bändern wie die übrigen Knöpfe */
html body .btn-outline-light { font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { html body .final-cta-buttons > * { width: 100%; justify-content: center; } }
/* Fazit-Listen: Fließtextgröße auch gegen seiteneigene Regeln */
html body :is(.takeaway, .takeaway-box) li { font-size: 16px !important; line-height: 1.55 !important; }
/* Handy: gestapelte Knöpfe in Bändern gleich breit */
@media (max-width: 640px) {
  html body .gm-ctas > .gm-btn, html body .gm-band .gm-btn { flex: 1 1 100%; justify-content: center; }
  html body :is(.area-card, .fehler-box) { padding: 22px 20px; }
}
/* E-Mail-Adressen brechen nicht um */
html body a[href^="mailto:"] { white-space: nowrap; }
/* Glossar-Tabellenkopf: nur an gesetzten Stellen trennen */
html body .gl-table th { -webkit-hyphens: manual; hyphens: manual; }
