/* Allgemeine Layout-Grundlagen

Typografie & Links

Container & Hauptbereiche (#kopf, #center, #fuss, ...)

Navigation & Menüs

Bilder & Galerien

Formulare & Kommentare

Buttons & Interaktionen

Responsive Design

Hilfsklassen (z. B. .center-text, .rounded, ...)   */








/* =============================== */
/* Allgemeine Grundformatierungen */
/* =============================== */
html {
   height: 10%;
}

body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   width: 100%; /* Anpassung: Volle Breite für Hintergrund */
   height: 101%;
   background-color: #f8f9fa;
   background-image: url("../bilder/Kachel_4.gif");
   color: #333;

   box-sizing: border-box; /* NEU: Damit Padding/Borders in Breite einbezogen werden */
   background-repeat: repeat;
   background-attachment: scroll;
}

body.verkauf {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   width: 100%; /* Anpassung: Volle Breite für Hintergrund */
   min-height: 100%;
   background-color: #a0be8c;
   background-image: url("../bilder/Kachel gruen Sandstein.png");
   color: #333;

   box-sizing: border-box; /* NEU: Damit Padding/Borders in Breite einbezogen werden */
   background-repeat: repeat;
   background-attachment: scroll;
}

a:link {
   color: #008366;
   text-decoration: none;
}
a:visited {
   color: #003399;
   text-decoration: none;
}

a:hover {
   color: #003366;
   text-decoration: none;
}

hr,
.hr-highlight {
   width: 95%;
   height: 3px;
   margin: 0 auto;
   background: #CC9966;
   color: #CC9966;
   border: 2px solid black;
   box-shadow: 3px 3px 8px grey;
}

/* Tabellen-Layout für normale Darstellung */
table {
  width: 100%;              /* passt sich flexibel an */
  /*max-width: 800px;         /* optional: begrenzt Maximalbreite */
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1rem auto;        /* zentriert die Tabelle */
}

/* Tabellenzellen */
table td, table th {
  padding: 8px;
  min-width: 40px;
  border: 1px solid #ccc;   /* optional: sichtbare Begrenzung */
  text-align: left;
  font-size: 1rem;
  word-break: break-word;   /* verhindert Überlaufen langer Wörter */
}

.pub-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

/* =============================== */
/* Typografie für Überschriften & Text */
/* =============================== */

h1 {
   font-size: 1.8em;
   margin-bottom: 10px;
}

h2 {
   font-size: 1.3em;
   margin-top: 20px;
   text-align: center;
}

p {
   font-size: 1.1rem;
   line-height: 1.6;
   text-align: left;
}

em {
   font-weight: bold;
   font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =============================== */
/* Container-Layout und Blöcke */
/* =============================== */

.container {
   width: 95%;
   max-width: 100%;
   margin: 0 auto;
   padding: 1rem;
   text-align: left;

   box-sizing: border-box; /* NEU */
}

#kopf, #oben_katalog, #center, #fuss {
   border: 1px solid grey;
   margin: 0 auto; /* Horizontale Zentrierung */
   padding: 10px;

   /* Änderung: feste max-width, statt 95% Breite, für Einheitlichkeit */
   max-width: 1100px; /* NEU: Einheitliche max-width für alle Hauptbereiche */
   width: 100%;       /* NEU: volle Breite bis max-width */

   font-family: "Times New Roman", Verdana, Tahoma, Arial, serif;

   background-color: rgba(255,255,255,0.65);  /* fast deckend, aber weich */
   text-align: justify;

   box-sizing: border-box; /* NEU */
}

#center-v   {             /* Center-Container speziell für Verkaufsseite */
   border: 1px solid grey;
   margin: 0 auto; /* Horizontale Zentrierung */
   padding: 10px;

   /* Änderung: feste max-width, statt 95% Breite, für Einheitlichkeit */
   max-width: 1100px; /* NEU: Einheitliche max-width für alle Hauptbereiche */
   width: 100%;       /* NEU: volle Breite bis max-width */

   font-family: "Times New Roman", Verdana, Tahoma, Arial, serif;
   background-color: rgba(255,255,255,0.65);  /* fast deckend, aber weich */
   text-align: justify;

   box-sizing: border-box; /* NEU */
}

#kopf {
   text-align: center;
   font-size: 1.2em;
   color: blue;
   /* max-width bleibt wie oben gesetzt */
   background-color: #FFCC66;
   background-image: url("kopf_04.jpg");
   background-size: 1000px 200px;
   background-repeat: repeat;
}

#fuss {
   background-color: #red !important;
   color: #003366;
   font-size: smaller;
   width: 100%;
   min-height: 60px;
   max-width: 1100px; /* Angepasst, passend zu den anderen Containern */
   margin: 0 auto;    /* Zentrierung, falls nicht schon gesetzt */
   box-sizing: border-box; /* NEU */
   background-image: url("kopf_01.jpg");
   background-size: 1000px 60px;
   background-repeat: repeat;
}

/* Beispiel: Container für die Menüpunkte im Kopf */
#kopf nav ul {
  display: flex;           /* Flexbox aktiviert */
  flex-wrap: wrap;         /* Erlaubt Umbruch, wenn zu eng */
  list-style: none;        /* Standard-Punkte entfernen */
  margin-left: 150px;      /* Abstand vom linken Rand, sodass das Logo frei bleibt */
  padding: 0;
}

/* Die einzelnen Menü-Items */
#kopf nav ul li {
  margin-right: 20px;      /* Abstand zwischen Menüpunkten */
}

/* Optional: Links im Menü */
#kopf nav ul li a {
  text-decoration: none;
  font-weight: bold;  /* Fett */
  color: #333;
  padding: 1px 1px;
  display: block;
}

/* Optional: Hover-Effekt */
#kopf nav ul li a:hover {
  background-color: #ddd;
  border-radius: 4px;
}


/* =============================== */
/* Buchverkauf-spezifische Layouts */
/* =============================== */

.book-cover {
   max-width: 150px;
   height: auto;
   border-radius: 8px;
   border: 1px solid #333;
   display: block;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}

.buch-info {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   align-items: flex-start;
   margin: 1rem 0;
}

.buch-cover img.book-cover {
   max-width: 150px;
   height: auto;
   display: block;
   border: 1px solid #ccc;
   box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.buch-details {
   flex: 1 1 50%;
}

.buch-details p {
   line-height: 1.2;
   font-size: 1.2rem;
   margin-top: 0.5rem;
}

.buch-beschreibung {
   overflow: hidden;
   max-height: 0;
  transition: max-height 0.3s ease;
  display: none;
   margin-top: 1rem;
   padding: 1rem;
   background-color: #fdf6e3;
   border: 1px solid #ccc;
   border-radius: 6px;
   box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.1);
}

.buch-beschreibung.open {
  display: block; /* Sichtbar wenn offen */
}

.logo-oben {
    display: block;
    margin: 20px auto; /* zentriert + Abstand */
    width: 20%;         /* oder eine feste Breite */
    max-width: 300px;   /* schützt vor zu groß auf großen Bildschirmen */
    height: auto;       /* Seitenverhältnis bleibt erhalten */
    position: relative;
    left: -10vw; /* verschiebt das Logo 10% der Viewport-Breite nach links */
}


/* =============================== */
/* Buttons */
/* =============================== */

a.btn,
button.btn  {
   display: inline-block;
   margin: 8px 4px;
   padding: 10px 16px;
   font-size: 1em;
   font-family: Georgia, serif;
   background-color: hsl(38, 58%, 75%);
   color: black;
   border: 1px solid #996633;
   border-radius: 6px;
   text-decoration: none;
   cursor: pointer;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
   transition: background-color 0.3s, color 0.3s;
}

a.btn:hover,
button.btn:hover {
   background-color: hsl(38, 58%, 60%);
   color: #003366;
   transform: scale(1.05);
}

.agb-toggle {
  margin-left: 10px;
  background-color: #e4f4e0;
  border: 1px solid #888;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 0.9em;
}


/* AGB-Elemente */
.agb-toggle:hover {
  background-color: #d7eacb;
}

.agb-text {
  font-size: 0.95em;
  line-height: 1.4;
  color: #222;
}


/* Buchbeschreibung; Anfangszustand: versteckt, aber animierbar */
.buch-beschreibung {
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height 0.9s ease, opacity 0.9s ease;
}

.buch-beschreibung.open {
   /* Keine feste max-height! */
   opacity: 1;
}

/* Buchbeschreibung; Optional: Symbol im Button etwas stylen */
.toggle-btn .symbol {
   margin-left: 5px;
   font-size: 0.9em;
}


/* =============================== */
/* Lesermeinungen */
/* =============================== */

.reviews {
   margin-top: 1px;
   padding: 2px 30px;
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   text-align: left;
}

.review {
   font-style: italic;
   margin-bottom: 10px;
}

.author {
   margin-top: 20px;
}

/* =============================== */
/* Responsive Design */
/* =============================== */

@media (max-width: 600px) {
   h1 {
      font-size: 1.4em;
   }

   h2 {
      font-size: 1.1em;
   }

   .container {
      padding: 0.5rem;
   }

   .buch-info {
      flex-direction: column;
      align-items: center;
   }

   .buch-details,
   .details-block {
      text-align: center;
   }
   table {
    font-size: 0.9rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* =============================== */
/* Hilfsklassen */
/* =============================== */

.center-text {
   text-align: center;
}

.shadow-box {
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.rounded {
   border-radius: 8px;
}

.img-shadow {
   box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
}


/* Illustrations-Bilder im Text*/
.illu {
float:left;
margin-bottom:10px;
margin-right:20px;
border:1px black solid;
max-width: 301px;
max-height:301px;
}

.steuer img{
border:0;
width:60px;
height:60px;
}

.galerie img{
width:100px;
height:auto;
margin-bottom:2px;
margin-right:4px;
border: 1px black solid;
}

#oben_katalog{
max-width: 100%;
width: 100%;
position: relative;

padding: 2px;
border: 1px solid grey;
margin: 0 auto;
background-color: #f5f5f5;
font-family:"Times New Roman",Verdana,Tahoma,Arial,serif;
text-align:justify;
}

.katalog img{
float:left<h5></h5>;
height:200px;
width:auto;
margin-bottom:1px;
margin-right:1px;
border: 1px black solid;
}

#album li{
<!-- display: inline; -->
list-style-type:none;
padding: 0;
margin: 0;
border: 0 ;
table-layout:auto;
width:auto;


display: flex;
align-items: center;
}

#album ul {
  display: flex;
  justify-content: center; /* zentriert die Bilder horizontal */
  gap: 6px; /* Abstand zwischen den Bildern */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#album img {
  width: 150px; /* oder andere feste Breite */
  height: auto;
  box-shadow: 2px 2px 6px gray;
  border: 1px solid #ccc;
}

#album {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  padding: 5px 5px;
  /*max-width: 1059px; /* NEU: Einheitliche max-width für alle Hauptbereiche */
  /*width: 90%;       /* NEU: volle Breite bis max-width */

  /*margin: 0 auto;    /* zentriert das Ganze */
  /*background-color: #eaeaea;  */

   background-color: black;
   color: #CC9933;
   font-size: smaller;
   width: 100%;
   max-width: 1100px; /* Angepasst, passend zu den anderen Containern */
   margin: 0 auto;    /* Zentrierung, falls nicht schon gesetzt */
   box-sizing: border-box; /* NEU */
}

/* Kachelrahmen für jedes Bild */
.katalog {
  flex: 0 0 auto;
  width: 150px;        /* feste Breite */
  height: 110px;       /* feste Höhe */
  overflow: hidden;
  border: 1px solid #999;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Bild im Rahmen, auf Größe angepasst */
.katalog img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

#auge{
min-height: 100px;
align-items: center;
}


/* Bestellformular */
form.bestellformular {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  max-width: 500px;
  margin: 0 auto;
}

form.bestellformular label {
  font-weight: bold;
  margin-top: 0.5em;
}

form.bestellformular input,
form.bestellformular textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.4em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

form.bestellformular textarea {
  min-height: 5em;
  resize: vertical;
}

form.bestellformular .button-group {
  margin-top: 1em;
  padding: 0.6em;
  font-weight: bold;
  background-color: #eee;
  border: 1px solid #888;
  cursor: pointer;
  border-radius: 4px;
}

/* --- Kontaktformular-Layout --- */

.formular-container {
  max-width: 600px;
  margin: 2em auto;
  padding: 1.5em 2em;  /* Etwas mehr Innenabstand für Luft */
  border: 2px solid #ccc;
  background-color: #f8f8f8;
  border-radius: 1em;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* moderner Font */
}

.formular-container h2 {
  text-align: center;
  color: #333;
  margin-bottom: 1.5em;
  font-weight: 700;
  font-size: 1.8em;
}

.form-group {
  margin-bottom: 1.2em;
}

label {
  display: block;
  margin-bottom: 0.4em;
  font-weight: 600;
  color: #3a3a3a;
}

input[type="email"],
textarea {
  width: 100%;
  padding: 0.7em 0.8em;
  font-size: 1em;
  border: 1px solid #aaa;
  border-radius: 0.5em;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
  font-family: inherit;
}

input[type="email"]:focus,
textarea:focus {
  border-color: #88a770;  /* gedecktes Lindgrün beim Fokus */
  outline: none;
  box-shadow: 0 0 5px #88a770aa;
}

textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

.senden-button {
  background-color: #88a770; /* gedecktes Lindgrün */
  color: white;
  border: none;
  padding: 0.7em 1.4em;
  font-size: 1.1em;
  border-radius: 0.6em;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  font-weight: 600;
  transition: background-color 0.3s ease;
  display: block;
  margin: 0 auto;
  min-width: 140px;
}

.senden-button:hover,
.senden-button:focus {
  background-color: #77995e;
  outline: none;
}

/* Honeypot verstecken */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}