/* Ergänzungen zum Tailwind-CDN im indivital-Stil (Farben siehe templates/layouts/kopf.php) */

[x-cloak] { display: none !important; }

/* Logo-Schrift für „Feel Good": Century Gothic wie im indivital-Logo (lizenzpflichtig, daher nur,
   wenn auf dem Rechner installiert) – sonst die freie, sehr ähnliche Questrial (SIL OFL, mitgeliefert) */
@font-face {
    font-family: 'Logo';
    src: local('Century Gothic'), local('CenturyGothic'),
         url('../fonts/Questrial-Regular.ttf') format('truetype');
    font-display: swap;
}
.logo-schrift { font-family: 'Logo', 'Century Gothic', 'Questrial', Arial, sans-serif; }

/* „Feel Good" wie „individuell" im Logo: am 2026-10-15 aus dem Logo vermessen –
   „individuell" = 55 von 219 px Bildhöhe → bei 40 px Logohöhe ≈ 13,2 px Century Gothic;
   Breite im Logo entspricht der Schrift ohne Sperrung → normale Laufweite; Farbe Logo-Braun */
.logo-zusatz {
    font-size: 13.2px;
    line-height: 1;
    letter-spacing: normal;
    color: #462a0c;
}

.karte {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.nav-link { color: #565b45; }
.nav-link:hover { color: #704d30; text-decoration: underline; }

.knopf {
    display: inline-block;
    background: #565b45;
    color: #ffffff;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 500;
}
.knopf:hover { background: #3e4232; }

.eingabe {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}
/* Dashboard-Kacheln: jede Kachel belegt 7 Zeilen des gemeinsamen Rasters (Subgrid) →
   Wert, Trend, Verlauf usw. liegen in allen Kacheln einer Reihe auf gleicher Höhe */
.kacheln > .kachel {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    row-gap: 0.25rem;
}

/* Trend-Abzeichen mit gut sichtbarem Pfeil */
.trend-abzeichen {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem 0.2rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}
.trend-abzeichen .trend-pfeil { font-size: 1.15rem; line-height: 1; }
.trend-klein { font-size: 0.75rem; font-weight: 500; padding: 0.1rem 0.5rem 0.1rem 0.4rem; }
.trend-klein .trend-pfeil { font-size: 0.95rem; }
.trend-besser    { background: rgba(86, 91, 69, 0.12);   color: #565b45; }   /* olive */
.trend-schlechter{ background: rgba(112, 77, 48, 0.12);  color: #704d30; }   /* akzent */
.trend-stabil    { background: #f3f4f6;                  color: #4b5563; }
.trend-leer      { background: transparent; color: #9ca3af; font-weight: 400; padding-left: 0; }

.eingabe:focus { outline: none; border-color: #565b45; box-shadow: 0 0 0 2px #c8cdb8; }