/*!
 * SEC Genogramm Website — secgenogramm.css
 * Eigenes Layout, abgeleitet vom NBI-Template (Positionen, Token-Prinzip, Header/Footer-Aufbau).
 * Keine externen Ressourcen: Schrift lokal (fonts/), Icons als SVG-Maske (images/icons/).
 * @copyright (C) 2026 SEC Swiss Energy Consulting GmbH · GNU GPL v2 or later
 */

/* ── Schrift (lokal, OFL: Source Sans 3) ─────────────────── */
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ── Design-Tokens ───────────────────────────────────────── */
:root{
  --sg-teal:#0e7c86;          /* Akzent (Kontrast auf Weiss 4.95:1) */
  --sg-teal-dark:#0a5c64;     /* Hover / Links auf hellem Grund */
  --sg-teal-soft:#e3f2f3;
  --sg-ink:#1a2230;           /* Text, dunkle Flaechen */
  --sg-ink-soft:#2a3548;
  --sg-muted:#4a5568;         /* Zweittext (Kontrast auf Weiss 7.5:1) */
  --sg-mist:#f1f4f8;          /* helle Flaechen */
  --sg-line:#d9e0e8;
  --sg-warm:#d94f1e;          /* Warm-Akzent: sparsam, nur Deko / grosse Schrift */
  --sg-warm-text:#a83a10;     /* Warm-Akzent fuer Text (AA) */
  --sg-white:#fff;
  --sg-max:1120px;
  --sg-max-wide:1480px;
  --sg-gutter:clamp(1rem,4vw,2rem);
  --sg-radius:12px;
  --sg-radius-sm:8px;
  --sg-shadow:0 1px 2px rgba(26,34,48,.06),0 6px 20px rgba(26,34,48,.07);
  --sg-shadow-lg:0 2px 4px rgba(26,34,48,.06),0 18px 40px rgba(26,34,48,.12);
  --sg-font:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sg-header-h:72px;
  --bs-primary:#0e7c86;--bs-link-color:#0a5c64;--bs-link-hover-color:#1a2230;
}

/* ── Basis ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--sg-header-h) + 16px)}
body.sg-body{margin:0;font-family:var(--sg-font);font-size:1.0625rem;line-height:1.65;color:var(--sg-ink);background:var(--sg-white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
a{color:var(--sg-teal-dark);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--sg-ink);text-decoration-thickness:2px}
:focus-visible{outline:3px solid #f2a900;outline-offset:2px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--sg-font);color:var(--sg-ink);line-height:1.2;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.25rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:700}
h3{font-size:1.25rem;font-weight:700}
h4{font-size:1.0625rem;font-weight:600}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
hr{border:0;border-top:1px solid var(--sg-line);margin:2rem 0}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
kbd{background:var(--sg-mist);border:1px solid var(--sg-line);border-bottom-width:2px;border-radius:5px;padding:.05em .4em}
code{background:var(--sg-mist);border-radius:4px;padding:.05em .35em}
.visually-hidden,.sg-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.sg-skip{position:absolute;left:1rem;top:-4rem;z-index:1000;background:var(--sg-ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--sg-radius-sm) var(--sg-radius-sm);text-decoration:none;font-weight:600}
.sg-skip:focus{top:0;color:#fff}

.sg-wrap{width:100%;max-width:var(--sg-max);margin-inline:auto;padding-inline:var(--sg-gutter)}
.sg-wrap--wide{max-width:var(--sg-max-wide)}
.sg-wrap--narrow{max-width:820px}

/* ── Kopf ────────────────────────────────────────────────── */
.sg-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--sg-line);z-index:50}
.sg-header--sticky{position:sticky;top:0;-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px)}
.sg-header__in{display:flex;align-items:center;gap:1rem;min-height:var(--sg-header-h)}
.sg-brand{display:flex;align-items:center;flex:0 0 auto;line-height:0}
.sg-brand img{display:block;height:auto}
.sg-nav{margin-left:auto}
.sg-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:center;gap:.15rem}
.sg-nav li{margin:0;position:relative;white-space:nowrap}
.sg-nav a,.sg-nav span.nav-header,.sg-nav .separator{display:block;padding:.55rem .8rem;border-radius:var(--sg-radius-sm);color:var(--sg-ink);text-decoration:none;font-weight:600;font-size:1rem}
.sg-nav a:hover{background:var(--sg-mist);color:var(--sg-ink)}
.sg-nav li.active>a,.sg-nav a[aria-current="page"]{color:var(--sg-teal-dark);background:var(--sg-teal-soft)}
.sg-nav a.sg-nav-cta,.sg-nav li.sg-nav-cta>a{background:var(--sg-teal);color:#fff;padding-inline:1.1rem;margin-left:.4rem}
.sg-nav a.sg-nav-cta:hover,.sg-nav li.sg-nav-cta>a:hover{background:var(--sg-teal-dark);color:#fff}
.sg-nav li.active>a.sg-nav-cta{background:var(--sg-teal-dark);color:#fff}
.sg-nav ul ul{display:none}
@media (min-width:901px) and (max-width:1200px){.sg-nav a,.sg-nav span.nav-header,.sg-nav .separator{padding:.5rem .55rem;font-size:.95rem}.sg-nav a.sg-nav-cta,.sg-nav li.sg-nav-cta>a{padding-inline:.8rem;margin-left:.2rem}.sg-header__in{gap:.6rem}}
.sg-user{position:relative;flex:0 0 auto}
.sg-user>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border:1.5px solid var(--sg-line);border-radius:var(--sg-radius-sm);font-weight:600;color:var(--sg-ink);background:#fff}
.sg-user>summary::-webkit-details-marker{display:none}
.sg-user__icon{width:20px;height:20px;background:currentColor;-webkit-mask:url("../images/icons/user.svg") center/contain no-repeat;mask:url("../images/icons/user.svg") center/contain no-repeat;flex:0 0 auto}
.sg-user>summary:hover{border-color:var(--sg-teal)}
.sg-user[open]>summary{border-color:var(--sg-teal);background:var(--sg-teal-soft)}
.sg-user__panel{position:absolute;right:0;top:calc(100% + .5rem);width:min(320px,86vw);background:#fff;border:1px solid var(--sg-line);border-radius:var(--sg-radius);box-shadow:var(--sg-shadow-lg);padding:1.1rem 1.2rem;z-index:60}
.sg-user__panel label{font-weight:600;font-size:.95rem}
.sg-nav-toggle{display:none;margin-left:auto;align-items:center;gap:.5rem;background:#fff;border:1.5px solid var(--sg-line);border-radius:var(--sg-radius-sm);padding:.5rem .85rem;font:600 1rem var(--sg-font);color:var(--sg-ink);cursor:pointer}
.sg-nav-toggle__bars{width:18px;height:12px;border-block:2px solid currentColor;position:relative;display:inline-block}
.sg-nav-toggle__bars::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor}
.sg-crumbs{background:var(--sg-mist);font-size:.92rem;border-bottom:1px solid var(--sg-line)}
.sg-crumbs ol,.sg-crumbs ul{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .6rem;margin:0;padding:.55rem 0}
.sg-crumbs li+li::before{content:"›";margin-right:.6rem;color:var(--sg-muted)}
.sg-crumbs a{color:var(--sg-muted)}
.sg-crumbs .mod-breadcrumbs__here{display:none}

/* ── Knoepfe ─────────────────────────────────────────────── */
.sg-btn,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1.0625rem/1.2 var(--sg-font);border-radius:var(--sg-radius-sm);padding:.8rem 1.4rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s}
.sg-btn--primary,.btn-primary{background:var(--sg-teal);border-color:var(--sg-teal);color:#fff;--bs-btn-bg:#0e7c86;--bs-btn-border-color:#0e7c86;--bs-btn-hover-bg:#0a5c64;--bs-btn-hover-border-color:#0a5c64;--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#0a5c64}
.sg-btn--primary:hover,.btn-primary:hover{background:var(--sg-teal-dark);border-color:var(--sg-teal-dark);color:#fff}
.sg-btn--ghost{background:transparent;border-color:var(--sg-ink);color:var(--sg-ink)}
.sg-btn--ghost:hover{background:var(--sg-ink);color:#fff}
.sg-btn--light{background:#fff;color:var(--sg-ink);border-color:#fff}
.sg-btn--light:hover{background:var(--sg-teal-soft);color:var(--sg-ink)}
.sg-btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.sg-btn--ghost-light:hover{background:#fff;color:var(--sg-ink)}
.sg-btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.btn-outline-secondary,.btn-outline-primary{--bs-btn-color:#1a2230;--bs-btn-border-color:#8c98a8;--bs-btn-hover-bg:#1a2230;--bs-btn-hover-border-color:#1a2230;--bs-btn-hover-color:#fff;background:#fff;border-color:var(--bs-btn-border-color);color:var(--bs-btn-color)}
.btn-outline-secondary:hover,.btn-outline-primary:hover{background:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);color:var(--bs-btn-hover-color)}
.btn-sm{padding:.4rem .8rem;font-size:.95rem}

/* ── Hauptbereich ────────────────────────────────────────── */
.sg-main{min-height:50vh}
.sg-main--pad{padding-block:clamp(2rem,5vw,3.5rem)}
.sg-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem}
.sg-layout--aside{grid-template-columns:minmax(0,1fr) 300px}
.sg-aside .moduletable{background:var(--sg-mist);border-radius:var(--sg-radius);padding:1.2rem 1.3rem;margin-bottom:1.2rem}
.sg-aside h3{font-size:1.05rem}
#system-message-container{max-width:var(--sg-max);margin:1rem auto 0;padding-inline:var(--sg-gutter)}
#system-message-container:empty{display:none}
.alert{border-radius:var(--sg-radius-sm);border:1px solid var(--sg-line);background:var(--sg-mist);padding:.9rem 1.1rem;margin-bottom:1rem}
.alert-danger,.alert-error{background:#fdecea;border-color:#f3b5ad}
.alert-success,.alert-message{background:#e8f6ee;border-color:#9fd6b5}
.alert-warning,.alert-notice{background:#fff6e0;border-color:#f0cf7a}
.alert-heading{font-size:1rem;margin:0 0 .3rem}

/* ── Inhaltsbloecke (Startseite & Produktseiten) ─────────── */
.com-content-article__body>.sg-sec:first-child{margin-top:0}
.sg-sec{padding-block:clamp(3rem,7vw,5.25rem)}
.sg-sec--mist{background:var(--sg-mist)}
.sg-sec--teal{background:var(--sg-teal-soft)}
.sg-sec--ink{background:var(--sg-ink);color:#e6ecf3}
.sg-sec--ink h2,.sg-sec--ink h3{color:#fff}
.sg-sec--ink a{color:#9fe0e6}
.sg-sec__head{max-width:46rem;margin:0 0 2.4rem}
.sg-sec__head--center{margin-inline:auto;text-align:center}
.sg-eyebrow{display:inline-block;font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-teal-dark);margin-bottom:.6rem}
.sg-sec--ink .sg-eyebrow{color:#7fd3da}
.sg-lead{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--sg-muted);line-height:1.55}
.sg-sec--ink .sg-lead{color:#c3cedb}

/* Hero */
.sg-hero{background:linear-gradient(180deg,var(--sg-mist) 0,#fff 100%);padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,5vw,4rem);overflow:hidden}
.sg-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.sg-hero h1{margin-bottom:.45em}
.sg-hero h1 em{font-style:normal;color:var(--sg-teal)}
.sg-hero__note{font-size:.95rem;color:var(--sg-muted);margin-top:1.1rem}
.sg-hero__art{aspect-ratio:560/440;background:url("../images/hero-genogramm.svg") center/contain no-repeat;border-radius:var(--sg-radius);position:relative}
.sg-hero__art::before{content:"";position:absolute;inset:6% 4%;background:radial-gradient(closest-side,rgba(14,124,134,.14),rgba(14,124,134,0));z-index:-1}
.sg-pills{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.4rem 0 0}
.sg-pills li{background:#fff;border:1px solid var(--sg-line);border-radius:999px;padding:.3rem .85rem;font-size:.92rem;font-weight:600;color:var(--sg-ink-soft)}

/* Raster & Kacheln */
.sg-grid{display:grid;gap:1.25rem}
.sg-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sg-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sg-tile{background:#fff;border:1px solid var(--sg-line);border-radius:var(--sg-radius);padding:1.5rem 1.4rem 1.4rem;transition:box-shadow .2s,transform .2s,border-color .2s}
.sg-sec--mist .sg-tile{border-color:transparent;box-shadow:var(--sg-shadow)}
.sg-tile:hover{border-color:var(--sg-teal);box-shadow:var(--sg-shadow-lg)}
.sg-tile h3{font-size:1.15rem;margin:.9rem 0 .4rem}
.sg-tile p{margin:0;color:var(--sg-muted);font-size:1rem}
.sg-tile__more{display:inline-block;margin-top:.8rem;font-weight:600}
.sg-ico{display:inline-block;width:46px;height:46px;border-radius:12px;background:var(--sg-teal-soft);position:relative;flex:0 0 auto}
.sg-ico::after{content:"";position:absolute;inset:11px;background:var(--sg-teal-dark);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.sg-ico--warm{background:#fdeee8}.sg-ico--warm::after{background:var(--sg-warm-text)}
.sg-ico--palette{--ico:url("../images/icons/palette.svg")}.sg-ico--tree{--ico:url("../images/icons/tree.svg")}
.sg-ico--link{--ico:url("../images/icons/link.svg")}.sg-ico--import{--ico:url("../images/icons/import.svg")}
.sg-ico--export{--ico:url("../images/icons/export.svg")}.sg-ico--map{--ico:url("../images/icons/map.svg")}
.sg-ico--cake{--ico:url("../images/icons/cake.svg")}.sg-ico--check{--ico:url("../images/icons/check.svg")}
.sg-ico--save{--ico:url("../images/icons/save.svg")}.sg-ico--undo{--ico:url("../images/icons/undo.svg")}
.sg-ico--pencil{--ico:url("../images/icons/pencil.svg")}.sg-ico--bridge{--ico:url("../images/icons/bridge.svg")}
.sg-ico--share{--ico:url("../images/icons/share.svg")}.sg-ico--mail{--ico:url("../images/icons/mail.svg")}
.sg-ico--lock{--ico:url("../images/icons/lock.svg")}.sg-ico--eye{--ico:url("../images/icons/eye.svg")}
.sg-ico--comment{--ico:url("../images/icons/comment.svg")}.sg-ico--calendar{--ico:url("../images/icons/calendar.svg")}
.sg-ico--user{--ico:url("../images/icons/user.svg")}.sg-ico--browser{--ico:url("../images/icons/browser.svg")}
.sg-ico--file{--ico:url("../images/icons/file.svg")}.sg-ico--star{--ico:url("../images/icons/star.svg")}

/* Schritt-fuer-Schritt-Leiste */
.sg-steps{list-style:none;counter-reset:sg;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;padding:0;margin:0;position:relative}
.sg-steps li{counter-increment:sg;position:relative;padding-top:3.6rem;font-size:1rem}
.sg-steps li::before{content:counter(sg);position:absolute;top:0;left:0;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--sg-teal);color:#fff;font-weight:700;font-size:1.15rem;display:grid;place-items:center;z-index:1}
.sg-steps li::after{content:"";position:absolute;top:1.3rem;left:2.6rem;right:-1rem;height:2px;background:repeating-linear-gradient(90deg,var(--sg-teal) 0 6px,transparent 6px 12px)}
.sg-steps li:last-child::after{display:none}
.sg-steps strong{display:block;font-size:1.1rem;margin-bottom:.25rem}
.sg-steps span{color:var(--sg-muted)}
.sg-sec--mist .sg-steps span{color:var(--sg-muted)}

/* Teilen-/Preis-Karten */
.sg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;align-items:stretch}
.sg-card{background:#fff;border:1px solid var(--sg-line);border-radius:var(--sg-radius);padding:1.8rem 1.6rem;display:flex;flex-direction:column;position:relative}
.sg-card--accent{border:2px solid var(--sg-teal);box-shadow:var(--sg-shadow-lg)}
.sg-card__badge{position:absolute;top:-.8rem;left:1.4rem;background:var(--sg-warm-text);color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .7rem;border-radius:999px}
.sg-card h3{margin:.8rem 0 .3rem;font-size:1.3rem}
.sg-card__sub{color:var(--sg-muted);margin-bottom:1rem}
.sg-card ul{list-style:none;padding:0;margin:0 0 1.2rem}
.sg-card li{position:relative;padding:.3rem 0 .3rem 1.7rem}
.sg-card li::before{content:"";position:absolute;left:0;top:.62rem;width:1.05rem;height:1.05rem;background:var(--sg-teal);-webkit-mask:url("../images/icons/check.svg") center/contain no-repeat;mask:url("../images/icons/check.svg") center/contain no-repeat}
.sg-card .sg-btn{margin-top:auto}

/* Datenschutz-Liste, CTA, Hinweise */
.sg-checks{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.sg-checks li{position:relative;padding-left:2rem}
.sg-checks li::before{content:"";position:absolute;left:0;top:.3rem;width:1.3rem;height:1.3rem;background:#7fd3da;-webkit-mask:url("../images/icons/check.svg") center/contain no-repeat;mask:url("../images/icons/check.svg") center/contain no-repeat}
.sg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.sg-cta{text-align:center}
.sg-cta h2{margin-bottom:.4em}
.sg-cta .sg-btn-row{justify-content:center}
.sg-note{border-left:4px solid var(--sg-teal);background:var(--sg-teal-soft);padding:.9rem 1.2rem;border-radius:0 var(--sg-radius-sm) var(--sg-radius-sm) 0;margin:1.4rem 0}
.sg-note--warm{border-color:var(--sg-warm);background:#fdeee8}
.sg-badge{display:inline-block;background:var(--sg-warm-text);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.15rem .6rem;border-radius:999px;vertical-align:.12em;margin-left:.4rem}
mark.sg-todo,.sg-todo{background:#fff3b0;color:#4a3b00;border-radius:3px;padding:0 .25em}
.sg-figure{margin:0;background:#fff;border:1px solid var(--sg-line);border-radius:var(--sg-radius);padding:1rem;box-shadow:var(--sg-shadow)}
.sg-figure img{display:block;width:100%;height:auto}
.sg-figure figcaption{font-size:.92rem;color:var(--sg-muted);margin-top:.6rem}
.sg-legend{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;padding:0;margin:1rem 0 0;font-size:.95rem;color:var(--sg-muted)}

/* ── Textseiten ──────────────────────────────────────────── */
.sg-prose{max-width:46rem}
.sg-prose h2{margin-top:2.2em;padding-top:.2em}
.sg-prose h3{margin-top:1.8em}
.sg-prose h2:first-child,.sg-prose h3:first-child{margin-top:0}
.sg-prose table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:1rem}
.sg-prose th,.sg-prose td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--sg-line);vertical-align:top}
.sg-prose th{background:var(--sg-mist);font-weight:700}
.sg-toc{background:var(--sg-mist);border-radius:var(--sg-radius);padding:1rem 1.4rem;margin:0 0 2rem;max-width:46rem}
.sg-toc strong{display:block;margin-bottom:.3rem}
.sg-toc ol{margin:0;columns:2;column-gap:2rem}
.sg-toc li{break-inside:avoid;padding:.1rem 0}
.sg-page-head{padding-block:clamp(2rem,5vw,3.5rem) 0}
.sg-page-head h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:.3em}
.sg-page-head .sg-lead{max-width:44rem;margin-bottom:0}
details.sg-faq{border:1px solid var(--sg-line);border-radius:var(--sg-radius-sm);margin:.6rem 0;background:#fff}
details.sg-faq>summary{cursor:pointer;font-weight:600;padding:.85rem 1.1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
details.sg-faq>summary::-webkit-details-marker{display:none}
details.sg-faq>summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--sg-teal-dark)}
details.sg-faq[open]>summary::after{content:"–"}
details.sg-faq>div{padding:0 1.1rem 1rem}

/* Joomla-Artikel/Komponenten */
.com-content-article__body{overflow-wrap:break-word}
.com-content-article .page-header h1,.page-header h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.sg-main--app .com-content-article{max-width:none}
.pagination{display:flex;gap:.3rem;list-style:none;padding:0;flex-wrap:wrap}
.page-link{display:block;padding:.4rem .8rem;border:1px solid var(--sg-line);border-radius:6px;text-decoration:none}
.form-control,.form-select,input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{font:inherit;color:var(--sg-ink);background:#fff;border:1.5px solid #8c98a8;border-radius:var(--sg-radius-sm);padding:.55rem .75rem;max-width:100%}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{border-color:var(--sg-teal);outline:3px solid rgba(242,169,0,.55);outline-offset:1px}
.control-group{margin-bottom:1rem}
.control-label label{font-weight:600;display:block;margin-bottom:.25rem}
table.table{width:100%;border-collapse:collapse}
table.table th,table.table td{padding:.5rem .7rem;border-bottom:1px solid var(--sg-line);text-align:left}
.mod-login__submit .btn,.sg-user__panel .btn{width:100%}
.mod-login__userdata ul,.mod-login ul{list-style:none;padding:0;margin:.8rem 0 0;font-size:.95rem}


/* Artikel ohne eigene Bereiche (z. B. spaeter von Hand angelegt): lesbare Breite und Rahmen */
.com-content-article>.page-header,
.com-content-article>.article-info,
.com-content-article__body>:not(.sg-sec):not(.sg-hero):not(.sg-page-head):not(.sg-wrap){max-width:var(--sg-max);width:100%;margin-inline:auto;padding-inline:var(--sg-gutter)}
.com-content-article>.page-header{padding-top:2rem}
.com-content-article__body>p:last-child{margin-bottom:2rem}

/* ── Konto-Block im Kopf (Anmelden / Konto-Menü) ─────────── */
.sg-user__who{margin:0 0 .8rem;padding-bottom:.8rem;border-bottom:1px solid var(--sg-line);font-size:.95rem;color:var(--sg-muted)}
.sg-user__who strong{color:var(--sg-ink);font-size:1.05rem}
.sg-user__panel ul{list-style:none;margin:0;padding:0}
.sg-user__panel .mod-menu a{display:block;padding:.55rem .4rem;border-radius:var(--sg-radius-sm);color:var(--sg-ink);text-decoration:none;font-weight:600}
.sg-user__panel .mod-menu a:hover{background:var(--sg-mist)}
.sg-user__panel .mod-login__username label,.sg-user__panel .mod-login__password label{display:block;margin-bottom:.2rem}
.sg-user__panel .input-group{display:flex;gap:.4rem}
.sg-user__panel input[type=text],.sg-user__panel input[type=password]{width:100%}
.sg-user__panel .mod-login__userdata>div,.sg-user__panel .mod-login__username,.sg-user__panel .mod-login__password,.sg-user__panel .mod-login__remember,.sg-user__panel .mod-login__submit{margin-bottom:.8rem}
.sg-user__panel .mod-login__userdata ul li a{display:block;padding:.2rem 0}
.sg-user__panel .btn-secondary,.sg-user__panel .input-password-toggle{border:1.5px solid #8c98a8;background:#fff;border-radius:var(--sg-radius-sm);padding:.4rem .6rem;cursor:pointer}

/* ── com_users: Anmelden, Registrieren, Passwort, Profil ─── */
.com-users-login,.com-users-registration,.com-users-reset,.com-users-reset-confirm,.com-users-reset-complete,.com-users-remind,.com-users-profile,.com-users-profile__edit,.com-users-logout{max-width:34rem}
.com-users-profile{max-width:44rem}
.com-users-login .page-header,.com-users-registration .page-header,.com-users-reset .page-header,.com-users-profile .page-header,.com-users-logout .page-header{display:none}
.com-users-login__form,.com-users-registration__form,.com-users-reset__form,.com-users-reset-confirm__form,.com-users-reset-complete__form,.com-users-remind__form,.com-users-profile__edit-form,.com-users-logout__form,.com-users-profile__core,.com-users-profile__custom{background:#fff;border:1px solid var(--sg-line);border-radius:var(--sg-radius);box-shadow:var(--sg-shadow);padding:1.6rem 1.6rem 1.3rem;margin:0 0 1.2rem}
.com-users-login .form-control,.com-users-registration .form-control,.com-users-reset .form-control,.com-users-profile__edit .form-control{width:100%}
.com-users-login .control-group,.com-users-registration .control-group,.com-users-reset .control-group{margin-bottom:1.1rem}
.com-users-login .input-group,.com-users-registration .input-group{display:flex;gap:.4rem;align-items:stretch}
.com-users-login .input-group .form-control,.com-users-registration .input-group .form-control{flex:1 1 auto}
.com-users-login__options.list-group,.com-users-login__options{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.com-users-login__options a,.com-users-login__reset,.com-users-login__remind,.com-users-login__register{display:inline-block;padding:.3rem 0;font-weight:600}
.com-users-registration legend,.com-users-profile legend,.com-users-profile__edit legend{font-size:1.1rem;font-weight:700;margin-bottom:.8rem;padding:0;border:0}
.com-users-profile dl,.com-users-profile__core dl,.com-users-profile__custom dl{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1.2rem;margin:0}
.com-users-profile dt{font-weight:600;color:var(--sg-muted)}
.com-users-profile dd{margin:0}
.com-users-profile__edit-submit,.com-users-profile .btn{margin-top:.4rem}
.com-users-login .btn-primary,.com-users-registration .btn-primary,.com-users-reset .btn-primary,.com-users-profile__edit .btn-primary,.com-users-logout .btn-primary{width:100%;padding-block:.8rem}
.form-check{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}
.invalid-feedback,.form-control-feedback,.form-text,.field-spacer{font-size:.92rem;color:var(--sg-muted)}
.sg-main--app .com-users-login{margin-top:1rem}
@media (max-width:620px){.com-users-profile dl{grid-template-columns:1fr}.com-users-login__form,.com-users-registration__form,.com-users-reset__form{padding:1.2rem}}

/* ── Fuss ────────────────────────────────────────────────── */
.sg-footer{background:var(--sg-ink);color:#c3cedb;margin-top:0;font-size:1rem}
.sg-footer a{color:#fff;text-decoration:none}
.sg-footer a:hover{text-decoration:underline;color:#9fe0e6}
.sg-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem 3rem;padding-block:3.2rem 2.2rem}
.sg-footer h3,.sg-footer .moduletable>h3{color:#fff;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.9rem}
.sg-footer ul,.sg-footer ul.nav,.sg-footer ul.mod-menu{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}
.sg-footer li,.sg-footer ul.mod-menu>li{display:block;float:none;padding:.2rem 0;margin:0}
.sg-footer p{margin:0 0 .8rem}
.sg-footer .sg-footer__brand img{display:block;margin-bottom:1rem}
.sg-footer__bottom{border-top:1px solid rgba(255,255,255,.14);font-size:.92rem;color:#9fb0c3}
.sg-footer__bottom .sg-wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center;padding-block:1.1rem}
.sg-footer__bottom ul{display:flex;gap:1.2rem;flex-wrap:wrap}
.sg-debug{background:#fff3b0;color:#4a3b00;font:12px/1.4 ui-monospace,Menlo,monospace;padding:.5rem 1rem}

/* ── Responsiv ───────────────────────────────────────────── */
@media (max-width:1000px){
  .sg-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2rem}
  .sg-steps li:nth-child(3)::after{display:none}
}
@media (max-width:900px){
  :root{--sg-header-h:64px}
  .sg-nav-toggle{display:inline-flex}
  .sg-nav{position:absolute;left:0;right:0;top:100%;margin:0;background:#fff;border-bottom:1px solid var(--sg-line);box-shadow:var(--sg-shadow-lg);padding:.6rem var(--sg-gutter) 1rem;display:none}
  .sg-nav.is-open{display:block}
  .sg-nav ul{flex-direction:column;align-items:stretch;gap:.1rem}
  .sg-nav a{padding:.8rem .6rem;font-size:1.0625rem}
  .sg-nav a.sg-nav-cta,.sg-nav li.sg-nav-cta>a{margin:.5rem 0 0;text-align:center}
  .sg-header{position:sticky;top:0}
  .sg-header__in{position:relative}
  .sg-user{order:2}
  .sg-nav-toggle{order:3;margin-left:0}
  .sg-user{margin-left:auto}
  .sg-hero__grid,.sg-split{grid-template-columns:minmax(0,1fr)}
  .sg-hero__art{width:100%;max-width:420px;margin-inline:auto;order:-1}
  .sg-grid--3,.sg-cards{grid-template-columns:minmax(0,1fr)}
  .sg-layout--aside{grid-template-columns:minmax(0,1fr)}
  .sg-footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sg-footer__grid>*:first-child{grid-column:1/-1}
}
@media (max-width:620px){
  body.sg-body{font-size:1rem}
  .sg-grid--2,.sg-grid--4{grid-template-columns:minmax(0,1fr)}
  .sg-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .sg-steps li{padding:0 0 1.6rem 3.6rem;min-height:3.2rem}
  .sg-steps li::after{top:2.6rem;left:1.3rem;right:auto;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--sg-teal) 0 6px,transparent 6px 12px)}
  .sg-steps li:nth-child(3)::after{display:block}
  .sg-steps li:last-child::after{display:none}
  .sg-toc ol{columns:1}
  .sg-footer__grid{grid-template-columns:minmax(0,1fr)}
  .sg-btn-row .sg-btn{width:100%}
  .sg-user>summary{padding:.5rem .7rem}
  .sg-user>summary span.sg-user__label,.sg-user>summary span.sg-user__caret{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .sg-brand img{width:150px;height:auto}
  .sg-header__in{gap:.5rem}
  .sg-prose table{display:block;overflow-x:auto}
}
/* kein JS: Navigation immer sichtbar */
.no-js .sg-nav-toggle{display:none}
@media (max-width:900px){.no-js .sg-nav{display:block;position:static;box-shadow:none;border:0;padding:0}.no-js .sg-header__in{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media print{.sg-header,.sg-footer,.sg-crumbs,.sg-skip,.sg-btn-row{display:none!important}body.sg-body{font-size:11pt}.sg-sec{padding-block:1rem}a{color:#000}}
/* Passkey-Knopf (plg_system_webauthn): Symbol klein neben dem Text statt riesig */
.plg_system_webauthn_login_button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.5rem}
.plg_system_webauthn_login_button svg{width:1.25rem;height:1.25rem;flex:none;fill:currentColor}
/* Artikel-Angaben (Autor, Kategorie, Datum, Zugriffe) gehören nicht auf die Produkt-Website */
.com-content-article .article-info,.item-page .article-info,.sg-prose .article-info{display:none}

/* Beispiel-Grafiken: Galerie, breite Bilder, Fenster-Rahmen */
.sg-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1rem,2.5vw,1.8rem);align-items:start;margin-block:1.4rem}
.sg-figure img{border-radius:calc(var(--sg-radius) - 4px)}
.sg-figure--wide{grid-column:1/-1;margin-block:1.4rem}
.sg-figure--shot{padding:.5rem;background:linear-gradient(180deg,#fff,var(--sg-mist));box-shadow:0 18px 40px -18px rgba(26,34,48,.35)}
.sg-prose .sg-figure{margin-block:1.2rem}
.sg-prose .sg-gallery .sg-figure{margin-block:0}
@media (max-width:720px){.sg-figure{padding:.6rem}.sg-figure figcaption{font-size:.85rem}}

/* Joomla-Frontend-Bearbeitung (Stift, Tooltip «Modul bearbeiten …») ist ohne Bootstrap ungestaltet und zerreisst Menüs; Module werden im Backend bearbeitet */
a.jmodedit,a.jmenuedit,[role="tooltip"][id^="tip-"]{display:none!important}

/* Joomla-Meldungen: kurzer Hinweis oben rechts statt Zeile im Inhalt (JS verschiebt sie; ohne JS bleibt die Meldung sichtbar) */
html:not(.no-js) #system-message-container{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sg-toasts{position:fixed;top:5rem;right:1rem;z-index:200;display:grid;gap:.5rem;max-width:min(26rem,calc(100vw - 2rem))}
.sg-toast{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:var(--sg-radius-sm);background:#fff;color:var(--sg-ink);border:1px solid var(--sg-line);border-left-width:5px;box-shadow:var(--sg-shadow-lg);font-size:.95rem;animation:sg-toast-in .25s ease-out}
.sg-toast span{flex:1}
.sg-toast button{flex:0 0 auto;border:0;background:none;color:var(--sg-muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 .2rem}
.sg-toast--success{border-left-color:#1a7f37}
.sg-toast--info{border-left-color:var(--sg-teal)}
.sg-toast--warning{border-left-color:#d97706}
.sg-toast--danger{border-left-color:#c4404a;background:#fff5f5}
.sg-toast.is-out{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
@keyframes sg-toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sg-toast{animation:none}.sg-toast.is-out{transition:none}}
@media (max-width:620px){.sg-toasts{top:4.2rem;right:.6rem;left:.6rem;max-width:none}}
@media print{.sg-toasts{display:none!important}}