/* ================================================================= STERCHI BEDACHUNGEN — Design-System Natives CSS, kein Framework. Tokens · Reset · Primitives. Stil: warm & handwerklich, veredelt zu Premium. Akzent: Kupfer (echtes Dachmaterial) auf warmem Anthrazit/Sandstein. ================================================================= */ /* ---------- Schriften (self-hosted, latin-Subset, swap) ---------- Bewusst lokal statt Fontsource-JS-Import: feste Pfade ermöglichen im → Fonts blockieren das Rendering nicht. */ @font-face { font-family: 'Fraunces Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/fraunces-latin.woff2') format('woff2'); } @font-face { font-family: 'Fraunces Variable'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/fonts/fraunces-latin-italic.woff2') format('woff2'); } @font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); } /* ---------- Design Tokens ---------- */ :root { /* Farben — warme, erdige Premium-Palette */ --c-bg: #f6f1e9; /* warmes Sandpapier (Seitenhintergrund) */ --c-bg-alt: #efe7da; /* etwas tiefere Sandfläche (Wechselsektionen) */ --c-cream: #fbf8f3; /* Karten / heller Kontrast */ --c-ink: #211b15; /* warmes Beinahe-Schwarz (Fliesstext) */ --c-ink-soft: #5d5349; /* gedämpfter Text */ --c-ink-faint: #8a7e70; /* sehr leiser Text / Captions */ --c-dark: #1b1714; /* Anthrazit (dunkle Sektionen) */ --c-dark-2: #272019; /* etwas helleres Anthrazit */ --c-dark-soft: #c9bcab; /* Text auf dunkel, gedämpft */ --c-copper: #b56a36; /* Kupfer — primärer Akzent */ --c-copper-deep: #98551f; /* Kupfer dunkler — Hover */ --c-copper-bright: #d98c4f; /* Kupfer hell — auf dunkel */ --c-copper-tint: #f0e2d3; /* sehr heller Kupfer-Hauch (Flächen) */ --c-line: #e3d8c7; /* warme Trennlinien / Rahmen */ --c-line-strong: #d2c4ae; --c-line-dark: #3a3128; /* Linien auf dunklem Grund */ /* Schrift */ --font-display: 'Fraunces Variable', 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Fluider Typo-Scale (clamp: min .. max) */ --fs-eyebrow: 0.78rem; --fs-sm: 0.9rem; --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --fs-lead: clamp(1.12rem, 1.05rem + 0.4vw, 1.32rem); --fs-h3: clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem); --fs-h2: clamp(1.9rem, 1.55rem + 1.7vw, 3rem); --fs-h1: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem); --fs-display: clamp(3rem, 2rem + 5vw, 6rem); /* Abstände */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 6.5rem; --section-y: clamp(4rem, 2.5rem + 6vw, 8rem); /* Layout */ --container: 1180px; --container-narrow: 760px; --radius-sm: 6px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; /* Schatten — weich & warm */ --shadow-sm: 0 1px 2px rgba(33, 27, 21, 0.06), 0 2px 6px rgba(33, 27, 21, 0.05); --shadow: 0 4px 14px rgba(33, 27, 21, 0.08), 0 14px 40px rgba(33, 27, 21, 0.08); --shadow-lg: 0 10px 30px rgba(33, 27, 21, 0.12), 0 30px 70px rgba(33, 27, 21, 0.12); --shadow-copper: 0 8px 24px rgba(152, 85, 31, 0.28); /* Bewegung */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 0.18s var(--ease); --t: 0.32s var(--ease); } /* ---------- Modern Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; color: var(--c-ink); background-color: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; color: var(--c-ink); text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 3px solid var(--c-copper); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--c-copper); color: #fff; } /* ---------- Layout-Primitives ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); } .section--alt { background: var(--c-bg-alt); } .section--dark { background: var(--c-dark); color: var(--c-dark-soft); } .section--dark h1, .section--dark h2, .section--dark h3 { color: #fdf9f3; } /* ---------- Typografie-Helfer ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-copper-deep); } .eyebrow::before { content: ''; width: 1.8rem; height: 2px; background: var(--c-copper); border-radius: 2px; } .section--dark .eyebrow { color: var(--c-copper-bright); } .h1 { font-size: var(--fs-h1); } .h2 { font-size: var(--fs-h2); } .h3 { font-size: var(--fs-h3); font-weight: 600; } .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink-soft); } .section--dark .lead { color: var(--c-dark-soft); } .section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); } .section-head--center { margin-inline: auto; text-align: center; } .section-head .eyebrow { margin-bottom: 1.1rem; } .section-head .lead { margin-top: 1.25rem; } /* Kupfer-Akzent im Text */ .accent { color: var(--c-copper-deep); } .section--dark .accent { color: var(--c-copper-bright); } .serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 0.95em 1.6em; font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0.005em; border: 1px solid transparent; border-radius: var(--radius-pill); transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); will-change: transform; } .btn svg { width: 1.15em; height: 1.15em; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { /* Kupfer-tief für ausreichenden Kontrast (weisser Text = 5.7:1, WCAG AA) */ background: var(--c-copper-deep); color: #fff; box-shadow: var(--shadow-copper); } .btn--primary:hover { background: #814718; } .btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); } .btn--ghost:hover { border-color: var(--c-ink); background: rgba(33, 27, 21, 0.03); } .btn--light { background: #fdf9f3; color: var(--c-dark); } .btn--light:hover { background: #fff; } .btn--outline-light { background: transparent; color: #fdf9f3; border-color: rgba(253, 249, 243, 0.3); } .btn--outline-light:hover { border-color: #fdf9f3; background: rgba(253, 249, 243, 0.08); } .btn--lg { padding: 1.1em 2em; font-size: 1.05rem; } /* Text-Link mit Pfeil */ .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--c-copper-deep); } .link-arrow svg { width: 1.05em; height: 1.05em; transition: transform var(--t-fast); } .link-arrow:hover svg { transform: translateX(4px); } .section--dark .link-arrow { color: var(--c-copper-bright); } /* ---------- Karten & Grids ---------- */ .grid { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .card { background: var(--c-cream); border: 1px solid var(--c-line); border-radius: var(--radius); padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t); } /* ---------- Foto-Platzhalter (klar als Demo erkennbar) ---------- */ .photo-ph { position: relative; display: grid; place-items: center; text-align: center; background: repeating-linear-gradient( 135deg, var(--c-copper-tint), var(--c-copper-tint) 14px, #ece0cf 14px, #ece0cf 28px ); color: var(--c-ink-faint); border-radius: var(--radius); overflow: hidden; isolation: isolate; } .photo-ph::after { content: 'Platzhalter · hier kommt ein echtes Foto'; position: absolute; inset: auto 0.75rem 0.75rem auto; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--c-copper-deep); background: rgba(251, 248, 243, 0.92); padding: 0.3em 0.7em; border-radius: var(--radius-pill); } .photo-ph__inner { display: grid; gap: 0.6rem; justify-items: center; padding: 2rem; z-index: 1; } .photo-ph__inner svg { width: 2.5rem; height: 2.5rem; opacity: 0.5; } .photo-ph__label { font-weight: 600; color: var(--c-ink-soft); } /* ---------- Utility ---------- */ .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; } .divider { height: 1px; background: var(--c-line); border: 0; } /* ---------- Scroll-Reveal (progressiv, ohne JS funktionsfähig) ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .btn:hover { transform: none; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } .logo[data-astro-cid-tvrurpns]{display:inline-flex;align-items:center;gap:0.7rem;line-height:1}.logo__mark[data-astro-cid-tvrurpns]{display:block;flex-shrink:0;border-radius:6px}.logo__text[data-astro-cid-tvrurpns]{display:flex;flex-direction:column;gap:0.12rem}.logo__name[data-astro-cid-tvrurpns]{font-family:var(--font-display);font-weight:600;font-size:1.45rem;letter-spacing:-0.01em}.logo__sub[data-astro-cid-tvrurpns]{font-family:var(--font-body);font-size:0.66rem;font-weight:600;text-transform:uppercase;letter-spacing:0.32em}.header[data-astro-cid-3ef6ksr2]{position:sticky;top:0;z-index:100;background:rgba(246,241,233,0.82);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t),background var(--t)}.header[data-astro-cid-3ef6ksr2].is-scrolled{border-bottom-color:var(--c-line);box-shadow:0 6px 24px rgba(33,27,21,0.06)}.header__inner[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:5rem}.header__nav[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:0.1rem;margin-inline:auto}.header__link[data-astro-cid-3ef6ksr2]{position:relative;white-space:nowrap;padding:0.45rem 0.66rem;font-size:0.9rem;font-weight:500;color:var(--c-ink-soft);border-radius:var(--radius-pill);transition:color var(--t-fast),background var(--t-fast)}.header__link[data-astro-cid-3ef6ksr2]:hover{color:var(--c-ink);background:rgba(33,27,21,0.04)}.header__link[data-astro-cid-3ef6ksr2].is-active{color:var(--c-copper-deep)}.header__link[data-astro-cid-3ef6ksr2].is-active::after{content:"";position:absolute;left:50%;bottom:0.15rem;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--c-copper)}.header__link--menu[data-astro-cid-3ef6ksr2]{display:inline-flex;align-items:center;gap:0.22rem}.header__chev[data-astro-cid-3ef6ksr2]{transition:transform var(--t-fast)}.header__item-menu[data-astro-cid-3ef6ksr2]:hover .header__chev[data-astro-cid-3ef6ksr2],.header__item-menu[data-astro-cid-3ef6ksr2]:focus-within .header__chev[data-astro-cid-3ef6ksr2]{transform:rotate(180deg)}.header__item-menu[data-astro-cid-3ef6ksr2]{position:relative}.header__menu[data-astro-cid-3ef6ksr2]{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:0.55rem;opacity:0;visibility:hidden;transition:opacity var(--t-fast),visibility var(--t-fast);z-index:60}.header__item-menu[data-astro-cid-3ef6ksr2]:hover .header__menu[data-astro-cid-3ef6ksr2],.header__item-menu[data-astro-cid-3ef6ksr2]:focus-within .header__menu[data-astro-cid-3ef6ksr2]{opacity:1;visibility:visible}.header__menu-inner[data-astro-cid-3ef6ksr2]{min-width:17rem;background:var(--c-cream);border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:0.5rem;display:grid;gap:0.1rem;transform:translateY(6px);transition:transform var(--t)}.header__item-menu[data-astro-cid-3ef6ksr2]:hover .header__menu-inner[data-astro-cid-3ef6ksr2],.header__item-menu[data-astro-cid-3ef6ksr2]:focus-within .header__menu-inner[data-astro-cid-3ef6ksr2]{transform:translateY(0)}.header__menu-link[data-astro-cid-3ef6ksr2]{display:block;padding:0.6rem 0.85rem;border-radius:var(--radius-sm);font-size:0.9rem;color:var(--c-ink-soft);white-space:nowrap;transition:color var(--t-fast),background var(--t-fast)}.header__menu-link[data-astro-cid-3ef6ksr2]:hover{background:var(--c-copper-tint);color:var(--c-copper-deep)}.header__menu-link[data-astro-cid-3ef6ksr2].is-active{color:var(--c-copper-deep);background:var(--c-copper-tint)}.header__actions[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:0.55rem}.header__cta[data-astro-cid-3ef6ksr2]{padding:0.62em 1.15em;font-size:0.92rem;white-space:nowrap}.header__phone[data-astro-cid-3ef6ksr2]{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;font-size:0.95rem;color:var(--c-ink);white-space:nowrap}.header__phone[data-astro-cid-3ef6ksr2] svg[data-astro-cid-3ef6ksr2]{color:var(--c-copper-deep)}.header__phone[data-astro-cid-3ef6ksr2]:hover{color:var(--c-copper-deep)}.header__burger[data-astro-cid-3ef6ksr2]{display:none;background:none;border:0;padding:0.4rem;color:var(--c-ink)}.mobile-menu[data-astro-cid-3ef6ksr2]{display:none;padding:1rem clamp(1.25rem,5vw,2.5rem) 2rem;border-top:1px solid var(--c-line);background:var(--c-bg)}.mobile-menu[data-astro-cid-3ef6ksr2]:not([hidden]){display:block}.mobile-menu__nav[data-astro-cid-3ef6ksr2]{display:flex;flex-direction:column}.mobile-menu__link[data-astro-cid-3ef6ksr2]{padding:0.9rem 0.25rem;font-family:var(--font-display);font-size:1.35rem;border-bottom:1px solid var(--c-line);color:var(--c-ink)}.mobile-menu__link[data-astro-cid-3ef6ksr2].is-active{color:var(--c-copper-deep)}.mobile-menu__sub[data-astro-cid-3ef6ksr2]{display:grid;padding:0.5rem 0 0.75rem 0.75rem;border-bottom:1px solid var(--c-line)}.mobile-menu__sublink[data-astro-cid-3ef6ksr2]{padding:0.5rem 0.25rem;font-size:1rem;color:var(--c-ink-soft)}.mobile-menu__sublink[data-astro-cid-3ef6ksr2]:hover{color:var(--c-copper-deep)}.mobile-menu__foot[data-astro-cid-3ef6ksr2]{display:grid;gap:0.75rem;margin-top:1.5rem}.mobile-menu__foot[data-astro-cid-3ef6ksr2] .btn[data-astro-cid-3ef6ksr2]{width:100%}@media (max-width: 940px){.header__nav[data-astro-cid-3ef6ksr2]{display:none}.header__phone[data-astro-cid-3ef6ksr2] span[data-astro-cid-3ef6ksr2]{display:none}.header__cta[data-astro-cid-3ef6ksr2]{display:none}.header__burger[data-astro-cid-3ef6ksr2]{display:inline-flex}}@media (max-width: 520px){.header__phone[data-astro-cid-3ef6ksr2]{display:none}}.footer[data-astro-cid-sz7xmlte]{background:var(--c-dark);color:var(--c-dark-soft);padding-top:clamp(3.5rem,2.5rem + 4vw,5.5rem)}.footer__grid[data-astro-cid-sz7xmlte]{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(2rem,1rem + 3vw,4rem);padding-bottom:3.5rem}.footer__tagline[data-astro-cid-sz7xmlte]{margin-top:1.25rem;max-width:32ch;color:var(--c-dark-soft);font-size:0.95rem}.footer__contact[data-astro-cid-sz7xmlte]{display:grid;gap:0.7rem;margin-top:1.75rem;font-size:0.95rem}.footer__contact[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte],.footer__contact[data-astro-cid-sz7xmlte] span[data-astro-cid-sz7xmlte]{display:inline-flex;align-items:center;gap:0.6rem}.footer__contact[data-astro-cid-sz7xmlte] svg[data-astro-cid-sz7xmlte]{color:var(--c-copper-bright);flex-shrink:0}.footer__contact[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]:hover{color:#fff}.footer__head[data-astro-cid-sz7xmlte]{font-family:var(--font-body);font-size:0.78rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#fdf9f3;margin-bottom:1.1rem}.footer__col[data-astro-cid-sz7xmlte] ul[data-astro-cid-sz7xmlte]{list-style:none;padding:0;display:grid;gap:0.6rem;font-size:0.95rem}.footer__col[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]:hover{color:#fff}.footer__areas[data-astro-cid-sz7xmlte]{font-size:0.95rem;line-height:1.7;margin-bottom:1.5rem}.footer__cta[data-astro-cid-sz7xmlte]{width:100%}.footer__bar[data-astro-cid-sz7xmlte]{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;padding-block:1.5rem;margin-top:1rem;border-top:1px solid var(--c-line-dark);font-size:0.82rem;color:var(--c-dark-soft)}.footer__legal[data-astro-cid-sz7xmlte]{display:flex;gap:1.25rem}.footer__legal[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]{color:var(--c-dark-soft)}.footer__legal[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]:hover{color:var(--c-copper-bright)}@media (max-width: 860px){.footer__grid[data-astro-cid-sz7xmlte]{grid-template-columns:1fr 1fr}.footer__brand[data-astro-cid-sz7xmlte]{grid-column:1 / -1}}@media (max-width: 520px){.footer__grid[data-astro-cid-sz7xmlte]{grid-template-columns:1fr}.footer__bar[data-astro-cid-sz7xmlte]{flex-direction:column}}.skip-link[data-astro-cid-37fxchfa]{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--c-copper);color:#fff;padding:0.6rem 1rem;border-radius:var(--radius-pill);transition:top var(--t)}.skip-link[data-astro-cid-37fxchfa]:focus{top:1rem}