kantarciandClaude Opus 5
99b3aba39a
Umut: "Beim Smarphone/iphone geht der button scroll to top nicht. hier gehts." The button was there and did nothing, on every page of every installation, and tapping it did not even put #seitenanfang in the address bar - so the tap never reached the page. Safari on the iPhone folds its address bar into a narrow strip while reading and lays that over the content. A fixed element measures its "bottom" against the full viewport, not against the part that is left: the button stood in the strip the browser had taken for itself. Drawn, visible, and every tap landed on the bar. Measured at 390x844 the button occupies y 780 to 828 - the bottom 64 pixels, which is where that strip sits. The difference between the large viewport (bar folded) and the small one (bar out) is exactly that height, so --kant-browser-chrome carries it and the pieces that stick to the bottom add it. Where there is no such bar it is zero and nothing moves. The @supports around it is not caution but necessity: a browser that does not know lvh/svh would find the calculation invalid at computed-value time, and bottom would fall back to auto - the button would then stand anywhere. The consent bar has the same geometry, so "Annehmen" and "Ablehnen" were just as hard to hit. It is lifted the same way, except where it is glued to the edge - raising it there would leave a gap with the page showing through, so its bottom padding grows instead and the buttons move up with it. Verified with a test page that sets the height to 50px, the only way to see the effect without an iPhone: the button moves up by exactly 50px, the glued bar keeps its edge and its padding goes from 16px to 66px. On the real page in Chromium bottom stays 16px and the jump still goes 1500 to 0. Not verified on a real iPhone - that needs the device. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
590 lines
53 KiB
CSS
590 lines
53 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:var(--k-scheme,light);--paper:#f7f8f4;--ink:#182d2b;--muted:#50625d;--line:#d7dfd7;--mint:#e5f0b6;--accent:#315b49;--error:var(--k-error,#8b2f22);--error-bg:var(--k-error-bg,#fff0eb);--error-line:var(--k-error-line,#e2b2a7);font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
|
||
/* Die Hoehe der Browserleiste, die ueber dem Inhalt liegt.
|
||
Safari auf dem iPhone schiebt seine Adressleiste beim Herunterscrollen zu einem schmalen
|
||
Balken zusammen und legt den ueber die Seite. Ein fixiertes Element rechnet sein `bottom`
|
||
aber gegen die volle Ansicht, nicht gegen den freien Teil - was unten klebt, steht damit in
|
||
dem Streifen, den der Browser sich selbst genommen hat. Sichtbar ist es, aber jeder Tipp
|
||
landet auf der Leiste. Genau das war mit dem Nach-oben-Knopf: am Schreibtisch tadellos, auf
|
||
dem Telefon tot, auf jeder Seite jeder Installation.
|
||
Die Differenz zwischen grosser Ansicht (`lvh`, Leiste zusammengeschoben) und kleiner Ansicht
|
||
(`svh`, Leiste ausgefahren) ist genau diese Hoehe. Wo es keine solche Leiste gibt, ist sie
|
||
null, und nichts verschiebt sich.
|
||
Die Abfrage davor ist Pflicht, nicht Vorsicht: kennt ein Browser die Einheiten nicht, waere
|
||
die Rechnung erst beim Errechnen ungueltig, und `bottom` fiele auf `auto` zurueck - das Ding
|
||
stuende dann irgendwo. So bleibt es schlicht bei null. */
|
||
:root{--kant-browser-chrome:0px}
|
||
@supports (height:100lvh) and (height:100svh){:root{--kant-browser-chrome:calc(100lvh - 100svh)}}
|
||
*{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)}
|
||
/* Über dem Inhalt: der Kopf nimmt keinen Platz ein, die erste Sektion beginnt unter ihm. Farbe
|
||
und Schatten kommen aus der Gestaltung des Kopfbereichs, auch die für den gescrollten Zustand. */
|
||
.site-header.is-overlay{position:absolute;top:0;left:0;right:0;z-index:40;border-bottom:0;background:transparent;box-shadow:none}
|
||
.site-header.is-overlay.is-sticky{position:fixed}.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}h2{font-size:clamp(32px,4vw,49px);font-weight:500}h3{font-size:26px;letter-spacing:-.035em;line-height:1.2}.block-text{font-size:18px;line-height:1.7;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:var(--paper);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:767px){.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:767px){.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}
|
||
/* Gestapelt brauchen Karten den Abstand; nebeneinander in einer Zeile macht er die zweite bis
|
||
letzte Karte um genau diesen Betrag niedriger als die erste, weil ein Rand im Rasterfeld liegt. */
|
||
.block-row > .block-iconcard + .block-iconcard,.block-row > .block-quote + .block-quote,.block-row > .block-cta + .block-cta,.block-row > .block-iconcard + .block-quote,.block-row > .block-quote + .block-iconcard{margin-top:0}
|
||
.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-cta .button{background:var(--accent);color:var(--paper);border-color:var(--accent)}.kant .block-cta .button:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}.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}
|
||
.block-form>.cms-button{justify-self:start}
|
||
/* Ausrichtung eines Buttons (Design-Token „align"): ein inline-flex-Element zentriert sich nicht
|
||
über margin:auto, darum hier als Block mit eigener Breite - in Spalten, Zeilen und Rastern. */
|
||
.kant .cms-button.d-desktop-align-left{justify-self:start;margin-inline:0}
|
||
.kant .cms-button.d-desktop-align-center{display:flex;width:fit-content;margin-inline:auto;justify-self:center}
|
||
.kant .cms-button.d-desktop-align-right{display:flex;width:fit-content;margin-inline:auto 0;justify-self:end}
|
||
@media(max-width:1024px){.kant .cms-button.d-tablet-align-left{display:inline-flex;width:auto;justify-self:start;margin-inline:0}.kant .cms-button.d-tablet-align-center{display:flex;width:fit-content;margin-inline:auto;justify-self:center}.kant .cms-button.d-tablet-align-right{display:flex;width:fit-content;margin-inline:auto 0;justify-self:end}}
|
||
@media(max-width:767px){.kant .cms-button.d-mobile-align-left{display:inline-flex;width:auto;justify-self:start;margin-inline:0}.kant .cms-button.d-mobile-align-center{display:flex;width:fit-content;margin-inline:auto;justify-self:center}.kant .cms-button.d-mobile-align-right{display:flex;width:fit-content;margin-inline:auto 0;justify-self:end}}
|
||
.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 var(--form-border,currentColor);border-radius:8px;background:var(--form-bg,#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:var(--error)}
|
||
.field-error{margin:0;font-size:13px;font-weight:600;color:var(--error)}
|
||
.field-note{margin:0;font-size:13px;opacity:.8}
|
||
.form-error-summary{margin:0;padding:14px 18px;border-radius:8px;background:var(--error-bg);color:var(--error);border:1px solid var(--error-line);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:var(--error)}
|
||
/* 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}
|
||
/* Schritte, Bedingungen, Zusammenfassung. Ohne Skript: Abschnitte untereinander, alles sichtbar. */
|
||
.form-step{display:grid;gap:20px;margin:0;padding:0;border:0;min-width:0}
|
||
/* Ein Schritt und der Absendeknopf sind Raster bzw. inline-flex - das hidden-Attribut muss trotzdem gelten. */
|
||
.block-form [hidden]{display:none!important}
|
||
.form-step-title{padding:0;margin:0;font-weight:600;font-size:18px;line-height:1.3}
|
||
.form-step-title:focus{outline:none}
|
||
.form-step-intro{margin:-8px 0 0;font-size:14px;opacity:.85}
|
||
.form-choice{display:grid;gap:10px;margin:0;padding:0;border:0;min-width:0}
|
||
.form-choice legend{padding:0;margin-bottom:2px;font-weight:600;font-size:14px}
|
||
.form-choice .check-row{align-items:center}
|
||
.form-choice .check-row input{margin-top:0}
|
||
/* Bildauswahl: jede Option eine Karte, das Kästchen bleibt für Tastatur und Vorlesesoftware. */
|
||
.form-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
|
||
.form-choice-card{position:relative}
|
||
.form-choice-card input{position:absolute;top:10px;left:10px;width:20px;height:20px;margin:0;z-index:1}
|
||
.form-choice-card label{display:grid;gap:8px;padding:8px;border:2px solid var(--form-border,currentColor);border-radius:10px;background:var(--form-bg,#fff);cursor:pointer;font-weight:600;font-size:14px;text-align:center;transition:border-color .2s,box-shadow .2s}
|
||
.form-choice-card label:hover{border-color:var(--kb-fill,var(--accent))}
|
||
.form-choice-card input:checked+label{border-color:var(--kb-fill,var(--accent));box-shadow:0 0 0 2px var(--kb-fill,var(--accent))}
|
||
.form-choice-card input:focus-visible+label{outline:3px solid var(--kb-fill,var(--accent));outline-offset:3px}
|
||
.form-choice-picture{display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:color-mix(in srgb,currentColor 6%,transparent)}
|
||
.form-choice-picture img{display:block;width:100%;height:100%;object-fit:cover}
|
||
.form-choice-text{display:block;padding:0 4px 4px}
|
||
.form-number{display:flex;align-items:center;gap:10px}
|
||
.form-number input{flex:1 1 auto;min-width:0}
|
||
.form-unit{flex:none;font-size:14px;opacity:.8}
|
||
[data-inactive]{display:none!important}
|
||
.form-progress{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0;font-size:13px}
|
||
.form-progress-step{display:flex;align-items:center;gap:8px;opacity:.55}
|
||
.form-progress-step[aria-current]{opacity:1;font-weight:600}
|
||
.form-progress-step.is-done{opacity:.85}
|
||
.form-progress-number{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid currentColor;font-size:12px}
|
||
.form-progress-step[aria-current] .form-progress-number,.form-progress-step.is-done .form-progress-number{background:var(--kb-fill,var(--accent));color:var(--kb-ink,#fff);border-color:transparent}
|
||
.form-step-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
|
||
.form-step-nav .form-step-back{--kb-fill:transparent;--kb-ink:currentColor;--kb-hover-fill:transparent;--kb-hover-ink:currentColor;border:1px solid currentColor;background:transparent;color:inherit}
|
||
.form-summary-body{display:grid;gap:18px}
|
||
.form-summary-step{padding:16px 18px;border:1px solid var(--form-border,currentColor);border-radius:8px}
|
||
.form-summary-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
|
||
.form-summary-title{margin:0;font-size:15px;font-weight:600}
|
||
.form-summary-change{border:0;padding:0;background:none;color:inherit;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
|
||
.form-summary-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:6px 16px;margin:0;font-size:14px}
|
||
.form-summary-list dt{font-weight:600}
|
||
.form-summary-list dd{margin:0;overflow-wrap:anywhere}
|
||
.form-summary-empty{opacity:.6}
|
||
@media(max-width:767px){.form-summary-list{grid-template-columns:1fr;gap:2px 0}.form-summary-list dd{margin-bottom:8px}}
|
||
|
||
.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:color-mix(in srgb,var(--paper) 86%,var(--ink))}
|
||
|
||
/* 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.
|
||
|
||
Aussehen aus den Einstellungen: `--kant-consent-*` im Kopf der Seite (Consent::styles), die
|
||
Anordnung als Klasse. Ohne Einstellung gilt Papier, Tinte und Akzent des Themes. Ein Wert wie
|
||
`--k-consent` aus der Palette bleibt als Zwischenstufe erhalten. */
|
||
/* Das `+ var(--kant-browser-chrome)` hebt die Leiste ueber Safaris zusammengeschobene
|
||
Adressleiste; sonst liegen „Annehmen“ und „Ablehnen“ unter ihr und sind nicht zu treffen. */
|
||
.consent-bar{position:fixed;inset-inline:16px;bottom:calc(16px + var(--kant-browser-chrome));z-index:50;max-width:640px;max-height:calc(100dvh - 24px);overflow:auto;margin-inline:auto;background:var(--kant-consent-bg,var(--paper));color:var(--kant-consent-ink,var(--ink));border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:var(--kant-consent-radius,18px);padding:22px 24px 20px;box-shadow:0 24px 60px color-mix(in srgb,var(--ink) 22%,transparent);font-size:14px;line-height:1.6;overscroll-behavior:contain}
|
||
/* Ein schmaler Streifen in der Akzentfarbe oben: die Fläche gehört sichtbar zur Website. */
|
||
.consent-bar::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
|
||
.kant .consent-bar h2{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.3;margin:0 0 8px}
|
||
.consent-icon{flex:none;color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
|
||
.consent-bar p{margin:0 0 16px;color:color-mix(in srgb,currentColor 82%,transparent)}
|
||
.consent-actions{display:flex;flex-wrap:wrap;gap:10px}
|
||
.consent-button{display:inline-flex;align-items:center;justify-content:center;flex:1 1 150px;min-height:46px;padding:11px 18px;border-radius:var(--kant-consent-button-radius,10px);border:1.5px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));background:var(--kant-consent-accent,var(--k-consent,var(--accent)));color:var(--kant-consent-accent-ink,#fff);font:inherit;font-weight:600;cursor:pointer;transition:filter .12s,background-color .12s}
|
||
.consent-decline,.consent-choice{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 28%,transparent)}
|
||
.consent-button:hover{filter:brightness(.94)}
|
||
.consent-decline:hover,.consent-choice:hover{filter:none;background:color-mix(in srgb,currentColor 7%,transparent)}
|
||
.consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));outline-offset:2px}
|
||
/* Fusszeile der Frage: Einzelwahl links, Rechtslinks rechts, auf einer Linie. Aufgeklappt
|
||
nimmt die Einzelwahl die volle Breite und die Links rutschen rechtsbuendig darunter. */
|
||
.consent-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;margin-top:14px}
|
||
.consent-details{flex:0 1 auto;min-width:0}
|
||
.consent-details[open]{flex-basis:100%}
|
||
.consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:6px 0;list-style:none;display:inline-flex;align-items:center;gap:6px}
|
||
.consent-details>summary::-webkit-details-marker{display:none}
|
||
.consent-details>summary::after{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
|
||
.consent-details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
|
||
.consent-details>summary:hover{text-decoration:underline}
|
||
.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;accent-color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
|
||
.consent-choice{margin-top:14px;flex:none;width:auto}
|
||
/* Eigener Selektor mit Element, sonst gewinnt `.consent-bar p` und nimmt den Rand rechts weg. */
|
||
.consent-bar p.consent-links{margin:0 0 0 auto;display:flex;gap:14px;font-size:12px;color:color-mix(in srgb,currentColor 72%,transparent)}
|
||
.consent-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
|
||
.consent-links a:hover{color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
|
||
/* Leiste: über die ganze Breite am unteren Rand, auf breiten Bildschirmen Text links und Knöpfe
|
||
rechts. Ecke: eine kleine Karte rechts unten, die den Inhalt kaum verdeckt. */
|
||
/* Klebt die Leiste an der Kante, wird sie nicht angehoben - das gaebe einen Spalt, durch den
|
||
die Seite scheint. Stattdessen waechst ihr unterer Innenabstand um die Hoehe der
|
||
Browserleiste, sodass die Knoepfe darueber bleiben. */
|
||
.consent-layout-leiste{inset-inline:0;bottom:0;max-width:none;border-radius:var(--kant-consent-radius,18px) var(--kant-consent-radius,18px) 0 0;border-inline:0;border-bottom:0;padding-inline:max(24px,calc((100% - 1180px) / 2));padding-bottom:calc(20px + var(--kant-browser-chrome))}
|
||
@media (min-width:900px){.consent-layout-leiste{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 40px;align-items:center}.consent-layout-leiste .consent-body p{margin-bottom:0}.consent-layout-leiste .consent-form{width:360px;max-width:100%}}
|
||
.consent-layout-ecke{inset-inline:auto 16px;max-width:400px;margin:0}
|
||
/* 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. Auf schmalen Bildschirmen ist die Leiste
|
||
mit Standardtext bis 290 px hoch; 320 px lassen ihr Luft, ohne einen Bildschirm zu verschenken. */
|
||
body.consent-open{padding-bottom:320px}
|
||
@media (min-width:621px){body.consent-open{padding-bottom:270px}}
|
||
@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;max-height:none;margin:24px 0 0;display:block}
|
||
@media (max-width:620px){.consent-bar,.consent-layout-ecke{inset-inline:0;bottom:0;max-width:none;border-radius:var(--kant-consent-radius,18px) var(--kant-consent-radius,18px) 0 0;border-inline:0;border-bottom:0;padding:18px 18px calc(16px + var(--kant-browser-chrome))}.consent-layout-leiste{padding-inline:18px}}
|
||
|
||
/* 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)}
|
||
/* Eigenes HTML: nur so viel Regel, dass fremdes Markup die Spalte nicht sprengt. Alles
|
||
Weitere bestimmt der Code selbst - das ist der Zweck des Bausteins. */
|
||
.block-html{max-width:100%}
|
||
.block-html img,.block-html video,.block-html table{max-width:100%}
|
||
.block-html table{border-collapse:collapse}
|
||
|
||
/* 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}
|
||
/* 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}
|
||
/* Das eingebettete SVG traegt dieselbe Klasse wie seine Huelle und setzte deshalb die
|
||
Akzentfarbe erneut - eine am Symbolblock eingestellte Farbe kam nie an. */
|
||
.block-icon .block-icon{color:inherit}
|
||
.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{position:relative}
|
||
@supports selector(::scroll-marker){.slider-dots:not(.slider-controlled){scroll-marker-group:after;scroll-behavior:smooth;padding-bottom:0;scrollbar-width:none;scrollbar-gutter:auto}.slider-dots:not(.slider-controlled)::-webkit-scrollbar{display:none}.slider-dots:not(.slider-controlled)>*::scroll-marker{content:'';width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--slider-dot,currentColor) 30%,transparent);margin:0 6px;cursor:pointer}.slider-dots>*::scroll-marker:target-current{background:var(--slider-dot,var(--accent))}.slider-dots::scroll-marker-group{display:flex;justify-content:center;align-items:center;padding:14px 0 2px}}
|
||
.slider-controlled{scrollbar-width:none;scrollbar-gutter:auto}.slider-controlled::-webkit-scrollbar{display:none}
|
||
/* Die Steuerung liegt auf dem Bild, wie beim Hero-Slider von kant-it.de: runde Pfeile links und
|
||
rechts, Punkte unten rechts (der aktive als Strich in der Akzentfarbe), Pause klein unten links,
|
||
kein Zähler. Farben kommen aus der Gestaltung des Sliders (--slider-*). */
|
||
.slider-shell{position:relative}
|
||
.slider-controls{position:absolute;inset:0;margin:0;padding:0;pointer-events:none;font:14px/1 system-ui,sans-serif}
|
||
.slider-controls button{pointer-events:auto;cursor:pointer;font:inherit;padding:0;border:0;background:transparent;color:inherit}
|
||
.slider-controls button:focus-visible{outline:3px solid var(--slider-dot-active,var(--accent));outline-offset:3px}
|
||
.slider-controls .slider-prev,.slider-controls .slider-next{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:var(--slider-bg,rgba(255,255,255,.9));color:var(--slider-ink,var(--accent));display:flex;align-items:center;justify-content:center;font-size:0;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:background-color .2s,color .2s,transform .2s}
|
||
.slider-prev{left:24px}.slider-next{right:24px}
|
||
.slider-prev::before,.slider-next::before{content:'';width:12px;height:12px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:5px}
|
||
.slider-next::before{transform:rotate(-135deg);margin-left:-5px}
|
||
.slider-controls .slider-prev:hover,.slider-controls .slider-next:hover{background:var(--slider-dot-active,var(--accent));color:#fff}
|
||
.slider-prev:disabled,.slider-next:disabled{opacity:.4;cursor:default}
|
||
.slider-position{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
|
||
.slider-control-dots{position:absolute;right:70px;bottom:20px;display:flex;gap:3px}
|
||
.slider-control-dots button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:0;transition:width .25s}
|
||
.slider-control-dots button::before{content:'';width:9px;height:9px;border-radius:99px;background:var(--slider-dot,rgba(255,255,255,.55));transition:width .25s,background-color .25s}
|
||
.slider-control-dots button[aria-pressed=true]{width:40px}
|
||
.slider-control-dots button[aria-pressed=true]::before{width:28px;background:var(--slider-dot-active,var(--accent))}
|
||
.slider-control-dots button:hover::before{background:var(--slider-dot-active,var(--accent))}
|
||
.slider-controls .slider-play{position:absolute;right:24px;bottom:16px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:0;display:flex;align-items:center;justify-content:center}
|
||
.slider-play::before{content:'';width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
|
||
.slider-play[data-playing=true]::before{width:8px;height:11px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor;margin-left:0}
|
||
.slider-play:disabled{opacity:.4;cursor:default}
|
||
.slider-controls[hidden]{display:none}
|
||
@media(max-width:767px){.slider-controls .slider-prev,.slider-controls .slider-next{display:none}.slider-control-dots{right:54px;bottom:14px}.slider-controls .slider-play{right:14px;bottom:12px}}
|
||
|
||
.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:767px){
|
||
.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. */
|
||
/* Mit ".kant" davor, weil das Design ".kant .shell{max-width:var(--k-container)}" schreibt: ohne
|
||
den Zusatz gewann diese Regel und ein breiter oder voller Abschnitt blieb so schmal wie alle. */
|
||
.kant .width-wide>.section-inner{width:min(1600px,calc(100% - 64px));max-width:none}
|
||
.kant .width-full>.section-inner{width:100%;max-width:none;margin-inline:0}
|
||
@media (max-width:767px){.kant .width-wide>.section-inner{width:calc(100% - 36px)}}
|
||
|
||
/* Ein Abschnitt, der ein Flex-Kasten ist, reiht seinen Inhaltskasten als Flex-Element ein.
|
||
Wachsen darf der dabei nicht: die Laufrichtung ist voreingestellt die Zeile, und dort frisst
|
||
das Wachsen die Randluft des Containers. Auf dem Telefon stand der Text eines Hero-Abschnitts
|
||
damit hart an der Kante, waehrend Kopf und alle uebrigen Abschnitte ihre 18 px hatten - am
|
||
Schreibtisch fiel es nicht auf, weil dort die Hoechstbreite des Designs vorher bremst.
|
||
Die Hoehe braucht das Wachsen nicht: quer zur Laufrichtung dehnt sich ein Flex-Element
|
||
ohnehin ueber die volle Hoehe, und steht "Ausrichtung: Mitte", ist die Mitte gewollt. */
|
||
.block-section>.section-inner{flex:0 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}
|
||
/* Only one copy participates in layout, focus order and the accessibility tree. */
|
||
.menu-collapse-tablet>.menu-burger,.menu-collapse-mobile>.menu-burger{display:none}
|
||
@media (max-width:1024px),(hover:none) and (pointer:coarse){
|
||
.menu-collapse-tablet>.menu-burger{display:block}
|
||
.menu-collapse-tablet>.menu-list{display:none}
|
||
}
|
||
@media (max-width:767px){
|
||
.menu-collapse-mobile>.menu-burger{display:block}
|
||
.menu-collapse-mobile>.menu-list{display:none}
|
||
}
|
||
.menu-burger>summary{min-height:44px;min-width:44px}
|
||
.menu-burger-body{overflow-wrap:anywhere}
|
||
/* Im Kopfbereich klappt das Menue als Flaeche unter dem Kopf auf, ueber die volle Breite.
|
||
Inline geoeffnet stand es sonst in der schmalen Spalte neben der Marke und schob den
|
||
ganzen Kopf auseinander - auf dem Telefon sah es aus, als fehle das Menue. */
|
||
.site-header{position:relative}
|
||
/* Gibt der Kopfbereich seine Flaeche selbst vor, malt der klebende Kopf keine zweite dahinter:
|
||
sonst zeigte eine durchsichtige Sektion Weiss statt Seite, und die Schattenlinie liesse sich
|
||
weder faerben noch abschalten. Linie und Schatten kommen dann aus Rahmen und Wirkung. */
|
||
.site-header.is-sticky.has-own-surface{background:transparent;box-shadow:none}
|
||
.site-header .menu-burger[open]>summary{border-radius:8px}
|
||
/* Die Flaeche malt ihren eigenen Untergrund, also setzt sie auch ihre eigene Schriftfarbe.
|
||
Ohne das erbte sie die Farbe des Kopfbereichs: bei einem Kopf, der ueber einem dunklen Bild
|
||
schwebt und deshalb weiss schreibt, stand das aufgeklappte Menue weiss auf weiss. */
|
||
.site-header .menu-burger-body{position:absolute;left:0;right:0;top:100%;z-index:30;
|
||
padding:15px max(16px,calc((100% - var(--k-container,1180px)) / 2 + 16px)) 25px;
|
||
background:var(--paper);color:var(--ink);
|
||
box-shadow:0 15px 25px color-mix(in srgb,var(--ink) 12%,transparent)}
|
||
.site-header .menu-burger-body .menu-list{gap:0}
|
||
.site-header .menu-burger-body .menu-list a{padding:12px 10px;font-size:16px}
|
||
/* Visibility never overwrites the block's grid/flex/display settings. */
|
||
.visibility-hidden{display:none!important}
|
||
.slider-controls button[hidden]{display:none}
|
||
@media (min-width:1025px){.visibility-tablet,.visibility-mobile,.visibility-hide-desktop{display:none!important}}
|
||
@media (min-width:768px) and (max-width:1024px){.visibility-desktop,.visibility-mobile,.visibility-hide-tablet{display:none!important}}
|
||
@media (max-width:767px){.visibility-desktop,.visibility-tablet,.visibility-hide-mobile{display:none!important}}
|
||
/* 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}
|
||
/* Ueber die Browserleiste hinaus, sonst ist der Knopf auf dem Telefon nicht zu treffen. */
|
||
.scroll-top{bottom:calc(22px + var(--kant-browser-chrome))}
|
||
.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:calc(16px + var(--kant-browser-chrome));right:16px}.scroll-top-links{left:16px;right:auto}}
|
||
/* Solange die Einwilligungsfrage offen ist, bleibt der Knopf da. Frueher verschwand er ganz -
|
||
und auf dem Telefon bleibt die Frage oft einfach stehen, der Knopf kam dort also nie.
|
||
Bis 799 px deckt die Leiste die Ecke ab, in der er steht: dort setzt er sich per
|
||
Ankerpositionierung auf ihre Oberkante, wie hoch ihr Text auch umbricht. Ab 800 px steht die
|
||
Leiste zentriert mit Rand, die Ecke bleibt frei. Ein Browser ohne Ankerpositionierung blendet
|
||
ihn in der schmalen Stufe weiter aus - lieber kein Knopf als einer unter der Leiste. Der Anker
|
||
muss im Dokument vor dem Knopf stehen; page.html.twig gibt die Leiste deshalb zuerst aus. */
|
||
.consent-bar{anchor-name:--kant-consent}
|
||
@media (max-width:799px){
|
||
@supports (anchor-name:--kant-consent){body.consent-open .scroll-top{position-anchor:--kant-consent;bottom:calc(anchor(top) + 12px)}}
|
||
@supports not (anchor-name:--kant-consent){body.consent-open .scroll-top{display:none}}
|
||
}
|
||
/* Leiste und Ecke decken die Ecke auf jeder Breite ab - dort gilt dasselbe ohne Stufe. */
|
||
@supports (anchor-name:--kant-consent){body.consent-open:has(.consent-layout-leiste,.consent-layout-ecke) .scroll-top{position-anchor:--kant-consent;bottom:calc(anchor(top) + 12px)}}
|
||
@supports not (anchor-name:--kant-consent){body.consent-open:has(.consent-layout-leiste,.consent-layout-ecke) .scroll-top{display:none}}
|
||
/* Sichtbar, sobald der Leser ein Stueck gescrollt hat - gesteuert von scrolled.js ueber
|
||
`kant-top-armed` und `kant-top-shown`. Ohne Skript bleibt der Knopf einfach sichtbar. */
|
||
html.kant-top-armed .scroll-top{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,visibility .25s,transform .25s}
|
||
html.kant-top-armed.kant-top-shown .scroll-top{opacity:1;visibility:visible;transform:none}
|
||
@media (prefers-reduced-motion: reduce){html.motion-respect .scroll-top{transition: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}
|
||
}
|
||
|
||
.has-anchor{position:relative}.block-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:110px}.nav-label{display:inline-flex;align-items:center;gap:.5em}.nav-label>.block-icon{width:1.1em;height:1.1em;color:inherit;flex:none}
|
||
|
||
/* Soziale Profile: eine Symbolreihe, Farbe und Abstand vom Block, Größe als Klasse. */
|
||
.block-social{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0;padding:0;list-style:none}.block-social.social-vertical{flex-direction:column;align-items:flex-start}.block-social a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;line-height:1;transition:transform .2s,background-color .2s,opacity .2s}.block-social a:hover{transform:translateY(-2px)}.block-social svg{display:block;flex:none}.block-social.social-labels a{font-size:.875em;font-weight:600}.social-shape-circle a,.social-shape-square a{padding:.5em;background:color-mix(in srgb,currentColor 10%,transparent)}.social-shape-circle a{border-radius:999px}.social-shape-square a{border-radius:.35em}.social-shape-circle a:hover,.social-shape-square a:hover{background:color-mix(in srgb,currentColor 18%,transparent)}.social-labels.social-shape-circle a,.social-labels.social-shape-square a{padding-inline:.8em}.social-size-12 svg{width:12px;height:12px}.social-size-16 svg{width:16px;height:16px}.social-size-20 svg{width:20px;height:20px}.social-size-24 svg{width:24px;height:24px}.social-size-32 svg{width:32px;height:32px}.social-size-40 svg{width:40px;height:40px}.social-size-48 svg{width:48px;height:48px}.social-size-56 svg{width:56px;height:56px}.social-size-64 svg{width:64px;height:64px}.social-size-80 svg{width:80px;height:80px}.social-size-96 svg{width:96px;height:96px}.social-size-120 svg{width:120px;height:120px}.social-size-160 svg{width:160px;height:160px}.social-size-200 svg{width:200px;height:200px}.social-size-240 svg{width:240px;height:240px}
|
||
@media(prefers-reduced-motion:reduce){html.motion-respect .block-social a{transition:none}html.motion-respect .block-social a:hover{transform:none}}
|
||
|
||
/* Druck: eine Seite, die man mitnimmt. Kein Kopf mit Menü, keine Einwilligung, kein Nach-oben,
|
||
keine Formularknöpfe; Verweise zeigen ihre Adresse, Bilder bleiben auf der Seite. */
|
||
@media print{
|
||
.kant{background:#fff;color:#000}
|
||
.site-header nav,.menu-toggle,.skip-link,.scroll-top,.consent-bar,.consent-banner,.block-form .cms-button,.form-step-nav,.form-progress,.post-pager,.lightbox,.slider-controls,.slider-dots,.tabs-nav,.cf-turnstile{display:none!important}
|
||
.site-header,.site-footer{border:0}
|
||
.site-header.is-sticky,.site-header.is-overlay,.site-header.is-overlay.is-sticky{position:static;background:transparent;box-shadow:none}
|
||
a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444}
|
||
.block-section{padding:16px 0;break-inside:avoid}
|
||
img{max-width:100%;break-inside:avoid}
|
||
.tone-ink,.tone-mint{background:transparent;color:#000}
|
||
[data-step][hidden],.block-form [hidden]{display:block!important}
|
||
}
|