/* =========================================================================
   Amt für Kleinigkeiten und Schick-Schnack — Stilblatt
   Grundlage: Gestaltungsrichtlinie (CI-Book), Az. IV/07, Fassung 1.0
   ========================================================================= */

/* --- Design-Tokens (§ 5 Schrift, § 6 Farbe der Gestaltungsrichtlinie) --- */
:root {
  /* Farbwelt des Amtes */
  --aktenschwarz: #1D1B18;   /* Regelfarbe Text und Marke        */
  --amtsblau:     #2F3550;   /* Leitfarbe der Website            */
  --stempelrot:   #8C2B1F;   /* Vermerke, sparsam                */
  --aktenpapier:  #F4F1E8;   /* Grundfläche Drucksache           */
  --pult:         #E4E0D5;   /* Hintergrund des Aushangs         */

  /* Hilfstöne für Linien, Raster, Sekundärtext */
  --ton-braun:    #6F6350;
  --ton-grau:     #9A9184;
  --ton-hell:     #DDD8CC;

  /* Fein abgestufte Gebrauchstöne (aus der Vorlage) */
  --text-weich:   #3f392f;
  --text-leise:   #4a4338;
  --linie-mitte:  #8a8172;
  --linie-fein:   #cfc8b8;
  --linie-zart:   #d8d1c0;
  --marke-linie:  #b9b2a1;
  --fuss-text:    #7a7162;
  --etikett:      #6a6153;

  /* Schriften (§ 5) */
  --schrift-versal: 'Oswald', 'Arial Narrow', sans-serif;      /* Marke & Versalzeilen   */
  --schrift-text:   'Special Elite', 'Courier New', monospace;  /* Fließtext im Netz      */
  --schrift-titel:  'Old Standard TT', 'Times New Roman', serif;/* Überschriften im Druck */

  /* Maße */
  --spalte-max: 980px;
}

/* --- Zurücksetzen --- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pult);
  color: var(--aktenschwarz);
  font-family: var(--schrift-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--amtsblau);
  text-decoration: none;
  border-bottom: 1px solid var(--marke-linie);
}
a:hover,
a:focus-visible {
  color: var(--stempelrot);
  border-bottom-color: var(--stempelrot);
}

/* Sichtbarer Fokus für Tastaturbedienung */
:focus-visible {
  outline: 2px solid var(--amtsblau);
  outline-offset: 3px;
}

/* --- Aushangfläche (Seitengerüst) --- */
.sheet {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 64px;
}

/* --- Kopf: Dienststempel + Bereiche --- */
.masthead {
  width: 100%;
  max-width: var(--spalte-max);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--aktenschwarz);
}

.masthead__brand {
  display: block;
  border-bottom: 0;            /* Marke trägt keine Linkunterstreichung */
  line-height: 0;
}
.masthead__brand:hover,
.masthead__brand:focus-visible { border-bottom: 0; }

.masthead__stamp {
  width: 230px;
  height: auto;
  display: block;
}

.masthead__nav {
  display: flex;
  gap: 26px;
  padding-bottom: 6px;
  font-family: var(--schrift-versal);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--etikett);
}

/* --- Amtliche Mitteilung (Hauptdrucksache) --- */
.notice {
  width: 100%;
  max-width: var(--spalte-max);
  margin-top: 34px;
  padding: 56px 60px 52px;
  background: var(--aktenpapier);
  border: 1px solid var(--linie-fein);
  box-shadow: 0 14px 34px rgba(40, 34, 25, 0.10);
}

.notice__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--schrift-versal);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--linie-mitte);
}

.notice__headline {
  margin: 26px 0 0;
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.42;
  letter-spacing: -0.01em;
  min-height: 114px;           /* hält die Höhe konstant, während getippt wird */
  color: var(--aktenschwarz);
}

.notice__rule {
  height: 2px;
  background: var(--aktenschwarz);
  margin: 30px 0 26px;
}

.notice__body {
  margin: 0;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.95;
  color: var(--text-weich);
}

.notice__signature {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.notice__signature-line {
  width: 52px;
  height: 2px;
  background: var(--linie-mitte);
}
.notice__signature-label {
  font-family: var(--schrift-versal);
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--amtsblau);
}

.notice__facts {
  margin: 44px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--linie-zart);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--etikett);
}
.notice__fact dt {
  font-family: var(--schrift-versal);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aktenschwarz);
  margin-bottom: 6px;
}
.notice__fact dd { margin: 0; }

/* --- Schreibmaschinen-Kopfzeile --- */
.typewriter {
  padding-right: 6px;
  border-right: 3px solid var(--aktenschwarz);
  animation: afkus-caret 1s step-end infinite;
}

@keyframes afkus-caret {
  0%, 45%   { border-right-color: var(--aktenschwarz); }
  50%, 100% { border-right-color: transparent; }
}

/* --- Fußzeile (Kolophon) --- */
.colophon {
  width: 100%;
  max-width: var(--spalte-max);
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fuss-text);
}
/* Rechtslinks in der Fußzeile: dezent, erst beim Überfahren farbig. */
.colophon a {
  color: var(--fuss-text);
  border-bottom: 0;
}
.colophon a:hover,
.colophon a:focus-visible { color: var(--stempelrot); }
.colophon a[aria-current="page"] { color: var(--aktenschwarz); }

/* =========================================================================
   Unterseiten: statische Überschrift und Rechtstexte
   ========================================================================= */

/* Ohne Tippanimation entfällt die reservierte Bauhöhe der Startseite. */
.notice__headline--static { min-height: 0; }

.legal__section { margin-top: 30px; }
.legal__section:first-child { margin-top: 0; }

.legal__marker {
  font-family: var(--schrift-versal);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--etikett);
  margin-bottom: 8px;
}

.legal__title {
  margin: 0 0 10px;
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--aktenschwarz);
}

.legal p,
.legal address,
.legal ul {
  margin: 0 0 12px;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-weich);
}
.legal address { font-style: normal; }
.legal ul { padding-left: 20px; }
.legal :last-child { margin-bottom: 0; }

/* Platzhalter, die noch mit echten Angaben zu füllen sind (Vermerkfarbe). */
.ph {
  color: var(--stempelrot);
  font-style: normal;
}

/* =========================================================================
   Anpassung an kleinere Formate
   ========================================================================= */
@media (max-width: 720px) {
  .sheet { padding: 24px 16px 40px; }

  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .masthead__stamp { width: 200px; }
  .masthead__nav { gap: 18px; font-size: 11px; }

  .notice { margin-top: 24px; padding: 32px 24px 30px; }
  .notice__headline { font-size: 28px; min-height: 0; }
  .notice__body { font-size: 16px; line-height: 1.85; }

  .notice__facts { grid-template-columns: 1fr; gap: 18px; }

  .colophon {
    flex-direction: column;
    gap: 6px;
  }
}

/* =========================================================================
   Bewegung reduzieren: kein Tippen, keine blinkende Schreibmarke
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .typewriter {
    animation: none;
    border-right-color: transparent;
  }
}