/* Leitwerk FM — shared stylesheet Tokens: Ink #17232E, Body #3D4A56, Muted #5C6C7C, Accent #4F6479, Gold #AF8A49 Fonts: Space Grotesk (headings/UI), Public Sans (body) — loaded via Google Fonts in each page's Icons: Material Symbols Outlined — loaded the same way, used via icon_name */ :root{ --ink:#17232E; --body:#3D4A56; --muted:#5C6C7C; --line:#D8DCE1; --bg:#F4F5F7; --bg-alt:#EBEEF1; --card:#FFFFFF; --accent:#4F6479; --gold:#AF8A49; --gold-light:#D2B27C; --focus-ring:#AF8A49; } *{box-sizing:border-box} html,body{margin:0;padding:0} a,button,.card,.tag,.icon-badge{transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px; } @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important} } body{ background:var(--bg); color:var(--body); font-family:'Public Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; } h1,h2,h3{ font-family:'Space Grotesk',system-ui,sans-serif; color:var(--ink); margin:0; letter-spacing:-0.01em; } a{text-decoration:none;color:inherit} p{margin:0} label{font-size:13px;font-weight:600;color:var(--ink);display:block;margin-bottom:6px} input,textarea{ width:100%; font-family:'Public Sans',system-ui,sans-serif; font-size:14px; padding:12px 14px; border:1px solid var(--line); border-radius:2px; background:#fff; color:var(--ink); } .eyebrow{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); } .container{max-width:1160px;margin:0 auto;padding:0 40px} .btn-primary{ display:inline-flex;align-items:center;gap:8px; background:var(--ink);color:#fff; font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:14px;letter-spacing:0.02em; padding:14px 26px;border-radius:2px;border:1px solid var(--ink); cursor:pointer; } .btn-primary:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)} .btn-primary.btn-sm{padding:11px 20px;font-size:13px} .btn-secondary{ display:inline-flex;align-items:center;gap:8px; background:transparent;color:var(--ink); font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:14px;letter-spacing:0.02em; padding:14px 26px;border-radius:2px;border:1px solid var(--line); } .btn-secondary:hover{border-color:var(--gold);color:var(--gold)} .card{background:var(--card);border:1px solid var(--line);border-radius:2px} a.card:hover,.card.hoverable:hover{border-color:var(--gold);box-shadow:0 6px 20px rgba(23,35,46,0.08);transform:translateY(-2px)} .msi{ font-family:'Material Symbols Outlined'; font-weight:normal;font-style:normal;font-size:22px;line-height:1; display:inline-block; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; -webkit-font-smoothing:antialiased; } .icon-badge{ width:44px;height:44px;border-radius:2px; display:flex;align-items:center;justify-content:center;flex:none; } ul.plain{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px} ul.plain li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6;color:var(--body)} ul.plain li .dot{width:18px;height:18px;flex:none;font-size:18px} ul.compact{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} ul.compact li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--body)} ul.compact li .dot{width:15px;height:15px;flex:none;font-size:15px;margin-top:2px} .hero-photo{ position:relative; background-image:url('hero-facade.jpg'); background-size:cover; background-position:center 35%; isolation:isolate; } .hero-photo::before{ content:''; position:absolute;inset:0;z-index:0; background:linear-gradient(100deg, rgba(15,23,32,0.95) 0%, rgba(15,23,32,0.88) 38%, rgba(15,23,32,0.62) 70%, rgba(15,23,32,0.4) 100%); } .hero-photo > .container{position:relative;z-index:1} /* header / footer */ .site-header{width:100%;border-bottom:1px solid var(--line);background:var(--bg)} .header-inner{display:flex;align-items:center;justify-content:space-between;height:88px} .logo{height:40px;width:auto;display:block} .nav-links{display:flex;align-items:center;gap:28px} .nav-link{font-size:14px;font-weight:500;color:var(--body);position:relative} .nav-link::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--gold);transition:right .2s ease} .nav-link:hover{color:var(--ink)} .nav-link:hover::after{right:0} .nav-toggle{display:none;align-items:center;justify-content:center;background:none;border:none;padding:6px;cursor:pointer;color:var(--ink)} .nav-toggle .msi{font-size:28px} .mobile-nav{display:none;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line)} .mobile-nav.open{display:flex} .mobile-nav a{padding:16px 24px;font-size:15px;font-weight:500;color:var(--body);border-top:1px solid var(--line)} .mobile-nav a:hover{background:var(--bg-alt);color:var(--ink)} .mobile-nav a.btn-primary{margin:16px 24px 20px 24px;justify-content:center;border-top:none;color:#fff} .mobile-nav a.btn-primary:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)} .site-footer{width:100%;background:var(--ink);padding:40px 0} .footer-simple{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px} .footer-simple .copy{font-size:13px;color:#6E7C8A} .footer-simple a{font-size:13px;color:#C7CFD6} .site-footer.full{padding:56px 0 32px 0} .footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px} .footer-brand{display:flex;flex-direction:column;gap:16px;max-width:320px} .footer-brand img{height:40px;width:auto;align-self:flex-start} .footer-brand p{font-size:13px;line-height:1.6;color:#93A0AD} .footer-cols{display:flex;gap:64px;flex-wrap:wrap} .footer-col{display:flex;flex-direction:column;gap:10px} .footer-col .head{font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#6E7C8A} .footer-col a{font-size:14px;color:#C7CFD6} .footer-col a:hover,.footer-simple a:hover{color:var(--gold-light)} .footer-legal-links a:hover{color:var(--gold-light)} .footer-bottom{border-top:1px solid #2A3A48;padding-top:24px;font-size:13px;color:#6E7C8A;margin-top:40px} .footer-bottom.footer-legal{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px} .footer-legal-links{display:flex;gap:20px} .footer-legal-links a{font-size:13px;color:#93A0AD} .notice-box{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;background:#FBF3E4;border:1px solid #E9D8B4;border-radius:2px} .notice-box .msi{color:#9C7A2E;font-size:20px;flex:none;margin-top:1px} .notice-box p{font-size:13.5px;line-height:1.6;color:#6B5A2E;margin:0} /* grids */ .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .grid-2 > *{background:var(--card)} .grid-2.gapped{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;background:none;border:none} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .grid-3.tiled{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .grid-3.tiled > *{background:var(--card)} .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .grid-4 > *{background:var(--card)} .grid-2 > a:hover,.grid-3.tiled > a:hover,.grid-4 > a:hover{background:var(--bg-alt);position:relative;z-index:1;box-shadow:inset 3px 0 0 var(--gold)} .two-col{display:flex;gap:64px} .two-col > *{flex:1 1 0} .steps-row{display:flex;gap:20px;flex-wrap:wrap} .tag-row{display:flex;flex-wrap:wrap;gap:12px} .tag{padding:10px 18px;font-size:14px;font-weight:500;color:var(--ink)} .tag.iconed{display:flex;align-items:center;gap:10px} a.tag:hover{border-color:var(--gold);color:var(--gold-dark, var(--ink));box-shadow:0 0 0 1px var(--gold) inset} .link-arrow{font-size:12px;font-weight:600;color:var(--gold);display:inline-flex;align-items:center;gap:4px} .link-arrow:hover{color:var(--ink)} /* accordion (FAQ) */ .accordion{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden} .accordion-item{background:var(--card)} .accordion-item summary{ list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px; font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:16px;color:var(--ink); } .accordion-item summary::-webkit-details-marker{display:none} .accordion-item summary .msi{color:var(--gold);transition:transform .2s ease;flex:none} .accordion-item[open] summary .msi{transform:rotate(45deg)} .accordion-item summary:hover{color:var(--gold)} .accordion-item .accordion-body{padding:0 24px 22px 24px;font-size:15px;line-height:1.65;color:var(--body)} /* stat bar */ .stat-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .stat-item{background:var(--card);padding:32px 28px;display:flex;flex-direction:column;gap:6px} .stat-item .num{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:40px;color:var(--gold);line-height:1} .stat-item .label{font-size:14px;color:var(--body)} /* timeline (horizontal, for dark sections) */ .timeline{position:relative;display:flex;gap:20px;flex-wrap:wrap} .timeline::before{content:'';position:absolute;top:15px;left:0;right:0;height:2px;background:rgba(255,255,255,0.16)} .timeline-item{position:relative;flex:1 1 0;min-width:180px;display:flex;flex-direction:column;gap:12px;padding-top:44px} .timeline-dot{position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:13px;z-index:1} /* timeline (vertical, for light cards) */ .timeline-v{position:relative;display:flex;flex-direction:column} .timeline-v::before{content:'';position:absolute;top:26px;bottom:26px;left:25px;width:2px;background:var(--line)} .timeline-v .row{position:relative} .timeline-v .timeline-dot{position:static;box-shadow:0 0 0 6px var(--card)} /* traffic-light (Ampel) indicator */ .ampel{display:flex;gap:8px;align-items:center} .ampel span{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--line)} .ampel.gruen span:nth-child(1){background:#3FA35C} .ampel.gelb span:nth-child(1),.ampel.gelb span:nth-child(2){background:#E0A82E} .ampel.rot span{background:#D14343} /* bento: one large tile + stacked small tiles */ .bento-split{display:flex;gap:16px;align-items:stretch} .bento-split .b-main{flex:1.15;display:flex} .bento-split .b-side{flex:1;display:flex;flex-direction:column;gap:16px} .bento-split .b-side .card{flex:1} @media (max-width:980px){ .bento-split{flex-direction:column} } /* bento grid */ .bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:16px} .bento .b-large{grid-column:span 2;grid-row:span 2} .bento .b-wide{grid-column:span 2} .bento-tile{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:28px;display:flex;flex-direction:column;gap:12px;justify-content:flex-end} .bento-tile.dark{ background:var(--ink);border-color:var(--ink);position:relative;overflow:hidden;min-height:340px; } .bento-tile.dark::before{ content:'';position:absolute;top:-40px;right:-40px;width:260px;height:340px; background:url('signet-white.png') no-repeat center / contain; opacity:0.07;transform:rotate(8deg);pointer-events:none; } .bento-tile.dark > *{position:relative;z-index:1} .bento-tile.dark h3,.bento-tile.dark p{color:#fff} .bento-tile.dark p{color:#B7C1CB} /* related services */ .related-links{display:flex;flex-wrap:wrap;gap:10px} .related-links a{padding:9px 16px;font-size:13px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:2px;display:inline-flex;align-items:center;gap:6px} .related-links a:hover{border-color:var(--gold);color:var(--gold)} .related-links a .msi{font-size:16px} @media (max-width:980px){ .stat-bar{grid-template-columns:1fr} .timeline{flex-direction:column;gap:0} .timeline::before{top:0;bottom:0;left:15px;right:auto;width:2px;height:auto} .timeline-item{padding-top:0;padding-left:48px;padding-bottom:28px;min-width:0} .timeline-item .timeline-dot{top:0;left:0} .bento{grid-template-columns:1fr} .bento .b-large,.bento .b-wide{grid-column:span 1} .grid-2,.grid-2.gapped,.grid-3,.grid-3.tiled,.grid-4{grid-template-columns:1fr !important} .nav-links{display:none !important} .nav-toggle{display:inline-flex !important} h1{font-size:30px !important} .container{padding:0 24px} .two-col{flex-direction:column !important} .steps-row{flex-direction:column !important} .row{flex-direction:column !important} }