body{
  margin:0;
  padding:0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin-top:0px;
}

html {
    scroll-behavior: smooth; /*Macht das der Menüpunkt langsam zur Überschrift scrollt */
}

[id] { /* Verhindert, dass das Ziel vom fixierten Menü verdeckt wird, dafür das JS  */
    scroll-margin-top: var(--dynamic-margin, 80px); /* 80px ist der "Fallschirm", falls JS aus ist */
}

.Inhalt { /* Inhalt ist das Div das alles unter dem Menü enthält
/* ----- Versuch das Div "Inhalt" so einzustellen wie den Banner" */
/*  background-color:#2f3e46; /* Hintergrundfarbe des Divs wenn Bild kleiner */
  overflow:hidden;
  display:flex;
  justify-content:center;
  margin: 0 0;
  padding: 0 0;
/*  background: linear-gradient(to bottom right, #d63220 0%, #f0e30c 100%); */
 /* box-shadow: 0px 2px 4px #e95140; /* Schatten */ 
  
}

.Inhalt div {
 /* ----- Einstellungen für alle <div> innerhalb von "Inhalt" -----  */

/*width:90.5vw; */
/* width: 78.182%; /* für 3840 x 2400 */
/*  width: 70.58%;/* für 1920 x XXX */
  width: 99%;  
  height: auto;

  object-fit:cover;
  object-position:center;
/*  object-position:center 40%; */
  
  background-color:white; 
  padding:10px;
  box-sizing: border-box; /* Zwingt das Padding nach innen */
  font-size:medium;
  margin: 0px 0 0 0; /* TRBL - top, right, bottom left - Hier Abstand von der Überschrift AUSSEN vom Rahmen*/
  padding: 5px 4px 5px 3px; /*Abstand innerhalb vom Rahmen regelt auch wie weit der Rahmen selbst nach außen geht*/
}

h1 {
  display: inline-block; /* 1. Die Box an den Text anpassen */
  width: auto; /* width: 100% unbedingt entfernen! */
  font-size: 1.2rem; /* Modernere Einheit als 'large' */
  font-weight: bold;
  font-style: italic;
  margin: 20px 0 2px 0; /* Abstand der Überschrift, hier  20 nach oben */
  padding: 5px 5px; /* Innenabstand (links/rechts etwas mehr für die Optik) */
  
  /* 3. Rahmen & Ecken */
  border: 0px solid #f0e30c;
  border-radius: 5px 5px 0 0; /* Kurzschreibweise: oben-l, oben-r, unten-r, unten-l */
  background: #d63220;
  background: linear-gradient(to bottom right, #d63220 0%, #f0e30c 100%);
  box-shadow: 0px 2px 4px #e95140; /* Schatten */
}

h2 {
 /* font-family: Verdana, Arial, Helvetica, sans-serif; */
  font-size: 1rem; /* Modernere Einheit als 'large' */
  font-weight: bold;
  font-style: italic;
  margin-bottom: 0px;
  /*padding-bottom: 0px;*/
}

.Umrandung { /* Die äußere Box */
    display: block !important;  /* Erzwingt das Block-Verhalten */
    width: 100% !important;     /* Erzwingt die volle Breite */
    box-sizing: border-box;     /* Verhindert, dass die Box wegen des Paddings aus dem Bild rutscht */
    
    /* Dein restlicher Code */
    padding: 0px 0px 3px 5px;
    border: 0px solid #d63220;
    box-shadow: 0 0 8px rgba(214, 50, 32, 0.8);
    border-radius: 4px;
    /*margin: 10px 0;             /* Platz für den Schatten oben/unten */
    margin-top: 1px;
    margin-bottom: 15px;
}

.Umrandung h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

.Umrandung p {
    margin-top: 0;
    margin-bottom: 10px; /* Abstand zwischen den einzelnen Textblöcken */
    line-height: 1.5;    /* Macht den Text besser lesbar */
}

.Umrandung p:first-child {
  margin-top: 5px; /* Zieht den Text leicht nach oben, um die line-height auszugleichen */
}

/* Optional: Der letzte Absatz braucht keinen Abstand nach unten */
.Umrandung p:last-child {
    margin-bottom: 0;
}

/* Das Layout innen (ohne eigenen Rahmen) */
.buch-container {
    display: flex !important; /* Erzwingt Flexbox */
    flex-direction: row;      /* Desktop: Nebeneinander */
    align-items: flex-start;  /* Richtet Text und Bild oben bündig aus */
    gap: 10px;                /* Abstand zwischen Text und Bild */
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
}
.buch-text p:first-child {
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
}
.buch-text {
   /* flex: 0 0 85%;           /* Text bekommt fest 70% der Breite */
   flex: 1; /* Der Text nimmt sich den restlichen Platz, egal wie breit das Bild ist */
}
.buch-bild {
    /*flex: 0 0 15%;           /* Bild bekommt fest 25% der Breite */
    /*max-width: 250px;        /* Damit das Buch am PC nicht riesig wird */
    flex: 0 0 400px; /* Gib dem Bild eine feste Basisbreite am PC */
    max-width: 4800px; /* Deckel drauf für den PC */
    margin-top: 3px !important;
    margin-right: 3px !important;
    padding-top: 0 !important;
    padding-right: 3px !important;
    text-align: right;
}
.buch-bild img {
    width: 100%; /* Das Bild füllt die 200px der Box aus */
    height: auto;
    display: block; /* Verhindert einen winzigen Geister-Abstand unter dem Bild */
    /* Optional: Ein feiner Schatten lässt das Buch echter wirken */
    /*box-shadow: 1px 1px 5px rgba(0,0,0,0.2); /* 2 2 10 */
    box-shadow: 0px 0px 15px 5px #d63220;
}
.buch-container, .buch-text, .buch-bild {
    width: 100% !important; 
}
/* Die Handy-Regel (Media Query) */


ul {
    list-style-position: outside; /* Der Punkt rückt zum Text ins Innere */
    text-align: left;         /* Zentriert Text und Punkt gemeinsam */
    padding-left:20px;
}

.pdf-download-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color:black;
    /*font-weight: bold;*/
   /* gap: 8px; /* Abstand zwischen Bild und Text */
}
.pdf-download-link:hover span {  /* Der Zustand, wenn die Maus über den Link fährt */
    color: #d63220; /* Das gewünschte Rot */
    transition: color 0.2s ease; /* Macht den Farbübergang weich */
}
.pdf-icon-img,
 .yt-icon-multi-AddOns { /* Hier kontrollieren wir die Größe */
    height: 20px;      /* Etwas größer als die Schrift, da hochkant */
    width: 20px;       /* Behält das Seitenverhältnis bei */
    margin-right: 10px; 
    object-fit: contain;
   /*border-radius: 2px; /* Rundet die Ecken des Bildes minimal ab */
   /*display: block;
    flex-shrink: 0;    /* Verhindert, dass das Bild schmaler gedrückt wird */
}

/* Effekt beim Drüberfahren */
.pdf-download-link:hover .pdf-icon-img {
    transform: scale(1.1); /* Das Icon wird minimal größer */
    transition: transform 0.1s ease-in-out;
}
/* für den Link bei den News zum WhatsApp-Kanal */
.whatsapp-link, 
.whatsapp-link:visited {
    color: #10b94e !important;
    text-decoration: none;
}
.amazon-container {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.amazon-button {
    background-color: #FF9900; /* Original Amazon Orange */
    color: #232f3e;            /* Dunkles Amazon Blau/Schwarz */
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 0 #cc7a00; /* Ein kleiner 3D-Effekt unten */
    transition: all 0.2s ease;
}

.amazon-button:hover {
    background-color: #ffb340;
    transform: translateY(-2px); /* Er hüpft leicht hoch */
    box-shadow: 0 6px 0 #cc7a00;
    font-size: 1.2em;
}

.amazon-button:active {
    transform: translateY(2px);  /* Er lässt sich "drücken" */
    box-shadow: 0 2px 0 #cc7a00;
}

.amazon-cart {
    font-size: 1.2rem;
}