/* ========================================================================== ON AIR — Theme für Eis-Radio (Grav 2) Konzept: Radiostudio bei Nacht. Durchgehende Blautöne (wie das Sender-Logo). Signature: Sender-Suchlauf-Skala im Hero, permanente On-Air-Leiste. Unterstützt Dark- (Standard) und Light-Mode via [data-theme] auf . ========================================================================== */ :root { /* Farben – Dark (Standard). Direkt vom Sender-Logo abgeleitet: Marken-Blau #004aad, Akzent (Note im Icon) #39b6ff, helle Schallwelle #b8e6ff. */ --ink: #061a3a; --ink-2: #041228; --panel: #0d2e6b; --panel-2: #123d84; --line: rgba(184, 230, 255, .14); --line-strong: rgba(184, 230, 255, .24); --ice: #eef6ff; --ice-dim: #a7c3e8; --ice-faint: #6f8db8; --accent: #39b6ff; --accent-strong: #74cbff; --on-accent: #04173d; --signal: #b8e6ff; --danger: #c00; --glass: rgba(5, 19, 46, .72); --glass-strong: rgba(5, 19, 46, .85); --hero-glow-1: rgba(184, 230, 255, .14); --hero-glow-2: rgba(57, 182, 255, .18); --noise-dot: rgba(255, 255, 255, .035); /* Typografie */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Work Sans', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace; /* Layout */ --wrap: 1120px; --radius-lg: 4px; --radius-md: 3px; --radius-sm: 2px; --header-h: 76px; --player-h: 76px; --ease: cubic-bezier(.2, .7, .2, 1); } /* Farben – Light */ :root[data-theme="light"] { --ink: #f3f8ff; --ink-2: #e7f1fd; --panel: #ffffff; --panel-2: #eaf3ff; --line: rgba(0, 74, 173, .10); --line-strong: rgba(0, 74, 173, .20); --ice: #071a3d; --ice-dim: #33507e; --ice-faint: #6a84ab; --accent: #0a5cd8; --accent-strong: #004aad; --on-accent: #ffffff; --signal: #0a84c4; --danger: #d1495b; --glass: rgba(255, 255, 255, .72); --glass-strong: rgba(255, 255, 255, .86); --hero-glow-1: rgba(10, 92, 216, .08); --hero-glow-2: rgba(0, 74, 173, .08); --noise-dot: rgba(0, 40, 100, .03); } /* ---- Reset & Basics ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--ink); color: var(--ice); font-family: var(--font-body); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; padding-top: var(--header-h); transition: background-color .2s var(--ease), color .2s var(--ease); } body.has-player-bar { padding-bottom: var(--player-h); } img { max-width: 100%; display: block; } a { color: var(--accent-strong); text-decoration: none; } a:hover { color: var(--accent); } .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: none; flex-shrink: 0; } /* Sanfter Übergang beim Dark/Light-Wechsel für alle themefarbigen Flächen */ .site-header, .player-bar, .content-panel, .preset, .nowplaying-card, .prose blockquote, .schedule-list li, .schedule-tablist, .site-footer { transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.01em; } .eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin: 0 0 .9rem; } .eyebrow--hero { color: var(--accent-strong); } /* ---- Header / Navigation ------------------------------------------------ */ .site-header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 40; background: var(--glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); } .site-header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ice); } .brand-mark { color: var(--accent); flex-shrink: 0; } .brand-logo-img { height: 42px; width: auto; display: block; border-radius: 3px; } .brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; } .brand-dot { color: var(--accent); } .main-nav { display: flex; } .site-header-controls { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; margin-left: auto; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--ice); cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); } .theme-toggle:hover { border-color: var(--signal); color: var(--signal); } .theme-toggle-icon { width: 1.05em; height: 1.05em; } .theme-toggle-icon--moon { display: none; } :root[data-theme="light"] .theme-toggle-icon--sun { display: none; } :root[data-theme="light"] .theme-toggle-icon--moon { display: block; } .nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; font-size: .95rem; } .nav-item { position: relative; display: flex; align-items: center; } .nav-links a, .nav-link { color: var(--ice-dim); position: relative; padding: .25rem 0; } .nav-links a:hover, .nav-link:hover, .nav-links a.is-active, .nav-link.is-active { color: var(--ice); } .nav-link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); border-radius: 2px; } .nav-dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--ice-dim); cursor: pointer; padding: .3rem .4rem; margin-left: .1rem; } .nav-dropdown-toggle:hover { color: var(--ice); } .nav-dropdown-toggle .icon { width: .9em; height: .9em; transition: transform .18s var(--ease); } .nav-dropdown-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); } .main-nav .nav-dropdown { list-style: none; margin: 0; padding: 0; display: none; } .nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown { display: block; } .nav-dropdown a { display: block; color: var(--ice-dim); } .nav-dropdown a:hover, .nav-dropdown a.is-active { color: var(--ice); } @media (min-width: 761px) { .has-dropdown:hover > .nav-dropdown-toggle + .nav-dropdown, .has-dropdown:hover > .nav-dropdown { display: block; } .has-dropdown:hover > .nav-dropdown-toggle .icon { transform: rotate(180deg); } .main-nav .nav-dropdown { position: absolute; top: calc(100% - .1rem); left: 0; min-width: 190px; padding: 1rem .5rem .5rem; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); z-index: 60; } .main-nav .nav-dropdown li + li { margin-top: .1rem; } .main-nav .nav-dropdown a { padding: .6rem .8rem; border-radius: 0; font-size: .88rem; } .main-nav .nav-dropdown a:hover, .main-nav .nav-dropdown a.is-active { background: var(--panel-2); } } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; } .nav-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--ice); border-radius: 2px; } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.6rem; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: .95rem; border: 1px solid transparent; transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease); } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-strong); color: var(--on-accent); } .btn--ghost { border-color: var(--line-strong); color: var(--ice); } .btn--ghost:hover { border-color: var(--signal); color: var(--signal); } .btn-note { opacity: .75; font-size: .85em; } /* ---- Hero + Suchlauf-Skala ---------------------------------------------- */ .hero { position: relative; padding: calc(var(--header-h) + 3.5rem) 0 5rem; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 20% -10%, var(--hero-glow-1), transparent 60%), radial-gradient(ellipse 70% 60% at 90% 10%, var(--hero-glow-2), transparent 60%), var(--ink); text-align: center; } .hero-noise { position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(var(--noise-dot) 1px, transparent 1px); background-size: 3px 3px; } .hero-inner { position: relative; } .tuner { max-width: 640px; margin: 0 auto 3rem; } .tuner-track { position: relative; height: 34px; } .tuner-tick { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--ice-faint); white-space: nowrap; } .tuner-needle { position: absolute; bottom: -2px; left: 12.5%; width: 2px; height: 16px; background: var(--signal); box-shadow: 0 0 8px 1px var(--signal); border-radius: 2px; animation: tuner-sweep 16s ease-in-out infinite alternate; } .tuner-rule { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--line-strong) 8%, var(--line-strong) 92%, transparent); } @keyframes tuner-sweep { 0% { left: 12.5%; } 33% { left: 37.5%; } 66% { left: 62.5%; } 100% { left: 87.5%; } } @media (prefers-reduced-motion: reduce) { .tuner-needle { animation: none; left: 50%; } } .hero-title { font-size: clamp(2.6rem, 6vw, 4.6rem); text-transform: uppercase; letter-spacing: .01em; margin-bottom: .4em; } .hero-lede { max-width: 560px; margin: 0 auto; color: var(--ice-dim); font-size: 1.1rem; } .hero-lede p:first-child { margin-top: 0; } .hero-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; } /* ---- Generic sections ---------------------------------------------------- */ .section { padding: 5rem 0; } .section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); } .section-lede { color: var(--ice-dim); max-width: 640px; margin-bottom: 2.5rem; } .prose { color: var(--ice-dim); } .prose :is(h2, h3) { color: var(--ice); } .prose ul { padding-left: 1.2em; } .prose li { margin-bottom: .35em; } .prose a { text-decoration: underline; text-underline-offset: 3px; } .prose blockquote { margin: 1.8rem 0; padding: 1rem 1.4rem; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0; color: var(--ice); font-size: .95rem; } .prose table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-family: var(--font-mono); font-size: .9rem; } .prose th, .prose td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); } .prose th { color: var(--signal); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; } .prose [role="button"], .prose a[role="button"] { display: inline-flex; padding: .85rem 1.6rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; } /* ---- Live-Sendeplan (laut.fm API) ------------------------------------------ */ .schedule-heading { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; } .schedule-live-tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); border-radius: 999px; padding: .2rem .6rem; } .schedule-tabs { margin-top: 1.5rem; } .schedule-tablist { display: flex; gap: .3rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; scrollbar-width: thin; } .schedule-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .2rem; background: none; border: none; color: var(--ice-faint); font-family: var(--font-mono); font-size: .8rem; padding: .7rem 1rem; cursor: pointer; position: relative; transition: color .15s var(--ease); } .schedule-tab:hover { color: var(--ice); } .schedule-tab.is-active { color: var(--ice); } .schedule-tab.is-active::after { content: ''; position: absolute; left: .4rem; right: .4rem; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; } .schedule-tab-full { display: none; } .schedule-tab-today { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); } @media (min-width: 620px) { .schedule-tab-full { display: inline; } .schedule-tab-short { display: none; } } .schedule-panel[hidden] { display: none; } .schedule-list { list-style: none; margin: 0; padding: 0; } .schedule-list li.schedule-item { padding: .6rem 0; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; font-size: 1.1rem; display: flex; align-items: center; } .schedule-list li:last-child { border-bottom: none; } .schedule-item-body { display: grid; grid-template-columns: 30% 1fr; grid-template-rows: auto auto; align-items: center; min-width: 0; width: 100%; padding: .5rem; gap: 0 1rem; } .schedule-item-body .schedule-time { grid-column: 1; grid-row: 1 / -1; align-self: center; padding-inline: .8rem; border-right: 1px solid var(--ice-faint); } .schedule-item-body .schedule-item-title { grid-column: 2; grid-row: 1; } .schedule-item-body .schedule-item-desc { grid-column: 2; grid-row: 2; } /* Aktuell laufende Sendung im Sendeplan hervorheben */ .schedule-item.schedule-item--current { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); border-radius: 0; } .schedule-item.schedule-item--with-image.schedule-item--current { border-left-color: var(--danger); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent) inset; } .schedule-current-badge { display: inline-flex; align-items: center; gap: .35rem; margin-left: .6rem; padding: .15rem .55rem; border-radius: 999px; background: var(--danger); color: #fff; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; } .schedule-current-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: badge-pulse 1.8s ease-out infinite; } @keyframes badge-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 100% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } } /* Bild als Zeilenhintergrund statt Thumbnail */ .schedule-item.schedule-item--with-image { position: relative; background-size: cover; background-position: center; border: none; border-radius: 0; margin: .5rem 0; padding: 1rem 1.2rem; isolation: isolate; overflow: hidden; } .schedule-item.schedule-item--with-image::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(4, 10, 22, .1), rgba(4, 10, 22, .4) 75%); } .schedule-item.schedule-item--with-image .schedule-item-body { position: relative; z-index: 1; min-height: 150px; } .schedule-item.schedule-item--with-image .schedule-time { color: rgba(255, 255, 255, .90); } .schedule-item.schedule-item--with-image .schedule-item-title { color: #fff; } .schedule-item.schedule-item--with-image .schedule-item-desc { color: rgba(255, 255, 255, .85); } .schedule-time { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; color: var(--ice-faint); text-shadow: 0 0 5px steelblue; } .schedule-item-title { color: var(--ice); font-size: 1.6rem; font-weight: 600; text-shadow: 0 0 5px black; } .schedule-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .4em; vertical-align: middle; box-shadow: 0 0 0 1px var(--line-strong) inset; } .schedule-item-desc { color: var(--ice-dim); font-size: 1.1rem; font-weight: 600; line-height: 1.5; text-shadow: 0 0 5px black; } .schedule-empty { color: var(--ice-faint); font-size: .86rem; font-style: italic; } .schedule-fallback { color: var(--ice-dim); } /* Content panel (Standard-Seiten wie Programm / Hören / Kontakt) */ .content-panel { max-width: 860px; margin: 3.5rem auto 5rem; padding: 2.8rem clamp(1.5rem, 5vw, 3.2rem); background: var(--panel); border: 1px solid var(--line); border-radius: 0; } .content-panel--wide { max-width: 920px; } .content-panel h1 { font-size: clamp(2rem, 4vw, 2.8rem); text-transform: uppercase; } /* ---- Presets (Feature-Kacheln) -------------------------------------------- */ .presets { background: var(--ink-2); } .preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } .preset { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 1.8rem 1.6rem; border-left: 3px solid transparent; transition: border-color .15s var(--ease), border-left-color .15s var(--ease); } .preset:hover { border-color: var(--line-strong); border-left-color: var(--accent); } .preset-key { position: absolute; top: 1.1rem; right: 1.2rem; font-family: var(--font-mono); font-size: .7rem; color: var(--ice-faint); letter-spacing: .06em; } .preset-icon { font-size: 1.4rem; color: var(--accent); margin-bottom: 1rem; display: block; } .preset-title { font-size: 1.05rem; margin-bottom: .4rem; } .preset-text { color: var(--ice-dim); font-size: .92rem; margin: 0 0 .8rem; } .preset-link { font-size: .88rem; font-weight: 600; } /* ---- Text-Sektion --------------------------------------------------------- */ .text-section { } .prose--split { max-width: 720px; } /* ---- Jetzt läuft (laut.fm API) --------------------------------------------- */ .nowplaying { background: var(--ink-2); } .nowplaying-grid { display: grid; grid-template-columns: minmax(280px, 560px) minmax(260px, 420px); gap: 1.4rem; align-items: stretch; } @media (max-width: 780px) { .nowplaying-grid { grid-template-columns: 1fr; } } .nowplaying-card { display: flex; align-items: center; gap: 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 1.4rem 1.6rem; border-left: 3px solid var(--accent); } .nowplaying-cover { width: 88px; height: 88px; border-radius: 0; object-fit: cover; flex-shrink: 0; background: var(--panel-2); } .nowplaying-cover--placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--ice-faint); } .nowplaying-label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); } .nowplaying-title { margin: .2rem 0 0; font-size: 1.3rem; } .nowplaying-artist { margin: .2rem 0 0; color: var(--ice-dim); } .nowplaying-listeners { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font-family: var(--font-mono); font-size: .74rem; color: var(--ice-faint); } .nowplaying-listeners-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); animation: live-pulse 2.4s ease-out infinite; } /* Gleicher Kachel-Stil wie .nowplaying-card, damit beide Boxen als Paar wirken */ .show-card { display: flex; flex-direction: column; justify-content: center; gap: .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 1.4rem 1.6rem; border-left: 3px solid var(--line-strong); } .show-row { display: flex; align-items: flex-start; gap: .6rem; } .show-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-top: .4em; flex-shrink: 0; box-shadow: 0 0 0 1px var(--line-strong) inset; } /* Bild als Zeilenhintergrund statt Thumbnail */ .show-row.show-row--with-image { position: relative; background-size: cover; background-position: center; border-radius: 0; padding: .9rem 1rem; margin: -.2rem 0; isolation: isolate; overflow: hidden; } .show-row.show-row--with-image::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(4, 10, 22, .35), rgba(4, 10, 22, .9) 75%); } .show-row.show-row--with-image .show-row-meta { position: relative; z-index: 1; } .show-row.show-row--with-image .show-row-label { color: rgba(255, 255, 255, .78); } .show-row.show-row--with-image .show-row-name { color: #fff; } .show-row.show-row--with-image .show-row-desc { color: rgba(255, 255, 255, .85); } .show-row-meta { min-width: 0; } .show-row-label { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ice-faint); } .show-row-name { display: block; font-size: 1.05rem; color: var(--ice); margin-top: .1rem; } .show-row-desc { display: block; font-size: .82rem; color: var(--ice-dim); margin-top: .2rem; } .show-divider { border: none; border-top: 1px solid var(--line); margin: 0; } .show-row--next .show-row-label { color: var(--ice-faint); } /* ---- Footer ---------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); background: var(--ink-2); padding: 3rem 0; } .footer-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; } .footer-claim { color: var(--ice-faint); font-size: .88rem; max-width: 260px; margin: .8rem 0 0; } .footer-links .nav-links { flex-direction: column; gap: .6rem; } .footer-links .nav-dropdown--static { display: block; padding: .3rem 0 0 .9rem; border-left: 2px solid var(--line-strong); margin: .4rem 0 0 .1rem; } .footer-links .nav-dropdown--static li + li { margin-top: .4rem; } .footer-links .nav-dropdown--static a { font-size: .85rem; color: var(--ice-faint); } .footer-links .nav-dropdown--static a:hover, .footer-links .nav-dropdown--static a.is-active { color: var(--ice); } .footer-meta { font-size: .82rem; color: var(--ice-faint); text-align: right; } .footer-meta p { margin: 0 0 .3rem; } /* ---- Permanente On-Air-Player-Leiste ---------------------------------------- */ .player-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--player-h); display: flex; align-items: center; gap: 1rem; padding: 0 1.2rem; background: var(--glass-strong); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-top: 1px solid var(--line-strong); } .player-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); flex-shrink: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 60%, transparent); animation: live-pulse 2.4s ease-out infinite; } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); } 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--signal) 0%, transparent); } } .player-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .player-name { font-family: var(--font-display); font-size: .95rem; } .player-status { font-family: var(--font-mono); font-size: .72rem; color: var(--ice-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-cta { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1.3rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .9rem; transition: background .15s var(--ease), transform .1s var(--ease); } .player-cta:hover { background: var(--accent-strong); color: var(--on-accent); transform: translateY(-1px); } .player-cta:active { transform: translateY(0) scale(.97); } .player-cta-note { font-family: var(--font-mono); font-size: .68rem; font-weight: 400; opacity: .7; } /* ---- Responsive ------------------------------------------------------------ */ @media (max-width: 760px) { .nav-toggle { display: flex; } .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--ink-2); border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; overflow-y: auto; transition: max-height .25s var(--ease); } .main-nav.is-open { max-height: calc(100vh - var(--header-h)); } .main-nav .nav-links { flex-direction: column; gap: 0; padding: 1rem 24px; } .main-nav .nav-links li { border-bottom: 1px solid var(--line); } .main-nav .nav-item { flex-wrap: wrap; } .main-nav .nav-link { display: block; padding: .9rem 0; flex: 1; } .main-nav .nav-dropdown-toggle { padding: .9rem .3rem; } .main-nav .nav-dropdown { flex-basis: 100%; padding: 0 0 .6rem 1rem; border-left: 2px solid var(--line-strong); margin-left: .2rem; } .main-nav .nav-dropdown a { padding: .6rem 0; font-size: .92rem; } .footer-grid { flex-direction: column; } .footer-meta { text-align: left; } .player-cta-note { display: none; } .player-status { max-width: 40vw; } } @media (max-width: 380px) { .player-status { display: none; } } /* ---- Trackhistory (eigene AzuraCast-Instanz) -------------------------------- */ .trackhistory { margin-top: 2rem; } .trackhistory-search { display: flex; align-items: center; gap: .6rem; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: .3rem .5rem .3rem 1.1rem; margin-bottom: 1.5rem; } .trackhistory-search-icon { color: var(--ice-faint); flex-shrink: 0; } .trackhistory-search-input { flex: 1; min-width: 0; border: none; background: none; color: var(--ice); font-family: var(--font-body); font-size: .95rem; padding: .6rem 0; } .trackhistory-search-input:focus { outline: none; } .trackhistory-search-input::placeholder { color: var(--ice-faint); } .trackhistory-search-clear { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--panel); color: var(--ice-dim); cursor: pointer; } .trackhistory-search-clear:hover { color: var(--ice); } .trackhistory-status { color: var(--ice-dim); font-size: .9rem; padding: 1.5rem 0; text-align: center; } .trackhistory-status--error { color: var(--danger); } .trackhistory-tablist { margin-bottom: 0; border-radius: 0; } .trackhistory-panels { max-height: 60vh; overflow-y: auto; border: 1px solid var(--line); border-top: none; border-radius: 0; padding: .3rem 1.2rem; } .trackhistory-panel { display: none; } .trackhistory-panel.is-active { display: block; } .track-row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); } .track-row:last-child { border-bottom: none; } .track-time { flex-shrink: 0; width: 52px; font-family: var(--font-mono); font-size: .8rem; color: var(--ice-faint); } .track-main { flex: 1; min-width: 0; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-artist { font-weight: 600; color: var(--ice); } .track-sep { color: var(--ice-faint); margin: 0 .4rem; } .track-title { color: var(--ice-dim); } @media (max-width: 560px) { .track-row { flex-wrap: wrap; gap: .2rem; } .track-main { display: flex; flex-direction: column; white-space: normal; } .track-sep { display: none; } .track-title { font-size: .82rem; } } @media (max-width: 480px) { .schedule-item-body { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .schedule-item-body .schedule-time { grid-column: 1; grid-row: 1; border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: .3rem; margin-bottom: .2rem; } .schedule-item-body .schedule-item-title { grid-column: 1; grid-row: 2; } .schedule-item-body .schedule-item-desc { grid-column: 1; grid-row: 3; } } /* ---- Senderinfo (laut.fm API) ------------------------------------------------ */ .senderinfo-hero { display: flex; gap: 1.6rem; align-items: center; margin: 2rem 0; flex-wrap: wrap; } .senderinfo-image { width: 140px; height: 140px; border-radius: 0; object-fit: cover; flex-shrink: 0; background: var(--panel-2); border: 1px solid var(--line); } .senderinfo-hero-text { min-width: 0; flex: 1; } .senderinfo-name { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .3rem; } .senderinfo-format { color: var(--accent-strong); font-weight: 600; margin: 0 0 .5rem; } .senderinfo-description { color: var(--ice-dim); margin: 0; } .senderinfo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; margin: 2rem 0; padding: 1.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .senderinfo-fact { display: flex; align-items: flex-start; gap: .9rem; } .senderinfo-fact-icon { width: 34px; height: 34px; flex-shrink: 0; color: var(--accent); margin-top: .1rem; } .senderinfo-fact-text { min-width: 0; } .senderinfo-fact dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ice-faint); margin: 0 0 .2rem; } .senderinfo-fact dd { margin: 0; color: var(--ice); font-weight: 600; } .senderinfo-fact dd a { color: var(--ice); text-decoration: underline; text-underline-offset: 2px; } .senderinfo-subhead { font-size: 1.05rem; margin: 2rem 0 1rem; } .senderinfo-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; } .senderinfo-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .9rem; font-size: .82rem; color: var(--ice-dim); } .senderinfo-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; } .senderinfo-links li { display: flex; align-items: center; gap: .5rem; color: var(--ice-dim); font-size: .92rem; } .senderinfo-links a { display: inline-flex; align-items: center; gap: .4rem; color: var(--ice); } .senderinfo-links a:hover { color: var(--accent-strong); } .senderinfo-source { margin-top: 2rem; font-size: .78rem; color: var(--ice-faint); } @media (max-width: 560px) { .senderinfo-hero { flex-direction: column; align-items: flex-start; text-align: left; } .senderinfo-image { width: 100px; height: 100px; } } /* ---- Back-to-Top-Button ------------------------------------------------------ */ .back-to-top { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 45; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--glass-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ice); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s, border-color .15s var(--ease), color .15s var(--ease); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { border-color: var(--signal); color: var(--signal); } body.has-player-bar .back-to-top { bottom: calc(var(--player-h) + 1rem); } /* ========================================================================== Utility-Klassen (Bootstrap-ähnliche Namenskonvention) Float: .float-left/.float-right/.float-none (+ .float-start/.float-end als Alias) Spacing: .m-0..5, .mt-/.mb-/.ms-/.me-/.mx-/.my-, gleiches Schema für Padding (.p-) ========================================================================== */ .float-left, .float-start { float: left; } .float-right, .float-end { float: right; } .float-none { float: none; } .clearfix::after { content: ""; display: table; clear: both; } .m-0 { margin: 0 !important; } .m-1 { margin: .25rem !important; } .m-2 { margin: .5rem !important; } .m-3 { margin: 1rem !important; } .m-4 { margin: 1.5rem !important; } .m-5 { margin: 3rem !important; } .m-auto { margin: auto !important; } .p-0 { padding: 0 !important; } .p-1 { padding: .25rem !important; } .p-2 { padding: .5rem !important; } .p-3 { padding: 1rem !important; } .p-4 { padding: 1.5rem !important; } .p-5 { padding: 3rem !important; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .25rem !important; } .mt-2 { margin-top: .5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .mt-auto { margin-top: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } .mb-auto { margin-bottom: auto !important; } .ms-0 { margin-left: 0 !important; } .ms-1 { margin-left: .25rem !important; } .ms-2 { margin-left: .5rem !important; } .ms-3 { margin-left: 1rem !important; } .ms-4 { margin-left: 1.5rem !important; } .ms-5 { margin-left: 3rem !important; } .ms-auto { margin-left: auto !important; } .me-0 { margin-right: 0 !important; } .me-1 { margin-right: .25rem !important; } .me-2 { margin-right: .5rem !important; } .me-3 { margin-right: 1rem !important; } .me-4 { margin-right: 1.5rem !important; } .me-5 { margin-right: 3rem !important; } .me-auto { margin-right: auto !important; } .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: .25rem !important; } .pt-2 { padding-top: .5rem !important; } .pt-3 { padding-top: 1rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pt-5 { padding-top: 3rem !important; } .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: .25rem !important; } .pb-2 { padding-bottom: .5rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .pb-5 { padding-bottom: 3rem !important; } .ps-0 { padding-left: 0 !important; } .ps-1 { padding-left: .25rem !important; } .ps-2 { padding-left: .5rem !important; } .ps-3 { padding-left: 1rem !important; } .ps-4 { padding-left: 1.5rem !important; } .ps-5 { padding-left: 3rem !important; } .pe-0 { padding-right: 0 !important; } .pe-1 { padding-right: .25rem !important; } .pe-2 { padding-right: .5rem !important; } .pe-3 { padding-right: 1rem !important; } .pe-4 { padding-right: 1.5rem !important; } .pe-5 { padding-right: 3rem !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; } .mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; } .mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; } .my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-5 { padding-left: 3rem !important; padding-right: 3rem !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }