/* ============================================================
   Drop-it.me — eigenes Stylesheet.

   Diese Plattform steht fuer sich. Sie erbt NICHTS von hnvr.me:
   kein Theme, kein tool.css, keine Kapsel um #tool. Der Grund ist
   nicht Geschmack, sondern Zweck — wer einen Link von aussen
   oeffnet, landet bei einem Dienst, nicht in der Werkzeugkiste
   einer Agentur.

   WOHER DER UNTERSCHIED KOMMT

     hnvr.me      fast schwarz, Signalorange, schmale Grotesk,
                  harte 4-px-Kanten
     Drop-it.me   warmes Papier, Tintenblau, Serif-Ueberschriften,
                  weiche 12-px-Kanten

   Beides gehoert demselben Haus, keins sieht aus wie das andere.

   HELL UND DUNKEL: Das Papier ist der Normalfall — ein Link aus
   einer Mail wird meistens am hellen Tag geoeffnet. Wer sein
   System auf dunkel gestellt hat, bekommt die dunkle Fassung; es
   werden nur die Token getauscht, keine Regel doppelt geschrieben.

   DER RUHEZUSTAND IST DER SICHTBARE ZUSTAND: Einblendungen laufen
   ueber Klassen, die das Skript sofort wieder entfernt. Faellt das
   Skript aus, steht trotzdem alles da.
   ============================================================ */

/* ================= Farben und Masse ================= */
:root{
  --papier:#f1eee7;
  --flaeche:#fffdf9;
  --flaeche2:#f7f4ee;
  --tinte:#17161c;
  --grau:#57545f;
  --linie:rgba(23,22,28,.14);
  /* GEMESSEN: .30 ergab 1,95:1 gegen die Karte — zu wenig fuer
     die Begrenzung eines Bedienelements. .52 ergibt 3,1:1. */
  --linie2:rgba(23,22,28,.52);
  --akzent:#26379b;
  --akzent-dunkel:#1a2670;
  --akzent-blass:rgba(38,55,155,.09);
  --auf-akzent:#ffffff;
  --ok:#1a6a4a;
  --warn:#8a5000;
  --bad:#a52626;

  --r:12px;
  --r-klein:8px;
  /* Hoehe der Kopfzeile. Steht hier, weil die Anzeigenbuehne damit
     rechnet — sie fuellt genau den Rest des Fensters. */
  --kopf-h:67px;
  --dsp:'Playfair Display',Georgia,'Times New Roman',serif;
  --txt:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DropMono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Eine Kurve fuer alle bewusste Bewegung: startet zuegig, kommt
     weich zur Ruhe. */
  --e:cubic-bezier(.22,1,.36,1);
  --schatten:0 1px 2px rgba(23,22,28,.05), 0 8px 24px -12px rgba(23,22,28,.22);
}

@media (prefers-color-scheme: dark){
  :root{
    --papier:#131218;
    --flaeche:#1b1a22;
    --flaeche2:#22212b;
    --tinte:#ece9e2;
    --grau:#a5a1ad;
    --linie:rgba(255,255,255,.13);
    --linie2:rgba(255,255,255,.42);
    --akzent:#93a4ff;
    --akzent-dunkel:#b3befF;
    --akzent-blass:rgba(147,164,255,.14);
    --auf-akzent:#11121c;
    --ok:#5cc294;
    --warn:#e5a44e;
    --bad:#f0817b;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}

/* ================= Grundgeruest ================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--txt);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
h1,h2,h3{font-family:var(--dsp);font-weight:600;line-height:1.15;margin:0}
h1{font-size:clamp(30px,5vw,46px);letter-spacing:-.015em}
h2{font-size:clamp(21px,2.6vw,27px)}
h3{font-size:18px}
p{margin:0}
a{color:var(--akzent);text-underline-offset:3px}
a:hover{color:var(--akzent-dunkel)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:4px}

.mitte{width:100%;max-width:860px;margin:0 auto;padding:0 20px}
.muted{color:var(--grau)}
.klein{font-size:13px;line-height:1.55}
.warn{color:var(--warn)}
.schlecht{color:var(--bad)}
.gut{color:var(--ok)}
.zahlen{font-variant-numeric:tabular-nums}

/* ================= Kopf ================= */
/* Haftend: die Wortmarke bleibt sichtbar, und die Anzeigenbuehne
   kann mit einer festen Hoehe rechnen (100dvh minus Kopf). */
.kopf{
  position:sticky;top:0;z-index:20;
  border-bottom:1px solid var(--linie);
  background:var(--flaeche);
}
.kopf-innen{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:66px;
}
.marke{
  font-family:var(--dsp);
  font-size:23px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--tinte);
  text-decoration:none;
  display:inline-flex;align-items:baseline;gap:1px;
}
.marke:hover{color:var(--tinte)}
.marke .punkt{color:var(--akzent)}
/* Der Punkt vor "me" ist das einzige Zeichen, das die Marke
   traegt — er darf beim Ueberfahren kurz aufmerken. */
.marke:hover .punkt{transform:translateY(-2px)}
.marke .punkt{display:inline-block;transition:transform .2s var(--e)}

.kopf-nav{display:flex;align-items:center;gap:14px;font-size:14px}
.kopf-nav a{color:var(--grau);text-decoration:none}
.kopf-nav a:hover{color:var(--tinte)}
.kopf-konto{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--grau);
}
.kopf-konto strong{color:var(--tinte);font-weight:600}

/* ================= Inhalt ================= */
main{flex:1 0 auto;padding:clamp(26px,5vw,54px) 0 70px}
.spalte{display:grid;gap:clamp(18px,2.6vw,26px)}

.aufmacher{display:grid;gap:10px;margin-bottom:6px}
.aufmacher p{max-width:56ch}

/* ================= Fusszeile ================= */
.fuss{
  border-top:1px solid var(--linie);
  background:var(--flaeche);
  padding:22px 0;
  font-size:13px;
  color:var(--grau);
}
.fuss-innen{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.fuss a{color:var(--grau)}
.fuss a:hover{color:var(--tinte)}

/* ================= Flaechen ================= */
.karte{
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:var(--r);
  padding:clamp(18px,3vw,26px);
  box-shadow:var(--schatten);
}

/* ================= Knoepfe ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--akzent);
  color:var(--auf-akzent);
  border:1px solid var(--akzent);
  border-radius:var(--r-klein);
  font-family:var(--txt);
  font-size:15px;
  font-weight:600;
  padding:12px 20px;
  cursor:pointer;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease,transform .16s var(--e);
}
.btn:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel);color:var(--auf-akzent)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.breit{width:100%;padding:15px 20px;font-size:16px}
.btn.stiller{background:transparent;color:var(--tinte);border-color:var(--linie2)}
.btn.stiller:hover{background:var(--akzent-blass);border-color:var(--akzent);color:var(--tinte)}
.btn.klein{font-size:13px;padding:8px 13px;font-weight:400}
.btn.klein.gefahr:hover{background:rgba(165,38,38,.10);border-color:var(--bad);color:var(--bad)}

/* Ein Textknopf mitten im Satz: sieht aus wie ein Link, oeffnet
   aber einen Dialog, statt woandershin zu fuehren. */
.textknopf{
  background:none;border:0;padding:0;
  font:inherit;color:var(--akzent);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.textknopf:hover{color:var(--akzent-dunkel)}

/* ================= Formular ================= */
.raster{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.raster.zwei{grid-template-columns:1fr 1fr}}
/* align-content:start ist hier kein Feinschliff: ohne die Zeile
   streckt das Raster ein Feld auf die Hoehe des Nachbarn, sobald dort
   ein zweizeiliger Hilfetext steht — und dann steht das Eingabefeld
   der einen Spalte tiefer als das der anderen. Gemessen an „Art" und
   „Wo" in der Anzeigenverwaltung. */
.feld{display:grid;gap:6px;align-content:start}
.feld > span{font-size:13px;font-weight:600;color:var(--grau)}
.feld input,.feld textarea,.feld select{
  width:100%;
  background:var(--flaeche2);
  /* Ein Eingabefeld ist ein Bedienelement: sein Rand muss sichtbar
     sein, nicht nur vorhanden. Mit --linie waren es 1,3:1. */
  border:1px solid var(--linie2);
  border-radius:var(--r-klein);
  color:var(--tinte);
  font-family:var(--txt);
  font-size:15px;
  padding:12px 13px;
  transition:border-color .16s ease,background .16s ease;
}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--akzent);background:var(--flaeche);
}
.feld textarea{min-height:96px;height:118px;resize:vertical;line-height:1.55}
.feld .hilfe{font-size:12.5px;line-height:1.5;color:var(--grau);font-weight:400}
.feld ::placeholder{color:var(--grau);opacity:.75}

/* ================= Meldungen ================= */
.meldung{
  border:1px solid var(--linie2);
  border-radius:var(--r-klein);
  padding:12px 14px;
  font-size:14px;
  background:var(--flaeche);
}
.meldung.gut{border-color:var(--ok);color:var(--ok)}
.meldung.warn{border-color:var(--warn);color:var(--warn)}
.meldung.schlecht{border-color:var(--bad);color:var(--bad)}

/* ================= Verborgen heisst verborgen =================
   GEMESSEN: `[hidden]` wiegt 10, jede Regel mit einer Klasse und
   einem display wiegt mehr und gewinnt. Ohne diese Zeile stand die
   ganze Anwendung auf einmal da — Ablageflaeche, Fortschritt UND
   Ergebnis. */
[hidden]{display:none !important}

/* ================= Zustaende =================
   Ein Bereich, drei Zustaende. Die Dateiliste bleibt ueber alle
   drei hinweg dieselbe — sie wird nicht neu gebaut, sonst verliert
   man beim Wechsel den Bezug zu dem, was man ausgewaehlt hat. */
.ist-lauf .nur-bereit,
.ist-fertig .nur-bereit,
.ist-bereit .nur-lauf,
.ist-fertig .nur-lauf,
.ist-bereit .nur-fertig,
.ist-lauf .nur-fertig{display:none}

/* Waehrend des Hochladens fliegt nichts mehr aus der Liste. */
.ist-lauf .datei-weg{display:none}

/* ================= Ablageflaeche ================= */
.ablage{
  border:2px dashed var(--linie2);
  border-radius:var(--r);
  background:var(--flaeche);
  padding:clamp(30px,6vw,58px) 24px;
  text-align:center;
  cursor:pointer;
  display:grid;justify-items:center;gap:8px;
  transition:border-color .18s ease,background .18s ease;
}
.ablage:hover,.ablage:focus-visible,.ablage.ueber{
  border-color:var(--akzent);
  background:var(--akzent-blass);
}
.ablage strong{font-family:var(--dsp);font-size:22px;font-weight:600}
.ablage-oder{font-size:14px;color:var(--grau)}
.ablage-bild{
  width:46px;height:40px;fill:none;
  stroke:var(--linie2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .18s ease,transform .3s var(--e);
}
.ablage:hover .ablage-bild,.ablage.ueber .ablage-bild{stroke:var(--akzent)}
.ablage.ueber .ablage-bild{transform:translateY(3px)}

/* ================= Dateiliste ================= */
.sammlung{display:grid;gap:12px}
.sammlung-leiste{
  display:flex;flex-wrap:wrap;gap:10px;
  align-items:baseline;justify-content:space-between;
}
.sammlung-leiste .summe{font-size:15px}
.sammlung-leiste .summe strong{font-family:var(--dsp);font-size:19px;font-weight:600}
.sammlung-knoepfe{display:flex;gap:8px}

.dateien{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dateien li{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:var(--r-klein);
  padding:10px 12px;
  transition:opacity .25s var(--e),transform .25s var(--e),border-color .16s ease;
}
.dateien li.neu{opacity:0;transform:translateY(8px)}
.dateien li.laeuft{border-color:var(--akzent)}

.datei-bild{
  width:46px;height:46px;border-radius:var(--r-klein);
  background:var(--flaeche2);
  display:grid;place-items:center;overflow:hidden;flex:none;
  border:1px solid var(--linie);
}
.datei-bild img{width:100%;height:100%;object-fit:cover}
.datei-kuerzel{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.04em;color:var(--grau);
}
.datei-mitte{min-width:0;display:grid;gap:3px}
.datei-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.datei-groesse{font-size:13px;color:var(--grau);font-variant-numeric:tabular-nums}
.datei-rechts{display:flex;align-items:center;gap:10px}
.datei-stand{font-size:12.5px;color:var(--grau);font-variant-numeric:tabular-nums;white-space:nowrap}
.dateien li.fertig .datei-stand{color:var(--ok)}
.dateien li.wartet .datei-name,
.dateien li.wartet .datei-bild{opacity:.55}
.datei-weg{
  background:none;border:0;color:var(--grau);
  font-size:24px;line-height:1;cursor:pointer;padding:0 4px;
  transition:color .16s ease;
}
.datei-weg:hover{color:var(--bad)}

/* Ein Balken je Zeile — unsichtbar, solange nichts laeuft. Sonst
   zieht sich eine Reihe grauer Striche durch die Liste, die nichts
   bedeuten. */
.datei-balken{
  height:3px;border-radius:2px;background:var(--linie);
  overflow:hidden;opacity:0;transition:opacity .2s ease;
}
.datei-balken > i{
  display:block;height:100%;width:100%;background:var(--akzent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s var(--e);
}
.ist-lauf .datei-balken,
.dateien li.laeuft .datei-balken,
.dateien li.fertig .datei-balken{opacity:1}

.wegweiser{font-size:14px;color:var(--grau);margin:0}

/* Der Wegweiser traegt im Regelfall einen Satz. Fehlt Google Drive,
   kommt eine zweite Zeile dazu - ein Knopf oder ein Hinweis. Beide
   sollen unter dem Satz stehen, nicht daneben. */
.wegweiser:has(.btn),
.wegweiser:has(.wegweiser-zusatz){display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.wegweiser-zusatz{color:var(--grau)}
.wegweiser-zusatz code{
  font-family:var(--mono);font-size:.92em;
  background:var(--akzent-blass);border-radius:4px;padding:1px 5px;
}

/* ================= Fortschritt ================= */
.lauf{display:grid;gap:12px}
.lauf-kopf{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between}
.lauf-zahl{display:flex;align-items:baseline;gap:12px}
.lauf-zahl strong{
  font-family:var(--dsp);font-size:34px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1;
}
.lauf-text{font-size:14px;color:var(--grau);font-variant-numeric:tabular-nums}
.lauf-knoepfe{display:flex;gap:8px}
.balken{height:6px;border-radius:3px;background:var(--linie);overflow:hidden}
.balken > i{
  display:block;height:100%;width:100%;background:var(--akzent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s var(--e);
}
/* In der Pause steht der Balken still — und sieht auch so aus. */
.ist-pause .balken > i{background:var(--grau)}

/* ================= Ergebnis ================= */
.ergebnis{display:grid;gap:14px}
.linkzeile{display:grid;grid-template-columns:1fr auto;gap:10px}
.linkzeile input{
  background:var(--flaeche2);
  border:1px solid var(--linie2);
  border-radius:var(--r-klein);
  color:var(--tinte);
  font-family:var(--mono);
  font-size:13.5px;
  padding:12px 13px;
  width:100%;
}
.linkzeile input:focus{outline:none;border-color:var(--akzent)}
.teilen{display:flex;flex-wrap:wrap;gap:8px}
.qrkasten{
  display:grid;justify-items:center;gap:10px;
  padding:20px;background:#fff;border:1px solid var(--linie);border-radius:var(--r);
}
.qrkasten svg,.qrkasten img{width:min(240px,60vw);height:auto}

/* ================= Eigene Sendungen ================= */
.sendungen{display:grid;gap:12px}
.kontingent{display:grid;gap:6px}
.kont-balken{height:5px;border-radius:3px;background:var(--linie);overflow:hidden}
.kont-balken > i{
  display:block;height:100%;width:100%;background:var(--akzent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--e);
}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.liste li{
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:var(--r-klein);
  padding:14px 16px;
  display:grid;gap:8px;
}
.liste li.leer{background:none;border-style:dashed;text-align:center;padding:26px 16px}
.s-kopf{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.s-kopf strong{font-family:var(--dsp);font-size:17px;font-weight:600}
.s-zeile{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13.5px}
.s-dateien{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;
}
.code{
  font-family:var(--mono);font-size:13px;
  background:var(--flaeche2);border:1px solid var(--linie);
  padding:4px 9px;border-radius:6px;
}
.marke-pille{
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--linie2);border-radius:999px;padding:3px 10px;color:var(--grau);
}
.marke-pille.schlecht{border-color:var(--bad);color:var(--bad)}
.marke-pille.gut{border-color:var(--ok);color:var(--ok)}

/* ================= Ganzseitige Ablage ================= */
.vollablage{
  position:fixed;inset:0;z-index:900;
  background:rgba(23,22,28,.72);
  backdrop-filter:blur(2px);
  display:grid;place-items:center;padding:24px;
}
.vollablage-innen{
  border:2px dashed #fff;
  border-radius:var(--r);
  padding:clamp(30px,8vw,80px) clamp(30px,10vw,120px);
  text-align:center;display:grid;gap:8px;color:#fff;
}
.vollablage-innen strong{font-family:var(--dsp);font-size:clamp(26px,5vw,40px);font-weight:600}

/* ================= Empfang ================= */
.empfang{max-width:660px;margin:0 auto;display:grid;gap:16px}
.empfang-kopf{display:grid;gap:8px}
.absender{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--akzent);
}
.nachricht{
  border-left:2px solid var(--linie);
  padding:2px 0 2px 15px;
  line-height:1.65;white-space:pre-wrap;
  color:var(--grau);
}
.empfang-leiste{
  display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;
}
.empfang-fuss{font-size:13.5px}

/* ================= Vorschau ================= */
.leuchtkasten{
  position:fixed;inset:0;z-index:1000;
  background:rgba(12,11,16,.93);
  display:grid;place-items:center;padding:26px;
}
.lk-innen{display:grid;gap:12px;justify-items:center;max-width:min(1100px,92vw)}
.lk-innen img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-klein)}
.lk-name{color:#cfcbd6;font-size:13px;font-family:var(--mono)}
.lk-zu{
  position:absolute;top:16px;right:20px;
  background:none;border:0;color:#fff;
  font-size:36px;line-height:1;cursor:pointer;padding:4px 12px;
}
.lk-zu:hover{color:var(--akzent)}

/* ================= Anmeldung ================= */
.anmelden{max-width:400px;margin:0 auto;display:grid;gap:16px}
.reiter{display:flex;gap:4px;background:var(--flaeche2);padding:4px;border-radius:var(--r-klein)}
.reiter button{
  flex:1;background:none;border:0;border-radius:6px;
  font:inherit;font-size:14px;font-weight:600;color:var(--grau);
  padding:9px 10px;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.reiter button.an{background:var(--flaeche);color:var(--tinte);box-shadow:var(--schatten)}
.anbieter{display:grid;gap:8px}
.anbieter a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid var(--linie2);border-radius:var(--r-klein);
  padding:11px 14px;font-size:14px;font-weight:600;
  color:var(--tinte);text-decoration:none;background:var(--flaeche);
}
.anbieter a:hover{border-color:var(--akzent);background:var(--akzent-blass)}
.trenner{
  display:flex;align-items:center;gap:12px;
  color:var(--grau);font-size:12px;text-transform:uppercase;letter-spacing:.08em;
}
.trenner::before,.trenner::after{
  content:'';flex:1;height:1px;background:var(--linie);
}

/* ================= Schmale Fenster ================= */
@media(max-width:560px){
  .dateien li{grid-template-columns:auto 1fr;grid-template-areas:"bild mitte" "rechts rechts"}
  .datei-bild{grid-area:bild}
  .datei-mitte{grid-area:mitte}
  .datei-rechts{grid-area:rechts;justify-content:flex-start;padding-left:60px}
  .linkzeile{grid-template-columns:1fr}
  .lauf-zahl strong{font-size:28px}
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .dateien li.neu{opacity:1;transform:none}
}

/* ============================================================
   Anzeigenbuehne

   Wer eine Datei hochlaedt oder abholt, wartet ohnehin — das ist
   die Zeit, in der ein Motiv gesehen wird. Auf breiten Schirmen
   steht es daneben, darunter faellt es unter den Inhalt. Nie
   DAVOR: der Dienst kommt zuerst, sonst waere es ein Vorschaltbild
   und kein Nachbar.

   Bewusst kein Vollbild-Hintergrund. Der wuerde die helle Flaeche
   auffressen, auf der der Rest dieser Seite steht.
   ============================================================ */
/* Neben dem Inhalt steht auf breiten Schirmen die Buehne — dafuer
   braucht die Mitte mehr Platz als die 860 Pixel, die fuer reinen
   Text richtig waeren. */
.mitte.weit{max-width:1280px}

/* ================= Geteilter Bildschirm =================

   Solange kein Motiv laeuft, ist das hier eine gewoehnliche
   zentrierte Spalte. Erst wenn buehne.js ein Motiv geladen hat,
   setzt es `hat-buehne` an <body> — dann teilt sich der Bildschirm:
   links das Werkzeug, rechts die Flaeche, randlos ueber die ganze
   Hoehe.

   Diese Reihenfolge ist Absicht. Waere der geteilte Zustand die
   Vorgabe, stuende bei jedem Aufruf zuerst eine leere Haelfte da —
   und bei einem Dienst ohne gebuchte Flaeche fuer immer. */
@media(min-width:1024px){
  body.hat-buehne main{padding-right:0}

  body.hat-buehne .mitte.weit{
    max-width:none;
    padding-right:0;
    padding-left:clamp(24px,5vw,72px);
  }

  body.hat-buehne .mit-buehne{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(28px,4vw,56px);
    align-items:stretch;
  }

  /* Die Flaeche laeuft bis an den Bildschirmrand und bleibt beim
     Blaettern stehen. `100dvh` statt `100vh`: auf dem Telefon
     wandert die Adresszeile, und mit vh springt die Flaeche dabei. */
  /* GEMESSEN: mit `height:100dvh` und `top:0` begann die Flaeche
     unter dem Kopf und endete 67 Pixel UNTER der Fensterkante — die
     Bildunterschrift war nicht zu sehen. Sie fuellt jetzt genau den
     Rest: Fensterhoehe minus Kopf. */
  body.hat-buehne .buehne{
    position:sticky;
    top:var(--kopf-h);
    height:calc(100dvh - var(--kopf-h));
    display:grid;
    grid-template-rows:1fr;
    gap:0;
    margin:calc(clamp(26px,5vw,54px) * -1) 0 -70px 0;
    padding:0;
  }

  body.hat-buehne .buehne-flaeche,
  body.hat-buehne .buehne-visual{
    aspect-ratio:auto;
    height:100%;
    border-radius:0;
    border:0;
    border-left:1px solid var(--linie);
  }
  /* Das Canvas hat keinen Inhalt, der an einer Kante endet - die
     Trennlinie zum Werkzeug bleibt, mehr braucht es nicht. */
  body.hat-buehne .buehne-visual{border-left:1px solid var(--linie)}

  /* Die Flaeche fuellt die Spalte; der Text sitzt ohnehin in ihr. */
  body.hat-buehne .buehne{grid-template-rows:1fr;gap:0}

  /* Der Kopf gehoert im geteilten Zustand ueber die volle Breite —
     sonst sitzt die Wortmarke in der Mitte einer Spalte, die es
     nicht mehr gibt. */
  body.hat-buehne .kopf .mitte{
    max-width:none;
    padding-left:clamp(24px,5vw,72px);
    padding-right:clamp(20px,3vw,34px);
  }
}

/* min-width:0 ist hier keine Zierde: ohne diese Zeile sprengt der
   erste lange Dateiname die Rasterspalte, weil eine Grid-Spalte von
   sich aus nicht unter ihren Inhalt schrumpft. */
.haupt{min-width:0;display:grid;gap:clamp(18px,2.6vw,26px);align-content:start}

.mit-buehne{display:grid;gap:clamp(20px,3vw,34px);align-items:start}
@media(min-width:1120px){
  .mit-buehne{grid-template-columns:minmax(0,1fr) 360px}
}

.buehne{display:grid;gap:10px;position:sticky;top:24px}

/* Der Wechsel zwischen zwei Motiven. Kurz genug, dass niemand
   wartet, lang genug, dass es kein Zucken ist. Wer Bewegung
   abbestellt hat, bekommt sie nicht — die Regel dafuer steht ganz
   unten und gilt fuer alles. */
.buehne-flaeche,.buehne-text{transition:opacity .26s var(--e)}
.buehne.wechselt .buehne-flaeche,
.buehne.wechselt .buehne-text{opacity:0}
@media(max-width:1119px){
  .buehne{position:static;max-width:420px;margin:0 auto}
}

/* Das Motiv steht im Hochformat 3:4 — ein Anzeigenmass, kein
   Bildschirmmass. Die feste Kante haelt die Spalte ruhig, auch
   bevor das Bild geladen ist. */
.buehne-flaeche{
  display:block;position:relative;
  aspect-ratio:3/4;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--flaeche2);
  border:1px solid var(--linie);
  text-decoration:none;
}
.buehne-flaeche img{width:100%;height:100%;object-fit:cover;display:block}
.buehne-flaeche:hover{border-color:var(--linie2)}

/* ---------------- Die gerechnete Flaeche ----------------

   Steht an derselben Stelle wie eine Anzeige und traegt dieselben
   Masse — dann veraendert sich das Layout nicht, je nachdem ob
   gerade eine Anzeige laeuft. Nur der Rahmen faellt weg: hier
   endet nichts an einer Kante, das Bild laeuft bis an den Rand.

   Kein Rand, kein Hover, kein Zeiger: das ist kein Link. */
.buehne-visual{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  border-radius:var(--r);
  background:#0b0a12;
  /* Ohne das flackert in Safari die Ecke beim ersten Bild. */
  overflow:hidden;
  /* Erscheint weich, statt hart aufzuploppen. */
  animation:visual-auf .5s var(--e) both;
}
@keyframes visual-auf{from{opacity:0}to{opacity:1}}

/* Kennzeichnung. Bezahlte Werbung muss vom Inhalt getrennt
   erkennbar sein — das ist keine Geschmacksfrage. Sie sitzt IM
   Bild, damit sie nicht uebersehen wird, und traegt einen eigenen
   Grund, damit sie auf jedem Motiv lesbar bleibt. */
.buehne-marke{
  position:absolute;top:10px;left:10px;
  background:rgba(23,22,28,.82);
  color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;
}

/* Titel und Zeile liegen IM Motiv, nicht darunter — in jeder
   Breite gleich. Darunter waeren sie im geteilten Bildschirm aus
   dem Fenster gefallen (die Flaeche ist dort 100dvh hoch), und zwei
   verschiedene Anordnungen fuer dieselbe Sache waeren zwei Stellen,
   an denen etwas kaputtgehen kann. */
.buehne-text{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:grid;gap:3px;
  padding:clamp(16px,2.4vw,30px);
}
.buehne-titel{
  font-family:var(--dsp);font-weight:600;color:#fff;
  font-size:clamp(17px,1.5vw,23px);line-height:1.2;
}
.buehne-zeile{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.88)}

/* Ein Verlauf traegt den Text — ohne ihn haengt die Lesbarkeit am
   Motiv, und das bestimmt der Kunde, nicht wir. Unten deckend genug
   fuer Weiss: gerechnet 18,6:1 gegen die unterste Stufe. */
.buehne-flaeche::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:56%;
  background:linear-gradient(to top,
    rgba(10,9,14,.93) 0%, rgba(10,9,14,.76) 32%, rgba(10,9,14,0) 100%);
  pointer-events:none;
}
a.buehne-flaeche:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

/* ============================================================
   Selbstpruefung

   Eine Liste von Schritten, jeder mit einer Zahl daneben. Die Marke
   links traegt den Zustand als FORM, nicht nur als Farbe: ein Ring
   waehrend es laeuft, ein Haken wenn es traegt, ein Kreuz wenn
   nicht. Wer Rot und Gruen nicht unterscheidet, liest trotzdem mit.
   ============================================================ */
.pruef-liste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:2px}

.pruef-schritt{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  align-items:baseline;
  gap:12px;
  padding:11px 14px;
  border-radius:var(--r-klein);
  background:var(--flaeche2);
  font-size:14px;
}
.pruef-schritt + .pruef-schritt{margin-top:0}

/* Die Marke: ein Zeichen, kein Bild. */
.pruef-marke{
  width:16px;height:16px;
  border-radius:50%;
  border:2px solid var(--linie2);
  align-self:center;
  position:relative;
}
.pruef-schritt.laeuft .pruef-marke{
  border-color:var(--akzent);
  border-top-color:transparent;
  animation:pruef-dreht .8s linear infinite;
}
@keyframes pruef-dreht{to{transform:rotate(360deg)}}

.pruef-schritt.gut .pruef-marke{border-color:var(--ok);background:var(--ok)}
.pruef-schritt.gut .pruef-marke::after{
  content:'';position:absolute;left:4px;top:1px;
  width:4px;height:8px;
  border:solid var(--auf-akzent);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.pruef-schritt.schlecht .pruef-marke{border-color:var(--bad);background:var(--bad)}
.pruef-schritt.schlecht .pruef-marke::before,
.pruef-schritt.schlecht .pruef-marke::after{
  content:'';position:absolute;left:5px;top:1px;
  width:2px;height:10px;background:var(--auf-akzent);
}
.pruef-schritt.schlecht .pruef-marke::before{transform:rotate(45deg)}
.pruef-schritt.schlecht .pruef-marke::after{transform:rotate(-45deg)}

/* Offen heisst: nicht geprueft. Kein Haken, kein Kreuz — ein
   waagerechter Strich, damit niemand ihn fuer ein Ergebnis haelt. */
.pruef-schritt.offen .pruef-marke{border-color:var(--grau)}
.pruef-schritt.offen .pruef-marke::after{
  content:'';position:absolute;left:2px;top:5px;
  width:8px;height:2px;background:var(--grau);
}
.pruef-schritt.offen .pruef-text{color:var(--grau)}

.pruef-text{min-width:0}
.pruef-wert{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--grau);
  text-align:right;
}
.pruef-schritt.schlecht .pruef-wert{color:var(--bad)}

@media(max-width:560px){
  .pruef-schritt{grid-template-columns:22px minmax(0,1fr);row-gap:4px}
  .pruef-wert{grid-column:2;text-align:left}
}

/* ============================================================
   Anzeigenverwaltung (nur Agentur)
   ============================================================ */
.motive{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.motive li{
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:var(--r-klein);
  padding:12px 14px;
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:14px;align-items:center;
}
.motive li.aus{opacity:.6}
.motiv-bild{
  width:64px;aspect-ratio:3/4;border-radius:6px;overflow:hidden;
  background:var(--flaeche2);border:1px solid var(--linie);
}
.motiv-bild img{width:100%;height:100%;object-fit:cover}
.motiv-mitte{min-width:0;display:grid;gap:3px}
.motiv-titel{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.motiv-zahlen{font-size:13px;color:var(--grau);font-variant-numeric:tabular-nums}
.motiv-rechts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.vorschau-kasten{
  display:grid;gap:8px;justify-items:center;
  padding:14px;background:var(--flaeche2);
  border:1px solid var(--linie);border-radius:var(--r-klein);
}
.vorschau-kasten img{width:180px;aspect-ratio:3/4;object-fit:cover;border-radius:6px}