/* Gemeinsame Inhaltsregeln, anschließend die mobile Figma-Anordnung. */
@import url('./desktop.css');
  
.story-wrap{
  width:auto;
  margin-inline:30px
}

.story-hero{
  height:844px;
  background:linear-gradient(0deg,#0a11082e 65%,#040802bf),url('../../assets/ueber-uns/hero-mobil.webp') center 7%/auto 1302px no-repeat
}

.story-hero .story-wrap{
  padding:505px 0 0;
  margin-inline:40px
}

.story-hero .story-eyebrow{
  font-size:15px;
  margin:0 0 5px;
  padding-bottom:6px
}

.story-hero h1{
  font-size:54px;
  line-height:1.115
}

.story-hero .handwriting{
  font-size:30px;
  margin-top:4px;
  white-space:nowrap
}

.hero-tag{
  font-size:15px;
  line-height:1.25;
  margin:29px 0 0 5px
}

.hero-tag:after{
  display:none
}

.split{
  display:flex;
  flex-direction:column;
  gap:0
}

.story-intro{
  margin:0;
  padding:0
}

.story-intro>.section-photo{
  width:100%;
  height:288px;
  min-height:0;
  aspect-ratio:auto
}

.story-copy{
  width:100%
}

.story-intro>.story-copy{
  padding:27px 30px 30px;
  min-height:553px
}

.story-eyebrow{
  font-size:12px;
  margin-bottom:12px
}

.about-page main h2{
  font-size:25px;
  line-height:1.2;
  margin-bottom:16px
}

.story-copy .story-eyebrow{
  margin-bottom:9px
}

.story-copy>p:not(.story-eyebrow):not(.handwriting):not(.signature),.team-description p{
  font-size:15px;
  line-height:1.2;
  margin-bottom:15px;
  text-wrap: pretty;
}

.handwriting{
  font-size:25px;
  line-height:1.3
}

.story-copy>.handwriting{
  margin:12px 0 18px
}

.story-copy>.welcome{
  font-size:25px;
  gap:20px;
  margin:14px 0 16px;
  white-space:nowrap
}

.welcome img{
  width:23px;
  height:32px
}

.signature { font-size: 13px; gap: 0; }
.signature img{
  width:100px;
  height:36px
}

.sprig{
  width:108px;
  height:68px;
  right:20px;
  top:20px
}

.journey{
  padding:30px 0 0;
  overflow:clip
}

.journey>.story-wrap{
  margin:0;
  position:relative
}

.journey .story-copy{
  padding:0 30px 25px;
  min-height:596px
}

.journey h2{
  max-width:222px;
  margin-bottom:12px!important
}

.journey .story-copy h3{
  font-size:15px;
  margin:18px 0 17px
}

.journey .story-copy>.handwriting{
  margin:20px 0 18px
}

.journey .story-copy>.today{
  margin:22px 0 18px
}

.journey-photos{
  padding:0;
  position:static;
  width:100%
}

.journey-photos>.section-photo{
  height:200px;
  object-position:center 50%
}

.polaroid{
  width:107px;
  height:120px;
  border-width:6px;
  left:auto;
  right:25px;
  top:0;
  bottom:auto;
  transform:rotate(9.65deg)
}

.journey-photos:after{
  width:40px;
  height:15px;
  top:-3px;
  right:38px;
  left:auto;
  bottom:auto;
  transform:rotate(10.6deg)
}

.polaroid-leaf{
  width:65px;
  height:138px;
  left:auto;
  right:107px;
  top:3px;
  bottom:auto;
  animation:mobile-leaf 17.31s linear infinite
}

@keyframes mobile-leaf{
  0%,97.111%{
  scale:1.2
}
100%{
  scale:1
}

}

.edge-leaf{
  display:none
}

.team{
  padding-block:28px 0
}

.team-heading{
  display:block;
  margin-bottom:20px
}

.team-heading .sprig{
  right:-10px;
  top:-8px
}

.team-heading .handwriting{
  font-size:22px;
  margin:8px 0 25px
}

.team-description p{
  margin-bottom:15px
}

.team-grid-desktop{
  display:none
}

.team-grid-mobile{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:30px;
  row-gap:23px
}

.team-grid article img{
  height:136px;
  aspect-ratio:auto;
  object-fit:cover
}

.team-grid h3{
  font-size:13px;
  margin:10px 0 7px;
  white-space:nowrap
}

.team-grid article p{
  font-size:10px;
  line-height:15px
}

.team-cta{
  margin-top:24px;
  animation:none
}

.team-cta .outline-link{
  display:flex;
  gap:8px;
  font-size:15px;
  padding:0 12px;
  height:34px;
  width:100%;
  white-space:nowrap
}

.team-cta .arrow{
  flex:1;
  min-width:25px;
  max-width:63px
}

.values{
  padding-top:45px;
  padding-bottom:35px
}

.values h2{
  max-width:250px
}

.values .handwriting{
  font-size:25px;
  margin:0 0 40px
}

.values-grid{
  display:flex;
  flex-direction:column;
  gap:25px;
  text-align:left
}

.values-grid article{
  display:grid;
  grid-template-columns:79px 1fr;
  gap:10px 20px;
  align-items:start
}

.values-grid article>.value-icon,.coffee-symbol{
  grid-column:1;
  grid-row:1/3;
  width:79px;
  height:79px;
  margin:5px 0 0
}

.coffee-symbol .value-icon{
  width:79px;
  height:79px;
  margin:0
}

.cup-symbol{
  top:10px;
  left:19px;
  width:46px;
  height:52px
}

.values-grid h3{
  grid-column:2;
  font-size:18px;
  margin:0;
  line-height:1.1
}

.values-grid h3 br{
  display:none
}

.values-grid p{
  grid-column:2;
  font-size:13px;
  line-height:1.2;
  margin:0
}

.coffee-story{
  padding:0
}

.coffee-story>.story-wrap{
  margin:0
}

.coffee-story .section-photo{
  height:241px;
  aspect-ratio:auto;
  object-position:center 65%
}

.coffee-story .story-copy{
  padding:30px 30px 38px
}

.coffee-story h2,.ingredients h2{
  font-size:23px!important
}

.coffee-story .story-copy>.handwriting{
  font-size:24px;
  white-space:normal;
  margin:-5px 0 20px
}

.ingredients{
  padding:0;
  margin:0
}

.ingredients .story-copy{
  padding:29px 30px 25px
}

.ingredients .sprig{
  top:20px;
  right:25px
}

.ingredients .story-copy>.handwriting{
  font-size:24px;
  margin:0 0 17px
}

.ingredients .section-photo{
  height:283px;
  aspect-ratio:auto;
  object-position:70% center
}

.philosophy{
  padding:140px 30px 230px
}

.philosophy blockquote{
  font-size:30px;
  line-height:1.25;
  max-width:314px;
  margin:0 auto 25px
}

.philosophy>p{
  font-size:17px
}

.quote-sign{
  gap:35px;
  margin-top:48px
}

.quote-leaf{
  width:187px;
  height:118px
}
.quote-leaf.left{
  left:-47px;
  bottom:85px
}
.quote-leaf.right{
  right:-50px;
  top:0
}

.about-page .footer .wrap{
  width:auto;
  margin-inline:40px
}

@media(max-width:359px){
  .story-wrap{
  margin-inline:22px
}
.story-copy>.welcome{
  font-size:23px;
  gap:7px
}
.story-intro>.story-copy,.journey .story-copy,.coffee-story .story-copy,.ingredients .story-copy{
  padding-inline:22px
}
.team-grid-mobile{
  gap:22px 16px
}
.team-grid h3{
  font-size:11px
}
.team-cta .outline-link{
  font-size:12px
}
.values-grid article{
  grid-template-columns:65px 1fr;
  column-gap:14px
}
.values-grid article>.value-icon,.coffee-symbol{
  width:65px;
  height:65px
}
.coffee-symbol .value-icon{
  width:65px;
  height:65px
}
.cup-symbol{
  width:38px;
  height:44px;
  left:15px;
  top:8px
}
.values-grid h3{
  font-size:16px
}
.polaroid{
  right:10px;
  width:88px;
  height:100px
}
.story-hero .story-wrap{
  margin-inline:30px
}

}

@media(min-width:481px){
  .story-wrap{
  margin-inline:40px
}
.story-intro>.story-copy,.journey .story-copy,.coffee-story .story-copy,.ingredients .story-copy{
  padding-inline:40px
}
.story-intro>.section-photo{
  height:380px
}
.team-grid article img{
  height:200px
}
.story-hero{
  background-size:cover
}
.journey-photos>.section-photo{
  height:300px
}

}

@media(prefers-reduced-motion:reduce){
  .polaroid-leaf{
  animation:none
}

}


/* Mobile S: 320–359 px, ohne doppelte Seitenabstände. */
@media (max-width: 359px) {
  .about-page .story-wrap { margin-inline: 20px; }
  .about-page .story-intro,
  .about-page .ingredients,
  .about-page .journey > .story-wrap,
  .about-page .coffee-story > .story-wrap { margin-inline: 0; }

  .about-page .story-intro > .story-copy,
  .about-page .journey .story-copy,
  .about-page .coffee-story .story-copy,
  .about-page .ingredients .story-copy { padding-inline: 20px; }

  .about-page main h2 { font-size: 23px; }
  .about-page .story-copy { min-width: 0; }
  .about-page .story-hero .story-wrap { margin-inline: 24px; }
  .about-page .story-hero .handwriting { font-size: 28px; white-space: normal; }
  .about-page .story-copy > .welcome { white-space: normal; }
  .about-page .welcome img { flex-shrink: 0; }
  .about-page .sprig { width: 70px; height: 50px; right: 16px; opacity: .55; }
  .about-page .team-heading .sprig { right: 0; top: -8px; }

  .about-page .journey h2 { max-width: 190px; }
  .about-page .polaroid { width: 70px; height: 82px; right: 17px; }
  .about-page .journey-photos::after { width: 30px; right: 30px; }
  .about-page .polaroid-leaf { width: 45px; height: 95px; right: 86px; opacity: .55; }

  .about-page .team-grid-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .about-page .team-grid article { min-width: 0; }
  .about-page .team-grid h3 { white-space: normal; line-height: 1.3; }
  .about-page .team-grid article img { height: auto; aspect-ratio: 150 / 136; }
  .about-page .team-cta .outline-link { min-height: 44px; height: auto; padding: 10px; white-space: normal; }
  .about-page .values-grid article { grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; }
  .about-page .values-grid h3,
  .about-page .values-grid p { min-width: 0; overflow-wrap: break-word; }
  .about-page .philosophy { padding: 90px 20px 130px; }
  .about-page .philosophy blockquote { font-size: 28px; }
  .about-page .footer .wrap { margin-inline: 24px; }
}
/* Mobile Abschnittsbilder reichen bis an beide Bildschirmränder. */
@media (max-width: 760px) {
  .about-page .story-intro,
  .about-page .ingredients,
  .about-page .journey > .story-wrap,
  .about-page .coffee-story > .story-wrap {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .about-page .section-photo,
  .about-page .journey-photos {
    display: block;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

.about-page .journey-photos::after {
  width: 40px;
  height: 15px;
  top: -3px;
  right: 48px;
  left: auto;
  bottom: auto;
  transform: rotate(10.6deg);
}