/* =========================================================
   Thomas Reich — Aussehen der Website
   Warmes Dunkel, Serifen für Überschriften, ruhige Flächen.
   Farben stehen ganz oben und lassen sich im Bearbeiten-Bereich
   unter „Aussehen“ ändern.
   ========================================================= */

:root{
  --bg:        #1A1816;   /* warmes Anthrazit, leicht bräunlich */
  --surface:   #221F1C;
  --surface-2: #2B2724;
  --text1:     #EDE7DE;   /* warmes Cremeweiß */
  --text2:     #9C9187;   /* gedämpftes Warmgrau */
  --accent:    #B36A45;   /* Ziegelrot, matt */
  --accent2:   #7E8F66;   /* Moosgrün */
  --border:    rgba(237,231,222,0.11);
  --radius:    3px;
  --maxw:      980px;

  /* --font = Fließtext (im Bearbeiten-Bereich unter „Aussehen“ umstellbar)
     --serif = Überschriften und Schriftzug
     --ui    = kleine Beschriftungen: Menü, Knöpfe, Bildunterschriften */
  --font:  "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  --ui:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text1);
  font-family:var(--font);
  font-size:18px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; height:auto; display:block; }

a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--text1); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600; line-height:1.22; margin:0 0 .45em;
}
h1{ font-size:clamp(1.9rem, 4.4vw, 2.7rem); }
h2{ font-size:clamp(1.35rem, 2.6vw, 1.75rem); }
h3{ font-size:1.12rem; }
p{ margin:0 0 1.15em; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* --------------------------------------------------------
   Kopf und Menü — schlicht, keine Effekte
   -------------------------------------------------------- */
.site-header{
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:relative;
}
.site-header .wrap{
  display:flex; align-items:baseline; justify-content:space-between;
  min-height:64px; gap:18px; padding-top:14px; padding-bottom:14px;
}
.logo{
  font-family:var(--serif);
  font-size:1.3rem; font-weight:600;
  color:var(--text1); text-decoration:none;
}
.logo span{ color:var(--accent); }
.logo:hover{ color:var(--text1); }

.nav-toggle{
  display:none;
  background:none; border:none; color:var(--text2);
  font-family:var(--ui); font-size:1.4rem; line-height:1;
  padding:4px 2px; cursor:pointer;
}
.nav-toggle:hover{ color:var(--text1); }

.nav{ display:flex; gap:22px; align-items:baseline; }
.nav a{
  font-family:var(--ui); font-size:.9rem;
  color:var(--text2); text-decoration:none;
}
.nav a:hover{ color:var(--text1); }
.nav a[aria-current="page"]{ color:var(--text1); text-decoration:underline; text-underline-offset:5px; }

/* --------------------------------------------------------
   Kopfbereich der Startseite — bewusst ungleich aufgeteilt
   -------------------------------------------------------- */
.hero .wrap{
  display:grid; gap:38px; align-items:start;
  grid-template-columns:1.35fr 1fr;
  padding-top:52px; padding-bottom:46px;
}
.hero-text .kicker{
  font-family:var(--ui); font-size:.85rem;
  color:var(--text2); margin:0 0 .9em;
}
.hero-text h1{ margin-bottom:.35em; }
.hero-text p.lead{ font-size:1.08rem; max-width:44ch; color:var(--text1); }
figure.bild.hero-media{ margin:6px 0 0; }
figure.bild.hero-media img{ aspect-ratio:3/4; object-fit:cover; object-position:center 42%; width:100%; }

/* --------------------------------------------------------
   Abschnitte
   -------------------------------------------------------- */
section{ padding:44px 0; }
section + section{ border-top:1px solid var(--border); }

/* die kleine Zeile über einer Überschrift: klein, kursiv, keine Großbuchstaben */
.section-kicker{
  font-family:var(--serif); font-style:italic;
  font-size:.95rem; color:var(--accent2);
  margin:0 0 .4em;
}
.lead{ font-size:1.05rem; max-width:60ch; }
.prose{ max-width:62ch; }
.prose h2{ margin-top:1.7em; }

.page-head{ padding:48px 0 22px; }
.page-head + section{ border-top:1px solid var(--border); }

/* --------------------------------------------------------
   Verweise auf andere Seiten — eine Liste, kein Kachelraster
   -------------------------------------------------------- */
.wegweiser{ margin:26px 0 0; padding:0; list-style:none; max-width:62ch; }
.wegweiser li{ padding:15px 0; border-bottom:1px solid var(--border); }
.wegweiser li:first-child{ border-top:1px solid var(--border); }
.wegweiser a{
  font-family:var(--serif); font-size:1.15rem;
  text-decoration:none; color:var(--text1);
}
.wegweiser a:hover{ color:var(--accent); text-decoration:underline; }
.wegweiser p{ margin:.15em 0 0; color:var(--text2); font-size:.95rem; }

/* Karten: nur eine feine Trennlinie, kein Kasten, kein Schweben */
.grid{
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}
.card{
  background:none; border:none;
  border-top:1px solid var(--border);
  border-radius:0; padding:16px 0 0;
}
a.card{ display:block; color:inherit; text-decoration:none; }
a.card:hover h3{ color:var(--accent); }
.card h3{ margin-bottom:.3em; }
.card p{ color:var(--text2); font-size:.96rem; margin:0; }
.card .more{
  font-family:var(--ui); font-size:.85rem; color:var(--accent);
  display:inline-block; margin-top:.7em;
}

/* Aktuelles */
.eintrag{ padding:0 0 30px; margin:0; }
.eintrag + .eintrag{ border-top:1px solid var(--border); padding-top:26px; }
.eintrag time{
  display:block; font-family:var(--ui); font-size:.82rem;
  color:var(--text2); margin-bottom:.35em;
}
.eintrag h3{ margin-bottom:.35em; font-size:1.2rem; }
.eintrag p{ margin:0 0 .9em; }

/* --------------------------------------------------------
   Bilder und Videos — immer mit Copyright-Zeile
   -------------------------------------------------------- */
figure.bild{ margin:0; background:none; border:none; border-radius:0; }
figure.bild img,
figure.bild video{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
figure.bild.hoch img{ aspect-ratio:3/4; }
figure.bild.breit img{ aspect-ratio:16/9; }
figure.bild figcaption{
  padding:9px 2px 0;
  font-family:var(--ui); font-size:.85rem; color:var(--text2);
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;
  border:none;
}
figure.bild figcaption .copy{
  font-size:.78rem; color:var(--text2); opacity:.72; white-space:nowrap;
}
figure.bild.klickbar{ cursor:zoom-in; }
figure.bild.inline{ margin:30px 0; max-width:600px; }

/* Kontrolle beim Bauen: Bild ohne Copyright-Zeile fällt rot auf. */
figure.bild:not(:has(figcaption)){ outline:3px solid #C4543D; }

/* --------------------------------------------------------
   Lightbox
   -------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(16,14,13,.95);
  display:none; align-items:center; justify-content:center;
  padding:28px;
}
.lightbox.open{ display:flex; flex-direction:column; }
.lightbox img{ max-width:92vw; max-height:80vh; object-fit:contain; }
.lightbox figcaption{
  font-family:var(--ui); text-align:center;
  color:var(--text2); font-size:.9rem; padding-top:14px;
}
.lightbox-close{
  position:absolute; top:16px; right:20px;
  background:none; border:none; color:var(--text2);
  font-family:var(--ui); font-size:1.5rem; line-height:1;
  padding:6px 10px; cursor:pointer;
}
.lightbox-close:hover{ color:var(--text1); }

/* --------------------------------------------------------
   Knöpfe — einer kräftig, der zweite nur ein Textlink
   -------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--ui); font-size:.92rem; font-weight:600;
  padding:11px 20px; border-radius:var(--radius);
  background:var(--accent); color:#1A1816;
  border:1px solid var(--accent);
  text-decoration:none;
}
.btn:hover{ background:none; color:var(--accent); }
.btn.ghost{
  background:none; color:var(--text2); border-color:transparent;
  padding-left:4px; padding-right:4px;
  text-decoration:underline; text-underline-offset:4px;
}
.btn.ghost:hover{ color:var(--text1); }
.btn-reihe{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:1.5em; }

/* --------------------------------------------------------
   Plus-Knöpfe — sieht nur Thomas, wenn er angemeldet ist
   -------------------------------------------------------- */
.bearbeiten-leiste{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  font-family:var(--ui); font-size:.86rem; color:var(--text2);
}
.bearbeiten-leiste .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:8px; padding-bottom:8px; flex-wrap:wrap;
}
.bearbeiten-leiste a{ color:var(--accent2); text-decoration:underline; }

.plus-knopf{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ui); font-size:.88rem; font-weight:600;
  margin-top:20px; padding:8px 14px 8px 9px;
  border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text2); text-decoration:none; background:none;
}
.plus-knopf:hover{ color:var(--accent2); border-color:var(--accent2); }
.plus-knopf .plus-zeichen{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--accent2); color:var(--bg);
  font-size:1.05rem; line-height:1; padding-bottom:2px;
}

/* --------------------------------------------------------
   Fußzeile
   -------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--border);
  padding:34px 0 42px;
  color:var(--text2);
  font-family:var(--ui); font-size:.88rem;
}
.site-footer .footer-grid{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between;
}
.site-footer a{ color:var(--text2); }
.site-footer a:hover{ color:var(--text1); }
.site-footer .rechte{ font-size:.8rem; opacity:.75; margin:.7em 0 0; }

/* Impressum: klein und zurückhaltend ganz unten */
.kleingedrucktes{
  margin:26px 0 0; font-size:.75rem; opacity:.55;
}
.kleingedrucktes a{ color:var(--text2); text-decoration:none; }
.kleingedrucktes a:hover{ text-decoration:underline; }

/* --------------------------------------------------------
   Handy
   -------------------------------------------------------- */
@media (max-width:768px){
  body{ font-size:17px; }
  /* Fingerfreundlich: mindestens 44 px hoch und breit */
  .nav-toggle{
    display:block;
    min-width:44px; min-height:44px;
    padding:8px 10px; margin:-8px -10px -8px 0;
  }
  .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:6px 24px 14px;
    z-index:20;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:11px 0; border-bottom:1px solid var(--border); }
  .nav a:last-child{ border-bottom:none; }
  .hero .wrap{
    grid-template-columns:1fr; gap:26px;
    padding-top:32px; padding-bottom:34px;
  }
  figure.bild.hero-media{ order:-1; }
  figure.bild.hero-media img{ aspect-ratio:4/5; }
  section{ padding:34px 0; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}