/* ============================================================ CrossFit Black Forest — Relaunch Prototyp Eine einzige Datei. Alles hier drin: Farben, Layout, Skript. Zum Ändern: Farben ganz oben unter :root ============================================================ */ /* ---------- Farbwelt ---------- Standard ist DUNKEL. Der Schalter oben rechts stellt auf Hell um (setzt data-theme="light" am ) — zum Vergleichen. Bewusst kein reines Schwarz: warmes Anthrazit, damit Fotos und das Orange nicht hart auf die Fläche knallen. -------------------------------------------------------------- */ :root{ color-scheme: dark; --bg: #18181b; /* Grundfläche */ --bg-soft: #1e1e22; /* abgesetzte Sektionen */ --surface: #232327; /* Karten, Formulare */ --panel: #2b2b31; /* Kursplan-Band, Schluss-CTA */ --line: #33333b; --nav-bg: rgba(24,24,27,.82); --ink: #fafafa; --ink-soft: #cbcbd2; --muted: #90909a; --panel-ink: #ffffff; --panel-sub: #a9a9b4; /* Rot aus dem Logo — Verkehrsrot. Kein Orange, das war RESET. */ --red1: #a3161d; /* dunkles Rot */ --red2: #c4262c; /* Logo-Rot */ --red3: #e5514a; /* helles Rot */ --accent: #ef6259; /* Rot als Text auf Dunkel */ --accent-ink: #ef6259; --grad: linear-gradient(100deg, var(--red1) 0%, var(--red2) 48%, var(--red3) 100%); /* Bild-Platzhalter */ --ph1:#232327; --ph2:#2a2a2f; --ph-bg:rgba(0,0,0,.45); --ph-ink:#9a9aa4; --glow: .2; /* Stärke der Orange-Schleier */ --num-op: .34; /* Deckkraft der großen Ziffern */ --sh-card: 0 14px 40px rgba(0,0,0,.45); --sh-nav: 0 2px 20px rgba(0,0,0,.35); --nav-h: 76px; --max: 1220px; --r: 14px; } :root[data-theme="light"]{ color-scheme: light; --bg:#ffffff; --bg-soft:#f6f7f8; --surface:#ffffff; --panel:#17191c; --line:#e6e8ea; --nav-bg:rgba(255,255,255,.86); --ink:#17191c; --ink-soft:#3d4248; --muted:#6b7178; --panel-ink:#ffffff; --panel-sub:#a8aeb5; --accent:#b81d25; --accent-ink:#a3161d; --ph1:#eceef0; --ph2:#f4f5f6; --ph-bg:rgba(255,255,255,.82); --ph-ink:#9aa1a8; --glow:.13; --num-op:.22; --sh-card:0 14px 40px rgba(0,0,0,.07); --sh-nav: 0 2px 20px rgba(0,0,0,.04); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 12px); } body{ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; } /* ---------- Typo ---------- */ h1,h2,h3,h4{ line-height:1.08; letter-spacing:-0.02em; font-weight:800; } /* h1 und h2 sehen gleich aus. Die Unterseiten brauchen aus SEO-Gründen je eine H1 als oberste Überschrift — optisch soll sich dadurch nichts ändern. */ h1, h2{ font-size:clamp(30px, 4.2vw, 50px); } h3{ font-size:clamp(19px, 2vw, 23px); letter-spacing:-0.01em; } .kicker{ font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; } .lead{ font-size:clamp(16px,1.5vw,18.5px); color:var(--ink-soft); max-width:62ch; } .muted{ color:var(--muted); } .grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px; font-weight:650; font-size:15.5px; border:0; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap; } .btn .arw{ transition:transform .18s ease; } .btn:hover .arw{ transform:translateX(4px); } .btn-dark{ background:var(--ink); color:var(--bg); box-shadow:0 6px 22px rgba(23,25,28,.18); } .btn-dark:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(23,25,28,.26); } .btn-grad{ background:var(--grad); color:#fff; box-shadow:0 6px 22px rgba(196,38,44,.36); } .btn-grad:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(196,38,44,.48); } .btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); } .btn-ghost:hover{ border-color:var(--ink); } .btn-sm{ padding:11px 20px; font-size:14.5px; } .btn-lg{ padding:19px 34px; font-size:17.5px; } /* Kurs-Login: der Knopf soll auf dem Handy die volle Breite haben */ @media (max-width:600px){ .btn-lg{ width:100%; justify-content:center; } } /* ---------- Navigation ---------- */ header{ position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h); background:var(--nav-bg); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease; } header.scrolled{ border-bottom-color:var(--line); box-shadow:var(--sh-nav); } .nav{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; } .logo{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:17px; letter-spacing:-.02em; } .logo svg{ flex:none; } /* Das Original-Logo hat schwarze Schrift auf Weiß — deshalb liegt es auf einer weißen Kachel, sonst verschwindet es auf der dunklen Fläche. */ .logo-img{ height:48px; width:48px; flex:none; object-fit:cover; background:#fff; border-radius:10px; padding:2px; } .foot-logo{ height:64px; width:64px; border-radius:13px; } .logo span.sub{ font-weight:500; color:var(--muted); font-size:15px; letter-spacing:0; } .nav-links{ display:flex; align-items:center; gap:6px; margin-left:auto; } .nav-links a{ position:relative; padding:9px 15px; border-radius:8px; font-size:14.5px; font-weight:560; color:var(--ink-soft); transition:color .16s ease, background .16s ease; } .nav-links a:hover{ color:var(--ink); background:var(--bg-soft); } .nav-links a.active{ color:var(--ink); font-weight:680; } .nav-links a.active::after{ content:""; position:absolute; left:15px; right:15px; bottom:2px; height:2.5px; border-radius:2px; background:var(--grad); } .nav-cta{ margin-left:14px; } .theme-btn{ width:40px; height:40px; flex:none; margin-left:12px; border:1.5px solid var(--line); border-radius:11px; background:transparent; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .18s ease, transform .18s ease; } .theme-btn:hover{ border-color:var(--ink); transform:translateY(-1px); } /* Dunkel ist Standard → Sonne zeigen (Klick wechselt auf Hell) */ .theme-btn .sun{ display:block; } .theme-btn .moon{ display:none; } :root[data-theme="light"] .theme-btn .sun{ display:none; } :root[data-theme="light"] .theme-btn .moon{ display:block; } .burger{ display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .burger span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.25s ease; } .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger.open span:nth-child(2){ opacity:0; } .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .mobile-menu{ position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99; background:var(--bg); border-bottom:1px solid var(--line); padding:14px 28px 26px; display:none; flex-direction:column; gap:2px; box-shadow:var(--sh-card); } .mobile-menu.open{ display:flex; } .mobile-menu a{ padding:14px 4px; font-size:18px; font-weight:650; border-bottom:1px solid var(--line); } .mobile-menu .btn{ margin-top:18px; justify-content:center; } /* ---------- Bild-Platzhalter ---------- */ .ph{ position:relative; border-radius:var(--r); overflow:hidden; background: repeating-linear-gradient(135deg, var(--ph1) 0 12px, var(--ph2) 12px 24px); display:flex; align-items:center; justify-content:center; text-align:center; } .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .ph.has-img::after{ content:none; } .ph::after{ content:attr(data-label); font-size:12.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ph-ink); padding:10px 16px; background:var(--ph-bg); border-radius:999px; max-width:80%; } /* ---------- HERO ---------- */ .hero{ padding: calc(var(--nav-h) + 54px) 0 0; position:relative; overflow:hidden; } .hero::before{ content:""; position:absolute; top:-320px; right:-220px; width:820px; height:820px; background:radial-gradient(circle, rgba(196,38,44,var(--glow)) 0%, rgba(196,38,44,0) 62%); pointer-events:none; } .hero-word{ font-size:clamp(72px, 15.5vw, 220px); font-weight:900; line-height:.86; letter-spacing:.02em; margin-bottom:6px; white-space:nowrap; } .hero-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap:48px; align-items:end; } .hero-copy h1{ font-size:clamp(28px, 3.6vw, 44px); margin-bottom:18px; text-wrap:balance; } .hero-copy .lead{ margin-bottom:30px; } .hero-img{ aspect-ratio:4/3.1; align-self:end; } .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .hero-note{ font-size:13.5px; color:var(--muted); margin-top:16px; } /* Stats-Band */ .stats{ border-top:1px solid var(--line); margin-top:64px; } .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); } .stat{ padding:30px 8px 30px 0; } .stat b{ display:block; font-size:clamp(26px,3vw,36px); font-weight:850; letter-spacing:-.03em; } .stat span{ font-size:14px; color:var(--muted); } /* ---------- Sections ---------- */ section{ padding:104px 0; } .sec-soft{ background:var(--bg-soft); } .sec-head{ max-width:720px; margin-bottom:52px; } .sec-head h1, .sec-head h2{ margin-bottom:16px; } /* Feature-Karten */ .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:32px 28px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover{ transform:translateY(-4px); box-shadow:var(--sh-card); border-color:transparent; } .card h3{ margin:18px 0 10px; } .card p{ color:var(--muted); font-size:15.5px; } .ic{ width:46px; height:46px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; } /* Skills-Zeile */ .skills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:38px; } .pill{ padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); font-weight:620; font-size:14.5px; background:var(--surface); } /* Einstieg / Schritte */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s; } .step{ background:var(--surface); border-radius:var(--r); padding:34px 30px 32px; border:1px solid var(--line); position:relative; overflow:hidden; } .step::before{ counter-increment:s; content:"0" counter(s); position:absolute; top:14px; right:20px; font-size:74px; font-weight:900; letter-spacing:-.05em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; opacity:var(--num-op); } .step h3{ margin-bottom:10px; position:relative; } .step p{ color:var(--muted); font-size:15.5px; position:relative; } .step .tag{ display:inline-block; margin-bottom:14px; padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; background:rgba(196,38,44,.16); color:var(--accent-ink); } /* Kursplan-Streifen */ .band{ background:var(--panel); color:var(--panel-ink); border-radius:20px; padding:44px 46px; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; } .band h3{ font-size:clamp(22px,2.4vw,29px); margin-bottom:8px; } .band p{ color:var(--panel-sub); font-size:15.5px; max-width:52ch; } .band .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.28); } .band .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); } /* Preise */ .prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; } .price{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:36px 32px 34px; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; } .price:hover{ transform:translateY(-4px); box-shadow:var(--sh-card); } .price.hl{ border:0; box-shadow:0 18px 50px rgba(196,38,44,.28); position:relative; } .price.hl::before{ content:""; position:absolute; inset:0; border-radius:18px; padding:2px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .price .badge{ position:absolute; top:-13px; left:32px; padding:5px 15px; border-radius:999px; background:var(--grad); color:#fff; font-size:12px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; } .price .name{ font-size:14px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .price .amt{ display:flex; align-items:baseline; gap:6px; margin:14px 0 22px; } .price .amt b{ font-size:52px; font-weight:850; letter-spacing:-.04em; line-height:1; } .price .amt span{ color:var(--muted); font-size:15px; font-weight:560; } .price ul{ list-style:none; display:flex; flex-direction:column; gap:13px; margin-bottom:28px; } .price li{ display:flex; gap:11px; font-size:15.5px; color:var(--ink-soft); align-items:flex-start; } .price li svg{ flex:none; margin-top:4px; stroke:var(--accent); } .price .btn{ margin-top:auto; justify-content:center; } .price-note{ margin-top:26px; font-size:14.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 26px; } .price-note b{ color:var(--ink-soft); font-weight:650; } /* Team */ .team{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .coach .ph{ aspect-ratio:1/1.14; margin-bottom:14px; } .coach h4{ font-size:17px; font-weight:750; margin-bottom:3px; } .coach .role{ font-size:13.5px; color:var(--accent); font-weight:650; margin-bottom:7px; } .coach p{ font-size:14px; color:var(--muted); line-height:1.5; } /* Box / Split */ .split{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; } .split .ph{ aspect-ratio:4/3.3; } .gal{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; } .gal .ph:first-child{ grid-row:span 2; aspect-ratio:auto; } .gal .ph{ aspect-ratio:4/3; } .checks{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:28px; } .checks li{ display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink-soft); } .checks svg{ flex:none; margin-top:4px; stroke:var(--accent); } /* Kontakt */ .contact{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start; } .info-list{ list-style:none; display:flex; flex-direction:column; gap:24px; margin:32px 0 34px; } .info-list li{ display:flex; gap:16px; align-items:flex-start; } .info-list .ic{ width:42px; height:42px; border-radius:11px; } .info-list b{ display:block; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:3px; } .info-list a, .info-list span{ font-size:16.5px; font-weight:600; } .info-list a:hover{ color:var(--accent); } /* Anfahrt statt eingebetteter Karte — lädt nichts von Google nach */ .route{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 26px 24px; } .route b{ display:block; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:8px; } .route p{ font-size:16px; color:var(--ink-soft); line-height:1.55; margin-bottom:18px; } .route .hint{ font-size:13px; color:var(--muted); margin:12px 0 0; } form{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px 32px; } .field{ margin-bottom:18px; } label{ display:block; font-size:13.5px; font-weight:680; margin-bottom:7px; } input, select, textarea{ width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:10px; font:inherit; font-size:15.5px; background:var(--bg); color:var(--ink); transition:border-color .16s ease, box-shadow .16s ease; } input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--red2); box-shadow:0 0 0 4px rgba(196,38,44,.18); } textarea{ resize:vertical; min-height:110px; } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } form .btn{ width:100%; justify-content:center; margin-top:6px; } .form-hint{ font-size:13px; color:var(--muted); margin-top:14px; text-align:center; } .form-ok, .form-err{ display:none; margin-top:16px; padding:14px 16px; border-radius:10px; background:rgba(196,38,44,.14); color:var(--accent); font-size:15px; font-weight:600; } .form-err a{ color:inherit; text-decoration:underline; } /* Einwilligung Datenschutz */ .consent label{ display:flex; gap:11px; align-items:flex-start; font-weight:500; font-size:14px; line-height:1.5; color:var(--ink-soft); } .consent input{ width:auto; flex:none; margin-top:2px; accent-color:var(--accent); } .consent a{ color:var(--accent); text-decoration:underline; } /* Honigtopf gegen Spam-Bots — für Menschen unsichtbar, für Bots ein normales Feld */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Nur für Screenreader — sichtbar ist die Zelle leer */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- Kursplan ---------- */ .plan-wrap{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); } table.plan{ width:100%; border-collapse:collapse; table-layout:fixed; } .plan col.uhr{ width:15%; } .plan th, .plan td{ padding:9px 6px; text-align:center; } .plan thead th{ background:var(--accent); color:#fff; padding:13px 6px; font-size:12.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; } .plan tbody th{ font-size:14px; font-weight:700; color:var(--muted); white-space:nowrap; text-align:left; padding-left:16px; } .plan tbody tr + tr th, .plan tbody tr + tr td{ border-top:1px solid var(--line); } .plan th + td, .plan td + td{ border-left:1px solid var(--line); } /* Jeder Kurs ist ein Feld — alle sehen gleich aus, egal welches Format */ .plan .k{ display:block; padding:9px 4px; border-radius:9px; background:rgba(196,38,44,.12); border:1px solid rgba(196,38,44,.28); color:var(--ink); font-size:14px; font-weight:650; line-height:1.25; } .plan .kurz{ display:none; } .plan-legende{ display:none; margin-top:14px; font-size:13px; color:var(--muted); line-height:1.7; } /* Auf dem Handy kurze Kürzel statt ganzer Wörter — so passt die ganze Woche auf den Bildschirm, ohne schieben oder zoomen. Legende darunter. */ @media (max-width:760px){ .plan col.uhr{ width:17%; } .plan th, .plan td{ padding:6px 3px; } .plan thead th{ font-size:11px; letter-spacing:.02em; padding:11px 3px; } .plan tbody th{ font-size:12.5px; padding-left:8px; } .plan .k{ padding:8px 2px; font-size:11.5px; border-radius:7px; } .plan .lang{ display:none; } .plan .kurz{ display:inline; } .plan-legende{ display:block; } } /* Rechtstexte (Impressum, Datenschutz) */ .legal{ max-width:760px; } .legal h3{ font-size:21px; margin:38px 0 12px; } .legal h4{ font-size:16px; margin:26px 0 8px; color:var(--ink); } .legal p, .legal li{ font-size:16px; line-height:1.7; color:var(--ink-soft); } .legal p{ margin-bottom:14px; } .legal ul{ margin:0 0 14px 20px; } .legal li{ margin-bottom:7px; } .legal a{ color:var(--accent); text-decoration:underline; } .legal .adr{ font-style:normal; margin-bottom:14px; line-height:1.7; } .legal .stand{ font-size:13.5px; color:var(--muted); margin-top:40px; } /* CTA Schlussband */ .final{ padding:0 0 104px; } .final-inner{ background:var(--panel); border-radius:24px; padding:74px 56px; text-align:center; position:relative; overflow:hidden; } .final-inner::before{ content:""; position:absolute; bottom:-260px; left:50%; transform:translateX(-50%); width:900px; height:520px; background:radial-gradient(ellipse, rgba(196,38,44,.5) 0%, rgba(196,38,44,0) 68%); } .final-inner > *{ position:relative; } .final h2{ color:var(--panel-ink); margin-bottom:16px; } .final p{ color:var(--panel-sub); font-size:17px; max-width:54ch; margin:0 auto 32px; } /* Footer */ footer{ border-top:1px solid var(--line); padding:52px 0 40px; } .foot{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:center; } .foot-links{ display:flex; gap:26px; flex-wrap:wrap; font-size:14.5px; color:var(--muted); } .foot-links a:hover{ color:var(--ink); } .socials{ display:flex; gap:10px; } .socials a{ width:40px; height:40px; border-radius:11px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:.18s ease; } .socials a:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-2px); } .copy{ font-size:13.5px; color:var(--muted); margin-top:26px; } /* Einblend-Animation */ .rv{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; } .rv.in{ opacity:1; transform:none; } /* ---------- Responsive ---------- */ /* Die Menüleiste hat acht Punkte — auf schmaleren Bildschirmen enger setzen und notfalls den Probetraining-Knopf ausblenden, damit nichts umbricht. Der Knopf steht im Hero und im Handy-Menü ohnehin nochmal. */ @media (max-width:1280px){ .nav-links{ gap:2px; } .nav-links a{ padding:9px 9px; font-size:13.5px; } .nav-links a.active::after{ left:9px; right:9px; } } @media (max-width:1150px){ .nav-cta{ display:none; } } @media (max-width:1080px){ .team{ grid-template-columns:repeat(3,1fr); } .hero-grid{ gap:34px; } } @media (max-width:900px){ .nav-links, .nav-cta{ display:none; } .burger{ display:flex; } .hero-grid{ grid-template-columns:1fr; } .hero-word{ font-size:clamp(58px,17vw,120px); } .hero-img{ aspect-ratio:16/10; } .cards, .steps, .prices{ grid-template-columns:1fr; } .split, .contact{ grid-template-columns:1fr; gap:38px; } .stats-grid{ grid-template-columns:1fr 1fr; } section{ padding:76px 0; } .final-inner{ padding:56px 26px; } .band{ padding:34px 30px; } } @media (max-width:560px){ .wrap{ padding:0 20px; } .team{ grid-template-columns:1fr 1fr; } .row2{ grid-template-columns:1fr; } .price .amt b{ font-size:44px; } form{ padding:26px 22px; } }