, weil player.js das Bild als Hintergrund setzt und bei fehlendem Cover ein Notensymbol hineinschreibt. Deshalb hier „place-items" fuer das Symbol statt „object-fit" fuer ein Bild. */ .cx-cover{ width:78px;height:78px;border-radius:9px;flex:none; background-color:var(--cx-weich);display:grid;place-items:center; overflow:hidden; } .cx-cover svg{width:34px;height:34px;fill:var(--cx-navy);opacity:.35} .cx-laeuft-label{font-size:11.5px;color:#5A6B80;margin:0} .cx-titel{font-family:var(--font-head,'Montserrat',sans-serif);font-weight:800; font-size:1.08rem;margin:1px 0 1px;color:var(--cx-navy);line-height:1.25} .cx-interpret{font-size:.9rem;color:#5A6B80;margin:0} .cx-player-fuss{display:flex;align-items:center;gap:11px;margin-top:12px; padding-top:11px;border-top:1px solid var(--cx-linie)} .cx-pl-knopf{width:34px;height:34px;border-radius:50%;border:2px solid var(--cx-rot); background:#fff;color:var(--cx-rot);display:grid;place-items:center;cursor:pointer;flex:none;padding:0} .cx-pl-knopf:hover{background:var(--cx-rot);color:#fff} .cx-pl-knopf svg{width:13px;height:13px;fill:currentColor} .cx-laut-symbol{color:var(--cx-grau);display:grid;place-items:center;width:18px;flex:none} .cx-laut-symbol svg{width:16px;height:16px;fill:currentColor} /* ============================================================ 3. DIE DREI KARTEN UNTER DEM HERO Sie ragen in den Hero hinein – deshalb der negative Abstand. ============================================================ */ .cx-drei{ position:relative;z-index:5;margin-top:-96px; display:grid;grid-template-columns:repeat(3,1fr);gap:20px; } .cx-karte{ background:var(--cx-karte);color:#fff;border-radius:var(--cx-radius); padding:18px 20px 16px;box-shadow:var(--cx-schatten-stark); display:flex;flex-direction:column; } .cx-karte-kopf{display:flex;align-items:center;gap:11px;margin-bottom:14px} .cx-karte-symbol{ width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.13); display:grid;place-items:center;flex:none;color:#fff; } .cx-karte-symbol svg{width:18px;height:18px;fill:currentColor} .cx-karte h3{color:#fff;font-size:1.12rem;letter-spacing:-.01em;margin:0;font-weight:700} .cx-karte-unter{font-size:11.5px;color:rgba(255,255,255,.6);margin:1px 0 0;letter-spacing:.01em} .cx-karte a{color:#fff} .cx-karte-mehr{ margin-top:auto;padding-top:12px;font-size:12.5px;font-weight:600; display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.9); align-self:flex-end; } .cx-karte-mehr:hover{color:#fff;gap:9px} /* Ohne feste Groesse wird das SVG so gross wie der Platz – der Pfeil war dreimal so hoch wie die Schrift. Gilt fuer alle Pfeile. */ .cx-karte-mehr svg,.cx-mehr svg,.cx-fuss-liste svg{width:11px;height:11px;flex:none} .cx-mehr svg{width:13px;height:13px} /* Sendeplan-Zeilen */ .cx-plan-zeile{display:flex;gap:13px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.09); font-size:13px;align-items:baseline} .cx-plan-zeile:last-of-type{border-bottom:0} .cx-plan-zeit{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.72);flex:none;width:96px} .cx-plan-name{font-weight:600;color:#fff} .cx-plan-mod{font-size:11.5px;color:rgba(255,255,255,.55)} .cx-plan-zeile.jetzt{background:rgba(246,40,48,.16);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:7px} /* News-Zeilen */ .cx-news-zeile{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09)} .cx-news-zeile:last-of-type{border-bottom:0} .cx-news-bild{width:74px;height:54px;border-radius:7px;object-fit:cover;flex:none;background:rgba(255,255,255,.08)} /* „display:block" ist noetig: Es sind , damit sie in einem Verweis stehen duerfen ( darf kein

enthalten). Ohne das liefen Titel, Text und Datum in einer Zeile ineinander. */ .cx-news-zeile > span{display:block;min-width:0} .cx-news-titel{display:block;font-weight:600;font-size:13.5px;color:#fff;margin:0 0 3px;line-height:1.35} .cx-news-text{display:block;font-size:11.5px;color:rgba(255,255,255,.62);margin:0;line-height:1.5} .cx-news-datum{display:block;font-size:11px;color:rgba(255,255,255,.45);margin:4px 0 0} /* Dasselbe bei den Merkmalen und den Sendeplan-Zeilen. */ .cx-merk > span{display:block;min-width:0} .cx-plan-zeile > span{min-width:0} /* Merkmal-Zeilen (Regional / Digital / Genial) */ .cx-merk{display:flex;gap:12px;padding:8px 0;align-items:flex-start} .cx-merk-symbol{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.13); display:grid;place-items:center;flex:none;color:#fff} .cx-merk-symbol svg{width:18px;height:18px;fill:currentColor} .cx-merk b{display:block;font-size:13.5px;color:#fff;margin-bottom:1px} .cx-merk span{font-size:11.5px;color:rgba(255,255,255,.62);line-height:1.5} /* ============================================================ 4. ABSCHNITT „AUF ALLEN KANÄLEN" ============================================================ */ .cx-kanaele{background:var(--cx-weich);padding:66px 0;margin-top:64px} .cx-kanaele-innen{display:grid;grid-template-columns:1.05fr 1.25fr;gap:46px;align-items:center} .cx-klein{font-family:var(--font-head,'Montserrat',sans-serif);font-weight:700;font-size:12.5px; letter-spacing:.15em;color:var(--cx-rot);text-transform:uppercase;margin:0 0 12px} .cx-kanaele h2{margin-bottom:16px} .cx-kanaele p{color:#42546B;max-width:420px} .cx-kachel-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .cx-kachel{text-align:center} .cx-kachel-rahmen{ width:84px;height:84px;margin:0 auto 12px;border:1px solid var(--cx-linie); border-radius:var(--cx-radius);background:#fff;display:grid;place-items:center; color:var(--cx-navy);box-shadow:var(--cx-schatten); } .cx-kachel-rahmen svg{width:34px;height:34px;fill:currentColor} .cx-kachel b{display:block;font-family:var(--font-head,'Montserrat',sans-serif); font-size:12.5px;letter-spacing:.09em;color:var(--cx-navy);margin-bottom:5px;text-transform:uppercase} .cx-kachel span{font-size:12.5px;color:#5A6B80;line-height:1.55} /* ============================================================ 5. EVENT-KARTEN ============================================================ */ .cx-abschnitt{padding:66px 0} .cx-abschnitt-kopf{display:flex;align-items:center;justify-content:space-between; gap:20px;margin-bottom:26px;flex-wrap:wrap} /* ---------- ÜBERSCHRIFTEN: KEINE GROSSBUCHSTABEN MEHR ---------- Durchgehende Grossbuchstaben liest das Auge Buchstabe fuer Buchstabe – die Wortform, an der man ein Wort normalerweise erkennt, faellt weg. Bei einer Zeile wie „ZULETZT GESPIELT" faellt das kaum auf, bei „AKTUELLE NACHRICHTEN" schon. Stattdessen: normale Schreibweise, etwas groesser, kraeftiger und leicht zusammengerueckt. Das wirkt ruhiger und trotzdem bestimmt. */ .cx-abschnitt-kopf h2{ margin:0;letter-spacing:-.015em;font-weight:800;line-height:1.15; font-size:clamp(1.45rem,2.4vw,1.95rem); } .cx-mehr{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--cx-navy)} .cx-mehr:hover{gap:12px;color:var(--cx-rot)} .cx-events{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .cx-event{ background:#fff;border:1px solid var(--cx-linie);border-radius:var(--cx-radius); overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s; } .cx-event:hover{transform:translateY(-3px);box-shadow:var(--cx-schatten-stark)} .cx-event-bild{position:relative;aspect-ratio:16/10;background:var(--cx-weich)} .cx-event-bild img{width:100%;height:100%;object-fit:cover} .cx-datum{ position:absolute;top:12px;left:12px;background:#fff;border-radius:9px; padding:6px 10px;text-align:center;box-shadow:var(--cx-schatten);min-width:46px; } .cx-datum b{display:block;font-family:var(--font-head,'Montserrat',sans-serif); font-size:1.15rem;font-weight:800;color:var(--cx-rot);line-height:1} .cx-datum span{display:block;font-size:10px;font-weight:700;letter-spacing:.08em; color:var(--cx-rot);text-transform:uppercase;margin-top:1px} .cx-event-text{padding:14px 16px 18px;flex:1;display:flex;flex-direction:column} .cx-event-text h3{font-size:1rem;margin:0 0 7px} .cx-ort{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#5A6B80;margin:0 0 9px} .cx-ort svg{width:12px;height:12px;fill:currentColor;flex:none} .cx-event-text p{font-size:13px;color:#42546B;margin:0;line-height:1.6} /* ============================================================ 6. UNTERSEITEN – Kopf nach der Vorlage „Sendeplan" Bild oben, Titel darin, darunter der Inhalt. ============================================================ */ /* Derselbe Gedanke wie beim Hero: kein Schleier, sondern der richtige Bildausschnitt. Der Kopf ist niedriger, deshalb liegt der Schnitt etwas tiefer – der Titel sitzt trotzdem im hellen Bereich. */ .cx-seitenkopf{ position:relative;background-size:cover;background-position:center 30%; /* ---------- FLACHER ALS VORHER ---------- War clamp(240px,22vw,330px) – auf einem 1500px breiten Fenster also 330px hoch. Ueber der Ueberschrift stand dadurch viel leerer Bildraum. Jetzt clamp(150px,13vw,210px): auf 1500px rund 195px, also gut ein Drittel flacher. Die Ueberschrift rueckt damit nach oben und der Inhalt darunter folgt entsprechend frueher. Bewusst hier und nicht ueber den Regler „Abstand nach oben": Dieser Regler wird in teile.php zur LAUFZEIT ausgegeben und ueberschreibt jede Angabe von hier – wer ihn einmal gespeichert hat, haette von einer Aenderung am Regler-Standard nichts gemerkt. Die Hoehe dagegen wird nicht erzeugt und wirkt immer. */ min-height:clamp(150px,13vw,210px);display:grid; /* ---------- TITEL UNTEN LINKS ---------- Vorher „place-items:center" und mittiger Text – das ergab das weisse Kaestchen in der Bildmitte. Jetzt sitzt der Inhalt unten links. „!important" ist hier noetig, weil teile.php zur LAUFZEIT „align-items:start" ausgibt und damit spaeter steht als diese Datei. Ohne das saesse der Titel wieder oben. Genau diese Falle hat mich bei mehreren Punkten erwischt – deshalb hier gleich mitbedacht. */ /* Ausdruecklich beide Achsen statt der Kurzschreibweise „place-items": Die wird nicht von jeder Umgebung aufgeloest, und dann waere die Ausrichtung stillschweigend verlorengegangen. */ align-items:end!important;justify-items:start!important; text-align:left;padding:clamp(26px,3vw,40px) 0 clamp(18px,2vw,26px); overflow:hidden; } /* Der Verlauf traegt die weisse Schrift – auf hellen Fotos ebenso wie auf dunklen. Er liegt UNTER dem Text und ueber dem Bild. */ .cx-sk-verlauf{ position:absolute;left:0;right:0;bottom:0;height:66%;z-index:1; background:linear-gradient(180deg,rgba(0,20,45,0),rgba(0,20,45,.66)); pointer-events:none; } .cx-seitenkopf-innen{ position:relative;z-index:2; width:100%;max-width:var(--cx-breite);margin:0 auto;padding:0 22px; display:flex;align-items:stretch;gap:18px; } /* Der rote Balken: so hoch wie der Textblock, nicht fest in px – damit er bei einem laengeren Titel mitwaechst. */ .cx-sk-balken{ width:6px;border-radius:4px;background:var(--cx-rot);flex:none; min-height:58px; } .cx-sk-text{min-width:0} .cx-sk-krume{ color:rgba(255,255,255,.84);font-size:.78rem;letter-spacing:.11em; text-transform:uppercase;margin:0 0 7px;font-weight:600; } /* ---------- KASTEN IN DER FORM DES BILDES ---------- Diese Klasse setzt das Design, sobald die Masse der Bilddatei bekannt sind. Dann steht am Element ein „aspect-ratio", und die Hoehe ergibt sich aus der Breite. „background-size:contain" statt „cover": Bei gleicher Form ist das Ergebnis dasselbe – greift aber eine der Grenzen (sehr flaches oder sehr hohes Bild), zeigt „contain" weiter das GANZE Bild, statt es zu beschneiden. Genau darum geht es. Die Polsterung faellt kleiner aus: Sie zaehlt zur Hoehe dazu und wuerde die Form sonst verfaelschen. */ .cx-seitenkopf.cx-sk-form{ background-size:contain;background-repeat:no-repeat; background-position:center center; padding:clamp(16px,2.5vw,30px) 18px; /* Greift ausnahmsweise doch eine der Grenzen (sehr hohes Bild auf niedrigem Fenster), bleibt links und rechts ein Rand. Der bekommt eine Farbe aus dem Design, damit es nach Absicht aussieht und nicht nach Fehler. */ background-color:var(--cx-weich,#F7F8FC); } /* ---------- DIE SCHRIFT AUF DEM BILD ---------- Vorher stand der Titel nackt auf dem Foto und wurde nur durch einen weissen Schein lesbar gehalten. Bei einem hellen Himmel – genau wie auf deinem Bild – reicht das nicht: Die Schrift franst aus und wirkt wie draufgeklebt. Jetzt liegt sie auf einer eigenen Flaeche: milchiges Weiss mit Weichzeichnung dahinter, feiner Rand, weiche Ecken. Das funktioniert ueber JEDEM Bild – hell, dunkel, unruhig – und der Titel bleibt trotzdem leicht. Der Kasten waechst mit der Schrift, nicht ueber die ganze Breite: „display:inline-block" statt einer festen Breite. */ /* ---------- DER KASTEN IST ENTFALLEN ---------- Hier stand eine zweite Regel fuer dasselbe Element, die den Milchglas-Kasten erzeugte: eigene Flaeche, Rand, runde Ecken, Schatten. Sie steht SPAETER in der Datei als die neue Regel weiter oben und hat sie deshalb ueberschrieben. Der Titel liegt jetzt frei auf dem Verlauf – kein Kasten mehr. Uebrig bleiben nur die Angaben, die noch gebraucht werden. */ .cx-seitenkopf-innen{ position:relative;z-index:2; /* Deutlich durchscheinender als vorher (.72 -> .42). Damit die Schrift trotzdem steht, wird staerker weichgezeichnet: Das Bild bleibt sichtbar, verliert aber die Struktur, die den Buchstaben sonst ins Gehege kommt. Ein sanfter Verlauf von oben nach unten statt einer glatten Flaeche – so wirkt sie wie Glas und nicht wie ein aufgeklebtes Rechteck. */ background:none;border:0;border-radius:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; } .cx-seitenkopf h1{ font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.02em; /* Weiss auf dem Verlauf statt dunkelblau auf dem Kasten. */ margin:0;color:#fff; line-height:1.04; /* Ein Hauch Schatten in der Farbe des Textes, nicht in Weiss: Das gibt den Buchstaben auf der durchscheinenden Flaeche wieder Halt, ohne dass es nach Schlagschatten aussieht. */ text-shadow:0 1px 2px rgba(0,45,88,.10); /* Kein weisser Schein mehr – auf der hellen Flaeche wuerde er die Buchstaben nur aufweichen. */ text-shadow:none; } .cx-seitenkopf .cx-untertitel{text-shadow:none} /* Aeltere Browser koennen die Weichzeichnung nicht. Dort wird die Flaeche etwas deckender, damit die Schrift trotzdem steht. */ /* Ohne Weichzeichnung braucht es mehr Deckung, sonst steht die Schrift auf einem unruhigen Bild nicht. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .cx-seitenkopf-innen{background:rgba(255,255,255,.82)} } /* Auf schmalen Schirmen weniger Polsterung – sonst bleibt neben der Flaeche kaum noch Bild uebrig. */ @media(max-width:560px){ .cx-seitenkopf-innen{padding:10px 18px;border-radius:14px} } .cx-seitenkopf .cx-untertitel{ font-family:'Kaushan Script',var(--font-head,'Montserrat'),cursive; font-size:clamp(1.05rem,2.2vw,1.5rem);color:rgba(255,255,255,.9); margin:7px 0 0;font-weight:400; } .cx-seitenkopf .cx-strich{margin:2px auto 0;max-width:min(330px,72%)} /* Unterseiten stehen auf WEISS – nicht mehr auf der weichen grauen Flaeche. Dadurch verschmelzen die Inhalte mit dem Untergrund, und die Kaesten darum entfallen (siehe unten). */ .cx-inhalt{padding:44px 0 66px;background:#fff;min-height:40vh} /* ---------- UNTERSEITEN: DICHTER AN DAS BILD ---------- Unter dem Kopfbild klaffte eine weisse Flaeche von rund 90px: 44px Polsterung des Inhalts, darunter nochmal die Polsterung des ersten Bausteins. Auf der Startseite ist dieser Abstand richtig, dort folgt nach dem Kopfbild eine Kartenreihe. Auf Unterseiten folgt aber gleich der Text – deshalb hier deutlich enger. „.cx-seitenkopf + .cx-inhalt" trifft nur die Unterseiten: Nur dort steht der Seitenkopf unmittelbar vor dem Inhalt. Die Startseite bleibt unberuehrt. */ .cx-seitenkopf + .cx-inhalt{padding-top:10px} /* Der erste Baustein bringt seine eigene Polsterung mit – die reicht als Abstand voellig aus. „:first-child" allein reichte NICHT: Als erstes Kind steht meist ein

mit dem Seitentext (oft leer), erst danach folgen die Modul-Abschnitte. Die Regel traf also ins Leere. „:first-of-type" trifft den ersten Abschnitt dieser Art, egal was davor steht. */ .cx-seitenkopf + .cx-inhalt > .cx-abschnitt:first-of-type, .cx-seitenkopf + .cx-inhalt > .cx-modulblock:first-of-type{padding-top:10px} /* Ein leerer Textbereich soll keinen Platz beanspruchen. */ .cx-seitenkopf + .cx-inhalt > .wrap:empty{display:none} /* ---------- UNTERSEITEN AM HANDY ---------- Zwei Sachen, die am kleinen Schirm stoeren. */ @media(max-width:760px){ /* 1. KEIN KOPFBILD – ABER DIE ÜBERSCHRIFT BLEIBT. Auf dem Handy frisst das Bild fast ein Drittel der sichtbaren Flaeche; man scrollt erst einmal daran vorbei, um zum Text zu kommen. ACHTUNG: Im Kopfbild steht die H1 der Seite. Ein schlichtes „display:none" haette jede Unterseite am Handy ohne Ueberschrift gelassen – schlecht zu lesen und schlecht fuer Suchmaschinen. Deshalb faellt nur das BILD weg: kein Hintergrund, keine Mindesthoehe, keine Abdunkelung. Titel und Untertitel bleiben und stehen dann schlicht auf Weiss. */ /* NACHTRAG: Zuletzt hatte ich nur das BILD entfernt – der Titel blieb samt seiner Flaeche stehen und nahm weiter Platz weg. Genau das war auf deinem Bild zu sehen („News" oben rechts). Jetzt verschwindet der ganze Kopfbereich fuer das AUGE, bleibt aber im Text der Seite: „display:none" haette die H1 auch fuer Suchmaschinen und Vorleseprogramme getilgt, und jede Unterseite waere ohne Ueberschrift gewesen. Es ist dieselbe Technik wie beim „Zum Inhalt springen"-Verweis (.nur-lesbar weiter oben): Der Bereich schrumpft auf einen Punkt. Dadurch beginnt der Inhalt direkt unter dem Menue. */ .cx-seitenkopf{ position:absolute!important; width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%); padding:0;margin:-1px;border:0; background-image:none!important;min-height:0!important; } /* Ohne Kopfbereich beginnt der Inhalt direkt unter dem Menue – etwas Luft, damit die erste Zeile nicht daran klebt. */ .cx-seitenkopf + .cx-inhalt{padding-top:18px} /* 2. SCHMALERE SEITENRÄNDER. Bisher gingen je Seite 42px verloren: 22px vom Rahmen und 20px vom Baustein. Auf einem 360px-Schirm blieben dem Text damit nur 276px. Jetzt 14px + 12px = 26px, der Text bekommt 308px – also 32px mehr, gut ein Zehntel der Breite. */ /* ---------- RAND AM HANDY: NUR NOCH 3 PIXEL ---------- Der Rahmen gibt 3px, der Baustein darin 2px – zusammen 5px je Seite. Vorher waren es 26px (14 + 12). Auf einem 360px-Schirm bekommt der Text damit 350px statt 308px. Weniger als 5px waere unruhig: Buchstaben mit Unterlaenge und Anfuehrungszeichen stossen dann sichtbar an die Bildschirmkante. */ .cx-inhalt .wrap{padding-left:3px;padding-right:3px} /* Die Bausteine bekommen ihre 2px erst in der Regel fuer 720px – zwischen 721 und 760 waere der Rand sonst ungleich (3px aussen, 32px innen). Deshalb hier schon mit. */ .cx-inhalt .pb-block:not(.pb-typ-bild):not(.pb-typ-trenner), .cx-inhalt .module-block{padding-left:2px;padding-right:2px} } .cx-blatt{ background:#fff;border:1px solid var(--cx-linie);border-radius:var(--cx-radius); box-shadow:var(--cx-schatten);padding:34px 38px; } .cx-blatt > :first-child{margin-top:0} .cx-blatt > :last-child{margin-bottom:0} .cx-blatt img{border-radius:10px} .cx-blatt table{width:100%;border-collapse:collapse;margin:1em 0} /* ---------- BREITE TABELLEN AUF DEM HANDY ---------- „width:100%" hilft nur, solange der Inhalt schmaler werden KANN. Eine Tabelle mit fuenf Spalten oder langen Zellen kann das nicht – sie schiebt dann die ganze Seite nach rechts, und man wischt am Text vorbei. Deshalb bekommt sie hier einen eigenen waagerechten Schieber: Die Tabelle laesst sich seitlich wischen, die Seite bleibt stehen. „display:block" ist dafuer noetig, sonst greift overflow bei Tabellen nicht. */ @media(max-width:720px){ .cx-blatt table, .cx-inhalt table{ display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch; } } .cx-blatt th{background:var(--cx-karte);color:#fff;text-align:left;padding:12px 14px; font-family:var(--font-head,'Montserrat',sans-serif);font-size:12.5px; letter-spacing:.07em;text-transform:uppercase;font-weight:700} .cx-blatt td{padding:12px 14px;border-bottom:1px solid var(--cx-linie);font-size:14.5px} .cx-blatt tr:last-child td{border-bottom:0} .cx-blatt a{color:var(--cx-rot);text-decoration:underline;text-underline-offset:2px} .cx-blatt blockquote{margin:1.2em 0;padding:14px 20px;background:var(--cx-weich); border-left:3px solid var(--cx-rot);border-radius:0 10px 10px 0} /* ============================================================ 7. FUSSZEILE ============================================================ */ .cx-fuss{background:var(--cx-fuss);color:rgba(255,255,255,.78);padding:52px 0 0;margin-top:0} /* ---------- DAS RASTER DER FUSSZEILE ---------- Vier feste Spalten waren zu starr: Logo, Kontakt und die Spalten aus der Verwaltung sind zusammen bis zu SECHS. Die ueberzaehligen rutschten in eine zweite Zeile mit riesigen Luecken. Jetzt bekommt das Logo seine Breite, alles Weitere teilt sich den Rest gleichmaessig auf – egal wie viele Spalten gefuellt sind. */ .cx-fuss-innen{ display:grid; grid-template-columns:minmax(220px,1.6fr) repeat(auto-fit,minmax(150px,1fr)); gap:40px; } /* Die Hoehe kommt aus der Einstellung und steht am Element – deshalb hier keine feste Zahl mehr, sonst gaebe es zwei Wahrheiten und die Einstellung bliebe wirkungslos. */ .cx-fuss-logo img{width:auto;margin-bottom:16px;max-width:100%} .cx-fuss p{font-size:13.5px;line-height:1.7;margin:0 0 18px;color:rgba(255,255,255,.72)} .cx-fuss h4{ font-family:var(--font-head,'Montserrat',sans-serif);font-size:12.5px;font-weight:700; letter-spacing:.13em;color:#fff;text-transform:uppercase;margin:0 0 16px; } .cx-fuss-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .cx-fuss-liste a{color:rgba(255,255,255,.78);font-size:14px;display:flex;align-items:center; justify-content:space-between;gap:10px} .cx-fuss-liste a:hover{color:#fff} .cx-fuss-liste svg{width:9px;height:9px;fill:currentColor;opacity:.55;flex:none} .cx-kontakt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px; font-size:14px;color:rgba(255,255,255,.78)} .cx-kontakt li{display:flex;gap:11px;align-items:flex-start} .cx-kontakt svg{width:15px;height:15px;fill:currentColor;flex:none;margin-top:3px;opacity:.75} .cx-kontakt a{color:rgba(255,255,255,.78)} .cx-kontakt a:hover{color:#fff} .cx-fuss-netz{display:flex;gap:16px;margin-top:4px} .cx-fuss-netz a{color:rgba(255,255,255,.8)} .cx-fuss-netz a:hover{color:#fff} .cx-fuss-netz svg{width:19px;height:19px;fill:currentColor} .cx-fuss-unten{ border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding:18px 0; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:12.5px;color:rgba(255,255,255,.55); } .cx-herz{color:var(--cx-rot)} /* Werbeflaechen der Fusszeile – dieselbe Klasse wie in den anderen Designs */ .foot-werbung{ display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:center; padding:22px 0 4px;margin-top:10px;border-top:1px solid rgba(255,255,255,.12); } .fw-platz{display:flex;align-items:center;justify-content:center;max-width:100%} .fw-platz img{max-width:100%;height:auto;display:block;border-radius:6px} .fw-platz > *{max-width:100%} .fw-platz iframe{max-width:100%;border:0} /* ============================================================ 8. MODULE UND BAUSTEINE Damit vorhandene Module (News, Sendeplan, Gaestebuch …) im neuen Design sitzen, ohne dass sie geaendert werden muessen. ============================================================ */ .seiten-module,.seiten-bausteine{padding:0} /* Frueher bekam jeder Baustein einen weissen Kasten mit Rand, runden Ecken und Schatten – noetig, solange die Seite auf der grauen Flaeche stand. Die Seite ist jetzt selbst weiss, also entfaellt die Umrahmung: kein Rand, keine Ecken, kein Schatten. Nur die Innenabstaende bleiben, sonst klebte der Text am Rand. */ .cx-inhalt .pb-block:not(.pb-typ-bild):not(.pb-typ-trenner), .cx-inhalt .module-block{ background:transparent;border:0;border-radius:0;box-shadow:none; padding:28px var(--pb-rechts,32px) 28px var(--pb-links,32px); } /* ---------- BREITE JE BAUSTEIN ---------- Cuxhaven setzt seine Bausteine in „.wrap" – eine Spalte mit fester Hoechstbreite. „breit" und „volle Breite" muessen da also HERAUS. Das geht mit einem negativen Aussenabstand von der halben Fensterbreite: Der Baustein waechst nach beiden Seiten ueber die Spalte hinaus. „width:100vw" statt „100%", weil 100% wieder nur die Spalte waere. Der Rand und die abgerundeten Ecken fallen bei voller Breite weg – ein Kasten mit Ecken mitten im Fenster saehe aus wie ein Fehler. */ .cx-inhalt .pb-block.pb-breit{ /* ---------- „BREIT" FOLGT DER SEITENBREITE ---------- Stand fest auf 1500px – bei einer eingestellten Seitenbreite von 1650px war ein „breiter" Baustein also SCHMALER als ein normaler. Genau umgekehrt gedacht. Jetzt: die Seitenbreite plus 320px, so wie es die anderen Designs auch halten – begrenzt durch das Fenster. Ohne Eintrag bleibt es bei den bisherigen 1500px. „calc" mit halben Werten sieht sperrig aus, ist aber noetig: Der Baustein muss aus der Spalte heraus nach BEIDEN Seiten wachsen, und dafuer braucht der linke Aussenabstand genau die halbe Uebergroesse. */ --cx-breit-max:min(calc(var(--cx-breite, 1180px) + 320px), calc(100vw - 44px)); width:var(--cx-breit-max); margin-left:calc(50% - var(--cx-breit-max) / 2); max-width:none; } .cx-inhalt .pb-block.pb-voll{ width:100vw;margin-left:calc(50% - 50vw); max-width:none;border-radius:0;border-left:0;border-right:0; } /* Trenner und Bilder haben keinen eigenen Kasten – sie brauchen nur die Breite, nicht die Umrahmung. */ .cx-inhalt .pb-block.pb-voll.pb-typ-bild, .cx-inhalt .pb-block.pb-voll.pb-typ-trenner{border:0;box-shadow:none} @media(max-width:720px){ /* Auf schmalen Schirmen bringt „breit" nichts – dort ist die Spalte ohnehin schon so breit wie das Fenster. */ .cx-inhalt .pb-block.pb-breit{width:auto;margin-left:0} } .cx-inhalt .pb-block > :first-child,.cx-inhalt .module-block > :first-child{margin-top:0} .cx-inhalt .pb-block > :last-child,.cx-inhalt .module-block > :last-child{margin-bottom:0} @media(max-width:720px){ /* Seitliche Abstaende auf schmalen Schirmen deckeln. */ .cx-inhalt .pb-block:not(.pb-typ-bild):not(.pb-typ-trenner), .cx-inhalt .module-block{ /* Seitliche Polsterung 20px -> 2px. Zusammen mit dem Rahmen (3px) bleiben je Seite 5px. Oben und unten bleibt es bei 20px, sonst klebten die Absaetze aneinander. */ padding:20px min(var(--pb-rechts,2px),2px) 20px min(var(--pb-links,2px),2px); } } .module-block{margin-bottom:28px} .module-block:last-child{margin-bottom:0} .pb-block{margin-bottom:28px} .news-karten,.nc-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px} .news-card{ background:#fff;border:1px solid var(--cx-linie);border-radius:var(--cx-radius); overflow:hidden;display:flex;flex-direction:column;color:var(--cx-navy); transition:transform .18s,box-shadow .18s; } .news-card:hover{transform:translateY(-3px);box-shadow:var(--cx-schatten-stark)} .nc-bild{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--cx-weich)} .nc-inhalt{padding:14px 16px 18px} /* ---------- ROT AUF ROT ---------- HIER WAR DIE MARKE UNLESBAR: In der Modul-Gestaltung hat „.nc-cat" einen roten Hintergrund und weisse Schrift. Diese Regel hier kam spaeter und hat NUR die Farbe ueberschrieben – auf Rot. Uebrig blieb rote Schrift auf rotem Grund, also ein leerer Balken. Solche halben Ueberschreibungen sind die Ursache: Wer eine Farbe aendert, muss wissen, worauf sie liegt. Deshalb steht die Marke jetzt vollstaendig hier, mit Grund UND Schrift. */ .nc-cat{ align-self:flex-start; background:var(--cx-rot);color:#fff; font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; padding:3px 10px;border-radius:20px; } .nc-title{font-family:var(--font-head,'Montserrat',sans-serif);font-weight:700; font-size:1rem;margin:6px 0 7px;line-height:1.35} .nc-text{font-size:13px;color:#42546B;line-height:1.6;margin:0} .nc-datum{font-size:11.5px;color:#7A8798;margin-top:9px} .tbl,table.sm-tabelle{width:100%;border-collapse:collapse} .tbl th{background:var(--cx-karte);color:#fff;text-align:left;padding:12px 14px; font-size:12.5px;letter-spacing:.07em;text-transform:uppercase} .tbl td{padding:12px 14px;border-bottom:1px solid var(--cx-linie)} .abtn,.btn,button.abtn{ display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px; font-family:var(--font-head,'Montserrat',sans-serif);font-weight:700;font-size:14px; background:var(--cx-rot);color:#fff;border:0;cursor:pointer; } .abtn:hover,.btn:hover{background:var(--cx-rot-dunkel);color:#fff} .abtn.g,.btn.sek{background:#fff;color:var(--cx-navy);border:1px solid var(--cx-linie)} .abtn.g:hover{background:var(--cx-weich);color:var(--cx-rot)} input[type=text],input[type=email],input[type=search],input[type=tel],input[type=number], select,textarea{ width:100%;padding:11px 14px;border:1px solid var(--cx-linie);border-radius:10px; font:inherit;color:var(--cx-navy);background:#fff; } input:focus,select:focus,textarea:focus{outline:2px solid var(--cx-rot);outline-offset:1px;border-color:transparent} /* Der Lichtkasten fuer Galerie-Bilder – geschlossen unsichtbar. (Siehe die ausfuehrliche Erklaerung in den anderen Designs.) */ .lk-klickbar{cursor:zoom-in} .lk{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh; width:100vw;height:100vh;overflow:hidden} .lk:not([open]){display:none} .lk[open]{display:flex;align-items:center;justify-content:center} .lk::backdrop{background:rgba(3,31,63,.94)} @supports not selector(::backdrop){ .lk{background:rgba(3,31,63,.94)} } /* ============================================================ 9. KLEINERE BILDSCHIRME Notebook -> Tablet -> Handy. Die Gestaltung bleibt erkennbar, nur die Anordnung aendert sich. ============================================================ */ @media(max-width:1080px){ .cx-hero-innen{grid-template-columns:1fr;gap:28px} .cx-player{max-width:400px;margin:0 auto} .cx-drei{grid-template-columns:1fr 1fr;margin-top:-70px} .cx-drei > :nth-child(3){grid-column:1/-1} .cx-events{grid-template-columns:repeat(2,1fr)} .cx-kanaele-innen{grid-template-columns:1fr;gap:32px} .cx-fuss-innen{grid-template-columns:1fr 1fr;gap:32px} } @media(max-width:900px){ /* Der Knopf steht im HTML direkt hinter dem Logo. Ohne diesen Zusatz klebte er daneben, obwohl rechts die ganze Breite frei war. „margin-left:auto" schiebt ihn an den rechten Rand. */ .cx-menue-knopf{display:flex;margin-left:auto} .cx-nav{ display:none;position:absolute;top:100%;left:0;right:0;background:#fff; flex-direction:column;align-items:stretch;gap:0;padding:10px 22px 18px; border-bottom:1px solid var(--cx-linie);box-shadow:var(--cx-schatten-stark); max-height:76vh;overflow:auto;margin:0; } .cx-nav.offen{display:flex} .cx-nav a,.cx-nav .cx-nav-haupt{padding:13px 2px;border-bottom:1px solid var(--cx-linie); width:100%;justify-content:space-between;font-size:15.5px} .cx-nav a.aktiv::after,.cx-nav .cx-hat-unter.aktiv > .cx-nav-haupt::after{display:none} .cx-hat-unter{width:100%} .cx-unter{position:static;display:none;box-shadow:none;border:0;border-radius:0; padding:0 0 6px 14px;min-width:0} .cx-hat-unter.offen .cx-unter{display:flex} .cx-unter a{border-bottom:0;padding:9px 2px;font-size:14.5px} .cx-kopf-innen{position:relative;min-height:66px;gap:12px} .cx-logo img{height:44px} .cx-netz{display:none} .cx-hero{padding:44px 0 108px} } @media(max-width:720px){ /* ---------- HIER WAREN DIE KNÖPFE VERSCHWUNDEN ---------- Am Rechner ragen die Karten absichtlich ins Kopfbild hinein (margin-top:-96px), das sieht dort gut aus. Auf dem Handy steht alles untereinander, und die hochgezogenen Karten legten sich genau ueber die Knopfzeile „Jetzt live hoeren" – sie war vorhanden, aber verdeckt. Ab hier kein Hochziehen mehr: Die Karten beginnen unter dem Kopfbild. */ .cx-drei{grid-template-columns:1fr;margin-top:0;gap:14px} .cx-drei > :nth-child(3){grid-column:auto} .cx-events{grid-template-columns:1fr} .cx-kachel-reihe{grid-template-columns:1fr;gap:14px} .cx-kachel{display:flex;align-items:center;gap:14px;text-align:left} .cx-kachel-rahmen{width:56px;height:56px;margin:0;flex:none} .cx-kachel-rahmen svg{width:24px;height:24px} .cx-fuss-innen{grid-template-columns:1fr;gap:28px} .cx-blatt{padding:22px 18px} .cx-inhalt{padding:26px 0 44px} /* Die Hoehe steht als Style am Element und laesst sich von hier nicht ueberschreiben – deshalb nur die Polsterung. Der Kasten wird auf schmalen Schirmen ohnehin automatisch flacher, weil seine Form an der Breite haengt. */ .cx-seitenkopf{padding:38px 18px} .cx-seitenkopf.cx-sk-form{padding:14px} .cx-abschnitt{padding:44px 0} .cx-kanaele{padding:44px 0;margin-top:44px} .cx-live span{display:none} .cx-live{padding:10px 14px} .cx-hero-knoepfe{flex-direction:column;align-items:stretch} .cx-btn{justify-content:center} .cx-fuss-unten{justify-content:center;text-align:center} } /* ============================================================ KNOPFZEILE IM KOPFBILD DARF NICHT VERDECKT WERDEN Die Karten ragen absichtlich ins Kopfbild hinein: -96px am Rechner, -70px ab 1080px abwaerts. Genau das deckte auf schmalen Schirmen die Knoepfe „Jetzt live hoeren" und „Unser Programm" zu – sie waren da, aber dahinter. Ich hatte das zuerst nur bis 720px aufgehoben. Zwischen 721 und 900px galten aber weiterhin -70px. Und: Die Regel stand FRUEHER in der Datei als die -70px-Regel und verlor deshalb, obwohl beide zutrafen. Bei gleichem Gewicht gewinnt die spaetere – deshalb steht dieser Block jetzt hier, nach allen anderen. Dieselbe Grenze wie beim Menue: Ab 900px abwaerts steht alles untereinander, dann ergibt das Hineinragen ohnehin keinen Sinn. ============================================================ */ @media(max-width:900px){ /* Nicht nur 0, sondern ein echter Abstand: Selbst wenn irgendwo noch ein Hochziehen dazukaeme, liegen zwischen Knopfzeile und Wetterkarte dann immer noch 20px. */ .cx-drei{margin-top:20px} /* Sicherheitsgurt: Der Inhalt des Kopfbilds liegt ueber den Karten. Selbst wenn irgendwo doch wieder ein Hochziehen dazukommt, bleiben die Knoepfe sichtbar. */ .cx-hero-innen{position:relative;z-index:6} } @media(max-width:420px){ .cx-logo img{height:38px} .cx-blatt{padding:18px 14px} .cx-karte{padding:15px 16px 14px} } /* Wer Bewegung nicht mag, bekommt keine. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} html{scroll-behavior:auto} } /* Beim Drucken: kein Kopf, kein Fuss, kein Foto. */ @media print{ .cx-kopf,.cx-fuss,.cx-hero,.cx-seitenkopf,.cx-live{display:none!important} .cx-inhalt{background:#fff;padding:0} .cx-blatt{box-shadow:none;border:0;padding:0} } /* ---------- DIE WELLE UNTER DER KOPFLEISTE ---------- Liegt ganz oben im Foto-Bereich, ueber dem Bild. Die Hoehe kommt als style-Angabe aus den Einstellungen. */ .cx-welle-band{ /* Haengt unter der Kopfleiste und wandert mit ihr, weil die Leiste sticky ist. „top:calc(100% - 2px)" zieht sie 2 px nach oben. Das schliesst die feine Linie, die sonst bei manchen Bildschirmen zwischen Leiste und Welle aufblitzt – ein Rundungsfehler des Browsers. Sie liegt ausserhalb der Leiste, damit das Logo optisch in sie hineinragen kann. */ position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:1; pointer-events:none;line-height:0; } .cx-welle-band svg{display:block;width:100%;height:100%} @media(max-width:720px){ /* Auf schmalen Schirmen wirkt die Welle sonst zu wuchtig. */ .cx-welle-band{height:auto!important;aspect-ratio:1440/120} } /* ============================================================ DAS FOTO AUF SCHMALEN BILDSCHIRMEN ------------------------------------------------------------ Gemessen: Am Handy (390 px) war der Hero 745 px hoch – HÖHER als am Rechner. Nicht wegen der Einstellung, sondern weil sich Text, Knoepfe und Player dort untereinander stapeln und den Bereich aufdruecken. Das Foto ist quer (3:2). In einem hohen, schmalen Bereich bleibt davon nur ein schmaler senkrechter Streifen uebrig – vom Leuchtturm sieht man dann fast nichts. Zwei Massnahmen: · Die Abstaende werden enger, der Bereich niedriger. · Der Bildausschnitt rutscht weiter nach oben, damit Himmel und Horizont im Bild bleiben statt nur Duenengras. ============================================================ */ @media(max-width:760px){ .cx-hero{ padding:34px 0 120px; /* Die feste Mindesthoehe aus den Einstellungen wird hier aufgehoben – der Inhalt bestimmt die Hoehe, nicht der Regler. Sonst entstuende zusaetzlicher Leerraum. */ min-height:0!important; background-position:center 22%!important; } .cx-hero-innen{gap:22px} .cx-hero-satz{margin-bottom:16px} /* ---------- „REGIONAL · DIGITAL · GENIAL" IN EINE ZEILE ---------- 27 Zeichen in Grossbuchstaben mit weiter Sperrung. Nachgerechnet fuer den engsten Fall (360px Fenster, 316px Platz): 14,7px -> 337px umbricht 13,0px -> 298px passt Deshalb mitwachsend statt fest: 3,4vw ergibt auf 360px rund 12px, auf 412px rund 14px – und ab 430px greift wieder der Wert des Designs. Die Sperrung wird leicht verringert, das bringt zusaetzlich Luft, ohne dass die Zeile gedraengt wirkt. */ .cx-claim{ font-size:min(var(--ts-tagline-px,1.15rem),3.4vw); letter-spacing:.14em; } /* ---------- DER SCHRIFTZUG DARF NICHT HINAUSRAGEN ---------- „Cuxland" steht in einer Schreibschrift, die deutlich breiter laeuft als eine normale – rund 0,62 statt 0,52 em je Zeichen. Bei einer eingestellten Groesse von 120px waere das Wort auf einem 412px-Handy rund 447px breit; Platz sind 368px. Genau das war auf deinem Bild zu sehen: rechts abgeschnitten, und dadurch wirkte alles nach rechts verrutscht. Deshalb hier zusaetzlich auf 13vw gedeckelt – rund ein Achtel der Fensterbreite. Damit passt es bei JEDER Einstellung, ohne dass jemand daran denken muss. */ /* Deckelung am Handy. Nachgerechnet mit der 15px-Verschiebung: Deckel Fenster 360px Fenster 412px 17vw Wort 266px, 10px Wort 304px, 17px Luft links 18vw Wort 281px, 2px Wort 322px, 8px 19vw Wort 297px, -5px Wort 340px, -1px stoesst an 18vw ist damit die Obergrenze. Auf sehr schmalen Geraeten bleiben nur 2px Luft – deshalb weiter unten zusaetzlich ein schmalerer Seitenrand, der schafft dort Platz. */ .cx-name{font-size:min(var(--ts-h1-px,clamp(3rem,8vw,5.6rem)),18vw)} /* Der Ausschnitt-Regler gilt nur, wenn beschnitten wird. Hat der Kasten die Form des Bildes, gibt es nichts zu verschieben – sonst rutschte das Bild aus dem Rahmen. */ .cx-seitenkopf:not(.cx-sk-form){background-position:center 26%!important} } @media(max-width:430px){ .cx-hero{padding:26px 0 110px;background-position:center 18%!important} .cx-name{line-height:.98} .cx-hero-satz{font-size:.95rem} } /* Auf sehr breiten Bildschirmen wird das Bild sonst hochskaliert und wirkt weich. Ein leichter Zoom auf den mittleren Bereich faellt weniger auf als Unschaerfe am Rand. */ @media(min-width:1700px){ .cx-hero{background-size:cover;background-position:center 30%} } /* ---------- NACHTRAG: LINKSBÜNDIG WIRKLICH DURCHSETZEN ---------- Die Ausrichtung stand weiter oben in der Datei – die spaeteren Regeln fuer .cx-hero-satz und .cx-strich haben sie wieder ueberschrieben (bei gleichem Gewicht gewinnt die spaetere). Deshalb hier am Ende noch einmal. */ @media(min-width:1081px){ /* ---------- BLOCK MITTIG AUF DER SEITE ---------- Zwei verschiedene Dinge – man muss sie auseinanderhalten: Wo der BLOCK liegt -> mittig auf der Seite Wie die SCHRIFT darin -> mittig zentriert ausgerichtet ist HIER LAG DER FEHLER, DEN DU MEHRFACH GEMELDET HAST: Frueher stand die Karte des Players rechts im Kopfbild, deshalb sass der Textblock links („margin-left:0"). Die Karte ist entfernt – diese Regel blieb aber stehen. Sie steht am ENDE der Datei und gewann damit gegen alles, was weiter oben auf mittig gestellt war. Der Block klebte also mit 620 px Breite am linken Rand, waehrend seine Zeilen darin brav zentriert waren. Genau so sah es aus. Jetzt: Rand links UND rechts automatisch – der Block steht mittig auf der Seite. Die feste Breite bleibt: Ohne sie waere der Block nur so breit wie seine laengste Zeile, und die Zeilen darunter haetten keinen gemeinsamen Bezug mehr. */ .cx-hero-text{ text-align:center; width:100%;max-width:620px; margin-left:auto;margin-right:auto; /* ---------- VERSATZ NUR AM RECHNER ---------- Ich hatte ihn versuchsweise fuer alle Breiten gelten lassen. Das war falsch: Am Handy nimmt der Textblock die volle Breite ein: Verschiebt man ihn dann um 40px nach links, laeuft der Text links aus dem Bild – „REGIONAL · DIGITAL" war links abgeschnitten. Am Rechner ist rechts und links Luft, dort schadet die Verschiebung nicht. Deshalb wieder nur hier, ab 1081px. */ transform:translateX(calc(var(--cx-hero-grund,0px) + var(--cx-hero-versatz,0px))); position:relative;z-index:2; } .cx-hero-satz{margin-left:auto;margin-right:auto;max-width:520px} .cx-strich{margin-left:auto;margin-right:auto} .cx-hero-knoepfe{justify-content:center} } /* ---------- INFO-LEISTE: WETTER, VERKEHR, BLITZER ---------- Schmaler Streifen ganz oben, dunkelblau. Sitzt im sticky-Kopf und wandert beim Scrollen mit. */ .cx-infoleiste{ background:var(--cx-navy);color:rgba(255,255,255,.86); font-size:12.5px;line-height:1; } .cx-info-innen{ max-width:var(--cx-breite);margin:0 auto;padding:7px 22px; /* Die Bloecke stehen mittig statt am linken Rand. Bei der jetzt breiten Seite (1650px) waren sie sonst in der linken Ecke zusammengedraengt, waehrend rechts viel Platz leer blieb. */ display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap; } /* ---------- DIE TEILE DER LEISTE ---------- Aufbau je Block: ein Wort als Ueberschrift („Wetter", „Verkehr") in Versalien, dahinter die Werte. Hier sind Versalien richtig – es sind einzelne Woerter, und sie trennen die Bloecke voneinander, ohne einen Strich zu brauchen. Verkehr und Blitzer sind Verweise. Damit man das merkt, hellen sie beim Zeigen auf und bekommen eine feine Unterstreichung – ein Mauszeiger allein reicht nicht, und auf dem Handy gibt es ihn gar nicht. */ .cx-info-teil{ display:inline-flex;align-items:center;gap:10px;white-space:nowrap; color:inherit;text-decoration:none; padding:2px 0;border-bottom:1px solid transparent; } a.cx-info-teil:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)} /* Das Wetter ist kein Verweis – kein Mauszeiger, kein Aufhellen. */ .cx-info-still{cursor:default} a.cx-info-teil:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px} .cx-info-name{ font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:rgba(255,255,255,.62); } .cx-info-wert{display:inline-flex;align-items:center;gap:6px} .cx-info-wert i{font-style:normal;opacity:.72} .cx-info-teil svg{width:14px;height:14px;fill:currentColor;flex:none;opacity:.75} .cx-info-teil b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums} /* Die Wetterzeichen des Moduls sind gezeichnete Linien, keine Flaechen – sie brauchen „stroke" statt „fill". */ .cx-info-wz{width:15px;height:15px;stroke:currentColor;fill:none;opacity:.85;flex:none} .cx-info-ort{opacity:.6} .cx-info-mehr{ margin-left:auto;display:inline-flex;align-items:center;gap:6px; color:rgba(255,255,255,.8);font-weight:600; } .cx-info-mehr:hover{color:#fff;gap:9px} .cx-info-mehr svg{width:9px;height:9px;flex:none} @media(max-width:720px){ /* Auf dem Handy weniger Abstand und kleinere Schrift. Die Ueberschriften „Wetter"/„Verkehr" fallen weg – die Symbole sagen dasselbe und sparen die halbe Zeile. */ .cx-info-innen{gap:14px;padding:6px 18px;font-size:11.5px} .cx-info-mehr{display:none} .cx-info-ort{display:none} .cx-info-name{display:none} .cx-info-teil{gap:8px} } @media(max-width:480px){ /* Ganz schmal: „Morgen" faellt weg, sonst bricht die Leiste um. */ .cx-info-wert:nth-of-type(3){display:none} } /* ---------- AUF DEM HANDY AUSGEBLENDET ---------- Einstellbar je Bereich unter „Startseite". Am Rechner bleibt der Bereich sichtbar – nur schmale Bildschirme lassen ihn weg. Der Bruchpunkt ist derselbe wie beim uebrigen Handy-Layout. */ @media(max-width:720px){ .cx-ohne-handy{display:none!important} } /* ---------- VIER KARTEN STATT DREI ---------- Mit der Wetter-Karte sind es vier. Bei vier Spalten wird jede zu schmal fuer die Sendeplan-Zeiten, deshalb bleiben es zwei Reihen mit je zwei Karten – ab 1400 px passen alle vier nebeneinander. */ /* ---------- WÄHREND DIE NÄCHSTE SEITE GEHOLT WIRD ---------- Ein schmaler Balken oben zeigt, dass etwas passiert. Ohne das wirkt ein Klick wie ohne Reaktion, weil die Seite ja stehen bleibt. */ .cx-laedt::after{ content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:999; background:var(--cx-rot);transform-origin:left; animation:cxladen 1.2s ease-out infinite; } @keyframes cxladen{ 0%{transform:scaleX(0);opacity:1} 70%{transform:scaleX(.85);opacity:1} 100%{transform:scaleX(1);opacity:0} } .cx-laedt main{opacity:.55;transition:opacity .15s} @media(prefers-reduced-motion:reduce){ .cx-laedt::after{animation:none;transform:scaleX(1)} } /* ---------- MODUL-BEREICHE AUF DER STARTSEITE ---------- Wetter, Verkehr, Jetzt-im-Programm, Sender, Moderatoren. Sie kommen aus den Modulen und bringen ihr eigenes HTML mit – hier bekommen sie nur den Rahmen des Designs. */ .cx-modulblock{padding:52px 0} /* „.cx-wv" ist ENTFALLEN. Das war der eigene Streifen, in dem Wetter und Verkehr frueher unter der Kartenreihe standen. Seit sie IN der Reihe sitzen (.cx-karte-breit), erzeugte kein Template diese Klasse mehr – die Regeln lagen nur noch da und haben beim naechsten Umbau Verwirrung gestiftet. */ /* Die Kaesten der Module ins Design holen: weisse Karte mit feiner Linie, wie die Event-Karten. */ .cx-modulblock .wt-kasten,.cx-modulblock .vk-kasten, .cx-modulblock .wt-box,.cx-modulblock .vk-box{ background:#fff;border:1px solid var(--cx-linie); border-radius:var(--cx-radius);box-shadow:var(--cx-schatten); padding:22px 24px; } .cx-modulblock h3{color:var(--cx-navy)} .cx-modulblock .sm-nur-gross{display:block} /* Sichtbarkeit je Bereich – dieselben Klassen wie in den anderen Designs, damit die Einstellung dort und hier dasselbe bewirkt. */ @media(max-width:720px){ .sm-nur-gross{display:none!important} } @media(min-width:721px){ .sm-nur-handy{display:none!important} } /* ---------- DIE GROSSE ZAHL IN DEN KARTEN ---------- Temperatur und Meldungszahl sind das, was man sehen will – deshalb gross, alles andere klein darunter. */ .cx-gross{ display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; font-family:var(--font-head,'Montserrat',sans-serif); font-size:2.6rem;font-weight:800;color:#fff;line-height:1; margin:4px 0 12px; } .cx-gross span{font-size:1rem;font-weight:600;opacity:.7} .cx-gross em{ flex-basis:100%;font-style:normal;font-size:.82rem;font-weight:500; opacity:.68;margin-top:6px; } .cx-gross.warn{color:var(--cx-rot)} .cx-gross.warn span,.cx-gross.warn em{color:rgba(255,255,255,.7)} .cx-zeile{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:7px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:13px; } .cx-zeile:last-of-type{border-bottom:0} .cx-zeile span{color:rgba(255,255,255,.62)} .cx-zeile b{color:#fff;font-weight:700} /* Mit fünf Karten wird es eng – zwei Reihen, ab 1500 px alle fünf. */ /* ============================================================ MODUL-KÄSTEN IM BLAUEN KLEID ------------------------------------------------------------ Wetter und Verkehr bringen ihre Kaesten fertig mit – mit Wettersymbolen, Tagesvorschau, Meldungsliste und Melden-Knopf. Sie sind auf HELLEN Grund gebaut: weisse Karte, dunkle Schrift, gruener Akzent. Hier bekommen sie das Kleid des Designs: dunkles Blau, helle Schrift, roter Akzent. Der INHALT bleibt unangetastet – kommt im Modul etwas dazu, ist es sofort mit dabei. HIER LAG DER FEHLER, DEN DU AUF DEM BILD GESEHEN HAST: Dieser Block war fuer eine aeltere Anordnung geschrieben, in der beide Kaesten in einem eigenen Streifen „.cx-wv" standen. Diesen Streifen gibt es nicht mehr – die Kaesten sitzen heute als „.cx-karte-breit" in der Kartenreihe. Beim Umbau wurde nur ein TEIL der Regeln mitgenommen, vor allem die des Verkehrs-Kastens. Alles, was nur unter „.cx-wv" stand, lief ins Leere: der blaue Grund des WETTER-Kastens -> blieb weiss Temperatur, Lage, Tagesnamen -> dunkel auf hell „Blitzer gesehen?" und der Knopf -> dunkel auf dunkel Deshalb war der eine Kasten blau und der andere weiss, und die Schrift im Melden-Kasten unlesbar. JETZT: eine einzige Klasse „.cx-modulkasten" fuer beide. Was hier steht, gilt fuer Wetter UND Verkehr, egal wo sie stehen. Ein zweites Kleid kann nicht mehr vergessen werden. „currentColor" bei den Symbolen ist der Schluessel: Die Wetterzeichen sind als SVG gebaut und uebernehmen die Schriftfarbe. Deshalb genuegt es, die Farbe zu setzen – die Zeichen faerben sich mit. ============================================================ */ /* ---------- DER RAHMEN BEIDER KÄSTEN ---------- Dieselbe Flaeche, derselbe Radius, dieselbe Polsterung wie die schmalen Karten daneben – nur breiter. Der feine helle Rand oben faengt das Licht des Kopfbildes auf und hebt die Karte vom Grund ab, ohne einen sichtbaren Rahmen zu ziehen. */ .cx-modulkasten .wt-kasten, .cx-modulkasten .vk-kasten{ position:relative; /* ---------- MILCHGLAS ---------- Frueher deckte die Flaeche voll (--cx-karte, ein sattes Dunkelblau). Jetzt ist sie nur zu rund zwei Dritteln deckend und der Untergrund wird weichgezeichnet: Das Kopfbild schimmert durch, ohne dass die Schrift leidet. „saturate" holt die Farben des Bildes wieder hoch – ohne das wirkt der Weichzeichner ausgewaschen und grau. Der letzte Wert (.68) ist die Stellschraube: hoeher = deckender und sicherer lesbar, niedriger = mehr Bild. Warum .68 und nicht weniger: Ich habe den Kontrast zwischen Schrift und Flaeche fuer verschiedene Kopfbilder gerechnet. Bei .62 kam auf einem SEHR HELLEN Bild nur 4,37 heraus – die Empfehlung fuer gut lesbaren Text liegt bei 4,5. Mit .68 sind es 5,06, also auch im unguenstigsten Fall genug. Optisch ist der Unterschied zu .62 kaum zu sehen. */ background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 190px), /* ---------- NACH UNTEN FESTER ---------- Der Kasten ragt unten UEBER das Kopfbild hinaus – dort liegt die weisse Seite darunter. Der Weichzeichner nimmt dieses Weiss auf, die Flaeche wurde nach unten hell, und der weisse Text darauf verschwand. Genau das war unten bei „Blitzer gesehen?" und „Sieben Tage ansehen" zu sehen. Deshalb kein gleichmaessiger Wert mehr: oben bleibt es durchscheinend (dort ist das Foto), nach unten wird es fester, wo Weiss dahinterliegt. */ linear-gradient(180deg, rgba(14,38,82,.62) 0%, rgba(14,38,82,.72) 45%, rgba(14,38,82,.93) 100%); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); color:rgba(255,255,255,.86); /* Der Rand faengt das Licht des Bildes auf und trennt die Flaeche vom Grund – bei durchscheinenden Flaechen wichtiger als vorher, sonst „schwimmt" der Kasten. */ border:1px solid rgba(255,255,255,.16); border-radius:20px; box-shadow:0 16px 44px rgba(0,25,60,.28); padding:28px 30px; margin:0; height:100%; display:flex;flex-direction:column; } /* Wo der Browser den Weichzeichner nicht kann, wird die Flaeche deckender – sonst waere die Schrift auf dem blanken Foto schwer zu lesen. Betrifft heute nur noch aeltere Browser. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .cx-modulkasten .wt-kasten, .cx-modulkasten .vk-kasten{background:rgba(14,38,82,.90)} } /* Die Kacheln in beiden Kaesten – die drei Verkehrszahlen und die Tagesvorschau des Wetters. EIN Bauteil, zweimal benutzt: Das ist es, was die beiden Kaesten als Paar lesbar macht. */ .cx-modulkasten .vk-zahl, .cx-modulkasten .wt-k-tag{ /* Frueher eine feste Farbe (#16325F). Auf der jetzt durchscheinenden Flaeche saehe die aus wie ein aufgeklebter Fleck – deshalb ebenfalls durchscheinend, damit das Bild auch durch die Kacheln schimmert. */ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); border-radius:14px; transition:background .18s ease, border-color .18s ease; } .cx-modulkasten .vk-zahl:hover, .cx-modulkasten .wt-k-tag:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.3)} /* ---------- WETTER ---------- */ .cx-modulkasten .wt-k-kopf{ display:flex;align-items:flex-start;justify-content:space-between;gap:20px; } .cx-modulkasten .wt-k-ort{ display:block; color:rgba(255,255,255,.55);letter-spacing:.14em;text-transform:uppercase; font-size:11.5px;font-weight:700; } /* Die Temperatur ist die Aussage des Kastens – entsprechend gross, mit dem Gradzeichen bewusst klein und hochgestellt. */ .cx-modulkasten .wt-k-grad{ color:#fff;font-family:var(--font-head,'Montserrat',sans-serif); font-weight:800;font-size:clamp(2.9rem,5vw,3.9rem);line-height:1; margin:10px 0 6px;letter-spacing:-.02em; } .cx-modulkasten .wt-k-grad i{ font-style:normal;font-size:.34em;font-weight:700; vertical-align:super;color:rgba(255,255,255,.62);margin-left:2px; } /* ---------- LESBARKEIT AUF DER DURCHSCHEINENDEN FLÄCHE ---------- Die Nebentexte standen mit 55 bis 70 % Deckkraft da. Solange die Flaeche voll deckte, ging das. Auf der jetzt durchscheinenden Flaeche kommt bei einem sehr hellen Kopfbild nur noch ein Kontrast von 3,1 bis 4,0 heraus – die Empfehlung liegt bei 4,5. Deshalb angehoben: Nebentexte auf 86 %, ganz beilaeufige auf 80 %. Sie treten weiterhin zurueck, sind aber lesbar. */ .cx-modulkasten .wt-k-lage{color:rgba(255,255,255,.86);font-size:15px} .cx-modulkasten .wt-alt, .cx-modulkasten .wt-gefuehlt{color:rgba(255,255,255,.86)} /* Die Wetterzeichen sind SVG und uebernehmen die Schriftfarbe. */ .cx-modulkasten .wt-heute-zeichen, .cx-modulkasten .wt-k-zeichen{color:var(--cx-rot);flex:none} .cx-modulkasten .wt-heute-zeichen svg, .cx-modulkasten .wt-k-zeichen svg{stroke:currentColor;fill:none} /* Die Tagesvorschau: gleichmaessige Kacheln statt lose Spalten – dasselbe Raster wie die drei Zahlen im Verkehrs-Kasten. */ .cx-modulkasten .wt-k-tage{ display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr)); gap:10px;border-top:0;padding-top:0;margin:22px 0 0; } .cx-modulkasten .wt-k-tag{ display:flex;flex-direction:column;align-items:center;gap:7px; padding:14px 8px;color:inherit;text-decoration:none; } .cx-modulkasten .wt-k-wt{ color:rgba(255,255,255,.58);font-weight:700;font-size:11.5px; letter-spacing:.1em;text-transform:uppercase; } .cx-modulkasten .wt-k-tag .wz{color:var(--cx-rot)} .cx-modulkasten .wt-k-max{ color:#fff;font-weight:800;font-size:1.05rem; font-family:var(--font-head,'Montserrat',sans-serif); } /* ---------- VERKEHR: DIE DREI ZAHLEN ---------- In der Vorlage springen sie ins Auge – das ist der Kern des Kastens. Abstand zwischen den Kacheln statt einer durchgehenden Leiste, damit jede fuer sich wirkt. */ .cx-modulkasten .vk-zahlen{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px; border:0;margin:0 0 22px; /* Der Container hat aus dem Modul einen HELLEN Grund. Bei 1 px Abstand fiel er nicht auf, bei 10 px schien er zwischen den Kacheln durch und liess sie grau statt blau wirken. */ background:transparent;box-shadow:none; } .cx-modulkasten .vk-zahl{text-align:center;padding:16px 8px} .cx-modulkasten .vk-z-zahl{ display:block;color:#fff;font-weight:800; font-family:var(--font-head,'Montserrat',sans-serif); font-size:1.9rem;line-height:1.1;letter-spacing:-.01em; } .cx-modulkasten .vk-z-lbl{ display:block;color:rgba(255,255,255,.86);font-size:11.5px;margin-top:5px; font-weight:600;letter-spacing:.06em;text-transform:uppercase; } /* ---------- AUF DEM HANDY UNTEREINANDER ---------- Drei Kacheln nebeneinander lassen auf einem 360px-Schirm je rund 69px Text uebrig. „STAUMELDUNGEN" braucht dort etwa 108px – und es ist EIN Wort, kann also nicht umbrechen. Es ragte hinaus. Deshalb ab hier untereinander: Zahl links, Beschriftung rechts. So steht beides in einer Zeile und hat reichlich Platz. */ @media(max-width:560px){ .cx-modulkasten .vk-zahlen{grid-template-columns:1fr;gap:8px} .cx-modulkasten .vk-zahl{ display:flex;align-items:baseline;gap:12px; text-align:left;padding:11px 16px; } .cx-modulkasten .vk-z-zahl{font-size:1.5rem;min-width:2.2em} .cx-modulkasten .vk-z-lbl{margin-top:0;font-size:12px;letter-spacing:.05em} } /* Die Kacheln sind Verweise – sie sollen nicht rot unterstrichen sein wie die uebrigen Links im Kasten. */ .cx-modulkasten .vk-zahlen a, .cx-modulkasten a.vk-zahl{color:inherit;text-decoration:none;font-weight:inherit} /* ---------- DIE MELDUNGSLISTE ---------- Links das Strassenschild („A7") in der Akzentfarbe, rechts die Meldung – Zeile fuer Zeile mit feiner Trennlinie. */ .cx-modulkasten .vk-kurz{border-top:0;margin:0} .cx-modulkasten .vk-kurz > *{ display:flex;align-items:center;gap:14px; padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1); } .cx-modulkasten .vk-kurz > *:last-child{border-bottom:0} .cx-modulkasten .vk-str{ color:var(--cx-rot);font-weight:800;font-size:12.5px; flex:none;min-width:34px;letter-spacing:.04em; } .cx-modulkasten .vk-txt{color:rgba(255,255,255,.9);font-size:14px} .cx-modulkasten .vk-leer{color:rgba(255,255,255,.80)} /* ---------- DER MELDEN-KASTEN ---------- Er sitzt am FUSS des Kastens – „margin-top:auto" schiebt ihn dorthin, damit Wetter und Verkehr unten auf gleicher Hoehe abschliessen, auch wenn oben unterschiedlich viel steht. */ .cx-modulkasten .vk-k-melden{ display:flex;align-items:center;justify-content:space-between; gap:18px;flex-wrap:wrap; /* Frueher weiss aufgehellt (.06). Ganz unten im Kasten, wo die Flaeche ohnehin schon hell wird, machte das den weissen Text vollends unlesbar. Jetzt dunkelt der Kasten leicht ab statt aufzuhellen – er hebt sich weiterhin ab, aber nach unten. */ background:rgba(0,18,45,.22);border:1px solid rgba(255,255,255,.14); border-radius:14px;padding:16px 18px;margin:20px 0 0; } /* Der Zusatz „Hilf anderen Hoerern …" stand mit 72 % Deckkraft da und wirkte dadurch grau. Auf der jetzt durchscheinenden Flaeche war er zu blass – deshalb voll weiss. */ .cx-modulkasten .vk-k-m-text{color:#fff;font-size:13.5px} /* „Blitzer gesehen?" stand als dunkel auf dunkel – deshalb war die Zeile auf deinem Bild praktisch unsichtbar. */ .cx-modulkasten .vk-k-m-text b, .cx-modulkasten .vk-k-melden b{color:#fff;font-weight:700} /* ---------- HIER STAND DER KNOPF ROT AUF ROT ---------- „Melden" ist im Modul ein LINK (), kein Knopf. Weiter unten steht die Regel fuer alle Links im Verkehrs-Kasten: rote Schrift. Beide Regeln waren gleich gewichtet – und bei Gleichstand gewinnt in CSS die spaetere. Also rote Schrift auf rotem Grund: der Knopf war leer. Zwei Aenderungen dagegen: Die allgemeine Link-Regel steht jetzt VOR dem Knopf, und der Knopf spricht das Element mit an („a.vk-k-m-knopf"). Damit gewinnt er in beiden Faellen. */ .cx-modulkasten .vk-kasten a{color:var(--cx-rot);font-weight:700} .cx-modulkasten .vk-kasten a:hover{color:#fff} .cx-modulkasten a.vk-k-m-knopf, .cx-modulkasten a.vk-m-knopf, .cx-modulkasten .vk-k-m-knopf, .cx-modulkasten .vk-m-knopf, .cx-modulkasten .btn-orange{ background:var(--cx-rot);color:#fff;border:0;border-radius:999px; padding:11px 22px;font-weight:700;font-size:14px; cursor:pointer;flex:none;text-decoration:none; transition:background .18s ease, transform .18s ease; } .cx-modulkasten a.vk-k-m-knopf:hover, .cx-modulkasten a.vk-m-knopf:hover, .cx-modulkasten .vk-k-m-knopf:hover, .cx-modulkasten .vk-m-knopf:hover, .cx-modulkasten .btn-orange:hover{background:var(--cx-rot-dunkel);color:#fff} .cx-modulkasten a.vk-k-m-knopf:active, .cx-modulkasten .vk-m-knopf:active{transform:translateY(1px)} /* ---------- DER WEG NACH UNTEN ---------- „Sieben Tage ansehen" und „Alle Meldungen" schliessen beide Kaesten ab – gleiche Stelle, gleiche Gestalt. */ .cx-modulkasten .wt-k-mehr{ display:inline-flex;align-items:center;gap:6px; color:var(--cx-rot);font-weight:700;font-size:14px; margin-top:22px;text-decoration:none; } .cx-modulkasten .wt-k-mehr svg{width:16px;height:16px;transition:transform .18s ease} .cx-modulkasten .wt-k-mehr:hover{color:#fff} .cx-modulkasten .wt-k-mehr:hover svg{transform:translateX(3px)} /* Der Verkehrs-Kasten hat den Melden-Kasten UNTER dem Verweis – dort darf der Abstand nach unten nicht doppelt zaehlen. */ .cx-modulkasten .vk-kasten .wt-k-mehr{margin-top:18px} /* Tastatur-Bedienung: Der Fokus muss auf dem dunklen Grund sichtbar bleiben. */ .cx-modulkasten a:focus-visible, .cx-modulkasten button:focus-visible{ outline:2px solid #fff;outline-offset:3px;border-radius:8px; } /* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt hier auch keine. */ @media (prefers-reduced-motion: reduce){ .cx-modulkasten *{transition:none !important} } /* Alles, was die Module als „gedaempft" auszeichnen. */ .cx-modulkasten .muted{color:rgba(255,255,255,.80)} /* Überschriften innerhalb der Kästen. */ .cx-modulkasten h2, .cx-modulkasten h3, .cx-modulkasten h4{color:#fff} /* Auf schmalen Schirmen wird die Polsterung kleiner, sonst bleibt fuer den Inhalt zu wenig Breite. */ @media(max-width:520px){ .cx-modulkasten .wt-kasten, .cx-modulkasten .vk-kasten{padding:22px 20px} .cx-modulkasten .vk-k-melden{justify-content:flex-start} } /* ---------- WETTER UND VERKEHR IN DER KARTENREIHE ---------- Die Modul-Kaesten brauchen mehr Platz als die schmalen Karten (Drei-Tage-Vorschau, drei Zahlen nebeneinander). Deshalb belegen sie zwei Spalten des Gitters. */ .cx-karte-breit{grid-column:span 2;min-width:0} @media(max-width:1080px){ .cx-karte-breit{grid-column:span 2} } @media(max-width:720px){ .cx-karte-breit{grid-column:auto} } /* Der Abstand oben gehoert hier zur Karte, nicht zum Abschnitt. */ .cx-karte-breit .wt-kasten,.cx-karte-breit .vk-kasten{margin:0} /* ---------- GENUG SPALTEN FÜR DIE BREITEN KÄSTEN ---------- Ein breiter Kasten belegt zwei Spalten. Bei nur zwei Spalten insgesamt fuellt er die ganze Zeile und rutscht nach unten – genau das war zu sehen. Deshalb: Sobald eine breite Karte in der Reihe steht, gibt es vier Spalten. Dann passen zwei schmale Karten und ein breiter Kasten nebeneinander. */ /* Gemessen: Bei vier Spalten und drei schmalen Karten plus einem breiten Kasten (2 Spalten) waren es FUENF – der Kasten rutschte in die naechste Zeile. Die Rechnung muss aufgehen: 3 schmale Karten = 3 Spalten + 1 breiter Kasten (2) = 5 + noch ein breiter (2) = 7 Deshalb: fuenf Spalten ab 1100 px, sieben ab 1500 px. Dann stehen alle nebeneinander, auch wenn Wetter UND Verkehr da sind. */ /* ============================================================ DIE KARTENREIHE – WIE VIELE SPALTEN? ------------------------------------------------------------ Hier hatten sich drei Regelsaetze aus verschiedenen Anlaeufen ueberlagert (drei Karten, dann vier, dann breite Kaesten). Sie haben sich gegenseitig ueberschrieben – gemessen: bei 1600 px kamen vier Spalten heraus statt sieben, und der breite Kasten rutschte in die zweite Zeile. Jetzt EIN Block, der alle Faelle abdeckt. DIE RECHNUNG: Eine schmale Karte belegt eine Spalte, ein breiter Kasten (Wetter, Verkehr) zwei. Damit alles in eine Zeile passt: 3 schmale + 1 breiter = 5 Spalten 3 schmale + 2 breite = 7 Spalten ============================================================ */ /* Ohne breite Kaesten: drei Karten nebeneinander. */ .cx-drei{grid-template-columns:repeat(3,1fr)} /* Mit breiten Kaesten – erst ab genug Platz, sonst wird jede Spalte zu schmal fuer die Sendeplan-Zeiten. */ @media(min-width:1100px){ .cx-drei:has(.cx-karte-breit){grid-template-columns:repeat(5,1fr)} /* ---------- ZWEI BREITE KÄSTEN UND DAZU NOCH KARTEN ---------- HIER WURDE EINE KARTE ZERQUETSCHT: Die Rechnung oben ging von EINEM breiten Kasten aus (3 schmale + 1 breiter = 5 Spalten). Stehen aber BEIDE breiten Kaesten da – Wetter UND Verkehr – belegen sie allein schon vier der fuenf Spalten. Fuer die News-Karte blieb EIN Fuenftel uebrig, also gut 200 Pixel. Darin bricht jedes Wort einzeln um; die Karte sah aus wie ein Fehler, und lesbar war sie nicht. Sieben Spalten waeren die saubere Rechnung, dafuer reicht der Platz aber erst ab 1500 px. Dazwischen gilt jetzt: Die beiden breiten Kaesten teilen sich die erste Zeile, die schmalen Karten ruecken in die zweite und bekommen dort ihre volle Breite. Lieber eine Zeile mehr als eine unlesbare Spalte. */ .cx-drei:has(.cx-karte-breit ~ .cx-karte-breit){grid-template-columns:repeat(4,1fr)} } @media(min-width:1500px){ .cx-drei:has(.cx-karte-breit){grid-template-columns:repeat(7,1fr)} /* Ab hier passt alles nebeneinander – auch mit zwei Kaesten. */ .cx-drei:has(.cx-karte-breit ~ .cx-karte-breit){grid-template-columns:repeat(7,1fr)} } /* Darunter zwei Spalten – der breite Kasten fuellt dann eine ganze Zeile, das ist bei der Breite auch richtig so. */ @media(max-width:1099px){ .cx-drei{grid-template-columns:repeat(2,1fr)} } @media(max-width:720px){ .cx-drei{grid-template-columns:1fr} .cx-karte-breit{grid-column:auto} } /* ---------- STEHEN NUR DIE ZWEI KÄSTEN OBEN? ---------- Dann sollen sie die Breite gerecht teilen – je die Haelfte, nicht zwei Fuenftel mit Lücke daneben. „:has()" prueft das: Sind KEINE schmalen Karten da (also kein Kind ohne die Klasse), gilt die Halbierung. */ .cx-drei:has(.cx-karte-breit):not(:has(.cx-karte)){ grid-template-columns:1fr 1fr; } .cx-drei:has(.cx-karte-breit):not(:has(.cx-karte)) .cx-karte-breit{ grid-column:auto; } /* Nur EIN Kasten und sonst nichts: nicht auf volle Breite ziehen, das wirkt verloren. */ .cx-drei:has(.cx-karte-breit):not(:has(.cx-karte)):not(:has(.cx-karte-breit ~ .cx-karte-breit)){ grid-template-columns:minmax(0,620px); justify-content:center; } @media(max-width:900px){ .cx-drei:has(.cx-karte-breit):not(:has(.cx-karte)){grid-template-columns:1fr} } /* ============================================================ ZULETZT GESPIELT ------------------------------------------------------------ Eigene Klassen, weil dieser Bereich auf HELLEM Grund steht. Vorher liehen wir uns die des Sendeplan-Kastens – der ist dunkelblau, seine Schrift ist weiss. Auf dem weissen Streifen war die Liste dadurch unsichtbar. Die Kacheln folgen demselben Bauprinzip wie „Weitere Beitraege" unter den Artikeln: quadratisches Bild oben, Text darunter, sanftes Anheben beim Zeigen. Ein Radio lebt von Covern – die duerfen den Platz bekommen. ============================================================ */ .cx-verlauf{ display:grid;gap:16px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } .cx-verlauf-karte{ display:flex;flex-direction:column; background:#fff;border:1px solid var(--cx-linie,#E3E8F0); border-radius:var(--cx-radius,14px);overflow:hidden; box-shadow:var(--cx-schatten,0 2px 14px rgba(0,45,88,.08)); transition:transform .18s ease, box-shadow .18s ease; } .cx-verlauf-karte:hover{ transform:translateY(-3px); box-shadow:var(--cx-schatten-stark,0 10px 34px rgba(0,45,88,.16)); } /* ---------- DAS COVER ---------- Quadratisch, weil Cover quadratisch sind. „object-fit:cover" schneidet zu, statt zu verzerren – ein gestauchtes Plattencover faellt sofort unangenehm auf. */ .cx-verlauf-bild{ position:relative;aspect-ratio:1/1;overflow:hidden; background:linear-gradient(135deg,#EAF0F8,#DCE6F3); display:flex;align-items:center;justify-content:center; } .cx-verlauf-bild img{width:100%;height:100%;object-fit:cover;display:block} /* Ohne Cover ein Notenzeichen statt eines leeren Kastens. */ .cx-verlauf-note{font-size:2.2rem;color:var(--cx-navy,#002D58);opacity:.28;line-height:1} /* Der zuletzt gespielte Titel bekommt eine kleine Marke – so sieht man auf einen Blick, was gerade lief. */ .cx-verlauf-marke{ position:absolute;left:8px;top:8px; background:var(--cx-rot,#F62830);color:#fff; font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; padding:4px 9px;border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.18); } .cx-verlauf-neu{border-color:var(--cx-rot,#F62830)} .cx-verlauf-text{display:flex;flex-direction:column;gap:3px;padding:12px 13px 14px} .cx-verlauf-titel{ font-weight:700;line-height:1.3;color:var(--cx-navy,#002D58); /* Lange Titel auf zwei Zeilen begrenzen, damit die Kacheln gleich hoch bleiben und die Reihe ruhig wirkt. */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .cx-verlauf-interpret{ font-size:13px;color:var(--cx-grau,#6B7C93); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* In den Kacheln steht beides nebeneinander – dort ist die Zeile breit genug, und untereinander wuerde die Kachel unnoetig wachsen. Der Trenner kommt aus dem CSS, nicht aus dem HTML: Faellt eine der beiden Angaben weg, faellt er mit weg. */ .cx-verlauf-zeit{ font-size:11.5px;color:var(--cx-grau,#6B7C93);opacity:.85;margin-top:4px; font-variant-numeric:tabular-nums; display:flex;align-items:baseline;gap:6px;flex-wrap:wrap; } .cx-verlauf-uhr{font-weight:700} .cx-verlauf-uhr + .cx-verlauf-her::before{content:"·";margin-right:6px;opacity:.6} /* Auf farbigem Streifen (Startseite → Bereiche → Hintergrundfarbe) bleiben die Kacheln weiss – sonst muesste jede Schriftfarbe einzeln nachgezogen werden, und irgendeine wird vergessen. */ .bereich-farbe .cx-verlauf-karte{background:#fff} @media(prefers-reduced-motion: reduce){ .cx-verlauf-karte{transition:none} .cx-verlauf-karte:hover{transform:none} } @media(max-width:420px){ /* Zwei nebeneinander statt einer – sechs Kacheln untereinander waeren auf dem Handy eine sehr lange Strecke. */ .cx-verlauf{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .cx-verlauf-text{padding:10px 11px 12px} .cx-verlauf-titel{font-size:.95rem} } /* ---------- ZULETZT GESPIELT: VARIANTE „UNTEREINANDER" ---------- Nicht einfach eine schmale Liste, sondern richtige Zeilen mit Luft: grosses Cover links, Titel und Interpret daneben, die Zeitangabe rechts aussen als ruhige Pille. Umgesetzt als Zusatzklasse auf DEMSELBEN Markup wie die Kacheln – zwei getrennte Bauteile waeren zwei Stellen zum Pflegen, und eine davon wird vergessen. Das Cover ist bewusst gross (88 px): Ein Radio lebt von Covern, und bei einer Zeile pro Titel ist der Platz da. Es bekommt einen eigenen weichen Schatten, damit es vor der Zeile zu schweben scheint statt aufgeklebt zu wirken. */ /* SCHMALER, ABER NICHT KARG: Die Zeilen waren zu wuchtig – ein 88er Cover und 12 px Polsterung auf der vollen Textbreite ergaben Bloecke statt einer Liste. Drei Stellschrauben statt einer: die Liste bekommt eine Hoechstbreite und steht mittig, das Cover schrumpft auf 64 px, Polsterung und Abstaende ruecken zusammen. Zusammen wirkt es leichter, ohne gedraengt zu sein – die Zeile bleibt hoch genug, dass Titel und Interpret Luft haben. */ /* VOLLE BREITE: Die Begrenzung auf 720 px ist wieder weg – der Bereich nutzt jetzt die ganze Spalte. Damit die Zeile dabei nicht auseinanderfaellt, sitzt der Text links und die Zeitangabe rechts an ihrem Platz; dazwischen darf Luft sein. */ .cx-verlauf-liste{grid-template-columns:1fr;gap:6px} .cx-verlauf-liste .cx-verlauf-karte{ flex-direction:row;align-items:center;gap:14px; border:1px solid var(--cx-linie,#E3E8F0); border-radius:12px; background:#fff;box-shadow:none; padding:9px 14px 9px 9px; } .cx-verlauf-liste .cx-verlauf-karte:hover{ transform:translateX(3px); border-color:#CBD6E5; box-shadow:var(--cx-schatten,0 2px 14px rgba(0,45,88,.08)); } /* ---------- DAS COVER ---------- */ .cx-verlauf-liste .cx-verlauf-bild{ width:64px;height:64px;flex:none;aspect-ratio:auto; border-radius:10px;box-shadow:0 4px 12px rgba(0,45,88,.14); } .cx-verlauf-liste .cx-verlauf-note{font-size:1.5rem} /* Die Marke wuerde das Cover ueberdecken – hier steht sie hinter dem Titel in der Zeile. */ .cx-verlauf-liste .cx-verlauf-marke{ position:static;margin-left:10px;vertical-align:2px;box-shadow:none; } /* Der zuletzt gespielte Titel bekommt einen zarten Farbstreifen links statt eines roten Rahmens um die ganze Zeile – das waere in einer Liste zu laut. */ .cx-verlauf-liste .cx-verlauf-neu{ border-color:var(--cx-linie,#E3E8F0); box-shadow:inset 4px 0 0 var(--cx-rot,#F62830); } /* ---------- DER TEXT ---------- */ .cx-verlauf-liste .cx-verlauf-text{ flex:1;min-width:0;padding:0; display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:center;column-gap:14px;row-gap:2px; } .cx-verlauf-liste .cx-verlauf-titel{ grid-column:1;-webkit-line-clamp:1; font-size:1rem;line-height:1.3; } .cx-verlauf-liste .cx-verlauf-interpret{grid-column:1;font-size:13px} /* Die Zeit rechts aussen, ueber beide Zeilen, als Pille. */ /* ---------- DIE ZEITANGABE ---------- Zwei Zeilen in einem Kasten: oben die Uhrzeit, darunter klein, wie lange es her ist. Uebereinander statt nebeneinander, damit die Angabe schmal bleibt und dem Titel keinen Platz nimmt. */ .cx-verlauf-liste .cx-verlauf-zeit{ grid-column:2;grid-row:1/3;align-self:center;margin-top:0; display:flex;flex-direction:column;align-items:center;gap:1px; white-space:nowrap;text-align:center; background:var(--cx-weich,#F7F8FC); border:1px solid var(--cx-linie,#E3E8F0); border-radius:12px;padding:6px 11px;min-width:74px; } .cx-verlauf-liste .cx-verlauf-uhr{ font-size:14px;font-weight:700;color:var(--cx-navy,#002D58); font-variant-numeric:tabular-nums;line-height:1.15; } .cx-verlauf-liste .cx-verlauf-her{font-size:11px;opacity:.75;line-height:1.15} @media(max-width:560px){ .cx-verlauf-liste .cx-verlauf-karte{gap:11px;padding:8px 11px 8px 8px} .cx-verlauf-liste .cx-verlauf-bild{width:54px;height:54px;border-radius:9px} .cx-verlauf-liste .cx-verlauf-titel{font-size:.96rem} /* Auf dem Handy die Zeit unter den Text – rechts daneben bliebe fuer den Titel zu wenig. */ .cx-verlauf-liste .cx-verlauf-text{grid-template-columns:minmax(0,1fr)} /* Auf dem Handy nebeneinander unter dem Titel – ein hoher Kasten rechts wuerde die Zeile unnoetig auseinanderziehen. */ .cx-verlauf-liste .cx-verlauf-zeit{ grid-column:1;grid-row:auto;justify-self:start;margin-top:3px; flex-direction:row;align-items:baseline;gap:6px;min-width:0; padding:4px 9px;border-radius:999px; } .cx-verlauf-liste .cx-verlauf-uhr{font-size:12px} } @media(prefers-reduced-motion: reduce){ .cx-verlauf-liste .cx-verlauf-karte:hover{transform:none} } /* ============================================================ TEXT + BILD (Bloecke aus „Startseite") ------------------------------------------------------------ Zwei Spalten, deren Verhaeltnis der Betreiber einstellt: „--cx-tb-b" ist die Breite des BILDES, der Text bekommt den Rest. 50 % ergibt halbe/halbe. Ab 760 px nebeneinander, darunter untereinander – bei schmalen Schirmen waeren zwei Spalten fuer beides zu wenig. ============================================================ */ .cx-tb{display:grid;gap:var(--cx-tb-a,28px)} .cx-tb-bild img{width:100%;height:auto;display:block;border-radius:var(--cx-radius,14px)} .cx-tb-text > :first-child{margin-top:0} .cx-tb-text > :last-child{margin-bottom:0} @media(min-width:760px){ .cx-tb-links{grid-template-columns:var(--cx-tb-b,50%) 1fr;align-items:center} .cx-tb-rechts{grid-template-columns:1fr var(--cx-tb-b,50%);align-items:center} /* Bei „rechts" steht das Bild im HTML VOR dem Text – damit es ohne Bild keine leere Spalte gibt. Die Reihenfolge dreht das Raster, nicht das Markup. */ .cx-tb-rechts .cx-tb-bild{order:2} .cx-tb-rechts .cx-tb-text{order:1} } /* „oben" und der Fall ohne Bild brauchen keine Spalten. */ .cx-tb-oben{grid-template-columns:1fr} .cx-tb-box{border:1px solid var(--cx-linie,#E3E8F0)}