/* Helmut Schmidinger – Platzhalterseite „Wartungsarbeiten“
   Look der bisherigen Website helmutschmidinger.at (Topline, Klaviatur, Zitatbox, Foto mit Namensband).
   Jost steht für Futura (Name + Slogan), sonst Systemschrift Helvetica/Arial wie im Original. */

@font-face {
  font-family: "Jost";
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/jost-latin-wght.woff2") format("woff2");
}

:root {
  --ink: #2c2d39;          /* Topline, Tasten */
  --night: #171a33;        /* Zitatbox */
  --navy: 27 32 79;        /* Navigation + Namensband, mit Deckkraft */
  --lime: #a5bd15;
  --line: #98a2d3;
  --keys-bg: #dcdcde;
  --paper: #e9e9eb;
  --panel: #f7f7f7;
  --page: 60rem;           /* 960 px wie das Original */
  --pad: clamp(1rem, 4vw, 2.5rem);
  --quote-w: 23.5rem;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

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

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

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Sprachumschaltung (de | en) ohne JavaScript ----------
   Ohne :has()-Unterstützung (sehr alte Browser) sind einfach beide Sprachen sichtbar. */

.lang-anchor { position: absolute; top: 0; left: 0; }

body:not(:has(#en:target)) .t-en { display: none; }
body:has(#en:target) .t-de { display: none; }

/* ---------- Topline ---------- */

.topline { background: var(--ink); }

.topline__inner {
  display: flex;
  gap: .6rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1rem;
  color: #fff;
  font-size: .9375rem;
  line-height: 1.75rem;
}
.lang a { color: #fff; text-decoration: none; }
body:not(:has(#en:target)) .lang a[href="#de"],
body:has(#en:target) .lang a[href="#en"] { color: var(--lime); }
@media (hover: hover) {
  .lang a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ---------- Seite (960 px, mittig) ---------- */

.page {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  background: var(--keys-bg);
}

.keys {
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem 1rem;
  background: var(--keys-bg);
}
.keys svg { display: block; width: min(33.25rem, 100%); height: auto; }

.bar {
  display: flex;
  align-items: center;
  min-height: 2.125rem;
  padding: .35rem 1rem;
  background: rgb(var(--navy) / .75);
  color: #fff;
}
.bar p {
  margin: 0;
  font-size: 1rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.hero { position: relative; margin: 0; }
.hero img { display: block; width: 100%; height: auto; }

.hero__band {
  display: grid;
  gap: .3rem;
  padding: 1.25rem 1rem 1.4rem;
  border-bottom: 3px solid var(--line);
  background: rgb(var(--navy));
  text-align: right;
}
.hero__name {
  color: var(--lime);
  font: 400 clamp(1.5rem, 1rem + 2.4vw, 2.4rem)/1.1 "Jost", "Futura", "Century Gothic", sans-serif;
  letter-spacing: .14em;
}
.hero__slogan {
  color: #fff;
  font: 400 clamp(1rem, .8rem + .9vw, 1.45rem)/1.25 "Jost", "Futura", "Century Gothic", sans-serif;
  letter-spacing: .03em;
}

/* ---------- Hinweis ---------- */

.msg {
  flex: 1;
  padding: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) var(--pad);
  background: var(--panel);
}
.msg h1 {
  max-width: 34rem;
  margin: 0 0 1rem;
  color: rgb(var(--navy));
  font: 500 clamp(1.6rem, 1.1rem + 2vw, 2.25rem)/1.15 "Jost", "Futura", "Century Gothic", sans-serif;
  letter-spacing: .01em;
  text-wrap: balance;
}
.msg p { max-width: 38rem; margin: 0 0 1.5rem; text-wrap: pretty; }

.msg__contact {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.msg__contact li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; }
.msg__label {
  min-width: 4.5rem;
  color: #6b6c78;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.msg__contact a {
  color: rgb(var(--navy));
  font-weight: 700;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

/* ---------- Zitatbox ---------- */

.quote {
  margin: 0;
  padding: 1.75rem var(--pad);
  background: var(--night);
  color: #fff;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.65;
}
.quote p { margin: 0 0 1rem; }
.quote footer { color: var(--lime); font-style: normal; }

/* ---------- Footer mit Impressum ---------- */

.foot {
  background: var(--ink);
  color: #c9cad3;
  font-size: .8125rem;
  line-height: 1.65;
}
.foot__inner {
  display: grid;
  gap: 1.25rem 3rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 2rem var(--pad) 2.25rem;
}
.foot h2 {
  margin: 0 0 .5rem;
  color: var(--lime);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.foot p { margin: 0 0 .35rem; }
.foot a { color: #fff; text-underline-offset: 3px; overflow-wrap: anywhere; }
.foot__credit { color: #9d9eab; }

/* ---------- ab Tablet: Anordnung wie das Original ---------- */

@media (min-width: 48rem) {
  .keys { padding: 0 1.6rem 1.05rem var(--quote-w); }

  .bar { padding-left: calc(var(--quote-w) + 2.25rem); }

  /* Zitatbox liegt links oben über Klaviatur, Navigation und Foto */
  .quote {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--quote-w);
    padding: 1.75rem 1.75rem 2rem;
  }

  /* Namensband liegt halbtransparent über dem unteren Fotorand */
  .hero__band {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    align-content: start;
    min-height: 10.2rem;
    padding: 2rem 2.5rem 1.5rem;
    background: rgb(var(--navy) / .9);
  }

  .foot__inner { grid-template-columns: 1.5fr 1fr; align-items: end; }
}

/* ---------- sanftes Einblenden beim Laden ---------- */

.msg > * { animation: rise .8s var(--ease-out) both; }
.msg > :nth-child(2) { animation-delay: .06s; }
.msg > .msg__contact { animation-delay: .14s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}

@media (prefers-reduced-motion: reduce) {
  .msg > * { animation: none; }
}