:root {
  --paper: #FCFBF7;
  --ink: #1E2B3C;
  --ink-soft: #55606E;
  --line: #D9DEE4;
  --herb: #2F7D4F;
  --ph: #FFF1A8;
  --serif: ui-serif, "New York", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #171B21; --ink: #E7EAEE; --ink-soft: #A3ABB5; --line: #2C333C; --herb: #6FC08F; --ph: #6B5B12; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.1875rem/1.65 var(--serif); }
a { color: var(--herb); text-underline-offset: .18em; }
a:focus-visible { outline: 2px solid var(--herb); outline-offset: 3px; border-radius: 2px; }
.ph { background: var(--ph); color: inherit; padding: 0 .2em; border-radius: 2px; }

.letter { max-width: 38rem; margin: 0 auto; padding: 4rem 1rem 5rem; }

.head { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: end; margin-bottom: 3rem; }
.head h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.head p { font-family: var(--sans); font-size: .95rem; color: var(--ink-soft); margin: .75rem 0 0; }
.photo { width: 11rem; aspect-ratio: 4/5; background: var(--line); border: .5rem solid #fff; box-shadow: 0 1px 2px rgba(30,43,60,.15), 0 8px 24px rgba(30,43,60,.08); transform: rotate(2.5deg); display: grid; place-items: center; text-align: center; font: .8rem/1.3 var(--sans); color: var(--ink-soft); padding: .5rem; }
img.photo { height: auto; object-fit: cover; padding: 0; background: #fff; }
@media (prefers-color-scheme: dark) { .photo { border-color: #2C333C; } }

.letter:not(.legal) > p:first-of-type::first-letter { float: left; font-size: 3.6em; line-height: .85; padding: .08em .08em 0 0; font-weight: 600; color: var(--herb); }
h2 { font-size: 1.45rem; font-weight: 600; margin: 3rem 0 .5rem; letter-spacing: -.01em; }
p { margin: 0 0 1.1rem; }

.promises { list-style: none; padding: 0; margin: 1.5rem 0; border-top: 1px solid var(--line); }
.promises li { padding: .9rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; }
.promises b { font-family: var(--sans); font-size: .95rem; font-weight: 600; padding-top: .15rem; }
@media (max-width: 34rem) { .promises li { grid-template-columns: 1fr; gap: .2rem; } .head { grid-template-columns: 1fr; } .photo { width: 9rem; order: -1; } }

.sign { margin-top: 2.5rem; }
.signature img { display: block; width: 10rem; height: auto; }
.sign p { font-family: var(--sans); font-size: .95rem; color: var(--ink-soft); margin: .25rem 0 0; }

.contact { margin-top: 4rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 6px; font-family: var(--sans); font-size: 1rem; }
.contact h2 { margin-top: 0; font-family: var(--serif); }
.contact p:last-child { margin: 0; }

footer { font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); max-width: 38rem; margin: 0 auto; padding: 0 1rem 3rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
footer a { color: inherit; }

/* Unterseiten (Impressum, Datenschutz) */
.back { font-family: var(--sans); font-size: .95rem; display: inline-block; margin-bottom: 2rem; }
.legal h1 { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; margin: 0 0 1.5rem; }
.legal h2 { font-size: 1.2rem; margin: 2.25rem 0 .4rem; }
.legal p, .legal li { font-size: 1.0625rem; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1.1rem; }

/* Kopfzeile mit Sprachwahl */
.topbar { max-width: 38rem; margin: 0 auto; padding: 1rem 1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--sans); }
.topbar .back { margin: 0; }
.letter { padding-top: 2.5rem; }
.legal { padding-top: 1.5rem; }
.lang-menu { position: relative; margin-left: auto; }
.lang-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border: 1px solid transparent; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { border-color: var(--line); }
.lang-menu summary:focus-visible { outline: 2px solid var(--herb); outline-offset: 2px; }
.lang-menu summary svg { width: 1rem; height: 1rem; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 10; list-style: none; margin: 0; padding: .35rem; min-width: 10rem; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(30,43,60,.12); }
.lang-menu a { display: flex; justify-content: space-between; padding: .45rem .7rem; border-radius: 6px; font-size: .95rem; color: var(--ink); text-decoration: none; }
.lang-menu a:hover { background: var(--line); }
.lang-menu a[aria-current] { color: var(--herb); font-weight: 600; }
.lang-menu a[aria-current]::after { content: "✓"; }