/* style.css ganz oben */
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.nlobenmitte { color: black; font-weight: bold; font-size: 15px }
.nlobenrechts { color: black; font-weight: normal; font-size: 13px }

.hrsg { font-weight: normal; font-size: 13px }
.medium { font-weight: normal; font-size: 13px }
.inhalt { font-weight: bold; font-size: 13px; margin-bottom: 3px }
.verlag { font-weight: bold; font-size: 13px; margin-bottom: 3px }
.systemvoraussetzung { font-weight: bold; font-size: 13px; margin-bottom: 3px }
.preis { font-weight: bold; font-size: 13px; margin-bottom: 3px }
.preiseversteh { font-weight: normal; font-size: 13px; margin-bottom: 3px }
.verbraucher { font-weight: normal; font-size: 12px; margin-bottom: 3px }
.isbn { font-weight: bold; font-size: 13px; margin-bottom: 3px }
.bestnr { font-weight: bold; font-size: 13px; margin-bottom: 3px }
.verlagsinfo { font-weight: bold; font-size: 16px; margin-bottom: 11px }
.kontakt { font-weight: normal; margin-top: 5px; font-size: 13px }
h3 { font-weight: bold; font-size: 14px; font-family: Roboto, Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; margin-top: 0px; margin-bottom: 0px }
h4 { font-weight: bold; font-size: 19px; font-family: Roboto, Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; margin-top: 5px; margin-bottom: 0px }
p { font-size: 13px; font-family: Roboto, Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; margin-top: 1px; margin-bottom: 2px; line-height:1.3 }
.verlagsinfo1  { font-weight: bold; font-size: 13px }
.more { }
.back  { }
.kommentar  { }
.subtitle { font-weight: normal; font-size: 13px }
.navigation { color: white; font-size: 15px; text-align: center; vertical-align: middle }

ul {font-size: 13px; font-family: Roboto, Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; margin:0em 0em 3px 1em; padding:0; line-height:1.3 }
ol {font-size: 13px; font-family: Roboto, Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; margin:0em 0em 3px 2em; padding:0; line-height:1.3  }
li {font-size: 13px; font-family: Roboto, Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-color:black; margin:3px 0em 0em 0em; padding:0; line-height:1.3 }

a:link {color: darkblue; text-decoration: none}
a:visited {color: gray; text-decoration: none}
a:bb:hover {text-decoration: underline}
a:active {text-decoration: underline}

body {background-color: #EEEEEE;}
body { font-size: 13px; font-family: Roboto, Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }
.ueberschriftlisten { font-weight: bold; font-size: 13px }

/* Startseite */
.aktionsangebot-negativ {
  color: #ffffff;
  background-color: #d32f2f;  /* kräftiges Rot */
  padding: 0.1em 0.5em;         /* Luft um den Text */
  border-radius: 0.2em;        /* optional: abgerundete Ecken */
  display: inline-block;       /* passt sich dynamisch der Breite an */
  font-weight: bold;           /* bessere Lesbarkeit */
  margin-right: 6px;           /* je größer der Wert, desto weiter rutscht der Button nach rechts */
}

/* Produktseiten */
.aktionsangebot-titel-negativ {
  color: #ffffff;
  font-size: 13px;             /* Schriftgröße */
  background-color: #d32f2f;   /* kräftiges Rot */
  padding: 0.3em 0.7em;        /* Luft um den Text */
  border-radius: 0.2em;        /* optional: abgerundete Ecken */
  display: inline-block;       /* passt sich dynamisch der Breite an */
  font-weight: bold;           /* bessere Lesbarkeit */
  margin-bottom: 0.25rem;       /* Abstand zum nachfolgenden Text */
  margin-right: 6px;           /* je größer der Wert, desto weiter rutscht der Button nach rechts */   
}
/* PressReader Marketingmaterialien */
.titel-negativ {
  color: #ffffff;
  font-size: 15px;             /* Schriftgröße */
  background-color: #22529E;   /* blau */
  padding: 0.3em 0.7em;        /* Luft um den Text */
  border-radius: 0.2em;        /* optional: abgerundete Ecken */
  display: inline-block;       /* passt sich dynamisch der Breite an */
  font-weight: bold;           /* bessere Lesbarkeit */
  margin-top: 0.5rem;          /* Abstand zum vorhergehenden Text */
  margin-bottom: 0.5rem;       /* Abstand zum nachfolgenden Text */
  margin-right: 6px;           /* je größer der Wert, desto weiter rutscht der Button nach rechts */   
}

/* 1. Google Font importieren */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');

/* 2. Bootstrap Icons importieren */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css');

:root {
  --btn-color:      #22529E;
  --btn-radius:     4px;
  --btn-padding:    0.25rem 0.75rem;
  --btn-font:       0.75rem "Source Sans Pro", Arial, sans-serif;
  --transition:     0.3s ease;
  --icon-spacing:   0.3rem;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: var(--btn-padding);
  font: var(--btn-font);
  color: var(--btn-color);
  background: transparent;
  border: 2px solid var(--btn-color);
  border-radius: var(--btn-radius);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  margin-right: 0.75rem;
}

.btn-secondary i {
  font-size: 1rem;
  margin-right: var(--icon-spacing);
}

.btn-secondary:hover {
  background: var(--btn-color);
  color: #fff;
}

<!-- CSS für den Button -->
<style>
.titelliste-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0071bc;      /* Hintergrundfarbe */
    color: #ffffff;                /* Schriftfarbe */
    text-decoration: none;         /* keine Unterstreichung */
    border-radius: 4px;            /* abgerundete Ecken */
    font-size: 16px;               /* Schriftgröße */
    font-weight: 500;              /* Schriftstärke */
    border: none;                  /* kein Rahmen */
    cursor: pointer;               /* Mauszeiger als Hand */
    transition: background-color .2s;
  }

  .titelliste-button:hover {
    background-color: #005a94;     /* dunkleres Blau beim Hover */
  }
</style>
iframe {border: none}