/* SmartLife — Online · allgemein.css
   Lese- und Rechtskomponenten: Blog, Impressum, Datenschutz, AGB, Verzeichnis, Sitemap,
   Statusseiten und die Anleitungen des Cookie-Banner-Generators.
   Grundform: keine Radien, keine Schatten, 2px-Linien, alles linksbündig; in .sl-read und
   .sl-landing die Kastenform der Startseite (M143/M144, Dateiende).
   Vorher laden: sl-base.css (Schriften, Token, Basisregeln, Buttons, Bedienelemente,
   Formularfelder, Kopfleiste und Fuß; M142). Diese Datei enthält davon nichts mehr.
   Palette v3 „Signalgrün + Elektroblau" (M134): docs/redesignes/startseite-v3-2026-09-21.md. */

/* Farbige Kästen (Merksatz/Blockquote, Callout, Kontakt-Panel, Hinweis):
   im Dark Mode weißer Text statt Hellgrün/-blau für bessere Lesbarkeit. */
html[data-theme="dark"] .head-panel-contact p:last-child,
html[data-theme="dark"] .callout-text,
html[data-theme="dark"] .section-body blockquote,
html[data-theme="dark"] aside.note {
  color: var(--color-text);
}

/* Die globale Linkregel steht seit M142 in sl-base.css; ihre Standardtoken sind genau die
   dieser Familie (Grün 700, --color-link-hover, unterstrichen), deshalb steht hier nichts. */
strong { color: var(--color-text); }
li::marker { color: var(--color-accent); }
::selection { background: var(--color-accent-200); color: #0c1510; }
.grayscale img, img.grayscale { filter: grayscale(1); }

/* Kicker: grünes Quadrat + Versalien */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
}
.kicker::before { content: ""; width: 9px; height: 9px; background: var(--color-accent); flex: none; }

/* Kopfbereich */
.hero { max-width: 1240px; margin: 0 auto; padding: 54px clamp(20px, 5vw, 72px) 40px; }
.hero .kicker { margin-bottom: 22px; font-size: 12.5px; }
.page-title { font-size: clamp(32px, 4.5vw, 56px); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 0 -0.058em; max-width: 20ch; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 32px clamp(40px, 5vw, 88px); align-items: flex-start; }
.hero-main { flex: 1 1 380px; min-width: 0; }

/* Info-Panel im Kopf (z. B. Angaben gemäß § 5 TMG) */
.head-panel { flex: 1 1 300px; min-width: 0; max-width: 440px; border: 2px solid var(--color-divider); }
.head-panel-block { padding: 22px 26px 20px; }
.head-panel-label { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-accent-700); }
.head-panel-text { margin: 0; font-size: 15.5px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 86%, transparent); }
.head-panel-contact { background: var(--color-accent-2-100); border-top: 2px solid var(--color-divider); padding: 18px 26px 17px; }
.head-panel-contact p:last-child { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 600; color: var(--color-accent-2-900); }

/* Inhaltsbereich: TOC-Leiste + Artikel-Spalte */
.content-row { max-width: 1240px; margin: 0 auto; padding: 44px clamp(20px, 5vw, 72px) 96px; display: flex; gap: 0 clamp(36px, 4vw, 64px); align-items: flex-start; }
.toc-rail { display: none; flex: 0 0 232px; align-self: stretch; }
.toc-sticky { position: sticky; top: var(--sl-nav-offset, 96px); max-height: calc(100vh - var(--sl-nav-offset, 96px) - 16px); overflow: auto; }
.toc-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.toc-list { display: flex; flex-direction: column; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent); }
.toc-link {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  padding: 8px 0;
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}
.toc-link:hover { color: var(--color-accent-700); }
.toc-num { font-size: 12px; font-weight: 600; padding-top: 1px; color: var(--color-accent-700); font-feature-settings: "tnum" 1; }
.toc-divider { display: none; width: 2px; align-self: stretch; background: var(--color-divider); flex: none; }
.art-col { flex: 1 1 0; min-width: 0; max-width: 72ch; overflow-wrap: break-word; font-size: 16.5px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 86%, transparent); display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; }
.art-col p { margin: 0; }

/* Mobiles Inhaltsverzeichnis (Aufklapper) */
.toc-mobile { border: 2px solid var(--color-divider); }
.toc-mobile summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--color-text); list-style: none; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary svg { flex: none; transition: transform 0.18s ease; }
/* Aufklapp-Symbole (Plus/Kreuz) tragen Grün 700 statt der Buttonfläche Grün 500, die auf hellem Grund
   nur 2,6:1 erreicht. Die Regel überstimmt das Präsentationsattribut stroke="var(--color-accent)"
   der Inline-SVGs in allen Seiten und im SEO-Generator (CSS schlägt Präsentationsattribute). */
.toc-mobile summary svg path, .faq summary svg path { stroke: var(--color-accent-700); }
.toc-mobile[open] summary svg { transform: rotate(45deg); }
.toc-mobile summary span { flex: 1; }
.toc-mobile .toc-list { border-bottom: 0; padding: 2px 18px 14px; }
.toc-mobile .toc-link { padding: 11px 0; font-size: 14px; }

/* Nummerierte Abschnitte: 2px-Linie oben, Kicker-Nummer, H2 ~27px */
.section { border-top: 2px solid var(--color-divider); padding-top: 30px; scroll-margin-top: var(--sl-nav-offset, 96px); }
.section h2 { font-size: 27px; line-height: 1.16; letter-spacing: -0.015em; margin: 0 0 20px; }
.section h3 { font-size: 18.5px; line-height: 1.3; margin: 0; padding-top: 12px; letter-spacing: -0.005em; }
.section-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 17px; }

/* Listen mit eckigen grünen Bullets */
ul.squares { margin: 0; padding-left: 20px; list-style: square; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
ol.plain { margin: 0; padding-left: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }

/* Nummerierte Klauseln (AGB: 1.1, 1.2 …) */
.clauses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.clause { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; align-items: baseline; }
.clause-num { font-weight: 700; color: var(--color-accent-700); font-feature-settings: "tnum" 1; }
.clause > div { min-width: 0; }

/* Hervorhebungs-Kasten */
.callout { background: var(--color-accent-100); padding: 24px 28px 23px; margin: 4px 0 0; }
.callout-label { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-accent-700); }
.callout-text { margin: 0; font-size: 19px; line-height: 1.55; font-weight: 600; color: var(--color-accent-900); }

/* Fußnote (Quelle / Stand) */
.note { margin: 6px 0 0; font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* Reste des alten Fußbausteins: Die Autorenbox der Blogartikel
   (ai_blog_footer.html) trägt ihren Handlungsaufruf weiterhin in einem
   `.footer-col`, weil die Regel an diesen Vorfahren gebunden ist. Der Fuß
   selbst steht seit M142 als `.sl-footgrid` in sl-base.css. */
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.footer-col a { font-size: 14px; line-height: 1.5; text-decoration: none; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.footer-col a:hover { color: var(--color-accent-700); }
.footer-col a.footer-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; color: var(--color-accent-700); }
.footer-col a.footer-cta:hover { color: var(--color-link-hover); }


/* ————— Blog ————— */
.page-title-lg { max-width: none; font-size: clamp(38px, 4.8vw, 62px); margin-bottom: 24px; }
.hero-teaser { font-size: 17.5px; line-height: 1.62; max-width: 58ch; margin: 0 0 22px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.hero-meta { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; font-feature-settings: "tnum" 1; color: color-mix(in srgb, var(--color-text) 62%, transparent); }

/* Versus-Panel im Kopf (optional, für „A vs. B"-Artikel) */
.vs-panel { flex: 0 0 292px; border: 2px solid var(--color-divider); padding: 28px 26px 26px; }
.vs-over { margin: 0 0 5px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.vs-name { margin: 0 0 8px; font-size: 33px; line-height: 1.02; letter-spacing: -0.02em; font-weight: 700; color: var(--color-text); }
.vs-desc { margin: 0; font-size: 13px; line-height: 1.4; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.vs-mid { display: flex; align-items: center; gap: 10px; margin: 20px 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--color-accent-700); }
.vs-mid::before { content: ""; width: 9px; height: 9px; background: var(--color-accent); flex: none; }
.vs-mid::after { content: ""; flex: 1; height: 2px; background: var(--color-divider); }

/* Fließtext-Elemente, wie der Generator sie in .section-body ausgibt */
.section-body ul { margin: 0; padding-left: 20px; list-style: square; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.section-body ol { margin: 0; padding-left: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.section-body blockquote { margin: 4px 0 0; background: var(--color-accent-100); padding: 24px 28px 23px; font-size: 19px; line-height: 1.55; font-weight: 600; color: var(--color-accent-900); }
.section h4 { font-size: 16.5px; line-height: 1.35; margin: 0; padding-top: 6px; }

/* Karten-Raster */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.card { background: var(--color-surface); padding: 26px 26px 24px; }
.card-kicker { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
.card h3 { font-size: 21px; letter-spacing: -0.01em; margin: 0 0 12px; padding-top: 0; }
.card p { font-size: 15px; line-height: 1.62; }

/* Tabelle (erste Spalte = Begriff, fett) */
.table, .section-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; text-align: left; }
/* The generator wraps every article table in .table-scroll: a wide table scrolls inside the column (M181). */
.table-scroll { overflow-x: auto; }
.table th, .section-body table th { padding: 0 16px 10px 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 65%, transparent); border-bottom: 2px solid var(--color-divider); }
.table td, .section-body table td { padding: 12px 16px 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent); vertical-align: top; }
.table td:first-child, .section-body table td:first-child { font-weight: 700; color: var(--color-text); }

/* FAQ-Aufklapper */
.faq details { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); }
.faq summary { display: flex; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; font-weight: 700; font-size: 16.5px; color: var(--color-text); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent-700); }
.faq summary span { flex: 1; }
.faq summary svg { flex: none; transition: transform 0.18s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details > p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; max-width: 64ch; }

/* Abschlussband; Fläche und Motiv am Dateiende */
.cta-inner { max-width: 1240px; margin: 0 auto; padding: 64px clamp(20px, 5vw, 72px) 68px; }
.cta .kicker { margin-bottom: 22px; font-weight: 700; letter-spacing: 0.1em; color: color-mix(in srgb, #f3f7f4 85%, transparent); }
.cta .kicker::before { background: #22e07a; }
.cta-title { font-size: clamp(38px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 0 -0.058em; color: #f3f7f4; }
.cta-title span { display: block; }
.cta-title .cta-accent { color: #c4f5da; }
.cta-rule { height: 2px; background: color-mix(in srgb, #f3f7f4 30%, transparent); margin: 40px 0 26px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta :focus-visible { outline-color: #f3f7f4; }
/* Der CTA-Button liegt auf dem Bandverlauf: Active nur bis #20cf70 (3,12:1 am schwächsten Stopp),
   12 % dunkler (#1ec56b) fiele auf 2,82:1 – Ausnahme vom Active-Vertrag, siehe Designvertrag. */
.btn-on-accent { background: #22e07a; color: #04120a; gap: 26px; padding: 14px 18px; }
.btn-on-accent:hover { background: #3ff08c; color: #04120a; }
.btn-on-accent:active { background: #20cf70; color: #04120a; }
.btn-on-accent-outline { background: transparent; border: 2px solid #f3f7f4; color: #f3f7f4; gap: 26px; padding: 12px 16px; }
.btn-on-accent-outline:hover { background: color-mix(in srgb, #f3f7f4 8%, transparent); color: #ffffff; }
.btn-on-accent-outline:active { background: color-mix(in srgb, #f3f7f4 12%, transparent); color: #ffffff; }

/* ————— Bestehende Inhaltselemente der generierten Artikel ————— */

/* Bilder im Fließtext */
.section-body img { max-width: 100%; height: auto; }

/* Code-Blöcke und Inline-Code (Artikel nutzen <pre><code> und <code>) */
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
code { font-size: 0.92em; background: var(--color-surface); border: 1px solid var(--color-divider); padding: 0.08em 0.4em; }
pre { margin: 4px 0 0; padding: 20px 24px; background: var(--color-surface); border: 2px solid var(--color-divider); overflow-x: auto; font-size: 14px; line-height: 1.65; }
pre code { display: block; background: none; border: 0; padding: 0; font-size: inherit; }

/* Hinweiskasten aus Artikeln (aside.note) — wie Callout, nicht wie Fußnote */
aside.note { margin: 4px 0 0; padding: 24px 28px 23px; background: var(--color-accent-100); font-size: inherit; color: var(--color-accent-900); }
aside.note strong { color: inherit; }

/* Anker-Ziele für Zwischenüberschriften unterhalb der Sticky-Nav */
.section-body h3[id], .section-body h4[id] { scroll-margin-top: var(--sl-nav-offset, 96px); }

/* Seitenzähler im Footer (eigene Zeile über dem Raster) */
#pageCounterCon { margin: 0 0 20px; }

/* ————— Verzeichnis- und Sitemap-Seite ————— */

/* Vorschaukarte: vollständige Karte klickbar, Bild oben */
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { background: var(--color-accent-100); }
a.card:hover h3 { color: var(--color-accent-700); }
.card img { display: block; width: 100%; height: auto; margin: 0 0 18px; }

/* Kompakte Linkliste; der Generator gibt je Eintrag ein <p><a …></p> aus. */
.link-list { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent); }
.link-list p { margin: 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent); }
.link-list a { display: block; padding: 9px 0; font-size: 15.5px; line-height: 1.45; text-decoration: none; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.link-list a:hover { color: var(--color-accent-700); }

/* ————— Autoren- und Ansprechpartner-Box ————— */
.person { display: grid; grid-template-columns: 150px 1fr; gap: 24px 32px; align-items: start; }
.person-photo { width: 150px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; filter: grayscale(1); }
.person-kicker { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-accent-700); }
.person-name { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); }
.person-role { margin: 4px 0 14px; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.person-text { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; max-width: 52ch; color: color-mix(in srgb, var(--color-text) 86%, transparent); }
.person-meta { margin: 12px 0 0; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; font-feature-settings: "tnum" 1; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
@media (max-width: 680px) {
  .person { grid-template-columns: 1fr; }
  .person-photo { width: 120px; }
}
.person-nophoto { grid-template-columns: 1fr; }

/* ————— Formvokabular v3: .sl-read Leseseiten (M143), .sl-landing Verkaufsseiten (M144) —————
   :where() erhält die Spezifität der Grundregeln, allgemein_mob.css greift weiter. */
:where(.sl-read, .sl-landing) :is(.callout, .section-body blockquote) { border: 1px solid rgba(34, 224, 122, .3); border-radius: var(--radius-btn); background: var(--tint-green); }
:where(.sl-read, .sl-landing) :is(aside.note, pre, .toc-mobile, .faq details, .table, .section-body table) { border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); }
:where(.sl-read) .card { border: 1px solid var(--line); border-radius: var(--radius-card); }
:where(.sl-read, .sl-landing) .faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
:where(.sl-read, .sl-landing) .faq details { padding: 0 20px; }
:where(.sl-read, .sl-landing) .faq details[open] { border-color: rgba(34, 224, 122, .4); }
:where(.sl-read, .sl-landing) .faq details > :last-child { margin-bottom: 20px; }
/* Getrennte Ränder, sonst greift der Radius der Tabelle nicht. */
:where(.sl-read, .sl-landing) :is(.table, .section-body table) { border-collapse: separate; border-spacing: 0; }
:where(.sl-read, .sl-landing) :is(.table, .section-body table) :is(th, td) { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); }
:where(.sl-read, .sl-landing) :is(.table, .section-body table) th { border-bottom-color: var(--line2); }
:where(.sl-read, .sl-landing) :is(.table, .section-body table) tr:last-child td { border-bottom: 0; }
/* Motiv auf ::before, damit content-visibility es erst nahe dem Viewport lädt */
:where(.sl-read, .sl-landing) .cta { --cta-art: url(/bilder/start/cta-band-960.webp); position: relative; margin-top: 88px; background: #063620; content-visibility: auto; contain-intrinsic-size: auto 440px; }
:where(.sl-read, .sl-landing) .cta::before { content: ""; position: absolute; inset: 0; background: var(--gradient) 0 0 / 100% 2px no-repeat, linear-gradient(100deg, rgba(6,40,26,.76) 0%, rgba(6,40,26,.72) 50%, rgba(6,20,40,.76) 100%), var(--cta-art) 50% / cover; }
@media (min-width: 961px) { :where(.sl-read, .sl-landing) .cta { --cta-art: url(/bilder/start/cta-band-1916.webp); } }
:where(.sl-read, .sl-landing) .cta-inner { position: relative; }
:where(.sl-read) .person-photo { border-radius: var(--radius-btn); background: var(--surface-2); }

/* M145: utility-page content only; header, footer and generated pages keep their contracts.
   The shared reading rules own radii and surfaces. Visible contours use the control token. */
.sl-read .utility-content { --line: var(--line-ctrl); --line2: var(--line-ctrl); overflow-wrap: anywhere; }
.sl-read .utility-content :is(.art-col, .section-body) { grid-template-columns: minmax(0, 1fr); }
.sl-read .utility-content :is(.head-panel, .toc-sticky, .clauses) { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.sl-read .utility-content .head-panel { overflow: clip; }
.sl-read .utility-content .head-panel-contact { border-top: 1px solid var(--line); background: var(--surface-2); }
.sl-read .utility-content :is(.toc-sticky, .clauses) { padding: 18px; }
.sl-read .utility-content .toc-rail { flex-basis: 264px; overflow-wrap: normal; word-break: normal; hyphens: none; }
.sl-read .utility-content .toc-sticky { padding-inline: 8px; }
.sl-read .utility-content :is(.callout, .section-body blockquote, .faq details[open], .toc-link, .toc-list) { border-color: var(--line); }
.sl-read .utility-content .toc-link { padding-block: 12px; }
.sl-read .hero.utility-content[id] { scroll-margin-top: var(--sl-nav-offset, 96px); }
.sl-read .hero.utility-status { max-width: none; background: var(--band); }
.sl-read .utility-status .hero-grid { max-width: 1096px; margin-inline: auto; }
.sl-read .hero.utility-status :is(.page-title, .hero-teaser) { color: #f3f7f4; }
.sl-read .hero.utility-status .kicker { color: #bfead0; }
.sl-read .hero.utility-status .kicker::before { background: #22e07a; }
.sl-read .content-row.utility-status { padding-top: 32px; padding-bottom: 48px; }
.sl-read .utility-status .art-col { max-width: none; }
.sl-read .utility-status .section { border: 0; padding-top: 0; }
.sl-read .utility-content .sl-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.sl-read .utility-content .sl-next a { display: flex; align-items: center; min-height: 80px; font-weight: 600; color: var(--text); }
.sl-read .utility-content .sl-next a:hover { border-color: var(--color-accent-700); }
.sl-read .utility-content .sl-next a:active { background: var(--surface-2); }
.sl-read .utility-content .sl-next-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.sl-read .utility-content .sl-next-actions .btn-primary { border-color: var(--color-accent-700); }