/* ───────────────────────────────────────────────────────────────────────── CEMILE CAMCI — design tokens (set by JS via inline CSS vars on :root) Defaults below are the "Ruhe" palette (cream / sage / deep teal) + Newsreader/Geist pairing. ───────────────────────────────────────────────────────────────────────── */ :root{ --bg: #f8f7f1; --bg-soft: #eaf2f1; --bg-card: #ffffff; --ink: #1e3d46; --ink-soft: #3d585f; --ink-mute: #8b9a9c; --rule: #d7dbd7; --accent: #5f6e5e; --accent-2: #a6b8bf; --accent-ink: #f8f7f1; --serif: "Newsreader", "Cormorant Garamond", Georgia, serif; --sans: "Geist", "Manrope", ui-sans-serif, system-ui, sans-serif; --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-size-sm: 14px; --font-size-base: 17px; --font-size-lg: 22px; --font-size-xl: 2.25rem; --font-size-xxl: 3.75rem; --text-shadow-soft: 0 1px 2px color-mix(in srgb, var(--ink) 25%, transparent); --text-shadow-lift: 0 2px 6px color-mix(in srgb, var(--ink) 35%, transparent); --text-shadow-outline: 0 0 6px color-mix(in srgb, var(--bg) 90%, transparent); --img-border-thin: 1px solid var(--rule); --img-border-thick: 4px solid var(--ink); --img-border-accent: 3px solid var(--accent); --maxw: 1240px; --gutter: clamp(20px, 4vw, 64px); --section-y: clamp(80px, 9vw, 140px); --radius: 0; --radius-lg: 0; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)} body{ font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* Hidden until tiny.min.js finishes registering custom elements (it adds .tiny-loaded to once done) — avoids a flash of unstyled/inert web components on first paint. */ opacity: 0; transition: opacity .25s ease-in-out; } .tiny-loaded body{ opacity: 1; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} /* ── Layout helpers ───────────────────────────────────────── */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .wrap-narrow{max-width:880px;margin:0 auto;padding:0 var(--gutter)} .section{padding:var(--section-y) 0;position:relative} .section + .section{padding-top: 0} .divider{height:1px;background:var(--rule);margin:0 var(--gutter)} .eyebrow{ font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before{content:"";width:18px;height:1px;background:var(--ink-mute)} /* ── Typography ───────────────────────────────────────── */ .display{ font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 7.2vw, 104px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; margin: 0; color: var(--ink); } .display em{font-style:italic;color:var(--accent);font-weight:300} .h2{ font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; margin: 0 0 .4em; } .h2 em{font-style:italic;color:var(--accent)} .h3{ font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.005em; margin: 0 0 .35em; } .lead{ font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; max-width: 62ch; } .lead-serif{ font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; color: var(--ink-soft); text-wrap: balance; } p{margin:0 0 1em;color:var(--ink-soft);text-wrap:pretty} p.tight{margin-bottom:.5em} strong{color:var(--ink);font-weight:600} /* ── Buttons ───────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:10px; padding: 14px 22px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .01em; border-radius: 0; transition: all .2s ease; border: 1px solid var(--ink); color: var(--ink); background: transparent; } .btn:hover{background:var(--ink);color:var(--bg)} .btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)} .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn .arr{transition: transform .2s ease} .btn:hover .arr{transform: translateX(3px)} /* ── Nav ───────────────────────────────────────── */ .nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); transition: background .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; } .nav.scrolled{ background: color-mix(in oklab, var(--bg), transparent 8%); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--rule); } .nav-brand{ font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: -.005em; display: flex; align-items: center; gap: 10px; white-space: nowrap; } .nav-brand .mark{ width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ink); display:inline-flex; align-items:center; justify-content:center; font-family: var(--serif); font-style: italic; font-size: 13px; } .nav-links{display:flex;gap:24px;align-items:center} .nav-links a{ font-size: 13px; color: var(--ink-soft); position: relative; padding: 6px 0; white-space: nowrap; } .nav-links a:hover{color:var(--ink)} .nav-links a.active{color:var(--ink)} .nav-right{display:flex;gap:18px;align-items:center} .lang-switch{ display:flex;align-items:center;gap:2px;font-size:12px; font-family: var(--mono); letter-spacing: .08em; } .lang-switch button{padding:6px 8px;color:var(--ink-mute);border-radius:0} .lang-switch button.on{color:var(--ink)} .lang-switch .sep{color:var(--ink-mute);opacity:.5} .nav-cta{ font-size: 12.5px; font-weight: 500; padding: 9px 16px; border-radius: 0; border: 1px solid var(--ink); color: var(--ink); transition: all .2s ease; } .nav-cta:hover{background:var(--ink);color:var(--bg)} @media (max-width: 1100px){ .nav-links{display:none} } @media (max-width: 880px){ .nav-right .nav-cta{display:none} } /* ── Hero ───────────────────────────────────────── */ .hero{ min-height: 100vh; padding-top: 110px; padding-bottom: 80px; position: relative; display: flex; align-items: center; } .hero-inner{ width: 100%; position: relative; } .hero .eyebrow{margin-bottom: 28px} .hero-meta{ display: flex; gap: 36px; flex-wrap: wrap; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-soft); } .hero-meta b{display:block;color:var(--ink-mute);font-family:var(--mono);font-weight:500; font-size: 10.5px; letter-spacing:.16em; text-transform: uppercase; margin-bottom: 4px} /* Hero variant A — Portrait split */ .hero-a{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center } .hero-a .portrait{ aspect-ratio: 4/5; border-radius: var(--radius-lg); background: linear-gradient(160deg, #c8d3dd, #8a98a8); position: relative; overflow: hidden; } .hero-a .portrait::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.25), transparent 60%); } @media (max-width: 880px){ .hero-a{ grid-template-columns: 1fr; gap: 40px } } /* ── Section heads ───────────────────────────────────── */ .section-head{ display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: end; margin-bottom: 64px; } @media (max-width: 880px){ .section-head{ grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px } } .section-head .lead{ max-width: 56ch } .section-num{ font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .section-num .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)} /* ── Services grid ───────────────────────────────────── */ .services{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .svc{ background: var(--bg); padding: 44px 40px 40px; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; position: relative; transition: background .2s ease; } .svc:hover{ background: var(--bg-card) } .svc-icon{ width: 56px; height: 56px; color: var(--accent) } .svc-icon svg{ width:100%; height:100%; stroke: currentColor } .svc-num{ position: absolute; top: 24px; right: 28px; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: .12em; } .svc h3{ font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; margin: 0 0 8px; letter-spacing: -.005em; } .svc h3 em{ font-style: italic; color: var(--accent) } .svc p{ font-size: 15px; line-height: 1.55; margin: 0; color: var(--ink-soft) } .svc .svc-tag{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); display:flex; align-items:center; gap: 10px; } .svc .svc-tag .arr{ font-size: 14px; transition: transform .2s ease } .svc:hover .svc-tag .arr{ transform: translateX(4px); color: var(--accent) } @media (max-width: 760px){ .services{ grid-template-columns: 1fr } } /* ── Pull-quote ─────────────────────────────────── */ .pull{ padding: clamp(80px, 10vw, 140px) 0; text-align: center; position: relative; } .pull blockquote{ font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.15; letter-spacing: -.01em; max-width: 22ch; margin: 0 auto; text-wrap: balance; } .pull cite{ display: block; margin-top: 32px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); font-style: normal; } /* ── About ─────────────────────────────────────── */ .about{ display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 88px); align-items: center; } .about .portrait{ aspect-ratio: 3/4; border-radius: var(--radius-lg); background: linear-gradient(160deg, #b6c2cd, #7b8a9a); position: relative; overflow: hidden; } .about .portrait::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 80% at 35% 20%, rgba(255,255,255,.22), transparent 60%); } .about .ph-label{ position: absolute; bottom: 18px; left: 20px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); } .about-body p{ font-size: 16px; line-height: 1.65; max-width: 56ch } .about-cv{ margin-top: 36px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 28px; font-size: 13.5px; line-height: 1.5; } .about-cv .yr{ font-family: var(--mono); color: var(--ink-mute); font-size: 11px; letter-spacing: .08em; padding-top: 4px } .about-cv .it{ color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding: 4px 0 10px } @media (max-width: 880px){ .about{ grid-template-columns: 1fr; gap: 40px } } /* ── Credentials strip ─────────────────────────── */ .creds{ background: var(--bg-soft); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .creds-inner{ display: grid; grid-template-columns: auto 1fr; gap: 60px; align-items: center; padding: 40px 0; } .creds .label{ font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); max-width: 18ch; } .creds-list{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .cred{ display: flex; flex-direction: column; gap: 4px; padding-left: 18px; border-left: 1px solid var(--rule); } .cred .abbr{ font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink); font-weight: 400; letter-spacing: -.005em; } .cred .name{ font-size: 12.5px; color: var(--ink-soft); line-height: 1.4 } @media (max-width: 760px){ .creds-inner{ grid-template-columns: 1fr; gap: 24px } .creds-list{ grid-template-columns: 1fr; gap: 16px } } /* ── Statement ────────────────────────────────── */ .statement{ background: var(--ink); color: var(--bg); padding: clamp(100px, 12vw, 180px) 0; position: relative; overflow: hidden; } .statement .eyebrow{ color: rgba(255,255,255,.6) } .statement .eyebrow::before{ background: rgba(255,255,255,.6) } .statement .h2{ color: var(--bg); max-width: 18ch } .statement .h2 em{ color: var(--accent-2) } .statement p{ color: rgba(255,255,255,.7); max-width: 56ch } .statement .pillars{ margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .statement .pillar{ border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px } .statement .pillar .num{ font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .14em; } .statement .pillar h4{ font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 8px 0 8px; color: var(--bg) } .statement .pillar p{ font-size: 14px; line-height: 1.55; margin: 0 } @media (max-width: 760px){ .statement .pillars{ grid-template-columns: 1fr; gap: 24px } } /* ── Dates ─────────────────────────────────────── */ .dates{ display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; } .dates-list{ display:flex; flex-direction:column; gap: 0; border-top: 1px solid var(--rule) } .date-row{ display: grid; grid-template-columns: 90px 1fr auto; gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); transition: padding .2s ease; } .date-row:hover{ padding-left: 10px } .date-row .day{ font-family: var(--serif); font-size: 42px; line-height: 1; font-weight: 300 } .date-row .month{ font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-mute); text-transform: uppercase; margin-top: 4px } .date-row .meta{ font-size: 13.5px; color: var(--ink-soft) } .date-row .meta b{ display:block; color: var(--ink); font-family: var(--serif); font-size: 18px; font-weight: 400; margin-bottom: 4px } .date-row .cta{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } @media (max-width: 760px){ .dates{ grid-template-columns: 1fr; gap: 36px } .date-row{ grid-template-columns: 80px 1fr; gap: 16px } .date-row .cta{ grid-column: 2 } } /* ── Honorar ───────────────────────────────────── */ .prices{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .price{ background: var(--bg); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px } .price .ptag{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute) } .price h4{ font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; margin: 0 } .price .amount{ font-family: var(--serif); font-size: 44px; font-weight: 300; line-height: 1; letter-spacing: -.01em; margin-top: auto; } .price .amount span{ font-size: 18px; color: var(--ink-mute); margin-left: 4px } .price .desc{ font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 0 } .price ul{ margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-soft); } .price ul li{ padding: 4px 0; border-bottom: 1px solid var(--rule); display:flex; justify-content: space-between; gap: 10px } .price ul li:last-child{ border-bottom: 0 } .price ul li .v{ color: var(--ink); font-variant-numeric: tabular-nums } .prices-note{ margin-top: 20px; font-size: 12.5px; color: var(--ink-mute); max-width: 64ch; font-family: var(--sans); line-height: 1.55; } @media (max-width: 760px){ .prices{ grid-template-columns: 1fr } } /* ── Testimonials ────────────────────────────── */ .testis{ columns: 2; column-gap: 40px; } .testis figure{ break-inside: avoid; margin: 0 0 40px; padding: 28px 0 0; border-top: 1px solid var(--rule); } .testis blockquote{ font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 19px; line-height: 1.4; color: var(--ink); margin: 0 0 18px; text-wrap: pretty; } .testis figcaption{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); } @media (max-width: 760px){ .testis{ columns: 1 } } /* ── Erste Hilfe ────────────────────────────── */ .hilfe{ background: var(--bg-soft); border-top: 1px solid var(--rule); } .hilfe-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .hilfe-card{ background: var(--bg-soft); padding: 24px 22px; display: flex; flex-direction: column; gap: 6px; min-height: 140px; } .hilfe-card .h4{ font-family: var(--serif); font-size: 17px; font-weight: 400; line-height: 1.25; margin: 0 0 4px } .hilfe-card .tel{ font-family: var(--mono); font-size: 14px; color: var(--ink); letter-spacing: .02em } .hilfe-card .note{ font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin: 0 } @media (max-width: 880px){ .hilfe-grid{ grid-template-columns: repeat(2, 1fr) } } @media (max-width: 540px){ .hilfe-grid{ grid-template-columns: 1fr } } /* ── Contact ────────────────────────────────── */ .contact{ display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact-form{ display: flex; flex-direction: column; gap: 18px } .field{ display:flex; flex-direction: column; gap: 6px } .field label{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute) } .field input, .field textarea, .field select{ font: inherit; font-size: 15px; background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 10px 0; color: var(--ink); outline: none; border-radius: 0; } .field textarea{ resize: vertical; min-height: 110px } .field input:focus, .field textarea:focus, .field select:focus{ border-bottom-color: var(--ink) } .contact-info{ font-size: 15.5px; line-height: 1.7 } .contact-info .row{ padding: 16px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: baseline } .contact-info .row .k{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute) } @media (max-width: 880px){ .contact{ grid-template-columns: 1fr; gap: 40px } } /* ── Footer ────────────────────────────────── */ .foot{ border-top: 1px solid var(--rule); padding: 60px 0 40px; font-size: 13px; color: var(--ink-soft); } .foot-top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px } .foot h5{ font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; font-weight: 500 } .foot ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px } .foot a:hover{ color: var(--ink) } .foot-bot{ display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--rule); padding-top: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); } .foot-bot .legal{ display:flex; gap: 24px } @media (max-width: 760px){ .foot-top{ grid-template-columns: 1fr 1fr; gap: 32px } .foot-bot{ flex-direction: column; gap: 16px; align-items: flex-start } } /* ── Background motifs ────────────────────────────── */ .motif{ position: absolute; pointer-events: none; opacity: .55; color: var(--accent); } .motif svg{ width: 100%; height: 100%; stroke: currentColor; fill: none } .motif-1{ top: 80px; right: -120px; width: 520px; height: 520px; opacity: .35 } .motif-2{ top: 200px; left: -180px; width: 480px; height: 480px; opacity: .25; color: var(--accent-2); } .motif-3{ bottom: -80px; right: 5%; width: 360px; height: 360px; opacity: .22 } /* Section anchor target offset for fixed nav */ section[id]{ scroll-margin-top: 90px }