/* 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 */   
}

/* Styling für den gesamten Such-Container */
.such-input-wrapper {
    max-width: auto; /* Maximale Breite des Suchbereichs 600px;*/
    margin: 0px auto;  /* Zentriert den Bereich */
    font-family: font-family: Roboto, Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; /* Saubere Schriftart */
}

/* Styling für das EINGABEFELD */
#katalog-suche {
    width: 100%; !important;      /* Nimmt die volle Breite des Wrappers ein */
    padding: 10px 13px;           /* Innenabstand (macht es höher) 12px 15px */
    font-size: 16px;              /* Größere Schrift */
    border: 2px solid #ccc;       /* Dezenter grauer Rand */
    border-radius: 5px;           /* Abgerundete Ecken */
    box-sizing: border-box;       /* Sorgt dafür, dass padding die Breite nicht sprengt */
}

/* Visuelles Feedback, wenn man in das Suchfeld klickt */
#katalog-suche:focus {
    border-color: #22529E;        /* Blauer Rand beim Fokussieren #007bff;*/
    outline: none;                /* Standard-Fokus-Rahmen entfernen */
    box-shadow: 0 0 5px rgba(0,123,255,0.5); /* Leichter Schatten */
}

/* Styling für den ERGEBNIS-CONTAINER */
#katalog-ergebnisse {
    border: 1px solid #ddd;       /* Leichter Rahmen um die Ergebnisse */
    border-top: none;             /* Oberen Rand entfernen (schließt an Suche an) */
    margin-top: 0;
    max-height: 300px;            /* WICHTIG: Maximale Höhe */
    overflow-y: auto;             /* WICHTIG: Scrollbalken, wenn Ergebnisse zu lang sind */
}

/* * ================================================================
 * Styling für die EINZELNEN TREFFER
 * WICHTIG: Dieser Selektor muss zu Ihrem PRODUKT_SELEKTOR 
 * aus dem JavaScript passen!
 *
 * Wenn Ihr Selektor 'li' war, nutzen Sie: #katalog-ergebnisse li
 * Wenn er '.produkt-zeile' war, nutzen Sie: #katalog-ergebnisse .produkt-zeile
 * ================================================================
 */

/* Annahme: Ihre Treffer sind <li>-Elemente */
#katalog-ergebnisse li {
    list-style-type: none;        /* Aufzählungszeichen entfernen */
    padding: 10px 10px;           /* Innenabstand für jeden Treffer 10px 15px; */
    border-bottom: 1px solid #eee;/* Trennlinie zwischen Treffern */
    margin: 0;                    /* Standard-Margin von Listen entfernen */
}

/* Machen Sie die Treffer klickbar (falls sie Links enthalten) */
#katalog-ergebnisse li a {
    text-decoration: none;        /* Unterstreichung bei Links entfernen */
    color: #333;                  /* Dunkle Schriftfarbe */
}

/* Visuelles Feedback, wenn man über einen Treffer fährt */
#katalog-ergebnisse li:hover {
    background-color: #f4f4f4;    /* Heller Hintergrund beim Hovern */
    cursor: pointer;              /* Mauszeiger zur Hand ändern */
}

/* Styling für "Keine Treffer gefunden" */
#katalog-ergebnisse p {
    padding: 15px;
    color: #777;
    font-style: italic;
}

/* Styling für den hervorgehobenen Suchbegriff */
.highlight {
    background-color: #CDD711; /* Leuchtend gelber Hintergrund #fff3a3;*/
    font-weight: bold;         /* Fette Schrift */
    color: #000;               /* Schwarze Schrift (falls Linkfarbe anders war) */
}

/* * Behebt das Zeilenumbruch-Problem, indem der <p>-Container
 * zu einer Flexbox wird, die ihre Kinder nebeneinander anordnet.
 */
#katalog-ergebnisse li p {
    display: flex;         /* NEU: Aktiviert Flexbox */
    flex-wrap: nowrap;     /* NEU: Verhindert Umbruch (falls Text zu lang) */
    align-items: baseline; /* NEU: Richtet die Schriftgrundlinien von <a> und <font> aus */
 
 /* NEU: Fügt einen Abstand von 0.5em (ca. 8px) ZWISCHEN den Elementen (a und font) hinzu */
    gap: 0.5em;   
    margin: 0;             /* (Alt) Entfernt Standard-Abstände */
    padding: 0;            /* (Alt) Entfernt Standard-Abstände */
}

/* * (Optional, aber empfohlen)
 * Wir brauchen 'display: block' am Link nun nicht mehr,
 * da er jetzt ein Flex-Item ist.
 */
#katalog-ergebnisse li a {
    /* display: block; */ /* <-- Diese Zeile können Sie jetzt LÖSCHEN */
    /* ... restliche 'a'-Regeln wie 'text-decoration' bleiben... */
}
/* Container für das Suchfeld */
.such-input-wrapper {
    position: relative; !important; /* Wichtig für die Positionierung des "X" */
    margin-top: 5px; !important; /* Legt den Abstand zur Überschrift "Suche Titel A-Z" fest
}

/* Anpassung des Suchfelds, damit Text nicht UNTER das "X" läuft */
#katalog-suche {
    /* Fügt rechts Platz für das "X" hinzu (Wert ggf. anpassen) */
    padding-right: 30px; 
    width: 100%;
    box-sizing: border-box;
}

/* Das "X"-Symbol (Löschen-Button) */
#katalog-suche-loeschen {
    display: none; /* Standardmäßig unsichtbar */
    position: absolute;
    right: 10px;  /* 10px vom RECHTEN Rand (des Wrappers) */
    top: 50%;     /* Vertikal zentrieren */
    transform: translateY(-50%);
    font-size: 24px; /* Größe des "X" (&times;) */
    color: #888;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
}

#katalog-suche-loeschen:hover {
    color: #000;
}

/* --- START: STYLING FÜR DAS JAVASCRIPT-SUCHMODUL --- */

/* 1. Der Container für das Suchfeld */
/* Er MUSS 'position: relative' haben, damit das "X" funktioniert */
.such-input-wrapper {
    position: relative !important;  /* Wir erzwingen dies jetzt */
    margin-top: 5px !important;    /* Wir erzwingen auch den Abstand */
}

/* 2. Das Suchfeld selbst */
/* Es MUSS 'padding-right' haben, damit der Text nicht unter das "X" läuft */
#katalog-suche {
    padding-right: 35px !important; /* Etwas mehr Platz */
    width: 100%;
    box-sizing: border-box;
}

/* 3. Das "X"-Symbol zum Löschen */
/* Es MUSS 'position: absolute' haben */
#katalog-suche-loeschen {
    display: none; /* JS ändert dies bei Bedarf zu 'block' */
    
    /* Positionierung relativ zum Wrapper */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    
    /* Aussehen (damit es nicht "klein" ist) */
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: #888;
    cursor: pointer;
}

#katalog-suche-loeschen:hover {
    color: #000;
}

/* --- ENDE: STYLING FÜR DAS JAVASCRIPT-SUCHMODUL --- */

/* 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}