/* Matrix Marketing – /arbeiten: «Ihr Name auf dem Titel» (13.10.2026). Gilt zusammen mit assets/js/titel-probe.js.
   Die letzte Kachel der Titelwand öffnet ein Vorschaufenster mit einer MEISTERWERK-Titelseite: Heftkopf als Pfade aus dem
   InDesign-Cover (im HTML), Band und Name in der gewählten Hausfarbe, dunkles Bildfeld mit dem Platzhalterkreuz wie in InDesign,
   Stempel «Vorschau». Alle Masse der Titelseite in cqw (Breite der Seite), gemessen am Cover-PDF (A4, 595,3 × 841,9 pt) und am
   Raiffeisen-Titel (1200 × 1697 px) – so sieht die Seite bei jeder Grösse gleich aus.
   Ohne JS bleibt das Fenster zu (die Kachel ist dann der Link zum Formular). Bewegung nur Einblenden (opacity, transform);
   bei «weniger Bewegung» steht alles sofort da. Keine Schatten, keine runden Ecken, keine Verläufe. */

html.tp-offen { overflow: hidden; }

/* ------------------------------------------------------------------ Fenster */
.titel-probe {
  width: min(1060px, calc(100vw - 64px)); max-width: none;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  margin: auto; padding: 0;
  border: 1px solid var(--linie-stark);
  background: #0D0D0C; color: var(--elfenbein);
  overflow: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .32s var(--ease);
}
.titel-probe.is-offen { opacity: 1; }
.titel-probe::backdrop { background: rgba(10, 10, 10, .88); }
.titel-probe:focus, .tp-titel:focus { outline: none; }

.tp-leiste {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 0 12px 0 28px;
  background: #0D0D0C; border-bottom: 1px solid var(--linie);
}
.tp-zu { position: relative; width: 44px; height: 44px; flex: none; -webkit-tap-highlight-color: transparent; }
.tp-zu span { position: absolute; left: 9px; top: 21.5px; width: 26px; height: 1px; background: var(--elfenbein); transition: background-color .3s var(--ease); }
.tp-zu span:first-child { transform: rotate(45deg); }
.tp-zu span:last-child { transform: rotate(-45deg); }
.tp-zu:hover span { background: var(--gold); }
/* Runde 6: Schliessen mit feinem Goldrahmen wie im Menü und in der Grossansicht (Kreuz bleibt mittig im 44-px-Feld) */
.tp-zu { border: 1px solid rgba(194, 181, 155, .62); transition: border-color .3s var(--ease); }
.tp-zu:hover { border-color: var(--gold); }
.tp-zu span { left: 8px; top: 20.5px; }

.tp-innen { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.tp-buehne { display: grid; place-items: center; padding: 40px 48px; background: var(--schwarz); border-right: 1px solid var(--linie); }
.tp-steuer { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 40px 48px; }

/* ------------------------------------------------------------------ Hausfarben (feste Liste; Muster und Titelseite) */
.tp-heft, .tp-farbe--rot, .tp-heft[data-farbe="rot"] { --tp-farbe: #D52B1E; }
.tp-farbe--bordeaux, .tp-heft[data-farbe="bordeaux"] { --tp-farbe: #861E1E; }
.tp-farbe--orange, .tp-heft[data-farbe="orange"] { --tp-farbe: #C2541A; }
.tp-farbe--gruen, .tp-heft[data-farbe="gruen"] { --tp-farbe: #1F5C45; }
.tp-farbe--blau, .tp-heft[data-farbe="blau"] { --tp-farbe: #1C3F73; }
.tp-farbe--anthrazit, .tp-heft[data-farbe="anthrazit"] { --tp-farbe: #262626; }

/* ------------------------------------------------------------------ Titelseite */
.tp-heft {
  container-type: inline-size;
  position: relative; display: block; overflow: hidden;
  width: calc(min(68vh, 680px) / 1.41417);
  aspect-ratio: 1200 / 1697;
  background: #fff; color: #141414;
  transform: translateY(14px); transition: transform .7s var(--ease);
}
.titel-probe.is-offen .tp-heft { transform: none; }

/* Heftkopf: Ausschnitt x 50,5–545 pt, y 33,9–134,4 pt des Covers */
.tp-kopf { position: absolute; left: 8.483cqw; top: 5.695cqw; width: 83.07cqw; height: 16.883cqw; overflow: visible; }
.tp-kopf__wort { fill: var(--tp-farbe); }
.tp-kopf__unter, .tp-kopf__linien { fill: #141414; }

/* Band mit dem Leitsatz (y 156–188 pt) */
.tp-band {
  position: absolute; left: 0; right: 0; top: 26.206cqw; height: 5.376cqw;
  display: flex; align-items: center; justify-content: center; padding-left: .2em;
  background: var(--tp-farbe); color: #fff;
  font-family: var(--f-text); font-weight: 500; font-size: 2.2cqw; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}

/* Bildfeld (bis zur Fussleiste, wie beim Raiffeisen-Titel 378–1530 px) */
.tp-bild { position: absolute; left: 0; right: 0; top: 31.582cqw; bottom: 13.917cqw; display: grid; place-items: center; background: #1A1A1A; }
.tp-bild__kreuz { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp-bild__kreuz line { stroke: rgba(255, 255, 255, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tp-bild__text {
  position: relative; padding: .45em 1.1em .5em; background: #1A1A1A;
  font-family: var(--f-akzent); font-style: italic; font-weight: 380; font-size: 4.2cqw; line-height: 1.2;
  letter-spacing: -.005em; color: rgba(236, 231, 220, .78); white-space: nowrap;
}
/* Runde 6 (14.10.2026): Das graue Platzhalterkreuz wirkte wie ein Entwurf. Jetzt dunkler Marmor mit Goldader (dieselbe
   Marmorfläche wie im Schluss der Startseite) und eine feine Goldlinie als Passepartout; der Hinweis in Gold zwischen zwei
   Haarlinien. Das Kreuz bleibt im HTML, ist aber ausgeblendet. */
.tp-bild { background: #0E0D0C url("/assets/img/marmor-cta-bl-640.webp?v=3177b07bee") 34% 46% / cover no-repeat;
  background-image: -webkit-image-set(url("/assets/img/marmor-cta-bl-640.webp?v=3177b07bee") 1x, url("/assets/img/marmor-cta-bl-1280.webp?v=ef6d9e275c") 2x);
  background-image: image-set(url("/assets/img/marmor-cta-bl-640.webp?v=3177b07bee") 1x, url("/assets/img/marmor-cta-bl-1280.webp?v=ef6d9e275c") 2x); }
/* Bildprüfung A3 (14.10.2026): Retina und Handy bekommen die 1280er (13 KB), wie das Marmorbild im Schluss (srcset 640w/1280w) */
.tp-bild::before { content: ""; position: absolute; inset: 2.2cqw; border: 1px solid rgba(194, 181, 155, .4); pointer-events: none; }
.tp-bild__kreuz { display: none; }
.tp-bild__text { padding: .38em 1em .44em; background: #0E0D0C; border-block: 1px solid rgba(194, 181, 155, .45); color: var(--gold-hell); }

/* Stempel «Vorschau» oben rechts im Bildfeld */
.tp-stempel {
  position: absolute; top: 36.4cqw; right: 5.4cqw;
  padding: .78em .95em .72em 1.25em;
  border: max(1px, .26cqw) solid var(--gold);
  outline: max(1px, .13cqw) solid rgba(194, 181, 155, .5); outline-offset: .6cqw;
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 1.95cqw; line-height: 1;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  transform: rotate(-5deg);
}

/* Fussleiste weiss mit dem Namen (Grösse setzt titel-probe.js: höchstens 9 % der Breite, höchstens zwei Zeilen) */
.tp-fuss { position: absolute; left: 0; right: 0; bottom: 0; height: 13.917cqw; display: flex; align-items: center; padding: 1.5cqw 6.667cqw; background: #fff; }
.tp-name {
  display: block; width: 100%; min-width: 0;
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600;
  font-size: calc(var(--tp-gr, 6) * 1cqw); line-height: 1.08; letter-spacing: -.012em;
  color: var(--tp-farbe); text-wrap: balance; hyphens: manual; overflow-wrap: normal; word-break: normal;
}
.tp-name.is-leer { color: #3d3d3d; }   /* 14.10.2026 (Gutachten Runde 7): Platzhalter «Ihr Betrieb» gut lesbar (vorher Rot mit 30 % Deckkraft, blassrosa auf Weiss) */
@supports selector(:has(*)) {   /* solange kein Name steht: Fussleiste dunkel, Platzhalter in Gold (Hausfarbe) */
  .tp-fuss:has(> .tp-name.is-leer) { background: #141414; }
  .tp-fuss > .tp-name.is-leer { color: var(--gold); }
}
/* 13.10.2026: überlanges Einzelwort darf auf zwei Zeilen umbrechen, mit Trennstrich, wo die Sprache ihn kennt (titel-probe.js) */
.tp-name.is-umbruch { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Bedienung */
.tp-titel { font-size: clamp(26px, 1.4rem + .9vw, 36px); }
.tp-lead { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.tp-feld { margin-top: 30px; }
.tp-feld .feld__hinweis { margin-top: 2px; }

.tp-farben { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; }
.tp-farben legend { display: flex; align-items: baseline; gap: 12px; padding: 0; margin-bottom: 12px; }
.tp-farben__name { font-family: var(--f-text); font-stretch: normal; font-weight: 400; font-size: 13px; letter-spacing: .02em; text-transform: none; color: var(--text-2); }
.tp-farben__reihe { display: grid; grid-template-columns: repeat(6, minmax(0, 44px)); gap: 8px; }
.tp-farbe { position: relative; display: block; aspect-ratio: 1 / 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tp-farbe input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tp-farbe__muster { display: block; width: 100%; height: 100%; background: var(--tp-farbe); border: 1px solid rgba(236, 231, 220, .22); transition: border-color .25s var(--ease); }
.tp-farbe:hover .tp-farbe__muster { border-color: rgba(236, 231, 220, .55); }
.tp-farbe input:checked + .tp-farbe__muster { outline: 1px solid var(--gold); outline-offset: 3px; border-color: rgba(236, 231, 220, .4); }
.tp-farbe input:focus-visible + .tp-farbe__muster { outline: 2px solid var(--gold); outline-offset: 3px; }

.tp-preis { display: grid; gap: 6px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linie); }
.tp-preis__betrag { font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -.005em; color: var(--elfenbein); font-variant-numeric: tabular-nums; }
.tp-preis__zusatz { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.tp-los { align-self: flex-start; min-width: 240px; margin-top: 22px; }
.tp-hinweis { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--grau); }

/* ------------------------------------------------------------------ Handy, Tablet hoch, niedrige Fenster: volle Fläche */
@media (max-width: 899px), (max-height: 559px) {
  .titel-probe { width: 100%; height: 100%; max-width: none; max-height: none; border: 0; }
  .tp-leiste { min-height: 56px; padding: env(safe-area-inset-top) calc(var(--rand) - 10px) 0 var(--rand); }
  .tp-innen { display: block; }
  .tp-buehne { padding: 20px var(--rand) 4px; background: transparent; border-right: 0; }
  .tp-heft { width: min(100%, calc(46vh / 1.41417)); width: min(100%, calc(46svh / 1.41417)); }
  .tp-steuer { max-width: 600px; margin-inline: auto; padding: 22px var(--rand) calc(36px + env(safe-area-inset-bottom)); }
  .tp-titel { font-size: clamp(22px, 5.6vw, 30px); }
  .tp-lead { font-size: 15px; margin-top: 8px; }
  .tp-feld { margin-top: 20px; }
  .tp-los { align-self: stretch; min-width: 0; }
}
/* 13.10.2026 Handy quer: Titelseite und Bedienung nebeneinander – die Seite bleibt beim Tippen stehen (vorher lag sie untereinander
   oberhalb des Felds, beim Tippen ausser Sicht: 844 × 390 Heft bei −142…37 px) */
@media (orientation: landscape) and (max-height: 559px) {
  .tp-innen { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .tp-buehne { position: sticky; top: 56px; height: calc(100vh - 56px); padding: 12px 8px 12px var(--rand); }
  .tp-heft { width: calc((100vh - 56px - 24px) / 1.41417); }
  @supports (height: 1svh) {
    .tp-buehne { height: calc(100svh - 56px); }
    .tp-heft { width: calc((100svh - 56px - 24px) / 1.41417); }
  }
  .tp-steuer { max-width: 560px; margin: 0; padding: 16px var(--rand) calc(24px + env(safe-area-inset-bottom)) 24px; }
  .tp-lead { margin-top: 6px; }
  .tp-feld { margin-top: 14px; }
  .tp-farben { margin-top: 16px; }
  .tp-preis { margin-top: 18px; padding-top: 14px; }
  .tp-los { align-self: flex-start; min-width: 240px; margin-top: 14px; }
}
@media (max-width: 359px) {
  .tp-farben__reihe { gap: 6px; }
  .tp-leiste__kicker { font-size: 10px; letter-spacing: .1em; }
  .tp-preis__betrag { font-size: 16px; }
}

/* ------------------------------------------------------------------ Weniger Bewegung: ohne Einblenden */
@media (prefers-reduced-motion: reduce) {
  .titel-probe, .tp-heft { transition: none; }
  .titel-probe { opacity: 1; }
  .tp-heft { transform: none; }
}