/* Die Anzeige wird immer für 1920 × 1080 Pixel gestaltet und dann auf die Bildschirmgröße skaliert. */
:root {
    --primary: #0056a3;
    --bg: #ffffff;
    --text: #111111;
    --font: 'Inter';
    --scale: 1;
    --fade: 800ms;
    --soft: #f3f6fa;
}

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body.kiosk { cursor: none; }

#stage {
    position: absolute; left: 0; top: 0;
    width: 1920px; height: 1080px;
    transform-origin: 0 0;
    background: var(--bg); color: var(--text);
    font-family: var(--font), 'Inter', Arial, sans-serif;
    display: flex; flex-direction: column; overflow: hidden;
}

/* ---------- Kopfzeile ---------- */
#header {
    height: 150px; flex: none; box-sizing: border-box;
    display: flex; align-items: center; gap: 44px;
    padding: 0 70px; position: relative; background: var(--bg);
}
#header-logo { max-height: 96px; max-width: 360px; object-fit: contain; display: none; }
#header-logo.visible { display: block; }
#clock { font-size: 84px; font-weight: 800; line-height: 1; color: var(--primary); font-variant-numeric: tabular-nums; }
#date { font-size: 30px; font-weight: 600; opacity: .75; margin-top: 8px; }
#weather { margin-left: auto; display: flex; align-items: center; gap: 22px; }
#weather svg { width: 92px; height: 92px; color: var(--primary); }
#weather .w-temp { font-size: 68px; font-weight: 800; line-height: 1; color: var(--primary); }
#weather .w-desc { font-size: 26px; font-weight: 600; line-height: 1.3; }
#weather .w-range { font-size: 22px; opacity: .65; }
#progress { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #e3e8ef; background: color-mix(in srgb, var(--primary) 14%, var(--bg)); }
#progress-bar { height: 100%; width: 0; background: var(--primary); }
.hidden { display: none !important; }

/* ---------- Inhalt ---------- */
#main {
    flex: 1; min-height: 0; box-sizing: border-box; position: relative;
    padding: 56px 70px; display: flex;
    opacity: 0; transition: opacity var(--fade) ease-in-out;
}
.view { width: 100%; height: 100%; display: flex; min-width: 0; }

/* Nachricht */
.news { gap: 64px; align-items: stretch; }
.news.img-right { flex-direction: row-reverse; }
.news .media { width: 36%; flex: none; display: flex; flex-direction: column; gap: 26px; min-height: 0; }
.news .pic { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* Oben bündig: Bild/Logo und Quellenname beginnen auf derselben Höhe */
.news.align-top .pic { align-items: flex-start; }
.news.align-top .body { justify-content: flex-start; }
.news.align-top .tag { line-height: 1; margin-top: 0; }
.news .pic img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.news .pic.photo img { width: 100%; height: 100%; object-fit: cover; }
.qr {
    flex: none; display: flex; align-items: center; gap: 30px;
    background: var(--soft); background: color-mix(in srgb, var(--primary) 7%, var(--bg));
    border-radius: 18px; padding: 22px 26px;
}
.qr-code { background: #fff; padding: 10px; border-radius: 10px; line-height: 0; flex: none; }
.qr-code img, .qr-code canvas { width: 170px; height: 170px; display: block; }
.qr-label { font-size: calc(26px * var(--scale)); font-weight: 700; color: var(--primary); text-transform: uppercase; line-height: 1.25; white-space: pre-line; }

.body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.tag { font-size: calc(24px * var(--scale)); font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
.title {
    font-size: calc(60px * var(--scale)); font-weight: 800; line-height: 1.12; margin-bottom: 30px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.text {
    font-size: calc(34px * var(--scale)); line-height: 1.45; opacity: .85; white-space: pre-line;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden;
}
.meta { margin-top: 28px; font-size: calc(24px * var(--scale)); opacity: .55; font-weight: 600; }

/* Spritpreise */
.fuel { flex-direction: column; justify-content: center; }
.fuel table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.fuel th { text-align: left; font-size: calc(28px * var(--scale)); opacity: .6; font-weight: 600; padding-bottom: 14px; border-bottom: 3px solid color-mix(in srgb, var(--text) 12%, transparent); }
.fuel td { padding: 22px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); vertical-align: middle; }
.fuel .st-name { font-size: calc(34px * var(--scale)); font-weight: 700; }
.fuel .st-addr { font-size: calc(24px * var(--scale)); opacity: .6; margin-top: 4px; }
.fuel .price { font-size: calc(46px * var(--scale)); font-weight: 800; color: var(--primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fuel .price sup { font-size: .55em; vertical-align: .75em; }
.fuel tr.closed td { opacity: .4; }
.fuel .closed-label { font-size: calc(30px * var(--scale)); font-weight: 700; color: #b42318; opacity: 1; }
.fuel .note { margin-top: 26px; font-size: 20px; opacity: .55; }

/* Eigene Folie */
.custom { gap: 64px; align-items: center; }
.custom .pic { width: 40%; height: 100%; flex: none; display: flex; align-items: center; justify-content: center; }
.custom .pic img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.custom .title { -webkit-line-clamp: 5; }
.custom .text { -webkit-line-clamp: 12; }
.custom .qr { margin-top: 36px; align-self: flex-start; }

/* Bild / Plakat */
.imageview { align-items: center; justify-content: center; }
.imageview img { width: 100%; height: 100%; object-fit: contain; }
.imageview.cover img { object-fit: cover; }
#stage.fullscreen #header, #stage.fullscreen #footer { display: none; }
#stage.fullscreen #main { padding: 0; }

/* Leere / Hinweis */
.empty { align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: 20px; }
.empty .big { font-size: 48px; font-weight: 800; color: var(--primary); }
.empty .small { font-size: 28px; opacity: .6; max-width: 1200px; }

/* ---------- Fußzeile ---------- */
#footer {
    height: 52px; flex: none; box-sizing: border-box;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 30px;
    padding: 0 70px; font-size: 22px; font-weight: 600;
}
#footer-attr { font-size: 16px; font-weight: 400; opacity: .8; margin-left: auto; }