/* ==========================================================================
   main.css — Basis-Typografie, Layout und Seitenbereiche
   Skibi IT GmbH — www.skibi-it.com
   ========================================================================== */

/* ---- Basis ---------------------------------------------------------------- */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-bg);
}

h1,
h2,
h3,
h4 {
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
}

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

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

p a {
  text-underline-offset: 0.25em;
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--color-ink);
  color: var(--color-inverse-ink);
}

/* Nur für Screenreader sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Verhindert Zeilenumbruch innerhalb eines Ausdrucks (z. B. „Senior IT-Consultant") */
.nowrap {
  white-space: nowrap;
}

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

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

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

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

.section--tight {
  padding-block: var(--space-xl);
}

/* Letzte Sektion vor dem Footer: geringere Unterkante, damit der Abstand zum
   schwarzen Footer-Block dem Rhythmus der Unterseiten entspricht. */
.section--tight-bottom {
  padding-bottom: var(--space-xl);
}

/* Abschluss-CTA am Seitenende (v1.3): kein eigenes Padding oben, damit der
   Button optisch zum vorangehenden Inhalt gehört. Der Abstand entsteht allein
   aus der Unterkante der letzten Inhaltssektion (einheitlich --space-xl). */
main > .section--tight:last-child {
  padding-top: 0;
}

.prose {
  max-width: var(--content-narrow);
  color: var(--color-ink-soft);
}

.prose p + p {
  margin-top: var(--space-s);
}

.prose strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* Aufzählung innerhalb eines Fließtextblocks braucht Luft nach oben. Als
   Kontextregel formuliert, weil das für jede künftige Liste in `.prose` gilt. */
.prose > .square-list {
  margin-top: var(--space-m);
}

/* Abschließender Verweis unter einem Fließtextblock, deutlich abgesetzt. */
.prose__cta {
  margin-top: var(--space-l);
}

/* Eigenständiger Fließtextblock, der einer Liste oder einem Kartenraster folgt
   (Branchen und Zusammenarbeit auf /leistungen/). Modifier statt Kontextregel,
   damit der Abstand eine bewusste Entscheidung je Stelle bleibt. */
.prose--spaced {
  margin-top: var(--space-xl);
}

/* Zweispaltiges Editorial-Layout: Überschrift links, Inhalt rechts */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-l) var(--space-xl);
  align-items: start;
}

@media (max-width: 56.25em) {
  .split {
    grid-template-columns: 1fr;
  }
}

.split__head h2 {
  max-width: 14em;
}

.split__head .eyebrow {
  margin-bottom: var(--space-s);
}

/* ---- Seiten-spezifische Bereiche --------------------------------------------- */

/* Vertrauenszeile im Hero (Leistungsschlagworte) */
.hero__meta span {
  white-space: nowrap;
}

/* CTA unterhalb einer Sektion */
.section__cta {
  margin-top: var(--space-xl);
}

/* Gründer-Sektion (Unternehmensseite) */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-l) var(--space-xl);
  align-items: start;
}

@media (max-width: 56.25em) {
  .founder {
    grid-template-columns: 1fr;
  }
}

.founder__media {
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--color-surface);
}

.founder__media img {
  width: 100%;
  height: auto;
}

.founder__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-m);
}

/* Hero auf Bildschirmhöhe (Falz-Hero) ------------------------------------------
   Der Hero füllt die verbleibende Bildschirmhöhe (Fensterhöhe abzüglich Header
   samt dessen 1px-Rahmen). Dadurch liegt die Trennlinie des folgenden Abschnitts
   genau auf der Unterkante des ersten Bildschirms und wird erst beim Scrollen
   sichtbar. Ist der Inhalt höher, wächst der Hero normal weiter. Die Klasse
   `page-fold` liegt am <body>; Seiten mit bewusst kompaktem Hero (Kontakt,
   Projekte) tragen sie nicht. */
.page-fold .hero {
  min-height: calc(100vh - var(--header-height) - 1px);
  min-height: calc(100svh - var(--header-height) - 1px);
}

/* Startseite (/) --------------------------------------------------------------
   Kompakterer Hero: Titel, Lead, Button und die nummerierten Kompetenzen sollen
   auf üblichen Laptop-Auflösungen ohne Scrollen sichtbar bleiben. Erreicht wird
   das allein über engere Abstände. Der Schriftgrad der H1 kommt aus `--text-h1`
   und ist damit auf allen Seiten identisch, eine eigene Kurve gibt es hier nicht
   mehr. Der engere Abstand unter der H1 ist Teil der Verdichtung: Auf `--space-l`
   angehoben, verliert der Hero bei 1024x768 seine letzte Reserve.
   Das obere Hero-Padding steht seit der Vereinheitlichung in components.css und
   gilt für alle Seiten gleich, hier ist deshalb keine Ausnahme mehr nötig. */
.page-start .hero h1 {
  margin-bottom: var(--space-m);
}

.page-start .hero__lead {
  margin-bottom: var(--space-m);
}

.page-start .hero__meta--cols {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
}

/* Projektseite (/projekte/) ---------------------------------------------------
   Nutzt bestehende Bausteine (Hero, Eyebrows, square-list, Abstandsvariablen).
   Die ausführlichen Projekte werden ausschließlich über Linien und Abstände
   getrennt – ohne Karten, Schatten oder wechselnde Hintergrundfarben. */

/* Kompakter Seitenkopf: Hero-Titel wie auf den übrigen Seiten (--text-h1),
   der Projektbereich folgt ohne Trennlinie und mit reduziertem Abstand direkt darunter. */
.page-projekte .hero {
  padding-bottom: var(--space-l);
}

.page-projekte .hero + .section {
  padding-top: 0;
}

/* Dezenter Herkunfts-/Anonymisierungshinweis unter der H1 */
.page-projekte .hero__note {
  max-width: var(--content-narrow);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Ausführliche Projektbeispiele: ruhige zweispaltige Darstellung */
.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-l) var(--space-xl);
  align-items: start;
  padding-block: var(--space-l);
  border-top: 1px solid var(--color-line);
}

.project:first-child {
  padding-top: 0;
  border-top: 0;
}

.project:last-child {
  padding-bottom: 0;
}

/* Linke Spalte: Branche, Tätigkeitsform und Rolle als Beschreibungspaare */
.project__meta {
  display: grid;
  gap: var(--space-m);
}

.project__meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2xs);
}

.project__meta dd {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink);
}

/* Rechte Spalte: Überschrift, Kurzbeschreibung, Aufgaben, Schwerpunkte */
/* Projekttitel sind semantisch H2 (unter der Seiten-H1), werden aber
   bewusst in H3-Optik dargestellt, damit das ruhige Listenbild erhalten bleibt. */
.project__body h2 {
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-s);
}

.project__desc {
  max-width: var(--content-narrow);
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.project__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
}

.project__focus {
  max-width: var(--content-narrow);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (max-width: 56.25em) {
  .project {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
}

/* Kontaktseite: Kontaktdaten + Formular */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--space-xl);
  align-items: stretch;
}

@media (max-width: 56.25em) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  background: var(--color-surface);
  border-radius: var(--radius-m);
}

.contact-card dl {
  display: grid;
  gap: var(--space-m);
}

.contact-card dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 0.25rem;
}

.contact-card dd {
  margin: 0;
  font-size: var(--text-base);
}

.contact-card a {
  text-underline-offset: 0.3em;
}

/* Rechtsseiten (Impressum, Datenschutz) */

/* Kompakter Übergang vom Kopf zum Rechtstext: ohne Trennlinie wirkt das volle
   Sektions-Padding als zu großer Leerraum. Titel und Text rücken näher zusammen
   (gleiches Muster wie auf der Projekteseite). */
.page-legal .hero {
  padding-bottom: var(--space-l);
}

.page-legal .hero + .section {
  padding-top: 0;
}

.legal {
  max-width: var(--content-narrow);
}

.legal h2 {
  font-size: 1.5rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-s);
}

/* Steht eine H2 am Anfang ihres Containers (Datenschutz: der Titel sitzt im
   Hero, der Text beginnt direkt mit Abschnitt 1), fällt ihr oberer Abstand aus
   dem Container heraus und schiebt den gesamten Rechtstext um 80 px nach unten. */
.legal h2:first-child {
  margin-top: 0;
}

.legal h1 + p,
.legal p {
  color: var(--color-ink-soft);
}

.legal p + p {
  margin-top: var(--space-s);
}

.legal ul {
  margin-top: var(--space-s);
}

.legal .notice {
  margin-top: var(--space-s);
}

/* Weitere Leistungen (Querverlinkung auf Detailseiten) */
.related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.related a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.related a:hover {
  border-color: var(--color-ink);
  background: var(--color-surface);
}

.related a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ---- Kontaktseite kompakt (v1.1, nachjustiert v1.3) ---------------------------
   Ziel: Projektanfrage bei 1366x768 und 1440x900 ohne Scrollen möglich.
   v1.3: Hero-Padding reduziert (Maximalwert griff bereits ab ~1280px) und
   Textarea leicht verkleinert, damit Formular samt Button über dem Fold endet.
   Gilt nur innerhalb von main.page-kontakt und verändert keine anderen Seiten. */

.page-kontakt .hero {
  padding-bottom: 0.75rem;
}

.page-kontakt .breadcrumbs {
  margin-bottom: 0;
}

.page-kontakt .eyebrow {
  margin-bottom: 0.375rem;
}

/* Titel und Einleitung stehen in der linken Spalte neben dem Formular, damit
   das Formular nicht nach unten geschoben wird und die Anfrage auf üblichen
   Laptop-Höhen ohne Scrollen sichtbar bleibt. */
.page-kontakt .contact-intro h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  margin-bottom: 0.625rem;
}

.page-kontakt .contact-intro__lead {
  font-size: var(--text-base);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-l);
}

.page-kontakt .section {
  padding-block: 0.75rem 2rem;
}

.page-kontakt .contact-card {
  padding: 1.25rem 1.5rem;
}

.page-kontakt .contact-card dl {
  gap: var(--space-s);
}

.page-kontakt .form,
.page-kontakt .form__row {
  gap: 0.625rem;
}

.page-kontakt .field {
  gap: 0.25rem;
}

.page-kontakt .field label {
  font-size: var(--text-xs);
}

/* Fehlermeldungen im selben Grad wie die Labels dieser Seite. Ohne diese Regel
   sind die Fehlertexte mit 15 px größer als die 13-px-Labels darüber, und der
   Höhensprung beim Einblenden fällt entsprechend stärker aus. */
.page-kontakt .field__error {
  font-size: var(--text-xs);
}

.page-kontakt .field input,
.page-kontakt .field select {
  padding: 0.375rem 0.875rem;
}

/* Nur das Innenpolster wird verdichtet. Die Höhe des Nachrichtenfelds kommt aus
   `.field textarea` in components.css (min-height 9rem) und entspricht damit den
   deklarierten rows="5". Eine frühere Festhöhe von 6.5rem ließ nur rund drei
   Zeilen sichtbar, ausgerechnet im wichtigsten Feld des Formulars. Gemessen:
   Der Absende-Button bleibt auch mit der vollen Höhe bei 901 bis 1920 px
   Fensterbreite über dem Falz von 768 px. */
.page-kontakt .field textarea {
  padding: 0.5rem 0.875rem;
}

.page-kontakt .form__hint {
  font-size: var(--text-xs);
}