/* Wiegen & Eintragen — im Hausstil des Dashboards.
 *
 * ⭐⭐ Die Farbwerte und die drei Schriften sind WÖRTLICH aus `/var/www/html/css/main.css` von
 *   CT120 (Dashbord) übernommen, nicht nachempfunden. Zwei Seiten desselben Hauses sollen nicht
 *   zwei Grüntöne haben, die fast gleich sind.
 * ⭐ Die Schriftdateien liegen bei uns selbst (`/fonts/`), dieselben woff2 wie auf dem Dashboard —
 *   kein Google-Fonts-Aufruf, keine fremde Anfrage aus der Küche.
 * ⭐ Bewusst nur EIN Aussehen (dunkel), wie das Dashboard. Deshalb keine Themenumschaltung, aber
 *   jede Farbe ausdrücklich gesetzt — auch der Hintergrund des Körpers.
 */

@font-face { font-family:'Chakra Petch'; font-weight:600; font-display:swap; src:url('/fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-weight:700; font-display:swap; src:url('/fonts/chakra-petch-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-display:swap; src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-display:swap; src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:100 700; font-display:swap; src:url('/fonts/ibm-plex-sans-var.woff2') format('woff2'); }

:root {
  --bg:#0b0d0e; --card:#161c1e; --card-2:#1c2427; --panel:#101516;
  --line:#272f31; --line-2:#3a464a;
  --ink:#e9efed; --ink-2:#8d9d9b; --ink-3:#556463;
  --teal:#00c4b4; --teal-2:#2ceedb; --teal-deep:#0a635b;
  --red:#ff5d5d; --amber:#ffc24d;
  --r:0.875rem;

  /* --- Glas ---------------------------------------------------------------------------------
     ⭐ Dieselben Zutaten wie deine `.login`-Karte und das Popup-Overlay: halbdurchlaessiger
       Verlauf, Unschaerfe dahinter, ein feiner Innenglanz an der Oberkante. Der feste
       Hintergrundverlauf von `body::before` liefert das, was durchscheint.
     ⚠️ Unschaerfe kostet auf dem Handy Rechenzeit — .7rem reicht fuer die Wirkung, 2rem wuerde
       nur den Luefter wecken. */
  --glas:      linear-gradient(165deg, rgba(28,36,39,.72), rgba(16,21,22,.58));
  --glas-hell: linear-gradient(165deg, rgba(38,48,52,.80), rgba(22,28,30,.66));
  --glas-rand: rgba(255,255,255,.07);
  --glas-blur: blur(.7rem);
  --glanz:     inset 0 .0625rem 0 rgba(255,255,255,.05);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --display:'Chakra Petch','IBM Plex Sans',sans-serif;
  --spalte:34rem;
}

* { box-sizing:border-box; margin:0; padding:0; }

/* ⚠️⚠️ MUSS vor allen display-Regeln stehen und braucht !important.
   Der Browser blendet `hidden` mit `display:none` aus — das ist aber nur die Vorgabe des Browsers,
   und JEDE eigene display-Regel gewinnt dagegen. `.mitte { display:flex }` liess das Anmeldefenster
   deshalb nach dem Anmelden stehen: Der Code setzte `hidden`, das Stylesheet hielt dagegen. */
[hidden] { display:none !important; }

body {
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:1rem; line-height:1.5;
  -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden;
  padding:calc(1rem + env(safe-area-inset-top)) 1rem calc(2rem + env(safe-area-inset-bottom));
}

/* Dieselbe Verlaufsbasis wie das Dashboard — ohne das Knoten-Netz, das braucht eine Küchenseite nicht. */
body::before {
  content:''; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(70% 45% at 15% 12%,  rgba(0,196,180,.13), transparent 72%),
    radial-gradient(80% 55% at 50% -5%,  rgba(0,150,140,.15), transparent 70%),
    radial-gradient(75% 60% at 88% 104%, rgba(8,74,69,.32),   transparent 76%),
    linear-gradient(175deg,#0c1011,#080a0b 70%);
}

/* ⚠️ Ohne Unschaerfe-Unterstuetzung (aeltere Browser) wuerden die halbdurchlaessigen Flaechen
   einfach durchsichtig und der Text staende auf dem Verlauf. Dann lieber deckend. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root { --glas:var(--card); --glas-hell:var(--card-2); --glas-rand:var(--line); }
  .knopf.gefahr { background:linear-gradient(180deg,#ff6a6a,#9c3636); color:#2a0d0d; }
}

main, section.mitte { max-width:var(--spalte); margin:0 auto; }

/* --- Anmeldung ------------------------------------------------------------------------------- */
.mitte { padding-top:2.5rem; display:flex; flex-direction:column; gap:1rem; }
.marke {
  font-family:var(--display); font-weight:700; font-size:1.6rem;
  letter-spacing:.01em; color:var(--ink); text-wrap:balance;
}
.unterzeile { color:var(--ink-2); margin-bottom:.5rem; }

/* --- Die zwei Zahlen ------------------------------------------------------------------------- */
.anzeige { display:grid; grid-template-columns:1.4fr 1fr; gap:.75rem; margin:.5rem 0 1rem; }

.wert {
  background:var(--glas); -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur);
  border:.0625rem solid var(--glas-rand); border-radius:var(--r);
  box-shadow:0 .75rem 2rem -.75rem rgba(0,0,0,.6), var(--glanz);
  padding:.9rem 1rem; display:flex; flex-direction:column; gap:.15rem;
}
.etikett {
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2);
}
.zahl {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:2rem; font-weight:500; line-height:1.1; color:var(--teal-2);
}
.wert.gross .zahl { font-size:2.5rem; }
.einheit { font-family:var(--mono); font-size:.8rem; color:var(--ink-2); margin-top:-.15rem; }
.fussnote { font-size:.72rem; color:var(--ink-3); }

/* --- Tagleiste ------------------------------------------------------------------------------- */
.tagleiste { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:1.25rem 0 .5rem; }
.tagname { font-family:var(--display); font-weight:600; font-size:1.05rem; }

.tagessumme {
  display:flex; flex-wrap:wrap; gap:.35rem 1.1rem;
  padding:.6rem .2rem; color:var(--ink-2); font-size:.88rem;
}
.tagessumme strong { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); font-weight:500; }

/* --- Listen ---------------------------------------------------------------------------------- */
.liste { display:flex; flex-direction:column; gap:.4rem; }

.zeile {
  display:flex; align-items:center; gap:.75rem;
  background:var(--glas); -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur);
  border:.0625rem solid var(--glas-rand); border-radius:var(--r); box-shadow:var(--glanz);
  padding:.7rem .85rem; min-height:3rem; width:100%; text-align:left;
  color:var(--ink); font:inherit; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.zeile:hover { border-color:var(--teal-deep); background:var(--glas-hell); }
.zeile:focus-visible { outline:.125rem solid var(--teal); outline-offset:.125rem; }
.zeile .name { flex:1; }
/* Die Marke steht klein unter der Bezeichnung — sie unterscheidet, sie benennt nicht.
   ⚠️⚠️ `font-family` und `font-weight` MUESSEN hier zurueckgesetzt werden: `.marke` ist weiter
   oben schon die Seitenmarke (Chakra Petch 700, 1,6rem). Ohne diese zwei Angaben stand die Marke
   unter jedem Treffer fett in der Ueberschriftenschrift — also genau andersherum als der Satz
   darueber es beschreibt. Eine Klasse, zwei Bedeutungen: mein Fehler beim Benennen. */
.zeile .marke {
  display:block; color:var(--ink-3); font-size:.78rem;
  font-family:var(--sans); font-weight:400; letter-spacing:normal; text-transform:none;
}
.zeile .menge {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  color:var(--ink-2); font-size:.85rem; white-space:nowrap;
}
.mahlzeit {
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); margin:.9rem .2rem .1rem;
}
.leer { color:var(--ink-2); padding:1.2rem .2rem; }

/* --- Knöpfe ---------------------------------------------------------------------------------- */
.knopf {
  font:inherit; font-weight:500;
  background:var(--glas-hell); -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur);
  color:var(--ink); border:.0625rem solid var(--glas-rand); border-radius:var(--r);
  box-shadow:var(--glanz);
  padding:.7rem 1rem; min-height:3rem; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.knopf:hover { border-color:var(--teal); }
.knopf:focus-visible { outline:.125rem solid var(--teal); outline-offset:.125rem; }

.knopf.gross {
  background:linear-gradient(165deg, rgba(0,196,180,.30), rgba(10,99,91,.62));
  border-color:var(--teal); color:var(--ink);
  font-family:var(--display); font-weight:600; letter-spacing:.02em;
}
.knopf.gross:hover { background:linear-gradient(165deg, rgba(0,196,180,.45), rgba(13,123,113,.72)); }
/* ⭐ Woertlich das `.btn-delete` des Dashboards: derselbe Verlauf, dieselbe dunkle Schrift.
   ⚠️ Abmelden und Loeschen sind NIE gruen. Gruen heisst hier „weiter so" — wer eine Sitzung
      beendet oder eine Zeile wegwirft, soll die Farbe sehen, die es auch ist. */
.knopf.gefahr {
  /* ⚠️ Durchscheinend wie alle anderen Flaechen — dieselben Rotwerte wie `.btn-delete`, nur mit
     Alpha. Und dadurch HELLE Schrift: Das dunkle #2a0d0d des Dashboards braucht die deckende
     Flaeche darunter, auf Glas waere es unlesbar. */
  background:linear-gradient(165deg, rgba(255,106,106,.34), rgba(156,54,54,.60));
  border-color:rgba(255,106,106,.55); color:#ffd9d9; font-weight:500;
}
.knopf.gefahr:hover {
  background:linear-gradient(165deg, rgba(255,133,133,.48), rgba(185,69,69,.72));
  border-color:rgba(255,133,133,.8); color:#fff;
}

.knopf.klein { min-height:2.5rem; padding:.4rem .75rem; }
/* ⚠️ Vorher `color:var(--ink-3)` ohne Rahmen — auf dem dunklen Grund praktisch unsichtbar.
   Ein Knopf, den man suchen muss, ist keiner. */
.knopf.leise { margin-top:2rem; }

.knopfreihe { display:flex; gap:.5rem; margin:1rem 0; }
.knopfreihe .gross { flex:1; }

/* --- Formulare ------------------------------------------------------------------------------- */
.karte {
  background:var(--glas); -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur);
  border:.0625rem solid var(--glas-rand); border-radius:var(--r);
  box-shadow:0 1.25rem 3rem -1rem rgba(0,0,0,.7), var(--glanz);
  padding:1rem; display:flex; flex-direction:column; gap:.45rem;
}
.karte.eng { padding:.85rem; }

label { font-size:.82rem; color:var(--ink-2); }
input, select {
  font:inherit; color:var(--ink); background:rgba(8,11,12,.55);
  border:.0625rem solid var(--line-2); border-radius:.625rem;
  box-shadow:inset 0 .0625rem .25rem rgba(0,0,0,.35);
  padding:.65rem .7rem; min-height:3rem; width:100%;
}
input:focus, select:focus { outline:.125rem solid var(--teal); outline-offset:.0625rem; border-color:var(--teal); }
input::placeholder { color:var(--ink-3); }

.vier { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.vier label { display:flex; flex-direction:column; gap:.2rem; }
.je100 { margin-top:.4rem; font-size:.82rem; color:var(--ink-2); }

.fehler { color:var(--red); font-size:.88rem; margin-top:.3rem; }
.hinweis { color:var(--ink-3); font-size:.82rem; margin-top:1.5rem; }
.vorschau {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  color:var(--teal-2); margin-top:.4rem; font-size:.9rem;
}
.leise { color:var(--ink-3); font-weight:400; }

/* --- Geräteseite ------------------------------------------------------------------------------ */
.kopfzeile { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.marke.klein { font-size:1.05rem; }

.qr {
  /* ⚠️ Weisser Grund unter dem QR — auf dunklem Untergrund liest ihn keine Kamera zuverlässig.
     Das ist kein Stilbruch, das ist die Bedingung, unter der das Ding funktioniert. */
  background:#fff; border-radius:.5rem; padding:.75rem;
  display:flex; justify-content:center;
}
.qr svg { width:100%; height:auto; max-width:15rem; display:block; }

.kopplung-code {
  font-family:var(--mono); font-size:1.35rem; font-weight:500; letter-spacing:.12em;
  color:var(--teal-2); text-align:center; margin:.2rem 0;
}
.hinweis.oben { margin:0 0 1rem; }
#geraete-liste .zeile { cursor:default; }
/* ⚠️ Gerätezeilen sind keine Knöpfe — sie sollen beim Berühren NICHT aufleuchten. Aber sie
   müssen dabei Glas bleiben; hier stand vorher die alte deckende Farbe und stach heraus. */
#geraete-liste .zeile:hover { border-color:var(--glas-rand); background:var(--glas); }

/* --- Verlauf und Diagramme --------------------------------------------------------------------- */
.kopf-knoepfe { display:flex; gap:.4rem; }
/* --- Monatskalender fuer den freien Zeitraum ---------------------------------------------------
   ⭐ Selbst gezeichnet statt `<input type="date">`: Der native Kalender kann nur EINEN Tag. Eine
     Spanne sichtbar zu machen — zwei Raender und das Band dazwischen — geht damit nicht.
   ⭐ Markiert wird im Hausfarbton, nicht im Blau der Vorlage: das Stylesheet nimmt seine Farben
     woertlich vom Dashboard, und zwei fast gleiche Toene in einem Haus sind schlimmer als einer. */
.zeitraum {
  background:var(--glas); -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur);
  border:.0625rem solid var(--glas-rand); border-radius:var(--r);
  box-shadow:0 .75rem 2rem -.75rem rgba(0,0,0,.6), var(--glanz);
  padding:.75rem .8rem .8rem; margin:-.5rem 0 1rem;
}
/* ⭐⭐ Der Kalender schiebt sich heraus, statt zu springen: das Raster faehrt von `0fr` auf `1fr`,
   die innere Huelle schneidet dabei ab. `max-height` waere die alte Notloesung — die braucht eine
   geratene Hoehe und ruckelt, sobald der Monat sechs statt fuenf Wochenzeilen hat.
   ⚠️ Zugeklappt ist der Ruhezustand, auch beim ersten Aufbau: `0fr` steht im Stylesheet, nicht im
   Skript. Sonst blitzt der Kalender beim Laden einmal auf. */
.kal-huelle { display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease; }
.zeitraum.auf .kal-huelle { grid-template-rows:1fr; }
.kal-innen { overflow:hidden; min-height:0; }
/* Wer Bewegung abgeschaltet hat, bekommt keine — dafuer sorgt schon die Sammelregel ganz unten
   (`prefers-reduced-motion`), hier braucht es keine zweite. */

/* Die zwei Felder: sehen aus wie Eingabefelder, sind aber Schalter — das hervorgehobene bekommt
   den naechsten Tipp im Kalender. */
.kal-felder { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-bottom:.6rem; }
.kal-feld {
  font:inherit; text-align:left; cursor:pointer; position:relative;
  display:flex; flex-direction:column; gap:.1rem;
  color:var(--ink); background:rgba(8,11,12,.55);
  border:.0625rem solid var(--line-2); border-radius:.625rem;
  box-shadow:inset 0 .0625rem .25rem rgba(0,0,0,.35);
  padding:.45rem .65rem; min-height:3rem;
}
.kal-feld > span:last-child { font-family:var(--mono); font-variant-numeric:tabular-nums; }
/* ⚠️ Hervorgehoben wird NUR, solange der Kalender offen ist: dann bedeutet es „dieses Feld
   bekommt den naechsten Tipp". Zugeklappt steht nichts aus, und eine Hervorhebung ohne Bedeutung
   sieht aus wie eine unfertige Eingabe. */
.zeitraum.auf .kal-feld.an { border-color:var(--teal); color:var(--teal-2); box-shadow:0 0 0 .0625rem var(--teal); }
.zeitraum.auf .kal-feld.an .etikett { color:var(--teal-2); }

/* Der Winkel sagt, dass sich hier etwas aufklappt — ohne ihn sehen die Felder aus wie Anzeigen. */
.kal-feld::after {
  content:'\25be'; position:absolute; right:.6rem; top:50%;
  transform:translateY(-50%); color:var(--ink-3); transition:transform .15s;
}
.zeitraum.auf .kal-feld::after { transform:translateY(-50%) rotate(180deg); }

.kal-kopf { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.kal-kopf .knopf { min-height:2.5rem; padding:.35rem .8rem; }
.kal-monat { font-family:var(--display); font-weight:600; font-size:1.05rem; }

.kal-wochentage, .kal-tage { display:grid; grid-template-columns:repeat(7, 1fr); }
.kal-wochentage {
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); text-align:center; padding-bottom:.3rem;
}

/* ⚠️ KEIN gap: das Band einer Spanne muss durchlaufen. Der Abstand steckt stattdessen als
   senkrechte Luft in der Zelle selbst. */
.kal-tage { gap:.2rem 0; }

.kal-tag {
  font:inherit; font-family:var(--mono); font-variant-numeric:tabular-nums;
  background:none; border:0; color:var(--ink); cursor:pointer;
  /* ⚠️ 2.6rem sind rund 42 px — die Untergrenze fuer einen Fingertipp. Sieben Spalten auf einem
     schmalen Handy sind eng genug; kleiner trifft man nicht mehr zuverlaessig. */
  min-height:2.6rem; padding:0; border-radius:.55rem;
}
.kal-tag:hover:not(:disabled) { background:var(--glas-hell); }
.kal-tag:focus-visible { outline:.125rem solid var(--teal); outline-offset:-.125rem; }

.kal-tag.fremd, .kal-tag.zukunft { color:var(--ink-3); cursor:default; }
/* Heute bleibt auch ausserhalb der Spanne erkennbar — aber nur als Ring, nicht als Fuellung:
   sonst sieht ein zufaelliger Tag aus wie eine Auswahl. */
.kal-tag.heute { box-shadow:inset 0 0 0 .0625rem var(--teal-deep); }

.kal-tag.drin { background:rgba(0,196,180,.16); border-radius:0; }
.kal-tag.rand {
  background:var(--teal); color:#04211f; font-weight:500;
  box-shadow:0 .25rem .75rem -.25rem rgba(0,196,180,.5);
}

.diagramm {
  background:var(--glas); -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur);
  border:.0625rem solid var(--glas-rand); border-radius:var(--r);
  box-shadow:0 .75rem 2rem -.75rem rgba(0,0,0,.6), var(--glanz);
  padding:.9rem 1rem 1rem; margin:0 0 .75rem;
}
.diagramm figcaption {
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-2); margin-bottom:.5rem;
}
.diagramm-bild { width:100%; height:auto; display:block; overflow:visible; }

/* ⭐ Ein Balken, eine Farbe — eine Reihe braucht keine Legende, die Ueberschrift benennt sie. */
.d-balken { fill:var(--teal); opacity:.78; transition:opacity .15s; cursor:pointer; }
.d-balken:hover, .d-balken:focus { opacity:1; outline:none; }

/* ⚠️ Netz und Achsen bleiben zurueckhaltend — sie sind Hilfslinien, nicht der Inhalt. */
.d-netz    { stroke:var(--line); stroke-width:1; }
.d-achse   { fill:var(--ink-3); font-size:7px; font-family:var(--mono); }
.d-schnitt { stroke:var(--teal-2); stroke-width:1.2; stroke-dasharray:4 3; opacity:.9; }
.d-band    { fill:var(--teal); opacity:.09; }
.d-luecke  { stroke:var(--ink-3); stroke-width:1.5; opacity:.5; }
.d-leer    { fill:var(--ink-3); font-size:9px; }

.ablesung {
  font-family:var(--mono); font-size:.74rem; color:var(--ink-2);
  margin-top:.5rem; min-height:1.1rem;
}

/* --- Popups: Muster aus settings.css des Dashboards, woertlich uebernommen ---------------------- */
@keyframes rise { from { opacity:0; transform:translateY(.9rem); } to { opacity:1; transform:translateY(0); } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

.popup-overlay {
  position:fixed; inset:0; z-index:60; display:none;
  align-items:center; justify-content:center; padding:1.5rem;
  background:rgba(6,9,9,.74);
  -webkit-backdrop-filter:blur(.4rem); backdrop-filter:blur(.4rem);
}
.popup-overlay.show { display:flex; animation:fade .25s ease; }

.popup-content {
  width:100%; max-width:25rem;
  background:linear-gradient(165deg,var(--card-2),var(--panel));
  border:.0625rem solid var(--line-2); border-radius:1.1rem;
  padding:1.85rem 1.7rem 1.6rem;
  -webkit-backdrop-filter:blur(1rem); backdrop-filter:blur(1rem);
  box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.8), var(--glanz);
  animation:rise .3s cubic-bezier(.2,.7,.2,1);
}
.popup-content h3 {
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:1.25rem;
}
.popup-content p { font-size:.92rem; color:var(--ink-2); margin-bottom:1.25rem; }
.popup-content input { margin-bottom:.5rem; }
.popup-actions { display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.4rem; }
.popup-actions .knopf { min-height:2.6rem; }

/* --- Foto der Naehrwerttabelle ------------------------------------------------------------------
   ⚠️ Das Dateifeld selbst ist ausgeblendet und wird ueber sein `label` bedient: ein
   `input[type=file]` sieht in jedem Browser anders aus und laesst sich nicht gestalten. Das
   `label` ist der Knopf, den man sieht — und es funktioniert ohne eine Zeile JavaScript. */
/* ⭐ Zwei Bilder nebeneinander: auf dem Handy sind das zwei halbe Spalten, und das reicht —
   angetippt wird das Bild ohnehin gross. Untereinander wäre die Seite doppelt so lang. */
.foto-paar { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; align-items:start; }
.foto-knopf { display:block; text-align:center; margin-bottom:.6rem; }
.foto-vorschau { margin:0 0 .8rem; display:flex; flex-direction:column; gap:.4rem; }
.foto-vorschau img {
  display:block; width:100%; height:auto; border-radius:.625rem;
  border:.0625rem solid var(--glas-rand);
  /* Ein Foto der Rueckseite ist hoch — ohne Deckel schiebt es die Felder aus dem Bild. */
  max-height:22rem; object-fit:contain; background:rgba(8,11,12,.55);
}

/* --- Dialoge --------------------------------------------------------------------------------- */
dialog {
  width:min(100%,var(--spalte));
  border:.0625rem solid var(--glas-rand); border-radius:var(--r);
  background:var(--glas); -webkit-backdrop-filter:blur(1rem); backdrop-filter:blur(1rem);
  box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.8), var(--glanz);
  color:var(--ink); padding:1rem;
  margin:auto auto 0;          /* am Handy von unten — der Daumen ist unten, nicht in der Mitte */
}
dialog::backdrop { background:rgba(0,0,0,.62); }
.dialog-kopf { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.dialog-kopf h2 { font-family:var(--display); font-weight:600; font-size:1.05rem; }
.suchzeile { display:flex; gap:.5rem; margin-bottom:.6rem; }
.suchzeile input { flex:1; }
details summary { color:var(--ink-2); padding:.8rem .2rem; cursor:pointer; }
details summary:hover { color:var(--teal-2); }

@media (min-width:34rem) { dialog { margin:auto; } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }