/* =========================================================================
   di Russillo – Basis: Reset, Typografie, Raster, Hilfsklassen, Animation
   Breakpoints: Mobil ≤ 767 px · Tablet 768–1024 px · Desktop > 1024 px
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html { overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a .icon, p .icon, li > .icon, .link .icon { display: inline-block; vertical-align: -3px; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
img { border: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---- Typografie ------------------------------------------------------- */
h1, h2, h3, h4, .h1, .h2, .h3, .display {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  color: var(--c-text);
  letter-spacing: normal;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-hero); line-height: var(--lh-hero); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: 22px; line-height: 1.3; }
.display-xl { font-family: var(--f-display); font-style: italic; font-size: var(--fs-xxl); line-height: var(--lh-xxl); }
.display-l  { font-family: var(--f-display); font-style: italic; font-size: var(--fs-xl); line-height: var(--lh-xl); }
.gold { color: var(--c-gold); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.text-small { font-size: var(--fs-small); }
.text-xs { font-size: var(--fs-xs); line-height: 1.6; }
.text-dim { color: var(--c-text-dim); }
.center { text-align: center; }
strong, b { font-weight: 600; }

a { color: inherit; text-decoration: none; transition: color var(--t); }
a:hover, a:focus-visible { color: var(--c-gold); }
.prose a, a.link { color: var(--c-gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover, a.link:hover { color: var(--c-text); }

.prose { max-width: var(--container-narrow); margin-inline: auto; }
.prose h2 { font-size: 32px; margin: 1.6em 0 .5em; }
.prose h3 { font-size: 24px; margin: 1.4em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin: .2em 0; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 26px; }
.prose ul > li::before {
  content: ""; position: absolute; left: 4px; top: 13px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--c-gold);
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-gold-20); vertical-align: top; }
.prose hr { border: 0; border-top: var(--rule); width: var(--rule-w); margin: 2em auto; }

:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
::selection { background: var(--c-gold); color: var(--c-bg); }

/* ---- Raster ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.container--wide { max-width: calc(1440px + 2 * var(--gutter)); }

.section { position: relative; padding-block: var(--space-5); }
.section--tight { padding-block: var(--space-4); }
.section--loose { padding-block: var(--space-7); }
.section--flush { padding-block: 0; }

.grid { display: grid; gap: var(--gap, 40px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: center; }
.split--reverse > :first-child { order: 2; }
.stack > * + * { margin-top: var(--stack, 20px); }
.text-block { max-width: 690px; margin-inline: auto; text-align: center; }
.text-block--wide { max-width: 860px; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { gap: 40px; }
}
@media (max-width: 767px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse > :first-child { order: 0; }
}

/* Sichtbarkeit je Gerät */
@media (max-width: 1024px) { .only-desktop { display: none !important; } }
@media (min-width: 1025px) { .only-mobile { display: none !important; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--c-gold); color: var(--c-bg); padding: 10px 18px; font-weight: 600;
}
.skip-link:focus { top: 16px; color: var(--c-bg); }

/* ---- Hauptbereich ----------------------------------------------------- */
main { display: block; padding-top: var(--header-h); min-height: 60vh; }
body.has-hero main { padding-top: 0; }

/* ---- Entrance-Animationen ---------------------------------------------
   data-anim="fade" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | "slow"
   Nur aktiv, wenn JS läuft (html.js) und keine reduzierte Bewegung gewünscht ist.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-anim] {
    opacity: 0;
    transition: opacity 1.2s ease, transform 1.2s ease;
    transition-delay: var(--anim-delay, 0s);
    will-change: opacity, transform;
  }
  html.js [data-anim="slow"] { transition-duration: 2s; }
  html.js [data-anim="fade-up"] { transform: translateY(40px); }
  html.js [data-anim="fade-down"] { transform: translateY(-40px); }
  html.js [data-anim="fade-left"] { transform: translateX(40px); }
  html.js [data-anim="fade-right"] { transform: translateX(-40px); }
  html.js [data-anim].is-in { opacity: 1; transform: none; }
  html.js [data-parallax] { transition: transform .1s linear; }
}

@keyframes scrolling {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, 10px); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }

/* ---- Eigene Mauszeiger (nur Desktop mit Maus) ------------------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  /* Hotspot = Spitze des Pizzastücks (oben links); auf Links/Buttons bleibt der eigene Zeiger sichtbar */
  html.cursor-pizza body,
  html.cursor-pizza :is(a, button, label, summary, select, [role="tab"]) { cursor: url("../img/common/cursor-pizza.png") 5 1, pointer; }
  html.cursor-eis body,
  html.cursor-eis :is(a, button, label, summary, select, [role="tab"]) { cursor: url("../img/common/cursor-eis.png") 22 8, pointer; }
  html.cursor-pizza :is(input, textarea),
  html.cursor-eis :is(input, textarea) { cursor: text; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .mobile-menu, .scroll-arrow { display: none !important; }
  main { padding-top: 0; }
  h1, h2, h3 { color: #000; }
}
.container.prose { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }