/* ═══════════════════════════════════════════════════════════
   ALPIN · heller Look im Stil des Matterhorn-Entwurfs
   Wird über inc/nav.php (oder im <head>) NACH responsive.css
   geladen und überschreibt die dunkle Glass-Optik von base.css.
   Zurück zum alten Look: diese Datei einfach nicht mehr laden.
═══════════════════════════════════════════════════════════ */

/* ── Schriften (lokal, kein externer Abruf) ── */
@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap;
             src:url('fonts/bebas-neue-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
             src:url('fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap;
             src:url('fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap;
             src:url('fonts/jost-latin-600-normal.woff2') format('woff2'); }

/* ── Palette hell ── */
:root {
    font-family:'Jost', 'Segoe UI', system-ui, sans-serif;
    --display:   'Bebas Neue', 'Segoe UI', sans-serif;

    --bg:        #ffffff;
    --ink:       #111111;
    --glass:     rgba(255,255,255,0.74);
    --glass2:    rgba(17,17,17,0.035);
    --glass-hi:  rgba(17,17,17,0.07);
    --border:    rgba(17,17,17,0.12);
    --border-h:  rgba(13,148,136,0.45);
    --blur:      blur(10px) saturate(140%);
    --text:      #111111;
    --text-2:    rgba(17,17,17,0.66);
    --text-3:    rgba(17,17,17,0.50);

    /* Teal bleibt Akzent, aber in Stufen, die auf Weiß lesbar sind */
    --teal-1:    #0d9488;
    --teal-2:    #0f766e;
    --teal-3:    #0d9488;
    --teal-4:    #115e59;
    --accent:    #0d9488;

    --radius:    4px;
    --radius-sm: 4px;
    --radius-lg: 6px;
    --shadow:    none;
    --shadow-teal: none;

    /* Wappen im Hintergrund – hier zentral einstellen */
    --wappen-opacity: 0.20;
    --wappen-blur:    8px;
}

html, body { background:var(--bg); color:var(--text); }
body { font-family:'Jost', 'Segoe UI', system-ui, sans-serif; }
a { color:var(--teal-2); }

/* Alte Farbkugeln aus */
.bg-canvas { display:none; }

/* ── Verschwommenes Wappen ── */
/* Seitlich rechts, läuft nach links und unten weich aus
   (gleiche Technik wie in der Turnsaal-Einteilung) */
.bg-wappen {
    position:fixed; z-index:0; pointer-events:none;
    right:-7vw; bottom:-10vh; height:96vh; aspect-ratio:474 / 576;
}
.bg-wappen img {
    height:100%; width:auto; display:block;
    filter:blur(var(--wappen-blur)) saturate(0.75);
    opacity:var(--wappen-opacity);
    -webkit-mask-image:radial-gradient(ellipse 75% 70% at 70% 60%, #000 32%, transparent 80%);
            mask-image:radial-gradient(ellipse 75% 70% at 70% 60%, #000 32%, transparent 80%);
}
@media (max-width:760px) {
    .bg-wappen { right:-32vw; bottom:-6vh; height:72vh; }
}
@media print { .bg-wappen { display:none !important; } }

/* Inhalt liegt immer über dem Wappen */
.desktop, .alp-hero, .alp-h, #ticker,
.vz-wrap, .nw-wrap, .bv-wrap, .wx-wrap, .eb-wrap { position:relative; z-index:1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KOPFLEISTE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mac-bar {
    position:sticky; top:0; height:auto; min-height:68px;
    padding:10px max(18px, calc((100vw - var(--maxw)) / 2 + 18px));
    background:rgba(255,255,255,0.82);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    font-size:0.9rem;
}
.alp-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.alp-logo {
    width:46px; height:46px; border-radius:50%; flex-shrink:0;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
}
.alp-logo .lucide { width:22px; height:22px; }
.alp-word { font-family:var(--display); font-size:1.7rem; letter-spacing:0.04em; line-height:1; }
.mac-bar .bar-right { color:var(--text-2); }
.mac-bar #mac-time { font-family:var(--display); font-size:1.35rem; letter-spacing:0.06em; color:var(--ink); }

/* Tabs als Pillen wie "Directions / Map / Chalet" */
.mac-tabs { gap:4px; flex-wrap:wrap; }
.mac-tab {
    font-size:0.88rem; font-weight:500; color:var(--ink);
    padding:9px 16px; min-height:40px; border-radius:999px; border:0;
}
.mac-tab .lucide { width:15px; height:15px; }
.mac-tab:hover { background:var(--glass-hi); color:var(--ink); }
.mac-tab.active { background:var(--ink); color:#fff; box-shadow:none; }
@media (max-width:1100px) { .mac-tab span { display:none; } .mac-tab { padding:9px 12px; } }

/* ── Handy: Leiste unten + Mehr-Sheet ── */
.tabbar { background:rgba(255,255,255,0.92); border-top:1px solid var(--border); }
.tabbar a, .tabbar button { color:var(--text-2); }
.tabbar a.active { color:var(--ink); }
.tabbar a.active .lucide { color:var(--accent); }
.tabbar span { font-size:0.66rem; font-weight:500; }
.sheet-bd { background:rgba(17,17,17,0.35); }
.sheet { background:rgba(255,255,255,0.97); }
.sheet a { color:var(--ink); }
.sheet a.active { background:rgba(13,148,136,0.08); color:var(--teal-2); }
.sheet a .lucide, .sheet a.active .lucide { color:var(--accent); }
@media (max-width:760px) {
    .mac-bar { min-height:58px; padding:8px 14px; }
    .alp-logo { width:40px; height:40px; }
    .alp-word { font-size:1.45rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO (nur Startseite)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.alp-hero { text-align:center; padding:clamp(44px, 8vh, 96px) 16px 10px; }
/* Eine Zeile: Schriftgröße folgt der Breite, nie Umbruch */
.alp-title {
    margin:0; font-family:var(--display); font-weight:400; color:var(--ink);
    font-size:clamp(54px, 13.5vw, 210px); line-height:0.9; letter-spacing:0.02em;
    white-space:nowrap;
}
.alp-sub {
    margin:14px 0 0; font-family:var(--display); color:var(--text-2);
    font-size:clamp(18px, 2.4vw, 30px); letter-spacing:0.12em;
}

/* Live-Temperatur als Pinsel-Label (wie „Hörnlihütte 3.260 m“) */
.alp-now {
    position:relative; display:inline-flex; align-items:baseline; gap:14px;
    margin-top:clamp(26px, 5vh, 46px); padding:14px 34px 12px 30px;
    color:var(--ink); text-decoration:none;
}
.alp-now::before {
    content:''; position:absolute; inset:0 -10px;
    background:var(--accent); opacity:0.82;
    transform:skewX(-10deg) rotate(-1.5deg);
    clip-path:polygon(2% 8%, 100% 0, 97% 92%, 0 100%);
}
.alp-now > * { position:relative; }
.alp-now-lbl { font-family:var(--display); font-size:clamp(22px, 2.6vw, 32px); letter-spacing:0.06em; color:#fff; }
.alp-now-val { font-family:var(--display); font-size:clamp(46px, 6vw, 84px); line-height:0.9; color:#fff; }
.alp-now-val sup { font-size:0.42em; vertical-align:0.95em; margin-left:2px; }
.alp-now-src { font-size:0.8rem; font-weight:500; color:rgba(255,255,255,0.92); align-self:center; max-width:9em; text-align:left; line-height:1.25; }
.alp-now:hover::before { opacity:0.95; }
.alp-now .eco-dot { background:#fff; }
@media (max-width:500px) {
    .alp-now { padding:12px 24px 10px 22px; gap:10px; }
    .alp-now-src { display:none; }
}

/* Abschnittsüberschrift "WETTER heute" mit kurzem Strich */
.alp-h {
    margin:clamp(60px, 10vh, 110px) 0 26px; text-align:center;
    font-family:var(--display); font-weight:400; font-size:clamp(36px, 4vw, 48px);
    letter-spacing:0.02em; color:var(--ink); line-height:1;
}
.alp-h span { color:var(--text-2); }
.alp-h::after { content:''; display:block; width:34px; height:4px; background:var(--ink); margin:12px auto 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WIDGETS · flach, oben schwarzer Strich
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.widget {
    background:var(--glass);
    border:0; border-top:3px solid var(--ink);
    border-radius:0; box-shadow:none;
    padding:20px;
}
.widget::before { display:none; }
.widget-weather { background:var(--glass) !important; }

.wlabel {
    font-family:var(--display); font-weight:400;
    font-size:1.45rem; letter-spacing:0.04em; text-transform:none;
    color:var(--ink); margin-bottom:14px;
}
.wlabel .lucide { color:var(--accent); width:17px; height:17px; }

/* Große Zahlen in der Display-Schrift */
.clock-time, .w-temp-big, .eco-val, .eb-amount {
    font-family:var(--display) !important; font-weight:400 !important;
    letter-spacing:0.02em; color:var(--ink);
}
.eco-val small, .w-temp-big sup { font-family:'Jost', sans-serif; font-size:0.42em; letter-spacing:0; }

/* Kachelflächen innerhalb der Widgets */
.eco-tile, .w-stat, .fc-day, .lcard {
    background:rgba(255,255,255,0.6);
    border:1px solid var(--border);
    border-radius:4px;
    box-shadow:none;
}
.lcard:hover { border-color:var(--ink); background:#fff; }
.licon { color:var(--accent); }
.lname { color:var(--ink); font-weight:600; }
.lsub  { color:var(--text-2); }

/* Buttons wie im Entwurf */
.btn-primary, .alp-btn {
    background:var(--accent); border:0; color:#fff;
    border-radius:999px; padding:11px 24px; font-weight:600;
}
.btn-primary:hover, .alp-btn:hover { background:var(--teal-2); color:#fff; }

/* News-Ticker hell */
#ticker {
    background:rgba(255,255,255,0.9) !important;
    border-top:1px solid var(--border) !important;
    color:var(--ink);
}
#ticker .tlabel {
    background:var(--ink) !important; color:#fff !important;
    font-family:var(--display); letter-spacing:0.06em; font-size:1.05rem;
}

/* Skeleton auf Weiß */
.sk { background:linear-gradient(90deg, rgba(17,17,17,0.05) 0%, rgba(17,17,17,0.10) 50%, rgba(17,17,17,0.05) 100%); background-size:200% 100%; }

/* Animation beim Laden etwas ruhiger */
.widget { animation-duration:.45s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NEWS (news.php) · Quellfarben für hellen Grund
   Die Seite setzt je Quelle --q (Farbton) und --qs (Sättigung);
   hier nur die Helligkeit auf Weiß abgestimmt.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nw-head h1 {
    font-family:var(--display); font-weight:400; font-size:clamp(36px, 4vw, 48px);
    letter-spacing:0.02em; line-height:1;
}
.nw-head h1 .lucide { color:var(--accent); width:26px; height:26px; }
.nw-head .sub { color:var(--text-2); }

.nw-tools { border:0; border-top:3px solid var(--ink); border-radius:0; box-shadow:none; }
.nw-search {
    background-color:#fff; border-color:rgba(17,17,17,0.2); font-size:0.95rem;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
.nw-search:focus { border-color:var(--accent); background-color:#fff; }

/* Filter-Pillen wie die Kopfleiste */
.nw-chip { font-size:0.8rem; color:var(--ink); background:#fff; border-color:rgba(17,17,17,0.18); padding:7px 14px; }
.nw-chip:hover { background:var(--glass-hi); color:var(--ink); }
.nw-chip.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.nw-chip .n { opacity:.6; }
.nw-chip-src::before { background:hsl(var(--q) var(--qs) 42%); box-shadow:none; }
.nw-chip-src:hover { border-color:hsl(var(--q) var(--qs) 40% / .6); }
.nw-chip-src.active {
    background:hsl(var(--q) var(--qs) 92%); border-color:hsl(var(--q) var(--qs) 38%);
    color:hsl(var(--q) var(--qs) 24%);
}
.nw-chip-src.active::before { background:hsl(var(--q) var(--qs) 38%); }

/* Beiträge: flach, Quellfarbe als Strich oben */
.nw-item {
    background:var(--glass); border:0; border-top:3px solid hsl(var(--q) var(--qs) 40%);
    border-radius:0; box-shadow:none; color:var(--ink);
}
.nw-item:hover {
    background:linear-gradient(180deg, hsl(var(--q) var(--qs) 50% / .07), transparent 70%), #fff;
    border-top-color:hsl(var(--q) var(--qs) 34%);
    box-shadow:0 6px 20px rgba(17,17,17,0.08);
}
.nw-item h2 { font-size:1.02rem; color:var(--ink); }
.nw-item:hover h2 { color:hsl(var(--q) var(--qs) 26%); }
.nw-item p { color:var(--text-2); font-size:0.86rem; }
.nw-src {
    font-size:0.7rem; color:hsl(var(--q) var(--qs) 26%);
    background:hsl(var(--q) var(--qs) 92%);
    border-color:hsl(var(--q) var(--qs) 40% / .35);
}
.nw-topic, .nw-time { font-size:0.7rem; color:var(--text-2); }
.nw-empty { color:var(--text-2); }
.nw-foot { background:var(--glass); border:0; border-top:1px solid var(--border); border-radius:0; color:var(--text-2); }