@font-face { font-family: 'BrownLLWeb'; src: url('fonts/BrownLLWeb-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'BrownLLWeb'; src: url('fonts/BrownLLWeb-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root{ --eco: #33cc99; --eco-bright: #33cc99; --eco-dark: #33cc99; --eco-deep: #004f46; --hero-from: #006553; --hero-to: #00a477; --page: #f4f7f6; --card: #ffffff; --line: #e4eae7; --line-2: #d3ddd8; --ink: #16241f; --body: #212529; --muted: #6c7b75; --tile: #e6f4ee; --callout-bg:#eef4ee; --callout-bd:#dbe7dd; --r: 14px; --r-sm: 9px; --maxw: 1140px; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0; font-family:'BrownLLWeb',system-ui,sans-serif; color:var(--body); background:var(--page); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} /* ---------- Language toggle (DE / FR) ---------- */ /* Design is authored once; only the words are duplicated inline. A [data-lang] element is shown only when matches it. */ [data-lang]{display:none !important;} html[lang="de"] [data-lang="de"], html[lang="fr"] [data-lang="fr"]{display:revert !important;} .lang-switch{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--card);} .lang-switch button{ appearance:none;border:0;background:transparent;cursor:pointer; font:inherit;font-size:13px;font-weight:700;letter-spacing:.02em; color:var(--muted);padding:7px 15px;line-height:1;transition:background .15s ease,color .15s ease; } .lang-switch button+button{border-left:1px solid var(--line-2);} .lang-switch button[aria-pressed="true"]{background:var(--eco-deep);color:#fff;} .lang-switch button[aria-pressed="false"]:hover{color:var(--ink);} /* ---------- Header ---------- */ .site-header{ background:var(--card); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:20; } .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;} .brand{display:inline-flex;align-items:center;gap:11px;} .brand img{display:block;height:34px;width:auto;} /* ---------- Hero ---------- */ .hero{ background:linear-gradient(110deg,var(--hero-from) 0%,var(--hero-to) 100%); color:#fff;position:relative;overflow:hidden; } .hero::after{ content:"";position:absolute;inset:0; background:radial-gradient(820px 360px at 78% -10%, rgba(255,255,255,.14), transparent 60%); pointer-events:none; } .hero .wrap{padding-top:72px;padding-bottom:76px;text-align:center;position:relative;z-index:1;} .hero h1{ font-size:clamp(34px,5vw,54px); font-weight:800;letter-spacing:-0.025em;line-height:1.05; margin:0 auto;color:#fff;max-width:18ch; } html[lang="fr"] .hero h1{max-width:24ch;} .hero p{ margin:20px auto 0;max-width:62ch; font-size:clamp(16px,1.5vw,19px);font-weight:500; color:rgba(255,255,255,.92);line-height:1.5; } /* ---------- Sections ---------- */ main{padding:8px 0 8px;} .section{margin-top:54px;} .section:first-child{margin-top:42px;} .section-head{margin-bottom:22px;} .section-head h2{ font-size:24px;font-weight:700;color:var(--ink); letter-spacing:-0.02em;line-height:1.2;margin:0 0 14px; } .section-head .rule{height:1px;background:var(--line-2);} /* ---------- Card grid ---------- */ .grid{display:grid;gap:20px;} .grid.cols-3{grid-template-columns:repeat(3,1fr);} .grid.cols-2{grid-template-columns:repeat(2,1fr);} .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px 24px 22px; display:flex;flex-direction:column; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; } .card:hover{ border-color:var(--line-2); box-shadow:0 12px 28px -18px rgba(13,40,30,.30); transform:translateY(-2px); } .card .icon{ width:44px;height:44px;border-radius:11px; background:var(--tile);color:var(--eco-dark); display:inline-flex;align-items:center;justify-content:center; margin-bottom:16px;flex:none; } .card .icon svg{width:22px;height:22px;stroke-width:1.9;} .card .title-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px;} .card h3{font-size:21px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-0.015em;line-height:1.2;} .card p{margin:0 0 18px;font-size:15px;line-height:1.55;color:var(--body);text-wrap:pretty;} .excel-badge{ font-size:10.5px;font-weight:700;letter-spacing:.06em; color:#1f7a4d;background:#e3f3ea;border:1px solid #c7e6d4; padding:2px 7px;border-radius:5px;line-height:1.4; } .card .foot{ margin-top:auto;padding-top:18px;border-top:1px solid var(--line); } .action{ display:inline-flex;align-items:center;gap:7px;white-space:nowrap; font-size:14.5px;font-weight:700;color:var(--eco-dark); transition:gap .16s ease,color .16s ease; } .action svg{width:17px;height:17px;stroke-width:2.1;} .card:hover .action{color:var(--eco);} .card:hover .action .arrow{transform:translateX(3px);} .action .arrow{transition:transform .16s ease;display:inline-flex;} /* featured / single wide card keeps identical vertical anatomy */ .card.featured{max-width:none;} .card.featured p{max-width:78ch;} /* ---------- Unified callout (Tipp / Planerteam) ---------- */ .callout{ display:flex;gap:15px;align-items:flex-start; background:var(--callout-bg);border:1px solid var(--callout-bd); border-radius:var(--r);padding:18px 20px;margin-top:20px; } .callout .c-ic{ width:36px;height:36px;border-radius:9px;flex:none; background:#fff;border:1px solid var(--callout-bd);color:var(--eco-dark); display:flex;align-items:center;justify-content:center; } .callout .c-ic svg{width:19px;height:19px;stroke-width:1.9;} .callout p{margin:0;font-size:15px;line-height:1.6;color:#3c4a44;text-wrap:pretty;} .callout strong{color:var(--ink);font-weight:700;} /* ---------- FR-only language hint ---------- */ .notice{ display:flex;align-items:center;gap:9px;justify-content:center; width:fit-content;max-width:100%;margin:28px auto 0; padding:10px 18px;border-radius:999px; background:#fdf4e3;border:1px solid #f0e2c0;color:#866320; font-size:13.5px;font-weight:600;line-height:1.4;white-space:nowrap; } .notice svg{width:17px;height:17px;stroke-width:1.9;flex:none;} /* ---------- Footer ---------- */ .site-footer{background:var(--eco-deep);color:rgba(255,255,255,.84);margin-top:60px;} .site-footer .wrap{padding:24px 28px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;} .site-footer p{margin:0;font-size:13px;line-height:1.55;max-width:88ch;} .site-footer .contact b{color:#fff;font-weight:700;} .site-footer a{color:var(--eco-bright);font-weight:600;border-bottom:1px solid rgba(0,195,137,.4);} .site-footer a:hover{color:#fff;border-color:#fff;} /* ---------- Responsive ---------- */ @media (max-width:880px){ .grid.cols-3{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .wrap{padding:0 18px;} .grid.cols-3,.grid.cols-2{grid-template-columns:1fr;} .notice{white-space:normal;text-align:center;} }