/* hendrikknop.de – Stylesheet
   Farben und Schrift oben zentral änderbar. */

@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/raleway-latin-400-normal.woff2") format("woff2");
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/raleway-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/raleway-latin-400-italic.woff2") format("woff2");
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/raleway-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/raleway-latin-700-normal.woff2") format("woff2");
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/raleway-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --akzent: #c47f17;        /* Orange wie bisher, etwas dunkler für bessere Lesbarkeit */
  --akzent-hell: #dd9933;   /* das bisherige Orange */
  --text: #333;
  --text-leise: #767676;
  --linie: #e6e2dc;
  --grund: #fff;
  --grund-leise: #f7f5f2;
  --breite: 46rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--text); }

/* Kopfbereich */
.kopf { text-align: center; padding: 2.5rem 1rem 1.25rem; }
.kopf .name { font-size: 2rem; font-weight: 700; letter-spacing: .02em; color: var(--text); text-decoration: none; }
.kopf .name:hover { color: var(--akzent); }
.kopf .motto { margin: .2rem 0 0; color: var(--text-leise); font-style: italic; }

.menue { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.menue ul { list-style: none; margin: 0 auto; padding: .4rem 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem 1.4rem; max-width: 70rem; }
.menue a { display: inline-block; padding: .45rem 0; color: var(--text); text-decoration: none; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; border-bottom: 2px solid transparent; }
.menue a:hover { color: var(--akzent); }
.menue a[aria-current="page"] { color: var(--akzent); border-bottom-color: var(--akzent-hell); }

/* Titelbild */
.titelbild { margin: 0 auto; max-width: 1200px; }
.titelbild img { width: 100%; height: auto; }   /* Foto immer vollständig, nichts abgeschnitten */
.titelbild figcaption { max-width: var(--breite); margin: .5rem auto 0; padding: 0 1rem; font-size: .85rem; font-style: italic; color: var(--text-leise); text-align: center; }

/* Inhalt */
main { max-width: var(--breite); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
main::after { content: ""; display: table; clear: both; }
h1 { font-size: 2.2rem; line-height: 1.2; text-align: center; margin: 1.25rem 0 2rem; }
h1::after { content: ""; display: block; width: 3rem; height: 3px; background: var(--akzent-hell); margin: 1rem auto 0; }
h2 { font-size: 1.45rem; line-height: 1.3; margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 .4rem; }
p { margin: 0 0 1.1rem; }
.lead { font-weight: 700; font-size: 1.12rem; }
.thema { font-size: 1.35rem; font-weight: 700; line-height: 1.4; color: var(--akzent); }
.klein { font-size: .85rem; color: var(--text-leise); }
.ausfuellen { background: #fff3c4; padding: 0 .3rem; }

figure.rechts { float: right; width: 45%; margin: .35rem 0 1.25rem 1.75rem; }
figure.rechts figcaption, figure.mitte figcaption { font-size: .82rem; font-style: italic; line-height: 1.45; color: var(--text-leise); margin-top: .45rem; }
figure.mitte { margin: 1.5rem auto; }

.linkliste { padding-left: 1.2rem; }
.linkliste li { margin-bottom: .8rem; }

dl.kontakt { margin: 0; }
dl.kontakt dt { font-weight: 700; margin-top: 1rem; }
dl.kontakt dd { margin: 0; }

/* Fußbereich */
.fuss { background: var(--grund-leise); border-top: 1px solid var(--linie); text-align: center; padding: 2rem 1rem; font-size: .88rem; color: var(--text-leise); }
.fuss ul { list-style: none; padding: 0; margin: 0 0 .9rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; }
.fuss a { color: var(--text); text-decoration: none; }
.fuss a:hover { color: var(--akzent); }
.fuss p { margin: 0; }

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .kopf { padding-top: 1.75rem; }
  .kopf .name { font-size: 1.65rem; }
  h1 { font-size: 1.75rem; }
  figure.rechts { float: none; width: 100% !important; margin: 1.25rem auto; }
}

@media print {
  .menue, .fuss ul { display: none; }
  .titelbild img { width: auto; max-height: 8cm; margin: 0 auto; }
}

/* ---------- Variante 2: grafischer Feinschliff ---------- */
:root { --text: #2e2a26; --grund-leise: #f6f3ee; }
html { scroll-padding-top: 4rem; }

/* Kopf etwas großzügiger */
.kopf { padding: 3rem 1rem 1.6rem; }
.kopf .name { font-size: 2.35rem; letter-spacing: .05em; }
.kopf .motto { font-size: .95rem; letter-spacing: .03em; }

/* Menü bleibt beim Scrollen sichtbar */
.menue { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Titelbild mit Abstand, runden Ecken und weichem Schatten */
.titelbild { padding: 1.75rem 1rem 0; }
.titelbild img { border-radius: 8px; box-shadow: 0 14px 36px -18px rgba(0,0,0,.45); }
.titelbild figcaption { margin-top: .75rem; }

/* Überschrift und Einleitung */
h1 { font-size: 2.4rem; margin: 2rem 0 2.25rem; }
h2 { padding-bottom: .35rem; border-bottom: 1px solid var(--linie); }
.lead { font-weight: 400; font-size: 1.2rem; line-height: 1.65;
  border-left: 3px solid var(--akzent-hell); padding: .15rem 0 .15rem 1.15rem; margin-bottom: 1.6rem; }
.thema { text-align: center; margin-bottom: 1.75rem; }

/* Fotos im Text */
figure.rechts img { border-radius: 6px; box-shadow: 0 8px 22px -12px rgba(0,0,0,.4); transition: transform .2s ease; }
figure.rechts a:hover img { transform: translateY(-2px); }

/* Linkliste als ruhige Liste mit Pfeilen */
.linkliste { list-style: none; padding: 0; overflow: hidden; }
.linkliste li { margin: 0; padding: .8rem 0 .8rem 1.6rem; border-bottom: 1px solid var(--linie); position: relative; }
.linkliste li::before { content: "→"; position: absolute; left: 0; color: var(--akzent-hell); font-weight: 700; }
.linkliste a { text-decoration: none; }
.linkliste a:hover { text-decoration: underline; }

/* Kontaktdaten als Karte */
dl.kontakt { background: var(--grund-leise); border-radius: 8px; padding: .4rem 1.4rem 1.3rem; }

/* Fuß mit feiner Akzentlinie */
.fuss { border-top: 3px solid var(--akzent-hell); }

@media (max-width: 40rem) {
  .kopf .name { font-size: 1.8rem; }
  .titelbild { padding: 0; }
  .titelbild img { border-radius: 0; box-shadow: none; }
  h1 { font-size: 1.85rem; }
  .lead { font-size: 1.08rem; }
}