/* Gestaltung für Startseite, Impressum und Datenschutz von beierstettel.de */
:root {
  --navy: #05183f;
  --navy-tief: #030f2b;
  --navy-karte: #0a2150;
  --navy-hell: #112c66;
  --gelb: #FDC309;
  --sand: #f0e7d2;
  --text: #e9edf7;
  --text-leise: #a7b3d2;
  --rand: #1b3268;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --grotesk: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: var(--grotesk);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* feine Körnung, damit die Flächen nicht klinisch wirken */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
a { color: var(--gelb); }
.huelle { max-width: 940px; margin: 0 auto; padding: 0 20px 56px; }

/* ---------- Kopfbild ---------- */
.kopfbild {
  position: relative;
  min-height: clamp(260px, 34vw, 380px);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  text-align: center;
  padding: 0 20px 28px;
  background: #0b1a33 center/cover no-repeat;
  background-image:
    linear-gradient(180deg, rgba(5,24,63,.35) 0%, rgba(5,24,63,.2) 35%, rgba(5,24,63,.92) 88%, var(--navy) 100%),
    image-set(url("medien/kopfbild-2000.jpg") 2x, url("medien/kopfbild-1000.jpg") 1x);
  background-image:
    linear-gradient(180deg, rgba(5,24,63,.35) 0%, rgba(5,24,63,.2) 35%, rgba(5,24,63,.92) 88%, var(--navy) 100%),
    url("medien/kopfbild-2000.jpg");
}
.marke { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.marke img { width: 56px; height: 56px; border-radius: 10px; display: block; box-shadow: 0 2px 14px rgba(0,0,0,.5); }
.marke .wortmarke {
  font-size: clamp(1.6rem, 4.4vw, 2.1rem); font-weight: 600; letter-spacing: .05em; color: var(--gelb);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.kopfbild h1 {
  margin: 16px auto 0; max-width: 24ch;
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 3vw, 1.5rem);
  line-height: 1.3; color: var(--sand);
  text-shadow: 0 1px 10px rgba(3,15,43,.95);
}
.kopfbild .unterzeile {
  margin: 8px auto 0; max-width: 52ch; color: #dfe6f6; font-size: .98rem;
  text-shadow: 0 1px 10px rgba(3,15,43,.9);
}
.bildnachweis {
  position: absolute; right: 12px; bottom: 6px;
  font-size: .68rem; color: rgba(222,230,246,.5); letter-spacing: .02em;
}

/* ---------- Zahlenband ---------- */
.zahlen {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px;
  padding: 22px 0 18px; margin: 0 0 8px;
  border-bottom: 1px solid var(--rand);
}
@media (min-width: 720px) { .zahlen { grid-template-columns: repeat(4, 1fr); } }
.zahlen div { text-align: center; }
.zahlen b {
  display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 400; color: var(--gelb);
  line-height: 1.2;
}
.zahlen span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); }

/* ---------- Abschnitte ---------- */
section { margin-top: 42px; }
h2.abschnitt {
  margin: 0 0 18px; font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-leise);
}
.titel { font-family: var(--serif); font-weight: 400; color: var(--sand); }

/* Große Karte mit Bild (Grenzsteine) */
.gross {
  display: grid; gap: 0; grid-template-columns: 1fr;
  background: var(--navy-karte); border: 1px solid var(--rand); border-radius: 10px;
  overflow: hidden; text-decoration: none; color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
@media (min-width: 720px) { .gross { grid-template-columns: 42% 1fr; } }
.gross:hover, .gross:focus-visible { border-color: var(--gelb); transform: translateY(-2px); }
.gross img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block; }
.gross .inhalt { padding: 22px 24px; }
.gross .titel { display: block; font-size: 1.5rem; line-height: 1.25; }
.gross .text { margin: 10px 0 0; color: var(--text-leise); }
.gross .mehr { display: inline-block; margin-top: 14px; color: var(--gelb); font-weight: 600; font-size: .92rem; }

/* Drei Bildkarten nebeneinander */
.dreier { display: grid; gap: 14px; margin-top: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .dreier { grid-template-columns: repeat(3, 1fr); } }
.bildkarte {
  display: flex; flex-direction: column;
  background: var(--navy-karte); border: 1px solid var(--rand); border-radius: 10px;
  overflow: hidden; text-decoration: none; color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
.bildkarte:hover, .bildkarte:focus-visible { border-color: var(--gelb); transform: translateY(-2px); }
.bildkarte img { width: 100%; aspect-ratio: 10 / 7; object-fit: cover; display: block; }
.bildkarte .inhalt { padding: 15px 17px 18px; }
.bildkarte .titel { display: block; font-size: 1.16rem; }
.bildkarte .text { margin: 6px 0 0; font-size: .9rem; color: var(--text-leise); }

/* Zeilen mit kleinem Bild */
.zeilen { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .zeilen { grid-template-columns: 1fr 1fr; } }
.zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px 12px 12px;
  background: var(--navy-karte); border: 1px solid var(--rand); border-left: 3px solid var(--gelb);
  border-radius: 8px; text-decoration: none; color: var(--text);
  transition: background .15s ease, border-color .15s ease;
}
.zeile:hover, .zeile:focus-visible { background: var(--navy-hell); border-color: var(--gelb); }
.zeile img { width: 62px; height: 62px; border-radius: 6px; object-fit: cover; flex: none; }
.zeile .platzhalter {
  width: 62px; height: 62px; border-radius: 6px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #0d2559; border: 1px solid var(--rand);
  font-family: var(--serif); font-size: 1.5rem; color: var(--gelb);
}
.zeile img.buchdeckel {
  width: 62px; height: 87px; object-fit: contain;
  border-radius: 3px; background: #0d2559;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.zeile .titel { display: block; font-size: 1.05rem; }
.zeile .text { display: block; margin-top: 2px; font-size: .86rem; color: var(--text-leise); }
.zeile.breit { grid-column: 1 / -1; }

/* Interne Projekte: kompakt und zurückhaltend */
.intern { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .intern { grid-template-columns: 1fr 1fr; } }
.intern a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: rgba(10,33,80,.55); border: 1px dashed var(--rand); border-radius: 8px;
  text-decoration: none; color: var(--text);
}
.intern a:hover, .intern a:focus-visible { border-style: solid; border-color: var(--text-leise); }
.intern img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; flex: none; opacity: .85; }
.intern .titel { font-size: .98rem; color: var(--text); }
.intern .text { display: block; font-size: .8rem; color: var(--text-leise); }

/* ---------- Textseiten ---------- */
.textseite { margin-top: 8px; }
.textseite h2 {
  margin: 36px 0 10px; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--sand);
}
.textseite h2:first-of-type { margin-top: 12px; }
.textseite p.leise { color: var(--text-leise); }
.textseite ul { padding-left: 1.2em; }
.textseite li { margin-bottom: 6px; }
.zurueck { display: inline-block; margin-top: 36px; text-decoration: none; font-weight: 600; }
.zurueck:hover { text-decoration: underline; }
.kopfzeile { padding: 40px 0 26px; text-align: center; }
.kopfzeile .unterzeile { margin: 14px 0 0; color: var(--text-leise); }
.trennlinie {
  height: 2px; margin: 28px 0 0;
  background: linear-gradient(90deg, transparent, var(--gelb), transparent); opacity: .5;
}

/* ---------- Fuß ---------- */
footer {
  margin-top: 54px; padding-top: 28px;
  border-top: 1px solid var(--rand);
  text-align: center; color: var(--text-leise); font-size: .9rem;
}
footer img.schriftzug {
  width: 288px; max-width: 80%; height: auto;
  mix-blend-mode: screen; opacity: .8; margin-bottom: 14px;
}
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .fusszeile { margin: 10px 0 0; }
footer .fusszeile a { margin: 0 10px; }

/* Kopf der Textseiten (Impressum, Datenschutz) */
header { padding: 40px 0 26px; text-align: center; }
header .unterzeile { margin: 14px 0 0; color: var(--text-leise); }