/* =====================================================================
   jografix.ch – Gestaltung
   Aufbau: 1 Grundlagen · 2 Bausteine · 3 Abschnitte · 4 Formular
           5 Fussbereich · 6 Textseiten · 7 Bewegung
   ===================================================================== */

/* ── Schriften (selbst gehostet, keine Verbindung zu Google) ────────── */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 1 Grundlagen ───────────────────────────────────────────────────── */
:root {
  --gruen:        #81b345;
  --gruen-hell:   #99d454;
  --gruen-licht:  #b5e182;
  --schwarz:      #000;
  --text:         #111;
  --weiss:        #fff;
  --rahmen:       #404040;
  --grau:         #f4f4f4;

  --schrift:       'Roboto', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --schrift-titel: 'Roboto Condensed', 'Roboto', system-ui, Arial, sans-serif;
  --schrift-knopf: 'Oswald', 'Roboto Condensed', system-ui, Arial, sans-serif;

  --breite:  1140px;
  --luft:    20px;
  --titel:   clamp(2.75rem, 7vw, 3.75rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; }
img { height: auto; border: 0; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.85;
  margin: 0;
}

p { margin: 0; }

::selection { background: var(--gruen-hell); color: var(--schwarz); }

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

/* ── 2 Bausteine ────────────────────────────────────────────────────── */
.bahn {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--luft);
}

.springmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--gruen-hell);
  color: var(--schwarz);
  font-weight: 700;
}
.springmarke:focus { left: 0; }

.knopf {
  display: inline-block;
  padding: 10px 30px;
  background: var(--gruen-hell);
  color: var(--schwarz);
  border: 0;
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.knopf:hover, .knopf:focus-visible { background: var(--weiss); }
.knopf:active { transform: translateY(1px); }

.knopf--senden {
  background: var(--gruen);
  color: var(--weiss);
  font-family: var(--schrift-knopf);
  font-weight: 700;
  text-transform: uppercase;
}
.knopf--senden:hover, .knopf--senden:focus-visible {
  background: var(--gruen-hell);
  color: var(--schwarz);
}

.textlink {
  color: var(--weiss);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.textlink:hover { color: var(--gruen-hell); }

.vorspann {
  font-size: 1rem;
  line-height: 2;
}

/* Kopfbereich – schwebt über dem Titelbild */
.kopf {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  padding-block: 18px;
}
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.marke { display: inline-block; line-height: 0; }
.marke img { width: clamp(150px, 22vw, 195px); height: auto; }

/* ── 3 Abschnitte ───────────────────────────────────────────────────── */
.abschnitt { padding-block: clamp(48px, 8vw, 80px); }
.abschnitt--gruen  { background: var(--gruen);   color: var(--weiss); }
.abschnitt--dunkel { background: var(--schwarz); color: var(--weiss); }

.abschnitt__titel { font-size: var(--titel); }
.abschnitt__kopf {
  max-width: 537px;
  margin-inline: auto;
  text-align: center;
}
.abschnitt__kopf .vorspann { margin-top: 22px; }

/* Titelbild ---------------------------------------------------------- */
.buehne {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vw, 673px);
  overflow: hidden;
  background: var(--schwarz);
  color: var(--weiss);
}
.buehne__bild, .buehne__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.buehne__schleier {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--schleier, .6));
}
.buehne__innen {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(40px, 7vw, 60px);
  padding-top: 140px;
}
.buehne__titel {
  font-size: clamp(3rem, 8vw, 3.75rem);
  line-height: 0.8;
  max-width: 12ch;
}

/* Über --------------------------------------------------------------- */
.ueber__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 50px);
  align-items: center;
}
.ueber__bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.ueber__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ueber__text {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 2;
}
.ueber__text p + p { margin-top: 1.6em; }
.ueber__titel { margin-bottom: 20px; }

/* Machen ------------------------------------------------------------- */
.machen { position: relative; overflow: hidden; }
.machen__bild, .machen__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.machen__schleier {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--schleier, 1));
}
.machen__innen { position: relative; z-index: 2; }
.machen__titel { margin-bottom: clamp(24px, 4vw, 40px); }
.machen__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 60px);
  letter-spacing: 2px;
}
.machen__lead { font-weight: 700; }
.machen__folge { padding-top: clamp(20px, 4vw, 48px); }

/* Arbeiten (Webdesign und Design) ------------------------------------ */
.arbeiten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(28px, 4vw, 34px);
  padding: 0;
  list-style: none;
}
.arbeit {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(10px, 2.5vw, 30px) clamp(16px, 2.5vw, 30px);
  text-align: center;
}
.arbeit--voll { padding-top: clamp(16px, 2.5vw, 30px); }
.arbeit__bild {
  display: block;
  width: 100%;
  max-width: 314px;
}
.arbeit__bild img { width: 100%; height: auto; }
.arbeit__knopf { margin-top: 22px; }

/* Scrollbare Mini-Vorschau im Mockup ---------------------------------- */
.vorschau { position: relative; display: block; }
.vorschau picture, .vorschau img { display: block; }

/* Liegt genau über der Bildschirmfläche des Mockups. Solange das lange
   Bildschirmfoto nicht geladen ist, bleibt das Feld leer – darunter steht
   weiterhin das unbewegte Mockup. */
.vorschau__feld {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}
.vorschau__lauf {
  display: block;
  height: auto;
  transform: translateY(0);
  transition: transform .7s ease;
}
/* Ausschnitt des Mockups, der über der laufenden Vorschau liegen muss –
   dort steht ein Gerät vor der Bildschirmfläche. */
.vorschau__deckung {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vorschau__deckung picture,
.vorschau__deckung img {
  display: block;
  width: 100%;
  height: auto;
}
.vorschau.ist-an .vorschau__lauf {
  transform: translateY(var(--weg, 0));
  transition: transform var(--dauer, 8s) linear;
}

@media (prefers-reduced-motion: reduce) {
  .vorschau.ist-an .vorschau__lauf { transform: none; transition: none; }
}

/* Bildschau (Klick auf ein Bild der Design-Galerie) ------------------- */
.schau {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, .92);
  border: 0;
}
.schau[hidden] { display: none; }
.schau__bild {
  max-width: min(100%, 1000px);
  max-height: 85vh;
  width: auto;
}
.schau__bild img {
  max-height: 85vh;
  width: auto;
  object-fit: contain;
}
.schau__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(12px, 3vw, 28px);
  text-align: center;
  color: var(--weiss);
  font-size: .95rem;
  padding-inline: 60px;
}
.schau__schliessen, .schau__blaettern {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  color: var(--weiss);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.schau__schliessen { top: 8px; right: 8px; }
.schau__blaettern--zurueck { left: 8px; top: 50%; transform: translateY(-50%); }
.schau__blaettern--vor     { right: 8px; top: 50%; transform: translateY(-50%); }
.schau__schliessen:hover, .schau__blaettern:hover { color: var(--gruen-hell); }

/* Kontakt ------------------------------------------------------------ */
.kontakt__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kontakt__feld {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  border: 2px solid var(--rahmen);
}
.kontakt__titel { font-size: var(--titel); }
.kontakt__adresse {
  margin-top: 19px;
  font-style: normal;
}
.kontakt__adresse a { color: var(--weiss); text-decoration: none; }
.kontakt__adresse a:hover { color: var(--gruen-hell); }
.kontakt__feld--mitte { align-items: center; }
.kontakt__logo { width: 308px; max-width: 100%; }

/* ── 4 Formular ─────────────────────────────────────────────────────── */
.formular { display: grid; gap: 15px; }
.formular label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.formular input[type="text"],
.formular input[type="email"],
.formular textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--weiss);
  border: 1px solid #b3b3b3;
  border-radius: 0;
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.5;
}
.formular textarea { resize: vertical; min-height: 96px; }
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--gruen-hell); outline-offset: 0; }
.formular__falle { position: absolute; left: -9999px; }
.formular__aktion { text-align: left; }

.meldung {
  padding: 12px 15px;
  font-size: .95rem;
}
.meldung--ok    { background: var(--gruen); color: var(--weiss); }
.meldung--fehler{ background: #8b1e1e;      color: var(--weiss); }
.feld--fehler input, .feld--fehler textarea { border-color: #8b1e1e; }

/* ── 5 Fussbereich ──────────────────────────────────────────────────── */
.fuss {
  background: var(--schwarz);
  color: #8a8a8a;
  font-size: .85rem;
  padding-block: 24px;
  border-top: 1px solid #1c1c1c;
}
.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
}
.fuss a { color: #8a8a8a; text-decoration: none; }
.fuss a:hover { color: var(--gruen-hell); }

.nach-oben {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--gruen-hell);
  color: #111;
  opacity: .85;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.nach-oben:hover { opacity: 1; transform: translateY(-2px); }
.nach-oben[hidden] { display: none; }
.nach-oben svg { width: 100%; height: 100%; fill: currentColor; }

/* ── 6 Textseiten (Impressum, Datenschutz, Fehlerseite) ─────────────── */
.textseite {
  padding-block: clamp(120px, 14vw, 180px) clamp(48px, 8vw, 80px);
  background: var(--schwarz);
  color: var(--weiss);
  min-height: 70vh;
}
.textseite h1 { font-size: var(--titel); margin-bottom: 30px; }
.textseite h2 {
  font-size: 1.5rem;
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--gruen-hell);
}
.textseite p, .textseite li { max-width: 70ch; }
.textseite p + p { margin-top: 1em; }
.textseite a { color: var(--gruen-licht); }
.textseite__zurueck { display: inline-block; margin-top: 40px; }

/* ── 7 Bewegung ─────────────────────────────────────────────────────── */
/* Nur verstecken, wenn JavaScript die Abschnitte auch wieder einblenden kann.
   Früher stand dafür eine Klasse am <html>-Element, gesetzt von einem
   eingebetteten Skript – das verbietet die Content-Security-Policy. */
@media (scripting: enabled) {
  .auftritt {
    opacity: 0;
    transform: translateY(24px);
  }
  .auftritt.sichtbar {
    opacity: 1;
    transform: none;
    transition: opacity .8s ease, transform .8s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auftritt { opacity: 1; transform: none; transition: none; }
}

/* ── Kleinere Bildschirme ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .arbeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontakt__raster { grid-template-columns: 1fr; }
  .kontakt__feld--mitte { order: -1; }
}

@media (max-width: 767px) {
  :root { --luft: 15px; }
  .ueber__raster { grid-template-columns: 1fr; }
  .machen__raster { grid-template-columns: 1fr; gap: 20px; letter-spacing: normal; }
  .machen__folge { padding-top: 0; }
  .buehne__innen { padding-top: 120px; }
}

@media (max-width: 575px) {
  .arbeiten { grid-template-columns: 1fr; }
  .arbeit { padding-inline: 0; }
  .nach-oben { width: 52px; height: 52px; padding: 12px; }
}