/*
  Projekt:   wlkns.org – Wilkens IT & Consulting
  Datei:     assets/css/main.css
  Zweck:     Zentrales Stylesheet (Mobile First, ohne Framework)
  Version:   2.0.0
  Autor:     Stephan Wilkens / Wilkens IT & Consulting
  Geändert:  2026-09-25

  Aufbau:
    1. Design-Tokens (Custom Properties)
    2. Reset & Basis
    3. Hilfsklassen
    4. Layout
    5. Header & Navigation
    6. Komponenten
    7. Sektionen
    8. Kontaktformular
    9. Footer
   10. Rechtstexte (Impressum, Datenschutz)
   11. Breakpoints
   12. Reduzierte Bewegung
*/

/* 1. Design-Tokens ------------------------------------------------------- */
:root {
  --color-bg: #121416;
  --color-bg-alt: #16191c;
  --color-surface: #1b1f23;
  --color-border: #2c3238;
  --color-border-strong: #3d454d;
  --color-text: #e7e9eb;
  --color-text-muted: #a6adb4;
  --color-accent: #e3a857;
  --color-accent-hover: #efbd75;
  --color-accent-soft: rgb(227 168 87 / 0.08);
  --color-on-accent: #17120a;
  --color-error: #f29b90;
  --color-success: #95d3a0;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);

  --container-max: 72rem;
  --container-pad: 1rem;
  --radius: 6px;
  --header-height: 4rem;
  --focus-ring: 2px solid var(--color-accent);
  --transition: 150ms ease;
}

/* 2. Reset & Basis ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-lg);
}

p,
ul,
ol,
dl,
dd {
  margin: 0;
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--color-accent-hover);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

strong {
  font-weight: 650;
  color: var(--color-text);
}

address {
  font-style: normal;
}

svg {
  flex-shrink: 0;
}

/* 3. Hilfsklassen -------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: var(--color-on-accent);
}

/* 4. Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-border);
}

.section--alt {
  background: var(--color-bg-alt);
}

.split {
  display: grid;
  gap: var(--space-6);
}

.split__head > * + * {
  margin-top: var(--space-4);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose {
  color: var(--color-text-muted);
  max-width: 42rem;
}

/* 5. Header & Navigation ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.brand:hover {
  color: var(--color-text);
}

.brand__suffix {
  color: var(--color-text-muted);
  font-weight: 450;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: inline;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  list-style: none;
  padding: 0;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-3);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
}

.site-nav a:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.site-nav a.site-nav__cta {
  color: var(--color-accent);
  border: 1px solid var(--color-border-strong);
}

.site-nav a.site-nav__cta:hover {
  border-color: var(--color-accent);
}

/* Ohne JavaScript bleibt die Navigation sichtbar (umbrechend). Mit JS wird
   sie auf kleinen Bildschirmen in ein aufklappbares Menü umgewandelt. */
@media (max-width: 59.99rem) {
  .site-header__inner {
    flex-wrap: wrap;
  }

  .has-js .site-header__inner {
    flex-wrap: nowrap;
  }

  .has-js .nav-toggle {
    display: inline-flex;
  }

  .has-js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  .has-js .site-nav.is-open {
    display: block;
  }

  .has-js .site-nav__list {
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--container-pad) var(--space-4);
  }

  .has-js .site-nav a {
    min-height: 48px;
    padding-inline: var(--space-3);
  }

  .has-js .site-nav a.site-nav__cta {
    margin-top: var(--space-2);
    justify-content: center;
  }
}

/* 6. Komponenten --------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.lead {
  font-size: var(--text-lg);
  color: var(--color-text);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.button--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.button--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.button--secondary:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

.statement {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 550;
  line-height: 1.4;
  text-wrap: balance;
}

.prose > .statement,
.section > .container > .statement {
  margin-top: var(--space-6);
}

.statement--large {
  font-size: var(--text-2xl);
  max-width: 48rem;
}

/* 7. Sektionen ----------------------------------------------------------- */

/* Hero */
.hero {
  padding-block: var(--space-8) var(--space-section);
}

.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: end;
}

.hero__content {
  max-width: 46rem;
}

.hero__content > * + * {
  margin-top: var(--space-5);
}

.hero__content > p:not(.eyebrow, .lead, .keywords) {
  color: var(--color-text-muted);
}

.hero__title {
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero__title-accent {
  display: block;
  color: var(--color-text-muted);
}

.keywords {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.hero .button-row {
  margin-top: var(--space-6);
}

.principles {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.principles__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.principles__list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  counter-reset: principle;
}

.principles__list li {
  counter-increment: principle;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-weight: 550;
}

.principles__list li::before {
  content: counter(principle, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-accent);
  padding-top: 0.15em;
}

/* Leistungen */
.cards {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
}

.card__icon {
  color: var(--color-accent);
}

.card__title {
  color: var(--color-text);
  font-size: var(--text-xl);
}

.card__subtitle {
  color: var(--color-text);
  font-weight: 550;
}

.card__list-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: calc(var(--space-2) * -1);
}

.topic-list {
  list-style: none;
  padding: 0;
  font-size: 0.9375rem;
}

.topic-list li {
  position: relative;
  padding-left: var(--space-4);
  padding-block: 0.15rem;
}

.topic-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 6px;
  height: 1px;
  background: var(--color-accent);
}

.card__question {
  color: var(--color-text);
  font-weight: 550;
}

.card__statement {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 550;
}

/* Selbstständige & kleine Unternehmen – bewusst stärker hervorgehoben */
.section--feature {
  background: linear-gradient(var(--color-accent-soft), var(--color-accent-soft)), var(--color-bg);
  border-top: 1px solid rgb(227 168 87 / 0.35);
  border-bottom: 1px solid rgb(227 168 87 / 0.35);
}

.section--feature + .section {
  border-top: 0;
}

.section--feature h2 {
  font-size: var(--text-3xl);
  line-height: 1.1;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin-top: var(--space-7);
}

.tag-list li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-bg);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.section--feature .statement--large {
  margin-top: var(--space-7);
}

/* Formen der Zusammenarbeit */
.steps {
  display: grid;
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.steps__item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.steps dt {
  font-weight: 650;
  font-size: var(--text-lg);
}

.steps dd {
  color: var(--color-text-muted);
  max-width: 42rem;
}

/* Über mich */
.path {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.path__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.path__label + * {
  margin-top: var(--space-3);
}

.path__list + .path__label {
  margin-top: var(--space-5);
}

.path__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  font-weight: 550;
}

.path__list li + li::before {
  content: "→";
  margin-right: var(--space-2);
  color: var(--color-accent);
}

.path__roles {
  list-style: none;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.path__roles li {
  padding-block: 0.15rem;
}

/* Zusammenarbeit */
#zusammenarbeit .button-row {
  margin-top: var(--space-6);
}

/* Kontakt */
.contact-card {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* 8. Kontaktformular ----------------------------------------------------- */
.contact-form {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.form-hint,
.form-privacy,
.field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-weight: 600;
}

.field__required {
  color: var(--color-accent);
}

.field__optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.field textarea {
  resize: vertical;
  min-height: 10rem;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--color-text-muted);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.field [aria-invalid="true"] {
  border-color: var(--color-error);
}

.field__error {
  font-size: var(--text-sm);
  color: var(--color-error);
}

.field__error::before {
  content: "⚠ ";
}

/* Honeypot: aus dem sichtbaren Bereich entfernt, aber nicht display:none,
   damit einfache Bots das Feld weiterhin ausfüllen. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__submit {
  justify-self: start;
}

.form-status {
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border-strong);
}

.form-status:focus {
  outline: none;
}

.form-status--error {
  border-color: var(--color-error);
  color: var(--color-error);
}

.form-status--success {
  border-color: var(--color-success);
  color: var(--color-success);
}

.form-status--pending {
  color: var(--color-text-muted);
}

/* 9. Footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  color: var(--color-text-muted);
}

.site-footer__links a:hover {
  color: var(--color-text);
}

/* 10. Rechtstexte -------------------------------------------------------- */
.legal {
  padding-block: var(--space-7) var(--space-section);
}

.legal .container {
  max-width: 48rem;
}

.legal h1 {
  font-size: var(--text-2xl);
  margin-top: var(--space-4);
}

.legal h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-7);
}

.legal h3 {
  font-size: var(--text-base);
  margin-top: var(--space-5);
}

.legal p,
.legal ul,
.legal address {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.legal ul {
  padding-left: var(--space-5);
}

.legal li + li {
  margin-top: var(--space-1);
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Platzhalter, die vor dem Go-live ersetzt werden müssen (siehe docs/deployment.md) */
.placeholder {
  padding: 0 var(--space-1);
  background: rgb(242 155 144 / 0.15);
  color: var(--color-error);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* 11. Breakpoints -------------------------------------------------------- */
@media (min-width: 48rem) {
  :root {
    --container-pad: 1.5rem;
  }

  .contact-form {
    padding: var(--space-6);
  }

  .steps__item {
    grid-template-columns: 16rem 1fr;
    gap: var(--space-6);
  }
}

@media (min-width: 60rem) {
  :root {
    --container-pad: 2rem;
    --header-height: 4.5rem;
  }

  .hero {
    padding-top: var(--space-section);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-8);
  }

  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-8);
    align-items: start;
  }

  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-nav__list {
    flex-wrap: nowrap;
  }
}

@media (min-width: 90rem) {
  :root {
    --container-max: 80rem;
  }
}

/* 12. Reduzierte Bewegung ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}