/* ===============================
   Tokens / Variablen
   =============================== */
:root{
  --bg-beige: #e3e0d4;
  --beige-transparent: rgba(227, 224, 212, 0.2); /* 80% Deckkraft */
  --white: #ffffff;
  --text-color: #20364b;

  --teal: #6abfaa;
  --yellow: #fab314;
  --pink: #ea4e68;
  --dark-teal: #225a60;

  --border: rgba(32, 54, 75, 0.18);

  --radius-pill: 999px;
  --shadow-soft: 0 8px 28px rgba(0,0,0,0.06);
}

/* ===============================
   Fonts
   =============================== */
@font-face{
  font-family: "GurmukhiMN";
  src: url("fonts/gurmukhi-mn.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family: "GurmukhiMN";
  src: url("fonts/gurmukhi-mn-bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face{
  font-family: "Lexend";
  src: url("fonts/Lexend-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face{
  font-family: "Lexend";
  src: url("fonts/Lexend-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family: "Lexend";
  src: url("fonts/Lexend-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ===============================
   Base
   =============================== */
html{ scroll-behavior: smooth; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg-beige);
  color: var(--text-color);
  letter-spacing: 0.01em;
}

.link{
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

/* Skip link */
.skip-link{
  position: absolute;
  left: -999px;
  top: 10px;
  padding: 10px 14px;
  background: var(--text-color);
  color: var(--white);
  border-radius: var(--radius-pill);
  z-index: 9999;
}
.skip-link:focus-visible{ left: 12px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; }
}

/* ===============================
   Global Canvas Background
   =============================== */
#bgCanvas{
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 0;
}

/* Fallback */
@supports not (height: 100dvh){
  #bgCanvas{
    width: 100vw;
    height: 100vh;
  }
}

/* Alles darüber */
.hero-area,
.content-nav,
main {
  position: relative;
  z-index: 1;
}

/* ===============================
   Hero
   =============================== */
.hero-area {
  position: relative;
  min-height: 50svh;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  background: transparent;
  padding-top: 50px;
  pointer-events: none;
}

.hero-area.start {
  min-height: 100svh;
}

@media (max-aspect-ratio: 1) {
  .hero-area.start {
    min-height: 50svh;
  }
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3svh, 2.5rem);
  text-align: center;
  padding: 15vh clamp(2rem, 6vw, 5rem);
  box-sizing: border-box;
  pointer-events: auto;
}

.site-title {
  margin: 0;
  line-height: 1.05;
  display: block;
}

.site-title__name {
  display: block;
  font-family: "GurmukhiMN", serif;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  font-weight: 700;
}

.site-title__service {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(1.25rem, 2.2vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.lead {
  max-width: 38ch;
  margin: 0;
}

.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3svh, 2rem);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
  opacity: 0.85;
  pointer-events: auto;
}
/* Standard: Scroll-Hinweis ausblenden */
.hero-scroll-hint {
  display: none;
}

/* Nur im Start-Hero anzeigen */
.hero-area.start .hero-scroll-hint {
  display: inline-flex;
}

/* Wenn der Start-Hero wegen Seitenverhältnis nicht 100svh ist → wieder ausblenden */
@media (max-aspect-ratio: 1) {
  .hero-area.start .hero-scroll-hint {
    display: none;
  }
}

.hero-scroll-hint__text {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.hero-scroll-hint__icon {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 600;
  animation: hero-bounce 2s infinite ease-in-out;
}

.hero-scroll-hint:hover,
.hero-scroll-hint:focus-visible {
  opacity: 1;
}

.hero-scroll-hint:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 0.25rem;
}

@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(0.35rem);
  }
  60% {
    transform: translateY(0.15rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint__icon {
    animation: none;
  }
}

/* ===============================
   Navigation
   =============================== */
.content-nav{
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2; /* über Hero-Inhalt, unter Burger */
}

.content-nav__inner{
  max-width: 64rem;
  margin: 0 auto;
  padding: 16px;
}

/* Desktop */
.content-nav__desktop{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-nav__left,
.content-nav__right{
  display: flex;
  gap: 30px;
}

.content-nav__link{
  text-decoration: none;
  font-weight: 600;
  color: inherit;
}

/* Mobile */
.content-nav__mobile{ display: none; }

/* Burger */
.burger{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.burger__icon{
  width: 24px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.burger__icon::before,
.burger__icon::after{
  content: "";
  position: absolute;
  width: 24px;
  height: 2px;
  background: currentColor;
}

.burger__icon::before{ top: -7px; }
.burger__icon::after{ top: 7px; }

.content-nav__mobile[open] .burger__icon{
  background: transparent;
}
.content-nav__mobile[open] .burger__icon::before{
  top: 0; transform: rotate(45deg);
}
.content-nav__mobile[open] .burger__icon::after{
  top: 0; transform: rotate(-45deg);
}

/* Overlay */
.menu-overlay{ display: none; }

/* =========================================================
   Mobile Navigation – Link-Styling (wiederhergestellt)
   ========================================================= */

.menu-overlay__main{
  display: grid;
  gap: 22px;
  text-align: center;
}

/* Hauptlinks */
.menu-link{
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Legal-Links unten */
.menu-overlay__legal{
  display: grid;
  gap: 10px;
  text-align: center;
}

.menu-legal{
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  opacity: 0.6;
}


.content-nav__mobile[open] .menu-overlay{
  display: grid;
  place-items: center;
  gap: 52px;
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 1100;
  padding-top: 96px;
  padding-bottom: 30px;
  grid-template-rows: 1fr auto;
}

/* Mobile breakpoint */
@media (max-width: 860px){
  .content-nav__desktop{ display: none; }
  .content-nav__mobile{ display: inline-block; }

  .content-nav__inner{
    padding: 0;
    height: 0;
  }

  .content-nav__mobile > summary{
    position: fixed;
    top: 16px;
    right: 20px;
    list-style: none;
    z-index: 1101;
  }
  summary::-webkit-details-marker{ display: none; }
}

/* ===============================
   Layout
   =============================== */
.band{ padding: 56px 0; }
.band--white{ background: var(--white); }
.band--beige{
  background: transparent;
  background: var(--beige-transparent);
  backdrop-filter: blur(calc(50px + 3vw));
  -webkit-backdrop-filter: blur(calc(50px + 3vw));
}
.band--beige--solid{
  background: var(--bg-beige);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .band--beige{
    background: rgba(227, 224, 212, 0.8); /* etwas deckender ohne Blur */
  }
}

.container{
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 24px;
}

.stack{ display: grid; gap: 14px; }

.split{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 2rem;
  row-gap: 2rem;
}

@media (max-width: 650px){
  .split{ grid-template-columns: 1fr; }
}

/* ===============================
   Typography
   =============================== */
p, address{
  margin: 0;
  max-width: 70ch;
  line-height: 1.7;
  font-style: normal;
}

.h2{
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: 8px;
  margin-block-start: 0;
}

.h2--intro{
  font-family: "GurmukhiMN", serif;
  font-size: clamp(2.1rem, 3.6vw, 2.8rem);
  line-height: 1.15;
}

.h3{
  margin: 18px 0 0 0;
  font-size: 1rem;
  font-weight: 700;
}


/* ===============================
   Portrait
   =============================== */
.portrait{ margin: 0; }

.portrait img{
  display: block;
  max-width: 340px;
  height: auto;
}

@media (max-width: 650px){
  .portrait img{ max-width: 200px; }
}

/* =========================================================
   FAQ – ruhiger, textbasierter Stil (wie zuvor)
   ========================================================= */

.faq-item{
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.faq-item:last-of-type{
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

/* Frage */
.faq-item summary{
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  padding: 10px 0;

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

/* entfernt Browser-Dreiecke */
.faq-item summary::-webkit-details-marker{
  display: none;
}
.faq-item summary::marker{
  content: "";
}

/* Plus / Minus */
.faq-item summary::after{
  content: "+";
  font-weight: 700;
  opacity: 0.6;
  flex-shrink: 0;
}

.faq-item[open] summary::after{
  content: "–";
  opacity: 0.6;
}

/* Antwort */
.faq-item p{
  margin-top: 14px;   /* mehr Abstand zur Frage */
  line-height: 1.7;
  max-width: 70ch;
}


/* ===============================
   Buttons
   =============================== */
.btn{
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--white);
  text-decoration: none;
  font-weight: 600;
  color: var(--text-color);
}

.btn--solid{
  background: var(--text-color);
  color: var(--white);
}

/* =========================================================
   Kontaktbereich
   ========================================================= */

.contact-actions{
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* Sehr kleine Geräte: Buttons untereinander */
@media (max-width: 643px){
  .contact-actions{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ---------- Layout: Desktop ---------- */

.contact-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-areas: "content visual";
  align-items: center;
  gap: 28px;
}

.contact-content{
  grid-area: content;
}

.contact-visual{
  grid-area: visual;
  display: grid;
  place-items: center;
}

.contact-svg{
  width: min(175px, 100%);
  height: auto;
  display: block;
  color: var(--text-color);
  opacity: 0.9;
}


/* ---------- Mobile ---------- */

@media (max-width: 475px){

  .contact-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "content";
  }

  .contact-svg{
    width: min(120px, 100%);
  }

}


/* Verhindert das Ändern von Farbe und Unterstreichung */
a[href^="x-apple-data-detectors"],
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
}