/* ============================================================
   Samuel Kümmel — globale Styles
   1) Basis & Tokens   2) Startseite   3) Rechts-/Über-mich-Seiten (.doc/.about)
   ============================================================ */

/* ---------- 1) Basis & Tokens ---------- */
:root{
  --ease:cubic-bezier(0.23,1,0.32,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur:580ms;
  --dur-fast:150ms;
  --accent:#EBB24E;
  --grain:0.09;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#F1F8F3;color:#103A30;font-family:'Spectral',Georgia,serif;-webkit-font-smoothing:antialiased;}
::selection{background:#1AA889;color:#F1F8F3;}

a:focus-visible,button:focus-visible,summary:focus-visible,.cta:focus-visible{
  outline:2px solid #1AA889;outline-offset:3px;border-radius:2px;
}

/* full-page page wrapper (Startseite) */
.page{position:relative;width:100%;overflow-x:hidden;}

/* film grain overlay (alle Seiten) */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:80;opacity:var(--grain,0.09);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* anchor offset so the sticky nav never covers a section headline */
#top,#diagnose,#angebote,#haltung,#ueber,#kontakt{scroll-margin-top:92px;}

/* ---------- 2) Startseite ---------- */

/* scroll reveal system */
.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.in-view{opacity:1;transform:none;}

/* accent kicker line "draws in" */
.kline{transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--ease) .12s;}
.reveal.in-view .kline,.kline.in-view{transform:scaleX(1);}

/* buttons & links */
.ar{display:inline-block;transition:transform var(--dur-fast) var(--ease);}
.btn-primary{transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);}
.btn-primary:active{transform:scale(0.97);}
.btn-sec{transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);}
.btn-sec:active{transform:scale(0.97);}
.cta-pill{transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);}
.cta-pill:active{transform:scale(0.97);}
.mob-cta{transition:transform var(--dur-fast) var(--ease);}
.mob-cta:active{transform:scale(0.97);}

.navlink{position:relative;text-decoration:none;}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .25s var(--ease);}
.navlink.active{color:#103A30 !important;}
.navlink.active::after{transform:scaleX(1);}

/* hover-only flourishes — gated so touch taps don't trigger sticky hover */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#138573;}
  .btn-primary:hover .ar{transform:translateX(3px);}
  .btn-sec:hover{background:#103A30;color:#F1F8F3;}
  .cta-pill:hover{background:#138573;}
  .tlink:hover .ar{transform:translateX(3px);}
  .navlink:hover::after{transform:scaleX(1);}
  .imgframe:hover img{transform:scale(1.035);}
  .card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(16,58,48,.5);}
}

/* image frames */
.imgframe{overflow:hidden;}
.imgframe img{transition:transform .65s var(--ease-out),filter .65s var(--ease-out);}

/* cards */
.card{transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);}

/* FAQ (robust grid-rows reveal, no fixed max-height) */
.faq summary{list-style:none;cursor:pointer;}
.faq summary::-webkit-details-marker{display:none;}
.faq .mk{transition:transform .25s ease;}
.faq[open] .mk{transform:rotate(45deg);}
.faq .ans{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .42s var(--ease),opacity .3s var(--ease);}
.faq[open] .ans{grid-template-rows:1fr;opacity:1;}
.faq .ans-inner{overflow:hidden;min-height:0;}

/* "breathing" ambient glow for the Atem sections */
@keyframes breathe{
  0%,100%{transform:scale(1);opacity:.42;}
  50%{transform:scale(1.14);opacity:.78;}
}
.breath{
  position:absolute;pointer-events:none;border-radius:50%;z-index:0;
  background:radial-gradient(circle at center, rgba(167,216,200,.45), rgba(167,216,200,0) 70%);
  filter:blur(52px);
}

/* nav scroll state */
nav.site-nav{transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);}
.site-nav .navwrap{transition:padding var(--dur-fast) var(--ease);}
nav.site-nav.nav-scrolled{background:rgba(241,248,243,0.94);border-bottom-color:#D6E8E0;}
nav.site-nav.nav-scrolled .navwrap{padding-top:12px;padding-bottom:12px;}

/* mobile nav */
.mobnav{display:none;position:static;margin-left:auto;}
.burger{list-style:none;cursor:pointer;width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:4px;}
.burger::-webkit-details-marker{display:none;}
.burger span{display:block;height:2px;width:22px;background:#103A30;transition:transform .25s var(--ease),opacity .2s var(--ease);}
.mobnav[open] .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobnav[open] .burger span:nth-child(2){opacity:0;}
.mobnav[open] .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobnav-panel{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(241,248,243,0.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid #CFE5DC;display:flex;flex-direction:column;gap:2px;padding:14px 24px 22px;
  transform-origin:top center;opacity:1;transform:translateY(0);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
@starting-style{
  .mobnav-panel{opacity:0;transform:translateY(-8px);}
}
.mobnav-panel a{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17px;color:#103A30;text-decoration:none;padding:14px 0;border-bottom:1px solid #D6E8E0;}
.mobnav-panel a.mob-cta{margin-top:14px;border-bottom:none;background:#1AA889;color:#F1F8F3;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;text-align:center;padding:15px;border-radius:3px;}

@media (max-width:820px){
  .pad{padding-left:24px !important;padding-right:24px !important;}
  .grid2{grid-template-columns:1fr !important;}
  .hero-grid{grid-template-columns:1fr !important;gap:40px !important;}
  .hide-sm{display:none !important;}
  .site-nav .navwrap{padding-left:24px !important;padding-right:24px !important;}
  .atem-pad{padding-top:80px !important;padding-bottom:80px !important;}
  .mobnav{display:block;}
}

/* ---------- 3) Rechts- & Über-mich-Seiten (.doc / .about) ---------- */

.doc .nav,.about .nav{position:sticky;top:0;z-index:70;background:rgba(241,248,243,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #CFE5DC;}
.doc .navwrap,.about .navwrap{margin:0 auto;display:flex;align-items:center;gap:18px;}
.doc .navwrap{max-width:760px;padding:16px 32px;}
.about .navwrap{max-width:1080px;padding:16px 40px;}
.doc .brand,.about .brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;letter-spacing:-0.02em;color:#103A30;text-decoration:none;}
.doc .back,.about .back{margin-left:auto;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:14px;color:#4A7567;text-decoration:none;transition:color .15s;}
.doc .back:hover,.about .back:hover{color:#103A30;}
.doc .cta,.about .cta{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:#F1F8F3;background:#1AA889;padding:10px 16px;border-radius:3px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,transform .15s;}
.doc .cta:hover,.about .cta:hover{background:#138573;}
.doc .cta:active,.about .cta:active{transform:scale(0.97);}

.doc .kicker,.about .kicker{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#1AA889;margin-bottom:20px;display:flex;align-items:center;gap:12px;}
.doc .kicker::before,.about .kicker::before{content:"";width:26px;height:1px;background:#1AA889;display:inline-block;}

/* doc (Impressum/Datenschutz/AGB) */
.doc .head{max-width:760px;margin:0 auto;padding:60px 32px 24px;}
.doc h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(32px,5.6vw,54px);line-height:1.02;letter-spacing:-0.03em;color:#103A30;margin:0;text-wrap:balance;}
.doc .lead{font-family:'Spectral',serif;font-size:18px;line-height:1.6;color:#4A7567;margin:18px 0 0;max-width:60ch;}
.doc .stand{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:12px;letter-spacing:0.02em;color:#6E9486;margin:6px 0 0;}
.doc .content{max-width:760px;margin:0 auto;padding:16px 32px 96px;}
.doc .content h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.02em;color:#103A30;margin:46px 0 13px;padding-top:12px;border-top:1px solid #CFE5DC;}
.doc .content h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px;letter-spacing:-0.01em;color:#103A30;margin:28px 0 8px;}
.doc .content p,.doc .content li{font-family:'Spectral',serif;font-size:16px;line-height:1.74;color:#2C4A41;}
.doc .content p{margin:0 0 14px;}
.doc .content .q{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:16px;color:#103A30;margin:18px 0 6px;}
.doc .content ul{margin:0 0 14px;padding-left:22px;}
.doc .content li{margin:0 0 6px;}
.doc .content a{color:#1AA889;text-decoration:underline;text-underline-offset:2px;word-break:break-word;}
.doc .content strong{color:#103A30;}
.doc .content .caps{font-size:14px;line-height:1.7;color:#2C4A41;}

/* about (Über mich) */
.about h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(38px,6vw,68px);line-height:0.98;letter-spacing:-0.03em;color:#103A30;margin:0;text-wrap:balance;}
.about .intro{max-width:1080px;margin:0 auto;padding:64px 40px 0;}
.about .intro-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;align-items:center;margin-top:40px;}
.about .frame{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;box-shadow:0 30px 60px -44px rgba(16,58,48,0.5);}
.about .frame img{width:100%;height:100%;object-fit:cover;display:block;}
.about .lead{font-family:'Spectral',serif;font-weight:300;font-size:clamp(19px,2.1vw,23px);line-height:1.6;color:#2C4A41;margin:0;text-wrap:pretty;}
.about .content{max-width:760px;margin:0 auto;padding:64px 40px 24px;}
.about .content h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(24px,3vw,32px);letter-spacing:-0.02em;color:#103A30;margin:48px 0 14px;}
.about .content p{font-family:'Spectral',serif;font-size:18px;line-height:1.72;color:#2C4A41;margin:0 0 16px;text-wrap:pretty;}
.about .ph{padding:22px 26px;background:#E6F2EC;border-left:2px solid #1AA889;border-radius:0 4px 4px 0;font-family:'Spectral',serif;font-style:italic;font-size:16px;line-height:1.6;color:#4A7567;}
.about .ctaband{max-width:760px;margin:24px auto 0;padding:0 40px 96px;}
.about .ctabox{background:#103A30;border-radius:6px;padding:48px 44px;text-align:center;}
.about .ctabox h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,34px);line-height:1.1;letter-spacing:-0.02em;color:#F1F8F3;margin:0 0 20px;text-wrap:balance;}
.about .ctabtn{display:inline-flex;align-items:center;gap:10px;background:#1AA889;color:#F1F8F3;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16px;padding:16px 32px;border-radius:4px;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s;}
.about .ctabtn:hover{background:#138573;}
.about .ctabtn:active{transform:scale(0.97);}

/* shared footer for doc + about */
.doc .foot,.about .foot{background:#103A30;color:#8FBBAE;}
.about .foot{border-top:1px solid #1B4D40;}
.doc .footwrap,.about .footwrap{margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:12px;letter-spacing:0.04em;}
.doc .footwrap{max-width:760px;padding:38px 32px;}
.about .footwrap{max-width:1080px;padding:38px 40px;}
.doc .footlinks,.about .footlinks{display:flex;gap:20px;flex-wrap:wrap;}
.doc .foot a,.about .foot a{color:#8FBBAE;text-decoration:none;transition:color .15s;}
.doc .foot a:hover,.about .foot a:hover{color:#F1F8F3;}

@media (prefers-reduced-motion:no-preference){
  .doc .fade,.about .fade{opacity:0;transform:translateY(11px);animation:up .6s cubic-bezier(0.23,1,0.32,1) forwards;}
  @keyframes up{to{opacity:1;transform:none;}}
}

@media (max-width:640px){
  .doc .navwrap,.doc .head,.doc .content,.doc .footwrap{padding-left:22px;padding-right:22px;}
}
@media (max-width:820px){
  .about .intro-grid{grid-template-columns:1fr;gap:36px;}
  .about .navwrap,.about .intro,.about .content,.about .ctaband,.about .footwrap{padding-left:24px;padding-right:24px;}
}

/* ---------- respect reduced motion (Startseite) ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;}
  html{scroll-behavior:auto;}
  .reveal{transform:none !important;transition:opacity .3s ease !important;}
  .kline{transform:none !important;transition:none !important;}
  .breath{display:none !important;}
  .imgframe img{transition:none !important;}
  .mobnav-panel{transition:none !important;}
}