/* ============================================================ TRAUERFALLKLARTEXT · tk.css (Marke + Layout, Sonde) Kopf = designer-Token aus _design/tk-tokens.css (Messwerte als Kommentar, 12.07.2026). Komponenten geforkt aus pk.css/article.css, angepasst nach Design-Spec (Register eine Stufe dunkler/leiser). Nuancen-Umschalter (nur Vorschau): data-nuance am . (kein Attribut) = A "Stiller Klartext"/Tanne [Default, empfohlen] data-nuance="warme-erde" = B "Warme Erde" data-nuance="klon" = C "Klon pur" Schriften: System-Stack + Georgia, NULL Web-Font-Request (G6). ============================================================ */ :root{ /* ---------- FAMILIE (identisch pk.css) ---------- */ --bg:#fbf7f0; /* warmes Papier-Off-White */ --bg-soft:#f3ede2; --surface:#ffffff; --ink:#1f3a4d; /* Titel/starke Texte · 11,11:1 auf bg = AAA */ --ink-soft:#46606f; /* Sekundaertext, Meta auf Washes · 6,22:1 auf bg = AA */ --muted:#637484; /* Fussnoten NUR auf bg/surface · 4,51:1. Nie auf Washes. */ --line:#e7ded0; --line-soft:#efe8db; --amber-wash:#fbf3e3; /* Fristen-/Hinweisflaeche · Tinte darauf 10,75:1 AAA */ --amber-line:#e8d9b8; --sand:#c9a96a; /* Licht-/Wuerde-Akzent · nur Linien/kleine Marker, nie Text/Flaeche */ --maxw:980px; --maxw-read:720px; /* ---------- Trauer-Register (tk-spezifisch) ---------- */ --body:#3c5060; /* Fliesstext-Tinte, AAA auf allen vier Flaechen (7,84/7,59/7,23/8,37) */ --frist-icon:#8a6220; /* Uhr-Icon Fristen-Box · 4,95:1 auf amber-wash */ --error-ink:#8f3a30; /* Formfehler · 6,41:1 auf error-wash = AA */ --error-wash:#fbeae8; --error-line:#f0cbc5; /* ---------- AKZENT-FAMILIE · A1 "Tanne" (Default) ---------- */ --accent:#2e5f51; /* Buttons/aktive Flaechen · Weiss darauf 7,31:1 = AAA */ --accent-deep:#23493e; /* Links, Hover, Akzentwort · 9,39:1 auf bg = AAA */ --accent-wash:#e9f0eb; --accent-line:#cfdfd6; --focus:#23493e; /* ---------- Typo-Leiter (fixe Stufen) ---------- */ --font-serif:Georgia,"Times New Roman",serif; --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --fs-h1:clamp(28px,4.4vw,40px); --fs-h2:clamp(22px,3vw,28px); --fs-h3:19px; --fs-lead:18.5px; --fs-body:17.5px; --fs-ui:16.5px; --fs-frist:16px; --fs-meta:14.5px; --fs-micro:13.5px; --lh-body:1.7; /* ---------- Abstaende (8er-Raster; Sektionen x1,25) ---------- */ --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px; --space-section:clamp(56px,8vw,80px); /* ---------- Form, Schatten, Bewegung ---------- */ --r-btn:12px; --r-box:14px; --r-card:18px; --shadow-soft:0 10px 30px -24px rgba(31,58,77,.35); --btn-minh:48px; --dur:140ms; /* Transitions NUR opacity/background/color, NIE transform */ } /* ---------- Nuance B "Warme Erde" (data-nuance="warme-erde") ---------- */ :root[data-nuance="warme-erde"]{ --bg:#f4efe8; --bg-soft:#ece4d8; --surface:#fffdf9; --ink:#2b2b33; /* 12,27:1 auf bg = AAA */ --body:#4b4b55; /* 7,53:1 auf bg = AAA */ --ink-soft:#4b4b55; --muted:#64636c; /* 5,18:1 auf bg = AA */ --line:#e2d8c8; --line-soft:#eae1d3; --amber-wash:#f3e3d8; /* Terrakotta-Wash · Tinte 11,22:1 AAA */ --amber-line:#e2c9b6; --frist-icon:#9a5a3c; /* 4,30:1 auf Terra-Wash */ --accent:#2e5f51; --accent-deep:#23493e; /* Interaktion bleibt Tanne */ --accent-wash:#e9efe9; --accent-line:#cfdcd2; --focus:#23493e; } /* ---------- Nuance C "Klon pur" (data-nuance="klon") ---------- pk.css-Ergonomie zurueck (dichter, lebhafter, Pill-Energie), Farbe Tanne. Bewusst NICHT die A-Feinheiten: kleinere Tinte (AA), pk-Button-Hover, Pill-Eyebrow. Zeigt dem CEO den Unterschied A vs. C. */ :root[data-nuance="klon"]{ --body:#46606f; /* pk-Tinte, nur AA */ --fs-body:16.5px; --lh-body:1.65; --btn-minh:44px; --dur:120ms; } *{box-sizing:border-box;margin:0;padding:0} .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} html{scroll-behavior:smooth} body{ font-family:var(--font-sans); background:var(--bg); color:var(--body); font-size:var(--fs-body); line-height:var(--lh-body); min-height:100vh; display:flex;flex-direction:column; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:var(--accent-deep)} img{max-width:100%;height:auto} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px} /* ---------- Kopf / Wortmarke + Navigation ---------- */ .site-head{position:relative;padding:20px 0;border-bottom:1px solid var(--line-soft);background:var(--bg)} .head-inner{display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:flex;align-items:center;gap:12px;font-family:var(--font-serif);font-size:22px;color:var(--ink);letter-spacing:.2px;text-decoration:none;white-space:nowrap} .brand .mark{width:34px;height:34px;flex:0 0 auto;color:var(--accent-deep)} .brand b{font-weight:400} .brand .accent{color:var(--accent-deep);font-weight:700} .nav{display:flex;align-items:center;gap:26px} .nav a{font-size:15.5px;color:var(--ink-soft);text-decoration:none;font-weight:500;padding:6px 2px;border-bottom:2px solid transparent;transition:color var(--dur) ease} .nav a:hover{color:var(--accent-deep)} .nav a[aria-current="page"]{color:var(--accent-deep);border-bottom-color:var(--accent)} .nav-toggle{display:none} /* ---------- Buttons / CTA (Zustaende nur ueber Farbe) ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:var(--fs-ui);font-weight:600;line-height:1.2;min-height:var(--btn-minh);padding:13px 26px;border-radius:var(--r-btn);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease} .btn svg{width:18px;height:18px;flex:0 0 auto} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-deep)} .btn-ghost{background:var(--surface);color:var(--accent-deep);border-color:var(--line)} .btn-ghost:hover{border-color:var(--accent);background:var(--accent-wash)} .btn[aria-disabled="true"],.btn:disabled{background:var(--bg-soft);color:var(--muted);cursor:default;border-color:var(--line)} /* C "Klon pur": pk-Button-Energie zurueck (Hover-Anheben + Schatten) */ :root[data-nuance="klon"] .btn-primary{box-shadow:0 8px 20px -10px rgba(15,110,86,.6)} :root[data-nuance="klon"] .btn-primary:hover{transform:translateY(-1px)} /* stiller Sekundaer-Textlink (kein Button) */ .textlink{display:inline-block;font-size:var(--fs-ui);font-weight:600;color:var(--accent-deep);text-decoration:none;border-bottom:1px solid var(--accent-line);padding-bottom:1px;transition:border-color var(--dur) ease} .textlink:hover{border-bottom-color:var(--accent-deep)} /* ---------- Eyebrow (Hairline, KEIN Pill) ---------- */ .eyebrow{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--accent-deep);margin:0 0 16px} .eyebrow::before{content:"";width:26px;height:1px;background:var(--sand);flex:0 0 auto} /* C "Klon pur": Pill-Eyebrow (Aufforderungs-Energie) */ :root[data-nuance="klon"] .eyebrow{display:inline-flex;background:var(--accent-wash);color:var(--accent-deep);padding:5px 12px;border-radius:999px;letter-spacing:.6px} :root[data-nuance="klon"] .eyebrow::before{display:none} /* ---------- Hero ---------- */ .hero{padding:var(--space-section) 0 var(--s7)} .hero h1{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h1);line-height:1.18;letter-spacing:-.3px;color:var(--ink);margin:0 0 var(--s5);max-width:19ch} .hero .lead{font-size:var(--fs-lead);color:var(--body);line-height:1.65;margin:0 0 var(--s5);max-width:60ch} .hero .hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:var(--s5) 0 var(--s5)} .hero .hero-cta .btn{align-self:flex-start} .honesty{font-size:var(--fs-meta);color:var(--ink-soft);line-height:1.6;margin:0;max-width:64ch} .honesty strong{color:var(--ink);font-weight:600} .trust-rule{height:1px;background:var(--line);margin:var(--s5) 0;max-width:460px} .trustline{display:flex;flex-direction:column;gap:10px;margin:0} .trustline .ti{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-meta);color:var(--ink-soft);line-height:1.5} .trustline .ti svg{width:18px;height:18px;flex:0 0 auto;color:var(--accent);margin-top:1px} @media (min-width:721px){ .trustline{flex-direction:row;flex-wrap:wrap;gap:22px} } /* ---------- Weiche "Wo stehen Sie gerade?" (K6) ---------- */ .section{padding:var(--s7) 0} .section > .container > h2,.section-h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h2);line-height:1.28;color:var(--ink);margin:0 0 8px} .section .lead{font-size:var(--fs-body);color:var(--body);margin:0 0 var(--s5);max-width:64ch} .weiche{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:var(--s5) 0 0} @media (max-width:680px){ .weiche{grid-template-columns:1fr} } .wcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 22px;text-decoration:none;color:inherit;min-height:48px;transition:border-color var(--dur) ease,background var(--dur) ease} .wcard:hover{border-color:var(--accent-line);background:var(--accent-wash)} .wcard .wc-k{font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;color:var(--accent-deep);margin:0 0 8px} .wcard h3{font-family:var(--font-serif);font-weight:400;font-size:19px;color:var(--ink);margin:0 0 6px;line-height:1.3} .wcard p{font-size:var(--fs-meta);color:var(--body);margin:0;line-height:1.55} /* ---------- Ratgeber-Liste (Home + /ratgeber) ---------- */ .rlist{list-style:none;padding:0;margin:var(--s5) 0 0} .rlist li{border-top:1px solid var(--line-soft)} .rlist li:last-child{border-bottom:1px solid var(--line-soft)} .rlist a{display:block;padding:18px 4px;text-decoration:none;color:inherit;transition:background var(--dur) ease} .rlist a:hover{background:var(--bg-soft)} .rlist a:hover .rl-t{color:var(--accent-deep)} .rlist .rl-t{display:block;font-family:var(--font-serif);font-size:19px;color:var(--ink);margin:0 0 3px} .rlist .rl-d{display:block;font-size:var(--fs-meta);color:var(--body);line-height:1.55} /* ---------- "Wer wir sind" Kurzzeile ---------- */ .whois{background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:24px 26px;max-width:72ch} .whois p{font-size:var(--fs-body);color:var(--body);line-height:1.65;margin:0 0 10px} .whois a{color:var(--accent-deep)} /* ============================================================ ARTIKEL (Ratgeber) ============================================================ */ .article{max-width:var(--maxw-read);margin:0 auto;padding:12px 22px 8px} .breadcrumb{font-size:13.5px;color:var(--muted);margin:22px 0 6px} .breadcrumb a{color:var(--ink-soft);text-decoration:none} .breadcrumb a:hover{color:var(--accent-deep)} .article .eyebrow{margin-top:10px} .article h1{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h1);line-height:1.18;letter-spacing:-.3px;color:var(--ink);margin:6px 0 var(--s4)} .article h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h2);line-height:1.28;color:var(--ink);margin:var(--s7) 0 var(--s3);scroll-margin-top:84px} .article h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin:var(--s6) 0 var(--s2)} .article p{font-size:var(--fs-body);color:var(--body);margin:0 0 var(--s4);line-height:var(--lh-body)} .article a{color:var(--accent-deep)} .article strong{color:var(--ink);font-weight:600} .article ul,.article ol{margin:0 0 var(--s4);padding-left:20px} .article li{font-size:var(--fs-body);color:var(--body);margin:0 0 9px;line-height:1.6} .article li strong{color:var(--ink)} .article .intro{font-size:var(--fs-lead);color:var(--body);line-height:1.65} /* Haus-Satz (Prosa, Pillar-Einstieg bewusst ohne Box-Optik der Direktantwort) */ .hausatz{background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:var(--r-box);padding:18px 22px;margin:var(--s5) 0;font-size:var(--fs-body);color:var(--ink);line-height:1.65} /* Direktantwort-Box (K2): accent-wash, Tinte, erste 150 Woerter (AEO) */ .direktantwort{background:var(--accent-wash);border:1px solid var(--accent-line);border-left:4px solid var(--accent);border-radius:var(--r-box);padding:18px 22px;margin:0 0 var(--s5);font-size:17px;color:var(--ink);line-height:1.6} .direktantwort strong{color:var(--accent-deep)} /* ---------- Byline (Baustein A, K1) ---------- */ .byline{display:flex;align-items:flex-start;gap:13px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:14px 2px;margin:0 0 var(--s6);font-size:var(--fs-meta);color:var(--ink-soft);line-height:1.5} .byline .b-ico{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--accent-wash);display:flex;align-items:center;justify-content:center} .byline .b-ico svg{width:20px;height:20px;color:var(--accent-deep)} .byline .b-main{flex:1} .byline .b-name{color:var(--ink);font-weight:600} .byline .b-meta{color:var(--muted)} .byline .b-chip{display:inline-flex;align-items:center;gap:6px;color:var(--accent-deep);font-weight:600} .byline .b-chip svg{width:15px;height:15px} .byline a{color:var(--accent-deep)} /* ---------- Fristen-Box (Baustein C, K3, Signatur) ---------- */ .frist{background:var(--amber-wash);border:1px solid var(--amber-line);border-left:4px solid var(--sand);border-radius:var(--r-box);padding:22px 24px;margin:var(--s5) 0;break-inside:avoid} .frist .f-head{display:flex;align-items:center;gap:10px;margin:0 0 10px} .frist .f-head svg{width:20px;height:20px;flex:0 0 auto;color:var(--frist-icon)} .frist .f-head .f-title{font-weight:700;font-size:17px;color:var(--ink);margin:0;line-height:1.35} .frist p{font-size:var(--fs-frist);color:var(--body);margin:0 0 10px;line-height:1.6} .frist p:last-child{margin-bottom:0} .frist .f-wwb{background:var(--surface);border:1px solid var(--amber-line);border-radius:10px;padding:12px 14px;margin:0 0 10px;font-size:var(--fs-frist);color:var(--body);line-height:1.65} .frist .f-wwb strong{color:var(--ink)} .frist .f-law{font-size:var(--fs-meta);color:var(--ink-soft);margin:0 0 8px} .frist .f-disc{font-size:var(--fs-meta);color:var(--ink-soft);font-style:italic;line-height:1.55;margin:0} .frist .f-note{font-weight:600;color:var(--ink)} /* ---------- Beispiel-Kasten (Zitat-Optik, NICHT Fristen-Box) ---------- */ .beispiel{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-box);padding:20px 22px;margin:var(--s5) 0} .beispiel .b-head{display:flex;align-items:center;gap:10px;margin:0 0 8px} .beispiel .b-head svg{width:20px;height:20px;flex:0 0 auto;color:var(--accent-deep)} .beispiel .b-head .b-title{font-weight:700;font-size:16px;color:var(--ink)} .beispiel p{font-size:16px;color:var(--body);margin:0 0 8px;line-height:1.6} .beispiel .b-law{font-size:var(--fs-meta);color:var(--ink-soft);margin:0 0 6px} .beispiel .b-disc{font-size:var(--fs-meta);color:var(--ink-soft);font-style:italic;margin:0;line-height:1.55} .beispiel strong{color:var(--ink)} /* ---------- Tabellen (Desktop) + K10 Mobil (gestapelte Karten) ---------- */ .table-wrap{margin:var(--s5) 0} table.tk{width:100%;border-collapse:collapse;font-size:15.5px} table.tk caption{caption-side:bottom;text-align:left;font-size:var(--fs-meta);color:var(--ink-soft);padding:10px 2px;line-height:1.5} table.tk th,table.tk td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line-soft);color:var(--body);vertical-align:top} table.tk thead th{background:var(--bg-soft);color:var(--ink);font-weight:600;font-size:14.5px;border-bottom:1px solid var(--line)} table.tk tbody tr:last-child td{border-bottom:0} table.tk td strong{color:var(--ink)} @media (max-width:640px){ table.tk thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} table.tk,table.tk tbody,table.tk tr,table.tk td{display:block;width:100%} table.tk tr{border:1px solid var(--line);border-radius:var(--r-box);padding:6px 14px;margin:0 0 12px;background:var(--surface)} table.tk td{border:0;border-bottom:1px solid var(--line-soft);padding:9px 0} table.tk tr td:last-child{border-bottom:0} table.tk td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);margin:0 0 2px} table.tk td:first-child{font-weight:600;color:var(--ink)} table.tk caption{display:block;padding:12px 2px 0} } /* ---------- Checklisten-Punkte (Cluster 3) ---------- */ .checklist{list-style:none;padding:0;margin:14px 0 18px} .checklist li{position:relative;padding:12px 12px 12px 44px;border:1px solid var(--line);border-radius:10px;margin:0 0 9px;background:var(--surface);font-size:var(--fs-body);color:var(--body);line-height:1.55} .checklist li::before{content:"";position:absolute;left:14px;top:14px;width:18px;height:18px;border:2px solid var(--accent-line);border-radius:5px;background:var(--surface)} .checklist li strong{color:var(--ink)} .zur-frist{background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:10px;padding:12px 15px;margin:6px 0 20px;font-size:var(--fs-meta);color:var(--ink-soft);line-height:1.6} .zur-frist strong{color:var(--ink)} /* Download-Zeile (K12, Cluster 3) */ .download-row{display:flex;align-items:center;gap:14px;background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:var(--r-box);padding:16px 20px;margin:var(--s5) 0} .download-row .dl-ico{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center} .download-row .dl-ico svg{width:22px;height:22px;color:var(--accent-deep)} .download-row .dl-main{flex:1;min-width:0} .download-row .dl-t{font-weight:600;color:var(--ink);font-size:16px;margin:0 0 2px} .download-row .dl-s{font-size:var(--fs-meta);color:var(--ink-soft);margin:0} .download-row .btn{flex:0 0 auto} @media (max-width:560px){ .download-row{flex-wrap:wrap} .download-row .btn{width:100%} } /* ---------- "Quellen und Vertrauen" (Baustein B, K8) ---------- */ .quellen{background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:var(--r-box);padding:20px 22px;margin:var(--s6) 0 var(--s5)} .quellen h2{font-family:var(--font-serif);font-weight:400;font-size:19px;color:var(--ink);margin:0 0 8px;padding:0} .quellen p{font-size:var(--fs-meta);color:var(--ink-soft);margin:0 0 8px;line-height:1.6} .quellen p:last-child{margin-bottom:0} .quellen strong{color:var(--ink)} /* ---------- "Wer hilft im Einzelfall?" (Baustein D, K7) ---------- */ .anlauf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:22px 24px;margin:var(--s6) 0} .anlauf h2{font-family:var(--font-serif);font-weight:400;font-size:20px;color:var(--ink);margin:0 0 6px;padding:0} .anlauf .a-lead{font-size:var(--fs-meta);color:var(--body);margin:0 0 12px} .anlauf ul{list-style:none;padding:0;margin:0} .anlauf li{position:relative;padding:9px 0 9px 24px;font-size:var(--fs-meta);color:var(--body);line-height:1.55;border-bottom:1px solid var(--line-soft)} .anlauf li:last-child{border-bottom:0} .anlauf li::before{content:"";position:absolute;left:2px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--accent)} .anlauf li strong{color:var(--ink)} /* ---------- FAQ (K9, offen sichtbar, keine Akkordeons) ---------- */ .faq{margin:16px 0 8px} .faq > h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h2);color:var(--ink);margin:var(--s7) 0 var(--s4)} .faq .qa{border-top:1px solid var(--line-soft);padding:18px 0} .faq .qa:last-child{border-bottom:1px solid var(--line-soft)} .faq .qa h3{font-size:17px;font-weight:700;color:var(--ink);margin:0 0 6px} .faq .qa p{font-size:var(--fs-body);color:var(--body);margin:0;line-height:var(--lh-body)} /* ---------- Weiterlesen ---------- */ .weiter{margin:var(--s6) 0 8px} .weiter h2{font-family:var(--font-serif);font-weight:400;font-size:21px;color:var(--ink);margin:0 0 var(--s3)} .weiter ul{list-style:none;padding:0;margin:0} .weiter li{border-top:1px solid var(--line-soft)} .weiter li:last-child{border-bottom:1px solid var(--line-soft)} .weiter a{display:flex;align-items:center;gap:10px;padding:14px 2px;font-size:16.5px;color:var(--accent-deep);text-decoration:none;font-weight:500;min-height:48px;transition:background var(--dur) ease} .weiter a:hover{background:var(--bg-soft)} .weiter a svg{width:16px;height:16px;flex:0 0 auto;opacity:.7} /* ---------- Fahrplan-Teaser (K4, Signatur) ---------- */ .wl-teaser{background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:var(--r-card);padding:26px 28px;margin:var(--s6) 0 8px} .wl-teaser .wl-k{font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;color:var(--accent-deep);margin:0 0 8px} .wl-teaser h3{font-family:var(--font-serif);font-weight:400;font-size:21px;color:var(--ink);margin:0 0 10px} .wl-teaser p{font-size:16px;color:var(--body);margin:0 0 12px;line-height:1.6;max-width:60ch} .wl-teaser .wl-truth{font-size:var(--fs-meta);color:var(--ink-soft);margin:0 0 16px;line-height:1.55} .wl-teaser .wl-truth strong{color:var(--ink)} /* ---------- Hinweis-Boxen ---------- */ .note{margin:var(--s5) 0;border-radius:var(--r-box);padding:18px 20px;display:flex;gap:13px;align-items:flex-start;font-size:var(--fs-meta);line-height:1.6} .note svg{width:21px;height:21px;flex:0 0 auto;margin-top:2px} .note-info{background:var(--bg-soft);border:1px solid var(--line-soft);color:var(--ink-soft)} .note-info svg{color:var(--ink-soft)} .note-info strong{color:var(--ink);font-weight:600} .note-accent{background:var(--accent-wash);border:1px solid var(--accent-line);color:var(--ink)} .note-accent svg{color:var(--accent-deep)} .note-accent strong{color:var(--accent-deep)} /* ============================================================ WARTELISTE-LANDINGPAGE (/fahrplan) + Zustandsseiten ============================================================ */ .wl-wrap{max-width:640px;margin:0 auto;padding:14px 22px 8px} .wl-hero{padding:var(--space-section) 0 var(--s3);text-align:center} .wl-hero h1{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h1);line-height:1.2;letter-spacing:-.3px;color:var(--ink);margin:0 auto var(--s4);max-width:20ch} .wl-hero .wl-sub{font-size:var(--fs-lead);color:var(--body);line-height:1.6;margin:0 auto;max-width:52ch} .wl-sec{margin:var(--s6) 0} .wl-sec h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h2);color:var(--ink);margin:0 0 10px} .wl-sec p{font-size:var(--fs-body);color:var(--body);line-height:var(--lh-body);margin:0 0 14px} .wl-sec ul{margin:0 0 14px;padding-left:0;list-style:none} .wl-sec ul li{position:relative;padding:11px 0 11px 30px;font-size:var(--fs-body);color:var(--body);line-height:1.6;border-bottom:1px solid var(--line-soft)} .wl-sec ul li:last-child{border-bottom:0} .wl-sec ul li::before{content:"";position:absolute;left:4px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--accent)} .wl-sec ul li strong{color:var(--ink)} .wl-datacard{background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:var(--r-card);padding:24px 26px;margin:var(--s6) 0} .wl-datacard h2{margin-top:0} .wl-price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 26px;margin:var(--s6) 0;font-size:var(--fs-body);color:var(--body);line-height:var(--lh-body)} .wl-price-card .wl-price-amount{font-family:var(--font-serif);color:var(--ink);font-weight:700} .wl-price-card strong{color:var(--ink)} /* Formular */ .wl-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 30px 26px;box-shadow:var(--shadow-soft);margin:var(--s6) 0 0} .wl-box .wl-icon{width:48px;height:48px;border-radius:13px;background:var(--accent-wash);display:flex;align-items:center;justify-content:center;margin-bottom:15px} .wl-box .wl-icon svg{width:25px;height:25px;color:var(--accent-deep)} .wl-box h2{font-family:var(--font-serif);font-weight:400;font-size:21px;line-height:1.3;color:var(--ink);margin:0 0 8px} .wl-box .wl-lead{font-size:var(--fs-meta);color:var(--body);line-height:1.6;margin:0 0 18px} .wl-form{display:flex;flex-direction:column;gap:16px} .wl-field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px} .wl-input{width:100%;box-sizing:border-box;font-family:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px 15px;min-height:48px;transition:border-color var(--dur) ease,box-shadow var(--dur) ease} .wl-input::placeholder{color:var(--muted)} .wl-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)} .wl-input[aria-invalid="true"]{border-color:var(--error-ink);box-shadow:0 0 0 3px var(--error-line)} .wl-consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--body);line-height:1.55;cursor:pointer;min-height:44px} .wl-consent input[type=checkbox]{flex:0 0 auto;width:24px;height:24px;margin-top:0;accent-color:var(--accent-deep);cursor:pointer} .wl-consent a{color:var(--accent-deep)} .wl-hint{font-size:var(--fs-micro);color:var(--muted);line-height:1.6;margin:2px 0 0} .wl-hint a{color:var(--accent-deep)} .wl-submit{width:100%;margin-top:2px} .wl-msg{font-size:15px;line-height:1.6;border-radius:11px;padding:14px 16px;margin:2px 0 0;display:flex;gap:10px;align-items:flex-start} .wl-msg svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px} .wl-msg[hidden]{display:none} .wl-msg.is-ok{background:var(--accent-wash);border:1px solid var(--accent-line);color:var(--ink)} .wl-msg.is-ok svg{color:var(--accent-deep)} .wl-msg.is-info{background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-soft)} .wl-msg.is-err{background:var(--error-wash);border:1px solid var(--error-line);color:var(--error-ink)} .wl-msg.is-err svg{color:var(--error-ink)} .wl-msg strong{font-weight:600} .wl-inline-err{font-size:var(--fs-meta);color:var(--error-ink);margin:6px 0 0;display:flex;gap:7px;align-items:center} .wl-inline-err[hidden]{display:none} .wl-inline-err svg{width:16px;height:16px;flex:0 0 auto} .wl-foottrust{font-size:var(--fs-meta);color:var(--muted);line-height:1.65;margin:var(--s6) 0 8px;text-align:center;max-width:60ch;margin-left:auto;margin-right:auto} .wl-foottrust a{color:var(--ink-soft)} /* Bestaetigungs-/Austragungs-Zustandskarte (Z1/Z2/Z3) */ .wl-state{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 30px;box-shadow:var(--shadow-soft);margin:var(--s6) 0 0;text-align:center} .wl-state .wl-icon{margin-left:auto;margin-right:auto} .wl-state h1,.wl-state h2{font-family:var(--font-serif);font-weight:400;font-size:23px;line-height:1.25;color:var(--ink);margin:0 0 10px} .wl-state p{font-size:var(--fs-body);color:var(--body);line-height:1.65;margin:0 0 12px} .wl-state .wl-addr{font-weight:600;color:var(--ink)} .wl-state a{color:var(--accent-deep)} /* ---------- Rechtstexte / Nebenseiten ---------- */ .legal{max-width:var(--maxw-read);margin:0 auto;padding:26px 22px 8px} .legal .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:34px 32px} .legal h1{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h1);margin:0 0 10px;color:var(--ink);line-height:1.2} .legal h2{font-size:17px;margin:var(--s5) 0 6px;color:var(--ink)} .legal h3{font-size:15.5px;margin:18px 0 4px;color:var(--ink)} .legal p{font-size:15.5px;color:var(--body);margin:0 0 8px;line-height:1.7} .legal ul{margin:0 0 12px;padding-left:20px} .legal li{font-size:15.5px;color:var(--body);margin:0 0 6px;line-height:1.6} .legal a{color:var(--accent-deep)} .legal small{color:var(--muted)} .legal .back{display:inline-flex;align-items:center;gap:7px;margin-top:26px;font-size:var(--fs-meta);text-decoration:none;color:var(--ink-soft)} .legal .back:hover{color:var(--accent-deep)} .legal .back svg{width:16px;height:16px} .legal .gap-flag{background:var(--amber-wash);border:1px solid var(--amber-line);border-radius:10px;padding:13px 16px;margin:14px 0;font-size:var(--fs-meta);color:var(--ink-soft);line-height:1.6} .legal .gap-flag strong{color:var(--ink)} /* ---------- Footer ---------- */ .site-foot{margin-top:auto;padding:var(--s7) 0 var(--s6)} .foot-rule{height:1px;background:var(--line);margin-bottom:22px} .foot-disc{font-size:var(--fs-meta);color:var(--ink-soft);line-height:1.65;max-width:84ch;margin:0 0 18px} .foot-disc strong{color:var(--ink);font-weight:600} .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap} .foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-size:16px;color:var(--ink)} .foot-brand .accent{color:var(--accent-deep);font-weight:700} .foot-links{font-size:14px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap} .foot-links a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)} .foot-links a:hover{color:var(--accent-deep)} .foot-stand{font-size:var(--fs-micro);color:var(--muted);margin:16px 0 0} /* ---------- Fokus (a11y) ---------- */ a:focus-visible,.btn:focus-visible,button:focus-visible,.nav-toggle:focus-visible,.wl-input:focus-visible,.wcard:focus-visible,.rlist a:focus-visible,.weiter a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px} /* ---------- Responsive Basis ---------- */ @media (max-width:760px){ .nav{gap:18px} .nav a{font-size:14.5px} .foot-inner{flex-direction:column;align-items:flex-start;gap:14px} } @media (max-width:639px){ .brand{font-size:20px} .nav-toggle{ display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 14px; -webkit-appearance:none;appearance:none;background:var(--surface);border:1px solid var(--line); border-radius:11px;color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;line-height:1; cursor:pointer;-webkit-tap-highlight-color:transparent; } .nav-toggle .nav-toggle-bars{position:relative;width:18px;height:13px;flex:0 0 auto} .nav-toggle .nav-toggle-bars span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--accent-deep);transition:transform var(--dur) ease,opacity var(--dur) ease,top var(--dur) ease} .nav-toggle .nav-toggle-bars span:nth-child(1){top:0} .nav-toggle .nav-toggle-bars span:nth-child(2){top:5.5px} .nav-toggle .nav-toggle-bars span:nth-child(3){top:11px} .nav{position:absolute;left:0;right:0;top:100%;z-index:40;flex-direction:column;align-items:stretch;gap:0; background:var(--surface);border-top:1px solid var(--line);box-shadow:0 18px 36px -22px rgba(31,58,77,.5); max-height:0;overflow:hidden;visibility:hidden;transition:max-height .22s ease} .nav a{font-size:16px;padding:15px 22px;border-bottom:1px solid var(--line-soft);border-left:3px solid transparent} .nav a:last-child{border-bottom:0} .nav a[aria-current="page"]{border-bottom-color:var(--line-soft);border-left-color:var(--accent)} .nav.is-open{max-height:75vh;visibility:visible;overflow:auto} .nav-toggle[aria-expanded="true"]{background:var(--accent-wash);border-color:var(--accent-line)} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){top:5.5px;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){top:5.5px;transform:rotate(-45deg)} .legal .card{padding:26px 20px} } @media (max-width:639px) and (prefers-reduced-motion:reduce){ .nav{transition:none} .nav-toggle .nav-toggle-bars span{transition:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important} } /* ============================================================ NUANCEN-UMSCHALTER + VORSCHAU-BANNER (nur Vorschau, per Worker) ============================================================ */ .tfk-preview-banner{background:var(--ink);color:#fff;font-size:13.5px;text-align:center;padding:9px 16px;line-height:1.5} .tfk-preview-banner strong{color:#fff} .nuance-switch{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px} .ns-fab{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:11px 17px;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.3px;cursor:pointer;box-shadow:0 14px 34px -14px rgba(31,58,77,.65)} .ns-fab .ns-dot{width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid #fff;flex:0 0 auto} .ns-fab .ns-caret{width:9px;height:9px;border-right:2px solid rgba(255,255,255,.8);border-bottom:2px solid rgba(255,255,255,.8);transform:rotate(-135deg);margin-left:1px} .ns-fab[aria-expanded="false"] .ns-caret{transform:rotate(45deg)} .ns-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);box-shadow:0 18px 44px -22px rgba(31,58,77,.55);padding:13px 15px;width:290px;max-width:92vw} .ns-panel[hidden]{display:none} .ns-panel .ns-title{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:0 0 9px} .ns-row{display:flex;gap:8px} .ns-row button{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 5px 8px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;color:var(--ink-soft);line-height:1.2;text-align:center} .ns-row button .sw{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.08)} .ns-row button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset} .ns-row .sw-a{background:#2e5f51} .ns-row .sw-b{background:#9a5a3c} .ns-row .sw-c{background:#2e5f51} .ns-panel .ns-hint{font-size:11px;color:var(--muted);margin:9px 0 0;line-height:1.5} @media print{ .nuance-switch,.tfk-preview-banner,.nav-toggle{display:none !important} } /* ---------- S2-Fahrplan-Vorschau (Bild-Asset + Pflicht-Label) ---------- */ .fp-preview{margin:var(--s6) 0} .fp-preview-label{display:flex;gap:13px;align-items:flex-start;background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:13px;padding:14px 17px;margin:0 0 16px} .fp-preview-label .pl-tag{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#fff;background:var(--accent-deep);border-radius:999px;padding:5px 11px;margin-top:1px} .fp-preview-label p{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0} .fp-preview-label b{font-weight:600} .fp-figure{margin:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-soft)} .fp-figure img{display:block;width:100%;height:auto} /* ---------- S1-Zeitachse (Medien-Baustein, zwei Fassungen) ---------- */ .tk-timeline{margin:var(--s6) 0;max-width:none} .tk-timeline .tl-kicker{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;color:var(--accent-deep);margin:0 0 6px} .tk-timeline .tl-kicker::before{content:"";width:26px;height:2px;background:var(--sand);border-radius:2px} .tk-timeline h3{font-family:var(--font-serif);font-weight:400;font-size:22px;color:var(--ink);margin:0 0 16px;line-height:1.25} .tk-timeline svg{width:100%;height:auto} .tk-timeline svg.tl-svg-h{display:block} .tk-timeline svg.tl-svg-v{display:none} .tk-timeline figcaption{margin:14px 2px 0;font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:80ch} .tk-timeline figcaption b{color:var(--ink);font-weight:600} .tk-timeline .tl-stand{margin-top:6px;font-size:13px;color:var(--muted)} /* im Artikel aus der Lesespalte ausbrechen (sonst zu schmal fuer die horizontale Fassung) */ .article > .tk-timeline{width:min(94vw,980px);margin-left:50%;transform:translateX(-50%)} @media (max-width:720px){ .tk-timeline svg.tl-svg-h{display:none} .tk-timeline svg.tl-svg-v{display:block} } /* ============================================================ DRUCK-STYLESHEET (kanonisch, aus _design/tk-print.css) "Druckstuck statt Webseite auf Papier": Marke sichtbar, editorial statt Box-Lawine, Umbruch-Disziplin, robust ohne Hintergrundgrafik. ============================================================ */ /* Bildschirm-Wache: Druck-Partials im normalen Web unsichtbar */ .print-head,.print-pagefoot{display:none} @media print{ /* ---------- 0 · Seite, Reset, Grundschrift ---------- */ @page{ size:A4; margin:16mm 20mm 18mm; } html{ scroll-behavior:auto; } body{ display:block; min-height:0; background:#fff; color:var(--body); font-size:10.5pt; line-height:1.55; -webkit-font-smoothing:auto; } p,li{ orphans:3; widows:3; } .site-head,.site-foot,.breadcrumb,.byline,.download-row,.wl-teaser,.weiter, .nuance-switch,.tfk-preview-banner,.nav-toggle,.no-print{ display:none !important; } .article{ max-width:none; padding:0; margin:0; } .article p{ max-width:150mm; } /* ---------- 1 · Druckkopf (Marke, Seite 1) ---------- */ .print-head{ display:flex; align-items:baseline; justify-content:space-between; gap:6mm; padding:0 0 3mm; margin:0 0 7mm; border-bottom:.75pt solid var(--sand); } .print-head .ph-brand{ font-family:var(--font-serif); font-size:13pt; color:var(--ink); letter-spacing:.2px; margin:0; } .print-head .ph-brand b{ font-weight:700; color:var(--accent-deep); } .print-head .ph-meta{ font-size:8.5pt; color:var(--ink-soft); margin:0; white-space:nowrap; } .print-head .ph-check{ color:var(--accent-deep); font-weight:700; } /* ---------- 2 · Marken-Abschlusszeile (statisch) ---------- */ .print-pagefoot{ display:block; margin:8mm 0 0; padding:3mm 0 0; border-top:.75pt solid var(--sand); font-size:8pt; color:var(--muted); text-align:center; letter-spacing:.2px; break-inside:avoid; page-break-inside:avoid; } /* ---------- 3 · Typografie ---------- */ .article h1{ font-size:19pt; line-height:1.22; letter-spacing:-.2px; color:var(--ink); margin:0 0 4mm; max-width:160mm; } .article .intro{ font-size:11pt; line-height:1.5; color:var(--body); margin:0 0 4mm; } .article h2{ font-size:13.5pt; line-height:1.25; color:var(--ink); margin:8mm 0 3mm; break-after:avoid; page-break-after:avoid; break-inside:avoid; } .article h3,.faq .qa h3{ font-size:11pt; color:var(--ink); margin:5mm 0 2mm; break-after:avoid; page-break-after:avoid; } .article p{ font-size:10.5pt; margin:0 0 3mm; line-height:1.55; } .article li{ font-size:10.5pt; line-height:1.5; } .article a{ color:var(--ink); text-decoration:none; } .article strong{ color:var(--ink); } .article :is(p,li) a[href^="/"]::after{ content:" (trauerfallklartext.de" attr(href) ")"; font-size:8.5pt; color:var(--muted); font-weight:400; } .article :is(p,li) a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8.5pt; color:var(--muted); font-weight:400; } .eyebrow{ font-size:8pt; letter-spacing:1.4px; margin:0 0 3mm; } .eyebrow::before{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } /* ---------- 4 · Phasen-Muster (section.phase) ---------- */ .article{ counter-reset:phase; } section.phase{ counter-increment:phase; } section.phase > h2::before{ content:"Phase " counter(phase); display:block; font-family:var(--font-sans); font-size:7.5pt; letter-spacing:1.6px; text-transform:uppercase; font-weight:700; color:var(--accent-deep); margin:0 0 1.6mm; } section.phase.print-sheet{ break-before:page; page-break-before:always; } section.phase.print-sheet:first-of-type{ break-before:auto; page-break-before:auto; } /* ---------- 5 · Checkliste: ankreuzbare Zeilen, Haarlinien ---------- */ .checklist{ margin:0 0 3mm; break-before:avoid; page-break-before:avoid; } .checklist li{ border:0; border-bottom:.75pt solid var(--line); border-radius:0; background:none; padding:2.8mm 0 2.8mm 9.5mm; margin:0; break-inside:avoid; page-break-inside:avoid; } .checklist li:first-child{ border-top:.75pt solid var(--line); } .checklist li::before{ left:0; top:3.2mm; width:4.6mm; height:4.6mm; border:1.3pt solid var(--accent); border-radius:1.2mm; background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact; } /* ---------- 6 · Fristen (Signatur, EINZIGE Farbflaeche) ---------- */ .zur-frist,.frist{ background:var(--amber-wash); border:.75pt solid var(--amber-line); border-left:2.5pt solid var(--sand); border-radius:2mm; -webkit-print-color-adjust:exact; print-color-adjust:exact; break-inside:avoid; page-break-inside:avoid; } .zur-frist{ padding:2.8mm 4mm; margin:2.5mm 0; font-size:9.5pt; line-height:1.5; color:var(--ink-soft); max-width:none; } .zur-frist + .zur-frist{ margin-top:0; } .checklist + .zur-frist{ break-before:avoid; page-break-before:avoid; margin-top:1.5mm; } .frist{ padding:4mm 5mm; margin:4mm 0; } .frist .f-head .f-title{ font-size:10.5pt; } .frist p{ font-size:9.5pt; line-height:1.5; } .frist .f-wwb{ border:.75pt solid var(--amber-line); border-radius:1.5mm; padding:2.5mm 3mm; font-size:9.5pt; } .frist .f-law,.frist .f-disc{ font-size:8.5pt; } /* ---------- 7 · Boxen editorial (Haarlinie statt Kasten) ---------- */ .direktantwort,.hausatz,.beispiel{ background:none; border:.75pt solid var(--line); border-left:2.5pt solid var(--accent); border-radius:2mm; padding:3.5mm 4.5mm; margin:0 0 5mm; font-size:10.5pt; line-height:1.5; break-inside:avoid; page-break-inside:avoid; } .anlauf{ background:none; border:0; border-top:.75pt solid var(--line); border-radius:0; padding:4mm 0 0; margin:7mm 0 0; } .anlauf h2{ font-size:13.5pt; margin:0 0 2mm; } .anlauf .a-lead{ font-size:9.5pt; margin:0 0 2.5mm; } .anlauf li{ font-size:9.5pt; line-height:1.5; padding:2.2mm 0 2.2mm 6mm; break-inside:avoid; page-break-inside:avoid; } .anlauf li::before{ top:4mm; width:1.8mm; height:1.8mm; left:.5mm; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .faq{ margin:6mm 0 0; } .faq > h2{ font-size:13.5pt; margin:7mm 0 2mm; break-after:avoid; page-break-after:avoid; } .faq .qa{ padding:3mm 0; break-inside:avoid; page-break-inside:avoid; } .faq .qa:last-child{ border-bottom:0; } .faq .qa p{ font-size:10pt; max-width:150mm; } .quellen{ background:none; border:0; border-top:.75pt solid var(--line); border-radius:0; padding:4mm 0 0; margin:7mm 0 0; break-inside:avoid; page-break-inside:avoid; } .quellen h2{ font-size:11.5pt; margin:0 0 2mm; } .quellen p{ font-size:9pt; line-height:1.55; color:var(--ink-soft); max-width:160mm; } /* ---------- 8 · Tabellen ---------- */ table.tk,table.tk *{ display:revert !important; } table.tk thead{ position:static !important; width:auto !important; height:auto !important; clip:auto !important; display:table-header-group !important; } table.tk td::before{ content:none !important; } table.tk{ font-size:9.5pt; } table.tk th,table.tk td{ padding:2.2mm 3mm; border-bottom:.6pt solid var(--line-soft); } table.tk thead th{ background:none; color:var(--ink); font-size:8.5pt; letter-spacing:.4px; text-transform:uppercase; border-bottom:1pt solid var(--ink-soft); } table.tk tr{ break-inside:avoid; page-break-inside:avoid; } table.tk caption{ font-size:8.5pt; } .table-wrap{ overflow:visible; margin:4mm 0; } /* ---------- 9 · Medien-Bausteine (S1-Zeitachse nicht mitdrucken) ---------- */ .tk-timeline{ display:none; } }