/* =========================================
   GLOBAL LAYOUT HELPERS
   ========================================= */

/* ── COLOR DEFINITIONS MOVED TO global.css ── */
/* :root { ... } — auskommentiert, verwendet global.css */
/*
:root {
  --mint: #56686A;
  --white: #F5F5F5;
  --off-black: #525252;
}
*/

.page-wrap {
  max-width: 85vw;
  margin-inline: auto;
}

.container,
.page-container {
  max-width: 85vw;
  margin-inline: auto;
}

/* =========================================
   NAVIGATION (EINHEITLICH)
   ========================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: transparent;
  backdrop-filter: blur(0);
  transition: background 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease, box-shadow 250ms ease;
}

.site-header.is-solid {
  background: var(--mint);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.nav-bar {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 85vw;
  margin-inline: auto;
  padding-inline: clamp(0.5rem, 3vw, 1.5rem);
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: relative;
}

.logo img {
  max-width: 36px;
  max-height: 36px;
  width: 100%;
  height: auto;
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 200ms ease;
}

.logo .logo-onscroll { opacity: 0; }
.site-header.is-solid .logo .logo-onscroll { opacity: 1; }
.site-header.is-solid .logo img:not(.logo-onscroll) { opacity: 0; }

/* Nav — IMMER weiss, auch vor is-solid */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.nav-link {
  font-family: var(--tenor);
  font-size: clamp(0.6rem, 0.95vw, 0.7rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--white) !important;
  position: relative;
  padding-block: 0.2rem;
  padding-inline: 0.1rem;
  line-height: 1;
  transition: opacity 200ms ease;
  opacity: 1;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  width: 0;
  height: 1px;
  background: var(--mint);
  transform: translateX(-50%);
  transition: width 200ms ease;
}

.nav-link:hover {
  opacity: 1;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link--active {
  opacity: 1;
}

.nav-link--active::after {
  width: 100%;
}

/* Mobile */
@media (max-width: 768px) {
  .nav-bar {
    height: 52px;
    gap: 0.75rem;
    padding-inline: 0.75rem;
  }
  .logo { width: 30px; height: 30px; }
  .nav { gap: clamp(0.6rem, 2vw, 1rem); }
  .nav-link { font-size: 0.7rem; letter-spacing: 0.16em; }
}

@media (max-width: 480px) {
  .nav-bar { height: 50px; }
  .nav { gap: 0.5rem; }
  .nav-link { font-size: 0.62rem; letter-spacing: 0.13em; }
   .logo { width: 25px; height: 25px; }
}

/* =========================================
   FOOTER (EINHEITLICH)
   ========================================= */

.site-footer {
  background: var(--mint) !important;
  color: #F5F5F5 !important;
  padding-block: clamp(1.2rem, 2.5vw, 2rem) !important;
  position: relative;
  overflow: hidden;
  border-top: none !important;
  text-align: center;
  padding-bottom: 70px;
}

/* Kein Grain, kein ::before Effekt im Footer */
.site-footer::before {
  display: none !important;
}

.footer-inner {
  max-width: 85vw;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1.5vw, 1rem);
  text-align: center;
}

.footer-copy {
  font-family: var(--tenor);
  font-size: clamp(0.68rem, 0.9vw, 0.8rem);
  letter-spacing: 0.04em;
  opacity: 0.85;
  color: #F5F5F5 !important;
}

/* Social Icons */
.footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  flex-wrap: wrap;
}

.social-link {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #F5F5F5 !important;
  background: transparent !important;
  transition: transform 200ms ease, border-color 200ms ease !important;
}

.social-link::before,
.social-link::after {
  display: none !important;
}

.social-link svg,
.social-link i {
  width: 16px !important;
  height: 16px !important;
  font-size: 12px !important;
  position: relative !important;
  z-index: 1;
  color: #F5F5F5 !important;
}

.social-link:hover {
  transform: translateY(-2px) !important;
  border-color:  var(--mint) !important;
  color: var(--mint) !important;
}

/* Footer Links */
.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 2vw, 1.5rem);
}

.footer-link {
  font-family: var(--tenor);
  font-size: clamp(0.6rem, 0.85vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F5F5F5 !important;
  position: relative;
  padding-block: 0.25rem;
}

.footer-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: rgba(235, 225, 209, 0.7);
  transition: width 200ms ease;
}

.footer-link:hover::after {
  width: 100%;
}

/* CTA Button im Footer */
.footer-link.contact-btn {
  padding: 0.55rem 1.8rem !important;
  border-radius: 999px !important;
  border: 1px  var(--mint) !important;
  background: rgba(235, 225, 209, 0.06) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: clamp(0.6rem, 0.85vw, 0.72rem) !important;
  letter-spacing: 0.2em !important;
  color: #F5F5F5 !important;
}

.footer-link.contact-btn::before,
.footer-link.contact-btn::after {
  display: none !important;
}

.footer-link.contact-btn:hover {
  background: rgba(235, 225, 209, 0.14) !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .footer-inner {
    gap: 0.75rem;
  }
  .footer-links {
    gap: 0.7rem;
  }
}

/* =========================================
   WELLEN-SYSTEM — ::after Methode
   Überschreibt ALLE alten Wave-Definitionen
   aus main.css (hero-section::after etc.)
   ========================================= */

/* Alte main.css Wellen deaktivieren */
.hero-section::after,
.section-photography::after,
.section-about::after,
.section-projects::after,
.section-carousel::after,
.section-blog::after,
.bg-burgundy::after {
  display: none !important;
}

/* Neues Wellen-System */
.wave-burg::after,
.wave-mint::after,
.wave-cream::after,
.wave-dark::after,
.wave-mauve::after,
.wave-charcoal::after,
.wave-warm::after,
.wave-offwhite::after,
.wave-foot::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 20vh;
  pointer-events: none;
  z-index: 10;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  display: block !important;
  transform: translateZ(0);
  will-change: transform;
}

.wave-burg,
.wave-mint,
.wave-cream,
.wave-dark,
.wave-mauve,
.wave-charcoal,
.wave-warm,
.wave-offwhite {
  position: relative;
  overflow: visible;
  padding-bottom: 20vh;
  isolation: isolate;
}

.wave-foot {
  position: relative;
  overflow: visible;
  padding-bottom: 22vh;
  isolation: isolate;
}

.wave-foot::after { height: 22vh; }

.wave-burg::after {
  background-color: #6e3b49;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 360' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,360 L0,140 C360,60 720,60 960,160 C1200,260 1320,220 1440,150 L1440,360 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 360' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,360 L0,140 C360,60 720,60 960,160 C1200,260 1320,220 1440,150 L1440,360 Z'/%3E%3C/svg%3E");}

.wave-mint::after {
  background-color: #56686a;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,260 C200,220 440,160 680,190 C920,220 1120,300 1440,270 L1440,400 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,260 C200,220 440,160 680,190 C920,220 1120,300 1440,270 L1440,400 Z'/%3E%3C/svg%3E");
}

.wave-cream::after {
  background-color: #f5f5f5;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,300 C240,260 480,220 720,240 C960,260 1200,310 1440,290 L1440,400 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,300 C240,260 480,220 720,240 C960,260 1200,310 1440,290 L1440,400 Z'/%3E%3C/svg%3E");
}

.wave-dark::after {
  background-color: #314a51;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,180 C100,160 220,140 380,180 C540,220 620,320 780,350 C940,380 1060,300 1220,240 C1340,194 1400,180 1440,175 L1440,400 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,180 C100,160 220,140 380,180 C540,220 620,320 780,350 C940,380 1060,300 1220,240 C1340,194 1400,180 1440,175 L1440,400 Z'/%3E%3C/svg%3E");
}

.wave-mauve::after {
  background-color: #b5a19e;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,300 C140,340 300,380 480,340 C660,300 740,180 900,140 C1060,100 1180,160 1300,220 C1370,254 1420,280 1440,292 L1440,400 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,300 C140,340 300,380 480,340 C660,300 740,180 900,140 C1060,100 1180,160 1300,220 C1370,254 1420,280 1440,292 L1440,400 Z'/%3E%3C/svg%3E");
}

.wave-charcoal::after {
  background-color: var(--off-black);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,220 C180,180 420,260 680,300 C920,335 1160,220 1440,190 L1440,400 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,220 C180,180 420,260 680,300 C920,335 1160,220 1440,190 L1440,400 Z'/%3E%3C/svg%3E");
}

.wave-warm::after {
  background-color: var(--white);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,270 C220,320 440,360 700,320 C980,275 1180,160 1440,200 L1440,400 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,270 C220,320 440,360 700,320 C980,275 1180,160 1440,200 L1440,400 Z'/%3E%3C/svg%3E");
}

.wave-white::after {
  background-color: var(--white);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,280 C200,240 500,180 760,210 C1020,240 1240,320 1440,290 L1440,400 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,280 C200,240 500,180 760,210 C1020,240 1240,320 1440,290 L1440,400 Z'/%3E%3C/svg%3E");
}

/* wave-foot: Welle zum Footer hin (dunkelgrüne Farbe, gleiche Richtung) */
.wave-foot::after {
  background-color: var(--mint);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,260 C200,200 400,140 600,160 C800,180 960,280 1160,300 C1300,314 1390,280 1440,260 L1440,400 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,400 L0,260 C200,200 400,140 600,160 C800,180 960,280 1160,300 C1300,314 1390,280 1440,260 L1440,400 Z'/%3E%3C/svg%3E");
}

/* Kein border-top am Footer */
.site-footer { border-top: none !important; }