@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#efeae0;
  --paper-card:#faf8f2;
  --ink:#26261f;
  --ink-soft:#5c584c;
  --rule-red:#ad3327;
  --sage:#546354;
  --seal:#9c7a3c;
  --line:#d9d2c0;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Work Sans', sans-serif;padding:28px 20px 60px;}
a{color:inherit;}
.wrap{max-width:820px;margin:0 auto;}

.masthead{border-bottom:3px solid var(--ink);padding-bottom:14px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px;}
.masthead h1{font-family:'Fraunces', serif;font-weight:700;font-size:2rem;letter-spacing:-0.01em;margin:0;}
.masthead .sub{font-family:'IBM Plex Mono', monospace;font-size:0.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.08em;margin-top:4px;}
.masthead a.home-link{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--ink-soft);text-decoration:none;border-bottom:1px dashed var(--line);}
.masthead a.home-link:hover{color:var(--rule-red);border-color:var(--rule-red);}

/* Landing page */
.hero{padding:40px 0 10px;}
.hero .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--seal);margin-bottom:14px;}
.hero h2{font-family:'Fraunces',serif;font-weight:700;font-size:2.4rem;line-height:1.15;margin:0 0 20px;letter-spacing:-0.01em;}
.hero p{font-size:1.02rem;line-height:1.65;color:var(--ink-soft);max-width:640px;margin:0 0 16px;}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:14px;margin:32px 0;}
.feature-card{background:var(--paper-card);border:1px solid var(--line);border-radius:6px;padding:18px 20px;}
.feature-card .num{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;color:var(--rule-red);letter-spacing:0.08em;margin-bottom:8px;display:block;}
.feature-card h3{font-family:'Fraunces',serif;font-size:1.05rem;margin:0 0 6px;font-weight:600;}
.feature-card p{font-size:0.86rem;color:var(--ink-soft);line-height:1.5;margin:0;}
.cta-row{margin-top:34px;}
.big-cta{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.85rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--paper-card);
  border:1px solid var(--ink);
  padding:14px 28px;
  border-radius:3px;
  text-decoration:none;
  transition:opacity .15s;
}
.big-cta:hover{opacity:0.85;}

/* Stepper */
.stepper{display:flex;gap:6px;margin-bottom:26px;}
.step-dot{flex:1;padding-bottom:8px;border-bottom:3px solid var(--line);transition:border-color .2s;}
.step-dot.done{border-color:var(--sage);cursor:pointer;}
.step-dot.active{border-color:var(--rule-red);}
.step-dot .num{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;color:var(--ink-soft);letter-spacing:0.05em;}
.step-dot.active .num{color:var(--rule-red);}
.step-dot.done .num{color:var(--sage);}
.step-dot .lbl{font-size:0.78rem;font-weight:500;margin-top:2px;color:var(--ink-soft);display:block;}
.step-dot.active .lbl{color:var(--ink);}

.page{display:none;animation:fadeIn .25s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.screen-title{font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;margin:0 0 16px;}

.niveau-row{display:flex;gap:8px;margin-bottom:20px;}
.niveau-btn{flex:1;font-family:'IBM Plex Mono',monospace;font-size:0.85rem;font-weight:500;letter-spacing:0.03em;background:var(--paper-card);border:1.5px solid var(--line);border-radius:20px;padding:9px 0;cursor:pointer;color:var(--ink-soft);transition:all .15s;}
.niveau-btn.active{background:var(--ink);border-color:var(--ink);color:var(--paper-card);}

.teile{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:10px;margin-bottom:22px;}
.teil-btn{font-family:'Work Sans',sans-serif;font-weight:500;font-size:0.88rem;text-align:left;background:var(--paper-card);border:1.5px solid var(--line);border-radius:3px;padding:12px 14px;cursor:pointer;color:var(--ink-soft);transition:border-color .15s, color .15s;}
.teil-btn .n{display:block;font-family:'IBM Plex Mono',monospace;font-size:0.64rem;letter-spacing:0.08em;margin-bottom:3px;opacity:0.75;}
.teil-btn.active{border-color:var(--rule-red);color:var(--ink);background:#fff;}
.teil-btn.active .n{color:var(--rule-red);opacity:1;}

.diff-block{background:var(--paper-card);border:1px solid var(--line);border-radius:4px;padding:16px 18px;margin-bottom:8px;}
.diff-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.diff-head .label{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);}
.diff-head .val{font-family:'IBM Plex Mono',monospace;font-size:1.3rem;color:var(--rule-red);font-weight:600;}
input[type=range]{width:100%;accent-color:var(--rule-red);}
.diff-scale{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:0.62rem;color:var(--ink-soft);margin-top:4px;}
.diff-hint{font-size:0.8rem;color:var(--ink-soft);margin-top:8px;line-height:1.4;}

.aufgabe-card{background:var(--paper-card);border:1px solid var(--line);border-radius:4px;padding:20px 22px;margin-bottom:18px;position:relative;}
.aufgabe-card .label{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);margin-bottom:8px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;}
.aufgabe-text{font-size:0.98rem;line-height:1.55;white-space:pre-wrap;}
.quelltext{margin-top:12px;padding:12px 14px;background:#fff;border-left:3px solid var(--seal);font-size:0.9rem;line-height:1.5;color:var(--ink-soft);white-space:pre-wrap;}
.ref-note{font-family:'IBM Plex Mono',monospace;font-size:0.65rem;color:var(--sage);margin-top:10px;}

.baloes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.balloon{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;font-size:0.86rem;line-height:1.48;color:var(--ink-soft);position:relative;}
.balloon:nth-child(odd){transform:rotate(-0.6deg);}
.balloon:nth-child(even){transform:rotate(0.6deg);}
.balloon .name{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:0.78rem;color:var(--rule-red);margin-bottom:5px;display:block;}
@media (max-width:640px){ .baloes{grid-template-columns:1fr;} }

.card-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center;}
button.primary, button.ghost{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.05em;text-transform:uppercase;padding:10px 18px;border-radius:3px;cursor:pointer;transition:opacity .15s;border:1px solid var(--ink);}
button.primary{background:var(--ink);color:var(--paper-card);}
button.ghost{background:transparent;color:var(--ink-soft);border-color:var(--line);}
button.primary:hover, button.ghost:hover{opacity:0.82;}
button:disabled{opacity:0.4;cursor:default;}
.nav-row{display:flex;justify-content:space-between;margin-top:22px;}

.schreibfeld-wrap{background:var(--paper-card);border:1px solid var(--line);border-radius:4px;padding:18px 20px 14px;margin-bottom:8px;}
.schreibfeld-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.schreibfeld-head .label{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);}
.wortzahl{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--ink-soft);}
textarea{width:100%;min-height:300px;border:none;background:repeating-linear-gradient(var(--paper-card) 0px, var(--paper-card) 30px, var(--line) 31px);line-height:31px;font-family:'Work Sans',sans-serif;font-size:1rem;color:var(--ink);resize:vertical;outline:none;padding:0 2px;}
textarea::placeholder{color:#b8b2a0;font-style:italic;}
.mini-aufgabe{font-size:0.82rem;color:var(--ink-soft);background:#fff;border-left:3px solid var(--line);padding:8px 12px;margin-bottom:14px;line-height:1.45;}

.loading-big{text-align:center;padding:60px 0;font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);font-size:0.85rem;}
.loading-big .spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--rule-red);border-radius:50%;margin:0 auto 14px;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.feedback{background:var(--paper-card);border:1px solid var(--line);border-radius:4px;padding:24px 24px 20px;position:relative;overflow:hidden;}
.stamp{position:absolute;top:18px;right:22px;border:3px solid var(--rule-red);color:var(--rule-red);border-radius:6px;padding:8px 14px;transform:rotate(-6deg);font-family:'IBM Plex Mono',monospace;text-align:center;line-height:1.15;animation:stampIn .35s cubic-bezier(.2,1.4,.5,1) .1s both;background:rgba(255,255,255,0.45);}
@keyframes stampIn{0%{transform:rotate(-6deg) scale(2.2);opacity:0;}70%{opacity:1;}100%{transform:rotate(-6deg) scale(1);opacity:1;}}
.stamp .niveau{font-size:1.1rem;font-weight:600;}
.stamp .tag{font-size:0.58rem;letter-spacing:0.06em;text-transform:uppercase;opacity:0.85;}
.fb-section{margin-bottom:16px;max-width:76%;}
.fb-section h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.02rem;margin:0 0 6px;color:var(--ink);}
.fb-section p{margin:0;font-size:0.92rem;line-height:1.55;color:var(--ink-soft);}
.korrekturen{list-style:none;margin:0;padding:0;}
.korrekturen li{padding:10px 0;border-top:1px dashed var(--line);font-size:0.9rem;line-height:1.5;}
.korrekturen li:first-child{border-top:none;}
.orig{color:var(--rule-red);text-decoration:line-through;text-decoration-thickness:1px;}
.korr{color:var(--sage);font-weight:500;}
.erkl{display:block;margin-top:3px;color:var(--ink-soft);font-size:0.85rem;font-style:italic;}
.tip-box{margin-top:16px;padding:12px 14px;border-left:3px solid var(--sage);background:#fff;font-size:0.88rem;line-height:1.5;color:var(--ink-soft);max-width:76%;}

.disclaimer{font-family:'IBM Plex Mono',monospace;font-size:0.65rem;color:var(--ink-soft);text-align:center;margin-top:30px;letter-spacing:0.02em;opacity:0.75;}

@media (max-width:640px){
  .fb-section, .tip-box{max-width:100%;}
  .niveau-row{flex-wrap:wrap;}
  .niveau-btn{flex:1 1 40%;}
  .step-dot .lbl{display:none;}
  .hero h2{font-size:1.8rem;}
}

/* Cronômetro */
.schreiben-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.schreiben-header .screen-title{margin:0;}
.cronometro{
  font-family:'IBM Plex Mono',monospace;
  font-size:1.6rem;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.04em;
  min-width:80px;
  text-align:right;
}
.cronometro.aviso{color:var(--seal);}
.cronometro.esgotado{color:var(--rule-red);animation:pulsar .8s ease infinite alternate;}
@keyframes pulsar{from{opacity:1;}to{opacity:0.4;}}

/* Modal Aufgabenblatt */
.aufgaben-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(38,38,31,0.6);
  z-index:100;
  padding:20px 16px;
  overflow-y:auto;
  align-items:flex-start;
  justify-content:center;
}
.aufgaben-overlay.show{display:flex;animation:fadeIn .2s ease;}
.aufgaben-modal{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:6px;
  max-width:660px;
  width:100%;
  margin:auto;
  overflow:hidden;
}
.aufgaben-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-soft);
}
.modal-close-btn{
  background:none;
  border:none;
  font-size:1.4rem;
  color:var(--ink-soft);
  cursor:pointer;
  line-height:1;
  padding:0 4px;
}
.modal-close-btn:hover{color:var(--rule-red);}
.aufgaben-modal-body{
  padding:18px 20px 22px;
  max-height:80vh;
  overflow-y:auto;
}
.baloes-modal{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:4px;
}
@media(max-width:500px){.baloes-modal{grid-template-columns:1fr;}}

/* Tabela de Bewertung */
.fb-table{width:100%;border-collapse:collapse;font-size:0.85rem;margin-top:8px;}
.fb-table th{font-family:'IBM Plex Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);padding:8px 10px;text-align:left;border-bottom:2px solid var(--line);}
.fb-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45;}
.fb-table tr:last-child td{border-bottom:none;}
.fb-table .kat-name{font-weight:600;white-space:nowrap;}
.fb-table .kat-punkte{font-family:'IBM Plex Mono',monospace;font-size:0.9rem;color:var(--rule-red);font-weight:600;white-space:nowrap;}
.fb-table .gesamt-row td{background:var(--paper);font-family:'IBM Plex Mono',monospace;}
.beleg-pos{display:block;font-size:0.78rem;color:var(--sage);margin-top:3px;}
.beleg-neg{display:block;font-size:0.78rem;color:var(--rule-red);margin-top:3px;}
.analyse-list{margin:6px 0 12px 0;padding:0;list-style:none;}
.analyse-list li{padding:7px 0;border-top:1px dashed var(--line);font-size:0.88rem;line-height:1.5;}
.analyse-list li:first-child{border-top:none;}

/* Modus-Tabs */
.modus-tabs{display:flex;gap:8px;margin-bottom:16px;}
.modus-tab{
  flex:1;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;
  letter-spacing:0.04em;
  padding:10px 14px;
  border-radius:3px;
  cursor:pointer;
  border:1.5px solid var(--line);
  background:var(--paper-card);
  color:var(--ink-soft);
  transition:all .15s;
}
.modus-tab.active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper-card);
}

/* Modellsatz Picker Grid */
.ms-picker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:10px;
  margin-bottom:16px;
}
.ms-card{
  background:var(--paper-card);
  border:1.5px solid var(--line);
  border-radius:4px;
  padding:12px 14px;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ms-card:hover{border-color:var(--ink-soft);}
.ms-card.selected{border-color:var(--rule-red);background:#fff;}
.ms-card .ms-num{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.62rem;
  letter-spacing:0.08em;
  color:var(--rule-red);
  display:block;
  margin-bottom:4px;
  text-transform:uppercase;
}
.ms-card .ms-thema{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1rem;
}
.ms-card .ms-type{
  font-size:0.72rem;
  color:var(--ink-soft);
  margin-top:3px;
  font-family:'IBM Plex Mono',monospace;
}
.ms-empty{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;
  color:var(--ink-soft);
  padding:10px 0;
}
@media(max-width:480px){.modus-tabs{flex-direction:column;}}