/* ECHO-Monitor — Bedienung und Bewegung (24.09.2026).
   Liegt über stil.css und ändert dort nichts Bestehendes, außer wo es ausdrücklich
   überschreibt. Regeln wie überall im Fenster: Farben und Schriften nur aus den Tokens,
   Signal genau einmal je Ansicht — diese Datei setzt kein Signal. Bewegung nur, wenn der
   Nutzer sie zulässt (prefers-reduced-motion). */

:root{
  --lauf:cubic-bezier(.2,.7,.2,1);          /* Grundkurve der Bewegungen im Design System */
  --federnd:cubic-bezier(.3,.8,.3,1);
  --getoent:color-mix(in srgb,var(--lbu-tiefgruen-300) 40%,var(--weiss));
  --getoent-stark:color-mix(in srgb,var(--lbu-tiefgruen-300) 75%,var(--weiss));
}

/* ------------------------------------------------------------ Seitenübergang
   Jeder Klick lädt die Seite neu — der Server rechnet, eine Quelle. Der Browser blendet
   dabei über, statt weiß aufzublitzen: Kopf und Fuß bleiben stehen, der Inhalt gleitet,
   der Zeiger unter dem Reiter wandert zum neuen Reiter. */
@view-transition{navigation:auto}
.top{view-transition-name:kopf}
.band{view-transition-name:band}
.bottom{view-transition-name:fuss}
.reiter .zeiger{view-transition-name:reiter-zeiger}
/* Übergeblendet wird der sichtbare Ausschnitt (root), nicht die ganze Inhaltsspalte: ein eigener
   Name an main hielt im Produktradar die ganze Seite mit 785 Zeilen als Bild fest — das kostete
   bei jedem Wechsel spürbar Zeit (Philipp: „ruckelt ein klein bisschen", 24.09.2026). */
::view-transition-old(root){animation:.16s ease-in both vt-raus}
::view-transition-new(root){animation:.34s var(--lauf) both vt-rein}
::view-transition-group(reiter-zeiger){animation-duration:.45s;animation-timing-function:var(--federnd)}
::view-transition-group(*){animation-duration:.4s;animation-timing-function:var(--lauf)}
@keyframes vt-raus{to{opacity:0;transform:translateY(-4px)}}
@keyframes vt-rein{from{opacity:0;transform:translateY(10px)}}

/* ------------------------------------------------------------ Grundlagen */
:focus-visible{outline:2px solid var(--lbu-tiefgruen);outline-offset:2px;border-radius:4px}
.sprungmarke{position:fixed;left:16px;top:-60px;z-index:100;background:var(--lbu-tiefgruen);color:var(--weiss);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:500;transition:top .2s var(--lauf)}
.sprungmarke:focus{top:12px}
kbd.taste{display:inline-block;min-width:18px;padding:2px 5px;border:1px solid var(--lbu-faser);border-bottom-width:2px;border-radius:5px;background:var(--weiss);font:500 10px/1.2 var(--font-mono);color:var(--lbu-faser-700);text-align:center;letter-spacing:.02em}
.tastenhilfe-auf{font:inherit;color:inherit;display:inline-flex;gap:6px;align-items:center}
.tastenhilfe-auf:hover{color:var(--lbu-tiefgruen)}
.tabelle .zahl,.gegen .wert,.grosszahl,.kachel b{font-variant-numeric:tabular-nums}

/* Ladebalken: sagt beim Neuladen „es tut sich was", statt dass der Klick ins Leere geht */
.ladebalken{position:fixed;left:0;top:0;height:3px;width:100%;z-index:90;pointer-events:none;
  background:linear-gradient(90deg,var(--lbu-tiefgruen-600),var(--lbu-tiefgruen));
  transform-origin:left;transform:scaleX(0);opacity:0}
body.laedt .ladebalken{opacity:1;animation:laden 6s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes laden{0%{transform:scaleX(0)}15%{transform:scaleX(.45)}100%{transform:scaleX(.92)}}

/* ------------------------------------------------------------ Kopf */
/* Das Gesamtlogo seit 14.09. ist breiter (Kasten plus Wort) — gleiche optische Größe bei 34 px */
.absender .lbu{height:34px}
/* Eine Zeile Reiter, nie zwei: lieber rückt der Suchknopf auf sein Zeichen zusammen */
.top{gap:18px}
.reiter{flex-wrap:nowrap}
.reiter a{padding:8px 13px}
@media (max-width:1480px){.palette-auf span{display:none}.palette-auf{padding:7px 8px 7px 10px}.palette-auf kbd{margin-left:4px}}
@media (max-width:1280px){.werkzeug small{display:none}}
.top{transition:box-shadow .25s ease}
.reiter{position:relative;isolation:isolate}
.reiter a{position:relative;z-index:1}
.reiter .zeiger{position:absolute;z-index:0;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:999px;
  background:var(--lbu-tiefgruen);box-shadow:var(--schatten);opacity:0;pointer-events:none;
  transition:transform .4s var(--federnd),width .4s var(--federnd),opacity .2s}
.reiter.mit-zeiger .zeiger{opacity:1}
.reiter.mit-zeiger a.jetzt{background:transparent;box-shadow:none}
.reiter a:not(.jetzt):hover{background:color-mix(in srgb,var(--lbu-faser-300) 70%,transparent)}
.palette-auf{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:999px;
  background:var(--lbu-papier);color:var(--lbu-faser-600);font:500 13px/1 var(--font-display);
  border:1px solid transparent;transition:border-color .2s,box-shadow .2s,color .2s;margin-right:6px}
.palette-auf .ico{width:15px;height:15px;opacity:.75}
.palette-auf:hover{border-color:var(--lbu-tiefgruen-500);color:var(--lbu-tiefgruen);box-shadow:var(--schatten)}
.palette-auf kbd{margin-left:10px}

/* ------------------------------------------------------------ Filterleiste (Produktradar) */
.filterleiste{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;margin-bottom:12px;flex-wrap:wrap}
.filter-auf{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border-radius:999px;
  background:var(--lbu-tiefgruen);color:var(--weiss);font:500 14px/1 var(--font-display);transition:background .2s}
.filter-auf:hover{background:var(--lbu-tiefgruen-700)}
.filter-auf .ico{width:20px;height:20px;filter:brightness(0) invert(1)}
.filter-auf .anzahl{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--weiss);color:var(--lbu-tiefgruen);font:600 11px/1 var(--font-mono)}
.filter-auf .winkel{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--federnd);margin-left:2px}
.filter-auf[aria-expanded="false"] .winkel{transform:translateY(1px) rotate(-135deg)}
.aktiv-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;align-items:center}
.aktiv-chips .hinweis{padding-left:4px}
.chip-weg{display:inline-flex;align-items:baseline;gap:6px;padding:6px 8px 6px 11px;border-radius:999px;
  background:var(--lbu-tiefgruen-300);color:var(--lbu-tiefgruen);text-decoration:none;font:500 13px/1.1 var(--font-display);
  transition:background .18s,color .18s,transform .18s;max-width:100%}
.chip-weg small{font:500 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.chip-weg .x{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:13px;line-height:1;
  transition:transform .25s var(--federnd),background .18s;align-self:center}
.chip-weg:hover{background:var(--lbu-tiefgruen);color:var(--weiss)}
.chip-weg:hover .x{transform:rotate(90deg);background:rgba(255,255,255,.18)}
.ergebnis{display:flex;align-items:baseline;gap:6px;padding:0 6px;white-space:nowrap}
.ergebnis b{font:600 22px/1 var(--font-display);letter-spacing:-.02em;color:var(--lbu-tiefgruen);font-variant-numeric:tabular-nums}
.ergebnis span{font:500 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lbu-faser-600)}
.filterleiste .filter-leeren{margin:0}
/* Aufklappen über die Rasterzeile: 0fr ↔ 1fr gleitet, ohne dass eine Höhe bekannt sein muss */
.filterklappe{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s var(--lauf),opacity .3s}
.filterklappe>form{min-height:0;margin-bottom:0;padding-bottom:20px}
.filterklappe.zu{grid-template-rows:0fr;opacity:0}
.filterklappe.zu>form,.filterklappe.bewegt>form{overflow:hidden}
.filterklappe.zu>form{visibility:hidden;transition:visibility 0s .4s}

/* ------------------------------------------------------------ Tabelle */
.tabelle tbody tr.haupt{transition:background .15s}
.tabelle tr:has(.vergleichen:checked) td{background:var(--getoent)}
.tabelle tr.fokus td{background:var(--getoent-stark)}
.tabelle tr.fokus td:first-child{box-shadow:inset 3px 0 0 var(--lbu-tiefgruen)}
.tabelle .mini{transition:transform .2s var(--federnd),box-shadow .2s}
.tabelle tr:hover .mini{transform:scale(1.08);box-shadow:var(--schatten)}
.tabelle .wahl input{cursor:pointer;transition:transform .15s}
.tabelle .wahl input:active{transform:scale(.85)}
body.dicht .tabelle td{padding-top:5px;padding-bottom:5px}
body.dicht .tabelle .mini,body.dicht .tabelle .dose{width:28px;height:28px}
/* Große Vorschau beim Überfahren der Miniatur */
.bildschau{position:fixed;z-index:70;width:220px;height:220px;padding:12px;background:var(--weiss);border:1px solid var(--lbu-faser-300);
  border-radius:var(--r);box-shadow:var(--schatten-l);pointer-events:none;opacity:0;transform:scale(.92);
  transition:opacity .15s,transform .2s var(--federnd)}
.bildschau.an{opacity:1;transform:none}
.bildschau img{width:100%;height:100%;object-fit:contain}

/* ------------------------------------------------------------ Dock: die Auswahl für den Benchmark */
.auswahl{display:flex;position:fixed;left:50%;bottom:58px;z-index:40;margin:0;width:max-content;
  max-width:min(1100px,calc(100vw - 32px));padding:8px 8px 8px 16px;gap:12px;border-radius:999px;
  transform:translate(-50%,calc(100% + 80px));opacity:0;pointer-events:none;
  transition:transform .45s var(--federnd),opacity .25s}
.auswahl.an{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.auswahl .dock-titel{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;color:var(--lbu-tiefgruen-400)}
.auswahl .dock-titel b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--weiss);color:var(--lbu-tiefgruen);font:600 11px/1 var(--font-mono)}
.auswahl .liste{flex-wrap:nowrap;overflow:hidden;gap:6px;min-width:0}
.auswahl .dock-mehr{display:inline-grid;place-items:center;min-width:34px;height:32px;padding:0 10px !important;font:600 12px/1 var(--font-mono) !important}
.auswahl>.btn,.auswahl>button,.auswahl>.dock-titel{flex:none}
/* Solange die Leiste steht, rückt Leichti auf seinen Kreis zusammen — beide passen nebeneinander (23.10.2026) */
body:has(.auswahl.an) .leichti-auf>span{display:none}
body:has(.auswahl.an) .leichti-auf{padding:5px}
body:has(.auswahl.an) .leichti-auf .leichti-figur{margin:-18px -2px -2px -2px}
@media (min-width:761px){.auswahl{max-width:calc(100vw - 260px)}}
.auswahl .liste span{flex:none}
.auswahl .dockstueck{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 3px !important;border-radius:999px;
  background:var(--lbu-tiefgruen-700);font:500 12px/1 var(--font-display) !important;animation:dock-rein .35s var(--federnd)}
.auswahl .dockstueck img{width:26px;height:26px;border-radius:50%;object-fit:contain;background:var(--weiss)}
.auswahl .dockstueck em{font-style:normal;max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:4px}
.auswahl .dockstueck img+em{max-width:0;padding-left:0;transition:max-width .3s var(--lauf),padding .3s}
.auswahl .dockstueck:hover img+em{max-width:18ch;padding-left:2px}
.auswahl .dock-weg{width:20px;height:20px;border-radius:50%;color:var(--lbu-tiefgruen-400);font-size:14px;line-height:1}
.auswahl .dock-weg:hover{background:var(--weiss);color:var(--lbu-tiefgruen)}
.auswahl .btn.haupt{padding:10px 18px}
/* Mülleimer statt „leeren" (Philipp, 24.10.2026), Icon „loeschen" aus dem Set Signet */
.auswahl .dock-leeren{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;opacity:.8;transition:opacity .12s,background .12s}
.auswahl .dock-leeren:hover{opacity:1;background:var(--lbu-tiefgruen-700)}
@keyframes dock-rein{from{transform:scale(.4);opacity:0}}
.flugbild{position:fixed;z-index:80;border-radius:8px;pointer-events:none;object-fit:contain;background:var(--weiss);box-shadow:var(--schatten-l)}

/* ------------------------------------------------------------ Benchmark */
.knebel{position:relative;width:30px;height:18px;border-radius:999px;background:var(--lbu-faser);transition:background .2s;flex:none}
.knebel::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--weiss);
  box-shadow:0 1px 2px rgba(16,21,18,.25);transition:transform .3s var(--federnd)}
[aria-pressed="true"] .knebel{background:var(--lbu-tiefgruen)}
[aria-pressed="true"] .knebel::after{transform:translateX(12px)}
.schalter-unterschiede[aria-pressed="true"]{border-color:var(--lbu-tiefgruen)}
.gegen.nur-unterschiede>.gleich{display:none}
.gegen>div{transition:background .12s}
.gegen>div.zeile-hier{background:var(--getoent)}
.gegen>div.zeilenname.zeile-hier{background:var(--getoent-stark);color:var(--lbu-tiefgruen)}
.gegen .produktkopf img{transition:transform .35s var(--federnd)}
.gegen .produktkopf:hover img{transform:translateY(-4px) scale(1.03)}
.gegen .produktkopf .weg{opacity:.6;transition:opacity .2s}
.gegen .produktkopf:hover .weg{opacity:1}
/* Balken unter den Preisen: Länge im Verhältnis zum höchsten Wert der Zeile. Faser, weil es
   keine Wertung ist — der Balken zeigt das Verhältnis, er sagt nicht, was besser ist. */
.wertbalken{display:block;height:4px;margin-top:8px;border-radius:2px;background:var(--lbu-faser-300);overflow:hidden}
.wertbalken i{display:block;height:100%;width:calc(var(--anteil,0) * 100%);background:var(--lbu-faser-500);border-radius:2px;transform-origin:left}
.gleich-hinweis{font-size:12.5px;color:var(--lbu-faser-600);margin:-6px 0 12px}

/* ------------------------------------------------------------ Preiskurve */
.kurve{position:relative}
.kurve svg .fadenkreuz{stroke:var(--lbu-faser-600);stroke-width:1;stroke-dasharray:2 3;opacity:0;transition:opacity .15s}
.kurve.zeigt svg .fadenkreuz{opacity:1}
.kurve circle.punkt{transition:r .15s}
.kurve circle.punkt.hier{r:6;stroke-width:2.5}
.kurve.hebt .linie:not(.hervor),.kurve.hebt circle.punkt:not(.hervor){opacity:.15}
.kurve .linie,.kurve circle.punkt{transition:opacity .2s}
.kurve .legende span{cursor:pointer;padding:2px 6px;border-radius:6px;transition:background .15s}
.kurve .legende span:hover,.kurve .legende span:focus-visible{background:var(--lbu-faser-300)}
.kurven-tipp{position:absolute;z-index:5;pointer-events:none;min-width:150px;padding:8px 12px;background:var(--lbu-tiefgruen);color:var(--weiss);
  border-radius:10px;box-shadow:var(--schatten-l);font-size:12px;line-height:1.35;opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity .12s}
.kurven-tipp.an{opacity:1}
.kurven-tipp b{display:block;font:600 16px/1.2 var(--font-display);font-variant-numeric:tabular-nums}
.kurven-tipp small{font:500 10px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lbu-tiefgruen-400)}

/* ------------------------------------------------------------ Meldungen */
.meldungen{position:fixed;right:20px;bottom:64px;z-index:95;display:grid;gap:8px;justify-items:end;pointer-events:none}
.meldung{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;background:var(--lbu-graphit);color:var(--weiss);
  font-size:13.5px;box-shadow:var(--schatten-l);animation:meldung-rein .35s var(--federnd)}
.meldung.weg{animation:meldung-raus .25s ease-in forwards}
.meldung::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lbu-tiefgruen-400)}
@keyframes meldung-rein{from{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes meldung-raus{to{opacity:0;transform:translateY(8px)}}

/* ------------------------------------------------------------ Befehlspalette und Tastenhilfe */
dialog.palette,dialog.tastenhilfe{margin:12vh auto auto;padding:0;border:0;border-radius:18px;background:var(--weiss);color:var(--lbu-graphit);
  width:min(640px,calc(100vw - 32px));box-shadow:0 30px 80px -20px rgba(12,42,31,.45),0 0 0 1px rgba(12,42,31,.06);overflow:hidden}
dialog.palette::backdrop,dialog.tastenhilfe::backdrop{background:rgba(12,42,31,.32);backdrop-filter:blur(4px)}
dialog[open].palette,dialog[open].tastenhilfe{animation:palette-rein .28s var(--federnd)}
@keyframes palette-rein{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.palette-feld{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--lbu-faser-300)}
.palette-feld img{width:20px;height:20px;opacity:.6}
.palette-feld input{flex:1;border:0;outline:0;font:400 18px/1.3 var(--font-display);color:var(--lbu-graphit);background:transparent}
.palette-feld input::placeholder{color:var(--lbu-faser-500)}
.palette-liste{max-height:min(420px,55vh);overflow:auto;padding:6px 8px 8px;scroll-padding:8px}
.palette-gruppe{font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lbu-faser-600);padding:12px 10px 6px}
.palette-eintrag{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;width:100%;padding:8px 10px;border-radius:10px;
  text-align:left;color:inherit;text-decoration:none;position:relative}
.palette-eintrag .symbol{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--lbu-papier);overflow:hidden}
.palette-eintrag .symbol img{width:100%;height:100%;object-fit:contain;background:var(--weiss)}
.palette-eintrag .symbol img.ico{width:18px;height:18px;background:none}
.palette-eintrag .symbol span{font:500 11px/1 var(--font-mono);color:var(--lbu-faser-600)}
.palette-eintrag b{display:block;font:500 14.5px/1.25 var(--font-display);color:var(--lbu-tiefgruen);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-eintrag small{display:block;font-size:12px;color:var(--lbu-faser-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-eintrag .rechts{display:flex;gap:4px;align-items:center;font-size:11px;color:var(--lbu-faser-500)}
.palette-eintrag.an{background:var(--getoent)}
.palette-eintrag.an::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--lbu-tiefgruen)}
.palette-eintrag mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--lbu-tiefgruen-400);text-decoration-thickness:2px;text-underline-offset:2px}
.palette-leer{padding:28px 16px;text-align:center;color:var(--lbu-faser-600);font-size:14px}
.palette-fuss{display:flex;gap:16px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--lbu-faser-300);background:var(--lbu-papier);font-size:12px;color:var(--lbu-faser-600)}
.palette-fuss span{display:inline-flex;gap:5px;align-items:center}
.tastenhilfe h2{font:600 20px/1.2 var(--font-display);color:var(--lbu-tiefgruen);padding:20px 22px 4px}
.tastenhilfe .hinweis{padding:0 22px}
.tastenhilfe dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;padding:16px 22px 22px;align-items:center;font-size:14px}
.tastenhilfe dt{display:flex;gap:4px;justify-content:flex-end}
.tastenhilfe .zu{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;font-size:18px;color:var(--lbu-faser-600)}
.tastenhilfe .zu:hover{background:var(--lbu-papier)}

/* ------------------------------------------------------------ Anmeldung: die Ringe breiten sich aus */
.echo-puls{position:relative;width:72px;height:72px;margin-bottom:20px}
.echo-puls .zz{position:relative;margin:0;display:block}
.echo-puls i{position:absolute;inset:6px;border-radius:50%;border:1.5px solid var(--lbu-tiefgruen-400);opacity:0}
.anmeldung-form{animation:ein .6s var(--lauf) .1s both}
.anmeldung-links .claim{animation:ein .6s var(--lauf) both}
.anmeldung-form .btn .pfeil-los{display:inline-block;transition:transform .25s var(--federnd)}
.anmeldung-form .btn:hover .pfeil-los{transform:translateX(4px)}
.anmeldung-links .lbu{height:40px}

/* ------------------------------------------------------------ Auftritt */
@keyframes ein{from{opacity:0;transform:translateY(14px)}}
@keyframes wachsX{from{transform:scaleX(0)}}
@keyframes zeichnen{from{stroke-dashoffset:var(--laenge,2400)}}
@keyframes ausbreiten{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.4);opacity:0}}

@media (prefers-reduced-motion:no-preference){
  .kanal,.stimme,.kachel,.haendlerblock,.kurvenblatt,.gegen .produktkopf,.prospekt{animation:ein .5s var(--lauf) both;animation-delay:calc(min(var(--i,0),14) * 35ms)}
  .wertbalken i,.balken i{animation:wachsX .9s var(--federnd) .15s both}
  .kurve .linie:not(.l3){stroke-dasharray:var(--laenge,2400);animation:zeichnen 1.4s cubic-bezier(.4,.6,.2,1) .15s both}
  .kurve circle.punkt{animation:ein .3s ease-out .9s both}
  .echo-puls i{animation:ausbreiten 3.6s cubic-bezier(.2,.6,.3,1) infinite}
  .echo-puls i:nth-child(2){animation-delay:1.2s}
  .echo-puls i:nth-child(3){animation-delay:2.4s}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* Tastennavigation: die Zeile bleibt beim Wandern unter dem stehenden Kopf sichtbar */
.tabelle tbody tr{scroll-margin-top:calc(var(--kopfhoehe,86px) + 70px);scroll-margin-bottom:130px}
.palette-eintrag>span:nth-child(2){min-width:0}

/* ============================================================ Telefon (iPhone zuerst), 24.09.2026
   Vorher war jede Ansicht eine verkleinerte Desktopseite: 610 px breit, herausgezoomt, der
   Kopf allein 200 px hoch, die Tabelle mit 19 Spalten nicht zu bedienen. Jetzt gilt:
   Reiter unten, wo der Daumen ist · Filter als Blatt von unten · jede Tabellenzeile eine
   Datenblattkarte · Benchmark seitlich wischen, die Zeilennamen bleiben stehen ·
   Eingabefelder 16 px, sonst zoomt Safari beim Antippen hinein. */
.blatt-kopf,.unten-reiter,.blatt-schleier{display:none}

@media (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  body{-webkit-tap-highlight-color:transparent}
  input,select,textarea,.mehrfach input{font-size:16px !important}
  .app{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

  /* Kopf: flach, scrollt mit. Das ECHO-Zeichen fällt weg statt unter 56 px zu schrumpfen —
     darunter bleibt nur das Wortzeichen (Design System, ECHO-Zeichen). */
  .top{position:relative;flex-wrap:nowrap;padding:10px 16px 14px calc(16px + env(safe-area-inset-left));gap:10px}
  .absender{gap:10px;min-width:0}
  .absender .lbu{height:26px}
  .absender .trenner{height:24px}
  .werkzeug .zz,.werkzeug small,.reiter{display:none}
  .werkzeug b{font-size:15px;white-space:nowrap}
  .konto>*:not(.palette-auf):not(.sprachwahl):not(.bereichswahl):not(.profil-knopf){display:none}
  .konto form{display:none}
  .palette-auf{width:40px;height:40px;padding:0;justify-content:center;margin:0;background:var(--lbu-papier)}
  .palette-auf span,.palette-auf kbd{display:none}
  .palette-auf .ico{width:18px;height:18px}
  .band{font-size:11px;padding:20px 16px 8px;gap:4px}
  .band .mono{font-size:9.5px}
  .band-lang{display:none}
  .unterreiter{padding:12px 16px 0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .unterreiter .mono{display:none}
  .unterreiter a{flex:none;padding:8px 14px}

  main{padding:16px 16px 24px}
  .kopf{margin-bottom:14px;gap:12px}
  .kopf .oben{font-size:9.5px;letter-spacing:.1em;line-height:1.5}
  h1{font-size:23px;line-height:1.15}
  .kopf p{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .knopfreihe{gap:6px}
  .knopfreihe .btn{padding:8px 12px;font-size:13px}
  .knopfreihe .btn .ico{width:16px;height:16px}

  /* Fuß: kein Stehen mehr, die Reiter unten brauchen den Platz */
  .bottom{position:static;backdrop-filter:none;padding:14px 16px}
  .bottom .hinweis{display:none}

  /* Reiter unten */
  .unten-reiter{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:6px calc(4px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left));
    background:color-mix(in srgb,var(--weiss) 90%,transparent);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);
    border-top:1px solid var(--lbu-faser-300)}
  .unten-reiter a{position:relative;display:grid;justify-items:center;gap:3px;padding:4px 2px;text-decoration:none;color:var(--lbu-faser-600);
    font:500 10.5px/1.1 var(--font-display);min-height:48px}
  .unten-reiter img{width:24px;height:24px;padding:3px;box-sizing:content-box;border-radius:999px;transition:background .25s,transform .25s var(--federnd);opacity:.7}
  .unten-reiter a.jetzt{color:var(--lbu-tiefgruen);font-weight:600}
  .unten-reiter a.jetzt img{background:var(--lbu-tiefgruen-300);opacity:1;padding:3px 14px}
  .unten-reiter a:active img{transform:scale(.88)}
  .unten-reiter .marke-zahl{position:absolute;top:0;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;
    background:var(--lbu-tiefgruen);color:var(--weiss);font:600 10px/18px var(--font-mono);text-align:center;box-shadow:0 0 0 2px var(--weiss)}
  .unten-reiter .marke-zahl[hidden]{display:none}

  /* Dock über den Reitern */
  .auswahl{bottom:calc(72px + env(safe-area-inset-bottom));width:calc(100vw - 16px);max-width:none;padding:6px 6px 6px 12px;gap:8px}
  .auswahl .dock-titel{font-size:0;gap:0}
  .auswahl .dock-titel b{font-size:11px}
  .auswahl .liste{max-width:none;flex:1;min-width:0}
  .auswahl .dockstueck em{display:none}
  .auswahl #auswahl-hinweis{display:none}
  .auswahl .btn.haupt{padding:10px 14px;font-size:13px}
  .meldungen{left:12px;right:12px;bottom:calc(136px + env(safe-area-inset-bottom));justify-items:center}

  /* Filterleiste: Knopf, Zahl und Löschen in einer Reihe, die Chips darunter zum Wischen */
  .filterleiste{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:10px}
  .filterleiste .ergebnis{justify-self:start;padding:0}
  .aktiv-chips{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -10px;padding:0 10px}
  .aktiv-chips .chip-weg{flex:none}
  .aktiv-chips:not(:has(.chip-weg)){display:none}

  /* Filter als Blatt von unten */
  .filterklappe,.filterklappe.zu{position:fixed;left:0;right:0;bottom:0;z-index:70;grid-template-rows:1fr;opacity:1;
    background:var(--grund);border-radius:22px 22px 0 0;box-shadow:0 -20px 60px -20px rgba(12,42,31,.45);
    transition:transform .42s var(--federnd)}
  .filterklappe.zu{transform:translateY(105%)}
  .filterklappe>form,.filterklappe.bewegt>form{overflow-y:auto;overscroll-behavior:contain;max-height:86dvh;
    padding:0 16px calc(20px + env(safe-area-inset-bottom));display:block}
  .blatt-kopf{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:3;background:var(--grund);
    padding:22px 0 12px;margin-bottom:4px;border-bottom:1px solid var(--lbu-faser-300)}
  .blatt-kopf .griff{position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--lbu-faser)}
  .blatt-kopf b{font:600 19px/1 var(--font-display);color:var(--lbu-tiefgruen)}
  .blatt-kopf .hinweis{flex:1}
  .blatt-zu{padding:9px 16px;border-radius:999px;background:var(--lbu-tiefgruen);color:var(--weiss);font-weight:500;font-size:15px}
  .blatt-schleier{display:block;position:fixed;inset:0;z-index:65;background:rgba(12,42,31,.38);opacity:0;pointer-events:none;transition:opacity .3s}
  body.blatt-offen{overflow:hidden}
  body.blatt-offen .blatt-schleier{opacity:1;pointer-events:auto}
  .filterbloecke fieldset.block{margin:12px 0 0;padding:12px}
  .filterbloecke fieldset.filter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filterbloecke fieldset.sortierung{grid-template-columns:1fr 1fr;align-items:end}
  .filter label{grid-template-rows:14px 44px}
  .filter select,.filter input{height:44px}
  .filterbloecke fieldset.filter .mehrfach{min-height:44px}

  /* Produktradar: jede Zeile eine Datenblattkarte */
  body[data-ansicht="vergleich"] .tabellenrahmen{overflow:visible;background:transparent;border:0;box-shadow:none}
  body[data-ansicht="vergleich"] table.tabelle,body[data-ansicht="vergleich"] table.tabelle tbody{display:block;background:transparent}
  body[data-ansicht="vergleich"] table.tabelle thead{display:none}
  body[data-ansicht="vergleich"] tr.haupt{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:10px;row-gap:2px;
    background:var(--weiss);border:1px solid var(--lbu-faser-300);border-radius:var(--r);padding:12px;margin-bottom:10px;box-shadow:var(--schatten)}
  body[data-ansicht="vergleich"] tr.haupt td{display:block;padding:0;border:0;background:none !important;white-space:normal;min-width:0;max-width:none;text-align:left}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(1){position:absolute;left:4px;top:4px;z-index:2}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(1) input{width:22px;height:22px;margin:0}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(2){grid-column:1;grid-row:1/4;width:auto}
  body[data-ansicht="vergleich"] tr.haupt .mini,body[data-ansicht="vergleich"] tr.haupt .dose{width:100%;height:auto;aspect-ratio:1}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(3){grid-column:2/5;grid-row:1;font-size:15px}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(4){grid-column:2/5;grid-row:2/4;font-size:14px}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(16){grid-column:5/7;grid-row:1;text-align:right;font-size:17px;font-weight:600;color:var(--lbu-tiefgruen)}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(15){grid-column:5/7;grid-row:2/4;text-align:right;font-size:12.5px;color:var(--lbu-faser-700)}
  /* Die Kennwerte: je zwei Spalten, mit Beschriftung. Leere Werte fallen weg statt „—" zu zeigen. */
  body[data-ansicht="vergleich"] tr.haupt td:is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10),:nth-child(11),:nth-child(12),:nth-child(14),:nth-child(17),:nth-child(18),:nth-child(19)){
    grid-column:span 2;margin-top:10px;padding-top:8px;border-top:1px solid var(--lbu-faser-300);font-size:13px}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(12){grid-column:span 4}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(13){display:none}
  body[data-ansicht="vergleich"] tr.haupt td:has(>.leer:only-child){display:none}
  body[data-ansicht="vergleich"] tr.haupt td:is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10),:nth-child(11),:nth-child(12),:nth-child(14),:nth-child(17),:nth-child(18),:nth-child(19))::before{
    display:block;margin-bottom:3px;font:500 9px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lbu-faser-600)}
  /* Beschriftung aus data-k der Zelle — so folgt sie der Sprache (19.10.2026), vorher stand sie hier fest auf Deutsch */
  body[data-ansicht="vergleich"] tr.haupt td[data-k]::before{content:attr(data-k)}
  /* Profi: statt Preis oben rechts die Haftung als eigene Zeilen, Untergründe über die ganze Breite */
  body[data-ansicht="vergleich"][data-bereich="profi"] tr.haupt td:is(:nth-child(15),:nth-child(16),:nth-child(17),:nth-child(18)){
    grid-column:span 2;grid-row:auto;margin-top:10px;padding-top:8px;border-top:1px solid var(--lbu-faser-300);font-size:13px;font-weight:400;text-align:left;color:inherit}
  body[data-ansicht="vergleich"][data-bereich="profi"] tr.haupt td:nth-child(15){grid-column:1/-1}
  body[data-ansicht="vergleich"][data-bereich="profi"] tr.haupt td:is(:nth-child(15),:nth-child(16),:nth-child(17),:nth-child(18))::before{
    display:block;margin-bottom:3px;font:500 9px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lbu-faser-600)}
  body[data-ansicht="vergleich"] tr.haupt .verlauf-auf{align-items:flex-start}
  body[data-ansicht="vergleich"] tr.haupt .unter{display:block}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(19) a{display:inline-block;padding:6px 10px;margin-right:4px;border-radius:999px;background:var(--lbu-papier);text-decoration:none;font-weight:500}
  body[data-ansicht="vergleich"] tr.haupt:has(.vergleichen:checked){border-color:var(--lbu-tiefgruen);box-shadow:0 0 0 1px var(--lbu-tiefgruen),var(--schatten)}
  body[data-ansicht="vergleich"] tr.haupt.offen{margin-bottom:0;border-radius:var(--r) var(--r) 0 0}
  /* Aufgeklappte Varianten: schmale Zeilen unter der Karte */
  body[data-ansicht="vergleich"] tr.unterzeile:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;align-items:baseline;
    background:var(--zebra);border:1px solid var(--lbu-faser-300);border-top:0;padding:8px 12px}
  body[data-ansicht="vergleich"] tr.unterzeile td{display:none;padding:0;border:0;background:none}
  body[data-ansicht="vergleich"] tr.unterzeile td:is(:nth-child(4),:nth-child(14),:nth-child(16)){display:block}
  body[data-ansicht="vergleich"] tr.unterzeile td:nth-child(4){white-space:normal}
  body[data-ansicht="vergleich"] tr.unterzeile td:nth-child(4)::after{content:attr(data-haendler)}
  body[data-ansicht="vergleich"] tr.farbtonzeile:not([hidden]),body[data-ansicht="vergleich"] tr.verlaufzeile:not([hidden]){display:block;margin:-10px 0 10px}
  body[data-ansicht="vergleich"] tr.farbtonzeile td,body[data-ansicht="vergleich"] tr.verlaufzeile td{display:block;border-radius:0 0 var(--r) var(--r)}
  .zaehler{font-size:12px}

  /* Benchmark: seitlich wischen, die Zeilennamen bleiben links stehen */
  .gegenband{display:none}
  .auswahl-streifen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .auswahl-streifen .chip{flex:none}
  .gegenrahmen{overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:96px;margin:0 -16px;padding:0;scrollbar-width:none;overscroll-behavior-x:contain}
  .karte.gegen{overflow:visible;border-radius:0;border-left:0;border-right:0}
  .gegen{grid-template-columns:96px repeat(var(--n,2),minmax(0,1fr));min-width:calc(96px + var(--n) * 64vw)}
  .gegen .zeilenname{position:sticky;left:0;z-index:2;font-size:9px;letter-spacing:.06em;box-shadow:1px 0 0 var(--lbu-faser-300)}
  .gegen>div{padding:10px}
  .gegen .produktkopf{scroll-snap-align:start;padding:12px 8px}
  .gegen .produktkopf img,.gegen .produktkopf .dose{width:96px;height:96px}
  .gegen .ordnen{display:none}
  .gegen .produktkopf .weg{opacity:1;display:inline-block;padding:6px 10px}
  .gegen .wert.gross{font-size:19px}
  .gegen .abschnitt{padding:10px}
  .suchfeld{max-width:none}

  /* Herstellerradar: die Matrix scrollt in ihrer Karte, nicht die Seite */
  .matrix{overflow-x:auto}
  .matrix th{top:0}
  .wgzeile{grid-template-columns:1fr;gap:6px}
  .ansichtswahl{overflow-x:auto}

  /* Marktradar */
  .neuheiten-band{padding:10px 14px}
  .neuheiten ul.beitraege,.neuheiten>.hinweis{margin:0 12px}
  .neuheiten ul.beitraege li{display:flex;flex-wrap:wrap;gap:4px 8px}
  .neuheiten li .absender{flex:1;min-width:0}
  .neuheiten li a,.neuheiten li>span[title]{flex-basis:100%;white-space:normal}
  .kanaele{grid-template-columns:1fr}
  .schalter{overflow-x:auto;max-width:100%}
  .filter{gap:8px}
  .filter select,.filter input{min-width:0}
  .filter label{flex:1 1 140px}

  /* Preiskurve */
  .kurvenblatt h2{flex-wrap:wrap}
  .kurvenblatt h2 small.hinweis{max-width:100%;text-align:left;margin-left:0}
  .zeitraum{overflow-x:auto;flex-wrap:nowrap}
  .zeitraum .btn{flex:none}

  /* Übrige Tabellen (Aktionen): scrollen in ihrer Karte */
  .tabellenrahmen{max-width:100%}

  /* Verwaltung */
  .kacheln{grid-template-columns:repeat(2,1fr)}
  .zeilenliste>div{grid-template-columns:1fr;gap:2px}

  /* Palette: oben, fingerbreit */
  dialog.palette,dialog.tastenhilfe{margin:calc(env(safe-area-inset-top) + 10px) auto auto;width:calc(100vw - 16px)}
  .palette-fuss,.palette-feld kbd{display:none}
  .palette-eintrag{padding:10px}
  .palette-liste{max-height:60dvh}

  /* Anmeldung */
  .anmeldung-flaeche{padding:calc(28px + env(safe-area-inset-top)) 20px 28px;gap:28px}
  .anmeldung-links{gap:24px}
  .anmeldung-links h1{font-size:34px}
  .anmeldung-links p{font-size:15px}
  .anmeldung-form{padding:24px}
  .anmeldung-form input{font-size:16px;padding:14px}
  .anmeldung-form .btn{padding:14px}
}

/* ============================================================ Anmeldung, zweiter Durchgang (24.09.2026)
   Philipp: „sieht noch recht gleich aus". Die Seite ist der erste Eindruck für jeden
   Abonnenten — deshalb hier der große Auftritt: das Echo als Bild, der Name in Titelgröße
   (d0 aus den Tokens), die drei Fragen, die der Monitor beantwortet. Tiefgrün trägt die
   Fläche, Papier die Schrift, Signal nur im Zeichen selbst. */
body.anmeldung{min-height:100vh;overflow-x:hidden;
  background:radial-gradient(120% 95% at 24% 52%,var(--lbu-tiefgruen-700) 0%,var(--lbu-tiefgruen-800) 38%,var(--lbu-tiefgruen-900) 100%)}
/* Zentrum zwischen Titel und Karte — dort verdeckt der Signal-Punkt keinen Text */
.echo-feld{position:fixed;left:56%;top:50%;width:0;height:0;z-index:0;pointer-events:none;transition:transform 1.2s var(--lauf)}
.echo-feld svg{position:absolute;left:0;top:0;transform:translate(-50%,-50%) rotate(-1deg);overflow:visible}
.echo-feld path{fill:none;stroke:var(--lbu-papier);stroke-width:1.2}
/* Die Wellen haben ihre Endgröße und wachsen per Skalierung dorthin — das rechnet die
   Grafikkarte. Über Breite und Höhe animiert flackerte es (Philipp, 24.09.2026). */
/* Die Wellen zeichnet ein Skript auf eine einzige Leinwand. Vorher lag jede als 2000-px-Ebene
   im Grafikspeicher — auf einem Retina-Bildschirm zusammen rund 250 MB, das ruckelte. */
.echo-leinwand{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.echo-feld .grund{width:700px;height:700px;opacity:.08}
/* Der Kern wie im ECHO-Zeichen: 5 von 56 Einheiten, Signal, ungedreht */
.echo-kern{position:absolute;left:0;top:0;width:calc(700px * 5 / 56);height:calc(700px * 5 / 56);background:var(--lbu-signal);
  transform:translate(-50%,-50%)}
.echo-feld .grund path{stroke-width:1.5}
.anmeldung-flaeche{position:relative;z-index:1;max-width:1240px;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:clamp(40px,9vw,160px);padding:56px 40px}
.anmeldung-links{min-height:78vh;gap:48px}
.anmeldung-links .lbu{height:38px}
.anmeldung-links .claim .kicker{display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--lbu-tiefgruen-400);margin-bottom:22px}
.anmeldung-links .claim .kicker::before{content:"";width:28px;height:1px;background:currentColor}
.anmeldung-links h1{font:700 clamp(58px,8.6vw,128px)/.88 var(--font-display);letter-spacing:-.045em;color:var(--lbu-papier);margin-bottom:26px}
.anmeldung-links p{font-size:20px;line-height:1.45;color:var(--lbu-tiefgruen-400);max-width:30ch}
.anmeldung-links .drei{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px;max-width:620px;
  border-top:1px solid rgba(244,241,234,.14)}
.anmeldung-links .drei li{padding:16px 18px 0 0;display:grid;gap:4px}
.anmeldung-links .drei li+li{padding-left:18px;border-left:1px solid rgba(244,241,234,.14)}
.anmeldung-links .drei b{font:600 16px/1.2 var(--font-display);color:var(--lbu-papier)}
.anmeldung-links .drei span{font-size:13px;line-height:1.4;color:var(--lbu-tiefgruen-500)}
/* Der Claim in Signal, wie auf Visitenkarte und Fußband — auf Tiefgrün lesbar (Philipp, 24.09.2026) */
.anmeldung-links small.claim-zeile{color:var(--lbu-signal);font-size:12px}
.anmeldung-form{padding:44px 40px;gap:18px;border-radius:26px;border:0;background:rgba(255,255,255,.97);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.anmeldung-form h2{font:700 32px/1 var(--font-display);letter-spacing:-.025em}
.anmeldung-form input{height:50px;padding:0 16px;border-radius:12px;font-size:16px;background:var(--grund);transition:border-color .2s,box-shadow .2s,background .2s;width:100%}
.anmeldung-form input:focus{background:var(--weiss)}
.passwortfeld{position:relative;display:block}
.passwortfeld input{padding-right:96px}
.passwortfeld .zeigen{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:7px 10px;border-radius:8px;
  font:500 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lbu-faser-600)}
.passwortfeld .zeigen:hover{background:var(--lbu-faser-300);color:var(--lbu-tiefgruen)}
.anmeldung-form .btn{height:54px;font-size:16px;margin-top:8px}
.anmeldung-form .btn.prueft{opacity:.8;pointer-events:none}
.anmeldung-form .btn.prueft .pfeil-los{animation:pruefen 1s ease-in-out infinite}
@keyframes pruefen{50%{transform:translateX(6px)}}
@keyframes echo-welle{0%{transform:translate(-50%,-50%) rotate(-1deg) scale(.045);opacity:0}8%{opacity:.4}100%{transform:translate(-50%,-50%) rotate(-1deg) scale(1);opacity:0}}
@keyframes echo-senden{0%,100%{transform:translate(-50%,-50%) scale(1)}6%{transform:translate(-50%,-50%) scale(1.12)}}
@media (prefers-reduced-motion:no-preference){
  .echo-kern{animation:echo-senden 2.25s ease-out infinite}
  .anmeldung-links .claim>*{animation:ein .8s var(--lauf) both}
  .anmeldung-links .claim h1{animation-delay:.08s}
  .anmeldung-links .claim p{animation-delay:.16s}
  .anmeldung-links .drei{animation-delay:.24s}
  .anmeldung-form{animation:ein .8s var(--lauf) .3s both}
}
@media (max-width:900px){
  .anmeldung-flaeche{grid-template-columns:1fr;gap:36px;padding:calc(28px + env(safe-area-inset-top)) 20px 32px}
  .anmeldung-links{min-height:auto;gap:36px}
  .echo-feld{left:78%;top:120px}
  .echo-feld .grund{width:360px;height:360px}
  .echo-kern{width:calc(360px * 5 / 56);height:calc(360px * 5 / 56)}
  .anmeldung-links h1{font-size:clamp(52px,16vw,80px)}
  .anmeldung-links p{font-size:17px}
  .anmeldung-links .drei{grid-template-columns:1fr;margin-top:28px}
  .anmeldung-links .drei li,.anmeldung-links .drei li+li{padding:12px 0;border-left:0;border-bottom:1px solid rgba(244,241,234,.14);grid-template-columns:96px 1fr;align-items:baseline}
  .anmeldung-links small.claim-zeile{display:block}
  .anmeldung-form{padding:28px 22px;border-radius:22px}
}

/* ============================================================ Auftritt der Ansichten, zweiter Durchgang (24.09.2026)
   Titel in der Token-Stufe h1 statt 30 px, der Salbei des Kopfes läuft als Schimmer in die
   Seite, und der Produktradar zeigt oben, was in der Auswahl steckt. */
body:not(.anmeldung){background:linear-gradient(180deg,color-mix(in srgb,var(--lbu-salbei) 14%,var(--grund)) 0,var(--grund) 520px) no-repeat,var(--grund)}
h1{font:var(--type-h1);letter-spacing:var(--track-h1);color:var(--lbu-tiefgruen);text-wrap:balance}
.kopf{margin-bottom:26px}
.kopf .oben{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.kopf .oben::before{content:"";width:24px;height:1px;background:currentColor;flex:none}
.kopf p{font-size:16px;line-height:1.55;margin-top:12px}
.kennzahlen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:-4px 0 22px;border-top:1px solid var(--lbu-faser);border-bottom:1px solid var(--lbu-faser-300)}
.kennzahlen>div{padding:16px 18px 14px;display:grid;gap:6px}
.kennzahlen>div+div{border-left:1px solid var(--lbu-faser-300)}
.kennzahlen b{font:700 40px/1 var(--font-display);letter-spacing:-.035em;color:var(--lbu-tiefgruen);font-variant-numeric:tabular-nums}
.kennzahlen span{font:500 10px/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lbu-faser-600)}
.kennzahlen~.filterleiste .ergebnis{display:none}
@media (max-width:760px){
  h1{font-size:28px;line-height:1.08}
  .kopf p{font-size:14px}
  .kennzahlen{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 14px}
  .kennzahlen>div{padding:12px 10px}
  .kennzahlen>div:nth-child(4){border-left:0}
  .kennzahlen>div:nth-child(n+4){border-top:1px solid var(--lbu-faser-300)}
  .kennzahlen b{font-size:26px}
  .kennzahlen span{font-size:8.5px}
}
/* Offenes Blatt: main darf keine eigene Ebene sein (der Seitenübergang macht es sonst dazu),
   sonst liegt das Blatt unter Schleier und Reitern */
@media (max-width:760px){body.blatt-offen main{view-transition-name:none}}
/* Telefon: das Formular gehört ins erste Bild — die drei Stichpunkte weichen */
@media (max-width:760px){
  .anmeldung-links .drei{display:none}
  .anmeldung-links{gap:22px}
  .anmeldung-links h1{margin-bottom:14px}
}

/* ============================================================ Interaktion, dritter Durchgang (24.09.2026)
   Philipp: „hier passiert ja nichts". Karten reagieren jetzt auf die Maus, und jede Bewegung
   sagt etwas: der Balken zeigt die Reichweite im Verhältnis, die Anteile die Plattformen. */

/* Lichtschein, der der Maus folgt — für alles, was man anfassen kann */
.kanal,.stimme,.kachel,.prospekt,.markenkachel,.kurvenblatt,.haendlerblock{position:relative;isolation:isolate}
.kanal::after,.stimme::after,.kachel::after,.prospekt::after,.markenkachel::after,.kurvenblatt::after,.haendlerblock::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--lbu-tiefgruen-300) 70%,transparent),transparent 65%)}
@media (hover:hover){
  .kanal:hover::after,.stimme:hover::after,.kachel:hover::after,.prospekt:hover::after,.markenkachel:hover::after,.kurvenblatt:hover::after,.haendlerblock:hover::after{opacity:1}
  .kanal,.stimme,.kachel,.prospekt{transition:translate .35s var(--federnd),box-shadow .35s,border-color .35s}
  .kanal:hover,.stimme:hover,.kachel:hover,.prospekt:hover{translate:0 -4px;box-shadow:var(--schatten-l)}
  .markenkachel{transition:translate .25s var(--federnd),box-shadow .25s,border-color .2s}
  .markenkachel:hover{translate:0 -2px;box-shadow:var(--schatten)}
}

/* Marktradar: Werkzeugleiste */
.kanal-werkzeug{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.kanal-suche{display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:380px;height:42px;padding:0 14px;border:1px solid var(--lbu-faser);border-radius:999px;background:var(--weiss);transition:border-color .2s,box-shadow .2s}
.kanal-suche:focus-within{border-color:var(--lbu-tiefgruen);box-shadow:0 0 0 3px var(--lbu-tiefgruen-300)}
.kanal-suche .ico{width:16px;height:16px;opacity:.6}
.kanal-suche input{flex:1;border:0;outline:0;background:transparent;font:400 14.5px/1 var(--font-display);color:var(--lbu-graphit);min-width:0}
.schalter button{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--lbu-faser-600);transition:background .2s,color .2s,box-shadow .2s}
.schalter button:hover{color:var(--lbu-tiefgruen)}
.schalter button.jetzt{background:var(--weiss);color:var(--lbu-tiefgruen);box-shadow:var(--schatten)}
.schalter a{transition:background .2s,color .2s,box-shadow .2s}
.schalter a:hover{color:var(--lbu-tiefgruen);background:color-mix(in srgb,var(--weiss) 60%,transparent)}
.kanal[hidden]{display:none}
::view-transition-group(*){animation-duration:.45s}

/* Art-Umschalter überfahren: die gemeinten Kacheln bleiben, die anderen treten zurück */
.kanaele .kanal{transition:translate .35s var(--federnd),box-shadow .35s,opacity .25s,filter .25s}
.kanaele.vorschau .kanal:not(.gemeint){opacity:.28;filter:saturate(.3)}

/* Reichweitenbalken mit Anteilen je Plattform — Farbe der Art, weil die Art schon die Kachel trägt */
.reichweite-leiste{height:6px;border-radius:3px;background:var(--lbu-faser-300);overflow:hidden;margin:2px 0 4px}
.reichweite-leiste i{display:flex;gap:2px;height:100%;width:calc(var(--anteil,0) * 100%);min-width:6px;border-radius:3px;overflow:hidden;
  transform-origin:left;transition:width .6s var(--federnd)}
.reichweite-leiste em{display:block;height:100%;background:currentColor;opacity:.85;transition:opacity .2s,filter .2s}
.kanal.marke .reichweite-leiste{color:var(--lbu-tiefgruen)}
.kanal.hersteller .reichweite-leiste{color:var(--lbu-glut)}
.kanal.haendler .reichweite-leiste{color:var(--lbu-graphit)}
.kanal.hebt-pf .reichweite-leiste em:not(.hier){opacity:.2}
.kanal.hebt-pf .reichweite-leiste{height:10px;margin-bottom:0}
.reichweite-leiste{transition:height .25s var(--federnd),margin .25s}
@media (prefers-reduced-motion:no-preference){
  .kanal:not(.sichtbar) .reichweite-leiste i{transform:scaleX(0)}
  .kanal .reichweite-leiste i{transition:transform 1s var(--federnd) .15s,width .6s var(--federnd)}
}

/* Plattform-Pillen und Beiträge: sagen beim Überfahren, dass sie wohin führen */
.plattformen .pf{transition:background .2s,color .2s,translate .25s var(--federnd),box-shadow .2s}
.plattformen .pf:hover{background:var(--lbu-tiefgruen);color:var(--weiss);translate:0 -1px;box-shadow:var(--schatten)}
.plattformen .pf:hover span,.plattformen .pf:hover b{color:var(--weiss)}
.plattformen .pf::after{content:"↗";font-size:11px;max-width:0;overflow:hidden;opacity:0;transition:max-width .25s var(--lauf),opacity .2s}
.plattformen .pf:hover::after{max-width:14px;opacity:1}
.kanal ul.beitraege li,.neuheiten ul.beitraege li{position:relative;border-radius:8px;transition:background .15s,padding .2s var(--lauf)}
.kanal ul.beitraege li{margin:0 -8px;padding:4px 8px}
.neuheiten ul.beitraege li{margin:0 -10px;padding:5px 10px}
.kanal ul.beitraege li:hover,.neuheiten ul.beitraege li:hover{background:var(--lbu-papier)}
.kanal ul.beitraege li:hover .glyph,.neuheiten ul.beitraege li:hover .glyph{color:var(--lbu-tiefgruen)}
.kanal ul.beitraege li:hover a,.neuheiten ul.beitraege li:hover a{color:var(--lbu-tiefgruen);text-decoration:none}
.kanal ul.beitraege li:has(a):hover small,.neuheiten ul.beitraege li:has(a):hover small{opacity:0}
.kanal ul.beitraege li:has(a)::after,.neuheiten ul.beitraege li:has(a)::after{content:"↗";position:absolute;right:8px;top:50%;translate:-4px -50%;
  font-size:12px;color:var(--lbu-tiefgruen);opacity:0;transition:opacity .15s,translate .2s var(--federnd);pointer-events:none}
.kanal ul.beitraege li:has(a):hover::after,.neuheiten ul.beitraege li:has(a):hover::after{opacity:1;translate:0 -50%}
/* Der ganze Beitrag ist die Klickfläche, nicht nur der Text */
.kanal ul.beitraege li a::before,.neuheiten ul.beitraege li a::before{content:"";position:absolute;inset:0}
.kanal .kanal-zahl{transition:letter-spacing .35s var(--federnd)}
.kanal:hover .kanal-zahl{letter-spacing:-.01em}
.kanal .art{transition:translate .3s var(--federnd)}
.kanal:hover .art{translate:-2px 0}
@media (max-width:760px){
  .kanal-werkzeug{gap:8px}
  .kanal-suche{max-width:none;flex-basis:100%}
  .schalter.sortieren{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .schalter.sortieren button{flex:none}
  .neuheiten-mehr{display:block;margin:10px 12px 0;padding:10px;width:calc(100% - 24px);border-radius:10px;background:var(--lbu-papier);color:var(--lbu-tiefgruen);font-weight:500;font-size:14px}
}
@media (min-width:761px){.neuheiten-mehr{display:none}}

/* Stand der Kanäle: sagt, wie alt die Zahlen sind — ab 14 Tagen in Glut, damit niemand einen
   alten Stand für heute hält */
.stand-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--lbu-tiefgruen-300);
  color:var(--lbu-tiefgruen);font:500 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.stand-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.stand-chip.alt{background:var(--lbu-glut-300);color:var(--lbu-glut)}

/* Fußleiste ohne Weichzeichner: den rechnete der Browser beim Scrollen durch die lange Tabelle
   in jedem Bild neu. Fast deckend sieht es gleich aus (24.09.2026). */
.bottom{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(250,249,246,.97)}

/* ============================================================ Telefon: Produktradar als Liste (24.09.2026)
   Philipp: „da reicht eine Liste, die man für ein Benchmark anmelden kann". Auf dem Telefon sucht
   man das passende Produkt und gibt es an den Vergleich — die Kennwerte stehen im Benchmark.
   Je Zeile: Bild · Marke, Produkt, Händler · Literpreis · runder Knopf „in den Benchmark".
   Überschreibt die Datenblattkarten weiter oben. */
@media (max-width:760px){
  body[data-ansicht="vergleich"] table.tabelle tbody{background:var(--weiss);border:1px solid var(--lbu-faser-300);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten)}
  body[data-ansicht="vergleich"] tr.haupt{grid-template-columns:60px minmax(0,1fr) auto 36px;grid-template-rows:auto auto;column-gap:12px;row-gap:1px;
    align-items:center;padding:10px 12px;margin:0;border:0;border-bottom:1px solid var(--lbu-faser-300);border-radius:0;box-shadow:none;cursor:pointer}
  body[data-ansicht="vergleich"] tr.haupt:last-child{border-bottom:0}
  body[data-ansicht="vergleich"] tr.haupt:active{background:var(--lbu-papier)}
  body[data-ansicht="vergleich"] tr.haupt:has(.vergleichen:checked){border-color:var(--lbu-faser-300);box-shadow:inset 3px 0 0 var(--lbu-tiefgruen);background:var(--getoent)}
  body[data-ansicht="vergleich"] tr.haupt td:is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10),:nth-child(11),:nth-child(12),:nth-child(13),:nth-child(14),:nth-child(15),:nth-child(17),:nth-child(18),:nth-child(19)){display:none !important}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(2){grid-column:1;grid-row:1/3}
  body[data-ansicht="vergleich"] tr.haupt .mini,body[data-ansicht="vergleich"] tr.haupt .dose{width:60px;height:60px}   /* größer seit 23.10.2026 */
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(3){grid-column:2;grid-row:1;font-size:12.5px;align-self:end}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(3) a{color:var(--lbu-faser-700) !important;font-weight:600 !important}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(4){grid-column:2;grid-row:2;font-size:14.5px;align-self:start;min-width:0}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(4)>span:first-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--lbu-tiefgruen)}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(4) .unter{display:none}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(4) a.quelle{font-size:11.5px;margin-top:1px}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(16){grid-column:3;grid-row:1/3;align-self:center;text-align:right;font-size:15px;font-weight:600;color:var(--lbu-tiefgruen);white-space:nowrap}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(16) .unter{font-size:9.5px;font-weight:500}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(1){position:static;grid-column:4;grid-row:1/3;align-self:center;justify-self:end}
  /* Der Knopf: rund, „+" zum Anmelden, Haken wenn im Benchmark */
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(1) input{-webkit-appearance:none;appearance:none;width:34px;height:34px;margin:0;border-radius:50%;
    border:1.5px solid var(--lbu-tiefgruen-500);cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s var(--federnd);
    background:var(--weiss) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 6v12M6 12h12' stroke='%230C2A1F' stroke-width='2' stroke-linecap='round'/></svg>") center/18px no-repeat}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(1) input:checked{border-color:var(--lbu-tiefgruen);
    background:var(--lbu-tiefgruen) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(1) input:active{transform:scale(.88)}
  body[data-ansicht="vergleich"] tr.unterzeile,body[data-ansicht="vergleich"] tr.farbtonzeile,body[data-ansicht="vergleich"] tr.verlaufzeile{display:none !important}
}
/* Telefon-Liste ohne Preis: ohne Einheit war „1,90 €" nicht zu lesen, und zum Aussuchen braucht
   es ihn nicht — Preise stehen im Benchmark (Philipp, 24.09.2026) */
@media (max-width:760px){
  body[data-ansicht="vergleich"] tr.haupt{grid-template-columns:48px minmax(0,1fr) 36px}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(16){display:none !important}
  body[data-ansicht="vergleich"] tr.haupt td:nth-child(1){grid-column:3}
}

/* Kopf mittig in der sichtbaren Salbeifläche: die handgezogene Unterkante verlängert die Fläche
   um rund 8 px nach unten, also braucht es oben mehr Luft als unten. Vorher saßen Logo, ECHO-Monitor
   und Reiter 6–7 px über der Mitte (Philipp, 24.09.2026). Oben zählt auf dem iPhone die Statusleiste mit. */
.top{padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:12px}
@media (max-width:760px){.top{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:10px}}

/* Neuheiten in drei Kategorien (19.10.2026). Das Band bleibt die eine Signal-Stelle; Schalter
   und Chips sind neutral, damit die Kategorie unterscheidet, ohne zu werten. */
.neuheiten-wahl{display:inline-flex;margin:12px 18px 2px;flex-wrap:wrap}
.neuheiten-wahl button small{font:500 10px/1 var(--font-mono);color:var(--lbu-faser-600);margin-left:4px}
.neuheiten-wahl button.jetzt small{color:var(--lbu-tiefgruen)}
.neuheiten ul.beitraege li{grid-template-columns:14px auto 108px 150px minmax(0,1fr) auto}
.neuheiten ul.beitraege li[hidden],.neuheiten-mehr[hidden]{display:none !important}
.kat-chip{justify-self:start;padding:3px 8px;border-radius:999px;font:500 9.5px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--lbu-faser);color:var(--lbu-faser-700);background:var(--weiss)}
.kat-chip.produkt{border-color:var(--lbu-tiefgruen-500);color:var(--lbu-tiefgruen)}
.kat-chip.trend{background:var(--lbu-papier)}
@media (max-width:760px){
  .neuheiten-wahl{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:10px 12px 2px}
  .neuheiten-wahl button{flex:none}
}

/* Seitenübergang: Die Reiter tragen eigene Namen und liegen damit über dem wandernden Zeiger.
   Vorher war die Schrift des aktiven Reiters während des Übergangs verdeckt (19.10.2026). */
.reiter > a:nth-of-type(1){view-transition-name:reiter-1}
.reiter > a:nth-of-type(2){view-transition-name:reiter-2}
.reiter > a:nth-of-type(3){view-transition-name:reiter-3}
.reiter > a:nth-of-type(4){view-transition-name:reiter-4}
.reiter > a:nth-of-type(5){view-transition-name:reiter-5}

/* Benchmark-Leiste nur mit der Zahl (Philipp, 24.10.2026: „es reicht, wenn die Anzahl drinsteht") */
.auswahl #auswahl-liste{display:none}
.auswahl .dock-titel{font-size:12px}
.auswahl .dock-titel b{min-width:26px;height:26px;font-size:12px}