/* ========================================================================= ASSISTENT-EXTERN - der ARD-MEDIA-Seitenrahmen ========================================================================= Diese Datei bildet den Rahmen von www.ard-media.de nach: Marine-Flaeche mit Lichtkegel-Hintergrund, Kopfzeile in Marine mit Limette-Kante, transparente Fusszeile - und die Tabellen-Grundoptik der Website. Sie wird ZUSAETZLICH zu extern-core.css geladen (core zuerst, diese danach) und ueberschreibt dessen helle Neutraloptik. Wer sie einbindet, setzt zusaetzlich die Klasse "ardm-page" auf den : daran haengen die Tabellenregeln, damit sie keine App treffen, die den Rahmen nicht will. -- Warum eine eigene Datei und nicht extern-core.css? ------------------ Der Flex-Kombi Planner traegt denselben Rahmen bereits VIER MAL als .skin-a/-b/-c/-d in seinen Stylesheets (je ~35 fast identische Zeilen). Diese Datei ist der zentrale Ort dafuer. Der Planner wird bewusst noch NICHT umgestellt (Stand 07.08.2026: seine Varianten sind in Abstimmung, Variante A ist eingefroren) - er laedt diese Datei nicht und bleibt dadurch unveraendert. Wenn er spaeter drankommt, entfallen dort die .skin-*-Bloecke ersatzlos und er bindet stattdessen diese Datei ein. -- Die 62,5-%-Basis --------------------------------------------------- html steht auf 62,5 %, ein rem ist damit 10 px. Das ist KEIN Zufall und auch keine Bequemlichkeit: ard-media.de laeuft selbst auf html { font-size: 10px }. Wer Original-CSS der Website uebernimmt (der TV-Tarifrechner tut das), bekommt dessen rem-Werte damit 1:1 richtig - sonst ist jeder Abstand um Faktor 1,6 zu gross. Absolute px-Werte sind davon unberuehrt, deshalb ist die Umstellung fuer px-basierte Apps folgenlos. ========================================================================= */ html { font-size: 62.5%; } :root { --ardm-navy: #002c6b; /* Flaeche der Website */ --ardm-navy-deep: #002353; --ardm-blue: #003480; /* Bedienelemente, Pfeile */ --ardm-blue-dark: #003366; /* Ueberschriften im Rechner */ --ardm-lime: #bee120; /* Signalfarbe / CTA */ --ardm-lime-dark: #a4c412; --ardm-table-head: #bedcfa; /* Tabellenkopf der Website */ --ardm-table-odd: #e5f1fd; /* ungerade Datenzeile */ --ardm-table-even: #deedfc; /* gerade Datenzeile */ } /* --- Buehne --------------------------------------------------------------- Marine bleibt als Grundfarbe stehen: so blitzt beim Laden nichts weiss auf, und fehlt die Bilddatei, sieht die Seite unveraendert aus. Das Bild liegt als festes Element hinter dem Inhalt statt als background-attachment: fixed - letzteres ruckelt auf iOS spuerbar. */ body.ardm-page { background: var(--ardm-navy); color: #323232; min-height: 100vh; } body.ardm-page::before { background: var(--ardm-navy) url("assets/bg-ard-media.jpg") center / cover no-repeat; content: ""; inset: 0; position: fixed; z-index: -1; } body.ardm-page .ext-main, body.ardm-page .ext-header, body.ardm-page .ext-footer { position: relative; } /* --- Kopfzeile ------------------------------------------------------------ */ body.ardm-page .ext-header { background: var(--ardm-navy); border-bottom: 3px solid var(--ardm-lime); padding: 14px clamp(16px, 4vw, 40px); } body.ardm-page .ext-brand__logo { height: 30px; } body.ardm-page .ext-header__title { color: #fff; font-size: 20px; letter-spacing: -0.01em; } body.ardm-page .ext-header__subtitle { color: rgba(255, 255, 255, 0.72); } body.ardm-page .ext-header__divider { background: rgba(255, 255, 255, 0.22); } body.ardm-page .ext-header .ext-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: #fff; } body.ardm-page .ext-header .ext-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; } /* --- Fusszeile ------------------------------------------------------------ */ body.ardm-page .ext-footer { background: transparent; border-top: 0; color: rgba(255, 255, 255, 0.66); } body.ardm-page .ext-footer a { color: var(--ardm-lime); } /* --- Knoepfe in der Hausfarbwelt ------------------------------------------ */ body.ardm-page .ext-btn { border-radius: 6px; color: var(--ardm-navy); } body.ardm-page .ext-btn:hover { border-color: var(--ardm-navy); } body.ardm-page .ext-btn--primary { background: var(--ardm-lime); border-color: var(--ardm-lime); color: var(--ardm-navy); } body.ardm-page .ext-btn--primary:hover { background: var(--ardm-lime-dark); border-color: var(--ardm-lime-dark); } /* --- Tabellen wie auf ard-media.de ---------------------------------------- Uebernommen aus main.css der Website (gemessen am 07.08.2026). Genau diese Regeln geben den Tabellen des Tarifrechners ihr blaues Aussehen - sie stehen dort NICHT im Rechner-Stylesheet, sondern im Seitenrahmen. Beim ersten Nachbau sind sie deshalb untergegangen und die Tabelle blieb weiss. */ body.ardm-page table { border-collapse: collapse; border-spacing: 0; margin-bottom: 16px; width: 100%; } body.ardm-page caption, body.ardm-page th, body.ardm-page td { font-weight: 400; text-align: left; vertical-align: middle; } body.ardm-page table td, body.ardm-page table th { color: var(--ardm-blue); font-size: 1.3rem; line-height: 1.38462; padding: 8px; text-align: center; } body.ardm-page table td { border-bottom: 1px solid var(--ardm-table-head); } body.ardm-page table th { background: var(--ardm-table-head); } body.ardm-page table:not(.table-blank) tbody > tr:nth-child(2n) > td { background: var(--ardm-table-even); } body.ardm-page table:not(.table-blank) tbody > tr:nth-child(2n + 1) > td { background: var(--ardm-table-odd); } /* --- Embed-Modus ---------------------------------------------------------- Die Marine-Buehne mit Lichtkegel ist genau das, was eine eigenstaendige Seite ausmacht - eingebettet waere sie ein blauer Kasten mitten in einer fremden Seite. Sie faellt weg; die Tabellenoptik und die Farbtoene bleiben, denn die gehoeren zum Inhalt. Der Rest des Embed-Modus (Mindesthoehe, Aussenabstand) steht in extern-core.css. */ body.ardm-page.ext-embed { background: transparent; min-height: 0; } body.ardm-page.ext-embed::before { content: none; }