/* insachenkunst — Seitenraster
   Ab 1000px exakt die Maße des alten Themes: 854 / 33 / 112.
   Darunter proportional, unter 720px einspaltig mit Navigation oben. */

.isk-seite {
  /* Innen exakt 1000px wie im Original; der Innenabstand liegt außerhalb,
     damit auf schmalen Bildschirmen trotzdem ein Rand bleibt. */
  max-width: calc(var(--isk-breite) + 2 * var(--isk-rand));
  margin: 0 auto;
  padding: 0 var(--isk-rand);
}

.isk-kopf {
  margin-top: var(--isk-kopf-oben);
  text-align: center;
}

/* Im Original steht das Logo inline; die Zeilenbox darunter erzeugt 3px
   Unterlängen-Lücke, die zum 28px-Abstand des Claims hinzukommt (= 31px).
   Hier wird die Lücke abgeschaltet und der Abstand als fester Wert gesetzt,
   damit er nicht von Schriftgröße und Zeilenhöhe abhängt. */
.isk-kopf a { display: block; line-height: 0; }
.isk-kopf img { max-width: 100%; }

.isk-claim {
  margin-top: var(--isk-claim-oben);
  font: 500 var(--isk-fs-claim)/var(--isk-zeile) var(--isk-schrift);
  color: var(--isk-claim-text);
  background: var(--isk-gruen);
  padding: 0 12px;
}

.isk-rumpf {
  display: grid;
  grid-template-columns: var(--isk-spalten);
  margin-top: var(--isk-inhalt-oben);
}

/* Im Quelltext steht die Navigation vor dem Inhalt, damit sie einspaltig
   direkt unter dem Kopf erscheint. Auf dem Desktop setzt das Raster sie
   zurück in die rechte Spalte. */
.isk-inhalt { grid-column: 1; grid-row: 1; min-width: 0; }
.isk-navi   { grid-column: 3; grid-row: 1; align-self: start; }

.isk-fuss { min-height: 200px; }

/* --- Navigation ------------------------------------------------------- */
.isk-navi ul { list-style: none; margin: 0; padding: 0; position: relative; top: -8px; }

.isk-navi li a {
  display: block;
  font: 500 var(--isk-fs-menue)/var(--isk-lh-menue) var(--isk-schrift);
  text-transform: uppercase;
  letter-spacing: .025em;
  color: var(--isk-text);
  text-decoration: none;
}

.isk-navi li a:hover,
.isk-navi li a:focus-visible,
.isk-navi li[aria-current] a,
.isk-navi li a[aria-current] { color: var(--isk-akzent-text); }

.isk-navi .isk-navi-aktion a { color: var(--isk-akzent-text); margin-top: 3em; }
.isk-navi .isk-navi-klein a  { font-size: var(--isk-fs-klein); line-height: 1.9; }
.isk-navi .isk-navi-abstand a { margin-top: 62px; }

.isk-navi-schalter { display: none; }

/* --- Mittlere Breiten -------------------------------------------------- */
@media (max-width: 999px) {
  .isk-navi li a { font-size: 18px; line-height: 28px; }
}

/* --- Schmal: einspaltig, Navigation unter dem Kopf --------------------- */
@media (max-width: 719px) {
  .isk-rumpf { display: block; margin-top: 32px; }
  .isk-kopf  { margin-top: 20px; }
  .isk-claim { font-size: 14px; padding: 6px 12px; }

  .isk-navi { margin: 0 0 32px; }
  .isk-navi ul { top: 0; }

  .isk-navi-schalter {
    display: block;
    width: 100%;
    font: 500 var(--isk-fs-menue)/1.6 var(--isk-schrift);
    text-transform: uppercase;
    letter-spacing: .025em;
    color: var(--isk-text);
    background: none;
    border: 0;
    border-top: 1px solid var(--isk-linie);
    border-bottom: 1px solid var(--isk-linie);
    padding: 10px 0;
    text-align: left;
    cursor: pointer;
  }
  .isk-navi-schalter::after { content: " ▾"; }
  .isk-navi-schalter[aria-expanded="true"]::after { content: " ▴"; }

  /* Ohne JavaScript bleibt das Menü sichtbar */
  .isk-navi[data-js] .isk-navi-liste[hidden] { display: none; }
  .isk-navi li a { padding: 6px 0; }
  .isk-navi .isk-navi-aktion a { margin-top: 1.5em; }
  .isk-navi .isk-navi-abstand a { margin-top: 1.5em; }

  .isk-fuss { min-height: 60px; }
}