/* =====================================================
   1) Basis & Schriftarten (nutzt die <link>-Tags im HTML)
   ===================================================== */
:root{
  --brand:#A17F45;
  --brand-2:#C8A165;
  --bg:#f9f6f3;
  --text:#333;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:'Open Sans', Arial, sans-serif;
  background-color:var(--bg);
  color:var(--text);
  line-height:1.6;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display', serif;
  color:var(--brand);
  font-weight:700;
  margin:0 0 .5rem 0;
}

/* =====================================================
   2) Navigation (sticky + responsive)
   ===================================================== */
nav{
  position:sticky; top:0; width:100%;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid #eee;
  z-index:100;
  transition:background .3s;
}
nav.scrolled{ background:#fff; }

.nav-container{
  max-width:1200px; margin:0 auto;
  padding:.5rem 1rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.logo{ font-size:1.4rem; font-weight:700; color:var(--brand); }

.nav-list{ list-style:none; margin:0; padding:0; display:flex; }
.nav-list li{ margin:0 1rem; }
.nav-list a{
  text-decoration:none; font-weight:600; color:#333; letter-spacing:.5px; transition:color .2s;
}
.nav-list a:hover{ color:var(--brand); }

/* Mobile Toggle */
#nav-toggle{ display:none; }
.menu-toggle{ display:none; }
@media (max-width:768px){
  .menu-toggle{
    display:inline-block; font-size:1rem; cursor:pointer;
    padding:.5rem 1rem; border:1px solid #333; border-radius:.3rem; background:#fff; color:#333; margin-left:auto;
  }
  .nav-list{
    display:none; flex-direction:column; align-items:center; width:100%;
    padding:1rem 0; background:#fff; border-top:1px solid #eee;
  }
  #nav-toggle:checked ~ .nav-list{ display:flex; }
}

/* =====================================================
   3) Hero mit Bild & Welle
   ===================================================== */
.hero{
  position:relative;
  background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url('images/hero.png') center/cover no-repeat;
  color:#fff; text-align:center;
  padding:6rem 1rem; min-height:80vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.hero h1{
  font-size:4rem; letter-spacing:1px; margin-bottom:.7rem;
  text-shadow:4px 4px 8px rgba(0,0,0,.35);
}
.hero .subtitle{ font-size:1.5rem; font-style:italic; margin-bottom:2rem; }
.hero .hero-text{
  max-width:600px; margin:1.5rem auto;
  font-weight:400; font-size:1rem; line-height:1.8;
  color:rgba(255,255,255,.92); text-shadow:none; text-align:center;
}

/* Welle unten 
.hero::after{
  content:''; position:absolute; left:0; bottom:-1px;
  width:100%; height:80px; background:url('wave.svg') bottom/100% no-repeat;
}
*/
/* =====================================================
   4) Call-to-Action Buttons
   ===================================================== */
.cta{
  display:inline-block; padding:1rem 2.5rem; font-size:1.1rem;
  border:2px solid var(--brand); border-radius:2rem;
  color:var(--brand); background:transparent; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.cta:hover{ background:var(--brand); color:#fff; }
.hero .cta{ border-color:#fff; color:#fff; }
.hero .cta:hover{ background:#fff; color:var(--brand); }

/* =====================================================
   5) Sektionen (wechselnde Hintergründe)
   ===================================================== */
.section{
  max-width:800px; margin:0 auto; padding:3rem 1rem; position:relative;
}
.section:nth-of-type(odd){ background:#fff; }
.section:nth-of-type(even){ background:var(--bg); }
.section h2{ position:relative; padding-bottom:.5rem; }
.section h2::after{
  content:''; display:block; width:50px; height:3px; background:var(--brand); margin-top:.5rem;
}
ol{ padding-left:1.4rem; }
.section.testimonials{ font-style:italic; color:var(--brand); text-align:center; }

/* =====================================================
   6) Formular-Stile
   ===================================================== */
.form-section{
  max-width:800px; margin:2rem auto; background:#fff;
  border-radius:.5rem; box-shadow:0 6px 24px rgba(0,0,0,.05); padding:2rem;
}
.form-info{ font-size:.95rem; color:#666; margin-bottom:1rem; }

label{ display:block; margin:1rem 0 .3rem 0; font-weight:bold; }
input, textarea, select{
  width:100%; padding:.6rem; border-radius:.3rem; border:1px solid #ddd; margin-bottom:1rem;
  font-size:1rem; background:#fff; font-family:'Open Sans', sans-serif;
}
textarea{ min-height:120px; resize:vertical; }
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px rgba(161,127,69,.2);
}

/* Submit */
button[type="submit"]{
  background:var(--brand); color:#fff; padding:.9rem 2.2rem; font-size:1.1rem;
  border-radius:2rem; border:none; cursor:pointer; transition:background .2s;
}
button[type="submit"]:hover{ background:var(--brand-2); }

/* ---- 2-Spalten Utilities für das Formular ---- */
.grid-2{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem 1.25rem;
}
.field{ display:block; }
.field label{ margin-top:0; }
.span-2{ grid-column:1 / -1; }

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

/* Aktionen unter dem Formular */
.form-actions{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:.5rem;
}
.button-secondary{
  background:transparent; color:var(--brand);
  border:2px dashed var(--brand);
  padding:.85rem 1.5rem; font-size:1.05rem; border-radius:2rem;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s;
}
.button-secondary:hover{
  background:#fff7ec; color:#7f6130; border-color:var(--brand-2);
}

/* =====================================================
   7) Footer
   ===================================================== */
footer{ background:#222; color:#ccc; }
.footer-content{
  max-width:1200px; margin:0 auto; padding:2rem 1rem;
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;
}
.footer-col{ margin-bottom:2rem; }
.footer-logo{
  font-family:'Playfair Display', serif; font-size:1.3rem; font-weight:700; color:#fff; margin-bottom:.5rem;
}
.footer-tagline,.footer-social{ font-size:.95rem; color:#ccc; margin-bottom:1rem; }
.footer-links-title{ font-weight:bold; margin-bottom:.5rem; color:#ccc; }
.footer-links a{ text-decoration:none; }
.footer-bottom{
  border-top:1px solid #444; text-align:center; font-size:.9rem; color:#999; padding:1rem 0;
}

/* =====================================================
   8) Links allgemein
   ===================================================== */
a{ color:var(--brand); text-decoration:none; transition:color .2s; }
a:hover{ color:#7f6130; }
footer a{ color:#ccc; }
footer a:hover{ color:#fff; }

/* =====================================================
   9) Responsiv
   ===================================================== */
@media (max-width:600px){
  .section,.form-section{ padding:1.5rem 1rem; }
  h1{ font-size:2rem; }
  .hero{ padding:4rem 1rem; min-height:60vh; }
}


/* ===============================
   Demovideo – kompletter CSS-Block inkl. Play-Button
   =============================== */

/* Container / Karte */
.video-card{
  position: relative;
  max-width: 800px;
  margin: 1rem auto 0;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  background: #000;
  aspect-ratio: 16 / 9;
}

/* Fallback, falls aspect-ratio fehlt */
@supports not (aspect-ratio: 1 / 1){
  .video-card{ height: auto; }
  .video-card::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }
  .video-card > *{ position: absolute; inset: 0; }
}

/* Das <video> selbst */
.video-card video{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  outline: none;
}

/* Overlay-Button (deckt die Karte ab, bis gestartet wurde) */
.video-play{
  position: absolute;
  inset: 0;
  z-index: 2; /* über dem Video */
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.35);
  border: 0;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease, transform .1s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
}

/* Sichtbarer Button: Kreis + Dreieck (rein per CSS) */
.video-play::before,
.video-play::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

/* Kreis */
.video-play::before{
  width: clamp(56px, 12vw, 96px);
  height: clamp(56px, 12vw, 96px);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* Dreieck (Play-Symbol) */
.video-play::after{
  /* Dreieck durch Border-Trick */
  width: 0; height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 24px solid var(--brand, #A17F45);
  /* leicht nach rechts verschieben, damit es optisch mittig wirkt */
  transform: translate(-40%,-50%);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
}

/* Tastaturfokus */
.video-play:focus-visible{
  outline: 3px solid var(--brand, #A17F45);
  outline-offset: -3px;
}

/* Hover-Feedback (Desktop) */
@media (hover:hover){
  .video-card:hover .video-play{ background: rgba(0,0,0,.28); }
  .video-card:hover .video-play::before{ transform: translate(-50%,-50%) scale(1.03); }
}

/* Overlay nach Start ausblenden (JS setzt .is-started) */
.video-card.is-started .video-play{
  opacity: 0;
  pointer-events: none;
}

/* Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce){
  .video-play{ transition: none; }
  .video-card:hover .video-play::before{ transform: translate(-50%,-50%); }
}


/* Overlay endgültig ausschalten (sicher, falls noch Reste existieren) */
.video-card .video-play { display: none !important; }
.video-card::before,
.video-card::after { display: none !important; }

/* Falls irgendwo pointer-events verdreht wurden */
.video-card video { pointer-events: auto !important; }


/* ===============================
   Social Proof & About (Homepage)
   =============================== */
.section-intro{
  color:#555; margin:.5rem 0 1rem 0;
}

.testimonial-card{
  margin:2rem auto 0; max-width:700px; text-align:center; color:#7f6130;
  padding:1.25rem 1rem 0.5rem; font-style:italic;
}
.testimonial-card .avatar{
  width:72px; height:72px; margin:0 auto .75rem;
  border-radius:50%; display:grid; place-items:center; font-weight:700;
  background:linear-gradient(135deg,#f5e7d1,#fff7ec);
  color:#7f6130;
}
.testimonial-card blockquote{ margin:0 auto .5rem; line-height:1.8; }
.testimonial-card figcaption{ font-style:normal; color:#8a6a38; font-weight:600; }

.steps{ padding-left:1.4rem; }
.center-cta{ text-align:center; margin-top:1.25rem; }

.about .about-card{
  display:flex; gap:1rem; align-items:center; max-width:800px; margin:0 auto;
  background:#fff; border-radius:.75rem; box-shadow:0 8px 28px rgba(0,0,0,.06); padding:1.25rem;
}
.about-avatar{
  width:80px; height:80px; border-radius:50%; display:grid; place-items:center; font-weight:700;
  background:linear-gradient(135deg,#e6d2b0,#fff); color:#7f6130; flex:0 0 auto;
}
.about-text p{ margin:.5rem 0 0 0; }

/* Smaller hero text spacing adjustment */
.hero .subtitle{ margin-top:.25rem; }


/* ===========================
   WS Polish v1 (Form-safe)
   - Hero Overlay & bessere Lesbarkeit
   - Breitere Demos-Sektion
   - Video-Captions & Controls
   - Testimonial-Zitat typografisch
   =========================== */

/* 1) Hero-Overlay – additive, bricht keine Formulare */
.hero.hero--overlay{ position:relative; }
.hero.hero--overlay::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, transparent);
  pointer-events:none; z-index:0;
}
.hero.hero--overlay *{ position:relative; z-index:1; }
.hero.hero--overlay h1{ color:#fff; text-shadow:0 6px 18px rgba(0,0,0,.35); }
.hero.hero--overlay .subtitle{ color:#fff; text-shadow:0 3px 12px rgba(0,0,0,.35); }

/* 2) Sticky-Header optisch wertiger beim Scrollen */
nav.scrolled{ background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.08); }

/* 3) Breitere Demos-Sektion */
.section--wide{ max-width:1200px; }

/* 4) Video-Captions */
.video-caption{ margin:.5rem .25rem 0; color:#6b6763; font-size:.95rem; }

/* 5) Testimonial typografisch */
.section.testimonials blockquote,
.testimonial-card blockquote{
  font-size:1.2rem; max-width:42rem; margin:0.75rem auto 0;
}
.section.testimonials blockquote::before,
.testimonial-card blockquote::before{
  content:"“"; font-size:3.25rem; line-height:0; opacity:.22;
  display:inline-block; transform:translateY(.35em); margin-right:.15rem;
}



/* === iPhone-Hero-Fix (additiv, form-sicher) ===================== */

/* 1) Safari-Viewport: nutze svh, damit die Adressleiste nicht "klaut" */
@supports (min-height: 1svh){
  .hero{ min-height: 80svh; } /* überschreibt 80vh nur auf Geräten, die svh kennen */
}

/* 2) Headline-Handling bei schmalen Screens */
@media (max-width: 600px){
  /* Mehr Luft nach oben (Navbar + Notch) */
  .hero{
    padding-top: calc(6rem + env(safe-area-inset-top));
  }

  /* Headline dynamisch kleiner + darf im Notfall umbrechen */
  .hero h1{
    font-size: clamp(2.1rem, 7.5vw + .4rem, 3rem);
    line-height: 1.12;
    overflow-wrap: anywhere;   /* bricht auch bei geschützten Bindestrichen „-“ */
    word-break: normal;
  }

  /* Unterzeile etwas kleiner */
  .hero .subtitle{ font-size: 1.1rem; }
}