/* ==========================================================================
   Schnuppernase e.V. - das einzige Stylesheet der Website
   ==========================================================================

   Wenn du hier etwas aenderst, aendert es sich auf allen Seiten gleichzeitig.
   Das ist gewollt. Bitte NICHT Groessenangaben ins HTML schreiben - alles,
   was mit Groesse, Abstand und Farbe zu tun hat, gehoert hierher.

   Aufbau:
     1. Farben und Schrift
     2. Grundgeruest
     3. Kopfzeile
     4. Navigation
     5. Inhalt: Ueberschriften, Text, Links
     6. Tier-Bloecke        <- der wichtigste Teil
     7. Kaesten und Listen
     8. Nach oben
     9. Fusszeile
    10. Handy und Tablet
   ========================================================================== */


/* 1. Farben und Schrift ---------------------------------------------------- */

:root {
  /* Die Markenfarbe Orange, abgeleitet aus der alten Website (#FF5F00 / #FB6216).
     Als Flaeche unveraendert kraeftig, als Textfarbe abgedunkelt - sonst ist
     Orange auf Weiss nicht lesbar (die alten Werte lagen bei 2,1:1 bis 3,1:1). */
  --orange:        #ea580c;   /* Flaechen, Kopfzeile, Rahmen */
  --orange-hell:   #fb923c;   /* Verlauf oben in der Kopfzeile */
  --orange-dunkel: #c2410c;   /* Ueberschriften h2, h3 */
  --orange-tief:   #9a3412;   /* Ueberschrift h1 */

  --creme:         #fffbeb;   /* Seitengrund, aus dem alten #FFFFCC */
  --creme-tief:    #fef3c7;   /* Kaesten */
  --weiss:         #ffffff;
  --text:          #1f2937;   /* Fliesstext */
  --text-leise:    #57534e;   /* Nebenangaben, Datumszeilen */
  --rand:          #e7e0cf;

  --link:          #1d4ed8;   /* aus dem alten #0000DF */
  --link-aktiv:    #1e40af;
  --rot:           #9f1239;   /* Akzent, aus dem alten #A00020 */
  --gruen:         #15803d;   /* "vermittelt" */

  /* Die Schrift der alten Website. Absichtlich keine Webfont: nichts nachzuladen,
     kein externer Dienst, funktioniert auch offline. */
  --schrift: "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;

  --breite: 62rem;            /* Inhaltsbreite, entspricht etwa den alten 968 px */
  --radius: 6px;
}


/* 2. Grundgeruest --------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font: 1rem/1.65 var(--schrift);
  -webkit-text-size-adjust: 100%;
}

/* Die Inhaltsbahn. Jede Seite hat genau ein <main class="bahn">. */
.bahn {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding-inline: 1.25rem;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--rand);
  margin: 2rem 0;
}

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzung */
.springen {
  position: absolute; left: -9999px;
  background: var(--weiss); color: var(--text);
  padding: .75rem 1.25rem; z-index: 10;
}
.springen:focus { left: 1rem; top: 1rem; }


/* 3. Kopfzeile ------------------------------------------------------------ */

/* Der Verlauf ist am alten Kopfbild gemessen: oben #FF8106, nach unten auf
   #FFC082 auslaufend. Darunter das Pfotenband, darunter der Regenbogen -
   dieselbe Schichtung wie im alten kopfzeile960x190.jpg. */
.kopf {
  background: linear-gradient(180deg, #ff8106 0%, #ffa347 55%, #ffc082 100%);
}

.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

/* Das Pfotenband aus der alten Website. Die Originalgrafik ist 76x240 px; die
   beiden Pfotenabdruecke sitzen darin bei y=150 bis 190. Deshalb wird genau
   dieser Ausschnitt gezeigt - Groesse und Farben bleiben original. */
.pfoten {
  height: 46px;
  background: url("grafik/bg_verlauf_spuren.gif") repeat-x 0 -146px;
}

/* Das Logo enthaelt den Hund UND die handgeschriebene Wortmarke -
   deshalb steht der Vereinsname daneben nicht noch einmal als Text. */
.kopf-logo { flex: 0 0 auto; }
.kopf-logo img {
  display: block;
  width: 260px;
  aspect-ratio: 607 / 368;   /* verhindert Layout-Springen beim Laden */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .45));
}

.kopf-text { flex: 1 1 16rem; min-width: 0; }

.kopf-text .anspruch {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #4a1d05;
  letter-spacing: .01em;
}

/* Das Franz-von-Assisi-Zitat. Auf der alten Seite steckte es als Pixeltext im
   Kopfbild - hier ist es echter, durchsuchbarer und vorlesbarer Text. */
.kopf-text .zitat {
  margin: .5rem 0 0;
  font-style: italic;
  color: #5b2408;
}
.kopf-text .zitat cite { font-style: normal; white-space: nowrap; }

/* Der Regenbogenstreifen der alten Kopfzeile, als schmales Zitat. */
.regenbogen {
  height: 4px;
  background: linear-gradient(90deg,
    #d32f2f, #ef6c00, #f9a825, #388e3c, #0288d1, #303f9f, #7b1fa2);
}


/* 4. Navigation ----------------------------------------------------------- */

.navi { background: var(--weiss); border-bottom: 1px solid var(--rand); }

.navi ul {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 1.25rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.navi a, .navi .hier {
  display: block;
  padding: .85rem 1rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--orange-dunkel);
  border-bottom: 3px solid transparent;
}
.navi a:hover, .navi a:focus {
  color: var(--orange-tief);
  background: var(--creme);
  border-bottom-color: var(--orange-hell);
}
/* Die Seite, auf der man gerade ist, wird als <span class="hier"> gesetzt -
   nicht als Link. So wie auf der alten Website. */
.navi .hier {
  color: var(--orange-tief);
  border-bottom-color: var(--orange);
  background: var(--creme);
}

/* Zweite Menuezeile, nur auf den Tierseiten. Sie steht auf demselben Weiss wie
   die Hauptzeile - beide bilden zusammen einen Navigationsblock, der sich vom
   cremefarbenen Inhalt abhebt. Nur eine Haarlinie trennt die beiden Ebenen; die
   Unterebene ist ausserdem kleiner gesetzt. */
.unternavi {
  background: var(--weiss);
  border-top: 1px solid #f0e9d8;
  border-bottom: 1px solid var(--rand);
}

.unternavi ul {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 1.25rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.unternavi a, .unternavi .hier {
  display: block;
  padding: .5rem .9rem;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--orange-dunkel);
  border-bottom: 3px solid transparent;
}
.unternavi a:hover, .unternavi a:focus {
  color: var(--orange-tief);
  border-bottom-color: var(--orange-hell);
}
.unternavi .hier {
  color: var(--orange-tief);
  border-bottom-color: var(--orange);
}


/* 5. Inhalt --------------------------------------------------------------- */

main { padding-block: 2rem 3rem; }

h1 {
  margin: 0 0 1.25rem;
  font-size: 1.85rem;
  line-height: 1.25;
  color: var(--orange-tief);
}
h2 {
  margin: 2.25rem 0 .75rem;
  font-size: 1.35rem;
  color: var(--orange-dunkel);
}
h3 {
  margin: 1.75rem 0 .5rem;
  font-size: 1.1rem;
  color: var(--orange-dunkel);
}
h1 + h2, h2 + h3 { margin-top: 1rem; }

p { margin: 0 0 1rem; }

a { color: var(--link); }
a:hover, a:focus { color: var(--link-aktiv); }
/* Wichtig: :visited nicht global umfaerben. Auf der alten Seite machte eine
   verrutschte Regel besuchte Links weiss - also unsichtbar. */

.vorspann {
  font-size: 1.1rem;
  color: var(--text-leise);
  max-width: 46rem;
}

.leise { color: var(--text-leise); }
.klein { font-size: .875rem; }


/* 6. Tier-Bloecke --------------------------------------------------------- */
/*
   Hier steckt der ganze Zweck des Umbaus. Im HTML eines Tieres steht KEINE
   einzige Zahl - keine Bildbreite, keine Bildhoehe, keine Tabellenspalte.
   Die Bilder bekommen ihre Hoehe von hier, die Breite ergibt sich von selbst
   aus dem Seitenverhaeltnis. Damit kann ein Foto nie verzerrt werden.

   Die alte Website hatte bei jedem Bild width und height von Hand eingetragen -
   bei 3.497 Bildern. 10 von 115 Tierfotos waren dadurch gestaucht.
*/

.tier {
  padding: 1.5rem 0 1.75rem;
  border-top: 1px solid var(--rand);
}
.tier:first-of-type { border-top: 0; padding-top: .5rem; }

.tier h3 {
  margin: 0 0 .35rem;
  font-size: 1.3rem;
  color: var(--orange-tief);
}

/* Der Rest der alten Ueberschrift, wenn sie mehr als den Namen enthielt */
.tier .untertitel {
  margin: -.2rem 0 .5rem;
  font-size: 1.05rem;
  color: var(--orange-dunkel);
}

/* Die Stichpunkte zum Tier: Geschlecht, Alter, Groesse, Kastration ... */
.tier .fakten {
  margin: 0 0 .9rem;
  color: var(--text-leise);
  font-size: .95rem;
}

/* Die Bilderzeile. Die alte Website setzte jedes Tierfoto auf height="250";
   genau das macht jetzt diese eine Regel - fuer alle Bilder auf einmal. */
.fotos {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 1rem;
}
.fotos img {
  /* 250 px ist die echte Hoehe der Dateien: der Altbestand wurde damals auf
     genau diesen Wert vorskaliert, und die alte Website zeigte ihn 1:1 an.
     Mehr geht nicht ohne Qualitaetsverlust - bei 300 px wuerde JEDES Foto um
     20 Prozent aufgeblasen. Groessere Originale gibt es nicht.
     Erst wenn der Verein neue Fotos in hoeherer Aufloesung einstellt (die
     ANLEITUNG nennt 600 px Breite), laesst sich der Wert sinnvoll erhoehen. */
  height: 250px;
  width: auto;
  /* Schutz fuer sehr breite Panoramabilder: ohne max-width wuerden sie aus der
     Bahn laufen, und ohne object-fit wuerde max-width sie stauchen. Mit contain
     bleibt das Seitenverhaeltnis in jedem Fall erhalten. */
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--weiss);
}

/* Kontaktzeile unter einem Tier */
.tier .kontakt {
  margin: .75rem 0 0;
  padding: .6rem .85rem;
  background: var(--creme-tief);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem;
}

/* Status. Ein Wort in der class-Angabe genuegt - das Tier bleibt stehen,
   es muss nicht in eine andere Datei umziehen.
       <article class="tier reserviert" id="bonita">   */
.tier h3::after {
  margin-left: .6rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: .18em;
  white-space: nowrap;
}
.tier.reserviert h3::after {
  content: "reserviert";
  background: var(--creme-tief);
  color: var(--rot);
  border: 1px solid var(--rot);
}
.tier.vermittelt h3::after {
  content: "vermittelt";
  background: #dcfce7;
  color: var(--gruen);
  border: 1px solid var(--gruen);
}
.tier.notfall h3::after {
  content: "Notfall";
  background: var(--rot);
  color: var(--weiss);
}
.tier.reserviert .fotos img, .tier.vermittelt .fotos img { opacity: .8; }

/* Kurzform fuer die Erfolgsgalerie: Name, ein Satz, Fotos. Kein Rahmen,
   dichter gesetzt, damit viele Eintraege uebersichtlich bleiben. */
.tier.kurz { padding: 1.1rem 0; }
.tier.kurz h3 { font-size: 1.1rem; margin-bottom: .5rem; }
/* Die Bildhoehe ist bewusst NICHT ueberschrieben: die Fotos unter "Zuhause
   gefunden" sind dieselben 250-px-Dateien wie auf den Tierseiten, und ein
   vermitteltes Tier soll nicht kleiner gezeigt werden als ein suchendes.
   Nebeneffekt: ein Block laesst sich unveraendert zwischen den Seiten
   verschieben und sieht ueberall gleich aus. */


/* 7. Kaesten und Listen --------------------------------------------------- */

.kasten {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.kasten > :first-child { margin-top: 0; }
.kasten > :last-child { margin-bottom: 0; }
/* Aushänge und Plakate nicht über die halbe Bahn hinaus aufblasen */
.kasten img { max-width: min(100%, 30rem); border-radius: var(--radius); }

.kasten.wichtig {
  background: var(--creme-tief);
  border-color: var(--orange);
  border-left-width: 5px;
}

/* Nebeneinanderliegende Kaesten, z.B. Kontakt und Spendenkonto */
.reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.reihe > * { flex: 1 1 16rem; margin: 0; }

/* Sprungmarken-Leiste, z.B. die Jahre in der Chronik */
.jahre {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.25rem 0 2rem;
  padding: 0;
  list-style: none;
}
.jahre a {
  display: block;
  padding: .3rem .7rem;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
}
.jahre a:hover, .jahre a:focus { border-color: var(--orange); background: var(--creme-tief); }

/* Downloadliste */
.dateien { list-style: none; padding: 0; margin: 1rem 0; }
.dateien li { border-bottom: 1px solid var(--rand); }
.dateien li:last-child { border-bottom: 0; }
.dateien a {
  display: block;
  padding: .7rem .2rem;
  font-weight: 700;
  text-decoration: none;
}
.dateien a::before { content: "\2193\00a0\00a0"; color: var(--orange); }
.dateien a:hover, .dateien a:focus { text-decoration: underline; }
.dateien .art { font-weight: 400; color: var(--text-leise); font-size: .875rem; }

/* Eine Meldung in Aktuelles bzw. in der Chronik */
.meldung { padding: 1.5rem 0; border-top: 1px solid var(--rand); }
/* max-height statt height: unter den Aktionsbildern sind auch Sponsorenlogos und
   Girlanden von nur 60 px Hoehe. Eine feste Hoehe wuerde sie hochskalieren. */
.meldung .fotos img { height: auto; max-height: 230px; max-width: 100%; }
.meldung:first-of-type { border-top: 0; }
.meldung h3 { margin-top: 0; }
.meldung .datum {
  display: block;
  margin: -.35rem 0 .6rem;
  color: var(--text-leise);
  font-size: .9rem;
  font-weight: 400;
}


/* 8. Nach oben ------------------------------------------------------------ */
/*
   Der Sprung an den Seitenanfang. Bewusst ein gewoehnlicher Link auf die
   Sprungmarke id="oben" in der Kopfzeile und kein Knopf, der mitscrollt: ein
   mitscrollender Knopf braucht JavaScript, um sich oben auf der Seite wieder
   auszublenden, und liegt sonst dauerhaft ueber dem Text. So steht er am Ende
   des Inhalts, genau dort, wo man ihn nach langem Scrollen sucht.

   Weich scrollt es, weil html { scroll-behavior: smooth } gesetzt ist. Wer im
   System "Bewegung reduzieren" eingestellt hat, springt hart - das ist richtig so.
*/

.nach-oben {
  margin-top: 2.5rem;
  text-align: right;
}

.nach-oben a {
  display: inline-block;
  padding: .5rem 1rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--orange-dunkel);
  font-size: .9rem;
  text-decoration: none;
}
.nach-oben a:hover, .nach-oben a:focus {
  background: var(--creme-tief);
  color: var(--orange-tief);
  border-color: var(--orange-hell);
}


/* 9. Fusszeile ------------------------------------------------------------ */
/*
   Kontakt, Adresse und Spendenkonto stehen NUR hier. Auf der alten Website
   standen sie in einer Seitenleiste, die 13 Mal kopiert war - Telefon 34 Mal,
   IBAN 22 Mal. Wer etwas aendern wollte, musste 14 Dateien anfassen.
*/

.fuss {
  margin-top: 3rem;
  background: var(--orange);
  color: var(--weiss);
  border-top: 3px solid var(--orange-dunkel);
}

.fuss-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 2rem 1.25rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}
.fuss-innen > div { flex: 1 1 14rem; }

.fuss h2 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  color: var(--weiss);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.fuss p { margin: 0 0 .4rem; }
.fuss a { color: var(--weiss); text-decoration: underline; }
.fuss a:hover, .fuss a:focus { color: var(--creme-tief); }

.fuss-unten {
  border-top: 1px solid rgba(255, 255, 255, .35);
  margin: 0 1.25rem;
  padding: .9rem 0;
  font-size: .875rem;
}
.fuss-unten .innen {
  max-width: var(--breite);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}


/* 10. Handy und Tablet ----------------------------------------------------- */

@media (max-width: 46rem) {
  .kopf-innen { padding: 1rem 1.25rem .9rem; gap: .8rem 1.5rem; }
  .pfoten { height: 34px; background-position: 0 -152px; }
  .kopf-logo img { width: 200px; }
  .kopf-text .anspruch { font-size: 1.15rem; }
  .kopf-text .zitat { font-size: .95rem; }

  .navi ul, .unternavi ul { padding: 0 .6rem; }
  .navi a, .navi .hier { padding: .7rem .7rem; font-size: .95rem; }
  .unternavi a, .unternavi .hier { padding: .45rem .6rem; font-size: .88rem; }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }

  /* Kleinere Bildhoehe, damit auf einem Handy zwei Fotos nebeneinander passen.
     Die Fotos des Altbestands sind im Mittel nur 175 px breit - groesser als
     hier darf sie niemand darstellen, sonst werden sie unscharf. */
  .fotos img { height: 150px; }
}

@media (max-width: 30rem) {
  /* Auf sehr schmalen Geraeten braucht das Menue sonst drei Zeilen */
  .navi a, .navi .hier { padding: .6rem .55rem; font-size: .92rem; }
  .unternavi a, .unternavi .hier { padding: .4rem .5rem; font-size: .85rem; }

  .fotos { gap: .4rem; }
  .fotos img { height: 130px; }
}


/* Druck ------------------------------------------------------------------- */

@media print {
  .navi, .unternavi, .springen, .regenbogen, .nach-oben { display: none; }
  body { background: #fff; }
  .kopf, .fuss { background: #fff; color: #000; border-color: #999; }
  .fuss h2, .fuss a { color: #000; }
  a { text-decoration: underline; }
}

/* Ausgeblendet --------------------------------------------------------------
   Was in <div hidden> steht, zeigt der Browser nicht an - so blendet der Verein
   Tiere aus, ohne sie zu löschen. Diese Regel sorgt dafür, dass keine andere
   Regel in dieser Datei das versehentlich aufhebt. */
[hidden] { display: none !important; }