/* Radiopannen: original artwork and proportions, larger text, flexible widths. */
body { font-size:18px; line-height:1.5; }
#wrapper { width:calc(100% - 40px); max-width:1080px; display:grid; grid-template-columns:170px minmax(0,650px) 190px; gap:20px; align-items:start; }
#navi,#main,#sidebar { float:none; width:auto; min-width:0; }
#main { background-size:100% 1px; }
#navi { padding-top:260px; }
#sidebar { padding:275px 0 0; }
#branding { position:relative; top:0; width:100%; height:auto; aspect-ratio:522 / 262; background-size:100% 100%; }
#branding h2 { top:15.27%; left:9.2%; font-size:17px; line-height:1.3; color:#7aa8c2; }
#branding .schriftzug { width:67.43%; height:auto; left:9.2%; bottom:39.69%; }
#branding .u87 { width:31.8%; height:auto; left:76.63%; bottom:-5.34%; }
#main #maincontent { padding:0 7% 0 6.9%; margin-top:-38px; min-height:300px; overflow-wrap:break-word; }
#main #maincontent h1 { font-size:23px; line-height:1.35; margin-bottom:18px; }
#main #maincontent h2 { font-size:19px; line-height:1.4; }
#main #maincontent h3,#main #maincontent h4,#main #maincontent h5 { font-size:16px; line-height:1.5; }
#main #maincontent p,#main #maincontent #pannenliste p { font-size:16px; line-height:1.55; color:#69747b; }
#main #maincontent p.vorlauftext { font-size:17px; line-height:1.5; }
#main #maincontent h2.rubrikintro { font-size:16px; line-height:1.55; padding-right:0; }
#navi li a { font-size:18px; line-height:1.55; font-weight:400; font-family:Georgia, "Times New Roman", Times, serif; }
#navi li a:hover { color:#549dc7; text-decoration:underline; }
#navi li { margin-bottom:4px; }
#sidebar h3 { font-size:17px; line-height:1.4; }
#sidebar p { font-size:15px; line-height:1.6; color:#758088; }
#rubriken-menu > summary { display:none; }
#navi #suchfunktion label { font-size:13px; line-height:1.4; }
#navi #suchfunktion input { box-sizing:border-box; width:95%; padding:7px; font-size:16px; }
#pannenliste .panne { width:100%; box-sizing:border-box; margin-bottom:22px; }
#main #maincontent #pannenliste .panne_head { width:calc(100% + 2px); left:-1px; background-size:100% 18px; }
.panne_intro { width:auto; padding:0 20px; }
#maincontent img { max-width:100%; height:auto; }
.stempel { left:0; max-width:90px !important; margin-left:8px; }
.jplayer { left:0; margin:18px 20px; }
.jplayer ul { height:44px; top:0; }
.jplayer li { margin-right:10px; }
.jp-play,.jp-play:hover,.jp-pause,.jp-pause:hover,.jp-stop,.jp-stop:hover { width:44px; height:44px; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:26px; background-color:#3c85ae; }
.jp-play,.jp-play:hover { background-image:url(img/player-play.svg); }
.jp-pause,.jp-pause:hover { background-image:url(img/player-pause.svg); }
.jp-stop,.jp-stop:hover { background-image:url(img/player-stop.svg); background-color:#788a95; }
.jp-play:hover,.jp-pause:hover,.jp-stop:hover { background-color:#d48645; }
.jp-current-time { font-size:17px; line-height:44px; padding-left:4px; font-variant-numeric:tabular-nums; }
.jp-progress { width:auto; height:10px; border-radius:6px; margin-top:10px; }
.jp-play-bar { background:#79b4dc; }
.bewertungsbereich { width:400px; max-width:calc(100% - 40px); margin:0 auto 12px; height:82px; }
.bewertungsbereich h6 { font-size:13px; line-height:1.4; left:60px; }
#main #maincontent #pannenliste .bewertungsbereich .negativ,#main #maincontent #pannenliste .bewertungsbereich .positiv { font-size:11px; line-height:1.3; color:#89959b; }
#main #maincontent #pannenliste .bewertungsbereich .ergebnis { top:0; height:auto; padding:4px 0; }
#main #maincontent #pannenliste .bewertungsbereich .ergebnis p.note { font-size:24px; line-height:1.3; }
#main #maincontent #pannenliste .bewertungsbereich .ergebnis p.stimmen,#main #maincontent #pannenliste .bewertungsbereich .ergebnis p.zusatz { font-size:11px; line-height:1.5; top:0; }
.kommentarbereich { width:auto; margin:0 20px 8px; }
.kommentarbereich h6,.kommentarbereich li { font-size:13px; line-height:1.5; }
.panne .footerlinks { width:auto; height:auto; margin:0 16px 10px; }
.panne .footerlinks li { font-size:12px; line-height:1.8; }
.panne .footerlinks li a { display:inline-block; padding:4px 2px; color:#7a868e; line-height:1.5; }
#footer { width:auto; height:auto; min-height:80px; padding:20px 7% 26px; background-size:100% 100%; box-sizing:border-box; }
#footer .footerlinks { width:auto; height:auto; }
#footer p,#footer li a,#footer li { font-size:16px; line-height:1.6; }
#footer li { display:inline-block; }
.blaettern { width:auto; height:auto; line-height:1.9; }
.blaettern li { display:inline-block; font-size:15px; line-height:1.8; }
.blaettern li.zurueck,.blaettern li.weiter { padding:0 5px; }
#maincontent input:not([type=checkbox]):not([type=radio]):not([type=hidden]),#maincontent select,#maincontent textarea { max-width:100%; box-sizing:border-box; font-size:16px; }
#kontaktformular label,#kommentarformular label { font-size:14px; line-height:1.5; }
#maincontent .banner,#maincontent .banner_textbox { left:0; box-sizing:border-box; max-width:100%; }
#maincontent .banner_textbox { width:100%; }
a:focus-visible,summary:focus-visible { outline:2px solid #37799e; outline-offset:3px; }
@media (min-width:701px) and (max-width:1000px) {
 #wrapper { max-width:820px; grid-template-columns:160px minmax(0,1fr); }
 #sidebar { grid-column:2; padding:0 7% 0; }
 #sidebar ul { display:flex; gap:24px; }
 #sidebar li { flex:1; }
}
@media(max-width:700px) {
 body { margin:12px 0 20px; }
 #wrapper { width:calc(100% - 20px); max-width:540px; display:block; }
 #main { width:100%; }
 #branding .u87 { width:27%; left:auto; right:0; bottom:0; }
 #branding .schriftzug { width:63%; }
 #branding h2 { font-size:clamp(11px,3.1vw,16px); }
 #main #navi { margin:-15px 6.9% 22px; padding:0; position:relative; width:auto; }
 #rubriken-menu { border-top:1px solid #bed8eb; border-bottom:1px solid #bed8eb; }
 #rubriken-menu > summary { display:list-item; cursor:pointer; padding:10px 2px; color:#528daa; font:16px/1.4 Georgia,serif; }
 #rubriken-menu .rubriken-inhalt { padding:6px 0 14px; }
 #navi h2 { display:none; }
 #navi .rubriken-inhalt > ul { display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; }
 #navi li a { display:block; padding:6px 0; font-size:16px; }
 #main #maincontent { margin-top:0; min-height:0; padding:0 6.9%; }
 #main #maincontent h1 { font-size:21px; }
 #main #maincontent p,#main #maincontent #pannenliste p,#main #maincontent h2.rubrikintro { font-size:16px; }
 #sidebar { width:auto; padding:24px 6.9% 0; }
 #sidebar li { margin-bottom:16px; }
 .panne_intro { padding:0 14px; }
 .jplayer { margin:16px 14px; }
 .kommentarbereich { margin:0 14px 8px; }
 .stempel { max-width:65px !important; }
 #maincontent [style*="width"] { max-width:100%; box-sizing:border-box; }
 #kontaktformular label.checkboxtext,#kontaktformular label.radiobuttontext { width:calc(100% - 28px); }
 .sicherheitscode { margin-bottom:175px; }
 .sc_eingabe { top:60px; bottom:auto; left:0; width:210px; }
 #main #maincontent .sc_hinweis { top:140px; bottom:auto; left:0; width:210px; font-size:13px; }
 #kommentarformular label { float:none; width:auto; text-align:left; }
 #kommentarformular input.abschicken { margin-left:0; }
 #footer { top:15px; padding:20px 24px 26px; }
 .bewertungsbereich { width:auto; max-width:none; height:auto; margin:0 14px 10px; display:flex; flex-direction:column; gap:10px; padding-bottom:10px; }
 .bewertungsbereich > div:first-child { display:grid; grid-template-columns:1fr 1fr; width:100%; }
 .bewertungsbereich h6,.bewertungsbereich h6.aftervoting { position:static; grid-column:1 / -1; grid-row:1; text-align:center; }
 .bewertungsbereich ul { grid-column:1 / -1; grid-row:2; display:flex; justify-content:center; align-items:center; height:37px; margin:0; }
 .bewertungsbereich ul li { position:static; width:29px; height:29px; flex:0 0 29px; margin:0; }
 #main #maincontent #pannenliste .bewertungsbereich .negativ { position:static; grid-column:1; grid-row:3; text-align:left; }
 #main #maincontent #pannenliste .bewertungsbereich .positiv { position:static; grid-column:2; grid-row:3; text-align:right; }
 #main #maincontent #pannenliste .bewertungsbereich .ergebnis { position:static; width:100%; box-sizing:border-box; border:0; border-top:1px solid #e4eef4; padding:8px 0 0; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
 #main #maincontent #pannenliste .bewertungsbereich .ergebnis p.zusatz { font-size:12px; }
}

@media(min-width:701px) and (max-width:1000px) {
 #branding .u87 { width:29%; left:auto; right:0; }
}
@media(max-width:700px) {
 #pannenliste .pannenbild,#pannenliste .pannenbild.ohneschatten { float:none; margin:0 0 10px; }
 #main #maincontent #pannenliste p { overflow-wrap:normal; }
}

/* Keep the outer gradient aligned with the scaled original header artwork. */
body { background-image:linear-gradient(to bottom, #add4ff 0px, #add4ff calc(var(--portal-top, 30px) + var(--portal-scale, 1) * 165px), #b4d5f8 calc(var(--portal-top, 30px) + var(--portal-scale, 1) * 170px), #d5eaff calc(var(--portal-top, 30px) + var(--portal-scale, 1) * 175px), #deeefe calc(var(--portal-top, 30px) + var(--portal-scale, 1) * 180px), #eaf4fe calc(var(--portal-top, 30px) + var(--portal-scale, 1) * 190px), #f5faff calc(var(--portal-top, 30px) + var(--portal-scale, 1) * 200px), #f9fdff calc(var(--portal-top, 30px) + var(--portal-scale, 1) * 210px), #fefefe calc(var(--portal-top, 30px) + var(--portal-scale, 1) * 220px), #ffffff calc(var(--portal-top, 30px) + var(--portal-scale, 1) * 230px)); background-repeat:no-repeat; background-color:#fff; background-size:100% 100%; }

/* Locally hosted Open Sans; original heading families remain unchanged. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url(fonts/open-sans/open-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url(fonts/open-sans/open-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 300 800;
  src: url(fonts/open-sans/open-sans-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 300 800;
  src: url(fonts/open-sans/open-sans-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
p,
label,
input,
textarea,
select,
button,

.blaettern li,
#footer p,
#footer li,
#maincontent .banner_textbox,
#kontaktformular select,
#kontaktformular .textfeld_einzeilig,
#kontaktformular .textfeld_mehrzeilig,
#kontaktformular input.submit,
.textfeld_sc,
#main #maincontent .sc_hinweis,
#suchfunktion label,
#suchfunktion .textfeld_einzeilig,
#main #widerrufsbelehrung p,
#main #maincontent #pannenliste p,
#main #maincontent #pannenliste .bewertungsbereich .negativ,
#main #maincontent #pannenliste .bewertungsbereich .positiv,
#main #maincontent #pannenliste .bewertungsbereich .ergebnis p.note,
#main #maincontent #pannenliste .bewertungsbereich .ergebnis p.stimmen,
#main #maincontent #pannenliste .bewertungsbereich .ergebnis p.zusatz,
.kommentarbereich li,
.panne .footerlinks li,
#kommentarformular .textfeld_einzeilig,
#kommentarformular input.abschicken,
#kommentarformular input.abbrechen,
#main #maincontent #kommentarpruefformular li p.anreisser,
#kommentarpruefformular .textfeld_nickname,
#kommentarpruefformular .textfeld_kommentar,
#kommentarpruefformular input.submit,
.jplayer { font-family:'Open Sans', Arial, Helvetica, sans-serif; }