/* Pro-Seiten im neuen Design (pro-klassen, pro-klasse, pro-konto, pro-verwaltung): liegt über
   pro.css und setzt deren Bausteine (.feld, .hinweis, .knopf, Tabellen, Reiter, Kacheln) auf die
   Tokens aus design/arbeitsheft.css. Die Hülle (Schiene, Topbar, Fuß) baut generateProDesignSeite()
   im Exporter. Quelle: public/pro-design.css, der Build kopiert sie nach website/.
   pro-karten.html und pro-anleitung*.html laden sie nicht und bleiben bei pro.css. */

.pro-design {
  --pro: var(--ah-ink);
  --pro-dunkel: var(--ah-ink);
  --pro-hell: var(--ah-line);
  --pro-sehr-hell: var(--ah-surface-2);
  --text: var(--ah-ink);
  --grau: var(--ah-ink-55);
  --linie: var(--ah-line-soft);
  --gut: var(--ah-ok);
  --gut-hell: var(--ah-ok-bg);
  --gefahr: #B3402E;
  --gefahr-hell: #FDF1EE;
  --karte: var(--ah-surface);
  --grund: var(--ah-bg);
}

/* Inhalt: breiter als die Lesespalte – Klassen und Verwaltung haben Tabellen */
.pro-design main.ah-content { max-width: none; margin: 0; padding: var(--ah-10); }
.pro-design .ah-measure { max-width: 1100px; }

/* Schrift: Überschriften Newsreader, Text Inter Tight wie auf den Kursseiten */
.pro-design .pro-inhalt h1 { font-family: var(--ah-serif); font-size: clamp(27px, 3.4vw, 40px); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.12; margin: 0 0 var(--ah-3); }
.pro-design .pro-inhalt h2 { font-family: var(--ah-serif); font-size: clamp(20px, 2vw, 25px); font-weight: 500;
  letter-spacing: -.01em; margin: 0 0 var(--ah-3); }
.pro-design .pro-inhalt h3 { font-family: var(--ah-serif); font-size: 19px; font-weight: 500; margin: 0 0 var(--ah-2); }
.pro-design .unterzeile { font-family: var(--ah-serif); font-size: 17px; line-height: 1.55; color: var(--ah-ink-80); }
.pro-design a { color: var(--ah-ink); text-decoration-color: var(--ah-ink-40); text-underline-offset: 2px; }
.pro-design a:hover { color: var(--ah-accent); }

/* Bausteine */
.pro-design .feld { background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius-lg);
  box-shadow: none; padding: var(--ah-5) var(--ah-6); }
.pro-design .hinweis { background: var(--ah-surface-2); border-left: 3px solid var(--ah-ink-40); border-radius: var(--ah-radius); }
.pro-design .hinweis.warn { background: #FBF3E2; border-color: #C08A2B; }
.pro-design .hinweis.gefahr { background: var(--gefahr-hell); border-color: var(--ah-accent); }
.pro-design .hinweis.gut { background: var(--ah-ok-bg); border-color: var(--ah-ok); }

.pro-design .knopf { border-radius: 7px; border: 1px solid var(--ah-ink); background: var(--ah-ink); color: #fff; padding: 9px 18px; }
.pro-design .knopf:hover { background: var(--ah-accent); border-color: var(--ah-accent); color: #fff; }
.pro-design .knopf.zwei { background: #fff; color: var(--ah-ink); border-color: var(--ah-line-strong); }
.pro-design .knopf.zwei:hover { background: #fff; border-color: var(--ah-ink); color: var(--ah-ink); }
.pro-design .knopf.gefahr { background: #fff; color: #B3402E; border-color: #E8B4A9; }
.pro-design .knopf.gefahr:hover { background: var(--gefahr-hell); color: #B3402E; }
.pro-design .knopf:focus-visible, .pro-design input:focus-visible, .pro-design select:focus-visible,
.pro-design button:focus-visible { outline: 2px solid var(--ah-accent); outline-offset: 2px; }

.pro-design input[type=text], .pro-design input[type=number], .pro-design input[type=date], .pro-design select {
  border: 1px solid var(--ah-line-strong); border-radius: 7px; background: #fff; color: var(--ah-ink); }

.pro-design thead th { background: var(--ah-surface-2); color: var(--ah-ink-55); letter-spacing: .12em; font-weight: 600; }
.pro-design th, .pro-design td { border-bottom-color: var(--ah-line-soft); }

.pro-design .reiter { border-bottom: 1px solid var(--ah-line); }
.pro-design .reiter button { color: var(--ah-ink-55); border-bottom-width: 2px; margin-bottom: -1px; }
.pro-design .reiter button.aktiv { color: var(--ah-ink); border-color: var(--ah-accent); }

.pro-design .kachel { background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius-lg); box-shadow: none; }
.pro-design a.kachel:hover { border-color: var(--ah-ink); color: inherit; }
.pro-design .kachel h3 { font-family: var(--ah-serif); font-size: 20px; font-weight: 500; }
.pro-design .kachel .marke { align-self: flex-start; }

.pro-design .marke { background: var(--ah-surface-2); color: var(--ah-ink-80); }
.pro-design .marke.gut { background: var(--ah-ok-bg); color: var(--ah-ok); }
.pro-design .gross-code { background: var(--ah-surface-2); }
.pro-design .auswahl-liste { border-color: var(--ah-line); background: var(--ah-surface); }
.pro-design .k8 { background: var(--ah-ink); }

/* Kürzel, Schule, Stufe und Abmelden rechts in der Topbar (Pro.kopf) */
.pro-design .pro-wer { font-size: 13px; color: var(--ah-ink-55); gap: var(--ah-3); }
.pro-design .pro-wer button { border: 1px solid var(--ah-line-strong); border-radius: 6px; padding: 4px 10px; font-size: 12.5px; color: var(--ah-ink); background: #fff; }
.pro-design .pro-wer button:hover { border-color: var(--ah-ink); }

@media (max-width: 640px) {
  .pro-design main.ah-content { padding: var(--ah-5) var(--ah-4) var(--ah-10); }
  .pro-design .feld { padding: var(--ah-4); }
  .pro-design .pro-wer span { display: none; }
}