/* 2026 (c) Senoner Markus */
  :root {
    --paper: #f6f2ea;
    --ink: #2b2a26;
    --muted: #6f6a60;
    --rule: #ddd5c6;
    --rose: #b5624a;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans);}
  a { color: var(--rose); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: var(--ink); }

  /* ---------- Titelbild ---------- */
  .hero {
    position: relative; min-height: 88vh; display: flex; align-items: flex-end; color: #fff;
    /* Fallback-Verlauf, falls das Foto fehlt */
    background:
      linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%),
      url("gherdeina.jpg") center 45% / cover no-repeat,
      linear-gradient(160deg, #8fa6b8 0%, #d9b9a0 45%, #5d6b55 100%);
  }
  .hero-inner {width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 28px 56px;}
  .hero h1 {margin: 0; font: 400 clamp(64px, 13vw, 168px)/0.9 var(--serif); letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0,0,0,.25);}
  .hero p {margin: 14px 0 0; font-size: clamp(15px, 2vw, 19px); letter-spacing: .18em; text-transform: uppercase; opacity: .92;}
  .credit {position: absolute; right: 14px; bottom: 10px; font-size: 12px; opacity: .7;}

  /* ---------- Inhalt ---------- */
  main { max-width: 1080px; margin: 0 auto; padding: 0 28px;}
  section { padding: 72px 0; border-bottom: 1px solid var(--rule);}
  section:last-of-type { border-bottom: 0;}
  h2 {margin: 0 0 28px; font: 400 15px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);}
  h2 span { color: var(--rule); margin: 0 .5em;}

  .bi {display: grid; grid-template-columns: 1fr 1fr; gap: 48px;}
  .bi > [lang="it"] { color: var(--muted);}
  .lead {font: 400 clamp(22px, 2.6vw, 28px)/1.4 var(--serif); margin: 0 0 16px;}
  .bi p { margin: 0 0 14px;}

  /* Persoenlichkeiten */
  .people { list-style: none; margin: 0; padding: 0;}
  .people li {display: grid; grid-template-columns: 260px 1fr 1fr; gap: 32px; padding: 20px 0; border-top: 1px solid var(--rule);}
  .people li:first-child { border-top: 0; padding-top: 0;}
  .people .name { font: 400 22px/1.3 var(--serif);}
  .people .name small { display: block; font: 14px/1.4 var(--sans); color: var(--muted); margin-top: 2px;}
  .people [lang="it"] { color: var(--muted);}

  /* Links-Karten */
  .cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
  .card {display: block; padding: 28px 26px 26px; background: #fff; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); text-decoration: none;
    transition: border-color .2s, transform .2s;
  }
  .card:hover {border-color: var(--rose); transform: translateY(-2px); color: var(--ink);}
  .card .kind {font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose);}
  .card .title { display: block; font: 400 26px/1.25 var(--serif); margin: 10px 0 10px;}
  .card .desc { display: block; font-size: 15px; color: var(--muted);}
  .card .url { display: block; margin-top: 18px; font-size: 14px; color: var(--rose);}

  footer {
    max-width: 1080px; margin: 0 auto; padding: 32px 28px 48px;
    font-size: 14px; color: var(--muted);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  }
  footer a { color: var(--muted); }

  @media (max-width: 820px) {
    .bi { grid-template-columns: 1fr; gap: 20px; }
    .people li { grid-template-columns: 1fr; gap: 6px; }
    .cards { grid-template-columns: 1fr; }
    section { padding: 52px 0; }
  }