/* share.diffrent.love – Prototyp der internen Seiten, gestaltet nach diffrent.digital.
   Masse und Töne sind dort abgelesen (resources/css/site.css, dark.css und der Sandkasten):
   – alles in Galvji 400/700: Titel fett und grau, Abschnittstitel versal, Text schwarz auf Weiss
   – Tabellen als Text mit 2px-Kopflinie und Haarlinien, keine Kästen
   – Knöpfe und Filter als Pillen (36px, versal, 1px Laufweite), Felder mit Olive-Rand und leichter Squircle-Rundung
   – Kompetenzfarben in drei Stufen: Grundton, -dark für Schrift, -flaeche für Flächen mit weisser Schrift
   – Bewegung mit den Kurven und Dauern der Website (Feder beim Hover, Füllung ab Zeigereintritt)
   Von der Allgemein-Bibliothek kommt nur Verhalten: Rückmeldung an Ort und Stelle, Rückgängig statt
   Rückfrage, Halten bei Unwiderruflichem, Bedienung über die Tastatur.

   Farbe heisst überall dasselbe:
   Olive = aktuell · Grün = heute geöffnet · Blau = Rückmeldungen · Gold = meine · Grau = Archiv · Rot = Link tot */

@font-face{font-family:"Diffrent Sans";src:url("fonts/Galvji.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Diffrent Sans";src:url("fonts/Galvji-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Diffrent Sans";src:url("fonts/Galvji-Oblique.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}

:root{
  color-scheme: light dark;
  --grund:#ffffff;
  --tinte:#000000;
  --titel:#575757;
  --grau:#636363;
  --grau-hell:#9d9c9c;
  --flaeche:#f1f1f1;
  --linie:rgb(0 0 0 / .15);
  --olive:#929821;
  --olive-tief:#6e6b29;
  --strategie:#c9b33f;  --strategie-tief:#806d3a;  --strategie-flaeche:#877100;
  /* Signalfarbe: ein echtes Rot für «tot, Achtung, Löschen» statt des Rosé/Mauve der Kompetenzfarbe Branding.
     Die Branding-Namen bleiben, weil die Knopf-Regeln der Website (dd-button.css) darauf zugreifen. */
  --rot:#d6453d;        --rot-tief:#a82a22;      --rot-flaeche:#c0332b;
  --branding:var(--rot); --branding-tief:var(--rot-tief); --branding-flaeche:var(--rot-flaeche);
  --multimedia:#85a0b1; --multimedia-tief:#354462; --multimedia-flaeche:#5c7686;
  --marketing:#6a9477;  --marketing-tief:#30525b;  --marketing-flaeche:#547d61;
  --signal:var(--rot-tief);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-press:cubic-bezier(.4,0,.2,1);
  --ease-spring:linear(0,0.0315,0.0682,0.1092,0.1538,0.2013,0.251,0.3022,0.3543,0.4069,0.4594,0.5114,0.5625,0.6124,0.6607,0.7072,0.7516,0.7939,0.8337,0.8712,0.906,0.9383,0.968,0.9951,1.0195,1.0414,1.0609,1.0779,1.0926,1.1051,1.1155,1.1239,1.1304,1.1352,1.1383,1.14,1.1403,1.1394,1.1374,1.1344,1.1306,1.126,1.1208,1.1151,1.109,1.1025,1.0958,1.0889,1.082,1.075,1.068,1.0612,1.0545,1.048,1.0417,1.0357,1.0299,1.0245,1.0193,1.0146,1.0101,1.006,1.0023,0.9989,0.9958,0.9931,0.9906,0.9886,0.9868,0.9853,0.984,0.9831,0.9823,0.9818,0.9815,0.9814,0.9814,0.9816,0.982,0.9824,0.983,0.9836,0.9844,0.9851,0.986,0.9869,0.9878,0.9887,0.9896,0.9905,1);
  --dur-press:120ms;
  --dur-quick:320ms;
  --dur-base:400ms;
  --dur-fill:600ms;
  --dur-spring:548ms;
  /* Weiches Auslaufen ohne Überschwingen (Quint): für Dinge, die in die Breite wachsen und sanft zur Ruhe kommen. */
  --ease-weich:cubic-bezier(.22,1,.36,1);
  /* Namen wie in site.css – die herausgezogenen Knopf-Regeln (dd-button.css) greifen darauf zu. */
  --color-white:#ffffff; --color-black:#000000;
  --color-primary:#929821; --color-primary-dark:#6e6b29;
  --color-gray:#9d9c9c; --color-gray-dark:#636363; --color-gray-darker:#474747;
  --color-strategie:#c9b33f; --color-strategie-dark:#806d3a;
  --color-branding:var(--rot);  --color-branding-dark:var(--rot-tief);
  --color-multimedia:#85a0b1; --color-multimedia-dark:#354462;
  --color-marketing:#6a9477; --color-marketing-dark:#30525b;
  --dur-glow:350ms; --dur-charge:560ms; --dur-ripple:620ms;
  --rand:clamp(1.25rem,5vw,5rem);
  --rund:.75rem;            /* leichte Rundung für Felder und Eingaben */
  --rund-gross:1.25rem;     /* Blätter */
  --ecke:superellipse(1.2); /* Squircle statt Kreisbogen, siehe «Ecken» */
  --sans:"Diffrent Sans","Galvji",ui-sans-serif,system-ui,sans-serif;   /* "Galvji": auf dem Mac vorinstalliert, greift, wo die Schriftdatei nicht mitkommt (Paket für share) */
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* Spalten der Liste: Punkt, Kunde, Titel, die eingeschalteten Angaben, Aktionen. app.js setzt den Wert
     passend zu den gewählten Angaben auf die Liste – das hier ist nur der Ausgangswert mit allen Angaben. */
  --sp:2.5rem minmax(12rem,.5fr) minmax(0,1fr) minmax(3rem,.07fr) minmax(2.5rem,.1fr) minmax(3.75rem,.14fr) minmax(6.75rem,.22fr) minmax(4.25rem,.16fr) 28rem;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --grund:#1b1b19;
  --tinte:#ebeae4;
  --titel:#dcdad2;
  --grau:#c4c2ba;
  --grau-hell:#7b7973;
  --flaeche:#2a2a27;
  --linie:rgb(235 234 228 / .16);
  --olive-tief:#b9be4d;
  --rot:#e8564b;
  --signal:#f4877e;
} }
:root[data-theme="dark"]{
  --grund:#1b1b19;
  --tinte:#ebeae4;
  --titel:#dcdad2;
  --grau:#c4c2ba;
  --grau-hell:#7b7973;
  --flaeche:#2a2a27;
  --linie:rgb(235 234 228 / .16);
  --olive-tief:#b9be4d;
  --rot:#e8564b;
  --signal:#f4877e;
}

/* Farbrollen: --f Grundton (Rand, Punkt), --f-text Schrift auf dem Grund, --f-voll Fläche mit weisser Schrift. */
[data-farbe="aktuell"]{--f:var(--olive);--f-text:var(--olive);--f-voll:var(--olive);}
[data-farbe="heute"]{--f:var(--marketing);--f-text:var(--marketing-tief);--f-voll:var(--marketing-flaeche);}
[data-farbe="rueck"]{--f:var(--multimedia);--f-text:var(--multimedia-tief);--f-voll:var(--multimedia-flaeche);}
[data-farbe="meine"]{--f:var(--strategie);--f-text:var(--strategie-tief);--f-voll:var(--strategie-flaeche);}
[data-farbe="ruhe"]{--f:var(--grau-hell);--f-text:var(--grau);--f-voll:#636363;}
[data-farbe="tot"]{--f:var(--branding);--f-text:var(--branding-tief);--f-voll:var(--branding-flaeche);}
[data-farbe="plan"]{--f:var(--olive-tief);--f-text:var(--olive-tief);--f-voll:#6e6b29;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) [data-farbe]:not([data-farbe="aktuell"]){--f-text:var(--f);} }
:root[data-theme="dark"] [data-farbe]:not([data-farbe="aktuell"]){--f-text:var(--f);}

*,*::before,*::after{box-sizing:border-box;}
/* scroll-padding-top: was per Tab ins Bild rollt, landet unter Leiste und Spaltenkopf statt dahinter (--leiste setzt app.js). */
html{scrollbar-gutter:stable;scroll-padding-top:calc(var(--leiste,0px) + 3.75rem);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
/* Liegt ein Blatt offen, scrollt die Seite dahinter nicht mit. Der Platz der Scrollleiste bleibt reserviert. */
html:has(dialog[open]){overflow:hidden;}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--sans);font-size:1rem;line-height:1.5;}
button,input,select{font:inherit;color:inherit;}
h1,h2{font-family:var(--sans);font-weight:800;color:var(--titel);letter-spacing:-.01em;}
[hidden]{display:none !important;}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px;}
mark{background:color-mix(in srgb,var(--olive) 26%,transparent);color:inherit;}
kbd{
  display:inline-grid;place-items:center;min-width:1.375rem;height:1.375rem;padding:0 .375rem;border:1px solid var(--linie);border-radius:.25rem;
  font-family:var(--mono);font-size:.6875rem;color:var(--grau);
}
svg.ik{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Bilder im Dunkeln leicht abdunkeln und entsättigen, sonst leuchten sie aus der Seite. */
:root.dark img:not(.bild){filter:brightness(.85) saturate(.8);}   /* Profilbilder bleiben unverändert (Pascal 22.10.2026) */

/* ================================================================== Ecken
   Leichte Squircles statt Kreisbogen-Ecken: corner-shape (Chromium 139+). superellipse(1) wäre der Kreisbogen,
   2 der volle Squircle. Andere Browser zeigen die normale Rundung. Die Knöpfe der Website bringen ihre eigene
   Angabe mit (1.1), eigene Kapseln übernehmen sie. Punkte, Profilbilder und der Kippschalter bleiben rund. */
.angaben input,.b-feld,.dialog,.zeile{corner-shape:var(--ecke);}
.hinweis,.halten{corner-shape:superellipse(1.1);}

/* ================================================================ Knöpfe
   Die Knöpfe selbst kommen 1:1 von der Website (dd-button.css + dd-button.js):
   .dd-button = gefüllte Pille mit Icon, --neg = weisse Pille auf Flächen, .dd-filter-btn = Kontur-Pille.
   Hier steht nur, was die Website so nicht hat. */
.dd-button,.dd-filter-btn{text-decoration:none;-webkit-user-select:none;user-select:none;}
.dd-filter-btn{flex:none;white-space:nowrap;}
/* Alle Pillen etwas höher, mehr Luft um den Text: sichtbar 40 px statt 36. Die Kontur der Website-Pille liegt 2 px
   innerhalb ihres Kastens, darum hat sie einen 44-px-Kasten; der gefüllte Knopf wird über sein Padding 40 px hoch. */
.dd-filter-btn{height:2.75rem;}
/* Wort, Icon und Anzahl einer Pille stehen auf einer Mittellinie (Flex statt Grundlinien-Ausrichtung). */
.dd-filter-btn__text,.dd-button__text{display:inline-flex;align-items:center;}
/* Strichstärke: Konturen sind überall 2 px (Pillen, Suchfeld, Eingaben), und die Piktogramme (Phosphor bold,
   24/256 der Kantenlänge) sind 20 px gross – das ergibt rund 1,9 px, wie die Stege der fetten 14-px-Schrift. */
.dd-button--md{--btn-py:.5rem;}
.dd-button:focus-visible,.dd-filter-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;}
.dd-button--neg:focus-visible{outline-color:var(--tinte);}
/* Die Anzahl sitzt wie ein Benachrichtigungs-Abzeichen oben rechts an der Pille, ausserhalb ihrer Fläche (die Pille
   schneidet ihren Inhalt ab, darum steht das Abzeichen daneben im gemeinsamen .pille). Farbe = Farbe der Ansicht, ein
   Ring in der Farbe des Grundes löst es von der Kontur. Bei 0 entfällt es. */
.pille{position:relative;display:inline-flex;flex:none;}
/* Die Pillen der Ansichten bleiben beim Scrollen ausgeklappt (Icon, Wort, Abzeichen). Nur wo die fünf mit Wort nicht
   mehr in eine Zeile passen (unter 980 px), stehen sie als Icon mit Abzeichen: Kreis statt Kapsel, kein Umbruch.
   Den Namen trägt dann der Tooltip (title) und für Screenreader das aria-label, beide setzt app.js. */
.f-text{white-space:nowrap;}
@media (max-width: 980px){
  .pillen{flex-wrap:nowrap;}
  .pillen .f-text{display:inline-block;max-width:0;opacity:0;overflow:hidden;transition:max-width 340ms var(--ease-weich),opacity 180ms ease;}
  .pillen .f-ikon--vor{margin-right:0;transition:margin 340ms var(--ease-weich);}
  .pillen .dd-filter-btn{width:auto !important;min-width:2.75rem;padding-inline:.625rem;transition:padding 340ms var(--ease-weich);}
  /* Die Füllung der Website wächst als Blase von der Stelle, an der der Zeiger eintritt. Weil die Pille hier dabei ihre
     Breite ändert, füllt sie sich stattdessen schlicht mit der Farbe und bläht sich nicht auf. */
  .pillen .dd-filter-btn .dd-button__bubble{display:none;}
  .pillen .dd-filter-btn::before{transition:opacity 180ms ease !important;}
  .pillen .dd-filter-btn:hover{--sx:1;--sy:1;}
}
/* Beim Überfahren (und mit der Tastatur) klappt die Icon-Pille auf und zeigt ihr Wort; die Nachbarn rücken zur Seite. */
@media (max-width: 980px) and (hover:hover){
  .pillen .pille:hover .f-text,.pillen .pille:focus-within .f-text{max-width:14rem;opacity:1;}
  .pillen .pille:hover .f-ikon--vor,.pillen .pille:focus-within .f-ikon--vor{margin-right:.5rem;}
  .pillen .pille:hover .dd-filter-btn,.pillen .pille:focus-within .dd-filter-btn{padding-inline:1.25rem;}
}
.zaehler{
  position:absolute;top:-.4375rem;right:-.3125rem;z-index:3;display:grid;place-items:center;min-width:1.375rem;height:1.375rem;padding:0 .3125rem;
  border-radius:999px;background:var(--f-voll,var(--color-primary));color:#fff;font-size:.6875rem;font-weight:700;line-height:1;letter-spacing:0;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--grund);pointer-events:none;
}
/* Sechste Filterfarbe für den Redaktionsplan: das dunkle Olivgrün der Post-Karten im Kalender. */
.dd-filter-btn--plan{--dd-rand:var(--olive-tief);--dd-fg:var(--olive-tief);--dd-bubble:#6e6b29;} /* Füllung fest dunkel: weisse Schrift bleibt auch im Dunkelmodus lesbar */
/* Fünfte Filterfarbe für das Archiv – gebaut wie die vier Kompetenz-Varianten. */
.dd-filter-btn--grau{--dd-rand:var(--color-gray);--dd-fg:var(--color-gray-dark);--dd-bubble:var(--color-gray-dark);}
/* Die Branding-Varianten der Website füllen beim Überfahren mit einem festen Mauve – hier mit dem dunklen Rot. */
.dd-button--branding,.dd-button--neg-branding{--dd-bubble:var(--rot-tief);}
:root.dark .dd-filter-btn--grau{--dd-fg:var(--color-gray);}
/* Icon im Pfeil-Feld: Hausicon arrow_outward 16px, Phosphor 20px, arrow_right 24px (wie im Button-Baustein). */
.dd-button__arrow svg{display:block;width:1.25rem;height:1.25rem;}
.dd-button__arrow.a16 svg{width:.875rem;height:.875rem;}
.dd-button__arrow.a24 svg{width:1.5rem;height:1.5rem;}
/* Der Abschuss des Icons beim Klick gehört zu Knöpfen, die wegführen. Bleibt man auf der Seite, kommt es zurück. */
.dd-button.bleibt.is-firing .dd-button__arrow{transform:none;opacity:1;}
/* Kopieren bestätigt im Knopf: der Text wechselt an Ort und Stelle (die Breite hält dd-button.js fest). */
.k-ruhe,.k-ok{display:inline-flex;align-items:center;justify-content:center;transition:opacity 200ms ease,transform var(--dur-quick) var(--ease-out);}
.k-ok{position:absolute;left:0;right:0;text-align:center;opacity:0;transform:translateY(.5rem);}
[data-status="ok"] .k-ruhe{opacity:0;transform:translateY(-.5rem);}
[data-status="ok"] .k-ok{opacity:1;transform:none;}
/* Reines Icon ohne Fläche – wie der Burger der Website: schwarz, unter dem Zeiger grün und leicht grösser. */
.symbol{
  display:inline-grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:50%;background:none;color:var(--tinte);
  cursor:pointer;text-decoration:none;transition:color var(--dur-base) var(--ease-out),scale var(--dur-quick) var(--ease-out);
}
.symbol svg{display:block;width:1.5rem;height:1.5rem;}
.symbol span{display:grid;}
@media (hover:hover){ .symbol:hover{color:var(--color-primary);scale:1.14;transition:color var(--dur-base) var(--ease-out),scale var(--dur-spring) var(--ease-spring);} }
.symbol:active{scale:.9;transition:scale var(--dur-press) var(--ease-press);}
.symbol--klein{width:2rem;height:2rem;color:var(--grau);}
.symbol--klein svg{width:1.25rem;height:1.25rem;}

/* Textlink wie .dd-inline-link: versal, der grüne Strich fährt aus der Mitte auf. */
.link{
  position:relative;display:inline-flex;align-items:center;gap:.375rem;padding:.25rem 0;border:0;background:none;color:var(--tinte);
  font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.0625rem;text-decoration:none;cursor:pointer;
}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:var(--olive);
  transform:scaleX(0);transition:transform var(--dur-quick) var(--ease-out);
}
.link:hover::after,.link[aria-pressed="true"]::after{transform:scaleX(1);transition:transform var(--dur-spring) var(--ease-spring);}

/* ================================================================== Kopf */
.buehne{position:relative;isolation:isolate;}
/* Der Verlauf läuft vollständig aus, bevor die Bühne endet: ragt das Wölkli darunter, schneidet die Leiste mit
   ihrem Hintergrund eine harte Kante hinein. */
.woelkli{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 22%,transparent 100%);mask-image:linear-gradient(#000 22%,transparent 100%);}
.woelkli i{position:absolute;border-radius:50%;filter:blur(72px);}
.woelkli i:nth-child(1){right:2%;top:-38%;width:min(48vw,640px);aspect-ratio:1;background:var(--f,var(--olive));opacity:.34;transition:background-color 900ms var(--ease-out);}
.woelkli i:nth-child(2){right:34%;top:6%;width:min(24vw,320px);aspect-ratio:1;background:var(--strategie);opacity:.16;}
/* Helles Korn wie die rauschen-Flächen der Website: der Grund, mit Rauschen ausgestanzt, liegt über der Farbe. */
.woelkli::after{
  content:"";position:absolute;inset:0;background:var(--grund);opacity:.55;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -0.55'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>") 0 0 / 240px 240px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -0.55'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>") 0 0 / 240px 240px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .woelkli i:nth-child(1){opacity:.24;} :root:not([data-theme="light"]) .woelkli i:nth-child(2){opacity:.1;} }
:root[data-theme="dark"] .woelkli i:nth-child(1){opacity:.24;}
:root[data-theme="dark"] .woelkli i:nth-child(2){opacity:.1;}
/* Social-Media-Seiten (Posts, Posten): leichte Wolken in den Plattformfarben, LinkedIn-Blau und der Instagram-Verlauf
   (Gelb, Orange, Pink, Violett) statt der Farbe der Ansicht. */
.woelkli--sm i:nth-child(1){right:-4%;top:-46%;width:min(46vw,620px);background:#0a66c2;opacity:.24;}
.woelkli--sm i:nth-child(2){right:30%;top:-30%;width:min(26vw,360px);background:#d62976;opacity:.16;}
.woelkli--sm i:nth-child(3){right:20%;top:18%;width:min(18vw,250px);aspect-ratio:1;background:#fa7e1e;opacity:.15;}
.woelkli--sm i:nth-child(4){right:48%;top:2%;width:min(16vw,220px);aspect-ratio:1;background:#962fbf;opacity:.14;}
.woelkli--sm i:nth-child(5){right:12%;top:30%;width:min(12vw,170px);aspect-ratio:1;background:#feda75;opacity:.2;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .woelkli--sm i{opacity:.12 !important;} }
:root[data-theme="dark"] .woelkli--sm i{opacity:.12 !important;}

.kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:clamp(1.5rem,3.3vw,3rem) var(--rand) 0;}
.logo{display:block;flex:none;width:clamp(3.25rem,5.7vw,5.125rem);color:var(--olive);border-radius:50%;}
.logo svg{display:block;width:100%;height:auto;}
.konto{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem 1.5rem;padding-top:.375rem;font-size:.875rem;color:var(--grau);}
.thema .ik-sonne{display:none;}
:root.dark .thema .ik-sonne{display:grid;}
:root.dark .thema .ik-mond{display:none;}

.auftakt{padding:clamp(2rem,4.6vw,4rem) var(--rand) clamp(2rem,3.4vw,3rem);}
/* Platzhalter der grossen Überschrift: er hält im Seitenfluss den Platz. Das echte Element (h1 in der klebenden Leiste)
   liegt in Ruhe genau darüber und wird beim Scrollen verkleinert und in die Leiste geschoben – dasselbe Element,
   nur transformiert und skaliert (siehe .leisten-titel). */
.titel-platz{margin:0;font-family:var(--sans);font-size:clamp(2.25rem,5vw,4rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--titel);}
/* Unterseiten (Rückmeldungen): dort steht die Überschrift als h1 direkt im Auftakt. */
.auftakt h1{margin:0;font-size:clamp(2.25rem,5vw,4rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;}
.auftakt p{margin:.875rem 0 0;max-width:62ch;text-wrap:pretty;font-size:clamp(1.0625rem,1.5vw,1.25rem);letter-spacing:.0125em;}
.krume svg{width:.875rem;height:.875rem;}
.krume{display:inline-flex;align-items:center;gap:.375rem;margin:0 0 1.25rem;font-size:.875rem;letter-spacing:.031rem;color:var(--grau);text-decoration:none;}
.krume:hover{color:var(--olive-tief);}

/* ============================================================ Leiste oben */
/* Die Filter-Pillen sitzen in der klebenden Leiste über der Suche – beides bleibt beim Scrollen oben stehen. */
.pillen{display:flex;flex-wrap:wrap;gap:.625rem;}

.waechter{height:1px;}
.werkzeug{
  position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;
  padding:3.75rem var(--rand) .875rem;background:var(--grund);border-bottom:1px solid transparent;transition:border-color 200ms ease;
}
/* Die Überschrift ist EIN Element: in Ruhe gross an ihrem Platz über dem Untertitel (translate und scale heben das
   kleine Element dorthin, app.js misst --titel-d, --titel-s und --titel-y0), beim Scrollen schrumpft sie scrollgesteuert
   auf ihre kleine Grösse und rückt dabei in die Leiste über die Pillen. Wo es keine Scroll-Zeitleisten gibt oder Bewegung
   reduziert ist, bleibt die grosse Überschrift im Fluss und der kleine Titel blendet in der Leiste ein. */
.leisten-titel{
  position:absolute;top:1.125rem;left:var(--rand);margin:0;font-size:1.5rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--titel);
  white-space:nowrap;transform-origin:0 0;opacity:0;translate:0 .625rem;pointer-events:none;transition:opacity 220ms ease,translate 320ms var(--ease-weich);
}
.werkzeug.klebt .leisten-titel{opacity:1;translate:0 0;}
@media (prefers-reduced-motion: no-preference){ @supports (animation-timeline:scroll()){
  .titel-platz{visibility:hidden;}
  .leisten-titel{
    opacity:1;pointer-events:auto;transition:none;
    translate:0 calc(var(--titel-d,0px) * -1);scale:var(--titel-s,2.5);
    animation:titel-klein linear both;animation-timeline:scroll(root block);animation-range:0px var(--titel-y0,320px);
  }
  .werkzeug.klebt .leisten-titel{translate:0 0;}
  @keyframes titel-klein{from{translate:0 calc(var(--titel-d,0px) * -1);scale:var(--titel-s,2.5);}to{translate:0 0;scale:1;}}
  /* Der Untertitel blendet früh aus, damit die langsamer wandernde Überschrift nicht in ihn hineinläuft. */
  .auftakt--wandert p{animation:untertitel-weg linear both;animation-timeline:scroll(root block);animation-range:0px 140px;}
  @keyframes untertitel-weg{to{opacity:0;}}
} }
/* Keine Trennlinie unter der klebenden Leiste und dem Spaltenkopf: die getönten Zeilen laufen unter dem Grund aus. */
.feld{
  display:flex;align-items:center;gap:.625rem;min-height:2.5rem;padding:0 .375rem 0 1rem;border:2px solid color-mix(in srgb,var(--olive) 40%,transparent);border-radius:999px;corner-shape:superellipse(1.1);background:var(--grund);
  transition:box-shadow 160ms ease;
}
/* Fokus: der zweite Ring baut sich vom Klickpunkt auf (.k-ring, unten), statt sofort dazustehen. */
/* Suche mit Mikroanimationen (Verhalten aus den Mustern «Suchfeld» und «Kombi-Suche» der Allgemein-Bibliothek):
   das Feld federt beim Fokus in die Breite, die Lupe nickt, der Platzhalter tippt Beispiele vor,
   die Trefferzahl rollt mit und der Leeren-Knopf dreht sich herein. Ohne Treffer schüttelt die Lupe den Kopf. */
/* Das Feld wächst weich in die Breite, ohne Überschwingen – die Feder der Website war hier zu stark und endete ruckartig. */
.suche{flex:0 1 18rem;transition:flex-basis 460ms var(--ease-weich),box-shadow 160ms ease;}
.suche:focus-within,.suche.gefuellt{flex-basis:28rem;}
.suche-lupe{display:grid;color:var(--olive);}
.suche-lupe svg{width:1.25rem;height:1.25rem;transform-origin:35% 35%;transition:transform 380ms var(--ease-weich);}
.suche:focus-within .suche-lupe svg{transform:rotate(-10deg) scale(1.1);}
.suche.nein .suche-lupe{animation:nein 420ms var(--ease-out);}
@keyframes nein{15%{translate:-5px 0;}35%{translate:5px 0;}55%{translate:-3px 0;}75%{translate:2px 0;}}
.suche input{flex:1;min-width:0;height:2.25rem;border:0;background:transparent;font-size:1rem;letter-spacing:.031rem;outline:none;}
.suche input::placeholder{color:var(--grau-hell);}
.suche input::-webkit-search-cancel-button{display:none;}
.suche-zahl{flex:none;font-size:.875rem;letter-spacing:.031rem;color:var(--grau);font-variant-numeric:tabular-nums;white-space:nowrap;}
.suche-zahl.keiner{color:var(--color-branding-dark);font-weight:700;}
:root.dark .suche-zahl.keiner{color:var(--color-branding);}
.suche-leeren{
  display:grid;place-items:center;flex:none;width:0;height:2rem;margin-left:-.625rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--grau);cursor:pointer;
  overflow:hidden;scale:0;rotate:-90deg;transition:scale 320ms var(--ease-weich),rotate 320ms var(--ease-weich),width 240ms var(--ease-weich),margin 240ms var(--ease-weich),color 150ms ease;
}
.suche.gefuellt .suche-leeren{width:2rem;margin-left:0;scale:1;rotate:0deg;}
.suche-leeren:hover{color:var(--tinte);}
.suche-leeren svg{display:block;width:1.25rem;height:1.25rem;}
.suche:focus-within .suche-taste,.suche.gefuellt .suche-taste{display:none;}
@media (pointer:coarse){ .suche-taste{display:none !important;} }
.filterpillen{display:flex;flex-wrap:wrap;gap:.5rem;}
/* Gesetzte Filter: das Kreuz ist ein echtes Icon, gross genug zum Treffen. Beim Überfahren oder per Tastatur
   wird die Bezeichnung durchgestrichen – der Strich fährt von links auf. */
.fp .dd-filter-btn__text{display:inline-flex;align-items:center;gap:.625rem;}
.fp-text{position:relative;}
.fp-text::after{content:"";position:absolute;left:-.125rem;right:-.125rem;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-quick) var(--ease-out);}
.fp:hover .fp-text::after,.fp:focus-visible .fp-text::after{transform:scaleX(1);}
.fp-x{display:grid;}
.fp-x svg{display:block;width:1.25rem;height:1.25rem;}
/* Kundenpille: Kundenfarbe statt Olivgrün, Schrift und Kreuz je nach Helligkeit weiss oder schwarz, Zeichen links */
.fp--kunde.is-active .dd-filter-btn__text,.fp--kunde:hover .dd-filter-btn__text{color:var(--fp-auf,#fff);}
.fp--kunde{padding-left:.25rem;}
.marke--pille{--g:1.75rem;background:transparent;box-shadow:none;}
.schalter{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2.5rem;margin-left:auto;}
/* «Angaben» öffnet das Blatt zum Ein- und Ausblenden und Filtern (Abschnitt «Angaben»). */
.angaben-knopf{gap:.5rem;anchor-name:--angaben;isolation:isolate;}
/* Statt des Strichs trägt hier eine getönte Pille den Zustand: beim Überfahren und solange das Blatt offen ist.
   Sie liegt hinter der Beschriftung und verändert die Abstände nicht. */
.angaben-knopf::after{display:none;}
.angaben-knopf::before{
  content:"";position:absolute;inset:calc(var(--p-y) * -1) calc(var(--p-x) * -1);z-index:-1;border-radius:999px;background:var(--am-flaeche);
  opacity:0;scale:.92;transition:opacity 160ms ease,scale 260ms var(--ease-weich);
}
@media (hover:hover){ .angaben-knopf:hover::before{opacity:1;scale:1;} }
.schalter:has(.angaben-menu:popover-open) .angaben-knopf::before{opacity:1;scale:1;}
.angaben-knopf:focus-visible{outline-offset:.5rem;}
.angaben-knopf span{display:grid;}
.angaben-knopf svg{display:block;width:1.25rem;height:1.25rem;}
/* Gruppierung: ein Schalter mit den beiden Wörtern darauf. Die Bahn ist leicht getönt, der olivgrüne Knopf gleitet
   unter das gewählte Wort (das dann weiss steht). Ohne Beschriftung davor – die Wörter sagen es. */
.gruppierung{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;height:2.5rem;padding:.1875rem;
  border-radius:999px;corner-shape:superellipse(1.1);background:color-mix(in srgb,var(--tinte) 8%,transparent);
}
.seg-knopf{
  position:absolute;top:.1875rem;bottom:.1875rem;left:.1875rem;width:calc((100% - .375rem) / 2);
  border-radius:999px;corner-shape:inherit;background:color-mix(in srgb,var(--tinte) 15%,transparent);transition:translate 440ms cubic-bezier(.3,1.25,.5,1);
}
.gruppierung[data-an="kunde"] .seg-knopf{translate:100% 0;}
.seg{
  position:relative;z-index:1;display:grid;place-items:center;min-width:4.5rem;padding:0 1rem;border:0;border-radius:999px;background:none;
  font:inherit;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.0625rem;color:var(--grau);cursor:pointer;
  -webkit-user-select:none;user-select:none;transition:color 200ms ease,scale 200ms var(--ease-weich);
}
.seg[aria-pressed="true"]{color:var(--tinte);}
/* Mikroanimation: das Wort gibt beim Drücken leicht nach, der Knopf drückt sich ein, streckt sich unterwegs (app.js,
   segBewegt) und das neu gewählte Wort federt kurz auf. Das Aufspringen läuft nur nach einer Bedienung, nicht beim Laden. */
.seg:active{scale:.93;}
.gruppierung:has(.seg:active) .seg-knopf,.seg-gruppe:has(.seg:active) .seg-knopf{scale:.96 .88;}
@keyframes seg-pop{0%{scale:.86;}55%{scale:1.08;}100%{scale:1;}}
.bewegt .seg[aria-pressed="true"]{animation:seg-pop 440ms cubic-bezier(.3,1.25,.5,1);}
@media (hover:hover){ .seg[aria-pressed="false"]:hover{color:var(--tinte);} }
.seg:focus-visible{outline:2px solid var(--olive);outline-offset:2px;}
/* Kippschalter wie der Chibi-Schalter im Team-Mosaik der Website, grösser: 56 × 32 px, weisser Knopf, an = Olive.
   ::before vergrössert nur die Trefferfläche. */
.kippschalter{position:relative;flex:none;width:3.5rem;height:2rem;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--tinte) 18%,transparent);cursor:pointer;transition:background-color 200ms ease;}
.kippschalter::before{content:"";position:absolute;inset:-.625rem -.25rem;}
.kippschalter:hover{background:color-mix(in srgb,var(--tinte) 30%,transparent);}
.kippschalter[aria-checked="true"]{background:var(--color-primary);}
.kippschalter[aria-checked="true"]:hover{background:var(--color-primary-dark);}
.kippschalter span{position:absolute;left:.1875rem;top:.1875rem;width:1.625rem;height:1.625rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .25);transition:transform var(--dur-spring) var(--ease-spring);}
.kippschalter[aria-checked="true"] span{transform:translateX(1.5rem);}

/* ================================================================ Angaben
   Dropdown unter dem Knopf «Angaben»: pro Angabe ein Schalter (zeigen) und eine Auswahl (filtern).
   Verhalten nach dem Muster «Konto-Menü» der Allgemein-Bibliothek: es wächst sichtbar aus dem Knopf heraus
   (Ursprung der Bewegung = Knopf), die Zeilen folgen gestaffelt, der Pfeil dreht sich. Flache getönte Fläche wie
   die Felder im Detailblatt – ohne Kontur, ohne Schatten. Verankert per CSS Anchor Positioning; wo es das nicht
   gibt, steht es in der Mitte. */
.angaben-knopf .chev{width:.875rem;height:.875rem;margin-left:-.125rem;stroke-width:2.4;transition:rotate var(--dur-quick) var(--ease-out);}
.schalter:has(.angaben-menu:popover-open) .angaben-knopf .chev{rotate:180deg;}
/* Liquid-Stil (Muster «Live-Insel», Stufe «Die Insel teilt sich wie ein Tropfen»; Glossar «Gooey-Effekt aus Metaballs»):
   Knopf, Hals, Blatt und das Blatt mit den Stufen sind Formen in EINER Ebene (.am-goo). Darüber liegt ein Weichzeichner
   mit hartem Schwellwert (Filter #goo in index.html): wo sich zwei Formen nahekommen, fliessen sie ineinander. Das Blatt
   hängt so wie ein Tropfen am Knopf, die Stufen knospen seitlich aus ihrer Zeile. Der Inhalt liegt ungefiltert darüber.
   --k-b / --k-h (Breite und Höhe des Knopfs) setzt app.js. */
.schalter{--am-flaeche:color-mix(in srgb,var(--tinte) 7%,var(--grund));--p-x:1rem;--p-y:.34375rem;--am-luft:.9375rem;--am-versatz:0px;--fly-luft:1rem;}
.goo-filter{position:absolute;width:0;height:0;}
.angaben-menu{
  width:min(28rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:.625rem 1.375rem .375rem;border:0;border-radius:var(--rund-gross);
  background:none;color:var(--tinte);overflow:visible;
  transition:display 240ms allow-discrete,overlay 240ms allow-discrete;
}
.angaben-menu::backdrop{background:transparent;}
@supports (anchor-name:--a){
  .angaben-menu{
    position-anchor:--angaben;inset:auto;top:calc(anchor(bottom) + var(--p-y) + var(--am-luft));right:calc(anchor(right) - var(--p-x) - var(--am-versatz));margin:0;
    position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;
  }
}
/* Die Ebene reicht über das Blatt hinaus (oben zum Knopf, seitlich für die Stufen): was ausserhalb läge, schnitte der Filter ab. */
.am-goo{
  --e-o:5.5rem;--e-s:21rem;--e-u:2.5rem;--hals-b:3.5rem;--fuss:.5rem;--k-voll:calc(var(--k-b,7.5rem) + var(--p-x) * 2);
  position:absolute;inset:calc(var(--e-o) * -1) calc(var(--e-s) * -1) calc(var(--e-u) * -1);z-index:0;filter:url(#goo);pointer-events:none;
}
.am-form{position:absolute;background:var(--am-flaeche);}
/* Das Blatt: wächst aus dem Hals heraus und läuft federnd in die Breite. */
.am-form--blatt{
  top:var(--e-o);left:var(--e-s);right:var(--e-s);bottom:var(--e-u);border-radius:var(--rund-gross);
  transform-origin:calc(100% - var(--hals-r,calc(var(--am-versatz) + var(--k-voll) / 2 - var(--hals-b) / 2)) - var(--hals-b) / 2) 0;scale:.22 .05;transition:scale 180ms cubic-bezier(.5,0,.8,.4);
}
/* Der Hals: verbindet Knopf und Blatt, die Kehlen links und rechts zieht der Filter. */
.am-form--hals{
  top:calc(var(--e-o) - var(--am-luft) - .5rem);height:calc(var(--am-luft) + 1.25rem);width:var(--hals-b);
  right:calc(var(--e-s) + var(--hals-r,calc(var(--am-versatz) + var(--k-voll) / 2 - var(--hals-b) / 2)));
  transform-origin:50% 0;scale:1 0;transition:scale 150ms ease-in;
}
/* Der Fuss der Pille: nur ihr unterster Streifen liegt in der Ebene, damit die Beschriftung des echten Knopfs frei bleibt. */
.am-form--knopf{
  right:calc(var(--e-s) + var(--am-versatz));width:var(--k-voll);top:calc(var(--e-o) - var(--am-luft) - var(--fuss));height:var(--fuss);
  overflow:hidden;background:none;opacity:0;transition:opacity 160ms ease;
}
.am-form--knopf::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--k-h,1.8125rem) + var(--p-y) * 2);border-radius:999px;background:var(--am-flaeche);}
.angaben-menu:popover-open .am-form--knopf{opacity:1;transition:opacity 120ms ease;}
.angaben-menu:popover-open .am-form--hals{scale:1 1;transition:scale 280ms cubic-bezier(.3,1.4,.5,1) 30ms;}
.angaben-menu:popover-open .am-form--blatt{scale:1 1;transition:scale 480ms cubic-bezier(.26,1.22,.42,1) 80ms;}
@starting-style{
  .angaben-menu:popover-open .am-form--knopf{opacity:0;}
  .angaben-menu:popover-open .am-form--hals{scale:1 0;}
  .angaben-menu:popover-open .am-form--blatt{scale:.22 .05;}
}
/* Die Stufen: der Steg schiebt sich auf der Höhe der Zeile hinaus, daran bläht sich das Blatt auf. Wechselt die Zeile,
   gleiten Steg und Blatt mit (--fly-o, --fly-h, --fly-b, --steg-o setzt app.js). */
.am-form--fly{
  top:calc(var(--e-o) + var(--fly-o,0px));left:calc(100% - var(--e-s) + var(--fly-luft));width:var(--fly-b,13.5rem);height:var(--fly-h,6rem);border-radius:var(--rund-gross);
  transform-origin:0 calc(var(--steg-o,0px) - var(--fly-o,0px) + 1.25rem);scale:0;
  transition:scale 160ms ease-in,top 300ms var(--ease-weich),height 300ms var(--ease-weich),width 300ms var(--ease-weich);
}
.am-form--steg{
  top:calc(var(--e-o) + var(--steg-o,0px) - .125rem);height:2.75rem;left:calc(100% - var(--e-s) - 1rem);width:calc(var(--fly-luft) + 2rem);
  transform-origin:0 50%;scale:0 1;transition:scale 140ms ease-in,top 300ms var(--ease-weich);
}
.angaben-menu[data-fly="1"] .am-form--fly{scale:1;transition:scale 440ms cubic-bezier(.26,1.28,.42,1) 50ms,top 300ms var(--ease-weich),height 300ms var(--ease-weich),width 300ms var(--ease-weich);}
.angaben-menu[data-fly="1"] .am-form--steg{scale:1 1;transition:scale 240ms cubic-bezier(.3,1.4,.5,1),top 300ms var(--ease-weich);}
/* Steht das Blatt nicht rechts unter dem Knopf (Handy, umgeklappt), entfällt der Hals. */
.angaben-menu.ohne-hals .am-form--knopf,.angaben-menu.ohne-hals .am-form--hals{display:none;}
.angaben-menu.ohne-hals .am-form--blatt{transform-origin:50% 0;}
.am-zeilen,.am-fuss{position:relative;z-index:1;}
.am-zeile{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,11.75rem);align-items:center;gap:1rem;min-height:3.5rem;opacity:0;translate:0 .375rem;}
.angaben-menu:popover-open .am-zeile{opacity:1;translate:0 0;transition:opacity 200ms ease-out calc(var(--n,0) * 35ms + 210ms),translate var(--dur-spring) var(--ease-spring) calc(var(--n,0) * 35ms + 210ms);}
@starting-style{ .angaben-menu:popover-open .am-zeile{opacity:0;translate:0 .375rem;} }
.am-name{font-weight:700;letter-spacing:.0125em;white-space:nowrap;cursor:pointer;}
.am-hilfe{font-size:.875rem;line-height:1.35;color:var(--grau);text-wrap:balance;}
/* Auswahlfelder ohne Kontur: weisse (im Dunkeln dunkle) Fläche auf dem getönten Blatt, wie die Pillen im Detailblatt.
   Ist ein Filter gesetzt, steht der Wert fett in Olive. Das Feld zeigt rechts ein Caret: die Auswahl öffnet als eigenes
   Blatt rechts daneben (.am-fly), keine Auswahlliste des Systems. */
.am-filter{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-height:2.5rem;padding:0 .75rem 0 1.125rem;
  border:0;border-radius:999px;corner-shape:superellipse(1.1);background-color:var(--grund);color:var(--tinte);font:inherit;font-size:.9375rem;letter-spacing:.0125em;
  text-align:left;cursor:pointer;transition:background-color 160ms ease;
}
.am-filter svg{flex:none;width:1rem;height:1rem;color:var(--olive);}
.am-wert{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.am-filter.gesetzt{font-weight:700;color:var(--olive-tief);}
.am-filter[aria-expanded="true"]{background-color:var(--olive);color:#fff;}   /* offen: olivgrün gefüllt, weisse Schrift (Pascal 22.10.2026) */
.am-filter[aria-expanded="true"] svg,.am-filter[aria-expanded="true"].gesetzt{color:#fff;}
.am-filter:focus-visible{outline:2px solid var(--olive);outline-offset:2px;}
/* Das Blatt mit den Stufen: seine Fläche ist die Form .am-form--fly in der Liquid-Ebene, hier steht nur der Inhalt.
   Immer rechts daneben; das Blatt rückt dafür nötigenfalls nach links (app.js, knopfMessen). */
.am-fly{
  position:absolute;left:calc(100% + var(--fly-luft));top:0;z-index:5;display:grid;gap:.125rem;min-width:13.5rem;max-width:18rem;padding:.5rem;
  animation:fly-ein 240ms ease-out 140ms both;
}
/* Kein Platz daneben: die Stufen liegen als helle Fläche unter dem Feld, über dem Blatt. */
.am-fly.innen{left:auto;right:1.375rem;border-radius:var(--rund-gross);corner-shape:var(--ecke);background:var(--grund);animation:fly-innen 200ms var(--ease-weich) both;}
@keyframes fly-ein{from{opacity:0;}}
@keyframes fly-innen{from{opacity:0;translate:0 -.375rem;}}
.fly-opt{
  display:flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:0 1.125rem 0 .625rem;border:0;border-radius:999px;corner-shape:superellipse(1.1);background:none;
  font:inherit;font-size:.9375rem;letter-spacing:.0125em;color:var(--tinte);text-align:left;white-space:nowrap;cursor:pointer;
  transition:background-color 120ms ease;
}
.fly-haken{display:grid;flex:none;width:1.25rem;height:1.25rem;color:var(--olive);}
.fly-haken svg{display:block;width:1.25rem;height:1.25rem;}
.fly-opt.an{font-weight:700;}
@media (hover:hover){ .fly-opt:hover{background:color-mix(in srgb,var(--olive) 14%,transparent);} }
.fly-opt:focus-visible{background:color-mix(in srgb,var(--olive) 14%,transparent);outline:2px solid var(--olive);outline-offset:-2px;}
.am-fuss{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding-bottom:.25rem;font-size:.8125rem;letter-spacing:.0125em;color:var(--grau);opacity:0;}
.angaben-menu:popover-open .am-fuss{opacity:1;transition:opacity 220ms ease 420ms;}
@starting-style{ .angaben-menu:popover-open .am-fuss{opacity:0;} }

/* ============================================================== Übersicht
   Eine Zeile pro Artefakt, jede ein eigenes, ganz leicht getöntes Feld mit etwas Abstand zum nächsten.
   Darin die Angaben der Plattform: Kunde, Titel, wer es gemacht hat (mit Bild), Version, Aufrufe, letzter Aufruf,
   Ablauf und die Aktionen – jede einzeln ein- und ausblendbar (Blatt «Angaben»). Ein Farbpunkt steht nur dort,
   wo etwas Besonderes ist (heute geöffnet, Rückmeldungen, von mir, Link tot) – die Pillen oben sind die Legende,
   der Tooltip am Punkt sagt es in Worten. */
.inhalt{padding:.5rem var(--rand) 7rem;}
/* Zeilenabstand (Einstellungen): kompakt, normal, luftig. */
.liste[data-dichte="kompakt"]{--zeile-pad:.5rem;--zeile-abstand:.25rem;--zeile-min:3.25rem;}
.liste[data-dichte="luftig"]{--zeile-pad:1.25rem;--zeile-abstand:.625rem;--zeile-min:4.5rem;}
.liste{container-type:inline-size;min-width:0;--luft:clamp(1.125rem,1.75cqi,2rem);--z-links:.875rem;--z-rechts:1rem;}
.liste[data-gruppe="kunde"] .z-kunde,.liste[data-gruppe="kunde"] .sp-kunde{display:none;}
.liste[data-angaben="0"] .z-meta,.liste[data-angaben="0"] .spalten{display:none;}
/* Spaltenkopf: klebt unter der Leiste, damit beim Scrollen klar bleibt, was in welcher Spalte steht.
   Die Titel der Angaben sind Knöpfe – ein Klick öffnet «Angaben» bei dieser Angabe. */
.spalten{
  position:sticky;top:var(--leiste,0px);z-index:5;display:grid;grid-template-columns:var(--sp);column-gap:var(--luft);align-items:baseline;
  padding:.875rem var(--z-rechts) .75rem var(--z-links);background:var(--grund);border-bottom:1px solid transparent;
  font-size:.875rem;font-weight:700;letter-spacing:.031rem;color:var(--grau);white-space:nowrap;transition:border-color 200ms ease;
}
/* Spaltenköpfe sind reiner Text: keine Hover-Wirkung, kein Klick. Gefiltert: olivgrün mit Punkt. */
.sp-kopf{justify-self:start;cursor:default;}
.sp-kopf.gefiltert{color:var(--olive-tief);}
.sp-punkt{display:inline-block;width:.375rem;height:.375rem;margin-left:.375rem;border-radius:50%;background:var(--olive);vertical-align:.125rem;}
.gruppe-kopf{display:flex;align-items:center;gap:.75rem;padding:3rem 0 .375rem;}
.gruppe:first-of-type .gruppe-kopf{padding-top:1.25rem;}
.gruppe-kopf h2{margin:0;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.2;text-transform:uppercase;letter-spacing:.06em;}
/* Die Anzahl steht in einer kleinen hellgrauen Blase, mittig zur Überschrift. */
.gruppe-kopf span{
  display:inline-grid;place-items:center;min-width:1.625rem;height:1.625rem;padding:0 .5rem;border-radius:999px;
  background:color-mix(in srgb,var(--tinte) 8%,transparent);font-size:.8125rem;font-weight:700;line-height:1;color:var(--grau);font-variant-numeric:tabular-nums;
}

.zeile{
  position:relative;display:grid;grid-template-columns:var(--sp);column-gap:var(--luft);align-items:center;min-height:var(--zeile-min,3.75rem);margin-top:var(--zeile-abstand,.375rem);
  padding:var(--zeile-pad,.8125rem) var(--z-rechts) var(--zeile-pad,.8125rem) var(--z-links);border-radius:var(--rund);--ton:color-mix(in srgb,var(--tinte) 3.5%,transparent);background:var(--ton);
  cursor:pointer;scroll-margin:.25rem 0 1.5rem;transition:background-color 160ms ease;
}
/* Hover und Tastaturzeiger immer im Olivgrün: Seit der Zustandspunkt weg ist, erklärt eine wechselnde Farbe nichts mehr. */
@media (hover:hover){ .zeile:hover{--ton:color-mix(in srgb,var(--olive) 13%,transparent);} }
.zeile[data-zeiger]{--ton:color-mix(in srgb,var(--olive) 18%,transparent);outline:2px solid var(--olive);outline-offset:-2px;}
/* Auftritt nur beim ersten Zeichnen und kurz: sieben Stufen zu 40 ms, der Rest kommt zusammen –
   ein Werkzeug für jeden Tag lässt nicht warten. */
.liste--auftakt .zeile{transition:background-color 160ms ease,opacity var(--dur-quick) var(--ease-out) calc(var(--i,0) * 40ms),translate var(--dur-quick) var(--ease-out) calc(var(--i,0) * 40ms);}
@starting-style{ .liste--auftakt .zeile{opacity:0;translate:0 8px;} }
/* Beim Hinausscrollen wird jede Zeile für sich leicht schmaler: unten kommt sie mit 96.5 % herein, oben zieht sie
   sich kurz vor der klebenden Leiste wieder zusammen. Scrollgesteuert, ohne JS (Chromium 115+, Safari 26+);
   wo es das nicht gibt oder Bewegung reduziert ist, bleibt die Zeile, wie sie ist. */
@media (prefers-reduced-motion: no-preference){ @supports (animation-timeline:view()){
  .zeile{
    animation:zeile-herein linear both;   /* nur unten beim Hereinkommen, oben nicht mehr (Pascal 21.10.2026) */
    animation-timeline:view(block calc(var(--leiste,0px) + 4.5rem) 0px);
    animation-range:entry 0% entry 100%;
  }
  @keyframes zeile-herein{from{scale:.965;}}
  @keyframes zeile-hinaus{to{scale:.965;}}
} }
.z-punkt{align-self:center;width:.5625rem;height:.5625rem;border-radius:50%;background:var(--f);}
.zeile[data-farbe="aktuell"] .z-punkt{background:transparent;}
/* Archiv als Ring statt als Punkt: Grau und Rot liegen für Farbfehlsichtige zu nah beieinander. */
.zeile[data-farbe="ruhe"] .z-punkt{background:transparent;box-shadow:inset 0 0 0 1.5px var(--f);}
.z-kunde{min-width:0;}
.z-meta{display:contents;font-size:.9375rem;color:var(--grau);font-variant-numeric:tabular-nums;}
.z-von,.z-version,.z-aufrufe,.z-zuletzt,.z-ablauf{white-space:nowrap;}
/* In der Spalte steht nur das Profilbild; der Name steckt im Tooltip und für Screenreader im Text. */
.z-von-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.z-aufrufe b{color:var(--tinte);}
.z-zuletzt .heute{color:var(--f-text);font-weight:700;}
.z-ablauf--vorbei{color:var(--color-branding-dark);font-weight:700;}
:root.dark .z-ablauf--vorbei{color:var(--color-branding);}
/* Profilbild der Erstellerin – das Bild aus dem Google-Konto, wie im Chat. Die negativen Ränder halten die Zeilenhöhe. */
.bild{display:inline-block;width:2rem;height:2rem;margin:-.25rem 0;border-radius:50%;object-fit:cover;background:var(--flaeche);vertical-align:middle;}
.z-werkzeuge{display:inline-flex;align-items:center;margin-left:.25rem;}
/* Kundennamen brechen um, statt abgeschnitten zu werden – ein Klick filtert auf diesen Kunden. */
.kunde-link{
  display:block;max-width:100%;padding:0;border:0;background:none;color:var(--grau);text-align:left;cursor:pointer;
  white-space:normal;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5;overflow-wrap:anywhere;text-wrap:pretty;
  /* Mehrzeilige Namen: der Strich ist eine Unterstreichung und hält sich damit an jede Zeile, nicht an die Spaltenbreite. */
  text-decoration:underline 2px transparent;text-underline-offset:.3em;text-decoration-skip-ink:none;
  transition:color 160ms ease,text-decoration-color 220ms ease;
}
.kunde-link:hover{color:var(--tinte);text-decoration-color:var(--olive);}
.z-titel{min-width:0;margin:0;font-family:var(--sans);font-size:1.0625rem;font-weight:700;line-height:1.4;letter-spacing:.0125em;color:var(--tinte);text-wrap:pretty;}
/* Lange deutsche Wörter («Präsentationsvorlage») trennen, statt die Zeile oder das Blatt am Handy zu sprengen. */
.z-titel,.d-zweck,.dialog.details h2{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:anywhere;}
/* Der Titel ist der Knopf, der das Detailblatt öffnet – so erreicht es auch die Tastatur. Die Zeile bleibt als Ganzes klickbar. */
.titel-knopf{display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;white-space:normal;cursor:pointer;}
/* Marke für Einträge, die nicht alle sehen: Symbol und Wort, als kleine Pille hinter dem Titel */
.z-sicht{display:inline-flex;align-items:center;gap:.25rem;margin-left:.5rem;padding:.125rem .5rem .125rem .375rem;border-radius:999px;
  background:color-mix(in srgb,var(--tinte) 8%,transparent);color:var(--grau);font-size:.8125rem;font-weight:700;letter-spacing:.0125em;line-height:1.25;vertical-align:.125rem;white-space:nowrap;}
.z-sicht svg{width:1rem;height:1rem;flex:none;}
/* Private Zeilen: weisse Streifen unter 45 Grad über dem normalen Zeilengrund (Pascal 22.10.2026).
   Als Bild über der Farbe, darum bleiben Hover und Tastaturzeiger olivgrün. */
.zeile[data-privat]{background-image:repeating-linear-gradient(45deg,#fff 0 3px,transparent 3px 14px);}
/* Im Dunkeln wäre reines Weiss zu grell: dort nur ein Hauch Weiss */
:root.dark .zeile[data-privat]{background-image:repeating-linear-gradient(45deg,rgb(255 255 255 / .06) 0 3px,transparent 3px 14px);}
/* Toter Link (zurückgezogen oder abgelaufen): Titel grau und durchgestrichen – nicht nur der rote Punkt. */
.zeile[data-tot] .z-titel{color:var(--grau);}
.zeile[data-tot] .titel-knopf{text-decoration:line-through;text-decoration-thickness:1.5px;}
/* Fokus auf dem Titel (z. B. nach dem Schliessen des Detailblatts mit Esc): nicht als eckiger Rahmen um den Knopf,
   sondern an der ganzen Zeile – so, wie der Tastaturzeiger eine Zeile zeigt. */
.titel-knopf:focus-visible{outline:none;}
.zeile:has(.titel-knopf:focus-visible){--ton:color-mix(in srgb,var(--olive) 18%,transparent);outline:2px solid var(--olive);outline-offset:-2px;}
.zeichen{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.05rem;color:var(--f-text);white-space:nowrap;}
.zeichen svg{flex:none;width:1.125rem;height:1.125rem;color:var(--f);}
/* Ansehen und Kopieren stehen immer da, beide als Kontur-Pille wie der Portfolio-Filter und gleich hoch. */
.z-aktionen{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;align-self:center;height:0;}
/* Beschriftungen der Angaben («von», «Version», «× geöffnet» …): in der Spaltenansicht sagt es der Spaltenkopf,
   dort liest sie nur der Screenreader; in der schmalen Ansicht stehen sie sichtbar in den Pillen. */
.nur-schmal{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;font-style:normal;font-weight:400;}

.leer{padding:clamp(3rem,7vw,5.5rem) 0;max-width:40rem;}
.leer h2{margin:0 0 .625rem;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;}
.leer p{margin:0 0 1.5rem;font-size:1.0625rem;}

/* ============================================================== Details
   Das Blatt hinter dem Klick, breit statt hoch: links Kunde, Titel, Beschrieb und wer es gemacht hat (mit Bild),
   rechts die Angaben als Raster aus Feldern und die Nebenaktionen als Knöpfe. Kopieren und Ansehen stehen
   ohne Kasten oben rechts in der klebenden Leiste, neben dem Schliessen-Knopf. */
/* Das Blatt selbst scrollt nicht (overflow bleibt sichtbar), damit das Schliessen-Kreuz ausserhalb der Fläche liegen
   kann; gescrollt wird in .d-scroll. Oben bleibt Platz für das Kreuz, daher die kleinere Höhe. */
.dialog.details{width:min(76rem,calc(100vw - 2rem));max-height:none;padding:0;overflow:visible;}
.d-scroll{max-height:calc(100dvh - 8rem);overflow:auto;border-radius:inherit;corner-shape:inherit;}
/* Ein Mass für den Rand des Blatts: rechts, und oben bis zu den Pillen «Link kopieren» und «Ansehen» ist der Abstand
   derselbe (--blatt-rand). Das Raster darunter rückt entsprechend nach unten (--blatt-oben ist der Innenabstand oben). */
.dialog.details{--blatt-rand:clamp(1.5rem,4.5vw,3.5rem);--blatt-oben:clamp(2rem,4vw,3.25rem);}
.details-innen{position:relative;display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:stretch;padding:var(--blatt-oben) var(--blatt-rand);}
.details-innen:focus{outline:none;}
.details-innen>*{margin:0;min-width:0;}
/* Die Leiste rückt so weit ein wie der Inhalt: das Kreuz schliesst rechts bündig mit den Feldern ab,
   Kopieren und Ansehen stehen mit Abstand davor. */
.d-leiste{position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;align-items:flex-start;gap:1rem;height:0;padding-right:var(--blatt-rand);}
.d-link{display:flex;align-items:center;gap:.5rem;margin-top:var(--blatt-rand);}
.d-link:empty{display:none;}
.d-link .dd-filter-btn{background:var(--grund);}
.d-link .dd-button{min-height:2.5rem;}
/* Gefüllter Knopf neben einer Kontur-Pille: dieselbe Schriftgrösse (14 px wie die Pillen), sonst wirkt er grösser. */
.d-link .dd-button,.angaben .taten .dd-button{--btn-font:.875rem;}
/* Icon in der Kontur-Pille – auf der Website gibt es das so nicht; es folgt der Schriftfarbe. */
.f-ikon{display:inline-grid;margin-left:.5rem;}
.f-ikon svg{display:block;width:.8125rem;height:.8125rem;}
/* Icon vor dem Wort – in den Pillen der Ansichten. */
.f-ikon--vor{margin:0 .5rem 0 0;}
.f-ikon--vor svg{width:1.25rem;height:1.25rem;}
/* Das Kreuz sitzt über der oberen rechten Ecke des Blatts, ausserhalb der Fläche – auf dem abgedunkelten Grund
   als weisser Kreis, bleibt beim Scrollen im Blatt stehen. */
.d-zu{position:absolute;top:-3.5rem;right:0;z-index:4;width:2.75rem;height:2.75rem;margin:0;background:var(--grund);}
.d-zu svg{width:1.5rem;height:1.5rem;}
.d-kopf{display:flex;flex-direction:column;gap:.75rem;}
.d-kopf>*{margin:0;}
.d-kunde{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.0625rem;color:var(--grau);}
.d-kunde .kunde-link{text-transform:inherit;letter-spacing:inherit;}
.dialog.details h2{font-size:clamp(1.625rem,3.4vw,2.25rem);line-height:1.15;text-transform:none;letter-spacing:-.015em;color:var(--titel);text-wrap:balance;}
.d-zweck{max-width:54ch;font-size:1.0625rem;letter-spacing:.0125em;text-wrap:pretty;}
.d-zeichen{display:flex;flex-wrap:wrap;gap:.25rem 1rem;}
.d-autor{display:flex;align-items:center;gap:.875rem;margin-top:auto;padding-top:1.25rem;}
.d-autor .bild{flex:none;width:3rem;height:3rem;margin:0;}
.d-autor b{display:block;line-height:1.3;}
.d-autor span{display:block;font-size:.875rem;letter-spacing:.031rem;color:var(--grau);}
/* Raster aus Feldern: Titel und Beschrieb bleiben frei daneben stehen, alles Weitere hat sein eigenes Feld. */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;align-content:start;padding-top:calc(var(--blatt-rand) + 2.75rem + 1rem - var(--blatt-oben));}
.b-feld{display:flex;flex-direction:column;gap:.25rem;min-width:0;padding:1.125rem 1.25rem;border-radius:var(--rund);background:var(--flaeche);}
.b-titel{display:flex;align-items:center;gap:.4375rem;font-size:.875rem;letter-spacing:.031rem;color:var(--grau);}
.b-titel svg{flex:none;width:1.25rem;height:1.25rem;color:var(--color-primary);}
.b-feld>span:not(.b-titel){font-size:.875rem;color:var(--grau);}
.b-zahl{grid-column:span 2;}
.bento--eigen .b-zahl{grid-column:span 3;}
/* Alle Werte im Raster sehen gleich aus: gleiche Grösse, gleiche Stärke, gleiche Farbe (Beschriftung grau, Wert schwarz). */
.b-feld>strong,.b-feld>b{font-size:1.25rem;font-weight:800;line-height:1.25;letter-spacing:-.005em;color:var(--tinte);font-variant-numeric:tabular-nums;text-wrap:balance;}
.b-zahl strong{white-space:nowrap;}
.b-zahl .heute{display:inline-flex;align-items:center;gap:.375rem;}
.b-zahl .heute::before{content:"";flex:none;width:.4375rem;height:.4375rem;border-radius:50%;background:var(--marketing);}
.b-sicht{grid-column:span 2;}
.b-sicht--wahl{grid-column:1 / -1;gap:.5rem;}
.sicht-wahl{display:flex;flex-wrap:wrap;gap:.5rem;}
.b-taten{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;gap:.625rem;}
/* Knopfzeilen: mittig statt gestreckt – ein gefüllter Knopf darf nicht auf die Kastenhöhe der Kontur-Pille wachsen,
   deren Kontur 2 px innerhalb ihres Kastens liegt (sonst ist er sichtbar 4 px höher). */
.taten,.b-taten,.sicht-wahl{align-items:center;}
.taten{display:flex;flex-wrap:wrap;gap:.625rem;}
.angaben{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem;align-content:start;padding-top:calc(var(--blatt-rand) + 2.75rem + 1rem - var(--blatt-oben));}
.angaben label{display:grid;gap:.375rem;align-content:start;font-size:.875rem;letter-spacing:.031rem;color:var(--grau);}
.angaben .breit,.angaben .taten{grid-column:1 / -1;}
.angaben .taten{margin-top:.5rem;}
.angaben input{min-height:3rem;padding:.625rem 1rem;border:2px solid color-mix(in srgb,var(--olive) 40%,transparent);border-radius:var(--rund);background:var(--grund);font-size:1.0625rem;letter-spacing:.031rem;color:var(--tinte);}
.angaben input:focus{outline:none;}
/* Fehlt ein Pflichtfeld, steht unter dem Feld, was zu tun ist. */
.angaben input[aria-invalid="true"]{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal);}
.feld-fehler{font-size:.875rem;font-weight:700;letter-spacing:.0125em;color:var(--signal);}

/* ============================================================ Nach oben
   Runder Knopf unten rechts (Muster «Zurück-nach-oben-Knopf» der Allgemein-Bibliothek): erscheint nach einem Stück
   Scrollen. Die Kontur liegt ganz aussen und ist zugleich der Fortschritt: der olivgrüne Bogen läuft um die Scheibe,
   so weit man gescrollt hat. Er sitzt mittig im rechten Rand neben der Liste und deckt keine Zeile; rechts von der
   Liste bleibt dafür mindestens 4.5 rem frei. */
.nach-oben{
  position:fixed;right:calc((max(var(--rand),4.5rem) - 3rem) / 2);bottom:1.5rem;z-index:40;display:grid;place-items:center;
  width:3rem;height:3rem;padding:0;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;
  opacity:0;scale:.7;pointer-events:none;transition:opacity 200ms ease,scale 380ms var(--ease-weich);
}
.nach-oben.sichtbar{opacity:1;scale:1;pointer-events:auto;}
.nach-oben.sichtbar:active{scale:.92;transition:scale var(--dur-press) var(--ease-press);}
.no-ring{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg;}
.no-spur{fill:none;stroke:color-mix(in srgb,var(--color-primary) 24%,transparent);stroke-width:2.5;}
.no-bogen{fill:none;stroke:var(--color-primary);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:142.94;stroke-dashoffset:142.94;}
.no-scheibe{position:absolute;inset:.3125rem;border-radius:50%;background:var(--color-primary);transition:background-color 200ms ease;}
@media (hover:hover){ .nach-oben.sichtbar:hover .no-scheibe{background:var(--color-primary-dark);} }
.no-pfeil{position:relative;width:1.25rem;height:1.25rem;fill:currentColor;}
@media (min-width:761px){
  .werkzeug{padding-right:max(var(--rand),4.5rem);}
  .inhalt{padding-right:max(var(--rand),4.5rem);}
}
@media (max-width:760px){
  .nach-oben{right:.75rem;bottom:1rem;width:2.75rem;height:2.75rem;}
}

/* ================================================================ Hinweise */
/* Flache Kapsel ohne Schatten. Der Knopf sitzt konzentrisch: 12 px Abstand ringsum, Radius = halbe Höhe (60 px).
   Bricht der Text am Handy um, bleibt dieselbe Rundung stehen – eine hohe Kapsel sähe aus wie ein Klecks. */
.hinweise{position:fixed;left:50%;bottom:clamp(1rem,3vw,1.75rem);z-index:60;translate:-50% 0;display:grid;justify-items:center;gap:.5rem;width:min(92vw,46rem);pointer-events:none;}
.hinweis{
  display:flex;align-items:center;gap:1.25rem;max-width:100%;padding:.75rem .75rem .75rem 1.75rem;border-radius:2rem;background:var(--tinte);color:var(--grund);
  font-weight:700;letter-spacing:.0125em;pointer-events:auto;
  opacity:0;translate:0 1rem;transition:opacity 200ms ease-out,translate var(--dur-spring) var(--ease-spring);
}
.hinweis.an{opacity:1;translate:0 0;}
.hinweis>span{padding:.375rem 0;text-wrap:balance;}
.hinweis:not(:has(button)){padding-right:1.75rem;}
.hinweis .dd-button{flex:none;}

/* ================================================================== Dialog */
/* Ohne Kontur und ohne Schatten: die abgedunkelte Seite dahinter trennt das Blatt genug. */
.dialog{
  width:min(30rem,calc(100vw - 2rem));padding:2rem 2rem 1.75rem;border:0;border-radius:var(--rund-gross);background:var(--grund);color:var(--tinte);
}
.dialog::backdrop{background:rgb(0 0 0 / .45);}
:root.dark .dialog::backdrop{background:rgb(0 0 0 / .62);}
.dialog h2{margin:0 0 .75rem;font-size:1.5rem;line-height:1.2;text-transform:uppercase;letter-spacing:.05em;color:var(--olive);}
.dialog p{margin:0 0 1.5rem;}
.dialog .taten{justify-content:flex-end;}
/* Halten zum Bestätigen: die Füllung wächst mit der Haltedauer, Loslassen bricht ab. */
.halten{
  position:relative;display:inline-flex;align-items:center;justify-content:center;height:2.5rem;padding:0 1.5rem;border:2px solid var(--color-branding);border-radius:999px;
  background:transparent;color:var(--color-branding-dark);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.0625rem;cursor:pointer;
  overflow:hidden;isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none;
}
:root.dark .halten{color:var(--color-branding);}
.halten::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--color-branding) 55%,transparent);transform:scaleX(var(--fort,0));transform-origin:left;}
.halten.zurueck::before{transition:transform 260ms ease-out;}

/* ============================================================== Auswertung */
.blatt{padding:0 var(--rand) 7rem;}
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 clamp(3rem,6vw,5rem);border-top:2px solid var(--tinte);}
.zahlen div{display:flex;flex-direction:column;padding:1.25rem 1.5rem 0 0;}
.zahlen dd{margin:0;font-family:var(--sans);font-size:clamp(2rem,4vw,3.25rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--f-text,var(--titel));font-variant-numeric:lining-nums tabular-nums;}
.zahlen dt{order:2;letter-spacing:.0125em;}
.blatt section{margin:0 0 clamp(3rem,6vw,5rem);}
.blatt section>h2{margin:0 0 .5rem;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.2;text-transform:uppercase;letter-spacing:.06em;}
.tabelle{width:100%;border-collapse:collapse;}
.tabelle th{padding:.625rem 1.5rem .625rem 0;text-align:left;font-weight:700;border-bottom:2px solid var(--tinte);}
.tabelle td{padding:.75rem 1.5rem .75rem 0;border-bottom:1px solid var(--linie);vertical-align:top;}
.tabelle td:first-child{font-weight:700;white-space:nowrap;}
.tabelle td:last-child,.tabelle th:last-child{padding-right:0;}
.tabelle .rechts{text-align:right;}
.tabelle .leise{color:var(--grau);}
.wahl-zeile{display:flex;flex-wrap:wrap;gap:.375rem 1.5rem;}
.wahl-zeile span{display:inline-flex;align-items:baseline;gap:.625rem;}

/* ============================================================ Einstellungen
   Das Zahnrad neben Hell/Dunkel öffnet ein Blatt in der Art von «Angaben»: getönte Fläche, keine Kontur, keine Schatten;
   die Dreier-Wahl ist derselbe Schalter mit gleitendem Knopf wie die Gruppierung. */
/* Der Anker darf sich nicht bewegen: das Blatt hängt an seiner Lage, ein hüpfendes Symbol (die Feder von .symbol)
   würde es mitziehen. Darum bleibt das Zahnrad selbst stehen, nur sein Inneres dreht sich. */
.einst{anchor-name:--einst;}
@media (hover:hover){ .symbol.einst:hover{scale:1;} }
.symbol.einst:active{scale:1;}
.einst svg{transition:rotate 520ms var(--ease-weich);}
.einst:hover svg,.einst[aria-expanded="true"] svg{rotate:60deg;}
.einst-menu{
  width:min(26rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:1.125rem 1.375rem .5rem;border:0;border-radius:var(--rund-gross);corner-shape:var(--ecke);
  background:color-mix(in srgb,var(--tinte) 7%,var(--grund));color:var(--tinte);overflow:auto;
  transform-origin:calc(100% - 1.25rem) -.75rem;opacity:0;scale:.92;
  transition:opacity 140ms ease-out,scale 140ms ease-out,display 140ms allow-discrete,overlay 140ms allow-discrete;
}
.einst-menu:popover-open{opacity:1;scale:1;transition:opacity 200ms ease-out,scale 200ms var(--ease-weich),display 200ms allow-discrete,overlay 200ms allow-discrete;}
@starting-style{ .einst-menu:popover-open{opacity:0;scale:.92;} }
.einst-menu::backdrop{background:transparent;}
@supports (anchor-name:--a){
  .einst-menu{position-anchor:--einst;inset:auto;top:calc(anchor(bottom) + .625rem);right:anchor(right);margin:0;position-try-fallbacks:flip-block,flip-inline;}
}
.ei-titel{margin:0 0 .5rem;font-size:1rem;line-height:1.2;text-transform:uppercase;letter-spacing:.06em;color:var(--olive);}
.ei-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:3.75rem;padding-block:.25rem;}
.ei-zeile--seg{grid-template-columns:minmax(0,1fr);gap:.5rem;padding-block:.5rem .75rem;}
.ei-zeile b{font-weight:700;letter-spacing:.0125em;}
.ei-text{display:grid;gap:.125rem;}
.ei-text span{font-size:.8125rem;line-height:1.35;color:var(--grau);text-wrap:balance;}
.ei-fuss{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding-bottom:.25rem;font-size:.8125rem;letter-spacing:.0125em;color:var(--grau);}
.kippschalter:disabled{opacity:.45;cursor:default;}
/* Dreier-Wahl: wie .gruppierung, nur mit n Feldern (--n) und dem gewählten (--i). */
.seg-gruppe{
  position:relative;display:grid;grid-template-columns:repeat(var(--n,2),1fr);align-items:stretch;height:2.5rem;padding:.1875rem;
  border-radius:999px;corner-shape:superellipse(1.1);background:color-mix(in srgb,var(--tinte) 8%,transparent);
}
.seg-gruppe .seg-knopf{
  position:absolute;top:.1875rem;bottom:.1875rem;left:.1875rem;width:calc((100% - .375rem) / var(--n,2));
  border-radius:999px;corner-shape:inherit;background:color-mix(in srgb,var(--tinte) 15%,transparent);translate:calc(var(--i,0) * 100%) 0;transition:translate 440ms cubic-bezier(.3,1.25,.5,1);
}
.seg-gruppe .seg{min-width:0;padding:0 .5rem;}

/* ============================================================ Variante «Links untereinander»
   Ansehen und Kopieren stehen übereinander (gleich breit), die Werkzeuge daneben; die Zeile wird entsprechend höher und
   luftiger. Schaltbar im Dropdown «Angaben» unter «Untereinander»; nur ab Listenbreite 761 px, am Handy stehen die
   Pillen ohnehin unter dem Text. */
@container (min-width: 761px){
  .liste[data-stapel="1"] .zeile{padding-block:calc(var(--zeile-pad,.8125rem) + .5625rem);min-height:5rem;}
  .liste[data-stapel="1"] .z-aktionen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.625rem .75rem;align-items:center;justify-content:stretch;height:auto;}
  .liste[data-stapel="1"] .z-aktionen>.dd-filter-btn{grid-column:1;width:100% !important;}
  .liste[data-stapel="1"] .z-aktionen>.z-werkzeuge{grid-column:2;grid-row:1 / span 2;margin-left:0;}
}

/* ============================================================ Schmale Breiten */
/* Unter 1480 px Listenbreite: Kunde und Titel untereinander, die Angaben als hellgraue Pillen darunter. */
@container (max-width: 1480px){
  .liste[data-angaben="1"] .spalten{display:none;}
  .liste[data-angaben="1"] .zeile{grid-template-columns:2.5rem minmax(0,1fr) auto;row-gap:.125rem;padding-block:calc(var(--zeile-pad,.8125rem) + .125rem);}
  .liste[data-angaben="1"] .z-kunde{grid-column:2;grid-row:1;font-size:.9375rem;}
  .liste[data-angaben="1"] .z-titel{grid-column:2;grid-row:2;}
  .liste[data-angaben="1"] .z-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;grid-column:2;grid-row:3;margin-top:.5rem;font-size:.8125rem;}
  .liste[data-angaben="1"][data-gruppe="kunde"] .z-titel{grid-row:1;}
  .liste[data-angaben="1"][data-gruppe="kunde"] .z-meta{grid-row:2;}
  .liste[data-angaben="1"] .z-meta>span{display:inline-block;padding:0 .625rem;border-radius:999px;corner-shape:superellipse(1.1);background:color-mix(in srgb,var(--tinte) 6%,transparent);line-height:1.625rem;}
  .liste[data-angaben="1"] .z-meta .nur-schmal{position:static;width:auto;height:auto;overflow:visible;clip-path:none;}
  /* In der Pille mit Bild braucht es kein «von»; für Screenreader bleibt es stehen. */
  .liste[data-angaben="1"] .z-von .nur-schmal{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .liste[data-angaben="1"] .z-meta>.z-von{padding-left:.1875rem;}
  /* In der Pille steht neben dem Bild der Name. */
  .liste[data-angaben="1"] .z-von-name{position:static;width:auto;height:auto;overflow:visible;clip-path:none;}
  .liste[data-angaben="1"] .z-meta>.z-zuletzt--nie{display:none;}
  .liste[data-angaben="1"] .bild{width:1.25rem;height:1.25rem;margin:-.125rem .3125rem 0 0;}
  .liste[data-angaben="1"] .bild--ich{--ring:2px;--spalt:2px;margin:calc(-.125rem - var(--ring) - var(--spalt)) calc(.3125rem - var(--ring) - var(--spalt)) calc(-1 * (var(--ring) + var(--spalt))) calc(-1 * (var(--ring) + var(--spalt)));}
  .liste[data-angaben="1"] .z-aktionen{grid-column:3;grid-row:1 / span 3;height:auto;}
}
@container (max-width: 760px){
  .liste .zeile,.liste[data-angaben="1"] .zeile{grid-template-columns:2.5rem minmax(0,1fr);row-gap:.125rem;}
  .z-kunde{grid-column:2;font-size:.9375rem;}
  .z-titel{grid-column:2;}
  .liste .z-aktionen,.liste[data-angaben="1"] .z-aktionen{grid-column:2;grid-row:auto;justify-content:flex-start;height:auto;padding-top:.75rem;}
  /* Auf Handybreite haben die drei Werkzeuge neben Ansehen und Kopieren keinen Platz – sie stehen im Detailblatt. */
  .z-werkzeuge{display:none;}
}
/* Handybreite: Ansehen und Kopieren brauchen die ganze Kartenbreite – sie stehen unter dem Text, etwas kompakter
   (ohne Kopier-Icon) und brechen im Notfall um, statt über den Rand zu laufen. */
@container (max-width: 560px){
  .liste .z-aktionen,.liste[data-angaben="1"] .z-aktionen{grid-column:1 / -1;flex-wrap:wrap;}
  .z-aktionen .k-ruhe .f-ikon,.z-aktionen .k-ok .f-ikon{display:none;}
  .z-aktionen .dd-filter-btn{padding-inline:.875rem;}
}
@media (max-width: 980px){
  /* Einspaltig: der Inhalt beginnt unter der Leiste mit Kopieren, Ansehen und Schliessen. */
  .details-innen{grid-template-columns:minmax(0,1fr);padding-top:calc(var(--blatt-rand) + 2.75rem + 1.5rem);}
  .dialog.details{width:min(40rem,calc(100vw - 2rem));}
  .bento,.angaben{padding-top:0;}
  .d-autor{margin-top:0;}
}
@media (max-width: 760px){
  .konto>span{display:none;}
  .werkzeug{position:static;padding-top:1.25rem;}
  /* Am Handy klebt die Leiste nicht: die grosse Überschrift bleibt, das Leistenelement nur für Screenreader. */
  .titel-platz{visibility:visible;}
  .leisten-titel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);animation:none;opacity:1;translate:none;scale:none;}
  .auftakt--wandert p{animation:none;opacity:1;}
  /* Die Pillen stehen hier als Icons in einer Zeile (siehe oben), die Suche darunter über die ganze Breite. */
  .pillen{flex-basis:100%;}
  .suche{flex-basis:100%;max-width:none;}
  /* «Angaben» links, der Schalter rechts in derselben Zeile; die Pille hinter «Angaben» bleibt im Seitenrand. */
  .schalter{margin-left:0;flex-basis:100%;justify-content:space-between;gap:.5rem 1rem;}
  .angaben-knopf{margin-left:var(--p-x);}
  /* Blatt «Angaben» in voller Breite: schmalere Auswahl, der Name darf umbrechen. */
  .angaben-menu{padding-inline:1rem;}
  .am-zeile{grid-template-columns:auto minmax(0,1fr) minmax(0,8.5rem);gap:.75rem;}
  .am-name{white-space:normal;line-height:1.2;}
  .am-fly.innen{right:1rem;}
  .angaben{grid-template-columns:minmax(0,1fr);}
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr));}
  .zahlen div:nth-child(n+3){border-top:1px solid var(--linie);margin-top:1.25rem;}
  .tabelle .schmal-weg{display:none;}
}
@supports (anchor-name:--a){ @media (max-width: 760px){
  .angaben-menu{left:1rem;right:1rem;width:auto;}
  .am-form--knopf,.am-form--hals{display:none;}
  .am-form--blatt{transform-origin:50% 0;}
} }
/* Schmale Blätter: «Ansehen» schrumpft auf sein Icon, damit Kopieren, Ansehen und Schliessen nebeneinander passen. */
@media (max-width: 560px){
  /* Felder im Blatt: zwei nebeneinander, «Sichtbar für» über die ganze Breite. */
  .b-zahl,.bento--eigen .b-zahl{grid-column:span 3;}
  .b-sicht{grid-column:1 / -1;}
  .d-leiste{gap:.5rem;}
  .d-link{gap:.375rem;}
  .d-link .f-wort{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .d-link .f-ikon{margin-left:0;}
  .d-link .dd-filter-btn{padding:0 .875rem;}
}
@media (max-width: 380px){
  .d-link .dd-button{--btn-px:.75rem;}
  .d-link .dd-button__arrow{display:none;}
}
/* Finger brauchen rund 44 px: die Trefferflächen wachsen, das Bild bleibt, wie es ist. */
@media (pointer:coarse){
  .symbol,.symbol--klein{width:2.75rem;height:2.75rem;}
  .suche.gefuellt .suche-leeren{width:2.75rem;height:2.75rem;}
  .kunde-link{padding-block:.6875rem;margin-block:-.6875rem;}
  .link{padding-block:.75rem;margin-block:-.5rem;}
  .link::after{bottom:.5rem;}
  .gruppierung{height:2.75rem;}
}

/* Reduzierte Bewegung heisst ersetzen, nicht streichen: Wege und Federn fallen weg, Ein- und Ausblenden bleibt
   erkennbar. Blatt und Zeilenaustritt regelt app.js mit reinen Deckkraft-Übergängen. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;}
  .hinweis{translate:0 0;transition:opacity 200ms ease-out !important;}
}

/* ============================================================ Kundenzeichen
   Das Logo des Kunden im Kreis auf seiner Kundenfarbe (Website diffrent.digital), einfarbig: weiss auf dunkler,
   schwarz auf heller Farbe (--mf, in app.js nach Helligkeit gesetzt). Die Logodatei dient nur als Maske –
   so braucht es pro Kunde eine Datei, und Weiss oder Schwarz entscheidet die Farbe, nicht die Datei.
   Ohne Logo stehen die Anfangsbuchstaben im Kreis. */
.z-marke{display:flex;align-self:center;}
.marke{--g:2.5rem;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--g);height:var(--g);border-radius:50%;background:var(--m);color:var(--mf);overflow:hidden;
  transition:background-color 160ms cubic-bezier(.23,1,.32,1),scale 150ms cubic-bezier(.23,1,.32,1);}
/* Bewegung nach «Edle Bewegung»: Hover rein 120 ms, raus 150 ms, ohne Überschwinger; Druck auf .97 */
.marke[data-logo]::before{content:"";position:absolute;inset:0;background:var(--mf);
  -webkit-mask:var(--ml) center / var(--ms,64%) auto no-repeat;mask:var(--ml) center / var(--ms,64%) auto no-repeat;}
/* Bild: mehrfarbige Logos (Wappen) oder Logos mit eigener Fläche stehen in ihren eigenen Farben im Kreis. */
.marke[data-bild]::before{background:var(--ml) center / var(--ms) auto no-repeat;-webkit-mask:none;mask:none;}
/* Umgekehrt: Das Logo ist eine volle Scheibe mit ausgesparten Buchstaben (H&B). Die Scheibe deckt den Kreis,
   die Maske wird umgekehrt – stehen bleiben nur die Buchstaben. */
.marke[data-umkehren]::before{-webkit-mask:var(--ml) center / var(--ms) auto no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:var(--ml) center / var(--ms) auto no-repeat,linear-gradient(#000 0 0);mask-composite:exclude;}
.marke b{font-size:calc(var(--g) * .36);font-weight:700;letter-spacing:.02em;line-height:1;}
/* Dunkle Kundenfarben verschwinden im Dunkelmodus fast im Grund: ein feiner heller Rand hält den Kreis zusammen. */
:root.dark .marke{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1);}
@media (hover:hover){ .zeile:hover .z-marke .marke{scale:1.04;transition-duration:160ms,120ms;} }
.gruppe-kopf .marke--kopf{--g:2.25rem;}
.d-kunde{display:flex;align-items:center;gap:.75rem;}
.marke--gross{--g:3rem;}

/* Auswahl unter «Angaben richtigstellen». Abstände aus der 4/8-Punkt-Skala (Glossar «Abstandsskala»),
   Schriftgrössen aus den Stufen, die der Prototyp schon nutzt. */
.marken-wahl{display:grid;gap:1rem;min-width:0;margin:0;padding:0;border:0;}
.marken-wahl legend{padding:0;margin-bottom:.5rem;font-size:.875rem;letter-spacing:.031rem;color:var(--grau);}
.mw-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;}
.marke--vorschau{--g:4.5rem;}
.mw-text{display:grid;gap:.25rem;flex:1;min-width:11rem;}
.mw-text b{font-size:1.0625rem;color:var(--tinte);}
.mw-text>span{font-size:.875rem;color:var(--grau);}
.mw-farbe{display:flex;align-items:flex-end;gap:.75rem;}
.mw-farbe label{display:grid;gap:.5rem;}
.angaben .mw-farbe input[name="farbe"]{width:7.5rem;font-family:var(--mono);font-size:.9375rem;text-transform:lowercase;}
.mw-farbe input[type="color"]{flex:none;width:3rem;height:3rem;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;}
.mw-farbe input[type="color"]::-webkit-color-swatch-wrapper{padding:0;}
.mw-farbe input[type="color"]::-webkit-color-swatch{border:0;border-radius:50%;}
.mw-farbe input[type="color"]::-moz-color-swatch{border:0;border-radius:50%;}
.angaben .mw-suche{min-height:2.75rem;width:100%;box-sizing:border-box;}
/* Eigene Hülle: direkt im fieldset rechnet der Browser die Lage des Fokus-Rings von der Legende aus falsch */
.mw-suche-huelle{position:relative;}
/* Der Hinweis gehört zu den Kacheln darunter: näher an ihnen als an der Suche (Glossar «Innen kleiner als aussen») */
.marken-wahl .mw-hinweis{margin:0 0 -.5rem;font-size:.875rem;color:var(--grau);}
.mw-alle{justify-self:start;}
.mw-alle[hidden]{display:none;}
.mw-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.75rem,1fr));gap:.25rem;max-height:18rem;overflow:auto;overscroll-behavior:contain;margin:0 -.25rem;padding:.25rem;}
.mw-raster button{display:grid;justify-items:center;align-content:start;gap:.5rem;min-height:6rem;padding:.75rem .25rem .5rem;border:0;border-radius:var(--rund);background:transparent;color:var(--grau);font:inherit;font-size:.75rem;line-height:1.2;text-align:center;cursor:pointer;transition:background-color 160ms ease;}
.mw-raster button[hidden]{display:none;}
.mw-raster button span{overflow-wrap:anywhere;hyphens:auto;}
@media (hover:hover){ .mw-raster button:hover{background:var(--flaeche);} .mw-raster button:hover .marke{scale:1.04;transition-duration:160ms,120ms;} }
.mw-raster button:active .marke{scale:.97;transition-duration:160ms,60ms;}
.mw-raster button[aria-checked="true"]{background:var(--flaeche);color:var(--tinte);box-shadow:inset 0 0 0 2px var(--olive);}
.mw-raster button:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}
.marke--wahl{--g:2.75rem;}
@media (prefers-reduced-motion:reduce){ .marke{transition:none;} }
/* In der schmalen Ansicht steht der Kreis neben Kunde und Titel, oben bündig. */
@container (max-width: 1480px){ .liste[data-angaben="1"] .z-marke{grid-row:1 / span 2;align-self:start;} }
@container (max-width: 760px){ .liste .z-marke{grid-row:1 / span 2;align-self:start;} }

/* Eigenes Profilbild: olivgrüner Ring mit schmalem Abstand zum Foto */
/* Der Verlauf kreist langsam um das Bild – nur im Detailblatt (Leistung). Dauerbewegung, darum linear. Bei «Bewegung reduzieren» steht er still. */
@property --bild-w{syntax:"<angle>";inherits:false;initial-value:210deg;}
@keyframes bild-dreh{to{--bild-w:570deg;}}
/* Ring als Verlauf aus den Kompetenzfarben Gelb, Blau, Türkis. Ein Verlauf geht nicht mit box-shadow: darum Rahmen
   (Verlauf) und Innenabstand (Spalt in Grundfarbe); der negative Rand gleicht beides aus, das Foto bleibt an seinem Platz. */
.bild--ich{--ring:3px;--spalt:3px;box-sizing:content-box;padding:var(--spalt);border:var(--ring) solid transparent;
  background:linear-gradient(var(--grund),var(--grund)) padding-box,
    conic-gradient(from var(--bild-w),var(--strategie),var(--multimedia),var(--marketing),var(--strategie)) border-box;
  margin:calc(-.25rem - var(--ring) - var(--spalt)) calc(-1 * (var(--ring) + var(--spalt)));}
.d-autor .bild--ich{--ring:4px;--spalt:4px;margin:calc(-1 * (var(--ring) + var(--spalt)));
  animation:bild-dreh 9s linear infinite;}   /* dreht nur hier: in der Liste müsste der Browser jedes eigene Bild 60-mal pro Sekunde neu malen */

/* Kundenabgleich unter dem Feld «Kunde»: bestehende Kunden zum Antippen, nichts wird still zusammengelegt */
.kunde-feld{display:grid;gap:.5rem;align-content:start;}
.kunde-hinweis{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.875rem;color:var(--grau);}
.kunde-hinweis:empty{display:none;}
.kunde-hinweis .kh-ok{color:var(--olive-tief);font-weight:700;}
.kunde-hinweis .kh-klein{flex-basis:100%;font-size:.8125rem;}
.kunde-hinweis[data-art="gleich"],.kunde-hinweis[data-art="aehnlich"]{padding:.75rem;border-radius:var(--rund);background:var(--flaeche);}
.kunde-wahl{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.25rem .75rem .25rem .25rem;border:2px solid var(--olive);border-radius:999px;background:var(--grund);color:var(--tinte);font:inherit;font-size:.875rem;font-weight:700;cursor:pointer;transition:background-color 160ms cubic-bezier(.23,1,.32,1);}
@media (hover:hover){ .kunde-wahl:hover{background:color-mix(in srgb,var(--olive) 14%,var(--grund));} }
.kunde-wahl:active{scale:.97;}
.kunde-wahl:focus-visible{outline:2px solid var(--olive);outline-offset:2px;}
.marke--mini{--g:2rem;}

/* Fokus wie in der GWERB7-Kasse: In Ruhe ist der Rahmen zart, beim Fokus wächst das kräftige Olivgrün genau auf derselben Linie als weiche, runde Maske von der Klickstelle über den Rahmen,
   mit der Tastatur vom linken Rand. app.js setzt Mittelpunkt (--k-x, --k-y) und Reichweite bis zur entferntesten Ecke (--k-max). */
@property --k-r{syntax:"<length>";inherits:false;initial-value:0px;}
.k-ring{position:absolute;z-index:2;pointer-events:none;border-radius:var(--rund);corner-shape:var(--ecke);
  box-shadow:inset 0 0 0 2px var(--olive);
  -webkit-mask-image:radial-gradient(circle at var(--k-x,0px) var(--k-y,50%),#000 var(--k-r),#0000 calc(var(--k-r) + 80px));
  mask-image:radial-gradient(circle at var(--k-x,0px) var(--k-y,50%),#000 var(--k-r),#0000 calc(var(--k-r) + 80px));
  opacity:0;transition:--k-r .8s cubic-bezier(.22,1,.36,1),opacity .15s ease;}
.k-ring.an{--k-r:var(--k-max,640px);opacity:1;}
.feld{position:relative;}
.k-ring--feld{inset:-2px;border-radius:999px;corner-shape:superellipse(1.1);}
.angaben input[aria-invalid="true"] ~ .k-ring{opacity:0;}
@media (prefers-reduced-motion:reduce){ .k-ring{transition:opacity .2s;} }
/* Steht nach .bild--ich, sonst überschreibt dessen animation die Ausnahme */
@media (prefers-reduced-motion:reduce){ .bild--ich,.d-autor .bild--ich{animation:none;} }

/* Leistung: dd-button.css markiert jeden Knopf dauerhaft mit will-change, die Liste hielt so rund 80 eigene Ebenen.
   Hier überschrieben (dd-button.css wird von der Website herausgezogen und nicht von Hand geändert):
   die Markierung gilt nur, während der Zeiger auf dem Knopf liegt. */
.dd-button,.dd-filter-btn{will-change:auto;}
@media (hover:hover){ .dd-button:hover,.dd-filter-btn:hover{will-change:transform;} }

/* ============================================================ Blatt mit den Stufen (rechts neben «Angaben»)
   Eigene Fläche in der Farbe des Blatts, ohne die Fliess-Form: deren SVG-Filter (Weichzeichner + Schwellwert) musste
   bei jeder Bewegung die ganze Fläche neu rechnen und ruckelte. Bewegt wird nur über transform und Deckkraft (app.js),
   ein einziges Highlight gleitet unter den Stufen statt eines Hovers je Zeile. */
/* Gleiche Familie wie das Blatt «Angaben» (Pascal 22.10.2026): dieselbe graue Fläche, dieselbe Rundung, kein Schatten.
   Das Highlight ist eine weisse Pille – wie die Auswahlfelder links. */
.am-fly{background:var(--am-flaeche);border-radius:var(--rund-gross);corner-shape:var(--ecke);animation:none;will-change:transform,opacity;box-shadow:none;}
/* Versuch (Pascal 22.10.2026): Grund leicht durchsichtig, dahinter weichgezeichnet. Klein genug, dass es flüssig bleibt. */
.am-fly{background:color-mix(in srgb,var(--am-flaeche) 72%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);}
.am-fly.innen{background:color-mix(in srgb,var(--am-flaeche) 72%,transparent);box-shadow:0 8px 24px rgb(0 0 0 / .12);}   /* liegt über dem Blatt: leichter Schatten zur Trennung */
.fly-marke{position:absolute;left:.5rem;right:.5rem;top:0;height:2.5rem;border-radius:999px;corner-shape:superellipse(1.1);background:var(--grund);
  opacity:0;pointer-events:none;transition:transform 180ms cubic-bezier(.23,1,.32,1),height 180ms cubic-bezier(.23,1,.32,1),opacity 120ms ease;}
.fly-opt{position:relative;z-index:1;}
@media (hover:hover){ .fly-opt:hover{background:none;} }
.fly-opt:focus-visible{background:none;outline:none;}
.am-fly:has(.fly-opt:focus-visible) .fly-marke{box-shadow:inset 0 0 0 2px var(--olive);}
@media (prefers-reduced-motion:reduce){ .fly-marke{transition:opacity 120ms ease;} }
.am-fly .fly-haken{color:var(--olive-tief);}

/* Schalter «Zeit | Kunde» in den Farben der Filterpillen (Pascal 22.10.2026): Bahn in abgeschwächtem Olivgrün, der gewählte Teil
   gefüllt mit weisser Schrift, der andere olivgrün. Gleiche Höhe wie die Pillen (2.25rem). */
.gruppierung{height:2.25rem;padding:.1875rem;background:color-mix(in srgb,var(--color-primary) 16%,transparent);box-shadow:none;}   /* keine Kontur, abgeschwächtes Grün als Bahn (Pascal 22.10.2026) */
.gruppierung .seg-knopf{background:var(--color-primary);}
.gruppierung .seg{color:var(--color-primary);}
.gruppierung .seg[aria-pressed="true"]{color:var(--color-white);}
@media (hover:hover){ .gruppierung .seg[aria-pressed="false"]:hover{color:var(--color-primary-dark);} }
:root.dark .gruppierung .seg[aria-pressed="true"]{color:var(--grund);}

/* Flüssig (Pascal 21.10.2026): Die Fliess-Ebene mit SVG-Filter und der Weichzeichner hinter den Stufen kosteten pro Bild
   das Neu-Aufteilen in Ebenen (gemessen: 48 verworfene Bilder bei vierfach gedrosselter CPU). Das Blatt ist jetzt eine
   einfache Fläche, die nur über Deckkraft und Skalierung aus dem Knopf kommt; alles läuft im Compositor. */
.am-goo{display:none;}
.angaben-menu{
  background:var(--am-flaeche);transform-origin:calc(100% - 3rem) -.5rem;
  opacity:0;scale:.96;translate:0 -.375rem;
  transition:opacity 140ms ease-out,scale 140ms ease-out,translate 140ms ease-out,display 140ms allow-discrete,overlay 140ms allow-discrete;
}
.angaben-menu:popover-open{opacity:1;scale:1;translate:0 0;transition:opacity 180ms cubic-bezier(.23,1,.32,1),scale 260ms cubic-bezier(.23,1,.32,1),translate 260ms cubic-bezier(.23,1,.32,1),display 260ms allow-discrete,overlay 260ms allow-discrete;}
@starting-style{ .angaben-menu:popover-open{opacity:0;scale:.96;translate:0 -.375rem;} }
.angaben-menu:popover-open .am-zeile{transition:opacity 180ms ease-out calc(var(--n,0) * 25ms + 60ms),translate 260ms cubic-bezier(.23,1,.32,1) calc(var(--n,0) * 25ms + 60ms);}
.am-fly,.am-fly.innen{background:var(--am-flaeche);-webkit-backdrop-filter:none;backdrop-filter:none;will-change:auto;}
.am-fly.innen{box-shadow:0 8px 24px rgb(0 0 0 / .12);}

/* Leere Liste: Spongebob «Nothing» über dem Titel (21.10.2026). */
.leer-bild{width:min(100%,20rem);aspect-ratio:4/3;margin:0 0 1.75rem;border-radius:var(--rund-gross);corner-shape:var(--ecke);overflow:hidden;background:var(--am-flaeche,color-mix(in srgb,var(--tinte) 7%,var(--grund)));}
.leer-bild video{display:block;width:100%;height:100%;object-fit:cover;}
:root.dark .leer-bild video{filter:brightness(.85) saturate(.8);}
@media (prefers-reduced-motion: reduce){ .leer-bild{display:none;} }

/* Sprechblase unter den Werkzeugen (Pascal 21.10.2026): dunkle Pille mit Spitze nach oben, darunter, damit sie nichts in der
   Zeile verdeckt. Kommt nach kurzem Verweilen, geht ohne Verzögerung. Nur mit Maus; der lange Satz bleibt im aria-label. */
@media (hover:hover){
  .z-werkzeuge .symbol[data-tipp]{position:relative;}
  /* Jede Zeile ist eine eigene Ebene (Skalierung beim Scrollen): die Zeile mit der Blase rückt nach vorn, sonst deckt die nächste sie zu */
  .zeile:has(.symbol[data-tipp]:hover){position:relative;z-index:6;}
  .z-werkzeuge .symbol[data-tipp]::after,.z-werkzeuge .symbol[data-tipp]::before{
    position:absolute;left:50%;z-index:5;pointer-events:none;
    opacity:0;translate:-50% -.25rem;transition:opacity 100ms ease-out,translate 100ms ease-out;}
  .z-werkzeuge .symbol[data-tipp]::after{
    content:attr(data-tipp);top:calc(100% + .375rem);padding:.375rem .625rem;border-radius:.5rem;white-space:nowrap;
    background:var(--tinte);color:var(--grund);font-size:.8125rem;font-weight:700;letter-spacing:.0125em;line-height:1.2;}
  .z-werkzeuge .symbol[data-tipp]::before{
    content:"";top:calc(100% + .125rem);width:.5rem;height:.5rem;background:var(--tinte);rotate:45deg;border-radius:1px;}
  .z-werkzeuge .symbol[data-tipp]:hover::after,.z-werkzeuge .symbol[data-tipp]:hover::before{
    opacity:1;translate:-50% 0;transition:opacity 160ms cubic-bezier(.23,1,.32,1) 300ms,translate 200ms cubic-bezier(.23,1,.32,1) 300ms;}
  /* Das letzte Symbol steht am rechten Rand: Blase rechtsbündig, damit sie nicht über die Zeile hinausläuft */
  .z-werkzeuge .symbol[data-tipp]:last-child::after{left:auto;right:-.25rem;translate:0 -.25rem;}
  .z-werkzeuge .symbol[data-tipp]:last-child:hover::after{translate:0 0;}
}