/* =========================================================================
D&G Sanitär und Heizungstechnik – Design-System
Reihenfolge: 1) Fonts 2) Tokens 3) Reset/Base 4) Layout
5) Typo 6) Komponenten 7) Header 8) Footer 9) Utilities
========================================================================= */
/* ---------- 1) Fonts (lokal, DSGVO-konform) -------------------------------
Die .woff2-Dateien liegen unter /assets/fonts/ (latin-Subset, ~176 KB).
Solange sie fehlen, greifen die Fallback-Stacks in --font-*.
Siehe assets/fonts/README.md.
LADESTRATEGIE (Teil des Design-Systems – bei Änderungen alle Seiten anpassen):
- Jede HTML-Seite preloaded im , VOR diesem Stylesheet, genau zwei
Schnitte – die einzigen, die above the fold sicher gebraucht werden:
`crossorigin` ist Pflicht (Fonts werden immer im CORS-Modus geladen),
auch bei gleichem Origin. Kein preconnect/preload zu Google – 0 Fremdhosts.
- Alle weiteren Schnitte lädt der Browser bei Bedarf über die @font-face-
Regeln unten. `font-display:swap` => Text ist sofort mit Fallback sichtbar.
- .htaccess setzt für *.woff2: font/woff2, 1 Jahr Cache, ACAO:*. */
@font-face{
font-family:'Oswald';
src:url('../fonts/oswald-500.woff2') format('woff2');
font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Oswald';
src:url('../fonts/oswald-600.woff2') format('woff2');
font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Oswald';
src:url('../fonts/oswald-700.woff2') format('woff2');
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Inter';
src:url('../fonts/inter-400.woff2') format('woff2');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Inter';
src:url('../fonts/inter-500.woff2') format('woff2');
font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Inter';
src:url('../fonts/inter-600.woff2') format('woff2');
font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Inter';
src:url('../fonts/inter-700.woff2') format('woff2');
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:'IBM Plex Mono';
src:url('../fonts/ibmplexmono-400.woff2') format('woff2');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'IBM Plex Mono';
src:url('../fonts/ibmplexmono-500.woff2') format('woff2');
font-weight:500; font-style:normal; font-display:swap;
}
/* ---------- 2) Tokens --------------------------------------------------- */
:root{
/* Farben – aus Logo + Beispielseite abgeleitet */
--navy-deep:#122745;
--navy:#1B3A63;
--ice:#5FA8D3;
--ice-pale:#CFE6F4;
--copper:#D5542A; /* kräftiges Orange direkt aus dem Logo-Verlauf */
--copper-light:#E56B34; /* Hover-Aufhellung, gleiche Farbfamilie */
--gold:#F6C300;
--paper:#F5F2EA;
--paper-dim:#EDE9DE;
--ink:#1B2430;
--steel:#586470; /* abgedunkelt ggü. Vorlage -> AA-konform */
--line:rgba(27,36,48,0.12);
--line-dark:rgba(245,242,234,0.16);
--paper-70:rgba(245,242,234,0.72);
--paper-82:rgba(245,242,234,0.85);
/* Fläche & Raster */
--radius:2px;
--wrap:1180px;
--gutter:32px;
/* Typo-Stacks (Fallbacks greifen bis die woff2 vorhanden sind) */
--font-head:'Oswald','Arial Narrow','Roboto Condensed',
'Helvetica Neue',Arial,sans-serif;
--font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',
Roboto,'Helvetica Neue',Arial,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,
'Liberation Mono',monospace;
/* fluid type scale */
--fs-eyebrow:0.78rem;
--fs-body:1rem;
--fs-lead:clamp(1.02rem,1.6vw,1.12rem);
--fs-h3:clamp(1.35rem,2.4vw,1.7rem);
--fs-h2:clamp(1.8rem,3.4vw,2.5rem);
--fs-h1:clamp(2.3rem,5.2vw,4rem);
--section-y:clamp(60px,9vw,96px);
}
/* ---------- 3) Reset / Base ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
::selection{background:var(--copper);color:var(--paper);}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--font-body);
font-size:var(--fs-body);
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
a:not([class]){
color:var(--navy);
text-decoration:underline;
text-underline-offset:2px;
}
a:not([class]):hover{color:var(--copper);}
ul{list-style:none;}
:focus-visible{
outline:2px solid var(--copper);
outline-offset:2px;
border-radius:var(--radius);
}
/* ---------- 4) Layout ---------------------------------------------------- */
.wrap{
width:100%;
max-width:var(--wrap);
margin-inline:auto;
padding-inline:var(--gutter);
}
@media (max-width:640px){ :root{ --gutter:20px; } }
.section{ padding-block:var(--section-y); }
.section--tint{ background:var(--paper-dim); }
.section--dark{ background:var(--navy-deep); color:var(--paper); }
/* Anker nicht unter dem fixierten Header verstecken */
main [id]{ scroll-margin-top:84px; }
.skip-link{
position:absolute;left:8px;top:-48px;z-index:200;
background:var(--navy-deep);color:var(--paper);
padding:10px 16px;font-weight:600;
transition:top .15s ease;
}
.skip-link:focus{ top:8px; }
/* ---------- 5) Typo ---------------------------------------------------- */
h1,h2,h3,h4{
font-family:var(--font-head);
text-transform:uppercase;
letter-spacing:0.02em;
font-weight:600;
line-height:1.08;
color:var(--navy-deep);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4{ color:var(--paper); }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ max-width:64ch; }
.mono{ font-family:var(--font-mono); letter-spacing:0.02em; }
.eyebrow{
font-family:var(--font-mono);
font-size:var(--fs-eyebrow);
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--copper);
display:flex;align-items:center;gap:10px;
margin-bottom:18px;
}
.eyebrow::before{
content:'';width:22px;height:2px;
background:currentColor;display:inline-block;flex-shrink:0;
}
.eyebrow:has(svg)::before{ display:none; }
.eyebrow svg{ flex-shrink:0; }
.section--dark .eyebrow{ color:var(--ice-pale); }
.section-head{ max-width:660px;margin-bottom:48px; }
.section-head p{ color:var(--steel);margin-top:14px;font-size:var(--fs-lead); }
.section--dark .section-head p{ color:var(--paper-70); }
/* ---------- 6) Komponenten ------------------------------------------------ */
/* Buttons */
.btn{
display:inline-flex;align-items:center;gap:10px;
padding:14px 24px;
font-family:var(--font-body);
font-weight:600;font-size:0.92rem;letter-spacing:0.03em;
border:1px solid transparent;border-radius:var(--radius);
cursor:pointer;
transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn svg{ width:16px;height:16px;flex-shrink:0; }
.btn--primary{ background:var(--copper);color:var(--paper); }
.btn--primary:hover{ background:var(--copper-light);transform:translateY(-2px); }
.btn--dark{ background:var(--navy-deep);color:var(--paper); }
.btn--dark:hover{ background:var(--copper);transform:translateY(-2px); }
.btn--ghost{ border-color:rgba(245,242,234,0.4);color:var(--paper); }
.btn--ghost:hover{
border-color:var(--ice);
background:rgba(95,168,211,0.12);
transform:translateY(-2px);
}
.btn--outline{ border-color:var(--navy);color:var(--navy-deep); }
.btn--outline:hover{ background:var(--navy);color:var(--paper); }
.btn:active{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } }
/* Karte */
.card{
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--radius);
padding:34px 32px;
position:relative;
}
.card__accent{
position:absolute;inset:0 auto 0 0;width:4px;
background:var(--copper);
}
.card__accent--navy{ background:var(--navy); }
.card__role{
font-family:var(--font-mono);
font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;
color:var(--steel);margin-bottom:8px;
}
/* Telefon-Link */
.phone{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-mono);font-size:1.05rem;font-weight:500;
color:var(--navy-deep);
padding:10px 0;border-bottom:1px solid var(--line);
transition:color .2s ease;
}
.phone svg{ width:18px;height:18px; }
.phone:hover{ color:var(--copper); }
.section--dark .phone{ color:var(--paper); }
.section--dark .phone{ border-bottom-color:var(--line-dark); }
/* Scroll-Reveal – ohne JS ist alles sofort sichtbar (.js kommt aus head.js) */
.js .reveal{
opacity:0;transform:translateY(18px);
transition:opacity .6s ease,transform .6s ease;
}
.js .reveal.is-in{ opacity:1;transform:none; }
/* Diagonalschnitt */
.diag-cut{ display:block;width:100%;height:clamp(56px,8vw,110px);position:relative;z-index:1; }
/* ---------- 7) Header --------------------------------------------------- */
.site-header{
position:fixed;inset:0 0 auto 0;z-index:100;
background:var(--paper-82);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.site-header__inner{
display:flex;align-items:center;justify-content:space-between;gap:16px;
max-width:var(--wrap);margin-inline:auto;
padding:12px var(--gutter);
}
.brand{ display:flex;align-items:center;gap:12px;flex-shrink:0; }
.brand img{ height:40px;width:auto; }
.brand__fallback{
font-family:var(--font-head);font-weight:700;font-size:1.15rem;
letter-spacing:0.03em;color:var(--navy-deep);
}
.brand__fallback span{ color:var(--copper); }
.site-nav{ display:flex;align-items:center;gap:28px; }
.site-nav a{
font-family:var(--font-body);
font-size:0.82rem;text-transform:uppercase;letter-spacing:0.08em;
font-weight:600;color:var(--navy-deep);
padding:6px 0;border-bottom:2px solid transparent;
transition:border-color .2s ease;
}
.site-nav a:hover{ border-color:var(--copper); }
.site-nav a[aria-current="true"]{ border-color:var(--copper); color:var(--copper); }
/* CTA im Menü behält Button-Farben + eigenes Padding
(sonst überschreibt `.site-nav a { padding:6px 0 }` das Button-Padding
und der Hintergrund klebt am Text) */
.site-nav a.btn{
padding:12px 22px;
color:var(--paper);
border-bottom:1px solid transparent;
letter-spacing:0.03em;
}
.site-nav a.btn:hover,
.site-nav a.btn[aria-current="true"]{ border-color:transparent;color:var(--paper); }
.nav-toggle{
display:none;
width:44px;height:44px;
align-items:center;justify-content:center;
background:transparent;border:1px solid var(--line);border-radius:var(--radius);
cursor:pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
content:'';display:block;width:20px;height:2px;background:var(--navy-deep);
transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle span::before{ transform:translateY(-6px); }
.nav-toggle span::after{ transform:translateY(4px); }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:rotate(-45deg); }
@media (max-width:900px){
.nav-toggle{ display:flex; }
.site-nav{
position:absolute;inset:100% 0 auto 0;
flex-direction:column;align-items:stretch;gap:0;
background:var(--paper);
border-bottom:1px solid var(--line);
padding:8px var(--gutter) 20px;
transform:translateY(-8px);opacity:0;pointer-events:none;
transition:transform .2s ease,opacity .2s ease;
}
.site-nav.is-open{ transform:none;opacity:1;pointer-events:auto; }
.site-nav a{ padding:14px 0;border-bottom:1px solid var(--line); }
.site-nav .btn{ margin-top:14px;justify-content:center; }
}
/* Abstand, damit fixierter Header Inhalt nicht verdeckt */
.page-top{ height:64px; }
/* ---------- 8) Footer --------------------------------------------------- */
.site-footer{
background:var(--navy-deep);
border-top:1px solid var(--line-dark);
color:var(--paper-70);
font-size:0.86rem;
padding-block:36px;
}
.site-footer a{ color:var(--paper-70); }
.site-footer a:hover{ color:var(--copper-light); }
.site-footer__grid{
display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;
}
.site-footer__legal{ display:flex;gap:22px;flex-wrap:wrap; }
.site-footer__legal a{ font-weight:600;color:var(--paper); }
/* ---------- 9) Utilities --------------------------------------------------- */
.visually-hidden{
position:absolute!important;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
white-space:nowrap;border:0;
}
.grid-2{ display:grid;grid-template-columns:repeat(2,1fr);gap:24px; }
.grid-3{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
@media (max-width:760px){
.grid-2,.grid-3{ grid-template-columns:1fr; }
}
/* Fließtext-Seiten (Impressum / Datenschutz) */
.legal{ padding-block:calc(var(--section-y) + 20px) var(--section-y); }
.legal h1{ margin-bottom:32px; }
.legal h2{
font-size:clamp(1.2rem,2.4vw,1.5rem);
margin-top:40px;margin-bottom:12px;
}
.legal h3{ font-size:1.05rem;margin-top:24px;margin-bottom:8px;text-transform:none;letter-spacing:0; }
.legal p,.legal ul{ margin-bottom:14px;max-width:72ch; }
.legal ul{ list-style:disc;padding-left:22px; }
.legal li{ margin-bottom:6px; }
.legal .todo{
background:#FBEFD9;border-left:3px solid var(--copper);
padding:2px 6px;font-family:var(--font-mono);font-size:0.85em;
}
/* ---------- 10) Sektions-Komponenten ---------------------------------- */
/* Hero */
.hero{
position:relative;
padding-top:clamp(44px,7vw,84px);
overflow:hidden;
background:
radial-gradient(58% 68% at 82% 38%, rgba(95,168,211,0.20), transparent 70%),
radial-gradient(46% 60% at 10% 96%, rgba(193,98,42,0.15), transparent 70%),
var(--navy-deep);
}
.hero__inner{
display:grid;grid-template-columns:1.15fr 0.85fr;gap:40px;align-items:center;
padding-bottom:clamp(44px,8vw,88px);
}
.hero h1{ margin-top:2px; }
.hero__lead{ font-size:var(--fs-lead);color:var(--paper-82);margin:22px 0 30px; }
.hero__actions{ display:flex;gap:14px;flex-wrap:wrap; }
.hero__visual{ position:relative;display:flex;justify-content:center; }
.hero__visual::before{
content:'';position:absolute;top:50%;left:50%;
width:78%;aspect-ratio:1;border-radius:50%;
transform:translate(-50%,-50%);
background:radial-gradient(circle, rgba(143,203,234,0.28), transparent 68%);
filter:blur(18px);
}
.hero__visual svg,
.hero__visual img{ position:relative;width:min(340px,78vw);height:auto; }
@media (max-width:900px){
.hero__inner{ grid-template-columns:1fr; }
.hero__visual{ order:-1; }
.hero__visual svg,
.hero__visual img{ width:min(200px,48vw); }
}
@media (max-width:480px){
.hero__actions{ flex-direction:column;align-items:stretch; }
.hero__actions .btn{ justify-content:center; }
}
/* Trust-Strip */
.trust-strip{ background:var(--navy);color:var(--paper); }
.trust-strip__inner{ display:flex;flex-wrap:wrap;padding-inline:0; }
.trust-item{
flex:1 1 220px;padding:22px 28px;
border-right:1px solid var(--line-dark);
display:flex;flex-direction:column;gap:2px;
}
.trust-item:last-child{ border-right:none; }
.trust-item__num{ font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:var(--ice-pale); }
.trust-item__lbl{ font-size:0.82rem;color:var(--paper-70); }
@media (max-width:760px){
.trust-item{ flex-basis:50%;border-bottom:1px solid var(--line-dark); }
.trust-item:nth-child(2n){ border-right:none; }
}
/* Leistungen */
.services{
display:grid;grid-template-columns:1fr 1fr;gap:1px;
background:var(--line);border:1px solid var(--line);
}
@media (max-width:760px){ .services{ grid-template-columns:1fr; } }
.service{ background:var(--paper);padding:40px 36px; }
.service--heat{ background:#FBF1E9; }
.service__tag{
font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;
letter-spacing:0.12em;color:var(--steel);display:block;margin-bottom:10px;
}
.service h3{ display:flex;align-items:center;gap:12px;margin-bottom:20px; }
.service h3 svg{ width:28px;height:28px;flex-shrink:0; }
.ticks li{
padding:12px 0;border-top:1px solid var(--line);
display:flex;gap:12px;align-items:flex-start;font-size:0.98rem;
}
.ticks li:first-child{ border-top:none; }
.ticks li::before{ content:'—';color:var(--copper);font-weight:600;flex-shrink:0; }
.service--heat .ticks li::before{ color:var(--navy); }
/* Ablauf */
.steps{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);list-style:none;
counter-reset:step;
}
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--paper-dim);padding:32px 26px; }
.step__num{ font-family:var(--font-head);font-weight:700;font-size:1.1rem;color:var(--copper); }
.step h3{ font-size:1.05rem;text-transform:none;letter-spacing:0;margin:10px 0 8px; }
.step p{ color:var(--steel);font-size:0.94rem; }
/* Warum */
.why{ display:grid;grid-template-columns:0.8fr 1.2fr;gap:48px;align-items:start; }
@media (min-width:861px){ .why__intro{ position:sticky;top:96px; } }
@media (max-width:860px){ .why{ grid-template-columns:1fr;gap:32px; } }
.why__list{ display:flex;flex-direction:column;gap:24px; }
.why__item{ display:flex;gap:18px; }
.why__mark{ font-family:var(--font-head);font-weight:700;font-size:1.1rem;color:var(--copper);flex-shrink:0;width:34px; }
.why__item h3{ font-size:1.05rem;text-transform:none;letter-spacing:0;margin-bottom:6px; }
.why__item p{ color:var(--steel);font-size:0.95rem; }
/* Tags */
.tags{ display:flex;flex-wrap:wrap;gap:10px; }
.tags li{
font-family:var(--font-mono);font-size:0.85rem;
border:1px solid var(--line);padding:8px 14px;border-radius:var(--radius);
display:flex;align-items:center;gap:8px;
}
.tags li::before{
content:'';width:6px;height:6px;background:var(--ice);border-radius:50%;flex-shrink:0;
}
/* FAQ */
.faq{ display:grid;gap:2px;background:var(--line);border:1px solid var(--line); }
.faq details{ background:var(--paper); }
.faq summary{
cursor:pointer;list-style:none;position:relative;
padding:22px 56px 22px 28px;
font-family:var(--font-head);text-transform:uppercase;letter-spacing:0.02em;
font-size:1.02rem;color:var(--navy-deep);
transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
content:'+';position:absolute;right:24px;top:50%;transform:translateY(-50%);
font-family:var(--font-body);font-size:1.5rem;line-height:1;color:var(--copper);
}
.faq details[open] summary::after{ content:'\2013'; }
.faq summary:hover{ color:var(--copper); }
.faq details > p{ margin:0;padding:0 28px 24px;color:var(--steel);max-width:70ch; }
/* Kontakt */
.contact{
display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
background:var(--line-dark);border:1px solid var(--line-dark);
}
.contact__cell{ background:var(--navy);padding:32px; }
.contact__lbl{
font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;
letter-spacing:0.1em;color:var(--ice-pale);margin-bottom:10px;
}
.contact__val{ font-size:1.06rem;font-weight:500;display:block;color:var(--paper); }
a.contact__val:hover{ color:var(--copper-light); }
.contact__name{
font-size:0.82rem;font-weight:600;color:var(--ice-pale);
margin-bottom:2px;
}
.contact__name + .contact__val{ margin-bottom:0; }
.contact__val + .contact__name{ margin-top:14px; }
.contact__cell a:not(.contact__val){ color:var(--paper-70);font-size:0.85rem;display:inline-block;margin-top:10px; }
/* Brand-Logo auf kleinen Screens kleiner */
@media (max-width:520px){ .brand img{ height:32px; } }
/* Footer-Zusatzspalten */
.site-footer__contact{ display:flex;flex-wrap:wrap;gap:8px 36px; }
.site-footer__person{ display:flex;flex-direction:column;gap:3px; }
.site-footer__name{
font-family:var(--font-mono);font-size:0.72rem;
text-transform:uppercase;letter-spacing:0.12em;color:var(--paper-70);
margin-bottom:2px;
}
.site-footer__contact a{ color:var(--paper);font-weight:600; }
.to-top{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-mono);font-size:0.78rem;text-transform:uppercase;letter-spacing:0.1em;
}
.to-top::before{ content:'\2191';font-size:1rem; }
/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
*{ transition:none!important;scroll-behavior:auto!important;animation:none!important; }
.js .reveal{ opacity:1;transform:none; }
}
/* ---------- Print (v. a. Impressum / Datenschutz) --------------------- */
@media print{
.site-header,.site-footer,.skip-link,.nav-toggle,.page-top,.diag-cut{ display:none!important; }
body{ background:#fff;color:#000;font-size:11pt;line-height:1.45; }
.legal{ padding:0;max-width:none; }
.legal h1,.legal h2,.legal h3{ color:#000; }
.legal .todo{ background:none;border:0;padding:0;font-family:inherit;font-size:inherit; }
a{ color:#000;text-decoration:underline; }
a[href^="http"]::after{ content:" (" attr(href) ")";font-size:0.85em;word-break:break-all; }
main [id]{ scroll-margin-top:0; }
}