/* Ported from business/praxis-homepage-preview.html (org-mode repo).
   Fonts self-hosted from /fonts/ instead of Google Fonts CDN — see
   business/claude-code-prompt-praxis-website.md, "Tech Stack" (LG München
   Google-Fonts ruling). Latin-only subset is sufficient for German content
   (covers ä/ö/ü/ß, €, and standard punctuation). */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --paper: #F2ECDF;
  --ink: #1F2A24;
  --moss: #6C8E7C;
  --moss-deep: #4C6C5C;
  --clay: #B98072;
  --forest: #1C2B23;
  --forest-line: #354338;
  --grey: #8B8A82;
  --paper-warm: #F7F0E3;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.display{ font-family:'Fraunces', serif; }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em; }
a{ color:inherit; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 32px; }

nav{
  position:sticky; top:0; z-index:50;
  background:rgba(242,236,223,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(31,42,36,0.08);
  transition:background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
nav .wrap{ display:flex; justify-content:space-between; align-items:center; height:72px; }
.brand{ font-family:'Fraunces', serif; font-size:1.1rem; font-weight:600; text-decoration:none; transition:color 0.3s ease; }
.brand span{ color:var(--moss-deep); font-weight:400; transition:color 0.3s ease; }
nav .links{ display:flex; gap:30px; font-size:0.9rem; }
nav .links a{ text-decoration:none; opacity:0.75; transition:opacity 0.2s, color 0.3s ease; }
nav .links a:hover{ opacity:1; }

/* Translucent forest-green nav overlaid on a photo hero — see baseof.html
   for the scroll-triggered `.scrolled` toggle (swaps back to the normal
   solid nav once the hero has scrolled past). Only applies on pages with
   `hero_image` set. */
.has-hero-photo nav{
  position:absolute; width:100%;
  background:rgba(22,33,28,0.38);
  backdrop-filter:blur(6px);
  border-bottom-color:transparent;
}
/* The Kontakt button is --ink (near-black), same hue family as the dark
   photo tint behind it — on some photos (water.jpg) it nearly vanishes.
   A light outline gives it an edge without changing its fill/theme. */
.has-hero-photo .nav-cta{ border:1px solid rgba(247,240,227,0.4); }
.has-hero-photo nav.scrolled .nav-cta{ border-color:transparent; }
.has-hero-photo nav .brand, .has-hero-photo nav .links a{ color:var(--paper-warm); }
.has-hero-photo nav .brand span{ color:rgba(247,240,227,0.72); }
.has-hero-photo nav.scrolled{
  position:sticky;
  background:rgba(242,236,223,0.92);
  backdrop-filter:blur(8px);
  border-bottom-color:rgba(31,42,36,0.08);
}
.has-hero-photo nav.scrolled .brand, .has-hero-photo nav.scrolled .links a{ color:inherit; }
.has-hero-photo nav.scrolled .brand span{ color:var(--moss-deep); }
.nav-cta{
  background:var(--ink); color:var(--paper-warm);
  padding:9px 18px; border-radius:2px; font-size:0.85rem;
  text-decoration:none;
}

.nav-right{ display:flex; align-items:center; gap:16px; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:30px; height:30px; padding:0;
  background:none; border:none; cursor:pointer;
}
.nav-toggle span{ display:block; width:100%; height:2px; background:var(--ink); border-radius:1px; transition:background-color 0.3s ease; }
.has-hero-photo .nav-toggle span{ background:var(--paper-warm); }
.has-hero-photo nav.scrolled .nav-toggle span{ background:var(--ink); }

.mobile-menu{
  display:none; flex-direction:column;
  background:var(--paper); border-top:1px solid rgba(31,42,36,0.1);
}
.mobile-menu a{
  padding:14px 32px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid rgba(31,42,36,0.08); font-size:0.98rem;
}
@media (max-width:820px){ .mobile-menu a{ padding-left:36px; padding-right:36px; } }
nav.menu-open .mobile-menu{ display:flex; }
nav.menu-open{ position:sticky; background:rgba(242,236,223,0.97); backdrop-filter:blur(8px); }
nav.menu-open .nav-toggle span{ background:var(--ink); }

.hero{ padding:80px 0 76px; }
.hero .wrap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; }

/* Full-bleed photo variant — activates when a page sets `hero_image`;
   falls back to the abstract .window-frame box when unset (see index.html).
   Modeled on onlinepsychotherapeutin.de's full-photo hero. */
.hero.has-photo{
  position:relative; min-height:620px; display:flex; align-items:flex-end;
  padding:0; margin-bottom:0; overflow:hidden;
}
.hero.has-photo .hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:grayscale(0.15) saturate(0.9) brightness(0.82);
}
/* Same forest color-wash as .teaser-band-bg (confirmed as the right tint
   level) — ::before tints, ::after darkens just enough for text, with a
   touch more weight on the left where the heading/lede sit. */
.hero.has-photo .hero-bg::before{
  content:''; position:absolute; inset:0;
  background:var(--forest); opacity:0.32; mix-blend-mode:color;
}
.hero.has-photo .hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(22,33,28,0.5) 0%, rgba(22,33,28,0.4) 55%, rgba(22,33,28,0.32) 100%);
}
.hero.has-photo .wave-cutoff{ position:absolute; left:0; right:0; bottom:-1px; z-index:2; }
.hero.has-photo .wave-cutoff svg{ width:100%; height:48px; display:block; }
.hero.has-photo .wrap{ position:relative; z-index:1; display:block; padding:72px 0 64px; }
.hero.has-photo h1, .hero.has-photo p.lede, .hero.has-photo p.sub{ color:var(--paper-warm); }
.hero.has-photo p.sub{ color:rgba(247,240,227,0.78); }
.hero.has-photo .eyebrow{ color:var(--paper-warm); }
.hero.has-photo .eyebrow::before{ background:var(--paper-warm); }

/* Wavy underline accent for key phrases in headings — wrap the phrase in
   <span class="accent">...</span> (via a page's `hero_title_html` param,
   since Hugo's .Title is plain text and can't carry inline markup). */
/* Hand-drawn circle emphasis (replaces the earlier wavy-underline version)
   — an SVG background with a deliberately irregular, slightly doubled
   path so it reads as a marker circling the word, not a clean CSS ellipse. */
.accent{
  position:relative;
  z-index:0;
  display:inline-block;
}
.accent::after{
  content:'';
  position:absolute;
  left:-22%; right:-22%; top:-85%; bottom:-85%;
  z-index:-1;
  opacity:0.6;
  /* An open stroke, not a closed loop — sweeps one full turn back to its
     own start, then keeps going and flares outward (larger radius) for
     the overlap, so the tail is visibly outside the ring instead of
     retracing it — otherwise the two ends sit on top of each other and
     just look like a closed circle. */
  /* Two SVG arcs, not hand-picked curves: a near-full ellipse (350° sweep,
     leaving a small real gap) plus a second, larger-radius arc that
     continues past the gap and crosses over the start — unambiguously
     open, with the ends visibly overlapping rather than retracing. */
  /* Same open-ring-plus-crossing-tail geometry, roughed up so it reads as
     a marker stroke instead of a clean vector line: an irregular
     stroke-dasharray breaks up the main sweep's edge, and the tail is
     thinner/fainter than the main pass, like a lighter second stroke. */
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2090'%3E%3Cpath%20d='M26,27%20A85,37%200%201,1%2020,32'%20fill='none'%20stroke='%23B98072'%20stroke-width='6'%20stroke-linecap='round'%20stroke-dasharray='19,2,11,3,24,2,8,4,15,3,20,2'/%3E%3Cpath%20d='M20,32%20A95,44%200%200,1%2053,7'%20fill='none'%20stroke='%23B98072'%20stroke-width='3.5'%20stroke-linecap='round'%20opacity='0.75'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events:none;
}

/* Hand-drawn underline emphasis — same clay stroke color and two-pass
   (rough main stroke + fainter offset second pass) technique as .accent
   above, but a wavy underline instead of a circle. For inline use inside
   raw hero_title_html strings, since shortcodes don't run there. */
.accent-underline{
  position:relative;
  z-index:0;
  display:inline-block;
}
.accent-underline::after{
  content:'';
  position:absolute;
  left:-4%; right:-4%;
  bottom:-0.16em;
  height:0.34em;
  z-index:-1;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2032'%3E%3Cpath%20d='M4,16%20C30,6%2055,26%2080,14%20C110,2%20140,24%20165,10%20C180,4%20190,14%20196,10'%20fill='none'%20stroke='%23B98072'%20stroke-width='5'%20stroke-linecap='round'%20stroke-dasharray='17,2,9,3,21,2,7,4,13,3'/%3E%3Cpath%20d='M6,21%20C35,13%2060,29%2085,19%20C115,9%20145,27%20170,15'%20fill='none'%20stroke='%23B98072'%20stroke-width='3'%20stroke-linecap='round'%20opacity='0.7'/%3E%3C/svg%3E") no-repeat left bottom / 100% 100%;
  pointer-events:none;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--moss-deep);
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.eyebrow::before{ content:''; width:20px; height:1px; background:var(--moss-deep); display:inline-block; }
h1{
  font-family:'Fraunces', serif; font-weight:450; font-optical-sizing:auto;
  font-size:clamp(1.9rem, 3.2vw, 2.6rem); line-height:1.24; letter-spacing:-0.005em;
  color:var(--ink); margin-bottom:22px;
}
.hero p.lede{ font-size:1.02rem; color:#3d453f; max-width:48ch; margin-bottom:14px; }
.hero p.sub{ font-size:0.92rem; color:var(--grey); max-width:48ch; margin-bottom:30px; }
.hero-actions{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.btn-primary{
  background:var(--ink); color:var(--paper-warm); text-decoration:none;
  padding:13px 24px; border-radius:2px; font-size:0.92rem; font-weight:500;
  display:inline-block;
}
.btn-ghost{ text-decoration:none; font-size:0.9rem; color:var(--ink); opacity:0.75; border-bottom:1px solid currentColor; padding-bottom:2px; }

.window-frame{
  position:relative; aspect-ratio:4/5; border-radius:6px;
  background:linear-gradient(165deg, var(--forest) 0%, var(--forest-line) 100%);
  overflow:hidden; box-shadow:0 24px 60px -20px rgba(22,33,28,0.35);
}
.window-frame .glow{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 38%, rgba(91,122,107,0.5) 0%, rgba(91,122,107,0.0) 62%);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:0.6; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.05); }
}
.window-frame .ring{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  width:38%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(247,240,227,0.3);
}
.window-frame .caption{
  position:absolute; left:24px; bottom:24px; right:24px;
  color:rgba(247,240,227,0.78); font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; letter-spacing:0.03em; display:flex; justify-content:space-between;
}
@media (prefers-reduced-motion: reduce){ .window-frame .glow{ animation:none; } }

.section{ padding:80px 0; }
.section-forest{ background:var(--forest); color:var(--paper-warm); }
.section-head{ max-width:60ch; margin-bottom:44px; }
.section-head .eyebrow{ color:var(--clay); }
.section-forest .eyebrow{ color:#D8B8A8; }
.section-forest .eyebrow::before{ background:#D8B8A8; }
h2{ font-family:'Fraunces', serif; font-weight:450; font-size:clamp(1.5rem,2.2vw,1.9rem); line-height:1.28; margin-bottom: 12px; }

/* Body copy: content authored in Markdown (via ox-hugo) renders as plain
   <p> — style it the same as the mockup's .body-text without requiring a
   class on every paragraph. */
.section p, .body-text{ font-size:0.98rem; color:#3d453f; max-width:64ch; }
.section p + p, .body-text + .body-text{ margin-top:14px; }
.section-forest p{ color:rgba(247,240,227,0.82); }

/* Long-form article pages (Impressum, Datenschutz, Über mich, Themen, FAQ)
   — the shared .Content markdown output had no heading-to-paragraph
   spacing at all (h2 only had margin-bottom, no margin-top), so sections
   ran straight into the preceding paragraph. Scoped to .prose rather than
   h2/p globally so it doesn't touch the hero/card sections, which have
   their own short-blurb styling. */
.prose h2{ margin-top:40px; }
.prose p{ text-align:justify; hyphens:auto; }
/* .btn-primary defaults to a dark-ink fill, which nearly vanishes against
   this section's own dark forest background — invert it here. */
.section-forest .btn-primary{ background:var(--paper-warm); color:var(--moss-deep); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(31,42,36,0.1); border:1px solid rgba(31,42,36,0.1); margin-top:8px; }
.card{ background:var(--paper); padding:30px 28px; text-decoration:none; display:block; }
.card h3{ font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; margin-bottom:10px; }
.card p{ font-size:0.9rem; color:#454d47; max-width:none; }

.timeline{ display:flex; flex-direction:column; gap:0; margin-top:24px; }
.tl-row{
  display:grid; grid-template-columns:88px 1fr; gap:26px;
  padding:22px 0; border-top:1px solid rgba(31,42,36,0.12);
}
.tl-row:last-child{ border-bottom:1px solid rgba(31,42,36,0.12); }
.tl-time{ font-family:'IBM Plex Mono', monospace; font-size:0.82rem; color:var(--moss-deep); }
.tl-row h4{ font-family:'Fraunces', serif; font-size:0.98rem; font-weight:600; margin-bottom:5px; }
.tl-row p{ font-size:0.88rem; color:#454d47; max-width:56ch; }

.cost-table{ margin-top:8px; border:1px solid rgba(31,42,36,0.12); border-radius:4px; overflow:hidden; }
.cost-row{ display:grid; grid-template-columns:1fr auto; gap:20px; padding:18px 24px; font-size:0.94rem; background:var(--paper-warm); }
.cost-row + .cost-row{ border-top:1px solid rgba(31,42,36,0.1); }
.cost-row .val{ font-family:'IBM Plex Mono', monospace; color:var(--moss-deep); }
/* the explanatory note paragraph directly follows .cost-table in the markup */
.cost-table + p{ font-size:0.85rem; color:var(--grey); margin-top:14px; max-width:60ch; }

/* Plain markdown tables (e.g. Impressum, Datenschutz) — goldmark emits a
   bare <table>, no wrapper class to hook into. Styled to match
   .cost-table/.tl-row's existing convention (horizontal dividers only, no
   boxed grid) rather than inventing a separate look. border-collapse:
   separate (not collapse) so the outer border-radius actually clips —
   collapsed borders don't reliably respect radius across browsers. Width
   is auto rather than 100% so a short table doesn't stretch the full
   content column. */
table{
  width:auto;
  max-width:100%;
  margin-top:8px;
  border-collapse:separate;
  border-spacing:0;
  font-size:0.94rem;
  border:1px solid rgba(31,42,36,0.12);
  border-radius:4px;
  overflow:hidden;
}
th, td{
  text-align:left;
  padding:18px 24px;
  vertical-align:top;
  background:var(--paper-warm);
}
tr + tr > td, tr + tr > th{ border-top:1px solid rgba(31,42,36,0.1); }
th{
  font-family:'Fraunces', serif;
  font-weight:600;
}
td:first-child, th:first-child{ min-width:200px; color:var(--grey); }

.kontakt-block{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.kontakt-block dl{ display:grid; grid-template-columns:auto 1fr; gap:10px 20px; font-size:0.92rem; }
.kontakt-block dt{ color:var(--grey); }
.kontakt-block dd{ }

.contact-form{ max-width:520px; display:flex; flex-direction:column; gap:20px; }
.contact-form .form-row{ display:flex; flex-direction:column; gap:8px; }
.contact-form label{ font-size:0.88rem; color:var(--ink); }
.contact-form label .optional{ color:var(--grey); font-weight:400; }
.contact-form input, .contact-form textarea{
  font-family:'Inter', sans-serif; font-size:0.95rem; color:var(--ink);
  background:var(--paper-warm); border:1px solid rgba(31,42,36,0.18);
  border-radius:2px; padding:11px 14px; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--moss-deep);
}
.contact-form button{ align-self:flex-start; border:none; cursor:pointer; }

footer{ background:var(--forest); color:rgba(247,240,227,0.6); padding:40px 0; font-size:0.82rem; }
footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
footer a{ text-decoration:none; opacity:0.85; }
footer a:hover{ opacity:1; }

:focus-visible{ outline:2px solid var(--moss-deep); outline-offset:3px; }

/* Homepage condensed teaser bands (2026-09-16) — reuse existing tokens,
   additive only, no change to the full subpages' own layouts. */

.wave-divider{ display:block; line-height:0; margin:-1px 0; }
.wave-divider svg{ width:100%; height:44px; display:block; }
.wave-divider.flip{ transform:scaleY(-1); }

.portrait-block{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:56px; align-items:center; }
.portrait-img{ width:100%; max-width:340px; height:auto; border-radius:6px; object-fit:cover; box-shadow:0 24px 60px -20px rgba(22,33,28,0.25); }
.teaser-ueber .section-head{ margin-bottom:16px; }
.teaser-ueber p{ margin-bottom:18px; }

.teaser-band{ position:relative; padding:64px 0; color:var(--paper-warm); overflow:hidden; }
.teaser-band-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:grayscale(0.15) saturate(0.9) brightness(0.82);
}
/* Forest-tinted wash (not flat gray/black — that read as "graveyard").
   ::before does the color tint, ::after the legibility darkening. */
.teaser-band-bg::before{ content:''; position:absolute; inset:0; background:var(--forest); opacity:0.32; mix-blend-mode:color; }
.teaser-band-bg::after{ content:''; position:absolute; inset:0; background:rgba(22,33,28,0.4); }
.teaser-band .wrap{ position:relative; z-index:1; }
.teaser-band .eyebrow{ color:#D8B8A8; }
.teaser-band .eyebrow::before{ background:#D8B8A8; }
.teaser-band h2{ color:var(--paper-warm); }
.teaser-band p{ color:rgba(247,240,227,0.85); }
.list-header-band{ padding:168px 0 168px; min-height:560px; display:flex; align-items:center; }
.list-header-band .wave-cutoff{ position:absolute; left:0; right:0; bottom:-1px; z-index:2; }
.list-header-band .wave-cutoff svg{ width:100%; height:48px; display:block; }
.grid-3.compact{ background:transparent; border:none; gap:14px; }
.card.compact{ background:rgba(247,240,227,0.94); padding:20px 22px; border-radius:3px; }
.card.compact h3{ margin-bottom:0; font-size:0.98rem; color:var(--ink); }

.kosten-line{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.kosten-line h2{ margin-bottom:0; }

.cta-band{ text-align:center; }
.cta-band .wrap{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.cta-band h2{ color:var(--paper-warm); max-width:32ch; }

@media (max-width:820px){
  .wrap{ padding:0 36px; }
  .hero .wrap{ grid-template-columns:1fr; }
  h1{ margin-bottom:30px; }
  .grid-3{ grid-template-columns:1fr; }
  nav .links{ display:none; }
  .nav-toggle{ display:flex; }
  .window-frame{ order:-1; max-width:320px; margin:0 auto; }
  .kontakt-block{ grid-template-columns:1fr; }
  .portrait-block{ grid-template-columns:1fr; gap:28px; }
  .portrait-img{ max-width:280px; margin:0 auto; }
}