/* Turmberg Software – turmbergsoftware.de
   Fonts are self-hosted on purpose: loading them from Google's servers
   would send visitors' IP addresses to Google (GDPR). */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
}

:root {
  /* Brand colors */
  --schiefer: #16202B;
  --pfinz: #2F6F73;
  --pfinz-dunkel: #245E63;
  --pfinz-hell: #5FAFAA;
  --nebel: #EEF0F3;

  /* Neutrals */
  --seite: #FFFFFF;
  --grau: #5B6673;
  --rand: #D5DAE0;

  /* Space Grotesk, the more angular of the two, is the site's typeface.
     DM Sans is kept for long running text, where it reads more easily. */
  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-lesetext: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Header, hero, sections and footer span the full window.
     Set a length here (e.g. 1440px) to cap and center them instead. */
  --breite: none;

  /* The page's side margin: how far the header, the hero tagline and the
     footer stand in from the edges of the window. All three use it, so
     their edges line up from top to bottom. */
  --innen: clamp(24px, 4vw, 56px);

  color-scheme: light;
}

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

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

/* Header, main and footer fill at least one window. Main takes the height
   that is left, so the landing page fits on one screen without scrolling. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  background: var(--seite);
  color: var(--schiefer);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Logo mark (used in header and hero tower) ---------- */

/* The tower is drawn in lines: a crenellated top on two legs with two
   crossbars. Square joins and ends keep it as angular as the typeface. */
.mark path {
  fill: none;
  stroke: var(--schiefer);
  stroke-width: 3.2;
}

/* ---------- Header ---------- */

.site-header {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 20px var(--innen);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px clamp(8px, 3vw, 16px);
}

/* Equal 1fr columns left and right keep the navigation centered in the
   window, however wide the brand and the Login pill are. */
.site-header .brand { justify-self: start; }
.site-header .pill { justify-self: end; }

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 3.5vw, 40px);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--schiefer);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover { color: var(--pfinz); }

/* Too narrow for one row: the navigation moves below brand and pill, and
   navigation and pill go back to a smaller size so both rows still fit on
   a narrow phone. */
@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .site-nav a,
  .site-header .pill { font-size: 15px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--schiefer);
  text-decoration: none;
}
.brand:hover { color: var(--schiefer); }
/* Mark, wordmark and pill shrink a little on narrow phones so that brand
   and pill still fit side by side at 320px. */
.brand .mark {
  flex: none;
  width: clamp(27px, 8.5vw, 36px);
  height: clamp(27px, 8.5vw, 36px);
}

.wordmark {
  font-size: clamp(16px, 5vw, 21px);
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark b { font-weight: 700; }
.wordmark span { font-weight: 400; color: var(--grau); }

/* ---------- Buttons ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 clamp(14px, 4.5vw, 22px);
  border: 1px solid var(--rand);
  border-radius: 999px;
  color: var(--schiefer);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.pill:hover {
  background: var(--nebel);
  color: var(--schiefer);
}

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

/* The landing page's main: lets the hero stretch to the height left over
   between header and footer. */
.start {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
}

/* The card spans the full window: the view is a panorama, not a framed
   picture. overflow: hidden clips the view and the hill to it, and the
   bottom padding is 0 so the horizon sits flush on the card's bottom edge.
   --luft is the minimum air between the text and the horizon; it tightens
   on low windows so that everything still fits on one screen.
   The gradient is only what shows until assets/aussicht.js has painted the
   view (or if scripts are off); it is dark so the white text stays legible.
   Its last 2px are page-colored: browsers let a clipped box's own
   background show as a hairline along its edge, and under the white hill
   that hairline must not be dark. */
.hero__card {
  --luft: clamp(20px, 5vh - 12px, 56px);
  position: relative;
  flex: 1;
  overflow: hidden;
  background: linear-gradient(#121A42, #42397A 62%, #1A2148 calc(100% - 2px), var(--seite) calc(100% - 2px));
  color: #FFFFFF;
  padding: clamp(20px, 9vh - 24px, 72px) var(--innen) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The text sits in the card's upper left corner; the auto margin below it
   pushes the horizon to the bottom. The soft shadow helps the type over
   clouds. */
.hero__content {
  position: relative;
  text-shadow: 0 1px 22px rgb(8 12 30 / 0.45);
  flex: none;
  margin-bottom: auto;
}

.hero__title {
  margin: 0;
  max-width: 8em; /* breaks the headline after "Software mit" */
  /* 10.6vw keeps "Software mit" on one line on the narrowest phones. */
  font-size: clamp(2rem, min(10.6vw, max(2.125rem, min(4vw, 7.6vh))), 3.5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* The view from the Turmberg, painted by assets/aussicht.js on small
   canvases. Scaling them up and blurring them is what makes the view look
   like footage out of focus. They reach 24px past the card on every side
   (BLEED in the script) so the blur has no faded edge inside the card. */
.aussicht {
  position: absolute;
  left: -24px;
  top: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  filter: blur(6px);
  /* Ends 2px above the card's bottom edge, for the hairline described at
     .hero__card: no dark pixels may lie under the hill's lower edge. */
  clip-path: inset(0 0 26px 0);
  pointer-events: none;
}

/* The lights are blurred less than the land behind them, so they stay the
   round discs that points of light turn into in a lens. */
.aussicht--lichter { filter: blur(1.4px); }

/* Film grain over the view. The script supplies the speckle and moves it. */
.aussicht__korn {
  position: absolute;
  inset: 0 0 2px;
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* The horizon spans the full card width: the negative side margins
   cancel the card's side padding. */
.horizon {
  position: relative;
  align-self: stretch;
  flex: none;
  height: 180px;
  margin: var(--luft) calc(-1 * var(--innen)) 0;
}

/* The hill is filled with the PAGE color, so it reads as the page rising
   into the card. preserveAspectRatio="none" (in the markup) lets it stretch;
   display: block removes the inline-SVG baseline gap under the hill.
   The path runs a little below its viewBox and overflow: visible lets it,
   so no hairline of the dark view shows between hill and page. */
.horizon__hill {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.horizon__hill path { fill: var(--seite); }

/* Separate SVG so the tower never stretches with the hill. It is drawn at
   2.25x its 20x36 viewBox. The hill's peak is 112px from the top;
   33px + 81px = 114px sets the tower's legs 2px into the hill, so they
   stand on it without a gap, also where the hill curves away. */
.horizon__tower {
  position: absolute;
  left: 50%;
  top: 33px;
  width: 45px;
  height: 81px;
  margin-left: -22.5px;
  display: block;
}
/* White on the dark view. */
.horizon__tower path {
  stroke: #FFFFFF;
  stroke-width: 1.7;
}

/* The tower's soft shadow on the hill. */
.horizon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 113px;
  width: 150px;
  height: 24px;
  margin-left: -75px;
  background: radial-gradient(closest-side, rgb(22 32 43 / 0.16), transparent);
}

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

.site-footer {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 8px var(--innen) 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 14px;
  color: var(--grau);
}

.site-footer p { margin: 0; }

.site-footer nav {
  display: flex;
  gap: 24px;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--grau);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a[aria-current="page"] { color: var(--schiefer); }

/* ---------- Legal pages (Impressum, Datenschutz) ---------- */

.rechtliches {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) 24px clamp(64px, 10vw, 128px);
}

.rechtliches h1 {
  margin: 0 0 40px;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.rechtliches h2 {
  margin: 40px 0 12px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.rechtliches p {
  margin: 0 0 16px;
  font-family: var(--font-lesetext);
  font-size: 17px;
  line-height: 1.65;
}

.rechtliches a { overflow-wrap: anywhere; }

.rechtliches .stand {
  margin-top: 48px;
  font-size: 15px;
  color: var(--grau);
}

/* ---------- Paper planes (drawn and moved by assets/flieger.js) ---------- */

/* A layer over the whole window. It lets every click through; only the
   planes' own grab areas react to the pointer. */
.flieger {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.flieger svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  overflow: visible;
  will-change: transform;
  filter: drop-shadow(0 8px 6px rgb(22 32 43 / 0.14));
}

.flieger polygon {
  stroke: rgb(22 32 43 / 0.25);
  stroke-width: 0.75;
  stroke-linejoin: round;
}

.flieger circle {
  fill: transparent;
  pointer-events: all;
  cursor: grab;
  touch-action: none;
}
.flieger .gegriffen circle { cursor: grabbing; }