/* GRID.Drop - Stilblatt.
 *
 * GESTALTUNG WIE TOMORIS.COM (Auftrag TBRU, 12.10.2026): tiefe Navy-Buehne, sehr grosse und
 * fette Ueberschriften, Ueberzeilen mit orangem "+", orange Hauptknoepfe mit Leuchtschatten,
 * Linienraster und ruhige Bewegung. Die Farben, Schriften und Abstaende kommen aus
 * TOMORIS.Design (tomoris-tokens.css, tomoris-fonts.css); die Zweitwerte hinter dem Komma
 * sind die Markenfarben selbst, damit die Seite auch dann lesbar bleibt, wenn das Tokenpaket
 * einmal fehlt.
 *
 * Bewusst ohne Fremdquellen: die CSP dieses Dienstes erlaubt kein CDN und keine externe
 * Schrift (style-src 'self', font-src 'self'), und KEINE INLINE-STILE. Jede Bewegung steht
 * deshalb hier als Klasse, nie als style-Attribut im HTML.
 *
 * ZWEI FARBEN TRAGEN BEDEUTUNG, uebernommen von GRID.Whisper:
 *   Blau   (--drop-server) = das geht an unseren Server
 *   Orange (--drop-lokal)  = das bleibt in Ihrem Browser
 * Sie gelten in "Was wohin geht", in der Grafik der Buehne und in den Fortschrittsbalken, und
 * dort steht immer ein Wort oder Symbol daneben - die Aussage haengt nicht an der Farbe
 * allein. Orange ist auf tomoris.com ausserdem die Farbe der Hauptaktion; Knoepfe und
 * Akzentzeilen folgen der Webseite.
 *
 * BEWEGUNG NUR AUF WUNSCH: alles, was sich bewegt, steht hinter
 * prefers-reduced-motion: no-preference oder wird am Ende dieser Datei abgeschaltet.
 */

:root {
  color-scheme: light dark;
  --drop-server: var(--tm-accent, #1f4fe0);
  --drop-server-text: var(--tm-accent-text, #1f4fe0);
  --drop-lokal: var(--tm-accent-2, #c94409);
  --drop-lokal-ink: var(--tm-accent-2-ink, #fff);
  --drop-lokal-text: var(--tm-accent-2-text, #9a3412);
  --drop-grund: var(--tm-bg, #f2f4f9);
  --drop-grund-weich: var(--tm-bg-soft, #e8ecf5);
  --drop-text: var(--tm-text-1, #0d1b3d);
  --drop-leise: var(--tm-text-2, #43536f);
  --drop-karte: var(--tm-surface, #fff);
  --drop-karte-zwei: var(--tm-surface-2, #f5f7fc);
  --drop-linie: var(--tm-border, #dde3ef);
  --drop-linie-stark: var(--tm-border-strong, #c6cfe0);
  --drop-hover: var(--tm-hover, #f7f9fd);
  --drop-schatten: var(--tm-shadow, 0 2px 8px rgba(3, 15, 92, .07), 0 12px 32px rgba(3, 15, 92, .06));
  --drop-glas: var(--tm-glass, rgba(255, 255, 255, .72));
  --drop-glas-linie: var(--tm-glass-border, rgba(13, 27, 61, .1));
  --drop-radius: var(--tm-radius-button, 12px);
  --drop-radius-karte: var(--tm-radius-card, 16px);
  --drop-ease: var(--tm-ease, cubic-bezier(.2, .7, .3, 1));

  /* Die Buehne ist in BEIDEN Farbschemata dunkel - wie Kopf und Fuss von tomoris.com. */
  --drop-buehne: var(--tm-stage, #030f5c);
  --drop-buehne-zwei: var(--tm-stage-2, #16247a);
  --drop-buehne-linie: var(--tm-stage-border, #4a60da);
  --drop-buehne-text: var(--tm-stage-ink, #fff);
  --drop-buehne-leise: var(--tm-stage-text-2, #c3ccf5);
  --drop-buehne-akzent: var(--tm-stage-accent, #ff8a45);
  --drop-buehne-blau: #6f95ff;

  --drop-breite: 76rem;
  --drop-rand: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  /* minmax(0, 1fr) statt der impliziten auto-Spalte: sonst waechst die Spalte auf den breitesten
     Min-Content, etwa einen langen Dateinamen, und die schmale Ansicht laeuft seitlich ueber. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  font-family: var(--tm-font, "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  background-color: var(--drop-grund);
  color: var(--drop-text);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--drop-server-text); text-underline-offset: .2em; }

/* --------------------------------------------------------------------- Kopf */

header {
  position: sticky; top: 0; z-index: 30;
  background: var(--drop-glas);
  border-bottom: 1px solid var(--drop-glas-linie);
  backdrop-filter: saturate(1.4) blur(14px);
}
.seitenkopf {
  max-width: var(--drop-breite); margin: 0 auto; padding: .7rem var(--drop-rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marke {
  /* gap 0: der Text "GRID" und das <span> ".Drop" sind getrennte Flex-Elemente; ein gap
     setzte eine Luecke mitten in die Marke (gesehen 12.10.2026, "GRID .DROP"). */
  display: inline-flex; align-items: center; gap: 0;
  font-weight: 900; letter-spacing: .04em; text-decoration: none; color: var(--drop-text);
  font-size: 1.05rem; text-transform: uppercase; line-height: 1;
}
.marke span { color: var(--drop-lokal); }
.marke-zeichen { width: 1.9rem; height: 1.9rem; flex: none; margin-right: .6rem; }
.marke-zeichen .flaeche { fill: var(--drop-buehne); }
.marke-zeichen .punkt { fill: #fff; }
.marke-zeichen .glut { fill: var(--drop-buehne-akzent); }
.kopf-rechts { display: flex; align-items: center; gap: .75rem; }
.kopf-link {
  font-weight: 800; font-size: .85rem; text-decoration: none; color: var(--drop-text);
  white-space: nowrap;
}
.kopf-link:hover { color: var(--drop-lokal-text); }

.sprache { width: auto; min-height: 2.25rem; height: 2.25rem; padding: .2rem 2rem .2rem .7rem; font-size: .85rem; }

/* --------------------------------------------------------- Allgemeine Typo */

h1, h2, h3 { color: inherit; line-height: 1.1; margin: 0; }
h1 { font-weight: 900; letter-spacing: -.015em; }
h2 { font-weight: 900; letter-spacing: -.012em; }
h3 { font-weight: 800; }

.ueberzeile {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1rem; font-size: .75rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--drop-leise);
}
.ueberzeile::before { content: "+"; color: var(--drop-lokal); font-size: 1.1rem; font-weight: 700; letter-spacing: 0; }

.fuehrung { color: var(--drop-leise); margin: 0 0 1rem; }
.klein { font-size: .875rem; }

/* ------------------------------------------------------------------ Buehne */

.buehne {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--drop-buehne-text);
  background-color: var(--drop-buehne);
  background-image:
    radial-gradient(58rem 34rem at 82% 28%, rgba(61, 114, 255, .38), transparent 62%),
    radial-gradient(40rem 28rem at 6% 112%, rgba(255, 106, 43, .22), transparent 60%),
    linear-gradient(180deg, var(--drop-buehne) 0%, #020a3f 100%);
}
.buehne::before {
  /* Das Linienraster der Webseite, nach aussen ausgeblendet. */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 3.25rem 3.25rem;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(80% 70% at 70% 40%, #000 30%, transparent 85%);
}
.buehne a:not(.knopf) { color: var(--drop-buehne-text); }
.buehne .ueberzeile { color: var(--drop-buehne-leise); }
.buehne .ueberzeile::before { color: var(--drop-buehne-akzent); }

.buehne-innen {
  max-width: var(--drop-breite); margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) var(--drop-rand) clamp(3rem, 7vw, 5.5rem);
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .buehne-innen { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}

/* GROESSE NACH SPALTE, nicht nach Fenster: das laengste Wort ("VERSCHLUESSELT.") muss in
   die Textspalte passen. Mit 5.4rem brach es bei 1440 px mitten im Wort um (gesehen
   12.10.2026, "VERSCHLUES / SELT."). overflow-wrap ist hier deshalb AUS und die Trennung
   silbengerecht (hyphens, lang="de"/"en") - ein Notnagel fuer sehr schmale Fenster. */
.buehne h1 {
  font-size: clamp(2.05rem, .6rem + 6vw, 3.6rem); line-height: .95;
  text-transform: uppercase; letter-spacing: -.025em; margin-bottom: 1.5rem;
  overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto;
}
@media (min-width: 62rem) {
  .buehne h1 { font-size: clamp(2.6rem, .4rem + 3.6vw, 4rem); }
}
.buehne h1 .zeile { display: block; }
.buehne h1 .akzent { color: var(--drop-buehne-akzent); }
.buehne-fuehrung { color: var(--drop-buehne-leise); font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); max-width: 36rem; margin: 0 0 2rem; }

.handlung { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.textlink {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: .1rem;
}
.textlink .pfeil { transition: transform var(--tm-dur-fast, 160ms) var(--drop-ease); }
.textlink:hover .pfeil { transform: translateX(4px); }

/* --------------------------------------------------- Grafik auf der Buehne */

.szene { width: 100%; max-width: 34rem; justify-self: center; }
.szene svg { display: block; width: 100%; height: auto; overflow: visible; }
.szene .rahmen { fill: rgba(255, 255, 255, .045); stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
.szene .rahmen-kopf { fill: rgba(255, 255, 255, .07); }
.szene .knopfpunkt { fill: rgba(255, 255, 255, .35); }
.szene .datei { fill: #ffffff; }
.szene .datei-falz { fill: #d7def3; }
.szene .datei-zeile { fill: #c5cff0; }
.szene .schloss { fill: var(--drop-buehne-akzent); }
.szene .schloss-buegel { fill: none; stroke: var(--drop-buehne-akzent); stroke-width: 4; stroke-linecap: round; }
.szene .schluessel { fill: none; stroke: var(--drop-buehne-akzent); stroke-width: 3.2; stroke-linecap: round; }
.szene .bahn { fill: none; stroke: rgba(111, 149, 255, .55); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.szene .paket { fill: var(--drop-buehne-blau); }
/* Ohne Bewegung stehen die drei Pakete verteilt auf der Bahn; mit Bewegung uebernimmt die
   Animation die Verschiebung. */
.szene .paket.p2 { transform: translateX(46px); }
.szene .paket.p3 { transform: translateX(92px); }
.szene .wuerfel-oben { fill: #6f95ff; }
.szene .wuerfel-links { fill: #2b55e6; }
.szene .wuerfel-rechts { fill: #1a3bb8; }
.szene .wuerfel-kante { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; stroke-linejoin: round; }
.szene .glut-blau { fill: #3d72ff; opacity: .55; }
.szene .uhr-spur { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 5; }
.szene .uhr { fill: none; stroke: var(--drop-buehne-akzent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 427; stroke-dashoffset: 0; transform-origin: 400px 214px; transform: rotate(-90deg); }
.szene text { fill: var(--drop-buehne-leise); font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.szene text.orange { fill: var(--drop-buehne-akzent); }
.szene text.uhr-zahl { fill: #fff; font-size: 15px; letter-spacing: .04em; }

/* ------------------------------------------------------------ Eckdaten */

.eckdaten {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .14);
}
@media (min-width: 48rem) { .eckdaten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eckdaten li { padding: 1.4rem var(--drop-rand) 1.6rem; border-right: 1px solid rgba(255, 255, 255, .1); }
.eckdaten li:last-child { border-right: 0; }
.eckdaten strong { display: block; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.eckdaten span { display: block; margin-top: .35rem; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--drop-buehne-leise); }
.eckdaten-band { max-width: var(--drop-breite); margin: 0 auto; }

/* --------------------------------------------------------------- Abschnitte */

.abschnitt { max-width: var(--drop-breite); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6.5rem) var(--drop-rand); }
.abschnitt + .abschnitt { padding-top: 0; }
.abschnitt-kopf { display: grid; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 62rem) { .abschnitt-kopf { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.abschnitt-kopf h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); line-height: 1.02; }
.abschnitt-kopf .fuehrung { margin: 0; font-size: 1.05rem; max-width: 34rem; }

/* Schritte */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); counter-reset: schritt; }
@media (min-width: 52rem) { .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.karte {
  position: relative; min-width: 0; overflow: hidden;
  padding: 1.6rem 1.5rem 1.7rem;
  border: 1px solid var(--drop-linie); border-radius: var(--drop-radius-karte);
  background-color: var(--drop-karte); box-shadow: var(--drop-schatten);
  transition: transform var(--tm-dur-slow, 320ms) var(--drop-ease), box-shadow var(--tm-dur-slow, 320ms) var(--drop-ease), border-color var(--tm-dur-slow, 320ms);
}
.karte::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--drop-lokal), var(--drop-server));
  transform: scaleX(0); transform-origin: left; transition: transform var(--tm-dur-slow, 320ms) var(--drop-ease);
}
.karte:hover { transform: translateY(-4px); border-color: var(--drop-linie-stark); }
.karte:hover::after { transform: scaleX(1); }
.karte h3 { font-size: 1.2rem; margin: 1.1rem 0 .5rem; }
.karte p { margin: 0; color: var(--drop-leise); }
.karte .nummer { position: absolute; right: 1.25rem; top: 1rem; font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--drop-linie-stark); letter-spacing: -.02em; }
.symbol { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 14px; background-color: var(--tm-accent-2-soft, #fef4ef); }
.symbol svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--drop-lokal-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.symbol.blau { background-color: var(--tm-accent-soft, #eef3ff); }
.symbol.blau svg { stroke: var(--drop-server-text); }

/* Was wohin geht - DIE FARBTRENNUNG IST DAS PRODUKT. */
.wohin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 0; }
@media (min-width: 48rem) { .wohin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wohin > div {
  position: relative; min-width: 0; padding: 1.5rem 1.5rem 1.4rem;
  border-radius: var(--drop-radius-karte); background-color: var(--drop-karte);
  border: 1px solid var(--drop-linie); border-top: 4px solid; box-shadow: var(--drop-schatten);
}
.wohin .server { border-top-color: var(--drop-server); }
.wohin .lokal { border-top-color: var(--drop-lokal); }
.wohin-kopf { display: flex; align-items: center; gap: .9rem; margin-bottom: .75rem; }
.wohin h3 { font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.wohin .server h3 { color: var(--drop-server-text); }
.wohin .lokal h3 { color: var(--drop-lokal-text); }
.wohin ul { margin: 0; padding-left: 1.15rem; color: var(--drop-leise); }
.wohin li { margin: .35rem 0; }
.wohin li::marker { color: var(--drop-linie-stark); }

/* Einsatz */
.einsatz { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .einsatz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.einsatz li { padding: 1.25rem 1.35rem; border-left: 3px solid var(--drop-lokal); background-color: var(--drop-karte-zwei); border-radius: 0 var(--drop-radius) var(--drop-radius) 0; }
.einsatz strong { display: block; font-size: 1.05rem; margin-bottom: .3rem; }
.einsatz span { color: var(--drop-leise); }

/* Fragen */
.fragen { display: grid; gap: .9rem; }
.kasten {
  border: 1px solid var(--drop-linie); border-radius: var(--drop-radius-karte);
  padding: 1.15rem 1.35rem; background-color: var(--drop-karte); margin: .75rem 0;
}
.kasten ul { margin: 0; padding-left: 1.15rem; color: var(--drop-leise); }
.kasten li { margin: .45rem 0; }
.details-kasten { margin: 0; transition: border-color var(--tm-dur-fast, 160ms); }
.details-kasten:hover { border-color: var(--drop-linie-stark); }
.details-kasten summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 1.05rem; font-weight: 900; letter-spacing: .01em;
}
.details-kasten summary::-webkit-details-marker { display: none; }
.details-kasten summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  background-color: var(--tm-accent-2-soft, #fef4ef); color: var(--drop-lokal-text); font-size: 1.3rem; font-weight: 700;
  transition: transform var(--tm-dur-slow, 320ms) var(--drop-ease);
}
.details-kasten[open] summary::after { transform: rotate(45deg); }
.details-kasten[open] summary { margin-bottom: .9rem; }

/* Schlussband */
.schlussband { background-color: var(--drop-buehne); }
.schluss {
  max-width: var(--drop-breite); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--drop-rand);
  display: grid; gap: 1.75rem; align-items: center; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) { .schluss { grid-template-columns: minmax(0, 1fr) auto; } }
.schluss h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.02; color: #fff; text-transform: uppercase; letter-spacing: -.015em; }
.schluss h2 .akzent { color: var(--drop-buehne-akzent); }

/* ------------------------------------------------------------------- Fuss */

.fuss { background-color: #020a3f; color: var(--drop-buehne-leise); font-size: .9rem; }
.fuss-innen {
  max-width: var(--drop-breite); margin: 0 auto; padding: 2.5rem var(--drop-rand) 1.5rem;
  display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) { .fuss-innen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.fuss .marke { color: #fff; }
.fuss .marke span { color: var(--drop-buehne-akzent); }
.fuss p { margin: .75rem 0 0; max-width: 28rem; }
.fuss nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.fuss a { color: #fff; text-decoration: none; font-weight: 700; }
.fuss a:hover { color: var(--drop-buehne-akzent); text-decoration: underline; }
.fuss-zeile {
  max-width: var(--drop-breite); margin: 0 auto; padding: 1rem var(--drop-rand) 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}

/* ------------------------------------------------------- Formularelemente */

label { display: block; margin: 1.1rem 0 .35rem; font-size: .85rem; font-weight: 800; letter-spacing: .01em; }

input, select, textarea, button, .knopf {
  width: 100%; min-height: 2.875rem; padding: .65rem .85rem; font: inherit;
  border-radius: var(--drop-radius);
  border: 1px solid var(--drop-linie-stark);
  background-color: var(--tm-field, var(--drop-karte)); color: var(--drop-text);
  transition: border-color var(--tm-dur-fast, 160ms), background-color var(--tm-dur-fast, 160ms), box-shadow var(--tm-dur-fast, 160ms), transform var(--tm-dur-fast, 160ms) var(--drop-ease);
}
/* 46 px und nicht genau 44: bei 44 px mass die UI-Reise ein Auswahlfeld mit 43,9999 px
   (Rundung, 12.10.2026) - eine Untergrenze, auf die man genau baut, faellt beim ersten
   Subpixel durch. */
input:not([type="file"]), select, button, .knopf { height: 2.875rem; }
input:focus, select:focus, textarea:focus { border-color: var(--drop-server); }
textarea { resize: vertical; word-break: break-all; font-family: var(--tm-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace); font-size: .85rem; }

button, .knopf { cursor: pointer; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 800; }
button:disabled { opacity: .55; cursor: progress; }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
button:not(:disabled):hover, .knopf:hover, select:hover { background-color: var(--drop-hover); }

/* DER HAUPTKNOPF wie auf tomoris.com: Orange, fett, mit Leuchtschatten. Die Flaeche bleibt eine
   DECKENDE Farbe - die UI-Reise misst den Kontrast gegen backgroundColor, und ein Verlauf als
   background-image waere dort unsichtbar. */
.haupt {
  margin-top: 1.25rem; height: auto; min-height: 3.1rem; padding: .8rem 1.5rem;
  background-color: var(--drop-lokal); color: var(--drop-lokal-ink); border-color: transparent;
  font-weight: 900; letter-spacing: .02em;
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--drop-lokal) 70%, transparent);
}
.haupt:not(:disabled):hover { background-color: color-mix(in srgb, var(--drop-lokal) 88%, #000); transform: translateY(-2px); box-shadow: 0 16px 38px -10px color-mix(in srgb, var(--drop-lokal) 80%, transparent); }
.haupt .pfeil { transition: transform var(--tm-dur-fast, 160ms) var(--drop-ease); }
.haupt:hover .pfeil { transform: translate(3px, -3px); }
a.haupt { width: auto; display: inline-flex; margin-top: 0; }
.zweit { background-color: transparent; }
.gefahr { color: var(--drop-lokal-text); border-color: var(--drop-lokal); background-color: transparent; }

/* SICHTBARER FOKUS, an einer Eigenschaft, die auch bei erzwungenen Farben erhalten bleibt. */
/* Mindestens 3 px: TOMORIS.Design 3.7.0 setzt --tm-focus-width auf 2 px, Drop verlangt 3 px
   (UI-Reise, Fokuspruefung). max() nimmt den groesseren Wert, das Token kann also nur dicker machen. */
:focus-visible { outline: max(3px, var(--tm-focus-width, 3px)) solid var(--tm-focus-color, var(--drop-server)); outline-offset: var(--tm-focus-offset, 2px); }
.buehne :focus-visible, .fuss :focus-visible, .schlussband :focus-visible { outline-color: #fff; }

.reihe { display: flex; gap: 1rem; flex-wrap: wrap; }
.reihe > * { flex: 1 1 12rem; }

/* ------------------------------------------------- Anwendung (Ablegen/Abholen) */

main { width: 100%; }
.anwendung, .betrieb, .rechtstext { max-width: 54rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--drop-rand) 5rem; }
.betrieb { max-width: var(--drop-breite); }
.anwendung > section[data-sicht]:not([hidden]) {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--drop-linie);
  border-radius: calc(var(--drop-radius-karte) + 4px);
  background-color: var(--drop-karte);
  box-shadow: var(--drop-schatten);
}
.anwendung h1, .betrieb h1, .rechtstext h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.02; margin-bottom: .8rem; text-transform: uppercase; }
.anwendung h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.anwendung .wohin { margin-top: 1.25rem; }
.anwendung .wohin > div { box-shadow: none; padding: 1.1rem 1.2rem; }

/* Die Anwendung liegt auf einem Navy-Band wie die Panels auf tomoris.com. Nur hier und nicht
   in Betrieb oder Datenschutz: dort stehen Ueberschriften direkt auf dem Grund und waeren auf
   dem Band unlesbar. Die Grundfarbe des body bleibt deckend - die UI-Reise misst gegen sie. */
body:has(> main.anwendung) {
  background-image:
    radial-gradient(48rem 18rem at 78% 0, rgba(61, 114, 255, .35), transparent 70%),
    linear-gradient(180deg, var(--drop-buehne) 0, var(--drop-buehne) 15rem, transparent 15rem);
  background-repeat: no-repeat;
}
/* Ueber dem Band waere die Glas-Kopfzeile lila durchscheinend; hier deckt sie. */
body:has(> main.anwendung) > header { background-color: var(--drop-karte); backdrop-filter: none; }


.ziehfeld {
  display: block; height: auto;
  margin-top: .5rem; padding: 2.4rem 1.25rem; text-align: center;
  border: 2px dashed var(--drop-linie-stark); border-radius: var(--drop-radius-karte);
  background-color: var(--drop-karte-zwei); cursor: pointer;
}
.ziehfeld::before {
  content: ""; display: block; width: 3.25rem; height: 3.25rem; margin: 0 auto .9rem; border-radius: 16px;
  background-color: var(--tm-accent-2-soft, #fef4ef);
  background-image: linear-gradient(var(--drop-lokal), var(--drop-lokal)), linear-gradient(var(--drop-lokal), var(--drop-lokal));
  background-size: 3px 1.4rem, 1.4rem 3px; background-position: center; background-repeat: no-repeat;
  transition: transform var(--tm-dur-slow, 320ms) var(--drop-ease);
}
.ziehfeld:hover, .ziehfeld:focus-visible { border-color: var(--drop-lokal); background-color: var(--tm-accent-2-soft, #fef4ef); }
.ziehfeld:hover::before { transform: rotate(90deg) scale(1.05); }
.ziehfeld.bereit { border-color: var(--drop-lokal); border-style: solid; }
.ziehfeld p { margin: .35rem 0 0; color: var(--drop-leise); font-size: .95rem; }
.ziehfeld strong { font-size: 1.15rem; }
/* Gesperrt nur ueber aria-disabled, nicht disabled: das Feld muss einen Drop weiter abfangen. */
.ziehfeld[aria-disabled="true"] { opacity: .55; cursor: not-allowed; border-color: var(--drop-linie-stark); }

.dateiliste { list-style: none; padding: 0; margin: 1rem 0 0; }
.dateiliste li {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .8rem; border: 1px solid var(--drop-linie);
  border-radius: var(--drop-radius); margin-bottom: .45rem; background-color: var(--drop-karte);
}
.dateiliste .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dateiliste .groesse { color: var(--drop-leise); font-size: .85rem; white-space: nowrap; }
.dateiliste button { width: auto; padding: .15rem .6rem; font-size: .8rem; }

/* Fortschritt */
.fortschritt { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--drop-linie); border-radius: var(--drop-radius); background-color: var(--drop-karte-zwei); }
.fortschritt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.fortschritt-kopf:first-child { margin-top: 0; }
.fortschritt-kopf p { margin: 0; font-weight: 700; }
.fortschritt-kopf output { min-width: 3.5rem; text-align: right; color: var(--drop-leise); font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 800; }
.balken { position: relative; height: .7rem; border-radius: 999px; overflow: hidden; background-color: var(--drop-linie); margin-top: .4rem; }
.balken > i { position: relative; display: block; height: 100%; width: 0; border-radius: inherit; background-color: var(--drop-lokal); transition: width .2s linear; overflow: hidden; }
/* Der Balken der Uebertragung ist BLAU, der des Verschluesselns ORANGE - dieselbe Farbaussage
   wie ueberall auf der Seite, und die Beschriftung steht daneben. */
.balken.zumserver > i { background-color: var(--drop-server); }

/* Angaben */
dl.angaben { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .5rem 1rem; margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid var(--drop-linie); border-radius: var(--drop-radius); background-color: var(--drop-karte-zwei); }
dl.angaben dt { font-weight: 800; color: var(--drop-leise); font-size: .85rem; }
dl.angaben dd { margin: 0; }

.warnung { border-left: 3px solid var(--drop-lokal); padding: .65rem .85rem; background-color: var(--tm-accent-2-soft, transparent); color: var(--drop-lokal-text); border-radius: 0 var(--drop-radius) var(--drop-radius) 0; }
.merksatz { border-left: 3px solid var(--drop-server); padding-left: .85rem; font-weight: 700; }

details:not(.details-kasten) { margin-top: 1rem; }
summary { cursor: pointer; font-weight: 700; }
details button { margin-top: .75rem; }

/* Erfolg: ein Haken, der sich zeichnet. Nur Zierde - die Aussage steht im Titel. */
.erfolg { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; }
.erfolg circle { fill: var(--tm-ok-fill, #e4f4ec); }
.erfolg path { fill: none; stroke: var(--tm-ok, #0f9d63); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }

.stand { position: fixed; z-index: 40; left: 50%; bottom: 1rem; width: min(calc(100% - 2rem), 46rem); transform: translateX(-50%); margin: 0; padding: .85rem 1.1rem; border: 1px solid var(--drop-linie-stark); border-left: 4px solid var(--drop-server); border-radius: var(--drop-radius); background-color: var(--drop-karte); color: var(--drop-text); box-shadow: var(--tm-shadow-overlay, var(--drop-schatten)); font-size: .95rem; }
.stand:empty { display: none; }
.stand.fehler { border-left-color: var(--drop-lokal); color: var(--drop-lokal-text); font-weight: 800; }

/* ------------------------------------------------------- Betriebsansicht */

/* Die Ampel benutzt die Zustandsfarben aus TOMORIS.Design (--tm-ok/-warn/-crit) und
   ausdruecklich NICHT Blau und Orange: die beiden tragen auf dieser Domain die Aussage
   "geht an den Server" und "bleibt im Browser". */
.betrieb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 0 0 1.25rem; }
.betrieb-kopf p { margin: 0; color: var(--drop-leise); }
.betrieb-knoepfe { display: flex; gap: .5rem; margin-left: auto; }
.betrieb-knoepfe button { width: auto; padding: 0 1.1rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.1rem; align-items: start; margin-bottom: 1.25rem; }
.kachel { min-width: 0; padding: 1.15rem 1.25rem; border: 1px solid var(--drop-linie); border-top: 4px solid var(--drop-linie-stark); border-radius: var(--drop-radius-karte); background-color: var(--drop-karte); box-shadow: var(--drop-schatten); }
.kachel h2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .6rem; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
/* Angabe ueber Wert, in jeder Breite (gemessen 1440 px, 10.10.2026). minmax(0, 1fr): der
   ungebrochene Versions-Hash schob die 390-px-Ansicht sonst auf 398 px. */
.kachel dl.angaben { grid-template-columns: minmax(0, 1fr); gap: .1rem; margin: .5rem 0; background: transparent; border: 0; padding: 0; }
.kachel dd { margin-bottom: .6rem; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.kachel dd.fest { font-family: var(--tm-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace); font-size: .85rem; }
.ampel { font-size: .72rem; font-weight: 800; letter-spacing: .03em; padding: .18rem .55rem; border-radius: 999px; text-transform: none; }
.ampel:empty { display: none; }
.kachel[data-ampel="ok"] { border-top-color: var(--tm-ok, #0f9d63); }
.kachel[data-ampel="ok"] .ampel { background-color: var(--tm-ok-fill, #e4f4ec); color: var(--tm-ok-ink, #0a7048); }
.kachel[data-ampel="warn"] { border-top-color: var(--tm-warn, #b07a05); }
.kachel[data-ampel="warn"] .ampel { background-color: var(--tm-warn-fill, #faf0dc); color: var(--tm-warn-ink, #7a5500); }
.kachel[data-ampel="crit"] { border-top-color: var(--tm-crit, #d93a25); }
.kachel[data-ampel="crit"] .ampel { background-color: var(--tm-crit-fill, #fbe7e5); color: var(--tm-crit-ink, #a82a18); }
.kachel .balken > i { background-color: var(--drop-leise); }

/* ------------------------------------------------------------- Rechtstext */

.rechtstext h2 { font-size: 1.3rem; margin: 2.4rem 0 .6rem; }
.rechtstext p, .rechtstext li { color: var(--drop-leise); }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin: .35rem 0; }
.rechtstext .stand-datum { font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--drop-leise); }

/* ------------------------------------------------------------ Handy-Ansicht */

@media (max-width: 34rem) {
  .seitenkopf { padding: .6rem .9rem; }
  .kopf-link { display: none; }
  .anwendung > section[data-sicht]:not([hidden]) { padding: 1.1rem; border-radius: 14px; }
  dl.angaben { grid-template-columns: 1fr; gap: .1rem; }
  dl.angaben dd { margin-bottom: .5rem; }
  .ziehfeld { padding: 1.75rem .9rem; }
  .dateiliste li { flex-wrap: wrap; }
  .dateiliste .name { flex-basis: calc(100% - 5rem); }
  .eckdaten li { padding: 1.1rem 1rem 1.2rem; }
  .eckdaten li:nth-child(2n) { border-right: 0; }
  .eckdaten li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
}

@media (forced-colors: active) {
  .haupt, .gefahr, .ziehfeld, .wohin > div, .warnung, .merksatz, .karte { border: 2px solid ButtonText; }
  .balken > i { background: Highlight; }
}

/* ===================================================================== Bewegung
 *
 * Alles hier steht unter prefers-reduced-motion: no-preference. Wer im Betriebssystem
 * weniger Bewegung eingestellt hat, sieht dieselbe Seite ohne sie - und die globale Regel
 * am Ende schaltet auch Uebergaenge ab, damit ein Fortschrittsbalken springt statt laeuft.
 */

@keyframes drop-auftauchen { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes drop-einblenden { from { opacity: 0; } to { opacity: 1; } }
/* Der Endzustand schneidet NICHT auf die Zeilenbox: bei line-height .95 ragen Umlautpunkte
   darueber hinaus, und inset(0) machte aus "Ue" und "Oe" einen Strich (gesehen 12.10.2026). */
@keyframes drop-zeile { from { opacity: 0; transform: translateY(.45em); clip-path: inset(-.5em -.2em 100% -.2em); } to { opacity: 1; transform: none; clip-path: inset(-.5em -.2em -.3em -.2em); } }
@keyframes drop-raster { from { background-position: 0 0, 0 0; } to { background-position: 0 3.25rem, 3.25rem 0; } }
@keyframes drop-paket { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(150px); opacity: 0; } }
@keyframes drop-uhr { 0% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 427; } 100% { stroke-dashoffset: 427; } }
@keyframes drop-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes drop-gluehen { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .7; transform: scale(1.06); } }
@keyframes drop-schloss { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-3px); } 86% { transform: translateY(0); } }
@keyframes drop-schimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes drop-haken { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes drop-leuchten { 0%, 100% { box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--drop-lokal) 70%, transparent); } 50% { box-shadow: 0 14px 44px -6px color-mix(in srgb, var(--drop-lokal) 95%, transparent); } }

@media (prefers-reduced-motion: no-preference) {
  /* Buehne: Zeilen steigen nacheinander auf, dann Text und Knoepfe. */
  .buehne h1 .zeile { animation: drop-zeile .9s var(--drop-ease) both; }
  .buehne h1 .zeile:nth-child(2) { animation-delay: .12s; }
  .buehne h1 .zeile:nth-child(3) { animation-delay: .24s; }
  .buehne .ueberzeile, .buehne-fuehrung { animation: drop-auftauchen .8s var(--drop-ease) .3s both; }
  .buehne .handlung { animation: drop-auftauchen .8s var(--drop-ease) .45s both; }
  .buehne .szene { animation: drop-einblenden 1.2s var(--drop-ease) .2s both; }
  .buehne::before { animation: drop-raster 18s linear infinite; }
  .buehne .haupt { animation: drop-leuchten 3.6s ease-in-out 1.5s infinite; }

  /* Grafik: Pakete laufen zum Server, die Uhr laeuft ab, der Wuerfel schwebt. */
  .szene .paket { animation: drop-paket 3.2s linear infinite; }
  .szene .paket.p2 { animation-delay: -1.07s; }
  .szene .paket.p3 { animation-delay: -2.14s; }
  .szene .uhr { animation: drop-uhr 9s linear infinite; }
  .szene .wuerfel { animation: drop-schweben 5s ease-in-out infinite; }
  .szene .glut-blau { animation: drop-gluehen 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .szene .schloss-gruppe { animation: drop-schloss 3.2s ease-in-out infinite; }

  /* Ansichten der Anwendung blenden weich ein. */
  .anwendung > section[data-sicht]:not([hidden]), .betrieb > section:not([hidden]) { animation: drop-auftauchen .5s var(--drop-ease) both; }
  .erfolg path { animation: drop-haken .7s var(--drop-ease) .2s both; }

  /* Laufender Balken: ein Lichtstreif zeigt, dass gerade gearbeitet wird. */
  .balken[aria-valuenow]:not([aria-valuenow="0"]):not([aria-valuenow="100"]) > i::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: drop-schimmer 1.1s linear infinite;
  }
}

/* Abschnitte tauchen beim Scrollen auf - nur wo der Browser scrollgebundene Animationen
   kann. Ohne sie bleibt alles einfach sichtbar; kein Skript, kein unsichtbarer Inhalt. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .auftauchen { animation: drop-auftauchen linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt hier keine. Der
   Fortschrittsbalken springt dann auf seinen Wert, statt dorthin zu laufen - die
   INFORMATION bleibt vollstaendig, nur die Animation faellt weg. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}