/* Meisterbetrieb Fliesen Hofbauer — eigenes Stylesheet. Keine externen Fonts/CDNs: die CSP erlaubt nur 'self', der Type-Stack faellt also auf die UI-Schrift des Systems zurueck. Aufbau: Tokens -> Grundlagen -> Header -> Buttons -> Hero -> Sektionen -> Bausteine (Karten, Marken, Galerie, FAQ, Kontakt, CTA) -> Footer -> Responsive. Bewusst schlank gehalten: es gibt nur die Klassen, die build_site.py auch ausgibt. (Die Vorlage kam von der ack-Seite und schleppte Shop-, Tabellen- und Prozess-Regeln mit, die diese Seite nie benutzt hat.) */ :root { /* Aus dem Logo gemessen: dunkles Markenrot #700000 und das helle #e01020 der Mosaiksteine. Flaechen mit weisser Schrift nehmen das dunkle Rot. */ --accent: #8e1014; --accent-deep: #7a0d11; --radius: 14px; --radius-sm: 10px; --maxw: 1140px; --gutter: clamp(20px, 4vw, 40px); --section: clamp(56px, 8vw, 104px); --shadow: 0 1px 2px rgba(24, 16, 14, .05), 0 12px 32px -20px rgba(24, 16, 14, .28); --ease: cubic-bezier(.22, .61, .36, 1); --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Hell ist die Voreinstellung (Bad und Fliesen wirken hell) — anders als bei den Schwester-Seiten. theme.js schreibt data-theme auf . */ :root, :root[data-theme="light"] { --bg: #faf8f7; --bg-2: #f2edea; /* getoente Sektion */ --surface: #ffffff; --line: #e4dcd8; --line-strong: #cfc4bf; --text: #1b1614; --text-dim: #5c5350; --text-faint: #857a75; --img-bg: #ece8e5; --accent: #8e1014; /* auf Weiss braucht das Rot Tiefe (Kontrast >= 4.5:1) */ --accent-deep: #7a0d11; } :root[data-theme="dark"] { --bg: #17130f; --bg-2: #1e1916; --surface: #221d19; --line: #352e29; --line-strong: #4a413b; --text: #f4efec; --text-dim: #bcb0a9; --text-faint: #8e817a; --img-bg: #1c1815; --accent: #ef7b80; --accent-deep: #8e1014; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; /* clip statt hidden: verhindert seitliches Scrollen, ohne position:sticky im Header zu brechen. */ overflow-x: clip; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* height:auto ist Pflicht, nicht Kosmetik: die width/height-Attribute im Markup (fuer CLS) wirken als CSS-Hoehe. Ohne diese Zeile bleibt ein Bild bei 900x600 im Attribut und 500px Spaltenbreite 600px hoch — das Ueber-uns-Foto war dadurch um ein Fuenftel in die Hoehe gezogen. Regeln mit eigener Hoehe (Karten, Galerie) ueberschreiben das weiter unten. */ img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; /* Deutsche Komposita („Datenschutzerklaerung", „Fliesenverlegung") sind laenger als ein 320px-Display: notfalls umbrechen, statt die Seite seitlich scrollen zu lassen. */ overflow-wrap: break-word; } h1 { font-size: clamp(1.85rem, 4.6vw, 3.2rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); } h3 { font-size: 1.18rem; line-height: 1.3; } p { margin: 0 0 1em; } /* Die Textspalte bleibt lesbar, egal wie breit der Container ist. */ .lead { font-size: clamp(1.06rem, 1.5vw, 1.2rem); color: var(--text-dim); max-width: 56ch; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .kicker { font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--accent-deep); color: #fff; padding: 12px 18px; z-index: 999; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; } .skip:focus { left: 0; } :where(a, button, summary, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ------------------------------------------------------------------ header */ .top { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .top-inner { position: relative; /* Bezugsrahmen fuer das mobile Nav-Panel */ display: flex; align-items: center; gap: 16px; min-height: 70px; } /* Zwei Logofassungen: die dunkelrote Wortmarke braucht auf dunklem Grund eine aufgehellte Datei (siehe build_site.py). */ .brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; } .brand img { height: 42px; width: auto; flex: none; } :root[data-theme="dark"] .logo-light { display: none; } :root:not([data-theme="dark"]) .logo-dark { display: none; } .nav { display: flex; align-items: center; gap: 2px; } .nav a { position: relative; text-decoration: none; color: var(--text-dim); padding: 8px 12px; border-radius: 8px; font-size: .95rem; font-weight: 600; white-space: nowrap; transition: color .18s var(--ease); } .nav a:hover { color: var(--text); } .nav a[aria-current] { color: var(--text); } .nav a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--accent); border-radius: 2px; } .top-actions { display: flex; align-items: center; gap: 8px; } .icon-btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; transition: color .18s var(--ease), border-color .18s var(--ease); } .icon-btn:hover { color: var(--text); border-color: var(--line-strong); } .icon-btn svg { width: 19px; height: 19px; } /* Ein Icon je Theme; JS kippt nur data-theme. */ :root[data-theme="dark"] .i-moon { display: none; } :root:not([data-theme="dark"]) .i-sun { display: none; } .nav-toggle { display: none; } /* ------------------------------------------------------------------ buttons */ .btn { --btn-bg: var(--accent-deep); --btn-fg: #ffffff; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border: 1px solid transparent; border-radius: 11px; background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: 700; font-size: .98rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .btn:hover { box-shadow: 0 8px 22px -12px rgba(122, 13, 17, .8); } .btn svg { width: 18px; height: 18px; flex: none; } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--line-strong); } .btn-ghost:hover { box-shadow: none; border-color: var(--accent); color: var(--accent); } .btn-sm { padding: 9px 15px; font-size: .9rem; border-radius: 9px; } /* ------------------------------------------------------------------ hero */ .hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 11vw, 132px) 0 clamp(56px, 9vw, 112px); } .hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; } .hero::before { background: url("img/hero.webp") center 60% / cover no-repeat; } /* Zwei Verlaeufe: einer von links (haelt die Textspalte lesbar, egal welches Motiv dahinter liegt), einer nach unten (Uebergang in die Seitenfarbe). Feste Schwarzwerte, KEINE Theme-Variablen — der Text darauf ist immer weiss. */ .hero::after { background: linear-gradient(96deg, rgba(14, 10, 9, .86) 0%, rgba(14, 10, 9, .78) 26%, rgba(14, 10, 9, .62) 48%, rgba(14, 10, 9, .44) 68%, rgba(14, 10, 9, .3) 85%, rgba(14, 10, 9, .26) 100%), linear-gradient(180deg, rgba(14, 10, 9, .3) 0%, rgba(14, 10, 9, .08) 40%, rgba(14, 10, 9, .4) 100%); } .hero-inner { max-width: 720px; } .hero h1 { color: #fff; max-width: 20ch; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); } .hero .lead { color: #f0e9e6; max-width: 50ch; margin-bottom: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 7px 15px; border-radius: 999px; /* Liegt in BEIDEN Themes auf dem dunklen Scrim -> feste Farben. */ color: #ffc9cb; background: rgba(12, 8, 7, .55); border: 1px solid rgba(255, 201, 203, .38); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #e8535a; box-shadow: 0 0 0 4px rgba(232, 83, 90, .25); } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* Der Ghost-Button steht hier auf dem dunklen Scrim, nicht auf der Seitenfarbe: ohne diese Ausnahme waere die Schrift im Hellmodus fast unsichtbar. */ .hero .btn-ghost, .page-hero.has-img .btn-ghost { --btn-fg: #ffffff; --btn-bg: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); backdrop-filter: blur(4px); } .hero .btn-ghost:hover, .page-hero.has-img .btn-ghost:hover { --btn-bg: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; } /* Faktenzeile — eigener Streifen UNTER dem Hero (nicht als Karte darin): dadurch liegt der Text nie halb auf dem Foto und stapelt auf dem Handy sauber. */ .factbar { background: var(--surface); border-bottom: 1px solid var(--line); } .stats { list-style: none; margin: 0; padding: 0; display: grid; /* Genau vier Spalten — factbar() bekommt bewusst vier kurze Paare je Seite. Bei fuenf wurden die Spalten so schmal, dass die Werte mitten im Wort brachen. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px clamp(18px, 3vw, 34px); } .stat { min-width: 0; /* sonst sprengen lange Woerter die Spalte */ padding: clamp(20px, 3vw, 30px) 0; } .stat + .stat { border-left: 1px solid var(--line); padding-left: clamp(18px, 3vw, 34px); } .stat b { display: block; font-size: clamp(1.05rem, 1.7vw, 1.35rem); letter-spacing: -.02em; color: var(--text); overflow-wrap: anywhere; } .stat span { font-size: .88rem; color: var(--text-dim); } /* ------------------------------------------------------------------ sections */ /* Nur getoente Baender trennen — keine Linie zwischen allen Sektionen mehr. Der Rhythmus kommt aus dem Abstand, das ist ruhiger zu lesen. */ section { padding: var(--section) 0; } .section-alt { background: var(--bg-2); } .head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 44px); } .head p { color: var(--text-dim); margin-bottom: 0; } .head h2 { margin-bottom: .35em; } /* ------------------------------------------------------------------ cards */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(16px, 2vw, 24px); } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; box-shadow: var(--shadow); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .card:hover { border-color: var(--accent); box-shadow: 0 14px 34px -22px rgba(24, 16, 14, .5); } .card-media { aspect-ratio: 4 / 3; background: var(--img-bg); overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; } .card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .card-body h3 { margin-bottom: .4em; } .card-body p { color: var(--text-dim); font-size: .96rem; margin-bottom: 18px; } .card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .93rem; color: var(--accent); } .card-more svg { width: 15px; height: 15px; transition: transform .2s var(--ease); } .card:hover .card-more svg { transform: translateX(4px); } /* Hinweiszeile unter den Leistungskarten — der einzige inhaltliche Link von der Startseite auf die Fliesenleger-Seite (Navigation und Fuss zaehlen weniger als ein Link im Text). */ .cards-note { max-width: 62ch; margin: clamp(22px, 3vw, 32px) 0 0; color: var(--text-dim); font-size: .98rem; } .cards-note a { color: var(--accent); font-weight: 600; } /* ------------------------------------------------------------------ about */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .split img { border-radius: var(--radius); } .split p { color: var(--text-dim); } /* Meisterbetrieb-Siegel als Auszeichnungszeile unter dem Text */ .seal { display: flex; gap: 14px; align-items: center; margin: 26px 0 0; font-size: .92rem; font-weight: 700; color: var(--text-dim); } .seal img { width: 62px; height: auto; flex: none; } /* Die Schrift „MEISTER BETRIEB" des Siegels ist schwarz auf transparent und verschwindet im Dunkelmodus. Das Siegel ist rund, ein heller Kreis dahinter reicht — keine zweite Bilddatei noetig. */ :root[data-theme="dark"] .seal img { background: #f4efec; border-radius: 50%; } /* ------------------------------------------------------------------ marken */ /* Die Herstellerlogos haben weissen bzw. transparenten Grund und brauchen deshalb auch im Dunkelmodus eine helle Karte. */ .brands { list-style: none; margin: 0; padding: 0; display: grid; /* 150px -> sechs Spalten bei 1140er Container, die zwoelf Logos ergeben also genau zwei volle Reihen. */ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .brands li { display: grid; place-items: center; min-height: 82px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); } /* Feste Box + contain statt max-height: die Wortmarken reichen von quadratisch (Villeroy & Boch) bis 10:1 (AGROB BUCHTAL). Mit max-height allein waeren die breiten an der Zellbreite haengengeblieben und optisch winzig. */ .brands img { width: 100%; height: 52px; object-fit: contain; } /* ------------------------------------------------------------------ gallery */ /* Zwei Fassungen: wenige Bilder werden gross und gleichmaessig verteilt, ab fuenf Bildern (Klasse aus build_site.py) traegt das erste Bild als 2x2 das Mosaik — 1 + 4 fuellt vier Spalten auf zwei Reihen genau aus. */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; } .gallery-feature { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gallery-feature > button:first-child { grid-column: span 2; grid-row: span 2; } .gallery button { appearance: none; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--img-bg); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; transition: border-color .2s var(--ease); } .gallery button:hover { border-color: var(--accent); } .gallery img { width: 100%; height: 100%; object-fit: cover; } /* lightbox */ .lb[hidden] { display: none; } .lb { position: fixed; inset: 0; z-index: 200; background: rgba(10, 7, 6, .94); display: grid; grid-template-rows: 1fr auto; padding: 18px; } .lb-stage { display: grid; place-items: center; min-height: 0; } .lb-stage img { max-width: min(1100px, 100%); max-height: 100%; width: auto; border-radius: var(--radius-sm); } .lb-bar { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 14px; color: #ded5d1; font-size: .9rem; font-family: var(--mono); } .lb-btn { appearance: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .07); color: #fff; cursor: pointer; display: grid; place-items: center; } .lb-btn:hover { background: rgba(255, 255, 255, .16); } .lb-btn svg { width: 20px; height: 20px; } .lb-close { position: absolute; top: 16px; right: 16px; } /* ------------------------------------------------------------------ faq */ /* Flache Liste statt Kartenstapel: weniger Rahmen, gleiche Funktion. */ .faq { max-width: 70ch; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; align-items: center; gap: 14px; padding: 18px 4px; cursor: pointer; font-weight: 700; font-size: 1.04rem; list-style: none; } .faq summary::-webkit-details-marker { display: none; } /* Chevron in CSS, damit je Frage kein Icon-Markup noetig ist. */ .faq summary::after { content: ""; margin-left: auto; flex: none; width: 9px; height: 9px; border-right: 2.2px solid var(--accent); border-bottom: 2.2px solid var(--accent); transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); } .faq-body { padding: 0 4px 20px; max-width: 66ch; } .faq-body p { color: var(--text-dim); margin: 0; } .faq-body a { color: var(--accent); } /* ------------------------------------------------------------------ contact */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; } .people { display: grid; gap: 14px; } .person { display: grid; grid-template-columns: 44px 1fr; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; } .person .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-deep); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .95rem; } .person h3 { font-size: 1.05rem; margin-bottom: 2px; } .person .role { font-size: .85rem; color: var(--accent); font-weight: 700; margin-bottom: 10px; } .person ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .person li { font-size: .95rem; color: var(--text-dim); } .person a { color: var(--text); text-decoration: none; font-weight: 600; } .person a:hover { color: var(--accent); text-decoration: underline; } .info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; } .info-card + .info-card { margin-top: 16px; } .info-card h3 { font-size: 1.05rem; } .addr { font-style: normal; color: var(--text-dim); } .addr strong { color: var(--text); } .geo-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 0; } .geo-line .coords { font-family: var(--mono); font-size: .8rem; color: var(--text-faint); } /* form */ .form { display: grid; gap: 16px; } .field { display: grid; gap: 6px; } .field label { font-size: .86rem; font-weight: 700; color: var(--text-dim); } .field input, .field textarea { font: inherit; font-size: .98rem; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; width: 100%; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: .84rem; color: var(--text-faint); margin: 0; } .form-msg { font-size: .94rem; font-weight: 600; margin: 0; min-height: 1.4em; } .form-msg[data-state="ok"] { color: #1c7a4b; } .form-msg[data-state="err"] { color: #b3261e; } :root[data-theme="dark"] .form-msg[data-state="ok"] { color: #58cf90; } :root[data-theme="dark"] .form-msg[data-state="err"] { color: #ff8a7a; } /* ------------------------------------------------------------------ CTA band */ .cta-band { background: var(--bg-2); border-top: 1px solid var(--line); } .cta-inner { padding: clamp(44px, 7vw, 80px) var(--gutter); text-align: center; } .cta-inner > div:first-child { max-width: 58ch; margin-inline: auto; } .cta-inner h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); } .cta-inner p { color: var(--text-dim); } .cta-note { font-size: .92rem; color: var(--text-faint); margin-bottom: 0; } .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 26px; } .cta-alt { flex-basis: 100%; font-size: .9rem; color: var(--text-faint); margin: 4px 0 0; } .cta-alt a { color: var(--accent); font-weight: 600; } /* --------------------------------------------------------- weiter-Links */ .sib-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; } .sib-list a { display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: .96rem; color: var(--text-dim); transition: border-color .18s var(--ease), color .18s var(--ease); } .sib-list a::before { content: "\203A"; color: var(--accent); font-weight: 800; } .sib-list a:hover { border-color: var(--accent); color: var(--text); } /* ------------------------------------------------------------------ footer */ .foot { background: var(--surface); border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 64px) 0 28px; font-size: .95rem; } .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; } .foot h4 { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .foot a { color: var(--text-dim); text-decoration: none; } .foot a:hover { color: var(--accent); } /* „Route planen" unter der Anschrift in der Fusszeile (wie bei fws). */ .foot-route { margin: 12px 0 0; } .foot-route a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text-dim); text-decoration: none; } .foot-route a:hover { color: var(--accent); } .foot-route svg { width: 15px; height: 15px; flex: none; } .foot .legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; color: var(--text-faint); font-size: .86rem; } /* ------------------------------------------------------- crumbs + page hero */ .crumbs { border-bottom: 1px solid var(--line); font-size: .85rem; } .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; margin: 0; padding: 12px 0; color: var(--text-faint); } .crumbs li + li::before { content: "\203A"; margin-right: 10px; color: var(--line-strong); } .crumbs a { color: var(--text-dim); text-decoration: none; } .crumbs a:hover { color: var(--accent); text-decoration: underline; } .crumbs li[aria-current] { color: var(--text); font-weight: 600; } .page-hero { padding: clamp(40px, 6vw, 76px) 0 clamp(32px, 4vw, 56px); background: var(--bg-2); border-bottom: 1px solid var(--line); } .page-hero h1 { max-width: 26ch; margin-bottom: .4em; } .page-hero .lead { margin: 0; max-width: 60ch; } /* Seitenkopf mit Foto (Leistungs- und Landingpages). Das Bild ist ein statt background-image, weil die CSP keine inline-styles erlaubt — deshalb liegt es absolut hinter dem Text und der Scrim kommt aus ::after. */ .page-hero.has-img { position: relative; isolation: isolate; border-bottom: 0; background: var(--img-bg); padding: clamp(52px, 8vw, 104px) 0 clamp(44px, 6vw, 84px); } .page-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .page-hero.has-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(96deg, rgba(14, 10, 9, .88) 0%, rgba(14, 10, 9, .78) 32%, rgba(14, 10, 9, .6) 58%, rgba(14, 10, 9, .38) 82%, rgba(14, 10, 9, .3) 100%), linear-gradient(180deg, rgba(14, 10, 9, .3) 0%, rgba(14, 10, 9, .12) 45%, rgba(14, 10, 9, .4) 100%); } /* Feste Farben: der Text liegt in BEIDEN Themes auf dem dunklen Scrim. */ .page-hero.has-img .kicker { color: #ffc9cb; } .page-hero.has-img h1 { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .4); } .page-hero.has-img .lead { color: #f0e9e6; max-width: 62ch; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); } .page-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* ------------------------------------------------------- Bild-Text-Reihen */ .features { display: grid; gap: clamp(40px, 6vw, 76px); } .feature { display: grid; /* Bild etwas breiter als der Text: die Absaetze der Altseite sind teils nur ein Satz lang, bei 1:1 stand daneben zu viel Leere. */ grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .feature-text { max-width: 52ch; } .feature-text h2, .feature-text h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); } .feature-text p { color: var(--text-dim); } .feature-text p:last-child { margin-bottom: 0; } .feature-media img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 10; object-fit: cover; background: var(--img-bg); } /* Laengere Texte (SEO-Seite) drehen das Verhaeltnis: Text breiter als Bild, dafuer das Bild etwas hoeher, damit die Reihe nicht auseinanderfaellt. */ .features-text .feature { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } .features-text .feature-media img { aspect-ratio: 4 / 3; } /* Jede zweite Reihe spiegeln — das Bild wandert nach links. */ .feature.flip .feature-media { order: -1; } /* ------------------------------------------------------------------ tiles */ /* Textblöcke ohne eigenes Foto: Kacheln statt Textwand. */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 2vw, 22px); } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px); scroll-margin-top: 100px; /* Sprungziel #badsanierung nicht unter den Header */ } .tile h3 { font-size: 1.1rem; } .tile p { color: var(--text-dim); font-size: .96rem; margin-bottom: 0; } /* --------------------------------------------------------------- highlight */ /* Abschlussblock einer Seite (Aufruf zur Anfrage). */ .highlight { max-width: 74ch; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: clamp(24px, 3vw, 36px); } .highlight h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); } .highlight p { color: var(--text-dim); } .highlight p:last-of-type { margin-bottom: 0; } .highlight-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } /* ------------------------------------------------------------------ prose */ /* Leistungsseiten: linksbuendige Lesespalte (frueher zentriert — das liess die halbe Seite leer aussehen), Absaetze durch feine Linien getrennt. */ /* Wichtig: die Lesespalte begrenzt den INHALT, nicht den .wrap. Wuerde .prose-narrow direkt auf dem .wrap greifen, zoege dessen margin-inline:auto die ganze Spalte in die Seitenmitte — und weil Brotkrume, Kicker und H1 links am Rand stehen, sah die Seite dann verrutscht aus. */ .prose-narrow { max-width: 68ch; } .wrap.prose-narrow, .wrap.prose { max-width: var(--maxw); } .wrap.prose-narrow > * { max-width: 68ch; } .wrap.prose > * { max-width: 70ch; } .prose-narrow h2, .prose-narrow h3 { margin: 0 0 .5em; padding-top: 1.9em; border-top: 1px solid var(--line); font-size: clamp(1.18rem, 1.8vw, 1.42rem); } .prose-narrow > :is(h2, h3):first-child { padding-top: 0; border-top: 0; } .prose-narrow p { color: var(--text-dim); margin-bottom: 1.4em; } .prose-narrow p:last-child { margin-bottom: 0; } .prose-narrow a { color: var(--accent); } .page { padding: var(--section) 0; } .prose { max-width: 70ch; } .prose h2 { margin-top: 1.9em; font-size: clamp(1.25rem, 2vw, 1.5rem); } .prose p, .prose li { color: var(--text-dim); } .prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0 0 1.8em; } .prose dt { font-weight: 700; color: var(--text); } .prose dd { margin: 0; color: var(--text-dim); } .prose ul { padding-left: 1.2em; } .prose li { margin-bottom: .5em; } .prose a { color: var(--accent); } /* ------------------------------------------------------------------ responsive */ @media (max-width: 1000px) { .split, .contact-grid { grid-template-columns: 1fr; } /* Gestapelt steht der Text immer oben — auch in gespiegelten Reihen. */ .feature { grid-template-columns: 1fr; gap: 22px; } .feature.flip .feature-media { order: 0; } .feature-text { max-width: none; } .foot-grid { grid-template-columns: 1fr 1fr; } } /* 900px MUSS mit dem matchMedia in app.js uebereinstimmen — sonst haengt das Nav-Panel entweder offen oder unerreichbar. */ @media (max-width: 900px) { .nav-toggle { display: grid; } .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px var(--gutter) 16px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); } .nav[hidden] { display: none; } .nav a { padding: 13px 8px; font-size: 1.02rem; } .nav a[aria-current]::after { left: 8px; right: auto; width: 18px; bottom: 6px; } /* Auf dem Handy zaehlt der Anruf-Tap, nicht die ausgeschriebene Nummer. */ .call-label { display: none; } .call-btn { padding: 12px; border-radius: 10px; } /* Zwei Spalten fuer beide Galerie-Fassungen; das Mosaik-Bild bleibt gross (spannt beide Spalten), die vier kleinen fuellen darunter auf. */ .gallery, .gallery-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: 18px 0; } .stat + .stat { border-left: 0; padding-left: 0; } .stat:nth-child(2n) { padding-left: clamp(18px, 4vw, 34px); border-left: 1px solid var(--line); } .stat:nth-child(n + 3) { border-top: 1px solid var(--line); } } @media (max-width: 620px) { body { font-size: 16.5px; } /* Hier trennt der Browser die langen Woerter mit Bindestrich — sauberer als der harte Umbruch aus overflow-wrap. */ h1, h2, h3 { hyphens: auto; } /* Zweispaltige Definitionslisten (Impressum) sprengen sonst die Breite: "Unternehmensgegenstand" allein ist breiter als die halbe Spalte. */ .prose dl { grid-template-columns: 1fr; gap: 2px 0; } .prose dt { margin-top: 12px; } .brand img { height: 36px; } /* Gestapelt links ausrichten — mit dem geerbten align-items:center stand das Siegel mittig ueber linksbuendigem Text. */ .seal { flex-direction: column; align-items: flex-start; } .seal img { width: 78px; } .foot-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .brands { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; } .brands li { min-height: 66px; padding: 10px; } .brands img { height: 34px; } .hero-cta .btn, .page-hero-cta .btn, .highlight-cta .btn, .cta-actions .btn { flex: 1 1 100%; } } @media print { .top, .foot, .lb, .hero::before, .hero::after, .gallery, .form { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } a { text-decoration: none; } }