@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --rot:#C8102E;--rot-dunkel:#A00D25;--schwarz:#111111;--weiss:#FFFFFF;--flaeche:#F7F7F7;--grau:#626262;--linie:#DEDEDE;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;--text:Inter,"Helvetica Neue",Arial,sans-serif;
  --rand:clamp(16px,4vw,56px);--abschnitt:clamp(64px,9vw,120px);--nav:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 16px);-webkit-text-size-adjust:100%;scrollbar-color:var(--rot) var(--schwarz)}
body{margin:0;background:var(--weiss);color:var(--schwarz);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
::selection{background:var(--rot);color:var(--weiss)}
a{color:inherit}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--weiss);color:var(--schwarz);padding:10px 14px}
.skip:focus{top:12px}
.wrap{max-width:1328px;margin:0 auto;padding-inline:var(--rand)}

.display{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.005em;text-wrap:balance;margin:0;font-size:clamp(44px,6vw,84px)}
.display em{font-style:normal;color:var(--rot)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 24px;border-radius:8px;border:2px solid var(--rot);background:var(--rot);color:var(--weiss);font:700 16px/1.2 var(--text);text-decoration:none;text-align:center;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:var(--rot-dunkel);border-color:var(--rot-dunkel)}
.btn--sm{min-height:42px;padding:9px 16px;font-size:14px}
.btn--linie{background:transparent;border-color:var(--weiss)}
.btn--linie:hover{background:var(--weiss);border-color:var(--weiss);color:var(--schwarz)}
.btn--weiss{background:var(--weiss);border-color:var(--weiss);color:var(--schwarz)}
.btn--weiss:hover{background:var(--schwarz);border-color:var(--schwarz);color:var(--weiss)}
.btn:focus-visible{outline-color:var(--weiss);box-shadow:0 0 0 6px var(--schwarz)}

.badge{display:inline-block;align-self:flex-start;background:var(--rot);color:var(--weiss);font:800 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px 6px;border-radius:4px}

/* Navigation */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;min-height:var(--nav);padding:0 var(--rand);background:var(--schwarz);color:var(--weiss)}
.nav__logo img{width:190px}
.nav__links{display:flex;gap:28px;margin-left:auto;font-weight:600;font-size:15px}
.nav__links a{text-decoration:none;text-underline-offset:7px;text-decoration-thickness:2px;text-decoration-color:var(--rot)}
.nav__links a:hover{text-decoration-line:underline}

/* Einstieg: der Ort wechselt */
.hero{position:relative;height:calc(100svh - var(--nav) - 56px);min-height:620px;max-height:1000px;background:var(--schwarz);overflow:hidden}
.ort{position:absolute;inset:0;opacity:0;transition:opacity .55s cubic-bezier(.22,1,.36,1)}
.ort[hidden]{display:block;visibility:hidden}
.ort.is-aktiv{opacity:1;z-index:1}
.ort img{width:100%;height:100%;object-fit:cover}
.ort[data-ort="august"] img{object-position:22% 100%}
.ort[data-ort="september"] img{object-position:40% 62%}
.ort[data-ort="oktober"] img{object-position:30% 74%}
.spruch{display:inline-block;background:var(--weiss);color:var(--schwarz);font:800 clamp(26px,3vw,42px)/1.02 var(--display);padding:.28em .42em .22em}
.spruch em{font-style:normal;color:var(--rot)}
.ort .spruch{position:absolute;left:var(--rand);top:clamp(16px,4vh,40px);transition:transform .55s cubic-bezier(.22,1,.36,1);transform:translateY(-10px)}
.ort.is-aktiv .spruch{transform:none}

.hero__panel{position:absolute;z-index:2;right:0;bottom:0;width:min(540px,38%);display:flex;flex-direction:column;gap:14px;background:var(--schwarz);color:var(--weiss);padding:clamp(20px,3vh,32px) clamp(24px,2.4vw,32px) clamp(24px,3.4vh,36px)}
.hero__titel{font-size:clamp(38px,3.8vw,56px)}
.hero__text{margin:0;font-size:16px;line-height:1.5;color:#E6E6E6}
.hero__aktionen{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.monate{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.monate button{all:unset;box-sizing:border-box;cursor:pointer;display:block;background:#1C1C1C;color:#BDBDBD;font:700 11px/1 var(--text);letter-spacing:.09em;text-transform:uppercase;padding:0 0 8px;box-shadow:inset 0 -3px 0 transparent;transition:color .15s,box-shadow .15s}
.monate button img{width:100%;aspect-ratio:16/8;object-fit:cover;margin-bottom:8px;opacity:.72;transition:opacity .15s}
.monate button:hover{color:var(--weiss)}
.monate button:hover img{opacity:1}
.monate button[aria-pressed="true"]{color:var(--weiss);box-shadow:inset 0 -3px 0 var(--rot)}
.monate button[aria-pressed="true"] img{opacity:1}
.monate button:focus-visible{outline:3px solid var(--weiss);outline-offset:2px}

.band{display:flex;justify-content:space-between;gap:24px;min-height:56px;align-items:center;padding:10px var(--rand);background:var(--rot);color:var(--weiss);font:800 clamp(20px,2vw,28px)/1.1 var(--display)}

/* Die Idee */
.idee{padding-block:var(--abschnitt)}
.idee__raster{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:end}
.idee p{margin:0;font-size:clamp(18px,1.5vw,20px);line-height:1.6}

/* Motive */
.motive{background:var(--schwarz);color:var(--weiss);padding-block:var(--abschnitt)}
.motive__raster{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;margin-top:clamp(32px,4vw,56px)}
.motiv{position:relative;overflow:hidden;background:#1C1C1C}
.motiv img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.motiv:hover img{transform:scale(1.03)}
.motiv--gross{grid-row:span 2}
.motiv figcaption{position:absolute;left:12px;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.monat{background:var(--schwarz);color:var(--weiss);font:700 12px/1 var(--text);letter-spacing:.09em;text-transform:uppercase;padding:6px 8px}
.motiv .spruch{font-size:clamp(20px,2vw,30px)}
.motiv--gross .spruch{font-size:clamp(26px,3vw,42px)}
.hinweis{margin:20px 0 0;font-size:14px;line-height:1.5;color:#BDBDBD}
.hinweis--hell{color:var(--grau);margin-top:32px}

/* Kalender */
.kalender{background:var(--flaeche);padding-block:var(--abschnitt)}
.kalender__raster{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px;margin-top:clamp(32px,4vw,56px)}
.produkt{background:var(--weiss);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,2vw,28px);align-items:center;padding:clamp(20px,2.4vw,32px)}
.produkt--set{grid-row:span 2;grid-template-columns:1fr;align-content:start}
.produkt__bild img{width:100%;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.produkt__bild:hover img{transform:scale(1.02)}
.produkt--set .produkt__bild img{max-height:520px;width:auto;margin-inline:auto}
.produkt h3{margin:0 0 8px;font:800 clamp(30px,3vw,40px)/1 var(--display)}
.produkt p{margin:0 0 18px;font-size:16px;line-height:1.55;color:#3A3A3A}

/* Geschenk */
.geschenk{background:var(--rot);color:var(--weiss);padding-block:var(--abschnitt) 0}
.geschenk__raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:end}
.geschenk .display em{color:var(--schwarz)}
.geschenk__raster>div:first-child{padding-bottom:var(--abschnitt)}
.geschenk p{margin:20px 0 26px;max-width:34em;font-size:18px}
.geschenk__bild{background:var(--weiss);padding:clamp(20px,3vw,40px);margin-top:-32px;box-shadow:0 24px 48px rgba(17,17,17,.24)}

/* Seit 2019 */
.historie{background:var(--schwarz);color:var(--weiss);padding-block:var(--abschnitt)}
.historie__kopf{display:grid;grid-template-columns:6fr 6fr;gap:clamp(32px,5vw,80px);align-items:end}
.historie__kopf p{margin:0;color:#E6E6E6}
.historie .historie__sub{font:800 clamp(24px,2.2vw,30px)/1.05 var(--display);color:var(--weiss);margin-bottom:12px}
.ausgaben{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(9,1fr);gap:8px}
.ausgaben img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#1C1C1C}
.ausgaben span{display:block;margin-top:8px;font:800 20px/1 var(--display);color:#BDBDBD}
.ausgaben__pause div{aspect-ratio:4/3;display:grid;place-items:center;outline:2px dashed #8A8A8A;outline-offset:-2px;font:800 18px/1 var(--display);color:#BDBDBD}
.ausgaben__pause span{text-decoration:line-through;text-decoration-color:var(--rot);text-decoration-thickness:3px}
.ausgaben__neu img{outline:3px solid var(--rot);outline-offset:-3px}
.ausgaben__neu span{color:var(--weiss)}

/* Fragen */
.fragen{padding-block:var(--abschnitt)}
.fragen__raster{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,5vw,80px)}
.faq{border-top:3px solid var(--schwarz)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font:700 clamp(22px,2vw,26px)/1.1 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;transition:transform .2s;color:var(--rot)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq summary:hover{color:var(--rot-dunkel)}
.faq p{margin:0 0 20px;max-width:62ch}

/* Abschluss */
.abschluss{position:relative;min-height:clamp(420px,56vw,720px);display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden;background:var(--schwarz)}
.abschluss>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 74%}
.abschluss__panel{position:relative;width:min(600px,44%);background:var(--schwarz);color:var(--weiss);padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.abschluss__panel .display{font-size:clamp(40px,4.4vw,64px)}

/* Fußzeile */
.fuss{background:var(--schwarz);color:var(--weiss);padding-block:48px;border-top:1px solid #2A2A2A}
.fuss__raster{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end}
.fuss img{width:190px}
.fuss p{margin:12px 0 0;font-size:14px;color:#BDBDBD}
.fuss nav{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:15px;font-weight:600}
.fuss nav a{text-underline-offset:5px;text-decoration-color:var(--rot);text-decoration-thickness:2px;padding-block:4px}

/* Rechtstexte */
.recht{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,80px) var(--rand) var(--abschnitt)}
.recht h1{font:800 clamp(44px,6vw,72px)/.94 var(--display);margin:0 0 32px}
.recht h2{font:800 28px/1.05 var(--display);margin:40px 0 8px}
.recht p,.recht ul{margin:0 0 14px}
.recht a{text-underline-offset:4px;text-decoration-color:var(--rot)}
.nav__zurueck{margin-left:auto;font-weight:600;font-size:15px}

@media (max-width:1040px){
  .nav__links{display:none}
  .nav .btn{margin-left:auto}
  .hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column}
  .ort{inset:0 0 auto 0;height:44svh;min-height:280px}
  .hero::before{content:"";display:block;height:44svh;min-height:280px;flex:none}
  .hero__panel{position:relative;width:100%;gap:12px;padding:12px var(--rand) 24px}
  .hero__titel{font-size:clamp(36px,10.6vw,60px)}
  .monate button img{display:none}
  .monate button{padding:11px 4px 10px;text-align:center;min-height:44px}
  .ausgaben{grid-template-columns:repeat(5,1fr)}
}
@media (max-height:760px) and (min-width:761px){
  .hero__text{display:none}
  .monate button img{aspect-ratio:16/6}
}
@media (max-height:820px) and (min-width:761px) and (max-width:1040px){
  .ort,.hero::before{height:36svh;min-height:250px}
  .hero__titel{font-size:44px}
}
@media (max-width:760px){
  :root{--nav:60px}
  body{font-size:16px}
  .nav{gap:12px}
  .nav__logo img{width:150px}
  .btn--sm{min-height:40px;padding:8px 12px;font-size:13px}
  .ort,.hero::before{height:37svh;min-height:250px}
  .ort .spruch{left:12px;top:12px}
  .ort[data-ort="august"] .spruch{left:auto;right:12px}
  .hero__text{font-size:15px}
  .hero__aktionen .btn{flex:1 1 auto}
  .band{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px}
  .idee__raster,.geschenk__raster,.historie__kopf,.fragen__raster{grid-template-columns:1fr}
  .motive__raster{grid-template-columns:1fr;grid-template-rows:none}
  .motiv--gross{grid-row:auto}
  .motiv{aspect-ratio:16/10}
  .kalender__raster{grid-template-columns:1fr;grid-template-rows:none}
  .produkt{grid-template-columns:1fr}
  .produkt--set{grid-row:auto}
  .produkt .btn{width:100%}
  .geschenk__raster>div:first-child{padding-bottom:0}
  .geschenk__bild{margin-top:0;margin-bottom:-32px}
  .historie{padding-top:calc(var(--abschnitt) + 32px)}
  .ausgaben{grid-template-columns:repeat(3,1fr)}
  .abschluss{min-height:0;display:block}
  .abschluss>picture img{position:static;height:auto;aspect-ratio:16/10}
  .abschluss__panel{width:100%}
  .fuss__raster{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}