/* Leonhard Wendt, one page profile.
   Design Read: a one-page personal profile for local clients in Bremen who need
   a reliable hand with repairs and tools, in a calm, plainspoken visual
   language, dial ENERGY 2 / RHYTHM 2 / MOTION 2.
   Palette reason: warm off-white and charcoal keep the page plain and readable,
   and one steel blue accent (#3E5C76) is used because it fits a hardware and
   tools trade, stays calm, and passes WCAG AA on the page background (6.70:1)
   and with white text on it (7.01:1). No gradients, no glow: the
   portrait photo and the type do the work, with icons only where they label a service or action.
   Type reason: system font stack only, so the page loads with zero external
   requests and the character comes from spacing and hierarchy.
   Radius set: 8px for buttons, 12px for the photo and the featured service.
   One small set, used consistently. */

:root {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --ink: #1F2937;
  --soft: #44546A;
  --accent: #3E5C76;
  --accent-dark: #2F475C;
  --line: #D8D8D0;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radius-s: 8px;
  --radius-m: 12px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

h1, h2, h3 { line-height: 1.2; margin: 0; }

h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.25rem; }
h3 { font-size: 1.2rem; }

p { margin: 0; }

a, .btn { touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--accent);
  color: #FFFFFF;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  opacity: 0;
  transform: translateY(calc(-100% - 2rem));
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.skip-link:focus-visible { opacity: 1; transform: translateY(0); }

/* Header: one compact row. Only two nav links exist, so they stay visible at
   every width instead of hiding behind a menu button. */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 0.75rem;
}
.wordmark { font-weight: 700; font-size: 1.125rem; }
.site-nav { display: flex; gap: 0.5rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-s);
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--accent-dark); background: var(--surface); text-decoration: underline; }
}

/* Hero: portrait photo beside text on wide screens, photo above text on
   narrow screens, because the source photo is a 2:3 portrait and must not be
   forced into a landscape frame. */
.hero { padding-block: clamp(2rem, 5vw, 4rem); animation: hero-fade 280ms var(--ease-out); }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.hero-photo img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-m);
}
.hero-context { display: flex; align-items: center; gap: 0.35rem; font-size: 1.2rem; font-weight: 600; color: var(--accent); margin-top: 0.75rem; }
.hero-desc { margin-top: 1rem; max-width: 34rem; font-size: 1.0625rem; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-s);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: transform 140ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out);
  user-select: none;
  -webkit-user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-secondary { background: var(--surface); color: var(--accent); border: 2px solid var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-dark); }
  .btn-secondary:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
}

/* Icons: hand drawn inline SVG companions to a text label that always stays.
   One line style, currentColor only, so each icon inherits the contrast of
   the text it sits beside. No icon animates on its own. */
.icon { width: 1.1em; height: 1.1em; flex: none; display: block; }
.icon-service { width: 1.75rem; height: 1.75rem; }
.service h3 { display: flex; align-items: center; gap: 0.75rem; }
.location-inline { display: inline-flex; align-items: center; gap: 0.35rem; }
.location-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  min-height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  .location-link:hover {
    color: var(--accent-dark);
    text-decoration-thickness: 2px;
  }
}

/* Sections: narrower padding register on small screens so the page scrolls at
   a natural density instead of through desktop sized gaps. */
.section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section-contact { background: var(--surface); border-top: 1px solid var(--line); }
.contact-line { max-width: 34rem; }

/* Services hierarchy: Repairs is listed first by the client and is the most
   commonly requested help, so it gets the largest row and a filled surface.
   The other two stay as plain divided rows, not identical copy paste cards. */
.service-list { border-top: 1px solid var(--line); }
.service { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.service p { color: var(--soft); margin-top: 0.35rem; }
.service-featured {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.75rem 1.5rem;
  margin-top: 1.25rem;
}
.service-featured h3 { font-size: 1.5rem; }
.service-featured p { font-size: 1.0625rem; }

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 1.25rem;
  color: var(--soft);
  font-size: 0.9375rem;
}

/* Scroll reveal: purpose is to bridge content that would otherwise pop in
   while scrolling. Classes are added by main.js only, so without JS every
   element is fully visible. Only transform and opacity animate, on the
   composite path. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Tablet state, from about 640px: the portrait photo and the text sit side by
   side in two limited columns once they genuinely fit next to each other. */
@media (min-width: 640px) {
  .hero-grid { grid-template-columns: minmax(220px, 320px) 1fr; gap: 2.5rem; }
  .hero-photo img { max-width: 320px; }
}

/* Desktop state, from 1024px: full layout, content capped at 1120px. */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(280px, 380px) 1fr; gap: 3.5rem; }
  .hero-photo img { max-width: 380px; }
  .service-list { max-width: 52rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .site-nav a, .skip-link { transition: none; }
  .btn:active { transform: none; }
}