/* ========================================================================== Gladbecker Lesetage — Layout & Design Massverhaeltnisse aus dem Figma-Artboard (1440 px breit) uebernommen. --u ist ein "Design-Pixel": 1440 Design-px = 100 vw, nach oben und unten begrenzt, damit die Seite auf grossen wie kleinen Screens ruhig bleibt. ========================================================================== */ /* --- Schrift ------------------------------------------------------------ Neue Haas Grotesk Display kommt ueber Adobe Fonts; das Theme laedt das Stylesheet des Web-Projekts (siehe GL_TYPEKIT_CSS in functions.php), von dort stammt der Familienname "neue-haas-grotesk-display". Der @font-face-Block darunter ist der Weg ohne Adobe: Webfont-Dateien nach assets/fonts/ legen, dann greift er automatisch. Ist beides nicht da, faellt die Seite sauber auf Helvetica Neue / Arial zurueck (metrisch nah verwandt). ----------------------------------------------------------------------- */ @font-face { font-family: "Neue Haas Grotesk Display Pro"; src: url("../fonts/NeueHaasDisplayRoman.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { --red: #fff; /* Farbe des Keyvisuals, vom Theme gesetzt */ --nav-ink: #000; /* Schrift darauf, automatisch schwarz oder weiss */ --nav-ink-inv: #fff; /* Gegenstueck dazu, fuer gefuellte Flaechen darauf */ --black: #000; --white: #fff; --rule: #000; --font: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; /* 1 Design-Pixel */ --u: clamp(0.72px, 0.06944vw, 1.25px); --header-h: calc(50 * var(--u)); /* Hoehe, um die Kopfleiste die klebenden Titel nach unten schiebt. Faellt auf 0, sobald die Leiste ausgeblendet ist (Klasse am ). */ --header-off: var(--header-h); --gutter: calc(20 * var(--u)); --band-h: calc(79 * var(--u)); --col-visual: 49.3056%; /* 710 / 1440 */ --fs-nav: max(15px, calc(20 * var(--u))); --fs-body: max(16px, calc(20 * var(--u))); --fs-band: calc(48 * var(--u)); --fs-time: calc(48 * var(--u)); --fs-list: calc(40 * var(--u)); --fs-detail: max(13px, calc(13 * var(--u))); /* Titel einer Veranstaltung: eine Spur groesser als der uebrige Text der Beschreibungsspalte, aber weit entfernt von der Uhrzeit (48). */ --fs-tt-title: max(15px, calc(16 * var(--u))); /* Seitenverhaeltnis (Breite/Hoehe) des Keyvisuals. Wird vom Theme anhand der tatsaechlichen Bildmasse inline ueberschrieben. */ --kv-r: 0.6538; --kv-rm: 0.6538; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .site-header, .band, .keyvisual { transition: none; } } body { margin: 0; background: var(--white); color: var(--black); font-family: var(--font); font-size: var(--fs-body); line-height: 1.2; letter-spacing: -0.01em; padding-top: var(--header-h); } img { display: block; max-width: 100%; } figure, h1, h2, h3, p, ul, ol { margin: 0; } a { color: inherit; text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; } :focus-visible { outline: 2px solid var(--black); outline-offset: 3px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } .skip-link:focus { position: fixed; z-index: 999; top: 8px; left: 8px; width: auto; height: auto; clip: auto; clip-path: none; background: var(--white); padding: 8px 14px; } /* --- Kopfleiste ---------------------------------------------------------- */ /* Die Leiste liegt ueber dem Inhalt, haelt sich aber zurueck: Beim Scrollen nach unten faehrt sie hoch aus dem Bild, beim Scrollen nach oben wieder herein und schiebt dabei den Abschnittstitel nach unten (--header-off). Die Klasse setzt assets/js/site.js. */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); background: var(--red); color: var(--nav-ink); display: flex; align-items: center; transition: transform 0.25s ease; } :root.gl-nav-off { --header-off: 0px; } :root.gl-nav-off .site-header { transform: translateY(-100%); } /* Beim Tabben durch die Navigation bleibt die Leiste sichtbar. */ .site-header:focus-within { transform: none; } .site-header :focus-visible { outline-color: currentColor; } .site-header__brand { position: absolute; left: var(--gutter); font-size: var(--fs-nav); letter-spacing: -0.01em; } .site-nav { margin-left: var(--col-visual); width: calc(100% - var(--col-visual)); padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: calc(16 * var(--u)); font-size: var(--fs-nav); } .site-nav a { white-space: nowrap; } .site-nav a[aria-current="true"] { text-decoration: underline; text-underline-offset: 0.18em; } /* --- Grundraster --------------------------------------------------------- */ .layout { display: grid; grid-template-columns: var(--col-visual) 1fr; align-items: start; } /* --- Linke Spalte: Keyvisual --------------------------------------------- */ /* Die Spalte traegt auf dem Desktop nur noch das Keyvisual; die Motive haengen an den Abschnitten der rechten Spalte (siehe .pin weiter unten). Damit das Keyvisual ueber die ganze Seite kleben kann, wird die Spalte auf die volle Zeilenhoehe gedehnt. */ .col-visual { position: relative; align-self: stretch; } /* Ebene, die sich ueber die volle Hoehe der Bildstrecke spannt und dem klebenden Keyvisual als Bezugsrahmen dient. */ .keyvisual-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .keyvisual { position: sticky; display: block; top: calc(var(--header-off) + 12 * var(--u)); transition: top 0.25s ease; /* Breite = 686/710 der Spalte, zusaetzlich durch die Fensterhoehe gedeckelt, damit das Keyvisual nie aus dem Blickfeld geschoben wird. Gesteuert wird immer nur die Breite - die Hoehe folgt dem Bild, dadurch kann nichts verzerren. */ width: min(96.62%, calc((100svh - var(--header-h) - 24 * var(--u)) * var(--kv-r))); height: auto; margin-left: 0; } .keyvisual img { display: block; width: 100%; height: auto; } /* Kopfbild: nur auf Mobilgeraeten sichtbar, dort liegt das Keyvisual darauf. */ .hero { display: none; } /* --- Motive, die am Abschnitt kleben ------------------------------------- Der Marker steht im Textfluss der rechten Spalte, damit er genau dort einsetzt, wo der Abschnitt beginnt. Er ist selbst 0 px hoch und klebt deshalb - wie die Baender - ab seiner Flussposition dauerhaft unter der Kopfleiste. Das Motiv haengt absolut daran und ragt nach links in die Bildspalte hinein. Dadurch faehrt jedes Motiv mit seinem Abschnitt von unten ein, bleibt stehen, solange der Abschnitt laeuft, und wird vom naechsten Motiv abgedeckt (spaeter im DOM = darueber) - dasselbe Prinzip wie bei den Baendern, nur eine Spalte weiter links. Ohne Skript. */ .pin { position: sticky; top: 0; height: 0; z-index: 0; } .pin__frame { position: absolute; top: 0; /* Nur der Hinweis liegt im Fluss - und zwar am unteren Bildrand. */ display: flex; align-items: flex-end; justify-content: flex-end; /* Breite und Versatz werden aus der Textspalte zurueckgerechnet (49.3056 / 50.6944 = 0.9726). So sitzt die Kante zwischen den Spalten auch dann exakt, wenn eine Scrollleiste Platz wegnimmt - anders als bei einer Rechnung in vw. */ width: calc(0.9726 * (100% + 2 * var(--gutter))); left: calc(-1 * var(--gutter) - 0.9726 * (100% + 2 * var(--gutter))); /* Volle Fensterhoehe, unabhaengig von der Kopfleiste: Das Motiv soll beim Ein- und Ausblenden der Leiste nicht seine Groesse aendern. */ height: 100svh; background: var(--white); } .pin__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Ohne eigenen Bildmittelpunkt: In der Bildspalte bleibt der Ausschnitt mittig, das Motiv steht also hinter dem Keyvisual zentriert. */ } /* --- Hinweis im Bild ----------------------------------------------------- Kennzeichnung KI-generierter Motive (spaeter ebenso Platz fuer einen Fotonachweis). Er liegt auf einer Flaeche in der Farbe des gezogenen Keyvisuals - derselben, die auch die Kopfleiste traegt - und ist damit auf jedem Foto lesbar, egal wie hell oder unruhig es ist. Die Schriftfarbe kommt aus derselben Kontrastregel wie in der Navigation. Die Flaeche umschliesst nur den Text und bleibt eckig wie der Rest des Layouts. Er steht am unteren Rand des Motivs und klebt dort: Faehrt das Motiv gerade erst ein, reicht sein unterer Rand noch unter die Fensterkante - position: sticky holt den Hinweis dann an die Kante herauf. Dadurch steht er auf jeder Fenstergroesse im Sichtfeld, ohne je aus dem Bild zu laufen. */ .img-note { position: sticky; bottom: var(--gutter); z-index: 1; margin: var(--gutter); max-width: calc(100% - 2 * var(--gutter)); padding: calc(4 * var(--u)) calc(7 * var(--u)); background: var(--red); color: var(--nav-ink); font-size: var(--fs-detail); line-height: 1.2; letter-spacing: 0; } /* --- Einwilligung fuer die Adobe-Schrift --------------------------------- Gleiche Sprache wie der Hinweis im Bild: eine eckige Flaeche in der Farbe des Keyvisuals, Schrift im selben Kontrastschwarz oder -weiss, Detailgrad. Er sitzt unten rechts ueber der Textspalte - unten links klebt bereits der Bildhinweis, die beiden sollen sich nicht begegnen. Der Kasten traegt „hidden", solange nichts zu fragen ist; das Stylesheet muss dafuer nichts tun, das erledigt das Attribut. */ .consent { position: fixed; /* Beide Seitenkanten gesetzt, Breite ergibt sich: So kann der Kasten den Bildschirm nie ueberragen, auch nicht auf einer Seite, die seitlich ueberlaeuft. „margin-left: auto" schiebt ihn an die rechte Kante. */ left: var(--gutter); right: var(--gutter); bottom: var(--gutter); z-index: 60; width: auto; max-width: calc(420 * var(--u)); margin-left: auto; padding: calc(7 * var(--u)) calc(7 * var(--u)) calc(6 * var(--u)); background: var(--red); color: var(--nav-ink); font-size: var(--fs-detail); line-height: 1.3; letter-spacing: 0; } .consent__text { margin: 0; } .consent__link { text-decoration: underline; text-underline-offset: 0.18em; white-space: nowrap; } .consent__actions { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); margin: calc(7 * var(--u)) 0 0; } /* Knoepfe wie der Rest: eckig, aus derselben Farbe gebaut. „Schrift laden" ist die gefuellte Fassung - hell auf dunkel oder umgekehrt, je nachdem, welche Schriftfarbe die Kontrastregel fuer das Keyvisual gewaehlt hat. */ .consent__btn { flex: 1 1 auto; padding: calc(4 * var(--u)) calc(7 * var(--u)); border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; line-height: 1.2; letter-spacing: 0; cursor: pointer; } .consent__btn--yes { background: var(--nav-ink); color: var(--nav-ink-inv); } .consent__btn:hover, .consent__btn:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; } /* Der Fokusrahmen des Themes ist schwarz - auf der Akzentflaeche waere er auf dunklen Keyvisuals unsichtbar. Hier nimmt er die Schriftfarbe. */ .consent :focus-visible { outline-color: var(--nav-ink); } .consent__btn--yes:focus-visible { outline-color: var(--nav-ink-inv); outline-offset: -4px; } /* Link „Schrift-Einwilligung aendern" in der Legal-Spalte und auf den Rechtstexten. Ohne JavaScript bleibt er weg (Attribut „hidden"). */ .consent-reopen { margin: calc(10 * var(--u)) 0 0; font-size: var(--fs-detail); letter-spacing: 0; } .consent-reopen a { text-decoration: underline; text-underline-offset: 0.18em; } /* --- Rechte Spalte ------------------------------------------------------- */ .col-content { position: relative; padding: 0 var(--gutter); min-width: 0; } /* Fliesstext. Mindestens eine Bildschirmhoehe hoch, damit das Timetable-Band beim Seitenaufruf noch unter der Kante steht und erst beim Scrollen hereinkommt - auch wenn der Text kurz ist. */ .intro { min-height: calc(100svh - var(--header-h)); padding-top: calc(26 * var(--u)); padding-bottom: calc(40 * var(--u)); scroll-margin-top: var(--header-h); } .intro > *:first-child { margin-top: 0; } .intro > *:last-child { margin-bottom: 0; } .intro p { margin: 0 0 0.9em; } .intro a { text-decoration: underline; text-underline-offset: 0.18em; } /* Sprungmarken der Kopfnavigation. Wichtig: nicht das klebende Band selbst anspringen. Ein klebendes Band steht - sobald es einmal oben haengt - fuer den Browser bereits im Sichtfeld, ein Sprung dorthin bewirkt dann nichts. Deshalb liegt die Marke als eigenes, nicht klebendes Element an der Flussposition davor. */ .anchor { display: block; height: 0; scroll-margin-top: var(--header-h); } /* Klebende Abschnitts-Titel. Alle Baender liegen im selben Container und teilen sich denselben top-Wert: Sobald das naechste Band die Kopfleiste erreicht, deckt es das vorherige exakt ab (weisser Hintergrund, spaeter im DOM = darueber). */ .band { position: sticky; top: var(--header-off); transition: top 0.25s ease; z-index: 1; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); height: var(--band-h); display: flex; align-items: center; background: var(--white); font-size: var(--fs-band); font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; text-transform: uppercase; scroll-margin-top: var(--header-h); } .band + .section { padding-top: calc(1 * var(--u)); } .section { padding-bottom: calc(40 * var(--u)); } /* Schlussbild der Seite: Socials und Legal zusammen sind mindestens einen Bildschirm hoch. Dadurch endet die Seite genau dann, wenn das Socials-Band unter der Kopfleiste haengt - darunter stehen die Socials, das Legal-Band und die Legal-Liste vollstaendig im Bild. Kein Weiterscrollen ins Leere, und das letzte Motiv ist am Seitenende vollstaendig eingefahren. */ .tail { min-height: 100svh; } /* --- Timetable ----------------------------------------------------------- */ .tt-day { display: grid; grid-template-columns: 51.3% 48.7%; /* 354 / 336 von 690 */ border-top: 1px solid var(--rule); padding: calc(25 * var(--u)) 0; } .tt-date { font-size: var(--fs-time); line-height: calc(55 / 48); letter-spacing: -0.005em; } .tt-event + .tt-event { margin-top: calc(25 * var(--u)); } .tt-time { font-size: var(--fs-time); line-height: calc(55 / 48); letter-spacing: -0.005em; } .tt-desc { margin-top: calc(18 * var(--u)); font-size: var(--fs-detail); line-height: 1.15; letter-spacing: 0; } .tt-desc p { margin: 0; } .tt-desc p:empty::before { content: "\200b"; } .tt-desc__title { font-size: var(--fs-tt-title); line-height: 1.15; } /* Zwischen den Teilen einer Veranstaltung steht jeweils eine Leerzeile, damit Titel, Zusatz, Beschreibung und Ort als eigene Bloecke lesbar sind. Die erste Leerzeile macht .tt-desc__spacer, die uebrigen der Abstand unter dem jeweiligen Block. Das ist Absicht: Faellt ein Teil weg - kein Zusatz, keine Beschreibung -, faellt seine Leerzeile mit weg, und es klafft keine doppelte Luecke. Die Hoehe bezieht sich auf .tt-desc, bleibt also in jeder Groesse genau eine Zeile des Fliesstextes. */ .tt-desc__spacer { height: 1.15em; } .tt-desc .tt-desc__subtitle, .tt-desc .tt-desc__text { margin-bottom: 1.15em; } /* Mehrere Absaetze in einer Beschreibung stehen ebenso auseinander - eine Leerzeile im Eingabefeld wird damit auch auf der Seite zu einer. */ .tt-desc .tt-desc__text p + p { margin-top: 1.15em; } /* --- Listen (Speaker, Socials, Legal) ------------------------------------ */ .list { margin: 0; padding: 0; list-style: none; font-size: var(--fs-list); line-height: calc(46 / 40); letter-spacing: -0.02em; } .list--offset { margin-left: 51.3%; } /* startet buendig zur Zeit-Spalte */ /* Speaker-Abschnitt. Wie der Fliesstext eine volle Bildschirmhoehe hoch - gemessen unter dem klebenden Band, damit das Socials-Band beim Lesen genau an der Unterkante steht und erst beim Weiterscrollen hereinkommt. Die Namen stehen dabei unveraendert Zeile an Zeile; die fehlende Hoehe bleibt als Leerraum unter der Liste stehen. */ .section--speaker { min-height: calc(100svh - var(--header-h) - var(--band-h)); } /* --- Bilder im mobilen Lesefluss (auf Desktop ausgeblendet) --------------- */ .m-image { display: none; } /* --- Fussbereich --------------------------------------------------------- */ .site-footer { padding: calc(40 * var(--u)) var(--gutter) calc(24 * var(--u)); font-size: var(--fs-detail); } /* --- Leerhinweise (nur fuer angemeldete Redaktion sichtbar) -------------- */ .tt-empty { margin: 0; padding: calc(20 * var(--u)) 0; font-size: var(--fs-detail); color: #666; } /* --- Unterseiten (Impressum, Datenschutz, Kontakt) ----------------------- */ .page-body { max-width: calc(760 * var(--u)); margin: 0 auto; padding: calc(60 * var(--u)) var(--gutter) calc(80 * var(--u)); } .page-body__title { margin: 0 0 calc(28 * var(--u)); font-size: var(--fs-band); line-height: 1.15; font-weight: 400; text-transform: uppercase; letter-spacing: -0.005em; } .page-body__content p { margin: 0 0 0.9em; } .page-body__content a { text-decoration: underline; text-underline-offset: 0.18em; } .page-body__content h2 { font-size: var(--fs-list); font-weight: 400; margin: 1.4em 0 0.4em; } .page-body__back { margin-top: calc(48 * var(--u)); font-size: var(--fs-detail); } .page-body__back a { text-decoration: underline; text-underline-offset: 0.18em; } /* ========================================================================== Mobil / Tablet Einspaltig: Keyvisual als Kopfbild, Bilder liegen zwischen den Abschnitten, die klebenden Baender bleiben erhalten. ========================================================================== */ @media (max-width: 900px) { /* Der Kasten nimmt hier die ganze Breite - eine Textspalte, neben die er ausweichen koennte, gibt es nicht mehr. */ .consent { max-width: none; } :root { --u: 1px; --header-h: 46px; --gutter: 16px; --band-h: 54px; --fs-nav: 15px; --fs-body: 17px; --fs-band: 30px; --fs-time: 30px; --fs-list: 24px; --fs-detail: 13px; } .site-nav { margin-left: 0; width: 100%; gap: 14px; overflow-x: auto; scrollbar-width: none; justify-content: space-between; } .site-nav::-webkit-scrollbar { display: none; } .layout { display: block; } /* Kopfbild: erstes Foto fuellt den Screen, Keyvisual liegt darueber. Die klebenden Motive entfallen, dafuer liegen die Bilder wieder zwischen den Abschnitten (.m-image). */ .pin { display: none; } .hero, .m-image { position: relative; } .hero .img-note, .m-image .img-note { position: absolute; right: var(--gutter); bottom: var(--gutter); margin: 0; } .hero { display: block; height: calc(100svh - var(--header-h)); min-height: 420px; overflow: hidden; } .keyvisual { top: calc(var(--header-off) + 16px); width: min(calc(100% - 32px), calc((100svh - var(--header-h) - 96px) * var(--kv-rm))); height: auto; margin-left: 16px; } .col-content { padding: 0 var(--gutter); } .intro { min-height: 0; padding-top: 20px; padding-bottom: 28px; } /* Schlussbildschirm auch mobil: Der Block ist einen Bildschirm hoch, das Schlussbild fuellt darin den Platz, der neben Socials und Legal frei bleibt. Dadurch endet die Seite genau dann, wenn das Socials-Band oben an der Kante haengt - ohne das Bild bliebe dort das Band des vorherigen Abschnitts stehen. */ .tail { display: flex; flex-direction: column; min-height: 100svh; } .tt-day { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; } .list--offset { margin-left: 0; } /* Mobil bleibt die Speaker-Liste im Lesefluss - dort traegt das Motiv zwischen den Abschnitten die Bildschirmhoehe. */ .section--speaker { min-height: 0; } /* Die Motive zwischen den Abschnitten nehmen vier Fuenftel des Bildschirms - gross genug, um zu tragen, und flach genug, dass vom Querformat noch etwas Umgebung uebrig bleibt. Die lesende Person steht dabei in jedem Motiv vollstaendig im Bild (siehe Bildmittelpunkt in gl_strip_images()). */ .m-image { display: block; margin: 28px calc(-1 * var(--gutter)) 32px; height: 80svh; overflow: hidden; } .m-image img, .hero img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); } /* Schlussbild: Basis 0, es bringt also keine eigene Hoehe mit, sondern nimmt genau den Platz, der im Schlussbildschirm frei bleibt, und schliesst buendig mit dem Seitenende ab. */ .m-image--end { flex: 1 1 0; height: auto; min-height: 0; margin-bottom: 0; } } /* Sehr schmale Screens */ @media (max-width: 480px) { :root { --fs-band: 26px; --fs-time: 26px; --fs-list: 21px; } } @media print { .site-header, .keyvisual-layer, .hero, .pin, .m-image, .consent, .consent-reopen { display: none !important; } .band { position: static; } .layout { display: block; } .intro, .tail, .section--speaker { min-height: 0; } body { padding-top: 0; } }