/* ============================================================================
   Marie Jade Finanzen — Design-System
   Umsetzung von _SPEC.md §2. Reines CSS, kein Build-Schritt.

   Aufbau dieser Datei
     1. Token-Block (:root) — wortwoertlich aus §2
     2. Grundlagen (reset, body, a, button, input[type=range])
     3. App-Schale (.app, Kopf, Screen, sichere Bereiche)
     4. Typo-Stufen (.t-*)
     5. Bauteile (.card, .hero, .pill, .chip, .tap/.icon-btn, .src,
        .bar, .prog, .btn-*, .range, .nav)
     6. Kleine Helfer (Layout, Farbrollen, Trennlinien)

   Konvention: Bauteil-Klassen sind flach benannt, Varianten mit --Suffix
   (.chip--grn). Andere Screens bauen ausschliesslich gegen diese Klassen.
   ========================================================================== */

/* --- 1. Token-Block ------------------------------------------------------ */

:root{
  --bg:#F4F4F6;          /* App-Fläche, sehr helles Grau  */
  --card:#FFFFFF;        /* Karten                        */
  --ink:#1B1B22;         /* Text und dunkle Flächen       */
  --mut:#77747E;         /* Sekundärtext                  */
  --hair:rgba(27,27,34,.07);  /* Kartenrahmen             */
  --hair2:rgba(27,27,34,.10); /* Rahmen runder Buttons    */
  --track:rgba(27,27,34,.12); /* leere Balken, Spuren     */

  --acc:#6D28D9;         /* Violett für Text und Zahlen   */
  --acc2:#7C3AED;        /* Violett für Flächen, Balken   */
  --acc-soft:rgba(124,58,237,.14);
  --acc-line:rgba(124,58,237,.65);
  --acc-lite:#A78BFA;    /* aktiv auf dunklem Grund       */

  --grn:#3E7D54;         /* positiv auf hell              */
  --grn-soft:rgba(62,125,84,.14);
  --red:#C0564A;         /* negativ auf hell              */
  --red-soft:rgba(192,86,74,.13);

  --on-dark:#F7F6FA;              /* Text auf der Hero-Karte      */
  --on-dark-mut:rgba(247,246,250,.55);
  --on-dark-off:rgba(247,246,250,.45);
  --on-dark-tile:rgba(255,255,255,.07);
  --grn-dark:#8FC7A3;    /* positiv auf dunkel            */
  --red-dark:#E89A93;    /* negativ auf dunkel            */
  --acc-dark:#C9B4F5;    /* Provision/Abzug auf dunkel    */
}

/* --- 2. Grundlagen ------------------------------------------------------- */

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ color:var(--acc2); }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }

input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:3px;
  background:var(--track); outline:none; margin:0; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px;
  border-radius:50%; background:var(--acc2); border:3px solid #fff;
  box-shadow:0 2px 8px rgba(124,58,237,.4); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--acc2);
  border:3px solid #fff; cursor:pointer; }

img,svg{ display:block; max-width:100%; }
::selection{ background:var(--acc-soft); }
:focus-visible{ outline:2px solid var(--acc2); outline-offset:2px; border-radius:8px; }

/* --- 3. App-Schale ------------------------------------------------------- */

/* Der Inhalt bleibt eine Handy-Spalte und steht auf dem Schreibtisch mittig. */
.app{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  min-height:100svh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  position:relative;
}

/* Kopfbereich. Oben bleibt Platz fuer die echte Statusleiste des Geraets. */
.app-head{
  padding:18px;
  padding-top:calc(18px + env(safe-area-inset-top, 0px));
  display:flex;
  align-items:center;
  gap:11px;
  min-height:82px;
}
.app-head__mark{
  width:36px; height:36px; border-radius:11px; background:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--on-dark); font-size:12.5px; font-weight:800; letter-spacing:.01em;
}
.app-head__text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.app-head__row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.app-head__tools{ display:flex; align-items:center; gap:2px; margin-left:auto; flex-shrink:0; }

/* Der scrollende Screen-Bereich. Unten Luft fuer die schwebende Nav-Pille. */
.screen{
  flex:1 1 auto;
  padding:0 18px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.screen--nav{
  padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px));
}
.stack{ display:flex; flex-direction:column; gap:12px; }
.stack--tight{ gap:9px; }

/* --- 4. Typo-Stufen ------------------------------------------------------ */

.t-hero{  font-size:37px;   font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.t-sec{   font-size:23px;   font-weight:800; font-variant-numeric:tabular-nums; }
.t-title{ font-size:21px;   font-weight:700; letter-spacing:-.01em; }
.t-card{  font-size:13px;   font-weight:700; }
.t-list{  font-size:13.5px; font-weight:600; }
.t-val{   font-size:12px;   font-weight:700; font-variant-numeric:tabular-nums; }
.t-label{ font-size:12px;   font-weight:500; }
.t-mini{  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.t-micro{ font-size:9px;    font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
.t-foot{  font-size:10px;   font-weight:400; line-height:1.6; }

/* Betraege stehen immer fett und in gleich breiten Ziffern. */

/* --- 5. Bauteile --------------------------------------------------------- */

/* Karte (Standard) — kein Schatten, Trennung nur ueber den Haarrahmen. */
.card{
  background:var(--card);
  border-radius:20px;
  border:1px solid var(--hair);
  padding:15px 16px 13px;
  display:flex;
  flex-direction:column;
}
.card--flush{ padding:0; overflow:hidden; }         /* fuer randlose Listen */
.card__head{ display:flex; align-items:center; gap:8px; }
.card__head .card__spacer{ flex-grow:1; }

/* Hero-Karte (die dunkle oben) */
.hero{
  background:var(--ink);
  border-radius:24px;
  padding:20px 18px 16px;
  color:var(--on-dark);
  display:flex;
  flex-direction:column;
}
.hero .t-label,
.hero .t-foot{ color:var(--on-dark-mut); }

/* Kachelreihe in der Hero-Karte */
.hero-tiles{ display:flex; gap:8px; }
.hero-tile{
  flex:1; min-width:0;
  background:var(--on-dark-tile);
  border-radius:13px;
  padding:9px 8px;
}
.hero-tile__label{
  font-size:9px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--on-dark-mut); white-space:nowrap;
}
.hero-tile__value{
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--on-dark); white-space:nowrap;
}

/* Pille / Chip mit Rahmen */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card); border-radius:999px; padding:6px 10px;
  border:1px solid var(--hair2);
  font-size:12px; font-weight:600; color:var(--mut);
  white-space:nowrap;
}
.pill--acc{ background:var(--acc-soft); border-color:var(--acc-line); color:var(--acc); }
.pill--tap{ min-height:44px; }                       /* wenn die Pille klickbar ist */

/* Status-Chip (getoent, ohne Rahmen) */
.chip{
  display:inline-flex; align-items:center; gap:4px;
  border-radius:99px; padding:2px 6px;
  font-size:9.5px; font-weight:700; white-space:nowrap;
  background:var(--track); color:var(--mut);
}
.chip--grn{ background:var(--grn-soft); color:var(--grn); }
.chip--red{ background:var(--red-soft); color:var(--red); }
.chip--acc{ background:var(--acc-soft); color:var(--acc); }
.chip--mut{ background:var(--track);    color:var(--mut); }

/* Runder Icon-Knopf: 36px sichtbar, 44px Trefferflaeche.
   Der Klick-Handler sitzt an .tap, nicht am inneren Kreis. */
.tap{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:pointer;
  background:none; border:0; padding:0;
}
.icon-btn{
  width:36px; height:36px; border-radius:50%;
  background:var(--card); border:1px solid var(--hair2);
  display:flex; align-items:center; justify-content:center;
  color:var(--mut);
  pointer-events:none;                                /* Treffer bleibt bei .tap */
}
.tap[aria-pressed="true"] .icon-btn,
.icon-btn--on{
  background:var(--acc-soft); border-color:var(--acc-line); color:var(--acc);
}

/* Quell-Kachel (Plattform-Signet in Listen) */
.src{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#77747E; color:#FFFFFF;
  font-size:11px; font-weight:700;
}
.src--meta{     background:#3B5BA5; }
.src--telegram{ background:#4A9EC9; }
.src--tiktok{   background:#3F3D4D; }
.src--onlyfans{ background:#00AFF0; }
.src--sonst{    background:#77747E; }

/* Listenzeile in einer .card--flush */
.row{
  display:flex; align-items:center; gap:11px;
  min-height:58px; padding:11px 14px;
  border-bottom:1px solid var(--hair);
  text-align:left; width:100%;
}
.row:last-child{ border-bottom:0; }
.row--tap{ min-height:58px; cursor:pointer; }
.row__body{ display:flex; flex-direction:column; gap:2px; flex-grow:1; min-width:0; }
.row__title{
  font-size:13.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row__meta{ font-size:11px; font-weight:500; color:var(--mut); }
.row__end{ display:flex; flex-direction:column; gap:3px; align-items:flex-end; flex-shrink:0; }

/* Anteilsbalken (liegend, nur fuer Anteile — nie fuer Zeitreihen) */
.bar{ height:6px; border-radius:3px; background:var(--track); overflow:hidden; display:flex; }
.bar__fill{ height:100%; border-radius:3px; background:var(--acc2); }
.bar__fill--grn{ background:var(--grn); }
.bar__fill--red{ background:var(--red); }
.bar__fill--mut{ background:var(--mut); }

/* Fortschrittsbalken (Rücklagen-Deckung) */
.prog{ height:8px; border-radius:4px; background:var(--track); overflow:hidden; display:flex; }
.prog__fill{ height:100%; border-radius:4px; background:var(--acc2); }

/* Buttons */
.btn-primary{
  height:56px; border-radius:16px;
  background:var(--acc2); color:#fff;
  font-size:14px; font-weight:700;
  box-shadow:0 6px 16px rgba(124,58,237,.35);
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:0 16px;
}
.btn-primary:active{ transform:translateY(1px); }
.btn-primary[disabled]{ opacity:.45; box-shadow:none; cursor:not-allowed; }
.btn-secondary{
  height:48px; border-radius:14px;
  background:var(--card); border:1px solid var(--hair2);
  color:var(--ink); font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:0 16px;
}

/* Regler mit Beschriftung */
.range{ display:flex; flex-direction:column; gap:9px; }
.range__head{ display:flex; align-items:baseline; gap:8px; }
.range__head .card__spacer{ flex-grow:1; }
.range__input{ min-height:44px; display:flex; align-items:center; }
.range__scale{ display:flex; justify-content:space-between; font-size:10px; font-weight:400; color:var(--mut); }

/* Diagramm-Rahmen (das SVG kommt aus chart.js) */
.chart{ display:block; width:100%; }
.chart-labels{ display:flex; justify-content:space-between; margin-top:6px; }
.chart-labels span{ flex:1; text-align:center; font-size:9px; font-weight:500; color:var(--mut); }
.chart-labels span.is-current{ font-weight:700; color:var(--acc); }

/* Schwebende Navigationsleiste — das Erkennungszeichen */
.nav{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  z-index:40;
  width:315px;
  max-width:calc(100% - 36px);
  height:60px;
  background:var(--ink);
  border-radius:999px;
  padding:8px 10px;
  box-shadow:0 8px 24px rgba(27,27,34,.28);
  display:flex;
  align-items:center;
  justify-content:space-around;
}
.nav[hidden]{ display:none !important; }
.nav-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-height:44px; padding:4px 8px; cursor:pointer;
  color:var(--on-dark-off);
  font-size:9.5px; font-weight:600;
  background:none; border:0;
}
.nav-item.is-active{ color:var(--acc-lite); }
.nav-scan{
  width:52px; height:52px; border-radius:50%;
  background:var(--acc2);
  display:flex; align-items:center; justify-content:center;
  margin:-16px 2px;
  box-shadow:0 6px 16px rgba(124,58,237,.45);
  cursor:pointer; flex-shrink:0;
  color:#FFFFFF; border:0;
}
.nav-scan:active{ transform:translateY(1px); }

/* Von unten einfahrendes Blatt */
.sheet{
  background:var(--card);
  border-radius:24px 24px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -8px 24px rgba(27,27,34,.16);
}

/* --- 6. Helfer ----------------------------------------------------------- */

.spacer{ flex-grow:1; }
.hstack{ display:flex; align-items:center; gap:8px; }
.hstack--base{ align-items:baseline; }
.vstack{ display:flex; flex-direction:column; gap:8px; }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px; }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.wrap{ min-width:0; }
.nowrap{ white-space:nowrap; }
.right{ text-align:right; }
.hair-top{ border-top:1px solid var(--hair); }

.c-mut{ color:var(--mut); }
.c-grn{ color:var(--grn); }
.c-red{ color:var(--red); }
.c-acc{ color:var(--acc); }
.c-ink{ color:var(--ink); }
.on-dark{ color:var(--on-dark); }
.on-dark-mut{ color:var(--on-dark-mut); }
.c-grn-dark{ color:var(--grn-dark); }
.c-red-dark{ color:var(--red-dark); }
.c-acc-dark{ color:var(--acc-dark); }

/* Fehlende Fakten stehen in eckigen Klammern und in --acc. */
.placeholder{ color:var(--acc); font-weight:600; }

/* Hinweis „Schaetzung, kein Steuerbescheid" */
.note{ font-size:10px; font-weight:400; line-height:1.6; color:var(--mut); }

/* Verdeckte Betraege */
.masked{ letter-spacing:.06em; }

/* --- Schreibtisch: gleiche Spalte, nur mehr Luft ------------------------- */

@media (min-width:768px){
  .app{ min-height:auto; padding-bottom:24px; }
  .app-head{ padding-top:26px; }
  .chart{ min-height:150px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* --- Foto-Auftraege ------------------------------------------------------ */
/* Karte = Nummer, Status, Titel, Kurzinfo, Bildleiste, zwei Knoepfe.
   Info-Knopf (i) oeffnet den Dialog mit Galerie, allen Vorgaben und (Timo) Bearbeitung. */
.foto-einstieg{ margin-bottom:18px; min-height:64px; gap:5px; }
.foto-einstieg span{ font-size:13px; color:var(--mut); }
.foto-bereich{ display:grid; gap:14px; }
.foto-bereich p{ margin:0; line-height:1.55; }
.foto-intro{ font-size:13.5px; color:var(--mut); }
.foto-bereich summary{ cursor:pointer; min-height:44px; padding:10px 0; font-weight:700; }
.foto-bereich details.card{ display:block; }
.foto-bereich button:disabled,.foto-bereich label.foto-upload:has(input:disabled){ opacity:.6; cursor:wait; }
.foto-knopf{ height:44px; font-size:13px; padding:0 14px; width:auto; box-shadow:none; }
.foto-knopf.btn-primary{ box-shadow:0 4px 12px rgba(124,58,237,.25); }

/* Filterpillen mit Zaehler */
.foto-filter{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.foto-filter::-webkit-scrollbar{ display:none; }
.foto-filter .pill{ cursor:pointer; flex-shrink:0; min-height:38px; }
.foto-filter__zahl{ font-variant-numeric:tabular-nums; opacity:.75; }

/* Karte */
.foto-karte{ gap:10px; overflow-wrap:anywhere; }
.foto-karte__kopf{ display:flex; align-items:center; gap:6px; }
.foto-karte__titel{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.foto-karte__meta{ margin:0; }
.foto-karte__kurz{ font-size:13.5px; color:var(--ink); }
.foto-karte__rueck{ font-size:13px; background:var(--acc-soft); border-radius:12px; padding:9px 11px; }
.foto-karte__aktionen{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.foto-info{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--hair2); background:var(--card);
  color:var(--acc); font-family:Georgia, "Times New Roman", serif; font-style:italic; font-weight:700; font-size:17px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.foto-info:active{ transform:translateY(1px); }
.foto-tags{ display:flex; flex-wrap:wrap; gap:5px; }
.foto-tag{
  font-size:11px; font-weight:600; color:var(--mut); background:var(--bg);
  border:1px solid var(--hair); border-radius:999px; padding:3px 8px; white-space:nowrap;
}

/* Bildleiste (Vorschauen), seitlich scrollbar */
.foto-bilder{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px 0; }
.foto-bilder::-webkit-scrollbar{ display:none; }
.foto-bilder--leer{ background:var(--bg); border-radius:12px; padding:12px; }
.foto-bild{
  flex:0 0 auto; width:96px; height:120px; padding:0; border:0; border-radius:12px;
  overflow:hidden; background:var(--track); cursor:pointer;
}
.foto-bild img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Rueckmeldung auf der Karte */
.foto-rueck{ display:grid; gap:10px; padding-top:6px; border-top:1px solid var(--hair); }
.foto-rueck[hidden]{ display:none; }

/* Dialog */
.foto-dialog{
  width:min(100%, 560px); max-height:calc(100dvh - 24px); margin:auto; padding:18px 18px 22px;
  border:0; border-radius:22px; background:var(--card); color:var(--ink);
  box-shadow:0 18px 48px rgba(27,27,34,.28); overflow:auto; overscroll-behavior:contain;
}
.foto-dialog::backdrop{ background:rgba(27,27,34,.5); backdrop-filter:blur(2px); }
.foto-dialog__kopf{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.foto-dialog__titel{ margin:0 0 6px; font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.foto-dialog__zu{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--hair2); background:var(--card);
  color:var(--ink); font-size:20px; line-height:1; cursor:pointer; flex-shrink:0;
}
.foto-galerie{
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  margin:10px -18px 0; padding:0 18px; scrollbar-width:none;
}
.foto-galerie::-webkit-scrollbar{ display:none; }
.foto-galerie__bild{ flex:0 0 100%; scroll-snap-align:center; margin:0; position:relative; }
.foto-galerie__bild img{ width:100%; max-height:62vh; object-fit:contain; border-radius:14px; background:var(--bg); display:block; }
.foto-galerie__weg{
  position:absolute; right:8px; bottom:8px; height:34px; padding:0 12px; border-radius:999px;
  border:0; background:rgba(27,27,34,.72); color:#fff; font-size:12px; font-weight:600; cursor:pointer;
}
.foto-galerie__leer{ padding:14px 0; }
.foto-galerie__hinweis{ text-align:center; margin-top:6px; }
.foto-upload{ margin-top:12px; height:44px; cursor:pointer; }
.foto-vorgaben,.foto-eigenschaften{ display:grid; gap:10px; margin:14px 0 0; }
.foto-eigenschaften{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.foto-vorgaben dt,.foto-eigenschaften dt{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); }
.foto-vorgaben dd,.foto-eigenschaften dd{ margin:3px 0 0; white-space:pre-wrap; line-height:1.55; font-size:14px; }
.foto-dialog h3{ margin:16px 0 4px; }
.foto-links{ margin:4px 0 0; padding-left:18px; }
.foto-rueck-text{ background:var(--acc-soft); border-radius:12px; padding:9px 11px; }

/* Formulare */
.foto-form,.foto-feld{ display:grid; gap:8px; min-width:0; }
.foto-form{ gap:14px; }
.foto-feld{ font-size:13px; font-weight:600; }
.foto-feld--zeile{ grid-template-columns:auto 1fr; align-items:center; }
.foto-feld input,.foto-feld select,.foto-feld textarea{
  width:100%; min-height:44px; box-sizing:border-box; padding:10px 11px;
  border:1px solid var(--hair2); border-radius:12px; background:var(--card);
  color:var(--ink); font:inherit; font-size:15px; font-weight:400;
}
.foto-feld input[type="checkbox"]{ width:20px; height:20px; min-height:0; margin:0; }
.foto-feld textarea{ resize:vertical; }
.foto-feld :focus-visible,.foto-bereich summary:focus-visible,.foto-info:focus-visible,.foto-bild:focus-visible{
  outline:2px solid var(--acc2); outline-offset:3px;
}
.foto-spalten{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.foto-gruppe{ border:1px solid var(--hair); border-radius:14px; padding:14px 12px; margin:0; min-width:0; }
.foto-gruppe legend{ padding:0 6px; font-size:13px; font-weight:700; color:var(--acc); }
.foto-feld textarea[hidden]{ display:none; }
.foto-feld select{ min-width:0; text-overflow:ellipsis; }
.foto-kategorie{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.foto-videos{ display:grid; gap:12px; margin:12px 0; }
.foto-video{ border:1px solid var(--hair); border-radius:14px; padding:12px; display:grid; gap:10px; }
.foto-video__kopf{ display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:space-between; font-size:13px; overflow-wrap:anywhere; }
.foto-video video{ display:block; width:100%; max-height:60vh; border-radius:10px; background:#101014; }
.foto-video__download{ display:inline-flex; align-items:center; min-height:44px; color:var(--acc); font-size:13px; }
@media (max-width:420px){
  .foto-dialog{ padding:16px 12px; }
  .foto-galerie{ margin-inline:-12px; padding-inline:12px; }
  .foto-gruppe .foto-spalten{ grid-template-columns:1fr; }
  .foto-karte__kopf{ flex-wrap:wrap; }
}
.foto-profil{ border:1px solid var(--hair); border-radius:12px; padding:0 12px 12px; }
.foto-profil summary{ font-size:13px; }
.foto-vorlagen{ border:1px solid var(--hair); border-radius:12px; padding:12px; }
.foto-vorlagen label{ display:flex; align-items:center; gap:8px; min-height:44px; }
.foto-vorlagen input{ width:20px; height:20px; flex-shrink:0; }
.foto-meldung{ min-height:1.2em; }

/* Leitfaden (aus Markdown gebaut) */
.foto-regeln{ font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.foto-regeln h2{ font-size:17px; margin:8px 0 4px; }
.foto-regeln h3{ font-size:14px; margin:18px 0 4px; color:var(--acc); }
.foto-regeln p{ margin:6px 0; }
.foto-regeln ul,.foto-regeln ol{ padding-left:20px; margin:6px 0; }
.foto-regeln li{ margin:4px 0; }
.foto-tabelle{ overflow-x:auto; margin:8px 0; }
.foto-tabelle table{ border-collapse:collapse; width:100%; min-width:520px; font-size:12.5px; }
.foto-tabelle th,.foto-tabelle td{ border:1px solid var(--hair2); padding:6px 8px; text-align:left; vertical-align:top; }
.foto-tabelle th{ background:var(--bg); }

@media (min-width:768px){
  .foto-bild{ width:112px; height:140px; }
}
/* Wechsel zwischen bestehendem Dashboard und gemeinsamer Aufgabenseite. */
.bereiche{display:flex;gap:6px;padding:16px 20px 0;}
.bereiche a{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--mut);}
.bereiche a[aria-current]{background:var(--acc-soft);color:var(--acc);}
.bereiche a:hover{background:var(--acc-soft);}