/* ==========================================================================
   MESOKARP - HAUPT STYLESHEET (REVIDIERT: HART, AUTHENTISCH, WEISSES PAPIER)
   - Kein zweites Papier / keine Doppeloptik
   - Aufgehellte, reinweiße Knitterpapier-Textur
   - Logo "MESOKARP" zentriert, Großbuchstaben, einzige Verwendung von Bold
   - Startseite exakt wie IMG_0545 mit Pfeilen ↳
   - Durchgezogene Linien über die gesamte Seitenbreite
   - Keine Unschärfen (kein Blur), keine Text-Hover-Animationen
   - Kein "&"-Zeichen
   - Admin im reinen Helvetica-Stil
   ========================================================================== */

:root {
  /* Farbakzente */
  --color-coral: #F06043;
  --color-yellow: #F0C243;
  --color-turquoise: #43F0C5;
  --color-green: #6DE878;

  /* Wichtige Buttons: #FF7E00 mit solidem schwarzem Rahmen */
  --color-button-cta: #FF7E00;
  --color-button-cta-hover: #ff9124;

  /* Schwarz und Weiß */
  --color-ink: #000000;
  --color-ink-muted: #333333;
  --color-bg-paper: #ffffff;

  /* Typografie (Industrie-Norm lizenziert) */
  --font-fontetex: 'fontetex', 'MesokarpDisplay', sans-serif;
  --font-olyida: 'olyida', 'OpasSchreibmaschine', 'Courier New', monospace;
  --font-olyida-mono: 'olyida-mono', 'OpasSchreibmaschineMono', monospace;
  --font-fransa: 'Fransa Handwriting', 'Handschrift', cursive, sans-serif;

  --font-brand-bold: 'Fransa Handwriting', 'Handschrift', sans-serif;
  /* NUR für MESOKARP Logo */
  --font-hand: 'Fransa Handwriting', 'Handschrift', cursive, sans-serif;
  /* Regular Schnitt */
  --font-typewriter: 'olyida', 'OpasSchreibmaschine', 'Courier New', monospace;
  --font-typewriter-mono: 'olyida-mono', 'OpasSchreibmaschineMono', monospace;
  --font-admin: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-legal: 'Times New Roman', Times, serif;

  --border-solid: 2px solid #000000;
  --box-shadow-brutal: 3px 3px 0px #000000;
  --box-shadow-polaroid: 0 8px 20px rgba(0, 0, 0, 0.12);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: #ffffff;
}

/* Reines weißes Knitterpapier als durchgehende Oberfläche */
body {
  font-family: var(--font-typewriter);
  font-size-adjust: from-font;
  color: var(--color-ink);
  background-color: #ffffff;
  background-image: url('../assets/textures/paper-white.jpg');
  background-attachment: scroll;
  background-repeat: repeat-y;
  background-size: 100% auto;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Keine Text-Hover-Animationen, keine Farbverwischungen */
a {
  color: var(--color-ink);
  text-decoration: none;
}

/* ==========================================================================
   LINIEN DURCH DIE GANZE SEITE GEZOGEN (100vw)
   ========================================================================== */

.full-width-line {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-bottom: 2px solid #000000;
  margin-top: 14px;
  margin-bottom: 36px;
}

.content-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 120px 24px;
  position: relative;
}

/* Hauptbereich mit großzügigem Mindestabstand, damit der Footer auf Standard-Bildschirmhöhen erst beim Scrollen sichtbar wird */
main {
  min-height: 80vh;
  margin-bottom: 260px;
}

/* ==========================================================================
   HEADER & ZENTRIERTES LOGO (MESOKARP)
   ========================================================================== */

.site-header {
  text-align: center;
  padding-top: 18px;
  position: relative;
}

.header-brand-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.header-brand-spacer {
  /* Symmetrischer Ausgleich für das rechtsbündige Warenkorb-Icon */
  min-height: 1px;
}

.brand-logo-wrapper {
  text-align: center;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-logo {
  font-family: var(--font-hand);
  font-size-adjust: from-font;
  font-weight: 400;
  font-size: 4.2rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #000000;
  display: inline-block;
  user-select: none;
  line-height: 1;
  text-decoration: none;
}

.header-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.btn-admin-studio {
  display: none !important;
}

/* Einkaufswagen: Erst sichtbar wenn im Shop oder Produkt gekauft! */
.cart-trigger {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  display: none;
  /* Standardmäßig ausgeblendet! */
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cart-trigger.visible {
  display: flex;
}

.cart-icon-svg {
  width: 62px;
  height: 62px;
  color: #000000;
  display: block;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cart-trigger:hover .cart-icon-svg {
  transform: scale(1.1) rotate(-3deg);
}

@media (max-width: 600px) {
  .header-brand-row {
    grid-template-columns: 1fr auto;
  }
  .header-brand-spacer {
    display: none;
  }
  .brand-logo {
    font-size: 3.2rem;
  }
  .cart-icon-svg {
    width: 48px;
    height: 48px;
  }
}


/* Untergeordnete Navigation für Unterseiten */
.sub-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.sub-nav-link {
  font-family: var(--font-hand);
  font-weight: 400;
  /* Regular */
  font-size: 1.6rem;
  color: #000000;
  padding: 2px 6px;
}

.sub-nav-link.active {
  border-bottom: 2px solid #000000;
}

/* ==========================================================================
   STARTSEITE (IMG_0545 - PFEILE ↳ ZU DEN 4 PUNKTEN ZENTRIERT)
   ========================================================================== */

.home-menu-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 0 380px 0;
  /* Großzügiger Abstand, damit der Footer erst beim Scrollen erscheint */
  min-height: 75vh;
  gap: 40px;
}

.home-nav-item {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: #000000;
  cursor: pointer;
}

.home-nav-arrow-img {
  height: 40px;
  width: auto;
  display: block;
  flex-shrink: 0;
  user-select: none;
}

.home-nav-text {
  font-family: var(--font-hand);
  font-weight: 400;
  /* Regular */
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   BUTTONS (#FF7E00 MIT SCHWARZEM RAHMEN)
   ========================================================================== */

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-button-cta);
  color: #000000;
  font-family: var(--font-typewriter);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 12px 26px;
  border: var(--border-solid);
  box-shadow: none !important;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-cta:hover {
  background-color: #ff9426;
}

.btn-cta:active {
  transform: scale(0.98);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: var(--border-solid);
  box-shadow: none !important;
  padding: 8px 18px;
  font-family: var(--font-typewriter);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-secondary:hover {
  background-color: #f5f5f5;
}

.btn-secondary:active {
  transform: scale(0.98);
}

/* ==========================================================================
   POLAROID RASTER (PROJEKTE & SHOP)
   ========================================================================== */


.polaroid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 76px 52px;
  padding: 36px 28px;
  align-items: start;
  overflow: visible;
}

/* Authentic Textured Polaroid Paper (Polaroid Inspo: IMG_0548, IMG_0549, IMG_0550) */
.polaroid-card {
  background-color: #faf8f5;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(247, 244, 238, 0.95) 100%), url('../assets/textures/paper-white.jpg');
  background-size: cover, 300px 300px;
  border: 1.5px solid #000000;
  padding: 14px 14px 18px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 440px;
  box-sizing: border-box;
  transform: rotate(var(--card-rot, 0deg));
  box-shadow: var(--card-shadow, 4px 4px 8px rgba(0, 0, 0, 0.22));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
}

.polaroid-card:hover {
  transform: rotate(calc(var(--card-rot, 0deg) - 0.4deg)) translate(-2px, -2px);
  box-shadow: var(--card-shadow-hover, 5px 6px 11px rgba(0, 0, 0, 0.27));
}

/* Wrapper fuer Projekte: Polaroid / Dia auf Notizzettel */
.polaroid-project-wrapper {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
  z-index: 2;
  box-sizing: border-box;
  overflow: visible;
}

/* Fall B: Nur Dias und Notizen im Stack (z. B. Projekt 2) -> Quadratisch & zentriert */
.polaroid-project-wrapper.dia-only-stack {
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  justify-self: center;
  align-self: start;
}

/* Fall A: Polaroid oder 35mm Filmstrip ist im Stack -> Feste 440px Höhe */
.polaroid-project-wrapper.has-polaroid-stack,
.polaroid-project-wrapper.has-filmstrip-stack {
  width: 100%;
  max-width: 360px;
  height: 440px;
  margin: 0 auto;
  justify-self: center;
  align-self: start;
}

/* Standalone Games-Portal auf der Projektseite (Nur die reine SVG, kein Polaroid, kein Papier) */
.games-portal-standalone {
  width: 100%;
  max-width: 360px;
  height: 440px;
  margin: 0 auto;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}

.games-portal-standalone:hover {
  transform: scale(1.08);
}

.games-portal-standalone:active {
  transform: scale(0.96);
}

.games-portal-svg-wrap {
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.games-portal-svg-img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  display: block;
  box-shadow: none !important;
  filter: none !important;
}

.polaroid-project-wrapper:hover {
  z-index: 10;
}

.polaroid-project-wrapper.note-active {
  z-index: 25;
}

/* Der bunte Notizzettel, der standardmaessig UNTER dem Polaroid/Dia liegt */
.note-sheet-underlay {
  position: absolute;
  top: -14px;
  left: var(--note-left, -14px);
  right: var(--note-right, -24px);
  bottom: -28px;
  border: 2px solid #000000;
  box-shadow: var(--note-shadow, 4px 4px 7px rgba(0, 0, 0, 0.2));
  z-index: 1;
  transform: rotate(var(--note-rot, 3.2deg));
  transform-origin: center center;
  display: flex;
  align-items: flex-end;
  justify-content: var(--note-tab-align, flex-end);
  padding: 8px 18px;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
  overflow: visible;
  box-sizing: border-box;
}

/* Hover im normalen Zustand */
.polaroid-project-wrapper:not(.note-active):hover .note-sheet-underlay {
  transform: rotate(calc(var(--note-rot, 3.2deg) + 0.8deg)) translate(3px, 3px);
  box-shadow: var(--note-shadow-hover, 5px 6px 10px rgba(0, 0, 0, 0.25));
}

.polaroid-project-wrapper:not(.note-active):hover .polaroid-card {
  transform: rotate(calc(var(--card-rot, 0deg) - 0.4deg)) translate(-2px, -2px);
  box-shadow: var(--card-shadow-hover, 5px 6px 11px rgba(0, 0, 0, 0.27));
}

.note-sheet-peek-tab {
  display: block;
}

.note-sheet-tab-text {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: #000000;
  font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
}

.polaroid-project-wrapper .polaroid-card {
  position: relative;
  z-index: 2;
  margin: 0;
  height: 440px;
  box-sizing: border-box;
  transform: rotate(var(--card-rot, 0deg));
  box-shadow: var(--card-shadow, 4px 4px 8px rgba(0, 0, 0, 0.22));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
}

/* Der Inhaltsbereich auf dem Notizzettel (im normalen Zustand verborgen) */
.note-sheet-front-content {
  display: none;
  width: 100%;
  height: 100%;
  padding: 22px 18px;
  box-sizing: border-box;
  flex-direction: column;
  overflow-y: auto;
}

/* ==========================================================================
   1. POLAROID AKTIV (Polaroid liegt oben)
   ========================================================================== */
.polaroid-project-wrapper.polaroid-active .polaroid-card {
  display: flex;
  position: relative;
  z-index: 4;
  width: 100%;
  height: 440px;
  transform: rotate(var(--card-rot, 0deg));
  box-shadow: var(--card-shadow, 4px 4px 8px rgba(0, 0, 0, 0.22));
}

.polaroid-project-wrapper.polaroid-active .dia-card,
.polaroid-project-wrapper.polaroid-active .filmstrip-card {
  display: none;
}

/* ==========================================================================
   2. DIA AKTIV (Dia liegt oben)
   - Wenn Polaroid im Stack ist: Polaroid agiert wie Notizzettel, liegt dahinter
   - Wenn nur Dias im Stack: Polaroid existiert nicht, Dia ist 1:1 zentriert!
   ========================================================================== */
.polaroid-project-wrapper.dia-active .filmstrip-card {
  display: none;
}

/* ==========================================================================
   2B. FILMSTRIP AKTIV (35mm Film liegt oben)
   - Gibt genau wie das Polaroid 440px Höhe vor
   - Notizzettel liegt bündig dahinter im Stack
   ========================================================================== */
.polaroid-project-wrapper.filmstrip-active .filmstrip-card {
  display: flex;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 440px;
  transform: rotate(var(--card-rot, 0deg));
}

.polaroid-project-wrapper.filmstrip-active .polaroid-card,
.polaroid-project-wrapper.filmstrip-active .dia-card {
  display: none;
}

.polaroid-project-wrapper.dia-active .dia-card {
  display: flex;
  position: relative;
  z-index: 5;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: rotate(var(--card-rot, 0deg));
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1.5px 3px rgba(0, 0, 0, 0.16),
    var(--card-shadow, 4px 4px 8px rgba(0, 0, 0, 0.22));
}

/* Das Polaroid liegt als Underlay sichtbar hinter dem Dia */
.polaroid-project-wrapper.has-polaroid-stack.dia-active .polaroid-card {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 440px;
  z-index: 2;
  transform: rotate(var(--polaroid-underlay-rot, 2.5deg)) translate(4px, 10px);
  box-shadow: var(--card-shadow, 4px 4px 8px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

/* Der bunte Notizzettel liegt hinter dem Polaroid */
.polaroid-project-wrapper.has-polaroid-stack.dia-active .note-sheet-underlay {
  z-index: 1;
  pointer-events: none;
  transform: rotate(var(--note-rot, -3deg)) translate(-3px, 4px);
  box-shadow: var(--note-shadow, 4px 4px 7px rgba(0, 0, 0, 0.2));
}

/* Hover bei Dia-Active mit Polaroid-Underlay */
.polaroid-project-wrapper.has-polaroid-stack.dia-active:not(.note-active):hover .polaroid-card {
  transform: rotate(calc(var(--polaroid-underlay-rot, 2.5deg) + 0.6deg)) translate(6px, 12px);
  box-shadow: var(--card-shadow-hover, 5px 6px 11px rgba(0, 0, 0, 0.25));
}

/* Fall B: Nur Dias (kein Polaroid vorhanden) */
.polaroid-project-wrapper.dia-only-stack .polaroid-card {
  display: none !important;
}

/* ==========================================================================
   3. NOTE AKTIV (Notizzettel liegt oben und verdeckt Fotos)
   ========================================================================== */
.polaroid-project-wrapper.note-active .note-sheet-underlay {
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  transform: rotate(var(--note-front-rot, 0.8deg)) scale(1.01);
  box-shadow: var(--note-shadow, 5px 5px 10px rgba(0, 0, 0, 0.25));
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.polaroid-project-wrapper.note-active:hover .note-sheet-underlay {
  transform: rotate(calc(var(--note-front-rot, 0.8deg) + 0.4deg)) scale(1.02);
  box-shadow: var(--note-shadow-hover, 6px 7px 12px rgba(0, 0, 0, 0.3));
}

.polaroid-project-wrapper.note-active .note-sheet-peek-tab {
  display: none;
}

.polaroid-project-wrapper.note-active .note-sheet-front-content {
  display: flex;
  opacity: 1;
  user-select: none;
  cursor: pointer;
}

/* Verdeckte Fotos hinter der Notiz */
.polaroid-project-wrapper.note-active .polaroid-card {
  z-index: 1;
  transform: rotate(var(--card-underlay-rot, -3.2deg)) scale(0.96) translate(-6px, 6px);
  box-shadow: var(--card-shadow, 3px 4px 7px rgba(0, 0, 0, 0.18));
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 440px;
}

.polaroid-project-wrapper.has-filmstrip-stack.note-active .polaroid-card,
.polaroid-project-wrapper.dia-only-stack.note-active .polaroid-card,
.polaroid-project-wrapper.note-active[data-note-underlay="filmstrip"] .polaroid-card,
.polaroid-project-wrapper.note-active[data-note-underlay="dia"] .polaroid-card {
  display: none;
}

.polaroid-project-wrapper.note-active .dia-card {
  z-index: 1;
  transform: rotate(var(--card-underlay-rot, -3.2deg)) scale(0.96) translate(-6px, 6px);
  box-shadow: var(--card-shadow, 3px 4px 7px rgba(0, 0, 0, 0.18));
  display: none;
}

.polaroid-project-wrapper.dia-only-stack.note-active .dia-card,
.polaroid-project-wrapper.note-active[data-note-underlay="dia"] .dia-card {
  display: flex;
}

/* Typografie im Notizzettel wenn vorne */
.note-front-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000000;
  padding-bottom: 6px;
  margin-bottom: 14px;
}

.note-front-tag,
.note-front-date {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: #000000;
}

/* Handschrift schmal / dünn für den Notiztext */
.note-front-desc {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #000000;
  margin: 0;
  letter-spacing: 0.01em;
  word-break: break-word;
}

/* Animation beim Wechsel zwischen zwei Polaroids im Stack */
@keyframes cardShuffle {
  0% {
    transform: rotate(var(--card-rot, 0deg)) translate(0, 0);
  }

  35% {
    transform: rotate(calc(var(--card-rot, 0deg) + 3deg)) translate(14px, -10px);
  }

  100% {
    transform: rotate(var(--card-rot, 0deg)) translate(0, 0);
  }
}

.polaroid-card.card-shuffling {
  animation: cardShuffle 0.28s ease-out;
}

.polaroid-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 295px;
  background: #151515;
  overflow: hidden;
  border: 1px solid #000000;
  flex: 0 0 auto;
  margin: 0 auto;
}

.polaroid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.polaroid-caption {
  margin-top: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
}

/* KREPPBAND / KLEBEBAND OPTIK FUER POLAROIDS (IMG_0543 / WUNSCH) */
.polaroid-tape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  box-sizing: border-box;
  max-width: 96%;
  padding: 0 14px;
  margin: 2px auto 4px auto;
  background: linear-gradient(180deg, #faf7ec 0%, #ede7d3 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  transform: rotate(var(--tape-rot, -0.9deg));
  overflow: hidden;
  /* Unregelmaessige abgerissene Enden links und rechts */
  clip-path: polygon(0% 0%,
      4px 15%,
      0% 30%,
      5px 45%,
      0% 60%,
      4px 75%,
      0% 90%,
      3px 100%,
      100% 100%,
      calc(100% - 4px) 85%,
      100% 70%,
      calc(100% - 5px) 55%,
      100% 40%,
      calc(100% - 4px) 25%,
      100% 10%,
      calc(100% - 3px) 0%);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.polaroid-tape .polaroid-title {
  font-family: var(--font-hand);
  font-weight: 400;
  /* Regular / schmal */
  font-size: 1.35rem;
  line-height: 1;
  color: #000000;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: clip;
  transition: font-size 0.15s ease, letter-spacing 0.15s ease;
}

.polaroid-title {
  font-family: var(--font-hand);
  font-weight: 400;
  /* Regular */
  font-size: 1.35rem;
  line-height: 1.2;
}

.polaroid-meta {
  font-family: var(--font-typewriter);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin-top: 2px;
  line-height: 1.2;
}


/* ==========================================================================
   35MM DIA-RAHMEN (SLIDE MOUNT NACH VORLAGE DIA_VORLAGE.HEIC)
   ========================================================================== */

.dia-card {
  position: relative;
  z-index: 2;
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Echtes 50x50mm Dia-Format: bleibt immer quadratisch und verzerrt nicht */
  height: auto;
  box-sizing: border-box;
  background-color: #eae5cb;
  background-image:
    linear-gradient(175deg, #f4efdc 0%, #f4efdc 35%, #f4efdc 100%),
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
  border: 1.5px solid #000000;
  border-radius: 6px;
  /* Recht eckiger Look nach echter Spritzguss-Vorlage */
  transform: rotate(var(--card-rot, 0deg));
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1.5px 3px rgba(0, 0, 0, 0.16),
    var(--card-shadow, 4px 4px 8px rgba(0, 0, 0, 0.22));
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  /* Abstände zwischen Header, Foto und Footer sind immer exakt gleich */
  cursor: pointer;
  user-select: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
}

.dia-card.card-shuffling {
  animation: cardShuffle 0.28s ease-out;
}

/* Hover im normalen Zustand */
.polaroid-project-wrapper:not(.note-active):hover .dia-card {
  transform: rotate(calc(var(--card-rot, 0deg) - 0.4deg)) translate(-2px, -2px);
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1.5px 3px rgba(0, 0, 0, 0.16),
    var(--card-shadow-hover, 5px 6px 11px rgba(0, 0, 0, 0.27));
}

/* Wenn Note Sheet aktiv ist */
.polaroid-project-wrapper.has-polaroid-stack.note-active .dia-card {
  display: none;
}

.polaroid-project-wrapper.dia-only-stack.note-active .dia-card {
  z-index: 1;
  transform: rotate(var(--card-underlay-rot, -3.2deg)) scale(0.96) translate(-6px, 6px);
  box-shadow: var(--card-shadow, 3px 4px 7px rgba(0, 0, 0, 0.18));
  display: flex;
}

/* 1. OBERER BEREICH: Passlöcher & Beschriftungsfeld */
.dia-header {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

/* Die beiden runden Löcher oben links und rechts */
.dia-pinhole {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #181714;

  flex-shrink: 0;
}

/* Vertieftes Beschriftungsfeld oben (optional handschriftlicher Text) */
.dia-label-slot {
  flex: 1;
  margin: 0 10px;
  height: 28px;
  background: rgba(0, 0, 0, 0.035);
  border-top: 1.5px solid rgba(0, 0, 0, 0.26);
  border-left: 1.5px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.75);
  border-right: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  box-sizing: border-box;
}

.dia-label-text {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 1.05rem;
  color: #111111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* 2. MITTLERER BEREICH: 35mm Filmausschnitt im Querformat */
/* Bild füllt das gesamte Frame aus, Ecken dürfen abgeschnitten sein */
.dia-film-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  /* 35mm Kleinbild-Standard */
  box-sizing: border-box;
  border-radius: 5px;
  /* Subtil abgerundete Ecken des Rahmens */
  overflow: hidden;
  /* Ecken des Bildes werden passgenau abgeschnitten */
  background: #000000;
  border: 1.5px solid rgba(0, 0, 0, 0.85);

  display: flex;
  margin: 0;
  padding: 0;
  /* Randlos ausfüllen */
}

.dia-photo-window {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
}

.dia-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Füllt das gesamte Frame randlos aus */
  display: block;
  filter: contrast(1.04) saturate(1.03);
}

/* 3. UNTERER BEREICH: MESOKARP Relief-Schrift & Griffmulden */
.dia-footer {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* Die beiden quadratischen Griffmulden links und rechts */
.dia-grip-recess {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  /* Recht eckiger */
  background: rgba(0, 0, 0, 0.038);
  border-top: 1.5px solid rgba(0, 0, 0, 0.22);
  border-left: 1.5px solid rgba(0, 0, 0, 0.18);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.7);
  border-right: 1.5px solid rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

/* Das mittige Relief-Schild für MESOKARP */
.dia-logo-plate {
  flex: 1;
  height: 32px;
  border-radius: 5px;
  /* Recht eckiger */
  background: rgba(0, 0, 0, 0.035);
  border-top: 1.5px solid rgba(0, 0, 0, 0.24);
  border-left: 1.5px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.75);
  border-right: 1.5px solid rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 4px;
}

/* MESOKARP Relief-Schrift im exakten Stil von LIFACOLOR */
.dia-logo-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(0.8rem, 2.8vw, 1.05rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dfd8b7;
  text-shadow:
    -1px -1px 1px rgba(0, 0, 0, 0.55),
    1px 1px 1px rgba(255, 255, 255, 0.95);
  user-select: none;
  display: inline-block;
  line-height: 1;
  margin-left: 0.16em;
}

/* Der kleine schwarze Verschluss-Clip an der Unterkante */
.dia-bottom-clip {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 5px;
  background: #141414;
  border-radius: 2px 2px 0px 0px;
}

/* ==========================================================================
   35MM FILMSTREIFEN (HOCHFORMAT-CELLULOID MIT VIDEO- & FOTO-PLAYBACK)
   - Exakte 440px Höhe passend zum Notizzettel-Stack
   - Scharfe Kommunikation: Integrierte Celluloid-Titelzeile mit Typennummer
   - Autoplay-fähiges Video-Playback & Single-Frame-Fokus
   - Unterstützt 90°-Drehung durch den Admin (.horizontal)
   ========================================================================== */
.filmstrip-card {
  position: relative;
  z-index: 2;
  margin: 0;
  width: 100%;
  height: 440px;
  box-sizing: border-box;
  transform: rotate(var(--card-rot, 0deg));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  user-select: none;
  display: flex;
  flex-direction: column;
}

.filmstrip-card.card-shuffling {
  animation: cardShuffle 0.28s ease-out;
}

.polaroid-project-wrapper:not(.note-active):hover .filmstrip-card {
  transform: rotate(calc(var(--card-rot, 0deg) - 0.4deg)) translate(-2px, -2px);
  box-shadow: var(--card-shadow-hover, 5px 6px 11px rgba(0, 0, 0, 0.27));
}

/* Der Celluloid-Filmstreifen */
.filmstrip-strip {
  background: #110f0c;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%, rgba(255, 140, 0, 0.05) 100%);
  border: 1.5px solid #000000;
  border-radius: 4px;
  box-shadow:
    inset 0 0 8px rgba(255, 140, 0, 0.14),
    var(--card-shadow, 4px 6px 14px rgba(0, 0, 0, 0.28));
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Linke & rechte Perforationsleisten (Hochformat / Standard) */
.filmstrip-sprockets {
  width: 24px;
  height: 100%;
  background: #181512;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.sprockets-left {
  border-right: 1px solid rgba(0, 0, 0, 0.7);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.sprockets-right {
  border-left: 1px solid rgba(0, 0, 0, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sprocket-holes-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  padding: 4px 0;
}

.sprocket-hole {
  width: 7px;
  height: 11px;
  border-radius: 2px;
  background: #fdfaf2;
  border: 1px solid #000;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  flex-shrink: 0;
}

.film-edge-text {
  font-family: var(--font-typewriter);
  font-size: 0.60rem;
  font-weight: 700;
  color: #ff9922;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.9;
  white-space: nowrap;
  user-select: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 6px 0;
}

/* Zentraler Filmbereich (Kader + Beschriftungsleiste) */
.filmstrip-center-area {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #0a0806;
  box-sizing: border-box;
  min-width: 0;
}

.filmstrip-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filmstrip-frame img,
.filmstrip-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(1.04);
  transition: transform 0.35s ease;
}

.filmstrip-card:hover .filmstrip-frame img,
.filmstrip-card:hover .filmstrip-frame video {
  transform: scale(1.025);
}

.filmstrip-frame-overlay {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--font-typewriter);
  font-size: 0.60rem;
  color: #ffaa33;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.72);
  padding: 1px 5px;
  border-radius: 2px;
  border: 0.5px solid rgba(255, 170, 51, 0.35);
  letter-spacing: 0.5px;
}

.filmstrip-video-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--font-typewriter);
  font-size: 0.58rem;
  color: #ff4444;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.75);
  padding: 2px 5px;
  border-radius: 2px;
  border: 0.5px solid rgba(255, 68, 68, 0.4);
  display: flex;
  align-items: center;
  gap: 3px;
}

.filmstrip-video-badge::before {
  content: "●";
  color: #ff3333;
  font-size: 0.65rem;
  animation: pulseRec 1.5s infinite;
}

/* ==========================================================================
   HORIZONTALER MODUS (Wenn vom Admin um 90° rotiert)
   ========================================================================== */
.filmstrip-card.horizontal .filmstrip-strip {
  flex-direction: column;
}

.filmstrip-card.horizontal .filmstrip-sprockets {
  width: 100%;
  height: 22px;
  flex-direction: row;
  padding: 0 12px;
}

.filmstrip-card.horizontal .sprockets-left {
  border-right: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.filmstrip-card.horizontal .sprockets-right {
  border-left: none;
  border-top: 1px solid rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filmstrip-card.horizontal .sprocket-holes-col {
  flex-direction: row;
  gap: 16px;
  padding: 0;
}

.filmstrip-card.horizontal .film-edge-text {
  writing-mode: horizontal-tb;
  transform: none;
  margin: 0;
}

.filmstrip-card.horizontal .filmstrip-center-area {
  padding: 8px 10px;
}


.polaroid-project-wrapper.note-active .filmstrip-card {
  z-index: 1;
  transform: rotate(var(--card-underlay-rot, -3.2deg)) scale(0.96) translate(-6px, 6px);
  box-shadow: var(--card-shadow, 3px 4px 7px rgba(0, 0, 0, 0.18));
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 440px;
}

.polaroid-project-wrapper.has-filmstrip-stack.note-active .filmstrip-card,
.polaroid-project-wrapper.note-active[data-note-underlay="filmstrip"] .filmstrip-card {
  display: flex;
}

/* ==========================================================================
   PRODUKT EINZELSEITE (IMG_0542 - VOLLE SEITE STATT OVERLAY)
   ========================================================================== */

.product-page-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}

@media (max-width: 820px) {
  .product-page-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.big-polaroid {
  background-color: #faf8f5;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(247, 244, 238, 0.95) 100%), url('../assets/textures/paper-white.jpg');
  background-size: cover, 300px 300px;
  border: 1.5px solid #000000;
  padding: 18px 18px 44px 18px;
  box-shadow: none !important;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .big-polaroid {
    padding: 12px 12px 28px 12px;
  }
}

.big-polaroid-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border: 1.5px solid #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

.big-polaroid-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 24px;
  display: block;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  opacity: 0.85;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s ease;
}

.gallery-nav-btn:hover {
  transform: translateY(-50%) scale(1.22);
  opacity: 1;
}

.gallery-nav-btn:active {
  transform: translateY(-50%) scale(1.08);
}

.gallery-nav-btn.left {
  left: 8px;
}

.gallery-nav-btn.right {
  right: 8px;
}

.gallery-nav-icon {
  width: 44px;
  height: 44px;
  display: block;
  pointer-events: none;
}

.big-polaroid-info-tag {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  margin-top: 16px;
  text-align: center;
}

.product-detail-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.product-detail-title {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1.1;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 600px) {
  .product-detail-title {
    font-size: 2.2rem;
    line-height: 1.15;
  }
}

.product-detail-desc {
  font-family: var(--font-typewriter);
  font-size: 1.05rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.options-group {
  margin-top: 6px;
}

.options-label {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  margin-bottom: 8px;
  display: block;
}

.options-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.option-pill-btn {
  background: #ffffff;
  border: 2px solid #000000;
  padding: 8px 16px;
  font-family: var(--font-typewriter);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.option-pill-btn.active {
  background: var(--color-yellow);
}

.donation-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.donation-input {
  width: 120px;
  padding: 8px 12px;
  border: 2px solid #000000;
  font-size: 1.1rem;
  font-weight: 700;
  background: #ffffff;
}

.purchase-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.quantity-stepper {
  display: flex;
  align-items: center;
  border: 2px solid #000000;
  background: #ffffff;
}

.quantity-btn {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  font-weight: 700;
  width: 38px;
  height: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-display {
  font-size: 1.1rem;
  font-weight: 700;
  width: 44px;
  text-align: center;
}

#product-quantity-stepper[style*="display: none"],
body.is-digital-product #product-quantity-stepper,
body.is-digital-product .quantity-stepper,
.is-digital-product .quantity-stepper,
.purchase-row.is-digital .quantity-stepper,
#product-purchase-row.is-digital #product-quantity-stepper {
  display: none !important;
}

/* Payment Badges unter Kassenbeleg-Button */
.cart-payment-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 4px 0 4px;
}

.payment-badge {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #333333;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 3px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

/* Lizenz-Checkpoints */
.license-checkpoints {
  margin-top: 8px;
  margin-bottom: 6px;
  font-family: var(--font-typewriter);
  font-size: 0.82rem;
  line-height: 1.5;
  color: #111111;
}

.license-checkpoint-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
}

.license-checkpoint-icon {
  font-weight: 900;
  color: #15803d;
  line-height: 1.4;
}

/* Reassurance Note for Digital Downloads */
.digital-safety-note {
  font-family: var(--font-typewriter);
  font-size: 0.78rem;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 6px 10px;
  margin-top: 10px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   FONT-TESTER (SCHLANK, OHNE SCHIEBEREGLER/FARBPUNKTE)
   ========================================================================== */

.font-tester-card {
  background: #ffffff;
  border: 2px solid #000000;
  box-shadow: none !important;
  padding: 24px;
  margin-bottom: 40px;
}

.font-tester-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  border-bottom: 2px solid #000000;
  padding-bottom: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.font-toggle-group {
  display: flex;
  gap: 10px;
}

.font-toggle-btn {
  background: #ffffff;
  border: 2px solid #000000;
  box-shadow: none !important;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.font-toggle-btn.active {
  background: var(--color-turquoise);
}

.font-tester-textarea {
  width: 100%;
  min-height: 110px;
  padding: 16px;
  border: 1.5px solid #000000;
  background-color: #ffffff;
  font-size: 1.8rem;
  line-height: 1.4;
  resize: vertical;
  color: #000000;
  outline: none;
}

/* ==========================================================================
   FARBIGE KÄSTEN & ATELIER-PINNWAND (IDEEN-SEKTION)
   Quadratische Sticky Notes (#F06043, #F0C243, #43F0C5, #6DE878)
   Frei beweglich, strikt OHNE Weichzeichner- oder Schlagschatten
   ========================================================================== */

/* Ideen Pinnwand / Seiten-Kopfzeile */
.ideas-page-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
}

.ideas-page-info {
  flex: 1;
  min-width: 260px;
}

.ideas-page-kicker {
  display: block;
  font-family: var(--font-typewriter);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555555;
  margin-bottom: 6px;
}

.ideas-page-title {
  font-family: var(--font-hand);
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.1;
  color: #000000;
}

.ideas-page-subtitle {
  font-family: var(--font-typewriter);
  font-size: 0.95rem;
  color: #333333;
  max-width: 680px;
  margin: 0;
  line-height: 1.5;
}

.btn-reorder-notes {
  font-family: var(--font-typewriter);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
  border: 2px solid #000000;
  background: #ffffff;
  color: #000000;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn-reorder-notes:hover {
  background: #000000;
  color: #ffffff;
}

/* Gesamte Seite als Canvas: kein begrenzender Kastenrahmen, vollkommen frei */
.ideas-main-area {
  position: relative;
  min-height: 90vh;
  margin-bottom: 120px;
}

.ideas-board {
  position: relative;
  width: 100%;
  min-height: 900px;
  border: none;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

/* Quadratische Sticky Notes */
.sticky-note {
  position: absolute;
  width: 280px;
  height: 280px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 2px solid #000000;
  box-shadow: none !important;
  filter: none !important;
  padding: 22px 20px 14px 20px;
  display: flex;
  flex-direction: column;
  cursor: grab;
  touch-action: none;
  z-index: 1;
  transition: transform 0.15s ease;
}

.sticky-note.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
  z-index: 999 !important;
  transform: scale(1.02);
}

/* Kopfzeile der Notiz */
.sticky-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  width: 100%;
}

.sticky-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1.5px solid #000000;
  background: #ffffff;
  font-family: var(--font-typewriter);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #000000;
  box-shadow: none !important;
}

.sticky-date {
  font-family: var(--font-typewriter);
  font-size: 0.78rem;
  font-weight: 600;
  color: #222222;
  opacity: 0.85;
}

/* Handschrift-Titel */
.sticky-title {
  font-family: var(--font-hand);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 8px 0;
  color: #000000;
  word-break: break-word;
  pointer-events: none;
}

/* Schreibmaschinen-Beschreibung */
.sticky-desc {
  font-family: var(--font-typewriter);
  font-size: 0.88rem;
  line-height: 1.45;
  color: #111111;
  margin: 0;
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  pointer-events: auto;
}

.sticky-desc::-webkit-scrollbar {
  width: 4px;
}

.sticky-desc::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
}

/* Mobile Responsivität */
@media (max-width: 680px) {
  .ideas-board {
    min-height: 700px;
    padding: 14px;
  }

  .sticky-note {
    width: 240px;
    height: 240px;
    padding: 18px 14px 10px 14px;
  }

  .sticky-title {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  .sticky-desc {
    font-size: 0.82rem;
    line-height: 1.38;
  }

  .ideas-board-title {
    font-size: 2.2rem;
  }
}

/* Hinweis: Die aktive "Über mich"-Seite wird im Brief- & Stempel-Layout in Sektion 4 gestylt (.about-letter-sheet) */



.studio-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.studio-modal-overlay.active {
  display: flex;
}

.studio-modal-card {
  background: #ffffff;
  border: 2px solid #000000;
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  font-family: var(--font-admin) !important;
}

.studio-modal-card * {
  font-family: var(--font-admin) !important;
}

.studio-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.studio-subtitle {
  font-size: 0.88rem;
  color: #555;
  margin-bottom: 20px;
}

.studio-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input,
.form-select,
.form-textarea {
  padding: 8px 12px;
  border: 1px solid #000000;
  font-size: 0.95rem;
  background: #ffffff;
  outline: none;
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
}

.file-dropzone {
  border: 1px dashed #000000;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background: #f9f9f9;
  font-size: 0.85rem;
}

.btn-close-modal {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #ffffff;
  border: 1.5px solid #000000;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* ==========================================================================
   WARENKORB DRAWER
   ========================================================================== */

.cart-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* Kein Blur */
  z-index: 1500;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
}

.cart-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  background: #faf8f5;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(247, 244, 238, 0.96) 100%), url('../assets/textures/paper-white.jpg');
  background-size: cover, 250px 250px;
  border-left: 2px solid #000000;
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 440px;
  height: 100%;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.cart-receipt-header {
  display: flex;
  flex-direction: column;
  border-bottom: 1.5px solid #000000;
  padding-bottom: 10px;
}

.cart-receipt-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #c4b595;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.cart-receipt-atelier-tag {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555555;
  font-weight: 700;
}

.cart-receipt-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.cart-title {
  font-family: var(--font-hand);
  font-size: 2.2rem;
  line-height: 1;
}

.cart-receipt-count {
  font-family: var(--font-typewriter);
  font-size: 0.76rem;
  font-weight: 700;
  color: #555555;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.cart-items-list {
  flex: 1;
  overflow-y: auto;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.cart-receipt-item {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 8px 10px;
  border-radius: 2px;
  transition: background 0.15s ease;
}

.cart-receipt-item:hover {
  background: rgba(255, 255, 255, 0.92);
}

.cart-receipt-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.cart-receipt-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.cart-receipt-controls.is-digital {
  background: transparent;
  border: none;
  padding: 0;
}

.cart-qty-btn {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  font-family: var(--font-typewriter);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  padding: 0;
  color: #000000;
  transition: all 0.1s;
}

.cart-qty-btn:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

.cart-qty-val {
  min-width: 16px;
  text-align: center;
  font-family: var(--font-typewriter);
  font-size: 0.78rem;
  font-weight: 700;
  color: #111111;
  user-select: none;
}

.cart-receipt-remove-btn {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 2px 3px;
  opacity: 0.4;
  transition: all 0.15s;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-receipt-remove-btn:hover {
  opacity: 1;
  background: #fee2e2;
  border-color: #ef4444;
}

.cart-footer {
  border-top: 1.5px dashed #c4b595;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-receipt-breakdown {
  margin-bottom: 2px;
}

.cart-receipt-empty {
  text-align: center;
  padding: 40px 16px;
}

.cart-receipt-empty-code {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #888888;
  margin-bottom: 6px;
}

@media (max-width: 480px) {
  .cart-drawer {
    max-width: 100%;
    padding: 18px 16px;
  }
}

/* ==========================================================================
   FOOTER (GROSSES BOLD MESOKARP & RECHTLICHES IN TIMES NEW ROMAN)
   ========================================================================== */

.site-footer {
  margin-top: 36px;
  padding: 20px 0 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.footer-brand {
  font-family: var(--font-brand-bold);
  font-weight: 700;
  font-size: 3.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000000;
  line-height: 1;
  user-select: none;
  display: block;
}

.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.footer-link-legal {
  font-family: var(--font-legal);
  font-size: 1.05rem;
  text-decoration: underline;
  cursor: pointer;
  color: #000000;
}

.btn-footer-widerruf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #FF7E00;
  color: #000000 !important;
  font-family: var(--font-legal);
  font-size: 0.98rem;
  font-weight: 700;
  padding: 5px 14px;
  border: 1.5px solid #000000;
  box-shadow: 2px 2px 0px #000000;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.3;
}

.btn-footer-widerruf:hover {
  background-color: #ff9326;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #000000;
}

.btn-footer-widerruf:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #000000;
}

@media (max-width: 600px) {
  .polaroid-grid {
    grid-template-columns: 1fr;
    gap: 64px 20px;
  }

  .polaroid-card {
    height: 420px;
  }
}

/* Hinweis: Der aktive Shop wird über .atelier-shop-grid und .atelier-product-card in Sektion 2 gestylt */

/* ==========================================================================
   SEKTION AUSSER BETRIEB - BANNER (GROSS, ROT, WEISSE FETTE HANDSCHRIFT)
   ========================================================================== */
.section-out-of-order-banner {
  background-color: #d32f2f;
  color: #ffffff;
  border: 3px solid #000000;
  margin: 36px auto 72px auto;
  max-width: 920px;
  padding: 56px 24px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.out-of-order-badge {
  font-family: var(--font-brand-bold), var(--font-hand);
  font-weight: 900;
  font-size: clamp(3.2rem, 8vw, 6.2rem);
  color: #ffffff;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 22px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

.out-of-order-desc {
  font-family: var(--font-typewriter);
  font-size: 1.15rem;
  color: #ffffff;
  max-width: 620px;
  margin: 0 auto 32px auto;
  line-height: 1.5;
}

.out-of-order-back-btn {
  display: inline-block;
  background: #ffffff;
  color: #000000;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 24px;
  border: 2px solid #000000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.15s ease, color 0.15s ease;
  border-radius: 0px;
}

.out-of-order-back-btn:hover {
  background: #000000;
  color: #ffffff;
}

/* Navigations-Sektionen Verstecken wenn deaktiviert */
.nav-section-hidden {
  display: none !important;
}


/* ==========================================================================
   RECHTSKONFORMER CHECKOUT & ABMAHNSCHUTZ (§ 312j BGB / PAngV)
   ========================================================================== */

.checkout-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.checkout-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.checkout-modal-card {
  background: #ffffff;
  border: 2px solid #000000;
  max-width: 980px;
  width: 100%;
  max-height: 94vh;
  overflow-y: auto;
  padding: 24px 28px;
  position: relative;
  font-family: var(--font-admin), 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  box-sizing: border-box;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}

.checkout-modal-card * {
  font-family: inherit;
  box-sizing: border-box;
}

/* Modal Header */
.checkout-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1.5px solid #000000;
}

.checkout-title {
  font-size: 1.35rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 3px 0;
  letter-spacing: 0.05em;
  color: #000000;
}

.checkout-steps-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.checkout-steps-badge span.active {
  color: #000000;
  font-weight: 800;
}

.btn-close-checkout-modal {
  background: none;
  border: 1.5px solid transparent;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1;
  color: #000000;
  transition: all 0.15s ease;
  border-radius: 2px;
}

.btn-close-checkout-modal:hover {
  border-color: #000000;
  background: #f0f0f0;
}

/* 2-Spaltiges Checkout Layout */
.checkout-modal-body-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 860px) {
  .checkout-modal-body-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Linke Spalte: Formular & Zahlungsart */
.checkout-main-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-section-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #f5f5f5;
  padding: 6px 10px;
  border-left: 3px solid #000000;
  margin: 0 0 10px 0;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout-section-title small {
  font-weight: 400;
  font-size: 0.72rem;
  color: #666;
}

.checkout-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.checkout-grid-3 {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
}

.form-group-compact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.checkout-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #333333;
}

.checkout-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #d0d0d0;
  font-size: 0.88rem;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  border-radius: 2px;
}

.checkout-input:focus {
  border-color: #000000;
  box-shadow: 0 0 0 1px #000000;
}

/* Zahlungsarten Auswahlliste */
.checkout-payment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-payment-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #d6d6d6;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 3px;
}

.checkout-payment-card:hover {
  border-color: #000000;
  background: #fafafa;
}

.checkout-payment-card.active,
.checkout-payment-card:has(input[type="radio"]:checked) {
  border-color: #000000;
  background: #fdfbf7;
  box-shadow: inset 0 0 0 1px #000000;
}

.checkout-payment-card input[type="radio"] {
  accent-color: #000000;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.checkout-payment-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.checkout-payment-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #000000;
}

.checkout-payment-badge {
  font-size: 0.72rem;
  color: #854d0e;
  font-weight: 700;
}

.checkout-payment-hint {
  font-size: 0.72rem;
  color: #666666;
}

/* Rechte Spalte: Bestellübersicht & Kaufen-Button */
.checkout-sidebar-col {
  position: sticky;
  top: 0;
}

.checkout-summary-card {
  background: #faf8f5;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(247, 244, 238, 0.95) 100%), url('../assets/textures/paper-white.jpg');
  background-size: cover, 250px 250px;
  border: 1.5px solid #000000;
  padding: 18px 20px;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.08);
}

.checkout-summary-title {
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkout-items-mini-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 14px;
}

.checkout-item-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.checkout-item-mini:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.checkout-item-mini-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid #000000;
  background: #ffffff;
  flex-shrink: 0;
}

.checkout-item-mini-info {
  flex: 1;
  min-width: 0;
}

.checkout-item-mini-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkout-item-mini-meta {
  font-size: 0.72rem;
  color: #666666;
}

.checkout-item-mini-price {
  font-size: 0.85rem;
  font-weight: 800;
  color: #000000;
  white-space: nowrap;
  text-align: right;
}

.legal-delivery-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  font-size: 0.76rem;
  color: #166534;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Preisberechnung Zeilen */
.checkout-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 14px;
}

.checkout-breakdown-table td {
  padding: 4px 0;
}

.checkout-breakdown-table tr.total-row td {
  border-top: 1.5px solid #000000;
  font-size: 1.12rem;
  font-weight: 800;
  padding-top: 10px;
  color: #000000;
}

.legal-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #333333;
}

.legal-checkbox-row a {
  color: #000000;
  text-decoration: underline;
  font-weight: 600;
}

.legal-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #000000;
}

.btn-binding-order {
  width: 100%;
  background: #000000;
  color: #ffffff;
  padding: 13px 18px;
  border: 2px solid #000000;
  font-size: 0.98rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  margin-top: 10px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.btn-binding-order:hover:not(:disabled) {
  background: #222222;
  transform: translateY(-1px);
  box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.25);
}

.btn-binding-order:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.checkout-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.72rem;
  color: #666666;
  text-align: center;
}

.checkout-success-icon {
  width: 60px;
  height: 60px;
  border: 2px solid #237804;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #237804;
  font-weight: 700;
  margin-bottom: 12px;
}

/* PAngV Shop & Product Price Components */
.shop-legal-notice-bar {
  background: #fafafa;
  border: 1.5px solid #000000;
  padding: 10px 16px;
  margin-bottom: 24px;
  font-family: var(--font-typewriter);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #222222;
  box-shadow: none !important;
}

.product-price-block {
  margin: 8px 0 14px 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none !important;
}

.product-detail-price {
  font-family: var(--font-typewriter);
  font-size: 2.2rem;
  font-weight: 800;
  color: #000000;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.product-detail-legal-notes {
  font-size: 0.85rem;
  color: #555555;
  margin-top: 6px;
  line-height: 1.4;
  font-family: var(--font-typewriter);
}

.product-detail-legal-notes a {
  color: #000000;
  text-decoration: underline;
}

.product-delivery-badge {
  display: none !important;
}

/* Produktseite: Schatten sind strikt verboten! */
body[data-page="produkt"] *:not(.lamp-switch-lever):not(.lamp-lit-aura),
.product-page-layout *:not(.lamp-switch-lever):not(.lamp-lit-aura) {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ==========================================================================
   1. DVD-CASE RÜCKEN (SPINE STACK) - OPTIONAL & ADMIN-TOGGELBAR
   ========================================================================== */
.dvd-spines-showcase {
  margin: 36px 0 48px 0;
  padding: 24px;
  background: #ffffff;
  border: 2px solid #000000;
  position: relative;
}

.dvd-spines-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #000000;
  padding-bottom: 12px;
}

.dvd-spines-title {
  font-family: var(--font-typewriter);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dvd-spines-badge {
  background: var(--color-yellow, #F0C243);
  border: 1.5px solid #000000;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

.dvd-spines-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  perspective: 900px;
}

.dvd-spine-row {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  border: 2px solid #000000;
  text-decoration: none;
  color: #000000;
  position: relative;
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.18s ease;
  cursor: pointer;
  overflow: hidden;
}

.dvd-spine-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.dvd-spine-row::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.dvd-spine-row:hover {
  transform: translateX(10px) translateZ(10px);
  box-shadow: 4px 4px 0px #000000;
}

.dvd-spine-icon {
  font-family: var(--font-admin);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1.5px solid #000000;
  background: #ffffff;
  color: #000000;
  margin-right: 16px;
  flex-shrink: 0;
}

.dvd-spine-name {
  font-size: 1.55rem;
  line-height: 1;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.dvd-spine-meta {
  font-family: var(--font-typewriter);
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.85;
  margin-left: 12px;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Spine individuelle Farbvarianten (BUNT, flächig, ohne AI-Gradients) */
.dvd-spine-fontetex {
  background: #F0C243;
}
.dvd-spine-fontetex .dvd-spine-name {
  font-family: var(--font-fontetex);
  font-size: 1.7rem;
}

.dvd-spine-olyida {
  background: #E8E5DC;
  border-left: 12px solid #BA2D0B;
}
.dvd-spine-olyida .dvd-spine-name {
  font-family: var(--font-olyida);
  font-size: 1.35rem;
  font-weight: 700;
}

.dvd-spine-fransa {
  background: #F9806B;
}
.dvd-spine-fransa .dvd-spine-name {
  font-family: var(--font-fransa);
  font-size: 1.7rem;
}

.dvd-spine-muscheln {
  background: #73B5D6;
}
.dvd-spine-muscheln .dvd-spine-name {
  font-family: var(--font-typewriter);
  font-weight: 800;
  font-size: 1.25rem;
}

/* ==========================================================================
   2. MESOKARP SHOP - STRUKTURIERT, KLAR & ÄSTHETISCH
   ========================================================================== */

.atelier-shop-container {
  margin: 16px 0 60px 0;
}

.atelier-shop-header {
  margin-bottom: 24px;
  padding-top: 8px;
}

.atelier-shop-kicker {
  font-family: var(--font-typewriter);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666666;
  margin-bottom: 6px;
}

.atelier-shop-title {
  font-family: var(--font-brand-bold), var(--font-fontetex);
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 10px 0;
  color: #000000;
}

.atelier-shop-sub {
  font-family: var(--font-typewriter);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333333;
  max-width: 680px;
  margin: 0;
}

/* Optional DVD Shelf Dropdown / Container */
.atelier-dvd-shelf-panel {
  margin-bottom: 32px;
  border: 2px solid #000000;
  background: #ffffff;
  padding: 20px;
  display: none;
}

.atelier-dvd-shelf-panel.is-open {
  display: block;
}

/* Shop Catalogue Grid */
.atelier-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  margin-bottom: 56px;
}

@media (max-width: 700px) {
  .atelier-shop-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Unified Product Card */
.atelier-product-card {
  background: #ffffff;
  border: 2px solid #000000;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.atelier-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0px #000000;
}

.atelier-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #faf8f5;
  border-bottom: 2px solid #000000;
  font-family: var(--font-typewriter);
  font-size: 0.78rem;
  font-weight: 700;
}

.atelier-card-badge {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #222222;
}

.atelier-card-price {
  font-weight: 800;
  background: #FFE500;
  color: #000000;
  padding: 3px 8px;
  border: 1px solid #000000;
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.atelier-card-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-bottom: 2px solid #000000;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atelier-card-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.atelier-product-card:hover .atelier-card-visual-img {
  transform: scale(1.03);
}

/* Typo Specimen Poster Art within Visual Box */
.specimen-visual-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 18px 16px 18px;
  box-sizing: border-box;
  text-decoration: none;
  color: #000000;
  position: relative;
  overflow: hidden;
}

/* 1. fontetex: Reines Display-Schrift Poster */
.specimen-fontetex {
  background: #F0C243;
  color: #000000;
}
.specimen-fontetex .specimen-hero {
  font-family: var(--font-fontetex);
  font-size: 3.5rem;
  line-height: 0.92;
  font-weight: 900;
  color: #000000;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.specimen-fontetex .specimen-fontetex-display {
  font-family: var(--font-fontetex);
  font-size: 1.6rem;
  line-height: 1.1;
  color: #000000;
  letter-spacing: 0.05em;
  font-weight: 800;
}
.specimen-fontetex .specimen-sub {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #000000;
  border-top: 1.5px solid #000000;
  padding-top: 6px;
  display: flex;
  justify-content: space-between;
}

/* 2. olyida: Echtes Schreibmaschinen-Blatt */
.specimen-olyida {
  background: #FAF8F2;
  color: #111111;
  border-left: 5px solid #C0392B; /* Mechanische Randlinie */
}
.specimen-olyida .specimen-hero {
  font-family: var(--font-olyida);
  font-size: 2.7rem;
  line-height: 0.95;
  color: #111111;
  font-weight: 700;
  margin-bottom: 8px;
}
.specimen-olyida .specimen-olyida-typed {
  font-family: var(--font-olyida);
  font-size: 0.88rem;
  line-height: 1.45;
  color: #1A1A1A;
  letter-spacing: 0.02em;
}
.specimen-olyida .specimen-sub {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #333333;
  border-top: 1.5px solid #111111;
  padding-top: 6px;
  display: flex;
  justify-content: space-between;
}

/* 3. Fransa: Echte organische Handschrift */
.specimen-fransa {
  background: #FFFDF9;
  color: #111111;
}
.specimen-fransa .specimen-hero {
  font-family: var(--font-fransa);
  font-size: 3.6rem;
  line-height: 0.9;
  font-weight: 700;
  color: #000000;
  margin-bottom: 6px;
}
.specimen-fransa .specimen-fransa-handwritten {
  font-family: var(--font-fransa);
  font-size: 1.65rem;
  line-height: 1.2;
  color: #1A1A1A;
  font-weight: 400;
}
.specimen-fransa .specimen-sub {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #333333;
  border-top: 1.5px solid #000000;
  padding-top: 6px;
  display: flex;
  justify-content: space-between;
}

/* 4. Muscheln: Scharfe, freigestellte Vektoren */
.specimen-muscheln {
  background: #F9FAF8;
  color: #000000;
}
.specimen-muscheln-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  padding: 4px 0;
}
.specimen-shell-center {
  height: 96px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.14));
}
.specimen-shell-row-small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.specimen-shell-mini {
  height: 42px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  opacity: 0.92;
}
.specimen-muscheln .specimen-sub {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #333333;
  border-top: 1.5px solid #000000;
  padding-top: 6px;
  display: flex;
  justify-content: space-between;
}

/* Card Body & Minimaler Titel ohne Buttons */
.atelier-card-body {
  padding: 16px 18px 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.atelier-card-title {
  font-family: var(--font-typewriter);
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000000;
}

.atelier-card-title a {
  text-decoration: none;
  color: #000000;
}

.atelier-card-arrow {
  font-family: var(--font-hand);
  font-size: 1.6rem;
  font-weight: 700;
  color: #000000;
  line-height: 1;
  transition: transform 0.2s ease;
}

.atelier-product-card:hover .atelier-card-arrow {
  transform: translateX(4px);
}

.atelier-card-desc,
.atelier-card-specs,
.atelier-card-actions {
  display: none !important;
}


/* Integrated Lamp Switch in Card */
.atelier-lamp-switch-dock {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 2px solid #000000;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.atelier-lamp-label {
  font-family: var(--font-typewriter);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 6px;
}

.atelier-lamp-pill {
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 6px;
  border: 1px solid #000000;
  background: #eeeeee;
  color: #555555;
  transition: all 0.2s ease;
}

.atelier-lamp-pill.is-on {
  background: #FFD13B;
  color: #000000;
}

/* ==========================================================================
   3. TAKTILER LICHTSCHALTER (LAMPE AN / AUS)
   ========================================================================== */
.lamp-interactive-card {
  position: relative;
  transition: background-color 0.3s ease;
}

.lamp-switch-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 2px solid #000000;
  padding: 8px 14px;
  margin-bottom: 12px;
}

.lamp-switch-label-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lamp-switch-text {
  font-family: var(--font-typewriter);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lamp-indicator-pill {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1.5px solid #000000;
  background: #eeeeee;
  color: #555555;
  transition: all 0.2s ease;
}

.lamp-indicator-pill.is-on {
  background: #FFD13B;
  color: #000000;
}

/* Mechanischer Kippschalter */
.lamp-toggle-switch {
  position: relative;
  width: 58px;
  height: 28px;
  background: #222222;
  border: 2px solid #000000;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px;
  user-select: none;
}

.lamp-toggle-switch .toggle-lever {
  width: 24px;
  height: 20px;
  background: #e0e0e0;
  border: 1.5px solid #000000;
  border-radius: 2px;
  transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1), background-color 0.15s ease;
  transform: translateX(0);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.lamp-toggle-switch.is-active {
  background: #F0C243;
}

.lamp-toggle-switch.is-active .toggle-lever {
  transform: translateX(26px);
  background: #ffffff;
}

/* Warmes Licht-Glühen bei AN */
.lamp-photo-viewport {
  position: relative;
  overflow: hidden;
  border: 2px solid #000000;
  background: #111111;
}

.lamp-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease-in-out;
}

.lamp-lit-aura {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 220, 100, 0.22) 0%, rgba(255, 180, 50, 0.08) 50%, rgba(0,0,0,0) 80%);
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}

.lamp-lit-aura.active {
  opacity: 1;
}

/* ==========================================================================
   4. ÜBER MICH: BRIEF-DOKUMENT MIT ECHTEN CSS- & FONT-STEMPELN
   ========================================================================== */
.about-letter-wrapper {
  max-width: 820px;
  margin: 32px auto 60px auto;
  position: relative;
}

.about-letter-sheet {
  background: #FAF8F3;
  border: 2px solid #000000;
  padding: 56px 64px;
  position: relative;
  box-shadow: 6px 6px 0px #000000;
  overflow: hidden;
}

.about-letter-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 48px;
  bottom: 0;
  width: 1px;
  background: rgba(220, 100, 100, 0.25);
  pointer-events: none;
}

.about-letter-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #000000;
  padding-bottom: 24px;
  margin-bottom: 36px;
  gap: 20px;
}

.about-letter-brand-col h1 {
  font-family: var(--font-fontetex);
  font-size: 2.2rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #000000;
  margin-bottom: 6px;
}

.about-letter-brand-col p {
  font-family: var(--font-typewriter);
  font-size: 0.85rem;
  color: #444444;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.about-letter-meta-col {
  font-family: var(--font-olyida);
  font-size: 0.88rem;
  color: #222222;
  text-align: right;
  line-height: 1.5;
}

.about-letter-content {
  font-family: var(--font-olyida);
  font-size: 1.05rem;
  line-height: 1.7;
  color: #1a1a1a;
  position: relative;
  z-index: 2;
}

.about-letter-content p {
  margin-bottom: 22px;
  text-align: justify;
}

.about-letter-postscript {
  margin-top: 28px;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--font-fransa);
  font-size: 1.45rem;
  line-height: 1.5;
  color: #000000;
}

.about-letter-signature-row {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px dashed #cccccc;
  padding-top: 24px;
}

.about-letter-signoff {
  font-family: var(--font-fransa);
  font-size: 2.1rem;
  line-height: 1.1;
  color: #BA2D0B;
}

/* --------------------------------------------------------------------------
   ECHTE CSS-STEMPEL AUS FONTS UND BORDERN
   -------------------------------------------------------------------------- */
/* STEMPEL 1: DAS "M" FÜR MESOKARP (RUNDER PRÄGESTEMPEL IN ROT) */
.stamp-seal-mesokarp {
  width: 140px;
  height: 140px;
  border: 3px dashed #BA2D0B;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #BA2D0B;
  transform: rotate(-8deg);
  mix-blend-mode: multiply;
  opacity: 0.92;
  user-select: none;
  padding: 8px;
  text-align: center;
  position: relative;
  background: transparent;
  flex-shrink: 0;
}

.stamp-seal-mesokarp::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid #BA2D0B;
  border-radius: 50%;
  pointer-events: none;
}

.stamp-seal-text-top {
  font-family: var(--font-typewriter);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stamp-seal-center-m {
  font-family: var(--font-fontetex);
  font-size: 3.2rem;
  line-height: 0.9;
  font-weight: 900;
}

.stamp-seal-text-bottom {
  font-family: var(--font-typewriter);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* STEMPEL 2: "F.H.S" MONOGRAMM IM STIL EINES REISEPASS / VISA-STEMPELS */
.stamp-visa-fhs {
  border: 2.5px solid #1E3A8A;
  padding: 8px 16px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1E3A8A;
  transform: rotate(5deg);
  mix-blend-mode: multiply;
  opacity: 0.92;
  position: relative;
  background: transparent;
  user-select: none;
}

.stamp-visa-fhs::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 1px solid #1E3A8A;
  pointer-events: none;
}

.stamp-visa-header {
  font-family: var(--font-typewriter);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid #1E3A8A;
  width: 100%;
  text-align: center;
  padding-bottom: 2px;
}

.stamp-visa-date {
  font-family: var(--font-olyida-mono);
  font-size: 0.72rem;
  font-weight: 700;
  margin: 3px 0;
  letter-spacing: 0.05em;
}

.stamp-visa-monogram {
  font-family: var(--font-fontetex);
  font-size: 2.3rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 2px 0;
}

.stamp-visa-footer {
  font-family: var(--font-typewriter);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid #1E3A8A;
  width: 100%;
  text-align: center;
  padding-top: 2px;
}

/* STEMPEL 3: POSTALISCHER WELLENSTEMPEL */
.stamp-postmark-wavy {
  display: flex;
  align-items: center;
  gap: 12px;
  transform: rotate(-3deg);
  color: #333333;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.stamp-postmark-circle {
  width: 70px;
  height: 70px;
  border: 2px solid #333333;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-typewriter);
  font-size: 0.55rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
}

.stamp-postmark-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stamp-postmark-line {
  width: 80px;
  height: 2px;
  background: #333333;
  border-radius: 1px;
}

/* ==========================================================================
   5. SEAFOOD MENU MOCKUP MODAL & EULA MODAL
   ========================================================================== */
.menu-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.menu-modal-overlay.active {
  display: flex;
}

.menu-modal-card {
  background: #ffffff;
  border: 2px solid #000000;
  width: 100%;
  max-width: 1100px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 8px 8px 0px #000000;
}

.menu-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 2px solid #000000;
  background: #4a8cae;
  color: #ffffff;
}

.menu-modal-title {
  font-family: var(--font-typewriter);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.menu-modal-iframe {
  flex-grow: 1;
  border: none;
  width: 100%;
  height: 100%;
  background: #4a8cae;
}

@media (max-width: 768px) {
  /* Mobile Papier-Optimierung: Textur um 90° gedreht gegen sichtbare Kachel-Übergänge */
  body {
    background-image: url('../assets/textures/paper-white-rot90.jpg');
    background-size: 100% auto;
  }
  .polaroid-card,
  .big-polaroid,
  .cart-drawer,
  .checkout-summary-card {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(247, 244, 238, 0.95) 100%), url('../assets/textures/paper-white-rot90.jpg');
  }

  .about-letter-sheet {
    padding: 32px 20px;
  }
  .about-letter-head {
    flex-direction: column;
  }
  .about-letter-meta-col {
    text-align: left;
  }
  .about-letter-signature-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .dvd-spine-row {
    height: 48px;
    padding: 0 10px;
  }
  .dvd-spine-name {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   6. MUSCHELN: GROSSFORMATIGE TAFEL-PRÄSENTATION & EINGEBETTETE MENÜS
   ========================================================================== */
.big-polaroid.is-plate-view {
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

.big-polaroid.is-plate-view .big-polaroid-viewport {
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: 85vh;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.big-polaroid.is-plate-view .big-polaroid-img {
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: contain;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 85vh;
  display: block;
}

@media (max-width: 600px) {
  .big-polaroid.is-plate-view {
    padding: 0 !important;
  }
  .big-polaroid.is-plate-view .big-polaroid-viewport {
    height: auto !important;
    max-height: 75vh;
    aspect-ratio: auto !important;
  }
}

.muscheln-plate-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.muscheln-plate-tab {
  font-family: var(--font-typewriter);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 10px;
  border: 1.5px solid #000000;
  background: #ffffff;
  color: #000000;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
}

.muscheln-plate-tab.active {
  background: #0A192F;
  color: #D4AF37;
  border-color: #000000;
}

.muscheln-plate-tab:hover:not(.active) {
  background: #f0f0f0;
}

.muscheln-zoom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.muscheln-zoom-btn {
  font-family: var(--font-typewriter);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 5px 12px;
  background: #FFE500;
  color: #000000;
  border: 1.5px solid #000000;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.muscheln-embedded-showcase {
  margin-top: 48px;
  border: 2px solid #000000;
  background: #ffffff;
  padding: 24px;
  box-shadow: 6px 6px 0px #000000;
}

@media (max-width: 600px) {
  .muscheln-embedded-showcase {
    padding: 16px;
  }
}

.muscheln-embedded-showcase-header {
  border-bottom: 2px solid #000000;
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.muscheln-embedded-showcase-title {
  font-family: var(--font-hand);
  font-size: 2.2rem;
  line-height: 1.1;
  margin: 0 0 6px 0;
  color: #000000;
}

.muscheln-embedded-showcase-desc {
  font-family: var(--font-typewriter);
  font-size: 0.88rem;
  color: #555555;
  margin: 0;
  line-height: 1.5;
}

.muscheln-embedded-frame {
  width: 100%;
  height: 640px;
  border: 1.5px solid #000000;
  background: #FAF8F4;
  display: block;
}

/* ==========================================================================
   7. CODE-GEBAUTE SCHRIFTARTEN POSTER-MOCKUPS (WIE BEI DEN MUSCHELN)
   100% Pure CSS/HTML Typografie-Plakate & Hanger-Mockups
   ========================================================================== */
.font-poster-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.font-poster-tab {
  background: #FAF8F4;
  border: 1.5px solid #000000;
  font-family: var(--font-typewriter);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  color: #000000;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.font-poster-tab:hover {
  background: #ece8df;
}

.font-poster-tab.active {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

/* Der Poster-Hanger Rahmen */
.font-poster-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  user-select: text;
}

.poster-hanger-bar {
  width: 103%;
  height: 15px;
  background: linear-gradient(180deg, #5c3e21 0%, #3e2714 60%, #2a1a0d 100%);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.poster-hanger-bar.top {
  margin-bottom: -4px;
}

.poster-hanger-bar.top::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 16px;
  border-top: 1.5px solid #8b7355;
  border-left: 1.5px solid #8b7355;
  border-right: 1.5px solid #8b7355;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  pointer-events: none;
}

.poster-hanger-bar.bottom {
  margin-top: -4px;
}

.hanger-screw {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #e6c875 35%, #8b6b1b 100%);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.hanger-screw.left { left: 16px; }
.hanger-screw.right { right: 16px; }

.big-polaroid.is-plate-view.is-font-poster-view {
  width: 100%;
  max-width: 100%;
}

.big-polaroid.is-plate-view.is-font-poster-view .big-polaroid-viewport {
  overflow: visible !important;
  padding: 16px 0 20px 0 !important;
  max-height: none !important;
  height: auto !important;
  display: block !important;
  aspect-ratio: auto !important;
}

/* Das echte Plakatblatt */
.poster-sheet {
  width: 100%;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 30px 26px 26px;
  position: relative;
  box-sizing: border-box;
  text-align: left;
  border: 1.5px solid #000000;
  background: #FAF8F4;
}

/* Passkreuze & Passermarken in den Ecken */
.poster-reg-mark {
  position: absolute;
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.35);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.poster-reg-mark.tl { top: 8px; left: 8px; }
.poster-reg-mark.tr { top: 8px; right: 8px; }
.poster-reg-mark.bl { bottom: 8px; left: 8px; }
.poster-reg-mark.br { bottom: 8px; right: 8px; }

/* Kopfbereich des Plakats */
.poster-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid #000000;
  padding-bottom: 8px;
  margin-bottom: 18px;
  font-family: var(--font-typewriter);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111111;
  flex-wrap: wrap;
  gap: 4px;
}

.foundry-tag {
  background: #000000;
  color: #ffffff;
  padding: 2px 6px;
  font-size: 0.64rem;
}

/* Hero-Titel */
.poster-hero-block {
  margin-bottom: 20px;
}

.poster-hero-title {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 0.95;
  color: #000000;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.poster-hero-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.poster-accent-badge {
  background: #F0C243;
  color: #000000;
  font-family: var(--font-typewriter);
  font-weight: 700;
  font-size: 0.74rem;
  padding: 3px 8px;
  border: 1px solid #000000;
}

.poster-hero-meta {
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  font-weight: 600;
  color: #555555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Trennlinie */
.poster-divider {
  height: 1.5px;
  background: #000000;
  margin: 14px 0;
}

.poster-divider.hand-drawn {
  height: 2px;
  background: repeating-linear-gradient(90deg, #000, #000 6px, transparent 6px, transparent 8px);
}

/* Headline-Specimen */
.poster-specimen-large {
  font-size: clamp(1.2rem, 3.2vw, 1.85rem);
  line-height: 1.15;
  color: #000000;
  margin-bottom: 12px;
}

/* Alphabet Matrix */
.poster-alphabet-matrix {
  background: rgba(0, 0, 0, 0.025);
  border: 1px dashed rgba(0, 0, 0, 0.3);
  padding: 12px 14px;
  margin: 14px 0;
  border-radius: 2px;
}

.matrix-label {
  font-family: var(--font-typewriter);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #444444;
  margin-bottom: 8px;
}

.matrix-chars-upper,
.matrix-chars-lower,
.matrix-chars-num {
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  line-height: 1.4;
  color: #111111;
  word-break: break-word;
  margin-bottom: 4px;
}

/* Stufenleiter / Typo-Skala */
.poster-scale-ladder {
  margin: 14px 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ladder-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.15);
  padding-bottom: 4px;
}

.ladder-pt {
  font-family: var(--font-typewriter);
  font-size: 0.65rem;
  font-weight: 700;
  color: #888888;
  min-width: 34px;
  flex-shrink: 0;
}

.ladder-row.l1 {
  font-size: clamp(1.1rem, 2.5vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;
}

.ladder-row.l2 {
  font-size: clamp(0.88rem, 2vw, 1.12rem);
  line-height: 1.3;
}

.ladder-row.l3 {
  font-size: clamp(0.75rem, 1.6vw, 0.92rem);
  line-height: 1.4;
  color: #333333;
}

/* Fußbereich mit technischen Details */
.poster-footer-spec {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1.5px solid #000000;
  padding-top: 10px;
  margin-top: 16px;
  font-family: var(--font-typewriter);
  font-size: 0.66rem;
  line-height: 1.45;
  color: #222222;
  gap: 10px;
  flex-wrap: wrap;
}

.spec-col strong {
  color: #000000;
}

.foundry-seal {
  display: inline-block;
  border: 1.5px solid #000000;
  padding: 3px 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: #FAF8F4;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Spezifische Font-Thematisierungen
   -------------------------------------------------------------------------- */
/* 1. FONTETEX */
.fontetex-poster .poster-sheet {
  background: #FAF8F4;
  border: 2px solid #000000;
  border-top: 8px solid #F0C243;
}
.fontetex-poster .poster-hero-title {
  font-family: var(--font-fontetex);
  font-weight: 900;
}
.fontetex-poster .poster-specimen-large {
  font-family: var(--font-fontetex);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.fontetex-poster .matrix-chars-upper,
.fontetex-poster .matrix-chars-lower,
.fontetex-poster .matrix-chars-num,
.fontetex-poster .ladder-row {
  font-family: var(--font-fontetex);
}

/* 2. OLYIDA */
.olyida-poster .poster-sheet {
  background: #F4EFE6;
  border: 1.5px solid #000000;
  border-left: 6px solid #C0392B;
}
.olyida-poster .poster-hero-title {
  font-family: var(--font-olyida);
  font-weight: 700;
  color: #151515;
}
.olyida-poster .ribbon-switch-black {
  color: #151515;
  font-family: var(--font-typewriter);
  font-weight: 700;
  font-size: 0.74rem;
}
.olyida-poster .ribbon-switch-red {
  color: #C0392B;
  font-family: var(--font-typewriter);
  font-weight: 700;
  font-size: 0.74rem;
}
.olyida-poster .ribbon-switch-sep {
  color: #888888;
  font-size: 0.7rem;
}
.olyida-poster .poster-specimen-large {
  font-family: var(--font-olyida);
  color: #111111;
  font-weight: 700;
}
.olyida-poster .matrix-chars-upper,
.olyida-poster .matrix-chars-lower,
.olyida-poster .matrix-chars-num,
.olyida-poster .ladder-row {
  font-family: var(--font-olyida);
}
.typewriter-stamp {
  border-color: #C0392B !important;
  color: #C0392B !important;
}

/* 3. FRANSA HANDWRITING */
.fransa-poster .poster-sheet {
  background: #FFFDF8;
  border: 1.5px solid #2B2D42;
  box-shadow: 0 16px 40px rgba(43, 45, 66, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.fransa-poster .poster-hero-title {
  font-family: var(--font-fransa);
  font-weight: 700;
  color: #0F141C;
}
.fransa-sketch-pill {
  background: #F06043;
  color: #ffffff;
  font-family: var(--font-typewriter);
  font-weight: 700;
  font-size: 0.74rem;
  padding: 3px 8px;
  border: 1px solid #000000;
}
.fransa-poster .poster-specimen-large {
  font-family: var(--font-fransa);
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  line-height: 1.2;
  color: #1E293B;
}
.fransa-font {
  font-family: var(--font-fransa) !important;
}
.fransa-stamp {
  border-color: #F06043 !important;
  color: #F06043 !important;
}

@media (max-width: 600px) {
  .poster-sheet {
    padding: 22px 16px 18px;
  }
  .poster-hero-title {
    font-size: 2.3rem;
  }
  .poster-footer-spec {
    font-size: 0.6rem;
  }
}