/* =================================================================
   aufdenpunkt.ai — "bald online" Landing Page
   Tokens und Werte stammen aus dem aufdenpunkt.ai Design System.
   Nur die tatsächlich verwendeten Tokens sind hier übernommen.
   ================================================================= */

:root {
  /* --- Farben ------------------------------------------------- */
  --sand-50:  #fefcf8;   /* Seitenhintergrund */
  --sand-150: #f1efe4;   /* Bild-Platzhalter */
  --sand-300: #e2dfcb;   /* Haarlinie */
  --sand-400: #cbc7ae;   /* Unterstreichung Links */
  --sand-500: #a9a691;   /* Durchstreichung */
  --olive-600:#676556;   /* Fließtext gedämpft */
  --ink-800:  #3b3927;   /* Fließtext */
  --ink-900:  #2c2917;   /* Überschrift / Ink */
  --yellow-500:#efcf00;  /* Signalgelb */
  --yellow-700:#ae9700;  /* Link-Hover */

  /* --- Schrift ------------------------------------------------- */
  --font-sans:  "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-hand:  "Caveat", "Source Sans 3", cursive;
  --weight-light: 300;

  /* --- Layout -------------------------------------------------- */
  --content-max: 1200px;
  --pad-block-start: clamp(22px, 4vw, 44px);
  --pad-inline:      clamp(20px, 5vw, 56px);
  --pad-block-end:   clamp(28px, 5vw, 52px);
  --gap-page:        clamp(32px, 6vw, 56px);
  --gap-main:        clamp(30px, 5vw, 56px);

  /* Abgeschrägte Ecken der Bildfläche (30°-Schnitt) */
  --bevel: clamp(17px, 2.7vw, 39px);

  /* --- Motion -------------------------------------------------- */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset (minimal) ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sand-50);
  color: var(--ink-800);
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

/* --- Links ------------------------------------------------------ */
a {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--sand-400);
  text-underline-offset: 3px;
  transition: color 160ms var(--ease-out-soft),
              text-decoration-color 160ms var(--ease-out-soft);
}

a:hover { color: var(--yellow-700); text-decoration-color: var(--yellow-500); }

a:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =================================================================
   Seitengerüst — füllt den Viewport, wächst bei Bedarf mit
   ================================================================= */
.page {
  min-height: 100vh;      /* Fallback für ältere Browser */
  min-height: 100svh;     /* ohne mobile Browserleisten */
  display: flex;
  flex-direction: column;
  gap: var(--gap-page);
  padding: var(--pad-block-start) var(--pad-inline) var(--pad-block-end);
}

/* Header teilt sich den Container mit .page__main, damit das Logo
   exakt auf der linken Kante der Bildfläche sitzt. */
.page__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Logobreite als Anteil der Inhaltsbreite — skaliert also im selben
   Verhältnis wie die Bildfläche. 12.1% von 1200px = 145px Breite
   = 32px Höhe, exakt der Wert aus dem Design.
   Der untere Anschlag hält das Logo auf schmalen Displays lesbar. */
.logo {
  width: clamp(150px, 15.1%, 181px);
  height: auto;
}

/* Auf den Unterseiten steckt das Logo in einem Link zur Startseite.
   Die Breitenangabe muss dann am Link hängen, sonst rechnet das
   Prozent des Bildes gegen den Link statt gegen den Header — und das
   Logo bliebe auf dem unteren Anschlag stehen. Nebeneffekt: die
   Klickfläche ist exakt so groß wie das Logo, nicht breiter. */
.page__header > a {
  display: block;
  width: clamp(150px, 15.1%, 181px);
}
.page__header > a > .logo { width: 100%; }

.page__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-main);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* =================================================================
   Bildfläche mit abgeschrägten Ecken
   ================================================================= */
.hero-figure {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: var(--sand-150);
  clip-path: polygon(
    var(--bevel) 0,
    100% 0,
    100% calc(100% - var(--bevel) * 0.5774),
    calc(100% - var(--bevel)) 100%,
    0 100%,
    0 calc(var(--bevel) * 0.5774)
  );
  animation: ap-rise 560ms var(--ease-out-soft) both;
}

.hero-figure__img {
  width: 100%;
  /* Breite bestimmt die Höhe — zusätzlich auf einen Anteil der
     restlichen Viewport-Höhe gedeckelt (31rem = Platzbedarf von Header,
     Text und Fußzeile), damit die Seite auf flachen Bildschirmen ohne
     Scrollen auskommt. */
  height: max(160px, min(clamp(210px, 33vw, 480px), calc(100vh - 31rem)));
  height: max(160px, min(clamp(210px, 33vw, 480px), calc(100svh - 31rem)));
  object-fit: cover;
  object-position: 53% 46%;
}


/* =================================================================
   Text
   ================================================================= */
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  animation: ap-rise 560ms 120ms var(--ease-out-soft) both;
}

.hero-copy__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
  hyphens: auto;
}

.hero-copy__lead {
  margin: 0;
  max-width: 68ch;
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.4;
  color: var(--olive-600);
  text-wrap: pretty;
}

.hero-copy__lead s {
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--sand-500);
}

/* =================================================================
   Fußzeile (Kontakt) — im Design standardmäßig ausgeblendet.
   Zum Aktivieren den <footer> in index.html einkommentieren.
   ================================================================= */
.page__footer {
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-top: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--sand-300);
  font-size: 16px;
  line-height: 1.6;
  color: var(--olive-600);
}

/* =================================================================
   Motion
   ================================================================= */
@keyframes ap-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

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

/* =================================================================
   Kleine Viewports: Bild etwas höher, damit der Roboter sichtbar
   bleibt, und die Notiz nicht zu nah an den Rand rutscht.
   ================================================================= */
@media (max-width: 480px) {
  .hero-figure__img {
    height: min(clamp(200px, 52vw, 260px), 40vh);
    height: min(clamp(200px, 52vw, 260px), 40svh);
  }
}

/* Sehr niedrige Querformat-Viewports (z. B. Handy quer):
   Höhe nicht erzwingen, lieber natürlich fließen lassen. */
@media (max-height: 560px) and (orientation: landscape) {
  .page {
    min-height: 0;
    gap: clamp(14px, 2vw, 24px);
    padding-block: clamp(16px, 2.5vw, 28px) clamp(16px, 2.5vw, 28px);
  }
  .page__main { gap: clamp(14px, 2vw, 24px); }
  .logo,
  .page__header > a { width: clamp(140px, 13.8%, 170px); }
  .page__header > a > .logo { width: 100%; }
  .hero-figure__img { height: clamp(130px, 24vh, 220px); }
  .hero-copy__title { font-size: clamp(28px, 4.2vw, 46px); }
  .hero-copy__lead { font-size: clamp(17px, 1.8vw, 22px); }
}

/* =================================================================
   Utilities
   ================================================================= */

/* Nur für Screenreader — visuell entfernt, aber vorlesbar. */
/* Sprunglink: erst sichtbar, wenn er den Fokus bekommt. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink-900);
  color: var(--sand-50);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--sand-50); }

.page__main:focus { outline: none; }

.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =================================================================
   Fußzeile — Kontakt links, Rechtliches rechts
   ================================================================= */
.page__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px clamp(16px, 3vw, 32px);
}

.page__footer p { margin: 0; }

.page__footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 24px);
}

/* LinkedIn als Icon: 24 px Klickfläche (WCAG 2.5.8), mittig zur Textzeile. */
.page__footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  align-self: center;
}

/* =================================================================
   Unterseiten (Impressum, Datenschutz, 404)
   ================================================================= */
.page__main--doc { justify-content: flex-start; }

.prose {
  /* Füllt die volle Inhaltsbreite (max. 1200px), bündig mit Logo
     und Bildfläche der Startseite. */
  max-width: none;
  font-size: 1.0625rem;      /* 17px — Body-Default des Design Systems */
  line-height: 1.62;
  color: var(--ink-800);
  animation: ap-rise 560ms var(--ease-out-soft) both;
}

.prose h1 {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
}

.prose h2 {
  margin: clamp(32px, 4vw, 48px) 0 clamp(8px, 1vw, 12px);
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.28;
  color: var(--ink-900);
}

.prose p { margin: 0 0 1em; }
.prose ul { margin: 0 0 1em; padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }
.prose address { font-style: normal; margin: 0 0 1em; }
.prose strong { font-weight: 500; }

/* Lange Zeilen brauchen mehr Durchschuss, sonst findet das Auge beim
   Zeilenwechsel den Anfang nicht wieder. */
@media (min-width: 900px) and (max-width: 999.98px) {
  .prose { line-height: 1.75; }
}

/* -----------------------------------------------------------------
   Ab 1000px zweispaltig: Überschriften in einer schmalen Spalte
   links, Fließtext rechts daneben. Nutzt die volle Inhaltsbreite
   und hält die Zeilen trotzdem bei rund 70 Zeichen.
   ----------------------------------------------------------------- */
@media (min-width: 1000px) {
  .prose {
    display: grid;
    grid-template-columns: 300px minmax(0, 72ch);
    column-gap: clamp(32px, 4vw, 56px);
    line-height: 1.62;   /* kurze Zeilen brauchen den Extra-Durchschuss nicht */
  }

  /* Standard: alles in die Textspalte … */
  .prose > * { grid-column: 2; }
  /* … Zwischenüberschriften in die schmale Spalte links … */
  .prose > h2 { grid-column: 1; }
  /* … Titel und Schlusszeile über die volle Breite. */
  .prose > h1,
  .prose > .prose__updated { grid-column: 1 / -1; }

  /* Überschrift und zugehöriger erster Absatz sitzen in derselben
     Rasterzeile — beide bekommen denselben Abstand nach oben, damit
     ihre Grundlinien auf einer Höhe beginnen. */
  .prose h2 {
    margin-top: 0;
    padding-top: clamp(32px, 4vw, 48px);
  }
  .prose h2 + p,
  .prose h2 + address,
  .prose h2 + ul { padding-top: clamp(32px, 4vw, 48px); }
}

.prose__lead {
  color: var(--olive-600);
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.4;
}

.prose__updated {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--sand-300);
  font-size: 0.875rem;
  color: var(--olive-600);
}


@media (max-width: 560px) {
  .page__footer { flex-direction: column; align-items: flex-start; }
}