html {
  font-size: 16px;
}
@media (max-width: 1280px) {
  html {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 12px;
  }
}

.fs-0 {
  font-size: 0.6rem;
}

.py-0 {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.px-0 {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

.pb-0 {
  padding-bottom: 0.6rem;
}

.pt-0 {
  padding-top: 0.6rem;
}

.pr-0 {
  padding-right: 0.6rem;
}

.pl-0 {
  padding-left: 0.6rem;
}

.mt-0 {
  margin-top: 0.6rem;
}

.mb-0 {
  margin-bottom: 0.6rem;
}

.gx-0 {
  -moz-column-gap: 0.6rem;
       column-gap: 0.6rem;
}

.gy-0 {
  row-gap: 0.6rem;
}

.fs-1 {
  font-size: 1.2rem;
}

.py-1 {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.px-1 {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.pb-1 {
  padding-bottom: 1.2rem;
}

.pt-1 {
  padding-top: 1.2rem;
}

.pr-1 {
  padding-right: 1.2rem;
}

.pl-1 {
  padding-left: 1.2rem;
}

.mt-1 {
  margin-top: 1.2rem;
}

.mb-1 {
  margin-bottom: 1.2rem;
}

.gx-1 {
  -moz-column-gap: 1.2rem;
       column-gap: 1.2rem;
}

.gy-1 {
  row-gap: 1.2rem;
}

.fs-2 {
  font-size: 2.4rem;
}

.py-2 {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.px-2 {
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}

.pb-2 {
  padding-bottom: 2.4rem;
}

.pt-2 {
  padding-top: 2.4rem;
}

.pr-2 {
  padding-right: 2.4rem;
}

.pl-2 {
  padding-left: 2.4rem;
}

.mt-2 {
  margin-top: 2.4rem;
}

.mb-2 {
  margin-bottom: 2.4rem;
}

.gx-2 {
  -moz-column-gap: 2.4rem;
       column-gap: 2.4rem;
}

.gy-2 {
  row-gap: 2.4rem;
}

.fs-3 {
  font-size: 3.2rem;
}

.py-3 {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

.px-3 {
  padding-left: 3.2rem;
  padding-right: 3.2rem;
}

.pb-3 {
  padding-bottom: 3.2rem;
}

.pt-3 {
  padding-top: 3.2rem;
}

.pr-3 {
  padding-right: 3.2rem;
}

.pl-3 {
  padding-left: 3.2rem;
}

.mt-3 {
  margin-top: 3.2rem;
}

.mb-3 {
  margin-bottom: 3.2rem;
}

.gx-3 {
  -moz-column-gap: 3.2rem;
       column-gap: 3.2rem;
}

.gy-3 {
  row-gap: 3.2rem;
}

.fs-4 {
  font-size: 4.8rem;
}

.py-4 {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

.px-4 {
  padding-left: 4.8rem;
  padding-right: 4.8rem;
}

.pb-4 {
  padding-bottom: 4.8rem;
}

.pt-4 {
  padding-top: 4.8rem;
}

.pr-4 {
  padding-right: 4.8rem;
}

.pl-4 {
  padding-left: 4.8rem;
}

.mt-4 {
  margin-top: 4.8rem;
}

.mb-4 {
  margin-bottom: 4.8rem;
}

.gx-4 {
  -moz-column-gap: 4.8rem;
       column-gap: 4.8rem;
}

.gy-4 {
  row-gap: 4.8rem;
}

.fs-5 {
  font-size: 5.5rem;
}

.py-5 {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.px-5 {
  padding-left: 5.5rem;
  padding-right: 5.5rem;
}

.pb-5 {
  padding-bottom: 5.5rem;
}

.pt-5 {
  padding-top: 5.5rem;
}

.pr-5 {
  padding-right: 5.5rem;
}

.pl-5 {
  padding-left: 5.5rem;
}

.mt-5 {
  margin-top: 5.5rem;
}

.mb-5 {
  margin-bottom: 5.5rem;
}

.gx-5 {
  -moz-column-gap: 5.5rem;
       column-gap: 5.5rem;
}

.gy-5 {
  row-gap: 5.5rem;
}

.fs-7 {
  font-size: 7.4rem;
}

.py-7 {
  padding-top: 7.4rem;
  padding-bottom: 7.4rem;
}

.px-7 {
  padding-left: 7.4rem;
  padding-right: 7.4rem;
}

.pb-7 {
  padding-bottom: 7.4rem;
}

.pt-7 {
  padding-top: 7.4rem;
}

.pr-7 {
  padding-right: 7.4rem;
}

.pl-7 {
  padding-left: 7.4rem;
}

.mt-7 {
  margin-top: 7.4rem;
}

.mb-7 {
  margin-bottom: 7.4rem;
}

.gx-7 {
  -moz-column-gap: 7.4rem;
       column-gap: 7.4rem;
}

.gy-7 {
  row-gap: 7.4rem;
}

.fs-10 {
  font-size: 11.6rem;
}

.py-10 {
  padding-top: 11.6rem;
  padding-bottom: 11.6rem;
}

.px-10 {
  padding-left: 11.6rem;
  padding-right: 11.6rem;
}

.pb-10 {
  padding-bottom: 11.6rem;
}

.pt-10 {
  padding-top: 11.6rem;
}

.pr-10 {
  padding-right: 11.6rem;
}

.pl-10 {
  padding-left: 11.6rem;
}

.mt-10 {
  margin-top: 11.6rem;
}

.mb-10 {
  margin-bottom: 11.6rem;
}

.gx-10 {
  -moz-column-gap: 11.6rem;
       column-gap: 11.6rem;
}

.gy-10 {
  row-gap: 11.6rem;
}

.fs-12 {
  font-size: 12rem;
}

.py-12 {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.px-12 {
  padding-left: 12rem;
  padding-right: 12rem;
}

.pb-12 {
  padding-bottom: 12rem;
}

.pt-12 {
  padding-top: 12rem;
}

.pr-12 {
  padding-right: 12rem;
}

.pl-12 {
  padding-left: 12rem;
}

.mt-12 {
  margin-top: 12rem;
}

.mb-12 {
  margin-bottom: 12rem;
}

.gx-12 {
  -moz-column-gap: 12rem;
       column-gap: 12rem;
}

.gy-12 {
  row-gap: 12rem;
}

.fs-15 {
  font-size: 15rem;
}

.py-15 {
  padding-top: 15rem;
  padding-bottom: 15rem;
}

.px-15 {
  padding-left: 15rem;
  padding-right: 15rem;
}

.pb-15 {
  padding-bottom: 15rem;
}

.pt-15 {
  padding-top: 15rem;
}

.pr-15 {
  padding-right: 15rem;
}

.pl-15 {
  padding-left: 15rem;
}

.mt-15 {
  margin-top: 15rem;
}

.mb-15 {
  margin-bottom: 15rem;
}

.gx-15 {
  -moz-column-gap: 15rem;
       column-gap: 15rem;
}

.gy-15 {
  row-gap: 15rem;
}

.fs-20 {
  font-size: 25rem;
}

.py-20 {
  padding-top: 25rem;
  padding-bottom: 25rem;
}

.px-20 {
  padding-left: 25rem;
  padding-right: 25rem;
}

.pb-20 {
  padding-bottom: 25rem;
}

.pt-20 {
  padding-top: 25rem;
}

.pr-20 {
  padding-right: 25rem;
}

.pl-20 {
  padding-left: 25rem;
}

.mt-20 {
  margin-top: 25rem;
}

.mb-20 {
  margin-bottom: 25rem;
}

.gx-20 {
  -moz-column-gap: 25rem;
       column-gap: 25rem;
}

.gy-20 {
  row-gap: 25rem;
}

.fs-30 {
  font-size: 30rem;
}

.py-30 {
  padding-top: 30rem;
  padding-bottom: 30rem;
}

.px-30 {
  padding-left: 30rem;
  padding-right: 30rem;
}

.pb-30 {
  padding-bottom: 30rem;
}

.pt-30 {
  padding-top: 30rem;
}

.pr-30 {
  padding-right: 30rem;
}

.pl-30 {
  padding-left: 30rem;
}

.mt-30 {
  margin-top: 30rem;
}

.mb-30 {
  margin-bottom: 30rem;
}

.gx-30 {
  -moz-column-gap: 30rem;
       column-gap: 30rem;
}

.gy-30 {
  row-gap: 30rem;
}

.w-0 {
  width: 0%;
}

.w-1 {
  width: 1%;
}

.w-2 {
  width: 2%;
}

.w-3 {
  width: 3%;
}

.w-4 {
  width: 4%;
}

.w-5 {
  width: 5%;
}

.w-6 {
  width: 6%;
}

.w-7 {
  width: 7%;
}

.w-8 {
  width: 8%;
}

.w-9 {
  width: 9%;
}

.w-10 {
  width: 10%;
}

.w-11 {
  width: 11%;
}

.w-12 {
  width: 12%;
}

.w-13 {
  width: 13%;
}

.w-14 {
  width: 14%;
}

.w-15 {
  width: 15%;
}

.w-16 {
  width: 16%;
}

.w-17 {
  width: 17%;
}

.w-18 {
  width: 18%;
}

.w-19 {
  width: 19%;
}

.w-20 {
  width: 20%;
}

.w-21 {
  width: 21%;
}

.w-22 {
  width: 22%;
}

.w-23 {
  width: 23%;
}

.w-24 {
  width: 24%;
}

.w-25 {
  width: 25%;
}

.w-26 {
  width: 26%;
}

.w-27 {
  width: 27%;
}

.w-28 {
  width: 28%;
}

.w-29 {
  width: 29%;
}

.w-30 {
  width: 30%;
}

.w-31 {
  width: 31%;
}

.w-32 {
  width: 32%;
}

.w-33 {
  width: 33%;
}

.w-34 {
  width: 34%;
}

.w-35 {
  width: 35%;
}

.w-36 {
  width: 36%;
}

.w-37 {
  width: 37%;
}

.w-38 {
  width: 38%;
}

.w-39 {
  width: 39%;
}

.w-40 {
  width: 40%;
}

.w-41 {
  width: 41%;
}

.w-42 {
  width: 42%;
}

.w-43 {
  width: 43%;
}

.w-44 {
  width: 44%;
}

.w-45 {
  width: 45%;
}

.w-46 {
  width: 46%;
}

.w-47 {
  width: 47%;
}

.w-48 {
  width: 48%;
}

.w-49 {
  width: 49%;
}

.w-50 {
  width: 50%;
}

.w-51 {
  width: 51%;
}

.w-52 {
  width: 52%;
}

.w-53 {
  width: 53%;
}

.w-54 {
  width: 54%;
}

.w-55 {
  width: 55%;
}

.w-56 {
  width: 56%;
}

.w-57 {
  width: 57%;
}

.w-58 {
  width: 58%;
}

.w-59 {
  width: 59%;
}

.w-60 {
  width: 60%;
}

.w-61 {
  width: 61%;
}

.w-62 {
  width: 62%;
}

.w-63 {
  width: 63%;
}

.w-64 {
  width: 64%;
}

.w-65 {
  width: 65%;
}

.w-66 {
  width: 66%;
}

.w-67 {
  width: 67%;
}

.w-68 {
  width: 68%;
}

.w-69 {
  width: 69%;
}

.w-70 {
  width: 70%;
}

.w-71 {
  width: 71%;
}

.w-72 {
  width: 72%;
}

.w-73 {
  width: 73%;
}

.w-74 {
  width: 74%;
}

.w-75 {
  width: 75%;
}

.w-76 {
  width: 76%;
}

.w-77 {
  width: 77%;
}

.w-78 {
  width: 78%;
}

.w-79 {
  width: 79%;
}

.w-80 {
  width: 80%;
}

.w-81 {
  width: 81%;
}

.w-82 {
  width: 82%;
}

.w-83 {
  width: 83%;
}

.w-84 {
  width: 84%;
}

.w-85 {
  width: 85%;
}

.w-86 {
  width: 86%;
}

.w-87 {
  width: 87%;
}

.w-88 {
  width: 88%;
}

.w-89 {
  width: 89%;
}

.w-90 {
  width: 90%;
}

.w-91 {
  width: 91%;
}

.w-92 {
  width: 92%;
}

.w-93 {
  width: 93%;
}

.w-94 {
  width: 94%;
}

.w-95 {
  width: 95%;
}

.w-96 {
  width: 96%;
}

.w-97 {
  width: 97%;
}

.w-98 {
  width: 98%;
}

.w-99 {
  width: 99%;
}

.w-100 {
  width: 100%;
}

.g-1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.g-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.g-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.g-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.g-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.g-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.g-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.g-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.g-9 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.g-10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.g-11 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}

.g-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.s-1 {
  position: relative;
  grid-column: span 1;
}

.s-2 {
  position: relative;
  grid-column: span 2;
}

.s-3 {
  position: relative;
  grid-column: span 3;
}

.s-4 {
  position: relative;
  grid-column: span 4;
}

.s-5 {
  position: relative;
  grid-column: span 5;
}

.s-6 {
  position: relative;
  grid-column: span 6;
}

.s-7 {
  position: relative;
  grid-column: span 7;
}

.s-8 {
  position: relative;
  grid-column: span 8;
}

.s-9 {
  position: relative;
  grid-column: span 9;
}

.s-10 {
  position: relative;
  grid-column: span 10;
}

.s-11 {
  position: relative;
  grid-column: span 11;
}

.s-12 {
  position: relative;
  grid-column: span 12;
}

/* ==========================================================================
   SCENE — Brand Identity, Ausgabe 3 (2026)
   Milano ist der Grund. Carrara trägt die Schrift. Lacca rahmt Film.
   Keine Verläufe, keine Schatten, kein Eckenradius, keine Parallaxe.
   ========================================================================== */

@font-face {
  font-family: "Affinik";
  src: url("../fonts/Affinik.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --milano: #BB080B;
  --carrara: #F0EDE8;
  --lacca: #120A0A;
  --carrara-70: rgba(240, 237, 232, 0.7);
  --lacca-60: rgba(18, 10, 10, 0.6);
  --font-display: "Affinik", "Satoshi", sans-serif;
  --font-text: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --hairline: 1px;
  interpolate-size: allow-keywords;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  border-radius: 0 !important;
}

::selection {
  background: var(--carrara);
  color: var(--milano);
}

body {
  position: relative;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
  background-color: var(--milano);
  color: var(--carrara);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  overflow-x: hidden;
  scrollbar-width: none;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; }

section { position: relative; }

img, video {
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
video::-webkit-media-controls { display: none !important; }
video:fullscreen::-webkit-media-controls,
video:-webkit-full-screen::-webkit-media-controls { display: block !important; }

/* --- Typografie ----------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h1 { font-size: 3.4rem; }        /* Titel: Affinik 34–60 pt */
h2 { font-size: 2rem; }          /* Schlagzeile: Affinik 20–32 pt */
h3 { font-family: var(--font-text); font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
@media (min-width: 1280px) { h1 { font-size: 4.2rem; } h2 { font-size: 2.4rem; } }

.display { font-family: var(--font-display); font-weight: 400; line-height: 1.05; }
.wordmark { font-family: var(--font-display); font-weight: 400; text-transform: lowercase; letter-spacing: 0; line-height: 1; }

.label {                          /* Label, versal, gesperrt: Satoshi Medium 7–9 pt */
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
.small { font-size: 0.85rem; }
.bold { font-weight: 700; }
.muted { color: var(--carrara-70); }
.reading .muted { color: var(--lacca-60); }
.caps { text-transform: uppercase; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.margin-auto { margin-left: auto; margin-right: auto; }
.overflow-hidden { overflow: hidden; }
.block { display: block; }
.flex { display: flex; position: relative; }
.column { flex-direction: column; }
.align-center { align-items: center; }
.align-start { align-items: start; }
.align-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.space-between { justify-content: space-between; }
.mobile { display: none; }
.measure { max-width: 34em; }

a { color: inherit; text-decoration: none; }
.ck a { text-decoration: underline; text-underline-offset: 0.15em; }
.ck > *:not(:first-child) { margin-top: 1.2rem; }

table { width: 100%; table-layout: fixed; line-height: 1.6; border-collapse: collapse; }
td { position: relative; vertical-align: top; }
.ck table tr:first-child td { color: var(--carrara-70); font-size: 0.85rem; }
.reading .ck table tr:first-child td { color: var(--lacca-60); }

/* --- Linien --------------------------------------------------------------- */

.line { height: var(--hairline); background-color: var(--carrara); }
.reading .line { background-color: var(--milano); }
.border-bottom { border-bottom: var(--hairline) solid var(--carrara); }
.nmx-1 { margin: 0 -1.2rem; }

/* --- Der Asterisk: Aufzählung, Trenner, Live-Punkt, Schlusszeichen -------- */

.ast {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  color: currentColor;
  flex-shrink: 0;
}
.ast svg { width: 100%; height: 100%; display: block; }

ul.list li {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  column-gap: 0.8em;
  align-items: start;
}
ul.list li + li { margin-top: 0.6rem; }
ul.list .ast { margin-top: 0.25em; width: 0.9em; height: 0.9em; }
ul.list.cols li { grid-template-columns: 1.1em minmax(8em, 12em) 1fr; }
@media (max-width: 768px) { ul.list.cols li { grid-template-columns: 1.1em 1fr; } ul.list.cols li > span:nth-child(3) { grid-column: 2; } }

.divider {                        /* Trenner: dreifach gesetzt */
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  color: var(--carrara);
}
.divider .ast { width: 0.8rem; height: 0.8rem; }

.live {                           /* Live-Punkt: darf sich drehen */
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.live .ast { transition: transform 0.4s steps(1, end); }
@media (hover: hover) and (pointer: fine) {
  .live:hover .ast { transform: rotate(45deg); }
}

/* --- Buttons: Carrara auf Milano, kein Radius ----------------------------- */

button {
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--carrara);
  -webkit-text-fill-color: var(--carrara);
  background: none;
  border: none;
  cursor: pointer;
}
.button {
  font-family: var(--font-text);
  font-weight: 500;
  position: relative;
  display: inline-block;
  background: var(--carrara);
  color: var(--milano);
  -webkit-text-fill-color: var(--milano);
  cursor: pointer;
  text-align: center;
  min-width: 11.6rem;
  width: max-content;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--lacca); color: var(--carrara); -webkit-text-fill-color: var(--carrara); }
}
.reading .button { background: var(--milano); color: var(--carrara); -webkit-text-fill-color: var(--carrara); }
.reading .button:hover { background: var(--lacca); }
.button span { position: relative; z-index: 1; }

/* --- Header: Lockup, Signet links, Wort rechts, gleiche Höhe -------------- */

header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
  background-color: var(--milano);
}
.home-btn { cursor: pointer; }
.lockup {
  --h: 1.6rem;                          /* Signethöhe */
  display: flex;
  align-items: center;
  gap: calc(var(--h) * 0.55);           /* Abstand = 0,55 x Signethöhe */
  height: var(--h);
  color: var(--carrara);
}
.lockup .signet { height: var(--h); width: auto; display: block; }
.lockup .signet svg { height: 100%; width: auto; display: block; }
.lockup .wordmark { font-size: calc(var(--h) * 1.42); line-height: 1; transform: translateY(0.06em); }
.lockup .wordmark::after { display: none; }
.header-claim { font-size: 1.5rem; line-height: 1.1; }
@media (max-width: 768px) { .header-claim { font-size: 1.25rem; } }

/* Wortmarke als reiner Text in Affinik, Signethöhe = Versalhöhe der Wortmarke */
h1.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.header-right { display: flex; align-items: center; gap: 0.8rem; }

/* --- Navigation: Carrara-Fläche, kein Radius ------------------------------ */

.site-nav {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  background-color: var(--carrara);
  color: var(--milano);
}
.site-nav a { color: var(--milano); white-space: nowrap; font-weight: 500; border-bottom: var(--hairline) solid transparent; }
.site-nav a.is-active { border-bottom-color: var(--milano); }
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { border-bottom-color: var(--milano); }
}

/* --- Seiten --------------------------------------------------------------- */

.page-section {
  min-height: 100dvh;
  padding-top: var(--header-height, 0px);
  padding-bottom: var(--header-height, 0px);
  display: flex;
  align-items: center;
}
#swup { overflow-x: hidden; }           /* Schnitt, kein Blenden */
.overlay-content { max-width: 560px; }
#contact .overlay-content { width: 100%; }

/* Lesefläche: Carrara trägt die langen Texte */
.reading {
  background-color: var(--carrara);
  color: var(--lacca);
  padding: 2.4rem;
}
.reading .label { color: var(--milano); }
.reading .border-bottom { border-color: var(--milano); }
.reading .ast { color: var(--milano); }
@media (max-width: 768px) { .reading { padding: 1.6rem 1.2rem; } }

.section-head { display: flex; justify-content: space-between; align-items: baseline; }
.section-head + .line { margin-top: 0.6rem; }

/* --- Film: Lacca rahmt ---------------------------------------------------- */

.frame {
  background-color: var(--lacca);
  padding: 0.6rem;
}
.frame video, .frame img { width: 100%; }

.home { position: relative; height: 100dvh; width: 100%; }

.video-swiper {
  --slide-width: calc(57vw / 3);
  --aspect-ratio: 1.5;
  --slide-height: calc(var(--slide-width) / var(--aspect-ratio));
  position: relative;
  width: 95%;
  overflow: visible;
  touch-action: pan-y;
  transform: translate3d(0, 0, 0);
  margin-top: var(--slide-height);
  margin-bottom: var(--slide-height);
}
.video-swiper .swiper-wrapper { transition-timing-function: ease-out; will-change: transform; transform-style: preserve-3d; }
.video-swiper .swiper-slide {
  position: relative;
  display: block;
  width: var(--slide-width);
  max-width: 1200px;
  aspect-ratio: var(--aspect-ratio);
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
/* Lacca rahmt Film: der Rahmen liegt auf der 3x-Ebene des Videos */
.video-swiper .swiper-slide .clip {
  position: absolute;
  width: 300%;
  height: 300%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--lacca);
  padding: 0.5vw;
  will-change: transform;
}
.video-swiper .swiper-slide video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-claim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6.5rem;
  text-align: center;
  pointer-events: none;
}

/* --- Arbeiten: Tabelle ---------------------------------------------------- */

.project-table.border-bottom, .project-heading.border-bottom { border-bottom: var(--hairline) solid var(--carrara); }
.project-heading { color: var(--carrara-70); }
.toggle { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .project-table:has(.collapsible-grid:not(.is-open)) .toggle:hover { background-color: var(--carrara); color: var(--milano); }
}
.collapsible-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s steps(1, end); }
.collapsible-grid.is-open { grid-template-rows: 1fr; }
.collapsible-inner { overflow: hidden; }
.toggle .ast { width: 0.7em; height: 0.7em; margin-right: 0.6em; opacity: 0; }
.project-table:has(.is-open) .toggle .ast { opacity: 1; }

@media (max-width: 1024px) { .project-content { grid-column: span 3; } }
@media (max-width: 768px) {
  .table td:first-child { display: none; }
  .project-grid { display: flex; }
  .project-grid > *:first-child { width: 33%; }
  .project-grid > *:nth-child(2) { width: 66%; }
  .project-grid > *:nth-child(3) { display: none; }
  .inner-project-grid > * { grid-column: span 4; }
}

/* --- Kontakt: Formular ---------------------------------------------------- */

.field input, .field textarea {
  font-family: var(--font-text);
  font-size: 1rem;
  width: 100%;
  border: none;
  color: var(--carrara);
  border-bottom: var(--hairline) solid var(--carrara);
  padding: 0.6rem 0;
  outline: none;
  background: transparent;
  line-height: 2.1;
}
.field textarea { resize: none; min-height: 8.4rem; }
::placeholder { color: var(--carrara-70); opacity: 1; }
.field input:focus, .field textarea:focus { border-bottom-width: 2px; }

/* --- Vollbild ------------------------------------------------------------- */

.fs-container { position: fixed; inset: 0; z-index: 9999; background: var(--lacca); opacity: 0; pointer-events: none; }
.fs-container.fs-active { opacity: 1; pointer-events: auto; }
.fs-container video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.fs-container .custom-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem; z-index: 1;
  font-family: var(--font-text); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.fs-container .custom-controls button { color: var(--carrara); -webkit-text-fill-color: var(--carrara); white-space: nowrap; }
.fs-container .custom-controls .progress { flex: 1; cursor: pointer; height: 2px; -webkit-appearance: none; appearance: none; background: transparent; }
.fs-container .custom-controls .progress::-webkit-slider-runnable-track { height: 2px; background: var(--carrara-70); }
.fs-container .custom-controls .progress::-moz-range-track { height: 2px; background: var(--carrara-70); }
.fs-container .custom-controls .progress::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 2px; height: 10px; margin-top: -4px; background: var(--milano); cursor: pointer; }
.fs-container .custom-controls .progress::-moz-range-thumb { width: 2px; height: 10px; background: var(--milano); border: none; cursor: pointer; }
.fs-container.controls-hidden, .fs-container.controls-hidden video { cursor: none; }
.fs-container.controls-hidden .custom-controls { opacity: 0; pointer-events: none; }

/* --- Footer --------------------------------------------------------------- */

.footer-grid { align-items: baseline; }
@media (max-width: 768px) {
  .desktop { display: none; }
  .mobile { display: block; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid .s-1:first-child { grid-column: span 2; }
  .lockup { --h: 1.3rem; }
  .home-claim { bottom: 5.5rem; }
}
.footer-mark { width: 3.2rem; color: var(--carrara); }
.footer-mark svg { width: 100%; height: auto; display: block; }