/* Aus dem Haus: der Aushang neben dem Verzeichnis im Hauseingang.
   Baut auf styles.css der Startseite auf (Farben, Schrift, Fuß, Dialoge).
   Jeder Aushang trägt seine Abteilung als Türschild und sein Datum als
   Stempel in Code Pro. Keine neue Farbe: das Rot bleibt der Sieben,
   den Fokusringen und dem Fuß vorbehalten. */

.aushang-kopfleiste {
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}
.aushang-kopfleiste .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Sichtbarer Weg zurück: die Wortmarke allein erkennt nicht jeder als Link */
.aushang-heim {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease;
}
.aushang-heim:hover { border-color: var(--ink); }
.aushang-heim b { font-weight: 400; }
@media (max-width: 400px) {
  .aushang-heim { padding: 10px 12px; font-size: 0.875rem; }
  .aushang-heim-zur { display: none; }
}
.aushang-marke {
  font-family: "Code Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.125rem);
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.aushang-marke:focus-visible,
.aushang-seite a:focus-visible {
  outline: 2px solid var(--knall);
  outline-offset: 3px;
}

/* Bühne: der Titel in der Hausschrift, groß wie die Überschrift eines
   Aushangs. Code Pro bleibt Wortmarke und Datumsstempel vorbehalten. */
.aushang-buehne { padding: 64px 0 36px; }
.aushang-titel {
  max-width: 20ch;
  margin: 0 0 18px;
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  text-wrap: balance;
}
.aushang-unterzeile {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.0625rem;
  text-wrap: pretty;
}
.aushang-unterzeile a { color: var(--ink); text-underline-offset: 4px; }

.stempel { margin: 0; }
.stempel time { display: grid; gap: 4px; }
.stempel-tag {
  font-family: "Code Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 2.5rem;
  letter-spacing: -.02em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.stempel-jahr { color: var(--muted); font-size: 0.8125rem; }

/* Türschild: die Abteilung als kleines gerahmtes Schild */
.tuerschild {
  display: inline-block;
  margin: 16px 0 0;
  padding: 5px 9px 4px;
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.aushang-leer { color: var(--muted); font-size: 1.125rem; }

/* Einzelner Aushang */
.aushang-artikel { padding: 56px 0 0; }
.aushang-artikel-kopf {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.aushang-artikel-kopf h1 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2.125rem, 1.2rem + 3.4vw, 4rem);
  letter-spacing: -.04em;
  line-height: 1.02;
  text-wrap: balance;
}
.aushang-material {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  max-width: 900px;
  margin: 44px 0 0 204px;
}
.aushang-material img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--card);
  border: 1px solid var(--line);
}
.aushang-artikel-text {
  max-width: 62ch;
  margin: 44px 0 0 204px;
  font-size: 1.125rem;
  line-height: 1.65;
}
.aushang-artikel-text p { margin: 0 0 1.05em; text-wrap: pretty; }
.aushang-artikel-text h2 {
  margin: 1.6em 0 .45em;
  font-size: 1.375rem;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.aushang-artikel-text ul { margin: 0 0 1.05em; padding-left: 1.1em; }
.aushang-artikel-text a { text-underline-offset: 4px; }
.aushang-artikel-text a:hover { text-decoration-thickness: 2px; }
.aushang-artikel-text .aushang-ziel { margin-top: 8px; font-size: 1rem; }
/* Kein Adress-Link, sondern ein Markenname: darf umbrechen */
.aushang-ziel { white-space: normal; }
.aushang-zurueck { margin: 56px 0 0; font-size: 0.9375rem; }
.aushang-zurueck a { text-underline-offset: 4px; }


@media (max-width: 900px) {
  .aushang-artikel-kopf { grid-template-columns: 140px minmax(0, 1fr); }
  .aushang-artikel-text,
  .aushang-material { margin-left: 174px; }
}

@media (max-width: 680px) {
  .aushang-buehne { padding: 44px 0 28px; }
  .aushang-unterzeile { font-size: 1rem; }
  /* Auf dem Handy zuerst Datum und Abteilung in einer Zeile, dann der Titel */
  .aushang-artikel-kopf { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .aushang-kennung { display: flex; gap: 14px; align-items: center; }
  .stempel time { display: flex; gap: 8px; align-items: baseline; }
  .stempel-tag { font-size: 1.75rem; }
  .tuerschild { margin: 0; }
  .aushang-artikel { padding-top: 36px; }
  .aushang-material { margin: 28px 0 0; gap: 10px; }
  .aushang-artikel-text { margin: 28px 0 0; font-size: 1.0625rem; }
}

/* ---------------------------------------------------------------------
   Rubrik: Reiter je Abteilung, oben der neueste Aushang groß, darunter
   das Register. Dicht gebaut, damit es bei hundert Aushängen trägt.
   --------------------------------------------------------------------- */
.reiter { margin: 30px 0 0; }
.reiter ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.reiter a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  padding: 11px 16px 10px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease;
}
.reiter a:hover { border-color: var(--ink); }
.reiter a[aria-current="page"] { color: #fff; background: var(--ink); border-color: var(--ink); }
.reiter-zahl { color: var(--muted); font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.reiter a[aria-current="page"] .reiter-zahl { color: rgba(255, 255, 255, .7); }

.aushang-brett { padding: 12px 0 0; }
/* Die Leiste kommt aus styles.css; hier nur kleiner, die Bühne steht darüber */
.aushang-brett .brett-name { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); }
.register-block { margin-top: 24px; }
.register-monat {
  margin: 40px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.register { margin: 0; padding: 0; list-style: none; }
.register li { border-bottom: 1px solid var(--line); }
.register-zeile {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  padding: 16px 8px;
  text-decoration: none;
  transition: background-color .15s ease;
}
.register-zeile:hover { background: var(--card); }
.register-zeile:hover .register-titel { text-decoration: underline; text-underline-offset: 4px; }
.register-zeile:focus-visible { outline: 2px solid var(--knall); outline-offset: -2px; }
.register-zeile time {
  font-family: "Code Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.register-titel { font-size: 1.1875rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; text-wrap: balance; }
.register-abteilung {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Unter einem Aushang: mehr aus der Abteilung, daneben Neues im Haus */
.aushang-weitere { padding: 88px 0 0; }
.weitere-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 48px; }
.weitere-raster .register-monat { margin-top: 0; }
.weitere-raster .register-zeile { grid-template-columns: 4.4rem minmax(0, 1fr); }
.weitere-raster .register-abteilung { display: none; }
.weitere-link { margin: 18px 0 40px; font-weight: 600; }
.weitere-link a { text-underline-offset: 4px; }

@media (max-width: 680px) {
  /* Reiter wischbar in einer Zeile, bis an den Bildschirmrand */
  .reiter { margin: 24px -16px 0; }
  .reiter ul { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px 4px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .reiter ul::-webkit-scrollbar { display: none; }
  .reiter li { scroll-snap-align: start; }
  /* Register: oben Datum und Abteilung, darunter der Titel */
  .register-zeile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "datum abteilung" "titel titel";
    gap: 4px 12px;
    padding: 13px 0;
  }
  .register-zeile time { grid-area: datum; font-size: 1.125rem; }
  .register-abteilung { grid-area: abteilung; font-size: 0.6875rem; }
  .register-titel { grid-area: titel; font-size: 1.0625rem; }
  .weitere-raster .register-zeile { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "datum titel"; }
  .weitere-raster .register-zeile time { align-self: baseline; }
  .aushang-weitere { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .reiter a, .register-zeile { transition: none; }
}

/* Rechtstexte unter eigener Adresse (Datenschutz) */
.rechtstext h1 {
  margin: 0 0 8px;
  font-size: clamp(2.125rem, 1.2rem + 3.4vw, 4rem);
  letter-spacing: -.04em;
  line-height: 1.02;
}
.rechtstext .aushang-artikel-text { margin-left: 0; font-size: 1rem; }
.rechtstext h3 { margin: 1.8em 0 .4em; font-size: 1.125rem; font-weight: 600; }

/* Datenschutz als Seite: Register klebt beim Scrollen oben */
.rechtstext .ds-kopf { margin-top: 28px; }
.rechtstext .ds-register { top: 24px; }