/* layout-portfolio – Freiberufler/Portfolio: minimalistisch, viel Weissraum,
   grosse linksbuendige Typo, dezente Linien, zurueckhaltende Navigation. */

body.layout-portfolio {
  --maxw: 60rem;
  --radius: 0.25rem;
  --radius-sm: 0.25rem;
  --h1: 4rem;
  --h2: 1.9rem;
  --lead: 1.35rem;
  --section-y: 5.5rem;
  --shadow: none;
}

/* Header: schlicht, nur Unterstrich-Hover, kein CTA-Button. */
.layout-portfolio .site-header { background: transparent; border-bottom: 1px solid var(--c-border); }
.layout-portfolio .header-inner { padding-block: 1.5rem; }
.layout-portfolio .site-nav a { color: var(--c-muted); }
.layout-portfolio .site-nav a:hover { color: var(--c-heading); text-decoration: underline; text-underline-offset: 4px; }
.layout-portfolio .nav-cta {
  background: transparent;
  color: var(--c-heading);
  padding: 0;
  border-bottom: 2px solid var(--c-primary);
  border-radius: 0;
}
.layout-portfolio .nav-cta:hover { background: transparent; color: var(--c-primary); }

/* Hero: gross, linksbuendig, ohne Schnoerkel. */
.layout-portfolio .hero { padding-top: 6rem; }
.layout-portfolio .hero h1 { max-width: 14ch; letter-spacing: -0.03em; }
.layout-portfolio .hero .lead { max-width: 38ch; }
.layout-portfolio .btn {
  background: var(--c-heading);
  border-radius: var(--radius-sm);
}
.layout-portfolio .btn:hover { background: var(--c-primary); }

/* Karten als reine Typo-Liste mit Trennlinien statt Boxen. */
.layout-portfolio .cards { display: block; margin: 1rem 0; }
.layout-portfolio .card {
  border: none;
  border-top: 1px solid var(--c-border);
  border-radius: 0;
  padding: 1.75rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: baseline;
}
.layout-portfolio .card:last-child { border-bottom: 1px solid var(--c-border); }
.layout-portfolio .card-icon {
  background: transparent;
  color: var(--c-muted);
  width: auto;
  height: auto;
  font-size: 1rem;
  margin: 0;
}
.layout-portfolio .feature-media { border-radius: var(--radius-sm); }
.layout-portfolio .cta-band {
  background: transparent;
  color: var(--c-heading);
  border: 1px solid var(--c-border);
}
.layout-portfolio .cta-band h2 { color: var(--c-heading); }
.layout-portfolio .cta-band p { color: var(--c-muted); }

/* Anordnung: grosses, gespiegeltes Feature, Kennzahlen linksbuendig. */
.layout-portfolio .feature { grid-template-columns: 1fr 1.3fr; gap: 4rem; }
.layout-portfolio .feature-body { order: 2; }
.layout-portfolio .feature-media { min-height: 26rem; }
.layout-portfolio .stats { grid-template-columns: repeat(2, auto); justify-content: start; gap: 3rem; }
.layout-portfolio .stat { text-align: left; }
@media (max-width: 860px) { .layout-portfolio .feature-body { order: 0; } }