/* Generated; edit the listed source files, then rebuild. */

/* SOURCE: styles/krabat/01-grundregeln.css */

.krabat-page {
  color:var(--foreground)
}
.krabat-hero {
  position:relative;
  isolation:isolate;
  background:var(--cream);
  min-height:660px;
  display:flex;
  align-items:center;
  overflow:hidden
}
.krabat-hero-copy {
  position:relative;
  z-index:2;
  padding:35px 6vw 65px;
  width:51%;
  max-width:900px
}
.krabat-hero-copy .breadcrumb {
  font-size:12px;
  margin-bottom:68px;
  color:var(--muted-foreground)
}
.krabat-hero-copy .eyebrow {
  font-size:11px;
  letter-spacing:.13em
}
.krabat-hero h1 {
  font-size:clamp(3rem,4.5vw,5.1rem);
  line-height:1.08;
  letter-spacing:-.05em
}
.krabat-page h1 em,.krabat-page h2 em,.krabat-teaser h2 em {
  color:var(--primary)
}
.krabat-page .eyebrow,.krabat-teaser .eyebrow {
  color:var(--primary)
}
.krabat-hero-copy>p:not(.eyebrow) {
  max-width:420px;
  margin-top:25px;
  color:var(--muted-foreground);
  font-size:15px;
  line-height:1.85
}
.krabat-hero-copy>.button {
  margin-top:30px
}
.krabat-hero-image {
  position:absolute;
  z-index:-2;
  inset:0
}
.krabat-hero-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
.krabat-hero::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#f2f4fa 0%,#f2f4faf5 26%,#f2f4fabb 38%,transparent 57%);
  pointer-events:none
}
.krabat-image-note {
  position:absolute;
  right:30px;
  bottom:22px;
  padding:5px 10px;
  background:#f7f9fff2;
  color:var(--foreground);
  font-size:10px;
  letter-spacing:.04em
}
.krabat-story {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw
}
.krabat-story>div>p,.krabat-motifs .section-heading>p {
  color:var(--muted-foreground);
  line-height:1.85
}
.krabat-story>div>p+p {
  margin-top:20px
}
.krabat-motifs {
  background:var(--cream)
}
.krabat-motif-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:50px
}
.krabat-motif-grid article {
  border-top:1px solid var(--border);
  padding-top:28px
}
.krabat-motif-grid svg {
  color:var(--primary);
  margin-bottom:24px
}
.krabat-motif-grid .eyebrow {
  display:block;
  font-size:10px;
  letter-spacing:.13em;
  margin-bottom:16px
}
.krabat-motif-grid h3 {
  font-family:var(--serif);
  font-size:25px;
  margin-bottom:16px
}
.krabat-motif-grid p {
  font-size:15px;
  line-height:1.85;
  color:var(--muted-foreground)
}


/* SOURCE: styles/krabat/02-grundregeln.css */

.krabat-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:8vw
}
.krabat-detail-image {
  aspect-ratio:1;
  overflow:hidden;
  background:var(--cream)
}
.krabat-detail-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center
}
.krabat-details dl {
  margin:32px 0 0
}
.krabat-details dl>div {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:20px;
  border-top:1px solid var(--border);
  padding:17px 0;
  font-size:13px
}
.krabat-details dt {
  font-weight:600
}
.krabat-details dd {
  margin:0;
  color:var(--muted-foreground)
}
.krabat-contact {
  text-align:center;
  background:var(--accent)
}
.krabat-contact>p:not(.eyebrow) {
  max-width:550px;
  margin:25px auto;
  line-height:1.85;
  color:var(--muted-foreground)
}
.krabat-contact>span {
  display:block;
  font-size:12px;
  color:var(--muted-foreground);
  margin-top:22px
}
.krabat-teaser {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:8vw;
  align-items:center;
  background:var(--cream)
}
.krabat-teaser-image {
  position:relative;
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--cream)
}
.krabat-teaser-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
  transition:transform .5s
}
.krabat-teaser-image:hover img {
  transform:scale(1.025)
}
.krabat-teaser-image>span {
  position:absolute;
  left:20px;
  bottom:20px;
  background:#f7f9fff2;
  padding:7px 11px;
  font-size:11px;
  color:var(--foreground)
}
.krabat-teaser>div>p:not(.eyebrow) {
  color:var(--muted-foreground);
  line-height:1.85;
  margin:26px 0 18px
}
.collection-krabat img {
  object-position:right center
}



.krabat-motif-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px);
  margin-top: clamp(48px, 6vw, 90px);
}

.krabat-motif {
  min-width: 0;
  border-top: 1px solid rgba(28, 42, 78, 0.12);
  padding-top: 28px;
}


/* =========================
   TASSENBILD
   ========================= */

.krabat-motif-image {
  position: relative;
  height: clamp(220px, 18vw, 330px);

  display: flex;
  align-items: flex-end;
  justify-content: center;

  margin-bottom: 35px;
}

/* ganz dezenter Schatten / Standfläche */
.krabat-motif-image::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;

  width: 55%;
  height: 18px;

  transform: translateX(-50%);
  border-radius: 50%;

  background: rgba(25, 35, 65, 0.09);
  filter: blur(12px);
}

.krabat-motif-image img {
  position: relative;
  z-index: 1;

  display: block;

  width: auto;
  height: 100%;
  max-width: 92%;

  object-fit: contain;

  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

.krabat-motif:hover .krabat-motif-image img {
  transform: translateY(-6px);
}


/* =========================
   ICON
   ========================= */

.krabat-motif-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 28px;

  display: flex;
  align-items: center;
}

.krabat-motif-icon svg {
  width: 30px;
  height: 30px;
}


/* =========================
   TEXT
   ========================= */

.krabat-motif .eyebrow {
  display: block;
  margin-bottom: 24px;
}

.krabat-motif h3 {
  margin: 0 0 24px;

  font-size: clamp(1.55rem, 1.8vw, 2.25rem);
  line-height: 1.1;
}

.krabat-motif > p {
  margin: 0;

  font-size: clamp(1rem, 1.05vw, 1.2rem);
  line-height: 1.75;
}


/* =========================
   TABLET
   ========================= */

@media (max-width: 1100px) {

  .krabat-motif-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .krabat-motif-image {
    height: 300px;
  }

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 650px) {

  .krabat-motif-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .krabat-motif-image {
    height: 290px;
  }

}



/* SOURCE: styles/krabat/03-max-width-1150px.css */

@media(max-width:1150px) {
  .krabat-hero {
    min-height:610px
  }
  .krabat-hero-copy {
    width:55%
  }
  .krabat-hero h1 {
    font-size:3.25rem
  }
  .krabat-hero-copy .breadcrumb {
    margin-bottom:40px
  }
}


/* SOURCE: styles/krabat/04-max-width-800px.css */

@media(max-width:800px) {
  .krabat-hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-height:0;
    overflow:visible
  }
  .krabat-hero-copy {
    padding:26px 6vw 32px;
    width:100%;
    max-width:none;
    background:var(--cream)
  }
  .krabat-hero-copy .breadcrumb {
    margin-bottom:32px;
    font-size:11px
  }
  .krabat-hero h1 {
    font-size:clamp(2.35rem,9vw,4rem);
    line-height:1.12;
    overflow-wrap:break-word
  }
  .krabat-hero-copy .eyebrow {
    font-size:9px;
    line-height:1.65;
    letter-spacing:.12em
  }
  .krabat-hero-copy>p:not(.eyebrow) {
    max-width:36rem;
    font-size:15px;
    margin-top:22px
  }
  .krabat-hero-copy>.button {
    min-height:48px;
    margin-top:25px
  }
  .krabat-hero-image {
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:4/3;
    z-index:0;
    overflow:hidden
  }
  .krabat-hero-image img {
    object-position:right center
  }
  .krabat-hero::after {
    display:none
  }
  .krabat-image-note {
    position:static;
    display:block;
    padding:10px 6vw;
    font-size:10px;
    background:var(--accent);
    text-align:right
  }
  .krabat-story,.krabat-details,.krabat-teaser {
    grid-template-columns:minmax(0,1fr);
    gap:30px
  }
  .krabat-story>div>p {
    font-size:15px
  }
  .krabat-motif-grid {
    grid-template-columns:minmax(0,1fr);
    gap:30px
  }
  .krabat-motif-grid article {
    padding-top:22px
  }
  .krabat-motif-grid svg {
    margin-bottom:16px
  }
  .krabat-detail-image {
    aspect-ratio:4/3
  }
  .krabat-details dl>div {
    grid-template-columns:80px minmax(0,1fr);
    gap:15px
  }
  .krabat-contact>p:not(.eyebrow) {
    font-size:15px
  }
  .krabat-teaser-image {
    aspect-ratio:4/3
  }
  .krabat-teaser>div>p:not(.eyebrow) {
    font-size:15px
  }
}


/* SOURCE: styles/krabat/05-max-width-480px.css */

@media(max-width:480px) {
  .krabat-hero-copy>.button,.krabat-contact>.button {
    width:100%;
    justify-content:space-between
  }
  .krabat-contact>span {
    font-size:11px
  }
  .krabat-teaser-image>span {
    left:16px;
    bottom:16px
  }
}