:root {

  --bg: #090909;

  --bg-soft: #11110f;

  --text: #f4f1eb;

  --muted: #c2bcb2;

  --copper: #d9782d;

  --copper-bright: #ef8b39;

  --line:
    rgba(217, 120, 45, .62);

  --panel:
    rgba(12, 12, 11, .78);

  --panel-border:
    rgba(217, 120, 45, .72);

  --max:
    1220px;

}


/* =========================================
   RESET
   ========================================= */

* {

  box-sizing:
    border-box;

}


html {

  scroll-behavior:
    smooth;

}


body {

  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  color:
    var(--text);

  background:

    radial-gradient(
      circle at 50% 25%,
      rgba(115, 61, 20, .12),
      transparent 36%
    ),

    linear-gradient(
      180deg,
      #080808 0%,
      #0a0a09 60%,
      #070707 100%
    );

  font-family:
    "Arial Narrow",
    "Roboto Condensed",
    "Helvetica Neue",
    Arial,
    sans-serif;

  letter-spacing:
    .02em;

}


body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .14;

  background-image:

    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 3px
    );

  mix-blend-mode:
    soft-light;

  z-index:
    -1;

}


a {

  color:
    inherit;

  text-decoration:
    none;

}


/* =========================================
   HINTERGRUND
   ========================================= */

.ambient {

  position:
    fixed;

  top: 0;

  bottom: 0;

  width:
    min(34vw, 520px);

  background-repeat:
    no-repeat;

  background-size:
    cover;

  background-position:
    center;

  opacity:
    .38;

  filter:
    saturate(.9)
    contrast(1.08);

  z-index:
    -3;

}


.ambient--left {

  left: 0;

  background-image:

    linear-gradient(
      90deg,
      rgba(0,0,0,.12),
      rgba(0,0,0,.62) 76%,
      #090909 100%
    ),

    url("../img/food-left.jpg");

}


.ambient--right {

  right: 0;

  background-image:

    linear-gradient(
      270deg,
      rgba(0,0,0,.08),
      rgba(0,0,0,.64) 76%,
      #090909 100%
    ),

    url("../img/food-right.jpg");

}


.vignette {

  position:
    fixed;

  inset: 0;

  background:

    radial-gradient(
      circle at center,
      transparent 28%,
      rgba(0,0,0,.17) 58%,
      rgba(0,0,0,.75) 100%
    );

  pointer-events:
    none;

  z-index:
    -2;

}


/* =========================================
   HEADER
   ========================================= */

.site-header {

  width:
    min(
      calc(100% - 48px),
      1500px
    );

  margin:
    0 auto;

  min-height:
    66px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    30px;

  padding:
    13px 0 0;

}


.handwritten {

  font-family:
    "Segoe Print",
    "Bradley Hand",
    "Brush Script MT",
    cursive;

  font-style:
    italic;

}


.header-claim {

  margin: 0;

  max-width:
    330px;

  font-size:
    clamp(
      .9rem,
      1.5vw,
      1.3rem
    );

  line-height:
    1.15;

  transform:
    rotate(-2deg);

  color:
    #f6f1e9;

  text-shadow:
    0 2px 12px
    rgba(0,0,0,.7);

}


.header-claim::after {

  content: "";

  display:
    block;

  width:
    125px;

  height:
    2px;

  margin:
    7px 0 0 22px;

  background:
    var(--copper-bright);

}


.header-services {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding-top:
    3px;

  color:
    #f2eee8;

  text-transform:
    uppercase;

  letter-spacing:
    .18em;

  font-weight:
    700;

  font-size:
    .78rem;

}


.header-services i {

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--copper-bright);

}


/* =========================================
   MAIN
   ========================================= */

.page-shell {

  position:
    relative;

  width:
    min(
      calc(100% - 48px),
      var(--max)
    );

  margin:
    0 auto;

}


.hero {

  width:
    min(100%, 820px);

  margin:
    0 auto;

  text-align:
    center;

}


.logo {

  display:
    block;

  width:
    clamp(
      170px,
      18vw,
      240px
    );

  aspect-ratio:
    1 / 1;

  object-fit:
    cover;

  margin:
    -20px auto -15px;

  border-radius:
    50%;

  mix-blend-mode:
    screen;

  filter:
    contrast(1.1)
    brightness(.98);

}


.eyebrow {

  margin:
    0 0 5px;

  color:
    var(--copper-bright);

  text-transform:
    uppercase;

  letter-spacing:
    .26em;

  font-size:
    .76rem;

  font-weight:
    700;

}


h1 {

  margin: 0;

  text-transform:
    uppercase;

  font-size:
    clamp(
      2rem,
      4vw,
      3.8rem
    );

  line-height:
    .9;

  letter-spacing:
    -.025em;

  text-shadow:
    0 3px 20px
    rgba(0,0,0,.9);

}


h1 span {

  display:
    inline-block;

  color:
    var(--copper-bright);

  margin-top:
    5px;

}


.intro {

  width:
    min(100%, 680px);

  margin:
    9px auto 11px;

  color:
    #e5e0d8;

  font-size:
    .88rem;

  line-height:
    1.4;

}


/* =========================================
   SERVICES
   ========================================= */

.service-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    16px;

  width:
    min(100%, 650px);

  margin:
    0 auto 11px;

}


.service-icon {

  width:
    48px;

  height:
    48px;

  margin:
    0 auto 5px;

  border:
    1px solid
    var(--copper-bright);

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  color:
    var(--copper-bright);

  font-size:
    1.15rem;

  background:
    rgba(10,10,9,.62);

}


.service-card h2 {

  margin: 0;

  text-transform:
    uppercase;

  font-size:
    .88rem;

  letter-spacing:
    .08em;

}


.service-card p {

  margin:
    2px 0 0;

  color:
    var(--muted);

  font-size:
    .67rem;

}


/* =========================================
   COUNTDOWN
   ========================================= */

.countdown-wrap {

  margin-top:
    7px;

}


.countdown {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    10px;

  width:
    min(100%, 520px);

  margin:
    0 auto;

}


.time-box {

  min-height:
    66px;

  padding:
    7px 6px;

  background:

    linear-gradient(
      180deg,
      rgba(21,21,19,.92),
      rgba(11,11,10,.92)
    );

  border:
    1px solid
    var(--panel-border);

  border-radius:
    7px;

}


.time-box strong {

  display:
    block;

  color:
    var(--copper-bright);

  font-size:
    1.85rem;

  line-height:
    1;

  font-variant-numeric:
    tabular-nums;

}


.time-box span {

  display:
    block;

  margin-top:
    5px;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;

  font-size:
    .58rem;

  color:
    #f2eee8;

}


.launch-note {

  margin:
    6px 0 0;

  color:
    #9f988f;

  font-size:
    .59rem;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


.countdown-finished {

  grid-column:
    1 / -1;

  padding:
    17px;

  color:
    var(--copper-bright);

  border:
    1px solid
    var(--panel-border);

  border-radius:
    8px;

}


/* =========================================
   INSTAGRAM NEWS
   ========================================= */

.instagram-news {

  width:
    min(100%, 760px);

  margin:
    12px auto 0;

}


.instagram-news-header {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    15px;

  margin-bottom:
    6px;

  text-align:
    left;

}


.instagram-news-header h2 {

  margin:
    1px 0 0;

  color:
    #f3eee7;

  text-transform:
    uppercase;

  letter-spacing:
    .05em;

  font-size:
    .77rem;

}


.instagram-news-header > a {

  color:
    var(--copper-bright);

  font-size:
    .61rem;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;

}


.news-label {

  color:
    var(--copper-bright);

  text-transform:
    uppercase;

  letter-spacing:
    .17em;

  font-size:
    .51rem;

}


.instagram-track {

  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    7px;

  min-height:
    86px;

}


.instagram-post {

  position:
    relative;

  display:
    block;

  aspect-ratio:
    16 / 9;

  overflow:
    hidden;

  border-radius:
    6px;

  border:
    1px solid
    rgba(217,120,45,.35);

  background:
    #111;

}


.instagram-post img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform .3s ease,
    filter .3s ease;

}


.instagram-post:hover img {

  transform:
    scale(1.05);

  filter:
    brightness(.7);

}


.instagram-post-overlay {

  position:
    absolute;

  inset:
    auto 0 0 0;

  padding:
    22px 7px 6px;

  text-align:
    left;

  background:

    linear-gradient(
      transparent,
      rgba(0,0,0,.9)
    );

}


.instagram-post-overlay span {

  display:
    block;

  color:
    var(--copper-bright);

  text-transform:
    uppercase;

  letter-spacing:
    .1em;

  font-size:
    .46rem;

}


.instagram-post-overlay strong {

  display:
    block;

  margin-top:
    2px;

  color:
    #fff;

  font-size:
    .57rem;

  line-height:
    1.15;

}


.instagram-loading {

  grid-column:
    1 / -1;

  display:
    grid;

  place-items:
    center;

  min-height:
    86px;

  border:
    1px solid
    rgba(217,120,45,.25);

  border-radius:
    7px;

  color:
    #9f988f;

  font-size:
    .68rem;

}


.instagram-fallback {

  grid-column:
    1 / -1;

  min-height:
    75px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  color:
    #aaa39a;

  border:
    1px solid
    rgba(217,120,45,.3);

  border-radius:
    7px;

  font-size:
    .68rem;

}


.instagram-fallback a {

  color:
    var(--copper-bright);

}


/* =========================================
   BRAND LINE
   ========================================= */

.brand-line {

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  gap:
    12px;

  width:
    min(100%, 680px);

  margin:
    10px auto 0;

}


.brand-line > span {

  height:
    1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--copper-bright)
    );

}


.brand-line > span:last-child {

  background:

    linear-gradient(
      90deg,
      var(--copper-bright),
      transparent
    );

}


.brand-line p {

  margin: 0;

  color:
    #dcd6cd;

  text-transform:
    uppercase;

  font-size:
    .56rem;

  letter-spacing:
    .16em;

  white-space:
    nowrap;

}


/* =========================================
   STAMP
   ========================================= */

.stamp {

  position:
    absolute;

  right:
    -4px;

  top:
    46%;

  width:
    120px;

  height:
    120px;

  border:
    2px solid
    var(--copper-bright);

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  text-align:
    center;

  color:
    var(--copper-bright);

  font-size:
    .92rem;

  line-height:
    1.15;

  transform:
    rotate(-8deg);

  background:
    rgba(9,9,9,.8);

}


/* =========================================
   FOOTER
   ========================================= */

.site-footer {

  width:
    min(
      calc(100% - 48px),
      1200px
    );

  margin:
    9px auto 0;

  padding:
    6px 0;

  border-top:
    1px solid
    rgba(217,120,45,.25);

}


.footer-grid {

  display:
    grid;

  grid-template-columns:
    1.2fr 1fr 1fr;

}


.footer-item {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-height:
    40px;

  padding:
    0 18px;

  border-right:
    1px solid
    rgba(217,120,45,.4);

}


.footer-item:first-child {

  padding-left:
    0;

}


.footer-item:last-child {

  border-right:
    0;

}


.footer-icon {

  color:
    var(--copper-bright);

  font-size:
    1.1rem;

}


.footer-item strong {

  display:
    block;

  text-transform:
    uppercase;

  letter-spacing:
    .05em;

  font-size:
    .68rem;

}


.footer-item span,
.footer-item a {

  display:
    block;

  margin-top:
    2px;

  color:
    #bfb9b0;

  font-size:
    .67rem;

}


.footer-item a:hover {

  color:
    var(--copper-bright);

}


/* =========================================
   INSTAGRAM FOOTER
   ========================================= */

.instagram-footer-link {

  display:
    flex !important;

  align-items:
    center;

  gap:
    10px;

  margin:
    0 !important;

}


.instagram-footer-icon {

  width:
    38px;

  height:
    38px;

  margin:
    0 !important;

  display:
    grid !important;

  place-items:
    center;

  border:
    1px solid
    rgba(239,139,57,.75);

  border-radius:
    50%;

  color:
    var(--copper-bright);

  transition:
    .2s ease;

}


.instagram-footer-link:hover
.instagram-footer-icon {

  background:
    rgba(217,120,45,.12);

  box-shadow:
    0 0 18px
    rgba(239,139,57,.2);

}


.instagram-footer-text {

  margin:
    0 !important;

}


.instagram-footer-text span {

  margin-top:
    2px !important;

}


/* =========================================
   FOOTER BOTTOM
   ========================================= */

.footer-bottom {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    5px;

  color:
    #8f8981;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;

  font-size:
    .54rem;

}


.footer-bottom nav {

  display:
    flex;

  gap:
    9px;

}


.footer-bottom a:hover {

  color:
    var(--copper-bright);

}


/* =========================================
   ACCESSIBILITY
   ========================================= */

.sr-only {

  position:
    absolute !important;

  width:
    1px;

  height:
    1px;

  padding:
    0;

  margin:
    -1px;

  overflow:
    hidden;

  clip:
    rect(0,0,0,0);

  white-space:
    nowrap;

  border:
    0;

}


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

@media (max-width: 1180px) {

  .stamp {

    display:
      none;

  }

}


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

@media (max-width: 820px) {


  .site-header,
  .page-shell,
  .site-footer {

    width:
      min(
        calc(100% - 28px),
        100%
      );

  }


  .header-claim {

    display:
      none;

  }


  .site-header {

    justify-content:
      center;

    min-height:
      38px;

    padding-top:
      12px;

  }


  .header-services {

    width:
      100%;

    justify-content:
      center;

    font-size:
      .68rem;

  }


  .logo {

    width:
      min(55vw, 235px);

    margin:
      -5px auto -12px;

  }


  h1 {

    font-size:
      clamp(
        2rem,
        8.5vw,
        3rem
      );

  }


  .intro {

    font-size:
      .82rem;

  }


  .instagram-track {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .instagram-post {

    aspect-ratio:
      16 / 10;

  }


  .footer-grid {

    grid-template-columns:
      1fr;

  }


  .footer-item {

    border-right:
      0;

    border-bottom:
      1px solid
      rgba(217,120,45,.2);

    padding:
      9px 0;

  }


  .footer-item:last-child {

    border-bottom:
      0;

  }


  .footer-bottom {

    flex-direction:
      column;

    align-items:
      flex-start;

  }

}


/* =========================================
   KLEINES SMARTPHONE
   ========================================= */

@media (max-width: 600px) {


  .service-grid {

    grid-template-columns:
      1fr;

    width:
      min(100%, 320px);

  }


  .service-card {

    display:
      grid;

    grid-template-columns:
      48px 1fr;

    column-gap:
      10px;

    text-align:
      left;

    align-items:
      center;

  }


  .service-icon {

    grid-row:
      1 / span 2;

    margin:
      0;

  }


  .countdown {

    grid-template-columns:
      repeat(2, 1fr);

    width:
      min(100%, 320px);

  }


  .instagram-news-header {

    align-items:
      center;

  }


  .instagram-news-header > a {

    font-size:
      .55rem;

  }


  .brand-line {

    grid-template-columns:
      35px 1fr 35px;

  }


  .brand-line p {

    white-space:
      normal;

    line-height:
      1.5;

  }

}


/* =========================================
   LEGAL PAGES
   ========================================= */

.legal-header {

  width:
    min(
      calc(100% - 48px),
      1100px
    );

  margin:
    0 auto;

  padding:
    22px 0 10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


.legal-brand img {

  width:
    100px;

  height:
    100px;

  object-fit:
    cover;

  border-radius:
    50%;

}


.back-link {

  color:
    #e3ddd4;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;

  font-size:
    .74rem;

}


.legal-shell {

  width:
    min(
      calc(100% - 48px),
      960px
    );

  margin:
    8px auto 48px;

}


.legal-card {

  padding:
    clamp(
      28px,
      5vw,
      58px
    );

  background:

    linear-gradient(
      180deg,
      rgba(18,18,16,.95),
      rgba(10,10,9,.96)
    );

  border:
    1px solid
    rgba(217,120,45,.42);

  border-radius:
    14px;

}


.legal-title {

  margin:
    0 0 34px;

  text-align:
    left;

  color:
    var(--text);

}


.legal-section {

  padding:
    24px 0;

  border-top:
    1px solid
    rgba(217,120,45,.2);

}


.legal-section h2 {

  color:
    var(--copper-bright);

}


.legal-section p {

  color:
    #ddd7cf;

  line-height:
    1.7;

}


.legal-section a {

  color:
    var(--copper-bright);

}


.legal-note {

  margin-top:
    28px;

  padding:
    18px 20px;

  border-left:
    3px solid
    var(--copper-bright);

  background:
    rgba(217,120,45,.08);

  color:
    #d8d1c7;

}