/*
* {
  outline: 1px solid rgba(0,0,0,0.1);
}

div, section, header, main {
  outline: 2px dashed red;
}

/* === Base === */
:root{
  --accent:#8B85F9;
  --brand-blue1: #F4F2FF;
  --brand-blue2: #C4BDFE;
  --brand-blue3: #8B85F9;
  --brand-blue4: #4D4EEC;
  --brand-blue5: #1925D1;
  --brand-blue6: #081CA6;
  --brand-blue7: #02187C;
  --brand-blue8: #001451;
  --brand-blue9: #000B26;
  --brand-green1: #F2FFFB;
  --brand-green2: #C9FDE8;
  --brand-green3: #97EBC5;
  --brand-green4: #5BBC8B;
  --brand-green5: #20613C;
  --brand-green6: #12522A;
  --brand-green7: #0A441D;
  --brand-green8: #073513;
  --brand-green9: #05260C;
  --footer-h: 48px; /* feste Footer-Höhe */
 }

html, body, button {
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
}

.fade-in {
  opacity: 0;
  transition: opacity 3s ease; /* Dauer und Kurve */
}
.fade-in.show {
  opacity: 1;
}

html, body {
  height: 99%;
}

body{
  background-color:#0f1722;
  color:#fff;
  text-align:center;
}

/* Layout: Footer immer unten */
body { display: flex; flex-direction: column; }

/* Site footer */
.site-footer { border-top: 1px solid #394954; background: #0f1722; text-align: center; width: 100%; margin-top: auto; padding-bottom: 5px;}
.site-footer .dq-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* bei kleinen Screens umbrechen */
  gap: 12px;
}
/* Falls versehentlich mehrere Footer im DOM sind: nur den letzten zeigen */
.site-footer:not(:last-of-type){ display:none !important; }
@media (max-width: 520px) {
  .site-footer .dq-footer-links {
    align-items: center;
    gap: 8px;
  }
}

header{ display:flex; justify-content:flex-end; padding:5px; position: sticky; top: 0; background: #0f1722; }
.top-right{ display:flex; align-items:center; }
.top-btn{ background:none; border:none; color:#fff; font-size:14px; cursor:pointer; }
/* Add bottom space so the page can scroll even with fixed elements overlapping the bottom area (e.g., thinkfield/QA). */
main{ margin-top:80px; }

h1{ font-size:3rem; }
.blue{ color:#00aaff; }
.subtitle{
  margin-top:10px;
  color:#bbb;
  font-size:1.3rem;
  margin-bottom:5px; }

.user-greeting {
  font-weight: 500;
  color: white;
  margin-right: 12px;
}

/* Hide login button when logged in */
html.is-logged-in .btn-login { display: none !important; }

/* Hide the entire login promo row when logged in */
html.is-logged-in .dq-row-login { display: none !important; }

.Btn-logout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: rgb(255, 65, 65);
  }

/* Hide logout button when not logged in */
html:not(.is-logged-in) .Btn-logout { display: none !important; }

/* plus sign */
.sign-logout {
  width: 100%;
  transition-duration: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign-logout svg {
  width: 17px;
}

.sign-logout svg path {
  fill: white;
}
/* text */
.text-logout {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  transition-duration: .3s;
}
/* hover effect on button width */
.Btn-logout:hover {
  width: 125px;
  border-radius: 40px;
  transition-duration: .3s;
}

.Btn-logout:hover .sign-logout {
  width: 30%;
  transition-duration: .3s;
  padding-left: 20px;
}
/* hover effect button's text */
.Btn-logout:hover .text-logout {
  opacity: 1;
  width: 70%;
  transition-duration: .3s;
  padding-right: 10px;
}
/* button click effect*/
.Btn-logout:active {
  transform: translate(2px ,2px);
}

  /* === HUD-Anzeige oben rechts === */
.hud {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.hud-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: #cfcfcf; /* Grundfarbe */
  font-family: "Outfit", "Noto Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: default;
  padding: 0;
}

.hud-item svg {
  flex-shrink: 0;
}

.hud-icon-img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

/* individuelle Farben für die Werte */
#hud-streak .hud-value {
  color: #ff9800; /* Orange für Flamme */
}

#hud-points .hud-value {
  color: #4fc3f7; /* Blau für Kristall */
}

#hud-lives .hud-value {
  color: #e57373; /* Rot für Herz */
}

/* 1) Breite deiner mittigen Content-Spalte angeben */
:root{
  /* Stell das auf die tatsächliche max-width deiner Hauptspalte */
  --content-max: 960px;         /* z.B. 880 / 900 / 1024… */
  --gap-to-qa: 32px;            /* gewünschter Abstand zur QA-Box */
}

/* === Daily Quests: Right-side panel === */
.dq-panel{ position: fixed; right:16px; left:auto; transform:none; z-index:1000; }

.dq-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dq-header h3{
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.dq-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.dq-item{ margin: 9px; z-index: 2; }

.dq-row{
  display: grid;
  grid-template-columns: auto 1fr; /* links Icon – Mitte flexibel – rechts Icon */
  align-items: center;
  column-gap: 12px;
}

.dq-row-login {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
}

.dq-icon{ font-size: 40px; line-height: 1; opacity: .9; }
.dq-reward{ font-size: 28px; line-height: 1; }

.dq-icon-login {
  grid-row: 1;
  grid-column: 1;
  font-size: 1.8rem;
  color: #00c36b; /* kräftiges Grün */
}

.dq-main{ gap: 6px; z-index: 2; justify-content: start; }

/* Login mini-card layout: icon | text | figure */
.dq-row-login .dq-main{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-auto-rows: auto;
  column-gap: 10px;
  align-items: start;
}
.dq-row-login .dq-icon-login{
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}
.dq-row-login .dq-main p{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
.dq-row-login .login-figure{
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  width: 72px;
  height: auto;
}
.dq-row-login .btn-login{
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}
@media (max-width: 420px){
  .dq-row-login .login-figure{ width: 56px; }
}
.dq-label{ font-size: 14px; font-weight: 600; color: #cfe3ff; padding: 2px; margin-bottom: 7px; text-align: left;}

.dq-bar{
  position: relative;
  height: 12px;
  background: #22303c;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.dq-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd24d, #ffb400);
  /* bei „unfertig“ etwas dunkler:
     background: linear-gradient(90deg, #64748b, #475569); */
}
.dq-count{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 11px;
  font-weight: 700;
  color: #1b242d;
  mix-blend-mode: screen;    /* text hebt sich auf dunklem bg ab */
}

.btn-login {
  background: var(--brand-green5);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-login:hover {
  transform: scale(1.05);
}

/* === Haupt-Buttonreihe === */
.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  min-height: 28px;
  position: relative; /* Bezugsbox für die Klammer */
  padding-top: 1px;   /* noch näher an den Buttons */
}

/* === Basis-Style für alle Button-Typen === */
.button-row .btn,
.sub-buttons .sub-btn,
.level-buttons .level-btn {
  position: relative;
  box-sizing: border-box;
  background-color: #1f2937;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.06s ease;
}

/* === Farbakzente für Hauptbuttons === */
.button-row .btn:nth-child(1):hover,
.button-row .btn:nth-child(1).active {
  border-color: #8B85F9;
  background: #2a3551;
}
.button-row .btn:nth-child(2):hover,
.button-row .btn:nth-child(2).active {
  border-color: #4D4EEC;
  background: #2a3551;
}
.button-row .btn:nth-child(3):hover,
.button-row .btn:nth-child(3).active {
  border-color: #1925D1;
  background: #2a3551;
}
.button-row .btn:nth-child(4):hover,
.button-row .btn:nth-child(4).active {
  border-color: #081CA6;
  background: #2a3551;
}

.button-row .btn:nth-child(5):hover,
.button-row .btn:nth-child(5).active {
  border-color: var(--brand-blue7);
  background: #2a3551;
}

/* === Inaktive Hauptbuttons dauerhaft ausgrauen (Phonologie, Syntax, Semantik) === */
/* Phonologie (aktueller 2. Button) */
.button-row .btn:nth-child(2),
.button-row .btn:nth-child(2):hover,
.button-row .btn:nth-child(2).active {
  background-color: #151d2a;
  color: #7c8390;
  border-color: #2b3544;
  cursor: not-allowed;
  pointer-events: none;
}
/* Syntax und Semantik per data-sub selektiert */
.button-row .btn[data-sub="sub-syntax"],
.button-row .btn[data-sub="sub-semantik"],
.button-row .btn[data-sub="sub-syntax"]:hover,
.button-row .btn[data-sub="sub-semantik"]:hover,
.button-row .btn[data-sub="sub-syntax"].active,
.button-row .btn[data-sub="sub-semantik"].active {
  background-color: #151d2a;
  color: #7c8390;
  border-color: #2b3544;
  cursor: not-allowed;
  pointer-events: none;
}
/* Badge sichtbar und farbig lassen */
.button-row .btn:nth-child(2) .badge,
.button-row .btn[data-sub="sub-syntax"] .badge,
.button-row .btn[data-sub="sub-semantik"] .badge {
  opacity: 1;
}

/* === Grammatik-Klammer ber Morphologie + Syntax === */
.group-bracket {
  position: absolute;
  top: -18px;           /* ber den Buttons */
  height: 18px;
  left: 0;
  width: 0;             /* Breite wird per JS gesetzt */
  pointer-events: none;
  z-index: 2;
}

.group-bracket .bracket-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.group-bracket .bracket-svg path {
  stroke: var(--brand-blue3);
  stroke-width: 2;
  fill: none;
  opacity: 0.85;
}

/* gezielte Farben fr Morphologie/Syntax, falls Wrapper die nth-child-Logik verndert */
.btn.btn-morph:hover,
.btn.btn-morph.active {
  border-color: #1925D1; /* wie der bisherige 3. Button */
  background: #2a3551;
}

.btn.btn-syntax:hover,
.btn.btn-syntax.active {
  border-color: #081CA6; /* wie der bisherige 4. Button */
  background: #2a3551;
}

/* Rectangular grammar bracket elements */
.group-bracket { position: absolute; top: -8px; height: 10px; left: 0; width: 0; pointer-events: none; z-index: 2; }
.group-bracket .bracket-leg { display: none; }
.group-bracket .bracket-leg.left { left: 0; }
.group-bracket .bracket-leg.right { right: 0; }
.group-bracket .bracket-top { position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.group-bracket .bracket-top-left,
.group-bracket .bracket-top-right { position: absolute; top: 0; height: 2px; background: var(--brand-blue3); opacity: .9; }
.group-bracket .bracket-top-left { left: 0; width: var(--leftWidth, 0px); }
.group-bracket .bracket-top-right { right: 0; width: var(--rightWidth, 0px); }
.group-bracket .bracket-label { position: absolute; left: 50%; transform: translateX(-50%); top: -8.5px; font-size: 12px; font-weight: 700; color: var(--brand-blue2); padding: 0 6px; }

/* === Unter- & Level-Button-Gruppen: Standardzustand (versteckt) === */
.sub-buttons,
.level-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 0;
  margin-top: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: height 0.2s ease, margin-top 0.2s ease;
}

/* === Sichtbar, wenn aktiv === */
.sub-buttons.active,
.level-buttons.active {
  height: 48px;
  margin-top: 8px;
  visibility: visible;
  pointer-events: auto;
}

/* === Hover & Active für Unter- und Levelbuttons === */
.sub-buttons .sub-btn:hover,
.sub-buttons .sub-btn.active,
.level-buttons .level-btn:hover,
.level-buttons .level-btn.active {
  border-color: var(--accent);
  background: #2a3551;
}

.badge {
  position: absolute;
  top: -6px;      /* leicht nach oben verschoben */
  right: -6px;    /* leicht nach rechts raus */
  background: #ff9800;
  color: white;
  font-size: 0.6rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 5;            /* <- nach vorne */
}

/* === Thinkfield === */
.hier-frage{ text-align:left; font-size:.8rem; }
.thinkfieldcard{
  background:none; box-shadow:none;
  padding:16px 0 0;
  margin:12px auto 24px;
  border-radius:0; max-width:900px;
  position: fixed;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  height: 220px;
  width: 880px;
  z-index: 100;
}

.thinkfield{
  position: relative;
  width: 100%;
  height: 100%;
}

/* Canvas füllt die Fläche */
.thinkfield canvas{
  position: absolute;
  inset: 0;           /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Text NICHT strecken, nur absolut mittig platzieren */
.thinkfield .thinkfield-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;        /* wichtig: NICHT 100% */
  height: auto;       /* wichtig: NICHT 100% */
  max-width: 90%;
  text-align: center;
  white-space: normal;   /* kein erzwungener Einzeiler */
  pointer-events: none;
  z-index: 1;           /* über dem Canvas */
  background: transparent; /* testweise kein Hintergrund */
  color: #a78bfa;
  font-size: .9rem;
}


/* === QA-Container === */
#qa {
  max-width: 900px;   /* Breite begrenzen */
  margin-left: auto;  /* Abstand links */
  margin-right: auto; /* rechts flexibel */
  align-items: flex;
  position: relative;
}

.qa-card {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  position: relative;
  background: #1f2937;
  border-radius: 1rem;
  overflow: hidden;
  font-family: 'Noto Sans', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 16px;
  --gradient: linear-gradient(to bottom, #C4BDFE, #C4BDFE, #4D4EEC);
  --color: #32a6ff;
  min-height: 280px;
  justify-content: space-between;
}

.badge-qa-card {
  position: absolute;
  background: var(--brand-blue4);
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 5;            /* <- nach vorne */
  top: -10px;      /* leicht nach oben verschoben */
  right: -10px;    /* leicht nach rechts raus */
}

.qa-card-wrap {
  position: relative;
  overflow: visible;
}

.qa-card:before {
  position: absolute;
  content: "";
  inset: 0.0625rem;
  border-radius: 0.9375rem;
  background: #1f2937;
  z-index: 2
}

.qa-card:after {
  position: absolute;
  content: "";
  width: 0.25rem;
  inset: 0.65rem auto 0.65rem 0.5rem;
  border-radius: 0.125rem;
  background: var(--gradient);
  transition: transform 300ms ease;
  z-index: 4;
}

.qa-card:hover:after {
  transform: translateX(0.15rem);
}

.qa-question {
  color: var(--color);
  padding: 1.2rem 0.25rem 0.4rem 1.25rem;
  font-weight: 500;
  font-size: 1.1rem;
  transition: transform 300ms ease;
  z-index: 5;
  text-align: left;
}

.qa-card:hover .qa-question {
  transform: translateX(0.15rem)
}

.qa-answer{
  font-family: 'Noto Sans', "Inter", "Segoe UI", Arial, sans-serif;
  color:#99999d;
  padding:0;
  display:flex;
  align-items:center;
  gap:8px;
  position: relative; /* sorgt dafür, dass z-index greift */
  z-index: 100;
  transition: margin-left 300ms ease; /* statt transform */
  min-height: 49px;
}


.qa-answer #free-answer{
  width: 100%;
  padding: .5rem 1.3rem;     /* hier definierst du den sichtbaren Einzug */
  box-sizing: border-box;
}

.qa-answer #free-answer::-webkit-scrollbar {
  width: 8px;             /* Breite */
}

.qa-answer #free-answer::-webkit-scrollbar-track {
  background: #1e293b;    /* Hintergrundspur */
  border-radius: 8px;
}

.qa-answer #free-answer::-webkit-scrollbar-thumb {
  background: #64748b;    /* eigentlicher Balken */
  border-radius: 8px;
}

.qa-answer #free-answer::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;    /* beim Hover heller */
}

.qa-answer #free-answer {
  scrollbar-width: thin;             /* dünner Balken */
  scrollbar-color: #64748b #1e293b;  /* Daumen + Hintergrund */
}

.qa-card:hover .qa-answer{
  margin-left: .25rem;             /* statt translateX(...) */
}

.notiglow,
.notiborderglow {
  position: absolute;
  width: 20rem;
  height: 20rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side at center, white, transparent);
  opacity: 0;
  transition: opacity 300ms ease;
  left: -20px;
}

.notiglow {
  z-index: 3;
}

.notiborderglow {
  z-index: 1;
}

.qa-card:hover .notiglow {
  opacity: 0.1
}

.qa-card:hover .notiborderglow {
  opacity: 0.1
}

.note {
  color: var(--color);
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.9rem;
  width: 75%;
}


.qa{
  width:100%; max-width:70rem; margin:2.5rem auto 0; padding:0 2rem;
  text-align:left; display:block;
}

.hidden{
  visibility:hidden;
  pointer-events: none; /* verhindert Klicks */ }

.hidden2{
display: none !important;
pointer-events: none; /* verhindert Klicks */ }

.btn-row {
  display: flex;
  align-items: center;
  column-gap: 12px;
  margin-top: 5px;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  flex-direction: row;
}

/* Rechts-Spalte für beide Varianten (nie gleichzeitig sichtbar) */
.btn-row .btn-check{ grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
.btn-row .reihe-unter-feedback{ grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
.btn-row .btn-explain{ grid-column: 1; grid-row: 1; align-self: center; }
.btn-row .btn-skip{ grid-column: 1; grid-row: 1; align-self: center; }
/* Ensure the skip wrapper occupies the left grid cell, but hide by default */
.btn-row .skip-wrap{ grid-column: 1; grid-row: 1; align-self: center; display: none; }
/* Show the skip wrapper only when the explain button is hidden (adjacent sibling) */
.btn-row .btn-explain.hidden + .skip-wrap{ display: inline-block; }
/* Inside the button row, hidden items must not reserve space */
.btn-row .hidden{ display: none !important; }

.btn-explain, .btn-check, .next-btn, .btn-skip {
  position: relative;
  overflow: hidden;
  height: 2.5rem;
  padding: 0 2rem;
  border-radius: 15px;
  background: #1f2937;
  background-size: 400%;
  color: #fff;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  display: flex;
  gap: 0.5rem;             /* kleiner Abstand zwischen Text und Pfeil */
  min-width: 215px;
}

/* Ausgrauen statt Verstecken, wenn deaktiviert */
.btn-check:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none; /* keine Hover-Animationen/Klicks */
}
.btn-check:disabled::before {
  transform: none !important;
}

/* Skip-Button: bei 0 Leben deaktivieren (50% Opacity + Greyscale) */
.btn-skip:disabled {
  opacity: 0.5;
  filter: grayscale(100%);
  cursor: not-allowed;
  overflow: visible; /* Tooltip darf aus dem Button herausragen */
}
.btn-skip:disabled::before {
  transform: none !important;
}

.btn-skip-wrap {
  position: relative;
  display: inline-block;

}

/* Promo-Limit: Frage und Tastatur ausgrauen */
#qa-question.promo-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.ipa-keyboard-wrapper.promo-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Ganze QA-Karte bei Promo-Limit ausgrauen */
.qa-card.promo-disabled {
  pointer-events: none;
}

/* Versteckt das freie Textfeld, wenn gesperrt */
.qa-card.promo-disabled #free-answer {
  display: none !important;
}

/* Deutlicher Hinweisbalken über dem Eingabefeld */
.limit-banner {
  background: linear-gradient(90deg, #ff9800, #ffcc33);
  color: #222;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  z-index: 10;
  display: flex;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.limit-banner-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.limit-banner-text { line-height: 1.2; }
.limit-banner-title { font-weight: 700; }
.limit-banner-sub { font-weight: 600; }

/* Inhalt, der im Limit-Fall in #qa-answer angezeigt wird */
.promo-limit-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  cursor: not-allowed;
  border-radius: 8px;
}
.promo-limit-text {
  margin: 0;
  font-size: 1rem;
  color: #e5e7eb;
  padding-left: 8px;
}
.promo-limit-image {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Separates, frei skalierbares Overlay-Bild in der Karte */
.promo-limit-figure {
  position: absolute;
  right: 12px;
  pointer-events: none; /* keine Interaktion blockieren */
  z-index: 10;
}
.promo-limit-figure img {
  width: var(--promo-img-size, 100px);
  height: auto;
  display: block;
}
.qa-card.promo-disabled .qa-answer { padding-right: var(--promo-img-pr, 0px); }

.btn-explain svg, .next-btn svg, .btn-skip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  z-index: 1000;
}

/* Sichtbarkeit: dq-card nur zeigen, wenn QA sichtbar ist */
.dq-card { display: none; }
#qa:not(.hidden) ~ .dq-card { display: block; }

/* Drei leere Karten unten (nebeneinander) */
.qa-bottom-cards{
  max-width: 900px;
  margin: 36px auto 24px;
  display: none;   /* standardmäßig ausgeblendet */
  gap: 18px;
  padding: 0 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.qa-card.qa-mini {
  background: #1e1f24;
  border-radius: 14px;
  padding: 12px 16px;
  margin: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  color: #fff;
}

#qa:not(.hidden) ~ .qa-bottom-cards{ display:flex; flex-wrap: wrap; }
.qa-bottom-cards .qa-card,
.qa-card.qa-mini{
  flex: 1 1 0;
  height: 8rem;        /* gleiche Grundhöhe wie oben */
  min-width: 250px;
  max-width: 300px;
  --gradient: none;
  min-height: 150px;
  padding: 10px;
  list-style: none;
  justify-content: center;
  overflow: visible;
}
.qa-bottom-cards .qa-card .qa-question{
  /* leer, aber sorgt für gleiche Innenabstände */
  min-height: 1px;
}

.btn-explain:hover::before, .btn-check:hover::before, .next-btn:hover::before, .btn-skip:hover::before {
  transform: scaleX(1);
}

.btn-explain-text, .btn-check-text, .next-btn-text, .btn-skip-text {
  position: relative;
  z-index: 1000;
}

.btn-explain::before, .btn-check::before, .next-bnt::before, .next-btn::before, .btn-skip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(
    82.3deg,
    rgba(150, 93, 233, 1) 10.8%,
    rgba(99, 88, 238, 1) 94.3%
  );
  transition: all 0.475s;
}

/* Der Hauptcontainer für die Tastatur */
.ipa-keyboard-wrapper {
  display: flex;
  justify-content: center; /* mittig horizontal */
  margin-top: 30px;         /* etwas Abstand nach oben */
  z-index: 10;
}

.ipa-keyboard-wrapper.is-hidden {
  visibility: hidden !important;
  opacity: 0;         /* unsichtbar */
}

/* Die Tastatur selbst */
.ipa-keyboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0.7rem;
}

.ipa-row {
  display: flex;
  justify-content: center;   /* Zeileninhalt mittig */
  flex-wrap: wrap;
  gap: 6px;
}

.ipa-btn {
  padding: 7px 11px;
  font-size: 1.2rem;
  font-family:'Noto Sans', "Doulos SIL", "Charis SIL", "Noto Sans", sans-serif;
  color: #fff;
  background: transparent;
  border: 2px solid #888;
  border-bottom-width: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.1s;
  position: relative; /* for wave overlay */
  overflow: hidden;   /* clip wave inside button */
}

.ipa-btn:hover {
  border-color: #ececec;
  transform: scale(1.05);
}

.ipa-btn.selected {
  border-color: #00c853;
}

.ipa-btn:active {
  transform: translate(1px);
  border-bottom-width: 2px;
}

/* dauerhaft ausgewählt */
input[type="radio"]:checked + .ipa-btn {
  border-color: #00c853;
}

/* IPA button attract wave (left-to-right sweep) — gated behind .ipa-wave-enabled */
@media (prefers-reduced-motion: no-preference) {
  .ipa-wave-enabled .ipa-keyboard { --wave-delay-step: 0.12s; }

  .ipa-wave-enabled .ipa-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.54) 50%, rgba(255,255,255,0.00) 100%);
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
    animation-name: ipa-wave;
    animation-duration: 1.2s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-delay: calc(var(--wave-index, 0) * var(--wave-delay-step, 0.12s));
  }

  /* Pause/hide wave when user hovers */
  .ipa-wave-enabled .ipa-keyboard:hover .ipa-btn::before,
  .ipa-wave-enabled .ipa-btn:hover::before,
  .ipa-wave-enabled .ipa-btn.selected::before,
  .ipa-wave-enabled input[type="radio"]:checked + .ipa-btn::before {
    animation-play-state: paused;
    opacity: 0;
  }

  @keyframes ipa-wave {
    0%   { transform: scaleX(0); opacity: 0; }
    15%  { transform: scaleX(0.1); opacity: .30; }
    45%  { transform: scaleX(1);   opacity: .60; }
    70%  { transform: scaleX(1);   opacity: .15; }
    100% { transform: scaleX(1);   opacity: 0; }
  }
}

/* Fake hover class to mimic :hover visuals when user not hovering */
.ipa-btn.fake-hover {
  border-color: #ececec;
  transform: scale(1.05);
}

/* Ensure selected/checked state wins over fake hover */
input[type="radio"]:checked + .ipa-btn.fake-hover,
.ipa-btn.selected.fake-hover {
  border-color: #00c853;
}

#fx-overlay {
  position: fixed;
  inset: 0;              /* volle Fläche */
  pointer-events: none;  /* blockiert keine Maus/Taps */
  z-index: 9999;         /* ganz oben */
}

.fx-ghost {
  box-shadow: 0 0 8px rgba(0,0,0,.25);
  transition: opacity .15s linear;
}

/* kurzes Aufleuchten des Klons beim „Einschlag“ */
@media (prefers-reduced-motion: no-preference) {
  .qa-hit-glow {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.6);
    transition: box-shadow 150ms ease;
  }
}

.feedback {
  text-align:left;
}

.qa-answer textarea,
.qa-answer input{
  flex:1;
  display:block;
  background:transparent;
  border:none; outline:none;
  color:#e5e7eb;
  font-size:.95rem;
  line-height:1.4;
  resize:none;
  padding-top:2px;
  margin:0;
  overflow-y:auto;
  min-width: 0;
}

.qa-answer textarea::placeholder,
.qa-answer input::placeholder{ color:#94a3b8; }

.qa-answer.is-hidden {
  display: none !important;
}

.qa-submit {
  background-color: transparent;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: fill .25s, stroke .25s, transform .2s;
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  height: 40px !important;                   /* überschreibt dein bisheriges height:100% */
  width: 40px !important;
  position: relative; z-index: 9999;
}

.qa-submit svg {
  height: 18px;
  transition: all 0.3s;
}

.qa-submit svg path {
  transition: all 0.3s;
}

.qa-submit:hover svg path {
  fill: var(--brand-green6);
  stroke: white;
}

.qa-feedback-wrap {
  z-index: 40;
}

/* Feedback */
.qa-feedback{
  padding: 0 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  text-align: left;
  line-height:1.5;
  color: #ccc;
  margin-top: 5px;
  margin-bottom: 0.5rem;
  flex: 1 1 auto;
  width: auto;
}

.qa-feedback-text{
  min-height: 1em;
}

.score-row {
  display: flex;
  align-items: center;
  gap: 10px; /* Abstand zwischen Balken und Button */
  margin-top: 40px;
}

/* Phonetik-Score visuell deaktivieren, wenn anderes Fach aktiv ist */
.score-row.inactive {
  opacity: .35;
  filter: grayscale(85%);
}
.score-row.inactive .faq-button { pointer-events: none; }
.score-row.inactive .phonetik-score .data { color: #808792; }
.score-row.inactive .range .fill { background: #475569; }

.score-row .range {
  flex: 1;   /* nimmt den restlichen Platz */
}

.range {
  width: 100%;
  height: 10px;
  background: #2a3342;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 20px;   /* Abstand nach oben */
  margin-bottom: 20px;/* Abstand nach unten */
}

.range .fill {
  height: 100%;
  width: 0;               /* JS setzt hier Prozentbreite */
  background: #97EBC5;    /* Füllfarbe passend zu deinem Stil */
  transition: width 200ms linear;
}

.faq-button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background-color: #ffe53b;
  background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);
  position: relative;
}
.faq-button svg {
  height: 1.5em;
  fill: white;
}
.faq-button:hover svg {
  animation: jello-vertical 0.7s both;
}
@keyframes jello-vertical {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.tooltip {
  position: absolute;
  bottom: 140%;
  opacity: 0;
  background: linear-gradient(147deg, var(--brand-green5), var(--brand-green6));
  color: white;
  padding: 5px 5px 0 5px;
  border-radius: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  letter-spacing: 0.5px;
  min-width: 350px;
  white-space: normal;
  line-height: 1.4;
  transition: opacity 0.3s, bottom 0.3s;
  z-index: 1000;
  right: 0;
}

/*
.tooltip::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
  left: 50%;
  top: 100%;
  transform: translateX(-50%) rotate(45deg);
  transition-duration: 0.3s;
}
*/

.faq-button:hover .tooltip {
  bottom: 160%;             /* nach oben animieren */
  opacity: 1;
  z-index: 1000;
  transition-duration: 0.3s;
}

.tooltip img {
  width: 120px;
  opacity: 1;
  float: right;
}

/* QA report button (flag + REPORT) */
.qa-report{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 0px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #cfcfcf;
  cursor: pointer;
  line-height: 1;
  margin-left: auto; /* push to the far right inside feedback */
}
.qa-report:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
}
.qa-report:active{
  transform: translateY(1px);
}
.qa-report-icon svg{
  width: 18px;
  height: 18px;
  display: block;
}
.qa-report-text{
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* === Report Modal Overlay === */
.report-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.report-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.report-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.report-dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 92vw);
  background: #0f1722;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  padding: 18px 18px 16px;
}
.report-title{
  margin: 0 32px 10px 0;
  color: #e5e7eb;
  font-size: 1.05rem;
}
.report-close{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #cfcfcf;
  cursor: pointer;
}
.report-dialog form{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-dialog textarea{
  min-height: 120px;
  resize: vertical;
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
}
.report-submit{
  align-self: flex-end;
  padding: 8px 14px;
  border-radius: 10px;
  background: #1e293b;
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
}
.report-submit:hover{
  background: #243244;
}

/* === Seitenlayout: Exakte 2 Spalten === */
:root{ --content-max: 960px; }

/* Container bildet IMMER das Raster; auf schmalen Screens 1 Spalte */
.page-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 100%;
}

/* Hauptspalte bleibt zentriert mit fester Maxbreite */
.page-grid > .main-content{ max-width: var(--content-max); margin: 0 auto; }

/* Ab mittlerer Breite: echte 2 Spalten */
@media (min-width: 1280px){
  .page-grid{
    grid-template-columns: minmax(0, var(--content-max)) 360px;
    justify-content: center; /* zentriert das gesamte Raster */
  }
  .page-grid > .main-content{ margin: 0; grid-column: 1; grid-row: 1; }
}

/* Rechte Spalte im Raster, sticky scrollend */
.right-rail{ display:none; }
@media (min-width: 1280px){
  .right-rail{ display:block; position: sticky; top: 96px; align-self: start; grid-column: 2; grid-row: 1; }
}

/* Karten-Stil in der rechten Spalte */
.rail-card{ background:#0f1722; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px; margin: 10px; margin-top: 367px; }
.card-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.card-title-row h2{ font-size:1rem; color:#e5e7eb; margin:0; letter-spacing:.02em; }

/* Profilkarte */
.profile-header{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.avatar{ width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#1e293b; font-size:20px; }
.user-meta .username{ margin:0; font-weight:700; }
.user-meta .level{ margin:0; color:#a3b1c6; font-size:.9rem; }
.stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0; }
.stat{ display:flex; align-items:center; gap:8px; background:#121a27; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:8px; }
.stat-icon{ width:24px; text-align:center; }
.stat-copy{ line-height:1.1; }
.stat-copy .num{ margin:0; font-weight:700; }
.stat-copy .text{ margin:0; color:#94a3b8; font-size:.8rem; }
.rail-btn{ width:100%; margin-top:6px; padding:10px 12px; border-radius:10px; background:#1e293b; color:#e5e7eb; border:1px solid rgba(255,255,255,.12); cursor:pointer; }
.rail-btn:hover{ background:#243244; }

/* Events */
.events-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.event-item{ display:flex; gap:10px; align-items:center; background:#121a27; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:10px; }
.event-date{ width:52px; flex:0 0 52px; border-radius:8px; background: var(--bg, #334155); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#0f1722; font-weight:800; }
.event-date .month{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.event-date .day{ font-size:1.1rem; }
.event-copy .title{ margin:0; font-weight:700; }
.event-copy .date{ margin:0; color:#a3b1c6; font-size:.85rem; }

/* Club */
.club-card .club-title{ margin:6px 0 4px; font-weight:700; }
.club-card .club-desc{ margin:0 0 8px; color:#a3b1c6; font-size:.95rem; }

.BugButton {
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.BugButton svg {
  width: 44%;
}
.BugButton:hover {
  background-color: rgb(61, 41, 71);
  overflow: visible;
}
.bugsvg path {
  transition: all 0.2s;
}
.BugButton:hover .bugsvg path {
  stroke: #fff;
}
.BugButton:active {
  transform: scale(0.98);
}
.BugButton:hover {
  opacity: 1;
}

.report-form {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #ccc;
  background: #fafafa;
}
.hidden {
  display: none;
}

/* === Template-Highlights (z. B. {wort}, {satz}) === */
.tpl-hl{
  display: inline-block;
  padding: 0.05em 0.35em;
  border-radius: 8px;
  background: var(--brand-green7);
  opacity: 0.6;
  color: #fff; /* Kontrast auf dunklem Hintergrund */
  font-style: italic; /* Schrift kursiv */
}
/* AGB page */
.agb-container{ max-width:880px; margin:80px auto 40px; padding:24px; background:#0f1722; color:#e6eef7; line-height:1.55; text-align: left;}
.agb-container h1{ font-size:2rem; margin:0 0 8px; }
.agb-container time{ color:#9fb1c9; font-size:.9rem; }
.agb-container h2{ font-size:1.15rem; margin:22px 0 8px; }
.agb-container p{ margin:0 0 10px; }
.agb-container ul{ margin:0 0 10px 1.2rem; }
.agb-container li{ margin:2px 0; }
.agb-container .back{ display:inline-block; margin-top:24px; font-size:.95rem; color:#cfd6e4; text-decoration:none; }
.agb-container .back:hover{ text-decoration:underline; }

/* Right sidebar footer link */
.dq-card--legal{ padding-bottom:8px; border:none; }
.dq-footer-links{ display:flex; margin-top:8px; font-size:12px; opacity:.8; }
.dq-footer-links a{ color:#cfd6e4; text-decoration:none; font-size: 13px; font-weight: 700; transition: color .15s ease; padding-left: 10px;}
.dq-footer-links a:hover{ color: var(--brand-green3); text-decoration:none; }



.dq-footer-links{ display:flex; gap:12px; font-size:12px; opacity:.8; padding:0 16px; }

.dq-card {
    border: 0.5px solid var(--lt-color-gray-700);
    border-radius: 10px;
    padding: 10px;
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.link {
  color: var(--brand-green4);
  text-decoration: none;
}

/* === Promo Modal (every 10th Gemini call) === */
.promo-modal{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9999; }
.promo-modal[aria-hidden="false"]{ display: flex; }
.promo-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.promo-dialog{ position: relative; z-index: 1; }
.promo-close{ position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; border: none; background: #ffffff; color: #000; cursor: pointer; font-size: 18px; line-height: 28px; text-align: center; }
/* Arrange text and image side-by-side inside the card */
img.promo-image{ width:120px; height:auto; margin:0; }

/* Download card */
.card {
  max-width: 350px;
  background-color: rgb(7 16 45);
  background: linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));
  background: -webkit-linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  border: 1px solid rgb(84 90 106);
}

/* Place text elements in left column */
/* layout hint from previous grid removed */

/* Place image in right column and align to bottom for a nice overlap feel */
/* image will float inside .desc; no grid placement */

/* Ensure description behaves as a block for consistent wrapping */
.desc { display: block; }
/* Let the text in .desc flow around the image */
.desc .promo-image {
  float: right;
  width: 120px;
  height: auto;
  margin: 0 0 0px 12px;
  border-radius: 12px;
  shape-outside: inset(0 round 12px);
}

.small-text, .title,.desc {
  font-weight: 600;
}

.title,.desc {
  margin: 18px 8px 0 13px;
  text-align: left;
}

.small-text {
  color: #488aec;
  font-size: 14px;
}

.title {
  color: #fff;
  font-size: 26px;
  line-height: 26px;
}

.desc {
  color: rgb(151 153 167);
  font-size: 13px;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  padding: 6px;
  text-decoration: none;
}

.button:first-child {
  box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;
  background-color: #488aec;
}

.button:last-child {
  box-shadow: 0 4px 6px -1px #0b162531, 0 2px 4px -1px #0e192b17;
  background-color: #fff;
}

.icon {
  height: 25px;
  width: 25px;
}

.icon svg {
  width: 100%;
  height: 100%;
}

.icon svg:last-child {
  fill: #000
}

.button-text {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

.button-text span:first-child {
  font-size: 12px;
  font-weight: 600;
}

.google span:first-child {
  color: rgb(219 206 253);
}

.apple span:first-child {
  color: rgb(81 87 108);
}

.google span:last-child {
  color: #fff;
  font-weight: 800;
}

.apple span:last-child {
  color: #000;
  font-weight: 800;
}

.limit-icon {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  margin-right: 6px;
}

/* Lückentext: Input im Fließtext, nicht blockig */
.qa-satz {
  display: flex;
  width: auto;
  min-width: 8ch;   /* kleine Grundbreite */
  margin: 10px 9px 0 1.2rem;;
  align-items: baseline;
  line-height: 3;
}

.qa-satz { white-space: normal; }
.qa-gap-anchor {
  display: inline-block;
  vertical-align: baseline;
  min-width: 8ch;   /* Lückenbreite */
  height: 1.2em;    /* Zielhöhe */
  visibility: hidden; /* unsichtbar, behält Platz */
}

/* Abstand um den eingesetzten Stempel im Lückensatz */
.qa-satz .qa-stamp {
  margin-inline: 0.6ch;   /* links/rechts Abstand im Textfluss */
  vertical-align: baseline;
}

/* === QA gap anchor overlay helpers (override) === */
.qa-gap-anchor { position: relative; overflow: visible; }
.qa-gap-anchor > .qa-stamp {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 1;
}

/* Sichtbarkeit des Anchors über Opazität steuern (verhindert Layout-Shift) */
.qa-gap-anchor { visibility: visible !important; opacity: 0; transition: opacity 120ms ease; }
.qa-gap-anchor.has-stamp { opacity: 1; }
/* Bilder ohne Inline-Styles */
.affiliate-img{ max-width:220px; height:auto; display:block; }

.qa-card.qa-mini .affiliate-link {
  display: inline-block;
  margin-left: auto;
  margin-right: 8px;
  text-align: right;
}

.qa-card.qa-mini .affiliate-image {
  max-width: 160px;
  height: auto;
  display: inline-block;
  max-height: 6rem; /* passt in 8rem Karte */
  object-fit: contain;
}

.qa-card.qa-mini .affiliate-note {
  display: block;
  margin-top: 4px;
  opacity: 0.8;
  font-size: 0.8rem;
  text-align: center;
}

/* Layout: Text links, Bild rechts */
.qa-card.qa-mini .qa-question{
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 6px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.qa-card.qa-mini .affiliate-row{
  display: flex;
  align-items: center;
}
.qa-card.qa-mini .affiliate-note{
  grid-column: 1 / -1;             /* unter Text + Bild über volle Breite */
  text-align: left;
  margin-right: 8px;
}

/* im Grid: Bild rechtsbündig platzieren */
.qa-card.qa-mini .affiliate-link{ justify-self: auto; margin-left: auto; }

.grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* zwei Spalten */
  grid-template-rows: auto auto;  /* zwei Zeilen */
  gap: 1rem;
}

.left-top {
  grid-column: 1;
  grid-row: 1;
}

.left-bottom {
  grid-column: 1;
  grid-row: 2;
}

.right {
  grid-column: 2;
  grid-row: 1 / span 2; /* über beide Zeilen rechts */
}

.buch {
  max-width: 110px;
  border-radius: 10px;
}

.dq-item p {
  text-align: left;
  font-size: 0.8rem;
}

.qa-bottom-cards .qa-card.qa-mini:first-of-type {
  opacity: 50%;
}

.qa-bottom-cards .qa-card.qa-mini:nth-of-type(3) {
  opacity: 100%;
}

img.popup-image {
  max-width: 80px;
}

.login-popup {
  display: flex;
  position:absolute;
  top: -101px;
  left: auto;
  opacity: 0;
  transform: translateY(16px);
  gap: 12px;
}

/* Zielzustand: an Ort + sichtbar */
.login-popup.is-visible {
  transform: translateY(0);
  animation: popupFade 12s ease forwards;
  pointer-events: none;
}

/* Keyframes: 0–20% einblenden, 80–100% wieder ausblenden */
@keyframes popupFade {
  0%   { opacity: 0; transform: translateY(20px); }
  5%  { opacity: 1; transform: translateY(0); }
  95%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  .login-popup { transition: none; }
}

/* Container vorbereiten */
section#qa {
  position: relative; /* Bezugspunkt fürs Popup */
}

/* Sprechblase */
.bubble{
  position:relative;
  max-width:150px;
  padding:5px;
  border-radius:12px;
  background: #1f2937;
  color: var(--lt-color-gray-500);
  line-height:1.25;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  bottom: 30px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

/* Spitze nach rechts (zeigt auf die Figur) */
.bubble::after{
  content:"";
  position:absolute;
  top:50%;
  right:-10px;
  transform:translateY(-50%);
  width:0; height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:10px solid rgba(255,255,255,0.08);
}
.btn-skip[disabled]:hover .tooltip {
  bottom: 160%;
  opacity: 1;
  z-index: 1000;
  transition-duration: 0.3s;
}

.skip-wrap {
  position: relative;
  display: inline-block;
}

/* 1) Wenn NUR der Button gehovered wird (und disabled ist) */
.btn-skip[disabled]:hover + .tooltip {
  opacity: 1;
  padding: 10px;
  left: -15%;
}

.qa-card.qa-mini .login-figure{
  position: absolute;
  top: 14px;
  right: 4px;
  width: 72px;
  height: auto;
}

.hidden-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);     /* <-- das ist der Blur */
  -webkit-backdrop-filter: blur(6px); /* für Safari */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.hidden-overlay.active {
  display: flex;
}

.form-container {
  width: 320px;
  border-radius: 0.75rem;
  background-color: rgba(17, 24, 39, 1);
  padding: 2rem;
  color: rgba(243, 244, 246, 1);
}

.form-container .input-group input {
  box-sizing: border-box;
  width: 100%;
  padding-left: 8px;   /* kleiner als 1rem */
  padding-right: 8px;
  text-indent: 0;      /* falls irgendwo gesetzt war */
}

.title {
  text-align: center;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

.form {
  margin-top: 1.5rem;
}

.input-group {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.input-group label {
  display: block;
  color: rgba(156, 163, 175, 1);
  margin-bottom: 4px;
}

.input-group input {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid rgba(55, 65, 81, 1);
  outline: 0;
  background-color: rgba(17, 24, 39, 1);
  padding: 0.75rem 1rem;
  color: rgba(243, 244, 246, 1);
}

.input-group input:focus {
  border-color: rgba(167, 139, 250);
}

.forgot {
  display: flex;
  justify-content: flex-end;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(156, 163, 175,1);
  margin: 8px 0 14px 0;
}

.forgot a,.signup a {
  color: rgba(243, 244, 246, 1);
  text-decoration: none;
  font-size: 14px;
}

.forgot a:hover, .signup a:hover {
  text-decoration: underline rgba(167, 139, 250, 1);
}

.sign {
  display: block;
  width: 100%;
  background-color: rgba(167, 139, 250, 1);
  padding: 0.75rem;
  text-align: center;
  color: rgba(17, 24, 39, 1);
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  margin-top: 20px;
}

.social-message {
  display: flex;
  align-items: center;
  padding-top: 1rem;
}

.line {
  height: 1px;
  flex: 1 1 0%;
  background-color: rgba(55, 65, 81, 1);
}

.social-message .message {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(156, 163, 175, 1);
}

.social-icons {
  display: flex;
  justify-content: center;
}

.social-icons .icon {
  border-radius: 0.125rem;
  padding: 0.75rem;
  border: none;
  background-color: transparent;
  margin-left: 8px;
}

.social-icons .icon svg {
  height: 1.25rem;
  width: 1.25rem;
  fill: #fff;
}

.signup {
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(156, 163, 175, 1);
}