/* =====================================================================
   enhance.css — visual refinements layered on top of combined.css.
   Loaded AFTER the legacy theme stylesheet, so these rules win by source
   order. Nothing here changes the brand (blue #00519e, Crimson Text
   headings); it only adds spacing, hover/focus states and polish.
   Remove this one <link> to revert entirely.
   ===================================================================== */

:root {
  --accent: #00519e;
  --accent-dark: #013b73;
  --ink: #34404a;
  --hairline: #e6e8eb;
}

/* ---------------------------------------------------------------------
   1. Desktop navigation — the main ask: it was squished.
   Scoped to .desknav so the mobile sidenav is left alone.
   --------------------------------------------------------------------- */
.menu {
  height: auto;                 /* was a fixed 2em */
  min-height: 3.6em;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  box-shadow: 0 1px 0 var(--hairline), 0 6px 16px rgba(0, 0, 0, 0.05);
}

.desknav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
}

.desknav li {
  float: none;                  /* drop the legacy float, let flex space it */
}

.desknav a {
  padding: 0.6em 1.05em;        /* real horizontal breathing room */
  margin: 0;
  border-radius: 7px;
  line-height: 1.1;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.desknav a:hover {
  color: var(--accent);
  background-color: rgba(0, 81, 158, 0.07);
}

/* Animated underline indicator for hover + current page. */
.desknav a::after {
  content: "";
  position: absolute;
  left: 1.05em;
  right: 1.05em;
  bottom: 0.5em;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.desknav a:hover::after,
.desknav a.currentpage::after {
  transform: scaleX(1);
}

.desknav a.currentpage {
  color: var(--accent);
  font-weight: 600;
  background-color: rgba(0, 81, 158, 0.06);
}

/* ---------------------------------------------------------------------
   2. Call-to-action buttons (.more) — the legacy hover was empty.
   --------------------------------------------------------------------- */
a.more,
.more,
a.moreblack,
a.morelight {
  border-radius: 4px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}

a.more:hover,
.more:hover {
  background-color: var(--accent-dark);
  border-color: #fff;
  box-shadow: 0 6px 16px rgba(0, 81, 158, 0.28);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   3. Service cards (.pic) — softer border, lift on hover.
   --------------------------------------------------------------------- */
.pic {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pic:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.11);
}

a.picmore {
  transition: background-color 0.25s ease;
}

a.picmore:hover {
  background: var(--accent-dark);
}

/* The online-coaching "skillz" tiles get the same soft treatment. */
.skillz {
  border-radius: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.skillz:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
}

/* ---------------------------------------------------------------------
   4. Keyboard accessibility — visible focus rings (theme had none).
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.more:focus-visible,
.desknav a:focus-visible {
  outline: 3px solid rgba(0, 81, 158, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Anchor jumps shouldn't hide under the sticky nav bar. */
html {
  scroll-padding-top: 5em;
  /* Defensive guard against accidental horizontal overflow (e.g. long
     unbreakable content) on narrow screens. `clip` stops the overflow
     without creating a scroll container, so `position: sticky` on the nav
     keeps working (unlike `overflow-x: hidden`). */
  overflow-x: clip;
}

/* Long German compounds (e.g. "Kennenlerngespräch") must never force
   horizontal overflow on narrow screens — let headings and body copy break. */
.headl2,
.li-text,
.re-text,
.mitte,
.title h1,
.title h2 {
  overflow-wrap: break-word;

}

/* ---------------------------------------------------------------------
   5. Mobile fixes — hero heading was overflowing the right edge.
   --------------------------------------------------------------------- */
@media screen and (max-width: 60em) {
  .half {
    width: 100% !important;
  }
  .title h1,
  .title h2 {
    font-size: 6.6vw;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

@media screen and (max-width: 480px) {
  .title h1,
  .title h2 {
    font-size: 7.4vw;
  }
  /* Stack the two hero CTAs cleanly instead of letting them crowd. */
  .title a.more {
    display: block;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   6. Respect prefers-reduced-motion — kill the scroll-in animations,
   transitions and hover lifts, and make sure nothing stays hidden.
   The IntersectionObserver still adds `.visible`, so content shows;
   we only remove the motion.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hidden {
    opacity: 1 !important;
  }
  .pic:hover,
  .skillz:hover,
  a.more:hover,
  .more:hover {
    transform: none !important;
  }
}

/* =====================================================================
   7. "Wow" moments — bigger first-impression polish. Still on-brand;
   every effect degrades gracefully and is disabled under reduced-motion
   by section 6 above.
   ===================================================================== */

/* 7a. Hero depth: a soft scrim behind the text so headlines read as
   premium and legible over any background image, plus keep content
   above the overlay. */
.parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(2, 9, 25, 0.72) 0%,
      rgba(2, 9, 25, 0.34) 52%,
      rgba(2, 9, 25, 0.12) 100%
    ),
    linear-gradient(to top, rgba(2, 9, 25, 0.45), transparent 40%);
}
.parallax > .center {
  position: relative;
  z-index: 1;
}

/* 7b. Hero entrance: the title, list and CTA rise + fade in on load,
   lightly staggered. Runs once; no JS. */
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.parallax .title .toptitle,
.parallax .title h1,
.parallax .title h2,
.parallax .title ul,
.parallax .title p,
.parallax .title a.more {
  animation: heroRise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.parallax .title .toptitle {
  animation-delay: 0.05s;
}
.parallax .title h1,
.parallax .title h2 {
  animation-delay: 0.16s;
}
.parallax .title ul,
.parallax .title p {
  animation-delay: 0.3s;
}
.parallax .title a.more {
  animation-delay: 0.44s;
}

/* 7c. Unified, elegant scroll reveal. The legacy plugin used dated
   `zoomIn` / `flipInX`; redefine both to one smooth rise-in so every
   section feels intentional as it enters the viewport. */
@keyframes enhanceReveal {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animated.zoomIn,
.animated.flipInX {
  animation-name: enhanceReveal;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 7d. Service cards: gently zoom the photo on hover (clipped by the
   card's rounded overflow) — a classic premium micro-interaction. */
.pic {
  isolation: isolate;
}
.pic img {
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pic:hover img {
  transform: scale(1.06);
}

/* =====================================================================
   8. Landing-page lead form (.kg-form on /kennenlerngespraech.html).
   Clean, accessible styling for the Kennenlerngespräch enquiry form.
   Not wired yet — see the TODO in the fragment / CLAUDE.md.
   ===================================================================== */
/* Two-column layout (form + contact), independent of the legacy float
   grid. minmax(0,…) is essential — it stops grid/flex children from
   blowing the column out to their content's min-width. */
.kg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.kg-main {
  min-width: 0;
}
.kg-contact {
  min-width: 0;
  line-height: 1.55;
}
.kg-contact p {
  margin: 0 0 1em 0;
}
.kg-contact a {
  text-decoration: underline;
}
@media screen and (max-width: 750px) {
  .kg-layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

.kg-form {
  max-width: 100%;
}
.kg-field {
  margin-bottom: 0.9em;
}
.kg-field label {
  display: block;
  margin-bottom: 0.35em;
  font-weight: 600;
  color: var(--ink);
}
/* The legacy theme floats every <label> and stretches every <input> to
   width:100%/height:2.5em (content-box). Neutralise all of that inside the
   form so the flex/grid layout behaves. */
.kg-form label {
  float: none !important;
}
.kg-form input[type="text"],
.kg-form input[type="email"],
.kg-form input[type="tel"],
.kg-form textarea {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.7em 0.85em !important;
  border: 1px solid #cdd3da !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  font: inherit !important;
  color: var(--ink) !important;
}
.kg-form textarea {
  resize: vertical;
  min-height: 6.5em;
}
.kg-form input:focus,
.kg-form textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 81, 158, 0.18);
}
.kg-consent {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  margin: 1.2em 0;
  font-size: 0.95em;
}
/* The generic `input { width:100%; height:2.5em }` legacy rule turns the
   checkbox into a full-width block — force it back to a real checkbox. */
.kg-consent input[type="checkbox"] {
  width: 1.15em !important;
  height: 1.15em !important;
  min-height: 0 !important;
  margin: 0.15em 0 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
/* Undo the legacy label float and let the (long) label wrap normally. */
.kg-consent label {
  float: none !important;
  display: block;
  margin: 0 !important;
  min-width: 0;
  font-weight: normal;
}
.kg-submit {
  cursor: pointer;
}
.kg-note {
  font-size: 0.85em;
  color: #6c757d;
  margin-top: 0.8em;
}
/* Honeypot: visually hidden, off-screen, but present for bots to fill. */
.kg-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form error banner. Hidden by default (the `hidden` attribute); revealed by
   BaseLayout's script when kontakt.php bounces back with ?fehler=…. */
.form-error {
  margin: 0 0 1.2em 0;
  padding: 0.9em 1.1em;
  border-radius: 6px;
  border: 1px solid #e4b7b7;
  background: #fbeaea;
  color: #8a1f1f;
  font-weight: 600;
  text-align: left;
}
.form-error[hidden] {
  display: none;
}

/* =====================================================================
   8. Footer — a richer, cohesive dark footer to replace the flat legacy
   gray. The three content columns are authored as Markdown in
   src/content/footer/*.md (Footer.astro globs them in); their `##`
   headings become the column titles. This section only restyles the
   existing footer markup, so removing it reverts to the plain footer.
   ===================================================================== */
:root {
  --footer-bg-top: #202b38;
  --footer-bg-bottom: #10161d;
  --footer-fg: #dfe4ea;
  --footer-muted: #9aa6b2;
}

footer {
  background: linear-gradient(
    165deg,
    var(--footer-bg-top),
    var(--footer-bg-bottom)
  );
  color: var(--footer-fg);
  border-top: 3px solid var(--accent);
  padding-top: 3.5em;
}

/* Columns: a responsive auto-fit grid instead of the legacy left-floats.
   Scoped to the direct .foo child of <footer> so the copyright bar's own
   .center.foo (nested in .copyfoo) is left alone. */
footer > .center.foo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5em 3em;
  align-items: start;
}
footer .foot {
  float: none !important;
  margin: 0 0 1em 0;
}

/* Column titles come from the `##` heading in each Markdown file. Fully
   override the base 300% serif h2 and reshape into a compact uppercase
   eyebrow with a short accent underline. */
footer .foot h2 {
  font-family: inherit;
  font-size: 0.95em !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 1em 0 !important;
  padding: 0 0 0.7em 0 !important;
  border: none;
  position: relative;
}
footer .foot h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.2em;
  height: 2px;
  background: var(--accent);
}

footer .foot,
footer .foot p {
  line-height: 1.7;
  color: var(--footer-fg);
}
footer .foot p {
  margin: 0;
}

/* Any list column (e.g. Rechtliches): drop bullets, space the links out. */
footer .foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer .foot li {
  margin: 0 0 0.6em 0;
}

footer a {
  color: var(--footer-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
footer a:hover,
footer a:focus-visible {
  color: #ffffff;
  border-bottom-color: var(--accent);
}

/* Bottom bar: copyright on the left, social icons on the right. */
.copyfoo {
  background: rgba(0, 0, 0, 0.35);
  color: var(--footer-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.1em 0;
}
.copyfoo a {
  color: var(--footer-muted);
}
.copyfoo .center.foo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
}
.copyfoo .social {
  float: none;
  margin: 0;
}
.copyfoo .ico {
  display: inline-flex;
  gap: 0.6em;
}
.copyfoo .ico a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease, transform 0.15s ease;
}
.copyfoo .ico a:hover {
  background: var(--accent);
  transform: translateY(-2px);
}
.copyfoo img {
  width: 18px;
  height: 18px;
}

/* Back-to-top: turn the tiny fixed arrow into a real circular button. The
   arrow image is left un-inverted (sits on a light disc) so it stays legible
   whatever the source PNG's colour. */
.oben {
  width: auto;
}
.oben a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oben a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.oben img {
  width: 18px;
  height: auto;
}

/* Motion-sensitive users: drop the footer hover lifts. */
@media (prefers-reduced-motion: reduce) {
  .copyfoo .ico a:hover,
  .oben a:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   9. Coaching-flyer teaser (homepage) — makes the portrait flyer cover
   read as a clickable card. Placeholder image for now (see CLAUDE.md).
   --------------------------------------------------------------------- */
.flyer-teaser {
  display: inline-block;
  margin-top: 1.2em;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.flyer-teaser img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}
.flyer-teaser:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .flyer-teaser {
    transition: none;
  }
  .flyer-teaser:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   10. 404 page (src/pages/404.astro) — friendly, centred error page.
   --------------------------------------------------------------------- */
.nf {
  text-align: center;
  padding-top: 1em;
  padding-bottom: 2em;
}
.nf-code {
  font-size: clamp(4.5rem, 18vw, 9rem);
  line-height: 1;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.15;
  margin: 0;
  letter-spacing: 0.05em;
}
.nf h1 {
  margin-top: 0.1em;
}
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  justify-content: center;
  margin: 1.6em 0 2.4em;
}
.nf h2 {
  font-size: 1.15rem;
  margin-bottom: 0.6em;
}
.nf-links {
  list-style: none;
  padding: 0;
  margin: 0 auto 2em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.4em;
  justify-content: center;
  max-width: 40em;
}
.nf-links a {
  font-weight: 600;
}
.nf-help {
  font-size: 0.95rem;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------
   11. Heading font fix — apply the brand's Crimson Text serif.
   The theme ships six Crimson Text faces and its docs call it the heading
   font, but no rule ever set a heading font-family, so every heading fell
   back to Roboto. Additionally the semibold faces shipped in /fonts were
   never declared (@font-face only covered 400 and 700). Register the
   semibold faces and point the display headings at Crimson Text. Font
   only — colours/sizes are unchanged.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Crimson Text';
  src: url('/fonts/crimsontext-semibold-webfont.woff2') format('woff2'),
       url('/fonts/crimsontext-semibold-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crimson Text';
  src: url('/fonts/crimsontext-semibolditalic-webfont.woff2') format('woff2'),
       url('/fonts/crimsontext-semibolditalic-webfont.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
.title h1,
.title h2,
.headl2,
.cont h1,
.cont h2,
.cont h3 {
  font-family: 'Crimson Text', Georgia, 'Times New Roman', serif;
  font-weight: 600;
}