/* =========================================================
INVESTMENTORIN — Design System
Editorial Personal Brand x Finanzexpertise
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&display=swap');
:root {
/* Brand colors — abgeleitet aus Logo (#FF6100) und Instagram-Karussells */
--orange: #FF6100;
--orange-dark: #D9500A;
--orange-light: #FFA163;
--orange-pale: #FDE3D0;
/* Warme Neutrale — kein Schwarz */
--offwhite: #FEF8F1;
--cream: #FDEEE1;
--beige: #FBDEC7;
--peach: #FBD9C0;
--sand: #F3E1CC;
--anthracite: #4A3A2E;
--charcoal: #3A2C22;
--white: #FFFFFF;
--warm-grey: #907F70;
/* Akzent aus deinen Karussells */
--sage: #C4DDB8;
--sage-deep: #5F8A50;
/* Type */
--serif: 'Playfair Display', Georgia, serif;
/* Ruhigere Serife für Zitate und Hervorhebungen.
Playfair kursiv ist stark kalligrafisch und auf Lesedistanz schwer zu lesen. */
--serif-lesbar: 'Lora', Georgia, 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Spacing / shape */
--radius: 4px;
--radius-lg: 2px;
--container: 1220px;
--transition: 0.35s cubic-bezier(.4,0,.2,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ==========================================================================
VERSTECKT HEISST VERSTECKT
Der Browser blendet ein Element mit dem Attribut hidden über
display: none aus. Diese Vorgabe hat aber die schwächste Gewichtung,
die es gibt. Jede eigene Regel mit display schlägt sie.
Genau das ist passiert: .ko-danke bekam display: grid, und damit stand
der Dankestext unter dem Formular, obwohl niemand etwas abgeschickt
hatte. Dasselbe hätte beim Ausblenden des Formulars zugeschlagen.
Der Fehler ist unauffällig, weil im HTML alles richtig steht und im
JavaScript auch. Nur die Wirkung fehlt. Deshalb hier einmal zentral
und mit !important, statt in jedem Bauteil einzeln daran zu denken.
========================================================================== */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
color: var(--anthracite);
background: var(--offwhite);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container {
/* Der Seitenrand steht als Variable da, damit Elemente, die absichtlich
bis an den Bildschirmrand laufen (etwa Wischzeilen), ihn exakt
aufheben können, statt den Wert zu wiederholen. */
--rand: 32px;
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--rand);
}
section { position: relative; }
/* ---------- Typography ---------- */
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.015em;
color: var(--charcoal);
text-wrap: balance;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--orange-dark);
margin-bottom: 20px;
}
.eyebrow::before {
content: "";
width: 26px;
height: 1px;
background: var(--orange);
}
h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h2.medium { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 500; }
p { font-size: 1.02rem; color: #4A433C; }
.lede {
font-size: clamp(1.05rem, 1.4vw, 1.3rem);
color: #55483F;
font-weight: 400;
max-width: 620px;
}
.section-head {
max-width: 720px;
margin-bottom: 56px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.italic { font-style: italic; font-weight: 400; }
.accent { color: var(--orange); font-style: italic; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--sans);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
padding: 17px 34px;
border-radius: 100px;
cursor: pointer;
border: 1.5px solid transparent;
transition: all var(--transition);
/* Lange Beschriftungen dürfen umbrechen. Mit nowrap lief der Text sonst
aus schmalen Karten heraus, etwa bei „Meine finanzielle Unabhängigkeit
planen". Der Pfeil bleibt am Textende. */
white-space: normal;
text-align: center;
justify-content: center;
line-height: 1.35;
}
.btn-arrow { flex: none; }
.btn-primary {
background: var(--orange);
color: var(--white);
box-shadow: 0 8px 24px -8px rgba(228, 99, 44, 0.55);
}
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(228, 99, 44, 0.6); }
.btn-secondary {
background: transparent;
color: var(--charcoal);
border-color: rgba(38,34,32,0.25);
}
.btn-secondary:hover { border-color: var(--charcoal); background: rgba(38,34,32,0.04); }
.btn-light {
background: var(--white);
color: var(--charcoal);
}
.btn-light:hover { background: var(--cream); transform: translateY(-2px); }
/* Größere Variante. Wird auf mehreren Seiten für den Hauptbutton
im Abschlussbereich benutzt, deshalb steht sie hier und nicht
in einer Seitendatei. */
.btn-gross { font-size: 0.98rem; padding: 16px 30px; }
/* ---------- Brotkrumen ----------
Auf jeder Unterseite gleich. Eine Datei, eine Regel. */
.brotkrumen {
font-family: var(--sans);
font-size: 0.78rem; color: var(--warm-grey);
margin-bottom: 22px;
display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.brotkrumen a {
color: var(--warm-grey); text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.22s ease, border-color 0.22s ease;
}
.brotkrumen a:hover { color: var(--orange-dark); border-bottom-color: var(--orange); }
.brotkrumen span:not([aria-hidden]) { color: var(--charcoal); font-weight: 600; }
.btn-outline-light {
background: transparent;
border-color: rgba(255,255,255,0.55);
color: var(--white);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }
.btn-arrow { font-size: 1.05em; transition: transform var(--transition); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* ---------- Header ---------- */
/* Logo in der Fußzeile. Das Logo im Kopf steht in css/navigation.css. */
.site-footer .logo img { height: 52px; margin-bottom: 18px; }
/* Instagram live feed mount */
.insta-embed { min-height: 200px; }
.insta-embed:empty { display: none; }
/* ProvenExpert live widget mount */
.pe-embed { min-height: 60px; }
.pe-embed:empty { display: none; }
/* ---------- Placeholder image blocks ---------- */
.ph-img {
position: relative;
background: linear-gradient(135deg, var(--cream) 0%, var(--sand) 100%);
display: flex;
align-items: flex-end;
overflow: hidden;
border-radius: var(--radius);
}
.ph-img::before {
content: "";
position: absolute; inset: 0;
background:
repeating-linear-gradient(45deg, rgba(228,99,44,0.05) 0 2px, transparent 2px 26px);
}
.ph-img .ph-label {
position: relative;
z-index: 2;
margin: 18px;
padding: 10px 16px;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(6px);
border-radius: 100px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--warm-grey);
display: flex;
align-items: center;
gap: 8px;
}
.ph-img .ph-label::before {
content: "◎";
color: var(--orange);
}
.ph-img.dark {
background: linear-gradient(135deg, #3a332c 0%, #221d19 100%);
}
.ph-img.dark .ph-label { background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.85); }
.real-photo { border-radius: var(--radius); overflow: hidden; }
.real-photo img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Hero ---------- */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 86px;
background: var(--offwhite);
overflow: hidden;
}
.hero .container {
display: grid;
grid-template-columns: 1.02fr 0.9fr;
gap: 64px;
align-items: center;
padding-top: 60px;
padding-bottom: 60px;
}
.hero-copy .eyebrow { margin-bottom: 26px; }
.hero-copy h1 { margin-bottom: 26px; }
.hero-copy .lede { margin-bottom: 40px; }
.hero-visual {
position: relative;
aspect-ratio: 4/5;
}
.hero-visual .real-photo { width: 100%; height: 100%; }
.hero-badge {
position: absolute;
bottom: -26px; left: -26px;
background: var(--white);
padding: 20px 24px;
border-radius: var(--radius);
box-shadow: 0 24px 48px -16px rgba(38,34,32,0.22);
display: flex;
gap: 14px;
align-items: center;
max-width: 260px;
}
.hero-badge .num { font-family: var(--serif); font-size: 1.8rem; color: var(--orange); font-weight: 500; }
.hero-badge .txt { font-size: 0.78rem; color: var(--warm-grey); line-height: 1.35; }
/* ---------- Identifikation ---------- */
.section-identifikation {
background: var(--charcoal);
color: var(--white);
padding: 130px 0;
}
.section-identifikation .eyebrow { color: var(--orange-light); }
.section-identifikation .eyebrow::before { background: var(--orange-light); }
.section-identifikation h2 { color: var(--white); }
.section-identifikation .lede { color: rgba(255,255,255,0.65); }
.thought-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255,255,255,0.1);
margin: 64px 0 56px;
border-radius: var(--radius);
overflow: hidden;
}
.thought-card {
background: #211D1A;
padding: 36px 30px;
transition: background var(--transition);
}
.thought-card:hover { background: #2A2521; }
.thought-card .quote-mark { font-family: var(--serif); font-size: 2.2rem; color: var(--orange); line-height: 1; margin-bottom: 14px; display: block; }
.thought-card p { color: rgba(255,255,255,0.82); font-size: 1rem; font-style: italic; font-family: var(--serif-lesbar); font-weight: 400; }
.section-identifikation .cta-row { justify-content: center; }
/* ---------- Ansatz ---------- */
.section-ansatz { padding: 140px 0; background: var(--offwhite); }
.ansatz-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; }
.ansatz-steps { display: flex; flex-direction: column; }
.ansatz-step {
display: flex;
gap: 24px;
padding: 26px 0;
border-bottom: 1px solid rgba(38,34,32,0.1);
}
.ansatz-step:first-child { padding-top: 0; }
.ansatz-step .step-num {
font-family: var(--serif);
font-size: 1.1rem;
color: var(--orange);
min-width: 34px;
}
.ansatz-step .step-body h4 { font-size: 1.05rem; font-weight: 500; margin-bottom: 6px; font-family: var(--sans); }
.ansatz-step .step-body p { font-size: 0.94rem; }
.ansatz-note {
background: var(--cream);
border-radius: var(--radius);
padding: 44px;
position: sticky;
top: 120px;
}
.ansatz-note .quote-mark { font-family: var(--serif); font-size: 3rem; color: var(--orange); display: block; margin-bottom: 18px; }
.ansatz-note p.big-quote {
font-family: var(--serif);
font-size: clamp(1.3rem, 2vw, 1.7rem);
color: var(--charcoal);
font-weight: 400;
line-height: 1.4;
}
.ansatz-note .quote-attr { margin-top: 24px; font-size: 0.85rem; color: var(--warm-grey); font-weight: 500; }
/* ---------- Lebensphasen ---------- */
.section-phasen { padding: 140px 0; background: var(--cream); }
.phasen-track {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
margin-top: 64px;
}
.phase-card {
background: var(--white);
border-radius: var(--radius);
padding: 32px 24px;
transition: transform var(--transition), box-shadow var(--transition);
border-top: 3px solid var(--orange);
}
.phase-card:hover { transform: translateY(-8px); box-shadow: 0 24px 40px -20px rgba(38,34,32,0.2); }
.phase-card .phase-index { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--warm-grey); font-weight: 600; text-transform: uppercase; margin-bottom: 16px; }
.phase-card h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; margin-bottom: 14px; }
.phase-card p { font-size: 0.86rem; color: var(--warm-grey); line-height: 1.5; }
.phasen-arrow-row {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 28px;
color: var(--warm-grey);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
.phasen-arrow-row span.arrow { color: var(--orange); }
/* ---------- Lifestyle / Freiheit ---------- */
.section-freiheit {
padding: 0;
background: var(--charcoal);
}
.freiheit-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 260px);
}
.freiheit-grid .ph-img,
.freiheit-grid .real-photo { border-radius: 0; height: 100%; overflow: hidden; }
.freiheit-grid .real-photo img { width: 100%; height: 100%; object-fit: cover; }
.freiheit-grid .cell-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.freiheit-grid .cell-2 { grid-column: 3 / 5; grid-row: 1 / 2; }
.freiheit-grid .cell-3 { grid-column: 3 / 4; grid-row: 2 / 3; }
.freiheit-grid .cell-4 { grid-column: 4 / 5; grid-row: 2 / 3; }
.freiheit-copy {
padding: 130px 0;
text-align: center;
}
.freiheit-copy .container { max-width: 820px; }
.freiheit-copy .eyebrow { justify-content: center; color: var(--orange-light); }
.freiheit-copy .eyebrow::before { background: var(--orange-light); }
.freiheit-copy h2 { color: var(--white); margin-bottom: 30px; }
.freiheit-copy p.big-line {
font-family: var(--serif-lesbar);
font-style: italic;
font-size: clamp(1.3rem, 2.4vw, 1.9rem);
color: rgba(255,255,255,0.92);
line-height: 1.5;
font-weight: 400;
}
.freiheit-copy p.strike {
font-size: 1rem;
color: rgba(255,255,255,0.45);
text-decoration: line-through;
margin-bottom: 18px;
font-family: var(--sans);
}
/* ---------- Social proof / cases ---------- */
.section-proof { padding: 140px 0; background: var(--offwhite); }
.case-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 60px;
}
.case-card {
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 20px 40px -28px rgba(38,34,32,0.25);
}
.case-head {
background: var(--cream);
padding: 26px 28px;
}
.case-head .case-tag { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-dark); font-weight: 700; margin-bottom: 8px; }
.case-head h4 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; }
.case-body { padding: 28px; }
.case-col-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--warm-grey); margin-bottom: 10px; margin-top: 18px; }
.case-col-label:first-child { margin-top: 0; }
.case-body ul li {
font-size: 0.88rem;
color: #55483F;
padding: 6px 0 6px 20px;
position: relative;
}
.case-col-label.before-label { color: var(--warm-grey); }
.case-body .before li::before { content: "—"; position: absolute; left: 0; color: var(--warm-grey); }
.case-body .after li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.proof-footnote { margin-top: 40px; font-size: 0.82rem; color: var(--warm-grey); text-align: center; }
/* Testimonials strip */
.testimonial-strip {
margin-top: 60px;
background: var(--cream);
border-radius: var(--radius);
padding: 48px;
display: grid;
grid-template-columns: auto 1fr;
gap: 36px;
align-items: center;
}
.testimonial-rating { text-align: center; }
.testimonial-rating .stars { color: var(--orange); font-size: 1.3rem; letter-spacing: 2px; margin-bottom: 6px; }
.testimonial-rating .score { font-family: var(--serif); font-size: 2.4rem; font-weight: 500; }
.testimonial-rating .source { font-size: 0.75rem; color: var(--warm-grey); }
.testimonial-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.testimonial-quotes blockquote { font-size: 0.9rem; color: #55483F; font-style: italic; font-family: var(--serif-lesbar); line-height: 1.5; }
.testimonial-quotes cite { display: block; margin-top: 10px; font-size: 0.78rem; font-style: normal; font-weight: 600; color: var(--charcoal); }
/* ---------- Leistungen ---------- */
.section-leistungen { padding: 140px 0; background: var(--cream); }
.leistungen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 60px;
}
.leistung-card {
background: var(--white);
padding: 36px 32px;
border-radius: var(--radius);
transition: transform var(--transition), box-shadow var(--transition);
}
.leistung-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -26px rgba(38,34,32,0.28); }
.leistung-card .leistung-num { font-family: var(--serif); font-size: 0.95rem; color: var(--orange); margin-bottom: 18px; }
.leistung-card h4 { font-size: 1.15rem; margin-bottom: 12px; font-family: var(--serif); font-weight: 500; }
.leistung-card p { font-size: 0.9rem; }
.leistungen-note {
margin-top: 44px;
text-align: center;
font-size: 0.92rem;
color: var(--warm-grey);
font-style: italic;
font-family: var(--serif-lesbar);
}
/* ---------- Über Nicola ---------- */
.section-about { padding: 140px 0; background: var(--offwhite); }
.about-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 72px;
align-items: center;
}
.about-visual { aspect-ratio: 3/4; position: relative; }
.about-visual .real-photo { width: 100%; height: 100%; }
.about-copy p { margin-bottom: 20px; font-size: 1.02rem; }
.about-copy p.lead-line { font-family: var(--serif-lesbar); font-size: 1.35rem; color: var(--charcoal); font-style: italic; font-weight: 400; margin-bottom: 26px; }
.about-list { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.about-list li { display: flex; gap: 14px; font-size: 0.94rem; align-items: flex-start; }
.about-list li::before { content: "＋"; color: var(--orange); font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.about-credentials { display: flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.credential { font-size: 0.78rem; color: var(--warm-grey); border-left: 2px solid var(--orange); padding-left: 12px; }
.credential strong { display: block; color: var(--charcoal); font-family: var(--serif); font-size: 1rem; font-weight: 500; }
/* ---------- Finanz-Check CTA ---------- */
.section-finanzcheck {
padding: 130px 0;
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
color: var(--white);
overflow: hidden;
position: relative;
}
.section-finanzcheck::after {
content: "";
position: absolute;
width: 600px; height: 600px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.15);
top: -280px; right: -180px;
}
.finanzcheck-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: center;
position: relative;
z-index: 2;
}
.section-finanzcheck .eyebrow { color: rgba(255,255,255,0.85); }
.section-finanzcheck .eyebrow::before { background: var(--white); }
.section-finanzcheck h2 { color: var(--white); margin-bottom: 22px; }
.section-finanzcheck p { color: rgba(255,255,255,0.85); }
.finanzcheck-card {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(10px);
border-radius: var(--radius);
padding: 40px;
}
.finanzcheck-card h3 { color: var(--white); font-size: 1.3rem; margin-bottom: 22px; }
.finanzcheck-card ul { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.finanzcheck-card ul li { font-size: 0.92rem; color: rgba(255,255,255,0.92); padding-left: 26px; position: relative; }
.finanzcheck-card ul li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }
.finanzcheck-disclaimer { font-size: 0.78rem; color: rgba(255,255,255,0.7); margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); }
/* ---------- Instagram / Content ---------- */
.section-content { padding: 140px 0; background: var(--offwhite); }
.content-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; gap: 40px; flex-wrap: wrap; }
.content-header .section-head { margin-bottom: 0; }
.insta-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.insta-tile { aspect-ratio: 1/1; display: block; overflow: hidden; position: relative; }
.insta-tile .ph-img { height: 100%; }
.insta-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.4,0,.2,1); }
.insta-tile:hover img { transform: scale(1.06); }
.insta-tile::after {
content: "";
position: absolute; inset: 0;
background: rgba(228,99,44,0);
transition: background var(--transition);
}
.insta-tile:hover::after { background: rgba(228,99,44,0.16); }
.insta-handle { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; }
.insta-handle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
/* ---------- Newsletter ---------- */
.section-newsletter { padding: 110px 0; background: var(--cream); }
.newsletter-box {
background: var(--white);
border-radius: var(--radius);
padding: 60px;
display: grid;
grid-template-columns: 1fr 0.9fr;
gap: 50px;
align-items: center;
}
.newsletter-copy h2 { margin-bottom: 18px; }
.freebie-list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.freebie-list .freebie-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9rem;
color: var(--anthracite);
font-weight: 500;
}
.freebie-list .freebie-item .ic { color: var(--orange); font-family: var(--serif-lesbar); font-style: italic; }
.newsletter-form { display: flex; flex-direction: column; gap: 14px; }
.newsletter-form input {
width: 100%;
padding: 16px 20px;
border-radius: 100px;
border: 1.5px solid rgba(38,34,32,0.15);
font-family: var(--sans);
font-size: 0.95rem;
background: var(--offwhite);
}
.newsletter-form input:focus { outline: none; border-color: var(--orange); }
.newsletter-form small { font-size: 0.74rem; color: var(--warm-grey); text-align: center; }
/* ---------- Footer ---------- */
.site-footer {
/* Bewusst etwas wärmer und heller als --charcoal, damit der Abschluss
als dunkles Braun liest und nicht als Schwarz. */
background: #433226;
color: rgba(255,255,255,0.65);
padding: 80px 0 32px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 0.88rem; max-width: 280px; }
.footer-social { display: flex; gap: 14px; margin-top: 22px; }
.footer-social a {
width: 38px; height: 38px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.8rem;
transition: var(--transition);
}
.footer-social a:hover { background: var(--orange); border-color: var(--orange); }
.footer-col h5 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 20px; font-weight: 600; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.88rem; color: rgba(255,255,255,0.6); transition: color var(--transition); }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
padding-top: 28px;
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: rgba(255,255,255,0.45);
flex-wrap: wrap;
gap: 12px;
}
/* ---------- Simple subpage hero (for placeholder pages) ---------- */
.page-hero {
padding: 200px 0 90px;
background: var(--cream);
}
.page-hero .eyebrow { justify-content: flex-start; }
.page-hero h1 { max-width: 760px; }
.page-hero .lede { margin-top: 24px; }
.page-body { padding: 90px 0; }
.coming-soon-box {
background: var(--white);
border: 1px dashed rgba(228,99,44,0.4);
border-radius: var(--radius);
padding: 56px;
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.coming-soon-box .icon { font-family: var(--serif-lesbar); font-size: 2rem; color: var(--orange); margin-bottom: 18px; font-style: italic; }
.coming-soon-box h3 { margin-bottom: 14px; }
.coming-soon-box p { margin-bottom: 30px; }
/* =========================================================
CONVERSION COMPONENTS
========================================================= */
/* ---------- Sticky mobile CTA bar ---------- */
.sticky-cta {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 450;
background: rgba(251, 247, 241, 0.94);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid rgba(38,34,32,0.1);
/* Flacher als vorher: 8 px statt 12 px oben und unten, dazu eine
einzeilige Beschriftung. Aus rund 76 px werden rund 58 px. */
padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
display: none;
align-items: center;
gap: 12px;
transform: translateY(110%);
transition: transform var(--transition);
box-shadow: 0 -8px 28px -14px rgba(38,34,32,0.25);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .sticky-meta {
flex: 1;
min-width: 0;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.25;
color: var(--warm-grey);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sticky-cta .btn {
flex: none;
padding: 12px 20px;
font-size: 0.85rem;
min-height: 44px;
}
/* Auf sehr schmalen Geräten hat der Zusatz keinen Platz mehr. Dann trägt
der Knopf allein — er ist die eigentliche Aussage. */
@media (max-width: 360px) {
.sticky-cta .sticky-meta { display: none; }
.sticky-cta .btn { flex: 1; justify-content: center; }
}
/* ---------- Mid-page CTA band ---------- */
.cta-band {
padding: 84px 0;
background: var(--charcoal);
color: var(--white);
text-align: center;
}
.cta-band.on-cream { background: var(--beige); color: var(--charcoal); }
.cta-band .container { max-width: 780px; }
.cta-band h3 {
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
color: inherit;
margin-bottom: 16px;
}
.cta-band.on-cream h3 { color: var(--charcoal); }
.cta-band p {
color: rgba(255,255,255,0.7);
margin-bottom: 30px;
font-size: 1rem;
}
.cta-band.on-cream p { color: #55483F; }
.cta-band .cta-row { justify-content: center; }
.cta-band .band-note {
margin-top: 20px;
margin-bottom: 0;
font-size: 0.8rem;
color: rgba(255,255,255,0.5);
}
.cta-band.on-cream .band-note { color: var(--warm-grey); }
/* Wird auf finanzberatung.html und immobilien.html verwendet */
.trust-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.trust-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 100px;
border: 1px solid rgba(255,255,255,0.3);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.92);
}
.trust-badge::before { content: "✓"; opacity: 0.7; }
.trust-badge.on-light {
border-color: rgba(38,34,32,0.18);
color: var(--anthracite);
background: var(--white);
}
.trust-badge.on-light::before { color: var(--orange); opacity: 1; }
/* ---------- Social proof inside booking card ---------- */
.card-proof {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
margin-bottom: 26px;
background: rgba(255,255,255,0.14);
border-radius: var(--radius);
}
.card-proof .cp-score {
font-family: var(--serif);
font-size: 1.6rem;
font-weight: 500;
line-height: 1;
color: var(--white);
}
.card-proof .cp-stars { color: #FFD9A0; font-size: 0.8rem; letter-spacing: 1px; }
.card-proof .cp-text { font-size: 0.76rem; color: rgba(255,255,255,0.85); line-height: 1.35; }
/* ---------- Micro process (what happens after booking) ---------- */
.micro-process {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 30px;
}
.micro-step {
padding: 18px;
border-radius: var(--radius);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.18);
}
.micro-step .ms-num {
font-family: var(--serif);
font-size: 0.8rem;
color: rgba(255,255,255,0.6);
margin-bottom: 8px;
}
.micro-step .ms-title { font-size: 0.88rem; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.micro-step p { font-size: 0.76rem; color: rgba(255,255,255,0.7); }
/* ---------- Beratungsablauf ---------- */
.section-ablauf { padding: 130px 0; background: var(--offwhite); }
.ablauf-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 56px;
}
.ablauf-card {
padding: 32px 26px;
background: var(--white);
border-radius: var(--radius);
position: relative;
border-left: 3px solid var(--orange-pale);
transition: border-color var(--transition);
}
.ablauf-card:hover { border-left-color: var(--orange); }
.ablauf-card .ab-step {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: var(--orange);
margin-bottom: 12px;
}
.ablauf-card h4 { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 10px; font-weight: 500; }
.ablauf-card p { font-size: 0.87rem; }
.ablauf-card .ab-duration {
margin-top: 14px;
font-size: 0.74rem;
color: var(--warm-grey);
font-weight: 600;
}
/* ---------- FAQ / Einwandbehandlung ---------- */
.section-faq { padding: 130px 0; background: var(--cream); }
.faq-list {
max-width: 820px;
margin: 56px auto 0;
border-top: 1px solid rgba(38,34,32,0.14);
}
.faq-item { border-bottom: 1px solid rgba(38,34,32,0.14); }
.faq-q {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 26px 44px 26px 0;
font-family: var(--serif);
font-size: clamp(1.05rem, 1.5vw, 1.22rem);
font-weight: 500;
color: var(--charcoal);
cursor: pointer;
position: relative;
line-height: 1.35;
transition: color var(--transition);
}
.faq-q:hover { color: var(--orange-dark); }
.faq-q::after {
content: "+";
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
font-family: var(--sans);
font-weight: 300;
color: var(--orange);
transition: transform var(--transition);
}
.faq-item.is-open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.45s cubic-bezier(.4,0,.2,1);
}
.faq-a-inner { padding: 0 60px 28px 0; }
.faq-a-inner p { font-size: 0.97rem; line-height: 1.65; }
.faq-a-inner p + p { margin-top: 14px; }
.faq-a-inner strong { color: var(--charcoal); font-weight: 600; }
/* =========================================================
CONTENT COMPONENTS (Unterseiten)
========================================================= */
.section-topic { padding: 110px 0; background: var(--offwhite); }
.section-topic.on-cream { background: var(--cream); }
.topic-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 68px;
align-items: start;
}
.topic-sticky { position: sticky; top: 120px; }
.topic-sticky h2 { margin-bottom: 18px; }
.prose p { margin-bottom: 18px; line-height: 1.7; }
.prose h3 { margin: 34px 0 14px; }
.prose h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 26px 0 10px; }
.prose strong { color: var(--charcoal); font-weight: 600; }
.checklist { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.checklist li {
display: flex;
gap: 13px;
font-size: 0.95rem;
align-items: flex-start;
line-height: 1.55;
}
.checklist li::before {
content: "✓";
color: var(--orange);
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.checklist.warn li::before { content: "✕"; color: var(--warm-grey); }
.highlight-box {
background: var(--white);
border-left: 3px solid var(--orange);
border-radius: var(--radius);
padding: 28px 32px;
margin: 30px 0;
}
.highlight-box .hb-label {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: var(--orange-dark);
margin-bottom: 10px;
}
.highlight-box p { margin-bottom: 0; font-size: 0.95rem; }
.highlight-box p + p { margin-top: 12px; }
.section-topic.on-cream .highlight-box { background: var(--offwhite); }
.stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin: 34px 0;
}
.stat-item {
padding: 24px;
background: var(--white);
border-radius: var(--radius);
border-top: 3px solid var(--orange);
}
.stat-item .stat-num {
font-family: var(--serif);
font-size: 2rem;
font-weight: 500;
color: var(--orange-dark);
line-height: 1;
margin-bottom: 10px;
}
.stat-item p { font-size: 0.82rem; margin-bottom: 0; color: var(--warm-grey); line-height: 1.45; }
.section-topic.on-cream .stat-item { background: var(--offwhite); }
.compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin: 30px 0;
}
.compare-col {
padding: 28px;
border-radius: var(--radius);
background: var(--white);
}
.compare-col.negative { background: rgba(38,34,32,0.04); }
.compare-col .cc-title {
font-family: var(--sans);
font-size: 0.75rem;
letter-spacing: 0.09em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 16px;
}
.compare-col.positive .cc-title { color: var(--orange-dark); }
.compare-col.negative .cc-title { color: var(--warm-grey); }
.section-topic.on-cream .compare-col { background: var(--offwhite); }
.section-topic.on-cream .compare-col.negative { background: rgba(38,34,32,0.05); }
.topic-nav {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 40px;
}
.topic-nav a {
padding: 10px 20px;
border-radius: 100px;
border: 1px solid rgba(38,34,32,0.16);
font-size: 0.84rem;
font-weight: 500;
transition: all var(--transition);
background: var(--white);
}
.topic-nav a:hover { border-color: var(--orange); color: var(--orange-dark); }
.disclaimer-note {
margin-top: 26px;
padding: 18px 22px;
background: rgba(38,34,32,0.04);
border-radius: var(--radius);
font-size: 0.79rem;
color: var(--warm-grey);
line-height: 1.55;
}
/* Freebie cards */
.freebie-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
margin-top: 56px;
}
.freebie-card {
background: var(--white);
border-radius: var(--radius);
padding: 36px;
display: flex;
flex-direction: column;
transition: transform var(--transition), box-shadow var(--transition);
}
.freebie-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -26px rgba(38,34,32,0.28); }
.freebie-card .fc-tag {
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: var(--orange-dark);
margin-bottom: 14px;
}
.freebie-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.freebie-card p { font-size: 0.92rem; margin-bottom: 20px; }
.freebie-card .checklist { margin: 0 0 26px; }
.freebie-card .checklist li { font-size: 0.86rem; }
.freebie-card .btn { margin-top: auto; justify-content: center; }
/* Blog / Wissen topic cards */
.wissen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
.wissen-card {
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
.wissen-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -26px rgba(38,34,32,0.28); }
.wissen-card .wc-img { aspect-ratio: 16/10; }
.wissen-card .wc-img .ph-img { height: 100%; border-radius: 0; }
.wissen-card .wc-body { padding: 26px; }
.wissen-card .wc-cat {
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: var(--orange-dark);
margin-bottom: 10px;
}
.wissen-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.wissen-card p { font-size: 0.87rem; margin-bottom: 0; }
/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal-page { padding: 70px 0 110px; background: var(--offwhite); }
.legal-content { max-width: 820px; }
.legal-content h2 {
font-size: clamp(1.4rem, 2.2vw, 1.9rem);
margin: 56px 0 18px;
padding-top: 28px;
border-top: 1px solid rgba(38,34,32,0.12);
}
.legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-content h3 {
font-size: 1.12rem;
margin: 32px 0 12px;
font-family: var(--sans);
font-weight: 600;
}
.legal-content p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 14px; }
/* Hinweis darauf, was auf dieser Website NICHT passiert. Steht bewusst
in der Datenschutzerklärung, weil eine Aufzählung sonst mehr verspricht
als tatsächlich verarbeitet wird. */
.legal-hinweis {
font-size: 0.88rem !important;
line-height: 1.6;
color: var(--anthracite);
background: var(--cream);
border-radius: var(--r-sm, 12px);
padding: 12px 15px;
margin: 4px 0 18px !important;
}
.legal-content ul { margin: 0 0 18px; }
.legal-content ul li {
font-size: 0.95rem;
line-height: 1.65;
padding: 5px 0 5px 20px;
position: relative;
color: #4A433C;
}
.legal-content ul li::before {
content: "–";
position: absolute; left: 0;
color: var(--orange);
}
.legal-content a { color: var(--orange-dark); text-decoration: underline; word-break: break-word; }
.legal-content .address-block {
background: var(--cream);
border-radius: var(--radius);
padding: 26px 30px;
margin: 20px 0 26px;
}
.legal-content .address-block p { margin-bottom: 4px; }
.legal-toc {
background: var(--white);
border-left: 3px solid var(--orange);
border-radius: var(--radius);
padding: 26px 30px;
margin-bottom: 40px;
}
.legal-toc h3 { margin-top: 0; }
.legal-toc ul li { padding-left: 18px; font-size: 0.9rem; }
.legal-updated {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--warm-grey);
background: var(--cream);
padding: 8px 16px;
border-radius: 100px;
margin-bottom: 30px;
}
/* ---------- Reveal animation ---------- */
/* =========================================================================
EINBLENDEN BEIM SCROLLEN
-------------------------------------------------------------------------
WICHTIG: Die Klasse .reveal versteckt Inhalt nur dann, wenn JavaScript
ihn auch wieder sichtbar machen kann.
Vorher stand hier schlicht .reveal { opacity: 0 }. Löste der
IntersectionObserver für ein Element nicht aus, blieb der Inhalt für
immer unsichtbar — bei vorhandener Höhe. Auf der Startseite ist genau
das mit der Bewertungswand passiert: Die Karten standen im HTML, waren
aber nicht zu sehen. Eine große leere Fläche.
Deshalb greift .reveal jetzt erst, wenn js/script.js die Klasse
'zeigt-animationen' am gesetzt hat. Ohne JavaScript ist alles
sofort sichtbar. Und js/script.js setzt die Klasse nur, wenn es den
IntersectionObserver auch wirklich benutzen kann.
Zusätzlich gibt es dort ein Sicherheitsnetz: Was nach zwei Sekunden
noch versteckt ist, wird eingeblendet.
Merksatz: Inhalt darf nie davon abhängen, dass eine Animation
ausgelöst wird.
========================================================================= */
.zeigt-animationen .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.zeigt-animationen .reveal.is-visible { opacity: 1; transform: translateY(0); }@media (max-width: 1080px) {
.hero .container { grid-template-columns: 1fr; gap: 56px; }
.hero-visual { max-width: 460px; margin: 0 auto; }
.ansatz-grid { grid-template-columns: 1fr; gap: 48px; }
.ansatz-note { position: static; }
.about-grid { grid-template-columns: 1fr; }
.about-visual { max-width: 420px; margin: 0 auto; }
.finanzcheck-grid { grid-template-columns: 1fr; }
.newsletter-box { grid-template-columns: 1fr; padding: 44px; }
.phasen-track { grid-template-columns: repeat(3, 1fr); }
.thought-grid { grid-template-columns: 1fr; }
.case-grid { grid-template-columns: 1fr; }
.testimonial-strip { grid-template-columns: 1fr; text-align: center; }
.testimonial-quotes { grid-template-columns: 1fr; }
.leistungen-grid { grid-template-columns: repeat(2, 1fr); }
.insta-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}@media (max-width: 1000px) {
.freiheit-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 200px); }
.freiheit-grid .cell-1 { grid-column: 1/3; grid-row: 1/3; }
.freiheit-grid .cell-2 { grid-column: 1/2; grid-row: 3/4; }
.freiheit-grid .cell-3 { grid-column: 2/3; grid-row: 3/4; }
.freiheit-grid .cell-4 { grid-column: 1/3; grid-row: 4/5; }
}@media (max-width: 640px) {
.container { padding: 0 20px; }
.section-identifikation, .section-ansatz, .section-phasen, .section-proof, .section-leistungen, .section-about, .section-content { padding: 90px 0; }
.freiheit-copy { padding: 90px 0; }
.section-finanzcheck { padding: 90px 0; }
.phasen-track { grid-template-columns: 1fr; }
.leistungen-grid { grid-template-columns: 1fr; }
.insta-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.footer-grid { grid-template-columns: 1fr; }
.cta-row { flex-direction: column; align-items: stretch; }
.cta-row .btn { justify-content: center; }
.hero-badge { position: static; margin-top: 20px; max-width: 100%; }
.testimonial-strip { padding: 32px; }
.newsletter-box { padding: 32px; }
}@media (max-width: 1080px) {
.topic-grid { grid-template-columns: 1fr; gap: 40px; }
.topic-sticky { position: static; }
.ablauf-grid { grid-template-columns: repeat(2, 1fr); }
.wissen-grid { grid-template-columns: repeat(2, 1fr); }
}@media (max-width: 1000px) {
/* Primary CTA is hidden inside the burger menu below this width,
so the sticky bar carries the conversion. */
.sticky-cta { display: flex; }
/* Platz für den festen Knopf. Er liegt über allem; ohne diesen Abstand
verdeckt er das Ende des Footers, und dort stehen Impressum und
Datenschutz. Der Wert folgt der Höhe des Knopfes — die ist von
rund 76 px auf rund 58 px gesunken. */
body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
.site-footer { padding-bottom: 44px; }
}@media (max-width: 640px) {
.section-ablauf, .section-faq, .section-topic { padding: 80px 0; }
.cta-band { padding: 64px 0; }
.ablauf-grid { grid-template-columns: 1fr; }
.micro-process { grid-template-columns: 1fr; }
.stat-row { grid-template-columns: 1fr; }
.compare-grid { grid-template-columns: 1fr; }
.freebie-grid { grid-template-columns: 1fr; }
.wissen-grid { grid-template-columns: 1fr; }
.faq-q { padding-right: 38px; font-size: 1.02rem; }
.faq-a-inner { padding-right: 0; }
.highlight-box { padding: 24px; }
.freebie-card { padding: 28px; }
.sticky-cta .sticky-meta { display: none; }
.sticky-cta .btn { width: 100%; justify-content: center; }
}
/* =========================================================================
TOOLTIPS — global, siehe js/tooltip.js
-------------------------------------------------------------------------
Es gibt genau eine Sprechblase auf der Seite. Sie hängt am und
liegt fixiert über allem. Dadurch kann sie von keinem Container mehr
abgeschnitten werden. Die alten Blasen im Markup werden ausgeblendet,
sobald JavaScript läuft.
========================================================================= */
.tip-blase {
position: fixed;
z-index: 9000;
max-width: min(320px, calc(100vw - 24px));
background: var(--charcoal);
color: var(--white);
border-radius: var(--r-sm);
padding: 12px 15px;
box-shadow: 0 12px 30px rgba(58,44,34,0.26);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.18s ease, transform 0.18s ease;
pointer-events: none;
}
.tip-blase.ist-sichtbar { opacity: 1; transform: translateY(0); }
.tip-blase[hidden] { display: none; }
.tip-text {
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0;
text-align: left;
text-transform: none;
}
.tip-pfeil {
position: absolute;
bottom: -5px;
width: 10px; height: 10px;
margin-left: -5px;
background: var(--charcoal);
transform: rotate(45deg);
border-radius: 1px;
}
.tip-blase.ist-unten .tip-pfeil { bottom: auto; top: -5px; }
/* Der Auslöser bekommt sichtbares Feedback, solange die Blase offen ist */
.tip-offen { border-color: var(--orange) !important; color: var(--orange-dark) !important; }
/* Neue, empfohlene Schreibweise: */
.tip {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
border: 1.4px solid var(--warm-grey);
background: none; color: var(--warm-grey);
font-family: var(--sans); font-size: 0.62rem; font-weight: 700;
line-height: 1; padding: 0; margin-left: 5px;
cursor: pointer; vertical-align: middle;
position: relative;
transition: border-color 0.22s ease, color 0.22s ease;
flex: none;
}
.tip:hover, .tip:focus-visible { border-color: var(--orange); color: var(--orange-dark); outline: none; }
/* Die Klickfläche ist unsichtbar größer als der Kreis. 18px wären auf
dem Handy nicht treffsicher, 44px sind die übliche Mindestgröße. */
.tip::before {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 44px; height: 44px;
transform: translate(-50%, -50%);
}
/* Sobald das Skript läuft, verschwinden die alten Inline-Blasen.
Ohne JavaScript bleiben sie sichtbar und funktionieren per Hover. */
.tips-aktiv .avd-info-text,
.tips-aktiv .info-text,
.tips-aktiv .sf-info-text { display: none !important; }
/* Kein Container darf einen Tooltip-Auslöser beschneiden */
.avd-info, .info-i, .sf-info, .tip { overflow: visible; }
/* =========================================================================
FOOTER — eine Komponente für alle Seiten
-------------------------------------------------------------------------
Vorher waren die Links im unteren Footer als 38-Pixel-Kreise formatiert.
Auf der Startseite hat css/start.css das überschrieben, auf allen
Unterseiten nicht. Dort standen „Impressum" und „Datenschutz" dann in
runden Kreisen und liefen ineinander.
Deshalb steht die Regel jetzt hier, in der Datei, die jede Seite lädt.
Runde Icon-Buttons gibt es nur noch, wenn sie ausdrücklich angefordert
werden: