denny/desfoto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: launch desfoto.de as a standalone photography site and retire the old redirect

Browse Source
This commit is contained in:
opencode
2026-09-19 16:02:16 +02:00
commit 160ec017eb
218 changed files with 7518 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/content.py Normal file
View File

@@ -0,0 +1,250 @@
"""Editorial content for desfoto.de.
All facts here are either verified from the operator's own live legal pages
(Impressum/Datenschutz) or are neutral descriptions of the offered services.
No prices, testimonials, client logos or biographical dates are invented.
"""
from __future__ import annotations
SITE = {
"brand": "desfoto",
"domain": "desfoto.de",
"url": "https://desfoto.de",
"claim": "Fotografie & Video",
"tagline": "Fotografie und Video aus Neumünster",
"locale": "de_DE",
"language": "de",
"theme_color": "#17140F",
"default_description": (
"desfoto ist die Foto- und Videoproduktion von Denny Schulz aus Neumünster: "
"Businessfotografie, Portraits, Model- und Familienaufnahmen, Minishootings, "
"Videoprojekte und Social-Media-Inhalte."
),
"keywords": (
"Fotograf Neumünster, Videograf Neumünster, Businessfotografie, Businessportrait, "
"Model-Shooting, Familienfotograf, Minishooting, Musikvideo, Social Media Inhalte, "
"Schleswig-Holstein"
),
}
CONTACT = {
"email": "info@dennyschulz.de",
"phone": "+49 175 4083133",
"phone_href": "+491754083133",
"region": "Neumünster · Schleswig-Holstein",
"response": "Antwort in der Regel innerhalb von 24 Stunden",
}
# Verified operator data (from the operator's own live Impressum, § 5 DDG).
LEGAL = {
"business": "Denny Schulz Fotografie",
"owner": "Denny Schulz",
"street": "Flensburger Str. 16",
"city": "24537 Neumünster",
"country": "Deutschland",
"vat_note": "Es wird gemäß § 19 UStG keine Umsatzsteuer berechnet.",
"w_id": "DE462149560",
"authority": "Unabhängiges Landeszentrum für Datenschutz Schleswig-Holstein",
"authority_street": "Holstenstraße 98",
"authority_city": "24103 Kiel",
"authority_web": "https://www.datenschutzzentrum.de",
"imprint_updated": "September 2026",
"privacy_updated": "September 2026",
}
VIDEO = {
"id": "NWWFTf7l8g0",
"title": "Thjódrörir – Skogamor (Official Video)",
"artist": "Thjódrörir",
"kind": "Musikvideo",
"poster": "video-skogamor-poster.jpg",
"description": (
"Eigenes Musikvideo für Thjódrörir: Konzept, Dreh, Schnitt und Farbkorrektur "
"aus einer Hand."
),
}
NAV = [
{
"label": "Fotografie",
"href": "/fotografie/",
"children": [
("Businessfotografie", "/businessfotografie/"),
("Portrait & Model", "/portrait-und-model/"),
("Familien & Paare", "/familien-und-paare/"),
("Minishootings", "/minishootings/"),
],
},
{"label": "Video", "href": "/video/"},
{"label": "Social Media", "href": "/social-media/"},
{"label": "Projekte", "href": "/projekte/"},
{"label": "Über", "href": "/ueber/"},
]
SERVICES = [
{
"slug": "businessfotografie",
"href": "/businessfotografie/",
"title": "Businessfotografie",
"short": (
"Portraits, Teams und Produkte für Website, LinkedIn, Kampagne und Presse — "
"sauber ausgeleuchtet und sofort einsetzbar."
),
"image": "business-portrait-studio",
"alt_override": None,
"fit": "50% 30%",
},
{
"slug": "portrait-und-model",
"href": "/portrait-und-model/",
"title": "Portrait & Model",
"short": (
"Portraits, Sedcards, Editorial und Fashion. Im Studio in Neumünster "
"oder an einem Ort, der zu dir und deiner Geschichte passt."
),
"image": "editorial-colour",
"fit": "50% 30%",
},
{
"slug": "familien-und-paare",
"href": "/familien-und-paare/",
"title": "Familien & Paare",
"short": (
"Familienshootings und Paarportraits, die nicht gestellt wirken. "
"Zeit lassen, mitgehen, im richtigen Moment auslösen."
),
"image": "people-joy",
"fit": "50% 30%",
},
{
"slug": "minishootings",
"href": "/minishootings/",
"title": "Minishootings",
"short": (
"Die kurze Session für alle, die schnell ein gutes Bild brauchen: "
"klarer Ablauf, kleine Auswahl, kurze Lieferzeit."
),
"image": "portrait-natural",
"fit": "50% 30%",
},
{
"slug": "video",
"href": "/video/",
"title": "Videoprojekte",
"short": (
"Musikvideo, Imagefilm, Recruiting und Eventnachbericht — von der Idee "
"über den Dreh bis zum fertigen Schnitt."
),
"image": "studio-lens",
"fit": "50% 45%",
},
{
"slug": "social-media",
"href": "/social-media/",
"title": "Social-Media-Inhalte",
"short": (
"Foto- und Videocontent im Format deiner Kanäle — wiederkehrend, planbar "
"und über die Monate hinweg einheitlich."
),
"image": "event-motion",
"fit": "50% 45%",
},
]
# Fotografie-Uebersicht
PHOTO_OVERVIEW = [
{
"title": "Menschen",
"text": (
"Portraits, Sedcards, Bewerbungsbilder und Familienaufnahmen. "
"Wir arbeiten mit Licht, das zu dir passt — nicht mit dem Standardschema."
),
"image": "editorial-pose",
},
{
"title": "Marken & Unternehmen",
"text": (
"Team-, Standort- und Produktbilder, die auf Website, Kampagne und in "
"Stellenanzeigen funktionieren."
),
"image": "business-portrait-sit",
},
{
"title": "Anlässe",
"text": (
"Feiern, Events, Vereinsleben und Premieren. Dokumentarisch begleitet, "
"ohne den Ablauf auszubremsen."
),
"image": "event-dance",
},
]
WORK_GALLERY = [
("editorial-pose", "Model-Shooting im Studio", "g-w3", "4x5", "50% 28%"),
("travel-norway-pano", "Norwegen — Panorama", "g-w3", "4x5", "50% 50%"),
("people-forest", "Paarportrait im Wald", "g-w2", "1x1", "50% 26%"),
("editorial-back", "Editorial — Detail", "g-w2", "1x1", "50% 40%"),
("group-outdoor", "Feier im Freien", "g-w2", "1x1", "50% 36%"),
("movement-light", "Lichtspur aus langer Belichtung", "g-w3", "3x2", "50% 50%"),
("business-portrait-dark", "Businessportrait im Studiolicht", "g-w3", "3x2", "50% 30%"),
]
PROCESS = [
{
"title": "Anfrage",
"text": (
"Du schreibst kurz, worum es geht. Ich melde mich mit einer ehrlichen "
"Einschätzung, einem Ablauf und einem Preis."
),
},
{
"title": "Planung",
"text": (
"Wir klären Ort, Licht, Zeit und Bildidee. Bei größeren Produktionen "
"gibt es vorab ein Moodboard oder ein Treatment."
),
},
{
"title": "Dreh",
"text": (
"Am Termin übernehme ich Technik, Licht und Regie. Du musst nichts "
"mitbringen außer Zeit und dich."
),
},
{
"title": "Lieferung",
"text": (
"Du bekommst eine Auswahlgalerie, bearbeitete Dateien in Web- und "
"Druckgröße und bei Video das passende Exportformat für deinen Kanal."
),
},
]
FACTS = [
{
"title": "Aus Neumünster",
"text": "Zuhause zwischen Kiel und Hamburg — unterwegs in Schleswig-Holstein und darüber hinaus.",
},
{
"title": "Foto und Video",
"text": "Ein Ansprechpartner für Bild und Bewegtbild. Das spart Abstimmung und hält die Optik zusammen.",
},
{
"title": "Klarer Ablauf",
"text": "Umfang, Termin und Preis klären wir vor der Buchung. Keine Überraschungen auf der Rechnung.",
},
{
"title": "Schnelle Lieferung",
"text": "Kleine Aufträge bekommst du meist innerhalb weniger Tage, größere Projekte nach Absprache.",
},
]
FOCUS_ITEMS = [
("Businessfotografie", "/businessfotografie/"),
("Portrait & Model", "/portrait-und-model/"),
("Familien & Paare", "/familien-und-paare/"),
("Minishootings", "/minishootings/"),
("Videoprojekte", "/video/"),
("Social Media", "/social-media/"),
]

210
src/images.json Normal file
View File

@@ -0,0 +1,210 @@
{
"_comment": "Quellbilder aus dem eigenen Bilderpool (Orgatool-Volume business-suite_app_data/website). 'slug' wird zum Dateinamen der Auslieferungsderivate. 'alt' ist die redaktionelle Bildbeschreibung fuer Alternativtexte. 'raw' ist der Pfad im Pool.",
"pool_base": "https://orga.dennyschulz.de/api/website/media/files",
"images": [
{
"slug": "hero-studio",
"raw": "Studio/1777027118997_1b1a51a6_dennyschulz_-07282.jpg",
"alt": "Hand an einer Kamera im Studio bei violettem Licht",
"focus": "50% 45%"
},
{
"slug": "studio-lens",
"raw": "Studio/1777027118366_91e2a99d_dennyschulz_-07285.jpg",
"alt": "Kameraobjektiv im Studiolicht",
"focus": "50% 50%"
},
{
"slug": "studio-setup",
"raw": "Studio/1777027120196_c501de64_dennyschulz_-05467.jpg",
"alt": "Studioequipment mit Logo von Denny Schulz Fotografie",
"focus": "50% 50%"
},
{
"slug": "gear-cases",
"raw": "1778949186414_b1648d20_dennyschulz_-05400-2.jpg",
"alt": "Kamerakoffer und Objektive vor einem Studiorack",
"focus": "50% 50%"
},
{
"slug": "business-portrait-studio",
"raw": "Studio/1777027114982_e7e775e6_dennyschulz_-05691.jpg",
"alt": "Mann im weißen Hemd vor dunklem Hintergrund, Softbox im Bild",
"focus": "50% 35%"
},
{
"slug": "business-portrait-dark",
"raw": "1778941495302_d24d7afc_dennyschulz_-05646.jpg",
"alt": "Portrait eines Mannes vor dunklem Hintergrund",
"focus": "50% 35%"
},
{
"slug": "business-portrait-sit",
"raw": "Studio/1777027115506_fba8055d_dennyschulz_-05649.jpg",
"alt": "Sitzendes Portrait mit Kameratasche im Studio",
"focus": "50% 40%"
},
{
"slug": "business-portrait-stool",
"raw": "Studio/1777027117104_bb02b0b7_dennyschulz_-05646.jpg",
"alt": "Sitzendes Portrait im weichen Studiolicht",
"focus": "50% 40%"
},
{
"slug": "editorial-back",
"raw": "1776342910702_0453b820_dennyschulz_-01677.jpg",
"alt": "Detailaufnahme eines Rückens mit Sporttop",
"focus": "50% 45%"
},
{
"slug": "editorial-pose",
"raw": "1776342912592_e4e6f295_dennyschulz_-01645.jpg",
"alt": "Editorial-Portrait vor schwarzem Hintergrund",
"focus": "50% 35%"
},
{
"slug": "editorial-earring",
"raw": "1776342914105_67b5bfad_dennyschulz_-01684.jpg",
"alt": "Portrait im Profil mit Ohrring",
"focus": "45% 35%"
},
{
"slug": "editorial-black",
"raw": "1776342915877_c2112e30_dennyschulz_-02178.jpg",
"alt": "Model im Sporttop vor schwarzem Hintergrund",
"focus": "50% 35%"
},
{
"slug": "editorial-colour",
"raw": "1776343219659_8daa3076_dennyschulz_-02946.jpg",
"alt": "Model in dunklem Kleid in farbigem Licht",
"focus": "50% 35%"
},
{
"slug": "portrait-natural",
"raw": "1784293240857_deae4788_dennyschulz_-07255.jpg",
"alt": "Lachendes Paar im natürlichen Licht",
"focus": "50% 35%"
},
{
"slug": "portrait-couple",
"raw": "1784293231735_a8ccbd3e_dennyschulz_-08620.jpg",
"alt": "Paarportrait im Grünen",
"focus": "50% 35%"
},
{
"slug": "people-joy",
"raw": "1776343134779_e893c351_dennyschulz_-03745114107.jpg",
"alt": "Frau mit Blumenstrauß lacht in die Kamera",
"focus": "50% 35%"
},
{
"slug": "people-kiss",
"raw": "1776343151721_e3f65ef1_dennyschulz_-04483.jpg",
"alt": "Paar in inniger Umarmung",
"focus": "50% 40%"
},
{
"slug": "people-forest",
"raw": "Portfolio/hochzeit/1788686124131_7ce60a11_280826_dennyschulz_fav-18.jpg",
"alt": "Paar im Wald, Portrait",
"focus": "50% 30%"
},
{
"slug": "people-veil",
"raw": "Portfolio/hochzeit/1788686144082_7e69d21e_280826_dennyschulz_fav-22.jpg",
"alt": "Paar unter einem hellen Schleier, Gegenlicht",
"focus": "50% 40%"
},
{
"slug": "people-walk",
"raw": "Portfolio/hochzeit/1788347325902_9093b843_280826_feier-3.jpg",
"alt": "Paar geht Hand in Hand ueber einen Waldweg",
"focus": "50% 40%"
},
{
"slug": "group-feier",
"raw": "1777033639756_1f5a9dc4_dennyschulz_-03904.jpg",
"alt": "Gruppe feiert gemeinsam vor einem Gebäude",
"focus": "50% 45%"
},
{
"slug": "group-outdoor",
"raw": "1784293233172_7a8a3ed9_dennyschulz_-08435.jpg",
"alt": "Gruppe bei einer Feier im Freien",
"focus": "50% 40%"
},
{
"slug": "group-posiert",
"raw": "1784293233955_033a5079_dennyschulz_-08456.jpg",
"alt": "Gruppe posiert im Grünen",
"focus": "50% 45%"
},
{
"slug": "event-motion",
"raw": "1776670469051_dc2993ae_dennyschulz_-04663.jpg",
"alt": "Menschen in Bewegung, bewusst unscharf aufgenommen",
"focus": "50% 45%"
},
{
"slug": "event-speaker",
"raw": "1784293225986_a37d21f4_dennyschulz_-07139.jpg",
"alt": "Frau spricht mit Mikrofon bei einer Veranstaltung",
"focus": "50% 35%"
},
{
"slug": "event-venue",
"raw": "1788932455845_78e0851f_dennyschulz_-00451.jpg",
"alt": "Stuhlreihen in einem festlich vorbereiteten Raum",
"focus": "50% 40%"
},
{
"slug": "event-dance",
"raw": "1784293226489_fa1b9420_dennyschulz_-09046.jpg",
"alt": "Paar tanzt unter einem Kronleuchter",
"focus": "50% 40%"
},
{
"slug": "movement-light",
"raw": "1788850842323_a5ae410e_280826_shooting-69.jpg",
"alt": "Lichtspur aus einer langen Belichtung",
"focus": "50% 50%"
},
{
"slug": "travel-japan",
"raw": "1776263908372_dennyschulz_-05756.jpg",
"alt": "Torii-Tor in einem moosgrünen Garten in Japan",
"focus": "45% 45%"
},
{
"slug": "travel-norway-lake",
"raw": "1776264398432_dennyschulz_-1044.jpg",
"alt": "Spiegelung einer Hütte auf einem See in Norwegen",
"focus": "50% 50%"
},
{
"slug": "travel-norway-coast",
"raw": "1776332816743_c0361ec0_dennyschulz.jpg",
"alt": "Felsküste an einem Fjord in Norwegen",
"focus": "50% 50%"
},
{
"slug": "travel-norway-valley",
"raw": "1776333775618_94cc71b8_dennyschulz_--2.jpeg",
"alt": "Flusstal zwischen Bergen im Morgennebel",
"focus": "50% 50%"
},
{
"slug": "travel-norway-pano",
"raw": "1776346804976_5ab84574_dennyschulz_pano2.jpg",
"alt": "Panorama einer Berglandschaft in Norwegen",
"focus": "50% 50%"
},
{
"slug": "travel-blossom",
"raw": "1776344687313_d34fd8f9_dennyschulz_-05183.jpg",
"alt": "Kirschblüte mit einem Eichhörnchen",
"focus": "50% 40%"
}
]
}

355
src/layout.py Normal file
View File

@@ -0,0 +1,355 @@
"""HTML shell, navigation, media helpers and page furniture."""
from __future__ import annotations
import html
import json
from content import CONTACT, LEGAL, NAV, SITE
# Filled by scripts/build-site.py before rendering: slug -> derivatives metadata.
IMAGE_TABLE: dict[str, dict] = {}
ICONS = {
"arrow": '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13M13 6l6 6-6 6"/></svg>',
"arrow_up_right": '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 17 17 7M8 7h9v9"/></svg>',
"menu": '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>',
"external": '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5M19 5l-7 7M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4"/></svg>',
}
MARK_SVG = """<svg class="brand__mark" viewBox="0 0 40 40" role="img" aria-label="desfoto Bildmarke">
<circle class="ring" cx="20" cy="20" r="13"/>
<circle class="ring" cx="20" cy="20" r="5.2" stroke-width="2"/>
<path class="blade" d="M20 7 20 1.6"/>
<path class="blade" d="M31.3 26.5 36 29.2"/>
<path class="blade" d="M8.7 26.5 4 29.2"/>
</svg>"""
def e(value: object) -> str:
return html.escape(str(value), quote=True)
def picture(
slug: str,
sizes: str,
*,
css_class: str = "frame",
extra_class: str = "",
loading: str = "lazy",
priority: bool = False,
alt: str | None = None,
fit: str | None = None,
decoding: str = "async",
) -> str:
"""Responsive <img> for a processed pool image."""
meta = IMAGE_TABLE.get(slug)
if meta is None:
raise KeyError(f"unknown image slug: {slug}")
srcset = ", ".join(f"{meta['base']}-{w}.webp {w}w" for w in meta["widths"])
largest = meta["widths"][-1]
fallback = f"{meta['base']}-{min(1200, largest)}.webp"
cls = " ".join(part for part in [css_class, "frame--hover" if not priority else "", extra_class] if part)
attrs = [
f'class="{e(cls)}"',
f'src="{e(fallback)}"',
f'srcset="{e(srcset)}"',
f'sizes="{e(sizes)}"',
f'width="{meta["width"]}"',
f'height="{meta["height"]}"',
f'decoding="{e(decoding)}"',
f'loading="{e(loading)}"',
f'alt="{e(alt or meta["alt"])}"',
f'style="object-position:{e(fit or meta["focus"])}"',
]
if priority:
attrs.append('fetchpriority="high"')
return "<img " + " ".join(attrs) + ">"
def preload(slug: str, sizes: str) -> str:
meta = IMAGE_TABLE[slug]
srcset = ", ".join(f"{meta['base']}-{w}.webp {w}w" for w in meta["widths"])
return (
f'<link rel="preload" as="image" imagesrcset="{e(srcset)}" imagesizes="{e(sizes)}" '
f'type="image/webp" fetchpriority="high">'
)
def nav_html(current: str) -> str:
parts = []
for item in NAV:
children = item.get("children") or []
is_current = current == item["href"] or any(current == href for _, href in children)
current_attr = ' aria-current="page"' if is_current else ""
if children:
sub_parts = []
for label, href in children:
sub_current = ' aria-current="page"' if current == href else ""
sub_parts.append(f'<a href="{e(href)}"{sub_current}>{e(label)}</a>')
sub_items = "".join(sub_parts)
parts.append(
'<div class="nav__item">'
f'<a class="nav__link" href="{e(item["href"])}"{current_attr}>{e(item["label"])}'
'<svg class="nav__caret" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 6l5 5 5-5"/></svg></a>'
f'<div class="nav__sub">{sub_items}</div>'
"</div>"
)
else:
parts.append(
f'<a class="nav__link" href="{e(item["href"])}"{current_attr}>{e(item["label"])}</a>'
)
parts.append('<a class="btn btn--solid" href="/kontakt/">Projekt anfragen</a>')
return "".join(parts)
def head(
*,
title: str,
description: str,
path: str,
og_image: str = "og-desfoto.jpg",
og_type: str = "website",
json_ld: list[dict] | None = None,
preload_html: str = "",
robots: str = "index,follow,max-image-preview:large",
indexable: bool = True,
) -> str:
canonical = f"{SITE['url']}{path}"
canonical_html = f'<link rel="canonical" href="{e(canonical)}">\n' if indexable else ""
ld = ""
if json_ld:
ld = "\n".join(
'<script type="application/ld+json">'
+ json.dumps(block, ensure_ascii=False, separators=(",", ":"))
+ "</script>"
for block in json_ld
)
return f"""<!DOCTYPE html>
<html lang="{SITE['language']}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>{e(title)}</title>
<meta name="description" content="{e(description)}">
<meta name="author" content="{e(LEGAL['owner'])}">
<meta name="robots" content="{e(robots)}">
<meta name="theme-color" content="{SITE['theme_color']}">
{canonical_html}<meta property="og:type" content="{e(og_type)}">
<meta property="og:site_name" content="{e(SITE['brand'])}">
<meta property="og:locale" content="{e(SITE['locale'])}">
<meta property="og:title" content="{e(title)}">
<meta property="og:description" content="{e(description)}">
<meta property="og:url" content="{e(canonical)}">
<meta property="og:image" content="{e(SITE['url'] + '/assets/img/' + og_image)}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{e(title)}">
<meta name="twitter:description" content="{e(description)}">
<meta name="twitter:image" content="{e(SITE['url'] + '/assets/img/' + og_image)}">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/assets/img/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="/assets/fonts.css">
<link rel="stylesheet" href="/assets/site.css">
{preload_html}
{ld}
</head>
<body>
<a class="skip" href="#main">Zum Inhalt springen</a>
<header class="masthead">
<div class="shell masthead__inner">
<a class="brand" href="/" aria-label="desfoto Startseite">
{MARK_SVG}
<span class="brand__text"><span>desfoto</span><small>{e(SITE['claim'])}</small></span>
</a>
<button class="nav__toggle" type="button" aria-expanded="false" aria-controls="site-nav" data-nav-toggle>
{ICONS['menu']} Menü
</button>
<nav class="nav" id="site-nav" aria-label="Hauptnavigation">{nav_html(path)}</nav>
</div>
</header>
<main id="main">"""
def footer_html() -> str:
return f"""</main>
<footer class="footer">
<div class="shell">
<div class="footer__grid">
<div class="footer__brand">
<span class="brand">
{MARK_SVG}
<span class="brand__text"><span>desfoto</span><small>{e(SITE['claim'])}</small></span>
</span>
<p class="footer__claim">{e(SITE['tagline'])}. Ein Angebot von {e(LEGAL['business'])}.</p>
</div>
<div>
<h2>Fotografie</h2>
<div class="footer__links">
<a href="/businessfotografie/">Businessfotografie</a>
<a href="/portrait-und-model/">Portrait &amp; Model</a>
<a href="/familien-und-paare/">Familien &amp; Paare</a>
<a href="/minishootings/">Minishootings</a>
</div>
</div>
<div>
<h2>Weitere Leistungen</h2>
<div class="footer__links">
<a href="/video/">Videoprojekte</a>
<a href="/social-media/">Social Media</a>
<a href="/projekte/">Projekte</a>
<a href="/ueber/">Über desfoto</a>
</div>
</div>
<div>
<h2>Kontakt</h2>
<div class="footer__links">
<a href="mailto:{e(CONTACT['email'])}">{e(CONTACT['email'])}</a>
<a href="tel:{e(CONTACT['phone_href'])}">{e(CONTACT['phone'])}</a>
<a href="/kontakt/">Anfrage stellen</a>
<span class="muted">{e(CONTACT['region'])}</span>
</div>
</div>
</div>
<div class="footer__bottom">
<nav aria-label="Rechtliches">
<a href="/impressum/">Impressum</a>
<a href="/datenschutz/">Datenschutz</a>
<a href="/kontakt/">Kontakt</a>
</nav>
<span>© {e(LEGAL['owner'])} · {e(LEGAL['business'])} · Alle Rechte an den gezeigten Bildern und Filmen vorbehalten.</span>
</div>
</div>
</footer>
<script src="/assets/site.js" defer></script>
</body>
</html>
"""
def page(
*,
title: str,
description: str,
path: str,
body: str,
og_image: str = "og-desfoto.jpg",
og_type: str = "website",
json_ld: list[dict] | None = None,
preload_html: str = "",
robots: str = "index,follow,max-image-preview:large",
indexable: bool = True,
) -> str:
return (
head(
title=title,
description=description,
path=path,
og_image=og_image,
og_type=og_type,
json_ld=json_ld,
preload_html=preload_html,
robots=robots,
indexable=indexable,
)
+ body
+ footer_html()
)
def page_head(
*,
kicker: str,
title: str,
lead: str,
image: str,
breadcrumb: tuple[str, str] | None = None,
actions: str = "",
fit: str | None = None,
) -> str:
crumb = ""
if breadcrumb:
crumb = (
f'<div class="breadcrumb"><a href="/">Start</a><span>/</span><span>{e(breadcrumb[0])}</span></div>'
)
actions_html = f'<div class="page-head__actions">{actions}</div>' if actions else ""
return f"""<section class="page-head">
<div class="page-head__bg">
{picture(image, "100vw", css_class="", priority=True, loading="eager", alt="", fit=fit)}
</div>
<div class="shell page-head__inner">
{crumb}
<span class="kicker">{e(kicker)}</span>
<h1 class="balance">{e(title)}</h1>
<p class="page-head__lead">{lead}</p>
{actions_html}
</div>
</section>"""
def section(
*,
kicker: str = "",
title: str = "",
lead: str = "",
content: str = "",
variant: str = "",
tight: bool = False,
anchor: str = "",
title_id: str = "",
) -> str:
classes = ["section"]
if tight:
classes.append("section--tight")
if variant:
classes.append(f"section--{variant}")
head_bits = []
if kicker:
head_bits.append(f'<span class="kicker">{e(kicker)}</span>')
if title:
id_attr = f' id="{e(title_id)}"' if title_id else ""
head_bits.append(f'<h2 class="balance"{id_attr}>{e(title)}</h2>')
if lead:
head_bits.append(f'<p class="lead measure">{lead}</p>')
head_html = ""
if head_bits:
head_html = '<div class="section-head"><div class="section-head__text stack">' + "".join(head_bits) + "</div></div>"
anchor_attr = f' id="{e(anchor)}"' if anchor else ""
return (
f'<section class="{" ".join(classes)}"{anchor_attr}><div class="shell">'
+ head_html
+ content
+ "</div></section>"
)
def cta_band(
*,
title: str = "Lass uns dein Projekt besprechen.",
text: str = "Schreib kurz, worum es geht, wann es stattfinden soll und was du mit den Bildern vorhast. Du bekommst eine ehrliche Einschätzung und einen Preis.",
primary: tuple[str, str] = ("Projekt anfragen", "/kontakt/"),
secondary: tuple[str, str] | None = ("Arbeiten ansehen", "/projekte/"),
) -> str:
secondary_html = (
f'<a class="btn btn--outline-light" href="{e(secondary[1])}">{e(secondary[0])}</a>'
if secondary
else ""
)
return f"""<section class="section section--ink">
<div class="shell">
<div class="section-head">
<div class="section-head__text stack">
<span class="kicker">Kontakt</span>
<h2 class="balance">{e(title)}</h2>
<p class="lead measure" style="color:rgba(246,242,234,.82)">{e(text)}</p>
</div>
<div class="btn-row">
<a class="btn btn--light" href="{e(primary[1])}">{e(primary[0])}</a>
{secondary_html}
</div>
</div>
</div>
</section>"""

1559
src/pages.py Normal file
View File

File diff suppressed because it is too large Load Diff

396
src/theme.py Normal file
View File

@@ -0,0 +1,396 @@
"""Design tokens and the single stylesheet for desfoto.de.
The visual language follows the same photographic, warm paper-toned family as
the photographer's other site, but with a distinctly more modern, direct and
personal edge: high-contrast editorial type, hairline structure, generous
whitespace and one confident rust accent instead of gold.
"""
TOKENS = """
--paper:#F6F2EA;
--paper-2:#EEE7DB;
--paper-3:#E4DAC9;
--ink:#17140F;
--ink-80:#312B24;
--ink-70:#4E4740;
--ink-50:#7B736A;
--ink-35:#A79E93;
--line:rgba(23,20,15,.13);
--line-soft:rgba(23,20,15,.07);
--line-strong:rgba(23,20,15,.3);
--accent:#C0431C;
--accent-dark:#95330F;
--accent-soft:rgba(192,67,28,.12);
--teal:#16494A;
--radius:14px;
--radius-lg:22px;
--radius-pill:999px;
--shell:min(1220px,92vw);
--gap:clamp(1.1rem,2.2vw,2rem);
--section:clamp(3.6rem,7vw,7.5rem);
--ease:cubic-bezier(.22,.61,.36,1);
--shadow:0 24px 60px -30px rgba(23,20,15,.45);
--font-sans:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
--font-display:"Fraunces","Iowan Old Style",Georgia,serif;
"""
CSS = """
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--font-sans);font-size:clamp(1rem,.35vw + .94rem,1.075rem);
line-height:1.62;font-weight:400;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.04;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.5rem,6.4vw,5.1rem)}
h2{font-size:clamp(1.9rem,3.9vw,3.1rem)}
h3{font-size:clamp(1.22rem,1.5vw,1.55rem);line-height:1.16}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--line);margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.1rem;z-index:99}
.skip:focus{left:.6rem;top:.6rem}
.shell{width:var(--shell);margin-inline:auto}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(2.4rem,4vw,4rem)}
.section--paper2{background:var(--paper-2)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--line{border-top:1px solid var(--line)}
.stack>*+*{margin-top:var(--gap)}
.lead{font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.55;color:var(--ink-80)}
.muted{color:var(--ink-50)}
.accent{color:var(--accent)}
.center{text-align:center}
.measure{max-width:64ch}
.measure-sm{max-width:48ch}
.balance{text-wrap:balance}
.kicker{
display:inline-flex;align-items:center;gap:.55rem;
font-size:.735rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--accent);
}
.kicker::before{content:"";width:1.9rem;height:1px;background:currentColor;opacity:.55}
.section--ink .kicker{color:#E6A184}
.eyebrow{
font-size:.735rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-35);
}
.section-head{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:flex-end;justify-content:space-between}
.section-head__text{max-width:66ch}
/* ---------- header ---------- */
.masthead{
position:sticky;top:0;z-index:50;
background:color-mix(in srgb,var(--paper) 88%,transparent);
backdrop-filter:saturate(1.4) blur(14px);
border-bottom:1px solid var(--line);
}
.masthead__inner{display:flex;align-items:center;gap:1rem;min-height:4.4rem;padding-block:.7rem}
.brand{display:inline-flex;align-items:center;gap:.62rem;font-family:var(--font-display);font-size:1.42rem;font-weight:600;letter-spacing:-.015em}
.brand__mark{width:1.72rem;height:1.72rem;flex:none}
.brand__mark .ring{stroke:var(--ink);fill:none;stroke-width:2.4}
.brand__mark .blade{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}
.brand small{display:block;font-family:var(--font-sans);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);line-height:1}
.brand__text{display:flex;flex-direction:column;gap:.22rem}
.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.nav__link{
position:relative;display:inline-block;padding:.55rem .72rem;border-radius:var(--radius-pill);
font-size:.9rem;font-weight:500;color:var(--ink-80);transition:color .2s var(--ease),background .2s var(--ease);
}
.nav__link::after{
content:"";position:absolute;left:.72rem;right:.72rem;bottom:.34rem;height:1px;
background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.nav__link:hover,.nav__link:focus-visible{color:var(--ink)}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--ink)}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__item{position:relative}
.nav__item>.nav__link{display:inline-flex;align-items:center;gap:.36rem}
.nav__caret{width:.6em;height:.6em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transition:transform .25s var(--ease)}
.nav__sub{
position:absolute;top:calc(100% + .4rem);left:0;min-width:15.5rem;
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);padding:.5rem;display:grid;gap:.08rem;
opacity:0;visibility:hidden;transform:translateY(-.35rem);transition:all .22s var(--ease);
}
.nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg)}
.nav__sub a{padding:.5rem .7rem;border-radius:9px;font-size:.875rem;color:var(--ink-80)}
.nav__sub a:hover{background:var(--paper-2);color:var(--ink)}
.nav__toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--radius-pill);padding:.5rem .95rem;font-size:.85rem;font-weight:600;cursor:pointer}
.nav__toggle svg{width:1rem;height:1rem;stroke:currentColor;stroke-width:2;fill:none}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
padding:.86rem 1.5rem;border-radius:var(--radius-pill);border:1px solid transparent;
font-size:.92rem;font-weight:600;letter-spacing:.01em;cursor:pointer;
transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:var(--accent-dark)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:#000}
.btn--ghost{border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:#fff}
.btn--outline-light{border-color:rgba(246,242,234,.42);color:var(--paper)}
.btn--outline-light:hover{border-color:var(--paper);background:rgba(246,242,234,.1)}
.btn svg{width:.95em;height:.95em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:.42rem;font-size:.9rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-strong);padding-bottom:.15rem;transition:gap .2s var(--ease),border-color .2s var(--ease)}
.link-arrow:hover{gap:.72rem;border-color:var(--accent);color:var(--accent-dark)}
.link-arrow svg{width:.85em;height:.85em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;color:var(--paper);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero::before{
content:"";position:absolute;inset:0;z-index:-1;
background:
linear-gradient(180deg,rgba(14,12,10,.72) 0%,rgba(14,12,10,.34) 38%,rgba(14,12,10,.86) 100%),
linear-gradient(90deg,rgba(14,12,10,.7) 0%,rgba(14,12,10,.1) 65%);
}
.hero__inner{
min-height:clamp(30rem,80vh,46rem);
display:flex;flex-direction:column;justify-content:flex-end;
padding-block:clamp(3rem,7vw,5.6rem) clamp(2.4rem,5vw,4.2rem);
}
.hero__kicker{color:#F0B79B}
.hero__title{max-width:20ch;margin-top:1.1rem;text-shadow:0 2px 30px rgba(0,0,0,.35);text-wrap:balance}
.hero__sub{max-width:52ch;margin-top:1.25rem;font-size:clamp(1.02rem,1.35vw,1.2rem);color:rgba(246,242,234,.9)}
.hero__actions{margin-top:2rem}
.hero__facts{
margin-top:clamp(2.2rem,4vw,3.4rem);padding-top:1.4rem;border-top:1px solid rgba(246,242,234,.22);
display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.hero__fact{font-size:.85rem;color:rgba(246,242,234,.78)}
.hero__fact strong{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--paper);letter-spacing:-.01em}
/* ---------- generic media frame ---------- */
.frame{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--paper-3)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
img.frame{width:100%;height:auto;object-fit:cover;transition:transform .8s var(--ease)}
.frame--hover:hover img,img.frame--hover:hover{transform:scale(1.035)}
.frame--16x10{aspect-ratio:16/10}
.frame--4x5{aspect-ratio:4/5}
.frame--3x2{aspect-ratio:3/2}
.frame--1x1{aspect-ratio:1/1}
.frame--21x9{aspect-ratio:21/9}
/* ---------- statement ---------- */
.statement{display:grid;gap:1.4rem 3.4rem;grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
.statement__body{font-family:var(--font-display);font-size:clamp(1.35rem,2.5vw,2.05rem);line-height:1.28;letter-spacing:-.015em;font-weight:400;text-wrap:pretty}
.statement__body em{font-style:italic;color:var(--accent)}
/* ---------- service cards ---------- */
.grid{display:grid;gap:clamp(1.2rem,2.1vw,2rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
.card{display:flex;flex-direction:column;gap:1rem;height:100%}
.card__title{display:flex;align-items:baseline;gap:.6rem}
.card__num{font-size:.72rem;font-weight:600;letter-spacing:.16em;color:var(--accent)}
.card__text{color:var(--ink-70);font-size:.955rem}
.card__foot{margin-top:auto;padding-top:.4rem}
/* ---------- gallery ---------- */
.gallery{display:grid;gap:clamp(.8rem,1.4vw,1.2rem);grid-template-columns:repeat(6,1fr)}
.gallery figure{margin:0;position:relative}
.gallery figcaption{
margin-top:.6rem;font-size:.8rem;letter-spacing:.02em;color:var(--ink-50);
}
.gallery .g-w3{grid-column:span 3}
.gallery .g-w2{grid-column:span 2}
.gallery .g-w4{grid-column:span 4}
.gallery .g-w6{grid-column:span 6}
/* ---------- video facade ---------- */
.video-shell{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#0B0A09;box-shadow:var(--shadow)}
.video-shell iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.video-facade{
position:relative;display:block;width:100%;padding:0;border:0;background:#0B0A09;cursor:pointer;
}
.video-facade img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.72;transition:transform .8s var(--ease),opacity .4s var(--ease)}
.video-facade:hover img{transform:scale(1.02);opacity:.85}
.video-facade__play{
position:absolute;inset:0;display:grid;place-content:center;gap:.9rem;justify-items:center;color:#fff;text-align:center;
}
.video-facade__btn{
width:4.6rem;height:4.6rem;border-radius:50%;background:rgba(246,242,234,.94);color:var(--ink);
display:grid;place-items:center;transition:transform .3s var(--ease),background .3s var(--ease);
}
.video-facade:hover .video-facade__btn{transform:scale(1.07);background:#fff}
.video-facade__btn svg{width:1.6rem;height:1.6rem;fill:currentColor;margin-left:.18rem}
.video-facade__label{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.video-shell__meta{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.3rem;background:linear-gradient(0deg,rgba(10,9,8,.88),transparent);color:#F2EDE4;font-size:.85rem;pointer-events:none}
/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:clamp(1.4rem,2.4vw,2.2rem);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.step{position:relative;padding-top:2.6rem;border-top:1px solid var(--line)}
.step::before{
counter-increment:step;content:"0" counter(step);
position:absolute;top:.6rem;left:0;font-size:.75rem;font-weight:600;letter-spacing:.18em;color:var(--accent);
}
.step h3{margin-bottom:.5rem}
.step p{font-size:.94rem;color:var(--ink-70)}
/* ---------- lists ---------- */
.ticks{display:grid;gap:.62rem}
.ticks li{position:relative;padding-left:1.6rem;font-size:.965rem;color:var(--ink-80)}
.ticks li::before{
content:"";position:absolute;left:0;top:.55em;width:.62rem;height:.62rem;border-radius:50%;
background:var(--accent-soft);border:1px solid var(--accent);
}
.plain-list{display:grid;gap:.5rem}
.plain-list a{border-bottom:1px solid var(--line);padding-bottom:.5rem;display:inline-flex;gap:.5rem;align-items:center}
.plain-list a:hover{color:var(--accent-dark);border-color:var(--accent)}
.dl{display:grid;gap:1.6rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.dl div{display:grid;gap:.32rem}
.dl dt{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-35)}
.dl dd{margin:0;font-size:.98rem}
.note{
border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
padding:1rem 1.2rem;font-size:.9rem;color:var(--ink-70);background:rgba(255,255,255,.4);
}
/* ---------- facts strip ---------- */
.facts{display:grid;gap:clamp(1.3rem,2.6vw,2.6rem);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.fact h3{font-size:1.05rem;margin-bottom:.4rem}
.fact p{font-size:.9rem;color:var(--ink-70)}
.section--ink .fact p{color:rgba(246,242,234,.72)}
/* ---------- contact ---------- */
.contact-grid{display:grid;gap:clamp(1.6rem,3vw,3.2rem);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.contact-card{
border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,2.4vw,2.2rem);background:rgba(255,255,255,.5);
}
.form{display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
.field input,.field textarea,.field select{
width:100%;padding:.75rem .85rem;border:1px solid var(--line-strong);border-radius:10px;
background:var(--paper);color:var(--ink);font:inherit;font-size:.96rem;
}
.field textarea{min-height:8.5rem;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.form__hint{font-size:.82rem;color:var(--ink-50)}
.form__status{font-size:.88rem;color:var(--teal);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---------- footer ---------- */
.footer{background:var(--ink);color:rgba(246,242,234,.78);padding-block:clamp(2.6rem,5vw,4.4rem) 1.6rem;font-size:.92rem}
.footer a:hover{color:#fff}
.footer__grid{display:grid;gap:2rem;grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(9rem,1fr))}
.footer__brand .brand{color:var(--paper)}
.footer__brand .brand__mark .ring{stroke:var(--paper)}
.footer__claim{margin-top:1rem;max-width:34ch;color:rgba(246,242,234,.66);font-size:.9rem}
.footer h2{font-family:var(--font-sans);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,242,234,.5);margin-bottom:.9rem}
.footer__links{display:grid;gap:.5rem}
.footer__bottom{
margin-top:clamp(2rem,4vw,3.2rem);padding-top:1.2rem;border-top:1px solid rgba(246,242,234,.16);
display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.82rem;color:rgba(246,242,234,.58);
}
.footer__bottom nav{display:flex;gap:1.1rem;flex-wrap:wrap}
/* ---------- page hero (sub pages) ---------- */
.page-head{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--paper)}
.page-head__bg{position:absolute;inset:0;z-index:-2}
.page-head__bg img{width:100%;height:100%;object-fit:cover}
.page-head::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(115deg,rgba(12,11,9,.9) 0%,rgba(12,11,9,.65) 55%,rgba(12,11,9,.38) 100%);
}
.page-head__inner{padding-block:clamp(3.2rem,6vw,5.4rem) clamp(2.6rem,5vw,4.2rem);max-width:min(70ch,100%)}
.page-head h1{margin-top:1rem;font-size:clamp(2.1rem,4.6vw,3.7rem)}
.page-head__lead{margin-top:1.1rem;font-size:clamp(1rem,1.3vw,1.16rem);color:rgba(246,242,234,.88);max-width:58ch}
.page-head__actions{margin-top:1.8rem}
.breadcrumb{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,242,234,.6);margin-bottom:1.4rem;display:flex;gap:.5rem;flex-wrap:wrap}
.breadcrumb a:hover{color:#fff}
/* ---------- prose (legal) ---------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.35rem,2.2vw,1.85rem);margin-top:2.8rem}
.prose h3{font-size:1.1rem;margin-top:1.8rem;font-family:var(--font-sans);font-weight:600;letter-spacing:0}
.prose p,.prose li{color:var(--ink-80);font-size:.985rem}
.prose p+p{margin-top:.85rem}
.prose ul{margin:.8rem 0 0;display:grid;gap:.5rem}
.prose ul li{position:relative;padding-left:1.3rem}
.prose ul li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--accent)}
.prose a{border-bottom:1px solid var(--line-strong)}
.prose a:hover{color:var(--accent-dark);border-color:var(--accent)}
.prose hr{margin-block:2.4rem}
.prose .note{margin-top:1.2rem}
.prose dl{margin-top:.8rem}
.prose dt{font-weight:600;margin-top:.9rem}
.prose dd{margin:0}
/* ---------- 404 ---------- */
.center-page{min-height:min(70vh,40rem);display:grid;place-items:center;text-align:center}
.center-page__inner{display:grid;gap:1.3rem;justify-items:center;max-width:46ch}
/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(1.4rem);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
html:focus-within{scroll-behavior:auto}
.btn:hover{transform:none}
.nav__link::after{transition:none}
}
/* ---------- responsive ---------- */
@media (max-width:62rem){
.statement{grid-template-columns:1fr}
.contact-grid{grid-template-columns:1fr}
.gallery{grid-template-columns:repeat(4,1fr)}
.gallery .g-w3{grid-column:span 2}
.gallery .g-w4{grid-column:span 4}
.gallery .g-w2{grid-column:span 2}
}
@media (max-width:52rem){
.nav{
position:fixed;inset:4.4rem 0 auto;margin:0;
flex-direction:column;align-items:stretch;gap:.15rem;
background:var(--paper);border-bottom:1px solid var(--line);
padding:1rem max(4vw,1rem) 1.6rem;
max-height:calc(100vh - 4.4rem);overflow:auto;
transform:translateY(-1rem);opacity:0;visibility:hidden;transition:all .25s var(--ease);
box-shadow:var(--shadow);
}
.nav.is-open{transform:none;opacity:1;visibility:visible}
.nav__toggle{display:inline-flex;align-items:center;gap:.45rem}
.nav__link{padding:.7rem .2rem;font-size:1.02rem;border-bottom:1px solid var(--line-soft);border-radius:0}
.nav__link::after{display:none}
.nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 .9rem;min-width:0;background:none}
.nav__caret{display:none}
.nav .btn{margin-top:1rem;align-self:flex-start}
.hero__inner{min-height:clamp(26rem,72vh,34rem)}
}
@media (max-width:40rem){
.gallery{grid-template-columns:repeat(2,1fr)}
.gallery .g-w3,.gallery .g-w4,.gallery .g-w6{grid-column:span 2}
.hero__facts{grid-template-columns:1fr 1fr}
.page-head__inner{max-width:none}
}
"""