/* ============================================================================ COFFEE FESTIVAL EUROPE — Barrierefreiheits-Schalter und Panel ---------------------------------------------------------------------------- a11y.js baut den Knopf und das Panel im Markup auf, aber im ausgelieferten Stand fehlte die zugehörige Gestaltung — der Knopf lag als nulldünnes Element am Dokumentende und war deshalb unsichtbar. Diese Datei holt das nach. Der Knopf sitzt unten links, gegenüber dem Kontakt-Orb unten rechts, und liegt eine Ebene unter dem Menü: wer das Menü öffnet, soll ihn nicht darüberliegen sehen. */ .axfab{ position:fixed; z-index:128; left:clamp(14px,2vw,30px); bottom:clamp(14px,2vw,30px); width:clamp(44px,3.4vw,52px); aspect-ratio:1; padding:0; display:grid; place-items:center; cursor:pointer; border-radius:50%; border:1px solid rgba(244,238,228,.26); background:rgba(11,8,6,.62); color:var(--ivory); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:border-color .22s ease, background .22s ease, transform .22s ease, opacity .3s ease} .axfab svg{width:56%; height:56%; display:block} .axfab:hover{border-color:var(--ember); background:rgba(11,8,6,.86); transform:translateY(-2px)} .axfab:focus-visible{outline:2px solid var(--ember); outline-offset:3px} /* Der alte Knopf unten links wich dem Menue aus. Der Knopf in der Leiste oben bleibt auch bei offenem Menue da — dort steht er neben Ton und Schliessen. */ body.menu-open .axfab:not(.axfab--band){opacity:0; pointer-events:none} .nav.is-light ~ .axfab, body.is-light .axfab{ border-color:rgba(11,8,6,.2); background:rgba(244,238,228,.82); color:var(--ink)} /* ---------- Panel --------------------------------------------------------- */ .axpanel{position:fixed; inset:0; z-index:200} .axpanel[hidden]{display:none} .axpanel__scrim{position:absolute; inset:0; background:rgba(11,8,6,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)} .axpanel__card{ position:absolute; left:clamp(12px,2vw,30px); bottom:clamp(12px,2vw,30px); width:min(430px, calc(100vw - 24px)); max-height:min(84vh, 780px); overflow-y:auto; padding:clamp(20px,2.4vw,30px); border-radius:18px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; background:var(--ink-2,#141210); border:1px solid rgba(244,238,228,.14); box-shadow:0 30px 80px rgba(0,0,0,.55); color:var(--ivory)} .axpanel__x{position:absolute; top:14px; right:14px; width:32px; height:32px; padding:0; display:grid; place-items:center; cursor:pointer; border-radius:50%; border:1px solid rgba(244,238,228,.18); background:transparent; color:var(--ivory)} .axpanel__x:hover{border-color:var(--ember); color:var(--ember)} .axpanel__x svg{width:14px; height:14px} .axpanel__h{font-family:var(--f-display); font-weight:700; font-stretch:104%; font-size:clamp(1.25rem,2.2vw,1.6rem); margin:.5rem 0 0; line-height:1.1} .axpanel__b{margin:.5rem 0 0; font-size:.9rem; line-height:1.55; color:rgba(244,238,228,.62)} .axgrp{margin-top:clamp(18px,2.2vw,26px); padding-top:clamp(14px,1.8vw,20px); border-top:1px solid rgba(244,238,228,.10)} .axgrp__h{margin:0 0 .7rem; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); font-weight:600} /* ---------- Schalterzeile ------------------------------------------------- */ .axrow{display:flex; align-items:flex-start; gap:1rem; padding:.55rem 0; cursor:pointer} .axrow__t{flex:1; display:flex; flex-direction:column; gap:.15rem} .axrow__t b{font-size:.94rem; font-weight:500; color:var(--ivory)} .axrow__t i{font-style:normal; font-size:.78rem; line-height:1.45; color:rgba(244,238,228,.52)} .axrow__in{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none} .axsw{flex:none; width:42px; height:24px; border-radius:999px; margin-top:.15rem; background:rgba(244,238,228,.14); border:1px solid rgba(244,238,228,.18); position:relative; transition:background .22s ease, border-color .22s ease} .axsw__k{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--ivory); transition:transform .24s cubic-bezier(.22,.72,.2,1)} .axrow__in:checked + .axsw{background:var(--ember); border-color:var(--ember)} .axrow__in:checked + .axsw .axsw__k{transform:translateX(18px)} .axrow__in:focus-visible + .axsw{outline:2px solid var(--ember); outline-offset:3px} /* ---------- Segmentierte Wahl --------------------------------------------- */ .axfield{padding:.55rem 0} .axfield__t{display:flex; flex-direction:column; gap:.15rem; margin-bottom:.5rem} .axfield__t b{font-size:.94rem; font-weight:500; color:var(--ivory)} .axfield__t i{font-style:normal; font-size:.78rem; line-height:1.45; color:rgba(244,238,228,.52)} .axseg{display:flex; gap:6px; flex-wrap:wrap} .axseg button{flex:1 1 auto; min-width:64px; padding:.5rem .6rem; cursor:pointer; font-size:.82rem; font-family:inherit; color:rgba(244,238,228,.72); background:rgba(244,238,228,.06); border:1px solid rgba(244,238,228,.14); border-radius:9px; transition:color .18s ease,border-color .18s ease,background-color .18s ease} .axseg button:hover{color:var(--ivory); border-color:rgba(244,238,228,.3)} .axseg button[aria-pressed="true"]{background:var(--ember-fest); border-color:var(--ember-fest); color:#fff} /* ---------- Tastenkürzel --------------------------------------------------- */ .axkeys{margin:0; display:grid; gap:.4rem} .axkeys > div{display:flex; justify-content:space-between; gap:1rem; align-items:baseline} .axkeys dt{font-size:.85rem; color:rgba(244,238,228,.72)} .axkeys dd{margin:0; font-family:var(--f-mono,ui-monospace,monospace); font-size:.78rem; color:var(--ivory); background:rgba(244,238,228,.08); padding:.16rem .45rem; border-radius:5px} /* ---------- Fuß ------------------------------------------------------------ */ .axfoot{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:clamp(18px,2.2vw,26px); padding-top:clamp(14px,1.8vw,20px); border-top:1px solid rgba(244,238,228,.10)} .axreset{padding:.55rem 1rem; cursor:pointer; font-family:inherit; font-size:.84rem; color:var(--ivory); background:transparent; border:1px solid rgba(244,238,228,.24); border-radius:999px; transition:color .18s ease,border-color .18s ease} .axreset:hover{border-color:var(--ember); color:var(--ember)} .axstmt{font-size:.84rem; color:rgba(244,238,228,.62); text-decoration:underline; text-underline-offset:3px} .axstmt:hover{color:var(--ember)} .axnote{margin:.9rem 0 0; font-size:.74rem; line-height:1.5; color:rgba(244,238,228,.52)} /* ---------- Leselineal ------------------------------------------------------ */ .axruler{position:fixed; left:0; right:0; top:0; height:68px; z-index:190; pointer-events:none; opacity:0; transition:opacity .2s ease; background:linear-gradient(180deg,rgba(11,8,6,.72) 0,rgba(11,8,6,0) 32%, rgba(11,8,6,0) 68%,rgba(11,8,6,.72) 100%)} html.a11y-ruler .axruler{opacity:1} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important; margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important; border:0!important} @media (max-width:560px){ .axpanel__card{left:8px; right:8px; bottom:8px; width:auto; max-height:88vh} } @media (prefers-reduced-motion:reduce){ .axfab,.axsw,.axsw__k,.axseg button,.axreset{transition:none} } /* ============================================================================ DIE SCHALTER GREIFEN JETZT AUCH ---------------------------------------------------------------------------- Bis hierher war dieses Stylesheet nur die Gestaltung von Knopf und Panel. a11y.js setzt seit jeher elf Zustände auf — a11y-readable, a11y-links, a11y-contrast, a11y-calm, a11y-focus, a11y-nocursor, --a11y-zoom und data-a11y-space —, aber im gesamten Projekt gab es dafür keine einzige Regel. Der Schalter kippte, der Zustand wurde gespeichert, die Seite blieb gleich. Nur „Bewegung reduzieren" und die Lesehilfe haben tatsächlich gewirkt. Was unten steht, löst die Versprechen ein, die im Panel selbst stehen — Wort für Wort so, wie sie dort formuliert sind. ========================================================================= */ /* ---- Textgröße --------------------------------------------------------- „Skaliert die gesamte Seite samt Bildern, so wie es der Browser-Zoom tut." Genau das macht `zoom` — im Gegensatz zu einer Schriftgrößenänderung, die an den vw-Anteilen der clamp()-Werte und an allen Bildern vorbeiliefe. */ :root{ zoom: var(--a11y-zoom, 1); } /* ---- Abstände ---------------------------------------------------------- Zwei Stufen nach WCAG 1.4.12: „Angenehm" liegt dazwischen, „Weit" trifft die dort geforderten Mindestwerte (Zeile 1,5 · Absatz 2,0 · Zeichen 0,12em · Wort 0,16em). Überschriften bleiben ausgenommen, sonst zerfallen die grossen Display-Zeilen. */ [data-a11y-space="1"] p,[data-a11y-space="1"] li,[data-a11y-space="1"] dd, [data-a11y-space="1"] figcaption,[data-a11y-space="1"] summary{ line-height:1.75!important;letter-spacing:.03em!important;word-spacing:.08em!important} [data-a11y-space="1"] p{margin-bottom:1.5em!important} [data-a11y-space="2"] p,[data-a11y-space="2"] li,[data-a11y-space="2"] dd, [data-a11y-space="2"] figcaption,[data-a11y-space="2"] summary{ line-height:1.9!important;letter-spacing:.12em!important;word-spacing:.16em!important} [data-a11y-space="2"] p{margin-bottom:2em!important} [data-a11y-space="2"] .label,[data-a11y-space="1"] .label{word-spacing:normal!important} /* ---- Schlichtere Schrift ----------------------------------------------- „Ersetzt Display- und Mono-Schrift durch die serifenlose Schrift Ihres Systems." Die gestreckten Schnitte der Display-Schrift fallen mit weg — font-stretch ist genau das, was das Lesen dort erschwert. */ .a11y-readable{ --f-display:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-mono:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif} .a11y-readable *{font-stretch:normal!important;font-variation-settings:normal!important} .a11y-readable .display,.a11y-readable .editorial,.a11y-readable .phead__title, .a11y-readable .city__name,.a11y-readable .menu__word,.a11y-readable .psec__title{ letter-spacing:-.01em!important} /* ---- Alle Links unterstreichen ----------------------------------------- „Links sind dann nicht mehr nur an ihrer Farbe zu erkennen." Ausgenommen sind Flächen, die als Ganzes klickbar sind — eine Karte oder eine Stadt trägt keine Unterstreichung, sie ist eine Fläche. */ .a11y-links a:not(.btn):not(.card):not(.city):not(.rail__i):not(.axfab):not(.orb):not([class*="__plate"]){ text-decoration:underline!important;text-underline-offset:.22em!important; text-decoration-thickness:from-font!important} .a11y-links .menu__links a{text-decoration:none!important} .a11y-links .menu__links a .menu__word{text-decoration:underline!important; text-underline-offset:.12em!important} /* ---- Höherer Kontrast -------------------------------------------------- „Hellerer Text, festere Linien, und die weichen Farbverläufe im Hintergrund werden abgeschaltet." Angefasst werden nur Schmuckebenen — Videoschleier und Diagrammflächen bleiben, sonst wird die Seite unlesbar statt lesbarer. */ .a11y-contrast{ --bone:#F6F0E6; --muted:#C4B7A8; --muted-2:#3A322C; --hairline:rgba(244,238,228,.34); --hairline-dark:rgba(11,8,6,.34); --ember-lo:#FFA877} .a11y-contrast [class*="glow"],.a11y-contrast .orb__halo,.a11y-contrast .hero__wash, .a11y-contrast .grain,.a11y-contrast .menu__wash{display:none!important} .a11y-contrast .label,.a11y-contrast .card__b,.a11y-contrast .rule__b, .a11y-contrast .psec__lede,.a11y-contrast .stick__b,.a11y-contrast .zug__b, .a11y-contrast .mtr__b,.a11y-contrast .flow__b,.a11y-contrast .jrn__rb, .a11y-contrast .fig__s,.a11y-contrast .kpi__b{opacity:1!important} .a11y-contrast :focus-visible{outline-width:3px!important} /* ---- Ruhigere Farben --------------------------------------------------- „Nimmt dem Orange die Sättigung und dimmt das Leuchten." */ .a11y-calm{ --ember:#B26B45; --ember-lo:#D3A184; --ember-glow:rgba(178,107,69,.12)} .a11y-calm [class*="glow"]{opacity:.35!important} .a11y-calm .phead__film video,.a11y-calm .cine video,.a11y-calm .city__film, .a11y-calm .xp__bg video{filter:saturate(.6)!important} .a11y-calm .city__plate--tba::before{opacity:.45!important} /* ---- Fokusrahmen immer anzeigen ---------------------------------------- „Der Rahmen erscheint auch bei der Maus, nicht nur bei der Tastatur." */ .a11y-focus a:focus,.a11y-focus button:focus,.a11y-focus input:focus, .a11y-focus select:focus,.a11y-focus textarea:focus,.a11y-focus summary:focus, .a11y-focus [tabindex]:focus{ outline:3px solid var(--ember-lo,#F08A54)!important;outline-offset:3px!important; border-radius:3px} /* ---- Systemzeiger verwenden -------------------------------------------- „Schaltet den eigenen Mauszeiger der Website und seinen Begleiter ab." Der eigene Zeiger wird nicht nur versteckt: die Seite versteckt sonst auch den echten, und dann zeigt gar nichts mehr. */ .a11y-nocursor,.a11y-nocursor *{cursor:auto!important} .a11y-nocursor a,.a11y-nocursor button,.a11y-nocursor summary, .a11y-nocursor [role="button"],.a11y-nocursor label{cursor:pointer!important} .a11y-nocursor input,.a11y-nocursor textarea{cursor:text!important} .a11y-nocursor .cursor,.a11y-nocursor .cursor__ring,.a11y-nocursor .cursor__tag{ display:none!important} /* ============================================================================ BILDSCHIRMHOEHEN BEI AKTIVER TEXTGROESSE ---------------------------------------------------------------------------- `zoom` skaliert alles — auch die Bildschirmeinheiten. Ein Element mit `max-height:84vh` rechnet sich gegen den *unskalierten* Schirm aus und wird danach mit dem Zoom multipliziert: bei 125 % steht es also auf 105 % der sichtbaren Hoehe. Gemessen bei 820 px Schirm: die Karte des Panels wuchs von 689 auf 861 Bildpunkte, ihr oberer Rand rutschte auf −73 — genau der abgeschnittene Kopf, den man im Panel sieht. Bei 150 % waren es −252. Die Loesung ist eine Division statt einer Ausnahme: jede bildschirmbezogene Hoehe wird durch den Zoomfaktor geteilt. Bei 100 % ist `x / 1` genau der alte Wert — der Normalfall bleibt also unveraendert, und nur der gezoomte Fall wird zurechtgerueckt. Diese Datei wird nach main.css geladen, deshalb greifen die Ueberschreibungen ohne !important. ========================================================================= */ .axpanel__card{max-height:calc(min(84vh,780px) / var(--a11y-zoom,1))} /* Vollbildabschnitte: Menue, Hero und alle angehefteten Kapitel. Ohne die Teilung waeren sie bei 125 % ein Viertel hoeher als der Schirm, und die Scroll-Choreografie liefe an der falschen Stelle. */ .menu,.menu__inner,.hero,.legacy__sticky,.yearseq__sticky,.europe__sticky, .cities__sticky,.immersive__sticky,.craft__sticky{ height:calc(100svh / var(--a11y-zoom,1))} .immersive__media{height:calc(74svh / var(--a11y-zoom,1))} .cine{height:calc(min(92svh,760px) / var(--a11y-zoom,1))} .stick__step{min-height:calc(38svh / var(--a11y-zoom,1))} /* Ueberlagerungen, die sich selbst begrenzen */ .cc__card{max-height:calc((100vh - clamp(24px,4vh,56px)) / var(--a11y-zoom,1))} .gmodal__card{max-height:calc(88svh / var(--a11y-zoom,1))} @media (max-width:560px){ .axpanel__card{max-height:calc(88vh / var(--a11y-zoom,1))} } @media (max-width:900px){ .europe__sticky{height:auto;min-height:calc(100svh / var(--a11y-zoom,1))} .immersive__media{height:calc(60svh / var(--a11y-zoom,1))} } /* ============================================================================ AUSBAU: PROFILE, SEITENSTRUKTUR, VIER NEUE SCHALTER ========================================================================= */ /* ---- Profile ------------------------------------------------------------ Vier Startpunkte, die mehrere Schalter auf einmal setzen. Sie bleiben ein Startpunkt: wer danach einzeln nachjustiert, verliert die Markierung und behaelt seine Einstellungen. */ .axgrp--pro{padding-bottom:clamp(14px,1.6vw,20px)} .axgrp__b{margin:.15rem 0 .9rem;font-size:.82rem;line-height:1.55; color:var(--muted);max-width:46ch} .axpro{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))} .axpro__b{display:block;text-align:left;cursor:pointer;font-family:inherit; padding:.7rem .8rem;border-radius:12px; border:1px solid rgba(244,238,228,.14);background:rgba(244,238,228,.04); color:var(--ivory); transition:border-color .25s ease,background-color .25s ease,color .25s ease} .axpro__b b{display:block;font-size:.9rem;font-weight:640;line-height:1.25} .axpro__b i{display:block;margin-top:.25em;font-style:normal;font-size:.74rem; line-height:1.45;color:var(--muted)} .axpro__b:hover{border-color:rgba(226,85,30,.42);background:rgba(226,85,30,.07)} .axpro__b[aria-pressed="true"]{border-color:var(--ember);background:rgba(226,85,30,.14)} .axpro__b[aria-pressed="true"] i{color:var(--bone)} @media (max-width:420px){.axpro{grid-template-columns:1fr}} /* ---- Seitenstruktur ----------------------------------------------------- Sprungliste zu den Ueberschriften der geoeffneten Seite. Wird beim Oeffnen gebaut, weil auf diesen Seiten Abschnitte nachtraeglich hinzukommen. */ .axmap{display:grid;gap:2px;max-height:220px;overflow-y:auto; overscroll-behavior:contain;margin-top:.4rem; border-top:1px solid rgba(244,238,228,.1)} .axmap__i{display:block;width:100%;text-align:left;cursor:pointer; font-family:inherit;font-size:.84rem;line-height:1.4;color:var(--bone); padding:.5rem .1rem;background:none;border:0; border-bottom:1px solid rgba(244,238,228,.07); transition:color .2s ease,padding-left .3s var(--e-out-expo)} .axmap__i:hover{color:var(--ember-lo);padding-left:.5rem} /* ---- Zaehlzeile --------------------------------------------------------- */ .axcount{margin:1rem 0 0;font-family:var(--f-mono);font-size:.7rem; letter-spacing:.1em;text-transform:uppercase;color:var(--ember-lo)} .axcount[hidden]{display:none} /* ---- Videos anhalten ---------------------------------------------------- Der Schalter haelt an, was laeuft; das Poster bleibt stehen. Anders als „Bewegung reduzieren" laedt die Seite dafuer nicht neu. */ .a11y-stopvid .mfig__ctl{display:none} /* ---- Zeilenlaenge begrenzen --------------------------------------------- Rund 66 Zeichen. Laengere Zeilen sind der haeufigste Grund, warum man beim Zeilenwechsel die Spur verliert. */ /* Angefasst wird nur, was ohnehin lang laeuft: alle Textkoerper mit einem Mass von 58 Zeichen aufwaerts, dazu Absaetze ohne eigene Klasse. Eine pauschale Regel waere hier falsch — die Gestaltung setzt an vielen Stellen bewusst enge Masse von 15 bis 46 Zeichen, und die duerfen nicht breiter werden, wenn jemand kuerzere Zeilen bestellt. */ .a11y-measure main p:not([class]),.a11y-measure main li:not([class]), .a11y-measure main dd:not([class]), .a11y-measure .prose__body p,.a11y-measure .prose__body li, .a11y-measure .faq__item p,.a11y-measure .lex__dinner p, .a11y-measure .psec__lede,.a11y-measure .phead__lede,.a11y-measure .fig__s, .a11y-measure .zug__b,.a11y-measure .mtr__b,.a11y-measure .jrn__rb, .a11y-measure .tl__b,.a11y-measure .gal__b,.a11y-measure .note, .a11y-measure .gnote,.a11y-measure .addr__note,.a11y-measure .exnote, .a11y-measure .jrn__soon, .a11y-measure .flow__b,.a11y-measure .kpi__b, .a11y-measure .cmp__p,.a11y-measure .cyc__sb,.a11y-measure .vs__b{ max-width:52ch} /* ---- Bilder in Graustufen ---------------------------------------------- Nur die Medien, nicht die Seite: ein Filter auf wuerde jedes feste Element zu einem absolut positionierten machen und Kopfzeile, Orb und dieses Panel aus ihrer Verankerung reissen. */ .a11y-gray img,.a11y-gray video,.a11y-gray .phead__film, .a11y-gray .city__plate,.a11y-gray .cine__media,.a11y-gray .jrn__shot{ filter:grayscale(1) contrast(1.02)} .a11y-gray .city__plate--tba::before{display:none} /* ---- Bilder ausblenden -------------------------------------------------- Die Flaeche bleibt stehen, damit das Layout nicht zusammenfaellt — nur der Inhalt verschwindet. Diagramme bleiben: sie tragen Information. */ .a11y-noimg main img,.a11y-noimg main video,.a11y-noimg main picture, .a11y-noimg .phead__film,.a11y-noimg .cine__media,.a11y-noimg .city__film, .a11y-noimg .jrn__shot img,.a11y-noimg .jrn__shot video{visibility:hidden} .a11y-noimg .city__plate,.a11y-noimg .mos figure,.a11y-noimg .rail__i, .a11y-noimg .mgrid figure,.a11y-noimg .stick__media figure, .a11y-noimg .jrn__shot,.a11y-noimg .phead__film,.a11y-noimg .cine__media{ background:rgba(244,238,228,.07)} .a11y-noimg .fig svg,.a11y-noimg .cyc svg{visibility:visible} .a11y-noimg .city__mark{visibility:visible} /* In der Menueleiste (seit 08.09.2026): gleiche Groesse und Ruhe wie der Ton-Knopf */ .axfab.axfab--band{position:static;left:auto;bottom:auto;z-index:auto; width:clamp(28px,2.1vw,34px);height:clamp(28px,2.1vw,34px);aspect-ratio:auto; border:0;background:rgba(244,238,228,.06);color:var(--ivory); backdrop-filter:none;-webkit-backdrop-filter:none;transform:none; transition:background-color .4s var(--e-out-cubic),color .4s var(--e-out-cubic)} .axfab.axfab--band:hover{background:rgba(244,238,228,.16);border-color:transparent;transform:none} .axfab.axfab--band[aria-expanded="true"]{background:rgba(226,85,30,.18);color:var(--ember)} .axfab.axfab--band svg{width:60%;height:60%}