/*
  Barbara Stambolis – zentrale Gestaltung
  ------------------------------------------------------------
  Die Website ist bewusst statisch gehalten: HTML + diese CSS-Datei.
  Farben, Abstände, Schriftgrößen und Responsive-Verhalten werden hier
  zentral gesteuert.
*/
:root {
  --ink: #3c312b;
  --muted: #71675f;
  --paper: #fbf8f2;
  --paper-2: #f3ede4;
  --canvas: #e9e3db;
  --taupe: #79695d;
  --taupe-dark: #5f5147;
  --line: #d8cdbf;
  --line-dark: #b8a795;
  --max: 1180px;
  --reading: 900px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); line-height: 1.62; }
a { color: var(--taupe-dark); text-decoration-thickness: .06em; text-underline-offset: .17em; }
a:hover { color: #2f2722; }
a:focus-visible { outline: 3px solid #8f7967; outline-offset: 4px; border-radius: 2px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: #fff; padding: .7rem 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.skip-link:focus { top: 1rem; }

/* Kopf */
.site-header { background: rgba(251,248,242,.98); border-bottom: 1px solid var(--line-dark); }
.header-inner { width: min(var(--max), calc(100% - 2.5rem)); margin: 0 auto; }
.brand { display: block; padding: 1.35rem 0 1.1rem; color: var(--ink); text-decoration: none; font-size: clamp(2rem,4vw,3.25rem); line-height: 1; letter-spacing: -.025em; }
.brand:hover { color: var(--ink); }
.main-nav { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.main-nav a { position: relative; display: block; padding: .82rem .6rem; text-align: center; text-decoration: none; color: #51463e; font-size: 1.02rem; }
.main-nav a + a::before { content: ""; position: absolute; left: 0; top: 28%; bottom: 28%; width: 1px; background: var(--line); }
.main-nav a:hover, .main-nav a.active { background: #f5efe6; color: #261f1b; }
.main-nav a.active { box-shadow: inset 0 -2px 0 var(--taupe); }

/* Startseite */
.home { background: #eee9e2; }
.home .site-header { border-top: 5px solid #f8f5f0; }
.home-main { width: min(var(--max), calc(100% - 2.5rem)); margin: 0 auto; background: var(--paper); box-shadow: 0 12px 34px rgba(58,45,36,.12); }
.home-hero { display: grid; grid-template-columns: minmax(0,46%) minmax(0,54%); min-height: 410px; border-bottom: 1px solid var(--line-dark); background: #fdfaf5; overflow: hidden; }
.portrait-wrap { min-height: 410px; background: #e9e6e1; }
.portrait-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 48% 43%; filter: grayscale(100%); }
.home-title { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(2.4rem,5vw,5rem); background: radial-gradient(circle at 35% 50%, #fffdf9 0, #fbf7f0 72%); }
.home-title > p { margin: 0; color: #75675d; font-size: clamp(.88rem,1.5vw,1.05rem); letter-spacing: .08em; text-transform: uppercase; }
.home-title h1 { margin: 1.5rem 0 0; font-weight: 400; font-size: clamp(2.7rem,5vw,4.6rem); line-height: 1.05; letter-spacing: -.025em; }
.home-title h1 span { display: block; font-size: .82em; margin-bottom: .12em; }
.ornament-line { width: min(100%,520px); display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.ornament-line::before,.ornament-line::after { content:""; flex:1; height:1px; background: var(--line); }
.ornament-line span { width: 30px; height: 12px; position: relative; }
.ornament-line span::before,.ornament-line span::after { content:""; position:absolute; top:5px; width:12px; height:6px; border-top:1px solid var(--line-dark); border-radius:50%; }
.ornament-line span::before { left:2px; transform:rotate(22deg); }
.ornament-line span::after { right:2px; transform:rotate(-22deg); }
.ornament { margin-top: 1.3rem; color: #c8b8a7; font-size: 2rem; line-height: 1; }
.home-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; padding: clamp(1.6rem,3.5vw,3rem); background: linear-gradient(#f4eee5,#efe7dc); }
.home-link { min-height: 168px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: .95rem; background: rgba(255,255,255,.42); border: 1px solid #d8ccbd; outline: 1px solid rgba(255,255,255,.6); outline-offset: -5px; color: var(--ink); text-decoration: none; font-size: 1.2rem; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.home-link:hover { transform: translateY(-2px); background: rgba(255,255,255,.72); border-color: #bda994; color: var(--ink); }
.home-icon { width: 58px; height: 58px; border-radius: 50%; display:grid; place-items:center; background:#e9e0d4; }
.home-icon svg { width:34px; height:34px; fill:none; stroke:#725f51; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* Unterseiten */
.page-shell { width: min(var(--max), calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(2rem,5vw,4rem) clamp(1.2rem,3vw,2.5rem) 5rem; min-height: 62vh; background: var(--paper); }
.page-heading { max-width: var(--reading); margin-bottom: 2.3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
h1,h2,h3 { line-height: 1.16; font-weight: 400; }
h1 { font-size: clamp(2.25rem,5vw,3.8rem); margin:0; letter-spacing:-.03em; }
h2 { font-size: clamp(1.45rem,3vw,2rem); margin:0 0 1rem; }
.subnav { display:flex; flex-wrap:wrap; gap:.55rem; margin:-.7rem 0 2.3rem; }
.subnav a { border:1px solid var(--line); padding:.55rem .8rem; text-decoration:none; background:#fffdf9; color:var(--ink); font-size:.92rem; }
.subnav a.active { color:#fff; background:var(--taupe); border-color:var(--taupe); }
.publication-list { max-width:var(--reading); }
.publication-list article { position:relative; padding:1.05rem 1rem 1.05rem 1.55rem; border-top:1px solid var(--line); background:rgba(255,255,255,.38); }
.publication-list article:last-child { border-bottom:1px solid var(--line); }
.publication-list article::before { content:""; position:absolute; left:.35rem; top:1.7rem; width:.36rem; height:.36rem; border-radius:50%; background:#9d8877; }
.publication-list p { margin:0; }
.publication-list a { overflow-wrap:anywhere; }
.timeline { max-width:var(--reading); list-style:none; margin:0; padding:0; }
.timeline li { display:grid; grid-template-columns:150px minmax(0,1fr); gap:1.25rem; padding:1.1rem 0; border-top:1px solid var(--line); }
.timeline li:last-child { border-bottom:1px solid var(--line); }
.timeline .date { color:#7c6859; font-weight:700; font-size:.9rem; }
.timeline .text p { margin:0; }
.event-year { max-width:var(--reading); margin:3rem 0 0; }
.event-year:first-of-type { margin-top:0; }
.event-year h2 { display:flex; align-items:center; gap:1rem; color:#725f51; }
.event-year h2::after { content:""; height:1px; flex:1; background:var(--line); }
.event-list { display:grid; gap:.75rem; }
.event { background:#fffdf9; border:1px solid var(--line); padding:1rem 1.15rem; }
.event-date { margin:0 0 .28rem; color:#806b5c; font-weight:700; font-size:.88rem; }
.event-text, .event-text p { margin:0; }
.event-text a { overflow-wrap:anywhere; }
.contact-card,.legal { max-width:var(--reading); background:#fffdf9; border:1px solid var(--line); padding:clamp(1.3rem,4vw,2.2rem); }
.contact-card p,.legal p { margin-top:0; }
.contact-card p:last-child,.legal p:last-child { margin-bottom:0; }
.legal h2 { margin-top:2rem; font-size:1.35rem; }

/* Fuß */
.site-footer { background:var(--taupe-dark); color:#f2ece5; }
.footer-inner { width:min(var(--max),calc(100% - 2.5rem)); min-height:70px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.footer-inner::before,.footer-inner::after { content:""; height:1px; width:min(32vw,420px); background:rgba(255,255,255,.28); margin:0 1.5rem; }
.footer-inner a { color:#f6f0e9; text-decoration:none; letter-spacing:.04em; }
.footer-inner a:hover { color:#fff; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr 1fr; min-height: 360px; }
  .portrait-wrap { min-height:360px; }
  .home-title { padding:2.4rem 1.5rem; }
  .home-links { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 680px) {
  .header-inner,.home-main,.page-shell,.footer-inner { width:100%; }
  .site-header { position:relative; }
  .brand { padding:1.05rem 1rem .9rem; font-size:2.15rem; }
  .main-nav { grid-template-columns:repeat(2,1fr); border-bottom:0; }
  .main-nav a { border-top:1px solid var(--line); padding:.72rem .35rem; font-size:.94rem; }
  .main-nav a + a::before { display:none; }
  .home-hero { grid-template-columns:1fr; }
  .portrait-wrap { min-height:0; aspect-ratio: 1.22 / 1; }
  .portrait-wrap img { object-position:50% 38%; }
  .home-title { padding:2.5rem 1.15rem 2.8rem; }
  .home-title > p { font-size:.78rem; }
  .home-title h1 { font-size:clamp(2.45rem,12vw,3.5rem); }
  .home-links { grid-template-columns:1fr 1fr; gap:.65rem; padding:1rem; }
  .home-link { min-height:130px; font-size:1.05rem; }
  .home-icon { width:48px; height:48px; }
  .home-icon svg { width:29px; height:29px; }
  .page-shell { padding:2.2rem 1rem 4rem; }
  .subnav { flex-direction:column; }
  .subnav a { width:100%; }
  .timeline li { grid-template-columns:1fr; gap:.25rem; }
  .footer-inner::before,.footer-inner::after { width:22vw; margin:0 .8rem; }
}
@media (max-width: 420px) {
  .main-nav { grid-template-columns:1fr; }
  .home-links { grid-template-columns:1fr; }
  .home-link { min-height:105px; flex-direction:row; gap:1rem; justify-content:flex-start; padding:0 1.35rem; }
}
@media print {
  .site-header,.site-footer,.subnav,.skip-link,.home-links { display:none; }
  body,.page-shell,.home-main { background:#fff; box-shadow:none; width:100%; }
  .page-shell { padding:0; }
  .publication-list article,.event,.contact-card,.legal { break-inside:avoid; }
}