@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
/* WICHTIG: Die Zuweisung der Schriftart zur Klasse */
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
display: inline-block;
white-space: nowrap;
-webkit-font-feature-settings: 'liga';
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
/* Dieser Trick triggert das Laden des JavaScripts über ein unsichtbares Element */
head {
display: block;
}
head::after {
content: url('data:image/svg+xml;utf8,');
display: none;
}
/* Erzwingt, dass Breitenangaben inklusive Rahmen und Padding berechnet werden */
*, *::before, *::after {
box-sizing: border-box;
}
html {
/* Ersetze 80px durch die tatsächliche Höhe deines Headers 128px+15px*/
scroll-padding-top: 128px;
/* Sorgt gleichzeitig für ein angenehmes, flüssiges Scrollen */
scroll-behavior: smooth;
}
html {
scrollbar-gutter: stable;
}
.nlobenmitte { font-size: 15px; font-family: "Roboto", Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-weight: bold }
.nlobenrechts { font-size: 13px; font-family: "Roboto", Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-weight: normal }
.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: 600; font-optical-sizing: auto; font-variation-settings: "wdth" 75; font-size: 16px; margin-top: 5px; margin-bottom: 12px }
.kontakt { font-weight: normal; margin-top: 5px; font-size: 13px }
h3 { font-weight: bold; font-size: 14px; font-family: "Roboto", Arial, Helvetica, Geneva, Swiss, SunSans-Regular; margin-top: 0px; margin-bottom: 0px }
h4 { font-weight: 600; font-optical-sizing: auto; font-variation-settings: "wdth" 75; font-size: 22px; font-family: "Roboto", Arial, Helvetica, Geneva, Swiss, SunSans-Regular; margin-top: 20px; margin-bottom: 0px }
p { font-size: 13px; font-family: "Roboto", 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", Arial, Helvetica, Geneva, Swiss, SunSans-Regular; margin:0em 0em 3px 1em; padding:0; line-height:1.3 }
ol {font-size: 13px; font-family: "Roboto", Arial, Helvetica, Geneva, Swiss, SunSans-Regular; margin:0em 0em 3px 2em; padding:0; line-height:1.3 }
li {font-size: 13px; font-family: "Roboto", Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-color:black; margin:3px 0em 0em 0em; padding:0; line-height:1.3 }
p.inhalt,
p.verlag,
p.preis,
p.isbn,
p.bestnr {
color: #22529e;
}
body { background-color: #f7f5f3; } /* war #FAFAF5; #FAFAFA; f7f5f3; Raisin*/
body { font-size: 13px; font-family: "Roboto", Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }
.ueberschriftlisten { font-weight: bold; font-size: 13px }
body {
background: linear-gradient(to bottom, #f9f9f9 0%, #d3d3d3 50%, #4a4a4a 100%);
background-size: 100% 300%; /* Der Gradient wird dreimal so hoch wie das Fenster */
}
/* Fixierung des Headers */
.sticky-header {
position: -webkit-sticky; /* Für ältere Safari-Browser */
position: sticky;
top: 0px; /* Genau hier entsteht Ihr gewünschter 15px-Spalt für den Hintergrundverlauf! */
z-index: 1000;
width: 100%;
}
/* Das Schutzschild: Es fängt den scrollenden Text ab, lässt den Hintergrund aber durchscheinen
.sticky-header::before {
content: "";
position: absolute;
top: -15px; /* Wandert die 15 Pixel hoch bis zum echten oberen Bildschirmrand
left: 0;
width: 100%;
height: 15px; /* Schließt die Lücke exakt
background: transparent; /* Verdeckt den Hintergrundverlauf NICHT
z-index: 1001; /* Liegt über dem scrollenden Inhalt
}
*/
/* SUCHFELD AUF DER STARTSEITE
* Styling für die Trefferliste */
#katalog-ergebnisse {
list-style: none;
padding: 0;
margin: 10px 0;
border: 1px solid #ddd;
background-color: #fff;
}
#katalog-ergebnisse li {
padding: 12px;
border-bottom: 1px solid #eee;
line-height: 1.4;
}
/* Der Verlag hinter dem Titel */
.verlage-info {
color: #666;
font-size: 0.85em;
margin-left: 8px;
font-style: italic;
}
/* Das Neu-Badge */
.badge-neu {
background-color: #c40d42;
color: #ffffff;
font-size: 10px;
padding: 0.1em 0.3em;
border-radius: 0.3em;
margin-left: 10px;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
vertical-align: middle;
}
/* Highlighting der Suchbegriffe */
#katalog-ergebnisse .highlight {
background-color: #E8F086; !important;
font-weight: bold; !important;
color: #000; !important;
position: relative;
z-index: 2;
}
/* Keine-Treffer-Anzeige */
.no-results {
padding: 15px;
background-color: #f9f9f9;
border: 1px solid #eee;
color: #333;
font-style: italic;
}
.no-results a {
color: #e2001a;
text-decoration: underline;
font-weight: bold;
}
/* 1. Die Trefferzeile vorbereiten */
#katalog-ergebnisse li {
position: relative; /* Notwendig, damit der Link sich daran ausrichtet */
cursor: pointer; /* Zeigefinger für die gesamte Fläche */
transition: background-color 0.2s;
}
/* Optional: Optisches Feedback beim Drüberfahren */
#katalog-ergebnisse li:hover {
background-color: #f4f4f4; /* Etwas dunkleres Grau beim Hover */
}
/* 2. Den Link über die gesamte Fläche "spannen" */
#katalog-ergebnisse li a {
text-decoration: none;
color: #333; /* Ihre Linkfarbe war #0055aa;*/
}
#katalog-ergebnisse li a::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1; /* Legt sich über den gesamten Bereich des li */
}
/* 3. Wichtig: Die E-Mail-Adresse bei "Keine Treffer" schützen */
/* Damit der "Stretched Link" nicht den Mail-Link blockiert */
#katalog-ergebnisse li.no-results a::after {
display: none; /* Hier soll nur die Adresse klickbar sein */
}
/* Grundlegende Zurücksetzung */
html, body {
margin: 0 !important;
padding: 0 !important;
}
/* Der Anker-Paragraph oben erzeugt oft Margin-Collapsing */
body > p:first-of-type {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
display: none;
}
body {
/* Hier stellen Sie den gewünschten globalen Abstand ein */
padding-top: 15px !important;
padding-bottom: 40px !important;
}
/* Verhindert, dass die erste Tabelle zusätzlichen Abstand hat */
body > table:first-of-type {
margin-top: 0 !important;
}
/* Kontakt-Container auf Produktseite, der Text und Icon umschließt*/
.kontakt-link-block {
display: flex;
align-items: flex-start;
text-decoration: none !important; /* Verhindert Unterstreichung des gesamten Blocks */
margin-bottom: 20px;
cursor: pointer;
}
/* Die Textspalte */
.kontakt-text-spalte {
line-height: 1.3em;
margin-top: 20px;
font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 13px;
color: #000000; /* Standardtextfarbe für "Kontakt/Bestellung" */
}
/* Die E-Mail-Adresse - Spezifische Korrektur gegen lila (visited) */
.kontakt-link-block .email-text,
.kontakt-link-block:visited .email-text {
color: #183D75 !important;
text-decoration: none;
transition: color 0.2s ease;
}
/* HOVER-EFFEKT: Wie in digento_neu.css definiert */
.kontakt-link-block:hover .email-text {
color: #CDD711 !important; /* Wechselt auf das Gelb-Grün Ihrer Navigation bei Hover */
text-decoration: underline !important;
text-underline-offset: 4px;
}
/* Das Icon */
.kontakt-icon-img {
margin-left: 10px;
margin-top: 20px;
width: 28px;
height: auto;
border: 0;
transition: opacity 0.2s ease;
}
/* Icon-Reaktion beim Hover */
.kontakt-link-block:hover .kontakt-icon-img {
opacity: 0.7;
}
/* Download-Listen auf Produktseite */
.download-liste {
list-style: none;
padding: 0;
margin: 0;
}
.download-link {
display: flex;
align-items: flex-start;
text-decoration: none;
color: #22529E;
margin-bottom: 6px; /* Abstand zwischen den Einträgen innerhalb einer Gruppe */
padding: 2px 0;
}
.download-link:hover {
text-decoration: underline;
}
.download-icon {
flex-shrink: 0;
margin-left: -4px;
margin-right: 5px; /* Horizontaler Abstand Icon zu Text */
width: 24px;
height: 24px;
border: 0;
}
.download-text {
line-height: 1.2em; /* Gewünschter Zeilenabstand */
padding-top: 2px; /* Optische Feinjustierung zur Icon-Oberkante */
}
/* Platzhalter für die Abstände */
.download-gap {
height: 12px;
}
/* --- 1. ALLGEMEINER FLIESSTEXT --- */
/* Unbesuchte und besuchte Links im Text verhalten sich identisch */
a:link,
a:visited {
color: #183D75; /* war #0A3953; */
text-decoration: none;
transition: color 0.2s ease;
}
/* Hover-Zustand für ALLE Links (Standard) */
a:hover {
color: #CDD711;
text-decoration: underline;
text-underline-offset: 4px;
}
/* --- 2. NAVIGATION MITTE (Katalog, etc.) --- */
.nlobenmitte a:link,
.nlobenmitte a:visited {
color: #000000;
text-decoration: none;
font-weight: bold;
}
/* Markierung der aktuellen Seite */
.nlobenmitte a.current {
border-bottom: 3px solid #CDD711 !important;
padding-bottom: 2px;
color: #000000 !important; /* Verhindert Farbwechsel falls besucht */
}
/* --- 3. NAVIGATION RECHTS (Startseite, etc.) --- */
.nlobenrechts a:link,
.nlobenrechts a:visited {
color: #183D75; /* war #0A3953; */
text-decoration: none;
border-left: 4px solid transparent;
padding-left: 5px;
}
/* Markierung der aktuellen Seite */
.nlobenrechts a.current {
color: #000000 !important;
font-weight: bold;
border-left: 4px solid #CDD711 !important;
padding-left: 5px;
text-decoration: none !important;
}
/* --- 4. NAVIGATION LINKS (SIDEBAR auf #F1F6FF mit ![]()
-Icon) --- */
.nl-links a:link,
.nl-links a:visited {
color: #183D75; /* war #0A3953; */
text-decoration: none;
display: flex;
align-items: center;
padding: 6px 10px;
transition: background-color 0.3s ease;
border-radius: 4px;
}
/* Aktiver Zustand links */
.nl-links a.current {
background-color: #ffffff !important;
color: #000000 !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* --- 5. SPEZIFISCHE HOVER-KORREKTUREN --- */
.nlobenmitte a:hover,
.nlobenrechts a:hover,
.nl-links a:hover {
text-decoration: none;
color: #CDD711;
}
/* Optional: Das Icon im aktiven Link links leicht hervorheben */
.nl-links a.current img {
transform: scale(1.1);
}
/* NEWS-BEREICH Versteckt alle Blöcke mit Ablauf- oder Erstelldatum beim Laden */
[data-expiry], [data-created] {
display: none
}
/* Eine neue Klasse, die das Element wieder einblendet, ohne das Layout zu ändern */
.is-valid {
display: revert !important;
}
/* Tabelle E-Books A-Z*/
/* Grunddesign */
#verlagsTabelle {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* Optional: Erzwingt die Einhaltung der Breiten */
}
/* Definition der Spalten über die col-Klassen */
.col-verlag {
width: 45%;
}
.col-produkt {
width: 45%;
}
.col-ebs {
width: 10%;
}
/* Styling der Tabellenköpfe und Zellen */
#verlagsTabelle th,
#verlagsTabelle td {
font-size: 13px; font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; margin-top: 1px; margin-bottom: 2px; line-height:1.3;
padding: 0px;
border: 1px solid #ddd;
border-collapse: collapse !important;
overflow: hidden;
text-align: left;
}
!--#verlagsTabelle th {
background-color: #f2f2f2;
}
/* A-Z Navigation und Suche*/
/* Container für Suche + A-Z Navigation */
.sticky-header-container {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #ffffff;
z-index: 1000;
padding: 10px 0;
border-bottom: 1px solid #999999;
margin-bottom: 15px;
}
/* Die Liste selbst */
.az-list {
display: flex !important;
flex-wrap: wrap !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
gap: 4px !important;
}
.az-list li a {
display: flex !important;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background-color: #f4f4f4;
color: #22529E; /* war #003366; */
text-decoration: none;
font-weight: bold;
border: 1px solid #ccc;
font-size: 12px;
}
/* Styling für inaktive Buchstaben */
.az-list li span.inactive {
display: flex !important;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background-color: #eeeeee; /* Hellgrau */
color: #aaaaaa; /* Blasses Grau für die Schrift */
border: 1px solid #dddddd;
font-weight: normal;
cursor: default; /* Verhindert den Zeigefinger-Cursor */
font-size: 12px;
}
.az-list li a:hover {
background-color: #22529E; /* war #003366; */
color: white;
}
/* Erzeugt einen Puffer oben, damit die Zeile nicht unter der Sticky-Nav verschwindet */
tr[id] {
scroll-margin-top: 50px; /* Dieser Wert sollte etwas höher sein als die Höhe deiner Nav */
}
/* Styling für den gesamten Such-Container auf ebooksneuA-Z.html */
.search-area-digento {
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0;
width: 100%;
font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
}
/* Das EINGABEFELD (übernimmt exakt dein Styling) */
#verlagSearch {
flex-grow: 1; /* Nimmt die volle Breite ein */
padding: 10px 13px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px; /* Wie index_neu.html */
box-sizing: border-box;
font-family: inherit;
color: #333;
}
/* Visuelles Feedback beim Klicken */
#verlagSearch:focus {
border-color: #22529E;
outline: none;
box-shadow: 0 0 5px rgba(34, 82, 158, 0.5);
}
/* Der LÖSCHEN-BUTTON (angepasst an die Höhe des Inputfelds) */
.search-area-digento .button-style {
height: 42px; /* Entspricht der Gesamthöhe des Inputs mit Padding/Border */
padding: 0 20px;
background-color: #22529E; /* Das Blau von index_neu.html */
color: #ffffff;
border: none;
border-radius: 5px;
font-family: inherit;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
}
.search-area-digento .button-style:hover {
background-color: #003366;
}
/* Sanftes Scrollen für die gesamte Seite aktivieren */
html {
scroll-behavior: smooth;
}
/* Styling für die A-Z Trenner-Zeilen */
.letter-divider td {
background-color: #F0F0F0 !important;
color: #22529E !important;
font-size: 16px !important;
font-weight: bold !important;
padding: 8px 15px !important;
/* WICHTIG: Wir entfernen den echten border-left... */
border-left: none !important;
/* ...und ersetzen ihn durch einen inneren Schatten (Inset).
Dieser simuliert einen 7px Balken, der garantiert INNEN bleibt. */
box-shadow: inset 7px 0 0 0 #22529E !important;
/* Sicherheitshalber */
background-clip: padding-box !important;
}
/* Optional: Damit die ID-Anker beim Springen nicht direkt am oberen Rand kleben */
tr.letter-divider {
scroll-margin-top: 100px; /* Platzhalter für das fixierte Suchfeld/Navi */
}
/* Schwebender Nach-oben-Button */
#scroll-to-top {
position: fixed !important;
bottom: 40px;
left: calc(50% + 510px); /* Positionierung neben dem Rahmen */
z-index: 9999;
width: 35px; /* Hier die Breite ändern */
height: 35px; /* Hier die Höhe ändern */
background-color: rgba(255, 255, 255, 0.8); /* Dezenter weißer Hintergrund */
border-radius: 50%; /* Macht den Button rund */
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Leichter Schatten */
transition: transform 0.2s ease; /* Kleiner Effekt beim Drüberfahren */
/* Standardmäßig unsichtbar */
opacity: 0;
visibility: hidden;
transition: opacity 0.5s, visibility 0.5s, transform 0.2s;
}
/* Diese Klasse wird per JavaScript hinzugefügt, wenn gescrollt wird */
#scroll-to-top.show {
opacity: 1;
visibility: visible;
}
#scroll-to-top img {
width: 35px; /* Absolute Breite des Pfeils */
height: 35px; /* Absolute Höhe des Pfeils */
display: block;
}
#scroll-to-top:hover {
transform: scale(1.1); /* Wird beim Mouseover minimal größer */
background-color: #ffffff;
}
/* Mobil-Optimierung */
@media screen and (max-width: 1100px) {
#scroll-to-top {
left: auto;
right: 20px;
}
}
/* Styling für den Aufklapp-Button */
/* Grundzustand (Geschlossen) */
.digento-icon-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
margin: 0px auto 10px auto; /* Negativer Wert oben = Nah am Text */
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.3s ease; /* Sanfter Übergang beim Verschieben */
border: none;
}
/* Zustand (Geöffnet) */
.is-expanded .digento-icon-toggle {
margin-top: 20px; /* Abstand zur Liste schaffen */
}
.digento-icon-toggle img {
width: 32px;
height: 32px;
display: block;
}
.digento-icon-toggle:hover {
transform: scale(1.1);
background-color: #ffffff;
}
/* Sanftes Scrollen aktivieren */
html {
scroll-behavior: smooth;
}
/* Startseite */
.aktionsangebot-negativ {
color: #ffffff;
font-size: 11px; /* Schriftgröße */
background-color: #c40d42; /* kräftiges Rot #d32f2f; */
padding: 0.1em 0.3em; /* Luft um den Text */
border-radius: 0.3em; /* optional: abgerundete Ecken */
display: inline-block; /* passt sich dynamisch der Breite an */
font-weight: bold; /* bessere Lesbarkeit */
margin-left: 0px;
margin-right: 5px; /* je größer der Wert, desto weiter rutscht der Button nach rechts */
}
.aktionsangebot-negativ-digento {
color: #ffffff;
font-size: 11px; /* Schriftgröße */
background-color: #CDD711; /* gelb-grün*/
padding: 0.1em 0.3em; /* Luft um den Text */
border-radius: 0.3em; /* optional: abgerundete Ecken */
display: inline-block; /* passt sich dynamisch der Breite an */
font-weight: bold; /* bessere Lesbarkeit */
margin-left: 0px;
margin-right: 5px; /* je größer der Wert, desto weiter rutscht der Button nach rechts */
}
/* Produktseiten */
.aktionsangebot-titel-negativ {
color: #ffffff;
font-size: 12px; /* Schriftgröße */
background-color: #c40d42; /* kräftiges Rot #d32f2f;*/
padding: 0.3em 0.5em; /* Luft um den Text */
border-radius: 0.3em; /* 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, 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 -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: #DDE64B; /* Leuchtend gelb-grüner Hintergrund #fff3a3;*/
font-weight: bold; /* Fette Schrift */
color: #000; /* Schwarze Schrift (falls Linkfarbe anders war) */
}
/* * Behebt das Zeilenumbruch-Problem, indem der -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 und 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
}
/* Zusammengefasstes Styling für das Suchfeld */
#katalog-suche {
height: 42px; /* Gleiche Höhe wie der Button */
padding-right: 50px !important; /* Platz lassen, damit Text nicht unter das X läuft */
box-sizing: border-box; /* Wichtig für die korrekte Berechnung der Höhe */
}
/* Der quadratische Button */
#Ebene1 {
position: relative !important;
display: block;
width: 100%;
}
#katalog-suche-loeschen {
display: none; /* Steuerung erfolgt via JS */
/* Positionierung: Absolut oben rechts */
position: absolute !important;
top: 0 !important; /* Korrigiert den Versatz nach unten */
right: 0 !important; /* Korrigiert das Einrücken von rechts */
transform: none !important; /* Entfernt eventuelle Zentrierungs-Verschiebungen */
/* Größe & Form */
width: 42px !important;
height: 42px !important;
/* Zentrierung des Inhalts (X) */
display: flex;
align-items: center;
justify-content: center;
/* Styling */
background-color: #22529E;
color: #ffffff !important;
border-radius: 0 5px 5px 0;
font-size: 24px;
font-weight: bold;
line-height: 1;
cursor: pointer;
padding: 0;
margin: 0;
transition: background-color 0.2s ease;
}
/* Hover-Effekt */
#katalog-suche-loeschen:hover {
background-color: #003366;
}
/* --- 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 --- */
/* --- VERSUCH 3: Styling mit HÖHERER SPEZIFITÄT (nutzt Tabellen-Kontext) --- */
/* 1. Der Container (das