@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/zok/schrift/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

* { box-sizing: border-box; }
html { background: #0b0d12; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #0b0d12;
  -webkit-font-smoothing: antialiased;
}

.wahl {
  flex: 1;
  display: flex;
  min-height: 0;
}
.seite {
  position: relative;
  flex: 1 1 50%;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  text-decoration: none;
  overflow: hidden;
  transition: flex-grow .35s cubic-bezier(.3, .8, .3, 1);
}
@media (hover: hover) {
  .wahl:hover .seite { flex-grow: .85; }
  .wahl .seite:hover { flex-grow: 1.15; }
}
.seite:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }

.zok {
  color: #1e1b3a;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(34rem 34rem at 0% 0%, #ffd1e8, transparent 65%),
    radial-gradient(38rem 38rem at 100% 12%, #c9d8ff, transparent 65%),
    radial-gradient(40rem 32rem at 35% 100%, #c8f5e6, transparent 65%),
    #f6f4ff;
}
.zok-karte {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 420px;
  padding: 34px 30px 30px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 24px 60px rgba(80, 60, 160, .2);
  text-align: center;
  transition: transform .3s ease;
}
.zok:hover .zok-karte { transform: translateY(-4px); }
.zok-rad { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 12px 28px rgba(80, 60, 160, .3); }
.zok-name {
  margin-top: 8px;
  font-size: clamp(4rem, 13vw, 6.5rem);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: -.045em;
  line-height: .85;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.zok-unter { font-size: clamp(1.25rem, 3.6vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; }
.zok-text { max-width: 22em; font-weight: 450; line-height: 1.45; color: #5f5a7e; text-wrap: balance; }
.zok-los {
  margin-top: 12px;
  padding: .7em 1.4em;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 30px rgba(139, 92, 246, .38);
}

.zock {
  color: #d7dbe4;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: #0b0d12;
  background-image:
    radial-gradient(90% 62% at 22% -8%, rgba(255, 216, 168, .2), rgba(255, 216, 168, .07) 44%, transparent 78%),
    radial-gradient(80% 62% at 100% 100%, rgba(0, 0, 0, .4), transparent 72%),
    repeating-linear-gradient(180deg, transparent 0 236px, rgba(0, 0, 0, .55) 236px 239px, rgba(255, 255, 255, .035) 239px 240px, transparent 240px 480px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .055) 0 1px, rgba(255, 255, 255, .018) 1px 3px, rgba(0, 0, 0, .08) 3px 8px, rgba(0, 0, 0, .16) 8px 9px, rgba(0, 0, 0, .06) 9px 11px),
    linear-gradient(178deg, #1a1f27 0%, #141820 44%, #0d1016 78%, #090b11 100%);
}
.zock-inhalt { display: grid; justify-items: center; gap: 14px; text-align: center; transition: transform .3s ease; }
.zock:hover .zock-inhalt { transform: translateY(-4px); }
.name {
  font-family: "Arial Black", "Segoe UI Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, min(11vw, 18vh), 7.5rem);
  line-height: .92;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.wort, .endung { position: relative; display: inline-block; }
.wort::after, .endung::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  text-shadow: none;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wort {
  color: #5a6270;
  text-shadow:
    0 .007em 0 #78818f, 0 .014em 0 #69717f, 0 .021em 0 #5a6270, 0 .028em 0 #4c5461, 0 .035em 0 #3f4653,
    0 .042em 0 #333946, 0 .049em 0 #282d38, 0 .056em 0 #1e222b, 0 .063em 0 #161a21, 0 .070em 0 #0f1218,
    0 .086em .02em rgba(0, 0, 0, .95), 0 .14em .16em rgba(0, 0, 0, .7), 0 .26em .34em rgba(0, 0, 0, .55);
}
.wort::after {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .95) 0 1.6%, rgba(255, 255, 255, .42) 1.6% 3.4%, rgba(255, 255, 255, 0) 6%),
    linear-gradient(180deg, transparent 0 26.5%, rgba(255, 255, 255, .3) 26.5% 28%, transparent 28% 60%, rgba(0, 0, 0, .13) 60% 61%, transparent 61%),
    linear-gradient(180deg, #fff 0%, #e9f2fd 9%, #c2d1e2 23%, #93a5bb 36%, #5e7089 46%, #35475c 48.8%, #16202b 49.8%,
      #5c584e 50.8%, #8e8b81 55%, #ddd9cb 62%, #cfd9e6 72%, #9aa8ba 84%, #dde6f2 94%, #8f9aa9 100%);
}
.endung {
  color: #8c6d28;
  text-shadow:
    0 .007em 0 #9c7a2e, 0 .014em 0 #8c6d28, 0 .021em 0 #7b5f23, 0 .028em 0 #6a521e, 0 .035em 0 #594419,
    0 .042em 0 #493715, 0 .049em 0 #392b10, 0 .056em 0 #2b200c, 0 .063em 0 #1e1608, 0 .070em 0 #130e05,
    0 .086em .02em rgba(0, 0, 0, .95), 0 .14em .16em rgba(0, 0, 0, .7), 0 .26em .34em rgba(0, 0, 0, .55);
}
.endung::after {
  background-image:
    linear-gradient(180deg, rgba(255, 252, 240, .95) 0 1.6%, rgba(255, 246, 214, .42) 1.6% 3.4%, rgba(255, 255, 255, 0) 6%),
    linear-gradient(180deg, transparent 0 26.5%, rgba(255, 250, 230, .22) 26.5% 28%, transparent 28% 60%, rgba(0, 0, 0, .1) 60% 61%, transparent 61%),
    radial-gradient(70% 45% at 50% 96%, rgba(58, 48, 22, .34), transparent 70%),
    linear-gradient(180deg, #fffdf6 0%, #fdeec2 9%, #f0d08a 23%, #d3aa55 36%, #a37d2b 46%, #6a4d14 48.8%, #2c1f08 49.8%,
      #8c6a1e 50.8%, #b98f31 55%, #f6e6b4 62%, #e7c878 72%, #b58f3c 84%, #f5e2b6 94%, #927029 100%);
}
.zock-unter {
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #d8a33c;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}
.zock-los {
  margin-top: 10px;
  padding: .75em 1.5em;
  border-radius: 6px;
  background: linear-gradient(180deg, #3a414d, #232831);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .5);
  color: #e6e9ef;
  font-weight: 700;
  letter-spacing: .04em;
}
.zock:hover .zock-los { background: linear-gradient(180deg, #454d5b, #2a303a); }

.zock-desktop { display: none; font-size: .9rem; color: #9aa3b2; }
@media (pointer: coarse) and (hover: none) {
  .zock-desktop { display: block; }
}

.rechtlich {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #0b0d12;
  color: #6f7787;
  font: 500 .82rem system-ui, sans-serif;
}
.rechtlich a { color: #9aa3b2; }

@media (max-width: 760px) {
  .wahl { flex-direction: column; }
  .seite { flex-basis: auto; padding: 28px 18px; min-height: 46dvh; }
  .zok-karte { padding: 24px 22px 22px; gap: 6px; }
  .zok-rad { width: 64px; height: 64px; border-radius: 18px; }
  .zok-text { display: none; }
}

@media (max-height: 520px) and (min-width: 761px) {
  .seite { padding: 14px 18px; }
  .zok-karte { padding: 16px 24px 18px; gap: 4px; border-radius: 24px; }
  .zok-rad { width: 50px; height: 50px; border-radius: 14px; }
  .zok-name { margin-top: 2px; font-size: clamp(2.6rem, 15vh, 3.6rem); }
  .zok-unter { font-size: 1.1rem; }
  .zok-text { display: none; }
  .zok-los { margin-top: 6px; }
  .zock-inhalt { gap: 8px; }
  .name { font-size: clamp(2.4rem, 15vh, 4.2rem); }
  .zock-unter { font-size: 1rem; }
  .zock-los { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .seite, .zok-karte, .zock-inhalt { transition: none; }
}