/***************************************************************************************************
 * App-Launcher-Kacheln fuer die Startseite (index.php) - "Kompass"-Layout + "Sticker, verfeinert" *
 * Icon-Set. Norbert Hohmann / 03.09.2026                                                          *
 *                                                                                                 *
 * Eigenstaendiges, index.php-exklusives Stylesheet (wie budget.css/todoliste.css) statt weiterer   *
 * Ausdehnung von includes/theme.css - .app-kachel/.app-gruppe/.app-grid kamen bisher nur hier vor. *
 *                                                                                                  *
 * Icon-SET-Architektur: nur die Piktogramme selbst (welches Symbol welche App zeigt) sind in PHP    *
 * fest (includes/appRegistry.inc.php's 'icon'-Feld), alles Farbliche/Stilistische steckt          *
 * ausschliesslich in den body[data-iconset="..."]-Bloecken unten. Ein rein farblich/stilistisch    *
 * anderes zukuenftiges Set ist dadurch ein rein additiver zweiter Block hier, OHNE jede PHP-        *
 * Aenderung. 'data-app' auf jeder Kachel ist eine reine Identitaets-ID (welche App), nie eine       *
 * Farbe - die IDs->Farben-Zuordnung lebt komplett hier.                                             *
 ***************************************************************************************************/

/* Derselbe Fallstrick wie an mehreren anderen Stellen dieses Projekts bereits real aufgetreten
   (Live-Spiele #vollbildBtn, dokumenteAnzeige.inc.php, einmal sogar ausgeliefert bei
   todoliste.css): [hidden] muss explizit gegen eine Layout-Klasse gleicher Spezifitaet gewinnen -
   .app-grid ist selbst display:grid, ohne diese Regel wuerden alle 5 Hub-Raster gleichzeitig
   sichtbar bleiben. */
[hidden] { display: none !important; }

.favoriten-titel {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted-custom);
	margin-bottom: 0.6rem;
	padding-left: 0.15rem;
}
.favoriten-reihe {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-bottom: 1.4rem;
}
.fav-kachel {
	text-decoration: none;
	display: block;
}

.hub-tabs {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.75rem;
}
.hub-tab {
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--card-bg);
	color: var(--text-link);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hub-tab:hover { border-color: var(--accent); }
.hub-tab.aktiv { background: var(--accent); color: #fff; border-color: transparent; }

.app-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 0.65rem;
}
.app-kachel {
	display: flex;
	flex-direction: column;
	/* align-items:stretch (nicht center) ist Absicht, siehe CLAUDE.md-Trap: nur so bekommt das
	   Label-Flex-Item eine an die Kachelbreite gebundene Breite, gegen die overflow-wrap:break-word
	   ueberhaupt umbrechen kann - mit "center" blaeht sich ein langes Label (z.B. "Mensch ärgere
	   dich nicht (live)") auf seine Max-Content-Breite auf und laeuft ueber die Nachbarkachel.
	   Zentriert wird stattdessen ueber text-align. */
	align-items: stretch;
	justify-content: center;
	gap: 0.5rem;
	min-width: 0;
	min-height: 100px;
	padding: 0.8rem 0.5rem;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 14px;
	color: var(--text-link);
	text-decoration: none;
	text-align: center;
	font-size: 0.78rem;
	line-height: 1.2;
	overflow-wrap: break-word;
	hyphens: auto;
	transition: border-color 0.15s ease, transform 0.1s ease;
}
.app-kachel:hover, .app-kachel:focus-visible { border-color: var(--accent); }
.app-kachel:active { transform: scale(0.96); }
.app-kachel__label { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
/* "Private Chats" ist die einzige Kachel, die als <button> statt <a> gerendert wird (siehe
   index.php, Schnellwahl per langem Druck, 24.09.2026) - Browser bringen fuer <button> eigene
   Schriftart/Cursor-Vorgaben mit, die .app-kachel oben nicht ueberschreibt (war bisher nie noetig,
   alle Kacheln waren <a>). Ohne das saehe genau diese eine Kachel unpassend aus. */
button.app-kachel { font: inherit; cursor: pointer; }

/* Badge-Grundgeometrie (setgueltig fuer jedes Icon-Set, nicht nur "Sticker, verfeinert") */
.app-kachel__badge, .fav-kachel__badge {
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}
.fav-kachel__badge { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
.app-kachel__badge svg, .fav-kachel__badge svg {
	width: 70%; height: 70%; position: relative; z-index: 1; color: #fff;
}

/* ================================================================================================
 * Icon-Set "Sticker, verfeinert" (Stand 03.09.2026, einziges bisher existierendes Set)
 * ================================================================================================ */

body[data-iconset="sticker_verfeinert"] .app-kachel__badge,
body[data-iconset="sticker_verfeinert"] .fav-kachel__badge {
	background: linear-gradient(135deg, var(--c1, #6b7280), var(--c2, #8b93a3));
	box-shadow: 0 10px 20px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
body[data-iconset="sticker_verfeinert"] .app-kachel__badge::before,
body[data-iconset="sticker_verfeinert"] .fav-kachel__badge::before {
	content: '';
	position: absolute; top: -35%; left: -15%; width: 75%; height: 75%; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.6), transparent 70%);
}
body[data-iconset="sticker_verfeinert"] .app-kachel:nth-child(odd) .app-kachel__badge,
body[data-iconset="sticker_verfeinert"] .fav-kachel:nth-child(odd) .fav-kachel__badge { transform: rotate(-3deg); }
body[data-iconset="sticker_verfeinert"] .app-kachel:nth-child(even) .app-kachel__badge,
body[data-iconset="sticker_verfeinert"] .fav-kachel:nth-child(even) .fav-kachel__badge { transform: rotate(3deg); }

/* Je-App feste Farb-Identitaet (gedaempft/entsaettigt, siehe CLAUDE.md) - dieselbe App traegt
   ueberall auf der Seite (Favoriten-Reihe wie Haupt-Raster) dieselbe Farbe. */
body[data-iconset="sticker_verfeinert"] [data-app="merken"]             { --c1:#7d63a8; --c2:#9c85c2; }
body[data-iconset="sticker_verfeinert"] [data-app="alben"]              { --c1:#b3688b; --c2:#d28aac; }
body[data-iconset="sticker_verfeinert"] [data-app="dokumente"]          { --c1:#6080a6; --c2:#849fbd; }
body[data-iconset="sticker_verfeinert"] [data-app="sync"]               { --c1:#4f8f8a; --c2:#74b3ad; }
body[data-iconset="sticker_verfeinert"] [data-app="todo"]               { --c1:#3e9265; --c2:#63b684; }
body[data-iconset="sticker_verfeinert"] [data-app="termine"]            { --c1:#c0784a; --c2:#d59d74; }
body[data-iconset="sticker_verfeinert"] [data-app="notizen"]            { --c1:#a28c41; --c2:#bbab78; }
body[data-iconset="sticker_verfeinert"] [data-app="diagramme"]          { --c1:#5b7fa6; --c2:#82a3c4; }
body[data-iconset="sticker_verfeinert"] [data-app="bilder"]            { --c1:#9468b5; --c2:#b58fd0; }
body[data-iconset="sticker_verfeinert"] [data-app="start_tag"]          { --c1:#c96b52; --c2:#e39478; }
body[data-iconset="sticker_verfeinert"] [data-app="kichat"]             { --c1:#7294c9; --c2:#87a7de; }
body[data-iconset="sticker_verfeinert"] [data-app="chat_privat"]        { --c1:#419ca2; --c2:#6eb4b8; }
body[data-iconset="sticker_verfeinert"] [data-app="chat_oeffentlich"]   { --c1:#4e9d65; --c2:#7bb68c; }
body[data-iconset="sticker_verfeinert"] [data-app="schach"]             { --c1:#8377c6; --c2:#ab9bde; }
body[data-iconset="sticker_verfeinert"] [data-app="dame"]               { --c1:#3596ab; --c2:#5bb3c1; }
body[data-iconset="sticker_verfeinert"] [data-app="backgammon"]         { --c1:#339483; --c2:#44afa0; }
body[data-iconset="sticker_verfeinert"] [data-app="muehle"]             { --c1:#c59245; --c2:#d4a963; }
body[data-iconset="sticker_verfeinert"] [data-app="viergewinnt"]        { --c1:#bf7d5f; --c2:#d9a189; }
body[data-iconset="sticker_verfeinert"] [data-app="ludo"]               { --c1:#9f6db5; --c2:#c7a8d6; }
body[data-iconset="sticker_verfeinert"] [data-app="abalone"]            { --c1:#bc668f; --c2:#db90b6; }
body[data-iconset="sticker_verfeinert"] [data-app="go"]                 { --c1:#6c8a4f; --c2:#97b57a; }
body[data-iconset="sticker_verfeinert"] [data-app="maumau"]             { --c1:#1f8a5b; --c2:#63c596; }
body[data-iconset="sticker_verfeinert"] [data-app="farbenrausch"]       { --c1:#c8452f; --c2:#f0a03c; }
body[data-iconset="sticker_verfeinert"] [data-app="spite"]              { --c1:#6b4fa0; --c2:#d9a21b; }
body[data-iconset="sticker_verfeinert"] [data-app="zahlensteine"]       { --c1:#2d6fb3; --c2:#e58a00; }
body[data-iconset="sticker_verfeinert"] [data-app="schafkopf"]          { --c1:#1c6fc4; --c2:#7a4a1e; }
body[data-iconset="sticker_verfeinert"] [data-app="prism_pop"]          { --c1:#b05a86; --c2:#d07fa8; }
body[data-iconset="sticker_verfeinert"] [data-app="tetris"]             { --c1:#2f9bc9; --c2:#5cbcdf; }
body[data-iconset="sticker_verfeinert"] [data-app="spiel2048"]          { --c1:#c98a4a; --c2:#e0ac72; }
body[data-iconset="sticker_verfeinert"] [data-app="sudoku"]             { --c1:#3f9e78; --c2:#5cbf98; }
body[data-iconset="sticker_verfeinert"] [data-app="solitaer"]           { --c1:#1f7a4d; --c2:#3aa76d; }
body[data-iconset="sticker_verfeinert"] [data-app="minigolf"]           { --c1:#5f9d32; --c2:#8fc45a; }
body[data-iconset="sticker_verfeinert"] [data-app="mathe"]              { --c1:#6b7eb8; --c2:#8d9ed0; }
body[data-iconset="sticker_verfeinert"] [data-app="lesen"]              { --c1:#a46542; --c2:#be9174; }
body[data-iconset="sticker_verfeinert"] [data-app="deutschuebung"]      { --c1:#6d8d4a; --c2:#91a876; }
body[data-iconset="sticker_verfeinert"] [data-app="quiz"]               { --c1:#ba738f; --c2:#d49ab0; }
body[data-iconset="sticker_verfeinert"] [data-app="pdf_werkzeuge"]      { --c1:#637b94; --c2:#8c9fb2; }
body[data-iconset="sticker_verfeinert"] [data-app="mehr"]               { --c1:#7e838c; --c2:#a0a4ad; }
body[data-iconset="sticker_verfeinert"] [data-app="dein_bereich"]       { --c1:#7294c9; --c2:#87a7de; }
body[data-iconset="sticker_verfeinert"] [data-app="budget"]             { --c1:#bd9c3c; --c2:#d5be77; }
body[data-iconset="sticker_verfeinert"] [data-app="rezeptsammlung"]     { --c1:#ac6944; --c2:#c39478; }
body[data-iconset="sticker_verfeinert"] [data-app="admin_bereich"]      { --c1:#8d4b56; --c2:#ab7781; }

/* ================================================================================================
 * Icon-Set "Klassisch" (03.09.2026, US_USER_ICONSET) - die alten Foto-PNGs (/app-icons/*.png) und
 * rohen Emoji von vor dem Kompass-Umbau, admin-seitig pro Benutzer waehlbar (admin/modifyUser.php).
 * Keine Verlaufs-Badge/kein Glanzlicht/keine Dreh-Geometrie - genau die schlichte Optik, die vor
 * dem 03.09.2026-Umbau bestand. Piktogramm-Auswahl kommt aus appRegistry.inc.php's legacyImg/
 * legacyEmoji-Feldern (appKachelBadgeHtml()), nicht aus dieser Datei - hier steht nur die Optik.
 * ================================================================================================ */

body[data-iconset="klassisch"] .app-kachel__badge,
body[data-iconset="klassisch"] .fav-kachel__badge {
	background: none;
	box-shadow: none;
	border-radius: 12px;
	transform: none !important;
}
body[data-iconset="klassisch"] .app-kachel__badge::before,
body[data-iconset="klassisch"] .fav-kachel__badge::before {
	content: none;
}
body[data-iconset="klassisch"] .app-kachel__badge img,
body[data-iconset="klassisch"] .fav-kachel__badge img {
	width: 82%;
	height: 82%;
	object-fit: contain;
}
body[data-iconset="klassisch"] .app-kachel__badge .app-kachel__emoji {
	font-size: 1.9rem;
	line-height: 1;
}
body[data-iconset="klassisch"] .fav-kachel__badge .app-kachel__emoji {
	font-size: 1.5rem;
	line-height: 1;
}

/* ================================================================================================
 * Wetter-Kachel (Startseite, nur eingeloggte Nicht-GAST-Benutzer, 03.09.2026 - am 04.09.2026 ans
 * Seitenende verschoben und per <details>/<summary> aufklappbar gemacht) - eigenstaendiger Block,
 * NICHT ueber appKachelBadgeHtml()/[data-app] geroutet: reine Info-Anzeige, kein Link, kein Eintrag
 * in appRegistry.inc.php. Zeigt dieselben 7 SVG-Symbole unabhaengig vom gewaehlten
 * body[data-iconset] (sticker_verfeinert/klassisch), da es dafuer kein "altes" Foto-/Emoji-
 * Aequivalent gibt - deshalb ein fest verdrahteter Verlauf statt einer [data-app]-Farbvariable.
 *
 * .wetter-kachel ist jetzt entweder ein <details> (Normalfall, mit Detailbereich) oder ein
 * schlichtes <div> (kein frischer Messwert - siehe wetter-kachel__info--fehler) - deshalb traegt
 * NUR die Zusammenfassungszeile die frueher direkt auf .wetter-kachel sitzende Flex-/Padding-
 * Deklaration, .wetter-kachel selbst liefert nur noch Rahmen/Hintergrund.
 * ================================================================================================ */
.wetter-kachel {
	/* .app-grid selbst traegt keinen margin-bottom (die Hub-Raster sind das letzte Element vor
	   dieser Kachel) - ohne eigenen margin-top klebte die Kachel direkt an den App-Icons.
	   04.09.2026 auf direkten Hinweis ergaenzt, gleiche Groessenordnung wie .hub-tabs/
	   .favoriten-reihe's margin-bottom (1.25rem/1.4rem) fuer denselben Abstands-Rhythmus. */
	margin-top: 1.25rem;
	margin-bottom: 1.4rem;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 14px;
}
.wetter-kachel__zusammenfassung {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
	list-style: none; /* Firefox-Dreieck */
}
.wetter-kachel__zusammenfassung::-webkit-details-marker { display: none; } /* Chrome/Safari-Dreieck */
.wetter-kachel__badge {
	width: 2.8rem;
	height: 2.8rem;
	flex-shrink: 0;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #4a7fb5, #6fa3d8);
	box-shadow: 0 8px 16px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.wetter-kachel__badge svg { width: 65%; height: 65%; color: #fff; }
.wetter-kachel__info { min-width: 0; flex: 1 1 auto; }
.wetter-kachel__zeile1 { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 700; }
.wetter-kachel__ort { font-size: 0.85rem; color: var(--text-link); }
.wetter-kachel__temp { font-size: 1.15rem; }
.wetter-kachel__zeile2 { font-size: 0.75rem; color: var(--text-muted-custom); margin-top: 0.15rem; }
.wetter-kachel__info--fehler { color: var(--text-muted-custom); font-size: 0.82rem; padding: 0.75rem 1rem; }
.wetter-kachel__pfeil {
	width: 1.1rem;
	height: 1.1rem;
	flex-shrink: 0;
	margin-left: auto;
	color: var(--text-muted-custom);
	transition: transform 0.2s;
}
.wetter-kachel[open] .wetter-kachel__pfeil { transform: rotate(180deg); }
.wetter-kachel__details {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 0.55rem 1.2rem;
	padding: 0.75rem 1rem 0.9rem;
	border-top: 1px solid var(--border);
}
.wetter-kachel__detail { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; color: var(--text-muted-custom); }
.wetter-kachel__detail strong { color: var(--text-main); font-weight: 600; }
.wetter-kachel__stand { grid-column: 1 / -1; font-size: 0.7rem; color: var(--text-muted-custom); opacity: 0.75; margin-top: 0.25rem; }

/* 24h-Vorhersage (04.09.2026) - eine zeitliche Abfolge, deshalb flex+overflow-x statt des
   Label/Wert-Grids von .wetter-kachel__details. Eigener Block statt Teil des Grids, da die
   Slots visuell etwas anderes sind (kleine Zeit-Karten, kein Label/Wert-Paar). */
.wetter-kachel__vorhersage {
	padding: 0.6rem 1rem 0.9rem;
	border-top: 1px solid var(--border);
}
.wetter-kachel__vorhersage-titel {
	font-size: 0.72rem;
	color: var(--text-muted-custom);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.5rem;
}
.wetter-kachel__vorhersage-liste {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.15rem; /* Platz fuer eine evtl. sichtbare Scrollleiste */
}
.wetter-kachel__vorhersage-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	flex-shrink: 0;
	min-width: 2.8rem;
	font-size: 0.72rem;
	color: var(--text-muted-custom);
}
.wetter-kachel__vorhersage-icon { width: 1.4rem; height: 1.4rem; color: var(--text-main); }
.wetter-kachel__vorhersage-temp { font-size: 0.85rem; font-weight: 600; color: var(--text-main); }

/* Schnellzugriff-FAB-Leiste (Merkzettel 05.09.2026, Budget-Ausgabe 05.09.2026 dazu) -
   eigenstaendige Elemente wie die Wetterkachel: NICHT ueber appKachelBadgeHtml()/[data-app]
   geroutet, kein Eintrag in appRegistry.inc.php, fest verdrahtete Gradients statt Icon-Set-
   Variablen. position:fixed war mit dem Merkzettel-FAB die erste ihrer Art im Projekt
   (naechstliegendes Vorbild: chat/chat.css's .freigabe) - kein padding-bottom-Reserveplatz am
   Container noetig, die kleinen runden Buttons unten rechts ueberlappen bewusst, wie gaengige
   Material-Design-FABs. Ein gemeinsamer Flex-Container (statt je Button ein eigenes
   position:fixed) haelt "gleich gross, direkt daneben" korrekt, egal ob einer, beide oder keiner
   der beiden Buttons fuer den jeweiligen Betrachter sichtbar ist (unabhaengige Gates: canBudget
   rollenbasiert, hatMerken kontingentbasiert) - der Budget-Button steht bewusst als erstes Kind
   (links), der Merkzettel-Button bleibt als letztes Kind am aeusseren rechten Rand, exakt seine
   bisherige Position. touch-action/-webkit-touch-callout/user-select unterdruecken auf dem
   Budget-Button den nativen Long-Press-Callout/die Textauswahl, die sonst den Long-Press-Umschalter
   (siehe Skript in index.php) stoeren wuerden. */
.quick-fab-leiste {
	position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 30;
	display: flex; align-items: center; gap: 0.7rem;
}
.quick-fab {
	width: 3.4rem; height: 3.4rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 18px -4px rgba(0,0,0,.4);
	color: #fff; text-decoration: none; border: none; cursor: pointer;
	touch-action: manipulation; -webkit-touch-callout: none; user-select: none;
}
.quick-fab svg { width: 55%; height: 55%; }
.merken-fab { background: linear-gradient(135deg, #4a7fb5, #6fa3d8); }
.budget-fab { background: linear-gradient(135deg, #bd9c3c, #d5be77); }
@media (max-width: 480px) {
	.quick-fab-leiste { right: 1rem; bottom: 1rem; gap: 0.6rem; }
}
.wetter-kachel__vorhersage-regen { color: var(--text-link); }
.wetter-kachel__vorhersage-wind { color: var(--text-muted-custom); font-size: 0.68rem; }
.wetter-kachel__vorhersage-leer { visibility: hidden; }

/* --- Schnellwahl "Private Chats" per langem Druck (24.09.2026, index.php) --------------------
   Erstes <dialog> im Projekt - siehe .claude/notes/app-shell-notes.md fuer die Begruendung
   (bisher kein Modal-/Overlay-Muster vorhanden; nativer Backdrop/ESC/Fokus spart eigenen Code).
   "Soft & rund"-Optik mit denselben Farbtoken wie die uebrigen Kacheln dieser Datei. */
dialog.schnellwahl {
	border: none;
	border-radius: 20px;
	padding: 1.3rem 1.4rem;
	max-width: min(90vw, 26rem);
	width: 100%;
	background: var(--card-bg);
	color: var(--text-main);
	box-shadow: 0 20px 45px -20px rgba(0,0,0,.5);
}
dialog.schnellwahl::backdrop { background: rgba(0,0,0,.5); }
.schnellwahl__kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.schnellwahl__kopf h2 { margin: 0; font-size: 1.05rem; color: var(--text-link); }
.schnellwahl-schliessen {
	border: none; background: none; cursor: pointer; color: var(--text-muted-custom);
	font-size: 1.3rem; line-height: 1; padding: .1rem .4rem;
}
.schnellwahl-schliessen:hover { color: var(--text-main); }
.schnellwahl__liste { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; max-height: 45vh; overflow-y: auto; }
.schnellwahl__liste a {
	display: block; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--border);
	color: var(--text-main); text-decoration: none; overflow-wrap: break-word;
}
.schnellwahl__liste a:hover { border-color: var(--accent); }
.schnellwahl__leer { color: var(--text-muted-custom); font-size: .88rem; margin: 0 0 1rem; }
.schnellwahl__hinweis { color: var(--text-muted-custom); font-size: .85rem; margin: 0; }
.schnellwahl__form { display: flex; gap: .5rem; flex-wrap: wrap; }
.schnellwahl__form input {
	flex: 1 1 10rem; min-width: 0; padding: .6rem .75rem; border-radius: 12px;
	border: 1.5px solid var(--border); background: var(--input-bg); color: var(--text-main); font: inherit;
}
.schnellwahl__form input:focus { outline: none; border-color: var(--accent); }
.schnellwahl__form button {
	flex: none; border: none; border-radius: 999px; padding: .6rem 1.1rem; cursor: pointer;
	background: var(--accent); color: #fff; font-weight: 600; font: inherit;
}

/* Zeile "Gerade online" auf der Startseite (includes/online.inc.php, gefuellt von online.js). */
.online-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.online-leiste__titel {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.online-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.online-liste__person {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 999px;
}

.online-liste__person::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #2e9d57;
}

.online-liste__leer {
  opacity: 0.7;
}

/* ================================================================================================
 * Spiele als "Mein Spielabend" (24.10.2026, includes/spieleHub.inc.php)
 * Handy: alles untereinander. Ab 820px: links Weiterspielen + Neue Partie, rechts Einladung +
 * Gerade online. Die Spiel-Links tragen class="app-kachel" nur fuer includes/online.js (Blinken bei
 * einer Einladung) - ihr Aussehen setzt .spielhub__chip ganz neu.
 * ================================================================================================ */
.app-grid.spiele-hub { display: block; }
/* Reihenfolge am Handy: Weiterspielen, Einladung + online, Neue Partie. Am PC steht die Seite rechts
   neben beiden Abschnitten. */
.spielhub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.spielhub__seite { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.spielhub__weiter { order: 0; }
.spielhub__seite { order: 1; }
.spielhub__neu { order: 2; }
@media (min-width: 820px) {
	.spielhub--mit-seite { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 1.6rem; }
	.spielhub--mit-seite .spielhub__weiter, .spielhub--mit-seite .spielhub__neu { grid-column: 1; }
	.spielhub--mit-seite .spielhub__seite { grid-column: 2; grid-row: 1 / span 2; }
	/* Zwei Karten nebeneinander sind schmal: der Status rutscht unter den Namen. */
	.spielhub .spielhub-partie { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.45rem; }
	.spielhub .spielhub-partie .fav-kachel__badge { grid-row: span 2; }
	.spielhub .spielhub-partie__status { grid-column: 2; justify-self: start; }
}
.spielhub__abschnitt { display: flex; flex-direction: column; gap: 0.6rem; }
.spielhub__titel { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-strong); }

.spielhub__partien { display: grid; gap: 0.6rem; }
@media (min-width: 820px) { .spielhub__partien { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spielhub-partie {
	display: flex; align-items: center; gap: 0.75rem; min-width: 0;
	padding: 0.8rem; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--border);
	color: var(--text-main); text-decoration: none;
}
.spielhub-partie:hover, .spielhub-partie:focus-visible { border-color: var(--accent); color: var(--text-main); }
.spielhub-partie.ist-dran { border: 2px solid var(--accent); }
.spielhub-partie__text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.spielhub-partie__name { font-weight: 700; font-size: 0.95rem; }
.spielhub-partie__mit { font-size: 0.8rem; color: var(--text-muted-custom); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spielhub-partie__status {
	flex: 0 0 auto; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
	background: var(--hover-bg); color: var(--text-muted-custom); white-space: nowrap;
}
.spielhub-partie.ist-dran .spielhub-partie__status { background: var(--accent); color: #fff; font-weight: 700; }

.spielhub__gruppen { display: flex; flex-direction: column; gap: 0.8rem; }
.spielhub__gruppe { display: flex; flex-direction: column; gap: 0.4rem; }
.spielhub__gruppentitel { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.spielhub__gruppe[data-gruppe="brett"] .spielhub__gruppentitel { color: #2d6a3e; }
.spielhub__gruppe[data-gruppe="karten"] .spielhub__gruppentitel { color: #8a2e22; }
.spielhub__gruppe[data-gruppe="allein"] .spielhub__gruppentitel { color: #24508f; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .spielhub__gruppe[data-gruppe="brett"] .spielhub__gruppentitel { color: #8fd0a1; }
	:root:not([data-theme="light"]) .spielhub__gruppe[data-gruppe="karten"] .spielhub__gruppentitel { color: #f0a497; }
	:root:not([data-theme="light"]) .spielhub__gruppe[data-gruppe="allein"] .spielhub__gruppentitel { color: #9cc0f2; }
}
:root[data-theme="dark"] .spielhub__gruppe[data-gruppe="brett"] .spielhub__gruppentitel { color: #8fd0a1; }
:root[data-theme="dark"] .spielhub__gruppe[data-gruppe="karten"] .spielhub__gruppentitel { color: #f0a497; }
:root[data-theme="dark"] .spielhub__gruppe[data-gruppe="allein"] .spielhub__gruppentitel { color: #9cc0f2; }
.spielhub__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.spiele-hub .spielhub__chip, .spielhub-dialog .spielhub__chip {
	display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.35rem 0.85rem;
	border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border);
	color: var(--text-main); font-size: 0.9rem; line-height: 1.2; text-decoration: none; text-align: left;
}
.spiele-hub .spielhub__chip { flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.45rem; padding-left: 0.35rem; }
.spiele-hub .spielhub__chip-bild { width: 1.75rem; height: 1.75rem; border-radius: 9px; }
.spiele-hub .spielhub__chip-bild img, .spiele-hub .spielhub__chip-bild .app-kachel__emoji { width: 100%; height: 100%; object-fit: cover; font-size: 1.05rem; line-height: 1.75rem; text-align: center; }
.spielhub-leer {
	margin: 0; padding: 0.9rem; border-radius: 16px; border: 1px dashed var(--border);
	color: var(--text-muted-custom); font-size: 0.9rem;
}
.spielhub-leer--klein { padding: 0; border: 0; font-size: 0.85rem; }
.spiele-hub .spielhub__chip:hover, .spiele-hub .spielhub__chip:focus-visible,
.spielhub-dialog .spielhub__chip:hover { border-color: var(--accent); color: var(--text-main); }

.spielhub-einladung {
	display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem; border-radius: 16px;
	background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--text-main);
}
.spielhub-einladung__kopf { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn-text); }
.spielhub-einladung__text { margin: 0; font-size: 0.95rem; }
.spielhub-einladung__knoepfe { display: flex; gap: 0.5rem; }
.spielhub-knopf {
	flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem;
	padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg);
	color: var(--text-main); font: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.spielhub-knopf--haupt { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.spielhub-knopf--haupt:hover { color: #fff; filter: brightness(1.08); }
.spielhub-knopf--klein { flex: 0 0 auto; min-height: 2.2rem; font-size: 0.82rem; color: var(--text-link); }

.spielhub-online { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--border); }
.spielhub-online .spielhub__titel { font-size: 0.95rem; margin-bottom: 0.2rem; }
.spielhub-online__person { display: flex; align-items: center; gap: 0.6rem; }
.spielhub-online__bild {
	position: relative; width: 2.2rem; height: 2.2rem; flex: 0 0 2.2rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-weight: 700;
	background: var(--tag-bg); color: var(--tag-text);
}
.spielhub-online__bild::after {
	content: ""; position: absolute; right: -1px; bottom: -1px; width: 0.7rem; height: 0.7rem; border-radius: 50%;
	background: var(--positive); border: 2px solid var(--card-bg);
}
.spielhub-online__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spielhub-dialog .schnellwahl__hinweis { margin: 0 0 0.8rem; }