/* MonthOff – Rechtsseiten auf elephanttrails.de.
   Riso-Optik: Papier, Tinte, drei Druckfarben, keine Verläufe, keine Schatten,
   eckig – rund sind nur Kreise. Schriften liegen auf dem eigenen Server
   (SIL Open Font License, siehe schrift/OFL-*.txt). */

@font-face { font-family: "Anton"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("schrift/anton.woff") format("woff"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("schrift/newsreader.woff") format("woff"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("schrift/newsreader-kursiv.woff") format("woff"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("schrift/plex-mono-bold.woff") format("woff"); }

:root {
  --papier: #FBF6EC;
  --tinte: #14205A;
  --kobalt: #2D5BFF;
  --gelb: #FFC83D;
  --rot: #FF4630;
  --linie: 1.5px solid var(--tinte);
  --breite: 1080px;
  --rand: 24px;
  --anton: "Anton", Impact, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
}

/* Papierkorn über der ganzen Seite */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: multiply;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

a { color: var(--kobalt); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--tinte); }
a:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 3px; }
::selection { background: var(--gelb); }

.innen { width: 100%; max-width: var(--breite); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }

.label { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }

/* Kopf */
.kopf { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; }
.marke { display: flex; align-items: center; gap: 12px; color: var(--tinte); text-decoration: none; margin-right: auto; }
.marke img { width: 52px; height: 52px; border-radius: 50%; transform: rotate(-10deg); }
.marke span { font-family: var(--anton); font-size: 26px; letter-spacing: .5px; }
.menue { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
.menue a { padding: 10px 12px; color: var(--tinte); text-decoration: none; }
.menue a:hover { color: var(--kobalt); }
.menue a[aria-current="page"] { background: var(--tinte); color: var(--papier); }

main { flex: 1; }

/* Über uns */
.held { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: center; padding-top: 40px; padding-bottom: 64px; }
.held__text { display: flex; flex-direction: column; gap: 20px; }
.held h1 { margin: 0; font-family: var(--anton); font-weight: 400; font-size: clamp(56px, 9vw, 104px); line-height: .95; letter-spacing: -1px; text-transform: uppercase; }
.held h1 span { color: var(--kobalt); }
.held p { margin: 0; font-size: 21px; line-height: 1.45; max-width: 30em; text-wrap: pretty; }
.held p em { font-style: italic; }

.kreise { position: relative; width: 100%; max-width: 380px; aspect-ratio: 380 / 380; justify-self: center; container-type: inline-size; }
.kreis { position: absolute; border-radius: 50%; mix-blend-mode: multiply; }
.kreis--rot { left: 0; top: 2.6%; width: 71%; aspect-ratio: 1; background: var(--rot); }
.kreis--gelb { left: 47.4%; top: 0; width: 52.6%; aspect-ratio: 1; background: var(--gelb); }
.kreis--kobalt { left: 34.2%; top: 44.7%; width: 55.3%; aspect-ratio: 1; background: var(--kobalt); }
.kreis__zahl { position: absolute; left: 0; top: 2.6%; width: 71%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--papier); }
.kreis__zahl b { font-family: var(--anton); font-weight: 400; font-size: 31.6cqw; line-height: 1; }

.saeulen { border-top: var(--linie); border-bottom: var(--linie); }
.saeulen ul { list-style: none; margin: 0 auto; padding: 0; max-width: var(--breite); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.saeulen li { padding: 28px var(--rand); display: flex; flex-direction: column; gap: 10px; border-right: var(--linie); }
.saeulen li:last-child { border-right: 0; }
.punkt { width: 28px; height: 28px; border-radius: 50%; }
.saeulen h2 { margin: 0; font-family: var(--anton); font-weight: 400; font-size: 28px; line-height: 1.1; text-transform: uppercase; }
.saeulen p { margin: 0; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 660px) {
  .saeulen li { border-right: 0; border-bottom: var(--linie); }
  .saeulen li:last-child { border-bottom: 0; }
}

.wer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 72px; }
.wer h2 { margin: 0; font-family: var(--anton); font-weight: 400; font-size: 40px; line-height: 1.05; text-transform: uppercase; }
.wer div { display: flex; flex-direction: column; gap: 14px; font-size: 19px; line-height: 1.5; }
.wer p { margin: 0; text-wrap: pretty; }

/* Rechtsseiten */
.recht { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px; align-items: start; padding-top: 32px; padding-bottom: 80px; }
.recht aside { display: flex; flex-direction: column; gap: 16px; }
.recht__kreis { width: 64px; height: 64px; border-radius: 50%; }
.inhalt { display: flex; flex-direction: column; border-top: var(--linie); }
.inhalt a { padding: 9px 0; border-bottom: 1px solid rgba(20, 32, 90, .25); font-size: 16px; color: var(--tinte); text-decoration: none; }
.inhalt a:hover { color: var(--kobalt); }
.recht article { grid-column: span 2; min-width: 0; max-width: 44em; }
@media (max-width: 560px) { .recht article { grid-column: auto; } }
.recht h1 { margin: 0 0 28px; font-family: var(--anton); font-weight: 400; font-size: clamp(48px, 7vw, 80px); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.recht section { padding: 22px 0; border-top: var(--linie); scroll-margin-top: 20px; }
.recht h2 { margin: 0 0 10px; display: flex; gap: 12px; align-items: baseline; font-family: var(--anton); font-weight: 400; font-size: 26px; line-height: 1.15; text-transform: uppercase; }
.recht h2 .nr { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--kobalt); }
.recht h3 { margin: 18px 0 6px; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.recht p, .recht ul { margin: 0 0 10px; line-height: 1.6; text-wrap: pretty; }
.recht ul { padding-left: 1.2em; }
.recht li { margin-bottom: 4px; }
.recht address { font-style: normal; margin: 0 0 10px; }
.recht strong { font-weight: 400; font-family: var(--mono); font-size: 13px; letter-spacing: .5px; }

/* Noch fehlende Angabe – fällt auf und wird beim Deploy gemeldet */
.luecke { background: var(--gelb); padding: 0 .25em; mix-blend-mode: multiply; }

/* Fuß */
.fuss { background: var(--tinte); color: var(--papier); }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; padding-top: 28px; padding-bottom: 28px; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
.fuss__punkte { display: flex; gap: 6px; }
.fuss__punkte i { width: 12px; height: 12px; border-radius: 50%; }
.fuss__copy { flex: 1; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.fuss a { color: var(--papier); text-decoration: none; padding: 6px 0; }
.fuss a:hover { color: var(--gelb); }
.fuss a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.f-kobalt { background: var(--kobalt); }
.f-gelb { background: var(--gelb); }
.f-rot { background: var(--rot); }