/* ========================================================================== Daphna Ute Wildemann — Onepager Editorial, ruhig, viel Weißraum. Schwarz auf Weiß, ein Serifen-Display für Überschriften, eine schlichte Grotesk für Fließtext & Navigation. ========================================================================== */ /* ============================ Selbst gehostete Fonts ===================== Ersetzt die Google-Fonts-CDN-Einbindung (siehe HTML-Kommentar im ). Dateien müssen unter fonts/ liegen — siehe FONTS-README.txt für die genauen Downloadschritte. Bis die Dateien da sind, greift automatisch der System-Fallback (Georgia bzw. Helvetica/Arial), die Seite bricht also nicht, sieht nur etwas anders aus. Fraunces ist ein Variable Font: eine Datei deckt alle Schnitte (300–500 Normal + 400 Kursiv) über font-weight-range ab. Work Sans: eine Datei pro Schnitt (300/400/500/600), da hier als statische (nicht variable) Dateien eingebunden. ============================================================================ */ @font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-Variable.woff2") format("woff2-variations"), url("fonts/Fraunces-Variable.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-Italic-Variable.woff2") format("woff2-variations"), url("fonts/Fraunces-Italic-Variable.woff2") format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("fonts/WorkSans-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("fonts/WorkSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("fonts/WorkSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("fonts/WorkSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* Farben */ --color-bg: #ffffff; --color-bg-soft: #f6f5f3; --color-text: #17130f; --color-muted: #6f6a63; --color-line: #dedad3; --color-line-soft: #ececea; --color-accent: #a9835a; /* warmer Goldton, wie im Original-Schriftzug */ /* Warmweiß für Header/Menü und den Kontakt-Bereich — schlicht, ohne Verlauf. */ --panel-bg: #faf6ee; /* Typografie */ --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif; /* Layout */ --content-width: 720px; /* Maß für Fließtext (Hero, Über, Kontakt) */ --content-width-wide: 1400px; /* max. Seitenbreite für die Arbeiten-Liste ab 950px */ --edge: 16px; /* Außenabstand, wird in Media Queries gestuft */ /* Abstand zwischen den zwei Bildern eines Bildpaares */ --werk-bild-gap: 5px; /* -------------------------------------------------------------------- text-style-c: noch offen, definieren wir, sobald klar ist wofür. -------------------------------------------------------------------- */ --text-style-c-placeholder: 1; } /* ============================= Reset ================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Außenabstand in zwei festen Stufen, kein Zwischenschritt mehr: Mobile (<952px) 25px, Desktop (ab 952px) 100px. Für Breiten <700px gibt es keine eigene Stufe mehr — dort skaliert die gesamte Seite proportional (siehe .scale-wrap weiter unten / script.js), das Mobile-Layout selbst bleibt auf 700px Referenzbreite eingefroren. */ :root { --edge: 25px; } @media (min-width: 950px) { :root { --edge: 100px; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ============ Skalierung für sehr schmale Screens (<700px) ================ Das Mobile-Layout ist auf 700px Referenzbreite gebaut. Unter 700px wird der gesamte Inhalt (Header, Main, Footer) per JS proportional herunterskaliert (transform: scale), statt weiter umzubrechen. .scale-wrap bekommt Breite/Transform inline von script.js gesetzt. ============================================================================ */ .scale-wrap { transform-origin: top left; } /* ===================== Dynamischer Hintergrund ===================== Läuft auf Mobile UND Desktop (siehe script.js). Statt einer einzelnen harten Form: zwei weich verlaufende, verschwommene Farbwolken pro Layer, die sich leicht überlappen und dabei permanent ganz sanft driften/atmen (CSS-Animation) — nichts hat eine harte Kante. Beim Scrollen wird jeweils der nicht sichtbare Layer neu eingefärbt und per Opacity eingeblendet (Crossfade), das läuft überall zuverlässig sanft — anders als eine direkte Transition zwischen zwei background-Werten, die nicht überall interpoliert. ============================================================================ */ .bg-dynamic { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--color-bg); } .bg-layer { position: absolute; inset: -20%; opacity: 0; filter: blur(70px) saturate(108%); transition: opacity 1400ms ease; will-change: opacity, transform; } .bg-layer.is-visible { opacity: 1; animation: bg-drift 26s ease-in-out infinite; } /* Sanftes Atmen/Driften der Blobs — rein dekorativ, unabhängig von den Farbwechseln beim Scrollen. */ @keyframes bg-drift { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(4deg) scale(1.06); } 100% { transform: rotate(0deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .bg-layer.is-visible { animation: none; } } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } /* ============================ Textstile ================================= */ /* text-style-a: Zitat / Pull-Quote. Für ein
oder

innerhalb eines Textblocks, z.B. eines Werk-Eintrags. */ .text-style-a { display: block; font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.45; color: var(--color-text); border-left: 2px solid var(--color-accent); padding-left: 22px; margin: 1.6em 0; } /* text-style-b: Hervorhebung im Fließtext. Für ein oder mitten im Satz — hebt einzelne Begriffe dezent hervor. */ .text-style-b { color: var(--color-accent); font-style: normal; font-weight: 500; } /* text-style-c: noch offen — definieren wir, sobald klar ist wofür. */ .text-style-c { /* wird später gemeinsam definiert */ } /* ============================= Header ================================= */ .site-header { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 22px var(--edge); background: var(--panel-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-line-soft); text-align: center; } .logo { font-family: var(--font-display); /* 3x der ursprünglichen 15px, fluid zwischen Mobile und Desktop */ font-size: clamp(28px, 6vw, 45px); line-height: 1.25; letter-spacing: 0.01em; white-space: nowrap; } .main-nav { display: flex; align-items: center; gap: 28px; } /* Mobile: Menü über fast die ganze Breite, Punkte gleichmäßig verteilt — größere, leichter zu treffende Tap-Bereiche statt einer schmalen, eng gedrängten Zeile. */ @media (max-width: 949.98px) { .main-nav { width: 92%; max-width: 520px; justify-content: space-between; gap: 12px; } } .main-nav > a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); transition: color 0.2s ease; } .main-nav > a:hover, .main-nav > a:focus-visible { color: var(--color-text); } /* ---- Arbeiten-Dropdown: Kategorien, beim Hover einer Kategorie erscheinen die zugehörigen Artikel als Flyout daneben. Klick auf einen Artikel wählt die Kategorie aus und springt zum Artikel (siehe script.js). ---- */ .nav-arbeiten-wrap { position: relative; display: flex; align-items: center; } .nav-arbeiten { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); line-height: inherit; transition: color 0.2s ease; } /* Dezentes Dropdown-Symbol */ .nav-arbeiten::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: 0.6; } .nav-arbeiten-wrap:hover .nav-arbeiten, .nav-arbeiten:focus-visible { color: var(--color-text); } /* Kein margin-top-Abstand mehr zwischen Trigger und Dropdown — das war eine unsichtbare "Lücke", beim Herunterbewegen der Maus verließ man dabei den :hover-Bereich und das Dropdown schloss sich. Der optische Abstand kommt jetzt aus padding-top INNERHALB des Dropdowns, das bleibt durchgängig hoverbar. */ .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 18px 0 10px; background: var(--color-bg); border: 1px solid var(--color-line-soft); box-shadow: 0 20px 40px -16px rgba(20, 15, 10, 0.28); opacity: 0; visibility: hidden; transition: opacity 0.18s ease; z-index: 30; } .nav-arbeiten-wrap:hover .nav-dropdown, .nav-arbeiten-wrap:focus-within .nav-dropdown { opacity: 1; visibility: visible; } .nav-kategorien { list-style: none; margin: 0; padding: 0; } .nav-kategorie { position: relative; } .nav-kategorie-label { display: block; padding: 10px 28px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); white-space: nowrap; cursor: default; } .nav-kategorie:hover { background: var(--color-bg-soft); } .nav-artikel { list-style: none; margin: 0; padding: 10px 0; position: absolute; top: 0; left: 100%; min-width: 260px; max-width: 340px; background: var(--color-bg); border: 1px solid var(--color-line-soft); box-shadow: 0 20px 40px -16px rgba(20, 15, 10, 0.28); opacity: 0; visibility: hidden; transition: opacity 0.18s ease; } .nav-kategorie:hover .nav-artikel, .nav-kategorie:focus-within .nav-artikel { opacity: 1; visibility: visible; } .nav-artikel a { display: block; padding: 8px 20px; font-family: var(--font-body); font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--color-muted); white-space: normal; line-height: 1.35; } .nav-artikel a:hover, .nav-artikel a:focus-visible { color: var(--color-text); background: var(--color-bg-soft); } /* Auf Mobile ist ein Hover-Flyout unpraktisch (kein Hover auf Touch) — dort blenden wir das Dropdown aus; "Arbeiten" verlinkt einfach direkt zur Sektion, die Kategorie-Filterleiste dort übernimmt die Auswahl. */ @media (max-width: 949.98px) { .nav-dropdown { display: none; } } /* ============================== Hero =================================== */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; color: #ffffff; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero::after { content: ""; position: absolute; inset: 0; /* zentrierte Vignette statt Verlauf von unten — der Text sitzt jetzt mittig im Bild, nicht mehr am unteren Rand */ background: radial-gradient(ellipse at center, rgba(10, 8, 6, 0.42), rgba(10, 8, 6, 0.12) 65%); z-index: 1; } .hero-inner { position: relative; z-index: 2; max-width: var(--content-width); margin: 0 auto; padding: 48px var(--edge) 56px; } .hero-headline { /* Intro: doppelt so groß wie zuvor (32/6.4vw/61 → 64/12.8vw/122) */ font-size: clamp(64px, 12.8vw, 122px); line-height: 1.02; letter-spacing: -0.01em; color: #ffffff; } /* Im About-Bereich steht die gleiche Zeile noch einmal, dort aber in normaler (nicht verdoppelter) Größe, in Textfarbe statt Weiß, da sie nicht mehr über einem Foto liegt. */ .hero-headline--about { font-size: clamp(32px, 6.4vw, 61px); color: var(--color-text); } .hero-sub { max-width: 46ch; margin: 28px auto 0; color: rgba(255, 255, 255, 0.85); font-size: 17px; } /* Im About-Bereich ist der Untertitel nicht mehr weiß auf Foto, sondern normaler Fließtext in gedämpfter Textfarbe. */ .about .hero-sub { margin: 20px auto 0; color: var(--color-muted); } /* ============================== About =================================== */ .about { padding: 80px var(--edge) 40px; position: relative; } /* Mittiger, etwas breiterer Trennstrich zum Arbeiten-Bereich, statt einer volle-Breite-Linie. */ .about::before { content: ""; display: block; width: min(420px, 70%); height: 2px; margin: 0 auto 80px; background: var(--color-text); opacity: 0.35; } .about .section-titel { margin-bottom: 56px; } /* ============================== Über ==================================== */ .ueber { /* gleiche max. Breite wie der Arbeiten-Bereich; horizontales Padding kommt bereits von .about, hier nur noch Abstand nach unten */ max-width: var(--content-width-wide); margin: 0 auto; padding: 0 0 40px; display: flex; flex-direction: column-reverse; align-items: center; gap: 40px; text-align: center; } .ueber-text { /* keine feste ch-Begrenzung mehr: der Textblock soll auf Desktop so breit werden wie der Arbeiten-Bereich (siehe .ueber max-width) */ max-width: none; width: 100%; } /* Mobile: der Textblock bekommt eine lesbare, zentrierte Spaltenbreite — sonst wirkt "zentrierter" Text in einer sehr breiten Box uneinheitlich, weil jede Zeile eines Absatzes an einer anderen Stelle beginnt/endet. Der Fließtext selbst steht im Blocksatz (beide Ränder bündig). */ @media (max-width: 949.98px) { .ueber-text { max-width: 46ch; margin: 0 auto; } .ueber-text p { text-align: justify; text-align-last: center; } } .ueber-bild { width: 100%; max-width: 280px; aspect-ratio: 3 / 4; object-fit: cover; } @media (min-width: 950px) { .ueber { flex-direction: row; align-items: center; gap: clamp(40px, 6vw, 80px); } .ueber-text { flex: 1 1 auto; /* Text bleibt innerhalb seines Blocks zentriert, auch wenn Bild und Text nebeneinander stehen. */ text-align: center; } .ueber-bild { flex: 0 0 clamp(220px, 26vw, 320px); max-width: none; } } .ueber p { color: var(--color-muted); } .ueber-frage { margin-top: 2em; font-family: var(--font-display); font-style: italic; color: var(--color-text); font-size: 20px; } .ueber-claim { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 30px); color: var(--color-text); margin-top: 0.2em; } .btn-contact { display: inline-block; margin-top: 32px; padding: 14px 34px; border: 1px solid var(--color-text); border-radius: 999px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; } .btn-contact:hover, .btn-contact:focus-visible { background: var(--color-text); color: var(--color-bg); } /* ============================= Arbeiten ================================= */ .arbeiten { border-top: 1px solid var(--color-line); padding: 80px var(--edge) 40px; } .section-titel { max-width: var(--content-width); margin: 0 auto 56px; font-size: clamp(32px, 5vw, 46px); text-align: center; } /* Kategorie-Filter */ .werk-filter { max-width: var(--content-width); margin: 0 auto 56px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* Erzwingt einen Zeilenumbruch an dieser Stelle in der Filterleiste, unabhängig von der verfügbaren Breite. */ .filter-umbruch { flex-basis: 100%; height: 0; } .filter-btn { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); background: transparent; border: 1px solid var(--color-line); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .filter-btn:hover, .filter-btn:focus-visible { border-color: var(--color-text); color: var(--color-text); } .filter-btn.is-active { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); } .werk-leer { max-width: var(--content-width); margin: 0 auto 56px; text-align: center; color: var(--color-muted); font-style: italic; } .werk-liste { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column; gap: 88px; } .werk { display: block; /* Damit die Artikel-Überschrift beim Anspringen (Menü-Klick, Anker-Link) nicht hinter dem sticky Header verschwindet. Wirkt sowohl bei normalen #anchor-Links als auch bei scrollIntoView() aus script.js. */ scroll-margin-top: 160px; } @media (max-width: 949.98px) { .werk { scroll-margin-top: 110px; } } .werk[hidden] { display: none; } .werk-kopf { margin-bottom: 20px; } /* Bildpaar: Abstand zwischen den beiden Bildern = 5px. Spalten richten sich nach der tatsächlichen Bildbreite (repeat(2, auto)), nicht nach 1fr 1fr — die Bilder sind Einzelseiten aus Magazinen, die zusammen eine Doppelseite ergeben und dürfen dabei nicht auseinandergezogen oder beschnitten werden. Der Container ist bewusst NICHT prozentual zur Zeile skaliert (das führte zuvor zum Stauchen), sondern sitzt mit seiner natürlichen Inhaltsbreite in der Reihe. */ .werk-bilder { display: grid; grid-template-columns: repeat(2, auto); gap: var(--werk-bild-gap); justify-content: center; margin-bottom: 24px; flex: 0 0 auto; } /* Einträge mit nur einem Bild: kein Platzhalter mehr für das zweite Bild. Das eine Bild sitzt mittig, in derselben Größenlogik wie ein Bildpaar. */ .werk-bilder--einzel { display: flex; justify-content: center; flex: 0 0 auto; } /* Ausnahme: manche Einzelbilder (Hannelore Elsner, India Mahdavi) sind selbst schon eine komplette Doppelseite in einer Datei — die sollen so breit wirken wie zwei nebeneinanderliegende Einzelseiten, nicht wie eine einzelne. */ .werk-bilder--doppelseite img { min-width: 405px; /* 2 × 200px + Bildabstand */ max-width: 605px; /* 2 × 300px + Bildabstand */ } /* Feste Größenbox statt adaptiver Prozentwerte — das war die Ursache des Stauchens: min/max auf BEIDEN Achsen gleichzeitig, mit width UND height auf "auto". Nur so behält der Browser das echte Seitenverhältnis jedes Bildes garantiert bei (er wählt die größte Größe, die in die Box passt, ohne zu verzerren). object-fit:contain ist zusätzliche Absicherung, falls ein Elternelement doch strecken will. */ .werk-bilder img, .werk-bild-platzhalter { width: auto; height: auto; min-width: 200px; max-width: 300px; min-height: 300px; max-height: 500px; object-fit: contain; display: block; background: var(--color-bg-soft); /* dezenter, weicher, dunkler Schlagschatten */ box-shadow: 0 22px 44px -20px rgba(20, 15, 10, 0.38), 0 8px 18px -10px rgba(20, 15, 10, 0.22); } /* ---- Mobile: Überschrift doppelt so groß, mittig; Trennlinien zwischen Artikeln, mittig, 50% Fensterbreite. Der Autoren-/Credits-Abschnitt bleibt in der normalen Größe, wird aber ebenfalls zentriert. ---- */ @media (max-width: 949.98px) { .werk-kopf { text-align: center; } /* Bildpaare größer als der Basiswert — passt bei 700px Referenzbreite (zwei Bilder + 5px Abstand) noch bequem nebeneinander. */ .werk-bilder img, .werk-bild-platzhalter { min-width: 230px; max-width: 320px; min-height: 340px; max-height: 560px; } .werk-titel { /* doppelt so groß wie die Basisgröße (clamp 24px/3.4vw/32px) */ font-size: clamp(48px, 6.8vw, 64px); } .werk-credits { align-items: center; } /* Klassenbasiert statt :not(:first-child) — aus demselben Grund wie beim Links-Rechts-Wechsel: bei aktivem Kategorie-Filter ist die DOM-Position nicht mehr die sichtbare Position. script.js vergibt diese Klasse an alle sichtbaren Artikel außer dem jeweils ersten. */ .werk--nicht-erstes { margin-top: 64px; } /* Normales Block-Element mit margin:auto statt absoluter Positionierung — dadurch garantiert mittig, unabhängig vom Positionierungskontext (z.B. während der Skalierung unter 700px). */ .werk--nicht-erstes::before { content: ""; display: block; width: 50%; height: 1px; margin: 0 auto 64px; background: var(--color-line); } } /* ---- Mobile-Mindestgrößen: "Arbeiten"-Überschrift mind. 50% größer, Fließtext mind. 30% größer als der bisherige Basiswert. Die Hero-Headline braucht hier keine eigene Regel mehr, da ihre neue Basisgröße (Intro: doppelt so groß) bereits deutlich über diesem alten Mindestwert liegt. werk-titel bleibt unverändert, da dieser Titel bereits eine eigene, deutlich größere Mobile-Regel hat (siehe oben). ---- */ @media (max-width: 949.98px) { .section-titel { /* Mindestgröße 32px -> 48px (+50%), Höchstgröße entsprechend erhöht */ font-size: clamp(48px, 7.5vw, 69px); } body { /* Fließtext-Basisgröße 17px -> 22px (+30%) */ font-size: 22px; } .hero-sub { /* hat eine eigene, explizite Größe, die die body-Regel überschreiben würde — daher hier separat auf +30% gesetzt */ font-size: 22px; } } /* ---- Ab 952px: Bild und Text nebeneinander, Seite wechselt pro Artikel. Kategorie/Titel/Credits stehen jetzt am Anfang der Textspalte (nicht mehr als eigene volle-Breite-Kopfzeile darüber) — dadurch beginnt die Bild-Oberkante exakt auf Höhe der Überschriften-Oberkante, sobald die Spalte oben bündig ausgerichtet ist. Die Bildspalte hat KEINE feste Prozentbreite mehr (das erzeugte je nach Skalierung eine andere Bildgröße als vorgesehen) — sie behält einfach ihre natürliche Inhaltsbreite aus der festen Größenbox oben, die Textspalte füllt den Rest. ---- */ @media (min-width: 950px) { .werk-liste { max-width: var(--content-width-wide); gap: clamp(56px, 10vw, 120px); } .werk-kopf { margin-bottom: 20px; } .werk-inhalt { display: flex; /* Basis-Abstand, max. 120px; bei Bild-links (ungerade Artikel) 30% kleiner, siehe weiter unten. */ --werk-gap: clamp(32px, 8vw, 120px); gap: var(--werk-gap); align-items: flex-start; } .werk-bilder { margin-bottom: 0; } .werk-text-body { flex: 1 1 auto; max-width: 900px; } /* Bild links, kleinerer Abstand: das ist der Grundzustand (kein .werk--gespiegelt). */ .werk-inhalt { gap: calc(var(--werk-gap) * 0.7); } /* Jeder zweite SICHTBARE Artikel spiegelt sich: Bild und Text tauschen die Seite, normaler (größerer) Abstand. Bewusst klassenbasiert statt :nth-child — bei aktivem Kategorie-Filter würde :nth-child weiterhin die Position im kompletten (auch ausgeblendeten) DOM zählen und der Links-Rechts-Wechsel würde durcheinandergeraten. Die Klasse wird von script.js anhand der aktuell sichtbaren Artikel neu vergeben. Die Reihenfolge im Quellcode (Bild vor Text) bleibt unverändert. */ .werk--gespiegelt .werk-inhalt { flex-direction: row-reverse; gap: var(--werk-gap); } } .werk-text-body { max-width: 62ch; margin: 0 auto; text-align: left; } .werk-kategorie { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.6em; } .werk-titel { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; margin-bottom: 0.5em; } .werk-credits { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--color-muted); font-style: italic; } .werk-body { color: var(--color-text); } .werk-source { font-size: 13px; color: var(--color-muted); font-style: italic; } /* Website-Links aus dem Originaltext (z.B. arnemaynard.com) — dezent, unterscheidet sich bewusst vom "Ansehen"-PDF-Button darunter. */ .werk-weblinks { margin-top: 0.6em; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 10px; } .werk-weblinks a { color: var(--color-accent); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .werk-weblinks a:hover, .werk-weblinks a:focus-visible { border-bottom-color: var(--color-accent); } .werk-links { margin-top: 0.8em; display: flex; flex-wrap: wrap; gap: 4px 10px; } .werk-view { display: inline-block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--color-text); padding-bottom: 2px; } .werk-view:hover, .werk-view:focus-visible { color: var(--color-muted); border-color: var(--color-muted); } /* Platzhalter für Werk-Bilder, die noch nicht als Bildpaar vorliegen. Größe (aspect-ratio/max-height/height) kommt bewusst aus der ".werk-bilder img, .werk-bild-platzhalter"-Regel weiter oben, damit hier keine widersprüchliche Kaskade entsteht. */ .werk-bild-platzhalter { background: repeating-linear-gradient( 135deg, var(--color-bg-soft), var(--color-bg-soft) 10px, #efece7 10px, #efece7 20px ); border: 1px dashed var(--color-line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; } .werk-bild-platzhalter span { font-size: 11px; letter-spacing: 0.06em; color: var(--color-muted); font-style: italic; } /* ============================== Kontakt ================================= */ .kontakt { background: var(--panel-bg); border-top: 1px solid var(--color-line); padding: 96px var(--edge); text-align: center; } .kontakt-intro { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 44px); max-width: 18ch; margin: 0 auto 40px; } .kontakt-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; box-shadow: 0 14px 30px -14px rgba(20, 15, 10, 0.35); } /* Name und Rolle teilen sich bewusst dieselbe Typografie (Schriftfamilie, Buchstabenabstand), nur Größe/Gewicht unterscheiden sie leicht. */ .kontakt-name, .kontakt-rolle { font-family: var(--font-display); letter-spacing: 0.02em; } .kontakt-name { font-size: 19px; margin-bottom: 4px; } .kontakt-rolle { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 24px; } .kontakt-tel, .kontakt-mail { display: block; font-size: 15px; color: var(--color-muted); margin-top: 4px; transition: color 0.2s ease; } .kontakt-tel:hover, .kontakt-mail:hover { color: var(--color-text); } /* ============================== Footer =================================== */ .site-footer { padding: 40px var(--edge) 56px; text-align: center; } .footer-nav { display: flex; justify-content: center; gap: 22px; margin-bottom: 14px; } .footer-nav a { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); } .footer-nav a:hover { color: var(--color-text); } .footer-nav--legal a { font-size: 11px; color: var(--color-muted); opacity: 0.8; } .copyright { font-size: 11px; color: var(--color-muted); margin-top: 18px; } /* ============================== Responsive =============================== */ /* Keine eigene Stufe mehr für sehr schmale Screens: unter 700px skaliert die komplette Seite proportional (siehe .scale-wrap), das Mobile-Layout selbst bleibt unverändert auf 700px Referenzbreite. */ /* ============================ Bedienbarkeit =============================== */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ============================ Rechtsseiten ================================ Impressum & Datenschutz: schlichte, lesbare Textseite im gleichen Look wie der Rest der Seite, ohne Arbeiten-Dropdown/Hintergrund-Spielerei. ============================================================================ */ .legal-page { /* doppelt so breit wie das normale Fließtext-Maß */ max-width: calc(var(--content-width) * 2); margin: 0 auto; padding: 72px var(--edge) 96px; } .legal-titel { font-size: clamp(40px, 7vw, 64px); color: var(--color-accent); margin-bottom: 0.9em; } .legal-page h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); margin: 2em 0 0.6em; } .legal-page h2:first-of-type { margin-top: 0; } .legal-page h3 { font-family: var(--font-body); font-weight: 600; font-size: 15px; margin: 1.6em 0 0.5em; } .legal-page p { color: var(--color-muted); margin-bottom: 1em; } .legal-page address { font-style: normal; color: var(--color-muted); margin-bottom: 1em; } .legal-page ul { color: var(--color-muted); margin: 0 0 1em; padding-left: 1.2em; } .legal-page li { margin-bottom: 0.3em; } .legal-page a { color: var(--color-accent); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .legal-page a:hover, .legal-page a:focus-visible { border-bottom-color: var(--color-accent); } .legal-back { display: inline-block; margin-bottom: 48px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); } .legal-back:hover, .legal-back:focus-visible { color: var(--color-text); }