/* Rezeptions-TV – Anzeige. Feste Bühne 1920 × 1080, per JS auf das Fenster skaliert.
   Farben und Schriften einmalig aus dem Theme kopiert (wp-content/themes/Bauernstuben/assets/css/tokens.css). */

@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url('fonts/open-sans-v44-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url('fonts/open-sans-v44-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-family: 'Bonheur Royale'; font-weight: 400; font-display: swap; src: url('fonts/bonheur-royale-v15-latin_latin-ext-regular.woff2') format('woff2'); }

:root {
    --color-heading:   #153049;
    --color-primary:   #4A4D5E;
    --color-accent:    #2F4873;
    --color-secondary: #8091A1;
    --color-sand:      #F2E6E2;
    --color-light:     #F6F9F2;
    --color-white:     #FFFFFF;
    --color-text:       #333333;
    --color-text-muted: #666666;
    --color-border:     #DDDDDD;
    --color-error:      #D56C6D;
    --color-warning:    #D9A441;
    --color-rating:     #E0B34A;
    --color-white-soft: rgba(255, 255, 255, 0.2);
    --font-script: 'Bonheur Royale', cursive;
    --font-body:   'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-round: 50%;
    --shadow-soft: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 3px 10px rgba(74, 77, 94, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--color-primary); cursor: none; }
body { font-family: var(--font-body); color: var(--color-text); font-synthesis-weight: none; }

.stage { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: 0 0; background: var(--color-light);
         display: grid; grid-template-rows: 120px 1fr 48px; overflow: hidden; }

/* Kopfband wie die Navigation der Webseite */
.tv-head { position: relative; z-index: 2; background: var(--color-primary); color: var(--color-white); display: flex; align-items: center;
           justify-content: flex-end; gap: 48px; padding: 0 56px 0 300px; }
.logo { position: absolute; left: 56px; top: 14px; width: 200px; height: 200px; border-radius: var(--radius-round); background: var(--color-primary);
        display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.logo img { width: 180px; height: 180px; }
.greet { margin-right: auto; font-family: var(--font-script); font-size: 64px; line-height: 1; }
.date { font-size: 30px; }
.clock { font-size: 68px; font-weight: 600; letter-spacing: 1px; min-width: 190px; text-align: right; }

.tv-main { display: grid; grid-template-columns: 470px minmax(0, 1fr) 560px; gap: 32px; padding: 32px 48px 24px; min-height: 0; }
.tv-main > *, .col > * { min-width: 0; }
.col { display: grid; gap: 28px; min-height: 0; grid-template-rows: auto 1fr; }
.panel { position: relative; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 24px 32px;
         display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel h2 { font-family: var(--font-script); font-weight: 400; color: var(--color-heading); font-size: 56px; margin: 0 0 14px; line-height: 1; text-align: center; }
.panel h2::after { content: ''; display: block; width: 59px; height: 22px; margin: 6px auto 0; background: url('moewe.png') center / contain no-repeat; }
.wetter { padding-top: 96px; }  /* Platz für den Logo-Kreis */

/* Veraltete Daten: blasser, mit Stand */
.panel .stand { display: none; position: absolute; top: 14px; right: 18px; font-size: 18px; color: var(--color-text-muted); }
.wetter .stand { top: 100px; }
.panel.stale > *:not(.stand) { opacity: .45; }
.panel.stale .stand { display: block; }

/* Wetter */
.now { display: flex; align-items: center; justify-content: center; gap: 24px; }
.now svg { width: 110px; height: 110px; }
.now .temp { font-size: 92px; font-weight: 600; color: var(--color-heading); line-height: 1; }
.now .desc { font-size: 26px; color: var(--color-text-muted); }
.today { display: flex; justify-content: space-between; font-size: 24px; padding: 14px 0 10px; color: var(--color-text-muted); }
.today b { display: block; font-size: 30px; color: var(--color-heading); }
.sun { font-size: 21px; color: var(--color-text-muted); text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.week { list-style: none; margin: 4px 0 0; padding: 0; font-size: 28px; }
.week li { display: grid; grid-template-columns: 56px 48px 1fr auto; align-items: center; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--color-border); }
.week li:last-child { border-bottom: 0; }
.week svg { width: 42px; height: 42px; }
.week .rain { color: var(--color-text-muted); font-size: 22px; }
.week .t { font-weight: 600; color: var(--color-heading); }
.week .t small { color: var(--color-text-muted); font-weight: 400; }
.ico { fill: none; stroke: var(--color-secondary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ico .sun-ray { stroke: var(--color-rating); }
.alert { margin-top: auto; font-size: 21px; background: var(--color-sand); border-left: 5px solid var(--color-warning); padding: 8px 12px; }
.alert.severe { border-color: var(--color-error); }

/* Gezeiten */
.tide-next { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tide-next div { border-left: 6px solid var(--color-heading); padding-left: 18px; }
.tide-next .lw { border-color: var(--color-secondary); }
.tide-next span { display: block; font-size: 24px; color: var(--color-text-muted); }
.tide-next b { font-size: 56px; color: var(--color-heading); line-height: 1.1; }
.tide-curve { width: 100%; height: 90px; margin: 6px 0; }
.tide-list { display: flex; justify-content: space-between; font-size: 23px; color: var(--color-text-muted); }

/* Fähren */
.ferries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; flex: 1; }
.ferry h3 { margin: 0; font-size: 30px; color: var(--color-heading); }
.ferry .from { font-size: 22px; color: var(--color-text-muted); margin-bottom: 6px; }
.ferry ul { list-style: none; padding: 0; margin: 0; font-size: 28px; }
.ferry li { padding: 3px 0; display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.ferry li small { font-size: 20px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { font-size: 22px; color: var(--color-text-muted); }
.ferry .warn { margin-top: 6px; font-size: 21px; background: var(--color-sand); border-left: 5px solid var(--color-warning); padding: 8px 12px; }

/* Angebots-Banner */
.promo { position: relative; height: 380px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; background-size: cover; background-position: center; }
.slide.on { opacity: 1; }
.slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 48, 73, .88) 0%, rgba(21, 48, 73, .55) 45%, rgba(21, 48, 73, 0) 75%); }
.slide .txt { position: absolute; left: 32px; right: 32px; bottom: 28px; color: var(--color-white); }
.slide .kicker { font-size: 20px; text-transform: uppercase; letter-spacing: 3px; opacity: .9; }
.slide h3 { font-family: var(--font-script); font-weight: 400; font-size: 64px; line-height: 1.05; margin: 4px 0 6px; }
.slide p { font-size: 26px; margin: 0; line-height: 1.3; }
.dots { position: absolute; right: 24px; bottom: 16px; display: flex; gap: 8px; z-index: 2; }
.dots b { width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--color-white-soft); }
.dots b.on { background: var(--color-white); }

/* Termine */
.events h2 { font-size: 48px; margin-bottom: 4px; }
.ev-group { font-size: 20px; text-transform: uppercase; letter-spacing: 2px; color: var(--color-secondary); margin: 6px 0 2px; }
.ev { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.ev:last-child { border-bottom: 0; }
.ev .when { font-size: 23px; color: var(--color-accent); font-weight: 600; line-height: 1.25; }
.ev .when small { display: block; font-weight: 400; color: var(--color-text-muted); }
.ev .what { font-size: 26px; color: var(--color-heading); font-weight: 600; line-height: 1.2; }
.ev .where { font-size: 20px; color: var(--color-text-muted); }
.ev.hotel { background: var(--color-sand); margin: 0 -14px; padding: 9px 14px; border-radius: var(--radius-sm); border-bottom: 0; }

.tv-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 48px; font-size: 17px; color: var(--color-white); background: var(--color-primary); }
.tv-foot .offline { color: var(--color-rating); }