/* ============================================================ JASPERS-Ankauf — Ads-LP Komponenten (below the fold) Tokens: css/design-tokens.css (1:1 inline im jeder LP, Critical CSS). Diese Datei enthaelt alles unterhalb des Heros. Wiederverwendbar fuer /goldankauf, /zahngold, /muenzen. ============================================================ */ /* ---- Header lean (gemeinsam fuer LP1/LP2/LP3) ---- */ .site-header { background: var(--white); border-bottom: 1px solid #E5E5E5; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; } .logo { display: block; line-height: 0; } .logo img { height: 40px; width: auto; } .header-call { padding: 10px 16px; font-size: 1rem; } @media (min-width: 768px) { .logo img { height: 48px; } .header-call { font-size: var(--btn-fs); padding: 12px 22px; } } /* Mobile Tap-State: verhindert das kurzzeitige Abdunkeln/Verschwinden von CTA-Texten bei Anchor-Taps. */ .btn, .hero-info-link, .tile, .faq-q, .cat-tile { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .hero-ctas .btn--ghost-light, .hero-ctas .btn--ghost-light:link, .hero-ctas .btn--ghost-light:visited, .hero-ctas .btn--ghost-light:hover, .hero-ctas .btn--ghost-light:focus, .hero-ctas .btn--ghost-light:focus-visible, .hero-ctas .btn--ghost-light:active { color: var(--brand-dark); -webkit-text-fill-color: var(--brand-dark); background: rgba(255,255,255,0.96); border-color: rgba(255,255,255,0.96); opacity: 1; visibility: visible; box-shadow: 0 10px 24px rgba(0,0,0,0.24); } .hero-ctas .btn--ghost-light:active { transform: translateY(0); } .hero-info-link, .hero-info-link:link, .hero-info-link:visited, .hero-info-link:hover, .hero-info-link:focus, .hero-info-link:focus-visible, .hero-info-link:active { color: var(--brand-dark); -webkit-text-fill-color: var(--brand-dark); background: rgba(255,255,255,0.92); opacity: 1; visibility: visible; } @media (max-width: 767px) { html { scroll-behavior: auto; } } /* ---- Sektions-Grundgeruest (Premium: mehr Luft, Slab-Display) ---- */ .section { padding: 60px 0; } .section--alt { background: var(--bg-outer); } .section--tint { background: var(--card-tint); } .section h2 { font-family: var(--font-slab); font-size: 1.75rem; font-weight: var(--fw-semibold); color: var(--ink); line-height: var(--lh-heading); letter-spacing: -0.01em; margin: 0 0 14px; } .section .section-intro { max-width: var(--content-narrow); margin: 0 0 32px; color: var(--text); } .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brand); flex: none; } /* ---- Card (Live-Muster: 1px Weinrot-Border + Rosé-Tint, Premium-Tiefe) ---- */ .card { background: var(--white); border: var(--card-border); border-radius: var(--radius-card); padding: 28px; box-shadow: 0 12px 32px rgba(82,10,31,0.07); } .card--tint { background: var(--card-tint); } /* ---- Kurstafel (dunkle Weinrot-Karte, Premium-Anker der Seite) ---- */ .card--kurstafel { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--white); box-shadow: 0 16px 40px rgba(82,10,31,0.3); } .card--kurstafel .price-table th { color: rgba(255,255,255,0.62); border-bottom-color: rgba(255,255,255,0.16); } .card--kurstafel .price-table td { color: var(--white); border-bottom-color: rgba(255,255,255,0.16); } .card--kurstafel .price-stand { color: rgba(255,255,255,0.65); } .card--kurstafel .price-note { color: rgba(255,255,255,0.78); } .card--kurstafel .badge-beispiel { background: transparent; border: 1px solid rgba(255,255,255,0.55); color: var(--white); } /* ---- Trust-Leiste (Premium-Karte: Inhaber + Rating + Facts) ---- */ .trust-strip { display: grid; gap: 26px; background: var(--white); border: var(--card-border); border-radius: var(--radius-card); box-shadow: 0 14px 36px rgba(82,10,31,0.08); padding: 26px 22px; } @media (min-width: 900px) { .trust-strip { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 34px 40px; } } .trust-person { display: flex; align-items: center; gap: 20px; } @media (max-width: 639px) { .trust-person { display: grid; grid-template-columns: 1fr; gap: 12px; text-align: left; align-items: start; } .trust-person .stars { justify-content: flex-start; } } .trust-person-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 54% 42%; border: 3px solid var(--brand); box-shadow: 0 8px 22px rgba(82,10,31,0.22); flex: none; } @media (max-width: 639px) { .trust-person-photo { width: 100%; height: 126px; border-radius: var(--radius-card); object-position: 57% 34%; border-width: 2px; box-shadow: 0 16px 34px rgba(82,10,31,0.16); } } @media (max-width: 380px) { .trust-person { gap: 12px; } .trust-person-photo { height: 118px; } .trust-person-name { font-size: 1.25rem; } } @media (min-width: 768px) { .trust-person-photo { width: 128px; height: 128px; } } .trust-person-name { display: block; font-family: var(--font-slab); font-size: 1.375rem; font-weight: var(--fw-semibold); color: var(--ink); line-height: 1.2; } .trust-person-role { display: block; font-size: var(--fs-small); color: var(--text); margin: 2px 0 10px; } .stars { display: inline-flex; gap: 2px; color: var(--brand); } .stars svg { width: 22px; height: 22px; } .stars--gold { color: #FBBC04; } /* Google-Bewertungssterne-Gelb (Konvention) */ .trust-person .stars svg { width: 19px; height: 19px; } .trust-person strong { font-size: 1.125rem; color: var(--ink); display: block; margin-top: 4px; } .trust-person .rating-source { display: block; font-size: var(--fs-small); color: var(--text); margin-top: 2px; } /* Einspaltige Checkliste — 2x2-Raster wirkte bei ungleichen Textlaengen unruhig */ .trust-facts { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; } .trust-facts li { display: flex; align-items: flex-start; gap: 10px; font-weight: var(--fw-medium); color: var(--ink); line-height: 1.4; } .trust-facts svg { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: 2px; } @media (min-width: 900px) { .trust-facts { border-left: 1px solid #EFE3E5; padding-left: 40px; } } /* Kundenzitat (1:1 Live-Site; Slab = Brand-Testimonial-Schrift). Ab 1100px versteckt — dort steht das Zitat als Glas-Karte im Hero. */ .trust-quotes { display: grid; gap: 14px; margin-top: 30px; } .trust-quotes .quote-card { max-width: 640px; } @media (min-width: 1100px) { .trust-quotes { display: none; } } .quote-card { margin: 0; background: var(--card-tint); border: var(--card-border); border-radius: var(--radius-card); padding: 22px 24px; } .quote-card blockquote { margin: 0 0 12px; font-family: var(--font-slab); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); } .quote-card figcaption { font-size: var(--fs-small); color: var(--text); font-weight: var(--fw-medium); } /* ---- Preistabelle + Rechner ---- */ .price-grid { display: grid; gap: 24px; } .price-grid > * { min-width: 0; } /* Grid-Items duerfen unter Max-Content schrumpfen (mobil) */ @media (min-width: 900px) { .price-grid { grid-template-columns: 1fr 1fr; align-items: start; } } @media (max-width: 480px) { .price-grid .card { padding: 18px 14px; } .price-grid .price-table th, .price-grid .price-table td { padding: 12px 6px; } .price-grid .price-table th { font-size: 0.75rem; } .price-grid .price-table td { font-size: 1.0625rem; } } .price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .price-table th, .price-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #E4D7D9; } .price-table th { font-size: 0.875rem; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); } .price-table td { color: var(--ink); font-size: var(--fs-body); } .price-table td.num { text-align: right; font-weight: var(--fw-semibold); white-space: nowrap; } .price-table tr:last-child td { border-bottom: none; } .price-stand { font-size: var(--fs-small); color: var(--text); margin-top: 12px; } .price-table--full th, .price-table--full td { padding-top: 13px; padding-bottom: 13px; } .price-table--full td:first-child { font-weight: var(--fw-medium); } .price-table--full td.num { font-variant-numeric: tabular-nums; } .badge-beispiel { display: inline-block; background: var(--brand); color: var(--white); font-size: 0.8125rem; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; vertical-align: middle; } .price-note { color: var(--text-soft); font-size: var(--fs-small); margin-top: 12px; line-height: 1.55; } /* MiniRechner */ .calc label { display: block; font-weight: var(--fw-medium); color: var(--ink); margin: 14px 0 6px; } .calc select, .calc input[type="number"], .calc input[type="text"] { width: 100%; min-height: var(--tap-min); font: inherit; font-size: var(--fs-body); color: var(--ink); padding: 10px 14px; border: 1px solid #C9B2B7; border-radius: var(--radius-btn); background: var(--white); } .calc select:focus, .calc input:focus { outline: 3px solid rgba(109,19,34,0.35); outline-offset: 1px; } .calc-result { margin-top: 18px; padding: 16px; background: var(--card-tint); border: var(--card-border); border-radius: var(--radius-btn); font-size: var(--fs-body); color: var(--ink); } .calc-result strong { font-size: 1.5rem; display: block; margin-top: 4px; } .calc-result .calc-disclaimer { display: block; font-size: var(--fs-small); color: var(--text); margin-top: 8px; } /* ---- 3 Schritte ---- */ .steps { display: grid; gap: 16px; counter-reset: step; list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } } .steps li { position: relative; padding: 24px 24px 24px 76px; counter-increment: step; } .steps li::before { content: counter(step); position: absolute; left: 24px; top: 26px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--card-tint); border: 2px solid var(--brand); color: var(--brand); font-family: var(--font-slab); font-weight: var(--fw-semibold); font-size: 1.125rem; border-radius: 50%; } .steps h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--ink); margin: 0 0 6px; line-height: 1.25; } .steps p { margin: 0; color: var(--text); font-size: 1.0625rem; line-height: 1.55; } /* ---- Ankauf-Kacheln ---- */ .tiles { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); align-items: stretch; list-style: none; margin: 0; padding: 0; } .tiles > li { display: flex; min-width: 0; } @media (min-width: 768px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 18px; } } .tile { display: grid; grid-template-rows: 132px 1fr; width: 100%; min-height: 100%; background: var(--white); border: var(--card-border); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: var(--ink); transition: box-shadow 0.15s ease, transform 0.15s ease; } .tile:hover, .tile:focus-visible { box-shadow: 0 6px 18px rgba(109,19,34,0.18); transform: translateY(-2px); } .tile { box-shadow: 0 4px 14px rgba(82,10,31,0.05); } .tile img { width: 100%; height: 132px; object-fit: cover; display: block; } /* Silberbesteck-Kachel: Fokus tiefer auf das Besteck statt auf den oberen Ladenbereich. */ .tile .tile-img-low { object-position: center 100%; } @media (min-width: 768px) { .tile { grid-template-rows: 156px 1fr; } .tile img { height: 156px; } } .tile .tile-icon { height: 120px; display: grid; place-items: center; background: var(--card-tint); color: var(--brand); } @media (min-width: 768px) { .tile .tile-icon { height: 140px; } } .tile .tile-icon svg { width: 48px; height: 48px; } .tile-label { display: flex; align-items: center; min-height: 58px; padding: 12px 14px; font-weight: var(--fw-semibold); font-size: 1.0625rem; line-height: 1.3; } .tiles-longtail { margin-top: 18px; color: var(--text); font-size: var(--fs-small); max-width: var(--content-wide); } /* ---- Content-Sektion (Fliesstext + Bild) ---- */ .content-grid { display: grid; gap: 28px; } @media (min-width: 900px) { .content-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } } .content-text { max-width: 72ch; display: grid; gap: 16px; } .content-text p { margin: 0; color: var(--text); } .content-figure { margin: 0; } .content-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); border: var(--card-border); box-shadow: 0 14px 36px rgba(82,10,31,0.12); } /* ---- Team / Filiale ---- */ .team-grid { display: grid; gap: 24px; } .team-text { order: 1; } .team-profiles { display: grid; gap: 14px; order: 2; } @media (min-width: 900px) { .team-grid { grid-template-columns: 5fr 7fr; align-items: center; } .team-profiles { order: 1; } .team-text { order: 2; } } .profile-card { display: grid; grid-template-columns: minmax(112px, 34%) 1fr; overflow: hidden; background: var(--white); border: var(--card-border); border-radius: var(--radius-card); box-shadow: 0 14px 36px rgba(82,10,31,0.08); } .profile-card img { width: 100%; height: 100%; min-height: 178px; object-fit: cover; display: block; } .profile-card:first-child img { object-position: 58% 45%; } .profile-card:last-child img { object-position: 50% 36%; } .profile-card__body { padding: 18px 18px 17px; } .profile-card h3 { margin: 0 0 3px; font-family: var(--font-slab); font-size: 1.25rem; font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); } .profile-role { margin: 0 0 10px !important; font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: 0.01em; color: var(--brand-dark) !important; } .profile-card p { margin: 0; font-size: 1rem; line-height: 1.55; } @media (max-width: 639px) { .profile-card { grid-template-columns: 1fr; } .profile-card img { aspect-ratio: 16 / 10; min-height: 0; } .profile-card__body { padding: 18px 16px 20px; } } .team-text p { color: var(--text); margin: 0 0 14px; } .team-text .firmierung { font-size: var(--fs-small); color: var(--text); } /* ---- FAQ-Akkordeon (Live-Weinrot-Muster post-2562.css) ---- */ .faq { max-width: var(--content-wide); margin: 0 auto; } .faq-item { border-top: 2px solid var(--brand-dark); } .faq-item:last-child { border-bottom: 2px solid var(--brand-dark); } .faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; background: var(--brand-mid); /* Live: geschlossen #6B0F2A */ color: var(--white); border: 0; font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); text-align: left; padding: 18px 24px; min-height: var(--tap-min); cursor: pointer; } .faq-q:hover { background: var(--brand-hover); } /* Live: #7D1533 */ .faq-q[aria-expanded="true"] { background: var(--brand-dark); } /* Live: offen #520A1F */ .faq-q .faq-chevron { flex: none; width: 22px; height: 22px; transition: transform 0.2s ease; } .faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); } .faq-a { display: none; padding: 22px 28px; background: var(--white); color: var(--text-soft); line-height: 1.8; } .faq-a.open { display: block; } .faq-a p { margin: 0 0 10px; } .faq-a p:last-child { margin-bottom: 0; } @media (max-width: 767px) { .faq-q { padding: 15px 16px; } .faq-a { padding: 16px; } } /* ---- NAP / Anfahrt ---- */ .nap-grid { display: grid; gap: 24px; } @media (min-width: 900px) { .nap-grid { grid-template-columns: 1fr 1fr; } } .nap-block address { font-style: normal; font-size: var(--fs-body); color: var(--ink); line-height: 1.7; } .nap-block h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--ink); margin: 22px 0 8px; } .nap-block ul { margin: 0; padding: 0 0 0 2px; list-style: none; color: var(--text); } .nap-block li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; line-height: 1.5; } .nap-block li svg { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: 4px; } .nap-phone { font-size: 1.375rem; font-weight: var(--fw-bold); color: var(--brand); text-decoration: none; } .nap-phone:hover { text-decoration: underline; } .map-consent { position: relative; background: var(--bg-outer); border: 1px solid #D9D9D9; border-radius: var(--radius-card); min-height: 320px; height: 100%; display: grid; place-items: center; text-align: center; padding: 24px; } .map-consent p { color: var(--text); font-size: var(--fs-small); max-width: 40ch; margin: 0 0 16px; } /* Desktop: Karte streckt sich auf die volle Hoehe der NAP-Karte daneben */ .map-frame { width: 100%; height: 100%; min-height: 380px; border: 0; border-radius: var(--radius-card); display: block; } /* ---- LeadForm (3 Stufen, Premium-Karte) ---- */ .leadform { max-width: 720px; margin: 0 auto; } .leadform-card { background: var(--white); border: var(--card-border); border-radius: var(--radius-card); box-shadow: 0 18px 48px rgba(82,10,31,0.11); padding: 26px 18px; } @media (min-width: 768px) { .leadform-card { padding: 40px 44px; } } /* Schritt-Pills (JS toggelt .active auf den spans) */ .form-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .form-progress span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: var(--fw-medium); letter-spacing: 0.01em; color: var(--text); } .form-progress span em { font-style: normal; font-family: var(--font-slab); font-weight: var(--fw-semibold); font-size: 0.9375rem; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #DCC7CC; background: var(--white); color: var(--text); transition: background-color 0.15s ease, border-color 0.15s ease; } .form-progress span.active { color: var(--ink); } .form-progress span.active em { background: var(--brand); border-color: var(--brand); color: var(--white); } .form-progress span:not(:last-child)::after { content: ""; width: 20px; height: 2px; background: #E4D7D9; } @media (max-width: 480px) { .form-progress span { font-size: 0; gap: 0; } .form-progress span.active:not(:has(~ .active)) { font-size: 0.875rem; gap: 8px; } } .form-step { display: none; border: 0; padding: 0; margin: 0; } .form-step.active { display: block; } .form-step-title { font-family: var(--font-slab); font-size: 1.25rem; font-weight: var(--fw-semibold); color: var(--ink); padding: 0; margin: 0 0 16px; } .form-step-title .optional { font-family: var(--font-sans); } .cat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .cat-tiles { grid-template-columns: repeat(3, 1fr); } } .cat-tile { width: 100%; min-height: 80px; font: inherit; font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--ink); background: var(--white); border: 1.5px solid #E0D0D4; border-radius: var(--radius-card); box-shadow: 0 2px 8px rgba(82,10,31,0.05); padding: 14px 10px; cursor: pointer; display: grid; place-items: center; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .cat-tile:hover, .cat-tile:focus-visible { border-color: var(--brand); background: var(--card-tint); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(82,10,31,0.14); } .cat-tile.is-selected { border-color: var(--brand); background: var(--card-tint); box-shadow: 0 8px 20px rgba(82,10,31,0.14); } .cat-tile:active { transform: translateY(0); } /* ---- Goldankauf LP2: fokussierte Nutzenmodule ---- */ .gold-focus-grid, .comparison-grid { display: grid; gap: 16px; } @media (min-width: 768px) { .gold-focus-grid { grid-template-columns: repeat(3, 1fr); } .comparison-grid { grid-template-columns: repeat(2, 1fr); } } .gold-focus-card, .comparison-card { background: var(--white); border: var(--card-border); border-radius: var(--radius-card); padding: 22px; box-shadow: 0 10px 28px rgba(82,10,31,0.07); } .gold-focus-card h3, .comparison-card h3 { margin: 0 0 8px; font-family: var(--font-slab); font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); } .gold-focus-card p, .comparison-card p { margin: 0; font-size: 1rem; line-height: 1.55; } .comparison-card--dark { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--white); } .comparison-card--dark h3, .comparison-card--dark p { color: var(--white); } .section-note { margin: 22px 0 0; max-width: 72ch; color: var(--text); font-size: var(--fs-small); line-height: 1.6; } .leadform label { display: block; font-size: 0.9375rem; font-weight: var(--fw-semibold); letter-spacing: 0.01em; color: var(--ink); margin: 18px 0 8px; } .leadform .optional { font-weight: var(--fw-regular); color: var(--text); font-size: var(--fs-small); letter-spacing: 0; } .leadform input[type="text"], .leadform input[type="tel"], .leadform input[type="email"], .leadform textarea { width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink); padding: 13px 16px; min-height: 52px; border: 1.5px solid #DCC7CC; border-radius: var(--radius-card); background: var(--white); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .leadform textarea { min-height: 120px; resize: vertical; } .leadform input:hover, .leadform textarea:hover { border-color: #C9AEB4; } .leadform input:focus, .leadform textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(109,19,34,0.12); } /* Foto-Upload als gestaltete Zone (statt nativem File-Control) */ .upload-zone { position: relative; display: flex; align-items: center; gap: 14px; border: 1.5px dashed #C9AEB4; border-radius: var(--radius-card); background: #FFFBFB; padding: 16px 18px; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .upload-zone:hover { border-color: var(--brand); background: var(--card-tint); } .upload-zone:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(109,19,34,0.12); } .upload-zone svg { width: 30px; height: 30px; color: var(--brand); flex: none; } .upload-zone .upload-text { font-size: 0.9375rem; color: var(--text); line-height: 1.45; } .upload-zone .upload-text strong { color: var(--brand-mid); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; } .upload-zone .upload-filename { display: block; color: var(--ink); font-weight: var(--fw-medium); margin-top: 2px; } .upload-zone .upload-filename:empty { display: none; } .upload-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* Entfernen-Knopf liegt ueber dem Input-Overlay (z-index), sonst oeffnet der Klick den Dateidialog */ .upload-remove { position: relative; z-index: 2; margin-left: auto; flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--white); border: 1.5px solid #DCC7CC; border-radius: 50%; color: var(--brand); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .upload-remove:hover, .upload-remove:focus-visible { border-color: var(--brand); background: var(--card-tint); } .upload-remove:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(109,19,34,0.12); } .upload-remove svg { width: 18px; height: 18px; } .form-nav { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 26px; } .form-hint { font-size: var(--fs-small); color: var(--text); margin-top: 12px; } .consent-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; cursor: pointer; } .consent-check input { width: 24px; height: 24px; margin-top: 2px; flex: none; accent-color: var(--brand); } .consent-check span { font-size: var(--fs-small); color: var(--text); line-height: 1.5; } .form-success { text-align: center; padding: 32px 16px; } .form-success svg { width: 56px; height: 56px; color: var(--brand); margin-bottom: 14px; background: var(--card-tint); border-radius: 50%; padding: 10px; } .form-success h3 { font-family: var(--font-slab); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--ink); margin: 0 0 8px; } .form-success p { color: var(--text); margin: 0; } /* ---- Footer ---- */ .footer { background: var(--brand-dark); color: var(--white); padding: 32px 0 96px; /* Platz fuer StickyCallBar mobil */ font-size: var(--fs-small); } @media (min-width: 768px) { .footer { padding-bottom: 32px; } } .footer .container { display: grid; gap: 14px; } .footer p { margin: 0; color: rgba(255,255,255,0.85); line-height: 1.6; } .footer nav { display: flex; gap: 22px; flex-wrap: wrap; } .footer a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap-min); display: inline-flex; align-items: center; } /* ---- Consent-Banner (zweistufig; Rechtsgrundlagen im HTML-Kommentar) ---- */ .consent-banner { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--white); border-top: 3px solid var(--brand); box-shadow: 0 -6px 24px rgba(0,0,0,0.18); padding: 18px 0; max-height: 85dvh; overflow-y: auto; } .consent-banner[hidden] { display: none; } .consent-inner { display: grid; gap: 12px; justify-items: start; } .consent-inner p { margin: 0; font-size: var(--fs-small); color: var(--text-soft); line-height: 1.5; max-width: 90ch; } .consent-inner a { color: var(--brand-mid); } /* Kategorien-Panel (Ebene 2): nichts vorangekreuzt */ .consent-panel { border: 1px solid #E4D7D9; border-radius: var(--radius-card); padding: 14px 16px; margin: 0; display: grid; gap: 12px; width: 100%; } .consent-panel[hidden] { display: none; } .consent-panel-legend { font-weight: var(--fw-semibold); color: var(--ink); font-size: var(--fs-small); padding: 0 4px; } .consent-cat { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .consent-cat input { width: 26px; height: 26px; flex: none; margin-top: 1px; accent-color: var(--brand); } .consent-cat input:disabled { opacity: 0.5; } .consent-cat span { font-size: 0.875rem; color: var(--text-soft); line-height: 1.5; } /* Rechts-Gate: Ablehnen/Speichern/Akzeptieren visuell GLEICHWERTIG (Art. 7 Abs. 4 DSGVO, EDPB-Taskforce-Report 01/2023, VG Hannover 10 A 5385/22) — nicht zurueckstufen. */ .consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .consent-actions .btn { padding: 12px 14px; font-size: 1.0625rem; background: var(--brand); background-image: none; box-shadow: 0 4px 14px rgba(82,10,31,0.26); transition: box-shadow 0.15s ease, transform 0.15s ease; } .consent-actions .btn:hover, .consent-actions .btn:focus-visible { background: var(--brand); background-image: none; box-shadow: 0 5px 16px rgba(82,10,31,0.32); } .consent-actions .btn:active { transform: translateY(1px); } .consent-actions #consent-save:not([hidden]) { grid-column: 1 / -1; } @media (min-width: 900px) { .consent-actions { display: flex; width: auto; } .consent-actions .btn { min-width: 176px; } } .consent-settings-link { background: none; border: 0; padding: 6px 0; min-height: 44px; font: inherit; font-size: var(--fs-small); color: var(--brand-mid); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } @media (max-width: 899px) { .consent-inner p { font-size: 0.875rem; } } /* Widerrufs-Link im Footer (Art. 7 Abs. 3 DSGVO) */ .footer-consent-link { background: none; border: 0; padding: 0; font: inherit; color: var(--white); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: var(--tap-min); display: inline-flex; align-items: center; } /* ---- Zuruecklinks / Rechtsseiten ---- */ .legal-page { padding: 40px 0 80px; } .legal-page h1 { font-family: var(--font-slab); font-size: var(--fs-h1); font-weight: var(--fw-semibold); color: var(--ink); line-height: var(--lh-heading); letter-spacing: -0.01em; } .legal-page h2 { font-family: var(--font-slab); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--ink); margin-top: 32px; } .legal-page h3 { font-size: 1.125rem; color: var(--ink); margin-top: 22px; } .legal-page p, .legal-page ul { color: var(--text); max-width: 72ch; } .legal-page ul { padding-left: 22px; } .legal-page li { margin-bottom: 6px; } .legal-page address { font-style: normal; color: var(--text); line-height: 1.7; } .notice { background: var(--card-tint); border: var(--card-border); border-radius: var(--radius-card); padding: 14px 18px; color: var(--ink); font-size: var(--fs-small); margin: 18px 0; } /* ---- Leadform: Honeypot + Sende-Fehler (AP3) ---- */ .hp-feld { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px; height: 1px; overflow: hidden; } .leadform-fehler { margin: 16px 0 0; color: var(--brand); font-weight: var(--fw-semibold); } .leadform-fehler a { color: inherit; white-space: nowrap; } /* ---- Danke-Seiten (Split-TYP HQ/Standard) ---- */ .typ-page { padding: 56px 0 80px; text-align: center; } .typ-page .typ-icon { width: 72px; height: 72px; color: var(--brand); margin: 0 auto 18px; display: block; } .typ-page h1 { font-family: var(--font-slab); font-size: var(--fs-h1); font-weight: var(--fw-semibold); color: var(--ink); line-height: var(--lh-heading); } .typ-page p { max-width: 62ch; margin-left: auto; margin-right: auto; } .typ-aktionen { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 28px 0 10px; } .typ-nap { margin-top: 44px; font-style: normal; color: var(--text); line-height: 1.7; } .typ-nap strong { color: var(--ink); } /* ---- Desktop-Anpassungen ---- */ @media (min-width: 768px) { .section { padding: 104px 0; } .section h2 { font-size: 2.375rem; } }