/*
 * Inklusivleistungen (11.11.2026) — EINE Datei für alle Shops.
 * Eingebunden von beiden Product/Offcanvas.html (main_theme, coop_theme), die
 * das Seitenlayout auf jeder Seite rendert; damit steht sie auch auf
 * Listenseiten für die Kurzzeile der Tarifkachel bereit.
 * Gestaltung: abgenommene Musterseite var/prototyp-inklusivleistungen,
 * Fassung „eine Zeile". Keine Icons, keine Kästen, nur Trennlinien.
 */

/* Provider colours, same values as shop-tarife.scss (scoped to the cards there). */
#tariffDetailsOffcanvas .tariff-details {
    --tarifdetails-farbe: #000;
    --tarifdetails-grau: #6b6b70;
    --tarifdetails-linie: #e3e3e6;
}
#tariffDetailsOffcanvas .tariff-details[data-anbieter="vodafone"] { --tarifdetails-farbe: #E70001; }
#tariffDetailsOffcanvas .tariff-details[data-anbieter="o2"] { --tarifdetails-farbe: #0050FF; }
#tariffDetailsOffcanvas .tariff-details[data-anbieter="telekom"] { --tarifdetails-farbe: #E20175; }
#tariffDetailsOffcanvas .tariff-details[data-anbieter="freenet"] { --tarifdetails-farbe: #21314D; }

/* Key figures in the style of "300 GB" on the card */
#tariffDetailsOffcanvas .tarifdetails-kennzahlen {
    display: grid;
    /* minmax(0, 1fr): a long figure ("Unbegrenzt") must not widen its column
       beyond the panel - at 320px the right column was clipped (11.11.2026). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 16px;
    margin: 22px 0 18px;
}
#tariffDetailsOffcanvas .tarifdetails-kennzahlen > * {
    min-width: 0;
}
/* Labels may hyphenate; the big figure shrinks instead of breaking a word. */
#tariffDetailsOffcanvas .tarifdetails-kennzahlen .was {
    overflow-wrap: anywhere;
    hyphens: auto;
}
#tariffDetailsOffcanvas .tarifdetails-kennzahlen .zahl {
    font-size: clamp(18px, 5.8vw, 28px);
    font-weight: 700;
    line-height: 1;
    color: var(--tarifdetails-farbe);
}
#tariffDetailsOffcanvas .tarifdetails-kennzahlen .was {
    font-size: 14px;
    font-weight: 300;
    color: var(--tarifdetails-grau);
    margin-top: 5px;
}

/* Plain list label / value, grouped */
#tariffDetailsOffcanvas .tarifdetails-leistungen .gruppe {
    margin: 4px 0 18px;
}
#tariffDetailsOffcanvas .tarifdetails-leistungen .gruppe:last-child {
    margin-bottom: 0;
}
#tariffDetailsOffcanvas .tarifdetails-leistungen h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
}
#tariffDetailsOffcanvas .tarifdetails-leistungen dl {
    margin: 0;
}
#tariffDetailsOffcanvas .tarifdetails-leistungen dl > div {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--tarifdetails-linie);
    font-size: 15px;
}
#tariffDetailsOffcanvas .tarifdetails-leistungen dl > div:first-child {
    border-top: 0;
}
#tariffDetailsOffcanvas .tarifdetails-leistungen dt {
    font-weight: 300;
    color: var(--tarifdetails-grau);
}
#tariffDetailsOffcanvas .tarifdetails-leistungen dd {
    margin: 0;
}
#tariffDetailsOffcanvas .tarifdetails-leistungen dd small {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--tarifdetails-grau);
}
@media (max-width: 380px) {
    #tariffDetailsOffcanvas .tarifdetails-leistungen dl > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/*
 * Short line on the tariff card: "EU-Roaming 80 GB | Weltweit 3 GB | 3 MultiSIM".
 * Items never split; a line break only happens between items. The separator
 * sits in the item's left padding; the inner box is shifted left and the outer
 * one clips, so a separator at the start of a wrapped line is cut off.
 */
.tarif-kurzzeile {
    margin: 10px 0 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}
.tarif-kurzzeile .innen {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
}
.tarif-kurzzeile .innen span {
    position: relative;
    padding-left: 15px;
    white-space: nowrap;
}
.tarif-kurzzeile .innen span::before {
    content: "|";
    position: absolute;
    left: 4px;
    color: #b5b5ba;
}