/* ================================================================ UrbanGreen – Gartenservice Design-System · Editorial, ruhig, hochwertig – durchgehend dunkelgrün. Newsreader (Display-Serife) + Manrope (Text/UI). Gestaltungssprache: Haarlinien, Weißraum, Typografie statt Dekor. ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ---- Grünflächen (dunkel → hell) ---- */ --forest-975: #0e1809; /* Footer, tiefste Fläche */ --forest-950: #131f0e; /* Sektion dunkel */ --forest-900: #1a2a14; /* Sektion Basis */ --forest-800: #23381c; --forest-700: #2e4a24; --forest-600: #3c5f2f; --moss: #5b8a3c; --lime: #93c653; --lime-soft: #aed777; --sage-300: #b9cf9c; /* ---- Oberflächen auf Dunkel ---- */ --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.075); --rule: rgba(231,240,218,.16); --rule-soft: rgba(231,240,218,.10); /* ---- Schrift auf Dunkel ---- */ --text-strong: #f3f0e5; --text-body: rgba(233,240,220,.76); --text-muted: rgba(233,240,220,.54); /* ---- Typo-Skala ---- */ --fs-display: clamp(3rem, 7.4vw, 6rem); --fs-h2: clamp(2.1rem, 4.3vw, 3.35rem); --fs-h3: clamp(1.25rem, 1.6vw, 1.45rem); --fs-lead: clamp(1.05rem, 1.25vw, 1.18rem); --fs-body: 1rem; --fs-small: .875rem; --fs-micro: .72rem; /* ---- Raum ---- */ --gap: 1.6rem; --pad-s: clamp(4.5rem, 8vw, 8rem); --maxw: 1200px; /* ---- Form & Bewegung ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --shadow-1: 0 2px 8px rgba(0,0,0,.18); --shadow-2: 0 6px 20px rgba(0,0,0,.26); --shadow-3: 0 18px 46px rgba(0,0,0,.34); --ease: .45s cubic-bezier(.22,.61,.36,1); --ease-fast: .25s cubic-bezier(.22,.61,.36,1); --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif; --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--forest-900); /* Sagt dem Gerät, dass die Seite dunkel ist. Dadurch zeichnet das Betriebssystem auch seine eigenen Elemente dunkel: Auswahllisten, Scrollleiste, Autofill, Markierungsgriffe. Das ist KEIN Dunkelmodus-Umschalter – das Design bleibt für alle Besucher identisch. */ color-scheme: dark; } body { font-family: var(--font-sans); background: var(--forest-900); color: var(--text-body); font-size: var(--fs-body); line-height: 1.68; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--lime); color: var(--forest-950); } a { color: var(--lime); text-underline-offset: 3px; text-decoration-thickness: 1px; } img, svg { max-width: 100%; display: block; } /* Lange deutsche Komposita wie "Geschäftsbedingungen" sollen umbrechen, statt aus dem Layout zu laufen. Die Silbentrennung greift dank lang="de" im -Tag. overflow-wrap ist nur ein Notnagel: Es bricht ausschliesslich Woerter, die sonst nicht passen wuerden - normaler Textfluss bleibt unveraendert. */ h1, h2, h3, h4, h5, h6, p, li, dd, a { overflow-wrap: break-word; } .legal h1, .legal h2, .legal h3, .legal p, .legal li { hyphens: auto; } :focus-visible { outline: 2.5px solid var(--lime); outline-offset: 3px; border-radius: 3px; } .skip-link { position: absolute; left: 10px; top: -60px; z-index: 300; background: var(--lime); color: var(--forest-950); padding: .65rem 1.1rem; border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: 700; text-decoration: none; transition: top var(--ease-fast); } .skip-link:focus { top: 10px; } /* ================= LAYOUT ================= */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); } section { padding: var(--pad-s) 0; scroll-margin-top: 84px; } .eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); margin-bottom: 1.25rem; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; } .section-title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.028em; color: var(--text-strong); margin-bottom: 1.15rem; text-wrap: balance; } .section-title em { font-style: italic; color: var(--lime); } .section-sub { font-size: var(--fs-lead); color: var(--text-body); max-width: 54ch; line-height: 1.68; } .section-head { margin-bottom: clamp(2.75rem, 5vw, 4.25rem); max-width: 760px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head.center .section-sub { margin-inline: auto; } /* ================= NAVIGATION ================= */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 200; background: rgba(14, 24, 9, .72); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.07); transition: background var(--ease); } .nav.scrolled { background: rgba(14, 24, 9, .94); } .nav__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-top: .7rem; padding-bottom: .75rem; } .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; } .brand__mark { width: 26px; height: 26px; flex-shrink: 0; } .brand__text { font-family: var(--font-serif); font-weight: 500; font-size: 1.42rem; line-height: 1; letter-spacing: -.005em; } .brand__text .u { color: #efece1; } .brand__text .g { color: var(--lime); } .nav-links { display: flex; align-items: center; gap: 2.1rem; list-style: none; } .nav-links a { position: relative; color: rgba(233,240,220,.72); text-decoration: none; font-size: .855rem; font-weight: 500; letter-spacing: .04em; padding: .15rem 0; transition: color var(--ease-fast); } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform var(--ease); } .nav-links a:hover { color: #fff; } .nav-links a:hover::after { transform: scaleX(1); } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 7px; } .hamburger span { width: 22px; height: 1.5px; background: #efece1; display: block; border-radius: 2px; transition: var(--ease-fast); } /* ================= HERO ================= */ .hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 9rem 1.5rem 10rem; background: radial-gradient(60% 45% at 50% 34%, rgba(147,198,83,.13), transparent 70%), radial-gradient(120% 110% at 50% 0%, #35552c 0%, #24391d 46%, #131f0e 100%); } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; } .hero__inner { position: relative; z-index: 3; max-width: 940px; } .hero__badge { display: inline-flex; align-items: center; gap: .85rem; color: var(--sage-300); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 2.1rem; } .hero__badge::before, .hero__badge::after { content: ""; width: clamp(18px, 5vw, 44px); height: 1px; background: currentColor; opacity: .5; } .hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-display); line-height: 1.0; letter-spacing: -.035em; color: #f7f4ea; margin-bottom: 2.6rem; text-wrap: balance; } .hero h1 .accent { display: block; font-style: italic; font-weight: 400; color: var(--lime); letter-spacing: -.03em; } .hero__btns { display: flex; gap: .85rem; flex-wrap: wrap; justify-content: center; } .hero__horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(150px, 26vh, 280px); z-index: 1; pointer-events: none; } .hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: auto; z-index: 2; display: block; } .hero__scroll { position: absolute; left: 50%; bottom: 122px; transform: translateX(-50%); z-index: 3; color: rgba(233,240,220,.45); font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: .6rem; transition: color var(--ease-fast); } .hero__scroll:hover { color: var(--lime); } .hero__scroll span { width: 1px; height: 34px; background: currentColor; opacity: .6; animation: dropIn 2.2s ease-in-out infinite; transform-origin: top; } @keyframes dropIn { 0%,100% { transform: scaleY(.35); opacity:.3 } 50% { transform: scaleY(1); opacity:.75 } } /* ================= BUTTONS ================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.9rem; border-radius: 100px; font-family: var(--font-sans); font-size: .93rem; font-weight: 700; letter-spacing: .015em; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background var(--ease-fast), color var(--ease-fast), transform var(--ease-fast), border-color var(--ease-fast), box-shadow var(--ease-fast); } .btn svg { width: 15px; height: 15px; transition: transform var(--ease-fast); } .btn:hover svg { transform: translateX(3px); } .btn--primary { background: var(--lime); color: var(--forest-950); border-color: var(--lime); box-shadow: 0 4px 18px rgba(147,198,83,.24); } .btn--primary:hover { background: var(--lime-soft); border-color: var(--lime-soft); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(147,198,83,.32); } .btn--ghost { background: rgba(255,255,255,.04); color: rgba(233,240,220,.92); border-color: rgba(233,240,220,.32); } .btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(233,240,220,.55); transform: translateY(-2px); } .btn--dark { background: var(--moss); color: #fff; border-color: var(--moss); } .btn--dark:hover { background: #6b9d47; border-color: #6b9d47; transform: translateY(-2px); box-shadow: var(--shadow-2); } .btn--block { width: 100%; } /* ================= LEISTUNGEN ================= */ #leistungen { background: var(--forest-900); } .services { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); } .service { position: relative; padding: 2.9rem 2.1rem 3.1rem; border-bottom: 1px solid var(--rule); transition: background var(--ease); } .service:not(:nth-child(3n+1)) { border-left: 1px solid var(--rule); } .service::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--lime); transition: width .55s cubic-bezier(.22,.61,.36,1); } .service:hover { background: rgba(255,255,255,.035); } .service:hover::before { width: 100%; } .service__num { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; line-height: 1; letter-spacing: .02em; color: rgba(185,207,156,.5); margin-bottom: 1.5rem; transition: color var(--ease); } .service:hover .service__num { color: var(--lime); } .service h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -.015em; color: var(--text-strong); margin-bottom: .7rem; } .service p { font-size: .96rem; color: var(--text-body); line-height: 1.65; } .service p strong { color: var(--lime); font-weight: 600; } .services-cta { margin-top: 2.9rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; } .services-cta p { font-size: .96rem; color: var(--text-muted); } /* ================= PREISE ================= */ #preise { background: var(--forest-950); } .rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: var(--gap); } .rate { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 2.4rem 2rem 2.2rem; text-align: center; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease); } .rate:hover { transform: translateY(-5px); background: var(--surface-2); box-shadow: var(--shadow-2); border-color: rgba(147,198,83,.45); } .rate__label { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin-bottom: 1.4rem; } .rate__amount { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(3.1rem, 5vw, 3.9rem); line-height: 1; letter-spacing: -.035em; color: var(--text-strong); } .rate__amount .cur { font-size: .45em; letter-spacing: 0; margin-left: .12em; vertical-align: .32em; color: var(--lime); } .rate__per { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-top: .5rem; } .rate__desc { font-size: .93rem; color: var(--text-body); margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--rule-soft); } .offer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--forest-700), var(--forest-800)); border: 1px solid rgba(147,198,83,.24); border-radius: var(--r-lg); padding: clamp(2rem, 3.5vw, 2.9rem) clamp(1.8rem, 3.5vw, 3rem); color: #fff; } .offer::after { content:""; position:absolute; inset:0; background-image: var(--grain); opacity:.1; mix-blend-mode: overlay; pointer-events:none; } .offer > * { position: relative; z-index: 1; } .offer h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem,2.4vw,1.95rem); letter-spacing: -.02em; color: var(--text-strong); margin-bottom: .6rem; } .offer p { color: var(--text-body); font-size: .99rem; max-width: 52ch; } .offer strong { color: var(--lime); font-weight: 600; } .price-note { margin-top: 1.8rem; font-size: var(--fs-small); color: var(--text-muted); text-align: center; max-width: 68ch; margin-inline: auto; } /* ================= ABLAUF ================= */ #ablauf { position: relative; background: radial-gradient(130% 120% at 50% 0%, var(--forest-700), var(--forest-950)); overflow: hidden; } #ablauf::after { content:""; position:absolute; inset:0; background-image: var(--grain); opacity:.13; mix-blend-mode: overlay; pointer-events:none; } #ablauf .container { position: relative; z-index: 1; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); } .step { position: relative; padding-top: 2.1rem; border-top: 1px solid rgba(233,240,220,.22); } .step__num { font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: .1em; color: var(--lime); display: block; margin-bottom: 1rem; } .step h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.42rem; letter-spacing: -.02em; color: var(--text-strong); margin-bottom: .6rem; } .step p { color: var(--text-body); font-size: .96rem; line-height: 1.66; } /* ================= ÜBER MICH ================= */ #ueber { background: var(--forest-900); } .about { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; } .about__text p { color: var(--text-body); font-size: var(--fs-lead); line-height: 1.78; margin-bottom: 1.25rem; } .about__text p strong { color: var(--lime); font-weight: 600; } .about__quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.34; letter-spacing: -.02em; color: var(--sage-300); border-left: 2px solid var(--lime); padding-left: clamp(1.1rem, 2vw, 1.7rem); margin: 0 0 1.9rem; } .about__values { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); } .about__values li { display: flex; align-items: flex-start; gap: .9rem; padding: 1.05rem .2rem; border-bottom: 1px solid var(--rule); font-size: .98rem; color: var(--text-body); } .about__values svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--lime); margin-top: .28rem; } /* ================= KONTAKT ================= */ #kontakt { background: var(--forest-950); } .contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contact__list { border-top: 1px solid var(--rule); } .contact__list > div { padding: 1.35rem .2rem; border-bottom: 1px solid var(--rule); } .contact__list dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin-bottom: .35rem; } .contact__list dd { font-size: 1.02rem; color: var(--text-strong); line-height: 1.5; } .contact__list a { color: var(--text-strong); text-decoration: none; border-bottom: 1px solid rgba(147,198,83,.5); transition: border-color var(--ease-fast), color var(--ease-fast); } .contact__list a:hover { color: var(--lime); border-color: var(--lime); } .form-box { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.75rem, 3.5vw, 2.6rem); box-shadow: var(--shadow-2); } .form-box h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; letter-spacing: -.022em; color: var(--text-strong); margin-bottom: .45rem; } .form-box .hint { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 1.9rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .field { margin-bottom: 1.2rem; } .field label { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .55rem; } .field label .req { color: var(--lime); } .field input, .field select, .field textarea { width: 100%; padding: .85rem 0; font-family: var(--font-sans); font-size: 1rem; color: var(--text-strong); background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; transition: border-color var(--ease-fast); } .field select { padding-right: 1.4rem; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c653' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .1rem center; background-size: 16px; } .field select option { background: var(--forest-900); color: var(--text-strong); } .field input::placeholder, .field textarea::placeholder { color: rgba(233,240,220,.35); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--lime); border-bottom-width: 1.5px; } .field textarea { resize: vertical; min-height: 112px; } .consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-small); color: var(--text-body); margin: 1.6rem 0 1.5rem; line-height: 1.55; } .consent input { width: 17px; height: 17px; margin-top: .2rem; flex-shrink: 0; accent-color: var(--lime); } .consent a { color: var(--lime); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { margin-top: 1.1rem; padding: .9rem 1.1rem; border-radius: var(--r-sm); font-size: .93rem; display: none; } .form-status.show { display: block; } .form-status.ok { background: rgba(147,198,83,.14); border: 1px solid rgba(147,198,83,.55); color: var(--lime-soft); } .form-status.err { background: rgba(224,110,96,.12); border: 1px solid rgba(224,110,96,.5); color: #f0a79c; } /* ================= FOOTER ================= */ .footer { position: relative; background: var(--forest-975); color: var(--text-muted); padding: clamp(3.5rem,6vw,5rem) 0 2.2rem; overflow: hidden; } .footer::after { content:""; position:absolute; inset:0; background-image: var(--grain); opacity:.1; mix-blend-mode: overlay; pointer-events:none; } .footer .container { position: relative; z-index: 1; } .footer__top { display: flex; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(233,240,220,.13); } .footer__brand .brand__text { font-size: 1.6rem; } .footer__brand p { margin-top: .9rem; font-size: .93rem; max-width: 34ch; line-height: 1.66; } .footer__cols { display: flex; gap: clamp(2.5rem, 6vw, 4.5rem); flex-wrap: wrap; } .footer__col h5 { color: #efece1; font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 700; } .footer__col a { display: block; color: rgba(233,240,220,.58); text-decoration: none; font-size: .92rem; margin-bottom: .62rem; transition: color var(--ease-fast); } .footer__col a:hover { color: var(--lime); } .footer__bottom { padding-top: 1.7rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer__bottom small { font-size: .8rem; opacity: .68; letter-spacing: .02em; } /* ================= RECHTS-SEITEN ================= */ .legal { padding: clamp(7.5rem,12vw,9.5rem) 0 clamp(4rem,7vw,6rem); background: var(--forest-900); min-height: 70vh; } .legal .container { max-width: 760px; } .legal h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2rem,5vw,3.2rem); letter-spacing: -.03em; color: var(--text-strong); margin-bottom: .6rem; } .legal .updated { color: var(--text-muted); font-size: var(--fs-small); margin-bottom: 2.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--rule); } .legal h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.55rem; letter-spacing: -.02em; color: var(--lime); margin: 2.6rem 0 .9rem; } .legal h3 { font-size: 1.02rem; font-weight: 700; color: var(--text-strong); margin: 1.5rem 0 .5rem; } .legal p, .legal li { color: var(--text-body); font-size: .99rem; line-height: 1.78; margin-bottom: .85rem; } .legal strong { color: var(--text-strong); } .legal ul { padding-left: 1.3rem; margin-bottom: .85rem; } .legal a { color: var(--lime); } .legal .placeholder { background: rgba(226,162,58,.16); border: 1px dashed rgba(226,162,58,.6); color: #eecb85; padding: .08rem .45rem; border-radius: 4px; font-size: .92em; font-weight: 600; } .legal .note { background: var(--surface); border: 1px solid var(--rule); border-left: 2px solid var(--lime); border-radius: var(--r-sm); padding: 1.15rem 1.35rem; margin: 1.7rem 0; font-size: .93rem; } .legal .back { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.8rem; font-weight: 700; font-size: .93rem; color: var(--lime); text-decoration: none; } .legal .back:hover { color: var(--lime-soft); } /* Copyright-Hinweis der IT-Recht Kanzlei am Ende der Rechtstexte. Der Block darf laut deren Lizenzbedingungen nicht entfernt werden. Die inline-Styles aus dem Generator sind fuer helle Seiten gedacht, deshalb werden sie hier ueberschrieben (!important schlaegt inline). Das Logo bekommt eine helle Flaeche, sonst geht es auf Dunkelgruen unter. */ #itkanzlei_txt_copyright { margin-top: 3.5rem !important; padding-top: 1.6rem; border-top: 1px solid var(--rule); font-size: .78rem !important; color: var(--text-muted); } #itkanzlei_img_copyright { margin-top: 0 !important; background: #fff; padding: 7px 11px; border-radius: 8px; } /* ================= REVEAL ================= */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1); } .fade-up.visible { opacity: 1; transform: none; } .services .service:nth-child(2), .rates .rate:nth-child(2), .steps .step:nth-child(2) { transition-delay: .09s; } .services .service:nth-child(3), .rates .rate:nth-child(3), .steps .step:nth-child(3) { transition-delay: .18s; } .services .service:nth-child(4) { transition-delay: .27s; } .services .service:nth-child(5) { transition-delay: .36s; } .services .service:nth-child(6) { transition-delay: .45s; } /* ================= RESPONSIVE ================= */ @media (max-width: 1000px) { .services { grid-template-columns: repeat(2, 1fr); } .service:not(:nth-child(3n+1)) { border-left: 0; } .service:not(:nth-child(2n+1)) { border-left: 1px solid var(--rule); } .rates { grid-template-columns: 1fr 1fr; } .rates .rate:last-child { grid-column: 1 / -1; } } @media (max-width: 880px) { .about, .contact { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; gap: 0; } .step { padding: 1.9rem 0; } } @media (max-width: 680px) { .services { grid-template-columns: 1fr; } .service, .service:not(:nth-child(2n+1)) { border-left: 0; } .service { padding: 2.3rem .2rem 2.5rem; } .rates { grid-template-columns: 1fr; } .rates .rate:last-child { grid-column: auto; } .form-row { grid-template-columns: 1fr; gap: 0; } .offer { flex-direction: column; align-items: flex-start; } .hero { padding: 7.5rem 1.4rem 8.5rem; } .hero__scroll { display: none; } } @media (max-width: 768px) { .nav__inner { flex-direction: row; align-items: center; gap: 0; padding: 0; min-height: 62px; } .hamburger { display: flex; position: absolute; left: clamp(1.25rem,4vw,2.5rem); top: 50%; transform: translateY(-50%); } .brand { margin: 0 auto; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: rgba(14,24,9,.98); padding: .6rem clamp(1.25rem,4vw,2.5rem) 1.3rem; border-bottom: 1px solid rgba(255,255,255,.1); } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; width: 100%; padding: .85rem 0; font-size: .98rem; border-bottom: 1px solid rgba(255,255,255,.07); } .nav-links a::after { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fade-up { opacity: 1; transform: none; transition: none; } .hero__scroll span { animation: none; } *, *::before, *::after { transition: none !important; } }