/* Startseiten (apps/landing) – Grundgestaltung.
   Alle Farben/Schriften sind Variablen. Überschrieben werden sie je Seite aus
   theme.* (landing_theme_css() in render.php); --lp-primary fällt auf die
   Grundfarbe der Suite ($BASECONFIG['design']['primaryColor']) zurück. */

:root {
    --lp-primary: #007acc;
    --lp-text: #1f2933;
    --lp-heading: var(--lp-text);
    --lp-muted: #5f6b76;
    --lp-bg: #ffffff;
    --lp-bg-alt: #f3f5f7;
    --lp-border: #dde2e7;
    --lp-hero-bg: var(--lp-bg-alt);
    --lp-hero-text: var(--lp-text);
    --lp-footer-bg: transparent;
    --lp-footer-text: var(--lp-muted);
    --lp-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --lp-font-heading: var(--lp-font);
    --lp-logo-h: 44px;
    --lp-radius: 8px;
    --lp-max: 1140px;
}

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

body.lp {
    margin: 0;
    font-family: var(--lp-font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--lp-text);
    background: var(--lp-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.lp a { color: var(--lp-primary); }
.lp a:hover { text-decoration: none; }
.lp img { max-width: 100%; height: auto; }

.lp-container {
    width: 100%;
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 0 16px;
}

.lp h1, .lp h2, .lp h3 { line-height: 1.25; margin: 0 0 .6em; font-family: var(--lp-font-heading); color: var(--lp-heading); }
.lp h1 { font-size: 1.75rem; font-weight: 600; }
.lp h2 { font-size: 1.35rem; font-weight: 600; }
.lp h3 { font-size: 1.15rem; font-weight: 600; }
.lp-html > :first-child { margin-top: 0; }
.lp-html > :last-child { margin-bottom: 0; }

/* ---------- Kopfleiste ---------- */
.lp-navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid var(--lp-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.lp-navbar-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 60px;
    gap: 8px 24px;
}
.lp-brand { display: flex; align-items: center; color: var(--lp-heading); text-decoration: none; font-weight: 600; font-family: var(--lp-font-heading); }
.lp-brand img { max-height: var(--lp-logo-h); width: auto; display: block; }
.lp-nav { display: flex; gap: 4px; }
.lp-nav a {
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--lp-text);
    text-decoration: none;
}
.lp-nav a:hover { background: var(--lp-bg-alt); }
.lp-nav a.is-active { color: var(--lp-primary); font-weight: 600; }
.lp-nav-burger { display: none; }
/* Checkbox bleibt per Tastatur erreichbar */
.lp-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* Variante "bar": Logo-Zeile, darunter Menü als Leiste in der Akzentfarbe */
.lp-navbar.is-bar { position: relative; border-bottom: 0; box-shadow: none; }
.lp-navbar.is-bar .lp-navbar-inner { min-height: calc(var(--lp-logo-h) + 32px); padding-top: 16px; padding-bottom: 16px; }
/* Menüleiste: eigene Farbe (theme.navBg), sonst die Akzentfarbe */
.lp-nav-band { background: var(--lp-nav-bg, var(--lp-primary)); }
.lp-nav-band .lp-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 8px; }
.lp-nav-band a {
    color: var(--lp-nav-text, #fff);
    border-radius: 0;
    padding: 18px 20px;
    text-transform: uppercase;
    font-family: var(--lp-font-heading);
    font-size: .95rem;
}
.lp-nav-band a:hover { background: rgba(0, 0, 0, .1); }
.lp-nav-band a.is-active { color: var(--lp-nav-text, #fff); box-shadow: inset 0 -3px 0 currentColor; }

@media (max-width: 640px) {
    .lp-nav-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        margin-left: auto;
        width: 40px;
        height: 40px;
        padding: 8px;
        cursor: pointer;
        border-radius: 6px;
    }
    .lp-nav-burger span { display: block; height: 2px; background: var(--lp-text); border-radius: 1px; }
    .lp-nav { display: none; flex-basis: 100%; flex-direction: column; padding-bottom: 8px; }
    .lp-nav-toggle:checked ~ .lp-navbar-inner .lp-nav,
    .lp-nav-toggle:checked ~ .lp-nav-band { display: flex; }
    .lp-nav-band { padding-bottom: 0; }
    .lp-nav-band .lp-container { flex-direction: column; }
    .lp-nav-band a { padding: 12px 16px; }
    .lp-nav-toggle:focus-visible ~ .lp-navbar-inner .lp-nav-burger { outline: 2px solid var(--lp-primary); }
    .lp-navbar.is-bar .lp-navbar-inner { min-height: 0; padding-top: 10px; padding-bottom: 10px; flex-wrap: nowrap; }
    /* Breite Logos schrumpfen, statt den Menü-Knopf in die nächste Zeile zu schieben */
    .lp-navbar.is-bar .lp-brand { min-width: 0; flex: 0 1 auto; }
    .lp-navbar.is-bar .lp-brand img { max-width: 100%; height: auto; }
    .lp-brand img { max-height: min(var(--lp-logo-h), 56px); }
}

/* ---------- Einstieg ---------- */
.lp-hero {
    background: var(--lp-hero-bg);
    color: var(--lp-hero-text);
    border-bottom: 1px solid var(--lp-border);
    padding: 28px 0;
}
.lp-hero h1 { color: var(--lp-hero-text); margin-bottom: .3em; }
.lp-hero.has-image {
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 72px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.lp-hero.has-image h1, .lp-hero.has-image a { color: #fff; }

/* ---------- Abschnitte ---------- */
.lp-section { padding: 28px 0 0; }
.lp-small { font-size: .875rem; color: var(--lp-muted); }

/* ---------- Kacheln ---------- */
.lp-cards {
    display: grid;
    grid-template-columns: repeat(var(--lp-cols, 3), minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 900px) { .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lp-cards { grid-template-columns: 1fr; } }

.lp-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    overflow: hidden;
    background: #fff;
}
.lp-card-media { background: var(--lp-bg-alt); }
.lp-card-media img { display: block; width: 100%; }
/* Option imageRatio: alle Bilder im selben Format. Zugeschnitten wird unten – Vorschaubilder sind meist
   Screenshots, deren Titelzeile/Logo oben steht */
.lp-cards-ratio .lp-card-media img { aspect-ratio: var(--lp-img-ratio); height: auto; object-fit: cover; object-position: center top; }
/* Option imageInset: Bild mit Abstand zum Kachelrand (wie der Textbereich) */
.lp-cards-inset .lp-card-media { background: none; padding: 16px 16px 0; }
.lp-cards-inset .lp-card-media img { border: 1px solid var(--lp-border); border-radius: min(var(--lp-radius), 4px); }
.lp-card-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; flex: 1; }
.lp-card-body h3 { margin: 0; }
.lp-card-body h3 a { color: var(--lp-heading); text-decoration: none; }
.lp-card-body h3 a:hover { color: var(--lp-primary); }
.lp-card-body h3 small { display: block; font-size: .8em; font-weight: 400; color: var(--lp-muted); }
.lp-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

/* linkMode "card": ganze Kachel klickbar. Der Link sitzt auf dem Aktionstext und wird per ::after
   über die gesamte Kachel gezogen; Links im Kacheltext liegen darüber und bleiben eigenständig. */
.lp-cards-linked .lp-card { position: relative; transition: border-color .15s ease, box-shadow .15s ease; }
.lp-cards-linked .lp-card:hover,
.lp-cards-linked .lp-card:focus-within { border-color: var(--lp-primary); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.lp-cards-linked .lp-card:hover h3 { text-decoration: underline; }
.lp-cards-linked .lp-html a { position: relative; z-index: 2; }
.lp-card-action {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: auto;
    font-weight: 600;
    font-size: .95rem;
    color: var(--lp-primary);
    text-decoration: none;
}
.lp-card-action::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Pfeil ">" als gedrehte Rahmenecke hinter dem Text (order) – keine Icon-Schrift nötig */
.lp-card-action::before {
    content: "";
    order: 2;
    width: .45em;
    height: .45em;
    margin-left: .4em;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
}
.lp-card-action:focus-visible { outline: none; }
.lp-card-action:focus-visible::after { outline: 2px solid var(--lp-primary); outline-offset: 2px; border-radius: var(--lp-radius); }

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--lp-border);
    border-radius: min(var(--lp-radius), 6px);
    background: #fff;
    color: var(--lp-text) !important;
    text-decoration: none;
    font-size: .9rem;
    text-align: center;
}
.lp-btn:hover { border-color: var(--lp-primary); color: var(--lp-primary) !important; }
.lp-btn img { height: 18px; width: auto; }
.lp-btn-primary { background: var(--lp-primary); border-color: var(--lp-primary); color: #fff !important; }
.lp-btn-primary:hover { filter: brightness(1.08); color: #fff !important; }
/* Weiße Piktogramme (PC/Mobil) auf farbigem Knopf */
.lp-btn-primary img { filter: brightness(0) invert(1); }

/* ---------- Linkliste ---------- */
.lp-links { margin: .6em 0 1em; padding-left: 1.4em; }
.lp-links li { margin: .2em 0; }

/* ---------- Unterseite ---------- */
/* .lp-section setzt padding und würde den Seitenrand von .lp-container überschreiben */
.lp-page { padding: 28px 16px 16px; max-width: 820px; }
/* Bild über der Überschrift einer Unterseite (meist ein Logo) */
.lp-page-image img { max-height: max(var(--lp-logo-h), 60px); width: auto; }

/* ---------- Fußzeile ---------- */
.lp-footer {
    margin-top: auto;
    border-top: 1px solid var(--lp-border);
    padding: 16px 0;
    font-size: .9rem;
    background: var(--lp-footer-bg);
    color: var(--lp-footer-text);
}
/* Abstand über der Fußzeile, die per margin-top:auto unten andockt */
body.lp > section:last-of-type, body.lp > main { margin-bottom: 32px; }
.lp-footer-inner { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.lp-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.lp-footer a { color: var(--lp-footer-text); }
/* Hover in der Fußzeile ohne Akzentfarbe: Die kann der Fußzeilen-Hintergrund sein (Bad Dürkheim) */
.lp-footer a:hover { color: var(--lp-footer-text); text-decoration: none; }