/* Art Cake Tortenreise – Stile. Alles hängt an .tortenreise, .tortenreise-mehr und .ac-start, damit das Theme nichts abbekommt. */
@font-face {
  font-family: "AC Playfair Display SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-sc-latin-400.woff2") format("woff2");
}
@property --tr-buehne { syntax: "<color>"; inherits: true; initial-value: #FFFFFF; }
@property --tr-tinte  { syntax: "<color>"; inherits: true; initial-value: #1A1A1A; }

.tortenreise {
  --tr-pink: #CC2780;
  --tr-schwarz: #1A1A1A;
  --tr-weiss: #FFFFFF;
  --tr-buehne: #FFFFFF;
  --tr-tinte: #1A1A1A;
  --tr-display: "AC Playfair Display SC", "Playfair Display SC", "Times New Roman", Georgia, serif;   /* Überschriften wie auf der übrigen Website: Kapitälchen */
  --tr-text: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --tr-rand: clamp(20px, 6vw, 96px);
  --tr-kopf: 0px;   /* Höhe eines festen Seitenkopfs, setzt das Skript */
  --tr-frei: 0px;   /* Teil der Bühne, der beim Laden noch unter dem Bildschirmrand liegt */
  position: relative;
  box-sizing: border-box;
  max-width: none !important;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  background: var(--tr-buehne);
  color: var(--tr-tinte);
  font-family: var(--tr-text);
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  transition: --tr-buehne 0.7s ease, --tr-tinte 0.7s ease;
}
.tortenreise.tr-dunkel { --tr-buehne: #1A1A1A; --tr-tinte: #FFFFFF; }
.tortenreise *, .tortenreise *::before, .tortenreise *::after { box-sizing: border-box; }
.tortenreise :focus-visible { outline: 2px solid var(--tr-pink); outline-offset: 3px; }

.tortenreise .tr-buehne { position: relative; background: var(--tr-buehne); color: var(--tr-tinte); }
.tortenreise .tr-leinwand,
.tortenreise .tr-fortschritt,
.tortenreise .tr-weiter,
.tortenreise .tr-finger { display: none; }
.tortenreise .tr-rast { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---------- Texte ---------- */
.tortenreise .tr-texte { display: grid; gap: 64px; margin: 0; padding: 48px var(--tr-rand) 64px; }
.tortenreise .tr-szene {
  display: grid;
  gap: 18px;
  justify-items: start;
  align-content: center;
  min-width: 0;
  max-width: 560px;
  margin: 0;
  padding: 0;
}
.tortenreise .tr-szene h1,
.tortenreise .tr-szene h2 {
  margin: 0;
  padding: 0;
  color: var(--tr-tinte);
  font-family: var(--tr-display);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  line-height: 1.1;
  letter-spacing: 1px;
  text-align: left;
  text-wrap: balance;
}
.tortenreise .tr-szene h1,
.tortenreise .tr-szene .tr-gross { font-size: clamp(37px, 5.6vw, 74px); }
.tortenreise .tr-szene h2 { font-size: clamp(32px, 4.2vw, 53px); }
.tortenreise .tr-szene p {
  margin: 0;
  padding: 0;
  color: var(--tr-tinte);
  font-family: var(--tr-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}
.tortenreise .tr-szene p.tr-marke {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tortenreise .tr-marke::before { content: ""; flex: none; width: 28px; height: 7px; background: var(--tr-pink); }
.tortenreise .tr-marke span { font-variant-numeric: tabular-nums; }
.tortenreise .tr-szene p.tr-imbild { font-size: 13px; font-weight: 600; }
.tortenreise .tr-szene p.tr-kontakt { font-size: 13px; font-weight: 600; user-select: all; }
.tortenreise .tr-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 0; padding: 4px 0 0; }

.tortenreise a.tr-knopf,
.tortenreise a.tr-knopf:visited {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--tr-pink);
  color: var(--tr-weiss);
  font: 700 16px/1 var(--tr-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tortenreise a.tr-knopf:hover,
.tortenreise a.tr-knopf:focus { background: var(--tr-tinte); color: var(--tr-buehne); text-decoration: none; }
.tortenreise a.tr-verweis,
.tortenreise a.tr-verweis:visited,
.tortenreise-mehr a.tr-verweis,
.tortenreise-mehr a.tr-verweis:visited {
  color: var(--tr-tinte);
  font-family: var(--tr-text);
  font-size: 17px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.tortenreise a.tr-verweis::after,
.tortenreise-mehr a.tr-verweis::after { content: "\00a0\2192"; }
.tortenreise a.tr-verweis:hover,
.tortenreise a.tr-verweis:focus,
.tortenreise-mehr a.tr-verweis:hover,
.tortenreise-mehr a.tr-verweis:focus { color: var(--tr-tinte); text-decoration-color: var(--tr-pink); text-decoration-thickness: 2px; }
.tortenreise button.tr-start,
.tortenreise button.tr-start:hover,
.tortenreise button.tr-start:focus {
  display: none;
  appearance: none;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: var(--tr-tinte);
  font: 700 12px/1 var(--tr-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.tortenreise button.tr-start::after { content: "\00a0\00a0\2193"; }
.tortenreise button.tr-start:hover { color: var(--tr-pink); }

@media (pointer: coarse) {
  /* Touch: jede Station ist ein Rastpunkt, wie beim Wischen durch Reels */
  html.tortenreise-live { scroll-snap-type: y proximity; }
  .tortenreise .tr-rast { scroll-snap-align: start; scroll-snap-stop: always; }
  .tortenreise .tr-finger { display: inline; }
  .tortenreise .tr-maus { display: none; }
}

/* ---------- Live-Modus: 3D läuft, Bühne ist angeheftet ---------- */
html.tortenreise-live .tortenreise { height: 660vh; height: 660svh; }
html.tortenreise-live .tortenreise .tr-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
html.tortenreise-live .tortenreise .tr-leinwand {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
html.tortenreise-live .tortenreise .tr-buehne.tr-bereit .tr-leinwand { opacity: 1; }
html.tortenreise-live .tortenreise .tr-fortschritt {
  display: flex;
  gap: 4px;
  position: absolute;
  inset: var(--tr-kopf) 0 auto 0;
  z-index: 4;
}
html.tortenreise-live .tortenreise .tr-fortschritt i {
  flex: 1 1 0;
  height: 4px;
  background:
    linear-gradient(to right, var(--tr-pink) var(--f, 0%), transparent 0),
    linear-gradient(var(--tr-tinte), var(--tr-tinte)) center / 100% 1px no-repeat;
}
html.tortenreise-live .tortenreise a.tr-weiter,
html.tortenreise-live .tortenreise a.tr-weiter:visited {
  display: block;
  position: absolute;
  top: calc(var(--tr-kopf) + 18px);
  right: var(--tr-rand);
  z-index: 3;
  padding: 8px 0;
  color: var(--tr-tinte);
  font: 700 12px/1 var(--tr-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
html.tortenreise-live .tortenreise a.tr-weiter::after { content: "\00a0\00a0\2193"; }
html.tortenreise-live .tortenreise a.tr-weiter:hover,
html.tortenreise-live .tortenreise a.tr-weiter:focus { color: var(--tr-pink); }
html.tortenreise-live .tortenreise button.tr-start { display: inline-block; }
html.tortenreise-live .tortenreise .tr-texte { position: absolute; z-index: 2; gap: 0; }
html.tortenreise-live .tortenreise .tr-szene { grid-area: 1 / 1; opacity: 0; visibility: hidden; will-change: opacity, transform; }
html.tortenreise-live .tortenreise .tr-szene[data-k="0"] { opacity: 1; visibility: visible; }

@media (min-width: 900px) {
  html.tortenreise-live .tortenreise .tr-texte {
    inset: var(--tr-kopf) auto var(--tr-frei) 0;
    width: min(46%, 656px);
    padding: 72px 0 72px var(--tr-rand);
    align-items: center;
  }
}
@media (max-width: 899.98px) {
  .tortenreise .tr-nur-breit { display: none; }
  html.tortenreise-live .tortenreise .tr-fortschritt { padding: 8px 10px 0; }
  html.tortenreise-live .tortenreise .tr-fortschritt i { height: 3px; }
  html.tortenreise-live .tortenreise .tr-texte {
    inset: auto 0 var(--tr-frei) 0;
    padding: 56px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    align-items: end;
    background: linear-gradient(to top, var(--tr-buehne) calc(100% - 56px), transparent);
  }
  html.tortenreise-live .tortenreise .tr-szene h1,
  html.tortenreise-live .tortenreise .tr-szene .tr-gross { font-size: 34px; }
  html.tortenreise-live .tortenreise .tr-szene h2 { font-size: 30px; }
  html.tortenreise-live .tortenreise button.tr-start,
  html.tortenreise-live .tortenreise .tr-szene p.tr-kontakt { display: none; }
  .tortenreise .tr-szene { gap: 10px; }
  .tortenreise .tr-szene p.tr-marke { font-size: 11px; letter-spacing: 0.12em; gap: 10px; }
  .tortenreise .tr-marke::before { width: 22px; height: 6px; }
  .tortenreise .tr-szene p,
  .tortenreise a.tr-verweis { font-size: 15px; line-height: 1.45; }
  .tortenreise .tr-szene p.tr-imbild { font-size: 13px; }
  .tortenreise .tr-aktionen { gap: 10px 22px; }
  .tortenreise a.tr-knopf { min-height: 46px; flex: 1 0 100%; justify-content: center; padding: 0 20px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .tortenreise, .tortenreise a.tr-knopf, html.tortenreise-live .tortenreise .tr-leinwand { transition: none; }
}

/* ---------- Block "Mehr von Art Cake" unter der Animation: Shortcode [tortenreise_mehr] ---------- */
section.tortenreise-mehr {
  --tr-pink: #CC2780;
  --tr-tinte: #1A1A1A;
  --tr-display: "AC Playfair Display SC", "Playfair Display SC", "Times New Roman", Georgia, serif;
  --tr-text: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --tr-rand: clamp(20px, 6vw, 96px);
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  box-sizing: border-box;
  max-width: none !important;
  margin: 0;
  padding: clamp(64px, 9vw, 120px) 0;
  background: #FFFFFF;
  color: var(--tr-tinte);
  font-family: var(--tr-text);
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
/* Das Skript streckt den Block auf volle Breite; dann bekommt er denselben Seitenrand wie die Animation. */
section.tortenreise-mehr.tr-gestreckt { padding-left: var(--tr-rand); padding-right: var(--tr-rand); }
section.tortenreise-mehr *, section.tortenreise-mehr *::before, section.tortenreise-mehr *::after { box-sizing: border-box; }
section.tortenreise-mehr h2,
section.tortenreise-mehr h3 {
  margin: 0;
  padding: 0;
  color: var(--tr-tinte);
  font-family: var(--tr-display);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 1px;
  line-height: 1.1;
  text-align: left;
  text-wrap: balance;
}
section.tortenreise-mehr h2 { font-size: clamp(32px, 4.2vw, 53px); }
section.tortenreise-mehr h3 { font-size: clamp(24px, 2.4vw, 30px); }
section.tortenreise-mehr ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr));
  gap: 40px clamp(24px, 4vw, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
}
section.tortenreise-mehr li {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: start;
  min-width: 0;
  margin: 0;
  padding: 20px 0 0;
  border-top: 2px solid var(--tr-tinte);
  list-style: none;
}
section.tortenreise-mehr li::before, section.tortenreise-mehr li::marker { content: none; }
section.tortenreise-mehr p {
  max-width: 480px;
  margin: 0;
  padding: 0;
  color: var(--tr-tinte);
  font-family: var(--tr-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
}
section.tortenreise-mehr :focus-visible { outline: 2px solid var(--tr-pink); outline-offset: 3px; }
@media (max-width: 899.98px) {
  section.tortenreise-mehr p, section.tortenreise-mehr a.tr-verweis { font-size: 16px; }
}

/* ---------- Kopf der Startseite mit Video und Kacheln: Shortcode [artcake_start] ---------- */
section.ac-start {
  --tr-pink: #CC2780;
  --tr-tinte: #1A1A1A;
  --tr-weiss: #FFFFFF;
  --tr-display: "AC Playfair Display SC", "Playfair Display SC", "Times New Roman", Georgia, serif;
  --tr-text: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --tr-rand: clamp(20px, 6vw, 96px);
  --ac-kopf: 72px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  color: var(--tr-tinte);
  font-family: var(--tr-text);
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
section.ac-start *, section.ac-start *::before, section.ac-start *::after { box-sizing: border-box; }
section.ac-start :focus-visible { outline: 2px solid var(--tr-pink); outline-offset: 3px; }
section.ac-start .ac-buehne { position: relative; overflow: hidden; background: #FFFFFF; }
section.ac-start .ac-film { margin: 0; padding: 0; overflow: hidden; background: #FFFFFF; }
section.ac-start .ac-film picture { display: block; width: 100%; height: 100%; }
section.ac-start .ac-film img,
section.ac-start .ac-film video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  background: #FFFFFF;
}
section.ac-start .ac-film video { position: absolute; inset: 0; opacity: 0; background: transparent; transition: opacity 0.6s ease; pointer-events: none; }
section.ac-start .ac-film.ac-laeuft video { opacity: 1; }
section.ac-start .ac-text { display: grid; gap: 18px; justify-items: start; min-width: 0; }
section.ac-start .ac-text h1 {
  margin: 0;
  padding: 0;
  color: var(--tr-tinte);
  font-family: var(--tr-display);
  font-size: clamp(37px, 5.6vw, 74px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 1px;
  text-align: left;
  text-transform: none;
  text-wrap: balance;
}
section.ac-start .ac-text p {
  max-width: 520px;
  margin: 0;
  padding: 0;
  color: var(--tr-tinte);
  font-family: var(--tr-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}
section.ac-start .ac-text p.ac-marke {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
section.ac-start .ac-marke::before { content: ""; flex: none; width: 28px; height: 7px; background: var(--tr-pink); }
section.ac-start .ac-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 0; padding: 4px 0 0; }
section.ac-start a.ac-knopf,
section.ac-start a.ac-knopf:visited {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--tr-pink);
  color: var(--tr-weiss);
  font: 700 16px/1 var(--tr-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
section.ac-start a.ac-knopf:hover,
section.ac-start a.ac-knopf:focus { background: var(--tr-tinte); color: var(--tr-weiss); text-decoration: none; }
section.ac-start a.ac-verweis,
section.ac-start a.ac-verweis:visited {
  color: var(--tr-tinte);
  font-family: var(--tr-text);
  font-size: 17px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
section.ac-start a.ac-verweis::after { content: "\00a0\2192"; }
section.ac-start a.ac-verweis:hover,
section.ac-start a.ac-verweis:focus { color: var(--tr-tinte); text-decoration-color: var(--tr-pink); text-decoration-thickness: 2px; }

/* Kacheln: der schnelle Weg zu den vier wichtigsten Zielen */
section.ac-start .ac-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; background: var(--tr-tinte); }
section.ac-start a.ac-kachel,
section.ac-start a.ac-kachel:visited {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 26px 28px 28px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  background: var(--tr-tinte);
  color: var(--tr-weiss);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
section.ac-start a.ac-kachel:first-child { padding-left: var(--tr-rand); border-left: 0; }
section.ac-start .ac-kachel-titel {
  color: var(--tr-weiss);
  font-family: var(--tr-display);
  font-size: clamp(18px, 1.9vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 1px;
  text-wrap: balance;
}
section.ac-start .ac-kachel-titel::after { content: "\00a0\2192"; color: var(--tr-pink); transition: color 0.2s ease; }
section.ac-start .ac-kachel-text { color: var(--tr-weiss); font-size: 15px; font-weight: 400; line-height: 1.4; }
section.ac-start a.ac-kachel:hover,
section.ac-start a.ac-kachel:focus-visible { background: var(--tr-pink); color: var(--tr-weiss); text-decoration: none; }
section.ac-start a.ac-kachel:hover .ac-kachel-titel::after,
section.ac-start a.ac-kachel:focus-visible .ac-kachel-titel::after { color: var(--tr-weiss); }
section.ac-start a.ac-kachel:focus-visible { outline-offset: -4px; outline-color: var(--tr-weiss); }

@media (min-width: 900px) {
  /* Breit: Text links, das Video steht in voller Höhe rechts. Im Video sitzt das Motiv rechts der Mitte. */
  section.ac-start .ac-buehne { --ac-hoch: clamp(460px, min(78vh, 58vw), 860px); display: flex; align-items: center; height: var(--ac-hoch); }
  @supports (height: 1svh) { section.ac-start .ac-buehne { --ac-hoch: clamp(460px, min(78svh, 58vw), 860px); } }
  section.ac-start .ac-film { position: absolute; top: 0; right: 0; width: calc(var(--ac-hoch) * 16 / 9); height: var(--ac-hoch); }
  section.ac-start .ac-text { position: relative; z-index: 1; width: min(46%, 656px); padding: var(--ac-kopf) 0 0 var(--tr-rand); }
}
@media (max-width: 899.98px) {
  /* Schmal: Video oben, Text darunter */
  section.ac-start .ac-buehne { --ac-kante: min(100vw, 54vh); display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--ac-kopf) * 0.5); }
  @supports (height: 1svh) { section.ac-start .ac-buehne { --ac-kante: min(100vw, 54svh); } }
  section.ac-start .ac-film { position: relative; flex: none; width: var(--ac-kante); max-width: 100%; height: var(--ac-kante); }
  /* Schatten laufen am Rand weich aus, statt an der Videokante abzubrechen. Bewusst ohne CSS-Maske: Safari zeigt Videos in maskierten Elementen nicht zuverlaessig. */
  section.ac-start .ac-film::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0) 94%, #FFFFFF); }
  section.ac-start .ac-text { align-self: stretch; gap: 10px; padding: 6px 20px 26px; }
  section.ac-start .ac-text h1 { font-size: 34px; }
  section.ac-start .ac-text p, section.ac-start a.ac-verweis { font-size: 15px; line-height: 1.45; }
  section.ac-start .ac-text p.ac-marke { font-size: 11px; letter-spacing: 0.12em; gap: 10px; }
  section.ac-start .ac-marke::before { width: 22px; height: 6px; }
  section.ac-start .ac-aktionen { gap: 10px 22px; }
  section.ac-start a.ac-knopf { min-height: 46px; flex: 1 0 100%; justify-content: center; padding: 0 20px; font-size: 15px; }
  section.ac-start .ac-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  section.ac-start a.ac-kachel,
  section.ac-start a.ac-kachel:first-child,
  section.ac-start a.ac-kachel:last-child { padding: 18px 20px 20px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.24); }
  section.ac-start a.ac-kachel:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.24); }
  section.ac-start a.ac-kachel:nth-child(-n+2) { border-top: 0; }
  section.ac-start .ac-kachel-titel { font-size: 21px; }
  section.ac-start .ac-kachel-text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  section.ac-start .ac-film video, section.ac-start a.ac-knopf, section.ac-start a.ac-kachel { transition: none; }
}