/* Seitenspezifische Stile. Farben kommen aus hc_theme.css (var(--hc-…)),
   damit Hell-/Dunkel-Modus überall greift – keine Hexwerte hartcodieren. */

/* index.html */

/* === Suche === */
.search-wrapper { position: relative; max-width: 700px; margin: 0 auto; }
#search-input {
    width: 100%;
    padding: 14px 20px;
    font-size: 17px;
    color: var(--hc-ink);
    background: var(--hc-card);
    border: 1px solid var(--hc-line);
    border-radius: 12px;
    box-shadow: var(--hc-shadow);
}
#search-input::placeholder { color: var(--hc-muted); }
.results-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--hc-card);
    border: 1px solid var(--hc-line);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--hc-shadow-lg);
    padding: 10px;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}
.results-box h3 {
    font-size: 14px; margin: 10px 0 5px;
    border-bottom: 1px solid var(--hc-line);
    padding-bottom: 2px; color: var(--hc-ink);
}
.results-box a {
    display: block;
    padding: 8px 10px;
    margin: 4px 0;
    text-decoration: none;
    color: var(--hc-ink);
    border-radius: 6px;
    transition: background 0.2s;
}
.results-box a:hover { background: var(--hc-hover); }
.results-box p { margin: 5px 10px; color: var(--hc-muted); }

/* === Karten === (Basis-Styling in hc_theme.css) */
h2 { font-size: 1.6rem; font-weight: 600; color: var(--hc-ink); margin-bottom: 1rem; }

@media (min-width: 768px) { /* ab md */
    .scroll-box {
        max-height: 550px;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .scroll-box::-webkit-scrollbar {
        width: 6px;
    }
    .scroll-box::-webkit-scrollbar-thumb {
        background-color: var(--hc-line);
        border-radius: 3px;
    }
}

/* News-Artikel füllen Breite der Card */
.news-preview .card { width: 100%; }

/* Allgemeine Widget-Stile */
.hc-widget-head {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--hc-ink);
    text-align: center;
    margin-bottom: 0.75rem;
    letter-spacing: 0.3px;
}

/* Widget Inhalt */
#widget1, #widget2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    color: var(--hc-ink);
}

/* Loader Animation */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.loader {
    border: 4px solid var(--hc-line);
    border-top: 4px solid var(--hc-accent);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Aufgaben- oder Vertragslisten */
.hc-widget-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem 0;
}
.hc-widget-list li {
    padding: 0.3rem 0.5rem;
    background: var(--hc-card-2);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s ease;
}
.hc-widget-list li:hover {
    background: var(--hc-hover);
}

/* Verlinkung unten */
.hc-widget-link {
    margin-top: auto;
    text-align: center;
    font-size: 0.9rem;
}
.hc-widget-link a {
    color: var(--hc-accent-ink);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}
.hc-widget-link a:hover {
    color: var(--hc-accent-hover);
}

/* Responsive */
@media (max-width: 768px) {
    .hc-widget-head {
        font-size: 1rem;
    }
    #widget1, #widget2 {
        padding: 0.75rem;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ENDE index.html */

/* news_detail.html */
.comment-box {
    background-color: var(--hc-card);
    border: 1px solid var(--hc-line);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
    position: relative;
}

.comment-box:hover {
    box-shadow: var(--hc-shadow);
}

/* Profilbilder */
.comment-box img {
    border-radius: 50%;
    object-fit: cover;
}

/* Dropdown-Button: kleiner, dezenter Button */
.comment-box .dropdown .btn {
    background-color: transparent;
    border: none;
    padding: 0.25rem;
    color: var(--hc-muted);
    transition: color 0.2s ease;
}

.comment-box .dropdown .btn:hover {
    color: var(--hc-ink);
}

/* Dropdown-Menü: leicht abgerundete Ecken, sanfte Schatten */
.comment-box .dropdown-menu {
    border-radius: 0.5rem;
    box-shadow: var(--hc-shadow);
}

/* Kommentartext */
.comment-box p {
    margin-bottom: 0;
}

/* Optional: kleine Animation für das Dropdown */
.dropdown-menu {
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

/* Bei Hover auf Kommentar leicht hervorheben */
.comment-box:hover .dropdown .btn i {
    transform: scale(1.1);
}

/* Karte: Artikel */
.article-card {
    background-color: var(--hc-card);
    border-radius: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
    box-shadow: var(--hc-shadow-lg);
}

/* Artikelbild */
.article-img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* Mobile: Bild oben */
@media (max-width: 767px) {
    .article-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .article-img {
        width: 100%;
        height: auto;
        margin-bottom: 0.5rem;
    }
}

/* ENDE news_detail.html */

/* apps.html – Design „Launchpad" (v0.60) */

/* Live-Suche im Seitenkopf */
.app-search { position: relative; }
.app-search input {
    width: 240px;
    max-width: 60vw;
    padding: 7px 14px 7px 36px;
    font-size: 0.9rem;
    color: var(--hc-ink);
    background: var(--hc-card);
    border: 1px solid var(--hc-line);
    border-radius: 20px;
}
.app-search input::placeholder { color: var(--hc-muted); }
.app-search input:focus {
    outline: 2px solid var(--hc-accent-soft);
    outline-offset: 1px;
    border-color: var(--hc-accent);
}
.app-search .bi-search {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hc-muted);
    font-size: 0.85rem;
}

/* Gruppen-Trennlinie mit Zähler-Chip */
.app-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1.8rem 0 1rem;
}
.app-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hc-muted);
    white-space: nowrap;
}
.app-section-count {
    background: var(--hc-card-2);
    border: 1px solid var(--hc-line);
    border-radius: 10px;
    padding: 0 8px;
    font-size: 0.7rem;
    color: var(--hc-muted);
}
.app-section-line {
    flex: 1;
    height: 1px;
    background: var(--hc-line);
}

/* Kachel-Grid */
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 18px 10px;
}

.app-tile {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--hc-ink);
}
.app-tile:hover { color: var(--hc-ink); }

.app-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 8px;
    position: relative;
    background-color: var(--hc-card);
    border: 1px solid var(--hc-line);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--hc-shadow);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.app-tile:hover .app-icon {
    transform: translateY(-4px);
    border-color: var(--hc-accent);
    box-shadow: var(--hc-shadow-lg);
}

.app-icon img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}
.app-icon-fallback {
    font-size: 2.2rem;
    color: var(--hc-muted);
}

/* ↗-Abzeichen externer Apps */
.app-ext-badge {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--hc-card-2);
    border: 1px solid var(--hc-line);
    color: var(--hc-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

.app-name {
    display: block;
    font-size: 0.85rem;
}
.app-tile:hover .app-name { font-weight: 600; }

@media (max-width: 576px) {
    .app-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
/* ENDE apps.html */

/* archiv.html
   Keine Bewegung beim Ueberfahren (0.90): die Karte hebt sich nicht mehr
   an, sie bekommt nur einen Rahmen. Outline statt Schatten, weil
   .shadow-sm den Schatten mit !important festhaelt. */
.hover-card:hover {
    outline: 1px solid color-mix(in srgb, var(--hc-muted) 45%, transparent);
}

.news-card-img {
    width: 100%;
    height: 180px; /* feste Höhe, kann angepasst werden */
    object-fit: cover;
    border-top-left-radius: 0.375rem; /* passt zu Bootstrap Card */
    border-top-right-radius: 0.375rem;
}

/* News-Platzhalter ohne Bild (kein eigenes Bild + kein Admin-Override):
   Icon + Kategoriefarbe statt eines statischen Platzhalterbilds. Gemeinsam
   von Startseite (in .news-tile-media) und News-Archiv (in .news-card-img)
   genutzt - bewusst ohne eigene height-Regel, die Höhe kommt vom jeweiligen
   Container, sonst würde sich das hier mit z.B. .news-card-img's height:180px
   überschneiden. */
.news-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    width: 100%;
    background-color: var(--hc-card-2);
}
.news-img-placeholder i {
    font-size: 2rem;
    color: var(--hc-muted);
    opacity: .9;
}
.news-img-placeholder-cat {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .9;
}

/* ENDE archiv.html */

/* coming_soon.html */
.min-vh-70 {
    min-height: 70vh; /* zentriert vertikal auf großen Bildschirmen */
}

.list-group-item {
    background-color: transparent;
    border: none;
    padding-left: 0;
    padding-right: 0;
}

.btn-primary {
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.5rem;
}
/* ENDE coming_soon.html */

/* HC Standard-Apps */
.hc-status-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: gray;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    vertical-align: middle;
}
/* ENDE Standard-Apps */

/* Zentrale Klasse für JEDEN Knopf, der eine KI-Anfrage auslöst - Ampel,
   Kalorientracker, Trainingsrückblick, Rezepte, News-Kurzfassung.

   Sie trug bis 0.91.1014 das HomeCenter-Rot und sah damit aus wie jeder
   andere Akzent-Knopf; benutzt wurde sie nur in der Küche. Jetzt trägt sie
   die eigene KI-Farbe (--hc-ki, Bernstein) und steht überall dort, wo
   geklickt wird, was Geld kostet. Umgekehrt gilt: Was keine Anfrage
   auslöst, bekommt diese Klasse nicht. */
.ai-action-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: linear-gradient(135deg, var(--hc-ki) 0%, var(--hc-ki-hover) 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: .4rem 1rem;
    border-radius: 50px;
    box-shadow: 0 2px 10px var(--hc-ki-glow);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ai-action-btn:hover,
.ai-action-btn:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--hc-ki-glow);
    filter: brightness(1.06);
}
.ai-action-btn:active {
    transform: translateY(0);
    filter: brightness(.96);
}
.ai-action-btn:disabled,
.ai-action-btn[disabled] {
    opacity: .75;
    transform: none;
    box-shadow: none;
    cursor: default;
}
/* Kleine Fassung für Knopfleisten, in denen ein Pillen-Knopf zu breit wäre. */
.ai-action-btn--klein { padding: .25rem .7rem; font-size: .8rem; }
/* Runde Fassung für eine Zeile in einer Liste: dieselbe Farbe, dieselbe
   Bedeutung - nur ohne Beschriftung, weil daneben die Zeile steht. */
.ai-action-btn--icon {
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    justify-content: center; font-size: .8rem;
}

/* Wartezustand (0.91.1014): Solange die Anfrage läuft, ist der Knopf
   gesperrt und sagt das auch. Ohne diese Rückmeldung sah ein Klick auf eine
   Anfrage, die mehrere Sekunden braucht, wie ein Klick ins Leere aus - und
   ein zweiter Klick hätte ein zweites Mal gekostet. */
.ai-action-btn .ai-action-btn__spinner { display: none; }
.ai-action-btn.is-busy .ai-action-btn__spinner { display: inline-block; }
.ai-action-btn.is-busy .ai-action-btn__icon { display: none; }
.ai-action-btn__spinner {
    width: .85em; height: .85em; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: ai-action-spin .7s linear infinite;
}
@keyframes ai-action-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ai-action-btn__spinner { animation-duration: 2.4s; }
    .ai-action-btn { transition: none; }
    .ai-action-btn:hover, .ai-action-btn:focus { transform: none; }
}
/* ENDE KI-Aktions-Button */

/* ============================================================
   Bild-Upload mit Vorschau (hc-avatar-*)
   ------------------------------------------------------------
   Ersetzt Djangos rohen ClearableFileInput ("Aktuell: pfad.jpg"
   + Löschen-Checkbox + Dateidialog) durch eine anklickbare
   Vorschau. Trotz des Namens nicht nur für Personenbilder: auch
   für Titelbilder (News, Rezept, Kurs, KB-Kategorie) und
   App-Icons im Einsatz, dort mit shape="square"/"banner" statt
   des kreisrunden Vorgabewerts.
   Akzentfarbe per Modifier-Klasse: .hc-avatar-social (Lila, Social-
   Profil), .hc-avatar-kitchen (Grün, Rezeptverwaltung), ohne
   Modifier Standard-Rot (Benutzerprofil, News, KB, Kurs, Admin).
   Markup: home/_avatar_upload.html, Logik: js/avatar_upload.js
   ============================================================ */
.hc-avatar-row {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-wrap: wrap;
}

/* Die Vorschau ist selbst der Auslöser für den Dateidialog. */
.hc-avatar-btn {
    position: relative;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    display: block;
    line-height: 0;
}
.hc-avatar-btn:focus-visible {
    outline: 2px solid var(--hc-accent);
    outline-offset: 3px;
}
.hc-avatar-social .hc-avatar-btn:focus-visible {
    outline-color: var(--hc-social);
}
.hc-avatar-kitchen .hc-avatar-btn:focus-visible {
    outline-color: var(--hc-kitchen);
}

.hc-avatar-circle,
.hc-avatar-circle .hc-avatar-img,
.hc-avatar-circle .hc-avatar-empty,
.hc-avatar-circle .hc-avatar-overlay {
    width: 104px;
    height: 104px;
    border-radius: 50%;
}
.hc-avatar-square,
.hc-avatar-square .hc-avatar-img,
.hc-avatar-square .hc-avatar-empty,
.hc-avatar-square .hc-avatar-overlay {
    width: 104px;
    height: 104px;
    border-radius: .75rem;
}
.hc-avatar-banner,
.hc-avatar-banner .hc-avatar-img,
.hc-avatar-banner .hc-avatar-empty,
.hc-avatar-banner .hc-avatar-overlay {
    width: 100%;
    max-width: 320px;
    height: 92px;
    border-radius: .6rem;
}

.hc-avatar-img {
    object-fit: cover;
    display: block;
    background: var(--hc-card-2);
    border: 1px solid var(--hc-line);
}
.hc-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hc-card-2);
    border: 1px solid var(--hc-line);
    color: var(--hc-muted);
    font-size: 2.1rem;
    line-height: 1;
}

.hc-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    font-size: .64rem;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0;
    transition: opacity .15s ease;
}
.hc-avatar-overlay i {
    font-size: 1.25rem;
}
.hc-avatar-btn:hover .hc-avatar-overlay,
.hc-avatar-btn:focus-visible .hc-avatar-overlay {
    opacity: 1;
}

.hc-avatar-meta {
    min-width: 0;
}
.hc-avatar-hint {
    font-size: .74rem;
    color: var(--hc-muted);
    line-height: 1.5;
}
.hc-avatar-actions {
    display: flex;
    gap: .45rem;
    margin-top: .6rem;
    flex-wrap: wrap;
}
.hc-avatar-actions .btn {
    font-size: .8rem;
}

/* "Entfernen" bleibt zurückhaltend, bis man darauf zeigt. */
.hc-avatar-remove {
    border: 1px solid var(--hc-line);
    background: var(--hc-card);
    color: var(--hc-accent-ink);
}
.hc-avatar-remove:hover {
    background: var(--hc-accent-soft);
    border-color: var(--hc-accent);
    color: var(--hc-accent-ink);
}
.hc-avatar-pick {
    border: 1px solid var(--hc-line);
    background: var(--hc-card);
    color: var(--hc-ink);
}
.hc-avatar-pick:hover {
    background: var(--hc-hover);
    color: var(--hc-ink);
}
.hc-avatar-social .hc-avatar-remove {
    color: var(--hc-social-ink);
}
.hc-avatar-social .hc-avatar-remove:hover {
    background: var(--hc-social-soft);
    border-color: var(--hc-social);
    color: var(--hc-social-ink);
}
.hc-avatar-kitchen .hc-avatar-remove {
    color: var(--hc-kitchen-ink);
}
.hc-avatar-kitchen .hc-avatar-remove:hover {
    background: var(--hc-kitchen-soft);
    border-color: var(--hc-kitchen);
    color: var(--hc-kitchen-ink);
}
/* ENDE Bild-Upload mit Vorschau */