/* ============================================================================ COFFEE FESTIVAL EUROPE — die Telefonfassung ---------------------------------------------------------------------------- Diese Datei laeuft als letzte und korrigiert genau das, was auf einem Telefon anders sein muss. Sie ist entstanden aus einer Messung ueber alle sechsunddreissig Seiten bei 360, 390 und 430 Pixeln Breite. Was dort auffiel: · Die Leiste oben war durchsichtig und ohne Unterlage. Auf dem Rechner laeuft der Satz in Spalten an ihr vorbei, auf dem Telefon laeuft er darunter hindurch — das Logo stand mitten im Text. · Der Menueknopf war 28 Pixel gross. Das ist knapp zwei Drittel dessen, was ein Daumen zuverlaessig trifft. · Beschriftungen standen bei zehn Pixeln, `soon` bei acht. Auf Armlaenge ist das keine Schrift mehr, das ist ein Muster. · Neun von neun Menuezeilen waren 38 Pixel hoch, die Unterpunkte 22. · Das geoeffnete Menue war zweitausend Pixel lang, weil alle vier Untergruppen gleichzeitig ausgeklappt sind. Auf dem Rechner tauschen sie beim Zeigen — auf dem Telefon gibt es kein Zeigen. · Der Spielhinweis lag mit z-index 140 ueber dem Menue (125) und ueber dem Satz, in voller Breite, ohne je zu verschwinden. · Das Mosaik zerfiel in Kacheln von 120 Pixeln Hoehe — Briefmarken. · Die seitlichen Eingaenge der Themenbewegung (bis 36 Pixel) sind auf 390 Pixeln fast ein Zehntel der Breite. Das liest sich als Wackeln. · Signatur und Themenlinie waren unter 900 Pixeln ganz abgeschaltet. Damit sah auf dem Telefon jede Seite wieder gleich aus. Reihenfolge: erst was ueberall auf kleinen Geraeten gilt, dann das Menue, dann Satz, Bild, Bewegung. ========================================================================= */ /* ---- 0 · Sichere Raender ------------------------------------------------ Auf Geraeten mit Aussparung und Streifen unten ist der sichtbare Bereich kleiner als das Fenster. Alles, was fest am Rand klebt, rechnet das mit. */ /* Am Geraet gemessen (iPhone, iOS 18.7, Safari 26, kein Standalone): safe-area-inset-top 0 px innerHeight 796 px screen.height 956 px Null — und das ist richtig so. Safari zeichnet die Seite in diesem Modus nicht unter die Statusleiste; der schwarze Balken oben gehoert dem Browser, die Seite beginnt darunter. Es gibt also nichts zu reservieren. (Siehe den zweiten Nachtrag unten: ich hatte diese Null zwei Pakete lang fuer einen Messfehler gehalten und ueberschrieben. Sie war keiner.) Auf dem Startbildschirm — als Vollbild ohne Browserleisten — meldet iOS den echten Betrag, und dann greifen die Rechnungen weiter unten. Dasselbe gilt fuer die Aussparung links und rechts im Querformat. `-webkit-touch-callout` gibt es nur in WebKit; zusammen mit grobem Zeiger und schmalem Fenster trifft das iPhones und iPads, nicht den Rechner. */ :root{ --sa-o:env(safe-area-inset-top,0px); --sa-u:env(safe-area-inset-bottom,0px); --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px); } /* ZWEITER NACHTRAG — die ganze Reservierung war falsch. Angenommen hatte ich: ohne `theme-color` laeuft der Seiteninhalt unter der Statusleiste durch, also muss oben Platz reserviert werden. Drei Bildschirmfotos hintereinander zeigen, dass das nicht stimmt. Gemessen an den Fotos (iPhone, 3x, jeweils dieselbe Stelle): die Scheibe des Sprachumschalters sass vor Paket L, nach Paket L und nach Paket N an exakt derselben Zeile — 401 Bildpunkte, 93 Bildpunkte hoch. Weder das Entfernen von `theme-color` noch der Mindestwert noch der feste Wert haben sie bewegt. Was sich veraenderte, war nur die Farbe des Streifens darueber. Daraus folgt: Safari legt die Seite gar nicht unter die Statusleiste. Der schwarze Balken oben ist Safaris eigener Bereich, die Seite beginnt darunter — und deshalb meldet iOS auch `safe-area-inset-top: 0`. Das war von Anfang an die richtige Auskunft; ich hatte sie fuer einen Fehler gehalten und ueberschrieben. Die 58 Punkte waren also reiner Leerraum. Sie sind weg. `--sa-o` ist wieder genau das, was das Geraet meldet — null im Browser, der echte Wert im Startbildschirm-Modus und im Querformat. Die Leiste rueckt damit um 58 Punkte nach oben, direkt unter die Statusleiste. */ @media (max-width:700px){ /* ---- 1 · Satzgroessen ------------------------------------------------ Der Grundwert der Beschriftung war zehn Pixel, weil die Formel unter ihre eigene Untergrenze faellt, sobald das Fenster schmal wird. Auf dem Telefon zaehlt aber nicht das Verhaeltnis zur Breite, sondern der Abstand zum Auge. */ :root{ --t-label:.72rem; /* 11,5 px statt 10 */ --t-small:.92rem; --t-body:1.02rem; } body{line-height:1.6} /* `soon` und die uebrigen Kleinschriften: gemessen standen sie bei 8 bis 10 Pixeln. Das ist auf Armlaenge kein Wort mehr, sondern ein Muster. Angehoben wird nur die Groesse — Form, Farbe und Laufweite der Marken bleiben, wie sie entworfen sind. */ .soon{font-size:.72rem!important;letter-spacing:.06em} .lex__azb,.lex__cat,.ptype,.pend,.gl__name,.gl__note,.why__num, .tbd,.year{font-size:.74rem} .legacy__item .year{font-size:.74rem} .gpromo__k{font-size:.72rem} .subs__note,.menu__meta,.footer__gag,.footer__mail-label,.portal__host, .lex__tag,.tt__tag{font-size:.74rem} .menu__idx{font-size:.72rem} .mos figcaption{font-size:.8rem;line-height:1.4} /* Lange Fachwoerter und Adressen sollen umbrechen statt zu ueberlaufen. */ /* Umbrechen ja, aber nicht mitten im Wort ohne Zeichen: "NACHHALTIGK EIT" stand so auf der Seite. `break-word` greift erst, wenn das Wort nicht passt — also sorgt die Groesse dafuer, dass es passt, und die Trennung uebernimmt `hyphens`. Laengstes Titelwort im Bestand: Barrierefreiheit, sechzehn Zeichen. */ h1,h2,h3,.psec__title,.cine__h,.phead__title{hyphens:auto;overflow-wrap:normal} p,li,dd,dt,figcaption,.card__b,.rule__b{overflow-wrap:break-word;hyphens:auto} .menu__mail,.footer__mail,a[href^="mailto"]{overflow-wrap:anywhere} /* ---- 2 · Die Leiste oben --------------------------------------------- Hier stand kurzzeitig ein dunkler Verlauf mit Weichzeichner unter der Leiste, damit der Satz nicht durch das Logo hindurchliest. Auf ausdrücklichen Wunsch ist er wieder weg: die Leiste soll auf dem Telefon genauso aussehen wie auf dem Rechner — ohne Hintergrundeffekt. Der obere sichere Rand bleibt, sonst rutscht die Leiste auf Geraeten mit Aussparung unter die Uhr. */ /* Nur `padding-top` reicht nicht: `.nav` hat eine feste Hoehe (`height:var(--nav-h)`) und rechnet mit `border-box`. Der Innenabstand frisst dann den Innenraum auf, statt die Leiste nach unten zu schieben — gemessen mit einem echten iPhone-Rand von 59 Pixeln: Leiste 59 hoch, Innenraum 0, und der Sprachumschalter saß bei y=40, also mitten unter der Uhrzeit. Solange die Statusleiste eine eigene Farbe hatte, ist das niemandem aufgefallen. Seit der Inhalt bis an den oberen Rand laeuft, faellt es sofort auf. Die Hoehe waechst jetzt um denselben Betrag mit. */ .nav{height:calc(var(--nav-h) + var(--sa-o));padding-top:var(--sa-o)} .nav.is-stuck{height:calc(var(--nav-h) * .88 + var(--sa-o))} /* Der Menueknopf ist auf dem Telefon der wichtigste Knopf der Seite — und mit 28 Pixeln kleiner als eine Fingerkuppe. Geaendert wird trotzdem nichts an ihm: der Kreis bleibt ein Kreis, in seiner Groesse, in seiner Farbe. Was waechst, ist nur die Trefferflaeche, und die ist unsichtbar. Ein Knopf darf sich anders anfuehlen, ohne anders auszusehen. */ .band__burger,.band__aud{position:relative} .band__burger::after,.band__aud::after{content:'';position:absolute; left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%); border-radius:50%} /* ---- 3 · Tippflaechen ------------------------------------------------- Vierundvierzig Pixel sind kein Geschmack, sondern die Groesse einer Fingerkuppe. Erreicht wird sie ueber Innenabstand, nicht ueber Schrift — der Satz soll sich nicht veraendern, nur das Ziel. */ Wo eine Zeile nur Text ist und keine sichtbare Form hat — Unterpunkte, Fusszeilen, Aufklappzeilen —, waechst die Flaeche ueber den Innenabstand. Auch das aendert nichts am Bild, nur am Abstand zwischen den Zeilen. */ .subs__list a,.menu__social a,.footer__col a,.foot__legal a, .portal__item a,.lex__list a{min-height:44px;display:flex;align-items:center} .menu__mail,.menu__tel{min-height:44px;display:flex;align-items:center} .band__link{padding-block:.7rem} .faq__item summary{padding-block:.85rem} /* WICHTIG, teuer gelernt: diese Regel darf kein ::after treffen, das schon etwas darstellt. `.footer__legal a::after` ist die Unterlinie der drei Rechtslinks — meine Fassung setzte nur Lage und Hoehe, nicht den Hintergrund. Ergebnis waren drei graue Kloetze ueber Impressum, Datenschutz und Barrierefreiheit. Also: jene Links ausgenommen, und der Hintergrund hier ausdruecklich auf none, damit ein uebersehener Fall hoechstens unsichtbar ist statt haesslich. */ .footer__up,.footer__cookiebtn,.footer__org,.menu__a11y, .crumbs a,.prose__toc a,.menu__social a{position:relative} .footer__up::after,.footer__cookiebtn::after,.footer__org::after, .menu__a11y::after,.crumbs a::after,.prose__toc a::after, .menu__social a::after{content:'';position:absolute; left:0;right:0;top:50%;height:44px;transform:translateY(-50%); background:none;border:0;box-shadow:none;pointer-events:auto} /* Die Rechtslinks bekommen ihre Flaeche ueber den Innenabstand — dort ist die Unterlinie zu Hause und bleibt es auch. */ .footer__legal a{padding-block:.8rem} /* Zwei Ausnahmen, beide gemessen: · `.footer__cookiebtn` hat schon ein ::after — das ist seine Unterlinie. Ein zweites gibt es nicht, also waechst die Zeile hier ueber den Innenabstand. Sichtbar aendert das nichts, die Linie sitzt am Text. · In der Fusszeile stehen die Zeilen so dicht, dass sich die Ziele gegenseitig begrenzen. Also mehr Zeilenabstand — nicht groessere Knoepfe. */ .footer__cookiebtn{padding-block:.8rem} .footer__bottom{row-gap:1.5rem} .footer__legal{gap:.5rem 1.2rem;flex-wrap:wrap} .prose__toc li + li{margin-top:.55rem} /* Der runde Kontaktknopf bleibt, wie er ist: seine Schrift laeuft im Kreis mit und wuerde bei jeder anderen Groesse aus der Scheibe fallen. Er ist 47 Pixel gross — als Ziel reicht das. */ /* ---- 4 · Der Ton-Knopf bleibt -------------------------------------- Er war unter 600 Pixeln ausgeblendet. Damit stirbt die Musik beim Seitenwechsel und es gibt kein Mittel, sie zurueckzuholen — genau der Fall, den jemand als "die Musik hoert auf" beschreibt. */ .band__aud{display:grid!important} /* ---- 5 · Der Spielhinweis -------------------------------------------- Auf dem Rechner sitzt er in einer freien Ecke. Auf dem Telefon gibt es keine freie Ecke: er lag ueber dem Satz, ueber den runden Schaltern und ueber dem geoeffneten Menue. Also wird er zur schmalen Zeile — sichtbar, aber nicht im Weg — und waehrend das Menue offen ist, ist er weg. */ .gpromo{left:10px;right:10px;width:auto; bottom:calc(10px + var(--sa-u)); padding:10px 42px 10px 13px} /* NACHTRAG — hier stand `.gpromo__cups{display:none}`. Die Becher waren damit weg, der Streifen darueber (`.gpromo__ico`, 44 Pixel hoch) aber nicht, und die Bohne sprang weiter. Auf dem Telefon blieb also ein leeres Feld mit einem einzelnen orangen Punkt darin — gemessen: alle drei Becher mit 0 x 0 Pixeln, der Streifen mit 325 x 44. Das sah nach einem Fehler aus, und es war einer. Die Grafik ist der einzige Ort, an dem das Spiel ohne Worte erklaert wird — in drei Sprachen zugleich. Sie wird deshalb nicht entfernt, sondern verkleinert: Becher 18 statt 26 breit, Luecke 22 statt 34, Schrittweite also 40 statt 60. Der Streifen wird von 44 auf 26 Pixel flach, damit die Zeile schmal bleibt. */ .gpromo__glow{display:none} .gpromo__ico{height:26px;margin:0 0 .45rem;--gp-step:40px;--gp-hop:17px;--gp-rim:2px} .gpromo__cups{gap:22px} .gpromo__cups i{width:18px;height:12px;border-radius:2px 2px 5px 5px; box-shadow:inset 0 2px 0 rgba(226,85,30,.5)} .gpromo__cups i::after{top:2px;width:2.5px;height:2.5px} .gpromo__hop{left:9px;bottom:12px} .gpromo__hop s{left:-4px;width:8px;height:8px} .gpromo__k{font-size:.62rem;padding-right:0} .gpromo__h{margin-top:.1em;font-size:.98rem} .gpromo__b{display:none} .gpromo__act{margin-top:.45em;gap:.8rem} /* Der Schliesskreis bleibt ein 26er Kreis wie ueberall — nur seine Trefferflaeche waechst, unsichtbar, auf Fingergroesse. */ .gpromo__x{top:7px;right:7px} .gpromo__x::after{content:'';position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%} body.menu-open .gpromo{opacity:0!important;pointer-events:none!important} /* Die runden Schalter unten halten Abstand vom Streifen und voneinander. */ .orb{bottom:calc(var(--sa-u) + 74px)} .axfab{bottom:calc(var(--sa-u) + 12px);left:calc(var(--sa-l) + 12px)} /* ---- 7 · Mosaik -------------------------------------------------------- Zwei Spalten ergaben Kacheln von 120 Pixeln Hoehe. Auf einem Foto von einem Festivalgelaende erkennt man darin nichts. Also eine Spalte, dafuer in voller Breite und mit sichtbarer Unterschrift. */ .mos{grid-template-columns:1fr;grid-auto-rows:auto;gap:10px} .mos figure, .mos figure:nth-child(6n+1),.mos figure:nth-child(6n+2), .mos figure:nth-child(6n+3),.mos figure:nth-child(6n+4), .mos figure:nth-child(6n+5),.mos figure:nth-child(6n+6), .mos figure:last-child:nth-child(6n+3), .mos figure:last-child:nth-child(6n+5){ grid-column:1;grid-row:auto;aspect-ratio:16/9} .mos figure:nth-child(6n+1){aspect-ratio:4/3} .mos figcaption{opacity:1;transform:none;padding:.75rem .85rem} /* ---- 8 · Kinobahn und Kopffilm --------------------------------------- Hochkant ist eine 21:9-Bahn ein Streifen. Etwas mehr Hoehe, und der Satz darin bekommt Luft statt am Rand zu kleben. */ .cine{min-height:74svh} .cine__inner{padding-inline:var(--gutter)} .cine__h{font-size:clamp(1.5rem,7vw,2.2rem);line-height:1.1} .cine__b{font-size:.98rem;line-height:1.62} .cine__meta{flex-wrap:wrap;gap:.5rem .9rem} .phead__film{min-height:38svh} /* ---- 9 · Klebesatz und Bildbaender ------------------------------------ */ .stick__grid{grid-template-columns:1fr} /* `position:static` war hier ein Fehler mit sichtbaren Folgen: die Bilder im Klebesatz liegen als `position:absolute; inset:0` im Medienkasten. Nimmt man dem Kasten seine Position, rechnet `inset:0` gegen das naechste positionierte Element weiter oben — die Bilder wurden 1400 statt 197 Pixel hoch und legten sich ueber den Text daneben. Genau das war auf ueber-uns.html zu sehen. `relative` haelt sie im Kasten. */ .stick__media{position:relative;top:auto;height:auto;aspect-ratio:16/9} .stick__steps{gap:clamp(26px,5vh,44px)} .stick__step{min-height:0} .figband{grid-template-columns:1fr;gap:10px} /* ---- 10 · Fuss --------------------------------------------------------- */ .footer__col{grid-column:span 12} .footer{padding-bottom:calc(var(--sa-u) + clamp(24px,5vh,48px))} } /* ---- 11 · Bewegung auf dem Telefon -------------------------------------- Zwei Eingriffe, beide aus derselben Ueberlegung: auf 390 Pixeln ist ein seitlicher Weg von 36 Pixeln fast ein Zehntel der Breite. Was auf dem Rechner wie ein Einfahren aussieht, sieht hier wie ein Ruck aus. Also: alle Themen kommen hochkant herein, mit kuerzeren Wegen und etwas schneller. Der Charakter bleibt — die Buehne springt weiter an, Presse laeuft weiter eng, Rechtliches blendet weiter nur — aber die Richtung ist einheitlich, weil quer hier keine Richtung mehr ist. */ @media (max-width:700px) and (prefers-reduced-motion:no-preference){ body[data-pt="roast"] [data-reveal] > *{transform:translate3d(0,22px,0) scale(.99)} body[data-pt="civic"] [data-reveal] > *{transform:translate3d(0,20px,0)} body[data-pt="grove"] [data-reveal] > *{transform:translate3d(0,20px,0) scale(.96)} body[data-pt="clear"] [data-reveal] > *{transform:translate3d(0,12px,0)} body[data-pt="stage"] [data-reveal] > *{transform:translate3d(0,18px,0) scale(.95)} body[data-pt="trade"] [data-reveal] > *{transform:translate3d(0,16px,0)} body[data-pt="press"] [data-reveal] > *{transform:translate3d(0,14px,0) scaleY(.9)} body[data-pt="visit"] [data-reveal] > *{transform:translate3d(0,26px,0)} body[data-pt="legal"] [data-reveal] > *{transform:none} body[data-pt]{--rv-dauer:.72s;--rv-schritt:.045s} body[data-pt="visit"]{--rv-dauer:.82s} body[data-pt="grove"]{--rv-dauer:.8s} body[data-pt="legal"]{--rv-dauer:.34s} /* Die Kinobahn zoomt weniger — auf kleinen Flaechen faellt derselbe Faktor staerker auf und kostet mehr Rasterung. */ body[data-pt] .cine.tmc:not(.tm-in) .cine__media, body[data-pt="stage"] .cine.tmc:not(.tm-in) .cine__media, body[data-pt="civic"] .cine.tmc:not(.tm-in) .cine__media, body[data-pt="grove"] .cine.tmc:not(.tm-in) .cine__media{transform:scale(1.05)} } /* ---- 12 · Signatur und Themenlinie kommen zurueck ----------------------- Beide waren unter 900 Pixeln ganz abgeschaltet — vermutlich, weil links neben der Vorzeile kein Platz ist. Der Platz ist auch wirklich nicht da. Also steht die Signatur jetzt nicht daneben, sondern darueber, und die Linie laeuft unter der Vorzeile durch. Beides klein, beides in der Themenfarbe, beides mit dem Eingang des Abschnitts. */ @media (max-width:900px){ .psec__head::before{display:block;position:static; width:clamp(8px,2.4vw,11px);height:clamp(8px,2.4vw,11px); margin:0 0 .7em} body[data-pt="civic"] .psec__head::before{width:clamp(11px,3vw,14px);height:clamp(11px,3vw,14px)} body[data-pt="clear"] .psec__head::before{width:3px;height:clamp(15px,4vw,20px)} body[data-pt="trade"] .psec__head::before{width:clamp(13px,3.4vw,17px);height:2px} body[data-pt="press"] .psec__head::before{width:clamp(13px,3.4vw,17px);height:clamp(9px,2.6vw,12px)} body[data-pt="legal"] .psec__head::before{display:none!important} .psec__head .label::after{display:block} body[data-pt] .psec__head .label::after{bottom:-.6em;width:min(var(--pt-line,120px),46vw)} body[data-pt="legal"] .psec__head .label::after{display:none} body:not([data-pt]) .psec__head .label::after{display:none} } /* ---- 13 · Hochkant und kurz ------------------------------------------- Auf einem quer gehaltenen Telefon ist die Hoehe knapp. Alles, was in Fensterhoehen rechnet, wird dort kleiner angesetzt. */ @media (max-height:560px) and (orientation:landscape){ .cine{min-height:100svh} .phead__film{min-height:52svh} .menu__inner{padding-top:calc(var(--sa-o) + 52px)} .menu__word{font-size:clamp(1.2rem,4.4vh,1.7rem)} .menu__links a{min-height:44px} } /* ---- 14 · Weniger Bewegung, hoher Kontrast ---------------------------- */ @media (max-width:700px){ .a11y-rm .subs__wrap{transition:none} } /* ---- 15 · Die Sprachumschaltung im Menue -------------------------------- Sie wird per Skript aus der Leiste hierher verschoben (mobilemenu.js) und steht als erster Block im Kontaktbereich. Groesser als in der Leiste: hier ist Platz, und drei Sprachen sind kein Randfall, sondern der Normalfall dieser Seite. */ @media (max-width:700px){ .menu__lang .lang{align-self:flex-start;padding:3px;gap:2px} /* Die Pille bleibt die Pille. Sie steht hier nur an einem anderen Ort und bekommt Innenabstand, damit drei Sprachen mit dem Daumen erreichbar sind. */ .menu__lang .lang button{padding-inline:1.05rem;padding-block:.7rem} /* Zwei Kreise von 28 Pixeln mit acht Pixeln Abstand haben Trefferflaechen von je 44 Pixeln, die sich ueberlappen — wer den Menuerand antippt, schaltet die Musik um. Also mehr Abstand zwischen ihnen; die Knoepfe selbst bleiben, wie sie sind. Platz ist auf der Leiste genug: auf dem Telefon stehen dort nur noch diese beiden. */ /* `body.is-page .band` setzt den Abstand mit hoeherer Gewichtung; ohne denselben Vorsatz bliebe es bei drei Pixeln. */ .band,body.is-page .band{gap:18px} } /* ============================================================================ TEIL B — die Startseite auf dem Telefon ---------------------------------------------------------------------------- Alles hier folgt einer Durchsicht am Geraet, Punkt für Punkt. Die Abschnitte sind in der Reihenfolge der Seite sortiert, nicht in der Reihenfolge der Meldungen. ========================================================================= */ @media (max-width:820px){ /* ---- B1 · Das Eintrittsbild ------------------------------------------ Es hing im unteren Drittel, darüber zwei Drittel Schwarz. Auf einem Telefon liest sich das wie eine halb geladene Seite. Jetzt steht die Marke in der Mitte und der Knopf darunter — eine Achse, kein Rest. */ /* KORREKTUR: Die Marke liegt nicht in dieser Ebene, sondern in den beiden Vorhaengen — und die zentrieren sie senkrecht im Bild. Wer hier ebenfalls zentriert, legt Knopf und Zeile genau darauf. Gemessen war das so: Marke 376–468, Knopf 416–468, also 52 Pixel Ueberdeckung — das Wort "EINTRETEN" lag unter dem Logo. Der Inhalt beginnt jetzt unterhalb der Bildmitte plus halber Markenhoehe. */ .preloader__stage{min-height:100svh; display:flex;flex-direction:column;align-items:center;justify-content:flex-start; gap:clamp(14px,2.6vh,22px); padding-block:calc(50svh + 64px) calc(var(--sa-u) + 20px)} .enter{min-height:52px;padding-inline:clamp(26px,7vw,40px)} /* ---- B2 · Der Hero --------------------------------------------------- Steht seit dem Umbau vollstaendig in hero.css — Rechner UND Telefon, in einer Datei. Die Regeln, die hier standen, waren die Telefonfassung des alten Heros: Staedtezeile ausblenden, Titel groesser, Becher in der Mitte des Films. Von diesen Bausteinen gibt es keinen mehr. Sie sind entfernt und nicht nur ueberschrieben. Ueberschriebene Regeln bleiben in der Datei stehen und in der Rechnung des Browsers; wer den Hero das naechste Mal anfasst, sucht dann an zwei Stellen und findet an der falschen zuerst. */ /* ---- B3 · Die Weltkarte ---------------------------------------------- Der Satz lief in die Legende und die Legende in die Städtemarken. Der Text steht jetzt oben und hört auf, bevor die Karte anfängt; die Legende rückt unter die Karte statt mitten hinein. */ .europe__overlay{justify-content:flex-start; padding-top:calc(var(--sa-o) + var(--nav-h) + 10px); padding-bottom:calc(var(--sa-u) + 20px)} .europe__head{max-width:none;flex:none} .europe__lead{max-width:34ch;font-size:.96rem;line-height:1.55} /* Kein Verlauf hinter der Legende — er wurde als Schatten gelesen und stoerte mehr, als er half. Der Text traegt sich auf dem dunklen Grund ohnehin. */ .europe__legend{margin-top:auto;padding-top:clamp(10px,2vh,18px); display:flex;flex-wrap:wrap;gap:.35rem 1.1rem; background:none;padding-bottom:.4rem} .europe__globe,.globe{margin-top:clamp(8px,2vh,20px)} /* ---- B4 · Die Städtekarten ------------------------------------------- „oben und unten bleibt viel leer" — stimmt: die Karte war auf ein festes Verhältnis gezwungen und der Rest der Bildschirmhöhe blieb ungenutzt. Jetzt füllt die Reihe die Fläche, die sie hat. */ .cities__sticky{justify-content:flex-start; padding-top:calc(var(--sa-o) + var(--nav-h) + 6px)} .cities__head{max-width:none;margin-bottom:clamp(12px,2.4vh,22px)} .cities__row{align-items:stretch;flex:1 1 auto;min-height:0; padding-bottom:clamp(18px,3vh,32px)} .city{width:min(78vw,340px);display:flex;flex-direction:column} .city__plate{flex:1 1 auto;min-height:0;aspect-ratio:auto;height:auto} .city__plate img,.city__plate video{height:100%} /* ---- B5 · „So sieht es aus" ------------------------------------------ Der Clip stand als abgerundetes Fenster mitten auf schwarzem Grund und nutzte knapp die halbe Fläche. Auf dem Telefon ist die ganze Fläche das Format: randlos, ohne Radius, Text darüber. */ /* Breite, Hoehe und Radius schreibt hier GSAP als Stilattribut — jede Regel dazu waere wirkungslos. Der Anfangszustand steht deshalb in main.js. Hier bleibt, was die Kinofahrt nicht anfasst. */ .immersive__sticky{overflow:hidden} .immersive__media{max-width:none;border-radius:0} .immersive__track{height:200vh} /* Story-Format heisst auch: der Satz sitzt im Bild, nicht darunter. */ .immersive__overlay{align-content:end;text-align:left} .immersive__overlay{padding:calc(var(--sa-o) + var(--nav-h) + 12px) var(--gutter) calc(var(--sa-u) + 90px)} .immersive__stack{font-size:clamp(1.9rem,9.6vw,3rem);line-height:1} /* ---- B6 · 05 / The Festival ------------------------------------------ Sechs Kacheln standen mit Leerraum dazwischen, zwei davon ohne Bild — das Video war nie gestartet (siehe mobilevideo.js). Jetzt: sechs volle Kacheln untereinander, Bild randlos, Text darauf statt daneben. */ .xp__grid{display:grid;grid-template-columns:1fr;gap:12px} .xp__cell{grid-column:1/-1!important;position:relative;min-height:0; aspect-ratio:16/10;border-radius:14px;overflow:hidden; padding:clamp(16px,4vw,22px);justify-content:flex-end; background:rgba(11,8,6,.4)} .xp__cell > div:last-child{margin-top:0;padding-top:0} .xp__bg{position:absolute;inset:0;z-index:0} /* Auf dem Rechner liegen die Videos bei 42 % Deckkraft und leicht entsaettigt und werden beim Ueberfahren hell. Auf dem Telefon gibt es kein Ueberfahren — dort blieben sie grau und leblos stehen. Also volle Farbe; die Lesbarkeit des Textes traegt der Verlauf darunter. */ .xp__bg video,.xp__bg img{opacity:1!important;filter:none!important; transform:none!important} /* Volle Farbe im Video war richtig — aber auf einem hellen Video (die Milch im Becher) stand die helle Schrift danach im Nichts. Der Verlauf traegt jetzt weiter nach oben, und die Schrift bekommt einen leisen Schatten. Das Bild bleibt farbig, der Satz bleibt lesbar. */ .xp__bg::after{content:'';position:absolute;inset:0; background:linear-gradient(0deg,rgba(11,8,6,.94) 0%,rgba(11,8,6,.78) 30%, rgba(11,8,6,.42) 58%,rgba(11,8,6,.12) 100%)} .xp__cell h3,.xp__cell p,.xp__cell .label{text-shadow:0 1px 14px rgba(11,8,6,.85)} .xp__cell > *:not(.xp__bg){position:relative;z-index:1} .xp__i{margin-bottom:.5rem;width:30px;color:var(--ember)} .xp__cell h3{font-size:1.32rem;margin:0} .xp__cell p{font-size:.92rem;line-height:1.45;margin-top:.35rem; color:rgba(244,238,228,.78)} .xp__cell .label{color:rgba(244,238,228,.5)} /* ---- B6b · 01 / Die Story — die Linie der Geschichte ------------------ Drei Zahlen untereinander sind drei Zahlen. Mit einer Schiene daneben werden sie eine Bewegung: der Balken fuellt sich mit dem Scrollen, die Perle laeuft an seiner Spitze mit, und jeder Punkt geht an, wenn sie ihn erreicht. Gefuellt wird per transform (scaleY) — das laeuft auf dem Compositor, nicht im Layout. */ .chapter__facts{position:relative;padding-left:26px;gap:1.5rem} .spur{display:block;position:absolute;left:4px; top:.6rem;bottom:1.2rem;width:2px; background:var(--hairline-dark);border-radius:2px} .spur__fill{position:absolute;inset:0;border-radius:2px; background:linear-gradient(180deg,var(--ember),#8A5537); transform:scaleY(0);transform-origin:50% 0;will-change:transform} .spur__bead{position:absolute;left:50%;top:0;width:9px;height:9px; margin-left:-4.5px;margin-top:-4.5px;border-radius:50%; background:var(--ember);box-shadow:0 0 0 4px rgba(226,85,30,.16); will-change:transform} .fact{position:relative} /* Mitte des Punktes auf der Mitte der Schiene: 4px + 1px = 5px vom Rand, der Kasten beginnt 26px vom Rand → -25.5px, kein Rand-Trick. */ .fact::before{content:'';position:absolute;left:-25.5px;top:.62rem; width:9px;height:9px;border-radius:50%; border:1.6px solid var(--hairline-dark);background:#EDE6DA; transition:border-color .45s var(--e-out-cubic), background-color .45s var(--e-out-cubic),transform .45s var(--e-out-expo)} .fact.is-lit::before{border-color:var(--ember);background:var(--ember); transform:scale(1.15)} .fact.is-lit .fact__v{color:var(--ink)} .fact__v{font-size:clamp(2rem,11vw,3rem);transition:color .45s var(--e-out-cubic)} /* ---- B7 · Marken, die den Weg mitgegangen sind ----------------------- Das stehende Raster war die falsche Antwort: der Abschnitt heisst "die den Weg mitgegangen sind" und muss sich bewegen. Also wieder ein Laufband, aber fuer diese Breite gebaut: zwei Baender, die gegenlaeufig ziehen, eine weiche Kante links und rechts (damit angeschnittene Namen gewollt aussehen statt kaputt) und ein Bohnenpunkt als Takt zwischen den Namen. Geschwindigkeit und Groesse setzt initMarquees. */ .partners{padding-block:clamp(38px,7vh,60px)} /* Beide Zeilen sind `.label` mit Zeilenhoehe 1 — auf dieser Breite brechen sie um, und die zwei Zeilen klebten aneinander. Untereinander, mit Luft. */ .partners__head{display:grid;gap:.5rem;justify-items:start} .partners__head .label{line-height:1.4} /* Der Satz „Keine Namen, bevor sie unterschrieben sind" traegt schon eine leise Farbe (--muted-2, 5,21 : 1). Die zusaetzliche Abblendung machte daraus 3,69 — bei 11,5 px sind 4,5 gefordert. Die Groesse trennt ihn hier ohnehin von der Zeile darueber. */ .partners__head .label:last-child{font-size:.64rem} .marquee{overflow:hidden;padding-block:0;border-block:1px solid var(--hairline); -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent); mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)} .marquee__row{display:flex;width:max-content;padding-block:8px;background:none} .marquee__row + .marquee__row{border-top:1px solid var(--hairline)} /* Auf dem Telefon ist dieselbe Zeile klein (12,8 px statt 19,4) — damit gilt nicht mehr die Schwelle fuer grosse Schrift (3,0), sondern 4,5. .44 ergab 3,90 und die zweite Zeile mit .30 nur 2,38. Beides angehoben; der Unterschied zwischen den Zeilen bleibt, er ist nur nicht mehr der Unterschied zwischen lesbar und nicht lesbar. */ .marquee__item{display:flex;height:40px;min-height:0;padding:0 15px; font-size:.8rem;letter-spacing:.09em;white-space:nowrap;text-align:center; color:rgba(244,238,228,.54);background:none;position:relative} /* Der Punkt sitzt in der Luecke zwischen zwei Namen, nicht im Namen. */ .marquee__item::after{content:'';position:absolute;right:-2.5px;top:50%; width:5px;height:5px;margin-top:-2.5px;border-radius:50%; background:var(--ember);opacity:.3} .marquee__item:nth-child(3n)::after{opacity:.7} .marquee__row + .marquee__row .marquee__item{font-size:.72rem; color:rgba(244,238,228,.5)} /* ---- B8 · 06 / Partnership ------------------------------------------- Der Abschnitt war eine Überschrift, ein Satz und eine Wolke aus Pillen. Die Pillen tragen jetzt eine Nummer und stehen in zwei Spalten — dieselbe Information, aber als Liste erkennbar. */ .b2b{padding-block:clamp(44px,9vh,72px)} .b2b__title{font-size:clamp(1.9rem,9.4vw,2.7rem);line-height:1.02} .b2b__head .a{margin-top:1.2rem} /* Die Pillen bleiben Pillen — Form, Rand und Radius unveraendert. Was sich aendert, ist ihre Ordnung: statt einer Wolke, in der jede Zeile anders bricht, zwei gleich breite Spalten. Dazu eine Nummer im Innern und ein gestaffelter Eingang, damit der Abschnitt etwas tut, wenn man ankommt. */ .ptypes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; counter-reset:pt} .ptype{padding:.72rem .7rem .72rem 2rem;position:relative;min-width:0; font-size:.74rem;line-height:1.24;text-align:left;letter-spacing:.03em; /* `anywhere` zerlegte Woerter mitten im Wort ("KATEGORIEPARTN ER"). Umbrochen wird jetzt nur an Wort- und Bindestrichgrenzen. */ overflow-wrap:break-word;word-break:normal;hyphens:none; display:flex;align-items:center;min-height:48px} .ptype::before{counter-increment:pt; content:counter(pt,decimal-leading-zero); position:absolute;left:.85rem;top:50%;transform:translateY(-50%); font-family:var(--f-mono);font-size:.6rem;color:var(--ember)} @media (prefers-reduced-motion:no-preference){ .ptypes .ptype{opacity:0;transform:translate3d(0,12px,0); animation:ptIn .6s var(--e-out-expo) both} .ptype:nth-child(2){animation-delay:.05s} .ptype:nth-child(3){animation-delay:.1s} .ptype:nth-child(4){animation-delay:.15s} .ptype:nth-child(5){animation-delay:.2s} .ptype:nth-child(6){animation-delay:.25s} .ptype:nth-child(7){animation-delay:.3s} .ptype:nth-child(n+8){animation-delay:.35s} } @keyframes ptIn{to{opacity:1;transform:none}} /* ---- B9 · Der Partnerbereich ----------------------------------------- Die Tasse und der Text standen nebeneinander und wurden beide zu schmal. Untereinander hat beides seine Größe. */ .portal{grid-template-columns:minmax(0,1fr);gap:clamp(16px,3.4vh,24px); padding:clamp(20px,5vw,28px);border-radius:18px;align-items:start} .portal__say{min-width:0} .portal__go{justify-self:stretch;align-items:center; display:flex;flex-direction:row;gap:14px;flex-wrap:wrap; padding-top:clamp(10px,2vh,16px); border-top:1px solid rgba(244,238,228,.12)} .portal__cupwrap{width:clamp(64px,17vw,84px);flex:none} .portal__cupwrap{width:min(46vw,180px)} .portal__title{font-size:clamp(1.5rem,7.4vw,2rem);line-height:1.06} .portal__lede{font-size:.95rem;line-height:1.5} /* Zwei Spalten waren auf 390px zu schmal fuer deutsche Woerter: "Standinformationen" passte nicht in die Zelle und wurde vom `overflow:hidden` der Kachel abgeschnitten. Eine Spalte, dafuer eine Zeile pro Punkt — das ist sogar niedriger, weil nichts mehr dreifach umbricht. */ .portal__list{display:grid;grid-template-columns:1fr;gap:.45rem} .portal__item{align-items:center;gap:.6rem;font-size:.88rem; overflow-wrap:break-word;word-break:normal;hyphens:auto} /* ---- B10 · Der Fuß --------------------------------------------------- Er war 2549 Pixel hoch — eine heruntergeratterte Liste. Jetzt hat er eine Ordnung: ein schmales Laufband als Auftakt, der Abschied gross, die Adresse als eigene Kachel, die Spalten durch Haarlinien in ein Raster gefasst, die sozialen Zeichen als eine Zeile und darunter eine einzige Rechtszeile. Kein Nachlauf am Ende. */ .footer{padding-bottom:calc(var(--sa-u) + clamp(14px,2.4vh,22px))} /* Das Laufband war ausgeblendet, weil es ueber den Rand lief. Mit einer weichen Kante ist genau das die Bewegung, die der Fuss gebraucht hat. */ .footer__marquee{display:block;padding-block:9px;border-top:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .footer__marquee-row{font-size:1.42rem;letter-spacing:-.01em; color:rgba(244,238,228,.1)} .footer__marquee-row span{padding-inline:13px} .footer__top{padding-block:clamp(26px,5vh,44px) clamp(16px,3vh,26px)} .footer__mega{font-size:clamp(2rem,10.6vw,3rem);line-height:1} .footer__contact{margin-top:clamp(14px,2.6vh,22px);gap:.8rem} /* Die Adresse stand als nackter Text zwischen zwei Knoepfen. Als Kachel mit Haarlinie ist sie das, was sie sein soll: der erste Weg zu uns. Die Unterlinie (::after) braucht sie darin nicht mehr. */ .footer__mail{border:1px solid var(--hairline);border-radius:14px; padding:.8rem .9rem;gap:.28rem;background:rgba(244,238,228,.028)} .footer__mail::after{display:none} .footer__mail-label{color:var(--ember)} .footer__mail-addr{width:100%;justify-content:space-between; font-size:1.02rem;letter-spacing:-.01em} .footer__mail-arrow{width:.9em;opacity:.85;color:var(--ember)} .footer__ctas{display:grid;grid-template-columns:1fr;gap:.6rem} .footer__ctas .btn{width:100%;justify-content:center} /* Zwei nebeneinander gestellte Listen haben ungleich viele Eintraege — "Entdecken" vier, "Ueber uns" sieben. Im Raster erzwingt die laengste Liste die Zeilenhoehe, und neben der kurzen stand ein handtellergrosses Loch. Also volle Breite pro Gruppe, dafuer die Eintraege selbst zweispaltig: gleiche Information, keine Luecken, weniger Hoehe. */ .footer__cols{display:block;padding-block:0 clamp(14px,3vh,22px)} .footer__col{padding:clamp(12px,2.4vh,17px) 0; border-top:1px solid var(--hairline)} .footer__col--brand{border-top:0;padding-top:0} .footer__col h4{margin-bottom:.45rem;color:var(--ember)} .footer__col ul{display:block;columns:2;column-gap:clamp(14px,4vw,22px); column-rule:1px solid var(--hairline)} .footer__col li{break-inside:avoid;margin-bottom:0} /* 24 Pixel hohe Zeilen sind zu klein zum Treffen. Etwas Luft im Kasten (auf ~37px) und ein unsichtbares 44er-Feld darueber — die Zeile waechst nur wenig, der Finger bekommt trotzdem seine Flaeche. Die Unterlinie (::after) rutscht mit nach oben, damit sie am Wort bleibt. */ .footer__col ul a{display:block;position:relative;padding-block:.42rem} .footer__col ul a::before{content:'';position:absolute;left:0;right:0; top:50%;height:44px;transform:translateY(-50%);background:none} .footer__col ul a::after{bottom:.34rem} /* Die sozialen Zeichen sind keine Liste — eine Zeile, Titel links, Kreise rechts. */ .footer__col:last-child{display:flex;align-items:center; justify-content:space-between;gap:1rem} .footer__col:last-child h4{margin-bottom:0} .footer__social{gap:.5rem} .footer__soc{width:44px;height:44px} .footer__soc svg{width:19px;height:19px} .footer__bottom{margin-top:0; padding-top:clamp(12px,2.4vh,18px);row-gap:.9rem} .footer__org{order:1} /* Vier Rechtslinks untereinander waren vier Zeilen; als zwei Spalten sind es zwei — die Tippflaeche bleibt unveraendert gross. */ .footer__legal{order:2;width:100%;display:grid; grid-template-columns:1fr 1fr;gap:0 1rem;justify-items:start} /* Dieselbe Rechnung wie bei den Fussspalten: kleiner Kasten, unsichtbares 44er-Feld darueber. Zwei Zeilen statt vier, ohne Treffflaeche zu verlieren. */ .footer__legal a,.footer__cookiebtn{padding-block:.5rem;position:relative} .footer__legal a::before,.footer__cookiebtn::before{content:''; position:absolute;left:0;right:0;top:50%;height:44px; transform:translateY(-50%);background:none} /* Zeile drei: Jahr links, Zurueck-nach-oben rechts. */ /* Jahreszahl und "Nach oben" teilen sich eine Zeile, statt zwei zu brauchen. */ .footer__copy{order:3;font-size:.72rem;align-self:center;flex:1 1 auto} .footer__up{order:4;margin-left:auto} /* Unter der letzten Zeile standen 96 Pixel Schwarz: main.css haelt ab 1024px ein Polster von 76 bis 110 Pixeln frei, damit die schwebenden Knoepfe die letzte Zeile nicht verdecken. Die sitzen inzwischen tiefer und schmaler — 46 Pixel plus Geraeterand genuegen. */ .footer__bottom{padding-bottom:calc(var(--sa-u) + 46px)} /* Auf dem Telefon gibt es kein Ueberfahren. Die Zeile "Aufgebrueht von Content Agency" war ein Schwebekasten, der nur beim Ueberfahren auftaucht — antippen heisst hier aber sofort weiternavigieren, also bekam sie niemand zu lesen. Und wo sie doch erschien, lief sie 114 Pixel ueber den rechten Rand hinaus (gemessen: rechte Kante bei 504 in einem 390 breiten Fenster). Sie steht jetzt einfach da: unter der Marke, umgebrochen. */ .footer__org{display:grid;justify-items:start;gap:.4rem} .footer__gag{position:static;opacity:1;transform:none;white-space:normal; padding:0;border:0;background:none;box-shadow:none; color:var(--muted-2);font-size:.68rem;line-height:1.5;max-width:34ch} /* ---- B11 · Die runden Schalter --------------------------------------- „Jetzt Kontakt" saß in halber Höhe und lief durch den Satz. Er steht jetzt unten rechts, auf einer Linie mit dem Barrierefreiheitsknopf. */ /* `.orb.is-tuck` hebt den Kreis auf halbe Hoehe — auf dem Rechner sinnvoll, dort sitzt unten rechts nichts. Auf dem Telefon lief er dadurch mitten durch den Satz. Beide Zustaende stehen jetzt unten, auf einer Linie mit dem Barrierefreiheitsknopf: gleicher Abstand zum Rand, gleiche Unterkante. */ .orb,.orb.is-tuck{bottom:calc(var(--sa-u) + 12px); right:calc(var(--sa-r) + 12px);top:auto} .axfab{bottom:calc(var(--sa-u) + 12px);left:calc(var(--sa-l) + 12px)} /* Der Ring ist 47 Pixel hoch, der Knopf 44 — die Mitten treffen sich, wenn der groessere um die Differenz tiefer sitzt. */ .orb.is-tuck{margin-bottom:-1.5px} /* ---- B12 · Das Barrierefreiheitsfenster ------------------------------- Es nahm den ganzen Bildschirm. Jetzt ist es ein Blatt, das von unten kommt und höchstens vier Fünftel der Höhe einnimmt — der Rest bleibt sichtbar, damit man weiß, wohin man zurückkehrt. */ .axpanel__card{position:absolute;left:0;right:0;bottom:0;top:auto; width:auto;max-width:none;max-height:82svh;overflow-y:auto; border-radius:20px 20px 0 0; padding:clamp(18px,4.4vw,26px) clamp(16px,4vw,22px) calc(var(--sa-u) + 20px); transform:none} .axpanel__scrim{-webkit-backdrop-filter:none;backdrop-filter:none; background:rgba(11,8,6,.78)} .axpanel__h{font-size:1.1rem} .axpanel__b{font-size:.85rem} /* ---- B13 · Ruhigeres Scrollen ---------------------------------------- Die Körnung liegt als bildschirmfüllende Ebene mit `mix-blend-mode: overlay` über allem und muss bei jedem Bild neu verrechnet werden. Auf einem Telefon sieht man sie ohnehin kaum. Das ist der eine Effekt, der hier mehr kostet als er trägt. */ .grain{display:none} } /* ---- B14 · Die Sprachpille links oben ----------------------------------- Rechts stehen Ton und Menue in ihrer Pille. Links steht jetzt die Sprache in derselben Pille: gleicher Grund, gleicher Rand, gleicher Radius, gleiche Hoehe. Eine zweite Formensprache waere hier das Letzte, was die Leiste braucht — es sind zwei Ecken derselben Zeile. */ /* ACHTUNG, das ist der Kern des iPad-Fehlers gewesen: `mobilemenu.js` schiebt die Sprachpille in die Leiste, sobald KEIN Zeiger da ist — seit dem iPad-Umbau also auch bei 1024 und 1366 Punkten. Die Regeln dafuer standen aber weiter unter `max-width:820px`. Auf dem iPad war die Pille damit ein normales Rasterfeld statt eines abgesetzten Stuecks: aus drei Feldern wurden vier, das vierte (`.band`) rutschte in eine zweite Zeile, und `.nav__inner` wurde 120 Punkte hoch in einer Leiste von 58. Gemessen bei 1024 x 1366: .nav 58 hoch .nav__inner 120,266 hoch, bei align-items:center also y = -31 .lang y = -16 (oben abgeschnitten) .nav__mark y = -25 (oben abgeschnitten) .band y = 39, x = 420 (mitten in der Leiste) Genau das war auf Ihren Bildern zu sehen. Die Bedingung ist jetzt dieselbe wie im Skript. */ @media (max-width:820px), (pointer:coarse) and (hover:none){ /* Gleiche Hoehe wie die Pille rechts, damit die Zeile links und rechts dieselbe Linie haelt. Gemessen war sie 40 gegen 37,7 Pixel — der Unterschied kam aus einem anderen Innenabstand. Uebernommen wird jetzt exakt der der Leiste: .24rem/.3rem, dazu 28 Pixel hohe Knoepfe wie Ton und Menue. Nicht "ungefaehr gleich", sondern dieselbe Rechnung. */ .lang--ecke{display:flex!important; position:absolute;left:max(var(--gutter),calc(var(--sa-l) + 14px)); top:50%;transform:translateY(-50%);z-index:2; padding:.24rem .3rem;border-radius:999px; background:rgba(14,11,9,.58); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(244,238,228,.1); box-shadow:0 10px 28px rgba(0,0,0,.3)} .nav.is-light .lang--ecke{background:rgba(255,255,255,.62); border-color:rgba(11,8,6,.1)} .lang--ecke button{height:28px;min-height:28px;min-width:30px; padding-block:0;padding-inline:.52rem; font-size:.66rem;display:grid;place-items:center;line-height:1} .lang--ecke .lang__pill{border-radius:999px} /* Auf sehr schmalen Geraeten wird aus drei Kuerzeln sonst eine zweite Zeile. */ @media (max-width:360px){ .lang--ecke button{min-width:27px;padding-inline:.36rem} } } /* ---- B15 · Sprungziele unter der Leiste --------------------------------- Wer aus dem Menue auf einen Abschnitt springt, landete mit dessen Kopfzeile unter der festen Leiste. `scroll-margin-top` haelt den Abstand frei, den die Leiste einnimmt — dieselbe Rechnung wie im Menue. */ @media (max-width:820px){ section[id],[id^="chapter"],#hero,#europe,#citiesTeaser,#immersive,#xp, #partners,#b2b,#cta,#news,.psec[id]{ scroll-margin-top:calc(var(--sa-o) + var(--nav-h) + 12px)} } /* ============================================================================ TEIL C — die Unterseiten auf dem Telefon ---------------------------------------------------------------------------- Gemessen ueber 33 Unterseiten bei 390 Pixeln: · Der Seitenkopf war im Mittel 741 Pixel hoch, im schlimmsten Fall 886 — auf einem 844 Pixel hohen Schirm also der ganze erste Bildschirm für Vorzeile, Titel und Film. Wer eine Unterseite oeffnet, sieht damit keinen einzigen Satz Inhalt. · Zwischen den Abschnitten klaffte nichts (0 Pixel) — der Leerraum sitzt im Kopf, nicht in den Fugen. Deshalb wird auch nur dort gekuerzt. · Der Klebesatz zeigte Bilder von 1400 Pixeln Hoehe ueber dem Text daneben (siehe die Regel weiter oben, das war mein Fehler). · Chronik und Bildstrecke laufen waagerecht — auf dieser Breite sah man zwei halbe Karten und keinen Hinweis, dass man wischen kann. ========================================================================= */ @media (max-width:820px){ /* ---- C1 · Der Seitenkopf --------------------------------------------- Oben nur so viel Abstand, wie die Leiste wirklich einnimmt. Der Titel bleibt gross — er ist der Grund, warum man weiss, wo man ist —, aber der Rest rueckt zusammen, damit unter ihm noch etwas anfaengt. */ .phead{padding:calc(var(--sa-o) + var(--nav-h) + clamp(26px,5.4vh,48px)) 0 clamp(22px,3.8vh,36px); min-height:clamp(320px,46svh,430px)} /* Das Kopfvideo war ein 253 Pixel hoher Streifen, der unter der Leiste anfing. Auf dem Rechner fuellt es den ganzen Kopf — hinter Logo und Menue-Knopf. Auf dem Telefon jetzt auch: `inset:0` zurueck, dafuer eine Mindesthoehe, damit der Kopf ein Bild ist und kein Band. */ .phead__film{min-height:0;height:auto;inset:0} .phead__title{margin-top:clamp(10px,1.6vh,16px); font-size:clamp(1.62rem,7.4vw,2.6rem);line-height:1.02;letter-spacing:-.028em; font-stretch:104%} .phead__lede{margin-top:clamp(10px,1.6vh,16px);font-size:1rem; line-height:1.55;max-width:36ch} .phead__soon{margin-top:clamp(10px,1.6vh,16px)} /* Nicht kleiner als die Marke aus Teil A: 11,5 px sind hier die Untergrenze, und Brotkrumen sind der Weg zurueck. */ .crumbs{gap:.4rem;letter-spacing:.1em} /* ---- C2 · Chronik und Bildstrecke ------------------------------------ Beide laufen waagerecht und rasten ein. Damit das als Geste erkennbar ist, fuellt eine Karte fast die Breite und die naechste schaut heraus — ein halbes Dutzend Pixel Andeutung reicht nicht. */ .hist__track,.rail__track{padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .hist__i{flex:0 0 min(76vw,320px);scroll-snap-align:start} .hist__y{font-size:clamp(2rem,11vw,3rem)} .hist__b{font-size:.92rem} .rail__i{flex:0 0 min(74vw,300px)} .rail__hint{opacity:.9} /* ---- C3 · Das Laufband in den Abschnitten ----------------------------- Bei dieser Schriftgroesse standen zwei halbe Woerter im Bild. Kleiner gesetzt laeuft ein ganzer Begriff durch, und das Band liest sich wieder als Satz statt als Bruchstueck. */ .mq{padding-block:clamp(10px,2.4vw,18px)} .mq__i{font-size:clamp(1.1rem,6.4vw,1.9rem)} .mq__d{width:5px;height:5px;margin-inline:clamp(10px,3.4vw,18px)} /* ---- C4 · Regeln, Karten, Kennzahlen --------------------------------- Sie standen schon gut. Was fehlte, war Ruhe: etwas engere Innenabstaende und eine Geisterzahl, die nicht ueber den Text laeuft. */ .rules{gap:0} .rule{padding-block:clamp(18px,3.4vh,26px)} .rule__n{font-size:clamp(2.6rem,15vw,4.4rem);opacity:.1} .rule__t{font-size:1.12rem;line-height:1.2;padding-right:2.6rem} .rule__b{font-size:.94rem;line-height:1.6;margin-top:.5rem;padding-right:.4rem} .cards{gap:10px} .card{padding:clamp(16px,4.4vw,22px)} .card__t{font-size:1.06rem} .card__b{font-size:.92rem;line-height:1.55} .kpis{gap:10px} .kpi{padding:clamp(16px,4.4vw,22px)} .kpi__n{font-size:clamp(2rem,11vw,2.9rem);line-height:1} /* ---- C5 · Zeitplan, Vergleich, Segmente ------------------------------- */ .tt__tabs{gap:6px;flex-wrap:wrap} .tt__row{grid-template-columns:56px 1fr;gap:10px;padding-block:.85rem} .tt__time{font-size:.82rem} .tt__t{font-size:1rem} .tt__b{font-size:.9rem;line-height:1.5} .cmp{grid-template-columns:1fr;gap:10px} .cmp__c{padding:clamp(18px,4.6vw,24px)} .seg{gap:6px;flex-wrap:wrap} .seg button{min-height:42px} /* ---- C6 · Lexikon, Journal, Personen ---------------------------------- */ .lex__list{gap:8px} .lex__az{gap:4px;flex-wrap:wrap} .lex__search{min-height:46px} .lex__cats{gap:5px;flex-wrap:wrap} .lex__cats button,.seg button{font-size:var(--t-label)} .jrn__r{grid-template-columns:1fr;gap:10px} .jrn__shot{aspect-ratio:16/9} .people{grid-template-columns:1fr 1fr;gap:10px} .person{padding:clamp(12px,3.4vw,18px)} .person__name{font-size:.98rem;line-height:1.2} .person__b{font-size:.86rem;line-height:1.5} .person__avatar{width:clamp(38px,11vw,48px)} /* ---- C7 · Prosa und Fliesstext --------------------------------------- Zeilenlaenge ist auf dem Telefon keine Frage der Breite, sondern der Zeilenhoehe: enger Satz mit viel Durchschuss liest sich schlechter als etwas groesserer Satz mit normalem. */ .prose__body{font-size:1rem;line-height:1.66} .prose__body p + p{margin-top:1rem} .prose__grid{grid-template-columns:1fr;gap:clamp(18px,3.4vh,28px)} /* Ab 900 px legt page.css das Inhaltsverzeichnis in eine Zeile — auf einem Tablet richtig, auf 390 Pixeln nicht: dort brach es in drei ausgefranste Zeilen, in denen zwei Eintraege nebeneinander standen und der dritte allein. Auf dem Telefon steht wieder einer unter dem anderen, mit einer Haarlinie dazwischen, damit man die Eintraege als Liste liest. */ .prose__toc{position:static;border-left:0;border-top:1px solid var(--hairline); padding-left:0;padding-top:clamp(12px,2.4vh,18px); flex-direction:column;flex-wrap:nowrap;gap:0} .prose__toc a{padding-block:.72rem;border-bottom:1px solid var(--hairline)} .prose__toc a:last-child{border-bottom:0} .prose__toc a::before{top:1.5em} .psec{padding-block:clamp(34px,6.4vh,56px)} .psec__title{font-size:clamp(1.6rem,8vw,2.3rem);line-height:1.06} .psec__lede{font-size:1rem;line-height:1.58;max-width:38ch} /* ---- C8 · Unternavigation --------------------------------------------- */ .subnav__cards{grid-template-columns:1fr;gap:8px} .subnav__card{padding:clamp(14px,4vw,20px)} /* ---- C9 · Die Kinobahn auf Unterseiten -------------------------------- */ .cine__k{font-size:var(--t-label)} .cine__meta span{font-size:var(--t-label)} } /* ---- C10 · Eingaenge auf Unterseiten ------------------------------------- Die Themenbewegung fuehrt alles, was in einem [data-reveal] steht. Was ausserhalb liegt und trotzdem als Reihe gelesen wird, bekommt hier seinen eigenen gestaffelten Eingang — gebunden an `is-in`, also an denselben Beobachter, keinen zweiten. */ @media (max-width:820px) and (prefers-reduced-motion:no-preference){ .hist__track .hist__i{opacity:0;transform:translate3d(0,16px,0)} .hist.is-in .hist__i,[data-reveal].is-in .hist__i{opacity:1;transform:none; transition:opacity .5s var(--e-out-cubic),transform .7s var(--e-out-expo)} .hist__i:nth-child(2){transition-delay:.06s} .hist__i:nth-child(3){transition-delay:.12s} .hist__i:nth-child(n+4){transition-delay:.18s} /* Sicherheitsnetz: was nach zwei Sekunden nicht aufgegangen ist, geht auf. Ein Eingang darf nie der Grund sein, warum etwas fehlt. */ .hist__track .hist__i{animation:histFallback 0s linear 2.4s forwards} } @keyframes histFallback{to{opacity:1;transform:none}} /* ══ TEIL C2 · Zeilenhoehe der Marken-Zeilen ══════════════════════════════ `.label` traegt Zeilenhoehe 1. Fuer eine Zeile ist das genau richtig — sobald der Satz umbricht, kleben die zwei Zeilen aneinander. Auf 390px passiert das an sieben Stellen (gemessen), und nur diese bekommen Luft; die einzeiligen Marken im Kopf und im Laufband bleiben unangetastet. */ @media (max-width:700px){ .menu__meta,.fact__k,.b2b__reply,.cta__live,.cta__reply,.form__note, .footer__gag{line-height:1.4} } /* ══ TEIL D · DIE REISE DER BOHNE — Bildlast fuer das Telefon ═════════════ Der Abschnitt lud seine Kulissen in Kinogroesse: `sun.png` allein misst 16800 x 9600 Pixel und belegt dekodiert rund 645 MB — auf einem Telefon wirft der Browser dafuer die ganze Seite weg und laedt sie neu. Genau das war "da wo die reise der bohne erklaert wird ladet die seite neu aber fehlerhaft". Unter 700px zeigen dieselben Selektoren jetzt Fassungen aus `assets/mob/` (WebP, laengste Kante 900px; Sprite-Baender 2048px breit, damit die Prozent-Positionen der Einzelbilder unveraendert stimmen). Gemessen ueber alle 31 Dateien: 59,9 MB -> 3,8 MB uebertragen, 219,8 MP -> 19,5 MP, dekodiert also rund 879 MB -> 78 MB. Nur `background-image` wird ersetzt — Position, Groesse und Wiederholung bleiben, wie die Erlebnis-Datei sie gesetzt hat. */ @media (max-width:700px){ .festival-motion__background-mountain{background-image:url("../../public/experience/assets/mob/cafetal_rama_0.webp")} .festival-motion__background-woods{background-image:url("../../public/experience/assets/mob/cafetal_rama_1_tablet.webp")} .festival-motion__background-branches{background-image:url("../../public/experience/assets/mob/cafetal_rama_2_tablet.webp")} .festival-motion__sun{background-image:url("../../public/experience/assets/mob/sun.webp")} .festival-motion__yellow-sky{background-image:url("../../public/experience/assets/mob/cielo_0.webp")} .festival-motion__background-yellow-left{background-image:url("../../public/experience/assets/mob/cielo_1_tablet.webp")} .festival-motion__background-yellow-right{background-image:url("../../public/experience/assets/mob/cielo_2_tablet.webp")} .festival-motion__branch-total-width{background-image:url("../../public/experience/assets/mob/branch.webp")} .festival-motion__branch-left{background-image:url("../../public/experience/assets/mob/branch_left.webp")} .festival-motion__branch-right{background-image:url("../../public/experience/assets/mob/branch_right.webp")} .festival-motion__branch-center{background-image:url("../../public/experience/assets/mob/branch_center.webp")} .festival-motion__bean-sprite-b{background-image:url("../../public/experience/assets/mob/sprite_cereza_2.webp")} .festival-motion__bean-sprite-c{background-image:url("../../public/experience/assets/mob/sprite_secado.webp")} .festival-motion__bean-sprite-d{background-image:url("../../public/experience/assets/mob/sprite_molido.webp")} .festival-motion__cloud-1{background-image:url("../../public/experience/assets/mob/cloud_1.webp")} .festival-motion__cloud-2{background-image:url("../../public/experience/assets/mob/cloud_2.webp")} .festival-motion__cloud-3{background-image:url("../../public/experience/assets/mob/cloud_3.webp")} .festival-motion__fire-background{background-image:url("../../public/experience/assets/mob/fire_0.webp")} .festival-motion__background-red-beans-1{background-image:url("../../public/experience/assets/mob/fire_grain_0.webp")} .festival-motion__beans-group-1{background-image:url("../../public/experience/assets/mob/top_grain_0.webp")} .festival-motion__beans-group-2{background-image:url("../../public/experience/assets/mob/top_grain_1.webp")} .festival-motion__beans-group-3{background-image:url("../../public/experience/assets/mob/top_grain_2.webp")} .festival-motion__bar-background{background-image:url("../../public/experience/assets/mob/cafeteria_0.webp")} .festival-motion__background-table{background-image:url("../../public/experience/assets/mob/cafeteria_1.webp")} .festival-motion__hand-sprite{background-image:url("../../public/experience/assets/mob/hand_sprite.webp")} .festival-motion__stream-sprite{background-image:url("../../public/experience/assets/mob/sprite_chorro.webp")} .festival-motion__cup-sprite{background-image:url("../../public/experience/assets/mob/cup_sprite.webp")} } /* ══ TEIL E · DAS BEWERBUNGSFORMULAR ══════════════════════════════════════ Neun Schritte auf 390 Pixel. Was hier zaehlt, ist nicht Schmuck, sondern dass nichts uebereinander liegt, dass jeder Knopf zu treffen ist und dass die Schrift beim Tippen nicht unter der Tastatur verschwindet. Die Schienen-Verschiebung selbst ist in partner.css behoben, weil sie auch den Rechner betraf. */ @media (max-width:700px){ /* ---- Kopf ------------------------------------------------------------ Die feste Leiste braucht die Kerbe des Geraets als Polster, sonst sitzt das Logo unter der Statusleiste. */ .app__bar{padding-top:calc(var(--sa-o) + 10px)} /* Marke und Schliesskreuz waren 34 bzw. 38 Pixel hoch. Beide behalten ihr Aussehen; darunter liegt ein unsichtbares 44er-Feld. */ .app__bar .lockup{min-height:44px} .app__close{position:relative} .app__close::after{content:'';position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%);background:none} /* Die Prozentzahl war eine 29 Pixel breite Marke in der rechten Ecke — dritte Anzeige desselben Fortschritts, den die Schiene mit "1 von 9" und ihrem Balken schon zeigt. Sie geht, der Platz bleibt. */ .app__pct{display:none} /* ---- Die Schiene der Schritte ---------------------------------------- Erledigte Schritte sind anklickbar; 34 Pixel hoch waren sie zu klein. */ .rail__list{padding-block:3px} .rail__list li{min-height:44px} .rail__step{font-size:1.02rem} /* ---- Frage und Felder ------------------------------------------------ */ .step__q{font-size:clamp(1.42rem,6.6vw,1.9rem);max-width:none} .step__hint{font-size:.95rem;line-height:1.55} .step__idx{letter-spacing:.14em} /* Beim Tippen schiebt die Bildschirmtastatur die Seite nach oben. Ohne Rand landet das Feld unter der festen Fussleiste — mit diesem Rand bleibt oben die Kopfleiste und unten die Knopfleiste frei. */ .field,.chips,.cards,.check,.addr,.drop,.condgroup{scroll-margin-block:96px 128px} .field textarea{min-height:132px;line-height:1.55} .grid2{gap:14px} /* ---- Tippflaechen unter 40 Pixel (gemessen) -------------------------- Der Schalter, das Karo "alle Maerkte", der Pfeil im Landfeld, "Ändern" in der Pruefung und "mehr zeigen" lagen zwischen 18 und 36 Pixeln. Die Form bleibt jeweils, wie sie ist: entweder wird der Kasten hoeher, oder ein unsichtbares 44er-Feld legt sich darueber. */ .lookup{min-height:44px} .check--inline{min-height:44px;align-items:center} .combo__caret{position:absolute} .combo__caret::before{content:'';position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%)} .review__edit{min-height:44px;display:inline-flex;align-items:center} .reviewbox__more{min-height:44px} /* ---- Schritt 8 · Dateien --------------------------------------------- "Hierher ziehen" beschreibt eine Geste, die es auf einem Telefon nicht gibt — den Satz tauscht partner.js aus. Hier bekommt die Flaeche eine Hoehe, die man trifft, und die Regelzeile Zeilenabstand statt drei zusammengedraengter Zeilen in Versalien. */ .drop{padding:clamp(20px,5vw,28px);min-height:136px;justify-content:center; gap:.55rem} .drop__title{font-size:1.02rem;line-height:1.35} #dropRules{font-size:.72rem;line-height:1.7;letter-spacing:.07em; max-width:30ch;margin-inline:auto} /* Ein ganzer Satz in Versalien mit Sperrung ist auf 390 px kein Satz mehr, sondern ein Muster. Die Datei-Zeile bekommt hier ihre Grundschrift zurueck — Farbe und Groesse bleiben zurueckhaltend. */ .note{text-transform:none;font-family:var(--f-body);letter-spacing:.005em; font-size:.84rem;line-height:1.6} /* ---- Schritt 9 · Pruefen --------------------------------------------- */ .review__row{padding-block:.75rem} .review__v{overflow-wrap:anywhere;font-size:.92rem} .check__text{font-size:.92rem;line-height:1.5} /* ---- Die Leiste unten ------------------------------------------------ Sie war zu eng: die Punktreihe nahm 93 Pixel, und weil beide Knoepfe schrumpfen durften, blieb dem rechten zu wenig — "Weiter" stand als "Weite" da, "Bewerbung absenden" als "Bewerbun". Die Punkte sind die dritte Anzeige desselben Fortschritts und gehen; der Zurueck-Knopf behaelt seine Groesse, der Hauptknopf bekommt den Rest. */ .app__foot{gap:10px; padding:clamp(10px,2vh,14px) 16px calc(var(--sa-u) + clamp(10px,2vh,14px))} .app__dots{display:none} .app__foot .btn{flex:0 0 auto} .app__foot #nextBtn{flex:1 1 auto;margin-left:auto;justify-content:center} /* "Bewerbung absenden" ist achtzehn Zeichen in Versalien und passte auch ohne die Punkte nicht: 185 Pixel Text in 146 Pixel Kasten. Form, Hoehe und Radius der Knoepfe bleiben, was sie sind — schmaler wird nur das Polster links und rechts und der Buchstabenabstand, und zwar nur in dieser Leiste und nur auf dem Telefon. */ .app__foot .btn{padding-inline:1.15rem;gap:.6rem;letter-spacing:.1em} .app__foot .btn--lg{padding-inline:1.25rem} /* Der Barrierefreiheits-Knopf klebt unten links — genau auf dem Zurueck-Knopf. Solange die Knopfleiste da ist, steigt er darueber; auf dem Dankeschirm ist sie weg, und er darf wieder nach unten. */ body.app:not(.is-sent) .axfab{bottom:calc(var(--sa-u) + 92px)} /* ---- Nach dem Absenden ------------------------------------------------ Die Schrittschiene hat nichts mehr zu sagen, stand aber als Kette aus fuenf Marken ueber dem Dank. */ body.is-sent .rail{display:none} .done__say h1{font-size:clamp(2rem,10.4vw,2.8rem)} .done__next{line-height:1.6;letter-spacing:.08em} .done__overb,.done__overh{line-height:1.45} .done__steps{gap:10px} .done .btn-row{display:grid;grid-template-columns:1fr;gap:.6rem;width:100%;max-width:none} .done .btn-row .btn{width:100%;justify-content:center} } /* Auf den schmalsten Telefonen (320-380 px) reicht auch das noch nicht: "Bewerbung absenden" braucht dort 176 Pixel, der Kasten hat 160. Eine Stufe enger und eine Spur kleiner — die Form bleibt dieselbe Pille. */ @media (max-width:380px){ .app__foot .btn{padding-inline:.95rem;letter-spacing:.08em} .app__foot .btn--lg{padding-inline:1rem;font-size:var(--t-label)} } /* Und auf 320 px fehlen immer noch 26 Pixel. Statt die Schrift unter die Lesegrenze zu druecken faellt dort der Pfeil weg: er ist Zierde, 16 Pixel breit, mit seinem Abstand genau die fehlenden 26. Die Pille bleibt. */ @media (max-width:340px){ .app__foot .btn--lg .btn__arrow{display:none} .app__foot .btn--lg{gap:0;padding-inline:.8rem} } /* ══ TEIL F · FEINSCHLIFF AUF ALLEN SEITEN ════════════════════════════════ Aus der Messung ueber alle 36 Seiten bei 390 px: kein seitlicher Ueberlauf, kein abgeschnittener Text, keine stehengebliebene Animation, keine Ueberlappung. Was blieb, waren zu kleine Ziele und zu kleine Schrift — immer dieselben acht Bauteile, ueber viele Seiten verteilt. Die Form bleibt jeweils unveraendert: entweder waechst der Kasten in die Hoehe, oder ein unsichtbares 44er-Feld legt sich darueber. */ @media (max-width:700px){ /* ---- Der Sprachumschalter (34 Seiten) -------------------------------- 34 x 28 Pixel. Die Hoehe ist Absicht — sie haelt die Pille auf einer Linie mit dem Menue-Knopf. Also waechst nicht der Knopf, sondern sein Feld: 44 Pixel hoch, so breit wie er selbst plus etwas Luft. Mehr Breite waere falsch, die drei Kuerzel stehen dicht nebeneinander. */ .lang button{position:relative} .lang button::after{content:'';position:absolute;left:-2px;right:-2px; top:50%;height:44px;transform:translateY(-50%);background:none} /* ---- Die Spielkarte (25 Seiten) -------------------------------------- */ .gpromo .label{font-size:.72rem} .gpromo__go{min-height:44px} .gpromo__more{position:relative;display:inline-block} .gpromo__more::after{content:'';position:absolute;left:0;right:0;top:50%; height:44px;transform:translateY(-50%);background:none} .gpromo__x{width:40px;height:40px} /* ---- Kontaktseite ----------------------------------------------------- */ .krole{min-height:44px} .kcard__mail,.kof__link,.kcopy{min-height:44px;display:inline-flex;align-items:center} .kpanel__addr a,.kdp a{position:relative;display:inline-block} .kpanel__addr a::after,.kdp a::after{content:'';position:absolute;left:0;right:0; top:50%;height:44px;transform:translateY(-50%);background:none} /* ---- Lexikon ---------------------------------------------------------- Sechsundzwanzig Buchstaben zu je 22 x 20 Pixeln in einem waagerechten Roller: zu klein zum Treffen und zur Haelfte ausserhalb des Bildes. Jetzt zwei Reihen zu dreizehn — jeder Buchstabe sichtbar, jedes Feld rund 26 x 40 statt 22 x 20. */ .lex__az{display:grid!important;grid-auto-flow:row!important; grid-template-columns:repeat(13,1fr)!important;gap:4px;overflow:visible!important} .lex__azb{width:auto;height:40px;border-radius:8px} .lex__cat,.lex__cats button{min-height:44px} .lex__search input{min-height:44px} /* ---- Presse, Medien, Aufklapper --------------------------------------- */ .psec summary,.prose summary,.psec__foot summary{min-height:44px; display:flex;align-items:center} .psec__title a{min-height:44px;display:inline-flex;align-items:center} .asset__dl{min-height:44px;display:inline-flex;align-items:center} .abfound__links a{position:relative;display:inline-block} .abfound__links a::after{content:'';position:absolute;left:0;right:0;top:50%; height:44px;transform:translateY(-50%);background:none} /* ---- Spiel-Einladung --------------------------------------------------- */ .gmodal__n{font-size:.72rem} .gmodal__x{width:44px;height:44px} .gmodal__later{position:relative;display:inline-block} .gmodal__later::after{content:'';position:absolute;left:0;right:0;top:50%; height:44px;transform:translateY(-50%);background:none} /* ---- Reise der Bohne: der Pfeil weiter unten --------------------------- */ .festival-motion__arrow{position:relative} .festival-motion__arrow::after{content:'';position:absolute;left:50%;top:50%; width:48px;height:48px;transform:translate(-50%,-50%);background:none} /* ---- Kleinigkeiten ----------------------------------------------------- */ .cmp__badge{font-size:.72rem} /* Lange Adressen in schmalen Karten: sie liefen 24 Pixel in den Rand. */ .card__meta,.card__meta a,.kcard__mail,.abfound__links a{overflow-wrap:anywhere} } /* ── Nachlese aus dem zweiten Durchgang ──────────────────────────────────── */ @media (max-width:700px){ /* Sechsundzwanzig Buchstaben in zwei Reihen waren 23 Pixel breit — zu schmal. Drei Reihen zu neun geben rund 36 x 40 pro Buchstabe. */ .lex__az{grid-template-columns:repeat(9,1fr)!important} /* Die Marke im Kopf war 40 Pixel hoch, der Tag-Reiter 43, der Herunterladen-Verweis 40 (in einer Karte, die beim Eintreten noch skaliert). Alle drei auf 44 und darueber. */ .lockup{min-height:44px} .tt__tab{min-height:44px} /* Die Auswahlknoepfe im Formular (Maerkte, Bedingungen, Standgroesse, Anforderungen). Gemessen 41 Punkte — drei fehlten. */ .chip{min-height:44px} .asset__dl{min-height:48px} /* Verweise in Aufzaehlungen — Anschriften, Adressen, Rechtsangaben — stehen je auf einer eigenen Zeile. Sie bekommen Innenabstand statt eines Feldes darueber, damit sich nichts ueberlappt. */ .prose__body dd a,.kof__dl dd a,.e404__links a{ display:inline-flex;align-items:center;min-height:44px} /* Die Notiz unter "Marken, die den Weg mitgegangen sind" lag bei 10,2 px. */ .partners__head .label:last-child{font-size:.72rem} .orb__text,.orb__text span{font-size:.72rem} } /* ══ TEIL G · MASSVORGABEN, DIE AUF DEM TELEFON NICHTS MEHR MESSEN ════════ Ein `max-width` in ch haelt auf dem Rechner den Satz auf lesbarer Breite. Auf 390 Pixeln ist die Spalte selbst schon 350 breit — rund 45 Zeichen, deutlich unter jedem Richtwert. Die Vorgabe misst dort nichts mehr, sie verengt nur ein zweites Mal. Gemessen ueber alle 36 Seiten: 251 Textstellen wurden enger gehalten als ihre Spalte. Die schlimmste war der Titel einer Regel-Karte: 15ch = 167 von 350 Pixeln, und "Die Bühne ist eine Werkbank, keine Keynote" brach in vier ausgefranste Zeilen. Auf dem Telefon zaehlt die Spalte. */ @media (max-width:700px){ .rule__t,.rule__b,.cine__h,.cine__b,.hero__sub,.psec__lede,.phead__lede, .e404__title,.e404__sub,.lead,.prose__body p,.prose__body li, .card__b,.xp__cell p,.tl__b,.note,.step__hint{max-width:none} } /* ══ TEIL H · DIE DIAGRAMME ═══════════════════════════════════════════════ Die Balkendiagramme tragen ihre Beschriftung in SVG-Einheiten: 12 bei einem viewBox von 760. Auf dem Telefon wird das SVG auf 312 Pixel gezeichnet — Massstab 0,41, also 4,9 Pixel hohe Schrift. Lesbar ist das nicht, und die Messung hat es nie gemeldet, weil sie nur HTML-Text prueft und keinen SVG-Text. Zwei Handgriffe, beide gemessen: die Karte gibt innen Rand ab, damit das Bild breiter wird (312 -> 350 Pixel, Massstab 0,46), und die Beschriftung waechst auf 26 Einheiten. Macht 12,0 Pixel auf dem Glas. Die Geometrie der Balken bleibt unangetastet — es aendert sich nur, wie gross geschrieben wird. */ @media (max-width:700px){ /* Die Karte geht ueber die volle Breite: seitliche Linie und Rundung entfallen, oben und unten bleibt die Haarlinie, damit sie ein Block bleibt. Das SVG waechst dadurch von 312 auf 336 Pixel (bei 360er Fenstern) — genug, damit 26 Einheiten Schrift 11,5 Pixel ergeben. */ .fig{margin-inline:calc(var(--gutter) * -1);padding:18px 36px 18px 12px; border-radius:0;border-inline:0} /* Rechts bleibt mehr Rand stehen als links: bei den laengsten Balken sitzt die Zahl hinter dem Balkenende und ragt ueber die Zeichenflaeche hinaus (gemessen: bis 60 Einheiten). Dieser Rand faengt sie auf, statt sie abzuschneiden. */ .fig__c{margin-inline:-4px 0;margin-top:14px} .fig .lbl,.fig .val{font-size:27px} .fig .tick{font-size:24px} .fig__h{font-size:1.08rem;line-height:1.25} .fig__s{font-size:.88rem;line-height:1.5} .fig table{font-size:.8rem} .fig th,.fig td{padding:.5rem .4rem} } /* ── Adresszeilen in Karten ─────────────────────────────────────────────── "partners@coffeefestival.eu" sind 26 Zeichen in gesperrter Versalschrift. In einer 314 Pixel breiten Karte brauchte das 320 Pixel — die Adresse brach um, und auf der zweiten Zeile stand ein einzelnes "U". Eine Spur kleiner und enger gesperrt passt sie in eine Zeile (gemessen: 219 px). */ @media (max-width:700px){ .card__meta{font-size:.8rem;letter-spacing:.05em} } /* ══ TEIL I · DIE ZWEI FENSTER, DIE NIE GEPRUEFT WURDEN ═══════════════════ Das Barrierefreiheits-Fenster und der Cookie-Hinweis liegen als eigene Ebenen ueber der Seite. Alle bisherigen Messungen sind an ihnen vorbeigelaufen, weil sie geschlossen im Baum stehen. Geoeffnet gemessen, auf 390 Pixeln: */ @media (max-width:700px){ /* Der Schliesskreuz-Knopf mass 32 x 32. Die Form bleibt, die Flaeche waechst auf 44 — ausgerechnet in dem Fenster, das fuer Menschen mit eingeschraenkter Feinmotorik gedacht ist. */ .axpanel__x{position:relative} .axpanel__x::after{content:'';position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%);background:none} /* Die Stufen (100 %, 110 %, …) und die Zeilenabstaende standen bei 39 Pixeln — einen Pixel unter der Grenze, und das durchgehend. */ .axseg button,.axpanel__card .axgrp button{min-height:44px} /* Die Sprungmarken in die Seite waren 36 hoch. */ .axmap__i{min-height:44px;display:flex;align-items:center} .axstmt{position:relative;display:inline-block} .axstmt::after{content:'';position:absolute;left:0;right:0;top:50%; height:44px;transform:translateY(-50%);background:none} /* Im Cookie-Hinweis waren die drei Verweise 18 Pixel hoch. Sie stehen in einer Zeile nebeneinander, deshalb wird nur die Hoehe geholt. */ .cc__link{position:relative;display:inline-block} .cc__link::after{content:'';position:absolute;left:0;right:0;top:50%; height:44px;transform:translateY(-50%);background:none} } /* ══ TEIL J · WAS AM GERAET AUFFIEL ═══════════════════════════════════════ */ @media (max-width:700px){ /* ---- Das Gelaende-Video ("So sieht es aus, wenn eine Stadt auf Kaffee laeuft") war ein 219 Pixel hoher Streifen in einem 339 Pixel hohen schwarzen Feld. Im Hochformat gehoert es ueber den ganzen Schirm: volle Breite, volle Hoehe, der Satz darauf. */ .atmos{padding-block:0} .atmos__frame{height:100svh} .atmos__clip{height:100%} video.atmos__img,.atmos__fallback,.atmos__img{aspect-ratio:auto; height:100svh;width:100%;object-fit:cover} .atmos__scrim{background:linear-gradient(to top,rgba(11,8,6,.92) 0%, rgba(11,8,6,.42) 44%,rgba(11,8,6,.12) 100%)} .atmos__over{bottom:calc(var(--sa-u) + 92px);padding-inline:var(--gutter)} .atmos__q{font-size:clamp(1.66rem,8.2vw,2.4rem);max-width:none;line-height:1.02} /* ---- Zwei Beschwerden, die sich widersprechen, und ihr Kompromiss ---- "Die Textanimation laeuft zu schnell" und "beim Sektionswechsel stoppt es" sind dieselbe Schraube von zwei Seiten: eine angeheftete Bahn haelt die Seite fest, waehrend darin etwas ablaeuft. Laenger heisst langsamer zu lesen und laenger zu stehen. Gemessen war jede Bahn 2,5 bis 3,2 Bildschirme lang — sechs davon auf der Startseite. Sie werden kuerzer (1,8 Bildschirme), damit die Seite seltener stehenbleibt; die Woerter im Becher-Abschnitt bekommen dafuer einen groesseren Anteil ihrer Bahn (main.js), sodass sie trotzdem langsamer durchlaufen als zuvor: vorher 200vh Bahn x 50 % Wortfenster = 100vh fuer sechs Woerter jetzt 220vh Bahn x 72 % Wortfenster = 158vh */ .legacy__track,.yearseq__track,.cities__track,.europe__track{height:180vh} .immersive__track{height:220vh} } /* ══ TEIL K · DER KOPF MIT VIDEO ══════════════════════════════════════════ Auf dem Telefon laeuft die Schrift ueber die volle Breite — ein seitlicher Verlauf hilft dort nicht. Also ein senkrechter Verlauf, der oben und unten traegt und in der Mitte aufmacht: dort ist der Clip zu sehen. Die vorige Fassung hatte zusaetzlich eine flache Lage ueber alles gelegt; zusammen blieb vom Bild fast nichts uebrig. Die Schrift haelt der Schattenwurf. */ @media (max-width:700px){ .phead--film .phead__film::after{ background: linear-gradient(180deg,rgba(11,8,6,.62) 0%,rgba(11,8,6,.20) 13%, rgba(11,8,6,.42) 21%,rgba(11,8,6,.70) 31%, rgba(11,8,6,.74) 72%,rgba(11,8,6,.92) 100%), linear-gradient(0deg,rgba(226,85,30,.09),rgba(226,85,30,.09))} .phead--film .phead__title, .phead--film .phead__lede, .phead--film .crumbs{text-shadow:0 1px 4px rgba(11,8,6,.92), 0 2px 22px rgba(11,8,6,.8)} } /* ══ TEIL L · DER PARTNERBEREICH ══════════════════════════════════════════ Die Karte hat auf dem Rechner viel Bewegung — nur haengt sie komplett am Ueberfahren: ein Lichtstreifen laeuft ueber jede Zeile, die Zeichen heben sich, die Tasse dampft. Auf dem Telefon gibt es kein Ueberfahren, also stand alles still. Jetzt loest das Eintreten dieselbe Bewegung aus — einmal, gestaffelt, von oben nach unten. */ @media (max-width:700px) and (prefers-reduced-motion:no-preference){ .portal.is-in .portal__item::before{opacity:1; animation:portalSweep 1.5s var(--e-out-expo) forwards} .portal.is-in .portal__item:nth-child(2)::before{animation-delay:.12s} .portal.is-in .portal__item:nth-child(3)::before{animation-delay:.24s} .portal.is-in .portal__item:nth-child(4)::before{animation-delay:.36s} .portal.is-in .portal__ico{background:rgba(226,85,30,.22);color:var(--ivory); transform:translateY(-3px)} .portal.is-in .portal__item:nth-child(2) .portal__ico{transition-delay:.12s} .portal.is-in .portal__item:nth-child(3) .portal__ico{transition-delay:.24s} .portal.is-in .portal__item:nth-child(4) .portal__ico{transition-delay:.36s} .portal.is-in{border-color:rgba(226,85,30,.34)} } @media (max-width:700px){ /* Die Tasse stand klein und links; sie ist der Blickfang dieser Karte und steht jetzt mittig und groesser, der Knopf darunter ueber die volle Breite. */ .portal__go{align-items:center;text-align:center;gap:.9rem} .portal__cupwrap{width:min(52vw,210px);margin-inline:auto} .portal__go .portal__btn{width:100%;justify-content:center} .portal__host{text-align:center} .portal__item{padding-block:.72rem} } /* ══ TEIL M · KLEINTYPOGRAFIE UND SICH ÜBERLAPPENDE ZIELE ═════════════════ Aus dem Treffertest ueber alle Seiten bei 390 Pixeln: von 504 kleinen Zielen nahmen 338 den Fingertipp nicht an. Nicht weil sie zu klein waren — sie sind es nicht —, sondern weil ihre unsichtbaren 44er-Felder sich gegenseitig ueberdecken. Zwei Zeilen im Abstand von 37 Pixeln, jede mit einem 44 Pixel hohen Feld: das spaetere Feld liegt ueber dem Wort des frueheren. Ein Tipp mitten auf „Story" oeffnete die Zeile darunter. Die Loesung ist nicht ein noch groesseres Feld, sondern gar keins: die Zeile bekommt ihre 44 Pixel selbst, ueber den Innenabstand. Dann stossen die Ziele aneinander, statt sich zu ueberlagern — und jedes Wort gehoert wieder zu seinem eigenen Verweis. */ @media (max-width:700px){ /* ---- Die Verweise in den Fusszeilenspalten (62 Faelle je Seite) ------- */ .footer__col ul a{min-height:44px;padding-block:0; display:flex;align-items:center} .footer__col ul a::before{content:none} .footer__col ul a::after{bottom:.62rem} /* ---- Die drei Rechtslinks und die Cookie-Schaltflaeche (18 Faelle) ---- */ .footer__legal a,.footer__cookiebtn{min-height:44px;padding-block:0; display:inline-flex;align-items:center} /* ---- Der Knopf „nach oben" ------------------------------------------- */ .footer__up{min-height:44px;display:inline-flex;align-items:center} .footer__up::after{content:none} /* ---- Die Menuezeilen ------------------------------------------------- */ .menu__list a{min-height:48px;display:flex;align-items:center} /* ---- Dieselbe Ursache an zwei weiteren Stellen ----------------------- Die beiden Verweise unter „Gegruendet von" standen als 29 Pixel hohe Zeilen untereinander, jede mit einem 44er-Feld: das untere Feld lag ueber dem oberen Wort. Und die Buchstaben im Lexikon waren mit 40 Pixeln knapp unter dem Richtwert. Beide bekommen echte Hoehe statt eines Feldes. */ .abfound__links a{min-height:44px;display:flex;align-items:center} .abfound__links a::after{content:none} .lex__azb{height:44px} /* ══ Zeilenabstand der Kleinlabels ═══════════════════════════════════════ `line-height:1` ist auf einer Zeile richtig und auf zwei Zeilen falsch: gemessen 11 Pixel Zeilenabstand bei 11,5 Pixel Schrift — die Zeilen beruehren sich. Auf 390 Pixeln brechen 13 von 176 Kleinlabels um, auf der Teamseite allein sechs Rollenbezeichnungen ("Festival Director", "Exhibitor Operations"). Auf dem Rechner passt jedes in eine Zeile, deshalb ist es dort nie aufgefallen. */ .label,.cine__k,.fig__src,.person__role,.rail__hint,.lex__count, .footer__route,.orb__text{line-height:1.45} /* Und die Groesse. 11,5 Pixel versal mit .16em Sperrung ist an der Grenze, der Hinweis in der Fusszeile lag bei 10,9. Beide auf 12,4; die Sperrung geht leicht zurueck, damit das Label dabei nicht breiter wird und keine Zeile zusaetzlich umbricht. */ .label,.cine__k,.fig__src,.rail__hint{font-size:.775rem;letter-spacing:.13em} .lockup__sub,.footer__route{font-size:.74rem;letter-spacing:.12em} /* Zwei Zeilenabstaende, die bei kleiner Schrift zu eng standen. */ .rule__t{line-height:1.42} .person__name{line-height:1.32} } /* ══ TEIL N · DIE REISE DER BOHNE: DREI EBENEN VON 84.400 PIXELN ══════════ Gemessen auf 390 Pixeln bei Pixelverhältnis 3, mitten in der Reise: .festival-motion__yellow-sky 658 x 84400 ~1908 MB Rasterfläche .festival-motion__fire-background 658 x 84400 ~1908 MB .festival-motion__bar-background 658 x 84400 ~1908 MB Alle drei stehen auf `height:1000%`, tragen `translate3d(0,0,0)` — sind also eigene Kompositor-Ebenen — und ihr Bild sitzt mit `top center` und `background-size:contain` am oberen Rand. Die restlichen rund 84.000 Pixel sind durchsichtig und zeigen nichts. Nachgemessen über sieben Scrollpositionen: die Transformation dieser drei bleibt an jeder Stelle bei 0 — sie bewegen sich nie, es bewegt sich ihr Elternteil. Die Höhe trägt also weder Bild noch Bewegung. Da sie absolut positioniert sind, hängt an ihrer Höhe auch kein Layout. Und weil `contain` bei einem so hohen Kasten ohnehin über die BREITE begrenzt, ändert eine kleinere Höhe am Bild nichts, solange sie größer bleibt als das Bild hoch ist — das sind bei 658 Pixeln Breite rund 470. 200vh lässt reichlich Luft und nimmt jeder der drei Ebenen den Faktor 50. Das ist die Ursache dafür, dass das Telefon beim Scrollen in diesen Abschnitt den Tab verwirft und die Seite neu lädt. */ @media (max-width:900px){ .festival-motion__yellow-sky, .festival-motion__fire-background, .festival-motion__bar-background{height:200vh} } /* ══ TEIL O · DIE FUSSZEILE AUF DEM TELEFON ═══════════════════════════════ Aus dem Bildschirmfoto des Kunden, Punkt für Punkt nachgemessen: · Das Agenturzeichen wurde mit 58 × 14 Pixeln gerendert. Die SVG ist 257 × 62 breit; auf 58 gestaucht sind die Buchstaben duenner als ein Pixel und laufen zu einem dunklen Klotz zusammen — mittlere Helligkeit 25 von 255. Es sieht aus wie ein kaputtes Bild. · „Aufgebrueht von Content Agency · contentag.com" stand versal in Schreibmaschinenschrift ueber zwei Zeilen. Versal und gesperrt ist eine Vorzeile von drei Woertern — nicht ein Satz von neun. · Der Kreis „Jetzt Kontakt" lag ueber „Cookie-Einstellungen"; das Wort war abgeschnitten. Er tritt jetzt in der Fusszeile zur Seite (main.js). · Zwischen den Bloecken standen ungleiche Abstaende: 1,5 rem Zeilenluft gegen 0,4 rem im Veranstalterblock. Jetzt ein Mass fuer alle. */ @media (max-width:700px){ /* ---- Der Veranstalterblock -------------------------------------------- */ .footer__org{gap:.6rem;padding-block:.15rem} .footer__org img{width:132px;opacity:.92} /* Der Satz liest sich als Satz, nicht als Vorzeile. */ .footer__gag{text-transform:none;letter-spacing:.01em;font-size:.76rem; line-height:1.55;max-width:30ch;color:var(--muted); font-family:var(--f-body)} /* ---- Die vier Rechtslinks --------------------------------------------- Zwei Spalten bleiben, aber mit ruhigem Zeilenmass und ohne die Restbreite, in der vorher der Kreis lag. */ .footer__legal{gap:.15rem 1.1rem} .footer__legal a,.footer__cookiebtn{padding-block:.55rem; letter-spacing:.1em;font-size:.74rem} /* ---- Ein Mass fuer die Abstaende --------------------------------------- */ .footer__bottom{row-gap:1.2rem;padding-top:clamp(18px,3.2vh,26px)} .footer__copy{font-size:.74rem;letter-spacing:.08em} /* ---- Die Trennlinien zwischen den Spalten ------------------------------ Die senkrechte Linie zwischen den beiden Verweisspalten endete mitten im Nichts, weil die rechte Spalte kuerzer ist als die linke. Sie faellt weg; die Spalten trennt der Abstand. */ .footer__col ul{column-rule:none} /* ---- Der Kreis, wenn er zur Seite tritt --------------------------------- Mit `.orb.is-gone` allein passiert nichts: `body.is-ready .orb` setzt `opacity:1` und wiegt schwerer (0,2,1 gegen 0,2,0). Dieselbe Kollision wie schon dreimal in diesem Projekt — die Datei hat dafuer eine eigene Schreibweise, `body.menu-open .orb`. Der folgt diese Regel. */ body.is-ready .orb.is-gone{opacity:0;transform:translate3d(0,14px,0) scale(.9); pointer-events:none;transition:opacity .42s var(--e-out-cubic), transform .52s var(--e-out-expo)} } /* ════════════════════════════════════════════════════════════════════════ DAS MENUE AUF JEDEM GERAET OHNE ZEIGER ------------------------------------------------------------------------ Diese Regeln standen bisher im Telefonblock, also unter `max-width:700px`. Auf einem iPad greift der nicht — und dort war das Menue damit unbedienbar: die vier Untergruppen tauschen auf dem Rechner, sobald man auf einen Hauptpunkt ZEIGT. Ein iPad zeigt nicht. Gemessen bei 820 x 1180: `hover:none` und `pointer:coarse`, das rechte Feld blieb auf der Startgruppe stehen, und der erste Fingertipp fuehrte direkt auf die Uebersichtsseite. An die Unterseiten kam man ueber das Menue gar nicht. Die Bedingung ist deshalb nicht mehr die Breite, sondern das, worum es geht: kein Zeiger, kein Zeigen. Auf dem Telefon aendert sich dadurch nichts (die erste Bedingung trifft dort ohnehin zu), auf dem iPad klappen die Gruppen jetzt unter ihrem Hauptpunkt auf — mit derselben Mechanik, die das Telefon seit Monaten benutzt. ==================================================================== */ /* ======================================================================== DAS MENUE — DIESELBE BEDINGUNG WIE SEIN SKRIPT ------------------------------------------------------------------------ Diese Regeln standen unter `max-width:700px`. `mobilemenu.js` baut das Menue aber seit dem iPad-Umbau nach `(pointer:coarse) and (hover:none)` auf — auf dem iPad wurde also die Leiste gebaut, aber nicht gestaltet, und das Feld dahinter blieb im zweispaltigen Rechnerbild stehen. Gemessen bei 1366 x 1024 mit allen vier Gruppen aufgeklappt: Menuehoehe 1030 · Fensterhoehe 1024 · overflow-y: visible Sechs Punkte standen also unter dem unteren Rand, und scrollen ging nicht. Genau das war gemeint mit „ich kann die Unterseiten nicht sehen und auswaehlen“. Der Block ist unveraendert; nur seine Bedingung ist jetzt dieselbe wie die des Skripts. ==================================================================== */ @media (max-width:700px), (pointer:coarse) and (hover:none){ /* ---- 6 · Das Menue ---------------------------------------------------- Rueckmeldung vom Geraet, in dieser Reihenfolge abgearbeitet: · "man kann die Startseite nicht komplett sehen" — die erste Zeile lag unter der Leiste. Der obere Abstand rechnet jetzt mit der Leistenhoehe UND dem sicheren Rand, nicht mit einem geschaetzten Wert. · "die Kontaktdaten unten sieht man nicht mehr" — Sprache, Adresse und soziale Kanaele stehen jetzt in einer Leiste, die immer steht. · "die Unterseiten muessen besser gezeigt werden" — die Gruppen klappen nicht mehr als nackte Liste auf, sondern als gestaffelte Zeilen mit Nummer und Pfeil, jede mit eigenem Eingang. */ .menu__inner{ padding-top:calc(var(--sa-o) + var(--nav-h) + 18px); padding-bottom:calc(var(--sa-u) + 104px); padding-inline:max(var(--gutter),calc(var(--sa-l) + 18px)); align-content:start} .menu__ghost{display:none} .menu__links{gap:2px} .menu__links a{min-height:50px;align-items:center;gap:14px;padding-block:2px} .menu__word{font-size:clamp(1.42rem,6.9vw,2rem);line-height:1.06} /* Die feste Leiste: Sprache und Adresse links, Kanaele rechts. Sie liegt ueber dem Scrollbereich und traegt den sicheren Rand unten mit. */ /* `position:fixed` statt `absolute`: die Leiste haengt damit am Sichtfenster und nicht an einem 100svh hohen Kasten. Auf dem Telefon aendert sich die sichtbare Hoehe staendig (Adressleiste faehrt ein und aus) — an einem svh-Kasten wandert die Leiste dabei mit, am Sichtfenster nicht. */ .menu__rail{position:fixed;left:0;right:0;bottom:0;z-index:3; display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:nowrap; padding:12px max(var(--gutter),calc(var(--sa-l) + 18px)) calc(12px + var(--sa-u)); border-top:1px solid rgba(244,238,228,.12); background:var(--ink-2)} .menu__rail-l{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap} .menu__rail-r{display:flex;align-items:center;gap:14px;flex:none} .menu__rail-k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted-2)} /* In der Leiste bleibt die Adresse flach, damit die Leiste flach bleibt — die Trefflaeche liegt als unsichtbares Feld darueber und nutzt die ganze Hoehe der Leiste. */ .menu__rail .menu__mail{font-size:.92rem;min-height:0;width:100%;position:relative} .menu__rail .menu__mail::after{content:'';position:absolute;left:0;right:0; top:50%;height:44px;transform:translateY(-50%);background:none} .menu__rail .menu__social{gap:.9rem;font-size:.8rem} .menu__rail .lang button{padding-inline:.85rem;padding-block:.55rem} } /* Auf breiten Tafeln (iPad quer, 1366) greift der 1200er Block aus main.css nicht — dort bliebe das Menue zweispaltig, unten verankert und ohne Scrollweg. Diese Zeilen holen das nach. */ @media (pointer:coarse) and (hover:none) and (min-width:1201px){ .menu__inner{grid-template-columns:1fr;align-items:start;align-content:start; overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .subs{width:100%} .menu__meta{width:100%;margin-top:0} } @media (max-width:700px), (pointer:coarse) and (hover:none){ .menu__has{display:none} .menu__side{flex-direction:column;align-items:stretch;gap:0; margin-top:clamp(16px,2.6vh,24px)} /* Aufklappen direkt unter dem Hauptpunkt ------------------------------ Der Hauptpunkt traegt jetzt den Pfeil und den Zustand; die Untergruppe steht als Rahmen unmittelbar darunter. 0fr → 1fr laesst sich bewegen, `height:auto` nicht. */ /* Wort und Pfeil sind zwei Ziele: das Wort fuehrt auf die Seite, der Pfeil oeffnet die Liste darunter. Der Pfeil ist ein eigener Knopf mit voller Fingerhoehe — und er sitzt am rechten Rand, wo der Daumen ohnehin ist. */ /* ---- Warum das Menue seitlich scrollte -------------------------------- `.menu__inner` ist ein Raster. Ein Rasterfeld hat von sich aus `min-width:auto` — es darf also nicht schmaler werden als sein laengster unteilbarer Inhalt. Die Spur richtete sich damit nach dem laengsten Eintrag der Unterlisten statt nach dem Schirm. Gemessen bei 390 Punkten (verfuegbar sind 350): Deutsch 351,6 — 1,6 Punkte zu breit, kaum zu sehen Tuerkisch 395,7 — 46 Punkte zu breit, "Genel bakış" schob die ganze Spalte nach rechts hinaus, samt Pfeilen, Beschriftungen und Fusszeile `min-width:0` gibt die Spur frei; `overflow-wrap:anywhere` faengt den Fall ab, dass ein einzelnes Wort trotzdem laenger ist als die Zeile. */ .menu__inner > *,.menu__links,.menu__row, .subs__wrap,.subs__wrap > *,.subs__list,.subs__list > *{min-width:0} .subs__top,.subs__list a,.menu__meta{overflow-wrap:anywhere} .menu__row{display:flex;align-items:center;gap:10px;width:100%} .menu__row > a{flex:1 1 auto;min-width:0;flex-wrap:wrap;align-items:center} /* ---- Wenn Wort plus Abzeichen nicht in eine Zeile passen -------------- Gemessen bei 390 Punkten: bis zum Pfeil stehen ab dem Wortanfang 281 Punkte zur Verfuegung. "ZİYARETÇİLER" braucht allein 250, mit dem Abzeichen "YAKINDA" sind es 316 — das Abzeichen lag auf dem Pfeil. Im Deutschen war es knapper, aber ebenfalls zu breit ("AUSSTELLER" plus "BALD" endete bei 324, der Pfeil beginnt bei 332). Das Abzeichen ist eine Bemerkung zum Punkt, keine Fortsetzung des Wortes. Reicht die Zeile nicht, rutscht es deshalb darunter — buendig unter dem Wort, nicht unter der Nummer. Kleiner setzen waere die schlechtere Antwort: dann waere es an genau der Stelle unleserlich, an der es etwas zu sagen hat. */ .menu__word{flex:0 1 auto;min-width:0} /* Haengender Einzug, damit das umgebrochene Abzeichen unter dem WORT steht und nicht unter der Nummer — sonst sitzt es in der Zahlenspalte und sieht aus, als gehoere es zur naechsten Zeile. Der Einzug ist der Abstand, den die Nummer ohnehin einnimmt: gemessen bei 320, 360, 390, 430 und 700 Punkten immer dieselben 30,13 Punkte (Nummer 16,13 + Spalte 14). Die Nummer wird mit demselben Wert wieder nach links gezogen. Am Bild aendert das nichts: das Wort steht danach auf 50,13 statt auf 50,13. */ .menu__row > a{--einzug:30px;padding-left:var(--einzug);row-gap:4px} .menu__row > a > .menu__idx{margin-left:calc(var(--einzug) * -1)} .menu__row > a > .soon{margin-left:0} .menu__toggle{flex:none;width:44px;height:44px;margin-right:-6px; display:grid;place-items:center; background:none;border:0;padding:0;cursor:pointer;color:var(--ember)} .menu__toggle::before{content:'';width:10px;height:10px; border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.8; transition:transform .34s var(--e-out-cubic),opacity .34s} .menu__toggle[aria-expanded="true"]::before{ transform:rotate(225deg) translateY(-2px);opacity:1} .menu__row.is-auf .menu__word{color:var(--ember)} .subs__wrap{display:grid;grid-template-rows:0fr; transition:grid-template-rows .44s var(--e-out-expo)} .menu__row.is-auf + .subs__wrap{grid-template-rows:1fr} .subs__wrap > *{overflow:hidden;min-height:0} .subs--inline{width:100%;gap:0;border:0; margin:2px 0 10px;padding:2px 0 6px 14px; border-left:1px solid rgba(226,85,30,.34)} .subs--inline .subs__note{padding:.4rem 0 .2rem;font-size:.78rem} /* Die Zeilen: nummeriert, mit Pfeil, gestaffelt hereinlaufend. Der Eingang haengt am aria-expanded des Hauptpunkts — kein zweiter Beobachter, keine zweite Wahrheit ueber den Zustand. */ .subs--inline .subs__list{gap:0;counter-reset:sub} .subs--inline .subs__list a{position:relative;font-size:1rem; padding:.6rem 22px .6rem 28px;color:var(--bone); border-bottom:1px solid rgba(244,238,228,.06);min-height:44px} .subs--inline .subs__list a:last-child{border-bottom:0} .subs--inline .subs__list a::before{counter-increment:sub; content:counter(sub,decimal-leading-zero); position:absolute;left:0;top:50%;transform:translateY(-50%); width:auto;height:auto;background:none; font-family:var(--f-mono);font-size:.66rem;color:rgba(244,238,228,.3)} .subs--inline .subs__list a::after{content:'';position:absolute;right:4px;top:50%; width:6px;height:6px;margin-top:-3px; border-right:1.3px solid var(--ember);border-top:1.3px solid var(--ember); transform:rotate(45deg);opacity:.5} /* Die Uebersichtszeile ist der Weg auf die Seite selbst — sie zaehlt nicht mit und traegt die Themenfarbe. */ .subs__top{color:var(--ember)!important;font-family:var(--f-mono); font-size:.74rem!important;letter-spacing:.12em;text-transform:uppercase; padding-left:0!important} .subs__top::before{content:none!important;counter-increment:none!important} @media (prefers-reduced-motion:no-preference){ .menu__row:not(.is-auf) + .subs__wrap .subs__list > *{ opacity:0;transform:translate3d(-12px,0,0)} .menu__row.is-auf + .subs__wrap .subs__list > *{ opacity:1;transform:none; transition:opacity .38s var(--e-out-cubic),transform .5s var(--e-out-expo)} .menu__row.is-auf + .subs__wrap .subs__list > *:nth-child(2){transition-delay:.045s} .menu__row.is-auf + .subs__wrap .subs__list > *:nth-child(3){transition-delay:.09s} .menu__row.is-auf + .subs__wrap .subs__list > *:nth-child(4){transition-delay:.135s} .menu__row.is-auf + .subs__wrap .subs__list > *:nth-child(5){transition-delay:.18s} .menu__row.is-auf + .subs__wrap .subs__list > *:nth-child(6){transition-delay:.225s} .menu__row.is-auf + .subs__wrap .subs__list > *:nth-child(n+7){transition-delay:.27s} } .subs--home{order:9;border-top:1px solid rgba(244,238,228,.1); padding-top:clamp(16px,2.6vh,22px);gap:clamp(12px,2vh,18px)} .menu__meta{width:100%;margin-top:.4rem} } /* ════════════════════════════════════════════════════════════════════════ FINGERGROESSEN AUF JEDEM GERAET OHNE ZEIGER ------------------------------------------------------------------------ Gemessen im Menue bei 1180 x 820 (iPad quer): von fuenfzehn sichtbaren Verweisen waren fuenf nur einundzwanzig Punkte hoch — Mailadresse, Telefon und die drei Kanaele. Bei 820 x 1180 lagen siebenunddreissig von achtunddreissig knapp unter der Fingergroesse. Die Regeln dafuer standen bisher ebenfalls unter `max-width:700px`. Auch hier ist die Breite das falsche Mass: ein Finger ist auf einem iPad so breit wie auf einem Telefon. Die Flaechen wachsen, die Zeichen nicht — was groesser wird, ist unsichtbar. ==================================================================== */ @media (pointer:coarse){ /* ---- Die Leiste oben -------------------------------------------------- Ton- und Menueknopf sind 28 Punkte gross und sollen es bleiben: die Leiste ist flach, und die Sprachpille daneben hat dieselbe Hoehe — das war ausdruecklich so gewuenscht. Vergroessert wird deshalb nur die unsichtbare Flaeche darunter. Diese Regel gab es schon, sie stand aber unter `max-width:700px` und griff auf dem iPad nicht. Gemessen bei 1024 x 1366: Ton 28 x 28, Menue 28 x 28, Sprachknoepfe 34 x 28. */ .band__aud,.band__burger{position:relative} .band__aud::after,.band__burger::after{content:'';position:absolute; left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%); border-radius:50%} /* Die drei Sprachknoepfe stehen nebeneinander. Ein 44er Kreis je Knopf wuerde die Nachbarn ueberlappen — dann trifft man den falschen. Hier waechst deshalb nur die Hoehe: 28 + 2 x 8 = 44, die Breite bleibt. */ .lang button{position:relative} /* Gemessen: die drei Knoepfe stehen ohne Luecke nebeneinander, Mitte zu Mitte 34 Punkte. Ein Ueberstand von 1 Punkt zur Seite haette die Nachbarflaeche um 2 Punkte ueberlappt — dort haette der Nachbar gewonnen. Die Flaeche waechst deshalb nur nach oben und unten. */ /* NACHTRAG: `inset:-8px 0` rechnet von der Hoehe des Knopfes aus. In der Kopfzeile des Partnerbereichs ist der Knopf 26 statt 28 Punkte hoch — dort kamen dadurch nur 42 heraus. Die Hoehe steht deshalb jetzt fest, statt sich aus dem Knopf zu ergeben. */ .lang button::after{content:'';position:absolute;left:0;right:0; top:50%;height:44px;transform:translateY(-50%)} /* ---- Kleine Schalter im Inhalt --------------------------------------- Pfeile der Bewegtgrafik 20 x 20, der Spielhinweis 80 x 20 und 40 x 40, die Kanalzeichen im Fuss 40 x 40. Alle bekommen dieselbe Behandlung: die Flaeche waechst, das Zeichen nicht. */ .festival-motion__arrow,.gpromo__more,.gpromo__x,.footer__soc{position:relative} .festival-motion__arrow::after,.gpromo__x::after,.footer__soc::after{ content:'';position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%} .gpromo__more::after{content:'';position:absolute;inset:-12px -6px} /* ---- Brotkrumen und Inhaltsverzeichnis -------------------------------- Gemessen auf dem Tablett (768, 1024 und 1180 Punkte breit, Zeiger grob): die Brotkrumen waren 16 Punkte hoch, das Verzeichnis 43 — und beide ohne vergroesserte Flaeche. Die Regel dafuer gab es, sie stand aber unter `max-width:700px` und griff auf dem Tablett nicht. Dasselbe Versehen wie oben bei den Knoepfen der Leiste, nur eine Etage tiefer. Zwei verschiedene Mittel, und das ist Absicht: · Die Krumen stehen NEBENeinander. Ihre Flaeche darf nur nach oben und unten wachsen — seitlich wuerde sie dem Nachbarn sein Ziel wegnehmen. Ueber und unter der Zeile liegt nichts Anklickbares (gemessen: der Kopffilm und eine Zierlinie), die Flaeche stiehlt also nichts. · Das Verzeichnis steht UNTEREINANDER, bei 1024 Punkten mit 31 Punkten Abstand von Mitte zu Mitte. Eine unsichtbare Flaeche von 44 Punkten wuerde die Nachbarn ueberlappen — der untere Rand des zweiten Eintrags gehoerte dann schon dem dritten. Hier waechst deshalb die Zeile selbst, nicht eine Flaeche darueber. */ .crumbs a{position:relative} .crumbs a::after{content:'';position:absolute; left:0;right:0;top:50%;height:44px;transform:translateY(-50%); background:none;border:0;box-shadow:none} .prose__toc a{min-height:44px;display:flex;align-items:center} /* ---- Die Fusszeile ---------------------------------------------------- Dasselbe Versehen noch einmal, und hier am dichtesten: gemessen bei 1024 x 1366 mit grobem Zeiger standen in der Fusszeile 16 Verweise mit 15 Punkten Hoehe und 31 Punkten von Mitte zu Mitte, die drei Rechtslinks mit 16, die Zeile "Veranstalter" mit 14. Die Spaltenverweise stehen UNTEREINANDER — deshalb waechst die Zeile selbst (44 Punkte hoch), nicht eine Flaeche darueber; eine Flaeche haette bei 31 Punkten Abstand den Nachbarn ueberlappt. Die Rechtslinks und "Nach oben" stehen NEBENeinander, mit 21 Punkten Luft dazwischen und nichts darueber oder darunter. Sie bekommen die unsichtbare Flaeche, damit die Unterlinie am Wort bleibt. */ .footer__col ul a,.footer__col ul li > a{min-height:44px; display:flex;align-items:center} .footer__legal a,.footer__up,.footer__org,.footer__cookiebtn{position:relative} .footer__legal a::before,.footer__up::before, .footer__org::before,.footer__cookiebtn::before{content:'';position:absolute; left:0;right:0;top:50%;height:44px;transform:translateY(-50%); background:none;border:0;box-shadow:none} /* ---- Zustimmungsband und Wortmarke ------------------------------------ Drei Zeilen, die knapp danebenlagen: die beiden Knoepfe im Band mit 42 Punkten, die Verweise darunter mit 16, die Wortmarke in der Fusszeile mit 40. Zwei Punkte fehlen genauso wie zwanzig. Hier waechst ueberall die Zeile selbst. Eine unsichtbare Flaeche waere bei den Verweisen riskant: sie stehen 15 Punkte unter den Knoepfen, ein 44er Feld haette bis an deren Unterkante gereicht. */ .cc__btn{min-height:44px} .cc__link{min-height:44px;display:inline-flex;align-items:center} .footer__col .lockup{min-height:44px;display:flex;align-items:center} /* ---- Und dieselben Schalter im Inhalt --------------------------------- Alle diese Regeln gab es schon — jede einzelne stand unter `max-width:700px`. Auf dem Telefon griffen sie, auf dem Tablett nicht, obwohl dort derselbe Finger tippt. Gemessen bei 1024 Punkten Breite: Lexikonbuchstaben 26 x 26, Spielknopf 107 x 29, Aufklappzeilen 891 x 29, Schaltflaechen 38 hoch, Rollen 120 x 35. Statt jede Regel zu verdoppeln, steht die Hoehe hier einmal fuer alle. Sichtbar aendert sich dabei nichts ausser dem Zeilenabstand. */ .btn{min-height:44px} .gpromo__go{min-height:44px} .krole{min-height:44px} .kcard__mail,.kof__link,.kcopy{min-height:44px;display:inline-flex;align-items:center} .lex__azb{height:44px} .lex__cat,.lex__cats button,.seg button{min-height:44px} .tt__tab{min-height:44px} /* Die Auswahlknoepfe im Formular (Maerkte, Bedingungen, Standgroesse, Anforderungen). Gemessen 41 Punkte — drei fehlten. */ .chip{min-height:44px} .abfound__links a{min-height:44px;display:inline-flex;align-items:center} .faq__item summary,details > summary{min-height:44px; display:flex;align-items:center} /* ---- Der Rest, einzeln nachgemessen ----------------------------------- Was nach den Sammelregeln uebrig blieb. Jede Zeile steht fuer eine gemessene Groesse bei 1024 Punkten, grober Zeiger: Suchfeld im Lexikon 851 x 24 Downloadzeilen im Medienbereich 255 x 27 Verweise auf der 404-Seite 91 x 22 Anschrift und Datenschutz auf Kontakt 228 x 21 / 163 x 20 Kopfzeile des Partnerbereichs 139 x 34, Speichern 249 x 10, Schliessen 38 x 38 Spielhinweis "Über das Spiel" 80 x 19, Fenster 34 x 34 / 98 x 15 */ .lex__search input{min-height:44px} .asset__dl{min-height:44px;display:inline-flex;align-items:center} .e404__links a{min-height:44px;display:inline-flex;align-items:center} .kpanel__addr a,.kdp a{min-height:44px;display:inline-flex;align-items:center} .app__bar .lockup,.app__save,.app__close{min-height:44px} .app__close{min-width:44px} .gmodal__x{min-width:44px;min-height:44px} .gmodal__later{min-height:44px;display:inline-flex;align-items:center} .gpromo__more{position:relative;display:inline-flex;align-items:center;min-height:44px} /* Gemessen auf iPad und Telefon: in der festen Leiste war die Mailadresse 18 Punkte hoch — das einzige Ziel unter der Fingergroesse, das uebrig war. Die Leiste ist 69 Punkte hoch, es ist also Platz dafuer. */ .menu__rail .menu__mail{min-height:44px;display:flex;align-items:center} .menu__links a{min-height:52px;align-items:center} .subs__list a{min-height:46px;padding-block:.72rem} .menu__mail,.menu__tel,.menu__portal, .menu__social a{min-height:44px;display:flex;align-items:center} .menu__social{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem} .menu__a11y{min-height:46px} .band__link{padding-block:.8rem} /* Ohne Zeiger gibt es kein Ueberfahren — der Strich vor der Unterseite stand deshalb nie. Er steht jetzt immer, nur leiser. */ .subs__list a::before{width:10px;opacity:.5} .subs__list a:hover{transform:none} .subs__list a:active{color:var(--ivory)} } /* ══ TEIL K · TELEFON, DRITTE RUNDE (08.09.2026) ══════════════════════════ K1 · Die Reise der Bohne warf die Seite auf dem iPhone weiterhin weg. Die Bilder waren seit Teil D klein — aber jede Kulisse trug noch die alte `translate3d(0,0,0)`-Beschleunigung (60 Stellen) und war 1000 % hoch: 633 x 8120 Pixel je Ebene, als eigene Grafikschicht. Gemessen bei 375 Pixel Breite: 120 Schichten, rund 1,3 GB Grafikspeicher bei DPR 2 — auf dem iPhone (DPR 3) mehr als das Doppelte. Bewegt wird in dieser Szene ausschliesslich `top` (und bei der fliegenden Bohne der Weg als Inline-Stil, der diese Regel ohnehin ueberstimmt). Ohne die Beschleunigung malt der Browser die Kulissen in die eine, feste Buehne von Bildschirmgroesse — die Bewegung bleibt exakt dieselbe. `isolation:isolate` haelt die Stapelordnung, die der Transform bisher mit erzeugte. K2 · 05 / The Festival: der Kacheltitel stand in Tinte auf dem Foto und war nicht zu lesen. Jetzt Elfenbein mit Schatten, Nummer in Ember oben links, Symbol oben rechts, Verlauf kraeftiger, Ember-Linie am Fuss. K3 · 07 / Stay close: Kanne und Zaehler standen allein in einer leeren Bildhoehe. Jetzt stehen sie klein in einer Zeile neben dem Formular- stand, die drei Punkte werden kompakte Zeilen mit Ember-Nummer. K4 · Partnerbereich: Tasse verkleinert und neben den Knopf gesetzt, Zeilen enger, Knopf voll breit, Ember-Verlauf oben statt Leerraum. K5 · Fuss: unter der letzten Zeile blieben rund 150 Pixel Schwarz — das Polster fuer die alten Schwebeknoepfe. Der Knopf Barrierefreiheit sitzt jetzt oben in der Leiste; es bleibt nur der Geraeterand plus 18 Pixel. */ @media (max-width:700px){ /* K1 */ /* (K1 hat zu weit gegriffen: es traf auch echte Zentrierungen per translate(-50%,-50%). Die 60 Beschleunigungs-Hacks stehen seit 08.09. nicht mehr in festival-motion.css — hier ist nichts mehr zu tun.) */ /* K2 */ .xp__cell{aspect-ratio:4/3;padding:clamp(16px,4.4vw,22px)} .xp__cell h3{color:var(--ivory);font-size:clamp(1.5rem,7vw,1.9rem);letter-spacing:-.02em;line-height:1.05; text-shadow:0 2px 18px rgba(11,8,6,.9)} .xp__cell p{color:rgba(244,238,228,.86);text-shadow:0 1px 12px rgba(11,8,6,.9)} .xp__cell .label{position:absolute;top:clamp(14px,4vw,20px);left:clamp(16px,4.4vw,22px);z-index:2;margin:0; color:var(--ember);font-size:.66rem;letter-spacing:.16em} .xp__i{position:absolute;top:clamp(12px,3.6vw,18px);right:clamp(14px,4vw,20px);z-index:2;width:34px;height:34px;margin:0; display:grid;place-items:center;border-radius:11px;background:rgba(11,8,6,.55);border:1px solid rgba(226,85,30,.35); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .xp__i svg{width:18px;height:18px} .xp__bg::after{background:linear-gradient(0deg,rgba(11,8,6,.96) 0%,rgba(11,8,6,.82) 34%,rgba(11,8,6,.42) 62%,rgba(11,8,6,.18) 100%)} .xp__cell::before{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2; background:linear-gradient(90deg,var(--ember),rgba(226,85,30,0) 70%)} /* K3 */ .news__inner{display:grid;grid-template-columns:1fr;gap:clamp(18px,4vh,28px)} .news__points{margin-top:clamp(18px,3vh,26px);display:grid;gap:6px} .news__points li{grid-template-columns:2.2rem 1fr;align-items:center;padding:.7rem .9rem;border:1px solid rgba(244,238,228,.1)!important; border-radius:12px;background:rgba(244,238,228,.03);font-size:.92rem;line-height:1.35} .news__points li:last-child{border-bottom:1px solid rgba(244,238,228,.1)!important} .news__n{color:var(--ember);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em} .brue{grid-column:auto;align-self:start;display:flex;align-items:center;gap:1rem;min-height:0;height:auto; padding:.6rem .9rem;border:1px solid rgba(244,238,228,.1);border-radius:14px;background:rgba(244,238,228,.03)} .brue > svg{width:56px;height:auto;flex:none} .brue__feld{position:absolute;inset:auto auto auto 0;width:96px;height:100%;overflow:hidden;opacity:.5} .brue__zahl{margin:0;font-size:.62rem;flex:1} .brue__zahl::after{content:'';display:block;margin-top:.45rem;height:2px;border-radius:2px;background:rgba(244,238,228,.12)} .news .form{margin-top:0} /* K4 */ .portal{padding:clamp(18px,5vw,26px);border-radius:18px;overflow:hidden; background:linear-gradient(180deg,rgba(226,85,30,.12),rgba(244,238,228,.03) 46%,rgba(244,238,228,.02))} .portal__list{gap:8px;margin-top:clamp(14px,3vh,20px)} .portal__item{padding:.75rem .85rem;min-height:0;font-size:.9rem;border-radius:12px;background:rgba(11,8,6,.35)} .portal__ico{width:34px;height:34px;border-radius:10px} .portal__go{flex-direction:row;align-items:center;gap:1rem;margin-top:clamp(14px,3vh,20px)} .portal__cupwrap{width:64px;flex:none} .portal__go .btn,.portal__go > *:not(.portal__cupwrap){flex:1} /* K5 */ .footer{padding-bottom:var(--sa-u)} .footer__bottom{padding-bottom:calc(var(--sa-u) + 18px)} } /* ══ TEIL L · BARRIEREFREIHEITS-PANEL ALS BOGEN (08.09.2026) ══════════════ Auf dem Telefon sass der Schliessen-Knopf im Textfluss (Teil oben: position relative fuer die Tipp-Flaeche) und lag ueber der Kicker-Zeile. Jetzt: ein Bogen von unten mit Griff, Knopf oben rechts ausserhalb des Textes, Kopf mit Luft, Profile in einer Spalte, sicherer Rand unten. */ @media (max-width:560px){ .axpanel .axpanel__card{left:0;right:0;bottom:0;top:auto;width:auto; border-radius:22px 22px 0 0;border-bottom:0; padding:1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom,0px)); max-height:calc(90svh / var(--a11y-zoom,1))} .axpanel .axpanel__card::before{content:'';display:block;width:40px;height:4px;border-radius:2px; background:rgba(244,238,228,.22);margin:0 auto 1rem} .axpanel .axpanel__x{position:absolute!important;top:14px;right:14px;left:auto;width:36px;height:36px;z-index:2; background:rgba(244,238,228,.08)} .axpanel .axpanel__card > .label{margin-right:56px;padding-top:.15rem} .axpanel .axpanel__h{margin-right:56px;font-size:1.45rem} .axpanel .axpanel__b{font-size:.92rem} .axpanel .axpro{grid-template-columns:1fr;gap:6px} .axpanel .axpro__b{padding:.7rem .85rem} .axpanel .axgrp{margin-top:1.1rem;padding-top:.9rem} } /* ══ TEIL M · GRAFIKSPEICHER AUF DEM TELEFON, ZWEITE RUNDE (08.09.2026) ══ Gemessen headless als iPhone (390 px, DPR 3) ueber alle deutschen Seiten: Startseite rund 530 MB geschaetzter Schichtenspeicher, Unterseiten 190 bis 270 MB. Die Verursacher sind nicht die Bewegungen, sondern Flaechen, die auch dann als Schicht im Speicher liegen, wenn sie weit weg oder unsichtbar sind. Vier Massnahmen, keine aendert eine Animation: M1 · Abschnitte ohne Klebeelemente werden erst gerendert, wenn sie in die Naehe kommen (content-visibility). Ein Abschnitt zwei Bildschirme entfernt kostet dann nichts — weder Schichten noch Layout. M2 · Das Menue-Overlay ist geschlossen nicht nur zugeklappt (clip-path), sondern unsichtbar — sonst haelt es bildschirmgross eine Schicht. M3 · Reine Zierflaechen (Auroren, Orbit im Kopf, Leuchten im Fuss) gibt es auf dem Telefon nicht; sie waren dort ohnehin angehalten. M4 · Die Stadtbilder auf der Startseite tragen eine Vergroesserung fuer das Ueberfahren mit der Maus — auf dem Telefon gibt es keine Maus. */ @media (max-width:820px){ /* M1 — bewusst NICHT: .stick (klebt), .hero, .atmos, .europe, .cities, .immersive, .festival-experience, .yearseq, .beanworld, .stage (Formular mit eigener Logik) */ main > .psec,main > .prose,main > .mq,main > .hist,main > .rail,main > .soonpanel, main > .tt,main > .lex,main > .cine,main > .mv,main > .sig,main > .news,main > .cta,main > .xp,main > .b2b{ content-visibility:auto;contain-intrinsic-size:auto 640px} /* M2 */ .menu:not(.is-open){visibility:hidden;transition:clip-path 1s var(--e-out-quint),visibility 0s 1s} .menu.is-open{visibility:visible;transition-delay:0s} /* M3 */ .cta__aurora,.footer__aurora,.b2b__glow,.kx-aurora,.kx-orbit{display:none!important} /* M4 */ .city__plate img{transform:none;transition:none} /* M5 — was motion.js ausserhalb des Bilds anhaelt (cfe-anim-halt, Schwelle 0 = ganz draussen), ist dort auch unsichtbar: eine angehaltene Aurora zwei Bildschirme weiter oben belegt sonst weiter ihre Schicht. Zurueck im Bild faellt die Klasse. */ .cfe-anim-halt{visibility:hidden!important} /* M6 — Abschnitte mehr als einen Bildschirm entfernt (kino.js setzt .kn-far): unsichtbar, nicht weg. Layout und Scrollhoehe bleiben exakt. */ main > section.kn-far,footer.kn-far{visibility:hidden} } /* ============================================================================ Teil N (09.09.2026) · Fuss auf dem Telefon: Markenblock und Veranstalter · Der Markenblock (Rundlogo, Wortmarke, Route) klebte an der Trennlinie darueber. Er bekommt Luft nach oben und unten und die Route etwas Abstand zur Wortmarke. · Der Veranstalterblock stapelte Beschriftung, Logo und Satz in drei Zeilen, der Satz brach mitten in der Adresse um. Jetzt: Beschriftung klein darueber, darunter Logo und Satz in EINER Zeile, senkrecht mittig, der Satz bricht sauber hinter dem Punkt. ========================================================================= */ @media (max-width:700px){ .footer__col--brand{padding-top:clamp(22px,4.6vh,32px);padding-bottom:clamp(18px,3.6vh,26px);gap:.85rem} .footer__col--brand .lockup{gap:.9rem} .footer__col--brand .lockup__mark{width:64px;height:64px} .footer__route{margin-top:.15rem;letter-spacing:.14em;color:var(--muted)} .footer__org{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label label" "logo gag"; align-items:center;column-gap:clamp(12px,3.4vw,18px);row-gap:.55rem;padding-block:.35rem .1rem;justify-items:start} .footer__org > .label{grid-area:label;color:var(--muted-2);letter-spacing:.18em} .footer__org img{grid-area:logo;width:clamp(104px,30vw,126px);opacity:.92;align-self:center} .footer__org .footer__gag{grid-area:gag;margin:0;max-width:none;font-size:.78rem;line-height:1.5;color:var(--muted); align-self:center;padding-left:clamp(12px,3.4vw,18px);border-left:1px solid var(--hairline);border-radius:0;min-height:2.4em;display:flex;align-items:center} } /* ════════════════════════════════════════════════════════════════════════ Teil O (10.09.2026) · Kontaktblock im Telefonmenue ------------------------------------------------------------------------ Seit Facebook und YouTube neben Instagram, LinkedIn und TikTok stehen, nahm der Social-Block im unteren Menuefeld die ganze Breite und drueckte die Mailadresse in eine Spalte von vier Buchstaben. Beide Bloecke stehen jetzt untereinander, die Kanaele brechen als Zeile um. ==================================================================== */ @media (max-width:820px){ /* die feste Leiste unten (mobilemenu.js baut sie): links Adresse, rechts Kanaele. Fuenf Kanaele passen nicht mehr neben die Adresse — die Leiste bricht in zwei Zeilen, die Kanaele stehen darunter als eigene Zeile. */ .menu__rail{flex-wrap:wrap;row-gap:8px} .menu__rail-l{flex:1 1 100%} .menu__rail-r{flex:1 1 100%;justify-content:flex-start} .menu__rail .menu__social{gap:.3rem .9rem;flex-wrap:wrap} /* damit die hoehere Leiste nicht den letzten Menuepunkt verdeckt */ .menu__links{padding-bottom:calc(120px + var(--sa-u,0px))} } /* ════════════════════════════════════════════════════════════════════════ Teil P (10.09.2026) · Telefon, zweiter Durchgang mit KINO IV/V ------------------------------------------------------------------------ P1 · Kennzahlen standen als eine Spalte untereinander — sechs Kacheln, sechs Bildschirme. Ab 360 px zwei Spalten mit kleinerer Zahl; die Kachel mit der laengsten Zeile (Amsterdam, 150) bricht sauber in zwei Zeilen. P2 · Regelkacheln: die Ziffer sitzt oben rechts hinter der Ueberschrift; sie wird kleiner und blasser, damit sie keine Zeile stoert. P3 · Formatkacheln (erlebnisse): Nummer ueber dem Titel braucht Luft. P4 · Kopf eines Abschnitts: weniger Abstand zwischen Marke, Titel und Satz. P5 · Chronik-Karten: Uhrzeiten (10:00) sind breiter als Jahreszahlen — die Karte bleibt bei 76vw, die Ziffer wird eine Stufe kleiner. ==================================================================== */ @media (max-width:820px){ /* P1 */ @media (min-width:360px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .kpi{padding:clamp(14px,4vw,18px)} .kpi__n{font-size:clamp(1.7rem,8.6vw,2.3rem)} .kpi__t{font-size:.86rem;line-height:1.3} .kpi__b{font-size:.76rem;line-height:1.4} } /* P2 */ .rules--tiles .rule__n{font-size:clamp(2.2rem,12vw,3.4rem);opacity:.55;top:clamp(10px,2.6vw,16px)} .rules--tiles .rule__t{padding-right:2.4em} /* P3 */ .cards--kino .card{padding-top:clamp(46px,12vw,56px)} /* P4 */ .psec__head{margin-bottom:clamp(16px,3.6vh,24px)} .psec__lede{margin-top:.55em} /* P5 */ .hist__y{font-size:clamp(1.8rem,9.5vw,2.6rem)} }