/*
Theme Name: Wendorf Sachverständigenbüro
Theme URI: https://gutachter-kfz.nrw/
Author: Projektumsetzung für Martin Wendorf
Description: Leichtgewichtiges Gutenberg-Block-Theme für ein inhabergeführtes Kfz-Sachverständigenbüro.
Version: 1.4.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: wendorf-sachverstaendigenbuero
*/

:root {
  --mw-navy: #0b263d;
  --mw-deep-navy: #071b2b;
  --mw-blue: #0e5e93;
  --mw-amber: #efb634;
  --mw-paper: #f4f2ec;
  --mw-mist: #edf1f2;
  --mw-line: #d5dcdf;
  --mw-muted: #596873;
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--mw-amber); outline-offset: 4px; }
.mw-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--mw-line); background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.mw-brand-lockup { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; }
.mw-header-logo-link { display: block; flex: 0 0 auto; }
.mw-header-logo-image { display: block; width: 8rem; height: auto; object-fit: contain; }
.mw-brand-copy { display: block; color: var(--mw-navy); line-height: 1.2; text-decoration: none; }
.mw-brand-copy strong, .mw-brand-copy small { display: block; }
.mw-brand-copy strong { font-size: .875rem; letter-spacing: .015em; }
.mw-brand-copy small { margin-top: 4px; color: var(--mw-muted); font-size: .69rem; letter-spacing: .04em; }
.mw-kicker { margin: 0 0 1.25rem; color: var(--mw-blue); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mw-kicker-light { color: #f5ce6c; }
.mw-hero { min-height: 76vh; }
.mw-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 7.75rem) clamp(1.5rem, 6vw, 6rem); }
.mw-hero h1 { max-width: 14ch; letter-spacing: -.045em; }
.mw-hero-image, .mw-hero-image img { height: 100%; min-height: 38rem; object-fit: cover; }
.mw-brand-banner-section { padding-block: clamp(2.125rem, 5vw, 4.25rem); background: #fbfaf7; border-bottom: 1px solid var(--mw-line); }
.mw-brand-banner { margin-block: 0; }
.mw-brand-banner img { display: block; width: 100%; height: auto; border: 1px solid #d9dde0; box-shadow: 0 22px 54px rgba(7,27,43,.09); }
.mw-section { padding-block: clamp(4.5rem, 9vw, 7.75rem); }
.mw-dark { background: var(--mw-navy); color: #fff; }
.mw-paper { background: var(--mw-paper); }
.mw-mist { background: var(--mw-mist); }
.mw-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.25rem, 7vw, 6rem); align-items: center; }
.mw-grid-cell { min-width: 0; }
.mw-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mw-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.mw-card { min-height: 14rem; padding: 1.75rem; border: 1px solid var(--mw-line); background: #fff; }
.mw-card .mw-number { color: var(--mw-blue); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.mw-card h3 { margin-top: 3.5rem; color: var(--mw-navy); }
.mw-card p { color: var(--mw-muted); }
.mw-steps { counter-reset: mw-step; }
.mw-step { counter-increment: mw-step; position: relative; padding: 1.75rem 0 1.75rem 4.5rem; border-top: 1px solid var(--mw-line); }
.mw-step::before { content: counter(mw-step, decimal-leading-zero); position: absolute; left: 0; top: 2rem; color: var(--mw-blue); font-size: .75rem; font-weight: 800; }
.mw-note { padding: 1.25rem 1.4rem; border-left: 4px solid var(--mw-blue); background: var(--mw-mist); color: #394b56; }
.mw-warning { border-color: var(--mw-amber); background: #fff7df; }
.mw-tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.mw-tags span { padding: .5rem .75rem; border: 1px solid currentColor; font-size: .78rem; }
.mw-contact { padding-block: clamp(4rem, 8vw, 6.5rem); background: #123751; color: #fff; }
.mw-contact a.wp-element-button { background: var(--mw-amber); color: var(--mw-navy); }
.mw-partner-logo { display: flex; align-items: center; justify-content: flex-end; padding: 3.25rem; background: #fff; }
.mw-partner-logo figure { width: min(100%, 21.25rem); margin: 0; }
.mw-partner-logo img { display: block; width: 100%; height: auto; object-fit: contain; }
.mw-footer { padding-block: 4rem 1.5rem; background: var(--mw-deep-navy); color: #fff; }
.mw-footer a { color: #fff; }
.mw-legal { max-width: 56rem; margin-inline: auto; }
.mw-legal h2 { margin-top: 2.5rem; }

@media (max-width: 900px) {
  .mw-grid-2, .mw-contact-grid, .mw-grid-4 { grid-template-columns: 1fr; }
  .mw-hero { min-height: auto; }
  .mw-hero-image, .mw-hero-image img { min-height: 58vw; }
}

@media (max-width: 600px) {
  .mw-header .wp-block-navigation { font-size: .92rem; }
  .mw-header > .wp-block-group { gap: .75rem; }
  .mw-brand-lockup { gap: .625rem; }
  .mw-header-logo-image { width: 5.875rem; }
  .mw-brand-copy strong { font-size: .75rem; }
  .mw-brand-copy small { font-size: .625rem; }
  .mw-hero-copy { padding: 3.5rem 1.25rem 4rem; }
  .mw-hero-image, .mw-hero-image img { min-height: 78vw; }
  .mw-section { padding-block: 4.25rem; }
  .mw-partner-logo { justify-content: center; padding: 2.375rem; }
  .mw-partner-logo figure { width: min(100%, 17.5rem); }
}

@media (max-width: 390px) {
  .mw-brand-copy { display: none; }
}

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