/* ==========================================================================
   Arno Helfer – Naturfotografie
   Design-Tokens: warmes Dunkel (Wald bei Nacht) + goldenes Licht + Moosgrün
   ========================================================================== */

/* ---------- Lokal gehostete Fonts (statt Google Fonts CDN) ----------
   Grund: Google Fonts über fonts.googleapis.com/fonts.gstatic.com laden
   überträgt die IP-Adresse des Besuchers ohne Einwilligung an Google
   (siehe LG München I, Az. 3 O 17493/20) – rechtliches Risiko in
   Deutschland. Dateien liegen lokal im Ordner /fonts neben dieser CSS. */
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-400-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-500-italic.woff2") format("woff2");
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Work Sans";
  src:url("fonts/work-sans-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Work Sans";
  src:url("fonts/work-sans-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Work Sans";
  src:url("fonts/work-sans-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Work Sans";
  src:url("fonts/work-sans-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  --bg-ink:      #12140F;
  --bg-panel:    #1A1D15;
  --bg-panel-2:  #21251A;
  --text-primary:#F4F0E4;
  --text-muted:  #A6A290;
  --text-faint:  #6F6C5C;
  --accent-gold: #E3BE72;
  --accent-gold-soft: #F2EADA;    /* ---------- #E3BE72; ---------- */
  --accent-moss: #57603F;
  --accent-moss-light: #8A9468;
  --line: rgba(244,240,228,0.12);
  --line-strong: rgba(244,240,228,0.22);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --container: 1220px;
  --edge: clamp(20px, 5vw, 64px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

/* Verhindert, dass beim Springen zu einem Anker ein Stück des vorherigen
   Abschnitts unter dem fixierten Header sichtbar bleibt – greift auch bei
   direkter URL-Navigation (#portfolio etc.) ohne Klick. */
#home, #portfolio, #leistungen, #ueber-mich, #kontakt{
  scroll-margin-top: 48px;
}
body{
  background: var(--bg-ink);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }

/* ---------- Bilderschutz ----------
   Verhindert Ziehen/Speichern über den Browser-eigenen Bild-Dialog.
   Bewusst NUR auf <img>-Elemente beschränkt – Fließtext, Telefonnummer
   und E-Mail-Adresse bleiben normal markier- und kopierbar. */
img{
  -webkit-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;
  user-select:none; -webkit-user-select:none; -moz-user-select:none;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

::selection{ background: var(--accent-gold); color:var(--bg-ink); }

/* Film-grain overlay for a photographic feel */
.grain{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Signature element: light sweep ----------
   A soft warm beam that drifts across a section once it enters view –
   a literal echo of "Licht" in the headline. Off by default, triggered
   by JS adding .is-lit; respects prefers-reduced-motion via rule above. */
.light-sweep{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.light-sweep::before{
  content:""; position:absolute; top:-20%; left:-30%;
  width:55%; height:140%;
  background: linear-gradient(100deg, transparent, rgba(227,190,114,0.16) 45%, rgba(227,190,114,0.05) 55%, transparent);
  transform: translateX(-120%) rotate(8deg);
  transition: transform 1.8s cubic-bezier(.2,.7,.3,1);
}
.is-lit .light-sweep::before{ transform: translateX(220%) rotate(8deg); }

/* ---------- Layout helpers ---------- */
.section{
  position:relative;
  padding: var(--edge);
  max-width: var(--container);
  margin:0 auto;
}
.section-head{ max-width:640px; margin-bottom: clamp(40px,6vw,72px); }
.section-eyebrow{
  font-family: var(--font-mono);
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--accent-gold-soft); margin-bottom:14px;
}
.section-title{
  font-family: var(--font-display);
  font-weight:300;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height:1.15;
  letter-spacing:-0.01em;
}
.section-lede{ margin-top:14px; color:var(--text-muted); font-size:1.05rem; max-width:66ch; }

/* Für Screenreader/SEO vorhanden, visuell ausgeblendet (Design nutzt stattdessen die Eyebrow-Zeile) */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px;
  font-family: var(--font-mono); font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
  border-radius:2px;
  transition: transform .35s ease, background .35s ease, color .35s ease, border-color .35s ease;
}
.btn-primary{
  background: var(--accent-gold-soft); color: #14150F;
}
.btn-primary:hover{ background: var(--accent-gold-soft); transform: translateY(-2px); }
.btn-ghost{
  border:1px solid var(--line-strong); color:var(--text-primary);
}
.btn-ghost:hover{ border-color: var(--accent-gold-soft); color: var(--accent-gold-soft); transform: translateY(-2px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding: 22px var(--edge);
  display:flex; align-items:center;
  transition: padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: rgba(18,20,15,0.86);
  backdrop-filter: blur(10px);
  opacity:0;
  transition: opacity .4s ease;
}
.site-header.is-scrolled{
  padding: 14px var(--edge);
  border-color: var(--line);
}
.site-header.is-scrolled::before{ opacity:1; }
.header-inner{
  max-width: var(--container); margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family: var(--font-mono); font-size:1.25rem; letter-spacing:0.01em;
  line-height:1; display:inline-flex; align-items:center;
}
.logo-dot{ color: var(--accent-gold); }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-family: var(--font-mono); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
  color: var(--text-muted);
  position:relative; padding-bottom:4px;
  transition: color .3s ease;
}
.main-nav a:hover{ color: var(--text-primary); }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--accent-gold-soft); transition: right .3s ease;
}
.main-nav a:hover::after{ right:0; }
.nav-cta{
  color:var(--accent-gold-soft) !important;
  border:1px solid rgba(227,190,114,0.35);
  padding:9px 16px; border-radius:2px;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ border-color: var(--accent-gold-soft); color: var(--accent-gold-soft) !important; }

.nav-instagram{ display:flex; align-items:center; }
.nav-instagram::after{ display:none; }
.nav-instagram-icon{ color: var(--text-muted); transition: color .3s ease; }
.nav-instagram:hover .nav-instagram-icon{ color: var(--accent-gold-soft); }
.nav-instagram-text{ display:none; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:24px;
}
.nav-toggle span{
  display:block; height:1px; background: var(--text-primary); width:100%;
  transition: transform .3s ease, opacity .3s ease;
}

/* Nav-Item mit optionalen Unterpunkten (nur mobil sichtbar) */
.nav-item{ display:contents; }
.nav-sublink{ display:none; }

/* ---------- Sprachumschalter ---------- */
.lang-switch{
  display:flex; align-items:center; gap:9px;
  margin-left:34px;
  padding:7px 12px;
  border:1px solid rgba(227,190,114,0.35);
  border-radius:2px;
  color: var(--text-muted);
}
.lang-icon{ color: var(--accent-gold-soft); flex-shrink:0; }
.lang-btn{
  font-family: var(--font-mono); font-size:0.76rem; letter-spacing:0.04em;
  color: var(--text-muted);
  transition: color .25s ease;
}
.lang-btn.is-active{ color: var(--accent-gold-soft); }
.lang-btn:hover{ color: var(--text-primary); }
.lang-btn.is-active:hover{ color: var(--accent-gold-soft); }
.lang-sep{ color: var(--line-strong); font-size:0.76rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; height:100svh; min-height:560px;
  max-width:1800px; margin:0 auto;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-slider{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08);
  transition: opacity 1.6s ease;
  animation: kenburns 16s ease-in-out infinite alternate;
}
.hero-slide.is-active{ opacity:1; }
@keyframes kenburns{
  0%{ transform:scale(1.0); }
  100%{ transform:scale(1.09); }
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(0deg, rgba(10,11,8,0.92) 0%, rgba(10,11,8,0.45) 42%, rgba(10,11,8,0.15) 65%, rgba(10,11,8,0.55) 100%);
}

.hero-content{
  position:relative; z-index:3;
  max-width: var(--container); margin:0 auto; width:100%;
  padding: 0 var(--edge) clamp(64px,9vw,110px);
}
.eyebrow{
  font-family: var(--font-mono); font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--accent-gold-soft); margin-bottom:22px;
}
.hero-title{
  font-family: var(--font-display); font-weight:300;
  font-size: clamp(2.8rem, 5vw, 6.4rem);
  line-height:0.98; letter-spacing:-0.01em;
  max-width:14ch;
}
.hero-subtitle{
  margin-top:22px;
  font-family: var(--font-mono); font-size: clamp(0.78rem, 1.1vw, 1.25rem);
  color: var(--text-muted);
  font-weight:300;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:38px; }

.hero-dots{
  position:absolute; z-index:3; right:var(--edge); bottom:50%; transform:translateY(50%);
  display:flex; flex-direction:column; gap:12px;
}
.hero-dots button{
  width:8px; height:8px; border-radius:50%;
  border:1px solid var(--line-strong);
  transition: background .3s ease, transform .3s ease;
}
.hero-dots button.is-active{ background:var(--accent-gold-soft); transform:scale(1.3); border-color: var(--accent-gold); }

.scroll-cue{
  position:absolute; z-index:3; left:50%; bottom:28px; transform:translateX(-50%);
  width:1px; height:50px; overflow:visible;
}
.scroll-cue::before{
  content:"";
  position:absolute;
  top:-26px; bottom:-26px; left:-28px; right:-28px;
}
.scroll-cue span{
  display:block; width:1px; height:100%;
  background: var(--line-strong);
  position:relative;
}
.scroll-cue span::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--accent-gold-soft);
  animation: scrolldrip 2.2s ease-in-out infinite;
}
@keyframes scrolldrip{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}

/* ==========================================================================
   Quote band
   ========================================================================== */
.quote-band{
  position:relative;
  background: var(--bg-panel);
  padding: clamp(80px,12vw,140px) var(--edge);
  text-align:center;
  overflow:hidden;
}
.quote-mark{
  font-family: var(--font-display); font-size:5rem; color: var(--accent-moss-light);
  line-height:1; opacity:0.55;
}
.quote-band blockquote{
  font-family: var(--font-display); font-style:italic; font-weight:300;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  max-width:18ch; margin:0 auto;
  color: var(--text-primary);
}
.quote-rule{
  width:64px; height:1px; background: var(--accent-gold); margin:32px auto 0;
}

/* ==========================================================================
   Portfolio
   ========================================================================== */
.portfolio-carousel-wrap{
  position:relative;
}
.portfolio-carousel{
  overflow:hidden;
}
.portfolio-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: transparent;
  color: var(--text-muted);
  border:1px solid var(--line-strong);
  cursor:pointer;
  opacity:0; transition: opacity .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.portfolio-carousel-wrap:hover .portfolio-arrow{ opacity:1; }
.portfolio-arrow:hover{
  color: var(--accent-gold-soft);
  border-color: var(--accent-gold-soft);
}
.portfolio-arrow-prev{ left: calc(-1 * var(--edge)); }
.portfolio-arrow-next{ right: calc(-1 * var(--edge)); }
.portfolio-track{
  display:flex; width:300%;
  transition: transform .8s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.portfolio-page{ width:33.3333%; flex:0 0 33.3333%; }
.portfolio-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap:18px;
}
.portfolio-tile{
  position:relative;
  background-size:cover; background-position:center;
  overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px;
}
.portfolio-tile img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.portfolio-dots{
  display:flex; flex-direction:row; justify-content:center;
  gap:12px; margin-top:32px;
}
.portfolio-dots button{
  width:8px; height:8px; border-radius:50%;
  border:1px solid var(--line-strong); background:transparent;
  cursor:pointer;
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.portfolio-dots button.is-active{ background:var(--accent-gold-soft); transform:scale(1.3); border-color: var(--accent-gold); }
.tile-scrim{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(10,11,8,0.88) 0%, rgba(10,11,8,0.1) 55%, rgba(10,11,8,0.35) 100%);
  transition: background .4s ease;
}
.tile-meta{
  position:relative; z-index:2;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--accent-gold-soft);
  opacity:0; transform:translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.tile-title{
  position:relative; z-index:2;
  font-family:var(--font-display); font-weight:300; font-size:1.9rem; margin-top:8px;
}
.tile-note{
  position:relative; z-index:2;
  font-family:var(--font-mono); font-size:0.74rem; color:var(--text-muted);
  margin-top:8px;
  opacity:0; max-height:0; overflow:hidden;
  transition: opacity .4s ease, max-height .4s ease, margin-top .4s ease;
}
.portfolio-tile:hover .tile-scrim{ background: linear-gradient(0deg, rgba(10,11,8,0.94) 0%, rgba(10,11,8,0.25) 60%, rgba(10,11,8,0.4) 100%); }
.portfolio-tile:hover .tile-meta{ opacity:1; transform:translateY(0); }
.portfolio-tile:hover .tile-note{ opacity:1; max-height:40px; margin-top:8px; }

/* ---------- Testvarianten Abschattung: eine Klasse auf .portfolio-carousel setzen ---------- */
.portfolio-carousel.scrim-off .tile-scrim{
  background: transparent;
}
.portfolio-carousel.scrim-off .portfolio-tile:hover .tile-scrim{
  background: linear-gradient(0deg, rgba(10,11,8,0.65) 0%, rgba(10,11,8,0.12) 60%, rgba(10,11,8,0.22) 100%);
}

.portfolio-carousel.scrim-soft .tile-scrim{
  background: linear-gradient(0deg, rgba(10,11,8,0.55) 0%, rgba(10,11,8,0.05) 55%, rgba(10,11,8,0.18) 100%);
}
.portfolio-carousel.scrim-soft .portfolio-tile:hover .tile-scrim{
  background: linear-gradient(0deg, rgba(10,11,8,0.65) 0%, rgba(10,11,8,0.12) 60%, rgba(10,11,8,0.22) 100%);
}

.portfolio-carousel.scrim-narrow .tile-scrim{
  background: linear-gradient(0deg, rgba(10,11,8,0.9) 0%, rgba(10,11,8,0) 32%);
}
.portfolio-carousel.scrim-narrow .portfolio-tile:hover .tile-scrim{
  background: linear-gradient(0deg, rgba(10,11,8,0.95) 0%, rgba(10,11,8,0.15) 40%, rgba(10,11,8,0) 60%);
}
.portfolio-tile:focus-visible{ outline:2px solid var(--accent-gold); outline-offset:3px; }

.portfolio-cta{ text-align:center; margin-top:44px; }

/* ==========================================================================
   Leistungen
   ========================================================================== */
.services-list{ border-top:1px solid var(--line); }
.service-row{
  display:grid; grid-template-columns: 220px 1fr 230px;
  gap:32px; align-items:start;
  padding: 34px 0;
  border-bottom:1px solid var(--line);
  transition: padding-left .35s ease, border-color .35s ease;
}
.service-row:hover{ padding-left:14px; border-color: var(--line-strong); }
.service-row .btn{ justify-content:center; width:100%; align-self:center; }
.service-name{
  font-family:var(--font-display); font-size:1.6rem; font-weight:300; color:var(--accent-gold-soft);
}
.service-desc{ color:var(--text-muted); max-width:60ch; }
.legal-content{
  columns: 2;
  column-gap: 64px;
  margin-top: 8px;
}
.legal-content h2{
  font-family: var(--font-display);
  font-weight:300;
  font-size:1.3rem;
  color: var(--accent-gold-soft);
  margin: 30px 0 10px;
  break-after: avoid;
  break-inside: avoid;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{
  color: var(--text-muted);
  margin-bottom:14px;
  break-inside: avoid;
  font-size:0.95rem;
  line-height:1.6;
}
.legal-content ul{
  margin: 0 0 14px 20px;
  color: var(--text-muted);
  break-inside: avoid;
  font-size:0.95rem;
  line-height:1.6;
}
.legal-content li{ margin-bottom:6px; }
.legal-content a{
  color: var(--accent-gold-soft);
  border-bottom:1px solid rgba(227,190,114,0.35);
}
.legal-content a:hover{ border-color: var(--accent-gold-soft); }
.legal-content strong{ color: var(--text-primary); font-weight:300; }
@media (max-width:900px){
  .legal-content{ columns:1; }
}
.service-link{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.04em;
  white-space:nowrap; align-self:center;
  color: var(--text-primary);
  border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;
  transition: color .3s ease, border-color .3s ease;
}
.service-link:hover{ color: var(--accent-gold-soft); border-color: var(--accent-gold-soft); }

/* ==========================================================================
   About
   ========================================================================== */
.about{ background: var(--bg-panel); }

.about-layout{
  display:flex; flex-direction:column; gap: clamp(28px,4vw,44px);
}

.about-image{
  position:relative; aspect-ratio: 4/5; overflow:hidden;
  border:1px solid var(--line-strong);
}
.about-image img{ width:100%; height:100%; object-fit:cover; }

.about-row{
  display:grid; grid-template-columns: 3fr 2fr; gap: clamp(32px,6vw,72px);
  align-items:center;
}
.about-row > *{ min-width:0; }

.about-text{ min-width:0; }
.about-text p{ color:var(--text-muted); margin-top:16px; max-width:58ch; }
.about-text .section-title{ margin-bottom:6px; color:var(--text-primary); }

/* ---------- Über-mich: Zitat ---------- */
.about-quote{
  margin:28px 0 0; padding-left:20px; max-width:58ch;
  border-left:2px solid var(--accent-gold);
}
.quote{
  font-weight:700; color:var(--text-primary);
  margin-top:0 !important;
}
.author{
  font-weight:300; font-style:italic; font-size:0.82rem;
  color:var(--text-muted); margin-top:6px !important;
}

/* ---------- Über-mich: Karussell (volle Breite, oben) ---------- */
.about-carousel{
  position:relative; overflow:hidden;
  height: clamp(104px, 12.8vw, 168px); /* -20% ggü. vorheriger Höhe */
  border:1px solid var(--line-strong);
}
.about-carousel-track{
  display:flex; height:100%;
  will-change: transform;
}
.carousel-item{
  max-width:none; height:100%; width:auto; flex:0 0 auto;
  object-fit:cover;
  border-right:1px solid var(--bg-ink);
}

/* ---------- Über-mich: Porträt (rechte Spalte, größer) ---------- */
.about-portrait{ min-width:0; }
.about-portrait img{
  width:100%; max-width:100%; aspect-ratio: 4/5; object-fit:cover;
  border:1px solid var(--line-strong);
}
.about-portrait .eyebrow{
  margin:10px 0 0; font-size:0.7rem; letter-spacing:0.1em;
}

/* ---------- Text + hochformatiges Bild (z. B. Bilder-kaufen-Seite) ---------- */
.split-grid{
  display:grid; grid-template-columns: 1.3fr 0.9fr; gap: clamp(32px,6vw,72px);
  align-items:start;
}
.split-grid > *{ min-width:0; }
.split-image{
  position:relative; aspect-ratio: 3/4; overflow:hidden;
  border:1px solid var(--line-strong);
  background: var(--bg-panel-2);
}
.split-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.split-image.is-placeholder{
  display:flex; align-items:center; justify-content:center;
  color: var(--text-faint);
  font-family: var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; text-align:center;
  padding:24px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  position:relative;
  background: var(--bg-ink);
  border-top:1px solid var(--line);
  padding: clamp(56px,8vw,96px) var(--edge) 0;
  overflow:hidden;
}
.footer-inner{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom: 56px;
}
.footer-tagline{ color:var(--text-muted); margin-top:10px; font-size:0.92rem; }
.footer-brand-photo{
  display:block;
  width:100%; max-width:270px; height:110px;
  object-fit:contain; object-position:left top;
  margin-top:16px;
  mix-blend-mode:screen;
  pointer-events:none; user-select:none;
}
.footer-heading{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--accent-gold-soft); margin-bottom:16px;
}
.footer-col p{ margin-bottom:10px; color:var(--text-muted); font-size:0.92rem; line-height:1.55; }
.footer-col a:hover{ color: var(--text-primary); }
.footer-diamond a{ display:inline-flex; padding-top:2px; }
.footer-copyright-note{ font-size:0.78rem; color:var(--text-faint); }
.footer-bottom{
  border-top:1px solid var(--line);
  padding: 22px var(--edge);
  margin:0 calc(var(--edge) * -1);
  text-align:center;
  font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint); letter-spacing:0.04em;
}

.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(26,29,21,0.85); border:1px solid var(--line-strong);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease;
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ border-color: var(--accent-gold-soft); color: var(--accent-gold-soft); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .about-row{ grid-template-columns:1fr; }
  .about-image{ max-width:360px; }
  .about-portrait{ max-width:360px; }
  .split-grid{ grid-template-columns:1fr; }
  .split-image{ max-width:360px; }
  .service-row{ grid-template-columns:1fr; gap:10px; }
  .service-row .btn{ justify-self:start; width:auto; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  .main-nav{
    position:fixed; top:0; right:0; width:min(78vw,320px);
    max-height: calc(100dvh - 32px);
    background: var(--bg-panel);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:22px;
    padding: 96px var(--edge) 32px;
    transform: translateX(100%);
    transition: transform .4s ease;
    border-left:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow: -16px 24px 48px rgba(0,0,0,0.35);
    overflow-y:auto;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  .nav-item{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; width:100%; }
  .nav-sublink{
    display:block; font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase;
    color: var(--text-faint); padding-left:16px;
    transition: color .3s ease;
  }
  .nav-sublink:hover{ color: var(--text-primary); }

  .nav-instagram-icon{ display:none; }
  .nav-instagram-text{ display:inline; }
  .nav-instagram::after{ display:block; }

  .portfolio-track{ transform:none !important; flex-direction:column; width:100%; }
  .portfolio-page{ width:100%; flex:0 0 auto; }
  .portfolio-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .portfolio-tile{ display:none; }
  .portfolio-tile.mobile-highlight{ display:flex; grid-column:1/-1 !important; grid-row:auto !important; aspect-ratio:4/5; }
  .portfolio-dots{ display:none; }
  .portfolio-arrow{ display:none; }
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
  .hero-dots{ display:none; }
  .footer-brand-photo{ height:64px; max-width:200px; margin-bottom:28px; }

  .lang-switch{ margin-left:auto; margin-right:14px; padding:6px 10px; gap:7px; }
}

@media (max-width: 380px){
  .lang-switch{ padding:5px 8px; margin-right:8px; }
  .lang-icon{ display:none; }
}