/* ==========================================================================
   Makerio · Startseite (makerio.de)

   Mobil zuerst: alles hier oben beschreibt die Handy-Fassung, die Media
   Queries unten sind Erweiterung. Nimmt man sie weg, bleibt eine
   funktionierende Seite uebrig.

   Zwei Namensraeume:
     .lp-  Seitengeruest (landing page)
     .mk-  Oberflaechen-Nachbauten (mockup) — sie sehen aus wie die echte
           Anwendung, sind aber bewusst EIGENE Klassen. Wuerde ich app.css
           einbinden, muesste die Werbeseite jede Layoutaenderung im Produkt
           mitmachen, und ein Umbau dort wuerde hier still etwas zerschiessen.

   Farben stehen jetzt in DREI Dateien (auth.css, app.css, start.css) —
   beim Markenwechsel alle drei anpassen.
   ========================================================================== */

:root {
    --teal:        #007d7e;
    --teal-dunkel: #00696a;
    --teal-hell:   #009c9e;
    --teal-weich:  #e4f2f2;

    --navy:        #112031;
    --navy-2:      #14343d;

    --karte:       #ffffff;
    --grund:       #f5f7f8;
    --tinte:       #12222a;
    --tinte-weich: #5b6b73;
    --tinte-zart:  #64747c;   /* 4,85:1 auf Weiss — §0aa */
    --rahmen:      #e2e8ea;

    --erfolg:      #1d7a55;
    --erfolg-weich:#e6f4ec;
    --warn-weich:  #fdf3e0;
    --warn:        #8a6100;
    --fehler:      #b3261e;

    --radius: 16px;
    --ziel:   52px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--karte);
    color: var(--tinte);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 { line-height: 1.18; letter-spacing: -.028em; margin: 0 0 14px; }
h1 { font-size: 2.05rem; font-weight: 800; }
h2 { font-size: 1.6rem;  font-weight: 800; }
h3 { font-size: 1.3rem;  font-weight: 800; }
p  { margin: 0 0 16px; }

a { color: var(--teal); }

.lp-sprung {
    position: absolute;
    left: -9999px; top: 0; z-index: 20;
    padding: 12px 18px;
    background: var(--navy); color: #fff; text-decoration: none;
}
.lp-sprung:focus { left: 0; }

.lp-breite {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 calc(20px + env(safe-area-inset-left)) 0 calc(20px + env(safe-area-inset-right));
}
.lp-schmal { max-width: 700px; margin-left: auto; margin-right: auto; }
.lp-mitte  { text-align: center; }

/* ------------------------------------------------------------------ Kopf */

.lp-kopf {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 12px 0;
    background: rgba(17,32,49,.92);
    /* Der Kopf bleibt stehen; ohne Weichzeichner wird darunterliegender Text
       beim Scrollen unlesbar. Wo es fehlt, traegt die Deckfarbe oben allein. */
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.lp-kopf-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.lp-logo {
    /* Gemessen: das Logo ist nur 25px hoch — der Link muss trotzdem 44px
       Tippziel bieten. Das Bild bleibt, der anfassbare Bereich waechst. */
    display: inline-flex; align-items: center; min-height: 44px; line-height: 0;
}
.lp-logo .logo-bild { width: 132px; height: auto; }

.lp-kopf-nav { display: flex; align-items: center; gap: 4px; }
.lp-anmelden {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 12px;
    color: rgba(255,255,255,.86);
    font-size: .95rem; font-weight: 600; text-decoration: none;
}

/* ---------------------------------------------------------------- Knoepfe */

.lp-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--ziel); padding: 0 24px;
    border: 0; border-radius: 12px;
    background: var(--teal); color: #fff;
    font: inherit; font-weight: 700; text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,125,126,.28);
}
.lp-knopf:active { background: var(--teal-dunkel); }

/* Modifikatoren IMMER hinter der Grundregel — bei gleicher Spezifitaet
   gewinnt die spaetere. Im Projekt schon dreimal andersherum passiert. */
.lp-knopf-klein { min-height: 44px; padding: 0 16px; font-size: .93rem; box-shadow: none; }
.lp-knopf-gross { min-height: 58px; padding: 0 30px; font-size: 1.05rem; }

.lp-knopf-still {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--ziel); padding: 0 18px;
    color: var(--teal); font-weight: 700; text-decoration: none;
}

/* ------------------------------------------------------------------ Hero */

.lp-hero {
    position: relative;
    padding: 46px 0 54px;
    background:
        radial-gradient(90% 70% at 12% -10%, rgba(0,156,158,.20) 0%, rgba(0,156,158,0) 62%),
        radial-gradient(70% 60% at 100% 10%, rgba(0,156,158,.10) 0%, rgba(0,156,158,0) 60%),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff;
    overflow: hidden;
}

.lp-eyebrow {
    margin: 0 0 12px;
    color: var(--teal-hell);
    font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.lp-eyebrow-dunkel { color: var(--teal); }

.lp-hero h1 { font-size: 2.1rem; margin-bottom: 18px; }
.lp-hero h1 em { font-style: normal; color: var(--teal-hell); }
/* Durchgestrichen sagt in einer Zeile, was sonst ein Absatz braeuchte. */
.lp-durch { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .5; }

.lp-lead { font-size: 1.06rem; line-height: 1.65; color: rgba(255,255,255,.82); }
.lp-abschnitt .lp-lead, .lp-cta .lp-lead { color: var(--tinte-weich); }

.lp-taten { display: flex; flex-direction: column; gap: 8px; margin: 26px 0 18px; }
.lp-taten .lp-knopf { width: 100%; }
.lp-hero .lp-knopf-still { color: #fff; }

.lp-vertrauen {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    margin: 0; padding: 0; list-style: none;
}
.lp-vertrauen li {
    display: flex; align-items: center; gap: 6px;
    font-size: .84rem; color: rgba(255,255,255,.62);
}
.lp-vertrauen svg { width: 15px; height: 15px; color: var(--teal-hell); flex: 0 0 auto; }

.lp-hero-schau { margin-top: 34px; }
.lp-bildunter {
    margin: 14px 0 0; text-align: center;
    font-size: .86rem; font-style: italic; color: rgba(255,255,255,.6);
}

/* ============================================== Geraete- und Fensterrahmen */

.lp-handy { max-width: 320px; margin: 0 auto; }
.lp-handy-rand {
    position: relative;
    padding: 10px;
    border-radius: 34px;
    background: linear-gradient(160deg, #1d2b3a, #0b1620);
    box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.lp-handy-kerbe {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 96px; height: 20px;
    border-radius: 0 0 12px 12px;
    background: #0b1620;
    z-index: 2;
}
.lp-handy-schirm {
    border-radius: 26px; overflow: hidden; background: var(--grund);
}
.lp-handy-kopf {
    padding: 26px 14px 10px;
    background: var(--karte);
    border-bottom: 1px solid var(--rahmen);
    font-size: .82rem; font-weight: 700; text-align: center; color: var(--tinte);
}
.lp-handy-inhalt { padding: 12px; text-align: left; }

.lp-fenster {
    border-radius: 14px; overflow: hidden;
    background: var(--karte);
    border: 1px solid var(--rahmen);
    box-shadow: 0 24px 60px rgba(17,32,49,.22);
}
.lp-fenster-leiste {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px;
    background: var(--grund);
    border-bottom: 1px solid var(--rahmen);
}
.lp-punkt { width: 9px; height: 9px; border-radius: 50%; background: #d5dee1; flex: 0 0 auto; }
.lp-adresse {
    flex: 1 1 auto; min-width: 0;
    margin-left: 8px; padding: 3px 10px;
    border-radius: 20px; background: var(--karte);
    font-size: .72rem; color: var(--tinte-zart);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-fenster-inhalt { padding: 14px; text-align: left; }

/* ==================================================== Oberflaechen-Nachbau */

.mk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mk-nr   { font-size: .72rem; font-weight: 700; color: var(--tinte-zart); }
.mk-zeit { font-size: .72rem; color: var(--tinte-zart); white-space: nowrap; }
.mk-kunde { display: block; margin: 2px 0 10px; font-size: .98rem; }

.mk-zustand {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; padding: 10px 12px;
    border-left: 3px solid var(--teal);
    border-radius: 10px; background: var(--karte);
}
.mk-z-icon {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    border-radius: 9px; background: var(--teal-weich); color: var(--teal);
}
.mk-z-icon svg { width: 17px; height: 17px; }
.mk-zustand strong { display: block; font-size: .88rem; }
.mk-zustand small  { font-size: .74rem; color: var(--tinte-weich); }

.mk-pos {
    margin-bottom: 10px; padding: 11px 12px;
    border-left: 3px solid var(--teal); border-radius: 10px;
    background: var(--karte);
}
.mk-pos-fertig { border-left-color: var(--erfolg); opacity: .82; }
.mk-p-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; }

.mk-pers { margin-top: 9px; padding: 9px 11px; border-radius: 9px; background: var(--grund); }
.mk-pers-offen { background: var(--warn-weich); }
.mk-pers-kopf {
    display: block; font-size: .64rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-weich);
}
.mk-pers-offen .mk-pers-kopf { color: var(--warn); }
.mk-pers-text { display: block; margin-top: 3px; font-size: .92rem; font-weight: 700; line-height: 1.45; }

/* Umbruch statt nowrap: ein sechsstufiger Weg passt sonst nicht und schiebt
   die Seite seitlich raus — derselbe Fehler wie im Produkt (§0f). */
.mk-weg { display: flex; flex-wrap: wrap; gap: 4px 3px; margin: 10px 0 0; padding: 0; list-style: none; }
.mk-weg li { padding: 2px 7px; border-radius: 20px; background: var(--grund); font-size: .64rem; color: var(--tinte-zart); }
.mk-weg .ist-fertig { background: var(--erfolg-weich); color: var(--erfolg); }
.mk-weg .ist-jetzt  { background: var(--teal); color: #fff; font-weight: 700; }
.mk-weg .ist-fertig.ist-jetzt { background: var(--erfolg); color: #fff; }

.mk-knopf {
    display: block; margin-top: 10px; padding: 9px;
    border-radius: 10px; background: var(--teal);
    color: #fff; font-size: .8rem; font-weight: 700; text-align: center;
}
.mk-frage { margin: 9px 0 0; font-size: .78rem; color: var(--tinte-weich); }
.mk-sperre {
    margin: 10px 0 0; padding: 9px 11px;
    border-radius: 9px; background: var(--grund);
    font-size: .74rem; color: var(--tinte-weich);
}

.mk-titel { margin-bottom: 12px; font-size: .95rem; font-weight: 800; }

/* --- Produktanlage: die drei Auswahlkarten + das dunkle Wegband --- */
.mk-wahl { display: grid; gap: 7px; }
.mk-wahl span {
    padding: 9px 11px;
    border: 1.5px solid var(--rahmen); border-radius: 10px;
    font-size: .74rem; color: var(--tinte-zart);
}
.mk-wahl em { display: block; font-style: normal; font-weight: 700; font-size: .82rem; color: var(--tinte); }
.mk-wahl .ist-aktiv { border-color: var(--teal); background: var(--teal-weich); }
.mk-wahl .ist-aktiv em { color: var(--teal-dunkel); }

.mk-band {
    margin-top: 12px; padding: 11px 12px;
    border-radius: 10px;
    background: linear-gradient(160deg, var(--navy), var(--navy-2));
}
.mk-band small {
    display: block; margin-bottom: 7px;
    font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.mk-weg-band li { background: rgba(255,255,255,.1); color: rgba(255,255,255,.86); }

/* --- Scan-Seite --- */
.mk-scan { text-align: center; }
.mk-scan-art {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    background: var(--teal-weich); color: var(--teal);
    font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.mk-scan-name { display: block; margin-top: 7px; font-size: 1.02rem; }
.mk-scan-ort  { display: block; font-size: .72rem; color: var(--tinte-zart); }
.mk-scan-zahl {
    display: block; margin: 12px 0;
    font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
}
.mk-scan-zahl small { display: block; font-size: .78rem; font-weight: 600; color: var(--tinte-weich); letter-spacing: 0; }
.mk-scan-tasten { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mk-scan-tasten span {
    padding: 11px 6px; border-radius: 10px;
    background: var(--grund); font-size: .78rem; font-weight: 700;
}
.mk-scan-tasten .ist-teal { background: var(--teal); color: #fff; }
.mk-scan-verlauf { margin-top: 12px; text-align: left; }
.mk-scan-verlauf span {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 7px 0; border-top: 1px solid var(--rahmen);
    font-size: .72rem; color: var(--tinte-weich);
}
.mk-scan-verlauf em { font-style: normal; color: var(--tinte-zart); }

/* --- Einkaufsliste --- */
.mk-lieferant {
    margin: 12px 0 6px;
    font-size: .68rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--tinte-zart);
}
.mk-ek {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-top: 1px solid var(--rahmen);
}
.mk-ek-name { font-size: .84rem; font-weight: 600; min-width: 0; }
.mk-ek-name em { display: block; font-style: normal; font-weight: 400; font-size: .72rem; color: var(--tinte-zart); }
.mk-ek-menge {
    flex: 0 0 auto; max-width: 58%;
    text-align: right; font-size: .95rem; font-weight: 800; color: var(--teal);
}
.mk-ek-menge small { font-size: .68rem; font-weight: 600; }
/* Die Begruendung an der Zahl: eine Zahl ohne Herkunft wird blind uebernommen
   oder ignoriert — beides schlechter als eine, die man nachrechnen kann. */
.mk-ek-menge em {
    display: block; font-style: normal; font-weight: 400;
    font-size: .66rem; line-height: 1.4; color: var(--tinte-weich);
}
/* Geschaetzt steht kursiv und grau: soll nicht gleich viel Vertrauen bekommen. */
.mk-ek-schaetzung { color: var(--tinte-zart); font-style: italic; }
.mk-ekband {
    margin-top: 12px; padding: 10px 12px;
    border-radius: 10px; background: var(--grund);
    font-size: .8rem; color: var(--tinte-weich);
}

/* --- Etsy-Import: eine Meldung, die schon passiert ist --- */
.mk-imp {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px; margin-bottom: 4px;
    border-radius: 10px; background: var(--teal-weich);
    font-size: .84rem;
}
.mk-imp-punkt {
    flex: none; width: 8px; height: 8px; margin-top: 5px;
    border-radius: 50%; background: var(--teal);
}
.mk-imp em {
    display: block; margin-top: 2px;
    font-style: normal; font-weight: 400; font-size: .72rem; color: var(--tinte-weich);
}

/* --- Belegerkennung: der Vorschlag, den man bestaetigt --- */
.mk-beleg-marke {
    display: inline-block; margin-bottom: 9px; padding: 3px 9px;
    border-radius: 20px; background: var(--teal-weich); color: var(--teal);
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.mk-beleg-firma { display: block; font-size: 1.02rem; }
.mk-beleg-datum { display: block; margin-top: 2px; font-size: .78rem; color: var(--tinte-zart); }
.mk-beleg-werte { margin: 14px 0 0; }
.mk-beleg-werte > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-top: 1px solid var(--rahmen);
    font-size: .86rem;
}
.mk-beleg-werte dt { color: var(--tinte-weich); }
.mk-beleg-werte dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-beleg-werte .ist-summe { border-top-width: 1.5px; border-top-color: var(--tinte-zart); }
.mk-beleg-werte .ist-summe dt { color: var(--tinte); font-weight: 700; }
.mk-beleg-werte .ist-summe dd { font-size: 1rem; font-weight: 800; }
.mk-beleg-kat {
    display: block; margin-top: 12px; padding: 7px 10px;
    border-radius: 8px; background: var(--grund);
    font-size: .76rem; color: var(--tinte-weich);
}
.mk-beleg-tasten { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.mk-beleg-tasten span {
    padding: 9px 0; border: 1px solid var(--rahmen); border-radius: 9px;
    text-align: center; font-size: .8rem; font-weight: 600; color: var(--tinte-weich);
}
.mk-beleg-tasten .ist-teal { background: var(--teal); border-color: var(--teal); color: #fff; }

/* --------------------------------------------------------------- Branchen */

.lp-branchen { padding: 28px 0; border-bottom: 1px solid var(--rahmen); }
.lp-branchen-titel {
    margin: 0 0 14px; text-align: center;
    font-size: .82rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--tinte-zart);
}
.lp-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
    margin: 0; padding: 0; list-style: none;
}
.lp-chips li {
    padding: 6px 13px; border-radius: 20px;
    background: var(--grund); border: 1px solid var(--rahmen);
    font-size: .84rem; font-weight: 600; color: var(--tinte-weich);
}

/* ------------------------------------------------------------- Abschnitte */

.lp-abschnitt { padding: 54px 0; }
.lp-grund  { background: var(--grund); }
.lp-dunkel {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff;
}
.lp-dunkel .lp-gross, .lp-dunkel .lp-lead, .lp-dunkel p { color: rgba(255,255,255,.82); }
.lp-dunkel h2, .lp-dunkel h3 { color: #fff; }
.lp-gross { font-size: 1.06rem; }

/* --------------------------------------------------------------- Vergleich */

.lp-tabelle {
    margin-top: 34px;
    border-radius: var(--radius); overflow: hidden;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
}
.lp-t-kopf, .lp-t-zeile {
    display: grid;
    /* Auf dem Handy zwei Spalten: die Beschreibung rutscht unter die Zeile.
       Drei Spalten waeren auf 320px unlesbar. */
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 12px 14px;
    align-items: center;
}
.lp-t-kopf {
    background: rgba(255,255,255,.06);
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,.6);
}
.lp-t-zeile { border-top: 1px solid rgba(255,255,255,.08); }
.lp-t-was { font-weight: 700; font-size: .95rem; }
.lp-t-alt { text-align: center; }
.lp-t-neu {
    grid-column: 1 / -1;
    display: flex; align-items: flex-start; gap: 9px;
    font-size: .84rem; color: rgba(255,255,255,.68);
}
/*
 * Auf dem Handy steht „Makerio" als ZWEITE Kopfzeile, nicht ausgeblendet.
 * Vorher war dort nur „Händlersoftware" beschriftet — das teale Häkchen in
 * jeder Zeile hatte damit keine Überschrift, und man musste raten, wozu es
 * gehört. Der linke Einzug bringt es genau über die Häkchen darunter.
 */
.lp-t-kopf .lp-t-neu {
    margin-top: 6px;
    padding-left: 35px;
    color: var(--teal-hell);
}

.lp-ja, .lp-nein, .lp-kann, .lp-absicht {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
    width: 26px; height: 26px; border-radius: 50%;
}
/* Die Haendlerspalte bleibt gedaempft — sie ist der Vergleich, nicht das
   Angebot. Nur Makerios Haken traegt die Markenfarbe. */
.lp-ja   { background: rgba(255,255,255,.14); color: rgba(255,255,255,.72); }
.lp-nein { background: rgba(179,38,30,.22);  color: #ff9c95; }
.lp-kann { background: rgba(0,178,178,.20);  color: #6fe0de; }
/* „Bewusst nicht" ist ein Strich, kein Kreuz: nicht koennen und nicht wollen
   sind zwei verschiedene Aussagen. */
.lp-absicht { background: rgba(255,255,255,.08); color: rgba(255,255,255,.45); }
.lp-ja svg, .lp-nein svg, .lp-kann svg, .lp-absicht svg { width: 15px; height: 15px; }

/* -------------------------------------------------------------- Rundgang */

.lp-zug { padding: 48px 0; }
.lp-zweispalt { display: grid; gap: 30px; }

.lp-nummer {
    display: inline-block; margin-bottom: 10px;
    font-size: .8rem; font-weight: 800; letter-spacing: .12em; color: var(--teal);
}
.lp-dunkel .lp-nummer { color: var(--teal-hell); }
.lp-zug-text p { color: var(--tinte-weich); }
.lp-dunkel .lp-zug-text p { color: rgba(255,255,255,.82); }
.lp-zug-text em { font-style: italic; }

.lp-klein-dunkel { font-size: .88rem !important; color: var(--tinte-zart) !important; }

.lp-haken { margin: 0; padding: 0; list-style: none; }
.lp-haken li {
    position: relative; margin-bottom: 11px; padding-left: 30px;
    color: var(--tinte-weich); font-size: .96rem;
}
.lp-haken li::before {
    content: ""; position: absolute; left: 2px; top: .52em;
    width: 13px; height: 7px;
    border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal);
    transform: rotate(-45deg);
}
.lp-haken-hell li { color: rgba(255,255,255,.82); }
.lp-haken-hell li::before { border-color: var(--teal-hell); }

/* ---------------------------------------------------------------- Raster */

.lp-raster { display: grid; gap: 14px; margin-top: 34px; }
.lp-merkmal {
    /* min-width: 0 — ohne das sprengt ein langes Wort die Spur. Im Projekt
       schon zweimal die Ursache fuer seitlichen Ueberlauf gewesen. */
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--rahmen); border-radius: var(--radius);
    background: var(--karte);
}
.lp-m-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: 12px;
    border-radius: 12px; background: var(--teal-weich); color: var(--teal);
}
.lp-m-icon svg { width: 21px; height: 21px; }
.lp-merkmal h3 { font-size: 1.02rem; }
.lp-merkmal p { margin: 0; font-size: .93rem; color: var(--tinte-weich); overflow-wrap: break-word; }

/* ------------------------------------------------------------------- Tag */

.lp-tag { margin: 34px 0 0; padding: 0; list-style: none; }
.lp-tag li {
    position: relative;
    display: grid; grid-template-columns: 58px 1fr; gap: 14px;
    padding: 0 0 22px 0;
}
/* Die Linie verbindet die Stationen des Tages — sie endet beim letzten
   Eintrag, sonst haengt sie ins Leere. */
.lp-tag li::before {
    content: ""; position: absolute;
    left: 25px; top: 22px; bottom: 0;
    width: 2px; background: var(--rahmen);
}
.lp-tag li:last-child { padding-bottom: 0; }
.lp-tag li:last-child::before { display: none; }
.lp-tag-zeit {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    height: 24px;
    border-radius: 20px; background: var(--teal-weich);
    font-size: .74rem; font-weight: 800; color: var(--teal);
}
.lp-tag strong { display: block; margin-bottom: 2px; }
.lp-tag div { font-size: .95rem; color: var(--tinte-weich); }

/* ---------------------------------------------------------------- Grenzen */

.lp-nicht { margin: 30px 0 0; padding: 0; list-style: none; }
.lp-nicht li {
    margin-bottom: 12px; padding: 18px 20px;
    border-radius: var(--radius); background: var(--karte);
    border: 1px solid var(--rahmen);
    font-size: .95rem; color: var(--tinte-weich);
}
.lp-nicht strong { display: block; color: var(--tinte); }

.lp-arbeit {
    margin-top: 24px; padding: 18px 20px;
    border: 1px solid #f2dfb4; border-radius: var(--radius);
    background: var(--warn-weich);
}
.lp-a-marke {
    display: inline-block; margin-bottom: 8px; padding: 2px 9px;
    border-radius: 20px; background: var(--warn); color: #fff;
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.lp-arbeit p { margin: 0; font-size: .94rem; color: #6d4d08; }

/* Das Etsy-Logo steht UNVERAENDERT da — nicht umgefaerbt, nicht verzerrt.
   Feste Hoehe, Breite automatisch, damit das Seitenverhaeltnis stimmt. */
.lp-etsy-logo {
    display: block; height: 30px; width: auto; margin-bottom: 16px;
}

/* Der ruhige Hinweiskasten fuer die rechtliche Einordnung. Bewusst NICHT
   warngelb wie .lp-arbeit: Das hier ist kein Mangel, sondern eine Grenze,
   die man einmal liest und dann kennt. */
.lp-hinweis {
    margin-top: 24px; padding: 16px 18px;
    border-left: 3px solid var(--teal);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--grund);
}
/* NUR die Ueberschrift ist ein Block. Ohne den `>` erwischte die Regel auch
   das <strong> im Fliesstext — „keine Steuerberatung" stand dann als eigene
   Zeile da und sah aus wie eine zweite Ueberschrift. */
.lp-hinweis > strong { display: block; margin-bottom: 5px; font-size: .92rem; }
.lp-hinweis p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--tinte-weich); }
.lp-hinweis p strong { color: var(--tinte); }

/* -------------------------------------------------------------------- CTA */

.lp-cta { padding: 60px 0; background: var(--teal-weich); }
.lp-cta .lp-knopf { margin-top: 8px; }
.lp-klein { font-size: .86rem; color: var(--tinte-zart); margin-bottom: 0; }
.lp-cta .lp-klein { color: var(--tinte-weich); margin-top: 14px; }
/* „Hier anmelden" ist der Ausweg fuer alle mit Konto — ein echtes Ziel. */
.lp-cta .lp-klein a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 6px; font-weight: 700;
}

/* ------------------------------------------------------------------- Fuss */

.lp-fuss {
    padding: 34px 0 calc(34px + env(safe-area-inset-bottom));
    background: var(--navy); color: rgba(255,255,255,.6);
}
.lp-fuss-inner { text-align: center; }
.lp-logo-klein { display: inline-flex; margin-bottom: 12px; }
.lp-logo-klein .logo-bild { width: 112px; }
.lp-fuss nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-bottom: 8px; }
.lp-fuss nav a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 8px;
    color: rgba(255,255,255,.78); font-size: .9rem; text-decoration: none;
}
.lp-fuss .lp-klein { color: rgba(255,255,255,.45); }
/* Marken- und Haftungshinweis: muss lesbar sein, darf aber nicht die
   Aufmerksamkeit der Fusszeile an sich ziehen. */
.lp-marken {
    max-width: 46rem; margin: 14px auto 0;
    font-size: .74rem; line-height: 1.6; color: rgba(255,255,255,.42);
}

/* ========================================================== Ab dem Tablet */

@media (min-width: 700px) {
    body { font-size: 18px; }

    .lp-hero { padding: 66px 0 76px; }
    .lp-hero h1 { font-size: 2.8rem; }
    h2 { font-size: 2.05rem; }
    h3 { font-size: 1.5rem; }

    .lp-abschnitt { padding: 78px 0; }
    .lp-zug { padding: 62px 0; }

    .lp-taten { flex-direction: row; align-items: center; }
    .lp-taten .lp-knopf { width: auto; }

    .lp-zweispalt { grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
    /* Jeder zweite Block dreht sich um — sonst laeuft die Seite optisch
       einseitig nach unten. Auf dem Handy bleibt die Lesereihenfolge. */
    .lp-gedreht .lp-zug-text { order: 2; }

    .lp-raster { grid-template-columns: repeat(2, 1fr); gap: 18px; }

    /* Ab hier ist Platz fuer die echte dritte Spalte. */
    .lp-t-kopf, .lp-t-zeile { grid-template-columns: 1.1fr 130px 1.5fr; gap: 16px; }
    .lp-t-neu { grid-column: auto; font-size: .9rem; align-items: center; }
    /* Ab hier hat „Makerio" eine eigene Spalte — Einzug und Abstand weg. */
    .lp-t-kopf .lp-t-neu { margin-top: 0; padding-left: 0; }

    .lp-fuss-inner {
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px; text-align: left;
    }
    .lp-logo-klein { margin-bottom: 0; }
    .lp-fuss nav { margin-bottom: 0; }
}

/* ========================================================== Ab dem Rechner */

@media (min-width: 1000px) {
    .lp-hero-inner {
        display: grid; grid-template-columns: 1.05fr .95fr;
        gap: 56px; align-items: center;
    }
    .lp-hero h1 { font-size: 3.2rem; }
    .lp-hero-schau { margin-top: 0; }
    .lp-raster { grid-template-columns: repeat(4, 1fr); }
    .lp-tag li { grid-template-columns: 70px 1fr; }
}

/* =========================================================== Sehr schmal */

@media (max-width: 360px) {
    body { font-size: 16px; }
    .lp-hero h1 { font-size: 1.78rem; }
    h2 { font-size: 1.38rem; }
    h3 { font-size: 1.15rem; }
    .lp-breite { padding-left: 16px; padding-right: 16px; }
    .lp-anmelden { padding: 0 8px; font-size: .9rem; }
    .lp-knopf-klein { padding: 0 12px; }
    .lp-logo .logo-bild { width: 106px; }

    /*
     * Gemessen auf dem iPhone SE (320x548 nutzbar): der Hauptknopf endete bei
     * 570px — 22px UNTER der Falz. Wer scrollen muss, um den einzigen Knopf zu
     * finden, scrollt oft gar nicht. Derselbe Massstab wie beim Anmelde-Knopf (§0).
     */
    .lp-hero { padding-top: 24px; }
    .lp-eyebrow { margin-bottom: 8px; }
    .lp-hero h1 { margin-bottom: 12px; }
    .lp-hero .lp-lead { font-size: .97rem; margin-bottom: 0; }
    .lp-taten { margin-top: 18px; margin-bottom: 14px; }
    .lp-vertrauen { gap: 6px 12px; }
    .lp-vertrauen li { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lp-handy-rand { box-shadow: 0 12px 28px rgba(0,0,0,.35); }
    .lp-fenster    { box-shadow: 0 10px 24px rgba(17,32,49,.18); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Abschnitt 07 (Push) und 08 (alle Kanäle) — Nachbauten, keine Screenshots.
   Warum nachgebaut und nicht fotografiert, steht in §0o: scharf auf jedem
   Display, kein Ladegewicht, und ein Nachbau veraltet nicht still.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Der Sperrbildschirm mit zwei Meldungen --- */
.mk-push { display: grid; gap: 10px; padding: 6px 0; }

.mk-push-karte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1px 8px;
    padding: 10px 12px;
    border-radius: 14px;
    /* Wie eine iOS-Mitteilung: milchig über dem Hintergrund, nicht als Karte
       mit hartem Rand. */
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--rahmen);
    box-shadow: 0 2px 10px rgba(17, 32, 49, .07);
}

.mk-push-alt { opacity: .72; }

.mk-push-app {
    grid-column: 1;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--teal);
}

.mk-push-karte strong {
    grid-column: 1 / -1;
    font-size: .82rem;
    /* Deutsche Komposita in einer 240px breiten Karte — ohne das läuft
       „Benachrichtigung" über den Rand (§0d). */
    overflow-wrap: break-word;
}

.mk-push-text {
    grid-column: 1 / -1;
    font-size: .74rem;
    color: var(--tinte-weich);
    overflow-wrap: break-word;
}

.mk-push-zeit {
    grid-column: 2;
    grid-row: 1;
    font-size: .62rem;
    color: var(--tinte-zart);
    white-space: nowrap;
}

/* --- Vier Kanäle, eine Liste --- */
.mk-quellen { display: grid; gap: 1px; }

.mk-q-zeile {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px 2px;
    font-size: .78rem;
    border-bottom: 1px solid var(--rahmen);
}

.mk-q-zeile span:nth-child(2) { min-width: 0; overflow-wrap: break-word; }
.mk-q-zeile em { font-style: normal; font-weight: 700; white-space: nowrap; }

.mk-q-marke {
    padding: 2px 0;
    border-radius: 5px;
    background: var(--teal-weich);
    color: var(--teal);
    font-size: .6rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/*
 * Vier verschiedene Töne — aber KEINE Markenfarben und keine Logos.
 * Etsys Orange oder Metas Blau nachzubauen wäre eine Markenverletzung
 * (§0t: das Etsy-Logo darf nicht umgefärbt oder nachgebaut werden).
 * Diese Töne sind unsere eigenen und stehen nur für „andere Quelle".
 */
.mk-q-woo   { background: #ede4f6; color: #5b3a86; }
.mk-q-insta { background: #fbe4ee; color: #a33265; }
.mk-q-markt { background: #e9edf1; color: #46586a; }

.mk-q-fuss {
    padding-top: 10px;
    font-size: .72rem;
    color: var(--tinte-zart);
}

/* --- „Wer das baut" — drei Punkte auf dem dunklen Panel ------------------ */
.lp-warum {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 30px;
    text-align: left;
}

.lp-warum strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1rem;
    /* Auf dem dunklen Panel gehört der Marken-Teal hin, nicht der dunklere
       für weisse Flächen — 4,85:1 gegen Navy (§0). */
    color: var(--teal-hell);
}

.lp-warum p { margin: 0; font-size: .92rem; line-height: 1.55; }

@media (min-width: 800px) {
    .lp-warum { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Neuaufbau nach dem Entwurf (§0bw): Hero-Dashboard, drei Säulen, Beta
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Die Kanäle im Hero: Namen, keine Logos (§0t) ----------------------- */
.lp-kanalzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--rahmen);
}

.lp-kz-label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinte-zart);
}

.lp-kanalzeile ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-kanalzeile li {
    font-size: .94rem;
    font-weight: 700;
    color: var(--tinte-weich);
}

/* --- Das Dashboard im Hero --------------------------------------------- */
.mk-dash { display: grid; gap: 10px; }

.mk-dash-zahlen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.mk-dash-zahlen > div {
    padding: 9px 11px;
    border: 1px solid var(--rahmen);
    border-radius: 10px;
    background: var(--karte);
}

.mk-dash-zahlen span {
    display: block;
    font-size: .62rem;
    color: var(--tinte-zart);
    /* Vier Kennzahlen auf 300px: „Neue Bestellungen" muss umbrechen dürfen. */
    overflow-wrap: break-word;
}

.mk-dash-zahlen strong {
    display: block;
    margin-top: 2px;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

.mk-dash-zwei { display: grid; gap: 10px; }

.mk-dash-titel {
    display: block;
    margin-bottom: 6px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinte-zart);
}

.mk-dash-liste, .mk-dash-hinweise {
    padding: 10px 11px;
    border: 1px solid var(--rahmen);
    border-radius: 10px;
    background: var(--karte);
}

.mk-dash-liste ul { list-style: none; margin: 0; padding: 0; }

.mk-dash-liste li {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    padding: 5px 0;
    font-size: .7rem;
    border-bottom: 1px solid var(--rahmen);
}
.mk-dash-liste li:last-child { border-bottom: 0; }

.mk-dash-liste em {
    font-style: normal;
    font-weight: 700;
    color: var(--tinte-zart);
}
.mk-dash-liste li > span { min-width: 0; overflow-wrap: break-word; }

.mk-dash-liste b {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--grund);
    color: var(--tinte-zart);
    font-size: .6rem;
    font-weight: 700;
    white-space: nowrap;
}
.mk-dash-liste .ist-neu    { background: var(--teal-weich); color: var(--teal); }
.mk-dash-liste .ist-fertig { background: var(--erfolg-weich); color: var(--erfolg); }

.mk-dash-hinweise p {
    display: flex;
    gap: 6px;
    margin: 0 0 5px;
    font-size: .7rem;
    line-height: 1.4;
    color: var(--tinte-weich);
}
.mk-dash-hinweise p:last-child { margin-bottom: 0; }
.mk-dash-hinweise svg { flex: 0 0 13px; width: 13px; height: 13px; color: var(--warn); }

/* --- Drei Säulen -------------------------------------------------------- */
.lp-saeulen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 34px;
}

.lp-saeulen article {
    padding: 24px 22px;
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    background: var(--karte);
}

/*
 * Die mittlere Säule ist der Unterschied — Verkaufen und Abrechnen kann jede
 * Händlersoftware. Deshalb bekommt sie den Rahmen, nicht alle drei.
 */
.lp-saeulen .ist-kern { border-color: var(--teal); box-shadow: 0 6px 26px rgba(0, 125, 126, .08); }

.lp-s-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--teal-weich);
    color: var(--teal);
}
.lp-s-icon svg { width: 22px; height: 22px; }

.lp-saeulen h3 { margin: 0 0 8px; font-size: 1.12rem; }
.lp-saeulen p  { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--tinte-weich); }

.lp-merksatz {
    margin: 34px auto 0;
    max-width: 34rem;
    text-align: center;
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--tinte-weich);
}
.lp-merksatz strong { color: var(--tinte); }

/* --- Beta statt Preistabelle -------------------------------------------- */
.lp-beta {
    display: grid;
    gap: 10px;
    max-width: 22rem;
    margin: 26px auto 30px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.lp-beta li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .98rem;
}
.lp-beta svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; color: var(--teal-hell); }

@media (min-width: 700px) {
    .mk-dash-zahlen { grid-template-columns: repeat(4, 1fr); }
    .mk-dash-zwei   { grid-template-columns: 1.5fr 1fr; }
}

@media (min-width: 900px) {
    .lp-saeulen { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}


/* ==========================================================================
   Prozess · Werkstatt · Kanaele · Buchhaltung · Ehrlichkeit
   Nachtrag zum Entwurf des Nutzers (09.08.2026).
   ========================================================================== */

/* --- Prozess: vier nummerierte Schritte ----------------------------------
   Die Nummern sind KEINE Deko: der Auftrag laeuft sie tatsaechlich in dieser
   Reihenfolge ab. Wo keine Folge dahintersteckt, gehoeren keine Ziffern hin. */
.lp-schritte {
    list-style: none;
    display: grid;
    gap: 20px;
    margin: 22px 0 0;
    padding: 0;
    counter-reset: none;
}
.lp-schritte li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.lp-sn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--teal-weich);
    color: var(--teal-dunkel);
    font-weight: 700;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}
.lp-schritte li > span:last-child { min-width: 0; }
.lp-schritte strong {
    display: block;
    color: var(--tinte);
    margin-bottom: 2px;
}
.lp-schritte li > span:last-child { color: var(--tinte-weich); line-height: 1.55; }
.lp-dunkel .lp-sn { background: rgba(255,255,255,.12); color: #fff; }
.lp-dunkel .lp-schritte strong { color: #fff; }

/* --- Nachbau: die Auftragskarte ------------------------------------------ */
.mk-auftrag { padding: 16px; }
.mk-a-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.mk-a-kopf strong { font-size: 1rem; color: var(--tinte); min-width: 0; }
.mk-a-daten {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 12px;
    background: var(--grund);
    border-radius: 10px;
}
.mk-a-daten > div {
    /* Mobil zuerst: untereinander. Zwei Spalten brauchen 106px allein fuer
       die Beschriftung ("Personalisierung" misst bei .82rem 101px) — auf
       290px bleiben fuer den Wert dann 56px, und der lief ueber. */
    display: grid;
    gap: 1px;
    font-size: .82rem;
}
@media (min-width: 380px) {
    .mk-a-daten > div {
        grid-template-columns: 106px minmax(0, 1fr);
        gap: 10px;
    }
}
.mk-a-daten dt {
    color: var(--tinte-weich);
    min-width: 0;
    overflow-wrap: anywhere;   /* Notbremse fuer laengere Beschriftungen */
}
.mk-a-daten dd { margin: 0; color: var(--tinte); min-width: 0; }
.mk-a-daten dd strong { color: var(--teal-dunkel); }

.mk-a-weg {
    list-style: none;
    display: grid;
    gap: 7px;
    margin: 8px 0 0;
    padding: 0;
}
.mk-a-weg li {
    position: relative;
    padding: 7px 10px 7px 30px;
    border-radius: 8px;
    font-size: .82rem;
    color: var(--tinte-zart);
    background: var(--grund);
}
/* Der Punkt links traegt den Zustand mit — Farbe allein waere fuer
   Farbblinde keine Auskunft (§0ay), deshalb Haken statt nur gruen. */
.mk-a-weg li::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--rahmen);
}
.mk-a-weg .ist-fertig { color: var(--tinte-weich); }
.mk-a-weg .ist-fertig::before {
    border-color: var(--erfolg);
    background: var(--erfolg);
}
.mk-a-weg .ist-jetzt {
    color: var(--teal-dunkel);
    font-weight: 600;
    background: var(--teal-weich);
}
.mk-a-weg .ist-jetzt::before { border-color: var(--teal); background: var(--teal); }

/* --- Werkstatt: vier Schritte mit Symbol ---------------------------------- */
.lp-wschritte {
    list-style: none;
    display: grid;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
}
.lp-wschritte li {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    font-weight: 600;
}
.lp-wschritte svg { width: 20px; height: 20px; flex: none; color: var(--teal-hell); }

/* --- Kanaele: Namen, keine fremden Logos (§0t) ---------------------------- */
.lp-kanaele {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}
.lp-kanaele article {
    min-width: 0;
    padding: 16px;
    background: var(--karte);
    border: 1px solid var(--rahmen);
    border-radius: 12px;
}
.lp-kanaele strong { display: block; color: var(--tinte); margin-bottom: 3px; }
.lp-kanaele span { display: block; color: var(--tinte-weich); font-size: .88rem; }
/* Was angekuendigt ist, sieht anders aus als was laeuft. Ein Kachelfeld, in
   dem beides gleich aussieht, ist eine Behauptung. */
.lp-kanaele .ist-bald { background: transparent; border-style: dashed; }
.lp-kanaele em {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--warn-weich);
    color: var(--warn);
    font-size: .68rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 2px;
}

/* --- Buchhaltung: zweispaltige Hakenliste --------------------------------- */
.lp-haken2 {
    list-style: none;
    display: grid;
    gap: 10px 18px;
    margin: 20px 0 0;
    padding: 0;
}
.lp-haken2 li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: .93rem;
}
.lp-haken2 svg { width: 17px; height: 17px; flex: none; color: var(--erfolg); }

.mk-fin { padding: 16px; }
.mk-fin-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mk-fin-kopf strong { color: var(--tinte); min-width: 0; }
.mk-fin-nr {
    margin: 2px 0 14px;
    color: var(--tinte-weich);
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
}
.mk-fin-liste {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.mk-fin-liste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    background: var(--grund);
    border-radius: 9px;
    font-size: .82rem;
    color: var(--tinte-weich);
}
.mk-fin-liste li > span { min-width: 0; }
.mk-fin-liste svg { width: 15px; height: 15px; flex: none; color: var(--erfolg); }

/* --- Ehrlichkeit ---------------------------------------------------------- */
.lp-ehrlich {
    display: grid;
    gap: 14px;
    margin-top: 26px;
}
.lp-ehrlich article {
    min-width: 0;
    padding: 18px;
    background: var(--karte);
    border: 1px solid var(--rahmen);
    border-radius: 12px;
}
.lp-ehrlich h3 { font-size: 1rem; margin: 0 0 6px; }
.lp-ehrlich p { color: var(--tinte-weich); font-size: .92rem; margin: 0; }

/* --- Abbinder unter dem CTA ----------------------------------------------- */
.lp-abbinder {
    margin: 28px 0 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--tinte-weich);
    text-wrap: balance;
}
.lp-abbinder strong { color: var(--tinte); }

@media (min-width: 620px) {
    .lp-kanaele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-ehrlich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-haken2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-wschritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-abbinder { font-size: 1.15rem; }
}

@media (min-width: 960px) {
    .lp-kanaele { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-ehrlich { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   Ein Nachbau ist INNEN immer hell — egal, in welchem Abschnitt er steht.

   Gefunden im gerenderten Bild (09.08.2026): Der Scan-Nachbau steht im
   dunklen Werkstatt-Abschnitt und erbte dessen `color: #fff`. Auf dem
   weissen Handyschirm waren "Jersey mint", die grosse Bestandszahl und
   "− Entnahme" damit WEISS AUF WEISS — unsichtbar.

   Dieselbe Falle wie beim Markenschriftzug auf dem dunklen Auth-Panel (§0),
   nur umgekehrt. Die Zahlenmessung sah nichts davon: kein Ueberlauf, kein
   zu kleines Tippziel, nur eine Farbe, die es nicht gibt.

   Deshalb hier ZENTRAL zurueckgesetzt statt an jeder einzelnen Klasse —
   der naechste Nachbau in einem dunklen Abschnitt laeuft sonst wieder hinein.
   -------------------------------------------------------------------------- */
.lp-dunkel .lp-handy-schirm,
.lp-dunkel .lp-fenster { color: var(--tinte); }
.lp-dunkel .lp-handy-schirm p,
.lp-dunkel .lp-fenster p { color: var(--tinte-weich); }
.lp-dunkel .lp-handy-schirm h3,
.lp-dunkel .lp-fenster h3 { color: var(--tinte); }


/* Der Steuerberatungs-Hinweis (StBerG, §0t) braucht Luft zur Hakenliste —
   direkt darunter liest er sich wie ein sechster Listenpunkt. */
.lp-haken2 + .lp-klein { margin-top: 18px; }

/* "Teste Makerio kostenlos und entwickle es mit" liess "mit" allein auf der
   zweiten Zeile stehen. balance verteilt die Zeilen gleichmaessig. */
.lp-cta h2 { text-wrap: balance; }