/* ==========================================================================
   Psychotherapie Fauland — v3
   --------------------------------------------------------------------------
   Design thesis: people who open this site are looking for help and are often
   overwhelmed. The job is not to look pretty — it is to RELIEVE. That drives
   every decision below: one action per section, generous rest, no ornament,
   and copy that meets people in their own words before it names diagnoses.

   Sections:  1 Tokens · 2 Reset · 3 Typography · 4 Layout · 5 Header
              6 Hero · 7 Prompts · 8 Components · 9 Footer · 10 Utilities
   ========================================================================== */

@import url("fonts.css");

/* ==========================================================================
   1 — Tokens
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Rose is the client's own colour and stays the lead: whole bands of it,
     not an accent stripe. What changes from the original is only WHERE each
     value is allowed to appear. #f8c4cb is beautiful behind words and
     illegible as words (1.4:1 on white), so the family is graded by job:

       --rose-100  the client's exact colour — full-bleed surfaces
       --rose-200  same hue, seated — hairlines, markers, dark-ground type
       --rose-500  mid weight — hover fills, large display type
       --rose-700  4.9:1 on paper — the only rose allowed to carry copy

     Dusk blue comes from the water in the practice's own hero photograph and
     does one job: give the rose something to sit against. */
  --rose-50:   #fdf4f6;   /* faintest wash                                  */
  --rose-100:  #f8c4cb;   /* HER colour, exact — full bands, hero panel     */
  --rose-200:  #efa8b3;   /* rules, markers, type on dusk ground            */
  --rose-500:  #c4707f;   /* hover fills, large display type                */
  --rose-700:  #a85566;   /* rose as TYPE — the only one allowed on copy    */

  --night:      #16203a;   /* dusk water — counterweight, never the lead    */
  --night-soft: #253150;
  --paper:      #fcfbfa;
  --paper-warm: #f6f2ef;

  --ink:        #1b2133;
  --ink-soft:   #5b6376;
  --rule:       #e4e0dd;

  /* Aliases so component rules read by intent rather than by number */
  --rose:      var(--rose-500);
  --rose-ink:  var(--rose-700);
  --rose-wash: var(--rose-50);

  --focus:      #1b4ed8;

  /* --- Space -------------------------------------------------------------
     A wide scale. v3 spends space where v2 spends boxes: rest is the design. */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  /* --- Type --------------------------------------------------------------
     Fraunces carries warmth without sweetness; its soft optical axis keeps
     large sizes from feeling clinical. Karla underneath is plain but not
     anonymous. */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-xs:  clamp(0.8125rem, 0.8rem + 0.08vw, 0.875rem);
  --t-sm:  clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --t-md:  clamp(1.0625rem, 1.01rem + 0.26vw, 1.1875rem);
  --t-lg:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-xl:  clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --t-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
  --t-3xl: clamp(2.25rem, 1.6rem + 3.3vw, 4.5rem);

  --measure: 62ch;
  --wrap:    1120px;
  --gutter:  clamp(1.25rem, 5vw, 5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2 — Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--s-8);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--rose-ink); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--ink); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3 — Typography
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }

p { text-wrap: pretty; max-width: var(--measure); }
strong { font-weight: 600; }

.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* Small caps label. Earns its place by naming what a section IS — never used
   as decoration above a heading that already says the same thing. */
.label {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-ink);
}

.prose > * + * { margin-block-start: var(--s-4); }
.prose > * + :is(h2, h3) { margin-block-start: var(--s-7); }
.prose :is(h2, h3) + * { margin-block-start: var(--s-4); }

/* ==========================================================================
   4 — Layout
   ========================================================================== */

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
.wrap--tight { --wrap: 720px; }

.band { padding-block: clamp(var(--s-8), 11vw, var(--s-10)); }
.band--close { padding-block: clamp(var(--s-7), 8vw, var(--s-9)); }

/* Ground changes carry the rhythm instead of stacked cards. */
.band--warm  { background: var(--paper-warm); }

/* Her colour at full strength, edge to edge. Dark ink on #f8c4cb reaches
   9.7:1 — the same surface the original used, now with type that can
   actually be read on it. */
.band--rose { background: var(--rose-100); }
.band--rose .label { color: #7d3644; }
/* :not(.action) matters — a bare `.band--rose a` (0,1,1) outranks
   `.action--solid` (0,1,0) and would repaint button labels in link colour. */
.band--rose a:not(.action) { color: #7d3644; }
.band--rose a:not(.action):hover { color: var(--ink); }
.band--rose .lede { color: #4a3038; }
/* The quote attribution sits on her colour, so it needs the seated tone —
   --rose-500 on --rose-100 is only 2.3:1. */
.band--rose figcaption,
.band--rose .pull + figcaption { color: #7d3644; }
.band--rose .note { background: rgb(255 255 255 / 0.45); border-inline-start-color: #fff; }
.band--rose .rows,
.band--rose .row,
.band--rose .listing li { border-color: rgb(27 33 51 / 0.16); }

.band--wash { background: var(--rose-50); }

.band--night { background: var(--night); color: rgb(255 255 255 / 0.86); }
.band--night :is(h1, h2, h3) { color: #fff; }
.band--night a:not(.action) { color: var(--rose-200); }
.band--night a:not(.action):hover { color: #fff; }
.band--night .lede { color: rgb(255 255 255 / 0.74); }
/* --rose-700 is tuned for paper and drops to 3.2:1 on the dusk ground. */
.band--night .label { color: var(--rose-200); }
.band--night figcaption { color: var(--rose-200); }

.skip {
  position: absolute;
  inset-inline-start: var(--s-4);
  inset-block-start: -100%;
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 10px 30px -12px rgb(22 32 58 / 0.4);
}
.skip:focus { inset-block-start: var(--s-4); }

/* ==========================================================================
   5 — Header
   ========================================================================== */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgb(252 251 250 / 0.92);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.25rem;
}

.brand {
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
}
.brand span { display: block; font-family: var(--body); font-size: var(--t-xs);
               font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
               color: var(--ink-soft); }

.menu { display: flex; align-items: center; gap: var(--s-5); }

.menu__link {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: var(--s-2);
  border-block-end: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.menu__link:hover { color: var(--ink); border-block-end-color: var(--rose); }
.menu__link[aria-current="page"] { color: var(--ink); border-block-end-color: var(--rose); }

/* The contact link is the one action the whole site exists for — it never
   looks like the other menu items. */
.menu__cta {
  padding: var(--s-2) var(--s-5);
  background: var(--night);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease);
}
.menu__cta:hover { background: var(--rose-ink); color: #fff; }

.menu__toggle { display: none; }

@media (width < 60rem) {
  .menu--desktop { display: none; }
  .menu__toggle { display: block; position: relative; }

  .menu__toggle > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: var(--s-2);
    font-size: var(--t-sm); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink); padding: var(--s-2);
  }
  .menu__toggle > summary::-webkit-details-marker { display: none; }
  .menu__toggle > summary::after {
    content: ""; width: 0.5rem; height: 0.5rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s var(--ease);
  }
  .menu__toggle[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

  .menu__toggle .menu {
    position: absolute; inset-inline-end: 0; inset-block-start: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0; min-width: 14rem; padding: var(--s-3);
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0 24px 60px -24px rgb(22 32 58 / 0.35);
  }
  .menu__toggle .menu__link { padding: var(--s-3); border-block-end: 1px solid var(--rule); }
  .menu__toggle .menu__cta { margin-block-start: var(--s-3); text-align: center; }
}

/* ==========================================================================
   6 — Hero
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  isolation: isolate;
  background: var(--night);
}

.hero__media { grid-area: 1 / 1; position: relative; overflow: hidden; }

.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* A gradient rather than a flat scrim: the photo stays a photograph at the
   top and hands over to a readable ground where the words sit. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  /* Weighted toward the lower half, where the words actually sit. The earlier
     curve left the label sitting over a bright ridgeline at some crop heights
     and it washed out. The photo still reads as a photo up top. */
  background: linear-gradient(
    180deg,
    rgb(22 32 58 / 0.12) 0%,
    rgb(22 32 58 / 0.42) 35%,
    rgb(22 32 58 / 0.82) 68%,
    rgb(22 32 58 / 0.94) 100%);
}

.hero__body {
  grid-area: 1 / 1;
  z-index: 1;
  display: grid;
  align-content: end;
  padding-block: clamp(var(--s-8), 14vw, var(--s-10));
  color: #fff;
}

.hero--home .hero__media { min-height: clamp(30rem, 78vh, 46rem); }
.hero--page .hero__media { min-height: clamp(16rem, 34vh, 24rem); }
.hero--page .hero__body { padding-block: clamp(var(--s-7), 8vw, var(--s-8)); }

.hero h1 { color: #fff; max-width: 18ch; }

/* The lightest rose plus a soft shadow: the label sits above the headline,
   which on a bright crop can still be the lightest part of the photo. The
   shadow costs nothing on dark grounds and rescues it on pale ones. */
.hero .label {
  color: var(--rose-100);
  text-shadow: 0 1px 14px rgb(22 32 58 / 0.65);
}
.hero .lede { color: rgb(255 255 255 / 0.8); margin-block-start: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-start: var(--s-7); }

/* ==========================================================================
   7 — Prompts  — the signature block
   ========================================================================== */

/* The original lists diagnoses: "Angststörungen", "Somatoforme Störungen".
   Nobody searches for themselves that way. These are the sentences people
   actually arrive with; the clinical term sits underneath, so the page meets
   them first and stays professionally precise second. */

/* Fixed column counts, not auto-fit. With six entries auto-fit settles on
   four columns at desktop width and leaves two dead cells in the second row.
   3 and 2 both divide six exactly. */
.prompts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
  margin-block-start: var(--s-7);
}

@media (width < 62rem) { .prompts { grid-template-columns: repeat(2, 1fr); } }
@media (width < 34rem) { .prompts { grid-template-columns: 1fr; } }

.prompt {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.prompt:hover { background: var(--rose-wash); color: inherit; }

.prompt__quote {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 300;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

.prompt__term {
  margin-block-start: auto;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ==========================================================================
   8 — Components
   ========================================================================== */

/* --- Actions ------------------------------------------------------------ */

.action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.action::after { content: "→"; transition: transform 0.25s var(--ease); }
.action:hover::after { transform: translateX(3px); }

.action--solid { background: var(--paper); color: var(--night); }
.action--solid:hover { background: var(--rose); color: #fff; }

.action--line { border-color: rgb(255 255 255 / 0.4); color: #fff; }
.action--line:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); color: #fff; }

.action--ink { background: var(--night); color: #fff; }
.action--ink:hover { background: var(--rose-ink); color: #fff; }

.action--quiet { color: var(--rose-ink); padding-inline: 0; }
.action--quiet:hover { color: var(--ink); }

/* --- Two-column split --------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 6vw, var(--s-9));
  align-items: center;
}
.split--text-first > :first-child { order: -1; }
.split__media img { width: 100%; }

@media (width < 56rem) {
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .split__media { max-width: 24rem; }
}

/* --- Section head ------------------------------------------------------- */

.head { max-width: 34ch; }
.head .label + h2 { margin-block-start: var(--s-3); }
.head h2 + p { margin-block-start: var(--s-4); }

/* --- Definition rows ---------------------------------------------------- */

.rows { border-block-start: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: minmax(8rem, 15rem) 1fr;
  gap: var(--s-3) var(--s-7);
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--rule);
}
.row dt { font-weight: 600; font-size: var(--t-sm); }
.row dd { margin: 0; color: var(--ink-soft); }

@media (width < 40rem) { .row { grid-template-columns: 1fr; gap: var(--s-1); } }

/* --- Plain list --------------------------------------------------------- */

.listing li {
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--rule);
  max-width: var(--measure);
}
.listing li:first-child { border-block-start: 1px solid var(--rule); }

.listing--columns {
  columns: 2;
  column-gap: var(--s-8);
}
.listing--columns li { break-inside: avoid; max-width: none; }
@media (width < 40rem) { .listing--columns { columns: 1; } }

/* --- Q&A ---------------------------------------------------------------- */

.qa { border-block-start: 1px solid var(--rule); }
.qa__item { border-block-end: 1px solid var(--rule); }

.qa__item > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.qa__item > summary::-webkit-details-marker { display: none; }
.qa__item > summary:hover { color: var(--rose-ink); }
.qa__item > summary::after {
  content: "+";
  flex: none;
  font-family: var(--body);
  font-size: var(--t-lg);
  font-weight: 300;
  color: var(--rose-ink);
  transition: transform 0.25s var(--ease);
}
.qa__item[open] > summary::after { content: "−"; }

.qa__body { padding-block-end: var(--s-6); }
.qa__body > * + * { margin-block-start: var(--s-4); }

/* --- Pull quote --------------------------------------------------------- */

/* Given a whole band of its own. A quote squeezed beside other content is
   decoration; a quote with room around it is a pause. */
.pull {
  max-width: 24ch;
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 300;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.pull + figcaption {
  margin-block-start: var(--s-5);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
}

/* --- Contact ------------------------------------------------------------ */

.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-7); }
.contact__label { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.16em;
                  text-transform: uppercase; color: var(--ink-soft); margin-block-end: var(--s-2); }
.contact__value { font-family: var(--display); font-size: var(--t-lg); font-weight: 400; line-height: 1.3; }
.contact__value a { text-decoration: none; }
.contact__value a:hover { text-decoration: underline; }
address.contact__value { font-style: normal; }

.note {
  padding: var(--s-5) var(--s-6);
  background: var(--rose-wash);
  border-inline-start: 2px solid var(--rose);
  max-width: var(--measure);
}
.band--night .note { background: var(--night-soft); border-inline-start-color: var(--rose); }

figure.frame img { width: 100%; }
figure.frame figcaption { margin-block-start: var(--s-3); font-size: var(--t-xs); color: var(--ink-soft); }

/* ==========================================================================
   9 — Footer
   ========================================================================== */

.foot { background: var(--night); color: rgb(255 255 255 / 0.7); padding-block: var(--s-8) var(--s-6); }
.foot a { color: rgb(255 255 255 / 0.92); text-decoration-color: rgb(255 255 255 / 0.3); }
.foot a:hover { color: var(--rose); }

.foot__grid { display: flex; flex-wrap: wrap; gap: var(--s-7) var(--s-9); justify-content: space-between; }
.foot__grid h2 { font-family: var(--body); font-size: var(--t-xs); font-weight: 600;
                 letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose);
                 margin-block-end: var(--s-4); }
.foot__grid :is(p, address, li) { font-size: var(--t-sm); font-style: normal; }
.foot__grid li + li { margin-block-start: var(--s-2); }

.foot__base { margin-block-start: var(--s-8); padding-block-start: var(--s-5);
              border-block-start: 1px solid rgb(255 255 255 / 0.14);
              font-size: var(--t-xs); color: rgb(255 255 255 / 0.55); }

/* ==========================================================================
   10 — Utilities
   ========================================================================== */

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.stack-4 > * + * { margin-block-start: var(--s-4); }
.stack-5 > * + * { margin-block-start: var(--s-5); }
.stack-7 > * + * { margin-block-start: var(--s-7); }

/* --------------------------------------------------------------------------
   Reveal on scroll
   --------------------------------------------------------------------------
   A block rises 10 px and fades in as it enters the viewport. Everything here
   hangs off .has-reveal, which assets/js/reveal.js only sets once it knows it
   can bring the content back — so no script means nothing is ever hidden.

   The whole rule sits inside prefers-reduction-motion: no-preference. For a
   practice whose visitors may be anxious or overstimulated, motion is the
   first thing to drop when someone has asked the system for less of it.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .has-reveal .band .wrap > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }

  .has-reveal .band .wrap > .is-visible {
    opacity: 1;
    transform: none;
  }
}

@media print {
  /* Print never scrolls, so nothing would ever be revealed. */
  .has-reveal .band .wrap > * { opacity: 1; transform: none; }
}

@media print {
  .masthead, .foot, .hero__media, .skip, .action { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { padding-block: var(--s-5); }
  .band--night { background: #fff; color: #000; }
  .qa__body { display: block !important; }
}