/* =========================================================== Anthony Teltschik — Dacharbeiten · Holzbau · Schieferdeckung Design system: copper standing-seam roofing as visual language =========================================================== */ /* Schriften werden per im jeder Seite geladen. Kein @import hier: das erzeugt eine Request-Kette (HTML → style.css → Google-CSS → Font-Dateien) und verzögert den Textrender messbar. */ :root{ /* --- Color tokens --- */ --charcoal: #17191b; --charcoal-2: #1f2225; --slate: #262a2e; --slate-line: #383d42; --copper: #b5652f; --copper-bright: #dd8f4e; --copper-dim: #7a4522; --patina: #5c8577; --paper: #f5efe3; --paper-dim: #cfc7b6; --ink: #17150f; /* --- Type --- */ --f-display: 'Playfair Display', Georgia, serif; --f-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --container: 1180px; --radius: 10px; --radius-lg: 18px; --shadow: 0 22px 70px rgba(0,0,0,.28); } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body{ margin:0; max-width: 100%; background: var(--charcoal); color: var(--paper); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; background-image: radial-gradient(circle at 12% 12%, rgba(181,101,47,.08), transparent 24rem), radial-gradient(circle at 92% 42%, rgba(92,133,119,.05), transparent 28rem); } body.nav-open{ overflow:hidden; } .gallery-grid figure[hidden]{ display:none; } img{ max-width:100%; display:block; height:auto; } a{ color: inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ font-family: var(--f-display); font-weight: 600; margin: 0 0 .5em; line-height: 1.12; letter-spacing: -0.01em; } p{ margin: 0 0 1em; color: var(--paper-dim); } :focus-visible{ outline: 2px solid var(--copper-bright); outline-offset: 3px; } .container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } .eyebrow{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper-bright); display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1em; } .eyebrow::before{ content:''; width: 22px; height: 1px; background: var(--copper-bright); display:inline-block; } h1{ font-size: clamp(2.4rem, 6vw, 4.6rem); color: var(--paper); } h2{ font-size: clamp(1.8rem, 4vw, 2.7rem); color: var(--paper); } h3{ font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--paper); } .lede{ font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--paper-dim); max-width: 46ch; } /* ---------- Seam divider — the signature motif ---------- */ .seam{ height: 34px; width: 100%; position: relative; background: repeating-linear-gradient( 90deg, var(--copper-dim) 0px, var(--copper-dim) 2px, transparent 2px, transparent 46px ); opacity: 0.55; overflow: hidden; } .seam::after{ content:''; position:absolute; inset:0; background: linear-gradient(100deg, transparent 30%, rgba(221,143,78,0.5) 48%, transparent 66%); background-size: 220% 100%; animation: seam-sheen 7s ease-in-out infinite; } @keyframes seam-sheen{ 0%{ background-position: 140% 0; } 50%{ background-position: -40% 0; } 100%{ background-position: -40% 0; } } /* ---------- Buttons ---------- */ .btn{ display: inline-flex; align-items: center; gap: .6em; font-family: var(--f-body); font-weight: 600; font-size: 0.98rem; padding: 0.95em 1.7em; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; min-height: 48px; white-space: nowrap; } .btn-copper{ background: var(--copper); color: #1a1108; } .btn-copper:hover{ background: var(--copper-bright); transform: translateY(-2px); } .btn-ghost{ background: transparent; border-color: var(--slate-line); color: var(--paper); } .btn-ghost:hover{ border-color: var(--copper-bright); color: var(--copper-bright); transform: translateY(-2px); } .btn svg{ width:18px; height:18px; flex-shrink:0; } @media (hover:none){ .btn:hover{ transform:none; } } /* ---------- Header / Nav ---------- */ .site-header{ position: sticky; top:0; z-index: 100; background: rgba(23,25,27,0.86); backdrop-filter: blur(16px); border-bottom: 1px solid var(--slate-line); } .nav-row{ display:flex; align-items:center; justify-content:space-between; height: 76px; } .brand{ font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; color: var(--paper); line-height: 1.2; display:flex; align-items:center; gap: 12px; } .brand img{ height: 52px; width: auto; display:block; } .brand-text{ display:flex; flex-direction:column; } .brand small{ font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--copper-bright); text-transform: uppercase; font-weight:500; margin-top:3px; } .footer-col .brand{ margin-bottom: 14px; } .footer-col .brand img{ height: 60px; } @media (max-width: 480px){ .brand img{ height: 42px; } } .nav-links{ display:flex; align-items:center; gap: clamp(16px,3vw,36px); } .nav-links a{ font-size: .95rem; font-weight: 500; color: var(--paper-dim); position: relative; padding: 6px 2px; } .nav-legal{ display:none; } .nav-links a:hover, .nav-links a.active{ color: var(--paper); } .nav-links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--copper); } .nav-cta{ display:flex; align-items:center; gap:12px; } .nav-cta .btn{ padding: 0.7em 1.3em; font-size:.9rem; } .nav-toggle{ display:none; background:none; border:none; color: var(--paper); width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; position:relative; z-index:2; } .nav-toggle svg{ width:24px; height:24px; } .nav-toggle line{ transform-box:fill-box; transform-origin:center; transition:transform .2s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] line:nth-child(1){ transform:translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] line:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] line:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } @media (max-width: 860px){ .nav-row{ height:68px; } .brand{ position:relative; z-index:2; } .nav-links{ position:absolute; z-index:1; top:100%; left:0; right:0; height:calc(100vh - 68px); height:calc(100dvh - 68px); background: linear-gradient(145deg, rgba(181,101,47,.12), transparent 36%), var(--charcoal); flex-direction: column; align-items: flex-start; padding: 42px clamp(20px,8vw,64px) max(32px, env(safe-area-inset-bottom)); gap: 6px; opacity:0; visibility:hidden; pointer-events:none; transform: translateX(100%); transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .18s ease, visibility 0s linear .28s; overflow-y:auto; overscroll-behavior:contain; } .nav-links::before{ content:'Navigation'; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--copper-bright); margin-bottom:12px; } .nav-links a{ width:100%; font-family:var(--f-display); font-size:clamp(1.55rem,6vw,2.15rem); padding:10px 0; border-bottom:1px solid rgba(245,239,227,.09); } .nav-links a.active::after{ left:auto; width:42px; top:50%; bottom:auto; } .nav-links .nav-legal{ display:block; font-family:var(--f-body); font-size:.95rem; color:var(--paper-dim); border:0; padding:7px 0; } .nav-links a:not(.nav-legal) + .nav-legal{ margin-top:20px; padding-top:20px; border-top:1px solid var(--slate-line); } .nav-links.open{ opacity:1; visibility:visible; pointer-events:auto; transform: translateX(0); transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .18s ease; transition-delay:0s; } .nav-cta .btn-ghost{ display:none; } .nav-cta .btn-copper{ padding:.65em 1em; min-height:42px; } .nav-toggle{ display:flex; } .brand img{ height:44px; } } /* ---------- Hero ---------- */ .hero{ position: relative; min-height: min(92vh, 880px); display:flex; align-items:flex-end; overflow:hidden; } .hero-media{ position:absolute; inset:0; z-index:0; } .hero-media img{ width:100%; height:100%; object-fit:cover; object-position: center 60%; transform: scale(1.04); } .hero-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(17,18,19,0.35) 0%, rgba(17,18,19,0.55) 45%, rgba(17,18,19,0.97) 92%); } .hero-content{ position:relative; z-index:2; padding: clamp(90px,16vw,160px) 0 clamp(56px,8vw,86px); width:100%; } .hero h1{ max-width: 15ch; margin-bottom:.35em; } .hero h1 em{ font-style: italic; color: var(--copper-bright); } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 2em; } .hero-badges{ display:flex; gap: clamp(18px,4vw,46px); flex-wrap:wrap; margin-top: 3em; padding-top: 2em; border-top: 1px solid rgba(245,239,227,0.14); } .hero-badge b{ display:block; font-family: var(--f-display); font-size: 1.6rem; color: var(--paper); } .hero-badge span{ font-family: var(--f-mono); font-size: 10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--paper-dim); } /* ---------- Sections ---------- */ section{ padding: clamp(64px, 9vw, 120px) 0; } .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom: clamp(36px,5vw,64px); flex-wrap:wrap; } .bg-charcoal{ background: var(--charcoal); } .bg-slate{ background: var(--charcoal-2); } .bg-paper{ background: var(--paper); color: var(--ink); } .bg-paper p{ color: #4a4436; } .bg-paper h2, .bg-paper h3{ color: var(--ink); } .bg-paper .eyebrow{ color: var(--copper-dim); } .bg-paper .eyebrow::before{ background: var(--copper-dim); } /* ---------- Leistungen cards ---------- */ .services-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--slate-line); border: 1px solid var(--slate-line); } .service-card{ background: var(--charcoal-2); padding: 34px 26px; transition: background .25s ease; min-height: 290px; display:flex; flex-direction:column; } .service-card:hover{ background: var(--slate); } .service-num{ font-family: var(--f-mono); font-size: 11px; color: var(--copper); letter-spacing:.1em; } .service-card h3{ margin-top: .6em; } .service-card p{ font-size: .93rem; flex-grow:1; } .service-card .tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1em; } .service-card .tag-list li{ font-family: var(--f-mono); font-size:10.5px; letter-spacing:.03em; color: var(--paper-dim); border:1px solid var(--slate-line); border-radius: 20px; padding: 4px 10px; } .service-link{ margin-top: 1.4em; font-size:.88rem; font-weight:600; color: var(--copper-bright); display:inline-flex; align-items:center; gap:6px; } .service-card:hover .service-link{ gap:10px; } .service-link svg{ width:14px; height:14px; transition: transform .2s ease; } @media (max-width: 600px){ .services-grid{ grid-template-columns: 1fr; } } /* ---------- Showcase / masonry-ish grid ---------- */ .showcase-grid{ display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 12vw; grid-auto-flow: dense; gap: 10px; } .showcase-grid a{ position:relative; overflow:hidden; border-radius: var(--radius-lg); display:block; } .showcase-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .showcase-grid a:hover img{ transform: scale(1.07); } .showcase-grid a::after{ content: attr(data-label); position:absolute; left:0; right:0; bottom:0; padding: 10px 14px 9px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--paper); background: linear-gradient(0deg, rgba(0,0,0,.72), transparent); opacity:0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; } .showcase-grid a:hover::after{ opacity:1; transform:translateY(0); } .g-a{ grid-column: span 2; grid-row: span 2; } .g-b{ grid-column: span 2; grid-row: span 1; } .g-c{ grid-column: span 2; grid-row: span 2; } @media (max-width: 860px){ .showcase-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 42vw; } .g-a,.g-b,.g-c{ grid-column: span 1; grid-row: span 1; } } /* ---------- About / split ---------- */ .split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,6vw,90px); align-items:center; } .split-media{ position:relative; } .split-media img{ border-radius: var(--radius); } .split-media .frame-tag{ position:absolute; bottom:-1px; left:-1px; background: var(--copper); color:#1a1108; font-family: var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding: 7px 13px; } @media (max-width: 860px){ .split{ grid-template-columns: 1fr; } .split-media{ order:-1; } } .credentials{ margin-top:1.6em; display:grid; gap:14px; } .credential{ display:flex; gap:14px; align-items:flex-start; } .credential svg{ width:20px; height:20px; color: var(--copper-bright); flex-shrink:0; margin-top:2px; } .credential span{ color: var(--paper-dim); font-size:.95rem; } /* ---------- CTA band ---------- */ .cta-band{ background: var(--slate); border-top: 1px solid var(--slate-line); border-bottom: 1px solid var(--slate-line); padding: clamp(48px,8vw,80px) 0; } .cta-inner{ display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; } .cta-inner h2{ margin:0; max-width: 14ch; } .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; } /* ---------- Footer ---------- */ footer{ background: var(--charcoal); padding: 56px 0 28px; border-top: 1px solid var(--slate-line); } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; } .footer-col h4{ font-family: var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--copper-bright); margin-bottom: 1.1em; } .footer-col ul{ display:grid; gap:10px; } .footer-col a{ color: var(--paper-dim); font-size:.93rem; } .footer-col a:hover{ color: var(--paper); } .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top: 24px; border-top: 1px solid var(--slate-line); font-size:.82rem; color: var(--paper-dim); font-family: var(--f-mono); } .footer-legal-name{ margin: 16px 0 0; font-family: var(--f-mono); font-size:14px; line-height:1.5; letter-spacing:.03em; color: var(--paper); } .footer-legal-name span{ display:inline-block; white-space:nowrap; } @media (max-width: 720px){ .footer-grid{ grid-template-columns: 1fr 1fr; } .footer-grid .footer-col:first-child{ grid-column: span 2; } } /* ---------- Reveal on scroll ---------- */ .reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible{ opacity:1; transform:none; } /* ---------- Page header (inner pages) ---------- */ .page-header{ padding: clamp(150px,20vw,210px) 0 clamp(56px,8vw,80px); background: var(--charcoal-2); border-bottom: 1px solid var(--slate-line); position:relative; } .page-header .container{ position:relative; z-index:1; } /* ---------- Leistungen detail page ---------- */ .leistung-block{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px,6vw,80px); align-items:center; padding: clamp(50px,8vw,90px) 0; border-bottom: 1px solid var(--slate-line); } .leistung-block:last-child{ border-bottom:none; } .leistung-block:nth-child(even) .leistung-media{ order:2; } .leistung-media img{ border-radius: var(--radius); } .leistung-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .leistung-media-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .leistung-list{ margin-top: 1.4em; display:grid; gap: 10px; } .leistung-list li{ display:flex; gap:10px; align-items:flex-start; color: var(--paper-dim); font-size:.96rem; } .leistung-list svg{ width:18px; height:18px; color: var(--copper); flex-shrink:0; margin-top:3px; } @media (max-width: 860px){ .leistung-block{ grid-template-columns:1fr; } .leistung-block:nth-child(even) .leistung-media{ order:-1; } } /* ---------- Gallery page ---------- */ .filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 40px; } .filter-btn{ font-family: var(--f-mono); font-size: 11.5px; letter-spacing:.06em; text-transform:uppercase; padding: 10px 18px; border:1px solid var(--slate-line); border-radius: 30px; background: transparent; color: var(--paper-dim); cursor:pointer; transition: all .2s ease; min-height:44px; } .filter-btn:hover{ border-color: var(--copper); color: var(--paper); } .filter-btn.active{ background: var(--copper); border-color: var(--copper); color:#1a1108; } .gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .gallery-grid figure{ margin:0; position:relative; overflow:hidden; border-radius: var(--radius-lg); aspect-ratio: 4/5; cursor: zoom-in; background:var(--charcoal-2); box-shadow:0 12px 35px rgba(0,0,0,.16); } .gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .45s ease; } .gallery-grid figure:hover img{ transform: scale(1.06); } .gallery-grid figcaption{ position:absolute; left:0; right:0; bottom:0; padding: 12px 14px 10px; font-family: var(--f-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); color: var(--paper); } @media (max-width: 860px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 500px){ .gallery-grid{ grid-template-columns: 1fr; gap:14px; } } /* Lightbox */ .lightbox{ position:fixed; inset:0; z-index:1000; background: rgba(10,10,10,0.94); display:none; align-items:center; justify-content:center; padding: 40px 20px; } .lightbox.open{ display:flex; } .lightbox img{ max-width:min(94vw, 1100px); max-height:86vh; width:auto; border-radius: 2px; } .lightbox-close, .lightbox-prev, .lightbox-next{ position:fixed; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); color:var(--paper); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; } .lightbox-close{ top:20px; right:20px; } .lightbox-prev{ left:16px; top:50%; transform:translateY(-50%); } .lightbox-next{ right:16px; top:50%; transform:translateY(-50%); } .lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:20px; height:20px; } .lightbox-caption{ position:fixed; bottom: 24px; left:0; right:0; text-align:center; font-family: var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--paper-dim); } /* ---------- Kontakt page ---------- */ .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,5vw,40px); } .contact-card{ background: var(--charcoal-2); border: 1px solid var(--slate-line); padding: clamp(30px,4vw,44px); border-radius: var(--radius-lg); } .contact-card .icon-wrap{ width:52px; height:52px; border-radius:50%; background: rgba(181,101,47,0.15); display:flex; align-items:center; justify-content:center; margin-bottom: 1.4em; } .contact-card .icon-wrap svg{ width:24px; height:24px; color: var(--copper-bright); } .contact-card .big-link{ font-family: var(--f-display); font-size: clamp(1.3rem,3vw,1.8rem); color: var(--paper); display:inline-block; margin: .3em 0 .8em; word-break: break-word; } .contact-card .big-link:hover{ color: var(--copper-bright); } .contact-meta{ margin-top: clamp(40px,6vw,64px); display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; padding-top: 36px; border-top: 1px solid var(--slate-line); } .contact-meta .eyebrow{ margin-bottom:.5em; } @media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } .contact-meta{ grid-template-columns:1fr; } } /* ---------- Legal pages ---------- */ .legal-content{ max-width: 74ch; } .legal-content h2{ font-size: 1.4rem; margin-top: 1.8em; } .legal-content h3{ font-size: 1.1rem; margin-top: 1.3em; } .legal-content p, .legal-content li{ color: var(--paper-dim); font-size: .98rem; } .legal-content ul{ list-style: disc; padding-left: 1.3em; display:grid; gap:.4em; margin-bottom:1em; } .legal-content a{ color: var(--copper-bright); text-decoration: underline; text-underline-offset:3px; } .legal-note{ border-left: 3px solid var(--copper); background: rgba(181,101,47,0.08); padding: 14px 18px; font-size: .9rem; margin: 1.6em 0; color: var(--paper-dim); } /* ---------- WhatsApp floating button ---------- */ .wa-float{ position: fixed; right: clamp(16px,4vw,28px); bottom: clamp(16px,4vw,28px); z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 24px rgba(0,0,0,0.4); transition: transform .2s ease; } /* ---------- Cross-device refinements ---------- */ @media (max-width: 1100px){ .nav-links{ gap:18px; } .nav-cta .btn{ padding-inline:1em; } .gallery-grid{ grid-template-columns:repeat(3,1fr); } .services-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 860px){ .container{ padding-inline:clamp(18px,5vw,36px); } .hero{ min-height:calc(100svh - 68px); } .hero-content{ padding-block:110px 44px; } .hero-badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .hero-badge b{ font-size:1.35rem; } .page-header{ padding:clamp(104px,20vw,142px) 0 48px; } .filter-bar{ position:sticky; top:68px; z-index:20; flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(clamp(18px,5vw,36px) * -1); padding:12px clamp(18px,5vw,36px); margin-bottom:28px; background:rgba(23,25,27,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--slate-line); scrollbar-width:none; } .filter-bar::-webkit-scrollbar{ display:none; } .filter-btn{ flex:0 0 auto; } .gallery-grid{ grid-template-columns:repeat(2,1fr); } .cta-inner{ align-items:flex-start; } .lightbox{ padding:70px 12px 104px; } .lightbox img{ max-height:calc(100svh - 190px); max-width:100%; } .lightbox-prev,.lightbox-next{ top:auto; bottom:28px; transform:none; } .lightbox-prev{ left:calc(50% - 62px); } .lightbox-next{ right:calc(50% - 62px); } .lightbox-caption{ bottom:86px; padding-inline:20px; } } @media (max-width: 600px){ body{ font-size:15.5px; } section{ padding-block:58px; } h1{ font-size:clamp(2.35rem,12vw,3.6rem); } h2{ font-size:clamp(1.8rem,9vw,2.45rem); } .hero h1{ max-width:12ch; } .hero-media img{ object-position:62% center; } .hero-actions,.cta-actions{ width:100%; display:grid; grid-template-columns:1fr; } .hero-actions .btn,.cta-actions .btn{ width:100%; justify-content:center; } .hero-badges{ grid-template-columns:1fr 1fr; } .hero-badge:last-child{ grid-column:1/-1; } .services-grid{ grid-template-columns:1fr; border-radius:var(--radius-lg); overflow:hidden; } .service-card{ min-height:auto; padding:28px 24px; } .showcase-grid{ display:grid; grid-template-columns:1fr; grid-auto-rows:72vw; } .gallery-grid{ grid-template-columns:1fr; } .showcase-grid a::after{ opacity:1; transform:none; } .leistung-media-pair{ gap:8px; } .leistung-media img{ aspect-ratio:1/1; } .footer-grid{ grid-template-columns:1fr; gap:30px; } .footer-grid .footer-col:first-child{ grid-column:auto; } .footer-bottom{ flex-direction:column; } .wa-float{ width:54px; height:54px; bottom:max(16px, env(safe-area-inset-bottom)); } } @media (max-width: 380px){ .nav-cta{ display:none; } .hero-badges{ grid-template-columns:1fr; } .hero-badge:last-child{ grid-column:auto; } } .error-page{ min-height:calc(100svh - 68px); display:grid; place-items:center; text-align:center; padding:72px 20px; } .error-page .lede{ margin-inline:auto; } .wa-float:hover{ transform: scale(1.08); } .wa-float svg{ width:28px; height:28px; color:#0b1a10; } /* utility */ .mono{ font-family: var(--f-mono); } .text-center{ text-align:center; } .mt-0{ margin-top:0; }