/* ========================================================================= Web Agentur Link, Konzeptbeispiele demo.css, gemeinsames Gerüst, fünf eigenständige Gestaltungen Jede Branche bekommt eine eigene Formensprache, nicht nur eine andere Farbe: andere Schrift, andere Rundungen, andere Rasterlogik, andere Dichte. Die Themes hängen an [data-theme] am -Element. 01 Tokens & Themes 02 Basis 03 Hinweisleiste 04 Navigation 05 Hero 06 Abschnitte & Raster 07 Karten 08 Speisekarte / Objektliste / Preisliste 09 Tabellen (Sprechzeiten & Co.) 10 Formulare 11 Footer 12 Bewegung ========================================================================= */ /* ---------------------------------------------------------------- Schriften */ @font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Nunito"; src: url("../fonts/nunito-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Manrope"; src: url("../../fonts/manrope-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } /* ========================================================================= 01 Tokens & Themes ========================================================================= */ :root { --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --display: var(--body); --bg: #ffffff; --surface: #f7f7f8; --ink: #16181d; --muted: #5a6270; --line: rgba(22, 24, 29, 0.12); --brand: #16181d; --on-brand: #ffffff; --accent: #16181d; --accent-text: #16181d; --accent-on-dark: #ffffff; --radius: 12px; --radius-lg: 18px; --shadow: 0 2px 6px rgba(0,0,0,.05), 0 14px 34px rgba(0,0,0,.07); --shadow-lg: 0 4px 10px rgba(0,0,0,.06), 0 30px 70px rgba(0,0,0,.12); --h1: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); --h2: clamp(1.8rem, 1.4rem + 1.8vw, 2.9rem); --h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); --lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); --gutter: clamp(1.15rem, 4vw, 2rem); --section-y: clamp(3.5rem, 8vw, 7rem); --wide: 1180px; --nav-h: 74px; --ease: cubic-bezier(.2,.7,.3,1); --caps: 0.14em; } /* ---- Gastronomie: warm, dunkel, klassische Antiqua ---------------------- */ [data-theme="restaurant"] { --accent-text: #7f5c22; --accent-on-dark: #d9b878; --display: "Playfair Display", Georgia, serif; --bg: #fbf7f1; --surface: #f3ebe0; --ink: #241a13; --muted: #6d5a4a; --line: rgba(36, 26, 19, 0.16); --brand: #7c2d2d; --on-brand: #fdf6ee; --accent: #b98c3f; --dark: #241a13; --radius: 3px; --radius-lg: 4px; --caps: 0.24em; } /* ---- Arztpraxis: freundlich, rund, großzügig gesetzt ------------------- */ [data-theme="praxis"] { --accent-text: #0d6b63; --accent-on-dark: #a5e5dc; --display: "Nunito", system-ui, sans-serif; --bg: #ffffff; --surface: #eef7f6; --ink: #16302e; --muted: #4c6764; --line: rgba(22, 48, 46, 0.12); --brand: #0f766e; --on-brand: #ffffff; --accent: #1f9d8f; --dark: #10403c; --radius: 18px; --radius-lg: 28px; --caps: 0.1em; --h1: clamp(2.3rem, 1.6rem + 2.9vw, 3.9rem); } /* ---- Handwerk: kräftig, kantig, schmale Versalien ---------------------- */ [data-theme="handwerk"] { --accent-text: #7d5400; --accent-on-dark: #f0a202; --display: "Barlow Condensed", "Arial Narrow", sans-serif; --bg: #ffffff; --surface: #f2f3f5; --ink: #14171c; --muted: #545c68; --line: rgba(20, 23, 28, 0.15); --brand: #1b1f26; --on-brand: #ffffff; --accent: #f0a202; --dark: #14171c; --radius: 0px; --radius-lg: 0px; --caps: 0.12em; --h1: clamp(2.8rem, 1.8rem + 4.4vw, 5.4rem); } /* ========================================================================= 02 Basis ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 3rem); } body { font-family: var(--body); font-size: clamp(1rem, .97rem + .14vw, 1.06rem); line-height: 1.65; color: var(--muted); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-wrap: break-word; } img, svg { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } ul, ol { list-style: none; padding: 0; } p, li, dd, label { hyphens: auto; -webkit-hyphens: auto; } h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.12; font-weight: 700; text-wrap: balance; } h1 { font-size: var(--h1); letter-spacing: -0.02em; } h2 { font-size: var(--h2); letter-spacing: -0.015em; } h3 { font-size: var(--h3); } [data-theme="handwerk"] h1, [data-theme="handwerk"] h2, [data-theme="handwerk"] h3 { text-transform: uppercase; letter-spacing: 0.01em; font-weight: 600; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .skip { position: absolute; left: 1rem; top: -80px; z-index: 999; padding: .8rem 1.2rem; background: var(--ink); color: #fff; font-weight: 700; transition: top .2s var(--ease); } .skip:focus { top: 0; } .wrap { width: min(100% - (var(--gutter) * 2), var(--wide)); margin-inline: auto; } .narrow { width: min(100% - (var(--gutter) * 2), 760px); margin-inline: auto; } .eyebrow { display: block; font-family: var(--body); font-size: .76rem; font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent-text); margin-bottom: 1rem; } .lead { font-size: var(--lead); line-height: 1.6; max-width: 62ch; } .muted { color: var(--muted); } /* ========================================================================= 03 Hinweisleiste, die Seite gibt sich immer als Beispiel zu erkennen ========================================================================= */ .demo-bar { position: relative; z-index: 120; background: #14171c; color: #fff; font-family: var(--body); font-size: .82rem; line-height: 1.4; } .demo-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 0; } .demo-bar strong { font-weight: 800; letter-spacing: .02em; } .demo-bar span { color: rgba(255,255,255,.66); } .demo-bar a { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem; border: 1px solid rgba(255,255,255,.32); border-radius: 100px; text-decoration: none; font-weight: 700; white-space: nowrap; transition: background-color .25s var(--ease); } .demo-bar a:hover { background: rgba(255,255,255,.14); } /* ========================================================================= 04 Navigation ========================================================================= */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } .nav .wrap { display: flex; align-items: center; gap: 1.5rem; } .logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; } .logo-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius); background: var(--brand); color: var(--on-brand); font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; } [data-theme="praxis"] .logo-mark { border-radius: 50%; } .logo-text { display: flex; flex-direction: column; line-height: 1.15; } .logo-name { font-family: var(--display); font-weight: 700; font-size: 1.06rem; color: var(--ink); letter-spacing: -.01em; } [data-theme="handwerk"] .logo-name { text-transform: uppercase; letter-spacing: .04em; } .logo-sub { font-family: var(--body); font-size: .64rem; font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); } .menu { display: none; align-items: center; gap: 1.6rem; } @media (min-width: 940px) { .menu { display: flex; } } .menu a { font-family: var(--body); font-size: .93rem; font-weight: 600; text-decoration: none; color: var(--muted); padding: .3rem 0; position: relative; transition: color .2s var(--ease); } .menu a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .3s var(--ease); } .menu a:hover { color: var(--ink); } .menu a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } /* Unter 480px wird es in der Leiste zu eng: Der Terminbutton wandert ins Menü, damit Logo und Menütaste nebeneinander Platz haben. */ @media (max-width: 479px) { .nav .btn { display: none; } .logo-sub { font-size: .58rem; letter-spacing: .1em; } .logo-name { font-size: .98rem; } .logo-mark { width: 34px; height: 34px; font-size: .9rem; } } .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; cursor: pointer; } @media (min-width: 940px) { .burger { display: none; } } .burger span { display: block; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .drawer { position: fixed; inset: 0; z-index: 99; padding: calc(var(--nav-h) + 5rem) var(--gutter) 2rem; background: var(--bg); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .drawer.open { opacity: 1; visibility: visible; transform: none; } @media (min-width: 940px) { .drawer { display: none; } } .drawer .btn { margin-top: 1.6rem; justify-content: center; } .drawer a:not(.btn) { padding: 1rem .2rem; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--ink); text-decoration: none; } body.locked { overflow: hidden; } /* ========================================================================= 05 Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--body); padding: .92rem 1.6rem; border: 1px solid transparent; border-radius: var(--radius); font-weight: 700; font-size: .98rem; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } [data-theme="praxis"] .btn { border-radius: 100px; } [data-theme="handwerk"] .btn { text-transform: uppercase; letter-spacing: .06em; font-family: var(--display); font-size: 1.06rem; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--brand); color: var(--on-brand); } .btn-primary:hover { box-shadow: var(--shadow); } [data-theme="handwerk"] .btn-primary { background: var(--accent); color: #14171c; } .btn-ghost { border-color: currentColor; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--bg); } .btn-on-dark { border-color: rgba(255,255,255,.45); color: #fff; } .btn-on-dark:hover { background: rgba(255,255,255,.14); } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } /* ========================================================================= 06 Hero ========================================================================= */ .hero { position: relative; isolation: isolate; overflow: hidden; } .hero-dark { background: var(--dark); color: rgba(255,255,255,.76); } .hero-dark h1 { color: #fff; } .hero-dark .eyebrow { color: var(--accent); } .hero-inner { padding-block: clamp(3.5rem, 9vw, 7.5rem); position: relative; z-index: 2; } .hero-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 900px) { .hero-split { grid-template-columns: 1.05fr .95fr; } } .hero-art { position: absolute; inset: 0; z-index: 1; opacity: .5; } .hero-figure { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .hero-figure img { width: 100%; height: 100%; object-fit: cover; } .hero-facts { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.8rem; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent); } .fact-k { font-family: var(--display); font-size: 1.5rem; color: inherit; font-weight: 700; } .hero-dark .fact-k { color: #fff; } .fact-v { font-size: .86rem; margin-top: .2rem; } /* ========================================================================= 07 Abschnitte & Raster ========================================================================= */ .section { padding-block: var(--section-y); } .section-alt { background: var(--surface); } .section-dark { background: var(--dark); color: rgba(255,255,255,.74); } .section-dark h2, .section-dark h3 { color: #fff; } .section-dark .eyebrow { color: var(--accent); } .head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); } .head.center { margin-inline: auto; text-align: center; } .head p { margin-top: 1rem; font-size: var(--lead); } .grid { display: grid; gap: clamp(1rem, 2.2vw, 1.7rem); } .g2 { grid-template-columns: 1fr; } .g3 { grid-template-columns: 1fr; } .g4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .g2, .g3, .g4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } } /* Rasterkinder dürfen unter ihre Mindestbreite schrumpfen, sonst zwingt ein breites Element (etwa eine Tabelle) die ganze Spalte auseinander. */ .grid > *, .split > *, .hero-split > * { min-width: 0; } .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } } /* ========================================================================= 08 Karten ========================================================================= */ .card { padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); height: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .section-alt .card { background: var(--bg); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .card h3 { margin-bottom: .55rem; } .card p { font-size: .97rem; } .card-num { font-family: var(--display); font-size: 2rem; color: var(--accent); line-height: 1; margin-bottom: .8rem; font-weight: 700; } [data-theme="handwerk"] .card { border-left: 4px solid var(--accent); } /* Immobilien: flache Karten mit feiner Oberkante statt Rahmen. Der Innen- abstand bleibt erhalten, sonst klebt der Text an der Kartenkante. */ .icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1.1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--brand); } [data-theme="praxis"] .icon { border-radius: 50%; width: 52px; height: 52px; } .icon svg { width: 22px; height: 22px; } .ticks { display: grid; gap: .7rem; } .ticks li { display: flex; gap: .7rem; align-items: flex-start; font-size: .98rem; } .ticks svg { flex: none; width: 18px; height: 18px; margin-top: .3rem; color: var(--accent); } /* ========================================================================= 09 Speisekarte / Objektliste / Preisliste ========================================================================= */ .menu-list { display: grid; gap: 1.4rem; } .menu-item { display: grid; gap: .25rem; } .menu-top { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; font-family: var(--display); font-size: 1.12rem; color: var(--ink); font-weight: 700; } .menu-dots { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 1px dotted var(--line); transform: translateY(-.28rem); } .menu-top > span:first-child { min-width: 0; } .menu-price { font-variant-numeric: tabular-nums; white-space: nowrap; } .menu-desc { font-size: .93rem; } .menu-tag { display: inline-block; margin-left: .5rem; font-family: var(--body); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); vertical-align: middle; } .listing { display: grid; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--line); } .listing-media { aspect-ratio: 3 / 2; overflow: hidden; position: relative; } .listing-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .listing:hover .listing-media img { transform: scale(1.04); } .listing-flag { position: absolute; top: 1rem; left: 1rem; padding: .3rem .7rem; border-radius: var(--radius); background: var(--brand); color: var(--on-brand); font-family: var(--body); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .listing-body { padding: clamp(1.2rem, 2.4vw, 1.7rem); display: grid; gap: .7rem; } .listing-place { font-size: .8rem; font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent-text); } .listing-data { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .9rem; } .listing-data b { color: var(--ink); font-variant-numeric: tabular-nums; } .listing-price { font-family: var(--display); font-size: 1.4rem; color: var(--ink); font-weight: 700; } /* ========================================================================= 10 Tabellen ========================================================================= */ .hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .hours caption { text-align: left; font-family: var(--display); font-size: var(--h3); color: var(--ink); margin-bottom: 1rem; font-weight: 700; } .hours th, .hours td { padding: .78rem .4rem; border-bottom: 1px solid var(--line); text-align: left; font-size: .97rem; } .hours th { font-weight: 700; color: var(--ink); font-family: var(--body); } .hours td:last-child { text-align: right; } @media (min-width: 400px) { .hours td:last-child { white-space: nowrap; } } @media (max-width: 399px) { .hours th, .hours td { padding: .7rem .15rem; font-size: .9rem; } } .hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; } .hours .closed { color: var(--muted); } /* In dunklen Abschnitten muss die Tabelle ihre Farben umdrehen, sonst steht dunkler Text auf dunklem Grund und die Wochentage verschwinden. */ .section-dark .hours caption, .section-dark .hours th { color: #fff; } .section-dark .hours td { color: rgba(255, 255, 255, .78); } .section-dark .hours .closed { color: rgba(255, 255, 255, .5); } .section-dark .hours th, .section-dark .hours td { border-bottom-color: rgba(255, 255, 255, .16); } .hero-dark .hours caption, .hero-dark .hours th { color: #fff; } .hero-dark .hours td { color: rgba(255, 255, 255, .78); } .note { padding: 1.2rem 1.4rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 0 var(--radius) var(--radius) 0; font-size: .96rem; } .note strong { color: var(--ink); } /* ========================================================================= 11 Formulare ========================================================================= */ .form-box { padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .form { display: grid; gap: 1.05rem; } .form-2 { display: grid; gap: 1.05rem; grid-template-columns: 1fr; } @media (min-width: 620px) { .form-2 { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: .4rem; } .field label { font-size: .87rem; font-weight: 700; color: var(--ink); font-family: var(--body); } .field .opt { font-weight: 500; color: var(--muted); } .inp { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); } .inp:focus { outline: none; background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } textarea.inp { min-height: 132px; resize: vertical; } select.inp { appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; } .inp[aria-invalid="true"] { border-color: #c0392b; } .err { display: none; font-size: .82rem; font-weight: 600; color: #c0392b; } .err.show { display: block; } .consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; } .consent input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--brand); flex: none; } .hp { position: absolute; left: -9999px; } .sent { display: none; gap: .8rem; align-items: flex-start; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .sent.show { display: flex; } .sent strong { display: block; color: var(--ink); } .contact-line { display: grid; gap: 1rem; } .contact-line li { display: flex; gap: .9rem; align-items: flex-start; } .contact-line svg { flex: none; width: 20px; height: 20px; margin-top: .25rem; color: var(--accent); } .contact-line b { color: var(--ink); display: block; font-family: var(--body); } .contact-line a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); } .contact-line a:hover { border-color: var(--accent); } /* ========================================================================= 12 Footer ========================================================================= */ .foot { background: var(--dark); color: rgba(255,255,255,.6); padding-block: clamp(2.8rem, 6vw, 4.5rem) 1.8rem; font-size: .93rem; } .foot h4 { color: #fff; font-family: var(--body); font-size: .76rem; letter-spacing: var(--caps); text-transform: uppercase; margin-bottom: 1rem; } .foot-grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; padding-bottom: 2.4rem; } @media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; } } .foot .logo-name { color: #fff; } .foot .logo-sub { color: rgba(255,255,255,.55); } .foot ul { display: grid; gap: .6rem; } .foot a { text-decoration: none; } .foot a:hover { color: #fff; } .foot-end { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .84rem; } /* ========================================================================= 13 Bewegung ========================================================================= */ .rev { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); } .rev.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .rev { opacity: 1; transform: none; } } /* ========================================================================= 14 Abschnittsformen, jede Branche baut ihre Seite anders auf ========================================================================= */ /* Vollflächiger Hero mit Bild dahinter (Gastronomie) */ .hero-full { position: relative; display: grid; place-items: center; text-align: center; min-height: min(86vh, 760px); } .hero-full .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-full .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-full::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,12,8,.72), rgba(20,12,8,.5) 45%, rgba(20,12,8,.88)); } .hero-full .hero-inner { position: relative; z-index: 2; max-width: 44rem; } .hero-full .btn-row { justify-content: center; } /* Faktenband quer über die volle Breite */ .strip { border-block: 1px solid var(--line); } .strip-inner { display: grid; grid-template-columns: 1fr; } @media (min-width: 700px) { .strip-inner { grid-template-columns: repeat(3, 1fr); } } .strip-item { padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 2rem); } @media (min-width: 700px) { .strip-item + .strip-item { border-left: 1px solid var(--line); } } @media (max-width: 699px) { .strip-item + .strip-item { border-top: 1px solid var(--line); } } .strip-item h3 { margin-bottom: .5rem; } .strip-item p { font-size: .96rem; } .section-dark .strip, .section-dark .strip-item + .strip-item { border-color: rgba(255,255,255,.16); } /* Abwechselnde Großzeilen (Immobilien, Handwerk) */ .rowitem { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--line); } .rowitem:first-of-type { border-top: 0; } @media (min-width: 860px) { .rowitem { grid-template-columns: 1fr 1fr; } .rowitem:nth-child(even) .rowitem-media { order: 2; } } .rowitem-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 3/2; } .rowitem-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .rowitem:hover .rowitem-media img { transform: scale(1.03); } .rowitem-body h3 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); margin-bottom: .7rem; } .rowitem-no { font-family: var(--display); font-size: 1rem; letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent-text); margin-bottom: .6rem; } /* Nummerierte Leistungsliste (Handwerk) */ .numlist { display: grid; gap: 0; } @media (min-width: 800px) { .numlist { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); } } .numitem { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding-block: 1.6rem; border-top: 1px solid var(--line); } .numitem b { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } .numitem h3 { margin-bottom: .35rem; } .numitem p { font-size: .96rem; } /* Zweispaltige Begriffsliste (Kanzlei) */ .deflist { display: grid; gap: 0; } @media (min-width: 820px) { .deflist { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 6vw, 5rem); } } .defitem { padding-block: 1.7rem; border-top: 1px solid var(--line); } .defitem h3 { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .5rem; } .defitem h3 span { font-family: var(--body); font-size: .74rem; letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent-text); } .defitem p { font-size: .97rem; } /* Senkrechte Zeitleiste (Kanzlei) */ .timeline { position: relative; display: grid; gap: 0; padding-left: 2.6rem; } .timeline::before { content: ""; position: absolute; left: .55rem; top: .8rem; bottom: .8rem; width: 1px; background: var(--line); } .tlitem { position: relative; padding-block: 1.4rem; } .tlitem::before { content: ""; position: absolute; left: -2.35rem; top: 2rem; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); } .tlitem h3 { margin-bottom: .35rem; } .tlitem p { font-size: .97rem; } .tlitem span { font-family: var(--body); font-size: .74rem; letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: .4rem; } /* Informationsband direkt unter dem Hero (Praxis) */ .infobar { margin-top: -2.5rem; position: relative; z-index: 5; } .infobar-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 760px) { .infobar-grid { grid-template-columns: repeat(3, 1fr); } } .infobox { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.3rem, 2.5vw, 1.8rem); box-shadow: var(--shadow); display: grid; gap: .5rem; align-content: start; } .infobox .icon { margin-bottom: .3rem; } .infobox h3 { font-size: 1.08rem; } .infobox p { font-size: .95rem; } .infobox b { color: var(--ink); } /* Zweispaltige Leistungsliste mit Trennlinien (Praxis) */ .svclist { display: grid; gap: 0; } @media (min-width: 800px) { .svclist { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); } } .svcitem { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); } .svcitem .icon { margin-bottom: 0; } .svcitem h3 { font-size: 1.1rem; margin-bottom: .3rem; } .svcitem p { font-size: .95rem; } /* ========================================================================= 15 Akzentfarbe nach Untergrund Die Schmuckfarbe (--accent) bleibt für Icons und Linien. Text nutzt eine Variante mit ausreichendem Kontrast: dunkler auf hellem Grund, heller in dunklen Abschnitten. Sonst liegt die Messingfarbe unter 4,5:1. ========================================================================= */ .section-dark .eyebrow, .hero-dark .eyebrow, .section-dark .rowitem-no, .section-dark .listing-place, .section-dark .tlitem span, .section-dark .defitem h3 span, .section-dark .card p[style*="accent"], .hero-dark .card p[style*="accent"] { color: var(--accent-on-dark); } .section-dark .ticks svg, .hero-dark .ticks svg { color: var(--accent-on-dark); }