/* Lokal gehostete Schriften (statt Google Fonts von fonts.googleapis.com/
     fonts.gstatic.com), damit keine Nutzer-IP-Adressen an Google übertragen
     werden und dafür kein Cookie-/Consent-Hinweis nötig ist. Dateien liegen
     im Ordner "fonts/" neben dieser index.html. */
  @font-face{
    font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
    src:url("fonts/inter-400.ttf") format("truetype");
  }
  @font-face{
    font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
    src:url("fonts/inter-500.ttf") format("truetype");
  }
  @font-face{
    font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
    src:url("fonts/inter-600.ttf") format("truetype");
  }
  @font-face{
    font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
    src:url("fonts/inter-700.ttf") format("truetype");
  }
  @font-face{
    font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
    src:url("fonts/space-grotesk-500.ttf") format("truetype");
  }
  @font-face{
    font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap;
    src:url("fonts/space-grotesk-600.ttf") format("truetype");
  }
  @font-face{
    font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
    src:url("fonts/space-grotesk-700.ttf") format("truetype");
  }
  :root{
    --paper:#FAF8F3;
    --ink:#1B2A4A;
    --ink-soft:#4B5A78;
    --line:#D9D4C8;
    --teal:#2A9D8F;
    --teal-dark:#1E7268;
    --coral:#E9A23B;
    --coral-dark:#C97F1E;
    --red:#D65A4A;
    --white:#FFFFFF;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    background:
      linear-gradient(var(--paper),var(--paper)),
      repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(27,42,74,0.05) 28px),
      repeating-linear-gradient(90deg, transparent, transparent 27px, rgba(27,42,74,0.05) 28px);
    color:var(--ink);
    min-height:100vh;
  }
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;font-weight:600;}
  .wrap{max-width:760px;margin:0 auto;padding:32px 20px 80px;}
  .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px;}
  .brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-0.02em;display:inline-flex;align-items:center;min-height:36px;}
  .brand .dot{color:var(--teal);}
  .brand img{height:28px;width:28px;display:block;flex-shrink:0;margin-right:8px;}
  .brand-link{background:none;border:none;padding:0;cursor:pointer;text-align:left;}
  .topbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
  .muted{color:var(--ink-soft);font-size:14px;}
  .card{
    background:var(--white);
    border:1.5px solid var(--line);
    border-radius:14px;
    padding:28px;
  }
  .field{margin-bottom:16px;}
  label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
  input[type=text],input[type=email],input[type=password],input[type=number],select{
    width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:8px;
    font-family:'Inter',sans-serif;font-size:15px;background:var(--paper);color:var(--ink);
  }
  input:focus,select:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
  button{
    font-family:'Inter',sans-serif;font-weight:600;font-size:15px;
    border:none;border-radius:8px;padding:12px 20px;cursor:pointer;
    transition:transform .08s ease;
  }
  button:active{transform:scale(0.98);}
  .btn-primary{background:var(--ink);color:var(--white);}
  .btn-primary:hover{background:#0F1A30;}
  .btn-primary:disabled{background:#A9B2C4;cursor:not-allowed;}
  .btn-ghost{background:transparent;color:var(--ink-soft);border:1.5px solid var(--line);}
  .btn-ghost:hover{border-color:var(--ink-soft);}
  .btn-teal{background:var(--teal);color:white;}
  .btn-teal:hover{background:var(--teal-dark);}
  .btn-danger{background:transparent;color:var(--red);border:1.5px solid var(--red);}
  .btn-danger:hover{background:var(--red);color:var(--white);}
  .btn-danger-solid{background:var(--red);color:var(--white);}
  .btn-danger-solid:hover{background:#B94636;}
  .row{display:flex;gap:10px;}
  .err{color:var(--red);font-size:14px;margin-top:10px;}
  .toggle{font-size:14px;color:var(--ink-soft);margin-top:18px;text-align:center;}
  .toggle a{color:var(--teal-dark);cursor:pointer;font-weight:600;text-decoration:none;}
  .terms-check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 16px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
  .terms-check input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--ink);cursor:pointer;}
  .terms-check label{cursor:pointer;}
  .terms-check a{color:var(--rif-blue-dark);cursor:pointer;text-decoration:underline;}

  /* Profil-Auswahl */
  .profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;margin-top:18px;}
  .profile-tile{
    background:var(--white);border:1.5px solid var(--line);border-radius:12px;
    padding:18px 10px;text-align:center;cursor:pointer;
  }
  .profile-tile:hover{border-color:var(--teal);}
  .profile-tile-own{border-color:var(--teal);border-width:2px;background:var(--paper);}
  .profile-own-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--teal);margin-bottom:6px;}
  .profile-stats{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-soft);line-height:1.6;}
  .avatar{
    width:52px;height:52px;border-radius:50%;margin:0 auto 10px;
    background:var(--ink);color:white;display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;
    overflow:hidden;
  }
  .avatar.avatar-img{background:var(--line);}
  .avatar img{width:100%;height:100%;object-fit:cover;}
  .avatar-preview{
    width:56px;height:56px;border-radius:50%;background:var(--paper);
    border:1.5px solid var(--line);overflow:hidden;display:flex;align-items:center;
    justify-content:center;flex-shrink:0;
  }
  .avatar-preview img{width:100%;height:100%;object-fit:cover;}
  .profile-name{font-weight:600;font-size:14px;}
  .profile-name-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .profile-meta{font-size:12px;color:var(--ink-soft);}
  .profile-zugang-status{font-size:12px;font-weight:600;margin-top:2px;}
  .profile-zugang-status.ok{color:var(--rif-green);}
  .profile-zugang-status.offen{color:var(--ink-soft);}
  .add-tile{border-style:dashed;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .add-tile .plus{font-size:26px;font-family:'Space Grotesk',sans-serif;}

  /* Klassen-Leiste (mehrere Klassen pro Lehrer*innen-Konto) */
  .klassen-leiste{margin-top:14px;}
  .klassen-tabs{display:flex;flex-wrap:wrap;gap:8px;}
  .klassen-tab{
    background:var(--white);border:1.5px solid var(--line);border-radius:20px;
    padding:7px 16px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  .klassen-tab:hover{border-color:var(--teal);color:var(--ink);}
  .klassen-tab.active{background:var(--ink);border-color:var(--ink);color:white;}
  .klassen-tab.archiviert{opacity:.6;font-style:italic;}
  .klassen-tab-add{border-style:dashed;}
  .klassen-toolbar{display:flex;gap:16px;margin-top:8px;}
  .klassen-archiv-toggle{display:block;margin-top:8px;}
  .klasse-inline-form{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap;}
  .klasse-inline-form input[type=text]{max-width:240px;}
  .klasse-inline-form .err{margin:0;width:100%;}

  /* Bereichs-Pfad */
  .bereich-block{margin-bottom:34px;}
  .bereich-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .bereich-num{
    width:30px;height:30px;border-radius:8px;background:var(--ink);color:white;
    display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;
    font-weight:700;font-size:14px;flex-shrink:0;
  }
  .level-path{display:flex;gap:8px;flex-wrap:wrap;}
  .level-node{
    width:64px;height:64px;border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;
    border:2px solid var(--line);background:var(--white);cursor:pointer;position:relative;
  }
  .level-node.locked{color:#B7BECC;cursor:not-allowed;background:#F1EEE6;}
  .level-node.unlocked{border-color:var(--rif-blue);color:var(--ink);background:var(--white);}
  .level-node.unlocked:hover{background:var(--rif-blue);color:white;}
  .level-node.attempted{border-color:var(--rif-orange);color:var(--ink);background:var(--white);}
  .level-node.attempted:hover{background:var(--rif-orange);color:white;}
  .level-node.done{border-color:var(--rif-green);background:var(--rif-green);color:white;}
  .level-node .pct{font-size:10px;font-weight:500;opacity:.85;}
  .badge-dot{
    position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
    border:2px solid var(--paper);
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:500;
  }
  .badge-dot.bearbeitet{background:var(--rif-orange);color:white;}
  .badge-dot.freigeschaltet{background:var(--rif-blue);color:white;}
  .badge-dot.gesperrt{background:#E4E1D9;color:#B7BECC;}

  /* Frage-Player */
  .qbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:13px;color:var(--ink-soft);}
  .progress-track{height:6px;background:var(--line);border-radius:4px;overflow:hidden;flex:1;margin:0 16px;}
  .progress-fill{height:100%;background:var(--teal);transition:width .3s ease;}
  .qtext{font-size:18px;font-weight:600;line-height:1.5;margin-bottom:20px;white-space:pre-line;}
  .choice{
    display:block;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line);
    border-radius:10px;padding:13px 16px;margin-bottom:10px;font-size:15px;font-family:'Inter',sans-serif;
    cursor:pointer;color:var(--ink);
  }
  .mc-choice-img{max-width:75px;max-height:50px;display:block;border-radius:6px;object-fit:contain;}
  .choice:hover{border-color:var(--teal);}
  .choice.selected{border-color:var(--ink);background:#EFEDE6;}
  .choice.correct{border-color:var(--teal);background:#E3F3F1;}
  .choice.wrong{border-color:var(--red);background:#FBEAE7;}
  .hotspot-wrap{position:relative;display:block;width:100%;margin:0 auto 16px;}
  .stimulus-img{width:100%;max-width:840px;display:block;margin:0 auto 18px;border-radius:10px;border:1.5px solid var(--line);}
  .hotspot-wrap img{width:100%;display:block;border-radius:10px;border:1.5px solid var(--line);}
  .zone{position:absolute;border:2px solid transparent;border-radius:4px;cursor:pointer;}
  .zone.selected{border-color:var(--ink);background:rgba(27,42,74,0.12);}
  .zone.correct{border-color:var(--teal);background:rgba(42,157,143,0.22);}
  .zone.wrong{border-color:var(--red);background:rgba(214,90,74,0.22);}
  .marker{
    position:absolute;width:44px;height:44px;
    transform:translate(-50%,-50%);cursor:pointer;z-index:3;
    display:flex;align-items:center;justify-content:center;
  }
  .marker::after{
    content:"";width:22px;height:22px;border-radius:50%;
    background:var(--red);border:2.5px solid var(--ink);
  }
  .marker.hit::after{background:var(--teal);}
  .marker.miss::after{background:var(--red);}
  .zone-reveal{
    position:absolute;border:2px dashed var(--teal);border-radius:4px;
    background:rgba(42,157,143,0.10);pointer-events:none;z-index:2;
  }
  .hotspot-wrap img{cursor:crosshair;}
  .dnd-target{
    position:absolute;border:2px dashed var(--ink-soft);pointer-events:none;z-index:1;
    background:rgba(75,90,120,0.06);overflow:hidden;
  }
  .dnd-piece{
    position:absolute;border:2.5px solid var(--ink);background:rgba(233,162,59,0.35);
    cursor:grab;touch-action:none;z-index:5;
  }
  .dnd-piece:active{cursor:grabbing;}
  .dnd-piece-label{
    position:absolute;top:-8px;left:-8px;background:var(--ink);color:white;
    font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
    width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  }
  .feedback{margin-top:16px;font-size:14px;font-weight:600;}
  .feedback.ok{color:var(--teal-dark);}
  .feedback.no{color:var(--red);}

  .result-hero{text-align:center;padding:20px 0 8px;}
  .result-pct{font-family:'Space Grotesk',sans-serif;font-size:52px;font-weight:700;}
  .badge-medal{
    width:78px;height:78px;margin:14px auto;border-radius:50%;
    background:conic-gradient(var(--coral), var(--teal), var(--coral));
    display:flex;align-items:center;justify-content:center;
  }
  .badge-medal .inner{width:60px;height:60px;border-radius:50%;background:var(--paper);
    display:flex;align-items:center;justify-content:center;font-size:26px;}

  .topbar-actions{display:flex;gap:10px;align-items:center;}
  .link-btn{background:none;border:none;color:var(--ink-soft);font-size:13px;cursor:pointer;text-decoration:underline;padding:0;}

  /* ---- RIF-Markenfarben (als Akzente, ergänzend zum bestehenden Designsystem) ---- */
  :root{
    --rif-green:#6CB646;
    --rif-orange:#FF6600;
    --rif-blue:#006BD0;
    --rif-blue-dark:#2064AE;
  }

  /* ---- Öffentliche Kopfzeile (vor dem Login) ---- */
  .pub-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:36px;}
  .pub-nav button.nav-link{
    background:none;border:none;color:var(--ink);font-family:'Inter',sans-serif;
    font-weight:600;font-size:14px;cursor:pointer;padding:7px 10px;border-radius:8px;
  }
  .pub-nav button.nav-link:hover{background:#EFEDE6;color:var(--rif-blue-dark);}
  .lang-switch{
    display:flex;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;flex-shrink:0;
  }
  .lang-switch button{
    background:none;border:none;padding:5px 12px;font-size:12px;font-weight:600;
    color:var(--ink-soft);letter-spacing:.02em;cursor:pointer;font-family:'Inter',sans-serif;
  }
  .lang-switch button.active{background:var(--ink);color:white;cursor:default;}
  .lang-switch button:not(.active):hover{background:#EFEDE6;color:var(--rif-blue-dark);}
  .search-wrap{position:relative;}
  .search-btn{
    background:none;border:1.5px solid transparent;cursor:pointer;color:var(--ink);
    display:flex;align-items:center;justify-content:center;padding:7px;border-radius:8px;
  }
  .search-btn:hover{background:#EFEDE6;}
  .search-input{
    width:210px;padding:8px 14px;border:1.5px solid var(--line);border-radius:20px;
    font-size:14px;font-family:'Inter',sans-serif;background:var(--white);
  }
  .search-input:focus{outline:none;border-color:var(--rif-blue);}
  .search-results{
    position:absolute;top:calc(100% + 8px);right:0;background:var(--white);
    border:1.5px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(27,42,74,0.16);
    min-width:260px;max-height:300px;overflow-y:auto;z-index:60;
  }
  .search-results button{
    display:block;width:100%;text-align:left;background:none;border:none;
    padding:11px 16px;font-size:14px;font-weight:500;cursor:pointer;color:var(--ink);
    border-bottom:1px solid var(--line);font-family:'Inter',sans-serif;
  }
  .search-results button:last-child{border-bottom:none;}
  .search-results button:hover{background:var(--paper);}
  .search-results .search-empty{padding:12px 16px;font-size:13px;color:var(--ink-soft);}
  .search-results .search-cat{
    padding:8px 16px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-soft);font-weight:700;
  }

  /* ---- Hero / Startseite ---- */
  .hero{position:relative;padding:18px 0 4px;text-align:center;}
  .hero-banner-top{
    width:100%;max-width:640px;height:auto;display:block;margin:0 auto 22px;
    border-radius:14px;
  }
  .platonic-banner{
    width:100%;max-width:900px;height:auto;display:block;margin:28px auto 0;
    border-radius:14px;
  }
  .hero-title{font-size:46px;line-height:1.05;margin:8px 0 4px;letter-spacing:-0.01em;}
  .hero-title .t-rif{color:var(--rif-blue-dark);}
  .hero-title .t-four{color:var(--rif-green);}
  .hero-title .t-students{color:var(--rif-orange);}
  .hero-subtitle{
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;
    color:var(--rif-green);margin:0 0 20px;
  }
  .hero-lead{max-width:520px;margin:0 auto;font-size:15.5px;line-height:1.7;color:var(--ink-soft);}
  .hero-lead p{margin:0 0 12px;}
  .hero-cta-line{font-weight:700;color:var(--ink);}

  /* ---- Footer ---- */
  .site-footer{
    margin-top:48px;padding:22px 0 6px;border-top:1.5px solid var(--line);
    display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  }
  .site-footer button{
    background:none;border:none;color:var(--ink-soft);font-size:13px;font-weight:500;
    cursor:pointer;padding:2px 0;font-family:'Inter',sans-serif;
  }
  .site-footer button:hover{color:var(--rif-blue-dark);text-decoration:underline;}
  .footer-brandline{width:100%;text-align:center;font-size:12px;color:var(--ink-soft);opacity:.7;margin-top:6px;}

  /* ---- Modal (Info-Panels & Unterseiten) ---- */
  .modal-backdrop{
    position:fixed;inset:0;background:rgba(27,42,74,0.55);
    display:flex;align-items:center;justify-content:center;padding:20px;z-index:200;
  }
  .modal-card{
    background:var(--white);border-radius:16px;max-width:640px;width:100%;
    max-height:82vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,0.28);
  }
  .modal-head{
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:24px 26px 0;position:sticky;top:0;background:var(--white);
  }
  .modal-head h2{margin:0;}
  .modal-close{
    background:none;border:none;font-size:26px;line-height:1;color:var(--ink-soft);
    cursor:pointer;padding:0 4px;font-family:'Inter',sans-serif;
  }
  .modal-close:hover{color:var(--ink);}
  .modal-body{padding:14px 26px 30px;font-size:15px;line-height:1.7;color:var(--ink);}
  .modal-body p{margin:0 0 14px;}
  .modal-body a{color:var(--rif-blue-dark);}
  .modal-body ol, .modal-body ul{margin:0 0 14px;padding-left:22px;}
  .modal-body li{margin-bottom:8px;}
  .modal-body li ol{margin-top:8px;margin-bottom:0;}
  .badge-list-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:15px;line-height:1.7;font-family:'Inter',sans-serif;}
  .badge-list-item .emoji{font-size:22px;flex-shrink:0;}
  .badge-list-item b{color:var(--ink);}
  .ag-color-icon{width:46px;height:46px;flex-shrink:0;}
  .placeholder-note{
    color:var(--ink-soft);font-style:italic;background:var(--paper);
    border:1.5px dashed var(--line);border-radius:10px;padding:16px;
  }