/* AskForDates – Ratgeber (Artikel + Übersichten, erzeugt von tools/build_site.py) im Designsystem „Sonnig“ (DESIGN.md). Tokens, Knöpfe, .fig, .row-link, Kopf und Fuß kommen aus site.css. Hier nur Ratgeber-Bausteine. Ruhige Leseseite: 68 Zeichen Zeilenlänge, viel Luft, Figtree. Farbe nur als Fläche, Figuren der Frag-Bande als Schmuck. */ .blog-page main{display:block;overflow-x:clip} /* ---------- Flächen je Funktion/Abschnitt (--fl Fläche, --fl-l helle Stufe für Kacheln, --mk Marker in der H1) ---------- */ .bg-sun{--fl:var(--sun);--fl-l:var(--sun-1);--mk:#fff} .hub-head.bg-sun h1 em{padding-bottom:.06em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C40 4 86 3.5 120 5.5s52 3 77-1' fill='none' stroke='%23ff6a3d' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% .26em no-repeat} .bg-sun-1{--fl:var(--sun-1);--fl-l:var(--sun-1);--mk:var(--sun)} .bg-coral{--fl:var(--coral-1);--fl-l:var(--coral-1);--mk:var(--sun)} .bg-pink{--fl:var(--pink-1);--fl-l:var(--pink-1);--mk:var(--sun)} .bg-sky{--fl:var(--sky-1);--fl-l:var(--sky-1);--mk:var(--sun)} .bg-mint{--fl:var(--mint-1);--fl-l:var(--mint-1);--mk:var(--sun)} .bg-plum{--fl:var(--plum-1);--fl-l:var(--plum-1);--mk:var(--sun)} .bg-blue{--fl:var(--blue);--fl-l:var(--blue-1);--mk:var(--sun)} .sec-sun{--art:var(--sun)}.sec-coral{--art:var(--coral-1)}.sec-pink{--art:var(--pink-1)}.sec-sky{--art:var(--sky-1)} /* ---------- Brotkrumen ---------- */ .crumbs{padding:8px 0 0;font-size:.88rem;font-weight:600;color:var(--ink-3)} .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none} .crumbs li{display:inline-flex;align-items:center;min-width:0} .crumbs li+li::before{content:"";flex:none;width:6px;height:6px;margin:0 12px 0 8px;border-top:1.8px solid var(--ink-3);border-right:1.8px solid var(--ink-3);transform:rotate(45deg)} .crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none} .crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);overflow-wrap:anywhere} /* ---------- Kopf eines Artikels ---------- */ .post-head{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(32px,5vw,72px);padding:clamp(12px,3vw,28px) 0 clamp(28px,4vw,44px)} .post-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;font:700 .92rem/1.2 var(--f-body);color:var(--ink-2)} .post-kicker .kick-fig{width:38px;height:38px;margin:-4px 0} .post-head h1,.hub-head h1{margin:14px 0 0;max-width:21ch;font:700 clamp(2.15rem,5vw,3.6rem)/1.06 var(--f-body);letter-spacing:-.035em;color:var(--ink);text-wrap:balance} /* Hervorhebung als Sonnen-Marker statt Kursiv oder Farbe */ .post-head h1 em,.hub-head h1 em{font-style:normal;padding:0 .08em;margin:0 -.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone; background:linear-gradient(transparent 60%,var(--mk,var(--sun)) 60%,var(--mk,var(--sun)) 90%,transparent 90%)} .post-lead{margin:18px 0 0;max-width:60ch;font-size:clamp(1.06rem,1.5vw,1.2rem);line-height:1.6;color:var(--ink-2);text-wrap:pretty} .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:20px 0 0;padding:0;list-style:none;font-size:.92rem;font-weight:600;color:var(--ink-3)} .post-meta li{display:inline-flex;align-items:center;gap:6px} .post-meta .ava{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:2px;border-radius:50%;background:var(--coral-1)} .post-meta .ava .fig{width:24px;height:24px} .post-meta strong{color:var(--ink);font-weight:700} .post-meta a,.author-name a{display:inline-block;padding:12px 8px;margin:-12px -8px;color:inherit;text-decoration:none} .post-meta a:hover strong,.author-name a:hover{text-decoration:underline;text-underline-offset:3px} /* Bühne rechts (nur Desktop): Figur des Abschnitts + Figur der beworbenen Funktion */ .post-art{display:none} @media (min-width:880px){ .post-head{grid-template-columns:minmax(0,1fr) 230px} .post-head-txt{grid-column:1;grid-row:1} .post-head .answer{grid-column:1;grid-row:2} .post-art{display:block;position:relative;grid-column:2;grid-row:1/span 2;align-self:start;margin-top:8px;height:300px;border-radius:var(--r);background:var(--art,var(--sun))} .post-art .art-a{position:absolute;left:44px;top:58px;width:150px;height:150px} .post-art .art-b{position:absolute;right:20px;bottom:22px;width:88px;height:88px} .post-art .art-k1{position:absolute;right:34px;top:34px} .post-art .art-k2{position:absolute;left:30px;bottom:36px;color:#fff} .sec-sun .post-art .art-k1{color:#fff} .art-pin{position:absolute;left:18px;top:18px;max-width:calc(100% - 36px);padding:8px 14px;border-radius:var(--pill);background:#fff;font-weight:700;font-size:.9rem;line-height:1.2;box-shadow:var(--s1); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .post-head .post-kicker .kick-fig{display:none} .post-head .post-kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral);flex:none} } /* Tablet quer (880 bis 1079 px): kleinere Bühne, damit rechts kein leerer Streifen bleibt */ @media (min-width:880px) and (max-width:1079px){ .post-art{height:250px} .post-art .art-a{left:32px;top:50px;width:120px;height:120px} .post-art .art-b{right:16px;bottom:18px;width:72px;height:72px} .post-art .art-k1{right:26px;top:26px} .post-art .art-k2{left:22px;bottom:28px} } @media (min-width:1080px){.post-head{grid-template-columns:minmax(0,1fr) 290px}} /* ---------- Kurz gesagt (Antwortbox) ---------- */ .answer{position:relative;margin:clamp(24px,4vw,36px) 0 0;max-width:780px;padding:clamp(20px,3.4vw,32px);border-radius:24px;background:var(--paper)} .answer-label{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 16px;flex-wrap:wrap} .answer h2{margin:0;font:700 clamp(1.25rem,2.4vw,1.55rem)/1.2 var(--f-body);letter-spacing:-.02em;color:var(--ink);text-wrap:balance} /* kleiner Klebezettel wie im Produkt */ .answer .note{flex:none;display:inline-block;padding:7px 12px 8px;border-radius:3px;background:var(--sun);font:700 1.2rem/1 var(--f-hand);color:var(--ink); transform:rotate(3deg);box-shadow:0 6px 10px -6px rgba(43,42,41,.45)} .answer ol{margin:16px 0 0;padding:0;list-style:none;counter-reset:a;display:grid;gap:12px} .answer li{counter-increment:a;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;font-size:1.04rem;line-height:1.5} .answer li::before{content:counter(a);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);font:800 1rem/1 var(--f-body);box-shadow:inset 0 0 0 2px var(--sun)} .answer li:first-child::before{background:var(--sun);box-shadow:none} .answer li > span{padding-top:4px} .answer li strong{color:var(--ink)} .answer li a{color:inherit;font-weight:700;text-decoration-color:var(--line-2);text-decoration-thickness:2px;text-underline-offset:3px} .answer li a:hover{text-decoration-color:var(--blue)} .answer p{margin:16px 0 0;color:var(--ink-2);font-size:.98rem} /* ---------- Raster: Text + Inhaltsverzeichnis ---------- */ .post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(32px,5vw,72px);padding-bottom:clamp(56px,8vw,96px)} .post-aside{min-width:0} @media (min-width:1080px){ .post-grid{grid-template-columns:minmax(0,1fr) 290px} .post-aside{grid-column:2;grid-row:1} .post-body{grid-column:1;grid-row:1} } .toc{margin:0 0 36px;border-radius:var(--r-sm);background:var(--paper)} .toc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 18px;cursor:pointer;list-style:none;font:800 .95rem/1 var(--f-body);color:var(--ink)} .toc summary::-webkit-details-marker{display:none} .toc summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:translateY(-3px) rotate(45deg);transition:transform var(--fast) var(--ease)} .toc[open] summary::after{transform:translateY(2px) rotate(225deg)} .toc ol{margin:0;padding:0 8px 12px;list-style:none} .toc ol ol{padding:0 0 6px 12px;margin:0 0 4px 14px;border-left:1.5px solid var(--line)} .toc a{display:flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:var(--r-xs);color:var(--ink-2);font-size:.93rem;font-weight:600;line-height:1.3;text-decoration:none;transition:background-color var(--fast),color var(--fast)} .toc > ol > li > a{color:var(--ink);font-weight:700} .toc a:hover{background:#fff;color:var(--ink)} .toc ol ol a{font-weight:500} @media (min-width:1080px){ .toc{position:sticky;top:calc(var(--nav-h) + 24px);max-height:calc(100vh - var(--nav-h) - 48px);overflow:auto;margin:0;background:none;scrollbar-width:thin} .toc summary{padding:6px 10px;font-size:.88rem;color:var(--ink-3)} .toc a:hover{background:var(--paper)} } @media (min-width:1080px) and (pointer:fine){.toc a{min-height:40px;padding:5px 10px}.toc ol ol a{font-size:.89rem}} /* Handy/Tablet: nur die Rubriken, sonst wird die Liste zu lang */ @media (max-width:1079px){ .toc ol ol{display:none} .toc > ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:0 6px} .toc > ol > li > a{font-size:.92rem} } /* ---------- Fließtext ---------- */ .prose{max-width:68ch;font-size:1.0625rem;line-height:1.7;color:var(--ink)} .prose > * + *{margin-top:1.1em} .prose p{margin-bottom:0;text-wrap:pretty} .prose h2{margin:clamp(56px,7vw,84px) 0 0;font:700 clamp(1.7rem,3.2vw,2.3rem)/1.12 var(--f-body);letter-spacing:-.03em;color:var(--ink);text-wrap:balance;scroll-margin-top:calc(var(--nav-h) + 20px)} .prose h2:first-child{margin-top:0} .prose h2 + *{margin-top:.75em} .prose h3{font:700 clamp(1.2rem,2vw,1.42rem)/1.25 var(--f-body);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;scroll-margin-top:calc(var(--nav-h) + 20px)} .prose h3 + *{margin-top:.6em} .prose a:not([class]){color:var(--blue-d);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px} .prose a:not([class]):hover{color:var(--blue);text-decoration-thickness:2.5px} .prose ul:not([class]){padding:0;list-style:none} .prose ul:not([class]) > li{position:relative;padding-left:1.5em} .prose ul:not([class]) > li::before{content:"";position:absolute;left:.3em;top:.66em;width:8px;height:8px;border-radius:50%;background:var(--coral)} .prose ol:not([class]){padding-left:1.5em} .prose ol:not([class]) > li::marker{font-weight:800;color:var(--ink-2)} .prose li + li{margin-top:.4em} .prose strong{font-weight:700} .prose blockquote:not(.sample blockquote){margin-inline:0;padding:4px 0 4px 18px;border-left:4px solid var(--sun);color:var(--ink-2)} .sec-intro{color:var(--ink-2)} .prose .margin-note{display:block;width:fit-content;margin-top:10px;padding:6px 12px;border-radius:3px;background:var(--sun-1);font:700 1.3rem/1.15 var(--f-hand);color:var(--ink);transform:rotate(-2deg)} @media (max-width:600px){.prose{font-size:1.04rem;line-height:1.66}} /* ---------- Eine Idee ---------- */ .idea{margin-top:clamp(36px,5vw,52px);padding-top:clamp(28px,4vw,40px);border-top:1.5px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 16px)} .prose h2 + .sec-intro + .idea,.prose h2 + .idea{border-top:0;padding-top:0} .prose h2 + .idea{margin-top:clamp(20px,3vw,28px)} .idea > * + *{margin-top:.9em} .idea-head{display:flex;align-items:center;gap:16px} .idea-art{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:18px;font-size:1.9rem;line-height:1;background:var(--sun-1);transform:rotate(-4deg); transition:transform var(--mid) var(--ease)} .idea:nth-of-type(6n+2) .idea-art{background:var(--coral-1);transform:rotate(3deg)} .idea:nth-of-type(6n+3) .idea-art{background:var(--sky-1);transform:rotate(-2deg)} .idea:nth-of-type(6n+4) .idea-art{background:var(--mint-1);transform:rotate(4deg)} .idea:nth-of-type(6n+5) .idea-art{background:var(--pink-1);transform:rotate(-3deg)} .idea:nth-of-type(6n) .idea-art{background:var(--plum-1);transform:rotate(2deg)} .idea:hover .idea-art{transform:rotate(0) scale(1.06)} .idea-head h3{margin:0;min-width:0} .idea-head h3 .no{display:inline-grid;place-items:center;min-width:1.9em;height:1.55em;margin-right:.4em;padding:0 .35em;border-radius:var(--pill);background:var(--ink);color:#fff; font-size:.7em;font-weight:800;letter-spacing:0;vertical-align:.16em;font-variant-numeric:tabular-nums} .facts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none} .facts li{display:inline-flex;align-items:baseline;gap:8px;margin:0;padding:7px 12px;border-radius:12px;background:var(--paper);font-size:.9rem;font-weight:600;line-height:1.35;color:var(--ink)} .facts li span{white-space:nowrap;font-weight:800;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .prose :is(.facts,.city-facts,.topic-chips,.cta-list) > li + li{margin-top:0} .city-facts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none} /* Tipp als Klebezettel mit Klebestreifen und Eselsohr */ .tip{position:relative;padding:18px 22px 16px;border-radius:4px 4px 4px 16px;background:var(--sun-1);font-size:1rem;line-height:1.6;color:var(--ink)} .tip::before{content:"";position:absolute;top:-9px;left:26px;width:58px;height:18px;border-radius:2px;background:rgba(255,204,46,.6);transform:rotate(-4deg)} .tip::after{content:"";position:absolute;right:0;bottom:0;width:20px;height:20px;background:linear-gradient(135deg,#f6df8f 50%,var(--white) 50%);border-top-left-radius:4px} .tip b{margin-right:4px;font-weight:800} /* Brücke zu einem Werkzeug: Zeile mit Figur der Funktion */ .bridge{display:flex;align-items:center;gap:14px;min-height:72px;width:100%;max-width:560px;padding:10px 16px 10px 10px;border-radius:var(--r-sm);background:#fff;border:1.5px solid var(--line); color:var(--ink);text-decoration:none;transition:border-color var(--fast),box-shadow var(--fast)} .bridge:hover{border-color:var(--ink);box-shadow:var(--s1)} .bridge-fig{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--fl-l,var(--sun-1))} .bridge-fig .fig{width:40px;height:40px;transition:transform var(--mid) var(--ease)} .bridge:hover .bridge-fig .fig{transform:rotate(-8deg) scale(1.08)} .bridge-txt{display:grid;gap:2px;min-width:0;line-height:1.25} .bridge-txt small{font-size:.84rem;font-weight:600;color:var(--ink-3)} .bridge-txt strong{font-weight:700;font-size:1rem;overflow-wrap:break-word} .bridge-arrow{margin-left:auto;flex:none;padding-left:4px;color:var(--ink-3);font-weight:700;font-size:1.5rem;line-height:1;transition:transform var(--fast) var(--ease)} .bridge:hover .bridge-arrow{transform:translateX(3px);color:var(--ink)} /* ---------- Großer CTA-Kasten: Farbfläche der Funktion + Mini-Bildschirm ---------- */ .cta-box{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:clamp(44px,6vw,64px); padding:clamp(24px,4.5vw,44px);border-radius:var(--r);background:var(--fl,var(--sun));color:var(--ink)} .prose .cta-box{max-width:none} .cx-txt{min-width:0} .cx-kicker{display:inline-flex;align-items:center;gap:8px;margin:0;font:700 .9rem/1.2 var(--f-body);color:var(--ink-2)} .cx-kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral);flex:none} .cta-box .cta-title{margin:10px 0 0;max-width:20ch;font:700 clamp(1.6rem,3.4vw,2.3rem)/1.1 var(--f-body);letter-spacing:-.03em;color:inherit;text-wrap:balance} .cta-box p:not(.cx-kicker){margin:12px 0 0;max-width:52ch;color:var(--ink-2);line-height:1.6} .cta-box .cta-list{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px} .cta-box .cta-list li{position:relative;display:block;margin:0;padding-left:30px;font-weight:600;line-height:1.45;color:var(--ink-2)} .cta-box .cta-list li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%232b2a29' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat} .cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .cta-box .btn{white-space:normal;text-align:center} .cta-box .btn-o{color:#fff;background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)} .cta-box .btn-o:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px #fff} /* Blau (Terminfinder): weiße Schrift, weißer Hauptknopf */ .cta-box.bg-blue{color:#fff} .cta-box.bg-blue .cx-kicker,.cta-box.bg-blue p:not(.cx-kicker),.cta-box.bg-blue .cta-list li{color:rgba(255,255,255,.92)} .cta-box.bg-blue .cx-kicker::before{background:var(--sun)} .cta-box.bg-blue :focus-visible{outline-color:#fff} @media (max-width:480px){.cta-actions .btn{width:100%}} .cx-art{position:relative;display:grid;justify-items:center;align-content:center;padding-top:6px;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none} /* verstecktes Kästchen: Antippen des Mini-Bildschirms spielt ihn ab, nochmal Antippen setzt zurück */ .cx-tap{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none} .cx-figs{position:relative;z-index:2;display:block;width:92px;height:92px;margin-bottom:-30px;transition:transform var(--mid) var(--ease)} .cx-face{position:absolute;inset:0;width:100%;height:100%;transition:opacity var(--fast)} .cx-jubel{opacity:0} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .cx-figs{transform:translateY(-6px) rotate(-5deg)} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .cx-swap .cx-face{opacity:0} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .cx-swap .cx-jubel{opacity:1} .cx-k1{position:absolute;right:6%;top:0;color:#fff} .cx-k2{position:absolute;left:4%;bottom:12%;color:#fff;width:18px;height:18px} .bg-sun-1 .cx-k1,.bg-coral .cx-k1,.bg-pink .cx-k1,.bg-sky .cx-k1,.bg-mint .cx-k1,.bg-plum .cx-k1{color:var(--sun)} .bg-pink .cx-k2,.bg-coral .cx-k2{color:var(--coral)} .bg-sky .cx-k2,.bg-plum .cx-k2,.bg-mint .cx-k2,.bg-sun-1 .cx-k2{color:var(--pink)} @media (min-width:820px){ .cta-box{grid-template-columns:minmax(0,1fr) 250px;gap:24px 36px;align-items:center} } @media (max-width:819px){ .cx-art{order:-1} .cx-k2{bottom:20%} } /* Mini-Bildschirm (Schmuck; nur CSS: reagiert auf Hover, Tippen und Fokus im Kasten) */ .mx{position:relative;display:block;width:100%;max-width:250px;padding:36px 16px 16px;border-radius:22px;background:#fff;box-shadow:var(--s2);text-align:center;color:var(--ink);font-size:.9rem;line-height:1.3} .mx small{display:block;font-size:.82rem;font-weight:700;color:var(--ink-3)} .mx-q{display:block;margin:4px 0 12px;font-size:1.02rem;font-weight:800;line-height:1.2;letter-spacing:-.02em} /* Ja/Nein: das Nein flüchtet, an seiner Stelle bleibt ein frecher Spruch */ .mx-btns{display:grid;gap:8px} .mx-yes,.mx-no,.mx-quip{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:var(--pill);font-weight:800;font-size:.95rem} .mx-yes{background:var(--blue);color:#fff;transition:transform var(--mid) var(--ease)} .mx-nowrap{position:relative;display:grid} .mx-nowrap > *{grid-area:1/1} .mx-no{background:var(--paper);transition:transform .35s var(--ease),opacity .35s} .mx-quip{background:var(--ink);color:#fff;font-size:.85rem;opacity:0;transform:scale(.9);transition:opacity var(--fast),transform var(--fast)} .mx-nowrap:hover .mx-no,:is(.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-no{transform:translate(130px,-6px) rotate(18deg);opacity:0} .mx-nowrap:hover .mx-quip,:is(.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-quip{opacity:1;transform:none;transition-delay:.12s} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-yes{transform:scale(1.05)} /* Rubbellos / Wichtel-Los: Deckschicht mit Rubbelspur, beim Hover ganz frei */ .mx-field{position:relative;display:grid;place-items:center;height:74px;border-radius:14px;background:var(--sun-1);overflow:hidden;font-weight:800;font-size:1.15rem} .mx-los .mx-field{margin-top:10px;background:var(--mint-1)} .mx-cover{position:absolute;inset:0;display:grid;place-items:start center;padding-top:10px;background:repeating-linear-gradient(45deg,#c9c7d6 0 10px,#d9d7e4 10px 20px); color:var(--ink-2);font-size:.85rem;font-weight:800;clip-path:polygon(0 0,100% 0,100% 100%,72% 100%,54% 48%,32% 80%,0 62%);transition:clip-path 1s var(--ease)} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-cover{clip-path:polygon(100% 0,100% 0,100% 0,100% 0,100% 0,100% 0,100% 0)} /* Glücksrad: dreht beim Hover und bleibt auf „Kino“ stehen */ .mx-wheel{padding-top:30px} .cx-art:has(.mx-wheel) .cx-figs{position:absolute;left:calc(50% - 150px);bottom:-6px;width:76px;height:76px;margin:0;z-index:3} @media (max-width:819px){.cx-art:has(.mx-wheel) .cx-figs{left:calc(50% - 140px)}} .mx-pin{position:absolute;left:50%;top:20px;z-index:2;width:0;height:0;border:10px solid transparent;border-top:16px solid var(--ink);transform:translateX(-50%)} .mx-disc{position:relative;display:block;width:150px;height:150px;margin:0 auto;border-radius:50%; background:conic-gradient(var(--sun) 0 60deg,var(--coral) 0 120deg,var(--pink) 0 180deg,var(--sky) 0 240deg,var(--lilac) 0 300deg,#7fe0ad 0 360deg); box-shadow:inset 0 0 0 6px #fff,var(--s1);transition:transform 2.6s cubic-bezier(.15,.85,.2,1)} .mx-disc::after{content:"";position:absolute;inset:43%;border-radius:50%;background:#fff;box-shadow:var(--s1)} .mx-disc i{position:absolute;left:50%;top:50%;font-style:normal;font-size:1.15rem;line-height:1;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-50px) rotate(calc(-1 * var(--a)))} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-disc{transform:rotate(990deg)} .mx-res{display:grid;margin-top:12px;font-weight:800} .mx-res span{grid-area:1/1;transition:opacity var(--fast)} .mx-res span + span{opacity:0} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-res span:first-child{opacity:0;transition-delay:2.4s} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-res span + span{opacity:1;transition-delay:2.4s} /* Mini-Quiz: jede Antwort ist richtig */ .mx-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px} .mx-pills span{padding:8px 12px;border-radius:var(--pill);background:var(--paper);font-weight:800;font-size:.88rem;transition:background-color var(--fast),color var(--fast)} .mx-pills span:hover,:is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-pills span:last-child{background:var(--mint-1);color:var(--mint-d)} /* Zahlenschloss: Ziffer für Ziffer blau, dann jubelt das Schloss */ .mx-digits{display:flex;justify-content:center;gap:6px} .mx-digits span{display:grid;place-items:center;width:38px;height:48px;border-radius:12px;background:var(--paper);font-size:1.3rem;font-weight:800;transition:background-color var(--fast),color var(--fast)} .mx-digits span:first-child{background:var(--blue);color:#fff} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-digits span{background:var(--blue);color:#fff;transition-delay:calc(var(--i) * .15s)} .cx-art:has(.mx-lock) .cx-swap .cx-jubel{transition-delay:.55s} /* Zettel „Willst du mit mir gehen?“ mit Kästchen */ .mx-note{padding:38px 16px 18px;border-radius:4px;background:var(--sun);font-family:var(--f-hand);transform:rotate(-2deg);box-shadow:0 18px 30px -18px rgba(43,42,41,.55)} .mx-note b{display:block;font-size:1.55rem;line-height:1.05} .mx-boxes{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:10px;font-size:1.35rem;font-weight:700} .mx-boxes span{display:inline-flex;align-items:center;gap:6px} .mx-boxes i{position:relative;width:18px;height:18px;border:2.5px solid var(--ink);border-radius:3px} .mx-boxes .on i::after{content:"";position:absolute;left:3px;top:-6px;width:8px;height:16px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(40deg)} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-note{transform:rotate(1deg)} .mx-note{transition:transform var(--mid) var(--ease)} /* Ticket mit Stempel */ .mx-tix{padding:0;overflow:hidden} .mx-tix-top{display:block;padding:38px 16px 14px;background:var(--blue);color:#fff} .mx-tix-top small{color:rgba(255,255,255,.88)} .mx-tix-top b{display:block;margin-top:2px;font-size:1.2rem;letter-spacing:-.02em} .mx-perf{display:block;margin:0 12px;border-top:2px dashed var(--line)} .mx-stamp{display:block;width:max-content;margin:14px auto 16px;padding:6px 14px;border:2.5px solid var(--mint);border-radius:10px;color:var(--mint-d);font-weight:800;font-size:1rem; text-transform:uppercase;letter-spacing:.06em;transform:rotate(-6deg)} @media (prefers-reduced-motion:no-preference){ :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-stamp{animation:mx-thump .5s var(--ease)} @keyframes mx-thump{0%{transform:rotate(-6deg) scale(1.7);opacity:0}100%{transform:rotate(-6deg) scale(1);opacity:1}} } /* Terminfinder: Wärmekarte, der beste Tag ist umrandet */ .mx-heat{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .mx-heat i{font-style:normal;font-size:.75rem;font-weight:800;color:var(--ink-3)} .mx-heat span{display:grid;place-items:center;aspect-ratio:1;border-radius:9px;font-size:.78rem;font-weight:800;background:var(--paper);color:var(--ink-3);transition:transform var(--mid) var(--ease)} .mx-heat .q1{background:#dbe6ff;color:var(--ink-2)}.mx-heat .q2{background:#a9c2ff;color:var(--ink)}.mx-heat .q3{background:#7fa3ff;color:var(--ink)}.mx-heat .q4{background:var(--blue);color:#fff} .mx-heat .best{box-shadow:inset 0 0 0 2.5px var(--ink)} :is(.cta-box:hover,.cta-box:focus-within,.cta-box:has(.cx-tap:checked)) .mx-heat .best{transform:scale(1.12)} .mx-best{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border-radius:14px;background:var(--sun-1);font-weight:800;text-align:left;font-size:.88rem} .mx-best small{display:block;font-weight:600;color:var(--ink-3);font-size:.8rem} /* ---------- FAQ ---------- */ .faq{display:grid;margin-top:16px;border-top:1.5px solid var(--line)} .faq details{border-bottom:1.5px solid var(--line)} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary h3,.faq h3{flex:1;margin:0;font:700 1.06rem/1.4 var(--f-body);letter-spacing:-.01em;text-wrap:pretty} .faq summary::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;transition:transform var(--mid) var(--ease),background-color var(--fast); background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%232b2a29' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat} .faq summary:hover::after{background-color:var(--paper-2)} .faq details[open] summary::after{transform:rotate(45deg);background-color:var(--sun)} .faq summary:focus-visible{outline-offset:2px} .faq .faq-a{padding:0 52px 20px 0;color:var(--ink-2);line-height:1.65} .faq .faq-a > * + *{margin-top:.7em} @media (max-width:480px){.faq .faq-a{padding-right:0}} /* ---------- Autorbox ---------- */ .author{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start;margin-top:clamp(44px,6vw,64px);padding:22px;border-radius:var(--r-sm);background:var(--paper)} .author-ava{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff} .author-ava .fig{width:46px;height:46px} .author p{margin:0;line-height:1.6;color:var(--ink-2);font-size:.98rem} .author .author-name{font-weight:800;color:var(--ink);font-size:1.04rem} .author .author-date{margin-top:8px;font-size:.9rem;color:var(--ink-3)} @media (max-width:420px){.author{grid-template-columns:48px minmax(0,1fr);gap:14px;padding:18px}.author-ava{width:48px;height:48px}.author-ava .fig{width:34px;height:34px}} /* ---------- Weiterlesen ---------- */ .more{margin-top:clamp(44px,6vw,64px)} .more-title{margin:0;font:700 clamp(1.4rem,2.6vw,1.8rem)/1.15 var(--f-body);letter-spacing:-.025em} .more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin-top:16px} .topic{margin-top:16px;padding:18px 20px 14px;border-radius:var(--r-sm);background:var(--paper)} .topic-title{margin:0 0 10px;font-weight:800;font-size:.95rem;color:var(--ink)} .topic-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .topic-chips li{display:flex;margin:0} .topic-chips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--pill);background:#fff;color:var(--ink);font-weight:700;font-size:.92rem;line-height:1.2; text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow var(--fast)} .topic-chips a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)} /* ---------- Karten (Übersicht + Weiterlesen): zum Antippen ---------- */ .card{position:relative;display:flex;flex-direction:column;gap:8px;min-height:100%;padding:18px 18px 16px;border-radius:var(--r-sm);background:#fff;border:1.5px solid var(--line); color:var(--ink);text-decoration:none;transition:border-color var(--fast),box-shadow var(--fast),transform var(--fast) var(--ease)} a.card:hover{border-color:var(--ink);box-shadow:var(--s1);transform:translateY(-2px)} a.card:active{transform:scale(.98)} .card-emoji{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-size:1.6rem;line-height:1;background:var(--tile,var(--paper));transition:transform var(--mid) var(--ease)} a.card:hover .card-emoji{transform:rotate(-6deg) scale(1.06)} .card-fig{background:var(--fl-l,var(--paper))} .card-hub.bg-sun .card-fig{background:var(--sun)} .card-fig .fig{width:40px;height:40px} .card-title{margin:6px 0 0;font:700 1.1rem/1.25 var(--f-body);letter-spacing:-.015em;color:var(--ink)} .card p{margin:0;color:var(--ink-3);font-size:.94rem;line-height:1.5} .card-go{margin-top:auto;padding-top:6px;font-weight:700;color:var(--ink-2);font-size:.93rem;transition:color var(--fast)} a.card:hover .card-go,a.card:focus-visible .card-go{color:var(--blue-d)} .card-hub{background:var(--paper);border-color:transparent} .card-soon{background:transparent;border-style:dashed;border-color:var(--line-2)} .card-soon .card-emoji{filter:saturate(.55);opacity:.85} a.card-soon:hover{border-style:solid} .badge{position:absolute;top:14px;right:14px;padding:5px 10px;border-radius:8px;font:800 .75rem/1 var(--f-body)} .badge-soon{background:var(--paper);color:var(--ink-2)} .badge-new{background:var(--blue);color:#fff} /* Kachel-Farbe je Gruppe */ .t-sun{--tile:var(--sun-1)}.t-coral{--tile:var(--coral-1)}.t-sky{--tile:var(--sky-1)}.t-mint{--tile:var(--mint-1)}.t-pink{--tile:var(--pink-1)}.t-plum{--tile:var(--plum-1)} /* ---------- Übersicht (Hub) ---------- */ .hub-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:4px;padding:clamp(24px,5vw,56px);border-radius:var(--r);background:var(--fl,var(--sun));overflow:hidden;isolation:isolate} .hub-head-txt{min-width:0} .hub-head .post-kicker .kick-fig{display:none} .hub-head .post-kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral);flex:none} .hub-head.bg-sun .post-kicker::before{background:#fff} .hub-head .post-lead{color:var(--ink-2)} .hub-art{position:relative;order:-1;height:104px} .hub-art .hub-a{position:absolute;right:84px;top:0;width:100px;height:100px} .hub-art .hub-b{position:absolute;right:4px;bottom:0;width:70px;height:70px} .hub-art .hub-k1{position:absolute;right:194px;top:10px;color:#fff} .hub-art .hub-k2{position:absolute;right:66px;top:2px;width:16px;height:16px;color:var(--coral)} .hub-art .fig{z-index:1} .hub-cloud{position:absolute;z-index:0;left:-10px;top:22px;width:96px;height:48px;color:#fff;opacity:.95} .hub-head.bg-sun .hub-k2{color:#fff} .hub-head.bg-sun .hub-k1{color:var(--coral)} @media (min-width:900px){ .hub-head{grid-template-columns:minmax(0,1fr) 300px;gap:24px 40px;align-items:center} .hub-art{order:0;height:280px} .hub-art .hub-a{right:auto;left:30px;top:30px;width:170px;height:170px} .hub-art .hub-b{right:6px;bottom:18px;width:104px;height:104px} .hub-art .hub-k1{right:40px;top:26px} .hub-art .hub-k2{right:auto;left:8px;top:auto;bottom:48px;width:20px;height:20px} .hub-cloud{left:auto;right:-30px;top:-6px;width:120px;height:60px} } /* Sprungleiste: Chips mit Anzahl, brechen um statt seitlich zu scrollen */ .hub-jump{margin-top:clamp(22px,3vw,30px);scroll-margin-top:calc(var(--nav-h) + 12px)} .hub-jump-title{margin:0 0 10px;font:700 .9rem/1.2 var(--f-body);color:var(--ink-2)} .hub-jump ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .hub-jump li{display:flex;margin:0} .hub-jump a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 7px 6px 16px;border-radius:var(--pill);background:#fff;color:var(--ink);font-weight:700;font-size:.94rem;line-height:1.2; text-decoration:none;transition:background-color var(--fast),color var(--fast)} .hub-jump a:hover{background:var(--ink);color:#fff} .hub-jump a:focus-visible{border-radius:var(--pill)} .hub-jump-n{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:var(--pill);background:var(--paper);color:var(--ink);font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums;transition:background-color var(--fast)} .hub-jump a:hover .hub-jump-n{background:rgba(255,255,255,.18);color:#fff} /* Handy: zwei Spalten statt einer langen Säule aus Pillen; Name links, Anzahl rechts */ @media (max-width:480px){.hub-jump ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hub-jump li{min-width:0} .hub-jump a{width:100%;justify-content:space-between;gap:6px;padding:6px 6px 6px 14px;border-radius:14px;font-size:.88rem;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4}.hub-jump a:focus-visible{border-radius:14px} .hub-jump-n{flex:none;min-width:26px;height:26px;padding:0 7px;font-size:.76rem} .hub-head{padding:28px 20px}} @media (max-width:350px){.hub-jump ul{grid-template-columns:minmax(0,1fr)}} .hub-sec{padding:clamp(28px,4vw,48px) 0} .hub-sec-head{display:grid;gap:8px;max-width:720px;margin-bottom:clamp(18px,3vw,26px)} .hub-sec-head h2{margin:0;font:700 clamp(1.6rem,3vw,2.2rem)/1.12 var(--f-body);letter-spacing:-.03em;text-wrap:balance;scroll-margin-top:calc(var(--nav-h) + 16px)} .hub-sec-head p{margin:0;color:var(--ink-2);font-size:1.04rem;line-height:1.6;max-width:62ch} .hub-sec[id]{scroll-margin-top:calc(var(--nav-h) + 8px)} .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px;margin:0;padding:0;list-style:none} .card-grid > li{display:flex} .card-grid > li > .card{flex:1} .card-grid-city{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))} .hub-top{display:flex;justify-content:flex-end;margin:12px 0 0} .hub-top a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;color:var(--ink-2);font-size:.92rem;font-weight:700;text-decoration:none} .hub-top a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .hub-cta{padding-top:clamp(16px,3vw,32px)} .hub-cta .cta-box{margin-top:0} @media (min-width:1000px){.hub-cta .cta-box{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-block:56px}.hub-cta .cx-art{justify-self:center;width:min(100%,360px);transform:scale(1.08)}} .hub-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none} .hub-rows > li{display:flex} .hub-rows .row-link{flex:1;border-radius:var(--r-sm)} .hub-rows .row-link > span:first-child{min-width:0} @media (max-width:900px){.hub-rows{grid-template-columns:minmax(0,1fr)}} /* Alte Hub-Teile (falls noch erzeugt) */ .hub-feature{padding-top:0} /* Handy: Karten kompakt (Kachel neben dem Titel, Text darunter) */ @media (max-width:560px){ :is(.card-grid,.more-grid) .card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 14px;align-items:center;padding:14px 16px} :is(.card-grid,.more-grid) .card-emoji{width:44px;height:44px;border-radius:14px;font-size:1.35rem} :is(.card-grid,.more-grid) .card-fig .fig{width:34px;height:34px} :is(.card-grid,.more-grid) .card > :not(.card-emoji):not(.badge):not(.card-title){grid-column:1/-1} :is(.card-grid,.more-grid) .card-title{margin:0} :is(.card-grid,.more-grid) .card{grid-template-columns:44px minmax(0,1fr) auto} :is(.card-grid,.more-grid) .card-go{display:none} :is(.card-grid,.more-grid) .card::after{content:"›";grid-column:3;grid-row:1;align-self:center;color:var(--ink-3);font-weight:700;font-size:1.5rem;line-height:1} :is(.card-grid,.more-grid) .card:has(.badge) .card-title{padding-right:64px} .card-grid .badge{top:12px;right:12px} } /* ---------- Bausteine aus dem Text ---------- */ /* Beispieltext als Sprechblase (wie Blubb) mit Kopieren-Knopf */ .sample{position:relative;margin:1.3em 0 calc(10px + .4em);padding:18px 20px 14px;border-radius:22px 22px 22px 6px;background:var(--paper)} .sample::after{content:"";position:absolute;left:0;bottom:-11px;width:24px;height:12px;background:var(--paper);clip-path:polygon(0 0,100% 0,0 100%)} .sample-label{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:700 .86rem/1.2 var(--f-body);color:var(--ink-2)} .sample-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none} .sample blockquote{margin:0;padding:0;font-size:1.04rem;line-height:1.62;color:var(--ink)} .sample blockquote p{margin:0} .sample blockquote p + p{margin-top:.6em} .sample-copy{display:flex;align-items:center;gap:8px;width:fit-content;min-height:44px;margin:12px 0 0 auto;padding:8px 16px 8px 14px;border:0;border-radius:var(--pill);background:#fff; box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);font:700 .92rem/1 var(--f-body);cursor:pointer;-webkit-tap-highlight-color:transparent; transition:box-shadow var(--fast),background-color var(--fast),color var(--fast),transform var(--fast) var(--ease)} .sample-copy::before{content:"";width:16px;height:16px;flex:none;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='3'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='3'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E") center/contain no-repeat} .sample-copy:hover{box-shadow:inset 0 0 0 1.5px var(--ink)} .sample-copy:active{transform:scale(.96)} .sample-copy.done{background:var(--mint-1);box-shadow:inset 0 0 0 1.5px var(--mint);color:var(--mint-d)} .sample-copy.done::before{display:none} @media (prefers-reduced-motion:no-preference){ .sample-copy.done{animation:copy-pop .35s var(--ease)} @keyframes copy-pop{40%{transform:scale(1.08)}} } /* Hinweis-Box */ .note-box{margin-top:1.2em;padding:16px 20px;border-radius:var(--r-sm);background:var(--paper);color:var(--ink-2);font-size:.98rem;line-height:1.6} .note-box > :first-child{margin-top:0} .note-box strong{color:var(--ink)} /* Schritte als Zeitleiste */ .prose .steps{list-style:none;padding:0;counter-reset:st;display:grid;gap:0} .prose .steps > li{counter-increment:st;position:relative;margin:0;padding:5px 0 24px 56px} .prose .steps > li::before{content:counter(st);position:absolute;left:0;top:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font:800 1rem/1 var(--f-body)} .prose .steps > li::after{content:"";position:absolute;left:18px;top:46px;bottom:6px;width:2px;border-radius:2px;background:var(--line)} .prose .steps > li:first-child::before{background:var(--sun);color:var(--ink)} .prose .steps > li:last-child{padding-bottom:0} .prose .steps > li:last-child::after{display:none} /* Tabellen */ .table-wrap{position:relative;overflow-x:auto;margin-top:1.3em;border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;-webkit-overflow-scrolling:touch} .table-wrap table{width:100%;border-collapse:collapse;font-size:.96rem;line-height:1.45} .table-wrap th,.table-wrap td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .table-wrap th{background:var(--paper);font-weight:800;color:var(--ink);white-space:nowrap} .table-wrap tbody tr:nth-child(even) td{background:#fdfbf9} .table-wrap tr:last-child td{border-bottom:0} .table-wrap tbody td:first-child{font-weight:700;color:var(--ink)} @media (max-width:600px){.table-wrap table{font-size:.9rem}.table-wrap th,.table-wrap td{min-width:5.4em;padding:10px 9px;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}.table-wrap th{white-space:normal}} /* Breite Tabellen scrollen seitlich: rechts blendet der Rand aus, solange es noch weitergeht (nur wo der Browser Scroll-Timelines kann) */ @property --tw-a{syntax:"";inherits:false;initial-value:1} @supports (animation-timeline:scroll()){ .table-wrap{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),rgba(0,0,0,var(--tw-a)));mask-image:linear-gradient(to right,#000 calc(100% - 40px),rgba(0,0,0,var(--tw-a))); animation:tw-more linear both;animation-timeline:scroll(self inline)} @keyframes tw-more{from{--tw-a:.12}95%{--tw-a:.12}to{--tw-a:1}} } /* Reine Link-Listen im Fließtext (Generator: