/* ============================================================
   KIONIER "Institut" — Basis: Reset, Header, Footer, Komponenten
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { text-wrap: balance; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--ocker);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .8rem 1.2rem; z-index: 100; }
.skip:focus { left: 0; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); word-wrap: normal;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* --- Labels + Meta --- */
.lab { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.lab--ocker { color: var(--ocker); }
.meta { font-size: .78rem; color: var(--muted); }
.meta b { font-weight: 600; color: var(--ink-soft); }

/* --- Header --- */
.hd { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.hd__top { display: flex; align-items: center; justify-content: space-between; height: 40px; border-bottom: 1px solid var(--line); font-size: .74rem; color: var(--muted); }
.hd__top .mono { font-family: var(--mono); }
.hd__in { display: flex; align-items: center; gap: 1.25rem; height: 72px; }
.hd__logo { font-family: var(--sans); font-weight: 700; font-size: 1.5rem; letter-spacing: .16em; color: var(--ink); }
.hd__logo em { font-style: normal; color: var(--amber); }
.hd__logo img { max-height: 44px; width: auto; }
.hd__nav { display: flex; gap: .2rem; margin-left: auto; }
.hd__nav ul { list-style: none; display: flex; gap: .2rem; flex-wrap: nowrap; }
.hd__nav a { font-size: .9rem; font-weight: 500; color: var(--ink-soft); padding: .7rem .6rem; display: inline-block; white-space: nowrap; }
.hd__nav a:hover, .hd__nav a[aria-current] {
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: var(--amber); text-decoration-thickness: 2px;
}

/* --- Aufklappbares Navigationsfeld "Formate & Werkzeuge" --- */
.hd__more { position: relative; }
.hd__moretoggle {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-family: inherit; font-size: .9rem; font-weight: 500; color: var(--ink-soft);
  background: none; border: none; padding: .7rem .6rem; cursor: pointer;
}
.hd__moretoggle svg { width: 10px; height: 7px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform .15s; }
.hd__moretoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.hd__moretoggle:hover, .hd__moretoggle[aria-expanded="true"] {
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: var(--amber); text-decoration-thickness: 2px;
}
.hd__panel {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(3, minmax(9rem, 1fr)); gap: 0 2.25rem;
  min-width: 33rem; padding: 1.45rem 1.7rem;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(22, 24, 29, .1);
}
.hd__panel[hidden] { display: none; }
.hd__panelhead {
  display: block; font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ocker);
  padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.hd__panel ul { display: block; }
.hd__panel a { display: block; padding: .34rem 0; font-size: .875rem; white-space: normal; }
.hd__search { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-soft); font-size: .9rem; font-weight: 500; padding: .7rem .6rem; }
.hd__search svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.hd__search input { border: none; background: none; font: inherit; color: inherit; width: 9em; }
.hd__search input::placeholder { color: var(--faint); }
.hd__cta {
  border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; font-size: .84rem;
  padding: .6rem 1.15rem; border-radius: 2px; min-height: 42px;
  display: inline-flex; align-items: center; white-space: nowrap; transition: background .15s, color .15s;
}
.hd__cta:hover { background: var(--ink); color: #fff; }
.hd__burger {
  display: none; margin-left: auto; background: none; border: 1.5px solid var(--ink);
  color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: .8rem;
  padding: .6rem 1rem; border-radius: 2px; min-height: 42px; cursor: pointer;
}
.mnav { display: none; background: var(--paper); border-bottom: 1px solid var(--line); }
.mnav.open { display: block; }
.mnav a, .mnav ul a { display: block; padding: .95rem clamp(1.25rem, 4vw, 3rem); font-size: 1rem; font-weight: 500; border-top: 1px solid var(--line); }
.mnav ul { list-style: none; }

/* --- Kacheln + Quiet-Buttons --- */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-img);
  box-shadow: 0 1px 2px rgba(22, 24, 29, .04);
  padding: 1.25rem 1.35rem;
  transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: var(--line-strong); box-shadow: 0 10px 26px rgba(22, 24, 29, .08); }
.card:hover h2 a, .card:hover h3 a {
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--amber); text-decoration-thickness: 2px;
}
.btn-quiet {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 2px;
  padding: .5rem 1rem; margin-top: 1rem; min-height: 36px;
  transition: border-color .15s, color .15s;
}
.card:hover .btn-quiet, .btn-quiet:hover { border-color: var(--ink); color: var(--ink); }
.btn-solid {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; font-size: .88rem;
  padding: .7rem 1.5rem; border-radius: 2px; min-height: 44px;
  transition: background .15s, color .15s;
}
.btn-solid:hover { background: var(--ink); color: #fff; }

/* --- Icons (Linien-Bibliothek: Nachtblau + 1 Bernstein-Akzent) --- */
.ic { width: 30px; height: 30px; stroke: var(--navy); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic .acc { stroke: var(--amber); }
.ic .accf { fill: var(--amber); stroke: none; }
.cardtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.cardtop b, .cardtop .no { margin-bottom: 0; }
.cardtop__of { font-size: .5em; font-weight: 600; }

/* --- Sektionen --- */
.sec { padding: clamp(2.6rem, 5vw, 4rem) 0; }
.sec--rule { border-bottom: 1px solid var(--line); }
.sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem; margin-bottom: 1.8rem; }
.sec__head .lab::after { content: ""; display: block; width: 44px; height: 3px; background: var(--amber); margin-top: .5rem; }
.sec__head a { font-size: .84rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; padding: .3rem 0; }
.sec__head a:hover { color: var(--ocker); }

/* --- Abschluss-CTA --- */
.endcta {
  background: var(--paper-2); border: 1px solid var(--line);
  padding: clamp(1.8rem, 3.5vw, 2.6rem); text-align: center;
  margin: clamp(2.4rem, 4.5vw, 3.5rem) 0;
}
.endcta h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin-bottom: .5rem; }
.endcta p { font-size: .94rem; color: var(--muted); max-width: 36em; margin: 0 auto; }
.endcta .btn-solid { margin-top: 1.3rem; }

/* --- Footer --- */
.ft { background: var(--navy); color: rgba(250, 248, 243, .68); padding: 3.2rem 0 2.4rem; }
.ft__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; font-size: .88rem; }
.ft__logo { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; letter-spacing: .16em; color: #fff; }
.ft__logo em { font-style: normal; color: var(--amber); }
.ft__about { margin-top: .9rem; max-width: 26em; }
.ft h4 { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #fff; margin-bottom: .9rem; }
.ft ul { list-style: none; }
.ft li a { display: inline-block; padding: .3rem 0; }
.ft a:hover { color: #fff; }
.ft__note {
  border-top: 1px solid rgba(250, 248, 243, .16); margin-top: 2.4rem; padding-top: 1.4rem;
  font-family: var(--mono); font-size: .7rem; opacity: .7; line-height: 1.8;
  display: flex; flex-direction: column; gap: .2rem;
}
.ft__note span { max-width: 78ch; }

/* --- Pagination (Archiv) --- */
.pagination, .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; font-size: .88rem; }
.nav-links .page-numbers {
  border: 1px solid var(--line-strong); border-radius: 2px; padding: .5rem .9rem;
  font-weight: 600; color: var(--ink-soft);
}
.nav-links .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.nav-links a.page-numbers:hover { border-color: var(--ink); color: var(--ink); }

/* Zwischenbereich: Kopf enger setzen, bevor auf das Burger-Menü umgestellt wird. */
@media (max-width: 1240px) {
  .hd__in { gap: .9rem; }
  .hd__nav a, .hd__moretoggle { padding-left: .42rem; padding-right: .42rem; font-size: .845rem; }
  .hd__search input { width: 4.5em; }
}

@media (max-width: 1080px) {
  .hd__nav, .hd__search, .hd__cta { display: none; }
  .hd__burger { display: inline-flex; align-items: center; }
  .hd__top { display: none; }
  .ft__grid { grid-template-columns: 1fr 1fr; }

  /* Im Burger-Menü wird das Feld untereinander aufgeklappt, nicht als Panel. */
  .mnav .hd__more { position: static; }
  .mnav .hd__moretoggle {
    display: flex; justify-content: space-between; width: 100%;
    padding: .95rem clamp(1.25rem, 4vw, 3rem); font-size: 1rem;
    border-top: 1px solid var(--line);
  }
  .mnav .hd__panel {
    position: static; display: block; min-width: 0;
    padding: 0; border: none; box-shadow: none;
  }
  .mnav .hd__panel[hidden] { display: none; }
  .mnav .hd__panelhead {
    padding: .85rem clamp(1.25rem, 4vw, 3rem) .25rem; margin: 0;
    border: none; border-top: 1px solid var(--line);
  }
  .mnav .hd__panel a { padding-left: calc(clamp(1.25rem, 4vw, 3rem) + 1rem); font-size: .95rem; }
}
@media (max-width: 640px) {
  .ft__grid { grid-template-columns: 1fr; }
}

/* --- Formulare (Kontakt, Briefing) -------------------------------------
   Kein Drittanbieter-Formularbaukasten. Die Datenschutzerklaerung sagt zu,
   dass diese Seiten nichts von fremden Servern nachladen; ein eingebundener
   Baukasten wuerde das mit dem ersten Aufruf brechen.

   Gestalterisch folgen die Formulare der Verlags-Grammatik des Themes: ruhige
   Papierflaeche wie .endcta, Haarlinien statt Schatten, kantige Felder,
   Bernstein nur als Fokusring. Die Beschriftungen tragen dieselbe
   Grossbuchstaben-Mikrotype wie .lab und .ft h4, aber in der Textschrift.
   Vorher standen sie in der Monoschrift, die im Theme den Quellen- und
   Zahlenangaben vorbehalten ist, und sahen deshalb aus wie Quelltext. ---- */
.fm { margin: 1.8rem 0 2.4rem; }
.fm__form { display: flex; flex-direction: column; gap: 1.15rem; }

/* Eigenstaendige Formulare bekommen eine Flaeche, damit sie als
   zusammengehoerige Einheit lesbar sind und nicht frei auf der Seite treiben. */
.fm:not(.fm--kompakt) .fm__form {
  background: var(--paper-2); border: 1px solid var(--line);
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
}

.fm__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.fm__zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; }
.fm__zeile .fm__feld { flex: 1 1 18rem; margin: 0; }
.fm__zeile .fm__aktion { margin: 0; }

.fm__feld { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.fm__feld label {
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.fm__feld input[type="text"],
.fm__feld input[type="email"],
.fm__feld select,
.fm__feld textarea {
  width: 100%; font-family: var(--sans); font-size: .95rem; line-height: 1.5;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 2px;
  padding: .68rem .8rem; min-height: 46px;
  transition: border-color .15s, box-shadow .15s;
}
.fm__feld input::placeholder, .fm__feld textarea::placeholder { color: var(--faint); }
.fm__feld textarea { min-height: 7.5rem; resize: vertical; line-height: 1.65; }

/* Eigener Pfeil: die Voreinstellung des Systems bringt eine fremde Rundung
   und eine fremde Farbe mit und faellt neben den kantigen Feldern auf. */
.fm__feld select {
  appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%232A2E36' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.fm__feld input:hover, .fm__feld select:hover, .fm__feld textarea:hover { border-color: var(--muted); }
.fm__feld input:focus, .fm__feld select:focus, .fm__feld textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(232, 155, 60, .3);
}

/* Zustimmungszeile: zwei Spalten, Kaestchen und Text. Als Flexbox wurde
   frueher jeder Textknoten und der Link zu einer eigenen Zelle, wodurch der
   Satz in nebeneinanderstehende Bruchstuecke zerfiel. Das Raster mit genau
   zwei Spalten kann das nicht, auch wenn spaeter ein Link dazukommt. */
.fm__wahl { font-size: .855rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.fm__wahl label {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: .65rem; align-items: start; cursor: pointer;
}
.fm__wahl input[type="checkbox"] {
  margin: .2rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--ocker); cursor: pointer;
}
.fm__wahl a { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--amber); }
.fm__wahl a:hover { color: var(--ocker); }

.fm__hinweis { font-size: .8rem; color: var(--muted); line-height: 1.6; margin: 0; }
.fm__feld .fm__hinweis { margin-top: -.05rem; }
.fm__aktion { margin: 0; }
.fm__aktion .btn-solid { min-height: 46px; background: var(--paper); }
.fm__aktion .btn-solid:hover { background: var(--ink); color: #fff; }

/* Honigtopf: fuer Menschen und Vorlesesoftware nicht erreichbar, fuer
   einfache Einsendeprogramme ein Feld wie jedes andere. */
.fm__topf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fm__meldung {
  border-left: 3px solid var(--line-strong); background: var(--paper-2);
  padding: .9rem 1.1rem; margin-bottom: 1.2rem; font-size: .92rem; line-height: 1.6;
  text-align: left;
}
.fm__meldung--gut { border-left-color: var(--ocker); }
.fm__meldung--schlecht { border-left-color: #B4342A; }

/* Kompakte Fassung in den Handlungsaufforderungen unter Beitraegen. Sie steht
   bereits in einer .endcta-Flaeche und bekommt deshalb keine eigene. */
.fm--kompakt { margin: 1.4rem auto 0; max-width: 34rem; text-align: left; }
.fm--kompakt .fm__form { gap: .9rem; }
/* .endcta p setzt eine schmalere, mittig gesetzte Textbreite. Die gilt fuer
   den Vorspann der Handlungsaufforderung, nicht fuer die Absaetze des
   Formulars: dort ruecken Zustimmungszeile und Hinweis sonst gegenueber dem
   Eingabefeld ein und die linke Kante der Gruppe bricht. */
.endcta .fm p { max-width: none; margin-left: 0; margin-right: 0; }
.fm--kompakt .fm__feld label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fm--kompakt .fm__hinweis, .fm--kompakt .fm__wahl { font-size: .78rem; }
.fm--kompakt .fm__feld input { background: var(--paper); }

@media (max-width: 640px) {
  .fm__reihe { grid-template-columns: 1fr; }
  .fm__zeile .fm__aktion, .fm__zeile .fm__aktion .btn-solid { width: 100%; justify-content: center; }
}