/* KUKANILEA Storefront. Local to /webtools. */
.wt-page {
  --store-navy:#183b4d;
  --store-teal:#116b70;
  --store-line:var(--line);
  --store-muted:var(--muted,#576b76);
  --store-surface:var(--paper);
  background:var(--paper);
  color:var(--ink);
}
.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. */
.wt-page :where(.wt-hero,.wt-section,.wt-reihe) {
  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) :focus-visible {
  outline:3px solid #10a9a0;
  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:#218b8b; box-shadow:0 0 0 4px rgba(16,153,145,.16),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 #218b8b; 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; }
.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:999px; background:#fff;
  color:#27545c; font-size:.84rem; font-weight:650; white-space:nowrap;
}
.wt-quick-links a:hover { border-color:#4f9a93; 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 #9dc2bd; border-radius:15px;
  background:color-mix(in srgb,var(--white,#fff) 85%,#a9d4c9);
}
.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 #4f9a93; border-radius:999px;
  color:#0b5d62; 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:1024px) {
  .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:#fff; 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:#cbd5e1;
  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 rgba(255,255,255,.2); border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff;
  font:inherit; font-size:1.5rem; line-height:1; cursor:pointer;
}
.wt-carousel-pfeil:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34); }
/* 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:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.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 rgba(255,255,255,.13); border-radius:22px;
  background:rgba(255,255,255,.06);
}
.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:#7dd3fc; }
.wt-schau-plakette {
  flex:none; padding:4px 10px; border:1px solid rgba(110,231,183,.38); border-radius:999px;
  background:rgba(16,185,129,.14); color:#6ee7b7; letter-spacing:.02em; text-transform:none;
}
/* Die Szene bringt Fenster, Lupe und Lichtfleck selbst mit
   (build_webtools_hero_shots.mjs) -- hier nur der Ausschnitt. */
.wt-schau-bild { overflow:hidden; border-radius:14px; background:#0f172a;
  box-shadow:0 0 0 1px rgb(255 255 255 / .08); }
.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:#fff; 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:#cbd5e1; 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:999px; background:#fff; color:#0f172a;
  font-size:.88rem; font-weight:750; white-space:nowrap;
}
.wt-schau-los:hover { background:#e0f2fe; }
/* 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:#7dd3fc; }
.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:999px; background:rgba(255,255,255,.35);
}
.wt-carousel-punkt[aria-current="true"]::before { width:22px; background:rgba(255,255,255,.35); }
/* DER TAKT IST SICHTBAR. Laeuft der automatische Wechsel, fuellt sich der
   aktive Punkt in genau der Zeit, die bis zur naechsten Folie bleibt --
   nur per transform, und er haelt mit, wenn der Wechsel haelt. Ohne Takt
   steht er voll. */
.wt-carousel-punkt { position:relative; }
.wt-carousel-punkt[aria-current="true"]::after {
  content:""; position:absolute; left:1px; top:8px; width:22px; height:8px; border-radius:999px;
  background:#fff; transform-origin:left center;
}
[data-takt="laeuft"] .wt-carousel-punkt[aria-current="true"]::after,
[data-takt="halt"] .wt-carousel-punkt[aria-current="true"]::after {
  animation:wt-takt var(--takt, 6s) linear both;
}
[data-takt="halt"] .wt-carousel-punkt[aria-current="true"]::after { animation-play-state:paused; }
@keyframes wt-takt { from { transform:scaleX(.18); } to { transform:scaleX(1); } }
/* Die Pausentaste: zwei Balken, wenn sich etwas bewegt; ein Dreieck, wenn nicht. */
.wt-carousel-takt {
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:1px solid rgba(255,255,255,.2); border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
}
.wt-carousel-takt:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34); }
.wt-carousel-takt span { width:12px; height:14px; border-left:4px solid currentColor; border-right:4px solid currentColor; }
.wt-carousel-takt[aria-pressed="true"] span {
  width:0; height:0; margin-left:4px; border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent currentColor;
}
@media (prefers-reduced-motion:reduce) {
  .wt-carousel-track { scroll-behavior:auto; }
  .wt-carousel-punkt[aria-current="true"]::after { animation:none !important; }
}
@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;
  stroke-width:clamp(2px, 4cqmin, 2.5px);
}
.wt-app-icon .duo { fill:rgb(255 255 255 / .26); stroke:none; }
.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 (Hero immer, sonst im Dunkelmodus). */
:is(html[data-theme="dark"], .wt-hero-ambient) .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(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; }
.wt-reihe-alle { flex:none; min-height:36px; border:0; padding:0 2px; background:none; color:var(--store-teal); font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.wt-reihe-alle:hover { text-decoration:underline; text-underline-offset:4px; }
.wt-reihe-alle[hidden] { display:none; }
/* Beide Beschriftungen stehen im Markup, `aria-expanded` entscheidet.
   Damit stimmt auch der VORGELESENE Name in beiden Zustaenden -- und
   das Skript muss keinen Text mehr tauschen. */
.wt-alle-offen,.wt-reihe-alle[aria-expanded="true"] .wt-alle-zu { display:none; }
.wt-reihe-alle[aria-expanded="true"] .wt-alle-offen { display:inline; }
/* 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(9.5rem,1fr));
  grid-auto-rows:var(--kachel); gap:var(--luecke);
  margin:0; padding:6px 2px 2px; list-style:none;
}
/* Der Schnitt: genau `--zeilen` Kachelzeilen plus die Luecken dazwischen.
   Was darunter liegt, ist verdeckt -- und faellt, wenn der Fokus
   hineinwandert, ueber `focusin` auf (webtools-page.js). */
.wt-reihe:not(.is-offen) .wt-reihe-spur {
  max-height:calc(var(--zeilen) * var(--kachel) + (var(--zeilen) - 1) * var(--luecke) + 8px);
  overflow:hidden;
}
/* 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:not(.is-offen) .wt-reihe-spur > .wt-cluster-head { display:none; }
.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; }
/* Eine Clusterueberschrift ist keine Kachel und darf keine Kachelhoehe
   bekommen -- sonst reisst sie im aufgeklappten Raster ein Loch. */
.wt-reihe.is-offen .wt-reihe-spur { grid-auto-rows:auto; }
.wt-reihe.is-offen .wt-catalog-item { min-height:var(--kachel); }

/* ---------- 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.
   `<details>` kann Tastatur, Vorlesesoftware, Strg+F und Zustand ohne
   eine Zeile JavaScript -- und es funktioniert auch ohne. */
.wt-anlass-raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr)); gap:10px; }
.wt-anlass { border:1px solid var(--store-line); border-radius:14px; background:var(--white,#fff); }
.wt-anlass[open] { grid-column:1/-1; }
.wt-anlass > summary {
  display:flex; align-items:center; gap:12px; min-height:64px;
  padding:12px 16px; list-style:none; cursor:pointer; border-radius:13px;
}
.wt-anlass > summary::-webkit-details-marker { display:none; }
.wt-anlass > summary:hover { background:color-mix(in srgb,var(--paper) 90%,#a9d4c9); }
.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. `<details>` kann seinen Zustand ohne JavaScript, seinen
   Text aber nicht -- also stehen beide da, und einer ist weg. */
.wt-anlass-offen,.wt-anlass[open] .wt-anlass-zu { display:none; }
.wt-anlass[open] .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 .2s ease; }
.wt-anlass[open] .wt-anlass-pfeil { transform:rotate(90deg); }
.wt-anlass-liste {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  gap:10px; margin:0; padding:0 14px 14px; list-style:none;
}
@media(prefers-reduced-motion:reduce) { .wt-anlass-pfeil { 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(--store-line); border-radius:14px; background:var(--white,#fff); color:var(--ink); }
/* 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(--bereich,#8fbcb6);
  background:color-mix(in srgb,var(--paper) 90%,#a9d4c9);
}
/* 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:999px;
  background:#e3f4ec; color:#1b6243;
  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(--bereich); 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;
}
/* ---------- 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:#49717a; font:inherit; font-size:0; cursor:pointer;
  }
  .wt-search-zu:hover { background:#eef5f3; }
  /* 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; }
  .wt-reihe.is-offen .wt-catalog-item { min-height:0; }
  /* 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 #9dc2bd; border-radius:14px;
  background:color-mix(in srgb,var(--paper) 88%,#a9d4c9);
}
.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 #4f9a93; border-radius:999px;
  color:#0b5d62; 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 #0b5d62 -- dunkles
   Petrol auf dunklem Grund (2026-09-28). */
html[data-theme="dark"] .wt-hinweis { border-color:#4f7f7a; }
html[data-theme="dark"] .wt-hinweis-cta { border-color:#6fb3ab; color:var(--petrol); }
html[data-theme="dark"] .wt-hinweis-cta:hover { background:var(--wash); }
.wt-produkt {
  padding:clamp(24px,3vw,38px) clamp(20px,3vw,40px);
  border-radius:18px; background:var(--store-navy); color:#eaf4f3;
}
.wt-produkt-auge { margin:0; color:#8fd0c9; font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.wt-produkt h2 { max-width:24ch; margin:8px 0 0; color:#fff; 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:#cfe4e2; font-size:.95rem; line-height:1.55; }
.wt-produkt-klein { max-width:66ch; margin:10px 0 0; color:#9fbdbd; 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:#12b1a4; color:#06262b; font-size:.9rem; font-weight:750;
}
.wt-produkt-haupt:hover { background:#3bcfc1; }
.wt-produkt-neben {
  display:inline-flex; align-items:center; min-height:46px;
  color:#bfe2de; font-size:.88rem; font-weight:650;
  text-decoration:underline; text-underline-offset:5px;
}
.wt-produkt-neben:hover { color:#fff; }
/* ---------- Dunkle Darstellung ---------- */
html[data-theme="dark"] .wt-page {
  --store-teal:#82cfc9;
  --store-muted:#b3c5c9;
}
html[data-theme="dark"] .wt-page .wt-hero { background:linear-gradient(125deg,#162f38,#193f46); border-color:#30515a; }
html[data-theme="dark"] .wt-hero-grid > h1 { color:#f1f7f6; }
html[data-theme="dark"] .wt-intro-lead { color:#c6d9d9; }
html[data-theme="dark"] .wt-quick-links a { color:#bfdddd; text-decoration-color:#678f8c; }
html[data-theme="dark"] .wt-search-box,html[data-theme="dark"] .wt-search-results { background:#203944; border-color:#4b7377; }
html[data-theme="dark"] .wt-search-box input,html[data-theme="dark"] .wt-search-results a { color:#f1f7f6; }
html[data-theme="dark"] .wt-search-box input::placeholder,html[data-theme="dark"] .wt-result-copy small { color:#bed0d2; }
html[data-theme="dark"] .wt-search-results a:hover { background:#2e5258; }
html[data-theme="dark"] .wt-quick-links a { background:#22404a; border-color:#4b7377; color:#d6e9e7; }
html[data-theme="dark"] .wt-quick-links a:hover { background:#2b5058; border-color:#6fada6; color:#eaf6f4; }
html[data-theme="dark"] :where(.wt-catalog-link,.wt-anlass) { background:#1e3842; border-color:#3d616a; }
html[data-theme="dark"] .wt-catalog-link:hover { border-color:var(--bereich,#5f9c96); background:#25444f; }
html[data-theme="dark"] .wt-kachel-plakette { background:#1d4536; color:#a7f3d0; }
html[data-theme="dark"] :is(.wt-kachel-land,.wt-result-land) { background:#2a3a43; color:#cfdbe2; }
html[data-theme="dark"] .wt-anlass > summary:hover { background:#25444f; }

/* ---------- Vorschau ----------
   Erscheint bei Hover ODER Tastaturfokus, bleibt stehen, bis der
   Mensch sie verlaesst, und schliesst mit Escape -- der Vertrag aus
   WCAG 1.4.13. Das Bild wird erst hier geladen; 195 Aufnahmen beim
   Seitenaufbau waeren mehrere Megabyte vor dem ersten Blick. */
.wt-preview {
  position:absolute; z-index:80;
  display:block;
  border:1px solid var(--store-line); border-radius:16px;
  background:var(--white,#fff); cursor:pointer;
  box-shadow:0 18px 46px rgba(15,39,52,.2);
}
.wt-preview[hidden] { display:none; }
.wt-preview-media { display:block; overflow:hidden; border-radius:15px 15px 0 0; }
.wt-preview img { display:block; width:100%; height:auto; background:var(--paper); }
.wt-preview-body { display:grid; gap:9px; padding:13px 15px 14px; }
.wt-preview-heading { display:flex; align-items:center; gap:11px; min-width:0; }
.wt-preview-icon .wt-app-icon { width:38px; height:38px; }
.wt-preview-titel { display:grid; gap:1px; min-width:0; }
.wt-preview-titel strong { font-size:.97rem; font-weight:700; line-height:1.2; }
.wt-preview-titel small { color:var(--store-muted); font-size:.76rem; }
.wt-preview-text { color:#3d5a63; font-size:.83rem; line-height:1.45; }
.wt-preview-text[hidden] { display:none; }
.wt-preview-actions { display:flex; justify-content:flex-end; gap:8px; }
/* Anheften neben Starten: zweitrangig, also ohne Flaeche. */
.wt-preview-nadel {
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:42px; padding:.5rem .8rem; border:1px solid var(--store-line); border-radius:.7rem;
  background:var(--white,#fff); color:var(--ink); font:inherit; font-size:.85rem; font-weight:650; cursor:pointer;
}
.wt-preview-nadel:hover { border-color:var(--store-teal); color:var(--store-teal); }
html[data-theme="dark"] .wt-preview-nadel { background:#22404a; border-color:#4b7377; color:#e6f2f1; }
/* EIN KNOPF, KEIN TEXTLINK.
   `Starten →` in Teal neben dem uebrigen Text war die schwaechste
   Stelle der Karte -- dieselbe Schriftgroesse, dieselbe Farbe wie
   jeder andere Verweis auf der Seite, und damit kein sichtbarer
   naechster Schritt. */
.wt-preview-start {
  display:inline-flex; align-items:center; justify-content:center; gap:.2rem;
  min-height:42px; padding:.6rem 1.05rem; border-radius:.7rem;
  background:var(--store-teal); color:#fff; font-size:.85rem; font-weight:700;
}
.wt-preview:hover .wt-preview-start { background:#0d585d; }
/* Der Zeiger zur ausloesenden Kachel: ohne ihn sieht die Karte aus wie
   ein beliebiges Overlay und nicht wie die Detailansicht GENAU dieser
   Kachel. */
.wt-preview::after {
  content:""; position:absolute; left:var(--pfeil-x,50%);
  width:14px; height:14px; background:var(--white,#fff);
  transform:translateX(-50%) rotate(45deg);
}
.wt-preview[data-placement="top"]::after {
  bottom:-8px; border-right:1px solid var(--store-line); border-bottom:1px solid var(--store-line);
}
.wt-preview[data-placement="bottom"]::after {
  top:-8px; border-left:1px solid var(--store-line); border-top:1px solid var(--store-line);
}
/* Eingeklemmt: kein Zeiger. Er wuerde neben die Kachel zeigen und
   damit das Gegenteil dessen tun, wofuer er da ist. */
.wt-preview[data-placement="frei"]::after { display:none; }
/* Bottom Sheet: auf groben Zeigern liegt die Detailkarte unten fest
   statt irgendwo ueber dem Inhalt. */
.wt-preview[data-placement="sheet"] {
  position:fixed; inset:auto 0 0 0; z-index:90;
  width:auto !important; max-height:82vh; overflow-y:auto;
  border-width:1px 0 0; border-radius:18px 18px 0 0;
  box-shadow:0 -14px 40px rgba(15,39,52,.24);
}
.wt-preview[data-placement="sheet"]::after { display:none; }
.wt-preview[data-placement="sheet"] .wt-preview-media { border-radius:0; }
.wt-preview[data-placement="sheet"] .wt-preview-actions { justify-content:stretch; }
.wt-preview[data-placement="sheet"] .wt-preview-start { flex:1; }
.wt-preview[data-placement="sheet"] .wt-preview-nadel { min-height:44px; }
html[data-theme="dark"] .wt-preview { background:#1e3842; border-color:#3d616a; }
html[data-theme="dark"] .wt-preview::after { background:#1e3842; border-color:#3d616a; }
html[data-theme="dark"] .wt-preview-text { color:#c3d6da; }
@media (prefers-reduced-motion: reduce) { .wt-preview { transition:none; } }
/* ---------- Ambient-Glow im Hero (statisch, Betreiberentscheid 2026-10-01)
   Ersetzt den neutralen Ladengrund oben: dunkler Grund, drei weiche
   Farbflecken, eine Vignette darueber. Bewusst KEIN Video und keine
   Animation -- das Motion-Profil `tool` erlaubt keine dauerhafte
   Deko-Bewegung, und ein Standbild aus Verlaeufen kostet 0 Byte.
   Kein translateZ: was sich nie bewegt, braucht keine eigene Ebene.

   KEIN EIGENER STAPELKONTEXT (korrigiert am selben Abend). Die erste
   Fassung trug `isolation:isolate` am Hero und `z-index:1` am Container.
   Damit sass das Suchfeld, das auf dem Telefon als feste Flaeche ueber
   allem liegt (z-index 310), in einem Kontext UNTER dem Seitenkopf (300)
   -- der Kopf deckte das Schliesskreuz ab, und aus der Suche kam man
   nicht mehr heraus. Gefunden von webtools-ia.spec.mjs. Jetzt malt die
   Glanzschicht einfach zuerst (Baumreihenfolge), ohne z-index.
   Das `html`-Praefix schlaegt die Dunkelmodus-Regeln weiter oben; der
   Glow sieht in beiden Themes gleich aus. Polsterung bleibt die des
   Heros (auch die mobile). */
html .wt-page .wt-hero.wt-hero-ambient {
  position:relative; overflow:hidden;
  border-bottom-color:#1e293b;
  background:#0f172a; color:#fff;
}
/* overflow:clip + contain:paint statt overflow:hidden: die treibenden
   Flecken ragen ueber den Rand, und ein hidden-Container waere trotzdem
   seitwaerts scrollbar (per Fokus oder Skript) -- er meldete 429 px
   Inhalt auf 390 px Breite. clip schneidet ab, ohne Scrollcontainer zu
   sein, und paint haelt den Ueberhang aus dem Hero heraus. */
.wt-hero-bg-glow { position:absolute; inset:0; pointer-events:none; overflow:clip; contain:paint; }
/* inset 0, nicht -20 %: ueberstehende Ebenen zaehlen als waagerechter
   Ueberlauf, und auf dem Telefon darf genau zweierlei seitwaerts
   wischen. Die Unschaerfe ist Tinte, kein Ueberlauf. */
/* ---------- Hintergrund in Bewegung (Betreiberauftrag 2026-10-01)
   "Mehr Effekte mit Maustracking und Motion" -- mit denselben Leitplanken
   wie die Bewegungsschicht der Startseite (motion-system.md):
     - drei Lichtflecken treiben langsam (Zyklen 28/34/40 s, alternierend),
       animiert wird nur transform; kein Inhalt haengt daran
     - ein Lichtkegel folgt dem Zeiger, nur bei (hover:hover) und feinem
       Zeiger, gesetzt ueber --mx/--my aus webtools-page.js
     - eine leichte Gegenbewegung der Flecken zum Zeiger (--px/--py)
     - Halt bei verborgenem Tab (html[data-hidden], site.js) und mit der
       Pausentaste des Schaufensters (data-bewegung="aus", WCAG 2.2.2)
     - reduzierte Bewegung: nichts davon, der Grund steht still
   Keine Unschaerfe per filter: drei weiche Radialverlaeufe brauchen keinen
   Blur, und ein Blur ueber bewegten Ebenen wuerde jedes Bild neu rechnen. */
.wt-glow-mesh {
  position:absolute; inset:0;
  transform:translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px), 0);
}
.wt-glow-blob { position:absolute; border-radius:50%;
  animation:wt-drift-a 28s ease-in-out infinite alternate; }
.wt-glow-blob.a { left:-8%; top:-18%; width:62%; height:115%;
  background:radial-gradient(closest-side, rgb(79 70 229 / .34), transparent); }
.wt-glow-blob.b { right:-10%; top:-26%; width:58%; height:105%;
  background:radial-gradient(closest-side, rgb(14 165 233 / .26), transparent);
  animation-name:wt-drift-b; animation-duration:34s; }
.wt-glow-blob.c { left:24%; bottom:-46%; width:60%; height:110%;
  background:radial-gradient(closest-side, rgb(168 85 247 / .22), transparent);
  animation-name:wt-drift-c; animation-duration:40s; }
@keyframes wt-drift-a { to { transform:translate3d(14%, 10%, 0) scale(1.12); } }
@keyframes wt-drift-b { to { transform:translate3d(-12%, 14%, 0) scale(.92); } }
@keyframes wt-drift-c { to { transform:translate3d(10%, -16%, 0) scale(1.08); } }
.wt-hero-licht {
  position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  background:radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgb(125 211 252 / .16), transparent 62%);
}
.wt-hero-bg-glow[data-zeiger="an"] .wt-hero-licht { opacity:1; }
:is(html[data-hidden], .wt-hero[data-bewegung="aus"]) .wt-glow-blob { animation-play-state:paused; }
.wt-hero[data-bewegung="aus"] .wt-hero-licht { opacity:0; }
@media (prefers-reduced-motion:reduce) {
  .wt-glow-blob { animation:none; }
  .wt-glow-mesh { transform:none; }
  .wt-hero-licht { display:none; }
}
.wt-hero-overlay {
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 30%, rgba(15,23,42,.4) 0%, rgba(15,23,42,.92) 85%);
}
.wt-hero-ambient > .container { position:relative; }
html .wt-hero-ambient .wt-hero-grid > h1 { color:#fff; letter-spacing:-.03em; text-shadow:0 2px 10px rgba(0,0,0,.4); }
/* #cbd5e1 statt #94a3b8: dieses haette auf dem aufgehellten Grund unter
   den Farbflecken knapp unter 7:1 gelegen. */
html .wt-hero-ambient .wt-intro-lead { color:#cbd5e1; }
/* Auf dem Telefon zieht das Suchpanel beim Fokus aus dem Hero auf
   Papiergrund -- dort bliebe die helle Statusfarbe unlesbar. */
html body:not(.wt-suche-mobil) .wt-hero-ambient .wt-search-status { color:#cbd5e1; }
/* Das Suchfeld bleibt hell, auch im Dunkelmodus: es ist das eine
   Bedienelement, und sein Inhalt traegt die hellen Farben von oben. */
html .wt-hero-ambient .wt-search-box {
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 20px 40px -15px rgba(0,0,0,.5);
}
html .wt-hero-ambient .wt-search-box input { color:#153541; }
html .wt-hero-ambient .wt-search-box input::placeholder { color:#5f7379; }
html .wt-hero-ambient .wt-quick-links a {
  background:rgba(255,255,255,.08); color:#e2e8f0;
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
html .wt-hero-ambient .wt-quick-links a:hover {
  background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.3);
}
html .wt-hero-ambient .wt-quick-links a:focus-visible { outline-color:#7dd3fc; }