/* * Unterseiten im dunklen Look. * * Die Unterseiten sind älter als das Redesign und bringen ein gewachsenes, aber * durchaus einheitliches Klassenset mit: rd-section, rd-card, rd-h2, rd-prose und * so fort. Statt siebzehn Seiten neu zu schreiben und dabei jeden gewachsenen * Text und jedes Suchmaschinen-Signal zu riskieren, bekommt genau dieses * Klassenset hier seinen dunklen Anzug. Die Seiten selbst tauschten nur ihre * erste und letzte Zeile. * * Alles hängt unter .rd am — ohne diese Klasse greift keine Regel, damit * das alte redesign.css und diese Datei sich nicht ins Gehege kommen. * * Die --rd-*-Variablen stammen aus redesign.css und werden hier mit dunklen * Werten neu belegt. Das ist der Trick, der die vielen inline-styles der alten * Seiten (background:var(--rd-panel) und ähnliche) ohne eine einzige Änderung * mitnimmt. */ .rd { --rd-bg: #141E2B; --rd-ink: #E8EFF6; /* Überschriften */ --rd-body: #C3D2DF; /* Fließtext */ --rd-muted: #93A6B8; /* Nebensächliches */ --rd-link: #2FD3C9; --rd-link-h: #6FE5DD; --rd-lime: #FF8A1F; /* war Limette, ist jetzt der Amber-Akzent */ --rd-petrol: #2FD3C9; --rd-navy: #0A0E17; --rd-navy-2: #101A26; --rd-navy-3: #16222F; --rd-border: rgba(47, 211, 201, .16); --rd-line: rgba(232, 239, 246, .10); --rd-panel: #101A26; /* abgesetzte Abschnitte */ --rd-card: #1C2938; --rd-on-dark: #C3D2DF; --rd-on-dark-2: #A8B9CB; --rd-on-dark-3: #8598AC; --rd-dark-line: rgba(47, 211, 201, .22); --rd-dark-chip: #22333F; --rd-band-bg: rgba(255, 138, 31, .10); --rd-band-br: rgba(255, 138, 31, .34); --rd-sans: 'RD Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --rd-disp: 'RD Titel', 'Helvetica Neue', Arial, sans-serif; --rd-mono: 'RD Mono', ui-monospace, Menlo, monospace; --rd-pad: 56px; --rd-maxw: 1240px; --rd-radius: 10px; } /* ── Grundraster ──────────────────────────────────────────────────────────── */ .rd .rd-section { max-width: var(--rd-maxw); margin: 0 auto; padding: 68px var(--rd-pad); } /* Ein Abschnitt mit eigenem Hintergrund muss über die volle Breite laufen, sein Inhalt aber im Raster bleiben — daher die negativen Ränder. */ .rd .rd-section[style*="background"] { max-width: none; padding-left: calc((100vw - var(--rd-maxw)) / 2 + var(--rd-pad)); padding-right: calc((100vw - var(--rd-maxw)) / 2 + var(--rd-pad)); } .rd .rd-section-head { max-width: 780px; margin-bottom: 34px; } .rd .rd-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--rd-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--rd-link); margin-bottom: 14px; } .rd .rd-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-link); box-shadow: 0 0 0 4px rgba(47, 211, 201, .16); } .rd .rd-h2 { font-family: var(--rd-disp); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.02em; color: var(--rd-ink); margin: 0 0 14px; } .rd .rd-lead { font-size: 17px; line-height: 1.68; color: var(--rd-body); margin: 0; } /* ── Seitenkopf einer Unterseite ──────────────────────────────────────────── */ .rd .rd-pagehero { position: relative; max-width: var(--rd-maxw); margin: 0 auto; padding: 54px var(--rd-pad) 30px; border-bottom: 1px solid var(--rd-border); } .rd .rd-pagehero h1 { font-family: var(--rd-disp); font-weight: 900; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -.025em; color: var(--rd-ink); margin: 0 0 12px; } .rd .rd-pagehero > p { font-size: 17px; line-height: 1.68; color: var(--rd-body); max-width: 720px; } .rd .rd-hero-h1 { font-family: var(--rd-disp); font-weight: 900; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -.025em; color: var(--rd-ink); } .rd .rd-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--rd-mono); font-size: 11.5px; color: var(--rd-on-dark-3); margin-bottom: 18px; } .rd .rd-crumb a { color: var(--rd-on-dark-2); text-decoration: none; } .rd .rd-crumb a:hover { color: var(--rd-link); } .rd .rd-crumb .sep { color: var(--rd-on-dark-3); opacity: .6; } .rd .rd-crumb .cur { color: var(--rd-link); } /* ── Fließtext ────────────────────────────────────────────────────────────── */ .rd .rd-article { max-width: var(--rd-maxw); margin: 0 auto; padding: 44px var(--rd-pad) 20px; } .rd .rd-prose { max-width: 780px; color: var(--rd-body); font-size: 16px; line-height: 1.75; } .rd .rd-prose h2 { font-family: var(--rd-disp); font-weight: 800; font-size: 23px; line-height: 1.25; color: var(--rd-ink); margin: 40px 0 12px; } .rd .rd-prose h2:first-child { margin-top: 0; } .rd .rd-prose h3 { font-family: var(--rd-disp); font-weight: 700; font-size: 17.5px; color: var(--rd-ink); margin: 26px 0 8px; } .rd .rd-prose p { margin: 0 0 15px; } .rd .rd-prose strong { color: var(--rd-ink); font-weight: 600; } .rd .rd-prose em { color: var(--rd-on-dark-2); } .rd .rd-prose ul, .rd .rd-prose ol { margin: 0 0 16px; padding-left: 22px; } .rd .rd-prose li { margin-bottom: 7px; } .rd .rd-prose li::marker { color: var(--rd-link); } .rd .rd-prose a { color: var(--rd-link); text-decoration: underline; text-underline-offset: 2px; } .rd .rd-prose a:hover { color: var(--rd-link-h); } .rd .rd-prose hr { border: 0; border-top: 1px solid var(--rd-line); margin: 32px 0; } .rd .rd-prose code { font-family: var(--rd-mono); font-size: .9em; color: var(--rd-link); background: rgba(47, 211, 201, .10); border-radius: 4px; padding: 1px 5px; } .rd .rd-prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; } .rd .rd-prose th, .rd .rd-prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rd-line); } .rd .rd-prose th { font-family: var(--rd-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-on-dark-3); font-weight: 500; border-bottom-color: var(--rd-border); } .rd .rd-prose tbody tr:hover { background: rgba(47, 211, 201, .04); } .rd .rd-prose td strong { color: var(--rd-ink); } /* ── Karten ───────────────────────────────────────────────────────────────── */ .rd .rd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .rd .rd-card { background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: 24px; transition: border-color .2s, transform .2s; } .rd .rd-card:hover { border-color: rgba(47, 211, 201, .38); transform: translateY(-2px); } .rd .rd-card h3 { font-family: var(--rd-disp); font-weight: 700; font-size: 18px; color: var(--rd-ink); margin: 0 0 9px; line-height: 1.3; } .rd .rd-card p { color: var(--rd-body); font-size: 14.5px; line-height: 1.65; margin: 0 0 10px; } .rd .rd-card p:last-child { margin-bottom: 0; } .rd .rd-card ul { margin: 0; padding-left: 18px; color: var(--rd-body); font-size: 14.5px; line-height: 1.7; } .rd .rd-card li::marker { color: var(--rd-link); } .rd .rd-card-eyebrow { font-family: var(--rd-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rd-link); margin-bottom: 10px; } .rd .rd-panel { background: var(--rd-panel); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: 26px; } .rd .rd-callout { background: rgba(47, 211, 201, .07); border: 1px solid var(--rd-border); border-left: 3px solid var(--rd-link); border-radius: 8px; padding: 18px 22px; color: var(--rd-body); font-size: 15px; line-height: 1.7; margin: 0 0 20px; } .rd .rd-callout strong { color: var(--rd-ink); } .rd .rd-fineprint { font-size: 12.5px; line-height: 1.65; color: var(--rd-on-dark-3); } /* ── Marken, Kennzahlen ───────────────────────────────────────────────────── */ .rd .rd-tags { display: flex; flex-wrap: wrap; gap: 8px; } .rd .rd-tag { display: inline-flex; align-items: center; font-family: var(--rd-mono); font-size: 11.5px; color: var(--rd-on-dark-2); background: var(--rd-dark-chip); border: 1px solid var(--rd-border); border-radius: 4px; padding: 4px 9px; white-space: nowrap; } .rd .rd-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .rd .rd-pill { background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: 18px 20px; } .rd .rd-pill.dark { background: var(--rd-navy); border-color: var(--rd-dark-line); } .rd .rd-pill .n { font-family: var(--rd-disp); font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--rd-ink); margin-bottom: 5px; } .rd .rd-pill.dark .n { color: var(--rd-link); } .rd .rd-pill .l { font-size: 12.5px; line-height: 1.5; color: var(--rd-muted); } /* ── Preisstufen ──────────────────────────────────────────────────────────── */ .rd .rd-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .rd .rd-tier { position: relative; background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: 26px 24px; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .rd .rd-tier:hover { transform: translateY(-4px); border-color: var(--rd-link); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); } .rd .rd-tier.featured { border-color: var(--rd-lime); background: #1E2B3A; } .rd .rd-tier.featured:hover { border-color: var(--rd-lime); box-shadow: 0 14px 34px rgba(255, 138, 31, .18); } @media (prefers-reduced-motion: reduce) { .rd .rd-tier { transition: none; } .rd .rd-tier:hover { transform: none; } } .rd .rd-tier .name { font-family: var(--rd-disp); font-weight: 700; font-size: 18px; color: var(--rd-ink); margin-bottom: 5px; } .rd .rd-tier .who { font-size: 13.5px; color: var(--rd-muted); margin-bottom: 16px; line-height: 1.5; } .rd .rd-tier .price { font-family: var(--rd-disp); font-weight: 800; font-size: 32px; line-height: 1.05; color: var(--rd-ink); margin-bottom: 5px; } .rd .rd-tier .price small { font-size: 15px; font-weight: 600; color: var(--rd-muted); } .rd .rd-tier .fine { font-size: 12px; color: var(--rd-on-dark-3); margin-bottom: 18px; line-height: 1.5; } .rd .rd-tier .feats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .rd .rd-tier .feats span { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--rd-body); } .rd .rd-tier .feats span::before { content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--rd-link); } .rd .rd-tier .rd-btn { margin-top: auto; } .rd .rd-badge { position: absolute; top: -10px; right: 20px; font-family: var(--rd-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: var(--rd-lime); color: #141E2B; border-radius: 4px; padding: 4px 9px; } /* ── Kostenaufstellung ────────────────────────────────────────────────────── */ .rd .rd-cost { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } .rd .rd-cost .col { background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: 22px 24px; } .rd .rd-cost .col.dark { background: var(--rd-navy); border-color: var(--rd-dark-line); } .rd .rd-cost .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--rd-line); } .rd .rd-cost .hd .name { font-family: var(--rd-disp); font-weight: 700; font-size: 16.5px; color: var(--rd-ink); } .rd .rd-cost .hd .sum { font-family: var(--rd-disp); font-weight: 800; font-size: 21px; white-space: nowrap; color: var(--rd-ink); } .rd .rd-cost .col.dark .hd .sum { color: var(--rd-link); } .rd .rd-cost .li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 14px; line-height: 1.6; color: var(--rd-body); padding: 5px 0; } .rd .rd-cost .li .v { font-family: var(--rd-mono); font-size: 13px; color: var(--rd-on-dark-2); white-space: nowrap; } .rd .rd-cost .note { font-size: 12.5px; color: var(--rd-on-dark-3); margin-top: 12px; line-height: 1.6; } .rd .rd-savings { background: var(--rd-band-bg); border: 1px solid var(--rd-band-br); border-radius: var(--rd-radius); padding: 20px 24px; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .rd .rd-savings .big { font-family: var(--rd-disp); font-weight: 800; font-size: 28px; color: var(--rd-lime); line-height: 1.1; } .rd .rd-savings .l, .rd .rd-savings .note { font-size: 13.5px; color: var(--rd-body); } /* ── Ablauf in Schritten ──────────────────────────────────────────────────── */ .rd .rd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .rd .rd-step { position: relative; background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: 22px 24px; } /* Die Schrittnummer steht bereits als .n im Markup; ein zusätzlicher CSS-Zähler würde sie ein zweites Mal setzen. */ .rd .rd-step .n { font-family: var(--rd-mono); font-size: 12px; font-weight: 600; color: var(--rd-link); margin-bottom: 10px; } .rd .rd-step.active { border-color: rgba(47, 211, 201, .4); } .rd .rd-step h3, .rd .rd-step h4 { font-family: var(--rd-disp); font-weight: 700; font-size: 16.5px; color: var(--rd-ink); margin: 0 0 7px; } .rd .rd-step p { font-size: 14px; line-height: 1.65; color: var(--rd-body); margin: 0; } /* ── Aufforderung ─────────────────────────────────────────────────────────── */ .rd .rd-cta { background: var(--rd-navy); border: 1px solid var(--rd-dark-line); border-radius: var(--rd-radius); padding: 34px 36px; max-width: var(--rd-maxw); margin: 0 auto; } .rd .rd-cta.row { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; } .rd .rd-cta h2, .rd .rd-cta h3 { font-family: var(--rd-disp); font-weight: 800; font-size: 23px; color: var(--rd-ink); margin: 0 0 8px; line-height: 1.2; } .rd .rd-cta p { color: var(--rd-body); font-size: 15px; line-height: 1.65; margin: 0; } /* Die Knöpfe der alten Seiten. rd-btn selbst kommt aus rd-anime.css und ist bereits amberfarben; hier nur die Spielarten, die dort nicht vorkommen. */ .rd .rd-btn-lime, .rd a.rd-btn-lime { background: var(--rd-lime); border-color: var(--rd-lime); color: #141E2B; } .rd .rd-btn-lime:hover, .rd a.rd-btn-lime:hover { background: #FFA04A; border-color: #FFA04A; color: #141E2B; } .rd .rd-btn-ghost, .rd a.rd-btn-ghost { background: transparent; border: 1px solid var(--rd-dark-line); color: var(--rd-ink); } .rd .rd-btn-ghost:hover, .rd a.rd-btn-ghost:hover { border-color: var(--rd-link); color: var(--rd-link); } .rd .rd-btn-dark, .rd a.rd-btn-dark { background: var(--rd-dark-chip); border-color: var(--rd-dark-line); color: var(--rd-ink); } .rd .rd-btn-dark:hover, .rd a.rd-btn-dark:hover { background: #2B3E4E; color: var(--rd-ink); } .rd .rd-link { color: var(--rd-link); text-decoration: none; font-weight: 500; } .rd .rd-link:hover { color: var(--rd-link-h); text-decoration: underline; } .rd .rd-arrow { display: inline-block; margin-left: 5px; transition: transform .18s; } .rd .rd-link:hover .rd-arrow, .rd .rd-btn:hover .rd-arrow { transform: translateX(3px); } /* ── Häufige Fragen ───────────────────────────────────────────────────────── */ .rd .rd-faq { display: flex; flex-direction: column; gap: 12px; } .rd .rd-faq-item { background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: 20px 24px; } .rd .rd-faq-item h3 { font-family: var(--rd-disp); font-weight: 700; font-size: 16.5px; color: var(--rd-ink); margin: 0 0 8px; } .rd .rd-faq-item p { font-size: 14.5px; line-height: 1.7; color: var(--rd-body); margin: 0; } /* Aufklapp-Optik für FAQ-Einträge als

: Pfeil rechts, Hover-Farbe, Standard-Marker weg — die Klickbarkeit soll man sehen, nicht erraten. */ .rd .rd-faq-item summary { list-style: none; cursor: pointer; position: relative; font-weight: 600; font-size: 15.5px; color: var(--rd-ink); padding-right: 30px; } .rd .rd-faq-item summary::-webkit-details-marker { display: none; } .rd .rd-faq-item summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--rd-link); border-bottom: 2px solid var(--rd-link); transform: translateY(-70%) rotate(45deg); transition: transform .25s; } .rd .rd-faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .rd .rd-faq-item[open] summary { margin-bottom: 10px; } .rd .rd-faq-item summary:hover { color: var(--rd-link); } .rd .rd-faq-item { transition: border-color .2s; } .rd .rd-faq-item:hover { border-color: var(--rd-dark-line); } /* ── Inhaltsverzeichnis, Bilder ───────────────────────────────────────────── */ .rd .rd-toc { background: var(--rd-panel); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: 20px 24px; margin-bottom: 28px; } .rd .rd-toc a { display: block; padding: 4px 0; color: var(--rd-body); text-decoration: none; font-size: 14.5px; } .rd .rd-toc a:hover { color: var(--rd-link); } .rd .rd-toc a.active { color: var(--rd-link); } .rd .rd-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .rd .rd-thumb, .rd .shot { border: 1px solid var(--rd-border); border-radius: 8px; overflow: hidden; background: var(--rd-navy); display: block; } .rd .rd-thumb img, .rd .shot img { display: block; width: 100%; height: auto; } .rd .cap { font-size: 12.5px; color: var(--rd-on-dark-3); padding: 8px 10px; line-height: 1.5; } .rd .rd-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; } /* .rd-feature als eigenständige Sektion: Erbe aus redesign.css, wo Raster, Rand und Innenabstand am Band selbst hingen. Ohne diese Regeln klebt der Inhalt der Sektion randlos am Fenster. */ .rd section.rd-feature { max-width: var(--rd-maxw); margin: 0 auto; padding: 68px var(--rd-pad); } /* Modul-Optionen in den Preiskacheln: eigener, abgetrennter Block unter den Leistungen */ .rd .rd-tier .mods { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rd-line); } .rd .rd-tier .mods-label { font-family: var(--rd-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-muted); margin-bottom: 8px; } .rd .rd-tier .mods-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--rd-body); padding: 3px 0; } .rd .rd-tier .mods-row span:last-child { white-space: nowrap; font-weight: 600; color: var(--rd-ink); } /* Aufklappbare Modul-Erklärungen in der Fachmodul-Box (natives

, kein JS) */ .rd .mod-info { border-top: 1px solid var(--rd-line); } .rd .mod-info summary { cursor: pointer; padding: 13px 0; font-size: 15px; font-weight: 600; color: var(--rd-ink); } .rd .mod-info summary .sub { font-weight: 400; color: var(--rd-body); } .rd .mod-info summary:hover { color: var(--rd-link); } .rd .mod-info p { margin: 0 0 14px; font-size: 14px; color: var(--rd-body); line-height: 1.65; max-width: 760px; } /* Aufklappbares Kleingedrucktes unter Preiskacheln (natives

, kein JS) */ .rd .rd-fineprint-details { margin-top: 8px; font-size: 13px; color: var(--rd-muted); } .rd .rd-fineprint-details summary { cursor: pointer; color: var(--rd-body); font-size: 13.5px; padding: 6px 0; width: fit-content; } .rd .rd-fineprint-details summary:hover { color: var(--rd-link); } .rd .rd-fineprint-details p { margin: 10px 0 0; line-height: 1.65; max-width: 900px; } .rd section.rd-feature .eyebrow { font-family: var(--rd-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--rd-link); margin-bottom: 14px; } .rd .rd-region-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } /* Bildbetrachter. Versteckt wird er über das hidden-Attribut, denn genau das nimmt das Skript der Seite weg, wenn ein Bild geöffnet wird. Die Klasse .active bleibt zusätzlich gültig, weil andere Seiten sie setzen. */ .rd .rd-lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(10, 14, 23, .94); backdrop-filter: blur(6px); } .rd .rd-lightbox[hidden] { display: none; } .rd .rd-lightbox[hidden].active { display: flex; } .rd .rd-lightbox figure { margin: 0; text-align: center; } .rd .rd-lightbox figcaption { margin-top: 14px; font-size: 13.5px; color: var(--rd-on-dark-2); display: flex; flex-direction: column; gap: 4px; } .rd .rd-lightbox figcaption strong { color: var(--rd-ink); font-size: 15px; } .rd .rd-lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; } .rd .lb-close, .rd .lb-prev, .rd .lb-next { position: absolute; background: rgba(28, 41, 56, .9); border: 1px solid var(--rd-dark-line); color: var(--rd-ink); border-radius: 6px; width: 42px; height: 42px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .rd .lb-close { top: 24px; right: 24px; } .rd .lb-prev { left: 24px; top: 50%; transform: translateY(-50%); } .rd .lb-next { right: 24px; top: 50%; transform: translateY(-50%); } .rd .lb-close:hover, .rd .lb-prev:hover, .rd .lb-next:hover { border-color: var(--rd-link); color: var(--rd-link); } /* ── Einblenden beim Scrollen ───────────────────────────────────────────────── Die alten Seiten markieren Blöcke mit .reveal und erwarten, dass ein Skript .visible ergänzt. Dieses Skript lädt hier nicht mehr mit, deshalb übernimmt das der IntersectionObserver aus rd-anime.js über .an-da. Beide Wege führen zum sichtbaren Zustand, und ohne JavaScript bleibt ohnehin alles sichtbar. */ .rd .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } .rd .reveal.visible, .rd .reveal.an-da { opacity: 1; transform: none; } .rd.no-js-fallback .reveal, .rd .reveal.an-da { opacity: 1; transform: none; } html.no-js .rd .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rd .reveal { opacity: 1; transform: none; transition: none; } } /* ── Schmale Bildschirme ──────────────────────────────────────────────────── */ @media (max-width: 900px) { .rd { --rd-pad: 22px; } .rd .rd-section { padding-top: 46px; padding-bottom: 46px; } .rd .rd-section[style*="background"] { padding-left: var(--rd-pad); padding-right: var(--rd-pad); } .rd .rd-pagehero { padding-top: 34px; } .rd .rd-article { padding-top: 30px; } .rd .rd-feature { grid-template-columns: 1fr; gap: 22px; } .rd .rd-cta.row { flex-direction: column; align-items: flex-start; } .rd .rd-prose { max-width: none; } } /* ── Sprungmarken ───────────────────────────────────────────────────────────── Den sanften Sprung übernahm früher ein Skript im alten Seitenfuß samt eigener Offset-Rechnung. Das können die Browser inzwischen selbst; scroll-margin-top hält das Ziel unter der klebenden Navigation frei. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .rd [id] { scroll-margin-top: 88px; } /* ── Aufklappbare Fragen der Unterseiten ──────────────────────────────────── */ .rd details.rd-panel { padding: 0; overflow: hidden; } .rd details > summary { list-style: none; cursor: pointer; } .rd details > summary::-webkit-details-marker { display: none; } .rd details:not(.an-det) > summary::after { content: "+"; float: right; color: var(--rd-link); font-size: 19px; line-height: 1; transition: transform .2s; } .rd details:not(.an-det)[open] > summary::after { transform: rotate(45deg); } .rd details[open] > summary { color: var(--rd-link); } /* ── Schmale Bildschirme: Feinschliff ───────────────────────────────────────── Vierspaltige Kartenreihen bleiben selbst zweispaltig zu eng: bei 390 px hat eine Karte dann 127 px Inhaltsbreite, in die kein Titel mehr passt. */ @media (max-width: 620px) { .rd .rd-cards, .rd .rd-cards[style*="repeat"] { grid-template-columns: 1fr !important; } .rd .rd-pills, .rd .rd-price, .rd .rd-cost, .rd .rd-steps { grid-template-columns: 1fr !important; } } @media (max-width: 900px) { /* Breite Tabellen scrollen in ihrem eigenen Kasten, nie die ganze Seite. */ .rd .rd-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .rd table { max-width: 100%; } .rd .rd-card, .rd .rd-panel, .rd .rd-tier { min-width: 0; } .rd .rd-card h3, .rd .rd-card p { overflow-wrap: anywhere; } } /* Sicherheitsnetz gegen abgeschnittene Wörter: der Rumpf blendet seitlichen Überlauf aus, ein zu langes Wort wird dadurch nicht sichtbar umbrochen, sondern stillschweigend abgeschnitten. Auf schmalen Schirmen darf deshalb notfalls mitten im Wort getrennt werden. */ @media (max-width: 700px) { .rd h1, .rd h2, .rd h3, .rd .rd-h2, .rd .rd-hero-h1 { overflow-wrap: break-word; hyphens: auto; } }