/* ================================
   Global Variablen & Basis
   ================================ */
:root{
  --tile-radius:20px;
  --tile-padding:16px;
  --shadow:0 10px 20px rgba(0,0,0,.1);
  --shadow-press:0 6px 12px rgba(0,0,0,.15);

  --bg:#0f1115;
  --text:#EDEFF4;
  --muted:#A6ADBB;
  --border:#2a3245;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:-apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg);
  color:var(--text);
}

/* ================================
   Header & Layout
   ================================ */
header{
  padding:18px 16px;
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(15,17,21,.95), rgba(15,17,21,.7), rgba(15,17,21,0));
  backdrop-filter:saturate(1.2) blur(8px);
}
.container{ max-width:1100px; margin:0 auto; padding:12px 16px 40px; }
.toolbar{ display:flex; gap:8px; align-items:center; justify-content:space-between; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:#222939; color:#C7CDDB; font-size:12px;
  border:1px solid rgba(255,255,255,.06);
}

.notice{ font-size:13px; color:#9fb0c8; }

/* Buttons im Settings-Look */
.btn-sm{
  padding:8px 10px; border-radius:10px; font-size:13px;
  border:1px solid var(--border); background:#1b2232; color:#EDEFF4;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
.btn-ghost{ background:#141925; }
.btn-sm:hover{ filter:brightness(1.06); }

/* ================================
   Settings – Tabellen & Form (bleibt wie gehabt)
   ================================ */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:middle; text-align:left; }
.tbl-icons-col{ width:46px; }
.tbl-actions-col{ width:230px; }
.actions{ display:flex; gap:8px; flex-wrap:nowrap; justify-content:flex-end; }

.scope-badge{
  display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px;
  border:1px solid var(--border); background:#1a2333; color:#cfe2ff; text-transform:lowercase;
}
.scope-badge.local{   background:rgba(16,185,129,.18); border-color:rgba(16,185,129,.38); color:#b5f5d8; }
.scope-badge.external{background:rgba(59,130,246,.18); border-color:rgba(59,130,246,.34); color:#cfe0ff; }

.chip-color{ display:inline-block; width:48px; height:18px; border-radius:999px; border:1px solid var(--border); }

.bk-icon{
  width:32px; height:32px; max-width:32px; max-height:32px;
  aspect-ratio:1/1; object-fit:contain; display:block;
  border-radius:8px; background:#fff;
}

form{ display:grid; gap:12px; max-width:980px; }
label{ font-size:14px; color:#C7CDDB; }
input,select,textarea{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background:#141925; color:#EDEFF4;
}
button{
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:#1b2232; color:#EDEFF4; cursor:pointer;
}
button:hover{ filter:brightness(1.06); }

.grid-12{
  display:grid; gap:12px;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  max-width:980px;
}
.span-12{ grid-column:span 12; }
.span-6 { grid-column:span 6; }
.span-4 { grid-column:span 4; }
.span-3 { grid-column:span 3; }

.color-grid{
  display:grid; grid-template-columns:repeat(16, minmax(0,1fr)); gap:8px;
  max-width:none; margin-bottom:16px; /* Abstand zur manuellen Hex-Eingabe */
}
.color-swatch{ border-radius:12px; height:36px; border:1px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; color:#111; }
.color-inline{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#colorInput{
  width:120px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background:#141925; color:#EDEFF4;
}
@media (max-width: 820px){
  .grid-12{ grid-template-columns:repeat(6, 1fr); }
  .span-6,.span-4,.span-3{ grid-column:span 6; }
  .color-grid{ grid-template-columns:repeat(8, minmax(0,1fr)); }
}

/* ================================
   Startseite – Kachelraster (iOS)
   ================================ */
.grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
}

.tile{
  background:#1a1f29;
  border-radius:var(--tile-radius);
  padding:12px 16px;               /* kompakt, Höhe bleibt angenehm */
  box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .08s ease, filter .08s ease;
  cursor:pointer; user-select:none;
}
.tile:active{ transform:scale(.98); box-shadow:var(--shadow-press); filter:brightness(.98); }

/* NEU: Innen-Grid – Icon links, rechts Titel & Kategorie */
.tile .content{
  display:grid;
  grid-template-columns:56px 1fr;  /* fester Icon-Bereich */
  grid-template-rows:auto auto;    /* Titel oben, Kategorie unten */
  column-gap:12px;
  align-items:center;
}

/* Icon belegt beide Textzeilen und ist vertikal mittig */
.tile .content .icon{
  grid-row:1 / span 2;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:100%;
}
.tile .content .icon img{
  width:40px; height:40px;         /* sichtbar größer */
  border-radius:10px; background:#fff; object-fit:contain;
}

/* Titel & Kategorie (Kategorie UNTER dem Titel, ausgerichtet zur Textspalte) */
.tile .content .title{
  font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}
.tile .content .category{
  font-size:13px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:.9;
}

/* === Textfarbe in den Kacheln immer dunkel === */
.tile .content .title,
.tile .content .category{
  color:#111 !important;   /* sehr dunkles Grau / quasi Schwarz */
}

/* Fallback für älteres Markup (ohne .content-Grid) */
.tile .row1 .name,
.tile .row2{
  color:#111 !important;
}

/* === Text in Kacheln immer dunkel (Titel + Kategorie) === */
.tile .content .title,
.tile .content .category,
.tile .row1 .name,
.tile .row2{
  color:#111 !important;           /* sehr dunkles Grau (fast Schwarz) */
  -webkit-text-fill-color:#111 !important;  /* Safari/iOS */
  text-shadow:none !important;
}

/* === Innen-Grid für Kachel: Icon links, rechts Titel + Kategorie === */
.tile .content{
  display:grid;
  grid-template-columns:56px 1fr;  /* fixer Icon-Slot links */
  grid-template-rows:auto auto;    /* Titel oben, Kategorie unten */
  column-gap:12px;
  align-items:center;
}

/* Icon nimmt beide Textzeilen ein und ist vertikal zentriert */
.tile .content .icon{
  grid-row:1 / span 2;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:100%;
}
.tile .content .icon img{
  width:40px; height:40px;         /* sichtbar größer, Kachelhöhe bleibt angenehm */
  border-radius:10px; background:#fff; object-fit:contain;
}

/* Titel & Kategorie – immer dunkel */
.tile .content .title,
.tile .content .category{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important; /* iOS/Safari */
  text-shadow:none !important;
}

/* Zur Sicherheit auch fürs ältere Markup */
.tile .row1 .name,
.tile .row2{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  text-shadow:none !important;
}

/* === Button-Optik wie Settings === */
.btn-sm{
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
  border:1px solid #2a3245;
  background:#1b2232;
  color:#EDEFF4;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
.btn-sm:hover{ filter:brightness(1.06); }
.btn-ghost{ background:#141925; }

/* Falls .toolbar a eine eigene Farbe setzt – Button darüber priorisieren */
.toolbar a.btn-sm{ color:#EDEFF4; text-decoration:none; }