/* ==========================================================================
   martinecht.de — zentrierter Satzspiegel
   Alles steht auf einer gemeinsamen Mittelachse: Text, Überschriften, Bilder,
   Linien, Kopf und Fuß. Kein JavaScript, keine externen Ressourcen.
   ========================================================================== */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  --papier: #FAF8F3;
  --papier-tief: #F2EFE6;
  --tinte: #1B1A16;
  --leise: #6E6858;
  --linie: #DED8C9;
  --gruen: #2C4A3C;
  --gruen-hell: #476A57;

  /* Die drei Maße, auf denen die ganze Seite steht.
     Alles ist um dieselbe Mittelachse zentriert. */
  --mass: 34rem;   /* Textbreite */
  --breit: 44rem;  /* Bilder, Linien, Kopfzeile */
  --fuss: 44rem;   /* Fußbereich, gleiche Achse wie die Bilder */
  --saum: 1.5rem;  /* seitlicher Rand auf schmalen Fenstern */
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #191813;
    --papier-tief: #201F19;
    --tinte: #EAE5D9;
    --leise: #9A9384;
    --linie: #34322A;
    --gruen: #9CC0A9;
    --gruen-hell: #7FA78D;
  }
}

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

html { -webkit-text-size-adjust: 100%;  scroll-padding-top: 5rem;}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: 1.125rem;
  line-height: 1.62;
  font-weight: 380;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.055em; text-decoration-color: var(--linie); }
a:hover { text-decoration-color: var(--gruen); }
a:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinte); color: var(--papier);
  padding: 0.6rem 1rem; z-index: 20; text-decoration: none;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Grundraster: zwei zentrierte Spaltenbreiten
   -------------------------------------------------------------------------- */
.mitte-text {
  width: min(var(--mass), 100% - 2 * var(--saum));
  margin-inline: auto;
}
.mitte-breit {
  width: min(var(--breit), 100% - 2 * var(--saum));
  margin-inline: auto;
}
.mitte-fuss {
  width: min(var(--fuss), 100% - 2 * var(--saum));
  margin-inline: auto;
}

.block { padding-bottom: 2.75rem; }
.block > .satz {
  width: min(var(--mass), 100% - 2 * var(--saum));
  margin-inline: auto;
}
.block-eng { padding-bottom: 0; }
.satz > *:first-child { margin-top: 0; }
.satz p { margin: 0 0 1.15em; hyphens: auto; }

/* Kennzeichnung über einem Abschnitt (früher Randnotiz) */
.marke {
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--leise);
  margin: 0 0 0.7rem;
  hyphens: none;
}
.marke::after {
  content: '';
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: var(--linie);
  vertical-align: 0.28em;
  margin-left: 0.7rem;
}

/* --------------------------------------------------------------------------
   Kopf
   -------------------------------------------------------------------------- */
.kopf {
  border-bottom: 1px solid var(--linie);
  padding: 2.25rem 0 1.15rem;
  margin-bottom: 3.25rem;
}
.kopf-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
}
.kopf-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  line-height: 1.1;
}
.kopf-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.7rem;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 500;
}
.kopf-nav a { text-decoration: none; color: var(--leise); padding-bottom: 0.15rem; }
.kopf-nav a:hover { color: var(--tinte); }
.kopf-nav a[aria-current='page'] {
  color: var(--tinte);
  box-shadow: inset 0 -1px 0 0 var(--gruen);
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 550;
  letter-spacing: -0.014em;
  line-height: 1.14;
  color: var(--tinte);
  hyphens: none;
}
h1 {
  font-size: clamp(2.35rem, 6.2vw, 3.4rem);
  font-weight: 500;
  margin: 0 0 0.5em;
}
h2 { font-size: 1.62rem; margin: 2.4rem 0 0.85rem; }
h3 { font-size: 1.16rem; font-weight: 600; margin: 2rem 0 0.5rem; }
.h-klein { font-size: 1.3rem; }

.vorspann {
  font-size: 1.32rem;
  line-height: 1.48;
  font-weight: 350;
  margin-bottom: 1.6rem;
}
.klein { font-size: 0.92rem; color: var(--leise); }

/* --------------------------------------------------------------------------
   Linien und Bilder — beide auf der breiten Mittelachse
   -------------------------------------------------------------------------- */
.linie { margin: 0.25rem auto 2.75rem; }
.linie::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--linie);
}

.block-bild { padding-bottom: 0.5rem; }
/* Hochformat schmaler setzen, damit es nicht die halbe Seite füllt */
.bild-hoch {
  width: min(24rem, 100% - 2 * var(--saum));
  margin-inline: auto;
}
.bild-hoch-gross { width: min(30rem, 100% - 2 * var(--saum)); }
.bild { margin: 0 auto 2.6rem; }
.bild img { display: block; width: 100%; height: auto; }
.bild figcaption {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--leise);
  text-align: center;
  margin: 0.7rem auto 0;
  max-width: 32rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Werdegang
   -------------------------------------------------------------------------- */
.station { padding: 1.7rem 0; border-top: 1px solid var(--linie); }
.station-erst { border-top: 0; padding-top: 0; }
.station h2 { margin: 0 0 0.15rem; font-size: 1.24rem; font-weight: 600; }
.station .haus { font-size: 0.98rem; color: var(--leise); margin: 0 0 0.7rem; }
.station .haus .ort::before { content: ' · '; }
.station p:last-child { margin-bottom: 0; }
.station .marke { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   Auftritte
   -------------------------------------------------------------------------- */
.auftritt { padding: 1.35rem 0; border-top: 1px solid var(--linie); }
.auftritt:first-of-type { border-top: 0; }
.auftritt h3 { margin: 0 0 0.1rem; font-size: 1.1rem; }
.auftritt .adresse {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.92rem;
  color: var(--gruen);
  margin: 0 0 0.55rem;
}
.auftritt .adresse .bald { color: var(--leise); font-style: italic; }
.auftritt p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Veröffentlichungen
   -------------------------------------------------------------------------- */
.texte { list-style: none; margin: 0; padding: 0; }
.texte li { padding: 1.05rem 0; border-top: 1px solid var(--linie); }
.texte li:first-child { border-top: 0; padding-top: 0; }
.texte .datum {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 0.22rem;
}
.texte a.titel {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 550;
  line-height: 1.28;
}
.texte p { margin: 0.3rem 0 0; font-size: 0.98rem; color: var(--leise); }

/* --------------------------------------------------------------------------
   Verweise und Kontakt
   -------------------------------------------------------------------------- */
.pfeil { text-decoration: none; color: var(--gruen); font-weight: 500; }
.pfeil::after { content: ' \2192'; }
.pfeil:hover { text-decoration: underline; text-decoration-color: var(--gruen); }

.kontaktzeile { font-family: 'Fraunces', Georgia, serif; font-size: 1.08rem; line-height: 1.7; }

.block-schluss {
  background: var(--papier-tief);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 2.6rem 0 2.2rem;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */
form { margin-top: 1.5rem; }
.feld { margin-bottom: 1.15rem; }
.feld label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 0.32rem;
}
.feld input,
.feld textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--tinte);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie);
  padding: 0.5rem 0.1rem;
  border-radius: 0;
}
.feld textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.feld input:focus,
.feld textarea:focus { outline: 0; border-bottom-color: var(--gruen); }
.honig { position: absolute; left: -9999px; }

button[type='submit'] {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-weight: 550;
  color: var(--papier);
  background: var(--gruen);
  border: 0;
  padding: 0.72rem 1.5rem;
  cursor: pointer;
  border-radius: 1px;
}
button[type='submit']:hover { background: var(--gruen-hell); }
@media (prefers-color-scheme: dark) {
  button[type='submit'] { color: #16150F; }
}

/* --------------------------------------------------------------------------
   Rechtstexte
   -------------------------------------------------------------------------- */
.recht h2 { font-size: 1.24rem; margin-top: 2.2rem; }
.recht h3 { font-size: 1.02rem; }
.recht ul { padding-left: 1.15rem; margin: 0 0 1.15em; }
.recht li { margin-bottom: 0.35em; }

/* --------------------------------------------------------------------------
   Fuß
   -------------------------------------------------------------------------- */
.fuss {
  border-top: 1px solid var(--linie);
  margin-top: 3.5rem;
  padding: 2.75rem 0 1.5rem;
  font-size: 0.88rem;
}
.fuss-in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  row-gap: 2.2rem;
  align-items: start;
}
.fuss-marke .me-logo { display: block; margin-bottom: 0.85rem; width: 120px; }
@media (prefers-color-scheme: dark) {
  .fuss-marke .me-logo { filter: invert(1); }
}
.fuss-titel {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 0.6rem;
}
.fuss-spalte ul { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.fuss-spalte li { margin-bottom: 0.28rem; }
.fuss-spalte a { text-decoration: none; }
.fuss-spalte a:hover { text-decoration: underline; }
.fuss-klein { color: var(--leise); font-size: 0.82rem; line-height: 1.5; margin: 0; }
.fuss-unten {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Schmale Fenster
   -------------------------------------------------------------------------- */
@media (max-width: 46rem) {
  :root { --saum: 1.35rem; }
  body { font-size: 1.06rem; }
  .kopf { padding-top: 1.5rem; margin-bottom: 2.25rem; }
  .kopf-name { font-size: 1.25rem; }
  .kopf-nav { gap: 0.35rem 1.15rem; font-size: 0.74rem; }
  .block { padding-bottom: 2rem; }
}

@media (max-width: 30rem) {
  .fuss-in { grid-template-columns: minmax(0, 1fr); }
  .fuss-unten { flex-direction: column; gap: 0.3rem; }
}

/* --------------------------------------------------------------------------
   Druck
   -------------------------------------------------------------------------- */
@media print {
  .kopf-nav, .fuss-spalte, .block-schluss { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .mitte-text, .mitte-breit, .block > .satz { width: auto; max-width: none; }
  .marke { color: #555; }
}


/* ---------------------------------------------------------------------------
   Sicherheitsnetz für schmale Bildschirme.
   Lange Komposita brechen um statt über den Rand zu laufen, Medien und Tabellen
   bleiben in ihrem Kasten, und Rasterspalten dürfen unter ihre Mindestbreite.
   --------------------------------------------------------------------------- */
img, video, svg, canvas, iframe { max-width: 100%; }
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 52rem) {
  table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Die Adresse steht klein unter dem sprechenden Anker — der Ankertext soll
   sagen, worum es geht, nicht nur wie die Domain heißt. */
.adresse-domain { display: block; font-size: 0.82rem; color: var(--leise); margin-top: 0.15rem; }