/* === LernIT WebApp – Hauptstylesheet === */

:root {
  --gruen-dunkel:  #0c514a;
  --gruen-mittel:  #28837a;
  --gruen-hell:    #55b0a6;
  --gruen-bg:      #e8f5f4;
  --weiss:         #ffffff;
  --grau-text:     #1a1a1a;
  --grau-leicht:   #f4f6f6;
  --grau-rand:     #d0dedd;
  --schatten:      0 2px 12px rgba(12,81,74,.15);
  --radius:        12px;
  --radius-kl:     8px;
  --trans:         .18s ease;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; height: 100%; }
body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: var(--gruen-bg);
  color: var(--grau-text);
  min-height: 100%;
  /* scrollt korrekt in iframe — kein overflow:hidden */
}
:focus-visible {
  outline: 3px solid var(--gruen-hell);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sprunglink: nur sichtbar, wenn er den Fokus hat. Erspart Tastaturnutzenden
   den Weg durch Logo und Plattformwahl bei jedem Seitenwechsel. */
.sprunglink {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--weiss);
  color: var(--gruen-dunkel);
  font-weight: 700;
  font-size: .88rem;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-kl) var(--radius-kl);
  text-decoration: none;
  box-shadow: var(--schatten);
  transition: top var(--trans);
}
.sprunglink:focus { top: 0; }

/* === Header === */
.header {
  background: var(--gruen-dunkel);
  color: var(--weiss);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  height: 60px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header__logo { height: 36px; display: block; }
.header__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .01em;
}
/* Schulname in der Schulversion – leer und damit unsichtbar in der Vollversion */
.header__schule {
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  padding: 3px 10px;
  border-left: 2px solid rgba(255,255,255,.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header__schule:empty { display: none; }

.header__plattform {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.plattform-btn {
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  color: var(--weiss);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--trans);
  text-decoration: none;
  line-height: 1.4;
}
.plattform-btn:hover { background: rgba(255,255,255,.15); border-color: var(--weiss); }
.plattform-btn.aktiv  { background: var(--weiss); color: var(--gruen-dunkel); border-color: var(--weiss); }

/* === Breadcrumb === */
.breadcrumb {
  padding: 14px 28px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--gruen-mittel);
  flex-wrap: wrap;
}
/* Dunkelgrün: Mittelgrün erreicht auf dem hellgrünen Grund nur 4.1:1 (WCAG AA verlangt 4.5:1) */
.breadcrumb a { color: var(--gruen-dunkel); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { color: #56615f; }
.breadcrumb__aktuell { color: var(--grau-text); font-weight: 600; }

/* === Hauptinhalt === */
.main { padding: 20px 28px 48px; max-width: 1200px; margin: 0 auto; }

/* === Zurück-Knopf (eine Ebene hoch) === */
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--weiss);
  color: var(--gruen-dunkel);
  border: 2px solid var(--grau-rand);
  border-radius: 22px;
  padding: 7px 16px 7px 13px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--schatten);
  transition: var(--trans);
  margin-bottom: 16px;
}
.zurueck:hover { border-color: var(--gruen-hell); background: var(--gruen-bg); }
.zurueck__pfeil { font-size: 1.05rem; line-height: 1; }
/* Variante am Seitenende */
.zurueck-unten { margin-top: 32px; }
.zurueck-unten .zurueck { margin-bottom: 0; }

/* === Sektion-Überschrift === */
.sektion-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.sektion-header__icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--weiss);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--schatten);
}
.sektion-header__titel {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gruen-dunkel);
}
.sektion-header__count {
  margin-left: auto;
  font-size: .85rem;
  color: var(--gruen-mittel);
  font-weight: 500;
  background: var(--weiss);
  border-radius: 12px;
  padding: 3px 12px;
  box-shadow: var(--schatten);
  white-space: nowrap;
}

/* === Kachel-Grid === */
.kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 16px;
}

/* === Einzelne Kachel === */
.kachel {
  position: relative;
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 20px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans);
  border: 2px solid transparent;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.kachel:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(12,81,74,.22);
  border-color: var(--gruen-hell);
}
.kachel:active { transform: translateY(0); }

.kachel__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--gruen-bg);
  padding: 8px;
}
.kachel__label {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gruen-dunkel);
}
.kachel__count {
  font-size: .72rem;
  color: #22736b;   /* etwas dunkler als Mittelgrün: 5:1 auch auf hellgrünem Grund */
  font-weight: 500;
}

/* Video-Thumbnail als Kachelbild */
.kachel__icon--thumb {
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--gruen-bg);
  padding: 0;
}

/* ---------------------------------------------------------------------------
   Zwei Kachelarten, klar unterscheidbar
   Vorher trennte sie nur die Icon-Groesse - auf einer Seite mit Bereichen UND
   direkten Videos waren sie kaum auseinanderzuhalten. Jetzt trennen sie
   Hintergrund, Rahmen und ein Symbol: Bereiche fuehren weiter (Pfeil),
   Videos spielen ab (Dreieck).
   --------------------------------------------------------------------------- */

/* Bereich / Gruppe - fuehrt eine Ebene tiefer */
.kachel--thema {
  padding: 24px 14px 30px;
  background: var(--gruen-bg);
  border-color: rgba(12,81,74,.10);
}
.kachel--thema .kachel__icon { width: 68px; height: 68px; background: var(--weiss); }
.kachel--thema .kachel__label { font-size: .9rem; }
.kachel--thema::after {
  content: "›";
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gruen-mittel);
  opacity: .55;
  transition: transform var(--trans), opacity var(--trans);
}
.kachel--thema:hover::after { opacity: 1; transform: translateX(3px); }

/* Video - oeffnet das Abspielfenster */
.kachel--video {
  padding-top: 26px;
}
.kachel--video::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 11px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--gruen-dunkel);
  opacity: .9;
}
.kachel--video::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 18px;
  border-style: solid;
  border-width: 4.5px 0 4.5px 7px;
  border-color: transparent transparent transparent var(--weiss);
}
.kachel--video:hover::before { opacity: 1; }

/* === Untersektion-Trenner === */
.untersektion {
  margin-top: 36px;
}
.untersektion__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--grau-rand);
}
.untersektion__icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  background: var(--weiss);
  border-radius: 8px;
  padding: 4px;
  box-shadow: var(--schatten);
}
.untersektion__titel {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gruen-dunkel);
}

/* === Video-Modal === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: fade-in .15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: 0 8px 48px rgba(0,0,0,.35);
  width: 100%;
  max-width: 860px;
  overflow: hidden;
  animation: slide-up .2s ease;
}
@keyframes slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal__header {
  background: var(--gruen-dunkel);
  color: var(--weiss);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}
.modal__titel {
  font-size: 1rem;
  font-weight: 700;
  flex: 1;
  padding-right: 12px;
}
.modal__close {
  background: rgba(255,255,255,.15);
  border: none;
  color: var(--weiss);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans);
  flex-shrink: 0;
}
.modal__close:hover { background: rgba(255,255,255,.3); }

.modal__video {
  position: relative;
  padding-top: 56.25%;
  background: #000;
}
.modal__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.modal__footer {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--grau-rand);
  font-size: .8rem;
  color: var(--gruen-mittel);
}
.modal__weiter {
  background: var(--gruen-mittel);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 7px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.modal__weiter:hover { filter: brightness(1.1); }

/* Direktlink auf ein einzelnes Video in die Zwischenablage */
.modal__link-kopieren {
  background: none;
  border: 1px solid var(--grau-rand);
  border-radius: 14px;
  padding: 4px 12px;
  font: inherit;
  font-size: .78rem;
  color: var(--gruen-mittel);
  cursor: pointer;
  transition: var(--trans);
  white-space: nowrap;
}
.modal__link-kopieren:hover {
  border-color: var(--gruen-hell);
  background: var(--gruen-bg);
  color: var(--gruen-dunkel);
}

/* === Plattform-Auswahl (Startseite) === */
.start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 680px;
  margin: 60px auto 0;
}
.start-card {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  text-decoration: none;
  color: var(--gruen-dunkel);
  border: 3px solid transparent;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.start-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 28px rgba(12,81,74,.22);
  border-color: var(--gruen-hell);
}
.start-card__icon { width: 88px; height: 88px; object-fit: contain; }
.start-card__label { font-size: 1.3rem; font-weight: 700; }
.start-card__count { font-size: .85rem; color: var(--gruen-mittel); }

/* === Suchleiste === */
.suche-wrap {
  margin-bottom: 22px;
}
.suche {
  width: 100%;
  max-width: 420px;
  padding: 10px 16px;
  border: 2px solid var(--grau-rand);
  border-radius: 24px;
  font-size: .95rem;
  outline: none;
  transition: border-color var(--trans);
  background: var(--weiss);
}
.suche:focus { border-color: var(--gruen-hell); }

/* «Bereiche»-Überschrift, nur während der Suche sichtbar */
.bereiche-titel {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gruen-mittel);
  margin-bottom: 12px;
}

/* Suchergebnis klar von den Bereichen abgesetzt */
.suche-ergebnis__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.suche-ergebnis__count {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gruen-dunkel);
}
.suche-ergebnis__q { font-size: .9rem; color: var(--gruen-dunkel); }   /* Mittelgrün erreicht auf dem Seitengrund 4.5:1 nicht */
/* Fehlertolerante Suche: Vorschlag bei Tippfehlern, Treffer auf anderen Plattformen */
.suche-ergebnis__meinten {
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--gruen-dunkel);
  background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer;
}
.suche-ergebnis__weitere { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.suche-ergebnis__auch {
  font-size: .86rem; font-weight: 600; color: var(--gruen-dunkel); text-decoration: none;
  background: var(--weiss); border: 1px solid var(--grau-rand); border-radius: 999px; padding: 5px 12px;
}
.suche-ergebnis__auch:hover { border-color: var(--gruen-hell); }
/* Themen-Pfad in plattformweiten Suchtreffern */
.kachel__pfad {
  font-size: .68rem;
  color: var(--gruen-mittel);
  line-height: 1.3;
}

/* === Lernpfad ===
   Geführte Abfolge von Videos. Hebt sich durch die nummerierten Stationen und
   den Fortschritt von den Kachelseiten ab, bleibt aber in deren Formensprache. */
.lp-hinweis {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 18px;
  align-items: center;
  background: var(--gruen-dunkel);
  color: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px 24px;
  margin-bottom: 24px;
  text-decoration: none;
  transition: transform var(--trans), box-shadow var(--trans);
}
.lp-hinweis:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(12,81,74,.3); }
.lp-hinweis__marke {
  grid-column: 1; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #8fd3cb;   /* auf Dunkelgrün 5.4:1 */
}
.lp-hinweis__titel { grid-column: 1; font-size: 1.15rem; font-weight: 700; }
.lp-hinweis__text  { grid-column: 1; font-size: .88rem; opacity: .85; }
.lp-hinweis__stand {
  grid-column: 2; grid-row: 1 / span 3;
  background: rgba(255,255,255,.14); border-radius: 20px;
  padding: 6px 14px; font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.lp-hinweis__stand::after { content: " ›"; }

.lp { max-width: 860px; }
.lp-kopf {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 24px 28px;
  margin-bottom: 26px;
}
.lp-kopf__marke {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gruen-mittel);
}
.lp-kopf__titel { font-size: 1.55rem; color: var(--gruen-dunkel); margin: 2px 0 6px; }
.lp-kopf__text  { color: #445; font-size: .95rem; margin-bottom: 16px; }
.lp-fortschritt {
  height: 10px; border-radius: 5px; background: var(--gruen-bg); overflow: hidden;
}
.lp-fortschritt__balken {
  display: block; height: 100%; width: 0;
  background: var(--gruen-mittel); border-radius: 5px;
  transition: width .4s ease;
}
.lp-kopf__zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.lp-kopf__zahl { font-size: .88rem; font-weight: 600; color: var(--gruen-dunkel); }
.lp-weiter {
  background: var(--gruen-dunkel); color: var(--weiss); border: 0;
  border-radius: 22px; padding: 9px 18px; font: inherit; font-size: .88rem;
  font-weight: 600; cursor: pointer; transition: var(--trans);
}
.lp-weiter:hover { background: var(--gruen-mittel); }
.lp-weiter[hidden] { display: none; }

.lp-stationen { list-style: none; display: grid; gap: 18px; }
.lp-station {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 20px 24px;
}
.lp-station__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lp-station__nr {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--gruen-bg); color: var(--gruen-dunkel);
  display: grid; place-items: center; font-weight: 700;
}
.lp-station__titel { font-size: 1.15rem; color: var(--gruen-dunkel); }
.lp-station__text { color: #445; font-size: .92rem; line-height: 1.5; margin-bottom: 10px; }
.lp-station__link {
  display: inline-block; margin-top: 6px; font-weight: 600;
  color: var(--gruen-mittel); text-decoration: none;
}
.lp-station__link:hover { text-decoration: underline; }

.lp-schritte { list-style: none; display: grid; gap: 6px; }
.lp-schritt {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--radius-kl);
  border: 1px solid var(--grau-rand);
}
.lp-schritt__haken {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--grau-rand); display: grid; place-items: center;
  font-size: .8rem; color: var(--weiss);
}
.lp-schritt--erledigt { background: var(--gruen-bg); border-color: transparent; }
.lp-schritt--erledigt .lp-schritt__haken {
  background: var(--gruen-mittel); border-color: var(--gruen-mittel);
}
.lp-schritt--erledigt .lp-schritt__haken::after { content: "✓"; }
.lp-schritt__titel { flex: 1; min-width: 160px; font-weight: 600; font-size: .92rem; }
.lp-schritt__videos { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-abspielen {
  background: var(--weiss); color: var(--gruen-dunkel);
  border: 2px solid var(--grau-rand); border-radius: 18px;
  padding: 5px 13px; font: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: var(--trans);
}
.lp-abspielen:hover { border-color: var(--gruen-hell); background: var(--gruen-bg); }
.lp-fuss { margin-top: 18px; font-size: .8rem; color: #667; }
.lp-zuruecksetzen {
  background: none; border: 0; padding: 0; margin-left: 6px;
  font: inherit; color: var(--gruen-mittel); text-decoration: underline; cursor: pointer;
}
@media (max-width: 640px) {
  .lp-hinweis { grid-template-columns: 1fr; padding: 16px 18px; }
  .lp-hinweis__stand { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .lp-kopf, .lp-station { padding: 18px; }
}

/* === Footer === */
.footer {
  text-align: center;
  padding: 18px 16px 24px;
}
.footer__link {
  color: var(--gruen-dunkel);
  font-size: .78rem;
  text-decoration: none;
  margin: 0 6px;
}
.footer__link:hover { text-decoration: underline; }
/* Version der Plattform. Leise gehalten - sie ist fuer Rueckmeldungen da
   ("bei mir geht das nicht"), nicht fuer die taegliche Nutzung. */
.footer__version {
  color: #5e6d6b;   /* mind. 4.5:1 auf dem Seitengrund (vorher 2.6:1) */
  font-size: .72rem;
  margin-left: 12px;
}
/* Im Embed-Modus (?p=…) gehört das Impressum auf die Hauptseite, nicht in den Rahmen */
.embed .footer { display: none; }
/* Als installierte Web-App bleibt die Fusszeile mit Impressum und Datenschutz */
.embed.app .footer { display: block; }
/* Ebenso der Link «nur Windows/iPad» (?nur=…): feste Plattform, aber normale Webseite */
.embed.nur .footer { display: block; }
.netz-hinweis { margin: 0; padding: 8px 16px; text-align: center; font-size: .9rem; font-weight: 600;
  background: #f6eddf; color: #5a4220; border-bottom: 1px solid #e3cfae; }
.netz-hinweis[hidden] { display: none; }

/* === Impressum === */
.impressum { max-width: 720px; }
.impressum__titel {
  font-size: 1.4rem;
  color: var(--gruen-dunkel);
  margin-bottom: 6px;
}
.impressum__projekt {
  font-weight: 600;
  color: var(--gruen-dunkel);
  margin-bottom: 18px;
}
.impressum__h2 {
  font-size: 1.05rem;
  color: var(--gruen-dunkel);
  margin: 24px 0 8px;
}
.impressum__text { line-height: 1.6; font-size: .95rem; }
.impressum__schulen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.impressum__schule {
  background: var(--weiss);
  border-radius: var(--radius-kl);
  box-shadow: var(--schatten);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--gruen-dunkel);
}
.impressum__logo {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  object-fit: contain;
}
.impressum__schule-name { line-height: 1.3; }
.impressum__ort { font-size: .78rem; color: var(--gruen-mittel); font-weight: 400; }

/* === Leer-Zustand === */
.leer {
  text-align: center;
  padding: 48px 0;
  color: var(--gruen-mittel);
  font-size: .95rem;
}

/* Such-Ergebnisbereich deutlich von den Bereichen darüber absetzen */
#suche-ergebnis {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 2px solid var(--grau-rand);
}

/* === Responsiv === */

/* Tablet / iPad quer (bis 1024px): etwas kompakter, Inhalt bleibt zentriert */
@media (max-width: 1024px) {
  .main { padding: 18px 22px 44px; }
  .breadcrumb { padding: 12px 22px 0; }
}

/* iPad hoch & kleine Tablets (bis 820px) */
@media (max-width: 820px) {
  .start-grid { gap: 22px; margin-top: 40px; }
  .start-card { padding: 32px 22px; }
  .start-card__icon { width: 72px; height: 72px; }
  .sektion-header__titel { font-size: 1.3rem; }
}

/* Telefon (bis 640px) */
@media (max-width: 640px) {
  .header { padding: 0 14px; gap: 10px; height: 54px; }
  .header__logo { height: 30px; }
  .header__title { font-size: 1rem; }
  /* Schulname darf den Umschalter nicht verdrängen – kürzen statt umbrechen */
  .header__schule { font-size: .75rem; padding: 2px 7px; max-width: 34vw; }
  .header__plattform { gap: 6px; }
  .plattform-btn { padding: 4px 11px; font-size: .8rem; }

  .main { padding: 14px 14px 36px; }
  .breadcrumb { padding: 10px 14px 0; font-size: .8rem; }

  .kachel-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; }
  .kachel { padding: 14px 8px 12px; }
  .kachel__icon { width: 48px; height: 48px; }
  .kachel--thema .kachel__icon { width: 56px; height: 56px; }

  .sektion-header { gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
  .sektion-header__titel { font-size: 1.2rem; }

  .start-grid { grid-template-columns: 1fr; max-width: 340px; margin-top: 28px; }
  .start-card { padding: 28px 22px; }

  .suche { max-width: 100%; }

  /* Modal nimmt fast den ganzen Schirm ein, Video bleibt 16:9 */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal {
    max-width: 100%;
    border-radius: 0;
    margin: auto 0;
    align-self: center;
    width: 100%;
  }
  .modal__footer { flex-wrap: wrap; gap: 4px; }
}

/* Sehr schmale Telefone: zwei Spalten garantiert */
@media (max-width: 360px) {
  .kachel-grid { grid-template-columns: 1fr 1fr; }
}

/* Touch-Geräte: kein „klebriger“ Hover-Lift nach dem Tippen */
@media (hover: none) {
  .kachel:hover, .start-card:hover {
    transform: none;
    box-shadow: var(--schatten);
    border-color: transparent;
  }
}

/* Nur für Screenreader (z.B. die Hauptüberschrift der Start- und Plattformansicht) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.impressum__text + .impressum__text { margin-top: 10px; }
.impressum a { color: var(--gruen-dunkel); font-weight: 600; }

/* Einstieg auf der Startseite (nur öffentliche Vollversion) und Seite «Über LernIT» */
.lernit-intro { max-width: 680px; margin: 44px auto 0; text-align: center; }
.lernit-intro__titel { font-size: 1.6rem; line-height: 1.25; color: var(--gruen-dunkel); margin: 0 0 10px; }
.lernit-intro__text { font-size: 1rem; line-height: 1.6; color: #334; margin: 0 auto 12px; max-width: 58ch; }
.lernit-intro__mehr { color: var(--gruen-dunkel); font-weight: 700; text-decoration: none; }
.lernit-intro__mehr:hover { text-decoration: underline; }
.lernit-intro + .start-grid { margin-top: 32px; }
.ueber__liste { margin: 0 0 12px 20px; line-height: 1.6; font-size: .95rem; }
.ueber__liste li { margin-bottom: 6px; }
.footer__link[hidden] { display: none; }
@media (max-width: 600px) {
  .lernit-intro { margin-top: 28px; padding: 0 4px; }
  .lernit-intro__titel { font-size: 1.3rem; }
  .lernit-intro + .start-grid { margin-top: 22px; }
}