/* gross-ansichten.at — „Galerie-Sheet" (Iteration 2) Body dunkellila als Rahmen, helles Content-Sheet, Bordeaux-Bogen im Header als Akzent. */ @import url('./_fonts.css'); @import url('./_tokens.css'); /* ─── Reset & Base ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; -webkit-text-size-adjust: 100%; background: var(--bg-body); overflow-x: clip; } body { background: var(--bg-body); color: var(--ink-primary); font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; position: relative; /* clip statt hidden: auf html UND body — verhindert auf mobile Safari/Chrome zuverlaessig horizontales Scrollen (overflow-x:hidden nur am body laesst das dort weiterscrollen). Echte Overflow-Quellen werden zusaetzlich unten an der Wurzel (min-width:0 auf Grid-Items, overflow-wrap) behoben — clip ist nur das Sicherheitsnetz, keine Maskierung. */ overflow-x: clip; } /* ─── Bordeaux-Annulus-Bogen oben-links, SVG. z-index 5 — sichtbar über dem dunkellila Header-Background, aber Header- Inhalt (Text "Christine Gross" etc.) liegt darüber (z-index: 10). ─── */ .body-arc { position: absolute; top: 0; left: 0; width: clamp(160px, 18vw, 260px); height: auto; pointer-events: none; user-select: none; z-index: 5; } /* Body bleibt auf allen Viewports dunkellila (#19011F) — keine Page-Outer-Color. */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; transition: color var(--transition-default); } a:hover { color: var(--accent-hover); } button { background: none; border: 0; font-family: inherit; color: inherit; cursor: pointer; } /* ─── Typografie ─── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; color: var(--ink-primary); margin-block-end: calc(var(--space-unit) * 2); } h1 { font-size: var(--text-4xl); font-style: italic; letter-spacing: 0.005em; } h2 { font-size: var(--text-3xl); margin-block-start: calc(var(--space-unit) * 6); } h3 { font-size: var(--text-2xl); margin-block-start: calc(var(--space-unit) * 4); } h4 { font-size: var(--text-xl); } p { margin-block-end: calc(var(--space-unit) * 2); } .lead { font-size: var(--text-lg); font-weight: 300; color: var(--ink-secondary); line-height: 1.6; } blockquote { border-inline-start: 3px solid var(--accent); padding-inline-start: calc(var(--space-unit) * 3); margin-block: calc(var(--space-unit) * 4); font-style: italic; color: var(--ink-secondary); } strong, b { font-weight: 600; color: var(--accent); } em, i { font-style: italic; } ul, ol { margin-block: calc(var(--space-unit) * 2); padding-inline-start: calc(var(--space-unit) * 4); } li { margin-block-end: var(--space-unit); } hr { border: 0; border-block-start: 1px solid var(--rule); margin-block: calc(var(--space-unit) * 6); } /* ─── Container & Layout ─── */ .container { max-width: var(--content-max); margin-inline: auto; padding-inline: calc(var(--space-unit) * 4); width: 100%; } /* ─── Header — dunkler Bereich oben mit Bordeaux-Bogen ─── */ /* z-index: 2 + box-shadow → Header projiziert leichten Schlagschatten nach unten auf den darunterliegenden Hero-Door bzw. Sheet. Body-Arc (z-index 5) bleibt darüber, weil Bordeaux-Sichel weiter sichtbar in den Header ragen soll. */ .site-header { background: var(--bg-body); color: var(--ink-inverted); padding-block: calc(var(--space-unit) * 4); position: relative; overflow: hidden; z-index: 2; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.3); } /* (Bogen-Element wurde nach .body-arc verschoben — außerhalb des Sheets) */ .site-header__inner { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--space-unit) * 3); position: relative; z-index: 10; min-height: 140px; } .site-title-block { display: flex; flex-direction: column; } .site-title { font-family: var(--font-display); font-style: italic; font-size: var(--text-3xl); line-height: 1; color: var(--ink-inverted); letter-spacing: 0.005em; margin: 0; } .site-title a { color: inherit; } .site-tagline { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-inverted); margin-block-start: calc(var(--space-unit) * 1); } .header-quote { position: absolute; top: calc(var(--space-unit) * 3); right: calc(var(--space-unit) * 4); font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl); color: var(--ink-inverted); margin: 0; letter-spacing: 0.01em; white-space: nowrap; text-align: right; z-index: 10; } /* ─── Nav ─── */ /* gap mit clamp() statt fixem space-unit*N: zwischen 1000-1200px-Viewports (Tablet/kleines Desktop, wo die Nav noch horizontal ist) bleibt der Abstand etwas dezenter, ab 1400px+ atmet sie spürbar mehr. flex-wrap: wrap als Safety-Net falls trotzdem ein Item nicht mehr passt. */ .site-nav { display: flex; gap: clamp(2.5rem, 3.5vw, 4rem); flex-wrap: wrap; } .site-nav a { font-family: var(--font-ui); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.12em; color: rgba(250, 229, 230, 0.7); padding-block: var(--space-unit); position: relative; } .site-nav a:hover, .site-nav a.is-active { color: var(--ink-inverted); } .site-nav a.is-active::after { content: ''; position: absolute; inset-block-end: -1px; inset-inline: 0; height: 2px; background: var(--accent-hover); } /* ─── Sheet (Content-Hauptbereich, hell) ─── */ .sheet { background: var(--bg-sheet); flex: 1; position: relative; margin-block-end: calc(var(--space-unit) * 6); box-shadow: var(--shadow-sheet); } .sheet > .container { padding-block: calc(var(--space-unit) * 6); } /* ─── Hero-Doorpage (nur Startseite) ───────────────────────────────────── Refrain auf die alte Joomla-Splash-Seite: Gott · Kunst · Mensch · Natur als zarte vertikale Tagline am Seitenanfang im hellen Sheet. Vier Wörter in Sans-Versalien, gerahmt von zwei kurzen Bordeaux-Hairlines (klare Linien, kein Glow). Liegt INNERHALB des Sheets — kein eigener dunkler Block, der die Header-Schwere verdoppelt. */ .hero-door { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1.1rem, 2vw, 1.6rem); padding-block: clamp(2.4rem, 5vw, 3.8rem); border-block-end: 1px solid var(--rule); } /* Bracket-Hairlines ober- und unterhalb der Wörter — klare 1px Linien in Bordeaux (deutlich gedimmt), kein Gradient, kein Glow. */ .hero-door::before, .hero-door::after { content: ''; width: clamp(56px, 7vw, 90px); height: 1px; background: var(--accent); opacity: 0.35; } .hero-door__words { display: flex; flex-direction: column; align-items: center; gap: clamp(0.55rem, 1.1vw, 0.9rem); font-family: var(--font-ui); font-weight: 300; font-style: normal; text-transform: uppercase; letter-spacing: clamp(0.3em, 0.7vw, 0.42em); font-size: clamp(1.4rem, 2.3vw, 1.95rem); line-height: 1; color: var(--ink-secondary); margin: 0; } .hero-door__word { display: block; /* Letter-Spacing erzeugt rechts vom letzten Glyph einen sichtbaren Spacer, der die optische Mitte verschiebt — mit padding-left ausgleichen, damit jedes Wort visuell zentriert liegt. */ padding-inline-start: clamp(0.3em, 0.7vw, 0.42em); opacity: 0; transform: translateY(8px); animation: door-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(180ms + var(--i) * 140ms); will-change: transform, opacity; } /* Lead-Satz unter den vier Wörtern — italic Cormorant in mittelgrau, bewusst zurückhaltend, damit die Wörter typografisch tonangebend bleiben. Fades nach den Wörtern ein (Stagger fortgesetzt). */ .hero-door__lead { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1.75vw, 1.45rem); line-height: 1.5; color: var(--ink-secondary); max-width: 52ch; margin: 0; text-align: center; opacity: 0; animation: door-reveal 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 900ms; } @media (prefers-reduced-motion: reduce) { .hero-door__lead { opacity: 1; animation: none; } } /* Reveal-Animation: einfaches Up-Fade. */ @keyframes door-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-door__word { opacity: 1; transform: none; animation: none; } } /* ─── Page Grid ─── */ .page-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--space-unit) * 6); padding-block: calc(var(--space-unit) * 6); } /* Grid-Items duerfen unter ihre Inhalts-Mindestbreite schrumpfen. Ohne min-width:0 behaelt ein Grid-Item seine max-content-Mindestbreite (default min-width:auto) — ein langes, nicht umbrechbares Wort (z. B. "Verbraucherschlichtungsstelle" oder der Galerie-Titel "BEZIEHUNGSKISTEN") blaeht dann die Spalte ueber die Viewport-Breite hinaus, vor allem wenn der Nutzer die Systemschrift vergroessert hat. Zusammen mit overflow-wrap unten bricht das Wort stattdessen sauber um. Das war die echte Ursache des "rechts abgeschnitten"-Bugs auf Portfolio/Impressum am Handy. */ .page-grid > * { min-width: 0; } .page-article, .page-article__body, .sidebar { overflow-wrap: break-word; } @media (min-width: 960px) { .page-grid--with-sidebar { grid-template-columns: 1fr 320px; } } .read-area { max-width: var(--read-max); } /* ─── Page Article ─── */ .page-article__title { font-size: var(--text-4xl); font-style: italic; margin-block-end: calc(var(--space-unit) * 4); color: var(--ink-primary); } .page-article__body.read-area img { margin-block: calc(var(--space-unit) * 4); box-shadow: var(--shadow-soft); } /* Absatz, der ein Zitat einleitet, bekommt mehr Luft nach oben. */ .page-article__body.read-area p:has(+ blockquote) { margin-block-start: calc(var(--space-unit) * 6); } /* Startseite — Bresson-Zitat-Block (einleitender Absatz + Blockquote + Autor) wird in Bordeaux + Bold gerendert, hebt sich farblich und im Gewicht vom restlichen Body ab. Achtung: keine 700er-Schrift geladen → Browser fakt synthetic-bold. Bei Bedarf später Spectral-700 als WOFF2 nachladen. */ body.page-startseite .page-article__body p:has(+ blockquote), body.page-startseite .page-article__body blockquote { color: var(--accent); font-weight: 700; } body.page-startseite .page-article__body blockquote { border-inline-start-color: var(--accent); } /* Absatz mit Google-Maps-Link bekommt mehr Luft danach (Action-Link). */ .page-article__body p:has(a[href*="google.com/maps"]) { margin-block-end: calc(var(--space-unit) * 5); } /* ─── Event-Card (Frontmatter card_sections: true) ─── */ .event-card { background: var(--bg-sheet-elevated); border-inline-start: 4px solid var(--accent); padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 5); margin-block: calc(var(--space-unit) * 5); box-shadow: var(--shadow-card); } .event-card > h2:first-child { margin-block-start: 0; color: var(--accent); font-size: var(--text-2xl); } .event-card h3 { margin-block-start: calc(var(--space-unit) * 2); font-size: var(--text-xl); color: var(--ink-primary); } /* Solo-Bilder im Content (z.B. Event-Banner) klein + zentriert + klickbar. */ .content-figure { margin-block: calc(var(--space-unit) * 3); text-align: center; } .content-figure .lightbox-link { display: inline-block; max-width: 260px; cursor: zoom-in; transition: transform var(--transition-default), box-shadow var(--transition-default); } .content-figure .lightbox-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); } .content-figure img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-soft); } /* Mehrere Solo-Bilder in Folge: nebeneinander als Thumbnail-Reihe. */ .event-card .content-figure + .content-figure { margin-block-start: calc(var(--space-unit) * 2); } @media (min-width: 720px) { .event-card .content-figure { display: inline-block; margin-inline: calc(var(--space-unit) * 1); vertical-align: top; } .event-card .content-figure + .content-figure { margin-block-start: calc(var(--space-unit) * 3); } } /* In Event-Cards überschreiben wir die Markdown-img-Margin-Regel, damit die Thumbnails dicht packen. */ .event-card .page-article__body img, .event-card .content-figure img { margin-block: 0; } .page-article__body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } .page-article__body a.cat-card, .page-article__body a.cat-card:hover { text-decoration: none; } /* ─── Referenzen-Liste (Container ":::referenzen") ─── Definition-Liste, paarweise dt/dd in
-Wrappern. Desktop: zwei flowende Spalten (column-count), zarte Trennlinie pro Reihe. Mobile (< 720px): eine Spalte. */ .referenzen { margin-block: calc(var(--space-unit) * 4); font-size: var(--text-sm); line-height: 1.5; column-count: 1; column-gap: calc(var(--space-unit) * 8); column-rule: 1px solid rgba(41, 41, 41, 0.18); } @media (min-width: 720px) { .referenzen { column-count: 2; } } .referenzen > div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: calc(var(--space-unit) * 1); padding-block: calc(var(--space-unit) * 1.25); border-block-end: 1px solid rgba(41, 41, 41, 0.08); break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } .referenzen dt { color: var(--ink-primary); font-weight: 500; } .referenzen dd { margin: 0; color: var(--ink-secondary); font-style: italic; } /* ─── Referenzen: Top-Auswahl + aufklappbare Vollliste ─── Christine-Wunsch (2026-06-03): nicht kuerzen, sondern oben eine kurze Auswahl der staerksten Orte zeigen, darunter die komplette Liste zum Aufklappen. Natives
/ — kein JavaScript noetig, robust gegen den File-Manager-Edit-Workflow. */ .referenzen-more { margin-block: calc(var(--space-unit) * 3); } .referenzen-more__toggle { display: inline-flex; align-items: center; gap: calc(var(--space-unit) * 0.75); cursor: pointer; font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); user-select: none; list-style: none; /* Default-Marker (Firefox) weg */ padding-block: calc(var(--space-unit) * 1); transition: color var(--transition-default); } .referenzen-more__toggle::-webkit-details-marker { display: none; } /* Marker (WebKit/altes Chrome) weg */ .referenzen-more__toggle:hover { color: var(--accent-hover); } /* Chevron rechts neben dem Label — dreht sich beim Aufklappen. */ .referenzen-more__toggle::after { content: ""; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--transition-default); margin-block-end: 0.15em; } .referenzen-more[open] .referenzen-more__toggle::after { transform: rotate(-135deg); } /* "Weitere N Orte anzeigen" <-> "Weniger anzeigen" je nach Zustand. */ .referenzen-more__label-less { display: none; } .referenzen-more[open] .referenzen-more__label-more { display: none; } .referenzen-more[open] .referenzen-more__label-less { display: inline; } @media (prefers-reduced-motion: reduce) { .referenzen-more__toggle::after { transition: none; } } /* ─── Galerie-Übersicht (Category Cards) ─── */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: calc(var(--space-unit) * 4); margin-block: calc(var(--space-unit) * 6); } .cat-card { display: block; min-width: 0; /* Grid-Item schrumpfbar — langer Titel bricht um statt zu ueberlaufen */ background: var(--bg-body); border: 1px solid var(--bg-body); padding: calc(var(--space-unit) * 3); text-decoration: none; color: var(--ink-inverted); transition: transform var(--transition-default), box-shadow var(--transition-default), border-color var(--transition-default); } .cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--accent); } .cat-card__image { aspect-ratio: 3 / 2; overflow: hidden; position: relative; margin-block-end: calc(var(--space-unit) * 2); background: var(--bg-body); } .cat-card__image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .cat-card:hover .cat-card__image img { transform: scale(1.05); } .cat-card__title { font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; margin-block-end: var(--space-unit); letter-spacing: 0.005em; color: var(--ink-inverted); } .cat-card__description { font-size: var(--text-sm); color: rgba(250, 229, 230, 0.75); line-height: 1.5; } /* ─── Galerie-Detail (Bilder-Grid) ─── */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: calc(var(--space-unit) * 2); margin-block: calc(var(--space-unit) * 5); } .gallery__item { display: block; aspect-ratio: 3 / 2; overflow: hidden; position: relative; background: var(--bg-sheet-elevated); transition: transform var(--transition-slow), box-shadow var(--transition-slow); } .gallery__item img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .gallery__item:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); } .gallery__item:hover img { transform: scale(1.03); } /* ─── Sidebar (F5-Random) ─── */ .sidebar { background: var(--bg-sheet-elevated); border: 1px solid var(--rule); padding: calc(var(--space-unit) * 4); position: sticky; top: calc(var(--space-unit) * 4); align-self: start; animation: fadeUp 800ms ease 200ms backwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .sidebar__image-wrap { margin-block-end: calc(var(--space-unit) * 4); overflow: hidden; box-shadow: var(--shadow-soft); background: var(--bg-sheet-elevated); } /* Bild fuellt immer die volle Breite, wird aber bei max. 300px Hoehe gedeckelt: - Querformat (Pool-Standard ~4:3): natuerliche Hoehe < 300px -> kein Crop. - Hochformat: max-height greift, width:100% bleibt definit -> Box wird 100% x 300px, object-fit: cover beschneidet oben/unten statt zu schrumpfen. */ .sidebar__image { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; } .sidebar__quote { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.5; color: var(--ink-primary); margin-block-end: calc(var(--space-unit) * 2); border: 0; padding: 0; } .sidebar__author { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); } .sidebar__refresh { display: inline-block; margin-block-start: calc(var(--space-unit) * 4); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--rule); padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2); transition: color var(--transition-default), border-color var(--transition-default); } .sidebar__refresh:hover { color: var(--accent); border-color: var(--accent); } .sidebar__refresh[aria-busy="true"] { opacity: 0.5; pointer-events: none; } /* ─── Footer ─── */ .site-footer { background: var(--bg-body); color: var(--ink-inverted); padding-block: calc(var(--space-unit) * 6); font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; text-align: center; } .site-footer a { color: rgba(250, 229, 230, 0.7); margin-inline: calc(var(--space-unit) * 1.5); } .site-footer a:hover { color: var(--ink-inverted); } /* ─── PhotoSwipe-Overrides ─── */ .pswp { --pswp-bg: #0F000F; --pswp-placeholder-bg: var(--bg-body); } .pswp__caption { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--ink-inverted); } /* ─── Burger-Toggle (nur Mobile sichtbar) ─── */ /* background dunkellila → sichtbar auf Header UND auf hellem Sheet beim Scroll */ .nav-toggle { display: none; position: absolute; top: calc(var(--space-unit) * 2); right: calc(var(--space-unit) * 2); width: 48px; height: 48px; background: var(--bg-body); border: 0; border-radius: 50%; padding: 12px; cursor: pointer; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-soft); z-index: 25; } .nav-toggle__bar { display: block; width: 100%; height: 2px; background: var(--ink-inverted); border-radius: 1px; transform-origin: center; transition: transform var(--transition-default), opacity var(--transition-default); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(10px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } /* ─── Responsive: Burger + Fullscreen-Overlay (≤1000px) ─── */ @media (max-width: 1000px) { /* Burger einblenden, fixed damit er über dem Overlay sichtbar bleibt */ .nav-toggle { display: flex; position: fixed; z-index: 35; } /* Header kompakter — sobald Burger sichtbar ist, brauchts keine 140px-Inner-Min */ .site-header { overflow: visible; padding-block: calc(var(--space-unit) * 3); } .site-header__inner { min-height: 0; align-items: center; text-align: center; } .site-title-block { align-items: center; } .site-title { font-size: var(--text-2xl); } /* Mobile: Claim raus aus absolute, im Flow direkt unter der Tagline. Kleinere Schrift als Desktop — clamp(), damit der Claim auch auf 320px in eine Zeile passt ohne auf Tablet zu winzig zu werden. */ .header-quote { position: static; text-align: center; font-size: clamp(0.7rem, 3.2vw, 1rem); margin-block-start: calc(var(--space-unit) * 1.5); margin-inline: auto; } /* Nav als Fullscreen-Overlay. Font-Size + Padding mit clamp()/vh, damit 8 Items auf jeder Viewport-Höhe gleichmäßig in eine Spalte passen — kleinere Phones bekommen automatisch kleinere Schrift + engeren Abstand, größere mehr Atmungsraum. */ .site-nav { display: none; position: fixed; inset: 0; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0; padding: clamp(3rem, 8vh, 5rem) calc(var(--space-unit) * 4) clamp(1rem, 3vh, 2rem); background: var(--bg-body); overflow-y: auto; z-index: 30; } .site-nav.is-open { display: flex; animation: navFadeIn 200ms ease; } .site-nav a { font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 3.2vh, 1.5625rem); text-transform: none; letter-spacing: 0.005em; color: var(--ink-inverted); padding: clamp(0.35rem, 0.9vh, 0.75rem) calc(var(--space-unit) * 4); opacity: 1; } .site-nav a:hover, .site-nav a.is-active { color: var(--accent-hover); } .site-nav a.is-active::after { display: none; } } @keyframes navFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Body-Scroll-Lock wenn Overlay offen (Klasse wird von main.js gesetzt) */ body.nav-open { overflow: hidden; } /* ─── Responsive: Mobile (≤760px) — kompaktere Inhalte ─── */ @media (max-width: 760px) { :root { --text-5xl: 2.4414rem; --text-4xl: 1.9531rem; --text-3xl: 1.5625rem; } /* (Header-Kompaktierung läuft schon im ≤1000px-Block) */ /* Container Padding reduzieren */ .container { padding-inline: calc(var(--space-unit) * 3); } /* Vertikale Rhythmik fuers Handy nachziehen — sonst stapeln sich die Desktop-Paddings (.sheet>.container 48 + .page-grid 48 = 96px Leerraum oben) unveraendert und erzeugen zu viel Abstand + zu langes Scrollen. */ .sheet > .container { padding-block: calc(var(--space-unit) * 3); } /* 48 -> 24 */ .page-grid { padding-block: calc(var(--space-unit) * 2); /* 48 -> 16 (Summe oben 96 -> 40) */ gap: calc(var(--space-unit) * 4); /* 48 -> 32 (Content<->Sidebar) */ } h2 { margin-block-start: calc(var(--space-unit) * 4); } /* 48 -> 32 */ body { line-height: 1.6; } /* 1.7 -> 1.6 */ /* Bogen deutlich kleiner — er soll nicht dominieren */ .body-arc { width: clamp(100px, 28vw, 160px); } /* Hero-Door auf Mobile: kompakter, Hairlines kürzer. Layout (vertikal, zentriert) bleibt gleich — clamps regeln den Rest. */ .hero-door { padding-block: clamp(1.8rem, 6vw, 2.6rem); gap: clamp(0.8rem, 2.5vw, 1.2rem); } .hero-door::before, .hero-door::after { width: clamp(44px, 12vw, 70px); } .page-article__title { font-size: var(--text-3xl); } /* Sidebar — bei mobile static, weniger Padding, kein sticky. Kein Viewport-Deckel mehr: die Box darf laenger als der Screen werden und fliesst natuerlich (User-Vorgabe 2026-06-03). Das Zitat scrollt NICHT mehr innerhalb der Box — es steht vollstaendig da, auch die langen Zitate (22/23). Gedeckelt wird nur noch das Bild (max-height: 300px, siehe Basis-Regel). */ .sidebar { position: static; padding: calc(var(--space-unit) * 3); } /* Zitat-Schrift bleibt am Handy gleich gross wie am Desktop (--text-lg) — kein Verkleinern mehr, da die Box ohne Viewport-Deckel beliebig hoch werden darf und nichts mehr in einen festen Rahmen passen muss. */ .sidebar__refresh { width: 100%; text-align: center; } /* Event-Cards mit weniger Padding */ .event-card { padding: calc(var(--space-unit) * 3); margin-block: calc(var(--space-unit) * 4); } /* Cat-Cards eine Spalte */ .cat-grid { grid-template-columns: 1fr; gap: calc(var(--space-unit) * 3); } /* Galerie 2-spaltig */ .gallery { grid-template-columns: repeat(2, 1fr); gap: var(--space-unit); margin-block: calc(var(--space-unit) * 3); } /* Footer untereinander */ .site-footer .container { display: flex; flex-direction: column; gap: calc(var(--space-unit) * 1); text-align: center; } } /* ─── Responsive: sehr kleine Smartphones (≤420px) ─── */ @media (max-width: 420px) { .site-title { font-size: var(--text-xl); } .site-tagline { font-size: 0.7rem; } .body-arc { width: 90px; } .container { padding-inline: calc(var(--space-unit) * 2); } .event-card { padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3); } /* Galerien bleiben 2-spaltig — kein Kollaps auf 1 Spalte, damit Foto-Thumbnails auf gaengigen Phones (390px) nicht volle Breite und damit "zu gross" werden. */ .gallery { grid-template-columns: repeat(2, 1fr); } }