/* ==========================================================================
TalizaDesign — Website Relaunch 2026
Synthese aus Variante 1 (editorial/premium) + Variante 2 (Vertrauen/Conversion)
Editoriales Schwarz-Weiß mit dezentem Sand-Akzent · Archivo + Inter
========================================================================== */
/* ---- Design Tokens ---- */
:root {
--ink: #141310; /* Schwarz (warm) */
--ink-soft: #2A2825; /* Anthrazit */
--anthracite: #2A2825;
--paper: #ffffff;
--porcelain: #F6F3ED; /* warmes Off-White für Sektionswechsel */
--mist: #E5DFD4; /* sehr helle Sand-Stufe für Linien */
--line: #E7E1D6; /* feine Trennlinie auf hell */
--field-border:#7C766B; /* Rahmen Formularfelder – Kontrast >=3:1 zu Weiss (WCAG 1.4.11) */
--line-dark: #3A3733; /* Trennlinie auf dunkel */
--stone: #6B665C; /* gedämpfter Text */
--stone-light:#A39D90;
--sand: #C2A883; /* Signatur-Akzent */
--sand-deep: #A8895F;
--sand-text: #806037; /* dunkler Akzent für kleinen Text auf hell (WCAG AA) */
--champagne: #E7DABE;
--maxw: 1200px;
--gutter: clamp(1.25rem, 5vw, 4.5rem);
--display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--radius: 14px;
--radius-sm: 8px;
--t-fast: .25s ease;
--t-med: .5s cubic-bezier(.22,.61,.36,1);
}
/* ---- Schriften (lokal gehostet, kein externer Abruf / DSGVO-konform) ----
Schriftdateien liegen in assets/fonts/. Siehe assets/fonts/README.md zum Beziehen. */
@font-face {
font-family: "Archivo"; font-style: normal; font-weight: 500;
font-display: swap; src: url("../fonts/archivo-500.woff2") format("woff2");
}
@font-face {
font-family: "Archivo"; font-style: normal; font-weight: 600;
font-display: swap; src: url("../fonts/archivo-600.woff2") format("woff2");
}
@font-face {
font-family: "Archivo"; font-style: normal; font-weight: 700;
font-display: swap; src: url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 400;
font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 500;
font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 600;
font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500;
font-display: swap; src: url("../fonts/cormorant-garamond-500-italic.woff2") format("woff2");
}
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--sans);
color: var(--ink);
background: var(--paper);
line-height: 1.65;
font-size: 1.0625rem;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* ---- Typografie ---- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.display {
font-family: var(--display);
font-weight: 700;
font-size: clamp(2.7rem, 7vw, 5.4rem);
line-height: 1.0;
letter-spacing: -0.035em;
}
h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); }
.eyebrow {
font-family: var(--sans);
font-size: .74rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sand-text);
display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sand); display: inline-block; }
.eyebrow.no-tick::before { display: none; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--ink-soft); line-height: 1.6; }
p + p { margin-top: 1rem; }
strong { font-weight: 600; }
/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.section--tight { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.section--warm { background: var(--porcelain); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .lead { color: #E7E3DC; }
.section--ink .eyebrow { color: var(--sand); }
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.two { grid-template-columns: repeat(2, 1fr); }
.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .two, .three { grid-template-columns: 1fr; } }
.divider { height: 1px; background: var(--line); border: 0; }
/* ---- Buttons ---- */
.btn {
display: inline-flex; align-items: center; gap: .6rem;
font-family: var(--sans); font-size: .94rem; font-weight: 600; letter-spacing: .01em;
padding: .95rem 1.7rem;
border: 1px solid var(--ink);
background: var(--ink); color: var(--paper);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--anthracite); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--on-ink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--on-ink:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); transform: translateY(-2px); }
.btn--sand { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.btn--sand:hover { background: var(--sand-deep); border-color: var(--sand-deep); color: #fff; }
.btn .arrow { transition: transform var(--t-fast); }
.btn:hover .arrow { transform: translateX(4px); }
.cta-micro { font-size: .82rem; color: var(--stone); margin-top: .9rem; }
.section--ink .cta-micro { color: var(--stone-light); }
.link-underline {
font-weight: 600; border-bottom: 1px solid var(--sand); padding-bottom: 2px;
transition: border-color var(--t-fast), color var(--t-fast);
}
.link-underline:hover { border-color: currentColor; }
/* ---- Header / Navigation ---- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,0.85);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line);
transition: box-shadow var(--t-fast);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: .65rem; }
.brand .logo { height: 38px; width: auto; }
.brand .brand-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav-links a { font-size: .95rem; font-weight: 500; color: var(--ink-soft); transition: color var(--t-fast); position: relative; }
.nav-links a:not(.btn)::after {
content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--sand); transition: width var(--t-fast);
}
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]:not(.btn)::after { width: 100%; }
.nav-cta { margin-left: .4rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: var(--t-fast); }
@media (max-width: 900px) {
.nav-toggle { display: block; }
.nav-links {
position: fixed; inset: 76px 0 auto 0;
flex-direction: column; align-items: flex-start; gap: 0;
background: var(--paper); border-bottom: 1px solid var(--line);
padding: var(--gutter); height: auto;
transform: translateY(-135%); visibility: hidden;
transition: transform var(--t-med), visibility 0s var(--t-med);
}
.nav-links.open { transform: translateY(0); visibility: visible; transition: transform var(--t-med); }
.nav-links a:not(.btn) { padding: .9rem 0; width: 100%; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
.nav-links a:not(.btn)::after { display: none; }
.nav-cta { margin: 1rem 0 0; width: 100%; justify-content: center; }
}
/* ---- Hero (zentriert) ---- */
.hero { padding-block: clamp(4rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6rem); position: relative; text-align: center; }
.hero .eyebrow { margin-bottom: 1.6rem; justify-content: center; }
.hero .display { max-width: 17ch; margin-inline: auto; }
.hero .display .accent { color: var(--sand-deep); }
.hero .display .script-line {
display: block;
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 500;
text-transform: none;
color: var(--sand-deep);
font-size: clamp(1.9rem, 4.4vw, 3.4rem);
line-height: 1.12;
letter-spacing: 0;
margin-top: .4em;
padding-bottom: .06em;
}
.hero .lead { margin-top: 1.6rem; max-width: 56ch; margin-inline: auto; }
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: center; }
.trust-line {
margin-top: 2.8rem; padding-top: 1.7rem; border-top: 1px solid var(--line);
display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .9rem; color: var(--stone); font-weight: 500;
justify-content: center; max-width: 640px; margin-inline: auto;
}
.trust-line span { display: inline-flex; align-items: center; gap: .5rem; }
.trust-line span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sand); }
/* ---- Marquee / Trust-Bar ---- */
.marquee { background: var(--ink); color: var(--paper); overflow: hidden; padding: 1rem 0; }
.marquee-track { display: flex; gap: 3rem; white-space: nowrap; width: max-content; animation: marquee 28s linear infinite; }
.marquee-track span { font-family: var(--display); font-weight: 500; font-size: 1.05rem; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 3rem; }
.marquee-track span::after { content: "\00b7"; color: var(--sand); }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track { animation: none; } }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
/* ---- Pillars / Cards ---- */
.pillar { border-top: 2px solid var(--ink); padding-top: 1.4rem; display: flex; flex-direction: column; height: 100%; }
.pillar .num { font-family: var(--display); font-weight: 700; font-size: 1em; color: var(--sand-text); margin-right: .5rem; }
.pillar h3 { margin: 0 0 .7rem; }
.pillar p { color: var(--ink-soft); }
.pillar ul { margin-top: auto; padding-top: 1.1rem; }
.pillar ul li { font-size: .92rem; color: var(--stone); padding: .4rem 0; border-bottom: 1px solid var(--line); }
.pillar ul li::before { content: "\2014"; color: var(--sand); margin-right: .5rem; }
/* ---- Hero-Buttons: weiß, bei Hover/Tap schwarz ---- */
.hero-actions .btn {
background: var(--paper);
color: var(--ink);
border-color: var(--ink);
}
.hero-actions .btn:hover,
.hero-actions .btn:focus-visible,
.hero-actions .btn:active {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
/* ---- Navigations-Button „Projekt anfragen": weiß, bei Hover/Tap schwarz ---- */
.nav-cta { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.nav-cta:hover, .nav-cta:focus-visible, .nav-cta:active {
background: var(--ink); color: var(--paper); border-color: var(--ink);
}
/* ---- Mobile-Leiste „Projekt anfragen": weiß, bei Tippen schwarz ---- */
.mobile-cta .btn:not(.btn--ghost) { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.mobile-cta .btn:not(.btn--ghost):hover,
.mobile-cta .btn:not(.btn--ghost):focus-visible,
.mobile-cta .btn:not(.btn--ghost):active {
background: var(--ink); color: var(--paper); border-color: var(--ink);
}
/* ---- Steps (Prozess) ---- */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; padding: 1.9rem 0; border-bottom: 1px solid var(--line); }
.step:first-child { border-top: 1px solid var(--line); }
.step .step-no { counter-increment: step; font-family: var(--display); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--sand-deep); }
.step .step-no::before { content: "0" counter(step); }
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--ink-soft); max-width: 62ch; }
/* ---- Why (Anthrazit 2x2) ---- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
@media (max-width: 720px){ .why-grid { grid-template-columns: 1fr; } }
.why-cell { padding: clamp(1.6rem,3vw,2.4rem); border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.why-cell .num { color: var(--sand); font-family: var(--display); font-weight: 700; font-size: 1em; margin-right: .5rem; }
.why-cell h3 { color: #fff; margin: 0 0 .5rem; }
.why-cell p { color: #C9C4BB; font-size: .96rem; }
/* ---- Cases (Fallbeispiele) ---- */
.case { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); transition: transform var(--t-fast), border-color var(--t-fast); display: flex; flex-direction: column; }
.case:hover { transform: translateY(-4px); border-color: var(--sand); }
.case .case-mock { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--porcelain), var(--mist)); position: relative; border-bottom: 1px solid var(--line); }
.case .case-mock::before { content: ""; position: absolute; inset: 14% 12%; border-radius: 6px; background: #fff; box-shadow: 0 14px 40px rgba(20,19,16,.10); }
.case .case-mock::after { content: ""; position: absolute; left: 18%; top: 20%; width: 30%; height: 6px; border-radius: 3px; background: var(--sand); }
.case .case-body { padding: 1.4rem 1.5rem 1.6rem; }
.case .case-tag { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-text); font-weight: 600; }
.case h3 { font-size: 1.15rem; margin: .5rem 0 .6rem; }
.case p { font-size: .92rem; color: var(--ink-soft); }
.case .result { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .9rem; }
.case .result strong { color: var(--ink); }
.note-honest { font-size: .85rem; color: var(--stone); margin-top: 1.5rem; font-style: italic; }
/* ---- Promise (Versprechen-Band) ---- */
.promise-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--sand); border-radius: var(--radius); padding: clamp(2rem,4vw,3.2rem); box-shadow: 0 30px 60px rgba(20,19,16,.06); }
.promise-points { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; margin: 1.8rem 0; }
@media (max-width: 820px){ .promise-points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .promise-points { grid-template-columns: 1fr; } }
.promise-points .pt { border-top: 1px solid var(--line); padding-top: .9rem; }
.promise-points .pt .num { color: var(--sand-text); font-family: var(--display); font-weight: 700; font-size: .8rem; }
.promise-points .pt h4 { font-family: var(--display); font-weight: 600; font-size: 1rem; margin: .4rem 0 .3rem; }
.promise-points .pt p { font-size: .88rem; color: var(--stone); }
.signature { display: flex; align-items: center; gap: 1rem; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.signature .sig-badge { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; flex-shrink: 0; }
.signature .sig-text { font-size: .95rem; color: var(--ink-soft); }
.signature .sig-text strong { display: block; font-family: var(--display); }
/* ---- FAQ ---- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0; position: relative; font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.faq-q:hover { color: var(--sand-text); }
.faq-q::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: var(--sand-deep); transition: transform var(--t-fast); }
.faq-item.open .faq-q::after { content: "\2212"; }
.js .faq-a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--t-med), visibility 0s var(--t-med); }
.js .faq-item.open .faq-a { visibility: visible; transition: max-height var(--t-med); }
.faq-a-inner { padding: 0 0 1.4rem; color: var(--ink-soft); max-width: 66ch; }
/* ---- Pricing ---- */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }
.price-grid.three-up { grid-template-columns: repeat(3,1fr); }
@media (max-width: 980px){ .price-grid.three-up { grid-template-columns: 1fr; } }
.price-card { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; background: var(--paper); transition: border-color var(--t-fast), transform var(--t-fast); }
.price-card:hover { border-color: var(--sand); transform: translateY(-3px); }
.price-card--feature { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.price-card--feature .price-meta, .price-card--feature .price-card-list li { color: var(--stone-light); }
.price-card--feature .price-card-list li { border-color: var(--line-dark); }
.price-card--feature .price-card-list li::before { color: var(--sand); }
.price-tag { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 3.5vw, 2.4rem); margin: .6rem 0 .2rem; letter-spacing: -0.02em; }
.price-tag span { font-family: var(--sans); font-size: .95rem; font-weight: 400; color: inherit; opacity: .65; }
.price-meta { font-size: .85rem; color: var(--stone); margin-bottom: 1.2rem; }
.price-card h3 { font-size: 1.3rem; }
.price-card-list { margin: 1.2rem 0 1.6rem; flex: 1; }
.price-card-list li { font-size: .92rem; padding: .5rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); padding-left: 1.3rem; position: relative; }
.price-card-list li::before { content: "\2014"; color: var(--sand); position: absolute; left: 0; }
/* Gestaffelte Paketlisten: geerbte Leistungen gedaempft, neue Stufe hervorgehoben */
.price-card-list li.inherited { color: var(--stone-light); }
.price-card-list li.inherited::before { color: var(--mist); }
.price-card--feature .price-card-list li.inherited { color: #837D72; }
.price-card--feature .price-card-list li.inherited::before { color: #5A554D; }
.price-card-list li.tier-step { font-family: var(--display); font-weight: 600; font-size: .7rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--sand-text);
padding: 1.5rem 0 .4rem 0; border-bottom: 1px solid var(--sand); }
.price-card-list li.tier-step::before { content: none; }
.price-card-list li.tier-step:first-child { padding-top: 0; }
.price-card--feature .price-card-list li.tier-step { color: var(--sand); border-bottom-color: var(--sand); }
/* Karten wachsen mit ihrem Inhalt: sichtbare Treppe Basic -> Pro -> Premium */
.price-grid.three-up { align-items: start; }
/* Eignung / Abgrenzung je Paket */
.pkg-fit, .pkg-limit { font-size: .88rem; line-height: 1.55; margin: 0; }
.pkg-fit { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.pkg-limit { margin-top: .65rem; color: var(--stone); }
.pkg-fit b, .pkg-limit b { display: block; font-family: var(--display); font-weight: 600; font-size: .68rem;
letter-spacing: .12em; text-transform: uppercase; margin-bottom: .25rem; }
.pkg-fit b { color: var(--sand-text); }
.pkg-limit b { color: var(--stone-light); }
.price-card--feature .pkg-fit { border-top-color: #3C382F; color: rgba(255,255,255,.82); }
.price-card--feature .pkg-fit b { color: var(--sand); }
/* Praxisbeispiel je Paket */
.pkg-case { font-size: .88rem; line-height: 1.55; margin: .9rem 0 0; padding: .85rem 1rem;
background: var(--porcelain); border-left: 2px solid var(--sand); border-radius: 3px; color: var(--ink-soft); }
.pkg-case b { display: block; font-family: var(--display); font-weight: 600; font-size: .68rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--sand-text); margin-bottom: .25rem; }
.price-card--feature .pkg-case { background: #24221E; border-left-color: var(--sand); color: rgba(255,255,255,.82); }
.price-card--feature .pkg-case b { color: var(--sand); }
/* Hervorgehobene Empfehlung (Pro) */
.price-card--pick { border-color: var(--sand); box-shadow: 0 0 0 1px var(--sand) inset; position: relative; }
.price-badge { position: absolute; top: -.72rem; left: clamp(1.6rem, 3vw, 2.4rem);
background: var(--sand-text); color: #fff; font-family: var(--display); font-weight: 600;
font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
padding: .3rem .75rem; border-radius: 999px; }
/* ---- Branding-Raster (Leistungen 01) ---- */
.branding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2.5rem; }
@media (max-width: 600px) { .branding-grid { grid-template-columns: 1fr; } }
.branding-item { border-top: 2px solid var(--sand); padding-top: .85rem; }
.branding-item h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.branding-item .num { font-family: var(--display); font-weight: 600; font-size: 1em; color: var(--sand-text); margin-right: .5rem; }
.branding-item p { font-size: .9rem; color: var(--stone); margin: 0; line-height: 1.5; }
/* ---- Seitenkopf mit Hintergrundbild (Bild je Seite über eigene Klasse) ---- */
.page-hero.has-bg { position: relative; overflow: hidden; background: var(--porcelain); border-radius: var(--radius); display: flex; flex-direction: column; justify-content: center; min-height: clamp(280px, 36vw, 460px); padding-block: clamp(2.4rem, 5vw, 4rem); }
.page-hero.has-bg::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; }
.page-hero.has-bg::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(95deg, rgba(246,243,237,.94) 0%, rgba(246,243,237,.80) 42%, rgba(246,243,237,.34) 100%); }
.page-hero.has-bg > * { position: relative; z-index: 1; }
/* Mobil: Fließtext nutzt die volle Breite -> gleichmäßigerer, vertikaler Hell-Verlauf für sichere Lesbarkeit */
@media (max-width: 700px) {
.page-hero.has-bg::after { background: linear-gradient(180deg, rgba(246,243,237,.90) 0%, rgba(246,243,237,.74) 50%, rgba(246,243,237,.52) 100%); }
.page-hero.has-bg { min-height: clamp(220px, 52vw, 320px); }
}
.page-hero.hero-leistungen::before { background-image: url("../img/leistungen-titel.webp"); background-position: center bottom; }
.page-hero.hero-ueber::before { background-image: url("../img/ueber-hero.webp"); }
.page-hero.hero-referenzen::before { background-image: url("../img/referenzen-hero.webp"); }
.page-hero.hero-preise::before { background-image: url("../img/preise-hero.webp"); }
.page-hero.hero-kontakt::before { background-image: url("../img/kontakt-hero.webp"); }
/* ---- Bildband (Akzentbilder in Content-Bereichen) ---- */
.img-band { border-radius: var(--radius); border: 1px solid var(--line); aspect-ratio: 16 / 7; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: linear-gradient(135deg, var(--porcelain), var(--mist)); }
.img-band-home { background-image: url("../img/home-band.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); }
.img-band-ueber { background-image: url("../img/ueber-werte.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); }
.img-band-preise { background-image: url("../img/preise-detail.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); }
.badge { display: inline-block; font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .3rem .7rem; border: 1px solid var(--sand); color: var(--sand); border-radius: 999px; margin-bottom: 1rem; }
.price-note { font-size: .82rem; color: var(--stone); margin-top: 1.6rem; }
.addons { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 2.5rem; margin-top: 1.5rem; }
@media (max-width: 620px){ .addons { grid-template-columns: 1fr; } }
.addon { display:flex; justify-content: space-between; gap:1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.addon .addon-price { font-family: var(--display); font-weight: 600; white-space: nowrap; color: var(--ink); }
/* ---- About ---- */
.about-portrait { aspect-ratio: 4/5; background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; }
.about-portrait img { width: 46%; opacity: .85; }
.value { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.value:first-child { border-top: 1px solid var(--line); }
.value h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.value p { color: var(--ink-soft); font-size: .95rem; }
.statement { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem,3.4vw,2.4rem); line-height: 1.25; letter-spacing: -0.02em; max-width: 22ch; }
.statement .accent { color: var(--sand-deep); }
/* ---- Contact ---- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); }
@media (max-width: 900px){ .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.3rem; }
.field label { display:block; font-size: .82rem; font-weight: 600; letter-spacing: .03em; margin-bottom: .5rem; }
.field input, .field textarea, .field select {
width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
padding: .85rem 1rem; border: 1px solid var(--field-border); border-radius: var(--radius-sm);
background: var(--paper); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--sand-deep); box-shadow: 0 0 0 3px rgba(194,168,131,.25); }
.field-hint { font-size: .8rem; color: var(--stone); margin-top: .4rem; }
.field input[type="file"] { padding: .65rem .8rem; background: var(--porcelain); cursor: pointer; }
.field input[type="file"]::file-selector-button { font-family: var(--sans); font-weight: 600; font-size: .85rem; margin-right: .8rem; padding: .45rem .9rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.field input[type="file"]::file-selector-button:hover { background: var(--ink); color: var(--paper); }
.field textarea { min-height: 150px; resize: vertical; }
.checkbox-row { display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color: var(--stone); }
.checkbox-row input { width: auto; margin-top: .3rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.3rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field .optional { color: var(--stone); font-weight: 400; }
.captcha-field input { max-width: 180px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-success { background: var(--porcelain); border: 1px solid var(--line); border-left: 3px solid var(--sand); border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: 1.4rem; font-size: .95rem; color: var(--ink); }
.contact-detail { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.contact-detail:first-of-type { border-top: 1px solid var(--line); }
.contact-detail .label { font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--sand-text); font-weight: 600; }
.contact-detail .value-lg { font-family: var(--display); font-weight: 600; font-size: 1.35rem; margin-top:.2rem; }
.form-note { font-size:.8rem; color: var(--stone); margin-top: 1rem; }
/* ---- Footer ---- */
.site-footer { background: var(--ink); color: var(--paper); padding-block: clamp(3rem,6vw,5rem) 2rem; border-top: 3px solid var(--sand); }
.footer-top { display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
@media (max-width: 780px){ .footer-top { grid-template-columns: 1fr; gap: 2.4rem; } }
.site-footer .brand { margin-bottom: 1.1rem; }
.site-footer .brand-name { color: var(--paper); }
.site-footer .logo { height: 40px; }
.site-footer p { color: #C9C4BB; font-size: .95rem; max-width: 38ch; }
.footer-col h4 { font-family: var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color: var(--sand); margin-bottom: 1rem; font-weight:600; }
.footer-col a { display:block; padding:.3rem 0; color:#E7E3DC; font-size:.95rem; transition: color var(--t-fast); }
.footer-col a:hover { color: var(--sand); }
.footer-bottom { margin-top: clamp(2.4rem,5vw,3.5rem); padding-top: 1.6rem; border-top: 1px solid var(--line-dark); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.82rem; color: var(--stone-light); }
.footer-bottom a { color: var(--stone-light); }
.footer-bottom a:hover { color: var(--sand); }
/* ---- Mobile CTA-Bar ---- */
.mobile-cta { display: none; }
@media (max-width: 900px) {
.mobile-cta {
display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
border-top: 1px solid var(--line);
}
.mobile-cta .btn { flex: 1; justify-content: center; padding: .85rem 1rem; }
main { padding-bottom: 4.5rem; }
/* Footer-Unterkante (Impressum, Datenschutz, Cookies, Barrierefreiheit) frei von der fixierten CTA-Leiste halten */
.site-footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
/* ---- Page hero (Unterseiten) ---- */
.page-hero { padding-block: clamp(3rem,6vw,5.5rem) clamp(2rem,4vw,3rem); }
.page-hero .display { font-size: clamp(2.3rem,6vw,4.2rem); max-width: 18ch; }
.page-hero .lead { margin-top: 1.3rem; max-width: 56ch; }
.breadcrumb { font-size:.82rem; color: var(--stone); margin-bottom: 1.2rem; }
.breadcrumb a:hover { color: var(--sand-text); }
/* ---- Prose (Recht) ---- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.4rem,2.4vw,1.85rem); margin: 2.4rem 0 .8rem; }
.prose h3 { font-size: 1.12rem; margin: 1.6rem 0 .5rem; }
.prose p, .prose li { color: var(--ink-soft); font-size: .98rem; }
.prose ul { list-style: disc; padding-left: 1.2rem; margin: .6rem 0; }
.prose li { padding: .2rem 0; }
.prose a { border-bottom: 1px solid var(--sand); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.1rem 0; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--display); font-weight: 600; color: var(--ink); }
.prose td { color: var(--ink-soft); }
/* ---- Reveal-Animation (nur mit JS) ---- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
/* ---- Kompaktere Abstände (Leistungen & Preise) ---- */
.compact .section { padding-block: clamp(2.4rem, 4.5vw, 3.8rem); }
.compact .section--tight { padding-block: clamp(1.8rem, 3.2vw, 2.8rem); }
.compact .page-hero { padding-block: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.6rem); }
.compact .divider { margin-block: .2rem; }
.compact .price-card-list { align-self: start; }
.compact .price-grid { gap: clamp(1rem, 2vw, 1.4rem); }
.compact h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
/* ---- Anker-Sprünge unter der fixierten Kopfzeile ---- */
section[id] { scroll-margin-top: 92px; }
/* ---- Utilities ---- */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.maxw-sm { max-width: 60ch; } .mx-auto { margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 200; }
.skip-link:focus { left: 0; }
/* ---- Sichtbarer Tastatur-Fokus (WCAG 2.4.7) ---- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.btn:focus-visible, .nav-cta:focus-visible, .btn--on-ink:focus-visible,
.section--ink a:focus-visible, .mobile-cta a:focus-visible,
.consent-banner .btn:focus-visible, .marquee a:focus-visible { outline-color: var(--sand); }
/* ---- Karte (Google Maps, erst nach Einwilligung) ---- */
.map-embed { margin-top: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--porcelain); }
.map-embed iframe { display: block; width: 100%; height: 360px; border: 0; }
.map-placeholder { padding: clamp(1.8rem, 4vw, 3rem) 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.map-placeholder p { max-width: 48ch; color: var(--ink-soft); font-size: .92rem; margin: 0; }
/* ---- Consent-Banner (Einwilligung Google Maps) ---- */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: var(--ink); color: var(--paper);
padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center;
gap: .8rem 1.4rem; box-shadow: 0 -8px 28px rgba(0,0,0,.22); }
.consent-banner p { flex: 1 1 320px; margin: 0; font-size: .9rem; line-height: 1.5; color: #E7E3DC; }
.consent-banner a { color: var(--sand); text-decoration: underline; }
.consent-actions { display: flex; gap: .6rem; flex: 0 0 auto; }
.consent-banner .btn { padding: .6rem 1.1rem; font-size: .85rem; border-color: var(--paper); }
/* Beide Optionen gleichwertig gestaltet (kein Nudging, DSK-Orientierungshilfe / Art. 7 DSGVO) */
.consent-banner .consent-accept, .consent-banner .consent-decline { box-shadow: none; }
.consent-banner .consent-options { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.18); }
.consent-banner .consent-options[hidden] { display: none; }
.consent-banner .consent-option { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: #E7E3DC; }
.consent-banner .consent-option input { accent-color: var(--sand); width: .85rem; height: .85rem; flex: 0 0 auto; }
.consent-banner .consent-option label { cursor: pointer; }
@media (max-width: 640px) {
.consent-banner { gap: .7rem 1rem; padding: .85rem var(--gutter) calc(.85rem + env(safe-area-inset-bottom)); }
.consent-banner p { font-size: .82rem; }
.consent-actions { width: 100%; flex-wrap: wrap; gap: .5rem; }
.consent-banner .btn { flex: 1 1 auto; padding: .55rem .7rem; font-size: .8rem; text-align: center; justify-content: center; }
.consent-banner .consent-options { gap: .5rem 1rem; padding-top: .7rem; }
.consent-banner .consent-option { font-size: .78rem; }
}
/* ---- Markenbilder (lokal in assets/img/, mit Gradient-Fallback falls Datei fehlt) ---- */
.case-mock.photo::before, .case-mock.photo::after { display: none; }
.case-mock.photo { background-size: cover; background-position: center; }
.case-mock.mode { background-image: url("../img/ref-mode.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); }
.case-mock.gastro { background-image: url("../img/ref-gastronomie.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); }
.case-mock.bau { background-image: url("../img/ref-bau.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); }
.about-portrait.photo { background-image: url("../img/ueber-studio.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); background-size: cover; background-position: center; }
.about-portrait.photo img { display: none; }
/* Hero-Bild (Startseite) – zart hinter dem Text */
.hero { overflow: hidden; }
.hero::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: url("../img/hero.webp");
background-size: cover; background-position: center;
opacity: .18;
-webkit-mask-image: radial-gradient(ellipse 80% 78% at 34% 56%, #000 42%, transparent 100%);
mask-image: radial-gradient(ellipse 80% 78% at 34% 56%, #000 42%, transparent 100%);
}
.hero > * { position: relative; z-index: 1; }
/* Bilder der Leistungs-Säulen (Startseite) */
.pillar.has-img { border-top: 0; padding-top: 0; }
.pillar-img { aspect-ratio: 16/10; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 1.2rem; background-size: cover; background-position: center; background-image: linear-gradient(135deg, var(--porcelain), var(--mist)); }
.pillar-img.branding { background-image: url("../img/pillar-branding.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); }
.pillar-img.social { background-image: url("../img/pillar-social.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); }
.pillar-img.webdesign { background-image: url("../img/pillar-webdesign.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); }
.pillar-img.events { background-image: url("../img/home-band.webp"), linear-gradient(135deg, var(--porcelain), var(--mist)); }
/* ---- Blocksatz fuer Fliesstexte (mit Silbentrennung gegen grosse Wortluecken) ---- */
main p, main li, .footer-top p {
hyphens: auto; -webkit-hyphens: auto;
overflow-wrap: break-word; hyphenate-limit-chars: 6 3 3;
}
/* Blocksatz nur fuer Fliesstext, nicht fuer Aufzaehlungen (Bullets bleiben linksbuendig) */
main p, .footer-top p { text-align: justify; text-justify: inter-word; }
/* In schmalen Spalten reisst Blocksatz Wortluecken auf */
main .price-card p, main .price-card li { text-align: left; }
main li { text-align: left; }
/* Auf schmalen/mobilen Screens Blocksatz abschalten -> verhindert grosse Wortluecken */
@media (max-width: 720px) {
main p, .footer-top p { text-align: left; }
}
/* Ausnahmen: zentrierte und kurze Auszeichnungs-Elemente bleiben wie gehabt */
.hero p, .text-center p, p.statement, .map-placeholder p { text-align: center; hyphens: manual; }
main .eyebrow, main .breadcrumb, .faq-q, .case-tag, #form-status, .form-note { text-align: left; hyphens: manual; }
/* ==========================================================================
Leistungsseite 2026 — Uebersicht, Paket-Streifen, Serif-Akzent
Gestaltungssprache aus dem Leistungskatalog: Archivo-Headline mit
Cormorant-Kursiv-Fortsetzung, randlose Rate-Card-Zeilen, Stufen-Streifen.
========================================================================== */
/* Serif-Fortsetzung in Ueberschriften (wie „& Preise." im Leistungskatalog) */
.script-accent {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; text-transform: none;
color: var(--sand-deep); font-size: 1.12em; letter-spacing: .01em;
}
.section--ink .script-accent { color: var(--sand); }
/* ---- Uebersicht: randlose Rate-Card-Zeilen ---- */
.overview { margin-top: 2.2rem; border-top: 1px solid var(--sand); }
.overview .ov-row {
display: grid; grid-template-columns: 2.4rem minmax(9rem, 15rem) 1fr auto;
gap: 1.4rem; align-items: baseline;
padding: 1.35rem .9rem 1.35rem 0; margin-left: 0;
border-bottom: 1px solid var(--line);
text-decoration: none; color: inherit;
transition: padding-left var(--t-fast), background var(--t-fast);
}
.overview .ov-row:hover, .overview .ov-row:focus-visible {
background: var(--porcelain); padding-left: .9rem;
}
.overview .ov-num {
font-family: var(--display); font-weight: 600; font-size: .74rem;
letter-spacing: .14em; color: var(--sand-deep);
}
.overview .ov-name {
font-family: var(--display); font-weight: 600; font-size: 1.06rem; color: var(--ink);
}
.overview .ov-desc { color: var(--stone); font-size: .95rem; line-height: 1.5; }
.overview .ov-price {
font-family: var(--display); font-weight: 500; font-size: .95rem;
color: var(--sand-text); white-space: nowrap;
}
@media (max-width: 720px) {
.overview .ov-row { grid-template-columns: 2.2rem 1fr; row-gap: .3rem; padding-block: 1.1rem; }
.overview .ov-desc, .overview .ov-price { grid-column: 2; }
}
/* ---- Der Einstieg: Band ueber die volle Spaltenbreite ---- */
.entry-band {
margin-top: 2.4rem; padding: 1.5rem clamp(1.2rem, 2.5vw, 1.9rem);
background: var(--porcelain); border-left: 3px solid var(--sand-deep); border-radius: 3px;
display: grid; grid-template-columns: 1fr auto; gap: .5rem 2rem; align-items: start;
}
.entry-band .eb-label {
grid-column: 1 / -1; font-family: var(--sans); font-weight: 600; font-size: .68rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--sand-text); margin: 0 0 .35rem;
}
.entry-band h3 { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.22rem); }
.entry-band .eb-price {
font-family: var(--display); font-weight: 600; font-size: 1.12rem;
color: var(--ink); white-space: nowrap; align-self: center;
}
.entry-band p { grid-column: 1 / -1; margin: .55rem 0 0; color: var(--stone);
font-size: .93rem; line-height: 1.6; max-width: 68ch; }
@media (max-width: 620px) {
.entry-band { grid-template-columns: 1fr; }
.entry-band .eb-price { align-self: start; }
}
/* ---- Drei Stufen als Streifen (Detail steht auf der Preisseite) ---- */
.tier-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.4rem; }
.tier-strip .tier {
position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: 1.4rem clamp(1.1rem, 2vw, 1.5rem); background: var(--paper);
}
.tier-strip .tier--pick { border-color: var(--sand); box-shadow: 0 0 0 1px var(--sand) inset; }
.tier-strip .tier-step {
font-family: var(--sans); font-weight: 600; font-size: .66rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--stone-light); margin: 0 0 .5rem;
}
.tier-strip .tier--pick .tier-step { color: var(--sand-text); }
.tier-strip h3 { margin: 0; font-size: 1.14rem; }
.tier-strip .tier-price {
font-family: var(--display); font-weight: 500; font-size: .98rem;
color: var(--sand-text); margin: .2rem 0 .85rem;
}
.tier-strip .tier-scope { margin: -.35rem 0 .85rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line, rgba(20,19,16,.12)); color: var(--ink); font-size: .88rem; line-height: 1.55; }
.tier-strip .tier-fit { margin: 0; color: var(--stone); font-size: .91rem; line-height: 1.6; }
.tier-strip .tier-fit b {
display: block; font-family: var(--display); font-weight: 600; font-size: .66rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--sand-text); margin-bottom: .3rem;
}
@media (max-width: 860px) { .tier-strip { grid-template-columns: 1fr; } }
/* Karte ohne eigene Ueberschrift (Leistungsliste neben dem Text) */
/* Randlose Leistungsliste neben dem Text (Leistungsseite) */
.price-card--plain { border: 0; background: transparent; padding: 0; border-top: 1px solid var(--ink); }
.price-card--plain .price-card-list { margin: 0; }
.price-card--plain .price-card-list li { padding-top: .75rem; padding-bottom: .75rem; }
/* Rate-Card-Zwischenueberschrift (Preisseite) */
.rate-head {
font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .18em;
text-transform: uppercase; color: var(--sand-text);
margin: 2.6rem 0 0; padding-bottom: .5rem; border-bottom: 1px solid var(--sand);
}
.rate-head + .overview { border-top: 0; margin-top: 0; }
/* ==========================================================================
Typografie-Feinschliff — deutsche Silbentrennung, keine Schusterjungen
========================================================================== */
/* Ueberschriften: nie automatisch trennen, Zeilen gleichmaessig umbrechen.
text-wrap:balance verhindert das einzelne Restwort in der letzten Zeile. */
h1, h2, h3, h4, .display, .price-tag, .ov-name, .tier-strip h3, .entry-band h3 {
hyphens: manual; -webkit-hyphens: manual;
text-wrap: balance;
overflow-wrap: normal;
}
/* Fliesstext: Trennung nur bei ausreichend langen Woertern, mindestens vier
Zeichen vor und drei nach dem Trennstrich (deutsche Satzregel), hoechstens
zwei Trennungen in Folge. text-wrap:pretty verhindert Einzelwort-Schlusszeilen. */
main p, main li, .footer-top p, .tier-fit, .ov-desc, .entry-band p {
hyphens: auto; -webkit-hyphens: auto;
hyphenate-limit-chars: 7 4 3;
hyphenate-limit-lines: 2;
text-wrap: pretty;
}
/* Nicht trennen, wo eine Trennung sinnentstellend oder haesslich waere */
.eyebrow, .rate-head, .tier-step, .eb-label, .price-meta, .ov-price, .tier-price,
.eb-price, .btn, .breadcrumb, .badge, .price-badge, .num, .footer-bottom {
hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal;
}
/* Preise, Masse und Datumsangaben nie umbrechen */
.ov-price, .tier-price, .eb-price, .price-tag { white-space: nowrap; }
/* Blocksatz in schmalen Spalten abschalten (dort reisst er Wortluecken auf) */
.tier-strip p, .entry-band p, .overview .ov-desc,
main .why-cell p, main .value p, main .branding-item p { text-align: left; }
/* ==========================================================================
Paket-Baender (Preisseite) — randlose Stufen-Heros wie im Leistungskatalog
Farbsteigerung: Basic Porzellan -> Pro Champagner -> Premium Schwarz
========================================================================== */
.tier-block { margin-top: clamp(2.6rem, 5vw, 4rem); }
.tier-block:first-of-type { margin-top: 2.2rem; }
.tier-band { padding-block: clamp(2rem, 4vw, 3rem); }
.tier-band--light { background: var(--porcelain); }
.tier-band--accent { background: var(--champagne); }
.tier-band--dark { background: var(--ink); color: var(--paper); }
.tier-band .tb-inner {
display: grid; grid-template-columns: 1fr auto; gap: .6rem 2.5rem; align-items: end;
}
.tb-seg { display: flex; gap: .5rem; margin-bottom: 1.1rem; }
.tb-seg i { width: 34px; height: 3px; background: var(--mist); display: block; }
.tb-seg i.on { background: var(--sand-deep); }
.tier-band--accent .tb-seg i { background: #D6C4A0; }
.tier-band--dark .tb-seg i { background: #3A3630; }
.tier-band--dark .tb-seg i.on { background: var(--sand); }
.tb-step {
font-family: var(--sans); font-weight: 600; font-size: .7rem; letter-spacing: .18em;
text-transform: uppercase; color: var(--sand-text); margin: 0 0 .7rem;
display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.tier-band--dark .tb-step { color: var(--sand); }
.tb-step .price-badge { position: static; }
.tb-name {
font-family: var(--display); font-weight: 700; line-height: 1;
font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: -.02em; margin: 0;
}
.tb-claim {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; color: var(--sand-deep);
font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin: .35rem 0 0;
}
.tier-band--dark .tb-claim { color: var(--sand); }
.tb-price {
font-family: var(--display); font-weight: 700; white-space: nowrap;
font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1; margin: 0; text-align: right;
}
.tb-meta { text-align: right; font-size: .78rem; color: var(--stone); margin: .45rem 0 0; }
.tier-band--dark .tb-meta { color: var(--stone-light); }
@media (max-width: 720px) {
.tier-band .tb-inner { grid-template-columns: 1fr; align-items: start; }
.tb-price, .tb-meta { text-align: left; }
.tb-price { margin-top: 1.1rem; }
}
/* Inhalt unter dem Band */
.tier-detail {
display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.6rem, 4vw, 3.2rem);
padding-top: clamp(1.6rem, 3vw, 2.4rem); align-items: start;
}
@media (max-width: 900px) { .tier-detail { grid-template-columns: 1fr; } }
.tier-detail .price-card-list { margin: 0; }
.tier-detail .lead { margin: 0 0 1.5rem; }
.tier-detail .pkg-fit { margin-top: 0; padding-top: 0; border-top: 0; }
.tier-detail .pkg-limit { margin-top: 1.2rem; }
.tier-detail .pkg-case { margin-top: 1.4rem; }
.tier-detail .tier-actions { margin-top: 1.8rem; }
/* Zwischenzeile vor den drei Stufen */
.tier-lead-in { margin-top: clamp(2.4rem,5vw,3.4rem); }
.tier-detail-head {
font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--sand-text); margin: 0 0 .9rem;
padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
/* ==========================================================================
Preisseite 2026 — Raster, Weissraum und randlose Preisbloecke
Grundsatz: Haarlinien statt Rahmen, grosszuegiger Abstand statt Kaesten.
========================================================================== */
/* ---- Einheitlicher Abschnittskopf: erzwingt ueberall denselben Rhythmus ---- */
.section-head { max-width: 62ch; margin-bottom: clamp(2.8rem, 5.5vw, 4.6rem); }
.section-head .eyebrow { display: flex; margin: 0 0 1.7rem; }
.section-head h2 { margin: 0; }
.section-head .lead { margin: 1.7rem 0 0; }
.section-head--wide { max-width: 72ch; }
/* ---- Die einfache Uebersicht ---- */
.offer { border-top: 1px solid var(--ink); padding-top: 2.2rem; }
.offer-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem); }
.offer-tier { display: block; text-decoration: none; color: inherit; }
.offer-tier .ot-step {
font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--stone-light); margin: 0 0 1.1rem;
}
.offer-tier .ot-name {
font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 1.95rem);
letter-spacing: -.02em; margin: 0;
}
.offer-tier .ot-price {
font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.35rem);
letter-spacing: -.02em; margin: 1rem 0 .1rem; white-space: nowrap;
}
.offer-tier .ot-unit { font-family: var(--sans); font-weight: 400; font-size: .9rem; color: var(--stone); }
.offer-tier .ot-line { margin: 1.1rem 0 0; color: var(--stone); font-size: .95rem; line-height: 1.6; text-align: left; }
.offer-tier .ot-more {
display: inline-block; margin-top: 1.3rem; font-size: .88rem; color: var(--sand-text);
border-bottom: 1px solid var(--sand); padding-bottom: 2px;
}
.offer-tier:hover .ot-more { color: var(--ink); border-bottom-color: var(--ink); }
.offer-tier--pick .ot-step { color: var(--sand-text); }
@media (max-width: 860px) {
.offer-tiers { grid-template-columns: 1fr; gap: 2.4rem; }
.offer-tier + .offer-tier { border-top: 1px solid var(--line); padding-top: 2.4rem; }
}
.offer-more {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.6rem, 4vw, 3.4rem);
margin-top: clamp(2.6rem, 5vw, 4rem); border-top: 1px solid var(--line);
}
.offer-more a {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: 1.4rem 0; text-decoration: none; color: inherit;
border-bottom: 1px solid var(--line);
}
.offer-more .om-name { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.offer-more .om-price { font-family: var(--display); font-weight: 500; color: var(--sand-text); white-space: nowrap; font-size: .95rem; }
.offer-more a:hover .om-price { color: var(--ink); }
@media (max-width: 860px) { .offer-more { grid-template-columns: 1fr; } }
/* ---- Randloser Preisblock (ersetzt die Kaesten) ---- */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2.2rem, 5vw, 4.5rem); }
.specs--single { grid-template-columns: 1fr; }
@media (max-width: 860px) { .specs { grid-template-columns: 1fr; gap: 3rem; } }
.spec { }
.spec-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
padding-bottom: .9rem; border-bottom: 1px solid var(--ink);
}
.spec-head h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.spec-price {
font-family: var(--display); font-weight: 700; white-space: nowrap;
font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.02em;
}
.spec-meta { margin: 1rem 0 0; font-size: .84rem; color: var(--stone); line-height: 1.6; text-align: left; }
.spec ul { margin: 1.5rem 0 0; }
.spec ul li {
font-size: .93rem; line-height: 1.6; padding: .65rem 0 .65rem 1.4rem;
border-bottom: 1px solid var(--line); color: var(--ink-soft); position: relative; text-align: left;
}
.spec ul li::before { content: "\2014"; color: var(--sand); position: absolute; left: 0; }
.spec .spec-cta { margin-top: 1.7rem; }
/* ---- Tier-Detail: Steckbrief mit Haarlinien statt gestapelter Etiketten ---- */
.tier-facts > * { margin: 0; }
.tier-facts .tf-row { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.tier-facts .tf-row:first-child { border-top: 0; padding-top: 0; }
.tier-facts .tf-label {
font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--sand-text); margin: 0 0 .8rem;
}
.tier-facts .tf-label--muted { color: var(--stone-light); }
.tier-facts .tf-row p { margin: 0; font-size: .95rem; line-height: 1.68; color: var(--ink-soft); text-align: left; }
.tier-facts .tf-row--case { background: var(--porcelain); border-top: 0; border-left: 2px solid var(--sand);
padding: 1.3rem 1.4rem; margin-top: 1.6rem; }
.tier-facts .tf-row--case p { color: var(--ink-soft); font-size: .9rem; }
/* ---- Rhythmus-Korrektur: Ueberschriften brauchen Luft ----
Gilt seitenweit, damit Eyebrow, Ueberschrift und Vorspann nie aneinanderkleben. */
main .eyebrow { display: flex; }
main .eyebrow.mb-1 { margin-bottom: 1.6rem; }
main h2 { margin-top: 0; }
main h2.mb-2 { margin-bottom: 1.7rem; }
main h2 + .lead, main h2 + .lead.mt-1 { margin-top: 1.6rem; }
main .section > .wrap > .grid > div > h2 + .lead { margin-top: 1.6rem; }
main h3 + p, main h3 + ul { margin-top: .9rem; }
/* ==========================================================================
Seitenweite Design-Vereinheitlichung 2026
Serif-Zeile in jedem Seitentitel, Haarlinien statt Kaesten auch auf
Startseite und Referenzen, Stufen-Karten mit Claim.
========================================================================== */
/* Serif-Zweitzeile funktioniert in jedem Display-Titel, nicht nur im Hero */
.display .script-line {
display: block;
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; text-transform: none;
color: var(--sand-deep); letter-spacing: .01em;
}
/* Dunkles Raster (Startseite "Unterschied", Leistungen "Pauschale"):
offene Zeilen mit Haarlinie statt geschlossener Zellen */
.why-grid { border: 0; gap: 0 clamp(2rem, 4vw, 3.5rem); }
.why-cell { border: 0; border-top: 1px solid var(--line-dark); padding: 1.5rem 0 1.7rem; }
.why-cell h3 { margin: 0 0 .55rem; }
/* Referenzen: Bild + Text ohne Kastenrahmen */
.case { border: 0; border-radius: 0; background: transparent; }
.case:hover { transform: none; border-color: transparent; }
.case:hover h3 { color: var(--sand-text); }
.case .case-mock { border-bottom: 0; border-radius: var(--radius-sm); }
.case .case-body { padding: 1.3rem 0 0; }
/* Stufen-Karten (Leistungsseite): verlinkt, mit Serif-Claim */
.tier-strip .tier { text-decoration: none; color: inherit; display: block;
transition: border-color var(--t-fast); }
.tier-strip .tier:hover { border-color: var(--sand-deep); }
.tier-strip .tier-claim {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; color: var(--sand-deep);
font-size: 1.08rem; margin: .15rem 0 .5rem;
}
.tier-strip .ot-more { display: inline-block; margin-top: 1.1rem; font-size: .85rem;
color: var(--sand-text); border-bottom: 1px solid var(--sand); padding-bottom: 2px; }
.tier-strip .tier:hover .ot-more { color: var(--ink); border-bottom-color: var(--ink); }
/* Startseite: Stufen-Vorschau vor dem Seitenende */
.home-tiers .offer { border-top-color: var(--ink); }
/* ---- Versprechen-Raster (dunkler Abschnitt, volle Breite) ---- */
.pledge { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 3.5vw, 3rem); }
@media (max-width: 980px) { .pledge { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; } }
@media (max-width: 560px) { .pledge { grid-template-columns: 1fr; } }
.pledge-item { border-top: 1px solid var(--sand-deep); padding-top: 1.3rem; }
.pledge-num {
font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: -.01em;
color: var(--sand); margin: 0 0 1.6rem; line-height: 1;
}
.pledge-item h3 { color: var(--paper); font-size: 1.08rem; margin: 0 0 .7rem; }
.pledge-item p { color: #C9C4BB; font-size: .93rem; line-height: 1.65; margin: 0; text-align: left; }
/* Ueberschriften mit Serif-Akzent brauchen mehr Zeilenabstand, sonst
beruehren sich die Zeilen beim Umbruch (Cormorant laeuft 1,12em hoch). */
h1:has(.script-accent), h2:has(.script-accent), h3:has(.script-accent) { line-height: 1.22; }
.display:has(.script-line) { line-height: 1.06; }
/* ---- Stufen-Kreis und klare Trennung der drei Pakete ---- */
.tb-mark { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.tb-circle {
width: 54px; height: 54px; flex: none; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid var(--sand-deep); color: var(--sand-text);
font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1;
}
.tb-of {
font-family: var(--sans); font-weight: 600; font-size: .66rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--stone);
}
.tier-band--accent .tb-circle { border-color: var(--sand-deep); background: rgba(255,255,255,.5); }
.tier-band--dark .tb-circle { border-color: var(--sand); color: var(--sand); }
.tier-band--dark .tb-of { color: var(--stone-light); }
/* Jedes Paket bekommt einen sichtbaren Anfang und ein sichtbares Ende */
.tier-block { position: relative; padding-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.tier-block + .tier-block { margin-top: 0; }
.tier-block::after {
content: ""; display: block; height: 1px; background: var(--line);
margin: clamp(2.4rem, 5vw, 3.6rem) auto 0;
width: min(var(--maxw), 100%); max-width: calc(var(--maxw) - 2 * var(--gutter));
}
.tier-block:last-of-type::after { display: none; }
.tier-band { border-top: 1px solid rgba(0,0,0,.06); }
.tier-band--dark { border-top-color: transparent; }
/* ---- Einzelblock ueber die volle Breite: Liste zweispaltig, damit der
Block genauso weit laeuft wie die nebeneinanderstehenden Bloecke ---- */
.specs--single .spec ul {
column-count: 2; column-gap: clamp(2.2rem, 5vw, 4.5rem);
}
.specs--single .spec ul li { break-inside: avoid; }
.specs--single .spec-meta { max-width: 78ch; }
@media (max-width: 860px) { .specs--single .spec ul { column-count: 1; } }
/* ---- Kontakt: Ablauf in der rechten Spalte ---- */
.contact-steps { margin-top: 2.6rem; border-top: 1px solid var(--ink); padding-top: 1.6rem; }
.contact-steps-head {
font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--sand-text); margin: 0 0 1.4rem;
}
.cs-item { display: grid; grid-template-columns: 2.6rem 1fr; gap: .4rem 0;
padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.cs-item:last-of-type { border-bottom: 0; }
.cs-num { font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--sand-deep); }
.cs-item h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.cs-item p { margin: 0; font-size: .91rem; line-height: 1.62; color: var(--stone); text-align: left; }
/* ---- Konditionsleiste statt Kleingedruckt-Absatz ---- */
.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem);
margin-top: clamp(2.4rem, 5vw, 3.4rem); }
@media (max-width: 860px) { .terms { grid-template-columns: 1fr; gap: 1.8rem; } }
.term { border-top: 1px solid var(--sand-deep); padding-top: 1.1rem; }
.term-label {
font-family: var(--sans); font-weight: 600; font-size: .66rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--sand-text); margin: 0 0 .6rem;
}
.term p:last-child { margin: 0; font-size: .9rem; line-height: 1.62; color: var(--stone); text-align: left; }
/* Kursive Fussnoten nie im Blocksatz — das reisst Wortluecken auf */
.note-honest, .price-note { text-align: left; max-width: 82ch; }
/* ==========================================================================
Paketblock 2.0 — Profil dreispaltig, Leistungen als Spaltengruppen
Loest die leere linke Spalte auf: kein Element laeuft mehr allein weiter.
========================================================================== */
/* Grosse Geisterziffer im Band */
.tier-band { position: relative; overflow: hidden; }
.tb-ghost {
position: absolute; right: clamp(.5rem, 3vw, 3.5rem); top: 50%; transform: translateY(-52%);
font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500;
line-height: 1; font-size: clamp(11rem, 22vw, 19rem);
color: var(--sand-deep); opacity: .13; pointer-events: none; user-select: none;
}
.tier-band--accent .tb-ghost { color: var(--sand-text); opacity: .12; }
.tier-band--dark .tb-ghost { color: var(--sand); opacity: .16; }
.tier-band .wrap { position: relative; z-index: 1; }
/* --- Profilzeile: Positionierung, Eignung, Abgrenzung, Beispiel --- */
.tier-profile {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(1.4rem, 3vw, 2.6rem);
padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
}
.tier-profile:has(.tp-col:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .tier-profile { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tier-profile { grid-template-columns: 1fr; } }
.tp-col { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.tp-col p { margin: 0; font-size: .92rem; line-height: 1.64; color: var(--stone); text-align: left; }
.tp-col--lead { border-top-color: var(--ink); }
.tp-col--lead p { color: var(--ink); font-size: 1rem; line-height: 1.6; }
.tp-label {
font-family: var(--sans); font-weight: 600; font-size: .66rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--sand-text); margin: 0 0 .7rem !important;
}
.tp-label--muted { color: var(--stone-light); }
.tp-col--case { border-top-color: var(--sand); }
.tp-col--case p:last-child { color: var(--ink-soft); }
/* --- Leistungen: die Stufen-Gruppen stehen nebeneinander --- */
.tier-scope { padding-top: clamp(2rem, 4vw, 3rem); }
.scope-grid { display: grid; gap: clamp(1.6rem, 3.5vw, 3rem); }
.scope-grid--2 { grid-template-columns: repeat(2, 1fr); }
.scope-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .scope-grid--2, .scope-grid--3 { grid-template-columns: 1fr; } }
.scope-head {
font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--sand-text);
margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--sand-deep);
min-height: 1.6em;
}
.scope-head--cont { border-bottom-color: var(--line); }
@media (max-width: 900px) { .scope-head--cont { display: none; } }
.scope-col ul { margin: 0; }
.scope-col li {
list-style: none; position: relative;
display: grid; grid-template-columns: 2.1rem 1fr; column-gap: .4rem; align-items: baseline;
padding: .8rem .6rem .8rem 0; margin-left: -.6rem; padding-left: .6rem;
border-bottom: 1px solid var(--line);
font-size: .92rem; line-height: 1.5; color: var(--ink-soft); text-align: left;
transition: background var(--t-fast);
}
.scope-col li::before { content: none; }
.scope-col .li-n {
grid-row: 1 / span 2; align-self: start;
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: 1.05rem; line-height: 1.5;
color: var(--sand-deep); letter-spacing: .02em;
transition: color var(--t-fast), transform var(--t-fast);
}
.scope-col .li-t { grid-column: 2; font-family: var(--sans); font-weight: 500; color: var(--ink); }
.scope-col .li-s { grid-column: 2; font-size: .8rem; line-height: 1.5; color: var(--stone); margin-top: .12rem; }
.scope-col li:hover { background: var(--porcelain); }
.scope-col li:hover .li-n { color: var(--ink); transform: translateX(2px); }
.scope-col li.inherited { color: var(--stone-light); }
.scope-col li.inherited .li-n { color: var(--mist); font-style: normal; }
.scope-col li.inherited .li-t { font-weight: 400; color: var(--stone-light); }
.scope-col li.inherited:hover { background: transparent; }
.scope-col li.inherited:hover .li-n { transform: none; color: var(--mist); }
/* Einblenden nacheinander (Klasse setzt main.js) */
.scope-anim .scope-col li { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1), background var(--t-fast); }
.scope-anim .scope-col li.is-in { opacity: 1; transform: none; }
.tier-actions { margin-top: clamp(1.8rem, 3vw, 2.4rem); }
/* ==========================================================================
Mobil-Feinschliff — Mindestgroessen fuer Kleinschrift und Tippziele
========================================================================== */
/* Auszeichnungs-Labels laufen auf kleinen Schirmen sonst unter 11 px.
Spezifitaet muss die Ursprungsregeln uebertreffen, sonst greift nichts. */
@media (max-width: 900px) {
.tier-strip .tier-step, .offer-tier .ot-step, .entry-band .eb-label,
.tier-band .tb-of, .tb-step, .scope-head, .term .term-label, .tp-col .tp-label,
.contact-steps .contact-steps-head, .tier-detail-head, .rate-head,
.price-badge, .spec-meta, .cs-item .cs-num, .price-meta {
font-size: .74rem;
}
main .eyebrow, .section-head .eyebrow { font-size: .74rem; letter-spacing: .18em; }
.tier-strip .tier-fit b, .pkg-fit b, .pkg-limit b, .pkg-case b { font-size: .74rem; }
.scope-col li, .tp-col p, .term p, .cs-item p, .tier-strip .tier-fit { font-size: .95rem; }
.note-honest, .price-note, .footnote { font-size: .88rem; }
.overview .ov-desc, .offer-tier .ot-line { font-size: .95rem; }
}
/* Tippziele: auf Touch-Geraeten mindestens 24 px hoch (WCAG 2.5.8) */
.breadcrumb a, .footer-bottom a, .link-underline,
main p a:not(.btn), main li a:not(.btn), .faq-a-inner a {
display: inline-block; min-height: 24px; line-height: 1.5;
padding-block: 2px;
}
.footer-col a { padding-block: .45rem; min-height: 24px; }
.contact-detail a { display: inline-block; min-height: 32px; }
@media (pointer: coarse) {
.breadcrumb a, .footer-bottom a, .link-underline,
main p a:not(.btn), main li a:not(.btn) { padding-block: 5px; }
}
/* Grosse Geisterziffer auf schmalen Schirmen zuruecknehmen */
@media (max-width: 620px) {
.tb-ghost { font-size: 8rem; opacity: .04; right: -.5rem; }
.tier-band--dark .tb-ghost { opacity: .085; }
.tb-circle { width: 46px; height: 46px; font-size: 1.15rem; }
}
/* ==========================================================================
Paketblock 3.0 — kompaktes Band mit Faktenleiste, Seitenrail und
Leistungsraster nebeneinander, Praxisbeispiel als Querband
========================================================================== */
/* Band: dichter, unten eine Faktenleiste */
.tier-band { padding-block: clamp(1.7rem, 3vw, 2.4rem) 0; }
.tb-mark { margin-bottom: 1.2rem; }
.tb-facts {
display: flex; flex-wrap: wrap; gap: .5rem 2.4rem;
margin-top: clamp(1.5rem, 2.5vw, 2rem);
padding-block: .95rem;
border-top: 1px solid rgba(20,19,16,.14);
font-family: var(--sans); font-weight: 500; font-size: .8rem;
letter-spacing: .04em; color: var(--stone);
}
.tb-facts span { position: relative; }
.tb-facts span + span::before {
content: "\00b7"; position: absolute; left: -1.35rem; color: var(--sand-deep);
}
.tier-band--accent .tb-facts { border-top-color: rgba(20,19,16,.16); color: var(--sand-text); }
.tier-band--dark .tb-facts { border-top-color: #3A3630; color: var(--stone-light); }
.tier-band--dark .tb-facts span + span::before { color: var(--sand); }
/* Rumpf: Seitenrail (4) + Leistungsraster (8) */
.tier-body {
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: clamp(2rem, 5vw, 4.5rem);
padding-top: clamp(2rem, 4vw, 3rem);
align-items: start;
}
@media (max-width: 900px) { .tier-body { grid-template-columns: 1fr; gap: 2.4rem; } }
.tier-side .ts-lead {
margin: 0 0 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--ink);
font-size: 1.08rem; line-height: 1.6; color: var(--ink); text-align: left;
}
.ts-block { margin-top: 1.4rem; }
.ts-block p:last-child { margin: 0; font-size: .93rem; line-height: 1.66; color: var(--stone); text-align: left; hyphens: manual; }
.tier-main .scope-grid { gap: clamp(1.4rem, 3vw, 2.4rem); }
/* Praxisbeispiel: Querband ueber die volle Inhaltsbreite */
.tier-case {
display: grid; grid-template-columns: 11rem 1fr; gap: 1rem 2.5rem; align-items: start;
margin-top: clamp(2.2rem, 4vw, 3rem);
padding: clamp(1.3rem, 2.5vw, 1.8rem) clamp(1.3rem, 2.5vw, 2rem);
background: var(--porcelain); border-left: 3px solid var(--sand);
}
.tier-case .tp-label { margin: 0 !important; padding-top: .15rem; }
.tier-case p:last-child { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--ink-soft); text-align: left; hyphens: manual; max-width: 78ch; }
@media (max-width: 700px) { .tier-case { grid-template-columns: 1fr; gap: .6rem; } }
.tier-foot { display: flex; align-items: baseline; gap: 1.6rem; }
.tier-foot .tier-actions { margin-top: clamp(1.8rem, 3vw, 2.4rem); }
/* Weniger Silbentrennung in den schmalen Leistungsspalten */
.scope-col li { hyphens: manual; overflow-wrap: normal; }
/* ==========================================================================
Website-Ausbau 2026-08-24 (2) — Fusszeilen-Claim, Rahmen-Karten,
Preisindex, Warum-Punkte, Fussnoten, Leistungs-Quiz
========================================================================== */
/* ---- Fusszeile: Claim mit Abstand in eigener Zeile ---- */
.site-footer .footer-claim {
margin-top: 1.15rem; color: var(--paper);
font-family: var(--display); font-weight: 600; font-size: 1.04rem; letter-spacing: .01em;
}
.site-footer .footer-claim .script-accent { color: var(--sand); }
/* ---- Leistungskarten mit vollstaendigem Rahmen (Kundenwunsch 24.08.2026) ---- */
.price-card--plain {
border: 1px solid var(--ink); border-radius: 3px; background: var(--paper);
padding: clamp(1.4rem, 2.5vw, 2rem); border-top: 1px solid var(--ink);
}
.price-card--plain:hover { border-color: var(--ink); transform: none; }
.price-card--plain .price-card-list li:last-child { border-bottom: 0; padding-bottom: 0; }
/* ---- Warum-Punkte: nummerierte Haarlinien-Zeilen ---- */
.why-points { margin-top: 2rem; border-top: 1px solid var(--ink); }
.why-points .wp {
display: grid; grid-template-columns: 2.6rem minmax(11rem, 16rem) 1fr;
gap: 1.3rem; align-items: baseline;
padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.why-points .wp-num {
font-family: var(--display); font-weight: 600; font-size: .74rem;
letter-spacing: .14em; color: var(--sand-deep);
}
.why-points .wp-t { font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.why-points .wp p { margin: 0; color: var(--stone); font-size: .95rem; line-height: 1.62; max-width: 62ch; }
@media (max-width: 760px) {
.why-points .wp { grid-template-columns: 2.2rem 1fr; row-gap: .3rem; }
.why-points .wp p { grid-column: 2; }
}
/* ---- Fussnote mit Quelle und Stand ---- */
.footnote { margin-top: 1.3rem; font-size: .78rem; line-height: 1.55; color: var(--stone-light); max-width: 74ch; }
.fn-mark { font-size: .72em; vertical-align: super; color: var(--sand-text); }
/* ---- Preisindex: Bereiche mit Ueberschrift und Unterzeilen ---- */
.pindex-group { padding: clamp(2.4rem, 4.5vw, 3.4rem) 0 1.2rem; border-top: 1px solid var(--ink); }
.pindex-group:first-of-type { margin-top: 2.2rem; }
.pig-head {
display: grid; grid-template-columns: 2.6rem 1fr; gap: .35rem 1.3rem;
align-items: baseline; margin-bottom: 1.5rem;
}
.pig-num {
font-family: var(--display); font-weight: 600; font-size: .74rem;
letter-spacing: .14em; color: var(--sand-deep);
}
.pig-head h3 { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.22; }
.pig-desc { grid-column: 2; margin: 0; color: var(--stone); font-size: .96rem; line-height: 1.6; max-width: 72ch; }
.pig-rows { border-top: 1px solid var(--line); }
.pig-rows .pig-row:last-child { border-bottom: 0; }
.pig-row {
display: grid; grid-template-columns: minmax(11rem, 19rem) 1fr auto 1.1rem;
gap: 1.4rem; align-items: baseline;
padding: 1.1rem .9rem 1.1rem 0;
border-bottom: 1px solid var(--line);
text-decoration: none; color: inherit;
transition: padding-left var(--t-fast), background var(--t-fast);
}
.pig-row:hover, .pig-row:focus-visible { background: var(--porcelain); padding-left: .9rem; }
.pig-row .pr-name { font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.pig-row .pr-badge {
display: inline-block; margin-left: .6rem; padding: .14rem .55rem;
border: 1px solid var(--sand); border-radius: 2rem;
font-family: var(--sans); font-weight: 600; font-size: .62rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--sand-text);
vertical-align: middle; white-space: nowrap;
}
.pig-row .pr-desc { color: var(--stone); font-size: .93rem; line-height: 1.55; }
.pig-row .pr-price {
font-family: var(--display); font-weight: 500; font-size: .95rem;
color: var(--sand-text); white-space: nowrap;
}
.pig-row .pr-arrow { color: var(--sand-deep); }
@media (max-width: 760px) {
.pig-row { grid-template-columns: 1fr 1.1rem; row-gap: .3rem; }
.pig-row .pr-desc { grid-column: 1; }
.pig-row .pr-price { grid-column: 1; }
.pig-row .pr-arrow { grid-row: 1; grid-column: 2; }
}
/* ---- Ablauf-Zeilen auf den Preis-Unterseiten ---- */
.mini-steps { margin-top: 1.8rem; border-top: 1px solid var(--ink); }
.mini-steps .ms {
display: grid; grid-template-columns: 2.6rem minmax(11rem, 16rem) 1fr;
gap: 1.3rem; align-items: baseline;
padding: 1.05rem 0; border-bottom: 1px solid var(--line);
}
.mini-steps .ms-num { font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .14em; color: var(--sand-deep); }
.mini-steps .ms-t { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.mini-steps .ms p { margin: 0; color: var(--stone); font-size: .94rem; line-height: 1.6; max-width: 62ch; }
@media (max-width: 760px) {
.mini-steps .ms { grid-template-columns: 2.2rem 1fr; row-gap: .3rem; }
.mini-steps .ms p { grid-column: 2; }
}
/* ---- Leistungs-Quiz auf der Startseite ---- */
.quiz-shell { max-width: 880px; margin-inline: auto; }
.quiz {
border: 1px solid var(--ink); border-radius: 3px; background: var(--paper);
padding: clamp(1.7rem, 4vw, 2.8rem);
}
.section--warm .quiz { background: var(--paper); }
.quiz-progress {
display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
font-family: var(--sans); font-weight: 600; font-size: .68rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--sand-text);
margin-bottom: .8rem;
}
.quiz-bar { position: relative; height: 2px; background: var(--line); margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.quiz-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; background: var(--sand-deep); transition: width .35s ease; }
.quiz-q {
font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.5rem);
line-height: 1.25; margin: 0 0 1.5rem; text-wrap: balance;
}
.quiz-opts { display: grid; gap: .7rem; }
.quiz-opt {
display: grid; grid-template-columns: 1fr 1.1rem; align-items: center; gap: 1rem;
width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
transition: border-color var(--t-fast), background var(--t-fast);
}
.quiz-opt:hover, .quiz-opt:focus-visible { border-color: var(--sand); background: var(--porcelain); }
.quiz-opt .qo-t { font-family: var(--display); font-weight: 600; font-size: .98rem; }
.quiz-opt .qo-s { display: block; margin-top: .18rem; color: var(--stone); font-size: .87rem; line-height: 1.5; font-weight: 400; }
.quiz-opt .qo-arrow { color: var(--sand-deep); }
.quiz-back {
margin-top: 1.6rem; display: inline-block; background: none; border: 0; cursor: pointer;
font-family: var(--sans); font-size: .85rem; color: var(--stone);
text-decoration: underline; text-underline-offset: .25em; padding: 0;
}
.quiz-back:hover { color: var(--ink); }
.quiz-result .qr-eyebrow {
font-family: var(--sans); font-weight: 600; font-size: .68rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--sand-text); margin: 0 0 .8rem;
}
.quiz-result h3 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; }
.quiz-result .qr-price { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--sand-text); margin: .5rem 0 1.1rem; }
.quiz-result .qr-why { margin: 0 0 1.6rem; color: var(--stone); font-size: .98rem; line-height: 1.65; max-width: 62ch; }
.quiz-result .qr-actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.quiz-result .qr-restart { margin-top: 1.5rem; }
.quiz-note { margin-top: 1.2rem; font-size: .85rem; color: var(--stone); }
/* ==========================================================================
Website-Feinschliff 2026-08-24 (3) — Der Kompass, Serif-Ziffern,
Sand-Rahmen, Preisindex-Veredelung
========================================================================== */
/* ---- Einheitliche Ziffern-Signatur: Cormorant-Kursiv in Sand ---- */
.why-points .wp-num, .mini-steps .ms-num {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: 1.3rem;
letter-spacing: .02em; color: var(--sand-deep); line-height: 1;
}
.pig-num {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 1.9rem);
letter-spacing: .02em; color: var(--sand-deep); line-height: 1;
}
/* ---- Leistungskarten: Rahmen in Sand statt Schwarz ---- */
.price-card--plain { border-color: var(--sand); }
.price-card--plain:hover { border-color: var(--sand-deep); }
/* ---- Preisindex veredelt ---- */
.pig-head h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
.pig-row .pr-name { font-size: 1.05rem; }
.pig-row .pr-price {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: 1.12rem; color: var(--sand-text);
}
.pig-row .pr-arrow {
display: inline-block; transition: color var(--t-fast);
animation: pr-nudge 2.4s ease-in-out infinite;
}
@keyframes pr-nudge {
0%, 60%, 100% { transform: translateX(0); opacity: .75; }
30% { transform: translateX(6px); opacity: 1; }
}
.pig-row:hover .pr-arrow, .pig-row:focus-visible .pr-arrow { animation: none; transform: translateX(6px); opacity: 1; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.pig-row .pr-arrow { animation: none; opacity: 1; }
}
/* ---- Preisbloecke: Preis in Serif-Kursiv ---- */
.spec .spec-price {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: 1.18rem; color: var(--sand-text);
}
/* ---- Der Kompass: editorial statt Kasten ---- */
.quiz {
border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
border-radius: 0; background: transparent;
padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.8rem, 3.5vw, 2.6rem);
}
.quiz-progress { color: var(--sand-text); margin-bottom: .9rem; }
.quiz-bar { background: var(--mist); }
.quiz-step { animation: quizIn .32s ease both; }
@keyframes quizIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .quiz-step { animation: none; } }
.quiz-q { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 1.7rem; }
.quiz-opts { gap: 0; border-top: 1px solid var(--line); }
.quiz-opt {
grid-template-columns: 2.6rem 1fr 1.4rem; align-items: baseline; gap: 1.1rem;
padding: 1.15rem .9rem 1.15rem 0;
border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
}
.quiz-opt:hover, .quiz-opt:focus-visible { background: var(--paper); border-color: var(--line); padding-left: .9rem; }
.quiz-opt .qo-m {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: 1.3rem; color: var(--sand-deep); line-height: 1;
}
.quiz-opt .qo-t { font-size: 1.02rem; }
.quiz-opt .qo-arrow { transition: transform var(--t-fast), color var(--t-fast); }
.quiz-opt:hover .qo-arrow, .quiz-opt:focus-visible .qo-arrow { transform: translateX(5px); color: var(--ink); }
.quiz-result h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.quiz-result .qr-price {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: 1.3rem; margin: .55rem 0 1.2rem;
}
.quiz-result .qr-sel {
margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line);
font-size: .82rem; line-height: 1.6; color: var(--stone-light); max-width: 70ch;
}
/* ==========================================================================
Website-Feinschliff 2026-08-24 (4) — Bedarfsanalyse-Startfenster,
Marker-Ausrichtung, Detail-Listen der Preis-Unterseiten
========================================================================== */
/* Optionsmarker exakt zentriert (Buchstaben sassen zuvor verschoben) */
.quiz-opt { align-items: center; }
.quiz-opt .qo-m { text-align: center; align-self: center; }
.quiz-opt .qo-arrow { align-self: center; }
/* Start-Fenster der Bedarfsanalyse */
.quiz-start .qs-kicker {
font-family: var(--sans); font-weight: 600; font-size: .68rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--sand-text);
margin: 0 0 .9rem;
}
.quiz-start .quiz-q { margin-bottom: 1rem; }
.quiz-start .qs-text { margin: 0 0 1.7rem; color: var(--stone); font-size: .98rem; line-height: 1.66; max-width: 62ch; }
.quiz-start .qs-note { margin: 1.1rem 0 0; font-size: .82rem; color: var(--stone-light); }
/* Detail-Listen: Leistung + Erklaerung als Haarlinien-Zeilen */
.dl { margin-top: 1.6rem; border-top: 1px solid var(--ink); }
.dl .dli {
display: grid; grid-template-columns: minmax(12rem, 19rem) 1fr;
gap: 1.3rem; align-items: baseline;
padding: 1.15rem 0; border-bottom: 1px solid var(--line);
}
.dl .dli .dlt { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.dl .dli p { margin: 0; color: var(--stone); font-size: .94rem; line-height: 1.64; max-width: 68ch; }
@media (max-width: 760px) {
.dl .dli { grid-template-columns: 1fr; row-gap: .35rem; }
}
/* ---- Bedarfsanalyse: Einordnungshilfe unter der Frage ---- */
.quiz-hint {
margin: -1.05rem 0 1.6rem; font-size: .88rem; line-height: 1.55;
color: var(--stone); max-width: 62ch;
}
/* ==========================================================================
Bedarfsanalyse-Veredelung 2026-08-25 (5) — mittiges Layout, Puls-Button,
Serif-Titel, zentrierte Ergebnis-Karte
========================================================================== */
/* Mittiges Layout fuer Start, Fragen und Ergebnis
(p-Elemente explizit — der globale Blocksatz wuerde sonst gewinnen) */
.quiz-start, .quiz-result { text-align: center; }
.quiz-start p, .quiz-result p, .quiz .quiz-q, .quiz .quiz-hint {
text-align: center; hyphens: manual;
}
.quiz-q, .quiz-hint { margin-left: auto; margin-right: auto; }
.quiz-hint { max-width: 56ch; }
.quiz-step { display: flow-root; }
.quiz-step > .quiz-back { display: block; margin-left: auto; margin-right: auto; }
/* Start-Fenster */
.quiz-start::before {
content: ""; display: block; width: 2.6rem; height: 2px;
background: var(--sand-deep); margin: .2rem auto 1.5rem;
}
.quiz-start .qs-kicker { margin-bottom: 1.1rem; }
.quiz-start .qs-title {
font-family: var(--display); font-weight: 700; letter-spacing: -.01em;
font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.22;
margin: 0 0 1.1rem; text-wrap: balance;
}
.quiz-start .qs-title .script-accent { font-weight: 500; }
.quiz-start .qs-text { margin: 0 auto 2rem; max-width: 56ch; }
.quiz-start .qr-actions { justify-content: center; }
.quiz-start .qs-note { margin-top: 1.3rem; }
/* Puls des Start-Buttons: ruhiger Sand-Schein */
@keyframes btnPulse {
0% { box-shadow: 0 0 0 0 rgba(168, 137, 95, .38); }
70% { box-shadow: 0 0 0 16px rgba(168, 137, 95, 0); }
100% { box-shadow: 0 0 0 0 rgba(168, 137, 95, 0); }
}
.quiz-start-btn { animation: btnPulse 2.6s ease-out infinite; }
.quiz-start-btn:hover, .quiz-start-btn:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .quiz-start-btn { animation: none; } }
/* Ergebnis-Karte zentriert */
.quiz-result .qr-why { margin-left: auto; margin-right: auto; }
.quiz-result .qr-actions { justify-content: center; }
.quiz-result .qr-sel { margin-left: auto; margin-right: auto; }
.quiz-result h3 .script-accent { font-size: 1em; }
/* ---- Mehrfachauswahl in der Bedarfsanalyse ---- */
.quiz-opt.sel {
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--sand), inset 3px 0 0 var(--sand-deep);
}
.quiz-opt.sel .qo-m { color: var(--ink); }
.quiz-opt.sel .qo-arrow { color: var(--sand-text); transform: none; }
.quiz-nextwrap { display: flex; justify-content: center; margin-top: 1.7rem; }
.quiz-next[disabled] { opacity: .4; pointer-events: none; }
/* ==========================================================================
Bedarfsanalyse-Panel 2026-08-25 (6) — Einleitung und Analyse als Einheit,
zentrierter Fortschritt, deutlicherer Puls
========================================================================== */
/* Das gemeinsame Panel (bewusste Kasten-Ausnahme: Einleitung + Analyse gehoeren zusammen) */
.ba-panel {
max-width: 860px; margin: 0 auto;
background: var(--paper); border: 1px solid var(--sand); border-radius: 3px;
padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.4rem, 4vw, 3rem) clamp(1.8rem, 4vw, 2.8rem);
}
.ba-head { text-align: center; padding-bottom: clamp(1.6rem, 3vw, 2.2rem); border-bottom: 1px solid var(--line); }
.ba-head .eyebrow { margin-bottom: 1.1rem; }
.ba-head h2 { margin: 0 0 .7rem; }
.ba-head .ba-lead { margin: 0; color: var(--stone); font-size: 1.02rem; text-align: center; }
/* Quiz im Panel: keine eigenen Rahmen mehr, Fortschritt mittig */
.ba-panel .quiz { border: 0; padding: clamp(1.7rem, 3.5vw, 2.4rem) 0 0; background: transparent; }
.quiz-progress {
display: block; text-align: center; margin-bottom: .75rem;
}
.quiz-bar { max-width: 260px; margin-left: auto; margin-right: auto; }
.quiz-start::before { display: none; }
.quiz-start .qs-kicker { margin-top: .4rem; }
/* Puls mit sanftem Aufwaertsschwung */
@keyframes btnPulse {
0% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(168, 137, 95, .5); }
35% { transform: translateY(-5px); }
65% { transform: translateY(0); box-shadow: 0 0 0 18px rgba(168, 137, 95, 0); }
100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(168, 137, 95, 0); }
}
.quiz-start-btn { animation: btnPulse 2.2s ease-in-out infinite; will-change: transform; }
/* ==========================================================================
Bedarfsanalyse-Feinschliff 2026-08-25 (7) — mehr Luft im Panel
========================================================================== */
.ba-panel {
padding: clamp(3rem, 6vw, 4.6rem) clamp(1.6rem, 5vw, 3.8rem) clamp(2.4rem, 4.5vw, 3.4rem);
}
.ba-head { padding-bottom: clamp(2.2rem, 4vw, 3rem); }
.ba-head .eyebrow { margin-bottom: 1.6rem; }
.ba-head h2 { margin: 0; }
.ba-panel .quiz { padding-top: clamp(2.4rem, 4.5vw, 3.4rem); }
.quiz-progress { margin-bottom: .95rem; }
.ba-panel .quiz-bar { margin-bottom: clamp(2.2rem, 4vw, 3rem); }
.quiz-start .qs-kicker { margin-bottom: 1.4rem; }
.quiz-start .qs-title { margin-bottom: 1.4rem; }
.quiz-start .qs-text { margin-bottom: 2.3rem; }
/* ==========================================================================
Feinschliff 2026-08-25 (8) — Hero-Eyebrow mobil, Listenabstand gestapelt
========================================================================== */
/* Der Hero-Eyebrow bricht auf schmalen Displays um und wird mittig gesetzt. */
.hero .eyebrow { text-align: center; flex-wrap: wrap; }
@media (max-width: 560px) {
.hero .eyebrow { display: block; }
.hero .eyebrow::before { display: none; }
}
/* Gestapelte Leistungsspalten lesen sich als eine Liste: kein Extra-Abstand
zwischen der letzten Position der ersten und der ersten der zweiten Spalte. */
@media (max-width: 900px) {
.scope-grid--2, .scope-grid--3,
.tier-main .scope-grid--2, .tier-main .scope-grid--3 { row-gap: 0; }
.scope-col + .scope-col .scope-head { margin-top: 1.6rem; }
}
/* ==========================================================================
Startseite & Bedarfsanalyse 2026-08-25 (9) — Hero ohne Vertrauenszeile,
Position des dunklen Bandes, Teaser-Verweis auf die Analyse
========================================================================== */
/* Ohne die Vertrauenszeile braucht der Hero unten mehr Ruhe, damit das
dunkle Band nicht an den Buttons klebt. */
.hero { padding-block: clamp(4rem, 9vw, 8rem) clamp(4.5rem, 8.5vw, 7.5rem); }
.hero .cta-micro { margin-bottom: 0; }
/* Das dunkle Band trennt Hero und Bedarfsanalyse und bekommt beidseitig Luft. */
.marquee { padding: 1.15rem 0; }
.marquee + .section { padding-top: clamp(3.4rem, 6.5vw, 5.5rem); }
/* Verweis auf die Bedarfsanalyse (Leistungen, Preise) */
.ba-teaser {
margin-top: clamp(2.4rem, 5vw, 3.6rem);
display: grid; grid-template-columns: 1fr auto; gap: 1.2rem 2.5rem; align-items: center;
padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.4rem);
background: var(--porcelain); border-left: 3px solid var(--sand-deep);
}
.ba-teaser .bat-kicker {
margin: 0 0 .5rem; font-family: var(--sans); font-weight: 600; font-size: .68rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--sand-text); text-align: left;
}
.ba-teaser .bat-title {
margin: 0 0 .4rem; font-family: var(--display); font-weight: 600;
font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--ink); text-align: left;
}
.ba-teaser .bat-text {
margin: 0; color: var(--stone); font-size: .95rem; line-height: 1.6;
max-width: 62ch; text-align: left; hyphens: manual;
}
.ba-teaser .bat-action { margin: 0; }
@media (max-width: 700px) {
.ba-teaser { grid-template-columns: 1fr; }
}
/* ==========================================================================
Aufhaenger-Veredelung 2026-08-25 (10) — gestaffelter Auftritt, eine
Primaerhandlung, typografischer Feinschliff, Scroll-Andeutung
========================================================================== */
/* ---- 1) Gestaffelter Auftritt: die Elemente erscheinen nacheinander ---- */
.js .hero .reveal { transform: translateY(14px); transition-duration: .85s; }
.js .hero .reveal.in { transform: none; }
.js .hero .eyebrow { transition-delay: .05s; }
.js .hero .display { transition-delay: .17s; }
.js .hero .lead { transition-delay: .31s; }
.js .hero .hero-actions { transition-delay: .43s; }
.js .hero .cta-micro { transition-delay: .53s; }
@media (prefers-reduced-motion: reduce) {
.js .hero .reveal { transition-delay: 0s; transform: none; }
}
/* ---- 2) Feine Haarlinie ueber dem Eyebrow ---- */
.hero .eyebrow { position: relative; padding-top: 2.6rem; }
.hero .eyebrow::after {
content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 1px; height: 1.7rem;
background: linear-gradient(to bottom, transparent, var(--sand-deep));
}
/* ---- 3) Typografischer Feinschliff der Zeile ---- */
.hero .display .script-line { font-size: clamp(2.1rem, 5vw, 3.9rem); margin-top: .26em; }
.hero .display .dot { color: var(--ink); } /* 26.08.2026 Taliza: Schlusspunkt von Ihr Auftritt schwarz, nicht Sand */
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 46ch; }
/* ---- 4) Beide Handlungen im gleichen Rahmen (Kundenwunsch 25.08.2026) ---- */
.hero-actions { gap: .9rem; }
/* ---- 5) Scroll-Andeutung: verschwindet beim ersten Scrollen ---- */
.scroll-cue { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); display: flex; justify-content: center; }
.scroll-cue span {
position: relative; display: block; width: 1px; height: 44px; overflow: hidden;
background: linear-gradient(to bottom, var(--mist), var(--line));
}
.scroll-cue span::after {
content: ""; position: absolute; left: 0; width: 1px; height: 45%;
background: var(--sand-deep); animation: scrollCue 2.6s ease-in-out infinite;
}
@keyframes scrollCue { 0% { top: -45%; } 65%, 100% { top: 100%; } }
.js .scroll-cue { opacity: 0; animation: cueIn .9s ease 1s forwards; }
@keyframes cueIn { to { opacity: 1; } }
.scrolled .hero .scroll-cue { opacity: 0; animation: none; transition: opacity .45s ease; }
@media (prefers-reduced-motion: reduce) {
.scroll-cue span::after { animation: none; top: 28%; }
.js .scroll-cue { opacity: 1; animation: none; }
}
/* Der Aufhaenger traegt jetzt die Scroll-Andeutung — unten etwas weniger Polster. */
.hero { padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 5.5vw, 4.6rem); }
/* Premium: Rail horizontal ueber den drei Leistungsspalten */
.tier-body--stack { grid-template-columns: 1fr; }
.tier-body--stack .tier-side {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 4fr);
gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start;
}
.tier-body--stack .ts-block { margin-top: 0; }
@media (max-width: 700px) { .tier-body--stack .tier-side { grid-template-columns: 1fr; gap: 1.4rem; } }
/* Streunende Trennlinie und Riesenabstand nach dem letzten Paket beheben:
:last-of-type griff nicht, weil nach den Bloecken noch ein div.wrap folgt */
#paket-premium::after { display: none; }
#paket-premium { padding-bottom: clamp(1.2rem, 2vw, 1.8rem); }
.tier-block + .wrap .note-honest { margin-top: 0; }
/* ---- Instagram & Etsy in der Kopfleiste ---- */
.nav-social {
display: inline-flex; align-items: center; gap: 1.15rem;
margin-left: .5rem; padding-left: clamp(1rem, 2vw, 1.7rem);
border-left: 1px solid var(--line);
}
.nav-ico {
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-soft); min-height: 24px; transition: color var(--t-fast), transform var(--t-fast);
}
.nav-ico svg { width: 19px; height: 19px; display: block; }
.nav-ico:hover { color: var(--sand-text); transform: translateY(-1px); }
.nav-links .nav-ico::after { display: none !important; }
.nav-ico--txt {
font-family: var(--display); font-weight: 600; font-size: .86rem;
letter-spacing: .05em; line-height: 1;
}
@media (max-width: 900px) {
.nav-social {
border-left: 0; margin: .2rem 0 0; padding: 1rem 0 0;
width: 100%; justify-content: flex-start; gap: 1.6rem;
border-top: 1px solid var(--line);
}
.nav-links .nav-social a { width: auto; border-bottom: 0; padding: .2rem 0; }
.nav-links .nav-ico--txt { font-size: 1rem; }
.nav-ico svg { width: 22px; height: 22px; }
}
/* ==========================================================================
Preis-Unterseiten — Bereichs-Karten, Krumenpfad, Seitenwechsler
========================================================================== */
.area-links { border-top: 1px solid var(--ink); }
.area-link {
display: grid; grid-template-columns: 3rem minmax(0,1fr) auto 2rem;
gap: 1.4rem; align-items: center;
padding: clamp(1.5rem, 3vw, 2.1rem) .2rem;
border-bottom: 1px solid var(--line);
text-decoration: none; color: inherit;
transition: background var(--t-fast), padding-left var(--t-fast);
}
.area-link:hover { background: rgba(255,255,255,.55); padding-left: 1rem; }
.al-num { font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .14em; color: var(--sand-deep); }
.al-name { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.015em; }
.al-desc { display: block; margin-top: .3rem; color: var(--stone); font-size: .92rem; }
.al-price { font-family: var(--display); font-weight: 600; color: var(--sand-text); white-space: nowrap; }
.al-arrow { color: var(--sand-deep); font-size: 1.2rem; transition: transform var(--t-fast); }
.area-link:hover .al-arrow { transform: translateX(4px); }
@media (max-width: 640px) {
.area-link { grid-template-columns: 2.2rem minmax(0,1fr); }
.al-price, .al-arrow { grid-column: 2; justify-self: start; }
}
.crumb-bar { padding-top: 1.6rem; }
.crumb-bar .breadcrumb { margin-bottom: 1.2rem; }
.tier-switch {
display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: baseline;
border-top: 1px solid var(--line);
padding-block: clamp(1.6rem, 3vw, 2.2rem) clamp(2.4rem, 5vw, 3.6rem);
}
.tier-switch-spacer { flex: 1; }
.tier-switch-link { font-size: .93rem; color: var(--stone); }
.tier-switch-link strong { font-family: var(--display); font-weight: 600; color: var(--ink); }
.tier-switch-link:hover, .tier-switch-link:hover strong { color: var(--sand-text); }
/* ==========================================================================
Feinschliff 2026-08-25 (11) — Puls am Verweis-Button (Leistungen, Preise)
Gleiche Bewegung wie der Startknopf der Bedarfsanalyse.
========================================================================== */
.ba-teaser .bat-action .btn {
animation: btnPulse 2.2s ease-in-out infinite;
will-change: transform;
}
.ba-teaser .bat-action .btn:hover,
.ba-teaser .bat-action .btn:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) {
.ba-teaser .bat-action .btn { animation: none; }
}
/* Umfangsband im Paketkopf (ersetzt .tb-facts, 03.09.2026) — Kennzahl gross, Bezeichnung darunter */
.tb-scope {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: clamp(1.6rem, 2.8vw, 2.4rem);
border-top: 1px solid rgba(20,19,16,.14);
padding-top: clamp(1.3rem, 2.2vw, 1.9rem); padding-bottom: clamp(1rem, 2vw, 1.6rem);
}
.tbs { display: flex; flex-direction: column; gap: .45rem; padding-right: 1.2rem; }
.tbs + .tbs { border-left: 1px solid rgba(20,19,16,.12); padding-left: clamp(1.2rem, 2.4vw, 2rem); }
.tbs-num {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: clamp(2.3rem, 4vw, 3.3rem);
line-height: .9; letter-spacing: -.01em; color: var(--ink);
}
.tbs-num::after { content: ""; display: block; width: 1.6rem; height: 1px; background: var(--sand-deep); margin-top: .75rem; }
.tbs-lab {
font-family: var(--sans); font-weight: 500; font-size: .7rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--stone); line-height: 1.5;
}
.tier-band--accent .tbs + .tbs { border-left-color: rgba(20,19,16,.16); }
.tier-band--accent .tbs-num { color: var(--ink); }
.tier-band--accent .tbs-lab { color: var(--sand-text); }
.tier-band--dark .tb-scope { border-top-color: #3A3630; }
.tier-band--dark .tbs + .tbs { border-left-color: #3A3630; }
.tier-band--dark .tbs-num { color: var(--paper); }
.tier-band--dark .tbs-num::after { background: var(--sand); }
.tier-band--dark .tbs-lab { color: var(--stone-light); }
@media (max-width: 760px) {
.tb-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
.tbs:nth-child(3) { border-left: 0; padding-left: 0; }
}
/* Kennzahlenband: Einblend- und Zählanimation (nur wenn JS die Klasse tbs-anim setzt) */
.tbs-anim .tbs { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.tbs-anim .tbs.is-in { opacity: 1; transform: none; }
.tbs-anim .tbs-num::after { width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1) .35s; }
.tbs-anim .tbs.is-in .tbs-num::after { width: 1.6rem; }
.tbs-num { font-variant-numeric: tabular-nums; }
/* Paketwechsel: Breadcrumb links, Schalter rechts, klebt unter der Kopfleiste (03.09.2026) */
.crumb-bar--pkg {
position: sticky; top: 76px; z-index: 90;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding-top: .9rem; padding-bottom: .9rem;
}
/* Hintergrund ueber die volle Breite, obwohl die Leiste im Satzspiegel liegt */
.crumb-bar--pkg::before {
content: ""; position: absolute; z-index: -1;
top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--line);
}
.crumb-bar--pkg .breadcrumb { margin: 0; }
.pkg-nav { display: inline-flex; border: 1px solid var(--ink); border-radius: 2rem; padding: .2rem; gap: .2rem; background: var(--paper); }
.pkg-nav-link {
display: inline-flex; align-items: center; gap: .45rem;
padding: .42rem 1rem; border-radius: 2rem;
font-family: var(--display); font-weight: 600; font-size: .86rem; letter-spacing: .01em;
color: var(--ink); line-height: 1; white-space: nowrap;
transition: background var(--t-fast), color var(--t-fast);
}
.pkg-nav-n {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500;
font-size: 1rem; color: var(--sand-deep); line-height: 1;
}
.pkg-nav-link:hover { background: var(--porcelain); }
.pkg-nav-link.is-current { background: var(--ink); color: var(--paper); }
.pkg-nav-link.is-current .pkg-nav-n { color: var(--sand); }
/* Nicht aktive Pakete pulsieren dezent -- signalisiert, dass man hier
umschalten kann, ohne dass man erst hovern muss (Kundenwunsch 03.09.2026) */
.pkg-nav-link:not(.is-current) { animation: pkgNavPulse 2.4s ease-in-out infinite; }
.pkg-nav-link:not(.is-current):hover { animation-play-state: paused; }
@keyframes pkgNavPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(194, 168, 131, .55); }
50% { box-shadow: 0 0 0 5px rgba(194, 168, 131, 0); }
}
@media (prefers-reduced-motion: reduce) {
.pkg-nav-link:not(.is-current) { animation: none; }
}
@media (max-width: 700px) {
.crumb-bar--pkg { flex-direction: column; align-items: stretch; gap: .7rem; }
.pkg-nav { width: 100%; }
.pkg-nav-link { flex: 1; justify-content: center; padding-inline: .5rem; }
}
/* =========================================================
Paketseiten: Leistungsblock (03.09.2026, Build k)
Kopfzeile mit Anzahl, mehrspaltiger Fluss ohne Weissloecher,
uebernommene Leistungen als kompakte Marken darunter.
========================================================= */
.tier-body--stack { row-gap: clamp(1.6rem, 2.6vw, 2.2rem); }
.tier-body--stack .tier-side { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.tier-body--stack .ts-lead { margin-bottom: 0; }
.scope-bar {
display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
padding-bottom: .75rem; border-bottom: 1px solid var(--ink);
margin-bottom: .3rem;
}
.scope-bar .scope-head { margin: 0; padding: 0; border: 0; min-height: 0; }
.scope-count {
font-family: var(--sans); font-weight: 500; font-size: .72rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--stone); white-space: nowrap;
}
.scope-count em {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: 1.15rem; color: var(--sand-deep);
letter-spacing: 0; margin-right: .25rem;
}
.scope-items {
margin: 0; padding: 0; list-style: none;
display: grid; grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
column-gap: clamp(1.4rem, 3vw, 2.6rem); row-gap: 0;
}
/* r2 = zwei Zeilen (6 Leistungen: Pro, Premium), r3 = drei Zeilen (9 Leistungen: Basic).
Explizite Grid-Zeilen statt "columns:3" -- eine Zeile ist damit ueberall
genau so hoch wie ihre hoechste Karte, unabhaengig davon, wie viele
Zeilen der jeweilige Text braucht. Vorher balancierte der Browser die
Spalten nur nach Gesamthoehe, wodurch einzelne Trennlinien (z. B. bei
Premium 06) je nach Zeilenumbruch der Nachbarspalten hoeher oder tiefer
lagen als in den anderen Spalten. */
.scope-items--r2 { grid-template-rows: repeat(2, auto); }
.scope-items--r3 { grid-template-rows: repeat(3, auto); }
/* r4 = zwei breite Spalten, vier Zeilen (8 Leistungen: Relaunch-Einzelprojekt) */
.scope-items--r4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, auto); }
.scope-items li {
display: grid; grid-template-columns: 2.3rem 1fr; align-items: start;
min-width: 0;
padding: .95rem .6rem .95rem 0; margin-left: -.6rem; padding-left: .6rem;
border-bottom: 1px solid var(--line);
transition: background var(--t-fast);
}
/* Spaltenlinien dort, wo das Grid tatsaechlich in die naechste Spalte
wechselt -- ersetzt "column-rule", das nicht an den Grid-Spalten haengt. */
.scope-items--r2 li:nth-child(n+3),
.scope-items--r3 li:nth-child(n+4),
.scope-items--r4 li:nth-child(n+5) {
border-left: 1px solid var(--line); margin-left: 0; padding-left: 1.3rem;
}
.scope-items li:hover { background: var(--porcelain); }
.si-n {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: 1.15rem; line-height: 1.35;
color: var(--sand-deep); transition: color var(--t-fast), transform var(--t-fast);
}
.scope-items li:hover .si-n { color: var(--ink); transform: translateX(2px); }
.si-b { display: block; }
.si-t { display: block; font-family: var(--sans); font-weight: 500; font-size: .95rem; line-height: 1.4; color: var(--ink); }
.si-s { display: block; margin-top: .22rem; font-size: .81rem; line-height: 1.5; color: var(--stone); min-height: calc(2 * 1.5em); }
/* Uebernommene Leistungen: ruhiges Band statt leerer Spalte */
.scope-carry {
margin-top: clamp(1.8rem, 3vw, 2.6rem);
padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.2rem, 2.6vw, 1.9rem);
background: var(--porcelain); border-left: 2px solid var(--sand);
}
.carry-head {
margin: 0 0 .9rem; font-family: var(--sans); font-weight: 600; font-size: .68rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--sand-text);
}
.carry-chips { display: flex; flex-wrap: wrap; gap: .5rem .55rem; margin: 0; padding: 0; list-style: none; }
.carry-chips li {
padding: .38rem .85rem; border: 1px solid var(--mist); border-radius: 2rem;
background: var(--paper); font-size: .82rem; line-height: 1.35; color: var(--stone);
}
@media (max-width: 940px) {
.scope-items { grid-template-columns: repeat(2, 1fr); }
.scope-items--r2 { grid-template-rows: repeat(3, auto); }
.scope-items--r3 { grid-template-rows: repeat(5, auto); }
.scope-items--r2 li:nth-child(n+3), .scope-items--r3 li:nth-child(n+4) { border-left: none; margin-left: -.6rem; padding-left: .6rem; }
.scope-items--r2 li:nth-child(n+4) { border-left: 1px solid var(--line); margin-left: 0; padding-left: 1.3rem; }
.scope-items--r3 li:nth-child(n+6) { border-left: 1px solid var(--line); margin-left: 0; padding-left: 1.3rem; }
}
@media (max-width: 700px) {
.scope-items { grid-template-columns: 1fr; grid-auto-flow: row; }
.scope-items--r2 li:nth-child(n+4), .scope-items--r3 li:nth-child(n+6), .scope-items--r4 li:nth-child(n+5) { border-left: none !important; margin-left: -.6rem !important; padding-left: .6rem !important; }
.scope-bar { flex-direction: column; gap: .4rem; }
}
/* Einblenden nacheinander (Klasse setzt main.js) */
.scope-anim .scope-items li { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1), background var(--t-fast); }
.scope-anim .scope-items li.is-in { opacity: 1; transform: none; }
.scope-anim .carry-chips li { opacity: 0; transition: opacity .5s ease; }
.scope-anim .carry-chips li.is-in { opacity: 1; }
/* Optionale Zusatzleistung: volle Breite unter den Spalten */
.scope-add {
display: grid; grid-template-columns: 2.3rem 1fr auto; align-items: start; gap: 0 0;
margin-top: 1.4rem; padding: 1.1rem .6rem 1.1rem .6rem; margin-left: -.6rem;
border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
.sa-mark {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-style: italic;
font-size: 1.3rem; line-height: 1.25; color: var(--sand-deep);
}
.sa-t { display: block; font-family: var(--sans); font-weight: 500; font-size: .95rem; line-height: 1.4; color: var(--ink); }
.sa-s { display: block; margin-top: .22rem; font-size: .81rem; line-height: 1.5; color: var(--stone); max-width: 68ch; }
.sa-tag {
align-self: center; margin-left: 1.5rem; padding: .3rem .8rem; border: 1px solid var(--sand);
border-radius: 2rem; font-family: var(--sans); font-weight: 600; font-size: .64rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--sand-text); white-space: nowrap;
}
/* "Auf Anfrage" ist ein echter Link zum Kontaktformular (Kundenwunsch 03.09.2026) */
a.sa-tag {
text-decoration: none; display: inline-block;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
a.sa-tag:hover, a.sa-tag:focus-visible { background: var(--sand); color: var(--ink); border-color: var(--sand); }
@media (max-width: 700px) {
.scope-add { grid-template-columns: 2rem 1fr; }
.sa-tag { grid-column: 2; justify-self: start; margin: .7rem 0 0; }
}
.scope-anim .scope-add { opacity: 0; transition: opacity .6s ease; }
.scope-anim .scope-add.is-in { opacity: 1; }
/* =========================================================
Paketseiten: "Geeignet fuer / Nicht dabei / Zeitaufwand"
als ruhige Kartenreihe statt loser Text-Spalten, Aufhaenger
davor klar abgesetzt. "Bereits enthalten"-Chips mit leise
pulsierendem Punkt. Leistungszahl vor "Leistungen" entfernt.
(Kundenwunsch 03.09.2026, Build m)
========================================================= */
/* Aufhaenger oben, Fakten darunter als eigener Kartenraster —
ersetzt die frueheren auto-fit-Spalten, die Zitat und Fakten
gleich behandelten. */
.tier-body--stack .tier-side { display: block; }
.tier-side .ts-lead {
margin: 0 0 clamp(1.5rem, 3vw, 2.1rem);
padding: 0 0 0 1.05rem;
border-bottom: 0;
border-left: 2px solid var(--sand);
font-family: var(--display); font-weight: 500;
font-size: 1.1rem; line-height: 1.52; color: var(--ink);
}
.tier-body--stack .ts-lead { margin-bottom: clamp(1.5rem, 3vw, 2.1rem); }
.ts-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: clamp(1.1rem, 2.4vw, 1.6rem);
}
.ts-facts .ts-block {
margin: 0; padding: 1.05rem 1.2rem 1.3rem;
background: var(--porcelain);
border: 1px solid var(--line);
border-top: 2px solid var(--sand-deep);
transition: border-color var(--t-fast), background var(--t-fast);
}
.ts-facts .ts-block:has(.tp-label--muted) {
background: var(--paper);
border-top-color: var(--stone-light);
}
.ts-facts .tp-label { margin-bottom: .5rem !important; }
.ts-facts p:last-child { margin: 0; }
@media (max-width: 700px) { .ts-facts { grid-template-columns: 1fr; } }
/* "Zusaetzlich in X" ohne vorangestellte Zahl — die einzelnen
Leistungen sind ohnehin durchnummeriert (01, 02, ...), eine
zweite Zahl vor "Leistungen" war redundant. */
.scope-count { letter-spacing: .13em; }
/* "Bereits enthalten"-Chips: eigener Punkt mit leisem Pulsring
statt reiner Textpille — deutet an, dass die Leistung aktiv
mitlaeuft, nicht nur aufgelistet ist. */
.carry-chips li {
display: inline-flex; align-items: center; gap: .55rem;
padding: .42rem 1rem .42rem .8rem;
transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.carry-chips li:hover { border-color: var(--sand-deep); color: var(--ink-soft); background: var(--porcelain); }
.carry-dot { position: relative; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sand-deep); }
.carry-dot::before {
content: ""; position: absolute; inset: -5px; border-radius: 50%;
border: 1px solid var(--sand-deep); opacity: 0;
animation: carryPulse 2.6s ease-out infinite;
}
.carry-chips li:nth-child(3n+1) .carry-dot::before { animation-delay: 0s; }
.carry-chips li:nth-child(3n+2) .carry-dot::before { animation-delay: .55s; }
.carry-chips li:nth-child(3n) .carry-dot::before { animation-delay: 1.1s; }
@keyframes carryPulse {
0% { transform: scale(.6); opacity: .5; }
70% { transform: scale(2.15); opacity: 0; }
100% { transform: scale(2.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.carry-dot::before { animation: none; }
}
/* ==========================================================================
Die Agentur (ueber.html) — Ausbau 04.09.2026
Alles ueber body.page-agentur gescoped: keine dieser Regeln greift auf
einer anderen Seite. Bewegung laeuft ohne zusaetzliches JavaScript ueber
scroll-getriebene Animationen und faellt sauber zurueck.
========================================================================== */
/* ---- 1 · Lesefortschritt am oberen Rand, rein aus CSS -------------------
animation-timeline: scroll() braucht kein Skript und laeuft auf dem
Compositor. Ohne Unterstuetzung bleibt die Linie auf scaleX(0) und ist
damit unsichtbar — kein Fallback noetig, keine Luecke im Layout. */
.page-agentur .scroll-progress {
position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200;
transform: scaleX(0); transform-origin: 0 50%;
background: linear-gradient(90deg, var(--sand), var(--sand-deep));
pointer-events: none;
}
@supports (animation-timeline: scroll()) {
.page-agentur .scroll-progress {
animation: td-progress linear both;
animation-timeline: scroll(root block);
}
@keyframes td-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .page-agentur .scroll-progress { display: none; } }
/* ---- 2 · Einblendung am Sichtbarkeitsfortschritt statt am Beobachter ----
view() bindet die Animation an die Lage des Elements im Sichtfeld: Die
Reihenfolge ergibt sich aus dem Scrollen, nicht aus einer festen
Verzoegerung. Nur dort, wo der Browser es kann und Bewegung erlaubt ist. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* Nur Elemente OHNE .reveal: sonst steuern JS-Transition und
CSS-Animation dieselbe Eigenschaft und das Ergebnis haengt vom
Zufall ab. .value und .mini-steps .ms behalten ihre JS-Einblendung. */
.page-agentur .am,
.page-agentur .dl--craft .dli {
animation: td-rise linear both;
animation-timeline: view();
animation-range: entry 4% entry 62%;
}
@keyframes td-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.page-agentur .band img {
animation: td-settle linear both;
animation-timeline: view();
animation-range: entry 0% cover 45%;
}
@keyframes td-settle { from { transform: scale(1.06); } to { transform: none; } }
}
}
/* ---- 3 · Merkzeile unter dem Aufhaenger --------------------------------
Bewusst NICHT das Kennzahlenband der Paketseiten (.tb-scope): dort traegt
die grosse Serif-Ziffer die Aussage, hier traegt sie der Satz. */
.amarks {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.6rem, 3vw, 2.6rem);
}
.am { position: relative; padding-top: clamp(1.1rem, 1.8vw, 1.5rem); border-top: 1px solid var(--line); }
.am::before {
content: ""; position: absolute; top: -1px; left: 0;
width: 2.2rem; height: 1px; background: var(--sand-deep);
transition: width .55s cubic-bezier(.22,.61,.36,1);
}
.am:hover::before, .am:focus-within::before { width: 100%; }
.am-k {
display: block; font-family: var(--display); font-weight: 600;
font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.3;
color: var(--ink); margin-bottom: .5rem; text-wrap: balance;
}
/* Weicher Satz statt Blocksatz: in schmalen Spalten reisst Blocksatz
Wortluecken (Hausregel seit 22.08.2026). */
.am p { margin: 0; color: var(--stone); font-size: .94rem; line-height: 1.62; text-align: left; hyphens: manual; text-wrap: pretty; }
@media (max-width: 900px) { .amarks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .amarks { grid-template-columns: 1fr; gap: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .am::before { transition: none; } }
/* ---- 4 · Portraet als Passepartout -------------------------------------
Echtes ![]()
statt Hintergrundbild: eigene Groessenangabe (kein Nachrutschen
beim Laden), loading="lazy" und decoding="async". Der Sandrahmen liegt
versetzt dahinter und entsteht aus einem Pseudoelement, nicht aus einer Datei. */
.portrait { position: relative; margin: 0; padding: 0 14px 14px 0; }
.portrait::before {
content: ""; position: absolute; left: 14px; top: 14px; right: 0; bottom: 0;
border: 1px solid var(--sand); border-radius: var(--radius);
}
.portrait-frame {
position: relative; z-index: 1; overflow: hidden;
border-radius: var(--radius); border: 1px solid var(--line);
background: var(--porcelain);
}
.portrait-frame img {
/* height:auto ist Pflicht: ohne sie gewinnt das height-Attribut des ![]()
und aspect-ratio bleibt wirkungslos (gemessen am 04.09.2026: 832 px
Originalhoehe statt 5:4). */
display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover;
filter: saturate(.94) contrast(1.02);
transition: transform 1.1s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
.portrait:hover .portrait-frame img { transform: scale(1.035); filter: saturate(1) contrast(1.04); }
@media (prefers-reduced-motion: reduce) { .portrait-frame img { transition: none; } }
/* 🔴 Das Bild fuellt die Hoehe der Textspalte, statt darunter eine leere
Spalte zu lassen. Gemessen am 04.09.2026: 290 px Leerraum bei 1440 px
Fensterbreite, im Vollbild deutlich mehr. align-self schlaegt das
align-items:start des Rasters, deshalb ist am HTML nichts zu aendern. */
@media (min-width: 901px) {
.portrait { align-self: stretch; display: flex; flex-direction: column; }
/* Der Rahmen bekommt seine Hoehe vom Flex-Raster, nicht aus einer Angabe.
Ein height:100% am Bild liefe deshalb ins Leere (Prozent von auto bleibt
auto) - das Bild endete nach 300 px und darunter stand der Seitengrund.
Deshalb fuellt es den Rahmen absolut positioniert aus. */
.portrait-frame { position: relative; flex: 1 1 auto; min-height: 22rem; }
.portrait-frame picture { position: absolute; inset: 0; display: block; }
.portrait-frame img {
position: absolute; inset: 0;
width: 100%; height: 100%; aspect-ratio: auto;
object-fit: cover; object-position: 50% 42%;
}
}
/* ---- 5 · Bildband mit Bildunterschrift ---------------------------------- */
.band { margin: 0; }
.band picture, .portrait picture { display: block; }
.band img {
display: block; width: 100%; height: auto; aspect-ratio: 7 / 4; object-fit: cover;
border-radius: var(--radius); border: 1px solid var(--line);
/* Das Motiv ist sehr hell und verschwindet sonst auf dem weissen Grund. */
filter: saturate(.96) contrast(1.06);
}
/* ---- 6 · Handwerksabschnitt als Editorial-Satz --------------------------
Die Ueberschrift bleibt beim Lesen der acht Punkte stehen. Das ist der
Unterschied zwischen einer Liste und einem gesetzten Doppelseitenaufbau. */
.craft { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.craft-head { position: sticky; top: 104px; }
.craft-head .section-head { margin-bottom: 0; max-width: 40ch; }
/* Schmale Spalte: Blocksatz reisst hier Wortluecken (Hausregel 22.08.2026). */
.craft-head .lead { text-align: left; hyphens: manual; }
.craft-body .dl { margin-top: 0; }
@media (max-width: 980px) {
.craft { grid-template-columns: 1fr; }
.craft-head { position: static; }
.craft-head .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 62ch; }
}
/* ---- 7 · Haarlinien-Liste in der Auspraegung der Agentur-Seite ----------
Laufende Nummer in Sand-Serifziffern, Titel ueber dem Text — damit sie
sich von der Leistungsliste der Paketseiten (.dl) unterscheidet. */
.dl--craft { counter-reset: craft; border-top-color: var(--ink); }
.dl--craft .dli {
grid-template-columns: 2.6rem 1fr; row-gap: .3rem; gap: 0 .9rem;
align-items: start; transition: background .35s ease;
}
.dl--craft .dli::before {
counter-increment: craft; content: counter(craft, decimal-leading-zero);
grid-row: span 2;
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 500; font-size: 1.55rem; line-height: 1.15;
color: var(--sand-deep); transition: color .35s ease;
}
.dl--craft .dli .dlt { grid-column: 2; }
.dl--craft .dli p { grid-column: 2; text-wrap: pretty; text-align: left; hyphens: manual; }
.dl--craft .dli:hover { background: rgba(255,255,255,.62); }
.dl--craft .dli:hover::before { color: var(--ink); }
.section--warm .dl .dli { border-bottom-color: var(--mist); }
@media (max-width: 620px) { .dl--craft .dli { grid-template-columns: 2.4rem 1fr; } }
@media (prefers-reduced-motion: reduce) { .dl--craft .dli { transition: none; } }
/* ---- 8 · Pull-Quote mit Haarlinien und Sandmarke ------------------------ */
.pullquote {
position: relative; padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pullquote::before {
content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
width: 3.6rem; height: 1px; background: var(--sand-deep);
}
.pullquote .statement { margin-inline: auto; }
/* ---- 9 · Typografischer Feinschliff der Seite --------------------------- */
.page-agentur h1, .page-agentur h2, .page-agentur h3 { text-wrap: balance; }
.page-agentur .lead { text-wrap: pretty; }
.page-agentur ::selection { background: var(--champagne); color: var(--ink); }
.page-agentur [id] { scroll-margin-top: 104px; }
.page-agentur .value h3 { transition: color .3s ease; }
.page-agentur .value:hover h3 { color: var(--sand-text); }
/* Mehr Kontrast, wenn das System ihn anfordert. */
@media (prefers-contrast: more) {
.page-agentur .am, .page-agentur .dl--craft .dli, .page-agentur .pullquote { border-color: var(--ink-soft); }
.page-agentur .am p, .page-agentur .dl--craft p { color: var(--ink-soft); }
}
/* ---- 10 · Druckfassung -------------------------------------------------- */
@media print {
.page-agentur .scroll-progress, .page-agentur .site-header, .page-agentur .mobile-cta,
.page-agentur .btn, .page-agentur .portrait, .page-agentur .band { display: none !important; }
.page-agentur .craft { display: block; }
.page-agentur .section { padding-block: 1.2rem; }
.page-agentur .section--ink { background: #fff; color: #000; }
.page-agentur .dl--craft .dli { break-inside: avoid; }
}
/* Logo liegt jetzt in einem (AVIF/WebP mit PNG-Rueckfallebene).
display:contents haelt das ![]()
direktes Kind des Flex-Containers, damit
Ausrichtung und Abstaende der Kopf- und Fusszeile unveraendert bleiben. */
.brand picture { display: contents; }
/* Ruhige, aber nicht ausufernde Abschnittsabstaende: die Seite hatte bei
1440 px rund 170 px Polster je Abschnitt und las sich dadurch luftig
statt dicht. */
.page-agentur .section { padding-block: clamp(3rem, 5.4vw, 5rem); }
.page-agentur .section--tight { padding-block: clamp(2.6rem, 4.4vw, 4rem); }
.page-agentur .section-head { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
/* ---- 11 · Seitenwechsel ------------------------------------------------
Cross-Document View Transitions: Der Browser blendet zwischen zwei Seiten
ueber, statt weiss aufzublitzen. Native Schnittstelle, kein Skript; wo sie
fehlt, navigiert der Browser wie bisher. */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .22s; }
::view-transition-new(root) { animation-duration: .28s; }
}
/* BUILD-20260904d */