/* ========================================================================== Die Launcher – News-Bereich (Übersicht /news und Artikel /news/) Reihenfolge im : /css/theme.css → /css/layout.css → diese Datei. Kopfzeile, Handy-Menü, Fußzeile, Knöpfe, Abschluss-Block und Typo-Skala kommen aus layout.css (gemeinsamer Rahmen aller Unterseiten). Hier steht nur, was der News-Bereich zusätzlich braucht: heller Modus, Artikel-Bausteine, Kategorie-Farben. Startseite und übrige Seiten bleiben unverändert dunkel. Hell/Dunkel - Ein Inline-Skript im setzt data-theme="dark|light" auf , BEVOR das CSS lädt. Dadurch flackert nichts. - Standard ist dunkel. Hell gilt, wenn der Besucher es gewählt hat (localStorage "dl-news-theme") oder das System "hell" bevorzugt. - Umschalter: js/news-theme.js Kontrast Fließtext (WCAG 2.x, im Browser gemessen) dunkel #cfcfd8 auf #09090b (Wert aus layout.css) hell #2b2b3a auf #f6f6fa = 12,9 : 1 ========================================================================== */ /* ── Tokens: dunkel (Standard) ─────────────────────────────────────────── */ :root{ --article-max:38rem; /* ~70 Zeichen pro Zeile bei 17 px */ --news-body:var(--text2); /* Für Mockups: rgba(var(--ink),a) statt fest verdrahtetem Weiß */ --ink:255,255,255; --ink-lift:0; /* hebt kleine Mockup-Schrift im hellen Modus an */ --shade:0,0,0; --shade-k:1; --paper:#121218; --paper-2:#1a1a22; --edge:rgba(255,255,255,.08); --edge-strong:rgba(255,255,255,.16); --tile:#101015; --link:#a5a6ff; --focus:#a5a6ff; --accent:#8b8cfe; /* Flächen */ --accent-ink:#a5a6ff; /* Schrift */ --accent-soft:rgba(139,140,254,.12); --accent-line:rgba(139,140,254,.32); --acc-rgb:139,140,254; --lav-ink:#c0b4ff; --lav-rgb:192,180,255; --on-accent:#0b0b0e; /* Bedeutungsfarben (nur für richtig/falsch, nie als Markenfarbe) */ --ok-rgb:52,211,153; --ok-ink:#6ee7b7; --warn-rgb:251,191,36; --warn-ink:#fcd34d; --bad-rgb:248,113,113; --bad-ink:#fca5a5; --orange-rgb:251,146,60;--orange-ink:#fdba74; --wa-ink:#25d366; /* Illustrationen der Kacheln */ --f-paper:#1b1b23; --f-paper2:#262630; --f-edge:rgba(255,255,255,.09); --f-line:rgba(255,255,255,.12); --f-line2:rgba(255,255,255,.28); --f-ink:#ededf2; --f-mute:rgba(255,255,255,.58); --f-shadow:rgba(0,0,0,.38); } /* ── Tokens: hell ──────────────────────────────────────────────────────── */ :root[data-theme="light"]{ color-scheme:light; --bg:#f6f6fa; --surface:#ffffff; --border:#e2e2ec; --text:#0c0c14; --text2:#3b3b4f; /* 10,1 : 1 */ --text3:#5a5a70; /* 6,2 : 1 */ --text-dim:#9d9db0; --glass:rgba(12,12,20,.03); --glass-hi:rgba(12,12,20,.09); --glass-strong:rgba(12,12,20,.07); --shadow:rgba(30,30,70,.10); --nav-bg:rgba(246,246,250,.9); --sel:rgba(75,76,214,.18); --brand-mint:#4b4cd6; --brand-mint-soft:rgba(75,76,214,.10); --brand-mint-line:rgba(75,76,214,.28); --brand-amber:#6a4fcf; --brand-amber-soft:rgba(106,79,207,.10); --brand-amber-line:rgba(106,79,207,.28); --news-body:#2b2b3a; /* 12,9 : 1 */ --ink:12,12,20; --ink-lift:.2; --shade:12,12,20; --shade-k:.14; --paper:#ffffff; --paper-2:#f0f0f6; --edge:#e2e2ec; --edge-strong:#c9c9d8; --tile:#ffffff; --link:#4446c9; /* 6,6 : 1 */ --focus:#4446c9; --accent:#8b8cfe; --accent-ink:#4446c9; --accent-soft:rgba(99,100,230,.10); --accent-line:rgba(75,76,214,.30); --acc-rgb:99,100,230; --lav-ink:#6a4fcf; --lav-rgb:124,98,224; --ok-rgb:22,163,74; --ok-ink:#166534; --warn-rgb:217,119,6; --warn-ink:#92400e; --bad-rgb:220,38,38; --bad-ink:#b91c1c; --orange-rgb:234,88,12; --orange-ink:#9a3412; --wa-ink:#0b7a3e; --f-paper:#ffffff; --f-paper2:#f1f1f7; --f-edge:#dcdce7; --f-line:#e7e7ef; --f-line2:#c3c3d1; --f-ink:#1a1a26; --f-mute:#646478; --f-shadow:rgba(40,40,100,.09); } /* ── Kategorien: --cat = Fläche (leuchtend), --cat-ink = Schrift ───────── */ [data-cat="dsgvo"] {--cat:#fb7185;--cat-ink:#fda4af} [data-cat="technik"] {--cat:#8b8cfe;--cat-ink:#a5a6ff} [data-cat="automatisierung"]{--cat:#38bdf8;--cat-ink:#7dd3fc} [data-cat="seo"] {--cat:#fbbf24;--cat-ink:#fcd34d} [data-cat="strategie"] {--cat:#c0b4ff;--cat-ink:#c0b4ff} :root[data-theme="light"] [data-cat="dsgvo"] {--cat-ink:#be123c} :root[data-theme="light"] [data-cat="technik"] {--cat-ink:#4446c9} :root[data-theme="light"] [data-cat="automatisierung"]{--cat-ink:#075985} :root[data-theme="light"] [data-cat="seo"] {--cat-ink:#92400e} :root[data-theme="light"] [data-cat="strategie"] {--cat-ink:#6a4fcf} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ── Rahmen aus layout.css im hellen Modus ─────────────────────────────── */ /* Logo ist ein weißer Schriftzug → umkehren. Menüfläche hell. Eigene Wortmarken im Footer dunkel. Die Original-Badges (ProvenExpert, IONOS) bleiben unverändert. */ :root[data-theme="light"] .n-logo img{filter:invert(1)} :root[data-theme="light"] .n-mob{background:rgba(246,246,250,.97)} :root[data-theme="light"] .n-mob .mob-cta{color:#fff} :root[data-theme="light"] nav.scrolled{background:rgba(246,246,250,.92);box-shadow:0 1px 0 var(--edge)} :root[data-theme="light"] .n-cta:not([aria-current="page"]){color:var(--text);background:rgba(12,12,20,.05);box-shadow:inset 0 0 0 1px rgba(12,12,20,.14)} :root[data-theme="light"] .btn-secondary{color:var(--text);background:rgba(12,12,20,.04);box-shadow:inset 0 0 0 1px rgba(12,12,20,.16)} :root[data-theme="light"] .btn-secondary:hover{background:var(--brand-mint-soft);box-shadow:inset 0 0 0 1px var(--brand-mint-line)} :root[data-theme="light"] .sgm [fill="#fff"]{fill:#0c0c14} :root[data-theme="light"] .sgm [fill-opacity=".55"]{fill-opacity:.75} :root[data-theme="light"] .sgm [stroke="#fff"]{stroke:#0c0c14} :root[data-theme="light"] .sgm [fill="#c0b4ff"]{fill:#6a4fcf} :root[data-theme="light"] .sgm [fill="#8b8cfe"]{fill:#4b4cd6} :root[data-theme="light"] .sgm [stroke="#8b8cfe"]{stroke:#4b4cd6} /* ── Hell/Dunkel-Umschalter ────────────────────────────────────────────── Sitzt im Fluss der Kopfzeile direkt rechts neben „Kennenlerngespräch“ (früher absolut im Seitenrand; seit dem 1180er-Raster lag er über dem Knopf): ab 1181 px Schieberegler 66 px 769–1180 px runder 28-px-Knopf bis 768 px neben dem Menü-Knopf */ .theme-toggle{position:relative;display:inline-flex;align-items:center;justify-content:space-between;flex-shrink:0;width:66px;height:36px;padding:0 9px;border-radius:999px;border:1px solid var(--edge-strong);background:var(--paper-2);color:var(--text3);cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transition:border-color .2s var(--ease)} .theme-toggle:hover{border-color:var(--accent)} .theme-toggle svg{position:relative;z-index:1;width:16px;height:16px;transition:color .25s var(--ease)} .theme-toggle .tt-knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .28s var(--ease),background .28s var(--ease)} .theme-toggle .tt-moon{color:var(--on-accent)} :root[data-theme="light"] .theme-toggle .tt-knob{transform:translateX(30px);background:#4b4cd6;box-shadow:0 1px 4px rgba(40,40,120,.3)} :root[data-theme="light"] .theme-toggle .tt-moon{color:var(--text3)} :root[data-theme="light"] .theme-toggle .tt-sun{color:#fff} @media(min-width:769px){ nav .n-links{margin-left:auto} .theme-toggle{position:relative;margin:0 0 0 14px} } @media(min-width:769px) and (max-width:1180px){ .theme-toggle{justify-content:center;width:28px;height:28px;margin-left:10px;padding:0} .theme-toggle .tt-knob,.theme-toggle .tt-sun{display:none} .theme-toggle svg{width:15px;height:15px} .theme-toggle .tt-moon{color:var(--text)} :root[data-theme="light"] .theme-toggle .tt-moon{display:none} :root[data-theme="light"] .theme-toggle .tt-sun{display:block;color:var(--text)} } @media(max-width:768px){.theme-toggle{margin-left:auto;margin-right:6px}} /* ── Artikel: Seitengerüst (Abstand oben wie .u-kopf der Unterseiten) ──── */ .news-main{padding-top:128px} @media(max-width:768px){.news-main{padding-top:108px}} .news-shell{max-width:var(--max);margin:0 auto;padding-inline:5%} /* ── Artikelkopf ───────────────────────────────────────────────────────── */ .back-link{display:inline-flex;align-items:center;gap:6px;margin:0 0 1.6rem;font-size:var(--fs-sm);color:var(--text3);text-decoration:none;transition:color .2s} .news-shell>.back-link{margin-left:max(0px,calc((100% - var(--article-max)) / 2))} .back-link:hover{color:var(--text)} .article-wrap{max-width:var(--article-max);margin:0 auto} .article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1rem;margin-bottom:1.1rem;font-size:var(--fs-sm);color:var(--text3)} .article-cat{--cat:var(--accent);--cat-ink:var(--accent-ink)} .article-cat{display:inline-flex;align-items:center;gap:.45rem;padding:4px 12px 4px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--cat-ink);background:color-mix(in srgb,var(--cat) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat) 32%,transparent)} .article-cat::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cat)} .article-title{margin-bottom:1.2rem;font-size:var(--fs-2xl);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--text);text-wrap:balance} /* Am Desktop darf die Überschrift rechts über die Lesespalte hinaus: drei statt vier Zeilen */ @media(min-width:1024px){.article-title{margin-right:-5rem}} .article-lead{margin-bottom:2.2rem;font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--text2);text-wrap:pretty} .article-rule{border:none;border-top:1px solid var(--edge);margin:0 0 2.5rem} /* ── Fließtext ─────────────────────────────────────────────────────────── */ /* :where() hält die Spezifität niedrig (Mockup-Regeln der Artikel gewinnen weiter) und verhindert, dass die Kacheln der Übersicht – ebenfalls
– mitgestylt werden. */ :where(.article-wrap) article{font-size:1.0625rem;line-height:1.75;color:var(--news-body)} @media(max-width:600px){:where(.article-wrap) article p,:where(.article-wrap) article li{-webkit-hyphens:auto;hyphens:auto}} :where(.article-wrap) article p{margin-bottom:1.3em} :where(.article-wrap) article h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:var(--fw-semibold);color:var(--text);letter-spacing:var(--ls-tight);line-height:var(--lh-tight);margin:2.2em 0 .7em;text-wrap:balance;scroll-margin-top:96px} :where(.article-wrap) article h3{font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--text);letter-spacing:-.015em;line-height:var(--lh-snug);margin:1.8em 0 .5em;scroll-margin-top:96px} :where(.article-wrap) article h2+h3{margin-top:1em} :where(.article-wrap) article strong{color:var(--text);font-weight:var(--fw-semibold)} :where(.article-wrap) article a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} :where(.article-wrap) article a:hover{text-decoration-thickness:2px} :where(.article-wrap) article ul,:where(.article-wrap) article ol{margin:0 0 1.3em 1.25em;padding:0} :where(.article-wrap) article li{margin-bottom:.5em;padding-left:.2em} :where(.article-wrap) article li::marker{color:var(--accent-ink)} :where(.article-wrap) article code{font-size:.86em;padding:2px 6px;border-radius:6px;background:rgba(var(--ink),.08);color:var(--text);overflow-wrap:anywhere} :where(.article-wrap) article blockquote{margin:1.8em 0;padding:1.15em 1.4em;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 14px 14px 0;font-size:.97em;line-height:1.7;color:var(--news-body)} :where(.article-wrap) article table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:var(--fs-sm)} @media(max-width:600px){:where(.article-wrap) article table{display:block;overflow-x:auto}} :where(.article-wrap) article th,:where(.article-wrap) article td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--edge);vertical-align:top} :where(.article-wrap) article th{color:var(--text);font-weight:var(--fw-semibold);background:rgba(var(--ink),.04)} .code-block{margin:1.4rem 0;padding:1rem 1.3rem;border-radius:12px;background:rgba(var(--ink),.04);box-shadow:inset 0 0 0 1px var(--edge);color:var(--text2);font-size:.8rem;line-height:1.6;overflow-x:auto} :where(.article-wrap) article p.tpl-label{margin:1.9em 0 .5em;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text)} .tpl-label+blockquote{margin-top:.4em} /* ── Inhaltsverzeichnis ────────────────────────────────────────────────── */ .toc{margin:2rem 0 2.8rem;padding:1.3rem 1.6rem 1.15rem;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge)} .toc-label{margin-bottom:.6rem;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text)} .toc ol{list-style:none;counter-reset:toc;margin:0;padding:0} .toc li{counter-increment:toc;display:grid;grid-template-columns:2rem 1fr;align-items:baseline;padding:.3rem 0;font-size:var(--fs-sm);line-height:1.45} .toc li::before{content:counter(toc,decimal-leading-zero);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--accent-ink);font-variant-numeric:tabular-nums} .toc a{color:var(--text2);text-decoration:none} .toc a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px} /* ── Schritt-Karten ────────────────────────────────────────────────────── */ .step-card{position:relative;margin:1.2em 0 1.8em;padding:1.35rem 1.6rem 1.35rem 5rem;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge)} .step-num{position:absolute;left:1.4rem;top:1.35rem;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-base);font-weight:var(--fw-bold);box-shadow:inset 0 0 0 1px var(--accent-line)} .step-card h3{margin-top:0 !important;margin-bottom:.4em} .step-card p:last-child{margin-bottom:0} @media(max-width:600px){.step-card{padding:1.2rem}.step-num{position:static;margin-bottom:.75rem}} /* ── Stat-Reihe ────────────────────────────────────────────────────────── */ .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.6rem 0 2.2rem} .stat-cell{padding:1.25rem 1.15rem 1.15rem;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge)} .stat-num{margin-bottom:.5rem;font-size:clamp(1.75rem,3vw,2rem);font-weight:var(--fw-bold);color:var(--accent-ink);letter-spacing:-.035em;line-height:1} .stat-lbl{font-size:var(--fs-sm);color:var(--text2);line-height:1.45} @media(max-width:600px){ .stat-row{grid-template-columns:1fr} /* Zahlenspalte wächst mit, damit Spannen wie „6–16k €“ nicht umbrechen */ .stat-cell{display:grid;grid-template-columns:minmax(4.5rem,auto) 1fr;gap:1rem;align-items:center;padding:1rem 1.1rem} .stat-num{margin:0;font-size:1.7rem;white-space:nowrap} } /* ── Vergleichskarten (richtig / falsch) ───────────────────────────────── */ .verdict{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1.4rem 0 2rem} .verdict>div{padding:1.3rem 1.5rem;border-radius:16px;font-size:var(--fs-sm);line-height:1.6;color:var(--news-body)} .verdict .vno{background:rgba(var(--bad-rgb),.07);box-shadow:inset 0 0 0 1px rgba(var(--bad-rgb),.3)} .verdict .vyes{background:rgba(var(--ok-rgb),.07);box-shadow:inset 0 0 0 1px rgba(var(--ok-rgb),.3)} .verdict h3,.verdict h4{display:flex;align-items:center;gap:.45rem;margin:0 0 .6rem !important;font-size:var(--fs-base);font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none} .verdict .vno h3,.verdict .vno h4{color:var(--bad-ink)} .verdict .vyes h3,.verdict .vyes h4{color:var(--ok-ink)} .verdict ul{margin:.4rem 0 0 1.1rem;padding:0;font-size:var(--fs-sm)} .verdict li{margin-bottom:.45rem} .verdict li:last-child{margin-bottom:0} /* ── Icon-Karten ───────────────────────────────────────────────────────── */ .touch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.6rem 0 2rem} @media(max-width:700px){.touch-grid{grid-template-columns:1fr}} .touch-card{padding:1.3rem;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge)} .touch-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:.8rem;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink)} .touch-card h3,.touch-card h4{margin:0 0 .35rem !important;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text)} .touch-card p{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--text2)} /* ── Mockup-Rahmen ─────────────────────────────────────────────────────── */ .nv-mock{position:relative;margin:2rem 0;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge),0 30px 60px -32px rgba(0,0,0,.6);overflow:hidden} :root[data-theme="light"] .nv-mock{box-shadow:inset 0 0 0 1px var(--edge),0 24px 48px -30px rgba(30,30,80,.28)} .nv-mock-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--edge)} .nv-mock-title{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--text2)} .nv-mock-title::before{content:'';flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--accent)} .nv-mock-pill{padding:3px 10px;border-radius:999px;background:rgba(var(--ink),.05);box-shadow:inset 0 0 0 1px var(--edge);font-size:.72rem;font-weight:var(--fw-semibold);color:var(--text2);white-space:nowrap} .nv-mock-body{padding:1.3rem 1.2rem} /* ── Teilen / Hilfreich ────────────────────────────────────────────────── */ .share-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2.5rem;padding:1.4rem 0;border-top:1px solid var(--edge)} .share-btns{display:flex;align-items:center;gap:.5rem} .share-label{margin-right:.3rem;font-size:var(--fs-sm);color:var(--text3)} .share-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:11px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge);color:var(--text2);font:inherit;font-size:.74rem;text-decoration:none;cursor:pointer;transition:color .2s,box-shadow .2s} .share-btn:hover{color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)} .like-btn{display:flex;align-items:center;gap:7px;padding:9px 18px;border:none;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge);color:var(--text2);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;transition:color .2s,background .2s,box-shadow .2s} .like-btn:hover,.like-btn.liked{color:var(--accent-ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)} /* ── Abschluss: Block kommt aus layout.css, hier nur der Referenz-Hinweis ─ */ .cta p.cta-case{margin:-1.2rem auto 1.8rem;font-size:var(--fs-sm);color:var(--text3)} .cta-case a{color:var(--link);text-decoration:underline;text-underline-offset:3px}