/* =====================================================================
   WANDKALENDER
   ===================================================================== */


/* =====================================================================
   FONTS
   ===================================================================== */

   @font-face {

    font-family:
      "GT-Standard-L-Standard-Heavy";
  
    src:
      url("../fonts/GT-Standard-L-Standard-Heavy.woff2")
      format("woff2");
  
    font-weight:
      700;
  
    font-style:
      normal;
  
    font-display:
      swap;
  
  }
  
  
  @font-face {
  
    font-family:
      "JaliLatin-Regular";
  
    src:
      url("../fonts/JaliLatin-Regular.woff2")
      format("woff2");
  
    font-weight:
      400;
  
    font-style:
      normal;
  
    font-display:
      swap;
  
  }
  
  
  /* =====================================================================
     VARIABLES
     ===================================================================== */
  
  :root {
  
    --ink:
      #3689d5;
  
    --accent:
      #3689d5;
  
    --ink-line:
      #000000;
  
    --paper:
      #ffffff;
  
  
    /* Hauptschrift */
  
    --font:
      "GT-Standard-L-Standard-Heavy",
      sans-serif;
  
    --font-size:
      36px;
  
  
    /* Schrift für Info / Impressum */
  
    --info-font:
      "JaliLatin-Regular",
      sans-serif;
  
    --info-font-size:
      36px;
  
  
    /* Zeichenabstand */
  
    --letter-spacing:
      /* -0.025em; */
          -0.01em;
  
  
    /* Abstand zum Fensterrand */
  
    --hud-pad:
      clamp(20px, 3.2vw, 40px);
  
  
    /* Abstand des Posters */
  
    --stage-pad-top:
      clamp(90px, 12svh, 140px);
  
    --stage-pad-bottom:
      clamp(90px, 12svh, 140px);
  
    --stage-pad-x:
      clamp(40px, 9vw, 280px);
  
  
    /* Poster */
  
    --poster-gap:
      40px;
  
  
    color-scheme:
      light;
  
  }
  
  
  /* =====================================================================
     RESET
     ===================================================================== */
  
  *,
  *::before,
  *::after {
  
    box-sizing:
      border-box;
  
  }
  
  
  html {
  
    -webkit-text-size-adjust:
      100%;
  
  }
  
  
  body {
  
    margin:
      0;
  
    font-family:
      var(--font);
  
    font-size:
      var(--font-size);
  
    font-weight:
      400;
  
    color:
      var(--ink);
  
    background:
      #ffffff;
  
    overflow-x:
      hidden;
  
    -webkit-font-smoothing:
      antialiased;
  
  }
  
  
  /* =====================================================================
     SCREENREADER
     ===================================================================== */
  
  .sr-only {
  
    position:
      absolute;
  
    width:
      1px;
  
    height:
      1px;
  
    margin:
      -1px;
  
    padding:
      0;
  
    overflow:
      hidden;
  
    clip-path:
      inset(50%);
  
    white-space:
      nowrap;
  
  }
  
  
  /* =====================================================================
     BACKGROUND
     ===================================================================== */
  
  .backdrop {
  
    position:
      fixed;
  
    inset:
      0;
  
    z-index:
      0;
  
    background:
      #ffffff;
  
  }
  
  
  .backdrop::after {
  
    content:
      "";
  
    position:
      absolute;
  
    inset:
      0;
  
    pointer-events:
      none;
  
  }
  
  
  /* =====================================================================
     MAIN / SCROLL
     ===================================================================== */
  
  main {
  
    position:
      relative;
  
    z-index:
      1;
  
  }
  
  
  .scroll-track {
  
    height:
      480svh;
  
  }
  
  
  /* =====================================================================
     STAGE
     ===================================================================== */
  
  .stage {
  
    position:
      sticky;
  
    top:
      0;
  
    height:
      100svh;
  
    padding:
      var(--stage-pad-top)
      var(--stage-pad-x)
      var(--stage-pad-bottom);
  
    container-type:
      size;
  
    display:
      flex;
  
    align-items:
      center;
  
    justify-content:
      center;
  
  }
  
  
  /* =====================================================================
     POSTER
     ===================================================================== */
  
  .poster {
  
    position:
      relative;
  
    margin:
      0;
  
    flex:
      none;
  
    height:
      min(
        calc(100cqh - 20px),
        calc(100cqw * 841 / 594)
      );
  
    width:
      auto;
  
    aspect-ratio:
      594 / 841;
  
    transform:
      translateZ(0);
  
  }
  
  
  .layer {
  
    position:
      absolute;
  
    inset:
      0;
  
    display:
      block;
  
  }
  
  
  /* =====================================================================
     POSTER — PAPIER
     ===================================================================== */
  
  .layer--paper {
  
    background:
      var(--paper);
  
    border-radius:
      2px;
  
    box-shadow:
      0 1px 2px rgba(20, 22, 26, 0.07),
      0 10px 24px -8px rgba(20, 22, 26, 0.14),
      0 46px 80px -34px rgba(20, 22, 26, 0.42);
  
  }
  
  
  /* =====================================================================
     POSTER — LAYOUT
     ===================================================================== */
  
  .layer--layout {
  
    width:
      100%;
  
    height:
      100%;
  
    object-fit:
      contain;
  
  }
  
  
  /* =====================================================================
     POSTER — PFAD
     ===================================================================== */
  
  .layer--path svg {
  
    width:
      100%;
  
    height:
      100%;
  
    display:
      block;
  
    overflow:
      visible;
  
  }
  
  
  .layer--path path,
  .layer--path polyline,
  .layer--path polygon {
  
    fill:
      none;
  
    stroke:
      var(--ink-line);
  
    stroke-width:
      5;
  
    stroke-linecap:
      round;
  
    stroke-linejoin:
      round;
  
  }
  
  
  /* =====================================================================
     STIFT / HALO
     ===================================================================== */
  
  .pen-halo {
  
    fill:
      var(--ink-line);
  
    opacity:
      0.18;
  
    transform-box:
      fill-box;
  
    transform-origin:
      center;
  
    animation:
      pen-breathe
      2.6s
      ease-in-out
      infinite;
  
  }
  
  
  @keyframes pen-breathe {
  
    0%,
    100% {
  
      transform:
        scale(1);
  
      opacity:
        0.18;
  
    }
  
    50% {
  
      transform:
        scale(1.35);
  
      opacity:
        0.10;
  
    }
  
  }
  
  
  /* =====================================================================
     HUD — FIXE ECKEN
     ===================================================================== */
  
  .hud {
  
    position:
      fixed;
  
    z-index:
      20;
  
    margin:
      0;
  
    font-family:
      var(--font);
  
    font-size:
      var(--font-size);
  
    font-weight:
      400;
  
    color:
      var(--ink);
  
  }
  
  
  .hud p {
  
    margin:
      0;
  
  }
  
  
/* =====================================================================
   POSITIONEN — UNTEN LINKS / UNTEN RECHTS
   ===================================================================== */

   .hud--tl {

    position: fixed;
  
    top:
      var(--hud-pad);
  
    left:
      var(--hud-pad);
  
  }
  
  
  .hud--tr {
  
    position: fixed;
  
    top:
      var(--hud-pad);
  
    right:
      var(--hud-pad);
  
  }
  
  
  /* ---------------------------------------------------------------------
     IMPRESSUM — IMMER UNTEN LINKS
     --------------------------------------------------------------------- */
  
  .hud--bl {
  
    position: fixed;
  
    bottom:
      var(--hud-pad);
  
    left:
      var(--hud-pad);
  
    right:
      auto;
  
    top:
      auto;
  
  }
  
  
  /* ---------------------------------------------------------------------
     KAUFEN — IMMER UNTEN RECHTS
     --------------------------------------------------------------------- */
  
  .hud--br {
  
    position: fixed;
  
    bottom:
      var(--hud-pad);
  
    right:
      var(--hud-pad);
  
    left:
      auto;
  
    top:
      auto;
  
  }
  
  
  
  /* =====================================================================
     TITEL / DATUM
     ===================================================================== */
  
  .site-title {
  
    margin:
      0;
  
    font-family:
      var(--font);
  
    font-size:
      var(--font-size);
  
    font-weight:
      400;
  
    line-height:
      1;
  
    letter-spacing:
      var(--letter-spacing);
  
    color:
      var(--ink);
  
    white-space:
      nowrap;
  
  }
  
  
  /* =====================================================================
     INFO / IMPRESSUM / KAUFEN BEREICH
     ===================================================================== */
  
  .info-area {
  
    position:
      fixed;
  
    display:
      flex;
  
    flex-direction:
      column;
  
    align-items:
      flex-start;
  
  }
  
  
  /* =====================================================================
     BUTTONS
     ===================================================================== */
  
  .info-button {
  
    appearance:
      none;
  
    display:
      inline-flex;
  
    align-items:
      center;
  
    justify-content:
      center;
  
    padding:
      11px 18px;
  
    border:
      1.5px solid var(--ink);
  
    border-radius:
      999px;
  
    background:
      transparent;
  
    color:
      var(--ink);
  
    font-family:
      var(--info-font);
  
    font-size:
      var(--info-font-size);
  
    font-weight:
      400;
  
    line-height:
      1;
  
    letter-spacing:
      var(--letter-spacing);
  
    cursor:
      pointer;
  
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  
  }
  
  
  /* =====================================================================
     HOVER — INVERTIERT
     ===================================================================== */
  
  .info-button:hover {
  
    background:
      var(--ink);
  
    color:
      #ffffff;
  
  }
  
  
  /* =====================================================================
     GEÖFFNET — INVERTIERT
     ===================================================================== */
  
  .info-button[aria-expanded="true"] {
  
    background:
      var(--ink);
  
    color:
      #ffffff;
  
  }
  
  
  /* =====================================================================
     FOKUS
     ===================================================================== */
  
  .info-button:focus-visible {
  
    outline:
      2px solid var(--ink);
  
    outline-offset:
      4px;
  
  }
  
  
  /* =====================================================================
     AUFKLAPPENDE BOX
     ===================================================================== */
  
  .info-box {
  
    position:
      absolute;
  
    bottom:
      calc(
        100% +
        var(--poster-gap)
      );
  
    left:
      0;
  
    width:
      min(
        420px,
        calc(100vw - 40px)
      );
  
    max-height:
      min(
        55svh,
        520px
      );
  
    overflow-y:
      auto;
  
    padding:
      20px;
  
    border:
      1.5px solid var(--ink);
  
    border-radius:
      12px;
  
    background:
      #ffffff;
  
    color:
      var(--ink);
  
    font-family:
      var(--info-font);
  
    font-size:
      var(--info-font-size);
  
    font-weight:
      400;
  
    line-height:
      1.15;
  
    letter-spacing:
      var(--letter-spacing);
  
    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.08);
  
  }
  
  
  /* =====================================================================
     RECHTE BOX
     ===================================================================== */
  
  .info-box--right {
  
    left:
      auto;
  
    right:
      0;
  
  }
  
  
  /* =====================================================================
     TEXT INNERHALB DER BOX
     ===================================================================== */
  
  .info-box p {
  
    margin:
      0 0 16px;
  
  }
  
  
  .info-box p:last-child {
  
    margin-bottom:
      0;
  
  }
  
  
  /* =====================================================================
     HIDDEN
     ===================================================================== */
  
  .info-box[hidden] {
  
    display:
      none;
  
  }
  
  
  /* =====================================================================
     ABOUT — BILDER + TEXT
     ===================================================================== */
  
  .gallery-box {
  
    width:
      min(
        420px,
        calc(100vw - 40px)
      );
  
  }
  
  
  .gallery-heading {
  
    font-family:
      var(--info-font);
  
    font-size:
      var(--info-font-size);
  
    font-weight:
      400;
  
    letter-spacing:
      var(--letter-spacing);
  
    margin:
      0 0 16px;
  
  }
  
  
  .gallery-item {
  
    margin:
      0 0 12px;
  
    aspect-ratio:
      3 / 2;
  
    overflow:
      hidden;
  
    border-radius:
      6px;
  
    border:
      1px solid var(--ink);
  
  }
  
  
  .gallery-item img {
  
    display:
      block;
  
    width:
      100%;
  
    height:
      100%;
  
    object-fit:
      cover;
  
  }
  
  
  .gallery-contact {
  
    color:
      inherit;
  
    text-decoration:
      underline;
  
    text-underline-offset:
      2px;
  
  }
  
  
  /* =====================================================================
     IMPRESSUM — BLAU
     ===================================================================== */
  
  .info-area--imprint {
  
    --area-color:
      #3689d5;
  
  }
  
  
  .info-area--imprint .info-button {
  
    border-color:
      var(--area-color);
  
    color:
      var(--area-color);
  
  }
  
  
  .info-area--imprint .info-button:hover {
  
    background:
      var(--area-color);
  
    color:
      #ffffff;
  
  }
  
  
  .info-area--imprint .info-button[aria-expanded="true"] {
  
    background:
      var(--area-color);
  
    color:
      #ffffff;
  
  }
  
  
  .info-area--imprint .info-box {
  
    border-color:
      var(--area-color);
  
    color:
      var(--area-color);
  
  }
  
  
  /* =====================================================================
     MEHR ERFAHREN — EINHEITLICHES BLAU
     ===================================================================== */

.info-area--buy {

  --area-color:
    #3689d5;

}


.info-area--buy .info-button {

  border-color:
    #3689d5;

  color:
    #3689d5;

}


.info-area--buy .info-button:hover {

  background:
    #3689d5;

  border-color:
    #3689d5;

  color:
    #ffffff;

}


.info-area--buy .info-button[aria-expanded="true"] {

  background:
    #3689d5;

  border-color:
    #3689d5;

  color:
    #ffffff;

}


.info-area--buy .info-box {

  border-color:
    #3689d5;

  color:
    #3689d5;

}
  
  /* =====================================================================
     MOBILE
     ===================================================================== */
  
  @media (max-width: 860px) {
  
    :root {
  
      --hud-pad:
        18px;
  
      --stage-pad-top:
        70px;
  
      --stage-pad-bottom:
        80px;
  
      --stage-pad-x:
        30px;
  
      --poster-gap:
        30px;
  
    }
  
  
    .info-button {
  
      padding:
        10px 16px;
  
    }
  
  
    .info-box {
  
      width:
        min(
          340px,
          calc(100vw - 30px)
        );
  
      max-height:
        55svh;
  
      padding:
        16px;
  
    }
  
  
    .gallery-box {
  
      width:
        min(
          340px,
          calc(100vw - 30px)
        );
  
    }
  
  }
  
  
  /* =====================================================================
     SEHR KLEINE DISPLAYS
     ===================================================================== */
  
  @media (max-width: 500px) {
  
    :root {
  
      --hud-pad:
        15px;
  
      --font-size:
        24px;
  
      --info-font-size:
        24px;
  
      --stage-pad-top:
        60px;
  
      --stage-pad-bottom:
        70px;
  
      --stage-pad-x:
        20px;
  
      --poster-gap:
        24px;
  
    }
  
  
    .info-button {
  
      padding:
        9px 14px;
  
    }
  
  
    .info-box {
  
      width:
        min(
          300px,
          calc(100vw - 30px)
        );
  
      padding:
        14px;
  
    }
  
  
    .gallery-box {
  
      width:
        min(
          300px,
          calc(100vw - 30px)
        );
  
    }
  
  }
  
  
  /* =====================================================================
     REDUZIERTE BEWEGUNG
     ===================================================================== */
  
  @media (prefers-reduced-motion: reduce) {
  
    .pen-halo {
  
      animation:
        none;
  
    }
  
  
    .info-button {
  
      transition:
        none;
  
    }
  
  }
  
  
  /* =====================================================================
     LOGO — UNTEN MITTIG
     ===================================================================== */
  
  .site-logo {
  
    position:
      fixed;
  
    left:
      50%;
  
    bottom:
      calc(
        var(--hud-pad) +
        (var(--font-size) + 14px) / 2
      );
  
    z-index:
      20;
  
    transform:
      translateX(-50%);
  
    display:
      flex;
  
    align-items:
      center;
  
    justify-content:
      center;
  
    pointer-events:
      none;
  
  }
  
  
  .site-logo img {
  
    display:
      block;
  
    width:
      60px;
  
    height:
      auto;
  
    max-width:
      20vw;
  
    filter:
      grayscale(100%);
  
    opacity:
      0;
  
  }
  
  
  /* =====================================================================
     LOGO — MOBILE
     ===================================================================== */
  
  @media (max-width: 860px) {
  
    .site-logo {
  
      bottom:
        calc(
          var(--hud-pad) +
          (var(--font-size) + 12px) / 2
        );
  
    }
  
  }
  
  
  @media (max-width: 500px) {
  
    .site-logo {
  
      bottom:
        calc(
          var(--hud-pad) +
          (var(--font-size) + 12px) / 2
        );
  
    }
  
  }