/* ==========================================================================
   Christian Stadler Photography — Design System
   Premium, minimalistisches Fotografen-Portfolio.
   Bewusst OHNE Google Fonts / externe Webfont-CDNs geladen (Performance +
   Datenschutz).
   ========================================================================== */

:root{
  --bg:#ffffff;
  --bg-alt:#f6f5f2;
  --ink:#15140f;
  --ink-soft:#57544c;
  --line:#e6e3db;
  --accent:#9c8256;      /* dezentes, warmes Bronze/Gold als Akzent */
  --accent-ink:#7a6742;
  --white:#ffffff;
  --radius:2px;
  --maxw:1240px;
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.75rem;
  --space-4:3rem;
  --space-5:5rem;
  --space-6:8rem;
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --dur:.5s;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;          /* folgt der Grundgröße von html – siehe Tablet-Block unten */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.15;
  margin:0 0 var(--space-2);
  letter-spacing:.01em;
}
h1{font-size:clamp(2.4rem,5.5vw,4.4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
p{margin:0 0 var(--space-2);color:var(--ink-soft)}
.eyebrow{
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-ink);
  font-weight:600;
  margin-bottom:var(--space-1);
  display:block;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-3)}
@media (max-width:640px){ .wrap{padding:0 var(--space-2)} }

section{padding:var(--space-6) 0}
.section-alt{background:var(--bg-alt)}
.section-head{max-width:640px;margin:0 0 var(--space-4)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.95rem 1.9rem;
  font-size:.92rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  border-radius:var(--radius);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  cursor:pointer;
  font-family:var(--sans);
}
.btn:hover{background:var(--ink);color:var(--white)}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-light{border-color:rgba(255,255,255,.7);color:var(--white)}
.btn-light:hover{background:var(--white);color:var(--ink)}
/* accent-ink statt accent als Button-Hintergrund: weiß auf accent-ink hat
   ~5.5:1 Kontrast (WCAG AA), weiß auf accent nur ~3.7:1 (nicht ausreichend
   für normal großen Buttontext). */
.btn-accent{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--white)}
.btn-accent:hover{background:#5f4f31;border-color:#5f4f31}

/* Header / Nav */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:700;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-2) var(--space-3);
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-solid{
  background:var(--bg);
  box-shadow:0 1px 0 var(--line);
}
.site-header.is-solid .logo{color:var(--ink)}
.site-header.is-solid .nav-toggle span{background:var(--ink)}
.logo{
  font-family:var(--serif);
  font-size:1.15rem;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--white);
}

/* Die Navigation ist bewusst immer ein Button, der ein Menü öffnet – nie
   eine Liste im Header. Bei sechs Einträgen (inkl. Patreon) wurde eine
   ausgeschriebene Zeile rechts oben schnell zu eng bzw. schlecht lesbar,
   vor allem vor dunklen wie hellen Hero-Bildern gleichermaßen. Ein Klick
   auf den Button öffnet ein ruhiges, gut lesbares Menü von rechts. */
.nav{
  position:fixed;inset:0 0 0 auto;z-index:600;
  width:min(82vw,320px);
  display:flex;flex-direction:column;gap:0;
  margin:0;
  padding:6.5rem var(--space-3) var(--space-3);
  background:var(--bg);
  transform:translateX(100%);
  transition:transform var(--dur) var(--ease);
}
.nav.is-open{transform:translateX(0);box-shadow:-8px 0 24px rgba(0,0,0,.08)}
.nav a{
  color:var(--ink);
  text-decoration:none;
  display:block;
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
  transition:border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--ink)}
/* Patreon ist das Hauptstandbein – der Menüpunkt hebt sich deshalb bewusst
   farblich ab, im Menü genauso wie im Footer. */
.nav a.nav-patreon{color:var(--accent-ink);font-weight:700}
.nav a.nav-patreon:hover{border-color:var(--accent-ink)}
.site-footer a.nav-patreon{color:#cbab74;font-weight:700}
.site-footer a.nav-patreon:hover{color:#e0c491}
.nav-toggle{
  display:block;background:none;border:0;cursor:pointer;padding:.4rem;
  /* Eigener Stacking-Context mit höherem z-index als .nav (600): sonst
     verschwindet der Button beim Öffnen unter dem Menü und lässt sich
     nicht mehr anklicken, um es wieder zu schließen. */
  position:relative;z-index:650;
}
.nav-toggle span{
  display:block;width:26px;height:2px;background:var(--white);margin:5px 0;
  transition:background var(--dur) var(--ease);
}

/* Ab Tablet-Breite darf das Menü etwas breiter sein. */
@media (min-width:700px){
  .nav{width:min(52vw,380px)}
}

/* Hero */
.hero{
  position:relative;
  min-height:90svh;
  display:flex;align-items:flex-end;
  color:var(--white);
  background:#1c1a16 center/cover no-repeat;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(10,9,7,.78) 0%, rgba(10,9,7,.25) 55%, rgba(10,9,7,.1) 100%);
}
/* Hero ohne Titelbild: die abdunkelnde Verlaufsebene ist nur für Bilder
   gedacht (bessere Textlesbarkeit) – auf reiner Flächenfarbe weglassen. */
.hero-plain::after{display:none}
/* Zweischichtiger Hero-Hintergrund: eine unscharfe, weiche Version des Fotos
   füllt randlos die gesamte Fläche (egal welches Seitenverhältnis der
   Bildschirm hat), darüber liegt dasselbe Foto unbeschnitten (object-fit:contain).
   So geht bei keinem Bildformat – ob Querformat, Panorama oder Hochformat –
   jemals etwas am Rand verloren; auf sehr breiten oder sehr schmalen
   Bildschirmen erscheinen oben/unten bzw. links/rechts weiche, unscharfe
   Ränder statt eines harten Zuschnitts. */
.hero-bg-blur{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:blur(50px) saturate(1.15) brightness(.6);
  transform:scale(1.15);
  z-index:0;
}
.hero-bg-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  z-index:1;
}
/* width:100% ist nötig, weil .hero ein Flex-Container ist: ohne das schrumpft
   der Inhalt auf Textbreite und wird durch margin:0 auto mittig gezogen,
   statt am linken Seitenrand zu stehen. */
.hero-content{position:relative;z-index:2;width:100%;padding:var(--space-6) var(--space-3) var(--space-5)}
.hero-content .eyebrow{color:rgba(255,255,255,.75)}
.hero-content p{color:rgba(255,255,255,.82);max-width:46ch;font-size:1.05rem}
.hero-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.hero.is-inline{
  min-height:62vh;
  align-items:center;
}
.hero.is-inline .hero-content{padding:calc(var(--space-6) + 2rem) var(--space-3) var(--space-4)}

/* Auf schmalen Handy-Displays ist die Fläche sehr hoch und schmal (Hochformat),
   das Titelfoto dagegen sehr breit (Panorama, ca. 2,67:1). Mit object-fit:contain
   in einer festen Hero-Höhe (wie am Desktop) entsteht dadurch oben/unten sehr
   viel unscharfe Leerfläche, und der Titeltext sitzt unschön dicht am schmalen
   sichtbaren Bildstreifen. Auf Mobilgeräten wird der Hero deshalb umgebaut:
   das Foto steht oben in seinem eigenen, zum Bild passenden Seitenverhältnis
   (voller Bildinhalt, kein Zuschnitt, keine Leerfläche), der Titeltext folgt
   danach als eigener Block auf dunklem Grund darunter statt darüber zu liegen. */
@media (max-width:699px){
  .hero:not(.is-inline){
    display:block;
    min-height:0;
    background:#1c1a16;
  }
  .hero:not(.is-inline) .hero-bg-blur{display:none}
  .hero:not(.is-inline) .hero-bg-img{
    position:relative;inset:auto;
    display:block;width:100%;height:auto;
    aspect-ratio:2.667/1;
    object-fit:cover;object-position:center;
  }
  .hero:not(.is-inline)::after{display:none}
  .hero:not(.is-inline) .hero-content{
    padding:var(--space-4) var(--space-3) var(--space-5);
  }
  .hero.is-inline{min-height:42vh}
}

/* Reveal-on-scroll (dezent) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* Grids */
.grid{display:grid;gap:var(--space-3)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:880px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .grid-3,.grid-4{grid-template-columns:1fr} }

.photo-tile{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bg-alt);
  text-decoration:none;
}
.photo-tile img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.photo-tile:hover img{transform:scale(1.045)}
.photo-tile .tile-label{
  position:absolute;left:0;right:0;bottom:0;
  padding:.9rem 1rem;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color:#fff;font-size:.85rem;letter-spacing:.03em;
  opacity:0;transform:translateY(6px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.photo-tile:hover .tile-label{opacity:1;transform:none}

/* Filter bar (Portfolio) */
.filter-bar{
  display:flex;gap:.6rem;flex-wrap:wrap;
  margin-bottom:var(--space-3);
}
.filter-btn{
  border:1px solid var(--line);
  background:var(--white);
  padding:.55rem 1.1rem;
  font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;border-radius:100px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter-btn:hover{border-color:var(--ink)}
.filter-btn.is-active{background:var(--ink);color:var(--white);border-color:var(--ink)}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(10,9,7,.94);
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-2);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox-inner{max-width:min(90vw,1100px);max-height:88vh;text-align:center}
.lightbox-inner img{max-height:80vh;margin:0 auto;border:1px solid rgba(255,255,255,.15)}
.lightbox-caption{color:rgba(255,255,255,.75);font-size:.85rem;margin-top:1rem}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-size:1.6rem;line-height:1;padding:.75rem;
}
.lightbox-close{top:.5rem;right:.5rem}
.lightbox-prev{left:.5rem;top:50%;transform:translateY(-50%)}
.lightbox-next{right:.5rem;top:50%;transform:translateY(-50%)}

/* Pricing */
.price-card{
  border:1px solid var(--line);
  padding:var(--space-4) var(--space-3);
  text-align:center;
  background:var(--white);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.price-card .price{font-family:var(--serif);font-size:2.4rem;color:var(--ink)}
.price-card ul{list-style:none;margin:0;padding:0;text-align:left;color:var(--ink-soft);font-size:.94rem}
.price-card li{padding:.4rem 0;border-bottom:1px solid var(--line)}
.price-card li:last-child{border-bottom:0}
/* Einzelne Preiskarte: ab 561 px mittig und breiter statt in einer von drei Spalten */
@media (min-width:561px){ #preise .grid-3{grid-template-columns:minmax(0,440px);justify-content:center} }

/* ==========================================================================
   Bereichs-Markierung (Patreon-Seite) – kleine Zeile mit Linie über einer
   Überschrift.
   ========================================================================== */
.track-mark{
  display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.5rem;
}
.track-mark::before{content:"";width:30px;height:1px;background:var(--accent)}

/* ==========================================================================
   Patreon-Bereich („Vault“) – bewusst dunkel in die helle Seite gesetzt:
   ein anderer Raum für ein anderes Publikum.
   ========================================================================== */
.vault{
  background:#15130f;
  color:rgba(255,255,255,.7);
}
.vault h2{color:#fff}
.vault p{color:rgba(255,255,255,.66)}
.vault .track-mark{color:rgba(255,255,255,.45)}
.vault .track-mark::before{background:#cbab74}
.vault .btn{border-color:rgba(255,255,255,.45);color:#fff}
.vault .btn:hover{background:#fff;color:#15130f}
.vault .btn-accent{background:#cbab74;border-color:#cbab74;color:#15130f}
.vault .btn-accent:hover{background:#e0c491;border-color:#e0c491;color:#15130f}
.vault-head{max-width:56ch;margin-bottom:var(--space-4)}
.vault-lead{margin-top:var(--space-2)}
.vault-foot{
  margin-top:var(--space-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center;
}
.vault-whisper{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,2vw,1.35rem);color:rgba(255,255,255,.82);max-width:48ch;
}
.vault-note{font-size:.78rem;color:rgba(255,255,255,.42)}

/* Vorschaubilder: normale, scharfe Fotos – ein sanftes Heranzoomen beim
   Hover genügt als Effekt. */
.veil-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
@media (max-width:760px){ .veil-row{grid-template-columns:1fr;max-width:400px;margin-inline:auto} }
.veil{
  position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0c0b09;
}
.veil img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.veil:hover img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){ .veil img{transition:none} }
.veil figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.1rem;text-align:center;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78);
  background:linear-gradient(to top, rgba(8,7,6,.92), transparent);
}

/* Making-of-Video: eigene, breite 16:9-Fläche unterhalb der drei Fotos.
   Die Bildunterschrift liegt bewusst UNTER dem Video (nicht als Overlay),
   damit sie die eingebauten Abspiel-Regler des Browsers nicht überdeckt. */
.veil-video{margin:var(--space-3) 0 0}
.veil-video-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0c0b09;
}
.veil-video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.veil-video figcaption{
  padding-top:.7rem;text-align:center;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78);
}

/* Zitat */
.pull-quote{
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  color:var(--ink);
  max-width:44ch;
  line-height:1.4;
}

/* Hinweistext (Cookie-Einstellungen) */
.form-note{font-size:.85rem;color:var(--ink-soft)}

/* Footer */
.site-footer{
  background:#151310;color:rgba(255,255,255,.72);
  padding:var(--space-5) 0 var(--space-3);
  font-size:.9rem;
}
.site-footer a{color:rgba(255,255,255,.72);text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-4)}
@media (max-width:720px){ .footer-grid{grid-template-columns:1fr;gap:var(--space-3)} }
.footer-grid h4{color:#fff;font-size:.95rem;margin-bottom:var(--space-1)}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:.5rem}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:var(--space-4);padding-top:var(--space-2);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  font-size:.78rem;color:rgba(255,255,255,.5);
}

/* Skip link (Accessibility) */
.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--ink);color:#fff;padding:.75rem 1.25rem;z-index:2000;
}
.skip-link:focus{left:var(--space-2);top:var(--space-2)}

/* Utility */
.text-center{text-align:center}

/* ==========================================================================
   Cookie-Consent-Banner (siehe /js/cookie-consent.js)
   ========================================================================== */
#cc-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:2000;
  background:var(--white);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(0,0,0,.08);
  padding:var(--space-3);
  transform:translateY(110%);
  transition:transform .6s var(--ease);
}
#cc-banner.is-visible{transform:translateY(0)}
.cc-banner-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  flex-wrap:wrap;
}
.cc-text{max-width:60ch;flex:1 1 320px}
.cc-text p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.cc-text a{color:var(--accent-ink);text-decoration:underline}
.cc-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.cc-btn{
  padding:.75rem 1.2rem;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;
  border-radius:var(--radius);cursor:pointer;border:1px solid var(--ink);background:var(--white);color:var(--ink);
  font-family:var(--sans);
}
.cc-btn:hover{background:var(--bg-alt)}
.cc-btn.cc-primary{background:var(--ink);color:#fff}
.cc-btn.cc-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

#cc-modal-backdrop{
  position:fixed;inset:0;background:rgba(10,9,7,.6);z-index:2100;
  display:none;align-items:center;justify-content:center;padding:var(--space-2);
}
#cc-modal-backdrop.is-open{display:flex}
#cc-modal{
  background:var(--white);max-width:560px;width:100%;
  padding:var(--space-4);max-height:88vh;overflow:auto;
  border-radius:var(--radius);
}
#cc-modal h2{font-size:1.4rem;margin-bottom:var(--space-2)}
.cc-category{
  border:1px solid var(--line);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);
}
.cc-category-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.cc-category-head strong{font-size:.98rem}
.cc-category p{font-size:.85rem;margin:.4rem 0 0}
.cc-switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.cc-switch input{opacity:0;width:0;height:0}
.cc-switch .slider{
  position:absolute;inset:0;background:#cfcabf;border-radius:24px;transition:background var(--dur) var(--ease);cursor:pointer;
}
.cc-switch .slider::before{
  content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform var(--dur) var(--ease);
}
.cc-switch input:checked + .slider{background:var(--accent)}
.cc-switch input:checked + .slider::before{transform:translateX(20px)}
.cc-switch input:disabled + .slider{opacity:.55;cursor:not-allowed}
.cc-modal-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--space-3)}

#cc-reopen{
  position:fixed;left:var(--space-2);bottom:var(--space-2);z-index:1500;
  background:var(--ink);color:#fff;border:0;border-radius:100px;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);
  font-size:1.15rem;
}
#cc-reopen:hover{background:var(--accent-ink)}

/* ==========================================================================
   TABLET (ca. 700–1180px)
   Auf Tablets wirkte die Seite zu klein: Die Schrift skaliert dort vor allem
   über vw-Werte, und die stehen auf einem 10-Zoll-Display in keinem guten
   Verhältnis zur Bildschirmfläche. Deshalb wird hier die Grundschriftgröße
   angehoben – dadurch wachsen Typografie, Buttons und Abstände gemeinsam –
   und die Überschriften bekommen eigene, größere Werte.
   ========================================================================== */
@media (min-width:700px) and (max-width:1180px){
  html{font-size:18px}

  h1{font-size:clamp(2.9rem,6.6vw,4rem)}
  h2{font-size:clamp(2rem,4.4vw,2.7rem)}

  /* Die Hero-Bereiche waren auf hohen Tablets fast leer, weil der Text ganz
     unten klebt – etwas niedriger rückt den Inhalt in den sichtbaren Bereich. */
  .hero{min-height:70svh}
  .hero.is-inline{min-height:50vh}
  .hero-content p{font-size:1.2rem}

  /* Die großzügigen Desktop-Abstände würden mit der größeren Grundschrift
     zu lang werden – hier eine Stufe kleiner. */
  section{padding:var(--space-5) 0}

  .btn{font-size:1rem;padding:1rem 2rem}
  .eyebrow,.track-mark{font-size:.82rem}
  .filter-btn{font-size:.92rem;padding:.65rem 1.3rem}
  .tile-label{font-size:.95rem}
  .price-card .price{font-size:2.9rem}
  .veil figcaption{font-size:.8rem}
  .cc-text p{font-size:1rem}
}

/* ==========================================================================
   Editorial-Layout: ruhige, magazinartige Struktur – wenige, großzügige
   Abschnitte statt vieler kurzer, sich wiederholender Blöcke.
   ========================================================================== */
.folio{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--serif);font-style:italic;
  font-size:.95rem;color:var(--accent-ink);
  margin-bottom:var(--space-2);
}
.folio::before{content:"";width:40px;height:1px;background:var(--line)}
.vault .folio{color:#cbab74}
.vault .folio::before{background:rgba(255,255,255,.25)}

.intro-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-5);align-items:center}
@media (max-width:880px){ .intro-split{grid-template-columns:1fr;gap:var(--space-3)} }
.intro-split .photo-tile{aspect-ratio:3/4}

.lede{
  font-family:var(--serif);
  font-size:clamp(1.1rem,1.8vw,1.35rem);
  color:var(--ink);
  max-width:56ch;
}

.section-foot{margin-top:var(--space-3)}

/* Ein einzelner, ruhiger Kontaktblock (Telefon und E-Mail) */
.contact-simple{max-width:56ch}
.contact-simple .contact-links{
  display:flex;flex-direction:column;gap:.5rem;
  margin:var(--space-3) 0;
  font-family:var(--serif);font-size:1.2rem;
}