/* Welten Firma | Familie, Start, Aufgabenliste (28.09.2026) */

/* Menü oben: Schalter + wenige Punkte */
.wm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.wm a, .wm button.wm-mehr { text-decoration: none; padding: 6px 10px; border-radius: 8px; color: var(--text); font: inherit; font-size: .95rem; }
.wm a:hover, .wm button.wm-mehr:hover { background: #eef2ff; }
.wm a.aktiv { background: #e0e7ff; font-weight: 600; }
.wm button.wm-mehr { background: transparent; border: 0; cursor: pointer; }
.wm-rechts { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.wm-rechts a { font-size: .85rem; color: var(--muted); }

.welt-schalter { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-right: 10px; }
.welt-schalter a { padding: 6px 12px !important; border-radius: 0 !important; font-weight: 600; color: var(--muted) !important; }
.welt-schalter a.an.firma { background: var(--firma-bg); color: var(--firma) !important; }
.welt-schalter a.an.familie { background: var(--familie-bg); color: var(--familie) !important; }
.welt-schalter.gross { display: flex; margin: 0 0 12px; }
.welt-schalter.gross a { flex: 1; text-align: center; padding: 10px !important; font-size: 1.05rem; text-decoration: none; }

/* Start */
.st { max-width: 2200px; margin: 0 auto; }
.st-kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.st-kopf h1 { font-size: 1.35rem; margin: 0 8px 0 0; }
.st-neu { display: flex; gap: 6px; flex: 1 1 380px; }
.st-neu input { flex: 1; font: inherit; font-size: 1rem; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border); }
.st-neu button { font: inherit; padding: 8px 14px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.st-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .st-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
@media (min-width: 1600px) { .st-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.st-spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; }
.st-box.wichtig { border: 2px solid #fcd34d; background: #fffdf5; }
.st-box h2 { font-size: 1rem; margin: 2px 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.st-box h3 { font-size: .85rem; margin: 10px 0 2px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.st-leer { color: var(--muted); font-style: italic; font-size: .9rem; padding: 4px 0; }
.st-mehr { font-size: .85rem; }

/* Zeilen */
.wl { list-style: none; margin: 0; padding: 0; }
.wz { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--border); }
.wz:first-child { border-top: 0; }
.wz.weg { opacity: .35; text-decoration: line-through; }
.wz-haken { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; cursor: pointer; padding: 0; }
.wz-haken:hover { border-color: #16a34a; background: #dcfce7; }
.wz-text { flex: 1; min-width: 0; text-decoration: none; color: var(--text); }
.wz-text:hover .wz-titel { text-decoration: underline; }
.wz-titel { display: block; font-size: .98rem; overflow-wrap: anywhere; }
.wz-info { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; align-items: baseline; }
.wz-marke { font-size: .75rem; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: var(--text-soft); white-space: nowrap; }
.wz-marke.gelb { background: #fef3c7; color: #92400e; }
.wz-marke.rot { background: #fee2e2; color: var(--danger); }
.wz-stand { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }

.pk { display: block; text-decoration: none; color: var(--text); padding: 8px 0; border-top: 1px solid var(--border); }
.pk:first-child { border-top: 0; }
.pk:hover .pk-titel { text-decoration: underline; }
.pk-titel { font-weight: 600; overflow-wrap: anywhere; }
.pk-balken { height: 5px; background: #e2e8f0; border-radius: 3px; margin: 4px 0; overflow: hidden; }
.pk-balken div { height: 100%; background: #16a34a; }

/* Aufgabenliste */
.al-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.al-filter a { text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); background: #fff; font-size: .9rem; }
.al-filter a.an { background: var(--accent); color: #fff; border-color: var(--accent); }
.al { max-width: 1100px; }

.st-fehler { color: var(--danger); margin: 6px 0; }

/* großer Schalter nur am Handy (dort fehlt das Menü oben) */
.st-handy-schalter { display: none !important; }
@media (max-width: 760px), (any-pointer: coarse) { .st-handy-schalter { display: flex !important; } }
/* großer Monitor: Fläche nutzen */
body:has(.st) main.wrap { max-width: 2400px; }
@media (max-width: 760px), (any-pointer: coarse) { header nav.wm { display: none; } }

/* Suche + erledigte Zeilen (28.09.2026 nachts) */
.al-suche { margin: 0 0 10px; }
.al-suche button { background: #475569; }
.wz.fertig .wz-titel { text-decoration: line-through; color: var(--muted); }
.wz-haken.fertig { display: inline-flex; align-items: center; justify-content: center; border-color: #86efac; background: #dcfce7; color: #166534; font-size: .8rem; cursor: default; }
.wm-suche { display: inline-flex; }
.wm-suche input { width: 170px; font: inherit; font-size: .9rem; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--border); }
.wm-suche input:focus { width: 260px; }
.st-handy-suche { display: none !important; }
@media (max-width: 760px), (any-pointer: coarse) { .st-handy-suche { display: flex !important; } }
.wm-suche { align-items: center; gap: 4px; }
.wm-lupe { cursor: pointer; font-size: .95rem; }

/* KI-Eingang auf Start (29.09.2026) */
.st-box.ki { border: 2px solid #c7d2fe; background: #f8faff; }
.ki-form { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.ki-form textarea { font: inherit; font-size: 1rem; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); resize: vertical; }
.ki-form button { align-self: flex-start; font: inherit; padding: 8px 14px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.ki-form button:disabled { opacity: .6; }
.ki-karte { border-top: 1px solid var(--border); padding: 8px 0; }
.ki-karte.gesehen { opacity: .6; }
.ki-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.ki-ok { font: inherit; font-size: .8rem; padding: 3px 9px; border-radius: 999px; border: 1px solid #86efac; background: #dcfce7; color: #166534; cursor: pointer; }
.ki-diktat { font-size: .85rem; color: var(--muted); margin: 3px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.ki-antwort { font-size: .92rem; margin: 3px 0; overflow-wrap: anywhere; }
.ki-tasks { margin: 4px 0 0; padding-left: 18px; font-size: .92rem; }
.ki-tasks li { margin: 2px 0; overflow-wrap: anywhere; }
.ki-frage { margin: 6px 0 4px; padding: 6px 9px; border-radius: 8px; background: #fef3c7; font-size: .92rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.ki-karte.fehler .ki-kopf { color: var(--danger); }
.st-neu { flex-wrap: wrap; }
.st-neu .st-neu-zweit { background: #e0e7ff; color: var(--accent); }

/* „☰ Mehr“ am Computer (30.09.2026): Das Blatt war nur in der Handy-Media-Query gestaltet –
   am großen Bildschirm öffnete sich nichts Sichtbares. Hier dasselbe Blatt als mittiges Fenster. */
@media (min-width: 761px) and (any-pointer: fine) {
  .mn-blatt { position: fixed; inset: 0; z-index: 940; background: rgba(15,23,42,.45);
              display: flex; align-items: center; justify-content: center; padding: 16px; }
  .mn-blatt-box { width: 100%; max-width: 820px; background: #fff; border-radius: 18px; padding: 1rem 1.2rem;
                  max-height: 86vh; overflow-y: auto; }
  .mn-blatt-kopf { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 700;
                   color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin: .8rem 0 .4rem; }
  .mn-blatt-kopf:first-child { margin-top: 0; }
  .mn-zu { border: 0; background: none; font-size: 1.5rem; color: #94a3b8; line-height: 1; cursor: pointer; }
  .mn-liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .mn-liste a { display: block; padding: .7rem .8rem; border-radius: 12px; background: #f8fafc; text-decoration: none;
                color: #334155; font-size: .92rem; overflow-wrap: anywhere; }
  .mn-liste a:hover { background: #eef2ff; }
  .mn-konto { grid-template-columns: 1fr 1fr; margin-top: .6rem; }
  .mn-konto a { background: #eef2ff; color: #4338ca; }
}

/* Einkaufsliste: wer hat es eingetragen / für wen ist es (Familienrat 29.09.2026) */
.ek-wer { display: inline-block; margin-top: 3px; font-size: .78rem; padding: 1px 8px; border-radius: 999px; background: #e0e7ff; color: #3730a3; font-weight: 600; }

/* Favoriten-Leiste auf Start (29.09.2026) */
.fav-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.fav-leiste a { text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 999px;
                padding: 6px 12px; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.fav-leiste a:hover { background: #eef2ff; }
.fav-leiste a.pin { background: #fffbeb; border-color: #fcd34d; }

/* ── Startbildschirm wie am Handy (03.10.2026) ─────────────────────────────── */
.hs { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.hs-welt { margin: 0; }
.hs-suche { display: flex; gap: 6px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 4px 4px 4px 12px; }
.hs-lupe { font-size: 1rem; cursor: text; }
.hs-suche input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 8px 4px; border: 0; background: none; outline: none; }
.hs-neu { flex: none; width: 44px; height: 40px; border: 0; border-radius: 11px; background: var(--accent); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.hs-staende { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-stand { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--border);
            text-decoration: none; color: var(--text); font-size: .8rem; }
.hs-stand b { font-size: .85rem; }
.hs-stand span { color: var(--muted); }
.hs-stand.rot { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.hs-stand.rot span { color: #b91c1c; }
.hs-gruppe h2 { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px 4px; }
.hs-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
@media (min-width: 640px) { .hs-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hs-platz { position: relative; }
.hs-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--text); }
.hs-bild { position: relative; width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
           font-size: 1.8rem; transition: transform .12s; }
.hs-icon:hover .hs-bild, .hs-icon:focus-visible .hs-bild { transform: scale(1.06); }
.hs-icon:focus-visible { outline: none; }
.hs-icon:focus-visible .hs-bild { box-shadow: 0 0 0 3px #93c5fd; }
.hs-name { font-size: .78rem; line-height: 1.2; text-align: center; overflow-wrap: break-word; hyphens: manual; max-width: 100%; }
.hs-bild.lila { background: #ede9fe; } .hs-bild.orange { background: #ffedd5; } .hs-bild.tuerkis { background: #ccfbf1; }
.hs-bild.gruen { background: #dcfce7; } .hs-bild.blau { background: #dbeafe; } .hs-bild.grau { background: #e2e8f0; } .hs-bild.gelb { background: #fef3c7; }
.hs-zahl { position: absolute; top: -5px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #64748b; color: #fff;
           font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; }
.hs-zahl.rot { background: #dc2626; }
.hs-stern { display: none; position: absolute; top: -6px; left: -2px; border: 0; background: #fff; border-radius: 50%; width: 28px; height: 28px;
            font-size: 1rem; line-height: 1; color: #94a3b8; cursor: pointer; box-shadow: 0 1px 4px rgba(15,23,42,.2); }
.hs-stern.an { color: #f59e0b; }
.hs.sterne .hs-stern { display: block; }
.hs-fuss { text-align: center; font-size: .85rem; color: var(--muted); margin: 4px 0 8px; }
.hs-sterne-knopf { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 6px; }
.hs-kind .hs-bild { width: 72px; height: 72px; font-size: 2.2rem; border-radius: 20px; }
.hs-kind .hs-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.hs-kind .hs-name { font-size: .9rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .hs-bild { transition: none; } }

/* Blätter „Neu anlegen“ / „Suchen“ */
.blatt-form { display: flex; flex-direction: column; gap: 8px; }
.blatt-form label { font-size: .85rem; color: var(--muted); }
.blatt-form input { font: inherit; font-size: 1.05rem; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); }
.blatt-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.blatt-knoepfe button { flex: 1 1 auto; font: inherit; padding: 10px 14px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.blatt-knoepfe button.zweit { background: #e0e7ff; color: #3730a3; }
.blatt-link { display: block; margin-top: 12px; color: var(--accent); text-decoration: none; font-size: .95rem; }
/* Welt-Schalter in der Kopfzeile neben „Organizer“ nur am Handy — am Computer steht er im Menü (03.10.2026) */
.kopf-welt { display: none; }
@media (max-width: 760px), (any-pointer: coarse) {
  header .wrap { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 8px; }
  header .logo { width: auto !important; flex: 0 1 auto; min-width: 0; }
  .kopf-welt { display: inline-flex; margin: 0; flex: none; width: auto !important; }
  .kopf-welt a { padding: 5px 9px !important; font-size: .85rem; text-decoration: none; }
  .st-handy-schalter { display: none !important; }
  /* Startbildschirm: Zahlen mit in der Kopfzeile, dafür nur das Logo-Bild */
  header:has(.kopf-zahlen) .logo-text { display: none; }
  header:has(.kopf-zahlen):has(.kopf-welt) .logo { display: none !important; }
  .kopf-welt a { padding: 5px 7px !important; font-size: .82rem; }
}
.kopf-zahlen { display: inline-flex; flex-wrap: nowrap; gap: 4px; flex: none; }
.kopf-zahlen .hs-stand { padding: 3px 7px; gap: 3px; }

/* „Heute abhaken" auf dem Startbildschirm (04.10.2026) */
.hs-abhaken { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px; }
.hs-abhaken h2 { display: flex; justify-content: space-between; align-items: baseline; font-size: .95rem; margin: 2px 0 4px; }
.hs-abhaken h2 a { font-size: .8rem; font-weight: 400; text-decoration: none; }
.hs-abhaken .wl { margin: 0; }
.hs-mehr { display: block; font-size: .8rem; margin-top: 4px; text-decoration: none; }