kantarciandClaude Opus 5
de1e66350b
Der Knopf "nach oben" ist ein Anker, kein Skript: er springt an den Seitenanfang, eingeblendet ueber eine Scroll-Zeitachse. Abschaltbar und vollstaendig einstellbar - Seite, Form, Groesse, Farben, Schwelle, Beschriftung. Bilder lassen sich vergroessern, je Bild waehlbar (nichts / vergroessern / Adresse), Galerien mit einem Schalter. Grundlage ist ein gewoehnlicher Verweis auf die grosse Fassung: ohne JavaScript oeffnet er das Bild, mit JavaScript einen dialog-Betrachter mit Blaettern, Escape und Pfeiltasten. Das Skript laedt nur, wo es etwas zu tun hat. Die Rechtszeile wird ein Baustein und steht damit im Fussbereich statt als heller Streifen darunter. Die eingebaute Leiste erscheint nur noch, wenn die Seite den Baustein nicht enthaelt. Dabei gefunden: zwei Stylesheet-Regeln griffen seit drei Veroeffentlichungen nicht mehr. Beim Entfernen alter Regeln waren Selektorreste stehen geblieben, und CSS nimmt dann die naechste Regel mit - betroffen waren der Einwilligungsdialog und die Rechtszeile. Ein Test prueft jetzt jede CSS-Datei auf abgebrochene Selektoren. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
377 lines
31 KiB
CSS
377 lines
31 KiB
CSS
@charset "UTF-8";
|
||
/* Lange Wörter dürfen umbrechen, damit nichts aus der Spalte läuft. Getrennt wird nur im
|
||
Fließtext: eine Überschrift mit Trennstrich („di-gitale") sieht nach Fehler aus. */
|
||
h1,h2,h3,h4,h5,h6,p,a{overflow-wrap:break-word}
|
||
h1,h2,h3,h4,h5,h6{hyphens:manual}
|
||
p{hyphens:auto}
|
||
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.block-image{margin:0;max-width:100%}.block-image img{max-width:100%;height:auto}
|
||
:root{color-scheme:light;--paper:#f7f8f4;--ink:#182d2b;--muted:#50625d;--line:#d7dfd7;--mint:#e5f0b6;--accent:#315b49;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
|
||
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:5px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--accent);outline-offset:6px}main:focus{outline:none}.shell{width:min(var(--k-container,1180px),calc(100% - 64px));margin-inline:auto}.site-header{border-bottom:1px solid var(--line)}.site-header.is-sticky{position:sticky;top:0;z-index:40;background:var(--paper);box-shadow:0 1px 0 var(--line),0 10px 30px color-mix(in srgb,var(--ink) 8%,transparent)}.image-link{display:block;text-decoration:none}.brand{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:28px;letter-spacing:-1.3px;text-decoration:none}.brand-icon{width:37px;height:37px;background:var(--ink);color:var(--mint);border-radius:10px;display:grid;place-items:center;margin-right:7px;font-size:27px;letter-spacing:-2px}.brand-light{font-weight:400}.site-header nav{display:flex;gap:32px;align-items:center;font-size:14px;font-weight:600}.site-header nav a{text-decoration:none;padding:12px 0}.site-header nav [aria-current=page]{text-decoration:none;font-weight:800}.site-header nav .nav-link{border:1px solid var(--ink);padding:13px 18px;border-radius:7px}.nav-link span{margin-left:18px}.block-section{padding:70px 0}.block-section:first-child{padding:74px 0 82px}h1,h2,h3{letter-spacing:-.05em;line-height:1.05;margin:0 0 24px}h1{font-size:clamp(48px,6.6vw,84px);font-weight:500;max-width:900px}h2{font-size:clamp(32px,4vw,49px);font-weight:500;max-width:760px}h3{font-size:26px;letter-spacing:-.035em;line-height:1.2}.block-text{font-size:18px;line-height:1.7;max-width:690px;margin:0 0 23px;color:color-mix(in srgb,currentColor 82%,transparent);white-space:pre-line}.button{display:inline-flex;align-items:center;gap:32px;min-height:50px;margin-top:9px;padding:15px 21px;background:var(--ink);color:var(--paper);border-radius:7px;text-decoration:none;font-size:14px;font-weight:600}.button:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper))}.block-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px;margin-top:38px;background:transparent!important}.block-column{min-width:0}.block-column .block-text{font-size:15px}.tone-mint{background:var(--mint)}.tone-ink{background:var(--ink);color:var(--paper)}.tone-ink .block-text{color:color-mix(in srgb,var(--paper) 86%,var(--ink))}.tone-ink .tone-ink .button{color:var(--ink);background:var(--mint)}.width-narrow>.section-inner{max-width:800px}.site-footer{border-top:1px solid var(--line)}.site-footer p,.site-footer>span{font-size:12px;color:var(--muted)}.site-footer .brand{font-size:22px}.skip-link{position:fixed;left:16px;top:-100px;z-index:10;background:var(--ink);color:white;padding:16px}.skip-link:focus{top:16px}img{display:block;max-width:100%;height:auto;border-radius:12px}.error-page{padding-block:100px}.error-page h1{max-width:800px}
|
||
@media(max-width:650px){.shell{width:calc(100% - 36px)}.site-header nav{width:100%;justify-content:space-between;gap:12px;font-size:12px}.site-header nav .nav-link{padding:10px}.nav-link span{margin-left:6px}.block-section,.block-section:first-child{padding-block:48px}h1{font-size:49px}.block-text{font-size:16px}.site-footer{align-items:flex-start;flex-direction:column;gap:10px}.site-footer p{margin:0}.block-row{gap:16px}}
|
||
|
||
/* Menus. Submenus open with details/summary, so the navigation works without JavaScript. */
|
||
.menu-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin:0;padding:0}
|
||
.menu-list a{text-decoration:none;padding:6px 2px;display:inline-block}
|
||
.menu-list a:hover,.menu-list summary:hover{text-decoration:underline}
|
||
.menu-list [aria-current=page]{font-weight:700;text-decoration:none}
|
||
.menu-branch>summary{cursor:pointer;padding:6px 2px;list-style:none}
|
||
.menu-branch>summary::after{content:' ▾'}
|
||
.menu-branch[open]>summary::after{content:' ▴'}
|
||
.menu-branch-body{display:grid;gap:2px;padding:6px 0 6px 14px}
|
||
.menu-level-2{flex-direction:column;align-items:flex-start;gap:2px}
|
||
|
||
/* Posts */
|
||
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}.post-list-karten{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.post-list-liste{gap:18px}.post-list-liste .post-card{flex-direction:row;align-items:stretch}.post-list-liste .post-image{flex:0 0 34%;max-width:300px}.post-list-liste .post-image img{height:100%;aspect-ratio:auto;min-height:170px}.post-list-liste .post-body{flex:1 1 auto;align-content:center;padding:22px 26px}.post-list-wechsel{gap:0;counter-reset:beitrag}.post-list-wechsel .post-card{position:relative;counter-increment:beitrag;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0 56px;padding:38px 0;background:transparent;border:0;border-radius:0;overflow:visible}.post-list-wechsel .post-card + .post-card{border-top:1px solid var(--line)}.post-list-wechsel .post-image{border-radius:20px;overflow:hidden;box-shadow:0 18px 46px -22px color-mix(in srgb,var(--ink) 55%,transparent)}.post-list-wechsel .post-image img{aspect-ratio:16/10;border-radius:20px}.post-list-wechsel .post-body{padding:0;display:grid;gap:12px;align-content:center}.post-list-wechsel .post-body::before{content:counter(beitrag,decimal-leading-zero);font-size:13px;font-weight:800;letter-spacing:2px;color:var(--accent)}.post-list-wechsel .post-card h3{font-size:28px;line-height:1.18;letter-spacing:-.5px}.post-list-wechsel .post-excerpt{margin:0;max-width:46ch}.post-list-wechsel .post-meta,.post-list-wechsel .post-terms{margin:0}.post-list-wechsel .post-more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-size:15px;font-weight:700;color:var(--accent);text-decoration:none;width:fit-content}
|
||
.post-more::after{content:'→';transition:transform .2s}
|
||
.post-more:hover::after{transform:translateX(4px)}.post-list-wechsel .post-more::after{content:'\2192'}.post-list-wechsel .post-card:nth-child(even) .post-image{order:2}.post-list-wechsel .post-card:nth-child(even) .post-body{order:1}@media(max-width:760px){.post-list-wechsel .post-card{grid-template-columns:1fr;gap:18px;padding:26px 0}.post-list-wechsel .post-card:nth-child(even) .post-image{order:0}.post-list-wechsel .post-card:nth-child(even) .post-body{order:0}.post-list-wechsel .post-card h3{font-size:22px}}.post-list-kompakt{gap:0}.post-list-kompakt .post-card{flex-direction:row;align-items:baseline;justify-content:space-between;gap:18px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow:visible}.post-list-kompakt .post-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:16px 2px}.post-list-kompakt .post-meta,.post-list-kompakt .post-terms{margin:0}.post-list-kompakt .post-excerpt{flex:1 1 100%;margin:0}
|
||
.post-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}.post-card>.post-body{display:grid;gap:10px;padding:20px 22px 22px}
|
||
.post-image{display:block;position:relative;overflow:hidden;text-decoration:none}.post-view{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 55%,transparent);color:#fff;font-weight:700;font-size:15px;letter-spacing:.4px;opacity:0}.post-card:hover .post-view,.post-card:focus-within .post-view{opacity:1}.post-image img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:0;display:block;background:var(--ink)}
|
||
.kant h1 mark,.kant h2 mark,.kant h3 mark{background:transparent;color:var(--accent);padding:0}
|
||
.kant .post-card h3{margin:0;font-size:19px;font-weight:800;line-height:1.12;color:var(--ink);letter-spacing:-.2px}
|
||
.post-card h3 a{text-decoration:none}
|
||
.post-card h3 a:hover{text-decoration:underline}
|
||
.post-meta,.post-header{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:13px;margin:0}
|
||
.post-header{padding-block:22px 0}
|
||
.post-excerpt{margin:0;line-height:1.65}
|
||
.block-postnav{margin-top:10px}.post-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.post-nav-link{display:grid;gap:8px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;text-decoration:none;background:var(--paper)}.post-nav-next{text-align:right}.post-nav-label{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent)}.post-nav-title{font-size:18px;font-weight:800;line-height:1.25;color:var(--ink)}.post-pager{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;margin-top:34px;font-size:14px}.post-pager span{color:var(--muted)}.post-terms{display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:13px}
|
||
.post-empty{padding:26px;border:1px dashed currentColor;border-radius:10px}
|
||
.pagination{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:38px;padding-top:22px;border-top:1px solid currentColor;font-size:14px}
|
||
.post-terms-label{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px}
|
||
|
||
/* Blocks introduced with schema v6. No JavaScript: the accordion is details/summary. */
|
||
.block-icon{flex-shrink:0;display:block}
|
||
.block-iconcard{display:grid;gap:12px;padding:26px;border:1px solid currentColor;border-radius:12px}
|
||
.block-iconcard + .block-iconcard,.block-quote + .block-quote,.block-cta + .block-cta,.block-iconcard + .block-quote,.block-quote + .block-iconcard{margin-top:18px}.kant .block-iconcard h3{margin:0;font-size:19px;line-height:1.3}
|
||
.block-iconcard h3 a{text-decoration:none}
|
||
.block-iconcard h3 a:hover{text-decoration:underline}
|
||
.block-iconcard p{margin:0;line-height:1.65}
|
||
.block-stat{display:grid;gap:4px;margin:0;font-size:44px;font-weight:600}
|
||
.block-stat strong{font-size:inherit;font-weight:inherit;line-height:1.05;letter-spacing:-1.5px}
|
||
.block-stat span{font-size:14px;line-height:1.5}
|
||
.block-quote{margin:0;display:grid;gap:14px;padding:28px;border:1px solid currentColor;border-radius:12px;font-size:18px}
|
||
.block-quote blockquote{margin:0}
|
||
.block-quote blockquote p{margin:0;font-size:inherit;line-height:1.65}
|
||
.block-quote figcaption{font-size:14px;font-weight:600}
|
||
.block-quote figcaption span{font-weight:400;opacity:.85}
|
||
.quote-rating{margin:0;letter-spacing:3px}
|
||
.block-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:center;gap:24px}
|
||
.block-logos img{max-height:52px;width:auto;margin-inline:auto;display:block}
|
||
.kant .block-form button[type=submit]{background:var(--accent);color:#fff;border-color:var(--accent)}.kant .block-form button[type=submit]:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}.kant .block-cta .button{background:var(--accent);color:#fff;border-color:var(--accent)}.kant .block-cta .button:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}.block-cta{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;justify-content:space-between;padding:32px;border:1px solid currentColor;border-radius:14px}
|
||
.kant .block-cta h2{margin:0 0 6px;font-size:26px;letter-spacing:-.6px}
|
||
.block-cta p{margin:0;line-height:1.6}
|
||
.block-contact{display:grid;gap:14px;font-style:normal}
|
||
.block-contact span{display:flex;align-items:center;gap:12px;line-height:1.5}
|
||
/* Telefonnummer und E-Mail stehen neben ihrem Symbol - das sagt deutlicher als ein Strich,
|
||
dass man darauf tippen kann. Beim Überfahren erscheint er trotzdem. */
|
||
.block-contact a{text-decoration:none}
|
||
.block-contact a:hover{text-decoration:underline}
|
||
.block-divider{border:0;border-top:1px solid currentColor;opacity:.35;margin:0}
|
||
.block-spacer{display:block}
|
||
.spacer-small{height:18px}.spacer-medium{height:38px}.spacer-large{height:68px}.spacer-huge{height:110px}
|
||
.block-accordion{display:grid;gap:10px}
|
||
.block-accordionitem{border:1px solid currentColor;border-radius:10px;padding:4px 18px}
|
||
.block-accordionitem>summary{cursor:pointer;padding:15px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center}
|
||
.block-accordionitem>summary::after{content:'+';font-size:22px;line-height:1}
|
||
.block-accordionitem[open]>summary::after{content:'–'}
|
||
.accordion-body{padding-bottom:16px}
|
||
|
||
/* Tabs. Rendered as an anchor list plus all panels; tabs.js upgrades them to a tab widget. */
|
||
.tabs-nav{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0 0 22px;padding:0;border-bottom:1px solid currentColor}
|
||
.tabs-nav a{display:inline-block;padding:12px 18px;text-decoration:none;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;margin-bottom:-1px;font-weight:600}
|
||
.tabs-nav a:hover{background:#0000000a}
|
||
.tabs-nav [aria-selected=true]{border-color:currentColor;background:#fff}
|
||
.tabs-ready .tabs-nav a{cursor:pointer}
|
||
.block-tabitem{padding-block:4px}
|
||
.block-tabitem:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
|
||
.tabs-heading{margin:0 0 12px;font-size:17px}
|
||
|
||
/* Forms. Server rendered, no JavaScript; every message sits at its field. */
|
||
.block-form{display:grid;gap:20px;max-width:640px}
|
||
.form-field{display:grid;gap:7px}
|
||
.form-field label{font-weight:600;font-size:14px}
|
||
.form-field input,.form-field textarea,.form-field select{width:100%;padding:12px 13px;border:1px solid currentColor;border-radius:8px;background:#fff;color:inherit;font:inherit;min-height:46px}
|
||
.form-field textarea{min-height:140px;line-height:1.6;resize:vertical}
|
||
.has-error input,.has-error textarea,.has-error select{border-width:2px;border-color:#8b2f22}
|
||
.field-error{margin:0;font-size:13px;font-weight:600;color:#8b2f22}
|
||
.field-note{margin:0;font-size:13px;opacity:.8}
|
||
.form-error-summary{margin:0;padding:14px 18px;border-radius:8px;background:#fff0eb;color:#8b2f22;border:1px solid #e2b2a7;font-weight:600}
|
||
.form-success{margin:0;padding:16px 20px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,var(--paper));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--paper));font-weight:600}
|
||
.form-missing{margin:0;padding:14px 18px;border:1px dashed currentColor;border-radius:8px}
|
||
.check-row{display:flex;align-items:flex-start;gap:11px}
|
||
.check-row input{width:20px;min-height:20px;flex-shrink:0;margin-top:3px}
|
||
.check-row label{font-weight:400;line-height:1.55}
|
||
.required-mark{color:#8b2f22}
|
||
/* Off screen rather than display:none so a filled value still proves automation. */
|
||
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
|
||
|
||
.block-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;font-size:13px}
|
||
.block-breadcrumb li+li::before{content:'›';margin-right:10px;opacity:.6}
|
||
.block-breadcrumb a{text-decoration:none}
|
||
.block-breadcrumb a:hover{text-decoration:underline}
|
||
|
||
/* The column rules above were written for a flat section > text structure and set a colour meant
|
||
for light backgrounds. Inside a dark tone they won on specificity, so text in a dark column was
|
||
unreadable - 1.87:1 in the seeded footer. These two selectors match that specificity and come
|
||
later, so the dark tone wins where it has to. */
|
||
.tone-ink .block-column .block-text{color:#dae3da}
|
||
|
||
/* The consent question. Fixed to the bottom, but it never covers the whole page: the content
|
||
stays readable while the decision is open, because a wall would make "accept" the only way
|
||
forward. Accepting and refusing are the same button in the same row. */
|
||
.consent-bar{position:fixed;inset-inline:12px;bottom:12px;z-index:50;max-width:620px;margin-inline:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 18px 50px color-mix(in srgb,var(--ink) 15%,transparent);font-size:14px;line-height:1.6}
|
||
.kant .consent-bar h2{font-size:16px;margin:0 0 8px}
|
||
.consent-bar p{margin:0 0 14px}
|
||
.consent-actions{display:flex;flex-wrap:wrap;gap:10px}
|
||
.consent-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border-radius:8px;border:1px solid var(--k-consent,var(--accent));background:var(--k-consent,var(--accent));color:#fff;font:inherit;font-weight:600;cursor:pointer}
|
||
.consent-actions .consent-button:last-child{background:var(--paper);color:var(--ink);border-color:var(--line)}
|
||
.consent-button:hover{filter:brightness(.94)}
|
||
.consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
|
||
.consent-details{margin-top:14px}
|
||
.consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:4px 0}
|
||
.consent-groups{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
|
||
.consent-groups label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5}
|
||
.consent-groups input{margin-top:3px;width:18px;height:18px;flex-shrink:0}
|
||
.consent-choice{margin-top:14px;background:var(--paper);color:var(--ink);border-color:var(--line)}
|
||
.consent-links{margin:14px 0 0;font-size:12px}
|
||
.consent-links a{color:var(--accent)}
|
||
/* While the question is open the bar is fixed at the bottom, so the page has to end above it -
|
||
otherwise it covers the last element, and an embed's own consent button sat right underneath.
|
||
Found by the browser test, which could not click it. */
|
||
body.consent-open{padding-bottom:260px}
|
||
@media (min-width:900px){body.consent-open{padding-bottom:200px}}
|
||
.consent-page main{max-width:680px;margin-inline:auto;padding:40px 20px}
|
||
.consent-page .consent-bar{position:static;inset:auto;box-shadow:none;max-width:none;margin-top:24px}
|
||
@media (max-width:620px){.consent-bar{inset-inline:0;bottom:0;border-radius:14px 14px 0 0;padding:16px}.consent-actions .consent-button{flex:1 1 140px}}
|
||
|
||
/* An embedded third party, and what stands in its place until it may load. */
|
||
.block-embed iframe{display:block;width:100%;border:0;border-radius:10px;background:color-mix(in srgb,var(--ink) 8%,var(--paper))}
|
||
.embed-blocked{border:1px dashed var(--line);border-radius:10px;padding:24px;background:color-mix(in srgb,var(--ink) 4%,var(--paper));text-align:center}
|
||
.embed-title{margin:0 0 8px;font-weight:600}
|
||
.embed-hint{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--muted)}
|
||
.embed-provider{margin:0 0 16px;font-size:13px;color:var(--muted)}
|
||
|
||
/* Header and footer hold block documents of their own (ADR 026). They are therefore ordinary
|
||
block containers - as flex containers they shrank the section inside them until a single word
|
||
wrapped one letter per line. Their sections are chrome, not articles, so they sit tighter than
|
||
a section in the page body, and their rows keep their columns side by side. */
|
||
.site-header .block-section,
|
||
.site-footer .block-section{padding-block:20px}
|
||
.site-header .block-row,
|
||
.site-footer .block-row{margin-top:0;align-items:center}
|
||
.site-header .block-column,
|
||
.site-footer .block-column{border:0;border-radius:0;padding:0}
|
||
.site-header .block-text,
|
||
.site-footer .block-text{margin:0}
|
||
/* One landmark for the three links that must be on every page. Loose text outside a landmark is
|
||
also what axe objects to, and rightly: a screen reader then has no way to skip to it. */
|
||
.legal-bar{padding:16px 20px;text-align:center;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
|
||
.legal-bar a{color:var(--accent);text-decoration:none}
|
||
.legal-bar a:hover{text-decoration:underline}
|
||
|
||
/* An image takes the rounding of its figure. Without this a radius on an image block rounded the
|
||
figure and left the picture square - which looked like the setting did nothing. */
|
||
.block-image img, .block-gallery img, .block-logos img { border-radius: inherit }
|
||
|
||
/* A single icon, sized by class because inline styles are forbidden by the policy. */
|
||
.block-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);line-height:0}
|
||
.block-icon svg{width:100%;height:100%;display:block}
|
||
.icon-size-12{width:12px;height:12px}.icon-size-16{width:16px;height:16px}.icon-size-20{width:20px;height:20px}
|
||
.icon-size-24{width:24px;height:24px}.icon-size-32{width:32px;height:32px}.icon-size-40{width:40px;height:40px}
|
||
.icon-size-48{width:48px;height:48px}.icon-size-56{width:56px;height:56px}.icon-size-64{width:64px;height:64px}
|
||
.icon-size-80{width:80px;height:80px}.icon-size-96{width:96px;height:96px}.icon-size-120{width:120px;height:120px}
|
||
.icon-size-160{width:160px;height:160px}.icon-size-200{width:200px;height:200px}.icon-size-240{width:240px;height:240px}
|
||
|
||
/* A progress bar. The value is a class, not an inline style, for the same reason. */
|
||
.block-progress{margin:0 0 22px}
|
||
.progress-label{display:flex;justify-content:space-between;gap:16px;margin:0 0 8px;font-size:14px;font-weight:600}
|
||
.progress-value{color:var(--muted);font-weight:400}
|
||
.progress-track{height:10px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,var(--paper));overflow:hidden}
|
||
.progress-fill{height:100%;border-radius:999px;background:var(--accent)}
|
||
.tone-ink .progress-track{background:#ffffff26}
|
||
.tone-ink .progress-fill{background:var(--mint)}
|
||
|
||
/* A slider without a script: a scroll container with snapping. It keeps working when snapping is
|
||
unsupported - then it is a strip you can scroll. No autoplay, ever. */
|
||
.block-slider{display:grid;grid-auto-flow:column;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:12px;scrollbar-gutter:stable}
|
||
.block-slider.slider-snap{scroll-snap-type:x mandatory}
|
||
.slider-snap>.slider-slide{scroll-snap-align:start}
|
||
.slider-slide{min-width:0}
|
||
.block-slider:focus-visible{outline:3px solid var(--accent);outline-offset:6px}/* Mit Punkten braucht es die Rollleiste nicht mehr - sie stand quer unter dem Bild. */
|
||
.slider-dots{scroll-marker-group:after;scroll-behavior:smooth;position:relative;padding-bottom:0;scrollbar-width:none;scrollbar-gutter:auto}.slider-dots::-webkit-scrollbar{display:none}.slider-dots>*::scroll-marker{content:'';width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,currentColor 30%,transparent);margin:0 6px;cursor:pointer}.slider-dots>*::scroll-marker:target-current{background:var(--accent)}.slider-dots::scroll-marker-group{display:flex;justify-content:center;align-items:center;padding:14px 0 2px}
|
||
.slide-desktop-1{grid-auto-columns:100%}.slide-desktop-2{grid-auto-columns:calc(50% - 10px)}
|
||
.slide-desktop-3{grid-auto-columns:calc(33.333% - 14px)}.slide-desktop-4{grid-auto-columns:calc(25% - 15px)}
|
||
.slide-desktop-5{grid-auto-columns:calc(20% - 16px)}.slide-desktop-6{grid-auto-columns:calc(16.666% - 17px)}
|
||
@media (max-width:1024px){
|
||
.slide-tablet-1{grid-auto-columns:100%}.slide-tablet-2{grid-auto-columns:calc(50% - 10px)}
|
||
.slide-tablet-3{grid-auto-columns:calc(33.333% - 14px)}.slide-tablet-4{grid-auto-columns:calc(25% - 15px)}
|
||
.slide-tablet-5{grid-auto-columns:calc(20% - 16px)}.slide-tablet-6{grid-auto-columns:calc(16.666% - 17px)}
|
||
}
|
||
@media (max-width:650px){
|
||
.slide-mobile-1{grid-auto-columns:100%}.slide-mobile-2{grid-auto-columns:calc(50% - 10px)}
|
||
.slide-mobile-3{grid-auto-columns:calc(33.333% - 14px)}.slide-mobile-4{grid-auto-columns:calc(25% - 15px)}
|
||
.slide-mobile-5{grid-auto-columns:calc(20% - 16px)}.slide-mobile-6{grid-auto-columns:calc(16.666% - 17px)}
|
||
}
|
||
.progress-fill-0{width:0%}
|
||
.progress-fill-1{width:1%}
|
||
.progress-fill-2{width:2%}
|
||
.progress-fill-3{width:3%}
|
||
.progress-fill-4{width:4%}
|
||
.progress-fill-5{width:5%}
|
||
.progress-fill-6{width:6%}
|
||
.progress-fill-7{width:7%}
|
||
.progress-fill-8{width:8%}
|
||
.progress-fill-9{width:9%}
|
||
.progress-fill-10{width:10%}
|
||
.progress-fill-11{width:11%}
|
||
.progress-fill-12{width:12%}
|
||
.progress-fill-13{width:13%}
|
||
.progress-fill-14{width:14%}
|
||
.progress-fill-15{width:15%}
|
||
.progress-fill-16{width:16%}
|
||
.progress-fill-17{width:17%}
|
||
.progress-fill-18{width:18%}
|
||
.progress-fill-19{width:19%}
|
||
.progress-fill-20{width:20%}
|
||
.progress-fill-21{width:21%}
|
||
.progress-fill-22{width:22%}
|
||
.progress-fill-23{width:23%}
|
||
.progress-fill-24{width:24%}
|
||
.progress-fill-25{width:25%}
|
||
.progress-fill-26{width:26%}
|
||
.progress-fill-27{width:27%}
|
||
.progress-fill-28{width:28%}
|
||
.progress-fill-29{width:29%}
|
||
.progress-fill-30{width:30%}
|
||
.progress-fill-31{width:31%}
|
||
.progress-fill-32{width:32%}
|
||
.progress-fill-33{width:33%}
|
||
.progress-fill-34{width:34%}
|
||
.progress-fill-35{width:35%}
|
||
.progress-fill-36{width:36%}
|
||
.progress-fill-37{width:37%}
|
||
.progress-fill-38{width:38%}
|
||
.progress-fill-39{width:39%}
|
||
.progress-fill-40{width:40%}
|
||
.progress-fill-41{width:41%}
|
||
.progress-fill-42{width:42%}
|
||
.progress-fill-43{width:43%}
|
||
.progress-fill-44{width:44%}
|
||
.progress-fill-45{width:45%}
|
||
.progress-fill-46{width:46%}
|
||
.progress-fill-47{width:47%}
|
||
.progress-fill-48{width:48%}
|
||
.progress-fill-49{width:49%}
|
||
.progress-fill-50{width:50%}
|
||
.progress-fill-51{width:51%}
|
||
.progress-fill-52{width:52%}
|
||
.progress-fill-53{width:53%}
|
||
.progress-fill-54{width:54%}
|
||
.progress-fill-55{width:55%}
|
||
.progress-fill-56{width:56%}
|
||
.progress-fill-57{width:57%}
|
||
.progress-fill-58{width:58%}
|
||
.progress-fill-59{width:59%}
|
||
.progress-fill-60{width:60%}
|
||
.progress-fill-61{width:61%}
|
||
.progress-fill-62{width:62%}
|
||
.progress-fill-63{width:63%}
|
||
.progress-fill-64{width:64%}
|
||
.progress-fill-65{width:65%}
|
||
.progress-fill-66{width:66%}
|
||
.progress-fill-67{width:67%}
|
||
.progress-fill-68{width:68%}
|
||
.progress-fill-69{width:69%}
|
||
.progress-fill-70{width:70%}
|
||
.progress-fill-71{width:71%}
|
||
.progress-fill-72{width:72%}
|
||
.progress-fill-73{width:73%}
|
||
.progress-fill-74{width:74%}
|
||
.progress-fill-75{width:75%}
|
||
.progress-fill-76{width:76%}
|
||
.progress-fill-77{width:77%}
|
||
.progress-fill-78{width:78%}
|
||
.progress-fill-79{width:79%}
|
||
.progress-fill-80{width:80%}
|
||
.progress-fill-81{width:81%}
|
||
.progress-fill-82{width:82%}
|
||
.progress-fill-83{width:83%}
|
||
.progress-fill-84{width:84%}
|
||
.progress-fill-85{width:85%}
|
||
.progress-fill-86{width:86%}
|
||
.progress-fill-87{width:87%}
|
||
.progress-fill-88{width:88%}
|
||
.progress-fill-89{width:89%}
|
||
.progress-fill-90{width:90%}
|
||
.progress-fill-91{width:91%}
|
||
.progress-fill-92{width:92%}
|
||
.progress-fill-93{width:93%}
|
||
.progress-fill-94{width:94%}
|
||
.progress-fill-95{width:95%}
|
||
.progress-fill-96{width:96%}
|
||
.progress-fill-97{width:97%}
|
||
.progress-fill-98{width:98%}
|
||
.progress-fill-99{width:99%}
|
||
.progress-fill-100{width:100%}
|
||
|
||
/* Section widths. "wide" only widens the content, "full" removes the container entirely: that is
|
||
what a picture or a colour field from edge to edge needs. A full width section drops its own
|
||
padding as well, otherwise "edge to edge" would still have 32 pixels of air on each side. */
|
||
.width-wide>.section-inner{width:min(1600px,calc(100% - 64px))}
|
||
.width-full>.section-inner{width:100%;max-width:none;margin-inline:0}
|
||
@media (max-width:650px){.width-wide>.section-inner{width:calc(100% - 36px)}}
|
||
|
||
/* A section that is a flex container centres its content box; the inner container must then be
|
||
allowed to grow, or a full height section would show a strip in the middle. */
|
||
.block-section>.section-inner{flex:1 1 auto}
|
||
|
||
/* Menu kinds. Horizontal is the default; vertical stacks; burger is a details element, so it
|
||
opens without a script - a menu that needs one would not open on a page that runs none. */
|
||
.menu-vertical .menu-list{flex-direction:column;align-items:flex-start;gap:6px}
|
||
.menu-burger>summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;padding:10px 14px;border:1px solid currentColor;border-radius:8px;font-size:14px;font-weight:600;list-style:none}
|
||
.menu-burger>summary::-webkit-details-marker{display:none}
|
||
.burger-lines{position:relative;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
|
||
.menu-burger[open]>summary{border-radius:8px 8px 0 0}
|
||
.menu-burger-body{padding:14px 0 4px}
|
||
.menu-burger-body .menu-list{flex-direction:column;align-items:flex-start;gap:8px}
|
||
/* Der Knopf „nach oben". Ein Anker, kein Skript: er springt an den Anfang der Seite, und das
|
||
kann ein Browser seit jeher allein. Eingeblendet wird er beim Scrollen über eine Scroll-
|
||
Zeitachse - dieselbe Technik wie bei den Einblendungen. Wo es die nicht gibt (heute noch
|
||
Safari), steht er von Anfang an da: sichtbar und nutzbar ist besser als unsichtbar.
|
||
Aussehen, Größe, Form, Seite und Schwelle kommen aus den Einstellungen. */
|
||
.scroll-top{position:fixed;bottom:22px;right:22px;z-index:40;display:grid;place-items:center;width:var(--kant-top-size,48px);height:var(--kant-top-size,48px);border-radius:var(--kant-top-radius,999px);background:var(--kant-top-bg,var(--accent));color:var(--kant-top-ink,#fff);text-decoration:none;box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 28%,transparent);font-size:calc(var(--kant-top-size,48px) / 2.4);line-height:1}
|
||
.scroll-top-links{right:auto;left:22px}
|
||
.scroll-top:hover{filter:brightness(1.08)}
|
||
.scroll-top:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
|
||
@media (max-width:767px){.scroll-top{bottom:16px;right:16px}.scroll-top-links{left:16px;right:auto}}
|
||
/* Solange der Einwilligungsdialog unten steht, würde der Knopf darauf liegen. */
|
||
body.consent-open .scroll-top{display:none}
|
||
@supports (animation-timeline: scroll()){
|
||
@media (prefers-reduced-motion: no-preference){
|
||
.scroll-top{animation:kant-scroll-top linear both;animation-timeline:scroll(root);animation-range:var(--kant-top-after,400px) calc(var(--kant-top-after,400px) + 160px)}
|
||
@keyframes kant-scroll-top{from{opacity:0;visibility:hidden;transform:translateY(10px)}to{opacity:1;visibility:visible;transform:none}}
|
||
}
|
||
}
|
||
/* Der Bildbetrachter. Die Fläche daneben schließt, das Bild bleibt in seinen Grenzen, und die
|
||
Bedienknöpfe sind groß genug für einen Daumen. Ohne Skript wird nichts davon gebraucht - dann
|
||
öffnet der Verweis einfach das große Bild. */
|
||
.block-legal{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
|
||
.block-legal a{color:inherit;text-decoration:none}
|
||
.block-legal a:hover{text-decoration:underline}
|
||
.image-zoom{cursor:zoom-in}
|
||
.zoom-dialog{border:0;padding:0;max-width:min(96vw,1400px);max-height:94vh;background:transparent;color:#fff;overflow:visible}
|
||
.zoom-dialog::backdrop{background:rgba(8,12,20,.88)}
|
||
.zoom-figure{margin:0;display:grid;gap:12px;justify-items:center}
|
||
.zoom-image{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:10px;background:#0c1220}
|
||
.zoom-caption{margin:0;font-size:14px;text-align:center;max-width:70ch;color:#e7ecf3}
|
||
.zoom-close,.zoom-prev,.zoom-next{position:fixed;display:grid;place-items:center;width:52px;height:52px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
|
||
.zoom-close:hover,.zoom-prev:hover,.zoom-next:hover{background:rgba(255,255,255,.26)}
|
||
.zoom-close:focus-visible,.zoom-prev:focus-visible,.zoom-next:focus-visible{outline:3px solid #fff;outline-offset:3px}
|
||
.zoom-close{top:18px;right:18px}
|
||
.zoom-prev{left:18px;top:50%;transform:translateY(-50%)}
|
||
.zoom-next{right:18px;top:50%;transform:translateY(-50%)}
|
||
.zoom-counter{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);margin:0;font-size:13px;color:#e7ecf3}
|
||
@media (max-width:767px){
|
||
.zoom-close,.zoom-prev,.zoom-next{width:46px;height:46px}
|
||
.zoom-prev{left:8px}.zoom-next{right:8px}
|
||
}
|