/* kbouschen.com — ein Stylesheet, keine Framework-Abhängigkeit.

   Leitidee: wie eine gute README, nicht wie eine Agentur-Landingpage.
   Durchgehend linksbündig, feine Linien statt Karten-Schatten, viel Weißraum.
   Animiert wird nur das Terminal im Hero.

   Zur Farbpalette: Salbei (--sage) trägt auf dem hellen Grund nur 2,1:1 und ist
   deshalb ausschließlich Linie und Fläche — nie Textfarbe. Petrol steht mit
   5,4:1 auf dem Hintergrund und ist die einzige Akzentfarbe für Text. */

@import url('fonts.css');

/* ---------------------------------------------------------------- Tokens */

:root {
  --bg: #f7f8f9;
  --bg-sunken: #eef1f2;
  --ink: #232a31;
  --ink-muted: #5a656f;
  --petrol: #1f6f78;
  --petrol-dark: #175259;
  --sage: #9bb4a0;
  --line: #dde2e5;
  --line-strong: #c6ced3;
  --term-bg: #1c2733;
  --term-ink: #a8d0b0;
  --term-dim: #7e93a5;

  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --measure: 34rem;      /* ~70 Zeichen Zeilenlänge */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(3rem, 7vw, 5.5rem);
}

/* ------------------------------------------------------------ Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- Layout */

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Die Kopfzeile klebt oben — ohne diesen Abstand verschwindet die Überschrift
   eines angesprungenen Abschnitts darunter. */
:target, .section, .contact, .hero { scroll-margin-top: 4.5rem; }

/* Schmal ist die Kopfzeile zweizeilig und damit hoeher; ohne mehr Abstand
   verschwindet die angesprungene Ueberschrift darunter. */
@media (max-width: 34rem) {
  :target, .section, .contact, .hero { scroll-margin-top: 7rem; }
}

.section__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.75rem;
}

.section__title { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: 1.75rem; }

.prose { max-width: var(--measure); }

/* Text links, Portraet rechts, wie im Hero. Die Textspalte ist auf die
   Lesebreite begrenzt statt auf 1fr: eine 1fr-Spalte waechst mit dem
   Fenster, der Text darin bleibt bei --measure stehen, und breit klafft
   dann ein Loch zwischen beidem, waehrend das Bild einsam am rechten Rand
   haengt. So stehen Text und Bild nebeneinander, der Restplatz laeuft
   rechts aus. Das Bild behaelt eine feste Spaltenbreite statt eines
   Prozentwerts: ein Portraet, das breiter wird als der Text daneben,
   kippt das Gewicht des Abschnitts. */
.about {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 46rem) {
  .about {
    grid-template-columns: minmax(0, var(--measure)) 16.25rem;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

/* fit-content zieht die figure auf die Bildbreite zusammen. Nur so passt
   die Flaeche darunter in beiden Breakpoints zum Bild und nicht zur
   Rasterspalte, die schmal viel breiter ist als das Foto. */
.portrait {
  margin: 0;
  position: relative;
  width: fit-content;
}

/* Das Portraet ist freigestellt und steht vor einer Verlaufsflaeche aus
   den eigenen Farben der Seite: oben ein aufgehellter Salbeiton, nach
   unten hin eine Beimischung Petrol. Die Flaeche beginnt erst
   unterhalb des Scheitels (prozentual, skaliert also mit beiden
   Bildgroessen mit), sodass der Kopf sie leicht ueberragt: das verzahnt
   Foto und Flaeche, statt ein Rechteck auf ein Rechteck zu legen. Salbei
   und Petrol stehen hier als Flaeche, nicht als Schrift; auf ihnen liegt
   kein Text. */
.portrait::before {
  content: '';
  position: absolute;
  inset: 16% 0 0;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--sage) 30%, #fff) 0%,
    var(--sage) 60%,
    color-mix(in srgb, var(--petrol) 40%, var(--sage)) 100%
  );
  border-radius: 5px;
}

/* Die unteren Ecken folgen der Flaeche: die Schultern reichen im Foto bis
   an beide Raender, ohne den Radius stuenden sie spitz ueber die
   abgerundete Flaeche hinaus. */
.portrait img {
  display: block;
  position: relative;
  width: 100%;
  max-width: 16.25rem;
  height: auto;
  border-radius: 0 0 5px 5px;
}

/* Schmal steht das Bild ueber dem Text und bleibt klein: in voller Breite
   wuerde es den Abschnitt dominieren, den es nur begleiten soll. */
@media (max-width: 45.999rem) {
  .about { gap: 1.75rem; }
  .portrait { order: -1; }
  .portrait img { max-width: 11rem; }
}
.prose p + p { margin-top: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 20;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- Kopfzeile */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--petrol); }

.site-nav { display: flex; gap: 1.5rem; font-size: 0.9rem; }
.site-nav a { color: var(--ink-muted); text-decoration: none; }
.site-nav a:hover { color: var(--petrol); text-decoration: underline; }

@media (max-width: 34rem) {
  .site-nav { gap: 1rem; font-size: 0.85rem; }
}

/* Mit vier Links passen Name und Navigation schmal nicht mehr nebeneinander.
   Statt einen Link zu verstecken darf die Navigation umbrechen: sie rueckt
   dann unter den Namen und bleibt vollstaendig erreichbar. `wrap` allein
   genuegt, weil `space-between` bei nur einem Element in der zweiten Zeile
   linksbuendig ausrichtet. */
.site-header__inner { flex-wrap: wrap; }

/* `width: 100%` waere hier falsch: es wuerde die Navigation auch dort in die
   zweite Zeile zwingen, wo sie noch daneben passt. Der Umbruch kommt von
   `flex-wrap` selbst, sobald es eng wird; diese Regel macht die dann
   zweizeilige Kopfzeile nur flacher. */
@media (max-width: 34rem) {
  .site-header__inner { gap: 0.35rem 1.5rem; padding-block: 0.8rem; }
}

/* ------------------------------------------------------------------ Hero */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y); }

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.hero__headline {
  font-size: clamp(2.1rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}

.hero__sub {
  max-width: var(--measure);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  color: var(--ink-muted);
  margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }

.btn {
  display: inline-block;
  background: var(--petrol);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 3px;
  transition: background 120ms ease;
}
.btn:hover { background: var(--petrol-dark); color: #fff; }

.link-arrow { font-size: 0.95rem; text-decoration: none; }
.link-arrow::after { content: ' \2192'; }
.link-arrow:hover { text-decoration: underline; }

/* -------------------------------------------------------------- Terminal */

.terminal {
  background: var(--term-bg);
  border-radius: 5px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--term-dim);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.terminal__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(168, 208, 176, 0.28);
  flex: none;
}

.terminal__body {
  padding: 1rem 1.1rem 1.3rem;
  color: var(--term-ink);
  overflow-wrap: anywhere;
  min-height: 8rem;
}

.terminal__line { display: block; }
.terminal__line[hidden] { display: none; }
.terminal__prompt { color: var(--term-dim); }
.terminal__done { color: #cfe4d4; }

.terminal__cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  vertical-align: -0.16em;
  background: var(--term-ink);
  animation: blink 1.05s step-end infinite;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.terminal__caption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------- Spalten */

.cols {
  display: grid;
  gap: 2rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 46rem) {
  .cols { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .cols > * { border-left: 1px solid var(--line); padding: 2rem 1.75rem 0.5rem; }
  .cols > *:first-child { border-left: 0; padding-left: 0; }
}

@media (max-width: 45.999rem) {
  .cols > * { padding-top: 1.75rem; border-top: 1px solid var(--line); }
  .cols > *:first-child { border-top: 0; }
}

.col__title { font-size: 1.0625rem; margin-bottom: 0.6rem; }
.col__body { color: var(--ink-muted); font-size: 0.9375rem; }

/* -------------------------------------------------------------- Projekte */

/* Jedes Projekt ist ein <details>. Der Aufklapper kommt damit vom Browser und
   funktioniert ohne JavaScript, mit Tastatur und mit Screenreader; die Suche
   im Browser klappt geschlossene Abschnitte selbst auf. Das eigene Dreieck
   ersetzt nur die Standardmarkierung.

   Im <summary> steht alles, was auch im zugeklappten Zustand lesbar bleiben
   muss: Titel, Herkunft, ein Satz zur Sache. Ein <p> waere dort nicht erlaubt
   (nur Phrasing- und Heading-Content), deshalb sind Teaser und Kopfzeile
   <span> mit display:block. */

.section__intro {
  max-width: var(--measure);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin: -0.75rem 0 2rem;
}

.projects { border-top: 1px solid var(--line); }

.project { border-bottom: 1px solid var(--line); }

/* Nach dem letzten Projekt beginnt sofort die naechste Sektion mit ihrer
   eigenen border-top. Beide Linien zusammen ergeben einen doppelten
   Strich; die untere der Sektion bleibt, diese hier faellt weg. */
.project:last-child { border-bottom: 0; }

.project__summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding-block: 1.6rem;
  position: relative;
}
.project__summary::-webkit-details-marker { display: none; }
.project__summary:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }

.project__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
}

.project__title { font-size: 1.1875rem; }

/* Techniklabel neben dem Projekttitel. Feiner Rahmen statt Fuellfarbe, damit
   sie sich nicht wie Buttons anfuehlen. */
.tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

.project__kind {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.project__teaser {
  display: block;
  margin-top: 0.55rem;
  max-width: var(--measure);
  color: var(--ink-muted);
}

.project__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--petrol);
}
.project__summary:hover .project__toggle { color: var(--petrol-dark); }
.project__toggle svg { transition: transform 140ms ease; }
.project[open] .project__toggle svg { transform: rotate(180deg); }
.project__toggle-label--auf { display: none; }
.project[open] .project__toggle-label--zu { display: none; }
.project[open] .project__toggle-label--auf { display: inline; }

.project__detail { padding-bottom: 2.25rem; }
.project__detail > .prose { margin-bottom: 0.5rem; }

/* Zwischenueberschriften im aufgeklappten Auroq-Block: sie ordnen die drei
   Bloecke (Entscheidungen, Umfang, Technik), ohne wie eine eigene Sektion zu
   wirken. */
.detail-heading {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 2rem 0 0.75rem;
}

.project__themes {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}
.project__themes strong { color: var(--ink); font-weight: 500; }

/* Detailraster im Auroq-Block: zwei Spalten Fliesstext, feine Trennlinien. */
.detail-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 46rem) {
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid > * { padding: 1.4rem 2rem 1.4rem 0; border-bottom: 1px solid var(--line); }
  .detail-grid > *:nth-child(2n) { padding-left: 2rem; border-left: 1px solid var(--line); padding-right: 0; }
}

@media (max-width: 45.999rem) {
  .detail-grid > * { padding-block: 1.3rem; border-bottom: 1px solid var(--line); }
}

.detail__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.45rem;
}
.detail__body { font-size: 0.9375rem; color: var(--ink-muted); margin: 0; }

/* Zahlenleiste */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem 1rem;
  padding-top: 0.25rem;
}

.figure__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--petrol);
  display: block;
}

.figure__label {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  display: block;
  margin-top: 0.15rem;
}

.stack-note {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--ink-muted);
  max-width: 46rem;
  margin: 0;
}
.stack-note b { color: var(--ink); font-weight: 400; }

/* ----------------------------------------------------------- Arbeitsweise */

.principles { display: grid; gap: 1.75rem; max-width: 46rem; }

.principle { border-left: 2px solid var(--sage); padding-left: 1.25rem; }
.principle__title { font-size: 1rem; margin-bottom: 0.35rem; }
.principle__body { color: var(--ink-muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------- Kontakt */

.contact { background: var(--petrol); color: #fff; padding-block: var(--section-y); }
.contact h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); margin-bottom: 1rem; }
.contact p { max-width: var(--measure); color: rgba(255, 255, 255, 0.88); }

.contact__mail {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
.contact__mail:hover { color: #fff; text-decoration-color: #fff; }

.contact__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }

.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 0.15rem;
}
.contact__link:hover { color: #fff; border-bottom-color: #fff; }
.contact__link svg { flex: none; }

.contact .btn { background: #fff; color: var(--petrol); }
.contact .btn:hover { background: rgba(255, 255, 255, 0.9); color: var(--petrol-dark); }

/* ---------------------------------------------------------------- Footer */

.site-footer { padding-block: 2.25rem; font-size: 0.875rem; color: var(--ink-muted); }

.site-footer__inner { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.site-footer a { color: var(--ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--petrol); text-decoration: underline; }
.site-footer__sep { color: var(--line-strong); }

/* ------------------------------------------------------- Rechtliche Seiten */

.legal { padding-block: var(--section-y); }
.legal h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); margin-bottom: 2rem; }
.legal h2 { font-size: 1.125rem; margin: 2.25rem 0 0.6rem; }
.legal p, .legal ul { max-width: var(--measure); color: var(--ink-muted); }
.legal ul { padding-left: 1.15rem; }
.legal li { margin-bottom: 0.4rem; }
.legal address { font-style: normal; }

.legal__back { display: inline-block; margin-bottom: 2rem; font-size: 0.9rem; text-decoration: none; }
.legal__back::before { content: '\2190\00a0'; }
.legal__back:hover { text-decoration: underline; }