/* Startseite – Einstieg „Abzüge“ (Webseite 2026-10-27.1)
   PC mit Maus (ab 1100 px): fünf Abzüge aufgefächert; beim Überfahren hebt sich ein Abzug, richtet sich gerade,
   wird farbig und zeigt Kicker, Text und Link – die anderen rücken zur Seite.
   Tablet, Handy und schmale Fenster: die Abzüge liegen als wischbare Reihe nebeneinander, alles ist sichtbar.
   Aufbau gegen Flackern (Webseite 2026-10-27.2): .fdw-v3-print ist die Trefferfläche. Sie liegt schon in Ruhe
   genau so gedreht wie das Papier und verändert sich beim Überfahren nicht. Das Papier darin (.fdw-v3-print-paper)
   nimmt keine Mausereignisse an (pointer-events: none) und bewegt sich nur sichtbar: zum Geraderichten dreht es
   sich um denselben Winkel zurück. So ragt in Ruhe keine Ecke über die Trefferfläche hinaus, und ein ruhender
   Zeiger kann den Zustand nie hin und her kippen. Solange ein Abzug aktiv ist, verlängert ::before die
   Trefferfläche nach oben über den angehobenen Teil.
   Die alten Regeln für .fdw-v3-window wurden mit diesem Stand aus dem Seiten-Template entfernt. */

/* ---------- Grundform: wischbare Reihe ---------- */
#fw-content .fdw-v3 .fdw-v3-prints {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 52% at 50% 44%, rgba(255, 244, 214, 0.12), transparent 72%),
    linear-gradient(160deg, #0a4c68 0%, #063a52 100%);
}
#fw-content .fdw-v3 .fdw-v3-fan {
  --pw: clamp(224px, 62vw, 280px);
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 3vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(20px, 5vw, 44px);
  padding: 46px clamp(20px, 5vw, 44px) 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
/* Platz hinter dem letzten Abzug (Störer ragt über den Rand) */
#fw-content .fdw-v3 .fdw-v3-fan::after { content: ""; flex: 0 0 8px; }
#fw-content .fdw-v3 .fdw-v3-print {
  --r: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--pw);
  width: var(--pw);
  color: #0d2a3a !important;
  text-decoration: none;
  scroll-snap-align: center;
  outline: none;
  transform: rotate(var(--r));
  transform-origin: 50% 85%;
}
#fw-content .fdw-v3 .fdw-v3-print:nth-child(odd) { --r: -1.6deg; }
#fw-content .fdw-v3 .fdw-v3-print:nth-child(even) { --r: 1.6deg; }
/* Verlängerung der Trefferfläche nach oben, nur solange der Abzug aktiv ist */
#fw-content .fdw-v3 .fdw-v3-print::before {
  content: none;
  position: absolute;
  top: -12px;
  right: 0;
  bottom: 0;
  left: 0;
}
#fw-content .fdw-v3 .fdw-v3-print-paper {
  position: relative;
  display: block;
  flex: 1 1 auto;
  padding: calc(var(--pw) * 0.052) calc(var(--pw) * 0.052) 0;
  border-radius: 2px;
  background: #fbf8f1;
  box-shadow: 0 14px 32px rgba(0, 15, 25, 0.42), 0 2px 6px rgba(0, 15, 25, 0.28);
  pointer-events: none;
  transform: none;
  transform-origin: 50% 85%;
  transition: transform 650ms cubic-bezier(0.18, 0.78, 0.18, 1), box-shadow 450ms ease;
}
#fw-content .fdw-v3 .fdw-v3-print:focus-visible .fdw-v3-print-paper { outline: 3px solid #61d3d0; outline-offset: 4px; }
#fw-content .fdw-v3 .fdw-v3-print-photo {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #cfc8bb;
}
#fw-content .fdw-v3 .fdw-v3-print-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  transition: filter 600ms ease, transform 1000ms cubic-bezier(0.18, 0.78, 0.18, 1);
}
#fw-content .fdw-v3 .fdw-v3-print--portrait .fdw-v3-print-photo img { object-position: 50% 18%; }
#fw-content .fdw-v3 .fdw-v3-print-cap {
  display: block;
  padding: calc(var(--pw) * 0.05) 4px calc(var(--pw) * 0.06);
}
#fw-content .fdw-v3 .fdw-v3-print-cap strong {
  display: block;
  color: #0d2a3a;
  font-family: "Cormorant Garamond", "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: max(16px, calc(var(--pw) * 0.1));
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  overflow-wrap: normal;
  hyphens: none;
}
#fw-content .fdw-v3 .fdw-v3-print-more {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 450ms cubic-bezier(0.18, 0.78, 0.18, 1);
}
#fw-content .fdw-v3 .fdw-v3-print-more > span { display: block; min-height: 0; overflow: hidden; }
#fw-content .fdw-v3 .fdw-v3-print-more small {
  display: block;
  margin-top: 10px;
  color: #7a1f2b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#fw-content .fdw-v3 .fdw-v3-print-text {
  display: block;
  margin-top: 6px;
  color: #3a525c;
  font-size: 14px;
  line-height: 1.5;
}
#fw-content .fdw-v3 .fdw-v3-print-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-bottom: 3px;
  border-bottom: 1px solid #ac8149;
  color: #004062;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#fw-content .fdw-v3 .fdw-v3-print-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
#fw-content .fdw-v3 .fdw-v3-print-badge {
  position: absolute;
  top: -24px;
  right: -14px;
  width: calc(var(--pw) * 0.33);
  height: auto;
  max-width: none;
  transform: rotate(14deg);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 650ms cubic-bezier(0.18, 0.78, 0.18, 1);
}

/* Maus an einem schmalen Fenster: leichtes Anheben */
@media (hover: hover) and (pointer: fine) {
  #fw-content .fdw-v3 .fdw-v3-print:hover::before { content: ""; }
  #fw-content .fdw-v3 .fdw-v3-print:hover .fdw-v3-print-paper {
    transform: rotate(calc(var(--r) * -1)) translateY(-6px);
    box-shadow: 0 22px 44px rgba(0, 15, 25, 0.5), 0 3px 8px rgba(0, 15, 25, 0.3);
  }
}

/* Tablet hochkant: Einleitung ohne Leerraum über den Abzügen */
@media (min-width: 761px) and (max-width: 980px) {
  #fw-content .fdw-v3 .fdw-v3-intro { min-height: 0; padding: 56px 52px; }
}

/* Handy: etwas weniger Luft über der Reihe */
@media (max-width: 760px) {
  #fw-content .fdw-v3 .fdw-v3-fan { padding-top: 40px; padding-bottom: 34px; }
  #fw-content .fdw-v3 .fdw-v3-print-text { font-size: 15px; }
}

/* ---------- PC mit Maus: Abzüge aufgefächert ---------- */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  #fw-content .fdw-v3 .fdw-v3-prints { align-items: center; container-type: inline-size; }
  #fw-content .fdw-v3 .fdw-v3-fan {
    --pw: 230px;
    --step: calc(var(--pw) * 0.7);
    position: relative;
    display: block;
    width: calc(var(--pw) + 4 * var(--step));
    height: calc(var(--pw) * 2.08);
    margin: -10px auto 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  /* Breite eines Abzugs aus der Breite der Bildfläche: rechts und links bleibt Platz zum Ausweichen */
  @supports (width: 1cqw) {
    #fw-content .fdw-v3 .fdw-v3-fan { --pw: clamp(155px, 20.5cqw, 300px); }
  }
  #fw-content .fdw-v3 .fdw-v3-fan::after { content: none; }
  #fw-content .fdw-v3 .fdw-v3-print {
    position: absolute;
    left: calc(var(--n) * var(--step));
    top: calc(var(--y) * var(--pw));
    z-index: var(--z);
  }
  /* fester Drehpunkt (nicht in % der Höhe): klappt der Text auf, wird der Abzug höher – die Trefferfläche
     darf sich dabei nicht verschieben, und Hülle und Papier müssen sich um denselben Punkt drehen */
  #fw-content .fdw-v3 .fdw-v3-print,
  #fw-content .fdw-v3 .fdw-v3-print-paper { transform-origin: 50% calc(var(--pw) * 1.37); }
  #fw-content .fdw-v3 .fdw-v3-print:nth-child(1) { --n: 0; --y: 0.42; --r: -10deg; --z: 1; }
  #fw-content .fdw-v3 .fdw-v3-print:nth-child(2) { --n: 1; --y: 0.2; --r: -4deg; --z: 2; }
  #fw-content .fdw-v3 .fdw-v3-print:nth-child(3) { --n: 2; --y: 0.11; --r: 1deg; --z: 3; }
  #fw-content .fdw-v3 .fdw-v3-print:nth-child(4) { --n: 3; --y: 0.2; --r: 5deg; --z: 4; }
  #fw-content .fdw-v3 .fdw-v3-print:nth-child(5) { --n: 4; --y: 0.42; --r: 10deg; --z: 5; }
  #fw-content .fdw-v3 .fdw-v3-print-paper { box-shadow: 0 18px 40px rgba(0, 15, 25, 0.45), 0 2px 6px rgba(0, 15, 25, 0.3); }
  #fw-content .fdw-v3 .fdw-v3-print-photo img { filter: saturate(0.3) contrast(1.06) brightness(0.94); }
  #fw-content .fdw-v3 .fdw-v3-print-more { grid-template-rows: 0fr; }
  #fw-content .fdw-v3 .fdw-v3-print-more small { font-size: 12px; letter-spacing: 0.1em; }
  #fw-content .fdw-v3 .fdw-v3-print-text { font-size: 12px; }
  #fw-content .fdw-v3 .fdw-v3-print-go { font-size: 12px; }
  #fw-content .fdw-v3 .fdw-v3-print-badge {
    top: calc(var(--pw) * -0.13);
    right: calc(var(--pw) * -0.03);
    width: calc(var(--pw) * 0.38);
  }
  /* aktiver Abzug: die Trefferfläche bleibt (nur nach oben verlängert), das Papier dreht sich gerade und hebt sich */
  #fw-content .fdw-v3 .fdw-v3-print:hover,
  #fw-content .fdw-v3 .fdw-v3-print:focus-visible { z-index: 10; }
  #fw-content .fdw-v3 .fdw-v3-print:hover::before {
    content: "";
    top: calc(var(--pw) * -0.35);
    right: calc(var(--pw) * -0.06);
    left: calc(var(--pw) * -0.06);
  }
  #fw-content .fdw-v3 .fdw-v3-print:hover .fdw-v3-print-paper,
  #fw-content .fdw-v3 .fdw-v3-print:focus-visible .fdw-v3-print-paper {
    transform: rotate(calc(var(--r) * -1)) translateY(calc(var(--pw) * -0.165)) scale(1.1);
    box-shadow: 0 36px 70px rgba(0, 15, 25, 0.55), 0 4px 10px rgba(0, 15, 25, 0.3);
  }
  #fw-content .fdw-v3 .fdw-v3-print:hover .fdw-v3-print-photo img,
  #fw-content .fdw-v3 .fdw-v3-print:focus-visible .fdw-v3-print-photo img {
    filter: saturate(1) contrast(1.02) brightness(1.04);
    transform: scale(1.04);
  }
  #fw-content .fdw-v3 .fdw-v3-print:hover .fdw-v3-print-more,
  #fw-content .fdw-v3 .fdw-v3-print:focus-visible .fdw-v3-print-more { grid-template-rows: 1fr; }
  #fw-content .fdw-v3 .fdw-v3-print:hover .fdw-v3-print-badge,
  #fw-content .fdw-v3 .fdw-v3-print:focus-visible .fdw-v3-print-badge { transform: rotate(0deg) scale(1.05); }
  /* die anderen rücken zur Seite (nur das Papier) */
  #fw-content .fdw-v3 .fdw-v3-print:hover ~ .fdw-v3-print .fdw-v3-print-paper,
  #fw-content .fdw-v3 .fdw-v3-print:focus-visible ~ .fdw-v3-print .fdw-v3-print-paper {
    transform: translateX(calc(var(--pw) * 0.16));
  }
  #fw-content .fdw-v3 .fdw-v3-print:has(~ .fdw-v3-print:hover) .fdw-v3-print-paper,
  #fw-content .fdw-v3 .fdw-v3-print:has(~ .fdw-v3-print:focus-visible) .fdw-v3-print-paper {
    transform: translateX(calc(var(--pw) * -0.16));
  }
}

@media (prefers-reduced-motion: reduce) {
  #fw-content .fdw-v3 .fdw-v3-print-paper,
  #fw-content .fdw-v3 .fdw-v3-print-photo img,
  #fw-content .fdw-v3 .fdw-v3-print-more,
  #fw-content .fdw-v3 .fdw-v3-print-badge { transition: none; }
}

/* ---------- Wisch-Hinweis (31.10.2026) ----------
   Nur bei der wischbaren Reihe (Handy, Tablet, Touch, schmale Fenster): die Abzüge rücken in Abständen
   zweimal kurz nach links und wieder zurück, damit man sieht, dass es seitlich weitergeht.
   Die Klasse .is-hint setzt ein kleines Skript am Ende der Seite, solange die Reihe im Bild ist und noch nicht
   gewischt wurde. Bewegt wird nur die Einzel-Eigenschaft „translate“ der Abzüge (die Drehung bleibt unberührt). */
@media not all and (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  #fw-content .fdw-v3 .fdw-v3-fan.is-hint .fdw-v3-print {
    animation: fdw-v3-wisch 3.8s infinite;
    animation-delay: 700ms;
  }
  #fw-content .fdw-v3 .fdw-v3-fan.is-hint .fdw-v3-print:nth-child(2) { animation-delay: 745ms; }
  #fw-content .fdw-v3 .fdw-v3-fan.is-hint .fdw-v3-print:nth-child(3) { animation-delay: 790ms; }
  #fw-content .fdw-v3 .fdw-v3-fan.is-hint .fdw-v3-print:nth-child(4) { animation-delay: 835ms; }
  #fw-content .fdw-v3 .fdw-v3-fan.is-hint .fdw-v3-print:nth-child(5) { animation-delay: 880ms; }
}
/* zwei Zuckungen hintereinander (mittelschnell, 34 und 18 px), dann Pause */
@keyframes fdw-v3-wisch {
  0%   { translate: 0 0; animation-timing-function: cubic-bezier(0.25, 0.1, 0.3, 1); }
  11%  { translate: -34px 0; animation-timing-function: cubic-bezier(0.45, 0, 0.4, 1); }
  24%  { translate: 0 0; animation-timing-function: cubic-bezier(0.25, 0.1, 0.3, 1); }
  33%  { translate: -18px 0; animation-timing-function: cubic-bezier(0.45, 0, 0.4, 1); }
  45%  { translate: 0 0; }
  100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #fw-content .fdw-v3 .fdw-v3-fan.is-hint .fdw-v3-print { animation: none; }
}