/* Extracted from index.html; visual values intentionally preserved. */
    :root{
      --bg-0:#061321;  --bg-1:#0a1c2c;  --bg-2:#0d2234;  --bg-3:#10293f;  --bg-4:#13314a;
      --text:#e8edf2;  --muted:#a8b7c8; --brand:#ffb23f; --accent:#ff7a00; --card:#0d1f31; --ring:rgba(255,178,63,.35);
      --navH:56px;

      --contact-block-alpha:.0;
      --contact-img-alpha: 1;
      --contact-tint-alpha: var(--contact-block-alpha,0);

      --ins-img-alpha: 1;
      --ins-tint-alpha: .0;

      --hiw-card-alpha:.75;
      --card-rgb: 13 31 49;

      --hero-top-offset: clamp(120px, 26vh, 520px);
      --parallax-bleed: 14vh;

      --ins-title: #2f6db3;
    }

    @font-face{
      font-family: "Arial Nova";
      src: url("ArialNova-Light.woff2") format("woff2");
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
    .hero h1{
      font-family: "Arial Nova Light","Arial Nova","Arial","Helvetica Neue",sans-serif;
      font-weight: 300;
      letter-spacing: 0.15em;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;color-scheme:dark}
    html,body{margin:0;padding:0;background:var(--bg-0);color:var(--text);
      font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
      -webkit-text-size-adjust:100%}
    a{color:var(--brand);text-decoration:none}
    a:hover{text-decoration:underline}
    body{overscroll-behavior-y:none;overflow-x:hidden}
    img,svg{filter:none!important;mix-blend-mode:normal!important}

    header.site-nav{position:sticky;top:0;z-index:1000;backdrop-filter:saturate(140%) blur(10px);
      background:linear-gradient(180deg,rgba(6,19,33,.9),rgba(6,19,33,.5));
      border-bottom:1px solid rgba(231,232,234,.08)}
    .nav-wrap{max-width:1200px;margin:auto;display:flex;align-items:center;gap:.8rem;padding:.35rem .75rem}
    .brand-link{display:flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:.1px;color:var(--text)}
    .brand-logo{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(255,178,63,.2))!important}
    .brand-name{white-space:nowrap}
    .spacer{flex:1}
    .nav-links{display:flex;gap:.5rem;flex-wrap:wrap}
    .nav-links a{padding:.42rem .7rem;border-radius:999px;color:var(--text);border:1px solid rgba(231,232,234,.08)}
    .nav-links a:hover{background:rgba(255,255,255,.04)}
    .lang-toggle{display:flex;gap:.35rem;margin-left:.5rem}
    .flag{width:28px;height:20px;border-radius:3px;border:1px solid rgba(255,255,255,.3);
      display:inline-grid;place-items:center;background:#0b1e2f;cursor:pointer}
    .flag img{width:100%;height:100%;object-fit:cover;border-radius:2px}
    .flag.active{outline:2px solid var(--brand);box-shadow:0 0 0 4px var(--ring)}
    .burger{display:none;appearance:none;border:1px solid rgba(231,232,234,.12);background:#0b1a26;
      color:#e8edf2;border-radius:10px;padding:.45rem .6rem;cursor:pointer}
    .burger-lines{display:inline-block;width:18px;height:12px;position:relative;color:#e8edf2}
    .burger-lines::before,.burger-lines::after,.burger-lines span{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px}
    .burger-lines::before{top:0}.burger-lines span{top:5px}.burger-lines::after{bottom:0}
    .nav-panel{position:absolute;right:.75rem;top:calc(100% + 8px);background:#0b1622;border:1px solid rgba(231,232,234,.12);
      border-radius:12px;box-shadow:0 14px 60px rgba(0,0,0,.45);padding:.5rem;display:none}
    .nav-panel a{display:block;padding:.5rem .7rem;border-radius:8px;border:1px solid rgba(231,232,234,.06);margin:.25rem 0;color:var(--text)}
    .nav-panel a:hover{background:rgba(255,255,255,.05)}
    .nav-right{position:relative;display:flex;align-items:center;gap:.5rem}
    @media (max-width:860px){.nav-links{display:none}.burger{display:inline-flex;align-items:center;gap:.5rem}.nav-right.open .nav-panel{display:block}}

    #start{scroll-margin-top:0}
    .hero{
      position:relative;
      min-height:calc(100svh - var(--navH));
      height:auto;
      overflow:hidden;
    }
    .layer{
      position:absolute;
      inset: calc(var(--parallax-bleed) * -1) 0 calc(var(--parallax-bleed) * -1) 0;
      background-position:left top;
      background-repeat:no-repeat;
      background-size:cover;
      will-change:transform;
      pointer-events:none;
      z-index:0
    }
    .layer.bg{background-image:url('parallax-bg.jpg')}
    .layer.sky{background-image:url('parallax-layer1.png')}
    .layer.tower{background-image:url('parallax-layer2.png')}
    .layer.sea{background-image:url('parallax-layer3.png')}
    .layer.front{background-image:url('parallax-layer4.png')}

    @media (max-aspect-ratio: 1/1){
      .hero .layer{ background-position: 20% top; }
    }

    .hero-content{position:relative;z-index:3;max-width:1100px;margin:auto;height:auto;display:block;padding:0 2rem}
    .hero-head{padding-top:var(--hero-top-offset); text-align:center;}
    .kicker{position:relative;color:#fff;mix-blend-mode:difference;filter:grayscale(1) contrast(2500%);
      text-transform:uppercase;letter-spacing:.2em;font-size:.78rem}
    @supports not (mix-blend-mode:difference){.kicker{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.95)}}
    .logo{width:clamp(90px,12vw,140px);margin:.5rem 0;filter:drop-shadow(0 0 10px rgba(255,178,63,.15))!important}
    h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;margin:.4rem 0 .8rem}
    .lead{max-width:54ch;color:var(--muted);margin:0 auto}
    .hero-head .lead{margin-bottom:1rem}
    .cta-row{display:flex;gap:.9rem;margin-top:1.2rem;justify-content:center}
    .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:12px;background:#122535;border:1px solid rgba(231,232,234,.08);color:#e8edf2}
    .btn.primary{background:var(--accent);color:#0c0f12;border-color:transparent}
    .btn:hover{box-shadow:0 0 0 4px var(--ring)}

    section{scroll-margin-top:70px}
    .section{position:relative}
    .section-inner{max-width:1100px;margin:auto;padding:4rem 1.25rem}
    .section--b{background:var(--bg-2)} .section--c{background:var(--bg-3)} .section--d{background:var(--bg-4)}
    .section + .section{border-top:1px solid rgba(231,232,234,.12)}

    .hero-vision#how{position:relative;z-index:3;background:transparent;margin-top:2rem;}

    #contact{position:relative;background:transparent}
    #contact::before{
      content:"";position:absolute;inset:0;z-index:0;
      background:url('contact-bg.png') center/cover no-repeat;
      opacity:var(--contact-img-alpha,1);pointer-events:none;
    }
    #contact::after{
      content:"";position:absolute;inset:0;z-index:1;
      background:linear-gradient(180deg,#081724,#08131e);
      opacity:var(--contact-tint-alpha,.0);pointer-events:none;
    }
    #contact .section-inner{position:relative;z-index:2}

    .contact-info-box{
      background:linear-gradient(180deg,#081724,#0a1a28);
      border:1px solid rgba(231,232,234,.15);
      border-radius:16px;
      padding:1rem 1.25rem;
      width:100%;
      margin:.5rem auto 1rem auto;
    }
    .contact-info-box .note{margin:.2rem 0 .4rem}
    .contact-info-box .lead{margin:.2rem 0 0}

    .hiw-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:1rem}
    @media (max-width:860px){.hiw-grid{grid-template-columns:1fr}}
    .hiw-card{
      background: rgb(var(--card-rgb) / var(--hiw-card-alpha));
      border:1px solid rgba(231,232,234,.08);
      border-radius:16px;padding:1.25rem;display:grid;place-items:center;min-height:420px;
      cursor:pointer;transition:transform .2s ease
    }
    .hiw-card:hover{transform:translateY(-2px)}
    .hiw-card h3{text-align:center;margin:0 0 .25rem}
    .hiw-img{width:100%;height:220px;object-fit:contain}
    .hiw-text{display:none;text-align:center;color:var(--muted)}
    .hiw-card.open .hiw-img{display:none}
    .hiw-card.open .hiw-text{display:block}
    @media (hover:hover){
      .hiw-card:hover .hiw-img{display:none}
      .hiw-card:hover .hiw-text{display:block}
    }

    .news-grid{display:grid;grid-template-columns:1fr;gap:1rem}
    .news-card{background:var(--card);border:1px solid rgba(231,232,234,.08);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:180px 1fr;align-items:start}
    .news-card img{width:100%;height:160px;object-fit:cover;object-position:left center;background:#06121d}
    @media (max-width:700px){.news-card{grid-template-columns:140px 1fr}.news-card img{height:130px}}
    @media (max-width:480px){.news-card{grid-template-columns:1fr}.news-card img{width:100%;height:170px}}
    .news-card .pad{padding:1rem}
    .news-head{display:flex;align-items:center;gap:.5rem;margin:.5rem 0;color:var(--muted)}
    .arrow{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(231,232,234,.1);background:#0f1f2c;cursor:pointer;margin:.5rem auto}
    .arrow[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}

    dialog.modal{border:none;padding:0;background:var(--card);color:var(--text);border-radius:16px;max-width:min(980px,92vw);width:92vw}
    dialog.modal::backdrop{background:rgba(0,0,0,.6)}
    dialog.modal .content{display:grid;grid-template-columns:320px minmax(0,1fr);gap:1rem;padding:1rem;max-height:80vh;overflow:auto}
    dialog.modal .media img{display:block;width:100%;height:auto;border-radius:12px}
    @media (max-width:720px){dialog.modal .content{grid-template-columns:1fr}}
    @media (max-width:560px){dialog.modal .media img{aspect-ratio:1/1;object-fit:cover;object-position:left center}}
    dialog.modal h3{margin:.25rem 0 1rem}
    dialog.modal .prose{line-height:1.6;color:var(--muted)}

    .who-stack{display:grid;grid-template-columns:1fr;gap:1rem}
    #who .section-inner{padding:5rem 1.25rem}
    .who-card{background:var(--card);border:1px solid rgba(231,232,234,.08);border-radius:16px;padding:1.25rem}
    .who-row{display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:center}
    .who-img-square{width:120px;height:120px;object-fit:cover;border-radius:12px;background:#06121d}

    /* Desktop-wide layout for the first card */
    @media (min-width:980px){
      .who-stack > .who-card:first-child .who-row{
        grid-template-columns:minmax(280px, 420px) 1fr;
        align-items:center;
      }
      .who-stack > .who-card:first-child .who-img-square{
        width:100%; height:auto; aspect-ratio:1/1;
      }
    }

    /* === Portrait override: put images ABOVE text (all who-cards) === */
    @media (orientation: portrait){
      .who-row,
      .who-stack > .who-card:first-child .who-row{ grid-template-columns:1fr; }
      .who-img-square,
      .who-stack > .who-card:first-child .who-img-square{
        width:100%; height:auto; aspect-ratio:1/1;
      }
    }

    #who a{color:inherit;text-decoration:underline;text-underline-offset:3px}

    .map-embed{margin-top:.8rem;border-radius:12px;overflow:hidden;border:1px solid rgba(231,232,234,.08);background:#06121d;aspect-ratio:1/1;width:min(360px,100%)}
    .map-embed iframe{display:block;width:100%;height:100%;border:0}

    .contact-wrap{background:linear-gradient(180deg,#081724,#08131e);border-radius:16px;padding:1.25rem;display:block;width:100%;max-width:100%;margin:0 auto}
    .contact-wrap form{display:grid;gap:.8rem;width:min(720px,100%);margin:0 auto}
    label{display:grid;gap:.35rem}
    input,textarea{width:100%;padding:.75rem;border-radius:12px;background:#0b1a26;border:1px solid rgba(231,232,234,.12);color:var(--text)}
    textarea{min-height:120px}
    #contact .lead{margin:.25rem 0 1rem 0;max-width:54ch}

    #donate{background:#0b1a26;border:1px solid rgba(231,232,234,.18);border-radius:16px;padding:1rem 1.25rem}
    #donate h3{margin-top:.25rem}
    #donate p{margin:.5rem 0 0 0}

    .note{color:var(--muted);font-size:.95rem;margin:.4rem 0 1rem}
    .muted{color:var(--muted)}
    .center{text-align:center}
    footer{background:#07121c;color:var(--muted)}

    /* ============== INSERATE ============== */

    #inserate{ position:relative; background:transparent; }
    #inserate::before{
      content:""; position:absolute; inset:0; z-index:0;
      background:url('inserate-bg.png') center/cover no-repeat;
      opacity:var(--ins-img-alpha,1); pointer-events:none;
    }
    #inserate::after{
      content:""; position:absolute; inset:0; z-index:1;
      background:linear-gradient(180deg,#0b1c2a,#0b1622);
      opacity:var(--ins-tint-alpha,.0); pointer-events:none;
    }
    #inserate .section-inner{ position:relative; z-index:2; }

    .ins-grid{
      display:flex;
      gap:1rem;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      padding:.25rem 0 .5rem;
    }

    .ins-card{
      position:relative;
      background:linear-gradient(180deg, rgba(13,31,49,.9), rgba(13,31,49,.8));
      border:1px solid rgba(231,232,234,.09);
      border-left:6px solid var(--ins-accent, var(--brand));
      border-radius:14px;
      padding:1rem 1rem 1.1rem;
      display:flex; flex-direction:column; gap:.5rem;
      min-height: 0;
      overflow:hidden;
      min-width:560px;
      scroll-snap-align:start;
    }
    .ins-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
    .ins-title{ font-weight:700; line-height:1.3; margin:0; }
    .cat-maenner .ins-title{ color:#4ea3ff; }
    .cat-frauen  .ins-title{ color:#ff6fb0; }

    .ins-cat{
      font-size:.8rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
      padding:.28rem .5rem; border-radius:999px;
      background:rgba(255,178,63,.15); border:1px solid rgba(255,178,63,.3);
      color:var(--brand); white-space:nowrap;
    }
    .cat-maenner { --ins-accent:#4ea3ff; }
    .cat-frauen  { --ins-accent:#ff6fb0; }
    .cat-gemischt{ --ins-accent:#64dda9; }
    .cat-wohnprojekt { --ins-accent:#ffb23f; }
    .cat-familie { --ins-accent:#9d8cff; }
    .cat-mehrgeneration{ --ins-accent:#ffd36e; }
    .cat-open{ --ins-accent: var(--brand); }

    #inserate .section-inner > h2{ color: var(--ins-title); }

    .ins-kv{ display:grid; gap:.55rem; margin:.4rem 0 .3rem; }
    .ins-kv-row{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:.8rem; align-items:start; }
    .ins-kv-key{ color:var(--muted); white-space:nowrap; }

    .ins-contact-lines{ display:grid; gap:.25rem; }
    .ins-contact-lines a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; word-break:break-word; }

    .ins-actions{ margin-top:.35rem; display:flex; gap:.5rem; flex-wrap:wrap; }
    .ins-btn{ all:unset; display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .75rem; border-radius:10px; cursor:pointer;
      border:1px solid rgba(231,232,234,.12); background:#122535; }
    .ins-btn:hover{ box-shadow:0 0 0 4px var(--ring); }

    .ins-stretch{ position:absolute; inset:0; border-radius:inherit; }