:root{
    --bg:#070707;
    --bg-alt:#0D0D0D;
    --bg-card:#121212;
    --line:#242420;
    --line-soft:#1B1B18;
    --white:#F4F4EF;
    --grey:#8F8F89;
    --grey-dim:#5C5C57;
    --lime:#A6FF00;
    --lime-soft:#D4FF8A;
    --lime-dim:#6E9E1E;
    --radius:2px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--white);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; margin:0; padding:0; }

  h1,h2,h3,h4{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800;
    text-transform:uppercase;
    margin:0;
    line-height:0.92;
    letter-spacing:0.005em;
  }

  .wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 28px;
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.14em;
    color:var(--lime);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:16px; height:1px;
    background:var(--lime);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:0.92rem;
    letter-spacing:0.03em;
    text-transform:uppercase;
    padding:15px 28px;
    border-radius:var(--radius);
    cursor:pointer;
    border:1px solid transparent;
    transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .btn-primary{
    background:var(--lime);
    color:#070707;
  }
  .btn-primary:hover{ background:var(--lime-soft); }
  .btn-outline{
    background:transparent;
    color:var(--white);
    border-color:#3A3A34;
  }
  .btn-outline:hover{ border-color:var(--lime); color:var(--lime); }
  .btn:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }

  /* ---------- Placeholder photo panels ---------- */
  .ph{
    position:relative;
    background-color:#050505;
    background-image:
      repeating-linear-gradient(115deg, rgba(166,255,0,0.04) 0 1px, transparent 1px 64px),
      radial-gradient(130% 150% at 18% 0%, #182319 0%, transparent 52%),
      radial-gradient(110% 130% at 100% 100%, #101a15 0%, transparent 58%),
      linear-gradient(180deg, #0a0a0a 0%, #030303 100%);
    overflow:hidden;
  }
  /* viewfinder corner marks — cinematic-photography cue for every image slot */
  .ph::before{
    content:"";
    position:absolute; top:16px; left:16px;
    width:22px; height:22px;
    border-top:1.5px solid var(--lime);
    border-left:1.5px solid var(--lime);
    opacity:0.55;
    pointer-events:none;
  }
  .ph::after{
    content:"";
    position:absolute; bottom:16px; right:16px;
    width:22px; height:22px;
    border-bottom:1.5px solid var(--lime);
    border-right:1.5px solid var(--lime);
    opacity:0.55;
    pointer-events:none;
  }
  .ph-label{
    position:absolute;
    left:16px; bottom:16px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.66rem;
    letter-spacing:0.04em;
    color:var(--grey);
    background:rgba(5,5,5,0.75);
    border:1px solid var(--line);
    padding:7px 10px 7px 8px;
    border-radius:var(--radius);
    z-index:1;
  }
  .ph-label::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 6px var(--lime);
    flex-shrink:0;
  }

  /* ---------- Real campaign photography ---------- */
  .photo{
    position:absolute;
    inset:0;
    overflow:hidden;
  }
  .photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .photo::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .hero .photo img{ object-position:68% 30%; }
  .hero .photo::after{
    background-image:
      linear-gradient(0deg, #050505 0%, rgba(5,5,5,0.92) 15%, rgba(5,5,5,0.48) 38%, rgba(5,5,5,0.06) 62%, transparent 78%),
      linear-gradient(90deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.15) 38%, transparent 56%);
  }
  .emotion .photo img{ object-position:78% 40%; }
  .emotion .photo::after{
    background-image:
      linear-gradient(90deg, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0.72) 30%, rgba(5,5,5,0.12) 56%, transparent 74%),
      linear-gradient(0deg, rgba(5,5,5,0.55) 0%, transparent 32%);
  }
  @media (max-width:700px){
    .hero .photo img{ object-position:62% 22%; }
    .hero .photo::after{
      background-image:
        linear-gradient(0deg, #050505 0%, rgba(5,5,5,0.95) 22%, rgba(5,5,5,0.4) 48%, rgba(5,5,5,0.05) 68%, transparent 82%);
    }
    .emotion .photo img{ object-position:60% 22%; }
    .emotion .photo::after{
      background-image:
        linear-gradient(0deg, rgba(5,5,5,0.97) 0%, rgba(5,5,5,0.6) 34%, rgba(5,5,5,0.1) 60%, transparent 78%);
    }
  }

  /* ---------- Nav ---------- */
  header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(7,7,7,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 28px;
    max-width:1240px;
    margin:0 auto;
  }
  .logo{
    display:inline-flex;
    align-items:center;
    line-height:0;
  }
  .logo img{
    height:34px;
    width:auto;
    display:block;
  }
  header .logo img{ height:68px; }
  footer .logo img{ height:40px; }
  @media (max-width:700px){
    header .logo img{ height:52px; }
  }
  .nav-links{
    display:flex;
    gap:34px;
  }
  .nav-links a{
    font-size:0.82rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--grey);
    transition:color 0.15s ease;
  }
  .nav-links a:hover{ color:var(--white); }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .nav-toggle{
    display:none;
    background:none; border:none; color:var(--white);
    width:40px; height:40px;
    align-items:center; justify-content:center;
    cursor:pointer;
  }
  .nav-toggle svg{ width:22px; height:22px; }

  @media (max-width:900px){
    .nav-links{
      position:absolute;
      top:100%; left:0; right:0;
      flex-direction:column;
      gap:0;
      background:#0A0A0A;
      border-bottom:1px solid var(--line-soft);
      max-height:0;
      overflow:hidden;
      transition:max-height 0.25s ease;
    }
    .nav-links.open{ max-height:340px; }
    .nav-links a{
      padding:16px 28px;
      border-top:1px solid var(--line-soft);
    }
    .nav-cta .btn-primary{ display:none; }
    .nav-toggle{ display:flex; }
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    padding-top:64px;
  }
  .hero{ background:#050505; }
  .hero-inner{
    position:relative;
    width:100%;
    padding:0 28px 72px;
    max-width:1240px;
    margin:0 auto;
  }
  .badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.08em;
    color:var(--white);
    border:1px solid var(--lime-dim);
    padding:7px 14px;
    border-radius:20px;
    margin-bottom:26px;
    opacity:0;
    animation:riseIn 0.6s ease-out 0.05s forwards;
  }
  .badge::before{
    content:"";
    width:7px; height:7px;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 8px var(--lime);
  }
  .hero h1{
    font-size:clamp(2.9rem, 7.2vw, 6.6rem);
    max-width:14ch;
    opacity:0;
    animation:riseIn 0.7s ease-out 0.15s forwards;
  }
  .hero h1 .line-lime{
    color:var(--lime);
    text-shadow:0 0 30px rgba(166,255,0,0.4), 0 0 70px rgba(166,255,0,0.15);
  }
  .hero-claim{
    margin-top:26px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.9rem;
    letter-spacing:0.16em;
    color:var(--lime-soft);
    opacity:0;
    animation:riseIn 0.7s ease-out 0.25s forwards;
  }
  .hero-sub{
    margin-top:16px;
    max-width:44ch;
    color:var(--grey);
    font-size:1.02rem;
    line-height:1.6;
    opacity:0;
    animation:riseIn 0.7s ease-out 0.32s forwards;
  }
  .hero-actions{
    margin-top:38px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    opacity:0;
    animation:riseIn 0.7s ease-out 0.4s forwards;
  }
  .hero-247{
    position:absolute;
    top:110px;
    right:28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:132px; height:132px;
    border:1px solid var(--lime-dim);
    border-radius:50%;
    box-shadow:0 0 0 1px rgba(166,255,0,0.06), 0 0 36px rgba(166,255,0,0.12);
    opacity:0;
    animation:riseIn 0.7s ease-out 0.5s forwards;
  }
  .hero-247 .big{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800;
    font-size:2rem;
    color:var(--lime);
    line-height:1;
    text-shadow:0 0 20px rgba(166,255,0,0.5);
  }
  .hero-247 .small{
    font-family:'JetBrains Mono', monospace;
    font-size:0.6rem;
    letter-spacing:0.08em;
    color:var(--grey);
    text-align:center;
    margin-top:4px;
    max-width:80px;
  }

  @keyframes riseIn{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .badge,.hero h1,.hero-claim,.hero-sub,.hero-actions,.hero-247{ animation:none; opacity:1; }
  }

  @media (max-width:700px){
    .hero{ min-height:auto; padding-bottom:40px; }
    .hero-247{ position:static; margin-bottom:26px; }
  }

  /* ---------- Section shell ---------- */
  section{ padding:116px 0; }
  .section-head{ max-width:640px; margin-bottom:52px; }
  .section-head h2{
    font-size:clamp(1.9rem, 3.6vw, 2.8rem);
    margin-top:16px;
  }
  .section-head p{
    margin-top:18px;
    color:var(--grey);
    font-size:1.02rem;
    max-width:52ch;
  }
  .alt{ background:var(--bg-alt); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }

  /* ---------- Feature grid (Was ist Baitbox24) ---------- */
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .feature-card{
    background:var(--bg-card);
    padding:30px 24px;
  }
  .feature-card svg{
    width:26px; height:26px;
    color:var(--lime);
    margin-bottom:20px;
  }
  .feature-card h3{
    font-size:1.15rem;
    letter-spacing:0.01em;
  }
  .feature-card p{
    margin-top:10px;
    font-size:0.88rem;
    color:var(--grey);
    line-height:1.55;
  }
  @media (max-width:900px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .feature-grid{ grid-template-columns:1fr; } }

  /* ---------- Sortiment ---------- */
  .cat-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .cat-card{
    position:relative;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  .cat-card:hover{
    border-color:var(--lime-dim);
    box-shadow:0 0 28px rgba(166,255,0,0.09);
    transform:translateY(-2px);
  }
  .cat-photo{
    position:relative;
    height:280px;
    overflow:hidden;
    background:#050505;
  }
  .cat-photo img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.5s ease;
  }
  .cat-card:hover .cat-photo img{ transform:scale(1.045); }
  .cat-photo::after{
    content:"";
    position:absolute; inset:0;
    background-image:linear-gradient(0deg, rgba(5,5,5,0.94) 0%, rgba(5,5,5,0.55) 32%, rgba(5,5,5,0.05) 62%, transparent 78%);
    pointer-events:none;
  }
  .cat-tag{
    position:absolute;
    left:20px; right:20px; bottom:18px;
    display:flex;
    align-items:baseline;
    gap:12px;
  }
  .cat-tag .num{
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    letter-spacing:0.05em;
    color:var(--lime);
  }
  .cat-tag h3{
    font-size:1.55rem;
    color:var(--white);
  }
  .cat-card-body{ padding:18px 22px 26px; }
  .cat-card-body p{
    font-size:0.88rem;
    color:var(--grey);
    line-height:1.55;
  }
  @media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .cat-grid{ grid-template-columns:1fr; } .cat-photo{ height:240px; } }

  /* ---------- Lebendköder status ---------- */
  .status-panel{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--bg-card);
    padding:8px;
  }
  .status-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 24px;
    border-bottom:1px solid var(--line-soft);
  }
  .status-row:last-child{ border-bottom:none; }
  .status-name{
    display:flex;
    align-items:center;
    gap:14px;
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:700;
    font-size:1.3rem;
    letter-spacing:0.01em;
  }
  .dot{
    width:9px; height:9px;
    border-radius:50%;
    border:1.5px solid var(--lime-dim);
    background:transparent;
    flex-shrink:0;
  }
  .dot.dot--live{
    border-color:var(--lime);
    background:var(--lime);
    box-shadow:0 0 10px var(--lime);
  }
  .status-value{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.08em;
    color:var(--grey);
  }
  .status-foot{
    margin-top:22px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    color:var(--grey-dim);
    letter-spacing:0.04em;
  }
  .status-foot span{ color:var(--grey); }

  /* ---------- So funktioniert's ---------- */
  .steps{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:32px;
  }
  .step .num{
    font-family:'JetBrains Mono', monospace;
    font-size:0.95rem;
    color:var(--lime);
    letter-spacing:0.05em;
  }
  .step h3{
    margin-top:14px;
    font-size:1.5rem;
  }
  .step-line{
    margin-top:16px;
    width:100%; height:1px;
    background:linear-gradient(90deg, var(--lime-dim), transparent);
  }
  @media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr; row-gap:44px; } }
  @media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

  .steps-foot{
    margin-top:56px;
    display:flex;
    gap:28px;
    flex-wrap:wrap;
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    letter-spacing:0.06em;
    color:var(--grey);
  }
  .steps-foot span{ color:var(--white); }

  /* ---------- Emotional section ---------- */
  .emotion{
    position:relative;
    min-height:88vh;
    display:flex;
    align-items:center;
  }
  .emotion{ background:#050505; }
  .emotion-inner{
    position:relative;
    max-width:640px;
    padding:0 28px;
  }
  .emotion h2{ font-size:clamp(2.2rem, 5vw, 3.6rem); }
  .emotion p{
    margin-top:22px;
    color:var(--grey);
    font-size:1.05rem;
    line-height:1.65;
    max-width:46ch;
  }
  .emotion p strong{ color:var(--white); font-weight:600; }

  /* ---------- Standort ---------- */
  .standort-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:44px;
    align-items:stretch;
  }
  .standort-map{
    min-height:380px;
    border-radius:6px;
    border:1px solid var(--line);
    overflow:hidden;
    position:relative;
    background:#050505;
    box-shadow:0 0 0 1px rgba(166,255,0,0.04);
  }
  .standort-map iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    display:block;
    filter:grayscale(0.25) invert(0.92) contrast(0.9);
  }
  .standort-info h3{ font-size:1.5rem; }
  .standort-address{
    margin-top:14px;
    color:var(--grey);
    line-height:1.7;
    font-size:0.98rem;
  }
  .standort-address .tag{
    display:inline-block;
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.05em;
    color:var(--grey-dim);
    border:1px dashed #3A3A34;
    padding:3px 8px;
    border-radius:var(--radius);
    margin-top:8px;
  }
  .standort-tags{
    margin-top:28px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .standort-tag{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.85rem;
    color:var(--grey);
    padding:10px 0;
    border-top:1px solid var(--line-soft);
  }
  .standort-tag svg{ width:16px; height:16px; color:var(--lime); flex-shrink:0; }
  .standort-info .btn-primary{ margin-top:30px; }
  @media (max-width:820px){ .standort-grid{ grid-template-columns:1fr; } .standort-map{ min-height:260px; } }

  /* ---------- Eröffnung ---------- */
  .opening{
    text-align:left;
    position:relative;
  }
  .opening h2{
    font-size:clamp(2.4rem, 7vw, 5.6rem);
    line-height:0.95;
  }
  .opening h2 .lime{ color:var(--lime); }
  .opening p{
    margin-top:24px;
    color:var(--grey);
    max-width:50ch;
    font-size:1.02rem;
    line-height:1.6;
  }
  .social-row{
    margin-top:34px;
    display:flex;
    gap:14px;
  }
  .social-btn{
    display:flex; align-items:center; gap:10px;
    border:1px solid var(--line);
    padding:12px 20px;
    border-radius:var(--radius);
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.03em;
    transition:border-color 0.15s ease, color 0.15s ease;
  }
  .social-btn svg{ width:16px; height:16px; }
  .social-btn:hover{ border-color:var(--lime); color:var(--lime); }

  /* ---------- Footer ---------- */
  footer{
    border-top:1px solid var(--line-soft);
    padding:56px 0 100px;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:40px;
  }
  .footer-brand .logo{ margin-bottom:10px; }
  .footer-brand p{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.1em;
    color:var(--grey);
  }
  .footer-brand .domain{ margin-top:6px; color:var(--grey-dim); }
  .footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
  .footer-col h4{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--grey);
  }
  .footer-col ul{ margin-top:16px; display:flex; flex-direction:column; gap:11px; }
  .footer-col a{ font-size:0.9rem; color:var(--white); }
  .footer-col a:hover{ color:var(--lime); }
  .footer-bottom{
    margin-top:56px;
    padding-top:24px;
    border-top:1px solid var(--line-soft);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.78rem;
    color:var(--grey-dim);
  }
  @media (max-width:700px){ .footer-top{ flex-direction:column; } }

  /* ---------- Mobile bottom bar ---------- */
  .mobile-bar{
    display:none;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:200;
    background:rgba(7,7,7,0.92);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line-soft);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .mobile-bar a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--lime);
    color:#070707;
    font-weight:700;
    font-size:0.9rem;
    letter-spacing:0.03em;
    text-transform:uppercase;
    padding:14px;
    border-radius:var(--radius);
  }
  @media (max-width:700px){
    .mobile-bar{ display:block; }
    body{ padding-bottom:74px; }
  }