/* KUKANILEA Storefront. Local to /webtools. */
.wt-page {
  --store-navy:var(--wt-navy);
  /* Die frueheren Store-Namen sind seit App Store 3.0 Aliase der Tokens
     am Ende von "Zwei Farbwelten" -- eine Quelle je Farbe. */
  --store-teal:var(--st-akzent);
  --store-line:var(--st-karte-rand);
  --store-muted:var(--st-text-2);
  --store-surface:var(--st-grund);
  background:var(--st-grund);
  color:var(--st-text);
}
.wt-page main { overflow:clip; }
/* DIE 88 WAR EINE ZAHL, KEIN MASS.
   Der Seitenkopf klebt oben und ist 70 px hoch -- bis 320 px, wo er
   auf zwei Zeilen umbricht und 114 px misst. Die feste 88 lag damit
   UNTER der Kopfhoehe: wer dort zu einem Bereich sprang und danach
   nach oben scrollte, bekam den Kopf ueber die Ueberschrift gelegt
   (WCAG 2.2 SC 2.4.11). Gemessen am 2026-09-22 bei 320x640.
   Die Hoehe steht bereits als Token in der Schale -- `--header-h`;
   hier wird sie benutzt statt nachgebaut. */
/* Die Anlass-Karte gehoert dazu (seit 2026-10-17): sie ist das Sprungziel
   eines Anlass-Ankers, weil ihre Huelle mit `display: contents` keinen
   Kasten hat -- ohne diese Zeile lag die Kartenreihe unter dem Kopf. */
.wt-page :where(.wt-hero,.wt-section,.wt-reihe,.wt-anlass-knopf) {
  scroll-margin-top:calc(var(--header-h, 70px) + 18px);
}
.wt-page :where(.wt-hero,.wt-store-main) a { text-decoration:none; }
.wt-page :where(.wt-hero,.wt-store-main,.wt-leiste) :focus-visible {
  outline:3px solid var(--st-fokus);
  outline-offset:3px;
}
/* ---------- Hero: die Suche, und sonst nichts ----------
   DAS SCHAUFENSTER IST AUS DEM HERO AUSGEZOGEN.

   Hier lag rechts ein automatisch wechselndes Karussell mit fuenf
   Anwendungen, Pausenknopf, zwei Pfeilen und fuenf Punkten. Bei
   170+ Werkzeugen ist Suche keine Zusatzfunktion, sondern der
   schnellste Weg zum Ziel -- und ein Marketingelement zwischen Mensch
   und Werkzeug ist genau das, was NN/g an Hero-Carousels bemaengelt:
   ueberscrollt, sequenziell, auf dem Telefon nie automatisch.

   Der Hero traegt deshalb nur noch Frage, Suche und Kategorien, in
   einer Spalte und mittig. Die fuenf Anwendungen stehen ein Stueck
   tiefer als fuenf Karten, die alle gleichzeitig sichtbar sind.

   DER LADEN IST NEUTRAL, DIE WARE IST BUNT: ein heller, praktisch
   farbloser Grund mit einer feinen Kante nach unten trennt Hero und
   Regale, ohne selbst eine Farbe zu behaupten. */
.wt-page .wt-hero {
  padding:clamp(30px,4vw,56px) 0 clamp(26px,3vw,38px);
  border-bottom:1px solid var(--store-line);
  background:linear-gradient(180deg,#fafbfb,#f3f5f5);
}
.wt-page .wt-hero-grid {
  display:grid;
  justify-items:center;
  text-align:center;
}
.wt-hero-grid > h1 {
  /* 24ch, nicht 17: "Was möchtest du erledigen?" brach bei 1440 px
     mitten im Satz um. Eine Frage, die auf zwei Zeilen steht, liest
     sich langsamer als eine, die dasteht. */
  max-width:24ch;
  margin:0;
  color:#122c3a;
  font-size:clamp(2.1rem,3.4vw,3.2rem);
  line-height:1.07;
  letter-spacing:-.05em;
  font-weight:750;
}
.wt-intro-lead {
  max-width:52ch;
  margin:12px 0 0;
  color:#47606a;
  font-size:clamp(.96rem,1.3vw,1.06rem);
  line-height:1.55;
}
/* Das dominante Bedienelement der Seite: breiter als der Fliesstext
   darueber, hoch genug fuer einen Fingertipp, und die Trefferliste
   haengt direkt daran. */
.wt-search-panel { position:relative; z-index:2; width:min(720px,100%); margin-top:24px; text-align:left; }
.wt-search-box {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:0 20px;
  border:1px solid #abc3c0;
  border-radius:17px;
  background:#fff;
  box-shadow:0 8px 23px rgba(21,61,68,.07);
}
.wt-search-box:focus-within { border-color:var(--st-fokus); box-shadow:0 0 0 4px color-mix(in srgb,var(--st-fokus) 16%,transparent),0 12px 28px rgba(21,61,68,.09); }
.wt-search-box svg { width:23px; height:23px; flex:none; color:#49717a; }
/* Schliesskreuz: sichtbar, solange etwas im Feld steht -- auf jeder Breite
   (webtools-page.js: knopfZeigen). Der Text "Suche schliessen" bleibt der
   Name fuer Screenreader, sichtbar ist nur das Kreuz. :not([hidden]), weil
   display:grid sonst das hidden-Attribut ueberstimmt. */
.wt-search-zu:not([hidden]) {
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  border:0; border-radius:50%; padding:0; background:none; color:#49717a;
  font:inherit; font-size:0; cursor:pointer;
}
.wt-search-zu span { font-size:1.05rem; line-height:1; }
.wt-search-zu:focus-visible { outline:3px solid var(--st-fokus); outline-offset:2px; }
.wt-search-box input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#153541; font:inherit; font-size:1.05rem; }
.wt-search-box input::placeholder { color:#75888e; }
/* EIN KREUZ, NICHT ZWEI (2026-10-15). Sobald etwas im Feld steht, zeigt
   Chrome und Safari das eigene Loeschkreuz des Suchfelds -- und direkt
   daneben steht "Suche schliessen" (#wtSearchClose), das leert UND
   schliesst. Zwei Kreuze nebeneinander fragen "welches?"; das eigene
   kann mehr und ist per Tastatur und Vorlesesoftware benannt. */
.wt-search-box input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; display:none; }
.wt-search-status { min-height:0; margin:0; color:var(--store-muted); font-size:.85rem; }
.wt-search-status:not(:empty) { padding:10px 2px 2px; }
/* CHIPS, KEINE UNTERSTRICHENEN VERWEISE.
   Acht unterstrichene Textlinks sahen aus wie Fliesstext mit Links und
   nicht wie ein Filter. Ein Chip sagt seine Rolle ueber seine Form --
   und traegt 44 px Hoehe, statt 34 px wie die Textfassung darunter. */
.wt-quick-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:100%; margin-top:20px; }
.wt-quick-links a {
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border:1px solid #bfd5d2; border-radius:8px; background:#fff;
  color:#27545c; font-size:.84rem; font-weight:650; white-space:nowrap;
}
.wt-quick-links a:hover { border-color:var(--st-akzent-rand); background:#eef6f4; color:#0b6269; }
.wt-search-results {
  display:grid;
  gap:2px;
  max-height:min(60vh,520px);
  overflow-y:auto;
  margin:12px 0 0;
  padding:6px;
  list-style:none;
  border:1px solid #cfdbdb;
  border-radius:15px;
  background:#fff;
  box-shadow:0 20px 40px rgba(16,54,63,.13);
}
.wt-search-results[hidden] { display:none; }
.wt-search-results li { margin:0; }
.wt-search-results a {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:5px 10px;
  border-radius:10px;
  color:#17333e;
}
/* ZWEI ZUSTAENDE, DIE NICHT DASSELBE SIND.
   `:hover` ist "hier liegt der Zeiger", `.is-aktiv` ist "das oeffnet
   Enter". Bis zum 2026-09-22 setzte das Ueberfahren auch den
   Tastaturzustand -- und damit oeffnete Enter ein Werkzeug, das
   niemand gewaehlt hatte. Seitdem sind es zwei Dinge, und sie sehen
   verschieden aus: Hover faerbt, die aktive Option traegt zusaetzlich
   eine Kante. */
.wt-search-results a:hover { background:#eef5f3; }
.wt-search-results a.is-aktiv,.wt-search-results a:focus-visible {
  background:#e4f1ee; box-shadow:inset 3px 0 0 var(--store-teal);
}
.wt-result-copy { display:grid; gap:1px; min-width:0; }
.wt-result-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; }
.wt-result-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#59737c; font-size:.74rem; }
.wt-result-copy small[hidden] { display:none; }
/* Der Bereich steht rechts und aussen: er ordnet ein, er ist nicht die
   Antwort. Auf schmalen Breiten faellt er weg -- dort zaehlt der Name
   und was das Werkzeug tut. */
.wt-result-ort { flex:none; color:#6b848c; font-size:.72rem; white-space:nowrap; }
/* Dieselbe Angabe wie an der Kachel (.wt-kachel-land), dieselbe Form. */
.wt-result-land {
  flex:none; padding:1px 6px; border-radius:5px;
  background:#eef1f4; color:#3b4852;
  font-size:.62rem; font-weight:750; letter-spacing:.03em; word-spacing:-.12em;
  line-height:1.5; white-space:nowrap;
}
/* Eine frueher gestellte Frage. Sie fuehrt nicht zu einem Werkzeug,
   sondern zurueck in denselben Gedanken -- deshalb ein Knopf und kein
   Link, und deshalb die Uhr statt eines App-Gesichts. */
.wt-result-frage {
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:48px; padding:5px 10px 5px 14px;
  border:0; border-radius:10px; background:none;
  color:#17333e; font:inherit; font-size:.88rem; text-align:left; cursor:pointer;
}
.wt-result-frage svg { width:18px; height:18px; flex:none; color:#6b848c; }
.wt-result-frage span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wt-result-frage:hover { background:#eef5f3; }
.wt-result-frage.is-aktiv { background:#e4f1ee; box-shadow:inset 3px 0 0 var(--store-teal); }
/* Kein Treffer ist ein Zustand, keine Sackgasse. */
.wt-search-leer {
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  margin:12px 0 0; padding:14px 16px;
  border:1px dashed var(--st-akzent-rand); border-radius:15px;
  background:color-mix(in srgb,var(--white,#fff) 85%,var(--st-akzent-flaeche));
}
.wt-search-leer[hidden] { display:none; }
.wt-search-leer p { margin:0; margin-right:auto; color:#33565d; font-size:.86rem; line-height:1.45; }
.wt-search-leer a {
  display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
  border:1px solid var(--st-akzent-rand); border-radius:8px;
  color:var(--st-akzent); font-size:.84rem; font-weight:700; white-space:nowrap;
}
.wt-search-leer a:hover { background:#fff; }
.wt-page.wt-searching .wt-store-main,.wt-page.wt-searching .wt-quick-links,.wt-page.wt-searching .wt-intro-lead { display:none; }
.wt-page.wt-searching .wt-hero { min-height:calc(100vh - 74px); }
/* ---------- Schaufenster im Hero (2026-10-01, Betreiberauftrag)
   Zurueck im Hero, aber ohne die drei Fehler des ersten Karussells:
   es laeuft NIE von selbst (motion-system.md), die Aufnahme ist auf dem
   Telefon ein eigener 4:3-Ausschnitt statt eines geschrumpften Ganzen,
   und "Haeufig verwendet" ist dafuer weg -- ein Schaufenster, nicht zwei.
   Ohne Skript ist die Spur eine gewoehnliche Wischflaeche; Pfeile und
   Punkte erscheinen erst, wenn sie etwas tun.

   ZWEISPALTIG ERST AB 1024 PX. Darunter steht das Schaufenster unter
   den Kategorien, und die Suche bleibt das Erste, was man sieht. */
@media (min-width:64em) {
  .wt-page .wt-hero-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    /* Die beiden 1fr-Zeilen nehmen den Ueberschuss: die linke Spalte
       steht als Block mittig neben dem hoeheren Schaufenster, statt
       dass sich die Luecken zwischen Titel, Suche und Chips dehnen. */
    grid-template-rows:1fr auto auto auto auto 1fr;
    column-gap:clamp(36px,4.5vw,72px);
    justify-items:start;
    text-align:left;
  }
  .wt-page .wt-hero-grid > h1 { grid-area:2 / 1; }
  .wt-page .wt-hero-grid > .wt-intro-lead { grid-area:3 / 1; }
  .wt-page .wt-hero-grid > .wt-search-panel { grid-area:4 / 1; width:100%; }
  .wt-page .wt-hero-grid > .wt-quick-links { grid-area:5 / 1; justify-content:flex-start; }
  .wt-page .wt-hero-grid > .wt-schaufenster { grid-area:1 / 2 / 7 / 3; width:100%; margin-top:0; }
  /* Suchen ist ein anderer Zustand: das Schaufenster tritt ab, und die
     Suche bekommt die Breite, die die Trefferliste braucht -- ohne dass
     ihre linke Kante springt. */
  .wt-page.wt-searching .wt-hero-grid { grid-template-columns:minmax(0,760px); grid-template-rows:none; }
}
.wt-page.wt-searching .wt-schaufenster { display:none; }
.wt-schaufenster {
  width:min(720px,100%); min-width:0; margin-top:30px;
  color:var(--st-text); text-align:left;
}
.wt-schau-kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.wt-schau-titel {
  margin:0; color:var(--st-text-2);
  font-size:.78rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase;
}
.wt-carousel-pfeile { display:flex; gap:8px; }
.wt-carousel-pfeile[hidden],.wt-carousel-punkte[hidden] { display:none; }
.wt-carousel-pfeil {
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:1px solid var(--st-chip-rand); border-radius:50%;
  background:var(--st-chip); color:var(--st-text);
  font:inherit; font-size:1.5rem; line-height:1; cursor:pointer;
}
.wt-carousel-pfeil:hover { background:var(--st-chip-hover); border-color:var(--st-karte-rand-hoch); }
/* aria-disabled statt disabled: ein Knopf, der am Ende den Fokus
   verliert, wirft die Tastatur an den Seitenanfang. */
.wt-carousel-pfeil[aria-disabled="true"] { opacity:.35; cursor:default; }
.wt-carousel-pfeil[aria-disabled="true"]:hover { background:var(--st-chip); border-color:var(--st-chip-rand); }
.wt-carousel-track {
  position:relative;
  display:flex; gap:16px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
  border-radius:22px;
}
.wt-carousel-track::-webkit-scrollbar { display:none; }
.wt-carousel-track.is-ziehen { scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; user-select:none; }
.wt-carousel-slide { flex:0 0 100%; min-width:0; scroll-snap-align:center; }
.wt-schau-karte {
  position:relative; display:grid; gap:14px; height:100%;
  padding:16px 16px 18px;
  border:1px solid var(--st-karte-rand); border-radius:22px;
  background:var(--st-karte); box-shadow:var(--st-schatten);
}
.wt-schau-oben {
  display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:26px; margin:0;
  font-size:.74rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase;
}
.wt-schau-bereich { color:var(--st-akzent); }
.wt-schau-plakette {
  flex:none; padding:3px 10px; border:1px solid var(--st-gut-rand); border-radius:8px;
  background:transparent; color:var(--st-gut); letter-spacing:.02em; text-transform:none;
}
/* Die Szene bringt Fenster, Lupe und Schatten mit, aber seit App Store
   3.0 KEINEN Grund mehr (build_webtools_hero_shots.mjs, Alphakanal):
   den malt die Seite -- die Buehnenflaeche des Themes und ein Lichtfleck
   im Ton des Bereichs, wie er frueher im Bild stand. */
.wt-schau-bild { overflow:hidden; border-radius:14px;
  background:
    radial-gradient(circle at 84% 12%, color-mix(in oklab, var(--st-akzent) 30%, transparent), transparent 55%),
    radial-gradient(circle at 6% 96%, color-mix(in oklab, var(--st-akzent) 16%, transparent), transparent 50%),
    var(--st-buehne);
  box-shadow:inset 0 0 0 1px var(--st-karte-rand); }
.wt-schau-bild picture,.wt-schau-bild img { display:block; width:100%; height:auto; }
.wt-schau-fuss { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; }
.wt-schau-fuss .wt-app-icon { width:52px; height:52px; }
.wt-schau-text { display:grid; gap:3px; min-width:0; }
.wt-schau-text strong { color:var(--st-text); font-size:1.05rem; line-height:1.25; }
/* Ohne Zeilenkappung: bei 200 % Schriftgroesse waere der Satz sonst
   abgeschnitten (WCAG 1.4.4, dieselbe Lehre wie am 2026-09-28). */
.wt-schau-text > span { color:var(--st-text-2); font-size:.86rem; line-height:1.4; }
.wt-schau-los {
  /* gap statt Leerzeichen: am Anfang eines Flex-Elements faellt es weg,
     und aus "Jetzt öffnen →" wurde "Jetzt öffnen→". */
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 18px;
  border-radius:8px; background:var(--st-wahl); color:var(--st-wahl-text);
  font-size:.88rem; font-weight:750; white-space:nowrap;
}
.wt-schau-los:hover { background:var(--st-wahl-hover); color:var(--st-wahl-text); }
/* Die ganze Karte ist die Trefferflaeche, der Link bleibt einer. */
.wt-schau-los::after { content:""; position:absolute; inset:0; border-radius:22px; }
.wt-page .wt-hero .wt-schau-los:focus-visible { outline-color:var(--st-fokus); }
.wt-carousel-punkte { display:flex; justify-content:center; gap:2px; margin-top:10px; }
/* 24 px Trefferflaeche um einen 8-px-Punkt (WCAG 2.5.8). Kein
   Uebergang: die Breite ist eine Layout-Eigenschaft. */
.wt-carousel-punkt {
  display:grid; place-items:center; width:24px; height:24px; padding:0;
  border:0; background:none; cursor:pointer;
}
.wt-carousel-punkt::before {
  content:""; width:8px; height:8px; border-radius:8px; background:color-mix(in srgb, var(--st-text) 26%, transparent);
  transition:width var(--motion-fast,.14s) var(--ease-standard,ease);
}
.wt-carousel-punkt[aria-current="true"]::before { width:22px; background:var(--st-akzent); }
@media (prefers-reduced-motion:reduce) { .wt-carousel-punkt::before { transition:none; } }
@media (prefers-reduced-motion:reduce) {
  .wt-carousel-track { scroll-behavior:auto; }
}
@media (max-width:600px) {
  .wt-schaufenster { margin-top:22px; }
  .wt-carousel-track { gap:12px; border-radius:18px; }
  /* Die naechste Karte schaut hervor: auf dem Telefon die einzige
     Ankuendigung, dass hier mehr als eine liegt. */
  .wt-carousel-slide { flex-basis:88%; }
  .wt-schau-karte { gap:12px; padding:12px 12px 14px; border-radius:18px; }
  .wt-schau-los::after { border-radius:18px; }
  .wt-schau-bild { border-radius:12px; }
  .wt-schau-fuss { grid-template-columns:auto minmax(0,1fr); }
  .wt-schau-fuss .wt-app-icon { width:44px; height:44px; }
  .wt-schau-los { grid-column:1 / -1; justify-content:center; }
}
/* ---------- App-Kacheln ---------- */
/* ---------- Kacheln: das App-Icon-System (Neuaufbau 2026-10-01)
   Vier Dinge machten die Kacheln uneinheitlich, alle gemessen:
     Form       28 % rund ODER Squircle, je nachdem ob der Browser
                corner-shape kennt -- zwei Silhouetten im selben Katalog
     Strich     3,2/48 bzw. 1,7/24 im SVG-Raster, gezeichnet also
                1,8 bis 3,0 px je nach Kachelgroesse
     Flaeche    die Glyphe nahm 42-57 % der Kante ein
     Licht      Schlagschatten 15 px weich auf jeder Groesse, plus ein
                zweiter Schatten im Glyphen-SVG
   Jetzt: eine Form, ein Strich in Bildschirmpixeln (vector-effect), eine
   Glyphenflaeche, Licht genau einmal -- auf der Kachel, nicht im SVG.
   Die Farben kommen aus website/webtools-bereichsfarben.json (OKLCH,
   gleiche Helligkeit fuer alle; --tile-light/--tile-dark inline). */
.wt-app-icon {
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  flex:none;
  overflow:hidden;
  /* Groessenbezug fuer den Strich: cqmin = 1 % der Kachel. */
  container-type:size;
  border-radius:28%;
  background:linear-gradient(145deg,var(--tile-light),var(--tile-dark));
  background:linear-gradient(145deg in oklab,var(--tile-light),var(--tile-dark));
  /* Licht von oben links: eine helle Kante oben, eine weiche dunkle unten,
     ein Hauch Rand gegen helle Gruende -- und ein Schatten, der mit der
     Kachel klein wird, statt bei 36 px so weit zu fallen wie bei 62. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .28),
    inset 0 -1px 2px rgb(0 0 0 / .10),
    inset 0 0 0 1px rgb(255 255 255 / .06),
    0 1px 2px rgb(0 0 0 / .12),
    0 4px 10px -3px rgb(0 0 0 / .18);
  color:#fff;
}
/* Squircle nur, wo der Browser sie kennt -- dann mit 50 %, denn eine
   Squircle-Ecke schneidet auf der Diagonale nur 0,16 r ein statt 0,29 r.
   So bleibt die Eckentiefe in beiden Browserfamilien gleich (Abweichung
   hoechstens 0,2 px); ohne @supports waere 50 % rund ein Kreis. */
@supports (corner-shape:squircle) {
  .wt-app-icon { border-radius:50%; corner-shape:squircle; }
}
.wt-app-icon svg { display:block; width:80%; height:80%; overflow:visible; }
/* EIN STRICH FUER BEIDE RASTER.
   Die Marken sind auf 48 gezeichnet, die Aufgabensymbole auf 24 -- im
   SVG-Raster ergab dieselbe Zahl zwei verschiedene Linien. Mit
   non-scaling-stroke gilt der Wert in Bildschirmpixeln: 2 px bis zu
   einer 50-px-Kachel, dann mit ihr wachsend bis 2,5 px (62 px). Unter
   2 px wird Weiss auf Farbe duenn und flimmert. */
.wt-app-icon svg :is(path,circle,rect,line,polyline,polygon,ellipse):not(.duo) {
  stroke:currentColor;
  vector-effect:non-scaling-stroke;
  /* 1,25 px bei 20 px, 3 px bei 72 px: die eigenen Motive vom 2026-10-15
     tragen feinere Details, und bei 20 px verschmolz ein 2-px-Strich. */
  stroke-width:clamp(1.25px, 4.2cqmin, 3px);
}
.wt-app-icon .duo { fill:rgb(255 255 255 / .26); stroke:none; }
/* DIE DUNKLE WELT (App Store 3.0): dunkle Kachel, helle Glyphe, Akzent im
   Bereichston -- je Eintrag aus webtools_views.dunkle_welt. Nur wo die
   Werte da sind; sonst bleibt die kraeftige Kachel. */
html[data-theme="dark"] .wt-app-icon[style*="--icon-dunkel-flaeche"] {
  background:linear-gradient(145deg, var(--icon-dunkel-flaeche), var(--icon-dunkel-flaeche2));
  background:linear-gradient(145deg in oklab, var(--icon-dunkel-flaeche), var(--icon-dunkel-flaeche2));
  color:var(--icon-dunkel-glyphe);
}
html[data-theme="dark"] .wt-app-icon[style*="--icon-dunkel-flaeche"] .akzent { fill:var(--icon-dunkel-akzent); stroke:var(--icon-dunkel-akzent); }
html[data-theme="dark"] .wt-app-icon[style*="--icon-dunkel-flaeche"] .duo { fill:currentColor; fill-opacity:.16; }
.wt-app-icon-small { width:38px; height:38px; }
.wt-app-icon-small {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .26),
    inset 0 -1px 1px rgb(0 0 0 / .10),
    inset 0 0 0 1px rgb(255 255 255 / .06),
    0 1px 1px rgb(0 0 0 / .12),
    0 2px 6px -2px rgb(0 0 0 / .16);
}
/* Auf dunklem Grund traegt ein Schatten nichts; eine feine helle Kante
   grenzt die Kachel ab -- seit App Store 3.0 nur im Dunkelmodus, der
   Hero ist im hellen Modus hell. */
html[data-theme="dark"] .wt-app-icon {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .16),
    inset 0 0 0 1px rgb(255 255 255 / .10);
}
/* ---------- Store unterhalb des Heros ---------- */
.wt-store-main { padding-bottom:75px; }
.wt-section { padding:clamp(42px,5vw,60px) 0 0; }
.wt-section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:20px; }
.wt-section-heading h2 { margin:0; color:var(--ink); font-size:clamp(1.6rem,2.2vw,2.15rem); line-height:1.15; letter-spacing:-.035em; }
/* "Weitermachen" traegt seit dem 2026-09-21 dieselbe Bauform wie jede
   andere Reihe -- vorher waren es Chips mit eigenem Rahmen, eigener
   Groesse und eigener Kachel. Ausgerechnet die Flaeche, auf der jemand
   SEIN Werkzeug wiedererkennen soll, sah anders aus als der Laden. */
/* ZWEI ABSCHNITTE, ZWEI FRAGEN -- ALSO ZWEI FORMEN.
   "Weitermachen" beantwortet "woran war ich", "Häufig verwendet"
   beantwortet "womit fangen die meisten an". Dieselbe Karte mit anderer
   Ueberschrift laesst das eine wie das andere aussehen. Der Verlauf ist
   deshalb eine schmale persoenliche Zeile, die Empfehlung eine groessere
   Entdeckungskarte. */
/* `.wt-reihe.` davor ist kein Zierrat: `.wt-reihe { --kachel:9rem }`
   steht WEITER UNTEN und gewann bei gleicher Spezifitaet -- gemessen am
   2026-10-02 (live): "Weitermachen" war 144 px hoch statt 64. */
.wt-reihe.wt-reihe-verlauf { --kachel:4rem; padding-top:22px; }
.wt-reihe-verlauf[hidden] { display:none; }
.wt-reihe-verlauf .wt-reihe-spur { grid-template-columns:repeat(auto-fill,minmax(min(100%,15.625rem),1fr)); }
.wt-reihe-verlauf .wt-catalog-link {
  flex-direction:row; align-items:center; gap:11px;
  min-height:4rem; padding:9px 12px; border-radius:12px;
}
.wt-reihe-verlauf .wt-app-icon-small { width:36px; height:36px; }
.wt-reihe-verlauf .wt-catalog-name strong { -webkit-line-clamp:1; font-size:.84rem; }
.wt-reihe-verlauf .wt-catalog-name small { -webkit-line-clamp:1; }
.wt-reihe-aktion { flex:none; min-height:36px; border:0; padding:0 2px; background:none; color:var(--store-muted); font:inherit; font-size:.78rem; cursor:pointer; white-space:nowrap; }
.wt-reihe-aktion:hover { color:var(--store-teal); text-decoration:underline; text-underline-offset:4px; }
/* DIE NADEL (Bibliothek, 2026-10-01): neben dem Link, nicht in ihm --
   ein Knopf in einem Link ist ungueltiges HTML, und Tastatur wie
   Screenreader brauchen zwei Ziele. Rechts in der Kachel; 34 px fuer
   feine Zeiger, 44 px fuer Finger. Gefuellt heisst angeheftet. */
.mit-nadel { position:relative; }
.mit-nadel .wt-catalog-link { padding-right:46px; }
.wt-nadel {
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  display:grid; place-items:center;
  width:34px; height:34px; padding:0; border:0; border-radius:9px;
  background:none; color:var(--store-muted); cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-standard),
             background-color var(--motion-fast) var(--ease-standard);
}
.wt-nadel svg,.wt-preview-nadel svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.wt-nadel[data-an="1"],.wt-preview-nadel[data-an="1"] { color:var(--store-teal); }
.wt-nadel[data-an="1"] .wt-nadel-kopf,.wt-preview-nadel[data-an="1"] .wt-nadel-kopf { fill:currentColor; }
.wt-nadel:hover { background:color-mix(in srgb,var(--store-teal) 11%,transparent); color:var(--store-teal); }
/* Die Kachel hebt sich auch, wenn der Zeiger auf ihrer Nadel steht --
   sonst sackte sie genau in dem Moment ab, in dem man anheften will. */
@media (hover:hover) {
  .mit-nadel:hover > .wt-catalog-link {
    transform:translateY(calc(-1 * var(--motion-distance-sm)));
    box-shadow:0 10px 18px -12px rgba(18,54,64,.45);
  }
  .mit-nadel:hover > .wt-nadel { transform:translateY(calc(-50% - var(--motion-distance-sm))); }
}
@media (pointer:coarse) {
  .wt-nadel { width:44px; height:44px; right:2px; }
  .mit-nadel .wt-catalog-link { padding-right:52px; }
}
html[data-theme="dark"] .wt-nadel[data-an="1"],html[data-theme="dark"] .wt-preview-nadel[data-an="1"] { color:#7fd6cc; }
.wt-catalog { margin-top:clamp(36px,5vw,60px); border-top:1px solid var(--store-line); }
.wt-sammlungen { padding-top:clamp(34px,4vw,46px); }
.wt-catalog-lead { max-width:420px; margin:0; color:var(--store-muted); font-size:.86rem; line-height:1.45; text-align:right; }

/* ---------- Store-Reihen ----------
   SENKRECHT, NICHT WAAGERECHT.

   Drei Zustaende hatte diese Flaeche schon: acht Tabs mit genau einer
   aufgedeckten Kategorie, dann acht waagerechte Bahnen mit Pfeilen,
   jetzt acht Raster. Die Bahnen waren gegenueber den Tabs ein
   Fortschritt und gegenueber dem Raster ein Umweg: waagerechtes
   Scrollen wird auf dem Desktop schlechter entdeckt als senkrechtes,
   und ein vom Telefon uebernommenes Wischmuster kann dort das
   Gegenteil bewirken (NN/g). Sechs von sechsunddreissig sichtbaren
   Kacheln waren eine Schublade mit anderem Namen.

   Das Raster ist auf zwei Zeilen angeschnitten -- also rund zwoelf
   statt sechs Kacheln ohne jede Bedienung -- und "Alle ansehen" oeffnet
   den Rest. Ein Markup, zwei Darstellungen, kein Werkzeug zweimal im
   Dokument.

   Die Zeilenhoehe steht fest, damit der Schnitt auf einer Zeilenkante
   landet und nicht mitten in einer Kachel. */
/* Kachelmasse in rem (2026-09-28): Hoehe, Spaltenbreite und Anschnitt
   wachsen mit der Schriftgroesse. In px blieb die Kachel bei 200 % Text
   gleich gross, und die Zeilenkappung schnitt Namen und Nutzenzeile ab
   (WCAG 1.4.4). Bei 16 px Grundschrift ist jeder Wert pixelgleich zu vorher. */
.wt-reihe { --kachel:9rem; --luecke:10px; --zeilen:2; margin-top:clamp(26px,3.2vw,38px); }
.wt-reihe:first-of-type { margin-top:4px; }
.wt-reihe-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:10px; }
.wt-reihe-titel { min-width:0; }
/* Nur Sammlungen tragen diesen Satz: "PDF & Dateien" erklaert sich
   selbst, "Bevor die Datei rausgeht" nicht. */
.wt-reihe-satz { margin:2px 0 0; color:var(--store-muted); font-size:.82rem; line-height:1.4; }
.wt-reihe-kopf :where(h2,h3) { margin:0; color:var(--ink); font-size:clamp(1.02rem,1.5vw,1.22rem); font-weight:750; letter-spacing:-.015em; }
/* Der Bereich bekommt beim Sprung den Fokus, damit der naechste
   Tabulatorschritt dort weitergeht, wo der Mensch hinsieht. Ein
   Fokusring um einen ganzen Abschnitt waere aber nur Laerm: der
   sichtbare Hinweis ist, dass der Bereich jetzt offen dasteht. */
.wt-reihe:focus { outline:none; }
/* WCAG 2.2 SC 2.5.8 nennt 24x24 CSS px als Untergrenze. Wo grob
   gezeigt wird, gilt im Haus 44 -- und "Alle ansehen" lag bei 36. */
@media (pointer: coarse) {
  .wt-reihe-alle,.wt-reihe-aktion { min-height:44px; }
}
/* Oben 6 px statt 2: die Kachel hebt sich beim Ueberfahren um
   --motion-distance-sm (4 px), und `overflow:hidden` darunter wuerde
   die oberste Zeile sonst anschneiden. Der Schnitt rechnet die 4 px mit. */
.wt-reihe-spur {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));
  grid-auto-rows:var(--kachel); gap:var(--luecke);
  margin:0; padding:6px 2px 2px; list-style:none;
}
/* Die Clusterueberschrift steht als `li` mitten in derselben Liste --
   im Anschnitt hat sie nichts zu suchen, aufgeklappt traegt sie die
   Gliederung. */
/* Die persoenlichen Reihen schneiden nichts ab: wer zwoelf Werkzeuge
   anheftet, will zwoelf sehen -- nicht acht und einen Rand. */
.wt-reihe.wt-reihe-verlauf .wt-reihe-spur { max-height:none; overflow:visible; }
.wt-reihe-spur > .wt-cluster-head { grid-column:1/-1; }
.wt-cluster-head h4 { display:flex; align-items:baseline; gap:8px; margin:20px 0 2px; color:var(--store-teal); font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.wt-cluster-head h4 small { color:var(--store-muted); font-weight:600; letter-spacing:0; }

/* ---------- Anlässe: erst das Ziel, dann die Werkzeuge ----------
   Vier volle Reihen waren vier Bildschirme, bevor der Katalog anfing.
   Jetzt stehen vier Karten da; wer den Anlass hat, klappt ihn auf.

   KARTE BLEIBT STEHEN, TAFEL KOMMT DARUNTER (seit 2026-10-17). Bis dahin
   ein `<details>` je Anlass: geoeffnet sprang die Karte ueber die volle
   Breite in eine eigene Zeile, die Karten danach rutschten weg, und die
   Werkzeuge standen in sieben Spalten zu 152 px -- abzueglich Icon,
   Abstand und Detailknopf blieben dem Namen 32 px, und `hyphens:auto`
   zerlegte "Rechnungen" in "Rech-nunge-n". Jetzt sind Karte (Knopf) und
   Tafel Geschwister im Raster; `dense` stellt die volle Tafel unter die
   Zeile ihrer Karte und fuellt die Luecke davor mit den folgenden Karten.
   Desktop vier Karten je Zeile, Tablet zwei, Telefon eine -- die Tafel
   immer direkt darunter. */
/* Die Zahl der Karten je Reihe richtet sich nach der Breite des ABSCHNITTS,
   nicht des Fensters: vier ab 50rem, zwei ab 30rem, sonst eine. Bei 1024 px
   ist der Abschnitt 860 px breit -- eine Mindestbreite haette dort drei
   Karten und eine verwaiste vierte ergeben, bei 1920 px fuenf Spalten fuer
   vier Karten. In rem gerechnet, wandern die Schwellen mit 200 % Text mit.
   Ohne Container Queries bleibt die alte Mindestbreite. */
.wt-sammlungen { container-type:inline-size; }
.wt-anlass-raster {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  grid-auto-flow:row dense; gap:10px;
}
@container (max-width:29.99rem) { .wt-anlass-raster { grid-template-columns:minmax(0,1fr); } }
@container (min-width:30rem) and (max-width:49.99rem) { .wt-anlass-raster { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (min-width:50rem) { .wt-anlass-raster { grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Die Huelle traegt Anker und Zugehoerigkeit, aber keinen Kasten. */
.wt-anlass { display:contents; }
.wt-anlass-knopf {
  display:flex; align-items:center; gap:12px; width:100%; min-height:64px; margin:0;
  padding:12px 16px; border:1px solid var(--st-karte-rand); border-radius:14px;
  background:var(--st-karte); color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease;
}
.wt-anlass-knopf:hover { background:var(--st-chip-hover); }
.wt-anlass-knopf:focus-visible { outline:3px solid var(--st-fokus); outline-offset:2px; }
/* Die gewaehlte Karte: hinterlegte Flaeche und Rahmen in der Akzentfarbe --
   dieselbe Sprache wie der gewaehlte Schritt im Schaufenster. */
.wt-anlass-knopf[aria-expanded="true"] { background:var(--st-akzent-flaeche); border-color:var(--st-akzent-rand); }
.wt-anlass-kopf { display:grid; gap:2px; min-width:0; margin-right:auto; }
.wt-anlass-kopf strong { font-size:.92rem; }
.wt-anlass-satz { color:var(--store-muted); font-size:.78rem; line-height:1.35; }
.wt-anlass-zahl { color:var(--store-teal); font-size:.74rem; font-weight:700; }
/* Der Satz wechselt mit dem Zustand: "Alle 8 ansehen" ueber acht schon
   sichtbaren Kacheln waere eine Aufforderung zu etwas, das bereits
   passiert ist. Zugeklappt eine Aufforderung, offen eine Angabe. */
.wt-anlass-offen,.wt-anlass-knopf[aria-expanded="true"] .wt-anlass-zu { display:none; }
.wt-anlass-knopf[aria-expanded="true"] .wt-anlass-offen { display:block; color:var(--store-muted); font-weight:600; }
.wt-anlass-pfeil {
  flex:none; color:var(--store-muted); font-size:1.4rem; line-height:1;
  transition:transform .26s cubic-bezier(.2,.7,.2,1);
}
.wt-anlass-knopf[aria-expanded="true"] .wt-anlass-pfeil { transform:rotate(90deg); color:var(--st-akzent); }
/* Die Tafel: volle Breite, unter der Zeile ihrer Karte. Die Kerbe zeigt
   auf die Mitte der gewaehlten Karte (--zeiger-x setzt webtools-page.js);
   so ist sichtbar, wozu die Tafel gehoert, ohne dass etwas wandert. */
.wt-anlass-tafel {
  grid-column:1/-1; position:relative; margin-top:2px;
  border:1px solid var(--st-akzent-rand); border-radius:14px; background:var(--st-karte);
}
.wt-anlass-tafel::before {
  content:""; position:absolute; top:-7px; left:var(--zeiger-x,40px); width:12px; height:12px;
  background:var(--st-karte); border-left:1px solid var(--st-akzent-rand); border-top:1px solid var(--st-akzent-rand);
  transform:translateX(-50%) rotate(45deg);
}
/* Werkzeuge waagerecht wie ueberall im Laden, mindestens 15rem breit:
   Desktop drei bis vier je Zeile, Tablet zwei, Telefon eine. */
.wt-anlass-liste {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
  gap:10px; margin:0; padding:14px; list-style:none;
}
/* Waehrend der Bewegung schneidet die Liste ab, was noch nicht ausgeklappt ist. */
.wt-anlass-liste[data-wt-bewegung] { overflow:hidden; }
/* Trennen darf der Browser -- aber nicht in Kurzstuecke: frueher stand hier
   "Rechnunge-n", und selbst bei 263 px trennte Chrome "Kleinschrei-bung",
   um eine Zeile zu fuellen. Fuenf Zeichen auf jeder Seite der Trennung. Wo `hyphenate-limit-chars` fehlt, sichert der Spec
   (webtools-anlaesse) dasselbe ueber die Kartenbreite. */
.wt-page .wt-anlass-tafel .wt-catalog-name strong {
  -webkit-line-clamp:3; hyphenate-limit-chars:10 5 5;
  /* WebKit (Safari, jedes iPhone) kennt nur die eigenen Grenzen -- ohne sie
     trennte es "Rech-ner" und "Ge-nerator", gemessen 2026-10-17. */
  -webkit-hyphenate-limit-before:5; -webkit-hyphenate-limit-after:5;
}
/* Telefon: eine kompakte Liste statt hochkanter Kacheln -- Icon links,
   Name, eine Zeile Nutzen. Acht Werkzeuge brauchen so keinen ganzen
   Bildschirm mehr. Die Selektoren tragen eine Klasse mehr als die
   Telefonregeln der Kachel weiter unten und gelten deshalb nur hier. */
@media (max-width:47.99em) {
  .wt-anlass-liste { gap:8px; padding:10px; }
  .wt-page .wt-anlass-tafel .wt-catalog-link {
    grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto;
    row-gap:2px; column-gap:12px; min-height:0; padding:12px 44px 12px 12px;
  }
  .wt-page .wt-anlass-tafel .wt-catalog-link > .wt-app-icon { grid-row:1 / 4; width:40px; height:40px; margin:0; }
  .wt-page .wt-anlass-tafel .wt-catalog-link .wt-catalog-name strong { grid-column:2; grid-row:1; -webkit-line-clamp:2; }
  .wt-page .wt-anlass-tafel .wt-catalog-link .wt-catalog-name small { grid-column:2; grid-row:2; -webkit-line-clamp:1; }
  .wt-page .wt-anlass-tafel .wt-catalog-link .wt-kachel-marken { grid-column:2; grid-row:3; margin-top:2px; }
}
@media(prefers-reduced-motion:reduce) { .wt-anlass-pfeil,.wt-anlass-knopf { transition:none; } }
/* ---------- Die Kachel ----------
   Das Icon traegt die Erkennung, der Name steht darunter, die
   Nutzenzeile darunter. EINE Kartenform im ganzen Laden -- vorher
   standen oben breite Anwendungskarten und unten hochkante Kacheln,
   und damit stand die Trennung "grosse Anwendung gegen kleine
   Aufgabe" wieder im Bild, aus der sie bei den Icons gerade
   verschwunden war.
   Kein Chevron: eine Kachel IST der Knopf, der Pfeil daneben
   wiederholt nur, was die Form schon sagt. */
.wt-catalog-item { min-width:0; }
.wt-catalog-link { display:flex; flex-direction:column; align-items:flex-start; gap:9px; height:100%; min-height:var(--kachel,9rem); padding:14px 12px 12px; border:1px solid var(--st-karte-rand); border-radius:14px; background:var(--st-karte); color:var(--st-text); }
/* Schnellstart-Rueckmeldung: die Kachel hebt sich, und ihr Rand nimmt
   die Farbe des Bereichs an. Nur transform -- keine Layout-Eigenschaft --,
   und bei reduzierter Bewegung ist --motion-distance-sm ohnehin 0. */
.wt-catalog-link {
  position:relative;
  transition:transform var(--motion-fast) var(--ease-standard),
             box-shadow var(--motion-fast) var(--ease-standard),
             border-color var(--motion-fast) var(--ease-standard),
             background-color var(--motion-fast) var(--ease-standard);
}
.wt-catalog-link:hover {
  border-color:var(--st-akzent);
  background:color-mix(in srgb,var(--paper) 90%,var(--st-akzent-flaeche));
}
/* Das Anheben nur fuer echte Zeiger: auf Touch "klebt" ein Hover nach
   dem Tippen, und die Kachel bliebe schief stehen. */
@media (hover:hover) {
  .wt-catalog-link:hover {
    transform:translateY(calc(-1 * var(--motion-distance-sm)));
    box-shadow:0 10px 18px -12px rgba(18,54,64,.45);
  }
}
/* Merkmale oben rechts, wo neben dem Icon ohnehin Platz ist -- die
   Kachel wird dadurch keinen Pixel hoeher. Zwei Arten, zwei Formen:
   "Ohne Upload" ist eine Zusage (gruen, rund), das Land eine Angabe
   zur Rechtsordnung (neutral, eckig). Ein Land ist kein Guetesiegel. */
.wt-kachel-marken {
  position:absolute; top:12px; right:10px;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.wt-kachel-plakette {
  padding:2px 8px; border-radius:8px;
  background:transparent; color:var(--st-gut);
  font-size:.66rem; font-weight:750; line-height:1.5; white-space:nowrap;
}
.wt-kachel-land {
  padding:1px 6px; border-radius:5px;
  background:#eef1f4; color:#3b4852;
  font-size:.62rem; font-weight:750; letter-spacing:.03em; word-spacing:-.12em;
  line-height:1.5; white-space:nowrap;
}
/* Der Bereich traegt seine Farbe als schmalen Balken vor dem Titel --
   der Laden bleibt neutral, die Ware und ihre Regale sind bunt. */
.wt-reihe-bereich .wt-reihe-titel > :is(h2,h3)::before {
  content:""; display:inline-block; width:5px; height:.95em; margin-right:10px;
  border-radius:3px; background:var(--st-akzent); vertical-align:-.08em;
}
/* Das Icon wird zum Traeger, nicht zum Beiwerk.
   48 px im Katalog, 44 px auf schmalen Breiten -- klein genug fuer ein
   dichtes Raster, gross genug, um die Zeichnung darin zu lesen.
   `.wt-glyph` steht hier nicht mehr: seit dem 2026-09-21 bekommt JEDER
   sichtbare Eintrag dieselbe Kachel, nicht nur die Anwendungen. */
.wt-catalog-link .wt-app-icon-small { width:48px; height:48px; }
.wt-catalog-name { min-width:0; display:grid; gap:2px; }
/* Zwei Zeilen statt Ellipse: "Fahrten & Dienstreisen" abzuschneiden
   spart nichts, wenn darunter ohnehin Platz ist. */
.wt-catalog-name strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.82rem; font-weight:650; line-height:1.25; }
/* ZWEI ZEILEN, UND ZWAR GEKLAMMERT.
   Die Kachelhoehe steht fest, damit der Anschnitt auf einer Zeilenkante
   landet. Eine ungeklammerte Nutzenzeile bricht dann einfach aus dem
   Kasten: live gemessen am 2026-09-22 bei "XRechnung- & ZUGFeRD-Viewer"
   ("E-Rechnungen oeffnen und prue…") und drei Generatoren. Zweizeiliger
   Name plus dreizeilige Nutzenzeile brauchen 140 px -- deshalb 144 als
   Zeilenhoehe und `line-clamp` als harte Grenze. */
.wt-catalog-name small {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--store-muted); font-size:.7rem; line-height:1.3;
}
/* SILBEN STATT BUCHSTABEN (2026-10-15).
   `body` vererbt `overflow-wrap:anywhere`, und das bricht ein zu langes
   Wort an jeder beliebigen Stelle -- live stand "Tilgungsplan-/Darlehe"
   ueber "nsrechner". Mit `hyphens:auto` und `lang="de"` trennt der
   Browser nach Silben und setzt den Strich; `break-word` bleibt nur der
   Notausgang fuer ein Wort, das gar keine Trennstelle hat. */
.wt-catalog-name :is(strong,small) {
  overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto;
  hyphenate-limit-chars:10 4 4;
}
/* Letzter Wortteil und Pruefhaken bleiben beisammen (webtools_views.
   name_mit_haken): der Haken stand sonst allein in der zweiten Zeile. */
.wt-name-ende { white-space:nowrap; }
/* ---------- Breiten ----------
   DREI ZUSTAENDE, NICHT ZEHN BREAKPOINTS.

   Compact bis 600, Medium bis 1024, Expanded darueber. Sie sind
   Entwurfsgrenzen, keine Geraeteklassen -- was wirklich vom Zeiger
   abhaengt, fragt `(hover)` und `(pointer)` und nicht die Breite. */
@media(max-width:960px) {
  .wt-section-heading { flex-direction:column; align-items:start; gap:8px; }
  .wt-catalog-lead { text-align:left; }
}
/* ---------- Compact: eine Spalte, Listenzeilen, Daumenbedienung ----------
   Das Kachelraster wird hier zur einspaltigen Liste. Zweieinhalb
   Kacheln nebeneinander waren auf 390 px zwei abgeschnittene Namen
   und ein Icon in Briefmarkengroesse; eine Zeile traegt den ganzen
   Namen, die Nutzenzeile darunter und 64 px Trefferflaeche.

   Fuenf Zeilen statt zwei sind sichtbar: eine Zeile ist flach, und
   zwei davon waeren kein Bereich, sondern ein Anriss. */
@media(max-width:600px) {
  .wt-page .wt-hero { padding:24px 0 20px; }
  .wt-hero-grid > h1 { font-size:clamp(1.9rem,6.4vw,2.6rem); }
  .wt-intro-lead { display:none; }
  .wt-search-panel { margin-top:16px; }
  .wt-search-box { min-height:58px; border-radius:13px; }
  .wt-search-box input { font-size:1rem; }
  /* Auf 390 px bliebe fuer den Namen nichts, wenn der Bereich rechts
     seine Breite behaelt. Er ordnet ein und ist nicht die Antwort. */
  .wt-result-ort { display:none; }
  .wt-search-results a { min-height:62px; }
  /* ---------- Der fokussierte Suchzustand auf dem Telefon
     DERSELBE OWNER, EINE ANDERE DARSTELLUNG. Kein zweites Feld, kein
     zweiter Index, keine zweite Rangfolge -- dasselbe `<input>` und
     dieselbe Listbox, nur oben festgesetzt.
     Der Grund ist die Bildschirmtastatur: steht das Feld in der
     Seitenmitte, klappt sie darueber und verdeckt genau die Treffer,
     die gerade entstehen. Oben festgesetzt bleibt darunter der ganze
     verbleibende Platz. `dvh` statt `vh`, weil die Tastatur den
     sichtbaren Bereich verkleinert und `vh` das nicht mitbekommt. */
  /* 310 und nicht 70: der Seitenkopf steht auf 300 und legte sich
     ueber die fixierte Suche. Gemessen am 2026-09-22 -- der Klick auf
     das Schliesskreuz landete auf dem Menuknopf darunter, und damit
     war der Suchzustand auf dem Telefon nicht mehr zu verlassen.
     Unter dem Cookiebanner (350) bleibt sie: eine Einwilligung
     gehoert nach vorn. */
  body.wt-suche-mobil .wt-search-panel {
    position:fixed; inset:0; z-index:310; width:auto; margin:0;
    padding:10px 14px calc(14px + env(safe-area-inset-bottom));
    background:var(--paper); overflow-y:auto;
  }
  body.wt-suche-mobil .wt-search-results { max-height:none; box-shadow:none; border:0; padding:6px 0; }
  body.wt-suche-mobil .wt-search-box { box-shadow:none; }
  /* font-size 0 wie auf jeder Breite: "Suche schließen" ist der Name fuer
     Screenreader, sichtbar ist nur das Kreuz. Hier stand 1rem -- und auf
     dem Telefon brach der Name in einem 40-px-Knopf ueber vier Zeilen
     ("Such e schli eßen"), gemessen live am 2026-10-02. */
  body.wt-suche-mobil .wt-search-zu {
    display:grid; place-items:center; width:40px; height:40px; flex:none;
    margin-right:-6px; border:0; border-radius:50%; padding:0;
    background:none; color:var(--st-text-2); font:inherit; font-size:0; cursor:pointer;
  }
  .wt-search-zu:hover { background:var(--st-chip-hover); }
  /* DIE EINE WAAGERECHTE FLAECHE, DIE BLEIBT.
     Auf Touch ist Wischen vertraut, und eine Chipzeile ist genau der
     Fall, fuer den es taugt: kurze, gleichartige Elemente, deren
     naechstes angeschnitten im Bild steht. Acht Chips untereinander
     wuerden den ersten Bildschirm auffressen. */
  .wt-quick-links {
    flex-wrap:nowrap; justify-content:flex-start; gap:8px; margin-top:16px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scrollbar-width:none;
    padding-bottom:2px;
  }
  .wt-quick-links::-webkit-scrollbar { display:none; }
  .wt-quick-links a { flex:none; scroll-snap-align:start; }
  .wt-reihe { --kachel:4rem; --luecke:8px; --zeilen:5; }
  .wt-reihe-spur,.wt-anlass-liste { grid-template-columns:1fr; }
  /* Die Kachel wird zur Zeile: Gesicht links, Name und Nutzen rechts. */
  .wt-catalog-link {
    flex-direction:row; align-items:center; gap:12px;
    min-height:4rem; padding:10px 12px; border-radius:12px;
  }
  .wt-catalog-link .wt-app-icon-small { width:40px; height:40px; }
  /* DIE PLAKETTE TEILT SICH NUR DIE NAMENSZEILE.
     Im Fluss rechts neben Name UND Nutzen kostete sie der Nutzenzeile
     ~80 px: aus "Zwei Fassungen gegenüberstellen" wurde "Zwei
     Fassungen…" -- und genau nach dieser Zeile waehlt man. Deshalb ein
     Raster: Icon ueber zwei Zeilen, Name und Plakette oben, der Nutzen
     unten ueber die volle Breite. `display:contents` hebt Name und
     Nutzen aus ihrer Huelle in dieses Raster. */
  .wt-catalog-link {
    display:grid; grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:12px; row-gap:1px; align-items:center;
  }
  .wt-catalog-link > .wt-app-icon { grid-row:1 / 3; }
  .wt-catalog-link .wt-catalog-name { display:contents; }
  .wt-catalog-link .wt-catalog-name strong { grid-column:2; grid-row:1; align-self:end; }
  .wt-catalog-link .wt-catalog-name small { grid-column:2 / 4; grid-row:2; align-self:start; }
  .wt-catalog-link .wt-catalog-name strong:only-child { grid-row:1 / 3; align-self:center; }
  .wt-kachel-marken { position:static; grid-column:3; grid-row:1; align-self:end; flex-direction:row; align-items:center; }
  .wt-kachel-plakette { padding:1px 7px; font-size:.62rem; }
  /* In einer 64-px-Zeile ist fuer je eine Zeile Platz. Zwei Zeilen
     Nutzentext brauchen mit dem Namen 65 px und wuerden unten
     abgeschnitten -- derselbe Fehler wie im Raster, nur schmaler. */
  .wt-catalog-name strong { -webkit-line-clamp:1; font-size:.86rem; }
  .wt-catalog-name small { -webkit-line-clamp:1; font-size:.74rem; }
  .wt-cluster-head h4 { margin:14px 0 2px; }
}
/* ---------- Schluss: der Weg weiter und das Produkt dahinter ----------
   Beide stehen NACH dem Vollbestand. Ein Werkzeugladen darf sagen, wem
   er gehoert -- er darf den Weg zum Werkzeug nicht damit zustellen. */
.wt-schluss { display:grid; gap:14px; }
.wt-hinweis {
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:18px 20px; border:1px dashed var(--st-akzent-rand); border-radius:14px;
  background:color-mix(in srgb,var(--paper) 88%,var(--st-akzent-flaeche));
}
.wt-hinweis-text { min-width:0; margin-right:auto; }
.wt-hinweis-text h2 { margin:0; font-size:1.02rem; font-weight:750; letter-spacing:-.01em; }
.wt-hinweis-text p { max-width:62ch; margin:4px 0 0; color:var(--store-muted); font-size:.86rem; line-height:1.45; }
.wt-hinweis-cta {
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  border:1px solid var(--st-akzent-rand); border-radius:8px;
  color:var(--st-akzent); font-size:.86rem; font-weight:700; white-space:nowrap;
}
.wt-hinweis-cta:hover { background:#fff; }
/* Dunkel: die Flaeche folgt --paper, der Link stand fest auf var(--st-akzent) -- dunkles
   Petrol auf dunklem Grund (2026-09-28). */
html[data-theme="dark"] .wt-hinweis { border-color:var(--st-akzent-rand); }
html[data-theme="dark"] .wt-hinweis-cta { border-color:var(--st-akzent-rand); color:var(--st-akzent); }
html[data-theme="dark"] .wt-hinweis-cta:hover { background:var(--wash); }
/* Hell ein getoentes Blatt, dunkel die Nachtflaeche -- frueher stand hier
   in beiden Themes Navy, im hellen Modus ein zweiter dunkler Block. */
.wt-produkt {
  padding:clamp(24px,3vw,38px) clamp(20px,3vw,40px);
  border:1px solid var(--st-karte-rand); border-radius:18px;
  background:linear-gradient(135deg, #eef5f8, #e7eff5); color:var(--st-text);
}
.wt-produkt-auge { margin:0; color:var(--st-akzent); font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.wt-produkt h2 { max-width:24ch; margin:8px 0 0; color:var(--st-text); font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.18; letter-spacing:-.025em; }
.wt-produkt-satz { max-width:66ch; margin:12px 0 0; color:var(--st-text); font-size:.95rem; line-height:1.55; }
.wt-produkt-klein { max-width:66ch; margin:10px 0 0; color:var(--st-text-2); font-size:.8rem; line-height:1.5; }
.wt-produkt-knoepfe { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:20px 0 0; }
.wt-produkt-haupt {
  display:inline-flex; align-items:center; min-height:46px; padding:0 22px;
  border-radius:.7rem; background:var(--st-wahl); color:var(--st-wahl-text); font-size:.9rem; font-weight:750;
}
.wt-produkt-haupt:hover { background:var(--st-wahl-hover); color:var(--st-wahl-text); }
.wt-produkt-neben {
  display:inline-flex; align-items:center; min-height:46px;
  color:var(--st-akzent); font-size:.88rem; font-weight:650;
  text-decoration:underline; text-underline-offset:5px;
}
.wt-produkt-neben:hover { color:var(--st-text); }
html[data-theme="dark"] .wt-produkt { background:linear-gradient(135deg, #15303d, #183b4d); border-color:#2a4a5a; }
/* ZWEI SPALTEN, KEINE LEERE HAELFTE (2026-10-15).
   Ueberschrift (24ch) und Absatz (66ch) standen untereinander links;
   ab 1100 px blieben rechts rund 40 % dunkle Flaeche ohne Inhalt, und
   der Block las sich wie ein Platzhalter. Ein Bild darf hier nicht hin
   (Medienbudget /webtools: kein freies SVG oder Bild im Hauptinhalt) --
   also traegt die Typografie die Breite: Aussage links, Begruendung
   und Weg rechts. */
@media (min-width:56rem) {
  .wt-produkt {
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    column-gap:clamp(32px,5vw,72px); align-items:start;
  }
  .wt-produkt h2 { max-width:none; }
  .wt-produkt-text > :first-child { margin-top:24px; }
}
/* =====================================================================
   ZWEI FARBWELTEN (App Store 3.0, Betreiberauftrag 2026-10-15)

   "Ein Light-Mode-Schalter ist sinnlos, wenn der wichtigste Bereich
   weiterhin dunkel bleibt." Bis dahin stand der Hero in BEIDEN Themes auf
   #0f172a -- der Ambient-Glow vom 2026-10-01 war absichtlich themenfest
   ("sieht in beiden Themes gleich aus"). Im hellen Modus lag damit ein
   dunkler Block zwischen hellem Kopf und heller Leiste; im dunklen Modus
   stand er als zweites, anderes Dunkel neben den tuerkisen Karten.

   Jetzt traegt jede Flaeche des Ladens ein Token mit zwei Werten:
     hell    helle Flaechen, dunkle Schrift, weiche Akzente
     dunkel  durchgaengig dunkle Flaechen -- Hero, Leiste, Suche, Karten,
             Vorschau und Detailblatt, nicht nur der Hero
   Die Werte lehnen sich an die Schale an (--paper, --off, --line), damit
   Kopf, Leiste, Hero und Fuss EINE Leinwand sind und keine Baender.
   Kontraste gemessen: Text 2 auf Karte hell 5,6:1, dunkel 7,9:1;
   Fokusring hell 4,6:1, dunkel 9,1:1 (WCAG 1.4.3, 1.4.11).
   ===================================================================== */
.wt-page {
  --wt-navy:#1B4965;
  --wt-navy-mid:#266A8C;
  --wt-navy-soft:#A8D4E8;
  --wt-navy-dark:#16405A;
  --wt-bg:#fff;
  --wt-border:#e2e8f0;
  --wt-glass:rgb(255 255 255 / .85);
  --wt-pattern-ink:var(--wt-navy);
  --wt-pattern-opacity:.035;
  --st-grund:var(--wt-bg);
  --st-leiste:var(--wt-bg);
  --st-karte:#fff;
  --st-karte-rand:var(--wt-border);
  --st-karte-rand-hoch:#c3d3dc;
  --st-feld:#fff;
  --st-feld-rand:#c9d7df;
  --st-chip:#fff;
  --st-chip-rand:#d3dfe5;
  --st-chip-hover:#f0f5f8;
  --st-buehne:#edf2f6;
  --st-text:var(--ink,#0D1B24);
  --st-text-2:var(--muted,#59696F);
  --st-akzent:var(--wt-navy);
  --st-akzent-flaeche:#EBF2F6;
  --st-akzent-rand:#8ba7b8;
  --st-wahl:var(--wt-navy);
  --st-wahl-text:#fff;
  --st-wahl-hover:var(--wt-navy-dark);
  --st-fokus:var(--wt-navy);
  --st-gut:var(--wt-navy);
  --st-gut-rand:#8ba7b8;
  --st-schatten:0 4px 20px -2px rgb(15 23 42 / .05);
  --st-schatten-hoch:0 2px 6px rgb(13 27 36 / .05), 0 22px 40px -20px rgb(13 27 36 / .32);
  --st-hero-oben:#eef4f8;
  --st-insel:rgb(255 255 255 / .88);
  --st-insel-rand:rgb(13 27 36 / .10);
}
html[data-theme="dark"] .wt-page {
  --wt-bg:#090d16;
  --wt-border:#2a4453;
  --wt-glass:rgb(9 13 22 / .85);
  --wt-pattern-ink:var(--wt-navy-soft);
  --wt-pattern-opacity:.04;
  --st-karte:#192f3c;
  --st-karte-rand-hoch:#3d5d6e;
  --st-feld:#0f1f29;
  --st-feld-rand:#38545f;
  --st-chip:#192f3c;
  --st-chip-rand:#2e4a59;
  --st-chip-hover:#21394a;
  --st-buehne:#0f1f29;
  --st-akzent:var(--wt-navy-soft);
  --st-akzent-flaeche:#10293a;
  --st-akzent-rand:#789db2;
  --st-fokus:var(--wt-navy-soft);
  --st-gut:var(--wt-navy-soft);
  --st-gut-rand:#789db2;
  --st-schatten:0 1px 2px rgb(0 0 0 / .30);
  --st-schatten-hoch:0 2px 6px rgb(0 0 0 / .25), 0 22px 40px -20px rgb(0 0 0 / .70);
  --st-hero-oben:#0f202a;
  --st-insel:rgb(20 37 48 / .90);
  --st-insel-rand:rgb(255 255 255 / .10);
}

/* ---------- Hero als Teil der Leinwand ----------
   Der transparente Hero lässt das dezente Markenraster durch.
   overflow:hidden hält das Schaufenster innerhalb der Seite. */
html .wt-page .wt-hero.wt-hero-ambient {
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--st-karte-rand);
  background:transparent;
  color:var(--st-text);
}
.wt-hero-ambient > .container { position:relative; }
html .wt-hero-ambient .wt-hero-grid > h1 { color:var(--st-text); letter-spacing:-.045em; text-shadow:none; }
html .wt-hero-ambient .wt-intro-lead { color:var(--st-text-2); }
html body:not(.wt-suche-mobil) .wt-hero-ambient .wt-search-status { color:var(--st-text-2); }

/* ---------- Suche: das eine Bedienelement, in beiden Welten deutlich ---------- */
.wt-page .wt-search-box {
  background:var(--st-feld); border:1px solid var(--st-feld-rand);
  box-shadow:0 1px 2px rgb(13 27 36 / .04), 0 16px 34px -20px rgb(13 27 36 / .30);
}
html[data-theme="dark"] .wt-page .wt-search-box { box-shadow:0 16px 34px -18px rgb(0 0 0 / .75); }
.wt-page .wt-search-box:focus-within {
  border-color:var(--st-fokus);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--st-fokus) 20%, transparent), 0 16px 34px -20px rgb(13 27 36 / .30);
}
.wt-page .wt-search-box svg,.wt-page .wt-search-zu:not([hidden]) { color:var(--st-text-2); }
.wt-page .wt-search-box input { color:var(--st-text); }
.wt-page .wt-search-box input::placeholder { color:var(--st-text-2); }
.wt-page .wt-search-zu:focus-visible { outline-color:var(--st-fokus); }
.wt-page .wt-search-results { background:var(--st-karte); border-color:var(--st-karte-rand); box-shadow:var(--st-schatten-hoch); }
.wt-page .wt-search-results a,.wt-page .wt-result-frage { color:var(--st-text); }
.wt-page :is(.wt-search-results a,.wt-result-frage):hover { background:var(--st-chip-hover); }
.wt-page :is(.wt-search-results a,.wt-result-frage):is(.is-aktiv,:focus-visible) {
  background:var(--st-akzent-flaeche); box-shadow:inset 3px 0 0 var(--st-akzent);
}
.wt-page :is(.wt-result-copy small,.wt-result-ort,.wt-result-frage svg) { color:var(--st-text-2); }
.wt-page .wt-search-leer { border-color:var(--st-akzent-rand); background:var(--st-akzent-flaeche); }
.wt-page .wt-search-leer p { color:var(--st-text); }
.wt-page .wt-search-leer a { border-color:var(--st-akzent-rand); color:var(--st-akzent); }
.wt-page .wt-search-leer a:hover { background:var(--st-karte); }

/* Kategorie-Chips im Hero (unter 1200 px) */
html .wt-hero-ambient .wt-quick-links a {
  background:var(--st-chip); color:var(--st-text); border:1px solid var(--st-chip-rand);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:background-color var(--motion-fast,.14s) linear, border-color var(--motion-fast,.14s) linear;
}
html .wt-hero-ambient .wt-quick-links a:hover { background:var(--st-chip-hover); border-color:var(--st-karte-rand-hoch); color:var(--st-text); }
html .wt-hero-ambient .wt-quick-links a:focus-visible { outline-color:var(--st-fokus); }

/* =====================================================================
   STORE 2.0 (Betreiberauftrag 2026-10-15)
   Zwei Bedienwelten, ein Dokument:
     ab 75em (1200 px)   Seitenleiste + Ansichten + mehrspaltige Karten
     48-75em             Leiste wird zur Schiene (Symbol ueber Kurzname)
     unter 48em (768)    Insel am unteren Rand, zwei Spalten, Blatt-Details
   Was hier steht, ueberstimmt die aelteren Regeln oben bewusst durch
   seine Stellung am Ende -- keine Media-Query-Spezifitaet (Kaskadenfalle 1
   aus webtool-workspace-contract.md).
   ===================================================================== */
.wt-page { --leiste-b:15.5rem; --wt-karte-min:16.5rem; }

/* ---------- Ansichten: was nicht zur gewaehlten gehoert, tritt ab ---------- */
html[data-wt-ansicht="entdecken"] [data-wt-teil]:not([data-wt-teil~="entdecken"]),
html[data-wt-ansicht="alle"] [data-wt-teil]:not([data-wt-teil~="alle"]),
html[data-wt-ansicht="kategorie"] [data-wt-teil]:not([data-wt-teil~="kategorie"]),
html[data-wt-ansicht="merkliste"] [data-wt-teil]:not([data-wt-teil~="merkliste"]),
html[data-wt-ansicht="zuletzt"] [data-wt-teil]:not([data-wt-teil~="zuletzt"]),
html[data-wt-ansicht="beta"] [data-wt-teil]:not([data-wt-teil~="beta"]) { display:none !important; }
html[data-wt-ansicht="kategorie"] .wt-reihe-bereich:not([data-wt-aktiv]) { display:none !important; }
html[data-wt-ansicht="kategorie"] #alle-werkzeuge > .wt-section-heading { display:none; }
.wt-gefiltert { display:none !important; }
@media (scripting: none) { .wt-mit-js { display:none !important; } }

/* Ausserhalb der Startansicht wird der Hero zur Suchleiste: die H1 bleibt
   im Dokument (Gliederung, Vorlesesoftware), sichtbar traegt die Ansicht
   ihre eigene Ueberschrift. */
html[data-wt-ansicht]:not([data-wt-ansicht="entdecken"]) .wt-page .wt-hero { padding:14px 0 16px; }
html[data-wt-ansicht]:not([data-wt-ansicht="entdecken"]) .wt-hero-grid > h1 {
  position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
html[data-wt-ansicht]:not([data-wt-ansicht="entdecken"]) .wt-intro-lead { display:none; }
html[data-wt-ansicht]:not([data-wt-ansicht="entdecken"]) .wt-search-panel { margin-top:0; }
@media (min-width:64em) {
  html[data-wt-ansicht]:not([data-wt-ansicht="entdecken"]) .wt-page .wt-hero-grid {
    grid-template-columns:minmax(0,760px); grid-template-rows:none;
  }
  html[data-wt-ansicht]:not([data-wt-ansicht="entdecken"]) .wt-page .wt-hero-grid > * { grid-area:auto; }
}
/* Die Kategorie-Chips braucht, wer keine Seitenleiste hat. */
@media (min-width:75em) { .wt-page .wt-quick-links { display:none; } }
.wt-page .wt-quick-links a[aria-current="page"] { border-color:var(--st-akzent-rand); background:var(--st-akzent-flaeche); color:var(--st-text); }

/* ---------- Rahmen: Leiste neben dem Inhalt ---------- */
.wt-rahmen { display:block; }
.wt-leiste { box-sizing:border-box; }
.wt-leiste-liste { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.wt-l-ziel {
  position:relative; display:flex; align-items:center; gap:10px;
  min-height:40px; padding:0 10px; border-radius:10px;
  color:var(--ink-soft,#3C5262); font-size:.9rem; font-weight:600; line-height:1.2;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.wt-l-ziel:hover { background:var(--wash,#F2F6F8); color:var(--ink); text-decoration:none; }
.wt-l-ziel[aria-current="page"] { background:var(--st-akzent-flaeche); color:var(--st-akzent); }
.wt-l-ziel:focus-visible { outline:3px solid var(--st-fokus); outline-offset:2px; }
.wt-l-symbol { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.wt-l-kurz { display:none; }
.wt-l-zahl {
  margin-left:auto; min-width:22px; padding:1px 7px; border-radius:8px;
  background:var(--st-wahl); color:var(--st-wahl-text); font-size:.72rem; font-weight:750; line-height:1.5; text-align:center;
}
.wt-l-zahl[hidden] { display:none; }
.wt-l-punkt { width:10px; height:10px; flex:none; margin-inline:5px; border-radius:3px; background:var(--st-akzent); }
.wt-leiste-marke,.wt-leiste-titel {
  margin:0; padding:0 10px; color:var(--muted,#59696F);
  font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.wt-leiste-marke { margin-bottom:10px; }
.wt-leiste-titel { margin:20px 0 6px; }

@media (min-width:75em) {
  /* Neben der Leiste ist die Spalte schmaler: der Titel steht auf zwei
     Zeilen statt auf drei. */
  .wt-rahmen .wt-hero-grid > h1 { max-width:17ch; font-size:clamp(2rem,2.75vw,2.85rem); }
  .wt-rahmen { display:grid; grid-template-columns:var(--leiste-b) minmax(0,1fr); }
  .wt-rahmen > main { min-width:0; }
  .wt-leiste {
    position:sticky; top:var(--kn-kopf-h,64px); align-self:start;
    height:calc(100dvh - var(--kn-kopf-h,64px)); overflow-y:auto; overscroll-behavior:contain;
    padding:22px 12px 28px; border-right:1px solid var(--st-karte-rand); background:var(--st-leiste);
    scrollbar-width:thin;
  }
  .wt-nur-insel { display:none; }
  .wt-rahmen .container { max-width:min(1320px,100%); }
}
/* Schiene: Symbol ueber Kurzname, ohne Kategorien -- die stehen als Chips
   ueber dem Inhalt. Unter 1000 px liegt zusaetzlich das Dock der Website
   unten; die Schiene ist die Navigation DIESER Seite. */
@media (min-width:48em) and (max-width:74.99em) {
  .wt-rahmen { display:grid; grid-template-columns:5.25rem minmax(0,1fr); }
  .wt-rahmen > main { min-width:0; }
  .wt-leiste {
    position:sticky; top:var(--kn-kopf-h,56px); align-self:start;
    height:calc(100dvh - var(--kn-kopf-h,56px)); overflow-y:auto;
    padding:12px 6px; border-right:1px solid var(--st-karte-rand); background:var(--st-leiste);
  }
  .wt-leiste-marke,.wt-leiste-titel,.wt-leiste-kategorien,.wt-nur-insel { display:none; }
  .wt-l-ziel { flex-direction:column; justify-content:center; gap:5px; min-height:62px; padding:6px 2px; font-size:.7rem; text-align:center; }
  .wt-l-lang { display:none; }
  .wt-l-kurz { display:block; }
  .wt-l-zahl { position:absolute; top:4px; right:10px; margin:0; min-width:18px; padding:0 5px; font-size:.64rem; }
}
/* Insel: genau vier Ziele, wie das Dock der Website gebaut (gleiche Form,
   gleiche Hoehe, gleicher Abstand) -- auf dieser Seite tritt sie an dessen
   Stelle. Die Website-Navigation bleibt ueber Marke und Seitenfuss
   erreichbar. Bei Bildschirmtastatur und offener Suche tritt sie zurueck. */
@media (max-width:47.99em) {
  .wt-page .kn-dock { display:none !important; }
  .wt-leiste {
    position:fixed; z-index:290; left:50%;
    bottom:max(8px, env(safe-area-inset-bottom));
    width:min(calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)), 30rem);
    translate:-50% 0;
    transition:translate var(--motion-base,.24s) var(--ease-standard,ease), opacity var(--motion-fast,.16s) linear;
  }
  .wt-leiste-marke,.wt-leiste-titel,.wt-nur-leiste { display:none !important; }
  /* Vier Ziele des Ladens, dahinter abgesetzt das Menue der Website. */
  .wt-leiste-haupt {
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; padding:5px;
    background:var(--st-insel); border:1px solid var(--st-insel-rand);
    -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px);
    border-radius:22px; box-shadow:0 1px 2px rgba(13,27,36,.06), 0 14px 34px -8px rgba(13,27,36,.28);
  }
  .wt-l-ziel {
    flex-direction:column; justify-content:center; gap:3px;
    min-height:50px; padding:4px 2px; border-radius:14px;
    font-size:.75rem; white-space:nowrap; overflow-wrap:normal;
  }
  .wt-l-symbol { width:22px; height:22px; }
  .wt-l-lang { display:none; }
  .wt-l-kurz { display:block; }
  .wt-l-zahl { position:absolute; top:3px; left:calc(50% + 6px); margin:0; min-width:18px; padding:0 5px; font-size:.64rem; }
  html.kn-tastatur .wt-leiste,body.wt-suche-mobil .wt-leiste {
    translate:-50% calc(100% + 24px); opacity:0; pointer-events:none;
  }
}
@media (max-width:47.99em) and (prefers-reduced-motion:reduce) { .wt-leiste { transition:none; } }

/* ---------- Karten: Gesicht links, Name und Nutzen rechts, Merkmale darunter ----------
   Drei bis fuenf Spalten je nach Breite (Auftrag), eine Kartenform im
   ganzen Laden. Merkmale (Status, Land, Ohne Upload) stehen nicht mehr
   oben rechts ueber dem Namen, sondern als ruhige Zeile unter dem Nutzen. */
.wt-page .wt-reihe-spur {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--wt-karte-min)),1fr));
  grid-auto-rows:auto; gap:10px; padding:4px 2px 2px;
}
.wt-catalog-item { position:relative; }
.wt-page .wt-catalog-link {
  /* minmax(0,1fr), nicht 1fr: das Gesicht spannt ueber alle drei Zeilen,
     und mit dem automatischen Minimum von 1fr wuchs jede Karte um 42 px
     Leerraum (gemessen 2026-10-15: 130 statt 92 px). */
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr);
  column-gap:14px; row-gap:3px; align-items:start;
  height:100%; min-height:5.75rem; padding:14px 42px 14px 14px;
}
.wt-page .wt-catalog-link > .wt-app-icon { grid-row:1 / 4; }
.wt-page .wt-catalog-link .wt-catalog-name { display:contents; }
.wt-page .wt-catalog-link .wt-catalog-name strong { grid-column:2; grid-row:1; font-size:.9rem; font-weight:680; line-height:1.25; }
.wt-page .wt-catalog-link .wt-catalog-name small { grid-column:2; grid-row:2; font-size:.78rem; line-height:1.35; }
.wt-page .wt-catalog-link .wt-kachel-marken {
  position:static; grid-column:2; grid-row:3; align-self:end;
  flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:4px; margin-top:6px;
}
.wt-page .wt-catalog-link .wt-kachel-marken:empty { display:none; }
.wt-kachel-plakette { background:transparent; border:1px solid var(--st-gut-rand); color:var(--st-gut); padding:1px 7px; }
.wt-kachel-status {
  padding:1px 7px; border-radius:8px; border:1px solid var(--st-akzent-rand); background:var(--st-akzent-flaeche); color:var(--st-akzent);
  font-size:.66rem; font-weight:750; line-height:1.5; white-space:nowrap;
}
.wt-kachel-status[data-status="maintenance"] { border-color:#f2a7a7; background:#fff1f1; color:#8a1f1f; }
html[data-theme="dark"] .wt-kachel-status { background:var(--st-akzent-flaeche); border-color:var(--st-akzent-rand); color:var(--st-akzent); }
/* Der Detailknopf: ein Kreis mit "i", oben rechts in der Karte. Er ist
   ein Geschwister des Links -- die Karte bleibt EIN Ziel zum Oeffnen. */
.wt-details {
  position:absolute; top:8px; right:8px; z-index:1;
  display:grid; place-items:center; width:32px; height:32px; padding:0;
  border:1px solid transparent; border-radius:50%; background:transparent; color:var(--store-muted);
  cursor:pointer;
}
.wt-details[hidden] { display:none; }
/* `/ ""` gibt dem Zeichen einen leeren Alternativtext: der Name des
   Knopfs ist "Details zu …", nicht "i Details zu …". */
.wt-details::before {
  content:"i"; content:"i" / ""; display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  border:1.6px solid currentColor; font:italic 700 .78rem/1 Georgia,"Times New Roman",serif;
}
.wt-details:hover { background:var(--st-chip-hover); border-color:var(--st-karte-rand); color:var(--st-text); }
.wt-details:focus-visible { outline:3px solid var(--st-fokus); outline-offset:1px; }
.wt-reihe-verlauf .wt-details { display:none; }
/* Auf Touch zeigt schon der Tipp die Details -- ein zweites Ziel daneben
   waere eine Frage ohne Antwort. */
@media (pointer:coarse) { .wt-details { display:none; } .wt-page .wt-catalog-link { padding-right:14px; } }
.wt-cluster-head h4 { margin-top:24px; }
.wt-reihe-bereich .wt-reihe-titel > :is(h2,h3) { font-size:clamp(1.05rem,1.4vw,1.25rem); }
.wt-reihe-satz { max-width:68ch; }
.wt-reihe-bereich .wt-reihe-satz { display:none; }
html[data-wt-ansicht="kategorie"] .wt-reihe-bereich[data-wt-aktiv] { margin-top:8px; }
html[data-wt-ansicht="kategorie"] .wt-reihe-bereich[data-wt-aktiv] .wt-reihe-titel > h3 {
  font-size:clamp(1.6rem,2.2vw,2.15rem); line-height:1.15; letter-spacing:-.035em;
}
html[data-wt-ansicht="kategorie"] .wt-reihe-bereich[data-wt-aktiv] .wt-reihe-satz { display:block; margin-top:6px; font-size:.95rem; }

/* ---------- Filter ---------- */
.wt-filter {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0; padding:0 0 16px; border-bottom:1px solid var(--store-line);
}
.wt-filter[hidden] { display:none; }
.wt-filter-knopf {
  min-height:36px; padding:6px 12px; border:1px solid var(--store-line); border-radius:7px;
  background:var(--st-chip); color:var(--st-text); font:inherit; font-size:.84rem; font-weight:650; cursor:pointer;
  transition:background-color var(--motion-fast,.14s) linear, border-color var(--motion-fast,.14s) linear, color var(--motion-fast,.14s) linear;
}
.wt-filter-knopf:hover { border-color:var(--st-karte-rand-hoch); background:var(--st-chip-hover); }
.wt-filter-knopf[aria-pressed="true"] { background:var(--st-wahl); border-color:var(--st-wahl); color:var(--st-wahl-text); }
.wt-filter-knopf:focus-visible { outline:3px solid var(--st-fokus); outline-offset:2px; }
.wt-filter-zahl { margin:0 0 0 auto; color:var(--store-muted); font-size:.84rem; }
@media (pointer:coarse) { .wt-filter-knopf { min-height:44px; } }

/* ---------- Kategorien als Karten (Startansicht) ---------- */
.wt-kat-raster { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.wt-kat-karte {
  display:grid; align-content:start; gap:14px; height:100%; padding:18px 18px 16px;
  border:1px solid var(--st-karte-rand); border-radius:16px; background:var(--st-karte); color:var(--st-text);
  text-decoration:none;
  transition:border-color var(--motion-fast,.16s) var(--ease-standard,ease), transform var(--motion-fast,.16s) var(--ease-standard,ease);
}
.wt-kat-karte:hover { border-color:var(--st-akzent); text-decoration:none; }
@media (hover:hover) { .wt-kat-karte:hover { transform:translateY(calc(-1 * var(--motion-distance-sm,3px))); } }
.wt-kat-gesichter { display:flex; gap:7px; }
.wt-page .wt-app-icon-mini { width:40px; height:40px; }
.wt-kat-text { display:grid; gap:4px; }
.wt-kat-text strong { font-size:1rem; font-weight:720; }
.wt-kat-text small { color:var(--store-muted); font-size:.82rem; line-height:1.4; }

/* ---------- Leere Ansichten ---------- */
.wt-leer-ansicht {
  margin:clamp(28px,4vw,48px) 0 0; padding:clamp(24px,4vw,40px);
  border:1px dashed var(--st-akzent-rand); border-radius:18px; text-align:center;
  background:var(--st-akzent-flaeche);
}
.wt-leer-ansicht[hidden] { display:none; }
.wt-leer-ansicht h2 { margin:0 0 8px; font-size:1.4rem; }
.wt-leer-ansicht p { max-width:52ch; margin:8px auto 0; color:var(--store-muted); line-height:1.5; }
.wt-leer-weg {
  display:inline-flex; align-items:center; min-height:44px; margin-top:6px; padding:0 18px;
  border-radius:8px; background:var(--st-wahl); color:var(--st-wahl-text); font-weight:700; text-decoration:none;
}
.wt-leer-weg:hover { background:var(--st-wahl-hover); color:var(--st-wahl-text); text-decoration:none; }

/* ---------- Detailansicht ---------- */
.wt-detail {
  width:min(46rem, calc(100% - 32px)); max-height:min(88dvh, 54rem);
  padding:0; border:0; border-radius:20px; background:var(--st-grund); color:var(--st-text);
  box-shadow:0 24px 70px rgba(8,24,36,.35); overflow:hidden;
}
.wt-detail::backdrop { background:rgb(8 24 36 / .55); }
.wt-detail[open] { display:flex; flex-direction:column; }
/* max-content, nicht auto: in einem Blatt mit fester Hoehe schrumpfen
   auto-Zeilen auf ihr Minimum, und das ist bei `overflow:hidden` null --
   die Aufnahme fiel auf 2 px zusammen (gemessen 2026-10-15). */
.wt-detail-blatt { display:grid; grid-auto-rows:max-content; gap:18px; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:24px 26px 28px; }
.wt-detail-kopf { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:16px; }
.wt-detail-icon .wt-app-icon { width:72px; height:72px; }
.wt-detail-titel { display:grid; gap:4px; min-width:0; }
.wt-detail-ort { margin:0; color:var(--store-teal); font-size:.74rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.wt-detail-titel h2 { margin:0; font-size:clamp(1.35rem,2.4vw,1.7rem); line-height:1.15; letter-spacing:-.025em; }
.wt-detail-titel h2:focus { outline:none; }
.wt-detail-nutzen { margin:0; color:var(--store-muted); font-size:.95rem; }
.wt-detail-nutzen[hidden] { display:none; }
.wt-detail-zu {
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:0; border-radius:50%; background:var(--st-chip-hover); color:var(--st-text); font:inherit; font-size:1.05rem; cursor:pointer;
}
.wt-detail-zu:hover { background:var(--st-karte-rand); }
.wt-detail-aktionen { display:flex; flex-wrap:wrap; gap:10px; }
.wt-detail-los {
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-height:46px; padding:0 24px; border-radius:.8rem;
  background:var(--st-wahl); color:var(--st-wahl-text); font-weight:750; text-decoration:none;
}
.wt-detail-los:hover { background:var(--st-wahl-hover); color:var(--st-wahl-text); text-decoration:none; }
.wt-detail-merken {
  min-height:46px; padding:0 18px; border:1px solid var(--st-chip-rand); border-radius:.8rem;
  background:var(--st-chip); color:var(--st-text); font:inherit; font-weight:650; cursor:pointer;
}
.wt-detail-merken[aria-pressed="true"] { border-color:var(--store-teal); color:var(--store-teal); }
.wt-detail-merken[aria-pressed="true"]::before { content:"✓ "; }
.wt-detail :focus-visible { outline:3px solid var(--st-fokus); outline-offset:2px; }
.wt-detail-medien { overflow:hidden; border:1px solid var(--st-karte-rand); border-radius:14px; background:var(--st-buehne); }
.wt-detail-medien[hidden] { display:none; }
/* Die Aufnahme zeigt den oberen Teil der Werkzeugseite -- dort steht, was
   man bedient. Gedeckelt, damit Beschreibung und Funktionen ohne Scrollen
   beginnen; das ganze Bild sieht man im Werkzeug selbst. */
.wt-detail-medien img { display:block; width:100%; height:auto; max-height:min(20rem,38dvh); object-fit:cover; object-position:top center; }
/* Umschalter Computer/Telefon ueber der Aufnahme; die Telefonaufnahme
   steht hochkant und mittig, ohne nachgebildeten Geräterahmen. */
.wt-detail-medien { position:relative; }
.wt-detail-geraete {
  position:static; width:fit-content; margin:10px auto; display:flex; gap:2px; padding:3px;
  border:1px solid var(--st-karte-rand); border-radius:8px; background:var(--st-karte);
}
.wt-detail-geraet {
  min-height:32px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:var(--st-text-2);
  font:inherit; font-size:.8rem; font-weight:650; cursor:pointer;
}
.wt-detail-geraet[aria-pressed="true"] { background:var(--st-wahl); color:var(--st-wahl-text); }
.wt-detail-geraet:focus-visible { outline:3px solid var(--st-fokus); outline-offset:2px; }
@media (pointer:coarse) { .wt-detail-geraet { min-height:40px; } }
/* Die Gerätewahl steht bei jeder Breite vor dem Bild und verdeckt keinen Inhalt. */
.wt-detail-medien .wt-browser-frame { border:0; border-radius:0; }
.wt-detail-medien[data-geraet="telefon"] img {
  width:auto; max-width:min(18rem,100%); max-height:min(36rem,65dvh); aspect-ratio:1/2; margin:12px auto; object-fit:contain;
  border:1px solid var(--st-karte-rand); border-radius:4px; box-shadow:none;
}
.wt-detail-kurz { margin:0; font-size:1rem; line-height:1.55; }
.wt-detail-kurz:empty { display:none; }
.wt-detail-teil[hidden] { display:none; }
.wt-detail-teil h3 { margin:0 0 8px; font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--store-muted); }
.wt-detail-teil ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.wt-detail-teil[data-teil="funktionen"] li,.wt-detail-teil[data-teil="grenzen"] li { position:relative; padding-left:24px; line-height:1.45; }
.wt-detail-teil[data-teil="funktionen"] li::before {
  content:""; position:absolute; left:3px; top:.38em; width:11px; height:6px;
  border:solid var(--store-teal); border-width:0 0 2px 2px; transform:rotate(-45deg);
}
.wt-detail-teil[data-teil="grenzen"] li::before { content:"–"; position:absolute; left:6px; color:var(--store-muted); }
.wt-detail-teil dl { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 16px; margin:0; }
.wt-detail-teil dt { color:var(--store-muted); font-size:.85rem; font-weight:650; }
.wt-detail-teil dd { margin:0; font-size:.9rem; line-height:1.45; }
.wt-detail-aehnlich { grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr)); }
.wt-detail-nachbar {
  display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:8px 10px;
  border:1px solid var(--st-karte-rand); border-radius:12px; background:var(--st-karte); color:var(--st-text);
  font:inherit; text-align:left; cursor:pointer;
}
.wt-detail-nachbar:hover { border-color:var(--store-teal); }
.wt-detail-nachbar-text { display:grid; gap:1px; min-width:0; }
.wt-detail-nachbar-text strong { font-size:.88rem; }
.wt-detail-nachbar-text small { color:var(--store-muted); font-size:.76rem; overflow-wrap:break-word; }
/* Telefon: ein Blatt von unten, fast die ganze Hoehe, oben gerundet. */
@media (max-width:47.99em) {
  .wt-detail {
    width:100%; max-width:none; max-height:92dvh; margin:auto 0 0;
    border-radius:20px 20px 0 0;
  }
  .wt-detail-blatt { padding:18px 16px calc(24px + env(safe-area-inset-bottom)); gap:16px; }
  .wt-detail-kopf { gap:12px; }
  .wt-detail-icon .wt-app-icon { width:60px; height:60px; }
  .wt-detail-los { flex:1; }
  .wt-detail-teil dl { grid-template-columns:1fr; gap:2px; }
  .wt-detail-teil dd { margin-bottom:8px; }
}
@media (prefers-reduced-motion:no-preference) {
  .wt-detail[open] { animation:wt-detail-auf .2s var(--ease-standard,ease) both; }
  @media (max-width:47.99em) { .wt-detail[open] { animation-name:wt-blatt-auf; } }
}
@keyframes wt-detail-auf { from { opacity:0; transform:translateY(8px) scale(.985); } }
@keyframes wt-blatt-auf { from { transform:translateY(24px); opacity:.6; } }

/* ---------- Suchkuerzel im Feld ---------- */
.wt-kuerzel {
  flex:none; padding:2px 8px; border:1px solid var(--st-chip-rand); border-radius:7px; background:var(--st-chip-hover);
  color:var(--st-text-2); font:600 .78rem/1.4 inherit; white-space:nowrap;
}
.wt-kuerzel[hidden],.wt-search-box:focus-within .wt-kuerzel { display:none; }

/* ---------- Telefon: zwei Spalten, kompakte Kacheln ---------- */
@media (max-width:47.99em) {
  .wt-page .wt-reihe-spur:not(.wt-reihe-verlauf .wt-reihe-spur) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .wt-page .wt-catalog-link {
    grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto 1fr;
    row-gap:4px; min-height:9.25rem; padding:12px 12px 12px;
  }
  .wt-page .wt-catalog-link > .wt-app-icon { grid-row:1; width:44px; height:44px; margin-bottom:6px; }
  .wt-page .wt-catalog-link .wt-catalog-name strong { grid-column:1; grid-row:2; font-size:.86rem; -webkit-line-clamp:2; }
  .wt-page .wt-catalog-link .wt-catalog-name small { grid-column:1; grid-row:3; font-size:.74rem; -webkit-line-clamp:2; }
  .wt-page .wt-catalog-link .wt-kachel-marken { grid-column:1; grid-row:4; margin-top:4px; }
  .wt-kat-raster { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .wt-kat-karte { gap:10px; padding:14px 12px; }
  .wt-page .wt-app-icon-mini { width:30px; height:30px; }
  .wt-kat-gesichter { gap:5px; }
  .wt-kat-gesichter > :nth-child(n+4) { display:none; }
  .wt-kat-text small { display:none; }
  .wt-filter { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .wt-filter::-webkit-scrollbar { display:none; }
  .wt-filter-knopf { flex:none; }
  .wt-filter-zahl { flex:none; }
}

/* ---------- Feinschliff nach der ersten Bedienung (2026-10-15) ---------- */
/* In "Alle Apps" und in einer Kategorie ist der Katalog der Inhalt -- keine
   Trennlinie und kein Abstand, die ihn von einem Abschnitt darueber
   absetzen, den es in dieser Ansicht nicht gibt. */
html:is([data-wt-ansicht="entdecken"],[data-wt-ansicht="alle"],[data-wt-ansicht="kategorie"]) .wt-page .wt-catalog { margin-top:0; padding-top:clamp(20px,3vw,32px); border-top:0; }
html:is([data-wt-ansicht="merkliste"],[data-wt-ansicht="zuletzt"],[data-wt-ansicht="beta"]) .wt-page .wt-store-main > :is(.wt-reihe-verlauf,.wt-leer-ansicht,.wt-labor):not([hidden]) { margin-top:clamp(20px,3vw,32px); }
.wt-filter + .wt-reihe { margin-top:22px; }
/* Ein Fokus, den das Skript auf eine Ueberschrift setzt, ist eine
   Leseposition, kein Bedienelement -- kein Rahmen darum. */
/* Auch den Halo der Schale (styles-v2: :focus-visible, box-shadow 5 px in
   --white, !important): im Dunkelmodus ist --white der tiefste Grund, und
   um den Titel im Detailblatt stand ein dunkler Kasten (2026-10-15). */
.wt-page :is(h1,h2,h3)[tabindex="-1"]:focus { outline:none; box-shadow:none !important; }
/* Der Detailknopf tritt zurueck, bis jemand auf die Karte zeigt. */
.wt-details { opacity:.55; transition:opacity var(--motion-fast,.16s) linear; }
.wt-catalog-item:hover .wt-details,.wt-details:hover,.wt-details:focus-visible { opacity:1; }
@media (prefers-reduced-motion:reduce) { .wt-details { transition:none; } }
@media (max-width:47.99em) {
  /* Das Schaufenster auf dem Telefon: Wischkarten, nicht ein ganzer
     Bildschirm je Empfehlung. */
  .wt-schau-bild { aspect-ratio:16 / 10; }
  .wt-schau-bild picture { height:100%; }
  .wt-schau-bild img { height:100%; object-fit:cover; object-position:center top; }
  .wt-schau-karte { gap:10px; }
  .wt-kat-text strong { font-size:.92rem; line-height:1.25; }
}
.wt-detail-status { margin-left:8px; vertical-align:1px; letter-spacing:0; text-transform:none; }
.wt-detail-familie { margin:2px 0 0; color:var(--store-muted); font-size:.85rem; }
.wt-detail-familie[hidden] { display:none; }
.wt-detail-familie-knopf {
  padding:0; border:0; background:none; color:var(--store-teal); font:inherit; font-weight:700;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

/* ---------- Direkt starten: die empfohlenen Apps als Startfeld ---------- */
.wt-schnellstart { width:100%; margin-top:22px; }
.wt-schnell-titel {
  margin:0 0 10px; color:var(--st-text-2);
  font-size:.74rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase;
}
.wt-schnell-liste {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 6px;
  margin:0; padding:0; list-style:none;
}
.wt-schnell-app {
  display:grid; justify-items:center; gap:7px; padding:8px 4px 6px; border-radius:14px;
  color:var(--st-text); text-align:center; text-decoration:none;
  transition:background-color var(--motion-fast,.14s) linear;
}
.wt-schnell-app:hover { background:var(--st-chip-hover); color:var(--st-text); text-decoration:none; }
.wt-schnell-app:focus-visible { outline:3px solid var(--st-fokus); outline-offset:1px; }
.wt-schnell-app .wt-app-icon { width:52px; height:52px; }
/* Zwei Zeilen mit Silbentrennung statt Ellipse: "Vertragsvorl…" sagt
   weniger als "Vertrags-/vorlagen". */
.wt-schnell-name {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  max-width:100%; font-size:.76rem; font-weight:650; line-height:1.2;
  overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto;
}
@media (min-width:64em) {
  .wt-page .wt-hero-grid { grid-template-rows:1fr auto auto auto auto auto 1fr; }
  .wt-page .wt-hero-grid > .wt-schnellstart { grid-area:6 / 1; }
  .wt-page .wt-hero-grid > .wt-schaufenster { grid-area:1 / 2 / 8 / 3; }
  /* Vier je Zeile, nicht acht: bei acht blieben 60 px je Name, und aus
     "Vertragsvorlagen" wurde "Ver-trags-.." (gemessen 2026-10-15). */
  .wt-schnell-app .wt-app-icon { width:46px; height:46px; }
  .wt-schnell-name { font-size:.74rem; }
}
html.wt-searching .wt-schnellstart,.wt-page.wt-searching .wt-schnellstart { display:none; }
/* Die eigenen Reihen (Merkliste, Verlauf) bleiben schmale Zeilen: dort
   steht Bekanntes, und zwoelf gemerkte Apps sollen auf einen Blick passen. */
.wt-page .wt-reihe-verlauf .wt-catalog-link {
  grid-template-rows:auto auto; min-height:4rem; row-gap:1px; padding:9px 48px 9px 12px; align-items:center;
}
.wt-page .wt-reihe-verlauf .wt-catalog-link > .wt-app-icon { grid-row:1 / 3; width:36px; height:36px; }
.wt-page .wt-reihe-verlauf .wt-catalog-link .wt-catalog-name strong { align-self:end; font-size:.86rem; -webkit-line-clamp:1; }
.wt-page .wt-reihe-verlauf .wt-catalog-link .wt-catalog-name small { align-self:start; -webkit-line-clamp:1; }
@media (max-width:47.99em) {
  .wt-page .wt-reihe-verlauf .wt-reihe-spur { grid-template-columns:minmax(0,1fr); }
  .wt-page .wt-reihe-verlauf .wt-catalog-link { grid-template-columns:auto minmax(0,1fr); min-height:4rem; }
  .wt-page .wt-reihe-verlauf .wt-catalog-link > .wt-app-icon { grid-row:1 / 3; margin:0; }
  .wt-page .wt-reihe-verlauf .wt-catalog-link .wt-catalog-name strong { grid-column:2; grid-row:1; }
  .wt-page .wt-reihe-verlauf .wt-catalog-link .wt-catalog-name small { grid-column:2; grid-row:2; }
}
@media (max-width:74.99em) {
  .wt-l-ziel[data-wt-teilaktiv] { background:var(--st-akzent-flaeche); color:var(--st-akzent); }
}
.wt-catalog[data-wt-gefiltert] .wt-cluster-head h4 small { display:none; }
/* Hilfsklassen, die das Markup traegt (check_site_markup): die Kategorien-
   Sektion der Startansicht, die Kategorieziele der Leiste, der Kopf des
   Produktblocks. */
.wt-kategorien .wt-section-heading { margin-bottom:16px; }
.wt-l-kategorie { font-weight:550; }
.wt-produkt-kopf { min-width:0; }
/* Je Gruppe eine Liste: die Gruppen stehen untereinander, jede mit eigenem
   Raster (webtools_views.store_reihe). */
.wt-reihe-gruppen { display:grid; gap:2px; }
.wt-gruppe { min-width:0; }
.wt-reihe-gruppen > .wt-gruppe:first-child .wt-cluster-head h4 { margin-top:14px; }
@media (max-width:47.99em) {
  /* "Urlaubspla-ner" war die Silbentrennung einer zu grossen Schrift: eine
     Stufe kleiner passt der Name auf 85 px in eine Zeile. */
  .wt-schnell-app .wt-app-icon { width:48px; height:48px; }
  .wt-schnell-name { font-size:.7rem; letter-spacing:-.005em; hyphenate-limit-chars:9 4 4; }
}

/* =====================================================================
   APP STORE 3.0 · INTERAKTION MIT SINN (Betreiberauftrag 2026-10-15)
   "App-Karten reagieren dezent auf den Mauszeiger, Merklisten geben
   direkt Feedback, Filter wechseln weich und grosse App-Vorschauen
   werden interaktiv. Kein hektisch laufender Slider."
   Jede Bewegung hier antwortet auf eine Handlung; nichts laeuft von
   selbst. Reduzierte Bewegung: Zustaende wechseln sofort.
   ===================================================================== */

/* ---------- Karten: Licht folgt dem Zeiger, die Karte hebt sich ----------
   Ein weicher Fleck in der Bereichsfarbe steht dort, wo der Zeiger ist
   (--zx/--zy aus webtools-page.js, nur feiner Zeiger). Er sitzt UNTER dem
   Inhalt (isolation + z-index -1): Text und Icon bleiben unberuehrt. */
.wt-page .wt-catalog-link,.wt-kat-karte { isolation:isolate; }
.wt-page .wt-catalog-link::before,.wt-kat-karte::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(240px circle at var(--zx,50%) var(--zy,40%),
    color-mix(in oklab, var(--st-akzent) 17%, transparent), transparent 72%);
  opacity:0; transition:opacity var(--motion-base,.2s) var(--ease-standard,ease);
}
.wt-kat-karte { position:relative; }
.wt-page .wt-catalog-link:hover {
  border-color:color-mix(in oklab, var(--st-akzent) 55%, var(--st-karte-rand));
  background:var(--st-karte); box-shadow:var(--st-schatten-hoch);
}
@media (hover:hover) and (pointer:fine) {
  .wt-page :is(.wt-catalog-link,.wt-kat-karte):hover::before { opacity:1; }
  .wt-page .wt-catalog-link:hover,.mit-nadel:hover > .wt-catalog-link { transform:translateY(-2px); }
  .wt-kat-karte:hover { transform:translateY(-2px); box-shadow:var(--st-schatten-hoch); }
}
.wt-kat-karte:hover { border-color:color-mix(in oklab, var(--st-akzent) 55%, var(--st-karte-rand)); }
@media (prefers-reduced-motion:reduce) {
  .wt-page .wt-catalog-link::before,.wt-kat-karte::before { transition:none; }
  .wt-page .wt-catalog-link:hover,.wt-kat-karte:hover,.mit-nadel:hover > .wt-catalog-link { transform:none; }
}

/* ---------- Merken an jeder Karte ----------
   Das Lesezeichen steht oben rechts, der Detailknopf darunter. In Ruhe
   sieht man nur, was gemerkt ist; beim Zeigen und mit der Tastatur
   erscheinen beide. Auf Touch steht das Lesezeichen immer da (44 px) --
   dort gibt es kein Zeigen. */
.wt-merk {
  position:absolute; top:8px; right:8px; z-index:1;
  display:grid; place-items:center; width:32px; height:32px; padding:0;
  border:1px solid transparent; border-radius:10px; background:transparent; color:var(--st-text-2);
  cursor:pointer; opacity:0;
  transition:opacity var(--motion-fast,.14s) linear, background-color var(--motion-fast,.14s) linear, color var(--motion-fast,.14s) linear;
}
.wt-merk[hidden] { display:none; }
.wt-merk svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; overflow:visible; }
.wt-merk[data-an="1"] { opacity:1; color:var(--st-akzent); }
.wt-merk[data-an="1"] svg { fill:currentColor; }
.wt-catalog-item:hover .wt-merk,.wt-catalog-item:focus-within .wt-merk { opacity:1; }
/* Nur mit echtem Zeiger: auf Touch blieb der Hover nach dem Tipp kleben,
   und das gemerkte Zeichen stand in einem grauen Kasten. */
@media (hover:hover) { .wt-merk:hover { background:var(--st-chip-hover); border-color:var(--st-karte-rand); color:var(--st-akzent); } }
.wt-merk:focus-visible { outline:3px solid var(--st-fokus); outline-offset:1px; }
.wt-page .wt-catalog-item:has(> .wt-merk) > .wt-details { top:auto; bottom:8px; }
@media (pointer:coarse) {
  .wt-merk { opacity:1; width:44px; height:44px; top:2px; right:2px; }
  .wt-page .wt-catalog-item:has(> .wt-merk) > .wt-catalog-link { padding-right:46px; }
}
@media (prefers-reduced-motion:reduce) { .wt-merk { transition:none; } }

/* Rueckmeldung: das Zeichen springt einmal, die Zahl an "Merkliste" auch. */
@keyframes wt-merk-sprung { 0% { transform:scale(1); } 40% { transform:scale(1.3); } 100% { transform:scale(1); } }
@keyframes wt-merk-knopf { 0% { transform:scale(1); } 40% { transform:scale(1.05); } 100% { transform:scale(1); } }
.is-neu > svg,.wt-l-zahl.is-neu { animation:wt-merk-sprung .34s var(--ease-standard,ease); }
.wt-detail-merken.is-neu { animation:wt-merk-knopf .3s var(--ease-standard,ease); }
@media (prefers-reduced-motion:reduce) { .is-neu > svg,.wt-l-zahl.is-neu,.wt-detail-merken.is-neu { animation:none; } }

/* ---------- Toast: was gerade passiert ist, und der Weg zurueck ----------
   Umgekehrte Flaeche (dunkel im Hellen, hell im Dunklen): eine Meldung,
   kein Teil der Seite. Ueber der Insel, nie ueber dem Inhalt der Leiste.
   Der Text ist fuer Vorlesesoftware verborgen -- angesagt wird ueber
   #wtBibliothekStatus, nicht doppelt. */
/* Breite nach Inhalt, mittig zwischen 12-px-Raendern: mit left:50% blieb
   dem Text nur die halbe Fensterbreite, und "Rechnungen gemerkt." brach auf
   dem Telefon in drei Zeilen (gemessen 2026-10-15). */
.wt-toast {
  position:fixed; z-index:320; left:12px; right:12px; bottom:max(20px, env(safe-area-inset-bottom));
  width:fit-content; margin-inline:auto;
  -webkit-hyphens:manual; hyphens:manual; overflow-wrap:normal;
  display:flex; align-items:center; gap:10px;
  max-width:32rem; min-height:48px; padding:6px 6px 6px 16px;
  border-radius:14px; background:var(--st-text); color:var(--st-grund);
  box-shadow:0 18px 40px -16px rgb(13 27 36 / .45);
  font-size:.9rem; line-height:1.35;
}
.wt-toast[hidden] { display:none; }
.wt-toast-text { flex:1; min-width:0; }
.wt-toast-aktion {
  flex:none; min-height:36px; padding:0 14px; border:0; border-radius:10px;
  background:color-mix(in srgb, var(--st-grund) 16%, transparent); color:inherit;
  font:inherit; font-weight:750; cursor:pointer;
}
.wt-toast-aktion[hidden] { display:none; }
.wt-toast-aktion:hover { background:color-mix(in srgb, var(--st-grund) 26%, transparent); }
.wt-toast-aktion:focus-visible { outline:3px solid var(--st-fokus); outline-offset:2px; }
@media (max-width:47.99em) {
  .wt-toast { bottom:calc(max(8px, env(safe-area-inset-bottom)) + 76px); }
}
@media (prefers-reduced-motion:no-preference) {
  .wt-toast.is-ein { animation:wt-toast-ein .22s var(--ease-enter,ease-out) both; }
}
@keyframes wt-toast-ein { from { opacity:0; transform:translateY(10px); } }

/* ---------- Filter und Ansichten wechseln weich ----------
   Ein herausgefilterter Eintrag ist sofort weg (motion-system.md, Profil
   tool: er darf nicht kurz weiter anklickbar wirken). Weich ist nur das
   Ankommen: der neue Stand blendet als Ganzes ein -- ein Block, keine
   gestaffelten Karten. */
@keyframes wt-ankommen { from { opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion:no-preference) {
  .wt-catalog.is-frisch .wt-reihe:not(.wt-gefiltert),
  .wt-store-main.is-frisch > :not([hidden]) { animation:wt-ankommen .24s var(--ease-enter,ease-out) both; }
}

/* ---------- Schaufenster ab 1024 px: Buehne mit Reitern und Lupe ---------- */
.wt-schaufenster[data-modus="buehne"] .wt-carousel-track {
  display:grid; overflow:visible; scroll-snap-type:none; border-radius:22px;
}
/* Nur die gezeigte Folie (und waehrend der Blende die vorige) ist im
   Layout: verdeckte Folien sind `display:none`, damit ihre Aufnahmen erst
   laden, wenn jemand sie waehlt -- acht uebereinanderliegende Bilder
   galten sonst alle als sichtbar und kamen beim ersten Aufruf mit
   (gemessen 2026-10-15: acht Fensterbilder, rund 370 kB). */
.wt-schaufenster[data-modus="buehne"] .wt-carousel-slide { grid-area:1 / 1; display:none; }
.wt-schaufenster[data-modus="buehne"] .wt-carousel-slide:is([data-aktiv],[data-geht]) { display:block; }
.wt-schaufenster[data-modus="buehne"] .wt-carousel-slide[data-geht] { pointer-events:none; }
@media (prefers-reduced-motion:no-preference) {
  .wt-schaufenster[data-modus="buehne"] .wt-carousel-slide[data-aktiv] { animation:wt-blende-ein .26s var(--ease-standard,ease) both; }
  .wt-schaufenster[data-modus="buehne"] .wt-carousel-slide[data-geht] { animation:wt-blende-aus .26s var(--ease-standard,ease) both; }
}
/* Vor dem Skript: mit Skript wird ab 1024 px die Buehne -- dann darf die
   Spur auch vor dem ersten Lauf keine zweite Aufnahme anstossen (die
   naechste Folie lag rechts ausserhalb und lud mit). Ohne Skript bleibt
   die Wischspur vollstaendig. */
@media (min-width:64em) and (scripting:enabled) {
  .wt-schaufenster:not([data-modus]) .wt-carousel-slide:not(:first-child) { display:none; }
}
@keyframes wt-blende-ein { from { opacity:0; } }
@keyframes wt-blende-aus { to { opacity:0; } }
.wt-schau-bild { position:relative; }
.wt-schaufenster[data-modus="buehne"] .wt-schau-bild img { aspect-ratio:16 / 10; object-fit:cover; object-position:top center; }
/* Das Startfeld waehlt, was auf der Buehne steht: das App-Gesicht, dessen
   Aufnahme gerade gross zu sehen ist, steht auf einer ruhigen Flaeche. */
.wt-schnell-app[data-im-fokus] { background:var(--st-karte); box-shadow:var(--st-schatten), inset 0 0 0 1px var(--st-karte-rand); }
/* Die Lupe: dieselbe Aufnahme, vergroessert. Ohne Zeiger steht sie
   rechts unten auf dem Thema der Aufnahme; mit Zeiger folgt sie ihm. */
.wt-lupe {
  position:absolute; left:0; top:0; z-index:1; pointer-events:none;
  border-radius:12px; background-color:#fff; background-repeat:no-repeat;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--st-akzent) 70%, #fff), 0 18px 34px -12px rgb(13 27 36 / .45);
  transition:transform .14s var(--ease-standard,ease), background-position .14s var(--ease-standard,ease), background-size .14s var(--ease-standard,ease);
}
.wt-lupe[data-zustand="zeiger"] { transition:none; }
@media (prefers-reduced-motion:reduce) { .wt-lupe { transition:none; } }
.wt-schaufenster:not([data-modus="buehne"]) .wt-lupe { display:none; }

/* ---------- Telefon: ein App-Store-Startbildschirm ----------
   Links buendig wie eine App, groessere Ziele, die Suche oben griffbereit
   (die Insel fuehrt mit "Suche" direkt hinein). */
@media (max-width:47.99em) {
  html[data-wt-ansicht="entdecken"] .wt-page .wt-hero { padding:18px 0 22px; }
  .wt-page .wt-hero-grid { justify-items:stretch; text-align:left; }
  .wt-page .wt-hero-grid > h1 { max-width:none; font-size:clamp(1.65rem,7vw,2.1rem); line-height:1.1; }
  .wt-page .wt-search-panel { width:100%; margin-top:14px; }
  .wt-page .wt-search-box { min-height:56px; border-radius:16px; }
  .wt-page .wt-quick-links { justify-content:flex-start; }
  .wt-page .wt-quick-links a { min-height:44px; }
  .wt-schnellstart { margin-top:20px; }
  .wt-schnell-titel,.wt-schau-titel { font-size:.78rem; }
  .wt-schnell-liste { gap:10px 4px; }
  .wt-schnell-app { gap:8px; padding:6px 2px; }
  .wt-schnell-app .wt-app-icon { width:56px; height:56px; }
  .wt-schaufenster { width:100%; }
}

/* ---------- Beta-Labor (seit 2026-10-15 mit Inhalt: Unterhaltsrechner in Fachpruefung) ---------- */
.wt-labor-spur { margin-top:4px; }

/* Das Menue der Website in der Insel: ein Knopf wie die Ziele, durch eine
   Haarlinie abgesetzt -- es fuehrt aus dem Laden hinaus in die Website. */
.wt-l-menue { position:relative; }
/* Nur die Schriftfamilie erben -- Groesse und Gewicht setzt .wt-l-ziel wie
   bei den Links daneben (mit font:inherit stand "Menue" groesser und duenner). */
.wt-l-menue > .wt-l-ziel { width:100%; border:0; background:transparent; font-family:inherit; cursor:pointer; }
.wt-l-menue::before { content:""; position:absolute; left:-1px; top:22%; bottom:22%; width:1px; background:var(--st-insel-rand); }

/* =====================================================================
   TEXT 200 % OHNE VERLUST (Runde 3, 2026-10-16)
   WCAG 2.2 AA 1.4.4 und 1.4.10. Gemessen mit der Schriftgroesse des
   Browsers (Chrome "Sehr gross" und mehr), nicht mit einem Inline-Stil:
   tests/e2e/webtools-textgroesse.spec.mjs, Messung in
   tests/e2e/lib/store-messung.mjs.

   Die Klammern (`line-clamp`) stammen aus der Zeit fester Kachelhoehen
   ("Die Kachelhoehe steht fest, damit der Anschnitt auf einer
   Zeilenkante landet"). Seit App Store 3.0 waechst die Karte mit ihrem
   Inhalt -- die Klammer schuetzt nichts mehr und kappte bei grosser
   Schrift Namen wie "USt-Voranmeldung-Fristenrechner" auf
   "USt-Voranmel…". Ein Name ist die Beschriftung des Ziels: er steht
   ganz da, notfalls in drei Zeilen und nach Silben getrennt.
   ===================================================================== */
.wt-page .wt-catalog-item .wt-catalog-link .wt-catalog-name :is(strong,small),
.wt-page .wt-catalog-name :is(strong,small) {
  display:block; -webkit-line-clamp:unset; line-clamp:none; overflow:visible;
}
/* Letzter Wortteil und Pruefhaken bleiben beisammen, solange sie in eine
   Zeile passen -- und brechen, wenn nicht ("eSignature" + Haken lief bei
   320 px um 29 px aus der Karte). */
.wt-page .wt-name-ende { display:inline-block; max-width:100%; white-space:normal; }
/* Trefferliste: Name und Nutzen umbrechen statt mit Ellipse zu enden.
   Eine Option darf zwei Zeilen hoch sein; eine halbe Beschriftung nicht. */
.wt-page .wt-result-copy :is(strong,small),
.wt-page .wt-result-frage span {
  overflow:visible; text-overflow:clip; white-space:normal;
  overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto;
}
/* Direkt starten: vier Spalten, solange vier Namen hineinpassen -- bei
   grosser Schrift oder schmaler Spalte drei oder zwei. Die Mindestbreite
   in rem waechst mit der Schrift; 25 % halten die Vierer-Reihe, wo Platz
   ist ("Vier je Zeile, nicht acht"). */
.wt-page .wt-schnell-liste {
  grid-template-columns:repeat(auto-fit,minmax(max(calc(25% - 6px),4.25rem),1fr));
}
.wt-page .wt-schnell-name {
  display:block; -webkit-line-clamp:unset; line-clamp:none; overflow:visible;
}
/* Insel: fuenf Ziele, bei grosser Schrift zweizeilig ("Merk-liste")
   statt breiter als der Bildschirm. Die Insel wird hoeher, nicht breiter. */
@media (max-width:47.99em) {
  .wt-l-ziel { white-space:normal; overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto; line-height:1.15; text-align:center; }
  /* Unter der Insel bleibt ihr gemessener Raum frei (webtools-page.js setzt
     --kn-dock-raum aus ihrer Hoehe) -- 75 px reichten nur bei Normalschrift. */
  .wt-store-main { padding-bottom:calc(var(--kn-dock-raum, 74px) + 12px); }
}
/* Pillen-Knoepfe duerfen bei grosser Schrift umbrechen: "Werkzeug vorschlagen"
   war bei 200 % breiter als das Telefon und zog den ganzen Schlussblock mit.
   Der Schluss ist ein Raster -- seine Spalte waechst nicht ueber den Rand. */
.wt-page :is(.wt-hinweis-cta,.wt-search-leer a,.wt-produkt a) { white-space:normal; text-align:center; }
.wt-page .wt-schluss { grid-template-columns:minmax(0,1fr); }
.wt-page :is(.wt-hinweis,.wt-produkt) { min-width:0; }
/* Das Suchfeld bestimmt nicht die Breite des Hero: ein <input> traegt eine
   eigene Vorzugsbreite von rund zwanzig Zeichen, und die wuchs bei 200 %
   auf 330 px -- die Hero-Spalte wurde 397 px breit, auf einem 390-px-Telefon,
   und alles darin lief rechts aus dem Bild. Breite 0 plus flex:1: das Feld
   fuellt, was frei ist, und verlangt nichts. */
.wt-page .wt-search-box input { width:0; }
/* Direkt starten: ein Name ohne Trennstelle bricht notfalls irgendwo --
   sonst waechst seine Spalte ueber den Rand ("Vertragsvorlagen" lief bei
   200 % um 15 px aus dem Hero). Mit Woerterbuch trennt der Browser vorher
   nach Silben. */
.wt-page .wt-schnell-name { overflow-wrap:anywhere; }

/* Die Buehne hinter der Aufnahme ist eine Flaeche, kein Lichtfleck im Ton
   des Bereichs mehr: die Farbe gehoert der Anwendung, nicht der Wand. */
.wt-page .wt-schau-bild { background:var(--st-buehne); }

/* "Auf einen Blick": drei Fakten. Die Punkte tragen die Markenfarbe -- eine
   Farbe, nicht drei: bunt sind auf dieser Seite die Anwendungen. */
.wt-hero-fakten {
  display:flex; flex-wrap:wrap; gap:4px 18px; margin:12px 0 0; padding:0; list-style:none;
  color:var(--st-text-2); font-size:.84rem; font-weight:600; line-height:1.4;
}
.wt-hero-fakten li { display:inline-flex; align-items:center; gap:8px; }
.wt-hero-fakten li::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--st-akzent); }
/* "Ohne Anmeldung" sagt schon die Unterzeile -- als Fakt steht es nur dort,
   wo sie entfaellt (Telefon). Ausserhalb der Startansicht ist der Hero eine
   Suchleiste, und die Fakten treten mit der Unterzeile ab. */
.wt-hero-fakten .wt-fakt-schmal { display:none; }
@media (max-width:600px) { .wt-hero-fakten .wt-fakt-schmal { display:inline-flex; } }
html[data-wt-ansicht]:not([data-wt-ansicht="entdecken"]) .wt-hero-fakten,
.wt-page.wt-searching .wt-hero-fakten { display:none; }
.wt-h1-zeile { display:block; }
/* ZWEI ZEILEN, NICHT DREI (Werkbank V12): "Deine kostenlosen Werkzeuge."
   ist rund 13 Schriftgrade breit; bei der bisherigen Groesse und 17ch brach
   es auf jeder Desktopbreite vor "Werkzeuge." um (gemessen 2026-10-16:
   1280 px 464 statt 422, 1440 px 520 statt 494). Die Groesse folgt deshalb
   der Spalte -- und nur im Zweispalter: bei grosser Schrift gilt das
   Telefonraster mit seiner eigenen Groesse. */
@media (min-width:64em) and (min-width:48em) {
  .wt-hero-grid > h1,.wt-rahmen .wt-hero-grid > h1 { max-width:none; font-size:clamp(1.75rem,2.7vw,2.1rem); }
}
@media (min-width:75em) {
  .wt-hero-grid > h1,.wt-rahmen .wt-hero-grid > h1 { font-size:clamp(1.9rem,2.4vw,2.5rem); }
}
/* Auf dem Telefon dieselbe Rechnung gegen die Bildschirmbreite: bei 7vw
   brach der erste Satz von 320 bis 430 px um, bei 6,4vw steht er. Mit
   vergroesserter Schrift greift das Minimum, und die Zeilen duerfen
   umbrechen. */
@media (max-width:47.99em) {
  .wt-page .wt-hero-grid > h1 { font-size:clamp(1.3rem,6.4vw,2.1rem); }
}
@media (min-width:64em) {
  .wt-page .wt-hero-grid { grid-template-rows:1fr auto auto auto auto auto auto 1fr; }
  .wt-page .wt-hero-grid > h1 { grid-area:2 / 1; }
  .wt-page .wt-hero-grid > .wt-intro-lead { grid-area:3 / 1; }
  .wt-page .wt-hero-grid > .wt-hero-fakten { grid-area:4 / 1; }
  .wt-page .wt-hero-grid > .wt-search-panel { grid-area:5 / 1; }
  .wt-page .wt-hero-grid > .wt-quick-links { grid-area:6 / 1; }
  .wt-page .wt-hero-grid > .wt-schnellstart { grid-area:7 / 1; }
  .wt-page .wt-hero-grid > .wt-schaufenster { grid-area:1 / 2 / 9 / 3; }
  .wt-page .wt-hero-fakten { margin-top:14px; }
}

/* ---------- Werkbank: Arbeitsschritte im Schaufenster (2026-10-16) ----------
   Bei geeigneten Apps zeigt die Folie echte Zustaende derselben Sitzung --
   Original, Bearbeitet, Ergebnis. Gewaehlt wird nur von der Person, die
   schaut; nichts schaltet von selbst. Die Wahl sind native Optionsfelder:
   Pfeiltasten, "1 von 3" im Bildschirmleser und das Umschalten selbst gehen
   ohne Skript (:has). Das Skript haelt nur das vorige Bild stehen, bis das
   neue geladen ist, und fuehrt die Lupe mit. */
.wt-page .wt-schau-bild { display:grid; }
.wt-schau-ansicht { grid-area:1 / 1; min-width:0; z-index:1; }
.wt-schau-ansicht + .wt-schau-ansicht { display:none; }
.wt-carousel-slide:has(.wt-schritte input:checked) .wt-schau-ansicht { display:none; }
.wt-carousel-slide:has(.wt-schritte input[value="0"]:checked) .wt-schau-ansicht[data-schritt="0"],
.wt-carousel-slide:has(.wt-schritte input[value="1"]:checked) .wt-schau-ansicht[data-schritt="1"],
.wt-carousel-slide:has(.wt-schritte input[value="2"]:checked) .wt-schau-ansicht[data-schritt="2"],
.wt-carousel-slide:has(.wt-schritte input[value="3"]:checked) .wt-schau-ansicht[data-schritt="3"] { display:block; }
/* Das vorige Bild bleibt unter dem neuen stehen, bis dieses gemalt ist --
   kein leerer Rahmen waehrend des Ladens. */
.wt-carousel-slide:has(.wt-schritte input:checked) .wt-schau-ansicht[data-zuletzt] { display:block; z-index:0; }
.wt-page .wt-lupe { z-index:2; }
@media (prefers-reduced-motion:no-preference) {
  .wt-schau-ansicht.is-neu { animation:wt-blende-ein .2s var(--ease-standard,ease) both; }
  /* Nach dem Wechsel des Schritts gleitet die Lupe dorthin, wo sich etwas
     geaendert hat -- Bewegung, die zeigt, statt zu schmuecken. */
  .wt-page .wt-lupe[data-zustand="wechsel"] { transition-duration:.36s; }
}

.wt-schritte {
  /* Ueber der Trefferflaeche der Karte (.wt-schau-los::after): ein Schritt
     ist eine Wahl auf der Karte, kein Klick auf "Jetzt öffnen". */
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(var(--schritte,3),minmax(0,1fr)); gap:6px;
  min-width:0; margin:0; padding:0; border:0;
}
.wt-schritt {
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:2px 7px;
  min-width:0; min-height:48px; padding:7px 10px 7px 8px;
  border:1px solid var(--st-chip-rand); border-radius:12px;
  background:var(--st-chip); color:var(--st-text); cursor:pointer;
  transition:background-color var(--motion-fast,.14s) linear, border-color var(--motion-fast,.14s) linear;
}
/* Das Optionsfeld liegt unsichtbar ueber dem ganzen Schritt: Klick, Tipp
   und Fokus gehoeren ihm, gezeigt wird die Beschriftung. */
.wt-schritt input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
/* Der Kreis waechst mit der Schrift (em): bei 150 % Text fuellte die Ziffer
   einen 20-px-Kreis bis an den Rand. */
.wt-schritt-nr {
  display:grid; place-items:center; width:1.75em; height:1.75em; border-radius:50%;
  background:var(--st-buehne); color:var(--st-text-2); font-size:.7rem; font-weight:750; line-height:1;
}
.wt-schritt-name { min-width:0; font-size:.84rem; font-weight:700; line-height:1.2; }
/* Die Zeile darunter nimmt die ganze Breite des Schritts, auch unter der
   Nummer -- bei 1280 px blieben neben ihr nur gut 90 px. */
.wt-schritt-detail { grid-column:1 / -1; min-width:0; color:var(--st-text-2); font-size:.74rem; line-height:1.25; }
.wt-schritt:hover { background:var(--st-chip-hover); }
/* Eine Flaeche aus dem Farbsatz, kein color-mix: dessen oklab-Wert kann die
   Kontrastpruefung nicht lesen und meldete 1,20:1 (2026-10-16). */
.wt-schritt:has(input:checked) { border-color:var(--st-akzent); background:var(--st-akzent-flaeche); }
.wt-schritt:has(input:checked) .wt-schritt-nr { background:var(--st-akzent); color:var(--st-karte); }
.wt-schritt:has(input:focus-visible) { outline:3px solid var(--st-fokus); outline-offset:2px; }
/* Der Weg durch die Schritte -- Öffnen, Bearbeiten, Ergebnis: eine Linie
   unter den Feldern, gefuellt bis zum gewaehlten. Sie sagt "der Reihe nach"
   und wo man steht, und sie bewegt sich nur, wenn jemand waehlt. Ein eigenes
   Element statt ::before/::after am Feldsatz: Pseudoelemente mit Flaeche an
   einem Vorfahren lassen die Kontrastpruefung den Hintergrund jedes Texts
   darin nicht mehr bestimmen. */
.wt-schritte { padding-bottom:9px; }
.wt-schritte-weg {
  position:absolute; left:0; right:0; bottom:0; height:3px; overflow:hidden;
  border-radius:3px; background:var(--st-karte-rand); pointer-events:none;
}
.wt-schritte-weg > span {
  display:block; height:100%; background:var(--st-akzent);
  transform:scaleX(calc(var(--weg, 1) / var(--schritte, 3))); transform-origin:left center;
  transition:transform .3s var(--ease-standard,ease);
}
.wt-schritte:has(input[value="1"]:checked) { --weg:2; }
.wt-schritte:has(input[value="2"]:checked) { --weg:3; }
.wt-schritte:has(input[value="3"]:checked) { --weg:4; }
@media (prefers-reduced-motion:reduce) { .wt-schritt,.wt-schritte-weg > span { transition:none; } }

@media (min-width:64em) {
  /* EINE HOEHE FUER ALLE FOLIEN. Bisher stand nur die gezeigte Folie im
     Layout, und ihre Hoehe war die des Schaufensters: bei 1440 px wuchs der
     Hero beim Wechsel um bis zu 30 px (gemessen 2026-10-16: 619 bis 649 px),
     und alles darunter rutschte mit. Jetzt liegen alle Folien uebereinander,
     die hoechste bestimmt die Hoehe; verdeckte bleiben unsichtbar und inert,
     und ihre Bilder stehen nicht im Layout -- sie laden erst, wenn jemand sie
     waehlt. */
  .wt-schaufenster[data-modus="buehne"] .wt-carousel-slide { display:block; visibility:hidden; }
  .wt-schaufenster[data-modus="buehne"] .wt-carousel-slide:is([data-aktiv],[data-geht]) { visibility:visible; }
  .wt-schaufenster[data-modus="buehne"] .wt-carousel-slide:not([data-aktiv],[data-geht]) .wt-schau-bild > * { display:none; }
  /* Spezifischer als die Schrittwahl (:has ... :checked): sonst stuende der
     gewaehlte Schritt einer verdeckten Folie im Layout, und sein Bild luede
     mit (gemessen 2026-10-16: Rechnung und PDF beim ersten Aufruf). */
  .wt-schaufenster[data-modus="buehne"] .wt-carousel-slide:not([data-aktiv],[data-geht]) .wt-schau-bild > .wt-schau-ansicht[data-schritt] { display:none; }
  .wt-schaufenster[data-modus="buehne"] .wt-schau-bild { aspect-ratio:16 / 10; }
}
/* Folien ohne Schritte sind kuerzer als die hoechste: der Fuss steht in der
   Mitte des freien Raums statt an der Bildkante -- auf der Buehne wie in der
   Wischspur, wo alle Folien die Hoehe der hoechsten tragen. */
.wt-schau-karte { grid-template-rows:auto auto auto minmax(0,1fr); }
.wt-carousel-slide:not([data-schritte]) .wt-schau-karte { grid-template-rows:auto auto minmax(0,1fr); }
.wt-schau-fuss { align-self:center; }

/* ---------- Telefon: Suche, Startfeld, dann "App entdecken" (Werkbank V12) ----------
   Betreiberentscheid 2026-10-16: auf dem Telefon kein grosses
   Desktop-Schaufenster im Einstieg -- zuerst Suche, Kategorien und das
   Startfeld. Darunter eine kompakte Entdecken-Karte mit der echten, fuer das
   Telefon gesetzten Aufnahme (4:3, 600/900 px statt des Desktopfensters):
   eine Karte in voller Breite, kein angeschnittener Nachbar, gewischt,
   gepfeilt oder ueber die Punkte gewaehlt. Die Arbeitsschritte gehen auch
   hier, mit dem Daumen. */
.wt-schau-titel-schmal,.wt-schau-los-kurz { display:none; }
@media (max-width:47.99em) {
  .wt-schau-titel-breit,.wt-page .wt-schau-los .wt-schau-los-lang { display:none; }
  .wt-schau-titel-schmal,.wt-page .wt-schau-los .wt-schau-los-kurz { display:inline; }
  .wt-page .wt-schaufenster { margin-top:26px; }
  .wt-page .wt-carousel-slide { flex-basis:100%; }
  .wt-page .wt-schau-karte { gap:10px; padding:12px 12px 14px; }
  .wt-page .wt-schau-fuss { grid-template-columns:auto minmax(0,1fr) auto; gap:10px; }
  .wt-page .wt-schau-fuss .wt-app-icon { width:40px; height:40px; }
  .wt-page .wt-schau-los { grid-column:auto; min-height:44px; padding:0 14px; }
  .wt-page .wt-carousel-punkte { margin-top:6px; }
}
/* Bis 600 px die Telefonaufnahme in ganzer Hoehe -- sie ist fuer diese
   Breite geschnitten, 4:3, und wird nicht noch einmal angeschnitten.
   Die Schritte verlieren dort ihre Nummer: in gut 100 px Breite brach
   "Bearbeitet" sonst mitten im Wort (gemessen 390 px). Die Reihenfolge
   zeigen die Linie darunter und, fuer den Bildschirmleser, "1 von 3". */
@media (max-width:600px) {
  .wt-page .wt-schau-bild { aspect-ratio:4 / 3; }
  .wt-page .wt-schau-bild img { object-position:center top; }
  .wt-page .wt-schritt { grid-template-columns:minmax(0,1fr); padding:7px 9px; }
  .wt-page .wt-schritt-nr { display:none; }
}
.wt-schritt-name,.wt-schritt-detail { -webkit-hyphens:auto; hyphens:auto; }

/* App-Zentrale: ausschließlich /webtools, native Dialoge und bestehende Token. */
.wt-rail-toggle,.wt-kategorie-trigger,.wt-mobile-categories,.wt-drawer-close,
.wt-search-quickfilters button,.wt-preview-open {
  font:inherit; color:var(--st-text); background:var(--st-karte); border:1px solid var(--st-karte-rand);
  border-radius:12px; min-height:44px; padding:8px 14px; cursor:pointer;
}
.wt-rail-toggle { display:none; margin-bottom:14px; }
.wt-category-row { display:grid; grid-template-columns:minmax(0,1fr) 36px; }
.wt-kategorie-trigger { padding:4px; min-width:32px; background:transparent; border:0; }
.wt-kategorie-trigger[aria-expanded="true"] { rotate:180deg; }
.wt-akkordeon-inhalt { grid-column:1/-1; display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease; }
.wt-akkordeon-inhalt.wt-open { grid-template-rows:1fr; }
.wt-akkordeon-inner { overflow:hidden; min-height:0; }
.wt-subcategory { display:block; width:100%; padding:10px 12px 10px 24px; text-align:left; font:inherit; font-size:.875rem; color:var(--st-text-2); border:0; background:transparent; text-decoration:none; cursor:pointer; }
.wt-subcategory:hover { background:var(--st-wahl); color:var(--st-wahl-text); }
.wt-mobile-categories { margin:12px 0; }
@media (min-width:64em) {
  .wt-rahmen { display:grid; grid-template-columns:260px minmax(0,1fr); transition:grid-template-columns .24s ease; }
  html.wt-rail-collapsed .wt-rahmen { grid-template-columns:68px minmax(0,1fr); }
  .wt-leiste { width:260px; padding:18px 10px; }
  .wt-leiste.wt-collapsed { width:68px; padding-inline:6px; overflow:visible; }
  .wt-rail-toggle { display:block; }
  .wt-leiste-marke,.wt-leiste-titel,.wt-leiste-kategorien { display:block; }
  .wt-leiste-kategorien { display:grid; }
  .wt-l-ziel { flex-direction:row; min-height:44px; text-align:left; padding:8px; font-size:.875rem; }
  .wt-l-lang { display:block; }
  .wt-l-kurz { display:none; }
  .wt-nur-insel,.wt-mobile-categories { display:none; }
  .wt-collapsed .wt-l-lang,.wt-collapsed .wt-l-kurz,.wt-collapsed .wt-l-zahl,
  .wt-collapsed .wt-leiste-marke,.wt-collapsed .wt-leiste-titel,
  .wt-collapsed .wt-akkordeon-inhalt,.wt-collapsed .wt-kategorie-trigger { display:none; }
  .wt-collapsed .wt-category-row { display:block; }
  .wt-collapsed .wt-l-ziel { justify-content:center; }
  .wt-collapsed .wt-l-symbol { width:24px; height:24px; }
  .wt-collapsed .wt-l-ziel:is(:hover,:focus-visible)::after {
    content:attr(data-tooltip); position:absolute; z-index:300; left:calc(100% + 12px); top:0;
    padding:12px; width:max-content; max-width:240px; border:1px solid var(--st-karte-rand);
    background:var(--st-karte); color:var(--st-text); border-radius:10px; box-shadow:var(--wt-shadow-glass,0 8px 24px rgb(0 0 0 / .12));
  }
}
.wt-category-drawer { margin:0; height:100dvh; max-height:100dvh; width:min(90vw,360px); max-width:100vw; padding:20px; border:0; background:var(--st-karte); color:var(--st-text); }
.wt-category-drawer .wt-leiste-kategorien { display:grid !important; margin-top:20px; }
.wt-category-drawer .wt-l-lang { display:block; }
.wt-category-drawer .wt-l-ziel { flex-direction:row; white-space:normal; text-align:left; padding:8px; font-size:1rem; }
.wt-command-palette { box-sizing:border-box; width:min(960px,calc(100vw - 32px)); max-width:none; max-height:85dvh; margin:7dvh auto auto; padding:24px; border:1px solid var(--st-karte-rand); border-radius:24px; background:var(--st-karte); color:var(--st-text); overflow:auto; }
.wt-command-palette::backdrop,.wt-category-drawer::backdrop,.wt-detail::backdrop { background:rgb(13 27 36 / .45); backdrop-filter:blur(10px); }
.wt-command-palette .wt-search-panel { position:static; width:100%; max-width:none; margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:12px 24px; }
.wt-command-palette .wt-search-box,.wt-command-palette .wt-search-status,.wt-command-palette .wt-search-quickfilters { grid-column:1/-1; }
.wt-command-palette .wt-search-results { position:static; grid-column:1; grid-row:4; width:100%; max-height:48dvh; overflow:auto; margin:0; box-shadow:none; }
.wt-command-palette .wt-search-leer { grid-column:1; }
.wt-command-preview { grid-column:2; grid-row:4/6; min-width:0; }
.wt-command-preview h2 { font-size:1.35rem; margin:0 0 8px; }
.wt-command-preview p { color:var(--st-text-2); }
.wt-search-panel > .wt-search-quickfilters,.wt-search-panel > .wt-command-preview { display:none; }
.wt-command-palette .wt-search-quickfilters { display:flex; flex-wrap:wrap; gap:8px; }
.wt-command-palette .wt-command-preview { display:block; }
.wt-search-quickfilters button { border-radius:8px; font-size:.875rem; }
.wt-search-quickfilters button[aria-pressed="true"],.wt-preview-open { background:var(--st-wahl); color:var(--st-wahl-text); }
.wt-preview-open { margin-top:16px; width:100%; }
.wt-browser-frame { display:block; min-width:0; border:1px solid var(--st-karte-rand); border-radius:8px; overflow:hidden; background:var(--st-karte); }
.wt-browser-topbar,.wt-browser-bar { display:grid; grid-template-columns:14px minmax(0,1fr); align-items:center; gap:8px; min-height:32px; padding:7px 10px; border-bottom:1px solid var(--st-karte-rand); background:var(--st-chip-hover); color:var(--st-text-2); }
.wt-browser-address { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.8125rem; }
.wt-browser-frame img { display:block; width:100%; height:auto; aspect-ratio:1.6; object-fit:cover; }
.wt-browser-example { padding:20px; min-height:150px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.wt-browser-example strong { font-size:1.05rem; }
.wt-browser-example p,.wt-browser-example small { margin:0; font-size:.8125rem; }
.wt-catalog-link:has(> .wt-browser-frame) { flex-wrap:wrap; height:auto; }
.wt-catalog-link > .wt-browser-frame { flex-basis:100%; width:100%; margin-bottom:12px; text-align:left; }
.wt-catalog-link > .wt-browser-frame .wt-browser-example { height:150px; overflow:hidden; }
.wt-catalog-link > .wt-browser-frame img { height:190px; }
.wt-app-icon { border-radius:22.37%; corner-shape:squircle; aspect-ratio:1; }
.wt-detail .wt-detail-blatt { max-width:840px; border-radius:24px; }
@media (max-width:767px) {
  .wt-command-palette { width:calc(100vw - 16px); margin:8px auto; padding:14px; max-height:calc(100dvh - 16px); }
  .wt-command-palette .wt-search-panel { grid-template-columns:minmax(0,1fr); }
  .wt-command-palette .wt-command-preview { grid-column:1; grid-row:5; }
  .wt-command-palette .wt-search-results { max-height:32dvh; }
  .wt-command-palette .wt-search-box { flex-wrap:wrap; }
  .wt-command-palette .wt-search-box input { min-width:0; }
  .wt-command-palette .wt-search-zu { font-size:0; }
  .wt-command-palette .wt-search-zu span { font-size:1rem; }
  .wt-detail .wt-detail-blatt { margin-top:auto; border-radius:24px 24px 0 0; }
}
@media (prefers-reduced-motion:reduce) {
  .wt-rahmen,.wt-akkordeon-inhalt { transition:none; }
}
.wt-browser-topbar { background:var(--wash); color:var(--st-text-2); }
.wt-page .wt-catalog-link:has(> .wt-browser-frame) { display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto auto auto; gap:12px; padding:14px; }
.wt-page .wt-catalog-link > .wt-browser-frame { grid-column:1/-1; grid-row:1; margin:0; }
.wt-page .wt-catalog-link:has(> .wt-browser-frame) > .wt-app-icon { grid-column:1; grid-row:2; width:44px; height:44px; margin:0; }
.wt-page .wt-catalog-link:has(> .wt-browser-frame) > .wt-catalog-name { grid-column:2; grid-row:2; }
.wt-page .wt-catalog-link:has(> .wt-browser-frame) > .wt-kachel-marken { grid-column:1/-1; grid-row:3; }
.wt-command-palette .wt-result { text-decoration:none; }
.wt-page :is(.wt-rail-toggle,.wt-kategorie-trigger,.wt-subcategory,.wt-mobile-categories,.wt-drawer-close,.wt-search-quickfilters button,.wt-preview-open):focus-visible { outline:3px solid var(--st-fokus); outline-offset:3px; }
.wt-chip-scroller { position:sticky; top:var(--kn-kopf-h,64px); z-index:20; display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 0; background:var(--st-karte); }
.wt-chip-scroller button { flex:none; scroll-snap-align:start; }
.wt-filter-category,.wt-install { font:inherit; font-size:.875rem; border:1px solid var(--st-karte-rand); color:var(--st-text); background:var(--st-karte); padding:10px 16px; min-height:44px; border-radius:8px; cursor:pointer; }
.wt-filter-category[aria-pressed="true"] { background:var(--st-wahl); color:var(--st-wahl-text); }
.wt-skeleton { background:linear-gradient(90deg,var(--wash) 25%,var(--line) 50%,var(--wash) 75%); background-size:200% 100%; animation:wt-shimmer 1.5s ease-in-out 3; }
@keyframes wt-shimmer { to { background-position:-200% 0; } }
.wt-drag-handle { display:none; }
@media (max-width:767px) {
  .wt-drag-handle { display:flex; align-items:center; justify-content:center; min-height:32px; touch-action:none; }
  .wt-drag-handle::after { content:""; width:36px; height:4px; border-radius:4px; background:var(--muted); }
}
@media (prefers-reduced-motion:reduce) { .wt-skeleton { animation:none; } }
@media (max-width:767px) { body.wt-command-open #wtLeiste { opacity:0; pointer-events:none; } }
.wt-page .wt-catalog-link > .wt-browser-frame .wt-browser-example { box-sizing:border-box; height:190px; }
.wt-page .wt-catalog-link:has(> .wt-browser-frame) > .wt-catalog-name { display:grid; }
.wt-page .wt-catalog-link:has(> .wt-browser-frame) .wt-catalog-name :is(strong,small) { grid-column:auto; grid-row:auto; }
/* Eigenes, plattformneutrales Fenstersymbol; keine vorgetäuschten OS-Knöpfe. */
.wt-browser-mark { position:relative; box-sizing:border-box; width:12px; height:10px; border:1px solid currentColor; border-radius:2px; color:var(--st-akzent); }
.wt-browser-mark::before { content:""; position:absolute; inset-inline:0; top:2px; border-top:1px solid currentColor; }
.wt-store-main > .wt-chip-scroller { margin-inline:clamp(16px,3vw,40px); border-radius:10px; padding-inline:12px; }
.wt-rail-icon { display:flex; flex:none; }
.wt-rail-icon .wt-app-icon { width:24px; height:24px; border-radius:22.37%; }
.wt-rail-icon .wt-app-icon svg { width:18px; height:18px; }
@media (min-width:64em) and (max-height:700px) { .wt-leiste.wt-collapsed { overflow-y:auto; } }
.wt-page :is(.wt-filter-category,.wt-install):focus-visible { outline:3px solid var(--st-fokus); outline-offset:3px; }
.wt-detail-badges { display:flex; flex-wrap:wrap; gap:8px; }
.wt-detail-badges span { border:1px solid var(--st-karte-rand); padding:6px 10px; border-radius:8px; font-size:.8125rem; color:var(--st-text-2); }
.wt-detail-icon .wt-app-icon { width:72px; height:72px; }
/* Direkte Katalog-/Gruppenadressen berücksichtigen auch die haftenden Filter. */
.wt-page #alle-werkzeuge,.wt-page .wt-reihe-bereich[id],.wt-page .wt-gruppe[id] { scroll-margin-top:calc(var(--kn-kopf-h,64px) + 88px); }

/* Marken-Konstellation: acht feste, asymmetrische Positionen pro 600-px-Kachel.
   18/28/42 px, leichte Drehungen und individuelle Alpha-Werte brechen Fluchtlinien.
   Die separate Ebene bleibt dekorativ und lässt Text und Klickziele unberührt.
   Light: 1,75–3,5 %, Dark: 2–4 %; Theme-Wahl wie auf der gesamten Website. */
.wt-rahmen { position:relative; isolation:isolate; }
.wt-rahmen::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--wt-pattern-ink); opacity:var(--wt-pattern-opacity);
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20600%22%3E%3Cdefs%3E%3Csymbol%20id%3D%22mark%22%20viewBox%3D%229%206%2030%2039%22%3E%3Crect%20x%3D%2210%22%20y%3D%227%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.8%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2216.6%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.8%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2226.2%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.8%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2235.8%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.8%22%2F%3E%3Crect%20x%3D%2219.6%22%20y%3D%2216.6%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.8%22%2F%3E%3Crect%20x%3D%2219.6%22%20y%3D%2226.2%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.8%22%2F%3E%3Crect%20x%3D%2229.2%22%20y%3D%2235.8%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2233.2%22%20cy%3D%2211%22%20r%3D%225%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22translate%2875%2090%29%20rotate%28-10%29%22%20opacity%3D%220.5%22%3E%3Cuse%20href%3D%22%23mark%22%20width%3D%2228%22%20height%3D%2228%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28220%20310%29%20rotate%288%29%22%20opacity%3D%221%22%3E%3Cuse%20href%3D%22%23mark%22%20width%3D%2242%22%20height%3D%2242%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28410%20120%29%20rotate%2815%29%22%20opacity%3D%220.65%22%3E%3Cuse%20href%3D%22%23mark%22%20width%3D%2218%22%20height%3D%2218%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28510%20480%29%20rotate%28-6%29%22%20opacity%3D%220.8%22%3E%3Cuse%20href%3D%22%23mark%22%20width%3D%2228%22%20height%3D%2228%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28140%20520%29%20rotate%280%29%22%20opacity%3D%220.6%22%3E%3Cuse%20href%3D%22%23mark%22%20width%3D%2218%22%20height%3D%2218%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28330%20240%29%20rotate%28-8%29%22%20opacity%3D%220.85%22%3E%3Cuse%20href%3D%22%23mark%22%20width%3D%2228%22%20height%3D%2228%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28560%20210%29%20rotate%2812%29%22%20opacity%3D%220.55%22%3E%3Cuse%20href%3D%22%23mark%22%20width%3D%2218%22%20height%3D%2218%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28355%20555%29%20rotate%285%29%22%20opacity%3D%220.75%22%3E%3Cuse%20href%3D%22%23mark%22%20width%3D%2242%22%20height%3D%2242%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  mask-size:600px 600px; mask-repeat:repeat;
}
.wt-page :is(.wt-leiste,.wt-chip-scroller) { background:var(--st-grund); }
@supports (backdrop-filter:blur(16px)) {
  .wt-page :is(.wt-leiste,.wt-chip-scroller) {
    background:var(--wt-glass); backdrop-filter:blur(16px);
  }
}

/* Such-Badge und Hero-Beispiele: feste Zeilenhöhe, kein Layoutsprung beim Wechsel. */
.wt-kuerzel { padding:2px 6px; border:1px solid var(--st-feld-rand); border-radius:5px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,monospace; font-size:.72rem; font-weight:600; }
@media (max-width:767px), (pointer:coarse) { .wt-kuerzel { display:none !important; } }
.wt-page { --wt-hero-glint:var(--wt-navy-mid); }
html[data-theme="dark"] .wt-page { --wt-hero-glint:#d6e8f2; }
.wt-hero-rotator { display:grid; overflow:hidden; line-height:1.2; margin-block:4px 10px; color:var(--st-akzent); }
.wt-rotator-item { grid-area:1 / 1; opacity:0; transform:translateY(100%); transition:transform 320ms cubic-bezier(.16,1,.3,1),opacity 320ms ease; }
.wt-rotator-item.is-active { opacity:1; transform:translateY(0); }
.wt-rotator-item.is-exiting { transform:translateY(-100%); }
@supports (background-clip:text) {
  .wt-rotator-item { background:linear-gradient(135deg,var(--st-akzent),var(--wt-hero-glint),var(--st-akzent)); background-size:200% auto; background-clip:text; -webkit-text-fill-color:transparent; }
  .wt-hero-rotator .is-active { animation:wtTextGlow 4s linear 1; }
}
@keyframes wtTextGlow { to { background-position:200% center; } }
.wt-page .wt-hero-grid > h1 .wt-h1-zeile { font-size:1rem; line-height:1.5; font-weight:600; letter-spacing:normal; }
.wt-filter-count { display:inline-block; margin-inline-start:6px; padding:0; border-radius:4px; opacity:.6; font-size:.78rem; font-weight:500; font-variant-numeric:tabular-nums; }
.wt-schnell-app { transition:background-color 180ms ease,transform 180ms cubic-bezier(.2,0,0,1); }
.wt-schnell-app .wt-app-icon { transition:box-shadow 180ms ease; }
@media (hover:hover) and (pointer:fine) {
  .wt-schnell-app:hover { transform:translateY(-4px); }
  .wt-schnell-app:hover .wt-app-icon { box-shadow:0 10px 20px -5px color-mix(in srgb,var(--tile-light) 40%,transparent); }
}
.wt-schnell-app:active { transform:scale(.96); }
@media (prefers-reduced-motion:reduce) {
  .wt-rotator-item { transition:none; animation:none !important; }
  .wt-schnell-app,.wt-schnell-app .wt-app-icon { transition:none; }
  .wt-schnell-app:is(:hover,:active) { transform:none; }
}
.wt-hero-prefix { display:block; text-wrap:balance; }

/* Präzise Steuerelemente; die eigenständigen App-Marken bleiben unverändert. */
.wt-page :is(.wt-filter-knopf,.wt-filter-category,.wt-chip-scroller button,.wt-search-quickfilters button) { border-radius:7px; padding:6px 12px; min-height:36px; }
.wt-page :is(.wt-schau-los,.wt-detail-los,.wt-preview-open,.wt-hinweis-cta,.wt-detail-merken) { border-radius:8px; font-size:.875rem; font-weight:600; }
.wt-page :is(.wt-filter-knopf,.wt-filter-category,.wt-search-quickfilters button)[aria-pressed="true"] { background:var(--st-wahl); border-color:var(--st-akzent); color:var(--st-wahl-text); }
@media (pointer:coarse) { .wt-page :is(.wt-filter-knopf,.wt-filter-category,.wt-chip-scroller button,.wt-search-quickfilters button) { min-height:44px; } }

/* Vergrößerte Schrift: Grid-Spalten folgen der Schriftgröße, Vorschautitel bleiben lesbar. */
.wt-hero-rotator { grid-template-columns:minmax(0,1fr); }
.wt-rotator-item { min-width:0; overflow-wrap:anywhere; }
.wt-browser-address { min-width:0; white-space:normal; overflow-wrap:anywhere; text-overflow:clip; font-weight:550; line-height:1.4; }
.wt-command-palette .wt-search-quickfilters { flex-wrap:nowrap; overflow-x:auto; min-width:0; }
.wt-command-palette .wt-search-quickfilters button { flex:none; white-space:nowrap; }
@media (max-height:500px) {
  .wt-command-palette { margin:8px auto; max-height:calc(100dvh - 16px); padding:12px; }
  .wt-command-palette .wt-search-panel { gap:8px; }
  .wt-command-palette .wt-command-preview { display:none; }
  .wt-command-palette .wt-search-results { max-height:max(44px,calc(100dvh - 200px)); }
}
.wt-page .wt-catalog-link > .wt-browser-frame .wt-browser-example { height:auto; min-height:190px; overflow:visible; }
/* Kompakte Storekarten, große Aufnahmen erst bei Interesse. Alle Bilder
   bleiben bereits ohne JavaScript im vollständigen Katalog vorhanden. */
.wt-page #alle-werkzeuge .wt-reihe-spur {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));
  gap:12px;
}
.wt-page #alle-werkzeuge > .wt-section-heading { display:block; }
.wt-page #alle-werkzeuge > .wt-section-heading .wt-catalog-lead {
  max-width:65ch; margin-top:8px; text-align:left;
}
.wt-page #alle-werkzeuge .wt-catalog-link {
  box-sizing:border-box; grid-template-columns:32px minmax(0,1fr);
  gap:8px; padding:10px; border-radius:12px; height:100%; align-content:start;
  background:color-mix(in srgb,var(--bereich,var(--st-akzent)) 6%,var(--st-karte));
}
.wt-page #alle-werkzeuge .wt-catalog-link > .wt-app-icon { width:32px; height:32px; }
.wt-page #alle-werkzeuge .wt-catalog-link .wt-catalog-name strong { font-size:.82rem; line-height:1.3; }
.wt-page #alle-werkzeuge .wt-catalog-link .wt-catalog-name small { font-size:.72rem; line-height:1.4; }
.wt-page #alle-werkzeuge .wt-browser-topbar { display:none; }
.wt-page #alle-werkzeuge .wt-browser-frame { border-radius:6px; }
.wt-page #alle-werkzeuge .wt-catalog-item > .wt-details {
  top:10px; left:10px; right:auto; bottom:auto; background:var(--st-karte);
}
.wt-page #alle-werkzeuge .wt-catalog-link > .wt-browser-frame img {
  display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:contain;
}
.wt-page .wt-kat-karte { background:color-mix(in srgb,var(--bereich,var(--st-akzent)) 7%,var(--st-karte)); }
html[data-theme="dark"] .wt-page #alle-werkzeuge .wt-catalog-link,
html[data-theme="dark"] .wt-page .wt-kat-karte {
  background:color-mix(in srgb,var(--bereich,var(--st-akzent)) 12%,var(--st-karte));
}
/* Eine begrenzte, deckende Filterzeile verhindert, dass die Blur-Ebene
   beim Scrollen oder Filtern über die Karten hinaus gemalt wird. */
.wt-page .wt-store-main > .wt-chip-scroller {
  box-sizing:border-box; height:64px; min-height:0; max-height:64px;
  padding-block:8px; align-self:start; contain:paint; isolation:isolate;
  background:var(--st-grund); backdrop-filter:none; -webkit-backdrop-filter:none;
}
.wt-hover-preview {
  position:fixed; z-index:50; inset:auto; margin:0; box-sizing:border-box; padding:12px;
  max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px);
  overflow:hidden; border:1px solid var(--st-karte-rand); border-radius:12px;
  background:var(--st-karte); color:var(--st-text); box-shadow:var(--st-schatten-hoch);
}
.wt-hover-preview[hidden] { display:none; }
.wt-hover-preview strong { display:block; margin-bottom:10px; font-size:.9rem; line-height:1.3; }
.wt-hover-preview img { display:block; width:100%; height:auto; max-height:calc(100dvh - 90px); object-fit:contain; border-radius:6px; }
@media (max-width:47.99em) {
  .wt-page #alle-werkzeuge .wt-reihe-spur { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .wt-page #alle-werkzeuge .wt-catalog-link { gap:8px; padding:8px; }
  .wt-page #alle-werkzeuge .wt-catalog-link .wt-kachel-marken { margin-top:0; }
}
.wt-page .wt-catalog-name :is(strong,small),.wt-page .wt-name-ende { min-width:0; white-space:normal; overflow-wrap:anywhere; }
@media (max-width:47.99em) {
  .wt-page .wt-reihe-spur:not(.wt-reihe-verlauf .wt-reihe-spur) { grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
}

/* Entdecken: sichtbare Werkzeugauswahl aus denselben Katalog-IDs. */
.wt-store-kpis { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; width:fit-content; max-width:100%; margin:16px auto 28px; padding:12px 16px; border:1px solid var(--st-karte-rand); border-radius:8px; background:var(--st-karte); color:var(--st-text-2); font-size:.85rem; }
.wt-store-kpis strong { color:var(--st-text); }
.wt-topcharts .wt-section-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.wt-section-link { color:var(--st-akzent); font-size:.875rem; font-weight:600; text-underline-offset:4px; }
.wt-topcharts-grid,.wt-shelf-grid { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.wt-topcharts-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.wt-topcharts-grid > li,.wt-shelf-grid > li { min-width:0; }
.wt-chart-item { display:flex; align-items:center; gap:10px; padding:12px; min-height:88px; height:100%; box-sizing:border-box; border:1px solid var(--st-karte-rand); border-radius:10px; background:var(--st-karte); color:var(--st-text); text-decoration:none; }
.wt-chart-rank { flex:0 0 16px; color:var(--st-text-2); font-weight:700; font-variant-numeric:tabular-nums; }
.wt-chart-item :is(.wt-app-icon,.wt-entry-icon) { flex:none; width:40px; height:40px; }
.wt-chart-copy { display:grid; gap:4px; min-width:0; }
.wt-chart-copy strong { font-size:.875rem; line-height:1.35; overflow-wrap:anywhere; }
.wt-chart-copy small { font-size:.75rem; line-height:1.4; color:var(--st-text-2); overflow-wrap:anywhere; }
.wt-chart-cta { flex:none; white-space:nowrap; margin-inline-start:auto; font-size:.75rem; color:var(--st-akzent); }
.wt-shelf-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.wt-store-card { display:flex; flex-direction:column; height:100%; box-sizing:border-box; gap:12px; padding:12px; border:1px solid var(--st-karte-rand); border-radius:12px; background:var(--st-karte); color:var(--st-text); text-decoration:none; box-shadow:0 4px 20px -2px rgba(15,23,42,.05); }
.wt-store-card .wt-browser-frame { display:block; width:100%; box-sizing:border-box; }
.wt-store-card .wt-browser-frame img { display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; object-position:top; }
.wt-shelf-caption { display:flex; align-items:flex-start; gap:10px; }
.wt-shelf-caption :is(.wt-app-icon,.wt-entry-icon) { flex:none; width:36px; height:36px; }
.wt-shelf-caption > span:last-child { display:grid; gap:4px; min-width:0; }
.wt-shelf-caption strong { font-size:.875rem; line-height:1.4; overflow-wrap:anywhere; }
.wt-shelf-caption small { font-size:.75rem; line-height:1.5; color:var(--st-text-2); overflow-wrap:anywhere; }
.wt-shelf-cta { align-self:flex-start; margin-block-start:auto; padding:8px 0; font-size:.8125rem; font-weight:600; color:var(--st-akzent); }
.wt-page :is(.wt-chart-item,.wt-store-card):focus-visible { outline:3px solid var(--st-fokus); outline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
 .wt-chart-item:hover,.wt-store-card:hover { border-color:var(--st-akzent); background:var(--st-chip-hover); }
}
/* Keine neuen Wischflächen: Reihen fließen bei wenig Platz untereinander. */
@media (max-width:75em) {
 .wt-shelf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .wt-topcharts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:40em) {
 .wt-topcharts-grid { grid-template-columns:minmax(0,1fr); }
 .wt-chart-item { min-height:76px; }
 .wt-shelf-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr)); gap:10px; }
 .wt-store-card { padding:10px; }
 .wt-shelf-caption { flex-wrap:wrap; }
 .wt-store-kpis { justify-content:flex-start; }
}

.wt-topcharts .wt-section-heading .wt-catalog-lead { margin-inline:0; text-align:left; }
.wt-shelf { min-width:0; }
.wt-store-card .wt-browser-bar { padding:6px 8px; }
.wt-store-card .wt-browser-address { font-size:.75rem; }

/* Aufnahmen erklären den tatsächlichen Beispielzustand. */
.wt-detail-bildtext { margin:0; padding:10px 14px; color:var(--st-text-2); font-size:.75rem; line-height:1.5; border-top:1px solid var(--st-karte-rand); }

.wt-bildhinweis { margin:8px 0 0; color:var(--st-text-2); font-size:.7rem; line-height:1.4; }