:root{
  --bg: #0b0b10;
  --text: #f3f4ff;
  --muted: rgba(243,244,255,.75);

  --leftA: #ff8bd2;
  --leftB: #8be7ff;
  --leftC: #b6ff9a;

  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.14);

  --shadow: 0 18px 60px rgba(0,0,0,.45);
}

@font-face{
  font-family: "LeftFont";
  src:
    local("Vanity"),
    local("LeftFont"),
    url("./left/font.woff2") format("woff2"),
    url("./left/font.woff") format("woff"),
    url("./Vanity/Vanity-Bold.ttf") format("truetype");
  font-display: swap;
}

@font-face{
  font-family: "RightFont";
  src:
    local("another_danger"),
    local("RightFont"),
    url("./right/font.woff2") format("woff2"),
    url("./right/font.woff") format("woff"),
    url("./another_danger/Another Danger - Demo.otf") format("opentype");
  font-display: swap;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: #281d41;
  color: #111118;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.layout{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  align-items: stretch;
  position: relative;
}

.panel{
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}

.panel__inner{
  padding: clamp(16px, 2.4vw, 26px);
  height: 100%;
  border-radius: 18px;
  box-shadow: 0 26px 80px rgba(0,0,0,.22);
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.panel__inner--center{
  display: grid;
  place-items: center;
  height: 100%;
}

.panel--left{
  background-image:
    linear-gradient(135deg, rgba(255,139,210,.75), rgba(139,231,255,.65), rgba(182,255,154,.55)),
    url("./1.png");
  background-size: cover;
  background-position: center;
  color: #14111c;
}

.panel--left::before{
  content: "";
  position: absolute;
  inset: -3px;
  background:
    radial-gradient(14px 14px at 18% 25%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(18px 18px at 70% 40%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(12px 12px at 35% 70%, rgba(255,255,255,.8), transparent 60%);
  opacity: .55;
  pointer-events: none;
  filter: blur(.2px);
}

.panel--middle{
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

.panel--right{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.76), rgba(0,0,0,.92)),
    url("./2.png");
  background-size: cover;
  background-position: center;
}

.panel__title{
  margin: 0;
  letter-spacing: .2px;
  font-weight: 700;
  display: inline-block;
  padding: 14px 18px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.01)
  );
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 22px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}
.panel__title--left{
  font-family: "LeftFont", serif;
  font-size: clamp(36px, 5.2vw, 72px);
  color: rgba(12, 10, 18, .95);
}
.panel__title--right{
  font-family: "RightFont", system-ui, sans-serif;
  font-size: clamp(28px, 4.2vw, 60px);
  text-transform: uppercase;
  color: rgba(12, 10, 18, .95);
}

.counterCardWrap{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 100%);
  z-index: 5;
  pointer-events: none; /* nur die Karte selbst soll klickbar sein */
}

.counterCard{
  width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.41), rgba(255,255,255,.35));
  padding: 18px 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.counterCard:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
}
.counterCard:active{
  transform: translateY(1px);
}
.counterCard__value{
  font-size: clamp(26px, 4.2vw, 44px);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  text-align: center;
}

.primaryBtn, .secondaryBtn, .ghostBtn{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid transparent;
  font-weight: 800;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.primaryBtn:active, .secondaryBtn:active, .ghostBtn:active{ transform: translateY(1px); }

.primaryBtn{
  background: linear-gradient(135deg, rgba(255,139,210,.95), rgba(139,231,255,.88));
  color: #14111c;
  border-color: rgba(0,0,0,.08);
}
.primaryBtn:hover{ filter: brightness(1.05); }

.secondaryBtn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}
.secondaryBtn:hover{ background: rgba(255,255,255,.085); }

.ghostBtn{
  margin-top: 8px;
  background: rgba(255,255,255,.45);
  border-color: rgba(0,0,0,.10);
  color: rgba(10,10,16,.92);
}
.ghostBtn:hover{ background: rgba(255,255,255,.58); }
.ghostBtn--dark{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
}
.ghostBtn--dark:hover{ background: rgba(255,255,255,.075); }

/* DÜSTER: Zittern/Glitch */
.jitterText{
  display: inline-block;
  animation: jitter 170ms infinite steps(2, end);
  text-shadow:
    1px 0 rgba(255, 50, 50, .35),
    -1px 0 rgba(140, 231, 255, .18);
}

/* Lesbarkeit rechts: weißer Rand/Outline */
.panel__title--right{
  -webkit-text-stroke: 1px rgba(255,255,255,.85);
  paint-order: stroke fill;
  text-shadow:
    1px 1px 0 rgba(255,255,255,.75),
    -1px 1px 0 rgba(255,255,255,.75),
    1px -1px 0 rgba(255,255,255,.75),
    -1px -1px 0 rgba(255,255,255,.75),
    0 6px 18px rgba(0,0,0,.55);
}
@keyframes jitter{
  0%{ transform: translate(0,0) skewX(0deg); }
  20%{ transform: translate(1px,-1px) skewX(.4deg); }
  40%{ transform: translate(-1px,1px) skewX(-.3deg); }
  60%{ transform: translate(1px,0) skewX(.2deg); }
  80%{ transform: translate(-1px,-1px) skewX(-.2deg); }
  100%{ transform: translate(0,0) skewX(0deg); }
}

/* Modal */
.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modalOverlay.isOpen{ display: flex; }
.modal{
  width: min(520px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(20,20,26,.96), rgba(10,10,14,.96));
  box-shadow: 0 24px 90px rgba(0,0,0,.60);
  padding: 18px 16px;
}
.modal__title{
  margin: 0 0 6px 0;
  font-size: 18px;
}
.modal__desc{
  margin: 0 0 14px 0;
  color: rgba(255,255,255,.75);
  font-weight: 600;
}
.inputLabel{
  display: block;
  margin: 0 0 6px 0;
  color: rgba(255,255,255,.82);
  font-weight: 700;
}
.textInput{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
  font-weight: 700;
}
.textInput:focus{
  border-color: rgba(139,231,255,.55);
  box-shadow: 0 0 0 4px rgba(139,231,255,.12);
}
.modal__actions{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modal__error{
  margin-top: 10px;
  min-height: 18px;
  color: rgba(255, 115, 115, .95);
  font-weight: 800;
}
.modal__fineprint{
  margin: 12px 0 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}

/* Mobile: links oben, mitte mitte, rechts unten */
@media (max-width: 880px){
  .layout{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .panel--left{ order: 1; }
  .panel--right{ order: 2; }
  .counterCardWrap{
    top: 50%;
  }
  .counterCard{
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }

  /* Mobile: Buttons im Passwort-Dialog etwas schmaler */
  .modal__actions{
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    padding: 0 14px; /* Abstand links/rechts */
  }
  .modal__actions .primaryBtn,
  .modal__actions .secondaryBtn{
    padding: 10px 12px;
    min-width: 0;
    width: 100%;
  }
}

/* Desktop: größere Schriften + oben ausgerichtet mit gutem Padding */
@media (min-width: 881px){
  .panel{
    border-radius: 22px;
  }
  .panel--left{
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .panel--right{
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .panel__inner{
    align-content: start;
    padding-top: clamp(34px, 5.2vw, 92px);
  }
  .panel__title--left{
    font-size: clamp(52px, 5.8vw, 96px);
  }
  .panel__title--right{
    font-size: clamp(40px, 4.4vw, 78px);
  }
}

/* Mobile: nur Außenkanten runden (oben/unten), innen keine Rundung */
@media (max-width: 880px){
  .panel{
    border-radius: 22px;
  }
  .panel--left{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .panel--right{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .jitterText{ animation: none; }
  .primaryBtn, .secondaryBtn, .ghostBtn{ transition: none; }
}