/* ═══════════════════════════════════════════════════════════════════
 * kacheln.css – „Startseite anpassen“ (gehört zu kacheln.js)
 * ═════════════════════════════════════════════════════════════════*/
.kw { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; margin: -6px 0 12px; min-height: 30px; }
.kw-text { flex: 1 1 320px; margin: 0; font-size: .84rem; line-height: 1.4; color: var(--g-text2, #33506a); }
.kw-text b { display: block; font-size: .96rem; color: var(--g-blau-tief, #2d5a78); }
.kw-knoepfe { display: flex; gap: 8px; align-items: center; }
.kw button { font: inherit; cursor: pointer; }
.kw-start {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; color: var(--g-muted, #5b7189);
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(67, 112, 148, .16);
  transition: background .15s, color .15s;
}
.kw-start:hover { background: #fff; color: var(--g-blau-tief, #2d5a78); }
.kw-start.geaendert { color: var(--g-blau-tief, #2d5a78); border-color: rgba(67, 112, 148, .35); }
.kw-start.geaendert::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--g-blau2, #5a8bb3); }
.kw svg, .kw-leiste svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kw-fertig, .kw-reset { padding: 7px 15px; border-radius: 10px; font-size: .84rem; font-weight: 650; border: 0; }
.kw-fertig { color: #fff; background: linear-gradient(135deg, var(--g-blau, #437094), var(--g-blau2, #5a8bb3)); box-shadow: 0 4px 14px rgba(67, 112, 148, .3); }
.kw-reset { color: var(--g-blau-tief, #2d5a78); background: rgba(255, 255, 255, .8); border: 1px solid rgba(67, 112, 148, .22); }
.kw-lager { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .5); border: 1px dashed rgba(67, 112, 148, .3); font-size: .8rem; color: var(--g-muted, #5b7189); }
.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-chips button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  color: var(--g-blau-tief, #2d5a78); background: #fff; border: 1px solid rgba(67, 112, 148, .25); }
.kw-chips button:hover { background: var(--g-blau, #437094); color: #fff; }
.kw-ansage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }

/* Kacheln im Anpassen-Modus */
.kw-griff { display: none; }
.kw-an > .k { animation: none !important; outline: 2px dashed rgba(67, 112, 148, .35); outline-offset: 3px; }
.kw-an > .k:hover { transform: none; }
.kw-an > .k > .kw-griff {
  display: block; position: absolute; inset: 0; z-index: 30; border-radius: inherit;
  cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  background: rgba(255, 255, 255, .0); transition: background .15s;
}
.kw-an > .k > .kw-griff:hover { background: rgba(90, 139, 179, .08); }
.kw-leiste {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; padding: 3px; border-radius: 12px;
  background: rgba(255, 255, 255, .96); border: 1px solid rgba(67, 112, 148, .22); box-shadow: 0 6px 18px -6px rgba(31, 58, 92, .45);
}
.kw-leiste button {
  min-width: 32px; height: 32px; padding: 0 7px; display: inline-grid; place-items: center; border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: #2d5a78; font: 700 .72rem/1 'Segoe UI', system-ui, sans-serif;
}
.kw-leiste button:hover { background: rgba(67, 112, 148, .14); }
.kw-leiste button:focus-visible { outline: 2px solid #437094; outline-offset: 1px; }
.kw-leiste .kw-zieh { cursor: grab; touch-action: none; color: #5b7189; }
.kw-leiste .kw-zieh svg { fill: currentColor; stroke: none; }
.kw-an > .k:first-of-type [data-a="vor"], .kw-an > .k:last-of-type [data-a="nach"] { opacity: .35; }

/* während des Ziehens */
.kw-platz { opacity: .28; outline-style: solid !important; outline-color: var(--g-blau2, #5a8bb3) !important; }
.kw-platz > .kw-griff .kw-leiste { visibility: hidden; }
.kw-geist {
  position: fixed !important; z-index: 4000; margin: 0 !important; pointer-events: none; overflow: hidden;
  animation: none !important; outline: 0 !important; opacity: .94; will-change: transform;
  box-shadow: 0 30px 70px -18px rgba(31, 58, 92, .55), 0 10px 24px -10px rgba(31, 58, 92, .4) !important;
}
.kw-geist .kw-leiste { visibility: hidden; }
.kw-zieht, .kw-zieht * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }

@media (max-width: 760px) {
  .kw { justify-content: stretch; }
  .kw-knoepfe { margin-left: auto; }
  .kw-leiste button { min-width: 38px; height: 38px; }   /* fingerfreundlich */
}
@media print { .kw, .kw-griff { display: none !important; } }
@media (max-width: 760px) { .kw-leiste .kw-gr { display: none; } }   /* am Handy stehen alle Kacheln untereinander – Breite ohne Wirkung */