/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   DATENBLATT — die Karte, die einen Datensatz als Etikett/Wert-Zeilen zeigt.
       <div class="pk-section"><div class="pk-section-head">Vertrag</div>
         <div class="pk-section-body">
           <div class="pk-row"><span class="pk-label">Beginn</span><span class="pk-value">28.07.2026</span></div>
           <div class="pk-row pk-row-eingabe"><span class="pk-label">Menge (Stück)</span>
             <span class="pk-eingabe"><input class="eingabe" type="number"></span></div>
   Zwei Zeilen-Arten, und der Unterschied ist die Aussage: reiner Text
   (.pk-value) kommt von woanders und wird hier nicht gepflegt; ein Feld
   (.pk-eingabe) pflegt man hier. Wer eine Zeile umbaut, entscheidet damit,
   wer sie pflegt. Der Spaltenwirt (.pk-col) gehört dem Werkzeug. */

/* Zwei Karten-Spalten: Jede Sektion ist eine Karte, jede Spalte stapelt
   ihre Karten von oben — keine Löcher. Die Breite begrenzt die Seite;
   schmal stapeln die Spalten. */
.protokoll-shell {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-16);
    padding-bottom: 60px;
}
.pk-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-16);
}
@media (max-width: 760px) {
    .protokoll-shell { flex-direction: column; }   /* schmal: Spalten stapeln, Reihenfolge bleibt */
}

/* Randlos, einen Tick heller als der Grund — die Abhebung kommt allein aus
   der Fläche. */
.pk-section {
    background: var(--flaeche-gehoben);
    border-radius: var(--rundung-mittel);
    padding: 16px 18px;
}

.pk-section-head {
    font-size: var(--schrift-xs);
    font-weight: var(--gewicht-halbfett);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-gedaempft);
    margin-bottom: 12px;
}

.pk-section-body {
    display: flex;
    flex-direction: column;
}

/* Etikett links, Wert rechts, eine dünne Linie je Zeile führt das Auge. */
.pk-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid var(--linie);
    font-size: var(--schrift-sm);
    line-height: 1.4;
}
.pk-row:last-child { border-bottom: none; }

.pk-label {
    color: var(--text-gedaempft);
    flex-shrink: 0;
}

.pk-value {
    color: var(--text);
    font-weight: var(--gewicht-mittel);
    text-align: right;
}

/* Ein leerer Wert ist fast unsichtbar — kein Rauschen aus Gedankenstrichen. */
.pk-empty {
    color: var(--linie-stark);
    font-weight: var(--gewicht-normal);
}

/* === EINGABE-ZEILE =========================================================
   Dieselbe Zeile, nur trägt die rechte Seite ein Feld. Sie richtet sich an
   der Mitte aus (baseline kippt, sobald ein Rahmen im Spiel ist) und bekommt
   etwas mehr Luft, damit die 34-px-Felder nicht aneinanderkleben. Eigene
   Klasse statt :has(): Wer die Zeile baut, weiß, welche Art er baut. */
.pk-row-eingabe {
    align-items: center;
    padding: 4px 0;
    /* Keine Trennlinie: Der Feldkasten ist selbst der Anker der Zeile.
       Lese-Zeilen behalten ihre — dort ist sie die Brücke zwischen Etikett
       und Wert. */
    border-bottom: none;
}

/* Eine Lese-Zeile ohne Linie, für Text ZWISCHEN Eingabe-Zeilen: Zwischen
   Feldkästen wäre die Linie kein Brückenschlag mehr, sondern ein
   Trennstrich, den sonst keine Zeile der Karte hat. */
.pk-row-ohne-linie { border-bottom: none; }

/* 230 px: Der längste reale Inhalt ist ein Name, und der scrollt beim Tippen
   ohnehin im Feld. */
.pk-eingabe {
    display: flex;
    align-items: center;
    gap: var(--abstand-8);
    flex: 0 1 230px;
    justify-content: flex-end;
}
/* Das Feld selbst kommt aus forms.css — hier nur seine Rolle in der Zeile.
   Eine Einheit (mm, °C) steht in Klammern im Etikett, nicht in einer Spalte
   hinter dem Feld: So enden alle Felder auf derselben Kante. */
.pk-eingabe .eingabe { flex: 1 1 auto; min-width: 0; }

/* Ein Auswahlfeld in der Zeile: CustomSelect hängt das native <select> in
   eine .cs-Hülle — die ist es, die in der Zeile Platz braucht. */
.pk-eingabe .cs,
.pk-eingabe select { flex: 1 1 auto; min-width: 0; }