:root{
  --paper:#f5f5f8;
  --ink:#111111;
  --gray:#777777;
  --gold:#b28b47;
  --gold-soft:#d4b573;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.7;
  letter-spacing:.01em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Header im JTS-Stil (gemeinsam für sanfter_anfang) */
header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklch, var(--paper) 82%, #ffffff);
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.wrap{
  max-width:880px;
  margin:0 auto;
  padding:0.5rem 1rem;
}

.row{
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap;
}

.spacer{ flex:1 1 auto; }

.title-head{
  font-size:clamp(1.0rem, 0.9rem + 1.2vw, 1.6rem);
  margin:0.05rem 0;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

label.muted{
  color:var(--gray);
  font-size:.9rem;
}

/* JTS-Chip */
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.28rem .9rem;
  border-radius:999px;
  font-size:.9rem;
  cursor:pointer;
  isolation:isolate;
  position:relative;
  text-decoration:none;
  background:radial-gradient(circle at 30% 30%,
              #f8e4b7 0%, #ddb266 45%, var(--gold) 100%);
  color:#fff;
  border:1px solid rgba(178,139,71,0.35);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.18),
    0 0 0 1px rgba(178,139,71,0.35);
  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .25s ease,
    opacity .25s ease;
  opacity:0;
  animation:chipFadeIn 1.1s ease-out forwards;
}

.chip::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  z-index:-1;
  background:radial-gradient(
    circle,
    rgba(178,139,71,0.70) 0%,
    rgba(178,139,71,0.35) 35%,
    rgba(178,139,71,0.10) 65%,
    transparent 100%
  );
  filter:blur(8px);
  opacity:0.85;
  animation:haloPulseChip 5s ease-in-out infinite;
}

@keyframes haloPulseChip{
  0%,100%{ transform:scale(0.9); opacity:0.6; }
  50%{ transform:scale(1.12); opacity:1; }
}

@keyframes chipFadeIn{
  from{ opacity:0; transform:translateY(-4px) scale(0.96); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}

.chip:hover{
  background:radial-gradient(circle at 30% 30%,
              #fbe9bf 0%, #e0b96f 40%, #c0924d 100%);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.22),
    0 0 0 1px rgba(178,139,71,0.5);
}

.chip:active{ transform:scale(0.97); }
.chip:active::before{ transform:scale(1.18); opacity:1; }

/* Sprach-Auswahl */
select{
  appearance:none;
  border:1px solid #d8d0c5;
  background:rgba(255,255,255,0.9);
  color:var(--ink);
  border-radius:12px;
  padding:.45rem .9rem;
  font-size:.9rem;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}

select:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
}

/* Dark-Mode-Variante für Header/Chip/Select */
@media (prefers-color-scheme: dark){
  body{
    background:linear-gradient(#11100e,#151310);
    color:#f3f3f3;
  }
  header{
    background:color-mix(in oklch,#151310 80%, #000000);
    border-bottom-color:rgba(255,255,255,0.04);
  }
  .chip{
    background:radial-gradient(circle at 30% 30%,
                #252525 0%, #181818 45%, #000 100%);
    border-color:rgba(212,181,115,0.35);
    color:var(--gold-soft);
  }
  .chip::before{
    background:radial-gradient(
      circle,
      rgba(212,181,115,0.85) 0%,
      rgba(212,181,115,0.45) 35%,
      rgba(212,181,115,0.16) 65%,
      transparent 100%
    );
    filter:blur(10px);
  }
  .chip:hover{
    background:radial-gradient(circle at 30% 30%,
                #353535 0%, #202020 45%, #050505 100%);
  }
  select{
    background:rgba(10,10,10,0.9);
    border-color:#34302a;
    color:#f3f3f3;
  }
}

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce){
  .chip{ animation:none; }
  .chip::before{ animation:none; }
}