.
* ------------------------------------------------------------------------- */
/* --- Felder, die die Redaktion nicht braucht ------------------------------
* Dieselben Deklarationen wie dort, nur fuer weitere Typen: der Selektor in
* redaktion/style.css zaehlt sie einzeln auf, und diese Datei aendert ihn nicht.
* input:focus deckt den Fokus schon ab, das steht darum hier nicht noch einmal. */
input[type=search],
input[type=date],
input[type=number],
input[type=email]{
width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;
font-family:inherit;font-size:17px;color:var(--ink)}
input[type=date],input[type=number]{max-width:230px}
input[type=file]{margin-top:6px;max-width:100%;font-family:inherit;font-size:16px}
/* --- Sichtbarer Fokus -----------------------------------------------------
* Die Redaktion setzt ihn nur auf Eingabefelder. Wer mit der Tastatur geht,
* kommt aber auch auf Knoepfe, Links und Aufklapper. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* --- Kleinigkeiten der Uebersicht ----------------------------------------- */
/* Ein Knopf, der ohne JavaScript nichts tut, ist schlimmer als gar kein Knopf. */
.nur-js{display:none}
.js .nur-js{display:inline-block}
/* Suchzeile: auf dem Handy untereinander, sobald Platz ist nebeneinander. */
.suche{display:flex;flex-direction:column;gap:12px}
.suche label{margin:0 0 5px}
.suche .feld{min-width:0}
.suche .tools{margin-top:0}
/* Die letzten Tage vor dem Loeschen. Gelb genuegt — Rot hiesse, es sei etwas kaputt. */
.flag.bald{background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-weight:600}
/* Der Aufklapper fuer Link und Nachricht steht im zweiten Glied und traegt kleiner auf. */
details.klein{margin:12px 0 0}
details.klein>summary{padding:10px 14px;font-size:15px;font-weight:400}
details.klein .inner{padding:0 14px 14px}
details.klein textarea{min-height:64px;font-size:15px}
details.klein textarea.gross{min-height:170px}
/* Adresse und Knopf nebeneinander, solange die Zeile es hergibt. */
.adresse,.zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.adresse input{flex:1 1 300px;font-size:19px;font-weight:600;background:var(--bg);cursor:pointer}
.zeile input{flex:1 1 240px}
/* --- Fotoraster -----------------------------------------------------------
* Quadrate, weil Hoch- und Querformat sonst eine Treppe geben. Das Original
* bleibt unbeschnitten — geschnitten wird nur die Vorschau. */
.raster{list-style:none;margin:14px 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kachel{position:relative;min-width:0}
.kachel .bild{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
border-radius:9px;background:var(--line)} /* Ton statt Loch, solange das Bild laedt */
.kachel .bild img{width:100%;height:100%;object-fit:cover;display:block}
.kachel .bild:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Herkunft als Text, nicht als Symbol oder Farbrand: ein Rand in Gruen sagt
* niemandem etwas, der ihn nicht sieht — und vorlesen laesst er sich auch nicht. */
.kachel .herkunft{margin:6px 0 0;font-size:15px;line-height:1.35;color:var(--ink-soft);
overflow-wrap:break-word}
.kachel .herkunft .wer{color:var(--ink)}
/* Loeschknopf: 44 Pixel Trefferflaeche, sichtbarer Kreis nur 36.
* background-clip malt den Kreis ins Innere, die Polsterung bleibt trotzdem klickbar. */
.kachel .weg{position:absolute;top:0;right:0;
width:44px;height:44px;padding:4px;border:0;cursor:pointer;
background:var(--ink);background-clip:content-box;color:#fff;border-radius:999px;
font-family:inherit;font-size:20px;line-height:1}
.kachel .weg:hover{background:var(--red);background-clip:content-box}
/* Das Titelbild soll man im Raster sehen, ohne die Knoepfe zu lesen. Ring statt
* dickerem Rand: ein Rand rueckte die Kachel um zwei Pixel aus der Reihe. */
.kachel.ist-titel .bild{box-shadow:0 0 0 3px var(--blue)}
/* Ist die Frist um, zeigt die Seite die Bilder niemandem mehr — auch Manuel nicht.
* Der Platzhalter behaelt die Form, sonst faellt das Raster in sich zusammen. */
.kachel .ohne{display:flex;align-items:center;justify-content:center;text-align:center;
aspect-ratio:1/1;border-radius:9px;background:var(--line);
color:var(--ink-soft);font-size:15px;padding:0 14px}
@media (min-width:600px){
.raster{grid-template-columns:repeat(3,1fr);gap:14px}
.suche{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
.suche .feld{flex:1 1 240px}
.suche .feld.eng{flex:0 1 190px}
}
@media (min-width:900px){
.raster{grid-template-columns:repeat(4,1fr)}
}
/* Auf Maus und Trackpad haelt sich der Knopf zurueck, bis man hinzeigt.
* Auf dem Handy bleibt er stehen — dort gibt es kein Hover, und ein
* unsichtbarer Knopf ist keiner. Ohne pointer-events waere er weiterhin
* klickbar: unsichtbar loeschen will niemand. */
@media (hover:hover) and (pointer:fine){
.kachel .weg{opacity:0;pointer-events:none;transition:opacity .15s ease}
.kachel:hover .weg,
.kachel:focus-within .weg{opacity:1;pointer-events:auto}
}
/* --- Schreiben und Vorschau -----------------------------------------------
* Untereinander, bis der Bildschirm zwei Spalten wirklich traegt. Bei 700px
* waeren es zwei Spalten von je 320 Pixeln — das liest sich schlechter als eine. */
.schreiben{display:grid;grid-template-columns:1fr;gap:0 22px;align-items:start}
.schreiben>div{min-width:0}
.schreiben textarea.big{min-height:200px}
.vorschau{max-width:60ch; /* ruhige Lesebreite, auch wenn die Spalte breiter ist */
border:1px solid var(--line);border-radius:9px;background:var(--bg);
padding:2px 16px;min-height:140px;margin-top:6px;overflow-wrap:break-word}
.vorschau h3{font-size:19px;margin:18px 0 6px}
.vorschau ul{padding-left:22px}
.vorschau:empty::before{content:"Was du schreibst, steht gleich hier.";
color:var(--ink-soft);display:block;margin:16px 0}
@media (min-width:900px){
.schreiben{grid-template-columns:1fr 1fr}
.schreiben textarea.big{min-height:340px}
.vorschau{min-height:340px;max-height:60vh;overflow:auto;margin-top:0}
}
/* --- Drei kleine Zustaende ------------------------------------------------ */
/* Die Frist. Gelb faellt auf, ohne zu schreien: es ist eine Ansage, kein Fehler. */
.frist{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
background:var(--yellow);border:1px solid var(--line);border-radius:10px;
padding:12px 16px;margin:16px 0;font-size:16px}
.frist strong{font-weight:600}
.frist .wann{color:var(--ink-soft)}
/* Ist die Frist um, ist es keine Ansage mehr — dann die Form der Warnung aus .note. */
.frist.vorbei{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--red);
border-radius:0 10px 10px 0;color:var(--red)}
/* Der Kasten zum Herauskopieren: eingelassen, damit man sieht, wo der Text aufhoert. */
.kopierbar{background:var(--bg);border:1px solid var(--line);border-radius:10px;
padding:12px 14px;margin:12px 0}
.kopierbar .text{margin:0;white-space:pre-wrap;overflow-wrap:break-word;
font-family:inherit;font-size:16px;line-height:1.5;color:var(--ink)}
.kopierbar textarea{background:var(--card)}
.kopierbar .tools{margin-top:10px}
/* Kennzahlen: Zahl gross, Wort klein darunter — eine Zeile, die man ueberfliegt. */
.kennzahlen{display:flex;flex-wrap:wrap;gap:12px 26px;list-style:none;margin:14px 0 0;padding:0}
.kennzahlen>*{min-width:0}
.kennzahlen .zahl{display:block;font-size:22px;font-weight:600;line-height:1.2}
.kennzahlen .wort{color:var(--ink-soft);font-size:15px}
/* --- Bewegung -------------------------------------------------------------
* Ein kurzes Aufblenden nimmt dem Erscheinen der Vorschaubilder die Haerte.
* Es laeuft, wenn das Raster gezeichnet wird — nicht, wenn das einzelne Bild
* fertig geladen ist: dafuer braeuchte es JavaScript, und hier soll die Seite
* auch ohne vollstaendig sein. Bilder, die spaeter nachkommen, stehen darum
* einfach da. Der warme Ton der leeren Kachel faengt das ab. */
@keyframes bild-einblenden{from{opacity:0}to{opacity:1}}
.kachel .bild img{animation:bild-einblenden .45s ease-out both}
@media (prefers-reduced-motion: reduce){
.kachel .bild img{animation:none;opacity:1}
.kachel .weg{transition:none}
}
/* Handy: die kleinen Knöpfe auf den Karten sind sonst nur rund 36 px hoch.
Die Regel aus style.css greift nicht dagegen an, weil .btn.small
spezifischer ist als .btn — Media Queries erhöhen die Spezifität nicht.
Neben «Löschen» steht «Nachricht kopieren»; ein Fehlgriff dort ist teuer. */
@media (max-width: 600px) {
.btn.small { padding: 10px 15px; font-size: 16px; }
}
/* Zwei Kleinigkeiten, die vorher als style-Attribut im PHP standen. */
.meta.luft { margin: 18px 0 12px; }
.preview.gross { max-width: 420px; }
/* --- Hochladen: Ablageflaeche, Warteschlange, Videokacheln ----------------
* Geruest, das fotos.php und inside.js schreiben:
*
*
* … Nochmals versuchen
*
* Alle Farben aus redaktion/style.css; hier wird keine neu erfunden. */
/* Ohne JavaScript hat das Ziehen keinen Sinn, und ein Kasten, der nichts tut,
* ist schlimmer als keiner — darum display:none, bis .js am haengt.
* Die Flaeche ist reine Sehhilfe (aria-hidden) und traegt darum keinen tabindex:
* bedient wird das Dateifeld darunter, das sichtbar und beschriftet stehenbleibt. */
.ablage{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
min-height:132px;margin:10px 0 0;padding:22px 18px;text-align:center;cursor:pointer;
border:2px dashed var(--line);border-radius:12px;background:var(--bg);
transition:border-color .15s ease,background-color .15s ease}
.js .ablage{display:flex}
.ablage:hover{border-color:var(--blue);background:var(--card)}
.ablage .ablage-gross{font-size:18px;font-weight:600;line-height:1.3;color:var(--ink)}
.ablage .ablage-klein{font-size:15px;color:var(--ink-soft)}
/* Im Ziehzustand deutlich: man laesst los, waehrend man auf den Zeiger schaut. */
.ablage.drueber{border-style:solid;border-color:var(--blue);background:var(--card);
box-shadow:0 0 0 3px rgba(102,147,201,.22)}
/* Was nur ohne Skript gilt — das Gegenstueck zu .nur-js weiter oben. */
.js .ohne-js{display:none}
/* --- Die Warteschlange --------------------------------------------------- */
.warteschlange{list-style:none;margin:12px 0 0;padding:0;
display:flex;flex-direction:column;gap:8px}
.warteschlange li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.warteschlange .name{font-size:15px;font-weight:600;min-width:0;
overflow-wrap:anywhere;word-break:break-word}
.warteschlange .stand{font-size:15px;color:var(--ink-soft);justify-self:end;text-align:right}
/* Der Balken ueber die ganze Breite unter beiden — sonst springt die Zeile,
* sobald der Zustandstext von «wartet» auf «wird geschickt» wechselt. */
.warteschlange progress{grid-column:1 / -1;width:100%;height:8px;margin-top:4px;
appearance:none;border:0;border-radius:999px;background:var(--line);overflow:hidden}
.warteschlange progress::-webkit-progress-bar{background:var(--line);border-radius:999px}
.warteschlange progress::-webkit-progress-value{background:var(--blue);border-radius:999px}
.warteschlange progress::-moz-progress-bar{background:var(--blue);border-radius:999px}
.warteschlange li.fehler{border-left:4px solid var(--red)}
.warteschlange li.fehler .stand{color:var(--red);justify-self:start;text-align:left;
grid-column:1 / -1}
/* 44 Pixel Trefferflaeche: der Knopf steht neben nichts, aber er wird auf dem
* Handy gedrueckt, und danebengreifen heisst hier nochmals zwei Minuten warten. */
.warteschlange li.fehler .btn{grid-column:1 / -1;justify-self:start;margin-top:6px;
min-height:44px;padding:10px 16px;font-size:16px}
/* Die Sammelmeldung am Schluss. .note bringt Form und Farbe aus style.css mit. */
.bilanz{margin-top:12px}
/* --- Videokacheln --------------------------------------------------------
* Standbild plus Abspielzeichen plus Laufzeit. Das Zeichen ist reine Zier
* (aria-hidden) — was die Kachel ist, sagt das alt-Wort des Bildes.
* .kachel .bild ist schon weiter oben position:relative; darauf sitzt alles hier. */
/* Dreieck aus Rahmen statt Schriftzeichen: ein ▶ faellt in jeder Schrift anders
* aus und sitzt nie mittig. Der Kreis liegt unter dem Dreieck, beide zentriert.
* Nicht auf .kachel eingeengt: dasselbe Zeichen sitzt auf der Rueckfrageseite
* vor dem Loeschen ueber dem Standbild (.medium). Beide Eltern sind relativ. */
.abspielen{position:absolute;top:50%;left:50%;width:54px;height:54px;
transform:translate(-50%,-50%);border-radius:999px;
background:rgba(50,50,50,.62);box-shadow:0 1px 6px rgba(0,0,0,.28);
pointer-events:none}
.abspielen::after{content:"";position:absolute;top:50%;left:50%;
transform:translate(-40%,-50%);
border-style:solid;border-width:10px 0 10px 17px;
border-color:transparent transparent transparent #fff}
.kachel .bild:hover .abspielen{background:rgba(50,50,50,.8)}
/* Die Laufzeit unten rechts, dunkel unterlegt: auf einem hellen Standbild
* waere weisse Schrift sonst nicht zu lesen. */
.kachel .laufzeit{position:absolute;right:6px;bottom:6px;
background:rgba(50,50,50,.72);color:#fff;border-radius:6px;
padding:2px 7px;font-size:14px;line-height:1.35;font-variant-numeric:tabular-nums;
pointer-events:none}
/* Video, dessen Standbild fehlt — der Browser hat keines hergegeben. Die Kachel
* behaelt ihre Form, sonst faellt das Raster in sich zusammen. Das Wort sitzt
* unten und nicht mittig: in der Mitte liegt das Abspielzeichen darueber und
* verdeckte es vollstaendig. */
.kachel .kein-standbild{display:flex;align-items:flex-end;justify-content:center;
aspect-ratio:1/1;border-radius:9px;background:var(--line);
color:var(--ink-soft);font-size:15px;padding:0 14px 12px}
/* Auf der Rueckfrageseite vor dem Loeschen: dasselbe Zeichen ueber dem Standbild. */
.medium{position:relative;display:inline-block;max-width:100%}
.medium .preview{display:block}
.ohne-standbild{display:flex;align-items:center;justify-content:center;
width:100%;max-width:420px;aspect-ratio:4/3;border-radius:9px;background:var(--line);
color:var(--ink-soft);font-size:16px;margin:0 0 4px}
/* Ein Posten der Kennzahlen kann leer bleiben (keine Videos): dann weg damit.
* Die Regel steht hier, weil .kennzahlen ein Flex-Behaelter ist — ohne sie
* verliesse sich das Versteckte allein auf die Voreinstellung des Browsers. */
.kennzahlen li[hidden]{display:none}
@media (prefers-reduced-motion: reduce){
.ablage{transition:none}
}
/* Erster und letzter Tag nebeneinander, sobald Platz ist. Auf dem Handy
untereinander — zwei halbe Datumsfelder sind dort nicht bedienbar. */
.zeitspanne { display: grid; gap: 0 18px; }
@media (min-width: 560px) {
.zeitspanne { grid-template-columns: 1fr 1fr; }
}