/* blockq – Variante (Text): ergaenzt style.css. Wird NUR von variante-text.html geladen. LINKS: Liste + Textblock (Sidebar, scrollt NICHT). RECHTS: Medienraster. Logo "blockq" fix oben rechts, rechtsbuendig mit der Raster-Rechtskante (bleibt beim Scrollen stehen). Kein Titelbild, keine Ueberschrift, keine Daten. Hauptseite bleibt unberuehrt. */ :root { --sidebar-w: 420px; /* breitere Spalte links */ --content-pad-x: 60px; /* Medien etwas naeher an die Liste */ } /* Startseite: weiss (Invertierung wieder entfernt); zeigt eine Zufallsauswahl von Medien. */ /* ---- Weisser durchgaengiger Balken oben, Logo rechtsbuendig (mit Raster-Rechtskante) ---- */ .brand { position: fixed; top: 0; left: 0; right: 0; /* durchgaengiger Balken ueber die volle Breite */ height: 100px; /* bis zur Oberkante der Liste (100px) */ z-index: 40; /* ueber den Medien, unter der Lightbox (50) */ margin: 0; padding: 0 56px 0 var(--side-pad); /* "o" links bei Kuerzel-Kante, blockq rechts bei Raster-Kante */ background: var(--bg); /* deckt scrollende Medien darunter ab */ display: flex; align-items: center; /* "o" und blockq gleiche Hoehe -> Oberkanten buendig */ justify-content: space-between; } .brand-mark, .brand-name { font-size: 44px; font-weight: 100; /* Roboto Thin */ line-height: 1; cursor: pointer; /* "o" -> Start, "blockq" -> Ueber uns */ } /* Variante mit kraeftigerem Schriftzug: setzt "blockq" + "o" dicker */ html.brand-bold .brand-mark, html.brand-bold .brand-name { font-weight: 200; } /* zwischen Thin (100) und Light (300) */ /* Variante ohne Kopfzeile: blendet "o" + "blockq" oben aus; stattdessen steht NUR auf der Startseite "blockq" OBEN MITTIG neben der Liste (Oberkante auf Hoehe der obersten Listenzeile, horizontal mittig im Feld rechts der Liste) */ html.brand-center .brand { display: none; } /* Variante "Band" (ohne Liste): Projektliste ausgeblendet; blockq oben GENAU mittig (Klick fuehrt zur Startseite); Startseiten-Raster mittig auf dem Bildschirm */ html.no-list #project-list { display: none; } html.brand-top-center .brand { justify-content: center; padding: 0; } html.brand-top-center .brand-mark { display: none; } html.no-list.is-home #content { margin-left: 0; padding-left: 56px; } /* volle Breite auf der Startseite */ html.no-list.is-home .grid.home-grid { margin: 0 auto; } /* Raster mittig */ /* Variante "grid4" (Band): EIN gemeinsames 4-Spalten-Raster fuer Start- UND Projektseite. Raster: Rand 56px links/rechts, gap 38 -> Spaltenbreite (100vw - 226px)/4. Startseite: 4 Kachel-Spalten. Projektseite: Text = GENAU Spalte 1 (ganz links), Medien = 3 Kacheln in den Spalten 2-4 -> identische Kachel-Positionen wie die Startseite. */ html.grid4 { --sidebar-w: calc(56px + (100vw - 226px) / 4 + 38px); /* Fallback; exakt per JS (layoutGrid4) */ overflow-y: scroll; /* Scrollbalken immer anzeigen -> gleiche Layout-Breite auf allen Ansichten */ } html.grid4 #project-text { padding: 9.2px 38px 0 56px; } /* Textbreite = genau 1 Rasterspalte */ html.grid4 #lang-toggle { padding-left: 56px; } html.grid4 #content { padding-left: 0; padding-right: 56px; } html.grid4 .grid { max-width: none; margin: 0; } html.grid4.is-home .grid.home-grid { grid-template-columns: repeat(4, 1fr); margin: 0; } /* Auf der Band-Startseite liegt die (leere, transparente) Sidebar ueber der ersten Kachelspalte -> Klicks durchlassen */ html.no-list.is-home #sidebar { pointer-events: none; } /* Variante band2: kleines "o"-Symbol oben links klappt die Projektliste aus/ein */ .menu-mark { display: none; } html.list-toggle .menu-mark { display: flex; position: fixed; top: 0; left: 56px; /* auf der linken Rasterkante, genau ueber den Kuerzeln */ height: 100px; /* im weissen Balken, vertikal mittig wie blockq */ align-items: center; z-index: 41; font-size: 44px; /* gleiche Schriftgroesse wie der blockq-Schriftzug */ font-weight: 100; line-height: 1; cursor: pointer; -webkit-user-select: none; user-select: none; } /* aufgeklappt: Liste sichtbar wie gewohnt, Sidebar als weisse Flaeche ueber den Kacheln */ html.list-toggle.list-open #project-list { display: block; } html.no-list.list-open #sidebar { pointer-events: auto; background: var(--bg); } /* band2: auf PROJEKTSEITEN ist die Liste dauerhaft sichtbar (wie frueher: Liste oben, gefallene Ueberschrift + Text darunter) */ html.list-toggle:not(.is-home) #project-list { display: block; } /* Listenzeilen im grid4-Raster: Kuerzel linksbuendig auf der Rasterkante (56), Namen rechtsbuendig auf der rechten Kante von Spalte 1 */ html.grid4 .project-item { padding-left: 56px; padding-right: 38px; } /* Stabiles Layout: Scrollbalken immer anzeigen, damit sich die Kachel-Positionen zwischen Ansichten mit/ohne Scroll nicht verschieben */ html.scroll-stable { overflow-y: scroll; } /* Variante "Reihen 4" (html.bg-gray): gesamter Hintergrund in einem ganz ganz leichten Grau (--bg wird ueberschrieben, gilt auch fuer den Balken oben); NUR die quadratischen Medienkacheln bleiben reinweiss, sodass sich die Quadrate optisch ganz leicht abzeichnen. */ html.bg-gray { --bg: #f7f7f7; } html.bg-gray .grid img, html.bg-gray .head-image img, html.bg-gray #lightbox img { background: #ffffff; } /* Variante "Reihen 5" (html.tile-outline): Hintergrund weiss; die quadratischen Medienkacheln zeichnen sich durch eine duenne schwarze Umrandung ab (Rahmen liegt dank box-sizing INNERHALB des Quadrats -> kein Layout-Versatz). */ html.tile-outline .grid img, html.tile-outline .head-image img, html.tile-outline #lightbox img { border: 1px solid var(--fg); } /* Variante "Reihen 6" (html.tile-underline): Hintergrund weiss; die Medienkacheln zeichnen sich NUR durch einen duennen Strich an ihrer Unterkante ab (gleiche Linie wie die Ueberschriften; Bildunterschrift sitzt darunter). */ html.tile-underline .grid img, html.tile-underline .head-image img, html.tile-underline #lightbox img { border-bottom: 1px solid var(--fg); } /* Variante "Reihen 2" (html.band-center): ALLES LINKSBUENDIG. Liste ganz links, die Kacheln sitzen direkt daneben (Raster nicht mehr rechtsbuendig, sondern an der Liste) -> abhaengig von der Bildschirmgroesse bleibt RECHTS ein weisser Bereich (Rasterbreite weiterhin ueber den Hoehen-Cap 150vh-250 begrenzt). "blockq" wandert mit und sitzt auf der Raster-Rechtskante (--center-right wird per JS gesetzt, layoutBandCenter). */ html.band-center .grid { margin-left: 0; /* an der Liste, nicht rechtsbuendig */ max-width: var(--center-gridw, calc(150vh - 250px)); } html.band-center .brand { padding-right: var(--center-right, 56px); /* "blockq" an der Raster-Rechtskante */ } /* Reihen 2: Die Ueberschrift faellt DIREKT ueber den Textblock (14px Abstand wie urspruenglich); zwischen Liste und Ueberschrift bleibt immer eine LEERE Listenzeile (Pitch 41.05px). Texthoehe dadurch unveraendert auf beiden Seiten gleich (385.95): Projektseite = 5 Zeilen + Leerzeile + Ueberschrift + 14; Startseite = 6 Zeilen, kein Schriftzug -> 37.05 gleicht aus. */ html.band-center #project-text .text-heading { margin-top: 41.05px; } html.band-center #project-text .proj-body.about-body { margin-top: 37.05px; } /* Reihen 2 Startseite: derselbe Strich wie unter den Projekt-Ueberschriften auch ueber dem Textblock (IMMER vorhanden) - auf EXAKT derselben Hoehe wie auf den Projektseiten (Unterkante 14px ueber der ersten Textzeile), nur ohne Ueberschrift darueber */ html.band-center #project-text .about-body { position: relative; } html.band-center #project-text .about-body::before { content: ""; position: absolute; top: -14.85px; /* 14 Abstand + Linienstaerke */ left: 0; right: 0; border-top: 1px solid var(--fg); } /* Reihen 2: Strich ueber dem "deu | eng"-Umschalter - gleiche durchgezogene Linie wie unter den Ueberschriften (volle Spaltenbreite von side-pad bis side-pad); nur wenn der Umschalter sichtbar ist (nicht leer) */ html.band-center #lang-toggle { position: relative; } html.band-center #lang-toggle:not(:empty)::before { content: ""; position: absolute; top: 0; left: var(--side-pad); right: var(--side-pad); border-top: 1px solid var(--fg); } /* Meta-Eintrag "Ueber uns" unterhalb der Projektliste: gleiche Schrift + gleicher Zeilenabstand, RECHTSBUENDIG unter den Projektnamen. (Die .row ist in dieser Variante 100% breit -> das Label INNERHALB der Zeile nach rechts schieben, nicht den Button) */ .project-item.meta-item .row { justify-content: flex-end; } /* Ausgewaehlt: wandert wie ein Projekt als unterstrichene Ueberschrift ueber den Text (gleiche durchgezogene Linie wie die Projektseiten), Label rechtsbuendig */ .text-heading.about-heading .row { justify-content: flex-end; } /* Variante "streu": Startseite nicht gekachelt, sondern lose zufaellig verteilt; alle Bilder schwarzweiss, bei Hover in Farbe (Klick fuehrt zum Projekt) */ .scatter { position: relative; width: 100%; height: calc(100vh - 180px); /* Medienfeld unterhalb des Balkens, ohne Scrollen */ } .scatter figure { position: absolute; margin: 0; cursor: pointer; } .scatter figure:hover { z-index: 5; } /* das beruehrte Bild liegt obenauf */ .scatter img { display: block; width: 100%; height: auto; filter: grayscale(1); /* schwarzweiss ... */ transition: filter 0.25s ease; } .scatter figure:hover img { filter: none; } /* ... bei Hover Farbe */ .scatter figcaption { margin-top: 6px; font-size: 12px; line-height: 1.35; color: #555; text-align: center; font-family: "Roboto Mono", ui-monospace, monospace; } /* Symbol = ineinandergeschobenes b und q: die Kreise der Buchstaben liegen uebereinander, nur die Striche gehen nach oben (b) und unten (q) weg */ .menu-mark .bq { position: relative; display: inline-block; } .menu-mark .bq .q { position: absolute; top: 0; left: 0.08em; } .brand-center-mark { position: fixed; top: 100px; /* = Oberkante der obersten Listenzeile (91px Sidebar-Pad + 9px Item-Pad) */ left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2); transform: translateX(-50%); font-size: 44px; font-weight: 100; /* Roboto Thin wie der urspruengliche Schriftzug */ line-height: 1; letter-spacing: 0.005em; } /* ---- Sidebar links: Liste (auf Hoehe der oberen Medienreihe), Text darunter, NICHTS scrollt ---- */ #sidebar { padding: 91px 0 0; /* oben 91 (+item-padding 9 => erste Listenzeile auf 100px), unten 0 */ overflow: hidden; /* links nichts zum Scrollen */ display: flex; flex-direction: column; } #project-list { flex: 0 0 auto; } /* Liste: Kuerzel links, Titel rechtsbuendig, Zeile ueber volle Breite */ .project-item { padding: 9px var(--side-pad); } .project-item .row { display: flex; justify-content: space-between; width: 100%; gap: 14px; } .project-item .name { text-align: right; } /* Gewaehltes Projekt: das Listen-Element wandert als Ueberschrift ueber den Text. In der Liste wird es ausgeblendet (Luecke schliesst sich), ueber dem Text erscheint dieselbe Zeile (Kuerzel links, Name rechts, durchgezogene Linie). */ .project-item.moved { display: none; } .text-heading { font-size: 15px; margin: 0 0 14px; will-change: transform; } .text-heading .row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--fg); /* wie aktives Listen-Element */ padding-bottom: 2px; line-height: 1.35; } .text-heading .code { font-family: "Roboto Mono", ui-monospace, monospace; font-weight: 400; } .text-heading .name { text-align: right; } /* Zufallsauswahl auf der Startseite: Klick fuehrt zum Projekt (kein Zoom-Cursor); unter den Medien steht das Projektkuerzel (Mono, wie in der Liste) */ .grid.home-grid img { cursor: pointer; } .grid.home-grid figcaption { font-family: "Roboto Mono", ui-monospace, monospace; } /* Reihen 2 / Online: Bildunterschriften so gross wie der Textblock unter der Liste (13px, .proj-body) und in Roboto (gilt fuer Start- UND Projektseiten, schlaegt die Mono-Regel) */ html.band-center .grid figcaption { font-family: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif; font-size: 13px; line-height: 1.55; } /* Startseiten-Fusszeile (im #lang-toggle-Slot unten links): Impressum + Adresse + Kontakt. Typografie wie der Projekt-Textblock; haelt LINKE und RECHTE Kante der Liste (Zeilen ueber die volle Spaltenbreite, links-/rechtsbuendig wie die Listenzeilen). */ .home-footer { width: 100%; font-size: 13px; line-height: 1.55; color: var(--fg); } .home-footer .f-row { display: flex; justify-content: space-between; /* links Impressum/Mail, rechts Adresse/Telefon */ align-items: baseline; gap: 14px; } .home-footer a { color: var(--fg); text-decoration: none; /* schlicht, ohne Effekte */ cursor: pointer; } .home-footer a.imp-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* Impressum-Ansicht mittig im Medienfeld */ .impressum .imp-title { margin-bottom: 10px; } /* Fusszeile links gestapelt (FOOTER_POS="liste"): unten links, RECHTSBUENDIG mit der Liste (Zeilen enden an der rechten Listen-Kante), Schrift + Zeilenabstand wie die Liste */ .home-footer-list { width: 100%; /* Spaltenbreite 28..392 = Listenzeilen */ text-align: right; /* rechtsbuendig mit der Liste */ font-size: 15px; /* wie die Projektliste */ line-height: 1.35; color: var(--fg); } .home-footer-list > * { margin-bottom: 21.2px; } /* Zeilen-Pitch 41.45px = Listen-Pitch */ .home-footer-list > *:last-child { margin-bottom: 0; } .home-footer-list a { display: block; color: var(--fg); text-decoration: none; cursor: pointer; } .home-footer-list a.imp-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* Fusszeile rechts (FOOTER_POS="rechts"): rechtsbuendig am blockq-Schriftzug (right:56), Unterkante buendig mit der Liste (top wird per JS gesetzt) */ .home-footer-right { position: fixed; right: 56px; /* = rechte Kante des blockq-Schriftzugs / der Medien */ font-size: 15px; /* wie die Projektliste links */ line-height: 1.35; color: var(--fg); text-align: right; } /* Zeilenabstand exakt wie die Projektliste links (Listen-Pitch 41.45px, Zeile 20.25px -> 21.2px Abstand) */ .home-footer-right > * { margin-bottom: 21.2px; } .home-footer-right > *:last-child { margin-bottom: 0; } .home-footer-right a { display: block; color: var(--fg); text-decoration: none; cursor: pointer; } .home-footer-right a.imp-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* Textblock unter der Liste: etwas abgerueckt; fuellt den Rest, laeuft nicht ueber (kein Scrollen) */ #project-text { flex: 1 1 auto; /* fuellt den Platz -> Sprachumschalter wird nach UNTEN gedrueckt */ min-height: 0; overflow-y: auto; /* bei kleinem Bildschirm scrollbar (Text nicht mehr abgeschnitten) */ scrollbar-width: none; /* Scrollbalken ausblenden (Firefox) */ -ms-overflow-style: none; /* Scrollbalken ausblenden (alte Edge/IE) */ /* 9.2px -> die gefallene Ueberschrift sitzt im Listen-Takt (Pitch 41.45px) direkt unter der letzten Listenzeile; der Text rueckt entsprechend nach oben */ padding: 9.2px var(--side-pad) 0; } #project-text::-webkit-scrollbar { display: none; } /* Scrollbalken ausblenden (Chrome/Safari) */ #project-text .proj-body { font-size: 13px; line-height: 1.55; margin: 0; color: var(--fg); text-align: justify; hyphens: auto; } /* ---- Sprachumschalter "deu | eng" (unter dem Text) ---- */ #lang-toggle { flex: 0 0 auto; padding: 14px var(--side-pad) 24px; /* unten in der Ecke */ display: flex; gap: 6px; align-items: baseline; } .lang-opt { border: none; background: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--muted); } .lang-opt.active { color: var(--fg); } .lang-sep { font-size: 12px; color: var(--muted); } /* ---- Team-Seite (Klick auf "blockq"): Foto oben, Lebenslaeufe darunter ---- Gleiche Feldbreite wie das Medienraster (inkl. Zentrier-/Cap-Regeln); die Projektliste links ist auf dieser Seite ausgeblendet. */ html.is-team #sidebar #project-list { display: none; } .team { max-width: calc(150vh - 250px); margin-left: auto; } html.band-center .team { margin-left: 0; max-width: var(--center-gridw, calc(150vh - 250px)); } /* Foto: 80% der 2-Kachel-Breite; Lebenslaeufe (Text + Namenslinien) in EXAKT derselben Breite darunter -> gemeinsame linke UND rechte Kante mit dem Foto */ .team-photo, .team-cvs { width: calc(((100% - 2 * var(--gap)) / 3 * 2 + var(--gap)) * 0.8); } .team-photo { margin: 0; } .team-photo img { display: block; width: 100%; height: auto; /* natuerliches Seitenverhaeltnis, keine Quadrat-Kachel */ } .team-cvs { display: grid; grid-template-columns: 1fr; /* Lebenslaeufe NACHEINANDER, nicht nebeneinander */ gap: 56px; margin-top: 56px; padding-bottom: 40px; } .cv-name { font-size: 15px; line-height: 1.35; border-bottom: 1px solid var(--fg); /* gleiche Linie wie die Ueberschriften */ padding-bottom: 2px; margin-bottom: 10px; } .cv-born { font-size: 13px; line-height: 1.55; margin-bottom: 14px; text-align: right; /* Inhalt rechtsbuendig (wie die Stationen) */ } .cv-row { display: flex; justify-content: space-between; /* Jahreszahl links, Inhalt rechtsbuendig */ gap: 14px; font-size: 13px; line-height: 1.55; margin-bottom: 10px; } .cv-years { flex: 0 0 76px; /* Jahresspalte linksbuendig ("2012 – 2017" braucht ~68px) */ } .cv-text { flex: 1 1 auto; text-align: right; /* Inhalt rechtsbuendig an der Foto-/Spaltenkante */ } /* Schrift explizit Roboto (wie der Rest der Seite) */ .team, .cv-name, .cv-born, .cv-row { font-family: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif; } /* Impressum ganz unten auf der Team-Seite (gleiche Spalte wie die Lebenslaeufe) */ .team-impressum div, .team-impressum a { display: block; font-size: 13px; line-height: 1.55; } .team-impressum a { color: var(--fg); text-decoration: none; /* schlicht, wie die Kontaktangaben */ } /* Rechtstexte: Zwischenueberschriften mit Abstand, Absaetze im Blocksatz (wie die Projekttexte) */ .team-impressum .imp-head { margin: 24px 0 4px; } .team-impressum .imp-text { font-size: 13px; line-height: 1.55; margin: 0; color: var(--fg); text-align: justify; hyphens: auto; } @media (max-width: 720px) { .team-photo, .team-cvs { width: 100%; } /* mobil volle Breite */ } /* ---- Zentrierte Ansicht im Medienfeld (Kontakt / Ueber uns) ---- */ .center-view { min-height: calc(100vh - 180px); /* unter dem Balken (100) abzgl. unterer Innenabstand (80) */ display: flex; align-items: center; justify-content: center; text-align: center; } .contact, .about-text { font-family: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--fg); } .contact .contact-line, .contact a { display: block; color: var(--fg); text-decoration: none; /* schlicht, ohne Effekte */ } .about-text { max-width: 460px; } /* ---- Medien: fuellen den Inhaltsbereich (rechte Kante = Logo), starten etwas weiter unten ---- */ /* Immer 3 Spalten, Raster RECHTSBÜNDIG (Logo "blockq" fluchtet mit der rechten Spalte). Rasterbreite nach oben begrenzt (Hoehen-Cap 150vh-250px), damit zwei Reihen inkl. Bildunterschriften ins Fenster passen -> auf grossen Schirmen bleibt links etwas Freiraum. */ .grid { max-width: calc(150vh - 250px); margin-left: auto; } #content { padding-top: 100px; /* unter dem weissen Balken (100px) */ } /* ---- Mobil: alles gestapelt, Logo wieder normal oben links ---- */ @media (max-width: 720px) { .brand { position: static; height: auto; padding: 16px var(--side-pad); /* flex-row bleibt: "o" links, "blockq" rechts (beide klickbar) */ } .brand-mark, .brand-name { font-size: 40px; } #sidebar { overflow: visible; display: block; padding-top: 8px; } #project-text { flex: none; padding: 8px var(--side-pad) 0; } #lang-toggle { padding: 10px var(--side-pad) 4px; } #content { padding-top: 8px; } .center-view { min-height: auto; padding: 32px 0; } /* Kontakt/Ueber uns nicht ueber volle Hoehe */ /* Reihen 2: Sonderlayout mobil aufheben (gestapeltes Standard-Layout) */ html.band-center .brand { padding-right: var(--side-pad); } html.band-center .grid { max-width: none; } }