/* Komponenten: Header, Hero, Footer (F-0001-Umfang). Nav/Footer-Inhalt folgt in F-0002. */
.site-header{
  max-width:var(--maxw); margin-inline:auto;
  padding:var(--space);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
}
.wordmark{ font-weight:700; letter-spacing:.02em; color:var(--c-cream); text-decoration:none; }

/* Hauptnavigation */
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:clamp(1rem,3vw,2rem); }
.site-nav a{ color:var(--c-cream); text-decoration:none; font-weight:600; }
.site-nav a:hover{ text-decoration:underline; text-decoration-color:var(--c-gold); }
.site-nav a[aria-current="page"]{ color:var(--c-gold); }

/* Inhaltssektionen */
.section{ max-width:var(--maxw); margin-inline:auto; padding:var(--space); scroll-margin-top:1.5rem; }
.section h2{ margin:0 0 .5em; font-size:clamp(1.5rem,1.2rem + 1.5vw,2.25rem); color:var(--c-cream); }
.section__placeholder{ margin:0; color:var(--c-cream); }

/* CV-Tabs (ARIA Tab-Pattern) */
.tabs{ margin-top:1rem; }
.tablist{ display:flex; flex-wrap:wrap; gap:.25rem; border-bottom:1px solid rgba(242,251,249,.15); }
.tablist [role="tab"]{
  appearance:none; background:transparent; border:0; cursor:pointer;
  color:var(--c-cream); font:inherit; font-weight:600;
  padding:.6rem .9rem; margin-bottom:-1px; border-bottom:3px solid transparent;
}
.tablist [role="tab"][aria-selected="true"]{ color:var(--c-gold); border-bottom-color:var(--c-gold); }
.tablist [role="tab"]:hover{ color:var(--c-gold); }
[role="tabpanel"]{ padding-top:1.25rem; }

/* CV-Eintraege: gerahmte Karten im Stil der Formularfelder, kleiner Spalt dazwischen */
.cv-entry{
  background:rgba(242,251,249,.06);
  border:1px solid rgba(242,251,249,.25);
  border-radius:8px;
  padding:.8rem 1rem;
  margin:0 0 .6rem;
}
.cv-entry:last-child{ margin-bottom:0; }
.cv-entry > p{ margin:0; }
.cv-period{ font-size:.85rem; font-weight:600; color:var(--c-gold); }
/* hoehere Spezifitaet als `.section h2`, damit die Rolle wirklich kleiner wird */
.cv-entry > .cv-role{ margin:.1rem 0 .25rem; font-size:1.05rem; color:var(--c-cream); }
/* abgetrennte Tools-/Tech-Zeile pro Station */
.cv-entry > .cv-tools{ margin:.6rem 0 0; padding-top:.5rem; border-top:1px solid rgba(242,251,249,.12); font-size:.8rem; line-height:1.5; color:rgba(242,251,249,.7); }
.cv-tools__label{ color:var(--c-gold); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.7rem; margin-right:.5rem; }
.cv-note{ color:var(--c-cream); font-size:.95rem; margin-top:.75rem; }

/* Projekte-Karten */
.lead{ margin:0 0 1.5rem; max-width:52ch; color:var(--c-cream); }
.cards{ list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:48rem){ .cards{ grid-template-columns:repeat(2,1fr); } }
.card{
  padding:1.25rem 1.4rem; border-radius:var(--radius);
  border:1px solid rgba(242,251,249,.15); background:rgba(242,251,249,.04);
}
.card__title{ margin:0 0 .5rem; font-size:1.3rem; color:var(--c-cream); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.card p{ margin:0; }
.badge{
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--c-gold); border:1px solid var(--c-gold); border-radius:999px; padding:.15rem .5rem;
}

/* Kontaktformular */
.form{ max-width:40rem; display:grid; gap:1.1rem; }
.field{ display:grid; gap:.35rem; }
.field label{ font-weight:600; color:var(--c-cream); }
.req{ color:var(--c-gold); }
.field input, .field select, .field textarea{
  font:inherit; color:var(--c-cream); background:rgba(242,251,249,.06);
  border:1px solid rgba(242,251,249,.25); border-radius:8px; padding:.6rem .7rem;
}
.field textarea{ resize:vertical; }
/* Native Dropdown-Optionen: dunkler Text auf hellem Grund (sonst Creme auf Systemweiss = unlesbar) */
.field select option{ color:var(--c-petrol-900); background:#fff; }
.field [aria-invalid="true"]{ border-color:#FFC9C9; }
.field-group{ border:1px solid rgba(242,251,249,.15); border-radius:var(--radius); padding:1rem; display:grid; gap:1.1rem; margin:0; }
.field-group legend{ padding:0 .4rem; color:var(--c-gold); font-weight:600; }
.error{ margin:0; color:#FFC9C9; font-size:.9rem; }
.form-note{ font-size:.9rem; color:var(--c-cream); margin:0; }
.btn{
  justify-self:start; font:inherit; font-weight:700; cursor:pointer;
  color:var(--c-petrol-900); background:var(--c-gold); border:0; border-radius:999px; padding:.7rem 1.4rem;
}
.btn:hover{ background:#E6C14A; }
.btn:disabled{ opacity:.6; cursor:default; }
.form-status{ margin:0; font-weight:600; color:var(--c-cream); }
.form-status.is-ok{ color:var(--c-gold); }
.form-status.is-error{ color:#FFC9C9; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Rechtsseiten (Impressum / Datenschutz) */
.legal{ max-width:48rem; }
.legal h2{ margin:1.5rem 0 .4rem; font-size:1.2rem; color:var(--c-cream); }
.legal-address{ font-style:normal; line-height:1.7; color:var(--c-cream); }
.legal a{ color:var(--c-gold); }
.footer-nav a[aria-current="page"]{ color:var(--c-gold); }

.hero{
  max-width:var(--maxw); margin-inline:auto;
  padding:var(--space);
  min-height:60vh;
  display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:48rem){
  .hero{ grid-template-columns:minmax(0,18rem) 1fr; }
}
.hero__photo{
  width:100%; max-width:18rem;
  border-radius:var(--radius);
  /* dezenter Rahmen + Tiefe — das Bild selbst bleibt unbearbeitet */
  box-shadow:0 0 0 1px rgba(242,251,249,.15), 0 12px 30px rgba(0,0,0,.35);
}
.hero__name{
  margin:0 0 .3em;
  font-size:clamp(2rem, 1.5rem + 3vw, 3.5rem);
  line-height:1.1;
  color:var(--c-cream);
}
.hero__roles{
  list-style:none; margin:0 0 1.25rem; padding:0;
  display:grid; gap:.3rem;
}
.hero__roles li{
  font-size:clamp(1.05rem, 1rem + .7vw, 1.4rem);
  font-weight:600;
  color:var(--c-gold); /* 5.51:1 auf Petrol — AA */
  line-height:1.25;
}
.hero__about{
  margin:0;
  max-width:54ch;
  color:var(--c-cream);
}

/* Profil-Rubriken (Startseite): "Was ich biete" + "Was mich abhebt" */
.section--rule{ border-top:1px solid rgba(242,251,249,.12); }
.leistungen{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.leistungen li{ position:relative; padding-left:1.5rem; color:var(--c-cream); }
.leistungen li::before{ content:"›"; position:absolute; left:0; top:0; color:var(--c-gold); font-weight:700; }
.leistungen strong{ color:var(--c-cream); }
.abhebt p{ margin:0 0 1rem; color:var(--c-cream); }
.abhebt p:last-child{ margin-bottom:0; }
.profil__lead{ font-size:clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight:600; }
.profil__result strong{ color:var(--c-gold); }

.site-footer{
  max-width:var(--maxw); margin-inline:auto;
  margin-top:var(--space); padding:var(--space);
  color:var(--c-cream);
  border-top:1px solid rgba(242,251,249,.12);
}
.footer-nav ul{ list-style:none; margin:0 0 .5rem; padding:0; display:flex; flex-wrap:wrap; gap:1.5rem; }
.footer-nav a{ color:var(--c-cream); }
.footer-copy{ margin:0; color:var(--c-cream); font-size:.9rem; }