/* ==========================================================
   Eigene Aufmachung für aachen-foto.de
   (wird nach style.css geladen und überschreibt Schrift & Optik)
   ========================================================== */
@font-face { font-family: "Fraunces"; font-weight: 400; font-display: swap; src: url("fonts/fraunces-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/fraunces-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2"); }

:root { --bg: #0b0b0d; --bg-2: #141417; --bg-3: #1b1b1f; --linie: #26262b; --serif: "Fraunces", Georgia, serif; }

/* Überschriften: Serifenschrift statt Großbuchstaben */
h1, h2, h3 { font-family: var(--serif); text-transform: none; letter-spacing: -.01em; font-weight: 400; }
h2 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; }
h3 { font-weight: 600; font-size: 24px; }
h2 em, h1 em { color: var(--akzent); }
.marke { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 24px; }

/* Einstieg: Text als Karte über der Slideshow */
.hero-text .wrap > * { position: relative; }
.hero-text .wrap { display: flex; }
.hero-text .wrap::before { content: none; }
.hero-text h1, .hero-text .unterzeile, .hero-text .knoepfe { max-width: 540px; }
.hero-text .wrap > h1 { margin-top: 0; }
.hero-karte { background: rgba(11,11,13,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-top: 3px solid var(--akzent); padding: 30px 34px 32px; max-width: 620px; }
@media (max-width: 420px) { .hero h1 { white-space: normal; } .hero-karte { padding: 24px 22px; } }
.hero h1 { font-size: clamp(44px, 5.4vw, 76px); white-space: nowrap; line-height: .98; text-shadow: none; }
.hero .unterzeile { font-size: 19px; text-shadow: none; color: #d6d3cb; }
.hero::after { background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 50%); }
.slide img { filter: brightness(.85); }

/* Filter: runde Schaltflächen, bleiben beim Scrollen oben stehen */
#galerie .filter { position: sticky; top: 64px; z-index: 20; background: rgba(11,11,13,.94); backdrop-filter: blur(8px);
  margin: 26px calc(-1 * var(--rand)) 0; padding: 12px var(--rand); border-bottom: 1px solid var(--linie);
  flex-wrap: nowrap; overflow-x: auto; }
#galerie .filter button { flex: none; border-radius: 99px; padding: 7px 18px; }

/* Abschnitt "Im Fokus" */
.fokus { display: grid; grid-template-columns: 1.6fr 1fr; background: var(--bg-2); padding: 0; }
.fokus figure { margin: 0; cursor: zoom-in; }
.fokus img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.fokus .text { padding: clamp(30px, 5vw, 70px); align-self: center; }
.fokus .text p { color: #cfcdc6; }
@media (max-width: 860px) { .fokus { grid-template-columns: 1fr; } .fokus img { min-height: 0; } }