@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin-ext-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-latin-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --lachs: #F5B1B2;
  --rot: #C11A22;
  --rot-tief: #8A0F15;
  --rosa-hell: #FFE8E8;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-text: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --t-corner: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
  --t-h2: clamp(3.25rem, 0.5rem + 13.5vw, 13rem);
  --t-name: clamp(2.75rem, 1rem + 8vw, 8.5rem);

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6.5rem;
  --s7: 10rem;

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --wm: min(25.5vw, 34svh);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.4, 0, 1, 1);
  --dur-state: 180ms;
  --dur-move: 300ms;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--lachs);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--rot) var(--lachs);
}
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--lachs);
  color: var(--rot-tief);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.5;
  font-kerning: normal;
}

main, .schluss { overflow-x: clip; }

::selection { background: var(--rot); color: var(--rosa-hell); }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 3px solid var(--rot-tief);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon { flex: none; }
.defs { position: absolute; }

.skip {
  position: fixed;
  left: var(--gutter);
  top: var(--s1);
  z-index: 120;
  padding: 0.75rem 1rem;
  background: var(--rot-tief);
  color: var(--rosa-hell);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--dur-state) var(--ease);
}
.skip:focus-visible { transform: none; outline-color: var(--rot); }

/* Intro */

.intro { display: none; }
.has-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: var(--rot);
  animation: intro-failsafe 0s 5s forwards;
}
.intro.is-drawn { background: transparent; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-sheet { transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.intro.is-done .intro-sheet { opacity: 0; transform: translateY(3%); }
@keyframes intro-failsafe { to { visibility: hidden; } }

/* Kopfzeile */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(var(--s2), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  pointer-events: none;
}
.bar > * { pointer-events: auto; }

.mark {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--lachs);
  color: var(--rot);
  text-decoration: none;
  transform: rotate(2deg);
  transition: transform var(--dur-state) var(--ease);
}
.mark { align-items: center; }
.mark-svg { width: 1.85rem; height: 2.55rem; fill: currentColor; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mark:hover { transform: rotate(-3deg) scale(1.04); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0 1.15rem 0 1rem;
  background: var(--rot);
  color: var(--rosa-hell);
  border: 2px solid var(--lachs);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transform: rotate(-1.5deg);
  transition: transform var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
.cta:hover { background: var(--rot-tief); transform: rotate(0deg) translateY(-2px); }
.cta:active { transform: rotate(0deg) scale(0.97); transition-duration: 90ms; }
.cta:focus-visible { outline-color: var(--rot-tief); }

/* Plakat */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--s6) var(--gutter) var(--s6);
  color: var(--rot);
}

.hero-center { text-align: center; }

/* Original-Logo von Cora, nachgezeichnet. Die Buchstaben hüpfen schon im Logo, Breite über --wm-w */
.hero-center { --wm-w: min(92vw, calc(var(--wm) * 3.6)); }
.wordmark { line-height: 0; }
.wm { display: block; width: var(--wm-w); height: auto; margin-inline: auto; fill: currentColor; overflow: visible; }
.wm-l { transform-box: fill-box; transform-origin: 50% 100%; transition: translate 220ms var(--ease), rotate 220ms var(--ease); }
.wm-l:hover { translate: 0 -14px; rotate: -2deg; }

.lockup { margin-top: calc(var(--wm-w) * 0.035); line-height: 0; }
.wm, .lockup-svg, .mark-svg { fill-rule: evenodd; }
.lockup-svg { display: block; width: calc(var(--wm-w) * 0.698); height: auto; margin-inline: auto; }

.corner {
  position: absolute;
  bottom: max(var(--s3), env(safe-area-inset-bottom));
  font-size: var(--t-corner);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rot-tief);
}
.corner--bl { left: var(--gutter); }
.corner--br { right: var(--gutter); text-align: right; }

/* Versetzte Typo */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: var(--rot);
}
.bx-word { display: inline-block; white-space: nowrap; }
.bx {
  display: inline-block;
  transform: translateY(calc(var(--y) * 1em)) rotate(calc(var(--r) * 1deg));
}

/* Claim */

.claim {
  padding: var(--s6) var(--gutter) var(--s5);
  display: grid;
  gap: var(--s4);
}
.claim-title {
  display: grid;
  font-size: var(--t-h2);
}
.claim-line { justify-self: start; }
.claim-line--shift { justify-self: end; }
.claim-text {
  max-width: 34ch;
  justify-self: end;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--rot-tief);
}

/* Großes Foto */

.feature {
  height: 92vh;
  height: 92svh;
  overflow: hidden;
  background: var(--rot);
}
.feature img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* Sorten */

.sorten { padding-top: var(--s6); }
.sorten-title {
  padding: 0 var(--gutter) var(--s5);
  font-size: var(--t-h2);
  text-align: center;
}

.panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--rot);
}
.panel + .panel,
.schluss {
  -webkit-mask: url("../img/bite.svg") right top / var(--bite) var(--bite) no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url("../img/bite.svg") right top / var(--bite) var(--bite) no-repeat exclude, linear-gradient(#000 0 0);
  --bite: clamp(7rem, 24vw, 19rem);
}
.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

.sticker {
  position: absolute;
  top: calc(max(var(--s2), env(safe-area-inset-top)) + 4.5rem);
  max-width: calc(100% - 2 * var(--gutter));
  padding: 0.12em 0.22em 0.06em;
  background: var(--lachs);
  color: var(--rot);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-name);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.sticker--l { left: var(--gutter); transform: rotate(-2.5deg); transform-origin: left top; }
.sticker--r { right: max(var(--gutter), calc(clamp(7rem, 24vw, 19rem) * 0.6)); transform: rotate(2deg); transform-origin: right top; text-align: right; }

/* Cora */

.cora {
  padding: var(--s6) var(--gutter) 0;
  display: grid;
  gap: var(--s4);
}
.cora-title { display: grid; font-size: var(--t-h2); }
.cora-line { justify-self: start; }
.cora-line--shift { justify-self: end; }
.cora-photo {
  width: min(72%, 20rem);
  aspect-ratio: 4 / 5;
  transform: rotate(-1.5deg);
  overflow: hidden;
  background: var(--rot);
}
.cora-photo img { width: 100%; height: 100%; object-fit: cover; }
.cora-text {
  max-width: 30ch;
  font-size: var(--t-lead);
  line-height: 1.4;
}

/* Ort */

.ort { padding-top: var(--s6); }
.ort-head {
  display: grid;
  gap: var(--s4);
  padding: 0 var(--gutter) var(--s5);
}
.ort-title { font-size: clamp(3.25rem, 1rem + 10vw, 11rem); hyphens: manual; }
.ort-info {
  display: grid;
  gap: var(--s3);
  justify-self: end;
  max-width: 30ch;
  font-size: var(--t-lead);
  line-height: 1.4;
}

.route {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  transition: color var(--dur-state) var(--ease);
}
.route .icon { transition: transform var(--dur-state) var(--ease); }
.route:hover { text-decoration-thickness: 3px; }
.route:hover .icon { transform: translate(2px, -2px); }

.map {
  height: clamp(26rem, 72svh, 48rem);
  background: var(--lachs);
}
.map .leaflet-tile { filter: url(#duotone); }
.map.leaflet-container { font-family: var(--font-text); background: var(--lachs); }

.pin {
  background: none;
  border: 0;
}
.pin-box {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  background: var(--rot);
  color: var(--lachs);
  border: 3px solid var(--lachs);
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
  transform: rotate(-3deg);
  box-shadow: 0 8px 18px rgb(138 15 21 / 0.4);
}
.pin-box span { transform: translate(-0.15rem, 0.12rem); }
.pin-box::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  width: 0.6rem;
  height: 0.72rem;
  background: currentColor;
  transform: rotate(16deg);
}

.leaflet-bar { border: 2px solid var(--rot) !important; border-radius: 0 !important; box-shadow: none !important; }
.leaflet-bar a,
.leaflet-bar a:hover {
  width: 2.75rem !important;
  height: 2.75rem !important;
  line-height: 2.6rem !important;
  border-radius: 0 !important;
  background: var(--lachs);
  color: var(--rot);
  font: 400 1.5rem/2.6rem var(--font-text) !important;
  border-bottom-color: var(--rot) !important;
}
.leaflet-bar a:hover { background: var(--rosa-hell); }
.leaflet-container .leaflet-control-attribution {
  background: rgb(245 177 178 / 0.92);
  color: var(--rot-tief);
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
}
.leaflet-container .leaflet-control-attribution a { color: var(--rot-tief); }

/* Schluss */

.schluss {
  margin-top: var(--s6);
  padding: var(--s7) var(--gutter) max(var(--s3), env(safe-area-inset-bottom));
  background: var(--rot);
  color: var(--rosa-hell);
  display: grid;
  gap: var(--s6);
}
.schluss :focus-visible { outline-color: var(--rosa-hell); }

.handle {
  justify-self: center;
  color: var(--lachs);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(2rem, 11.5vw, 13rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.handle-text { display: inline-block; text-transform: none; transition: transform var(--dur-state) var(--ease); }
.handle:hover .handle-text { transform: rotate(-1.5deg) scale(1.02); }
.handle .bx { transition: transform 220ms var(--ease); }
.handle:hover .bx { transform: translateY(calc(var(--y) * -1.4em)) rotate(calc(var(--r) * -1.4deg)); }

.schluss-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.legal { display: flex; gap: var(--s2); }
.legal-btn {
  min-height: 2.75rem;
  padding: 0 0.25rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: text-decoration-thickness var(--dur-state) var(--ease);
}
.legal-btn:hover { text-decoration-thickness: 2px; }

/* Rechtstexte */

.sheet {
  width: min(44rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(86svh, 56rem);
  padding: 0;
  border: 0;
  background: var(--lachs);
  color: var(--rot-tief);
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(1rem) rotate(-0.6deg);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease), overlay 240ms allow-discrete, display 240ms allow-discrete;
}
.sheet[open] { opacity: 1; transform: none; }
@starting-style { .sheet[open] { opacity: 0; transform: translateY(1rem) rotate(-0.6deg); } }
.sheet:not([open]) { transition-duration: 160ms; transition-timing-function: var(--ease-out); }
.sheet::backdrop { background: rgb(138 15 21 / 0.6); }

.sheet-body {
  position: relative;
  padding: var(--s4) clamp(1.25rem, 4vw, 2.75rem) var(--s5);
}
.sheet-close {
  position: sticky;
  top: 0;
  float: right;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: calc(var(--s2) * -1) calc(var(--s1) * -1) 0 var(--s2);
  background: var(--rot);
  color: var(--rosa-hell);
  border: 0;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.sheet-close:hover { background: var(--rot-tief); transform: rotate(90deg); }
.sheet-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 2rem + 4vw, 4.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: var(--s4);
}
.sheet h3 {
  margin: var(--s4) 0 var(--s1);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sheet p { max-width: 65ch; line-height: 1.6; }
.sheet-meta { margin-top: var(--s4); font-size: var(--t-small); }

/* Bewegung */

.intro-done .wm > * {
  animation: hop 460ms var(--ease) both;
  animation-delay: calc(var(--d) * 45ms);
}
@keyframes hop {
  40% { translate: 0 -26px; rotate: -3deg; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @supports (animation-timeline: view()) {
    .claim-line {
      animation: slide-l linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    .claim-line--shift { animation-name: slide-r; }

    .feature img {
      animation: open-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    .panel img {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    .sticker {
      animation: stick linear both;
      animation-timeline: view();
      animation-range: entry 40% entry 100%;
    }
    .sticker--r { animation-name: stick-r; }

    .cora-line {
      animation: slide-l linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    .cora-line--shift { animation-name: slide-r; }

    .cora-photo img {
      animation: open-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .ort-line {
      display: inline-block;
      animation: slide-l linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}

@keyframes slide-l { from { translate: -14vw 0; } }
@keyframes slide-r { from { translate: 14vw 0; } }
@keyframes open-up { from { clip-path: inset(9% 7%); scale: 1.1; } to { clip-path: inset(0); scale: 1; } }
@keyframes settle { from { scale: 1.14; } to { scale: 1; } }
@keyframes stick { from { translate: -20% -40%; rotate: -9deg; } }
@keyframes stick-r { from { translate: 20% -40%; rotate: 9deg; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
  .has-intro .intro { animation: intro-failsafe 0s 5s forwards !important; }
}

/* Breiten */

@media (max-width: 40rem) {
  :root { --wm: min(24vw, 30svh); }
  .cta span { font-size: 0.9375rem; }
  .claim-text { justify-self: start; }
  .ort-info { justify-self: start; }
  .corner { bottom: max(var(--s4), env(safe-area-inset-bottom)); }
}

@media (min-width: 64rem) {
  .cora {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto;
    column-gap: var(--s5);
    row-gap: var(--s4);
  }
  .cora-photo { grid-column: 1; grid-row: 1 / span 2; width: min(100%, 26rem); justify-self: end; align-self: center; }
  .cora-title { grid-column: 2; grid-row: 1; align-self: end; font-size: clamp(4rem, 1rem + 7vw, 9rem); }
  .cora-text { grid-column: 2; grid-row: 2; padding-bottom: var(--s2); }
  .ort-head { grid-template-columns: 1fr auto; align-items: end; }
  .claim { padding-top: var(--s7); }
}