/* =========================
   style.css (komplett)
========================= */

:root{
  /* Naturnahes "Schwarz" */
  --ink:#1a211d;
  --ink2:#121714;

  /* Papier / Lehm */
  --paper:#f5f2ea;
  --paper2:#efe7d8;
  --clay:#d8cbb6;

  /* Flächen */
  --land-bg:#234a3a;
  --forst-bg:#7a5c26;
  --light-ink:#f5f2ea;

  /* Logo Linien (ggf. exakt anpassen) */
  --logoGreen:#234a3a;
  --logoGold:#caa24a;

  /* Typo */
  --sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --serif:"Cormorant Garamond", ui-serif, Georgia, serif;

  /* Layout */
  --max: 1160px;
  --topH: 72px;
  --padY: 112px;

  /* Linien / Schatten */
  --hairline: rgba(26,33,29,.14);
  --hairline2: rgba(26,33,29,.08);
  --shadow: 0 16px 44px rgba(0,0,0,.07);

  /* Grain */
  --grainFineOpacity:.26;
  --grainFiberOpacity:.16;
  --grainBlockOpacity:.40;
  --grainPaperOpacity:.22;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: inherit; text-decoration:none; }
a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26,33,29,.24);
}

img{ display:block; max-width:100%; height:auto; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--padY) 18px;
}
.center{
  max-width: 980px;
  margin: 0 auto;
  text-align:center;
}

section, main{
  scroll-margin-top: calc(var(--topH) + 18px);
}

body.is-locked{ overflow:hidden; }

/* keine Rundungen */
img, figure, .intro-edge img, .intro-edge,
.form-monos, .f-field input, .f-field select, .f-field textarea, .submit{
  border-radius:0 !important;
}

/* =========================
   GLOBAL GRAIN (Lehm + Faser)
========================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity: var(--grainFineOpacity);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.34' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  background-size:720px 720px;
  filter: contrast(1.25) brightness(1.02);
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity: var(--grainFiberOpacity);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  background-size:900px 900px;
  filter: contrast(1.35) brightness(1.04);
  z-index:0;
}
body > *{ position:relative; z-index:1; }

.intro, .paper, .intro-textblock{
  background:
    linear-gradient(0deg, rgba(216,203,182,.12), rgba(216,203,182,.12)),
    var(--paper);
}

/* =========================
   TOP / HEADER
========================= */
.top{
  position:sticky;
  top:0;
  z-index:60;
  height: var(--topH);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 18px;

  background: rgba(245,242,234,.62);
  border-bottom: 1px solid var(--hairline);
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .top{
    background: rgba(245,242,234,.48);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

.top-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.top-logo{ width:32px; height:32px; object-fit:contain; }
.top-sub{
  font-size:12px;
  letter-spacing:.20px;
  text-transform:uppercase;
  color: rgba(26,33,29,.68);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   BURGER (X)
========================= */
.burger{
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
  position:relative;
  z-index:110;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:6px;
}
.burger span{
  display:block;
  height:2px;
  width:24px;
  background: rgba(26,33,29,.82);
  transition: transform .22s var(--ease), opacity .18s var(--ease), width .22s var(--ease), background .18s var(--ease);
}
.burger span:nth-child(2){ width:18px; opacity:.86; }
.burger span:nth-child(3){ width:22px; opacity:.92; }

.burger.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); width:24px; }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); width:24px; }

.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); width:24px; }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); width:24px; }

.burger:focus-visible{
  outline:2px solid rgba(26,33,29,.24);
  outline-offset: 3px;
}

.burger.is-open span{ background: rgba(245,242,234,.92); }

/* =========================
   MENU
========================= */
.menu{
  position:fixed;
  inset:0;
  z-index:100;

  background: rgba(18,23,20,.84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  opacity:0;
  pointer-events:none;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .22s var(--ease);
}
.menu.is-open{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

.menu-overlay{
  position:absolute;
  inset:0;
  border:0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}

.menu-hint{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
  display:flex;
  justify-content:center;

  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(245,242,234,.80);
  pointer-events:none;
}

/* Wenn dein HTML-Hint leer ist, zeigt das zumindest den Hinweis an */
.menu-hint:empty::before{
  content:"Tipp: ESC drücken";
}

.menu-inner{
  height:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  position:relative;
  z-index:2;
}

.menu-left{
  padding: 120px 44px 44px;
  background: rgba(245,242,234,.96);
  border-right: 1px solid rgba(26,33,29,.10);
}
.menu-right{
  padding: 120px 44px 44px;
  background: rgba(239,231,216,.96);
}

.menu-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.24px;
  margin-bottom:28px;
  color: rgba(26,33,29,.58);
}

.menu-link{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:18px 0;
  border-bottom: 1px solid rgba(26,33,29,.10);
  transition: transform .18s var(--ease);
}
.menu-link:hover{ transform: translateX(2px); }

.menu-link .arrow{
  font-size:16px;
  color: rgba(26,33,29,.68);
  transform: translateY(-1px);
}
.menu-link .label{
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(40px,5vw,70px);
  line-height:1;
  letter-spacing:-0.01em;
  text-rendering: geometricPrecision;
}

.menu-card{
  border-top:1px solid rgba(26,33,29,.16);
  padding-top:16px;
  display:grid;
  gap:14px;
}
.menu-card-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(26,33,29,.10);
}
.menu-card-row span{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18px;
  color: rgba(26,33,29,.60);
}
.menu-card-row b{
  font-weight:600;
  text-align:right;
}

/* =========================
   INTRO (Editorial) + Linie darunter (Logo-Grün)
========================= */
.intro-editorial{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  border-bottom: 3px solid var(--logoGreen);
}

.intro-edge{
  position:absolute;
  top:0;
  bottom:0;
  width: 22vw;
  pointer-events:none;
  opacity:.92;
}
.intro-edge.left{ left:0; }
.intro-edge.right{ right:0; }

.intro-edge img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(.92) contrast(.96);
}

/* =========================
   FIX (Mobile): hero-left oben, hero-right unten
   + explizit left/right auto, damit NICHT beide links landen
========================= */
@media (max-width: 760px){
  .intro-edge{
    width: 46vw;
    opacity:.92;
  }

  .intro-edge.left{
    top:0;
    bottom:auto;
    left:0;
    right:auto;
  }

  .intro-edge.right{
    top:auto;
    bottom:0;
    right:0;
    left:auto;
  }
}

.intro-hero{
  position:relative;
  z-index:2;
  text-align:center;
  padding: 0 24px;
}

.intro-name{
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(72px,10vw,160px);
  line-height:.9;
  margin:0;
  letter-spacing:-0.015em;
  text-rendering: geometricPrecision;
}

.intro-meta-top{
  margin-top:14px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(26,33,29,.60);
}

.scroll-cue{
  display:inline-block;
  margin-top:48px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(26,33,29,.52);
}
.scroll-cue .arrow{
  font-size:18px;
  margin-top:6px;
}

/* =========================
   Intro Textblock
========================= */
.intro-textblock{
  padding: 120px 0 140px;
  border-top: 1px solid var(--hairline2);
}

.intro-kicker{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(26,33,29,.58);
  margin-bottom:22px;
}

.intro-claim{
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(34px,4vw,54px);
  line-height:1.18;
  letter-spacing:-0.012em;
  margin:0 0 28px;
  text-rendering: geometricPrecision;
}

.copy{
  max-width:78ch;
  margin:0 auto 16px;
  font-size:15.5px;
  line-height:1.88;
  color: rgba(26,33,29,.84);
}

.intro-actions{
  margin-top:36px;
  font-size:13px;
}
.intro-actions b{ font-weight:600; }
.intro-actions .sep{ margin:0 10px; opacity:.45; }

/* =========================
   WAVES (nur Land->Forst)
========================= */
.wave{
  display:block;
  width:100%;
  height:72px;
}
.wave-up{ margin-bottom:-1px; }

/* =========================
   LAND / FORST
========================= */
.block{
  position:relative;
  overflow:hidden;
}

.block-land{ background: var(--land-bg); color: var(--light-ink); }
.block-forst{ background: var(--forst-bg); color: var(--light-ink); }

/* =========================
   FIX: Texte in LAND/FORST hell (weil .copy global dunkel ist)
========================= */
.block-land .copy,
.block-forst .copy{
  color: rgba(245,242,234,.88);
}

.block::before{
  content:"";
  position:absolute;
  inset:-80px;
  pointer-events:none;
  opacity: var(--grainBlockOpacity);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.14' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  background-size:900px 900px;
  filter: contrast(1.35) brightness(1.03);
  z-index:0;
}
.block > *{ position:relative; z-index:1; }

.section-label{
  position:absolute;
  top:28px;
  right:34px;
  text-align:right;
  font-size:12px;
  letter-spacing:.26px;
  text-transform:uppercase;
  color: rgba(245,242,234,.70);
}
.section-label.dark{ color: rgba(26,33,29,.56); }

.mega{
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(44px,5.8vw,86px);
  line-height:1.06;
  letter-spacing:-0.01em;
  margin:0 0 22px;
  text-rendering: geometricPrecision;
}

.tags{
  margin-top:26px;
  font-size:12px;
  letter-spacing:.22px;
  text-transform:uppercase;
  opacity:.88;
  padding-top: 14px;
  border-top: 1px solid rgba(245,242,234,.22);
}
.tags.dark{
  color: rgba(26,33,29,.74);
  border-top-color: rgba(26,33,29,.12);
}

/* =========================
   QUOTE (kein reines Schwarz)
========================= */
.quote{
  position:relative;
  min-height:560px;
  background: var(--ink2);
  color:#fff;
  overflow:hidden;
}

.quote-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(18,23,20,.22), rgba(18,23,20,.76)),
    url("/images/quote.webp") center/cover no-repeat;
  filter: saturate(.92) contrast(1.02);
}

.quote-inner{
  position:relative;
  max-width: var(--max);
  margin:0 auto;
  padding:150px 18px;
  text-align:center;
}

.quote-text{
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(30px,3.6vw,52px);
  line-height:1.12;
  letter-spacing:-0.01em;
  max-width:48ch;
  margin:0 auto;
  text-rendering: geometricPrecision;
}

.quote-author{
  margin-top:18px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.22px;
  opacity:.86;
}

/* =========================
   PAPER SECTIONS (Haltung + Kontakt)
========================= */
.paper{
  position:relative;
  overflow:hidden;
}

.paper::before{
  content:"";
  position:absolute;
  inset:-80px;
  pointer-events:none;
  opacity: var(--grainPaperOpacity);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.13' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.80'/%3E%3C/svg%3E");
  background-size:900px 900px;
  filter: contrast(1.30) brightness(1.03);
  z-index:0;
}
.paper > *{ position:relative; z-index:1; }

/* Goldlinie zwischen Haltung und Kontakt */
#kontakt.paper{
  border-top: 3px solid var(--logoGold);
}

.kicker{
  display:inline-block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.22px;
  margin-bottom:14px;
}
.kicker.dark{ color: rgba(26,33,29,.60); }

/* =========================
   FORM
========================= */
.form{ max-width:980px; margin:0 auto; }

.form-monos{
  background: rgba(255,255,255,.18);
  border: 1px solid var(--hairline);
  padding: 22px;
  box-shadow: var(--shadow);
}

.f-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.f-field{ display:grid; gap: 8px; }

.f-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18px;
  color: rgba(26,33,29,.60);
}

.f-field input,
.f-field select,
.f-field textarea{
  width:100%;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  padding: 12px 12px;

  border: 1px solid rgba(26,33,29,.20);
  background: rgba(255,255,255,.46);
  color: var(--ink);

  outline: none;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}

.f-field textarea{ resize: vertical; min-height: 150px; }
.f-field input:focus,
.f-field select:focus,
.f-field textarea:focus{
  border-color: rgba(26,33,29,.46);
  background: rgba(255,255,255,.62);
  transform: translateY(-1px);
}

.f-span2{ grid-column: 1 / -1; }

.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.f-foot{
  margin-top: 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--hairline2);
}

.fine{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color: rgba(26,33,29,.60);
  max-width: 70ch;
}

.submit{
  appearance:none;
  border: 1px solid rgba(26,33,29,.22);
  cursor:pointer;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-weight:600;
  letter-spacing:.10px;
  transition: transform .12s var(--ease), opacity .12s var(--ease);
}
.submit:hover{ opacity:.94; }
.submit:active{ transform: translateY(1px); }

.contact-bottom{
  margin-top:22px;
  border-top:1px solid var(--hairline2);
  padding-top:16px;
  display:grid;
  gap:10px;
}

.cb-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  padding-bottom:10px;
  border-bottom:1px solid var(--hairline2);
}
.cb-row span{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18px;
  color: rgba(26,33,29,.60);
}
.cb-row b{ font-weight:600; text-align:right; }
.cb-row.small b{ font-weight:500; color: rgba(26,33,29,.78); }

.cb-note{
  margin-top:6px;
  font-size:13px;
  line-height:1.6;
  color: rgba(26,33,29,.74);
}

/* =========================
   FOOTER
========================= */
.foot{
  position:sticky;
  bottom:0;
  z-index:40;
  background: rgba(245,242,234,.62);
  border-top: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.foot-inner{
  max-width: var(--max);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  font-size:12px;
  letter-spacing:.10px;
  color: rgba(26,33,29,.70);
}

.foot-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.foot-links span{ opacity:.45; }

/* =========================
   Imprint (Wiederhergestellt)
========================= */

.imprint-credit{
  margin-top: 48px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(26,33,29,.55);
}
.imprint-credit a{
  text-decoration: none;
}
.imprint-credit a:hover{
  text-decoration: underline;
}



/* =========================
   RESPONSIVE (Wiederhergestellt)
========================= */
@media (max-width: 860px){
  .menu-inner{ grid-template-columns: 1fr; }
  .menu-left{
    padding: 96px 22px 22px;
    border-right: 0;
  }
  .menu-right{ padding: 22px; }
}

@media (max-width: 640px){
  :root{ --padY: 92px; }
  .wrap{ padding-left: 16px; padding-right: 16px; }

  .menu-left{ padding-top: 92px; }
  .menu-right{ padding-top: 18px; }

  .menu-card-row{ flex-direction: column; align-items:flex-start; }
  .menu-card-row b{ text-align:left; }

  .intro-hero{ padding: 0 16px; }
  .section-label{ right:18px; }
  .intro-actions{ line-height: 1.9; }
  .intro-actions .sep{ display:none; }

  .f-grid{ grid-template-columns: 1fr; }
  .f-span2{ grid-column: auto; }
  .f-foot{ flex-direction: column; align-items:stretch; }
  .submit{ width: 100%; }

  .cb-row{ flex-direction: column; align-items:flex-start; }
  .cb-row b{ text-align:left; }

  .foot-inner{ flex-direction: column; align-items:flex-start; }
  .foot-links{ justify-content:flex-start; }
}