/*Stand===07.12.2025. 18:00 Uhr===*/
/* ====== Farb- und Design-Variablen ====== */
:root{
  --bg:#f2fbf8; --card:#fff; --ink:#0b3440; --muted:#5c7a84; --brand:#1fbf9d;
  --shadow:0 6px 18px rgba(3,63,70,.08);
  
   /* Wichtigkeit-Farben (für die Punkte) */
  --imp-high:#1e6fff;
  --imp-med:#1aa37a;
  --imp-low:#f2c94c;
}
/* Optional: angenehmeres Tap-Verhalten auf Mobile */
:root { -webkit-tap-highlight-color: transparent; }

/* ====== Basis ====== */
*{box-sizing:border-box}
html, body{
  height:100%;
  overflow-x:hidden;
  touch-action: manipulation;
}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f2fbf8 0%,#eef8f5 60%,#eaf5f1 100%);
  line-height:1.5;
}
.container,.topbar,.subnav,.cards{max-width:100%}

/* Safe-Area für Notch */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
}
.topbar h1{
  display:flex; align-items:center; gap:8px; margin:0; font-size:18px; font-weight:600;
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Home-Titel – Lightmode klar lesbar */
body:not(.dark) .topbar h1,
body:not(.dark) #appTitle{
  color:#ffffff;
}

.logo{height:28px; width:auto; flex-shrink:0}
.lang{font-size:14px; color:var(--muted); flex-shrink:0}

/* ====== Container ====== */
.container{width:min(960px,100%); margin:20px auto; padding:0 16px}
.hidden{display:none!important}

/* ====== Grid / Tiles ====== */
.grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}

/* ----- EINHEITLICHER TILE-BLOCK (final) ----- */
.tile{
  display:flex;
  flex-direction:column;
  justify-content:center;          /* vertikal */
  align-items:center;              /* horizontal */
  text-align:center;

  padding:22px 12px;               /* einheitlich */
  gap:10px;                        /* Abstand Emoji ↔ Text */
  border-radius:18px;
  background:var(--card);

  /* sanfter Grundschatten */
  box-shadow:0 6px 16px rgba(3,63,70,.06);

  cursor:pointer;
  transition:
    transform .08s ease,
    box-shadow .12s ease,
    background-color .2s ease;
  will-change:transform;
}

/* Hover / Active */
.tile:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(3,63,70,.10);
  background:#f3fbf8;
}
.tile:active{
  transform:scale(.98);
}

/* Emoji */
.tile span.emoji,
.tile span.icon{
  font-size:46px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Titel */
.tile h3{
  font-size:16px;
  font-weight:600;
  margin:0;
  color:var(--ink);
}

/* Kategorie-Akzente – kräftigere Outline-Farben für alle Homescreen-Kacheln */
.tile[data-category="miete"],
.tile[data-category="wohnung"],
.tile[data-category="miete-wohnung"]{
  border: 2px solid #22c55e;       /* sattes Grün */
}

.tile[data-category="versicherung"]{
  border: 2px solid #0ea5e9;       /* kräftiges Cyan */
}

/* Finanzen + Finanzschutz-Kachel */
.tile[data-category="finanzen"],
.tile[data-category="finanzschutz"],
.tile[data-category="finanzschutz-kredite"]{
  border: 2px solid #3b82f6;       /* klares Blau */
}

.tile[data-category="arbeit"]{
  border: 2px solid #6366f1;       /* Indigo */
}

.tile[data-category="steuern"]{
  border: 2px solid #f59e0b;       /* Amber/Orange */
}

.tile[data-category="nice"]{
  border: 2px solid #14b8a6;       /* Teal */
}

/* Gesundheit + Notfall */
.tile[data-category="gesundheit"]{
  border: 2px solid #10b981;       /* Emerald */
}
.tile[data-category="notfall"]{
  border: 2px solid #ef4444;       /* Rot */
}

.tile[data-category="partner"]{
  border: 2px solid #eab308;   /* warmes Gold für Partner */
}

/* Dunkelmodus */
@media (prefers-color-scheme: dark){
  .tile{
    background:#071c21;
    border-color:#0e2f36;
    box-shadow:0 10px 24px rgba(0,0,0,.45);
  }

  .tile h3{
    color:#f2f9f8;
  }

  /* Darkmode-Hover für Home-Tiles – dezent, aber „appig“ */
  .tile:hover{
    background:#0b242b; /* etwas heller als Grundfläche */
    box-shadow:0 14px 32px rgba(0,0,0,.70);

    /* Rand leicht in Richtung Kategorie-Farbe verstärken */
    border-color:color-mix(in srgb, var(--cat-accent, #1fc28a) 55%, #0e2f36);
  }
}

/* Filterbereich leichter Abstand zum restlichen Content */
.subnav{
  margin-top:8px;
  margin-bottom:14px;
}

/* ====== Subnav ====== */
.subnav{
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 0 14px;
}

.subnav.compact h2{display:none}

/* Top-Buttons: Zurück / Filter */
#backBtn,
#filterToggle,
#updateLogBack{
  padding:8px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  background:#ffffff;
  border:1px solid #d9e8e5;
  cursor:pointer;
  transition:.15s background, .15s border-color, .15s box-shadow;
  box-shadow:0 2px 4px rgba(0,0,0,.06);
}

/* Feinschliff – Buttons noch harmonischer */
body:not(.dark) #backBtn,
body:not(.dark) #filterToggle,
body:not(.dark) #updateLogBack{
  background:rgba(255,255,255,0.92);
  border-color:#d8e7e3;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}

#backBtn:hover,
#filterToggle:hover,
#updateLogBack:hover{
  background:#e9f8f4;
  border-color:#1fbf9d;
}

/* Darkmode – Top-Buttons halbtransparent / glassy */
body.dark #backBtn,
body.dark #filterToggle,
body.dark #updateLogBack{
  background: rgba(3, 20, 28, 0.75);
  border-color: rgba(0, 0, 0, 0.65);
  color: #f9fafb;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
}

/* Suchfeld */
#search{
  margin-left:auto;
  width:min(320px,60vw);
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #d9e8e5;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(4px);
}
/* Feinschliff Suchfeld */
body:not(.dark) #search{
  background:rgba(255,255,255,0.95);
  border-color:#d8e7e3;
}

/* Darkmode Suchfeld */
body.dark #search{
  background:rgba(0,0,0,0.25);
  border-color:#0e2f36;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}

/* Filterbereich Hintergrund beruhigen */
.filter-area{
  background:#f6fbfa;      /* dezentes Off-White statt knalligem Mint */
  border-radius:18px;      
  padding:16px 12px;
}

/* Lightmode – Filterbereich noch ruhiger */
body:not(.dark) .filter-area{
  background:#f9fdfc;      /* weicher, fast weiß */
  border:1px solid #e7f6f3;
}

/* Darkmode – Filterbereich halbtransparent / glassy */
body.dark .filter-area{
  background: rgba(3, 20, 28, 0.82);
  border-radius: 18px;
  border: 1px solid #021419;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
}

/*==Filter-Chips==*/
.chips{
  margin-bottom:6px;
}

/* Basis-Chips */
.chips .chip{
  padding:7px 12px;          /* kleiner */
  font-size:13px;            /* minimal kleiner */
  line-height:1.25;          /* bessere Lesbarkeit */
  border-radius:14px;        /* moderner */
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  color:var(--text-soft);
  margin:3px 5px 3px 0;
  cursor:pointer;
  white-space:nowrap;
  transition:.16s background, .16s border-color, .16s color, .16s box-shadow;
}

/* "Alles anzeigen" */
.chips .chip.show-all{
  background:rgba(31,191,157,.10);
  border-color:#1fbf9d;
  color:var(--text-main);
  padding:8px 16px;
  font-weight:600;
}

/* Show-all etwas stärker sichtbar */
body:not(.dark) .chips .chip.show-all{
  background:rgba(31,191,157,.14);
}

/* "Meine Favs" (falls Klasse vorhanden) */
.chips .chip.favs{
  padding:8px 16px;
  font-weight:600;
}

/* Aktiver Chip */
.chips .chip.active{
  background:rgba(31,191,157,.18);
  border-color:#1fbf9d;
  color:var(--text-main);
  box-shadow:0 0 0 1px rgba(31,191,157,.45);
}

/* Darkmode: Show-all & active Chips Textfarbe korrigieren */
body.dark .chips .chip.show-all,
body.dark .chips .chip.active {
  color:#ffffff !important;
}

.chips{
  margin-bottom: 6px;
}

/* Mehr Raum zwischen den Zeilen */
.chips{
  row-gap:6px;
}

/* ====== Karten ====== */
.cards{display:flex; flex-direction:column; gap:14px; margin:18px 0 40px; padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
.card{
  position:relative; background:var(--card); border-radius:16px; padding:16px;
  box-shadow:var(--shadow); border-top:4px solid rgba(31,191,157,.2); scroll-margin:80px;
}
.card[data-cat="miete"]{border-top-color:#9be7d5}
.card[data-cat="versicherung"]{border-top-color:#b5efd5}
.card[data-cat="finanzen"]{border-top-color:#b8ddff}
.card[data-cat="arbeit"]{border-top-color:#c7c0ff}
.card[data-cat="steuern"]{border-top-color:#ffd9a8}
.card[data-cat="nice"]{border-top-color:#cfe4f5}
.card[data-cat="gesundheit"]{border-top-color:#a7f0df}

.card h3{ margin:0 0 8px 0; font-size:16px; font-weight:600; min-width:0; word-break:break-word; hyphens:auto; }
.card .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; overflow-x:hidden}
.tag{font-size:12px; border:1px solid #e1efec; padding:3px 8px; border-radius:12px; color:#3b6f79; white-space:nowrap}

.reveal{ margin-top:10px; border:0; background:var(--brand); color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; font-size:14px; }

/* Favoriten-Button */
.fav-btn{
  border:1px solid #dbe8e5; background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; font-size:16px; line-height:1;
}
.fav-btn:hover{border-color:#1fbf9d}

/* Antwort smooth */
.card .answer{
  display:block; max-height:0; overflow:hidden; opacity:0; transform:translateY(-6px);
  transition:max-height .35s ease, opacity .3s ease, transform .35s ease; color:var(--muted); margin:12px 0 0;
}
.card .answer.open{
  max-height:3000px !important;
  opacity:1;
  transform:translateY(0);
}

/* ====== Support-Leisten ====== */
.support{
  display:flex; align-items:center; gap:12px;
  margin: 8px 0 40px;
  padding: 12px;
  background:#fff;
  border:1px solid #dbe8e5;
  border-radius:14px;
  box-shadow: var(--shadow);
}
.support .btn.donate{
  padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600;
  background: var(--brand); color:#fff; display:inline-block;
}
.support .link{ color:#2b6a6c; text-decoration:underline; font-weight:600; }

/* Hinweis-/Ad-Slot */
.ad-slot{
  margin:16px 0 40px; padding:14px; background:#fff; border:1px solid #dbe8e5; border-radius:14px; box-shadow: var(--shadow);
}
.ad-slot .label{ font-weight:700; font-size:.85rem; opacity:.75; display:block; margin-bottom:6px; }
.ad-slot .content{ font-size:.95rem; line-height:1.4; }

/* ====== Nach-oben-Button ====== */
#toTop{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  border: 1px solid #dbe8e5;
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 6px 16px rgba(3,63,70,.12);
  cursor: pointer;

  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .18s ease, transform .22s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;

  color: var(--brand);
  font-size: 18px; font-weight: bold;
}
#toTop.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#toTop:hover{ box-shadow:0 10px 24px rgba(3,63,70,.16); transform: translateY(-1px) scale(1.02); }
#toTop:active{ transform: translateY(1px) scale(.98); }
#toTop:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ====== Kategorie-Unterzeile ====== */
.cat-subbar{
  display:flex; align-items:center; gap:8px; padding:6px 12px;
  background:#f6fbf9; border-top:1px solid #e6efec; border-bottom:1px solid #e6efec;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset, 0 -1px 0 rgba(0,0,0,.02) inset;
}
.cat-subbar .crumb{
  font-weight:600; color:#245a60; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70vw;
}
.cat-subbar.hidden{ display:none; }
@keyframes subbarFade { from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:translateY(0);} }
.cat-subbar.show{ animation:subbarFade .18s ease; }

/* ====== A11y ====== */
@media (prefers-reduced-motion: reduce){
  #toTop{transition:none}
  html:focus-within{scroll-behavior:auto}
}

/* Antwort-Links als dezente Buttons */
.answer a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(14,165,163,.08);
  line-height: 1.2;
}
.answer a:hover { background: rgba(14,165,163,.14); }
.answer a:active { transform: translateY(1px); }

/* Falls irgendwo versehentlich pointer-events deaktiviert wurde: */
.answer, .answer a { pointer-events: auto; }

/* Antwort-Formatierung (Absätze & Listen) */
.answer p { margin: 0.4em 0; }
.answer ul { margin: 0.4em 0 0.4em 1.2em; padding: 0; list-style: disc; }
.answer li { margin-bottom: 0.3em; line-height: 1.4; }

/* ====== Modals (Welcome / Feedback) ====== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  display:grid; place-items:center; padding:16px; z-index:1000;
}
.dialog{
  width:min(720px, 96vw); background:var(--card); color:var(--ink);
  border-radius:16px; box-shadow:var(--shadow); padding:16px; position:relative;
}
.dialog-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.icon-btn{ border:none; background:transparent; font-size:20px; line-height:1; cursor:pointer; }
.dialog-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.btn-primary{ background:var(--brand); color:#fff; border:none; border-radius:10px; padding:10px 14px; font-weight:600; }
.btn-secondary{ background:#e6f7f3; color:#0b6050; border:1px solid #bfe9df; border-radius:10px; padding:10px 14px; font-weight:600; }
textarea#feedbackText{
  width:100%; border:1px solid #cfe7e2; border-radius:12px; padding:12px; resize:vertical; font:inherit; background:#fff;
}
.hint{ color:var(--muted); display:block; margin-top:8px; }
.sr-only{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ====== Refs unter Antworten ====== */
.ref-box{
  margin-top:14px;
  padding-top:8px;
  border-top:1px dashed #d9ebe7;
}

.ref-box .ref-label{
  display:block;
  font-size:11px;
  font-weight:600;
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--muted, #5b6b76);
}

.ref-box .ref-content{
  font-size:14px;
  line-height:1.4;
}

/* Info-Links (Mehr Infos, WhatsApp, Website, Röbel-App, Google Maps) */
.ref-box a[data-ak-link],
a[data-ak-link]{
  pointer-events: auto;
  color: #059669;       /* Smaragdgrün */
  font-weight: 600;
}

/* Darkmode – helleres Smaragdgrün für bessere Lesbarkeit */
body.dark .ref-box a[data-ak-link],
body.dark a[data-ak-link]{
  color: #6ee7b7;
}

/* Hover-Effekt */
a[data-ak-link]:hover{
  text-decoration: underline;
}

@media (prefers-color-scheme: dark){
  .dialog{ background:#182b30; color:#e6f7f3; }
  textarea#feedbackText{ background:#0f2226; color:#e6f7f3; border-color:#2b464c; }
  .btn-secondary{ background:#1b3439; color:#cfe9e4; border-color:#2b464c; }
  .modal-backdrop{ background:rgba(0,0,0,.55); }
  .ref-box{ border-top-color:#2b4b52; color:#cfe9e4; }
  .ref-box .ref-label{ color:#9ad7cb; }
}

@media (prefers-color-scheme: dark){

  /* Kategorie-Unterzeile im Karten-Header */
  .cat-subbar{
    background:#061f23;
    border-top-color:#153b40;
    border-bottom-color:#153b40;
    box-shadow:
      0 1px 0 rgba(0,0,0,.45) inset,
      0 -1px 0 rgba(0,0,0,.35) inset;
  }

  /* Filter-Chips über den Karten */
  .chips .chip{
    background:#041f25;
    color:#f6fffc;
    border-color:#2b5057;
  }

  /* „Alles anzeigen“ Chip etwas hervorgehoben */
  .chips .chip.show-all{
    background:#0fb98a;
    color:#021314;
  }

  /* Tags unten in den Karten */
  .card .tags{
    border-top-color:#163c41;
  }

  .tag{
    background:rgba(0,0,0,.22);
    border-color:#28535a;
    color:#e3f6f3;
  }
}

/* v1.3 hardening: modal visibility & clicks */
.modal-backdrop[hidden]{
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
.modal-backdrop{
  pointer-events: auto;
}
.modal-backdrop .dialog{
  position: relative;
}

/* v1.3: Topbar – EINHEITLICH & VERBINDLICH (langToggle + feedbackBtn) */

/* Hover: mint */
#langToggle:hover,
#feedbackBtn:hover,
#langToggle.lang:hover,
#feedbackBtn.lang:hover{
  background: rgba(26,163,122,.12) !important;
  border-color: rgba(26,163,122,.35) !important;
}

/* Fokus-Ring */
#langToggle:focus,
#feedbackBtn:focus{
  outline: 2px solid var(--brand, #1aa37a);
  outline-offset: 2px;
}

/* kleiner Abstand zwischen Sprache und Feedback */
#langToggle + #feedbackBtn{ margin-left: 8px; }

/* v1.3: Feedback-Hinweis klein & dezent */
.dialog-hint{
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted, #5b6b76);
}

/* v1.4: Einheitliche Emoji-„Icon“-Größe */
.emoji-icon{
  font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',system-ui,sans-serif;
  font-size: 24px;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
/* Nur in den Home-Kacheln groß: */
.tile .emoji-icon{
  font-size: 48px;
  height: 48px;
  width: auto;          /* Platz für beide Emojis */
  white-space: nowrap;  /* kein Zeilenumbruch */
  letter-spacing: 2px;  /* kleiner Abstand zwischen den Emojis */
  display: inline-flex; /* bleibt zentrierbar */
  align-items: center;
  justify-content: center;
}

/* v1.4: Emojis als alleinige Icons – echte Logos verstecken, Emoji behalten */
.use-emoji-icons .tile .tile-icon,
.use-emoji-icons .tile .tile-icon-wrap,
.use-emoji-icons .tile .icon,
.use-emoji-icons .tile .logo,
.use-emoji-icons .tile [class*="icon"]:not(.emoji-icon),
.use-emoji-icons .tile [class*="Icon"]:not(.emoji-icon),
.use-emoji-icons .tile svg,
.use-emoji-icons .tile img{
  display: none !important;
}

/* Hintergrund-/Masken-Grafiken ebenfalls deaktivieren */
.use-emoji-icons .tile,
.use-emoji-icons .tile::before,
.use-emoji-icons .tile::after,
.use-emoji-icons .tile .tile-icon,
.use-emoji-icons .tile .tile-icon-wrap,
.use-emoji-icons .tile .icon,
.use-emoji-icons .tile .logo{
  background: none !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  content: none !important;
}

/* Kachel-Titel und Emoji hübsch nebeneinander */
.tile h3, .tile span[data-i18n^="tile."]{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* v1.4.2 – Brand in Listenansicht komplett ausblenden */
.in-list .topbar h1,
.in-list .topbar #appTitle,
.in-list .topbar .app-title,
.in-list .topbar .brand,
.in-list .topbar .logo,
.in-list .topbar .header-logo,
.in-list .topbar a[href="/"] {
  display: none !important;
}

/* v1.4.2 – Subbar als Grid: [Badge][EN][Feedback] */
.in-list #catSubbar{
  background: #f6fbf9;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 8px;
  position: relative;
  z-index: 2;
}

/* Darkmode – Subbar dunkel und neutral */
body.dark .in-list #catSubbar{
  background: #07151a;
}

/* Falls #catLabel in einem Wrapper liegt: Wrapper soll nicht stören */
.in-list #catSubbar *{
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
}

/* Badge (Emoji + Text) – wie Chip */
.in-list #catLabel{
  grid-column: 1;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--card, #fff) !important;
  color: var(--ink, #162028) !important;
  border: 1px solid var(--border, #d0d6db) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

/* Emoji im Badge kompakt */
.in-list #catLabel .emoji-icon{
  width: 24px; height: 24px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',system-ui,sans-serif;
  font-size: 24px;
  margin-right: 6px !important;
}

/* EN/Feedback rechts, nicht schrumpfen */
.in-list #langToggle{ grid-column: 2; }
.in-list #feedbackBtn{ grid-column: 3; }
.in-list #langToggle, .in-list #feedbackBtn{ flex: 0 0 auto; }

/* v1.4.4: EN/Feedback sofort wieder hell (Mobile/Android) */
#langToggle,
#feedbackBtn{
  background: var(--card, #fff) !important;
  color: var(--ink, #162028) !important;
  border: 1px solid var(--border, #d0d6db) !important;
  box-shadow: none !important;
  /* kurze, flüssige Transition; kein „Nachdunkeln“ */
  transition: background-color 80ms ease, border-color 80ms ease !important;
  -webkit-tap-highlight-color: transparent; /* Android Ripple weg */
  touch-action: manipulation;                /* 300ms Delay verhindern */
}

/* Hover: leicht mint – sonst neutral */
#langToggle:hover,
#feedbackBtn:hover{
  filter: none !important;
  background: rgba(26,163,122,.12) !important;
  border-color: rgba(26,163,122,.35) !important;
}

/* Focus/Active/Pressed: ebenfalls neutral (kein dunkles Grün) */
#langToggle:focus,
#langToggle:active,
#feedbackBtn:focus,
#feedbackBtn:active,
#langToggle[aria-pressed="true"],
#feedbackBtn[aria-pressed="true"],
#langToggle.active, #feedbackBtn.active,
#langToggle.on,     #feedbackBtn.on,
#langToggle.selected,#feedbackBtn.selected{
  background: var(--card, #fff) !important;
  border-color: var(--border, #d0d6db) !important;
  filter: none !important;
  outline: 2px solid var(--brand, #1aa37a);
  outline-offset: 2px;
}

/* Kein Fokus-Rand nach Maus-/Touch, nur bei Tastatur (Chromium) */
#langToggle:focus:not(:focus-visible),
#feedbackBtn:focus:not(:focus-visible){
  outline: none !important;
}

/* === v1.4: Importance – Farbcode für Karten =================== */
/* 1) Farbstreifen links an der Card (3px) */
.card[data-importance]{ position: relative; }
.card[data-importance]::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}
/* Wichtigkeits-Rand entfernt */
.card[data-importance="high"],
.card[data-importance="med"],
.card[data-importance="low"] {
  border-left: none !important;
}

/* 2) Kleines Rund-Badge vor dem Titel (optional, rein dekorativ) */
.card .card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card .card-head-left{
  display:flex; align-items:center; gap:8px; min-width:0;
}
/* =========================
   Version B – Moderne Importance-Badges
   ========================= */
.imp-badge {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

/* HIGH – blau */
.imp-high {
  background: var(--imp-high);
  box-shadow: 0 0 6px var(--imp-high);
}

/* MED – grün */
.imp-med {
  background: var(--imp-med);
  box-shadow: 0 0 6px var(--imp-med);
}

/* LOW – gelb */
.imp-low {
  background: var(--imp-low);
  box-shadow: 0 0 6px var(--imp-low);
}

/* 3) Legende auf Home */
.importance-legend{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted, #5b6b76);
}
.importance-legend .legend-label{
  margin-right:6px; font-weight:600; color: var(--ink, #162028);
}
/* Legende – Punkte passend zu den Karten-Badges */
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.legend-dot.high {
  background: #1e6fff;   /* Sehr wichtig */
}

.legend-dot.med {
  background: #1aa37a;   /* Wichtig */
}

.legend-dot.low {
  background: #c2c8cf;   /* Nice to have */
}
.legend-text{ margin-right:10px; }

.ref-content { display:flex; flex-wrap:wrap; gap:.25rem .5rem; }
.ref-item { white-space:nowrap; }

/* --- Tiles: einheitliche Kontur (ohne Layout-Shift) --- */
:root{
  --tile-radius: 18px;
  --tile-shadow: 0 4px 12px rgba(0,0,0,.06);
  --tile-border: rgba(0,0,0,.12);
  --tile-border-hover: rgba(0,0,0,.22);
  --tile-border-active: rgba(0,0,0,.45);
}

/* Grundstil für alle Tiles – Schatten, aber Border kommt aus den Kategorien oben */
.tile,
button.tile{
  border-radius: var(--tile-radius) !important;
  box-shadow: var(--tile-shadow);        /* kein zusätzlicher 1px-Inset-Rand mehr */
  background-clip: padding-box;
}

/* Hover-Feedback dezent */
.tile:hover{
  box-shadow: var(--tile-shadow),
              0 0 0 1px var(--tile-border-hover) inset !important;
}

/* Aktive/Focused Kachel kräftiger */
.tile.is-active,
.tile:focus-visible{
  box-shadow: var(--tile-shadow),
              0 0 0 2px var(--tile-border-active) inset !important;
}

/* Optional: gleiche Helligkeit für alle Kachel-Hintergründe */
.tile{
  background-color: rgba(255,255,255,.75);
}

/* --- Smooth Scroll global --- */
html { scroll-behavior: smooth; }

.list-enter { animation: listFadeUp 260ms ease-out both; }
.card-flash { animation: cardPop 220ms ease-out both; }

@keyframes listFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardPop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  50%{ transform: scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

#catSubbar{ position: relative; }
/* Streifen unter der Subbar deaktiviert */
.in-list #catSubbar::after{
  content: none !important;
  display: none !important;
}

/* Karten: Top-Linie auf Kategorie-Farbe setzen (unabhängig von Importance) */
.in-list .card{ position: relative; }
.in-list .card::after{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height: 4px;                       /* Stärke der Karten-Topline */
  background: var(--cat-accent, #1aa37a);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  z-index: 1;
  pointer-events: none;
}

/* Falls alte Top-Linien via border/shadow existieren → neutralisieren */
.in-list .card{
  border-top-color: transparent !important;
  box-shadow:
    0 0 0 0 rgba(0,0,0,0),
    var(--tile-shadow, 0 4px 12px rgba(0,0,0,.06));
}

/* Kategorie-Akzent – kräftige Farben passend zu den Home-Tiles */
:root { --cat-accent: #10b981; }

/* Achtung: Farben entsprechen jetzt exakt den Tile-Rändern */
body[data-cat="miete"],
body[data-cat="wohnung"]{
  --cat-accent: #22c55e;   /* kräftiges Grün */
}

body[data-cat="versicherung"]{
  --cat-accent: #0ea5e9;   /* Cyan */
}

body[data-cat="finanzen"],
body[data-cat="finanzschutz"]{
  --cat-accent: #3b82f6;   /* Blau */
}

body[data-cat="arbeit"]{
  --cat-accent: #6366f1;   /* Indigo */
}

body[data-cat="steuern"]{
  --cat-accent: #f59e0b;   /* Orange / Amber */
}

body[data-cat="nice"]{
  --cat-accent: #14b8a6;   /* Teal */
}

body[data-cat="gesundheit"]{
  --cat-accent: #10b981;   /* Emerald */
}

body[data-cat="notfall"]{
  --cat-accent: #ef4444;   /* Rot */
}

/* Zusätzliche Kategorien wie "Notfall" / "Wohnung" können wir hier ergänzen: */
body[data-cat="notfall"]{
  --cat-accent: #fca5a5;   /* sanftes Rot */
}
body[data-cat="wohnung"]{
  --cat-accent: #bfdbfe;   /* sanftes Blau */
}

body[data-cat="partner"]{
  --cat-accent: #eab308;  /* gleiche Gold-Farbe wie beim Tile-Rand */
}

/* --- Rand um das Kategorie-Badge (#catLabel) --------------------- */
.in-list #catLabel{
  border: 2px solid var(--cat-accent) !important;   /* Outline in Akzentfarbe */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-accent) 18%, transparent);
}

/* (optional) Badge-Hintergrund leicht akzentuieren */
.in-list #catLabel{
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--cat-accent) 6%, #fff),
      color-mix(in srgb, var(--cat-accent) 0%, #fff)
    );
}

/* Streifen unter der Subbar (falls aktiv) – gleiche Farbe */
#catSubbar{ position: relative; }
.in-list #catSubbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:6px; border-radius:3px; background: var(--cat-accent);
}
.emoji-icon{
  font-size:24px; width:24px; height:24px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:8px;
}
/* groß nur in Kacheln; zwei Emojis nebeneinander */
.tile .emoji-icon{
  font-size:48px; height:48px; width:auto;
  white-space:nowrap; letter-spacing:2px;
}

.hidden { display: none !important; }

/* === Topbar v2 – 20.11.2025 — EINHEITLICH STABIL === */

/* Grundlayout der Topbar */
/* --- Topbar Hintergrund dunkler | 20.11.2025 --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;

  /* neue dunkle Farbe */
  background: #123b38;  
  border-bottom: 1px solid #0d2c29;

  position: sticky;
  top: 0;
  z-index: 10;
}

/* === Einheitliche EN/Feedback Buttons – 23.11.2025 === */

/* Grundstil */
#langToggle,
#feedbackBtn {
  height: 34px;
  padding: 6px 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: #ffffff;
  color: #0b3440;
  border: 1px solid #d0d6db;

  font-size: 14px;
  font-weight: 500;
  line-height: 1;

  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Hover */
#langToggle:hover,
#feedbackBtn:hover {
  background: rgba(26,163,122,0.10);
  border-color: rgba(26,163,122,0.35);
}

/* Focus */
#langToggle:focus-visible,
#feedbackBtn:focus-visible {
  outline: 2px solid var(--cat-accent);
  outline-offset: 2px;
}

/* Active */
#langToggle:active,
#feedbackBtn:active {
  transform: scale(.98);
}

/* ==== Darkmode ==== */
body.dark #langToggle,
body.dark #feedbackBtn {
  background: #ffffff !important;
  color: #03141c !important;
  border-color: #d0d6db !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05) !important;
}

/* Darkmode Hover */
body.dark #langToggle:hover,
body.dark #feedbackBtn:hover {
  background: #f3faf8 !important;
  border-color: rgba(0,197,150,0.45) !important;
}

/* Der rechte Buttoncontainer */
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Legenden-Button rechts neben Feedback */
.badge-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  margin:0;
  background:transparent;
  border:none;
  cursor:pointer;
}

/* Kleine runde Punkte – gleiche Farben wie in den Karten */
.badge-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}

.badge-dot.badge-high { background: var(--imp-high); }
.badge-dot.badge-med  { background: var(--imp-med);  }
.badge-dot.badge-low  { background: var(--imp-low);  }

/* Buttons */
#langToggle,
#feedbackBtn {
  background: #fff;
  border: 1px solid #d0d6db;
  border-radius: 10px;
  padding: 6px 12px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;
}

/* LISTENANSICHT – Topbar verkleinert + Badge in eigene Zeile */
.in-list .topbar h1,
.in-list .topbar #appTitle,
.in-list .logo {
  display: none !important;
}

/* Subbar – neutraler Hintergrund, keine grünliche Fläche */
.in-list #catSubbar {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-top: 0;
}

/* Badge links */
.in-list #catLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #d0d6db;
  white-space: nowrap;
}

/* Emoji kompakt */
.in-list #catLabel .emoji-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  margin-right: 6px;
}

/* Buttons auf der rechten Seite */
.in-list .top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Badge mit Kategorie-Farbe */
.in-list #catLabel{
  height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff !important;
  border: 2px solid var(--cat-accent) !important;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  /* Glow etwas dezenter */
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--cat-accent) 18%, transparent);
}

/* EN / Feedback bleiben neutral weiß */
.in-list #langToggle,
.in-list #feedbackBtn{
  height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff !important;
  border: 1px solid #d0d6db !important;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

 /* ===========================
   Dark Mode – System-Einstellung
   =========================== */
@media (prefers-color-scheme: dark) {
  :root{
    /* Hintergründe */
    --bg-body: #020b0e;
    --bg-main: #021419;
    --bg-soft: #05232a;
    --surface-card: #052a31;
    --surface-card-soft: #06333b;

    /* Textfarben */
    --text-main: #f9fafb;
    --text-soft: #d0e4e8;
    --text-muted: #8fa8ad;

    /* Rahmen & Schatten */
    --border-soft: rgba(0, 0, 0, 0.55);
    --border-strong: rgba(0, 0, 0, 0.8);
    --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.75);

    /* Eingabefelder / Chips */
    --field-bg: #082931;
    --field-border: rgba(255, 255, 255, 0.10);
    --chip-bg: rgba(0, 0, 0, 0.35);
    --chip-border: rgba(255, 255, 255, 0.14);

    /* Topbar */
    --topbar-bg: #062b33;
  }

  /* Grundfläche */
  body{
    background: radial-gradient(circle at top, #062b33 0, #020b0e 55%, #000000 100%);
    color: var(--text-main);
  }

  /* Topbar / Kopfbereich */
  .topbar,
  header.ak-header{
    background: var(--topbar-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  }

  /* Kacheln auf der Startseite */
  .tile,
  .tile-inner{
    background: var(--surface-card);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-soft);
  }

  .tile h2,
  .tile-title{
    color: var(--text-main);
  }

  /* Listen-Karten (Kategorie-Ansichten) */
  .card,
  .question-card,
  .in-list .tile{
    background: var(--surface-card);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-soft);
    color: var(--text-main);
  }

  .card h2,
  .question-card h2{
    color: var(--text-main);
  }

  /* Buttons */
  .btn-primary,
  .btn-main{
    background: var(--accent-strong);
    color: #ffffff;
    border-color: transparent;
  }

  /* Suchfeld / Filter / Zurück-Buttons */
  .search-input,
  .filter-input,
  .top-controls input[type="search"]{
    background: var(--field-bg);
    border-color: var(--field-border);
    color: var(--text-main);
  }

  .btn-ghost,
  .btn-outline,
  .back-button{
    background: transparent;
    border-color: var(--field-border);
    color: var(--text-soft);
  }

  /* Tags / Chips */
  .tag-pill,
  .tag,
  .chip{
    background: var(--chip-bg);
    border-color: var(--chip-border);
    color: var(--text-soft);
  }
  
  /* Kategorie-Badge im Listen-Header – Darkmode nutzt die Kategorie-Farbe */
  .in-list #catLabel{
    border-color: var(--cat-accent) !important;
    color: var(--text-main);
  }

    /* farbiger Streifen unter dem Kategorie-Header – gleiche Kategorie-Farbe */
  #catSubbar::after{
    background: var(--cat-accent);
  }

  /* Kleinere Textkontraste */
  .subheadline,
  .hint,
  .muted,
  .card .meta{
    color: var(--text-muted);
  }
  /* --- Darkmode Feinschliff AlltagsKompass 20.11.2025 --- */

  /* Home-Tiles: Text richtig hell */
  .tile span,
  .tile h3,
  .tile [data-i18n^="tile."] {
    color: var(--text-main);
  }

  /* Kartenüberschriften + Antworten */
  .card h3 {
    color: var(--text-main);
  }
  .card .answer {
    color: var(--text-soft);
  }

  /* Importance-Legende unter den Tiles */
  .importance-legend {
    color: var(--text-muted);
  }
  .importance-legend .legend-label {
    color: var(--text-main);
  }

  /* Subnav-Leiste (Zurück / Filter / Suche) */
  #backBtn,
  #filterToggle {
    background: var(--field-bg);
    border-color: var(--field-border);
    color: var(--text-main);
  }

  #search {
    background: var(--field-bg);
    border-color: var(--field-border);
    color: var(--text-main);
  }
  #search::placeholder {
    color: var(--text-muted);
  }

 /* EN / Feedback im Darkmode in Topbar – Variante B (weiß wie Feedback) */

body.dark #langToggle:hover,
body.dark #langToggle:focus-visible,
body.dark #feedbackBtn:hover,
body.dark #feedbackBtn:focus-visible {
  background: #f3faf8;
  box-shadow: 0 0 0 2px rgba(0, 197, 150, .45);
}

/* ===== Darkmode Feinschliff – Filter & Kategorien (20.11.2025) ===== */

/* 1) Filter-Tags (Chips) im Darkmode angleichen */
body.dark .filter-tags .tag {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e8e8e8 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Hover / active Zustand der Tags */
body.dark .filter-tags .tag.active {
  background: #009b7a !important;
  border-color: #00c597 !important;
}

/* 2) "Meine Favs" / "Alles anzeigen" Buttons im Darkmode */
body.dark .filter-top button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e8e8e8 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark .filter-top button.active {
  background: #006b57 !important;
  border-color: #00c597 !important;
  color: #fff !important;
}

/* 3) Suchfeld im Filterbereich */
body.dark #searchInput {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 4) Aktive Kategorie oben (Kachel mit Icon) dezenter */
body.dark .catActive {
  background: rgba(0, 255, 200, 0.04) !important;
  box-shadow: inset 0 0 0 1px #00c59766 !important;
}

/* Fix: EN- und Feedback-Button auch im Kategorien-Screen hell anzeigen */
.topbar button#langToggle,
.topbar button#feedbackBtn {
  background: #fff !important;
  border-color: #d0d6db !important;
  color: #03141c !important;
}

/* EN Toggle bleibt hell, auch wenn aktiv */
body.dark #langToggle.active,
body.dark #langToggle:active {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: transparent !important;
  box-shadow:
      0 0 0 2px rgba(0, 197, 150, .45),
      0 0 0 1px rgba(0, 0, 0, .05);
}

/* ===== Finaler Fix: Sprach-Toggle im Darkmode immer hell ===== */
body.dark .topbar button#langToggle,
body.dark .topbar button#langToggle:hover,
body.dark .topbar button#langToggle:focus,
body.dark .topbar button#langToggle:active,
body.dark .topbar button#langToggle.is-active,
body.dark .topbar button#langToggle[aria-pressed="true"] {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: #d0e2e0 !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

/* === FINALER FIX: EN/Feedback bleiben im Darkmode immer hell (auch beim Tippen) === */
@media (prefers-color-scheme: dark) {
  /* Grundzustand in der Topbar */
   /* Hover / gedrückt / „aktiv“ / aria-pressed – alles hell lassen */
  .topbar #langToggle:is(:hover, :active, .active, [aria-pressed="true"]),
  .topbar #feedbackBtn:is(:hover, :active, .active, [aria-pressed="true"]) {
    background: #ffffff !important;
    color: var(--ink, #03141c) !important;
    border: 1px solid #00c597 !important;
    box-shadow:
      0 0 0 2px rgba(0,197,150,.45),
      0 0 0 1px rgba(0,0,0,.04);
  }
}

/* === Quick-Fix 21.11.2025 – Filter & Home (überarbeitet) ==== */

/* B) Darkmode-Feinschliff für Filter + Titel */
@media (prefers-color-scheme: dark){

  /* 1) "Alles anzeigen"-Chip im Filter – Text weiß */
  .chips .chip.show-all,
  .chips .chip.show-all.active{
    color:#ffffff !important;
  }

  /* 2) Buttons "Zurück" + "Filter ausblenden" – Text schwarz, Button hell */
  #backBtn,
  #filterToggle{
    color:#071b20 !important;       /* fast schwarz */
    background:#f9fdfc !important;  /* hell wie Filter-Hintergrund */
    border-color:#d8e7e3 !important;
  }

 /* 3) Home-Titel im Darkmode weiß */
	body.dark .topbar h1,
	 body.dark #appTitle{
	 color:#ffffff !important;
 }
}

/* Update-Chronik – Hinweis-Streifen auf der Startseite */
.update-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 16px 8px;
  padding: 8px 16px;           /* hier: niedriger machen */
  border-radius: 999px;
  background: rgba(7, 40, 52, .9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  color: var(--text-soft);
  font-size: 15px;
  cursor: pointer;
}

.update-strip .update-icon {
  font-size: 18px;
}

/* Icon vorne */
.update-link-icon{
  font-size:18px;
}

/* Text nimmt den ganzen restlichen Platz */
.update-link-label{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Darkmode – etwas dunkler, kein grelles Weiß */
body.dark .update-link{
  background:rgba(4,35,43,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
}

/* Icon in der Update-Leiste (Uhr) */
.update-link .update-icon{
  font-size:18px;
}

body.dark .update-link{
  background:rgba(0,0,0,0.25);
  border-color:#0e2f36;
  color:var(--text-main, #f5fffd);
}

.update-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:8px;
}

/* ===== Vollbild-Ansicht: Update-Chronik ===== */

#updateLog {
  padding-top: 8px;
  padding-bottom: 72px; /* etwas Luft über dem Footer */
}

#updateLog h2#updateLogTitle {
  margin-bottom: 4px;
}

#updateLog .update-intro {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Legende für Kategorien in der Update-Chronik */

.update-legend {
  margin-top: 6px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.8rem;
  color: var(--text-muted, #5b6b76);
}

.update-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.update-legend .update-cat-icon {
  font-size: 1rem;
}

/* User-Chronik – Abstand unter der Liste */
.userlog-actions {
  margin-top: 16px;
}

.update-entry{
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.05);
  padding:12px 14px;
  background:rgba(255,255,255,0.98);
  box-shadow:0 2px 4px rgba(0,0,0,0.04);
  color: var(--text-main, #062b35); /* NEU: bessere Lesbarkeit im Lightmode */
}

body.dark .update-entry{
  background:rgba(3,17,22,0.96);
  border-color:#0a2b33;
  color: var(--text-main, #e4fffb); /* NEU: Text in Darkmode richtig sichtbar */
}

/* Detail-Ansicht der Update-Chronik */

.update-entry-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
  font-size:12px;
  color:var(--text-muted, #59737e);
}

.update-version{
  font-weight:600;
  color:var(--accent-strong, #00c597);
}

.update-title{
  margin:0 0 4px 0;
  font-size:14px;
  font-weight:600;
}

/* Liste der Änderungen */

.update-items{
  list-style:none;
  padding:0;
  margin:0;
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.update-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.update-cat-icon{
  flex-shrink:0;
  line-height:1.3;
}

.update-text{
  flex:1;
}

.update-entry-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
  font-size:12px;
  color:var(--text-muted, #59737e);
}

.update-version{
  font-weight:600;
  color:var(--accent-strong, #00c597);
}

.update-entry h3{
  margin:0 0 4px 0;
  font-size:14px;
}

.update-entry ul{
  margin:4px 0 0 0;
  padding-left:18px;
  font-size:13px;
}

/* Update-Button auf Home-Seite */
.update-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
}

/* Icon im Button */
.update-button i {
  font-size: 20px;
}

/* Hover */
.update-button:hover {
  background: rgba(255,255,255,0.14);
}

.changelog-item {
  padding: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  margin-bottom: 16px;
}

.changelog-item h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}
/* ===== Update-Chronik Teaser auf der Startseite ===== */
.update-strip{
  margin: 16px 0 24px;
}

/* Pill wie Suchleiste, gut lesbar */
.update-link{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.03);
  background:rgba(245,251,250,0.96);
  box-shadow:0 6px 18px rgba(3,63,70,0.16);
  font-size:14px;
  font-weight:500;
  color:#06413a;
  cursor:pointer;
}

body.dark .update-link{
  background:rgba(4,32,38,0.96);
  border-color:rgba(144,234,214,0.4);
  box-shadow:0 10px 26px rgba(0,0,0,0.55);
  color:#f5fffd;
}

.update-link .update-icon{
  font-size:17px;
  opacity:0.9;
}

.update-link-label{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0.9;
}

/* App-Version unterhalb des Inhalts */
.app-meta{
  max-width: var(--page-max, 960px);
  margin: 0 auto;
  padding: 8px 16px 0;
  font-size: 12px;
  color: var(--muted, #5b6b76);
}

/* Wichtigkeits-Legende unterhalb der Kacheln */
.importance-legend{
  max-width: var(--page-max, 960px);
  margin: 12px auto 4px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-soft, #c9d4d9);
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.importance-legend .legend-title{
  font-weight: 600;
  color: var(--text-main, #fff);
}

.importance-legend .legend-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.importance-legend .dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.importance-legend .dot.high{ background: var(--imp-high); } /* sehr wichtig */
.importance-legend .dot.med { background: var(--imp-med);  } /* wichtig */
.importance-legend .dot.low { background: var(--imp-low);  } /* nice to have */

/* ===== Modale Dialoge: Welcome / Feedback / Legende ===== */

dialog.modal {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;         /* kein hässlicher Kasten */
}

dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.45); /* leichter Dark-Overlay */
}

/* Kartenartiger Inhalt im Dialog */
.modal-inner {
  background: var(--card, #ffffff);
  color: var(--ink, #152028);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  padding: 18px 20px 16px;
  width: min(640px, calc(100vw - 32px));
  border: 1px solid rgba(0, 0, 0, 0.07);
}

/* Kopfzeile mit Titel + X */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

/* X-Button oben rechts */
.icon-btn {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

/* Textbereich / Feld */
.modal-inner p {
  margin: 8px 0 0;
  font-size: 0.96rem;
  line-height: 1.5;
}

/* Button-Zeile unten */
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* Buttons im Dialog (Welcome / Feedback) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  font: inherit;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn.primary {
  background: var(--brand, #1aa37a);
  color: #ffffff;
  border-color: var(--brand, #1aa37a);
}

.btn.secondary {
  background: #e6f7f3;
  color: #0b6050;
  border-color: #bfe9df;
}

/* ===== Buttons unter dem Home-Titel ===== */
.update-actions{
  display:flex;
  gap:12px;
  margin: 12px 0 20px;
}

.update-actions .top-btn{
  background:#ffffff;
  border:1px solid #e1ecea;
  color:#0a3630;
  padding:8px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,0.08);
}

body.dark .update-actions .top-btn{
  background:#062b34;
  border:1px solid #0d404f;
  color:#eefaf9;
  box-shadow:0 4px 12px rgba(0,0,0,0.45);
}

.update-actions .top-btn:active{
  transform:scale(0.97);
}

/* ===== Home-Buttons: Updates / Meine Chronik wie EN/Feedback ===== */

/* Grundstil wie EN / Feedback */
#updatesBtn,
#userLogBtn{
  background: var(--card, #fff) !important;
  color: var(--ink, #162028) !important;
  border: 1px solid var(--border, #d0d6db) !important;
  border-radius: 10px;
  padding: 6px 12px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Hover wie Feedback */
#updatesBtn:hover,
#userLogBtn:hover{
  filter: none !important;
  background: rgba(26,163,122,0.12) !important;
  border-color: rgba(26,163,122,0.35) !important;
}

/* Fokus / Active wie Feedback */
#updatesBtn:focus,
#updatesBtn:active,
#userLogBtn:focus,
#userLogBtn:active{
  background: var(--card, #fff) !important;
  border-color: var(--border, #d0d6db) !important;
  outline: 2px solid var(--brand, #1aa37a);
  outline-offset: 2px;
}

#updatesBtn:focus:not(:focus-visible),
#userLogBtn:focus:not(:focus-visible){
  outline: none !important;
}

/* === Subnav-Buttons (Zurück / Filter / Meine Favs) vereinheitlichen === */
.subnav.compact button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #d0e3dd;
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* Dark Mode */
body.dark .subnav.compact button {
  background: #062b34;
  border-color: #0d404f;
  color: #f3fffd;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}

/* === Meine Favs soll EXAKT wie Zurück & Filter aussehen === */
.subnav.compact #favToggle {
  background: #ffffff;
  border: 1px solid #d0e3dd;
  border-radius: 12px;   /* exakt wie deine anderen Subnav Buttons */
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  color: inherit;
  font-weight: normal;   /* NICHT fetter, damit absolut identisch */
}

/* Dark Mode */
body.dark .subnav.compact #favToggle {
  background: #062b34;
  border-color: #0d404f;
  color: #f3fffd;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}

/* "Meine Favs" exakt so sichtbar wie Zurück/Filter machen */
.subnav.compact #favToggle {
  opacity: 1 !important;
  color: #14353b !important;   /* gleiche Textfarbe wie die anderen */
}

/* Dark Mode */
body.dark .subnav.compact #favToggle {
  opacity: 1 !important;
  color: #f3fffd !important;
}
/* --- Meine Favs exakt pixelgleich zu Zurück & Filter --- */
.subnav.compact #favToggle {
  border-radius: 10px !important;      /* gleiche Rundung */
  padding: 6px 18px !important;        /* gleiche Breite-Wirkung */
  font-size: 14px !important;          /* gleiche Schriftgröße */
}

/* Fix: Textfarbe in der Update-Chronik (Liste) */
#updateLogList {
  color: var(--text-main, #062b35) !important;
}

body.dark #updateLogList {
  color: var(--text-main, #e4fffb) !important;
}

/* Fix: Textfarbe nur innerhalb der Update-Karten */

.update-entry,
.update-entry * {
  color: #062b35 !important;         /* guter Kontrast im Lightmode */
}

body.dark .update-entry,
body.dark .update-entry * {
  color: #e4fffb !important;         /* sehr hell im Darkmode */
}

/* Versionsnummer extra Akzentfarbe */
.update-version {
  color: var(--accent-strong, #00c597) !important;
}