/* coaching-in-berlin.net
   Generated by build.py; edit the builder, not this file.
   Mobile first: every rule here is the phone layout, media queries add width. */

:root {
  --blue: #1004b7;
  --coral: #e76774;
  --ink: #17172b;
  --bg: #fbfaf7;
  --card: #ffffff;
  --line: #e4e0d6;
  --muted: #5d5d72;
  --radius: 20px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --measure: 34rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  /* The fixed action bar must never cover the last line of the page. */
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* Carrier for the SVG filter; kept in flow-free 0x0 rather than display:none,
   which would stop Safari from resolving filter: url(). */
.fx { position: absolute; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--coral); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* --- header ------------------------------------------------------------- */

.head {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-direction: column; gap: .5rem;
  padding: .85rem var(--pad) .6rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { text-decoration: none; color: var(--blue); line-height: 1.2; }
.brand-name { display: block; font-weight: 650; letter-spacing: -.015em; font-size: 1.0625rem; }
.brand-role { display: block; color: var(--muted); font-size: .75rem; letter-spacing: .04em; }

.nav ul {
  display: flex; gap: 1.15rem; margin: 0; padding: 0; list-style: none;
  /* On a phone the menu scrolls sideways instead of hiding behind a burger --
     no JavaScript, and every item stays one tap away. */
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: block; padding: .3rem 0; text-decoration: none; white-space: nowrap;
  font-size: .9375rem; font-weight: 500; color: var(--ink);
  border-bottom: 2px solid transparent; scroll-snap-align: start;
}
.nav a:hover { color: var(--blue); }
.nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--coral); }

/* --- hero --------------------------------------------------------------- */

.hero { padding: 2.5rem var(--pad) 1rem; }
.hero-kicker {
  margin: 0 0 .9rem; font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--coral);
}
.hero-title {
  margin: 0 0 1.1rem;
  font-size: clamp(2.1rem, 9vw, 4.25rem);
  line-height: 1.04; letter-spacing: -.03em; font-weight: 680;
  color: var(--blue); text-wrap: balance;
}
.hero-title em { font-style: normal; color: var(--ink); }
.hero-lead { margin: 0 0 1.75rem; max-width: var(--measure); font-size: 1.125rem; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

/* The coral blob of the illustrations, echoed behind the portrait. It has to be
   a separate layer: the photo is an opaque JPEG, so a background on the <img>
   itself would never be visible. */
.hero-figure { position: relative; margin: 2.25rem 0 0; isolation: isolate; }
.hero-figure::before {
  content: ""; position: absolute; z-index: -1;
  inset: -5% -7% -4% 14%;
  background: var(--coral);
  border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
  opacity: .9;
}
.hero-figure img {
  border-radius: var(--radius);
  /* The portrait is upright 2:3 and centred, so only height gets cropped;
     bias the window upwards to trim floor rather than face. */
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%;
  width: 100%;
}

.btn {
  display: inline-block; padding: .8rem 1.35rem; border-radius: 999px;
  background: var(--blue); color: #fff; text-decoration: none;
  font-weight: 600; font-size: .9375rem; border: 2px solid var(--blue);
  transition: transform .18s ease, background-color .18s ease;
}
.btn:hover { background: #0d0393; color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--blue); }
.btn-ghost:hover { background: var(--blue); color: #fff; }
.btn-light { background: #fff; color: var(--blue); border-color: #fff; }
.btn-light:hover { background: #fff; color: var(--coral); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline:hover { background: #fff; color: var(--blue); border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* --- cards -------------------------------------------------------------- */

.cards { display: grid; gap: 1.25rem; padding: 3rem var(--pad); }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.4rem 1.75rem;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16,4,183,.09); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card-art { margin: -.5rem 0 1rem; }
.card-art img { height: 9.5rem; width: auto; object-fit: contain; }
.card-kicker {
  margin: 0 0 .2rem; font-size: .6875rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--coral);
}
.card-title {
  margin: 0 0 .7rem; font-size: 1.5rem; letter-spacing: -.02em;
  font-weight: 650; color: var(--blue);
}
.card-body p { margin: 0 0 .9rem; color: var(--muted); }
.card-link {
  margin-top: auto; font-weight: 600; font-size: .9375rem;
  text-decoration: none; color: var(--blue);
}
.card-link:hover span { padding-left: .25rem; }
.card-link span { transition: padding-left .18s ease; }

/* --- page heads --------------------------------------------------------- */

.pagehead { padding: 2.5rem var(--pad) 0; }
.pagehead-title {
  margin: 0; font-size: clamp(2rem, 8vw, 3.5rem); line-height: 1.05;
  letter-spacing: -.03em; font-weight: 680; color: var(--blue); text-wrap: balance;
}
.pagehead-art { margin: 1.5rem 0 0; }
.pagehead-art img { width: min(11rem, 45%); }
.pagehead-photo { margin: 1.75rem 0 0; }
.pagehead-photo img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; width: 100%;
}

/* --- about page (title, text, photo and panel as one layout) ----------- */

/* On mobile .about-main/.about-side are display:contents wrappers: their
   children (title, body text, photo, panel) become direct items of .about
   so they can be put in reading order (title, photo, text, panel) even
   though document order is (title, text, then photo, panel). At desktop
   width (see media query) they switch back to being real two real
   columns, each with its own internal flow, so the photo's height never
   pushes the body text down. */
.about { display: flex; flex-direction: column; padding: 2.5rem var(--pad) 3rem; }
.about-main, .about-side { display: contents; }
.about .pagehead-text { order: 1; }
.about .pagehead-photo { order: 2; }
.about .layout-main { order: 3; margin-top: 2.25rem; }
.about .panel { order: 4; margin-top: 1.25rem; }

/* --- body layout -------------------------------------------------------- */

.layout { display: grid; gap: 2.5rem; padding: 2.25rem var(--pad) 3rem; }
.layout-main { min-width: 0; }
.sec + .sec { margin-top: 2.25rem; }
.sec-title {
  margin: 0 0 .75rem; font-size: 1.375rem; line-height: 1.25;
  letter-spacing: -.015em; font-weight: 650; color: var(--blue);
  scroll-margin-top: 6rem;
}
.sec-title .sub {
  display: block; font-size: .8125rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--coral); margin-top: .35rem;
}
.prose { margin: 0 0 1rem; max-width: var(--measure); }
.prose:last-child { margin-bottom: 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; max-width: var(--measure); }
.bullets { margin: 0 0 1rem; padding: 0; list-style: none; max-width: var(--measure); }
.bullets li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 999px; background: var(--coral);
}

/* --- highlight panel ("Coaching hilft:") -------------------------------- */

.panel {
  background: var(--blue); color: #fff; border-radius: var(--radius);
  padding: 1.75rem 1.5rem; align-self: start;
}
.panel-title {
  margin: 0 0 1.1rem; font-size: 1.25rem; font-weight: 650;
  letter-spacing: -.01em; color: #fff;
}
.panel-list { margin: 0; padding: 0; list-style: none; }
.panel-list li {
  position: relative; padding-left: 1.4rem; margin-bottom: .7rem;
  font-size: 1rem; line-height: 1.5;
}
.panel-list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .45rem; height: .45rem; border-radius: 999px; background: var(--coral);
}
.panel-p { margin: 1.1rem 0 0; color: rgba(255,255,255,.85); font-size: .9375rem; }
.panel a { color: #fff; }

/* --- infos -------------------------------------------------------------- */

.infogrid { display: grid; gap: 1rem; padding: 2rem var(--pad) 3rem; }
.info {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.35rem 1.3rem;
}
.info-title {
  margin: 0 0 .55rem; font-size: 1.0625rem; font-weight: 650;
  letter-spacing: .01em; color: var(--blue);
}
.info .prose { font-size: 1rem; }

/* --- wide figure -------------------------------------------------------- */

.wide { margin: 0; padding: 0 0 3rem; }
.wide img { width: 100%; }
.wide figcaption {
  padding: .7rem var(--pad) 0; font-size: .8125rem; color: var(--muted);
}

/* --- closing call to action -------------------------------------------- */

.cta {
  background: var(--blue); color: #fff;
  padding: 3rem var(--pad); margin: 0;
}
.cta-title {
  margin: 0 0 .75rem; font-size: clamp(1.5rem, 6vw, 2.25rem);
  line-height: 1.15; letter-spacing: -.02em; font-weight: 680; text-wrap: balance;
}
.cta-text { margin: 0 0 1.6rem; max-width: 32rem; color: rgba(255,255,255,.85); }
.cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

/* --- legal -------------------------------------------------------------- */

.legal { padding: 1.75rem var(--pad) 3.5rem; max-width: 48rem; }
.legal h2 {
  margin: 2.75rem 0 .8rem; font-size: 1.5rem; letter-spacing: -.02em;
  font-weight: 650; color: var(--blue); scroll-margin-top: 6rem;
}
.legal h3 {
  margin: 2rem 0 .6rem; font-size: 1.0625rem; font-weight: 650;
  color: var(--ink); scroll-margin-top: 6rem;
}
.legal p, .legal li { font-size: .9375rem; }
.legal p { margin: 0 0 .8rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal li { margin-bottom: .35rem; }
.legal a { overflow-wrap: anywhere; }

/* --- footer ------------------------------------------------------------- */

.foot { border-top: 1px solid var(--line); padding: 2.5rem var(--pad); }
.foot-kicker {
  margin: 0 0 .5rem; font-size: .6875rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--coral);
}
.foot-contact { margin: 0 0 1.75rem; font-size: 1.25rem; font-weight: 600; line-height: 1.5; }
.foot-contact a { text-decoration: none; }
.foot-contact a:hover { text-decoration: underline; }
.foot-meta { margin: 0; font-size: .8125rem; color: var(--muted); }

/* --- mobile action bar -------------------------------------------------- */

.actionbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 20px rgba(23,23,43,.08);
}
.actionbar a {
  padding: 1rem .5rem; text-align: center; text-decoration: none;
  font-weight: 600; font-size: .9375rem;
}
.actionbar-call { background: var(--blue); color: #fff; }
.actionbar-mail { background: #fff; color: var(--blue); }
.actionbar-call:hover, .actionbar-mail:hover { color: var(--coral); }

/* --- wider screens ------------------------------------------------------ */

@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .card-art img { height: 11rem; }
  .infogrid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

@media (min-width: 60rem) {
  body { padding-bottom: 0; }
  .actionbar { display: none; }
  .head {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 2rem; padding-block: 1.15rem;
  }
  .nav ul { gap: 1.9rem; overflow: visible; }
  .head, .hero, .cards, .pagehead, .layout, .about, .infogrid, .cta > *,
  .foot-inner, .legal, .wide figcaption {
    margin-inline: auto; max-width: 76rem; width: 100%;
  }
  .cta { padding-inline: 0; }
  .cta > * { padding-inline: var(--pad); }
  .hero {
    display: grid; grid-template-columns: 1.05fr .95fr;
    align-items: center; gap: 3.5rem; padding-block: 4.5rem 2rem;
  }
  .hero-figure { margin: 0; }
  .hero-figure img { aspect-ratio: 1 / 1; }
  .pagehead {
    display: grid; grid-template-columns: 1fr auto; align-items: end;
    gap: 2.5rem; padding-top: 4rem;
  }
  .pagehead-plain { grid-template-columns: 1fr; }
  .pagehead-art { margin: 0; }
  .pagehead-art img { width: 13rem; }
  .pagehead-photo { margin: 0; width: 22rem; }
  .layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4rem; }
  .panel { position: sticky; top: 6.5rem; padding: 2rem 1.85rem; }
  /* Back to two real columns (instead of the mobile display:contents flat
     list): about-main and about-side each get their own vertical flow, so
     the title+text column is never stretched to the photo's height. */
  .about {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 0 4rem; padding-top: 4rem;
  }
  .about-main, .about-side { display: block; }
  .about .layout-main { margin-top: 2.25rem; }
  .about .panel { margin-top: 1.75rem; }
  .infogrid { grid-template-columns: repeat(3, 1fr); }
  .wide img { max-height: 30rem; object-fit: cover; }
}

@media (min-width: 90rem) {
  .hero { gap: 5rem; }
}

/* --- dark scheme -------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #100f1c; --ink: #ecebf5; --card: #1a1930;
    --line: #2c2b46; --muted: #a8a6c2; --blue: #8f8bff; --coral: #ff8f9c;
  }
  .hero-figure img { background: linear-gradient(150deg, var(--coral) 0%, #6b3c46 100%); }
  .panel, .cta { background: #1f1d3d; }
  .btn { background: var(--blue); border-color: var(--blue); color: #100f1c; }
  .btn:hover { background: #a7a3ff; color: #100f1c; }
  .btn-ghost { background: transparent; color: var(--blue); }
  .btn-light { background: var(--blue); color: #100f1c; border-color: var(--blue); }
  .actionbar-mail { background: var(--card); color: var(--blue); }
  .actionbar-call { background: var(--blue); color: #100f1c; }
  .foot-contact a, .panel a { color: var(--blue); }
  /* Blue strokes on a near-black card -> repaint them white (see LINE_FILTER). */
  .card-art img, .pagehead-art img { filter: url(#lines-white); }
}

@media print {
  .head, .nav, .actionbar, .cta, .skip { display: none; }
  body { background: #fff; color: #000; padding: 0; }
}