@import url('../vendor/schriften/plus-jakarta-sans.css?v=1');
/* ==========================================================
   LANDING.CSS - Öffentliche Startseite (welcome.php)
   ==========================================================

   DIE SCHRIFT (26.08.2026)

   Der Wirt zeigte auf sevdesk.de: *„посмотри, что за шрифт они употребляют, очень красивый"*.
   Gemessen: es ist **Roobert** von Displaay. Die ist GEKAUFT — ihre Dateien liegen auf dem
   CDN von sevdesk und dürfen dort nicht weggeholt werden. Wer sie will, kauft eine Lizenz.

   Bis dahin steht hier **Plus Jakarta Sans**: dieselbe Bauart (geometrisch, hohe x-Höhe,
   runde Punzen, kräftige Fettschnitte), frei auch für den Verkauf, und von Google
   ausgeliefert statt von einem fremden CDN.

   Vorher stand hier `'Inter', 'Segoe UI', …` — und Inter wurde NIE geladen. Auf Windows
   sah man also Segoe UI, auf dem Mac etwas anderes; „unsere Schrift" gab es gar nicht.
   ========================================================== */
:root {
    --lp-blue: #3b82f6;
    --lp-blue-dark: #2563eb;
    --lp-navy: #0f172a;
    --lp-navy-2: #1e293b;
    --lp-green: #10b981;
    --lp-purple: #8b5cf6;
    --lp-amber: #f59e0b;
    --lp-pink: #ec4899;
    --lp-teal: #14b8a6;
    --lp-red: #ef4444;
    --lp-text: #0f172a;
    --lp-muted: #64748b;
    --lp-border: #e2e8f0;
    --lp-bg: #f8fafc;

    /*
     * ═══ DER ANSTRICH VON resmio, seit 11.09.2026 fuer ALLE DREI ═══
     *
     * Zuerst bekam ihn nur `e-tisch.eu`, ueber eine eigene Datei — der Wirt hatte um EINE
     * Seite gebeten, und diese Datei hier ist auf allen drei Verkaufsseiten byteweise
     * dieselbe. Danach die Ansage: alle drei gleich. Also gehoert er hierher, an EINE Stelle.
     *
     * Am Original abgelesen, nicht geschaetzt:
     *
     *     Navy der Kopfleiste/Schrift   rgb(51,59,79)    #333b4f
     *     Akzent der Knoepfe            rgb(230,44,79)   #e62c4f
     *     H1                            41,6px / 700
     *     Knopf                         Radius 6px, 600, Sperrung 0,06em, VERSALIEN
     *
     * `--lp-akzent` ist die Farbe, die eine Domain ueberschreiben DARF (siehe inhalt.php).
     * Steht dort nichts, gilt diese — so bekommt auch `welcome.php` von e-kasse.eu den
     * Anstrich, ohne dass jemand dort etwas eintragen muss.
     */
    --lp-akzent: #e62c4f;
    --lp-akzent-hell: #fff1f3;
    --lp-akzent-dunkel: #c81f40;
    --lp-kopf: #333b4f;
    --lp-kopf-tief: #272e3f;
    --lp-grau: #5b6478;
    --lp-flaeche: #f7f8fa;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--lp-text);
    background: #ffffff;
    line-height: 1.5;
}
a { text-decoration: none; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0; }

.lp-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ----------
   DIE KOPFLEISTE IST FEST WEISS (26.08.2026)

   Der Wirt fotografierte sie blau, mit zwei nackten Zeichen statt der Beschriftungen —
   *„топбар сделай точно таким, иконки, размеры"*.

   Hier stand vorher `background: rgba(255,255,255,0.9)` **mit `backdrop-filter: blur(8px)`**
   auf einem `position: sticky`-Element. Das ist genau die Kombination, bei der Chrome den
   Untergrund falsch abtastet: die Leiste malt dann irgendetwas anderes von der Seite nach —
   und unter ihr liegen ein blauer Knopf und blaue Kacheln. Neun Zehntel Weiss darüber
   reichen nicht, um das zu verdecken.

   Ein Verlauf, der bei einem von zehn Aufrufen falsch aussieht, ist keinen Effekt wert:
   jetzt volles Weiss, ohne Filter. Damit KANN die Leiste nicht mehr blau werden.

   Die Masse stehen an einer Stelle, damit Schreibtisch, Buchhalter, Profil und Bezahlen
   dieselbe Leiste tragen: 68 px hoch, Knöpfe 40 px, Zeichen 17 px. */
.lp-header {
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--lp-border);
}
.lp-header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.lp-logo { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; color: var(--lp-navy); }
.lp-logo i { color: var(--lp-blue); font-size: 20px; }

/* Alles rechts oben ist gleich hoch — sonst tanzen Chip und Knopf um ein paar Pixel. */
.lp-header-actions .lp-btn,
.lp-header-actions .st-konto,
.lp-header-actions .bh-konto { height: 40px; }
.lp-header-actions .lp-btn i { font-size: 17px; }
.lp-nav { display: flex; gap: 28px; }
.lp-nav a { color: var(--lp-muted); font-size: 14px; font-weight: 600; transition: color 0.15s; }
.lp-nav a:hover { color: var(--lp-blue); }
.lp-header-actions { display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
   DIE BLAUE LEISTE DER ARBEITSSEITEN (26.08.2026)

   Der Wirt hat sie zweimal fotografiert und zweimal gesagt, sie solle SO aussehen —
   *„топбар сделай точно таким, иконки, размеры"*, dann *„как на фото"*. Ich habe das Foto
   beim ersten Mal als Fehlermeldung gelesen und die Leiste weiss gemacht. Es war ein
   Entwurf, keine Beschwerde.

   Blau tragen nur die Seiten, auf denen GEARBEITET wird (Schreibtisch, Buchhalter,
   Profil, Unterlagen, Ablage, Bezahlen). `welcome.php` bleibt weiss: das ist das
   Schaufenster, und an dessen Aussehen soll nichts geändert werden.

   Rechts stehen nur Zeichen, kein Wort — genau wie auf dem Bild. Damit trotzdem klar
   bleibt, was ein Zeichen tut, trägt jeder Knopf ein `title`.
   ========================================================================== */
.lp-header-app {
    background: var(--lp-blue);
    border-bottom: 0;
}
.lp-header-app .lp-logo { color: #fff; font-size: 21px; }
.lp-header-app .lp-logo i { color: #fff; font-size: 24px; }

/* `:has(i)` — nur Knöpfe MIT Zeichen verlieren ihr Wort. „Andere Pakete" auf der
   Bezahlseite hat keines und wäre sonst ein leerer Fleck. Kennt ein Browser `:has()`
   nicht, bleibt dort das Wort stehen: unschön, aber nie unsichtbar. */
.lp-header-app .lp-header-actions .lp-btn:has(i),
.lp-header-app .lp-header-actions .st-konto,
.lp-header-app .lp-header-actions .bh-konto {
    font-size: 0; gap: 0; padding: 0;
    width: 44px; height: 44px; justify-content: center;
    background: transparent; border: 0; border-radius: 12px;
    transition: background .12s;
}
.lp-header-app .lp-header-actions .lp-btn i,
.lp-header-app .lp-header-actions .st-konto i,
.lp-header-app .lp-header-actions .bh-konto i { color: #fff; font-size: 24px; }
.lp-header-app .lp-header-actions .st-konto span,
.lp-header-app .lp-header-actions .bh-konto span { display: none; }
.lp-header-app .lp-header-actions > a:hover { background: rgba(255, 255, 255, .18); }
/* Der Knopf ohne Zeichen bleibt ein Knopf — nur in Weiss. */
.lp-header-app .lp-header-actions .lp-btn { color: #fff; }
.lp-header-app .lp-header-actions .lp-btn-ghost:hover { background: rgba(255, 255, 255, .18); }
/* Der Punkt „Profil noch leer" muss auf Blau sichtbar bleiben. */
.lp-header-app .bh-konto-leer { background: transparent; border-color: transparent; }
.lp-header-app .bh-konto-punkt { color: #fde68a; }

/*
 * SCHMALER SCHIRM: Zeichen STATT Wörtern — aber mit Absicht.
 *
 * Vorher verschwand der Konto-Chip unter 760 px ganz (`display: none`), und der Knopf
 * daneben behielt sein Wort. Jetzt werden beide zu quadratischen Zeichen-Knöpfen von 40 px:
 * gleich gross, gleich weit auseinander, und der Weg zum eigenen Konto bleibt erreichbar.
 *
 * `font-size: 0` am Knopf schluckt den blossen Text daneben — er steht in fünf Dateien als
 * nacktes Wort ohne eigenes Element, und fünf Dateien zu ändern, um ein Wort auszublenden,
 * wäre fünfmal die Gelegenheit, eine davon zu vergessen.
 */
/*
 * ═══ NUR EINKLAPPEN, WAS EIN ZEICHEN HAT (11.09.2026) ═══
 *
 * Hier stand `.lp-header-actions .lp-btn` ohne Bedingung: JEDER Knopf der Kopfleiste wurde auf
 * 40 Punkte gestaucht und sein Text mit `font-size: 0` geschluckt. Gemeint waren die Knöpfe
 * der ARBEITSSEITEN — die tragen ein Zeichen und kommen ohne Wort aus.
 *
 * Auf der Verkaufsseite tragen „Einloggen" und „Jetzt starten" KEIN Zeichen. Sie wurden also
 * auf 40 Punkte gestaucht und waren leer. Weiter unten holte eine zweite Regel (760px-Block
 * für den Container) die Schrift mit `font-size: 12.5px` zurück — aber nicht die Breite.
 * Ergebnis auf dem Telefon: zwei Wörter, jedes in einer 40-Punkte-Schachtel, übereinander
 * geschoben. Genau so stand es auf dem Bildschirmfoto des Wirts.
 *
 * Zwei Regeln, die um dieselben Knöpfe streiten, und die spätere hebt die frühere nur halb
 * auf — das ist kein Sonderfall, sondern die Bauart des Fehlers.
 *
 * `:has(i)` entscheidet jetzt: wer ein Zeichen hat, klappt ein; wer nur ein Wort hat, behält es.
 */
@media (max-width: 760px) {
    .lp-header-actions .lp-btn:has(i) {
        font-size: 0; gap: 0; padding: 0;
        width: 40px; justify-content: center;
    }
    .lp-header-actions .lp-btn i { font-size: 17px; }
    .lp-header-actions .st-konto,
    .lp-header-actions .bh-konto {
        padding: 0; width: 40px; justify-content: center; gap: 0;
    }
    .lp-header-actions .st-konto span,
    .lp-header-actions .bh-konto span { display: none; }
}

/* ---------- Buttons ---------- */
.lp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 9px; font-size: 14px; font-weight: 700;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.lp-btn-lg { padding: 14px 26px; font-size: 15.5px; border-radius: 11px; }
.lp-btn-primary { background: var(--lp-blue); color: #fff; box-shadow: 0 8px 16px -6px rgba(59,130,246,0.5); }
.lp-btn-primary:hover { background: var(--lp-blue-dark); transform: translateY(-1px); }
.lp-btn-ghost { background: transparent; color: var(--lp-navy); }
.lp-btn-ghost:hover { background: var(--lp-bg); }
.lp-btn-outline { background: #fff; color: var(--lp-navy); border: 1px solid var(--lp-border); }
.lp-btn-outline:hover { border-color: var(--lp-blue); color: var(--lp-blue); }

/* ---------- Hero ---------- */
.lp-hero { background: linear-gradient(180deg, #eff6ff 0%, #ffffff 65%); padding: 72px 0 60px; }
.lp-hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; }
.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: #eff6ff; color: var(--lp-blue-dark); border: 1px solid #bfdbfe;
    padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    margin-bottom: 18px;
}
.lp-hero-text h1 { font-size: 42px; font-weight: 800; color: var(--lp-navy); letter-spacing: -0.5px; }
.lp-accent { color: var(--lp-blue); }
.lp-hero-text p { margin-top: 18px; font-size: 16.5px; color: var(--lp-muted); max-width: 480px; }
.lp-hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.lp-hero-trust { display: flex; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.lp-hero-trust span { font-size: 13px; color: var(--lp-muted); font-weight: 600; }
.lp-hero-trust i { color: var(--lp-green); margin-right: 4px; }

/* ---------- Hero "screenshot" mock ---------- */
.lp-hero-mock { display: flex; justify-content: center; }
.lp-mock-window {
    width: 100%; max-width: 440px; background: #fff; border-radius: 16px;
    border: 1px solid var(--lp-border); box-shadow: 0 30px 60px -20px rgba(15,23,42,0.25);
    overflow: hidden; transform: rotate(1deg);
}
.lp-mock-titlebar { background: var(--lp-navy); padding: 10px 14px; display: flex; gap: 6px; }
.lp-mock-titlebar .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.red { background: #ef4444; } .dot.yellow { background: #f59e0b; } .dot.green { background: #10b981; }
.lp-mock-body { padding: 20px; }
.lp-mock-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 20px; }
.lp-mock-title { font-size: 14px; font-weight: 800; color: var(--lp-navy); }
.lp-mock-sub { font-size: 11.5px; color: var(--lp-muted); }
.lp-mock-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px;
    padding: 9px 0; font-size: 12.5px; color: var(--lp-navy); border-bottom: 1px dashed var(--lp-border);
}
.lp-mock-row-head { color: var(--lp-muted); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.4px; }
.lp-mock-row .green { color: var(--lp-green); font-weight: 700; }
.lp-mock-row .red { color: var(--lp-red); font-weight: 700; }
.lp-mock-restday { background: #f0fdf4; color: #059669; font-weight: 600; border-radius: 6px; }
.lp-mock-span3 { grid-column: span 3; }
.lp-mock-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 12px 14px; background: var(--lp-navy); border-radius: 10px; color: #fff; font-size: 13px; }
.lp-mock-footer strong { color: #34d399; font-size: 15px; }

/* ---------- Industries strip ---------- */
.lp-logos { padding: 34px 0; border-top: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); background: var(--lp-bg); }
.lp-logos p { text-align: center; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--lp-muted); margin-bottom: 18px; }
.lp-logos-row { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.lp-logos-row span { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--lp-navy); font-size: 14.5px; }
.lp-logos-row i { color: var(--lp-blue); }

/* ---------- Section head ---------- */
.lp-section-head { text-align: center; max-width: 620px; margin: 0 auto 46px auto; }
.lp-section-head h2 { font-size: 30px; font-weight: 800; color: var(--lp-navy); margin-top: 14px; }
.lp-section-head p { margin-top: 12px; color: var(--lp-muted); font-size: 15px; }

/* ---------- Features ---------- */
.lp-features { padding: 90px 0; }
.lp-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-feature-card {
    background: #fff; border: 1px solid var(--lp-border); border-radius: 16px; padding: 28px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.lp-feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgba(15,23,42,0.12); }
.lp-feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
.lp-feature-icon.blue { background: #eff6ff; color: var(--lp-blue); }
.lp-feature-icon.green { background: #f0fdf4; color: var(--lp-green); }
.lp-feature-icon.purple { background: #f5f3ff; color: var(--lp-purple); }
.lp-feature-icon.amber { background: #fffbeb; color: var(--lp-amber); }
.lp-feature-icon.pink { background: #fdf2f8; color: var(--lp-pink); }
.lp-feature-icon.teal { background: #f0fdfa; color: var(--lp-teal); }
.lp-feature-card h3 { font-size: 16.5px; font-weight: 800; color: var(--lp-navy); margin-bottom: 8px; }
.lp-feature-card p { font-size: 13.5px; color: var(--lp-muted); }

/* ---------- Steps ---------- */
.lp-steps { padding: 90px 0; background: var(--lp-bg); }
.lp-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.lp-step { text-align: center; padding: 0 10px; }
.lp-step-num {
    width: 46px; height: 46px; border-radius: 50%; background: var(--lp-navy); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
    margin: 0 auto 18px auto;
}
.lp-step h3 { font-size: 17px; font-weight: 800; color: var(--lp-navy); margin-bottom: 8px; }
.lp-step p { font-size: 13.5px; color: var(--lp-muted); max-width: 280px; margin: 0 auto; }

/* ---------- Pricing / Pakete ---------- */
.lp-pricing { padding: 90px 0; }
/* Vier Pakete statt drei (25.08.2026): der Wirt hat die Leiter um eine Stufe verlaengert.
   Bei vier Spalten wird jede Karte schmal, deshalb weiter unten zwei Zwischenstufen:
   1200px -> zwei nebeneinander, 900px -> untereinander. */
.lp-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
/* --- Die Aktion auf einer Preiskarte (26.08.2026) --- */
/* Der Preis selbst traegt die Farbe der Aktion — Fahne, Betrag und Hinweis sind EINE
   Aussage und sollen auch so aussehen. */
.amount-aktion { color: #16a34a; }
.lp-badge-aktion { background: #16a34a !important; }
.lp-preis-alt { font-size: 1.05rem; font-weight: 600; color: var(--lp-muted);
    text-decoration: line-through; margin-left: 8px; }
.lp-aktion-bis { display: block; margin-top: 5px; font-size: 0.8rem; font-weight: 800;
    color: #16a34a; }

.lp-price-card {
    background: #fff; border: 1px solid var(--lp-border); border-radius: 18px; padding: 30px 22px;
    display: flex; flex-direction: column; position: relative; transition: transform 0.15s, box-shadow 0.15s;
}
.lp-price-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgba(15,23,42,0.12); }
.lp-price-card.featured { border: 2px solid var(--lp-blue); box-shadow: 0 20px 40px -16px rgba(59,130,246,0.35); }
.lp-price-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--lp-blue); color: #fff; font-size: 11.5px; font-weight: 800;
    padding: 5px 14px; border-radius: 999px; letter-spacing: 0.3px; white-space: nowrap;
}
.lp-price-name { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--lp-muted); }
.lp-price-value { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 4px; }
.lp-price-value .amount { font-size: 34px; font-weight: 800; color: var(--lp-navy); letter-spacing: -0.5px; }
.lp-price-value .period { font-size: 14px; color: var(--lp-muted); font-weight: 600; }
.lp-price-extra { font-size: 12.5px; color: var(--lp-muted); margin-bottom: 18px; min-height: 18px; }
.lp-price-desc { font-size: 13.5px; color: var(--lp-muted); margin-bottom: 20px; }
.lp-price-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.lp-price-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--lp-navy); }
.lp-price-list i { color: var(--lp-green); margin-top: 2px; flex-shrink: 0; }
.lp-price-card .lp-btn { justify-content: center; width: 100%; }

/* ---------- Zusatz-Option (25.08.2026) ----------
   Sie steht NEBEN der Leiter, nicht in ihr: auf dem Blatt des Wirts traegt sie keinen Preis,
   sondern die Bitte, sich zu melden. Ein Feld ohne Betrag in einer Reihe mit vier Betraegen
   laesst das Auge dort eine Zahl suchen, die es nicht gibt - darum ein eigenes, breites Band. */
.lp-option { margin-top: 26px; }
.lp-option-band {
    display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 70%);
    border: 1.5px solid var(--lp-blue); border-radius: 18px; padding: 26px 30px;
}
.lp-option-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lp-option-kopf i { color: var(--lp-blue); font-size: 20px; }
.lp-option-kopf h3 { font-size: 18px; font-weight: 800; color: var(--lp-navy); margin: 0; }
.lp-option-marke {
    background: var(--lp-blue); color: #fff; font-size: 11px; font-weight: 800;
    padding: 4px 11px; border-radius: 999px; letter-spacing: 0.3px; white-space: nowrap;
}
.lp-option-band p { font-size: 13.5px; color: var(--lp-muted); margin: 0 0 12px; max-width: 62ch; }
.lp-option-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.lp-option-liste li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--lp-navy); }
.lp-option-liste i { color: var(--lp-green); margin-top: 3px; flex-shrink: 0; }
.lp-option-tat { text-align: center; }
.lp-option-preis { font-size: 14px; font-weight: 700; color: var(--lp-navy); margin-bottom: 10px; white-space: nowrap; }
@media (max-width: 900px) {
    .lp-option-band { grid-template-columns: 1fr; gap: 18px; }
    .lp-option-tat { text-align: left; }
    .lp-option-tat .lp-btn { width: 100%; justify-content: center; }
}

/* ---------- CTA ----------
   Das Schlussband der Startseite steht seit dem 13.09.2026 als Karte weiter unten
   (`.lp-cta-karte`, Abschnitt „DER RAHMEN"). Hier nur noch der Abstand. */
.lp-cta { padding: 0 0 90px; }

/* ---------- Footer (der kleine, auf Anmelden/Registrieren/Bezahlen) ---------- */
.lp-footer { padding: 30px 0; background: #ffffff; }
.lp-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.lp-footer .lp-logo { font-size: 15px; }
/* `nowrap` am Link: der Bindestrich in „e-kasse" ist fuer den Browser eine Trennstelle. */
.lp-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.lp-footer-links a { color: var(--lp-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.lp-footer-links a:hover { color: var(--lp-blue); }
.lp-footer-copy { font-size: 12.5px; color: #94a3b8; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    .lp-pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
}
@media (max-width: 900px) {
    .lp-hero-inner { grid-template-columns: 1fr; }
    .lp-hero-mock { order: -1; }
    .lp-feature-grid, .lp-steps-grid { grid-template-columns: 1fr 1fr; }
    .lp-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .lp-nav { display: none; }
}
@media (max-width: 620px) {
    .lp-hero-text h1 { font-size: 32px; }
    .lp-feature-grid, .lp-steps-grid { grid-template-columns: 1fr; }
    .lp-footer-inner { flex-direction: column; text-align: center; }
    .lp-hero-cta { flex-direction: column; align-items: stretch; }
    .lp-hero-cta .lp-btn { justify-content: center; }

    /* Kopfzeile: Logo + Buttons liefen auf schmalen Screens aus dem Container heraus,
       weil die Buttons ihre volle Desktop-Größe behielten. */
    .lp-container { padding: 0 14px; }
    .lp-logo { font-size: 16px; gap: 6px; }
    .lp-header-actions { gap: 6px; }
    /* Die Wort-Knöpfe: kleiner, aber lesbar. Die mit Zeichen regelt der Block weiter oben —
       diese Zeile fasst sie ausdrücklich NICHT an, sonst wäre der Streit von vorhin zurück. */
    .lp-header-actions .lp-btn:not(:has(i)) { padding: 8px 11px; font-size: 12px; border-radius: 6px; }
}

/*
 * DAS ATTRIBUT `hidden` MUSS AUCH GELTEN (25.08.2026).
 *
 * Der Browser gibt `[hidden]` nur ein schwaches `display: none` mit. Jede eigene Regel mit
 * `display: flex` schlaegt es -- und genau das ist passiert: das Blatt „Aus meinen Ordnern",
 * die Zeile mit dem gewaehlten Anhang und die beiden Blaetter der Beleg-Ansicht standen
 * OFFEN da, von der ersten Sekunde an. Es sah aus wie ein haengender Abruf und war ein
 * Element, das sich nie schliessen liess: `hidden = true` blieb wirkungslos.
 *
 * Diese eine Zeile gilt fuer alles, was heute und kuenftig `hidden` benutzt. `!important`
 * ist hier keine Notluege, sondern die Bedeutung des Attributs: verborgen heisst verborgen.
 */
[hidden] { display: none !important; }

/* ==================================================================================================
   RECHTSSEITEN — Impressum und Datenschutz (28.08.2026)
   ==================================================================================================
   Die beiden Seiten, die es geben MUSS, damit das Schaufenster wieder aufgehen darf: die
   Verkaufsseite wurde am 26.08. geschlossen, weil kein Impressum vorhanden war.

   Sie sind bewusst nüchtern gehalten — keine Farbflächen, keine Symbole, kein Zeichensatz von
   aussen. Wer hier liest, sucht eine Anschrift oder eine Rechtsgrundlage; er soll sie in zwei
   Sekunden finden und herauskopieren können.

   Warum die Regeln hier und nicht in einem <style>-Block der beiden Seiten: siehe PROJEKT.md —
   eine Klasse, die im <style> EINER Seite wohnt, wirkt auf keiner anderen. Das ist in diesem
   Projekt schon dreimal aufgefallen.
   ================================================================================================== */
.rs-seite { padding: 40px 24px 80px; max-width: 820px; }
.rs-seite h1 { font-size: 34px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 6px; color: var(--lp-navy); }
.rs-seite h2 { font-size: 19px; font-weight: 700; margin: 38px 0 12px; color: var(--lp-navy); }

.rs-stand { color: var(--lp-muted); font-size: 14px; margin: 0 0 26px; }

.rs-karte {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    padding: 20px 22px;
    line-height: 1.7;
    color: var(--lp-text);
}
.rs-karte p { margin: 0 0 12px; }
.rs-karte p:last-child { margin-bottom: 0; }
.rs-karte a { color: var(--lp-blue-dark); }

.rs-klein { font-size: 13px; color: var(--lp-muted); }

/* Die Angaben im Impressum: links das Wort, rechts die Sache. Auf dem Telefon untereinander —
   eine zweispaltige Anschrift auf 360px ist unlesbar. */
.rs-daten { display: grid; grid-template-columns: 210px 1fr; gap: 12px 20px; margin: 0; }
.rs-daten dt { font-weight: 700; color: var(--lp-muted); font-size: 14px; }
.rs-daten dd { margin: 0; line-height: 1.6; }

@media (max-width: 640px) {
    .rs-daten { grid-template-columns: 1fr; gap: 4px; }
    .rs-daten dd { margin: 0 0 14px; }
    .rs-seite h1 { font-size: 27px; }
}


/* ==========================================================================================
   DER ANSTRICH — Kopfleiste dunkel, Kopfbereich mittig (11.09.2026)
   ==========================================================================================
   Der eigentliche Unterschied zum Vorherigen ist nicht die Farbe, sondern die ANORDNUNG:
   vorher stand der Text links und das Bild rechts daneben — zwei Wege fuer das Auge. Jetzt
   steht alles in der Mitte und das Bild darunter in voller Breite.
   ========================================================================================== */

/* ---------- Kopfleiste ---------- */
.lp-header { background: var(--lp-kopf); border-bottom: 0; }
.lp-header-inner { height: 70px; }
.lp-logo { color: #fff; }
.lp-logo i { color: #fff !important; }
.lp-nav a { color: rgba(255, 255, 255, .78); }
.lp-nav a:hover { color: #fff; }
.lp-header-actions .lp-btn-primary { background: var(--lp-akzent); box-shadow: none; }
.lp-header-actions .lp-btn-primary:hover { background: var(--lp-akzent-dunkel); }
.lp-header-actions .lp-btn-ghost { color: rgba(255, 255, 255, .9); }
.lp-header-actions .lp-btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/*
 * Die ARBEITSSEITEN tragen dieselbe Kopfleiste (`lp-header-app`) — sie war blau, waehrend
 * die Verkaufsseite davor dunkel wurde. Wer sich anmeldet, soll nicht das Gefuehl haben,
 * ein anderes Programm geoeffnet zu haben.
 */
.lp-header-app { background: var(--lp-kopf); }
.lp-header-app .lp-header-actions > a:hover { background: rgba(255, 255, 255, .16); }
.lp-header-app .lp-nav a.aktiv,
.lp-header-app .lp-nav a[aria-current] { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- Knoepfe ---------- */
.lp-btn { border-radius: 6px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.lp-btn-lg { border-radius: 6px; padding: 15px 28px; font-size: 14.5px; }
.lp-btn-primary { background: var(--lp-akzent); box-shadow: none; }
.lp-btn-primary:hover { background: var(--lp-akzent-dunkel); }
.lp-btn-outline { background: #fff; color: var(--lp-akzent); border: 1.5px solid var(--lp-akzent); }
.lp-btn-outline:hover { background: var(--lp-akzent); color: #fff; border-color: var(--lp-akzent); }

/* ---------- Kopfbereich ---------- */
.lp-hero { background: #fff; padding: 76px 0 64px; }
.lp-hero-inner { display: block; max-width: 100%; }
.lp-hero-text { max-width: 760px; margin: 0 auto; text-align: center; }
.lp-hero-text h1 {
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.2; font-weight: 800; color: var(--lp-kopf); letter-spacing: -.01em;
}
.lp-hero-text > p {
    font-size: 17.5px; line-height: 1.62; color: var(--lp-grau);
    max-width: 620px; margin-left: auto; margin-right: auto;
}
.lp-hero-cta { justify-content: center; }
.lp-hero-trust { justify-content: center; gap: 10px 28px; margin-top: 22px; }
.lp-hero-trust span { color: var(--lp-grau); font-size: 14.5px; }
.lp-hero-trust i { color: var(--lp-akzent); }
.lp-hero-mock { max-width: 900px; margin: 46px auto 0; }

/* Die Marke ueber der Ueberschrift: kein Schildchen, nur Zeichen und Versalien. */
.lp-eyebrow {
    background: transparent !important; border: 0 !important; color: var(--lp-akzent) !important;
    padding: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.lp-hero-text .lp-eyebrow { justify-content: center; }

/* ---------- Abschnitte ---------- */
.lp-section-head h2, .lp-pricing h2, .lp-steps h2, .lp-features h2 {
    color: var(--lp-kopf); letter-spacing: -.01em;
}
.lp-logos { background: var(--lp-flaeche); border-top: 0; border-bottom: 0; }
.lp-features { background: #fff; }
.lp-steps { background: var(--lp-flaeche); }
.lp-feature-card {
    background: var(--lp-flaeche); border: 0; border-left: 4px solid var(--lp-akzent);
    border-radius: 0 10px 10px 0; box-shadow: none;
}
.lp-feature-card:hover { background: #f1f3f6; transform: none; box-shadow: none; }
.lp-feature-icon { background: transparent; color: var(--lp-akzent); }
.lp-feature-card h3 { color: var(--lp-kopf); }
.lp-step-num { background: var(--lp-akzent); }

/* ---------- Fuss ---------- */
.lp-footer { background: var(--lp-kopf-tief); border-top: 0; }
.lp-footer, .lp-footer a, .lp-footer-copy { color: rgba(255, 255, 255, .72); }
.lp-footer .lp-logo, .lp-footer .lp-logo i { color: #fff !important; }
.lp-footer a:hover { color: #fff; }

@media (max-width: 700px) {
    .lp-hero { padding: 48px 0 40px; }
    .lp-hero-mock { margin-top: 30px; }
    .lp-btn { letter-spacing: .04em; }
    .lp-hero-text > p { font-size: 16px; }
}


/*
 * WAS IM PREIS NICHT DRIN IST (12.09.2026) — der Satz unter den Paketkarten.
 *
 * Ruhig, aber lesbar: er ist kein Kleingedrucktes, das man wegschauen soll, sondern die
 * Angabe, ohne die der Preis darueber irrefuehrend waere (TSE, Geraete, Einrichtung).
 * Deshalb keine 11px und kein Grau auf Grau.
 */
.lp-preis-hinweis {
    max-width: 780px;
    margin: 26px auto 0;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .035);
    color: var(--lp-muted, #5a6473);
    font-size: 13.5px;
    line-height: 1.6;
    text-align: center;
}
.lp-preis-hinweis i { margin-right: 6px; opacity: .8; }


/*
 * DIE PROVISION DER BESTELLWEBSITE (13.09.2026) — unter dem Preis jeder Karte, die sie enthaelt.
 *
 * Bewusst KEIN Kleingedrucktes: sie ist ein Teil des Preises. Dunkle Schrift auf dem hellen
 * Akzent der Domain (`--lp-akzent-hell`) — dieselben Farbwoerter, die jede Domain ohnehin
 * ueberschreibt, damit das Band rot, gruen oder blau wird, ohne dass es jemand anfasst.
 */
.lp-provision {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -6px 0 16px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--lp-akzent-hell);
    color: #1f2937;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
}
.lp-provision i { color: var(--lp-akzent); flex-shrink: 0; }


/* ==========================================================================================
   DER RAHMEN — Kopfleiste mit Menü, Schlussband, Fuss, Abstände (13.09.2026)
   ==========================================================================================
   Der Wirt, drei Telefonbilder nebeneinander: *„на всех этих сайтах все должно быть одинаково,
   сделай отступы, красивый подвал и топменю, справа три линии меню"*.

   Gemessen auf 390 px: Logo, „Einloggen" und „Jetzt starten" teilten sich die Leiste („e-buchung"
   brach um), die Navigation war unter 900 px ersatzlos weg, im Schlussband lag ein dunkler
   Kasten in einem blauen Streifen, und im Fuss stand „e-" über „kasse".

   Alles hier hängt an `.lp-verkauf` (der <body> der Startseite und der Rechtsseiten) oder an
   Klassen, die nur `rahmen.php` setzt. Die ARBEITSSEITEN tragen dieselbe Datei und dieselbe
   `.lp-header` — sie sollen von diesem Umbau nichts merken.
   ========================================================================================== */

/* ---------- Kopfleiste ---------- */
.lp-kopf .lp-logo { white-space: nowrap; }
.lp-kopf .lp-logo i { color: var(--lp-akzent) !important; }
.lp-kopf .lp-menue { display: flex; align-items: center; flex: 1; min-width: 0; margin-left: 36px; }
.lp-kopf .lp-nav { margin: 0 auto; }
.lp-kopf .lp-nav a { white-space: nowrap; }
.lp-menue-knopf { display: none; }

/* Unter 960 px: Logo links, drei Linien rechts. Navigation und Knöpfe klappen darunter auf. */
@media (max-width: 960px) {
    .lp-kopf .lp-menue-knopf {
        display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
        width: 44px; height: 44px; margin-right: -10px; padding: 0;
        background: transparent; border: 0; border-radius: 10px; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    @media (hover: hover) { .lp-kopf .lp-menue-knopf:hover { background: rgba(255, 255, 255, .1); } }
    .lp-kopf .lp-menue-knopf:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
    .lp-menue-knopf span {
        display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff;
        transition: transform .2s ease, opacity .15s ease;
    }
    .lp-kopf-offen .lp-menue-knopf span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .lp-kopf-offen .lp-menue-knopf span:nth-child(2) { opacity: 0; }
    .lp-kopf-offen .lp-menue-knopf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .lp-kopf .lp-menue {
        display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
        padding: 4px 20px 22px; background: var(--lp-kopf);
        border-top: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 24px 40px -18px rgba(15, 23, 42, .55);
        max-height: calc(100vh - 70px); overflow-y: auto;
    }
    .lp-kopf-offen .lp-menue { display: block; }
    .lp-kopf .lp-nav { display: flex; flex-direction: column; gap: 0; margin: 0; }
    .lp-kopf .lp-nav a {
        display: flex; align-items: center; justify-content: space-between;
        padding: 15px 2px; font-size: 16px; color: rgba(255, 255, 255, .9);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    /* Der Winkel rechts ist gezeichnet, kein Schriftzeichen: fehlt die Zeichenschrift, stünde
       dort sonst ein leeres Kästchen. */
    .lp-kopf .lp-nav a::after {
        content: ""; width: 7px; height: 7px; margin-right: 4px;
        border-right: 2px solid rgba(255, 255, 255, .35); border-bottom: 2px solid rgba(255, 255, 255, .35);
        transform: rotate(-45deg);
    }
    /* Die Knöpfe unter der Navigation: nebeneinander, solange beide lesbar bleiben, sonst
       untereinander. Die Regeln weiter oben (Zeichen-Knöpfe auf 40 px, Schrift 12 px) gelten
       hier ausdrücklich NICHT — sie sind für die Arbeitsseiten. */
    .lp-kopf .lp-header-actions {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 18px;
    }
    .lp-kopf .lp-header-actions .lp-btn {
        width: 100%; height: 48px; padding: 0 14px; gap: 8px;
        justify-content: center; font-size: 14px; border-radius: 6px;
    }
    .lp-kopf .lp-header-actions .lp-btn-ghost { border: 1.5px solid rgba(255, 255, 255, .3); }
}

/* Ein Sprung auf `#preise` landet UNTER der festen Kopfleiste, nicht dahinter. */
.lp-verkauf section[id] { scroll-margin-top: 70px; }

/* ---------- Kopfbereich: dieselbe Tönung auf allen drei ---------- */
.lp-verkauf .lp-hero { background: linear-gradient(180deg, var(--lp-akzent-hell) 0%, #ffffff 65%); }
.lp-verkauf .lp-accent { color: var(--lp-akzent); }
/* Die Marke über der Überschrift als Block: bricht der Text am Telefon um, blieb das Zeichen
   sonst allein am linken Rand stehen (e-kasse, „Kasse · Online-Bestellshop · Buchhaltung"). */
.lp-verkauf .lp-eyebrow { display: block; text-align: center; }
.lp-verkauf .lp-eyebrow i { margin-right: 8px; }

/* ---------- Was vorher im <style> der Vorlage stand ---------- */
/* Der Hinweis für ein Konto ohne Betrieb (`?hinweis=kein-haus`). */
.lp-hinweis {
    background: #fff4e5; border-bottom: 1px solid #f0b429; padding: 14px 0;
    color: #7a4a00; font-size: 15px; line-height: 1.55;
}
.lp-hinweis strong { display: block; color: #5a3600; }
.lp-hinweis a { color: #7a4a00; text-decoration: underline; }

/* „Was als Nächstes dazukommt" — steht bewusst auf der Verkaufsseite. */
.lp-offen { padding: 0 0 90px; }
.lp-offen-kasten {
    border: 1px dashed var(--lp-border); border-radius: 16px; padding: 28px 30px;
    background: var(--lp-bg);
}
.lp-offen-kasten h3 { font-size: 16.5px; font-weight: 800; color: var(--lp-kopf); margin-bottom: 6px; }
.lp-offen-kasten > p { font-size: 13.5px; color: var(--lp-muted); margin-bottom: 16px; }
.lp-offen-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px; }
.lp-offen-liste div { font-size: 13.5px; color: var(--lp-navy); display: flex; gap: 9px; align-items: baseline; }
.lp-offen-liste i { color: var(--lp-muted); font-size: 8px; transform: translateY(-2px); }
@media (max-width: 860px) { .lp-offen-liste { grid-template-columns: 1fr; } }

/* Eine Karte ohne Preis, und der Hinweis, wenn die Preise gerade nicht kommen. */
.lp-preis-anfrage .amount { color: var(--lp-muted); }
.lp-preis-stoerung {
    border: 1px solid var(--lp-border); border-radius: 16px; padding: 34px;
    text-align: center; background: var(--lp-bg);
}
.lp-preis-stoerung i { font-size: 26px; color: var(--lp-muted); margin-bottom: 12px; display: block; }
.lp-preis-stoerung p { color: var(--lp-muted); font-size: 14.5px; margin-bottom: 18px; }
.lp-preis-stoerung .lp-btn { width: auto; }

/* ---------- Das Schlussband: eine Karte ---------- */
.lp-cta-karte {
    position: relative; overflow: hidden; text-align: center;
    padding: 64px 40px; border-radius: 20px;
    background-color: var(--lp-kopf);
    background-image: radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 60%);
    box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .45);
}
/* Die Farbe des Programms als Kante oben — die Karte gehört sichtbar zu DIESER Domain. */
.lp-cta-karte::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--lp-akzent);
}
.lp-cta-karte h2 {
    max-width: 680px; margin: 0 auto;
    font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: #fff; letter-spacing: -.01em;
}
.lp-cta-karte p { max-width: 580px; margin: 14px auto 0; color: rgba(255, 255, 255, .74); font-size: 16px; line-height: 1.6; }
.lp-cta-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.lp-btn-hell { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); }
.lp-btn-hell:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .65); color: #fff; }
/* Eine Mailadresse in Versalien liest niemand richtig ab. */
.lp-btn-mail { text-transform: none; letter-spacing: .01em; }

/* ---------- Der Fuss ---------- */
.lp-fuss { background: var(--lp-kopf-tief); color: rgba(255, 255, 255, .66); padding: 64px 0 0; }
.lp-fuss-oben {
    display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: 40px; padding-bottom: 48px;
}
.lp-fuss .lp-logo { color: #fff; font-size: 20px; white-space: nowrap; }
.lp-fuss .lp-logo i { color: var(--lp-akzent) !important; }
.lp-fuss-marke p { max-width: 360px; margin-top: 14px; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .6); }
.lp-fuss-mail { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 14.5px; font-weight: 600; color: #fff; }
.lp-fuss-mail i { color: var(--lp-akzent); }
.lp-fuss-mail:hover { text-decoration: underline; }
.lp-fuss-titel {
    margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #fff;
}
.lp-fuss-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lp-fuss-spalte a { font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, .72); white-space: nowrap; transition: color .15s; }
.lp-fuss-spalte a:hover,
.lp-fuss-spalte a[aria-current] { color: #fff; }
.lp-fuss-programm i { width: 18px; margin-right: 6px; text-align: center; color: rgba(255, 255, 255, .5); }
.lp-fuss-spalte a[aria-current] .lp-fuss-programm i { color: var(--lp-akzent); }
.lp-fuss-spalte small { display: block; margin: 2px 0 0 24px; font-size: 12px; color: rgba(255, 255, 255, .45); white-space: normal; }
.lp-fuss-unten {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
    padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px; color: rgba(255, 255, 255, .5);
}
@media (max-width: 960px) {
    .lp-fuss-oben { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
    .lp-fuss-marke { grid-column: 1 / -1; }
}

/* ---------- Am Telefon: Luft an den Rändern, weniger Leere dazwischen ---------- */
@media (max-width: 620px) {
    .lp-verkauf .lp-container { padding: 0 20px; }
    .lp-verkauf .lp-features,
    .lp-verkauf .lp-steps,
    .lp-verkauf .lp-pricing { padding: 60px 0; }
    .lp-verkauf .lp-offen,
    .lp-verkauf .lp-cta { padding-bottom: 60px; }
    .lp-verkauf .lp-section-head { margin-bottom: 30px; }
    .lp-verkauf .lp-section-head h2 { font-size: 26px; }
    .lp-verkauf .lp-logos { padding: 28px 0; }
    .lp-verkauf .lp-logos-row { gap: 12px 24px; }
    .lp-verkauf .lp-feature-grid { gap: 14px; }
    .lp-verkauf .lp-feature-card { padding: 22px 20px; }
    .lp-verkauf .lp-steps-grid { gap: 28px; }
    .lp-verkauf .lp-offen-kasten { padding: 22px 20px; }
    .lp-verkauf .rs-seite { padding: 32px 20px 60px; }

    .lp-cta-karte { padding: 40px 22px 34px; border-radius: 16px; }
    .lp-cta-knoepfe { flex-direction: column; align-items: stretch; }
    .lp-cta-knoepfe .lp-btn { justify-content: center; }

    .lp-fuss { padding-top: 48px; }
    .lp-fuss-oben { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-bottom: 36px; }
    .lp-fuss-unten { flex-direction: column; align-items: center; text-align: center; }
}


/* ==========================================================================================
   AM SCHREIBTISCH WIE DIE ERSTE e-kasse-STARTSEITE (14.09.2026)
   ==========================================================================================
   Der Wirt schickte ein Bild der frueheren e-kasse.eu am Computer — weisse Kopfleiste, Text
   links, das Kassenbuch rechts daneben, runde Knoepfe ohne Versalien, die Marke als Schildchen
   — und schrieb: *„на компьютере может так сделаем дизайн?"*.

   Die Masse sind die der Vorlage vor dem 11.09.2026; sie stehen weiter oben in dieser Datei
   noch als Grundregeln und werden vom „ANSTRICH" ueberschrieben. Hier holt sie ein Block
   zurueck — NUR ab 961 px und NUR auf `.lp-verkauf`. Unter 961 px bleibt alles, wie es am
   13.09. fuer das Telefon gebaut wurde (dunkle Leiste, drei Linien, alles mittig).

   Die FARBE bleibt die der Domain (`--lp-akzent`): auf e-kasse ist sie das Blau des Bildes,
   auf e-tisch rot, auf e-buchung gruen. Gleich ist die Form.
   ========================================================================================== */
@media (min-width: 961px) {
    /* ---------- Kopfleiste: weiss, Rand unten ---------- */
    .lp-verkauf .lp-kopf { background: #fff; border-bottom: 1px solid var(--lp-border); }
    .lp-verkauf .lp-kopf .lp-header-inner { height: 68px; }
    .lp-verkauf .lp-kopf .lp-logo { color: var(--lp-navy); }
    .lp-verkauf .lp-kopf .lp-nav { gap: 28px; }
    .lp-verkauf .lp-kopf .lp-nav a { color: var(--lp-muted); font-size: 14px; font-weight: 600; }
    .lp-verkauf .lp-kopf .lp-nav a:hover { color: var(--lp-akzent); }
    .lp-verkauf .lp-kopf .lp-header-actions .lp-btn-ghost { color: var(--lp-navy); }
    .lp-verkauf .lp-kopf .lp-header-actions .lp-btn-ghost:hover { background: var(--lp-bg); color: var(--lp-navy); }

    /* ---------- Knoepfe: rund, ohne Versalien ---------- */
    .lp-verkauf .lp-btn { border-radius: 9px; font-weight: 700; letter-spacing: normal; text-transform: none; }
    .lp-verkauf .lp-btn-lg { border-radius: 11px; padding: 14px 26px; font-size: 15.5px; }
    .lp-verkauf .lp-btn-primary {
        box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--lp-akzent) 50%, transparent);
    }
    .lp-verkauf .lp-btn-primary:hover { transform: translateY(-1px); }
    .lp-verkauf .lp-btn-outline { background: #fff; color: var(--lp-navy); border: 1px solid var(--lp-border); }
    .lp-verkauf .lp-btn-outline:hover { background: #fff; color: var(--lp-akzent); border-color: var(--lp-akzent); }

    /* ---------- Kopfbereich: Text links, Bild rechts ---------- */
    .lp-verkauf .lp-hero { padding: 72px 0 60px; }
    .lp-verkauf .lp-hero-inner {
        display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center;
        max-width: 1140px;   /* der ANSTRICH setzte 100 % und hob damit die Breite des Containers auf */
    }
    .lp-verkauf .lp-hero-text { max-width: none; margin: 0; text-align: left; }
    .lp-verkauf .lp-hero-text h1 {
        font-size: 42px; line-height: 1.2; font-weight: 800; color: var(--lp-navy); letter-spacing: -.5px;
    }
    .lp-verkauf .lp-hero-text > p { margin: 18px 0 0; max-width: 480px; font-size: 16.5px; line-height: 1.5; color: var(--lp-muted); }
    .lp-verkauf .lp-hero-cta { justify-content: flex-start; }
    .lp-verkauf .lp-hero-trust { justify-content: flex-start; gap: 22px; }
    .lp-verkauf .lp-hero-trust span { font-size: 13px; font-weight: 600; color: var(--lp-muted); }
    .lp-verkauf .lp-hero-trust i { color: var(--lp-green); margin-right: 4px; }
    .lp-verkauf .lp-hero-mock { display: flex; justify-content: center; max-width: none; margin: 0; }

    /* ---------- Die Marke als Schildchen (auch ueber den Abschnitten) ---------- */
    .lp-verkauf .lp-eyebrow {
        display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
        padding: 6px 14px; border-radius: 999px;
        background: var(--lp-akzent-hell) !important;
        border: 1px solid color-mix(in srgb, var(--lp-akzent) 28%, #fff) !important;
        color: var(--lp-akzent-dunkel) !important;
        font-size: 12.5px; font-weight: 700; letter-spacing: normal; text-transform: none; text-align: left;
    }
    .lp-verkauf .lp-eyebrow i { margin-right: 0; }
}


/* ==========================================================================================
   DAS KASSENBILD IM KOPFBEREICH VON e-kasse.eu (14.09.2026) — `.lp-pos` in inhalt.php
   ==========================================================================================
   Nachgebaut nach dem Telefonbild der laufenden Kasse, das der Wirt geschickt hat: oben fünf
   Knöpfe, darunter die Suche, links die Kategorien, rechts die Waren, unten der Tisch. Die
   Farben sind die der Kacheln auf dem Foto (abgelesen), nicht die der Domain — es ist ein Bild
   der Kasse. Die Namen sind allgemein: auf dem Foto standen Biermarken.
   ========================================================================================== */
.lp-pos {
    width: 100%; max-width: 380px; box-sizing: border-box;
    padding: 12px; border: 6px solid #0d1015; border-radius: 26px;
    background: #171b22; color: #fff; font-size: 12px; line-height: 1.2; text-align: left;
    box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .4);
    transform: rotate(1deg);
}
.lp-pos-oben { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: 6px; }
.lp-pos-knopf {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px;
    border: 1.5px solid #3a3f4a; border-radius: 8px; background: #1f2430;
    font-size: 14px; font-weight: 800;
}
.lp-pos-knopf-tisch { border-color: #60a5fa; background: #25314a; color: #60a5fa; }
.lp-pos-orange { border-color: #9a4a22; color: #34d399; }
.lp-pos-gruen { border-color: #1f6f4f; color: #f59e0b; }
.lp-pos-grau { color: #2dd4bf; }
.lp-pos-suche {
    display: flex; align-items: center; gap: 9px; height: 36px; margin: 8px 0; padding: 0 12px;
    border-radius: 8px; background: #3a3f4b; color: #9aa3b2; font-size: 12.5px;
}
.lp-pos-mitte {
    display: grid; grid-template-columns: 34% 1fr; gap: 8px;
    padding-top: 8px; border-top: 1px solid #2a2f3a;
}
.lp-pos-kategorien { display: flex; flex-direction: column; gap: 6px; }
.lp-pos-kat {
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    min-height: 38px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
}
.lp-pos-kat-aktiv { box-shadow: inset 4px 0 0 #dc2626; }
.lp-pos-kat em { font-style: normal; font-size: 9px; letter-spacing: 1px; color: #f59e0b; }
.lp-pos-waren { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.lp-pos-ware { min-height: 44px; padding: 7px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; }
.lp-pos-trenner {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 3px 0;
    color: #60a5fa; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.lp-pos-trenner::before, .lp-pos-trenner::after { content: ""; flex: 1; height: 1px; background: #2f3542; }
.lp-pos-unten {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px; padding: 12px 6px 4px; border-top: 2px solid #3b82f6; font-size: 15px;
}
.lp-pos-unten span { color: #60a5fa; font-weight: 800; }
/* Die Farben der Kacheln — abgelesen am Foto der Kasse. */
.lp-pos-beere { background: #7a1d3e; }
.lp-pos-oliv { background: #4b7a2b; }
.lp-pos-schiefer { background: #3b3f46; }
.lp-pos-blau { background: #2f6fae; }
.lp-pos-wein { background: #5c1010; }
.lp-pos-braun { background: #5b3a06; }
.lp-pos-dunkelbraun { background: #3f2605; }
.lp-pos-hell { background: #3b82f6; }
.lp-pos-rot { background: #8f0d0d; }