/* ===========================================================================
   LORO-X Kaskadenkonfigurator
   Ergänzt das zentrale Design-System (templates/css/style.css). Farben nur über
   dessen Vorgaben, hier keine eigenen Markenfarben.
   Mobile first: Tabellen scrollen waagerecht in ihrem eigenen Kasten, die Seite
   selbst scrollt nie seitwärts.
   Stand: 2026-07-22
   =========================================================================== */

.kask-tool { max-width: 1200px; }

.kask-block { margin-bottom: 1.25rem; }

.kask-block-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.kask-block-kopf h2 {
    margin: 0;
    font-size: 1.1rem;
}

.kask-block-zusatz {
    font-size: .9rem;
    opacity: .8;
}

/* ---------- Tabellen ---------- */
/* Eigener Scrollbereich: sonst schiebt die breite Eingabetabelle auf dem Handy
   die ganze Seite zur Seite. */
.kask-tabelle-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kask-tabelle-wrap table {
    min-width: 640px;
    margin-bottom: .5rem;
}

.kask-ebenen input.form-control {
    padding: .25rem .4rem;
    font-size: .95rem;
}

.kask-zahl { text-align: right; }

.kask-sp-zahl { text-align: right; white-space: nowrap; }

.kask-sp-nr { white-space: nowrap; }

.kask-sp-weg { width: 1%; }

.kask-rolle {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
}

/* Entfernen-Kreuz: unauffällig, erst beim Überfahren deutlich */
.kask-weg {
    border: none;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: .45;
    padding: 0 .3rem;
}

.kask-weg:hover { opacity: 1; }

/* ---------- Ergebnis ---------- */
/* Die Zeile, ab der Hochleistung nötig wird, muss ins Auge fallen - das ist die
   Stelle, an der es teurer wird. */
.kask-zeile-hoch > td { background: #e8eff9; }

.kask-zeile-ueberlast > td { font-weight: 700; }

.kask-hinweiszeile > td {
    padding-top: 0;
    font-size: .9rem;
}

.kask-hw-grenze,
.kask-hw-ueberlast { display: inline-block; }

.kask-neutral {
    opacity: .7;
    font-style: italic;
}

.kask-strang-titel {
    font-size: 1rem;
    margin: .75rem 0 .35rem;
}

.kask-ergebnis tfoot td { border-top: 2px solid currentColor; }

/* ---------- Meldungen ---------- */
.kask-hinweis,
.kask-meldung {
    padding: .5rem .75rem;
    border-radius: 4px;
    margin: .5rem 0;
}

.kask-meldung-ok,
.kask-hinweis-info { background: #f8f9fa; }

.kask-leer {
    padding: .75rem 0;
    font-style: italic;
    opacity: .8;
}

.kask-fussnote {
    font-size: .88rem;
    opacity: .85;
    margin: .35rem 0;
}

/* Projektkennung im Kopf: unaufdringlich, aber jederzeit ablesbar - sie ist
   der Schluessel, unter dem der Stand gespeichert wird. */
.kask-projektzeile {
    font-size: .88rem;
    opacity: .85;
    margin: .5rem 0 0;
}

/* ---------- Bedienung ---------- */
.kask-knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.kask-regen {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-end;
}

.kask-regen label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
}

.kask-regen input {
    width: 7rem;
}

.kask-regen .kask-fussnote {
    flex-basis: 100%;
    font-weight: 400;
}

/* ---------- Regelwerk ---------- */
.kask-regeln summary {
    cursor: pointer;
    list-style: none;
}

.kask-regeln summary::-webkit-details-marker { display: none; }

.kask-regeln summary h2::after {
    content: " ▾";
    font-size: .8em;
}

.kask-regeln[open] summary h2::after { content: " ▴"; }

.kask-status {
    display: inline-block;
    font-size: .8rem;
    opacity: .75;
    white-space: nowrap;
}

.kask-fuss { margin-top: 1.5rem; }

/* ===========================================================================
   AB HIER: Erweiterung 2026-08-20 (AJAX-Bedienung, Zweispalter, Strangschema)
   =========================================================================== */

/* ---------- Farbleitfaden ----------
   Haupt = gruen, Not = rot. Das ist die Bildsprache SAEMTLICHER Werksunterlagen
   (AKTUELL 176, Isometrievorlage, Kaskaden_Ablaufvarianten) - wer die Zeichnung
   daneben liegen hat, soll nicht umdenken muessen. Deshalb stehen diese beiden
   Farben hier ausnahmsweise als eigene Werte und nicht nur als Verweis auf das
   zentrale Design-System: Sie sind eine FACHLICHE Kennzeichnung, keine
   Gestaltung. */
.kask-tool {
    --kask-gruen: #2e8b2e;
    --kask-gruen-hell: #eaf6ea;
    --kask-rot: #d0242a;
    --kask-rot-hell: #fdeced;
    --kask-gelb: #ffe680;
}

/* ---------- Umschalter Standard / Experte ----------
   Der Standard-Modus ist der Normalfall: nur l/s je Ebene. Der Umschalter steht
   deshalb unauffaellig ueber den Eingaben - als Angebot, nicht als Aufforderung.
   Im Experten-Modus bekommt er einen Rand, damit erkennbar bleibt, dass gerade
   die erweiterte Eingabe laeuft. */
.kask-modus {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1rem;
    margin: 0 0 1rem;
    padding: .6rem .75rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, .035);
}

.kask-modus-experte {
    background: var(--kask-gruen-hell);
    border-left: 4px solid var(--kask-gruen);
}

.kask-modus-text {
    flex: 1 1 22rem;
    margin: 0;
    min-width: 0;
}

/* ---------- Systemvariante ---------- */
.kask-parameter {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    align-items: flex-end;
}

.kask-parameter-feld {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-weight: 700;
    flex: 1 1 16rem;
    min-width: 0;
}

.kask-parameter-feld select { max-width: 100%; }

.kask-parameter-fest { margin: 0; flex: 1 1 16rem; }

.kask-parameter-quelle { flex-basis: 100%; margin: 0; }

.kask-variantenzeile { margin: 0 0 .35rem; }

/* ---------- Meldungen und Feldpruefung ---------- */
.kask-meldungsplatz:empty { display: none; }

.kask-meldung-fehler {
    background: var(--kask-rot-hell);
    border-left: 4px solid var(--kask-rot);
}

.kask-hinweis-grenze {
    background: var(--kask-rot-hell);
    border-left: 4px solid var(--kask-rot);
}

/* Ungueltige Eingabe: Feld markieren, Wert stehen lassen. Frueher wurde
   stillschweigend auf 0 gesetzt - dann sah man ein Ergebnis, das nichts mit
   der eigenen Eingabe zu tun hatte. */
input.kask-feld-fehler {
    border-color: var(--kask-rot) !important;
    background: var(--kask-rot-hell);
}

.kask-feldmeldung {
    display: block;
    font-size: .75rem;
    line-height: 1.2;
    color: var(--kask-rot);
    white-space: nowrap;
}

/* Waehrend gerechnet wird: leicht abblenden, aber nichts sperren -
   Weitertippen muss jederzeit moeglich bleiben. */
.kask-rechnet #kask-ergebnis { opacity: .55; transition: opacity .15s; }

/* ---------- Zwei Spalten: Haupt links, Not rechts ---------- */
.kask-zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.kask-spalte { margin-bottom: 0; min-width: 0; }

.kask-kopf-gruen {
    background: var(--kask-gruen);
    color: #fff;
    border-radius: 4px 4px 0 0;
}

.kask-kopf-rot {
    background: var(--kask-rot);
    color: #fff;
    border-radius: 4px 4px 0 0;
}

.kask-kopf-gruen h2,
.kask-kopf-rot h2,
.kask-kopf-gruen .kask-block-zusatz,
.kask-kopf-rot .kask-block-zusatz { color: #fff; }

.kask-spalte .kask-tabelle-wrap table { min-width: 420px; }

/* ---------- Strangschema (SVG) ----------
   Nachbau der LORO-Bemessungsvorlage: gestuftes Strangschema, Grenzwerte gelb. */
.kask-schema-wrap {
    overflow-x: auto;
    margin: .25rem 0 .75rem;
}

.kask-schema {
    display: block;
    width: 100%;
    min-width: 300px;
    height: auto;
}

.kask-svg-leitung {
    fill: none;
    stroke-width: 3;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.kask-svg-haupt .kask-svg-leitung { stroke: var(--kask-gruen); }
.kask-svg-not   .kask-svg-leitung { stroke: var(--kask-rot); }

.kask-svg-haupt .kask-svg-knoten { fill: var(--kask-gruen); }
.kask-svg-not   .kask-svg-knoten { fill: var(--kask-rot); }

/* Doppelrohr: zwei parallele Linien - der Mehraufwand ist sofort sichtbar. */
.kask-svg-doppelrohr { stroke-width: 2.5; }

/* Ueberlast: gestrichelt und dunkel - hier reicht auch das Doppelrohr nicht. */
.kask-svg-ueberlast {
    stroke: #7a0d10;
    stroke-dasharray: 6 4;
    stroke-width: 4;
}

.kask-svg-fuss { stroke-dasharray: 2 3; }

.kask-svg-text,
.kask-svg-menge,
.kask-svg-zufluss,
.kask-svg-name,
.kask-svg-nachweis {
    font-family: inherit;
    fill: currentColor;
}

.kask-svg-text   { font-size: 11px; }
.kask-svg-menge  { font-size: 11px; font-weight: 700; }
.kask-svg-zufluss { font-size: 12px; font-weight: 700; }
.kask-svg-name   { font-size: 10.5px; opacity: .75; }
.kask-svg-nachweis { font-size: 10px; opacity: .8; }
.kask-svg-nachweis-fehl { fill: var(--kask-rot); opacity: 1; font-weight: 700; }
.kask-svg-fusstext { font-size: 10.5px; opacity: .8; }

/* Gelb = Grenzwert. Genau wie in der Werksvorlage ("gelb = Grenzwerte"). */
.kask-svg-grenzwert { fill: var(--kask-gelb); }

.kask-schema-legende {
    font-size: .82rem;
    opacity: .9;
    margin: .25rem 0 .75rem;
}

.kask-grenzwert {
    background: var(--kask-gelb);
    padding: 0 .25rem;
    border-radius: 2px;
    font-weight: 700;
}

/* ---------- Stueckliste mit Symbolfoto ---------- */
.kask-teile-titel {
    font-size: 1rem;
    margin: 1rem 0 .35rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.kask-sp-pos { width: 1%; white-space: nowrap; opacity: .7; }

.kask-sp-foto { width: 1%; }

img.kask-foto {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.kask-teile tbody td { vertical-align: middle; }

.kask-hw-ablauf { color: var(--kask-rot); font-weight: 700; }

/* ---------- Uebergabe ---------- */
.kask-uebernahme { margin: 1rem 0; }

.kask-uebernahme .kask-fussnote { margin-top: .35rem; }

/* Gesperrte Uebernahme (Variante unzulaessig, 2026-09-28): sichtbar, aber
   erkennbar ohne Funktion. Umbruch erlaubt, damit der Text mobil nicht
   ueber den Rand laeuft. */
.kask-ausschreibung-gesperrt,
.kask-ausschreibung-gesperrt:hover {
    opacity: .55;
    cursor: not-allowed;
    white-space: normal;
    background: #e5e5e5;
    color: #333;
    border-color: #bbb;
}

/* ---------- Schmale Bildschirme ---------- */
/* Unter 900 px stehen die beiden Straenge untereinander statt nebeneinander -
   nebeneinander waeren beide Tabellen unlesbar schmal. */
@media (max-width: 900px) {
    .kask-zweispaltig { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .kask-knopfreihe .oa-btn { flex: 1 1 100%; }
    .kask-parameter-feld { flex-basis: 100%; }
    .kask-feldmeldung { white-space: normal; }
}