/* Aetheris-Optik, bewusst nur hell (Wunsch Sascha 25.10.2026).
   Farben wie aetheris-gmbh.de (Navy + Gold), Hintergrund = Saschas Desktopbild ins Helle gedreht
   (Negativ mit gedrehtem Farbton: schwarzer Himmel wird weiss, Baum und Sterne bleiben blau). */
:root {
  --grund: #f6f7f8; --glas: rgba(255,255,255,.9); --karte: #fff;
  --text: #111b2e; --tinte: #061739; --tinte-2: #0a2050; --leise: #4a5568; --linie: #e4e8ee;
  --gold: #b8995e; --gold-hell: #d8bd84; --gold-tief: #8a6c32; --gold-hauch: rgba(192,168,120,.14);
  --himmel: #3b8fd9; --himmel-hauch: #eef5fc;
  --gefahr: #b42318; --ok: #e9f6ee; --ok-text: #14532d; --fehler: #fdecea;
  --schatten: 0 1px 2px rgba(11,14,20,.05), 0 6px 24px rgba(6,23,57,.07);
  --schatten-gross: 0 24px 80px rgba(6,23,57,.16);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--text);
  font: 15px/1.5 "Inter", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  background: linear-gradient(rgba(246,247,248,.2), rgba(246,247,248,.2)),
              var(--grund) url("bild/himmel-hell.webp?v=6") center / cover fixed no-repeat;
  background-attachment: fixed;
}
body.buehne { background: var(--grund) url("bild/himmel-hell-voll.webp?v=6") center / cover fixed no-repeat; }
.tipp { display: inline-block; margin: 0; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.75); }
a { color: var(--tinte-2); }
main { width: 100%; max-width: 1140px; margin: 0 auto; padding: 22px 16px; flex: 1; }

/* Kopfzeile: Glas mit goldener Haarlinie */
.leiste {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  padding: 10px 20px; background: var(--glas); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hell) 50%, var(--gold) 80%, transparent) 1;
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke img { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(192,168,120,.5), 0 2px 10px rgba(59,143,217,.35); }
.wort { display: flex; align-items: baseline; gap: 10px; }
.firma { font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--tinte); font-size: .95rem; }
.produkt { font-weight: 300; letter-spacing: .08em; color: var(--gold-tief); font-size: 1.05rem; }
.leiste nav { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.leiste nav a { position: relative; padding: 6px 12px; text-decoration: none; color: var(--leise); font-weight: 500; }
.leiste nav a:hover { color: var(--tinte); }
.leiste nav a.aktiv { color: var(--tinte); font-weight: 600; }
.leiste nav a.aktiv::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 2px; background: linear-gradient(90deg, var(--gold-tief), var(--gold-hell)); }
.abmelden { margin: 0; }

.karte { background: var(--glas); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(228,232,238,.9); border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--schatten); }
.karte.schmal { max-width: 420px; margin: 40px auto; }
.karte.hervor { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-hauch), var(--schatten); }
.gedimmt { opacity: .6; }
h1 { font-size: 1.4rem; font-weight: 600; color: var(--tinte); margin: 0 0 14px; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 600; color: var(--tinte); margin: 18px 0 10px; }
.kicker { margin: 0 0 4px; font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-tief); }
.klein { font-size: .85rem; color: var(--leise); }

/* Anmeldung und Einladung: volles Bild, Karte als Glas auf der Baumseite */
.buehne main { max-width: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 12px; padding: 32px 7vw; }
.buehne .karte.schmal { margin: 0; width: 100%; background: rgba(255,255,255,.78); box-shadow: var(--schatten-gross); padding: 26px 28px; }
.buehne main > .hinweis { width: 100%; max-width: 420px; margin: 0; }
.buehne .karte.text { align-self: center; margin: 0; background: rgba(255,255,255,.9); }
@media (max-width: 760px) { .buehne main { align-items: center; padding: 24px 16px; } }

.stapel { display: flex; flex-direction: column; gap: 14px; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.raster .breit { grid-column: span 2; }
@media (max-width: 420px) { .raster .breit { grid-column: 1 / -1; } }
label { display: flex; flex-direction: column; gap: 5px; font-size: .88rem; font-weight: 600; color: var(--tinte); }
input, select { font: inherit; padding: 9px 12px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; color: var(--text); width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline: none; border-color: var(--himmel); box-shadow: 0 0 0 3px rgba(59,143,217,.18); }
button:focus-visible, .knopf:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--himmel); outline-offset: 2px; }

button, .knopf {
  font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer; text-decoration: none;
  display: inline-block; line-height: 1.3; color: #fff; border: 1px solid var(--tinte);
  background: linear-gradient(160deg, var(--tinte-2), var(--tinte)); box-shadow: 0 1px 2px rgba(6,23,57,.2);
  transition: box-shadow .15s, border-color .15s, transform .05s;
}
button:hover, .knopf:hover { box-shadow: 0 0 0 3px var(--gold-hauch), 0 2px 8px rgba(6,23,57,.25); }
button:active, .knopf:active { transform: translateY(1px); }
button.leise, .knopf.leise, .klein-knopf.leise { background: #fff; color: var(--tinte); border-color: var(--linie); box-shadow: none; }
button.leise:hover, .knopf.leise:hover, .klein-knopf.leise:hover { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-hauch); }
button.gefahr { background: #fff; border-color: rgba(180,35,24,.4); color: var(--gefahr); }
.klein-knopf { font: inherit; font-size: .85rem; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--linie); text-decoration: none; cursor: pointer; display: inline-block; }
form.inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 0; }
form.inline input { max-width: 260px; }
form.inline select { max-width: 130px; }
form.inline button { padding: 6px 12px; }

.hinweis { padding: 10px 14px; border-radius: 10px; }
.hinweis.ok { background: var(--ok); color: var(--ok-text); border: 1px solid rgba(20,83,45,.12); }
.hinweis.fehler { background: var(--fehler); color: var(--gefahr); border: 1px solid rgba(180,35,24,.15); }

/* Ordneransicht */
.krumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.3rem; margin: 2px 0 16px; }
.krumen a { text-decoration: none; color: var(--leise); }
.krumen a:hover { color: var(--tinte); }
.krumen .hier { font-weight: 600; color: var(--tinte); }
.krumen .trenner { color: var(--gold); }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.werkzeuge summary { list-style: none; }
.werkzeuge summary::-webkit-details-marker { display: none; }
.neu-ordner[open] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.neu-ordner form { margin: 0; }
.ablage { position: relative; padding: 4px 0; min-height: 180px; overflow: visible; }
.ablage.zieht { outline: 2px dashed var(--himmel); outline-offset: -8px; background: rgba(238,245,252,.92); }
.fallen { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; color: var(--himmel); pointer-events: none; }
.leer { color: var(--leise); text-align: center; padding: 56px 16px; margin: 0; }
.liste { width: 100%; border-collapse: collapse; }
.liste th { text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); padding: 8px 16px; border-bottom: 1px solid var(--linie); }
.liste th.zahl { text-align: right; }
.liste td { padding: 9px 16px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.liste tbody tr:last-child td { border-bottom: 0; }
.liste tbody tr { transition: background .12s; }
.liste tbody tr:hover td { background: var(--himmel-hauch); }
.liste .name { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 500; word-break: break-word; }
.liste .name:hover { color: var(--tinte-2); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.zahl { text-align: right; }
.nowrap { white-space: nowrap; }
.aktionen { text-align: right; white-space: nowrap; width: 1%; }
.sym { width: 24px; height: 24px; flex: none; }
.sym.ordner path { fill: var(--gold); }
.sym.datei path { fill: #fff; stroke: #7d8ba3; stroke-width: 1.3; stroke-linejoin: round; }
.sym.datei .falz { fill: none; }
details.mehr { display: inline-block; position: relative; }
details.mehr summary { list-style: none; }
details.mehr summary::-webkit-details-marker { display: none; }
.mehr-feld { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 12px; box-shadow: var(--schatten-gross); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; min-width: 300px; }
.mehr-feld form { margin: 0; }

.uploads { list-style: none; margin: 0 0 6px; padding: 8px 16px 12px; border-bottom: 1px solid var(--linie); }
.uploads li { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 6px 0; font-size: .9rem; }
.uploads .balken { grid-column: 1 / -1; height: 6px; background: var(--linie); border-radius: 3px; overflow: hidden; }
.uploads .balken span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--himmel), var(--gold-hell)); transition: width .2s; }
.uploads li.fertig .balken span { background: #2e9e5b; }
.uploads li.fehler .stand { color: var(--gefahr); }

.zeilen, .personen { list-style: none; margin: 0; padding: 0; }
.zeilen li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.zeilen li form { margin: 0; }
.personen li { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.personen li:last-child { border-bottom: 0; }
.link { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
details.loeschen { margin-top: 6px; }
details.loeschen summary { cursor: pointer; }
[hidden] { display: none !important; }
@media (max-width: 640px) {
  .weg-mobil { display: none; }
  .liste td, .liste th { padding: 8px 10px; }
  .leiste { padding: 8px 14px; }
  .leiste nav { order: 3; flex-basis: 100%; }
  .leiste nav a.aktiv::after { bottom: -2px; }
  .abmelden { margin-left: auto; }
  .person { display: none; }
  .firma { letter-spacing: .22em; }
  .mehr-feld { min-width: 240px; }
  .krumen { font-size: 1.1rem; }
}
.fuss { width: 100%; max-width: 1140px; margin: 0 auto; padding: 10px 16px 26px; font-size: .82rem; color: var(--leise); }
.fuss span { letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--gold-tief); }
.text { max-width: 760px; }
.text h2 { margin-top: 22px; }
.text li { margin-bottom: 6px; }

/* Leuchtpunkte im Baum: sitzen auf den hellsten Sternen des Originalbilds (gemessen 25.10.2026).
   Die Ebene bildet background-size: cover nach (Bild 1672x941), damit die Punkte mit dem Bild wandern. */
.funken { position: fixed; left: 50%; top: 50%; z-index: 0; pointer-events: none; transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * 1.7768)); height: max(100vh, calc(100vw / 1.7768)); }
.funken i { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 14%, #bfe3ff 24%, #3d9bff 42%, rgba(20,110,240,.45) 58%, transparent 72%);
  box-shadow: 0 0 14px 5px rgba(30,130,255,.55), 0 0 40px 14px rgba(60,150,255,.30);
  opacity: 0; animation: funkeln 4s ease-in-out infinite; }
.funken i:nth-child(3n) { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.funken i:nth-child(4n+1) { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.innen .funken { opacity: .75; }
.leiste, main, .fuss { position: relative; z-index: 1; }
.leiste { position: sticky; z-index: 10; }
@keyframes funkeln {
  0%, 100% { opacity: 0; transform: scale(.3); }
  45% { opacity: 1; transform: scale(1.15); }
  60% { opacity: .85; transform: scale(.95); }
}
@media (prefers-reduced-motion: reduce) { .funken i { animation: none; opacity: .7; } }
.funken i:nth-child(1) { left: 66.1%; top: 61.6%; animation-duration: 3.1s; animation-delay: -0.00s; }
.funken i:nth-child(2) { left: 67.6%; top: 47.2%; animation-duration: 4.4s; animation-delay: -0.73s; }
.funken i:nth-child(3) { left: 82.3%; top: 23%; animation-duration: 2.7s; animation-delay: -1.46s; }
.funken i:nth-child(4) { left: 45.3%; top: 23.4%; animation-duration: 5.2s; animation-delay: -2.19s; }
.funken i:nth-child(5) { left: 65%; top: 39.3%; animation-duration: 3.6s; animation-delay: -2.92s; }
.funken i:nth-child(6) { left: 50.7%; top: 12.8%; animation-duration: 4.8s; animation-delay: -3.65s; }
.funken i:nth-child(7) { left: 60.2%; top: 10.6%; animation-duration: 2.9s; animation-delay: -1.48s; }
.funken i:nth-child(8) { left: 72.8%; top: 16.4%; animation-duration: 3.9s; animation-delay: -1.21s; }
.funken i:nth-child(9) { left: 69.4%; top: 69.3%; animation-duration: 4.6s; animation-delay: -1.24s; }
.funken i:nth-child(10) { left: 66.3%; top: 30.8%; animation-duration: 3.3s; animation-delay: -3.27s; }
.funken i:nth-child(11) { left: 48.9%; top: 33.2%; animation-duration: 5s; animation-delay: -2.30s; }
.funken i:nth-child(12) { left: 71.4%; top: 36.6%; animation-duration: 2.8s; animation-delay: -2.43s; }
.funken i:nth-child(13) { left: 63.6%; top: 68.4%; animation-duration: 4.1s; animation-delay: -0.56s; }
.funken i:nth-child(14) { left: 57.5%; top: 27.8%; animation-duration: 3.5s; animation-delay: -2.49s; }
.funken i:nth-child(15) { left: 69%; top: 83.1%; animation-duration: 4.9s; animation-delay: -0.42s; }
.funken i:nth-child(16) { left: 82.8%; top: 36.3%; animation-duration: 3s; animation-delay: -1.95s; }
.funken i:nth-child(17) { left: 88.3%; top: 26.6%; animation-duration: 4.3s; animation-delay: -3.08s; }
.funken i:nth-child(18) { left: 59.3%; top: 45.3%; animation-duration: 3.7s; animation-delay: -1.31s; }