/* ============================================================
   setsign — V4
   Vorlage: die App-Store-Kachel und der Floating Action Button
   von examples.motion.dev, übertragen auf setsign.

   Bewusste Abweichung von docs/DESIGN-REGELN.md: Diese Fassung
   benutzt weiche Verläufe und Schatten, die die CI verbietet.
   Das ist der Charakter der Vorlage — ohne sie wäre es eine
   andere Seite. V3 bleibt die CI-konforme Version.
   ============================================================ */

:root {
  --karte-r: 20px;
  --feder: cubic-bezier(0.34, 1.4, 0.44, 1);
}

html, body { background: var(--paper-hi); color: var(--woodsmoke); }
body { margin: 0; min-height: 100dvh; }
::selection { background: var(--cinnabar); color: var(--gallery); }

body.starr { overflow: hidden; }

/* ---------- Kopf ---------- */

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--gutter-lg);
  max-width: 1180px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
}

.brand-mark { width: 34px; height: 34px; display: block; flex-shrink: 0; }

/* Klein — der Sprachführer erlaubt Kleinschreibung genau im Logo. */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-headline);
}

.head-nav { display: flex; gap: var(--sp-5); }

.head-nav a {
  font-size: var(--fs-sm);
  font-weight: var(--weight-demibold);
  color: var(--ink-50);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.head-nav a:hover { color: var(--woodsmoke); }

/* ---------- Aufmacher ---------- */

.lead {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-8);
  align-items: end;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--sp-8) var(--gutter-lg) var(--sp-7);
}

.lead-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: var(--tracking-headline);
}

.lead-copy {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-50);
  max-width: 46ch;
}

.lead-hint { color: var(--ink-30); }

/* ---------- Die Kachelwand ---------- */

.grid {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gutter-lg) var(--sp-8);
  max-width: 1180px;
  /*
     Zwölf Spalten, damit sich 7/5 und 5/7 abwechseln lassen — so steht in
     jeder Reihe eine breite und eine schmale Karte, wie in der Vorlage.
     Die Reihenhöhe ist fest statt über aspect-ratio: Sonst wäre die breite
     Karte proportional höher und die Reihe stünde schief.
  */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 380px;
  gap: var(--sp-5);
}

.grid > li { display: block; grid-column: span 5; }
.grid > li:has(.card-wide) { grid-column: span 7; }

.card {
  position: relative;
  /* Flex statt block: Ein <button> zentriert seinen Inhalt sonst von selbst,
     und die Beschriftung gehört nach oben. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: var(--sp-6);
  border: 0;
  border-radius: var(--karte-r);
  background: var(--white);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.06), 0 12px 32px -12px rgba(18, 18, 18, 0.18);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(18, 18, 18, 0.07), 0 22px 48px -14px rgba(18, 18, 18, 0.24);
}

.card:active { transform: translateY(-1px) scale(0.994); }
.card:focus-visible { outline: var(--border-w-3) solid var(--woodsmoke); outline-offset: 3px; }

/* Solange die Karte offen ist, bleibt ihr Platz frei — das aufgeklappte
   Gegenstück liegt darüber und soll nicht doppelt zu sehen sein. */
.card.ist-offen { visibility: hidden; }

/*
   Die Farbflächen. Statt Fotos, die es noch nicht gibt: weiche Verläufe aus
   der Palette. Jede Karte bekommt ihren eigenen Verlauf, damit sie sich
   auseinanderhalten lassen.
*/
.card-media,
.detail-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.detail-media { position: relative; height: 260px; border-radius: 0; }

[data-media="set"] {
  background:
    radial-gradient(120% 90% at 12% 108%, #FFB48A 0%, rgba(255, 180, 138, 0) 58%),
    radial-gradient(90% 80% at 82% 12%, #C9D8FF 0%, rgba(201, 216, 255, 0) 62%),
    linear-gradient(160deg, #FFFFFF 0%, #F2F4F8 100%);
}

[data-media="nachweis"] {
  background:
    radial-gradient(110% 90% at 88% 102%, #EA4335 0%, rgba(234, 67, 53, 0) 56%),
    radial-gradient(90% 80% at 10% 8%, #FFE2B0 0%, rgba(255, 226, 176, 0) 60%),
    linear-gradient(150deg, #FFFFFF 0%, #F4F1EE 100%);
}

[data-media="archiv"] {
  background:
    radial-gradient(120% 95% at 20% 100%, #B9C6D6 0%, rgba(185, 198, 214, 0) 60%),
    radial-gradient(80% 70% at 90% 6%, #E4EAF2 0%, rgba(228, 234, 242, 0) 64%),
    linear-gradient(170deg, #FFFFFF 0%, #EFF2F6 100%);
}

[data-media="zuruf"] {
  background:
    radial-gradient(100% 90% at 92% 96%, #FFC46B 0%, rgba(255, 196, 107, 0) 56%),
    radial-gradient(95% 85% at 6% 14%, #FFD9CF 0%, rgba(255, 217, 207, 0) 62%),
    linear-gradient(155deg, #FFFFFF 0%, #F7F2EE 100%);
}

.card-text {
  position: relative;
  z-index: 1;
  display: block;
}

.card-kicker {
  display: block;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-50);
}

.card-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.08;
  letter-spacing: var(--tracking-headline);
}

.fuss {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter-lg) var(--sp-9);
  font-size: var(--fs-sm);
  color: var(--ink-30);
}

/* ---------- Die aufgeklappte Karte ---------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(18, 18, 18, 0.42);
  opacity: 0;
}

.scrim[hidden] { display: none; }

.detail {
  position: fixed;
  z-index: 50;
  /*
     Das Standardstylesheet des Browsers setzt auf einem modalen <dialog>
     inset: 0. Zusammen mit height: auto spannt sich das Element dann zwischen
     oben und unten auf und meldet Fensterhöhe statt Inhaltshöhe — die Messung
     im Skript käme immer an die Obergrenze. Positioniert wird über left/top,
     also gehören rechts und unten auf auto.
  */
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--karte-r);
  background: var(--white);
  color: var(--woodsmoke);
  overflow: hidden auto;
  max-width: none;
  max-height: none;
  box-shadow: 0 40px 90px -30px rgba(18, 18, 18, 0.45);
}

.detail::backdrop { background: none; }

.detail-zu {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.72);
  color: var(--gallery);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.detail-zu:hover { background: var(--woodsmoke); }
.detail-zu:focus-visible { outline: var(--border-w-3) solid var(--woodsmoke); outline-offset: 2px; }

.detail-text { padding: var(--sp-7); max-width: 62ch; }

.detail-titel {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.06;
  letter-spacing: var(--tracking-headline);
}

.detail-text p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-70);
}

.detail-text p strong { color: var(--woodsmoke); font-weight: var(--weight-bold); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px var(--sp-5);
  border-radius: var(--r-2);
  font-size: var(--fs-base);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary { background: var(--cinnabar); color: var(--gallery); }
.btn-primary:hover { background: var(--cinnabar-hover); }

/* Der Inhalt kommt eine Spur später als die Karte — erst die Bewegung,
   dann der Text. */
.detail-text > * { opacity: 0; }

/* ---------- Aktionsknopf ---------- */

.fab-wrap {
  position: fixed;
  right: var(--sp-5);
  bottom: 64px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}

.fab-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
}

.fab-menu[hidden] { display: none; }

.fab-item {
  padding: 10px var(--sp-4);
  border-radius: 999px;
  background: var(--white);
  color: var(--woodsmoke);
  font-size: var(--fs-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(18, 18, 18, 0.1), 0 14px 30px -12px rgba(18, 18, 18, 0.3);
}

.fab-item:hover { background: var(--woodsmoke); color: var(--gallery); }

.fab {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--cinnabar);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(18, 18, 18, 0.16), 0 16px 34px -12px rgba(234, 67, 53, 0.6);
  transition: background var(--dur-fast) var(--ease-out);
}

.fab:hover { background: var(--cinnabar-hover); }
.fab:focus-visible { outline: var(--border-w-3) solid var(--woodsmoke); outline-offset: 3px; }

/* Ein Plus, das sich beim Öffnen zum Kreuz dreht. */
.fab-kreuz {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
  transition: transform var(--dur-base) var(--feder);
}

.fab-kreuz::before,
.fab-kreuz::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--gallery);
  transform: translateY(-50%);
}

.fab-kreuz::after { transform: translateY(-50%) rotate(90deg); }
.fab[aria-expanded="true"] .fab-kreuz { transform: rotate(135deg); }

/* ---------- Versions-Switch ---------- */

.version-switch {
  position: fixed;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 46;
  display: inline-flex;
  border: var(--border-w) solid var(--ink-10);
  border-radius: 999px;
  background: var(--white);
  overflow: hidden;
}

.vs-item {
  padding: 6px 13px;
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-50);
  text-decoration: none;
}

.vs-item:hover { color: var(--woodsmoke); }
.vs-active { background: var(--woodsmoke); color: var(--gallery); }

/* ---------- Schmale Fenster ---------- */

@media (max-width: 900px) {
  .head, .lead, .grid, .fuss { padding-left: var(--gutter); padding-right: var(--gutter); }
  .lead { grid-template-columns: 1fr; gap: var(--sp-5); padding-top: var(--sp-6); }
  .grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .grid > li,
  .grid > li:has(.card-wide) { grid-column: span 1; }
  .card { padding: var(--sp-5); }
  .detail-text { padding: var(--sp-5); }
  .detail-media { height: 190px; }
}

/*
   Wer Bewegung abbestellt hat, bekommt keine. Die Karte erscheint dann
   einfach — das Skript prüft dieselbe Einstellung und überspringt das
   Aufklappen.
*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover { transform: none; }
}