/* ================================================================
   Systemische Praxis Alexandra Kuptz – Stylesheet
   Schriften lokal eingebunden (keine externen Anfragen)
   ================================================================ */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/fraunces-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;
  src:url('fonts/fraunces-latin-600-italic.woff2') format('woff2');}

:root{
  --ink:      #221E1B;
  --paper:    #FAF5EC;
  --teal:     #6FAE95;
  --teal-soft:#DCEDE5;
  --coral:    #EE7853;
  --coral-soft:#FBE3D9;
  --pink:     #F2B9CF;
  --pink-soft:#FBE9F1;
  --lilac:    #A9A5D9;
  --lilac-soft:#E9E7F7;
  --butter:   #EDE6A2;
  --butter-soft:#F7F4DC;
  --sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--coral);color:#fff;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
em.acc{font-family:var(--serif);font-style:italic;font-weight:600;}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,245,236,.88);
  backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--ink);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1120px;margin:0 auto;}
.logo{font-family:var(--serif);font-weight:700;font-size:1.25rem;text-decoration:none;color:var(--ink);letter-spacing:-.01em;}
.logo .dot{color:var(--coral);}
.logo small{display:block;font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);opacity:.65;}
nav.links{display:flex;gap:28px;align-items:center;}
nav.links a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;position:relative;}
nav.links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-4px;height:2.5px;width:0;
  background:var(--coral);border-radius:2px;transition:width .25s ease;
}
nav.links a:not(.btn):hover::after{width:100%;}
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:11px 22px;border-radius:999px;text-decoration:none;font-weight:500;
  border:1.5px solid var(--ink);transition:all .2s ease;font-size:.95rem;
}
.btn:hover{background:var(--coral);border-color:var(--coral);transform:translateY(-2px);}
nav.links a.btn{color:var(--paper);}
nav.links a.btn:hover{color:var(--paper);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);}
.burger{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink);}

/* ---------- Hero ---------- */
.hero{position:relative;padding:90px 0 70px;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;position:relative;z-index:2;}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:22px;
}
.kicker::before{content:"";width:34px;height:3px;background:var(--coral);border-radius:2px;}
h1{
  font-size:clamp(2.3rem,4.6vw,3.6rem);
  line-height:1.06;font-weight:700;letter-spacing:-.02em;margin-bottom:24px;
}
h1 em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--coral);}
h1 .squig{position:relative;white-space:nowrap;}
h1 .squig svg{position:absolute;left:0;bottom:-10px;width:100%;height:14px;}
.hero p.lead{font-size:1.15rem;max-width:33rem;margin-bottom:34px;opacity:.88;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}

/* Blob-Portrait */
.portrait{position:relative;aspect-ratio:.9;width:100%;max-width:420px;margin-left:auto;}
.portrait .blob-main{
  position:absolute;inset:6% 4% 4% 6%;
  background:var(--teal);
  border-radius:58% 42% 55% 45% / 50% 55% 45% 50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--ink);
  overflow:hidden;
}
.portrait .blob-main img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
}
.portrait .ring{
  position:absolute;width:34%;aspect-ratio:1;border-radius:50%;
  border:10px solid var(--coral);top:-4%;right:-2%;z-index:3;
}
.portrait .pill{
  position:absolute;width:26%;height:13%;background:var(--pink);
  border-radius:999px;bottom:6%;left:-6%;z-index:3;transform:rotate(-18deg);
  border:1.5px solid var(--ink);
}
.portrait .tri{
  position:absolute;bottom:-2%;right:8%;width:0;height:0;z-index:3;
  border-left:26px solid transparent;border-right:26px solid transparent;
  border-bottom:44px solid var(--lilac);transform:rotate(14deg);
}
.hero .bg-blob{position:absolute;border-radius:50%;z-index:1;}
.hero .bg-1{width:340px;height:340px;background:var(--butter-soft);top:-120px;left:-140px;border-radius:47% 53% 58% 42%/49% 46% 54% 51%;}
.hero .bg-2{width:120px;height:120px;background:var(--pink-soft);bottom:30px;left:42%;border-radius:60% 40% 45% 55%/55% 48% 52% 45%;}

/* ---------- Ticker ---------- */
.ticker{
  background:var(--teal);color:var(--ink);
  overflow:hidden;white-space:nowrap;padding:14px 0;
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
}
.ticker-track{display:inline-block;animation:scroll 26s linear infinite;}
.ticker span{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  margin:0 14px;
}
.ticker .sep{color:var(--paper);font-style:normal;font-family:var(--sans);}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{padding:88px 0;position:relative;}
.sec-head{max-width:620px;margin-bottom:52px;}
.sec-head .kicker{margin-bottom:14px;}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.12;letter-spacing:-.015em;font-weight:700;}
h2 em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--coral);}

/* ---------- Angebot ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.card{
  border:1.5px solid var(--ink);border-radius:22px;padding:34px 30px 30px;
  background:#fff;position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:6px 8px 0 var(--ink);}
.card .shape{width:54px;height:54px;margin-bottom:20px;border:1.5px solid var(--ink);}
.card:nth-child(1) .shape{background:var(--teal);border-radius:58% 42% 55% 45%/50% 55% 45% 50%;}
.card:nth-child(2) .shape{background:var(--coral);border-radius:50% 50% 12px 50%;}
.card:nth-child(3) .shape{background:var(--pink);border-radius:12px;transform:rotate(8deg);}
.card:nth-child(4) .shape{background:var(--lilac);border-radius:999px;width:74px;}
.card h3{font-size:1.35rem;margin-bottom:10px;letter-spacing:-.01em;}
.card h3 em{font-family:var(--serif);font-style:italic;font-weight:600;}
.card p{font-size:.98rem;opacity:.85;}
.card .note{
  display:inline-block;margin-top:16px;background:var(--butter-soft);
  border:1.5px solid var(--ink);border-radius:12px;padding:8px 14px;
  font-size:.84rem;font-weight:500;line-height:1.5;
}
.card .note a{color:var(--ink);font-weight:700;text-decoration-color:var(--coral);text-underline-offset:3px;}
.card .tag{
  position:absolute;top:22px;right:22px;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:999px;
  border:1.5px solid var(--ink);
}
.card:nth-child(1) .tag{background:var(--teal-soft);}
.card:nth-child(2) .tag{background:var(--coral-soft);}
.card:nth-child(3) .tag{background:var(--pink-soft);}
.card:nth-child(4) .tag{background:var(--lilac-soft);}

/* ---------- Über mich ---------- */
.about{background:var(--teal-soft);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;}
.about-photo{position:relative;aspect-ratio:.85;width:100%;max-width:360px;}
.about-photo .frame{
  position:absolute;inset:0;background:var(--pink);
  border-radius:42% 58% 48% 52%/55% 44% 56% 45%;
  border:1.5px solid var(--ink);overflow:hidden;
}
.about-photo .frame img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;
}
.about-photo .dotgrid{
  position:absolute;bottom:-18px;right:-18px;width:96px;height:96px;z-index:2;
  background-image:radial-gradient(var(--ink) 2.2px, transparent 2.6px);
  background-size:16px 16px;
}
.about h2{margin-bottom:20px;}
.about p{margin-bottom:16px;max-width:34rem;}
.about .creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.about .creds span{
  background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;
  padding:7px 16px;font-size:.85rem;font-weight:500;
}

/* ---------- Zitat ---------- */
.quote{background:var(--coral);color:var(--paper);text-align:center;border-bottom:1.5px solid var(--ink);}
.quote blockquote{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.3;max-width:46rem;margin:0 auto 18px;
}
.quote cite{font-family:var(--sans);font-style:normal;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85;}
.quote .q-deco{font-size:3rem;line-height:1;display:block;margin-bottom:8px;font-family:var(--serif);}

/* ---------- Kontakt ---------- */
.contact{text-align:center;padding:110px 0;}
.contact h2{margin-bottom:18px;font-size:clamp(2.1rem,4.4vw,3.3rem);}
.contact p{max-width:32rem;margin:0 auto 36px;font-size:1.1rem;opacity:.88;}
.mail-btn{
  font-size:clamp(1.1rem,2.6vw,1.6rem);font-weight:700;
  background:var(--butter);border:1.5px solid var(--ink);border-radius:999px;
  padding:18px 38px;color:var(--ink);text-decoration:none;display:inline-block;
  transition:all .2s ease;box-shadow:4px 5px 0 var(--ink);
}
.mail-btn:hover{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink);background:var(--pink);}
.contact .hint{font-size:.9rem;opacity:.6;margin-top:26px;}
.contact .hint a{color:var(--ink);font-weight:700;text-decoration-color:var(--coral);text-underline-offset:3px;}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:56px 0 40px;}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;}
footer .logo{color:var(--paper);}
footer .logo small{color:var(--paper);opacity:.6;}
footer nav{display:flex;gap:22px;flex-wrap:wrap;}
footer a{color:var(--paper);text-decoration:none;font-size:.92rem;opacity:.85;}
footer a:hover{opacity:1;text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:4px;}
footer .legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(250,245,236,.25);font-size:.8rem;opacity:.6;}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal-page{padding:70px 0 90px;}
.legal-page .inner{max-width:760px;margin:0 auto;}
.legal-page h1{
  font-size:clamp(2rem,4vw,2.8rem);margin-bottom:12px;
}
.legal-page .back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;
  font-size:.92rem;font-weight:500;color:var(--ink);text-decoration:none;
  border:1.5px solid var(--ink);border-radius:999px;padding:8px 18px;
  transition:all .2s ease;
}
.legal-page .back:hover{background:var(--ink);color:var(--paper);}
.legal-page h2{
  font-size:1.4rem;margin:42px 0 12px;letter-spacing:-.01em;
  padding-bottom:8px;border-bottom:2px solid var(--coral);
}
.legal-page h3{font-size:1.12rem;margin:28px 0 8px;}
.legal-page h4{font-size:1rem;margin:20px 0 6px;font-weight:700;opacity:.85;}
.legal-page p{margin-bottom:14px;font-size:.97rem;}
.legal-page ul{margin:0 0 16px 22px;font-size:.97rem;}
.legal-page li{margin-bottom:10px;}
.legal-page a{color:var(--ink);text-decoration-color:var(--coral);text-underline-offset:3px;word-break:break-word;}
.legal-page .addr{
  background:#fff;border:1.5px solid var(--ink);border-radius:18px;
  padding:24px 26px;margin:20px 0 28px;line-height:1.8;
}
.legal-page .upper{font-size:.9rem;background:var(--butter-soft);border-left:4px solid var(--coral);padding:16px 20px;margin-bottom:16px;}
.legal-page .source{margin-top:40px;font-size:.85rem;opacity:.65;}

/* ---------- Animation (nur wenn JS aktiv) ---------- */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
html.js .reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none;}
  .ticker-track{animation:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  nav.links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1.5px solid var(--ink);
    flex-direction:column;padding:22px;gap:18px;
  }
  nav.links.open{display:flex;}
  .burger{display:block;}
  .hero{padding:56px 0 50px;}
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .portrait{margin:0 auto;max-width:320px;}
  .cards{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;gap:44px;}
  .about-photo{margin:0 auto;}
  section{padding:64px 0;}
}