/* =========================================================
   Die Wertestifter – Stylesheet
   Fonts komplett lokal (keine Verbindung zu Google Fonts)
   ========================================================= */

/* ---------- Schriften (lokal) ---------- */
@font-face{
  font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/NotoSans-400.woff2') format('woff2'),
      url('../fonts/NotoSans-400.woff') format('woff');
}
@font-face{
  font-family:'Noto Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/NotoSans-600.woff2') format('woff2'),
      url('../fonts/NotoSans-600.woff') format('woff');
}
@font-face{
  font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/NotoSans-700.woff2') format('woff2'),
      url('../fonts/NotoSans-700.woff') format('woff');
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/SourceSerif4-400.woff2') format('woff2'),
      url('../fonts/SourceSerif4-400.woff') format('woff');
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/SourceSerif4-600.woff2') format('woff2'),
      url('../fonts/SourceSerif4-600.woff') format('woff');
}
@font-face{
  font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/SourceSerif4-400-italic.woff2') format('woff2'),
      url('../fonts/SourceSerif4-400-italic.woff') format('woff');
}
@font-face{
  font-family:'Source Serif 4';font-style:italic;font-weight:600;font-display:swap;
  src:url('../fonts/SourceSerif4-600-italic.woff2') format('woff2'),
      url('../fonts/SourceSerif4-600-italic.woff') format('woff');
}

/* ---------- Design-Tokens ---------- */
:root{
  --burgundy:#68062c;
  --burgundy-dark:#4d041f;
  --burgundy-soft:#7d1338;
  --ink:#26221f;
  --muted:#5f5751;
  --paper:#ffffff;
  --paper-warm:#f7f3ef;
  --line:#e7ded7;
  --sans:'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --wrap:margin-inline:auto;
}

/* ---------- Reset / Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;}
a{color:var(--burgundy);}

/* ============================================================
   HERO (bildschirmfüllend)
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
.hero::before{           /* Hintergrundbild */
  content:'';
  position:absolute;inset:0;z-index:-2;
  background:url('../img/vk_header.jpg') center 30% / cover no-repeat;
}
.hero::after{            /* Verlauf für Lesbarkeit */
  content:'';
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,
      rgba(20,4,12,.22) 0%,
      rgba(20,4,12,0) 30%,
      rgba(20,4,12,0) 55%,
      rgba(20,4,12,.35) 100%);
}

/* Logo oben rechts */
.hero__logo{
  position:absolute;
  top:clamp(1.1rem,3vw,2.4rem);
  right:clamp(1.1rem,3vw,2.4rem);
  width:clamp(60px,8.5vw,116px);
  z-index:3;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

/* Copyright-Hinweis auf dem Bild */
.hero__credit{
  position:absolute;
  left:clamp(.8rem,2vw,1.6rem);
  bottom:clamp(.7rem,2vw,1.4rem);
  z-index:3;
  margin:0;
  font-size:clamp(.62rem,1.3vw,.74rem);
  letter-spacing:.03em;
  color:rgba(255,255,255,.8);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* Inhalts-Gruppe unten */
.hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  padding-bottom:clamp(3rem,9vh,6rem);
  text-align:center;
}
.hero__eyebrow{
  margin:0 auto clamp(1rem,2.6vh,1.8rem);
  padding-inline:1rem;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.9rem,5.4vw,3.5rem);
  line-height:1.05;
  letter-spacing:.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}

/* Das burgunderrote Band */
.hero__band{
  position:relative;
  width:100%;
  background:var(--burgundy);
  padding:clamp(.85rem,2.4vw,1.5rem) 1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.hero__band h1{
  margin:0 auto;
  max-width:1200px;
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.1;
  font-size:clamp(1.35rem,4.7vw,3.1rem);
  color:#fff;
}
.hero__band::after{        /* Pfeilspitze nach unten */
  content:'';
  position:absolute;
  top:100%;left:50%;
  transform:translateX(-50%);
  border-left:clamp(12px,2.4vw,20px) solid transparent;
  border-right:clamp(12px,2.4vw,20px) solid transparent;
  border-top:clamp(11px,2.1vw,18px) solid var(--burgundy);
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.18));
}
.hero__mail{
  display:inline-block;
  margin-top:clamp(1.6rem,4vh,2.6rem);
  padding-inline:1rem;
  font-weight:700;
  font-size:clamp(1.05rem,2.9vw,1.6rem);
  letter-spacing:.01em;
  color:#fff;
  text-decoration:none;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.hero__mail:hover,.hero__mail:focus-visible{
  text-decoration:underline;
  text-underline-offset:.28em;
}

/* ============================================================
   KONTAKT-SEKTION
   ============================================================ */
.contact{
  background:var(--paper-warm);
  padding:clamp(3.5rem,9vw,7rem) clamp(1.25rem,5vw,2rem);
  border-top:4px solid var(--burgundy);
}
.contact__wrap{
  max-width:760px;
  margin-inline:auto;
  text-align:center;
}
.contact__kicker{
  margin:0 0 .8rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.2rem,3vw,1.6rem);
  color:var(--burgundy-soft);
}
.contact h2{
  margin:0 0 1.1rem;
  font-family:var(--serif);
  font-weight:600;
  line-height:1.15;
  font-size:clamp(1.7rem,4.6vw,2.7rem);
  color:var(--ink);
}
.contact p.lead{
  margin:0 auto 2.4rem;
  max-width:52ch;
  font-size:clamp(1rem,2.2vw,1.15rem);
  color:var(--muted);
}
.contact__card{
  display:inline-block;
  text-align:left;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(1.4rem,3vw,2.1rem) clamp(1.6rem,4vw,2.6rem);
  box-shadow:0 14px 40px rgba(38,20,30,.07);
}
.contact__card .name{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.2rem;
  margin-bottom:.5rem;
  color:var(--ink);
}
.contact__card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;}
.contact__card dt{color:var(--muted);font-size:.92rem;}
.contact__card dd{margin:0;font-weight:600;}
.contact__card a{color:var(--burgundy);text-decoration:none;}
.contact__card a:hover{text-decoration:underline;}

.btn{
  display:inline-block;
  margin-top:2.2rem;
  padding:.85em 1.8em;
  background:var(--burgundy);
  color:#fff;
  font-weight:600;
  font-size:1.02rem;
  text-decoration:none;
  border-radius:999px;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover,.btn:focus-visible{background:var(--burgundy-dark);transform:translateY(-1px);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--burgundy);
  color:#fff;
  text-align:center;
  padding:2.2rem 1.25rem;
  font-size:.92rem;
}
.site-footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem 1.4rem;
  margin-bottom:.9rem;
}
.site-footer a{color:#fff;text-decoration:none;opacity:.92;}
.site-footer a:hover,.site-footer a:focus-visible{text-decoration:underline;opacity:1;}
.site-footer .copyright{opacity:.75;font-size:.85rem;}

/* ============================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   ============================================================ */
.legal-header{
  background:var(--burgundy);
  color:#fff;
}
.legal-header__wrap{
  max-width:900px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem clamp(1.25rem,4vw,2rem);
}
.legal-header__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff;}
.legal-header__brand img{width:38px;}
.legal-header__brand span{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
}
.legal-header__back{
  color:#fff;text-decoration:none;font-size:.92rem;font-weight:600;opacity:.92;
  white-space:nowrap;
}
.legal-header__back:hover{text-decoration:underline;opacity:1;}

.legal{
  max-width:820px;
  margin-inline:auto;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.25rem,5vw,2rem) 4rem;
}
.legal h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.9rem,5vw,2.7rem);
  line-height:1.15;
  margin:0 0 1.6rem;
  color:var(--burgundy);
}
.legal h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.3rem,3.4vw,1.7rem);
  margin:2.4rem 0 .7rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  color:var(--ink);
}
.legal h3{
  font-weight:700;
  font-size:1.1rem;
  margin:1.8rem 0 .4rem;
  color:var(--ink);
}
.legal h4{
  font-weight:600;
  font-size:1rem;
  margin:1.3rem 0 .3rem;
  color:var(--burgundy-soft);
}
.legal p,.legal li{
  color:var(--muted);
  font-size:1rem;
}
.legal p{margin:.55rem 0 1rem;}
.legal ul{margin:.4rem 0 1.2rem;padding-left:1.3rem;}
.legal li{margin:.35rem 0;}
.legal a{color:var(--burgundy);word-break:break-word;}

/* ============================================================
   RESPONSIVE FEINSCHLIFF
   ============================================================ */
@media (max-width:520px){
  .hero__band h1{letter-spacing:.01em;}
  .contact__card{display:block;}
  .contact__card dl{grid-template-columns:1fr;gap:.15rem;}
  .contact__card dt{margin-top:.5rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn{transition:none;}
}