/* ==========================================================
THE ROCK! — Entwurf „Skizzenbuch"
Papier. Zwei Stifte plus Freunde. Viel Luft.
Grön is dat Land · rood is de Kant · witt is de Sand
========================================================== */
:root{
--papier:#FAF8F3;
--tinte:#31424A; /* Bleistift-Blaugrau */
--gruen:#2E6B57;
--gruen-t:#2C7A6C; /* Petrol aus der Skizze */
--rot:#C6473C;
--orange:#E07B39;
--ocker:#E4B34C;
--grau:#A8AFAB;
--text:#3A4A47;
--hell:#6C7B77;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--ocker);color:var(--tinte)}
html{scroll-behavior:smooth}
body{
background:var(--papier);
color:var(--text);
font-family:'Newsreader',serif;
font-size:1.06rem;
line-height:1.65;
font-weight:400;
}
a{color:inherit;text-decoration:none}
svg{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 34px}
.caveat{font-family:'Caveat',cursive}
.meta{font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hell)}
/* ---------- Handschrift-Unterstreichungen ---------- */
.wellig:hover{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--rot);text-decoration-thickness:2px;text-underline-offset:7px}
/* ---------- Kopf ---------- */
.kopfzeile{padding:34px 0 6px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px}
/* Logo: Lange Anna links über beide Zeilen, daneben THE ROCK / RADIO HELGOLAND */
.logo-block{display:flex;align-items:flex-start;gap:20px}
.logo-anna{height:148px;width:auto;flex:none}
.logo-zeilen{display:flex;flex-direction:column;gap:4px;padding-top:6px;width:310px;max-width:62vw}
.logo-zeilen img{width:100%;height:auto;display:block}
.logo-strich{width:100%;height:12px;margin-top:4px}
.logo-unter{font-family:'Caveat',cursive;font-size:1.42rem;line-height:1.25;color:var(--gruen);margin-top:4px;white-space:nowrap}
.logo-unter b{color:var(--rot);font-weight:600}
/* Player — leicht, wie hingekritzelt */
.player{display:flex;align-items:center;gap:16px}
.playknopf{
width:58px;height:58px;border:2.5px solid var(--tinte);border-radius:50%;
background:transparent;cursor:pointer;display:grid;place-items:center;
font-size:1.15rem;color:var(--tinte);transform:rotate(-2deg);
transition:transform .15s;position:relative;
}
.playknopf:hover{transform:rotate(-2deg) scale(1.06)}
.playknopf::after{content:"";position:absolute;inset:-7px;border:1.5px solid var(--rot);border-radius:50%;opacity:.55;transform:rotate(3deg) scaleX(1.04)}
.player-text{max-width:230px}
.onair{font-family:'Caveat',cursive;font-size:1.35rem;color:var(--rot);display:flex;align-items:center;gap:8px}
.onair .punkt{width:10px;height:10px;border-radius:50%;background:var(--rot);animation:puls 1.2s infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.15}}
.jetzt{font-family:'Archivo',sans-serif;font-size:.75rem;color:var(--hell);line-height:1.4}
.jetzt b{color:var(--tinte);font-weight:600}
/* ---------- Navigation ---------- */
nav{margin:18px 0 0;border-top:1.5px solid #D8D4C8;border-bottom:1.5px solid #D8D4C8}
.nav-innen{display:flex;flex-wrap:wrap;gap:4px 34px;padding:13px 0;font-family:'Archivo',sans-serif;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}
.nav-innen a{color:var(--tinte);padding:2px 0}
.nav-innen a.aktiv{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--rot);text-decoration-thickness:2px;text-underline-offset:7px}
.nav-innen a.chronik{font-family:'IM Fell English',serif;text-transform:none;letter-spacing:.02em;font-size:1rem;font-style:italic;color:#6b4d1e}
/* ---------- Funkspruch (Ticker, handschriftlich) ---------- */
.funkspruch{overflow:hidden;white-space:nowrap;padding:14px 0 4px}
.funkspruch-lauf{display:inline-block;animation:lauf 60s linear infinite;font-family:'Caveat',cursive;font-size:1.45rem;color:var(--gruen-t)}
.funkspruch-lauf:hover{animation-play-state:paused}
.funkspruch-lauf .plus{color:var(--rot);letter-spacing:.08em;font-weight:600}
.funkspruch-lauf span{margin:0 22px}
@keyframes lauf{from{transform:translateX(8%)}to{transform:translateX(-100%)}}
/* ---------- Hero ---------- */
.hero{padding:34px 0 26px}
.hero-bild{margin:0 0 34px}
.hero-bild svg{width:100%;height:auto}
.bildzeile{font-family:'Caveat',cursive;font-size:1.15rem;color:var(--hell);margin-top:8px;text-align:right}
.kicker{font-family:'Caveat',cursive;font-size:1.7rem;color:var(--rot);display:block;margin-bottom:6px}
.hero h1{
font-family:'Fraunces',serif;font-weight:500;letter-spacing:-.015em;
font-size:clamp(2.6rem,5.8vw,4.6rem);line-height:1.06;color:var(--tinte);
max-width:24ch;
}
/* Fließtext des Aufmachers */
.artikel-text{max-width:70ch;margin-top:38px;font-size:1.13rem}
.artikel-text p{margin-bottom:1.25em}
.artikel-text h2,.artikel-text h3{
font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.01em;
color:var(--tinte);margin:2.4em 0 .6em;line-height:1.2;
}
.artikel-text h2{font-size:1.65rem}
.artikel-text h3{font-size:1.35rem}
.artikel-text a{color:var(--rot);text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:1.5px;text-underline-offset:4px}
.dek{
font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.5;font-weight:300;
color:var(--hell);max-width:58ch;margin:26px 0 0;
}
.byline{margin-top:22px}
.byline b{color:var(--rot)}
/* Randnotiz der Möwe */
.randnotiz{
font-family:'Caveat',cursive;font-size:1.5rem;color:var(--gruen-t);
transform:rotate(-2deg);max-width:300px;margin-top:30px;line-height:1.3;
}
.randnotiz small{display:block;font-size:1.05rem;color:var(--rot)}
.hero-unten{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
@media(max-width:760px){.hero-unten{grid-template-columns:1fr}}
/* ---------- Kritzel-Trennlinie ---------- */
.strich{width:100%;height:16px;margin:44px 0 0}
/* ---------- Lage op'n Fels ---------- */
.lage{display:flex;flex-wrap:wrap;gap:30px 54px;padding:34px 0 10px;align-items:baseline}
.lage-titel{font-family:'Caveat',cursive;font-size:1.6rem;color:var(--rot);transform:rotate(-2deg)}
.lage-wert{font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hell)}
.lage-wert b{
display:block;font-family:'Fraunces',serif;font-weight:700;font-size:1.9rem;
color:var(--tinte);letter-spacing:-.01em;line-height:1.15;text-transform:none;
}
.lage-wert b em{font-style:normal;color:var(--gruen-t)}
/* ---------- Sektionen ---------- */
section{padding:64px 0 8px}
.sek-titel{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.sek-titel h2{
font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.015em;
font-size:clamp(2rem,4.2vw,3.2rem);color:var(--tinte);
}
.sek-titel .und{color:var(--rot)}
.sek-titel a{font-family:'Caveat',cursive;font-size:1.4rem;color:var(--rot)}
.sek-titel a:hover{text-decoration:underline wavy}
.sek-strich{height:14px;margin-bottom:38px}
/* Aufmacher: Bild + Text nebeneinander */
.aufmacher{display:grid;grid-template-columns:1.25fr 1fr;gap:46px;align-items:center;margin-bottom:64px}
@media(max-width:860px){.aufmacher{grid-template-columns:1fr}}
.aufmacher h3{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.1;color:var(--tinte);letter-spacing:-.015em;margin:8px 0 14px}
.aufmacher .dek{font-size:1.18rem;margin:0 0 16px}
/* Artikelraster — ohne Kästen, nur Luft */
.raster{display:grid;grid-template-columns:1fr 1fr;gap:56px 46px;margin-bottom:40px}
@media(max-width:760px){.raster{grid-template-columns:1fr}}
.artikel h3{
font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.5rem,2.5vw,2.05rem);
line-height:1.12;color:var(--tinte);letter-spacing:-.01em;margin:10px 0 10px;
}
.artikel h3 a:hover,.aufmacher h3 a:hover{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--gruen-t);text-decoration-thickness:2px;text-underline-offset:6px}
.artikel .beschreibung{font-size:1.05rem;font-weight:300;color:var(--hell);line-height:1.55;margin-bottom:10px;max-width:52ch}
.artikel .bild,.aufmacher .bild{margin-bottom:6px}
/* Knallt gerade — handgeschriebene Liste */
.knallt{padding:50px 0 8px}
.knallt-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
.knall{border-top:2px solid var(--tinte);padding-top:12px;position:relative}
.knall .nr{font-family:'Caveat',cursive;font-size:2.2rem;color:var(--rot);line-height:1}
.knall p{font-family:'Fraunces',serif;font-weight:600;font-size:1.12rem;line-height:1.25;color:var(--tinte);margin:4px 0 6px}
.knall p a:hover{text-decoration:underline wavy var(--rot) 2px;text-underline-offset:5px}
/* ---------- Chronik ---------- */
.chronik{background:#F3ECDA;margin-top:70px;padding:0 0 70px}
.chronik-welle{width:100%;height:30px;transform:translateY(-1px)}
.chronik .wrap{padding-top:50px}
.chronik h2{font-family:'IM Fell English',serif;font-size:clamp(2.2rem,4.6vw,3.4rem);color:#3d2a0e;font-weight:400}
.chronik .untertitel{font-family:'IM Fell English',serif;font-style:italic;color:#7a5a24;font-size:1.15rem;margin:6px 0 40px}
.chronik-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:56px}
@media(max-width:820px){.chronik-grid{grid-template-columns:1fr}}
.chronik-artikel{font-family:'IM Fell English',serif;font-size:1.18rem;color:#3a2c10;line-height:1.7}
.chronik-artikel h3{font-size:2rem;font-weight:400;margin-bottom:16px;color:#3d2a0e}
.chronik-artikel p{margin-bottom:1.1em}
.chronik-artikel p:first-of-type::first-letter{font-size:3.8em;float:left;line-height:.78;padding-right:12px;color:var(--rot)}
.chronik-mehr{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--rot)}
.chronik-mehr:hover{text-decoration:underline wavy}
.chronik-rand h4{font-family:'IM Fell English',serif;font-size:1.35rem;color:#3d2a0e;margin-bottom:14px;font-weight:400}
.chronik-rand ul{list-style:none}
.chronik-rand li{padding:10px 0;border-bottom:1px dotted #a5834a;font-family:'IM Fell English',serif;font-size:1.08rem;color:#4a3512}
.chronik-rand li b{color:var(--rot)}
.chronik-rand li a:hover{text-decoration:underline wavy var(--rot) 1.5px;text-underline-offset:4px}
/* ---------- Programm ---------- */
.programm .zeile{
display:grid;grid-template-columns:170px 1fr;gap:10px 40px;
padding:26px 0;border-bottom:1.5px solid #DDD8CB;align-items:baseline;position:relative;
}
@media(max-width:640px){.programm .zeile{grid-template-columns:1fr}}
.programm .zeit{font-family:'Fraunces',serif;font-weight:700;font-size:1.5rem;color:var(--gruen-t)}
.programm h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.6rem;color:var(--tinte);letter-spacing:-.01em}
.programm p{font-weight:300;color:var(--hell);max-width:64ch}
.live-kringel{
position:absolute;right:0;top:26px;font-family:'Caveat',cursive;font-size:1.4rem;color:var(--rot);
transform:rotate(-4deg);padding:2px 14px;border:2px solid var(--rot);border-radius:50%;
}
/* Moderatoren-Köpfe neben der Sendung */
.prog-inhalt{display:flex;align-items:center;gap:20px}
.prog-koepfe{display:flex;flex-shrink:0}
.prog-koepfe img{
width:58px;height:58px;border-radius:50%;object-fit:cover;
border:2.5px solid var(--tinte);background:#fff;transform:rotate(-2deg);
}
.prog-koepfe img+img{margin-left:-14px;transform:rotate(2.5deg)}
/* ---------- Fuß ---------- */
footer{margin-top:80px}
.fuss-flagge{width:100%;height:26px}
.fuss-innen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:40px;padding:46px 0 40px}
.fuss-innen h4{font-family:'Fraunces',serif;font-weight:800;font-size:1.15rem;color:var(--tinte);margin-bottom:14px}
.fuss-innen ul{list-style:none;font-size:.98rem;font-weight:300}
.fuss-innen li{padding:4px 0}
.fuss-innen li a:hover{text-decoration:underline wavy var(--gruen-t) 1.5px;text-underline-offset:5px}
.motto{font-family:'Caveat',cursive;font-size:1.6rem;line-height:1.35;color:var(--gruen);transform:rotate(-1.5deg)}
.motto .r{color:var(--rot)}
.fuss-ende{text-align:center;padding:10px 0 34px}
/* ---------- Hero-Bild als Foto/Illustration ---------- */
.hero-bild img{width:100%;height:auto;display:block}
a.hero-link{display:block}
a.hero-link:hover img{filter:contrast(1.04) saturate(1.05)}
.weiterlesen{margin-top:18px}
/* ---------- Shell: persistenter Kopf mit Player, Inhalt im iframe ---------- */
html.shell, body.shell-body{height:100%}
body.shell-body{display:flex;flex-direction:column;overflow:hidden}
body.shell-body .kopfzeile{padding:18px 0 4px}
body.shell-body nav{margin-top:12px}
body.shell-body .logo-anna{height:118px}
body.shell-body .logo-zeilen{width:250px}
.inhalt-frame{flex:1;width:100%;border:none;display:block;background:var(--papier)}
/* ---------- Wetterseite ---------- */
.wetter-jetzt{display:flex;flex-wrap:wrap;align-items:center;gap:24px 38px;margin:30px 0 0}
.wetter-icon{font-size:4.4rem;line-height:1}
.wetter-temp{font-family:'Fraunces',serif;font-weight:600;font-size:3.6rem;color:var(--tinte);letter-spacing:-.02em;line-height:1}
.wetter-temp em{font-style:normal;color:var(--gruen-t);font-size:1.9rem}
.sonne-zeile{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--gruen);margin:20px 0 0;transform:rotate(-1deg)}
.wetter-stunden{display:grid;grid-template-columns:repeat(12,1fr);gap:20px 10px;padding:16px 2px 8px}
@media(max-width:980px){.wetter-stunden{grid-template-columns:repeat(6,1fr)}}
@media(max-width:560px){.wetter-stunden{grid-template-columns:repeat(4,1fr)}}
.wetter-stunde{flex:none;text-align:center;font-family:'Archivo',sans-serif}
.wetter-stunde .st-zeit{font-size:.7rem;letter-spacing:.1em;color:var(--hell)}
.wetter-stunde .st-icon{font-size:1.7rem;margin:5px 0 3px}
.wetter-stunde .st-temp{font-family:'Fraunces',serif;font-weight:600;font-size:1.1rem;color:var(--tinte)}
.wetter-stunde .st-wind{font-size:.66rem;color:var(--hell);margin-top:2px;white-space:nowrap}
.wetter-tage{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:24px;margin-top:14px}
.wetter-tag{border-top:2px solid var(--tinte);padding-top:10px}
.wetter-tag .tag-name{font-family:'Caveat',cursive;font-size:1.4rem;color:var(--rot)}
.wetter-tag .tag-icon{font-size:2.1rem;margin:4px 0}
.wetter-tag .tag-temp{font-family:'Fraunces',serif;font-weight:600;font-size:1.35rem;color:var(--tinte)}
.wetter-tag .tag-temp small{color:var(--hell);font-size:1rem;font-weight:400}
.wetter-tag .tag-meta{font-family:'Archivo',sans-serif;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--hell);margin-top:6px;line-height:1.8}
/* Stunden-Details + Legende + Lage-Titel in eigener Zeile */
.wetter-stunde .st-detail{font-size:.68rem;color:var(--hell);margin-top:2px;white-space:nowrap}
.legende{border:2px dashed var(--tinte);padding:12px 18px;display:flex;flex-wrap:wrap;gap:6px 24px;font-family:'Archivo',sans-serif;font-size:.78rem;color:var(--hell);align-self:start}
.lage .lage-titel{flex:0 0 100%;margin-bottom:10px}
/* Lage-Leiste kompakter: Titel oben, alle sieben Werte in einer Zeile */
.lage{gap:16px 30px;padding:26px 0 8px}
.lage .lage-wert{font-size:.6rem;letter-spacing:.12em}
.lage .lage-wert b{font-size:1.28rem}
/* Cover im Player: zwischen Play-Knopf und Text, leicht verdreht wie ein Polaroid */
.np-cover{
width:52px;height:52px;object-fit:cover;flex:none;
border:2px solid var(--tinte);transform:rotate(2deg);
box-shadow:2px 2px 0 rgba(49,66,74,.25);background:#fff;
}
/* Reklame-Ecke im Kopf: schiefer Zettel, wackelt leicht */
.werben{
font-family:'Caveat',cursive;font-size:1.22rem;line-height:1.3;color:var(--tinte);
max-width:250px;padding:12px 18px 10px;
border:2.5px dashed var(--rot);background:#FBF3E2;
box-shadow:3px 4px 0 rgba(198,71,60,.22);
transform:rotate(-3deg);
animation:werben-wackel 3.4s ease-in-out infinite;
}
.werben:hover{animation-play-state:paused;transform:rotate(-.5deg) scale(1.05);text-decoration:none}
.werben b{color:var(--rot)}
.werben-kicker{display:block;font-family:'Archivo',sans-serif;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gruen-t);margin-bottom:3px}
.werben-pfeil{display:block;color:var(--rot);font-weight:600;margin-top:3px}
@keyframes werben-wackel{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(-1.2deg)}}
@media(max-width:1020px){.werben{display:none}}
/* ---------- Musikwunsch-Formular ---------- */
.mw-form{max-width:560px;margin-top:30px}
.mw-form .feld{margin-bottom:22px;position:relative}
.mw-form label{display:block;font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hell);margin-bottom:6px}
.mw-form input,.mw-form textarea{
width:100%;font-family:'Newsreader',serif;font-size:1.05rem;color:var(--text);
background:#FFFEFA;border:1.5px solid #C9C4B4;padding:10px 14px;outline:none;border-radius:0;
}
.mw-form input:focus,.mw-form textarea:focus{border-color:var(--gruen-t)}
/* Dropdowns im gleichen Skizzen-Look wie die Eingabefelder,
mit handgekritzeltem Pfeil statt Browser-Standard */
.mw-form select{
width:100%;font-family:'Newsreader',serif;font-size:1.05rem;color:var(--text);
background-color:#FFFEFA;border:1.5px solid #C9C4B4;padding:10px 42px 10px 14px;
outline:none;border-radius:0;cursor:pointer;
-webkit-appearance:none;-moz-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:15px 10px;
}
.mw-form select:focus{border-color:var(--gruen-t)}
.mw-form select::-ms-expand{display:none}
.mw-form input[type=checkbox],.mw-form input[type=radio]{
width:auto;accent-color:var(--gruen);transform:scale(1.15);margin-right:6px;cursor:pointer;
}
.mw-zaehler{font-family:'Archivo',sans-serif;font-size:.72rem;color:var(--hell)}
.mw-senden{
font-family:'Caveat',cursive;font-size:1.5rem;font-weight:600;color:#FBF6EC;background:var(--rot);
border:none;padding:10px 30px;cursor:pointer;transform:rotate(-1.5deg);
box-shadow:3px 3px 0 rgba(49,66,74,.3);transition:transform .12s;
}
.mw-senden:hover{transform:rotate(0deg) scale(1.04)}
.mw-dropdown{
display:none;position:absolute;left:0;right:0;top:100%;z-index:20;
background:#FFFEFA;border:1.5px solid var(--tinte);max-height:280px;overflow-y:auto;
box-shadow:3px 3px 0 rgba(49,66,74,.15);
}
.mw-dropdown .dropdown-item{
display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
padding:9px 14px;font-family:'Newsreader',serif;font-size:.98rem;color:var(--text);
border-bottom:1px dotted #D8D4C8;
}
.mw-dropdown .dropdown-item:hover,.mw-dropdown .dropdown-item.active{background:#F3ECDA}
.mw-dropdown small{color:var(--hell)}
/* Veranstaltungen: Tagesüberschriften */
.va-tagkopf{font-family:'Caveat',cursive;font-size:1.8rem;font-weight:600;color:var(--rot);margin:40px 0 2px;transform:rotate(-1deg)}
.va-tagkopf:first-child{margin-top:16px}
/* Artikel: den fetten Zusammenfassungsabsatz (…
) sichtbar
vom Fließtext absetzen */
.artikel-text > strong:first-child{display:block;margin-bottom:1.3em}
.artikel-text > strong:first-child + br{display:none}
/* ---------- Geschichte-Seite: Tabs + Bolzendahlsche Chronik ---------- */
.gtabs{display:flex;flex-wrap:wrap;gap:10px 34px;border-bottom:1.5px solid #b99b62;margin:30px 0 0;font-family:'Archivo',sans-serif;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}
.gtabs button{background:none;border:none;cursor:pointer;padding:10px 2px;color:#6b4d1e;font:inherit;letter-spacing:inherit;text-transform:inherit}
.gtabs button:hover{color:var(--rot)}
.gtabs button.aktiv{color:var(--rot);text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:2px;text-underline-offset:8px}
.ch-unterzeile{font-family:'IM Fell English',serif;font-style:italic;color:#7a5a24;font-size:1.15rem;margin:26px 0 0}
.ch-platzhalter{font-family:'IM Fell English',serif;font-style:italic;color:#7a5a24;font-size:1.3rem;margin:60px 0}
.ch-suche{border:2px dashed #8a6a34;background:rgba(255,252,240,.55);padding:18px 22px 16px;margin:28px 0 8px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-end}
.ch-suche label{display:block;font-family:'Archivo',sans-serif;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#6b4d1e;margin-bottom:5px}
.ch-suche input,.ch-suche select{font-family:'IM Fell English',serif;font-size:1.1rem;color:#3a2c10;background:#FFFDF5;border:1.5px solid #b99b62;padding:8px 12px;outline:none;border-radius:0}
.ch-suche input:focus,.ch-suche select:focus{border-color:var(--rot)}
.ch-senden{font-family:'Caveat',cursive;font-size:1.35rem;font-weight:600;color:#FBF6EC;background:var(--rot);border:none;padding:9px 24px;cursor:pointer;transform:rotate(-1.5deg);box-shadow:3px 3px 0 rgba(61,42,14,.3);transition:transform .12s}
.ch-senden:hover{transform:rotate(0deg) scale(1.04)}
.ch-hinweis{font-family:'Caveat',cursive;font-size:1.2rem;color:#8a6a34;flex-basis:100%;line-height:1.3}
.ch-ueberschrift{font-family:'IM Fell English',serif;font-weight:400;font-size:clamp(1.6rem,3.4vw,2.4rem);color:#3d2a0e;margin:36px 0 0}
.ch-eintrag{margin:36px 0;font-family:'IM Fell English',serif;color:#2e2008}
.ch-datum{font-style:italic;color:var(--rot);font-size:1.15rem}
.ch-eintrag h3{font-family:'IM Fell English',serif;font-weight:400;font-size:1.9rem;color:#3d2a0e;margin:6px 0 14px;line-height:1.15}
.ch-eintrag .text{font-size:1.14rem;line-height:1.75;max-width:74ch}
.ch-eintrag .text p{margin-bottom:1em}
.ch-eintrag:first-of-type .text > p:first-child::first-letter{font-size:3.4em;float:left;line-height:.8;padding-right:10px;color:var(--rot)}
.ch-trenner{border:none;border-top:1px dotted #8a6a34;margin:14px 0}
/* Chronik: Kasten links + Originaleinträge */
.ch-grid{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start;margin-top:4px}
@media(max-width:860px){.ch-grid{grid-template-columns:1fr}}
.ch-kasten{border:2px solid #8a6a34;background:rgba(255,252,240,.55);padding:18px 20px;margin-top:28px;box-shadow:4px 4px 0 rgba(61,42,14,.15)}
.ch-kasten h3{font-family:'IM Fell English',serif;font-weight:400;font-size:1.3rem;color:#3d2a0e;border-bottom:1px solid #8a6a34;padding-bottom:8px;margin-bottom:10px}
.ch-kasten ul{list-style:none;margin:0;padding:0}
.ch-kasten li{border-bottom:1px dotted #b99b62}
.ch-kasten li:last-child{border-bottom:none}
.ch-kasten button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:9px 2px;font-family:'IM Fell English',serif;font-size:1.02rem;color:#3a2c10;line-height:1.3}
.ch-kasten button:hover{color:var(--rot)}
.ch-kasten .kdatum{font-style:italic;font-size:.85rem;color:#8a6a34}
.ch-original-hinweis{display:inline-block;font-family:'Archivo',sans-serif;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#8a6a34;border:1px dashed #8a6a34;padding:3px 10px;margin:6px 0 10px}
.ch-original{font-style:italic;color:#4a3512}
/* Aktueller Chronik-Beitrag: Play-Knopf wie im Kopf-Player */
.ch-audio{display:flex;align-items:center;gap:16px;margin:28px 0 2px}
.ch-audio-label{font-family:'Caveat',cursive;font-size:1.45rem;font-weight:600;color:var(--rot)}
/* Chronik-Kasten: blättern */
.ch-kasten-nav{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #8a6a34;margin-top:10px;padding-top:10px}
.ch-kasten-nav button{width:34px;height:34px;border:1.5px solid #3d2a0e;border-radius:50%;background:transparent;cursor:pointer;font-family:'IM Fell English',serif;font-size:1.2rem;color:#3d2a0e;line-height:1}
.ch-kasten-nav button:hover:not(:disabled){color:var(--rot);border-color:var(--rot)}
.ch-kasten-nav button:disabled{opacity:.3;cursor:default}
.ch-kasten-nav span{font-family:'IM Fell English',serif;font-style:italic;font-size:.95rem;color:#6b4d1e}
/* Kleiner Play-Knopf (Chronik-Einträge), gleiche Machart wie im Kopf */
.playknopf-klein{width:38px;height:38px;font-size:.78rem;margin-bottom:6px}
.playknopf-klein::after{inset:-5px}
.playknopf-klein.kein-audio{opacity:.35;cursor:default}
.playknopf-klein.kein-audio::after{opacity:.2}
/* Chronik: Fußnote unter den Beiträgen */
.ch-fussnote{font-family:'IM Fell English',serif;font-style:italic;color:#8a6a34;font-size:1.02rem;border-top:1px dotted #8a6a34;margin-top:48px;padding-top:14px;max-width:74ch}
/* Geschichten: Karten mit Titelbild */
.gs-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:34px 30px;margin-top:34px}
.gs-karte{cursor:pointer;background:rgba(255,252,240,.55);border:1.5px solid #b99b62;transition:transform .15s ease}
.gs-karte:hover{transform:rotate(-.5deg) translateY(-3px);border-color:var(--rot)}
.gs-bild{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1.5px solid #b99b62}
.gs-karte-text{padding:18px 20px 20px}
.gs-karte-text h3{font-family:'IM Fell English',serif;font-weight:400;font-size:1.45rem;color:#3d2a0e;line-height:1.2;margin-bottom:10px}
.gs-karte-text p{font-family:'IM Fell English',serif;font-size:1.02rem;line-height:1.6;color:#2e2008;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gs-detail{margin-top:36px}
.gs-detail-titel{font-family:'IM Fell English',serif;font-weight:400;font-size:clamp(1.9rem,4vw,2.9rem);color:#3d2a0e;line-height:1.12;max-width:26ch}
.gs-detail .artikel-text{font-family:'IM Fell English',serif;color:#2e2008}
.gs-detail .artikel-text p{font-size:1.14rem;line-height:1.75;max-width:74ch;margin-bottom:1em}
.gs-detail .artikel-text strong{font-weight:400;font-style:italic;color:#6b4d1e;display:block;font-size:1.22rem;margin-bottom:1.2em}
.gs-detail .artikel-text h2,.gs-detail .artikel-text h3{font-family:'IM Fell English',serif;font-weight:400;color:#3d2a0e;margin:2.4em 0 .5em;max-width:34ch}
/* Geschichte: die Kapitel der Inselgeschichte */
.gk-nav{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow:auto}
.gk-kapitel{margin:36px 0}
.gk-titel{font-family:'IM Fell English',serif;font-weight:400;font-size:1.9rem;color:#3d2a0e;margin:6px 0 4px;line-height:1.15}
.gk-text{font-family:'IM Fell English',serif;color:#2e2008;margin-top:8px}
.gk-text p{font-size:1.14rem;line-height:1.75;max-width:74ch;margin-bottom:1em}
.gk-text strong:first-child{font-weight:400;font-style:italic;color:#6b4d1e;display:block;font-size:1.2rem;margin-bottom:1.1em;max-width:74ch}
.gk-text h2,.gk-text h3{font-family:'IM Fell English',serif;font-weight:400;font-size:1.4rem;color:#3d2a0e;margin:1.8em 0 .5em;max-width:40ch}
.gk-quellen{font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8a6a34;margin-top:14px}