:root{
  --orange:#F26F21;--orange-dark:#D2560D;--orange-light:#FF9248;
  --blue:#1E40C8;--blue-dark:#152C9E;--blue-light:#3B5BE0;
  --ink:#15161C;--ink-2:#242530;--grey:#6B6B76;--line:#E6E6EA;
  --bg:#FFFFFF;--bg-soft:#F5F6F8;--white:#fff;
  --font-head:'Barlow',sans-serif;--font-body:'Inter',system-ui,sans-serif;
  --player-h:78px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6;padding-bottom:var(--player-h)}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.1;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.95rem;padding:11px 22px;border-radius:8px;cursor:pointer;border:none;transition:.15s}
.btn svg{width:18px;height:18px;flex:none}
.btn-orange{background:var(--orange);color:#fff}.btn-orange:hover{background:var(--orange-dark)}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}.btn-ghost:hover{border-color:#fff}
.btn-white{background:#fff;color:var(--orange-dark)}.btn-white:hover{background:#f0f0f0}
svg{display:block}

.topbar{background:var(--ink);color:#c9c9d2;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px}
.topbar a{color:#c9c9d2;margin-left:16px}.topbar a:hover{color:#fff}
.topbar .freq{font-weight:600;color:#fff}.topbar .freq b{color:var(--orange-light)}

header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;box-shadow:0 1px 8px rgba(0,0,0,.04)}
.head-inner{display:flex;align-items:center;gap:28px;min-height:72px;padding:8px 0}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:800;font-size:1.55rem;color:var(--ink)}
.logo .mark{width:42px;height:42px;background:var(--orange);border-radius:10px;display:grid;place-items:center;color:#fff}
.logo .mark svg{width:24px;height:24px}
.logo em{color:var(--orange);font-style:normal}
.logo img{height:42px;width:auto;border-radius:8px}
nav.main{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
nav.main a{font-family:var(--font-head);font-weight:600;font-size:1rem;padding:9px 13px;border-radius:7px;color:var(--ink-2,#0b1b33);transition:.15s}
nav.main a:hover,nav.main a.active{background:var(--bg-soft);color:var(--orange)}
.head-cta{margin-left:6px}

.hero{background:linear-gradient(120deg,var(--orange-dark),var(--orange));color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 85% 20%,rgba(255,255,255,.14),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:56px 0;position:relative;z-index:2}
.hero .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.18);padding:6px 14px;border-radius:30px;font-weight:600;font-size:.82rem;margin-bottom:18px}
.hero .badge .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
:root{--h1-basis:clamp(2.4rem,6vw,4rem)}
.hero h1{font-size:var(--h1-basis);font-weight:800;letter-spacing:-1px}
.hero p.lead{font-size:1.15rem;opacity:.95;margin:14px 0 24px;max-width:460px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.live-card{background:var(--white);border-radius:18px;padding:20px;color:var(--ink);box-shadow:0 20px 44px rgba(0,0,0,.25)}
.lc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.lc-live{display:inline-flex;align-items:center;gap:7px;background:var(--orange);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:1px;padding:4px 10px;border-radius:5px}
.lc-live .d{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite}
/* Sendername rechts neben dem LIVE-Zeichen */
.lc-sender{font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--ink);opacity:.75;
  text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
@media(max-width:420px){.lc-sender{font-size:.82rem;max-width:52%}}
.lc-listeners{font-size:.85rem;color:var(--grey);font-weight:600}
.lc-now{display:flex;align-items:center;gap:14px}
.lc-cover{width:88px;height:88px;border-radius:12px;flex:none;background:linear-gradient(140deg,var(--orange-light),var(--orange-dark));display:grid;place-items:center;color:#fff;background-size:cover;background-position:center;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.lc-cover svg{width:36px;height:36px;opacity:.9}
.lc-label{font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--orange)}
.lc-song{font-family:var(--font-head);font-weight:700;font-size:1.2rem;line-height:1.15}
.lc-artist{color:var(--grey);font-weight:500;font-size:.95rem}
.lc-btn{margin-top:16px;width:100%;justify-content:center;font-size:1rem;padding:12px}

section.blk{padding:52px 0}
.blk.soft{background:var(--bg-soft)}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap}
.sec-head h2{font-size:1.9rem;position:relative;padding-left:16px}
.sec-head h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:5px;background:var(--orange);border-radius:3px}
.sec-head a.more{font-family:var(--font-head);font-weight:600;color:var(--blue);font-size:.95rem}

.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.channel{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.18s;cursor:pointer}
.channel:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.1)}
.ch-art{height:180px;display:grid;place-items:center;color:#fff;position:relative;background-size:cover;background-position:center}
.ch-art svg{width:40px;height:40px;opacity:.92}
.ch-play{position:absolute;bottom:-18px;right:16px;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.2);color:var(--orange)}
.ch-play svg{width:18px;height:18px}
.ch-body{padding:22px 18px 18px}
.ch-name{font-family:var(--font-head);font-weight:700;font-size:1.15rem}
.ch-desc{color:var(--grey);font-size:.88rem}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card-h{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.card-h h3{font-size:1.25rem}
.playlist-item{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--line)}
.playlist-item:last-child{border-bottom:none}
.pl-mini{width:46px;height:46px;border-radius:8px;flex:none;background:linear-gradient(140deg,var(--orange-light),var(--orange-dark));display:grid;place-items:center;color:#fff;background-size:cover;background-position:center}
.pl-mini svg{width:20px;height:20px;opacity:.9}
.pl-song{font-weight:600;line-height:1.2}.pl-artist{color:var(--grey);font-size:.86rem}
.pl-time{margin-left:auto;color:var(--grey);font-size:.8rem;font-weight:500}
.pl-now{background:#FFF3EB}.pl-now .pl-time{color:var(--orange);font-weight:700}

.show{display:flex;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);align-items:center}
.show:last-child{border-bottom:none}
.show-time{font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--blue);width:66px;flex:none}
.show-name{font-family:var(--font-head);font-weight:700;font-size:1.1rem;line-height:1.1}
.show-host{color:var(--grey);font-size:.86rem}
.show.live{background:#FFF3EB}
.show .tag{margin-left:auto;background:var(--orange);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.68rem;padding:3px 9px;border-radius:5px}

.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mod{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:center;transition:.18s}
.mod:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.1)}
.mod-photo{height:170px;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:3.4rem;color:#fff;background-size:cover;background-position:center}
.mod-body{padding:16px}.mod-name{font-family:var(--font-head);font-weight:700;font-size:1.15rem}.mod-role{color:var(--grey);font-size:.86rem}

.actions{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.action{border-radius:14px;overflow:hidden;position:relative;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;padding:24px}
.action .kat{font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;opacity:.85}
.action h3{font-size:1.4rem;margin-top:6px}.action p{font-size:.9rem;opacity:.92;margin-top:6px}

.wunsch{background:var(--ink);color:#fff;border-radius:16px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
.wunsch::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(242,111,33,.25),transparent 70%);top:-120px;right:-60px}
.wunsch>*{position:relative;z-index:1}
.wunsch h2{font-size:2rem}.wunsch p{color:#b9b9c4;margin-top:6px;max-width:460px}

.content-page{padding:44px 0}
/* Seite ohne eigenen Text: nur die Überschrift, kein leerer Block darunter */
.content-page.nur-kopf{padding-bottom:0;min-height:0}
.content-page.nur-kopf h1{margin-bottom:0}
/* Kurze Seiten sollen den Bildschirm trotzdem füllen */
main{min-height:46vh}
.seiten-bausteine{padding-bottom:10px}
.seiten-module{padding:0 0 44px}
.seiten-module .module-block:first-child{margin-top:0}
/* Steht über dem Modul nur die Überschrift, braucht es etwas Luft */
.content-page.nur-kopf + .seiten-module{padding-top:22px}
.seiten-bausteine .pb-block:first-child .pb-inhalt{padding-top:var(--pb-oben,22px)}
.content-page h1{font-size:2.4rem;margin-bottom:18px}
.content-page .body{font-size:1.05rem;color:#333}
.content-page .body h2{font-size:1.6rem;margin:24px 0 10px}
.content-page .body p{margin:0 0 14px}
.content-page .body ul{margin:0 0 14px 22px}
.module-block{margin-top:28px}

footer{background:var(--ink);color:#a9a9b4;padding:50px 0 100px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot-brand .logo{color:#fff;margin-bottom:12px}.foot-brand p{font-size:.9rem;max-width:280px}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{width:38px;height:38px;border-radius:9px;background:var(--ink-2);display:grid;place-items:center;color:#fff}
.foot-social a:hover{background:var(--orange)}.foot-social svg{width:18px;height:18px}
footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
footer .fcol a{display:block;margin:8px 0;font-size:.9rem;color:#a9a9b4}
footer .fcol a:hover{color:#fff}
.foot-bottom{border-top:1px solid var(--ink-2);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem}

.player-bar{position:fixed;left:0;right:0;bottom:0;height:var(--player-h);background:linear-gradient(180deg,#212230,var(--ink));color:#fff;z-index:60;box-shadow:0 -2px 16px rgba(0,0,0,.28);display:flex;align-items:center;border-top:2px solid var(--orange)}
.pb-inner{max-width:1200px;margin:0 auto;padding:0 20px;width:100%;display:flex;align-items:center;gap:14px}
.pb-play{width:42px;height:42px;border-radius:50%;border:none;color:#fff;cursor:pointer;flex:none;display:grid;place-items:center;position:relative;background:linear-gradient(145deg,var(--orange-light,#ff8a3d),var(--orange) 55%,var(--orange-dark,#d95a12));box-shadow:0 4px 14px rgba(242,111,33,.45), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 6px rgba(0,0,0,.18);transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, filter .18s ease}
.pb-play:hover{transform:scale(1.09);filter:brightness(1.06);box-shadow:0 6px 20px rgba(242,111,33,.6), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 6px rgba(0,0,0,.18)}
.pb-play:active{transform:scale(.96);box-shadow:0 2px 8px rgba(242,111,33,.45), inset 0 2px 6px rgba(0,0,0,.25)}
.pb-play:focus-visible{outline:3px solid rgba(255,255,255,.65);outline-offset:3px}
.pb-play svg{width:27px;height:27px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));transition:transform .18s ease}
.pb-play:hover svg{transform:scale(1.08)}
/* sanfter Leuchtring, solange gespielt wird */
.pb-play::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--orange);opacity:0;pointer-events:none}
.player-bar.spielt .pb-play::after{animation:pbPuls 2.2s ease-out infinite}
@keyframes pbPuls{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(1.35)}100%{opacity:0;transform:scale(1.35)}}
.pb-cover{width:42px;height:42px;border-radius:9px;flex:none;background:linear-gradient(140deg,var(--orange-light),var(--orange-dark));display:grid;place-items:center;background-size:cover;background-position:center;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.pb-cover svg{width:18px;height:18px;opacity:.9}
.pb-meta{min-width:0;flex:1 1 auto;width:auto;padding-right:8px}
.pb-label{font-size:.6rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--orange-light)}
.pb-song{font-family:var(--font-head);font-weight:700;font-size:.92rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-artist{font-size:.76rem;color:#b9b9c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-progress{flex:0 0 auto;width:280px;display:flex;align-items:center;gap:8px;margin-left:auto}
.pb-time{font-size:.7rem;color:#b9b9c4;font-variant-numeric:tabular-nums;white-space:nowrap}
.pb-bar{flex:1;height:3px;background:rgba(255,255,255,.16);border-radius:3px;overflow:hidden}
.pb-fill{height:100%;width:0;background:var(--orange);border-radius:3px;transition:width 1s linear}
.pb-right{display:flex;align-items:center;gap:12px;flex:none}
.pb-vol{display:flex;align-items:center;gap:8px;color:#b9b9c4}.pb-vol input{width:80px;accent-color:var(--orange)}
.pb-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:.7rem;background:var(--orange);padding:4px 10px;border-radius:6px}
.pb-live .d{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite}

.gb-form{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:22px;margin:20px 0}
.gb-form input,.gb-form textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.95rem;margin-bottom:10px}
.gb-entry{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
.gb-entry .gb-name{font-family:var(--font-head);font-weight:700}
.gb-entry .gb-date{color:var(--grey);font-size:.8rem;font-weight:400}
.gb-entry .gb-text{margin-top:6px}



@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}.channels{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.mods{grid-template-columns:repeat(2,1fr)}.actions{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.topbar,.head-cta{display:none}.pb-meta{flex:1 1 auto;width:auto}.pb-vol{display:none}.foot-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Moderatorenfoto (Bild statt Initiale) */
.mod-photo img{width:100%;height:100%;object-fit:cover}
.mod-photo span{display:grid;place-items:center;width:100%;height:100%}

/* Sendeplan – Wochenansicht */
.schedule-sec .sec-head{margin-bottom:20px}
.wdays{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:22px}
.wday{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border:2px solid var(--line,#e6e6ea);border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;transition:.15s;color:var(--ink,#15161c)}
.wday:hover{border-color:var(--orange)}
.wday .wd-name{font-weight:800;font-size:1.05rem}
.wday .wd-date{font-size:.82rem;opacity:.7}
.wday.active{background:linear-gradient(140deg,var(--orange),var(--orange-light));border-color:var(--orange);color:#fff}
.wday.active .wd-date{opacity:.95}
.wday-panel{display:none}
.wday-panel.active{display:block}
.wd-title{font-family:var(--font-head);font-weight:800;font-size:1.3rem;margin-bottom:14px;color:var(--orange-dark)}
.srow{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line,#e6e6ea);border-radius:14px;padding:12px 16px;margin-bottom:10px}
.srow.live{border-color:var(--orange);box-shadow:0 4px 18px rgba(242,111,33,.15)}
.s-photo{width:var(--sp-start-bild,60px);height:var(--sp-start-bild,60px);border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.5rem;background-size:cover;background-position:center}
.s-photo img{width:100%;height:100%;object-fit:cover}
.s-photo span{display:grid;place-items:center;width:100%;height:100%}
.s-time{font-weight:800;font-size:1.05rem;color:var(--orange-dark);min-width:70px}
.s-main{flex:1}
.s-name{font-weight:700;font-size:1.1rem}
.s-host{font-size:.9rem;color:var(--grey,#6b6b76)}
.srow .tag{background:var(--orange);color:#fff;font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:20px;letter-spacing:.05em}
@media(max-width:760px){.wdays{grid-template-columns:repeat(7,1fr);gap:4px}.wday{padding:8px 2px}.wday .wd-name{font-size:.9rem}.wday .wd-date{font-size:.68rem}.s-time{min-width:56px;font-size:.95rem}}

/* Profi-Sendeplan: Kategorie & Beschreibung */
.s-cat{display:inline-block;background:var(--blue);color:#fff;font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:20px;vertical-align:middle;margin-left:6px;letter-spacing:.03em}
.s-descr{font-size:.85rem;color:var(--grey);margin-top:4px;line-height:1.4}
.s-descr p{margin:0}

/* Moderatoren-Galerie */
.team-h{text-align:center;margin-bottom:8px}
.tfilter{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;margin:8px 0 30px}
.tf{background:none;border:none;cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);padding:6px 2px;border-bottom:3px solid transparent;transition:.15s}
.tf:hover{color:var(--ink)}
.tf.active{color:var(--ink);border-bottom-color:var(--orange)}
.tmembers{display:grid;grid-template-columns:repeat(var(--tm-liste-sp,4),1fr);gap:24px}
.tmember{border-radius:6px;overflow:hidden;background:#111;box-shadow:0 10px 26px rgba(0,0,0,.16)}
.tm-photo{aspect-ratio:auto;height:var(--tm-liste-h,260px);background-size:cover;background-position:center top;background-color:#222}
.tm-photo.tm-noimg{display:grid;place-items:center;background:linear-gradient(140deg,var(--orange-light),var(--orange-dark))}
.tm-photo.tm-noimg span{font-family:var(--font-head);font-weight:800;font-size:3.4rem;color:#fff}
.tm-bar{background:linear-gradient(180deg,var(--orange),var(--orange-dark));color:#fff;text-align:center;padding:12px 10px}
.tm-name{font-family:var(--font-head);font-weight:800;font-size:1.05rem;letter-spacing:.04em}
.tm-roles{font-size:.82rem;opacity:.92;margin-top:2px}
@media(max-width:1000px){.tmembers{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.tmembers{grid-template-columns:repeat(2,1fr)}.tfilter{gap:16px}}
@media(max-width:420px){.tmembers{grid-template-columns:1fr}}
/* Footer-Logo */
.foot-logo{display:inline-block;margin-bottom:12px}

/* News */
.news-sec .sec-head{display:flex;justify-content:space-between;align-items:center}
.sec-more{color:var(--orange);font-weight:700;font-size:.9rem;white-space:nowrap}
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.news-card{display:flex;flex-direction:column;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.08);color:var(--ink);transition:.18s}
.news-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.14)}
.nc-img{aspect-ratio:5/4;background:linear-gradient(140deg,var(--orange-light),var(--orange-dark));background-size:cover;background-position:center;display:grid;place-items:center;color:#fff}
.nc-img svg{width:34px;height:34px;opacity:.85}
.nc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.nc-cat{align-self:flex-start;background:var(--orange);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:20px}
.nc-title{font-family:var(--font-head);font-weight:700;font-size:1.02rem;line-height:1.25}
.nc-sum{font-size:.86rem;color:var(--grey);line-height:1.45;flex:1}
.nc-date{font-size:.75rem;color:var(--grey);margin-top:2px}
@media(max-width:1000px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.news-grid{grid-template-columns:1fr}}
.news-back{color:var(--orange);font-weight:600;font-size:.9rem;display:inline-block;margin-bottom:14px}
.news-detail h1{font-size:2rem;line-height:1.2;margin-bottom:8px}
.news-meta{color:var(--grey);font-size:.9rem;margin-bottom:18px}
.news-content img{max-width:100%;height:auto;border-radius:10px;margin:12px 0}
.news-content iframe{max-width:100%}

/* AJAX-Seitenwechsel */
#smContent{transition:opacity .12s ease}
#smContent.sm-loading{opacity:.55}

/* News-Kategorie-Reiter */
.news-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.news-tab{padding:7px 16px;border-radius:30px;background:var(--white);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.86rem;transition:.15s}
.news-tab:hover{border-color:var(--orange)}
.news-tab.active{background:var(--orange);border-color:var(--orange);color:#fff}

/* News-Video (YouTube) */
.news-video{position:relative;aspect-ratio:16/9;margin:20px 0;border-radius:12px;overflow:hidden;background:#000}
.news-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============ HANDY / MOBILE ============ */
/* Überlauf-Schutz: nichts schiebt die Seite seitlich raus */
/* html,body{overflow-x:hidden}  <- entfernt: bricht position:sticky
   (siehe ausfuehrliche Erklaerung weiter unten) */
img,iframe,video{max-width:100%}
.wrap{width:100%}

/* Hamburger-Button (nur auf dem Handy sichtbar) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;cursor:pointer;padding:0 10px}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:.2s}
header.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.open .nav-toggle span:nth-child(2){opacity:0}
header.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  header{position:relative}
  .nav-toggle{display:flex}
  nav.main{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;background:#fff;padding:10px;box-shadow:0 14px 28px rgba(0,0,0,.14);border-top:1px solid var(--line);display:none;z-index:59;max-height:75vh;overflow-y:auto}
  header.open nav.main{display:flex}
  nav.main a{width:100%;padding:13px 14px;font-size:1.05rem}
  .head-cta{display:none}
  .head-inner{gap:12px;min-height:60px}
}

/* Player-Band aufs Wesentliche reduzieren */
@media(max-width:720px){
  .pb-progress{display:none}
  .pb-inner{gap:10px;padding:0 12px}
  .pb-meta{flex:1;width:auto;min-width:0}
  .pb-right{gap:8px}
}
@media(max-width:420px){
  .pb-live{display:none}
  .pb-label{font-size:.55rem}
  .pb-song{font-size:.86rem}
}

/* Allgemeine Abstände/Schrift auf kleinen Schirmen */
@media(max-width:560px){
  .wrap{padding:0 16px}
  .blk{padding:34px 0}
  .hero{padding:34px 0 28px}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .hero p.lead{font-size:1.02rem}
  .sec-head h2{font-size:1.5rem}
  .news-detail h1{font-size:1.6rem}
  .hero-actions{flex-wrap:wrap}
  .hero-actions .btn{flex:1;justify-content:center}
}

/* Kategorie-Reiter auf dem Handy horizontal scrollbar statt umbrechen */
@media(max-width:560px){
  .news-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .news-tab{white-space:nowrap;flex:none}
}
@media(max-width:560px){.mods{grid-template-columns:1fr 1fr}}

/* News-Detail: Bild max. 600x600, Text über die volle Breite */
@media(max-width:640px){.news-hero{max-width:100%}}
@media(max-width:560px){.lc-cover{width:72px;height:72px}}

/* ===== News-Detailseite (neu gestaltet) ===== */
.news-detail{max-width:none;margin:0}
.news-back{display:inline-flex;align-items:center;gap:6px;color:var(--orange);font-weight:600;font-size:.9rem;margin-bottom:22px;padding:7px 14px;border:1px solid var(--line);border-radius:30px;background:var(--white);transition:.15s}
.news-back:hover{border-color:var(--orange);transform:translateX(-2px)}

.nd-head{max-width:none;margin:0 0 30px}
.nd-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.nd-cat{margin-right:4px;background:var(--orange);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.nd-date{color:var(--grey);font-size:.86rem;font-weight:600}
.nd-title{font-family:var(--font-head);font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800;line-height:1.15;letter-spacing:-.5px;margin:0 0 14px}
.nd-lead{font-size:1.12rem;line-height:1.6;color:var(--grey);margin:0;padding-left:16px;border-left:3px solid var(--orange)}

.nd-body{display:block}
.nd-figure{margin:0 0 28px}
.news-hero{max-width:600px;max-height:600px;width:auto;height:auto;object-fit:contain;display:block;border-radius:16px;box-shadow:0 14px 36px rgba(0,0,0,.14)}

.news-content{max-width:none;font-size:1.06rem;line-height:1.75;color:var(--ink)}
.news-content p{margin:0 0 18px}
.news-content h2,.news-content h3{font-family:var(--font-head);font-weight:700;margin:30px 0 12px;line-height:1.25}
.news-content h2{font-size:1.5rem}
.news-content h3{font-size:1.22rem}
.news-content a{color:var(--orange);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.news-content ul,.news-content ol{margin:0 0 18px 22px}
.news-content li{margin-bottom:7px}
.news-content blockquote{margin:22px 0;padding:14px 20px;background:var(--sand,#faf7f4);border-left:4px solid var(--orange);border-radius:0 10px 10px 0;font-style:italic}

/* Video-Bereich */
.nd-videobox{margin:36px 0 8px;max-width:1000px}
.nd-vidtitle{font-family:var(--font-head);font-size:1.2rem;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.news-video{position:relative;aspect-ratio:16/9;margin:0;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 14px 36px rgba(0,0,0,.2)}
.news-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nd-more{margin:30px 0 0}

@media(max-width:640px){
  .nd-head{margin-bottom:22px}
  .nd-lead{font-size:1rem;padding-left:12px}
  .news-hero{max-width:100%;border-radius:12px}
  .news-content{font-size:1rem;line-height:1.7}
  .nd-videobox{margin:26px 0 6px}
  .news-video{border-radius:12px}
}

/* Streams-Übersicht */
.stream-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stream-card{background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.08);display:flex;flex-direction:column;transition:.18s}
.stream-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.14)}
.st-img{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#eee}
.st-img.st-leer{background:linear-gradient(140deg,var(--orange-light),var(--orange-dark))}
.st-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.st-genre{align-self:flex-start;background:var(--orange);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:20px}
.st-name{font-family:var(--font-head);font-weight:700;font-size:1.1rem}
.st-desc{font-size:.9rem;color:var(--grey);line-height:1.5;flex:1}
.st-play{align-self:flex-start;margin-top:4px}
@media(max-width:1000px){.stream-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.stream-grid{grid-template-columns:1fr}}

/* Gerade laufender Stream */
.channel.laeuft,.stream-card:has(.st-play.laeuft){outline:3px solid var(--orange);outline-offset:2px}
.st-play.laeuft{background:var(--orange-dark,#c85a12)}
.st-play.laeuft::after{content:' • läuft'}
.channel[data-stream]{cursor:pointer}

/* Bilder-Bereich auf der Startseite (bis zu 4 nebeneinander) */
.banner-grid{display:grid;gap:18px;align-items:start;grid-template-columns:repeat(var(--bsp,3),minmax(0,1fr))}
.banner-grid.banner-1{grid-template-columns:1fr}
.banner-grid.banner-2{grid-template-columns:repeat(2,1fr)}
.banner-grid.banner-3{grid-template-columns:repeat(3,1fr)}
.banner-grid.banner-4{grid-template-columns:repeat(4,1fr)}
.banner-item{position:relative;display:block;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.10);transition:.18s;background:#eee}
a.banner-item:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.16)}
/* Bild passt sich immer der Breite an – nichts wird abgeschnitten oder verzerrt */
.banner-item img{width:100%;height:auto;display:block;object-fit:contain;max-width:100%}
.banner-text{position:absolute;left:0;right:0;bottom:0;padding:20px 14px 12px;color:#fff;font-weight:700;font-size:.95rem;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0))}
/* Auf schmalen Bildschirmen zaehlt die Einstellung, nicht die Anzahl der Bilder.
   Die Klassen .banner-N muessen mitgenannt werden, sonst gewinnen sie (hoehere Genauigkeit). */
@media(max-width:900px){
  .banner-grid,.banner-grid.banner-3,.banner-grid.banner-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .banner-grid.banner-1{grid-template-columns:1fr}
}
@media(max-width:560px){
  .banner-grid,.banner-grid.banner-2,.banner-grid.banner-3,.banner-grid.banner-4{grid-template-columns:repeat(var(--bsp-h,1),minmax(0,1fr))}
  .banner-grid.banner-1{grid-template-columns:1fr}
}

/* Reiter über "Zuletzt gespielt" */
.pl-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:0 18px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.pl-tab{padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:var(--white);color:var(--ink);
  font-weight:600;font-size:.82rem;cursor:pointer;transition:.15s;white-space:nowrap}
.pl-tab:hover{border-color:var(--orange)}
.pl-tab.active{background:var(--orange);border-color:var(--orange);color:#fff}
.pl-now.versteckt{display:none}
@media(max-width:560px){.pl-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.pl-tab{flex:none}}

/* Menü mit Untermenüs */
.nav-gruppe{position:relative;display:inline-block}
.nav-haupt{display:inline-flex;align-items:center;gap:5px}
.nav-pfeil{font-size:.7em;opacity:.7;transition:transform .18s}
.nav-gruppe.offen .nav-pfeil{transform:rotate(180deg)}
/* Ein Hauptpunkt, dessen Unterseite gerade offen ist, sieht genauso aus wie
   ein aktiver Menuepunkt: heller Grund UND Signalfarbe. Vorher gab es nur die
   Farbe, der helle Grund fehlte – deshalb wirkte „Radio" anders als „News". */
/* Nur der Hintergrund – die Schriftfarbe kommt aus der Einstellung im
   Kopfbereich, damit sie nicht ueberstimmt wird. */
.nav-gruppe.active > .nav-haupt,
.nav-gruppe > .nav-haupt:hover,
.nav-gruppe.offen > .nav-haupt{background:var(--bg-soft)}
.nav-unter{position:absolute;top:100%;left:0;min-width:200px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.14);padding:8px;display:none;z-index:70}
/* Das Untermenü öffnet über eine Klasse, die das Skript setzt – nicht über
   :hover. Sonst stünde es nach einem Klick auf der NEUEN Seite sofort wieder
   offen, weil der Mauszeiger ja noch an derselben Stelle liegt. */
.nav-gruppe.offen > .nav-unter{display:block}
.nav-gruppe:focus-within > .nav-unter{display:block}
.nav-unter a{display:block;padding:9px 12px;border-radius:8px;white-space:nowrap;font-size:.94rem}
.nav-unter a:hover{background:var(--sand,#f6f2ee);color:var(--orange)}
.nav-unter a.active{color:var(--orange);font-weight:700}

/* Handy: Untermenüs eingerückt untereinander */
@media(max-width:860px){
  .nav-gruppe{display:block;width:100%}
  .nav-haupt{width:100%;padding:13px 14px;font-size:1.05rem}
  .nav-unter{position:static;display:block;border:0;box-shadow:none;padding:0 0 6px 14px;min-width:0;background:transparent}
  .nav-unter a{padding:10px 14px;font-size:1rem;opacity:.9}
  .nav-pfeil{display:none}
}

/* ===================== Songliste ===================== */
.sl-modul{--sl-akzent:var(--orange,#F26F21)}
.sl-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sl-reiter{display:inline-flex;background:#f2f2f5;border-radius:30px;padding:4px;gap:2px}
.sl-reiter-btn{padding:9px 20px;border-radius:26px;font-weight:600;font-size:.92rem;color:var(--grey);transition:.15s;white-space:nowrap}
.sl-reiter-btn:hover{color:var(--ink)}
.sl-reiter-btn.aktiv{background:#fff;color:var(--sl-akzent);box-shadow:0 2px 8px rgba(0,0,0,.10)}

.sl-suche{position:relative;display:flex;align-items:center;flex:1;min-width:220px;max-width:360px}
.sl-suche input{width:100%;height:44px;padding:10px 44px 10px 16px;border:1px solid var(--line);border-radius:24px;font-size:.95rem;background:#fff}
.sl-suche input:focus{outline:none;border-color:var(--sl-akzent);box-shadow:0 0 0 3px rgba(242,111,33,.14)}
.sl-suche button{position:absolute;right:6px;width:34px;height:34px;border:0;background:transparent;cursor:pointer;font-size:1rem}
.sl-loeschen{position:absolute;right:40px;color:var(--grey);font-size:.95rem}

.sl-info{color:var(--grey);font-size:.92rem;margin:0 0 14px}

/* Zeitraum-Steuerung */
.sl-zeitraum{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:12px 0}
.sl-pfeil{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  font-size:1.4rem;line-height:1;color:var(--ink);background:#fff;transition:.15s}
.sl-pfeil:hover{border-color:var(--sl-akzent);color:var(--sl-akzent)}
.sl-pfeil.aus{opacity:.35;pointer-events:none}
.sl-datum{font-family:var(--font-head);font-weight:700;font-size:1.12rem;min-width:230px;text-align:center}
.sl-heute{padding:8px 18px;border-radius:22px;border:1px solid var(--line);font-size:.88rem;font-weight:600;background:#fff}
.sl-heute.aktiv,.sl-heute:hover{background:var(--sl-akzent);border-color:var(--sl-akzent);color:#fff}

/* Wochenleiste */
.sl-tage{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:20px}
.sl-tag{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 6px;text-align:center;transition:.16s;display:block}
.sl-tag:hover{border-color:var(--sl-akzent);transform:translateY(-2px)}
.sl-tag.heute{background:var(--sl-akzent);border-color:var(--sl-akzent);color:#fff}
.sl-tag.aus{opacity:.4;pointer-events:none}
.sl-wt{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.sl-tz{display:block;font-family:var(--font-head);font-weight:800;font-size:1.5rem;line-height:1.2}
.sl-anzahl{display:block;font-size:.68rem;opacity:.75}

.sl-zusammenfassung{color:var(--grey);font-size:.92rem;margin:0 0 12px}

/* Titel-Liste */
.sl-liste{display:flex;flex-direction:column;gap:8px}
.sl-zeile{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-left:4px solid transparent;border-radius:12px;padding:10px 16px;transition:.15s}
.sl-zeile:hover{border-left-color:var(--sl-akzent);box-shadow:0 6px 18px rgba(0,0,0,.07);transform:translateX(2px)}
.sl-nr{width:34px;flex:none;text-align:center;font-size:.82rem;font-weight:700;color:#b6b6c0}
.sl-cover{width:54px;height:54px;flex:none;border-radius:9px;background-size:cover;background-position:center;background-color:#eee}
.sl-cover.leer{background:linear-gradient(140deg,var(--orange-light,#ff9a55),var(--orange-dark,#c95a15))}
.sl-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sl-titel{font-weight:700;font-size:1rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-interpret{font-size:.87rem;color:var(--grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-meta{display:flex;align-items:center;gap:12px;flex:none}
.sl-badge{background:#fff1e7;color:#c0521a;border:1px solid #f6cfb2;border-radius:20px;padding:3px 10px;font-size:.76rem;font-weight:700}
.sl-zeit{font-size:.85rem;color:var(--grey);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

/* Top-Titel */
.sl-charts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:pl}
.sl-chart-zeile{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 16px}
.sl-chart-zeile.top{border-color:#f6cfb2;background:linear-gradient(90deg,#fff8f3,#fff)}
.sl-platz{width:36px;flex:none;text-align:center;font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:#c9c9d2}
.sl-chart-zeile.top .sl-platz{color:var(--sl-akzent)}
.sl-balken{display:block;height:5px;background:#eee;border-radius:4px;overflow:hidden;margin-top:6px}
.sl-balken span{display:block;height:100%;background:linear-gradient(90deg,var(--orange-light,#ff9a55),var(--sl-akzent));border-radius:4px}
.sl-anz{flex:none;font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:var(--sl-akzent)}
.sl-anz small{font-size:.7em;opacity:.7;margin-left:1px}

/* Blättern */
.sl-blaettern{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:22px}
.sl-blaettern a,.sl-blaettern span{min-width:38px;height:38px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--line);background:#fff;font-size:.92rem;font-weight:600;padding:0 10px}
.sl-blaettern a:hover{border-color:var(--sl-akzent);color:var(--sl-akzent)}
.sl-blaettern .aktiv{background:var(--sl-akzent);border-color:var(--sl-akzent);color:#fff}
.sl-blaettern .aus,.sl-blaettern .punkte{opacity:.4;border-color:transparent;background:transparent}
.sl-seiteninfo{border:0!important;background:transparent!important;color:var(--grey);font-weight:400!important;margin-left:8px}

@media(max-width:760px){
  .sl-tage{grid-template-columns:repeat(4,1fr)}
  .sl-datum{min-width:0;font-size:1rem}
  .sl-nr{display:none}
  .sl-cover{width:46px;height:46px}
  .sl-kopf{flex-direction:column;align-items:stretch}
  .sl-suche{max-width:none}
}
@media(max-width:460px){.sl-tage{grid-template-columns:repeat(3,1fr)}.sl-zeit{display:none}}


/* Inhalt einer Seite in einer Box (einstellbar unter Seiten) */
.seiten-box{margin:0 0 10px}
.seiten-box h1{margin-top:0}
.content-page{transition:background .2s}

/* Eigene Hintergrundfarbe je Startseiten-Bereich */
.bereich-farbe > .blk{background:transparent}
.bereich-farbe{display:block}


/* Handy: Sender-Kacheln immer zwei nebeneinander, Streams-Seite untereinander */
@media(max-width:820px){
  .channels{grid-template-columns:repeat(2,1fr) !important;gap:12px}
  .stream-grid{grid-template-columns:1fr !important}
  .channel .ch-art{height:130px}
  .channel .ch-body{padding:12px}
  .channel .ch-name{font-size:.98rem}
  .channel .ch-desc{font-size:.82rem}
}
@media(max-width:380px){
  .channel .ch-art{height:110px}
}

/* Textblock mit Box */
.textblock-sec .textblock-box .sec-head{margin-top:0}
.textblock-sec .body{line-height:1.7}
.textblock-sec .body p{margin:0 0 14px}
.textblock-sec .body h2,.textblock-sec .body h3{font-family:var(--font-head);margin:18px 0 10px}
.textblock-sec .body ul,.textblock-sec .body ol{margin:0 0 14px 22px}

/* ---------- Bausteine auf Unterseiten ---------- */
.pb-block{margin:0}
.pb-block .pb-inhalt{max-width:1180px;margin:0 auto;padding:26px 20px}
.pb-flaeche{width:100%}
.pb-block .sec-head{margin-bottom:14px}
/* Bilder je Bildschirmgröße: --sp Rechner, --sp-t Tablet, --sp-h Handy */
.pb-bilder{display:grid;gap:16px;grid-template-columns:repeat(var(--sp,3),minmax(0,1fr))}
.pb-bilder.pb-sp1{grid-template-columns:1fr}
.pb-bilder.pb-sp2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pb-bilder.pb-sp3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pb-bilder.pb-sp4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pb-bild{margin:0}
.pb-bild img{width:100%;height:auto;display:block;border-radius:12px}
.pb-bild figcaption{font-size:.88rem;color:#6B6B76;margin-top:6px}


.pb-textbild .pb-tb-text > *:first-child{margin-top:0}
.pb-trenner{display:flex;align-items:center}
.pb-trenner hr{width:100%;max-width:1180px;margin:0 auto;border:none;border-top:1px solid rgba(0,0,0,.12)}
@media(max-width:820px){
  .pb-bilder{grid-template-columns:repeat(var(--sp-t,2),minmax(0,1fr))}
  .pb-bilder.pb-sp3,.pb-bilder.pb-sp4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pb-textbild,
}
@media(max-width:520px){
  .pb-bilder{grid-template-columns:repeat(var(--sp-h,1),minmax(0,1fr))}
  .pb-bilder.pb-sp2,.pb-bilder.pb-sp3,.pb-bilder.pb-sp4{grid-template-columns:1fr}
}
/* Seite ohne angezeigten Namen: kein leerer Kopfbereich */

/* ---------- Sichtbarkeit je Bildschirmgröße (Bausteine & Startseiten-Bereiche) ---------- */
.sm-nur-handy{display:none}
@media(max-width:760px){
  .sm-nur-gross{display:none !important}
  .sm-nur-handy{display:block}
}

/* ---------- Formatierungen aus dem Editor ----------
   Neue Texte bekommen die Ausrichtung direkt als CSS-Angabe. Diese Klassen
   sorgen dafür, dass auch früher gespeicherte Texte richtig dargestellt werden. */
.ql-align-center{text-align:center}
.ql-align-right{text-align:right}
.ql-align-justify{text-align:justify}
.ql-direction-rtl{direction:rtl;text-align:inherit}
.ql-size-small{font-size:.78em}
.ql-size-large{font-size:1.5em}
.ql-size-huge{font-size:2.2em}
.ql-font-serif{font-family:Georgia,'Times New Roman',serif}
.ql-font-monospace{font-family:ui-monospace,Menlo,Consolas,monospace}
.ql-indent-1{padding-left:3em}.ql-indent-2{padding-left:6em}.ql-indent-3{padding-left:9em}
.ql-indent-4{padding-left:12em}.ql-indent-5{padding-left:15em}.ql-indent-6{padding-left:18em}
.ql-indent-7{padding-left:21em}.ql-indent-8{padding-left:24em}
.pb-inhalt blockquote,.body blockquote{border-left:4px solid var(--orange);margin:14px 0;padding:6px 0 6px 16px;color:#444}
.pb-inhalt pre,.body pre{background:#F3F4F7;border-radius:10px;padding:14px 16px;overflow-x:auto;font-size:.9rem}
.pb-inhalt table,.body table{border-collapse:collapse;width:100%;margin:14px 0}
.pb-inhalt td,.pb-inhalt th,.body td,.body th{border:1px solid var(--line);padding:8px 10px}
@media(max-width:560px){
  .ql-indent-1,.ql-indent-2,.ql-indent-3,.ql-indent-4{padding-left:1.6em}
  .ql-indent-5,.ql-indent-6,.ql-indent-7,.ql-indent-8{padding-left:2.4em}
  .ql-size-huge{font-size:1.7em}
}

/* ---------- Letzte Absicherungen ---------- */
/* Lange Wörter und Adressen sprengen die Seite nicht mehr */
.pb-inhalt,.gb-text,.gb-entry,.body,.fm-modul,.news-text{overflow-wrap:anywhere}
.pb-inhalt a,.gb-text a,.body a{word-break:break-word}
@media(max-width:420px){
  .gb-knopf-gross{width:100%;justify-content:center;padding:14px 16px;font-size:.95rem}
  .wrap{padding-left:16px;padding-right:16px}
}

/* ---------- Grundsicherung für schmale Bildschirme ---------- */
/* ============================================================
   ACHTUNG: overflow-x NICHT auf html/body setzen
   ------------------------------------------------------------
   HIER LAG DER FEHLER, warum der Inhalt UEBER den Kopf lief.

   „overflow-x:clip" (oder :hidden) auf html oder body macht das
   Element zum Scroll-Behaelter. Damit verliert JEDES
   position:sticky darin seinen Halt – der Kopf klebt nicht mehr
   oben, und weil er dann mitscrollt, schiebt sich der Inhalt
   sichtbar darueber. Genau das war auf den Bildschirmfotos zu
   sehen: Logo und Menue hinter der News-Ueberschrift.

   Das ist ein bekanntes Verhalten und faellt nur auf, wenn man
   die beiden Regeln zusammen betrachtet – einzeln sieht jede
   harmlos aus.

   STATTDESSEN wird das seitliche Wackeln dort behandelt, wo es
   entsteht: bei Elementen, die breiter als das Fenster werden
   koennen. Das erledigen die Regeln darunter.
   ============================================================ */
/* html{overflow-x:clip}   <- entfernt, bricht position:sticky */
/* body{overflow-x:clip}   <- entfernt, bricht position:sticky */

/* Volle Breite ohne seitliches Wackeln: Nur die Elemente
   beschneiden, die tatsaechlich ueberstehen koennen. */
main,footer,.seiten-module,.seiten-bausteine{overflow-x:clip}
/* max-width:100% haelt Bilder, Tabellen und eingebettete Rahmen
   im Rahmen – die haeufigste Ursache fuer waagerechtes Scrollen. */
table,pre,iframe,video,img,svg{max-width:100%}
img,video,iframe{max-width:100%}
.pb-inhalt,.gb-text,.nd-body,.body{overflow-wrap:anywhere}   /* lange Adressen brechen um */
@media(max-width:760px){
  .wrap{padding:0 16px}
  .pb-block .pb-inhalt{padding:20px 16px}
  .sec-head h2{font-size:1.35rem}
  .content-page h1{font-size:1.7rem}
  .nd-titel{font-size:1.5rem}
}
@media(max-width:420px){
  .wrap{padding:0 12px}
  .pb-block .pb-inhalt{padding:16px 12px}
  .content-page h1{font-size:1.45rem}
}
/* Videodateien im News-Artikel (kein YouTube) */
.news-video-datei{position:static;padding:0;height:auto;background:#000;border-radius:12px;overflow:hidden}
.news-video-datei video{display:block;width:100%;height:auto;max-height:70vh;background:#000}

/* ============================================================
   ILLERTAL-DESIGN – heller Look mit Foto-Hero, Blau und Grün
   Baut auf den gemeinsamen Klassen auf und überschreibt sie.
   ============================================================ */
body{background:#fff;color:var(--ink-2)}
.wrap{max-width:1180px}

/* ---------- Kopfbild: Himmel und Landschaft ab der Seitenoberkante ----------
   Ein einziges Bild liegt hinter Menüleiste UND Hero – genau wie in der Vorlage. */
/* Das Bild deckt Menüleiste und Hero ab und wächst mit der Fensterbreite mit.
   „cover" füllt die Fläche immer vollständig – nichts wird gestaucht.
   Das Bild hat unten Reserve, damit das Radio auf keiner Breite abgeschnitten wird. */
/* Höhe des Bildbereichs: wächst mit der Breite, aber mit Ober- und Untergrenze */
/* 40,8 % der Breite – das Bild wurde links verbreitert, dadurch ist der
   Kopfbereich deutlich flacher, ohne dass etwas abgeschnitten wird.
   Die geschwungene Kante sitzt weiterhin genau unter dem Radio. */
/* Ebenen: Aufhellung 0, Inhalt 1, Menü 40 (damit das aufgeklappte
   Handy-Menü über allem liegt), Player-Leiste 60. */
main{position:relative;z-index:1}
.topbar{position:relative;z-index:41}

/* ---------- Kopfbereich ---------- */
.topbar{background:transparent;color:#4A5563;border-bottom:none}
.topbar a{color:#4A5563}
/* Die Menüleiste liegt im Bild und scrollt mit – wie in der Vorlage.
   (Sonst würde die durchsichtige Leiste beim Scrollen über dem Text kleben.) */
header{background:transparent;border-bottom:none;box-shadow:none;position:relative;z-index:40}
.nav a{color:#48525F;font-weight:500}
.nav a:hover{color:var(--ink-2)}
.nav a.active{color:var(--orange)}
.nav a.active::after{background:var(--orange)}
.head-cta .btn,.btn-orange{background:var(--blue);color:#fff;border-radius:999px;box-shadow:0 10px 24px rgba(0,90,198,.24)}
.head-cta .btn:hover,.btn-orange:hover{background:var(--blue-dark)}
.btn{border-radius:999px}
.btn-ghost{background:#fff;color:var(--ink-2);border:1px solid #DCE3EC}
.btn-ghost:hover{border-color:#B9C6D8;background:#fff}
.btn-white{background:#fff;color:var(--ink-2);border:1px solid #DCE3EC}

/* ---------- Hero: Himmel, Landschaft und Radio als Hintergrund ---------- */
.hero{position:relative;padding:0;overflow:visible;background:transparent}
.hero > *{position:relative;z-index:2}
/* Der Hero ist genau so hoch wie der Bildbereich – die geschwungene Kante
   sitzt dadurch immer unter dem Radio, nie mittendrin. */
.hero-grid{grid-template-columns:1fr 1.02fr;gap:34px;align-items:center;padding:20px 0 0;
  min-height:calc(var(--band-start) - 116px - var(--welle-h))}
/* Menüleiste transparent über dem Himmel – Schrift bleibt dunkel und lesbar */
.head-inner{padding-top:6px;padding-bottom:6px}
.nav a{text-shadow:0 1px 3px rgba(255,255,255,.85)}
.topbar{text-shadow:0 1px 3px rgba(255,255,255,.85)}
/* Das Radio steckt schon im Hintergrund – das Einzelbild nur auf schmalen Bildschirmen */
.hero-foto img{opacity:0}
.hero .badge{background:none;color:var(--blue-light);padding:0;font-size:.8rem;letter-spacing:.19em;text-transform:uppercase;font-weight:700}
.hero .badge .dot{display:none}
:root{--h1-basis:clamp(2.6rem,5.4vw,4.05rem)}
.hero h1{font-size:var(--h1-basis);font-weight:800;letter-spacing:-.035em;color:var(--ink-2);line-height:1.08}
.hero h1 em,.hero h1 span{font-style:normal;color:var(--orange)}
.hero .lead{color:#3C4652;max-width:400px;font-size:1.02rem}
.hero-actions .btn-white{background:var(--blue);color:#fff;border:none}
.hero-actions .btn-white:hover{background:var(--blue-dark)}
.hero-foto{position:relative}
.hero-foto img{width:100%;height:auto;display:block;border-radius:20px;
  -webkit-mask-image:linear-gradient(100deg,transparent 0,rgba(0,0,0,.6) 9%,#000 22%);
          mask-image:linear-gradient(100deg,transparent 0,rgba(0,0,0,.6) 9%,#000 22%)}
.hero-abzeichen{position:absolute;right:4%;bottom:12%;width:100px;height:100px;border-radius:50%;
  background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 14px 30px rgba(0,90,198,.35);text-align:center}
.hero-abzeichen b{font-size:1.05rem;line-height:1}
.hero-abzeichen i{font-style:normal;font-size:.66rem;opacity:.85;margin-top:3px}
.hero-welle{display:block;width:100%;height:clamp(56px,7vw,116px);color:#fff;position:relative;z-index:2;margin-top:-2px}

/* ---------- Merkmal-Karten ---------- */
.il-merkmale{background:#fff;border-bottom:1px solid #ECF1F7}
.il-merkmale .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.il-merkmal{padding:26px 24px;text-align:center;border-right:1px solid #ECF1F7}
.il-merkmal:last-child{border-right:none}
.il-merkmal img{
  /* Die Groesse kommt aus den Einstellungen (Design & Farben).
     object-fit:contain, damit ein hochgeladenes Bild mit anderem
     Seitenverhaeltnis nicht verzerrt wird, sondern hineinpasst. */
  width:var(--mk-icon,92px);
  height:var(--mk-icon,92px);
  object-fit:contain;
  margin:0 auto 14px;
  display:block;
}
@media(max-width:640px){
  /* Auf dem Handy hoechstens 72 Pixel – sonst schieben grosse Icons
     den Text aus dem Bild. Nie mehr als eingestellt. */
  .il-merkmal img{
    width:min(var(--mk-icon,92px),72px);
    height:min(var(--mk-icon,92px),72px);
  }
}
.il-merkmal h3{font-size:1rem;margin:0 0 7px;color:var(--ink-2)}
.il-merkmal p{margin:0;font-size:.87rem;color:#6E7A8A;line-height:1.55}

/* ---------- Dreier-Bereich ---------- */
.il-drei{padding:44px 0 10px;background:#fff}
.il-drei-grid{display:grid;grid-template-columns:.92fr 1.18fr .96fr;gap:26px;align-items:start}
.il-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.il-kopf h2{font-size:1.26rem;margin:0;color:var(--ink-2)}
.il-kopf h2::after{content:'';display:block;width:36px;height:3px;background:var(--orange);border-radius:3px;margin-top:9px}
.il-mehr{font-size:.83rem;font-weight:600;color:var(--blue);white-space:nowrap}
.il-karte{background:#fff;border:1px solid #E7EDF4;border-radius:14px;padding:18px;margin-bottom:16px;
  box-shadow:0 2px 10px rgba(8,35,73,.04)}
.il-now{display:flex;gap:14px}
.il-cover{width:82px;height:82px;flex:0 0 82px;border-radius:10px;background:#EEF2F7;display:grid;place-items:center;
  overflow:hidden;color:#9AA7B8}
.il-cover img{width:100%;height:100%;object-fit:cover}
.il-cover svg{width:34px;height:34px}
.il-onair{display:inline-block;background:var(--blue);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.07em;
  padding:5px 11px;border-radius:6px;text-transform:uppercase}
.il-song{font-weight:700;font-size:1.04rem;margin:10px 0 2px;color:var(--ink-2)}
.il-artist{color:#5A6472;font-size:.93rem}
.il-spieler{display:flex;align-items:center;gap:13px;margin-top:16px}
.il-play{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--blue);color:#fff;border:none;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 15px rgba(0,90,198,.28)}
.il-play svg{width:16px;height:16px}
.il-balken{flex:1;height:5px;border-radius:5px;background:#E9EEF4;overflow:hidden}
.il-balken span{display:block;height:100%;width:0;background:var(--orange);border-radius:5px;transition:width .4s linear}
.il-wunsch h3{font-size:1.04rem;margin:0 0 8px;color:var(--ink-2)}
.il-wunsch p{font-size:.9rem;color:#6E7A8A;margin:0 0 12px}
.il-nummer{font-size:1.55rem;font-weight:700;color:var(--orange);letter-spacing:-.02em;margin:0 0 14px;text-align:center}
.il-wunsch .btn{width:100%;justify-content:center}
.il-sendung{display:flex;gap:15px;padding:14px 0;border-bottom:1px solid #EEF2F7}
.il-sendung:last-child{border-bottom:none}
.il-sendung-bild{width:136px;height:90px;flex:0 0 136px;border-radius:10px;position:relative;
  background:#DDE5EE center/cover no-repeat}
.il-zeitmarke{position:absolute;left:8px;top:8px;background:rgba(255,255,255,.94);color:var(--ink-2);
  font-size:.68rem;font-weight:700;padding:4px 9px;border-radius:6px}
.il-zeitmarke.live{background:var(--orange);color:#fff}
.il-sendung h4{font-size:1rem;margin:0 0 6px;color:var(--ink-2)}
.il-zeit,.il-mod{font-size:.86rem;color:#6E7A8A}
.il-mod{margin-top:3px}
.il-mod b{color:var(--blue);font-weight:600}
.il-news{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid #EEF2F7;text-decoration:none}
.il-news:last-child{border-bottom:none}
.il-news-bild{width:80px;height:64px;flex:0 0 80px;border-radius:9px;background:#DDE5EE center/cover no-repeat}
.il-news b{display:block;font-size:.95rem;line-height:1.35;color:var(--ink-2)}
.il-news i{font-style:normal;font-size:.8rem;color:#8A94A3;display:block;margin-top:5px}
.il-voll{width:100%;justify-content:center}

/* ---------- Warum-Reihe ---------- */
.il-warum{padding:52px 0 48px;text-align:center;background:#fff}
.il-warum h2{font-size:1.5rem;display:inline-block;margin:0;color:var(--ink-2)}
.il-warum h2::after{content:'';display:block;width:40px;height:3px;background:var(--orange);border-radius:3px;margin:11px auto 0}
.il-warum-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:30px;text-align:left}
.il-warum-punkt{display:flex;gap:11px;align-items:flex-start}
.il-warum-punkt img{width:38px;height:38px;flex:0 0 38px}
.il-warum-punkt b{display:block;font-size:.94rem;margin-bottom:3px;color:var(--ink-2)}
.il-warum-punkt span{font-size:.83rem;color:#6E7A8A;line-height:1.5}

/* ---------- Fußzeile ---------- */
footer{background:var(--ink);color:#AEB8C6}
footer a{color:#AEB8C6}
footer a:hover{color:var(--orange)}
footer h4,footer h3{color:#fff}
.foot-bottom{border-top:1px solid #16294B;color:#6C7A8F}

/* Deutlich sichtbar, dass der Ton läuft */
body.ton-laeuft .il-onair{background:#1b8f3a}
body.ton-laeuft .il-onair::after{content:' · du hörst'}
body.ton-laeuft .il-karte{box-shadow:0 0 0 2px var(--orange),0 2px 10px rgba(8,35,73,.06)}
body.ton-laeuft .il-cover::after{content:'';position:absolute;right:6px;bottom:6px;width:10px;height:10px;
  border-radius:50%;background:#1b8f3a;box-shadow:0 0 0 3px rgba(255,255,255,.9);animation:tonPuls 1.4s infinite}
.il-cover{position:relative}
@keyframes tonPuls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
body.ton-laeuft .il-play{background:var(--orange)}

/* ---------- Player-Leiste ---------- */
.player-bar{background:#fff;color:var(--ink-2);border-top:1px solid #E7EDF4;box-shadow:0 -4px 20px rgba(8,35,73,.1)}
.player-bar .pb-title{color:var(--ink-2)}
.player-bar .pb-artist{color:#6E7A8A}
.pb-play{background:var(--blue)}
.pb-live{background:var(--blue)}
.pb-progress .bar span,.pb-vol input{accent-color:var(--orange)}

/* ---------- schmale Bildschirme ---------- */
@media(max-width:1000px){
  /* Auf schmalen Geräten steckt das Radio schon im Hintergrundbild –
     das zusätzliche Einzelbild entfällt, sonst sieht man es doppelt. */
  .hero-grid{grid-template-columns:1fr;padding-bottom:20px;min-height:calc(var(--band-start) - 96px - var(--welle-h))}
  .hero-foto{display:none}          /* das Radio ist bereits im Hintergrund */
  .hero-welle{margin-top:-40px}
  .il-merkmale .wrap{grid-template-columns:repeat(2,1fr)}
  .il-merkmal:nth-child(2){border-right:none}
  .il-merkmal:nth-child(-n+2){border-bottom:1px solid #ECF1F7}
  .il-drei-grid{grid-template-columns:1fr}
  .il-warum-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .il-merkmale .wrap{grid-template-columns:1fr}
  .il-merkmal{border-right:none;border-bottom:1px solid #ECF1F7}
  .il-warum-grid{grid-template-columns:1fr}
  .hero-abzeichen{width:78px;height:78px}
  .hero-abzeichen b{font-size:.9rem}
}


/* ---------- Läuft gerade: Rückmeldung an den Knöpfen ---------- */
.il-play.laeuft{background:var(--ink)}
.btn[data-play].laeuft{background:var(--ink);color:#fff;border-color:transparent}
.btn[data-play].laeuft::after{content:'';position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;
  background:#7BE58A;box-shadow:0 0 0 0 rgba(123,229,138,.7);animation:tonpuls 1.6s infinite}
.btn[data-play]{position:relative}
@keyframes tonpuls{70%{box-shadow:0 0 0 7px rgba(123,229,138,0)}100%{box-shadow:0 0 0 0 rgba(123,229,138,0)}}
body.ton-laeuft .il-onair{background:var(--orange)}

/* ============================================================
   SENDEPLAN – Darstellung „Tafel"
   Tagesreiter über einer Tabelle. Alle Farben kommen aus dem
   Design, damit es sich jedem Theme anpasst.
   ============================================================ */
.sp-tafel{--spt-signal:var(--orange);--spt-kopf:var(--ink);--spt-linie:#E7EAF0}
.sp-tafel .sec-head{margin-bottom:18px}

/* ---- Tagesreiter ---- */
.spt-reiter{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end}
.spt-reiter-knopf{position:relative;border:1px solid var(--spt-linie);border-bottom:none;background:#F8F9FB;
  border-radius:9px 9px 0 0;padding:8px 6px;cursor:pointer;text-align:center;font:inherit;color:var(--ink);
  transition:background .15s ease,color .15s ease}
.spt-reiter-knopf:hover{background:#EFF2F6}
.spt-tag{display:block;font-weight:700;font-size:.94rem;line-height:1.15}
.spt-datum{display:block;font-size:.79rem;color:var(--grey);margin-top:1px}
.spt-tag i,.spt-datum i{display:none;font-style:normal}     /* Kurzform nur auf schmalen Geräten */
/* Aktiver Reiter: etwas höher als die anderen, endet aber GENAU am Balken.
   Nur die kleine Spitze ragt hinein – so wie in der Vorlage gemessen
   (Körper bis zur Balkenkante, Spitze 9 Pixel tief, 20 Pixel breit). */
.spt-reiter-knopf.aktiv{background:var(--spt-signal);border-color:var(--spt-signal);color:#fff;
  padding-top:11px;padding-bottom:11px;margin-bottom:0;z-index:3;
  box-shadow:0 -2px 10px rgba(0,0,0,.10)}
.spt-reiter-knopf.aktiv .spt-datum{color:rgba(255,255,255,.9)}
.spt-reiter-knopf.aktiv::after{content:'';position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;
  border-top:9px solid var(--spt-signal);z-index:4}

/* ---- Kopfzeile der Tabelle ---- */
/* Der Balken schließt direkt an die Reiter an – kein Zwischenraum */
.spt-kopf{position:relative;display:grid;grid-template-columns:250px 1fr 345px;align-items:center;gap:0;
  background:var(--spt-kopf);color:#fff;border-radius:8px;padding:15px 22px;margin-top:0;
  font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.spt-k-mod{text-align:right}

/* ---- Zeilen ---- */
.spt-tafel-tag{display:none}
.spt-tafel-tag.aktiv{display:block}
.spt-zeile{display:block;
  background:#fff;border:1px solid var(--spt-linie);border-radius:10px;margin-top:10px;overflow:hidden;
  box-shadow:0 1px 3px rgba(16,23,33,.05)}
/* „12:00 – 14:00 Uhr" in einer Zeile – „Uhr" etwas kleiner und in Textfarbe */
.spt-inhalt{padding:26px 26px 26px 24px;border-left:2px solid var(--spt-signal);position:relative}
.spt-name{margin:0 0 6px;font-size:1.28rem;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;line-height:1.25;color:var(--ink)}
.spt-mod{color:var(--spt-signal);font-weight:600;margin-bottom:12px}
.spt-text{color:#5C6673;line-height:1.7;font-size:.97rem}
.spt-text p{margin:0 0 10px}
.spt-text p:first-child{color:var(--ink)}
.spt-text p:last-child{margin-bottom:0}
.spt-live{position:absolute;right:18px;top:22px;background:var(--spt-signal);color:#fff;font-size:.68rem;
  font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:6px}
/* Moderatorenbild: Höhe kommt aus der Verwaltung, die Breite folgt ihr
   automatisch (Verhältnis 69 zu 100). Es steht rechts im Textbereich und
   wird umflossen – ein langer Text läuft darunter weiter. */
.spt-bild{float:right;width:var(--spt-bild-b,345px);height:var(--spt-bild-h,500px);
  margin:0 0 16px 22px;background:#E6E7EB;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;shape-margin:16px}
.spt-bild:empty{display:none}
.spt-schluss{clear:both}
.spt-bild img{width:100%;height:100%;object-fit:cover;display:block}
.spt-leer{background:#fff;border:1px solid var(--spt-linie);border-radius:10px;padding:26px;margin-top:10px;color:var(--grey)}

/* ---- schmale Bildschirme ---- */
@media(max-width:1000px){
  .spt-kopf{grid-template-columns:190px 1fr;padding:13px 18px}
  .spt-k-mod{display:none}

  .spt-bild{float:none;width:100%;height:min(var(--spt-bild-h,500px),260px);margin:0 0 14px}
  .spt-inhalt{padding:20px}
}
@media(max-width:760px){
  /* Eine einzige Reihe, waagerecht wischbar – nie zwei Zeilen */
  .spt-reiter{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .spt-reiter::-webkit-scrollbar{display:none}
  .spt-reiter-knopf{flex:0 0 auto;min-width:76px;scroll-snap-align:center;padding:9px 10px}
  .spt-reiter-knopf.aktiv{padding:11px 12px}
  .spt-tag b,.spt-datum b{display:none}
  .spt-tag i,.spt-datum i{display:inline}
  .spt-tag{font-size:.92rem}
  .spt-datum{font-size:.74rem;margin-top:2px}
  .spt-kopf{display:none}

  .spt-inhalt{border-left:none;border-top:2px solid var(--spt-signal);margin:14px 18px 0;padding:16px 0 20px}
  .spt-bild{float:none;width:100%;height:min(var(--spt-bild-h,500px),200px);margin:0 0 12px}
  .spt-name{font-size:1.1rem}
}

/* Sendeplan auf der Startseite: nur der heutige Tag */
.schedule-sec.heute-nur .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.schedule-sec.heute-nur .sec-datum{color:var(--grey);font-size:.94rem;font-weight:600}
.schedule-sec.heute-nur .wday-panel{display:block}
.schedule-sec.heute-nur .sp-mehr{margin-top:16px;text-align:center}
@media(max-width:560px){.schedule-sec.heute-nur .sec-datum{font-size:.86rem}}

/* Soziale Netze in der Fußzeile */
.foot-netze{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.foot-netze a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.10);color:inherit;transition:background .15s ease,transform .15s ease,color .15s ease}
.foot-netze a svg{width:20px;height:20px}
.foot-netze a:hover{background:var(--netz,var(--orange));color:#fff;transform:translateY(-2px)}
@media(max-width:560px){.foot-netze a{width:36px;height:36px}.foot-netze a svg{width:18px;height:18px}}

/* ---------- Eigene Textfarben und -größen (Inhalte & Texte) ----------
   Ohne Einstellung greifen die Vorgaben des Designs. */
.logo{color:var(--ts-name-farbe,inherit)}
.logo em,.logo span{font-size:var(--ts-name-px,inherit)}
.topbar .freq{color:var(--ts-topbar-farbe,inherit);font-size:var(--ts-topbar-px,.82rem)}
.hero .badge{color:var(--ts-badge-farbe,inherit);font-size:var(--ts-badge-px,inherit)}
.hero h1{color:var(--ts-h1-farbe,inherit);font-size:var(--ts-h1-px,var(--h1-basis))}
.hero .lead{color:var(--ts-lead-farbe,inherit);font-size:var(--ts-lead-px,1.05rem)}
.sec-head h2,.il-kopf h2{color:var(--ts-sec-farbe,inherit);font-size:var(--ts-sec-px,1.5rem)}
footer .foot-brand p,footer p{color:var(--ts-foot-farbe,inherit);font-size:var(--ts-foot-px,inherit)}
.genre,.tagline{color:var(--ts-tagline-farbe,inherit);font-size:var(--ts-tagline-px,inherit)}

/* ---------- Kopfbereich der Unterseiten ----------
   Dasselbe Bild wie auf der Startseite, darunter die geschwungene Kante.
   Das Bild bleibt vollständig sichtbar; nur sein unterer Rand liegt hinter
   der Welle – so wie es auf der Startseite auch aussieht. */
/* Der Kopfbereich hält nur noch den Platz frei, damit das Bild zu sehen ist –
   ein Seitenname wird nicht mehr ausgegeben. */
/* Der Platzhalter bekommt seine Höhe direkt vom Template mitgeteilt.
   Hier steht nur noch die Höhe der Kopf- und Menüleiste, mit der gerechnet
   wird – sie ist auf kleineren Geräten kleiner. */
:root{--kopfleiste:116px}
.il-seitenkopf{position:relative;z-index:1;min-height:0}

/* Die Welle sitzt am unteren Rand des Bildbands, im Hintergrund.
   Ihre Lage ist getrennt einstellbar. */
.kopfband{overflow:visible}
@media(max-width:1000px){
  :root{--kopfleiste:92px}
}
@media(max-width:560px){
  :root{--kopfleiste:78px}
}

/* Alles unterhalb der Welle steht auf hellem Grund – sonst schiene das
   Kopfbild durch den Inhalt hindurch. */
/* Der Inhaltsbereich deckt alles unterhalb der Kante ab. Er ist mindestens
   so hoch, dass das Band darunter nicht mehr hervorschauen kann. */
/* Der Inhaltsbereich liegt ÜBER dem Kopfbild. Sein heller Grund beginnt genau
   dort, wo er anfängt – zieht man den Inhalt über die Welle nach oben, deckt er
   sie ab. Genau so ist es gedacht. */
/* Der Inhalt liegt ÜBER Bild und Welle – aber DURCHSICHTIG. Nur so ist das
   Bild dahinter zu sehen. Ein weißer Grund hier hat es bisher zugedeckt. */
.il-inhalt{position:relative;z-index:2;background:transparent;min-height:40vh}

/* Fünfter Weg (z. B. DAB+): steht mittig unter den beiden Spalten */



/* ============================================================
   KOPFBAND – das Bild am oberen Seitenrand
   ------------------------------------------------------------
   Das Bild liegt in einem EIGENEN Element mit fester Höhe,
   nicht mehr am Seitenkörper. Vorteile:
     · es kann sich nicht wiederholen (der Seitenkörper ist so
       hoch wie die ganze Seite, das Band nur so hoch wie nötig)
     · Start- und Unterseiten haben getrennte Werte
     · keine Wechselwirkung mit anderen Regeln
   ============================================================ */
/* Der Körper wird zum Bezugspunkt – sonst richtet sich das Band nach dem
   Fenster aus und an der rechten Seite bleibt ein heller Streifen stehen. */
body{position:relative}
.kopfband{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none;overflow:hidden;
  background-repeat:no-repeat;background-position:center top;background-color:#EAF3FC}
/* Aufhellung, damit die Schrift links lesbar bleibt */
.kopfband::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.84) 24%,rgba(255,255,255,.42) 44%,rgba(255,255,255,0) 60%)}

/* ---- Grundwerte ----
   Höhe und Bild stehen zusätzlich HIER. Das Template setzt beides noch einmal
   direkt am Element; sollte dort einmal eine ältere Datei liegen, hat das Band
   trotzdem eine Höhe und ein Bild – sonst wäre es 0 Pixel hoch und man sähe
   gar nichts. */
.kopfband{height:var(--band-unter);background-image:url("img/kopfbild-unterseite.webp")}

/* ---- Startseite ---- */
.kopfband.band-start,body.startseite .kopfband{
  height:var(--band-start);
  background-image:url("img/kopfbild.webp");
  background-size:100% auto;                      /* volle Breite, nichts abgeschnitten */
}
/* 40,8 % zeigen das Motiv bis zur Tischkante. Die Welle deckt davon die
   letzten Pixel ab – deshalb kommen ihre Höhe noch dazu, sonst wäre das
   Radio unten angeschnitten. */
:root{--band-start:calc(40.8vw + var(--welle-h) * 0.5)}

/* ---- Unterseiten ---- */
.kopfband.band-unter,body.unterseite .kopfband{
  height:var(--band-unter);
  background-image:url("img/kopfbild-unterseite.webp");
  background-size:100% auto;
}
:root{--band-unter:clamp(150px,23.4vw,460px)}

/* Inhalt liegt über dem Band. Alles unterhalb der geschwungenen Kante
   bekommt einen hellen Untergrund, damit das Band dort nicht durchscheint. */
/* Nur die Bausteine AM KOPF der Seite brauchen eine Ebene über dem Band.
   Fußzeile und Player-Leiste bleiben unangetastet – die Leiste ist fest
   am unteren Rand verankert und darf das nicht verlieren. */
.topbar,header,main{position:relative;z-index:1}
/* Auf UNTERSEITEN bleibt alles durchsichtig, damit Bild und Welle dahinter
   sichtbar sind. Nur die Bereiche der STARTSEITE stehen auf hellem Grund. */
body.startseite main > section:not(.hero){background:var(--bg,#fff)}
header{z-index:40}
.topbar{z-index:41}

/* ---- Tablet ---- */
@media(max-width:1000px){
  :root{--band-start:62vw;--band-unter:clamp(140px,26vw,300px)}
  .kopfband.band-start,body.startseite .kopfband{background-size:cover;background-position:70% top}
  .kopfband.band-unter,body.unterseite .kopfband{background-size:cover;background-position:center 40%}
  .kopfband::after{background:linear-gradient(100deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.70) 28%,rgba(255,255,255,.22) 56%,rgba(255,255,255,0) 76%)}
}
/* ---- Handy ---- */
@media(max-width:560px){
  :root{--band-start:96vw;--band-unter:clamp(120px,32vw,220px)}
  .kopfband.band-start,body.startseite .kopfband{background-size:cover;background-position:74% top}
  .kopfband.band-unter,body.unterseite .kopfband{background-size:cover;background-position:center 40%}
}


/* ---------- Weniger Luft zwischen Kopfbereich und Inhalt ----------
   Nach der geschwungenen Kante folgte bisher der volle Innenabstand der
   Seite – zusammen mit dem Abstand des ersten Bausteins wirkte das zu leer. */
.hero-welle + .il-inhalt > .content-page{padding-top:10px}
.hero-welle + .il-inhalt > .seiten-bausteine{padding-top:6px}
.hero-welle + .il-inhalt > .seiten-module{padding-top:6px}
.il-inhalt > .content-page.nur-kopf{padding-top:0;padding-bottom:0}
.il-inhalt > .content-page.nur-kopf + .seiten-bausteine{padding-top:10px}
/* Die Welle selbst darf etwas flacher sein, das spart weitere Höhe */
:root{--welle-h:clamp(44px,5vw,84px)}
.hero-welle{height:var(--welle-h)}
@media(max-width:1000px){
  :root{--welle-h:clamp(34px,5vw,60px)}
  .hero-welle + .il-inhalt > .content-page{padding-top:12px}
}


/* Steht auf einer Unterseite kein Seitenname (Haken „Name auf der Seite
   anzeigen" ist aus), soll der Kopfbereich auch keinen Platz brauchen.
   Der Inhalt rueckt dann dichter an das Menue. */
@media(max-width:1000px){
}



/* Sicherheitsnetz: Fußzeile und Player stehen immer auf eigenem Grund,
   damit dort niemals ein Rest des Kopfbildes durchscheint. */
footer{position:relative;z-index:1}
main{position:relative;z-index:1}


/* ============================================================
   UNTERSEITEN: EIN Bild, sonst nichts
   ------------------------------------------------------------
   Die geschwungene Kante ist in der Bilddatei enthalten. Es gibt
   also keine Welle als Element, keine Positionsrechnung und keine
   Einstellung, die verrutschen kann. Das Bild bestimmt seine Höhe
   selbst über sein Seitenverhältnis.
   ============================================================ */
/* Der Inhalt liegt darüber und ist durchsichtig, damit das Bild zu sehen ist */
body.unterseite main{position:relative;z-index:2;background:transparent}
body.unterseite .il-inhalt{background:transparent}
/* Der Inhalt beginnt kurz unter dem Menü – das Bild läuft dahinter weiter */
body.unterseite main{padding-top:14px}


/* ---------- Sendeplan: Zeit über der Überschrift ---------- */

/* „Weiterlesen“: der Text wird auf vier Zeilen gekürzt */


/* ---------- Moderatoren: Seite zur Person ---------- */


/* ============================================================
   UNTERSEITEN: Bild und Kante in EINEM Rahmen
   ------------------------------------------------------------
   Das Bild wird NICHT zugeschnitten. Es liegt in voller Breite
   da und bestimmt seine Höhe über sein eigenes Seitenverhältnis.
   Die geschwungene Kante sitzt am unteren Rand des Rahmens –
   der ist genau so hoch wie das Bild, also passt sie immer.
   ============================================================ */
.kopfrahmen{position:absolute;top:0;left:0;width:100%;z-index:0;
  pointer-events:none;user-select:none;line-height:0}
.kopfbild-unter{display:block;width:100%;height:auto}
.kopfwelle{position:absolute;left:0;bottom:-1px;width:100%;
  height:clamp(36px,4.5vw,74px);color:var(--bg,#fff);display:block}





/* „Weiterlesen“ – als eigene Zeile unter dem Text, immer anklickbar */
.spt-text.spt-gekuerzt{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.spt-text.spt-gekuerzt.offen{display:block;overflow:visible}



/* ---------- Moderatoren: Name als Verweis, eigene Seite ---------- */
.tm-name a{color:inherit;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .15s,color .15s}
/* Die Namensleiste hat einen farbigen Verlauf (im Illertal-Design gruen).
   Beim Ueberfahren darf die Schrift deshalb NICHT die Signalfarbe annehmen –
   das waere Gruen auf Gruen. Stattdessen bleibt sie weiss und bekommt eine
   weisse Unterstreichung; die Leiste hellt sich leicht auf. */
.tm-name a:hover,.tm-name a:focus-visible{color:#fff;border-bottom-color:rgba(255,255,255,.9)}
.tmember:hover .tm-bar{filter:brightness(1.08)}
.tm-name a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}



/* Überschrift nur für Suchmaschinen und Vorleseprogramme.
   Sie wird nicht angezeigt, ist aber im Quelltext vorhanden – das ist
   ausdrücklich erlaubt und gilt nicht als Verstecken von Inhalten. */
.nur-lesbar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* Ist eine feste Höhe eingestellt, füllt das Bild den Rahmen formatfüllend.
   Ohne Angabe bestimmt das Bild seine Höhe selbst (siehe .kopfrahmen oben). */
.kopfrahmen.fest{overflow:hidden}
.kopfrahmen.fest .kopfbild-unter{width:100%;height:100%;object-fit:cover;
  object-position:var(--bild-schnitt,center top)}


/* ============================================================
   SICHERHEITSNETZ FÜR DAS KOPFBILD
   ------------------------------------------------------------
   Egal wie ein Kopfbild in die Seite kommt – es liegt IMMER
   im Hintergrund und nimmt NIE Platz im Seitenfluss ein.
   Sonst schiebt es Logo und Menü nach unten, wie es beim
   Umschalten ohne Neuladen passiert ist.
   ============================================================ */
.kopfband,.kopfrahmen{position:absolute!important;top:0;left:0;width:100%;z-index:0}
/* Ein Bild ohne Rahmen (sollte nicht vorkommen) verhält sich genauso */
body > .kopfbild-unter{position:absolute;top:0;left:0;width:100%;height:auto;z-index:0}


/* ---------- Songliste und Charts: sauberer Abschluss ----------
   Die letzte Zeile hatte unten keine Linie – die Liste wirkte dadurch
   abgeschnitten. Diese Regeln schließen sie in jeder Variante ab:
   ob die Zeilen einen vollen Rahmen haben oder nur Trennlinien. */
.sl-liste,.sl-charts{border-bottom:0}
.sl-liste > *:last-child,.sl-charts > *:last-child{margin-bottom:0}

/* Variante mit Trennlinien: die letzte Zeile behält ihre Linie */
.sl-liste.linien > *,.sl-charts.linien > *{border-bottom:1px solid var(--line)}
.sl-liste.linien > *:last-child,.sl-charts.linien > *:last-child{border-bottom:1px solid var(--line)}

/* Ein Rahmen um die ganze Liste – dadurch ist sie unten immer abgeschlossen */
/* Rahmen um die ganze Liste – damit sie unten sauber abschliesst. */
.sl-liste,.sl-charts{border:1px solid var(--line);border-radius:14px;padding:8px;background:#fff}
/* Die Zeilen sind durch feine Linien getrennt und haben LINKS einen farbigen
   Streifen, der beim Ueberfahren aufleuchtet – so wie es dir gefallen hat. */
.sl-liste .sl-zeile,.sl-charts .sl-chart-zeile{border:0;border-bottom:1px solid var(--line);
  border-left:3px solid transparent;border-radius:0;background:transparent;box-shadow:none;
  padding:12px 14px;transition:border-left-color .15s,background .15s,transform .15s}
.sl-liste .sl-zeile:last-child,.sl-charts .sl-chart-zeile:last-child{border-bottom:0}
.sl-liste .sl-zeile:hover,.sl-charts .sl-chart-zeile:hover{
  border-left-color:var(--sl-akzent);background:var(--bg-soft,#F7F9FC);
  transform:translateX(2px);border-radius:0 10px 10px 0}


/* ============================================================
   SENDEPLAN – Karte einer Sendung
   ============================================================ */
.spt-zeile{display:block;position:relative;overflow:hidden}

/* Kopfleiste: die Uhrzeit sitzt oben in einem eigenen, farbigen Streifen */
/* Die Kopfleiste ist eine eigene Zeile in der Karte – sie sitzt ueber dem
   Inhalt und nimmt die volle Breite ein. Der farbige Streifen links laeuft
   durch, damit die Karte als Ganzes wirkt. */
/* ACHTUNG: .spt-kopf gehoert der Kopfzeile der Tafel („Zeit · Sendung ·
   Moderator") – die bleibt dunkel mit weisser Schrift. Die Zeitleiste in
   jeder Karte heisst deshalb .spt-zeitleiste. */
.spt-zeitleiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 24px;border-left:2px solid var(--spt-signal);
  background:var(--bg-soft,#F4F8FD);border-bottom:1px solid var(--line);
  color:var(--spt-signal,var(--orange));font-weight:700;font-size:1.02rem}
.spt-uhr{display:inline-flex;width:19px;height:19px;flex:none;color:inherit}
.spt-uhr svg{width:100%;height:100%;display:block}
.spt-von-bis{white-space:nowrap;color:inherit;letter-spacing:.01em}
.spt-von-bis i{font-style:normal;font-weight:600;opacity:.8}

/* Kategorie als kleines Schild rechts daneben */
.spt-kat{margin-left:auto;font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.spt-zeitleiste .spt-live{margin-left:8px}
.spt-zeile.live .spt-zeitleiste{background:linear-gradient(90deg,rgba(214,40,40,.10),transparent);
  border-bottom-color:rgba(214,40,40,.25)}

/* Inhalt */
.spt-inhalt{padding:0}
.spt-name{margin:0 0 4px;line-height:1.25}
.spt-mod{margin-bottom:12px}
.spt-mod a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:1px;transition:opacity .15s}
.spt-mod a:hover{opacity:.72}

/* „Weiterlesen“: steht direkt unter dem Text, umfließt das Bild NICHT */
.spt-text.spt-gekuerzt{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.spt-text.spt-gekuerzt.offen{display:block;overflow:visible}
.spt-mehr{display:inline-flex;align-items:center;gap:8px;position:relative;z-index:3;
  margin:10px 0 0;padding:9px 17px;cursor:pointer;
  background:var(--spt-signal,var(--orange));color:#fff;border:0;border-radius:999px;
  font:inherit;font-weight:700;font-size:.94rem;line-height:1;
  box-shadow:0 3px 12px rgba(0,0,0,.14);transition:filter .15s,transform .15s}
.spt-pfeil{font-size:.85em;transition:transform .2s;display:inline-block}
.spt-mehr.offen .spt-pfeil{transform:rotate(180deg)}
.spt-mehr:hover{filter:brightness(1.09);transform:translateY(-1px)}
.spt-mehr:active{transform:none}
.spt-schluss{clear:both;height:0}


/* Der Hauptpunkt mit Unterpunkten ist ein Knopf, kein Verweis – er soll aber
   genauso aussehen wie die uebrigen Menuepunkte. */
/* Der Knopf muss GENAU wie die uebrigen Menuepunkte sitzen – gleicher
   Innenabstand, gleiche Rundung, gleiche Ausrichtung. Ohne das sprang er
   aus der Reihe, weil ein <button> ab Werk andere Masse hat. */
/* KEIN font:inherit – diese Kurzform setzt auch die Schriftstaerke zurueck
   und ist spezifischer als die Regel aus dem Design. „Radio" war deshalb
   nicht fett wie die uebrigen Menuepunkte. Stattdessen nur das Noetige. */
/* Hier steht KEINE Angabe zu Schriftgroesse oder -staerke.
   Beides kommt aus der Design-Regel „nav.main a, .nav-haupt". Jede Angabe
   hier waere spezifischer und wuerde sie ausser Kraft setzen – genau deshalb
   war „Radio" nicht fett. Auch font-weight:inherit ist falsch: Es erbt von
   der Huelle, und die hat keine Staerke. */
/* Hier steht KEINE Angabe zu Schriftgroesse oder -staerke – beides kommt aus
   der Design-Regel „nav.main a, .nav-haupt". Die Schriftart muss dagegen
   ausdruecklich gesetzt werden: „font-family:var(--font-head)" steht im Design
   nur beim Verweis (a), nicht bei .nav-haupt. Ohne diese Zeile erbte der Knopf
   die Fliesstext-Schrift und wirkte dadurch breiter als die Nachbarn. */
button.nav-haupt{background:none;border:0;margin:0;color:inherit;
  font-family:var(--font-head);cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  padding:9px 13px;border-radius:7px;letter-spacing:inherit;
  vertical-align:middle;-webkit-appearance:none;appearance:none;text-align:inherit}
.nav-gruppe{display:inline-flex;align-items:center}
nav.main{align-items:center}
button.nav-haupt:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}


/* ---------- Moderatoren: weitere Bilder unter dem Text ----------
   Auf großen Bildschirmen bis zu vier nebeneinander, auf dem Handy immer
   ZWEI nebeneinander. Ist nur ein Bild hinterlegt, füllt es die volle
   Breite – auch auf dem Handy. */
.tm-galerie{display:grid;grid-template-columns:repeat(var(--tm-sp,4),1fr);gap:14px;margin-top:28px}
.tm-galerie.eins{grid-template-columns:1fr;max-width:640px}
.tm-g-bild{display:block;border-radius:12px;overflow:hidden;background:var(--bg-soft,#f1f3f7);
  aspect-ratio:4/3;transition:transform .18s,box-shadow .18s}
.tm-galerie.eins .tm-g-bild{aspect-ratio:16/10}
.tm-g-bild img{width:100%;height:100%;object-fit:cover;display:block}
.tm-g-bild:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.16)}
@media(max-width:900px){ .tm-galerie{grid-template-columns:repeat(min(var(--tm-sp,4),3),1fr);gap:12px} }
@media(max-width:640px){
  .tm-galerie{grid-template-columns:repeat(var(--tm-sp-h,2),1fr);gap:10px}
  .tm-galerie.eins{grid-template-columns:1fr}
}


/* ---------- Kopfzeile der Tafel („Zeit · Sendung · Moderator") ----------
   Sie ist wieder dunkel mit weisser Schrift. Die Spalten passen zur neuen
   einspaltigen Zeile: die Beschriftungen stehen nebeneinander. */
.spt-kopf{display:flex;align-items:center;gap:34px;grid-template-columns:none;
  background:var(--ink,#00183C);color:#fff;border:0;border-radius:10px;
  padding:13px 24px;margin-bottom:10px;
  font-family:var(--font-head);font-weight:700;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase}
.spt-kopf > span{color:#fff;opacity:.92}
.spt-k-zeit{min-width:120px}
.spt-k-sendung{flex:1}
.spt-k-mod{margin-left:auto}
@media(max-width:640px){
  .spt-kopf{gap:16px;padding:11px 16px;font-size:.74rem;letter-spacing:.08em}
  .spt-k-zeit{min-width:0}
}


/* ---------- Mehr Luft in der Sendungskarte ----------
   Bild und Text standen dicht am Rahmen. Jetzt haben sie ringsum Abstand,
   und das Bild ruecken wir vom rechten Rand ab. */
.spt-inhalt{padding:22px 26px 24px}
.spt-bild{margin:0 0 18px 24px}
.spt-zeile{padding:0}
.spt-text{line-height:1.7}
@media(max-width:640px){
  .spt-inhalt{padding:18px 16px 20px}
  .spt-bild{margin:0 0 14px}
  .spt-zeitleiste{padding:11px 16px}
}


/* ---------- „Deine Moderatoren" auf der Startseite ----------
   Vier Karten nebeneinander: das Bild oben, darunter Name und Funktion.
   Die Auswahl wechselt bei jedem Seitenaufruf, nicht im laufenden Betrieb –
   das war unruhig beim Lesen. */
.mods-vier{display:grid;grid-template-columns:repeat(var(--tm-start-sp,4),1fr);gap:20px}
.mods-vier .mod{display:block;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:transform .18s,box-shadow .18s}
.mods-vier .mod:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.mods-vier .mod-verweis{display:block;color:inherit;text-decoration:none}
/* WICHTIG: height:auto MUSS dabeistehen. Weiter oben setzt .mod-photo eine
   feste Hoehe von 170px – und ein festes height schlaegt jedes
   Seitenverhaeltnis. Genau deshalb hat sich die Bildhoehe hier lange gar
   nicht veraendert, egal welches Verhaeltnis ich eingetragen habe. */
.mods-vier .mod-photo{width:100%;height:var(--tm-start-h,371px);aspect-ratio:auto;background:var(--bg-soft,#f1f3f7);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.mods-vier .mod-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mods-vier .mod-photo span{font-family:var(--font-head);font-size:2.6rem;font-weight:800;color:var(--orange)}
.mods-vier .mod-body{padding:14px 16px 16px;text-align:center}
.mods-vier .mod-name{font-family:var(--font-head);font-weight:800;font-size:1.02rem;line-height:1.25}
.mods-vier .mod-role{font-size:.88rem;color:var(--orange);margin-top:3px}
.mods-vier .mod-verweis:hover .mod-name{color:var(--orange)}
@media(max-width:900px){ .mods-vier{grid-template-columns:repeat(2,1fr);gap:16px} }
@media(max-width:420px){ .mods-vier{grid-template-columns:repeat(2,1fr);gap:12px}
  .mods-vier .mod-body{padding:11px 10px 13px}
  .mods-vier .mod-name{font-size:.92rem} }


/* Der Knopf setzt weiter oben background:none. Damit der helle Grund eines
   aktiven Hauptpunktes sicher greift, steht er hier noch einmal mit dem
   Element im Waehler – das schlaegt die allgemeine Knopf-Regel eindeutig. */
.nav-gruppe.active > button.nav-haupt,
.nav-gruppe.offen > button.nav-haupt,
.nav-gruppe > button.nav-haupt:hover{background:var(--bg-soft)}


/* ============================================================
   SEITE EINES MODERATOREN
   ------------------------------------------------------------
   Oben Bild und Name nebeneinander, darunter der Text ueber die
   volle Breite. Lange Texte lesen sich so deutlich besser als
   in einer schmalen Spalte neben dem Bild.
   ============================================================ */
/* Keine eigene Begrenzung – die Seite nutzt dieselbe Breite wie alle anderen
   Unterseiten (die kommt vom Rahmen .wrap, 1180 px). */
.tm-seite{width:100%}

.tm-zurueck{display:inline-flex;align-items:center;gap:6px;margin-bottom:22px;
  font-weight:700;font-size:.94rem;color:var(--orange);text-decoration:none;
  padding:7px 14px;border-radius:999px;background:var(--bg-soft,#F4F8FD);
  transition:background .15s,transform .15s}
.tm-zurueck:hover{background:var(--orange);color:#fff;transform:translateX(-2px)}

/* Kopf: Bild links, Name und Funktion daneben – mittig zum Bild */
.tm-seite-kopf{display:grid;grid-template-columns:var(--tm-seite-b,400px) 1fr;gap:36px;
  align-items:center;padding-bottom:26px;margin-bottom:26px;
  border-bottom:1px solid var(--line)}
/* KEIN festes Verhaeltnis mehr: Die Hoehe richtet sich nach dem Bild selbst.
   Damit wird nichts abgeschnitten, egal ob Hoch- oder Querformat. */
.tm-seite-bild{border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.13);
  background:var(--bg-soft,#f1f3f7);align-self:start}
.tm-seite-bild img{width:100%;height:auto;display:block}
.tm-seite-bild.tm-noimg{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:4.2rem;font-weight:800;color:var(--orange);box-shadow:none}

.tm-seite-name{margin:0 0 8px;font-size:2.3rem;line-height:1.1;letter-spacing:-.01em}
.tm-seite-rollen{display:inline-block;color:#fff;background:var(--orange);
  font-weight:700;font-size:.92rem;letter-spacing:.02em;
  padding:6px 15px;border-radius:999px}

/* Der Text: volle Breite, ruhige Zeilenfuehrung */
/* Volle Breite, wie gewuenscht. */
.tm-seite-bio{font-size:1.06rem;line-height:1.8;color:var(--ink,#23232B);max-width:none}
.tm-seite-bio p{margin:0 0 16px}
.tm-seite-bio p:last-child{margin-bottom:0}
.tm-seite-bio h2,.tm-seite-bio h3{margin:26px 0 10px;line-height:1.3}
.tm-seite-bio h2{font-size:1.35rem}
.tm-seite-bio h3{font-size:1.12rem}
.tm-seite-bio strong,.tm-seite-bio b{color:var(--ink-2,#0b1b33)}
.tm-seite-bio a{color:var(--orange)}
.tm-seite-bio ul,.tm-seite-bio ol{margin:0 0 16px;padding-left:22px}
.tm-seite-bio li{margin-bottom:6px}
.tm-seite-bio img{max-width:100%;height:auto;border-radius:12px;margin:8px 0}
.tm-seite-leer{margin-top:6px}

@media(max-width:760px){
  .tm-seite-kopf{grid-template-columns:200px 1fr;gap:20px;
    padding-bottom:20px;margin-bottom:20px}
  .tm-seite-name{font-size:1.5rem}
  .tm-seite-rollen{font-size:.82rem;padding:5px 12px}
  .tm-seite-bio{font-size:1rem;line-height:1.72}
}
@media(max-width:430px){
  .tm-seite-kopf{grid-template-columns:140px 1fr;gap:15px}
  .tm-seite-name{font-size:1.3rem}
}


/* ============================================================
   ABSTÄNDE IM TEXTBAUSTEIN
   ------------------------------------------------------------
   Ganz oben steht *{margin:0} – das nimmt ALLEN Elementen den
   Abstand, auch den Absätzen. Für .body und .news-content gab
   es Ausnahmen, für den Textbaustein (.pb-inhalt) nicht.
   Deshalb klebten dort die Absätze aneinander, obwohl im
   Editor ein Abstand zu sehen war.
   ============================================================ */
.pb-inhalt p{margin:0 0 16px}
.pb-inhalt p:last-child{margin-bottom:0}
.pb-inhalt h1,.pb-inhalt h2,.pb-inhalt h3,.pb-inhalt h4{margin:26px 0 12px;line-height:1.3}
.pb-inhalt h1:first-child,.pb-inhalt h2:first-child,
.pb-inhalt h3:first-child,.pb-inhalt h4:first-child{margin-top:0}
.pb-inhalt ul,.pb-inhalt ol{margin:0 0 16px;padding-left:24px}
.pb-inhalt li{margin-bottom:6px}
.pb-inhalt li:last-child{margin-bottom:0}
.pb-inhalt hr{margin:22px 0;border:0;border-top:1px solid var(--line)}
.pb-inhalt img{max-width:100%;height:auto;border-radius:10px}
.pb-inhalt figure{margin:0 0 16px}
.pb-inhalt figcaption{font-size:.88rem;color:var(--grey,#6B6B76);margin-top:6px}

/* Ein leerer Absatz ist ein bewusster Abstand – er darf nicht zusammenfallen */
.pb-inhalt p:empty{min-height:1em;margin-bottom:16px}


/* ============================================================
   HANDY-ANSICHT – NACHGEBESSERT
   ============================================================ */
@media(max-width:860px){

  /* --- Die geschwungene Kante entfällt ---
     Auf schmalen Bildschirmen ist sie so flach, dass sie nur
     Platz kostet und das Bild anschneidet. */
  .kopfwelle{display:none}
  .kopfband{overflow:hidden}

  /* --- Der Menü-Knopf muss sich vom Bild abheben ---
     Er lag vorher durchsichtig auf dem Kopfbild und war kaum
     zu erkennen. */
  .nav-toggle{background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.10);
    box-shadow:0 3px 12px rgba(0,0,0,.20);backdrop-filter:blur(4px);flex:none}
  .nav-toggle span{background:var(--ink-2,#0b1b33)}
  header.open .nav-toggle{background:#fff}

  /* --- Das Logo darf nicht zu groß werden --- */
  .logo img{max-height:54px;width:auto}
  .head-inner{gap:10px;min-height:56px;padding:6px 0}

  /* --- Untermenüs im aufgeklappten Menü ---
     Der Hauptpunkt war ein schmaler Knopf mitten in der Liste.
     Jetzt füllt er die Zeile wie die übrigen Punkte. */
  .nav-gruppe{display:block;width:100%}
  .nav-gruppe > button.nav-haupt{display:flex;width:100%;justify-content:space-between;
    padding:13px 14px;font-size:1.05rem;border-radius:8px}
  .nav-gruppe .nav-pfeil{transition:transform .2s}
  .nav-gruppe.offen .nav-pfeil{transform:rotate(180deg)}
  .nav-unter{position:static;box-shadow:none;border:0;padding:0 0 0 12px;
    min-width:0;background:transparent;display:none}
  .nav-gruppe.offen .nav-unter{display:block}
  .nav-unter a{white-space:normal;padding:11px 14px;font-size:1rem;
    border-left:2px solid var(--line);border-radius:0}

  /* --- Kanäle: vier nebeneinander sind zu viel --- */
  .channels{grid-template-columns:repeat(2,1fr);gap:12px}
}

@media(max-width:430px){
  .logo img{max-height:46px}
  .channels{grid-template-columns:1fr}
  .nav-toggle{width:42px;height:42px}
}


/* Restliche Handy-Absicherungen: Diese Raster werden im aktiven Design
   vielleicht gar nicht benutzt – die Regel schadet aber nicht und verhindert,
   dass sie beim Wechsel des Designs zu breit werden. */
@media(max-width:760px){
  .il-merkmale .wrap{grid-template-columns:repeat(2,1fr);gap:14px}
  .il-warum-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:430px){
  .il-merkmale .wrap,.il-warum-grid{grid-template-columns:1fr}
}
/* Der Kopfrahmen ist immer genau so breit wie das Fenster – nie breiter. */
.kopfrahmen{max-width:100%;overflow:hidden}


/* ============================================================
   SENDEPLAN – Blättern durch die Wochen
   ============================================================ */
.spt-wochen{display:flex;align-items:stretch;gap:10px;margin:0 0 14px}
.spt-w-knopf{display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:12px 18px;border-radius:12px;text-decoration:none;
  background:#fff;border:1px solid var(--line);color:var(--ink-2,#0b1b33);
  font-family:var(--font-head);font-weight:700;font-size:.94rem;
  box-shadow:0 1px 3px rgba(16,23,33,.06);
  transition:border-color .15s,box-shadow .15s,transform .15s,background .15s}
.spt-w-knopf svg{width:17px;height:17px;flex:none}
.spt-w-knopf:hover{border-color:var(--spt-signal);color:var(--spt-signal);
  box-shadow:0 6px 18px rgba(0,0,0,.10);transform:translateY(-1px)}
.spt-w-knopf:active{transform:none}
/* Am Ende des Zeitraums: sichtbar, aber ohne Wirkung */
.spt-w-knopf.aus{opacity:.38;cursor:default;box-shadow:none}
.spt-w-knopf.aus:hover{border-color:var(--line);color:var(--ink-2,#0b1b33);transform:none;box-shadow:none}

.spt-w-mitte{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:9px 14px;border-radius:12px;
  background:var(--bg-soft,#F4F8FD);border:1px solid var(--line);text-align:center}
.spt-w-zeitraum{font-family:var(--font-head);font-weight:800;font-size:1.06rem;
  color:var(--ink-2,#0b1b33);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.spt-w-kw{font-size:.82rem;font-weight:700;color:var(--spt-signal);
  text-transform:uppercase;letter-spacing:.06em}

.spt-w-heute{text-align:center;margin:-6px 0 14px}
.spt-w-heute a{display:inline-block;padding:7px 16px;border-radius:999px;
  background:var(--spt-signal);color:#fff;text-decoration:none;
  font-weight:700;font-size:.88rem;transition:filter .15s}
.spt-w-heute a:hover{filter:brightness(1.09)}

@media(max-width:640px){
  .spt-wochen{gap:7px}
  .spt-w-knopf{padding:11px 12px;font-size:.86rem;gap:6px}
  .spt-w-knopf span{display:none}          /* nur noch die Pfeile */
  .spt-w-knopf svg{width:19px;height:19px}
  .spt-w-zeitraum{font-size:.96rem}
  .spt-w-kw{font-size:.74rem}
}


/* Groesse des Sendungsnamens im Startseiten-Bereich – einstellbar. */
.schedule-sec .s-name{font-size:var(--sp-start-titel,1rem)}


/* ---------- Menuefarben abgesichert ----------
   Fehlt eine Farb-Variable (etwa weil eine alte Stylesheet-Fassung im Browser
   haengt), waere color:var(--x) ungueltig und die Verweise erschienen in der
   Vorgabefarbe des Browsers. Mit einem Rueckfallwert kann das nicht passieren. */
/* KEINE Farbangabe fuer button.nav-haupt!
   Das Template schreibt die im Kopfbereich eingestellte Menuefarbe als
        nav.main > a, .nav-haupt { color: … }
   Eine eigene Regel mit „button.nav-haupt" waere spezifischer und haette
   diese Einstellung ausgehebelt – die Verweise waren dann in der gewaehlten
   Farbe, die Menuepunkte mit Untermenue aber dunkel. Genau der Fehler.
   Hier steht deshalb nur noch der HINTERGRUND, nicht die Schriftfarbe. */
nav.main > a:hover,nav.main > a.active{background:var(--bg-soft,#F4F8FD)}
.nav-gruppe.active > button.nav-haupt,
.nav-gruppe.offen > button.nav-haupt,
.nav-gruppe > button.nav-haupt:hover{background:var(--bg-soft,#F4F8FD)}


/* ============================================================
   SENDER – KARTEN UND EIGENE SEITE
   ------------------------------------------------------------
   Auf der Karte steht nur ein kurzer Auszug. Lange Texte haben
   die Karten vorher in die Länge gezogen, während die Nachbarn
   leer blieben – siehe „Illerpower" gegen „Chartbreaker".
   ============================================================ */
.stream-card{display:flex;flex-direction:column}
.st-body{display:flex;flex-direction:column;flex:1}
.st-desc{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;margin:0 0 14px;line-height:1.6}
.st-mehr{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  margin:0 0 12px;font-weight:700;font-size:.92rem;color:var(--orange,#F26F21);
  text-decoration:none;border-bottom:1px solid transparent;transition:.15s}
.st-mehr svg{width:15px;height:15px;transition:transform .15s}
.st-mehr:hover{border-bottom-color:currentColor}
.st-mehr:hover svg{transform:translateX(3px)}
.stream-card .st-play{margin-top:auto}

/* ---------- Die eigene Seite eines Senders ---------- */
.sd-seite{width:100%}
.sd-zurueck{display:inline-flex;align-items:center;gap:6px;margin-bottom:22px;
  font-weight:700;font-size:.94rem;color:var(--orange,#F26F21);text-decoration:none;
  padding:7px 14px;border-radius:999px;background:var(--bg-soft,#F4F8FD);
  transition:background .15s,transform .15s}
.sd-zurueck:hover{background:var(--orange,#F26F21);color:#fff;transform:translateX(-2px)}

.sd-kopf{display:grid;grid-template-columns:var(--sd-bild-b,340px) 1fr;gap:34px;
  align-items:center;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.sd-bild{border-radius:16px;overflow:hidden;background:var(--bg-soft,#f1f3f7);
  box-shadow:0 10px 30px rgba(0,0,0,.13);align-self:start}
.sd-bild img{width:100%;height:auto;display:block}
.sd-bild.sd-leer{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:3.6rem;font-weight:800;color:var(--orange,#F26F21);box-shadow:none}
.sd-genre{display:inline-block;background:var(--orange,#F26F21);color:#fff;
  font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 13px;border-radius:999px;margin-bottom:12px}
.sd-name{margin:0 0 16px;font-size:2.2rem;line-height:1.15;letter-spacing:-.01em}
.sd-play{display:inline-flex;align-items:center;gap:9px}

.sd-text{font-size:1.06rem;line-height:1.8;color:var(--ink,#23232B)}
.sd-text p{margin:0 0 16px}
.sd-text p:last-child{margin-bottom:0}
.sd-text h2,.sd-text h3{margin:26px 0 10px;line-height:1.3}
.sd-text h2{font-size:1.35rem}
.sd-text h3{font-size:1.12rem}
.sd-text ul,.sd-text ol{margin:0 0 16px;padding-left:22px}
.sd-text li{margin-bottom:6px}
.sd-text img{max-width:100%;height:auto;border-radius:12px;margin:8px 0}
.sd-text a{color:var(--orange,#F26F21)}
.sd-text strong,.sd-text b{color:var(--ink-2,#0b1b33)}

@media(max-width:760px){
  .sd-kopf{grid-template-columns:180px 1fr;gap:20px;padding-bottom:20px;margin-bottom:20px}
  .sd-name{font-size:1.45rem;margin-bottom:12px}
  .sd-text{font-size:1rem;line-height:1.72}
}
@media(max-width:430px){
  .sd-kopf{grid-template-columns:1fr;gap:16px}
  .sd-name{font-size:1.3rem}
}


/* ---------- Sender-Karten ohne Beschreibungstext ----------
   Ohne Text wirkte die Karte oben zu gedrängt und unten zu leer. Diese
   Abstände sorgen dafür, dass Genre, Name und Knöpfe gleichmäßig sitzen –
   und alle Karten gleich hoch sind. */
.stream-card .st-body{gap:0;padding:18px 20px 20px}
.stream-card .st-genre{margin:0 0 10px;align-self:flex-start}
.stream-card .st-name{margin:0 0 16px;line-height:1.3}
.stream-card .st-mehr{margin:0 0 16px}
.stream-card .st-play{margin-top:auto;align-self:flex-start}


/* ============================================================
   PRIVATSPHÄRE-HINWEIS
   ------------------------------------------------------------
   Sachlich gehalten: keine Symbole, keine Warnfarben, beide
   Knöpfe gleich gewichtet. Eine hervorgehobene Zustimmung wäre
   rechtlich angreifbar.
   ============================================================ */
.ps-kasten{position:fixed;left:0;right:0;bottom:0;z-index:9000;
  background:rgba(12,18,28,.34);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;padding:16px}
.ps-kasten.ps-mitte{align-items:center}
.ps-kasten[hidden]{display:none}
body.ps-offen{overflow:hidden}

.ps-inner{width:100%;max-width:660px;background:#fff;border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);padding:26px 28px;
  max-height:86vh;overflow-y:auto}
.ps-titel{margin:0 0 10px;font-size:1.28rem;line-height:1.25}
.ps-text{margin:0 0 18px;font-size:.98rem;line-height:1.65;color:var(--ink,#23232B)}

.ps-liste{margin:0 0 18px;border-top:1px solid var(--line);padding-top:6px}
.ps-liste[hidden]{display:none}
.ps-zweck{padding:13px 0;border-bottom:1px solid var(--line)}
.ps-zweck:last-child{border-bottom:0}
.ps-schalter{display:flex;align-items:center;gap:11px;cursor:pointer;font-weight:700}
.ps-schalter input{width:19px;height:19px;flex:none;accent-color:var(--orange,#F26F21);cursor:pointer}
.ps-schalter input:disabled{cursor:default;opacity:.55}
.ps-zname i{font-style:normal;font-weight:400;font-size:.84rem;color:var(--grey,#6B6B76)}
.ps-ztext{margin:6px 0 0 30px;font-size:.9rem;line-height:1.6;color:var(--grey,#6B6B76)}

.ps-knoepfe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ps-btn{flex:1 1 180px;min-height:48px;padding:13px 20px;cursor:pointer;
  font:inherit;font-weight:700;font-size:.98rem;
  border:1px solid var(--ink-2,#0b1b33);border-radius:12px;
  background:#fff;color:var(--ink-2,#0b1b33);
  transition:background .15s,color .15s,transform .12s}
.ps-btn:hover{background:var(--ink-2,#0b1b33);color:#fff}
.ps-btn:active{transform:translateY(1px)}
.ps-btn-voll{flex:1 1 100%;background:var(--orange,#F26F21);border-color:var(--orange,#F26F21);color:#fff}
.ps-btn-voll:hover{filter:brightness(1.08);background:var(--orange,#F26F21);color:#fff}
.ps-mehr{flex:0 0 auto;background:none;border:0;padding:13px 6px;cursor:pointer;
  font:inherit;font-size:.94rem;color:var(--grey,#6B6B76);text-decoration:underline}
.ps-mehr:hover{color:var(--ink-2,#0b1b33)}
.ps-auswahl{margin-top:10px}
.ps-auswahl[hidden]{display:none}
.ps-recht{margin:16px 0 0;font-size:.86rem;color:var(--grey,#6B6B76)}
.ps-recht a{color:var(--grey,#6B6B76)}
.ps-recht a:hover{color:var(--orange,#F26F21)}

/* Gesperrter fremder Inhalt */
.ps-sperre{border:1px dashed var(--line);border-radius:14px;padding:26px 22px;
  text-align:center;background:var(--bg-soft,#F4F8FD)}
.ps-sperre-titel{font-family:var(--font-head);font-weight:800;margin:0 0 8px;font-size:1.02rem}
.ps-sperre-text{margin:0 0 16px;font-size:.92rem;line-height:1.6;color:var(--grey,#6B6B76)}
.ps-sperre-btn{display:inline-block;padding:11px 20px;border-radius:999px;cursor:pointer;
  background:var(--orange,#F26F21);color:#fff;border:0;font:inherit;font-weight:700;font-size:.94rem}
.ps-sperre-btn:hover{filter:brightness(1.08)}

@media(max-width:560px){
  .ps-kasten{padding:0}
  .ps-inner{border-radius:18px 18px 0 0;padding:22px 20px;max-height:90vh}
  .ps-titel{font-size:1.14rem}
  .ps-btn{flex:1 1 100%}
  .ps-mehr{flex:1 1 100%;text-align:center;padding:8px}
}


/* ============================================================
   WETTER
   ------------------------------------------------------------
   Zurückhaltend gehalten: die Zeichen sind schlichte Linien in
   der Senderfarbe, keine bunten Symbolsammlungen. Die Zahlen
   tragen die Aussage, nicht die Bilder.
   ============================================================ */
.wz{width:44px;height:44px;color:var(--orange,#F26F21);display:block}
.wz-gross{width:104px;height:104px}
.wz-mittel{width:64px;height:64px}
.wz-klein{width:30px;height:30px}

/* ---------- Kasten auf der Startseite ---------- */
.wt-kasten{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;display:flex;flex-direction:column;height:100%;
  box-shadow:0 1px 3px rgba(16,23,33,.05)}
.wt-k-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wt-k-ort{font-size:.82rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--grey,#6B6B76)}
.wt-k-grad{font-family:var(--font-head);font-weight:800;font-size:2.9rem;line-height:1;
  margin:6px 0 2px;letter-spacing:-.02em;color:var(--ink-2,#0b1b33)}
.wt-k-grad i{font-style:normal;font-size:.42em;font-weight:700;vertical-align:.9em;margin-left:2px;
  color:var(--grey,#6B6B76)}
.wt-k-lage{font-size:.96rem;color:var(--ink,#23232B)}
.wt-k-tage{display:flex;gap:6px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.wt-k-tag{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.wt-k-wt{font-size:.78rem;font-weight:700;color:var(--grey,#6B6B76);letter-spacing:.04em}
.wt-k-max{font-family:var(--font-head);font-weight:800;font-size:1.02rem;color:var(--ink-2,#0b1b33)}
.wt-k-mehr{display:inline-flex;align-items:center;gap:6px;margin:16px 0 0;
  font-weight:700;font-size:.92rem;color:var(--orange,#F26F21);text-decoration:none;
  border-bottom:1px solid transparent;align-self:flex-start;transition:.15s}
.wt-k-mehr svg{width:15px;height:15px;transition:transform .15s}
.wt-k-mehr:hover{border-bottom-color:currentColor}
.wt-k-mehr:hover svg{transform:translateX(3px)}

/* ---------- Die eigene Seite ---------- */
.wt-orte{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.wt-ort{padding:9px 17px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.94rem;
  background:#fff;border:1px solid var(--line);color:var(--ink-2,#0b1b33);transition:.15s}
.wt-ort:hover{border-color:var(--orange,#F26F21);color:var(--orange,#F26F21)}
.wt-ort.aktiv{background:var(--orange,#F26F21);border-color:var(--orange,#F26F21);color:#fff}

.wt-heute{display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--bg-soft,#F4F8FD);border:1px solid var(--line);border-radius:18px;
  padding:28px 32px;margin:0 0 16px}
.wt-ortname{font-size:.84rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey,#6B6B76)}
.wt-grad{font-family:var(--font-head);font-weight:800;font-size:4.4rem;line-height:1;
  margin:8px 0 4px;letter-spacing:-.03em;color:var(--ink-2,#0b1b33)}
.wt-grad i{font-style:normal;font-size:.32em;font-weight:700;vertical-align:1.1em;margin-left:4px;
  color:var(--grey,#6B6B76)}
.wt-lage{font-size:1.12rem;color:var(--ink,#23232B)}
.wt-gefuehlt{font-size:.92rem;color:var(--grey,#6B6B76);margin-top:4px}

.wt-werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0 0 22px}
.wt-wert{background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.wt-w-lbl{font-size:.8rem;color:var(--grey,#6B6B76)}
.wt-w-val{font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:var(--ink-2,#0b1b33)}

.wt-liste{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.wt-tag{display:grid;grid-template-columns:130px 52px 1fr 96px 62px;gap:14px;align-items:center;
  padding:13px 18px;border-bottom:1px solid var(--line);transition:background .15s}
.wt-tag:last-child{border-bottom:0}
.wt-tag:hover{background:var(--bg-soft,#F4F8FD)}
.wt-tag.heute{background:var(--bg-soft,#F4F8FD)}
.wt-t-name{font-family:var(--font-head);font-weight:800;font-size:1rem;color:var(--ink-2,#0b1b33)}
.wt-t-name span{display:block;font-family:inherit;font-weight:400;font-size:.8rem;
  color:var(--grey,#6B6B76);margin-top:1px}
.wt-t-zeichen .wz{width:34px;height:34px}
.wt-t-lage{font-size:.94rem;color:var(--ink,#23232B)}
.wt-t-grad{text-align:right;font-family:var(--font-head);font-size:1.04rem;white-space:nowrap}
.wt-t-grad b{font-weight:800;color:var(--ink-2,#0b1b33)}
.wt-t-grad span{font-weight:400;color:var(--grey,#6B6B76);margin-left:7px}
.wt-t-regen{text-align:right;font-size:.9rem;color:var(--grey,#6B6B76);white-space:nowrap}

.wt-quelle{margin:16px 0 0;font-size:.84rem;color:var(--grey,#6B6B76)}
.wt-quelle a{color:var(--grey,#6B6B76);text-decoration:underline}
.wt-quelle a:hover{color:var(--orange,#F26F21)}
.wt-alt{margin:14px 0 0;font-size:.88rem;color:#8a6d3b;background:#FFF7E8;
  border:1px solid #F0D9A8;border-radius:10px;padding:10px 14px}

@media(max-width:760px){
  .wt-heute{padding:22px 20px;gap:14px}
  .wt-grad{font-size:3.2rem}
  .wz-gross{width:74px;height:74px}
  .wt-tag{grid-template-columns:92px 38px 1fr 76px;gap:10px;padding:12px 14px}
  .wt-t-regen{display:none}
  .wt-t-lage{font-size:.86rem}
}
@media(max-width:430px){
  .wt-tag{grid-template-columns:78px 32px 1fr 66px;gap:8px}
  .wt-t-lage{display:none}
  .wt-heute{flex-direction:column;align-items:flex-start}
}


/* Wetter und Verkehr nebeneinander. Ein Kasten allein nimmt die halbe Breite
   und wird links ausgerichtet – gestreckt sähe er verloren aus. */
.wv-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.wv-raster > *:only-child{max-width:520px}
@media(max-width:820px){.wv-raster{grid-template-columns:1fr;gap:16px}
  .wv-raster > *:only-child{max-width:none}}


/* ============================================================
   VERKEHR – STAU, BAUSTELLEN, BLITZER
   ------------------------------------------------------------
   Die Zahlen tragen die Aussage, wie beim Wetter. Keine
   Warndreiecke, keine Signalfarben – nur Typografie und Raum.
   ============================================================ */
.vk-kasten{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;display:flex;flex-direction:column;height:100%;
  box-shadow:0 1px 3px rgba(16,23,33,.05)}

.vk-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.vk-zahl{background:#fff;padding:14px 10px;text-align:center;text-decoration:none;
  display:flex;flex-direction:column;gap:2px;transition:background .15s}
a.vk-zahl:hover{background:var(--bg-soft,#F4F8FD)}
.vk-z-zahl{font-family:var(--font-head);font-weight:800;font-size:1.85rem;line-height:1;
  color:var(--ink-2,#0b1b33);letter-spacing:-.02em}
a.vk-zahl:hover .vk-z-zahl{color:var(--orange,#F26F21)}
.vk-z-lbl{font-size:.78rem;color:var(--grey,#6B6B76);line-height:1.3}

.vk-kurz{list-style:none;margin:16px 0 0;padding:0}
.vk-kurz li{display:flex;gap:10px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.93rem;line-height:1.5}
.vk-kurz li:last-child{border-bottom:0}
.vk-str{flex:0 0 auto;font-family:var(--font-head);font-weight:800;font-size:.84rem;
  color:var(--orange,#F26F21);letter-spacing:.02em;min-width:34px}
.vk-txt{color:var(--ink,#23232B)}
.vk-leer{margin:16px 0 0;font-size:.93rem;color:var(--grey,#6B6B76)}

/* ---------- Die volle Liste ---------- */
.wt-ort b{font-weight:800;margin-left:5px;opacity:.65}
.wt-ort.aktiv b{opacity:.9}

.vk-liste{display:flex;flex-direction:column;gap:12px}
.vk-eintrag{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px;
  border-left:3px solid var(--line);transition:border-color .15s}
.vk-eintrag:hover{border-left-color:var(--orange,#F26F21)}
.vk-eintrag.gesperrt{border-left-color:#b00020}
.vk-e-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.vk-e-str{font-family:var(--font-head);font-weight:800;font-size:.86rem;letter-spacing:.04em;
  color:var(--orange,#F26F21)}
.vk-e-sperr{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:#b00020;color:#fff;padding:3px 9px;border-radius:999px}
.vk-e-zeit{font-size:.82rem;color:var(--grey,#6B6B76);margin-left:auto}
.vk-e-titel{margin:0 0 5px;font-size:1.06rem;line-height:1.4}
.vk-e-ort{margin:0 0 8px;font-size:.9rem;color:var(--grey,#6B6B76)}
.vk-e-text{font-size:.94rem;line-height:1.65;color:var(--ink,#23232B)}
.vk-e-text p{margin:0 0 4px}
.vk-e-text p:last-child{margin-bottom:0}

/* ---------- Blitzer ---------- */
.vk-hinweis{background:var(--bg-soft,#F4F8FD);border:1px solid var(--line);border-radius:12px;
  padding:15px 18px;margin:0 0 20px}
.vk-hinweis p{margin:0;font-size:.92rem;line-height:1.65;color:var(--ink,#23232B)}

.vk-blitzer{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.vk-b-karte{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.vk-b-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.vk-b-art{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--bg-soft,#F4F8FD);color:var(--grey,#6B6B76);padding:4px 10px;border-radius:999px}
.vk-b-ort{margin:0 0 3px;font-size:1.02rem;line-height:1.35}
.vk-b-str{margin:0 0 7px;font-size:.88rem;color:var(--grey,#6B6B76)}
.vk-b-text{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink,#23232B)}

/* ---------- Meldeformular ---------- */
.vk-melden{margin:34px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.vk-m-titel{margin:0 0 12px;font-size:1.35rem}
.vk-m-recht{background:var(--bg-soft,#F4F8FD);border:1px solid var(--line);
  border-left:3px solid var(--orange,#F26F21);border-radius:12px;padding:15px 18px;margin:0 0 20px}
.vk-m-recht p{margin:0 0 8px;font-size:.91rem;line-height:1.65}
.vk-m-recht p:last-child{margin-bottom:0}
.vk-m-danke{background:#F3FAF4;border:1px solid #BFE3C6;border-radius:12px;padding:14px 18px;
  margin:0 0 18px;font-size:.95rem}
.vk-m-fehler{background:#FFF3F3;border:1px solid #F0C0C0;border-radius:12px;padding:14px 18px;
  margin:0 0 18px;font-size:.95rem}
.vk-m-form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.vk-m-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vk-m-feld{display:block;margin:0 0 16px}
.vk-m-feld > span{display:block;font-weight:700;font-size:.88rem;margin-bottom:6px;
  color:var(--ink-2,#0b1b33)}
.vk-m-feld > span i{font-style:normal;color:var(--orange,#F26F21)}
.vk-m-feld input,.vk-m-feld select,.vk-m-feld textarea{width:100%;padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;
  background:#fff;color:var(--ink,#23232B);transition:border-color .15s}
.vk-m-feld input:focus,.vk-m-feld select:focus,.vk-m-feld textarea:focus{
  outline:none;border-color:var(--orange,#F26F21)}
.vk-m-feld textarea{resize:vertical;min-height:78px}
.vk-m-haken{display:flex;gap:11px;align-items:flex-start;margin:4px 0 20px;
  font-size:.91rem;line-height:1.55;cursor:pointer}
.vk-m-haken input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--orange,#F26F21)}
.vk-m-knopf{display:inline-flex;align-items:center;justify-content:center}
.vk-m-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:640px){
  .vk-m-reihe{grid-template-columns:1fr;gap:0}
  .vk-m-form{padding:18px 16px}
  .vk-eintrag{padding:15px 16px}
  .vk-e-zeit{margin-left:0;width:100%}
  .vk-z-zahl{font-size:1.55rem}
}


/* ---------- Reiter der Verkehrsseite ----------
   Name und Zahl getrennt: der Name bleibt lesbar, die Zahl sitzt als kleine
   Marke daneben. Der offene Reiter ist gefüllt, die übrigen sind schlicht. */
.vk-reiter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.vk-reiter-knopf{display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:12px;text-decoration:none;
  background:#fff;border:1px solid var(--line);
  font-family:var(--font-head);font-weight:700;font-size:.98rem;
  color:var(--ink-2,#0b1b33);transition:border-color .15s,box-shadow .15s,transform .15s}
.vk-reiter-knopf:hover{border-color:var(--orange,#F26F21);color:var(--orange,#F26F21);
  box-shadow:0 5px 16px rgba(0,0,0,.08);transform:translateY(-1px)}
.vk-reiter-knopf.aktiv{background:var(--orange,#F26F21);border-color:var(--orange,#F26F21);
  color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.vk-reiter-knopf.aktiv:hover{transform:none;color:#fff}
.vk-r-zahl{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--bg-soft,#F4F8FD);color:var(--ink-2,#0b1b33);
  font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums}
.vk-reiter-knopf.aktiv .vk-r-zahl{background:rgba(255,255,255,.26);color:#fff}

@media(max-width:640px){
  .vk-reiter{gap:6px;margin-bottom:18px;padding-bottom:13px}
  .vk-reiter-knopf{padding:9px 13px;font-size:.9rem;gap:7px;flex:1 1 auto;justify-content:center}
  .vk-r-zahl{min-width:22px;height:20px;font-size:.76rem}
}


/* Abschnitts-Überschrift auf der Blitzer-Seite */
.vk-abschnitt{display:flex;align-items:center;gap:10px;margin:26px 0 14px;
  font-size:1.08rem;line-height:1.3}
.vk-abschnitt:first-of-type{margin-top:0}
.vk-abschnitt span{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--bg-soft,#F4F8FD);color:var(--grey,#6B6B76);
  font-family:var(--font-body,inherit);font-size:.8rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.vk-b-osm{border-left:3px solid var(--orange,#F26F21)}
.vk-b-tempo{font-family:var(--font-head);font-weight:800;font-size:.86rem;
  color:var(--ink-2,#0b1b33)}
.vk-b-karte-link{display:inline-block;margin-top:9px;font-size:.86rem;
  color:var(--orange,#F26F21);text-decoration:none;border-bottom:1px solid transparent}
.vk-b-karte-link:hover{border-bottom-color:currentColor}


/* ---------- „Blitzer melden" im Kasten der Startseite ----------
   Abgesetzt durch eine Linie, damit es nicht wie eine weitere Meldung
   aussieht. Der Knopf ist deutlich, der Hinweis darüber knapp – ausführlich
   steht er über dem Formular selbst, wo er hingehört. */
.vk-k-melden{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:16px 0 0;padding:14px 16px;border-radius:12px;
  background:var(--bg-soft,#F4F8FD);border:1px solid var(--line)}
.vk-k-m-text{min-width:0}
.vk-k-m-text b{display:block;font-family:var(--font-head);font-size:.98rem;
  color:var(--ink-2,#0b1b33);line-height:1.3}
.vk-k-m-text span{display:block;font-size:.83rem;color:var(--grey,#6B6B76);
  line-height:1.45;margin-top:2px}
.vk-k-m-knopf{flex:0 0 auto;padding:10px 20px;border-radius:999px;text-decoration:none;
  background:var(--orange,#F26F21);color:#fff;font-weight:700;font-size:.92rem;
  transition:filter .15s,transform .15s}
.vk-k-m-knopf:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.vk-k-m-knopf:active{transform:none}

@media(max-width:520px){
  .vk-k-melden{flex-direction:column;align-items:stretch;gap:11px;text-align:center}
  .vk-k-m-knopf{text-align:center}
}


/* ============================================================
   WETTER-KASTEN: HÖHE AUSNUTZEN
   ------------------------------------------------------------
   Der Verkehrs-Kasten hat mehr Inhalt (drei Zahlen, vier
   Meldungen, Melde-Bereich). Weil beide gleich hoch sind,
   blieb im Wetter-Kasten unten Leerraum. Jetzt verteilt sich
   der Inhalt über die volle Höhe – und alles ist eine Stufe
   größer, damit es gefüllt und nicht gestreckt wirkt.
   ============================================================ */
.wt-kasten{justify-content:space-between;padding:24px 26px}

/* Oben: Ort, Temperatur, Wetterlage */
.wt-kasten .wt-k-grad{font-size:3.5rem;margin:8px 0 4px}
.wt-kasten .wt-k-lage{font-size:1.06rem}
.wt-kasten .wz-mittel{width:82px;height:82px}

/* Der Tagesstreifen sinkt nach unten und bekommt mehr Luft */
.wt-kasten .wt-k-tage{margin-top:auto;padding-top:22px;gap:8px}
.wt-kasten .wt-k-tag{gap:7px;padding:4px 0}
.wt-kasten .wt-k-wt{font-size:.84rem}
.wt-kasten .wt-k-tag .wz-klein{width:38px;height:38px}
.wt-kasten .wt-k-max{font-size:1.12rem}

/* Der Verweis bleibt unten am Rand */
.wt-kasten .wt-k-mehr{margin-top:18px}

@media(max-width:820px){
  /* Untereinander gibt es keine gemeinsame Höhe mehr – dann darf der
     Kasten wieder eng sitzen, sonst wird er unnötig hoch. */
  .wt-kasten{justify-content:flex-start;padding:22px 22px}
  .wt-kasten .wt-k-tage{margin-top:18px;padding-top:16px}
  .wt-kasten .wt-k-grad{font-size:3rem}
  .wt-kasten .wz-mittel{width:68px;height:68px}
}


/* Selbst eingetragene feste Blitzer – wie die aus OpenStreetMap gekennzeichnet */
.vk-b-fest{border-left:3px solid var(--orange,#F26F21)}


/* ============================================================
   HANDY: KEINE WELLE
   ------------------------------------------------------------
   Es gibt zwei Wellen im Design: .kopfwelle (Unterseiten) war
   auf dem Handy schon aus, .hero-welle (Startseite) nicht –
   das war die, die noch zu sehen war.

   WICHTIG: --welle-h muss dabei auf 0 gehen. Diese Variable
   steckt in --band-start, also in der Höhe des Kopfbildes.
   Nur die Welle auszublenden hätte eine Lücke gelassen, weil
   weiter unten mit ihrer Höhe gerechnet wird.
   ============================================================ */
@media(max-width:860px){
  :root{--welle-h:0px}
  .hero-welle,.kopfwelle{display:none}
  /* Der Inhalt schließt direkt unter dem Bild an. */
  .hero-welle + .il-inhalt > .content-page,
  .hero-welle + .il-inhalt > .seiten-bausteine,
  .hero-welle + .il-inhalt > .seiten-module{padding-top:18px}
}


/* ============================================================
   HANDY: KOPFTEXT UNTER DAS BILD
   ------------------------------------------------------------
   Auf großen Bildschirmen liegt der Text („Unsere Heimat. Euer
   Zuhause." / „Musik, die verbindet." / der Einleitungstext)
   NEBEN dem Motiv. Auf dem Handy wird das Bild zur vollen
   Breite – der Text lag dann darüber und war schwer zu lesen.

   Jetzt beginnt der Text UNTER dem Bild: --band-start ist die
   Höhe des Kopfbildes in vw, dieselbe Zahl, mit der das Bild
   gezeichnet wird. Damit passt es auch, wenn du die Höhe im
   Kopfbereich änderst.
   ============================================================ */
@media(max-width:860px){
  .hero-grid{
    /* Der Text beginnt DICHT unter dem Bild. Vorher standen hier noch 20 px
       obendrauf – zusammen mit der Zeilenhoehe des ersten Elements ergab das
       eine grosse weisse Flaeche. Jetzt schliesst er direkt an. */
    padding-top:calc(var(--band-start,40.8vw) - 56px) !important;
    min-height:0 !important;
    padding-bottom:26px;
    /* Seitenrand: Der Text klebte am Bildschirmrand. */
    padding-left:20px;
    padding-right:20px;
    gap:0;
  }
  /* Auf weißem Grund braucht der Text dunkle Farben. */
  .hero .badge{color:var(--orange,#66A824);font-weight:700}
  .hero h1{color:var(--ink-2,#0b1b33)}
  .hero .lead{color:#3C4652;max-width:none}
  /* Die Knöpfe darunter mit etwas Luft. */
  .hero-actions{margin-top:18px}
}


/* ---------- Blitzer nach Straße gruppiert ----------
   Aufklappbare Gruppen. Der Kopf ist eine ruhige Zeile: Straßenname,
   Anzahl als Marke, Entfernung rechts. So bleibt auch eine Liste mit
   knapp zweihundert Einträgen überschaubar. */
.vk-g-hinweis{margin:-6px 0 16px;font-size:.9rem;color:var(--grey,#6B6B76)}
.vk-gruppe{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;
  background:#fff;overflow:hidden}
.vk-g-kopf{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:14px 18px;transition:background .15s}
.vk-g-kopf::-webkit-details-marker{display:none}
.vk-g-kopf:hover{background:var(--bg-soft,#F4F8FD)}
.vk-gruppe[open] .vk-g-kopf{border-bottom:1px solid var(--line);
  background:var(--bg-soft,#F4F8FD)}
.vk-g-name{font-family:var(--font-head);font-weight:800;font-size:1.02rem;
  color:var(--ink-2,#0b1b33)}
.vk-g-zahl{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--orange,#F26F21);color:#fff;font-size:.8rem;font-weight:800;
  font-variant-numeric:tabular-nums}
.vk-g-km{margin-left:auto;font-size:.86rem;color:var(--grey,#6B6B76);white-space:nowrap}
.vk-gruppe .vk-blitzer{padding:14px 16px}
/* Ein kleiner Pfeil zeigt den Zustand an – dezent, kein Symbolsatz. */
.vk-g-kopf::after{content:"";width:8px;height:8px;flex:none;order:9;
  border-right:2px solid var(--grey,#6B6B76);border-bottom:2px solid var(--grey,#6B6B76);
  transform:rotate(45deg);margin-left:12px;margin-top:-4px;transition:transform .15s}
.vk-gruppe[open] .vk-g-kopf::after{transform:rotate(-135deg);margin-top:2px}

@media(max-width:560px){
  .vk-g-kopf{padding:12px 14px;gap:9px;flex-wrap:wrap}
  .vk-g-km{margin-left:0;width:100%;order:10}
  .vk-gruppe .vk-blitzer{padding:12px}
}


/* ============================================================
   MENÜ: DER PFEIL BEI UNTERPUNKTEN
   ------------------------------------------------------------
   Er war ein Textzeichen (▾). Manche Schriften – Barlow gehört
   dazu – enthalten dieses Zeichen nicht; dann wird gar nichts
   dargestellt, und man sieht dem Punkt nicht an, dass etwas
   darunter liegt. Genau das war auf dem Handy der Fall.

   Jetzt wird der Pfeil GEZEICHNET (zwei Linien, gedreht). Das
   hängt von keiner Schrift ab und sieht überall gleich aus.
   ============================================================ */
.nav-pfeil{
  font-size:0 !important;          /* das alte Zeichen ausblenden */
  display:inline-block;
  width:9px;height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:8px;
  margin-top:-3px;
  vertical-align:middle;
  flex:none;
  transition:transform .18s;
  opacity:.75;
}
.nav-gruppe:hover > .nav-haupt .nav-pfeil,
.nav-gruppe.offen > .nav-haupt .nav-pfeil,
.nav-gruppe.active > .nav-haupt .nav-pfeil{opacity:1}
/* Aufgeklappt zeigt er nach oben. */
.nav-gruppe.offen .nav-pfeil{transform:rotate(-135deg);margin-top:2px}

@media(max-width:860px){
  /* Im aufgeklappten Menü größer und deutlich am rechten Rand. */
  .nav-gruppe > button.nav-haupt{align-items:center}
  .nav-pfeil{width:11px;height:11px;border-width:2.5px;margin-left:auto;opacity:.9}
}


/* Die Postleitzahl vor dem Ortsnamen – schmal und ruhig, damit sie
   beim Suchen hilft, ohne den Namen zu verdrängen. */
.vk-g-plz{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86rem;font-weight:700;color:var(--grey,#6B6B76);
  background:var(--bg-soft,#F4F8FD);padding:3px 8px;border-radius:6px;
  flex:none;letter-spacing:.02em}
.vk-gruppe[open] .vk-g-plz{background:#fff}


/* ============================================================
   BILDER PASSEN SICH DER HÖHE AN
   ------------------------------------------------------------
   Bisher hatte der Bildkasten im Sendeplan eine feste Breite
   (69 % der Höhe). Jedes hochgeladene Bild musste deshalb
   vorher zugeschnitten werden – sonst wurde es beschnitten.

   Jetzt gilt überall dieselbe Regel: Die HÖHE wird vorgegeben,
   die BREITE ergibt sich aus dem Bild. Die berechnete Breite
   dient nur noch als Obergrenze, damit ein sehr breites Bild
   die Textspalte daneben nicht erdrückt.
   ============================================================ */
.spt-bild{
  width:auto !important;
  max-width:var(--spt-bild-b,750px);
  height:var(--spt-bild-h,500px);
}
.spt-bild img{
  width:auto !important;
  height:100%;
  max-width:100%;
  object-fit:contain !important;   /* nichts abschneiden */
  display:block;
}

/* Auf dem Handy steht das Bild über dem Text und darf die volle Breite
   nutzen – dort wird die Höhe zur Obergrenze. */
@media(max-width:760px){
  .spt-bild{width:100% !important;max-width:none;
    height:auto !important;max-height:min(var(--spt-bild-h,500px),280px)}
  .spt-bild img{width:100% !important;height:auto;
    max-height:min(var(--spt-bild-h,500px),280px);object-fit:contain !important}
}


/* ============================================================
   SENDEPLAN: BESCHREIBUNG NICHT MEHR ZWANGSFETT
   ------------------------------------------------------------
   Eine Regel setzte den ERSTEN Absatz der Beschreibung immer
   auf font-weight:700. Damit war die erste Zeile fett, egal was
   im Editor stand – und wer sie normal haben wollte, konnte
   nichts dagegen tun.

   Jetzt gilt die normale Schriftstärke. Fett wird nur, was du
   im Editor auch fett machst (<b> oder <strong>).
   ============================================================ */
.spt-text,
.spt-text p,
.spt-text p:first-child{font-weight:400}
.spt-text b,.spt-text strong{font-weight:700}
.s-descr,.s-descr p{font-weight:400}
.s-descr b,.s-descr strong{font-weight:700}


/* ============================================================
   MODERATOREN-GALERIE: BILDER FÜLLEN DIE BREITE
   ------------------------------------------------------------
   Vorher standen dort FEST vier Spalten. Wer nur drei Bilder
   hochgeladen hatte, bekam drei Bilder und eine Lücke rechts.

   auto-fit lässt leere Spalten zusammenfallen: Aus drei Bildern
   werden drei gleich breite Spalten über die volle Breite, aus
   zwei werden zwei, aus einem eines. Ohne dass irgendwo die
   Anzahl hinterlegt sein muss.
   ============================================================ */
.tm-galerie{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
}
/* Ein einzelnes Bild soll nicht die ganze Seite einnehmen. */
.tm-galerie.eins{grid-template-columns:1fr;max-width:640px}
.tm-galerie.eins .tm-g-bild{aspect-ratio:16/10}
/* Zwei Bilder wirken nebeneinander besser als sehr breit gestreckt. */
.tm-galerie.zwei{max-width:900px}

@media(max-width:760px){
  .tm-galerie{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
}
@media(max-width:430px){
  .tm-galerie{grid-template-columns:repeat(var(--tm-sp-h,2),1fr);gap:10px}
  .tm-galerie.eins{grid-template-columns:1fr}
}


/* ============================================================
   SENDEPLAN-BILD: HÖHE ODER BREITE VORGEBEN
   ------------------------------------------------------------
   Du entscheidest, welches Maß gilt. Das andere ergibt sich aus
   dem Bild – das Seitenverhältnis bleibt in beiden Fällen
   erhalten, es fehlt nichts und nichts wird verzerrt.
   ============================================================ */

/* Vorgabe: HÖHE gilt, die Breite folgt dem Bild. */
.sp-tafel[data-bildmass="hoehe"] .spt-bild{
  width:auto !important;
  max-width:var(--spt-bild-b,750px);
  height:var(--spt-bild-h,500px);
}
.sp-tafel[data-bildmass="hoehe"] .spt-bild img{
  width:auto !important;height:100%;max-width:100%;
  object-fit:contain !important;display:block;
}

/* BREITE gilt, die Höhe folgt dem Bild. Als Obergrenze das
   Anderthalbfache – sonst wird ein hohes Bild endlos lang. */
.sp-tafel[data-bildmass="breite"] .spt-bild{
  width:var(--spt-bild-h,500px) !important;
  max-width:100%;
  height:auto !important;
  max-height:calc(var(--spt-bild-h,500px) * 1.5);
}
.sp-tafel[data-bildmass="breite"] .spt-bild img{
  width:100% !important;height:auto !important;
  max-height:calc(var(--spt-bild-h,500px) * 1.5);
  object-fit:contain !important;display:block;
}

@media(max-width:760px){
  .sp-tafel[data-bildmass] .spt-bild{
    width:100% !important;max-width:none;height:auto !important;
    max-height:min(var(--spt-bild-h,500px),280px);
  }
  .sp-tafel[data-bildmass] .spt-bild img{
    width:100% !important;height:auto !important;
    max-height:min(var(--spt-bild-h,500px),280px);
    object-fit:contain !important;
  }
}


/* ============================================================
   HANDY: MEHR LUFT UM DEN MENÜ-KNOPF
   ------------------------------------------------------------
   Die Kopfzeile hatte nur den Rand des Inhaltsbereichs – 16 px,
   unter 420 px sogar nur 12. Der Knopf klebte dadurch fast am
   Bildschirmrand, und man traf ihn schlecht.
   ============================================================ */
@media(max-width:860px){
  header .wrap,
  header .head-inner{padding-left:18px;padding-right:18px}
  .nav-toggle{margin-right:0}
  /* Etwas mehr Abstand zwischen Logo und Knopf, damit die Zeile
     nicht gedrängt wirkt. */
  .head-inner{gap:14px}
}
@media(max-width:420px){
  header .wrap,
  header .head-inner{padding-left:14px;padding-right:14px}
  .head-inner{gap:10px}
}


/* ============================================================
   TEXT + BILD: VIER ANORDNUNGEN
   ------------------------------------------------------------
   spalten   Zwei Spalten nebeneinander. Ist das Bild kürzer als
             der Text, bleibt daneben Platz frei.
   umfluss   Das Bild schwimmt am Rand, der Text fließt daneben
             UND läuft unter dem Bild weiter. Wie in Zeitungen.
   oben      Bild über dem Text, volle Breite.
   unten     Bild unter dem Text, volle Breite.

   Die Breite des Bildes und der Abstand kommen als Variablen
   aus den Einstellungen (--pb-tb-b, --pb-tb-abstand).
   ============================================================ */

/* ---- Zwei Spalten ---- */
.pb-textbild.pb-tb-spalten{
  display:grid;
  grid-template-columns:minmax(0,var(--pb-tb-b,40%)) minmax(0,1fr);
  gap:var(--pb-tb-abstand,24px);
  align-items:start;
}
.pb-textbild.pb-tb-spalten.pb-rechts{
  grid-template-columns:minmax(0,1fr) minmax(0,var(--pb-tb-b,40%));
}
/* Bild und Text auf gleicher Mittellinie statt oben bündig */
.pb-textbild.pb-tb-spalten.pb-tb-mitte{align-items:center}

/* ---- Umfluss: der Text läuft unter dem Bild weiter ---- */
.pb-textbild.pb-tb-umfluss{display:block}
.pb-textbild.pb-tb-umfluss .pb-bild{
  width:var(--pb-tb-b,40%);
  max-width:100%;
}
.pb-textbild.pb-tb-umfluss.pb-links .pb-bild{
  float:left;
  margin:0 var(--pb-tb-abstand,24px) calc(var(--pb-tb-abstand,24px) * .6) 0;
}
.pb-textbild.pb-tb-umfluss.pb-rechts .pb-bild{
  float:right;
  margin:0 0 calc(var(--pb-tb-abstand,24px) * .6) var(--pb-tb-abstand,24px);
}
/* Ohne dies würde ein folgender Baustein neben dem Bild beginnen. */
.pb-textbild.pb-tb-umfluss::after{content:"";display:table;clear:both}
.pb-textbild.pb-tb-umfluss .pb-tb-text{overflow:visible}

/* ---- Bild oben oder unten, volle Breite ---- */
.pb-textbild.pb-tb-oben,.pb-textbild.pb-tb-unten{display:block}
.pb-textbild.pb-tb-oben .pb-bild{margin:0 0 var(--pb-tb-abstand,24px)}
.pb-textbild.pb-tb-unten .pb-bild{margin:var(--pb-tb-abstand,24px) 0 0}

.pb-textbild .pb-tb-text > *:first-child{margin-top:0}
.pb-textbild .pb-tb-text > *:last-child{margin-bottom:0}

/* ---- Auf dem Handy immer untereinander ----
   Ein umflossenes Bild mit 40 % Breite lässt auf 360 Pixeln nur
   noch Platz für zwei, drei Wörter je Zeile. Deshalb steht das
   Bild dort immer über dem Text, in voller Breite. */
@media(max-width:760px){
  .pb-textbild.pb-tb-spalten,
  .pb-textbild.pb-tb-spalten.pb-rechts{grid-template-columns:1fr}
  .pb-textbild.pb-tb-umfluss .pb-bild{
    float:none !important;
    width:100%;
    margin:0 0 var(--pb-tb-abstand,24px) !important;
  }
}


/* ============================================================
   BAUSTEINE: ABSTAND OBEN UND UNTEN EINSTELLBAR
   ------------------------------------------------------------
   Bisher hatte jeder Baustein fest 26 Pixel oben und unten.
   Zwei Bausteine dicht aneinander waren nicht möglich.

   Der Abstand sitzt INNEN (padding), nicht außen. Bei einem
   Baustein mit farbigem Grund würde ein Außenabstand die
   Farbfläche verkleinern – der Innenabstand lässt sie
   durchgehend und schiebt nur den Inhalt.

   Ohne Einstellung greift der Rückfallwert 26px, so wie bisher.
   ============================================================ */
.pb-block .pb-inhalt{
  padding-top:var(--pb-oben,26px);
  padding-bottom:var(--pb-unten,26px);
}
/* Der Trenner-Baustein IST schon ein Abstand – dort wäre ein
   zusätzlicher Innenabstand doppelt gemoppelt. */
.pb-block.pb-trenner{padding:0}

@media(max-width:640px){
  /* Auf dem Handy wirken große Abstände schnell wie Löcher.
     Deshalb höchstens 40 Pixel, aber nie mehr als eingestellt. */
  .pb-block .pb-inhalt{
    padding-top:min(var(--pb-oben,26px),40px);
    padding-bottom:min(var(--pb-unten,26px),40px);
  }
}


/* ============================================================
   BLITZER: SUCHFELD UND MELDE-KNOPF
   ============================================================ */
.vk-werkzeuge{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin:0 0 16px;
}
.vk-suche{
  display:flex;align-items:center;gap:0;
  flex:1 1 300px;min-width:0;
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  transition:border-color .15s;
}
.vk-suche:focus-within{border-color:var(--orange,#F26F21)}

/* Die Lupe ist gezeichnet – kein Zeichen, keine Symboldatei. */
.vk-such-lupe{
  flex:none;width:16px;height:16px;margin-left:16px;
  border:2px solid var(--grey,#6B6B76);border-radius:50%;
  position:relative;
}
.vk-such-lupe::after{
  content:"";position:absolute;right:-6px;bottom:-4px;
  width:7px;height:2px;background:var(--grey,#6B6B76);
  transform:rotate(45deg);border-radius:2px;
}
.vk-suche input[type="search"]{
  flex:1 1 auto;min-width:0;
  border:0;outline:none;background:transparent;
  padding:12px 14px;font:inherit;font-size:.97rem;
  color:var(--ink,#23232B);
}
.vk-suche input[type="search"]::-webkit-search-cancel-button{cursor:pointer}
.vk-such-knopf{
  flex:none;border:0;cursor:pointer;
  padding:12px 20px;
  background:var(--orange,#F26F21);color:#fff;
  font:inherit;font-weight:700;font-size:.94rem;
}
.vk-such-knopf:hover{filter:brightness(1.08)}
.vk-such-weg{
  flex:none;padding:0 16px;font-size:.88rem;
  color:var(--grey,#6B6B76);text-decoration:none;white-space:nowrap;
}
.vk-such-weg:hover{color:var(--orange,#F26F21)}

.vk-melde-knopf{
  flex:none;
  display:inline-flex;align-items:center;
  padding:12px 22px;border-radius:999px;
  background:var(--orange,#F26F21);color:#fff;
  font-weight:700;font-size:.95rem;text-decoration:none;
  transition:filter .15s,transform .15s;
}
.vk-melde-knopf:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.vk-melde-knopf:active{transform:none}

.vk-such-ergebnis{
  margin:-8px 0 16px;font-size:.92rem;color:var(--grey,#6B6B76);
}

@media(max-width:640px){
  .vk-werkzeuge{gap:10px}
  .vk-suche{flex:1 1 100%}
  .vk-melde-knopf{flex:1 1 100%;justify-content:center}
  .vk-such-knopf{padding:12px 16px}
  .vk-such-weg{padding:0 12px}
}


/* ---------- Quellenangaben ----------
   Sie stehen am Ende der Liste, ruhig und lesbar. Nicht versteckt,
   aber auch nicht laut – sie gehören dorthin, ohne den Inhalt zu
   überdecken. */
.vk-quellen{
  margin:26px 0 0;padding:16px 18px;
  background:var(--bg-soft,#F4F8FD);
  border:1px solid var(--line);border-radius:12px;
}
.vk-quellen-titel{
  margin:0 0 8px;font-family:var(--font-head);font-weight:800;
  font-size:.9rem;color:var(--ink-2,#0b1b33);
}
.vk-quellen-liste{
  margin:0;padding:0 0 0 18px;
  font-size:.86rem;line-height:1.65;color:var(--grey,#6B6B76);
}
.vk-quellen-liste li{margin:0 0 5px}
.vk-quellen-liste li:last-child{margin-bottom:0}
.vk-quellen-liste a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.vk-quellen-liste a:hover{color:var(--orange,#F26F21)}


/* ---------- Verkehrsmeldungen: Gruppen nach Straße ----------
   Dieselben Gruppen wie bei den Blitzern. Zusätzlich eine Marke,
   wenn auf der Straße etwas gesperrt ist – das ist die Angabe,
   die einen Hörer am ehesten betrifft. */
.vk-g-sperr{
  margin-left:auto;
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:999px;
  background:#b00020;color:#fff;
  font-size:.74rem;font-weight:700;letter-spacing:.03em;
  white-space:nowrap;
}
.vk-gruppe .vk-liste{padding:14px 16px}
/* Innerhalb einer Gruppe steht die Straße schon im Kopf –
   an der Karte wäre sie doppelt. */
.vk-gruppe .vk-eintrag .vk-e-str{opacity:.55}

@media(max-width:560px){
  .vk-g-sperr{margin-left:0;order:10;width:auto}
  .vk-gruppe .vk-liste{padding:12px}
}




/* ---------- Moderatoren-Galerie: Anzahl auf dem Handy ----------
   Am Rechner erscheinen ALLE Bilder, auf dem Handy nur so viele wie
   eingestellt.

   ACHTUNG, eine Falle: nth-child() kann KEINE CSS-Variablen verwenden –
   „nth-child(n + var(--x))" ist ungültig und wird stillschweigend
   ignoriert. Deshalb setzt die Ausgabe eine Klasse „tm-h1" bis
   „tm-h24" auf die Galerie, und hier steht für jede Zahl eine eigene
   Regel. Unelegant, aber es funktioniert – und der Fehler wäre sonst
   unsichtbar gewesen.

   Warum überhaupt im Browser und nicht auf dem Server: So bleibt die
   Seite für alle Geräte gleich und kann zwischengespeichert werden.
   Ein Server, der je nach Gerät etwas anderes ausliefert, macht jeden
   Cache unbrauchbar und rät dabei, was für ein Gerät es ist. */
@media(max-width:640px){
  .tm-galerie.tm-h1 .tm-g-bild:nth-child(n+2){display:none}
  .tm-galerie.tm-h2 .tm-g-bild:nth-child(n+3){display:none}
  .tm-galerie.tm-h3 .tm-g-bild:nth-child(n+4){display:none}
  .tm-galerie.tm-h4 .tm-g-bild:nth-child(n+5){display:none}
  .tm-galerie.tm-h5 .tm-g-bild:nth-child(n+6){display:none}
  .tm-galerie.tm-h6 .tm-g-bild:nth-child(n+7){display:none}
  .tm-galerie.tm-h7 .tm-g-bild:nth-child(n+8){display:none}
  .tm-galerie.tm-h8 .tm-g-bild:nth-child(n+9){display:none}
  .tm-galerie.tm-h9 .tm-g-bild:nth-child(n+10){display:none}
  .tm-galerie.tm-h10 .tm-g-bild:nth-child(n+11){display:none}
  .tm-galerie.tm-h11 .tm-g-bild:nth-child(n+12){display:none}
  .tm-galerie.tm-h12 .tm-g-bild:nth-child(n+13){display:none}
  .tm-galerie.tm-h13 .tm-g-bild:nth-child(n+14){display:none}
  .tm-galerie.tm-h14 .tm-g-bild:nth-child(n+15){display:none}
  .tm-galerie.tm-h15 .tm-g-bild:nth-child(n+16){display:none}
  .tm-galerie.tm-h16 .tm-g-bild:nth-child(n+17){display:none}
  .tm-galerie.tm-h17 .tm-g-bild:nth-child(n+18){display:none}
  .tm-galerie.tm-h18 .tm-g-bild:nth-child(n+19){display:none}
  .tm-galerie.tm-h19 .tm-g-bild:nth-child(n+20){display:none}
  .tm-galerie.tm-h20 .tm-g-bild:nth-child(n+21){display:none}
  .tm-galerie.tm-h21 .tm-g-bild:nth-child(n+22){display:none}
  .tm-galerie.tm-h22 .tm-g-bild:nth-child(n+23){display:none}
  .tm-galerie.tm-h23 .tm-g-bild:nth-child(n+24){display:none}
  .tm-galerie.tm-h24 .tm-g-bild:nth-child(n+25){display:none}
}


/* ============================================================
   SENDEPLAN: WAS LÄUFT GERADE?
   ------------------------------------------------------------
   Zwei verschiedene Dinge, die man nicht verwechseln darf:
     .live   der Haken in der Verwaltung – „moderiert, nicht
             vom Band". Gilt immer, unabhängig von der Uhrzeit.
     .jetzt  diese Sendung ist GERADE auf Sendung.
   Deshalb sehen sie auch verschieden aus.
   ============================================================ */
.spt-zeile.jetzt{
  border-color:var(--orange,#F26F21);
  box-shadow:0 0 0 2px rgba(242,111,33,.16);
  background:linear-gradient(180deg,rgba(242,111,33,.05),transparent 60%);
}
.spt-jetzt{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 11px;border-radius:999px;
  background:var(--orange,#F26F21);color:#fff;
  font-size:.74rem;font-weight:800;letter-spacing:.03em;
  white-space:nowrap;
}
/* Der Punkt pulsiert dezent – er soll auffallen, aber nicht nerven. */
.spt-jetzt::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:#fff;
  animation:sp-puls 2.2s ease-in-out infinite;
}
@keyframes sp-puls{0%,100%{opacity:1}50%{opacity:.35}}
/* Wer Bewegung im Browser abgeschaltet hat, bekommt keine. */
@media(prefers-reduced-motion:reduce){
  .spt-jetzt::before{animation:none}
}


/* ---------- Startseite: „Jetzt auf Sendung" ---------- */
.sec-jetzt .wrap{padding-top:0;padding-bottom:0}
.sp-jetzt-kasten{
  position:relative;
  padding:22px 26px;
  border:1px solid var(--line);
  border-left:4px solid var(--orange,#F26F21);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(242,111,33,.07),transparent 55%);
}
.spj-marke{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.76rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--orange,#F26F21);
  margin-bottom:8px;
}
.spj-punkt{
  width:8px;height:8px;border-radius:50%;
  background:var(--orange,#F26F21);
  animation:sp-puls 2.2s ease-in-out infinite;
}
.spj-titel{
  margin:0 0 6px;
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.2;
}
.spj-unten{margin:0;font-size:.95rem;color:var(--grey,#6B6B76)}
.spj-link{
  display:inline-block;margin-top:14px;
  font-size:.9rem;font-weight:700;
  color:var(--orange,#F26F21);text-decoration:none;
}
.spj-link:hover{text-decoration:underline}

@media(max-width:560px){
  .sp-jetzt-kasten{padding:18px 18px 18px 20px}
}


/* Zweites Bild im News-Artikel – steht unter dem Text. */
.nd-bild2{margin:26px 0 0}
.nd-bild2 img{
  width:100%;height:auto;display:block;
  border-radius:12px;
}

/* ---------- Eigener Code-Block auf der Startseite ---------- */
.cb-block{padding:34px 0}
.cb-voll{padding-left:0;padding-right:0}
/* Eingebettete Inhalte sollen sich einpassen, nicht überstehen. */
.cb-inhalt{max-width:100%;overflow-x:auto}
.cb-inhalt iframe,.cb-inhalt embed,.cb-inhalt object,.cb-inhalt video{
  max-width:100%;border:0;
}
.cb-inhalt img{max-width:100%;height:auto}


/* ============================================================
   KOPF SCHRUMPFT BEIM SCROLLEN
   ------------------------------------------------------------
   assets/nav.js setzt ab 60px Scrollhöhe die Klasse
   „kopf-klein" auf <body>.

   Die Werte kommen aus zwei Variablen, die die Vorlage setzt:
     --logo-h   die eingestellte Logohöhe
     --kopf-h   Logohöhe + 16px Luft
   So passt das Schrumpfen zu JEDER eingestellten Größe – ein
   fester Wert würde bei einem 160px-Logo nicht mehr stimmen.

   Auf 62 % verkleinert, mindestens 34px: Kleiner wird ein Logo
   unleserlich, größer bringt es keinen Platzgewinn.
   ============================================================ */
body.kopf-klein header{
  box-shadow:0 2px 14px rgba(0,0,0,.10);
}
body.kopf-klein .head-inner{
  min-height:max(56px, calc(var(--kopf-h, 72px) * .62));
}
body.kopf-klein .logo img{
  height:max(34px, calc(var(--logo-h, 48px) * .62));
}
/* Der Übergang macht es ruhig statt sprunghaft. */
header,.head-inner,.logo img{
  transition:min-height .18s ease, height .18s ease, box-shadow .18s ease;
}
/* Die oberste Leiste fährt beim Scrollen ein – sie ist Beiwerk
   und braucht unterwegs keinen Platz. */
body.kopf-klein .topbar{
  max-height:0;overflow:hidden;
  transition:max-height .18s ease;
}
.topbar{max-height:60px;transition:max-height .18s ease}

/* Wer Bewegung im Browser abgeschaltet hat, bekommt keine. */
@media(prefers-reduced-motion:reduce){
  header,.head-inner,.logo img,.topbar{transition:none}
}