/* ==========================================================
   SCHULSPANISCH.DE
   GRAMMATIK-MASTER 2026

   Referenzseite:
   regelmäßige -ar Verben

   Aufbau:
   01 Tokens
   02 Reset / Basis
   03 Shell / Typografie
   04 Hero
   05 Video
   06 Lernbücher
   07 Trainingsbereich
   08 Spickzettel
   09 Lernstufen
   10 Stage Panels
   11 Accordion
   12 Aufgaben
   13 Inputs / Selects
   14 Feedback
   15 Lückentext / Lesen
   16 Selfcheck / Transfer
   17 Buttons
   18 Lehrkräfte
   19 Abschluss / Social
   20 Tablet
   21 Desktop
   22 Mobile
   23 Dark Mode
   24 Accessibility

   Mobile first.
   ========================================================== */


/* ==========================================================
   01. DESIGN TOKENS
   ========================================================== */

.sg-page {
  --sg-bg:
    #f4f7fa;

  --sg-bg-soft:
    #f8fafc;

  --sg-bg-blue:
    #eef5fc;

  --sg-surface:
    #ffffff;

  --sg-surface-soft:
    #f7f9fb;

  --sg-text:
    #1f2024;

  --sg-text-soft:
    #5f646c;

  --sg-muted:
    #81868e;

  --sg-border:
    rgba(31, 32, 36, 0.09);

  --sg-border-soft:
    rgba(31, 32, 36, 0.065);

  --sg-border-strong:
    rgba(31, 32, 36, 0.14);

  --sg-blue:
    #336fa8;

  --sg-blue-hover:
    #285f94;

  --sg-blue-soft:
    #eaf3fc;

  --sg-blue-surface:
    #eef6fd;

  --sg-green:
    #278955;

  --sg-green-soft:
    #edf8f1;

  --sg-red:
    #c85151;

  --sg-red-soft:
    #fff1f1;

  --sg-purple:
    #75539b;

  --sg-purple-soft:
    #f4eef9;

  --sg-radius-xs:
    8px;

  --sg-radius-sm:
    11px;

  --sg-radius:
    16px;

  --sg-radius-lg:
    22px;

  --sg-radius-xl:
    28px;

  --sg-shadow-soft:
    0 8px 28px rgba(34, 53, 76, 0.045);

  --sg-shadow:
    0 18px 50px rgba(34, 53, 76, 0.075);

  position: relative;

  width: 100%;

  overflow-x: clip;

  background:
    var(--sg-bg);

  color:
    var(--sg-text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Segoe UI",
    sans-serif;

  font-size: 16px;
  line-height: 1.6;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


/* ==========================================================
   02. RESET / BASIS
   ========================================================== */

.sg-page *,
.sg-page *::before,
.sg-page *::after {
  box-sizing: border-box;
}


.sg-page img {
  display: block;

  max-width: 100%;
}


.sg-page button,
.sg-page input,
.sg-page select,
.sg-page textarea {
  font:
    inherit;
}


.sg-page button,
.sg-page a {
  -webkit-tap-highlight-color:
    transparent;
}


.sg-page button {
  touch-action:
    manipulation;
}


/* ==========================================================
   03. SHELL / TYPOGRAFIE
   ========================================================== */

.sg-shell {
  width:
    min(
      calc(100% - 28px),
      1180px
    );

  margin-inline:
    auto;
}


.sg-shell--reading {
  max-width:
    960px;
}


.sg-section {
  padding:
    58px 0;
}


.sg-eyebrow,
.sg-mini-eyebrow,
.sg-stage-label {
  margin:
    0 0 7px;

  color:
    var(--sg-blue);

  font-size:
    0.74rem;

  font-weight:
    760;

  letter-spacing:
    0.085em;

  line-height:
    1.25;

  text-transform:
    uppercase;
}


.sg-mini-eyebrow {
  font-size:
    0.67rem;
}


.sg-section-head {
  margin-bottom:
    25px;
}


.sg-section-head h2 {
  margin:
    0;

  font-size:
    clamp(
      2rem,
      8vw,
      3rem
    );

  line-height:
    1.04;

  letter-spacing:
    -0.045em;
}


.sg-section-head > p:last-child {
  max-width:
    680px;

  margin:
    11px 0 0;

  color:
    var(--sg-text-soft);

  font-size:
    0.98rem;

  line-height:
    1.65;
}


.sg-text-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  width:
    fit-content;

  color:
    var(--sg-blue);

  text-decoration:
    none;

  font-size:
    0.86rem;

  font-weight:
    670;
}


/* ==========================================================
   04. HERO
   ========================================================== */

.sg-hero {
  padding:
    24px 0 60px;

  background:
    linear-gradient(
      155deg,
      #f8fafc 0%,
      #eef5fb 54%,
      #f7f9fb 100%
    );
}


.sg-hero__inner {
  display:
    grid;

  gap:
    34px;
}


.sg-back-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    28px;

  color:
    var(--sg-muted);

  text-decoration:
    none;

  font-size:
    0.88rem;

  font-weight:
    620;
}


.sg-back-link:hover {
  color:
    var(--sg-blue);
}


.sg-hero h1 {
  max-width:
    800px;

  margin:
    0;

  font-size:
    clamp(
      3rem,
      13vw,
      5.1rem
    );

  line-height:
    0.95;

  letter-spacing:
    -0.055em;
}


.sg-hero__lead {
  max-width:
    680px;

  margin:
    19px 0 0;

  color:
    var(--sg-text-soft);

  font-size:
    1.05rem;

  line-height:
    1.68;
}


.sg-hero__facts {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    22px;
}


.sg-hero__facts > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    6px 10px;

  background:
    rgba(255, 255, 255, 0.7);

  border:
    1px solid var(--sg-border-soft);

  border-radius:
    999px;

  color:
    var(--sg-text-soft);

  font-size:
    0.75rem;

  font-weight:
    560;
}


.sg-primary-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  width:
    fit-content;

  min-width:
    174px;

  min-height:
    48px;

  margin-top:
    26px;

  padding:
    0 17px;

  background:
    #202124;

  color:
    #fff;

  border-radius:
    14px;

  text-decoration:
    none;

  font-size:
    0.9rem;

  font-weight:
    650;

  transition:
    transform 150ms ease,
    background 150ms ease;
}


.sg-hero__visual {
  display:
    flex;

  justify-content:
    center;
}


/* ==========================================================
   HERO VIDEO
   ========================================================== */

.sg-hero-video {
  position: relative;

  display: block;

  width: min(100%, 420px);

  padding: 0;

  overflow: hidden;

  aspect-ratio: 4 / 3;

  background: #151618;

  border: 0;
  border-radius: 26px;

  box-shadow:
    0 20px 52px rgba(31, 48, 70, 0.11);

  cursor: pointer;
}


.sg-hero-video__poster {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.sg-hero-video__veil {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(10, 14, 20, 0.05) 30%,
      rgba(10, 14, 20, 0.48) 100%
    );
}


.sg-hero-video__play {
  position: absolute;

  left: 22px;
  bottom: 22px;

  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;

  padding-left: 3px;

  background: rgba(255, 255, 255, 0.94);
  color: #202124;

  border-radius: 50%;

  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.22);

  font-size: 1rem;

  transition:
    transform 180ms ease,
    background 180ms ease;
}


.sg-hero-video__label {
  position: absolute;

  left: 94px;
  bottom: 25px;

  color: #fff;

  text-align: left;
}


.sg-hero-video__label strong,
.sg-hero-video__label small {
  display: block;
}


.sg-hero-video__label strong {
  font-size: 0.9rem;
  font-weight: 700;
}


.sg-hero-video__label small {
  margin-top: 1px;

  opacity: 0.78;

  font-size: 0.7rem;
}


/* ==========================================================
   VIDEO MODAL
   ========================================================== */

.sg-video-modal {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: grid;

  place-items: center;

  padding: 24px;
}


.sg-video-modal[hidden] {
  display: none !important;
}


.sg-video-modal__backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(8, 10, 13, 0.78);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


.sg-video-modal__dialog {
  position: relative;
  z-index: 1;

  width: min(92vw, 1050px);
}


.sg-video-modal__frame {
  position: relative;

  width: 100%;

  overflow: hidden;

  aspect-ratio: 16 / 9;

  background: #000;

  border-radius: 20px;

  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.46);
}


.sg-video-modal__frame iframe {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}

@media (min-width: 1080px) {

  .sg-video-modal__dialog {
    width: min(88vw, 1050px);
  }

}

.sg-video-modal__close {
  position: absolute;

  z-index: 2;

  top: -46px;
  right: 0;

  display: grid;

  place-items: center;

  width: 38px;
  height: 38px;

  padding: 0;

  background:
    rgba(255, 255, 255, 0.12);

  color: #fff;

  border:
    1px solid rgba(255, 255, 255, 0.14);

  border-radius: 50%;

  cursor: pointer;

  font-size: 1.45rem;
  font-weight: 300;

  line-height: 1;
}


@media (hover: hover) and (pointer: fine) {

  .sg-hero-video:hover
  .sg-hero-video__play {
    transform:
      translate(-50%, -50%)
      scale(1.06);

    background: #fff;
  }

}


/* Mobile */

@media (max-width: 759px) {

  .sg-video-modal {
    padding: 14px;
  }


  .sg-video-modal__frame {
    border-radius: 14px;
  }


  .sg-video-modal__close {
    top: -43px;
  }

}


/* Dark Mode */

@media (prefers-color-scheme: dark) {

  .sg-hero-video {
    box-shadow:
      0 20px 52px rgba(0, 0, 0, 0.28);
  }
.sg-primary-button {
  background: #f1f3f5;
  color: #17191c;
}

.sg-primary-button:hover {
  background: #ffffff;
  color: #111214;
}
}

/* ==========================================================
   05. VIDEO
   ========================================================== */

.sg-video-section {
  background:
    var(--sg-surface);
}


.sg-video-frame {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    16 / 9;

  overflow:
    hidden;

  background:
    #151618;

  border-radius:
    22px;
}


.sg-video-modal__frame iframe {
  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: 100% !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  transform: none !important;
}


.sg-video-poster {
  position:
    absolute;

  inset:
    0;

  overflow:
    hidden;
}


.sg-video-poster > img {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;
}


.sg-video-poster__veil {
  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      rgba(12, 16, 22, 0.13),
      rgba(12, 16, 22, 0.55)
    );
}


.sg-video-load {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  max-width:
    calc(100% - 30px);

  padding:
    11px 15px;

  transform:
    translate(-50%, -50%);

  background:
    rgba(255, 255, 255, 0.94);

  color:
    #202124;

  border:
    0;

  border-radius:
    15px;

  box-shadow:
    0 11px 34px rgba(0, 0, 0, 0.18);

  cursor:
    pointer;
}


.sg-video-play {
  display:
    grid;

  place-items:
    center;

  flex:
    0 0 40px;

  width:
    40px;

  height:
    40px;

  padding-left:
    2px;

  background:
    #202124;

  color:
    #fff;

  border-radius:
    50%;

  font-size:
    0.84rem;
}


.sg-video-load strong,
.sg-video-load small {
  display:
    block;

  text-align:
    left;
}


.sg-video-load strong {
  font-size:
    0.89rem;
}


.sg-video-load small {
  margin-top:
    1px;

  color:
    #70747b;

  font-size:
    0.68rem;
}


/* ==========================================================
   06. LERNBUCH-CAROUSEL
   ========================================================== */

.sg-books-section {
  padding-top:
    68px;

  padding-bottom:
    68px;

  background:
    linear-gradient(
      180deg,
      #f7f9fb 0%,
      #eef4fa 100%
    );
}


.sg-section-head--books {
  display:
    flex;

  flex-direction:
    column;

  gap:
    15px;
}


.sg-book-carousel {
  position:
    relative;
}


.sg-book-track {
  display:
    grid;

  grid-auto-flow:
    column;

  grid-auto-columns:
    minmax(
      235px,
      78%
    );

  gap:
    12px;

  overflow-x:
    auto;

  padding:
    4px 3px 13px;

  scroll-snap-type:
    x mandatory;

  scroll-behavior:
    smooth;

  scrollbar-width:
    none;

  -webkit-overflow-scrolling:
    touch;
}


.sg-book-track::-webkit-scrollbar {
  display:
    none;
}


.sg-book-card {
  display:
    flex;

  flex-direction:
    column;

  min-height:
    205px;

  padding:
    17px;

  scroll-snap-align:
    start;

  background:
    rgba(255, 255, 255, 0.7);

  border:
    1px solid var(--sg-border-soft);

  border-radius:
    17px;
}


.sg-book-card__top {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.sg-book-card__top img {
  flex:
    0 0 52px;

  width:
    52px;

  height:
    52px;

  object-fit:
    cover;

  border-radius:
    13px;
}


.sg-book-kicker {
  padding:
    4px 8px;

  background:
    rgba(51, 111, 168, 0.08);

  color:
    var(--sg-blue);

  border-radius:
    999px;

  font-size:
    0.62rem;

  font-weight:
    680;
}


.sg-book-card h3 {
  margin:
    16px 0 5px;

  font-size:
    0.98rem;

  line-height:
    1.22;

  letter-spacing:
    -0.02em;
}


.sg-book-card p {
  margin:
    0;

  color:
    var(--sg-muted);

  font-size:
    0.76rem;

  line-height:
    1.45;
}


.sg-book-card > a {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  margin-top:
    auto;

  padding-top:
    15px;

  color:
    var(--sg-blue);

  text-decoration:
    none;

  font-size:
    0.75rem;

  font-weight:
    670;
}


.sg-carousel-arrow {
  display:
    none;
}


/* ==========================================================
   07. TRAININGSBEREICH
   ========================================================== */

.sg-training-section {
  padding:
    66px 0 72px;

  scroll-margin-top:
    24px;

  background:
    linear-gradient(
      180deg,
      #f4f7fa 0%,
      #eef4fa 100%
    );
}


.sg-training-intro {
  max-width:
    760px;
}


.sg-training-layout {
  display:
    grid;

  gap:
    28px;
}


.sg-training-main {
  min-width:
    0;
}


/*
   Wichtig:
   Der große weiße "KI-Container" wird optisch aufgelöst.
*/

.sg-exercise-shell {
  min-width:
    0;

  overflow:
    visible;

  background:
    transparent;

  border:
    0;

  border-radius:
    0;

  box-shadow:
    none;
}


/* ==========================================================
   08. SPICKZETTEL
   ========================================================== */

.sg-cheatsheet {
  margin:
    0;

  padding:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(234, 244, 253, 0.92),
      rgba(244, 249, 253, 0.86)
    );

  border:
    1px solid rgba(51, 111, 168, 0.12);

  border-radius:
    20px;

  box-shadow:
    none;
}


.sg-cheatsheet__intro h3 {
  margin:
    0;

  font-size:
    1.35rem;

  line-height:
    1.16;

  letter-spacing:
    -0.028em;
}


.sg-cheatsheet__intro > p:last-child {
  max-width:
    650px;

  margin:
    6px 0 0;

  color:
    var(--sg-text-soft);

  font-size:
    0.87rem;
}


.sg-formula {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    7px;

  width:
    fit-content;

  margin-top:
    15px;

  padding:
    8px 11px;

  background:
    rgba(255, 255, 255, 0.7);

  border:
    1px solid rgba(51, 111, 168, 0.09);

  border-radius:
    10px;

  font-size:
    0.84rem;
}


.sg-ending-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    7px;

  margin-top:
    12px;
}


.sg-ending-grid > div {
  padding:
    9px 10px;

  background:
    rgba(255, 255, 255, 0.64);

  border:
    1px solid rgba(51, 111, 168, 0.05);

  border-radius:
    10px;
}


.sg-ending-grid span,
.sg-ending-grid small {
  display:
    block;
}


.sg-ending-grid span {
  color:
    var(--sg-muted);

  font-size:
    0.66rem;
}


.sg-ending-grid strong {
  display:
    block;

  margin:
    1px 0;

  color:
    var(--sg-blue);

  font-size:
    0.96rem;
}


.sg-ending-grid small {
  color:
    var(--sg-text-soft);

  font-size:
    0.69rem;
}


/* ==========================================================
   09. LERNSTUFEN / NAVIGATION
   ========================================================== */

.sg-stage-tabs {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    2px;

  margin-top:
    22px;

  padding:
    0;

  background:
    transparent;

  border:
    0;

  border-bottom:
    1px solid var(--sg-border);
}


.sg-stage-tab {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;

  min-height:
    58px;

  padding:
    9px 8px 12px;

  background:
    transparent;

  color:
    var(--sg-text-soft);

  border:
    0;

  cursor:
    pointer;

  text-align:
    left;

  transition:
    color 150ms ease,
    background 150ms ease;
}


.sg-stage-tab::after {
  content:
    "";

  position:
    absolute;

  left:
    8px;

  right:
    8px;

  bottom:
    -1px;

  height:
    2px;

  background:
    transparent;

  border-radius:
    999px 999px 0 0;

  transition:
    background 150ms ease;
}


.sg-stage-tab > span:first-child {
  display:
    grid;

  place-items:
    center;

  flex:
    0 0 28px;

  width:
    28px;

  height:
    28px;

  background:
    rgba(92, 100, 111, 0.08);

  color:
    var(--sg-muted);

  border-radius:
    50%;

  font-size:
    0.7rem;

  font-weight:
    760;
}


.sg-stage-tab > span:last-child {
  min-width:
    0;

  font-size:
    0.78rem;

  font-weight:
    680;

  line-height:
    1.15;
}


.sg-stage-tab small {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(--sg-muted);

  font-size:
    0.59rem;

  font-weight:
    560;
}


.sg-stage-tab.is-active {
  color:
    var(--sg-text);
}


.sg-stage-tab.is-active::after {
  background:
    var(--sg-blue);
}


.sg-stage-tab.is-active > span:first-child {
  background:
    var(--sg-blue-soft);

  color:
    var(--sg-blue);
}


.sg-stage-tab.is-complete > span:first-child {
  background:
    var(--sg-green-soft);

  color:
    var(--sg-green);
}


/* ==========================================================
   10. STAGE PANELS
   ========================================================== */

.sg-stage-panel {
  padding:
    30px 0 0;
}


.sg-stage-panel[hidden] {
  display:
    none;
}


.sg-stage-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    20px;
}


.sg-stage-head h3 {
  margin:
    0;

  font-size:
    1.42rem;

  line-height:
    1.15;

  letter-spacing:
    -0.03em;
}


.sg-stage-head p:not(.sg-stage-label) {
  max-width:
    660px;

  margin:
    7px 0 0;

  color:
    var(--sg-text-soft);

  font-size:
    0.87rem;

  line-height:
    1.55;
}


.sg-stage-badge {
  flex:
    0 0 auto;

  padding:
    5px 9px;

  background:
    var(--sg-blue-soft);

  color:
    var(--sg-blue);

  border-radius:
    999px;

  font-size:
    0.64rem;

  font-weight:
    720;
}


/* ==========================================================
   11. ACCORDION
   ========================================================== */

.sg-exercise-stack {
  display:
    grid;

  gap:
    9px;

  margin-top:
    18px;
}


.sg-exercise-block {
  overflow:
    hidden;

  background:
    rgba(255, 255, 255, 0.54);

  border:
    1px solid var(--sg-border);

  border-radius:
    14px;

  box-shadow:
    none;
}


.sg-exercise-block.is-open {
  background:
    rgba(255, 255, 255, 0.76);

  border-color:
    rgba(51, 111, 168, 0.15);
}


.sg-exercise-toggle {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    30px minmax(0, 1fr) 16px;

  align-items:
    center;

  gap:
    10px;

  min-height:
    62px;

  padding:
    11px 13px;

  background:
    transparent;

  color:
    var(--sg-text);

  border:
    0;

  text-align:
    left;

  cursor:
    pointer;
}


.sg-exercise-number {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  background:
    rgba(51, 111, 168, 0.09);

  color:
    var(--sg-blue);

  border-radius:
    50%;

  font-size:
    0.71rem;

  font-weight:
    760;
}


.sg-exercise-toggle__copy {
  min-width:
    0;

  display:
    grid;

  gap:
    1px;
}


.sg-exercise-toggle__copy small {
  color:
    var(--sg-muted);

  font-size:
    0.62rem;

  font-weight:
    620;

  line-height:
    1.2;
}


.sg-exercise-toggle__copy strong {
  color:
    inherit;

  font-size:
    0.88rem;

  line-height:
    1.23;
}


.sg-exercise-meta {
  display:
    none;

  color:
    var(--sg-muted);

  font-size:
    0.67rem;

  font-weight:
    610;

  white-space:
    nowrap;
}


.sg-exercise-chevron {
  color:
    var(--sg-muted);

  font-size:
    0.98rem;

  line-height:
    1;

  transition:
    transform 180ms ease;
}


.sg-exercise-toggle[aria-expanded="true"]
.sg-exercise-chevron {
  transform:
    rotate(180deg);
}


.sg-exercise-content {
  padding:
    2px 14px 18px;

  border-top:
    1px solid var(--sg-border-soft);
}


.sg-exercise-content[hidden] {
  display:
    none !important;
}


.sg-exercise-instruction {
  margin:
    14px 0 17px;

  color:
    var(--sg-muted);

  font-size:
    0.81rem;

  line-height:
    1.55;
}


/* ==========================================================
   12. AUFGABEN
   ========================================================== */

.sg-task-list {
  border-top:
    1px solid var(--sg-border-soft);
}


.sg-task {
  display:
    grid;

  grid-template-columns:
    26px minmax(0, 1fr);

  gap:
    8px 10px;

  align-items:
    center;

  padding:
    14px 0;

  border-bottom:
    1px solid var(--sg-border-soft);
}


.sg-task-letter {
  display:
    grid;

  place-items:
    center;

  width:
    24px;

  height:
    24px;

  background:
    rgba(91, 98, 108, 0.055);

  color:
    var(--sg-muted);

  border-radius:
    50%;

  font-size:
    0.67rem;

  font-weight:
    750;

  text-transform:
    lowercase;
}


.sg-task-prompt {
  min-width:
    0;

  color:
    var(--sg-text);

  font-size:
    0.88rem;

  line-height:
    1.5;
}


.sg-task-prompt strong {
  display:
    inline;

  margin-left:
    3px;

  color:
    var(--sg-blue);
}


.sg-task-prompt small {
  display:
    block;

  margin-top:
    3px;

  color:
    var(--sg-muted);

  font-size:
    0.7rem;
}


.sg-task-prompt s {
  color:
    var(--sg-muted);

  text-decoration-color:
    rgba(200, 81, 81, 0.58);

  text-decoration-thickness:
    1.5px;
}


.sg-field {
  grid-column:
    2 / -1;

  min-width:
    0;
}


/* ==========================================================
   13. INPUTS / SELECTS
   ========================================================== */

.sg-field input,
.sg-field select,
.sg-selfcheck-item textarea,
.sg-free-transfer textarea {
  color:
    var(--sg-text);

  background:
    rgba(255, 255, 255, 0.78);

  border:
    1.4px solid rgba(117, 126, 138, 0.28);

  outline:
    none;

  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}


/* Normale kurze Verbform */

.sg-field--short {
  width:
    min(100%, 205px);
}


.sg-field--short input {
  width:
    100%;
}


/* Normales Input */

.sg-field input {
  display:
    block;

  width:
    min(100%, 320px);

  min-height:
    43px;

  padding:
    8px 11px;

  border-radius:
    10px;

  font-size:
    16px;
}


/* Sehr kurze Antworten / Endungen */

.sg-task-list--endings
.sg-field--short {
  width:
    105px;
}


/*
   Falls wir später im HTML gezielt
   .sg-field--tiny verwenden:
*/

.sg-field--tiny {
  width:
    105px;
}


.sg-field--medium {
  width:
    min(100%, 290px);
}


.sg-field--wide {
  width:
    100%;
}


.sg-field--wide input {
  width:
    100%;
  max-width:
    none;
}


/* Select */

.sg-field--select {
  width:
    min(100%, 285px);
}


.sg-field--select select {
  width:
    100%;

  min-height:
    43px;

  padding:
    0 38px 0 11px;

  border-radius:
    10px;

  font-size:
    0.82rem;
}


/* Fokus */

.sg-field input:focus,
.sg-field select:focus,
.sg-selfcheck-item textarea:focus,
.sg-free-transfer textarea:focus {
  border-color:
    rgba(51, 111, 168, 0.53);

  box-shadow:
    0 0 0 3px rgba(51, 111, 168, 0.09);
}


/* Status */

.sg-field input.is-correct,
.sg-field select.is-correct {
  background:
    var(--sg-green-soft);

  border-color:
    rgba(39, 137, 85, 0.64);
}


.sg-field input.is-wrong,
.sg-field select.is-wrong {
  background:
    var(--sg-red-soft);

  border-color:
    rgba(200, 81, 81, 0.72);
}


/* ==========================================================
   14. FEEDBACK / LÖSUNGEN
   ========================================================== */

.sg-solution {
  display:
    block;

  margin-top:
    5px;

  color:
    var(--sg-red);

  font-size:
    0.73rem;

  font-weight:
    620;

  line-height:
    1.35;
}


/*
   Das JS schreibt aktuell "Lösung: ...".
   Bis wir das JS anpassen, entfernen wir das Wort nicht
   zuverlässig per CSS.
   Dafür ändern wir anschließend eine einzige JS-Zeile.
*/


.sg-result {
  min-height:
    20px;

  margin-top:
    9px;

  color:
    var(--sg-text-soft);

  text-align:
    right;

  font-size:
    0.75rem;

  font-weight:
    560;
}


/* ==========================================================
   15. LÜCKENTEXT / LESEN
   ========================================================== */

.sg-reading-card {
  margin:
    13px 0 19px;

  padding:
    18px;

  background:
    rgba(237, 246, 253, 0.63);

  border:
    1px solid rgba(51, 111, 168, 0.1);

  border-radius:
    15px;
}


.sg-reading-card p {
  margin:
    0;

  font-size:
    0.87rem;

  line-height:
    1.75;
}


.sg-reading-kicker {
  margin-bottom:
    8px !important;

  color:
    var(--sg-blue);

  font-size:
    0.67rem !important;

  font-weight:
    750;

  letter-spacing:
    0.075em;

  text-transform:
    uppercase;
}


.sg-field--inline {
  display:
    inline-flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  width:
    auto;

  margin:
    2px 4px;

  vertical-align:
    middle;
}


.sg-field--inline input {
  width:
    118px;

  min-height:
    36px;

  padding:
    5px 8px;

  border-radius:
    9px;

  font-size:
    0.82rem;
}


/*
   Wichtig:
   Feedback bleibt am Feld und erzeugt
   keinen riesigen horizontalen Leerraum.
*/

.sg-field--inline .sg-solution {
  width:
    max-content;

  max-width:
    150px;

  margin-top:
    2px;

  font-size:
    0.66rem;

  line-height:
    1.15;
}


.sg-cloze-text p {
  line-height:
    2.3;
}


.sg-subtask-title {
  margin:
    23px 0 10px;

  color:
    var(--sg-blue);

  font-size:
    0.7rem;

  font-weight:
    750;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.sg-reading-questions,
.sg-language-focus {
  margin-top:
    18px;
}


/* ==========================================================
   16. SELFCHECK / TRANSFER
   ========================================================== */

.sg-selfcheck-group {
  display:
    grid;

  gap:
    9px;

  margin-top:
    17px;
}


.sg-selfcheck-item {
  display:
    grid;

  gap:
    8px;

  padding:
    14px;

  background:
    rgba(255, 255, 255, 0.42);

  border:
    1px solid var(--sg-border-soft);

  border-radius:
    12px;
}


.sg-selfcheck-item label {
  color:
    var(--sg-text);

  font-size:
    0.82rem;

  font-weight:
    550;

  line-height:
    1.5;
}


.sg-selfcheck-item label
.sg-task-letter {
  display:
    inline-grid;

  margin-right:
    8px;

  vertical-align:
    middle;
}


.sg-selfcheck-item textarea,
.sg-free-transfer textarea {
  width:
    100%;

  min-height:
    72px;

  padding:
    10px 11px;

  resize:
    vertical;

  border-radius:
    10px;

  font-size:
    16px;

  line-height:
    1.5;
}


.sg-model-answer {
  padding:
    10px 11px;

  background:
    rgba(51, 111, 168, 0.055);

  color:
    var(--sg-text-soft);

  border-left:
    2px solid rgba(51, 111, 168, 0.32);

  border-radius:
    7px;

  font-size:
    0.74rem;

  line-height:
    1.5;
}


.sg-model-answer[hidden] {
  display:
    none !important;
}


.sg-selfcheck-panel ul {
  margin:
    8px 0 11px;

  padding-left:
    18px;
}


.sg-selfcheck-panel li + li {
  margin-top:
    3px;
}


.sg-free-transfer {
  display:
    flex;

  gap:
    10px;

  margin-top:
    12px;

  padding:
    14px;

  background:
    rgba(117, 83, 155, 0.055);

  border-radius:
    13px;
}


.sg-free-transfer__icon {
  flex:
    0 0 auto;

  font-size:
    0.95rem;
}


.sg-free-transfer h4 {
  margin:
    0;

  font-size:
    1.02rem;
}


/* ==========================================================
   17. BUTTONS
   ========================================================== */

.sg-exercise-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  margin-top:
    19px;
}


.sg-check-button,
.sg-reset-button,
.sg-model-button {
  width:
    auto;

  min-width:
    0;

  min-height:
    40px;

  margin:
    0;

  padding:
    0 14px;

  border-radius:
    11px;

  cursor:
    pointer;

  font-size:
    0.74rem;

  font-weight:
    650;

  appearance:
    none;

  -webkit-appearance:
    none;
}


.sg-check-button {
  background:
    #202124;

  color:
    #fff;

  border:
    1px solid #202124;
}


.sg-reset-button {
  background:
    rgba(255, 255, 255, 0.2);

  color:
    var(--sg-muted);

  border:
    1px solid var(--sg-border-strong);
}


.sg-model-button {
  background:
    transparent;

  color:
    var(--sg-blue);

  border:
    1px solid var(--sg-border-strong);
}


/* ==========================================================
   18. LEHRKRÄFTE
   ========================================================== */

.sg-teacher-area {
  min-width:
    0;

  padding:
    0;

  background:
    transparent;

  border:
    0;

  border-radius:
    0;

  box-shadow:
    none;
}


.sg-teacher-area__head {
  margin-bottom:
    16px;
}


.sg-teacher-area__head h2 {
  margin:
    0;

  font-size:
    1.2rem;

  line-height:
    1.1;

  letter-spacing:
    -0.035em;
}


.sg-teacher-area__head > p:last-child {
  margin:
    6px 0 0;

  color:
    var(--sg-muted);

  font-size:
    0.76rem;

  line-height:
    1.45;
}


.sg-upgrade-grid,
.sg-teacher-area #upgradeGrid {
  display:
    grid;

  gap:
    0;

  width:
    100%;
}


.sg-teacher-area #upgradeGrid > * {
  min-width:
    0;
}


/*
   Bilder innerhalb der dynamisch geladenen Produkte.
*/

.sg-teacher-area #upgradeGrid img {
  max-width:
    100%;

  height:
    auto;
}


/* ==========================================================
   19. ABSCHLUSS / SOCIAL
   ========================================================== */

.sg-trust {
  padding:
    32px 0 40px;

  background:
    #f4f6f8;

  border-top:
    1px solid var(--sg-border-soft);
}


.sg-social-line {
  margin:
    0;

  color:
    var(--sg-muted);

  text-align:
    center;

  font-size:
    0.76rem;
}


.sg-social-line a {
  color:
    var(--sg-blue);

  text-decoration:
    none;

  font-weight:
    670;
}


/* ==========================================================
   20. TABLET
   760px+
   ========================================================== */

@media (min-width: 760px) {

  .sg-shell {
    width:
      min(
        calc(100% - 48px),
        1180px
      );
  }


  .sg-section {
    padding:
      74px 0;
  }


  /* HERO */

  .sg-hero {
    padding:
      52px 0 74px;
  }


  .sg-hero__inner {
    grid-template-columns:
      minmax(0, 1.06fr)
      minmax(290px, 0.94fr);

    gap:
      44px;

    align-items:
      center;
  }


  .sg-hero h1 {
    font-size:
      clamp(
        4rem,
        7vw,
        5.7rem
      );
  }


  /* BÜCHER */

  .sg-section-head--books {
    flex-direction:
      row;

    align-items:
      end;

    justify-content:
      space-between;
  }


  .sg-book-track {
    grid-auto-columns:
      minmax(
        210px,
        31%
      );
  }


  /* SPICKZETTEL */

  .sg-cheatsheet {
    padding:
      22px;
  }


  .sg-ending-grid {
    grid-template-columns:
      repeat(
        6,
        minmax(0, 1fr)
      );
  }


  /* TABS */

  .sg-stage-tabs {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );

    gap:
      0;
  }


  .sg-stage-tab {
    min-height:
      68px;

    padding:
      10px 11px 13px;
  }


  .sg-stage-tab > span:last-child {
    font-size:
      0.82rem;
  }


  /* TASKS */

  .sg-task {
    grid-template-columns:
      28px minmax(0, 1fr) auto;

    gap:
      10px 14px;

    padding:
      15px 0;
  }


  .sg-field {
    grid-column:
      auto;

    justify-self:
      end;
  }


  .sg-task-prompt {
    font-size:
      0.9rem;
  }


  .sg-field--short {
    width:
      190px;
  }


  .sg-field--select {
    width:
      270px;
  }


  .sg-field input {
    width:
      100%;
  }


  /* LÜCKENTEXT */

  .sg-reading-card {
    padding:
      21px 22px;
  }


  .sg-field--inline {
    display:
      inline-flex;

    vertical-align:
      middle;
  }


  /* BUTTONS */

  .sg-check-button,
  .sg-reset-button,
  .sg-model-button {
    min-height:
      41px;

    padding-inline:
      15px;
  }


  /* LEHRKRÄFTE
   
     Tablet bereits zweispaltig.
     Hauptbereich bleibt klar dominant.
  */

  .sg-training-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(220px, 28%);

    align-items:
      start;

    gap:
      24px;
  }


  .sg-teacher-area {
    padding-left:
      19px;

    border-left:
      1px solid var(--sg-border);
  }


  /*
     Die dynamisch geladenen Materialien werden
     kompakt als horizontale Liste dargestellt.
  */

  .sg-teacher-area #upgradeGrid > * {
    display:
      grid;

    grid-template-columns:
      68px minmax(0, 1fr);

    gap:
      10px;

    align-items:
      start;

    padding:
      13px 0;

    border-bottom:
      1px solid var(--sg-border-soft);

    border-radius:
      0;

    background:
      transparent;

    box-shadow:
      none;
  }


  .sg-teacher-area #upgradeGrid img {
    width:
      68px;

    max-height:
      96px;

    object-fit:
      cover;

    border-radius:
      7px;
  }

}


/* ==========================================================
   21. DESKTOP
   1080px+
   ========================================================== */

@media (min-width: 1080px) {

  .sg-training-layout {
    grid-template-columns:
      minmax(0, 1fr)
      250px;

    gap:
      30px;
  }


  .sg-teacher-area {
    position:
      sticky;

    top:
      84px;

    align-self:
      start;

    padding-left:
      20px;
  }


  .sg-teacher-area__head h2 {
    font-size:
      1.12rem;
  }


  .sg-teacher-area #upgradeGrid > * {
    grid-template-columns:
      72px minmax(0, 1fr);

    gap:
      11px;

    padding:
      14px 0;
  }


  .sg-teacher-area #upgradeGrid img {
    width:
      72px;

    max-height:
      102px;
  }


  .sg-book-track {
    grid-auto-columns:
      minmax(
        210px,
        23%
      );

    padding-inline:
      28px;
  }


  .sg-carousel-arrow {
    position:
      absolute;

    top:
      50%;

    z-index:
      2;

    display:
      grid;

    place-items:
      center;

    width:
      38px;

    height:
      38px;

    transform:
      translateY(-50%);

    background:
      rgba(255, 255, 255, 0.93);

    color:
      var(--sg-text);

    border:
      1px solid var(--sg-border);

    border-radius:
      50%;

    box-shadow:
      var(--sg-shadow-soft);

    cursor:
      pointer;
  }


  .sg-carousel-arrow--prev {
    left:
      -6px;
  }


  .sg-carousel-arrow--next {
    right:
      -6px;
  }


  .sg-exercise-meta {
    display:
      block;
  }


  .sg-exercise-toggle {
    grid-template-columns:
      30px minmax(0, 1fr) auto 16px;

    padding:
      12px 15px;
  }


  .sg-stage-head h3 {
    font-size:
      1.48rem;
  }

}


/* ==========================================================
   22. MOBILE
   bis 759px
   ========================================================== */

@media (max-width: 759px) {

  .sg-section-head h2 {
    font-size:
      clamp(
        1.95rem,
        9vw,
        2.55rem
      );
  }


  .sg-hero h1 {
    font-size:
      clamp(
        2.9rem,
        14vw,
        4.2rem
      );
  }


  .sg-primary-button {
    min-width:
      168px;
  }


  /* SPICKZETTEL */

  .sg-cheatsheet {
    padding:
      17px;
  }


  /* TABS */

  .sg-stage-tabs {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    row-gap:
      0;
  }


  .sg-stage-tab {
    padding:
      9px 5px 11px;
  }


  .sg-stage-tab::after {
    left:
      5px;

    right:
      5px;
  }


  /* STAGE HEAD */

  .sg-stage-head {
    gap:
      10px;
  }


  .sg-stage-head h3 {
    font-size:
      1.28rem;
  }


  .sg-stage-badge {
    padding:
      4px 8px;
  }


  /* TASKS */

  .sg-task {
    align-items:
      start;
  }


  .sg-field--short {
    width:
      min(
        72vw,
        200px
      );
  }


  .sg-task-list--endings
  .sg-field--short {
    width:
      100px;
  }


  .sg-field--select {
    width:
      min(
        100%,
        270px
      );
  }


  /* LÜCKENTEXT */

  .sg-reading-card {
    padding:
      15px;
  }


  .sg-cloze-text p {
    line-height:
      2.2;
  }


  .sg-field--inline input {
    width:
      104px;
  }


  .sg-field--inline .sg-solution {
    max-width:
      125px;
  }


  /* ACTIONS */

  .sg-exercise-actions {
    justify-content:
      center;
  }


  .sg-check-button,
  .sg-reset-button,
  .sg-model-button {
    min-height:
      39px;

    padding:
      0 12px;

    font-size:
      0.72rem;
  }


  /*
     LEHRKRÄFTE MOBILE

     Unter dem Lernbereich.
     Zwei Spalten, sauber und kompakt.
  */

  .sg-teacher-area {
    margin-top:
      14px;

    padding-top:
      25px;

    border-top:
      1px solid var(--sg-border);
  }


  .sg-teacher-area #upgradeGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}


.sg-teacher-area #upgradeGrid > * {
  display: grid;

  grid-template-columns:
    82px minmax(0, 1fr);

  gap: 13px;

  align-items: start;

  min-width: 0;

  padding:
    14px 0;

  background:
    transparent;

  border:
    0;

  border-bottom:
    1px solid var(--sg-border-soft);

  border-radius:
    0;

  box-shadow:
    none;
}


.sg-teacher-area #upgradeGrid img {
  width:
    82px;

  height:
    104px;

  aspect-ratio:
    auto;

  object-fit:
    cover;

  border-radius:
    7px;
}
}
/* Sehr kleine Geräte */

@media (max-width: 420px) {

  .sg-shell {
    width:
      min(
        calc(100% - 22px),
        1180px
      );
  }


  .sg-stage-tab {
    gap:
      6px;
  }


  .sg-stage-tab > span:first-child {
    width:
      25px;

    height:
      25px;

    flex-basis:
      25px;
  }


  .sg-stage-tab > span:last-child {
    font-size:
      0.72rem;
  }


  .sg-stage-tab small {
    font-size:
      0.54rem;
  }


  .sg-teacher-area #upgradeGrid {
    gap:
      8px;
  }

}


/* ==========================================================
   23. DARK MODE
   ========================================================== */

@media (prefers-color-scheme: dark) {

  .sg-page {
    --sg-bg:
      #17191c;

    --sg-bg-soft:
      #1b1d20;

    --sg-bg-blue:
      #1a222b;

    --sg-surface:
      #202226;

    --sg-surface-soft:
      #25282d;

    --sg-text:
      #f2f3f5;

    --sg-text-soft:
      #c4c8ce;

    --sg-muted:
      #969ca4;

    --sg-border:
      rgba(255, 255, 255, 0.08);

    --sg-border-soft:
      rgba(255, 255, 255, 0.055);

    --sg-border-strong:
      rgba(255, 255, 255, 0.13);

    --sg-blue:
      #85b6e8;

    --sg-blue-hover:
      #9bc4eb;

    --sg-blue-soft:
      rgba(92, 150, 209, 0.13);

    --sg-green:
      #65ba87;

    --sg-green-soft:
      rgba(51, 139, 89, 0.12);

    --sg-red:
      #e17a7a;

    --sg-red-soft:
      rgba(184, 74, 74, 0.12);

    --sg-purple:
      #c0a2df;

    --sg-purple-soft:
      rgba(123, 84, 165, 0.13);
  }


  .sg-hero {
    background:
      linear-gradient(
        155deg,
        #191c20 0%,
        #19232d 55%,
        #191b1f 100%
      );
  }


  .sg-hero__facts > span {
    background:
      rgba(255, 255, 255, 0.035);
  }


  .sg-video-section {
    background:
      #1a1c20;
  }


  .sg-books-section {
    background:
      linear-gradient(
        180deg,
        #191c20 0%,
        #19222b 100%
      );
  }


  .sg-book-card {
    background:
      rgba(255, 255, 255, 0.035);
  }


  .sg-training-section {
    background:
      linear-gradient(
        180deg,
        #191d21 0%,
        #18212a 100%
      );
  }


  .sg-cheatsheet {
    background:
      linear-gradient(
        145deg,
        rgba(29, 44, 59, 0.92),
        rgba(26, 34, 43, 0.91)
      );

    border-color:
      rgba(133, 182, 232, 0.12);
  }


  .sg-formula,
  .sg-ending-grid > div {
    background:
      rgba(255, 255, 255, 0.035);

    border-color:
      rgba(255, 255, 255, 0.045);
  }


  .sg-stage-tabs {
    border-bottom-color:
      rgba(255, 255, 255, 0.08);
  }


  .sg-stage-tab > span:first-child {
    background:
      rgba(255, 255, 255, 0.055);
  }


  .sg-exercise-block {
    background:
      rgba(255, 255, 255, 0.025);

    border-color:
      rgba(255, 255, 255, 0.065);
  }


  .sg-exercise-block.is-open {
    background:
      rgba(255, 255, 255, 0.04);

    border-color:
      rgba(133, 182, 232, 0.14);
  }


  .sg-field input,
  .sg-field select,
  .sg-selfcheck-item textarea,
  .sg-free-transfer textarea {
    background:
      rgba(255, 255, 255, 0.035);

    border-color:
      rgba(255, 255, 255, 0.12);
  }


  .sg-field input.is-correct,
  .sg-field select.is-correct {
    background:
      rgba(54, 142, 91, 0.13);

    border-color:
      rgba(101, 186, 135, 0.55);
  }


  .sg-field input.is-wrong,
  .sg-field select.is-wrong {
    background:
      rgba(184, 74, 74, 0.13);

    border-color:
      rgba(225, 122, 122, 0.57);
  }


  .sg-reading-card {
    background:
      rgba(31, 45, 58, 0.66);

    border-color:
      rgba(133, 182, 232, 0.1);
  }


  .sg-selfcheck-item {
    background:
      rgba(255, 255, 255, 0.022);

    border-color:
      rgba(255, 255, 255, 0.065);
  }


  .sg-model-answer {
    background:
      rgba(133, 182, 232, 0.065);

    border-left-color:
      rgba(133, 182, 232, 0.3);
  }


  .sg-free-transfer {
    background:
      rgba(120, 90, 160, 0.09);
  }


  .sg-reset-button,
  .sg-model-button {
    background:
      rgba(255, 255, 255, 0.025);
  }


  .sg-teacher-area {
    border-color:
      rgba(255, 255, 255, 0.08);
  }


  .sg-teacher-area #upgradeGrid > * {
    border-color:
      rgba(255, 255, 255, 0.06);
  }


  .sg-trust {
    background:
      #191b1e;

    border-top-color:
      rgba(255, 255, 255, 0.06);
  }


  .sg-carousel-arrow {
    background:
      rgba(35, 37, 41, 0.94);

    color:
      var(--sg-text);

    border-color:
      rgba(255, 255, 255, 0.08);
  }

}


/* ==========================================================
   24. HOVER / ACCESSIBILITY
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

  .sg-primary-button:hover {
    background:
      #111214;

    transform:
      translateY(-1px);
  }


  .sg-stage-tab:hover {
    color:
      var(--sg-text);

    background:
      rgba(51, 111, 168, 0.025);
  }


  .sg-exercise-toggle:hover {
    background:
      rgba(51, 111, 168, 0.025);
  }


  .sg-text-link:hover,
  .sg-book-card > a:hover {
    color:
      var(--sg-blue-hover);
  }

}


.sg-page a:focus-visible,
.sg-page button:focus-visible,
.sg-page input:focus-visible,
.sg-page select:focus-visible,
.sg-page textarea:focus-visible {
  outline:
    3px solid rgba(51, 111, 168, 0.22);

  outline-offset:
    3px;
}


@media (prefers-reduced-motion: reduce) {

  .sg-page *,
  .sg-page *::before,
  .sg-page *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }

}
/* ==========================================================
   LEHRKRÄFTE – MATERIALIEN
   FINAL
   ========================================================== */


/* ----------------------------------------------------------
   BASIS
---------------------------------------------------------- */

.sg-teacher-area #upgradeGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}


.sg-teacher-area #upgradeGrid > .upgrade-preview__card {
  display: grid;

  /* Bild | Abstand | Text */
  grid-template-columns: 82px minmax(0, 1fr);
  column-gap: 22px;

  align-items: start;

  width: 100%;
  min-width: 0;

  padding: 16px 0;

  background: transparent;

  border: 0;
  border-bottom: 1px solid var(--sg-border-soft);

  border-radius: 0;
  box-shadow: none;

  color: var(--sg-text);
  text-decoration: none;

  overflow: visible;
}


/* ----------------------------------------------------------
   BILD
---------------------------------------------------------- */

.sg-teacher-area #upgradeGrid .upgrade-preview__media {
  position: relative;

  width: 82px;
  min-width: 82px;

  margin: 0;
  padding: 0;

  overflow: visible;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}


.sg-teacher-area #upgradeGrid .upgrade-preview__img {
  width: 82px;
  min-width: 82px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: transparent;

  border: 0;
  border-radius: 7px;

  box-shadow: none;
}


.sg-teacher-area #upgradeGrid .upgrade-preview__img img {
  display: block;

  width: 82px;
  height: 105px;

  margin: 0;

  object-fit: cover;

  border-radius: 7px;
}


/* ----------------------------------------------------------
   TEXT
---------------------------------------------------------- */

.sg-teacher-area #upgradeGrid .upgrade-preview__meta {
  display: block;

  min-width: 0;

  margin: 0;
  padding: 0;
}


.sg-teacher-area #upgradeGrid .upgrade-preview__cardTitle {
  margin: 0 0 5px;

  color: var(--sg-text);

  font-size: 0.84rem;
  font-weight: 720;

  line-height: 1.2;
  letter-spacing: -0.015em;
}


.sg-teacher-area #upgradeGrid .upgrade-preview__cardDesc {
  display: -webkit-box;

  margin: 0;

  overflow: hidden;

  color: var(--sg-muted);

  font-size: 0.72rem;
  line-height: 1.42;

  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}


/* Eduki-Link */

.sg-teacher-area #upgradeGrid .upgrade-preview__meta::after {
  content: "Bei Eduki ansehen ↗";

  display: block;

  margin-top: 7px;

  color: #ef554b;

  font-size: 0.7rem;
  font-weight: 650;

  line-height: 1.25;
}


/* ----------------------------------------------------------
   ALTES OVERLAY ENTFERNEN
---------------------------------------------------------- */

.sg-teacher-area #upgradeGrid .upgrade-preview__badge {
  display: none !important;
}


/* altes diagonales Empfehlungsband */

.sg-teacher-area #upgradeGrid
.upgrade-preview__card.is-recommended::before,

.sg-teacher-area #upgradeGrid
.upgrade-preview__card.is-recommended::after {
  display: none !important;
  content: none !important;
}


/* ----------------------------------------------------------
   UNSER KLEINES EMPFOHLEN-BADGE
---------------------------------------------------------- */

.sg-teacher-area #upgradeGrid
.upgrade-preview__card.is-recommended
.upgrade-preview__media::before {
  content: "EMPFOHLEN";

  position: absolute;

  z-index: 2;

  top: 7px;
  left: -6px;

  padding: 3px 6px;

  background: #6fb7b0;
  color: #fff;

  border-radius: 4px;

  font-size: 0.47rem;
  font-weight: 750;

  letter-spacing: 0.06em;
}


/* ----------------------------------------------------------
   LEHRERBEREICH-LINK
---------------------------------------------------------- */

.sg-teacher-area > .sg-text-link {
  margin-top: 14px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 760px) and (max-width: 1079px) {

  .sg-teacher-area #upgradeGrid > .upgrade-preview__card {
    grid-template-columns: 68px minmax(0, 1fr);

    /* DAS ist der Abstand Bild ↔ Text */
    column-gap: 18px;

    padding: 14px 0;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__media,
  .sg-teacher-area #upgradeGrid .upgrade-preview__img {
    width: 68px;
    min-width: 68px;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__img img {
    width: 68px;
    height: 96px;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__cardTitle {
    font-size: 0.78rem;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__cardDesc {
    font-size: 0.68rem;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__meta::after {
    font-size: 0.66rem;
  }

}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 1080px) {

  .sg-teacher-area #upgradeGrid > .upgrade-preview__card {
    grid-template-columns: 68px minmax(0, 1fr);

    /* DAS ist der Abstand Bild ↔ Text */
    column-gap: 20px;

    align-items: start;

    padding: 14px 0;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__media,
  .sg-teacher-area #upgradeGrid .upgrade-preview__img {
    width: 68px;
    min-width: 68px;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__img img {
    width: 68px;
    height: 94px;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__cardTitle {
    font-size: 0.78rem;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__cardDesc {
    font-size: 0.68rem;
    line-height: 1.38;

    -webkit-line-clamp: 3;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__meta::after {
    margin-top: 6px;

    font-size: 0.66rem;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 759px) {

  .sg-teacher-area #upgradeGrid > .upgrade-preview__card {
    grid-template-columns: 86px minmax(0, 1fr);

    /*
      DAS ist genau der Abstand,
      über den wir die ganze Zeit reden:
      Bild  ←  26px  →  Text
    */
    column-gap: 26px;

    padding: 18px 0;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__media,
  .sg-teacher-area #upgradeGrid .upgrade-preview__img {
    width: 86px;
    min-width: 86px;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__img img {
    width: 86px;
    height: 110px;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__cardTitle {
    font-size: 0.95rem;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__cardDesc {
    font-size: 0.8rem;

    -webkit-line-clamp: 2;
  }


  .sg-teacher-area #upgradeGrid .upgrade-preview__meta::after {
    margin-top: 7px;

    font-size: 0.76rem;
  }

}

/* ==========================================================
   FOOTER – FEINSCHLIFF
   ========================================================== */

.sg-footer {
  padding: 28px 0 24px;

  background: transparent;

  border-top: 1px solid var(--sg-border);
}


.sg-footer__inner {
  display: grid;
  gap: 18px;
}


/* Social-Zeile */

.sg-footer__social {
  padding-bottom: 18px;
  text-align: center;

  border-bottom: 1px solid rgba(31, 32, 36, 0.14);
}


.sg-footer__social p {
  margin: 0;

  color: var(--sg-muted);

  font-size: 0.78rem;
  font-weight: 400;

  line-height: 1.45;
}


.sg-footer__social a {
  color: var(--sg-blue);

  text-decoration: none;

  font-weight: 650;
}


/* Untere Footer-Zeile */

.sg-footer__bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-top: 0;

  border-top: 0;
}


.sg-footer__brand {
  margin: 0;

  color: var(--sg-muted);

  font-size: 0.7rem;
  font-weight: 500;
}


.sg-footer__links {
  display: flex;

  align-items: center;

  gap: 18px;
}


.sg-footer__links a {
  color: var(--sg-muted);

  text-decoration: none;

  font-size: 0.7rem;
  font-weight: 450;
}


@media (hover: hover) and (pointer: fine) {

  .sg-footer__social a:hover {
    color: var(--sg-blue-hover);
  }

  .sg-footer__links a:hover {
    color: var(--sg-text);
  }

}


/* Mobile */

@media (max-width: 759px) {

  .sg-footer {
    padding: 24px 0 20px;
  }


  .sg-footer__inner {
    gap: 15px;
  }


  .sg-footer__social {
    padding-bottom: 15px;
  }


  .sg-footer__bottom {
    flex-direction: column;

    justify-content: center;

    gap: 7px;

    text-align: center;
  }

}


/* Dark Mode */

@media (prefers-color-scheme: dark) {

  .sg-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
  }


  .sg-footer__social {
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }

}

@media (prefers-color-scheme: dark) {

  .sg-footer__social {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

}

.sg-footer__bottom {
  display: flex;

  align-items: center;
  justify-content: center;

  padding-top: 0;

  border-top: 0;

  text-align: center;
}


.sg-footer__links {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 28px;
}

.sg-footer__inner {
  width: min(100%, 520px);

  margin-inline: auto;

  display: grid;

  gap: 18px;
}

.sg-footer__social a {
  color: var(--sg-blue) !important;
  font-weight: 650;
}

/* ==================================================
   SPICKZETTEL – MOBILE OPTIMIERUNG
================================================== */

@media (max-width: 759px) {

  .sg-cheatsheet .sg-ending-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .sg-cheatsheet .sg-ending-grid > div {
    min-width: 0;
    padding: 16px 14px;
  }

  .sg-cheatsheet .sg-ending-grid strong {
    font-size: 1rem;
    line-height: 1.3;

    overflow-wrap: anywhere;
    word-break: normal;
  }

  .sg-cheatsheet .sg-ending-grid small {
    font-size: 0.8rem;
    line-height: 1.4;
  }

}

@media (max-width: 420px) {

  .sg-cheatsheet .sg-ending-grid {
    grid-template-columns: 1fr;
  }

}

/* ==================================================
   SPICKZETTEL – SINGULAR / PLURAL
================================================== */

.sg-cheatsheet--singular-plural {
  display: grid;
  gap: 24px;
}


.sg-rule-group {
  display: grid;
  gap: 14px;
}


.sg-rule-group + .sg-rule-group {
  padding-top: 22px;

  border-top: 1px solid rgba(51, 111, 168, 0.12);
}


.sg-rule-group__head {
  display: flex;

  align-items: center;

  gap: 12px;
}


.sg-rule-group__number {
  display: grid;

  place-items: center;

  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  border-radius: 50%;

  background: rgba(51, 111, 168, 0.1);

  color: var(--sg-blue);

  font-size: 0.78rem;
  font-weight: 750;
}


.sg-rule-group__head > div {
  display: grid;

  gap: 2px;
}


.sg-rule-group__head small {
  color: var(--sg-muted);

  font-size: 0.68rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.06em;
}


.sg-rule-group__head strong {
  color: var(--sg-text);

  font-size: 0.95rem;
  font-weight: 700;
}


.sg-rule-grid {
  display: grid;

  gap: 12px;
}


.sg-rule-grid--articles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


.sg-rule-grid--plural {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.sg-rule-card {
  min-width: 0;

  padding: 16px;

  background: rgba(255, 255, 255, 0.58);

  border: 1px solid rgba(31, 32, 36, 0.05);

  border-radius: 14px;
}


.sg-rule-card__label {
  display: block;

  margin-bottom: 7px;

  color: var(--sg-muted);

  font-size: 0.72rem;
  line-height: 1.35;
}


.sg-rule-card__main {
  display: block;

  margin-bottom: 5px;

  color: var(--sg-blue);

  font-size: 1.02rem;
  font-weight: 720;
  line-height: 1.3;
}


.sg-rule-card small {
  display: block;

  color: var(--sg-muted);

  font-size: 0.75rem;
  line-height: 1.4;
}


.sg-rule-card--special {
  background: rgba(51, 111, 168, 0.055);
}


.sg-rule-note {
  margin: 0;

  padding: 10px 12px;

  background: rgba(51, 111, 168, 0.055);

  border-radius: 10px;

  color: var(--sg-muted);

  font-size: 0.76rem;
  line-height: 1.45;
}


.sg-rule-note strong {
  color: var(--sg-text);
}

/* ==================================================
   LÜCKENTEXT – INLINE INPUTS
================================================== */

.sg-cloze-text p {
  margin: 0;

  font-size: 1rem;
  line-height: 2.35;
}


.sg-cloze-input {
  display: inline-block !important;

  width: auto;
  max-width: 100%;

  min-height: 38px;

  margin: 0 4px;

  padding: 6px 10px;

  vertical-align: middle;

  font: inherit;
  line-height: 1.2;

  border-radius: 9px;
}


.sg-cloze-input--medium {
  width: 120px !important;
}


.sg-cloze-input--long {
  width: 145px !important;
}


.sg-cloze-hint {
  display: inline;

  color: var(--sg-muted);

  font-size: 0.78em;
  line-height: inherit;
}


/* MOBILE */

@media (max-width: 620px) {

  .sg-cloze-text p {
    line-height: 2.25;
  }

  .sg-cloze-input {
    min-height: 36px;

    margin-inline: 2px;

    padding: 5px 8px;
  }

  .sg-cloze-input--medium {
    width: 105px !important;
  }

  .sg-cloze-input--long {
    width: 125px !important;
  }

}

/* ==================================================
   ADJEKTIVE – SPICKZETTEL
================================================== */

.sg-cheatsheet--adjektive {
  display: grid;
  gap: 24px;
}

.sg-cheatsheet--adjektive .sg-rule-group {
  display: grid;
  gap: 14px;
}

.sg-cheatsheet--adjektive .sg-rule-group + .sg-rule-group {
  padding-top: 22px;
  border-top: 1px solid rgba(51, 111, 168, 0.12);
}

.sg-cheatsheet--adjektive .sg-rule-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sg-cheatsheet--adjektive .sg-rule-group__number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: rgba(51, 111, 168, 0.10);
  color: #356f9f;
  font-size: 0.78rem;
  font-weight: 750;
}

.sg-cheatsheet--adjektive .sg-rule-group__head > div {
  display: grid;
  gap: 2px;
}

.sg-cheatsheet--adjektive .sg-rule-group__head small {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.68;
}

.sg-cheatsheet--adjektive .sg-rule-group__head strong {
  font-size: 0.95rem;
  font-weight: 700;
}

.sg-cheatsheet--adjektive .sg-rule-grid {
  display: grid;
  gap: 12px;
}

.sg-cheatsheet--adjektive .sg-rule-grid--adjective-main {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sg-cheatsheet--adjektive .sg-rule-grid--adjective-special {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sg-cheatsheet--adjektive .sg-rule-card {
  min-width: 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 32, 36, 0.05);
  border-radius: 14px;
}

.sg-cheatsheet--adjektive .sg-rule-card__label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.68;
}

.sg-cheatsheet--adjektive .sg-rule-card__main {
  display: block;
  margin-bottom: 5px;
  color: #356f9f;
  font-size: 1.02rem;
  font-weight: 720;
  line-height: 1.3;
}

.sg-cheatsheet--adjektive .sg-rule-card small {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0.72;
}

.sg-cheatsheet--adjektive .sg-rule-card--special,
.sg-cheatsheet--adjektive .sg-rule-note {
  background: rgba(51, 111, 168, 0.055);
}

.sg-cheatsheet--adjektive .sg-rule-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.76rem;
  line-height: 1.45;
}

/* früher umbrechen: Sidebar verkleinert den verfügbaren Hauptbereich */
@media (max-width: 1120px) {
  .sg-cheatsheet--adjektive .sg-rule-grid--adjective-main,
  .sg-cheatsheet--adjektive .sg-rule-grid--adjective-special {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sg-cheatsheet--adjektive .sg-rule-grid--adjective-special .sg-rule-card--special {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .sg-cheatsheet--adjektive .sg-rule-grid--adjective-main,
  .sg-cheatsheet--adjektive .sg-rule-grid--adjective-special {
    grid-template-columns: 1fr;
  }

  .sg-cheatsheet--adjektive .sg-rule-grid--adjective-special .sg-rule-card--special {
    grid-column: auto;
  }
}

@media (prefers-color-scheme: dark) {
  .sg-cheatsheet--adjektive .sg-rule-group + .sg-rule-group {
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  .sg-cheatsheet--adjektive .sg-rule-group__number {
    background: rgba(96, 165, 250, 0.12);
    color: #8fc2f4;
  }

  .sg-cheatsheet--adjektive .sg-rule-card {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.055);
  }

  .sg-cheatsheet--adjektive .sg-rule-card--special,
  .sg-cheatsheet--adjektive .sg-rule-note {
    background: rgba(96, 165, 250, 0.07);
  }

  .sg-cheatsheet--adjektive .sg-rule-card__main {
    color: #8fc2f4;
  }
}
.sg-hero-video__play {
  position: absolute;

  left: 22px;
  bottom: 22px;

  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  padding-left: 3px;

  transform: none;

  background: rgba(255, 255, 255, 0.94);
  color: #202124;

  border-radius: 50%;

  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.22);

  font-size: 1rem;

  transition:
    transform 180ms ease,
    background 180ms ease;
}


.sg-hero-video__label {
  position: absolute;

  left: 94px;
  bottom: 25px;

  color: #fff;
  text-align: left;
}


@media (hover: hover) and (pointer: fine) {

  .sg-hero-video:hover .sg-hero-video__play {
    transform: scale(1.06) !important;
    background: #fff;
  }

}

.sg-hero-video__label {
  position: absolute;

  left: 82px;
  bottom: 22px;

  color: #fff;
  text-align: left;
}

@media (prefers-color-scheme: dark) {

  .sg-hero-video__play {
    background: rgba(28, 30, 34, 0.92);
    color: #f5f7fa;

    box-shadow:
      0 8px 26px rgba(0, 0, 0, 0.38);
  }

}

@media (hover: hover) and (pointer: fine) {

  .sg-hero-video:hover .sg-hero-video__play {
    transform: scale(1.06) !important;
  }

}

@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {

  .sg-hero-video:hover .sg-hero-video__play {
    background: rgba(40, 43, 48, 0.98);
  }

}

/* ==================================================
   HERO VIDEO – MOBILE / TABLET GRÖSSER
================================================== */

/* Mobile */
@media (max-width: 759px) {

  .sg-hero-video {
    width: min(100%, 520px);
  }

}


/* Tablet / iPad */
@media (min-width: 760px) and (max-width: 1079px) {

  .sg-hero__visual {
    width: 100%;
  }

  .sg-hero-video {
    width: min(100%, 560px);
  }

}

/* ==================================================
   HERO VIDEO – MOBILE / TABLET GRÖSSER
================================================== */

/* Mobile */
@media (max-width: 759px) {

  .sg-hero-video {
    width: min(100%, 520px);
  }

}




@media (min-width: 1280px) {

  .sg-hero-video {
    width: min(100%, 600px);
  }

}

/* ==================================================
   RULE CARDS – DARK MODE
================================================== */

@media (prefers-color-scheme: dark) {

  .sg-rule-card {
    background: linear-gradient(
      145deg,
      rgba(36, 49, 62, 0.96),
      rgba(27, 39, 51, 0.96)
    );

    border: 1px solid rgba(120, 170, 215, 0.10);

    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }

  .sg-rule-card__label {
    color: #8f99a5;
  }

  .sg-rule-card__main {
    color: #82bfff;
  }

  .sg-rule-card small {
    color: #8f99a5;
  }

}