:root{
      --accent:#b20000;
      --dark:#1a1a1a;
      --gray:#666;
      --bg:#fafafa;
      --card:#fff;
      --shadow:0 10px 30px rgba(0,0,0,.06);
      --shadowHover:0 20px 40px rgba(0,0,0,.09);
      --radius:12px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:var(--bg);
      color:var(--dark);
      line-height:1.6;
    }
    a{color:var(--accent);text-decoration:none}
    a:hover{ text-decoration: underline; }

    /* ---------- Header / Hero ---------- */
    header.hero{
      position:relative;
      overflow:hidden;
      max-width:1100px;
      margin:0 auto;
      padding:0 2rem 2.5rem;
    }

    /* Header-Bild (ohne Text im Bild) */
    .hero-media{
      margin:3rem 0 1.75rem;
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
      background:#111;
      aspect-ratio: 21 / 9;
    }
    .hero-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      filter:saturate(1.05) contrast(1.03);
    }

    .hero-title{
      padding:0 .25rem;
    }

    .hero-title h1{
      font-size:clamp(2.5rem,5vw,4rem);
      line-height:1.1;
      margin:0 0 1rem;
      letter-spacing:-.02em;
    }
    .hero-title p{
      font-size:1.15rem;
      color:var(--gray);
      max-width:740px;
      margin:0 0 1.25rem;
    }

    /* Subtil animierte Akzentlinie */
    .accent-line{
      position:relative;
      height:3px;
      width:min(520px, 100%);
      border-radius:99px;
      background:rgba(178,0,0,.18);
      overflow:hidden;
      margin:1.25rem 0 0;
    }
    .accent-line::after{
      content:"";
      position:absolute;
      inset:0;
      transform:translateX(-60%);
      background:linear-gradient(90deg, transparent, rgba(178,0,0,.85), transparent);
      animation:shine 3.4s ease-in-out infinite;
    }
    @keyframes shine{
      0%{transform:translateX(-70%)}
      50%{transform:translateX(70%)}
      100%{transform:translateX(70%)}
    }

    section{
      max-width:1100px;
      margin:auto;
      padding:3.5rem 2rem;
    }

    /* ---------- Quote Block ---------- */
    .quote-wrap{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:2rem;
      align-items:start;
      margin-top:2.5rem;
    }

    .quote-card{
      background:var(--card);
      border-radius:var(--radius);
      padding:1.75rem 1.75rem 1.5rem;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .quote-card::before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width:5px;
      background:var(--accent);
      opacity:.9;
    }
    .quote-label{
      font-size:.85rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(0,0,0,.55);
      margin-bottom:.75rem;
    }
    blockquote{
      margin:0;
      font-size:1.15rem;
      line-height:1.5;
    }
    .quote-source{
      margin-top:1rem;
      font-size:.95rem;
      color:var(--gray);
    }

    /* ---------- Manifest (Accordion) ---------- */
    .manifest{
      background:var(--card);
      border-radius:var(--radius);
      padding:1.25rem;
      box-shadow:var(--shadow);
    }
    .manifest h2{
      font-size:1.1rem;
      margin:.25rem .5rem 1rem;
      letter-spacing:.02em;
    }
    details{
      border-radius:10px;
      background:#fff;
      border:1px solid rgba(0,0,0,.08);
      margin:.75rem .25rem;
      overflow:hidden;
    }
    summary{
      cursor:pointer;
      padding:1rem 1rem;
      font-weight:600;
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    summary::-webkit-details-marker{display:none}
    .chev{
      width:14px;height:14px;
      border-right:2px solid rgba(0,0,0,.55);
      border-bottom:2px solid rgba(0,0,0,.55);
      transform:rotate(45deg);
      transition:transform .2s ease;
      flex:0 0 auto;
      margin-right:.25rem;
    }
    details[open] .chev{transform:rotate(225deg)}
    .details-body{
      padding:0 1rem 1rem;
      color:var(--gray);
    }

    /* ---------- Projects Grid ---------- */
    .projects{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:1.75rem;
      margin-top:2.75rem;
    }
    .project{
      background:var(--card);
      border-radius:var(--radius);
      padding:1.75rem;
      box-shadow:var(--shadow);
      transition:transform .2s ease, box-shadow .2s ease;
      display:flex;
      flex-direction:column;
      min-height: 190px;
    }
    .project:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadowHover);
    }
    .project h3{
      margin:.1rem 0 .5rem;
      font-size:1.25rem;
    }
    .project p{
      color:var(--gray);
      margin:0 0 1.25rem;
      flex:1 1 auto;
    }

     /* Content section */
    .wrap{
      max-width:1100px;
      margin:0 auto;
      padding: 2.5rem 1.5rem 3rem;
    }

    .card-soft{
      background:var(--card);
      border:0;
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .card-soft .card-header{
      background:transparent;
      border-bottom:1px solid rgba(0,0,0,.06);
      padding:1.25rem 1.25rem;
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
    }
    .card-soft .card-body{
      padding:1.25rem 1.25rem 1.35rem;
      color:var(--gray);
    }

    .badge-accent{
      background: rgba(178,0,0,.1);
      color: var(--accent);
      border: 1px solid rgba(178,0,0,.25);
      font-weight:600;
    }

    /* Small helpers */
    .kicker{
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:.85rem;
      color: rgba(0,0,0,.55);
    }


    .btn{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.7rem 1rem;
      border-radius:10px;
      background:var(--accent);
      color:#fff;
      font-weight:600;
      width:fit-content;
      transition:transform .15s ease, filter .15s ease;
    }
    /*
    .btn:hover{filter:brightness(1.05); transform:translateY(-1px)}
    .btn:active{transform:translateY(0)}
    */
    .btn svg{width:16px;height:16px;fill:#fff}

    .btn-accent:hover {
      background: #990000;
      border-color: #990000;
      color: var(--bg);
      text-decoration: none;
    }

    .btn-outline-accent {
      background: var(--bg);
      border-color: var(--accent);
      color: var(--accent);
      text-decoration: none;
    }

    .btn-outline-accent:hover {
      
      border-color: #990000;
      color:  #990000;
      text-decoration: none;
    }

    

    /* ---------- Footer ---------- */
    

    footer{
      background:#111;
      color:#aaa;
      padding: 2rem;
      margin-top:3rem;
    }

    footer .inner{
      max-width:1100px;
      font-size:.9rem;
    }

    footer a{
      color:#d36a6a;
      text-decoration:none;
      transition: color .15s ease;
    }

    footer a:hover{
      color:#fff;
    }


    /* ---------- Responsive ---------- */
    @media (max-width: 900px){
      .quote-wrap{grid-template-columns:1fr}
      .hero-media{aspect-ratio: 16 / 9;}
    }
    @media (max-width: 600px){
      header.hero{padding:0 1.25rem 2rem}
      section{padding:3rem 1.25rem}
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .accent-line::after{animation:none}
    }


    .accordion-button {
  font-weight: 600;
  background: transparent;
}

.accordion-button:not(.collapsed) {
  color: var(--accent);
  background: rgba(178,0,0,.04);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-item {
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.accordion-body {
  padding-top: .25rem;
}