/*
  bento-kern.css — Aussehen des gemeinsamen Bento-Kerns (Verhalten: bento-kern.js, -zug.js, -kontext.js, -menue.js).

  Kurzbeschreibung (für Laien): Ralph, 24.10.2026 — „einmal bauen, beide bekommen es". Leiste oben (Logo, Bereichs-Pillen,
  Seiten-Pille mit ×, Suche, runde Knöpfe), das Kachel-Raster (6/4/3 Spalten, am Handy 2), die Kacheln selbst (Karte mit
  großer Rundung, Farbverlauf ins Helle, Größen-Ecke beim Überfahren, Anheben beim Ziehen), die Menü-Karte, die Meldung
  unten rechts und der Übergang beim Öffnen. Hier steht bewusst KEINE Farbe: jede Seite bildet die Variablen --bt-* auf
  ihre Markenwerte ab (im Workspace: workspace-bento-kern-start.css). Dunkelmodus kommt über die Klasse bt-dunkel am <html>,
  die der Kern setzt — die Seite liefert dafür die dunklen Werte.
  marke-ausnahme: Bento-Ansicht (Ralph 23./24.10.2026) — große Rundungen (22/14 px) und Kachelhöhe 168 px sind dort festgelegt
*/

.bt-top, .bt-start-flaeche { display: none; }
:root.bt-an .bt-top { display: flex; align-items: center; gap: 6px; flex: none; min-height: 76px; padding: 16px 20px; box-sizing: border-box;
  background: var(--bt-grund); position: relative; z-index: 60; font-family: var(--bt-schrift); }
:root.bt-an.bt-start .bt-start-flaeche { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; padding: 0 20px 20px; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; }
:root.bt-an body { background: var(--bt-grund); }

/* ── Leiste ── */
.bt-logo { display: flex; align-items: center; border: 0; background: none; padding: 0; margin-right: 14px; cursor: pointer; border-radius: 9px; color: var(--bt-text); }
.bt-logo img { height: 28px; width: auto; display: block; }
.bt-abschnitte { display: flex; gap: 2px; min-width: 0; overflow: hidden; align-items: center; padding: 3px; margin: -3px; }
.bt-ab { border: 0; background: transparent; border-radius: 999px; padding: 9px 14px; font: 600 13px var(--bt-schrift); color: var(--bt-leise);
  cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; touch-action: manipulation; }
.bt-ab:hover { background: var(--bt-feld); color: var(--bt-text); }
.bt-ab.an { background: var(--bt-dunkel); color: var(--bt-auf-dunkel); }
.bt-ab.zieht { opacity: .6; }
.bt-ab.ziel { background: var(--bt-dunkel); color: var(--bt-auf-dunkel); box-shadow: 0 0 0 4px var(--bt-feld), 0 0 0 2px var(--bt-dunkel); }
.bt-ab-neu { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--bt-leise); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bt-ab-neu:hover { background: var(--bt-karte); color: var(--bt-text); }
.bt-ab-neu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bt-seite-pille { background: var(--bt-karte); color: var(--bt-text); cursor: default; display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; animation: btPop .32s cubic-bezier(.2, .8, .2, 1.2) both; }
.bt-seite-pille:hover { background: var(--bt-karte); }
.bt-seite-zu { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--bt-weich); color: var(--bt-leise); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.bt-seite-zu:hover { background: var(--bt-feld); color: var(--bt-text); }
.bt-seite-zu svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bt-ab.eingabe { padding: 4px 6px; background: var(--bt-karte); }
.bt-ab-name { border: 0; outline: 0; background: none; font: 600 13px var(--bt-schrift); color: var(--bt-text); width: 130px; padding: 5px 8px; }
@keyframes btPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.bt-luecke { flex: 1; }
.bt-suche { position: relative; display: flex; align-items: center; gap: 8px; background: var(--bt-karte); border-radius: 999px; height: 44px; padding: 0 16px; width: 280px; box-sizing: border-box; color: var(--bt-leise); }
.bt-suche svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bt-suche input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; font: 400 13px var(--bt-schrift); color: var(--bt-text); }
.bt-treffer { position: absolute; top: 52px; left: 0; right: 0; background: var(--bt-karte); border-radius: var(--bt-r-k, 14px); padding: 8px; box-shadow: var(--bt-schatten); display: flex; flex-direction: column; z-index: 80; animation: btRein .25s ease both; }
.bt-treffer button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font: 500 13px var(--bt-schrift); color: var(--bt-text); }
.bt-treffer button:hover, .bt-treffer button.an { background: var(--bt-weich); }
.bt-treffer small { color: var(--bt-leise); font-size: 12px; }
.bt-kopfknoepfe { display: flex; align-items: center; gap: 6px; }
.bt-rund { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bt-karte); color: var(--bt-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; flex: none; padding: 0; font: 700 13px var(--bt-schrift); }
.bt-rund:hover { background: var(--bt-weich); }
.bt-rund svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bt-rund.an { background: var(--bt-dunkel); color: var(--bt-auf-dunkel); }
.bt-zahl { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bt-rot); color: var(--bt-auf-farbe); font: 700 11px/18px var(--bt-schrift); box-sizing: border-box; }
.bt-zahl[hidden] { display: none; }
.bt-konto-knopf { background: var(--bt-dunkel); color: var(--bt-auf-dunkel); letter-spacing: .02em; }
.bt-konto-knopf:hover { background: color-mix(in srgb, var(--bt-dunkel) 84%, var(--bt-karte)); }
.bt-top button:focus-visible, .bt-menue button:focus-visible, .bt-k button:focus-visible { outline: 2px solid var(--bt-fokus-ring); outline-offset: 2px; }

/* ── Raster und Kacheln ── */
.bt-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: var(--bt-zeile, 168px); grid-auto-flow: dense; gap: 16px; }
.bt-k { --bt-kt: var(--bt-k-text, var(--bt-g-text, var(--bt-text)));
  --bt-kfl: var(--bt-k-flaeche, var(--bt-g-flaeche, var(--bt-karte)));
  --bt-kl: color-mix(in srgb, var(--bt-kt) 68%, transparent); --bt-klinie: color-mix(in srgb, var(--bt-kt) 14%, transparent);
  --bt-kweich: color-mix(in srgb, var(--bt-kt) 7%, transparent);
  --bt-ka: var(--bt-k-akzent, var(--bt-k-akzent-p, var(--bt-g-akzent, var(--bt-akzent-eigen, var(--bt-akzent)))));
  --bt-kb: var(--bt-k-balken, var(--bt-k-balken-p, var(--bt-g-balken, var(--bt-ka))));
  position: relative; background: linear-gradient(135deg, var(--bt-kfl) 30%, color-mix(in srgb, var(--bt-kfl) 66%, var(--bt-verlauf-ziel)));
  color: var(--bt-kt); border-radius: var(--bt-r, 22px); padding: 20px 22px; box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  overflow: hidden; cursor: pointer; user-select: none; box-shadow: var(--bt-rand); transition: box-shadow .25s, transform .25s; touch-action: manipulation;
  font-family: var(--bt-schrift); container-type: inline-size; outline: none; }
.bt-k.bt-kraeftig { --bt-kfl: var(--bt-k-flaeche, var(--bt-kf)); --bt-kt: var(--bt-k-text, var(--bt-auf-farbe)); }
.bt-k.bt-zart { --bt-kfl: var(--bt-k-flaeche, var(--bt-kf)); --bt-kt: var(--bt-k-text, var(--bt-auf-hell)); }
.bt-k.bt-blau { --bt-kfl: var(--bt-k-flaeche, var(--bt-blau-k, var(--bt-akzent))); --bt-kt: var(--bt-k-text, var(--bt-auf-farbe)); }
.bt-k.rein { animation: btRein .5s cubic-bezier(.2, .8, .2, 1) both; }
.bt-k:hover:not(.bt-eingabe):not(:has(input, textarea)) { box-shadow: var(--bt-schatten-hover); transform: translateY(-3px); }
.bt-k:focus-visible { box-shadow: 0 0 0 2px var(--bt-grund), 0 0 0 4px var(--bt-fokus-ring); }
.bt-inhalt { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bt-l { font-size: 12px; font-weight: 500; color: var(--bt-kl); display: flex; justify-content: space-between; gap: 8px; }
.bt-l.bt-titel { font-size: 14px; font-weight: 700; color: var(--bt-kt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bt-z { font-size: clamp(20px, 15cqi, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: auto; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-z.gross { font-size: clamp(22px, 13cqi, 40px); }
.bt-z.rot { color: var(--bt-rot); } .bt-z.gruen { color: var(--bt-gruen); }
.bt-k.bt-kraeftig .bt-z.rot, .bt-k.bt-blau .bt-z.rot, .bt-k.bt-kraeftig .bt-z.gruen, .bt-k.bt-blau .bt-z.gruen { color: var(--bt-kt); }
.bt-s { font-size: 12px; color: var(--bt-kl); margin-top: 4px; }
.bt-beschr { margin-top: auto; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bt-lade { flex: 1; display: flex; align-items: center; justify-content: center; }
.bt-ladekreis { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--bt-klinie); border-top-color: var(--bt-ladekreis, var(--bt-ka)); animation: btDreh .8s linear infinite; box-sizing: border-box; }
@keyframes btDreh { to { transform: rotate(360deg); } }
.bt-fehler, .bt-leer { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; font-size: 13px; color: var(--bt-kl); min-height: 0; }
.bt-leer { justify-content: center; }
.bt-fehler span { color: var(--bt-kt); font-weight: 600; }
.bt-knopf { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--bt-kweich); color: var(--bt-kt); font: 600 12px var(--bt-schrift); cursor: pointer; transition: background .2s; }
.bt-knopf:hover { background: color-mix(in srgb, var(--bt-kt) 14%, transparent); }
/* Kopf-Kachel im Bereich und „+"-Kachel */
.bt-kopf-k { display: flex; flex-direction: column; height: 100%; }
.bt-kopf-k p { margin: 0; font-size: 14px; opacity: .9; }
.bt-kopf-k h2 { margin: auto 0 0; font-size: clamp(22px, 8cqi, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.bt-kopf-k .bt-unten { margin-top: 6px; font-size: 12px; color: var(--bt-kl); }
.bt-k.bt-bereich-k { --bt-kfl: var(--bt-k-flaeche, var(--bt-blau-k, var(--bt-akzent))); --bt-kt: var(--bt-k-text, var(--bt-auf-farbe)); cursor: default; }
.bt-k.bt-plus { background: transparent; border: 2px dashed var(--bt-linie-stark); box-shadow: none; }
.bt-k.bt-plus:hover { background: var(--bt-karte); transform: none; box-shadow: none; }
.bt-plus-inhalt { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--bt-leise); font-size: 13px; font-weight: 600; text-align: center; }
.bt-plus-inhalt small { font-weight: 400; font-size: 12px; }
.bt-plus-inhalt svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bt-k.ruht { opacity: .55; }

/* Größe über die Ecke rechts unten */
.bt-k.griff::after { content: ''; position: absolute; right: 7px; bottom: 7px; width: 11px; height: 11px; pointer-events: none; opacity: .4;
  background: linear-gradient(135deg, transparent 0 46%, currentColor 46% 54%, transparent 54% 72%, currentColor 72% 80%, transparent 80%); transition: opacity .15s; }
.bt-k.bt-plus.griff::after { display: none; }
.bt-k[data-kante="rechts-unten"] { cursor: nwse-resize; }
.bt-k[data-kante="rechts-unten"]::after { opacity: .9; }
:root.bt-zieht, :root.bt-zieht * { user-select: none !important; }
:root.bt-zieht .bt-k:hover { transform: none; }
.bt-k.ziehend { z-index: 30; cursor: grabbing; animation: none !important; box-shadow: var(--bt-schatten-zug); pointer-events: none; transition: none; }
.bt-k.ziehend::after { display: none; }
.bt-ecke { display: none; }
.bt-k.gehoben:not(.ziehend) { transform: scale(1.03); box-shadow: var(--bt-schatten-zug); z-index: 5; }
.bt-k.gehoben:not(.bt-plus):not(.bt-bereich-k) .bt-ecke { display: block; position: absolute; right: 0; bottom: 0; z-index: 3; width: 34px; height: 34px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 52%, currentColor 52% 57%, transparent 57% 68%, currentColor 68% 73%, transparent 73%) no-repeat right 9px bottom 9px / 14px 14px; opacity: .7; }
.bt-k.fokus { box-shadow: 0 0 0 2px var(--bt-dunkel), var(--bt-rand); }
.bt-k.fest::before { content: ''; position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--bt-kl); opacity: .6; }
.bt-k.bt-schloss::before { content: ''; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 2px; border: 2px solid var(--bt-kl); box-sizing: border-box; }

/* ── Menü-Karte (bento-kern-menue.js) ── */
.bt-menue { position: fixed; z-index: 95; min-width: 250px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; overflow-x: hidden;
  background: var(--bt-karte); color: var(--bt-text); border-radius: var(--bt-r, 22px); padding: 8px; box-shadow: var(--bt-schatten), var(--bt-rand);
  display: flex; flex-direction: column; font-family: var(--bt-schrift); box-sizing: border-box; animation: btRein .18s ease both; }
.bt-menue-eintrag, .bt-menue-zurueck { border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 12px; cursor: pointer; font: 500 13px var(--bt-schrift); color: var(--bt-text); position: relative; }
.bt-menue-eintrag:hover, .bt-menue-zurueck:hover { background: var(--bt-weich); }
.bt-menue-eintrag small { color: var(--bt-leise); font-size: 12px; margin-left: 6px; }
.bt-menue-eintrag.gefahr { color: var(--bt-rot); }
.bt-menue-eintrag.unter::after { content: '›'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--bt-leise); font-size: 15px; }
.bt-menue-zurueck { color: var(--bt-leise); font-weight: 600; }
.bt-menue-kopf { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; color: var(--bt-leise); text-transform: uppercase; letter-spacing: .04em; }
.bt-menue-info { padding: 6px 12px; font-size: 12px; color: var(--bt-leise); }
.bt-menue-trenner { border: 0; border-top: 1px solid var(--bt-linie); margin: 4px 6px; }
.bt-menue .bt-haken { padding-left: 38px; }
.bt-menue .bt-haken::before { content: ''; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid var(--bt-linie-stark); border-radius: 6px; box-sizing: border-box; background: var(--bt-karte); }
.bt-menue .bt-haken.an::before { background: var(--bt-dunkel); border-color: var(--bt-dunkel); }
.bt-menue .bt-haken.an::after { content: ''; position: absolute; left: 19px; top: 50%; width: 4px; height: 8px; margin-top: -6px; border: solid var(--bt-auf-dunkel); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bt-menue-pillen { display: flex; gap: 2px; padding: 2px 8px 6px; }
.bt-menue-pillen button { flex: 1; text-align: center; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; font: 600 12px var(--bt-schrift); color: var(--bt-leise); cursor: pointer; }
.bt-menue-pillen button:hover { background: var(--bt-feld); color: var(--bt-text); }
.bt-menue-pillen button.an { background: var(--bt-dunkel); color: var(--bt-auf-dunkel); }
.bt-farbfelder { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 8px; max-width: 250px; }
.bt-farbfeld { width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--ff); border: 0; box-shadow: inset 0 0 0 1px var(--bt-linie-stark); cursor: pointer; transition: transform .15s; }
.bt-farbfeld:hover { transform: scale(1.12); }
.bt-farbfeld.leer { background: linear-gradient(135deg, var(--bt-karte) 0 45%, var(--bt-rot) 45% 55%, var(--bt-karte) 55%); }
.bt-farbfeld.an { box-shadow: 0 0 0 2px var(--bt-karte), 0 0 0 4px var(--bt-text); }

/* ── Meldung unten rechts mit „Rückgängig" ── */
.bt-meldung { position: fixed; right: 16px; bottom: 16px; z-index: 110; display: flex; align-items: center; gap: 12px; max-width: min(380px, calc(100vw - 32px)); padding: 8px 8px 8px 16px;
  border-radius: var(--bt-r-k, 14px); min-height: 48px; background: var(--bt-karte); color: var(--bt-text); box-shadow: var(--bt-schatten), var(--bt-rand); font: 500 13px var(--bt-schrift); box-sizing: border-box; animation: btRein .25s ease both; }
.bt-meldung::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bt-gruen); flex: none; }
.bt-meldung > span { flex: 1; min-width: 0; }
.bt-meldung-knopf { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--bt-dunkel); color: var(--bt-auf-dunkel); font: 600 12px var(--bt-schrift); cursor: pointer; white-space: nowrap; }

/* Übergang: Kachel wächst zur Seite */
.bt-flug { position: fixed; z-index: 75; border-radius: var(--bt-r, 22px); box-shadow: var(--bt-schatten-zug); pointer-events: none; }

/* Pinsel-Modus (bento-kern-pinsel.js setzt bt-pinsel am <html>) */
:root.bt-pinsel .bt-k:not(.bt-plus) { cursor: crosshair; }
:root.bt-pinsel .bt-k:hover { transform: none; }
:root.bt-pinsel .bt-k .bt-inhalt * { cursor: inherit; }
.bt-k.bt-pinsel-vorschau { box-shadow: 0 0 0 2px var(--bt-grund), 0 0 0 4px var(--bt-dunkel); }

@keyframes btRein { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bt-seite-pille, .bt-k.rein, .bt-menue, .bt-meldung, .bt-treffer { animation: none !important; }
  .bt-k:hover { transform: none !important; }
}
@media (max-width: 1100px) { .bt-suche { width: 200px; } }
@media (max-width: 900px) {
  :root.bt-an .bt-top { flex-wrap: wrap; padding: 12px; }
  .bt-abschnitte { order: 5; flex: 1 1 100%; flex-wrap: wrap; }
  .bt-suche { width: auto; flex: 1; }
  :root.bt-an.bt-start .bt-start-flaeche { padding: 0 12px 12px; }
  .bt-raster { gap: 12px; }
}
/* Handy: 2 Spalten (Ralph 24.10.2026), große Kacheln volle Breite, flachere Reihen */
@media (max-width: 699px) {
  .bt-raster { grid-auto-rows: var(--bt-zeile-handy, 132px); }
  .bt-k { padding: 16px; }
  .bt-kopfknoepfe [data-knopf], .bt-pinsel-knopf { display: none; }
  .bt-suche { order: 7; flex: 1 1 100%; width: 100%; height: 40px; }
  .bt-logo { margin-right: auto; }
}