/* ecount-customer-portal — Portal-Stylesheet.
   Port aus docs/mockups/src/mockup.css (Mockup v2), alles unter .ecp, ohne @layer
   (Qode-/select-core-Globalstyles sind ungeschichtet; dieses Blatt wird als letztes enqueued).
   Bewegung liegt in portal-motion.css. Light-only (E18), alle Farben explizit.
   Schriften: „Ubuntu" lädt die Website selbst (live per OMGF selbst gehostet, Schnitte 300/400/500/700;
   600 aus dem Elementor-Kit fällt wie auf der übrigen Seite auf 700). „Ubuntu Mono" bringt das Plugin
   mit (assets/fonts/, Ubuntu Font Licence 1.0), nur 400/700, nur Latin — keine Anfrage an Google. */

@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ubuntu-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ubuntu-mono-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.ecp {
  color-scheme: light;
  --ecp-brand: #47B1EB;
  --ecp-primary-700: #1A75A8;
  --ecp-primary-800: #155F88;
  --ecp-primary-500: #2E90C8;
  --ecp-ink: #2C3238;
  --ecp-text: #54595F;
  --ecp-muted: #6E6E6E;
  --ecp-surface: #FFFFFF;
  --ecp-surface-2: #F5F8FA;
  --ecp-surface-3: #EAF0F4;
  --ecp-border: #DDE3E8;
  --ecp-border-soft: #E7ECF0;
  --ecp-rule: #C4CED6;
  --ecp-success: #1E7A34; --ecp-success-bg: #E9F5EC;
  --ecp-danger: #B02A1E; --ecp-danger-bg: #FBEDEB; --ecp-danger-border: #DFB3AD;
  --ecp-warning: #8A5A00; --ecp-warning-bg: #FFF4DC;
  --ecp-new-bg: #E8F4FC; --ecp-new-fg: #135D86;
  --ecp-font: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ecp-mono: 'Ubuntu Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ecp-radius: 3px; --ecp-radius-lg: 6px;
  --ecp-shadow-1: 0 1px 2px rgba(44,50,56,.06);
  --ecp-shadow-2: 0 6px 20px rgba(44,50,56,.10);
  --ecp-focus: 0 0 0 2px #fff, 0 0 0 4px var(--ecp-primary-700);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --t-instant: 100ms; --t-quick: 180ms; --t-move: 280ms;
  --e-out: cubic-bezier(.2,.8,.2,1); --e-in-out: cubic-bezier(.4,0,.2,1);
  /* Seiten-Rahmen im Original-Design der Website (Elementor-Werte Seite 12371) */
  --ecp-page-bg: #F6F9FF;
  --ecp-hero-bg: #53B1EB;
  --ecp-hero-height: 390px;
  --ecp-header-overlap: 100px;   /* transparenter Theme-Header, .qodef-content margin-top: -100px */
  --ecp-hero-pad: 70px;          /* Elementor-Sektion 12371: padding-top 70px */
  --ecp-container-pull: 83px;    /* Elementor-Sektion 12371: margin-top -83px */
  --ecp-container-width: 1100px; /* Inhaltsbreite = .qodef-container-inner des Themes */
  --ecp-container-pad: var(--sp-6); /* Innenabstand liegt außerhalb der 1100 px → Inhalt fluchtet mit dem Hero-Titel */
  --ecp-sticky-offset: 96px;

  background: var(--ecp-page-bg);
  color: var(--ecp-text);
  font: 400 16px/1.55 var(--ecp-font);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--sp-8);
}

/* --- Neutralisierung der Theme-Globalstyles (startit / select-core) ------------------
   Element-Selektoren stehen in :where(), damit der Block genau Spezifität (0,1,0) hat:
   genug gegen die Theme-Regeln (h1, a, p a, dt, table td … = (0,0,1)/(0,0,2)), aber schwächer
   als jede Komponentenklasse danach. Ohne :where() gewann z. B. `.ecp a` (0,1,1) gegen
   `.ecp-btn--primary` (0,1,0) — blauer Text auf blauem Button (erster Harness-Lauf). */
.ecp *, .ecp *::before, .ecp *::after { box-sizing: border-box; }
.ecp :where(h1, h2, h3, h4, h5, h6) {
  margin: 0; padding: 0; font-family: var(--ecp-font); font-weight: 600; font-style: normal;
  color: var(--ecp-ink); text-transform: none; letter-spacing: 0; line-height: inherit; text-wrap: balance;
}
.ecp :where(h1, h2, h3, h4, h5, h6) :where(a) { color: inherit; }
.ecp :where(a) { color: var(--ecp-primary-700); text-decoration: none; transition: none; }
.ecp :where(a):hover { color: var(--ecp-primary-800); text-decoration: underline; }
.ecp :where(p) { margin: 0; padding: 0; }
.ecp :where(ul, ol) { margin: 0; padding: 0; list-style: none; list-style-position: outside; }
.ecp :where(dl, dd, dt) { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
.ecp :where(table) { width: auto; border-collapse: collapse; border-spacing: 0; }
.ecp :where(th, td) { padding: 0; text-align: left; border: 0; }
.ecp :where(tr) { border: 0; }
.ecp :where(img) { max-width: 100%; height: auto; display: block; }
.ecp :where(label) { margin: 0; }
.ecp :where(input, select, textarea, button) { font-family: var(--ecp-font); letter-spacing: 0; text-transform: none; box-shadow: none; margin: 0; }
.ecp :where(button) { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.ecp :where(blockquote) { margin: 0; padding: 0; border: 0; font-style: normal; }
/* UA-[hidden] gegen Klassen-display absichern (.ecp-shell{display:grid}, .ecp-view{display:contents}) */
.ecp [hidden] { display: none !important; }
.ecp :focus-visible { outline: none; box-shadow: var(--ecp-focus); border-radius: var(--ecp-radius); }
.ecp .mono { font-family: var(--ecp-mono); font-variant-numeric: tabular-nums; }
.ecp .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ecp-stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.ecp-stack--lg { gap: var(--sp-6); }
.ecp-stack--sm { gap: var(--sp-3); }

/* --- Hero und weißer Container (Original-Design der Website) ------------------------- */
.ecp-skip { position: absolute; left: -9999px; top: 0; z-index: 60; padding: 10px var(--sp-4); background: var(--ecp-surface); color: var(--ecp-primary-700); border-radius: 0 0 var(--ecp-radius) 0; font-weight: 500; }
.ecp-skip:focus { left: 0; }
.ecp-hero {
  position: relative;
  background-color: var(--ecp-hero-bg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: var(--ecp-hero-height);
  padding: calc(var(--ecp-header-overlap) + var(--ecp-hero-pad)) 0 calc(var(--ecp-container-pull) + var(--sp-6));
  display: flex; flex-direction: column; justify-content: flex-start;
}
.ecp-hero__inner { width: min(var(--ecp-container-width), 100% - 2 * var(--sp-4)); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.ecp-hero__eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.ecp-hero__title { font-size: 36px; line-height: 1.2; color: #fff; font-weight: 600; }
.ecp-hero__subtitle { font-size: 17px; line-height: 1.5; font-style: italic; color: rgba(255,255,255,.92); max-width: 62ch; }
.ecp-container {
  position: relative; z-index: 2;
  width: min(var(--ecp-container-width) + 2 * var(--ecp-container-pad), 100% - 2 * var(--sp-4));
  margin: calc(-1 * var(--ecp-container-pull)) auto 0;
  padding: var(--ecp-container-pad);
  background: var(--ecp-surface);
  border: 1px solid var(--ecp-border-soft);
  border-radius: var(--ecp-radius-lg);
  box-shadow: var(--ecp-shadow-2);
}
/* Im weißen Container tragen Flächen, die im Mockup Weiß auf Grau waren, den Grauton */
.ecp-container .ecp-nav__item:hover { background: var(--ecp-surface-2); }
.ecp-container .ecp-nav__item.is-active { background: var(--ecp-surface-2); box-shadow: none; }

/* --- Shell ------------------------------------------------------------------------- */
.ecp-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.ecp-nav { position: sticky; top: var(--ecp-sticky-offset); display: flex; flex-direction: column; gap: 2px; }
.ecp-nav__item { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-radius: var(--ecp-radius); color: var(--ecp-text); text-decoration: none; font-weight: 500; font-size: 15px; border-left: 3px solid transparent; transition: background var(--t-instant) var(--e-out), color var(--t-instant) var(--e-out); }
.ecp-nav__item:hover { background: var(--ecp-surface); color: var(--ecp-ink); text-decoration: none; }
.ecp-nav__item.is-active { background: var(--ecp-surface); color: var(--ecp-primary-700); border-left-color: var(--ecp-brand); box-shadow: var(--ecp-shadow-1); }
.ecp-nav__item svg { width: 18px; height: 18px; flex: none; }
.ecp-nav__count { margin-left: auto; font-size: 12px; font-weight: 500; padding: 1px 7px; border-radius: 999px; background: var(--ecp-new-bg); color: var(--ecp-new-fg); font-variant-numeric: tabular-nums; }
.ecp-user { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-3) 0; border-top: 1px solid var(--ecp-border); font-size: 14px; }
.ecp-user strong { display: block; color: var(--ecp-ink); font-weight: 500; }
.ecp-user span { color: var(--ecp-muted); display: block; margin-bottom: var(--sp-2); }
.ecp-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.ecp-main:focus, .ecp-main:focus-visible { outline: none; box-shadow: none; }
.ecp-view { display: contents; }
.ecp-adminbar { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--ecp-border); border-radius: var(--ecp-radius); background: var(--ecp-surface-2); font-size: 14px; }
.ecp-adminbar svg { width: 16px; height: 16px; color: var(--ecp-primary-700); flex: none; }
.ecp-adminbar a { margin-left: auto; }

/* --- Kopf --------------------------------------------------------------------------- */
.ecp-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ecp-auth > .ecp-head, .ecp-state > .ecp-head { margin-bottom: var(--sp-6); }
.ecp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 14px; color: var(--ecp-muted); }
.ecp-crumbs a { text-decoration: none; }
.ecp-crumbs a:hover { text-decoration: underline; }
.ecp-crumbs span[aria-hidden] { color: var(--ecp-rule); }
.ecp-title { font-size: 28px; line-height: 1.25; }
.ecp-title--sm { font-size: 22px; }
.ecp-lede { font-size: 16px; color: var(--ecp-muted); max-width: 64ch; }
.ecp-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-4); }
.ecp-head__row > .ecp-btn, .ecp-head__row > .ecp-form__actions { margin-top: 2px; }
.ecp-head__main { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ecp-head__main--grow { flex: 1 1 320px; max-width: 640px; }
.ecp-prodhead { display: flex; gap: var(--sp-4); align-items: center; min-width: 0; }

/* --- Karten und Sektionen ----------------------------------------------------------- */
.ecp-card { background: var(--ecp-surface); border: 1px solid var(--ecp-border); border-radius: var(--ecp-radius-lg); box-shadow: var(--ecp-shadow-1); }
.ecp-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--ecp-border-soft); }
.ecp-card__head h2, .ecp-card__head h3 { font-size: 18px; }
.ecp-card__head a { font-size: 14px; text-decoration: none; }
.ecp-card__head a:hover { text-decoration: underline; }
.ecp-card__body { padding: var(--sp-5); }
.ecp-card__body--flush { padding: 0; }
.ecp-card--narrow { max-width: 640px; }
.ecp-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.ecp-section__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.ecp-section__head h2 { font-size: 20px; line-height: 1.35; }
.ecp-section__head span { font-size: 14px; color: var(--ecp-muted); }
.ecp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.ecp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ecp-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.ecp-two--stretch { align-items: stretch; }
.ecp-two > * { min-width: 0; }

/* --- Produktkarte -------------------------------------------------------------------- */
.ecp-product { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "tile head" "foot foot"; gap: var(--sp-3) var(--sp-4); padding: var(--sp-4); background: var(--ecp-surface); border: 1px solid var(--ecp-border); border-radius: var(--ecp-radius-lg); position: relative; transition: box-shadow var(--t-quick) var(--e-out), transform var(--t-quick) var(--e-out), border-color var(--t-instant) var(--e-out); }
.ecp-product:hover { box-shadow: var(--ecp-shadow-1); transform: translateY(-2px); }
.ecp-product:focus-within { border-color: var(--ecp-primary-500); }
.ecp-product__img { grid-area: tile; width: 64px; height: 64px; border-radius: var(--ecp-radius); background: var(--ecp-surface-2); border: 1px solid var(--ecp-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.ecp-product__img b { font: 700 13px/1 var(--ecp-mono); letter-spacing: .08em; color: var(--ecp-primary-800); }
.ecp-product__img i { font: 400 12px/1 var(--ecp-mono); font-style: normal; color: var(--ecp-muted); letter-spacing: .02em; }
.ecp-product__img img { width: 100%; height: 100%; object-fit: contain; }
.ecp-product__img--lg { width: 72px; height: 72px; flex: none; gap: var(--sp-1); }
.ecp-product__img--lg b { font-size: 15px; }
.ecp-product__img--lg i { font-size: 13px; }
.ecp-product__head { grid-area: head; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding-right: var(--sp-5); }
.ecp-product__name { font-size: 16px; font-weight: 600; color: var(--ecp-ink); text-decoration: none; line-height: 1.3; }
.ecp-product__name:hover { color: var(--ecp-ink); text-decoration: none; }
.ecp-product__name::after { content: ''; position: absolute; inset: 0; }
.ecp-product__desc { font-size: 14px; line-height: 1.45; color: var(--ecp-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ecp-product__foot { grid-area: foot; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: 13px; color: var(--ecp-muted); border-top: 1px solid var(--ecp-border-soft); padding-top: var(--sp-3); }
.ecp-product__count { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.ecp-chips { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; overflow: hidden; }
.ecp-chip { font-size: 12px; font-weight: 500; line-height: 1.5; padding: 1px 6px; border-radius: 999px; background: var(--ecp-surface-2); border: 1px solid var(--ecp-border); color: var(--ecp-text); white-space: nowrap; }
.ecp-chips__more { font-size: 12px; color: var(--ecp-muted); white-space: nowrap; }
.ecp-product > .ecp-product__foot > .ecp-star { position: absolute; top: 10px; right: 10px; }
.ecp-star { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ecp-muted); cursor: pointer; transition: color var(--t-instant) var(--e-out), background var(--t-instant) var(--e-out); }
.ecp-star:hover { background: var(--ecp-surface-2); color: var(--ecp-ink); }
.ecp-star[aria-pressed="true"] { color: var(--ecp-primary-700); }
.ecp-star svg { width: 18px; height: 18px; }
.ecp-star[aria-pressed="true"] svg path { fill: currentColor; }

/* --- Badges -------------------------------------------------------------------------- */
.ecp-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--ecp-radius); line-height: 1.3; white-space: nowrap; }
.ecp-badge--new { background: var(--ecp-new-bg); color: var(--ecp-new-fg); }
.ecp-badge--latest { background: var(--ecp-success-bg); color: var(--ecp-success); }
.ecp-badge--warn { background: var(--ecp-warning-bg); color: var(--ecp-warning); }
.ecp-badges { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; vertical-align: 1px; }
.ecp-ver { font-family: var(--ecp-mono); font-size: 13px; padding: 1px 6px; border-radius: var(--ecp-radius); background: var(--ecp-surface-2); border: 1px solid var(--ecp-border); color: var(--ecp-ink); white-space: nowrap; }

/* --- Dateizeile und Versionsleiter (Signature-Element) ------------------------------- */
.ecp-files { display: flex; flex-direction: column; }
.ecp-file { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--ecp-border-soft); }
.ecp-files > .ecp-file:first-child, .ecp-files > details:first-child > .ecp-file { border-top: 0; }
.ecp-file__icon { width: 40px; height: 40px; border-radius: var(--ecp-radius); background: var(--ecp-surface-2); border: 1px solid var(--ecp-border); display: grid; place-items: center; font: 700 11px/1 var(--ecp-mono); color: var(--ecp-text); letter-spacing: .04em; }
.ecp-file__icon[data-ext="PDF"] { background: var(--ecp-surface); color: var(--ecp-ink); }
.ecp-file__icon[data-ext="ZIP"] { background: var(--ecp-surface-3); color: var(--ecp-ink); }
.ecp-file__icon[data-ext="PNG"], .ecp-file__icon[data-ext="JPG"] { border-style: dashed; color: var(--ecp-muted); }
.ecp-file__main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ecp-file__name { font-weight: 500; line-height: 1.35; color: var(--ecp-ink); overflow-wrap: anywhere; }
/* Trennpunkt steht als ::before VOR jedem Eintrag, außerhalb seiner Box. Die Zeile ist um eine
   Trennerbreite nach links verschoben und dort per clip-path beschnitten: Der Punkt vor dem ersten
   Eintrag jeder Zeile liegt im abgeschnittenen Streifen, am Zeilenende steht nie einer. */
.ecp-file__meta { --ecp-meta-sep: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) 0; margin-left: calc(-1 * var(--ecp-meta-sep)); clip-path: inset(0 0 0 var(--ecp-meta-sep)); font-size: 13px; color: var(--ecp-muted); }
.ecp-file__meta > * { position: relative; margin-left: var(--ecp-meta-sep); }
.ecp-file__meta > *::before { content: '\00b7'; position: absolute; top: 50%; right: 100%; width: var(--ecp-meta-sep); transform: translateY(-50%); text-align: center; line-height: 1; color: var(--ecp-rule); font-family: var(--ecp-font); }
.ecp-file__meta .mono { color: var(--ecp-text); }
.ecp-file__act { display: flex; align-items: center; gap: var(--sp-2); }
.ecp-versions { border-top: 1px solid var(--ecp-border-soft); }
.ecp-versions > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) var(--sp-3) 80px; font-size: 14px; color: var(--ecp-primary-700); font-weight: 500; transition: background var(--t-instant) var(--e-out); }
.ecp-versions > summary:hover { background: var(--ecp-surface-2); }
.ecp-versions > summary::-webkit-details-marker { display: none; }
.ecp-versions > summary svg { width: 14px; height: 14px; transition: transform var(--t-quick) var(--e-in-out); }
.ecp-versions[open] > summary svg { transform: rotate(90deg); }
.ecp-versions__list { position: relative; display: flex; flex-direction: column; margin: 0 var(--sp-5) var(--sp-4) 80px; }
.ecp-versions__list::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--ecp-border); transform-origin: top; }
.ecp-versions__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); position: relative; }
.ecp-versions__row::before { content: ''; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--ecp-surface); border: 2px solid var(--ecp-rule); transform: translateY(-50%); }
.ecp-versions__row .ecp-file__meta { font-size: 13px; }
.ecp-versions__row .ecp-file__name { font-size: 14px; font-weight: 400; }

/* --- Tabs ---------------------------------------------------------------------------- */
.ecp-tabs { position: relative; display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--ecp-border-soft); padding: 0 var(--sp-5); overflow-x: auto; scrollbar-width: thin; }
.ecp-tab { appearance: none; background: none; border: 0; padding: var(--sp-3) var(--sp-3) 14px; font-weight: 500; font-size: 16px; color: var(--ecp-muted); cursor: pointer; white-space: nowrap; display: inline-flex; gap: var(--sp-2); align-items: center; transition: color var(--t-instant) var(--e-out); }
.ecp-tab:hover { color: var(--ecp-ink); }
.ecp-tab[aria-selected="true"] { color: var(--ecp-primary-700); }
.ecp-tab .ecp-nav__count { margin-left: 0; background: var(--ecp-surface-2); border: 1px solid var(--ecp-border); color: var(--ecp-text); }
.ecp-tab[aria-selected="true"] .ecp-nav__count { background: var(--ecp-new-bg); border-color: transparent; color: var(--ecp-new-fg); }
.ecp-tabs__ind { position: absolute; left: 0; bottom: -1px; height: 3px; width: var(--tw, 0); background: var(--ecp-brand); border-radius: 2px 2px 0 0; translate: var(--tx, 0) 0; transition: translate var(--t-move) var(--e-in-out), width var(--t-move) var(--e-in-out); }
.ecp-tabs__ind.is-instant { transition: none; }
.ecp-panel__title { padding: var(--sp-4) var(--sp-5) var(--sp-2); font-size: 16px; border-top: 1px solid var(--ecp-border-soft); }
.ecp-panel:first-of-type .ecp-panel__title { border-top: 0; }

/* --- Buttons ------------------------------------------------------------------------- */
.ecp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--ecp-radius); border: 1px solid transparent; font-weight: 500; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--t-instant) var(--e-out), border-color var(--t-instant) var(--e-out), color var(--t-instant) var(--e-out); }
.ecp-btn:hover { text-decoration: none; }
.ecp-btn svg { width: 16px; height: 16px; flex: none; }
.ecp-btn--primary { background: var(--ecp-primary-700); color: #fff; }
.ecp-btn--primary:hover { background: var(--ecp-primary-800); color: #fff; }
.ecp-btn--secondary { background: var(--ecp-surface); border-color: var(--ecp-border); color: var(--ecp-primary-700); }
.ecp-btn--secondary:hover { border-color: var(--ecp-primary-500); background: var(--ecp-surface-2); color: var(--ecp-primary-800); }
.ecp-btn--ghost { background: transparent; color: var(--ecp-primary-700); }
.ecp-btn--ghost:hover { background: var(--ecp-surface-2); color: var(--ecp-primary-800); }
.ecp-btn--danger { background: transparent; color: var(--ecp-danger); padding-left: 0; }
.ecp-btn--danger:hover { color: var(--ecp-danger); background: transparent; }
.ecp-btn--sm { min-height: 32px; padding: 0 var(--sp-3); font-size: 14px; }
.ecp-btn--flush { padding-left: 0; }
.ecp-btn.is-busy, .ecp-btn.is-done { color: transparent; position: relative; pointer-events: none; }
.ecp-btn.is-busy::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: ecp-spin 800ms linear infinite; }
.ecp-btn--secondary.is-busy::after, .ecp-btn--ghost.is-busy::after { border-color: var(--ecp-border); border-top-color: var(--ecp-primary-700); }
.ecp-btn.is-done::after { content: ''; position: absolute; width: 7px; height: 12px; border: 2px solid #fff; border-top: 0; border-left: 0; rotate: 45deg; margin-top: -2px; animation: ecp-check var(--t-quick) var(--e-out); }
.ecp-btn--secondary.is-done::after, .ecp-btn--ghost.is-done::after { border-color: var(--ecp-primary-700); }

/* --- Formulare ----------------------------------------------------------------------- */
.ecp-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.ecp-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.ecp-field { display: flex; flex-direction: column; gap: 6px; }
.ecp-label { font-size: 14px; font-weight: 500; color: var(--ecp-ink); display: flex; align-items: baseline; gap: 6px; }
.ecp-label small { font-weight: 400; font-size: 13px; color: var(--ecp-muted); }
.ecp-input, .ecp-select, .ecp-textarea { width: 100%; font: inherit; font-size: 16px; line-height: 22px; min-height: 40px; height: auto; padding: 8px var(--sp-3); border: 1px solid var(--ecp-border); border-radius: var(--ecp-radius); background: var(--ecp-surface); color: var(--ecp-ink); transition: border-color var(--t-instant) var(--e-out); }
.ecp-select { padding-right: var(--sp-2); }
.ecp-input:hover, .ecp-select:hover, .ecp-textarea:hover { border-color: var(--ecp-rule); }
.ecp-input:focus, .ecp-select:focus, .ecp-textarea:focus { border-color: var(--ecp-primary-500); outline: none; box-shadow: var(--ecp-focus); }
.ecp-input[readonly] { background: var(--ecp-surface-2); color: var(--ecp-text); }
.ecp-textarea { min-height: 148px; resize: vertical; }
.ecp-hint { font-size: 13px; line-height: 1.45; color: var(--ecp-muted); }
.ecp-error { font-size: 13px; line-height: 1.45; color: var(--ecp-danger); }
.ecp-field.is-invalid .ecp-input { border-color: var(--ecp-danger-border); background: var(--ecp-danger-bg); }
.ecp-field.is-invalid .ecp-input:focus { border-color: var(--ecp-danger); background: var(--ecp-surface); }
.ecp-form__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.ecp-rules { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: var(--sp-1); font-size: 13px; color: var(--ecp-muted); }
.ecp-rules li { display: flex; gap: var(--sp-2); align-items: center; }
.ecp-rules li svg { width: 14px; height: 14px; color: var(--ecp-rule); flex: none; }
.ecp-rules li.is-ok { color: var(--ecp-success); }
.ecp-rules li.is-ok svg { color: var(--ecp-success); }
.ecp-strength { height: 4px; border-radius: 999px; background: var(--ecp-surface-3); overflow: hidden; margin-top: 2px; }
.ecp-strength span { display: block; height: 100%; width: 0; background: var(--ecp-warning); border-radius: inherit; transition: width var(--t-move) var(--e-in-out); }
.ecp-strength[data-level="3"] span { background: var(--ecp-success); }
.ecp-file-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--ecp-border); border-radius: var(--ecp-radius); font-size: 14px; }
.ecp-notice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--ecp-radius); font-size: 14px; line-height: 1.45; }
.ecp-notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ecp-notice--info { background: var(--ecp-new-bg); color: var(--ecp-new-fg); }
.ecp-notice--warn { background: var(--ecp-warning-bg); color: var(--ecp-warning); }
.ecp-notice--error { background: var(--ecp-danger-bg); color: var(--ecp-danger); }
.ecp-notice--success { background: var(--ecp-success-bg); color: var(--ecp-success); }
.ecp-notice a { color: inherit; text-decoration: underline; }

/* --- Suche --------------------------------------------------------------------------- */
.ecp-search { position: relative; }
/* Jedes Kind von .ecp-view bekommt durch ecp-rise (translate, fill both) einen eigenen Stapelkontext;
   ohne Anhebung malt die nachfolgende Sektion über das Suchpanel im Kopf. */
.ecp-view > .ecp-head { position: relative; z-index: 2; }
.ecp-search__input { padding-left: 40px; }
.ecp-search__icon { position: absolute; left: 12px; top: 20px; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ecp-muted); pointer-events: none; }
.ecp-search__panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); padding: var(--sp-2) 0; background: var(--ecp-surface); border: 1px solid var(--ecp-border); border-radius: var(--ecp-radius-lg); box-shadow: var(--ecp-shadow-2); max-height: 420px; overflow: auto; }
.ecp-search__group { padding: var(--sp-2) var(--sp-4) var(--sp-1); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ecp-muted); }
.ecp-search__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-4); text-decoration: none; color: var(--ecp-ink); font-size: 14px; transition: background var(--t-instant) var(--e-out); }
.ecp-search__item:hover, .ecp-search__item:focus { background: var(--ecp-surface-2); color: var(--ecp-ink); text-decoration: none; }
.ecp-search__item small { display: block; font-size: 13px; color: var(--ecp-muted); }
.ecp-search__item svg { width: 16px; height: 16px; color: var(--ecp-rule); }
.ecp-search__empty { padding: var(--sp-3) var(--sp-4); font-size: 14px; line-height: 1.45; color: var(--ecp-muted); }

/* --- Explorer ------------------------------------------------------------------------ */
.ecp-tree { display: flex; flex-direction: column; }
.ecp-tree__row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--ecp-border-soft); text-decoration: none; color: var(--ecp-ink); font-size: 15px; transition: background var(--t-instant) var(--e-out); }
.ecp-tree__row:first-child { border-top: 0; }
.ecp-tree__row:hover { background: var(--ecp-surface-2); color: var(--ecp-ink); text-decoration: none; }
.ecp-tree__row svg { width: 18px; height: 18px; color: var(--ecp-muted); }
.ecp-tree__row svg.ecp-tree__go { color: var(--ecp-rule); width: 16px; height: 16px; }
.ecp-tree__row .mono { font-size: 13px; color: var(--ecp-muted); }

/* --- Zustände ------------------------------------------------------------------------ */
.ecp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-5); }
.ecp-empty__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--ecp-surface-2); border: 1px solid var(--ecp-border); display: grid; place-items: center; margin-bottom: var(--sp-1); }
.ecp-empty__icon svg { width: 22px; height: 22px; color: var(--ecp-muted); }
.ecp-empty h2, .ecp-empty h3 { font-size: 18px; }
.ecp-empty p { max-width: 52ch; margin-inline: auto; }
.ecp-empty .ecp-btn { margin-top: var(--sp-1); }
.ecp-empty--flush { padding: var(--sp-2) 0; align-items: flex-start; text-align: left; }
.ecp-empty--flush p { margin-inline: 0; }
.ecp-skel { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.ecp-skel span { display: block; height: 14px; border-radius: var(--ecp-radius); background: linear-gradient(90deg, var(--ecp-surface-3) 25%, var(--ecp-surface-2) 50%, var(--ecp-surface-3) 75%); background-size: 200% 100%; animation: ecp-shimmer 1.4s var(--e-in-out) infinite; }
.ecp-skel span:nth-child(2) { width: 70%; } .ecp-skel span:nth-child(3) { width: 45%; }
.ecp-toast { position: fixed; z-index: 40; left: 50%; bottom: var(--sp-5); transform: translateX(-50%); display: flex; gap: var(--sp-3); align-items: center; max-width: min(92vw, 520px); padding: var(--sp-3) var(--sp-4); background: var(--ecp-ink); color: #fff; border-radius: var(--ecp-radius-lg); box-shadow: var(--ecp-shadow-2); font-size: 14px; opacity: 0; translate: 0 8px; transition: opacity var(--t-move) var(--e-out), translate var(--t-move) var(--e-out); pointer-events: none; }
.ecp-toast.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.ecp-toast a { color: #B9D9EC; }
.ecp-toast a:hover { color: #fff; }

/* --- Auth-Zustände -------------------------------------------------------------------- */
.ecp-auth { max-width: 440px; margin: 0 auto; }
.ecp-auth--wide { max-width: 560px; }
.ecp-auth .ecp-card__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.ecp-auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); font-size: 14px; }
.ecp-um { display: flex; flex-direction: column; gap: var(--sp-4); }
.ecp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); counter-reset: step; }
.ecp-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3); }
.ecp-steps li::before { counter-increment: step; content: counter(step); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; background: var(--ecp-surface-2); border: 1px solid var(--ecp-border); color: var(--ecp-text); }
.ecp-steps li.is-done::before { background: var(--ecp-success-bg); border-color: transparent; color: var(--ecp-success); }
.ecp-steps li.is-current::before { background: var(--ecp-primary-700); border-color: transparent; color: #fff; }
.ecp-steps strong { display: block; color: var(--ecp-ink); font-weight: 500; }
.ecp-steps p { font-size: 14px; line-height: 1.45; color: var(--ecp-muted); }
.ecp-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); font-size: 14px; }
.ecp-kv dt { color: var(--ecp-muted); }
.ecp-kv dd { margin: 0; color: var(--ecp-ink); }

/* --- Übersicht ------------------------------------------------------------------------ */
.ecp-mine { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ecp-mine__item { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-3); border: 1px solid var(--ecp-border); border-radius: var(--ecp-radius); background: var(--ecp-surface); text-decoration: none; color: var(--ecp-ink); font-weight: 500; font-size: 14px; transition: border-color var(--t-instant) var(--e-out), background var(--t-instant) var(--e-out); }
.ecp-mine__item:hover { border-color: var(--ecp-primary-500); background: var(--ecp-surface-2); color: var(--ecp-ink); text-decoration: none; }
.ecp-bundle { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--ecp-border-soft); }
.ecp-bundle:first-child { border-top: 0; }
.ecp-bundle--compact { grid-template-columns: 40px minmax(0, 1fr); align-items: start; row-gap: var(--sp-2); }
.ecp-bundle--compact .ecp-btn { grid-column: 2; justify-self: start; }
.ecp-teaser { display: flex; flex-direction: column; flex: 1; }
.ecp-teaser .ecp-card__body { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
.ecp-teaser__icon { width: 40px; height: 40px; border-radius: var(--ecp-radius); background: var(--ecp-new-bg); display: grid; place-items: center; margin-bottom: var(--sp-1); }
.ecp-teaser__icon svg { width: 20px; height: 20px; color: var(--ecp-new-fg); }
.ecp-teaser .ecp-btn { margin-top: auto; align-self: flex-start; }
.ecp-teaser__title { font-size: 18px; }

/* --- Bestätigungsdialog (core/dialog.js) --------------------------------------------- */
.ecp-dialog { padding: 0; border: 0; background: transparent; width: min(480px, 100% - 2 * var(--sp-4)); max-width: none; }
.ecp-dialog::backdrop { background: rgba(44,50,56,.45); }
.ecp-dialog h2 { font-size: 18px; }

/* --- Meine Produkte -------------------------------------------------------------------- */
.ecp-toggle-list { display: flex; flex-direction: column; }
.ecp-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--ecp-border-soft); }
.ecp-toggle:first-child { border-top: 0; }
.ecp-toggle strong { font-weight: 500; color: var(--ecp-ink); display: block; }
.ecp-toggle small { color: var(--ecp-muted); font-size: 13px; }
.ecp-switch { position: relative; width: 44px; height: 24px; border-radius: 999px; border: 0; background: var(--ecp-rule); cursor: pointer; flex: none; transition: background var(--t-instant) var(--e-out); }
.ecp-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--ecp-shadow-1); transition: translate var(--t-quick) var(--e-in-out); }
.ecp-switch[aria-checked="true"] { background: var(--ecp-primary-700); }
.ecp-switch[aria-checked="true"]::after { translate: 20px 0; }

/* --- UM-Formulare in der Shell angleichen (Login / Registrierung) ----------------------
   Im echten WordPress lädt UM um-styles.min.css UND um-old-default.min.css (Legacy-Farben #3ba1da,
   #ddd, #aaa, #888), viele Werte mit !important und nach portal.css. Darum Scope `.ecp .ecp-um`
   (höhere Spezifität als jede UM-Regel) und !important genau dort, wo UM selbst !important setzt. */
.ecp .ecp-um .um { max-width: none; margin: 0 !important; color: var(--ecp-text); font-size: 16px; }
.ecp .ecp-um .um-row { margin: 0 !important; } /* UM setzt margin inline (0 0 30px 0) */
.ecp .ecp-um .um-field, .ecp .ecp-um .um-field-b, .ecp .ecp-um .um-field-c { padding: 0; margin: 0 0 var(--sp-4); }
.ecp .ecp-um .um-field-label { margin: 0 0 6px; color: var(--ecp-ink); }
.ecp .ecp-um .um-field-label label { font-family: var(--ecp-font); font-size: 14px !important; line-height: 1.45 !important; font-weight: 500; color: var(--ecp-ink); }
.ecp .ecp-um span.um-req { margin: 0 0 0 4px; font-size: 13px; color: var(--ecp-muted); }
.ecp .ecp-um .um-form input[type="text"], .ecp .ecp-um .um-form input[type="email"], .ecp .ecp-um .um-form input[type="password"],
.ecp .ecp-um .um-form input[type="tel"], .ecp .ecp-um .um-form input[type="url"], .ecp .ecp-um .um-form input[type="number"] {
  width: 100%; max-width: none; height: 40px !important; min-height: 40px; padding: 8px var(--sp-3) !important;
  border: 1px solid var(--ecp-border) !important; border-radius: var(--ecp-radius); background: var(--ecp-surface); color: var(--ecp-ink);
  font-family: var(--ecp-font); font-size: 16px !important; line-height: 22px; box-shadow: none !important;
  transition: border-color var(--t-instant) var(--e-out);
}
.ecp .ecp-um .um-form input[type="text"]:hover, .ecp .ecp-um .um-form input[type="password"]:hover, .ecp .ecp-um .um-form input[type="tel"]:hover { border-color: var(--ecp-rule) !important; }
.ecp .ecp-um .um-form input[type="text"]:focus, .ecp .ecp-um .um-form input[type="email"]:focus, .ecp .ecp-um .um-form input[type="password"]:focus,
.ecp .ecp-um .um-form input[type="tel"]:focus, .ecp .ecp-um .um-form input[type="url"]:focus { border-color: var(--ecp-primary-500) !important; box-shadow: var(--ecp-focus) !important; }
.ecp .ecp-um .um-form input.um-error { border-color: var(--ecp-danger-border) !important; background: var(--ecp-danger-bg); }
/* Fehlermeldungen: UM rendert sie serverseitig unter dem Feld (.um-field-error) oder oben (p.um-notice). */
.ecp .ecp-um .um-field-error { margin-top: 6px; padding: 6px 10px; background: var(--ecp-danger-bg); border: 1px solid var(--ecp-danger-border); border-radius: var(--ecp-radius); color: var(--ecp-danger); font-size: 13px; line-height: 1.45; }
.ecp .ecp-um .um-field-error .um-field-arrow { display: none; }
.ecp .ecp-um .um-field-error a { color: var(--ecp-danger) !important; }
.ecp .ecp-um p.um-notice { margin: 0 0 var(--sp-4) !important; padding: var(--sp-3) var(--sp-4) !important; border-radius: var(--ecp-radius); font-size: 14px; line-height: 1.45; }
.ecp .ecp-um p.um-notice.err { background: var(--ecp-danger-bg); border: 1px solid var(--ecp-danger-border); color: var(--ecp-danger); }
.ecp .ecp-um p.um-notice.success { background: var(--ecp-success-bg); color: var(--ecp-success); }
.ecp .ecp-um p.um-notice a { color: inherit; }
/* Checkboxen („Angemeldet bleiben", Datenschutz): UM zeichnet ein Icon, das echte Input ist unsichtbar. */
.ecp .ecp-um .um-field-checkbox { display: block; position: relative; margin: 0 !important; cursor: pointer; }
.ecp .ecp-um .um-field-checkbox-state { top: 0; left: 0; width: 22px; height: 22px; border-radius: var(--ecp-radius); }
.ecp .ecp-um .um-field-checkbox-state i { font-size: 22px; line-height: 22px; height: 22px; color: var(--ecp-muted); transition: color var(--t-instant) var(--e-out); }
.ecp .ecp-um .um-field-checkbox:hover .um-field-checkbox-state i, .ecp .ecp-um .um-field-checkbox.active .um-field-checkbox-state i { color: var(--ecp-primary-700); }
.ecp .ecp-um .um-field-checkbox:focus-within .um-field-checkbox-state { box-shadow: var(--ecp-focus); }
.ecp .ecp-um .um-field-checkbox-option { margin: 0 0 0 32px; line-height: 22px; font-size: 14px; color: var(--ecp-text) !important; }
.ecp .ecp-um a.um-toggle-gdpr, .ecp .ecp-um a.um-link-alt { color: var(--ecp-primary-700); font-size: 14px; }
/* Absende-Button wie .ecp-btn--primary, volle Breite. */
.ecp .ecp-um .um-col-alt { margin: var(--sp-2) 0 0; }
.ecp .ecp-um .um-center, .ecp .ecp-um .um-col-alt .um-half { float: none; width: 100%; padding: 0; text-align: left; }
.ecp .ecp-um input[type="submit"].um-button, .ecp .ecp-um .um-center .um-button {
  display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 44px;
  padding: 10px var(--sp-4) !important; border: 1px solid transparent !important; border-radius: var(--ecp-radius) !important;
  background: var(--ecp-primary-700); color: #fff; font-family: var(--ecp-font); font-size: 15px; font-weight: 500 !important; line-height: 1.2 !important;
  text-transform: none !important; box-shadow: none; cursor: pointer; transition: background var(--t-instant) var(--e-out);
}
.ecp .ecp-um input[type="submit"].um-button:hover { background: var(--ecp-primary-800); }
.ecp .ecp-um input[type="submit"].um-button:focus-visible { outline: none !important; box-shadow: var(--ecp-focus); }
/* Zweitbutton und UM-eigener „Passwort vergessen"-Link: die Shell verlinkt je Sprache selbst
   (Um_Bridge::form_args schaltet sie ab; die Regel bleibt als Absicherung). */
.ecp .ecp-um .um-button.um-alt, .ecp .ecp-um .um-col-alt-b { display: none; }

/* --- Responsive ------------------------------------------------------------------------ */
/* Theme startit (gemessen im echten WordPress): bis 1024 px steht ein deckender Mobile-Header
   (100 px) VOR dem Inhalt, .qodef-content wird nicht hochgezogen — also keine Header-Überlappung.
   Erst ab 1025 px liegt der transparente Desktop-Header über dem Hero (margin-top: -100px). */
@media (max-width: 1024px) {
  .ecp { --ecp-header-overlap: 0px; --ecp-hero-height: 300px; --ecp-hero-pad: 48px; }
}
@media (max-width: 1023px) {
  .ecp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecp-two { grid-template-columns: 1fr; }
  .ecp { --ecp-container-pad: var(--sp-5); }
}
@media (max-width: 767px) {
  .ecp { --ecp-hero-height: 232px; --ecp-hero-pad: 32px; --ecp-container-pull: 48px; --ecp-container-pad: var(--sp-4); }
  .ecp-hero__title { font-size: 26px; }
  .ecp-hero__subtitle { font-size: 15px; }
  .ecp-shell { grid-template-columns: 1fr; gap: var(--sp-4); }
  .ecp-nav { position: static; flex-direction: row; overflow-x: auto; scroll-snap-type: x proximity; gap: var(--sp-1); padding-bottom: var(--sp-1); -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%); }
  .ecp-nav::-webkit-scrollbar { display: none; }
  .ecp-nav__item { flex: none; scroll-snap-align: start; border-left: 0; border-bottom: 3px solid transparent; padding: 8px 12px; min-height: 44px; }
  .ecp-container .ecp-nav__item.is-active { border-bottom-color: var(--ecp-brand); }
  .ecp-user { display: none; }
  .ecp-form__row { grid-template-columns: 1fr; }
  .ecp-title { font-size: 24px; }
  .ecp-head__row > .ecp-btn, .ecp-head__row > .ecp-form__actions { margin-top: 0; }
}
@media (max-width: 599px) {
  .ecp-grid, .ecp-grid--2 { grid-template-columns: 1fr; }
  .ecp-file { grid-template-columns: 40px minmax(0, 1fr); padding: var(--sp-3) var(--sp-4); }
  .ecp-file__act { grid-column: 1 / -1; }
  .ecp-file__act .ecp-btn { width: 100%; }
  .ecp-versions > summary { padding-left: var(--sp-4); }
  .ecp-versions__list { margin-left: var(--sp-4); margin-right: var(--sp-4); }
  .ecp-versions__row { grid-template-columns: 1fr; }
  .ecp-bundle { grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
  .ecp-bundle .ecp-btn { grid-column: 1 / -1; width: 100%; }
  .ecp-card__body, .ecp-card__head { padding: var(--sp-4); }
  .ecp-empty { padding: var(--sp-6) var(--sp-4); }
  .ecp-tree__row { grid-template-columns: 24px minmax(0, 1fr); padding: var(--sp-3) var(--sp-4); }
  .ecp-tree__row .mono { display: none; }
  .ecp-prodhead { gap: var(--sp-3); }
}

/* Phase 3 (Support, Konto): Feldfehler auch an Auswahl, Textfeld und Dateiauswahl wie an .ecp-input; Fokus und Dateiname der Dateiauswahl. */
.ecp-field.is-invalid .ecp-select, .ecp-field.is-invalid .ecp-textarea, .ecp-field.is-invalid .ecp-file-pick { border-color: var(--ecp-danger-border); background: var(--ecp-danger-bg); }
.ecp-field.is-invalid .ecp-select:focus, .ecp-field.is-invalid .ecp-textarea:focus { border-color: var(--ecp-danger); background: var(--ecp-surface); }
.ecp-file-pick:focus-within { border-color: var(--ecp-primary-500); box-shadow: var(--ecp-focus); }
.ecp-file-pick [data-file-name] { font-weight: 500; color: var(--ecp-ink); overflow-wrap: anywhere; }
.ecp-file-pick [data-file-name]:empty { display: none; }