/* Areal17 – Startseite
 *
 * Desktop: Der Entwurf ist eine 1920 × 1080-Fläche. Alle Positionen und Größen
 * werden in Entwurfspixeln angegeben (--x, --y, --w, --h) und über --u auf das
 * Browserfenster skaliert, damit die Seite immer wie der Entwurf aussieht.
 * Hochformat / schmale Fenster: einfaches Stapel-Layout (siehe unten).
 */

:root {
  --color-bg: #f7f2e8;
  --color-panel: #d1c6af;
  --color-panel-stroke: #979797;
  --color-brand: #110c69;
  --color-brand-hover: #241d8f;
  --color-heading: #424341;
  --color-text: #000;

  --font-mono: Menlo, "DejaVu Sans Mono", Consolas, "Liberation Mono", monospace;
  --font-sans: Arial, Helvetica, sans-serif;
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow: hidden;
}

h1,
h2,
p {
  margin: 0;
}

/* ---------- Bühne (Desktop) ---------- */

.stage {
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  position: relative;
  width: calc(1920 * var(--u));
  height: calc(1080 * var(--u));
  margin: 0 auto;
  top: 50%;
  translate: 0 -50%;
}

@supports (height: 100dvh) {
  .stage {
    --u: min(calc(100vw / 1920), calc(100dvh / 1080));
  }
}

.pos {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

.shadow {
  filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 0.25));
}

.panel-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.panel-shape path {
  fill: var(--color-panel);
  stroke: var(--color-panel-stroke);
  stroke-width: 1;
}

/* ---------- Logo ---------- */

.brand-logo {
  fill: var(--color-brand);
}

.brand-name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(41 * var(--u));
  line-height: 1.2;
  color: var(--color-brand);
}

/* ---------- Headline ---------- */

.hero-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(54 * var(--u));
  line-height: calc(63 * var(--u));
  color: var(--color-heading);
}

/* ---------- Fließtext ---------- */

.scroll-area {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: calc(10 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: calc(31 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: rgb(17 12 105 / 0.45) transparent;

  /* Weicher Rand oben/unten, sobald es dort weiteren Text gibt (setzt js/main.js) */
  --fade-top: 0px;
  --fade-bottom: 0px;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-top),
    #000 calc(100% - var(--fade-bottom)),
    transparent 100%
  );
}

.scroll-area.has-more-above {
  --fade-top: calc(48 * var(--u));
}

.scroll-area.has-more-below {
  --fade-bottom: calc(64 * var(--u));
}

.scroll-area:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: calc(8 * var(--u));
}

.scroll-area p + p {
  margin-top: calc(31 * var(--u));
}

/* ---------- Aktuelle Arbeiten ---------- */

.apps-title,
.app-name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(31 * var(--u));
  line-height: 1.2;
  color: var(--color-heading);
  white-space: nowrap;
}

.app {
  display: block;
  color: inherit;
  text-decoration: none;
}

.app-icon {
  overflow: visible;
  transition: transform 0.2s ease;
}

.app-icon-bg {
  fill: var(--color-bg);
}

.app-icon-outline {
  fill: none;
  stroke: var(--color-panel-stroke);
  stroke-width: 2;
}

.app:hover .app-icon,
.app:focus-visible .app-icon {
  transform: translateY(calc(-4 * var(--u))) scale(1.03);
}

.app:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: calc(6 * var(--u));
  border-radius: 8px;
}

/* ---------- Button (Kontakt, Start, Senden) ---------- */

.btn {
  display: flex;
  align-items: center;
  padding-left: calc(38 * var(--u));
  margin: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--font-sans);
  font-size: calc(36 * var(--u));
  text-decoration: none;
  cursor: pointer;
}

.btn-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.btn-shape path {
  fill: var(--color-brand);
  stroke: var(--color-panel-stroke);
  stroke-width: 1;
  transition: fill 0.2s ease;
}

.btn:hover .btn-shape path,
.btn:focus-visible .btn-shape path {
  fill: var(--color-brand-hover);
}

.btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
  border-radius: 12px;
}

.btn-label {
  position: relative;
}

/* ---------- Kontaktformular ---------- */

.contact-form {
  display: flex;
  flex-direction: column;
}

.field + .field {
  margin-top: calc(20 * var(--u));
}

.field-label {
  display: block;
  margin-bottom: calc(14 * var(--u));
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(31 * var(--u));
  line-height: 1.2;
  color: var(--color-heading);
}

.field-input {
  display: block;
  width: 100%;
  height: calc(71 * var(--u));
  margin: 0;
  padding: 0 calc(16 * var(--u));
  border: 1px solid var(--color-brand);
  border-radius: 0;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: calc(28 * var(--u));
}

textarea.field-input {
  height: calc(399 * var(--u));
  padding-block: calc(12 * var(--u));
  line-height: 1.3;
  resize: none;
}

.field-input:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 0;
}

.field-input:user-invalid {
  border-color: #b3261e;
  outline-color: #b3261e;
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Statuszeile zwischen Nachricht und Button; Höhe ist fest, damit nichts springt */
.form-status {
  height: calc(22 * var(--u));
  margin-top: calc(10 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  color: var(--color-brand);
}

.form-status-msg {
  display: none;
}

/* :target gilt für die Rückleitung ohne JavaScript (kontakt.html#gesendet) */
.contact-form:not(.js-submitted) .form-status-msg:target,
.form-status-msg.is-visible {
  display: block;
}

.form-status-msg.is-error {
  color: #b3261e;
}

.form-status-msg a {
  color: inherit;
}

.form-actions {
  display: flex;
  align-items: center;
  margin-top: calc(10 * var(--u));
}

.contact-submit {
  position: relative;
  flex-shrink: 0;
  width: calc(179 * var(--u));
  height: calc(55 * var(--u));
  margin-left: calc(151 * var(--u));
}

.contact-submit:disabled {
  cursor: progress;
  opacity: 0.7;
}

.form-privacy {
  margin-left: calc(24 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  color: var(--color-heading);
}

.form-privacy a,
.legal-text a {
  color: var(--color-brand);
}

/* ---------- Datenschutz-Link & Rechtstext ---------- */

.legal-link {
  font-family: var(--font-mono);
  font-size: calc(20 * var(--u));
  line-height: calc(30 * var(--u));
  color: var(--color-heading);
  text-underline-offset: 0.2em;
}

.legal-link:hover,
.legal-link:focus-visible {
  color: var(--color-brand);
}

.legal-text {
  font-size: calc(24 * var(--u));
  line-height: calc(31 * var(--u));
}

.legal-text h2 {
  margin-top: calc(48 * var(--u));
  font-family: var(--font-mono);
  font-size: calc(28 * var(--u));
  line-height: 1.2;
  color: var(--color-heading);
}

.legal-text h2 + p,
.legal-text h2 + ul {
  margin-top: calc(12 * var(--u));
}

.legal-text p + ul,
.legal-text ul + p {
  margin-top: calc(16 * var(--u));
}

.legal-text ul {
  margin-bottom: 0;
  padding-left: 1.2em;
}

.legal-text li + li {
  margin-top: calc(6 * var(--u));
}

/* ---------- Hochformat / schmale oder flache Fenster ----------
 * Auch Smartphones quer (max-height) und Tablets quer (max-width) bekommen das
 * Stapel-Layout – skaliert wäre der Entwurf dort zu klein, um ihn zu lesen.
 */

@media (max-aspect-ratio: 1/1), (max-width: 1100px), (max-height: 600px) {
  body {
    overflow: auto;
  }

  .stage {
    --u: 1px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: min(100%, 680px);
    height: auto;
    top: 0;
    translate: none;
    padding: 24px 16px 40px;
  }

  .pos {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  .shadow {
    filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.25));
  }

  /* Logo + Name */
  .brand {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .brand-logo {
    width: 64px;
    height: 58px;
  }

  .brand-name {
    font-size: 28px;
  }

  /* Headline: Die Form behält ihr Seitenverhältnis, der Titel sitzt wie im Entwurf
     und wird über Container-Einheiten mit der Breite der Form skaliert. */
  .hero {
    --pw: var(--w);
    width: min(100%, 460px);
    aspect-ratio: var(--w) / var(--h);
    container-type: inline-size;
  }

  .hero > .pos {
    --u: calc(100cqw / var(--pw));
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
  }

  /* Fließtext: wächst mit, die Seite scrollt. Abstand oben/unten setzt js/main.js
     passend zur Höhe, weil die schrägen Kanten der gestreckten Form mitwachsen. */
  .intro {
    padding: var(--pad-top, 72px) 11% var(--pad-bottom, 88px) 17%;
  }

  .scroll-area {
    overflow: visible;
    padding-right: 0;
    font-size: 18px;
    line-height: 1.45;
    mask-image: none;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .scroll-area p + p {
    margin-top: 1em;
  }

  /* Apps */
  .apps {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 40px;
  }

  .apps-title {
    flex-basis: 100%;
    font-size: 22px;
  }

  .app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .app-icon {
    width: 130px;
    height: auto;
  }

  .app-name {
    font-size: 20px;
  }

  /* Buttons */
  .btn-nav {
    align-self: flex-end;
  }

  .btn {
    width: 183px;
    height: 57px;
    font-size: 30px;
  }

  /* Kontakt: Formular wächst mit, die Seite scrollt */
  .contact-panel {
    padding: 64px 11% 72px 17%;
  }

  .field-label {
    font-size: 20px;
  }

  .field-input {
    height: 48px;
    font-size: 18px;
  }

  textarea.field-input {
    height: 220px;
    resize: vertical;
  }

  .form-status {
    height: auto;
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.35;
  }

  .form-actions {
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 16px;
  }

  .contact-submit {
    margin-left: 0;
  }

  .form-privacy {
    margin-left: 0;
    font-size: 15px;
    line-height: 1.4;
  }

  .legal-link {
    order: 1;
    align-self: flex-start;
    font-size: 16px;
    line-height: 1.5;
  }

  .legal-text h2 {
    margin-top: 2em;
    font-size: 20px;
  }

  .github {
    align-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-icon,
  .btn-shape path {
    transition: none;
  }
}