/* theme.css — OPTIONAL, fully removable visual theme (PoC).
   -------------------------------------------------------------------------
   Purpose: make the PoC look a little warmer and more finished for the first
   client meeting. This layer is intentionally *additive only*:

     - It mostly re-colours Pico by overriding Pico's own CSS variables.
     - A few decorative rules add soft shadows, rounded corners and a serif
       heading font (all system fonts — no third-party / CDN, so still no
       consent banner needed).

   SAFE TO DELETE: remove this file and its <link> from the HTML pages and the
   site reverts to the plain Pico + custom.css look. Nothing else depends on it.
   Load order in the HTML: pico.min.css -> custom.css -> theme.css (this file
   last). Note: load order only breaks ties between rules of EQUAL specificity,
   so the colour overrides must match Pico's selector specificity — see the
   "selector specificity" note below.

   The palette is derived from the (preliminary) logo: warm taupe on cream
   (#897969 / #e4d8cc / #f7f6f4). Still a proposal to refine with the client. */

/* IMPORTANT — selector specificity:
   Pico v2 defines its colour variables under
   `:root:not([data-theme=dark]), [data-theme=light]` (specificity 0,2,0),
   NOT under a plain `:root` (0,1,0). A plain `:root` override here loses to
   Pico and every colour reverts to Pico's azure blue. So we must match Pico's
   selector; loaded last, our values then win. `:root:not([data-theme=dark])`
   also keeps the theme applied when the OS is in dark mode (no data-theme set),
   where Pico would otherwise swap in its own dark palette. */
:root:not([data-theme=dark]) {
  /* Keep form controls / scrollbars on the light, warm palette. */
  color-scheme: light;

  /* --- Accent colour: warm taupe (from the logo, #897969) ---
     Links/accent text use a slightly darker taupe so body copy still meets
     WCAG AA (~5:1) on the cream background; filled buttons keep the lighter
     logo taupe with white text (used for large/bold button labels). */
  --pico-primary: #74655a;
  --pico-primary-hover: #5c4f45;
  --pico-primary-focus: rgba(137, 121, 105, 0.3);
  --pico-primary-inverse: #ffffff;
  --pico-primary-underline: rgba(116, 101, 90, 0.5);

  /* Buttons use the *-background variables in Pico v2. */
  --pico-primary-background: #897969;
  --pico-primary-hover-background: #74655a;
  --pico-primary-border: #897969;
  --pico-primary-hover-border: #74655a;

  /* --- Surfaces & text: warm logo neutrals (cream + beige) --- */
  --pico-background-color: #f9f8f8;
  --pico-color: #3d372f;
  --pico-h1-color: #4a4034;
  --pico-h2-color: #4a4034;
  --pico-h3-color: #4a4034;
  --pico-muted-color: #7a7166;
  --pico-muted-border-color: #e4d8cc;
  --pico-card-background-color: #ffffff;
  --pico-card-border-color: #e4d8cc;
  --pico-card-sectioning-background-color: #ffffff;
  --pico-blockquote-border-color: #897969;

  /* Slightly softer, rounder shapes. */
  --pico-border-radius: 0.6rem;
}

/* Warm serif for headings adds a gentle, personal character.
   Uses only widely available system fonts (no web font download). */
h1, h2, h3,
hgroup > *:first-child {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  letter-spacing: 0.2px;
}

/* Improve readability of body copy line length on wide screens. */
main.container {
  max-width: 62rem;
}

/* Pico drops the container's side padding once a fixed max-width applies
   (≥576px), assuming auto-margins provide the gutter. Since we widen the
   container above, that width can fill tablet viewports and the content would
   touch the edges — so restore the horizontal gutter at all sizes. */
.container {
  padding-right: var(--pico-spacing);
  padding-left: var(--pico-spacing);
}

/* Header: quiet separator so the nav sits on its own band. */
body > header.container {
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 0;
}

/* Hero: flat surface, no gradient wash — sits on the page background. */
.hero {
  border-radius: var(--pico-border-radius);
  margin-top: 0;
}

.hero h1 {
  margin-bottom: 0.25rem;
}

/* Service cards: clean, modern surface — hairline border + soft shadow,
   no accent bar. Gentle lift on hover. */
.grid.leistungen article {
  border: 1px solid var(--pico-card-border-color);
  box-shadow: 0 1px 3px rgba(56, 53, 47, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.grid.leistungen article:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(56, 53, 47, 0.1);
}

/* Portrait: soft frame that matches the warm palette. */
.portrait {
  box-shadow: 0 4px 14px rgba(56, 53, 47, 0.12);
}

/* Buttons: a touch more presence without shouting. */
[role="button"],
button {
  box-shadow: 0 1px 2px rgba(56, 53, 47, 0.12);
}

/* Secondary button: a quiet "ghost" that sits embedded next to the filled
   primary, instead of Pico's default slate-grey chip (which clashes with the
   sage/cream palette). Transparent fill + sage outline, and a faint INSET
   shadow so it reads as recessed rather than lifted. Fills with sage on hover. */
[role="button"].secondary,
button.secondary {
  background-color: transparent;
  border-color: var(--pico-primary);
  color: var(--pico-primary);
  box-shadow: inset 0 1px 2px rgba(56, 53, 47, 0.07);
}

[role="button"].secondary:hover,
[role="button"].secondary:focus,
button.secondary:hover,
button.secondary:focus {
  background-color: var(--pico-primary);
  border-color: var(--pico-primary);
  color: var(--pico-primary-inverse);
  box-shadow: none;
}

/* Footer: keep it visually light and separated. */
body > footer.container {
  color: var(--pico-muted-color);
}