:root {
        --bg: #0d0e10;
        --bg-elev: #14161a;
        --bg-deep: #08090b;
        --bg-soft: #1a1c20;
        --line: rgba(255, 255, 255, 0.07);
        --line-strong: rgba(255, 255, 255, 0.14);
        --ink: #f4ece3;
        --ink-mute: #a8a39b;
        --ink-dim: #6f6c66;
        --accent: #c9601f;
        --accent-2: #e89348;
        --accent-soft: rgba(201, 96, 31, 0.22);
      }
      * {
        box-sizing: border-box;
      }
      html {
        color-scheme: dark;
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family:
          'Inter',
          system-ui,
          -apple-system,
          sans-serif;
        font-weight: 300;
        font-size: 16px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
        max-width: 100%;
      }
      img {
        display: block;
        max-width: 100%;
        height: auto;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 32px;
      }
      .topbar {
        position: sticky;
        top: 0;
        z-index: 60;
        background: rgba(13, 14, 16, 0.82);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line);
      }
      .topbar-inner {
        max-width: 1320px;
        margin: 0 auto;
        padding: 16px 32px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 24px;
        align-items: center;
      }
      .wostok-logo {
        display: inline-flex;
        align-items: center;
        line-height: 0;
      }
      .wostok-logo img {
        height: 30px;
        width: auto;
      }
      .topbar-tag {
        text-align: center;
        font-size: 11px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--ink-dim);
      }
      .partners-strip {
        display: flex;
        align-items: center;
        gap: 14px;
        justify-content: flex-end;
      }
      .partners-strip img {
        height: 22px;
        width: auto;
        opacity: 0.78;
      }
      .ps-sep {
        width: 1px;
        height: 16px;
        background: var(--line-strong);
        margin: 0 4px;
      }
      .hero {
        position: relative;
        padding: 120px 0 140px;
        overflow: hidden;
        background:
          radial-gradient(60% 50% at 18% 22%, rgba(201, 96, 31, 0.16), transparent 65%),
          radial-gradient(45% 45% at 88% 18%, rgba(232, 147, 72, 0.1), transparent 65%),
          radial-gradient(50% 50% at 12% 88%, rgba(126, 36, 71, 0.14), transparent 70%);
      }
      .hero-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 80px;
        align-items: center;
      }
      .eyebrow {
        font-size: 11px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--ink-dim);
        margin-bottom: 28px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .eyebrow .pip {
        width: 22px;
        height: 1px;
        background: var(--accent);
      }
      .hero h1 {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: clamp(44px, 6vw, 86px);
        line-height: 1.02;
        letter-spacing: -0.025em;
        margin: 0 0 32px;
        color: var(--ink);
      }
      .hero h1 .accent {
        font-style: italic;
        background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 60%, #f0c891 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 700;
      }
      .hero h1 .thin {
        font-weight: 400;
        font-style: italic;
      }
      .hero-sub {
        font-size: 18px;
        line-height: 1.65;
        color: var(--ink-mute);
        max-width: 60ch;
        margin: 0 0 40px;
      }
      .cta-row {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 48px;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 15px 28px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        border: 1px solid transparent;
        cursor: pointer;
        transition:
          transform 280ms ease,
          box-shadow 280ms ease,
          background 280ms ease,
          border-color 280ms ease;
      }
      .btn-primary {
        background: var(--accent);
        color: #0d0e10;
        box-shadow: 0 12px 36px -10px var(--accent-soft);
      }
      .btn-primary:hover {
        transform: translateY(-2px);
        background: var(--accent-2);
      }
      .btn-ghost {
        background: transparent;
        color: var(--ink);
        border: 1px solid var(--line-strong);
      }
      .btn-ghost:hover {
        border-color: var(--ink-mute);
        background: rgba(255, 255, 255, 0.03);
      }
      .hero-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.03);
        font-size: 13px;
        color: var(--ink-mute);
      }
      .chip-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
      }
      .hero-anchor-wrap {
        position: relative;
        height: 580px;
      }
      .hero-room {
        position: absolute;
        inset: 0;
        border-radius: 22px;
        overflow: hidden;
        box-shadow:
          0 50px 100px -30px rgba(0, 0, 0, 0.7),
          0 0 0 1px rgba(255, 255, 255, 0.06);
        z-index: 1;
      }
      .hero-room img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .hero-room::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 30%, rgba(13, 14, 16, 0.82) 100%);
        pointer-events: none;
      }
      .hero-anchor {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        padding: 16px 28px;
        background: rgba(13, 14, 16, 0.55);
        border-radius: 14px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.7);
      }
      .hero-anchor img {
        height: 56px;
        width: auto;
      }
      .hero-room-caption {
        position: absolute;
        bottom: 22px;
        left: 22px;
        z-index: 2;
        padding: 12px 18px;
        border-left: 2px solid var(--accent);
        background: rgba(13, 14, 16, 0.7);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      .hero-room-caption b {
        display: block;
        color: var(--ink);
        font-family: 'Fraunces', serif;
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 2px;
      }
      .hero-room-caption span {
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink-mute);
      }
      .hero-tag {
        position: absolute;
        top: 22px;
        right: 22px;
        z-index: 3;
        padding: 8px 16px;
        border-radius: 999px;
        background: rgba(13, 14, 16, 0.72);
        border: 1px solid var(--line);
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--accent-2);
      }
      section {
        padding: 110px 0;
        border-top: 1px solid var(--line);
        position: relative;
      }
      .section-label {
        font-size: 11px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--ink-dim);
        margin-bottom: 16px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
      }
      .section-label::before {
        content: '';
        width: 28px;
        height: 1px;
        background: var(--accent);
      }
      .section-title {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: clamp(30px, 3.6vw, 52px);
        line-height: 1.08;
        letter-spacing: -0.02em;
        margin: 0 0 22px;
        color: var(--ink);
      }
      .section-lead {
        font-size: 17px;
        line-height: 1.6;
        color: var(--ink-mute);
        max-width: 66ch;
        margin: 0 0 56px;
      }
      .intro-grid {
        display: grid;
        grid-template-columns: 1.45fr 1fr;
        gap: 48px;
        align-items: start;
      }
      .intro-cols {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .intro-col {
        padding: 28px 24px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%);
      }
      .intro-col .ord {
        font-family: 'Fraunces', serif;
        font-style: italic;
        font-size: 13px;
        color: var(--accent);
        margin-bottom: 8px;
        display: block;
      }
      .intro-col h3 {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: 20px;
        margin: 0 0 12px;
        line-height: 1.25;
        color: var(--ink);
      }
      .intro-col p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: var(--ink-mute);
      }
      .brands-strip {
        padding: 28px 26px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--bg-elev);
      }
      .brands-strip h4 {
        font-size: 12px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ink-dim);
        margin: 0 0 18px;
        font-weight: 600;
      }
      .brand-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
      }
      .brand-item:last-child {
        border-bottom: none;
      }
      .brand-item img {
        height: 32px;
        width: auto;
        opacity: 0.9;
      }
      .brand-item p {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--ink-mute);
      }
      .brand-item p b {
        color: var(--ink);
        font-weight: 500;
      }
      .umgebung-section {
        background: var(--bg-deep);
      }
      .umgebung-feature {
        position: relative;
        height: 480px;
        border-radius: 22px;
        overflow: hidden;
        margin-bottom: 24px;
      }
      .umgebung-feature img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .umgebung-feature::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 40%, rgba(8, 9, 11, 0.85) 100%);
        pointer-events: none;
      }
      .umgebung-feature .caption {
        position: absolute;
        bottom: 28px;
        left: 28px;
        right: 28px;
        z-index: 2;
        color: var(--ink);
      }
      .umgebung-feature .caption b {
        display: block;
        font-family: 'Fraunces', serif;
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 8px;
      }
      .umgebung-feature .caption p {
        margin: 0;
        font-size: 14.5px;
        color: var(--ink-mute);
        max-width: 60ch;
      }
      .umgebung-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 18px;
        margin-bottom: 32px;
      }
      .umgebung-thumb {
        height: 280px;
        border-radius: 22px;
        overflow: hidden;
        position: relative;
      }
      .umgebung-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .umgebung-thumb::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 50%, rgba(8, 9, 11, 0.75) 100%);
        pointer-events: none;
      }
      .umgebung-thumb .tag {
        position: absolute;
        bottom: 18px;
        left: 18px;
        z-index: 2;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink);
        padding: 8px 14px;
        background: rgba(13, 14, 16, 0.65);
        backdrop-filter: blur(8px);
        border-left: 2px solid var(--accent);
      }
      .umgebung-textcard {
        padding: 28px 24px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--bg-elev);
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .umgebung-textcard b {
        display: block;
        font-family: 'Fraunces', serif;
        font-size: 20px;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 8px;
      }
      .umgebung-textcard p {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--ink-mute);
      }
      .umgebung-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 28px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--bg-elev);
        gap: 24px;
      }
      .umgebung-meta p {
        margin: 0;
        font-size: 14px;
        color: var(--ink-mute);
        max-width: 60ch;
        line-height: 1.6;
      }
      .umgebung-meta .location {
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ink-dim);
        text-align: right;
      }
      .cards-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }
      .card {
        padding: 30px 26px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%);
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition:
          transform 320ms ease,
          border-color 320ms ease;
      }
      .card:hover {
        transform: translateY(-6px);
        border-color: rgba(201, 96, 31, 0.45);
      }
      .card .ord {
        font-family: 'Fraunces', serif;
        font-style: italic;
        color: var(--accent);
        font-size: 14px;
      }
      .card h3 {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 1.25;
        margin: 0;
        color: var(--ink);
      }
      .card p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: var(--ink-mute);
      }
      .target-note {
        margin-top: 28px;
        font-size: 13.5px;
        font-style: italic;
        color: var(--ink-dim);
      }
      .sorten-section {
        background: var(--bg-deep);
        border-top: none;
        padding-top: 0;
      }
      .produkt-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
        margin-bottom: 22px;
      }
      .produkt-row-2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        max-width: 75%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 38px;
      }
      .produkt-card {
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--bg-elev);
        overflow: hidden;
        transition:
          transform 320ms ease,
          border-color 320ms ease;
      }
      .produkt-card:hover {
        transform: translateY(-6px);
        border-color: rgba(201, 96, 31, 0.35);
      }
      .produkt-img {
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: radial-gradient(50% 40% at 50% 30%, rgba(201, 96, 31, 0.16), transparent 70%), var(--bg-deep);
      }
      .produkt-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 380ms ease;
      }
      .produkt-card:hover .produkt-img img {
        transform: scale(1.04);
      }
      .produkt-meta {
        padding: 22px 24px 26px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .produkt-meta .tag {
        font-size: 10px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 600;
      }
      .produkt-meta h3 {
        font-family: 'Fraunces', serif;
        font-style: italic;
        font-weight: 600;
        font-size: 22px;
        margin: 0;
        color: var(--ink);
        line-height: 1.2;
      }
      .produkt-meta p {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--ink-mute);
      }
      .sorten-note {
        padding: 20px 24px;
        border-left: 2px solid var(--accent);
        background: linear-gradient(90deg, rgba(201, 96, 31, 0.06) 0%, transparent 100%);
        border-radius: 0 12px 12px 0;
        color: var(--ink-mute);
        font-size: 14.5px;
        line-height: 1.6;
        max-width: 80ch;
        font-style: italic;
      }
      .placement-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }
      .plac {
        padding: 28px 24px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--bg-elev);
        transition:
          transform 320ms ease,
          border-color 320ms ease;
      }
      .plac:hover {
        transform: translateY(-4px);
        border-color: rgba(201, 96, 31, 0.4);
      }
      .plac .ord {
        font-family: 'Fraunces', serif;
        font-style: italic;
        color: var(--accent);
        font-size: 13px;
        display: block;
        margin-bottom: 6px;
      }
      .plac h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 10px;
        color: var(--ink);
      }
      .plac p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: var(--ink-mute);
      }
      #bluejays {
        background: radial-gradient(60% 50% at 90% 20%, rgba(126, 36, 71, 0.18), transparent 70%), var(--bg-elev);
      }
      .bj-top {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 48px;
        align-items: end;
        margin-bottom: 56px;
      }
      .bj-mark {
        height: 40px;
      }
      .bj-mark img {
        height: 100%;
        width: auto;
        opacity: 0.9;
      }
      .bj-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 28px;
      }
      .bj-card {
        padding: 26px 22px;
        border: 1px solid var(--line-strong);
        border-radius: 16px;
        background: rgba(12, 13, 16, 0.55);
      }
      .bj-card .ord {
        font-family: 'Fraunces', serif;
        font-style: italic;
        color: var(--accent);
        font-size: 13px;
        display: block;
        margin-bottom: 8px;
      }
      .bj-card h4 {
        margin: 0 0 6px;
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: 19px;
        color: var(--ink);
      }
      .bj-card p {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--ink-mute);
      }
      .bj-socials {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 22px;
        padding: 22px 26px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--bg-elev);
        font-size: 12px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ink-dim);
      }
      .bj-socials b {
        color: var(--ink-mute);
        font-weight: 500;
        margin-right: 6px;
      }
      .kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        margin-bottom: 18px;
      }
      .kpi-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-bottom: 28px;
      }
      .kpi {
        padding: 32px 26px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--bg-elev);
        display: flex;
        flex-direction: column;
        gap: 8px;
        transition: border-color 320ms ease;
      }
      .kpi:hover {
        border-color: rgba(201, 96, 31, 0.4);
      }
      .kpi .val {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: clamp(36px, 4vw, 52px);
        color: var(--accent-2);
        line-height: 1;
      }
      .kpi .lab {
        font-size: 12px;
        letter-spacing: 0.06em;
        color: var(--ink-mute);
      }
      .kpi-disclaimer {
        padding: 20px 24px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.02);
        color: var(--ink-mute);
        font-size: 13.5px;
        line-height: 1.6;
        font-style: italic;
      }
      #cta {
        padding-bottom: 140px;
      }
      .cta-card {
        position: relative;
        padding: 64px 56px;
        border: 1px solid var(--line-strong);
        border-radius: 28px;
        background:
          radial-gradient(55% 55% at 100% 0%, rgba(201, 96, 31, 0.2), transparent 65%),
          radial-gradient(40% 40% at 0% 100%, rgba(126, 36, 71, 0.16), transparent 65%), var(--bg-elev);
        display: grid;
        grid-template-columns: 1.2fr 0.95fr;
        gap: 56px;
        align-items: center;
        overflow: hidden;
      }
      .cta-card h2 {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: clamp(32px, 3.6vw, 50px);
        margin: 0 0 22px;
        letter-spacing: -0.02em;
        color: var(--ink);
        line-height: 1.08;
      }
      .cta-card h2 em {
        font-style: italic;
        color: var(--accent-2);
      }
      .cta-card p {
        margin: 0 0 28px;
        color: var(--ink-mute);
        font-size: 16.5px;
        line-height: 1.6;
        max-width: 50ch;
      }
      .cta-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
      }
      .contact {
        padding: 32px 30px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: rgba(8, 9, 11, 0.55);
      }
      .contact .name {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: 22px;
        color: var(--ink);
        margin: 0 0 4px;
      }
      .contact .role {
        font-size: 12px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ink-dim);
        margin: 0 0 22px;
      }
      .contact a {
        display: block;
        font-size: 15.5px;
        color: var(--ink);
        margin-bottom: 8px;
        transition: color 220ms ease;
      }
      .contact a:hover {
        color: var(--accent-2);
      }
      .contact a:last-child {
        margin-bottom: 0;
      }
      .contact .label {
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink-dim);
        margin-right: 10px;
      }
      footer {
        padding: 64px 0 56px;
        border-top: 1px solid var(--line);
        background: var(--bg-soft);
      }
      .foot-grid {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 32px;
      }
      .foot-wm {
        display: flex;
        align-items: center;
        gap: 22px;
        flex-wrap: wrap;
      }
      .foot-wm .wostok-logo-foot {
        display: inline-flex;
        align-items: center;
        line-height: 0;
      }
      .foot-wm .wostok-logo-foot img {
        height: 22px;
        width: auto;
      }
      .foot-wm img {
        height: 22px;
        width: auto;
        opacity: 0.7;
      }
      .foot-wm .sep {
        color: var(--line-strong);
        margin: 0 2px;
      }
      .foot-meta {
        font-size: 12px;
        color: var(--ink-dim);
        line-height: 1.7;
        text-align: right;
        max-width: 60ch;
      }
      @media (max-width: 1180px) {
        .hero-grid {
          grid-template-columns: 1fr;
          gap: 56px;
        }
        .hero-anchor-wrap {
          height: 460px;
          max-width: 520px;
          margin: 0 auto;
          width: 100%;
        }
        .cards-grid,
        .placement-grid,
        .bj-grid,
        .intro-cols {
          grid-template-columns: repeat(2, 1fr);
        }
        .produkt-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .produkt-row-2 {
          grid-template-columns: repeat(3, 1fr);
          max-width: 100%;
        }
        .kpi-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .intro-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .umgebung-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .umgebung-feature {
          height: 380px;
        }
        .bj-top {
          grid-template-columns: 1fr;
          gap: 24px;
        }
        .cta-card {
          grid-template-columns: 1fr;
          padding: 48px 32px;
          gap: 32px;
        }
      }
      @media (max-width: 760px) {
        .container {
          padding: 0 20px;
        }
        .topbar-inner {
          padding: 14px 20px;
          grid-template-columns: auto 1fr;
          row-gap: 12px;
        }
        .topbar-tag {
          grid-column: 1 / -1;
          text-align: left;
          font-size: 10px;
        }
        .partners-strip {
          gap: 10px;
        }
        .partners-strip img {
          height: 18px;
        }
        section {
          padding: 72px 0;
        }
        .hero {
          padding: 72px 0 80px;
        }
        .hero h1 {
          font-size: clamp(34px, 9vw, 50px);
        }
        .hero-anchor-wrap {
          height: 380px;
        }
        .cards-grid,
        .placement-grid,
        .bj-grid,
        .intro-cols,
        .produkt-grid,
        .produkt-row-2,
        .umgebung-grid {
          grid-template-columns: 1fr;
        }
        .kpi-grid,
        .kpi-grid-2 {
          grid-template-columns: 1fr;
        }
        .cta-card {
          padding: 36px 22px;
        }
        .foot-grid {
          grid-template-columns: 1fr;
        }
        .foot-meta {
          text-align: left;
        }
      }