/* ============================================================
   Timo Herrmann · Stil für die Rechtsseiten (Impressum, Datenschutz)
   Nutzt dieselben CI-Tokens wie die Startseite.
   ============================================================ */
:root {
  --espresso:  #1F1B17;
  --cocoa:     #5C4A3D;
  --taupe:     #8C7B6E;
  --off:       #F5F2EE;
  --paper:     #FBF8F4;
  --petrol:      #2E4A4F;
  --petrol-soft: #A8BCC0;
  --rule:        rgba(31, 27, 23, 0.10);
}

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

html, body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: var(--off);
  color: var(--espresso);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

a { color: var(--petrol); text-underline-offset: 3px; }

/* ============================================================
   NAVBAR · dieselbe schwebende Pille wie auf der Startseite.
   Dort wird sie per GSAP eingeblendet, hier steht sie fest sichtbar.
   ============================================================ */
.nav {
  position: fixed;
  top: clamp(14px, 2vw, 22px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  padding: clamp(7px, 0.7vw, 9px) clamp(7px, 0.7vw, 10px)
           clamp(7px, 0.7vw, 9px) clamp(22px, 2vw, 30px);
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  max-width: calc(100% - 24px);

  background: rgba(251, 248, 244, 0.74);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(31, 27, 23, 0.06);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 32px rgba(31, 27, 23, 0.10),
    0 2px 6px rgba(31, 27, 23, 0.05);
  color: var(--espresso);
}
.nav .brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.nav .brand svg {
  width: clamp(26px, 1.9vw, 30px);
  height: clamp(26px, 1.9vw, 30px);
  flex-shrink: 0;
}
.nav .brand .name {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 600; letter-spacing: -0.018em; line-height: 1;
}
.nav .menu { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); }
.nav .menu a {
  color: inherit; text-decoration: none;
  font-size: clamp(12.5px, 0.95vw, 13.5px);
  font-weight: 400; letter-spacing: -0.005em;
  position: relative; padding: 6px 0;
}
.nav .menu a:not(.cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.nav .menu a:not(.cta):hover::after { transform: scaleX(1); }
.nav .menu .cta {
  background: var(--petrol); color: var(--off);
  padding: 9px 18px; border-radius: 10px;
  font-weight: 500; font-size: clamp(12.5px, 0.95vw, 13.5px);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .25s ease, transform .25s ease;
  box-shadow: 0 4px 14px rgba(46, 74, 79, 0.18);
}
.nav .menu .cta:hover { background: #1F3438; transform: translateY(-1px); }

@media (max-width: 760px) {
  .nav .menu a:not(.cta) { display: none; }
}

main {
  max-width: 780px; margin: 0 auto;
  /* oben zusätzlich Platz für die schwebende Navbar */
  padding: clamp(112px, 14vw, 150px) clamp(20px, 5vw, 32px) clamp(64px, 10vw, 120px);
}

h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 14px;
}
.updated { color: var(--taupe); font-size: 0.85rem; margin-bottom: clamp(36px, 5vw, 56px); }

h2 {
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 500; letter-spacing: -0.01em;
  margin: clamp(38px, 5vw, 56px) 0 14px;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--rule);
}
h2:first-of-type { border-top: none; padding-top: 0; }

h3 {
  font-size: 1rem; font-weight: 600;
  margin: 26px 0 8px;
}

p, li { font-size: 0.95rem; color: var(--cocoa); }
p { margin-bottom: 14px; }
ul, ol { margin: 0 0 14px 1.15rem; }
li { margin-bottom: 7px; }
strong { color: var(--espresso); font-weight: 500; }

address { font-style: normal; color: var(--cocoa); font-size: 0.95rem; margin-bottom: 14px; }

/* Offene Punkte klar sichtbar, damit nichts unausgefüllt live geht */
.todo {
  background: rgba(150, 60, 40, 0.08);
  border: 1px dashed #963C28;
  color: #963C28;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.85em;
  font-weight: 500;
}

/* ============================================================
   FOOTER · identisch aufgebaut wie auf der Startseite
   ============================================================ */
.footer {
  background: var(--espresso);
  color: var(--off);
  padding: clamp(56px, 8vw, 88px) 0 clamp(24px, 3vw, 32px);
}
.footer .container {
  max-width: 1400px; margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 32px);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(32px, 4vw, 56px);
}
.footer a { color: var(--off); text-decoration: none; }
.footer .brand { display: flex; align-items: center; gap: 12px; }
.footer .brand svg { width: 34px; height: 34px; color: var(--off); flex: none; }
.footer .brand .name { font-size: 1rem; font-weight: 600; letter-spacing: -0.018em; color: var(--off); }
.footer p { color: rgba(245, 242, 238, 0.55); font-size: 0.9rem; margin-top: 16px; max-width: 32ch; }
.footer h3 {
  font-size: 11px; font-weight: 500; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--petrol-soft, #A8BCC0);
  margin-bottom: 20px; border: none; padding: 0;
}
.footer ul { list-style: none; display: grid; gap: 10px; margin: 0; }
.footer ul li { margin: 0; }
.footer ul a, .footer ul li {
  color: var(--off); font-size: 0.9rem; font-weight: 300;
  opacity: 0.7; transition: opacity .25s ease;
}
.footer ul a:hover { opacity: 1; }
.footer .fcontact { display: grid; gap: 12px; font-size: 0.9rem; font-weight: 300; }
.footer .fcontact a, .footer .fcontact span {
  display: inline-flex; align-items: flex-start; gap: 10px;
  color: var(--off); opacity: 0.7; transition: opacity .25s ease;
}
.footer .fcontact a:hover { opacity: 1; }
.footer .fcontact svg {
  width: 16px; height: 16px; flex: none; margin-top: 3px;
  color: var(--petrol-soft, #A8BCC0);
}
.footer .bottom {
  max-width: 1400px; margin: clamp(40px, 5vw, 64px) auto 0;
  padding: clamp(18px, 2.5vw, 26px) clamp(20px, 5vw, 32px) 0;
  border-top: 1px solid rgba(245, 242, 238, 0.12);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  font-size: 0.8rem; color: rgba(245, 242, 238, 0.55);
}
.footer .bottom a { color: rgba(245, 242, 238, 0.55); }
.footer .bottom a:hover { color: var(--off); }
.footer .bottom .legal { display: flex; gap: 20px; flex-wrap: wrap; max-width: none; margin: 0; }
.footer .madeby { display: inline-flex; align-items: baseline; gap: 7px; }
.footer .madeby img { height: 12px; width: auto; opacity: 0.85; transition: opacity .25s ease; }
.footer .madeby:hover img { opacity: 1; }

@media (max-width: 1000px) { .footer .container { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .footer .container { grid-template-columns: 1fr; }
  .footer .bottom { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .footer .bottom .legal { justify-content: center; }
}

/* ============================================================
   TOUCH-ZIELE
   Wie auf der Startseite: die antippbare Flaeche wird vergroessert,
   das Schriftbild bleibt unveraendert. Empfehlung sind 44 px Hoehe,
   die Fusszeilenlinks lagen bei 19 bis 28 px.
   ============================================================ */
@media (hover: none), (max-width: 880px) {
  .footer ul { gap: 0; }
  .footer ul a {
    display: inline-block;
    padding: 12px 0;
    min-height: 44px;
  }
  .footer .fcontact { gap: 0; }
  .footer .fcontact a {
    padding: 11px 0;
    min-height: 44px;
    align-items: center;
  }
  .footer .bottom .legal { gap: 8px 20px; }
  .footer .bottom .legal a,
  .footer .bottom .madeby {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav .brand { min-height: 44px; }
  .legal-body a { padding: 2px 0; }

  /* Blog: die Verweise waren am Finger gemessen nur 23 Pixel hoch */
  .post-card__body .weiter a,
  .artikel-cta p a:not(.knopf),
  .weitere-artikel li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Einzeilige Ueberschriften kamen sonst auf 32px, gemessen bei 768
     und 600 Pixeln Fensterbreite. */
  .post-card__body h2 a { display: inline-block; padding: 10px 0; }
}

/* =====================================================================
   Blog
   ===================================================================== */
/* Die Uebersicht darf breiter sein als die Lesebreite von 780px, sonst
   stehen auf grossen Schirmen nur zwei schmale Kacheln in der Mitte. */
main.breit { max-width: 980px; }
.blog-intro { max-width: 62ch; }

.post-grid {
  display: grid;
  /* 360px als Untergrenze ergibt bei vier Beitraegen ein sauberes 2x2
     statt einer Dreierreihe mit einer einsamen Kachel darunter. */
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: clamp(20px, 3vw, 34px);
  margin: clamp(32px, 5vw, 56px) 0;
}

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(26, 22, 18, .12);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(26, 22, 18, .10); }

/* Etwas hoeher als vorher: bei 190px blieb von Hochformat-Fotos nur ein
   schmaler Streifen uebrig. Die Feinausrichtung steht als object-position
   am jeweiligen Bild, weil sie von Motiv zu Motiv verschieden ist. */
.post-card img {
  width: 100%; height: 230px;
  object-fit: cover; object-position: center;
  display: block; background: #efeae3;
}

.post-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__kicker {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: #2f5d52; font-weight: 600;
}
.post-card__body h2 { font-size: 1.16rem; line-height: 1.3; margin: 0; }
/* Ohne Unterstrich. Die Kachel ist ohnehin als Ganzes anklickbar, der
   Strich unter der Ueberschrift wirkte unruhig. */
.post-card__body h2 a { text-decoration: none; }
.post-card__body h2 a:hover,
.post-card__body h2 a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.post-card__body p { margin: 0; font-size: .95rem; }
.post-card__body .weiter { margin-top: auto; padding-top: 12px; font-weight: 600; }

/* Artikelseite */
.artikel { max-width: 68ch; }
.artikel .meta { font-size: .88rem; color: #6b635c; margin-bottom: 28px; }
.artikel h2 { margin-top: 2.2em; }
.artikel h3 { margin-top: 1.6em; font-size: 1.05rem; }
.artikel ul, .artikel ol { margin: 1em 0; padding-left: 1.3em; }
.artikel li { margin: .45em 0; }
.artikel .merke {
  border-left: 3px solid #2f5d52;
  background: rgba(47, 93, 82, .06);
  padding: 16px 20px; margin: 1.8em 0; border-radius: 0 8px 8px 0;
}
.artikel .merke p:last-child { margin-bottom: 0; }

.artikel-cta {
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: clamp(26px, 4vw, 38px);
  border-radius: 14px;
  /* Petrol, dieselbe Farbe wie der Termin-Knopf in der Leiste */
  background: #2E4A4F;
  color: #F5F2EE;
}
.artikel-cta h2 { margin-top: 0; color: #fff; }
/* Der Fliesstext erbt sonst die dunkle Schriftfarbe der Rechtsseiten und
   steht dann fast unsichtbar auf dem dunklen Grund. Gemessen: 1,78 zu 1. */
.artikel-cta p { color: #DCE5E7; }

/* Knopfreihe. Masse und Form entsprechen den Knoepfen im Hero der
   Startseite, damit ueberall dasselbe Element steht. */
.artikel-cta .knopfreihe {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 20px;
}
.artikel-cta .knopf,
.artikel-cta .knopf-rand {
  display: inline-flex; align-items: center; gap: 12px;
  padding: clamp(13px, 1.5vh, 16px) clamp(20px, 1.8vw, 26px);
  border-radius: 10px;
  font-size: clamp(13px, 1vw, 14.5px);
  font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none;
  min-height: 44px;
  border: 1px solid transparent;   /* gleiche Hoehe wie der Knopf mit Rahmen */
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.artikel-cta .knopf {
  background: #F5F2EE; color: #2E4A4F;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.artikel-cta .knopf:hover { background: #fff; transform: translateY(-1px); }

.artikel-cta .knopf-rand {
  background: transparent; color: #F5F2EE;
  border-color: rgba(245, 242, 238, .55);
}
.artikel-cta .knopf-rand:hover {
  background: rgba(245, 242, 238, .12);
  border-color: #F5F2EE;
  transform: translateY(-1px);
}
.artikel-cta .knopf svg,
.artikel-cta .knopf-rand svg {
  width: clamp(15px, 1.2vw, 17px); height: clamp(15px, 1.2vw, 17px);
  flex-shrink: 0;
}

.weitere-artikel { margin-top: clamp(40px, 6vw, 64px); }
.weitere-artikel ul { list-style: none; padding: 0; }
.weitere-artikel li { margin: .7em 0; }

/* =====================================================================
   Grosse Bildschirme: 2K und 4K
   ---------------------------------------------------------------------
   Die Startseite hebt ab 1900 und ab 2600 Pixeln alles an. Ohne diese
   Bloecke blieb die Leiste hier auf 60 Pixel Hoehe stehen, waehrend sie
   auf der Startseite auf 76 beziehungsweise 98 wuchs. Beim Wechsel sprang
   die Navigation sichtbar.

   Die Werte fuer Leiste und Fussbereich sind absichtlich Zeichen fuer
   Zeichen dieselben wie in index.html. Wird dort etwas geaendert, muss es
   hier mitgeaendert werden.

   Der Fliesstext skaliert ueber die Wurzelschriftgroesse, weil er in rem
   angegeben ist. Damit wachsen Absaetze, Listen, h3 und Adressen mit.
   ===================================================================== */
@media (min-width: 1900px) {
  html { font-size: 19px; }

  main        { max-width: 980px; }
  main.breit  { max-width: 1500px; }

  h1 { font-size: clamp(52px, 3.4vw, 72px); }
  h2 { font-size: clamp(24px, 1.5vw, 31px); }

  /* Leiste, gleiche Werte wie index.html */
  .nav                  { padding: 12px 14px 12px 38px; }
  .nav .brand .name     { font-size: clamp(16px, 1.1vw, 20px); }
  .nav .brand svg       { width: clamp(30px, 1.9vw, 38px); height: clamp(30px, 1.9vw, 38px); }
  .nav .menu            { gap: clamp(18px, 1.4vw, 30px); }
  .nav .menu a,
  .nav .menu .cta       { font-size: clamp(13.5px, 0.95vw, 17px); }
  .nav .menu .cta       { padding: 12px 24px; }
  .footer .brand .name  { font-size: clamp(18px, 1.3vw, 22px); }

  /* Blog */
  .post-card img        { height: 280px; }
  .artikel-cta .knopf,
  .artikel-cta .knopf-rand { font-size: clamp(14.5px, 1vw, 18px); padding: 16px 28px; }
  .artikel-cta .knopf svg,
  .artikel-cta .knopf-rand svg { width: clamp(17px, 1.2vw, 20px); height: clamp(17px, 1.2vw, 20px); }
}

@media (min-width: 2600px) {
  html { font-size: 23px; }

  main        { max-width: 1180px; }
  main.breit  { max-width: 1900px; }

  h1 { font-size: clamp(72px, 3.4vw, 96px); }
  h2 { font-size: clamp(31px, 1.5vw, 40px); }

  .nav                  { padding: 16px 18px 16px 48px; }
  .nav .brand .name     { font-size: clamp(20px, 1.1vw, 26px); }
  .nav .brand svg       { width: clamp(38px, 1.9vw, 48px); height: clamp(38px, 1.9vw, 48px); }
  .nav .menu            { gap: clamp(30px, 1.4vw, 42px); }
  .nav .menu a,
  .nav .menu .cta       { font-size: clamp(17px, 0.95vw, 21px); }
  .nav .menu .cta       { padding: 16px 32px; }
  .footer .brand .name  { font-size: clamp(22px, 1.3vw, 28px); }

  .post-card img        { height: 350px; }
  .artikel-cta .knopf,
  .artikel-cta .knopf-rand { font-size: clamp(18px, 1vw, 23px); padding: 20px 36px; }
  .artikel-cta .knopf svg,
  .artikel-cta .knopf-rand svg { width: clamp(20px, 1.2vw, 24px); height: clamp(20px, 1.2vw, 24px); }
}