@font-face{font-family:"Open Sans";src:url("../fonts/open-sans-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/open-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/open-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/open-sans-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Over the Rainbow";src:url("../fonts/over-the-rainbow-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{--green:#79970c;--dark:#3e3e3e;--paper:#f4f0e9}
*{box-sizing:border-box}
html{min-width:320px;background:var(--paper)}
body{margin:0;color:var(--dark);font-family:"Open Sans",Arial,sans-serif;background:url("../assets/hintergrund.jpg") center/cover fixed}
a{color:inherit}
img{display:block;max-width:100%}
.landing{min-height:calc(100svh - 99px);display:grid;grid-template-columns:35.7% 64.3%;position:relative;overflow:hidden}
.story{position:relative;z-index:2;min-height:calc(100svh - 99px);color:#fff;isolation:isolate}
.story__image{position:absolute;inset:0 -15% 0 0;z-index:1;background:url("../assets/apfelbild_mit-rundung.png") center/cover no-repeat}
.story__copy{position: relative;z-index: 2;width:270px;margin-left:47%;padding-top:13vh;text-shadow:0 1px 4px rgba(0,0,0,.28)}
.story h1{margin:0;font-size:29px;line-height:1.34;text-transform:uppercase;font-weight:700;letter-spacing:.01em}
.story h1 span{display:block;color:#fff;font-size:28px;line-height:1.35;white-space:nowrap}
sup{font-size:.48em;vertical-align:super}
.story h1:not(span){color:var(--green)}
.story__line{display:block;width:70px;height:4px;margin:17px 0 25px;background:var(--green)}
.story p{margin:0;font-size:16px;line-height:1.35}
.story .signature{margin-top:12px;font:400 24px/1.3 "Over the Rainbow",cursive;color:#fff}
.content{position:relative;z-index:1;min-width:0;min-height:calc(100svh - 99px)}
.partner{position:absolute;z-index:2;top:9.3%;left:16.5%;display:flex;align-items:center;gap:30px;font-size:17px}
.partner img{width:108px;height:auto}
.person{position:absolute;right:-1%;top:5%;z-index:1;width:min(43vw,610px);height:auto}
.brand{position:absolute;z-index:3;top:26%;left:11%;width:350px;text-align:center}
.brand>img{width:100%}
.heart-divider{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:13px;color:var(--green)}
.heart-divider span{height:3px;width:81px;background:var(--green)}
.heart-divider b{font-size:30px;line-height:1}
.values{position:absolute;z-index:3;left:0;bottom:8.8%;width:70%;display:grid;grid-template-columns:repeat(4,minmax(135px,1fr))}
.value{text-align:center;min-height:152px;padding:0 14px;border-right:1px solid var(--green)}
.value:last-child{border:0}
.value img{width:78px;height:78px;object-fit:contain;margin:0 auto 9px}
.value h2{margin:0 0 11px;font-size:15px;line-height:1.2;text-transform:uppercase;font-weight:700}
.value p{margin:0;font-size:10.5px;line-height:1.35}
.seal{position:absolute;z-index:4;right:2.7%;bottom:3%;width:203px}
.footer{height:99px;position:relative;z-index:10;display:grid;grid-template-columns:35.7% 64.3%;align-items:center;color:#fff;background:url("../assets/holztafel_footer.png") center/cover;font-size:13px}
.footer a{text-decoration:none}
.footer a:hover,.footer a:focus-visible{text-decoration:underline}
.footer__legal{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 20px}
.made-by{display:flex;align-items:center;gap:7px}
.made-by img{width:16px;height:16px}
.contacts{display:grid;grid-template-columns:190px 200px minmax(290px,1fr);gap:45px;align-items:center;padding:0 34px 0 55px}
.contact{display:flex;align-items:center;gap:11px;min-width:0}
.contact img{width:42px;height:42px;flex:0 0 auto}
.contact span{display:flex;flex-direction:column;min-width:0;white-space:nowrap;font-size:14px;}
.contact strong{text-transform:uppercase;font-size:16px;margin-bottom:2px}

.legal-page{min-height:100svh;background:url("../assets/hintergrund.jpg") center/cover fixed}
.legal{width:min(760px,calc(100% - 40px));margin:0 auto;padding:70px 0}
.legal__logo{display:block;width:230px;margin:0 auto 60px}
.legal__content{background:rgba(255,255,255,.48);padding:42px 48px;border:1px solid rgba(62,62,62,.12)}
.legal h1{margin:0 0 32px;color:#3e371b;font-size:34px}
.legal__content p{line-height:1.65}
.legal__placeholder{padding:20px 24px;border-left:3px solid var(--green);background:rgba(255,255,255,.45);margin-bottom:38px}
.legal__placeholder p{margin:0 0 8px}.legal__placeholder p:last-child{margin:0}
.back-link{display:inline-block;color:var(--green);font-weight:700;text-decoration:none}.back-link:hover{text-decoration:underline}

.sprachumschalter {top: 20px; right: 20px; position: fixed; background: #79970c; color: #fff; padding: 5px 10px; font-size: 14px; z-index: 100;}

@media (max-width:1200px){
  .landing{grid-template-columns:38% 62%}.footer{grid-template-columns:38% 62%}
  .story__copy{margin-left:28%;transform:scale(.9);transform-origin:top left}
  .brand{left:23%;width:320px}.values{left:5%;grid-template-columns:repeat(4,150px)}
  .value{padding:0 9px}.seal{width:175px}.contacts{padding-left:35px;gap:12px;grid-template-columns:180px 185px 1fr}
}
@media (min-width:901px) and (max-width:1450px){
  .contacts{padding-left:32px;grid-template-columns:200px 175px minmax(250px,1fr);gap:20px;font-size:11px}
  .contact img{width:38px;height:38px}.contact strong{font-size:10px}
}
@media (max-width:1300px){
  .landing{display:block;min-height:0;overflow:visible}
  .story{min-height:700px;background:#172d13}
  .story__image{inset:0;background-image:linear-gradient(90deg,rgba(8,29,7,.08),rgba(8,29,7,.35)),url("../assets/apfelbild_komplett.jpg");background-position:45% 58%}
  .story__copy{width:min(410px,78vw);margin:0 5vw 0 auto;padding:80px 4vw;transform:none;max-width:none}
  .story h1{font-size:34px}.story h1 span{font-size:28px}
  .story p{font-size:17px}.story .signature{font-size:27px}
  .content{min-height:0;padding:0 6vw;display:flex;flex-direction:column;align-items:center;overflow:hidden}
  .partner{position:relative;top:auto;left:auto;order:1;margin:55px 0 30px;gap:22px}
  .person{position:relative;top:auto;right:auto;order:4;width:min(590px,95vw);margin-top:35px}
  .brand{position:relative;top:auto;left:auto;order:2;width:min(360px,75vw)}
  .values{position:relative;left:auto;bottom:auto;order:3;width:min(680px,100%);grid-template-columns:repeat(2,1fr);margin-top:35px}
  .value{min-height:175px;padding:15px;border-right:1px solid var(--green);border-bottom:1px solid var(--green)}
  .value:nth-child(2){border-right:0}.value:nth-child(3){border-bottom:0}.value:nth-child(4){border:0}
  .value p{font-size:12px}.seal{display:none}
  .footer{height:auto;display:flex;flex-direction:column-reverse;padding:36px 5vw 26px;gap:30px;background-size:auto 100%}
  .contacts{width:min(610px,100%);display:grid;grid-template-columns:1fr 1fr;padding:0;gap:24px}.contact--address{grid-column:1/-1}
}
@media (max-width:560px){
  .story{min-height:650px}.story__copy{width:86vw;margin:0 0 0 auto;padding:62px 7vw 62px 10vw}.story h1{font-size:28px}.story h1 span{font-size:24px}
  .story p br{display:none}.story p{max-width:300px}.content{padding-inline:22px}
  .partner{flex-direction:column;gap:14px;text-align:center;font-size:15px}.partner img{width:120px}
  .brand{width:min(300px,82vw)}.heart-divider span{width:62px}
  .person{width:105vw;max-width:none;margin:30px 0 0 5vw}
  .values{grid-template-columns:1fr;margin-top:20px}.value,.value:nth-child(2),.value:nth-child(3){border:0;border-bottom:1px solid var(--green);padding:24px 10px;min-height:0}
  .value img{width:70px;height:70px}.value h2{font-size:16px}.value p{font-size:12px}.value p br{display:none}
  .contacts{grid-template-columns:1fr;width:auto}.contact--address{grid-column:auto}.contact span{white-space:normal}.footer__legal{flex-wrap:wrap;text-align:center}
  .legal{padding:38px 0}.legal__logo{width:180px;margin-bottom:38px}.legal__content{padding:30px 22px}.legal h1{font-size:28px}.legal__placeholder{padding:16px}
}
@media (min-width:901px) and (max-height:720px){.story__copy{padding-top:6vh;transform:scale(.82)}.partner{top:6%}.brand{top:18%;transform:scale(.88)}.values{bottom:5%;transform:scale(.88);transform-origin:bottom left}.person{top:2%;width:min(40vw,540px)}}
