@font-face{font-family:"Cormorant Garamond";src:url(fonts/cg-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cg-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cg-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cg-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cg-500i.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}

:root{
  --ink:#1A1712; --paper:#FBFAF6; --hair:#E5E1D8; --card:#EEEAE1;
  /* Fliesstext-Grau: 5,2:1 auf --paper und damit WCAG-AA-tauglich. */
  --muted:#6F6A5E;
  --focus:#1A1712; --maxw:1200px;
  --nav-h:66px;                 /* Hoehe des Sticky-Headers, fuer Sprungmarken */
  --gap:14px;                   /* Rasterabstand */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
picture{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;margin:0;line-height:1.06}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* Sprungmarken duerfen nicht unter dem Sticky-Header landen. */
:target,#top,#arbeiten,#ueber,#kontakt{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* Tastatur-Sprunglink */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;font-size:.9rem}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- Header ---------- */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.55rem clamp(1.1rem,4vw,2.4rem);
  padding-top:calc(.55rem + env(safe-area-inset-top,0px));
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--hair)}
@supports not (backdrop-filter:blur(1px)){.nav{background:var(--paper)}}
.nav nav{display:flex;gap:clamp(1rem,4vw,1.8rem);align-items:baseline}
.nav nav a{color:var(--muted);font-size:.86rem;letter-spacing:.02em;transition:color .2s;
  padding:.35rem 0;white-space:nowrap}
.nav nav a:hover{color:var(--ink)}

.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:clamp(30px,7.2vw,47px);width:auto;display:block}

/* Mobil: Logo etwas kleiner, Navigation bleibt sichtbar. */
@media(max-width:640px){
  .nav{padding-left:1rem;padding-right:1rem;background:var(--paper);gap:.6rem}
  .nav nav{gap:.95rem}
  .nav nav a{font-size:.8rem}
  .brand img{height:30px}
}
@media(max-width:400px){
  .nav nav{gap:.75rem}
  .nav nav a{font-size:.76rem}
  .brand img{height:27px}
}

/* ---------- Hero ---------- */
.hero{position:relative;height:92svh;min-height:480px;overflow:hidden;background:#000}
.hero picture,.hero picture img{width:100%;height:100%}
.hero img{object-fit:cover;opacity:.96}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 52%,rgba(0,0,0,.82) 100%)}
.hero-content{position:absolute;left:0;right:0;z-index:2;color:#fff;
  bottom:calc(clamp(3rem,10vw,5.5rem) + env(safe-area-inset-bottom,0px));
  padding:0 clamp(1.1rem,5vw,3rem);animation:rise 1s .05s both cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-content h1{margin:0}
.hero-logo{width:clamp(230px,54vw,520px);height:auto;margin-bottom:1.15rem;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.6))}
.hero-content p{margin:0;font-family:var(--sans);font-size:clamp(.82rem,1.9vw,.98rem);
  line-height:1.45;letter-spacing:.02em;opacity:.94;max-width:42ch;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* ---------- Abschnitte ---------- */
/* Statt Innenabstand oben UND unten je Abschnitt nur oben – sonst addieren sich
   die Werte zwischen zwei Abschnitten zur doppelten Luecke. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,5rem) clamp(1.1rem,5vw,3rem) 0}
main>.wrap:last-child{padding-bottom:clamp(3rem,7vw,5rem)}
.section-head{max-width:60ch;margin-bottom:1.9rem;padding-bottom:1rem;border-bottom:1px solid var(--hair)}
.section-head h2{font-size:clamp(2rem,5vw,3rem)}
.lead{color:var(--muted);margin:.7rem 0 0;font-size:1.02rem;max-width:52ch}

/* ---------- Filter ---------- */
/* Eine Zeile, die bei Bedarf horizontal scrollt – kein Umbruch einzelner
   Begriffe mehr in eine zweite Zeile. */
.filters{display:flex;gap:1.4rem;margin:-.2rem 0 1.8rem;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:.5rem;scroll-padding-left:1rem}
.filters::-webkit-scrollbar{display:none}
@media(max-width:620px){
  .filters{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
           mask-image:linear-gradient(90deg,#000 88%,transparent)}
}
.filters button{border:0;background:none;font-family:var(--sans);font-size:.95rem;color:var(--muted);
  cursor:pointer;padding:.15rem 0;position:relative;letter-spacing:.01em;transition:color .2s;
  flex:0 0 auto;white-space:nowrap}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink)}
.filters button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-.3rem;
  height:1.5px;background:var(--ink)}

/* ---------- Galerie ---------- */
.grid{columns:2;column-gap:var(--gap)}
@media(min-width:720px){.grid{columns:3}}
@media(min-width:1140px){.grid{columns:4}}
.card{position:relative;break-inside:avoid;margin:0 0 var(--gap);overflow:hidden;
  background:var(--card);cursor:zoom-in}
.card img{width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.7,.2,1)}

/* Bildunterschrift: kraeftigerer Verlauf plus Schattenkante, damit sie auch
   auf hellen Motiven (Schnee, Kies, Himmel) sicher lesbar bleibt. */
.card figcaption{position:absolute;inset:auto 0 0 0;padding:2.6rem .85rem .8rem;color:#fff;
  font-family:var(--serif);font-style:italic;font-size:.9rem;line-height:1.3;letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.75);
  background:linear-gradient(transparent,rgba(0,0,0,.28) 38%,rgba(0,0,0,.72));
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
@media(hover:hover){.card:hover img{transform:scale(1.05)}.card:hover figcaption{opacity:1;transform:none}}
@media(hover:none){.card figcaption{opacity:1;transform:none;font-size:.82rem;padding:2.1rem .7rem .65rem}}
.card.hide{display:none}
.card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* Sanftes Einblenden beim Scrollen */
.card.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.card.reveal.in{opacity:1;transform:none}

/* ---------- Über mich ---------- */
/* Das Portraitfoto liegt nur in 256 px vor – darum wird es bewusst klein
   ausgespielt statt hochskaliert (sonst wirkt es unscharf). Sobald eine
   groessere Datei vorliegt, kann --portrait-w erhoeht werden. */
.about{--portrait-w:260px}
.about-grid{display:grid;grid-template-columns:var(--portrait-w) minmax(0,1fr);
  align-items:start;gap:clamp(1.8rem,4vw,3.5rem);max-width:940px}
.about-portrait{margin:0;background:var(--card);overflow:hidden;width:var(--portrait-w)}
.about-portrait img{width:100%;height:auto;border:1px solid var(--hair)}
.about-copy{min-width:0}
.about .intro{font-family:var(--serif);font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.4;
  font-weight:400;max-width:34ch;margin:0}
.about p.sub{color:var(--muted);font-size:1rem;line-height:1.7;max-width:62ch;margin:1.3rem 0 0}
@media(max-width:760px){
  .about-grid{grid-template-columns:1fr;gap:1.6rem}
  .about-portrait{width:min(100%,220px)}
}

/* ---------- Kontakt ---------- */
.contact-links{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;margin-top:1.1rem}
.mail{display:inline-block;font-family:var(--serif);font-size:clamp(1.4rem,4vw,2.2rem);
  border-bottom:1px solid var(--hair);padding-bottom:3px;transition:border-color .2s;
  word-break:break-word}
.mail:hover{border-color:var(--ink)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--hair);margin-top:clamp(3rem,7vw,5rem);
  padding:2.2rem clamp(1.1rem,5vw,3rem);
  padding-bottom:calc(2.2rem + env(safe-area-inset-bottom,0px));
  display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;justify-content:space-between;
  color:var(--muted);font-size:.84rem}
footer .brand img{height:26px}
footer a{color:var(--muted);border-bottom:1px solid transparent}
footer a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- Lightbox ---------- */
/* Der Sticky-Header nutzt backdrop-filter. Browser rendern so gefilterte
   Flaechen in einer eigenen Ebene, wodurch der Header samt Seiteninhalt
   ueber der Lightbox liegen kann. Solange die Lightbox offen ist, wird der
   Header daher ausgeblendet - visibility statt display, damit die Seite
   darunter nicht springt. */
body.lb-open .nav{visibility:hidden}
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:#0C0B09;
  padding:calc(3.6rem + env(safe-area-inset-top,0px)) .5rem calc(3.4rem + env(safe-area-inset-bottom,0px))}
.lb[hidden]{display:none}
.lb.open{display:flex;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:auto}
.lb figcaption{position:absolute;left:1rem;right:1rem;text-align:center;color:#fff;
  bottom:calc(1.9rem + env(safe-area-inset-bottom,0px));
  font-family:var(--serif);font-style:italic;font-size:.95rem;opacity:.92}
.lb .lb-count{position:absolute;left:0;right:0;text-align:center;margin:0;color:#fff;
  bottom:calc(.75rem + env(safe-area-inset-bottom,0px));
  font-size:.74rem;letter-spacing:.08em;opacity:.55}
.lb button{position:absolute;background:none;border:0;color:#fff;width:56px;height:56px;
  font-size:1.9rem;cursor:pointer;opacity:.75;transition:opacity .2s;
  display:flex;align-items:center;justify-content:center;line-height:1}
.lb button:hover{opacity:1}
.lb .x{top:calc(.5rem + env(safe-area-inset-top,0px));right:.4rem;font-size:2.1rem}
.lb .prev{left:.2rem;top:50%;transform:translateY(-50%)}
.lb .next{right:.2rem;top:50%;transform:translateY(-50%)}

/* ---------- Rechtstexte ---------- */
.legal{max-width:66ch;padding-bottom:clamp(3rem,7vw,5rem)}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.2rem}
.legal .updated{color:var(--muted);font-size:.9rem;margin-bottom:2.2rem}
.legal h2{font-family:var(--serif);font-weight:500;font-size:1.55rem;margin:2.2rem 0 .5rem}
.legal p,.legal li{color:#34302A;line-height:1.75}
.legal ul{padding-left:1.2rem}
.legal li{margin:.2rem 0}
.legal a{color:var(--ink);border-bottom:1px solid var(--hair)}
.legal a:hover{border-color:var(--ink)}
.legal dl{margin:.3rem 0}
.legal dt{font-weight:600;margin-top:.9rem}
.legal dd{margin:0}
.back{display:inline-block;margin-top:2.6rem;color:var(--muted);border-bottom:1px solid var(--hair)}
.back:hover{color:var(--ink);border-color:var(--ink)}