/* Main Skill, professioneller Auftritt (Vorschlag 2026-11-03).
   Liegt über start.css, nutzt nur Rollen-Tokens aus brand.css. */

/* Kopfzeile: leicht transparent, ruhiger */
.top { background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.top nav a { font-weight: 500; color: var(--ink-dim); }
.top nav a:hover { color: var(--ink); }
.top-tel { color: var(--ink); text-decoration: none; font: 600 .93rem/1.2 var(--font-body); white-space: nowrap; }
.top-tel:hover { color: var(--brand); }

/* Kicker: Markenfarbe mit kurzem Strich */
.label.kicker { color: var(--brand); display: inline-flex; align-items: center; gap: var(--space-2); }
.label.kicker::before { content: ""; width: 20px; height: 2px; background: currentColor; }

/* Hero */
.hero { padding-block: var(--space-16) calc(var(--space-16) + var(--space-8)); background:
  radial-gradient(60rem 30rem at 85% 0%, var(--brand-soft), transparent 70%), var(--ground); }
.hero h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4rem); letter-spacing: -0.035em; }
.hero h1 span { color: var(--brand); }
.hero .lead { font-size: 1.18rem; line-height: 1.55; }
.btn { border-radius: var(--radius-pill); }
.btn:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 28%, transparent); }
.trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: var(--space-2) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: .92rem; }
.trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.chart { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shade); padding: var(--space-8); }

/* Abschnitte */
.section { padding-block: calc(var(--space-16) + var(--space-8)); }
.sec-head { max-width: 46rem; margin-bottom: var(--space-12); }
.sec-head .lead { margin-top: var(--space-1); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }

/* Leistungen */
.tiles { gap: var(--space-6); }
.tiles li { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shade); padding: var(--space-8) var(--space-6); gap: var(--space-3); transition: transform .2s ease, box-shadow .2s ease; }
.tiles li:hover { transform: translateY(-3px); }
.ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--brand-soft); margin-bottom: var(--space-2); }
.more { margin-top: var(--space-8); }

/* Vorgehen als Karten */
.flow { gap: var(--space-4); }
.flow li { background: var(--raise); border-radius: var(--radius-xl); box-shadow: var(--shade); padding: var(--space-6); }
.flow li:not(:last-child)::after { display: none; }

/* Über mich */
.me { align-items: center; }
.photo { border-radius: var(--radius-xl); aspect-ratio: 4 / 5; }
.facts li::before { width: 6px; height: 6px; border-radius: 50%; box-shadow: none; background: var(--brand); }

/* Kontakt als Markenband */
.contact { background: var(--brand); color: var(--brand-ink); }
.contact .label, .contact .lead { color: color-mix(in srgb, var(--brand-ink) 80%, transparent); }
.contact .kicker::before { background: var(--accent); }
.contact-line { background: color-mix(in srgb, var(--brand-ink) 10%, transparent); color: var(--brand-ink); box-shadow: none; border: 1px solid color-mix(in srgb, var(--brand-ink) 22%, transparent); border-radius: var(--radius-xl); }
.contact-line:hover { border-color: var(--accent); background: color-mix(in srgb, var(--brand-ink) 16%, transparent); }
.contact-line .label { color: color-mix(in srgb, var(--brand-ink) 88%, transparent); }
.contact-addr { font-size: .92rem; color: color-mix(in srgb, var(--brand-ink) 75%, transparent); font-style: normal; }

/* Footer */
.foot { background: var(--ground); padding-block: var(--space-12) var(--space-8); }
.foot-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
.foot-col { display: grid; gap: var(--space-1); align-content: start; color: var(--ink-dim); font-style: normal; }
.foot-col a { color: var(--ink-dim); text-decoration: none; }
.foot-col a:hover { color: var(--brand); }
.foot-col .label { margin-bottom: var(--space-2); }
.foot .small { border-top: 1px solid var(--line); padding-top: var(--space-6); }

@media (max-width: 60rem) {
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .top-tel { display: none; }
  .photo { max-width: 16rem; }
}
@media (max-width: 40rem) {
  .hero { padding-block: var(--space-12) var(--space-16); }
  .section { padding-block: var(--space-16); }
}
@media (prefers-reduced-motion: reduce) { .tiles li { transition: none; } }