/* ================= Tokens (mimag-CI) ================= */
:root {
  --schwarz: #000;
  --weiss: #fff;
  --flaeche: #f2f2f2;
  --text-2: #5c5c5c;
  --linie: #dedede;
  --fokus: #059669;           /* Signalgruen nur fuer Tastatur-Fokus */
  --f-head: "Outfit", sans-serif;
  --f-text: "Inter", sans-serif;
  --rand: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1440px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--weiss); color: var(--schwarz); font: 17px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--rand); }

h1, h2, h3 { font-family: var(--f-head); font-weight: 500; margin: 0; }
h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; }
.unterstrichen { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease); }
.unterstrichen:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ================= Navigation ================= */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(12px); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav svg { height: 24px; width: auto; display: block; }
.nav ul { display: flex; gap: 2.2rem; list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.nav ul a:hover { color: var(--text-2); }
.sprache { display: flex; gap: .6rem; padding-left: 2.2rem; border-left: 1px solid var(--linie); }
.sprache a { color: var(--text-2); }
.sprache a[aria-current] { color: var(--schwarz); }

/* ================= Hero ================= */
.hero { padding: clamp(3rem, 9vh, 7rem) 0 0; }
.hero h1 {
  font-size: clamp(3rem, 7.4vw, 7.25rem);
  line-height: .98;
  letter-spacing: -.045em;
  max-width: 13ch;
}
.hero-unten { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; margin-top: clamp(2rem, 5vh, 3.5rem); align-items: end; }
.hero-unten p { grid-column: 1 / span 5; margin: 0; font-size: 1.12rem; line-height: 1.6; color: #2b2b2b; max-width: 36rem; }
.hero-unten .kontaktzeile { grid-column: 9 / span 4; justify-self: end; font-size: .95rem; }

/* Bildstreifen: echte Arbeiten, gleiche Hoehe, natuerliche Breiten */
.streifen { margin-top: clamp(3rem, 8vh, 5rem); display: flex; gap: 10px; height: clamp(260px, 38vw, 520px); overflow-x: auto; scrollbar-width: none; padding: 0 var(--rand); scroll-snap-type: x proximity; }
.streifen::-webkit-scrollbar { display: none; }
.streifen figure { margin: 0; height: 100%; flex: none; position: relative; scroll-snap-align: start; }
.streifen img { height: 100%; width: auto; object-fit: cover; }
.streifen figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 2.5rem .9rem .75rem; font-size: .8rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; transition: opacity .3s; }
.streifen figure:hover figcaption, .streifen figure:focus-within figcaption { opacity: 1; }

/* ================= Sektionen ================= */
.sektion { padding: clamp(5rem, 12vh, 9rem) 0 0; }
.sektion-kopf { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; margin-bottom: 3rem; align-items: end; }
.sektion-kopf h2 { grid-column: 1 / span 5; }
.sektion-kopf p { grid-column: 7 / span 5; margin: 0; color: var(--text-2); max-width: 34rem; }

/* ================= Bereiche als Verzeichnis ================= */
.verzeichnis { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--schwarz); }
.verzeichnis li { border-bottom: 1px solid var(--linie); }
.zeile { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; padding: 2.2rem 0; align-items: center; transition: background .3s; }
.zeile:hover { background: #fafafa; }
.zeile .marke { grid-column: 1 / span 3; height: 44px; display: flex; align-items: center; }
.zeile .marke img, .zeile .marke svg { max-height: 100%; width: auto; max-width: 100%; }
.zeile .text { grid-column: 4 / span 4; }
.zeile h3 { font-size: 1.35rem; letter-spacing: -.01em; line-height: 1.3; }
.zeile .text p { margin: .35rem 0 0; color: var(--text-2); font-size: .95rem; }
.zeile .bilder { grid-column: 8 / span 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zeile .bilder img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; filter: grayscale(.25); transition: filter .4s; }
.zeile:hover .bilder img { filter: none; }

/* lumen.berlin Kurzform (nachgebaut, bis SVG vorliegt) */
.lumen-marke { display: flex; align-items: center; gap: .9rem; font: 400 .95rem "Tenor Sans", sans-serif; letter-spacing: .2em; color: #1a0892; }
.lumen-marke i { width: 40px; height: 40px; border-radius: 50%; background: #1a0892; display: block; }

/* ================= Ausgewaehlte Arbeiten ================= */
.arbeiten { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem) 2rem; }
.arbeit { margin: 0; }
.arbeit .rahmen { overflow: hidden; background: var(--flaeche); }
.arbeit img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.arbeit:hover img { transform: scale(1.025); }
.arbeit figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .9rem; font-size: .92rem; }
.arbeit figcaption span { color: var(--text-2); }
.a1 { grid-column: 1 / span 8; } .a1 .rahmen { aspect-ratio: 3 / 2; }
.a2 { grid-column: 9 / span 4; align-self: end; } .a2 .rahmen { aspect-ratio: 3 / 4; }
.a3 { grid-column: 1 / span 4; } .a3 .rahmen { aspect-ratio: 4 / 5; }
.a4 { grid-column: 5 / span 4; margin-top: 6rem; } .a4 .rahmen { aspect-ratio: 4 / 5; }
.a5 { grid-column: 9 / span 4; } .a5 .rahmen { aspect-ratio: 4 / 5; }
.alle { display: inline-block; margin-top: 3rem; font-size: 1rem; }

/* ================= Arbeitsweise ================= */
.ablauf ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: s; }
.ablauf li { counter-increment: s; border-top: 1px solid var(--schwarz); padding-top: 1.2rem; }
.ablauf li::before { content: counter(s); font: 500 .95rem var(--f-head); color: var(--text-2); }
.ablauf h3 { font-size: 1.35rem; margin: 1.6rem 0 .5rem; }
.ablauf p { margin: 0; color: var(--text-2); font-size: .98rem; max-width: 32ch; }

/* ================= Kontakt ================= */
.kontakt { margin-top: clamp(6rem, 14vh, 10rem); background: var(--schwarz); color: var(--weiss); padding: clamp(5rem, 12vh, 8rem) 0 3rem; }
.kontakt h2 { font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: 1; letter-spacing: -.04em; max-width: 14ch; }
.kontakt-unten { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; margin-top: 3rem; align-items: end; }
.kontakt-unten p { grid-column: 1 / span 5; margin: 0; color: #a3a3a3; }
.kontakt .mail { grid-column: 7 / -1; justify-self: end; font: 500 clamp(1.5rem, 3vw, 2.4rem) var(--f-head); letter-spacing: -.02em; }
.fuss { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: clamp(5rem, 12vh, 8rem); padding-top: 1.5rem; border-top: 1px solid #262626; font-size: .85rem; color: #a3a3a3; }
.fuss nav { display: flex; gap: 1.8rem; }
.fuss a:hover { color: #fff; }

/* ================= Ein einziger Lade-Moment ================= */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: hoch 1.1s var(--ease) both; }
  .hero-unten { animation: hoch 1.1s .15s var(--ease) both; }
  .streifen figure { animation: auf 1.3s var(--ease) both; }
  .streifen figure:nth-child(1) { animation-delay: .25s; }
  .streifen figure:nth-child(2) { animation-delay: .33s; }
  .streifen figure:nth-child(3) { animation-delay: .41s; }
  .streifen figure:nth-child(4) { animation-delay: .49s; }
  .streifen figure:nth-child(5) { animation-delay: .57s; }
  .streifen figure:nth-child(n+6) { animation-delay: .65s; }
}
@keyframes hoch { from { opacity: 0; transform: translateY(28px); } }
@keyframes auf { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ================= Mobil ================= */
@media (max-width: 900px) {
  .nav ul { gap: 1.2rem; font-size: .9rem; }
  .hero-unten, .sektion-kopf, .zeile, .arbeiten, .kontakt-unten { grid-template-columns: 1fr; gap: 1.2rem; }
  .hero-unten > *, .sektion-kopf > *, .zeile > *, .arbeiten > *, .kontakt-unten > * { grid-column: 1 / -1 !important; justify-self: start !important; }
  .a4 { margin-top: 0; }
  .ablauf ol { grid-template-columns: 1fr; }
  .zeile .marke { height: 36px; }
}

/* ================= Auftraggeber ================= */
.kunden { margin-top: clamp(4rem, 10vh, 7rem); display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: baseline; }
.kunden h3 { grid-column: 1 / span 3; font: 400 1rem var(--f-text); color: var(--text-2); }
.kunden ul { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; font: 500 clamp(1.3rem, 2vw, 1.75rem)/1.4 var(--f-head); letter-spacing: -.02em; }
.nav ul li.optional { }
@media (max-width: 900px) {
  .kunden { grid-template-columns: 1fr; gap: 1rem; }
  .kunden > * { grid-column: 1 / -1 !important; }
  .nav ul li.optional { display: none; }
}