/* mihenze.de – Styles
   Regeln: 17_Website/STYLEGUIDE.md (Tokens, Komponenten, Barrierefreiheit).
   Keine externen Schriften, keine Frameworks. */

/* 1. Tokens ------------------------------------------------------------ */
:root {
  --blau: #0B72B5;          /* Hauptfarbe (DESIGN §2) */
  --blau-dunkel: #08568A;   /* Hover, aktiver Link */
  --hellblau: #86B8DA;      /* Akzent (DESIGN §2), nur Linien/Flächen */
  --flaeche-1: #F5F9FC;     /* helle Fläche Hero, Karten */
  --flaeche-2: #E8F1F8;     /* Ebene hell */
  --flaeche-3: #D3E6F3;     /* Ebene mittel, Kartenrahmen */
  --nacht: #10212E;         /* Überschriften, dunkle Flächen */
  --text: #33424F;          /* Fließtext, 10,4 : 1 auf Weiß */
  --text-leise: #595959;    /* Nebentext, 7,0 : 1 auf Weiß */
  --linie: #E3E8EC;
  --weiss: #FFFFFF;
  --auf-blau: #FFFFFF;      /* Text auf Blau, 4,9 : 1 (heller geht nicht, Blau ist der Engpass) */
  --auf-nacht: #D5DEE5;     /* Text auf Nacht */

  --schrift: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --fs-eyebrow: 0.8125rem;  /* 13 px */
  --fs-klein: 0.875rem;     /* 14 px */
  --fs-text: 1rem;          /* 16 px */
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-h3: 1.375rem;
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
  --fs-h1: clamp(2.125rem, 1.4rem + 2.4vw, 3rem);

  --abstand-sektion: clamp(4rem, 2.5rem + 5vw, 7rem);
  --breite: 75rem;          /* 1200 px */
  --rand: clamp(1rem, 0.5rem + 2vw, 2rem);
  --kopf-hoehe: 5.5rem;
}

/* 2. Basis ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--kopf-hoehe); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--weiss); color: var(--text); font-family: var(--schrift); font-size: var(--fs-text); line-height: 1.6; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--nacht); line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: var(--blau); text-underline-offset: 0.15em; }
a:hover { color: var(--blau-dunkel); }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.dunkel :focus-visible, .blau :focus-visible { outline-color: var(--weiss); }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--blau); color: var(--weiss); padding: 0.75rem 1rem; font-weight: 700; }
.skip:focus { top: 1rem; color: var(--weiss); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }
.sektion { padding-block: var(--abstand-sektion); }
.sektion--linie { border-top: 1px solid var(--linie); }
.eyebrow { font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--blau); margin-bottom: 0.75rem; }
.h2 { font-size: var(--fs-h2); margin-bottom: 1.25rem; }
.lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 47.5rem; }
.leise { color: var(--text-leise); font-size: var(--fs-klein); }

/* 3. Buttons ----------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.8rem 1.4rem; font-weight: 700; font-size: 1rem; text-decoration: none; border: 1px solid var(--blau); }
.btn--primaer { background: var(--blau); color: var(--weiss); }
.btn--primaer:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: var(--weiss); }
.btn--sekundaer { background: var(--weiss); color: var(--blau); }
.btn--sekundaer:hover { background: var(--flaeche-1); }
.btn--hell { background: var(--weiss); color: var(--nacht); border-color: var(--weiss); }
.btn--hell:hover { background: var(--flaeche-2); color: var(--nacht); }

/* 4. Kopf und Navigation ---------------------------------------------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--kopf-hoehe); }
.kopf__logo { display: block; line-height: 0; flex: none; }
.kopf__logo img { width: 13.875rem; height: auto; }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav__liste { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav__liste a, .nav__sprache { color: var(--nacht); text-decoration: none; font-size: 0.9375rem; padding: 0.5rem 0; }
.nav__liste a:hover { color: var(--blau); text-decoration: underline; }
.nav__sprache { border: 1px solid #C9D3DB; padding: 0.4rem 0.65rem; color: var(--text-leise); }
.nav__sprache:hover { border-color: var(--blau); color: var(--blau); }
.nav__toggle { display: none; }

@media (max-width: 64rem) {
  .kopf__logo img { width: 10.375rem; }
  .js .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid #C9D3DB; background: var(--weiss); cursor: pointer; }
  .nav { flex-wrap: wrap; justify-content: flex-end; }
  .js .nav__panel { display: none; }
  .js .nav[data-offen="true"] .nav__panel { display: flex; }
  .nav__panel { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--weiss); border-bottom: 1px solid var(--linie); padding: 0.5rem var(--rand) 1.25rem; }
  .nav__liste { flex-direction: column; gap: 0; }
  .nav__liste a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--linie); }
  .nav__panel .btn { margin-top: 1rem; }
  .nav__sprache { align-self: flex-start; margin-top: 1rem; }
  html:not(.js) .nav__panel { position: static; padding: 0; border: 0; }
}
@media (min-width: 64.0625rem) { .nav__panel { display: flex; align-items: center; gap: 1.75rem; } }

/* 5. Hero -------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--flaeche-1); }
.hero__wellen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__wellen g { will-change: transform; }
.hero__innen { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; padding-block: clamp(4rem, 2rem + 6vw, 7rem); }
.hero__text { flex: 1 1 40rem; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.hero h1 { font-size: var(--fs-h1); line-height: 1.08; }
.hero h1 span { display: block; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 0.5rem; }
.hero__grafik { flex: 1 1 22rem; min-width: 0; display: flex; justify-content: center; }
.hero__grafik svg { width: 100%; max-width: 27rem; }
.ebene { transition: transform 0.1s linear; }

/* 6. Leistungen -------------------------------------------------------- */
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.karte-linie { border-top: 3px solid var(--blau); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; }
.karte-linie__nr { font-size: var(--fs-klein); font-weight: 700; color: var(--blau); }
.karte-linie h3 { font-size: var(--fs-h3); }
.leistungen .raster-3 { margin-top: 3.5rem; }
.leistungen .leise { margin-top: 3rem; font-size: 0.9375rem; }

/* 7. Arbeitsweise (blau) ---------------------------------------------- */
.blau { background: var(--blau); color: var(--weiss); }
.blau h2, .blau h3 { color: var(--weiss); }
.blau .eyebrow { color: var(--weiss); }
.blau .lead { color: var(--auf-blau); }
.phasen { list-style: none; margin: 3.5rem 0 0; padding: 0; }
.phase { border-left: 1px solid var(--hellblau); padding-left: 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; }
.phase__nr { font-size: 2.75rem; font-weight: 700; color: var(--weiss); line-height: 1; }
.phase h3 { font-size: 1.5rem; }
.phase p { color: var(--auf-blau); }

/* 8. Agilität ---------------------------------------------------------- */
.agil__oben { display: flex; flex-wrap: wrap; gap: 4rem; align-items: center; margin-bottom: 3.5rem; }
.agil__text { flex: 1 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.agil__text p { font-size: 1.125rem; }
.agil__grafik { flex: 1 1 32rem; min-width: 0; margin: 0; }
.agil__grafik figcaption { margin-top: 0.5rem; }
.fl-mobil { display: none; }
.fl-mobil__pfeil { font-size: var(--fs-klein); font-weight: 700; color: var(--blau); margin-bottom: 0.5rem; }
.fl-mobil__ebene { padding: 0.875rem 1rem; margin-bottom: 0.375rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9375rem; }
.fl-mobil__ebene--3 { background: var(--blau); color: var(--weiss); }
.fl-mobil__ebene--2 { background: var(--flaeche-3); color: var(--nacht); }
.fl-mobil__ebene--1 { color: var(--nacht); padding-inline: 0; }
.fl-mobil__ebene ul { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
.fl-mobil__ebene li { background: var(--flaeche-2); border: 1px solid var(--hellblau); padding: 0.625rem 0.25rem; text-align: center; font-size: var(--fs-klein); color: var(--text); }
.karte-rahmen { border: 1px solid var(--flaeche-3); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.karte-rahmen .eyebrow { font-size: 0.75rem; margin: 0; }
.karte-rahmen h3 { font-size: 1.1875rem; }
.karte-rahmen p { font-size: 0.9375rem; }

/* 9. Logo-Leiste ------------------------------------------------------- */
/* Ausgeblendet bis zur Logo-Entscheidung (Michael, 03.11.2026).
   Einschalten: die folgende Zeile löschen. */
.mandate { display: none; }
.mandate__liste { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; align-items: center; }
.mandate__liste img { width: 100%; max-width: 10rem; height: 4rem; object-fit: contain; filter: grayscale(1); opacity: 0.8; margin: 0 auto; }

/* 10. Projekte --------------------------------------------------------- */
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 3.5rem; }
.projekt { background: var(--flaeche-1); }
.projekt summary { list-style: none; cursor: pointer; padding: 2.25rem 2.25rem 0; display: flex; flex-direction: column; gap: 0.875rem; }
.projekt summary::-webkit-details-marker { display: none; }
.projekt__branche { font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--blau); }
.projekt h3 { font-size: 1.3125rem; }
.projekt__inhalt { padding: 0.875rem 2.25rem 2.25rem; display: flex; flex-direction: column; gap: 0.875rem; }
.projekt__zeichen { display: none; }
@media (min-width: 48.0625rem) { .projekt summary { cursor: default; pointer-events: none; } }

/* 11. Über mich -------------------------------------------------------- */
.ueber { display: flex; flex-wrap: wrap; gap: 4rem; align-items: flex-start; }
.ueber__foto { flex: 0 1 22.5rem; min-width: 0; margin: 0; }
.ueber__foto img { width: 100%; max-width: 22.5rem; aspect-ratio: 2 / 3; object-fit: cover; }
.ueber__text { flex: 999 1 35rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.ueber__text > p { font-size: 1.125rem; }
.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-top: 1rem; }
.fakten h3 { font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 0.5rem; }
.fakten ul { margin: 0; padding-left: 1.1rem; font-size: 0.9375rem; line-height: 1.7; }
.fakten p { font-size: 0.9375rem; line-height: 1.7; }

/* 12. Kontakt und Fuß (dunkel) ---------------------------------------- */
.dunkel { background: var(--nacht); color: var(--weiss); }
.dunkel h2 { color: var(--weiss); }
.dunkel .eyebrow { color: var(--hellblau); }
.kontakt { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-end; justify-content: space-between; }
.kontakt__text { flex: 1 1 32rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.kontakt__text p { font-size: 1.125rem; color: var(--auf-nacht); max-width: 35rem; }
.kontakt__wege { flex: 0 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 0.875rem; font-size: 1.125rem; }
.kontakt__wege a:not(.btn) { color: var(--weiss); }
.kontakt__wege .btn { margin-top: 0.5rem; align-self: flex-start; font-size: 1rem; }
.kontakt__wege .leise { color: #B8C5CF; }
.fuss { background: var(--nacht); color: #B8C5CF; }
.fuss__claim { font-size: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); line-height: 1.1; font-weight: 700; color: var(--hellblau); padding-top: 3.5rem; }
.fuss__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.75rem; margin-top: 1.5rem; border-top: 1px solid #2B3D4B; font-size: var(--fs-klein); }
.fuss__zeile ul { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.fuss a { color: #B8C5CF; }
.fuss a:hover { color: var(--weiss); }

/* 13. Rechtliches und 404 --------------------------------------------- */
.legal { max-width: 47.5rem; padding-block: var(--abstand-sektion); }
.legal h1 { font-size: var(--fs-h2); margin-bottom: 0.75rem; }
.legal h2 { font-size: 1.25rem; margin: 2.25rem 0 0.75rem; }
.legal p { margin-bottom: 0.75rem; }
.legal-lead { color: var(--text-leise); }

/* 14. Responsiv -------------------------------------------------------- */
@media (max-width: 64rem) {
  .raster-3 { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mandate__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .raster-2 { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .projekt summary { padding: 1.25rem 3.25rem 1.25rem 1.25rem; position: relative; }
  .projekt__zeichen { display: block; position: absolute; right: 1.25rem; top: 1.25rem; width: 1.5rem; height: 1.5rem; color: var(--blau); }
  .projekt[open] .projekt__zeichen .senkrecht { display: none; }
  .projekt__inhalt { padding: 0 1.25rem 1.25rem; }
  .fakten { grid-template-columns: minmax(0, 1fr); }
  .fl-svg { display: none; }
  .fl-mobil { display: block; }
  .hero__wellen { display: none; }
  .hero__aktionen .btn { flex: 1 1 100%; }
  .ueber__foto { flex-basis: 100%; }
  .ueber__foto img { max-width: none; aspect-ratio: 1 / 1; object-position: 50% 15%; }
}

/* 15. Bewegung --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ebene, .hero__wellen g { transition: none !important; transform: none !important; }
}

/* 16. Druck ------------------------------------------------------------ */
@media print {
  .kopf, .hero__wellen, .nav__toggle, .skip { display: none !important; }
  .blau, .dunkel, .fuss { background: none; color: #000; }
  .blau *, .dunkel *, .fuss * { color: #000 !important; }
}