/* =========================================================== Fjordbau — Shared Stylesheet Unabhängige Bauleitung, Baubegleitung, Bauberatung, Projektleitung =========================================================== */ :root{ --paper:#EEF0EA; --card:#FBFAF6; --ink:#1B2430; --fjord:#14555E; --fjord-light:#3F8791; --brass:#B8862E; --slate:#454E56; --line:#D5D9CE; --radius:2px; --max:1180px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Inter', 'Segoe UI', system-ui, sans-serif; font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,.display{ font-family:'Manrope', sans-serif; font-weight:700; letter-spacing:-0.015em; line-height:1.18; margin:0; color:var(--ink); } p{max-width:640px;} h1,h2,h3{max-width:none;} .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fjord); display:flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:16px;height:1px;background:var(--brass); display:inline-block; } a{color:inherit;} img,svg{display:block;max-width:100%;} .wrap{max-width:var(--max);margin:0 auto;padding:0 28px;} .wrap-narrow{max-width:820px;margin:0 auto;padding:0 28px;} :focus-visible{outline:2px solid var(--brass);outline-offset:3px;} /* ---------- Scroll reveal ---------- Progressive enhancement: the hidden pre-reveal state only applies once an early inline script has added "js" to . With JavaScript disabled/blocked, .reveal content simply stays visible by default. */ html.js .reveal{ opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } html.js .reveal.is-visible{opacity:1;transform:translateY(0);} .reveal-1{transition-delay:.05s;} .reveal-2{transition-delay:.14s;} .reveal-3{transition-delay:.23s;} .reveal-4{transition-delay:.32s;} .reveal-5{transition-delay:.4s;} @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} html.js .reveal{opacity:1;transform:none;} } /* ---------- Header ---------- */ header{ position:sticky;top:0;z-index:50; background:rgba(238,240,234,0.86); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .3s ease, box-shadow .3s ease, background-color .3s ease; } header.scrolled{ border-bottom-color:var(--line); box-shadow:0 6px 24px -14px rgba(20,30,35,0.35); background:rgba(238,240,234,0.94); } .navbar{ display:flex;align-items:center;justify-content:space-between; padding:16px 28px;max-width:1480px;margin:0 auto; } .brand{display:flex;align-items:center;gap:10px;text-decoration:none;} .brand-mark{width:30px;height:30px;flex:none;} .brand-name{ font-family:'Manrope',sans-serif;font-weight:600;font-size:19px; letter-spacing:-0.01em; } .brand-sub{ font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--slate); letter-spacing:0.05em;display:block;margin-top:-2px; } nav.links{display:flex;gap:6px;align-items:center;} nav.links > a{ font-family:'Inter',sans-serif;font-weight:600;font-size:15.5px;text-decoration:none; color:var(--ink);letter-spacing:0;position:relative;padding:10px 12px; } nav.links > a::after{ content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1px;width:0; background:var(--brass);transition:width .2s ease; } nav.links > a:hover::after{width:calc(100% - 24px);} /* Dropdown nav items (Leistungen / Einsatzgebiet) */ .nav-item{position:relative;} .nav-item > button{ font-family:'Inter',sans-serif;font-weight:600;font-size:15.5px; color:var(--ink);background:none;border:0;cursor:pointer;padding:10px 12px; display:inline-flex;align-items:center;gap:5px; } .nav-item > button svg{width:9px;height:9px;transition:transform .2s ease;} .nav-item:hover > button svg,.nav-item.open > button svg{transform:rotate(180deg);} .nav-dropdown{ position:absolute;top:100%;left:0;min-width:240px; background:var(--card);border:1px solid var(--line);border-radius:8px; padding:8px;box-shadow:0 20px 40px -18px rgba(20,30,35,0.35); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:60; } .nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{ opacity:1;visibility:visible;transform:translateY(0); } .nav-dropdown a{ display:block;padding:10px 12px;border-radius:5px; font-family:'Inter',sans-serif;font-weight:500;font-size:14.5px; color:var(--ink);text-decoration:none; } .nav-dropdown a:hover{background:var(--paper);color:var(--fjord);} .nav-dropdown .dropdown-all{ border-top:1px solid var(--line);margin-top:6px;padding-top:10px; font-weight:600;color:var(--fjord); } .cta-btn{ font-family:'Inter',sans-serif;font-weight:600;font-size:15px; background:var(--fjord);color:#fff;text-decoration:none; padding:10px 18px;border-radius:6px;letter-spacing:0; white-space:nowrap;transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease; margin-left:8px; } .cta-btn:hover{background:var(--fjord-light);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(20,85,94,0.5);} .menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;} .menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;} @media (max-width:1520px){ nav.links{ position:absolute;top:100%;left:0;right:0; background:var(--paper);border-bottom:1px solid var(--line); flex-direction:column;align-items:stretch;gap:0; max-height:0;overflow:hidden;transition:max-height .3s ease; max-width:none;padding:0; } nav.links.open{max-height:80vh;overflow-y:auto;} nav.links > a{padding:14px 28px;width:100%;border-top:1px solid var(--line);} .nav-item{width:100%;} .nav-item > button{width:100%;justify-content:space-between;padding:14px 28px;border-top:1px solid var(--line);} .nav-dropdown{ position:static;opacity:1;visibility:visible;transform:none; box-shadow:none;border:0;border-radius:0;background:rgba(20,85,94,0.04); display:none;max-width:none;padding:0 0 8px; } .nav-item.open .nav-dropdown{display:block;} nav.links .cta-btn{margin:14px 28px;text-align:center;} .menu-toggle{display:block;} } /* ---------- Breadcrumbs ---------- */ .breadcrumbs{ padding:16px 0 0; font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--slate); display:flex;flex-wrap:wrap;align-items:center;gap:6px; } .breadcrumbs a{color:var(--slate);text-decoration:none;border-bottom:1px solid transparent;} .breadcrumbs a:hover{color:var(--fjord);border-color:var(--fjord);} .breadcrumbs .sep{color:var(--line);} .breadcrumbs .current{color:var(--ink);} /* ---------- Page header (interior pages) ---------- */ .page-hero{padding:34px 0 64px;position:relative;overflow:hidden;} .page-hero h1{font-size:clamp(30px,4.2vw,46px);margin-top:16px;line-height:1.16;} .page-hero .lead{max-width:620px;margin-top:20px;font-size:18.5px;color:var(--slate);line-height:1.6;} .page-hero-meta{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--slate);} .page-hero-meta span{color:var(--brass);} /* ---------- Contour background (replaces blurred blobs) ---------- */ .contour-bg{ position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360'%3E%3Cg fill='none' stroke='%2314555E' stroke-width='1'%3E%3Cpath d='M-20,60 Q100,20 220,60 T460,50' opacity='0.10'/%3E%3Cpath d='M-20,110 Q110,150 230,108 T500,120' opacity='0.14'/%3E%3Cpath d='M-20,170 Q120,135 240,172 T500,168' opacity='0.10'/%3E%3Cpath d='M-20,225 Q100,260 230,222 T500,232' opacity='0.13'/%3E%3Cpath d='M-20,285 Q130,250 250,288 T500,280' opacity='0.09'/%3E%3C/g%3E%3Cg fill='none' stroke='%23B8862E' stroke-width='1'%3E%3Cpath d='M-20,340 Q140,310 260,344 T500,335' opacity='0.16'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat;background-size:480px 360px; background-position:top center; opacity:0.9; } @media (max-width:820px){.contour-bg{background-size:320px 240px;}} .hero{padding:76px 0 56px;position:relative;overflow:hidden;} .hero-grid{ display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center; } .hero-copy > *{ opacity:0;transform:translateY(16px); animation:heroIn .7s cubic-bezier(.2,.7,.2,1) forwards; } .hero-copy .eyebrow{animation-delay:.05s;} .hero-copy h1{animation-delay:.15s;} .hero-copy .lead{animation-delay:.28s;} .hero-copy .hero-actions{animation-delay:.4s;} .hero-copy .hero-meta{animation-delay:.5s;} .hero-art{ opacity:0;transform:translateY(16px) scale(.98); animation:heroIn .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:.3s; } @keyframes heroIn{ to{opacity:1;transform:translateY(0) scale(1);} } @media (prefers-reduced-motion: reduce){ .hero-copy > *, .hero-art{opacity:1;transform:none;animation:none;} } .hero h1{ font-size:clamp(34px,4.6vw,52px);line-height:1.15;font-weight:600; margin-top:18px; } .hero h1 em{font-style:normal;color:var(--fjord);} .hero p.lead{ max-width:500px;margin-top:22px;font-size:19px;line-height:1.6;color:var(--slate); } .hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;} .btn{ font-family:'Inter',sans-serif;font-weight:600;font-size:15.5px;text-decoration:none; padding:13px 24px;border-radius:6px;letter-spacing:0; display:inline-block;transition:background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease; border:1px solid transparent;cursor:pointer; } .btn-primary{background:var(--fjord);color:#fff;} .btn-primary:hover{background:var(--fjord-light);transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(20,85,94,0.55);} .btn-ghost{border:1px solid var(--ink);color:var(--ink);background:none;} .btn-ghost:hover{background:var(--ink);color:#fff;transform:translateY(-2px);} .hero-meta{ margin-top:38px;display:flex;gap:28px;flex-wrap:wrap; font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--slate); } .hero-meta span{color:var(--brass);} .hero-art{position:relative;z-index:1;perspective:900px;} .hero-art-card{ background:var(--card);border:1px solid var(--line);border-radius:12px; padding:6px;box-shadow:0 30px 60px -30px rgba(20,30,35,0.28); transition:transform .2s ease-out; transform:rotateX(0deg) rotateY(0deg); will-change:transform; } .hero-art-card svg{border-radius:8px;} .floating-chip{ position:absolute;display:flex;align-items:center;gap:8px; background:var(--ink);color:#F1F0EA;padding:9px 14px;border-radius:999px; font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.02em; box-shadow:0 16px 30px -14px rgba(20,30,35,0.45); animation:floaty 5s ease-in-out infinite; } .floating-chip .dot{width:7px;height:7px;border-radius:50%;background:#5FCF8A;display:inline-block; box-shadow:0 0 0 0 rgba(95,207,138,0.6);animation:pulse 2.2s ease-out infinite;} .chip-top{top:-16px;right:18px;animation-delay:.2s;} .chip-bottom{bottom:-16px;left:18px;background:var(--card);color:var(--ink);border:1px solid var(--line);animation-delay:0s;} @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}} @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(95,207,138,0.55);} 70%{box-shadow:0 0 0 8px rgba(95,207,138,0);} 100%{box-shadow:0 0 0 0 rgba(95,207,138,0);} } @media (max-width:540px){ .floating-chip{font-size:10.5px;padding:7px 11px;} .chip-top{top:-12px;right:8px;} .chip-bottom{bottom:-12px;left:8px;} } /* ---------- Two-path entry (private / gewerblich) ---------- */ .two-path{padding:0 0 88px;} .two-path-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);} .two-path-card{ background:var(--card);padding:34px 36px;text-decoration:none;color:var(--ink); display:flex;flex-direction:column;gap:10px;transition:transform .3s ease, box-shadow .3s ease, background-color .3s ease; } .two-path-card:hover{transform:translateY(-5px);box-shadow:0 24px 44px -26px rgba(20,30,35,0.3);background:#fff;z-index:2;} .two-path-card .path-tag{ font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--brass); letter-spacing:0.08em;text-transform:uppercase; } .two-path-card h3{font-size:22px;font-weight:600;margin-top:2px;} .two-path-card p{color:var(--slate);font-size:15.5px;line-height:1.6;margin-top:2px;} .two-path-card .path-link{ margin-top:12px;display:inline-flex;align-items:center;gap:6px; font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;color:var(--fjord); } .two-path-card .path-link span{transition:transform .2s ease;} .two-path-card:hover .path-link span{transform:translateX(4px);} @media (max-width:720px){.two-path-grid{grid-template-columns:1fr;}} /* ---------- Sections generic ---------- */ section{padding:96px 0;} .section-sm{padding:64px 0;} .section-head{max-width:640px;margin-bottom:56px;} .section-head h2{font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.2;margin-top:16px;} .section-head p{color:var(--slate);margin-top:14px;font-size:17.5px;line-height:1.6;} .band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .band-dark{background:var(--ink);color:#F1F0EA;} .band-dark .section-head p{color:#B9C2C4;} .band-dark .eyebrow{color:var(--brass);} .band-dark .eyebrow::before{background:#F1F0EA;} /* ---------- Services ---------- */ .services-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:2px; background:var(--line);border:1px solid var(--line); } .services-grid.cols-4{grid-template-columns:repeat(4,1fr);} .services-grid.cols-5{grid-template-columns:repeat(5,1fr);} .services-grid.cols-2{grid-template-columns:repeat(2,1fr);} .service-card{ background:var(--card);padding:0;position:relative;overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; text-decoration:none;color:inherit;display:block; } .service-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(20,30,35,0.28);z-index:2;} .service-visual{ width:100%;aspect-ratio:16/9;display:block; border-bottom:1px solid var(--line);background:#FBFAF6; overflow:hidden; } .service-visual svg{width:100%;height:100%;display:block;} .service-card-body{padding:26px 32px 32px;} .service-card h3{font-size:21px;font-weight:600;margin-top:8px;} .service-card p{color:var(--slate);margin-top:12px;font-size:16.5px;line-height:1.6;} .service-tag{ font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--brass); letter-spacing:0.08em;text-transform:uppercase; } .service-card .card-link{ margin-top:16px;display:inline-flex;align-items:center;gap:6px; font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--fjord); } .service-card .card-link span{transition:transform .2s ease;} .service-card:hover .card-link span{transform:translateX(3px);} @media (max-width:720px){.services-grid,.services-grid.cols-4,.services-grid.cols-5,.services-grid.cols-2{grid-template-columns:1fr;}} @media (min-width:721px) and (max-width:1000px){.services-grid.cols-4,.services-grid.cols-5{grid-template-columns:repeat(2,1fr);}} /* ---------- Pain points ---------- */ .pain-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:2px; background:var(--line);border:1px solid var(--line); } .pain-card{background:var(--card);padding:32px;transition:transform .3s ease, box-shadow .3s ease;} .pain-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(20,30,35,0.25);} .pain-statement{ font-family:'Manrope',sans-serif;font-weight:700;font-size:18px;line-height:1.4; color:var(--ink);border-left:2px solid var(--brass);padding-left:16px; } .pain-answer{margin-top:16px;color:var(--slate);font-size:15px;line-height:1.6;} .pain-answer strong{color:var(--fjord);} @media (max-width:900px){.pain-grid{grid-template-columns:1fr;}} /* ---------- Toggle (private / gewerblich pain points) ---------- */ .audience-toggle{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:40px;} .audience-toggle button{ font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px; padding:9px 20px;border-radius:999px;border:0;background:none;color:var(--slate);cursor:pointer; transition:background-color .2s ease, color .2s ease; } .audience-toggle button.is-active{background:var(--fjord);color:#fff;} .audience-panel{display:none;} .audience-panel.is-active{display:block;} /* ---------- Process / Pegel ---------- */ .gauge-wrap{position:relative;padding-top:10px;} .gauge-line{position:absolute;top:9px;left:0;right:0;height:2px;background:var(--line);} .gauge-line-fill{position:absolute;top:9px;left:0;height:2px;background:var(--brass);width:0%;transition:width 1.4s ease;} .gauge-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;} .gauge-step{padding-top:34px;position:relative;} .gauge-step::before{ content:attr(data-n); position:absolute;top:-5px;left:0;width:20px;height:20px;border-radius:50%; background:var(--paper);border:2px solid var(--brass); font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink); display:flex;align-items:center;justify-content:center; } .gauge-step h3{font-size:17.5px;font-weight:600;margin-top:4px;} .gauge-step p{color:var(--slate);font-size:15.5px;line-height:1.55;margin-top:8px;} @media (max-width:820px){ .gauge-steps{grid-template-columns:1fr;gap:36px;} .gauge-line,.gauge-line-fill{display:none;} .gauge-step{padding-left:34px;padding-top:0;} .gauge-step::before{top:0;left:0;} } /* ---------- Expansion teaser ---------- */ .expand-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} .expand-card{ border:1px dashed rgba(185,194,196,0.5);border-radius:8px;padding:28px; background:rgba(255,255,255,0.03); transition:transform .3s ease, border-color .3s ease, background-color .3s ease; } .expand-card:hover{transform:translateY(-4px);border-color:var(--brass);background:rgba(255,255,255,0.06);} .expand-card h3{font-size:18px;font-weight:600;color:#F1F0EA;} .expand-card p{font-size:15.5px;line-height:1.55;color:#C7CED0;margin-top:10px;} .expand-status{ font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.1em; text-transform:uppercase;color:var(--brass);margin-top:16px;display:block; } .expand-card .feature-link{ display:inline-flex;align-items:center;gap:6px;margin-top:14px; font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px; color:#F1F0EA;text-decoration:none;border-bottom:1px solid rgba(241,240,234,0.3); } .expand-card .feature-link span{transition:transform .2s ease;} .expand-card .feature-link:hover span{transform:translateX(3px);} @media (max-width:820px){.expand-grid{grid-template-columns:1fr;}} /* ---------- About / feature cards ---------- */ .about-features{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);margin-top:44px;} .about-feature{background:var(--card);padding:32px;border-top:3px solid var(--fjord);transition:transform .3s ease, box-shadow .3s ease;} .about-feature:hover{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(20,30,35,0.28);z-index:2;} .about-feature.brass{border-top-color:var(--brass);} .about-feature.ink{border-top-color:var(--ink);} .about-feature .icon{width:32px;height:32px;color:var(--fjord);margin-bottom:18px;} .about-feature.brass .icon{color:var(--brass);} .about-feature.ink .icon{color:var(--ink);} .about-feature .feature-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--brass);letter-spacing:0.08em;text-transform:uppercase;} .about-feature.ink .feature-tag{color:var(--slate);} .about-feature h3{font-size:19px;font-weight:600;margin-top:8px;} .about-feature p{color:var(--slate);margin-top:12px;font-size:15.5px;line-height:1.6;max-width:none;} .about-feature .feature-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--fjord);text-decoration:none;} .about-feature.brass .feature-link{color:var(--brass);} .about-feature.ink .feature-link{color:var(--ink);} .about-feature .feature-link span{transition:transform .2s ease;} .about-feature .feature-link:hover span{transform:translateX(3px);} @media (max-width:900px){.about-features{grid-template-columns:1fr;}} .about-quickfacts{display:flex;gap:40px;flex-wrap:wrap;margin-top:36px;padding-top:28px;border-top:1px solid var(--line);} .about-quickfacts div{display:flex;gap:10px;font-size:15px;color:var(--slate);max-width:420px;} .about-quickfacts span{color:var(--brass);flex:none;} /* ---------- Einsatzgebiet ---------- */ .region-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:center;} @media (max-width:900px){.region-grid{grid-template-columns:1fr;gap:28px;}} /* ---------- Regional map (schematic node diagram) ---------- */ .region-map-wrap{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;} .region-map{width:100%;height:auto;} .region-map .node-circle{fill:var(--card);stroke:var(--fjord-light);stroke-width:1.6;transition:fill .2s ease, stroke .2s ease;} .region-map .node-city .node-circle{stroke:var(--brass);stroke-width:2;} .region-map a.map-node:hover .node-circle{fill:var(--fjord);stroke:var(--fjord);} .region-map a.map-node:hover .node-label{fill:#fff;} .region-map a.map-node:focus-visible .node-circle{outline:2px solid var(--brass);} .region-map .node-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:var(--ink);transition:fill .2s ease;} .region-map .map-link{stroke:var(--line);stroke-width:1;fill:none;} .region-map .map-caption{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:var(--slate);} /* ---------- Location page: neighbouring municipalities ---------- */ .locality-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;} .locality-list span{ font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--slate); border:1px solid var(--line);border-radius:6px;padding:5px 10px;background:var(--card); } /* ---------- Calculation logic (Preise, no fixed amounts) ---------- */ .calc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);} .calc-card{background:var(--card);padding:30px 32px;} .calc-card .calc-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--brass);letter-spacing:0.08em;} .calc-card h3{font-size:19px;font-weight:600;margin-top:10px;} .calc-card p{color:var(--slate);margin-top:10px;font-size:15.5px;line-height:1.6;max-width:none;} @media (max-width:720px){.calc-grid{grid-template-columns:1fr;}} .calc-note{ margin-top:32px;padding:22px 26px;border-left:3px solid var(--brass); background:var(--card);border-radius:0 8px 8px 0;color:var(--slate);font-size:15.5px;line-height:1.65; } .calc-note strong{color:var(--ink);} /* ---------- FAQ ---------- */ .faq-list{max-width:760px;margin-top:8px;} .faq-list.full{max-width:none;} .faq-item{border-top:1px solid var(--line);} .faq-item:last-child{border-bottom:1px solid var(--line);} .faq-item summary{ cursor:pointer;list-style:none;padding:22px 0; display:flex;justify-content:space-between;align-items:center;gap:16px; font-family:'Manrope',sans-serif;font-weight:700;font-size:17px;color:var(--ink); } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary .faq-plus{ flex:none;width:22px;height:22px;border:1px solid var(--slate);border-radius:50%; position:relative;transition:transform .25s ease, border-color .25s ease; } .faq-item summary .faq-plus::before,.faq-item summary .faq-plus::after{content:"";position:absolute;background:var(--ink);top:50%;left:50%;transform:translate(-50%,-50%);} .faq-item summary .faq-plus::before{width:10px;height:1.4px;} .faq-item summary .faq-plus::after{width:1.4px;height:10px;} .faq-item[open] summary .faq-plus{transform:rotate(45deg);border-color:var(--brass);} .faq-item .faq-answer{padding:0 0 24px;max-width:640px;color:var(--slate);font-size:16px;line-height:1.6;} .faq-list.full .faq-answer{max-width:760px;} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;} .contact-info dt{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--brass);letter-spacing:0.08em;text-transform:uppercase;margin-top:24px;display:flex;align-items:center;gap:8px;} .contact-info dt:first-child{margin-top:0;} .contact-icon{width:15px;height:15px;flex:none;color:var(--brass);} .contact-info dd{margin:6px 0 0;font-size:17px;line-height:1.5;} .contact-info a{text-decoration:none;border-bottom:1px solid var(--line);} .contact-info a:hover{border-color:var(--ink);} form.contact-form{display:flex;flex-direction:column;gap:16px;} .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;} .field label{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--ink);letter-spacing:0;display:block;margin-bottom:6px;} .field input,.field select,.field textarea{ width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--card); font-family:'Inter',sans-serif;font-size:16.5px;color:var(--ink); border-radius:6px;transition:border-color .2s ease, box-shadow .2s ease; } .field textarea{resize:vertical;min-height:110px;} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--fjord);outline:none;box-shadow:0 0 0 3px rgba(20,85,94,0.14);} .submit-btn{ font-family:'Inter',sans-serif;font-weight:600;font-size:15.5px; background:var(--fjord);color:#fff;border:none;padding:13px 24px; cursor:pointer;border-radius:6px;letter-spacing:0;width:fit-content; transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease; } .submit-btn:hover{background:var(--fjord-light);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(20,85,94,0.5);} .form-note{font-size:13.5px;color:var(--slate);margin-top:-4px;} @media (max-width:820px){.contact-grid,.hero-grid{grid-template-columns:1fr;}} /* ---------- Ratgeber / article ---------- */ .article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);} .article-card{background:var(--card);padding:28px;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .3s ease, box-shadow .3s ease;} .article-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(20,30,35,0.28);z-index:2;} .article-card .article-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--brass);letter-spacing:0.08em;text-transform:uppercase;} .article-card h3{font-size:19px;font-weight:600;margin-top:10px;line-height:1.3;} .article-card p{color:var(--slate);margin-top:10px;font-size:15px;line-height:1.6;flex:1;} .article-card .card-link{margin-top:16px;display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--fjord);} .article-card .card-link span{transition:transform .2s ease;} .article-card:hover .card-link span{transform:translateX(3px);} @media (max-width:900px){.article-grid{grid-template-columns:1fr;}} .article-body{max-width:720px;margin:0 auto;padding:8px 28px 40px;} .article-body h2{font-size:26px;margin-top:48px;margin-bottom:4px;} .article-body h3{font-size:20px;margin-top:32px;margin-bottom:4px;} .article-body p{max-width:none;margin-top:16px;color:var(--ink);font-size:17.5px;line-height:1.75;} .article-body ul,.article-body ol{margin-top:16px;padding-left:22px;color:var(--ink);font-size:17.5px;line-height:1.75;} .article-body li{margin-bottom:8px;} .article-body .callout{ margin:32px 0;padding:22px 26px;border-left:3px solid var(--fjord); background:var(--card);border-radius:0 8px 8px 0;font-size:16px;color:var(--slate);line-height:1.65; } .article-meta{ display:flex;gap:18px;flex-wrap:wrap;margin-top:18px; font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--slate); } .article-cta{ margin-top:56px;padding:32px;background:var(--ink);border-radius:10px;color:#fff; } .article-cta h3{color:#fff;font-size:20px;} .article-cta p{color:#C7CED0;margin-top:8px;max-width:none;} .article-cta .btn-primary{margin-top:16px;} /* ---------- Footer ---------- */ footer{background:var(--ink);color:#C7CED0;padding:64px 0 30px;font-size:15px;line-height:1.6;} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;} footer h4{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#F1F0EA;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px;} footer p,footer address{margin:0;line-height:1.7;font-style:normal;} footer a{text-decoration:none;color:#B9C2C4;} footer a:hover{color:#fff;} .footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid #333B44;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#7C8790;} .legal-block{margin-top:40px;padding-top:32px;border-top:1px solid #333B44;} .legal-block h4{margin-bottom:12px;} .legal-links{display:flex;gap:24px;margin-bottom:18px;flex-wrap:wrap;} .legal-links a{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;color:#F1F0EA;text-decoration:none;} .legal-links a span{transition:transform .2s ease;color:var(--brass);} .legal-links a:hover span{transform:translateX(3px);} @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px;}} @media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:30px;}} /* ---------- Legal pages (Impressum/AGB/Datenschutz) ---------- */ .legal-page main{padding:24px 0 90px;} .legal-page .updated{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--slate);margin:8px 0 40px;} .legal-page h2{font-size:20px;margin:40px 0 14px;} .legal-page .card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px 30px;margin-bottom:8px;} .legal-page .card p{margin:0 0 6px;max-width:none;} .legal-page .card p:last-child{margin-bottom:0;} .legal-page .label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--brass);display:block;margin-top:18px;margin-bottom:4px;} .legal-page .label:first-child{margin-top:0;} .legal-page p{max-width:none;}