/* ===================================================================== dieplanerei.at — styles.css gliederung: 1 basis variablen, reset, body, links, container, fonts 2 layout-chrome header (desktop + burger), footer, main 3 universal grid .grid, .cell, .cell-logo (team/kontakt/kategorie) 4 lightbox globales overlay (von projekt.html genutzt) 5 seiten alphabetisch: 5a datenschutz + impressum (rechtsseiten, gemeinsame klassen) 5b index (startseite) 5c kategorie-seiten (efh/mfh/gwb/ssf — gemeinsam) 5d kontakt 5e projekt (detailseite) 5f team ===================================================================== */ /* ===================================================== */ /* ==== 1 BASIS ===================================== */ /* ===================================================== */ :root{ --bg: #000; --text: #b0b0b0; --accent: #ffffff; --hairline: #333; --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --container-max: 1400px; --gutter: 2rem; /* höhen-variablen für die vollbild-berechnung des grids (header und footer haben je zwei zeilen) */ --header-h: 100px; --footer-h: 90px; --grid-padding: 2rem; } *{box-sizing:border-box;margin:0;padding:0} html,body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body{ min-height:100vh; display:flex; flex-direction:column; } a{color:inherit;text-decoration:none;transition:color .15s ease, opacity .15s ease} a:hover{color:var(--accent)} .container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter); } /* --- poppins lokal gehostet (ersetzt google-fonts-abruf im ) --- vier schnitte aus bilder/fonts/, woff2, latin. font-display:swap: text sofort sichtbar (fallback-schrift), wird auf poppins umgestellt sobald die datei geladen ist. */ @font-face{ font-family:"Poppins"; font-style:normal; font-weight:300; font-display:swap; src:url("bilder/fonts/poppins-v24-latin-300.woff2") format("woff2"); } @font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("bilder/fonts/poppins-v24-latin-regular.woff2") format("woff2"); } @font-face{ font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("bilder/fonts/poppins-v24-latin-500.woff2") format("woff2"); } @font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("bilder/fonts/poppins-v24-latin-700.woff2") format("woff2"); } /* ===================================================== */ /* ==== 2 LAYOUT-CHROME ============================= */ /* ===================================================== */ /* ---------- site-header (eine zeile: team · logo · kontakt) ---------- */ .site-header{ position:sticky; top:0; background:var(--bg); padding:1.25rem 0; z-index:100; flex-shrink:0; } /* drei spalten: links team, mitte logo, rechts kontakt. die zwei aussenspalten sind gleich breit (1fr) → logo sitzt optisch exakt mittig, unabhängig von der textbreite. grosszügiger gap, damit team/kontakt nicht am logo kleben. */ .header-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:3.5rem; } /* team-link an die mitte gerückt, kontakt rechtsbündig — beide rutschen ans logo heran, bleiben aber in ihrer spalte. */ .nav-primary{ display:flex; align-items:center; } .nav-primary.links { justify-content:flex-end; } .nav-primary.rechts{ justify-content:flex-start; } .nav-primary a{ color:var(--accent); font-size:.95rem; padding-bottom:3px; border-bottom:1px solid transparent; } .nav-primary a:hover, .nav-primary a.active{ color:var(--accent); border-bottom-color:var(--accent); } /* logo mittig, nur ein wenig grösser als der text (text .95rem) */ .header-logo{ display:flex; align-items:center; justify-content:center; } .header-logo:hover{opacity:.75} .header-logo img{ display:block; height:3.0rem; width:auto; } /* ---------- site-footer (zwei zeilen) ---------- */ .site-footer{ padding:1.25rem 0; font-size:.8rem; flex-shrink:0; } .site-footer p{text-align:center} .site-footer .brandtext strong{ font-weight:700; color:var(--accent); } .site-footer .footer-nav{ display:flex; justify-content:center; gap:1.5rem; margin-top:.4rem; font-size:.75rem; } .site-footer .footer-nav a{ color:var(--text); } .site-footer .footer-nav a:hover{ color:var(--accent); } /* ---------- site-main + grid-wrap ---------- */ .site-main{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:var(--grid-padding); min-height:0; } .grid-wrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; } /* detailseite: die projekt-pfeile liegen ausserhalb der collage (left/right:-3rem). damit sie auf schmalen desktop-fenstern nicht am fensterrand abgeschnitten werden, bekommt der wrapper hier zusaetzliche seitliche luft. greift nur auf seiten mit .collage. */ .grid-wrap:has(.collage){ padding-left:3.5rem; padding-right:3.5rem; } @media (max-width:700px){ /* mobil sind die desktop-pfeile aus -> keine extra-luft noetig */ .grid-wrap:has(.collage){ padding-left:0; padding-right:0; } } /* ---------- header mobil: gleiche eine zeile, nur kleiner ---------- */ @media (max-width:700px){ .site-header{ padding:.7rem 0; } .nav-primary a{ font-size:.9rem; } /* logo am handy minimal kleiner als auf dem desktop */ .header-logo img{ height:2.3rem; } /* main-padding mobil entspannen, kein flex-zentrum mehr */ body{display:block} .site-main{ display:block; padding:1.5rem 1rem 3rem; } } /* ===================================================== */ /* ==== 3 UNIVERSAL GRID + CELL ===================== */ /* ===================================================== */ /* 4 spalten, logo-rechteck in der mitte. (verbliebener nutzer: aktuell keiner mehr direkt — bleibt als basis für .cell-regeln.) */ .grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(3, 1fr); gap:1rem; width:min(1100px, calc((100vh - var(--header-h) - var(--footer-h) - var(--grid-padding) * 2) * 4 / 3)); aspect-ratio:4 / 3; max-width:100%; max-height:100%; } /* 3x3-raster für team und kontakt (9 kacheln, kein logo-feld). quadratisch, an die bildschirmhöhe gekoppelt. mobil fällt es wie das alte raster in die vertikale listenform (siehe block weiter unten). */ .grid-9{ display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr); gap:1rem; width:min(1000px, calc(100vh - var(--header-h) - var(--footer-h) - var(--grid-padding) * 2)); aspect-ratio:1 / 1; max-width:100%; max-height:100%; } .cell{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; padding:1rem; border:1px solid var(--hairline); text-align:center; min-width:0; min-height:0; } .cell .initials{ font-size:clamp(1.7rem, 3.1vh, 2.7rem); font-weight:300; color:var(--accent); letter-spacing:2px; line-height:1; margin-bottom:.4rem; } .cell .role{ display:block; font-size:clamp(.68rem, 1.05vh, .88rem); color:var(--text); letter-spacing:.5px; min-height:1.1em; } .cell .name{ font-size:clamp(.88rem, 1.4vh, 1.12rem); color:var(--accent); line-height:1.25; } .cell .mail{ font-size:clamp(.62rem, .92vh, .8rem); color:var(--text); word-break:break-all; margin-top:.2rem; } /* logo-feld: zwei spalten in der mittleren zeile, klickbar als home */ .cell-logo{ grid-column:2 / span 2; grid-row:2; border:none; cursor:pointer; } .cell-logo:hover{opacity:.75} .cell-logo img{ max-width:90%; max-height:80%; width:auto; height:auto; object-fit:contain; display:block; } /* ---------- grid responsive ---------- */ @media (max-width:1000px){ .grid{ width:min(900px, calc((100vh - var(--header-h) - var(--footer-h) - var(--grid-padding) * 2) * 4 / 3)); } } @media (max-width:700px){ .nav-primary{gap:1.25rem} .grid-wrap{display:block;height:auto} .grid, .grid-9{ display:flex; flex-direction:column; gap:0; max-width:600px; margin:0 auto; width:auto; aspect-ratio:auto; max-height:none; } /* personen-kachel mobil: initialen-quadrat links, absolut positioniert und oben bündig zur namenszeile. rechts daneben name / (funktion) / mail als spalte über die volle breite. */ .cell{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left; gap:.15rem; position:relative; border:none; border-bottom:1px solid var(--hairline); padding:1.25rem 0 1.25rem 4rem; } .cell:last-child{border-bottom:none} /* initialen-quadrat: feste größe, aus dem textfluss gelöst. top = padding-top der kachel → obere kante auf namenshöhe. */ .cell .initials{ position:absolute; left:0; top:1.25rem; width:2.5rem; height:2.5rem; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-size:.85rem; letter-spacing:1.5px; margin:0; } .cell .name{width:100%;font-size:1rem} .cell .role{ width:100%; margin:0; min-height:0; font-size:.8rem; } .cell .role:empty{display:none} .cell .mail{ width:100%; margin:0; font-size:.85rem; word-break:normal; overflow-wrap:break-word; } /* das logo sitzt mobil im header — das logo in der rastermitte wird am handy ausgeblendet. greift überall mit .cell-logo (team, kategorie-seiten, kontakt). */ .cell-logo{ display:none; } } /* ===================================================== */ /* ==== 4 LIGHTBOX (global, von projekt.html genutzt) */ /* ===================================================== */ /* vollflächiges overlay. standardzustand: unsichtbar und nicht anklickbar. wird per klasse "is-open" eingeblendet. */ .lightbox{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:3vh 3vw; background:rgba(0,0,0,.92); cursor:pointer; /* klick irgendwohin schließt */ opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s; } .lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .25s ease, visibility 0s; } /* das große bild: so groß wie möglich, aber nie über die echte auflösung (1200×900) hinaus hochskaliert. startet leicht verkleinert und wächst beim öffnen auf. */ .lightbox-img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; border:1px solid var(--hairline); transform:scale(.85); transition:transform .25s ease; } .lightbox.is-open .lightbox-img{ transform:scale(1); } /* ===================================================== */ /* ==== 5a DATENSCHUTZ + IMPRESSUM (rechtsseiten) === */ /* ===================================================== */ /* rechtsseiten haben fließtext statt kachelraster. site-main wird hier zum normalen block, damit langer text natürlich nach unten scrollt statt oben abge- schnitten zu werden. */ .legal-main{ display:block; } /* der rahmen: gleiche dünne linie wie überall, zentriert, lesbare breite. wächst mit dem textinhalt mit. */ .legal-frame{ max-width:720px; margin:0 auto; border:1px solid var(--hairline); padding:clamp(2rem, 5vh, 3.5rem) clamp(1.5rem, 4vw, 3rem); } /* logo oben in der mitte — tritt aus der rastermitte nach oben. */ .legal-logo{ display:block; text-align:center; margin-bottom:2.5rem; } .legal-logo:hover{opacity:.75} .legal-logo img{ max-width:200px; width:60%; height:auto; } /* seitentitel (gesetzeszitat) */ .legal-title{ text-align:center; color:var(--accent); font-weight:300; font-size:1.05rem; line-height:1.4; letter-spacing:.5px; margin-bottom:2.5rem; } /* ein abschnitt: kleine überschrift + wert */ .legal-section{ margin-bottom:1.6rem; } .legal-section:last-child{ margin-bottom:0; } .legal-section h2{ font-size:.8rem; font-weight:500; letter-spacing:.5px; color:var(--accent); margin-bottom:.4rem; } .legal-section p{ font-size:.92rem; color:var(--text); line-height:1.6; } .legal-section p + p{ margin-top:.5rem; } .legal-section a{ color:var(--text); border-bottom:1px solid var(--hairline); } .legal-section a:hover{ color:var(--accent); border-bottom-color:var(--accent); } /* firmenname leicht hervorgehoben */ .legal-section .legal-strong{ color:var(--accent); } /* entwurfshinweis — sichtbar abgesetzt, wird beim finalen geprüften text entfernt. */ .legal-draft{ text-align:center; font-size:.82rem; color:var(--text); border:1px solid var(--hairline); padding:.6rem 1rem; margin-bottom:2.5rem; letter-spacing:.5px; } /* ---------- rechtsseiten mobil ---------- */ @media (max-width:700px){ .legal-frame{ border:none; padding:1rem 0 2rem; } } /* ===================================================== */ /* ==== 5b INDEX (startseite) ======================= */ /* ===================================================== */ /* startseite: eigenes 3x3-raster (9 kacheln, kein logo-feld — das logo sitzt jetzt oben im header). bewusst NICHT das universelle .grid (4x3), damit team/kontakt unberührt bleiben. quadratisch: höhe wird direkt aus der verfügbaren bildschirmhöhe abgeleitet (viewport minus header/footer/padding), die breite folgt über aspect-ratio. so kann das raster nie höher als der sichtbare bereich werden. */ .grid-start{ display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr); gap:1rem; height:min(820px, calc(100vh - var(--header-h) - var(--footer-h) - var(--grid-padding) * 2)); aspect-ratio:1 / 1; max-width:100%; } /* startseite: raster + (mobile) pfeil-leiste vertikal stapeln. */ .grid-wrap:has(.grid-start){ flex-direction:column; } /* startseite: die desktop-pfeile liegen ausserhalb des rasters (left/right:-3rem). seitliche luft, damit sie auf schmalen desktop- fenstern nicht am fensterrand abgeschnitten werden. mobil weg, weil die pfeile dort unter dem raster sitzen. */ .grid-wrap:has(.grid-start){ padding-left:3.5rem; padding-right:3.5rem; } @media (max-width:700px){ .grid-wrap:has(.grid-start){ padding-left:0; padding-right:0; } } /* ---------- seiten-navigation: pfeile ---------- .start-stage = wrapper ums raster, anker fuer die desktop-pfeile. .start-nav = ein pfeil (desktop UND mobil dieselbe klasse, von js ueber diese klasse gesteuert). optik identisch zu den detailseiten-pfeilen: nackter weisser chevron, kein rahmen, kein hintergrund. */ .start-stage{ position:relative; display:flex; justify-content:center; } .start-nav{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:none; border-radius:0; background:none; padding:0; cursor:pointer; transition:opacity .2s ease; } .start-nav:hover{ opacity:.65; } .start-nav svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; } /* desktop: die zwei pfeile im .start-stage absolut aussen neben das raster setzen, vertikal mittig. der negative offset schiebt sie in den schwarzen rand links/rechts (wie auf der detailseite). */ .start-stage .start-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; } .start-stage .start-nav.links { left:-3rem; } .start-stage .start-nav.rechts{ right:-3rem; } /* die mobile pfeil-leiste (unter dem raster) ist auf desktop aus. */ .start-nav-mobil{ display:none; } /* mobil: desktop-pfeile (im stage) aus, dafuer die pfeil-leiste unter dem raster zeigen — zwei pfeile zentriert nebeneinander, kein wisch. */ @media (max-width:700px){ .start-stage .start-nav{ display:none; } .start-nav-mobil{ display:flex; justify-content:center; align-items:center; gap:2.5rem; margin-top:1.5rem; } } /* basis-bildkachel — auch von den kategorie-seiten genutzt (dort als verlinkte a.cell-tile, siehe block 5c). */ .cell-tile{ position:relative; overflow:hidden; border:1px solid var(--hairline); min-width:0; min-height:0; } /* zwei übereinanderliegende ebenen für die kreuzblende */ .tile-layer{ position:absolute; inset:0; opacity:0; background:var(--bg); transition:opacity 1.2s ease; } .tile-layer.is-active{ opacity:1; z-index:1; } /* die hereinblendende ebene liegt oben — verhindert abdunkeln */ .tile-layer.is-incoming{ z-index:2; } .tile-layer img{ width:100%; height:100%; object-fit:cover; display:block; } /* text-kachel (architektur & design) im stil der teamseite */ .tile-text{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:1.2rem; background:var(--bg); color:var(--accent); } .tile-buero{ font-weight:300; letter-spacing:2px; font-size:clamp(1rem, 2.3vh, 1.7rem); line-height:1.3; } /* ---------- startseite mobil: identisches 3x3-raster ---------- am handy dasselbe 3x3 wie auf dem desktop, nur an die bildschirmbreite gekoppelt. die kreuzblende läuft über dieselbe .tile-layer-logik (transition 1.2s). */ @media (max-width:700px){ .grid-start{ width:100%; max-width:600px; margin:0 auto; height:auto; max-height:none; } } /* ===================================================== */ /* ==== 5c KATEGORIE-SEITEN ========================= */ /* ==== (efh, mfh, gwb, ssf — gemeinsame klassen) */ /* ===================================================== */ /* verlinkte bildkachel: zeigt ein projektbild, blendet beim drüberfahren leicht ab — signal "klickbar". baut auf .cell-tile aus block 5b auf. */ a.cell-tile{ cursor:pointer; display:block; } a.cell-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .15s ease; } a.cell-tile:hover img{ opacity:.7; } /* ---------- kategorie-seiten mobil: 2-spalten-raster ---------- der modifier .grid-gallery wird mobil zu einem festen 2-spalten- raster (2 bilder nebeneinander, untereinander scrollend — die 10 projekte ergeben 5 reihen). die teamseite (.grid ohne modifier) bleibt unberührt — kachel-liste vertikal wie bisher. das display:grid überschreibt das display:flex aus dem basis- mobil-block weiter oben. */ @media (max-width:700px){ .grid.grid-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; max-width:600px; width:100%; margin:0 auto; } /* das logo-feld wird mobil nicht angezeigt (das logo sitzt im header). .cell-logo ist schon weiter oben global auf display:none — hier nochmal explizit, damit im raster keine leere zelle entsteht. */ .grid.grid-gallery .cell-logo{ display:none; } /* projektkachel: quadratisch (die übersichtsbilder bilder/start/ {kat}-start-NN.jpg sind 1:1, die integrierte beschriftung würde sonst beschnitten). kein flex/snap mehr. */ .grid.grid-gallery .cell-tile{ aspect-ratio:1 / 1; } .grid.grid-gallery .cell-tile img{ width:100%; height:100%; object-fit:cover; display:block; } /* die wisch-pfeile ergeben im vertikalen raster keinen sinn — nur auf der kategorieseite ausblenden. der selektor trifft den wrapper NUR, wenn er eine .grid-gallery enthält; der gleiche wrapper auf projekt.html (enthält .collage-photos) bleibt unberührt, dort steuern die pfeile weiter das bildwischen. */ .swipe-hint-wrap:has(.grid-gallery) .swipe-hint{ display:none; } } /* ===================================================== */ /* ==== 5d KONTAKT ================================== */ /* ===================================================== */ /* info-kachel: nutzt .cell als basis (rahmen, zentrierung). vier stück: adresse, e-mail, telefon, fax. */ .cell-info{ cursor:pointer; gap:.5rem; } /* fax ist ein
ohne link — kein klick-cursor */ div.cell-info{ cursor:default; } .cell-info .info-label{ font-size:clamp(.68rem, 1.05vh, .88rem); letter-spacing:.5px; color:var(--text); } .cell-info .info-value{ font-size:clamp(.88rem, 1.5vh, 1.15rem); font-weight:300; color:var(--accent); line-height:1.4; } a.cell-info:hover .info-value{ color:var(--accent); } /* foto-kachel: unverlinkte .cell-tile braucht eigene bild-regel, da a.cell-tile img hier nicht greift. */ .cell-photo img{ width:100%; height:100%; object-fit:cover; display:block; } /* ---------- kontakt mobil: listenform ---------- mobil wird das 4x3-raster zur listen-spalte (kommt aus block 3). hier nur die feinheiten: info-blöcke als hairline- liste wie auf der teamseite, fünf der sechs bürofotos aus, kontakt-02 unten als vollbreite-bild. das mittige .cell-logo verschwindet bereits durch die globale regel in block 3. */ @media (max-width:700px){ .cell-info{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left; gap:.2rem; padding:1.1rem 0; border:none; border-bottom:1px solid var(--hairline); } .cell-info .info-label{ font-size:.78rem; color:var(--text); letter-spacing:.5px; } .cell-info .info-value{ font-size:1rem; color:var(--accent); line-height:1.35; } /* bürofotos mobil grundsätzlich aus … */ .cell-photo{ display:none; } /* … kontakt-02 bleibt: vollbreite-bild ohne rahmen, sitzt unter den vier info-blöcken (order > standardwert 0). */ .cell-photo.cell-photo-mobil{ display:block; order:5; border:none; margin-top:1rem; aspect-ratio:4 / 3; width:100%; } .cell-photo.cell-photo-mobil img{ width:100%; height:100%; object-fit:cover; display:block; } } /* ===================================================== */ /* ==== 5e PROJEKT (detailseite) ==================== */ /* ===================================================== */ /* außenrahmen: gleiches 4:3-rechteck wie das grid der anderen seiten, damit beim klick von der übersicht nichts springt. */ .collage{ display:grid; grid-template-columns:1fr 1fr 1fr; /* links hoch, rechts 2 spalten */ grid-template-rows:repeat(3, 1fr); gap:.5rem; width:min(1100px, calc((100vh - var(--header-h) - var(--footer-h) - var(--grid-padding) * 2) * 4 / 3)); aspect-ratio:4 / 3; max-width:100%; max-height:100%; } /* hochformat: linke spalte, volle höhe */ .c-hoch{ grid-column:1; grid-row:1 / span 3; } /* querformat oben: über die zwei rechten spalten */ .c-quer1{ grid-column:2 / span 2; grid-row:1; } /* querformat-paar in der mitte */ .c-quer2{ grid-column:2; grid-row:2; } .c-quer3{ grid-column:3; grid-row:2; } /* querformat unten links */ .c-quer4{ grid-column:2; grid-row:3; } /* beschriftungs-feld unten rechts (früher logo-feld). das logo ist raus — hier sitzt nur noch das name.jpg, formatfüllend in der zelle, rechtsbündig unten. */ .c-name-feld{ grid-column:3; grid-row:3; } .collage-cell{ position:relative; overflow:hidden; border:1px solid var(--hairline); min-width:0; min-height:0; } .collage-cell img{ width:100%; height:100%; object-fit:cover; display:block; } /* die fünf foto-felder sind anklickbar (lightbox) — beschriftung nicht */ .c-hoch img, .c-quer1 img, .c-quer2 img, .c-quer3 img, .c-quer4 img{ cursor:pointer; } /* beschriftungs-feld: kein rahmen. das name.jpg füllt die zelle möglichst aus (contain, kein beschnitt), rechtsbündig an der unteren kante ausgerichtet. kein link. */ .c-name-feld{ border:none; position:relative; } .c-beschriftung{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; z-index:1; } .c-beschriftung img{ object-fit:contain; max-width:100%; max-height:100%; width:auto; height:auto; display:block; } /* hinweis, falls kein/ungültiges projekt in der url steht */ .collage-error{ color:var(--text); text-align:center; font-size:1rem; } /* desktop: wrapper ist transparent, die fünf foto-zellen wirken weiterhin direkt im .collage-grid (grid-column/grid-row greifen). */ .collage-photos{ display:contents; } /* ---------- projekt-detailseite mobil: wisch-galerie + name.jpg ---- .collage wird zur senkrechten spalte (außenrahmen). der wrapper .collage-photos wird zur horizontalen wisch-galerie (oben), die beschriftungs-zelle .c-name-feld wird zur name.jpg-zone (unten). */ @media (max-width:700px){ /* außenrahmen: senkrecht, kein festes seitenverhältnis */ .collage{ display:flex; flex-direction:column; gap:0; width:auto; max-width:600px; margin:0 auto; aspect-ratio:auto; max-height:none; } /* wrapper wird zur horizontalen wisch-galerie. kein loop — am letzten slide stoppt der browser von selbst. */ .collage-photos{ display:flex; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; width:100%; } .collage-photos::-webkit-scrollbar{ display:none; } /* jede foto-zelle ist ein slide voller breite. höhe richtet sich nach format — hochformat 3:4, querformat 4:3. höhensprung passiert einmal von slide 1 (hoch) auf slide 2 (quer) und bleibt dann konstant. snap-stop:always erzwingt halt bei jedem bild — bei schnellem/langem wisch wird nicht mehrfach gesprungen. */ .collage-photos .collage-cell{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; border:none; margin-bottom:0; } .collage-photos .c-hoch{ aspect-ratio:3 / 4; } .collage-photos .collage-cell:not(.c-hoch){ aspect-ratio:4 / 3; } /* bilder: contain statt cover — kein beschnitt, lieber schwarze ränder falls ein originalbild leicht abweicht. pointer-events:none unterdrückt die lightbox — pinch-zoom geht weiterhin. */ .collage-photos .collage-cell img{ width:100%; height:100%; object-fit:contain; background:var(--bg); pointer-events:none; cursor:default; } /* beschriftungs-zelle wird zur name.jpg-zone unter der galerie, voll-breit im normalen textfluss. */ .c-name-feld{ aspect-ratio:auto; border:none; padding:1rem 0; margin-top:.5rem; } .c-beschriftung{ position:static; width:100%; padding:0; align-items:initial; justify-content:initial; z-index:auto; } .c-beschriftung img{ width:100%; max-width:none; max-height:none; height:auto; } } /* ===================================================== */ /* ==== 5f TEAM ===================================== */ /* ===================================================== */ /* akademischer titel: sitzt unter dem namen, gleiche größe und farbe wie die rolle. min-height hält die mail-position bei allen kacheln gleich, auch bei personen ohne titel (analog zur leeren rolle). */ .cell .title{ display:block; font-size:clamp(.68rem, 1.05vh, .88rem); color:var(--text); letter-spacing:.5px; min-height:1.1em; } /* ---------- team mobil ---------- der titel reiht sich in der natürlichen dom-reihenfolge zwischen name und mail ein. leerer titel verschwindet. */ @media (max-width:700px){ .cell .title{ width:100%; margin:0; font-size:.8rem; color:var(--text); } .cell .title:empty{ display:none; } } /* ===================================================================== ==== 9 SWIPE-HINTS (mobile pfeile auf wisch-galerien) =========== ===================================================================== pfeile links und rechts über der wisch-galerie. nur auf mobil sichtbar (auf desktop display:none). dezent, klassisch — schmale chevron-form als inline-svg im html. js (swipe-hints.js) blendet sie über die klasse "is-aus" am ende/anfang der galerie aus. */ /* desktop: der wrapper ist css-mäßig komplett unsichtbar (display:contents), damit die darunter liegenden grids (kategorie-grid, collage-grid) exakt so funktionieren wie vorher — als wäre kein wrapper da. */ .swipe-hint-wrap{ display:contents; } /* desktop: pfeile komplett aus. die galerie ist hier kein scroller. */ .swipe-hint{ display:none; } /* mobil: wrapper wird zum normalen block-container, damit die absolut positionierten pfeile sich daran orientieren können. */ @media (max-width:700px){ .swipe-hint-wrap{ display:block; position:relative; width:100%; } .swipe-hint{ display:flex; align-items:center; justify-content:center; position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border:none; border-radius:50%; background:rgba(0,0,0,.35); padding:0; cursor:pointer; z-index:5; opacity:1; transition:opacity .2s ease; -webkit-tap-highlight-color:transparent; } .swipe-hint svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; } .swipe-hint.links { left:8px; } .swipe-hint.rechts{ right:8px; } .swipe-hint.is-aus{ opacity:0; pointer-events:none; } } /* ===================================================== */ /* ==== startseite: bildkacheln verlinkt ============ */ /* ===================================================== */ /* das img in den crossfade-ebenen ist in einen gewickelt (siehe bildHTML in start.js). der link füllt die ganze kachel. nur die aktive ebene ist klickbar — die ausblendende ebene liegt im wechsel noch im dom und würde sonst den klick fangen und auf das vorige projekt führen. dezenter hover wie auf den kategorie-seiten (opacity auf dem bild). */ .tile-layer .tile-link{ display:block; width:100%; height:100%; } .tile-layer .tile-link img{ transition:opacity .15s ease; } .tile-layer:not(.is-active) .tile-link{ pointer-events:none; } .tile-layer.is-active .tile-link:hover img{ opacity:.7; } /* ===================================================== */ /* ==== projekt-detailseite: desktop-projektnavigation */ /* ===================================================== */ /* pfeile links/rechts neben der collage, springen zum vorigen/ nächsten projekt derselben kategorie. optik identisch zu den mobilen .swipe-hint-pfeilen, aber umgekehrte sichtbarkeit: auf desktop sichtbar, am handy aus. das script (projekt.html) setzt die href und blendet den jeweiligen pfeil am rand (01/10) per hidden-attribut aus. */ /* anker für die absolut positionierten pfeile */ .collage{ position:relative; } .projekt-nav{ display:flex; align-items:center; justify-content:center; position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none; border-radius:0; background:none; /* kein runder rahmen, kein hintergrund — nackter chevron auf dem schwarzen rand */ padding:0; cursor:pointer; z-index:5; transition:opacity .2s ease; } .projekt-nav:hover{ opacity:.65; /* dezentes feedback statt hintergrund-wechsel */ } .projekt-nav svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; } /* aussen neben die collage gesetzt (nicht mehr ueber den bildern). der negative offset schiebt sie in den schwarzen rand links/rechts. */ .projekt-nav.links { left:-3rem; } .projekt-nav.rechts{ right:-3rem; } /* das hidden-attribut versteckt einen pfeil, falls das script ihn abschaltet (bei umlaufender navigation normalerweise nie der fall) */ .projekt-nav[hidden]{ display:none; } /* handy: desktop-projektnavigation komplett aus — dort wischen die .swipe-hint-pfeile durch die projektbilder. */ @media (max-width:700px){ .projekt-nav{ display:none; } } /* ===================================================== */ /* ==== lightbox-navigation (pfeile in der großansicht) */ /* ===================================================== */ /* pfeile links/rechts im lightbox-overlay, blättern durch die 5 projektbilder (hoch + quer1..4). kein loop: am ersten bild kein linker pfeil, am letzten kein rechter (js setzt das hidden- attribut). nur desktop relevant — am handy öffnet die lightbox nicht (collage-bilder haben mobil pointer-events:none, dort wischt man durch die galerie). optik wie die übrigen chevron-pfeile. */ .lightbox-nav{ display:flex; align-items:center; justify-content:center; position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border:none; border-radius:50%; background:rgba(0,0,0,.4); padding:0; cursor:pointer; z-index:1001; /* über dem lightbox-bild */ transition:opacity .2s ease, background .2s ease; } .lightbox-nav:hover{ background:rgba(0,0,0,.65); } .lightbox-nav svg{ width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; } .lightbox-nav.links { left:max(16px, 3vw); } .lightbox-nav.rechts{ right:max(16px, 3vw); } /* das hidden-attribut versteckt den pfeil am rand (erstes/letztes bild) */ .lightbox-nav[hidden]{ display:none; } /* handy: lightbox-pfeile aus (lightbox öffnet dort ohnehin nicht) */ @media (max-width:700px){ .lightbox-nav{ display:none; } }