:root{--pink:#E85F88;--soft:#fff0f5;--ink:#747474;--muted:#888;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:white;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.62}a{color:var(--pink)}a:hover,a:focus-visible{color:#b73d70}button{font:inherit} .site-header{position:relative;max-width:430px;margin:auto;min-height:175px;display:flex;justify-content:center;align-items:flex-start;padding:14px 28px 0}.brand{display:block;width:min(310px,85%)}.brand img{width:100%;display:block}.menu-btn{position:absolute;right:13px;top:10px;border:0;background:white;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--ink);font-size:30px;line-height:1}.site-nav{position:absolute;z-index:10;left:12px;right:12px;top:56px;background:#fff;border:1px solid #f6d6e1;box-shadow:0 12px 32px #8b53612a;padding:15px 20px;border-radius:8px;display:none}.site-nav.open{display:block}.site-nav a{display:block;text-decoration:none;padding:6px 3px;font-size:15px}.nav-label{text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:#555;margin-top:8px}.container{width:min(100% - 46px,760px);margin:auto}.home-hero{display:block;width:min(300px,80%);margin:4px auto 16px}.intro{font-size:clamp(20px,5.8vw,25px);line-height:1.44;font-weight:600;margin:0 0 30px}.intro em{color:var(--pink);font-style:normal}.portrait{width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;margin:28px auto 8px}.person-title{text-align:center;color:var(--pink);font-size:21px;font-weight:700;margin:4px 0 0}.person-subtitle{text-align:center;font-size:13px;margin:0 0 50px}.section-title{text-align:center;color:var(--pink);font-size:30px;line-height:1.25;margin:0 0 22px}.cards{display:grid;gap:22px;margin-bottom:70px}.service-card{display:block;border-radius:12px;padding:19px 22px;background:var(--soft);text-decoration:none;color:var(--ink);min-height:125px}.service-card:nth-child(even){background:#fff}.service-card h3{color:var(--pink);font-size:21px;letter-spacing:.01em;margin:0 0 5px}.service-card p{margin:0;font-size:17px;line-height:1.45}.sub-art{display:block;width:min(245px,75%);height:auto;max-height:265px;object-fit:contain;margin:-16px auto 10px}.hero-card{background:#fff0f5;border-radius:8px;padding:15px 22px;margin:0 0 28px}.hero-card h1{font-size:24px;color:var(--pink);line-height:1.2;margin:0 0 6px}.hero-card p{font-size:22px;font-weight:600;line-height:1.35;margin:0}.page-copy{font-size:17px;line-height:1.58;white-space:normal;overflow-wrap:anywhere}.page-copy p{margin:0 0 22px}.page-copy ul{padding-left:1.35em;margin:8px 0 24px}.page-copy li{padding-left:2px;margin:5px 0}.home-link{display:block;width:max-content;max-width:100%;border:1px solid var(--pink);color:var(--pink);border-radius:30px;padding:6px 30px;text-decoration:none;font-size:13px;letter-spacing:.08em;margin:30px auto 30px;text-align:center}.related{margin:24px 0 42px}.related h2{font-size:15px;letter-spacing:.04em;margin:0 0 4px}.related a{display:block;text-decoration:none;font-size:15px;line-height:1.65}.site-footer{width:min(100% - 46px,760px);margin:40px auto 20px;font-size:14px;line-height:1.4}.footer-mark{font-size:40px;font-weight:bold;font-style:italic;color:var(--pink);line-height:1}.site-footer strong{color:var(--pink)}.site-footer a{color:inherit}.copyright{font-size:12px;color:#999;margin-top:18px}.copyright a{color:#777}.legal h1,.legal h2{color:var(--pink);line-height:1.25}.legal h1{font-size:27px}.legal h2{font-size:20px;margin-top:32px}.legal p,.legal li{font-size:15px}.note{background:#fff9d9;padding:12px;border-left:3px solid #c49c38;font-size:14px}@media(min-width:700px){body{font-size:18px}.site-header{max-width:1000px;min-height:190px}.brand{width:330px}.container{width:min(100% - 80px,970px)}.home-hero{width:340px}.intro{font-size:26px;max-width:680px;margin:0 auto 45px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.service-card{min-height:160px}.section-title{font-size:36px}.sub-page{max-width:760px}.hero-card{padding:25px 35px}.page-copy{font-size:19px}.site-footer{width:min(100% - 80px,970px)}.site-nav{left:auto;right:5px;width:300px}.portrait{width:220px;height:220px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Original-Assets, mobile-first */
.brand {width:min(226px,72%)}
.brand img {height:auto;aspect-ratio:226.25/113.222515}
.home-hero {width:min(204px,60%);height:auto;border-radius:50%;margin:8px auto 22px}
.portrait {width:204px;height:202px}
.section-illustration {display:block;width:94px;height:94px;object-fit:contain;margin:0 auto 12px}
.card-icon {width:54px;height:54px;object-fit:contain;display:block;margin:0 0 7px}
.icon-art {width:min(190px,55%);max-height:190px;object-fit:contain;margin:8px auto 16px}
.footer-mark-img {display:block;width:52px;height:auto;margin-bottom:4px}
@media(min-width:700px){.brand{width:226px}.home-hero{width:204px}.card-icon{width:62px;height:62px}}

/* Adobe XD typography specifications — HOME, mobile first.
   XD tracking 10 => 10 / 1000 em, XD tracking 5 => 5 / 1000 em.
   DIN webfont files must be supplied and hosted locally before final visual QA. */
:root{--font-din:'DIN','DIN 2014',Arial,Helvetica,sans-serif;--font-din-alt:'DIN Alternate','DIN Alternate Bold',Arial,Helvetica,sans-serif}
.intro{font-family:var(--font-din-alt);font-size:24px;letter-spacing:.01em;line-height:1.42;font-weight:normal}
.person-title,.person-subtitle{font-family:var(--font-din-alt);font-size:17px;letter-spacing:.01em;line-height:1.35}
.person-title{font-weight:bold}
.person-subtitle{font-weight:normal}
.section-title{font-family:var(--font-din-alt);font-size:30px;letter-spacing:.01em;line-height:1.2}
.service-card h3{font-family:var(--font-din);font-size:20px;letter-spacing:.01em;line-height:1.25}
.service-card p{font-family:var(--font-din);font-size:15px;letter-spacing:.01em;line-height:1.45}
.site-footer{font-family:var(--font-din);letter-spacing:.005em}
.site-footer .footer-name{display:block;font-size:14px;line-height:1.3}
.site-footer .footer-role{font-size:12px;line-height:1.3}
.site-footer .footer-contact{font-size:14px;line-height:1.4}
.site-footer .copyright{font-size:12px;letter-spacing:.005em}
@media(min-width:700px){.intro{font-size:24px}.section-title{font-size:30px}.service-card h3{font-size:20px}.service-card p{font-size:15px}}

/* HOME REVIEW 01 – design reference Home hover PDF. Mobile-first overlay menu. */
:root{--font-barlow:"Barlow",Arial,Helvetica,sans-serif}
body,.intro,.person-title,.person-subtitle,.section-title,.service-card h3,.service-card p,.site-footer{font-family:var(--font-barlow)}
/* Barlow files can be added locally to /fonts when available; no Google-hosted requests. */
@font-face{font-family:"Barlow";src:url("../fonts/barlow-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-semibold.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
.site-header{isolation:isolate}
.menu-btn{position:absolute;top:9px;right:13px;z-index:110;background:transparent;border:0;width:46px;height:42px;padding:8px;display:grid;place-items:center}
.hamburger-lines{width:30px;display:grid;gap:5px}
.hamburger-lines span{height:1.5px;width:100%;background:#555;display:block;transition:transform .2s ease,opacity .2s ease}
.menu-btn[aria-expanded="true"] .hamburger-lines span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .hamburger-lines span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .hamburger-lines span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu-scrim{display:none;position:absolute;inset:0 0 auto;z-index:98;height:100%;background:rgba(232,95,136,.76)}
.site-nav{position:absolute;left:0;right:0;top:0;z-index:100;width:100%;max-width:none;border:0;border-radius:0;box-shadow:none;padding:13px 24px 21px 29px;background:rgba(232,95,136,.84);color:white;max-height:min(90dvh,720px);overflow:auto}
.site-nav a{color:#fff;font-weight:600;letter-spacing:.025em;font-size:18px;line-height:1.16;padding:1px 0;text-decoration:none}
.site-nav a:hover,.site-nav a:focus-visible{text-decoration:underline;color:#fff}
.site-nav .nav-label{color:white;font-size:17px;font-weight:700;letter-spacing:.06em;margin-top:8px;margin-bottom:1px}
.site-nav.open{display:block}
.menu-btn[aria-expanded="true"]{position:absolute}
.site-nav a:last-child{margin-top:9px}
:focus-visible{outline:2px solid #4a4a4a;outline-offset:3px}
@media(min-width:700px){.site-nav{left:auto;right:0;top:0;width:min(410px,100%);padding:25px 32px 30px}.site-nav a{font-size:18px}.menu-btn{right:12px}.menu-scrim{display:none}}
@media(prefers-reduced-motion:reduce){.hamburger-lines span{transition:none}}

/* HOME REVIEW 02 – Farbwerte aus Adobe XD */
:root { --pink: #E85F88; --box-1: #faeef2; --box-2: #f7e3e9; }
.person-title, .person-subtitle { color: #E85F88; }
.service-card:nth-child(odd) { background-color: var(--box-1); }
.service-card:nth-child(even) { background-color: var(--box-2); }


/* HOME refinement – 2026-10-30 */
:root { --pink: #E85F88; --box-1: #faeef2; --box-2: #f7e3e9; }
.person-title,
.person-subtitle { color: var(--pink); }
.person-subtitle { margin-bottom: 38px; }
.cards {
  gap: 3px;
  margin-bottom: 70px;
}
.service-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 18px;
  row-gap: 8px;
  align-items: start;
  min-height: 140px;
  padding: 18px 18px;
  border-radius: 18px;
}
.service-card:nth-child(odd) { background-color: var(--box-1); }
.service-card:nth-child(even) { background-color: var(--box-2); }
.card-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  padding: 8px;
  background: #fff;
  border-radius: 50%;
  object-fit: contain;
  display: block;
  margin: 0;
  align-self: start;
  justify-self: start;
}
.service-card h3 {
  grid-column: 2;
  margin: 0;
  align-self: end;
}
.service-card p {
  grid-column: 2;
  margin: 0;
}
@media (min-width: 700px) {
  .cards { gap: 3px; grid-template-columns: 1fr; }
  .service-card {
    grid-template-columns: 46px 1fr;
    min-height: 140px;
  }
}