/* ===============================
   Apple-inspirierter, reduzierter Look – vollständig, responsive & scrollbar-frei
   =============================== */

/* Font */
@font-face{
  font-family:"Avenir-Light";
  src:url("/fonts/Avenir-Light.ttf") format("truetype");
  font-weight:300;
  font-style:normal;
}

/* ---------- Design-Variablen ---------- */
:root{
  --bg:#0a0a0a;
  --fg:#ffffff;
  --hairline: color-mix(in srgb, #ffffff 18%, transparent);
  --hairline-strong: color-mix(in srgb, #ffffff 26%, transparent);
  --accent:#0a84ff;
  --glass: color-mix(in srgb, #0b1220 72%, #000 28%);
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 .8rem 2.2rem rgba(0,0,0,.35), 0 .1rem .4rem rgba(0,0,0,.35);
  --radius:1rem;
  --ring:0 0 0 .16rem color-mix(in srgb, var(--accent) 55%, transparent);

  /* Layout-Variablen */
  --pad: clamp(.5rem,2vw,1rem);
  --gap: clamp(.5rem,2vw,1rem);
}

/* ---------- Basissetup ---------- */
*{ box-sizing:border-box; }

html, body{
  height:100svh;
  margin:0; padding:0;
  background:
    radial-gradient(120vmax 80vmax at 10% -10%, #0b1220 18%, transparent 60%),
    radial-gradient(120vmax 80vmax at 110% 0%, #051429 12%, transparent 58%),
    var(--bg);
  color:var(--fg);
  font-family:"Avenir-Light",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow:hidden;                 /* keine Scrollbars */
}

/* Scrollbar generell ausblenden (Failsafe) */
*::-webkit-scrollbar{ width:0; height:0; }
*{ scrollbar-width:none; }

/* Container: zwei Kacheln nebeneinander */
body{
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  gap:var(--gap);
  padding:var(--pad);
}

/* ---------- Link-Kachel ---------- */
.link{
  position:relative;
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  border-radius:var(--radius);
  background:#000;
  box-shadow:var(--shadow);
  transform:translateZ(0);
}

/* Bildfüllung */
.link img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
  transition:transform .6s var(--ease), filter .6s var(--ease);
}

/* sanfte Vignette */
.link::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,.55) 0%, transparent 52%),
    linear-gradient(to top, rgba(0,0,0,.30), rgba(0,0,0,.05));
  z-index:0;
  pointer-events:none;
}

/* subtile Rahmenlichter */
.link::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:1px solid var(--hairline);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#ffffff 6%,transparent);
  pointer-events:none;
  z-index:1;
}

/* Titel/Label */
.link span{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-size:clamp(1.15rem, 2.7vw, 2.4rem);
  line-height:1.1;
  letter-spacing:.01em;
  padding:.6rem .9rem;
  border-radius:.65rem;
  color:var(--fg);
  text-shadow:0 .06rem .2rem rgba(0,0,0,.6);
  background: color-mix(in srgb,#0b1220 38%, transparent);
  border:1px solid var(--hairline);
  backdrop-filter:saturate(1.2) blur(6px);
  -webkit-backdrop-filter:saturate(1.2) blur(6px);
  transition:transform .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease);
  white-space:nowrap;
  text-align:center;
}

/* mittiger Glasbalken (bestehendes .overlay-Element) */
.overlay{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(70ch,92%);
  height:11%;
  
  pointer-events:none;
  z-index:1;
}

/* ---------- Interaktion ---------- */
.link:hover img{ transform:scale(1.05); filter:saturate(1.05); }
.link:active img{ transform:scale(1.03); }

.link:hover span{
  transform:translateY(-2px);
  background: color-mix(in srgb,#0b1220 56%, transparent);
  border-color:var(--hairline-strong);
}

.link:focus-visible{ outline:none; box-shadow:var(--ring); }
.link:focus-visible span{ box-shadow:var(--ring); }

/* ---------- Headings ausgeblendet ---------- */
h1,h2{ display:none; }

/* ===============================
   Language Popup – Glasoptik, ohne Positionsänderung
   =============================== */
#language-popup{
  display:none;                 /* per JS auf flex setzen */
  position:fixed;
  inset:0;
  z-index:1001;
  color:#fff;
  text-align:center;

  background:rgba(0,0,0,.40);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

#language-popup .popup-content{
  width:42%;
  max-width:82%;
  padding:2rem;
  border-radius:1rem;

  background:linear-gradient(180deg, rgba(17,24,39,.55), rgba(2,6,23,.45));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 1.1rem 2.4rem rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
}

#language-popup .popup-content p{
  margin:0 0 1rem 0;
  line-height:1.5;
}

#language-popup .language-buttons{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin-top:1rem;
}

#language-popup .language-buttons .primary{
  cursor:pointer;
  color:#fff;
  min-height:3rem;
  min-width:2rem;
  padding:.45rem 1rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.26);
  border-radius:.65rem;
  transition:background-color .25s ease, border-color .25s ease, transform .06s ease, box-shadow .25s ease;
}
#language-popup .language-buttons .primary:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.40);
}
#language-popup .language-buttons .primary:active{
  transform:translateY(1px);
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.46);
}
#language-popup .language-buttons .primary:focus-visible{
  outline:.16rem solid rgba(10,132,255,.55);
  outline-offset:.18rem;
}

/* ===============================
   Cookie Banner – Glasoptik, Position unverändert
   =============================== */
#cookie-banner{
  display:none;                 /* per JS auf flex setzen */
  position:fixed;
  inset:0;
  z-index:1000;
  color:#fff;
  text-align:center;

  background:rgba(0,0,0,.40);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  justify-content:center;
  align-items:center;
  overflow:hidden;
}

#cookie-banner-content{
  width:40%;
  max-width:80%;
  padding:2rem;
  border-radius:1rem;

  background:linear-gradient(180deg, rgba(17,24,39,.55), rgba(2,6,23,.45));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 1.1rem 2.4rem rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
}

button.primary, button.secondary{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.04);
  color:#fff;
  margin-top:1rem;
  border-radius:.65rem;
  font-size:1rem;
  min-height:3rem;
  padding:.45rem 1rem;
  transition:background-color .25s ease, border-color .25s ease, transform .06s ease, box-shadow .25s ease;
}
button.primary{ min-width:12.5rem; }
#secondary-buttons{
  height:3rem;
  display:flex;
  justify-content:center;
  gap:.5rem;
}
button.secondary{ min-width:6rem; }

button.primary:hover, button.secondary:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.40);
}
button.primary:active, button.secondary:active{
  transform:translateY(1px);
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.46);
}
button.primary:focus-visible, button.secondary:focus-visible{
  outline:.16rem solid rgba(10,132,255,.55);
  outline-offset:.18rem;
}

/* Portrait-Anpassung Cookie */
@media (orientation:portrait){
  #cookie-banner-content{ width:70%; }
}

/* ===============================
   Portrait-Optimierung (Smartphones)
   – responsive & zentriert, ohne Scrollbars
   =============================== */
@media (orientation:portrait){
  /* global scrollbar-frei */
  html, body{ overflow:hidden; }

  #language-popup .popup-content{
    width: min-content;
  }

  body{
    flex-direction:column;
    align-items:center;              /* horizontal zentriert */
    justify-content:center;          /* vertikal zentriert */
    gap:var(--gap);
    padding:var(--pad);
    height:100svh;
  }

  /* Zwei Panels, zentriert und responsiv in der Breite */
  .link{
    width:min(94vw, 46rem);          /* zentriert, max. Breite begrenzen */
    margin-inline:auto;
    height:calc((100svh - (var(--pad) * 2) - var(--gap)) / 2);
    min-height:0;
  }

  .overlay{
    width:94%;
    height:12%;
  }

  /* Titel responsiv, sauber umbrechbar und zentriert */
  .link span{
    font-size:clamp(1rem, 2.6vh, 1.5rem);
    padding:.5rem .75rem;
    white-space:normal;              /* Zeilenumbruch erlauben */
    word-break:break-word;
    overflow-wrap:anywhere;
    text-align:center;
    max-width:90%;
  }
}

/* ===============================
   Pointer coarse (Touch) – weniger Bewegung
   =============================== */
@media (pointer:coarse){
  .link img{ transition-duration:.4s; }
  .link:hover img{ transform:none; }
}

/* ===============================
   Bewegungsreduktion
   =============================== */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}