/* =====================================================================
   Ergaenzungen fuer den OEFFENTLICHEN Rechner.
   stil.css kommt zeichengleich aus dem CRM-Kalkulator und wird von
   bau-aus-crm.js ueberschrieben - alles Eigene gehoert hierher.
   ===================================================================== */

/* CI-SCHICHT BEGINN — Corporate Blue, Stand 15.09.2026 (Freigabe Steffen).
   Liegt UEBER dem geteilten Stilblock aus crm-angebot.html: der
   Hyperblock-Kalkulator bleibt gruen, nur die PN-Rechner werden blau.
   Zeichengleich in public/eigen.css (oeffentlich) und in
   vorlagen-crm-angebot-pn250.html (CRM); beide Proben vergleichen das.
   Die alten Variablennamen zeigen auf die neuen Farben, damit nicht jede
   Regel des geteilten Blocks einzeln ueberschrieben werden muss.
   --pos und --neg bleiben: sie faerben Tabellenwerte. */
:root{
  --primary:#0D47A1; --primary-dark:#0B1320; --primary-light:#1976D2; --highlight:#29B6F6;
  --accent:#FF8A00; --accent-yellow:#FFC107; --bg-light:#F2F4F7; --white:#FFFFFF;
  --green:var(--primary); --green-soft:var(--primary-light);
  --sun-orange:var(--accent); --sun-amber:var(--accent-yellow); --paper:var(--bg-light);
}
.topbar{background:var(--primary-dark);border-bottom:3px solid var(--accent)}
.topbar .title{color:#C9D3E3}
.topbar .logopaar{display:flex;align-items:center;gap:10px}
.topbar .logokasten{background:#FFFFFF;border-radius:6px;padding:6px 10px;display:flex;align-items:center}
.topbar .logokasten img{height:40px;width:auto;display:block}
.topbar .logomal{color:#FFFFFF;font-size:20px;font-weight:600;line-height:1}
@media(max-width:700px){.topbar .logokasten{padding:4px 7px}.topbar .logokasten img{height:28px}.topbar .logomal{font-size:15px}}
.btn-primary:hover{background:#E67A00}
.card h2,.section-t{color:var(--primary)}
.kpibar .v{color:var(--primary)}
.fintable th,.postable th{color:var(--primary)}
.fintable tbody tr:nth-child(even) td{background:var(--bg-light)}
.fintable tr.hl td{background:var(--bg-light);color:var(--primary)}
.fintable tr.big td{border-top-color:var(--accent)}
.preistable tr.summe td{border-top-color:var(--accent)}
.umfang li:before{color:var(--primary)}
a{color:var(--primary-light)}
.seg button:hover,.viewtoggle button:hover,.zeitseg button:hover{color:var(--highlight)}
/* CI-SCHICHT ENDE */

/* --- Festpreis-Uebersicht. Uebernommen aus der CRM-PN250-Vorlage:
       es gibt keine Positionen, die man aufaddieren koennte, also auch
       keine Positionstabelle mit Mengen und Einzelpreisen. --- */
.preistable{width:100%;border-collapse:collapse;font-size:14px}
.preistable td{padding:11px 8px;border-bottom:1px solid var(--line)}
.preistable td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.preistable tr.summe td{border-top:2px solid var(--accent);border-bottom:none;font-weight:800;font-size:16px;padding-top:13px}
.preistable tr.summe td.num{color:var(--sun-orange)}
.preistable .sub{display:block;font-size:11px;color:var(--mute);font-weight:400;margin-top:2px}
.umfang{list-style:none;margin:14px 0 0;padding:13px 0 0;border-top:1px dotted var(--line);
        display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;font-size:12.5px;color:var(--ink-soft)}
@media(max-width:700px){.umfang{grid-template-columns:1fr}}
.umfang li{padding-left:18px;position:relative}
/* Haekchen blau seit 15.09.2026 (Entscheidung Steffen): es ist eine
   Aufzaehlung, kein "positiver Wert". */
.umfang li:before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700}

/* --- Pflichtanzeige. Dezent, aber nicht uebersehbar: eigener Rahmen in
       Amber, volle Breite ueber beide Spalten, direkt unter dem Header
       und VOR dem Rechner. Kein Wegklicken - ein Hinweis, den man
       schliessen kann, ist beim zweiten Besuch nicht mehr da. --- */
.pflichthinweis{max-width:1400px;margin:20px auto 0;padding:0 20px}
.pflichthinweis .kasten{
  background:#FFF4E5;border:1px solid #FFC58A;border-left:4px solid var(--accent);
  border-radius:10px;padding:13px 16px;display:flex;gap:12px;align-items:flex-start}
.pflichthinweis .zeichen{color:var(--sun-orange);font-size:17px;line-height:1.2;flex:none}
.pflichthinweis .text{font-size:13px;color:var(--ink);line-height:1.55}
.pflichthinweis .text b{color:var(--green)}
@media(max-width:700px){.pflichthinweis{padding:0 14px;margin-top:14px}.pflichthinweis .text{font-size:12.5px}}

/* --- Handlungsaufruf. Volle Breite, auf Mobile ebenso. --- */
.cta-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.cta{display:block;width:100%;background:var(--sun-orange);color:#fff;border:none;border-radius:10px;
     padding:16px 22px;font-size:16px;font-weight:800;cursor:pointer;text-decoration:none;
     transition:.15s;letter-spacing:.01em}
.cta:hover{background:#E67A00}
.cta-fuss{font-size:11.5px;color:var(--ink-soft);margin-top:10px;line-height:1.6}
.cta-fuss span{white-space:nowrap}
.cta-fuss .trenner{color:var(--line);margin:0 7px}
@media(max-width:700px){.cta-fuss .trenner{display:none}.cta-fuss span{display:block}}

/* --- PDF-Knopf --- */
.pdfzeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn-pdf{background:var(--green);color:#fff;border:none;border-radius:9px;padding:12px 18px;
         font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.btn-pdf:hover{background:var(--green-soft)}
.btn-pdf:disabled{opacity:.55;cursor:progress}
.pdfmeldung{font-size:12px}
.pdfmeldung.fehler{color:var(--neg);font-weight:600}
.pdfmeldung.ok{color:var(--pos);font-weight:600}
@media(max-width:700px){.btn-pdf{width:100%}}

/* --- Der Grund, warum die Seite auf dem Handy ueberhaupt passt.

       Gemessen am 05.09.2026 bei 512 px: die Seite lief horizontal ueber
       (scrollWidth 738 bei Viewport 485), und zwar BEIDE Spalten
       gleichzeitig auf 724 px - also kein zu breites Einzelelement,
       sondern die Rasterspur selbst.

       Ursache: `grid-template-columns:1fr` ist `minmax(auto,1fr)`, und
       dieses `auto` laesst die Spur nicht unter die min-content-Breite
       ihres Inhalts schrumpfen. Der Inhalt ist hier die 20-Spalten-
       Jahrestabelle. Sie steht zwar in `.tblscroll` mit
       `overflow-x:auto` - aber ein Scrollcontainer hilft nur, wenn die
       Spur ihn auch schmaler machen DARF.

       `min-width:0` erlaubt genau das. Danach scrollt die Tabelle in
       ihrem eigenen Kasten (gemessen: TABLE 692 px in TBLSCROLL 425 px)
       und die SEITE scrollt gar nicht mehr.

       Im CRM ist das nie aufgefallen - der Kalkulator dort ist ein
       internes Werkzeug am Schreibtisch. Diese Seite ist mobile first.
       probe-mobil.js misst es nach, mit Gegenprobe ohne diese Zeile. --- */
.wrap > .col { min-width: 0; }

/* --- Mobile: die 330px-Eingabespalte des CRM-Kalkulators klappt schon
       ueber stil.css auf eine Spalte um (max-width:1100px). Hier nur die
       Feinheiten, die auf kleinen Geraeten sonst zu eng werden. --- */
@media(max-width:700px){
  .wrap{padding:14px;gap:14px}
  .card{padding:15px}
  .topbar{padding:11px 14px;gap:10px}
  .topbar .title{font-size:11px}
  .kpibar{grid-template-columns:1fr 1fr;gap:9px}
  .kpibar .v{font-size:18px}
  .chart-wrap{height:210px}
}
@media(max-width:420px){
  .kpibar{grid-template-columns:1fr}
}

/* --- Fusszeile --- */
.seitenfuss{max-width:1400px;margin:0 auto;padding:6px 20px 34px;font-size:11.5px;color:var(--mute);line-height:1.7}
.seitenfuss a{color:var(--ink-soft)}
@media(max-width:700px){.seitenfuss{padding:6px 14px 28px}}

/* =====================================================================
   ABLAUF: ERST EINSTELLEN, DANN RECHNEN  (06.09.2026)

   Vorher standen Einstellungen und Ergebnisse nebeneinander und alles war
   sofort da. Jetzt fuehrt ein Knopf vom einen zum anderen.
   ===================================================================== */

/* Vor dem ersten Rechnen gibt es nur eine Spalte - die 330px-Eingabe-
   spalte aus stil.css saehe sonst neben einer leeren Flaeche aus wie ein
   halb geladenes Bild. Begrenzt und mittig, damit die Regler auf einem
   breiten Bildschirm nicht auseinandergezogen werden. */
.wrap.nur-eingabe{grid-template-columns:minmax(0,620px);justify-content:center}

/* [hidden] muss das display:flex der Spalte schlagen. */
#ergebnisse[hidden]{display:none}

/* --- Der Rechnen-Knopf. Bewusst NICHT im Sunrise-Orange: das ist die
       Farbe des Handlungsaufrufs ("Paket sichern"), und eine Seite mit
       zwei orangen Vollflaechen-Knoepfen laesst offen, welcher der
       Abschluss ist. Der hier ist ein Zwischenschritt und traegt deshalb
       das Blau der Marke (bis 15.09.2026 Gruen). --- */
.rechnenzeile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center}
.btn-rechnen{display:block;width:100%;background:var(--green);color:#fff;border:none;border-radius:10px;
             padding:15px 20px;font-size:15px;font-weight:800;cursor:pointer;transition:.15s;letter-spacing:.01em}
.btn-rechnen:hover{background:var(--green-soft)}
.rechnenzeile[hidden]{display:none}
.rechnenzeile .hint{margin-top:9px}

/* --- Hinweis auf einen veralteten Ergebnisteil. Orange und mit Rahmen:
       Er soll gesehen werden, ohne wie ein Fehler auszusehen - die Zahlen
       sind ja nicht falsch, sie sind nur von vorhin. --- */
.veraltet{background:rgba(255,138,0,.08);border:1px solid rgba(255,138,0,.45);border-radius:10px;
          padding:12px 15px;font-size:12.5px;color:var(--ink);line-height:1.55}
.veraltet b{color:var(--green)}
.veraltet[hidden]{display:none}

/* --- Preisbox. Der Gesamtpreis ist die Zahl, wegen der die Seite
       aufgerufen wird; er stand vorher klein in einer Tabellenzeile im
       Ergebnisteil und damit hinter dem Rechnen-Knopf.

       Auffaellig ueber Groesse und eine orange Kante, nicht ueber eine
       orange Flaeche: Der Balken zieht das Auge, ohne dass die Zahl wie
       ein Werbeschild wirkt. --- */
.preisbox{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--sun-orange);
          border-radius:12px;padding:18px 20px}
.preisbox-k{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.preisbox-v{font-size:34px;font-weight:800;color:var(--green);line-height:1.15;margin-top:5px;
            font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.preisbox-sub{font-size:12px;color:var(--ink-soft);margin-top:5px;line-height:1.5}
.preisbox-paket{font-size:11.5px;color:var(--ink-soft);margin-top:11px;padding-top:10px;
                border-top:1px dotted var(--line);line-height:1.55}
.preisbox-paket b{color:var(--green)}
@media(max-width:700px){
  .preisbox{padding:15px 16px}
  .preisbox-v{font-size:29px}
}

/* --- Turboabschreibung: Erklaerung und Vorbehalt ---------------------
       Beide erscheinen NUR, wenn der Schalter an ist. Ein Warnkasten,
       der immer dasteht, wird nach dem dritten Besuch nicht mehr
       gelesen — und dann traegt er nichts mehr.

       Der Vorbehalt ist rot und nicht orange: Orange ist auf dieser
       Seite die Marken- und Hinweisfarbe (Preisbox, Veraltet-Hinweis).
       Eine Warnung in derselben Farbe wie ein Preis ist keine Warnung.

       `[hidden]` steht hier ausdruecklich mit `!important`: der
       Behaelter liegt in einer Karte, und eine Autor-Regel mit
       `display:flex` wuerde die eingebaute [hidden]-Regel des Browsers
       schlagen — genau der Fehler vom 06.09.2026 beim Ergebnisteil. --- */
#turbo_infos[hidden]{display:none !important}
.turbo-erklaerung{margin-top:10px;background:var(--bg-light);border:1px solid var(--line);
                  border-left:3px solid var(--green);border-radius:9px;
                  padding:11px 13px;font-size:12px;line-height:1.6;color:var(--ink-soft)}
.turbo-warnung{margin-top:9px;background:#FCEDEA;border:1px solid #E3A79A;
               border-left:4px solid #C0492F;border-radius:9px;
               padding:11px 13px;font-size:12px;line-height:1.6;color:#7A2E1E;font-weight:600}