/* Kundenseite efb-dateien im Auftritt von eventforumbern.ch: Grund #FAFAFA, Text #2A2A2A, Blau #0071ED,
   Nachtblau #1B396A, Poppins 400/500/600, eckige Knöpfe, Bilder als Rauten. Erkennungszeichen dieser
   Seite ist die Bühne: die Ablage als nachtblaue Fläche mit zwei Lichtkegeln, die beim Hineinziehen
   aufleuchten. Menü und Fuss folgen der Website (Inhalte in auftritt.js). */

@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(fonts/Poppins-Regular.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(fonts/Poppins-Medium.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(fonts/Poppins-SemiBold.woff2) format("woff2"); }

:root {
  color-scheme: light dark;
  --bg: #FAFAFA;
  --bg2: #F1F5FA;
  --bg3: #E3EBF5;
  --card: #FFFFFF;
  --ink: #2A2A2A;
  --text2: #4B4B4B;
  --muted: #666666;
  --line: #E2E7EE;
  --blue: #0071ED;
  --blue-hover: #005FCC;
  --link: #0071ED;
  --navy: #1B396A;
  --navy-hell: #2A5596;
  --hell: #1F8BFF;
  --warn: #A4460E;
  --wm-t: #2A2A2A;
  --wm-b: #0071ED;
  --shadow: 0 1px 3px rgba(27, 57, 106, .06), 0 12px 36px rgba(27, 57, 106, .10);
  --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--blue);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --kopf-h: 76px;
}
@media (min-width: 1240px) { :root { --kopf-h: 112px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1F3B;
    --bg2: #132A4D;
    --bg3: #1A355E;
    --card: #132A4D;
    --ink: #EEF3FA;
    --text2: #C9D5E5;
    --muted: #9DB0C9;
    --line: #24406A;
    --link: #6FB0FF;
    --navy: #1B396A;
    --navy-hell: #2B5DA6;
    --hell: #4C9BFF;
    --warn: #F2A36B;
    --wm-t: #EEF3FA;
    --wm-b: #4C9BFF;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 40px rgba(0, 0, 0, .30);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}
[hidden] { display: none !important; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: none; box-shadow: var(--focus); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
main:focus { outline: none; }

.breit { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .breit { padding: 0 30px; } }
.spalte { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .spalte { padding: 0 30px; } }

.springen {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--blue); color: #fff; font-weight: 500; text-decoration: none;
}
.springen:focus { top: 8px; color: #fff; }

/* ---- Kopfzeile wie die Website ---------------------------------------------------------- */

.kopf { position: relative; z-index: 30; background: var(--bg); }
.kopf-innen { display: flex; align-items: center; gap: 24px; min-height: var(--kopf-h); }
.logo-link { display: block; flex: none; line-height: 0; }
.wortmarke { display: block; width: 150px; height: 38px; }
@media (min-width: 1240px) { .wortmarke { width: 180px; height: 45px; } }

.hauptnav { flex: 1; }
.hauptnav > ul { list-style: none; margin: 0; padding: 0; }
.nav-punkt {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 1rem/1.2 Poppins, sans-serif; color: var(--ink); text-decoration: none; white-space: nowrap;
  background: none; border: 0; padding: 10px 9px; cursor: pointer;
}
.nav-punkt:hover { color: var(--blue); }
.pfeil-unten { width: 12px; height: 12px; flex: none; transition: transform .2s var(--ease); }
.pfeil-aussen { width: 12px; height: 12px; flex: none; }
.hat-sub.offen > .nav-punkt .pfeil-unten { transform: rotate(180deg); }
.sub { list-style: none; margin: 0; padding: 0; }
.sub a { display: block; color: var(--ink); text-decoration: none; font-size: .9375rem; }
.sub a:hover { color: var(--blue); }

.kopf-rechts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.sprachwahl { position: relative; }
.sprache-knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  font: 600 .875rem/1 Poppins, sans-serif; color: var(--ink);
  background: var(--bg3); border: 0; cursor: pointer;
}
.sprache-knopf[aria-expanded="true"] .pfeil-unten { transform: rotate(180deg); }
.sprach-menue {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  list-style: none; margin: 0; padding: 6px 0; min-width: 160px;
  background: var(--card); box-shadow: var(--shadow);
}
.sprach-menue button {
  display: block; width: 100%; text-align: left; padding: 10px 18px; min-height: 44px;
  font: 500 .9375rem/1.2 Poppins, sans-serif; color: var(--ink); background: none; border: 0; cursor: pointer;
}
.sprach-menue button:hover { color: var(--blue); }
.sprach-menue button[aria-pressed="true"] { color: var(--blue); }

.knopf.cta, .knopf.cta-mobil { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
.knopf.cta:hover, .knopf.cta-mobil:hover { color: #fff; }

.burger { display: none; width: 44px; height: 44px; padding: 11px 8px; background: none; border: 0; cursor: pointer; }
.burger span { display: block; height: 2px; margin: 0 0 7px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; }
.burger span:last-child { margin: 0; }
.menue-offen .burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menue-offen .burger span:nth-child(2) { opacity: 0; }
.menue-offen .burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (min-width: 1240px) {
  .hauptnav { display: flex; justify-content: center; }
  .hauptnav > ul { display: flex; align-items: center; gap: 4px; }
  .hat-sub { position: relative; }
  .sub {
    position: absolute; left: 0; top: 100%; z-index: 40; min-width: 260px; padding: 10px 0;
    background: var(--card); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s, transform .18s var(--ease), visibility 0s .18s;
  }
  .sub a { padding: 9px 22px; }
  .hat-sub:hover > .sub, .hat-sub.offen > .sub {
    opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s var(--ease);
  }
  .cta-mobil { display: none !important; }
}
@media (max-width: 1239.98px) {
  .burger { display: block; }
  .hauptnav {
    display: none; position: absolute; left: 0; right: 0; top: var(--kopf-h);
    height: calc(100dvh - var(--kopf-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 16px 32px; background: var(--bg); border-top: 1px solid var(--line);
  }
  .menue-offen .hauptnav { display: block; animation: menue-auf .25s var(--ease) both; }
  .menue-offen { overflow: hidden; }
  .hauptnav > ul > li { border-bottom: 1px solid var(--line); }
  .nav-punkt { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 1.0625rem; }
  .sub { display: none; padding: 0 0 12px 14px; }
  .hat-sub.offen > .sub { display: block; }
  .sub a { padding: 9px 0; }
  .cta-mobil { margin-top: 24px; }
  .knopf.cta { display: none; }
}
@keyframes menue-auf { from { opacity: 0; transform: translateY(-8px); } }

/* ---- Kopfbereich mit Rauten-Collage ----------------------------------------------------- */

.held-raster { display: grid; }
.held-text { padding: 28px 0 0; min-width: 0; }
@media (min-width: 1000px) {
  .held-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; min-height: clamp(460px, 40vw, 600px); }
  .held-text { align-self: center; padding: 24px 0 120px; }
}

.eyebrow {
  margin: 0 0 16px;
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--link);
}
h1 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.1rem, 1.25rem + 3vw, 3.65rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.datum { margin: 14px 0 0; font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); font-weight: 500; color: var(--navy); }
@media (prefers-color-scheme: dark) { .datum { color: var(--link); } }
.einleitung { margin: 20px 0 0; max-width: 32em; font-size: clamp(1rem, .96rem + .2vw, 1.1rem); color: var(--text2); }

.platzhalter { display: block; height: 1em; background: var(--bg3); animation: atmen 1.6s ease-in-out infinite alternate; }
.platzhalter.t { height: clamp(2.1rem, 1.25rem + 3vw, 3.65rem); width: 76%; }
.platzhalter.d { height: 1.4rem; width: 42%; margin-top: 16px; }
@keyframes atmen { to { opacity: .45; } }

.collage { position: relative; container-type: size; height: 210px; margin: 28px -16px 0; overflow: hidden; }
@media (min-width: 600px) { .collage { margin: 32px -30px 0; height: 260px; } }
.held { overflow-x: clip; }
@media (min-width: 1000px) { .collage { height: auto; margin: 0; overflow: visible; } }

.raute-bild {
  position: absolute; aspect-ratio: 1; overflow: hidden;
  border: 6px solid var(--bg); background: var(--navy);
  transform: rotate(45deg);
  animation: raute-ein 1s var(--ease) backwards;
}
.raute-bild img {
  position: absolute; left: -21%; top: -21%; width: 142%; height: 142%; object-fit: cover;
  transform: rotate(-45deg) scale(1.02);
  animation: schwenk 26s ease-in-out infinite alternate;
}
/* Schmales Band auf dem Handy: drei Rauten nebeneinander, oben und unten angeschnitten */
.r1 { width: 92cqh; left: calc(50% - 46cqh); top: 4cqh; animation-delay: .25s; z-index: 2; }
.r2 { width: 70cqh; left: calc(16% - 35cqh); top: 22cqh; animation-delay: .1s; }
.r3 { width: 70cqh; left: calc(84% - 35cqh); top: 22cqh; animation-delay: .4s; }
.r2 img { animation-delay: -9s; }
.r3 img { animation-delay: -17s; }
.r1::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(90deg, transparent 38%, rgba(255, 255, 255, .32) 50%, transparent 62%);
  transform: translateX(-110%) rotate(-45deg);
  animation: lichtstreif 1.8s var(--ease) 1.1s both;
}
.raute-deko { position: absolute; aspect-ratio: 1; transform: rotate(45deg); animation: raute-ein .9s var(--ease) .55s backwards; }
.d1 { width: 9cqmin; left: 4%; top: 8%; background: var(--blue); }
.d2 { width: 14cqmin; right: 3%; top: 6%; border: 2px solid var(--blue); animation-name: raute-ein, schweben; animation-duration: .9s, 7s; animation-timing-function: var(--ease), ease-in-out; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-delay: .55s, 1.5s; }
@media (max-width: 999.98px) { .d1, .d2 { display: none; } }
@media (min-width: 1000px) {
  .r1 { width: 56cqmin; left: calc(58% - 28cqmin); top: calc(40% - 28cqmin); }
  .r2 { width: 36cqmin; left: calc(22% - 18cqmin); top: calc(74% - 18cqmin); }
  .r3 { width: 34cqmin; left: calc(80% - 17cqmin); top: calc(79% - 17cqmin); }
}
@keyframes raute-ein { from { opacity: 0; clip-path: inset(50%); } to { opacity: 1; clip-path: inset(0); } }
@keyframes schwenk { to { transform: rotate(-45deg) scale(1.12) translate(2%, -2%); } }
@keyframes lichtstreif { to { transform: translateX(110%) rotate(-45deg); } }
@keyframes schweben { to { transform: rotate(45deg) translate(-6px, -6px); } }

/* Auftakt: Titel und Bühne steigen nacheinander auf */
.auftakt { animation: auftakt .75s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 80ms + 80ms); }
@keyframes auftakt { from { opacity: 0; transform: translateY(16px); } }

/* ---- Arbeitsbereich --------------------------------------------------------------------- */

.arbeit { position: relative; padding: 0 0 88px; margin-top: -48px; }
@media (min-width: 1000px) { .arbeit { margin-top: -96px; } }

/* Die Bühne: Ablagefläche */
.ablage {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 56px 28px 48px; min-height: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  background:
    radial-gradient(90% 70% at 50% 0%, var(--navy-hell) 0%, transparent 65%),
    radial-gradient(60% 50% at 50% 110%, rgba(0, 113, 237, .35), transparent 70%),
    var(--navy);
  box-shadow: 0 34px 60px -34px rgba(14, 31, 59, .7);
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
@media (min-width: 600px) { .ablage { padding: 72px 48px 60px; min-height: 400px; } }
.ablage > * { position: relative; z-index: 1; }
.ablage .licht {
  position: absolute; z-index: 0; top: -30%; width: 44%; height: 150%; pointer-events: none;
  background: linear-gradient(180deg, rgba(140, 195, 255, .30), rgba(140, 195, 255, .05) 60%, transparent 80%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  filter: blur(4px);
  transform-origin: 50% 0;
  opacity: .55;
  transition: opacity .35s var(--ease), rotate .5s var(--ease);
  animation: kegel 9s ease-in-out infinite alternate;
}
.ablage .l1 { left: 2%; rotate: -16deg; }
.ablage .l2 { right: 2%; rotate: 16deg; animation-delay: -4.5s; }
@keyframes kegel { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

.ablage .ecke {
  position: absolute; width: 44px; height: 44px; border: 0 solid var(--hell); pointer-events: none;
  transition: transform .3s var(--ease), border-color .3s;
}
.ablage .ecke.tl { top: 18px; left: 18px; border-top-width: 3px; border-left-width: 3px; }
.ablage .ecke.tr { top: 18px; right: 18px; border-top-width: 3px; border-right-width: 3px; }
.ablage .ecke.bl { bottom: 18px; left: 18px; border-bottom-width: 3px; border-left-width: 3px; }
.ablage .ecke.br { bottom: 18px; right: 18px; border-bottom-width: 3px; border-right-width: 3px; }

.emblem {
  position: relative; width: 60px; height: 60px; margin: 6px 0 28px;
  display: grid; place-items: center; color: #fff;
}
.emblem::before {
  content: ""; position: absolute; inset: 0; background: var(--blue); transform: rotate(45deg);
  box-shadow: 0 0 0 0 rgba(31, 139, 255, .5); transition: transform .35s var(--ease), box-shadow .35s;
}
.emblem svg { position: relative; width: 24px; height: 24px; display: block; }
.ablage .emblem svg { animation: heben 2.6s ease-in-out infinite; }
@keyframes heben { 50% { transform: translateY(-3px); } }

.ablage h2 { margin: 0; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.85rem); font-weight: 600; letter-spacing: -.01em; }
.ablage .oder { margin: 6px 0 20px; color: rgba(255, 255, 255, .72); }
.ablage .loslassen { display: none; margin: 10px 0 0; font-size: 1.0625rem; color: rgba(255, 255, 255, .85); }
.ablage .hinweis { margin: 24px 0 0; max-width: 34em; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.ablage:hover .emblem::before { transform: rotate(45deg) scale(1.06); }

/* Beim Hineinziehen gehen die Lichter an */
.ablage.ueber { transform: scale(1.012); box-shadow: 0 40px 80px -30px rgba(0, 113, 237, .55); }
.ablage.ueber .licht { opacity: 1; }
.ablage.ueber .l1 { rotate: -6deg; }
.ablage.ueber .l2 { rotate: 6deg; }
.ablage.ueber .ecke { border-color: #fff; }
.ablage.ueber .tl { transform: translate(10px, 10px); }
.ablage.ueber .tr { transform: translate(-10px, 10px); }
.ablage.ueber .bl { transform: translate(10px, -10px); }
.ablage.ueber .br { transform: translate(-10px, -10px); }
.ablage.ueber .emblem::before { transform: rotate(45deg) scale(1.16); box-shadow: 0 0 0 14px rgba(31, 139, 255, .18), 0 0 40px 6px rgba(31, 139, 255, .45); }
.ablage.ueber .oder, .ablage.ueber .knoepfe, .ablage.ueber .hinweis { display: none; }
.ablage.ueber .loslassen { display: block; }
body.zieht::after {
  content: ""; position: fixed; inset: 0; z-index: 20; pointer-events: none;
  background: rgba(14, 31, 59, .5); backdrop-filter: blur(2px);
  animation: einblenden .2s ease both;
}
body.zieht .ablage { z-index: 21; }
body.zieht .kopf { z-index: auto; }
@keyframes einblenden { from { opacity: 0; } }

/* Während eine Runde läuft, rückt die Bühne zusammen, damit der Fortschritt im Blick bleibt */
.ablage.kompakt { min-height: 0; padding: 36px 28px; }
.ablage.kompakt .emblem { width: 44px; height: 44px; margin-bottom: 20px; }
.ablage.kompakt .emblem svg { width: 20px; height: 20px; }
.ablage.kompakt .hinweis { display: none; }
#band-fortsetzen { margin-bottom: 20px; }

.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.knopf {
  font: 500 1rem/1 Poppins, sans-serif;
  min-height: 50px; padding: 0 24px;
  border: 1.5px solid var(--blue); border-radius: 0;
  background: var(--blue); color: #fff;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s var(--ease);
}
.knopf:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.knopf:active { transform: translateY(1px); }
.knopf.zweit { background: transparent; color: var(--link); border-color: currentColor; }
.knopf.zweit:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--blue-hover); }
.ablage .knopf:hover { background: var(--hell); border-color: var(--hell); }
.ablage .knopf.zweit { color: #fff; border-color: rgba(255, 255, 255, .55); }
.ablage .knopf.zweit:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.ablage :focus-visible { box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px #fff; }
.knopf.klein { min-height: 42px; padding: 0 18px; font-size: .9375rem; }

.textknopf {
  font: 500 .8125rem/1 Poppins, sans-serif; color: var(--muted);
  background: none; border: 0; padding: 8px 6px; min-height: 36px; cursor: pointer;
}
.textknopf:hover { color: var(--ink); }

/* Touch-Geräte: die Fläche ist selbst die Auswahl, kein Ordner-Knopf */
@media (pointer: coarse) {
  .nur-maus { display: none !important; }
  .ablage:not(.kompakt) { min-height: 280px; }
  .ablage h2 { margin-bottom: 20px; }
}
@media (pointer: fine), (pointer: none) { .nur-touch { display: none !important; } }

/* Bemerkung */
.bemerkung { margin-top: 32px; }
.bemerkung label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 8px; }
.bemerkung label > span:not(.lbl) { font-weight: 400; color: var(--muted); }
.bemerkung textarea {
  width: 100%; min-height: 92px; resize: vertical;
  font: 400 1rem/1.5 Poppins, sans-serif; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 0; padding: 13px 15px;
  transition: border-color .15s;
}
.bemerkung textarea::placeholder { color: var(--muted); opacity: .85; }
.bemerkung textarea:focus-visible { border-color: var(--blue); box-shadow: none; outline: none; }
.bemerkung .klein { margin: 8px 0 0; font-size: .8125rem; color: var(--muted); }

/* Hinweisband: unterbrochene Uploads, Netz */
.band {
  margin-top: 28px; padding: 18px 20px;
  background: var(--card); box-shadow: var(--shadow);
  border-left: 3px solid var(--blue);
  animation: auftakt .5s var(--ease) backwards;
}
.band.warn { border-left-color: var(--warn); }
.band p { margin: 0; }
.band .titel { font-weight: 600; }
.band .text { color: var(--text2); font-size: .9375rem; margin-top: 2px; }
.band .knoepfe { justify-content: flex-start; margin-top: 14px; }
.band ul { list-style: none; margin: 10px 0 0; padding: 0; }
.band li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.band li:first-child { border-top: 0; }
.band li .name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.band li .anteil { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Fortschritt */
.fortschritt { margin-top: 36px; }
.gesamt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.gesamt .menge { font-weight: 600; font-variant-numeric: tabular-nums; }
.gesamt .rest { color: var(--muted); font-variant-numeric: tabular-nums; }
.balken { position: relative; height: 6px; margin-top: 10px; background: var(--line); overflow: hidden; }
.balken.gross { height: 8px; margin-top: 12px; }
.balken i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--blue); transition: width .4s linear; overflow: hidden; }
.balken.aktiv i::after {
  content: ""; position: absolute; inset: 0; width: 120px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: glanz 1.6s linear infinite;
}
@keyframes glanz { from { transform: translateX(-120px); } to { transform: translateX(1200px); } }
.balken.duenn { height: 3px; margin-top: 8px; }

.liste { list-style: none; margin: 18px 0 0; padding: 0; }
.datei { display: grid; grid-template-columns: 14px 1fr auto; column-gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.datei:first-child { border-top: 0; }
.datei .raute { width: 9px; height: 9px; transform: translateY(-1px) rotate(45deg); border: 1.5px solid var(--muted); justify-self: center; }
.datei.laeuft .raute { border-color: var(--blue); background: var(--blue); animation: pulsen 1.2s ease-in-out infinite alternate; }
.datei.fertig .raute { border-color: var(--blue); background: var(--blue); animation: aufploppen .4s var(--ease) both; }
.datei.fehler .raute { border-color: var(--warn); background: var(--warn); }
.datei.abgebrochen { color: var(--muted); }
.datei .name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: .9375rem; }
.datei .name .pfad { font-weight: 400; color: var(--muted); }
.datei .zustand { font-size: .8125rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.datei.fertig .zustand { color: var(--link); }
.datei.fehler .zustand { color: var(--warn); white-space: normal; }
.datei .unten { grid-column: 2 / 4; padding: 8px 0 2px; }
.datei .unten .balken { margin-top: 0; }
.datei .info { grid-column: 2 / 4; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.datei .info .textknopf { margin-right: -6px; min-height: 32px; padding: 6px; }
@keyframes pulsen { from { opacity: .35; } }
@keyframes aufploppen { from { transform: translateY(-1px) rotate(45deg) scale(.2); } }

/* Bestätigung: Haken in der Raute, kleine Rauten fliegen auf */
.bestaetigung {
  margin-top: 36px; padding: 28px 26px;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 26px; align-items: center;
  background: var(--navy); color: #fff;
  box-shadow: 0 30px 60px -36px rgba(14, 31, 59, .7);
  animation: auftakt .6s var(--ease) backwards;
}
.bestaetigung .emblem { margin: 0 6px; width: 52px; height: 52px; }
.bestaetigung .emblem svg { width: 24px; height: 24px; }
.bestaetigung .haken { stroke-dasharray: 22; stroke-dashoffset: 22; animation: zeichnen .55s var(--ease) .3s forwards; }
.bestaetigung h2 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.bestaetigung p { margin: 2px 0 0; color: rgba(255, 255, 255, .8); }
.funke {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--hell); opacity: 0; transform: rotate(45deg);
  animation: funke .9s var(--ease) .35s;
}
.funke:nth-child(even) { background: #fff; width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.f1 { --x: 0px; --y: -46px; } .f2 { --x: 40px; --y: -24px; } .f3 { --x: 42px; --y: 24px; }
.f4 { --x: 0px; --y: 46px; } .f5 { --x: -40px; --y: 24px; } .f6 { --x: -42px; --y: -24px; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes funke {
  0% { opacity: 1; transform: translate(0, 0) rotate(45deg) scale(.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(45deg) scale(1); }
}

/* Bereits angekommen */
.angekommen { margin-top: 56px; }
.angekommen h2 { margin: 0 0 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
.angekommen .datei .zustand { color: var(--muted); }
.angekommen .datei.fertig .raute { animation: none; }

/* Meldungen: unbekannt, abgelaufen, Netz, ohne Code */
.meldung { max-width: 34em; padding-bottom: 8px; animation: auftakt .6s var(--ease) backwards; }
.meldung .raute-gross { width: 22px; height: 22px; margin: 4px 0 30px 4px; transform: rotate(45deg); border: 2px solid var(--blue); }
.meldung.warn .raute-gross { border-color: var(--warn); }
.meldung h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.75rem); }
.meldung p { margin: 16px 0 0; color: var(--text2); font-size: 1.0625rem; }
.meldung .knoepfe { justify-content: flex-start; margin-top: 28px; }
@media (min-width: 1000px) { .held-text:has(#ansicht-meldung:not([hidden])) { padding-bottom: 24px; } }
.held:has(#ansicht-meldung:not([hidden])) { padding-bottom: 56px; }
@media (min-width: 1000px) { .held:has(#ansicht-meldung:not([hidden])) { padding-bottom: 96px; } }

/* ---- Fussbereich wie die Website -------------------------------------------------------- */

.fuss { margin-top: auto; }
.fuss-blau { background: var(--navy); color: #fff; padding: 56px 0 0; --wm-t: #FFFFFF; --wm-b: #1F8BFF; }
.fuss-oben { display: grid; gap: 40px; padding-bottom: 40px; }
.fuss-marke .wortmarke { width: 200px; height: 50px; }
.fuss-sozial { display: flex; gap: 18px; margin-top: 22px; }
.sozial { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; transition: background-color .15s, transform .2s var(--ease); }
.sozial:hover { background: var(--hell); color: #fff; transform: translateY(-2px); }
.sozial svg { width: 21px; height: 21px; }
.fuss-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.fuss-titel { margin: 0 0 12px; font-size: 1.2rem; font-weight: 600; color: #1F8BFF; }
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss-spalte li { margin: 0 0 9px; }
.fuss-blau a { color: #fff; font-weight: 500; text-decoration: none; }
.fuss-blau a:hover { color: #fff; text-decoration: underline; }
.fuss-blau :focus-visible { box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px #fff; }
.fuss-mitte {
  display: grid; gap: 24px; padding-top: 32px; padding-bottom: 36px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(31, 139, 255, .7), transparent) 1;
}
.fuss-mitte p { margin: 0; font-weight: 500; }
.fuss-mitte .fuss-titel { margin-bottom: 6px; }
.fuss-mitte a { text-decoration: underline; text-underline-offset: .2em; }
.fuss-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 22px; padding-bottom: 24px; }
.fuss-recht { display: flex; flex-wrap: wrap; gap: 8px 40px; list-style: none; margin: 0; padding: 0; }
.fuss-recht a { color: var(--ink); font-weight: 500; text-decoration: none; }
.fuss-recht a:hover { color: var(--blue); }
.fuss-sicher { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .875rem; color: var(--muted); }
.fuss-sicher svg { width: 15px; height: 15px; flex: none; color: var(--link); }
@media (min-width: 700px) {
  .fuss-spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fuss-mitte { grid-template-columns: 1fr 1fr auto; }
}
@media (min-width: 1240px) {
  .fuss-oben { grid-template-columns: 280px 1fr; }
}

/* Bewegung nur, wo sie etwas zeigt; bei «Bewegung reduzieren» gar nicht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bestaetigung .haken { stroke-dashoffset: 0; }
  .r1::after { display: none; }
}