/* ================================================================
   Basis / Container
   ================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --tm-bg:#fff;
  --tm-surface:#f7f9fc;
  --tm-border:#e7ecf3;
  --tm-muted:#667085;
  --tm-text:#0f172a;
  --tm-ok:#12b76a;
  --tm-primary:#111827;
  --tm-primary-2:#0b1223;
  --tm-shadow:0 22px 48px rgba(16,24,40,.08);
  --tm-r:18px;
}

.tm-public-wrap{
  max-width:1360px;             /* mehr Breite */
  margin:0 auto;
  padding:8px;
}

/* Filter */
.tm-public-filters{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  align-items:end;
  margin:8px 0 16px;
}
.tm-public-filters .tm-filter{display:flex;flex-direction:column;gap:6px}
.tm-public-filters label{font-size:.9rem;color:#374151}
.tm-public-filters input[type="search"],
.tm-public-filters select{
  height:40px;border:1px solid #d1d5db;border-radius:10px;
  padding:0 12px;background:#fff;outline:none
}
.tm-public-filters .tm-btn{height:40px;border-radius:10px}

/* Grid-Liste (falls mehrere Karten nebeneinander genutzt werden) */
.tm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:980px){.tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .tm-public-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-grid{grid-template-columns:1fr}
}

/* Pager & States */
.tm-public-results{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:12px}
.tm-public-results.is-loading{opacity:.6;pointer-events:none}
.tm-public-pager{display:flex;gap:10px;justify-content:center;align-items:center;margin:16px 0}
.tm-pageinfo{color:#374151}
.tm-empty{padding:24px;text-align:center;color:#6b7280}

.tm-btn{border:1px solid #111827;background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer}
.tm-btn[disabled]{opacity:.5;cursor:not-allowed}
.tm-btn-primary{background:#111827;color:#fff;border-color:#111827}
.tm-btn-primary:hover{filter:brightness(1.08)}


/* ================================================================
   Tarifkarte v2 – Dreispaltiges Layout (left | mid | right)
   ================================================================ */

/* Grundlayout der Karte */
.tm-card.tm-tarif-card.tm-card--v2{
  background:#fff;
  border:1px solid var(--tm-border);
  border-radius:var(--tm-r);
  box-shadow:var(--tm-shadow);
  overflow:hidden;

  /* 3 Spalten */
  display:grid;
  grid-template-columns: 300px minmax(0,1fr) 380px; /* links | mitte | rechts – breiter */
  grid-template-areas: "left mid right";
  align-items:stretch;
  width:100%;
}

/* Spalten-Grundstil */
.tm-card.tm-tarif-card.tm-card--v2 .tm-col{
  padding:24px 26px;
  min-width:0; /* verhindert Wegdrücken durch lange Inhalte */
}

/* Linke Spalte */
.tm-card.tm-tarif-card.tm-card--v2 .tm-col--left{
  grid-area:left;
  border-right:1px solid var(--tm-border);
  display:flex; flex-direction:column; gap:16px;
}

/* Mittlere Spalte */
.tm-card.tm-tarif-card.tm-card--v2 .tm-col--mid{
  grid-area:mid;
  border-right:1px solid var(--tm-border);
  display:flex; flex-direction:column; gap:16px;
  min-width:0;
}

/* Rechte Spalte (Preise/CTA) */
.tm-card.tm-tarif-card.tm-card--v2 .tm-col--right{
  grid-area:right;
  display:flex; flex-direction:column; gap:16px;
  min-width:0;
}

/* ---------- sinnvolle Defaults ---------- */

/* allgemeine Netz-Icon-Definition */
.tm-net-icon{
  width:22px;height:22px;
  object-fit:contain;
  display:block;
}

/* Titel in der Mitte */
.tm-plan-title{
  margin:0 0 6px 0;
  font-size:26px;
  line-height:1.2;
  font-weight:800;
  color:var(--tm-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tm-subtitle{color:var(--tm-muted);font-size:14px}

/* ================================================================
   KPIs – 3 Spalten nebeneinander
   ================================================================ */
.tm-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); /* Netz | Daten | Allnet-Flat */
  gap:18px;
}
.tm-kpi{
  min-width:0;
  background:#f6f8fe;
  border:1px solid var(--tm-border);
  border-radius:14px;
  padding:16px 18px;
  display:grid;
  grid-template-columns:40px 1fr;
  column-gap:12px;
}
.tm-kpi .tm-kpi-icon{
  grid-row:1 / span 2; width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; background:#eef2ff;
}
.tm-kpi .tm-kpi-title{font-weight:700;font-size:15px;color:var(--tm-text)}
.tm-kpi .tm-kpi-sub{font-size:12px;color:var(--tm-muted)}

/* Netz-KPI: echtes Logo statt Emoji */
.tm-kpi.is-net .tm-net-icon{
  grid-row:1 / span 2;
  width:40px; height:40px;
  border-radius:10px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--tm-border);
  padding:6px;
  box-shadow:0 4px 12px rgba(16,24,40,.06);
  display:block;
}

/* Badge-Pillen (z. B. 5G / LTE) */
.tm-kpi-title .tm-badge{
  display:inline-block;
  margin-left:8px;
  padding:2px 6px;
  font-size:11px;
  line-height:1;
  border-radius:999px;
  background:#eef2f7;
  color:#0f172a;
  border:1px solid var(--tm-border);
  vertical-align:middle;
}
.tm-badge--5g{ font-weight:700; letter-spacing:.02em; }
.tm-badge--lte{ font-weight:700; }

/* Feature-Liste */
.tm-feats{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.tm-feat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Preis/CTA rechts */
.tm-price-block{margin-top:auto}
.tm-price-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--tm-border)}
.tm-price-row:last-child{border-bottom:0}
.tm-price-label{color:var(--tm-muted);font-size:13px}
.tm-price-value{font-weight:800;color:#0b1223}
.tm-month-price{font-size:34px;font-weight:900;letter-spacing:-.02em;margin-top:8px}
.tm-cta{
  margin-top:14px;height:48px;border-radius:12px;
  background:var(--tm-primary);color:#fff;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:700;border:none;
}

/* ---------- Responsiv ---------- */
@media (max-width:1280px){
  .tm-card.tm-tarif-card.tm-card--v2{
    grid-template-columns: 260px minmax(0,1fr) 320px; /* etwas kompakter */
  }
}
@media (max-width:980px){
  /* unter 980px: Spalten untereinander stapeln */
  .tm-card.tm-tarif-card.tm-card--v2{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "mid"
      "right";
  }
  .tm-card.tm-tarif-card.tm-card--v2 .tm-col--left,
  .tm-card.tm-tarif-card.tm-card--v2 .tm-col--mid{
    border-right:none;
    border-bottom:1px solid var(--tm-border);
  }
  /* KPIs mobil untereinander */
  .tm-kpis{ grid-template-columns:1fr; gap:14px; }
  .tm-feats{grid-template-columns:1fr}
}

/* Zusatz: Icongrößen in KPI & Pill */
.tm-kpi .tm-kpi-icon .tm-net-icon { width:40px; height:40px; display:block; object-fit:contain; }
.tm-net-pill .tm-net-icon { width:22px; height:22px; display:block; object-fit:contain; }

/* 2-spaltiges Layout für Vorteile (tm-benefits) */
.tm-benefits{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); /* zwei Spalten */
  gap:10px 16px;
  margin-top:8px;
}

.tm-benefit{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;               /* verhindert Überlaufen bei langem Text */
  white-space:nowrap;         /* optional: einzeilig */
  overflow:hidden;            /* optional */
  text-overflow:ellipsis;     /* optional */
}

.tm-benefit .dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#eaf5ff;
  border:1px solid var(--tm-border);
  font-size:12px;
  line-height:1;
}

/* Mobil: einspaltig */
@media (max-width:980px){
  .tm-benefits{ grid-template-columns:1fr; }
}