/* noether.net – Papier, Tinte, Weinrot. Keine externen Ressourcen. */
@font-face { font-family: "Crimson Pro"; src: url(fonts/CrimsonPro-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url(fonts/CrimsonPro-Italic.woff) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url(fonts/CrimsonPro-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(fonts/InstrumentSerif-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(fonts/InstrumentSerif-Italic.woff) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #ebdfcb;
  --paper-light: #f6efe3;
  --mat: #fbf7ef;
  --ink: #2e2219;
  --muted: #6b5848;
  --wine: #7c2430;
  --red: #9c0000;
  --tan: #d6c7ad;
  --line: #cbb89a;
  --serif: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --display: "Instrument Serif", "Crimson Pro", Georgia, serif;
  --w: 72rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 1.2rem/1.6 var(--serif);
  background-color: var(--paper);
  background-image: linear-gradient(rgba(246, 239, 227, .66), rgba(246, 239, 227, .66)), url(paper.gif);
  background-size: auto, 160px 160px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--wine); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--wine); line-height: 1.15; letter-spacing: .005em; }
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: .2em 0 .35em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 1.6em 0 .4em; }
h3 { font-size: 1.4rem; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 700px) { .wrap { padding: 0 2rem; } }
@media (max-width: 600px) { .site-nav ul { gap: .1rem .9rem; } .site-nav a { font-size: 1.05rem; } .brand img { width: 160px; } .hero-portrait { max-width: 260px; } }
.prose { max-width: 46rem; }
.prose.narrow { max-width: 42rem; }
.lead { font-size: 1.35rem; line-height: 1.55; }
.small { font-size: 1rem; }
.center { text-align: center; }
.note { color: var(--muted); font-style: italic; font-size: 1.05rem; }

.skip { position: absolute; left: -999px; top: 0; background: var(--mat); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }
.draft-banner { background: var(--wine); color: #fff; text-align: center; font-size: .95rem; padding: .3rem 1rem; letter-spacing: .04em; }

/* Kopf */
.site-header { border-bottom: 1px solid var(--line); background: rgba(246, 239, 227, .55); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; padding-top: .9rem; padding-bottom: .9rem; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--muted); }
.brand img { width: 200px; height: auto; }
.brand-sub { font-size: .95rem; font-style: italic; margin-top: .1rem; }
.site-nav { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: 1.15rem; padding: .3rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--wine); border-bottom-color: var(--tan); }
.site-nav a[aria-current="page"] { color: var(--wine); border-bottom-color: var(--wine); }
.site-nav .lang { font-size: 1rem; border: 1px solid var(--line); border-radius: 2rem; padding: .15rem .8rem; color: var(--muted); }
.site-nav .lang:hover { border-color: var(--wine); }

main { padding-bottom: 3rem; }

/* Schaltflächen */
.btn { display: inline-block; background: var(--wine); color: #fff; text-decoration: none; padding: .55rem 1.3rem; border-radius: 2px; font-size: 1.1rem; border: 1px solid var(--wine); cursor: pointer; font-family: var(--serif); }
.btn:hover { background: #5f1a24; color: #fff; }
.btn.ghost { background: transparent; color: var(--wine); }
.btn.ghost:hover { background: rgba(124, 36, 48, .08); color: var(--wine); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Startseite */
.hero { display: grid; gap: 2rem; align-items: center; padding-top: 2.5rem; padding-bottom: 1.5rem; }
@media (min-width: 820px) { .hero { grid-template-columns: minmax(240px, 360px) 1fr; gap: 3.5rem; padding-top: 3.5rem; } }
.hero-portrait { margin: 0; background: var(--mat); padding: .8rem .8rem 2.4rem; box-shadow: 0 1px 2px rgba(46, 34, 25, .2), 0 12px 30px -12px rgba(46, 34, 25, .45); transform: rotate(-1.2deg); max-width: 360px; justify-self: center; }
.hero h1 { margin-top: 0; }
.hero .dates { display: block; font-size: .5em; color: var(--muted); font-style: italic; margin-top: .2em; }
.callout { display: grid; gap: 1rem 2rem; align-items: center; margin-top: 2rem; padding-top: 1.6rem; padding-bottom: 1.6rem; background: var(--mat); border: 1px solid var(--line); border-left: 6px solid var(--wine); }
@media (min-width: 820px) { .callout { grid-template-columns: 1fr auto; padding-left: 2rem; padding-right: 2rem; } }
.callout h2 { margin-top: 0; }
.callout p { margin-bottom: 0; }
.section-h { margin-top: 2.5rem; }
.two-col { display: grid; gap: 1rem 3rem; }
@media (min-width: 820px) { .two-col { grid-template-columns: 1fr 1fr; } }
.wanted-teaser { border-top: 1px solid var(--line); }
@media (min-width: 820px) { .wanted-teaser { border-top: 0; border-left: 1px solid var(--line); padding-left: 2.5rem; } }

/* Werkraster: Bilder im Passepartout */
.grid { list-style: none; margin: 1.2rem 0 1.8rem; padding: 0; display: grid; gap: 1.6rem 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr 1fr; gap: 1.2rem .9rem; } .ct { font-size: 1.02rem; } .frame { padding: 8%; } }
.card a { display: block; text-decoration: none; color: var(--ink); }
.frame { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--mat); padding: 10%; box-shadow: 0 1px 2px rgba(46, 34, 25, .18), 0 8px 18px -10px rgba(46, 34, 25, .45); transition: transform .2s ease, box-shadow .2s ease; }
.frame img { max-height: 100%; width: auto; object-fit: contain; box-shadow: 0 0 0 1px rgba(46, 34, 25, .12); }
.card a:hover .frame { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(46, 34, 25, .2), 0 14px 24px -12px rgba(46, 34, 25, .55); }
.cap { display: block; margin-top: .55rem; }
.ct { display: block; font-size: 1.15rem; line-height: 1.3; }
.cm { display: block; color: var(--muted); font-size: .95rem; font-style: italic; }
.card[hidden] { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; }
.chip { font: inherit; font-size: 1rem; background: var(--mat); color: var(--ink); border: 1px solid var(--line); border-radius: 2rem; padding: .25rem .9rem; cursor: pointer; }
.chip span { color: var(--muted); font-size: .9em; }
.chip[aria-pressed="true"] { background: var(--wine); border-color: var(--wine); color: #fff; }
.chip[aria-pressed="true"] span { color: #f1d9dc; }

/* Werkseite */
.crumbs { font-size: 1rem; color: var(--muted); margin: 1.5rem 0 .5rem; }
.work { display: grid; gap: 2rem; }
@media (min-width: 900px) { .work { grid-template-columns: 3fr 2fr; gap: 3rem; align-items: start; } }
.work-images { display: grid; gap: 1.4rem; }
.zoom { display: block; background: var(--mat); padding: clamp(.8rem, 4%, 2.2rem); box-shadow: 0 1px 2px rgba(46, 34, 25, .18), 0 14px 30px -14px rgba(46, 34, 25, .5); cursor: zoom-in; }
.zoom img { margin: 0 auto; max-height: 80vh; width: auto; }
.work-info h1 { margin-top: 0; }
.by { margin-top: -.6rem; color: var(--muted); font-style: italic; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.2rem; margin: 1.2rem 0; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.ask { margin-top: 2rem; background: var(--mat); border-left: 5px solid var(--wine); padding: .4rem 1.3rem 1.2rem; }
.ask h2 { font-size: 1.5rem; margin-top: .8rem; }
.prevnext { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 1.05rem; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.lightbox::backdrop { background: rgba(30, 20, 14, .88); }
.lightbox img { max-width: 96vw; max-height: 92vh; width: auto; }
.lb-close { position: fixed; top: .6rem; right: 1rem; font-size: 2.4rem; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; }

/* Leben */
.float-right { margin: .5rem 0 1.5rem; background: var(--mat); padding: .7rem .7rem .4rem; box-shadow: 0 10px 24px -14px rgba(46, 34, 25, .5); max-width: 280px; }
@media (min-width: 900px) { .float-right { float: right; margin: .5rem -16rem 1rem 2rem; } }
.float-right figcaption { font-size: .95rem; color: var(--muted); font-style: italic; padding: .4rem 0; }
.timeline { list-style: none; padding: 0; margin: 1rem 0; border-left: 2px solid var(--tan); }
.timeline li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .45rem 0 .45rem 1rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 1.05rem; width: 12px; height: 12px; border-radius: 50%; background: var(--wine); }
.timeline .t { font-family: var(--display); font-size: 1.35rem; color: var(--wine); line-height: 1.4; }
@media (max-width: 520px) { .timeline li { grid-template-columns: 1fr; gap: 0; } }
blockquote { margin: 1.2rem 0; padding: .3rem 0 .3rem 1.4rem; border-left: 3px solid var(--tan); font-style: italic; }
blockquote p { margin: .3rem 0; }
blockquote cite { display: block; font-style: normal; color: var(--muted); font-size: 1rem; }
.sources li { margin-bottom: .5rem; font-size: 1.05rem; }

/* Gesucht */
.wanted { background: var(--mat); border: 1px solid var(--line); padding: .4rem 1.6rem 1rem; margin: 1.6rem 0; }
.wanted h2 { margin-top: .2rem; }
.status { margin: 1rem 0 0; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wine); }

/* Formular */
form.contact { display: grid; gap: 1rem; margin-top: 1.5rem; }
form.contact label { display: grid; gap: .25rem; font-size: 1.05rem; }
form.contact input[type=text], form.contact input[type=email], form.contact textarea, form.contact input[type=file] {
  font: inherit; font-size: 1.1rem; padding: .55rem .7rem; border: 1px solid var(--line); background: var(--mat); color: var(--ink); border-radius: 2px; width: 100%; }
form.contact input:focus, form.contact textarea:focus { border-color: var(--wine); outline: 2px solid rgba(124, 36, 48, .25); }
fieldset { border: 1px solid var(--line); padding: .8rem 1.1rem 1.1rem; margin: 0; display: grid; gap: .8rem; background: rgba(251, 247, 239, .5); }
legend { font-family: var(--display); font-size: 1.35rem; color: var(--wine); padding: 0 .4rem; }
form.contact label.radio, form.contact label.check { display: flex; gap: .6rem; align-items: flex-start; }
label.radio input, label.check input { margin-top: .35rem; accent-color: var(--wine); width: 1.1rem; height: 1.1rem; flex: none; }
.row2 { display: grid; gap: 1rem; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } }
.hint { font-size: .95rem; color: var(--muted); }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
abbr[title] { text-decoration: none; color: var(--wine); }
.todo { background: #fff6d8; border: 1px dashed #b08a2e; padding: .7rem 1rem; font-size: 1.05rem; }
.work-fields[hidden] { display: none; }

/* Fuß */
.site-footer { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; color: var(--muted); background: rgba(235, 223, 203, .5); }
.site-footer p { margin: .3rem 0; }
.foot-sig { width: 140px; opacity: .85; margin-bottom: .6rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .hero-portrait { transform: none; } }
@media print { .site-header, .site-footer, .draft-banner, .filters, .ask, .prevnext { display: none; } body { background: #fff; } }

/* Formular-Fehlermeldung */
.form-error { background: #fbe9ea; border-left: 5px solid var(--wine); padding: .7rem 1rem; color: #5f1a24; }

/* Nachfahrentafel */
.tree { list-style: none; padding: 0; margin: 1.5rem 0; }
.tree > li { position: relative; padding: 0 0 1.4rem 0; }
.tree > li + li::before { content: ""; position: absolute; left: 50%; top: -1.4rem; height: 1.4rem; border-left: 2px solid var(--tan); }
.tree .gen { display: block; text-align: center; font-family: var(--display); color: var(--wine); font-size: 1.15rem; margin-bottom: .4rem; }
.tree .row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.tree .couple { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .6rem; background: var(--mat); border: 1px solid var(--line); padding: .6rem .9rem; margin: 0 auto; max-width: 100%; }
.tree > li > .couple { width: fit-content; }
.tree .couple.main { border: 2px solid var(--wine); }
.tree .p { display: flex; flex-direction: column; text-align: center; line-height: 1.3; }
.tree .p small { color: var(--muted); font-size: .9rem; }
.tree .amp { color: var(--wine); font-size: .95rem; white-space: nowrap; }
.tree-note { text-align: center; font-size: 1rem; color: var(--muted); font-style: italic; margin: .5rem 0 0; }