/* Fassung E: nur die Bausteine, die B nicht hat (Reiter, Handy-Abschnitt, Paketvergleich).
   Farben und Schriften kommen ausschliesslich aus den Variablen von B (site.css), damit hell und dunkel mitgehen. */

/* Funktionen in Reitern: eine Inhaltskarte wie in Fassung D (Reiterleiste oben, darunter Bild links, Text rechts),
   in B's Farben. Ohne Script bleibt die Leiste aus und alle Bereiche stehen untereinander in der Karte. */
.e-tabs{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 28px color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden}
.e-tablist{display:none;background:var(--soft);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.e-tablist::-webkit-scrollbar{display:none}
.e-js .e-tablist{display:flex}
.e-tab{flex:1;min-width:160px;padding:16px 20px;font:600 .95rem/1.2 'Outfit',sans-serif;color:var(--muted);background:transparent;border:0;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,background .15s}
.e-tab:hover{color:var(--ink)}
.e-tab[aria-selected="true"]{color:var(--accent);background:var(--surface);border-bottom-color:var(--accent)}
.e-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.e-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;align-items:center;padding:32px}
.e-panel+.e-panel{border-top:1px solid var(--line)}
.e-js .e-panel+.e-panel{border-top:0}
.e-panel[data-e-hidden]{display:none}
.e-panel:not([data-e-hidden]){animation:eTabFade .25s ease}
.e-panel:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.e-panel-bild{order:-1;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--soft);box-shadow:0 2px 10px color-mix(in srgb,var(--ink) 6%,transparent)}
.e-panel-bild img{display:block;width:100%;height:auto}
.e-panel-text h3{font:400 1.5rem/1.25 'Fraunces',Georgia,serif;margin:0 0 8px}
.e-panel-text p{color:var(--ink);font-size:1.05rem;line-height:1.5;margin:0 0 20px}
.e-panel-text .check-list{display:grid;gap:10px;font-size:.95rem}
.e-more{margin:22px 0 0}
@keyframes eTabFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Handy-App */
.e-handy{background:var(--soft);border-block:1px solid var(--line)}
.e-handy-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.e-handy-karten{display:grid;gap:14px}
.e-handy-karten article{padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.e-handy-karten h3{font:500 1.05rem/1.3 'Outfit',sans-serif;margin:0 0 4px}
.e-handy-karten article p{margin:0;color:var(--muted);font-size:.95rem}
.e-handy-stufen{margin:8px 0 0;font-size:.95rem}
.e-handy-bild{margin:0;text-align:center}
.e-handy-bild img{width:min(100%,360px);height:auto;border-radius:14px;border:1px solid var(--line)}

/* Paketvergleich */
.e-vergleich{overflow-x:auto}
.e-tabelle{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:.92rem;line-height:1.5}
.e-tabelle th,.e-tabelle td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.e-tabelle thead th,.e-tabelle thead td{border-top:0;vertical-align:bottom}
.e-tabelle tbody th{font-weight:500;width:17%;color:var(--ink)}
.e-tabelle td{color:var(--muted)}
.e-paket{display:block;font:400 1.4rem/1.2 'Fraunces',Georgia,serif;color:var(--ink)}
.e-preis{display:block;font:400 1.6rem/1.3 'Fraunces',Georgia,serif;color:var(--accent);margin-top:6px}
.e-preis small{font:400 .85rem/1.4 'Outfit',sans-serif;color:var(--muted)}
.e-preisnote{display:block;font-weight:400;font-size:.85rem;color:var(--muted);margin-top:4px}
.e-flag{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--accent-text);font:500 .72rem/1.4 'Outfit',sans-serif;letter-spacing:.04em}
.e-empfohlen,.e-tabelle td:nth-of-type(2){background:var(--soft)}
.e-nur-lesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:900px){
  .e-panel{grid-template-columns:1fr;gap:22px;padding:24px 20px}
  .e-panel-bild{order:0}
  .e-handy-layout{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){
  /* Vergleich als Karten: je Zeile ein Block, Paketnamen vor dem Text */
  .e-vergleich{overflow:visible}
  .e-tabelle,.e-tabelle tbody,.e-tabelle tr,.e-tabelle th,.e-tabelle td{display:block;width:auto}
  .e-tabelle{border:0;background:transparent}
  .e-tabelle thead tr{display:grid;gap:12px}
  .e-tabelle thead td{display:none}
  .e-tabelle thead th{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .e-tabelle thead th.e-empfohlen{background:var(--soft)}
  .e-tabelle tbody tr{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
  .e-tabelle tbody th{width:auto;background:var(--soft);border-top:0}
  .e-tabelle td::before{content:attr(data-label);display:block;font:500 .72rem/1.4 'Outfit',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
  .e-tabelle td:nth-of-type(2){background:transparent}
}
@media (prefers-reduced-motion:reduce){.e-tab{transition:none}.e-panel:not([data-e-hidden]){animation:none}}

/* Wortmarke wie in Fassung A: Fraunces kursiv 700, runder Punkt (Durchmesser 0,15 der Schriftgroesse, Abstand 0,05).
   Hell: Gruen mit Kupferpunkt; dunkel: Mint mit Pfirsichpunkt (docs/kommunikation/corporate-design/corporate-design-social-video-v4.md). */
.e-wortmarke{margin:18px 0 0;font:italic 700 clamp(2.9rem,6.8vw,6.1rem)/1 'Fraunces',Georgia,serif;letter-spacing:-.02em;color:var(--accent)}
.e-wortmarke em{font-style:italic}
.e-punkt{display:inline-block;width:.15em;height:.15em;margin-left:.05em;border-radius:50%;background:#c8764b}
:root[data-theme=dark] .e-punkt{background:#f8ac8f}

/* Daten-Abschnitt aus C: Nummern vor den drei Punkten; Demo als eigener Abschnitt weiter unten. */
.e-nr{display:inline-block;min-width:2.1em;font-size:.8em;letter-spacing:.06em;opacity:.7}

/* Kopf: die Wortmarke ist das groesste Element (Claim endet mit ihr); sie darf auf dem Handy nicht umbrechen. */
.e-wortmarke{white-space:nowrap;margin-top:6px}
/* Schriftzug in der Menueleiste und im Fuss wie die Wortmarke: Fraunces kursiv 700, hell Gruen, dunkel Mint, runder Punkt. */
.e-home .brand-word{font-weight:700;color:var(--accent)}
.e-home .brand-dot{display:inline-block;width:.15em;height:.15em;margin-left:.05em;border-radius:50%;background:#c8764b;overflow:hidden;text-indent:-9999px;white-space:nowrap;vertical-align:baseline}
:root[data-theme=dark] .e-home .brand-dot{background:#f8ac8f}

/* Funktionsbereich mit Demo-Knopf: die Demo-Bausteine von B bleiben im Dokument (landing.js braucht sie), sichtbar ist nur der Knopf. */
.e-demo-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.e-demo-cta .desktop-demo-notice{margin-top:0}