/* ================================================================
   GRUSSFORMAT — grussformat.ch
   Schrift: PLAIN (Thin, Regular, Medium) — Webfont-Lizenz Wolf Studio
   ================================================================ */

@font-face {
  font-family: "Plain";
  src: url("../fonts/Plain-Thin.woff2") format("woff2"), url("../fonts/Plain-Thin.otf") format("opentype");
  font-weight: 200;
  font-display: block;
}
@font-face {
  font-family: "Plain";
  src: url("../fonts/Plain-Regular.woff2") format("woff2"), url("../fonts/Plain-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Plain";
  src: url("../fonts/Plain-Medium.woff2") format("woff2"), url("../fonts/Plain-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: block;
}

:root {
  --ink: #101111;
  --grey: #767676;
  --grey-light: #ececec;
  --paper: #ffffff;
  --accent: #ffe800;
  --error: #c62828;   /* einheitliches Fehler-Rot */
  --hairline: 1px solid var(--ink);
  --pad: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Typo-Skala — 5 Stufen (Optimierung 07/2026): Display · Title · Body · Small · Caption */
  --fs-display: clamp(38px, 7vw, 88px);
  --fs-title: 28px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-caption: 11px;

  /* Button-Metrik — vereinheitlicht (Standard / sm) */
  --btn-pad: 10px 16px;
  --btn-pad-sm: 8px 12px;
}

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

html {
  scroll-behavior: smooth;
  /* Scrollleisten-Platz immer reservieren — sonst verschiebt sich der
     Header seitlich, wenn eine Seite ohne Scrollleiste auf eine mit folgt. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  font-family: "Plain", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }

.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

h1, .h1 {
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  /* Oberkante auf Höhe der Info-Spalte rechts; leicht nach links,
     damit die Glyphenkante optisch mit dem Fliesstext fluchtet */
  margin: -0.1em 0 0.45em -0.05em;
}
h2 { font-weight: 500; font-size: var(--fs-title); line-height: 1.15; }
h3 { font-weight: 500; font-size: var(--fs-body); }

.kicker { color: var(--grey); }
/* Lead-Zeile direkt unter dem grossen Titel — einheitlich auf allen Seiten */
h1 + .kicker,
h1 + .page-intro .kicker,
#infos-panel .kicker {
  display: block;
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--grey);
}
h1 + .kicker { margin: -24px 0 10px; max-width: 720px; }
.small { font-size: var(--fs-small); }
.mono-note { font-size: var(--fs-caption); color: var(--grey); }

/* ---------------------------------------------------------------
   Vorhang (Startseite)
   --------------------------------------------------------------- */
#curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: var(--ink);
  transition: transform 1.1s var(--ease);
  box-shadow: 8px 0 28px rgba(16, 17, 17, 0.28);
}
#curtain.open { transform: translateX(calc(-100% + 28px)); cursor: pointer; }
.curtain-slides img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 2s ease;
}
.curtain-slides img.active { opacity: 1; }
#curtain .curtain-logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.4s var(--ease);
}
#curtain .curtain-logo:hover { transform: translate(-50%, -50%) scale(1.05); }
#curtain .curtain-logo img {
  width: clamp(130px, 20vw, 220px);
  filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0, 0, 0, 0.25));
}
#curtain .curtain-credit {
  position: absolute;
  left: 20px; bottom: 16px;
  color: #fff;
  font-size: var(--fs-caption);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  max-width: 70vw;
  transition: opacity 0.8s;
}
#curtain .curtain-credit.schwarz { color: var(--ink); text-shadow: none; }
body.curtain-locked { overflow: hidden; }
/* Anker (#infos usw.) nicht unter dem Sticky-Header landen lassen */
[id] { scroll-margin-top: 130px; }
@media (max-width: 900px) { [id] { scroll-margin-top: 90px; } }

/* Vertikaler Seitenwechsel: nur der Inhalt fährt, der Header bleibt starr */
main, .site-footer { transition: transform 0.35s ease-in, opacity 0.3s ease-in; }
body.page-exit-up main, body.page-exit-up .site-footer { transform: translateY(-70px); opacity: 0; }
body.page-exit-down main, body.page-exit-down .site-footer { transform: translateY(70px); opacity: 0; }
/* Einfahr-Zustand der neuen Seite — gesetzt vor dem ersten Paint (kein Aufblitzen) */
html.pre-frombottom main, html.pre-frombottom .site-footer { transform: translateY(90px); opacity: 0; transition: none; }
html.pre-fromtop main, html.pre-fromtop .site-footer { transform: translateY(-90px); opacity: 0; transition: none; }

/* Startbild-Streifen: auf allen Unterseiten links sichtbar, Klick → Startbild */
.start-strip {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 28px;
  z-index: 150;
  background-color: var(--ink);
  background-size: cover;
  background-position: left center;
  cursor: pointer;
  box-shadow: 6px 0 22px rgba(16, 17, 17, 0.22);
  transition: width 0.25s var(--ease);
}
.start-strip:hover { width: 38px; }
/* Bei schmalen Fenstern darf der Streifen den Inhalt nicht überlappen */
@media (max-width: 1000px) {
  body.has-start-strip { padding-left: 22px; }
  body.has-start-strip .start-strip { width: 22px; }
  body.has-start-strip .start-strip:hover { width: 28px; }
}

/* ---------------------------------------------------------------
   Header / Navigation
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(16, 17, 17, 0.07);
}
/* Eigene Compositing-Ebene für den Header-Inhalt — verhindert das
   Text-Flackern über dem backdrop-filter (WebKit/Safari-Artefakt). */
.header-inner {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 48px);
  padding-top: 22px;
  padding-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand .brand-word { font-weight: 500; line-height: 1.1; letter-spacing: 0.01em; }
.brand .brand-claim { color: var(--grey); font-size: var(--fs-caption); }

nav.main-nav { display: flex; gap: clamp(16px, 3vw, 48px); flex: 1 1 auto; }
.nav-group { position: relative; }
.nav-group > a {
  font-weight: 500;
  display: inline-block;
  line-height: 22px;
}
.nav-group > a:hover, .nav-group.active > a { color: var(--ink); }
/* Untermenüs immer sichtbar, grau, enger Zeilenabstand */
.nav-group .sub {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-group .sub a {
  display: block;
  font-size: var(--fs-small);
  line-height: 18px;
  color: var(--grey);
  transition: color 0.15s;
}
.nav-group .sub a:hover, .nav-group .sub a.active { color: var(--ink); }

.header-meta { margin-left: auto; text-align: left; flex: 0 0 auto; }
.header-meta a { display: block; font-weight: 500; line-height: 22px; }
.header-meta a:hover { color: var(--grey); }
.cart-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 4px;
  margin-left: 6px;
  background: var(--accent);
  border-radius: 9px;
  font-size: var(--fs-caption);
  text-align: center;
  font-weight: 500;
}
.cart-count:empty { display: none; }
/* Leerzeile über der Sprachwahl → letzte Untermenu-Zeile und D/E auf gleicher Grundlinie */
.lang-switch { margin-top: 14px; font-weight: 500; font-size: var(--fs-small); line-height: 18px; }
.lang-switch button { color: var(--grey); }
.lang-switch button.active { color: var(--ink); }
.lang-switch span { color: var(--grey); }

/* Mobile nav */
.nav-toggle { display: none; font-size: 26px; line-height: 1; padding: 9px 10px; margin: -6px -10px -6px 0; min-width: 44px; min-height: 44px; }
@media (max-width: 900px) {
  .nav-toggle { display: block; margin-left: auto; }
  .header-inner { align-items: center; flex-wrap: wrap; }
  nav.main-nav {
    display: none;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    order: 10;
    padding: 22px 0 10px;
  }
  nav.main-nav.open { display: flex; }
  .nav-group .sub {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    padding: 4px 0 0 0;
  }
  /* Warenkorb (mit Zähler) bleibt permanent sichtbar — Konto und
     Sprachwahl erscheinen im aufgeklappten Menü */
  .header-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; order: 1; }
  .header-meta a[href="konto.html"], .header-meta .lang-switch { display: none; }
  .nav-toggle { margin-left: 0; order: 2; }
  nav.main-nav.open ~ .header-meta { order: 11; width: 100%; padding-bottom: 12px; }
  nav.main-nav.open ~ .header-meta a[href="konto.html"] { display: block; }
  nav.main-nav.open ~ .header-meta .lang-switch { display: flex; }
}

/* ---------------------------------------------------------------
   Layout: Inhalt + rechte Spalte
   --------------------------------------------------------------- */
.page-grid {
  display: grid;
  /* 5er-Raster: Inhalt 4 Spalten, Rail 1 Spalte — gleiche Zwischenräume überall */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  padding-top: 28px;
  padding-bottom: 80px;
}
.page-grid > div:first-child { grid-column: span 4; }
.page-grid > .rail { grid-column: span 1; }
.page-grid.no-rail { grid-template-columns: minmax(0, 1fr); }
.page-grid.no-rail > div:first-child { grid-column: auto; }
@media (max-width: 900px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .page-grid > div:first-child, .page-grid > .rail { grid-column: auto; }
}

/* Rechte Spalte */
.rail { font-size: var(--fs-small); }
.rail section { border-top: var(--hairline); padding: 10px 0 22px; }
.rail .highlight {
  background: var(--accent);
  display: inline-block;
  padding: 3px 8px;
  font-weight: 500;
  margin-top: 8px;
}
.rail form { margin-top: 12px; }
.rail input[type="email"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--grey);
  padding: 6px 0;
  background: transparent;
  outline: none;
}
.rail input[type="email"]:focus { border-color: var(--ink); }
.rail button[type="submit"] {
  margin-top: 12px;
  background: var(--accent);
  padding: var(--btn-pad-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: transform 0.15s var(--ease);
}
.rail button[type="submit"]:hover { transform: translateX(3px); }

/* ---------------------------------------------------------------
   Infos-Einblendung (Startseite)
   --------------------------------------------------------------- */
#infos-panel .infos-inner {
  margin-top: -24px;
  padding: 0 0 16px;
  border-bottom: var(--hairline);
  position: relative; /* volle Inhaltsbreite: Linie bündig mit den Fotos */
}
#infos-panel .infos-inner > .kicker { margin-bottom: 10px; }
#infos-panel [data-collapse] { max-width: 720px; }
#infos-panel p { white-space: pre-line; }

/* ---------------------------------------------------------------
   Introtexte: Auf-/Zuklappen («mehr lesen»/«weniger»)
   --------------------------------------------------------------- */
.page-intro {
  margin: -24px 0 30px;
  border-bottom: var(--hairline);
  padding-bottom: 16px;
}
.page-intro > * { max-width: 720px; }
.page-intro .kicker { margin: 0 0 10px; }
.page-intro p + p,
#infos-panel [data-collapse] p + p { margin-top: 12px; }
[data-collapse] {
  overflow: hidden;
  transition: max-height 0.8s var(--ease), opacity 0.8s ease;
}
[data-collapse].is-collapsed { opacity: 0; }
[data-collapse] a { text-decoration: underline; }
.intro-toggle {
  display: block;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--grey);
}
[data-collapse].is-collapsed + .intro-toggle { margin-top: 0; }
.intro-toggle:hover { color: var(--ink); }

/* ---------------------------------------------------------------
   Startseite: Einstiege + News
   --------------------------------------------------------------- */
.entry-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: 28px;
}
@media (max-width: 700px) { .entry-tiles { grid-template-columns: 1fr; } }

.tile { display: block; }
.tile .tile-visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--grey-light);
  position: relative;
}
.tile .tile-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.tile:hover .tile-visual img { transform: scale(1.03); }
.tile figcaption { padding-top: 10px; }
.tile figcaption .kicker { display: block; }
.tile figcaption strong { font-weight: 500; }
.tile .deadline-chip {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--accent);
  padding: 5px 10px;
  font-weight: 500;
  font-size: var(--fs-caption);
}

/* Collage im Editions-Tile */
.tile-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
  position: absolute;
  inset: 0;
  padding: 12px;
  background: var(--grey-light);
}
.tile-collage img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
  margin-top: clamp(32px, 5vw, 64px);
}
.news-item .news-visual { aspect-ratio: 3 / 2; overflow: hidden; background: var(--grey-light); }
.news-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.news-item:hover img { transform: scale(1.04); }
.news-item p { padding-top: 8px; }
.news-item .kicker { display: block; }
.news-item strong { font-weight: 500; }
.news-item[data-open] { cursor: pointer; }

/* Geöffnete News: links Text (Haupttext scrollt bis Bildunterkante), rechts Bild(er) */
.news-open {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 32px);
  padding-bottom: clamp(24px, 4vw, 48px);
  border-bottom: var(--hairline);
}
.news-open .no-text { position: relative; display: flex; flex-direction: column; min-height: 0; padding-right: 28px; }
.news-open .no-close {
  position: absolute;
  top: 0; right: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--grey);
}
.news-open .no-close:hover { color: var(--ink); }
.news-open .kicker { display: block; }
.news-open .no-title { font-weight: 500; font-size: var(--fs-title); }
.news-open .no-lead { margin-top: 10px; font-weight: 500; }
.news-open .no-body { margin-top: 12px; overflow-y: auto; min-height: 0; white-space: pre-line; padding-right: 6px; }
.news-open .no-media { position: relative; }
.news-open .no-media img, .news-open .no-media video { width: 100%; height: auto; display: block; background: #000; }
.news-open .no-media img { background: transparent; }
.news-open .no-media .news-placeholder { aspect-ratio: 3 / 2; }
/* Diaporama: eine Aufnahme aufs Mal, Pfeile links/rechts, Zähler */
.news-open .no-slide { display: none; }
.news-open .no-slide.active { display: block; }
.news-open .no-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 56px; font-size: 34px; line-height: 1;
  color: #fff; background: rgba(0, 0, 0, 0.35); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding-bottom: 6px;
  transition: background 0.2s;
}
.news-open .no-arrow:hover { background: rgba(0, 0, 0, 0.6); }
.news-open .no-arrow.prev { left: 0; }
.news-open .no-arrow.next { right: 0; }
.news-open .no-count {
  position: absolute; right: 8px; bottom: 8px; font-size: var(--fs-caption);
  color: #fff; background: rgba(0, 0, 0, 0.45); padding: 2px 7px; pointer-events: none;
}
/* Video-Kachel in Übersicht/Startseite: erstes Bild + Play-Symbol */
.news-visual { position: relative; }
.news-visual video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.news-play {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(0, 0, 0, 0.45); pointer-events: none;
}
.news-play::after {
  content: ""; position: absolute; left: 18px; top: 13px;
  border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff;
}
@media (max-width: 900px) {
  .news-open { grid-template-columns: 1fr; }
  .news-open .no-text { height: auto !important; order: 2; }
  .news-open .no-media { order: 1; }
}

/* Sanftes Erscheinen beim Scrollen */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   Edition: Kartenübersicht
   --------------------------------------------------------------- */
.edition-filter { display: flex; gap: 18px; margin-bottom: 26px; }
.edition-filter button { color: var(--grey); font-weight: 500; }
.edition-filter button.active { color: var(--ink); border-bottom: 2px solid var(--accent); }

.edition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(18px, 3vw, 42px);
  align-items: end;
}
.postcard {
  cursor: pointer;
  opacity: 0;
  transform: translateY(26px) rotate(0.6deg);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.postcard.in { opacity: 1; transform: none; }
.postcard .card-img {
  background: #fff;
  /* klare Schattierung + feine Kontur, damit weisse Karten ihr Format zeigen */
  border: 1px solid rgba(16, 17, 17, 0.08);
  box-shadow: 0 2px 4px rgba(16, 17, 17, 0.22), 0 10px 26px rgba(16, 17, 17, 0.16);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.postcard:hover .card-img {
  transform: translateY(-4px);
  box-shadow: 0 2px 5px rgba(16, 17, 17, 0.22), 0 16px 34px rgba(16, 17, 17, 0.17);
}
.postcard.portrait { width: 72%; margin: 0 auto; }
.postcard figcaption { padding-top: 8px; font-size: 11px; color: var(--grey); text-align: center; }

/* Karten-Detail (Lightbox mit Flip) */
.card-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(255, 255, 255, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 60px);
}
.card-modal.open { display: flex; }
.card-modal .modal-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
  max-width: 1100px;
  width: 100%;
}
@media (max-width: 800px) {
  .card-modal .modal-inner { grid-template-columns: 1fr; overflow-y: auto; max-height: 100%; }
}
.card-stage { perspective: 1600px; }
.card-flip {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease);
  margin: 0 auto;
}
.card-flip.flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  box-shadow: 0 2px 6px rgba(16, 17, 17, 0.16), 0 18px 44px rgba(16, 17, 17, 0.12);
  background: #fff;
}
.card-face.front img { width: 100%; height: 100%; object-fit: cover; }
.card-face.back { transform: rotateY(180deg); }
.card-modal .modal-close {
  position: absolute;
  top: 22px; right: clamp(20px, 4vw, 56px);
  font-size: 26px;
  color: var(--ink);
}
.card-modal .modal-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--grey); }
.card-modal .modal-nav:hover { color: var(--ink); }
.card-modal .modal-prev { left: 14px; }
.card-modal .modal-next { right: 14px; }
.card-modal .card-meta h2 { margin: 2px 0 12px; font-size: var(--fs-title); }
.card-modal .card-meta .kicker { display: block; }
.card-modal .card-meta .cm-nummer { font-weight: 500; font-size: var(--fs-small); margin: 2px 0 6px; }
/* Detailinfos mit Linien */
.card-modal .meta-rows { border-top: var(--hairline); margin-top: 6px; font-size: var(--fs-small); }
.card-modal .meta-rows > div { border-bottom: 1px solid var(--grey-light); padding: 8px 0; }
.card-modal .cm-title { white-space: pre-line; }
.card-modal .cm-website a { text-decoration: underline; }
.card-modal .card-meta .price { font-weight: 500; font-size: var(--fs-title); }
.card-modal .flip-toggle { color: var(--grey); font-weight: 500; display: inline-block; margin: 10px 0 4px; }
.card-modal .flip-toggle:hover { color: var(--ink); }
.card-stage .card-flip { cursor: pointer; }

.qty-select { display: inline-flex; align-items: center; border: var(--hairline); margin: 14px 0; }
.qty-select button { width: 34px; height: 34px; font-size: 17px; }
.qty-select input {
  width: 46px; height: 34px;
  border: none;
  border-left: var(--hairline);
  border-right: var(--hairline);
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Browser-Pfeile ausblenden — Plus/Minus gibt es schon */
.qty-select input::-webkit-outer-spin-button,
.qty-select input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-accent {
  display: inline-block;
  background: var(--accent);
  padding: var(--btn-pad);
  font-weight: 500;
  transition: transform 0.15s var(--ease);
}
.btn-accent:hover { transform: translateX(3px); }
.btn-ghost { display: inline-block; padding: 10px 0; font-weight: 500; color: var(--grey); }
.btn-ghost:hover { color: var(--ink); }
/* Weisser Knopf mit Kontur — z. B. «Karte senden» in der Detailansicht */
.btn-share {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--ink);
  padding: var(--btn-pad);
  font-weight: 500;
  transition: transform 0.15s var(--ease);
}
.btn-share:hover { transform: translateX(3px); }
.btn-grey {
  display: inline-block;
  background: var(--grey-light);
  padding: var(--btn-pad);
  font-weight: 500;
  transition: transform 0.15s var(--ease), background 0.15s;
}
.btn-grey:hover { transform: translateX(3px); background: #e0e0e0; }

/* Kartenrückseite (Edition + Konfigurator) */
.pc-back {
  width: 100%; height: 100%;
  background: #fff;
  position: relative;
  font-size: 8px;
  line-height: 1.4;
  color: var(--ink);
}
.pc-back .pb-logo { position: absolute; top: 6%; left: 4.5%; width: 13%; }
.pc-back .pb-credit { position: absolute; left: 4.5%; bottom: 7%; transform-origin: 0 100%; }
.pc-back .pb-divider { position: absolute; top: 12%; bottom: 12%; left: 55%; width: 1px; background: var(--ink); }
.pc-back .pb-lines { position: absolute; right: 6%; width: 34%; top: 34%; }
.pc-back .pb-lines div { border-bottom: 1px solid var(--ink); height: 15%; margin-bottom: 12%; }
.pc-back .pb-stamp {
  position: absolute; top: 6%; right: 6%;
  width: 11%; aspect-ratio: 4 / 5;
  border: 1px dashed var(--grey);
}
.pc-back .pb-print { position: absolute; bottom: 3.5%; right: 6%; font-size: 6px; color: var(--grey); }

/* ---------------------------------------------------------------
   Konfigurator
   --------------------------------------------------------------- */
.konfig-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .konfig-grid { grid-template-columns: minmax(0, 1fr); } }

.konfig-stage-wrap { position: sticky; top: 120px; }
@media (max-width: 900px) { .konfig-stage-wrap { position: static; } }

.side-tabs { margin-bottom: 14px; }
.view-toggle { margin-top: 12px; }

/* Arbeitsfläche: Karte inkl. Beschnitt */
.konfig-stage {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(16, 17, 17, 0.14), 0 16px 40px rgba(16, 17, 17, 0.1);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.konfig-stage .artwork {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}
.konfig-stage .artwork img.user-img {
  position: absolute;
  transform-origin: center;
  cursor: grab;
  max-width: none;
}
.konfig-stage .artwork img.user-img:active { cursor: grabbing; }
.konfig-stage .user-text {
  position: absolute;
  cursor: grab;
  white-space: pre-wrap;
  font-weight: 500;
  line-height: 1.15;
  outline: none;
  min-width: 20px;
}
.konfig-stage .user-text:focus { outline: 1px dashed rgba(16,17,17,0.4); }

/* Beschnitt-Abdunklung + Endformat-Linie */
.bleed-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Rand (Beschnittzone) abdunkeln */
  box-shadow: inset 0 0 0 var(--bleed-px, 12px) rgba(255, 255, 255, 0.82);
}
.trim-line {
  position: absolute;
  inset: var(--bleed-px, 12px);
  border: 3px solid #00ff29; /* schrilles Grün — unverwechselbar Nicht-Druckelement */
  pointer-events: none;
  z-index: 3;
}
.konfig-note { margin-top: 18px; max-width: 520px; }

/* Optionen rechts */
.konfig-options section { border-top: var(--hairline); padding: 12px 0 18px; }
/* Konfigurator-Schriften: selbst gehostet (WOFF2-Subsets) — keine System-
   schriften, kein Google-CDN; identische Darstellung auf allen Geräten */
@font-face { font-family: "Arimo"; src: url("../fonts/std/Arimo-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("../fonts/std/Arimo-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Tinos"; src: url("../fonts/std/Tinos-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gelasio"; src: url("../fonts/std/Gelasio-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/std/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/std/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url("../fonts/std/ArchivoBlack-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/std/PlayfairDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/std/Lora-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

.konfig-options section:first-child { border-top: 0; padding-top: 0; }
.konfig-options h3 { margin-bottom: 8px; }
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-chip {
  border: 1px solid var(--grey);
  padding: 7px 11px;
  font-size: var(--fs-small);
  transition: border-color 0.15s, background 0.15s;
}
.opt-chip.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.opt-chip:hover { border-color: var(--ink); }
.konfig-options .price-line { font-weight: 500; font-size: var(--fs-title); margin-top: 4px; }
.konfig-tools { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* PDF-Modus: Gestaltungswerkzeuge gesperrt (PDF wird unverändert gedruckt) */
.pdf-locked { opacity: 0.35; pointer-events: none; }
/* Rückseite: Abstand Hinweis/Optionen zum Upload- bzw. Text-Block —
   identisch zum 8-px-Abstand Button→Hinweis auf der Vorderseite */
#tools-back-opts { margin-top: 8px; }
.konfig-tools label.upload-btn, .konfig-tools button {
  border: 1px solid var(--grey);
  padding: 7px 11px;
  font-size: var(--fs-small);
  cursor: pointer;
  display: inline-block;
  background: #fff;
}
.konfig-tools label.upload-btn:hover, .konfig-tools button:hover { border-color: var(--ink); }
.konfig-tools input[type="file"] { display: none; }
.konfig-tools .range-row { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; max-width: 100%; }
/* «Schrift»/«Schnitt»: gleiche Label-Breite → Aufklappmenüs auf einer Flucht */
.konfig-tools .fw-label { min-width: 68px; flex: 0 0 auto; }
.konfig-tools input[type="range"] { accent-color: var(--ink); width: 130px; }
.konfig-tools .swatches { display: flex; gap: 6px; }
.konfig-tools .swatch { width: 22px; height: 22px; border: 1px solid var(--grey); }
.konfig-tools .swatch.active { outline: 2px solid var(--accent); }
.konfig-msg { color: var(--error); font-size: var(--fs-small); margin-top: 8px; min-height: 18px; }

/* ---------------------------------------------------------------
   Inhaltsseiten (Preise, FAQ, Kontakt, …)
   --------------------------------------------------------------- */
.prose > * { max-width: 680px; }
.prose > .page-intro { max-width: none; }
.prose .page-intro > * { max-width: 680px; }
.prose p { margin-bottom: 1em; }
.prose h2 { margin: 1.6em 0 0.5em; }
.prose ul { padding-left: 1.2em; margin-bottom: 1em; }

.price-table { width: 100%; max-width: 560px; border-collapse: collapse; margin: 20px 0; }
.price-table th, .price-table td {
  text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid var(--grey-light);
}
.price-table th { font-weight: 500; border-bottom: var(--hairline); }
.price-table td:last-child, .price-table th:last-child { text-align: right; }

.faq-item { border-top: 1px solid var(--grey-light); max-width: 680px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary {
  padding: 14px 0;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::after { content: "+"; color: var(--grey); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 0 16px; color: #444; }

/* ---------------------------------------------------------------
   Warenkorb / Kasse
   --------------------------------------------------------------- */
.cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .cart-grid { grid-template-columns: minmax(0, 1fr); } }

.cart-item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--grey-light);
  align-items: start;
}
.cart-item:first-child { border-top: var(--hairline); }
.cart-item .ci-thumb { background: var(--grey-light); }
.cart-item .ci-thumb img { width: 100%; }
.cart-item h3 { margin-bottom: 6px; }
.cart-item dl { font-size: var(--fs-small); display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.cart-item dt { color: var(--grey); }
.cart-item .ci-price { font-weight: 500; text-align: right; }
.cart-item .ci-remove { color: var(--grey); font-size: var(--fs-small); margin-top: 8px; }
.cart-item .ci-remove:hover { color: var(--ink); }
.cart-item .ci-thumb.ci-zoom { cursor: zoom-in; }
.cart-item .ci-previewlink { color: var(--grey); font-size: var(--fs-small); margin: 8px 16px 0 0; }
.cart-item .ci-previewlink:hover { color: var(--ink); }
/* Grossansicht der Bestell-Vorschau: Vorder- + Rückseite (Klick schliesst) */
.gf-lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0, 0, 0, 0.82);
  display: flex; align-items: center; justify-content: center;
  gap: 3vw; padding: 4vw; cursor: zoom-out;
}
.gf-lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 44%; min-width: 0; }
.gf-lightbox figure:only-child { max-width: min(92%, 900px); }
.gf-lightbox img { max-width: 100%; max-height: 80vh; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.gf-lightbox figcaption { color: #fff; font-size: var(--fs-small); }
@media (max-width: 700px) {
  .gf-lightbox { flex-direction: column; gap: 20px; }
  .gf-lightbox figure { max-width: 92%; }
  .gf-lightbox img { max-height: 38vh; }
}
@media (max-width: 600px) {
  .cart-item { grid-template-columns: 90px minmax(0, 1fr); }
  .cart-item .ci-price { text-align: left; grid-column: 2; }
}

.summary-box { border-top: var(--hairline); font-size: var(--fs-small); }
.summary-box .sum-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--grey-light); }
.summary-box .sum-row.total { font-weight: 500; border-bottom: var(--hairline); }
.summary-box .btn-accent { width: 100%; text-align: left; margin-top: 16px; }
/* Einblender-Info: optionale Botschaft über «Zur Kasse» (Backend-gesteuert) */
.einblender-info {
  background: #e2001a;
  color: #fff;
  padding: var(--btn-pad);
  font-weight: 500;
  margin-top: 16px;
}
.summary-box .btn-ghost { margin-top: 6px; }

/* Kasse */
.checkout-form fieldset { border: none; padding: 14px 0 24px; }
.checkout-form legend { font-weight: 500; padding-bottom: 8px; }
.checkout-form legend::after { content: ":"; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; max-width: 560px; }
.field-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: var(--fs-caption); color: var(--grey); margin-bottom: 2px; }
.field input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--grey);
  padding: 6px 0;
  outline: none;
  background: transparent;
}
.field input:focus { border-color: var(--ink); }
.radio-row { display: flex; flex-direction: column; gap: 8px; }
.radio-row label { display: flex; align-items: baseline; gap: 10px; cursor: pointer; }
.radio-row input { accent-color: var(--ink); }
.checkout-msg { min-height: 22px; font-size: var(--fs-small); margin-top: 10px; }
.checkout-msg.error { color: var(--error); }

.success-panel { max-width: 560px; padding: 40px 0; }
.success-panel h2 { margin-bottom: 12px; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer { border-top: var(--hairline); padding: 26px 0 60px; font-size: var(--fs-small); }
.site-footer .footer-inner { display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: baseline; }
.site-footer .claim { color: var(--grey); }
.site-footer a:hover { color: var(--grey); }
.site-footer .copyright { margin-left: auto; color: var(--grey); }

/* ---------------------------------------------------------------
   V2: Labels, Ausverkauft, Schraffur, CMYK, Entwürfe, Bestellungen
   --------------------------------------------------------------- */

/* Logo auf Höhe der Sprachauswahl-Grundlinie */
.brand img { width: auto; height: 76px; }
@media (max-width: 900px) { .brand img { height: 52px; } }

/* Karten-Labels (Edition) */
.postcard .card-wrap { position: relative; overflow: hidden; }
.label-chip {
  position: absolute;
  left: 0; top: 10px;
  background: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 500;
  padding: 3px 8px;
  z-index: 2;
}
.soldout-ribbon {
  position: absolute;
  top: 20px; right: -38px;
  width: 150px;
  text-align: center;
  transform: rotate(45deg);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 3px 0;
  z-index: 2;
  pointer-events: none;
}
.postcard.is-soldout .card-img { filter: grayscale(0.35); opacity: 0.75; }
.card-stage .soldout-ribbon { top: 56px; right: -84px; width: 360px; font-size: 24px; padding: 8px 0; }
.card-stage .ribbon-clip { position: absolute; inset: 0; overflow: hidden; z-index: 3; pointer-events: none; }

/* Beschnitt: Schraffur auf 50 % aufgehelltem Grund */
.hatch {
  position: absolute;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg,
      rgba(16, 17, 17, 0.22) 0 1.5px, transparent 1.5px 6px),
    rgba(255, 255, 255, 0.5);
  z-index: 2;
}
.hatch.h-top { top: 0; left: 0; right: 0; height: var(--bleed-px, 12px); }
.hatch.h-bottom { bottom: 0; left: 0; right: 0; height: var(--bleed-px, 12px); }
.hatch.h-left { top: 0; bottom: 0; left: 0; width: var(--bleed-px, 12px); }
.hatch.h-right { top: 0; bottom: 0; right: 0; width: var(--bleed-px, 12px); }

/* Konfigurator: aktiver Block deutlich markiert (Rot — auf jedem Bild sichtbar) */
.konfig-stage .user-text.selected,
.konfig-stage .user-img.selected {
  outline: 2px dashed #ff2d2d;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.konfig-stage .user-img.gray { filter: grayscale(1); }

/* Seitenwechsel-Flip */
.konfig-stage-wrap { perspective: 1400px; }

/* Rückseite Druck: Linien + Grussformat-Zeile kommen als Vorlagen-Renderings
   aus assets/rueckseite/ (siehe configurator.js renderSide) */

/* CMYK-Regler */
.cmyk-box { display: grid; grid-template-columns: 14px 1fr 44px; gap: 4px 8px; align-items: center; font-size: var(--fs-caption); width: 100%; max-width: 230px; }
.cmyk-box input[type="range"] { width: 100%; accent-color: var(--ink); }
.cmyk-preview { grid-column: 1 / -1; height: 18px; border: 1px solid var(--grey-light); margin-top: 2px; }
.range-row .cmyk-preview { width: 44px; margin-top: 0; flex: 0 0 auto; }
/* QR-Rechnung auf der Bestätigungsseite (Vorkasse) */
.qr-pay { margin: 18px auto 0; max-width: 560px; }
.qr-pay img { width: 180px; height: 180px; }
.qr-pay p { margin-top: 8px; font-size: var(--fs-small); }
/* Segment-Schalter (2 Optionen): weisser Knopf gleitet auf grauem Band —
   eckig und mit Hairline, passend zum Seitenstil. Knopf folgt der .active-Chip. */
.seg {
  position: relative;
  display: flex;
  gap: 0;
  padding: 3px;
  background: var(--grey-light);
}
.seg::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--grey);
  transition: transform 0.22s ease;
}
.seg:has(.opt-chip:last-child.active)::before { transform: translateX(100%); }
.seg .opt-chip {
  position: relative;
  flex: 1 1 0;
  text-align: center;
  border: 0;
  background: transparent;
  color: var(--grey);
}
.seg .opt-chip.active { background: transparent; color: var(--ink); }
.seg .opt-chip:hover { color: var(--ink); }
#tool-tabs { margin: 2px 0 14px; }
/* Schalter über/unter der Arbeitsfläche: zentriert zur Karte
   (Breite des Wrappers wird in layoutStage auf die Bühnenbreite gesetzt) */
.stage-tabs { display: flex; justify-content: center; margin: 0 auto; }
.stage-tabs .seg { width: min(280px, 100%); }
/* Schriftfarbe: Palette + RGB/CMYK nebeneinander */
.color-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.color-swatches .swatch { width: 22px; height: 22px; border: 1px solid var(--grey-light); cursor: pointer; padding: 0; }
.color-swatches .swatch:hover { border-color: var(--ink); }
.color-swatches .swatch.active { outline: 2px solid var(--ink); outline-offset: 1px; }
.color-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; max-width: 480px; }
.color-cols .cmyk-box { max-width: none; }
@media (max-width: 1100px) { .color-cols { grid-template-columns: 1fr; max-width: 230px; } }

.font-select { border: 1px solid var(--grey); padding: 7px 11px; font-size: var(--fs-small); background: #fff; max-width: 100%; }

/* Entwürfe */
.drafts-box { margin-top: 26px; border-top: var(--hairline); padding-top: 10px; }
.draft-item { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grey-light); font-size: 13px; }
.draft-item .d-name { font-weight: 500; }
.draft-item .d-date { color: var(--grey); }
.draft-item button { color: var(--grey); }
.draft-item button:hover { color: var(--ink); }
.draft-item .d-load { color: var(--ink); font-weight: 500; margin-left: auto; }

/* Spezifikationen */
.spec-list { list-style: none; font-size: var(--fs-small); }
.spec-list li { padding: 3px 0 3px 14px; position: relative; }
.spec-list li::before { content: "—"; position: absolute; left: 0; color: var(--grey); }

/* Meine Bestellungen (Konto) */
.order-block { border-top: var(--hairline); padding: 16px 0 22px; }
.order-block h3 { display: flex; gap: 16px; flex-wrap: wrap; }
.order-block h3 .o-date { color: var(--grey); font-weight: 400; }
.order-line { display: flex; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grey-light); font-size: 13px; }
.order-line img { width: 64px; }
.order-line .o-reorder { margin-left: auto; font-weight: 500; }
.order-line .o-reorder:hover { color: var(--grey); }

/* ---------------------------------------------------------------
   Backend-Seite (admin.html — nicht verlinkt, noindex)
   --------------------------------------------------------------- */
/* Karteikarten-Navigation: aktive Karte «öffnet» sich in den Inhalt */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--ink);
  margin: 0 0 34px;
}
.admin-tabs .adm-tab-btn {
  border: 1px solid var(--grey-light);
  border-bottom: none;
  background: var(--grey-light);
  color: var(--grey);
  padding: 10px 22px;
  font-size: var(--fs-small);
  font-weight: 500;
}
.admin-tabs .adm-tab-btn:hover { color: var(--ink); }
.admin-tabs .adm-tab-btn.active {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
  margin-bottom: -1px; /* überdeckt die Linie → Karteikarten-Effekt */
  padding-bottom: 11px;
}
.admin-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  border-top: var(--hairline);
  border-bottom: 1px solid var(--grey-light);
  padding: 12px 0;
  margin-bottom: 10px;
}
.admin-filters { display: flex; gap: 6px; }
#admin-token {
  border: 1px solid var(--grey);
  padding: 6px 10px;
  font-size: 13px;
  margin-left: auto;
}
.admin-row {
  display: grid;
  grid-template-columns: 64px 70px minmax(0, 1fr) 90px 100px 110px 120px 110px;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--grey-light);
  font-size: 13px;
}
.admin-row img { width: 64px; background: var(--grey-light); }
.admin-row.soldout img { opacity: 0.45; }
.admin-row .ar-nr { font-weight: 500; }
.admin-row .ar-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.admin-row .ar-info span { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-row .ar-sold { color: var(--grey); }
.admin-row .ar-stock label { display: block; font-size: 10px; color: var(--grey); }
.admin-row .ar-stock input {
  width: 70px;
  border: 1px solid var(--grey);
  padding: 4px 6px;
}
.soldout-chip { background: var(--ink); color: #fff; padding: 2px 8px; font-size: 11px; }
@media (max-width: 800px) {
  .admin-row { grid-template-columns: 64px minmax(0, 1fr) 100px; }
  .admin-row .ar-nr, .admin-row .ar-format, .admin-row .ar-sold, .admin-row .ar-status { display: none; }
}

/* Konfigurator V3: Werkzeug-Icons + Bild-Ebenen */
.tool-icon {
  border: 1px solid var(--grey);
  width: 30px; height: 30px;
  font-size: var(--fs-body);
  line-height: 1;
  background: #fff;
}
.tool-icon:hover { border-color: var(--ink); }
.konfig-stage .user-img { position: absolute; max-width: none; cursor: grab; transform-origin: center; }
.konfig-stage .user-img:active { cursor: grabbing; }

/* Edition: Künstler-Filter (Aufklappmenu) */
.artist-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-bottom: 1px solid var(--grey);
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8a8a8'/%3E%3C/svg%3E") no-repeat right 2px center;
  padding: 0 18px 3px 0;
  font-weight: 500;
  color: var(--grey);
  cursor: pointer;
  max-width: 240px;
}
.artist-select:hover { color: var(--ink); border-color: var(--ink); }
.artist-select.active { color: var(--ink); border-bottom: 2px solid var(--accent); }
.edition-filter { flex-wrap: wrap; align-items: baseline; }

/* Bildeigenschaften-Panel im Konfigurator */
.img-info {
  border-top: 1px solid var(--grey-light);
  padding-top: 8px;
  font-size: var(--fs-caption);
  width: 100%;
  max-width: 250px;
}
.img-info > div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.img-info > div span { color: var(--grey); }
.img-info > div strong { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.img-info .ii-warnings { display: block; padding-top: 4px; }
.img-info .ii-warnings span { display: block; padding: 2px 0; }
.img-info .ii-warnings .warn { color: var(--error); font-weight: 500; }
.img-info .ii-warnings .note { color: #b26a00; }
.img-info #img-srgb {
  margin-top: 6px;
  border: 1px solid var(--ink);
  padding: 5px 9px;
  font-size: var(--fs-caption);
  font-weight: 500;
  background: #fff;
}
.img-info #img-srgb:hover { background: var(--accent); }

/* Elementliste im Konfigurator: Bilder mit Infos + Texte, immer sichtbar */
#element-lists { margin-top: 14px; }
#element-lists .el-title { margin: 12px 0 4px; font-size: var(--fs-small); }
.el-row {
  border-top: 1px solid var(--grey-light);
  padding: 7px 0 8px;
  font-size: var(--fs-caption);
  cursor: pointer;
}
.el-row.active { border-left: 3px solid var(--accent); padding-left: 7px; margin-left: -10px; }
.el-row .el-head { display: flex; align-items: baseline; gap: 8px; }
.el-row .el-nr { color: var(--grey); white-space: nowrap; }
.el-row .el-name { font-weight: 500; overflow-wrap: anywhere; }
.el-row .el-del { margin-left: auto; color: var(--grey); font-size: 13px; padding: 0 2px; }
.el-row .el-del:hover { color: var(--error); }
.el-row .el-meta { color: #555; padding-top: 2px; line-height: 1.5; }
.el-row .warn { display: block; color: var(--error); font-weight: 500; padding-top: 2px; }
.el-row .note { display: block; color: #b26a00; padding-top: 2px; }
.el-row .el-srgb {
  margin-top: 5px;
  border: 1px solid var(--ink);
  padding: 4px 8px;
  font-size: var(--fs-caption);
  font-weight: 500;
  background: #fff;
}
.el-row .el-srgb:hover { background: var(--accent); }


/* Vorschau-Modus: nur Endformat — Beschnitt, Schraffur und Linie ausgeblendet */
.konfig-stage.preview { box-shadow: none; }
.konfig-stage.preview .hatch,
.konfig-stage.preview .trim-line { display: none; }
.konfig-stage.preview .artwork {
  clip-path: inset(var(--bleed-px, 12px));
}
/* Endformat-Kante in der Vorschau als feiner Papierrand */
.konfig-stage.preview::after {
  content: "";
  position: absolute;
  inset: var(--bleed-px, 12px);
  box-shadow: 0 2px 6px rgba(16, 17, 17, 0.14), 0 16px 40px rgba(16, 17, 17, 0.1);
  pointer-events: none;
  z-index: 1;
}


/* Konfigurator: Hinweis auf leerer Vorderseite */
.konfig-stage .empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14%;
  color: var(--grey);
  font-size: var(--fs-small);
  pointer-events: none;
}

/* Roter Auswahlrahmen als Overlay (sichtbar auch bei randabfallenden Bildern) */
.konfig-stage .sel-frame {
  position: absolute;
  border: 2px dashed #ff2d2d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transform-origin: center;
  z-index: 4;
}

/* ---------------------------------------------- Kundenkonto ---- */
.konto-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--grey-light);
  border-bottom: 1px solid var(--grey-light);
}
.konto-head #konto-email { font-weight: 500; }
.konto-head .btn-grey { margin-left: auto; }

.konto-badge {
  display: inline-block;
  background: var(--accent);
  padding: 4px 10px;
  font-size: var(--fs-small);
  font-weight: 500;
}

.konto-invite {
  max-width: 560px;
  margin: 18px 0;
  padding: 12px 14px;
  background: #fffbe6;
  border: 1px solid #e8dfa0;
  font-size: var(--fs-small);
}
.konto-invite.success { background: #eefbee; border-color: #b9e2b9; }
.konto-invite.error   { background: #fdeeee; border-color: #eec3c3; }

.sum-row.rabatt span { color: #1a7a1a; }

/* Newsletter: Infomaniak-Webform im Rail-Design */
.rail .inf-input input[type="email"] {
  width: 100%;
  height: auto;
  border: 1px solid var(--grey-light);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-small);
  padding: 8px 10px;
}
.rail .inf-input input[type="email"]:focus { border-color: var(--ink); outline: none; }
.rail .inf-input.inf-error input { border-color: var(--error); }
.rail .inf-input.inf-error span.inf-message { color: var(--error); display: block; margin-top: 4px; }
.rail .inf-submit { margin-top: 10px; }
.rail .inf-submit input[type="submit"] {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}
.rail .inf-submit input[type="submit"]:hover { transform: translateX(3px); }
.rail .inf-submit input[type="submit"].disabled { opacity: 0.4; }
.rail .inf-success h4 { font-size: var(--fs-small); font-weight: 500; }


/* Rail: Kleintext unter dem Drucktermin */
.rail #rail-termin + br + .mono-note,
.rail p .mono-note[data-i18n="rail.termin.note"] {
  display: block;
  margin-top: 12px;
  line-height: 1.35;
}

/* Navigation: inaktiver Untermenüpunkt */
.nav-group .sub .sub-disabled {
  display: block;
  font-size: var(--fs-small);
  line-height: 18px;
  color: var(--grey);
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* News: grauer Bild-Platzhalter */
.news-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--grey-light);
}


/* Kasse: TWINT-Bezahlblock auf der Bestätigungsseite */
.twint-box {
  max-width: 480px;
  margin: 24px auto;
  padding: 20px 22px;
  border: 1px solid var(--grey-light);
  text-align: left;
}
.twint-box h3 { font-size: var(--fs-body); font-weight: 500; margin-bottom: 8px; }
.btn-twint {
  display: inline-block;
  background: #000;
  color: #fff;
  font-weight: 500;
  padding: var(--btn-pad);
}


/* Kasse: Bankangaben bei Vorkasse */
.bank-box {
  max-width: 480px;
  margin: 20px auto;
  padding: 18px 22px;
  border: 1px solid var(--grey-light);
  text-align: left;
  line-height: 1.55;
  font-size: var(--fs-small);
}


/* FAQ: erste Frage rückt an den Titel heran (wie Lead-Abstand) */
h1 + .faq-item { margin-top: -24px; }

/* Kontakt: Intro-Absatz mit Lead-Abstand */
h1 + p[data-i18n="kontakt.intro"] { margin-top: -24px; max-width: 720px; }

/* Backend: ausgeblendete Karten + Checkbox */
.admin-row.is-hidden img { opacity: 0.3; }
.admin-row.is-hidden .ar-info { opacity: 0.45; }
.ar-hide { display: flex; align-items: center; gap: 6px; white-space: nowrap; }


/* Backend: Listenzeilen ohne Karten-Raster (Personen, Codes, Einladungen) */
.admin-row.row-simple {
  grid-template-columns: minmax(0, 2fr) 150px 70px 190px auto auto;
}
.admin-row.row-simple .ar-info { min-width: 0; }


/* Backend: Textkorrektur-Panel unter der Kartenzeile */
.admin-edit {
  border-bottom: 1px solid var(--grey-light);
  background: #fafafa;
  padding: 14px 16px 16px;
  max-width: 640px;
}
.admin-edit .field { margin-bottom: 10px; max-width: 480px; }
.admin-edit textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--grey);
  background: transparent;
  padding: 6px 0;
  font: inherit;
  resize: vertical;
}

/* FAQ: mehrzeilige Antworten */
.faq-item p { white-space: pre-line; }

/* FAQ: Abschnittstitel */
.faq-section {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--grey);
  margin: 34px 0 4px;
}
h1 + .faq-section { margin-top: -24px; }

/* Konto: lokale Bestell-Kopie entfernen */
.o-localdel { color: var(--grey); margin-top: 6px; }
.o-localdel:hover { color: var(--ink); }

/* Warnung Gesamtfarbauftrag > 300 % im Farbwerkzeug */
.tac-warn { margin-top: 6px; font-size: 12px; line-height: 1.35; padding: 6px 8px; }

/* Aufklapper Position der Grussformat-Zeile (unter der Checkbox eingerückt) */
.ads-pos-row { margin: 4px 0 6px 24px; }

/* Sticker-Buttons: gelbe Kreise rechts in der Titelzeile (Backend «Buttons»).
   Anker mit Nullgrösse am rechten Rand des h1 (h1 wird per JS position:relative)
   — beeinflusst den Textfluss nicht; auf der Startseite also in der Lücke
   zwischen Text und rechter Spalte. */
.gf-badges {
  position: absolute; right: 0; top: 0; width: 0; height: 0; overflow: visible;
  letter-spacing: 0; white-space: normal;
}
.gf-badge {
  --d: clamp(96px, 11vw, 150px);
  position: absolute; right: calc(var(--i, 0) * (var(--d) + 12px)); top: calc(var(--d) * -0.12);
  width: var(--d); height: var(--d); border-radius: 50%; box-sizing: border-box; padding: 9%;
  background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 500; font-size: calc(var(--d) * 0.17 * var(--fs, 1)); line-height: 1.05; letter-spacing: -0.01em;
  white-space: pre-line; transform: rotate(-15deg); pointer-events: none;
}
@media (max-width: 600px) {
  /* zu wenig Platz neben dem Titel: Sticker in einer Zeile unter dem Titel */
  h1 .gf-badges { position: relative; right: auto; display: flex; flex-wrap: wrap; gap: 10px; width: auto; height: auto; margin: 10px 0 26px; }
  .gf-badge { --d: 104px; position: static; flex: 0 0 auto; padding: 5%; font-size: calc(var(--d) * 0.15 * var(--fs, 1)); }
}

/* Tastatur-Fokus: sichtbar nur bei Tab-Navigation (:focus-visible) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* 5) iOS zoomt bei Formularfeldern unter 16px hinein — mobil vermeiden */
@media (max-width: 900px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="date"], input:not([type]), select, textarea { font-size: 16px; }
}