/* FreyRaum – minimal site-wide CSS (on top of theme.json tokens).
   Markenführung: Brand Guidelines v1.0 (April 2026) — Navy/Paper trägt, Teal nur als Pointe. */

/* Smooth anchors. */
html { scroll-behavior: smooth; }

/* Consistent content width across all templates. Headings (H1-H6) und
 * Fließtext laufen alle in derselben 62ch-Spalte und sind bündig zentriert,
 * damit auf jeder Seite der Inhalt genau unter der Überschrift ansetzt.
 * Pattern-Elemente und alignwide/-full-Blöcke nutzen die volle 1200-Breite. */
.freyraum-prose > .wp-block-post-title,
.freyraum-prose > .wp-block-post-terms,
.freyraum-prose > .wp-block-group.has-muted-color,
.freyraum-prose > .wp-block-post-content > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, figure.wp-block-table, .wp-block-quote, .wp-block-list, .wp-block-image, .wp-block-separator) {
  max-width: 62ch;
  margin-inline: auto;
}
/* Keep media / patterns / wide blocks full-width within the 1200 wrapper. */
.freyraum-prose > .wp-block-post-content > :where(.alignwide, .alignfull, .wp-block-columns, .wp-block-buttons, .wp-block-gallery, .wp-block-image.size-full, [class*="wp-block-pattern"], .freyraum-hero, .freyraum-card, .wp-block-cover, .wp-block-media-text, hr.alignwide, hr.alignfull) {
  max-width: none;
}

/* Sensible focus for accessibility — Teal als einzige Akzentfarbe. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Container helper (used by patterns). */
.freyraum-container {
  max-width: var(--wp--custom--container--max, 1200px);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}

/* ─── Lockup-Komponente ──────────────────────────────────────────
   Inline-Wortmarke + halbgeöffneter Rahmen + Trenner + Claim mit Teal-Punkt.
   Nutzbar in Footer, E-Mail-Signatur-Mockups, Patterns. Größe wird über
   font-size der Wrapper-Klasse gesteuert (z. B. .freyraum-lockup--36 / --24). */
.freyraum-lockup {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--wp--preset--font-family--sans);
  letter-spacing: -0.02em;
  line-height: 1;
  color: currentColor;
}
.freyraum-lockup .fr-wm    { display: inline-flex; align-items: baseline; }
.freyraum-lockup .fr-frey  { font-weight: 500; }
.freyraum-lockup .fr-frame { position: relative; padding: 0.10em 0.22em 0.10em 0.18em; margin-left: 0.18em; }
.freyraum-lockup .fr-frame::before {
  content: "";
  position: absolute; inset: 0;
  border: 0.038em solid currentColor;
  border-left: none;
  border-radius: 2px;
  pointer-events: none;
}
.freyraum-lockup .fr-raum     { font-weight: 300; }
.freyraum-lockup .fr-divider  { width: 1px; background: currentColor; opacity: 0.25; align-self: stretch; }
.freyraum-lockup .fr-claim    {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.20em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  line-height: 1.5;
  font-weight: 400;
}
.freyraum-lockup .fr-claim .fr-pt { color: var(--wp--preset--color--teal); opacity: 1; }

.freyraum-lockup--18 { font-size: 18px; }
.freyraum-lockup--24 { font-size: 24px; }
.freyraum-lockup--36 { font-size: 36px; }
.freyraum-lockup--48 { font-size: 48px; }
.freyraum-lockup--72 { font-size: 72px; }

/* Hero ornament: subtler grid, Navy/Rule alpha angepasst. */
.freyraum-hero {
  position: relative;
  overflow: hidden;
}
.freyraum-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(11,31,58,0.06) 95%),
    linear-gradient(90deg, transparent 95%, rgba(11,31,58,0.06) 95%);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.55;
}

/* Inline-Highlight — Teal als Akzent (max 5 % Fläche, also sparsam einsetzen).
 * Nutzt die helle Teal-Variante als Underline statt vollflächiger Markierung. */
.has-freyraum-underline {
  background: linear-gradient(180deg, transparent 78%, rgba(47,184,169,0.45) 78%, rgba(47,184,169,0.45) 95%, transparent 95%);
  background-repeat: no-repeat;
  padding-inline: 0.1em;
}

/* Service card — flacher, mit Rule-Linie statt Schatten (passt zum Doc-Stil der Guidelines). */
.freyraum-card {
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: var(--wp--custom--radius--md, 4px);
  background: var(--wp--preset--color--paper);
  transition: border-color 200ms cubic-bezier(.2,.8,.2,1), background-color 200ms;
}
.freyraum-card:hover {
  border-color: rgba(11,31,58,0.4);
  background: var(--wp--preset--color--paper-2);
}

/* Cards in Spalten- oder Grid-Layouts: gleiche Höhe, oben + unten bündig.
 * Greift in zwei Kontexten:
 *   1) wp:columns → wp:column → freyraum-card  (services-grid, showroom-grid, contact-block)
 *   2) wp:post-template (Grid) → li.wp-block-post → freyraum-card  (Wissen-/Blog-Vorschau)
 * Die Spalte / der Post-Wrapper wird zur flex-column, die Card streckt sich
 * auf volle Höhe; das letzte Kindelement (CTA-Link, Excerpt, …) bekommt
 * margin-top:auto und wird damit ans untere Ende geschoben — alle Karten
 * schließen so oben UND unten bündig ab. */
.wp-block-column:has(> .freyraum-card),
.wp-block-post-template > .wp-block-post:has(> .freyraum-card) {
  display: flex;
  flex-direction: column;
}
.wp-block-column > .freyraum-card,
.wp-block-post > .freyraum-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.wp-block-column > .freyraum-card > :last-child,
.wp-block-post > .freyraum-card > :last-child {
  margin-top: auto;
}

/* Site footer: Navy-Band, Inhalt im Paper-Ton. */
.freyraum-footer                { font-size: 0.8125rem; line-height: 1.55; }
.freyraum-footer .wp-block-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.freyraum-footer .wp-block-list li { margin: 0; }
.freyraum-footer a              { color: var(--wp--preset--color--paper); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 160ms; }
.freyraum-footer a:hover,
.freyraum-footer a:focus-visible { color: var(--wp--preset--color--teal); border-bottom-color: currentColor; }
.freyraum-footer .wp-block-site-title a { color: var(--wp--preset--color--paper); }
.freyraum-footer p              { color: var(--wp--preset--color--paper); opacity: 0.75; }
.freyraum-footer h4             { color: var(--wp--preset--color--paper) !important; opacity: 0.55; }
.freyraum-footer hr             { opacity: 0.18; }
@media (max-width: 760px) {
  .freyraum-footer .wp-block-columns { gap: 1.5rem 2rem; }
}

/* FAQ disclosure — Teal-Plus passt zu „Punkt im Claim". */
details.freyraum-faq {
  border-block-end: 1px solid var(--wp--preset--color--rule);
  padding-block: 1rem;
}
details.freyraum-faq > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
details.freyraum-faq > summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--wp--preset--color--teal);
  transition: transform 160ms ease;
}
details.freyraum-faq[open] > summary::after { content: "–"; }

/* Contact form — Paper-Surface, Navy-Rule, Teal-Focus. */
.freyraum-form label { display: block; font-weight: 500; margin-block-end: 0.35rem; }
.freyraum-form input[type="text"],
.freyraum-form input[type="email"],
.freyraum-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: var(--wp--custom--radius--sm, 2px);
  background: var(--wp--preset--color--paper);
  font: inherit;
  color: var(--wp--preset--color--navy);
}
.freyraum-form input:focus, .freyraum-form textarea:focus {
  border-color: var(--wp--preset--color--teal);
  outline: 2px solid var(--wp--preset--color--teal);
  outline-offset: 1px;
}
.freyraum-form .honey { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Mono-Caps Helfer (Sektions-Labels, Tags, Caption). */
.freyraum-mono-caps {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.65625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--muted);
}