/* =================================================================
   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(120px, 12.1%, 145px);
  height: auto;
}

.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%;
}

/* Handschriftliche Randnotiz — unten rechts im Bild verankert,
   damit sie auf jeder Breite im Bild bleibt. */
.hero-figure__note {
  position: absolute;
  right: clamp(14px, 3.5%, 46px);
  bottom: clamp(14px, 6%, 34px);
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(19px, 2.3vw, 29px);
  line-height: 1;
  color: var(--ink-900);
  transform: rotate(-2.5deg);
  transform-origin: right bottom;
  pointer-events: none;
  text-wrap: nowrap;
}

/* =================================================================
   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);
  }
  .hero-figure__note { font-size: clamp(17px, 5vw, 22px); }
}

/* 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(18px, 3vw, 32px);
  }
  .page__main { gap: clamp(16px, 3vw, 32px); }
  .logo { width: clamp(112px, 11%, 136px); }
  .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. */
.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);
}

/* =================================================================
   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; }
}