/* Schaustuecke der CAE42-Startseite (Desk, Projektbrett, Trichter, offene Posten),
 * CSS unveraendert aus der vorigen Fassung von security/login.html.twig; die Tokens
 * des alten public_base heissen hier --m-*, weil cae-start.css gleichnamige Tokens
 * anders belegt. Quelle: ~/Dev/CAE42-Entwurf/bauen.py (AIPM 149). */
:root { --m-bg: #ffffff; --m-text: #1a1a2e; --m-muted: #6b7280; --m-line: #e5e7eb; --m-card-bg: #ffffff;
        --m-accent: #ee7c1b; --m-accent-btn: #ee7c1b; --m-on-accent: #ffffff; --m-field-line: #cbd2dc; --m-shadow: rgba(20,30,50,.06); }
[data-theme="dark"] { --m-bg: #0A0F1C; --m-text: #F1F5F9; --m-muted: #A3B1C6; --m-line: #1F2B42; --m-card-bg: #111A2E;
        --m-field-line: #33425E; --m-shadow: rgba(0,0,0,.35); }
/* ------------------------------------------------------ Grundraster */
.lp-breit { max-width: 1160px; margin: 0 auto; padding: 0 1.4rem; }
.lp-abschnitt { padding: 3.6rem 0; }
.lp-grau { background: color-mix(in srgb, var(--m-muted) 7%, var(--m-bg)); }
.lp-abschnitt h2, .lp-schluss h2 { font-size: 1.6rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
.lp-untertitel { color: var(--m-muted); max-width: 44rem; margin: 0 0 2rem; }
.lp-abschnitt h3 { font-size: 1.02rem; margin: .9rem 0 .35rem; }
.lp-abschnitt p { margin: 0; }

/* -------------------------------------------------------------- Hero */
.lp-hero { padding: 3.4rem 0 3.8rem;
           background: radial-gradient(1100px 420px at 12% -10%,
                       color-mix(in srgb, var(--m-accent) 13%, transparent), transparent 70%); }
.lp-hero-raster { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; }
.lp-hero h1 { font-size: clamp(1.8rem, 3.7vw, 2.6rem); line-height: 1.12; margin: 0 0 1rem;
              letter-spacing: -.02em; }
.lp-hero h1 .akz { color: var(--m-accent); }
.lp-lead { font-size: 1.08rem; color: var(--m-muted); max-width: 34rem; margin: 0 0 .5rem; }
.lp-lead-klein { font-size: .95rem; color: var(--m-muted); margin: 0 0 1.8rem; }

.lp-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; }
.lp-knopf { display: inline-block; padding: .62rem 1.3rem; border-radius: .5rem; font-weight: 600;
            font-size: .95rem; border: 1px solid var(--m-line); color: var(--m-text); background: var(--m-card-bg); }
.lp-knopf:hover { text-decoration: none; border-color: var(--m-accent); }
.lp-knopf.primaer { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }
.lp-knopf.primaer:hover { filter: brightness(1.07); }

/* ------------------------------------------------ nachgebauter Schirm */
/* Der Schirm dreht mit dem Schema mit, aber nicht ueber Filter oder
   Transparenz, sondern ueber eigene Farbwerte: Ein dunkles Fenster,
   das man aufhellt, sieht grau aus - ein hell entworfenes sieht hell
   aus. Gleiches Verfahren wie beim Schwesterportal. */
:root {
    --lps-flaeche: #ffffff; --lps-rand: #e2e5ea; --lps-kachel: #f7f8fa;
    --lps-kachelrand: #e6e9ee; --lps-schrift: #1a1a2e; --lps-matt: #6b7280;
    --lps-gruen: #0f7a3d; --lps-lampe: #17924a; --lps-leer: #dfe3e9;
    --lps-schatten: 0 14px 34px rgba(20,30,50,.10);
}
[data-theme="dark"] {
    --lps-flaeche: #16171a; --lps-rand: #2b2d33; --lps-kachel: #1e2024;
    --lps-kachelrand: #2b2d33; --lps-schrift: #eef1f5; --lps-matt: #8a919c;
    --lps-gruen: #8fd6a6; --lps-lampe: #17924a; --lps-leer: #2f333a;
    --lps-schatten: 0 18px 45px rgba(0,0,0,.30);
}

.lp-schirm { background: var(--lps-flaeche); border: 1px solid var(--lps-rand); border-radius: .9rem;
             padding: .9rem 1rem 1rem; box-shadow: var(--lps-schatten); color: var(--lps-schrift); }
.lp-schirm-kopf { display: flex; align-items: center; gap: .5rem; font-size: .74rem;
                  letter-spacing: .2em; color: var(--lps-gruen); margin-bottom: .8rem; }
.lp-schirm-ok { margin-left: auto; letter-spacing: .04em; color: var(--lps-matt); text-transform: none; }
.lp-lampe { flex: 0 0 auto; width: .58rem; height: .58rem; aspect-ratio: 1;
            border-radius: 50%; background: var(--lps-lampe); }
.lp-lampe.warn { background: #ee7c1b; }

.lp-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.lp-kachel { background: var(--lps-kachel); border: 1px solid var(--lps-kachelrand);
             border-radius: .5rem; padding: .5rem .6rem; }
.lp-kachel-kopf { display: flex; align-items: center; gap: .4rem; font-size: .72rem;
                  letter-spacing: .1em; text-transform: uppercase; color: var(--lps-schrift);
                  margin-bottom: .4rem; }
/* Breiter als beim Schwesterportal: dort stehen links CPU/RAM/DISK,
   hier Wortmarken wie „Ueberfaellig" und rechts Eurobetraege. */
.lp-zeile { display: grid; grid-template-columns: 5.2rem 1fr 3.9rem; gap: .4rem;
            align-items: center; font-size: .62rem; color: var(--lps-matt); padding: .09rem 0; }
.lp-z-w { text-align: right; font-variant-numeric: tabular-nums; }
.lp-balken { height: .32rem; border-radius: .2rem; background: var(--lps-leer); overflow: hidden; }
.lp-balken i { display: block; height: 100%; background: var(--lps-lampe); }
.lp-balken i.warn { background: #ee7c1b; }
.lp-balken i.blau { background: #3d5a7c; }

/* --------------------------------------------------------- Belegfluss */
/* Die Kette unter den Kacheln. Der letzte Halt bleibt blass: Die
   Zahlung ist der Zustand, auf den alles zulaeuft, aber noch nicht da. */
.lp-fluss { display: flex; align-items: center; gap: .3rem; margin-top: .75rem;
            padding-top: .7rem; border-top: 1px solid var(--lps-kachelrand); flex-wrap: wrap; }
.lp-halt { font-size: .6rem; letter-spacing: .06em; padding: .16rem .55rem; border-radius: 1rem;
           border: 1px solid var(--lps-kachelrand); background: var(--lps-kachel);
           color: var(--lps-schrift); white-space: nowrap; }
.lp-halt.ok { border-color: color-mix(in srgb, #17924a 45%, var(--lps-kachelrand)); }
.lp-halt.warn { border-color: color-mix(in srgb, #ee7c1b 60%, var(--lps-kachelrand)); }
.lp-halt.offen { color: var(--lps-matt); border-style: dashed; }
.lp-pfeil { flex: 1 1 .6rem; min-width: .5rem; height: 1px; background: var(--lps-kachelrand); }

/* ----------------------------------------------------------- Vertrauen */
.lp-band { border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line);
           background: color-mix(in srgb, var(--m-muted) 7%, var(--m-bg)); padding: 2rem 0; }
.lp-vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.lp-fakt-t { font-size: 1.22rem; font-weight: 700; color: var(--m-accent); letter-spacing: -.01em; }
.lp-fakt p { font-size: .88rem; color: var(--m-muted); margin: .25rem 0 0; }

/* -------------------------------------------------------------- Karten */
.lp-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.lp-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; }
.lp-karte { background: var(--m-card-bg); border: 1px solid var(--m-line); border-radius: .8rem;
            padding: 1.2rem 1.3rem 1.4rem; }
.lp-karte svg { width: 26px; height: 26px; color: var(--m-accent); display: block; }
.lp-karte p { color: var(--m-muted); font-size: .93rem; }
.lp-karte.weg h3 { margin-top: 0; }
.lp-vier.gruende h3 { margin-top: 0; }
.lp-vier.gruende p { color: var(--m-muted); font-size: .91rem; }

/* Die Typ-Chips standen weiss auf dem grauen Band und verschwanden fast.
   Abgesetzt wird ueber Kontur und Hoehe statt ueber Farbe: Das
   Akzent-Orange ergibt ueber Weiss Beige und ueber Dunkelgrau Braun,
   beides will hier niemand. */
.lp-felder { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.lp-felder li { font-size: .84rem; padding: .26rem .7rem; border-radius: 1rem;
                border: 1px solid color-mix(in srgb, var(--m-muted) 45%, var(--m-line));
                background: var(--m-card-bg); color: var(--m-text);
                box-shadow: 0 1px 2px var(--m-shadow); }
.lp-nachsatz { margin-top: 1.4rem; font-size: .93rem; color: var(--m-muted); max-width: 52rem;
               border-left: 3px solid var(--m-accent); padding: .35rem 0 .35rem .8rem; }

/* --------------------------------------------------------- Projektbrett */
/* Farbwerte aus templates/kanban/board.html.twig und der Label-Palette
   in KanbanRepository::LABELS, damit das Brett hier nicht anders
   aussieht als drinnen. Das Stahlblau #3d5a7c ist die Handschrift des
   Bretts und bleibt in beiden Schemata gleich; nur Grund, Flaechen und
   Schrift drehen mit. */
:root {
    --lkb-grund: #eef1f5; --lkb-spalte: #f1f3f7; --lkb-karte: #ffffff;
    --lkb-rand: #d7dce4; --lkb-schrift: #1a1a2e; --lkb-matt: #6b7280;
    --lkb-badge: #eceff4;
}
[data-theme="dark"] {
    --lkb-grund: #121316; --lkb-spalte: #1b1d21; --lkb-karte: #24262b;
    --lkb-rand: #33363d; --lkb-schrift: #eef1f5; --lkb-matt: #9aa1ad;
    --lkb-badge: #2d3037;
}

.lp-brett { background: var(--lkb-grund); border: 1px solid var(--lkb-rand); border-radius: 1rem;
            padding: .8rem; box-shadow: 0 16px 40px var(--m-shadow); color: var(--lkb-schrift); }
.lp-brett-kopf { display: flex; align-items: center; gap: .6rem; font-size: .7rem;
                 letter-spacing: .18em; color: var(--lkb-matt); margin-bottom: .7rem; }
.lp-brett-proj { margin-left: auto; letter-spacing: .04em; color: var(--lkb-schrift);
                 font-weight: 600; text-transform: none; }
.lp-spalten { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.lp-spalte { background: var(--lkb-spalte); border: 1px solid var(--lkb-rand);
             border-radius: .55rem; padding: .45rem; }
.lp-spalte-kopf { display: flex; align-items: center; gap: .4rem; font-size: .68rem;
                  font-weight: 600; color: var(--lkb-schrift); margin: .1rem .15rem .45rem; }
.lp-spalte-n { margin-left: auto; font-size: .6rem; color: var(--lkb-matt);
               font-variant-numeric: tabular-nums; }
.lp-kkarte { background: var(--lkb-karte); border: 1px solid var(--lkb-rand); border-radius: .4rem;
             padding: .35rem .45rem; margin-bottom: .35rem; }
.lp-kkarte:last-child { margin-bottom: 0; }
.lp-klabel { display: block; width: 2.2rem; height: .34rem; border-radius: .2rem; margin-bottom: .25rem; }
.lp-ktitel { font-size: .68rem; line-height: 1.3; }
.lp-kfuss { display: flex; align-items: center; gap: .25rem; margin-top: .3rem; }
.lp-kbadge { font-size: .56rem; background: var(--lkb-badge); border-radius: .5rem;
             padding: .04rem .35rem; color: var(--lkb-matt); white-space: nowrap; }
.lp-kbadge.spaet { background: #f6e3e1; color: #c0392b; }
.lp-kbadge.fertig { background: #e3f1ea; color: #2e7d5b; }
.lp-kavatar { margin-left: auto; width: 1.15rem; height: 1.15rem; aspect-ratio: 1; border-radius: 50%;
              background: #3d5a7c; color: #fff; font-size: .5rem; font-weight: 700;
              display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lp-vier.gruende.brett { margin-top: 2.2rem; }
@media (max-width: 760px) { .lp-spalten { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------- Vertrieb und Fibu */
.lp-punkte { list-style: none; margin: 1rem 0 0; padding: 0; }
.lp-punkte li { position: relative; padding: .22rem 0 .22rem 1.2rem; font-size: .92rem; color: var(--m-muted); }
.lp-punkte li::before { content: ''; position: absolute; left: 0; top: .68rem;
                        width: .42rem; height: .42rem; border-radius: 50%; background: var(--m-accent); }
.lp-vertrieb { align-items: center; margin-bottom: 3rem; }
.lp-fibu { align-items: center; }

/* Der Trichter: eine Stufe je Vertriebsphase, Breite nach Anzahl.
   Die Balken sind absichtlich nicht proportional zum Wert - der Wert
   steht daneben, die Breite zeigt die Menge. */
.lp-trichter { max-width: 27rem; margin: 0 auto; }
.lp-stufe { display: grid; grid-template-columns: 6.2rem 1fr 4.4rem; gap: .5rem;
            align-items: center; font-size: .82rem; padding: .3rem 0; }
.lp-stufe-n { color: var(--lps-schrift); }
.lp-stufe-b { height: .62rem; border-radius: .31rem; background: var(--lps-leer); overflow: hidden; }
.lp-stufe-b i { display: block; height: 100%; background: #3d5a7c; }
.lp-stufe-b i.gewonnen { background: #17924a; }
.lp-stufe-b i.verloren { background: color-mix(in srgb, var(--m-muted) 60%, transparent); }
.lp-stufe-w { text-align: right; font-size: .76rem; color: var(--lps-matt);
              font-variant-numeric: tabular-nums; }

.lp-befund { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center;
             padding: .5rem 0; border-top: 1px solid var(--lps-kachelrand); font-size: .84rem; }
.lp-befund:first-of-type { border-top: 0; }
.lp-punkt { width: .5rem; height: .5rem; aspect-ratio: 1; border-radius: 50%; background: #17924a; }
.lp-punkt.warn { background: #ee7c1b; }
.lp-punkt.rot { background: #c0392b; }
.lp-punkt.info { background: #3d5a7c; }
.lp-bef-t { color: var(--lps-schrift); }
.lp-bef-o { color: var(--lps-matt); font-size: .74rem; white-space: nowrap; }

/* ------------------------------------------------------------ Kalender */
.lp-buch { background: var(--m-card-bg); border: 1px solid var(--m-line); border-radius: .8rem;
           padding: 1rem 1.2rem 1.2rem; box-shadow: 0 10px 26px var(--m-shadow); }
.lp-buch-kopf { font-size: .72rem; letter-spacing: .18em; color: var(--m-muted);
                padding-bottom: .6rem; border-bottom: 1px solid var(--m-line); margin-bottom: .3rem; }
.lp-kapitel { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .6rem;
              align-items: baseline; padding: .42rem 0; border-bottom: 1px solid var(--m-line); }
.lp-kapitel:last-child { border-bottom: 0; }
.lp-nr { color: var(--m-accent); font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }
.lp-kap-t { font-size: .93rem; }
.lp-kap-q { font-size: .7rem; color: var(--m-muted); white-space: nowrap; }

/* ------------------------------------------------------------- Schluss */
.lp-schluss { padding: 3.4rem 0 4rem; border-top: 1px solid var(--m-line); }
.lp-schluss p { color: var(--m-muted); max-width: 40rem; margin: .4rem 0 1.6rem; }

@media (max-width: 900px) {
    .lp-hero-raster, .lp-zwei { grid-template-columns: 1fr; gap: 2.2rem; }
    .lp-drei { grid-template-columns: 1fr; }
    .lp-vier { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
}
@media (max-width: 560px) {
    .lp-vier { grid-template-columns: 1fr; }
    .lp-kacheln { grid-template-columns: 1fr; }
}
        .hero .pubform input { width: 100%; padding: .5rem .6rem; margin: .3rem 0; border: 1px solid var(--m-field-line); border-radius: 6px; background: var(--m-bg); color: var(--m-text); }
        .hero .pubform button { background:var(--m-accent-btn); color:var(--m-on-accent); border: 0; padding: .5rem 1.1rem; border-radius: 6px; cursor: pointer; font: inherit; }
        .pubflash { max-width: 62ch; margin: 1rem auto; padding: .55rem .8rem; border-radius: 6px; font-size: .92rem; }
        .pubflash.error { background: #b0413e; color: #fff; }
        .pubflash.success { background: #17924a; color: #fff; }
        .pubflash.info { border: 1px solid var(--m-line); color: var(--m-text); }
    
/* Nacht: Schirme im Dunkelblau der Familie statt im alten Grau */
[data-theme="dark"] { --lps-flaeche: #111A2E; --lps-rand: #243149; --lps-kachel: #0E1627; --lps-kachelrand: #243149; --lps-leer: #243149;
  --lkb-grund: #0E1627; --lkb-spalte: #111A2E; --lkb-karte: #15203A; --lkb-rand: #243149; --lkb-badge: #1C2842; }