/* * home.css * -------- * Page-specific stylesheet for index.html (hero, timeline, offers, form, * footer, etc.). Shared color tokens and the box-model reset live in * assets/css/tokens.css, linked before this file in . */ html{scroll-behavior:smooth;} body{ background:var(--cream); color:var(--ink); font-family:'Work Sans', sans-serif; font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; } .eyebrow{ font-family:'Work Sans', sans-serif; text-transform:uppercase; letter-spacing:0.14em; font-size:0.72rem; font-weight:600; color:var(--sage-deep); } a{color:inherit;} .wrap{max-width:1080px; margin:0 auto; padding:0 28px;} /* --- Nav --- */ header{ position:sticky; top:0; z-index:50; background:rgba(243,237,226,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); } nav.wrap{ display:flex; align-items:center; justify-content:space-between; padding:18px 28px; } .logo{ font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap; } .logo svg{width:20px; height:20px; flex-shrink:0;} @media(min-width:480px){ .logo{font-size:1.25rem; gap:10px;} .logo svg{width:22px; height:22px;} } .navlinks{display:flex; gap:32px; font-size:0.92rem;} .navlinks a{text-decoration:none; position:relative; padding-bottom:3px;} .navlinks a:after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--clay); transition:width .25s ease; } .navlinks a:hover:after{width:100%;} .nav-cta{ font-size:0.86rem; padding:9px 18px; border-radius:100px; background:var(--ink); color:var(--paper); text-decoration:none; white-space:nowrap; display:none; } @media(min-width:720px){ .nav-cta{display:inline-block;} } .navlinks{display:none;} @media(min-width:720px){ .navlinks{display:flex;} } /* --- Burger menu (mobile) --- */ .burger-btn{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; } .burger-btn span{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease; } .burger-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger-btn.is-open span:nth-child(2){opacity:0;} .burger-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media(min-width:720px){ .burger-btn{display:none;} } .mobile-nav{ display:none; flex-direction:column; gap:2px; background:var(--paper); border-top:1px solid var(--line); padding:10px 28px 22px; } .mobile-nav.is-open{display:flex;} .mobile-nav a{ text-decoration:none; color:var(--ink); font-size:1rem; padding:13px 0; border-bottom:1px solid var(--line); } .mobile-nav a:last-of-type{border-bottom:none;} .mobile-nav .mobile-cta{ margin-top:14px; text-align:center; background:var(--ink); color:var(--paper); padding:13px; border-radius:100px; border:none; } @media(min-width:720px){ .mobile-nav{display:none !important;} } /* --- Hero --- */ .hero{ position:relative; padding:18px 0 64px; } .hero-frame{ position:relative; width:100%; min-height:78vh; border-radius:2px; overflow:hidden; } .hero-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; } .hero-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(28,40,37,0.40) 0%, rgba(28,40,37,0.02) 26%, rgba(28,40,37,0.05) 55%, rgba(22,34,31,0.64) 100%); } .hero-inset-border{ position:absolute; inset:22px; border:1px solid rgba(253,251,246,0.55); pointer-events:none; } .hero-content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; padding:52px 28px 44px; color:#fdfbf6; } .hero-brand{ font-size:0.78rem; letter-spacing:0.32em; text-transform:uppercase; font-weight:500; opacity:0.92; } .hero-title{ font-family:'Fraunces', serif; font-weight:340; text-transform:uppercase; letter-spacing:0.045em; line-height:1.22; font-size:clamp(2.1rem, 6vw, 3.6rem); max-width:14ch; text-shadow:0 2px 24px rgba(22,34,31,0.30); } .hero-sub{ margin-top:18px; font-size:0.95rem; letter-spacing:0.06em; max-width:38ch; color:#f2ede3; line-height:1.55; font-weight:300; } .hero-meta{ font-size:0.76rem; letter-spacing:0.22em; text-transform:uppercase; color:#e7dfd0; margin-top:22px; } .hero-cta-onphoto{ margin-top:26px; color:#fdfbf6; text-decoration:none; font-size:0.82rem; letter-spacing:0.24em; text-transform:uppercase; padding-bottom:8px; border-bottom:1px solid rgba(253,251,246,0.7); transition:opacity .2s ease; } .hero-cta-onphoto:hover{opacity:0.72;} @media(max-width:640px){ .hero-frame{min-height:88vh;} .hero-inset-border{inset:14px;} .hero-content{padding:38px 18px 34px;} } .hero-below{ max-width:640px; margin:44px auto 0; text-align:center; } .hero-below p.lede{ font-size:1.04rem; color:#55645c; line-height:1.7; } .hero-actions{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; justify-content:center;} .btn-primary{ background:var(--clay); color:var(--paper); text-decoration:none; padding:14px 26px; border-radius:100px; font-size:0.95rem; font-weight:500; display:inline-block; transition:transform .2s ease, background .2s ease; } .btn-primary:hover{background:#3d5c72; transform:translateY(-1px);} .btn-ghost{ border:1px solid var(--line); color:var(--ink); text-decoration:none; padding:14px 26px; border-radius:100px; font-size:0.95rem; display:inline-block; } /* signature: constellation motif, used small in section dividers */ .constellation-mini{opacity:0.5;} /* --- Section shell --- */ section{padding:88px 0;} section.alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .section-head{max-width:640px; margin-bottom:52px;} .section-head h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-top:14px;} .section-head p{margin-top:14px; color:#55645c; font-size:1.02rem;} /* --- About --- */ .about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;} @media(max-width:840px){.about-grid{grid-template-columns:1fr;}} .portrait-frame{ aspect-ratio:4/5; border-radius:6px; overflow:hidden; position:relative; background:var(--sage); } .portrait-frame img{width:100%; height:100%; object-fit:cover; display:block; object-position:50% 22%;} .timeline{margin-top:8px;} .t-item{ display:grid; grid-template-columns:110px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--line); } .t-item:first-child{border-top:none; padding-top:0;} .t-year{font-family:'Fraunces',serif; font-style:italic; color:var(--brown); font-size:0.95rem;} .t-item h4{font-weight:600; font-size:1rem; margin-bottom:4px;} .t-item p{color:#55645c; font-size:0.94rem;} .t-item p a{color:var(--sage-deep); text-decoration:underline; text-underline-offset:2px;} /* --- Angebot cards --- */ .offer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} @media(max-width:900px){.offer-grid{grid-template-columns:1fr;}} .offer-card{ background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:32px 28px; display:flex; flex-direction:column; gap:14px; } section.alt .offer-card{background:var(--paper);} .offer-card .dur{ font-family:'Fraunces',serif; font-style:italic; color:var(--sage-deep); font-size:0.95rem; } .offer-card h3{font-size:1.25rem;} .offer-card p{color:#55645c; font-size:0.94rem;} .offer-card ul{list-style:none; margin-top:6px; display:flex; flex-direction:column; gap:8px;} .offer-card li{font-size:0.9rem; padding-left:18px; position:relative; color:#55645c;} .offer-card li:before{ content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--clay); } .offer-card .price{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:0.9rem; color:var(--brown);} /* --- Testimonials --- */ .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} @media(max-width:900px){.testi-grid{grid-template-columns:1fr;}} .testi-card{ background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:30px 26px; display:flex; flex-direction:column; gap:18px; min-height:220px; } .testi-mark{ font-family:'Fraunces',serif; font-style:italic; font-size:2.4rem; line-height:1; color:var(--sage); opacity:0.6; } .testi-quote{ font-size:0.96rem; color:#55645c; flex-grow:1; font-style:italic; } .testi-quote.placeholder{color:#97a49c;} .testi-who{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line); } .testi-avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(160deg, var(--sage) 0%, var(--blue) 100%); flex-shrink:0; } .testi-avatar.placeholder{background:var(--line);} .testi-name{font-size:0.86rem; font-weight:500; color:var(--brown);} .testi-name .role{display:block; font-weight:400; font-size:0.78rem; color:#7e8f88;} /* --- Ablauf steps --- */ .steps{display:flex; flex-direction:column; gap:0;} .step{ display:grid; grid-template-columns:56px 1fr; gap:22px; padding:26px 0; border-top:1px solid var(--line); } .step:first-child{border-top:none;} .step-dot{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--sage-deep); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-style:italic; color:var(--sage-deep); font-size:0.95rem; } .step h4{font-size:1.05rem; margin-bottom:6px;} .step p{color:#55645c; font-size:0.94rem; max-width:60ch;} .ablauf-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:stretch; margin-bottom:20px;} @media(max-width:840px){ .ablauf-grid{grid-template-columns:1fr;} } .ablauf-photo{border-radius:10px; overflow:hidden; min-height:260px;} .ablauf-photo img{width:100%; height:100%; object-fit:cover; display:block; object-position:50% 30%;} /* --- Coaching-vs-Therapy toggle --- */ .info-toggle-btn{ display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--sage-deep); color:var(--sage-deep); border-radius:100px; padding:10px 20px; font-size:0.88rem; font-family:inherit; cursor:pointer; margin-top:22px; transition:background .2s ease, color .2s ease; } .info-toggle-btn:hover{background:var(--sage-deep); color:var(--paper);} .info-toggle-btn .chevron{transition:transform .2s ease; font-size:0.8rem;} .info-toggle-btn.is-open .chevron{transform:rotate(180deg);} .info-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; } .info-panel.is-open{max-height:900px;} .info-panel-inner{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:26px 28px; margin-top:18px; } .info-panel-inner h4{font-size:1rem; margin-bottom:8px; color:var(--ink);} .info-panel-inner p{font-size:0.94rem; color:#55645c; margin-bottom:14px;} .info-panel-inner p:last-child{margin-bottom:0;} /* --- Booking request form --- */ .booking-note{ background:rgba(138,154,126,0.14); border:1px solid rgba(138,154,126,0.4); border-radius:10px; padding:18px 22px; font-size:0.92rem; color:#3d4a41; margin-bottom:36px; display:flex; gap:12px; align-items:flex-start; } .booking-note svg{flex-shrink:0; margin-top:2px;} form.request-form{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:36px; display:grid; gap:22px; } .form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;} @media(max-width:600px){.form-row{grid-template-columns:1fr;}} label{display:block; font-size:0.85rem; font-weight:500; margin-bottom:7px; color:var(--brown);} input, select, textarea{ width:100%; padding:12px 14px; border-radius:7px; border:1px solid var(--line); background:var(--cream); font-family:inherit; font-size:0.95rem; color:var(--ink); } input:focus, select:focus, textarea:focus{outline:2px solid var(--sage); outline-offset:1px;} textarea{resize:vertical; min-height:100px;} fieldset{border:none; padding:0;} .chip-group{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;} .chip{ border:1px solid var(--line); border-radius:100px; padding:9px 16px; font-size:0.88rem; cursor:pointer; user-select:none; background:var(--cream); transition:all .15s ease; } .chip input{display:none;} .chip:has(input:checked){background:var(--sage-deep); color:var(--paper); border-color:var(--sage-deep);} .submit-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap;} button.submit{ background:var(--ink); color:var(--paper); border:none; padding:14px 28px; border-radius:100px; font-size:0.95rem; font-family:inherit; cursor:pointer; transition:background .2s ease; } button.submit:hover{background:#26332e;} .form-hint{font-size:0.82rem; color:#7e8f88;} .confirm-msg{ display:none; background:rgba(138,154,126,0.18); border:1px solid var(--sage); padding:18px 22px; border-radius:10px; font-size:0.94rem; margin-top:20px; } /* --- Footer --- */ footer{padding:56px 0 40px; border-top:1px solid var(--line);} .footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:center;} .footer-grid .logo{margin-bottom:4px;} .foot-links{display:flex; gap:26px; font-size:0.88rem; flex-wrap:wrap;} .foot-links a{text-decoration:none; color:#55645c;} .fine{font-size:0.8rem; color:#97a49c; margin-top:28px;}