/* Jan Kulcsar – Seite. Form-Regel: Karten 14px Ecken, Knöpfe ganz rund. Ein Akzent. */
:root {
  /* Schwarzer Grund, Licht in Blau (Jan, 06.11.2026) */
  --grund: #000000;
  --karte: #0e0f14;
  --tinte: #f3f4f8;
  --leise: #9a9daa;
  --linie: #23252e;
  --akzent: #2340d8;          /* Kobalt, Jans Wahl 06.11.2026 */
  --akzent-text: #7d95ff;     /* gleiches Blau, heller, für Schrift auf Schwarz */
  --auf-akzent: #ffffff;
  --schatten: 0 0 0 1px rgb(255 255 255 / .06), 0 24px 60px -24px rgb(0 0 0 / .9);
  --kopf: 64px;
  --rand: clamp(16px, 3.2vw, 48px);
  --eilig: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 400 16px/1.55 "Text", system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--akzent); color: var(--auf-akzent); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p, dl, dd, ol { margin: 0; padding: 0; }
ol { list-style: none; }

/* Kopf */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 20;
  height: var(--kopf);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--rand);
  font-size: 13px; letter-spacing: .01em;
  background: linear-gradient(var(--grund) 55%, transparent);
}
.marke { font: 600 14px/1 "Text", sans-serif; text-decoration: none; }
.kopf-rolle { color: var(--leise); text-align: center; }
.sprachen { justify-self: end; display: flex; gap: 2px; }
.sprachen a {
  text-decoration: none; padding: 8px 9px; border-radius: 999px; color: var(--leise);
  transition: color .15s ease-out;
}
.sprachen a:hover { color: var(--tinte); }
.sprachen a[aria-current] { color: var(--tinte); font-weight: 600; }
@media (max-width: 719px) { .kopf-rolle { display: none; } .kopf { grid-template-columns: 1fr auto; } }

main { overflow-x: clip; }

/* Einstieg */
.start {
  min-height: 100dvh;
  display: grid; align-content: end; gap: clamp(24px, 4vw, 48px);
  padding: calc(var(--kopf) + 40px) var(--rand) clamp(32px, 6vh, 72px);
}
.start-name {
  font: 800 clamp(76px, 17.5vw, 300px)/.86 "Anzeige", sans-serif;
  letter-spacing: -.055em;
  margin-left: -.04em;
}
.start-name > span { display: block; overflow: hidden; padding-bottom: .04em; }
.start-name > span > span { display: block; }
.start-name > span:nth-child(2) { padding-left: .9em; }
.start-einleitung {
  max-width: 34ch; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45;
  justify-self: end;
}
@media (max-width: 719px) {
  .start-name > span:nth-child(2) { padding-left: 0; }
  .start-einleitung { justify-self: start; }
}

/* Arbeiten */
.arbeiten-seite { display: grid; gap: 28px; }
.arbeiten {
  display: grid; gap: 28px var(--rand);
  padding: clamp(48px, 10vh, 120px) var(--rand) 0;
}
.arbeiten-titel {
  font: 700 clamp(30px, 4vw, 56px)/1 "Anzeige", sans-serif; letter-spacing: -.035em;
}
.arbeiten-zahl { color: var(--leise); font-weight: 500; font-size: .5em; vertical-align: super; letter-spacing: 0; }
.arbeiten-liste ol { display: grid; border-top: 1px solid var(--linie); }
.liste-link {
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--linie);
  text-decoration: none; color: var(--leise); font-size: 15px;
  transition: color .18s ease-out;
}
.liste-link span { font: 500 12px/1 "Anzeige", sans-serif; font-variant-numeric: tabular-nums; }
.liste-link:hover, .liste-link[aria-current] { color: var(--tinte); }
.liste-link[aria-current] span { color: var(--akzent-text); }
.liste-link::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--akzent); transform: scale(0); transition: transform .2s var(--eilig);
}
.liste-link[aria-current]::after { transform: scale(1); }

.stapel { display: grid; gap: 14vh; padding-bottom: 18vh; }
.karte {
  position: sticky; top: calc(var(--kopf) + 12px + var(--i, 0) * 10px);
  background: var(--karte); border-radius: 14px; box-shadow: var(--schatten);
  padding: 12px; display: grid; gap: 16px;
  transform-origin: 50% 0;
  will-change: transform;
}
.karte-bild {
  position: relative; overflow: hidden; border-radius: 8px; background: var(--grund);
  aspect-ratio: 16 / 10;
}
.karte[data-format="hoch"] .karte-bild { aspect-ratio: 9 / 16; max-height: 44vh; margin-inline: auto; }
.karte-bild video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.karte.ohne-autoplay .karte-bild::after {
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px;
  border-radius: 50%; background: var(--akzent) center / 14px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1.5v11l9-5.5z' fill='white'/%3E%3C/svg%3E");
}
.karte-angaben {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start;
  padding: 0 6px 6px;
}
.karte-nummer {
  grid-row: span 3;
  font: 800 clamp(56px, 7vw, 112px)/.8 "Anzeige", sans-serif; letter-spacing: -.06em;
  color: var(--akzent-text); font-variant-numeric: tabular-nums;
}
.karte-titel { font: 700 clamp(20px, 1.9vw, 28px)/1.1 "Anzeige", sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.karte-daten { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }
.karte-daten div { display: flex; gap: 6px; }
.karte-daten dt { color: var(--leise); }
.karte-text { grid-column: 1 / -1; color: var(--leise); max-width: 60ch; font-size: 15px; }
.karte-oeffnen, .knopf {
  justify-self: start; grid-column: 1 / -1;
  font: 500 14px/1 "Text", sans-serif; color: var(--tinte);
  background: transparent; border: 1px solid var(--tinte); border-radius: 999px;
  padding: 12px 20px; min-height: 44px; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}
.karte-oeffnen:hover, .knopf:hover { background: var(--tinte); color: var(--grund); }
.karte-oeffnen:active, .knopf:active, .telegram:active { transform: scale(.97); }
/* ganze Karte klickbar, Knopf bleibt das echte Ziel */
.karte-oeffnen::before { content: ""; position: absolute; inset: 0; }
.karte { cursor: pointer; }
.karte-angaben { position: static; }

@media (min-width: 980px) {
  .arbeiten { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.5fr); align-items: start; }
  .arbeiten-seite { position: sticky; top: calc(var(--kopf) + 16px); display: grid; gap: 40px; }
  .karte { grid-template-columns: minmax(0, 1fr) 300px; padding: 14px; }
  .karte-bild { max-height: calc(100vh - var(--kopf) - 80px); }
  .karte-angaben { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 10px 8px 6px; }
  .karte-oeffnen { margin-top: auto; }
  .karte-nummer { margin-bottom: 8px; }
  .karte-nummer { grid-row: auto; font-size: clamp(80px, 8vw, 140px); }
  .karte[data-format="hoch"] { grid-template-columns: minmax(0, 1fr) 300px; }
  .karte[data-format="hoch"] .karte-bild { max-height: min(72vh, 640px); width: auto; height: min(72vh, 640px); }
}

/* Über */
.ueber {
  display: grid; gap: 28px;
  padding: clamp(80px, 18vh, 200px) var(--rand);
}
.ueber-titel { font: 500 14px/1 "Text", sans-serif; color: var(--leise); }
.ueber-text {
  font: 500 clamp(24px, 2.7vw, 44px)/1.16 "Anzeige", sans-serif; letter-spacing: -.025em;
  max-width: 30ch;
}
.ueber-text .wort { opacity: var(--sicht, 1); }
@media (min-width: 980px) {
  .ueber { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.5fr); }
}

/* Kontakt */
.kontakt {
  min-height: 80dvh; display: grid; align-content: center; justify-items: start; gap: 36px;
  padding: 80px var(--rand);
  border-top: 1px solid var(--linie);
}
.kontakt-satz {
  font: 800 clamp(40px, 7.4vw, 128px)/.95 "Anzeige", sans-serif; letter-spacing: -.05em;
  max-width: 15ch; overflow-wrap: break-word;
}
.telegram {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--akzent); color: var(--auf-akzent);
  font: 600 17px/1 "Text", sans-serif; text-decoration: none;
  transition: transform .12s ease-out, filter .15s ease-out;
}
.telegram::after { content: "→"; transition: transform .2s var(--eilig); }
.telegram:hover { filter: brightness(1.08); }
.telegram:hover::after { transform: translateX(4px); }

/* Fuß */
.fuss {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  padding: 24px var(--rand) calc(24px + env(safe-area-inset-bottom));
  font-size: 13px; color: var(--leise);
}
.fuss span { margin-right: auto; }
.fuss a { text-decoration: none; padding: 10px 0; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; }

/* Große Karte */
.karte-gross {
  width: min(1100px, calc(100vw - 2 * var(--rand))); max-height: calc(100dvh - 48px);
  border: 0; border-radius: 14px; padding: 0; background: var(--karte); color: var(--tinte);
  box-shadow: var(--schatten); overflow: auto;
}
.karte-gross::backdrop { background: rgb(0 0 0 / .7); }
.karte-gross[open] { animation: auf .26s var(--eilig); }
.karte-gross[open]::backdrop { animation: blende .26s ease-out; }
@keyframes auf { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes blende { from { opacity: 0; } }
.gross-innen { display: grid; gap: 20px; padding: 14px; }
.gross-bild { border-radius: 8px; overflow: hidden; background: var(--grund); }
.gross-bild video { display: block; width: 100%; max-height: 70dvh; object-fit: contain; background: var(--grund); }
.gross-angaben { display: grid; gap: 14px; padding: 4px 8px 10px; }
.gross-angaben h2 { font: 700 clamp(26px, 3vw, 40px)/1.05 "Anzeige", sans-serif; letter-spacing: -.03em; }
.gross-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.gross-knoepfe .knopf { grid-column: auto; text-decoration: none; display: inline-flex; align-items: center; }
.gross-knoepfe .knopf.voll { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.gross-knoepfe .knopf.voll:hover { filter: brightness(1.08); }
@media (min-width: 980px) {
  .gross-innen { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .karte { will-change: auto; }
}

/* Slideshows (unten, FlexCarousel aus React Bits) */
.slideshows { display: grid; gap: 28px; padding: clamp(48px, 10vh, 120px) 0 clamp(48px, 8vh, 96px); border-top: 1px solid var(--linie); }
.slideshows-kopf { display: grid; gap: 12px; padding: 0 var(--rand); }
.slideshows-hinweis { margin: 0; color: var(--leise); font-size: 15px; }
.slideshows-buehne { display: none; height: min(82vh, 820px); min-height: 520px; color: var(--tinte); }
.slideshows-liste {
  list-style: none; margin: 0; padding: 0 var(--rand) 8px;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 300px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.slideshow-karte { scroll-snap-align: start; display: grid; gap: 10px; }
.slideshow-karte img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px; display: block; }
.slideshow-name { font-size: 14px; color: var(--leise); }
.slideshow-name span { font: 500 12px/1 "Anzeige", sans-serif; color: var(--akzent-text); margin-right: 4px; }
/* Läuft das Karussell, bleibt die Liste nur für Screenreader und Google im HTML */
.ist-karussell .slideshows-buehne { display: block; }
.ist-karussell .slideshows-liste {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: -1px;
}
.slideshows .flex-carousel__title { font-family: "Text", sans-serif; font-size: 16px; }

/* Kontakt-Knopf im Kopf (immer sichtbar) + Öffnen-Link auf den Karten (Jan, 06.11.2026) */
.kopf-rechts { justify-self: end; display: flex; align-items: center; gap: 10px; }
.kopf-kontakt {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px;
  background: var(--akzent); color: var(--auf-akzent); text-decoration: none;
  font: 600 13px/1 "Text", sans-serif; white-space: nowrap;
  transition: filter .15s ease-out, transform .12s ease-out;
}
.kopf-kontakt:hover { filter: brightness(1.12); }
.kopf-kontakt:active { transform: scale(.97); }
.karte-knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.karte-knoepfe .karte-oeffnen { margin-top: 0; }
.karte-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; min-height: 44px; padding: 12px 20px; border-radius: 999px;
  background: var(--akzent); color: var(--auf-akzent); text-decoration: none;
  font: 500 14px/1 "Text", sans-serif;
  transition: filter .15s ease-out, transform .12s ease-out;
}
.karte-link:hover { filter: brightness(1.12); }
.karte-link:active { transform: scale(.97); }
@media (min-width: 980px) { .karte-knoepfe { margin-top: auto; } }
@media (max-width: 719px) { .kopf-rechts { gap: 4px; } .kopf-kontakt { padding: 0 12px; min-height: 34px; } }

/* Impressum / Datenschutz */
.recht { max-width: 760px; padding: clamp(110px, 16vh, 160px) var(--rand) clamp(56px, 10vh, 110px); }
.recht h1 { font: 800 clamp(40px, 7vw, 76px)/1 "Anzeige", "Text", sans-serif; letter-spacing: -.03em; margin: 0 0 14px; }
.recht h2 { font-size: 19px; margin: 44px 0 10px; }
.recht p, .recht li { color: var(--leise); line-height: 1.6; }
.recht ul { padding-left: 1.2em; }
.recht a { color: inherit; }
.recht-unter { font-size: 15px; }
.recht-daten { display: grid; gap: 8px; margin: 0; }
.recht-daten div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.recht-daten dt { color: var(--leise); }
.recht-daten dd { margin: 0; }
.luecke { background: #ff4f9a; color: #fff; padding: 1px 6px; border-radius: 4px; }
.recht-stand { margin-top: 44px; font-size: 14px; }
@media (max-width: 719px) { .recht-daten div { grid-template-columns: 1fr; gap: 2px; } }