/* ===================================================================== Besler · Walter u. Keuneke — Kanzlei-Website Design-System (aus Entwurf extrahiert + Multi-Page erweitert) ===================================================================== */ :root{ /* default palette (cream) — overridden by data-theme on */ --paper: oklch(0.972 0.008 80); --paper-2: oklch(0.945 0.012 80); --paper-3: oklch(0.905 0.015 80); --ink: oklch(0.20 0.025 250); --ink-soft: oklch(0.34 0.022 250); --ink-mute: oklch(0.52 0.015 250); --accent: oklch(0.60 0.095 50); --accent-deep: oklch(0.48 0.085 45); } html[data-theme="classic"]{ --paper:oklch(0.995 0 0); --paper-2:oklch(0.975 0 0); --paper-3:oklch(0.905 0 0); --ink:oklch(0.20 0.005 250); --ink-soft:oklch(0.34 0.005 250); --ink-mute:oklch(0.55 0.005 250); --accent:oklch(0.45 0.01 250); --accent-deep:oklch(0.30 0.005 250); } html[data-theme="navy"]{ --paper:oklch(0.985 0.003 240); --paper-2:oklch(0.96 0.005 240); --paper-3:oklch(0.89 0.008 240); --ink:oklch(0.20 0.045 250); --ink-soft:oklch(0.34 0.04 250); --ink-mute:oklch(0.55 0.025 250); --accent:oklch(0.45 0.07 250); --accent-deep:oklch(0.30 0.05 250); } html[data-theme="bordeaux"]{ --paper:oklch(0.985 0.002 30); --paper-2:oklch(0.965 0.003 30); --paper-3:oklch(0.895 0.005 30); --ink:oklch(0.18 0.01 30); --ink-soft:oklch(0.34 0.008 30); --ink-mute:oklch(0.55 0.008 30); --accent:oklch(0.42 0.13 20); --accent-deep:oklch(0.33 0.12 20); } html[data-theme="forest"]{ --paper:oklch(0.985 0.004 140); --paper-2:oklch(0.965 0.006 140); --paper-3:oklch(0.895 0.008 140); --ink:oklch(0.22 0.04 155); --ink-soft:oklch(0.34 0.035 155); --ink-mute:oklch(0.55 0.018 155); --accent:oklch(0.40 0.07 155); --accent-deep:oklch(0.30 0.06 155); } :root{ --serif:"Source Serif 4","Iowan Old Style",Georgia,serif; --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace; --maxw:1280px; --pad:clamp(20px,4vw,56px); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit; text-decoration:none} img{display:block; max-width:100%} ::selection{background:var(--ink); color:var(--paper)} /* ============== HEADER ============== */ .top-strip{background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase} .top-strip .row{max-width:var(--maxw); margin:0 auto; padding:9px var(--pad); display:flex; justify-content:space-between; align-items:center; gap:24px} .top-strip .right{display:flex; gap:24px; opacity:.85} .top-strip a:hover{color:var(--accent)} @media (max-width:720px){ .top-strip .right{display:none} } header.site{position:sticky; top:0; z-index:50; background:color-mix(in oklch, var(--paper) 88%, transparent); backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--paper-3)} header .nav{max-width:var(--maxw); margin:0 auto; padding:18px var(--pad); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px} .brand{display:flex; flex-direction:column; line-height:1.05} .brand .mark{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:-.01em; font-variant-ligatures:common-ligatures} .brand .mark em{font-style:italic; color:var(--accent-deep); font-weight:400} .brand .sub{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:4px} nav.primary{display:flex; gap:26px; justify-content:center; flex-wrap:wrap; align-items:center} nav.primary a{font-size:14.5px; color:var(--ink-soft); padding:6px 0; position:relative} nav.primary a:hover, nav.primary a[aria-current="page"]{color:var(--ink)} nav.primary a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--accent)} /* dropdown */ .has-sub{position:relative} .has-sub>a::after{content:"›"; margin-left:6px; color:var(--ink-mute); font-size:13px; display:inline-block; transition:transform .2s} .has-sub:hover>a::after, .has-sub:focus-within>a::after{transform:rotate(90deg)} .submenu{position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(6px); background:var(--paper); border:1px solid var(--paper-3); min-width:240px; padding:8px; display:grid; gap:2px; opacity:0; visibility:hidden; transition:.18s; z-index:60; box-shadow:0 18px 40px -22px color-mix(in oklch,var(--ink) 60%,transparent)} .has-sub:hover .submenu, .has-sub:focus-within .submenu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)} .submenu a{font-size:14px; padding:9px 12px; color:var(--ink-soft); white-space:nowrap; display:flex; justify-content:space-between; gap:18px; align-items:baseline} .submenu a:hover{background:var(--paper-2); color:var(--ink)} .submenu a .n{font-family:var(--mono); font-size:10px; color:var(--ink-mute); letter-spacing:.1em} .header-cta{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:11px 18px; border:1px solid var(--ink); color:var(--ink); transition:.2s; white-space:nowrap} .header-cta:hover{background:var(--ink); color:var(--paper)} .header-cta .dot{width:6px; height:6px; background:var(--accent); border-radius:99px} .burger{display:none; background:none; border:0; padding:8px; cursor:pointer} .burger span{display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0} @media (max-width:1040px){ header .nav{gap:12px} nav.primary{display:none} .burger{display:block} .header-cta{padding:9px 12px; font-size:11px} } /* mobile drawer */ .drawer{position:fixed; inset:0; background:var(--paper); z-index:90; transform:translateX(100%); transition:transform .3s ease; padding:24px var(--pad); display:flex; flex-direction:column; overflow-y:auto} .drawer.open{transform:translateX(0)} .drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px} .drawer nav{display:flex; flex-direction:column; gap:2px} .drawer nav a{font-family:var(--serif); font-size:25px; padding:13px 0; border-bottom:1px solid var(--paper-3); display:flex; justify-content:space-between; align-items:baseline} .drawer nav a em{font-family:var(--mono); font-style:normal; font-size:11px; color:var(--ink-mute); letter-spacing:.1em; margin-left:10px} .drawer .sub-list{display:flex; flex-direction:column; gap:0; margin:0 0 8px; padding:0} .drawer .sub-list a{font-family:var(--sans); font-size:16px; padding:9px 0 9px 16px; border-bottom:1px dashed var(--paper-3)} .drawer .foot{margin-top:auto; padding-top:24px; font-family:var(--mono); font-size:12px; color:var(--ink-mute); display:flex; flex-direction:column; gap:6px} .drawer .foot a{color:var(--ink); font-size:20px; font-family:var(--serif)} /* ============== BUTTONS ============== */ .btn{display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:16px 22px; border:1px solid currentColor; transition:.2s; cursor:pointer} .btn.solid{background:var(--ink); color:var(--paper); border-color:var(--ink)} .btn.solid:hover{background:var(--accent-deep); border-color:var(--accent-deep)} .btn.ghost{color:var(--ink)} .btn.ghost:hover{background:var(--ink); color:var(--paper)} .btn .arrow{transition:transform .25s} .btn:hover .arrow{transform:translateX(4px)} .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); display:inline-flex; align-items:center; gap:10px} .eyebrow::before{content:""; width:22px; height:1px; background:var(--accent)} /* ============== HERO (Startseite) ============== */ .hero{max-width:var(--maxw); margin:0 auto; padding:clamp(40px,8vw,96px) var(--pad) clamp(48px,8vw,96px); display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,6vw,80px); align-items:end} @media (max-width:920px){ .hero{grid-template-columns:1fr; gap:40px} } h1.display{font-family:var(--serif); font-weight:400; font-size:clamp(44px,7vw,92px); line-height:1.02; letter-spacing:-.022em; margin:22px 0 28px; color:var(--ink); text-wrap:balance} h1.display em{font-style:italic; color:var(--accent-deep); font-weight:400} .hero-lede{font-size:19px; line-height:1.5; color:var(--ink-soft); max-width:54ch; text-wrap:pretty} .hero-cta{margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; align-items:center} .hero-plate{position:relative; aspect-ratio:4/5; width:100%; border:1px solid var(--paper-3); overflow:hidden; background:var(--paper-2)} .hero-plate img{width:100%; height:100%; object-fit:cover; object-position:center 30%} .hero-plate .crest{position:absolute; top:16px; left:16px; z-index:2; font-family:var(--serif); font-style:italic; font-size:14px; color:var(--paper); text-shadow:0 1px 8px rgba(0,0,0,.5)} .hero-plate .cap{position:absolute; bottom:0; left:0; right:0; padding:30px 18px 16px; background:linear-gradient(transparent, color-mix(in oklch,var(--ink) 75%,transparent)); color:var(--paper); font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase} .hero-meta{margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:18px; border-top:1px solid var(--paper-3); padding-top:18px} .hero-meta .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute)} .hero-meta .v{font-family:var(--serif); font-size:22px; margin-top:6px} /* marquee */ .strip{border-top:1px solid var(--paper-3); border-bottom:1px solid var(--paper-3); overflow:hidden; background:var(--paper)} .strip-inner{display:flex; gap:48px; padding:18px var(--pad); font-family:var(--mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; animation:slide 50s linear infinite} .strip-inner span{display:inline-flex; align-items:center; gap:48px} .strip-inner span::after{content:"·"; margin-left:48px; color:var(--accent)} @keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media (prefers-reduced-motion:reduce){ .strip-inner{animation:none} } /* ============== SECTION SHELLS ============== */ section{padding:clamp(64px,10vw,128px) 0} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)} .sec-head{display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(24px,6vw,80px); align-items:end; margin-bottom:clamp(40px,6vw,72px)} @media (max-width:820px){ .sec-head{grid-template-columns:1fr; gap:20px} } .sec-head .label{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute)} .sec-head .label span{color:var(--accent-deep); margin-right:10px} h2.sec-title{font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.8vw,60px); line-height:1.05; letter-spacing:-.018em; margin:14px 0 0; text-wrap:balance} h2.sec-title em{font-style:italic; color:var(--accent-deep); font-weight:400} .sec-head .desc{font-size:17px; color:var(--ink-soft); max-width:54ch; text-wrap:pretty} /* ============== RECHTSGEBIETE GRID ============== */ .areas{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--paper-3); border-left:1px solid var(--paper-3)} @media (max-width:820px){ .areas{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .areas{grid-template-columns:1fr} } .area{border-right:1px solid var(--paper-3); border-bottom:1px solid var(--paper-3); padding:32px 28px; min-height:240px; display:flex; flex-direction:column; justify-content:space-between; background:var(--paper-2); transition:background .25s,color .25s; cursor:pointer; position:relative; overflow:hidden} .area:hover{background:var(--ink); color:var(--paper)} .area:hover .area-num{color:var(--accent)} .area:hover .area-cta{opacity:1; transform:translateX(0)} .area-num{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-mute)} .area h3{font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.1; margin:18px 0 12px; letter-spacing:-.01em} .area p{font-size:14.5px; line-height:1.5; color:inherit; opacity:.78; margin:0} .area-cta{margin-top:24px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.5; transform:translateX(-4px); transition:.25s; display:inline-flex; align-items:center; gap:8px} /* ============== TEAM ============== */ .team{display:grid; grid-template-columns:repeat(4,1fr); gap:24px} @media (max-width:980px){ .team{grid-template-columns:repeat(2,1fr)} } @media (max-width:540px){ .team{grid-template-columns:1fr} } .person{display:flex; flex-direction:column} .person a.portrait, .portrait{aspect-ratio:4/5; width:100%; border:1px solid var(--paper-3); position:relative; overflow:hidden; background:var(--paper-2); display:block} .portrait img{width:100%; height:100%; object-fit:cover; object-position:center 22%; transition:transform .6s} .person:hover .portrait img{transform:scale(1.03)} .portrait .tag{position:absolute; bottom:12px; left:12px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); text-shadow:0 1px 6px rgba(0,0,0,.6)} .person h3{font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.15; margin:18px 0 4px; letter-spacing:-.01em} .person .role{font-size:13.5px; color:var(--ink-mute); font-family:var(--mono); letter-spacing:.02em; line-height:1.4} .person ul{margin:14px 0 0; padding:0; list-style:none; font-size:14px; color:var(--ink-soft); line-height:1.6} .person ul li{padding:6px 0; border-top:1px solid var(--paper-3)} .person ul li:first-child{border-top:0} .person .more{margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); display:inline-flex; gap:7px; align-items:center} .person .more .arrow{transition:transform .2s} .person:hover .more .arrow{transform:translateX(4px)} /* ============== TRADITION / TIMELINE ============== */ #tradition, .ink-section{background:var(--ink); color:var(--paper)} #tradition .sec-head .label, .ink-section .sec-head .label{color:color-mix(in oklch,var(--paper) 60%,transparent)} #tradition .sec-head .desc, .ink-section .sec-head .desc{color:color-mix(in oklch,var(--paper) 80%,transparent)} #tradition h2.sec-title em, .ink-section h2.sec-title em{color:var(--accent)} .timeline{display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid color-mix(in oklch,var(--paper) 20%,transparent)} @media (max-width:980px){ .timeline{grid-template-columns:repeat(2,1fr)} } @media (max-width:540px){ .timeline{grid-template-columns:1fr} } .epoch{padding:28px 20px 32px; border-right:1px solid color-mix(in oklch,var(--paper) 14%,transparent); display:flex; flex-direction:column; gap:14px; min-height:240px} .epoch:last-child{border-right:0} @media (max-width:980px){ .epoch{border-bottom:1px solid color-mix(in oklch,var(--paper) 14%,transparent)} } .epoch .year{font-family:var(--serif); font-size:32px; letter-spacing:-.01em; color:var(--accent)} .epoch h4{font-family:var(--serif); font-weight:400; font-size:18px; line-height:1.25; margin:0} .epoch p{margin:0; font-size:13.5px; line-height:1.55; color:color-mix(in oklch,var(--paper) 78%,transparent)} /* ============== TESTIMONIALS ============== */ .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--paper-3)} @media (max-width:820px){ .quotes{grid-template-columns:1fr} } .quote{padding:40px 36px; border-right:1px solid var(--paper-3); border-bottom:1px solid var(--paper-3); display:flex; flex-direction:column; gap:24px} .quote:last-child{border-right:0} @media (max-width:820px){ .quote{border-right:0} } .quote .mark{font-family:var(--serif); font-style:italic; font-size:48px; line-height:.8; color:var(--accent); height:24px} .quote blockquote{margin:0; font-family:var(--serif); font-size:21px; line-height:1.35; letter-spacing:-.005em; text-wrap:pretty} .quote cite{font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:auto} /* ============== SPLIT (FAQ + HONORARE) ============== */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px)} @media (max-width:920px){ .split{grid-template-columns:1fr; gap:64px} } .col h3.subtitle{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 24px} details.faq, details.fee{border-top:1px solid var(--paper-3); padding:0} details.faq:last-of-type, details.fee:last-of-type{border-bottom:1px solid var(--paper-3)} details summary{list-style:none; cursor:pointer; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; font-family:var(--serif); font-size:21px; line-height:1.25; letter-spacing:-.005em; transition:color .2s} details summary::-webkit-details-marker{display:none} details summary:hover{color:var(--accent-deep)} details summary .plus{flex:0 0 auto; width:28px; height:28px; position:relative; border:1px solid var(--ink); border-radius:99px} details summary .plus::before, details summary .plus::after{content:""; position:absolute; inset:0; margin:auto; background:var(--ink)} details summary .plus::before{width:10px; height:1.2px} details summary .plus::after{width:1.2px; height:10px; transition:transform .25s} details[open] summary .plus::after{transform:rotate(90deg)} details .body{padding:0 0 26px; font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:62ch; text-wrap:pretty} details .body p{margin:0 0 10px} details .body strong{color:var(--ink)} .price-row{display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--paper-3); font-family:var(--mono); font-size:13.5px} .price-row b{font-weight:500; color:var(--ink)} .price-row:last-child{border-bottom:1px solid var(--paper-3); margin-bottom:14px} /* ============== KONTAKT ============== */ #kontakt{background:var(--ink); color:var(--paper)} .kontakt-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(40px,6vw,80px); align-items:start} @media (max-width:920px){ .kontakt-grid{grid-template-columns:1fr; gap:48px} } #kontakt h2.sec-title em{color:var(--accent)} .phone-card{border:1px solid color-mix(in oklch,var(--paper) 25%,transparent); padding:32px} .phone-card .k{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in oklch,var(--paper) 70%,transparent)} .phone-card a.tel{display:block; font-family:var(--serif); font-size:clamp(40px,5vw,56px); line-height:1.05; margin:14px 0 24px; letter-spacing:-.01em; color:var(--paper)} .phone-card a.tel:hover{color:var(--accent)} .phone-card .meta{display:grid; grid-template-columns:1fr 1fr; gap:14px; border-top:1px solid color-mix(in oklch,var(--paper) 18%,transparent); padding-top:18px} .phone-card .meta dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in oklch,var(--paper) 60%,transparent)} .phone-card .meta dd{margin:6px 0 0; font-family:var(--serif); font-size:18px} .phone-card .meta dd a:hover{color:var(--accent)} form.contact{display:grid; gap:14px} form.contact .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px} @media(max-width:520px){ form.contact .row2{grid-template-columns:1fr} } form.contact label{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in oklch,var(--paper) 65%,transparent); display:block; margin-bottom:6px} form.contact input, form.contact textarea{width:100%; background:transparent; border:0; border-bottom:1px solid color-mix(in oklch,var(--paper) 25%,transparent); padding:10px 0; color:var(--paper); font-family:var(--serif); font-size:18px; transition:border .2s; outline:none} form.contact input:focus, form.contact textarea:focus{border-color:var(--accent)} form.contact textarea{min-height:90px; resize:vertical; font-family:var(--sans); font-size:15.5px} form.contact .consent{display:flex; gap:10px; align-items:flex-start; margin-top:6px} form.contact .consent input{width:auto; flex:0 0 auto; margin-top:3px} form.contact .consent label{text-transform:none; letter-spacing:0; font-family:var(--sans); font-size:12.5px; margin:0} form.contact button{margin-top:18px; align-self:start; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:16px 24px; background:var(--accent-deep); color:var(--paper); border:0; cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:12px} form.contact button:hover{background:var(--accent)} .form-note{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in oklch,var(--paper) 55%,transparent); margin:6px 0 0} .form-status{padding:16px 18px; margin:0 0 20px; font-size:15px; line-height:1.5; border-left:3px solid} .form-status.ok{background:color-mix(in oklch,var(--paper) 12%,transparent); border-color:var(--accent); color:var(--paper)} .form-status.err{background:color-mix(in oklch,oklch(0.55 0.18 25) 18%,transparent); border-color:oklch(0.6 0.2 25); color:var(--paper)} /* ============== FOOTER ============== */ footer.site{background:var(--ink); color:var(--paper); border-top:1px solid color-mix(in oklch,var(--paper) 14%,transparent)} .footer-top{max-width:var(--maxw); margin:0 auto; padding:clamp(48px,6vw,72px) var(--pad); display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px} @media (max-width:820px){ .footer-top{grid-template-columns:1fr 1fr; gap:32px} } @media (max-width:520px){ .footer-top{grid-template-columns:1fr} } .footer-top .fbrand .mark{font-family:var(--serif); font-size:24px; color:var(--paper)} .footer-top .fbrand .mark em{font-style:italic; color:var(--accent)} .footer-top .fbrand p{font-size:14px; line-height:1.6; color:color-mix(in oklch,var(--paper) 72%,transparent); max-width:36ch; margin:14px 0 0} .footer-top h5{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in oklch,var(--paper) 55%,transparent); margin:0 0 16px} .footer-top ul{list-style:none; margin:0; padding:0; display:grid; gap:9px} .footer-top ul a{font-size:14.5px; color:color-mix(in oklch,var(--paper) 85%,transparent)} .footer-top ul a:hover{color:var(--accent)} .footer-top address{font-style:normal; font-size:14.5px; line-height:1.7; color:color-mix(in oklch,var(--paper) 85%,transparent)} .footer-top address a:hover{color:var(--accent)} footer .row{max-width:var(--maxw); margin:0 auto; padding:24px var(--pad); border-top:1px solid color-mix(in oklch,var(--paper) 14%,transparent); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in oklch,var(--paper) 55%,transparent)} footer .row .links a{margin-left:20px} footer .row .links a:first-child{margin-left:0} footer a:hover{color:var(--accent)} /* sticky mobile call */ .sticky-call{display:none; position:fixed; left:16px; right:16px; bottom:16px; z-index:40; background:var(--ink); color:var(--paper); padding:14px 20px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 8px 28px -8px color-mix(in oklch,var(--ink) 50%,transparent)} .sticky-call .num{font-family:var(--serif); font-size:18px; letter-spacing:-.005em; text-transform:none} @media(max-width:720px){ .sticky-call{display:flex} body{padding-bottom:64px} } /* skip link */ .skip{position:absolute; left:-9999px; top:0; padding:8px 12px; background:var(--ink); color:var(--paper)} .skip:focus{left:8px; top:8px; z-index:100} /* ============== THEME SWITCHER ============== */ .theme-switch{position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:80; background:var(--paper); border:1px solid var(--paper-3); padding:14px 12px; display:flex; flex-direction:column; gap:10px; box-shadow:0 12px 32px -16px color-mix(in oklch,var(--ink) 50%,transparent)} .theme-switch .title{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); text-align:center; margin-bottom:2px} .theme-switch button{width:36px; height:36px; border:1px solid var(--paper-3); cursor:pointer; padding:0; position:relative; transition:transform .15s,border-color .15s; display:flex; align-items:center; justify-content:center; background:none} .theme-switch button:hover{transform:scale(1.06)} .theme-switch button[aria-pressed="true"]{border-color:var(--ink); outline:2px solid var(--paper); outline-offset:-5px} .theme-switch button .swatch{position:absolute; inset:3px; display:grid; grid-template-columns:1fr 1fr} .theme-switch button .swatch .a{background:var(--p)} .theme-switch button .swatch .b{background:var(--i)} .theme-switch button .label{position:absolute; right:46px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:5px 9px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s} .theme-switch button:hover .label{opacity:1} @media (max-width:720px){ .theme-switch{top:auto; bottom:80px; transform:none; flex-direction:row; padding:8px} .theme-switch .title{display:none} .theme-switch button{width:30px; height:30px} .theme-switch button .label{display:none} } /* ===================================================================== MULTI-PAGE: Subpage-Komponenten ===================================================================== */ /* page hero (kompakt, mit Breadcrumb) */ .page-hero{border-bottom:1px solid var(--paper-3); background:var(--paper-2)} .page-hero .wrap{padding-top:clamp(36px,6vw,64px); padding-bottom:clamp(36px,6vw,64px)} .breadcrumb{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px} .breadcrumb a:hover{color:var(--ink)} .breadcrumb .sep{color:var(--paper-3); color:color-mix(in oklch,var(--ink) 30%,var(--paper))} .breadcrumb [aria-current]{color:var(--ink-soft)} .page-hero h1{font-family:var(--serif); font-weight:400; font-size:clamp(36px,5.5vw,68px); line-height:1.04; letter-spacing:-.02em; margin:0; max-width:18ch; text-wrap:balance} .page-hero h1 em{font-style:italic; color:var(--accent-deep)} .page-hero .lead{font-size:18px; line-height:1.5; color:var(--ink-soft); max-width:60ch; margin:20px 0 0; text-wrap:pretty} .page-hero .hero-flex{display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(28px,5vw,64px); align-items:center} @media(max-width:820px){ .page-hero .hero-flex{grid-template-columns:1fr} } .page-hero .hero-img{aspect-ratio:16/10; overflow:hidden; border:1px solid var(--paper-3)} .page-hero .hero-img img{width:100%; height:100%; object-fit:cover} /* generic content shell with sidebar */ .content-split{display:grid; grid-template-columns:1fr 340px; gap:clamp(40px,5vw,72px); align-items:start} @media(max-width:920px){ .content-split{grid-template-columns:1fr} } /* prose typography */ .prose{font-size:17px; line-height:1.7; color:var(--ink-soft); max-width:68ch} .prose>*:first-child{margin-top:0} .prose h2{font-family:var(--serif); font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.15; letter-spacing:-.015em; color:var(--ink); margin:48px 0 18px; text-wrap:balance} .prose h3{font-family:var(--serif); font-weight:400; font-size:23px; color:var(--ink); margin:36px 0 12px} .prose h4{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:32px 0 10px} .prose p{margin:0 0 18px} .prose strong{color:var(--ink); font-weight:600} .prose a{color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px} .prose a:hover{color:var(--accent)} .prose ul, .prose ol{margin:0 0 20px; padding-left:0; list-style:none} .prose ul li{position:relative; padding:8px 0 8px 28px; border-top:1px solid var(--paper-3)} .prose ul li::before{content:""; position:absolute; left:4px; top:18px; width:8px; height:8px; border:1px solid var(--accent); transform:rotate(45deg)} .prose ol{counter-reset:li} .prose ol li{position:relative; padding:8px 0 8px 36px; border-top:1px solid var(--paper-3); counter-increment:li} .prose ol li::before{content:counter(li,decimal-leading-zero); position:absolute; left:0; top:9px; font-family:var(--mono); font-size:12px; color:var(--accent-deep)} .prose blockquote{margin:32px 0; padding:4px 0 4px 26px; border-left:2px solid var(--accent); font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.4; color:var(--ink)} .prose blockquote cite{display:block; margin-top:12px; font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute)} .prose hr{border:0; border-top:1px solid var(--paper-3); margin:40px 0} /* literary pull-quote (Rechtsgebiet-Einstieg) */ .lit-quote{font-family:var(--serif); font-style:italic; font-size:clamp(22px,3vw,30px); line-height:1.35; color:var(--ink); margin:0 0 36px; padding:0 0 0 28px; border-left:2px solid var(--accent); max-width:30ch; text-wrap:pretty} .lit-quote .src{display:block; margin-top:14px; font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute)} /* sidebar card */ .aside-card{border:1px solid var(--paper-3); background:var(--paper-2); padding:28px; position:sticky; top:96px} .aside-card+.aside-card{margin-top:20px} .aside-card h4{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 16px} .aside-card .lawyer{display:flex; gap:14px; align-items:center; margin-bottom:18px} .aside-card .lawyer img{width:60px; height:72px; object-fit:cover; object-position:center 20%; border:1px solid var(--paper-3)} .aside-card .lawyer .nm{font-family:var(--serif); font-size:19px; line-height:1.15} .aside-card .lawyer .rl{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-mute); margin-top:3px; line-height:1.4} .aside-card .tel{display:block; font-family:var(--serif); font-size:30px; letter-spacing:-.01em; color:var(--ink); margin:6px 0 4px} .aside-card .tel:hover{color:var(--accent-deep)} .aside-card .hours{font-size:13.5px; color:var(--ink-mute); line-height:1.6} .aside-card .btn{width:100%; justify-content:center; margin-top:16px} /* related areas chips */ .related{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px} .related a{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; padding:9px 14px; border:1px solid var(--paper-3); color:var(--ink-soft); transition:.2s} .related a:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)} /* CTA band */ .cta-band{background:var(--ink); color:var(--paper)} .cta-band .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; padding-top:clamp(48px,6vw,72px); padding-bottom:clamp(48px,6vw,72px)} .cta-band .t{font-family:var(--serif); font-size:clamp(26px,3.4vw,40px); line-height:1.1; letter-spacing:-.015em; max-width:20ch} .cta-band .t em{font-style:italic; color:var(--accent)} .cta-band .ph{display:flex; flex-direction:column; gap:6px} .cta-band .ph .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in oklch,var(--paper) 60%,transparent)} .cta-band .ph a{font-family:var(--serif); font-size:clamp(32px,4vw,46px); color:var(--paper); letter-spacing:-.01em} .cta-band .ph a:hover{color:var(--accent)} /* ============== ANWALTS-PROFIL ============== */ .profile-top{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:start} @media(max-width:820px){ .profile-top{grid-template-columns:1fr; gap:32px} } .profile-photo{aspect-ratio:4/5; border:1px solid var(--paper-3); overflow:hidden; background:var(--paper-2)} .profile-photo img{width:100%; height:100%; object-fit:cover; object-position:center 20%} .profile-intro .role{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--accent-deep); text-transform:uppercase} .profile-intro h1{font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.6vw,56px); line-height:1.05; letter-spacing:-.02em; margin:12px 0 20px} .profile-facts{display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin:24px 0 0; border-top:1px solid var(--paper-3); padding-top:22px} .profile-facts .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute)} .profile-facts .v{font-family:var(--serif); font-size:17px; margin-top:5px; line-height:1.4} .cv{display:grid; gap:0; border-top:1px solid var(--paper-3)} .cv .item{display:grid; grid-template-columns:120px 1fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--paper-3)} @media(max-width:520px){ .cv .item{grid-template-columns:80px 1fr; gap:16px} } .cv .yr{font-family:var(--serif); font-size:22px; color:var(--accent-deep)} .cv .ev{font-size:15.5px; line-height:1.5; color:var(--ink-soft)} /* ============== NOTARIAT-Leistungen ============== */ .fields{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--paper-3); border-left:1px solid var(--paper-3)} @media(max-width:820px){ .fields{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .fields{grid-template-columns:1fr} } .field{border-right:1px solid var(--paper-3); border-bottom:1px solid var(--paper-3); padding:30px 26px} .field .n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-mute)} .field h3{font-family:var(--serif); font-weight:400; font-size:23px; margin:14px 0 12px} .field ul{list-style:none; margin:0; padding:0; font-size:14.5px; line-height:1.5; color:var(--ink-soft)} .field ul li{padding:7px 0; border-top:1px solid var(--paper-3)} .field ul li:first-child{border-top:0} /* generic intro band with image (Kanzlei) */ .feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center} @media(max-width:820px){ .feature{grid-template-columns:1fr; gap:32px} } .feature.flip .img{order:-1} @media(max-width:820px){ .feature.flip .img{order:0} } .feature .img{aspect-ratio:4/3; overflow:hidden; border:1px solid var(--paper-3)} .feature .img img{width:100%; height:100%; object-fit:cover} /* values grid */ .values{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper-3); border:1px solid var(--paper-3)} @media(max-width:720px){ .values{grid-template-columns:1fr} } .values .v{background:var(--paper); padding:30px 28px} .values .v .n{font-family:var(--mono); font-size:11px; color:var(--accent-deep); letter-spacing:.12em} .values .v h3{font-family:var(--serif); font-weight:400; font-size:21px; margin:12px 0 8px} .values .v p{font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0} /* map embed (mit Consent-Platzhalter) */ .map-embed{aspect-ratio:16/9; width:100%; border:1px solid var(--paper-3); overflow:hidden; background:var(--paper-2); position:relative} .map-embed iframe{width:100%; height:100%; border:0; filter:grayscale(.4)} .map-consent{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:32px; background:repeating-linear-gradient(135deg, var(--paper-2) 0 12px, var(--paper) 12px 24px)} .map-consent p{margin:0; max-width:46ch; font-size:14.5px; color:var(--ink-soft); line-height:1.55} .map-consent .mini{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute)} /* utility */ .center{text-align:center} .mt-0{margin-top:0} .lead-list{list-style:none; margin:0; padding:0; display:grid; gap:0} /* Bild-Galerie (Einblicke) */ .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} @media(max-width:820px){ .gallery{grid-template-columns:1fr 1fr} } @media(max-width:520px){ .gallery{grid-template-columns:1fr} } .gallery figure{margin:0; border:1px solid var(--paper-3); overflow:hidden; aspect-ratio:1/1; background:var(--paper-2)} .gallery img{width:100%; height:100%; object-fit:cover; transition:transform .6s} .gallery figure:hover img{transform:scale(1.05)}