:root{
    --red:#981135;
    --ink:#241f1d;
    --muted:#6b615c;
    --paper:#f7f7f8;
    --line:#e4e4e7;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-size:17px;line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%}
  a{color:var(--red)}
  .wrap{width:100%;max-width:1060px;margin:0 auto;padding:0 24px}

  /* ---------- Kopfzeile ---------- */
  header.top{
    position:sticky;top:0;z-index:10;
    background:rgba(247,247,248,.94);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px;flex-wrap:wrap}
  .top img{height:38px;width:auto}
  nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
  nav a{
    color:var(--ink);text-decoration:none;font-size:14px;
    letter-spacing:.09em;text-transform:uppercase;padding-bottom:2px;
    border-bottom:1px solid transparent;
  }
  nav a:hover{border-bottom-color:var(--red);color:var(--red)}

  /* ---------- Hero ---------- */
  .hero{position:relative;min-height:clamp(380px,62vh,560px);display:flex;align-items:center;overflow:hidden}
  .hero::before{
    content:"";position:absolute;inset:0;
    background:url("bilder/brennerei.jpg") center 42% / cover no-repeat;  /* relativ zu dieser CSS-Datei */
  }
  .hero::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(20,14,12,.86) 0%,rgba(20,14,12,.7) 48%,rgba(20,14,12,.42) 100%);
  }
  .hero .wrap{position:relative;z-index:1;padding-block:72px;color:#fff}
  .kicker{
    font-size:13px;letter-spacing:.22em;text-transform:uppercase;
    color:#f2ced6;margin:0 0 18px;
  }
  .hero h1{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.12;
    margin:0 0 20px;max-width:20ch;
  }
  .hero p.lead{margin:0 0 30px;max-width:46ch;font-size:1.06rem;color:#f4efeb}
  .btn{
    display:inline-block;background:var(--red);color:#fff;text-decoration:none;
    padding:13px 26px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  }
  .btn:hover{background:#7d0e2c}
  .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.6);margin-left:10px}
  .btn.ghost:hover{background:rgba(255,255,255,.14)}

  /* ---------- Abschnitte ---------- */
  section{padding:84px 0}
  section + section{border-top:1px solid var(--line)}
  h2{
    font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.3rem);
    margin:0 0 10px;
  }
  h2 + .sub{color:var(--muted);margin:0 0 42px;font-size:15px;letter-spacing:.04em}
  .prose p{max-width:62ch;margin:0 0 18px}
  .prose p:last-child{margin-bottom:0}
  .signature{font-family:var(--serif);font-style:italic;color:var(--muted)}

  .split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}

  /* Zeitleiste */
  ol.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
  ol.timeline li{position:relative;padding:0 0 26px 26px}
  ol.timeline li:last-child{padding-bottom:0}
  ol.timeline li::before{
    content:"";position:absolute;left:-7px;top:9px;
    width:12px;height:12px;background:var(--red);
  }
  ol.timeline b{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:400}
  ol.timeline span{color:var(--muted);font-size:15px}

  /* Karussell */
  .carousel{position:relative}
  .track{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .track::-webkit-scrollbar{display:none}
  .track:focus-visible{outline:2px solid var(--red);outline-offset:4px}
  figure{margin:0}
  .track figure{flex:0 0 100%;scroll-snap-align:start;min-width:0}
  .viewport{position:relative}
  .track img{
    display:block;width:100%;height:auto;
    aspect-ratio:3 / 2;       /* Originalverhaeltnis der Fotos */
    object-fit:cover;background:#e8e8ea;
  }
  .nav-btn{
    position:absolute;top:50%;transform:translateY(-50%);
    width:50px;height:50px;padding:0;border:0;cursor:pointer;
    background:rgba(247,247,248,.88);color:var(--ink);
    font-family:var(--serif);font-size:30px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s ease;
  }
  .nav-btn:hover{background:#fff;color:var(--red)}
  .nav-btn.prev{left:16px}
  .nav-btn.next{right:16px}
  @media (min-width:861px){
    .track img{aspect-ratio:16 / 9}
  }
  .dots{display:flex;gap:11px;justify-content:center;margin-top:22px}
  .dot{
    width:10px;height:10px;padding:0;border:0;border-radius:50%;
    background:#c9c9ce;cursor:pointer;transition:background .15s ease;
  }
  .dot:hover{background:#9c9ca3}
  .dot[aria-current="true"]{background:var(--red)}

  /* Besuch: Zeiten / Anfahrt / Kontakt */
  #besuch{background:#eeeef0}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .card{background:var(--paper);border:1px solid var(--line);padding:30px}
  .card h3{
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--red);margin:0 0 16px;font-weight:600;
  }
  .card p{margin:0 0 12px}
  .card p:last-child{margin-bottom:0}
  .hours{font-family:var(--serif);font-size:1.3rem;line-height:1.4}
  .note{font-size:15px;color:var(--muted)}
  .card a{text-decoration:none;border-bottom:1px solid rgba(152,17,53,.35)}
  .card a:hover{border-bottom-color:var(--red)}
  .tel{font-family:var(--serif);font-size:1.3rem}

  /* Impressum */
  #impressum{padding:64px 0}
  #impressum h2{font-size:clamp(1.3rem,2.4vw,1.6rem)}
  .legal{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;font-size:15px;color:var(--muted)}
  .legal h3{
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink);margin:0 0 10px;font-weight:600;
  }
  .legal p{margin:0 0 10px}
  .legal p:last-child{margin-bottom:0}
  .legal a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(152,17,53,.35)}
  .legal a:hover{border-bottom-color:var(--red)}

  /* Rechtstext-Seiten */
  .doc{padding:60px 0 84px}
  .doc h1{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(1.9rem,4vw,2.5rem);margin:0 0 10px;
  }
  .doc .stand{color:var(--muted);font-size:15px;margin:0 0 44px}
  .doc h2{font-size:clamp(1.15rem,2.2vw,1.35rem);margin:42px 0 12px}
  .doc h3{
    font-family:var(--sans);font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--red);margin:26px 0 10px;font-weight:600;
  }
  .doc p,.doc li{max-width:74ch}
  .doc p{margin:0 0 14px}
  .doc ul{margin:0 0 14px;padding-left:20px}
  .doc li{margin-bottom:7px}
  .doc .zurueck{display:inline-block;margin-top:46px;font-size:15px}

  /* ---------- Fußzeile ---------- */
  footer{background:var(--ink);color:#cbbfb8;padding:44px 0;font-size:14px}
  footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
  footer a{color:#e8c7ce;text-decoration:none}
  footer a:hover{text-decoration:underline}

  /* ---------- Mobil ---------- */
  @media (max-width:860px){
    .split{grid-template-columns:1fr;gap:38px}
    .cards{grid-template-columns:1fr}
    .legal{grid-template-columns:1fr;gap:26px}
    section{padding:62px 0}
  }
  @media (max-width:560px){
    header.top{position:static}
    .top .wrap{min-height:0;padding-block:14px;gap:12px}
    .top img{height:32px}
    nav a{font-size:13px}
    nav ul{gap:16px}
    .nav-btn{width:42px;height:42px;font-size:24px}
    .nav-btn.prev{left:8px}
    .nav-btn.next{right:8px}
    .btn.ghost{margin:10px 0 0;display:block;text-align:center}
  }