:root{
  --hpgf-ink: #05070b;
  --hpgf-ink2:#070a10;
  --hpgf-teal: rgba(0,153,142,1);
  --hpgf-teal-soft: rgba(0,181,165,.72);
  /* darker, mysterious blue-green (emerald) used for animated text */
  --hpgf-emerald: rgba(0,122,112,1);
  /* mysterious "ember-plum" (emerald → black → lilac-red glow) */
  --hpgf-emberplum: rgba(173,22,96,1);
  --hpgf-violet: rgba(48,4,56,1);
  --hpgf-violet-soft: rgba(142,83,189,.55);
  --hpgf-white: rgba(255,255,255,.96);
  --hpgf-muted: rgba(255,255,255,.74);
  --hpgf-border: rgba(255,255,255,.14);
  --hpgf-border-2: rgba(255,255,255,.10);
  --hpgf-shadow: 0 22px 70px rgba(0,0,0,.38);
  --hpgf-radius-xl: 30px;
  --hpgf-radius-lg: 22px;
  --hpgf-radius-md: 16px;
}

/* ------------------------------------------------------------
   Lernplattform ("Wow" Glass)
   ------------------------------------------------------------ */

.hpgf-lp-wrap{
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: 100vh;
  max-width: 1120px;
  margin: 22px auto 44px;
  padding: 0 14px 42px;
  color: var(--hpgf-white);
}

/* Mobile safe top offset (prevents fixed headers from overlapping content) */
@media (max-width: 900px){
  .hpgf-lp-wrap{ margin-top: calc(22px + 88px); }
}

/* Ambient background (works even on bright page backgrounds) */
.hpgf-lp-wrap:before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: -2;
  background:
    radial-gradient(800px 520px at 18% 10%, rgba(0,181,165,.22), transparent 60%),
    radial-gradient(760px 520px at 85% 18%, rgba(142,83,189,.22), transparent 62%),
    radial-gradient(860px 520px at 55% 88%, rgba(0,153,142,.12), transparent 64%),
    linear-gradient(180deg, rgba(7,10,16,.72), rgba(7,10,16,.34));
}

/* Subtle film/noise overlay (no external assets) */
.hpgf-lp-wrap:after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: -1;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.hpgf-lp-hero{
  position: relative;
  border-radius: var(--hpgf-radius-xl);
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    radial-gradient(1200px 420px at 18% 0%, rgba(0,181,165,.22), transparent 58%),
    radial-gradient(900px 420px at 82% 0%, rgba(142,83,189,.20), transparent 60%),
    radial-gradient(1000px 560px at 50% 115%, rgba(0,0,0,.40), rgba(0,0,0,.18));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--hpgf-shadow);
  overflow: hidden;
}

/* Large logo watermark inside the hero (subtle) */
.hpgf-lp-watermark{
  position:absolute;
  right: -60px;
  top: -70px;
  width: 320px;
  height: 320px;
  opacity: .10;
  filter: blur(.2px) drop-shadow(0 10px 30px rgba(0,0,0,.28));
  transform: rotate(12deg);
  pointer-events:none;
}
.hpgf-lp-watermark img{width:100%;height:100%;object-fit:contain}

/* Mirror sheen */
.hpgf-lp-hero:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,.06) 12%,
      rgba(255,255,255,.14) 18%,
      rgba(255,255,255,.06) 24%,
      transparent 42%);
  transform: translateX(-35%);
  animation: hpgfSheen 7.5s ease-in-out infinite;
}

@keyframes hpgfSheen{
  0%, 16% { transform: translateX(-45%); opacity: .0; }
  26% { opacity: .95; }
  48% { transform: translateX(35%); opacity: .25; }
  100% { transform: translateX(35%); opacity: 0; }
}

/* Inner spacing */
.hpgf-lp-hero-inner{
  position: relative;
  padding: 22px 22px 18px;
}

.hpgf-lp-brand{
  display:flex;
  align-items:center;
  gap: 12px;
}

.hpgf-lp-logo{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(0,181,165,.12) inset;
  padding: 8px;
  object-fit: contain;
}

.hpgf-lp-brandtext{min-width:0}

.hpgf-lp-brandname{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  line-height: 1.2;
}

.hpgf-lp-brandsub{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,181,165,.95);
  letter-spacing: .06em;
}

.hpgf-lp-title{
  margin-top: 16px;
  font-size: 40px;
  font-weight: 950;
  letter-spacing: .01em;
  line-height: 1.06;
  text-shadow: 0 2px 22px rgba(0,0,0,.40);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(0,181,165,.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hpgf-lp-sub{
  margin-top: 10px;
  font-size: 14px;
  color: var(--hpgf-muted);
  line-height: 1.55;
}

.hpgf-lp-sub-strong{
  color: rgba(255,255,255,.92);
  font-weight: 900;
}

.hpgf-lp-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hpgf-lp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 18px;
  font-weight: 950;
  letter-spacing: .2px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.hpgf-lp-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  box-shadow: 0 22px 54px rgba(0,0,0,.28);
}

.hpgf-lp-btn--primary{
  color: #001b18;
  border-color: rgba(0,181,165,.88);
  background: linear-gradient(135deg, rgba(0,181,165,.95), rgba(0,153,142,.74));
  box-shadow: 0 0 30px rgba(0,181,165,.20), 0 24px 60px rgba(0,0,0,.22);
}

.hpgf-lp-btn--primary:hover{
  box-shadow: 0 0 36px rgba(0,181,165,.24), 0 28px 70px rgba(0,0,0,.28);
}

.hpgf-lp-hint{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--hpgf-radius-md);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.5;
}

.hpgf-lp-content{ margin-top: 16px; }

/* ------------------------------------------------------------
   Lernplattform: Module/Widgets (z.B. Fortschritt)
   ------------------------------------------------------------ */

.hpgf-lp-modules{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin: 18px 0 18px;
}

.hpgf-modcard{
  position: relative;
  border-radius: var(--hpgf-radius-xl);
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    radial-gradient(900px 420px at 18% 0%, rgba(0,181,165,.18), transparent 62%),
    radial-gradient(900px 420px at 82% 0%, rgba(142,83,189,.14), transparent 64%),
    rgba(0,0,0,.10);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  box-shadow: 0 18px 56px rgba(0,0,0,.30);
  overflow: hidden;
  padding: 16px 16px 18px;
}

.hpgf-modcard:before{
  content:"";
  position:absolute;
  inset: -2px;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,.05) 14%,
      rgba(255,255,255,.16) 20%,
      rgba(255,255,255,.05) 26%,
      transparent 44%);
  transform: translateX(-40%);
  opacity: .9;
  animation: hpgfModSheen 8.5s ease-in-out infinite;
}

@keyframes hpgfModSheen{
  0%, 20% { transform: translateX(-48%); opacity: 0; }
  30% { opacity: .95; }
  52% { transform: translateX(38%); opacity: .22; }
  100% { transform: translateX(38%); opacity: 0; }
}

.hpgf-modcard:after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: calc(var(--hpgf-radius-xl) - 10px);
  border: 1px solid rgba(255,255,255,.10);
  pointer-events:none;
  opacity: .65;
}

.hpgf-modcard-top{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.hpgf-modcard-title{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 22px rgba(0,0,0,.40);
}

.hpgf-modcard-badge{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(0,181,165,.96);
  border: 1px solid rgba(0,181,165,.55);
  background: rgba(0,0,0,.18);
  box-shadow: 0 0 18px rgba(0,181,165,.12), 0 10px 30px rgba(0,0,0,.20);
  white-space: nowrap;
}

.hpgf-modcard-body{
  position: relative;
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Donut / "Torten"-Diagramm */
.hpgf-donut{
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 999px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(120px 120px at 30% 25%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(160px 160px at 70% 80%, rgba(0,181,165,.10), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.14));
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  overflow:hidden;
}

.hpgf-donut:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(120px 120px at 22% 18%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.10) 16%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.08) 28%, transparent 46%);
  transform: translateX(-28%);
  animation: hpgfDonutSheen 10s ease-in-out infinite;
  opacity: .9;
}

@keyframes hpgfDonutSheen{
  0%, 18% { transform: translateX(-35%); opacity: 0; }
  28% { opacity: 1; }
  56% { transform: translateX(35%); opacity: .18; }
  100% { transform: translateX(35%); opacity: 0; }
}

.hpgf-donut-svg{
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
}

.hpgf-donut-track{
  fill: none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 12;
}

.hpgf-donut-progress{
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  filter: drop-shadow(0 0 14px rgba(0,153,142,.22));
  transition: stroke-dashoffset .9s ease;
}

.hpgf-donut-center{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hpgf-donut-pct{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.94);
  text-shadow: 0 2px 26px rgba(0,0,0,.45);
}

.hpgf-donut-sub{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.74);
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}

.hpgf-modcard-meta{
  flex: 1;
  min-width: 240px;
}

.hpgf-modrow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  color: rgba(255,255,255,.80);
}

.hpgf-modrow strong{
  font-weight: 950;
  color: rgba(255,255,255,.94);
}

.hpgf-modnote{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.74);
  line-height: 1.45;
  text-shadow: 0 1px 18px rgba(0,0,0,.32);
}

.hpgf-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 28px;
  height: 20px;
  border-radius: 999px;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.84);
  font-weight: 950;
  font-size: 12px;
}

.hpgf-pill--ok{
  border-color: rgba(0,181,165,.55);
  background: rgba(0,181,165,.12);
  color: rgba(0,181,165,.96);
  box-shadow: 0 0 18px rgba(0,181,165,.16);
}

@media (max-width: 480px){
  .hpgf-donut{ width: 154px; height: 154px; }
  .hpgf-modcard-meta{ min-width: 100%; }
}

/* --- Folder tree "upgrade" only inside Lernplattform --- */
.hpgf-lp-content .hpgf-folders{
  margin-top: 0;
  border-radius: var(--hpgf-radius-xl);
  border-color: rgba(255,255,255,.16);
  background:
    /* darker base to keep text readable even on bright/white page backgrounds */
    linear-gradient(135deg, rgba(7,10,16,.66), rgba(7,10,16,.30)),
    radial-gradient(900px 420px at 18% 0%, rgba(142,83,189,.18), transparent 62%),
    radial-gradient(900px 420px at 82% 0%, rgba(0,181,165,.18), transparent 62%),
    rgba(0,0,0,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  overflow: hidden;
}

.hpgf-lp-content .hpgf-folders-head{
  font-size: 20px;
  letter-spacing: .2px;
}

.hpgf-lp-content .hpgf-folders-sub{
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}

.hpgf-lp-content .hpgf-folder{
  position: relative;
  border-radius: 20px;
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  overflow: hidden;
}

.hpgf-lp-content .hpgf-folder:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 22% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(520px 220px at 82% 0%, rgba(0,181,165,.10), transparent 60%);
  opacity: .9;
}

.hpgf-lp-content .hpgf-folder-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  position: relative;
  padding: 4px 0;
  flex-wrap:nowrap;
}
.hpgf-lp-content .hpgf-folder-summary::-webkit-details-marker{display:none}
.hpgf-lp-content .hpgf-folder-icon{opacity:.92;flex:0 0 auto}
.hpgf-lp-content .hpgf-folder-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hpgf-lp-content .hpgf-folder-badge{
  font-size:10px;
  font-weight:950;
  letter-spacing:1px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.85);
  white-space:nowrap;
  flex:0 0 auto;
  max-width:52%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hpgf-lp-content .hpgf-folder-empty{
  margin:10px 0 2px 0;
  color: rgba(255,255,255,.70);
  font-size:13px;
}
.hpgf-lp-content .hpgf-folder-files{margin:10px 0 2px 0;padding:0;list-style:none}
.hpgf-lp-content .hpgf-folder-file{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.hpgf-lp-content .hpgf-folder-file:last-child{border-bottom:none}
.hpgf-lp-content .hpgf-folder-link{color:#00b5a5;text-decoration:none;font-weight:900;max-width:100%;word-break:break-word}
.hpgf-lp-content .hpgf-folder-link:hover{text-decoration:underline}
.hpgf-lp-content .hpgf-folder-meta{font-size:12px;color:rgba(255,255,255,.62)}

@media (max-width: 520px){
  .hpgf-lp-content .hpgf-folder-summary{ flex-wrap:wrap; align-items:flex-start; }
  .hpgf-lp-content .hpgf-folder-name{ flex:1 1 100%; white-space:normal; }
  .hpgf-lp-content .hpgf-folder-badge{ max-width:100%; }
}


.hpgf-lp-content details[open].hpgf-folder{
  border-color: rgba(0,181,165,.26);
  background: rgba(0,0,0,.12);
}

.hpgf-lp-content details[open].hpgf-folder .hpgf-folder-files{
  animation: hpgfOpen .22s ease-out;
}

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

.hpgf-lp-content .hpgf-folder-link{
  color: rgba(0,181,165,.98);
}

.hpgf-lp-content .hpgf-folder-link:hover{
  text-decoration: none;
  filter: brightness(1.08);
}

/* Mobile tuning */
@media (max-width: 640px){
  .hpgf-lp-hero-inner{ padding: 18px 14px 14px; }
  .hpgf-lp-title{ font-size: 30px; }
  .hpgf-lp-logo{ width: 40px; height: 40px; border-radius: 14px; padding: 7px; }
  .hpgf-lp-btn{ width: 100%; }
  .hpgf-lp-watermark{ width: 240px; height: 240px; right: -90px; top: -90px; opacity: .08; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hpgf-lp-hero:before{ animation: none; opacity: .35; }
}

/* Backwards-compat (very old markup from early dev versions):
   If something somewhere still uses the old wrapper, keep it readable. */
.hpgf-platform-wrap{max-width:1100px;margin:22px auto;padding:0 14px}
.hpgf-platform-card{padding:22px 18px;border-radius:24px;border:1px solid rgba(255,255,255,.14);background:rgba(7,10,16,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:rgba(255,255,255,.92)}

/* ------------------------------------------------------------
   Neon wave headline effect (emerald → black → plum → black → emerald)
   Applies to elements with .hpgf-neonwave[data-hpgf-wave]
   ------------------------------------------------------------ */

.hpgf-sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.hpgf-neonwave{
  --nw-teal: var(--hpgf-emerald);
  --nw-black: #fff;
  --nw-plum: var(--hpgf-emberplum);
  --nw-shadowA: rgba(0,122,112,.26);
  --nw-shadowB: rgba(173,22,96,.28);
  --nw-shadowK: rgba(0,0,0,.55);
  display: inline-block;
  position: relative;
  letter-spacing: .02em;
}

.hpgf-neonwave--md{ font-size: 18px; font-weight: 950; }
.hpgf-neonwave--lg{ font-size: 22px; font-weight: 950; }
.hpgf-neonwave--xl{ font-size: 40px; font-weight: 950; }

.hpgf-neonwave .hpgf-nw-visual{ display:inline; }
.hpgf-neonwave .hpgf-nw-char{
  display:inline-block;
  will-change: transform, filter, text-shadow, color;
  transform: translate3d(0,0,0);
  animation:
    hpgfNwColor 14s ease-in-out infinite,
    hpgfNwWave 2.4s ease-in-out infinite;
  animation-delay:
    0s,
    calc(var(--i) * 0.06s);
}

@keyframes hpgfNwColor{
  0%, 100%{
    color: var(--nw-teal);
    text-shadow:
      0 0 14px var(--nw-shadowA),
      0 2px 28px rgba(0,0,0,.42);
  }
  25%{
    color: var(--nw-black);
    text-shadow:
      0 0 16px var(--nw-shadowK),
      0 2px 28px rgba(0,0,0,.46);
  }
  50%{
    color: var(--nw-plum);
    text-shadow:
      0 0 14px var(--nw-shadowB),
      0 0 28px rgba(142,83,189,.16),
      0 2px 28px rgba(0,0,0,.42);
  }
  75%{
    color: var(--nw-black);
    text-shadow:
      0 0 16px var(--nw-shadowK),
      0 2px 28px rgba(0,0,0,.46);
  }
}

@keyframes hpgfNwWave{
  0%, 100%{ transform: translate3d(0,0,0); }
  35%{ transform: translate3d(0,-2px,0); }
  60%{ transform: translate3d(0,1px,0); }
}

/* Make wave feel like a "sweep" on larger titles */
.hpgf-neonwave--xl .hpgf-nw-char{ animation-duration: 14s, 2.8s; }
.hpgf-neonwave--lg .hpgf-nw-char{ animation-duration: 14s, 2.3s; }

/* Keep existing hero gradient titles readable if JS hasn't enhanced yet */
.hpgf-neonwave:not(.hpgf-neonwave--ready){
  color: rgba(255,255,255,.94);
  text-shadow: 0 2px 20px rgba(0,0,0,.40);
}

@media (max-width: 640px){
  .hpgf-neonwave--xl{ font-size: 30px; }
}

@media (prefers-reduced-motion: reduce){
  .hpgf-neonwave .hpgf-nw-char{ animation: none !important; color: rgba(255,255,255,.94); }
}

/* ------------------------------------------------------------
   Learning platform text readability (apply to "white" texts)
   Smoothly cycles: emerald → white → plum → white → emerald
   ------------------------------------------------------------ */

.hpgf-lp-wrap .hpgf-lp-brandname,
.hpgf-lp-wrap .hpgf-lp-sub,
.hpgf-lp-wrap .hpgf-lp-hint,
.hpgf-lp-wrap .hpgf-folders-sub,
.hpgf-lp-wrap .hpgf-folder-name,
.hpgf-lp-wrap .hpgf-folder-empty,
.hpgf-lp-wrap .hpgf-folder-meta,
.hpgf-lp-wrap .hpgf-folder-badge,
.hpgf-lp-wrap .hpgf-folder-summary,
.hpgf-lp-wrap .hpgf-folder-file
{
  --nw-teal: var(--hpgf-emerald);
  --nw-black: #fff;
  --nw-plum: var(--hpgf-emberplum);
  --nw-shadowA: rgba(0,122,112,.18);
  --nw-shadowB: rgba(173,22,96,.22);
  --nw-shadowK: rgba(0,0,0,.52);
  animation: hpgfNwColor 14s ease-in-out infinite;
}

/* Do not animate interactive download links (keep brand teal) */
.hpgf-lp-wrap .hpgf-folder-link,
.hpgf-lp-wrap .hpgf-lp-btn,
.hpgf-lp-wrap .hpgf-lp-btn *{
  animation: none !important;
}

@media (prefers-reduced-motion: reduce){
  .hpgf-lp-wrap .hpgf-lp-brandname,
  .hpgf-lp-wrap .hpgf-lp-sub,
  .hpgf-lp-wrap .hpgf-lp-hint,
  .hpgf-lp-wrap .hpgf-folders-sub,
  .hpgf-lp-wrap .hpgf-folder-name,
  .hpgf-lp-wrap .hpgf-folder-empty,
  .hpgf-lp-wrap .hpgf-folder-meta,
  .hpgf-lp-wrap .hpgf-folder-badge,
  .hpgf-lp-wrap .hpgf-folder-summary,
  .hpgf-lp-wrap .hpgf-folder-file{
    animation: none !important;
    color: rgba(255,255,255,.92);
    text-shadow: none !important;
  }
}


/* ------------------------------------------------------------
   Forum (Step 1: Core)
   ------------------------------------------------------------ */
.hpgf-forum{
  margin-top: 22px;
  border-radius: var(--hpgf-radius-xl);
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(7,10,16,.66), rgba(7,10,16,.30)),
    radial-gradient(900px 420px at 18% 0%, rgba(142,83,189,.18), transparent 62%),
    radial-gradient(900px 420px at 82% 0%, rgba(0,181,165,.18), transparent 62%),
    rgba(0,0,0,.10);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  padding: 18px 18px 16px;
}

.hpgf-forum-head{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .2px;
}

.hpgf-forum-sub{
  margin-top: 6px;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
  line-height: 1.6;
}

.hpgf-forum-notice{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.90);
  font-weight: 800;
}
.hpgf-forum-notice--ok{ border-color: rgba(0,181,165,.40); background: rgba(0,181,165,.10); color: rgba(0,181,165,.96); }
.hpgf-forum-notice--warn{ border-color: rgba(255,180,0,.40); background: rgba(255,180,0,.08); color: rgba(255,210,120,.98); }
.hpgf-forum-notice--err{ border-color: rgba(255,80,120,.38); background: rgba(255,80,120,.08); color: rgba(255,160,190,.98); }

.hpgf-forum-breadcrumb{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
  font-size: 13px;
  color: rgba(255,255,255,.80);
}
.hpgf-forum-breadcrumb a{
  color: rgba(0,181,165,.98);
  text-decoration:none;
  font-weight: 900;
}
.hpgf-forum-breadcrumb a:hover{ filter: brightness(1.06); }
.hpgf-forum-breadcrumb span{ opacity: .7; }
.hpgf-forum-bc-current{ color: rgba(255,255,255,.92); font-weight: 900; opacity: 1 !important; }

.hpgf-forum-modules{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 780px){
  .hpgf-forum-modules{ grid-template-columns: 1fr; }
}



/* Forum grouping (Prüfungsvorbereitung / Seminare) */
.hpgf-forum-tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  margin: 14px 0 8px;
}
.hpgf-forum-tab{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  text-decoration:none;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}
.hpgf-forum-tab:hover{ filter: brightness(1.06); transform: translateY(-1px); }

/* Forum accordion (mobile friendly, starts collapsed) */
.hpgf-forum-accordion{
  margin-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.hpgf-forum-acc{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
  overflow: hidden;
}
.hpgf-forum-acc-head{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px 12px;
  border: 0;
  text-align: left;
  cursor: pointer;
  background: rgba(255,255,255,.05);
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.hpgf-forum-acc-head:hover{
  background: rgba(255,255,255,.06);
}
.hpgf-forum-acc-left{
  min-width: 0;
  flex: 1;
}
.hpgf-forum-acc-title{
  font-weight: 950;
  color: rgba(255,255,255,.95);
  line-height: 1.25;
}
.hpgf-forum-acc-meta{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.76);
}
.hpgf-forum-acc-chevron{
  display:inline-flex;
  width: 38px;
  height: 38px;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.88);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  transform: rotate(0deg);
  transition: transform .16s ease, filter .16s ease;
  flex: 0 0 auto;
}
.hpgf-forum-acc.is-open .hpgf-forum-acc-chevron{
  transform: rotate(180deg);
  filter: brightness(1.05);
}
.hpgf-forum-acc-body{
  padding: 0 14px 14px;
}
.hpgf-forum-acc-head:focus-visible{
  outline: 2px solid rgba(0,181,165,.35);
  outline-offset: 3px;
}

.hpgf-forum-group{
  margin-top: 14px;
}
.hpgf-forum-group-title{
  margin: 6px 2px 10px;
}
.hpgf-forum-group-sub{
  margin: 0 2px 12px;
  color: rgba(255,255,255,.72);
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  font-size: 13px;
  line-height: 1.4;
}
.hpgf-forum-module,
.hpgf-forum-thread{
  display:block;
  text-decoration:none;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  padding: 14px 14px 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  /* Improve tap reliability on mobile Safari */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure taps always hit the anchor (animated inner spans can be finicky on iOS) */
.hpgf-forum-module *,
.hpgf-forum-thread *{
  pointer-events: none;
}
.hpgf-forum-module:hover,
.hpgf-forum-thread:hover{
  transform: translateY(-1px);
  border-color: rgba(0,181,165,.26);
  background: rgba(0,0,0,.14);
  box-shadow: 0 18px 46px rgba(0,0,0,.24);
}

.hpgf-forum-module-title,
.hpgf-forum-thread-title{
  font-weight: 950;
  color: rgba(255,255,255,.94);
  letter-spacing: .2px;
  line-height: 1.25;
}

.hpgf-forum-module-meta,
.hpgf-forum-thread-meta{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
}

.hpgf-forum-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  border-radius: 999px;
  padding: 0 9px;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.78);
}

.hpgf-forum-list{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.hpgf-forum-card{
  margin-top: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  padding: 14px 14px 12px;
}

.hpgf-forum-threadtitle{
  margin-top: 10px;
  font-size: 22px;
  font-weight: 950;
  color: rgba(255,255,255,.94);
  letter-spacing: .2px;
}

.hpgf-forum-form-title{
  font-weight: 950;
  color: rgba(255,255,255,.92);
  margin-bottom: 10px;
  letter-spacing: .2px;
}

.hpgf-forum-input,
.hpgf-forum-ta{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
  outline: none;
}
.hpgf-forum-input::placeholder,
.hpgf-forum-ta::placeholder{ color: rgba(255,255,255,.55); }
.hpgf-forum-input:focus,
.hpgf-forum-ta:focus{
  border-color: rgba(0,181,165,.34);
  box-shadow: 0 0 0 4px rgba(0,181,165,.10);
}

.hpgf-forum-ta{ margin-top: 10px; resize: vertical; min-height: 110px; }

.hpgf-forum-actions{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.hpgf-forum-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 18px;
  font-weight: 950;
  letter-spacing: .2px;
  border: 1px solid rgba(0,181,165,.34);
  background: rgba(0,181,165,.14);
  color: rgba(0,181,165,.98);
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease, background .14s ease;
}
.hpgf-forum-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); background: rgba(0,181,165,.18); }

.hpgf-forum-post{
  margin-top: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  padding: 12px 12px 10px;
}
.hpgf-forum-post-meta{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.74);
  margin-bottom: 8px;
}
.hpgf-forum-post-author{ font-weight: 950; color: rgba(255,255,255,.90); }
.hpgf-forum-post-date{ white-space: nowrap; opacity: .85; }

.hpgf-forum-post-body{
  color: rgba(255,255,255,.88);
  line-height: 1.65;
}
.hpgf-forum-post-body a{ color: rgba(0,181,165,.98); font-weight: 900; text-decoration:none; }
.hpgf-forum-post-body a:hover{ text-decoration: underline; }
.hpgf-forum-post-body code, .hpgf-forum-post-body pre{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 2px 6px;
}
.hpgf-forum-post-body pre{ padding: 10px; overflow:auto; }



.hpgf-forum-post-actions{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

.hpgf-forum-likeform{ margin:0; }

.hpgf-forum-likebtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-weight: 950;
  letter-spacing: .1px;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, background .14s ease;
}

.hpgf-forum-likebtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  border-color: rgba(0,181,165,.30);
  background: rgba(0,0,0,.18);
}

.hpgf-forum-likebtn.is-liked{
  border-color: rgba(0,181,165,.42);
  background: rgba(0,181,165,.12);
}

.hpgf-like-heart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.hpgf-like-count{
  min-width: 28px;
  text-align:center;
  padding: 0 9px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  font-size: 12px;
  letter-spacing: .08em;
}

.hpgf-forum-reportbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.86);
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .1px;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, background .14s ease;
}
.hpgf-forum-reportbtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  border-color: rgba(244,63,94,0.35);
  background: rgba(244,63,94,0.10);
}
.hpgf-forum-reportbtn:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 480px){
  .hpgf-forum{ padding: 16px 14px 14px; }
}


/* Forum attachments */
.hpgf-forum-attachments{
  margin-top: 12px;
}
.hpgf-forum-attach-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 520px){
  .hpgf-forum-attach-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hpgf-forum-attach-img{
  display:block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
}
.hpgf-forum-attach-img img{
  display:block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
.hpgf-forum-attach-files{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.hpgf-forum-filechip{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  text-decoration:none;
  color: inherit;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.hpgf-forum-filechip:hover{
  border-color: rgba(0,181,165,.45);
  transform: translateY(-1px);
}
.hpgf-forum-filechip-name{
  font-weight: 900;
  letter-spacing: .2px;
}
.hpgf-forum-filechip-size{
  opacity: .78;
  font-size: 12px;
  font-weight: 800;
}

/* Upload field */
.hpgf-forum-upload{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}
.hpgf-forum-upload-label{
  font-weight: 900;
  margin-bottom: 6px;
  opacity: .92;
}
.hpgf-forum-file{
  width: 100%;
  display:block;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: inherit;
}
.hpgf-forum-upload-hint{
  margin-top: 6px;
  font-size: 12px;
  opacity: .78;
  line-height: 1.4;
}

/* ------------------------------------------------------------
   Chat (Lernplattform)
   ------------------------------------------------------------ */

.hpgf-chat{
  margin-top: 22px;
  padding: 18px 18px 16px;
  border-radius: calc(var(--hpgf-radius-xl) + 6px);
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(7,10,16,.62), rgba(7,10,16,.22));
  box-shadow: var(--hpgf-shadow);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hpgf-chat:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(620px 420px at 18% 10%, rgba(0,181,165,.40), transparent 60%),
    radial-gradient(560px 380px at 88% 18%, rgba(142,83,189,.38), transparent 62%),
    radial-gradient(640px 420px at 46% 90%, rgba(173,22,96,.24), transparent 64%);
  opacity: .95;
  border-radius: inherit;
  pointer-events:none;
}

.hpgf-chat:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 36%, transparent 58%);
  transform: translateX(-70%);
  animation: hpgfChatShimmer 7.5s ease-in-out infinite;
  opacity: .55;
  pointer-events:none;
  mix-blend-mode: overlay;
}

@keyframes hpgfChatShimmer{
  0%{ transform: translateX(-70%); }
  50%{ transform: translateX(70%); }
  100%{ transform: translateX(-70%); }
}

@media (prefers-reduced-motion: reduce){
  .hpgf-chat:after{ animation:none; }
}

.hpgf-chat > *{ position:relative; z-index:1; }


.hpgf-chat-head{
  font-weight: 950;
  letter-spacing: .25px;
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.1;
  color: rgba(0,181,165,1);
}

@supports (-webkit-background-clip: text){
  .hpgf-chat-head{
    background: linear-gradient(90deg, rgba(0,181,165,1), rgba(142,83,189,1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.hpgf-chat-sub{
  color: rgba(255,255,255,.86);
  margin: 0 0 12px;
}

.hpgf-chat-card{
  padding: 14px 16px;
  border-radius: var(--hpgf-radius-lg);
  border: 1px solid var(--hpgf-border);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.hpgf-chat-consent-title{
  font-weight: 900;
  margin-bottom: 6px;
}

.hpgf-chat-consent-text{
  color: var(--hpgf-muted);
  margin-bottom: 10px;
}

.hpgf-chat-consent-check{
  display:block;
  margin: 10px 0 12px;
  color: rgba(255,255,255,.88);
}

.hpgf-chat-consent-check input{ margin-right:8px; }

.hpgf-chat-consent-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,181,165,.38);
  background: rgba(0,181,165,.18);
  color: rgba(255,255,255,.96);
  font-weight: 900;
  cursor: pointer;
}

.hpgf-chat-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
}

@media (max-width: 860px){
  .hpgf-chat-shell{ grid-template-columns: 1fr; }
}

.hpgf-chat-users{
  border-radius: var(--hpgf-radius-xl);
  border: 1px solid var(--hpgf-border-2);
  background: rgba(255,255,255,.05);
  overflow:hidden;
}

.hpgf-chat-users-head{
  padding: 12px 14px;
  font-weight: 900;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}

.hpgf-chat-users-list{
  padding: 10px;
  max-height: 420px;
  overflow:auto;
}

.hpgf-chat-users-group{
  margin: 10px 8px 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.55);
}

.hpgf-chat-user{
  width:100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  margin: 6px 0;
  text-align:left;
}

.hpgf-chat-user:hover{
  background: rgba(255,255,255,.08);
}

.hpgf-chat-user.is-active{
  border-color: rgba(0,181,165,.38);
  box-shadow: 0 10px 30px rgba(0,181,165,.12);
}

.hpgf-chat-user-badge{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .5px;
  background: linear-gradient(135deg, rgba(0,181,165,.26), rgba(142,83,189,.22));
  border: 1px solid rgba(255,255,255,.12);
}

.hpgf-chat-main{
  border-radius: var(--hpgf-radius-xl);
  border: 1px solid var(--hpgf-border-2);
  background: rgba(255,255,255,.05);
  overflow:hidden;
  display:flex;
  flex-direction: column;
  min-height: 420px;
}

.hpgf-chat-thread-head{
  padding: 12px 14px;
  font-weight: 900;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}

.hpgf-chat-messages{
  padding: 12px 12px;
  overflow:auto;
  flex: 1;
  scroll-behavior:smooth;
}

.hpgf-chat-msg{
  display:flex;
  margin: 8px 0;
}

.hpgf-chat-msg.is-me{ justify-content:flex-end; }
.hpgf-chat-msg.is-them{ justify-content:flex-start; }

.hpgf-chat-bubble{
  max-width: 78%;
  padding: 10px 12px 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  position:relative;
}

.hpgf-chat-msg.is-me .hpgf-chat-bubble{
  background: rgba(0,181,165,.16);
  border-color: rgba(0,181,165,.28);
}

.hpgf-chat-text{
  white-space: pre-wrap;
  line-height: 1.35;
}

.hpgf-chat-report{
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  background: transparent;
  border: 0;
  padding: 0;
  cursor:pointer;
  text-decoration: underline;
  opacity: .0;
  transition: opacity .15s ease;
}

.hpgf-chat-bubble:hover .hpgf-chat-report{ opacity: 1; }

.hpgf-chat-compose{
  padding: 12px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}

.hpgf-chat-input{
  width:100%;
  resize: vertical;
  min-height: 46px;
  max-height: 180px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.96);
  outline:none;
}

.hpgf-chat-compose-row{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.hpgf-chat-emailcheck{
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

.hpgf-chat-send{
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,181,165,.38);
  background: rgba(0,181,165,.18);
  color: rgba(255,255,255,.96);
  font-weight: 900;
  cursor:pointer;
}

.hpgf-chat-mini{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.hpgf-chat-loading{
  padding: 10px 8px;
  color: rgba(255,255,255,.60);
  font-size: 13px;
}

.hpgf-chat-toast{
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.96);
  font-weight: 800;
  display:none;
  backdrop-filter: blur(10px);
}

.hpgf-chat-toast.is-ok{ border-color: rgba(0,181,165,.42); }
.hpgf-chat-toast.is-err{ border-color: rgba(245,80,110,.42); }


/* Chat visibility + extra contrast (mobile-friendly) */
.hpgf-chat-card,
.hpgf-chat-users,
.hpgf-chat-main{
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(255,255,255,.18) !important;
}

.hpgf-chat-users-head,
.hpgf-chat-thread-head{
  background: linear-gradient(135deg, rgba(0,181,165,.22), rgba(142,83,189,.18)) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}

.hpgf-chat-user{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.hpgf-chat-user.is-active{
  background: rgba(0,181,165,.14) !important;
  border-color: rgba(0,181,165,.42) !important;
  box-shadow: 0 14px 44px rgba(0,181,165,.18), 0 10px 34px rgba(142,83,189,.10) !important;
}

.hpgf-chat-bubble{
  background: rgba(0,0,0,.30) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.hpgf-chat-msg.is-me .hpgf-chat-bubble{
  background: rgba(0,181,165,.22) !important;
  border-color: rgba(0,181,165,.38) !important;
}

.hpgf-chat-consent-btn,
.hpgf-chat-send{
  background: linear-gradient(135deg, rgba(0,181,165,.28), rgba(142,83,189,.18)) !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: 0 14px 40px rgba(0,181,165,.12) !important;
}

.hpgf-chat-consent-check,
.hpgf-chat-emailcheck,
.hpgf-chat-mini,
.hpgf-chat-consent-text{
  color: rgba(255,255,255,.90) !important;
}

.hpgf-chat-input{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  /* Safari/Divi can override textarea text color via -webkit-text-fill-color.
     Force readable white text while typing in the chat input. */
  color: rgba(255,255,255,.96) !important;
  -webkit-text-fill-color: rgba(255,255,255,.96) !important;
  caret-color: rgba(255,255,255,.96) !important;
}

.hpgf-chat-input::placeholder{
  color: rgba(255,255,255,.40) !important;
  -webkit-text-fill-color: rgba(255,255,255,.40) !important;
}

/* =========================
   Chat (UX): fixed pane height + internal scroll
   Prevents the chat module from growing infinitely with many messages.
   ========================= */
.hpgf-chat{ --hpgf-chat-height: clamp(420px, 62vh, 560px); }
@media (max-width: 860px){
  .hpgf-chat{ --hpgf-chat-height: clamp(420px, 70vh, 640px); }
}

.hpgf-chat-shell{ align-items: stretch; }

.hpgf-chat-users,
.hpgf-chat-main{
  height: var(--hpgf-chat-height);
  min-height: 0;
}

.hpgf-chat-users{
  display:flex;
  flex-direction: column;
  min-height: 0;
}

.hpgf-chat-users-list{
  flex: 1;
  min-height: 0;
  max-height: none; /* override earlier max-height */
  overflow: auto;
}

.hpgf-chat-main{
  min-height: 0; /* allow children to scroll instead of stretching */
}

.hpgf-chat-messages{
  min-height: 0;
  overflow: auto;
}

.hpgf-chat-compose{
  flex: 0 0 auto;
}


/* =========================
   LernBuddy (KI) – WOW Heartstück
   ========================= */
.hpgf-buddy{
  position: relative;
  /* Make the LernBuddy feel like an "app" (near fullscreen height). */
  --hpgf-buddy-height: clamp(560px, 82vh, 940px);
  /* Extra right padding reserved for the floating mascot (desktop). */
  --hpgf-buddy-avatar-pad: 0px;
  /* Safe gutters so the card never kisses or gets clipped by the viewport edge (desktop). */
  /* Visible desktop safe space to the viewport edges */
  --hpgf-buddy-gutter: 32px;
  /* JS may nudge the breakout a few pixels to compensate for theme/container offsets. */
  --hpgf-buddy-nudge-x: 0px;
  border-radius: 22px;
  padding: 18px;
  margin: 18px 0;
  background: linear-gradient(135deg, rgba(48,4,56,.55), rgba(0,153,142,.20));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  overflow: hidden;
}

@media (min-width: 981px){
  .hpgf-buddy{ --hpgf-buddy-avatar-pad: 220px; }
}
@media (max-width: 980px){
  .hpgf-buddy{ --hpgf-buddy-height: clamp(520px, 84vh, 900px); }
}

/* Break out of the 1120px container so the Buddy can span (almost) the full viewport width.
   Keeps tiny side gutters to avoid horizontal scrollbars. */
.hpgf-buddy[data-hpgf-buddy="1"]{
  /* Full-width breakout.
     IMPORTANT: 100vw includes the desktop scrollbar in many browsers, which can cause the card
     to overflow a few pixels and look "cut off" on the left. We therefore prefer a JS-set
     --hpgf-vw (= documentElement.clientWidth) and fall back to 100vw. */
  box-sizing: border-box;
  /* Keep a visible gutter on BOTH sides (requested), and avoid 100vw scrollbar issues via --hpgf-vw. */
  width: calc(var(--hpgf-vw, 100vw) - (var(--hpgf-buddy-gutter, 24px) * 2));
  max-width: calc(var(--hpgf-vw, 100vw) - (var(--hpgf-buddy-gutter, 24px) * 2));
  position: relative;
  left: 50%;
  /* Center breakout AND allow a small JS nudge to ensure it never clips on the left. */
  transform: translateX(calc(-50% + var(--hpgf-buddy-nudge-x, 0px)));
}
.hpgf-buddy:before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(90deg, rgba(0,181,165,.85), rgba(178,0,255,.75), rgba(0,181,165,.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
}
.hpgf-buddy-head{
  font-weight: 800;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.hpgf-buddy-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.hpgf-buddy-sub{ margin: 8px 0 12px; color: rgba(255,255,255,.88); }
.hpgf-buddy-warn{
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,190,0,.10);
  border: 1px solid rgba(255,190,0,.25);
  color: rgba(255,255,255,.92);
}

.hpgf-buddy-shell{
  position: relative;
  height: var(--hpgf-buddy-height);
}
@media (max-width: 980px){
  .hpgf-buddy-anim{ display:none; }
}

.hpgf-buddy-sessions,
.hpgf-buddy-chat,
.hpgf-buddy-anim{
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow: hidden;
}

.hpgf-buddy-sessions{ padding: 12px; display:flex; flex-direction: column; min-height: 0; }
.hpgf-buddy-sessions-head{ font-weight: 700; color: rgba(255,255,255,.92); margin-bottom: 10px; }
.hpgf-buddy-new{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(0,181,165,.26), rgba(178,0,255,.16));
  color: rgba(255,255,255,.96);
  padding: 10px 12px;
  cursor: pointer;
}
.hpgf-buddy-sessionlist{ margin-top: 10px; overflow: auto; flex: 1; min-height: 0; }
.hpgf-buddy-session{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  margin-bottom: 8px;
}
.hpgf-buddy-session.active,
.hpgf-buddy-session.is-active{
  background: linear-gradient(135deg, rgba(0,181,165,.22), rgba(178,0,255,.14));
  border-color: rgba(255,255,255,.22);
}
.hpgf-buddy-session small{ color: rgba(255,255,255,.70); }

.hpgf-buddy-chat{ display:flex; flex-direction: column; min-height: 0; height: 100%; }
.hpgf-buddy-toolbar{
  padding: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.hpgf-buddy-toolbar-right{ display:flex; gap: 8px; }
.hpgf-buddy-model{
  flex: 1;
  min-width: 140px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
}
.hpgf-buddy-btn{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  cursor: pointer;
}
.hpgf-buddy-btn--ghost{ background: rgba(255,255,255,.03); }

.hpgf-buddy-messages{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}
.hpgf-buddy-bubble{
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 18px;
  margin: 0 0 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.95);
  white-space: pre-wrap;
  word-break: break-word;
}
.hpgf-buddy-bubble.user{ margin-left:auto; background: rgba(0,181,165,.16); }
.hpgf-buddy-bubble.assistant{ background: rgba(178,0,255,.12); }

.hpgf-buddy-bubble.pending{ opacity: .92; }
.hpgf-buddy-waitnote{ font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.88); }
.hpgf-buddy-waitnote-wrap{ display:flex; align-items:center; gap:14px; min-height:96px; }
.hpgf-buddy-waitnote-visual{ flex:0 0 auto; }
.hpgf-buddy-waitnote-gif{ display:block; width:108px; max-width:32vw; height:auto; image-rendering:pixelated; filter:drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.hpgf-buddy-waitnote-copy{ flex:1 1 auto; font-size:13px; line-height:1.45; color:rgba(255,255,255,.90); }
.hpgf-buddy-autocontinue-note{ margin-top:10px; font-size:12px; line-height:1.4; color:rgba(255,255,255,.72); }
@media (max-width: 640px){
  .hpgf-buddy-waitnote-wrap{ flex-direction:column; align-items:flex-start; gap:10px; min-height:0; }
  .hpgf-buddy-waitnote-gif{ width:86px; max-width:42vw; }
}


.hpgf-buddy-compose{
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

/* Sessions horizontal bar (under the input) */
.hpgf-buddy-sessionsbar{
  padding: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.hpgf-buddy-sessions-toggle{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.hpgf-buddy-new-mini{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(0,181,165,.22), rgba(178,0,255,.14));
  color: rgba(255,255,255,.96);
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.hpgf-buddy-sessionstrip{
  flex: 1;
  display:flex;
  gap: 8px;
  align-items:center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px;
  scrollbar-width: thin;
}
.hpgf-buddy-sessionstrip::-webkit-scrollbar{ height: 8px; }
.hpgf-buddy-sessionstrip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }

.hpgf-buddy-sessionsbar.is-collapsed .hpgf-buddy-sessionstrip{ display:none; }

/* Session buttons as chips in strip */
.hpgf-buddy-session{
  margin-bottom: 0;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hpgf-buddy-files{ display:flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* LernBuddy: Mode buttons (over the input field) */
.hpgf-buddy-modebar{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 8px;
}
.hpgf-buddy-modebtn{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.hpgf-buddy-modebtn:hover{ transform: translateY(-1px); }
.hpgf-buddy-modebtn.is-active,
.hpgf-buddy-modebtn[aria-pressed="true"]{
  background: linear-gradient(135deg, rgba(0,181,165,.26), rgba(178,0,255,.16));
  border-color: rgba(255,255,255,.26);
}
.hpgf-buddy-filechip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 12px;
}
.hpgf-buddy-filechip button{
  border: none;
  background: transparent;
  color: rgba(255,255,255,.80);
  cursor: pointer;
}
.hpgf-buddy-compose-row{ display:flex; gap: 10px; align-items: flex-end; }
.hpgf-buddy-upload{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 92px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}
.hpgf-buddy-upload input{ display:none; }
.hpgf-buddy-input{
  flex: 1;
  resize: none;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.94);
  padding: 10px 12px;
  min-height: 42px;
  max-height: 140px;
  overflow: auto;
}
.hpgf-buddy-send{
  width: 92px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(0,181,165,.30), rgba(178,0,255,.18));
  color: rgba(255,255,255,.96);
  cursor: pointer;
}
.hpgf-buddy-mini{ margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.78); }

/* Sessions bar (horizontal, below the input field) */
.hpgf-buddy-sessionsbar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.hpgf-buddy-sessions-toggle{
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.hpgf-buddy-new-mini{
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(0,181,165,.26), rgba(178,0,255,.16));
  color: rgba(255,255,255,.96);
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.hpgf-buddy-sessionstrip{
  flex: 1;
  min-width: 0;
  display:flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px;
  scroll-behavior: smooth;
}
.hpgf-buddy-sessionstrip::-webkit-scrollbar{ height: 8px; }
.hpgf-buddy-sessionstrip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; }
.hpgf-buddy-session{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}
.hpgf-buddy-session.is-active,
.hpgf-buddy-session.active{
  background: linear-gradient(135deg, rgba(0,181,165,.22), rgba(178,0,255,.14));
  border-color: rgba(255,255,255,.22);
}
.hpgf-buddy-sessionsbar.is-collapsed .hpgf-buddy-sessionstrip{ display:none; }
.hpgf-buddy-anim{
  /* Integrated avatar: floats inside the Buddy without stealing layout width. */
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 190px;
  height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(0,0,0,.18);
  pointer-events: none;
}
.hpgf-buddy-anim::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  pointer-events:none;
}
.hpgf-buddy-anim img{
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  border: 0;
  background: transparent;
  transform-origin: 50% 65%;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.25));
}

/* Reserve space so the avatar never covers text (messages + input). */
@media (min-width: 981px){
  .hpgf-buddy-messages{ padding-right: 220px; }
  .hpgf-buddy-compose{ padding-right: 220px !important; }
  .hpgf-buddy-toolbar{ padding-right: 220px; }
  .hpgf-buddy-sessionsbar{ padding-right: 220px; }
}

/* Mascot animations – different motion per LernBuddy state */
@keyframes hpgfBuddyFloat { 0%{ transform: translateY(0) rotate(-1deg) scale(1);} 50%{ transform: translateY(-6px) rotate(1deg) scale(1.02);} 100%{ transform: translateY(0) rotate(-1deg) scale(1);} }
@keyframes hpgfBuddyType { 0%{ transform: translateY(0) rotate(-2deg) scale(1);} 100%{ transform: translateY(-2px) rotate(2deg) scale(1.02);} }
@keyframes hpgfBuddyThink { 0%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(-3px) scale(1.03);} 100%{ transform: translateY(0) scale(1);} }
@keyframes hpgfBuddyAnswer { 0%{ transform: scale(.98) rotate(-1deg);} 50%{ transform: scale(1.06) rotate(2deg);} 100%{ transform: scale(1) rotate(0deg);} }
@keyframes hpgfBuddyWait { 0%{ transform: translateY(0) scale(1); opacity: .95;} 50%{ transform: translateY(-1px) scale(1.01); opacity: 1;} 100%{ transform: translateY(0) scale(1); opacity: .95;} }

.hpgf-buddy[data-hpgf-buddy-state="idle"] .hpgf-buddy-anim img{ animation: hpgfBuddyFloat 3.2s ease-in-out infinite; }
.hpgf-buddy[data-hpgf-buddy-state="typing"] .hpgf-buddy-anim img{ animation: hpgfBuddyType .25s ease-in-out infinite alternate; }
.hpgf-buddy[data-hpgf-buddy-state="thinking"] .hpgf-buddy-anim img{ animation: hpgfBuddyThink 1.1s ease-in-out infinite; }
.hpgf-buddy[data-hpgf-buddy-state="answer"] .hpgf-buddy-anim img{ animation: hpgfBuddyAnswer .85s cubic-bezier(.2,.9,.2,1) infinite; }
.hpgf-buddy[data-hpgf-buddy-state="waiting"] .hpgf-buddy-anim img{ animation: hpgfBuddyWait 2.2s ease-in-out infinite; }
.hpgf-buddy .hpgf-buddy-anim.is-gif img,
.hpgf-buddy .hpgf-buddy-anim img.is-gif{ animation: none !important; }

.hpgf-buddy--locked{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.hpgf-buddy-overlay{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(10px);
}
.hpgf-buddy-overlay-card{
  width: min(520px, 100%);
  border-radius: 20px;
  background: rgba(20,20,24,.85);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  padding: 16px;
}
.hpgf-buddy-overlay-title{ font-weight: 800; margin-bottom: 8px; color: rgba(255,255,255,.95); }
.hpgf-buddy-overlay-text{ color: rgba(255,255,255,.86); margin-bottom: 10px; }
.hpgf-buddy-link{ color: rgba(0,181,165,.95); text-decoration: underline; }
.hpgf-buddy-link--off{ color: rgba(255,255,255,.75); }
.hpgf-buddy-overlay-check{ display:flex; gap: 8px; align-items: flex-start; color: rgba(255,255,255,.90); margin: 10px 0; }
.hpgf-buddy-overlay-btn{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(0,181,165,.34), rgba(178,0,255,.22));
  padding: 12px 14px;
  color: rgba(255,255,255,.96);
  cursor: pointer;
}
.hpgf-buddy-overlay-btn:disabled{ opacity: .55; cursor:not-allowed; }


/* ------------------------------------------------------------
   LernBuddy – Layout Refresh v4 (Fullscreen Buddy)
   Ziel: Buddy als "App" (breit + hoch), Chatfenster groß,
   Avatar integriert ohne Textfelder zu überdecken.
------------------------------------------------------------ */

/* Ensure both columns stretch to the Buddy height */
.hpgf-buddy-sessions,
.hpgf-buddy-chat{
  min-height: var(--hpgf-buddy-height);
}

/* Do not cap the main chat height here – let the shell define it */
.hpgf-buddy-chat{
  max-height: none;
}

/* Floating mascot overlay (desktop) */
@media (min-width: 981px){
  .hpgf-buddy-anim{
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 200px;
    height: 260px;
    pointer-events: none;
    z-index: 2;
  }
}

/* Nachrichtenfläche & Typografie */
.hpgf-buddy-messages{
  padding: 18px calc(18px + var(--hpgf-buddy-avatar-pad)) 14px 18px !important;
  gap: 12px !important;
}

.hpgf-buddy-bubble{
  font-size: 15.5px;
  line-height: 1.48;
  letter-spacing: .01em;
  max-width: 96% !important;
}
@media (max-width: 780px){
  .hpgf-buddy-bubble{ font-size: 16px; }
}

.hpgf-buddy-bubble.assistant{
  background: linear-gradient(135deg, rgba(142,83,189,.40), rgba(0,181,165,.18)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

.hpgf-buddy-bubble.user{
  background: linear-gradient(135deg, rgba(0,181,165,.38), rgba(0,0,0,.18)) !important;
  border: 1px solid rgba(0,181,165,.26) !important;
}


/* Fortsetzen-Button (wenn OpenAI wegen Länge abbricht) */
.hpgf-buddy-continue{
  display:flex;
  justify-content:center;
  margin: 4px 0 10px;
}
.hpgf-buddy-continue-btn{
  appearance:none;
  border: 1px solid rgba(0,181,165,.34);
  background: linear-gradient(135deg, rgba(0,181,165,.22), rgba(142,83,189,.18));
  color: rgba(255,255,255,.96);
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
}
.hpgf-buddy-continue-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
}
.hpgf-buddy-continue-btn:disabled{
  opacity: .55;
  cursor: default;
  transform:none;
}

/* Compose-Bereich: größer, lesbarer, mehr Kontrast */
.hpgf-buddy-compose{
  padding: 16px calc(16px + var(--hpgf-buddy-avatar-pad)) 18px 16px !important;
  gap: 12px !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
}

.hpgf-buddy-input{
  min-height: 58px !important;
  max-height: 240px;
  font-size: 16px !important;
  line-height: 1.4 !important;
  padding: 14px 14px !important;
  color: rgba(255,255,255,.98) !important;
  caret-color: rgba(0,181,165,1);
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 16px !important;
}

.hpgf-buddy-input::placeholder{
  color: rgba(255,255,255,.55) !important;
}

.hpgf-buddy-input:focus{
  outline: none !important;
  border-color: rgba(0,181,165,.35) !important;
  box-shadow: 0 0 0 3px rgba(0,181,165,.20), 0 18px 50px rgba(0,0,0,.35);
}

.hpgf-buddy-send{
  padding: 14px 18px !important;
  border-radius: 16px !important;
  font-weight: 850;
}

.hpgf-buddy-file-btn{
  padding: 14px 16px !important;
  border-radius: 16px !important;
  font-weight: 850;
}

.hpgf-buddy-toolbar{ padding: 12px 14px !important; }
.hpgf-buddy-model{ height: 38px !important; }


/* LernBuddy – Mini-Markdown Styles */
.hpgf-md-h1, .hpgf-md-h2, .hpgf-md-h3{
  font-weight: 900;
  letter-spacing: .01em;
  margin: 6px 0 6px;
}
.hpgf-md-h1{ font-size: 18px; }
.hpgf-md-h2{ font-size: 16.5px; }
.hpgf-md-h3{ font-size: 15.5px; }
.hpgf-md-inline{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  padding: 2px 6px;
  border-radius: 10px;
}
.hpgf-md-code{
  margin: 10px 0;
  padding: 12px 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  overflow: auto;
}
.hpgf-md-code code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre;
}

/* LernBuddy – Markdown Tabellen */
.hpgf-md-tablewrap{
  margin: 10px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
}
.hpgf-md-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.hpgf-md-table th,
.hpgf-md-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  border-right: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
  white-space: normal;
}
.hpgf-md-table th:last-child,
.hpgf-md-table td:last-child{ border-right: none; }
.hpgf-md-table tr:last-child td{ border-bottom: none; }

.hpgf-md-table th{
  font-weight: 900;
  background: rgba(255,255,255,.06);
}
.hpgf-md-table td{
  background: rgba(0,0,0,.06);
}

/* Subtle horizontal scrollbar (WebKit) */
.hpgf-md-tablewrap::-webkit-scrollbar{ height: 10px; }
.hpgf-md-tablewrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 10px;
}

/* =========================================================
   PrüfungsBuddy (Realtime S2S)
   ========================================================= */

.hpgf-exam{
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  padding: 18px;
  margin: 18px 0;
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}

/* Hero floating avatar above the PrüfungsBuddy card (Amtsärztin) */
.hpgf-exam-hero-avatar{
  position: absolute;
  left: -120px;
  top: -118px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 26px 70px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.06) inset;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  animation: hpgfExamFloat 3.6s ease-in-out infinite;
}
.hpgf-exam-hero-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}
@media (max-width: 980px){
  /* Tablet/mobile: keep it small and out of the way */
  .hpgf-exam-hero-avatar{
    left: 10px;
    top: -34px;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    opacity: 0.95;
  }
}
@media (max-width: 480px){
  .hpgf-exam-hero-avatar{ width: 64px; height: 64px; top: -30px; }
}

/* Match LernBuddy width on desktop: break out of the 1120px container (same gutters).
   JS also enforces the exact same viewport gutters to prevent "clipping" on some themes. */
@media (min-width: 981px){
  .hpgf-exam[data-hpgf-exam="1"],
  .hpgf-exam[data-hpgf-case="1"]{
    box-sizing: border-box;
    width: calc(var(--hpgf-vw, 100vw) - (var(--hpgf-buddy-gutter, 24px) * 2));
    max-width: calc(var(--hpgf-vw, 100vw) - (var(--hpgf-buddy-gutter, 24px) * 2));
    position: relative;
    left: 50%;
    transform: translateX(calc(-50% + var(--hpgf-buddy-nudge-x, 0px)));
  }
}
.hpgf-exam-head{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 6px;
}
.hpgf-exam-sub{ color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.35; margin-bottom: 12px; }
.hpgf-exam-chip{
  display: inline-block;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.16);
  font-size: 11px;
  font-weight: 800;
}
.hpgf-exam-topics{ display: flex; flex-wrap: wrap; gap: 10px; }
.hpgf-exam-topic{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 10px 12px;
  border-radius: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.hpgf-exam-topic:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); }
.hpgf-exam-empty{ color: rgba(255,255,255,.8); font-size: 13px; padding: 8px 0; }

/* Modal */
.hpgf-exam-overlay{
  position: fixed !important;
  inset: 0;
  display: none;
  /* flex-start + overflow enables scrolling inside the overlay on short viewports (mobile) */
  align-items: flex-start;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.55);
  /* Must sit above everything (themes/builders sometimes use very high z-index). */
  z-index: 2147483647 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.hpgf-exam-overlay.is-open{ display: flex; }
html.hpgf-modal-open, html.hpgf-modal-open body{ overflow: hidden; }

.hpgf-exam-modal{
  width: min(1100px, 96vw);
  height: min(720px, 92vh);
  background: rgba(20,18,26,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  position: relative;
  overflow: hidden;
  margin: 24px 0;
}
.hpgf-exam-close{
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 24px;
  line-height: 36px;
  cursor: pointer;
}

/* Floating avatar (PrüfungsBuddy) */
.hpgf-exam-avatar{
  position: absolute;
  /*
    Character placement:
    - slightly lower than the header controls
    - larger on desktop so it reads like an "animated" examiner
    - still safe-area aware (iOS notch)
  */
  top: calc(128px + env(safe-area-inset-top));
  right: calc(78px + env(safe-area-inset-right));
  width: 208px;
  height: 208px;
  border-radius: 52px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  animation: hpgfExamFloat 3.2s ease-in-out infinite;
}
.hpgf-exam-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}
.hpgf-exam-avatar.is-swap img{ animation: hpgfExamAvatarSwap .25s ease; }
.hpgf-exam-avatar[data-state="idle"]{
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.hpgf-exam-avatar[data-state="user"]{
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 22px rgba(48,4,56,0.55);
  border-color: rgba(48,4,56,0.55);
}
.hpgf-exam-avatar[data-state="assistant"]{
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 22px rgba(0,153,142,0.55);
  border-color: rgba(0,153,142,0.55);
}
@keyframes hpgfExamFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@keyframes hpgfExamAvatarSwap{
  from{ transform: scale(0.94); opacity: 0.55; }
  to{ transform: scale(1); opacity: 1; }
}
@media (max-width: 720px){
  .hpgf-exam-avatar{
    width: 60px;
    height: 60px;
    border-radius: 18px;
    right: calc(16px + env(safe-area-inset-right));
    /* below the top controls, but not over the close button */
    top: calc(72px + env(safe-area-inset-top));
  }
}

.hpgf-exam-modal-head{ padding: 18px 20px 10px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.hpgf-exam-modal-title{ font-size: 18px; font-weight: 900; }
.hpgf-exam-modal-sub{ color: rgba(255,255,255,.75); font-size: 12px; margin-top: 4px; }

.hpgf-exam-modal-body{ padding: 14px 20px 18px; height: calc(100% - 70px); overflow: auto; }
/* iOS/Safari: enable momentum scroll in the modal body */
.hpgf-exam-modal-body{ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.hpgf-exam-status{ padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: rgba(255,255,255,.9); font-weight: 700; }

.hpgf-exam-privacy{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.16);
  display: none;
}
.hpgf-exam-privacy.is-open{ display: block; }
.hpgf-exam-privacy-text{
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
}
.hpgf-exam-privacy-note{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.88);
}
.hpgf-exam-privacy-link{
  color: rgba(255,255,255,0.92);
  text-decoration: underline;
}
.hpgf-exam-privacy-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.hpgf-exam-privacy-check{
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}
.hpgf-exam-privacy-check input{ transform: translateY(1px); }


.hpgf-exam-audio-row{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 12px; }
.hpgf-exam-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 10px 12px;
  border-radius: 16px;
  font-weight: 800;
  cursor: pointer;
}
.hpgf-exam-btn:disabled{ opacity: .55; cursor: not-allowed; }
.hpgf-exam-btn--primary{ background: rgba(0,153,142,0.22); border-color: rgba(0,153,142,0.38); }

.hpgf-exam-controls{ display:flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.hpgf-exam-control{ display:flex; flex-direction: column; gap: 6px; }
.hpgf-exam-control label{ font-size: 12px; color: rgba(255,255,255,.75); font-weight: 800; }
.hpgf-exam-control input{
  width: 140px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.20);
  color: #fff;
}

.hpgf-exam-ptt{ margin-top: 12px; display:flex; gap:12px; align-items: center; flex-wrap: wrap; }
.hpgf-exam-ptt-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(48,4,52,0.35);
  color: #fff;
  padding: 12px 14px;
  border-radius: 18px;
  font-weight: 900;
  cursor: pointer;
}
.hpgf-exam-ptt-btn:disabled{ opacity: .55; cursor: not-allowed; }
.hpgf-exam-timer{ font-weight: 900; color: rgba(255,255,255,.88); }

.hpgf-exam-transcript{
  margin-top: 14px;
  height: 360px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  padding: 10px;
}
.hpgf-exam-line{ padding: 8px 10px; border-radius: 16px; margin: 6px 0; font-size: 13px; line-height: 1.35; }
.hpgf-exam-line--assistant{ background: rgba(0,153,142,0.14); border: 1px solid rgba(0,153,142,0.24); }
.hpgf-exam-line--user{ background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }

/* =========================================================
   Fallbeispiel Dude (Realtime S2S) – Transcript readability
   ========================================================= */

.hpgf-case-line{
  position: relative;
  padding: 10px 12px;
  border-radius: 16px;
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.42;
  white-space: pre-wrap;
}
.hpgf-case-line::before{
  content: attr(data-label);
  display: inline-block;
  margin: 0 10px 6px 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}
.hpgf-case-line--assistant{
  background: rgba(0,153,142,0.16);
  border: 1px solid rgba(0,153,142,0.28);
}
.hpgf-case-line--assistant::before{
  background: rgba(0,153,142,0.18);
  border-color: rgba(0,153,142,0.32);
}
.hpgf-case-line--user{
  background: rgba(48,4,56,0.16);
  border: 1px solid rgba(163,88,255,0.30);
}
.hpgf-case-line--user::before{
  background: rgba(48,4,56,0.18);
  border-color: rgba(163,88,255,0.34);
}
.hpgf-case-line.is-live{ opacity: .70; }

@media (max-width: 720px){
  .hpgf-exam-modal{ height: min(760px, 94vh); }
  .hpgf-exam-transcript{ height: 310px; }
}


/* =========================================================
   PodcastBuddy (Realtime S2S)
   ========================================================= */

.hpgf-podcast{
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  padding: 18px;
  margin: 18px 0;
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}

.hpgf-podcast-hero-avatar{
  position: absolute;
  left: -120px;
  top: -118px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 26px 70px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.06) inset;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  animation: hpgfExamFloat 3.6s ease-in-out infinite;
}
.hpgf-podcast-hero-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}
@media (max-width: 980px){
  .hpgf-podcast-hero-avatar{
    left: 10px;
    top: -34px;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    opacity: 0.95;
  }
}
@media (max-width: 480px){
  .hpgf-podcast-hero-avatar{ width: 64px; height: 64px; top: -30px; }
}

@media (min-width: 981px){
  .hpgf-podcast[data-hpgf-podcast="1"]{
    box-sizing: border-box;
    width: calc(var(--hpgf-vw, 100vw) - (var(--hpgf-buddy-gutter, 24px) * 2));
    max-width: calc(var(--hpgf-vw, 100vw) - (var(--hpgf-buddy-gutter, 24px) * 2));
    position: relative;
    left: 50%;
    transform: translateX(calc(-50% + var(--hpgf-buddy-nudge-x, 0px)));
  }
}

.hpgf-podcast-head{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 6px;
}
.hpgf-podcast-sub{ color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.35; margin-bottom: 12px; }
.hpgf-podcast-chip{
  display: inline-block;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.16);
  font-size: 11px;
  font-weight: 800;
}

.hpgf-podcast-topics{ display:flex; flex-wrap: wrap; gap: 10px; }
.hpgf-podcast-topic{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 10px 12px;
  border-radius: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.hpgf-podcast-topic:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); }
.hpgf-podcast-empty{ color: rgba(255,255,255,.8); font-size: 13px; padding: 8px 0; }

/* Modal */
.hpgf-podcast-overlay{
  position: fixed !important;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.55);
  z-index: 2147483647 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.hpgf-podcast-overlay.is-open{ display:flex; }

.hpgf-podcast-modal{
  width: min(1100px, 96vw);
  height: min(720px, 92vh);
  background: rgba(20,18,26,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  position: relative;
  overflow: hidden;
  margin: 24px 0;
}
.hpgf-podcast-close{
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 24px;
  line-height: 36px;
  cursor: pointer;
}

.hpgf-podcast-avatar{
  top: calc(128px + env(safe-area-inset-top));
  right: calc(78px + env(safe-area-inset-right));
  width: 208px;
  height: 208px;
  border-radius: 52px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  overflow: hidden;
  pointer-events: none;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translateZ(0);
  animation: hpgfExamFloat 3.2s ease-in-out infinite;
  position: absolute;
}
.hpgf-podcast-avatar img{ width:100%; height:100%; object-fit: cover; display:block; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); }
.hpgf-podcast-avatar[data-state="user"]{ box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 22px rgba(48,4,56,0.55); border-color: rgba(48,4,56,0.55); }
.hpgf-podcast-avatar[data-state="assistant"]{ box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 22px rgba(0,153,142,0.55); border-color: rgba(0,153,142,0.55); }
@media (max-width: 720px){
  .hpgf-podcast-avatar{
    width: 60px;
    height: 60px;
    border-radius: 18px;
    right: calc(16px + env(safe-area-inset-right));
    top: calc(72px + env(safe-area-inset-top));
  }
}

.hpgf-podcast-modal-head{ padding: 18px 20px 10px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.hpgf-podcast-modal-title{ font-size: 18px; font-weight: 900; }
.hpgf-podcast-modal-sub{ color: rgba(255,255,255,.75); font-size: 12px; margin-top: 4px; }
.hpgf-podcast-modal-body{ padding: 14px 20px 18px; height: calc(100% - 70px); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

.hpgf-podcast-status{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,.9);
  font-weight: 700;
}
.hpgf-podcast-progress{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
}

.hpgf-podcast-jump{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.hpgf-podcast-jump-left{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.hpgf-podcast-jump label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
}
.hpgf-podcast-jump select{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 8px 10px;
  border-radius: 14px;
  font-weight: 800;
  max-width: 320px;
}
.hpgf-podcast-btn--danger{
  background: rgba(255, 60, 60, 0.14);
  border-color: rgba(255, 60, 60, 0.28);
}

.hpgf-podcast-privacy{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.16);
  display: none;
}
.hpgf-podcast-privacy.is-open{ display: block; }
.hpgf-podcast-privacy-text{ font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1.35; }
.hpgf-podcast-privacy-note{ margin-top: 8px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.18); color: rgba(255,255,255,0.88); }
.hpgf-podcast-privacy-link{ color: rgba(255,255,255,0.92); text-decoration: underline; }
.hpgf-podcast-privacy-actions{ display:flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.hpgf-podcast-privacy-check{ display:flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.92); }
.hpgf-podcast-privacy-check input{ transform: translateY(1px); }

.hpgf-podcast-audio-row{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 12px; }
.hpgf-podcast-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 10px 12px;
  border-radius: 16px;
  font-weight: 800;
  cursor: pointer;
}
.hpgf-podcast-btn:disabled{ opacity: .55; cursor: not-allowed; }
.hpgf-podcast-btn--primary{ background: rgba(0,153,142,0.22); border-color: rgba(0,153,142,0.38); }

.hpgf-podcast-ptt{ margin-top: 12px; display:flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hpgf-podcast-ptt-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(48,4,52,0.35);
  color: #fff;
  padding: 12px 14px;
  border-radius: 18px;
  font-weight: 900;
  cursor: pointer;
}
.hpgf-podcast-ptt-btn:disabled{ opacity: .55; cursor: not-allowed; }

@keyframes hpgfPttPulse{
  0%{ box-shadow: 0 0 0 0 rgba(0,153,142,.55), 0 0 0 0 rgba(59,130,246,.35); }
  70%{ box-shadow: 0 0 0 14px rgba(0,153,142,0), 0 0 0 26px rgba(59,130,246,0); }
  100%{ box-shadow: 0 0 0 0 rgba(0,153,142,0), 0 0 0 0 rgba(59,130,246,0); }
}

.hpgf-podcast-ptt-btn.is-active{
  background: linear-gradient(135deg, rgba(0,153,142,0.55), rgba(59,130,246,0.35));
  border-color: rgba(0,153,142,0.75);
  animation: hpgfPttPulse 1.15s infinite;
  transform: translateY(-1px);
}

.hpgf-podcast-timer{ font-weight: 900; color: rgba(255,255,255,.88); }

.hpgf-podcast-transcript{
  margin-top: 14px;
  height: 360px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  padding: 10px;
}

.hpgf-podcast-line{
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  line-height: 1.35;
  font-weight: 700;
}
.hpgf-podcast-line--user{
  background: rgba(0,153,142,0.16);
  border-color: rgba(0,153,142,0.35);
}
.hpgf-podcast-line--assistant{
  background: rgba(59,130,246,0.14);
  border-color: rgba(59,130,246,0.30);
}


@media (max-width: 720px){
  .hpgf-podcast-modal{ height: min(760px, 94vh); }
  .hpgf-podcast-transcript{ height: 310px; }
}


/* =============================================================
   AmtsarztBuddy (Realtime S2S – 2 KI-Stimmen)
   ============================================================= */

.hpgf-amtsarzt{
  margin: 18px 0 0;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 60px rgba(0,0,0,0.20);
}
.hpgf-amtsarzt-head{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
  margin-bottom: 4px;
}
.hpgf-amtsarzt-sub{
  font-size: 13px;
  opacity: .86;
  margin-bottom: 12px;
}
.hpgf-amtsarzt-topics{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hpgf-amtsarzt-topic{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: inherit;
  border-radius: 16px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.hpgf-amtsarzt-topic:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
}

.hpgf-amtsarzt-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  z-index: 99999;
}
.hpgf-amtsarzt-overlay.is-open{ display: flex; }
.hpgf-amtsarzt-modal{
  width: min(980px, 96vw);
  height: min(860px, 94vh);
  margin: auto;
  border-radius: 26px;
  background: rgba(19, 19, 26, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative; /* contain absolute avatar */
}
.hpgf-amtsarzt-topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hpgf-amtsarzt-title{
  font-weight: 900;
  font-size: 16px;
}
.hpgf-amtsarzt-close{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: inherit;
  border-radius: 14px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 800;
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 5;
}

/* Modal layout */
.hpgf-amtsarzt-modal-head{
  padding: 22px 22px 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  min-height: 148px;
}
.hpgf-amtsarzt-modal-title{
  font-weight: 950;
  font-size: 18px;
  padding-left: 164px;
  line-height: 1.1;
}
.hpgf-amtsarzt-modal-sub{
  opacity: .88;
  font-size: 13px;
  padding-left: 164px;
  margin-top: 6px;
}
.hpgf-amtsarzt-modal-body{
  position: relative;
  padding: 16px 22px 22px 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0; /* allow inner scrolling in flex modal */
  overflow-y: auto; /* make modal body scrollable so choices are reachable */
}
.hpgf-amtsarzt-audio-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hpgf-amtsarzt-diff{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.hpgf-amtsarzt-diff-label{
  font-size: 12px;
  opacity: .85;
  font-weight: 900;
  margin-right: 2px;
}
.hpgf-amtsarzt-diff-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: inherit;
  border-radius: 14px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 900;
  font-size: 12px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.hpgf-amtsarzt-diff-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}
.hpgf-amtsarzt-diff-btn.is-active{
  border-color: rgba(0,153,142,0.55);
  box-shadow: 0 0 0 3px rgba(0,153,142,0.18);
}

.hpgf-amtsarzt-choices{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  display: none;
}
.hpgf-amtsarzt-choices.is-open{ display:block; }
.hpgf-amtsarzt-choices-head{
  font-weight: 950;
  font-size: 13px;
  margin-bottom: 8px;
}
.hpgf-amtsarzt-choices-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.hpgf-amtsarzt-choice{
  position: relative;
  text-align: left;
  width: 100%;
  appearance: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.10);
  color: inherit;
  border-radius: 16px;
  padding: 10px 12px 10px 30px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.25;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.hpgf-amtsarzt-choice::before{
  content: "–";
  position: absolute;
  left: 12px;
  top: 10px;
  opacity: .9;
  font-weight: 900;
}
.hpgf-amtsarzt-choice:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
}
.hpgf-amtsarzt-choice.is-selected{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.14);
}
.hpgf-amtsarzt-choice.is-wrong{
  border-color: rgba(255,65,65,0.55);
  box-shadow: 0 0 0 3px rgba(255,65,65,0.18);
}
.hpgf-amtsarzt-choice.is-correct{
  border-color: rgba(0,200,120,0.55);
  box-shadow: 0 0 0 3px rgba(0,200,120,0.18);
}
.hpgf-amtsarzt-choice:disabled{
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}


.hpgf-amtsarzt-body{
  position: relative;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  flex: 1;
}
.hpgf-amtsarzt-avatar{
  position:absolute;
  left: 22px;
  top: 18px;
  width: 140px;
  height: 140px;
  border-radius: 28px;
  border: 2px solid rgba(255,255,255,0.18);
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  z-index: 4;
}
.hpgf-amtsarzt-avatar img{ width: 100%; height: 100%; object-fit: cover; display:block; }

.hpgf-amtsarzt-status{
  font-size: 13px;
  opacity: .9;
  padding-right: 0;
}

.hpgf-amtsarzt-controls{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.hpgf-amtsarzt-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: inherit;
  border-radius: 16px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
}
.hpgf-amtsarzt-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}
.hpgf-amtsarzt-ptt{
  margin-left: auto;
}
.hpgf-amtsarzt-ptt.is-active{
  transform: scale(0.99);
}

.hpgf-amtsarzt-transcript{
  max-height: 420px;
  height: auto;
  overflow: auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  padding: 12px;
}
.hpgf-amtsarzt-line{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  line-height: 1.35;
  font-weight: 800;
  margin-bottom: 10px;
}
.hpgf-amtsarzt-line.is-live{ opacity: 0.92; }
.hpgf-amtsarzt-line--user{
  background: rgba(0,153,142,0.16);
  border-color: rgba(0,153,142,0.35);
}
.hpgf-amtsarzt-line--beisitzerin{
  background: rgba(59,130,246,0.14);
  border-color: rgba(59,130,246,0.30);
}
.hpgf-amtsarzt-line--pruefling{
  background: rgba(244,63,94,0.13);
  border-color: rgba(244,63,94,0.28);
}

.hpgf-amtsarzt-privacy{
  display:none;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}
.hpgf-amtsarzt-privacy.is-open{ display:block; }
.hpgf-amtsarzt-privacy a{ color: inherit; text-decoration: underline; }
.hpgf-amtsarzt-privacy-text{ font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1.35; }
.hpgf-amtsarzt-privacy-note{ margin-top: 8px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.18); color: rgba(255,255,255,0.88); }

@media (max-width: 720px){
  .hpgf-amtsarzt-modal{ height: min(780px, 94vh); }
  .hpgf-amtsarzt-transcript{ max-height: 320px; height: auto; }
  .hpgf-amtsarzt-avatar{ width: 84px; height: 84px; left: 16px; top: 16px; border-radius: 22px; }
  .hpgf-amtsarzt-modal-head{ min-height: 92px; padding: 18px 16px 12px 16px; }
  .hpgf-amtsarzt-modal-title,
  .hpgf-amtsarzt-modal-sub{ padding-left: 104px; }
}


/* UpsideDownBuddy / AmtsarztBuddy PTT button (large, glowing, label below) */
.hpgf-amtsarzt-ptt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.hpgf-amtsarzt-ptt-btn{
  width:78px;
  height:78px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(48,4,52,0.40);
  color:#fff;
  cursor:pointer;
  font-size:28px;
  font-weight:900;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.hpgf-amtsarzt-ptt-btn:disabled{ opacity:.45; cursor:not-allowed; }
.hpgf-amtsarzt-ptt-btn.is-active{
  transform: scale(0.97);
  box-shadow: 0 0 0 4px rgba(0,153,142,0.12), 0 0 22px rgba(0,153,142,0.35);
  filter: brightness(1.08);
}
.hpgf-amtsarzt-ptt-label{
  font-size:13px;
  opacity:.9;
  text-align:center;
  user-select:none;
}

/* === Gummipunkte (Chip + Toast) === */
.hpgf-gum-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  user-select:none;
}
.hpgf-gum-chip .hpgf-gum-ico{ display:inline-flex; align-items:center; justify-content:center; }
.hpgf-gum-chip .hpgf-gum-ico img{ width:16px; height:16px; object-fit:contain; border-radius:4px; }
.hpgf-gum-chip.is-zero{ border-color: rgba(255,120,120,0.35); opacity:0.92; }
.hpgf-gum-chip.is-flash{ animation: hpgfGumFlash .9s ease; }
@keyframes hpgfGumFlash{ 0%{ transform: translateY(0); } 35%{ transform: translateY(-2px); } 100%{ transform: translateY(0); } }

.hpgf-toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:999999;
}
.hpgf-toast{
  min-width: 260px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(16, 10, 24, 0.86);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position:relative;
}
.hpgf-toast--out{ opacity:0; transform: translateY(6px); transition: all .26s ease; }
.hpgf-toast-row{ display:flex; gap:12px; align-items:flex-start; }
.hpgf-toast-icon{ width:26px; height:26px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); }
.hpgf-toast-msg{ flex:1; font-size:13px; line-height:1.35; }
.hpgf-toast-actions{ margin-top:10px; display:flex; gap:10px; justify-content:flex-end; align-items:center; }
.hpgf-toast-btn{
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  padding:6px 10px;
  border-radius: 12px;
  font-size:12px;
}
.hpgf-toast-btn:active{ transform: translateY(1px); }
.hpgf-toast-x{
  width:30px;
  height:30px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size:18px;
  line-height:1;
}

/* =========================
   Gumshop (Gummipunkte Shop)
   ========================= */
.hpgf-modcard--gumshop{ position:relative; overflow:visible; }
.hpgf-modcard--gumshop .hpgf-modcard-badge{ background: rgba(0,181,165,.18); border-color: rgba(0,181,165,.28); }

.hpgf-gumshop-hero-avatar{
  position:absolute;
  left:-22px;
  top:-44px;
  width:128px;
  height:128px;
  border-radius:32px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hpgf-gumshop-hero-avatar img{ width:112px; height:112px; border-radius:26px; object-fit:cover; }

.hpgf-gumshop-window{
  margin-top:14px;
  padding:14px;
  border-radius:22px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  position:relative;
  overflow:hidden;
}
.hpgf-gumshop-window:before{pointer-events:none;
}
.hpgf-gumshop-window:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,122,167,.22) 0 4px, transparent 5px),
    radial-gradient(circle at 16% 26%, rgba(255,255,255,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 18%, rgba(0,181,165,.18) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 26% 78%, rgba(0,181,165,.14) 0 4px, transparent 5px),
    radial-gradient(circle at 30% 82%, rgba(255,255,255,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 72%, rgba(255,122,167,.18) 0 4px, transparent 5px),
    radial-gradient(circle at 92% 76%, rgba(255,255,255,.12) 0 2px, transparent 3px);
  opacity:.55;
  pointer-events:none;
}

.hpgf-gumshop-window-title{ position:relative; font-weight:700; letter-spacing:.3px; }
.hpgf-gumshop-window-sub{ position:relative; color: rgba(255,255,255,.75); font-size: 12px; margin-top:2px; }

.hpgf-gumshop-items{
  position:relative;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width: 520px){
  .hpgf-gumshop-items{ grid-template-columns: 1fr; }
  .hpgf-gumshop-hero-avatar{ left:-10px; top:-34px; width:112px; height:112px; }
  .hpgf-gumshop-hero-avatar img{ width:98px; height:98px; }
}

.hpgf-gumshop-item{
  width:100%;
  text-align:left;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.hpgf-gumshop-item:hover{ transform: translateY(-2px); border-color: rgba(0,181,165,.42); background: rgba(255,255,255,.10); }
.hpgf-gumshop-item:active{ transform: translateY(0px) scale(.99); }

.hpgf-gumshop-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.hpgf-gumshop-item-title{ font-weight:700; }
.hpgf-gumshop-item-points{ font-weight:800; letter-spacing:.2px; }
.hpgf-gumshop-item-points span{ font-weight:600; opacity:.75; }
.hpgf-gumshop-item-bottom{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hpgf-gumshop-item-price{ opacity:.85; }
.hpgf-gumshop-item-cta{
  padding:8px 10px;
  border-radius:14px;
  background: rgba(0,181,165,.18);
  border: 1px solid rgba(0,181,165,.28);
  font-weight:700;
}

.hpgf-gumshop-state{
  position:relative;
  margin-top:12px;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.08);
  border:1px dashed rgba(255,255,255,.22);
  color: rgba(255,255,255,.80);
  font-size: 13px;
}
.hpgf-gumshop-state a{ color: rgba(0,181,165,.95); font-weight:700; text-decoration:none; }
.hpgf-gumshop-state a:hover{ text-decoration:underline; }

.hpgf-gumshop-foot{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; opacity:.9; }
.hpgf-gumshop-adminlink{ color: rgba(255,255,255,.88); text-decoration:none; font-weight:700; }
.hpgf-gumshop-adminlink:hover{ text-decoration:underline; }

/* Modal */
.hpgf-gumshop-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(8,6,18,.62);
  z-index: 999999;
  padding: 18px;
}
.hpgf-gumshop-overlay.is-open{ display:flex; }
.hpgf-modal-open{ overflow:hidden; }

.hpgf-gumshop-modal{
  width: min(560px, 100%);
  border-radius: 26px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 26px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: rgba(255,255,255,.92);
  position:relative;
  overflow:hidden;
}
.hpgf-gumshop-modal:before{
  content:"";
  position:absolute;
  inset:-120px;
  background: radial-gradient(circle at 30% 20%, rgba(0,181,165,.28), transparent 52%),
              radial-gradient(circle at 80% 10%, rgba(255,122,167,.22), transparent 44%);
  pointer-events:none;
}
.hpgf-gumshop-close{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
}
.hpgf-gumshop-close:hover{ background: rgba(255,255,255,.14); }

.hpgf-gumshop-modal-head{ position:relative; padding:18px 18px 10px; }
.hpgf-gumshop-modal-title{ font-size: 18px; font-weight:800; }
.hpgf-gumshop-modal-sub{ margin-top:4px; opacity:.85; font-size: 13px; }

.hpgf-gumshop-modal-body{ position:relative; padding: 0 18px 18px; }
.hpgf-gumshop-pack{
  margin: 8px 0 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
}
.hpgf-gumshop-pack-title{ font-weight:800; }
.hpgf-gumshop-pack-meta{ margin-top:4px; opacity:.85; font-size: 13px; }

.hpgf-gumshop-loading,
.hpgf-gumshop-paypal-missing{
  padding: 12px;
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.90);
}

.hpgf-gumshop-legal{ margin-top:12px; font-size: 12px; opacity:.85; line-height: 1.45; }

.hpgf-gumshop-agb{
  margin-top:14px;
  padding:14px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}
.hpgf-gumshop-agb-head{
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
  letter-spacing: .2px;
  opacity: .95;
}
.hpgf-gumshop-agb-scroll{
  max-height: 180px;
  overflow:auto;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
}
.hpgf-gumshop-agb-scroll h1,
.hpgf-gumshop-agb-scroll h2,
.hpgf-gumshop-agb-scroll h3{
  margin: 10px 0 6px;
  font-size: 13px;
}
.hpgf-gumshop-agb-scroll p,
.hpgf-gumshop-agb-scroll li{
  font-size: 12px;
  line-height: 1.45;
  opacity: .92;
}
.hpgf-gumshop-agb-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top: 10px;
  font-size: 12px;
  opacity: .95;
}
.hpgf-gumshop-agb-check input{
  margin-top: 2px;
}
.hpgf-gumshop-agb-note{
  margin-top: 6px;
  font-size: 11px;
  opacity: .75;
}


/* ------------------------------------------------------------
   KI‑Hinweis (alle Kurse): Info-Leiste + Modal (Glass)
   ------------------------------------------------------------ */

html.hpgf-modal-lock, html.hpgf-modal-lock body{
  overflow: hidden !important;
}

.hpgf-kihint{
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr 34px 28px;
  gap: 12px;
  align-items: center;
  margin: 14px 0 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    radial-gradient(800px 220px at 12% 10%, rgba(0,181,165,.18), transparent 58%),
    radial-gradient(760px 220px at 86% 0%, rgba(142,83,189,.16), transparent 60%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 16px 50px rgba(0,0,0,.20);
  overflow: hidden;
  opacity: 1;
}

.hpgf-kihint:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-80%);
  opacity: .55;
}

.hpgf-kihint.is-anim{ opacity: 0; transform: translateY(10px); }
.hpgf-kihint.is-anim.is-in{
  opacity: 1;
  transform: translateY(0);
  transition: transform .35s ease, opacity .35s ease;
}

.hpgf-kihint.is-out{
  opacity: 0;
  transform: translateY(-8px);
  transition: transform .22s ease, opacity .22s ease;
}

@media (prefers-reduced-motion: no-preference){
  .hpgf-kihint.is-in:before{
    animation: hpgfKihintShimmer 5.8s ease-in-out infinite;
  }
  .hpgf-kihint-ico{
    animation: hpgfKihintFloat 4.4s ease-in-out infinite;
  }
}

@keyframes hpgfKihintShimmer{
  0%{ transform: translateX(-90%); }
  55%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}
@keyframes hpgfKihintFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

.hpgf-kihint-ico{
  width: 40px;
  height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(0,181,165,.22), rgba(142,83,189,.14));
  box-shadow: 0 10px 28px rgba(0,0,0,.20);
  font-size: 18px;
}

.hpgf-kihint-top{ font-size: 13px; color: rgba(255,255,255,.92); letter-spacing:.2px; }
.hpgf-kihint-sub{ font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.35; margin-top: 2px; }
.hpgf-kihint-buddy{ color: rgba(255,255,255,.92); }

.hpgf-kihint-btn{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.hpgf-kihint-btn:hover{ background: rgba(0,0,0,.30); }

.hpgf-kihint-x{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.80);
  cursor: pointer;
}
.hpgf-kihint-x:hover{ background: rgba(0,0,0,.28); }

/* Modal */
.hpgf-kimodal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.hpgf-kimodal.is-open{ display: grid; place-items: center; }

.hpgf-kimodal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.hpgf-kimodal-card{
  position: relative;
  width: min(720px, calc(100vw - 26px));
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    radial-gradient(900px 360px at 15% 0%, rgba(0,181,165,.24), transparent 58%),
    radial-gradient(820px 360px at 85% 0%, rgba(142,83,189,.22), transparent 60%),
    radial-gradient(1000px 520px at 50% 120%, rgba(0,0,0,.42), rgba(0,0,0,.18));
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
  color: rgba(255,255,255,.94);
  overflow: hidden;
  transform: translateY(14px) scale(.98);
  opacity: 0;
}

.hpgf-kimodal.is-open .hpgf-kimodal-card{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform .28s ease, opacity .28s ease;
}

@media (prefers-reduced-motion: reduce){
  .hpgf-kimodal-card{ transition: none !important; transform:none !important; opacity: 1 !important; }
  .hpgf-kihint:before{ animation: none !important; }
  .hpgf-kihint-ico{ animation: none !important; }
}

.hpgf-kimodal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.hpgf-kimodal-close:hover{ background: rgba(0,0,0,.28); }

.hpgf-kimodal-head{ padding: 20px 22px 10px; }
.hpgf-kimodal-title{ font-size: 20px; font-weight: 900; letter-spacing: .2px; }
.hpgf-kimodal-sub{ margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.78); }
.hpgf-kimodal-chip{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  margin-left: 6px;
  font-weight: 800;
  color: rgba(255,255,255,.90);
}

.hpgf-kimodal-body{ padding: 0 22px 16px; }
.hpgf-kimodal-note{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  padding: 12px 14px;
  font-size: 13px;
  color: rgba(255,255,255,.86);
}

.hpgf-kimodal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 760px){
  .hpgf-kimodal-grid{ grid-template-columns: 1fr; }
}

.hpgf-kimodal-box{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 12px 14px;
}
.hpgf-kimodal-box.is-focus{
  border-color: rgba(0,181,165,.38);
  box-shadow: 0 18px 55px rgba(0,181,165,.14);
}

.hpgf-kimodal-box-title{ font-weight: 900; font-size: 14px; margin-bottom: 8px; }
.hpgf-kimodal-list{ margin: 0; padding-left: 18px; color: rgba(255,255,255,.80); font-size: 13px; }
.hpgf-kimodal-list li{ margin: 6px 0; }

.hpgf-kimodal-mini{ margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,.72); }

.hpgf-kimodal-actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
}

.hpgf-kimodal-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 900;
  cursor: pointer;
}
.hpgf-kimodal-btn:hover{ background: rgba(255,255,255,.10); }
.hpgf-kimodal-btn--primary{
  background: linear-gradient(135deg, rgba(0,181,165,.34), rgba(142,83,189,.22));
  border-color: rgba(255,255,255,.18);
}


/* Coaching Buddy waiting animation */
.hpgf-coachchat-loader-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:18px;background:rgba(143,231,221,.10);border:1px solid rgba(143,231,221,.18);color:#eef5ff;}
.hpgf-coachchat-loader-inner.has-gif{align-items:center;gap:14px;}
.hpgf-coachchat-loader-visual{flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.hpgf-coachchat-loader-gif{display:block;width:96px;max-width:28vw;height:auto;image-rendering:pixelated;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28));}
.hpgf-coachchat-loader-copy{display:flex;flex-direction:column;gap:8px;min-width:160px;flex:1 1 220px;}
.hpgf-coachchat-monkey,.hpgf-coachchat-drum{font-size:28px;line-height:1;display:inline-block;}
.hpgf-coachchat-monkey{animation:hpgfCoachMonkeyBounce 1s ease-in-out infinite;}
.hpgf-coachchat-drum{animation:hpgfCoachDrumBeat .6s ease-in-out infinite alternate;}
.hpgf-coachchat-dots{display:inline-flex;gap:4px;align-items:center;}
.hpgf-coachchat-dots span{width:7px;height:7px;border-radius:999px;background:#8fe7dd;display:inline-block;animation:hpgfCoachDots 1.2s infinite ease-in-out;}
.hpgf-coachchat-dots span:nth-child(2){animation-delay:.15s;}
.hpgf-coachchat-dots span:nth-child(3){animation-delay:.3s;}
.hpgf-coachchat-loader-text{font-size:13px;line-height:1.5;color:#dff7ff;}
@media (max-width:640px){
  .hpgf-coachchat-loader-inner.has-gif{justify-content:center;text-align:center;}
  .hpgf-coachchat-loader-copy{align-items:center;min-width:0;}
  .hpgf-coachchat-loader-gif{width:82px;max-width:40vw;}
}
@keyframes hpgfCoachMonkeyBounce{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-4px) rotate(-6deg);}}
@keyframes hpgfCoachDrumBeat{0%{transform:scale(1) rotate(0deg);}100%{transform:scale(1.08) rotate(6deg);}}
@keyframes hpgfCoachDots{0%,80%,100%{opacity:.35;transform:scale(.8);}40%{opacity:1;transform:scale(1.15);}}


/* LernBuddy – mobile mascot fix: keep avatar visible, but small and out of the input area */
@media (max-width: 980px){
  .hpgf-buddy-anim{
    display: flex !important;
    width: clamp(82px, 20vw, 108px);
    height: clamp(108px, 26vw, 136px);
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px;
    border-radius: 18px;
    background: rgba(0,0,0,.10);
    z-index: 1;
    opacity: .96;
  }
  .hpgf-buddy-anim::before{ border-radius: 18px; }
  .hpgf-buddy-anim img{
    object-position: center bottom;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
  }
  .hpgf-buddy-toolbar,
  .hpgf-buddy-messages,
  .hpgf-buddy-compose,
  .hpgf-buddy-sessionsbar{
    position: relative;
    z-index: 2;
  }
}
@media (max-width: 640px){
  .hpgf-buddy-anim{
    width: 92px;
    height: 118px;
    right: 6px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 4px;
    background: rgba(0,0,0,.06);
  }
}
@media (max-width: 430px){
  .hpgf-buddy-anim{
    width: 82px;
    height: 106px;
    right: 4px;
    bottom: calc(6px + env(safe-area-inset-bottom));
  }
}


/* Persönliche Dokumente (Passwort + Mail-Code) */
.hpgf-sdocs{margin-top:18px;padding:22px;border-radius:28px;background:linear-gradient(180deg, rgba(15,22,40,.82), rgba(10,14,27,.90));border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 40px rgba(0,0,0,.22);color:#eef5ff;}
.hpgf-sdocs-head{font-size:28px;font-weight:900;letter-spacing:.02em;}
.hpgf-sdocs-sub{margin-top:8px;color:#c7d4ea;line-height:1.6;font-size:14px;}
.hpgf-sdocs-list{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
.hpgf-sdocs-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);}
.hpgf-sdocs-main{min-width:0;flex:1 1 auto;}
.hpgf-sdocs-title{font-size:16px;font-weight:900;color:#fff;}
.hpgf-sdocs-meta{margin-top:4px;font-size:12px;color:#9eb2cf;}
.hpgf-sdocs-note{margin-top:6px;font-size:13px;color:#dce8fb;line-height:1.5;}
.hpgf-sdocs-btn{appearance:none;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;padding:11px 16px;font-weight:800;cursor:pointer;text-decoration:none;}
.hpgf-sdocs-btn:hover{background:rgba(255,255,255,.11);}
.hpgf-sdocs-btn--primary{background:linear-gradient(135deg, rgba(0,181,165,.34), rgba(142,83,189,.26));}
.hpgf-sdocs-modal{position:fixed;inset:0;z-index:99999;background:rgba(5,8,16,.72);display:flex;align-items:center;justify-content:center;padding:20px;}
.hpgf-sdocs-modal[hidden]{display:none !important;}
.hpgf-sdocs-modalbox{position:relative;width:min(540px,100%);padding:24px;border-radius:28px;background:linear-gradient(180deg, rgba(15,22,40,.96), rgba(10,14,27,.98));border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.42);color:#eef5ff;}
.hpgf-sdocs-close{position:absolute;top:12px;right:14px;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:26px;line-height:1;cursor:pointer;}
.hpgf-sdocs-modalhead{font-size:24px;font-weight:900;}
.hpgf-sdocs-modalsub{margin-top:8px;color:#c7d4ea;line-height:1.6;font-size:14px;}
.hpgf-sdocs-current{margin-top:12px;color:#8fe7dd;font-weight:700;}
.hpgf-sdocs-step{margin-top:16px;display:flex;flex-direction:column;gap:12px;}
.hpgf-sdocs-label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#dce8fb;font-weight:700;}
.hpgf-sdocs-label input{border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;padding:14px 16px;font-size:15px;outline:none;}
.hpgf-sdocs-label input::placeholder{color:#9eb2cf;}
.hpgf-sdocs-status{margin-top:14px;min-height:24px;font-size:13px;line-height:1.5;color:#cfe6ff;}
.hpgf-sdocs-status.is-error{color:#ffb1b1;}
.hpgf-sdocs-status.is-ok{color:#bdf4d7;}
body.hpgf-sdocs-open{overflow:hidden;}
@media (max-width:760px){
  .hpgf-sdocs-item{flex-direction:column;align-items:flex-start;}
  .hpgf-sdocs-btn{width:100%;text-align:center;}
  .hpgf-sdocs{padding:18px;border-radius:22px;}
  .hpgf-sdocs-modalbox{padding:20px;border-radius:22px;}
}