/*
  Gerettete Objekte — statisches Stylesheet
  Nachbau des WordPress-Child-Themes "Gerettete Objekte" (Ollie).
  Alle Werte unten sind aus dem echten, live ausgelieferten CSS abgelesen
  (WordPress-Global-Styles + Theme-CSS), nicht geschätzt.
*/

/* ---------- Fonts (selbst gehostet, keine Google-Fonts-CDN) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-500.woff2") format("woff2");
}

/* ---------- Design-Tokens ---------- */
:root {
  /* Farben */
  --go-base: #F4EFE6;           /* Archivpapier / Creme */
  --go-main: #1E1C18;           /* Tinte */
  --go-primary: #C2361F;        /* Stempelrot */
  --go-primary-accent: #F3E2DB;
  --go-primary-alt: #31506B;    /* Akte-Blaugrau */
  --go-primary-alt-accent: #24384A;
  --go-secondary: #6B6357;
  --go-tertiary: #FBF8F1;       /* Kartenhintergrund */
  --go-karton: #E7DCC8;
  --go-border-light: #D9D0BE;
  --go-border-dark: #3A362E;
  --go-main-accent: #C9C2B4;

  /* Schriften */
  --go-font-primary: "Fraunces", Georgia, serif;
  --go-font-mono: "IBM Plex Mono", Consolas, monospace;

  /* Schriftgrößen */
  --go-fs-base: 1.0625rem;
  --go-fs-small: 0.95rem;
  --go-fs-x-small: 0.85rem;
  --go-fs-medium: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.513), 1.5rem);
  --go-fs-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.231), 2.35rem);
  --go-fs-x-large: clamp(2.25rem, 2.25rem + ((1vw - 0.2rem) * 2.051), 3.25rem);
  --go-fs-xx-large: clamp(2.9rem, 2.9rem + ((1vw - 0.2rem) * 3.795), 4.75rem);

  /* Abstände */
  --go-sp-small: clamp(.5rem, 2.5vw, 1rem);
  --go-sp-medium: clamp(1.5rem, 4vw, 2rem);
  --go-sp-large: clamp(2rem, 5vw, 3rem);
  --go-sp-x-large: clamp(3rem, 7vw, 5rem);
  --go-sp-xx-large: clamp(4rem, 9vw, 7rem);
  --go-sp-xxx-large: clamp(5rem, 12vw, 9rem);

  /* Layout */
  --go-content-size: 720px;
  --go-wide-size: 1100px;

  /* Zeilenhöhen */
  --go-lh-none: 1;
  --go-lh-snug: 1.2;
  --go-lh-body: 1.65;
}

/* ---------- Reset & Grundstimmung ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: hidden; /* gegen horizontales Wackeln auf Mobil */
  width: 100%;
  scroll-padding-top: 80px; /* Sprungmarken nicht unter dem Sticky-Header verstecken */
}
body {
  /* overflow-x hier bewusst NICHT gesetzt: overflow-x:hidden auf html
     UND body gleichzeitig macht body zu einem eigenen Scroll-Container
     und bricht dadurch position:sticky im Header. */
  width: 100%;
  margin: 0;
  background-color: var(--go-base);
  color: var(--go-main);
  font-family: var(--go-font-primary);
  font-size: var(--go-fs-base);
  font-weight: 380;
  line-height: var(--go-lh-body);
}
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--go-primary); color: var(--go-base); }

h1, h2, h3, h4 {
  font-family: var(--go-font-primary);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: var(--go-lh-snug);
  margin: 0 0 var(--go-sp-medium);
  font-optical-sizing: auto;
}
p { margin: 0 0 var(--go-sp-medium); }
p:last-child { margin-bottom: 0; }
em { font-style: italic; }

a { color: var(--go-primary-alt); }
a:hover { color: var(--go-primary); }

/* ---------- Layout-Hilfen ---------- */
.go-wrap {
  max-width: var(--go-content-size);
  margin-inline: auto;
  padding-inline: var(--go-sp-medium);
}
.go-wrap--wide {
  max-width: var(--go-wide-size);
}
.go-section {
  padding-block: var(--go-sp-xx-large);
}
.go-section--tight { padding-block: var(--go-sp-x-large); }
.go-section--hero,
.go-section--kontakt { padding-block: var(--go-sp-xxx-large); }
.go-section--full {
  background-color: var(--go-karton);
}
.go-section--dark {
  background-color: var(--go-main);
  color: var(--go-base);
}
.go-section--dark .go-label { color: var(--go-main-accent); }
.go-section--dark p { color: var(--go-main-accent); }
.go-section--dark h2 { color: var(--go-base); }

.go-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--go-sp-medium);
  margin-top: var(--go-sp-large);
}
.go-columns > * { flex: 1 1 260px; }

/* ---------- Kopfzeile ---------- */
.go-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--go-base);
  border-bottom: 1px solid var(--go-border-light);
  padding-block: var(--go-sp-small);
}
.go-header__inner {
  max-width: var(--go-wide-size);
  margin-inline: auto;
  padding-inline: var(--go-sp-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.go-brand {
  font-size: var(--go-fs-base);
  font-weight: 600;
  text-decoration: none;
  color: var(--go-main);
}
.go-nav { display: flex; }
.go-nav__list {
  list-style: none;
  display: flex;
  gap: var(--go-sp-medium);
  margin: 0;
  padding: 0;
}
.go-nav__list a {
  font-family: var(--go-font-mono);
  font-size: var(--go-fs-x-small);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--go-main);
}
.go-nav__list a:hover { color: var(--go-primary); }
.go-nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--go-main);
}
.go-nav__toggle svg { width: 24px; height: 24px; }

@media (max-width: 600px) {
  .go-nav__toggle { display: block; }
  .go-nav__list {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--go-base);
    border-bottom: 1px solid var(--go-border-light);
    max-height: 0;
    overflow: hidden;
    padding-inline: var(--go-sp-medium);
    transition: max-height .2s ease;
  }
  .go-header { position: relative; }
  .go-nav__list.is-open {
    max-height: 220px;
    padding-block: var(--go-sp-small);
  }
  .go-nav__list li { padding-block: 0.5rem; }
}

/* ---------- Label / Kicker ---------- */
.go-label {
  font-family: var(--go-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--go-primary-alt);
  margin: 0 0 var(--go-sp-medium);
}
.go-label--primary { color: var(--go-primary); }

/* Feine Tintenlinie statt Kästen */
.go-hairline {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--go-main) 22%, transparent);
}

/* ---------- Buttons: Stempel-Charakter ---------- */
.go-btn {
  display: inline-block;
  background-color: transparent;
  border: 2px solid var(--go-primary);
  border-radius: 0;
  color: var(--go-primary);
  font-family: var(--go-font-mono);
  font-size: var(--go-fs-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: inherit;
  padding: .6em 1em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transform: rotate(-1.2deg);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.go-btn:hover {
  background-color: var(--go-primary);
  color: var(--go-base);
  transform: rotate(0deg);
}
.go-btn--outline {
  border-color: var(--go-primary-alt);
  color: var(--go-primary-alt);
}
.go-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--go-sp-medium);
  margin-top: var(--go-sp-medium);
}

/* ---------- Karteikarten ---------- */
.go-karte {
  background-color: var(--go-tertiary);
  border: 1px solid var(--go-border-light);
  padding: var(--go-sp-medium);
  transition: transform .15s ease, box-shadow .15s ease;
}
.go-karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--go-main) 12%, transparent);
}
.go-karte h3 { font-size: var(--go-fs-medium); }
.go-karte p { font-size: var(--go-fs-small); }

/* ---------- Exponat-Rahmen (Sammlung) ---------- */
.go-exponat {
  background-color: var(--go-tertiary);
  border: 1px solid var(--go-border-light);
  padding: var(--go-sp-medium);
  margin-top: var(--go-sp-large);
}
.go-exponat__meta {
  color: var(--go-primary-alt);
  font-family: var(--go-font-mono);
  font-size: var(--go-fs-x-small);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: var(--go-sp-medium);
  margin-bottom: 0;
}
.go-exponat p:not(.go-label):not(.go-exponat__meta) { font-size: var(--go-fs-small); }

/* ---------- Vorher/Nachher-Wischregler ---------- */
.go-vergleich {
  display: flex;
  gap: var(--go-sp-medium);
}
.go-vergleich figure { margin: 0; flex: 1 1 0; }
.go-vergleich figcaption {
  margin-top: .5em;
  font-size: var(--go-fs-x-small);
  color: var(--go-secondary);
}
.go-vergleich-mobil { display: none; }
.go-vergleich-mobil figure { margin: 0 0 var(--go-sp-medium); }
.go-vergleich-mobil figcaption {
  margin-top: .5em;
  font-size: var(--go-fs-x-small);
  color: var(--go-secondary);
}

@media (max-width: 767px) {
  .go-vergleich { display: none; }
  .go-vergleich-mobil { display: block; }
}

.go-vergleich-slider {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--go-border-light);
  user-select: none;
  touch-action: pan-y;
}
.go-vergleich-slider > img { display: block; width: 100%; height: auto; }
.go-vergleich-slider .go-nachher {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--go-x, 50%));
}
.go-vergleich-slider .go-nachher img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
.go-regler {
  position: absolute; top: 0; bottom: 0; left: var(--go-x, 50%);
  width: 2px; background: var(--go-main);
  cursor: ew-resize; z-index: 5;
}
.go-regler::after {
  content: "\25C2 \25B8";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--go-main); color: var(--go-base);
  font-family: var(--go-font-mono); font-size: 11px;
  padding: 7px 9px; white-space: nowrap; border-radius: 99px;
}
.go-schicht-tag {
  position: absolute; top: 12px; z-index: 4;
  font-family: var(--go-font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(251, 248, 241, .92);
  border: 1px solid var(--go-border-light);
  padding: 4px 9px;
}
.go-tag-vorher { left: 12px; }
.go-tag-nachher { right: 12px; }

/* ---------- GERETTET-Stempel ---------- */
.go-stempel {
  position: absolute; z-index: 6; top: 16%; left: 6%;
  font-family: var(--go-font-mono);
  font-weight: 500; font-size: clamp(15px, 2.4vw, 24px);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--go-primary);
  border: 3px double var(--go-primary);
  padding: .35em .7em .35em .9em;
  transform: rotate(-6deg) scale(2.2);
  opacity: 0; pointer-events: none;
}
.go-gestempelt .go-stempel {
  animation: go-aufstempeln .38s cubic-bezier(.2, 1.6, .4, 1) forwards;
  animation-delay: .45s;
}
@keyframes go-aufstempeln {
  0% { opacity: 0; transform: rotate(-6deg) scale(2.2); }
  62% { opacity: 1; transform: rotate(-6deg) scale(.96); }
  100% { opacity: .92; transform: rotate(-6deg) scale(1); }
}

/* ---------- Neuzugang (Obj. 006): Zwei-Spalten-Layout ---------- */
.go-neuzugang {
  display: flex;
  align-items: center;
  gap: var(--go-sp-medium);
  flex-wrap: wrap;
}
.go-neuzugang > div:first-child { flex: 3 1 480px; }
.go-neuzugang > div:last-child { flex: 1 1 220px; max-width: 320px; }
.go-neuzugang figure { margin: 0; }
.go-neuzugang figcaption {
  margin-top: .5em;
  font-size: var(--go-fs-x-small);
  color: var(--go-secondary);
}

/* ---------- Befundbogen (Formular ZB-01) ---------- */
.go-befund-karte {
  background-color: var(--go-tertiary);
  border: 1px solid var(--go-border-light);
  padding: var(--go-sp-large);
  margin-top: var(--go-sp-large);
}
.go-befund-kopf {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--go-sp-small);
  border-bottom: 1px solid var(--go-border-light);
  padding-bottom: .75rem;
  margin-bottom: var(--go-sp-medium);
}
.go-befund-kopf p { margin: 0; color: var(--go-primary-alt); font-family: var(--go-font-mono); font-size: var(--go-fs-x-small); letter-spacing: .09em; text-transform: uppercase; }
.go-befund-karte h3 { font-size: var(--go-fs-large); }
.go-befundzeilen { border-collapse: collapse; width: 100%; margin: var(--go-sp-medium) 0; }
.go-befundzeilen td {
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--go-main) 13%, transparent);
  padding: .6rem .1rem;
  font-family: var(--go-font-mono);
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Ablauf-Schritte ---------- */
.go-schritt .go-label { color: var(--go-primary); }
.go-schritt h3 { font-size: var(--go-fs-medium); }
.go-schritt p { font-size: var(--go-fs-small); }

/* ---------- Fußzeile ---------- */
.go-footer {
  background-color: var(--go-main);
  color: var(--go-main-accent);
  padding-block: var(--go-sp-medium) var(--go-sp-large);
}
.go-footer__inner {
  max-width: var(--go-wide-size);
  margin-inline: auto;
  padding-inline: var(--go-sp-medium);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--go-sp-small);
}
.go-footer p, .go-footer a {
  font-family: var(--go-font-mono);
  font-size: var(--go-fs-x-small);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0;
}
.go-footer a { color: var(--go-primary-alt); text-decoration: underline; }
.go-footer a:hover { color: var(--go-primary); }

/* ---------- Scroll-Reveal (Fail-safe: ohne .js-reveal alles sichtbar) ---------- */
.js-reveal .go-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  will-change: opacity, transform;
}
.js-reveal .go-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .go-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Rechtsseiten (Impressum/Datenschutz/Cookie) ---------- */
.go-legal { padding-block: var(--go-sp-xx-large); }
.go-legal h1 { font-size: var(--go-fs-x-large); }
.go-legal h2 { font-size: var(--go-fs-medium); margin-top: var(--go-sp-large); }
.go-legal address { font-style: normal; }