/* =====================================================================
   MVP – gemeinsame Stil-Datei für alle Kacheln (angelegt 13.11.2026)
   Herkunft: Tempel-Hauptmaske und Erklärseiten (~/beratung-v2/folien2.css).
   Leitbild: Projektdokument „mvp-leitbild-und-fahrplan“, Abschnitt 2.

   Einbinden:  <link rel="stylesheet" href="/stil/mvp-stil.css">
               <body class="mvp werkbank">   oder   <body class="mvp buehne">

   Aufbau:  1 Schriften · 2 Werte (Tokens) · 3 Grund · 4 Text · 5 Karten
            6 Knöpfe · 7 Eingaben · 8 Marken und Ampel · 9 Tabellen
            10 Kennzahl · 11 Lage-Satz · 12 Leiste und Reiter
            13 Leer-, Lade-, Fehlerzustand · 14 Bewegung · 15 Druck
   Regel:   Kacheln nutzen nur die Werte aus Abschnitt 2 – keine eigenen
            Farben, Schatten, Radien oder Schriftgrößen.
   ===================================================================== */

/* ---------- 1 Schriften (lokal, keine fremden Server) ---------- */
@font-face{font-family:Fraunces;src:url(../fonts/fraunces-latin-full-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* ---------- 2 Werte ---------- */
/* Die Werte gelten überall (:root). Die Bausteine ab Abschnitt 3 greifen nur unter .mvp –
   so kann eine bestehende Kachel zuerst nur die Werte übernehmen und die Bausteine Schritt für Schritt. */
:root,.mvp{
  /* Farben */
  --bordeaux:#9F011F; --bordeaux-hell:#b3142f; --bordeaux-tief:#7d0a1e;
  --navy:#1F2A37; --navy-hell:#2f3d4f; --navy-tief:#141b23;
  --creme:#f6f1e8; --sand:#efe6d8; --sand-tief:#e2d5c1;
  --messing:#cfae6f; --messing-hell:#e2c58a; --messing-tief:#a8854a;
  --text:#241C1C; --text-2:#4a4038; --text-3:#7b7067; --text-4:#a39686;
  --linie:rgba(120,100,80,.16); --linie-stark:rgba(120,100,80,.28);
  /* Zustände (Ampel) – immer mit Wort oder Symbol, nie Farbe allein */
  --gut:#2f7d5b; --gut-grund:rgba(47,125,91,.11);
  --achtung:#a8751a; --achtung-grund:rgba(207,174,111,.24);
  --kritisch:#9F011F; --kritisch-grund:rgba(159,1,31,.09);
  --ruhig:#7b7067; --ruhig-grund:rgba(120,100,80,.1);
  /* Flächen */
  --grund:linear-gradient(120deg,var(--creme) 0%,var(--sand) 46%,var(--sand-tief) 100%);
  --glas:rgba(255,255,255,.74); --glas-rand:rgba(255,255,255,.85);
  --flaeche:rgba(255,255,255,.55);
  --dunkel:linear-gradient(150deg,#263342,var(--navy-tief));
  --rot:linear-gradient(150deg,var(--bordeaux-hell),#74091b);
  --gold:linear-gradient(145deg,#d9bb7c,var(--messing-tief));
  /* Schrift */
  --serif:Fraunces,Georgia,serif; --sans:Inter,system-ui,-apple-system,sans-serif;
  --s-klein:12px; --s-text:14px; --s-gross:16px; --s-h3:19px; --s-h2:26px; --s-h1:38px; --s-zahl:34px;
  /* Abstände (4er-Raster) */
  --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:32px; --a7:48px;
  /* Radien */
  --r-klein:8px; --r:14px; --r-gross:20px; --r-rund:999px;
  /* Tiefe */
  --schatten-1:0 1px 2px rgba(70,50,30,.06),0 4px 14px rgba(70,50,30,.07);
  --schatten-2:0 2px 8px rgba(70,50,30,.08),0 18px 40px rgba(70,50,30,.13);
  --schatten-dunkel:0 20px 44px rgba(20,27,35,.3);
  --schatten-rot:0 8px 20px rgba(159,1,31,.28);
  /* Bewegung */
  --weich:cubic-bezier(.2,.7,.2,1); --dauer:.28s; --dauer-lang:.7s;
}

/* ---------- 3 Grund ---------- */
.mvp,.mvp *{box-sizing:border-box}
body.mvp{margin:0;min-height:100vh;background:var(--grund) fixed;color:var(--text);font:400 var(--s-text)/1.5 var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
/* Bühne: Kunde schaut mit – viel Raum, große Schrift.  Werkbank: Team arbeitet – ruhig und dicht. */
.mvp.buehne{--s-text:17px;--s-gross:20px;--s-h3:24px;--s-h2:34px;--s-h1:54px;--s-zahl:52px;--a4:20px;--a5:32px;--a6:44px;--r:20px;--r-gross:26px}
.mvp.werkbank{--glas:rgba(255,255,255,.82)}
.mvp ::selection{background:rgba(159,1,31,.16)}
.mvp :focus-visible{outline:2px solid var(--bordeaux);outline-offset:2px;border-radius:var(--r-klein)}

/* ---------- 4 Text ---------- */
.mvp h1,.mvp .h1{margin:0;font:600 var(--s-h1)/1.05 var(--serif);letter-spacing:-.015em;color:var(--navy)}
.mvp h2,.mvp .h2{margin:0;font:600 var(--s-h2)/1.12 var(--serif);letter-spacing:-.01em;color:var(--navy)}
.mvp h3,.mvp .h3{margin:0;font:600 var(--s-h3)/1.2 var(--serif);color:var(--navy)}
.mvp p{margin:0}
.mvp .leise{color:var(--text-3)}
.mvp .kopfzeile{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.mvp .kopfzeile.rot{color:var(--bordeaux);display:flex;align-items:center;gap:10px}
.mvp .kopfzeile.rot::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--bordeaux)}
.mvp .zahl{font:600 var(--s-zahl)/1 var(--serif);letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums}
.mvp .ziffern{font-variant-numeric:tabular-nums}

/* ---------- 5 Karten ---------- */
.mvp .karte{background:var(--glas);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);border:1px solid var(--glas-rand);border-radius:var(--r-gross);box-shadow:var(--schatten-2),inset 0 1px 0 rgba(255,255,255,.9);padding:var(--a5)}
.mvp .karte.flach{box-shadow:var(--schatten-1);border-radius:var(--r)}
.mvp .karte.eng{padding:var(--a4)}
.mvp .karte.dunkel{background:var(--dunkel);border-color:rgba(255,255,255,.12);box-shadow:var(--schatten-dunkel);color:#c9d0d8}
.mvp .karte.dunkel h1,.mvp .karte.dunkel h2,.mvp .karte.dunkel h3,.mvp .karte.dunkel .zahl{color:#fff}
.mvp .karte.dunkel .kopfzeile,.mvp .karte.dunkel .akzent{color:var(--messing-hell)}
.mvp .karte.dunkel .leise{color:#9aa5b1}
.mvp .karte.rot{background:var(--rot);border-color:rgba(255,255,255,.14);box-shadow:0 20px 44px rgba(116,9,27,.32);color:#f3d6db}
.mvp .karte.rot h2,.mvp .karte.rot h3,.mvp .karte.rot .zahl{color:#fff}
.mvp .karte-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--a4);margin-bottom:var(--a4)}
.mvp .trenner{height:1px;background:var(--linie);border:0;margin:var(--a4) 0}

/* ---------- 6 Knöpfe ---------- */
.mvp .knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--a2);height:38px;padding:0 var(--a4);border-radius:var(--r-rund);border:1px solid var(--linie-stark);background:var(--flaeche);color:var(--navy);font:600 13px/1 var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--dauer) var(--weich),box-shadow var(--dauer) var(--weich),background var(--dauer)}
.mvp .knopf:hover{background:#fff;transform:translateY(-1px);box-shadow:var(--schatten-1)}
.mvp .knopf:active{transform:none}
.mvp .knopf.haupt{background:var(--rot);border-color:transparent;color:#fff;box-shadow:var(--schatten-rot)}
.mvp .knopf.navy{background:var(--dunkel);border-color:transparent;color:#fff}
.mvp .knopf.still{background:transparent;border-color:transparent;color:var(--text-2)}
.mvp .knopf.still:hover{background:var(--ruhig-grund);box-shadow:none}
.mvp .knopf.klein{height:30px;padding:0 var(--a3);font-size:12px}
.mvp .knopf[disabled]{opacity:.45;pointer-events:none}
.mvp .knopf svg,.mvp .symbol{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- 7 Eingaben ---------- */
.mvp .feld{display:flex;flex-direction:column;gap:6px}
.mvp .feld>span{font:600 12px/1.2 var(--sans);color:var(--text-2)}
.mvp input.eingabe,.mvp select.eingabe,.mvp textarea.eingabe{width:100%;min-height:40px;padding:9px 12px;border-radius:var(--r-klein);border:1px solid var(--linie-stark);background:rgba(255,255,255,.8);color:var(--text);font:400 var(--s-text)/1.4 var(--sans);transition:border-color var(--dauer),box-shadow var(--dauer)}
.mvp .eingabe:focus{outline:0;border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(159,1,31,.14)}
.mvp .eingabe::placeholder{color:var(--text-4)}
.mvp .feld.fehler .eingabe{border-color:var(--kritisch)}
.mvp .feld .hinweis{font-size:12px;color:var(--text-3)}
.mvp .feld.fehler .hinweis{color:var(--kritisch)}

/* ---------- 8 Marken, Ampel, Köpfe ---------- */
.mvp .marke{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-rund);background:var(--ruhig-grund);color:var(--text-2);font:600 12px/1 var(--sans);white-space:nowrap}
.mvp .marke::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.mvp .marke.ohne::before{display:none}
.mvp .marke.gut{background:var(--gut-grund);color:var(--gut)}
.mvp .marke.achtung{background:var(--achtung-grund);color:var(--achtung)}
.mvp .marke.kritisch{background:var(--kritisch-grund);color:var(--kritisch)}
.mvp .marke.navy{background:var(--navy);color:#fff}
.mvp .marke.gold{background:rgba(207,174,111,.22);color:#7a5c22}
.mvp .kopf{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--dunkel);color:#fff;font:600 12px/1 var(--sans);box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.mvp .kopf.rot{background:var(--rot)} .mvp .kopf.gold{background:var(--gold);color:#3a2c10}
.mvp .kopf.gross{width:44px;height:44px;font-size:15px} .mvp .kopf.klein{width:24px;height:24px;font-size:10px}

/* ---------- 9 Tabellen und Listen ---------- */
.mvp table.liste{width:100%;border-collapse:collapse;font-size:var(--s-text)}
.mvp .liste th{padding:0 var(--a3) var(--a2);text-align:left;font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--linie-stark)}
.mvp .liste td{padding:var(--a3);border-bottom:1px solid var(--linie);vertical-align:middle}
.mvp .liste tr:last-child td{border-bottom:0}
.mvp .liste tbody tr{transition:background var(--dauer)}
.mvp .liste tbody tr:hover{background:rgba(255,255,255,.6)}
.mvp .liste .rechts{text-align:right}
.mvp .zeile{display:flex;align-items:center;gap:var(--a3);padding:var(--a3) 0;border-bottom:1px solid var(--linie)}
.mvp .zeile:last-child{border-bottom:0}
.mvp .zeile .wachs{flex:1;min-width:0}
.mvp .zeile b{display:block;font-weight:600;color:var(--navy)}
.mvp .zeile small{display:block;font-size:12px;color:var(--text-3)}

/* ---------- 10 Kennzahl ---------- */
.mvp .kennzahl{display:flex;flex-direction:column;gap:6px}
.mvp .kennzahl small{font:500 12px/1.3 var(--sans);color:var(--text-3)}
.mvp .kennzahl .lauf{font:600 12px/1 var(--sans);color:var(--gut)}
.mvp .kennzahl .lauf.ab{color:var(--kritisch)}
.mvp .balken{height:6px;border-radius:3px;background:var(--ruhig-grund);overflow:hidden}
.mvp .balken>i{display:block;height:100%;border-radius:3px;background:var(--navy)}
.mvp .balken.rot>i{background:var(--bordeaux)} .mvp .balken.gold>i{background:var(--messing)}

/* ---------- 11 Lage-Satz (ein Satz sagt, was los ist und was als Nächstes dran ist) ---------- */
.mvp .lage{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--a5)}
.mvp .lage h1 em{font-style:normal;color:var(--bordeaux)}
.mvp .karte.dunkel .lage h1 em{color:var(--messing-hell)}
.mvp .lage h1 span{color:var(--text-3)}
.mvp .karte.dunkel .lage h1 span{color:#8f9aa6}

/* ---------- 12 Seitenleiste und Reiter ---------- */
.mvp .leiste{display:flex;flex-direction:column;gap:2px;width:232px;padding:var(--a4) var(--a3);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-right:1px solid rgba(255,255,255,.7)}
.mvp .leiste a{display:flex;align-items:center;gap:var(--a3);height:36px;padding:0 var(--a3);border-radius:var(--r-klein);color:var(--text-2);font:500 14px/1 var(--sans);text-decoration:none;transition:background var(--dauer)}
.mvp .leiste a:hover{background:rgba(255,255,255,.7)}
.mvp .leiste a.an{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(31,42,55,.24)}
.mvp .leiste a .anzahl{margin-left:auto;font:600 12px/1 var(--sans);opacity:.7}
.mvp .reiter{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-rund);background:rgba(255,255,255,.55);border:1px solid var(--linie)}
.mvp .reiter button{height:30px;padding:0 14px;border:0;border-radius:var(--r-rund);background:transparent;color:var(--text-2);font:600 13px/1 var(--sans);cursor:pointer;transition:background var(--dauer),color var(--dauer)}
.mvp .reiter button.an{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(31,42,55,.24)}

/* ---------- 13 Leer-, Lade-, Fehlerzustand ---------- */
.mvp .leer{display:flex;flex-direction:column;align-items:center;gap:var(--a2);padding:var(--a6) var(--a5);text-align:center;color:var(--text-3);border:1px dashed var(--linie-stark);border-radius:var(--r)}
.mvp .leer b{font:600 var(--s-h3)/1.2 var(--serif);color:var(--navy)}
.mvp .laden{border-radius:var(--r-klein);background:linear-gradient(90deg,rgba(120,100,80,.1) 25%,rgba(255,255,255,.6) 50%,rgba(120,100,80,.1) 75%);background-size:300% 100%;animation:mvp-laden 1.6s linear infinite;min-height:14px}
@keyframes mvp-laden{from{background-position:100% 0}to{background-position:0 0}}
.mvp .meldung{display:flex;align-items:flex-start;gap:var(--a3);padding:var(--a3) var(--a4);border-radius:var(--r);background:var(--kritisch-grund);border:1px solid rgba(159,1,31,.2);color:var(--bordeaux-tief);font-weight:500}
.mvp .meldung.gut{background:var(--gut-grund);border-color:rgba(47,125,91,.25);color:var(--gut)}
.mvp .meldung.achtung{background:var(--achtung-grund);border-color:rgba(168,117,26,.25);color:#7a5c22}

/* ---------- 14 Bewegung: weich einblenden, nichts blitzt, nichts flackert ---------- */
/* Versteckt wird vor dem ersten Zeichnen (Klasse steht schon im HTML), nie erst per Skript danach. */
.mvp .ein{animation:mvp-ein var(--dauer-lang) var(--weich) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes mvp-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mvp .aus{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.mvp *,.mvp *::before,.mvp *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* ---------- 15 Druck ---------- */
@media print{
  body.mvp{background:#fff}
  .mvp .karte{box-shadow:none;border:1px solid #ddd;-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff;break-inside:avoid}
  .mvp .leiste,.mvp .knopf,.mvp .nicht-drucken{display:none!important}
}