:root{
  --ink:#10262d;
  --muted:#6f8880;
  --paper:#f3f0ea;
  --paper2:#e9e5de;
  --line:rgba(16,38,45,.18);
  --max:1460px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.cover{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:#b7c4ca;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.cover-photo{
  position:absolute;
  top:0;
  right:0;
  bottom:116px; /* Bild endet vor der Schwelle: Einhorn bleibt sichtbar */
  left:0;
  overflow:hidden;
  z-index:0;
}
.cover-photo picture{
  display:block;
  width:100%;
  height:100%;
}
.cover-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
}
.cover-wash{
  position:absolute;
  top:0;
  right:0;
  bottom:116px;
  left:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(220,229,232,.52) 0%, rgba(220,229,232,.30) 29%, rgba(220,229,232,.05) 58%, rgba(220,229,232,0) 100%),
    linear-gradient(180deg, rgba(219,228,231,.08), rgba(219,228,231,0) 58%, rgba(10,24,29,.015));
}
.site-head{
  position:relative;
  z-index:5;
  width:min(calc(100% - 7vw), var(--max));
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:42px 0 20px;
}
.brand{display:flex;align-items:flex-start;gap:34px}
.brand-name{
  font-family:Georgia, "Times New Roman", serif;
  font-size:54px;
  line-height:.9;
  letter-spacing:-.04em;
}
.brand-line{font-size:14px;line-height:1.25;padding-top:4px}
.main-nav{display:flex;align-items:center;gap:46px;font-size:14px}
.main-nav a{padding:9px 0;border-bottom:1px solid transparent}
.main-nav a:hover{border-color:var(--ink)}
.main-nav .contact-link{border:1px solid rgba(16,38,45,.6);padding:11px 18px}
.menu-toggle{display:none}


/* Hamburger-Menü nur bei echter Benutzeraktion animieren */
.main-nav.nav-animate{
  transition:transform .3s ease;
}


.hero-copy{
  position:relative;
  z-index:4;
  align-self:center;
  width:min(calc(100% - 7vw), var(--max));
  margin:0 auto;
  padding:20px 0 72px;
}
.hero-copy h1{
  margin:0;
  width:max-content;
  max-width:50vw;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(48px,4.15vw,76px);
  line-height:1.05;
  font-weight:400;
  letter-spacing:-.025em;
}
.hero-copy h1 em{
  color:#728e86;
  font-style:normal;
}
.short-rule{width:38px;height:1px;background:#728e86;margin:27px 0}
.hero-copy p{font-size:16px;line-height:1.5;margin:0 0 27px}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:22px;
  border-bottom:1px solid var(--ink);
  padding-bottom:4px;
  font-size:16px;
}
.text-link span{font-size:22px;line-height:1}
.threshold{
  position:relative;
  z-index:6;
  min-height:116px;
  background:rgba(247,244,239,.96);
  border-top:1px solid rgba(16,38,45,.08);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-left:max(3.5vw,calc((100vw - var(--max))/2));
  padding-right:max(3.5vw,calc((100vw - var(--max))/2));
}
.threshold a{
  padding:27px 30px 23px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-left:1px solid var(--line);
  transition:background .2s ease;
}
.threshold a:last-child{border-right:1px solid var(--line)}
.threshold a:hover{background:rgba(255,255,255,.55)}
.threshold small{font-size:11px;opacity:.55;margin-bottom:4px}
.threshold span{font-family:Georgia, "Times New Roman", serif;font-size:22px}
.section{
  width:min(calc(100% - 9vw), 1280px);
  margin:0 auto;
  padding:150px 0;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  margin:0 0 24px;
  opacity:.65;
}
.intro h2,.project h2,.workshop h2,.diwa h2,.contact h2{
  font-family:Georgia, "Times New Roman", serif;
  font-weight:400;
  letter-spacing:-.028em;
}
.intro h2{
  font-size:clamp(48px,5.4vw,82px);
  line-height:1.04;
  max-width:1050px;
  margin:0 0 70px;
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12vw;
  max-width:1080px;
}
.two-col p{margin:0;font-size:18px}
.two-col .lead{font-family:Georgia, "Times New Roman", serif;font-size:26px;line-height:1.45}
.project{
  width:100%;
  max-width:none;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(360px,.75fr);
  min-height:760px;
  background:#d8d4cb;
}
.project-image{
  min-height:760px;
  position:relative;
  overflow:hidden;
  background:#8199a0;
}
.project-image picture{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.project-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.project-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:90px 7vw;
  background:#e3dfd7;
}
.project-copy h2{
  font-size:clamp(40px,4vw,64px);
  line-height:1.08;
  margin:0 0 32px;
}
.project-copy p:not(.eyebrow){font-size:18px;margin:0 0 36px;max-width:520px}
.workshop{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:14vw;
  align-items:end;
}
.workshop h2{font-size:clamp(48px,5vw,76px);line-height:1.05;margin:0 0 35px}
.workshop-copy>p:not(.eyebrow){font-size:19px;max-width:690px}
.workshop .text-link{margin-top:18px}
.note{
  border-top:1px solid var(--ink);
  padding-top:18px;
  max-width:320px;
}
.note span{font-size:11px;text-transform:uppercase;letter-spacing:.16em;opacity:.6}
.note p{font-family:Georgia, "Times New Roman", serif;font-size:24px;line-height:1.35;margin:18px 0 0}
.diwa{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.diwa h2{font-size:clamp(42px,5vw,78px);line-height:1.12;margin:0 0 35px;max-width:1100px}
.contact{text-align:center;padding-top:180px;padding-bottom:180px}
.contact h2{font-size:clamp(62px,8vw,124px);line-height:1;margin:0}
.contact>p:not(.eyebrow){font-size:26px;margin:18px 0 50px;font-family:Georgia,"Times New Roman",serif}
.contact-big{
  display:inline-flex;
  gap:40px;
  align-items:center;
  border-bottom:1px solid var(--ink);
  padding:0 2px 8px;
  font-size:20px;
}
.footer{
  background:#10262d;
  color:#e8ecea;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:4vw;
  padding:70px max(4.5vw,calc((100vw - 1280px)/2));
}
.footer div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.footer strong{font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.footer a{opacity:.78}
.footer a:hover{opacity:1}
.footer-brand{font-family:Georgia,"Times New Roman",serif;font-size:45px;line-height:1}
.footer p{margin:5px 0 0;opacity:.72}


@media (max-width: 960px){
  .cover{
    min-height:100svh;
    display:grid;
    grid-template-rows:auto 1fr auto;
  }

.site-head{
  width:calc(100% - 40px);
  padding-top:24px;
  z-index:30;
}

  .brand{gap:18px}
  .brand-name{font-size:44px}
  .brand-line{font-size:12px}

 .main-nav{
  position:fixed;
  inset:0;
  background:rgba(243,240,234,.97);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  transform:translateY(-105%);
  z-index:20;
}

  .main-nav.open{transform:translateY(0)}
  .main-nav .contact-link{border:0;padding:0}

  .menu-toggle{
    display:block;
    position:relative;
    z-index:25;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    padding:10px;
    cursor:pointer;
  }

  .menu-toggle span{
    display:block;
    height:1px;
    background:var(--ink);
    margin:7px 0;
    transition:.2s;
  }

  /* Tablet/Mobile: eigener 4:5-Bildmaster.
     Immer 100% Viewport-Breite. Falls die Höhe nicht passt, wird nur oben
     aus dem ruhigen Himmel abgeschnitten; der untere Motivbereich bleibt stehen. */
  .cover-photo{
    bottom:78px; /* auch mobil liegt die Schwelle nicht mehr über Einhorn/Stuhl */

    /* Das 4:5-Bild bleibt unten unverändert 100% breit.
       Auf sehr hohen/schmalen Screens ist der Bildcontainer höher als das Bild.
       Statt eines sichtbaren "Randes" wird die fehlende Höhe mit exakt dem
       Himmelsfarbton des Mobile-Masters fortgesetzt. */
    background:#a1b2c1;
  }

  .cover-wash{
    bottom:78px;
  }

  .cover-photo picture{
    display:flex;
    align-items:flex-end;
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
  }

  /* optische Naht zwischen verlängertem Himmel und 4:5-Foto kaschieren */
  .cover-photo picture::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:calc((100vw * 1024 / 825) - 18px);
    height:36px;
    pointer-events:none;
    background:linear-gradient(
      to bottom,
      rgba(161,178,193,1) 0%,
      rgba(161,178,193,.62) 45%,
      rgba(161,178,193,0) 100%
    );
  }

  .cover-photo img{
    display:block;
    width:100%;
    height:auto;
    flex:0 0 auto;
    max-width:none;
    object-fit:initial;
    object-position:initial;
  }

  .cover-wash{
    background:linear-gradient(180deg,
      rgba(220,229,232,.12) 0%,
      rgba(220,229,232,.04) 45%,
      rgba(220,229,232,.12) 72%,
      rgba(220,229,232,.20) 100%);
  }

  /* Der Text beginnt klar früher – nicht mehr am unteren Rand verankert */
  .hero-copy{
    width:calc(100% - 40px);
    align-self:start;
    margin-top:78px;
    padding:0 0 40px;
  }

  .hero-copy h1{
    max-width:88vw;
    font-size:clamp(42px,8.6vw,64px);
    line-height:1.03;
  }

  .hero-copy p{
    max-width:620px;
    font-size:15px;
    line-height:1.45;
  }

  .hero-copy p br{display:none}

  .short-rule{
    margin:22px 0;
  }


  .threshold{
    min-height:0;
    grid-template-columns:repeat(2,1fr);
    padding:0 20px;
  }

  .threshold a{
    min-height:76px;
    padding:15px 18px 14px;
    text-align:left;
    border-left:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  .threshold a:nth-child(2n){
    border-right:1px solid var(--line);
  }

  .threshold a:nth-last-child(-n+2){
    border-bottom:0;
  }

  .threshold small{
    display:block;
    font-size:10px;
    margin-bottom:3px;
  }

  .threshold span{
    font-size:17px;
    line-height:1.15;
  }

  .section{
    width:calc(100% - 40px);
    padding:92px 0;
  }

  .intro h2{
    font-size:clamp(42px,12vw,68px);
    margin-bottom:48px;
  }

  .two-col{
    grid-template-columns:1fr;
    gap:32px;
  }

  .two-col .lead{font-size:23px}

  .project{
    grid-template-columns:1fr;
    min-height:0;
  }

  .project-image{min-height:58svh}
  .project-image img{object-position:center 42%}
  .project-copy{padding:70px 20px 85px}

  .workshop{
    grid-template-columns:1fr;
    gap:70px;
  }

  .workshop h2{font-size:48px}
  .diwa h2{font-size:45px}

  .contact{
    text-align:left;
    padding-top:110px;
    padding-bottom:110px;
  }

  .contact h2{font-size:65px}

  .footer{
    grid-template-columns:1fr 1fr;
    padding:55px 20px;
    gap:45px 25px;
  }
}

@media (max-width: 640px){
  .hero-copy{
    margin-top:58px;
  }

  .hero-copy h1{
    font-size:clamp(38px,11vw,52px);
    max-width:94vw;
  }

  .hero-copy p{
    font-size:14px;
    max-width:92vw;
  }

  }

@media (max-width: 520px){
  .brand-line{display:none}

  .hero-copy{
    margin-top:48px;
  }

  .hero-copy h1{font-size:42px}

  .threshold{
    padding:0 12px;
  }

  .threshold a{
    min-width:0;
    padding-left:12px;
    padding-right:12px;
  }

  .threshold span{
    font-size:15px;
  }
  .project-image{min-height:48svh}
  .footer{grid-template-columns:1fr}
}
@media (max-width: 430px){

  /* Hero auf schmalen Smartphones nochmals früher beginnen */
  .hero-copy{
    margin-top:16px;
  }

  .hero-copy h1{
    font-size:40px;
    line-height:1.02;
  }

  .hero-copy > p:not(.eyebrow){
    font-size:13.5px;
    line-height:1.42;
    max-width:94vw;
    margin-bottom:14px;
  }

  .short-rule{
    margin:18px 0;
  }

  /* 2 × 2 bleibt, braucht aber weniger Höhe */
  .threshold a{
    min-height:62px;
    padding:10px 10px 9px;
  }

  .threshold small{
    font-size:9px;
  }

  .threshold span{
    font-size:14px;
  }
}
html.nav-open,
body.nav-open{
  overflow:hidden;
}

.footer-logo {
  display: inline-block;
}

.footer-logo img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}
.diwa-signature {
    margin-top: 2.5rem;
    font-size: .78rem;
    opacity: .55;
    letter-spacing: .03em;
}