/* Nachbau arme-schweine.ch – Ergänzungen zum Original-Stylesheet (/theme/style.css, unverändert
   bis auf die Schriftfamilien). Hier nur, was der Nachbau anders löst: TIF-Schrift Poppins,
   TIF-Signet, Hero-Höhe ohne jQuery, Galerie/Neuigkeiten als Scroll-Snap statt Swiper,
   Spendenlink statt Stripe-Knopf, Petitionshinweis, Kontakt ohne Formular, eigene SVG-Karte
   statt Mapbox GL. */

/* TIF-Schrift wie tierimfokus.ch und eier-leier: Poppins (SIL OFL, /fonts/), Light 300 im Text,
   Black 900 in den Titeln (statt DM Sans und der kommerziellen Riviera Nights des Originals) */
@font-face { font-family: 'Poppins'; font-weight: 300; font-style: normal; font-display: swap; src: url('/fonts/poppins-light.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/poppins-regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/poppins-bold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 900; font-style: normal; font-display: swap; src: url('/fonts/poppins-black.woff2') format('woff2'); }
html, body { font-weight: 300; }
/* Poppins Black läuft breiter als Riviera Nights: Logo-Schriftzug etwas kleiner (gleiche Breite wie
   im Original), Untertitel im Kopf auf schmalen Bildschirmen kleiner, damit die Zeilen wie im Original bleiben */
.logo h1 { font-size: 26px; }
.logo { white-space: nowrap; }
@media (max-width: 450px) {
  .mtxt div { font-size: 6.2vw; }
}
h1, h2, h3, h4, h5, h6, .mtxt, .tit, aside h3 { font-weight: 900; }
.ancre { font-weight: 300; }
b, strong { font-weight: 700; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Knöpfe (im Original <div>) ohne Browser-Standardaussehen */
.mob, .swiper-button-prev, .swiper-button-next, .next, .mapboxgl-popup-close-button {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}
.mob { border: 0; }
@media (max-width: 820px) {
  /* <button> zentriert seinen Inhalt sonst senkrecht; die Punkte sitzen wie im Original oben */
  .mob { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
}
:focus-visible { outline: 2px solid #fe768f; outline-offset: 2px; }

/* Logo: aktuelles TIF-Signet (TIF_Logo_Button) statt des alten «tif»-Runds */
.logo img {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 6px;
}

/* Menü: «Spenden» ist ein Link auf tierimfokus.ch/spenden/ statt des Stripe-Knopfs,
   gleiche Masse wie dessen .asp_product_buy_btn (18px, Feld 76px hoch) */
header nav .spenden a {
  font-size: 18px;
  line-height: 13px;
  height: 76px;
  padding-top: 44px;
}
@media (max-width: 820px) {
  header nav li.spenden { margin-top: 10px; }
  header nav .spenden a { height: 71px; padding-top: 39px; }
}

/* Kopfbild: Höhe = Kopfhöhe − 12px (im Original per jQuery gesetzt) */
.first {
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 12px);
}
.deco { flex: 0 1 auto; min-height: 0; }
@media (min-width: 1601px) {
  .first { height: calc(100% - 12px); }
}
.play .preview { background-image: url(/img/arme-schweine-vorschau.webp); }
/* Poppins läuft breiter als DM Sans: so passt «Das traurige Leben der Schweine» wie im Original auf eine Zeile */
.play { font-size: 19px; }

/* Galerie und Neuigkeiten: Scroll-Snap statt Swiper (wischen geht nativ, Pfeile per seite.js) */
.swiper-container-pics .swiper-wrapper,
.swiper-container-news .swiper-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 60px;
  transform: none;
  transition: height .3s ease-out;
  touch-action: pan-x pan-y;
  box-sizing: border-box;
}
.swiper-container-pics .swiper-wrapper::-webkit-scrollbar,
.swiper-container-news .swiper-wrapper::-webkit-scrollbar { display: none; }
.swiper-container-pics .swiper-slide,
.swiper-container-news .swiper-slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 100%;
}
.swiper-button-prev, .swiper-button-next { color: white; }
.next {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid;
  padding: 1em;
  font-size: 20px;
  line-height: 40px;
}

/* Fuss: Kontaktformular ersetzt durch E-Mail- und Newsletter-Link (Masse wie das Formular) */
.kontakt-ersatz {
  margin-left: 90px;
  margin-top: 90px;
  max-width: 560px;
  line-height: 1.5625em;
}
.kontakt-ersatz p { margin-bottom: 1em; }
.kontakt-ersatz p a { color: white; border-bottom: 4px solid #fe768f; }
.kontakt-ersatz .hinweis { opacity: .5; margin-top: 1em; }
.kontakt-ersatz .knopf {
  display: block;
  border: 1px solid white;
  color: white;
  padding: 1em;
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.25em;
}
.kontakt-ersatz .knopf:hover { background-color: rgba(255,255,255,0.05); }
@media (max-width: 520px) {
  .kontakt-ersatz { margin-left: 0; }
}

/* Fuss: Impressum und Datenschutz rechts, auf schmalen Bildschirmen darunter links (wie im Original) */
.copy .pp a { color: white; }
@media (max-width: 1000px) {
  .copy .pp { text-align: left; }
}

/* Über uns */
.bild-ueber-uns { background-image: url(/img/galerie/0p0a1486-1024.jpg); }
.page-datenschutz .sep h3 { width: 100%; }
.page-datenschutz .abt .maintxt .txt, .page-datenschutz .maintxt .txt { padding-bottom: 90px; }

/* Petition: eingereicht – Hinweis-Kasten statt Knopf «Petition unterzeichnen» (Masse wie .petink a) */
.petition-eingereicht .kasten {
  border: 1px solid white;
  padding: 1em;
  position: relative;
  z-index: 1;
  margin-top: 11px;
  line-height: 1.5625em;
}
.petition-eingereicht .kasten strong { display: block; margin-bottom: .5em; }
.petition-eingereicht .kasten p { margin: 0; }
.petition-eingereicht .kasten:after {
  content: "";
  bottom: -50px;
  right: -15px;
  background: url('/theme/img/stain2.svg');
  display: block;
  position: absolute;
  z-index: -1;
  width: 80px;
  height: 73px;
  background-repeat: no-repeat;
}

/* Karte: eigene SVG-Karte aus Natural Earth (src/data/karte.svg), gleiche Projektion und gleicher
   Ausschnitt wie die Mapbox-Karte des Originals (Zoom 8); Ursprung des SVG = Kartenmitte */
#map.karte { overflow: hidden; background-color: #1d272f; }
.karte-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -500px 0 0 -1700px;
  pointer-events: none;
}
.k-schweiz { fill: #232e38; }
.k-see { fill: #131a20; }
.k-fluss { fill: none; stroke: #2a3946; stroke-width: 1; }
.k-kanton { fill: none; stroke: #3a4854; stroke-width: .8; stroke-dasharray: 3 2; }
.k-grenze { fill: none; stroke: #5d6b78; stroke-width: 1.4; stroke-linejoin: round; }
.k-land text { fill: #4b5864; font-size: 13px; font-weight: 400; letter-spacing: .35em; text-anchor: middle; }
.k-ort circle { fill: #7d8b97; }
.k-ort text {
  fill: #8d9ba7;
  font-size: 12px;
  font-weight: 300;
  paint-order: stroke;
  stroke: #1d272f;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.k-ort text.k-gross { fill: #b9c4cd; font-size: 15px; font-weight: 400; }
.karte-quelle {
  position: absolute;
  right: 10px;
  bottom: 30px;
  z-index: 2;
  padding: 0 5px;
  background-color: rgba(29, 39, 47, .85);
  font-size: 12px;
  line-height: 20px;
  color: #8d9ba7;
}
.karte-quelle a { color: inherit; text-decoration: underline; }

.pin { position: absolute; width: 0; height: 0; z-index: 0; }
.pin[open] { z-index: 2; }
.pin summary {
  /* wie der Mapbox-Standardmarker des Originals: Mitte 14px über dem Punkt, die Spitze zeigt darauf */
  position: absolute;
  left: -13.5px;
  top: -34.5px;
  width: 27px;
  height: 41px;
  list-style: none;
  cursor: pointer;
}
.pin summary::-webkit-details-marker { display: none; }
.pin summary::marker { content: ''; }
.pin .mapboxgl-popup {
  position: absolute;
  left: 0;
  top: auto;
  bottom: 38px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  width: max-content;
  max-width: 240px;
}
.mapboxgl-popup-tip {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  z-index: 1;
  align-self: center;
  border-bottom: none;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: #fe768f; }
.mapboxgl-popup-close-button {
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  padding: 0 6px;
}
.mapboxgl-popup-close-button:hover { background-color: rgba(255,255,255,.08); }

/* Knopf «Fehler gefunden?» (src/components/Feedback.astro, gemeinsam mit den anderen Kampagnenseiten):
   Pink des Themes mit dunkler Schrift (6,7:1; Weiss auf Pink wäre zu schwach), dunkles Fenster wie die Seite, Poppins */
:root {
  --feedback-akzent: #fe768f;
  --feedback-akzent-hover: #fff;
  --feedback-akzent-text: #151c22;
  --feedback-ring: #151c22;
  --feedback-knopf-schrift: 'Poppins', sans-serif;
  --feedback-radius: 0;
  --feedback-grund: #1d272f;
  --feedback-text: #fff;
  --feedback-feld: #151c22;
  --feedback-link: #fe768f;
  --feedback-fehler: #fe768f;
  --feedback-schrift: 'Poppins', sans-serif;
  --feedback-titelschrift: 'Poppins', sans-serif;
  --feedback-titel-gewicht: 900;
}