/* ═══════════════════════════════════════════════════════════════════════
   datenaufnahme.css · v1639 — aus der Bordkarte wird eine Zeile

   Marcel am 26.09.2026: „Ich fand den ersten Entwurf am besten … im Tab
   Objekt und im Quick Check halt die helle Version."

   ── WAS HIER PASSIERT, UND WAS AUSDRÜCKLICH NICHT ────────────────────
   Diese Datei ändert **nur das Aussehen**. Der Markup-Vertrag, an dem
   die gesamte Mechanik hängt, bleibt Zeichen für Zeichen stehen:

     .dp-pf-tile  +  input[value=…]   ← `selectedSources()` liest genau das
     #oab-run                          ← der Auslöser
     #oab-results                      ← wohin die Marktpreisindikation kommt
     .dp-pf-tile.on / .dp-pf-led       ← der Zustand je Quelle

   > Eine Umgestaltung, die Markup anfasst, muss jede Mechanik daran neu
   > beweisen. Eine, die nur Flächen setzt, muss gar nichts beweisen -
   > sie KANN nichts kaputtmachen.

   Deshalb wird hier nichts entfernt, sondern ausgeblendet: Streifen,
   Perforation, Trennstrich und Strichcode tragen `display:none`. Wer die
   Bordkarte zurückwill, löscht vier Zeilen.

   ── WAS AUS DEM BILD BLEIBT ──────────────────────────────────────────
   Der QR-Code. Er ist das einzige Element der alten Karte, das etwas
   TUT - er führt auf DealPilot. Strichcode und Perforation codierten
   nichts; sie waren Zierat, und Zierat ist das, was einem Banker
   auffällt.

   ── ZWEI FLÄCHENSÄTZE ────────────────────────────────────────────────
   Die Karte steht in beiden Modi. Unten deshalb erst der dunkle Satz
   (Vorgabe) und darunter der helle unter `body.dp-chrome-hell` - kein
   eigener Schalter, sondern der, den die App ohnehin führt.

   ── GEMESSEN VORHER ──────────────────────────────────────────────────
   `.dp-pfbar` war **78 px** hoch, mit Streifen (1280x78), Vorspann
   (151x78), Perforation, zwei Segmenten, Trenner, QR (54x68) und einer
   Reisszone von 208x78, in der ein Strichcode von 174x52 stand.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Der Zierat ──────────────────────────────────────────────────── */
body.dp-neue-karte .dp-pfbar .dp-pf-stripe,
body.dp-neue-karte .dp-pfbar .dp-pf-perf,
body.dp-neue-karte .dp-pfbar .dp-pf-sep,
body.dp-neue-karte .dp-pfbar .dp-pf-bc{ display:none !important; }

/* ── Die Zeile ───────────────────────────────────────────────────── */
body.dp-neue-karte .dp-pfbar{
  display:flex !important; flex-direction:row !important;
  align-items:center !important; flex-wrap:wrap !important;
  gap:10px 14px !important;
  min-height:0 !important; height:auto !important;
  padding:8px 14px !important;
  border-radius:3px !important;
  background:#131210 !important;
  border:1px solid #2A2622 !important;
  box-shadow:none !important;
}
body.dp-neue-karte .dp-pf-scroll{ overflow:visible !important; }

/* Der Vorspann: aus „BOARDING PASS / PRE-FLIGHT" wird eine Beschriftung. */
body.dp-neue-karte .dp-pfbar .dp-pf-lead{
  display:flex !important; align-items:baseline; gap:8px;
  height:auto !important; min-height:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; flex:0 0 auto;
}
/* GEMESSEN nach der Richtungskorrektur: mit Vorspann brach die Zeile bei
   1280 px auf zwei Reihen um (99 px). Der Vorspann sagt "Datenaufnahme" -
   und genau das steht drei Zeilen darueber schon als Abschnittsueberschrift.

   > Zwei Beschriftungen fuer dieselbe Sache kosten hier eine ganze Reihe.
   > Die zweite faellt.

   Der Knoten bleibt stehen (die Mechanik liest ihn nicht, aber jemand
   koennte ihn suchen) - er wird nur unsichtbar. */
body.dp-neue-karte .dp-pfbar .dp-pf-lead{ display:none !important; }
body.dp-neue-karte .dp-pfbar .dp-pf-lead .bp{ display:none !important; }
body.dp-neue-karte .dp-pfbar .dp-pf-lead .k{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-size:11px !important; letter-spacing:.1em !important;
  text-transform:uppercase !important; color:#BFB7A9 !important;
  height:auto !important; padding:0 !important;
}
body.dp-neue-karte .dp-pfbar .dp-pf-lead .s{ display:none !important; }

/* Die beiden Gruppen stehen nebeneinander, nicht übereinander. */
/* GEMESSEN am 26.09.2026: hier stand nur display/align/gap - und die
   urspruengliche "flex-direction: column" hat ueberlebt. Die Leiste
   blieb deshalb 77 statt 49 px hoch, weil Beschriftung und Kacheln
   uebereinander standen.

   > DISPLAY GESETZT, RICHTUNG VERGESSEN. Heute zum zweiten Mal (vorher
   > die Schiene in layout-varianten.css). "display: flex" sagt nichts
   > ueber die Richtung - wer eine Spalte zur Zeile machen will, muss
   > BEIDES schreiben. Dasselbe gilt fuer "flex-wrap": ein geerbtes
   > "nowrap" schlaegt ein neues "wrap" ohne !important. */
body.dp-neue-karte .dp-pfbar .dp-pf-seg{
  display:flex !important; flex-direction:row !important;
  align-items:center !important; gap:9px !important;
  height:auto !important; min-height:0 !important; padding:0 !important;
  flex:0 1 auto; min-width:0; flex-wrap:wrap;
}
body.dp-neue-karte .dp-pfbar .dp-pf-grouplbl{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-size:9px !important; letter-spacing:.11em !important;
  text-transform:uppercase !important; color:#8C8479 !important;
  height:auto !important; width:auto !important; padding:0 !important;
  margin:0 !important; white-space:nowrap; flex:0 0 auto;
}
body.dp-neue-karte .dp-pfbar .dp-pf-row{
  display:flex !important; flex-direction:row !important;
  gap:6px !important; flex-wrap:wrap !important;
  height:auto !important; min-height:0 !important; width:auto !important;
}

/* Die Kacheln: Haarlinie, Gold nur am Gewählten. */
body.dp-neue-karte .dp-pfbar .dp-pf-tile{
  display:flex !important; align-items:center !important; gap:7px !important;
  height:auto !important; min-height:0 !important;
  padding:6px 11px !important; margin:0 !important;
  border:1px solid #2A2622 !important; border-radius:2px !important;
  background:#0E0D0B !important; box-shadow:none !important;
  transform:none !important; white-space:nowrap;
}
body.dp-neue-karte .dp-pfbar .dp-pf-tile:hover{ border-color:var(--wl-b8932f, #b8932f) !important; }
body.dp-neue-karte .dp-pfbar .dp-pf-tile.on{
  border-color:var(--wl-c9a84c, #C9A84C) !important;
  box-shadow:inset 3px 0 0 var(--wl-c9a84c, #C9A84C) !important;
}
body.dp-neue-karte .dp-pfbar .dp-pf-lbl{ font-size:12.5px !important; }
body.dp-neue-karte .dp-pfbar .dp-pf-logo img{ max-height:15px !important; width:auto !important; }
body.dp-neue-karte .dp-pfbar .dp-pf-logo.dp{ font-size:12.5px !important; }
body.dp-neue-karte .dp-pfbar .dp-pf-ic{ display:inline-flex !important; align-items:center; }
body.dp-neue-karte .dp-pfbar .dp-pf-led{
  width:6px !important; height:6px !important; border-radius:50% !important;
  margin-left:2px !important; flex:0 0 auto;
}

/* QR und Auslöser ganz rechts. */
body.dp-neue-karte .dp-pfbar .dp-pf-qr{
  margin-left:auto !important; flex:0 0 auto;
  width:auto !important; height:auto !important; padding:0 !important;
  background:transparent !important; border:0 !important;
  display:flex !important; align-items:center; gap:6px;
}
body.dp-neue-karte .dp-pfbar .dp-pf-qr svg{ width:28px !important; height:28px !important; border-radius:2px; }
body.dp-neue-karte .dp-pfbar .dp-pf-scan{ display:none !important; }
/* GEMESSEN: die Reisszone blieb **208 px** breit, obwohl der Knopf darin
   nur 80 misst und der Strichcode auf display:none steht. Ursache war
   `min-width:208px` - ich hatte `width:auto` gesetzt und die Mindestbreite
   vergessen.

   > MIN-WIDTH SCHLAEGT WIDTH, genau wie min-height height schlaegt (die
   > Falle steht so schon in CLAUDE.md). Ein `width:auto !important` sieht
   > dabei aus, als haette man es geregelt.

   Diese 208 px waren der Grund, warum die Zeile bei 1280 px auf zwei
   Reihen umbrach: 1010 px Kinder plus 42 px Abstaende gegen 1028 px
   Platz. Ohne sie sind es 882. */
body.dp-neue-karte .dp-pfbar .dp-pf-rz{
  display:flex !important; align-items:center !important;
  height:auto !important; min-height:0 !important;
  width:auto !important; min-width:0 !important; max-width:none !important;
  padding:0 !important; background:transparent !important;
  border:0 !important; flex:0 0 auto;
}
body.dp-neue-karte .dp-pfbar .dp-pf-rz::before,
body.dp-neue-karte .dp-pfbar .dp-pf-rz::after{ display:none !important; }
body.dp-neue-karte .dp-pfbar .dp-pf-launch{
  height:auto !important; min-height:0 !important;
  padding:8px 18px !important; font-size:13px !important;
  border-radius:2px !important; white-space:nowrap;
}

/* ── Heller Satz ─────────────────────────────────────────────────── */
body.dp-chrome-hell .dp-pfbar{
  background:#FFFFFF !important; border-color:#E6E1D6 !important;
}
body.dp-chrome-hell .dp-pfbar .dp-pf-lead .k{ color:#6B645A !important; }
body.dp-chrome-hell .dp-pfbar .dp-pf-grouplbl{ color:#9A9287 !important; }
body.dp-chrome-hell .dp-pfbar .dp-pf-tile{
  background:#FDFCFA !important; border-color:#E6E1D6 !important; color:#1A1A18 !important;
}
body.dp-chrome-hell .dp-pfbar .dp-pf-tile.on{ background:#FFFDF8 !important; }
body.dp-chrome-hell .dp-pfbar .dp-pf-logo.dp{ color:#1A1A18 !important; }
body.dp-chrome-hell .dp-pfbar .dp-pf-qr svg rect{ fill:#fff; }

/* ── Tablet und Handy ────────────────────────────────────────────────
   GEMESSEN: bei 390 px stehen vier Kacheln, zwei Beschriftungen, QR und
   Knopf nicht in einer Zeile - sie MÜSSEN umbrechen. Der Knopf darf
   dabei nicht in der Mitte landen: er ist der Abschluss und gehört
   unten über die volle Breite, sonst sucht man ihn. */
@media (max-width:1024px){
  body.dp-neue-karte .dp-pfbar{ gap:8px 12px !important; padding:8px 12px !important; }
  body.dp-neue-karte .dp-pfbar .dp-pf-qr{ display:none !important; }   /* auf dem Tablet kein QR - man hat das Gerät ja in der Hand */
}
@media (max-width:700px){
  body.dp-neue-karte .dp-pfbar{ flex-direction:column !important; align-items:stretch !important; }
  body.dp-neue-karte .dp-pfbar .dp-pf-seg{ flex-wrap:wrap !important; }
  body.dp-neue-karte .dp-pfbar .dp-pf-seg{ width:100%; }
  body.dp-neue-karte .dp-pfbar .dp-pf-row{ width:100%; }
  body.dp-neue-karte .dp-pfbar .dp-pf-tile{ flex:1 1 calc(50% - 3px) !important; justify-content:center !important; }
  body.dp-neue-karte .dp-pfbar .dp-pf-rz{ width:100%; }
  body.dp-neue-karte .dp-pfbar .dp-pf-launch{ width:100% !important; }
}

/* GEMESSEN: die Status-LED einer GEWAEHLTEN Kachel war rgb(241,242,244) -
   nahezu weiss, auf hellem Grund also unsichtbar. Der Zustand stand
   damit nur noch in der Goldkante.

   Gruen und Rot bleiben in jeder Marke gleich (CLAUDE.md:
   "Statusfarben nie tokenisieren") - deshalb steht hier ein Literal und
   KEIN --wl-Token. Der Gold-Waechter kennt diese beiden Toene nicht. */
body.dp-neue-karte .dp-pfbar .dp-pf-led{ background:#CEC6B6 !important; }
body.dp-neue-karte .dp-pfbar .dp-pf-tile.on .dp-pf-led{ background:#3FA56C !important; }
body:not(.dp-chrome-hell) .dp-pfbar .dp-pf-led{ background:#2A2622 !important; }

/* Auf dem Handy steht die erste Kachel allein in ihrer Gruppe - sie soll
   dann die volle Breite nehmen wie die Gruppe darunter, sonst sieht es
   aus, als fehle etwas daneben. */
@media (max-width:700px){
  body.dp-neue-karte .dp-pfbar .dp-pf-seg:first-of-type .dp-pf-tile{ flex:1 1 100% !important; }
}

/* GEMESSEN: der Ausloeser blieb 50 px hoch und machte die ganze Zeile
   76 statt 54 px. Ursache: `#oab-run` traegt `min-height:50px`, und ein
   ID-Selektor (1,0,0) schlaegt jede Klassenregel (0,2,0) - auch mit
   !important, denn !important entscheidet erst BEI GLEICHER Herkunft,
   nicht ueber die Spezifitaet hinweg.

   > ID-Selektoren sind der blinde Fleck aus FALLEN.md. Wer eine Klasse
   > schreibt und sich wundert, sucht als erstes eine ID.

   Deshalb hier mit ID: `.dp-pfbar button#oab-run` ist (1,1,1). */
body.dp-neue-karte .dp-pfbar button#oab-run,
body.dp-neue-karte .dp-pfbar #oab-run.dp-pf-launch{
  min-height:0 !important; height:auto !important;
  padding:8px 18px !important; font-size:13px !important;
  border-radius:2px !important;
}
@media (max-width:700px){
  body.dp-neue-karte .dp-pfbar button#oab-run{ width:100% !important; }
}

/* ═══ QUICK-CHECK ═══════════════════════════════════════════════════
   GEMESSEN am 26.09.2026: der Quick-Check ist eine EIGENE App in einem
   iframe (`quickcheck-app.html`). Deshalb hat ihn weder diese Datei
   noch das Ausblenden der Bewertungspartner aus v1637 erreicht - dort
   standen Sprengnetter und PriceHubble unveraendert auf der Karte.

   > Ein iframe ist ein eigenes Dokument. Eine Regel, die in der
   > Hauptanwendung wirkt, wirkt darin GAR NICHT - und das sieht man
   > nur, wenn man hineinsieht.

   Die Karte dort traegt dasselbe Markup (`.dp-pfbar`, `.dp-pf-tile`),
   also greift alles oben, sobald diese Datei auch im iframe geladen
   ist. Nur die beiden Partnerkacheln brauchen eine eigene Zeile, weil
   sie dort STATISCH im HTML stehen statt aus JavaScript zu kommen.

   Ausgeblendet, nicht geloescht: `QcApp.sprengnetter()` und
   `QcApp.priceHubble()` bleiben vollstaendig. Wer sie zurueckwill,
   loescht diese eine Regel. */
body.dp-neue-karte .dp-pfbar .dp-pf-tile[data-src="spr"],
body.dp-neue-karte .dp-pfbar .dp-pf-tile[data-src="ph"]{ display:none !important; }

/* ═══ DAS QUICK-BOARDING-COCKPIT ════════════════════════════════════
   Marcel: „im Quick Check … dass du das so umbaust, dass sich das
   aehnelt" - gemeint sind die Score-Karten im Reiter Bewertung, die
   seit v1640 dauerhaft weiss sind.

   GEMESSEN: `#qb-bp` ist rgb(10,10,10), 1320x277. Sein rechter Abriss
   `#qb-stub` war schon weiss - die Karte war also ohnehin zweifarbig.
   Jetzt wird der linke Teil nachgezogen, mit derselben Grammatik wie
   `.dpsh-pass`: weisser Koerper, Haarlinie, und das Kopfband als
   EINZIGER Farbakzent.

   Der Verlauf traegt die Whitelabel-Token, faerbt sich beim Mandanten
   also mit. */
#qb-bp{
  background:#FFFFFF !important;
  border:1px solid #E6E0D3 !important;
  box-shadow:0 1px 2px rgba(42,39,39,.05) !important;
  color:#1A1A18 !important;
}
#qb-bp .qb-main{ background:#FFFFFF !important; color:#1A1A18 !important; }
#qb-bp .ghead{
  background:linear-gradient(110deg, var(--wl-e8cc7a, #E8CC7A),
    var(--wl-c9a84c, #C9A84C) 55%, var(--wl-b8932f, #b8932f)) !important;
  color:#141210 !important;
}
#qb-bp .ghead *{ color:#141210 !important; }
/* Die Textklassen, die gemessen hell gesetzt waren. Einzeln benannt -
   ein Sammelselektor auf alle Kinder wuerde auch die Balken und den
   Zeiger des Tachos treffen, und die tragen Statusfarben. */
#qb-bp .mbody, #qb-bp .kt, #qb-bp .k, #qb-bp .r,
#qb-bp .cbars, #qb-bp .cb, #qb-bp .dialwrap,
#qb-bp .qcb-hinweis, #qb-bp .qcb-hinweis-satz,
#qb-bp .qcb-rechenweg, #qb-bp .qcb-rows,
#qb-bp .mbody b, #qb-bp .kt b{ color:#1A1A18 !important; }
#qb-bp .qcb-hinweis{ background:#F7F5F1 !important; }
#qb-bp .contrail{ opacity:.25 !important; }

/* ── Im Quick-Check gilt der helle Satz IMMER ────────────────────────
   GEMESSEN: das QC-Dokument traegt `html.qc-app` (fest im Dokument) und
   body-Klassennamen - `body.dp-chrome-hell` gibt es dort nicht und kann
   es nicht geben, weil der Skin-Schalter in der Hauptanwendung sitzt.
   Die Zeile blieb deshalb rgb(19,18,16) auf einer inzwischen weissen
   Karte.

   > Zwei Dokumente, ein Aussehen: die Bedingung, die im einen Dokument
   > den hellen Satz einschaltet, muss im anderen eine ANDERE sein. */
html.qc-app .dp-pfbar{ background:#FFFFFF !important; border-color:#E6E1D6 !important; }
html.qc-app .dp-pfbar .dp-pf-grouplbl{ color:#9A9287 !important; }
html.qc-app .dp-pfbar .dp-pf-tile{
  background:#FDFCFA !important; border-color:#E6E1D6 !important; color:#1A1A18 !important;
}
html.qc-app .dp-pfbar .dp-pf-tile.on{ background:#FFFDF8 !important; }
html.qc-app .dp-pfbar .dp-pf-logo.dp{ color:#1A1A18 !important; }
html.qc-app .dp-pfbar .dp-pf-led{ background:#CEC6B6 !important; }
html.qc-app .dp-pfbar .dp-pf-tile.on .dp-pf-led{ background:#3FA56C !important; }

/* ── Kontrast im Cockpit ─────────────────────────────────────────────
   GEMESSEN auf weissem Grund: Beschriftungen standen auf
   rgb(154,144,128) - ein Ton, der fuer dunklen Grund gemacht ist und
   auf Papier bei knapp 2:1 Kontrast liegt. Werte standen auf dem
   Goldton rgb(201,168,76), der auf Weiss noch schlechter faellt.

   > Ein heller Grauton ist auf Schwarz zurueckhaltend und auf Weiss
   > unlesbar. Farben, die den Grund wechseln, muessen mitwechseln. */
#qb-bp .cl, #qb-bp .l, #qb-bp .h{ color:#6B645A !important; }
#qb-bp .cv, #qb-bp .v{ color:#1A1A18 !important; font-weight:600; }
#qb-bp summary{ color:var(--wl-b8932f, #b8932f) !important; }
#qb-bp .qcb-hinweis b,
#qb-bp .qcb-hinweis-satz{ color:#1A1A18 !important; }

/* ═══ DIE CHECKLISTE BEIM ANLEGEN (v1643) ═══════════════════════════ */
.dpnq-ov{ position:fixed; inset:0; z-index:2147482400; display:grid; place-items:center;
  background:rgba(18,16,14,.5); padding:20px; }
.dpnq-k{ width:min(540px,100%); background:#FDFCFA; border:1px solid #CEC6B6;
  border-radius:3px; box-shadow:0 26px 70px -30px rgba(0,0,0,.7); padding:18px 20px 16px;
  font-family:'Inter', system-ui, sans-serif; color:#1A1A18; }
.dpnq-kopf{ display:flex; align-items:center; justify-content:space-between; }
.dpnq-kopf b{ font-family:'Space Grotesk', system-ui, sans-serif; font-size:17px; }
.dpnq-x{ border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer;
  color:#9A9287; padding:2px 6px; }
.dpnq-x:hover{ color:#1A1A18; }
.dpnq-vor{ margin:4px 0 14px; font-size:13px; color:#6B645A; }
.dpnq-liste{ display:grid; gap:7px; }
.dpnq-z{ display:flex; align-items:flex-start; gap:11px; padding:10px 13px;
  border:1px solid #E6E1D6; background:#fff; border-radius:2px; cursor:pointer; }
.dpnq-z:hover{ border-color:var(--wl-b8932f, #b8932f); }
.dpnq-z.an{ border-color:var(--wl-c9a84c, #C9A84C);
  box-shadow:inset 3px 0 0 var(--wl-c9a84c, #C9A84C); background:#FFFDF8; }
.dpnq-z input{ width:15px; height:15px; margin-top:2px; flex:0 0 auto; accent-color:var(--wl-b8932f, #b8932f); }
.dpnq-t{ min-width:0; line-height:1.3; }
.dpnq-t b{ display:block; font-size:13.5px; font-weight:600; }
.dpnq-t small{ display:block; font-size:11.5px; color:#6B645A; margin-top:1px; }
.dpnq-fuss{ margin:13px 0 0; font-size:12px; color:#6B645A; }
.dpnq-fuss b{ color:#1A1A18; }
.dpnq-knoepfe{ display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.dpnq-merk{ display:flex; align-items:center; gap:6px; font-size:12px; color:#6B645A;
  cursor:pointer; margin-right:auto; }
.dpnq-merk input{ width:14px; height:14px; accent-color:var(--wl-b8932f, #b8932f); }
.dpnq-b{ font-family:inherit; font-size:13px; padding:9px 16px; border-radius:2px;
  border:1px solid #CEC6B6; background:#fff; color:#1A1A18; cursor:pointer; }
.dpnq-b:hover{ border-color:var(--wl-b8932f, #b8932f); }
.dpnq-haupt{ background:linear-gradient(110deg, var(--wl-e8cc7a, #E8CC7A),
  var(--wl-c9a84c, #C9A84C) 55%, var(--wl-b8932f, #b8932f));
  color:#141210; border-color:transparent; font-weight:600; }
@media (max-width:560px){
  .dpnq-knoepfe{ flex-direction:column; align-items:stretch; }
  .dpnq-merk{ margin-right:0; margin-bottom:4px; }
  .dpnq-b{ width:100%; }
}