/* ===========================================================================
   viceversa.swiss (Neubau) · «Drei Türen» — nur auf der Leistungs-Dachseite
   Angelegt 08.10.2026. Markup und Herkunft der Inhalte: _lib/drei-tueren.php.

   Nach der Lieferung der Fachsession (Vorbild beingluminous.com: luftig,
   Serifentitel, eine Spur wärmer). Ihre festen Farbwerte sind hier durch
   Mischungen aus der Hauspalette ersetzt — dieselben Töne, aber eine Quelle:
     Papier  = Grund, zur Hälfte aufgehellt     (Lieferung #fbf9f5)
     Band    = Grund mit einem Hauch Feld       (Lieferung #efe9e0)
     Linie   = Feld, halb in den Grund gemischt (Lieferung #ddd2c4)
     leise   = Text, zu einem Fünftel im Grund  (Lieferung #6f6659)
   Seit dem 08.10.2026 abends lädt jede Seite diese Datei: Die Karten
   tragen auch die Trilogie der Startseite (Markus: «Wie Drei Räume»).
   =========================================================================== */

/* Die Töne gelten überall, wo die Karte steht — auf Leistungen und in der
   Trilogie der Startseite. */
.vv-dt, .vv-dt-gruppe, .vv-trilogie-raum {
  --dt-serif: var(--vv-schrift-neben);   /* Karten, Nummern, Bänder: Newsreader */
  --dt-papier: color-mix(in srgb, var(--vv-weiss) 55%, var(--vv-grund));
  --dt-band: color-mix(in srgb, var(--vv-feld) 16%, var(--vv-grund));
  --dt-linie: color-mix(in srgb, var(--vv-feld) 55%, var(--vv-grund));
  --dt-linie-leise: color-mix(in srgb, var(--vv-feld) 32%, var(--vv-grund));
  --dt-leise: color-mix(in srgb, var(--vv-text) 80%, var(--vv-grund));
  --dt-schatten: color-mix(in srgb, var(--vv-rot) 45%, transparent);
}
.vv-dt { padding-block: clamp(56px, 7vw, 96px); }

/* Kopf des Elements ------------------------------------------------------- */
.vv-dt-augenbraue { display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  font-size: 14px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--vv-rot); }
/* Der Gedankenstrich vor der Caption — nur in diesem Element (Markus, 08.10.). */
.vv-dt-augenbraue::before { content: ""; width: 34px; height: 1.5px; background: var(--vv-rot); }
.vv-dt .vv-dt-titel { margin: 0; font-family: var(--vv-schrift-titel); font-variant-numeric: lining-nums; font-optical-sizing: auto;
  font-weight: 380; font-size: clamp(2.9rem, 7vw, 5rem); line-height: 1; letter-spacing: -.01em;
  color: var(--vv-text); text-transform: none; }
.vv-dt-unter { margin: 18px 0 0; font-family: var(--dt-serif); font-weight: 350; font-style: italic;
  font-size: clamp(1.15rem, 2.3vw, 1.55rem); line-height: 1.4; color: var(--dt-leise); }
.vv-dt-unter::before { content: "— "; color: var(--vv-rot); font-style: normal; }
/* Die eine Hauptaussage trägt die rote Leiste. */
.vv-dt-kern { max-width: 760px; margin: clamp(34px, 5vw, 52px) 0 clamp(40px, 6vw, 60px);
  padding-left: 18px; border-left: 4px solid var(--vv-rot);
  font-family: var(--dt-serif); font-weight: 360; font-size: clamp(1.3rem, 2.9vw, 1.95rem);
  line-height: 1.32; letter-spacing: -.005em; color: var(--vv-text); text-wrap: balance; }

/* Die Türen --------------------------------------------------------------- */
.vv-dt-tueren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.vv-dt-tuer { position: relative; display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; overflow: hidden; padding: 34px 28px 30px; text-align: left; cursor: pointer;
  font: inherit; color: inherit; background: var(--dt-papier);
  border: 1px solid var(--dt-linie); border-radius: 3px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; }
.vv-dt-tuer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--vv-rot); transform: scaleY(0); transform-origin: top;
  transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.vv-dt-tuer:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -28px var(--dt-schatten); }
.vv-dt-tuer:hover::before, .vv-dt-tuer[aria-selected="true"]::before { transform: scaleY(1); }
.vv-dt-tuer[aria-selected="true"] { border-color: var(--vv-rot); box-shadow: 0 22px 44px -30px var(--dt-schatten); }
.vv-dt-tuer:focus-visible { outline: 2px solid var(--vv-rot); outline-offset: 3px; }

.vv-dt-nr { margin-bottom: 18px; font-family: var(--dt-serif); font-weight: 300;
  font-size: clamp(2.6rem, 4.4vw, 3.3rem); line-height: 1; color: var(--vv-rot); }
/* Labels in Versalien nie unter 14px, Sperrung 1.4px (Lieferung 08.10.2026,
   Markus: «FÜR MITARBEITENDE & TEAMS … ist deutlich zu klein»). */
.vv-dt-fuer { margin-bottom: 8px; font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 500; line-height: 1.5; color: var(--dt-leise); }
.vv-dt-name { margin-bottom: 14px; font-family: var(--dt-serif); font-weight: 420;
  font-size: clamp(1.3rem, 2.1vw, 1.68rem); line-height: 1.1; letter-spacing: -.01em; color: var(--vv-text); }
.vv-dt-buehne { font-size: 15px; line-height: 1.55; color: var(--dt-leise); }
.vv-dt-buehne::before { content: "— "; color: var(--vv-rot); }
.vv-dt-mehr { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 20px;
  font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 500; color: var(--vv-rot); }
.vv-dt-mehr i { font-style: normal; transition: transform .35s; }
.vv-dt-tuer:hover .vv-dt-mehr i { transform: translateX(4px); }
.vv-dt-tuer[aria-selected="true"] .vv-dt-mehr { opacity: .55; }

/* Das Band unter den Türen ------------------------------------------------ */
.vv-dt-baender { margin-top: clamp(16px, 2vw, 26px); }
.vv-dt-band { padding: clamp(28px, 4vw, 46px) clamp(26px, 4vw, 52px);
  background: var(--dt-band); border: 1px solid var(--dt-linie); border-radius: 3px; }
.vv-dt-band + .vv-dt-band { margin-top: 16px; }
/* Mit Skript nur das gewählte Band; ohne Skript stehen alle drei da. */
.vv-js .vv-dt-band[data-zu] { display: none; }
.vv-dt-band-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--dt-linie); }
.vv-dt-band-nr { font-family: var(--dt-serif); font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--vv-rot); }
.vv-dt-gruppe .vv-dt-band-titel { margin: 0; font-family: var(--dt-serif); font-weight: 440;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.08; letter-spacing: -.01em; color: var(--vv-text); text-transform: none; }
.vv-dt-band-fuer { margin-left: auto; font-size: 14px; letter-spacing: 1.4px; line-height: 1.5; text-transform: uppercase;
  font-weight: 500; color: var(--dt-leise); }
.vv-dt-band-rumpf { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: start; }
.vv-dt-band-text { max-width: 62ch; margin: 0; font-size: 17px; line-height: 1.72; color: var(--vv-text); }
.vv-dt-band-text strong { font-weight: 500; color: var(--vv-rot); }
.vv-dt-band-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; padding: 12px 22px;
  font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 500; text-decoration: none;
  color: var(--vv-rot); border: 1px solid var(--vv-rot); border-radius: 2px; transition: background .3s, color .3s; }
.vv-dt-band-link i { font-style: normal; }
.vv-dt-band-link:hover { background: var(--vv-rot); color: var(--dt-papier); }
.vv-dt-band-lbl { display: block; margin-bottom: 20px; font-family: var(--dt-serif);
  font-size: 24px; line-height: 1.25; font-weight: 400; letter-spacing: normal;
  text-transform: none; color: var(--vv-text); }
/* «Fünf Angebote» ist ein Titel, kein Hilfslabel (Lieferung 08.10.2026):
   gemischt geschrieben, in Textfarbe, gut doppelt so gross wie das Label. */
.vv-dt-angebote { margin: 0; padding: 0; list-style: none; }
.vv-dt-angebote li { display: flex; gap: 11px; align-items: baseline; padding: 11px 0;
  font-family: var(--dt-serif); font-size: 23px; line-height: 1.3; color: var(--vv-text); border-top: 1px solid var(--dt-linie-leise); }
.vv-dt-angebote li:last-child { border-bottom: 1px solid var(--dt-linie-leise); }
.vv-dt-angebote li span { min-width: 24px; font-family: var(--dt-serif); font-size: 14px; color: var(--vv-rot); }
@media (max-width: 820px) { .vv-dt-angebote li { font-size: 20px; } }

@media (max-width: 820px) {
  .vv-dt-tueren { grid-template-columns: minmax(0, 1fr); }
  .vv-dt-band-rumpf { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .vv-dt-band-fuer { margin-left: 0; width: 100%; }
  .vv-dt-kern { margin-top: 30px; }
  /* Am Handy rückt das Band unter die gewählte Tür (Skript). */
  .vv-js .vv-dt-tueren .vv-dt-band { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vv-dt-tuer, .vv-dt-tuer::before, .vv-dt-mehr i, .vv-dt-band-link { transition: none; }
  .vv-dt-tuer:hover { transform: none; }
}

/* Startseite: die Karten der Trilogie mit Band (08.10.2026). Das Raster
   (Symptomsatz über der Karte) steht in start.css; hier nur der Abstand des
   Bands und der Pfeil nach unten, der sich beim Öffnen dreht. */
.vv-dt-start .vv-dt-baender { margin-top: clamp(16px, 2vw, 26px); }
.vv-dt-start .vv-dt-tuer[aria-expanded="true"] { border-color: var(--vv-rot); box-shadow: 0 22px 44px -30px var(--dt-schatten); }
.vv-dt-start .vv-dt-tuer[aria-expanded="true"]::before { transform: scaleY(1); }
.vv-dt-start .vv-dt-mehr i { display: inline-block; transition: transform .3s; }
.vv-dt-start .vv-dt-tuer[aria-expanded="true"] .vv-dt-mehr i { transform: rotate(180deg); }
.vv-dt-start .vv-dt-tuer:hover .vv-dt-mehr i { transform: none; }
.vv-dt-start .vv-dt-tuer[aria-expanded="true"]:hover .vv-dt-mehr i { transform: rotate(180deg); }
@media (max-width: 999px) {
  .vv-dt-start .vv-trilogie > .vv-dt-band { margin-top: 12px; }
}

/* Antippen springt zur Oberkante der Karte (drei-tueren.php, hinspringen).
   Der Abstand hält die Karte frei von der festen Leiste: am Handy 51px
   Streifen, ab 768px schweben Logo und Knopf bis 79px (nachgemessen
   09.10.2026), je mit etwas Luft. */
.vv-dt-tuer { scroll-margin-top: 92px; }
@media (max-width: 767px) { .vv-dt-tuer { scroll-margin-top: 64px; } }

/* Der rote Streifen links wandert langsamer herab (Markus, 09.10.2026:
   «etwas langsamer nach unten wandern und vollständig angezeigt werden …
   geht so schnell, dass man diese Bewegung, die ästhetisch ist, kaum
   sieht»). Vorher .45s mit schnellem Start — der Strich war fast sofort
   unten. Jetzt 1.2s, gleichmässig an- und auslaufend. Gilt nur beim
   Erscheinen; beim Verschwinden bleibt es kurz.
   Am Handy und iPad springt die Seite beim Antippen erst zur Karte
   (drei-tueren.php); der Strich beginnt darum dort, wenn der Sprung
   vorbei ist, sonst liefe er während der Fahrt ungesehen ab. */
.vv-dt-tuer:hover::before,
.vv-dt-tuer[aria-selected="true"]::before,
.vv-dt-start .vv-dt-tuer[aria-expanded="true"]::before {
  transition: transform 1.2s cubic-bezier(.45, 0, .25, 1); }
@media (hover: none), (pointer: coarse) {
  .vv-dt-tuer[aria-selected="true"]::before,
  .vv-dt-start .vv-dt-tuer[aria-expanded="true"]::before { transition-delay: .45s; }
}
@media (prefers-reduced-motion: reduce) {
  .vv-dt-tuer::before, .vv-dt-tuer:hover::before,
  .vv-dt-tuer[aria-selected="true"]::before,
  .vv-dt-start .vv-dt-tuer[aria-expanded="true"]::before { transition: none; }
}