:root{
      /* Primärfarbe nach Vorgabe */
      --brand: #bd2630;
      --gray: rgb(248, 248, 248);
      --black: rgb(0, 0, 0);

      /* Material 3 Design Tokens (Minimal-Theme) */
      --md-sys-color-primary: var(--brand);
      --md-sys-color-on-primary: #ffffff;
      --md-sys-color-primary-container: #ffd9dc;
      --md-sys-color-on-primary-container: #3e0a0d;

      --md-sys-color-secondary: #6d5f5f;
      --md-sys-color-on-secondary: #ffffff;

      --md-sys-color-surface: #ffffff;
      --md-sys-color-on-surface: #1f1f1f;
      --md-sys-color-surface-variant: #f4eaea;
      --md-sys-color-outline: #8c7d7d;

      --radius: 14px;
      --maxw: 1100px;
      --shadow: 0 2px 10px rgba(0,0,0,.07);
    }
    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }

    /* Reset/Defaults */
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      color: var(--md-sys-color-on-surface);
      background: var(--md-sys-color-surface);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img{max-width:100%;display:block;height:auto;border-radius: 10px}
    a{color:inherit;text-decoration:none}

    /* App Bar / Header */
    header{
      position: sticky; top: 0; z-index: 50;
      background: var(--md-sys-color-surface);
      box-shadow: var(--shadow);
    }
    .header-inner{
      max-width: var(--maxw);
      margin: 0 auto;
      display:flex; align-items:center; justify-content:space-between;
      padding: .75rem 1em;
      gap: .5rem;
      color: #bd2630;
    }
    .brand{
      display:flex; align-items:baseline; gap:.5rem;
      font-family: Merriweather, Georgia, serif;
    }
    .brand a{font-weight:700; font-size:1.25rem}

    nav{display:none}
    nav a{
      padding:.5rem .75rem; border-radius: 8px;
    }
    nav a.active{font-weight:700}

    .menu-btn{display:inline-flex}

    /* Mobile-First Drawer */
    .drawer{
      position: fixed; inset: 0 0 auto 0; top: 56px;
      background: var(--md-sys-color-surface);
      box-shadow: var(--shadow);
      transform: translateY(-125%);
      transition: transform .25s ease;
    }
    .drawer.open{ transform: translateY(0); }
    .drawer a{ display:block; padding: 1rem; border-top:1px solid var(--md-sys-color-surface-variant); }

    /* Mobile Menü-Button ersetzt Material Icon Button */
    .menu-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: none;
      background: none;
      cursor: pointer;
      border-radius: 50%;
      transition: background-color 0.2s ease;
    }
    .menu-btn:hover {
      background-color: rgba(0,0,0,0.05);
    }

    /* Hamburger Icon */
    .menu-icon {
      position: relative;
      width: 20px;
      height: 2px;
      background-color: var(--brand);
      border-radius: 2px;
      transition: all 0.25s ease;
    }
    .menu-icon::before,
    .menu-icon::after {
      content: "";
      position: absolute;
      left: 0;
      width: 20px;
      height: 2px;
      background-color: var(--brand);
      border-radius: 2px;
      transition: all 0.25s ease;
    }
    .menu-icon::before {
      top: -6px;
    }
    .menu-icon::after {
      top: 6px;
    }

    /* Optional: animierter Wechsel zu X (wenn offen) */
    .menu-btn.open .menu-icon {
      background-color: transparent;
    }
    .menu-btn.open .menu-icon::before {
      transform: rotate(45deg) translate(4px, 4px);
    }
    .menu-btn.open .menu-icon::after {
      transform: rotate(-45deg) translate(4px, -4px);
    }

    /* Hero */
    .hero{
    position: relative;
    height: min(70vh, 640px);
    min-height: 360px;
    overflow: hidden;
    background: var(--gray);
    margin: 0; /* füge außen Abstände nach Bedarf hinzu */
    }

    .strip{ background: var(--brand); color:#fff; padding: 1rem }
    .hero_bg{
    position:absolute; inset:-10% -0 -0 -0;       /* extra Höhe für sanftes Parallax */
    background-size: cover;
    background-position: center;
    will-change: transform;
    transform: translateY(0);
    }
    .hero_overlay{
    position:absolute; inset:0;
    background: rgba(30, 30, 30, 0.4);
    }
    .hero_content{
    position: relative; z-index:1;
    color:#fff; text-align:center;
    padding: clamp(64px, 10vh, 120px) 20px;
    max-width: 780px; margin: 0 auto;
    }
    .hero_content h1{ font-size: clamp(2rem, 6vw, 4rem); margin:0 0 .5rem; font-weight:700; }
    .hero_content p{ font-size: clamp(1rem, 2.5vw, 1.25rem); margin:0 0 1.25rem; }
    .btn-primary{
    display:inline-block; background: var(--brand); color:#fff;
    padding:12px 22px; border-radius:10px; text-decoration:none; font-weight:600;
    }

    /* Content Sections */
    .container{ max-width: var(--maxw); margin: 0 auto; padding: 1.25rem; }
    .card{
      background: var(--md-sys-color-surface);
      border: 1px solid var(--md-sys-color-surface-variant);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card img{ border-radius: 0 }
    .card-content{ padding: 1rem }

    .grid{ display:grid; gap: 1rem }
    .flex{ display:grid; gap: 1rem }

    /* Gefüllter Button (Primär) */
    .btn-filled {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      font-family: Roboto, system-ui, sans-serif;
      font-weight: 600;
      padding: 6px 22px;
      border: 1px solid #bd2630;
      border-radius: 50px;
      text-decoration: none;
      background-color: #bd2630;
      color: #fff;
      transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    }

    .btn-filled:hover {
      background-color: #a32028; /* dunkleres Rot beim Hover */
      box-shadow: 0 2px 6px rgba(189, 38, 48, 0.3);
    }

    .btn-filled:active {
      background-color: #8b1b23; /* noch dunkler beim Klick */
      transform: translateY(1px);
    }

    .btn-filled:focus-visible {
      outline: 2px solid #e46a73;
      outline-offset: 2px;
    }

    /* Umrandeter Button (Sekundär) */
    .btn-outlined {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      font-family: Roboto, system-ui, sans-serif;
      font-weight: 600;
      padding: 6px 22px;
      border: 1px solid #bd2630;
      border-radius: 50px;
      text-decoration: none;
      color: #bd2630;
      background-color: transparent;
      transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    }

    .btn-outlined:hover {
      background-color: #bd2630;
      color: #fff;
    }

    .btn-outlined:active {
      background-color: #a32028;
      color: #fff;
      transform: translateY(1px);
    }

    .btn-outlined:focus-visible {
      outline: 2px solid #e46a73;
      outline-offset: 2px;
    }

    /* Footer */
    footer{
      margin-top: 2rem;
      background: #faf7f7;
      border-top: 1px solid var(--md-sys-color-surface-variant);
      color:#444;
    }
    .footer-inner{ max-width: var(--maxw); margin:0 auto; padding: 2rem 1.25rem; display:grid; gap:1rem }

    /* Desktop Tweaks */
    @media (min-width: 900px){
      nav{display:flex; gap:.25rem}
      .menu-btn{display:none}
      .drawer{display:none}
      .container{ padding: 2rem 1.25rem; }
      .grid{ grid-template-columns: repeat(2, 1fr) }
      .flex{ grid-template-columns: repeat(3, 1fr) }
      .hero{ padding: 4rem 1rem 2rem }
    }