/* Schriften lokal gehostet (keine Verbindung zu Google) – SIL Open Font License */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/jost.woff2") format("woff2");
}

:root {
  /* Papier, Licht und Zweigschatten 1:1 aus der Hauptseite (gretl-website, main.css) */
  --img-paper: url("images/paper.webp");
  --sheet-light:
    radial-gradient(130% 95% at 21% 1%, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0) 55%),
    radial-gradient(80% 65% at 104% 106%, rgb(30 48 34 / 0.15), rgb(30 48 34 / 0) 70%);
  --sheet-branch:
    radial-gradient(10% 15% at 6% -4%, rgb(30 48 34 / 0.115), rgb(30 48 34 / 0) 66%),
    radial-gradient(8% 12% at 15% 8%, rgb(30 48 34 / 0.062), rgb(30 48 34 / 0) 66%),
    radial-gradient(11% 16% at 3% 16%, rgb(30 48 34 / 0.05), rgb(30 48 34 / 0) 66%),
    radial-gradient(9% 13% at 21% 23%, rgb(30 48 34 / 0.072), rgb(30 48 34 / 0) 66%),
    radial-gradient(7% 10% at 12% 31%, rgb(30 48 34 / 0.078), rgb(30 48 34 / 0) 66%),
    radial-gradient(10% 14% at 29% 39%, rgb(30 48 34 / 0.09), rgb(30 48 34 / 0) 66%),
    radial-gradient(8% 11% at 19% 48%, rgb(30 48 34 / 0.07), rgb(30 48 34 / 0) 66%),
    radial-gradient(9% 12% at 36% 56%, rgb(30 48 34 / 0.078), rgb(30 48 34 / 0) 66%),
    radial-gradient(7% 9% at 27% 64%, rgb(30 48 34 / 0.06), rgb(30 48 34 / 0) 66%),
    radial-gradient(13% 18% at 9% 3%, rgb(30 48 34 / 0.068), rgb(30 48 34 / 0) 66%),
    radial-gradient(6% 8% at 40% 30%, rgb(30 48 34 / 0.05), rgb(30 48 34 / 0) 66%);

  --sand:   #F2ECDE;  /* Papier 100 aus der Hauptseite */
  --petrol: #176C99;  /* Farbe ihrer Unterschrift */
  --gelb:   #EBA43A;  /* kräftiges Gelb aus ihrem Flyer */
  --gelb-hell: #F6C977;
  --text:   #2A2C25;
  --leise:  #63665B;
  --linie:  rgba(23, 108, 153, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  background-color: var(--sand);
  background-image: var(--img-paper);
  background-size: 1100px;
  color: var(--text);
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 48px 24px;
}

/* Licht und Zweigschatten als eigene Lage über der Textur, fest im Fenster */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--sheet-branch), var(--sheet-light);
  background-repeat: no-repeat;
}

main { position: relative; z-index: 1; max-width: 34rem; width: 100%; }

/* kleiner Zettel als Akzent – Anspielung auf die Post-its */
.zettel {
  width: 22px;
  height: 22px;
  background: var(--gelb);
  transform: rotate(-6deg);
  margin-bottom: 2.5rem;
  box-shadow: 1px 2px 0 rgba(42, 44, 37, 0.08);
}

h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.7rem, 8vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h1 .unterschrift {
  height: 1.2em;
  width: auto;
  vertical-align: -0.24em;
  margin-left: 0.08em;
}

.taetigkeit {
  margin-top: 1.5rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.35;
}
.taetigkeit span {
  background: linear-gradient(transparent 62%, var(--gelb-hell) 62%);
}

.hinweis {
  margin-top: 1rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--leise);
  max-width: 26rem;
}

.kontakt {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linie);
}
.kontakt .label,
.recht h2 {
  font-family: "Jost", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: 1.1rem;
}
.kontakt a {
  font-variant-numeric: lining-nums;
  display: block;
  width: fit-content;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  line-height: 1.6;
  background-image: linear-gradient(var(--gelb), var(--gelb));
  background-size: 0 2px;
  background-position: 0 90%;
  background-repeat: no-repeat;
  transition: background-size .4s ease;
}
.kontakt a:hover,
.kontakt a:focus-visible { background-size: 100% 2px; outline: none; }

footer {
  margin-top: 3.5rem;
  font-size: 0.78rem;
  color: var(--leise);
  display: flex;
  gap: 1.5rem;
}
footer a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--linie); }
footer a:hover { color: var(--text); text-decoration-color: var(--gelb); }

/* Rechtstexte */
.recht h1 { font-size: clamp(2.2rem, 7vw, 3rem); margin-bottom: 1.5rem; }
.recht h2 { margin: 2rem 0 0.6rem; }
.recht p { line-height: 1.7; color: var(--leise); }
.recht p + p { margin-top: 0.75rem; }
.recht a { color: var(--text); }
.recht .zettel { display: block; }