/* ============================================================
   SIGGI2026 — Grundlage (Rahmen)

   Zwei Quellen:
   1. `grundgeruest.css` aus dem Buendel SIGGI2026. Sie war dort mit
      "nicht auf den Server nehmen" versehen — das galt fuer ein
      Kindtemplate, weil Cassiopeia die Regeln angeblich mitbringt.
      Sie bringt sie NICHT mit: `.card`, `.blog-item`, `.wortmarke`
      und `.site-grid.mit-spalte` gibt es dort nicht. Seit das
      Template eigenstaendig ist, gehoert die Datei hierher.
   2. Ergaenzungen fuer Joomlas eigene Ausgaben — Formularfelder,
      Blaetterung, Systemmeldungen, Abstandsklassen.

   Farben, Schriften und die Inhaltsansichten stehen in user.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sef-schrift-text, Helvetica, Arial, sans-serif);
}

@font-face {
  font-family: 'Source Sans 3';
  src: local('Source Sans 3'), local('Source Sans Pro');
  font-display: swap;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--sef-akzent);
  color: #fff;
}

.grid-child {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Kopf */
.container-header .grid-child {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem 0;
}
.wortmarke a { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; }
.wortmarke__name {
  font-family: 'Source Sans 3', Helvetica, sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sef-text);
}
.wortmarke__zusatz {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.69rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sef-akzent);
}
.container-nav { width: 100%; }
.metismenu.mod-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.metismenu.mod-menu > li > a { display: inline-block; text-decoration: none; }

/* Inhalt */
.site-grid {
  display: grid;
  gap: 2.75rem;
  max-width: 1080px;
  margin-inline: auto;
  padding: 2.5rem 1.5rem 3rem;
}
.site-grid.mit-spalte { grid-template-columns: 1fr 300px; }
.container-component { min-width: 0; }

/* Lesebreite: die Leseseite ist schmaler als die Startseite */
.lesen .site-grid { max-width: 760px; }

/* Blattfuß */
.container-footer { margin-top: 3rem; }
.container-footer .grid-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
}
.fuss-links { display: flex; gap: 1.1rem; }

/* Karten in der Seitenspalte */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  background: var(--sef-flaeche);
  border: 1px solid var(--sef-linie);
}
.card + .card { margin-top: 1.4rem; }
.card h3 { margin: 0; font-size: 1.05rem; }
.card--kreide { background: var(--sef-kreide); border: 0; }

/* Beitragsliste im Blog */
.blog-item { padding-bottom: 1.8rem; border-bottom: 1px solid var(--sef-linie); }
.blog-item + .blog-item { margin-top: 1.9rem; }
.blog-item h2 { margin: 0 0 0.5rem; }

/* Knöpfe */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 1.15rem;
  font-family: 'Source Sans 3', Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn--zweit {
  background: transparent;
  color: var(--sef-text);
  border: 1px solid #c9c2b5;
}
.btn--zweit:hover { border-color: var(--sef-akzent); color: var(--sef-akzent); }

@media (max-width: 47.99rem) {
  .site-grid.mit-spalte { grid-template-columns: 1fr; }
}

/* ============================================================
   Ergaenzungen — was weder Grundgeruest noch user.css abdecken,
   frueher aber Cassiopeia beisteuerte.
   ============================================================ */

img, svg, video { max-width: 100%; height: auto; }
.mod-list, .nav { list-style: none; margin: 0; padding: 0; }

/* Formularfelder — vor allem das Suchfeld im Kopf */
input, select, textarea, button { font: inherit; color: inherit; }
.form-control,
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], select, textarea {
  width: 100%;
  padding: .55rem .75rem;
  background: var(--sef-flaeche, #ffffff);
  border: 1px solid var(--sef-linie, #ddd8ce);
  border-radius: 4px;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--sef-akzent, #17553a);
  outline-offset: 1px;
}

/* Das Grundgeruest gibt .btn nur Form, keine Farbe. */
.btn {
  background: var(--sef-akzent, #17553a);
  color: #ffffff;
  border: 0;
  border-radius: 4px;
}
.btn:hover { background: var(--sef-kontakt, #0e3d29); }

/* Blaetterung und Systemmeldungen */
.pagination {
  display: flex; flex-wrap: wrap; gap: .3rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.page-link {
  display: block; padding: .4rem .7rem;
  border: 1px solid var(--sef-linie, #ddd8ce);
  text-decoration: none;
}
.page-item.active .page-link {
  background: var(--sef-akzent, #17553a);
  border-color: var(--sef-akzent, #17553a);
  color: #ffffff;
}
.page-item.disabled .page-link { opacity: .5; }
.alert {
  padding: .9rem 1.1rem;
  margin: 0 0 1.2rem;
  background: var(--sef-kreide, #ebe7e0);
  border: 1px solid var(--sef-linie, #ddd8ce);
  border-left: 3px solid var(--sef-akzent, #17553a);
}
.alert-danger, .alert-error { border-left-color: var(--sef-ocker, #8a5a12); }

/* Abstandsklassen aus Joomlas eigenen Ausgaben */
.mb-4 { margin-bottom: 1.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.ms-0 { margin-left: 0; }
.float-start { float: left; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Rasenstreifen ueber dem Kopf — Ansicht 01 der Spezifikation */
.rasenstreifen { height: 6px; background: var(--sef-akzent, #17553a); }

/* Suchfeld, Sliderbereich und Seitenspalte */
.container-search { max-width: 260px; }
.container-slider { margin: 0; }
.container-sidebar-right { display: flex; flex-direction: column; gap: 1.4rem; }