/* ---------- Tokens ---------- */ :root { --color-bg: #ffffff; --color-text: #1a1a1a; --color-muted: #6b6b6b; --color-line: rgba(26, 26, 26, 0.08); --color-placeholder: #f0f0f0; --color-card-accent: #f4f3ef; --color-backdrop: rgba(0, 0, 0, 0.4); color-scheme: light; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sidebar-width: 17rem; --menu-width: min(75vw, 22rem); --main-pad-mobile: clamp(0.75rem, 3vw, 1.5rem); --main-pad-desktop: clamp(1.75rem, 3vw, 2.5rem); --gallery-gap-mobile: 6px; --gallery-gap-tablet: 10px; --gallery-gap-desktop: 12px; --header-h-mobile: 3.5rem; --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Dark theme — explicit user choice (via data-theme attribut auf ) */ [data-theme="dark"] { --color-bg: #0e0e0e; --color-text: #ededed; --color-muted: #8f8f8f; --color-line: rgba(237, 237, 237, 0.10); --color-placeholder: #1c1c1c; --color-card-accent: #161616; --color-backdrop: rgba(0, 0, 0, 0.6); color-scheme: dark; } /* System-Default fuer User die nie geklickt haben */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-bg: #0e0e0e; --color-text: #ededed; --color-muted: #8f8f8f; --color-line: rgba(237, 237, 237, 0.10); --color-placeholder: #1c1c1c; --color-card-accent: #161616; --color-backdrop: rgba(0, 0, 0, 0.6); color-scheme: dark; } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; } body { font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, li { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ---------- Utilities ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .anchor-target { display: block; height: 0; width: 0; overflow: hidden; scroll-margin-top: 5rem; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-text); color: var(--color-bg); padding: 0.5rem 1rem; font-size: 0.875rem; z-index: 1000; } .skip-link:focus { left: 1rem; top: 1rem; } /* ---------- Layout-Wrapper ---------- */ .layout-wrapper { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-bg); transition: transform var(--transition); will-change: transform; } /* ---------- Off-Canvas (Mobile) ---------- */ .offcanvas-menu { position: fixed; top: 0; left: 0; width: var(--menu-width); height: 100vh; height: 100dvh; background-color: var(--color-bg); border-right: 1px solid var(--color-line); z-index: 100; display: flex; flex-direction: column; padding: 1rem 1.5rem 1.5rem; transform: translateX(-100%); transition: transform var(--transition); will-change: transform; } .offcanvas-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-line); } .offcanvas-brand { display: inline-flex; align-items: center; } .menu-close { width: 2.5rem; height: 2.5rem; margin: -0.5rem -0.5rem -0.5rem 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); transition: opacity 0.2s ease; } .menu-close:hover, .menu-close:focus-visible { opacity: 0.55; } .menu-close svg { width: 18px; height: 18px; display: block; } .offcanvas-nav { display: flex; flex-direction: column; gap: 0.25rem; } .offcanvas-nav a { font-size: 0.84rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.75rem 0; transition: opacity 0.2s ease; } .offcanvas-nav a:hover, .offcanvas-nav a:focus-visible { opacity: 0.55; } .secondary-nav { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; } .secondary-nav a { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; padding: 0.3rem 0; transition: opacity 0.2s ease, color 0.2s ease; } .secondary-nav a:hover, .secondary-nav a:focus-visible { color: var(--color-text); } .secondary-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; color: var(--color-text); } .offcanvas-meta { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); padding-top: 0.75rem; } .offcanvas-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-backdrop); z-index: 99; opacity: 0; pointer-events: none; transition: opacity var(--transition); } /* ---------- Open State (Mobile) ---------- */ body.menu-open { overflow: hidden; touch-action: none; } body.menu-open .offcanvas-menu { transform: translateX(0); } body.menu-open .offcanvas-menu[aria-hidden="false"] { /* aria-hidden=false setzt JS beim Oeffnen */ } body.menu-open .offcanvas-backdrop { opacity: 1; pointer-events: auto; } body.menu-open .layout-wrapper { transform: translateX(var(--menu-width)); } /* ---------- Header (Mobile) ---------- */ .site-header { position: sticky; top: 0; z-index: 5; background-color: var(--color-bg); border-bottom: 1px solid var(--color-line); padding: 0.875rem var(--main-pad-mobile); } .header-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 1.75rem; } .brand, .offcanvas-brand { display: inline-flex; align-items: center; font-family: var(--font-sans); font-weight: 300; font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-text); white-space: nowrap; line-height: 1; } @media (min-width: 768px) { .brand, .offcanvas-brand { font-size: 0.85rem; letter-spacing: 0.26em; } } .menu-toggle { width: 2.5rem; height: 2.5rem; margin: -0.5rem; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); transition: opacity 0.2s ease; } .menu-toggle:hover, .menu-toggle:focus-visible { opacity: 0.55; } .menu-toggle .icon-burger { width: 22px; height: 16px; display: block; } .sidebar-nav, .sidebar-secondary, .sidebar-foot { display: none; } /* ---------- Main + Gallery (Mobile) ---------- */ main { padding: var(--main-pad-mobile); min-width: 0; } /* Home-Galerie: CSS-Columns Masonry — Hoch- und Querformate fliessen natuerlich. Reading-Order ist spaltenweise (top-to-bottom, dann naechste Spalte). */ .gallery { column-count: 2; column-gap: var(--gallery-gap-mobile); } .gallery figure { margin: 0 0 var(--gallery-gap-mobile); break-inside: avoid; -webkit-column-break-inside: avoid; background-color: var(--color-placeholder); overflow: hidden; } .gallery figure a.lightbox-trigger { display: block; cursor: zoom-in; outline-offset: 2px; } .gallery figure img { width: 100%; height: auto; background-color: var(--color-placeholder); color: transparent; transition: opacity 0.3s ease; } .gallery figure:hover img, .gallery figure:focus-within img { opacity: 0.92; } /* ---------- Lightbox ---------- */ .lightbox { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.94); z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2.5rem); } .lightbox[data-open="true"] { display: flex; } .lightbox-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; background-color: transparent; } .lightbox-btn { position: absolute; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; opacity: 0.75; transition: opacity 0.2s ease; z-index: 1; } .lightbox-btn:hover, .lightbox-btn:focus-visible { opacity: 1; } .lightbox-btn svg { width: 26px; height: 26px; display: block; } .lightbox-close { top: 1rem; right: 1rem; } .lightbox-prev { top: 50%; left: 0.5rem; transform: translateY(-50%); } .lightbox-next { top: 50%; right: 0.5rem; transform: translateY(-50%); } @media (min-width: 768px) { .lightbox-prev { left: 1.5rem; } .lightbox-next { right: 1.5rem; } .lightbox-close { top: 1.5rem; right: 1.5rem; } } .lightbox-btn:disabled { opacity: 0.2; cursor: not-allowed; } body.lightbox-open { overflow: hidden; } /* Pinch-Zoom in der Lightbox auf Mobile erlauben */ .lightbox, .lightbox-img { touch-action: pinch-zoom; } /* ---------- Tablet / Desktop ab 768px ---------- */ @media (min-width: 768px) { html, body { overflow-x: visible; } body.menu-open { overflow: visible; touch-action: auto; } /* Off-Canvas und Backdrop deaktivieren */ .offcanvas-menu, .offcanvas-backdrop { display: none !important; } body.menu-open .layout-wrapper { transform: none !important; } .layout-wrapper { flex-direction: row; transform: none !important; } .site-header { position: sticky; top: 0; align-self: flex-start; width: var(--sidebar-width); height: 100vh; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.75rem; padding: 2rem 1.5rem; border-bottom: none; border-right: 1px solid var(--color-line); } .header-top { justify-content: flex-start; width: 100%; } .menu-toggle { display: none; } .sidebar-nav { display: flex; flex-direction: column; gap: 0.6rem; } .sidebar-nav a { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.25rem 0; transition: opacity 0.2s ease; } .sidebar-nav a:hover, .sidebar-nav a:focus-visible { opacity: 0.55; } .sidebar-secondary { display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; padding-top: 1.5rem; } .sidebar-secondary a { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; padding: 0.2rem 0; transition: color 0.2s ease; } .sidebar-secondary a:hover, .sidebar-secondary a:focus-visible { color: var(--color-text); } .sidebar-secondary a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; color: var(--color-text); } .sidebar-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; } .header-meta { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); margin: 0; } main { flex: 1; padding: 2rem var(--main-pad-desktop); } .gallery { column-gap: var(--gallery-gap-tablet); } .gallery figure { margin-bottom: var(--gallery-gap-tablet); } } /* ---------- Large Desktop ab 1200px ---------- */ @media (min-width: 1200px) { .gallery { column-count: 3; column-gap: var(--gallery-gap-desktop); } .gallery figure { margin-bottom: var(--gallery-gap-desktop); } } /* ---------- Active Nav-Page Indicator ---------- */ .sidebar-nav a[aria-current="page"], .offcanvas-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; } /* ---------- Legal-Pages (Impressum, Datenschutz) ---------- */ .legal-page { max-width: 44rem; margin: 0 auto; padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2rem, 5vw, 4rem); font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.7; color: var(--color-text); } .legal-page .detail-headline { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: 0.16em; } .legal-intro { font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--color-muted); margin-bottom: clamp(2rem, 4vw, 3rem); line-height: 1.6; } .legal-block { margin-bottom: clamp(2rem, 4vw, 2.75rem); padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); border-bottom: 1px solid var(--color-line); } .legal-block:last-of-type { border-bottom: none; padding-bottom: 0; } .legal-block h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: 0.005em; line-height: 1.3; margin: 0 0 1rem; color: var(--color-text); } .legal-block p { margin: 0 0 0.85rem; } .legal-block p:last-child { margin-bottom: 0; } .legal-block a { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: opacity 0.2s ease; } .legal-block a:hover, .legal-block a:focus-visible { opacity: 0.55; } /* Bullet-Listen: globalen li-Reset gezielt ueberschreiben */ .legal-list { list-style: disc outside; padding-left: 1.5rem; margin: 0.75rem 0 1.1rem; } .legal-list > li { list-style: disc; margin-bottom: 0.45rem; padding-left: 0.25rem; } .legal-list > li:last-child { margin-bottom: 0; } .legal-disclaimer { font-size: 0.82rem; color: var(--color-muted); border-top: 1px solid var(--color-line); padding-top: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); line-height: 1.5; font-style: italic; } /* ---------- Detail-Next (unten rechts, Pfeil + naechste Seite) ---------- */ .detail-next { display: flex; justify-content: flex-end; margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1rem, 2vw, 1.5rem); border-top: 1px solid var(--color-line); } .detail-next a { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-sans); font-weight: 400; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text); text-decoration: none; padding: 0.5rem 0; transition: opacity 0.2s ease, transform 0.2s ease; } .detail-next a:hover, .detail-next a:focus-visible { opacity: 0.55; } .detail-next a:hover .detail-next-arrow, .detail-next a:focus-visible .detail-next-arrow { transform: translateX(4px); } .detail-next-arrow { width: 1.4rem; height: 1.4rem; display: block; transition: transform 0.25s ease; } /* ---------- Detail-Headline (Portrait- & Travel-Detailseiten) ---------- */ .detail-headline { font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.25rem, 2.5vw, 1.7rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text); margin: 1rem 0 1.25rem; line-height: 1.1; } @media (min-width: 768px) { .detail-headline { margin: 0 0 1.25rem; } } /* ---------- Portrait-Detail-Galerie (3 cols mobile, 4 cols ≥1000px) ---------- */ .gallery-portrait { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } @media (min-width: 1000px) { .gallery-portrait { grid-template-columns: repeat(4, 1fr); gap: 8px; } } .gallery-portrait figure { margin: 0; background-color: var(--color-placeholder); overflow: hidden; } .gallery-portrait figure a.lightbox-trigger { display: block; cursor: zoom-in; outline-offset: 2px; } .gallery-portrait figure img { width: 100%; height: auto; background-color: var(--color-placeholder); color: transparent; transition: opacity 0.3s ease; } .gallery-portrait figure:hover img, .gallery-portrait figure:focus-within img { opacity: 0.92; } /* ---------- Mosaik-Galerie fuer gemischte Bildformate (Masonry via CSS-Spalten) ---------- */ .gallery-mosaic { column-count: 3; column-gap: 6px; } @media (min-width: 1000px) { .gallery-mosaic { column-count: 4; column-gap: 8px; } } .gallery-mosaic figure { margin: 0 0 6px; break-inside: avoid; -webkit-column-break-inside: avoid; background-color: var(--color-placeholder); overflow: hidden; } @media (min-width: 1000px) { .gallery-mosaic figure { margin-bottom: 8px; } } .gallery-mosaic figure a.lightbox-trigger { display: block; cursor: zoom-in; outline-offset: 2px; } .gallery-mosaic figure img { width: 100%; height: auto; background-color: var(--color-placeholder); color: transparent; transition: opacity 0.3s ease; } .gallery-mosaic figure:hover img, .gallery-mosaic figure:focus-within img { opacity: 0.92; } /* ---------- Portraits-Liste ---------- */ .portraits-section { margin: 0; } .portraits-list { display: grid; grid-template-columns: 1fr; gap: 0; list-style: none; padding: 0; margin: 0; } @media (min-width: 540px) { .portraits-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px) { .portraits-list { grid-template-columns: repeat(4, 1fr); } } .portrait-card { position: relative; display: block; overflow: hidden; background-color: var(--color-placeholder); aspect-ratio: 4 / 3; cursor: pointer; text-decoration: none; color: inherit; outline-offset: 2px; } .portrait-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background-color: var(--color-placeholder); color: transparent; filter: brightness(0.55); transition: filter 0.45s ease, transform 0.5s ease; } /* Modifier: leichter Top-Crop (10%) und mehr Platz unten (~30% vom Bild bleibt im Bottom-Bereich) */ .portrait-card--top img { object-position: center 25%; } .portrait-card-title { position: absolute; top: 1.75rem; left: 1.75rem; color: #ffffff; font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: 0.03em; line-height: 1.1; opacity: 1; transform: translateY(0); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .portrait-card:hover img, .portrait-card:focus-visible img { filter: brightness(1); } .portrait-card:hover .portrait-card-title, .portrait-card:focus-visible .portrait-card-title { opacity: 0; transform: translateY(-4px); } /* ---------- Travel-Liste (analog zu Portraits, gleiche Logik) ---------- */ .travel-section { margin: 0; } .travel-list { display: grid; grid-template-columns: 1fr; gap: 0; list-style: none; padding: 0; margin: 0; } @media (min-width: 540px) { .travel-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px) { .travel-list { grid-template-columns: repeat(4, 1fr); } } .travel-card { position: relative; display: block; overflow: hidden; background-color: var(--color-placeholder); aspect-ratio: 4 / 3; cursor: pointer; text-decoration: none; color: inherit; outline-offset: 2px; } .travel-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background-color: var(--color-placeholder); color: transparent; filter: brightness(0.55); transition: filter 0.45s ease, transform 0.5s ease; } .travel-card-title { position: absolute; top: 1.75rem; left: 1.75rem; color: #ffffff; font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: 0.03em; line-height: 1.1; opacity: 1; transform: translateY(0); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .travel-card:hover img, .travel-card:focus-visible img { filter: brightness(1); } .travel-card:hover .travel-card-title, .travel-card:focus-visible .travel-card-title { opacity: 0; transform: translateY(-4px); } /* ---------- About-Page ---------- */ .about-page { max-width: 78rem; margin: 0 auto; } .about-hero { display: flex; flex-direction: column; gap: 0; margin-bottom: clamp(2rem, 5vw, 4rem); } .about-image { margin: 0; background-color: var(--color-placeholder); overflow: hidden; width: 100%; } .about-image img { width: 100%; height: auto; display: block; background-color: var(--color-placeholder); color: transparent; } .about-text { background-color: var(--color-card-accent); padding: clamp(1.5rem, 4vw, 2.75rem); margin: -2.5rem 0.75rem 0; position: relative; z-index: 2; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.04); } .about-headline { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1.25rem; } .about-text p { font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.65; margin-bottom: 1rem; font-weight: 300; } .about-text p:last-child { margin-bottom: 0; } .about-quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.4; margin: 1.25rem 0 1.5rem; padding-left: 1rem; border-left: 2px solid var(--color-text); color: var(--color-text); } @media (min-width: 1100px) { .about-hero { display: block; position: relative; margin-bottom: clamp(3rem, 6vw, 5rem); } .about-image { width: 80%; margin: 0; } .about-text { position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin: 0; width: 46%; max-width: 26rem; padding: clamp(1.25rem, 2.2vw, 1.85rem); box-shadow: 0 10px 36px rgba(0, 0, 0, 0.08); } .about-headline { font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin-bottom: 0.9rem; } .about-text p { font-size: clamp(0.88rem, 1.1vw, 0.95rem); line-height: 1.55; margin-bottom: 0.7rem; } .about-quote { font-size: clamp(1rem, 1.4vw, 1.1rem); margin: 0.9rem 0 1rem; padding-left: 0.85rem; } } @media (min-width: 1200px) { .about-image { width: 75%; } .about-text { width: 42%; max-width: 28rem; } } /* ---------- About Instagram-Embed (LightWidget) ---------- */ .instagram-embed { margin: 0 auto; width: 100%; } .lightwidget-widget { width: 100%; border: 0; overflow: hidden; display: block; background: transparent; background-color: transparent; color-scheme: light dark; /* iframe darf OS-Dark-Mode-Preference durchreichen */ } /* ---------- Instagram-Button ---------- */ .about-actions { text-align: center; margin: clamp(2rem, 5vw, 3.5rem) 0; } .btn-instagram { display: inline-block; padding: 0.9rem 2rem; border: 1px solid var(--color-text); background-color: transparent; color: var(--color-text); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease; } .btn-instagram:hover, .btn-instagram:focus-visible { background-color: var(--color-text); color: var(--color-bg); } /* ---------- Instagram-Grid-Placeholder ---------- */ .instagram-section { margin-bottom: clamp(2rem, 4vw, 3rem); } .instagram-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } @media (min-width: 600px) { .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } } @media (min-width: 900px) { .instagram-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1200px) { .instagram-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; } } .insta-tile { display: block; aspect-ratio: 1 / 1; background-color: var(--color-placeholder); overflow: hidden; transition: opacity 0.2s ease; } .insta-tile img { width: 100%; height: 100%; object-fit: cover; display: block; background-color: var(--color-placeholder); color: transparent; } .insta-tile:hover, .insta-tile:focus-visible { opacity: 0.7; } /* ---------- Focus, reduced motion ---------- */ :focus-visible { outline: 1px solid var(--color-text); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ---------- Footer-Row (© + Theme-Toggle inline) ---------- */ .offcanvas-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; } .offcanvas-foot .offcanvas-meta { padding-top: 0; } /* ---------- Theme-Toggle (Day/Night-Pill mit Icon im Thumb) ---------- */ .theme-toggle { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; color: var(--color-muted); flex-shrink: 0; font: inherit; transition: color 0.2s ease; } .theme-toggle:focus-visible { outline: 2px solid var(--color-text); outline-offset: 4px; border-radius: 999px; } .theme-toggle-track { position: relative; display: inline-flex; align-items: center; width: 3.9rem; height: 1.2rem; border-radius: 999px; background: var(--color-line); border: 1px solid var(--color-line); transition: background 0.25s ease, border-color 0.25s ease; } .theme-toggle-label { position: absolute; font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text); pointer-events: none; white-space: nowrap; transition: color 0.25s ease; } .theme-toggle-label--day { left: 0.45rem; } .theme-toggle-label--night { right: 0.45rem; display: none; } .theme-toggle[aria-pressed="true"] .theme-toggle-label--day { display: none; } .theme-toggle[aria-pressed="true"] .theme-toggle-label--night { display: inline; } /* Dark-State: Track invertiert (entspricht der Vorlage) */ .theme-toggle[aria-pressed="true"] .theme-toggle-track { background: var(--color-text); border-color: var(--color-text); } .theme-toggle[aria-pressed="true"] .theme-toggle-label--night { color: var(--color-bg); } .theme-toggle-thumb { position: absolute; top: 50%; left: calc(100% - 1.05rem); /* DAY: Thumb rechts */ width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-text); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease, border-color 0.25s ease; } .theme-toggle[aria-pressed="true"] .theme-toggle-thumb { left: 0.07rem; /* NIGHT: Thumb links */ } .theme-toggle-icon { width: 0.62rem; height: 0.62rem; color: var(--color-text); display: none; } .theme-toggle[aria-pressed="false"] .theme-toggle-icon--sun { display: block; } .theme-toggle[aria-pressed="true"] .theme-toggle-icon--moon { display: block; } /* ---------- Floating Menu Button (FAB) — Mobile only ---------- */ .menu-fab { position: fixed; top: 1rem; left: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background-color: var(--color-bg); border: 0; color: var(--color-text); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 50; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(-20px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease; } .menu-fab.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .menu-fab:hover, .menu-fab:focus-visible { background-color: var(--color-card-accent); } .menu-fab svg { width: 20px; height: 14px; display: block; } /* Wenn Off-Canvas-Menue offen ist: FAB ausblenden */ body.menu-open .menu-fab { opacity: 0; pointer-events: none; } /* Auf Tablet/Desktop (>= 768px) ausblenden — da ist Sidebar-Nav sichtbar */ @media (min-width: 768px) { .menu-fab { display: none; } } /* ---------- Kontakt-Modal ---------- */ .contact-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2rem); opacity: 0; pointer-events: none; transition: opacity var(--transition); } body.contact-open { overflow: hidden; } body.contact-open .contact-modal { opacity: 1; pointer-events: auto; } .contact-modal__backdrop { position: absolute; inset: 0; background-color: var(--color-backdrop); } .contact-modal__card { position: relative; width: min(100%, 32rem); max-height: 90vh; max-height: 90dvh; overflow-y: auto; background-color: var(--color-bg); border: 1px solid var(--color-line); border-radius: 2px; padding: clamp(1.5rem, 5vw, 2.5rem); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); transform: translateY(8px); transition: transform var(--transition); } body.contact-open .contact-modal__card { transform: translateY(0); } .contact-modal__close { position: absolute; top: 0.85rem; right: 0.85rem; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); transition: opacity 0.2s ease; } .contact-modal__close:hover, .contact-modal__close:focus-visible { opacity: 0.55; } .contact-modal__close svg { width: 18px; height: 18px; display: block; } .contact-modal__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 2.5vw, 1.8rem); letter-spacing: 0.06em; margin: 0 0 1.5rem; color: var(--color-text); } /* ---------- Kontakt-Formular ---------- */ .contact-form { display: flex; flex-direction: column; gap: 1rem; } .contact-status { font-size: 0.82rem; line-height: 1.5; color: var(--color-muted); margin: 0; min-height: 1.2em; } .contact-status[data-state="success"] { color: var(--color-text); } .contact-status[data-state="error"] { color: #c0392b; } /* Honeypot — visuell + fuer Screenreader entfernt, im DOM nur fuer Bots */ .contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-row { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 480px) { .contact-row { grid-template-columns: 1fr 1fr; } } .contact-field { display: flex; flex-direction: column; gap: 0.35rem; } .contact-field label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); } .contact-optional { text-transform: none; letter-spacing: 0; opacity: 0.7; } .contact-field input, .contact-field textarea { width: 100%; font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-text); background-color: transparent; border: 1px solid var(--color-line); border-radius: 2px; padding: 0.65rem 0.75rem; transition: border-color 0.2s ease; } .contact-field input:focus, .contact-field textarea:focus { border-color: var(--color-text); } .contact-field textarea { resize: vertical; min-height: 6rem; } .contact-submit { margin-top: 0.5rem; align-self: flex-start; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-bg); background-color: var(--color-text); border: 1px solid var(--color-text); border-radius: 2px; padding: 0.7rem 1.4rem; cursor: pointer; transition: opacity 0.2s ease; } .contact-submit:hover, .contact-submit:focus-visible { opacity: 0.8; } .contact-submit:disabled { opacity: 0.4; cursor: not-allowed; } /* ---------- Bestaetigungs-Toast (Kontaktformular) ---------- */ /* Horizontale Zentrierung ueber margin:auto (nicht transform), damit transform frei fuer die Einblend-Animation bleibt. Dark Mode via CSS-Variablen. */ .toast { position: fixed; bottom: 1.5rem; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: 22rem; z-index: 400; background-color: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-line); border-radius: 2px; padding: 0.85rem 1.15rem; font-size: 0.9rem; line-height: 1.5; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); opacity: 0; transform: translateY(12px); pointer-events: none; cursor: pointer; transition: opacity var(--transition), transform var(--transition); } .toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (max-width: 767px) { .toast { bottom: auto; top: 1.25rem; left: 1rem; right: 1rem; margin: 0; width: auto; max-width: none; transform: translateY(-12px); } .toast.is-visible { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .toast { transform: none; transition: opacity var(--transition); } .toast.is-visible { transform: none; } }