/* ========================================================= Fabian Stäb – Vermögensberatung Design: cleanes Weiß als Basis, Gold nur gezielt bandweise (Kennzahlen, Zitat, Abschluss-CTA) + ein fotogetriebener dunkler Moment (.atmo). Liquid-Glass-Pills für Buttons & Chips, Bento-Grid für die Leistungen. Scroll-Reveal angelehnt an syntracai.de (Reveal aus src/components/ui/reveal.tsx: 0.55s, cubic-bezier(.22,1,.36,1)). ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap'); :root{ /* Farben */ --ink:#1E1B16; --ink-2:#1C2027; --ink-3:#242832; --gold:#C9A94A; --gold-light:#E4CD8A; --gold-deep:#A57F2C; --paper:#FFFFFF; --paper-2:#F5EFDF; --cream:#F5F3EE; --text:#1E1B16; --muted:#6E6858; --muted-2:#8A8474; --on-dark-muted:rgba(245,243,238,.64); --line:rgba(27,27,24,.10); --line-dark:rgba(245,243,238,.14); --shadow-sm:0 6px 22px rgba(20,18,10,.07); --shadow-md:0 26px 64px rgba(15,13,8,.13); --shadow-gold:0 4px 24px rgba(201,169,74,.32); /* Typografie */ --disp:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --wrap:1220px; --wrap-nar:760px; --radius:20px; --radius-sm:11px; --ease:cubic-bezier(.16,1,.3,1); --ease-reveal:cubic-bezier(.22,1,.36,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; font-family:var(--sans); background:var(--paper); color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.6; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4,blockquote,p{margin:0} button{font:inherit;background:none;border:none;cursor:pointer;color:inherit} input,textarea,select{font:inherit} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} .wrap-nar{max-width:var(--wrap-nar);margin:0 auto;padding:0 28px} /* Lange deutsche Komposita ("Vermögensberatung") sprengen sonst schmale Viewports. hyphens braucht lang="de" am - ist gesetzt. */ h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;color:var(--text); overflow-wrap:break-word;hyphens:auto} h1{font-size:clamp(2.4rem,1.85rem + 2.4vw,3.9rem);line-height:1.08;font-weight:800} h2{font-size:clamp(1.8rem,1.55rem + 1.1vw,2.5rem);line-height:1.16} h3{font-size:1.22rem;line-height:1.34;font-weight:700} .hl{color:var(--gold-deep);font-style:normal;font-weight:800} /* ---------- Kicker-Pill (Eyebrow-Chip) ---------- */ .kicker{ display:inline-flex;align-items:center;gap:8px; font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--gold-deep);margin-bottom:20px; background:rgba(201,169,74,.10);border:1px solid rgba(201,169,74,.22); padding:7px 15px;border-radius:999px; } .kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold-deep);flex-shrink:0} .kicker.light{color:var(--gold-deep)} .kicker.center{margin-left:auto;margin-right:auto} .lede{font-size:1.08rem;color:var(--muted);max-width:56ch} .lede + p.absatz{margin-top:16px;max-width:56ch;color:var(--muted)} .lede.on-dark{color:var(--muted)} .tnum{font-variant-numeric:tabular-nums} /* ---------- Liquid-Glass Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:99px;font-weight:700;font-size:.88rem; transition:transform .3s var(--ease),background .25s,color .25s,box-shadow .3s,border-color .25s; white-space:nowrap;cursor:pointer; } .btn:active{transform:scale(.97)} .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;flex-shrink:0} .btn-gold{ background:rgba(201,169,74,.9);color:#1D1706; border:1px solid rgba(201,169,74,.65); backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%); box-shadow:var(--shadow-gold),inset 0 1px 0 rgba(255,255,255,.5); } .btn-gold:hover{background:var(--gold);box-shadow:0 10px 32px rgba(201,169,74,.42),inset 0 1px 0 rgba(255,255,255,.6);transform:translateY(-1px)} .btn-ink{background:var(--ink);color:var(--cream)} .btn-ink:hover{background:var(--ink-3)} .btn-ghost{ background:rgba(255,255,255,.7);color:var(--text); border:1px solid rgba(30,27,22,.10); backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:0 2px 14px rgba(30,27,22,.05),inset 0 1px 0 rgba(255,255,255,.7); } .btn-ghost:hover{border-color:rgba(201,169,74,.5);color:var(--gold-deep);background:rgba(255,255,255,.92)} .btn-ghost.on-dark{background:rgba(255,255,255,.7);border-color:rgba(30,27,22,.10);color:var(--text)} .atmo .btn-ghost.on-dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:var(--cream)} .atmo .btn-ghost.on-dark:hover{background:rgba(255,255,255,.2);border-color:var(--gold-light);color:var(--gold-light)} .btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} /* Chip-Pills (z. B. Hero-Trust-Reihe) */ .chip{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.7);border:1px solid rgba(30,27,22,.08); backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%); border-radius:999px;padding:9px 16px;font-size:.86rem;font-weight:600;color:var(--text); box-shadow:0 2px 12px rgba(30,27,22,.05),inset 0 1px 0 rgba(255,255,255,.6); } /* ---------- Header ---------- */ .site-head{ position:sticky;top:0;z-index:200;padding:20px 0; background:rgba(255,255,255,.75);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid transparent; transition:padding .3s var(--ease),box-shadow .3s,border-color .3s,background .3s; } .site-head.scrolled{ padding:13px 0;background:rgba(255,255,255,.92); border-bottom-color:var(--line);box-shadow:0 8px 30px rgba(20,18,10,.06); } .head-in{display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;flex-direction:column;line-height:1.1} .brand .n{font-family:var(--disp);font-size:1.22rem;font-weight:800;color:var(--text)} .brand .r{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep)} .mainnav ul{display:flex;align-items:center;gap:30px} .mainnav a{font-size:.94rem;color:var(--muted);transition:color .2s;position:relative} .mainnav a:hover,.mainnav a.is-here{color:var(--text)} .mainnav a.is-here::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold)} .mainnav a.btn{color:#1D1706} .burger{display:none;flex-direction:column;gap:5px;width:26px;padding:6px 0;position:relative;z-index:260} .burger span{height:2px;background:var(--text);border-radius:2px;transition:transform .25s var(--ease),opacity .25s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mob-nav{ position:fixed;inset:0;z-index:250;background:rgba(255,255,255,.94);backdrop-filter:blur(20px); display:flex;flex-direction:column;justify-content:center; transform:translateY(-8px);opacity:0;pointer-events:none;transition:.28s var(--ease); } .mob-nav.open{transform:none;opacity:1;pointer-events:auto} .mob-nav ul{display:flex;flex-direction:column;align-items:center;gap:28px} .mob-nav a{font-family:var(--disp);font-size:1.6rem;font-weight:700;color:var(--text)} .mob-nav a.btn{font-family:var(--sans);font-size:1rem;margin-top:10px} /* ---------- Dunkler Foto-Moment (nur Karriere-Bewerbung) ---------- */ .career-band.atmo{ /* 32% schnitt Fabians Kopf ab - das Motiv sitzt im oberen Bilddrittel */ background:linear-gradient(180deg,rgba(20,22,26,.74),rgba(20,22,26,.94)),url('/assets/img/karriere-erfolg.jpg') center 10%/cover; color:var(--cream);position:relative; } .atmo h1,.atmo h2,.atmo h3{color:var(--cream)} .atmo .kicker.light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:var(--gold-light)} .atmo .kicker.light::before{background:var(--gold-light)} .atmo .lede.on-dark{color:var(--on-dark-muted)} .atmo .cpoints li{color:var(--cream)} /* ---------- Hero (weiß, mit dezentem Gold-Glow) ---------- */ .hero{padding:84px 0 108px;overflow:hidden;position:relative;background:var(--paper)} .hero::before{ content:'';position:absolute;top:-18%;right:-9%;width:620px;height:620px;border-radius:50%; background:radial-gradient(closest-side,rgba(201,169,74,.26),rgba(201,169,74,0) 72%); z-index:0;pointer-events:none; } .hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1} .hero-copy .lede{margin-top:22px;font-size:1.16rem} .trust{display:flex;align-items:center;gap:12px;margin-top:32px;flex-wrap:wrap} .stars{color:var(--gold-deep);letter-spacing:2px} .portrait-wrap{position:relative;display:flex;justify-content:center} .portrait-wrap::before{ content:'';position:absolute;width:112%;height:112%;border-radius:50%; background:radial-gradient(closest-side,rgba(201,169,74,.32),transparent 72%); filter:blur(6px);z-index:0; } .portrait-wrap::after{ content:'';position:absolute;bottom:-4%;width:72%;height:9%;left:50%;transform:translateX(-50%); background:radial-gradient(closest-side,rgba(30,27,22,.22),transparent 72%); filter:blur(6px);z-index:0; } .portrait-wrap img{position:relative;z-index:1;max-width:420px;width:100%;filter:drop-shadow(0 24px 34px rgba(30,27,22,.18))} .hero-badge{ position:absolute;right:2%;bottom:6%;z-index:2; background:rgba(255,255,255,.8);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid rgba(255,255,255,.6); border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:12px; box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.7); } .hero-badge .num{font-family:var(--disp);font-weight:800;font-size:1.5rem;color:var(--gold-deep)} .hero-badge .lbl{font-size:.76rem;color:var(--muted);max-width:120px;line-height:1.3} /* ---------- Trust-Marquee (Gold-Band 1) ---------- */ .marquee-band{padding:30px 0;background:linear-gradient(180deg,var(--paper-2),#F8F2E4);overflow:hidden} .marquee{ position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .marquee-track{display:flex;gap:14px;width:max-content;animation:marquee-scroll 34s linear infinite} /* bewusst KEIN animation-play-state:paused bei :hover - der Lauf soll durchgehen */ .marquee-dup{display:contents} @keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none} .marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;padding:0 28px} .marquee-dup{display:none} } /* Im Lauftext keine Pillen, sondern reine Labels mit goldenem Trennpunkt. Der Punkt hängt am Element, damit er im Endlosband auch zwischen letztem und erstem Eintrag steht. */ .marquee .chip{ white-space:nowrap;flex-shrink:0; display:inline-flex;align-items:center;gap:9px; background:none;border:0;box-shadow:none;padding:0;border-radius:0; backdrop-filter:none;-webkit-backdrop-filter:none; font-size:.92rem;font-weight:600;color:var(--text); } .marquee .chip::after{ content:"";width:5px;height:5px;border-radius:50%; background:var(--gold);flex-shrink:0;margin-left:5px; } /* ---------- Fundament-Pyramide ---------- */ /* column-reverse: 01 (Fundament, am breitesten) steht unten, 04 (Spitze) oben. Die DOM-Reihenfolge bleibt 01 → 04, damit Vorlesereihenfolge und Inhalt stimmen. */ .foundation{display:flex;flex-direction:column-reverse;align-items:center;gap:14px;margin-top:12px} .foundation-tier{ width:100%;border:1px solid var(--line);border-radius:16px;background:var(--paper-2); padding:22px 28px;transition:border-color .25s var(--ease),background .25s,box-shadow .25s; } .foundation-tier:nth-of-type(1){max-width:100%} .foundation-tier:nth-of-type(2){max-width:82%} .foundation-tier:nth-of-type(3){max-width:64%} .foundation-tier:nth-of-type(4){max-width:46%;background:linear-gradient(135deg,rgba(201,169,74,.16),var(--paper-2))} .foundation-tier:hover,.foundation-tier[open]{border-color:rgba(201,169,74,.5);background:#fff;box-shadow:var(--shadow-sm)} .foundation-tier summary{display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer} .foundation-tier summary::-webkit-details-marker{display:none} .foundation-tier summary .num{font-family:var(--disp);font-weight:800;color:var(--gold-deep);font-size:1.15rem;flex-shrink:0;width:1.5em} .foundation-tier summary h3{font-size:1.05rem;margin:0;flex:1;text-align:left} .foundation-tier summary .pm{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);position:relative;flex-shrink:0} .foundation-tier summary .pm::before,.foundation-tier summary .pm::after{content:'';position:absolute;background:var(--gold-deep);top:50%;left:50%;transform:translate(-50%,-50%)} .foundation-tier summary .pm::before{width:9px;height:1.4px} .foundation-tier summary .pm::after{width:1.4px;height:9px;transition:transform .2s} .foundation-tier[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)} .foundation-tier p{margin-top:12px;color:var(--muted);font-size:.92rem;padding-left:calc(1.5em + 16px)} /* ---------- Leistungen-Kategorien ---------- */ .leist-category{margin-bottom:60px} .leist-category:last-child{margin-bottom:0} .leist-category-head{margin-bottom:26px} .leist-category-head h2{font-size:clamp(1.5rem,1.3rem + 1vw,2rem);margin-bottom:8px} .leist-category .bento-grid{grid-template-columns:repeat(2,1fr)} .leist-category .bento-card{grid-column:span 1} /* ---------- Content-Sections ---------- */ section{padding:104px 0} .sec-tight{padding:74px 0} .head-split{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .svc{background:var(--paper-2);border-radius:var(--radius);padding:34px 30px;transition:transform .3s var(--ease),box-shadow .3s} .svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)} .svc .ic{width:44px;height:44px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;margin-bottom:20px} .svc .ic svg{width:22px;height:22px;stroke:var(--gold-deep);fill:none;stroke-width:1.6} .svc h3{margin-bottom:10px} .svc p{color:var(--muted);font-size:.96rem} .split{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:center} .split.flip{grid-template-columns:1.14fr .86fr} .split.flip .media-col{order:2} .split img.framed{border-radius:var(--radius);box-shadow:var(--shadow-md)} .split.highlight{background:var(--paper-2);border-radius:calc(var(--radius) + 12px);padding:48px} .split.highlight img.framed{box-shadow:var(--shadow-sm)} /* Die Desktop-Navigation braucht rund 910px. Unterhalb davon Burger-Menue, sonst laeuft der Header auf Tablets (768px) horizontal ueber. */ @media(max-width:1000px){ .mainnav{display:none} .burger{display:flex} } @media(max-width:760px){.split.highlight{padding:24px}} /* ---------- Leistungen: Bento-Grid ---------- */ .bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px} .bento-card{ grid-column:span 1;background:var(--paper-2);border-radius:var(--radius);padding:32px; display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s; } .bento-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)} .bento-card.featured{grid-column:span 2;padding:40px} .bento-card.wide{grid-column:span 3} .bento-card.wide .ticks{flex-direction:row;flex-wrap:wrap;gap:10px 26px} .bento-card .ic{width:46px;height:46px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;margin-bottom:22px;flex-shrink:0} .bento-card .ic svg{width:23px;height:23px;stroke:var(--gold-deep);fill:none;stroke-width:1.6} .bento-card h3{font-size:1.24rem;margin-bottom:10px} .bento-card.featured h3{font-size:1.55rem} .bento-card p{color:var(--muted);font-size:.95rem;margin-bottom:16px} .bento-card .ticks{margin-top:auto;display:flex;flex-direction:column;gap:8px} .bento-card .ticks li{display:flex;gap:8px;font-size:.86rem;color:var(--muted)} .bento-card .ticks .c{color:var(--gold-deep);font-weight:700;flex-shrink:0} /* Ablauf */ .flow{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:20px} .fstep{position:relative;padding-top:8px} .fnum{ width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--gold-deep); font-family:var(--disp);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;z-index:1; } .fline{position:absolute;top:23px;left:46px;right:-20px;height:1px;background:var(--line)} .fstep h3{font-size:1.05rem;margin-bottom:8px} .fstep p{font-size:.9rem;color:var(--muted)} /* ---------- Philosophie / Zitat-Band (Gold-Band 2) ---------- */ .philo{background:var(--paper-2)} .philo-in{display:grid;grid-template-columns:1fr 1.12fr;gap:66px;align-items:center} .quote{ font-family:var(--disp);font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.28;position:relative;padding-left:32px;font-weight:600; letter-spacing:-.02em;color:var(--text); } .quote::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--gold)} .sign{margin-top:30px} .sign .w{font-weight:600;color:var(--text)} .sign .r{font-size:.86rem;color:var(--muted)} .plist{list-style:none;display:grid;gap:24px} .plist li{display:flex;gap:17px;align-items:flex-start} .plist .c{ flex-shrink:0;width:32px;height:32px;border-radius:50%; background:var(--paper-2);color:var(--gold-deep); display:flex;align-items:center;justify-content:center;font-size:.85rem;margin-top:2px; } /* auf beigem Sektionsgrund kehrt sich der Kreis um, sonst verschwindet er */ .philo .plist .c{background:var(--paper)} /* ---------- Kennzahlen-Band (Über mich) ---------- */ .stats{background:var(--paper-2)} .stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:60px 0} .stat{text-align:center;position:relative} /* Trennstrich links in den Spalten-Gap statt rechts hinaus - rechts ragt er sonst am letzten Element der Zeile über den Viewport. */ .stat:not(:first-child)::after{ content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%); width:1px;height:58px;background:var(--line); } .stat .n{font-family:var(--disp);font-size:2.7rem;font-weight:800;color:var(--gold-deep);line-height:1} .stat .t{font-size:.89rem;color:var(--muted);margin-top:9px} @media(max-width:760px){ .stats-in{grid-template-columns:1fr 1fr;gap:38px 20px} /* zweispaltig: nur die rechte Spalte bekommt den Strich, sonst steht er am Zeilenanfang */ .stat:nth-child(odd)::after{display:none} } .plist h3{font-family:var(--sans);font-size:1.06rem;font-weight:650;margin-bottom:4px;letter-spacing:0;color:var(--text)} .plist p{color:var(--muted);font-size:.96rem} @media(max-width:880px){.philo-in{grid-template-columns:1fr;gap:42px}} /* Bewertungen */ .rev-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:26px} .rev-col{display:flex;flex-direction:column;gap:26px} .rev-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .rev{background:var(--paper-2);border-radius:var(--radius);padding:32px} .rev.feat{display:flex;flex-direction:column;justify-content:center} .rev h3{margin:16px 0 10px} .rev .q{color:var(--muted);font-size:.98rem} .rev.feat .q{font-family:var(--disp);font-weight:600;font-size:1.2rem;color:var(--text);line-height:1.42} .rev .w{margin-top:18px;font-size:.86rem;color:var(--muted-2);font-weight:700} .note{margin-top:30px;font-size:.82rem;color:var(--muted-2);font-style:italic} /* Karriere-Band (nicht-atmo: weiß) */ .career-band{padding:118px 0;background:var(--paper)} .career-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .career-in img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;object-fit:cover} .cpoints li{display:flex;align-items:center;gap:12px;font-size:.98rem;color:var(--text);padding:9px 0} .cpoints .d{width:6px;height:6px;border-radius:50%;background:var(--gold-deep);flex-shrink:0} .career-band.light{background:var(--paper-2)} /* Auszeichnungs-Siegel (Top Employer) neben Fließtext */ .siegel{ display:flex;align-items:center;gap:20px;margin-top:32px;padding:20px 22px; background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); } .siegel picture{flex-shrink:0} .siegel img{ display:block;width:126px;height:auto;border-radius:4px; box-shadow:none;object-fit:contain; } .siegel p{font-size:.88rem;line-height:1.5;color:var(--muted);margin:0} @media (max-width:560px){ .siegel{flex-direction:column;align-items:flex-start;gap:14px} /* zwei Zahlen-Boxen nebeneinander werden unter 560px zu gedrängt */ .career-figures{grid-template-columns:1fr} } .career-photo{position:relative} .career-photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-md)} .career-photo-badge{ position:absolute;right:-18px;bottom:-18px;background:#fff;border-radius:var(--radius-sm); padding:18px 22px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:14px; } .career-photo-badge .n{font-family:var(--disp);font-weight:800;font-size:2.1rem;color:var(--gold-deep);line-height:1} .career-photo-badge .t{font-size:.78rem;color:var(--muted);line-height:1.3} .career-figures{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .career-figures>div{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px} .career-figures .n{font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--gold-deep)} .career-figures .t{font-size:.82rem;color:var(--muted);margin-top:4px} /* ---------- CTA-Band (Gold-Band 3, Abschluss) ---------- */ /* Weiß, damit sich das Abschluss-Band von der (meist beigen) Sektion darüber absetzt und nicht zu einer einzigen großen Fläche verschmilzt. Die Oberkante trennt auch dort, wo die Sektion davor selbst schon weiß ist (Startseite, FAQ, Bewertungen). */ .cta-band{text-align:center;background:var(--paper);border-top:1px solid var(--line)} .cta-band .lede{margin:18px auto 0} .cta-band .btn-row{justify-content:center} /* Persönliche Kontakt-Karte im Abschluss-Band */ .kontakt-karte{ max-width:660px;margin:40px auto 0;padding:32px 34px;text-align:left; /* beige auf weißem Band - sonst verschwindet die Karte im Hintergrund */ background:var(--paper-2);border:1px solid rgba(201,169,74,.22); border-radius:var(--radius);box-shadow:var(--shadow-sm); } .kontakt-kopf{display:flex;align-items:center;gap:18px} .kontakt-kopf picture{flex-shrink:0;line-height:0} /* gleicher Block als Vorspann über einer Sektionsüberschrift (Kontaktseite) */ .kontakt-kopf.vorspann{margin-bottom:28px} .kontakt-kopf img{ width:78px;height:78px;border-radius:50%;object-fit:cover;flex-shrink:0; box-shadow:0 0 0 3px var(--paper),0 0 0 4px rgba(201,169,74,.5); } .kontakt-kopf .n{font-family:var(--disp);font-weight:800;font-size:1.18rem;color:var(--text);line-height:1.2} .kontakt-kopf .r{ font-size:.74rem;letter-spacing:.08em;text-transform:uppercase; color:var(--gold-deep);margin-top:5px;font-weight:700; } .kontakt-wort{ margin-top:22px;padding-left:18px;border-left:2px solid var(--gold); color:var(--muted);font-size:.99rem;line-height:1.65; } .kontakt-karte .btn-row{justify-content:flex-start;margin-top:26px;gap:12px} @media(max-width:560px){ .kontakt-karte{padding:26px 22px;margin-top:32px} .kontakt-kopf{gap:14px} .kontakt-kopf img{width:64px;height:64px} .kontakt-karte .btn-row{flex-direction:column;align-items:stretch} .kontakt-karte .btn{width:100%} } /* ---------- Footer (weiß) ---------- */ .site-foot{padding:80px 0 30px;background:var(--paper);border-top:1px solid var(--line)} .foot-top{display:grid;grid-template-columns:1.3fr 2fr;gap:56px;padding-bottom:52px;border-bottom:1px solid var(--line)} .foot-brand .n{font-family:var(--disp);font-weight:800;font-size:1.4rem;color:var(--text)} .foot-brand p{margin-top:14px;color:var(--muted);font-size:.92rem;max-width:38ch} .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .foot-cols h4{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px;font-weight:700} .foot-cols li{margin-bottom:10px} .foot-cols a{font-size:.92rem;color:var(--muted);transition:color .2s} .foot-cols a:hover{color:var(--text)} .foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:.82rem;color:var(--muted-2);flex-wrap:wrap;gap:14px} .foot-links{display:flex;gap:22px;align-items:center} .foot-admin{display:inline-flex;align-items:center;gap:6px;opacity:.6} .foot-admin svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6} /* Social-Profile im Footer */ .foot-social{display:flex;gap:14px;margin-top:14px} .foot-social a{ display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:50%; background:var(--paper-2);color:var(--gold-deep); transition:background .2s,color .2s,transform .2s var(--ease); } .foot-social a:hover{background:var(--gold);color:#1D1706;transform:translateY(-2px)} .foot-social svg{width:17px;height:17px;fill:currentColor;stroke:none} /* Label nur fuer Screenreader */ .foot-social span{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .foot-admin:hover{opacity:1;color:var(--gold-deep)} /* ---------- Seiten-Hero (Unterseiten, weiß) ---------- */ .page-hero{background:var(--paper);padding:64px 0 74px;border-bottom:1px solid var(--line)} .page-hero .lede{margin-top:18px} .crumbs{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:22px} .crumbs a:hover{color:var(--gold-deep)} /* ---------- FAQ ---------- */ .faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px} details{border-top:1px solid var(--line);padding:22px 0} details:last-child{border-bottom:1px solid var(--line)} summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;list-style:none;gap:20px} summary::-webkit-details-marker{display:none} summary .pm{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);position:relative;flex-shrink:0} summary .pm::before,summary .pm::after{content:'';position:absolute;background:var(--gold-deep);top:50%;left:50%;transform:translate(-50%,-50%)} summary .pm::before{width:9px;height:1.4px} summary .pm::after{width:1.4px;height:9px;transition:transform .2s} details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)} .faq .a{padding-top:14px;color:var(--muted);font-size:.96rem;max-width:64ch} /* ---------- Kontakt ---------- */ .cinfo{display:flex;flex-direction:column;gap:22px} .cinfo li{display:flex;gap:16px;align-items:flex-start} .cinfo .ic{width:42px;height:42px;border-radius:12px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;flex-shrink:0} .cinfo .ic svg{width:19px;height:19px;stroke:var(--gold-deep);fill:none;stroke-width:1.6} .cinfo .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)} .cinfo .v{font-weight:700;margin-top:2px} .mb-40{margin-bottom:40px} .form-card{background:var(--paper-2);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:42px;box-shadow:var(--shadow-sm)} .form-card h2{color:var(--text);font-size:1.5rem} .form-card .sub{color:var(--muted);margin-top:8px;font-size:.92rem} .form-card form{margin-top:28px;display:flex;flex-direction:column;gap:18px} .fld{display:flex;flex-direction:column;gap:8px} .fld-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .fld label{font-size:.8rem;color:var(--muted)} .fld input,.fld select,.fld textarea{ background:#fff;border:1px solid var(--line);border-radius:10px; color:var(--text);padding:12px 14px;transition:border-color .2s; /* ohne width/min-width behalten Felder ihre intrinsische Breite (~20 Zeichen) und sprengen die Karte auf schmalen Displays */ width:100%;min-width:0; } .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold)} .fld.hide{display:none} .fld textarea{resize:vertical;min-height:100px} .form-note{font-size:.78rem;color:var(--muted-2);margin-top:2px} .form-ok{display:none;font-size:.88rem;padding:12px 14px;border-radius:10px;background:rgba(201,169,74,.13);border:1px solid rgba(201,169,74,.35);color:var(--gold-deep)} .form-ok.show{display:block} /* ---------- Legal ---------- */ .legal h2{font-size:1.2rem;margin:38px 0 12px} .legal h2:first-child{margin-top:0} .legal p,.legal li{color:var(--muted);font-size:.96rem} .legal ul{display:flex;flex-direction:column;gap:8px;padding-left:18px;list-style:disc} .hint{background:var(--paper-2);border-left:3px solid var(--gold-deep);padding:16px 20px;border-radius:0 12px 12px 0;font-size:.88rem;color:var(--muted);margin-bottom:36px} /* ---------- Reveal-Animation (angelehnt an syntracai Reveal.tsx) ---------- */ .rv{opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease-reveal),transform .55s var(--ease-reveal)} .rv.in{opacity:1;transform:none} html.anim-off .rv{opacity:1;transform:none;transition:none} @media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} } /* ---------- Responsive ---------- */ @media(max-width:1080px){ .hero-in,.philo-in,.split,.career-in,.rev-grid,.foot-top{grid-template-columns:1fr} .split.flip{grid-template-columns:1fr} .split.flip .media-col{order:0} .career-photo-badge{right:10px;bottom:-16px;padding:14px 18px} .rev-grid{gap:20px} .grid-3,.rev-3{grid-template-columns:repeat(2,1fr)} .bento-grid{grid-template-columns:repeat(2,1fr)} .bento-card.wide{grid-column:span 2} .flow{grid-template-columns:repeat(3,1fr)} .fline{display:none} .stats-in{grid-template-columns:repeat(2,1fr);gap:32px 20px} .foot-cols{grid-template-columns:repeat(3,1fr)} .faq-in{grid-template-columns:1fr;gap:30px} } @media(max-width:760px){ .hero{padding:56px 0 76px} section{padding:74px 0} .grid-3,.rev-3,.foot-cols{grid-template-columns:1fr} .bento-grid{grid-template-columns:1fr} .bento-card.featured,.bento-card.wide{grid-column:span 1} .leist-category .bento-grid{grid-template-columns:1fr} /* mobil sind alle Ebenen gleich breit - ohne Pyramidenform wieder normal von 01 nach unten lesen */ .foundation{flex-direction:column} .foundation-tier{max-width:100% !important} .flow{grid-template-columns:1fr 1fr} .fld-2{grid-template-columns:1fr} .hero-badge{position:static;margin-top:22px;width:fit-content} .head-split{align-items:flex-start} }