/* ============================================================
   Öffentliche Seiten für Gäste (Navigation oben, Fußzeile, Startseite)
   Design nach Stitch-Entwurf „Product-Led Conversion“, Okt. 2026:
   Waldgrün + Mint, Plus Jakarta Sans (Überschriften) / Inter (Text).
   Seit Okt. 2026 auf allen Seiten geladen, auch für Eingeloggte (keine Seitenleiste mehr).
   Selektoren beginnen mit body.public, damit sie die Regeln von theme-nordic-sidebar.css schlagen.
   body.landing = nur die Startseite (templates/upload.php).
   ============================================================ */

body.public {
    --lp-deep:      #0f241b;
    --lp-forest:    #152e24;
    --lp-green:     #006c49;
    --lp-green-2:   #00855a;
    --lp-mint:      #4edea3;
    --lp-mint-pale: #e3f6ec;
    --lp-bg:        #f8f9fc;
    --lp-tint:      #f1f3f9;
    --lp-card:      #ffffff;
    --lp-ink:       #131b2e;
    --lp-text:      #3d4451;
    --lp-muted:     #6b7280;
    --lp-line:      #e3e6ee;
    --lp-on-dark:   #b9cfc3;
    --lp-radius:    14px;
    --lp-font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
    --lp-font-body: 'Inter', system-ui, sans-serif;
    --lp-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    display: block;
    background: var(--lp-bg);
    color: var(--lp-text);
    font-family: var(--lp-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.public::before, body.public::after { content: none; }
/* Unterseiten: Inhalt mittig statt neben der Seitenleiste */
body.public .main-content { width: 100%; max-width: 76rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; box-sizing: border-box; flex: none; min-height: calc(100vh - 68px - 20rem); }
body.landing { font-size: 16px; }
body.landing .main-content { max-width: none; padding: 0; min-height: 0; }
body.landing a { color: var(--lp-green); }
body.landing h1, body.landing h2, body.landing h3 { font-family: var(--lp-font-head); color: var(--lp-ink); letter-spacing: -0.02em; }

.lp-wrap { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }
.lp-narrow { max-width: 52rem; }

.lp-eyebrow {
    font-family: var(--lp-font-mono); font-size: 12px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--lp-green);
}

body.public .lp-icon {
    width: 40px; height: 40px; border-radius: 10px; flex: none;
    display: grid; place-items: center;
    background: var(--lp-mint-pale); color: var(--lp-green);
}
body.public .lp-icon svg { width: 20px; height: 20px; }

/* ---- Buttons ---- */
body.public .lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--lp-font-head); font-weight: 700; font-size: 15px;
    padding: 12px 20px; border-radius: 10px; text-decoration: none; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
body.public .lp-btn:hover { transform: translateY(-1px); }
body.public .lp-btn-sm { font-size: 14px; padding: 9px 16px; }
body.public .lp-btn-primary { background: var(--lp-green); color: #fff; }
body.public .lp-btn-primary:hover { background: var(--lp-green-2); }
body.public .lp-btn-light { background: #fff; color: var(--lp-forest); }
body.public .lp-btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.3); }
body.public .lp-btn-ghost:hover { border-color: rgba(255,255,255,.6); }

/* ============================================================
   Navigation
   ============================================================ */
body.public .lp-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(248, 249, 252, .88);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--lp-line);
}
.lp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 68px; }
body.public .lp-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lp-ink); }
.lp-logo-mark {
    width: 34px; height: 34px; border-radius: 50% 50% 50% 0;
    background: var(--lp-forest); color: var(--lp-mint);
    display: grid; place-items: center;
    font-family: var(--lp-font-head); font-weight: 800; font-size: 13px;
}
.lp-logo-text { font-family: var(--lp-font-head); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }

.lp-nav-menu { display: flex; align-items: center; gap: 1.5rem; }
body.public .lp-nav-menu > a { color: var(--lp-text); text-decoration: none; font-size: 15px; font-weight: 500; }
body.public .lp-nav-menu > a:hover,
body.public .lp-nav-menu > a.is-active { color: var(--lp-green); }
body.public .lp-nav-menu > a.is-active { font-weight: 650; }
.lp-nav-actions { display: flex; align-items: center; gap: 1rem; margin-left: .5rem; }
body.public .lp-nav-login { color: var(--lp-ink); text-decoration: none; font-weight: 600; font-size: 15px; }

/* Eingeloggte: Kontingent + Konto-Menü statt Anmelden/Registrieren */
body.public .lp-quota { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--lp-muted); font-family: var(--lp-font-mono); font-size: 12px; font-weight: 600; padding: 5px 9px; border: 1px solid var(--lp-line); border-radius: 999px; background: #fff; }
body.public .lp-quota i { display: block; width: 32px; height: 4px; border-radius: 2px; background: var(--lp-line); overflow: hidden; }
body.public .lp-quota b { display: block; height: 100%; background: var(--lp-green); }
body.public .lp-quota.is-empty { color: #b42318; border-color: #f3c3bd; }
body.public .lp-quota.is-empty b { background: #d92d20; }
.lp-account { position: relative; }
body.public .lp-account-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--lp-line); border-radius: 999px; background: #fff; color: var(--lp-ink); font: 600 14px var(--lp-font-body); cursor: pointer; }
body.public .lp-account-toggle:hover, body.public .lp-account-toggle.is-active { border-color: var(--lp-green); }
.lp-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-forest); color: var(--lp-mint); font: 800 11px var(--lp-font-head); }
.lp-account-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 15rem; padding: .375rem; background: #fff; border: 1px solid var(--lp-line); border-radius: 12px; box-shadow: 0 20px 40px -20px rgba(19,27,46,.35); flex-direction: column; z-index: 60; }
.lp-account.is-open .lp-account-panel { display: flex; }
.lp-account-head { display: flex; flex-direction: column; gap: 2px; padding: .5rem .75rem .625rem; margin-bottom: .25rem; border-bottom: 1px solid var(--lp-line); }
.lp-account-head b { color: var(--lp-ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-account-head small { color: var(--lp-muted); font-size: 12px; line-height: 1.4; }
body.public .lp-account-panel a { display: block; padding: .5rem .75rem; border-radius: 8px; color: var(--lp-text); text-decoration: none; font-size: 14px; font-weight: 500; }
body.public .lp-account-panel a:hover { background: var(--lp-tint); color: var(--lp-ink); }
body.public .lp-account-panel a.is-active { color: var(--lp-green); font-weight: 650; }
body.public .lp-account-panel a.lp-account-logout { margin-top: .25rem; border-top: 1px solid var(--lp-line); border-radius: 0 0 8px 8px; color: var(--lp-muted); }

/* Admin-Bereich: Tabellen brauchen mehr Breite als die Inhaltsseiten */
body.public.admin-area .main-content { max-width: 90rem; }
/* Kontingent-Zelle in Companies- und User-Liste (templates/admin/_quota_cell.php) */
body.admin-area .quota-cell { min-width: 9rem; }
body.admin-area .quota-num { font-variant-numeric: tabular-nums; font-weight: 600; }
body.admin-area .quota-num small { font-weight: 400; color: var(--lp-muted); }
body.admin-area .quota-bar { display: block; height: 5px; margin: .3rem 0 .2rem; border-radius: 99px; background: var(--lp-line); overflow: hidden; max-width: 9rem; }
body.admin-area .quota-bar i { display: block; height: 100%; border-radius: inherit; }
body.admin-area .quota-renew { display: block; white-space: nowrap; font-size: 12px; color: var(--lp-muted); }
/* Admin-Tabellen auf dem Handy als Karten: eine Zeile = eine Karte, links die Spaltenüberschrift.
   data-label setzt layout.php per JS aus dem <thead>. Die !important schlagen Inline-Styles
   wie max-width/white-space:nowrap an einzelnen Zellen. */
@media (max-width: 640px) {
    body.admin-area :is(.admin-table, .blog-table) { display: block; width: 100% !important; }
    body.admin-area :is(.admin-table, .blog-table) thead { display: none; }
    body.admin-area :is(.admin-table, .blog-table) tbody { display: block; }
    body.admin-area :is(.admin-table, .blog-table) tr { display: block; padding: .625rem 0; border-bottom: 1px solid var(--lp-line); }
    body.admin-area :is(.admin-table, .blog-table) tr:last-child { border-bottom: 0; }
    body.admin-area :is(.admin-table, .blog-table) td {
        display: block; position: relative; min-height: 1.5rem;
        padding: .3rem 1rem .3rem 8rem !important; border: 0 !important; text-align: left !important;
        max-width: none !important; white-space: normal !important; overflow-wrap: anywhere; background: none !important;
    }
    body.admin-area :is(.admin-table, .blog-table) td::before {
        content: attr(data-label); position: absolute; left: 1rem; top: .4rem; width: 6.25rem;
        color: var(--lp-muted); font: 600 12px/1.35 var(--lp-font-body); overflow-wrap: break-word;
    }
    body.admin-area :is(.admin-table, .blog-table) td:not([data-label]) { padding-left: 1rem !important; }
    body.admin-area :is(.admin-table, .blog-table) td:not([data-label])::before { content: none; }
    body.admin-area :is(.admin-table, .blog-table) td form { display: inline-block !important; margin: 0 .375rem .25rem 0 !important; }
}

.lp-nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--lp-line); border-radius: 10px; background: #fff; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.lp-nav-toggle span { display: block; width: 18px; height: 2px; background: var(--lp-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.lp-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lp-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lp-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.lp-hero { padding: 4rem 0 4.5rem; background: radial-gradient(60rem 30rem at 85% 0%, rgba(78,222,163,.12), transparent 70%); }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: center; }
body.public .lp-hero h1 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.08; font-weight: 800; margin: .75rem 0 1.25rem; letter-spacing: -0.03em; }
.lp-lead { font-size: 1.125rem; line-height: 1.65; color: var(--lp-text); margin: 0 0 1.75rem; }
.lp-lead b { color: var(--lp-ink); font-weight: 650; }

.lp-checks { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .875rem; }
.lp-checks li { display: flex; gap: .75rem; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.lp-checks b { color: var(--lp-ink); font-weight: 650; }
.lp-check { width: 22px; height: 22px; border-radius: 50%; background: var(--lp-mint); color: var(--lp-forest); display: grid; place-items: center; flex: none; margin-top: 1px; }
.lp-check svg { width: 13px; height: 13px; stroke-width: 3; }

.lp-trust { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lp-line); }
.lp-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--lp-muted); }
.lp-trust svg { width: 16px; height: 16px; color: var(--lp-green); flex: none; }

/* ---- Upload-Karte (dunkel) ---- */
.lp-upload-card {
    background: linear-gradient(160deg, var(--lp-forest) 0%, var(--lp-deep) 100%);
    color: #eef5f0; border-radius: 20px; padding: 1.75rem;
    box-shadow: 0 30px 60px -25px rgba(15,36,27,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.lp-upload-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.lp-upload-label { font-family: var(--lp-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-on-dark); font-weight: 600; }
body.public .lp-upload-card h2 { color: #fff; font-size: 1.5rem; font-weight: 800; margin: .375rem 0 0; }
.lp-switch { display: inline-flex; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 3px; font-size: 13px; font-weight: 600; }
.lp-switch > * { padding: 6px 12px; border-radius: 7px; }
.lp-switch .is-active { background: #fff; color: var(--lp-forest); }
body.public .lp-switch a { color: var(--lp-on-dark); text-decoration: none; }
body.public .lp-switch a:hover { color: #fff; }
.lp-upload-text { color: var(--lp-on-dark); font-size: 14.5px; line-height: 1.55; margin: 1rem 0 0; }

/* Dropzone + Formular (IDs aus _upload_form.php, Verhalten in app.js) */
body.public .lp-upload .dropzone {
    margin-top: 1.25rem; min-height: 0; padding: 1.75rem 1.25rem;
    background: rgba(255,255,255,.04); border: 1.5px dashed rgba(255,255,255,.28); border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    text-align: center; color: #fff; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
body.public .lp-upload .dropzone::before { content: none; }
body.public .lp-upload .dropzone:hover,
body.public .lp-upload .dropzone:focus-visible,
body.public .lp-upload .dropzone.dragover { border-color: var(--lp-mint); background: rgba(78,222,163,.07); outline: none; }
body.public .lp-upload .dropzone-title { margin: 0; font-family: var(--lp-font-head); font-size: 17px; font-weight: 700; color: #fff; word-break: break-word; }
body.public .lp-upload .dropzone-text { margin: .25rem 0 0; font-size: 13px; color: var(--lp-on-dark); }
body.public .lp-upload .dz-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--lp-forest); border-radius: 10px; padding: 10px 18px;
    font-family: var(--lp-font-head); font-weight: 700; font-size: 14px; white-space: nowrap;
}
body.public .lp-upload #disclaimerBlock { margin-top: 1rem !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.18) !important; }
body.public .lp-upload #disclaimerBlock label { color: #e4ede6 !important; font-size: 13.5px !important; }
body.public .lp-upload #disclaimerBlock a { color: #fff !important; }
body.public .lp-upload #uploadBtn {
    margin-top: .875rem !important; width: 100%;
    background: var(--lp-mint); color: var(--lp-deep); border: 0;
    font-family: var(--lp-font-head); font-weight: 800; font-size: 15px; padding: 12px; border-radius: 10px;
}
body.public .lp-upload #uploadBtn:hover { background: #6ffbbe; }

/* Beispiel-Grafik PDF → XML */
.lp-demo { margin-top: 1.25rem; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 1rem; }
.lp-demo-head { display: flex; justify-content: space-between; font-family: var(--lp-font-mono); font-size: 11px; color: var(--lp-on-dark); letter-spacing: .06em; margin-bottom: .75rem; }
.lp-demo-head span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.lp-demo-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-mint); }
.lp-demo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: .75rem; align-items: center; }
.lp-demo-pdf { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .75rem; display: grid; gap: 7px; }
.lp-demo-file { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-demo-file svg { width: 14px; height: 14px; flex: none; color: var(--lp-mint); }
.lp-demo-pdf i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); }
.lp-demo-sum { display: flex; justify-content: space-between; font-family: var(--lp-font-mono); font-size: 11px; color: var(--lp-on-dark); margin-top: 2px; }
.lp-demo-sum b { color: #fff; }
.lp-demo-arrow { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; color: var(--lp-mint); }
.lp-demo-arrow svg { width: 15px; height: 15px; }
.lp-demo-xml { background: #fff; border-radius: 10px; padding: .75rem; font-family: var(--lp-font-mono); font-size: 10.5px; line-height: 1.7; color: var(--lp-ink); min-width: 0; }
.lp-demo-xml div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-demo-xml .t { color: #8a8f98; }
.lp-demo-xml .v { color: var(--lp-green); font-weight: 700; margin-left: 4px; }
.lp-demo-ok { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; background: var(--lp-mint-pale); color: var(--lp-green); border-radius: 6px; padding: 3px 8px; font-family: var(--lp-font-body); font-size: 11px; font-weight: 700; }
.lp-demo-ok svg { width: 12px; height: 12px; stroke-width: 3; }

.lp-upload-note { margin: 1rem 0 0; font-size: 13px; color: var(--lp-on-dark); line-height: 1.5; }
body.public .lp-upload-note a { color: #fff; font-weight: 600; }

/* ============================================================
   Standards-Band
   ============================================================ */
.lp-band { background: var(--lp-tint); border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); padding: 1.75rem 0; }
.lp-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
body.public .lp-band h2 { font-size: 1.125rem; font-weight: 700; margin: .25rem 0 0; max-width: 26rem; line-height: 1.35; }
.lp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; }
.lp-chips li { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--lp-line); border-radius: 99px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--lp-ink); }
.lp-chips svg { width: 15px; height: 15px; color: var(--lp-green); stroke-width: 2.6; }

/* ============================================================
   Abschnitte
   ============================================================ */
.lp-section { padding: 5rem 0; }
.lp-section--tint { background: var(--lp-tint); }
.lp-section-head { margin-bottom: 2.5rem; }
body.public .lp-section-head h2 { font-size: clamp(1.625rem, 2.8vw, 2.125rem); font-weight: 800; line-height: 1.2; margin: .5rem 0 0; max-width: 40rem; }
.lp-section-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 3rem; flex-wrap: wrap; }
.lp-section-head--split > p { max-width: 28rem; margin: 0; color: var(--lp-muted); font-size: 15.5px; }
.lp-section-head--center { text-align: center; }
body.public .lp-section-head--center h2 { margin-left: auto; margin-right: auto; }
body.public .lp-more { font-weight: 700; text-decoration: none; font-size: 15px; }

/* ---- Werkzeug-Karten ---- */
.lp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
body.public .lp-card {
    background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
    padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem;
    color: inherit; text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.public .lp-card:hover { border-color: var(--lp-green); box-shadow: 0 14px 30px -18px rgba(19,27,46,.3); transform: translateY(-2px); }
.lp-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .5rem; }
.lp-go { font-size: 14px; font-weight: 700; color: var(--lp-green); }
body.public .lp-card h3 { font-size: 1.125rem; font-weight: 750; margin: 0; }
.lp-card p { margin: 0; color: var(--lp-muted); font-size: 14.5px; line-height: 1.55; }
.lp-mini { list-style: none; margin: auto 0 0; padding: .875rem 1rem; background: var(--lp-tint); border-radius: 10px; display: grid; gap: 8px; }
body.public .lp-card p { margin-bottom: .75rem; }
.lp-mini li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--lp-text); }
.lp-mini svg { width: 15px; height: 15px; color: var(--lp-green); stroke-width: 2.6; flex: none; }
body.public .lp-card--accent { background: var(--lp-mint-pale); border-color: #bfe8d3; }
body.public .lp-card--accent .lp-icon { background: #fff; }
body.public .lp-card--accent .lp-mini { background: #fff; }

/* ---- Schritte ---- */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: none; }
.lp-steps li { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 1.75rem; display: flex; flex-direction: column; gap: .625rem; }
.lp-step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--lp-forest); color: var(--lp-mint); display: grid; place-items: center; font-family: var(--lp-font-head); font-weight: 800; font-size: 17px; margin-bottom: .5rem; }
body.public .lp-steps h3 { font-size: 1.1875rem; font-weight: 750; margin: 0; }
.lp-steps p { margin: 0; color: var(--lp-muted); font-size: 15px; }
.lp-step-tag { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--lp-line); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--lp-green); }
.lp-step-tag svg { width: 15px; height: 15px; flex: none; }

/* ---- Vorteile ---- */
.lp-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.lp-feature { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 1.5rem; }
body.public .lp-feature h3 { font-size: 1.0625rem; font-weight: 750; margin: 1rem 0 .5rem; }
.lp-feature p { margin: 0; color: var(--lp-muted); font-size: 14.5px; line-height: 1.6; }

/* ---- FAQ ---- */
.lp-faq { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: .5rem 1.5rem; }
.lp-faq details { border-bottom: 1px solid var(--lp-line); }
.lp-faq details:last-child { border-bottom: 0; }
.lp-faq summary {
    list-style: none; cursor: pointer; padding: 1.125rem 2rem 1.125rem 0; position: relative;
    font-family: var(--lp-font-head); font-weight: 700; font-size: 16px; color: var(--lp-ink); line-height: 1.4;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
    content: ''; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border-right: 2px solid var(--lp-green); border-bottom: 2px solid var(--lp-green); transform: rotate(45deg);
    transition: transform .2s ease, margin-top .2s ease;
}
.lp-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lp-faq summary:hover { color: var(--lp-green); }
.lp-faq details p { margin: 0 0 1.25rem; color: var(--lp-text); font-size: 15px; line-height: 1.65; }

/* ---- Ratgeber ---- */
.lp-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
body.public .lp-guides a {
    display: flex; align-items: center; gap: .875rem; min-height: 44px;
    background: #fff; border: 1px solid var(--lp-line); border-radius: 12px; padding: .875rem 1.125rem;
    color: var(--lp-ink); text-decoration: none; font-weight: 600; font-size: 15px;
    transition: border-color .15s ease;
}
body.public .lp-guides a:hover { border-color: var(--lp-green); color: var(--lp-green); }
.lp-guides svg { width: 18px; height: 18px; color: var(--lp-green); flex: none; }

/* ---- Was ist rechnung3000 ---- */
body.public .lp-about-title { font-size: 1.375rem; font-weight: 800; margin: 0 0 .75rem; }
.lp-about { margin: 0; color: var(--lp-text); font-size: 15.5px; line-height: 1.7; }

/* ---- Abschluss-CTA ---- */
.lp-section--cta { padding-top: 0; background: var(--lp-tint); }
.lp-cta {
    background: radial-gradient(40rem 20rem at 90% 10%, rgba(78,222,163,.18), transparent 70%), linear-gradient(160deg, var(--lp-forest), var(--lp-deep));
    border-radius: 22px; padding: 3rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
}
body.public .lp-cta h2 { color: #fff; font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 800; margin: 0 0 .625rem; }
.lp-cta p { color: var(--lp-on-dark); margin: 0; max-width: 34rem; font-size: 16px; }
.lp-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.lp-cta-actions svg { width: 17px; height: 17px; }
/* Tool-Landingpages: Foto rechts im Kasten, nach links ins Grün ausgeblendet */
.lp-cta--photo { position: relative; overflow: hidden; padding-right: calc(42% + 1rem); }
.lp-cta--photo > div { position: relative; z-index: 1; }
.lp-cta-photo { position: absolute; top: 0; right: 0; width: 42%; height: 100%; object-fit: cover; opacity: .9;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 35%, #000 70%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 35%, #000 70%); }
.lp-cta-credit { position: absolute; right: .75rem; bottom: .5rem; z-index: 1; font-size: 11px; color: rgba(255,255,255,.8); text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Foto über dem Erklärtext der Tool-Landingpages */
.lp-photo { margin: 0 0 2.25rem; }
.lp-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--lp-radius); border: 1px solid var(--lp-line); }
.lp-photo figcaption { margin-top: .4rem; font-size: 12px; color: var(--lp-muted); line-height: 1.4; }

/* Prüfansicht: PDF-Leiste klebt unter der oberen Navigation (68 px) statt unter der App-Topbar */
body.public .rv-grid .pdf-viewer-card { top: calc(68px + 0.75rem); }
body.public .rv-grid .pdf-viewer-container { height: calc(100vh - 68px - 7.5rem); }
@media (max-width: 1024px) {
    body.public .rv-grid .pdf-viewer-container { height: 60vh; }
}

/* ============================================================
   Footer
   ============================================================ */
body.public .lp-footer { background: var(--lp-bg); border-top: 1px solid var(--lp-line); padding: 3.5rem 0 2rem; margin: 0; font-size: 14px; }
.lp-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; }
.lp-footer-brand p { color: var(--lp-muted); margin: 1rem 0 0; max-width: 22rem; line-height: 1.6; }
body.public .lp-footer h2 { font-family: var(--lp-font-head); font-size: 14px; font-weight: 700; color: var(--lp-ink); margin: 0 0 1rem; letter-spacing: 0; }
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
body.public .lp-footer ul a { color: var(--lp-muted); text-decoration: none; }
body.public .lp-footer ul a:hover { color: var(--lp-green); }
.lp-footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lp-line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--lp-muted); font-size: 13px; }
.lp-footer-tags { font-family: var(--lp-font-mono); font-size: 12px; }

/* ============================================================
   Tool-Landingpages (templates/tools/, Okt. 2026)
   Hero wie auf der Startseite, aber in drei Teile zerlegt, damit das Werkzeug
   auf dem Handy direkt unter der Überschrift steht (vor den Häkchen).
   ============================================================ */
.lp-crumbs { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; font-size: 13px; color: var(--lp-muted); }
.lp-crumbs li + li::before { content: '›'; margin-right: .375rem; color: #a3a9b5; }
body.public .lp-crumbs a { color: var(--lp-muted); text-decoration: none; }
body.public .lp-crumbs a:hover { color: var(--lp-green); }
.lp-hero--tool .lp-hero-grid { grid-template-areas: "head card" "body card"; align-items: start; row-gap: 0; }
.lp-hero--tool .lp-hero-head { grid-area: head; }
.lp-hero--tool .lp-hero-body { grid-area: body; }
.lp-hero--tool .lp-upload-card { grid-area: card; }
body.public .lp-hero--tool h1 { font-size: clamp(2rem, 3.6vw, 2.875rem); }
.lp-hero--tool .lp-lead { margin-bottom: 1.5rem; }

/* Formulare im dunklen Werkzeug-Kasten (Prüfen, Anzeigen) */
body.public .lp-upload .lp-submit {
    margin-top: .875rem; width: 100%; cursor: pointer;
    background: var(--lp-mint); color: var(--lp-deep); border: 0;
    font-family: var(--lp-font-head); font-weight: 800; font-size: 15px; padding: 12px; border-radius: 10px;
}
body.public .lp-upload .lp-submit:hover { background: #6ffbbe; }
.lp-upload .lp-opt { margin-top: 1rem; display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.06); color: #e4ede6; font-size: 13.5px; cursor: pointer; }
.lp-upload .lp-opt input { width: 1rem; height: 1rem; accent-color: var(--lp-mint); flex: none; }
.lp-card-facts { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.lp-card-facts li { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .625rem .75rem; }
.lp-card-facts b { display: block; color: #fff; font-family: var(--lp-font-head); font-size: 14px; }
.lp-card-facts span { display: block; color: var(--lp-on-dark); font-size: 12px; line-height: 1.4; }

/* Screenshot im Browserrahmen */
.lp-showcase { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 3rem; align-items: center; }
body.public .lp-showcase-title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.2; margin: .5rem 0 1rem; }
.lp-showcase-copy p { color: var(--lp-text); font-size: 15.5px; margin: 0 0 1.25rem; }
.lp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: lp-point; }
.lp-points li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .75rem; font-size: 15px; line-height: 1.55; counter-increment: lp-point; }
.lp-points li::before { content: counter(lp-point); width: 30px; height: 30px; border-radius: 50%; background: var(--lp-mint-pale); color: var(--lp-green); display: grid; place-items: center; font-family: var(--lp-font-head); font-weight: 800; font-size: 14px; }
.lp-points b { color: var(--lp-ink); }
.lp-shot { margin: 0; background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(19,27,46,.45), 0 2px 6px rgba(19,27,46,.04); }
.lp-shot-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--lp-tint); border-bottom: 1px solid var(--lp-line); }
.lp-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5d9e2; flex: none; }
.lp-shot-bar span { margin-left: 10px; flex: 1; min-width: 0; background: #fff; border: 1px solid var(--lp-line); border-radius: 6px; padding: 3px 10px; font-family: var(--lp-font-mono); font-size: 11.5px; color: var(--lp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-shot--narrow { max-width: 30rem; justify-self: center; width: 100%; }
.lp-shot figcaption { padding: .75rem 1.125rem; border-top: 1px solid var(--lp-line); font-size: 13px; color: var(--lp-muted); line-height: 1.5; }

/* Fließtext + Infokasten */
.lp-content { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; align-items: start; }
.lp-prose { max-width: 46rem; font-size: 16px; line-height: 1.75; color: var(--lp-text); }
body.public .lp-prose h2 { font-size: clamp(1.375rem, 2.3vw, 1.75rem); font-weight: 800; line-height: 1.25; margin: 2.75rem 0 .875rem; }
body.public .lp-prose h2:first-child { margin-top: 0; }
body.public .lp-prose h3 { font-size: 1.125rem; font-weight: 750; margin: 1.75rem 0 .5rem; }
.lp-prose p { margin: 0 0 1rem; }
.lp-prose ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.lp-prose li { margin-bottom: .375rem; }
.lp-prose li::marker { color: var(--lp-green); }
.lp-prose strong { color: var(--lp-ink); font-weight: 650; }
.lp-prose code { font-family: var(--lp-font-mono); font-size: .875em; background: var(--lp-tint); border: 1px solid var(--lp-line); border-radius: 5px; padding: 1px 5px; color: var(--lp-ink); }
.lp-table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--lp-line); border-radius: 12px; background: #fff; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.lp-table th, .lp-table td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--lp-line); vertical-align: top; }
.lp-table thead th { background: var(--lp-tint); font-family: var(--lp-font-head); font-size: 13px; font-weight: 700; color: var(--lp-ink); white-space: nowrap; }
.lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-table td:first-child { white-space: nowrap; font-family: var(--lp-font-mono); font-size: 13px; color: var(--lp-green); font-weight: 600; }
.lp-table--plain td:first-child { font-family: var(--lp-font-body); font-size: 14.5px; color: var(--lp-ink); white-space: normal; }
.lp-note { margin: 1.5rem 0; padding: 1.125rem 1.25rem; border-radius: 12px; background: #fff8eb; border: 1px solid #f1dcb0; font-size: 15px; line-height: 1.65; }
.lp-note b { color: #7a4b00; }
.lp-note p { margin: 0; }
.lp-note p + p { margin-top: .5rem; }
.lp-aside { position: sticky; top: calc(68px + 1.5rem); display: grid; gap: 1rem; }
.lp-spec { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 1.375rem; }
body.public .lp-spec h2 { font-size: 15px; font-weight: 800; margin: 0 0 1rem; letter-spacing: 0; }
.lp-spec dl { margin: 0; display: grid; gap: .875rem; }
.lp-spec dt { font-family: var(--lp-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); font-weight: 600; }
.lp-spec dd { margin: .125rem 0 0; font-size: 14.5px; color: var(--lp-ink); line-height: 1.5; }
.lp-spec .lp-btn { width: 100%; margin-top: 1.25rem; box-sizing: border-box; }
.lp-spec-small { margin: .875rem 0 0; font-size: 12.5px; color: var(--lp-muted); line-height: 1.5; }

.lp-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Startseite: Direktlinks auf die Tool-Landingpages unter den Werkzeug-Karten */
.lp-quicklinks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; font-size: 14px; }
.lp-quicklinks li:first-child { color: var(--lp-muted); margin-right: .25rem; }
body.public .lp-quicklinks a { display: inline-flex; padding: 7px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--lp-line); color: var(--lp-ink); font-weight: 600; text-decoration: none; }
body.public .lp-quicklinks a:hover { border-color: var(--lp-green); color: var(--lp-green); }



/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
    .lp-cards, .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .lp-content { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .lp-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
@media (max-width: 980px) {
    .lp-hero { padding: 2.5rem 0 3.5rem; }
    .lp-hero--tool .lp-hero-grid { grid-template-areas: "head" "card" "body"; row-gap: 2rem; }
    .lp-hero--tool .lp-lead { margin-bottom: 0; }
    .lp-showcase { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .lp-cards--3 { grid-template-columns: minmax(0, 1fr); }
    .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .lp-nav-toggle { display: inline-flex; }
    .lp-nav-menu {
        display: none; position: absolute; top: 68px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--lp-line); padding: .5rem 1.5rem 1.25rem;
        box-shadow: 0 20px 30px -20px rgba(19,27,46,.25);
    }
    .lp-nav-menu.is-open { display: flex; }
    body.public .lp-nav-menu > a { padding: .875rem 0; border-bottom: 1px solid var(--lp-line); }
    .lp-nav-actions { margin: 1rem 0 0; justify-content: space-between; }
    /* Konto-Menü im aufgeklappten Handy-Menü direkt als Liste, ohne zweites Aufklappen */
    .lp-nav-actions--user { flex-direction: column-reverse; align-items: stretch; gap: .75rem; }
    body.public .lp-nav-actions--user .lp-quota { align-self: flex-start; }
    body.public .lp-account-toggle { display: none; }
    .lp-account-panel, .lp-account.is-open .lp-account-panel { display: flex; position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; background: var(--lp-tint); border-radius: 12px; }
    .lp-account-head { padding: .75rem 1rem; }
    body.public .lp-account-panel a { padding: .625rem 1rem; }
    .lp-nav-menu.is-open { max-height: calc(100vh - 68px); overflow-y: auto; }
    .lp-steps { grid-template-columns: minmax(0, 1fr); }
    .lp-footer-grid { grid-template-columns: repeat(4, 1fr); }
    .lp-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .lp-wrap { padding: 0 1rem; }
    body.public:not(.landing) .main-content { padding: 1.5rem 1rem 3rem; }
    .lp-section { padding: 3.5rem 0; }
    .lp-upload-card { padding: 1.25rem; border-radius: 16px; }
    .lp-cards, .lp-features, .lp-guides { grid-template-columns: minmax(0, 1fr); }
    .lp-demo-row { grid-template-columns: minmax(0, 1fr); }
    .lp-demo-arrow { transform: rotate(90deg); justify-self: center; }
    .lp-cta { padding: 2rem 1.5rem; }
    .lp-cta--photo { padding-right: 1.5rem; }
    .lp-cta-photo { position: relative; order: -1; width: calc(100% + 3rem); height: 180px; flex: 0 0 calc(100% + 3rem); margin: -2rem -1.5rem 0;
        -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 60%); mask-image: linear-gradient(0deg, transparent 0%, #000 60%); }
    .lp-cta-credit { top: .5rem; bottom: auto; }
    .lp-cta-actions, .lp-cta-actions .lp-btn { width: 100%; }
    .lp-footer-grid { grid-template-columns: 1fr 1fr; }
    .lp-faq { padding: .25rem 1rem; }
    .lp-card-facts li { padding: .5rem .5625rem; }
    .lp-card-facts b { font-size: 13px; }
    .lp-card-facts span { font-size: 11px; }
    .lp-prose { font-size: 15.5px; }
    .lp-table th, .lp-table td { padding: .625rem .75rem; }
}
/* ── E-Rechnung erstellen: Abrechnungsart als Auswahlkarten (create.php) ── */
body.public .vat-mode { margin: 0 0 1.5rem; padding: 0; border: 0; min-width: 0; }
body.public .vat-mode-legend { padding: 0; margin-bottom: .75rem; font-size: .8125rem; font-weight: 600; color: var(--lp-ink); }
body.public .vat-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
body.public .vat-opt {
    position: relative; display: flex; flex-direction: column; gap: .625rem;
    padding: 1.25rem; background: var(--lp-card); border: 1.5px solid var(--lp-line); border-radius: var(--lp-radius);
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
body.public .vat-opt:hover { border-color: #b9c2d3; }
body.public .vat-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
body.public .vat-opt-ico {
    width: 40px; height: 40px; border-radius: 10px; background: var(--lp-tint); color: var(--lp-text);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.public .vat-opt-text { display: flex; flex-direction: column; gap: .375rem; }
body.public .vat-opt-title { font-family: var(--lp-font-head); font-size: 1rem; font-weight: 700; color: var(--lp-ink); }
body.public .vat-opt-desc { font-size: .875rem; line-height: 1.5; color: var(--lp-text); }
body.public .vat-opt-chk {
    position: absolute; top: 1.125rem; right: 1.125rem; width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid #c9cfdb; color: transparent; display: flex; align-items: center; justify-content: center;
}
body.public .vat-opt:has(input:checked) { border-color: var(--lp-green); box-shadow: 0 0 0 3px var(--lp-mint-pale); }
body.public .vat-opt:has(input:checked) .vat-opt-ico { background: var(--lp-mint-pale); color: var(--lp-green); }
body.public .vat-opt:has(input:checked) .vat-opt-chk { background: var(--lp-green); border-color: var(--lp-green); color: #fff; }
body.public .vat-opt:has(input:focus-visible) { outline: 2px solid var(--lp-green); outline-offset: 3px; }
@media (max-width: 760px) {
    body.public .vat-mode-grid { grid-template-columns: minmax(0, 1fr); gap: .625rem; }
    body.public .vat-opt { flex-direction: row; align-items: center; gap: .75rem; padding: .875rem; min-height: 64px; border-radius: 12px; }
    body.public .vat-opt-ico { width: 36px; height: 36px; border-radius: 9px; }
    body.public .vat-opt-text { flex: 1; gap: .125rem; }
    body.public .vat-opt-title { font-family: var(--lp-font-body); font-size: .9375rem; font-weight: 600; }
    body.public .vat-opt-desc { font-size: .8125rem; color: #5b6270; }
    body.public .vat-opt-chk { position: static; flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.public * { transition: none !important; }
}

/* ============================================================
   Landingpage /e-rechnung-ohne-neues-programm (Okt. 2026, templates/tools/e-rechnung-ohne-neues-programm.php)
   Warmer Hintergrund im Hero, Foto-Mosaik, Wegauswahl als Tabs (ohne JS alle Wege untereinander).
   ============================================================ */
.lpw-hero { padding: 3rem 0 4.5rem; background: #fbf8f3; }
.lpw-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
body.public .lpw-hero h1 { font-size: clamp(2.125rem, 4.4vw, 3.375rem); line-height: 1.08; font-weight: 800; margin: .75rem 0 1.25rem; letter-spacing: -0.03em; }
.lpw-lead { font-size: 1.1875rem; line-height: 1.65; color: var(--lp-text); margin: 0 0 1.75rem; max-width: 36rem; }
.lpw-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
body.public .lpw-btn-lg { font-size: 16px; padding: 14px 24px; min-height: 48px; border-radius: 999px; }
body.public .lpw-btn-outline { color: var(--lp-ink); border: 1.5px solid #d9d2c5; background: #fff; }
body.public .lpw-btn-outline:hover { border-color: var(--lp-green); color: var(--lp-green); }
.lpw-btn-outline svg { width: 17px; height: 17px; }
.lpw-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: 14.5px; color: var(--lp-text); }
.lpw-facts li { display: inline-flex; align-items: center; gap: 7px; }
.lpw-facts svg { color: var(--lp-green); stroke-width: 2.5; width: 16px; height: 16px; }
.lpw-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .875rem; height: 420px; }
.lpw-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.lpw-mosaic .lpw-mosaic-tall { grid-row: span 2; }

body.public .lpw .lp-section-head h2 { max-width: 46rem; }
.lpw-sub { margin: .625rem 0 0; font-size: 1.0625rem; color: var(--lp-text); max-width: 42rem; }

/* Wegauswahl */
.lpw-tabs { display: none; flex-wrap: wrap; gap: .625rem; margin-bottom: 1.5rem; }
.lpw-ways.is-js .lpw-tabs { display: flex; }
body.public .lpw-tabs button {
    font: 600 15.5px var(--lp-font-body); min-height: 46px; padding: 10px 20px; border-radius: 999px; cursor: pointer;
    background: #fff; color: var(--lp-ink); border: 1px solid #d9d2c5; transition: border-color .15s ease, background-color .15s ease;
}
body.public .lpw-tabs button:hover { border-color: var(--lp-green); }
body.public .lpw-tabs button[aria-selected="true"] { background: var(--lp-ink); color: #fff; border-color: var(--lp-ink); }
body.public .lpw-tabs button:focus-visible { outline: 2px solid var(--lp-green); outline-offset: 2px; }
.lpw-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; background: #fbf8f3; border-radius: 22px; padding: 2.5rem; }
.lpw-panel + .lpw-panel { margin-top: 1rem; }
.lpw-ways.is-js .lpw-panel + .lpw-panel { margin-top: 0; }
.lpw-panel[hidden] { display: none; }
body.public .lpw-panel h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 800; line-height: 1.2; margin: .5rem 0 .875rem; }
.lpw-panel p { margin: 0 0 1.5rem; font-size: 16.5px; line-height: 1.65; }
.lpw-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
body.public .lpw-btn-dark { background: var(--lp-ink); color: #fff; border-radius: 999px; min-height: 46px; }
body.public .lpw-btn-dark:hover { background: #24304a; }
body.public .lpw-more { color: var(--lp-green); font-weight: 600; font-size: 15px; text-decoration: none; }
body.public .lpw-more:hover { text-decoration: underline; }
.lpw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; align-content: start; }
.lpw-steps li { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border-radius: 14px; padding: 1rem 1.25rem; color: var(--lp-ink); font-size: 15.5px; line-height: 1.5; }
.lpw-steps span { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--lp-mint-pale); color: var(--lp-green); display: grid; place-items: center; font: 800 14px var(--lp-font-head); }

/* Upload-Abschnitt */
.lpw-tool { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
body.public .lpw-tool h2#werkzeug-title { font-size: clamp(1.625rem, 2.8vw, 2.125rem); font-weight: 800; line-height: 1.2; margin: .5rem 0 1.5rem; }
body.public .lpw-tool .lpw-card-title { font-size: 1.5rem; }

/* Beispiele */
.lpw-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.lpw-examples article { background: #fff; border: 1px solid var(--lp-line); border-radius: 20px; overflow: hidden; }
.lpw-examples img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.lpw-examples article > div { padding: 1.5rem 1.625rem 1.75rem; }
.lpw-tag { margin: 0 0 .375rem; font: 600 12px var(--lp-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); }
body.public .lpw-examples h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 .5rem; }
.lpw-examples p:last-child { margin: 0; font-size: 15px; line-height: 1.6; }
.lpw-credit { margin: 1rem 0 0; font-size: 12px; color: var(--lp-muted); }

/* Preisband */
.lpw-band { background: var(--lp-deep); color: var(--lp-on-dark); padding: 4.5rem 0; }
.lpw-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem; align-items: center; }
body.public .lpw-band h2 { color: #fff; font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.15; margin: 0 0 .875rem; }
.lpw-band p { margin: 0; font-size: 16.5px; color: #d6e4dc; }
.lpw-prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lpw-prices li { background: var(--lp-forest); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 1.375rem; }
.lpw-prices b { display: block; font: 800 2rem/1.1 var(--lp-font-head); color: var(--lp-mint); margin-bottom: .375rem; }
.lpw-prices span { display: block; font-size: 14px; line-height: 1.45; color: #d6e4dc; }

/* Pflicht + FAQ */
.lpw-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: start; }
body.public .lpw-split h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.2; margin: 0 0 1.25rem; }
.lpw-timeline { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.lpw-timeline li { background: #fff; border: 1px solid var(--lp-line); border-left: 0; border-radius: 0 14px 14px 0; box-shadow: inset 4px 0 0 var(--lp-green); padding: .875rem 1.125rem; font-size: 15px; line-height: 1.5; color: var(--lp-ink); }
.lpw-timeline b { display: block; color: var(--lp-green); font-size: 14px; }
.lpw-small { font-size: 14px; color: var(--lp-muted); margin: 0 0 1rem; line-height: 1.55; }

@media (max-width: 980px) {
    .lpw-hero { padding: 2rem 0 3.5rem; }
    .lpw-hero-grid, .lpw-tool, .lpw-band-grid, .lpw-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .lpw-mosaic { height: 300px; }
    .lpw-panel { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.75rem 1.25rem; }
    .lpw-examples { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .lpw-mosaic { height: 240px; gap: .5rem; }
    .lpw-mosaic img { border-radius: 14px; }
    .lpw-prices { grid-template-columns: minmax(0, 1fr); }
    body.public .lpw-tabs button { flex: 1 1 auto; padding: 10px 14px; font-size: 14.5px; }
}