:root {
    color-scheme: light;
    --ink: #12342f;
    --muted: #5e7771;
    --deep: #063d35;
    --primary: #0f6b57;
    --primary-strong: #0a5143;
    --water: #77c8cf;
    --reed: #6d9251;
    --sand: #f6eddc;
    --surface: rgba(255, 255, 255, .92);
    --border: rgba(15, 91, 75, .17);
    --success: #176d42;
    --warning: #9a6500;
    --danger: #b02a37;
    --info: #176b82;
    --shadow: 0 12px 32px rgba(7, 53, 46, .10);
    --shadow-hover: 0 20px 48px rgba(7, 53, 46, .16);
    /* elevation scale: kleine Stufe = nah an der Flaeche, grosse Stufe = schwebt darueber.
       Neue Regeln bitte eine dieser Stufen nehmen statt eigener rgba-Schatten. */
    --shadow-sm: 0 4px 12px rgba(7, 53, 46, .08);
    --shadow-lg: 0 28px 64px rgba(7, 53, 46, .20);
    --shadow-dark-sm: 0 8px 20px rgba(0, 0, 0, .16);
    --shadow-dark-lg: 0 28px 70px rgba(0, 0, 0, .24);
    /* type scale (1.25 / major third), damit Ueberschriften zueinander passen statt
       jeweils eigener rem-Werte. Die grossen Stufen skalieren per clamp mit dem Viewport. */
    --text-xs: .8rem;
    --text-sm: .92rem;
    --text-base: 1rem;
    --text-lg: 1.09rem;
    --text-xl: clamp(1.25rem, 1.4vw, 1.36rem);
    --text-2xl: clamp(1.6rem, 2.2vw, 1.9rem);
    --text-3xl: clamp(2rem, 3.2vw, 2.5rem);
    --text-4xl: clamp(2rem, 1.1rem + 2.8vw, 3.4rem);
    /* Untergrenze bewusst niedrig: mit 2.625rem als Boden blieb die Hero-Zeile von 320px bis
       834px konstant 42px gross und erschlug schmale Handys. Jetzt echt mitwachsend. */
    --text-5xl: clamp(2rem, 1.33rem + 3.33vw, 4rem);
    /* Schriftgewichte: bewusst gestuft statt ueberall 900 - sonst hebt sich nichts mehr ab. */
    --weight-medium: 600;
    --weight-semibold: 700;
    --weight-bold: 800;
    --radius: 16px;
    --radius-lg: 20px;
    --radius-sm: 12px;
    --radius-button: 11px;
    --radius-input: 10px;
    --transition: 180ms ease;
    /* spacing scale: keep new/adjusted rules on these steps instead of arbitrary values */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    /* shared page container widths */
    --container-wide: 1180px;
    --container-narrow: 960px;
    --container-form: 760px;
    --container-auth: 680px;
    font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: hidden; background: #e8f6f1; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background:
        radial-gradient(circle at 12% 8%, rgba(119, 200, 207, .48), transparent 28rem),
        radial-gradient(circle at 88% 0, rgba(109, 146, 81, .24), transparent 30rem),
        linear-gradient(145deg, #effaf7, var(--sand));
}
a { color: var(--primary); }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px clamp(18px, 4vw, 54px);
    color: white;
    background: rgba(6, 61, 53, .91);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; font-weight: 900; text-decoration: none; }
.brand img { border-radius: 13px; box-shadow: var(--shadow-dark-sm); }
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.nav-link { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 13px; border: 1px solid transparent; border-radius: 999px; color: rgba(255,255,255,.82); text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.nav-link:hover { color: white; background: rgba(255,255,255,.12); }
.nav-link.is-active { color: white; background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.28); font-weight: 700; }

main { flex: 1 0 auto; }
.shell { width: min(var(--container-wide), calc(100% - 32px)); margin: 0 auto; padding: 44px 0 68px; }
.shell-narrow { width: min(var(--container-narrow), calc(100% - 32px)); }
.shell-form { width: min(var(--container-form), calc(100% - 32px)); }
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.module-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(15, 91, 75, .3); }
.hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; overflow: hidden; padding: clamp(26px, 5vw, 58px); }
.hero h1, .auth-card h1 { margin: 14px 0; color: var(--deep); font-size: clamp(2.2rem, 6vw, 4.7rem); line-height: .98; letter-spacing: -.055em; }
.hero p { max-width: 720px; color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.hero-mark { align-self: center; color: rgba(15, 107, 87, .18); font: 900 clamp(8rem, 18vw, 15rem)/.7 Georgia, serif; transform: rotate(-8deg); }
.marketing-hero { align-items: center; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(235,248,242,.9)); }
.hero-copy { min-width: 0; }
.hero-logo { display: grid; place-items: center; min-width: 220px; padding: 28px; border: 1px solid rgba(15,91,75,.16); border-radius: 34px; background: linear-gradient(145deg, #0f5b4b, #123b55); color: white; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow); }
.hero-logo img { width: min(132px, 34vw); height: auto; border-radius: 28px; box-shadow: var(--shadow-dark-lg); }
.hero-logo span { margin-top: 16px; font-weight: 900; letter-spacing: -.02em; }
.hero-points { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.hero-points li { display: flex; align-items: center; min-height: 32px; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: 999px; color: var(--primary-strong); background: rgba(255,255,255,.75); font-weight: var(--weight-medium); font-size: var(--text-xs); }
.marketing-section { margin-top: var(--space-6); }
.section-heading { max-width: 700px; margin: 0 0 var(--space-5); }
.section-heading h2 { margin: var(--space-1) 0; color: var(--deep); font-size: var(--text-3xl); line-height: 1.12; letter-spacing: -.03em; }
.section-heading p { margin: 0; color: var(--muted); font-size: var(--text-lg); line-height: 1.7; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
/* Doppelte Klasse = hoehere Spezifitaet als die spaeteren .dashboard-grid-Regeln in den
   Media Queries, damit diese Karten ihr eigenes Umbruchverhalten behalten.
   auto-fit statt fester Spaltenzahl: das Raster bricht selbst um, sobald die Karten unter die
   Mindestbreite fielen. Vorher sprang es bei 800px von 1 auf 3 Spalten - dazwischen waren die
   Paketkarten nur 251px breit, also schmaler als auf einem 320px-Handy (288px). */
.dashboard-grid.public-package-grid { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
/* Die Funktionskarten sind genau VIER - hier waere auto-fit falsch: ab ~1180px ergaeben sich
   drei Spalten und die vierte Karte staende allein in der zweiten Reihe. Feste 2x2-Aufteilung,
   darunter einspaltig. */
.dashboard-grid.benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .dashboard-grid.benefit-grid { grid-template-columns: 1fr; } }
.benefit-grid .module-card { display: flex; flex-direction: column; min-height: 300px; }
/* text-decoration hier statt als style="text-decoration:none" im Markup - Inline-Styles
   werden von der CSP (style-src 'self') blockiert, die Kacheln waren dadurch unterstrichen. */
.module-card { padding: var(--space-5); text-decoration: none; }
/* Feste Groesse statt Browser-Default: sonst sind Karten mit h3 (Funktionskarten) und
   Karten mit h2 (Hub-Kacheln) unterschiedlich gross, obwohl sie gleich aussehen sollen. */
.module-card h2, .module-card h3 { margin: var(--space-3) 0 var(--space-1); color: var(--deep); font-size: var(--text-xl); line-height: 1.25; letter-spacing: -.015em; }
.module-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.module-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--primary), var(--reed)); font-size: 1.35rem; }
/* Macht aus dem Icon selbst den Installieren-Auslöser (statt eines zusaetzlichen grossen
   Buttons) - Reset der Browser-eigenen Button-Chrome, das Kreis-Aussehen kommt von .module-icon. */
.module-icon-button { border: none; padding: 0; cursor: pointer; font: inherit; }
.package-card { display: flex; flex-direction: column; }
.product-card { gap: 4px; }
.product-card .button-row, .product-card > .button-full, .size-choice-row { margin-top: auto; }
.size-choice-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
.feature-list { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.feature-list li { position: relative; padding-left: 24px; color: var(--muted); line-height: 1.45; }
.feature-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 900; }
.size-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.size-strip span { padding: 10px 13px; border-radius: 999px; color: var(--primary-strong); background: #e1f3ec; font-weight: var(--weight-bold); }
.account-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 24px; }
.account-card h2 { margin: 5px 0; }
.eyebrow { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; }

.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    color: white;
    background: var(--primary);
    box-shadow: 0 10px 22px rgba(15, 91, 75, .22);
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition), background var(--transition);
}
@media (hover: hover) { .button:hover { background: var(--primary-strong); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(15, 91, 75, .28); } }
.button:active { transform: translateY(1px) scale(.98); }
.button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-link:focus-visible, .back-link:focus-visible {
    outline: 3px solid rgba(23, 107, 130, .42);
    outline-offset: 3px;
}
.button:disabled { opacity: .52; cursor: not-allowed; transform: none; box-shadow: none; }
.button-secondary { color: var(--primary-strong); background: rgba(255,255,255,.82); border-color: rgba(15, 91, 75, .38); box-shadow: none; }
@media (hover: hover) { .button-secondary:hover { background: white; border-color: var(--primary); } }
.button-danger { color: var(--danger); background: #fdeef0; border-color: rgba(197, 61, 75, .4); box-shadow: none; }
@media (hover: hover) { .button-danger:hover { color: white; background: var(--danger); border-color: var(--danger); box-shadow: 0 10px 22px rgba(197, 61, 75, .28); } }
.button-success { background: var(--success); }
.button-small { min-height: 38px; padding: 8px 15px; font-size: .92rem; }
.button-full { width: 100%; margin-top: 22px; }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.badge { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 7px 11px; border-radius: 999px; color: var(--primary-strong); background: #e1f3ec; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .01em; }
.badge-success { color: var(--success); background: #dcf4e6; }
.badge-warning { color: var(--warning); background: #fff0c8; }
.message { margin-top: 16px; padding: 13px 15px; border: 1px solid transparent; border-radius: 15px; animation: reveal var(--transition) both; }
.message-success { color: var(--success); background: #e2f5e9; border-color: #9bd4b2; }
.message-warning { color: var(--warning); background: #fff3d4; border-color: #e9c66d; }
.message-error { color: var(--danger); background: #ffe8e9; border-color: #e6a4aa; }
.message-info { color: var(--info); background: #e2f3f7; border-color: #a4d2dc; }
@keyframes reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.connectivity-banner { position: sticky; top: 0; z-index: 50; padding: 11px 18px; color: #352100; background: #ffc84f; text-align: center; box-shadow: 0 8px 22px rgba(0,0,0,.16); animation: reveal var(--transition) both; }
.connectivity-banner.is-online { color: #073d24; background: #a7e8bd; }
.connectivity-banner.is-offline { color: #352100; background: #ffc84f; }
.pwa-toast { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 12px; max-width: min(460px, calc(100vw - 36px)); margin: 0; box-shadow: var(--shadow-hover); }
.drop-zone { padding: 28px; border: 2px dashed #83aea4; border-radius: 18px; background: rgba(255,255,255,.55); text-align: center; transition: transform var(--transition), border-color var(--transition), background var(--transition); }
.drop-zone.is-dragover { transform: scale(1.01); border-color: var(--primary); background: #dff3ec; }

.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 28px 16px; }
.auth-shell { width: min(var(--container-auth), calc(100% - 32px)); }
.login-wide-page { place-items: center; }
.login-wide-shell { width: min(var(--container-auth), calc(100% - 32px)); padding-top: clamp(10px, 4vh, 24px); }
.auth-brand { width: fit-content; margin: 0 auto 20px; color: var(--deep); }
/* Brand/Badge INNERHALB einer weissen Auth-Kachel: Logo+Name linksbuendig nebeneinander,
   Badge in dunkler Variante - die helle .public-badge ist nur fuer den dunklen Hero gedacht. */
.auth-card .auth-brand { display: flex; margin: 0 0 20px; }
.auth-card .public-badge { color: var(--primary-strong); background: #e1f3ec; border-color: rgba(15,91,75,.22); }
.auth-card { padding: clamp(22px, 5vw, 38px); border-radius: var(--radius-lg); }
.auth-card h1 { font-size: clamp(2.3rem, 9vw, 4rem); }
.auth-card p { color: var(--muted); line-height: 1.6; }
.login-chooser-card h1 { margin-bottom: var(--space-4); font-size: var(--text-3xl); line-height: 1.08; letter-spacing: -.03em; }
.login-panel-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.login-panel { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.72); }
/* Deutlich kleiner als vorher (bis 2.2rem): die Formularueberschrift lag fast gleichauf mit der
   Seitenueberschrift darueber, dadurch gab es keine erkennbare Rangfolge mehr. */
.login-panel h2 { margin: 0 0 var(--space-2); color: var(--deep); font-size: var(--text-xl); letter-spacing: -.02em; }
.login-panel[hidden] { display: none; }
.auth-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.login-mode-grid { gap: 12px; }
.access-choice { min-height: 68px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); background: rgba(255,255,255,.7); text-align: left; cursor: pointer; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.access-choice strong, .access-choice small { display: block; }
.access-choice small { margin-top: 6px; color: var(--muted); line-height: 1.35; }
/* Die gewaehlte Zugangsart hob sich vorher nur durch einen leichten Gruenton ab. Zusaetzlich
   ein kraeftigerer Rahmen links und dunklere Schrift, damit auf einen Blick klar ist, welches
   Formular unten steht - das ist die einzige Orientierung auf dieser Seite. */
.access-choice.is-active {
    border-color: var(--primary);
    border-left-width: 4px;
    background: #e1f3ec;
    box-shadow: 0 10px 24px rgba(15,91,75,.12);
}
.access-choice.is-active strong { color: var(--primary-strong); }
@media (hover:hover) { .access-choice:hover { transform: translateY(-2px); border-color: var(--primary); background: white; } }
.access-choice:focus-visible { outline: 3px solid rgba(23, 107, 130, .42); outline-offset: 3px; }
.auth-hint { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(225,243,236,.72); font-size: .94rem; }
.auth-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.auth-footer-links .back-link { color: rgba(255,255,255,.86); font-size: .92rem; }
.auth-footer-links .back-link:hover { color: white; }
label { display: block; margin: 17px 0 7px; color: var(--deep); font-weight: 800; }
input:not([type="range"]), select, textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid #cadbd5;
    border-radius: var(--radius-input);
    color: var(--ink);
    background: white;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
textarea { min-height: 104px; resize: vertical; }

.password-field { position: relative; }
.password-field input { padding-right: 46px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
}
.password-toggle:hover { background: rgba(15, 91, 75, .1); color: var(--primary-strong); }
.password-toggle:focus-visible { outline: 3px solid rgba(23, 107, 130, .42); outline-offset: 2px; }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    margin: 12px 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--reed));
}
input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #d7e9e2;
}
input[type="range"]::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--reed));
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -8px;
    border: 3px solid white;
    border-radius: 50%;
    background: var(--primary-strong);
    box-shadow: 0 4px 12px rgba(15, 91, 75, .38);
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 3px solid white;
    border-radius: 50%;
    background: var(--primary-strong);
    box-shadow: 0 4px 12px rgba(15, 91, 75, .38);
    cursor: pointer;
}
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid rgba(23, 107, 130, .42); outline-offset: 2px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid rgba(23, 107, 130, .42); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(15,107,87,.12); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--danger); }
.back-link { display: inline-block; margin-top: 18px; font-weight: 750; text-decoration: none; }
.footer { display: grid; align-content: center; min-height: 80px; padding: var(--space-4); color: var(--muted); text-align: center; }
.site-footer { gap: var(--space-2); border-top: 1px solid var(--border); background: rgba(255,255,255,.64); }
.site-footer p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.footer-links a { font-size: .95rem; font-weight: 700; text-decoration: none; }
/* Rechtsseiten: zweispaltig mit haftendem Inhaltsverzeichnis, sobald genug Platz da ist.
   Das Verzeichnis wird per JS aus den vorhandenen <h2> gebaut (app.js) - laeuft das Skript
   nicht, bleibt schlicht die einspaltige Textseite uebrig, es fehlt nichts Inhaltliches. */
.legal-page { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 1000px) {
    .legal-page.has-toc { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
    .legal-toc { position: sticky; top: 88px; max-height: calc(100vh - 120px); overflow-y: auto; }
}
.legal-toc {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.legal-toc h2 { margin: 0 0 var(--space-2); color: var(--deep); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; }
.legal-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc a {
    display: block;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.35;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
@media (hover: hover) { .legal-toc a:hover { color: var(--primary-strong); background: rgba(15, 91, 75, .07); } }
.legal-toc a.is-current { color: var(--primary-strong); background: rgba(15, 91, 75, .1); font-weight: var(--weight-semibold); }
.legal-page h1 { margin: 0 0 var(--space-3); color: var(--deep); font-size: var(--text-4xl); letter-spacing: -.03em; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
/* Trennlinie oben statt nur Abstand: gliedert die langen Paragrafenketten sichtbar. */
.legal-page h2 {
    margin: var(--space-5) 0 var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--deep);
    font-size: var(--text-xl);
    letter-spacing: -.02em;
    scroll-margin-top: 96px;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
.legal-page h1 + h2, .legal-page h2:first-of-type { border-top: 0; padding-top: 0; }
/* Zeilenlaenge begrenzen - ueber die volle Kartenbreite ist Fliesstext schwer lesbar. */
.legal-page p, .legal-page ul { max-width: 68ch; }
.legal-page p { color: var(--muted); line-height: 1.75; }
.legal-page ul { margin: var(--space-2) 0; padding-left: 22px; color: var(--muted); line-height: 1.7; }
.legal-page li { margin: 6px 0; }
.legal-page .table-scroll { margin: 14px 0; overflow-x: auto; }
.legal-page table { width: 100%; min-width: 560px; border-collapse: collapse; }
.legal-page th, .legal-page td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; color: var(--muted); line-height: 1.5; }
.legal-page th { color: var(--deep); background: rgba(15, 91, 75, .06); }
.text-link { display: inline-flex; margin-top: 16px; font-weight: var(--weight-bold); text-decoration: none; }

.owner-shell { display: grid; gap: var(--space-4); }
.owner-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: clamp(24px, 4vw, 32px); }
/* Etwas ruhiger als vorher (max. 2.6rem): in einem Arbeitsbereich soll die Begruessung nicht
   mehr Platz einnehmen als die eigentlichen Inhalte darunter. */
.owner-heading h1 { margin: var(--space-1) 0 var(--space-1); color: var(--deep); font-size: var(--text-2xl); letter-spacing: -.025em; line-height: 1.15; }
.owner-heading p { max-width: 68ch; margin: 0; color: var(--muted); }
/* Feste fuenf Spalten passten nur zur Uebersicht (5 Kacheln); die Auswertung hat SECHS, dort
   stand die letzte allein in einer zweiten Reihe. auto-fit richtet sich nach der echten Anzahl. */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--space-3); }
.metric-tile { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); text-align: center; transition: border-color var(--transition), box-shadow var(--transition); }
@media (hover: hover) { .metric-tile:hover { border-color: rgba(15, 91, 75, .3); box-shadow: var(--shadow); } }
/* tabular-nums: die Zahlen stehen so untereinander gleich breit und zappeln beim Aktualisieren nicht. */
.metric-tile strong { display: block; color: var(--deep); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.02em; }
.metric-tile span { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.member-quick-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 14px var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: #e1f3ec; color: var(--primary-strong); font-weight: 700; font-size: .92rem; }
.module-card-primary { background: linear-gradient(145deg, rgba(225,243,236,.9), var(--surface)); border-color: rgba(15, 91, 75, .32); }
.module-card-primary .module-icon { width: 48px; height: 48px; font-size: 1.5rem; }
.section-divider { margin: var(--space-4) 0 var(--space-3); border: none; border-top: 1px solid var(--border); }
.owner-metric { min-width: 130px; padding: 18px; border-radius: var(--radius-sm); color: white; background: linear-gradient(135deg, var(--primary), var(--reed)); text-align: center; }
.owner-metric strong { display: block; font-size: 2.2rem; }
.owner-metric span { font-size: .82rem; font-weight: 800; }
.owner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.owner-panel { min-width: 0; padding: var(--space-5); }
.owner-panel-wide { grid-column: 1 / -1; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-heading h2, .migration-card h2 { margin: 4px 0 0; color: var(--deep); }
.inline-form { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; margin-bottom: 18px; }
.inline-form input, .inline-form .button { margin: 0; }
.stack-form { display: grid; gap: 10px; margin-bottom: 18px; }
.stack-form label { margin-bottom: -3px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.identity-row { grid-template-columns: 1fr 1fr 1fr; }
.identity-row output { display: block; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(247,252,250,.6); color: var(--muted); }
.logo-preview { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-preview img { border-radius: 12px; border: 1px solid var(--border); object-fit: cover; }
.background-dropzone { margin-top: 12px; }
.background-preview-img { object-fit: cover; border-radius: 10px; visibility: hidden; }
.background-hint { margin-top: 8px; }
[data-logo-dropzone] { transition: background var(--transition), border-color var(--transition); border: 2px dashed transparent; }
[data-logo-dropzone].is-dragover { border-color: rgba(15,91,75,.45); background: rgba(15,91,75,.06); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 13px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.data-table th { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .02em; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr.is-inactive { opacity: .58; }
.table-scroll { overflow-x: auto; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-duration { margin-top: 4px; }
dialog[data-penalty-dialog], dialog[data-snapshot-dialog], dialog[data-workflow-dialog] {
    width: min(560px, calc(100% - 32px));
    /* Der Inhalt kann laenger als der Bildschirm werden (viele Fischarten in einem
       festgehaltenen Stand) - dann scrollt das Fenster selbst, statt oben und unten
       abgeschnitten zu werden. */
    max-height: calc(100vh - 64px);
    overflow: auto;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-hover);
    color: var(--ink);
}
dialog[data-penalty-dialog]::backdrop, dialog[data-snapshot-dialog]::backdrop, dialog[data-workflow-dialog]::backdrop { background: rgba(6, 30, 26, .55); backdrop-filter: blur(2px); }
dialog[data-penalty-dialog] h2, dialog[data-snapshot-dialog] h2, dialog[data-workflow-dialog] h2 { margin-top: 0; }
.record .status-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #c1cbc6; vertical-align: middle; }
.status-dot-active { background: var(--success); box-shadow: 0 0 0 3px rgba(23, 109, 66, .18); }
.record-list { display: grid; gap: 9px; max-height: 440px; overflow: auto; padding-right: 3px; }
.record-list-tall { max-height: 620px; }
.attachment-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.record { display: flex; align-items: center; justify-content: space-between; gap: 14px; overflow-wrap: anywhere; padding: 13px 15px; border: 1px solid var(--border); border-radius: 15px; background: rgba(247,252,250,.85); transition: border-color var(--transition), transform var(--transition), background var(--transition); }
@media (hover:hover) { .record:hover { transform: translateY(-1px); border-color: rgba(15,91,75,.32); background: white; } }
.record div { min-width: 0; }
.record strong, .record span { display: block; }
.record div span { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.record small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.35; }
.record.is-inactive { opacity: .58; }
.record.record-wrap { flex-wrap: wrap; }
.record.record-wrap div span { overflow: visible; white-space: normal; text-overflow: clip; }
.record-list.compact { max-height: 330px; }
.empty-state { margin: 0; padding: 18px; border: 1px dashed var(--border); border-radius: 15px; color: var(--muted); text-align: center; }
.toggle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.toggle-card { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: rgba(247,252,250,.8); cursor: pointer; transition: transform var(--transition), border-color var(--transition), background var(--transition); }
@media (hover:hover) { .toggle-card:hover { transform: translateY(-2px); border-color: var(--primary); background: white; } }
.toggle-card input { width: 22px; min-height: 22px; accent-color: var(--primary); }
.toggle-card strong, .toggle-card small { display: block; }
.toggle-card small { margin-top: 3px; color: var(--muted); }
.migration-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; }
.migration-card p { color: var(--muted); line-height: 1.6; }
.preview-result { grid-column: 1 / -1; padding: 16px; border: 1px solid #9bd4b2; border-radius: 16px; color: var(--success); background: #e2f5e9; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.summary-grid span { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.7); }
.summary-grid b { display: block; margin-top: 3px; font-size: 1.25rem; }
.audit-note { margin: 0; }
.demo-access-box { display: grid; gap: 6px; margin: 14px 0; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: rgba(225,243,236,.72); }
.demo-access-box strong, .demo-access-box small { display: block; }
.demo-access-box small { color: var(--muted); line-height: 1.45; }
.demo-access-box code { padding: 2px 6px; border-radius: 7px; color: var(--primary-strong); background: rgba(255,255,255,.82); }
.checkout-flow { width: min(1060px, calc(100% - 32px)); gap: var(--space-4); }
.checkout-heading { align-items: center; }
.checkout-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.checkout-steps span { padding: 11px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--primary-strong); background: rgba(255,255,255,.76); font-size: .85rem; font-weight: var(--weight-bold); text-align: center; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.checkout-panel { min-width: 0; }
.checkout-panel-wide { grid-column: 1 / -1; }
.checkout-product-grid, .size-select-grid, .payment-choice-grid { display: grid; gap: 10px; }
.selection-card, .payment-choice { display: grid; gap: 6px; width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); background: rgba(247,252,250,.86); text-align: left; cursor: pointer; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.selection-card strong, .selection-card span, .selection-card small, .payment-choice strong, .payment-choice span { display: block; }
.selection-card span, .selection-card small, .payment-choice span { color: var(--muted); line-height: 1.45; }
.selection-card.is-active { border-color: var(--primary); background: var(--primary); color: white; box-shadow: 0 12px 28px rgba(15,91,75,.28); }
.selection-card.is-active span, .selection-card.is-active small { color: rgba(255,255,255,.85); }
.payment-choice { grid-template-columns: auto 1fr; align-items: start; cursor: default; }
.payment-choice input { width: 22px; min-height: 22px; margin: 2px 4px 0 0; accent-color: var(--primary); }
.payment-choice span { grid-column: 2; }
.checkout-form { display: grid; gap: 10px; }
.paypal-button-slot { max-width: 260px; }
/* PayPals Buttons-SDK oeffnet das Popup-Fenster immer sofort beim Klick, noch bevor
   createOrder() gegenlaufen kann (Browser wuerden ein spaeter geoeffnetes Popup sonst
   blockieren) - ohne diese Sperrschicht wuerde ein Klick bei fehlender Adresse ein leeres
   Fenster oeffnen, das sich sofort wieder schliesst. Die Sperrschicht liegt deckungsgleich
   ueber dem echten Button, faengt den Klick ab und zeigt den Hinweis, statt PayPal
   ueberhaupt erst zu kontaktieren - verschwindet automatisch, sobald die Adresse vollstaendig ist. */
.paypal-button-slot-guarded { position: relative; }
.paypal-address-guard { position: absolute; inset: 0; z-index: 5; border: none; background: transparent; cursor: pointer; padding: 0; }
.checkout-summary { margin: 12px 0; }
@media (hover:hover) {
    .selection-card:hover { transform: translateY(-2px); border-color: var(--primary); background: white; }
    .selection-card.is-active:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
}

.app-shell-page {
    background:
        radial-gradient(circle at 18% 10%, rgba(58, 132, 122, .42), transparent 30rem),
        radial-gradient(circle at 88% 12%, rgba(38, 79, 112, .38), transparent 32rem),
        radial-gradient(circle at 45% 100%, rgba(151, 126, 63, .2), transparent 28rem),
        linear-gradient(145deg, #062f35 0%, #0a3f36 42%, #10243f 100%);
}
.public-ready-page {
    background:
        radial-gradient(circle at 18% 10%, rgba(58, 132, 122, .42), transparent 30rem),
        radial-gradient(circle at 88% 12%, rgba(38, 79, 112, .38), transparent 32rem),
        radial-gradient(circle at 45% 100%, rgba(151, 126, 63, .2), transparent 28rem),
        linear-gradient(145deg, #062f35 0%, #0a3f36 42%, #10243f 100%);
}
.public-shell { width: min(var(--container-wide), calc(100% - 32px)); }
.public-header {
    background: rgba(3, 30, 36, .84);
    border-bottom-color: rgba(255,255,255,.12);
}
.public-hero {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    align-items: center;
    gap: 64px;
    min-height: 0;
    padding: clamp(50px, 8vw, 100px) clamp(26px, 5vw, 58px) clamp(60px, 8vw, 90px);
    color: white;
    background:
        linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
        radial-gradient(circle at 75% 20%, rgba(119,200,207,.24), transparent 24rem),
        linear-gradient(135deg, rgba(6,61,53,.96), rgba(16,36,63,.96));
    border-color: rgba(255,255,255,.16);
}
.public-hero::after {
    content: "";
    position: absolute;
    inset: auto -8% -24% 36%;
    height: 220px;
    background: radial-gradient(ellipse, rgba(119,200,207,.22), transparent 70%);
    pointer-events: none;
}
.public-hero h1 {
    color: white;
    max-width: 650px;
    font-size: var(--text-5xl);
    line-height: 1.05;
    letter-spacing: -.02em;
    text-shadow: 0 16px 44px rgba(0,0,0,.22);
}
.public-hero p { max-width: 650px; margin-top: var(--space-4); color: rgba(255,255,255,.82); font-size: var(--text-xl); line-height: 1.6; }
.public-badge {
    color: #dff7e8;
    background: rgba(120, 190, 147, .18);
    border: 1px solid rgba(223,247,232,.24);
}
.button-bright {
    color: #07352d;
    background: linear-gradient(135deg, #e7f8b4, #7bd9bd);
    box-shadow: 0 18px 38px rgba(123, 217, 189, .28);
}
.button-ghost {
    color: white;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.28);
    box-shadow: none;
}
.public-hero .hero-points li {
    color: #e8fff4;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.22);
}
.public-hero-panel {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 16px;
    padding: clamp(26px, 4vw, 36px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(155deg, rgba(255,255,255,.18), rgba(255,255,255,.07)),
        rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-dark-lg);
    backdrop-filter: blur(12px);
}
.public-hero-panel strong {
    display: block;
    color: white;
    font-size: var(--text-4xl);
    line-height: .95;
    letter-spacing: -.03em;
}
.public-hero-panel span, .public-hero-panel p { color: rgba(255,255,255,.82); }
.public-hero-panel .badge { color: var(--primary-strong); }
.public-hero-panel .badge-success { color: var(--success); }
.section-heading-invert h2 { color: #f1fff9; }
.section-heading-invert p, .section-heading-invert .eyebrow { color: rgba(255,255,255,.76); }
.public-feature-card, .public-product-card, .public-account-card, .public-checkout-heading, .public-checkout .owner-panel, .rc6-login-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(237,248,244,.9));
    border-color: rgba(255,255,255,.42);
}
.public-product-card {
    position: relative;
    overflow: hidden;
}
.public-product-card.is-featured {
    border-color: rgba(123, 217, 189, .78);
    box-shadow: var(--shadow-dark-lg), 0 0 0 1px rgba(123,217,189,.22);
    transform: translateY(-8px);
}
@media (hover:hover) { .public-product-card.is-featured:hover { transform: translateY(-11px); } }
.public-product-card.is-featured::before {
    content: "";
    position: absolute;
    inset: -30% -40% auto auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(123,217,189,.26);
}
.package-card-top { position: relative; z-index: 1; }
.public-feature-card { position: relative; }
/* Auslöser sitzt am unteren Kartenrand (die Karten sind Flex-Spalten), damit die drei
   Vorschau-Karten unten buendig abschliessen, egal wie lang ihr Beschreibungstext ist. */
.preview-open { margin-top: auto; align-self: flex-start; }
.preview-dialog {
    width: min(960px, 92vw);
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
.preview-dialog::backdrop { background: rgba(6, 20, 18, .78); }
/* Feste Fensterhoehe mit eigenem Scrollbereich: die Vorschaubilder zeigen ganze Seiten und
   sind deutlich hoeher als der Bildschirm - man scrollt jetzt IM Vorschaufenster durch die
   Seite, statt nur einen Ausschnitt zu sehen. */
.preview-dialog .feature-preview {
    margin: 0;
    /* max-height statt height: auf dem Handy wird das Bild auf die schmale Breite skaliert und
       ist dann kuerzer als der Rahmen - so schrumpft das Fenster mit, statt leeren Raum zu
       zeigen. Am Desktop ist der Inhalt hoeher als die Grenze und wird scrollbar. */
    max-height: min(78vh, 900px);
    overflow-y: auto;
    overscroll-behavior: contain;      /* Scrollen springt am Ende nicht auf die Seite dahinter ueber */
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--shadow-dark-lg), 0 0 0 1px rgba(15, 91, 75, .14);
}
.preview-dialog .preview-slide { margin: 0; }
.preview-dialog img { display: block; width: 100%; height: auto; }
/* Bildunterschrift bleibt beim Scrollen unten stehen, sonst weiss man nach zwei Bildschirmen
   nicht mehr, ob man gerade den Admin- oder den Mitgliedsbereich sieht. */
.preview-dialog figcaption {
    position: sticky;
    bottom: 0;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border);
    color: var(--muted);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* Umschalter Admin-/Mitgliedsbereich. Ersetzt den frueheren automatischen Bildwechsel - bei
   einem scrollbaren Bild waere ein Wechsel nach ein paar Sekunden stoerend, weil er den
   Inhalt unter dem Finger austauscht. */
.preview-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
.preview-tab {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
@media (hover: hover) { .preview-tab:hover { color: white; background: rgba(255, 255, 255, .2); } }
.preview-tab.is-active { color: #07352d; background: #e7f8b4; border-color: transparent; font-weight: var(--weight-semibold); }
.preview-tab:focus-visible { outline: 3px solid rgba(123, 217, 189, .55); outline-offset: 2px; }
.preview-close {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: white;
    background: rgba(6, 20, 18, .62);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}
.preview-close:hover { background: rgba(6, 20, 18, .85); }
.preview-dialog[open] { animation: preview-in 160ms ease both; }
@keyframes preview-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .preview-dialog[open] { animation: none; } }

/* Einblenden beim Scrollen. Die Start-Regel haengt bewusst an .reveal-ready, das erst per JS
   auf <body> gesetzt wird - ohne JS (oder wenn das Skript scheitert) ist schlicht alles
   sichtbar, statt dass der halbe Seiteninhalt dauerhaft auf opacity:0 stehen bleibt. */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); }
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
    .reveal-ready [data-reveal] { opacity: 1; transform: none; }
    .reveal-ready [data-reveal].is-revealed { transition: none; }
}
.package-price {
    display: grid;
    gap: 2px;
    margin: var(--space-4) 0 var(--space-1);
    padding: var(--space-3);
    border: 1px solid rgba(15,91,75,.16);
    border-radius: var(--radius-lg);
    background: rgba(225,243,236,.72);
}
/* Preis-Label bewusst leiser als der Betrag - sonst konkurrieren beide um dieselbe Aufmerksamkeit. */
.package-price span, .package-price small { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.package-price strong { color: var(--deep); font-size: var(--text-3xl); line-height: 1; letter-spacing: -.04em; }
/* Installationswege auf der Funktionskarte - je System eine Zeile, damit niemand den nur bei
   Android sichtbaren Knopf sucht und denkt, es gaebe keine App. */
.install-steps { margin: var(--space-2) 0 var(--space-3); padding-left: 1.15rem; display: grid; gap: var(--space-2); }
.install-steps li { color: var(--muted); line-height: 1.6; }
.install-steps strong { color: var(--deep); }

/* Gegenueberstellung "Bisher" / "Mit der App" auf der Startseite: genau zwei Karten, deshalb
   feste zwei Spalten wie bei benefit-grid und darunter einspaltig. Doppelte Klasse fuer die
   noetige Spezifitaet gegenueber den .dashboard-grid-Regeln in den Media Queries. */
.dashboard-grid.compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .dashboard-grid.compare-grid { grid-template-columns: 1fr; } }
.compare-card ul { margin: var(--space-3) 0 0; padding-left: 1.15rem; display: grid; gap: var(--space-2); }
.compare-card li { line-height: 1.6; }
/* Die linke Karte beschreibt den Ist-Zustand und darf ruhiger wirken als die rechte. */
.compare-card li { color: var(--muted); }
.compare-card-good li { color: var(--deep); }
.compare-card-good { border-color: rgba(123, 217, 189, .78); }

/* Erste-Schritte-Hinweis auf catches.php, wenn Gewaesser oder Fischarten fehlen. Der Knopf
   braucht Abstand zum Text, sonst klebt er an der letzten Zeile. */
.catches-setup-hint p { margin: var(--space-2) 0 var(--space-3); }
.catches-setup-hint .button { display: inline-flex; }

/* Steht unter den Paketkarten auf dem dunklen Marketing-Abschnitt, muss also hell sein -
   ruhig gesetzt, aber lesbar: es ist eine Pflichtangabe, keine Fussnote zum Uebersehen. */
.price-tax-note {
    margin: var(--space-4) 0 0;
    text-align: center;
    color: rgba(255,255,255,.76);
    font-size: var(--text-sm);
}
.combo-note {
    margin: var(--space-1) 0 0 !important;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: #0a5143 !important;
    background: #e7f8b4;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
/* FAQ: eine Spalte, weil Fliesstext ueber die volle Breite schlecht lesbar waere.
   Aufklappen macht <details> selbst - kein JS, funktioniert auch mit Tastatur. */
.faq-list { display: grid; gap: var(--space-2); max-width: 820px; }
.faq-item {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .07);
    transition: background var(--transition), border-color var(--transition);
}
.faq-item[open] { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); }
@media (hover: hover) { .faq-item:hover { background: rgba(255, 255, 255, .12); } }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: #f1fff9;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Eigenes Plus/Minus statt Browser-Dreieck, damit es rechts steht und sich mitdreht. */
.faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    font-size: 1.25rem;
    line-height: 1;
    transition: transform var(--transition), background var(--transition);
}
.faq-item[open] summary::after { content: "−"; background: rgba(255, 255, 255, .22); }
.faq-item summary:focus-visible { outline: 3px solid rgba(123, 217, 189, .55); outline-offset: 2px; border-radius: var(--radius-sm); }
.faq-item p {
    margin: 0;
    padding: 0 var(--space-4) var(--space-3);
    color: rgba(255, 255, 255, .78);
    line-height: 1.65;
}
.faq-item a { color: #bfeede; }
.public-footer {
    color: rgba(255,255,255,.72);
    background: rgba(3,30,36,.8);
    border-top-color: rgba(255,255,255,.12);
}
.public-footer a { color: white; }
.checkout-layout-rc6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.price-preview .summary-grid { grid-template-columns: 1fr; }
.summary-grid small { display: block; margin-top: 4px; color: var(--muted); font-size: .82rem; }
.selection-card em {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--success);
    background: #dcf4e6;
    font-style: normal;
    font-weight: 900;
}
.selection-card.is-active em { color: var(--deep); background: white; }
.rc6-login-card {
    border-color: rgba(123,217,189,.45);
    box-shadow: 0 32px 90px rgba(0,0,0,.28);
}
.rc6-login-card h1 { max-width: 760px; }

.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.catches-shell { display: grid; gap: var(--space-4); }
.catches-main-grid { display: grid; grid-template-columns: minmax(0, 410px) 1fr; gap: var(--space-4); align-items: start; }
.catches-main-grid-single { grid-template-columns: 1fr; }
.queue-pill { display: grid; min-width: 130px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius-sm); color: white; background: linear-gradient(135deg, var(--primary), var(--reed)); text-align: center; }
.queue-pill strong { font-size: 2rem; line-height: 1; }
.queue-pill span { margin: 4px 0 12px; font-size: .8rem; font-weight: 800; }
.queue-pill small { min-height: 1.2em; margin: -7px 0 10px; color: rgba(255,255,255,.82); }
.queue-details { margin-top: -8px; }
/* Nachbesserung eines steckengebliebenen Offline-Eintrags direkt in der Warteschlange: eine
   falsch getippte Mitgliedsnummer soll sich korrigieren lassen, ohne den Fang neu zu erfassen.
   ⚠️ Bewusst Grid statt Flex: Mit `flex: 1 1 100%` landete der Korrekturblock bei 375 px NEBEN
   dem Meldungstext statt darunter (die Zeilenumbrüche eines Flex-Containers richten sich nach der
   max-content-Breite der Geschwister, und die ist beim langen Konflikttext unberechenbar). Der
   Datensatz lief dadurch seitlich aus der Warteschlange heraus. Zwei Spalten, der Block spannt
   beide - das bricht immer an derselben Stelle um. */
/* Ausklappbares Bearbeiten-Formular in der Fischartenliste. */
.record .fish-edit { display: grid; gap: 8px; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.record .fish-edit input { margin: 0; }
.record .fish-edit .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fish-k-missing { color: var(--warning); font-weight: var(--weight-medium); }
/* ⚠️ Datensätze mit einem ausklappbaren Block darunter sind Grid, nicht Flex. Mit `flex: 1 1 100%`
   landete der Block bei 375 px NEBEN dem Text statt darunter — die Zeilenumbrüche eines
   Flex-Containers richten sich nach der max-content-Breite der Geschwister, und die ist bei
   langen Texten unberechenbar. Die Liste lief dadurch seitlich aus dem Panel heraus. Zwei
   Spalten, der Block spannt beide: das bricht immer an derselben Stelle um. */
/* Sperre aufheben / Notiz am Wasser (control_offline.php) und die Notiz-Anzeige im vollen
   Kontrollbereich. Gleiche Bauweise wie oben: Grid, der Block spannt beide Spalten. */
.record .ban-actions { display: grid; gap: 8px; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.record .ban-actions input { margin: 0; }
.record .ban-actions .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.record .field-notes { display: grid; gap: 3px; width: 100%; margin-top: 10px; padding: 9px 11px; border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(15,91,75,.06); }
.record .field-notes strong { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.record .field-notes span { font-size: .88rem; overflow-wrap: anywhere; }
.record.queue-entry, .record.fish-entry, .record.ban-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.record.queue-entry > .queue-fix, .record.fish-entry > .fish-edit, .record.ban-entry > .ban-actions { grid-column: 1 / -1; }
.record.record-wrap > .field-notes { flex-basis: 100%; }
.queue-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.queue-fix label { flex: 0 0 auto; margin: 0; color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.queue-fix input { flex: 1 1 140px; min-width: 0; margin: 0; }
.queue-fix .button { flex: 0 0 auto; margin: 0; }
.catch-record { align-items: flex-start; }
.catch-record .record-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.rule-ok { border-left: 4px solid var(--success); }
.rule-warning, .rule-review { border-left: 4px solid var(--warning); }
.rule-blocked { border-left: 4px solid var(--danger); }
.badge-danger { color: var(--danger); background: #ffe8e9; }
/* Bewusst flex statt grid: die Filterleiste mischt unterschiedlich breite Bedienelemente
   (Jahr schmal, Auswahlfelder mittel, Schalter und Button nach Inhalt). Ein Raster mit gleich
   breiten Spalten zwang den Button in zwei Zeilen; mit flex bekommt jedes Element die Breite,
   die es braucht, und die Leiste bricht erst um, wenn wirklich kein Platz mehr ist. */
.report-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.report-filter input[name="year"] { flex: 0 1 110px; }
.report-filter select { flex: 1 1 160px; min-width: 0; }
.report-filter .toggle-card { flex: 0 1 auto; }
.report-filter .button { flex: 0 0 auto; white-space: nowrap; }
/* Feste fuenf Spalten - die Auswertung zeigt aber SECHS Kennzahlen, die sechste stand dadurch
   allein in einer zweiten Reihe. auto-fit richtet sich nach der tatsaechlichen Anzahl. */
.report-summary { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--space-3); margin-top: 0; }
.report-summary span { display: flex; flex-direction: column-reverse; justify-content: center; min-height: 104px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-medium); text-align: center; }
.report-summary b { margin-bottom: var(--space-1); color: var(--deep); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); letter-spacing: -.02em; }
.report-row div i { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--reed)); }
/* Balkenbreite und Legendenfarben als Klassen statt als style="..."-Attribut: die CSP der
   Seite erlaubt kein 'unsafe-inline' fuer Styles, wodurch die Inline-Variante komplett
   blockiert wurde - die Balken waren dadurch unsichtbar und die Legendenpunkte einfarbig.
   Breite in 5%-Schritten, das reicht optisch und bleibt unabhaengig von der Rechenformel. */
.bar-w-0 { width: 0; } .bar-w-5 { width: 5%; } .bar-w-10 { width: 10%; } .bar-w-15 { width: 15%; }
.bar-w-20 { width: 20%; } .bar-w-25 { width: 25%; } .bar-w-30 { width: 30%; } .bar-w-35 { width: 35%; }
.bar-w-40 { width: 40%; } .bar-w-45 { width: 45%; } .bar-w-50 { width: 50%; } .bar-w-55 { width: 55%; }
.bar-w-60 { width: 60%; } .bar-w-65 { width: 65%; } .bar-w-70 { width: 70%; } .bar-w-75 { width: 75%; }
.bar-w-80 { width: 80%; } .bar-w-85 { width: 85%; } .bar-w-90 { width: 90%; } .bar-w-95 { width: 95%; }
.bar-w-100 { width: 100%; }
/* Reihenfolge MUSS zu CHART_COLORS in assets/reports.js passen. */
.chart-color-0 { color: #0f5b4b; } .chart-color-1 { color: #c98a2e; } .chart-color-2 { color: #3c7fb1; }
.chart-color-3 { color: #a4436b; } .chart-color-4 { color: #6d8c2f; } .chart-color-5 { color: #8457a6; }
.chart-color-6 { color: #c2542a; } .chart-color-7 { color: #3c9a8f; } .chart-color-8 { color: #b0902f; }
.chart-color-9 { color: #5a6c9e; }
.record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.extra-permissions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 12px; font-size: .82rem; color: var(--muted); }
.extra-permissions label { display: flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; }
.checkbox-inline { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; margin: 10px 0; max-width: 100%; }
.checkbox-inline input { width: 22px; min-height: 22px; margin-top: 3px; flex-shrink: 0; accent-color: var(--primary); }
.checkbox-inline span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }

/* Datenimport (import.php). Feste vier Spalten statt auto-fit: die Zahl der Schritte ist
   konstant, auto-fit wuerde bei mittleren Breiten Waisen erzeugen. */
.import-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: none; }
.import-steps li { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(247,252,250,.85); }
.import-steps strong { color: var(--deep); font-size: var(--text-sm); }
.import-steps span { color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
/* Eigene Aufklapp-Notiz: .faq-item ist fuer die dunkle Startseite gebaut (helle Schrift auf
   Weiss-Transparenz) und waere in einer hellen Karte unlesbar. */
.import-note { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(247,252,250,.7); }
.import-note summary { padding: 11px 15px; color: var(--primary-strong); font-weight: var(--weight-bold); font-size: var(--text-sm); cursor: pointer; }
.import-note summary:focus-visible { outline: 3px solid rgba(15,107,87,.45); outline-offset: 2px; border-radius: var(--radius-sm); }
.import-note p { margin: 0; padding: 0 15px 12px; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.import-note .record-list { padding: 0 15px 12px; }
.mapping-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mapping-row select { margin: 0; }
/* Vorgangs- und Verstoßstatus werden getrennt gepflegt und können auseinanderlaufen - der
   Widerspruch wird benannt statt versteckt. */
.workflow-conflict { display: block; margin-top: 4px; color: var(--warning); font-weight: var(--weight-bold); }

/* .benefit-grid/.public-package-grid brauchen hier nichts mehr: sie brechen per auto-fit
   selbst um (siehe oben). Die Breakpoint-Regeln galten nur fuer die fixe Spaltenzahl. */

@media (max-width: 800px) {
    .app-header, .account-card { align-items: flex-start; flex-direction: column; }
    .nav { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
    .hero { grid-template-columns: 1fr; }
    .hero-mark, .hero-logo { display: none; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .catches-main-grid { grid-template-columns: 1fr; }
    .shell { padding-top: 24px; }
    .button { min-height: 48px; }
    .owner-heading, .migration-card { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
    .owner-grid { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: repeat(3, 1fr); }
    .report-summary { grid-template-columns: repeat(2, 1fr); }
    .owner-panel-wide { grid-column: auto; }
    .inline-form, .report-filter { grid-template-columns: 1fr; }
    .toggle-grid, .summary-grid { grid-template-columns: 1fr 1fr; }
    .auth-choice-grid { grid-template-columns: 1fr; }
    .checkout-steps, .import-steps { grid-template-columns: 1fr 1fr; }
    .checkout-layout { grid-template-columns: 1fr; }
    .public-hero { grid-template-columns: 1fr; min-height: auto; }
    .public-product-card.is-featured { transform: none; }
    .checkout-layout-rc6 { grid-template-columns: 1fr; }
    .checkout-panel-wide { grid-column: auto; }
    .record-list { -webkit-overflow-scrolling: touch; }
    .record div span { overflow: visible; text-overflow: clip; white-space: normal; }
    .pwa-toast { left: 16px; right: 16px; bottom: 16px; flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .toggle-grid, .summary-grid, .field-row { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .checkout-steps, .import-steps, .mapping-row { grid-template-columns: 1fr; }
    .record, .catch-record { align-items: stretch; flex-direction: column; }
    /* Diese Einträge sind Grid (siehe .record.queue-entry / .record.fish-entry) - flex-direction
       greift dort nicht, gestapelt wird über die Spaltenzahl. */
    .record.queue-entry, .record.fish-entry, .record.ban-entry { grid-template-columns: 1fr; align-items: stretch; }
    .catch-record .record-actions { justify-content: flex-start; }
    .record-actions { justify-content: flex-start; }
    /* Breite Datentabellen werden auf schmalen Screens zu gestapelten Karten statt seitlich
       scrollbar zu bleiben - jede Zeile eine Karte, jede Zelle zeigt ihre Spaltenbeschriftung
       per data-label-Attribut links, den Wert rechts (klassisches responsive-table-Muster). */
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr { display: block; width: 100%; }
    .data-table tr { margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 12px; background: rgba(247,252,250,.6); }
    .data-table tbody tr:last-child { margin-bottom: 0; }
    .data-table td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; text-align: right; }
    .data-table td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; }
    .data-table td.cell-actions, .data-table td.cell-full { display: block; text-align: left; }
    .data-table td.cell-actions .row-actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .button:hover, .module-card:hover, .drop-zone.is-dragover { transform: none !important; }
}

/* --- Offline-Ausbau: Geraeteschloss --------------------------------------------------------- */
/* Bewusst nur eine Sichtsperre, kein Verschluesseln. Die Beschriftung im Dialog sagt das auch. */
.offline-lock { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: var(--surface, #f4f6f5); overflow-y: auto; }
.offline-lock-card { width: min(var(--container-auth), 100%); }
.offline-lock-card h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
body.is-offline-locked > header.app-header, body.is-offline-locked > main, body.is-offline-locked > .connectivity-banner { display: none; }