/*
 * BK Kartenrechner -- Basis-Stil.
 *
 * Extrahiert aus dem KLV-Theme (style.css, Bloecke "Rechner", "Ergebnis-Karten",
 * "Kartendarstellung v2" und die Beleg-Bildspalte). Drei Dinge sind dabei
 * bewusst anders:
 *
 * 1. GESCOPETER RESET. Im Theme kam er vom globalen Reset (`*{box-sizing}`,
 *    `p,ul,ol{margin:0}`). Auf KSV gilt stattdessen typo.css mit eigenen
 *    Abstaenden fuer p/ul/ol/h2. Ohne den Reset hier verschieben sich alle
 *    Karten-Innenabstaende sichtbar. Er gilt NUR innerhalb des Rechners.
 *
 * 2. EIGENE TOKENS (--bkkr-*). Unpraefixte Namen wie --ink oder --radius auf
 *    :root wuerden auf KLV je nach Ladereihenfolge das gesamte Theme
 *    umfaerben. --bk-* ist in bravekin bereits belegt (content-shortcodes.css).
 *
 * 3. Klassen heissen bkkr-* statt klv-*. Der Rechner laeuft auf beiden
 *    Portalen; ein Portalkuerzel im Markup des anderen Portals gehoert da
 *    nicht hin.
 *
 * ACHTUNG bei WP Rocket "Remove Unused CSS": Saemtliche Karten-Klassen
 * (bkkr-receipt*, bkkr-more-btn, bkkr-receipts__divider) entstehen erst im JS
 * und stehen nie im ausgelieferten HTML. RUCSS wuerde sie entfernen und der
 * Rechner erschiene unformatiert. Vor dem Umlegen auf einer Vorschau-Seite
 * pruefen; falls noetig, die Praefixe bkkr- und bk-kartenrechner in die
 * RUCSS-Safelist.
 */

.bk-kartenrechner {
    /* Vorgabe-Tokens. Ein Site-Blatt (KSV-Farben, Schriften, Radien) ueber-
       schreibt sie, indem es dieselben Variablen spaeter erneut setzt. */
    --bkkr-bg: #FFFFFF;
    --bkkr-bg-soft: #F5F5F6;
    --bkkr-ink: #17191C;
    --bkkr-ink-soft: #6E7378;
    --bkkr-line: #E7E8EA;
    --bkkr-akzent: #8FA8F2;
    --bkkr-akzent2: #45E3F0;
    --bkkr-radius: 18px;
    --bkkr-radius-pill: 999px;
    --bkkr-radius-chip: 10px;
    --bkkr-panel-bg: linear-gradient(140deg, rgba(143, 168, 242, .13), rgba(69, 227, 240, .13));
    --bkkr-panel-line: rgba(69, 227, 240, .28);
    --bkkr-chip-bg: rgba(69, 227, 240, .14);
    --bkkr-shadow: 0 1px 2px rgba(23, 25, 28, .04), 0 10px 30px -14px rgba(23, 25, 28, .12);
    --bkkr-font-body: inherit;
    --bkkr-font-mono: Consolas, 'Cascadia Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

    color: var(--bkkr-ink);
    font-family: var(--bkkr-font-body);
    line-height: 1.65;
}

/* Gescopeter Reset.
   Ersetzt den globalen Reset des KLV-Themes, ohne die Seite zu beruehren, auf
   der der Rechner steht.

   :where() ist hier Pflicht, nicht Stil. Ohne es hatte ".bk-kartenrechner p"
   die Spezifitaet (0,1,1) und schlug damit jede Komponentenklasse (0,1,0). Auf
   KSV standen am 15.09.2026 die Abstaende von .bkkr-kicker, .bkkr-meta,
   .bkkr-field__hint und .bkkr-affiliate auf 0, und der CTA-Knopf verlor seine
   weisse Schrift an "color: inherit". Mit :where() hat der Reset (0,1,0): Er
   schlaegt weiterhin die Element-Regeln des Themes (typo.css "p", "ul, ol",
   "article li" -- hoechstens (0,0,3)), und die Komponenten gewinnen, weil sie
   in dieser Datei spaeter stehen.

   box-sizing bleibt ohne :where(), weil Pseudo-Elemente darin nicht erlaubt
   sind und keine Komponente box-sizing ueberschreibt. */
.bk-kartenrechner, .bk-kartenrechner *, .bk-kartenrechner *::before, .bk-kartenrechner *::after {
    box-sizing: border-box;
}
.bk-kartenrechner :where(p, ul, ol, li, h2, h3, figure, blockquote) { margin: 0; padding: 0; }
.bk-kartenrechner :where(ul, ol) { list-style: none; }
.bk-kartenrechner :where(img) { max-width: 100%; height: auto; display: block; }
.bk-kartenrechner :where(input, button, select) { font: inherit; }
.bk-kartenrechner :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Ueberschrift: im Theme ein h2, hier ein div mit role="heading" (das
   KSV-Auto-Inhaltsverzeichnis sammelt gerenderte h2/h3 ein). */
.bkkr-title {
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.bkkr-affiliate {
    font-size: .78rem;
    color: var(--bkkr-ink-soft);
    margin-top: .9rem;
    line-height: 1.5;
}

.bk-kartenrechner-offline {
    border: 1px solid var(--bkkr-line, #E7E8EA);
    border-radius: var(--bkkr-radius);
    padding: 1rem 1.2rem;
}

/* ============ Rechner ============ */

.bk-kartenrechner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    max-width: 46rem;
    margin: 0 auto;
    width: 100%;
}

.bkkr-panel {
    /* Zarter Candy-Verlauf, damit sich das Eingabe-Panel von den weissen
       Ergebnis-Karten abhebt (CJ 07.07.). */
    background: var(--bkkr-panel-bg);
    border: 1px solid var(--bkkr-panel-line);
    border-radius: var(--bkkr-radius);
    padding: 1.7rem 1.7rem 1.9rem;
    box-shadow: var(--bkkr-shadow);
}
.bkkr-kicker {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bkkr-ink-soft);
    margin-bottom: .5rem;
}
.bkkr-title { font-size: 1.45rem; margin-bottom: 1.4rem; }
.bkkr-title em { font-style: normal; }

.bkkr-field { margin-bottom: 1.15rem; }
.bkkr-field label, .bkkr-field legend {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .45rem;
    color: var(--bkkr-ink);
}
.bkkr-field__row { display: flex; align-items: center; gap: 1rem; }
.bkkr-field__row output {
    font-family: var(--bkkr-font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--bkkr-ink);
    min-width: 7ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.bkkr-field__hint { font-size: .78rem; color: var(--bkkr-ink-soft); margin-top: .35rem; }

/* Bis 15.09.2026 standen die drei range-Regeln ungescopet in dieser Datei und
   formatierten jeden Schieberegler auf der ganzen Seite. border: 0 gegen
   default-color.css, das jedem input einen 1px-Rahmen gibt. */
.bk-kartenrechner input[type="range"] {
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--bkkr-line);
    outline-offset: 4px;
}
.bk-kartenrechner input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bkkr-ink);
    border: 4px solid #fff;
    box-shadow: 0 0 0 1.5px var(--bkkr-ink);
    cursor: pointer;
}
.bk-kartenrechner input[type="range"]::-moz-range-thumb {
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--bkkr-ink);
    border: 4px solid #fff;
    box-shadow: 0 0 0 1.5px var(--bkkr-ink);
    cursor: pointer;
}

.bkkr-field--chips { border: 0; padding: 0; }
.bkkr-field--chips label { display: inline-block; margin: 0 .4rem .45rem 0; }
.bkkr-field--chips input { position: absolute; opacity: 0; }
.bkkr-field--chips span {
    display: inline-block;
    padding: .38rem .9rem;
    border-radius: var(--bkkr-radius-pill);
    border: 1px solid var(--bkkr-line);
    background: #fff;
    color: var(--bkkr-ink-soft);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.bkkr-field--chips input:checked + span {
    background: var(--bkkr-ink);
    border-color: var(--bkkr-ink);
    color: #fff;
}
.bkkr-field--chips input:focus-visible + span { outline: 2px solid var(--bkkr-akzent); outline-offset: 2px; }
/* "Nur mit SIM" greift nur innerhalb von "Mobil" und ist sonst deaktiviert. */
.bkkr-field--chips input:disabled + span { opacity: .45; cursor: not-allowed; }

/* --- Feineinstellungen (zugeklappt, Task 6) --- */

.bkkr-fein {
    margin-top: 1.3rem;
    padding-top: 1.15rem;
    border-top: 1px dashed var(--bkkr-panel-line);
}
.bkkr-fein summary {
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    color: var(--bkkr-ink-soft);
}
.bkkr-fein .bkkr-field { margin-top: 1.1rem; }

.bkkr-field__range-full { width: 100%; display: block; }
.bkkr-field__output-line {
    display: block;
    margin-top: .4rem;
    font-family: var(--bkkr-font-mono);
    font-size: .85rem;
    font-weight: 700;
    color: var(--bkkr-ink);
    font-variant-numeric: tabular-nums;
}

.bkkr-radio-list { border: 0; padding: 0; }
.bkkr-radio-line {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    font-weight: 400;
    color: var(--bkkr-ink);
    margin: 0 0 .45rem;
    cursor: pointer;
}
.bkkr-radio-line input { flex: 0 0 auto; }

.bkkr-field--toggle .bkkr-field__hint { margin-top: .3rem; }
.bkkr-toggle-line {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bkkr-ink);
    cursor: pointer;
}
.bkkr-toggle-line input { flex: 0 0 auto; }

/* --- Ergebnis-Karten --- */

.bkkr-meta { font-size: .85rem; color: var(--bkkr-ink-soft); margin-bottom: .9rem; }
.bkkr-receipts {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.bkkr-receipt {
    background: #fff;
    border: 1px solid var(--bkkr-line);
    border-radius: var(--bkkr-radius);
    padding: 1.15rem 1.3rem 1.35rem;
    position: relative;
    box-shadow: var(--bkkr-shadow);
    animation: bkkr-in .35s ease both;
    animation-delay: calc(var(--bkkr-i, 0) * 60ms);
}
.bkkr-receipt:first-child { border-color: var(--bkkr-ink); border-width: 1.5px; }
/* Keine laufende Rangnummer (01, 02 ...) mehr auf den Karten (CJ 15.09.2026). */
@keyframes bkkr-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bkkr-receipt { animation: none; } }

.bkkr-receipt__badge {
    display: inline-block;
    background: var(--bkkr-akzent2);
    color: var(--bkkr-ink);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .24rem .7rem;
    border-radius: var(--bkkr-radius-pill);
    margin-bottom: .55rem;
}
.bkkr-receipt__ad {
    display: inline-block;
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bkkr-ink-soft);
    border: 1px solid var(--bkkr-line);
    padding: .18rem .5rem;
    border-radius: var(--bkkr-radius-pill);
    margin: 0 0 .55rem .4rem;
}
/* Kopf: links Rang, Labels und Logo, rechts der Preis (Variante B, CJ 15.09.2026). */
.bkkr-receipt__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: .7rem;
    margin-bottom: .7rem;
    border-bottom: 1px solid var(--bkkr-line);
}
.bkkr-receipt__title { display: grid; justify-items: start; gap: .35rem; min-width: 0; }
.bkkr-receipt__title strong { font-size: .98rem; }
.bkkr-receipt__title span { font-size: .85rem; color: var(--bkkr-ink-soft); }
.bkkr-receipt__labels { display: flex; flex-wrap: wrap; gap: .35rem; }
.bkkr-receipt__labels > span { margin: 0; }
.bkkr-receipt__total {
    display: grid;
    justify-items: end;
    text-align: right;
    flex: 0 0 auto;
}
.bkkr-receipt__total span { font-size: .75rem; color: var(--bkkr-ink-soft); }
.bkkr-receipt__total b {
    font-family: var(--bkkr-font-mono);
    font-size: 1.45rem;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Alle Aufklapper in einer Zeile. Ein geoeffneter nimmt die volle Breite, damit
   sein Inhalt nicht in einer schmalen Spalte neben den anderen umbricht. */
/* Fusszeile: Aufklapper links, kompakter Knopf rechts buendig mit dem Preis.
   align-items: flex-start, damit der Knopf oben stehen bleibt, wenn links ein
   Aufklapper geoeffnet wird. */
.bkkr-receipt__foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem 1rem;
    margin-top: .75rem;
}
.bkkr-receipt__details {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem 1.2rem;
    padding-top: .45rem;
}
.bkkr-receipt__details > details { margin: 0; padding: 0; border: 0; }
.bkkr-receipt__details > details[open] { flex-basis: 100%; }
.bkkr-receipt__details > details > summary {
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bkkr-ink-soft);
    margin: 0;
}
.bkkr-receipt__details > details[open] > summary { margin-bottom: .35rem; }
.bkkr-receipt__feats li.bkkr-warnchip { background: #fef3c7; color: #92400e; }
/* "ab"-Darstellung (Task 6): Restposten-Zeile direkt unter der Summe, klein
   und ohne Belehrung -- kein verstecktes Sternchen im Kleingedruckten. */
.bkkr-receipt__restposten {
    font-size: .72rem;
    color: var(--bkkr-ink-soft);
    margin: -.35rem 0 .75rem;
}
/* "Uns fehlt: ..." -- die Zeile, die benennt, WELCHE Angabe fehlt (Spec 4.2).
   Etwas kraeftiger als der Restposten darunter: sie erklaert das "ab" im
   Preis, waehrend der Restposten nur ergaenzt, was ausserhalb der Rechnung
   liegt. */
.bkkr-receipt__fehlt {
    font-size: .74rem;
    color: var(--bkkr-ink);
    margin: -.35rem 0 .5rem;
}
.bkkr-receipt__restposten + .bkkr-receipt__fehlt,
.bkkr-receipt__fehlt + .bkkr-receipt__restposten { margin-top: 0; }
/* --- Kartendarstellung v2 (?rechner=v2, CJ-Auftrag 2026-08-27) ------------
   Die Restposten standen bis dahin als ein Fliesstext direkt unter dem Preis,
   im Extremfall 744 Zeichen, kommagetrennt -- und weil die Posten selbst
   Kommas tragen, war die Grenze zwischen ihnen nicht zu sehen. Jetzt ein
   Zaehler mit Aufklapper, gleiches Muster wie der Rechenweg darunter.
   Ausstiegskosten und Gebuehren je Vorfall bekommen eigene Bloecke unter dem
   CTA: beide haengen an einer Bedingung, die der Monatspreis nicht abbilden
   kann, gehoeren aber vor die Unterschrift. */
.bkkr-receipt__restposten-klapp { margin: -.35rem 0 .75rem; }
.bkkr-receipt__restposten-klapp summary {
    cursor: pointer;
    font-size: .72rem;
    color: var(--bkkr-ink-soft);
}
/* Ohne Aufzaehlungspunkt (CJ 2026-09-07): Die Posten sind Label + Betrag,
   also eher Belegzeilen als eine Aufzaehlung. Der Punkt davor setzte eine
   Gliederungsebene, die es nicht gibt, und stand optisch vor der Information. */
.bkkr-receipt__restposten-klapp ul,
.bkkr-receipt__extra ul {
    margin: .4rem 0 0;
    padding-left: 0;
    list-style: none;
    font-size: .72rem;
    color: var(--bkkr-ink-soft);
    display: grid;
    gap: .25rem;
}
.bkkr-receipt__restposten-klapp li span,
.bkkr-receipt__extra li span { color: var(--bkkr-ink); }
.bkkr-receipt__extra {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid var(--bkkr-line, #e4e4e4);
}
.bkkr-receipt__extra-title {
    font-size: .78rem;
    font-weight: 600;
    margin: 0;
}
.bkkr-receipt__weitere {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid var(--bkkr-line, #e4e4e4);
}
.bkkr-receipt__weitere summary {
    cursor: pointer;
    font-size: .72rem;
    color: var(--bkkr-ink-soft);
}
.bkkr-receipt__weitere ul {
    margin: .4rem 0 0;
    padding-left: 0;
    list-style: none;
    font-size: .72rem;
    color: var(--bkkr-ink-soft);
    display: grid;
    gap: .25rem;
}
.bkkr-receipt__weitere li span { color: var(--bkkr-ink); }
.bkkr-receipt__beachte {
    margin-top: .7rem;
    padding-top: .6rem;
    border-top: 1px solid var(--bkkr-line, #e4e4e4);
}
.bkkr-receipt__beachte p {
    font-size: .72rem;
    line-height: 1.5;
    color: var(--bkkr-ink-soft);
    margin: 0;
}
.bkkr-receipt__beachte strong { color: var(--bkkr-ink); }
.bkkr-fussnote {
    font-size: .78rem;
    line-height: 1.55;
    color: var(--bkkr-ink-soft);
    margin: 1.1rem 0 0;
    padding-left: .8rem;
    border-left: 2px solid var(--bkkr-line, #e4e4e4);
}
.bkkr-receipt__extra-note {
    font-size: .68rem;
    color: var(--bkkr-ink-soft);
    margin: .45rem 0 0;
}
.bkkr-receipt__breakdown { margin-top: .55rem; }
.bkkr-receipt__breakdown summary {
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bkkr-ink-soft);
    margin-bottom: .4rem;
}
.bkkr-receipt__line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--bkkr-font-mono);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    padding: .18rem 0;
    border-bottom: 1px dotted var(--bkkr-line);
}
.bkkr-receipt__line span:first-child { color: var(--bkkr-ink-soft); }
/* Hinweis, wenn eine Untergrenze gegriffen hat (Task 6) -- direkt unter der
   Disagio-Zeile, keine eigene Beleg-Zeile mit Betrag. */
.bkkr-receipt__hinweis {
    display: block;
    font-size: .72rem;
    font-style: italic;
    color: var(--bkkr-ink-soft);
    padding: .05rem 0 .3rem;
}
.bkkr-receipt__cta {
    /* Kompakt statt volle Breite (CJ 15.09.2026). */
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
    font-size: .9rem;
    text-align: center;
    /* Eigenes Token mit Rueckfall: KLV nimmt die Textfarbe (monochromer
       Knopf), KSV setzt --bkkr-cta auf das Gruen des Themes. */
    background: var(--bkkr-cta, var(--bkkr-ink));
    color: #fff;
    text-decoration: none;
    /* default-color.css im bravekin-Theme legt mit "article a" einen gruenen
       Inset-Schatten als Unterstreichung auf jeden Link im Beitrag. Auf einem
       Knopf wird daraus ein Balken am unteren Rand. */
    box-shadow: none;
    font-weight: 600;
    padding: .5rem 1.15rem;
    border-radius: var(--bkkr-radius-pill);
    transition: opacity .15s ease, transform .15s ease;
}
/* Kein transform beim Hover: Ein transform macht den Knopf zum Bezugsrahmen
   seines ::after, und die ueber die Karte gestreckte Klickflaeche schrumpfte
   beim Hovern auf die Knopfgroesse zusammen. */
.bkkr-receipt__cta:hover { opacity: .85; color: #fff; }
/* Ganze Karte klickbar bei Go-Links (CJ 15.09.2026): Die Klickflaeche des
   Knopfs wird ueber die Karte gestreckt (li ist position: relative). Die
   Aufklapper liegen darueber und bleiben bedienbar. */
.bkkr-receipt--klickbar { cursor: pointer; transition: border-color .15s ease; }
.bkkr-receipt--klickbar:hover { border-color: var(--bkkr-ink-soft); }
.bkkr-receipt--klickbar .bkkr-receipt__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.bkkr-receipt--klickbar .bkkr-receipt__details > details { position: relative; z-index: 2; }
/* "article a:visited" und "a:visited" im bravekin-Theme setzen #444 mit hoeherer
   Spezifitaet als .bkkr-receipt__cta. Ohne diese Zeile waere ein schon einmal
   angeklickter Go-Link dunkle Schrift auf gruenem Knopf. */
.bkkr-receipt__cta:visited { color: #fff; }
.bkkr-receipt--hidden { display: none; }
.bkkr-more-btn {
    display: block;
    width: 100%;
    background: #fff;
    color: var(--bkkr-ink);
    border: 1.5px solid var(--bkkr-ink);
    border-radius: var(--bkkr-radius-pill);
    padding: .6rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    margin-top: .35rem;
    transition: background .15s ease, color .15s ease;
}
.bkkr-more-btn:hover { background: var(--bkkr-ink); color: #fff; }

.bkkr-receipts__divider {
    list-style: none;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bkkr-ink-soft);
    padding-top: .5rem;
}
.bkkr-receipt--out {
    border-style: dashed;
    box-shadow: none;
}
.bkkr-receipt--out:first-child { border-color: var(--bkkr-line); border-width: 1px; }
.bkkr-receipt__miss {
    display: inline-block;
    font-size: .65rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bkkr-ink-soft);
    border: 1px dashed var(--bkkr-ink-soft);
    padding: .18rem .55rem;
    border-radius: var(--bkkr-radius-pill);
    margin: 0 0 .55rem;
}
.bkkr-receipt__ad + .bkkr-receipt__miss, .bkkr-receipt__badge + .bkkr-receipt__miss { margin-left: .4rem; }
.bkkr-note { font-size: .78rem; color: var(--bkkr-ink-soft); margin-top: 1.2rem; max-width: 46rem; }
.bk-kartenrechner-offline { padding: 1rem; border: 1px dashed var(--bkkr-line); border-radius: var(--bkkr-radius); color: var(--bkkr-ink-soft); }
.bkkr-noscript { padding: 1rem 1.15rem; border: 1px dashed var(--bkkr-line); border-radius: var(--bkkr-radius); color: var(--bkkr-ink-soft); font-size: .9rem; }


.bkkr-receipt__logo { height: 26px; width: auto; max-width: 140px; object-fit: contain; object-position: left center; }
.bk-kartenrechner img[src*="logo-future-payments"] { padding-left: 2px; }

/* ---- Rechner-Beleg v2: Produktbild-Spalte + Kosten-Chips ----
   Desktop: Bild als eigene Spalte links neben dem gesamten Inhalt (CJ-Beispiel);
   mobil: Bild oben, deutlich kleiner. */
/* Bild oben ausgerichtet (15.09.2026). Mittig zentriert stand es bei langen
   Karten mit viel Leerraum darueber und darunter. */
.bkkr-receipt__inner { display: flex; align-items: flex-start; gap: 1.15rem; }
.bkkr-receipt__media {
    flex: 0 0 128px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: .35rem;
    border-right: 1px solid var(--bkkr-line);
    padding-right: 1.15rem;
}
.bkkr-receipt__media-note { font-size: .69rem; color: var(--bkkr-ink-soft); line-height: 1.2; text-align: center; }
.bkkr-receipt__media-img { width: 100%; max-height: 132px; object-fit: contain; }
.bkkr-receipt__device { font-size: .78rem; font-weight: 400; text-align: center; line-height: 1.3; }
.bkkr-receipt__device small { display: block; font-size: .72rem; font-weight: 400; color: var(--bkkr-ink-soft); }
.bkkr-receipt__body { flex: 1; min-width: 0; }
/* Ausstattungs-Chips: ganz leicht tuerkis hinterlegt (CJ 07.07.) */
.bkkr-receipt__feats { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; padding: 0; }
.bkkr-receipt__feats li { background: var(--bkkr-chip-bg); border-radius: var(--bkkr-radius-chip); padding: .3rem .6rem; font-size: .78rem; }
@media (max-width: 640px) {
    /* CJ 07.07.: mobil Bild oben, zentriert und gross (wie CJ-DevTools-Vorlage) */
    .bkkr-receipt__inner { flex-direction: column; align-items: stretch; gap: .6rem; }
    .bkkr-receipt__media {
        flex: none;
        align-self: stretch;
        align-items: center;
        border-right: 0;
        padding-right: 0;
        border-bottom: 1px solid var(--bkkr-line);
        padding-bottom: .7rem;
        width: 100%;
        justify-content: center;
    }
    .bkkr-receipt__media-note, .bkkr-receipt__device { text-align: center; }
    .bkkr-receipt__media-img { width: auto; height: auto; max-height: 132px; }
    .bkkr-receipt__feats { gap: .35rem; }
    .bkkr-receipt__feats li { padding: .24rem .5rem; font-size: .74rem; }
}