/* Henry Privacy – henry.swiss – gemeinsames Stylesheet aller Seiten */
@font-face{font-family:"Newsreader"; src:url("/fonts/newsreader-var.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap}
@font-face{font-family:"Newsreader"; src:url("/fonts/newsreader-italic-var.woff2") format("woff2"); font-weight:200 800; font-style:italic; font-display:swap}
@font-face{font-family:"Public Sans"; src:url("/fonts/publicsans-var.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}

:root{
  --slate:#263033; --ink:#171D1F; --paper:#F7F7F5; --white:#FFFFFF; --mist:#ECEEEC; --line:#D6DAD8;
  --muted:#525E5C; --accent:#1E6E68; --accent-ink:#135550; --accent-soft:#8FD3CC;
  --panel:#2C373A; --on-dark:#E6EAE8; --on-dark-muted:#AEB8B5;
  color-scheme: light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1B2224; --white:#222B2E; --mist:#1F2729; --line:#3A4548; --ink:#EEF1F0; --muted:#B4BDBA;
    --slate:#121819; --panel:#16201F; --accent:#5FBDB4; --accent-ink:#7FD0C8; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1B2224; --white:#222B2E; --mist:#1F2729; --line:#3A4548; --ink:#EEF1F0; --muted:#B4BDBA;
  --slate:#121819; --panel:#16201F; --accent:#5FBDB4; --accent-ink:#7FD0C8; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(96px + env(safe-area-inset-top,0px)); scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:"Public Sans","Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:"Newsreader",Georgia,"Times New Roman",serif; font-weight:400; margin:0; letter-spacing:-0.01em}
h1{font-size:clamp(2.6rem,6vw,4.9rem); line-height:1.02; font-variation-settings:"opsz" 72}
h2{font-size:clamp(2rem,3.6vw,3rem); line-height:1.1; font-variation-settings:"opsz" 72}
h3{font-size:1.55rem; line-height:1.25; font-weight:500; font-variation-settings:"opsz" 36}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
@media (min-width:720px){ .wrap{padding:0 40px} }
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--paper); border-bottom:1px solid var(--line)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); background:var(--paper); z-index:30}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px}
.logo{display:inline-flex; align-items:center; color:var(--ink); text-decoration:none}
.logo svg{height:56px; width:auto}
.nav{display:flex; align-items:center; gap:8px 28px; flex-wrap:wrap; font-weight:500; font-size:15.5px}
.nav a{text-decoration:none; color:var(--muted); padding:8px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{text-decoration:underline; text-underline-offset:8px; text-decoration-color:var(--accent); text-decoration-thickness:2px}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 26px; border-radius:4px; background:var(--slate); color:#FFFFFF; text-decoration:none; font-weight:600; font-size:16px; border:1px solid transparent}
.btn:hover{background:var(--accent-ink); color:#FFFFFF}
.nav .btn{color:#FFFFFF}
.nav .btn:hover{color:#FFFFFF}
.btn.light{background:#FFFFFF; color:#263033}
.btn.light:hover{background:var(--accent-soft); color:#121819}
.textlink{font-weight:600; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; color:var(--ink)}
.textlink:hover{color:var(--accent-ink)}
.section .more{margin-top:36px}
@media (max-width:1000px){ .nav .hide-sm{display:none} }

.hero{padding:72px 0 88px}
@media (min-width:900px){ .hero{padding:104px 0 120px} }
.hero-grid{display:grid; gap:48px; align-items:center}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.15fr 0.85fr; gap:72px} }
.hero-copy{display:flex; flex-direction:column; gap:28px}
.lede{font-size:1.2rem; line-height:1.6; color:var(--muted); max-width:34rem}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px}
.hero-art{position:relative; width:100%; max-width:440px; justify-self:center; margin:0}
@media (min-width:900px){ .hero-art{justify-self:end} }
.hero-art .panel{aspect-ratio:4/5; background:var(--panel); border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center}
.hero-art .panel svg{width:72%; height:auto}
.hero-art .caption{margin-top:14px; display:flex; justify-content:space-between; gap:16px; font-size:15px; color:var(--muted)}
.hero-art .caption strong{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:1.15rem; color:var(--ink)}

.principles{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white)}
.principles .grid{display:grid; gap:28px 40px; padding:40px 0}
@media (min-width:640px){ .principles .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .principles .grid{grid-template-columns:repeat(4,1fr)} }
.principles h3{font-size:1.3rem}
.principles p{color:var(--muted); font-size:15.5px; margin-top:6px}

.section{padding:96px 0}
@media (min-width:900px){ .section{padding:128px 0} }
.section-head{display:grid; gap:20px 72px; align-items:end; margin-bottom:56px}
@media (min-width:900px){ .section-head{grid-template-columns:1fr 1fr} }
.section-head p{color:var(--muted); font-size:1.08rem; max-width:34rem}
.services{display:grid; gap:40px 48px}
@media (min-width:900px){ .services{grid-template-columns:repeat(3,1fr)} .services.four{grid-template-columns:repeat(2,1fr)} }
.service{display:flex; flex-direction:column; gap:14px; padding-top:22px; border-top:2px solid var(--accent)}
.service p{color:var(--muted)}
.service .price{color:var(--ink); font-weight:600; font-size:15px}
.service a{margin-top:6px; align-self:flex-start}

.band{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.audience{display:grid; gap:24px 48px}
@media (min-width:720px){ .audience{grid-template-columns:repeat(2,1fr)} }
.audience div{padding:24px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px}
.audience h3{font-size:1.35rem}
.audience p{color:var(--muted); font-size:15.5px}

.steps{list-style:none; margin:0; padding:0; display:grid; gap:40px 48px; counter-reset:step}
@media (min-width:900px){ .steps{grid-template-columns:repeat(3,1fr)} }
.steps li{counter-increment:step; display:flex; flex-direction:column; gap:12px}
.steps li::before{content:counter(step); font-family:"Newsreader",Georgia,serif; font-size:3rem; line-height:1; color:var(--accent); font-variation-settings:"opsz" 72}
.steps p{color:var(--muted)}

.about{display:grid; gap:40px 80px; align-items:center}
@media (min-width:900px){ .about{grid-template-columns:0.8fr 1.2fr} }
.about .photo{aspect-ratio:1/1; background:var(--mist); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:15px}
.about .text{display:flex; flex-direction:column; gap:24px}
.about blockquote{margin:0; font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.3; font-variation-settings:"opsz" 48}
.about p{color:var(--muted)}

/* private page */
.offer{display:grid; gap:40px 64px; align-items:start}
@media (min-width:900px){ .offer{grid-template-columns:1.1fr 0.9fr} }
.offer-box{background:var(--white); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:6px; padding:36px 32px; display:flex; flex-direction:column; gap:22px}
.offer-box h3{font-size:1.7rem}
.offer-box .price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.offer-box .price strong{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:2.4rem; line-height:1; font-variation-settings:"opsz" 72}
.offer-box .price span{color:var(--muted); font-size:15px}
.offer-box .note{color:var(--muted); font-size:15px}
.checks{display:flex; flex-direction:column; gap:14px}
.checks li{display:flex; gap:14px; align-items:flex-start; color:var(--ink)}
.checks li svg{flex:none; width:22px; height:22px; margin-top:3px; color:var(--accent)}
.checks li span{color:var(--muted)}
.checks li b{font-weight:600; color:var(--ink)}
.plain{display:flex; flex-direction:column; gap:18px}
.plain p{color:var(--muted)}
.discreet{display:grid; gap:28px 48px}
@media (min-width:720px){ .discreet{grid-template-columns:repeat(2,1fr)} }
.discreet div{display:flex; flex-direction:column; gap:8px; padding-top:20px; border-top:1px solid var(--line)}
.discreet h3{font-size:1.3rem}
.discreet p{color:var(--muted); font-size:15.5px}
.honest{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:36px 32px; display:grid; gap:20px 48px}
@media (min-width:900px){ .honest{grid-template-columns:0.9fr 1.1fr; align-items:start} }
.honest p{color:var(--muted)}
.honest ul{display:flex; flex-direction:column; gap:12px; color:var(--muted)}
.honest li{padding-left:18px; position:relative}
.honest li::before{content:""; position:absolute; left:0; top:0.75em; width:8px; height:1.5px; background:var(--accent)}

.contact{background:var(--slate); color:var(--on-dark)}
.contact .inner{padding:104px 0; display:grid; gap:32px 72px; align-items:center}
@media (min-width:900px){ .contact .inner{grid-template-columns:1.2fr 0.8fr} }
.contact h2{color:#FFFFFF}
.contact p{color:var(--on-dark-muted); font-size:1.1rem; max-width:32rem; margin-top:18px}
.contact .ways{display:flex; flex-direction:column; gap:22px}
.contact .ways a.mail{color:#FFFFFF; font-family:"Newsreader",Georgia,serif; font-size:1.6rem; text-decoration:none; font-variation-settings:"opsz" 48; overflow-wrap:anywhere}
.contact .ways a.mail:hover{color:var(--accent-soft)}
.contact .ways span{color:var(--on-dark-muted); font-size:15.5px}

.site-footer{background:#1A2224; color:#AEB8B5; font-size:14.5px}
.site-footer .inner{padding:44px 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px 32px}
.site-footer nav{display:flex; gap:28px; flex-wrap:wrap}
.site-footer a{color:#AEB8B5; text-decoration:none}
.site-footer a:hover{color:#FFFFFF}
.site-footer .quiet{flex-basis:100%; color:#7F8B88; font-size:13.5px}

:root{--btn-bg:#263033; --btn-fg:#FFFFFF; --btn-hover:#135550; --btn-hover-fg:#FFFFFF}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--btn-bg:#EEF1F0; --btn-fg:#121819; --btn-hover:#8FD3CC; --btn-hover-fg:#121819} }
:root[data-theme="dark"]{--btn-bg:#EEF1F0; --btn-fg:#121819; --btn-hover:#8FD3CC; --btn-hover-fg:#121819}
.btn{background:var(--btn-bg); color:var(--btn-fg)}
.btn:hover{background:var(--btn-hover); color:var(--btn-hover-fg)}
.nav .btn{color:var(--btn-fg)}
.nav .btn:hover{color:var(--btn-hover-fg)}
.contact .ways a.threema{color:#FFFFFF; font-weight:500; font-size:1.05rem; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; margin-top:-8px}
.contact .ways a.threema:hover{color:var(--accent-soft)}
.contact .ways a.phone{color:#FFFFFF; font-weight:500; font-size:1.05rem; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; margin-top:-8px}
.contact .ways a.phone:hover{color:var(--accent-soft)}
.faq{max-width:52rem; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; font-family:"Newsreader",Georgia,serif; font-size:1.35rem; line-height:1.3; font-weight:500; position:relative; font-variation-settings:"opsz" 36}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{color:var(--muted); padding:0 0 26px; max-width:44rem}
.faq .group{margin:44px 0 0; padding:0 0 10px; font-family:"Public Sans",system-ui,sans-serif; font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted)}
.faq .group:first-child{margin-top:28px}
.site-footer .meta{display:flex; flex-direction:column; gap:4px}
.site-footer .meta strong{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:1.2rem; color:#FFFFFF}
.principles .grid{padding:40px 0; padding-left:inherit; padding-right:inherit}
.principles .grid, .contact .inner, .site-footer .inner{padding-left:24px; padding-right:24px}
@media (min-width:720px){ .principles .grid, .contact .inner, .site-footer .inner{padding-left:40px; padding-right:40px} }
.service a{margin-top:auto; padding-top:12px; align-self:flex-start}
.hero-art .caption{flex-direction:column; gap:2px}
@media (max-width:899px){ .hero-art{max-width:340px} }
@media (max-width:860px){ .logo svg{height:30px} .header-row{min-height:72px} }
.about{grid-template-columns:1fr; gap:28px 72px; align-items:start}
@media (min-width:900px){ .about{grid-template-columns:1fr 1.1fr} }
.about .quote-col{display:flex; flex-direction:column; gap:24px}
.about .text{padding-top:6px}
h1{font-size:clamp(2.3rem,6vw,4.9rem)}
.nav .lang{font-size:14px; letter-spacing:0.06em; border:1px solid var(--line); border-radius:4px; padding:6px 10px; color:var(--muted)}
.nav .lang:hover{border-color:var(--ink); color:var(--ink)}
.logo svg{height:34px}
@media (min-width:720px){ .logo svg{height:46px} }
@media (min-width:1001px) and (max-width:1180px){ .nav{gap:8px 16px; font-size:15px} .nav .btn{padding:0 16px} .logo svg{height:34px} }

/* Rechtsseiten (Impressum, Datenschutz, Auftragsbedingungen) */
.legal{max-width:46rem; padding:72px 0 104px}
.legal h1{font-size:clamp(2.2rem,4.5vw,3.4rem); margin-bottom:12px}
.legal .stand{color:var(--muted); margin-bottom:48px}
.legal h2{font-size:1.5rem; margin:44px 0 12px; font-weight:500; font-variation-settings:"opsz" 36}
.legal p{color:var(--ink); margin-bottom:14px}
.legal ul{margin:0 0 14px; padding-left:20px; list-style:disc; color:var(--ink)}
.legal li{margin-bottom:6px}
.legal a{text-decoration:underline; text-underline-offset:4px}

/* Mobiles Menü ohne JavaScript: <details> in der Navigation, sichtbar bis 1000px */
.menu{display:none}
.menu summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:7px 14px; background:var(--white)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::before{content:""; width:14px; height:2px; background:currentColor; box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor}
.menu .panel{position:absolute; left:0; right:0; top:100%; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 16px 28px rgba(0,0,0,0.10); padding:4px 24px 22px; display:flex; flex-direction:column; z-index:30}
.menu .panel a{padding:15px 0; border-bottom:1px solid var(--line); color:var(--ink); font-size:17px; font-weight:500; text-decoration:none}
.menu .panel a.lang{border:1px solid var(--line); border-radius:4px; padding:6px 10px; font-size:14px; align-self:flex-start; margin-top:16px}
.menu .panel a.btn{margin-top:16px; border-bottom:0; align-self:flex-start; color:var(--btn-fg); padding:0 24px; min-height:48px}
.menu .panel a.btn:hover{color:var(--btn-hover-fg)}
@media (max-width:1000px){ .menu{display:block} .site-header{position:relative} .nav .btn.main{display:none} .nav > .lang{display:none} }