:root{
      --black:#050403;
      --black-soft:#0b0705;
      --cream:#f3e7d3;
      --cream-soft:rgba(243,231,211,.72);
      --gold:#c69a58;
      --gold-light:#e3c487;
      --line:rgba(227,196,135,.20);
      --max:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100%;
      overflow-x:hidden;
      background:var(--black);
      color:var(--cream);
      font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }

    a{color:inherit;text-decoration:none}

    .nav{
      position:fixed;
      inset:0 0 auto 0;
      z-index:30;
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:72px;
      padding:26px clamp(18px,4vw,58px) 16px;
      background:linear-gradient(to bottom,rgba(5,4,3,.82),rgba(5,4,3,.28),transparent);
      backdrop-filter:blur(5px);
    }

    .brand{
      font-family:Georgia,serif;
      font-size:20px;
      letter-spacing:.30em;
      color:var(--gold-light);
    }

    .navlinks{
      display:flex;
      align-items:center;
      gap:24px;
      color:rgba(243,231,211,.74);
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    .nav-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:10px 16px;
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--gold-light);
      background:rgba(255,255,255,.03);
    }

    .hero{
      position:relative;
      min-height:94svh;
      display:flex;
      align-items:flex-end;
      overflow:hidden;
      isolation:isolate;
      padding:140px 0 92px;
      background:
        radial-gradient(circle at 78% 35%,rgba(154,87,47,.22),transparent 34%),
        radial-gradient(circle at 20% 82%,rgba(102,54,30,.16),transparent 32%),
        linear-gradient(135deg,#050403 0%,#0b0705 54%,#100905 100%);
    }

    .hero:after{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      background:
        linear-gradient(to top,rgba(5,4,3,.78),transparent 42%),
        repeating-linear-gradient(
          90deg,
          transparent 0,
          transparent calc(25% - 1px),
          rgba(227,196,135,.035) calc(25% - 1px),
          rgba(227,196,135,.035) 25%
        );
      pointer-events:none;
    }

    .hero-inner,.section-inner{
      width:min(var(--max),calc(100% - 44px));
      margin:0 auto;
    }

    .hero-copy{max-width:980px}

    .kicker,.section-label{
      margin:0 0 24px;
      color:var(--gold-light);
      font-size:12px;
      letter-spacing:.32em;
      text-transform:uppercase;
    }

    h1,h2,h3{
      margin:0;
      font-family:Georgia,serif;
      font-weight:400;
    }

    h1{
      max-width:1040px;
      font-size:clamp(62px,10vw,142px);
      line-height:.88;
      letter-spacing:-.06em;
    }

    h2{
      font-size:clamp(48px,7vw,92px);
      line-height:.95;
      letter-spacing:-.05em;
    }

    .hero-lead{
      max-width:720px;
      margin:34px 0 0;
      color:rgba(243,231,211,.76);
      font-size:clamp(19px,2.2vw,27px);
      line-height:1.55;
    }

    section{
      position:relative;
      padding:clamp(100px,12vw,170px) 0;
      border-top:1px solid rgba(227,196,135,.08);
    }

    .split{
      display:grid;
      grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
      gap:clamp(52px,8vw,120px);
      align-items:start;
    }

    .copy p{
      margin:0 0 24px;
      color:var(--cream-soft);
      font-size:clamp(18px,1.8vw,22px);
      line-height:1.7;
    }

    .copy p:first-child{
      color:var(--cream);
      font-size:clamp(22px,2.4vw,31px);
      line-height:1.5;
    }

    .grid{
      margin-top:72px;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1px;
      border:1px solid var(--line);
      background:var(--line);
    }

    .card{
      min-height:300px;
      padding:42px;
      background:#080503;
    }

    .card span{
      display:block;
      margin-bottom:56px;
      color:rgba(227,196,135,.54);
      font-size:11px;
      letter-spacing:.20em;
      text-transform:uppercase;
    }

    .card h3{
      margin-bottom:18px;
      color:var(--gold-light);
      font-size:clamp(30px,4vw,50px);
      letter-spacing:-.03em;
    }

    .card p{
      margin:0;
      color:var(--cream-soft);
      font-size:17px;
      line-height:1.65;
    }

    .accent{
      background:
        radial-gradient(circle at 18% 24%,rgba(173,103,61,.11),transparent 34%),
        #080503;
    }

    .center{
      text-align:center;
      background:
        radial-gradient(circle at 50% 50%,rgba(155,89,49,.15),transparent 36%),
        #050403;
    }

    .center .section-inner{max-width:900px}
    .center h2{margin:0 auto}
    .center p{
      max-width:700px;
      margin:34px auto 0;
      color:var(--cream-soft);
      font-size:clamp(18px,2vw,23px);
      line-height:1.7;
    }

    .button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      min-height:52px;
      margin-top:38px;
      padding:0 26px;
      border:1px solid var(--gold);
      border-radius:999px;
      background:var(--gold);
      color:#130d07;
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      transition:transform .25s ease,filter .25s ease;
    }

    .button:hover{
      transform:translateY(-2px);
      filter:brightness(1.06);
    }

    .button-outline{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      min-height:52px;
      margin-top:38px;
      margin-left:16px;
      padding:0 26px;
      border:1px solid rgba(243,231,211,.4);
      border-radius:999px;
      background:transparent;
      color:var(--cream);
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      transition:transform .25s ease,border-color .25s ease;
    }

    .button-outline:hover{
      transform:translateY(-2px);
      border-color:var(--gold-light);
    }

    .cta-row{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:0;
    }

    @media(max-width:640px){
      .cta-row{flex-direction:column;align-items:center;gap:14px}
      .button-outline{margin-left:0}
    }

    footer{
      padding:38px clamp(18px,4vw,58px);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      border-top:1px solid rgba(227,196,135,.10);
      color:rgba(243,231,211,.40);
      font-size:10px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    @media(max-width:800px){
      .navlinks a:not(.nav-cta){display:none}
      .hero{min-height:88svh;padding-bottom:72px}
      .hero-inner,.section-inner{width:calc(100% - 36px)}
      .split{grid-template-columns:1fr;gap:42px}
      .grid{grid-template-columns:1fr}
      .card{min-height:0;padding:34px 28px}
      .card span{margin-bottom:38px}
      footer{align-items:flex-start;flex-direction:column}
    }
  
    /* Bildbereiche der persönlichen LOARU Geschichte */
    .story-image{
      position:relative;
      width:min(var(--max),calc(100% - 44px));
      margin:0 auto;
      overflow:hidden;
      border:1px solid rgba(227,196,135,.14);
      background:#090604;
    }

    .story-image.wide{
      min-height:clamp(360px,58vw,760px);
    }

    .story-image.tall{
      min-height:clamp(480px,72vw,900px);
    }

    .story-image img{
      width:100%;
      height:100%;
      min-height:inherit;
      display:block;
      object-fit:cover;
      object-position:center;
      filter:saturate(.90) contrast(1.03) brightness(.84);
    }

    .story-image:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to top,rgba(5,4,3,.66),transparent 52%);
      pointer-events:none;
    }

    .story-image-caption{
      position:absolute;
      left:clamp(22px,4vw,48px);
      right:clamp(22px,4vw,48px);
      bottom:clamp(22px,4vw,44px);
      z-index:2;
      max-width:620px;
    }

    .story-image-caption span{
      display:block;
      margin-bottom:10px;
      color:var(--gold-light);
      font-size:11px;
      letter-spacing:.20em;
      text-transform:uppercase;
    }

    .story-image-caption strong{
      color:var(--cream);
      font-family:Georgia,serif;
      font-size:clamp(30px,4.4vw,62px);
      font-weight:400;
      line-height:1.06;
    }

    .story-pair{
      width:min(var(--max),calc(100% - 44px));
      margin:0 auto;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }

    .story-pair .story-image{
      width:100%;
    }

    @media(max-width:800px){
      .story-image,
      .story-pair{
        width:calc(100% - 36px);
      }

      .story-pair{
        grid-template-columns:1fr;
      }

      .story-image.wide{
        min-height:58svh;
      }

      .story-image.tall{
        min-height:68svh;
      }

      .story-image img{
        object-position:center;
      }
    }