/* Startseite, Einstieg (web/teile/einstieg.php, gewählt als Variante C am 15.11.).
   Anthrazit, Weiß, Helvetica Neue, Etikett-Schnitt als Formprinzip; Kobalt nur heutiger Punkt und aktive Zustände;
   steigend/fallend nur mit Pfeil und Vorzeichen. Kurve und Hinweisfeld: Klassen .ix-plot/.ix-tip aus site.css, gezeichnet von hero.js. */

.ein{background:#141414;color:var(--weiss);padding:calc(var(--kopf-h) + 26px) 0 24px}
.ein a{color:inherit}
.ein a:focus-visible,.ein summary:focus-visible{outline:2px solid var(--akzent-d);outline-offset:2px}
.ein .ix-pf{font-size:.7em;vertical-align:.12em}
#ml-kat-t{scroll-margin-top:calc(var(--kopf-h) + 28px)}

.ein-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}

/* Links: Titel, Absatz, Suche, Kennzahlen als kleine Etikett-Flächen; vertikal zur rechten Spalte mittig */
.ein-text{min-width:0}
.ein h1{margin:0;font-weight:500;letter-spacing:-.026em;color:#e4e4e1;font-size:clamp(36px,3.9vw,56px);line-height:1.02;max-width:9.5em}
.ein-absatz{margin-top:16px;max-width:34em;font-size:14.5px;line-height:1.5;color:#b9b9b5}
.ein-suche{position:relative;display:flex;align-items:center;margin-top:24px;max-width:560px;height:52px;background:#232325;border:1px solid rgba(255,255,255,.14);clip-path:var(--schnitt-m);transition:border-color .2s}
.ein-suche svg{position:absolute;left:16px;color:#a3a39f;pointer-events:none}
.ein-suche input{width:100%;height:100%;border:0;background:none;color:var(--weiss);padding:0 16px 0 46px;font:400 15.5px/1 var(--sans);outline:none;min-width:0}
.ein-suche input::placeholder{color:#8a8a87}
.ein-suche:focus-within{border-color:var(--akzent-d)}
.ein-zahlen{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:560px}
.ein-zahlen li{background:#1b1b1c;clip-path:var(--schnitt-s);padding:11px 14px 12px}
.ein-zahlen b{display:block;font:600 21px/1.15 var(--sans);letter-spacing:-.01em;color:var(--weiss)}
.ein-zahlen span{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:#8f8f8b}

/* Rechts: AMI-Fläche. Schnitt-Ecke als aufgelegtes Dreieck statt clip-path, damit die Methoden-Fläche über den Rand öffnen darf */
.ein-ami{position:relative;min-width:0;background:#1b1b1c;padding:14px 20px 12px;display:flex;flex-direction:column}
.ein-ami::before{content:"";position:absolute;top:0;right:0;width:var(--s-l);height:var(--s-l);background:linear-gradient(225deg,#141414 50%,transparent 50%);pointer-events:none}
.ein-ami-titel{margin:0;font:500 13.5px/1.3 var(--sans);color:#a3a39f}
.ein-stand{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:center;margin-top:4px}
.ein-wert{display:flex;align-items:baseline;gap:2px 14px}
.ein-zahl{font-size:clamp(38px,3.3vw,46px);line-height:1;font-weight:500;letter-spacing:-.03em;color:var(--weiss);font-variant-numeric:tabular-nums;min-width:3.6ch;display:inline-block}
.ein-chg{font-size:18px;font-weight:500;color:var(--weiss);white-space:nowrap}
.ein-seit{font-size:13px;color:#8f8f8b;white-space:nowrap}
.ein-satz{font-size:13px;line-height:1.45;color:#b9b9b5}
.ein-hinweis{margin-top:8px;max-width:34em;font-size:14px;line-height:1.5;color:#cfcfcc}
.ein .ix-plot.ein-plot{height:110px;margin-top:4px}

/* Kategorien als kleine Kacheln, 3 Spalten */
.ein-legende{display:flex;justify-content:space-between;gap:12px;margin-top:4px;font-size:11px;color:#8a8a87}
.ein-ohne-kurve .ein-legende{margin-top:14px}
.ein-kat-scroll{margin-top:4px;min-width:0}
.ein-kat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.ein-kat li{min-width:0;animation:ix-ein .6s var(--weich) both;animation-delay:calc(.35s + var(--i) * 30ms)}
.ein-kat a{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"n n n" "c s m";align-items:center;column-gap:7px;row-gap:0;height:100%;box-sizing:border-box;padding:4px 9px 4px 8px;background:#232325;clip-path:var(--schnitt-s);text-decoration:none;color:#e4e4e1;transition:background .2s}
.ein-kat a:hover{background:#2c2c2e}
.ein-kat a:focus-visible{outline:2px solid var(--akzent-d);outline-offset:-2px}
.ein-kat-n{grid-area:n;font-size:12.5px;font-weight:500;line-height:17px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ein-kat-c{grid-area:c;font-size:11.5px;font-weight:600;line-height:16px;white-space:nowrap;color:var(--weiss)}
.ein-kat .ix-spark{grid-area:s;width:40px;height:14px;justify-self:start}
.ein-kat-leer{grid-column:1 / 3;grid-row:2;font-size:11px;line-height:16px;color:#8a8a87;white-space:nowrap}
.ein-kat-m{grid-area:m;font-size:11px;line-height:16px;color:#a3a39f;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ein-ohne-kurve .ein-kat-m{grid-column:1 / -1;text-align:left}
/* 20 Kategorien: vier Spalten, damit das Raster in fünf Reihen aufgeht (drei Spalten ließen zwei Felder leer und schnitten
   bei 1024 px die Preise ab); je Kachel drei Zeilen: Name, Veränderung mit Mini-Verlauf, Median heute */
@media (min-width:901px){
  .ein-kat{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ein-kat a{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n n" "c s" "m m";padding:4px 8px 5px 8px}
  .ein-kat .ix-spark{width:36px}
  .ein-kat-leer{grid-column:1 / -1;grid-row:2}
  .ein-kat-m{text-align:left}
}
/* „Median heute“ steht am Rechner in der Legende; in der Kachel nur für Bildschirmleser (auf dem Handy sichtbar, s. u.) */
.ein-kat-ml{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Fuß der AMI-Fläche: Sprung zur Tabelle und Methode (<details>, öffnet als Fläche über dem Folgenden) */
.ein-fuss{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin-top:6px;padding-top:7px;border-top:1px solid rgba(242,242,240,.09)}
.ein-alle{font-size:13px;font-weight:600;text-decoration:none}
.ein-alle:hover{text-decoration:underline;text-underline-offset:3px}
.ein-methode summary{cursor:pointer;list-style:none;font-size:12.5px;color:#a3a39f;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ein-methode summary::-webkit-details-marker{display:none}
.ein-methode summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--weich)}
.ein-methode[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.ein-methode summary:hover{color:var(--weiss)}
.ein-methode:not([open]) p{display:none}
.ein-methode p{position:absolute;right:0;top:calc(100% + 8px);z-index:5;width:min(460px, 100%);box-sizing:border-box;padding:14px 16px;background:#232325;color:#cfcfcc;font-size:12.5px;line-height:1.55;clip-path:var(--schnitt-m);box-shadow:0 10px 30px rgba(0,0,0,.4)}

@media (max-width:900px){
  .ein{padding-top:calc(var(--kopf-h) + 24px);padding-bottom:24px}
  .ein-raster{grid-template-columns:minmax(0,1fr);gap:20px}
  .ein-text{display:contents}
  .ein h1,.ein-absatz{order:1}
  .ein-ami{order:2}
  .ein-zahlen{order:3;margin-top:0;max-width:none}
  /* Die Suche steht auf schmalen Fenstern schon als eigene Zeile in der Kopfleiste */
  .ein-suche{display:none}
  /* Kacheln waagerecht wischbar, nur innerhalb des Streifens; „Median heute“ steht dann in der Kachel */
  .ein-legende{display:none}
  .ein-kat-scroll{margin:8px -16px 0;padding:0 16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
  .ein-kat-scroll::-webkit-scrollbar{display:none}
  .ein-kat{grid-template-columns:none;grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:200px;width:max-content}
  .ein-kat li{scroll-snap-align:start}
  .ein-kat a{grid-template-areas:"n n n" "c s s" "m m m";padding:5px 9px 6px 8px}
  .ein-kat-m{text-align:left}
  .ein-kat-leer{grid-row:2}
  .ein-kat-ml{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
}
@media (max-width:640px){
  .ein h1{font-size:clamp(30px,8.6vw,40px)}
  .ein-absatz{margin-top:-10px;font-size:14px}
  .ein-stand{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .ein-ami{padding:14px 16px 12px}
  .ein .ix-plot.ein-plot{height:116px}
  .ein-zahlen b{font-size:18px}
  .ein-zahlen li{padding:9px 12px 10px}
}