/* CSS-Stylesheet-Datei für Evi-auf-Ahnensuche */

body { background-color: #ffcc99;
margin-left: 60px;
margin-right: 60px; }
body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; color: #800000; font-size: 14px }

h1 { 
  color: white;
  background-color: #800000;
}


a { text-decoration: none; color: #DF4800 }
a:visited { text-decoration: none; color: #9900FF }
a:active { text-decoration: none; color: #ff0000 }
a:hover { text-decoration: none; color: #ff0000 }



/* Styling für den "Nach oben"-Link mit Pfeil */
a.toplink::before {
  content: '↑  ';
  color: #800000;
  margin-left: 10px; /* Mehr Abstand zum Pfeil */
  font-size: 18px; /* Größerer Pfeil */
}


/* Auffälliges Styling für den "Nach oben"-Link in <p> */
p.toplink {
  margin-top: 20px; /* Größerer Abstand vor dem Link */
  margin-bottom: 20px; /* Optional: Abstand zum Seitenende */
  font-size: 16px; /* Größere Schriftgröße für Auffälligkeit */
  font-weight: bold; /* Fetter Text wie bei Überschriften */
  color: #800000; /* Optional: Farbe passend zum Pfeil */
}




a[href^="#"]:not([href="#oben"])::after {
  content: '↓ ';
  color: #800000; /* Optional: Farbe für den Pfeil */
  margin-left: 5px; /* Optional: Abstand zwischen Text und Pfeil */
}

a[href$=".pdf"]:after {
  content: "";
  display: inline-block;
  width: 1.5em; /* Größe der Grafik */
  aspect-ratio: 1;
  margin-left: 0.3em;
	
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 16 16'%3E%3Cpath id='path843' style='fill:%23cc0000;stroke-width:0.999999' d='M 13.48005,9.1704097 C 12.850318,8.5511222 13,7.7173392 10.155894,8.8349717 9.268076,8.2930868 8.6744685,7.5447892 8.2563764,6.4455484 8.4576757,5.6146796 8.7777031,4.3503112 8.53511,3.5555434 8.3183172,2.203434 6.4104784,2.346625 6.1627153,3.2600647 5.9355991,4.090933 6.1420684,5.246935 6.5240365,6.7229014 6.0078634,7.9563225 5.4122537,9.6039107 4.87028,10.553484 4.3555803,10.667034 2,10.82482 2.2377966,12.937739 c -0.1703454,0.815393 1.3420504,2.848717 3.92807,-1.610147 1.156228,-0.381893 2.4156907,-0.851512 3.5306248,-1.037297 0.9755756,0.526394 1.9575206,1.396425 2.7214566,1.396425 1.31625,0 1.604075,-1.9744253 1.062102,-2.5163103 z M 3.2546495,13.185468 C 3,12.050499 4.5192823,11.663064 4.8238162,11.379215 c 0.083378,0.9917 -1.5691667,1.84237 -1.5691667,1.806253 z M 7.4666232,3.3491143 c 0,0 1.155469,0.85837 0.092994,2.1055747 C 6.3761381,4.9912024 7.3376707,3.3491143 7.4666232,3.3491143 Z M 6.2071604,10.398678 C 6.7078567,9.5265077 7.1362722,8.4892111 7.4821165,7.5757547 7.9105321,8.3550143 8.4576757,8.9794867 9.0357897,9.4078197 7.9621494,9.6297217 7.0278841,10.083867 6.2071604,10.398678 Z m 6.7928406,-0.258036 c 0,0 -0.423263,1.026976 -1.925319,-0.4025523 C 13,8.623847 13.185822,10.01677 13.000001,10.140642 Z' /%3E%3Cpath style='stroke-width:1;fill:%23555753' d='M 3,15 V 1 H 9 V 4.2501467 C 9,4.6656854 9.33437,5 9.75,5 H 13 V 15 Z M 13,4 10,4.00235 V 1 Z M 13.55937,3.0619011 10.9375,0.4405438 C 10.65625,0.1593488 10.275,0 9.87812,0 H 3.5 C 2.67187,0.003 2,0.674868 2,1.502836 V 14.500294 C 2,15.328252 2.67187,16 3.5,16 h 9 C 13.32812,16 14,15.328252 14,14.500294 V 4.1242033 C 14,3.7274009 13.84062,3.3431061 13.55937,3.0619011 Z' /%3E%3C/svg%3E");
	
	background-size: contain;
	background-repeat: no-repeat;
}


/* Interne Links (SVG-Grafik mit Farbe #800000) */
a:not([href$=".pdf"]):not([href^="#"]):not([href^="http"]):not([href$=".jpg"]):not([href$=".jpeg"]):not([href$=".png"]),
a[href*="//www.evi-auf-ahnensuche.de/"]:not([href$=".pdf"]):not([href^="#"]):not([href$=".jpg"]):not([href$=".jpeg"]):not([href$=".png"]) {
  padding-right: 1.5em;
  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22%23800000%22%20points%3D%222%2C5%203%2C5%203%2C3%209%2C3%209%2C9%207%2C9%207%2C10%2010%2C10%2010%2C2%202%2C2%22/%3E%3Cpolygon%20fill%3D%22%23800000%22%20points%3D%220.5%2C10.5%203.5%2C7.5%202%2C6%205.5%2C6%205.5%2C10%204.5%2C8.5%201.5%2C11.5%22/%3E%3C/svg%3E") no-repeat right;
}

/* Externe Links (SVG-Grafik mit Farbe #800000, außer bestimmte Domains und Bildlinks) */
a[href^="http"]:not([href^="https://www.facebook.com/"]):not([href^="https://www.instagram.com/"]):not([href$=".jpg"]):not([href$=".jpeg"]):not([href$=".png"]) {
  padding-right: 1.5em;
  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22%23800000%22%20points%3D%222%2C2%205%2C2%205%2C3%203%2C3%203%2C9%209%2C9%209%2C7%2010%2C7%2010%2C10%202%2C10%22/%3E%3Cpolygon%20fill%3D%22%23800000%22%20points%3D%226.2%2C2%2010%2C2%2010%2C5.8%208.6%2C4.4%206.5%2C6.5%205.5%2C5.5%207.6%2C3.4%22/%3E%3C/svg%3E") no-repeat right;
}

  
.email {
    background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20d%3D%22M2%2C8%20h20%20v12%20h-20z%20l20%2C12m0%2C-12%20l-20%2C12%22/%3E%3C/svg%3E") no-repeat right center;
    padding-right: 30px; /* Platz für das größere Symbol */
    display: inline-block;
    background-size: 24px 24px; /* Größe des Briefumschlags */
}

.email:hover,
.email:focus {
    background-color: #fffbf0; /* Nur die Hintergrundfarbe ändern */
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22purple%22%20stroke-width%3D%222%22%20d%3D%22M2%2C8%20h20%20v12%20h-20z%20l20%2C12m0%2C-12%20l-20%2C12%22/%3E%3C/svg%3E"); /* SVG separat definieren */
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 24px 24px;
}


/* Abstand zwischen Listenelementen */
ul li {
  margin-bottom: 15px;
}
ol li {
  margin-bottom: 15px;
}

/* Standardabstand für Absätze */
p {
  margin-bottom: 10px;
}

/* Abstand vor und nach Tabellen */
table {
  margin-top: 25px; /* Abstand vor der Tabelle */
  margin-bottom: 25px; /* Abstand nach der Tabelle */
}

/* Größerer Abstand vor Überschriften, wenn sie auf <p>, <ul>, <ol> oder <table> folgen */
p + h1,
p + h2,
p + h3,
ul + h1,
ul + h2,
ul + h3,
ol + h1,
ol + h2,
ol + h3,
table + h1,
table + h2,
table + h3 {
  margin-top: 30px;
}

/* Standardabstand vor <h1>, <h2> und <h3> */
h1,
h2,
h3 {
  margin-top: 15px;
  margin-bottom: 15px; /* Etwas mehr als nach <p> */
}





/* Linkliste */

.linkliste {
	font-size: 18px;
}




/* Basis-Stile für Tabellen */
table {
  border-collapse: collapse; /* Rahmen werden zusammengeführt */
  margin: 25px auto; /* Zentriert die Tabelle mit Abstand oben/unten */
  width: auto; /* Tabelle passt sich dem Inhalt an */
  max-width: 100%; /* Verhindert Überlauf auf kleinen Bildschirmen */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtiler Schatten für Tiefe */
  }


td, th {
  border: 1px solid #ddd; /* Einheitlicher Rahmen */
  padding: 10px; /* Angemessener Innenabstand */
}


td { background-color: #fff;
     color:  #4B0000;
}


th {
  background-color: #800000; /* Kopfzeilenfarbe */
  color: #fff; /* Weißer Text für Kontrast */
  font-weight: bold;
}


caption {
	background-color: #800000;
	color: #fff;
	border: 1px solid #ddd;
	padding: 10px;
	font-size: 14px;
	font-weight: bold;
}


/* Telefonbuch-Tabelle */
.phonebook-rumstedt {
    max-width: 800px;	
}

.phonebook-rumstedt td, th {
	text-align: left;
}


.phonebook-rumstedt td:nth-child(3),
.phonebook-rumstedt td:nth-child(4),
.phonebook-rumstedt td:nth-child(5) { 
text-align: right;
/* Rechtsbündigkeit für alle Zeilen außer total-row */
}


.phonebook-rumstedt .total-row td:nth-child(2),
.phonebook-rumstedt .total-row td:nth-child(3),
.phonebook-rumstedt .total-row td:nth-child(4) {
    text-align: right; /* Für die total-row mit colspan */
}


.phonebook td, th {
	text-align: left;
}


.phonebook td:nth-child(2),
.phonebook td:nth-child(3),
.phonebook td:nth-child(4) { 
text-align: right;
}


.ahnenliste td:nth-child(4) {
	text-align: right;
}






/* Gemeinsame Stile für alle Galerien */
.gallery {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start;
  gap: 8px !important; /* Für andere Galerien */
}

/* Überschrift der Galerie */
.gallery h3 {
  text-align: center;
  margin-bottom: 0px; /* auf 0 verringert */
  font-size: 1.5em;
  width: 100% !important; /* Volle Breite, verhindert Flex-Zeilenproblem */
}

/* Info-Text Bei Klick auf die Thumbnail-Vorschau */
.gallery-info {
  text-align: center;
  margin-bottom: 5px; /* von 10 auf 5px verringert */
  font-size: 1em;
  color: #555;
  width: 100% !important; /* Volle Breite, verhindert Flex-Zeilenproblem */
}

/* Container für die Bilder */
.gallery figure {
  margin: 0 !important; /* Standard: Kein Margin, außer bei .gallery-photos */
  padding: 0 !important;
  text-align: center;
  flex: 0 0 auto;
}


/* Hover-Effekt für Thumbnails */
.gallery img:hover {
  transform: scale(1.1);
}


/* Styling für Foto-Galerien (Behnke) */

.gallery-photos figure {
  margin: 8px !important; /* Angepasst für einheitliche Abstände */
}

.gallery-photos img {
  height: 150px; /* Einheitliche Höhe */
  width: auto; /* Proportionen beibehalten */
  max-width: 180px; /* von 140 auf 180 vergrößert */
  border-radius: 8px; /* Angepasst an aktuelle Version */
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
  padding: 3px; /* Minimales Padding, angenommen von 2 auf 3 geändert */
  background: #fff;
  box-sizing: border-box;
}



/* Bildunterschriften */
.gallery-photos figcaption {
  margin-top: 5px;
  font-size: 0.9em;
  color: #333;
  max-width: 150px !important;
  text-align: left;
}


/* Styling für Werbeanzeigen-Galerien (Familienanzeigen, Wein) */
.gallery-ads img {
  max-width: 150px; /* Funktioniert in Familienanzeigen/Wein */
  height: auto;
  max-height: 200px;
  border-radius: 8px;
  object-fit: contain;
  transition: transform 0.3s ease;
  display: block;
  background: #fff;
  padding: 2px;
  box-sizing: border-box;
}

.gallery-ads figcaption {
  margin-top: 5px;
  font-size: 0.9em;
  color: #333;
  max-width: 150px !important; /* Textumbruch sicherstellen */
  text-align: left;
}

/* Styling für Dosenmilch-Galerie */
.gallery-dosenmilch img {
  width: 150px; /* Feste Breite für Einheitlichkeit */
  height: auto;
  max-height: 200px;
  border-radius: 8px;
  object-fit: contain;
  transition: transform 0.3s ease;
  display: block;
  background: #fff;
  padding: 2px;
  box-sizing: border-box;
}

.gallery-dosenmilch figcaption {
  margin-top: 5px;
  font-size: 0.9em;
  color: #333;
  max-width: 150px !important; /* Textumbruch sicherstellen */
  text-align: left;
}



/* Responsives Design */
@media (max-width: 768px) {
  .gallery-photos figure {
    margin: 4px !important; /* Angepasst, angenommen */
  }
  .gallery-photos img {
    height: 100px;
    max-width: 110px;
    padding: 1px; /* Angepasst, angenommen */
  }
  .gallery-photos figcaption {
    max-width: 120px !important;
  }
 
  .gallery-ads img {
    max-width: 120px;
    max-height: 160px;
  }
  .gallery-ads figcaption {
    max-width: 120px !important;
  }
  .gallery-dosenmilch img {
    width: 120px;
    max-height: 160px;
  }
  .gallery-dosenmilch figcaption {
    max-width: 120px !important;
  }
  .gallery {
    gap: 8px !important;
  }
  .gallery-info {
    font-size: 0.9em;
  }
}

@media (max-width: 480px) {
  .gallery {
    padding: 10px;
  }
  .gallery-photos figure {
    margin: 4px !important;
  }
 .gallery-photos img {
    height: 90px;
    max-width: 100px;
    padding: 1px; /* Angepasst, angenommen */
  }
  .gallery-photos figcaption {
    max-width: 100px !important;
  }
  .gallery h3 {
    font-size: 1.2em;
  }
  .gallery-info {
    font-size: 0.8em;
  }
  .gallery-ads img {
    max-width: 100px;
    max-height: 140px;
  }
  .gallery-ads figcaption {
    max-width: 100px !important;
  }
  .gallery-dosenmilch img {
    width: 100px;
    max-height: 140px;
  }
  .gallery-dosenmilch figcaption {
    max-width: 100px !important;
  }
  .gallery h3 {
    font-size: 1.2em;
  }
  .gallery-info {
    font-size: 0.8em;
  }
}