/* =====================================================================
   Seitenrahmen der Website kopfrechnen.krotto.de
   ---------------------------------------------------------------------
   Wird NACH gestaltung.css eingebunden. Enthaelt nur, was es in der lokalen
   Fassung nicht gibt: Kopf mit Navigation, Hinweis „Testphase", Fusszeile
   und die Startseite.

   NICHT hierher gehoeren Aufgabenkarten, Formeln, Antwortfeld und
   Rueckmeldung - die kommen unveraendert aus gestaltung.css und
   gestaltung-schuelerbereich.css (eine Umsetzung je Funktion).
   Farben immer ueber die Variablen aus gestaltung.css (--blue usw.).

   Geraete: Tablet zuerst (hoch und quer), Handy 360-390 px, PC.
   Tippflaechen mindestens 44 px hoch.
   ===================================================================== */

:root{
  --rand:16px;            /* Seitenrand auf dem Handy */
  --seitenbreite:1100px;
}
@media (min-width:600px){ :root{ --rand:24px; } }

/* Tippflaechen: mit dem Finger mindestens 44 px. Am PC mit Maus ist alles etwas
   kompakter (Kris, 23.10.2026: „fuer den PC alles etwas ueberdimensioniert") -
   Tablet und Handy melden pointer:coarse und behalten die grossen Flaechen. */
:root{ --tipp:44px; }
@media (hover:hover) and (pointer:fine){
  :root{ --tipp:34px; }
  html{ font-size:15px; }
  .seite-ueben #taskGrid{ --karte:15px; }
}

body{ display:flex; flex-direction:column; }
main.seite{ flex:1 0 auto; width:100%; }

/* Sprungmarke fuer Tastaturbedienung - erscheint nur beim Tabben */
.springmarke{
  position:absolute; left:-9999px; top:0;
  background:var(--blue); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
  z-index:100; font-weight:600;
}
.springmarke:focus{ left:0; }

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--blue); outline-offset:2px;
}

/* ------------------------------------------------------------------ */
/* KOPF                                                               */
/* ------------------------------------------------------------------ */
.kopf{
  background:#fff;
  border-bottom:2px solid var(--border);
}
.kopf-innen{
  max-width:var(--seitenbreite);
  margin:0 auto;
  padding:6px var(--rand);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:4px 16px;
}
.marke{
  display:inline-flex; align-items:center; min-height:var(--tipp);
  font-size:1.25rem; font-weight:700; color:var(--blue-dark); text-decoration:none;
  white-space:nowrap;
}
.hauptnav{ display:flex; gap:4px; }
.hauptnav a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tipp); min-width:var(--tipp); padding:0 14px;
  border-radius:8px;
  color:var(--blue); font-weight:600; text-decoration:none;
}
.hauptnav a:hover{ background:var(--blue-light); }
body[data-seite="start"]  .hauptnav a[data-ziel="start"],
body[data-seite="ueben"]  .hauptnav a[data-ziel="ueben"],
body[data-seite="archiv"] .hauptnav a[data-ziel="archiv"]{
  background:var(--blue); color:#fff;
}

/* ------------------------------------------------------------------ */
/* HINWEIS TESTPHASE - schmal, freundlich, auf jeder Seite unter dem Kopf */
/* ------------------------------------------------------------------ */
.testphase{
  background:#fff8e6;
  border-bottom:1px solid #f0dfb0;
  color:#5c4a12;
  font-size:0.9rem;
  line-height:1.4;
}
.testphase-innen{
  max-width:var(--seitenbreite);
  margin:0 auto;
  padding:4px var(--rand);
  display:flex; flex-wrap:wrap; align-items:center; gap:0 12px;
}
.testphase-innen span{ padding:6px 0; }
.testphase a{
  display:inline-flex; align-items:center; min-height:var(--tipp);
  color:var(--blue-dark); font-weight:600;
}

/* ------------------------------------------------------------------ */
/* INHALT                                                             */
/* ------------------------------------------------------------------ */
main.seite{
  max-width:var(--seitenbreite);
  margin:0 auto;
  padding:24px var(--rand) 40px;
}
/* gestaltung.css legt h1 fuer die Werkzeugleiste der lokalen Fassung fest
   (nowrap, kleiner Abstand) - auf den Seiten der Website wieder aufheben. */
main.seite h1{
  font-size:1.75rem; line-height:1.2; margin:0 0 10px;
  white-space:normal; color:var(--blue-dark);
}
main.seite h2{ font-size:1.25rem; color:var(--blue-dark); margin:0 0 10px; }
main.seite p{ line-height:1.55; }

/* ------------------------------------------------------------------ */
/* STARTSEITE                                                         */
/* ------------------------------------------------------------------ */
.einstieg p{ font-size:1.08rem; max-width:62ch; margin:0 0 22px; }

.kacheln{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:28px;
}
.kachel{
  display:flex; flex-direction:column; gap:8px;
  padding:20px 22px;
  background:#fff;
  border:2px solid var(--border);
  border-radius:12px;
  color:#1c2530; text-decoration:none;
  transition:border-color .15s, box-shadow .15s;
}
.kachel:hover{ border-color:var(--blue); box-shadow:0 3px 10px rgba(29,91,145,0.12); }
.kachel-haupt{ border-color:var(--blue); }
.kachel-titel{ font-size:1.3rem; font-weight:700; color:var(--blue-dark); }
.kachel-text{ line-height:1.5; color:#36414f; flex:1; }
.kachel-los{ font-weight:700; color:var(--blue); }

.info{
  background:#fff;
  border:2px solid var(--border);
  border-radius:12px;
  padding:18px 22px;
}
.schritte{ margin:0 0 12px; padding-left:1.4em; line-height:1.55; }
.schritte li{ margin-bottom:6px; }
.info-zeile{ margin:8px 0 0; color:var(--gray); }

/* ------------------------------------------------------------------ */
/* FUSSZEILE - so unauffaellig wie moeglich, so sichtbar wie noetig     */
/* (Impressum auf jeder Seite, als „Impressum" bezeichnet)            */
/* ------------------------------------------------------------------ */
.fuss{
  flex-shrink:0;
  text-align:center;
  font-size:0.85rem;
  color:var(--gray);
  padding:8px var(--rand) 14px;
}
.fuss a{
  display:inline-flex; align-items:center; min-height:var(--tipp); padding:0 8px;
  color:var(--gray);
}
/* Stand-Kennung: gleiche Kennung lokal und online = gleicher Stand (build.py) */
.fuss .stand{ display:block; font-size:0.75rem; color:#a8b2bd; }

/* ------------------------------------------------------------------ */
/* KOPFRECHNEN UEBEN - Auswahlbereich ueber den Aufgaben               */
/* Knoepfe und Themenliste kommen aus gestaltung.css (A2, C2); hier nur  */
/* Anordnung und groessere Tippflaechen fuer Tablet und Handy.           */
/* ------------------------------------------------------------------ */
[hidden]{ display:none !important; }

.seite-ueben h1{ margin-bottom:12px; }
.auswahl{
  background:#fff;
  border:2px solid var(--border);
  border-radius:12px;
  padding:12px 16px;
  margin-bottom:18px;
}
.auswahl-zeile{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
}
.auswahl-zeile + .auswahl-zeile{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
}
.auswahl-titel{ font-weight:600; color:var(--gray); }
.klassen{ display:flex; gap:8px; }
.auswahl .grade-btn{ min-height:var(--tipp); min-width:56px; font-size:1.1rem; }
.auswahl .btn, .uebung-fuss .btn{ min-height:var(--tipp); }
.themen-stand{ color:var(--gray); font-size:0.95rem; flex:1 1 auto; }
#neuKnopf{ margin-left:auto; }

.seite-ueben #themenPanel{ margin-top:12px; }
.themen-info{ margin:0 0 6px; font-size:0.9rem; color:var(--gray); }
.seite-ueben #themenList{ grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap:0 18px; }
.seite-ueben #themenList label{ min-height:var(--tipp); padding:4px 0; line-height:1.3; }
.seite-ueben #themenList input{ width:22px; height:22px; }
.seite-ueben .themen-actions{ flex-wrap:wrap; gap:8px; margin-top:12px; }
.seite-ueben .themen-actions button{ font-size:0.9rem; min-height:var(--tipp); }

.meldung{
  background:#fff8e6; border:1px solid #f0dfb0; color:#5c4a12;
  border-radius:8px; padding:10px 14px; font-weight:600;
}
.seite-ueben #emptyState{ margin-top:40px; }
.seite-ueben .uebung-fuss{ margin-top:18px; }

/* ------------------------------------------------------------------ */
/* HANDY                                                              */
/* ------------------------------------------------------------------ */
@media (max-width:640px){
  .kacheln{ grid-template-columns:1fr; gap:12px; }
  main.seite{ padding-top:18px; }
  main.seite h1{ font-size:1.6rem; }
  .kachel{ padding:16px 18px; }
  .info{ padding:16px 18px; }
  .auswahl{ padding:12px; }
  #neuKnopf{ margin-left:0; flex:1 1 100%; }
  .themen-stand{ flex-basis:100%; order:-1; }
  .seite-ueben .uebung-fuss{ padding:12px; }
  .seite-ueben .uebung-fuss .btn{ flex:1 1 auto; }
}
@media (max-width:400px){
  .marke{ font-size:1.12rem; }
  .hauptnav a{ padding:0 10px; }
}

/* ------------------------------------------------------------------ */
/* IMPRESSUM UND DATENSCHUTZ                                          */
/* ------------------------------------------------------------------ */
.rechtstext > *{ max-width:70ch; }
main.seite.rechtstext h2{ font-size:1.1rem; margin:26px 0 8px; }
.rechtstext address{ font-style:normal; line-height:1.55; margin:0 0 1em; }
.rechtstext ul{ line-height:1.55; padding-left:1.3em; margin:0; }
.rechtstext li{ margin-bottom:6px; }
.rechtstext a{ overflow-wrap:anywhere; }
.rechtstext-stand{ margin-top:26px; color:var(--gray); font-size:0.9rem; }

/* ------------------------------------------------------------------ */
/* ARCHIV                                                             */
/* ------------------------------------------------------------------ */
.seite-archiv > p{ max-width:62ch; }
.archiv-anmeldung{
  display:flex; flex-direction:column; gap:6px;
  max-width:360px; margin-top:18px; padding:18px 22px;
  background:#fff; border:2px solid var(--border); border-radius:12px;
}
.archiv-anmeldung label{ font-weight:600; margin-top:6px; }
.archiv-anmeldung select, .archiv-anmeldung input{
  min-height:var(--tipp); font-size:1rem; padding:6px 10px;
  border:2px solid var(--border); border-radius:8px; background:#fff;
}
.archiv-anmeldung .btn{ min-height:var(--tipp); margin-top:12px; }
.archiv-meldung{ margin:6px 0 0; color:#a12a2a; font-weight:600; }
.archiv-leer{ color:var(--gray); }

.archiv-titel{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.archiv-titel h1{ margin:0 !important; }
.archiv-titel .btn{ min-height:var(--tipp); }

.archiv-jahr{ margin-top:22px; }
.archiv-liste{ list-style:none; margin:0; padding:0; max-width:640px; }
.archiv-liste li a{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 16px;
  min-height:var(--tipp); padding:10px 16px; margin-bottom:8px;
  background:#fff; border:2px solid var(--border); border-radius:10px;
  color:#1c2530; text-decoration:none;
}
.archiv-liste li a:hover{ border-color:var(--blue); }
.archiv-datum{ font-weight:600; color:var(--blue-dark); }
.archiv-stufe{ color:var(--gray); font-size:0.95rem; }
/* Halbjahr: keine eigene Ebene, nur eine gut sichtbare Linie */
.archiv-halbjahr{
  display:flex; align-items:center; gap:12px;
  margin:14px 0 10px; color:var(--blue-dark); font-weight:700; font-size:0.95rem;
}
.archiv-halbjahr::after{ content:""; flex:1; border-top:3px solid var(--blue); opacity:.35; }

/* Archiv: eine Uebung - Tabelle wie der Korrekturbogen (archiv.js) */
.archiv-zurueck{ margin:0 0 6px; }
.archiv-zurueck a{ display:inline-flex; align-items:center; min-height:var(--tipp); font-weight:600; color:var(--blue); }
.seite-archiv .archiv-kopfzeile{ margin:0 0 14px; color:var(--gray); }

/* ------------------------------------------------------------------ */
/* RUECKMELDUNG                                                       */
/* ------------------------------------------------------------------ */
.seite-rueckmeldung > p{ max-width:62ch; }
.rm-formular{
  display:flex; flex-direction:column; gap:6px;
  max-width:560px; margin-top:18px; padding:18px 22px;
  background:#fff; border:2px solid var(--border); border-radius:12px;
}
.rm-formular label{ font-weight:600; margin-top:6px; }
.rm-formular select, .rm-formular textarea{
  min-height:var(--tipp); font:inherit; font-size:1rem; padding:6px 10px;
  border:2px solid var(--border); border-radius:8px; background:#fff;
}
.rm-formular textarea{ resize:vertical; line-height:1.45; }
.rm-formular .btn{ min-height:var(--tipp); margin-top:10px; }
.rm-frei{ font-weight:400; color:var(--gray); }
.rm-klein{ margin:0; font-size:0.9rem; color:var(--gray); }
.rm-danke{ font-size:1.1rem; font-weight:600; color:var(--green, #1e7d3c); }
.rm-hinweis{ color:var(--gray); }
/* Lockfeld: fuer Menschen unsichtbar, Programme fuellen es aus */
.rm-lockfeld{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }