/* ═══════════════════════════════════════════════════════════════
   Hettstedt Live – DWD Wetter Widget v1.0.4
   ═══════════════════════════════════════════════════════════════ */

.hlwetter-wrap {
    font-family: inherit;
    max-width: 100%;
    margin: 1.2rem 0;
}

/* ══ 3 Kacheln – immer nebeneinander ══ */
.hlw-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

/* ══ Einzelne Kachel ══ */
.hlw-card {
    background: linear-gradient(160deg, #1a3a5c 0%, #1e5080 100%);
    color: #fff;
    border-radius: 12px;
    padding: 10px 5px 12px;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.2);
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
    min-width: 0;
    /* Alle Kacheln gleich hoch + Inhalt untereinander ausgerichtet */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hlw-card::before {
    content:'';position:absolute;top:-20px;right:-20px;
    width:65px;height:65px;background:rgba(255,255,255,.05);
    border-radius:50%;pointer-events:none;
}
.hlw-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.28); }

.hlw-card--today {
    background: linear-gradient(160deg,#1565c0 0%,#1976d2 100%);
    border: 1.5px solid rgba(255,255,255,.18);
}

/* Wochentag */
.hlw-card__day {
    font-size:.78rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.07em;color:rgba(255,255,255,1);margin-bottom:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.hlw-card--today .hlw-card__day { color:#bbdefb; }

/* Datum */
.hlw-card__date {
    font-size:.63rem;color:rgba(255,255,255,.62);margin-bottom:5px;white-space:nowrap;
}

/* Wetter-Emoji */
.hlw-card__icon {
    font-size:1.9rem;line-height:1;margin:2px 0 3px;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
@media (max-width:360px) { .hlw-card__icon { font-size:1.6rem; } }

/* Wetterbeschreibung */
.hlw-card__desc {
    font-size:.68rem;color:rgba(255,255,255,.9);margin-bottom:5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;
}

/* ── Aktuelle Temperatur / Platzhalter (Alignment aller Kacheln) ── */
.hlw-card__current {
    display:flex;align-items:center;justify-content:center;gap:4px;
    background:rgba(255,255,255,.12);border-radius:6px;
    padding:3px 6px;margin:0 4px 6px;
    width: calc(100% - 8px);
    box-sizing: border-box;
    min-height: 26px;  /* gleiche Höhe wie Heute-Badge */
}
/* Platzhalter in Kacheln 2+3: dezent, kein echter Wert */
.hlw-card__current--placeholder {
    background: rgba(255,255,255,.04);
    border: 1px dashed rgba(255,255,255,.15);
}
.hlw-card__current--placeholder .hlw-current__label {
    color: rgba(255,255,255,.3);
    font-style: italic;
}
.hlw-current__label {
    font-size:.58rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.05em;color:rgba(255,255,255,.65);
}
.hlw-current__temp {
    font-size:.88rem;font-weight:700;color:#fff;
}

/* ── Temperaturen ── */
.hlw-card__temps {
    display:flex;flex-direction:column;align-items:center;gap:2px;
    font-size:.84rem;font-weight:700;
    width:100%;
}
@media (max-width:360px) { .hlw-card__temps { font-size:.7rem; } }
.hlw-temp--max { color:#ffcc80; }
.hlw-temp--min { color:#90caf9; }

/* ── UV-Index ── */
.hlw-card__uv {
    display:flex;align-items:center;justify-content:center;gap:3px;
    margin-top:auto; /* nach unten drücken: UV immer am Kartenende */
    padding:3px 5px;
    width:calc(100% - 8px);box-sizing:border-box;
    background:rgba(0,0,0,.18);border-radius:6px;
    border-top:2px solid var(--uv-color,#ffeb3b);
}
.hlw-uv__icon  { font-size:.75rem;line-height:1; }
.hlw-uv__value { font-size:.7rem;font-weight:700;color:#fff; }
.hlw-uv__label { font-size:.58rem;color:rgba(255,255,255,.75);margin-left:1px; }

/* ════════════════════════════════════════════════════════════════
   WARNUNGEN (klickbar, nur schwerste)
   ════════════════════════════════════════════════════════════════ */
.hlw-alerts {
    display:block;text-decoration:none;color:inherit;cursor:pointer;
    border-radius:10px;overflow:hidden;margin-bottom:10px;
    box-shadow:0 3px 12px rgba(0,0,0,.15);
}
.hlw-alerts:hover { box-shadow:0 4px 18px rgba(0,0,0,.22); }
.hlw-alerts:hover .hlw-alerts__header { filter:brightness(1.1); }

.hlw-alerts__header {
    display:flex;align-items:center;gap:7px;
    padding:9px 14px;font-size:.82rem;font-weight:600;color:#fff;
}
.hlw-alerts__count { margin-left:auto;font-size:.72rem;font-weight:400;opacity:.85;white-space:nowrap; }
.hlw-alerts__arrow { font-size:1rem;flex-shrink:0; }

.hlw-alert__body { padding:10px 14px 12px; }
.hlw-alert__title { font-weight:700;font-size:.85rem;line-height:1.3;margin-bottom:3px; }
.hlw-alert__time  { font-size:.72rem;opacity:.65;font-style:italic;margin-top:3px; }

/* Severity-Farben */
a.hlw-warn--minor    { background:#fffde7; }
a.hlw-warn--moderate { background:#fff3e0; }
a.hlw-warn--severe   { background:#ffebee; }
a.hlw-warn--extreme  { background:#880e4f;color:#fff; }
a.hlw-warn--minor    .hlw-alerts__header { background:#f9a825; }
a.hlw-warn--moderate .hlw-alerts__header { background:#e65100; }
a.hlw-warn--severe   .hlw-alerts__header { background:#b71c1c; }
a.hlw-warn--extreme  .hlw-alerts__header { background:#4a0030; }
a.hlw-warn--extreme  .hlw-alert__body    { color:#fff; }

/* ════════════════════════════════════════════════════════════════
   POLLENFLUG
   ════════════════════════════════════════════════════════════════ */
.hlw-pollen {
    background:#f1f8e9;border:1px solid #c5e1a5;
    border-radius:10px;padding:10px 14px 12px;
    margin-bottom:8px;
}
.hlw-pollen__header {
    display:flex;align-items:center;gap:7px;margin-bottom:8px;
    font-size:.85rem;
}
.hlw-pollen__icon { font-size:1rem; }
.hlw-pollen__region {
    margin-left:auto;font-size:.68rem;color:#666;font-style:italic;
}

/* Pollen-Grid: 2 Spalten */
.hlw-pollen__grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px 12px;
}
@media (max-width:400px) { .hlw-pollen__grid { grid-template-columns:1fr; } }

.hlw-pollen__item {
    display:grid;
    grid-template-columns:52px 1fr 72px;
    align-items:center;
    gap:4px;
}
.hlw-pollen__name {
    font-size:.76rem;font-weight:600;color:#222;white-space:nowrap;
}
.hlw-pollen__bar {
    height:9px;background:#e0e0e0;border-radius:5px;overflow:hidden;
}
.hlw-pollen__fill {
    display:block;height:100%;border-radius:5px;
    transition:width .3s ease;
}
.hlw-pollen__level {
    font-size:.7rem;font-weight:700;text-align:right;white-space:nowrap;
}

/* Keine-Belastung-Banner */
.hlw-pollen--none {
    display:flex;align-items:center;gap:8px;
    font-size:.82rem;color:#558b2f;
    background:#f1f8e9;border:1px solid #c5e1a5;
    border-radius:10px;padding:8px 14px;margin-bottom:8px;
}

/* ════════════════════════════════════════════════════════════════
   Quellenangabe & Fehler
   ════════════════════════════════════════════════════════════════ */
.hlw-source {
    font-size:.62rem;color:#aaa;text-align:right;margin-top:4px;
}
.hlw-source a { color:#aaa;text-decoration:underline; }

.hlw-error {
    background:#fff3cd;border:1px solid #ffc107;border-radius:8px;
    padding:10px 14px;color:#856404;font-size:.88rem;
}

/* ════════════════════════════════════════════════════════════════
   POLLEN-DROPDOWN (>4 Sorten)
   ════════════════════════════════════════════════════════════════ */
.hlw-pollen__more {
    margin-top: 6px;
}

/* Summary = der klickbare Toggle-Button */
.hlw-pollen__toggle {
    list-style: none;          /* Standard-Dreieck entfernen */
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 7px 10px;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 600;
    color: #2e7d32;
    user-select: none;
    transition: background .2s ease;
}
.hlw-pollen__toggle::-webkit-details-marker { display: none; }

.hlw-pollen__toggle:hover {
    background: #c8e6c9;
}

.hlw-pollen__toggle-icon {
    font-size: .85rem;
    line-height: 1;
    transition: transform .25s ease;
}
.hlw-pollen__toggle-text {
    flex: 1;
}
.hlw-pollen__toggle-arrow {
    font-size: .6rem;
    transition: transform .25s ease;
    color: #388e3c;
}

/* Wenn geöffnet: Pfeil drehen, + zu − */
details[open] .hlw-pollen__toggle-arrow {
    transform: rotate(180deg);
}
details[open] .hlw-pollen__toggle-icon {
    content: "－";
}
details[open] .hlw-pollen__toggle {
    border-radius: 8px 8px 0 0;
    border-bottom: none;
    background: #c8e6c9;
}

/* Extra-Grid mit Animation */
.hlw-pollen__grid--extra {
    border: 1px solid #a5d6a7;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 0 4px;
    background: #f9fbe7;
    animation: hlw-slide-down .25s ease;
}

@keyframes hlw-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* JS-gestützter Toggle-Text (optional, falls JS verfügbar) */
details[open] .hlw-pollen__toggle-text-close { display: inline; }
details[open] .hlw-pollen__toggle-text-open  { display: none; }
details:not([open]) .hlw-pollen__toggle-text-close { display: none; }
details:not([open]) .hlw-pollen__toggle-text-open  { display: inline; }