/* Allgemein ---------------------------------------------------------------------- */

a {
    text-decoration: none ;
	color: white ; /* Ändert die Farbe des ABC */
}

/* Kein overflow auf .inhalt: das würde position: sticky der Suchleiste aushebeln
   (die Tabelle bekommt am Handy ohnehin min-width: 0) */


/* Tabelle Anzahl Bücher & Anzeige ändern Button ---------------------------------------------- */
#AnzahlUndButton {
	display: flex;
	justify-content: center;
	align-items: center;
	position: static ;
	width: 100% ;
	margin-top: 0.25rem ;
	z-index: 2 ;
}

#AnzahlUndButton tr {
	display: flex ;
	justify-content: center ;
	align-items: center ;
	width: 100% ;
}

h3 {
	text-shadow: 3px 3px black ;
	max-width: none ;
	text-align: center;
	margin-right: 0 ;
	font-size: clamp(1rem, 2vw, 1.5rem) ;
}

#AnAen {
	border: solid 1px #ffffff ;
	border-radius: 0.5rem 0.5rem 0.5rem 0.5rem ;
	background-image: linear-gradient(#2379df 2%, #1b6bcd, #012a81, #001047, #00082b);
	width: min(35vw, 220px) ;
	height: auto ;
	padding: 0.3rem ;
	text-align: center ;
	color: white ;
	margin-left: 1rem ;
	
}

/* TabelleSuche ------------------------------------------------------------------------ */
/* Der ganze Kopfbereich (Anzahl/Button + Suche + Buchstabenleiste) bleibt beim Scrollen direkt unter
   dem fixen Header stehen; der undurchsichtige Hintergrund verdeckt die Tabellenzeilen darunter */
.listenKopf {
	position: sticky ;
	top: var(--header-hoehe, 9rem) ;
	z-index: 10 ;
	background-color: var(--farbe-hintergrund) ;
	/* Der Block beginnt exakt an der Unterkante des Headers (die 1rem Luft von .inhalt wird nach innen
	   verlegt) – so haftet er vom ersten Pixel an, ohne erst ein Stück mitzuscrollen */
	margin-top: -1rem ;
	padding: 1rem 0 0.5rem ;
}

#tableSuche {
	margin: 0.3rem auto 0 ;
	width: 100% ;
	text-align: center ;
}

#tabABC {
	font-size: clamp(0.9rem, 1.8vw, 1.2rem) ;
	letter-spacing: 0.2rem ;
	padding: 0.5rem;
	text-shadow: 3px 3px black ;
}

#tabABC a {
	color: white;
	text-decoration: none;
}


/* Suche -------------------------------------------------------------------------------------------------------  */
#suche {
	display: flex ;
	justify-content: center ;
	align-items: center ;
	margin-top: 0.5rem ;
	max-width: 100vw;
    padding: 0 1rem;
}

#suchfeld {
	text-align: center ;
	width: min(40rem, 100%) ;
	height: 2.2rem ;
	font-size: 1rem ;
	color: black ;
}

#suchbutton {
	width: 2rem ;
	height: auto ;
	margin-left: 0.2rem ;
	padding: 0 ;
	border: none ;
	border-radius: 0 ;
	background: none ;
	z-index: 1;
}

/* Auflistungstabelle --------------------------------------------------------------------- */

#BuecherAuflistung {
	width: min(92%, 1200px) ;
	font-size: clamp(1rem, 1.3vw, 1.3rem) ;   /* am PC größer als Standard, Handy setzt eigene Größe */
	table-layout: fixed;
	word-wrap: break-word;
	margin: 1rem auto 0 ;
	border-spacing: 0px ;
	border-top: 3px solid var(--farbe-hintergrund) ;
	border-bottom: 3px solid var(--farbe-hintergrund) ;
	min-width: 620px ;
}

.AuflistungTH {
	/* Tabellenkopf haftet direkt unter dem festen Kopfbereich (Höhe kommt aus js/listenKopf.js) */
	position: sticky ;
	top: calc(var(--header-hoehe, 9rem) + var(--kopf-hoehe, 0px)) ;
	z-index: 5 ;
	font-weight: bold ; /* Fettschreiben der ersten Zeile */
	background-image: linear-gradient(#2379df 2%, #1b6bcd, #012a81, #001047, #00082b);
	border-bottom: thin solid white ;
	padding: 0.4rem ;
	font-weight: normal ;
	font-style: italic ;
	
}

/* Sortierbare Kopfzellen (js/tabelleSortieren.js): Zeiger, Pfeil für die aktive Sortierrichtung */
.AuflistungTH.sortierbar {
	cursor: pointer ;
	user-select: none ;
}

.AuflistungTH.sortiert-auf::after,
.AuflistungTH.sortiert-ab::after {
	content: " \25B2" ;   /* ▲ */
	font-size: 0.7em ;
	font-style: normal ;
}

.AuflistungTH.sortiert-ab::after {
	content: " \25BC" ;   /* ▼ */
}

.AuflistungTD {
	border-bottom: 3px solid var(--farbe-hintergrund) ;   /* Trennlinie in Seitenfarbe – wirkt als Abstand zwischen den Zeilen */
	text-align: center ;
	padding: 0.45rem 0.5rem ;
}

#idSpalte {
	width: 8% ;
}
.buchSpalte {
	text-align: center ;   /* wie die übrigen Spalten */
}

#seitenSpalte {
	width: 10% ;
}

#autorSpalte {
	width: 24% ;
}

#verlagSpalte {
	width: 18% ;
}

#vorhandenSpalte {
	width: 18% ;
}

/* Statusmeldung und ×-Löschen (Wunschliste, nur Admin) – bewusst hier und nicht über hinzufuegen.css,
   dessen Tabellenregeln die Spaltenbreiten überschreiben würden */
.message {
	text-align: center ;
	margin: 0.5rem auto 1rem ;
	font-size: 1.3rem ;
	font-weight: bold ;
	color: #ccffcc ;
}

.loeschen-form {
	display: inline ;
	margin: 0 ;
}

.loeschen-x {
	width: 1.8rem ;
	height: 1.8rem ;
	padding: 0 ;
	line-height: 1 ;
	font-family: Verdana, Arial, sans-serif ;
	font-size: 1.3rem ;
	color: #bbb ;
	background: none ;
	border: 1px solid transparent ;
	border-radius: 50% ;
	cursor: pointer ;
}

.loeschen-x:hover,
.loeschen-x:focus {
	color: #fff ;
	background-color: #a00000 ;
	border-color: #fff ;
	outline: none ;
}

.wunschliste-tabelle .loeschen-spalte,
#BuecherAuflistung .loeschen-spalte {
	width: 2.5rem ;
	padding: 0 0.25rem ;
}

.kachel-loeschen {
	text-align: center ;
	margin-top: 0.3rem ;
}

/* Wunschliste: Spaltenbreiten (Titel bekommt den meisten Platz) */
.wunschliste-tabelle .spalte-titel {
	width: 34% ;
}

.wunschliste-tabelle .spalte-preis,
.wunschliste-tabelle .spalte-band {
	width: 8% ;
}

.wunschliste-tabelle .spalte-art {
	width: 11% ;
	white-space: nowrap ;   /* "Hardcover" nicht umbrechen */
}

.wunschliste-tabelle .spalte-erscheinungstermin {
	width: 11% ;
}

.farbe:nth-child(odd) {
	background-color: var(--farbe-flaeche) ;
} 

.farbe:nth-child(even) {
	background-color: var(--farbe-flaeche-alt) ;
} 

@media (max-width: 767px) {
    #AnzahlUndButton,
    #AnzahlUndButton tbody,
    #AnzahlUndButton tr,
    #AnzahlUndButton td {
        display: block ;
        width: 100% ;
    }

    #AnzahlUndButton td {
        text-align: center ;
    }

    #AnzahlUndButton td + td {
        margin-top: 0.5rem ;
    }

    #AnAen {
        width: 100% ;
        max-width: 320px ;
        margin: 0 auto ;
    }

    #tabABC {
        letter-spacing: 0.1rem ;
    }

    #suche {
        padding: 0 0.5rem ;
        width: 100% ;
        gap: 0.4rem ;
    }

    #suchfeld {
        width: 100% ;
        max-width: 100% ;
    }

    #suchbutton,
    #suche input[type="image"] {
        width: 2.2rem !important ;
        height: 2.2rem !important ;
        max-width: 2.2rem !important ;
        max-height: 2.2rem !important ;
        flex-shrink: 0 ;
        object-fit: contain ;
        padding: 0 ;
        display: block ;
    }

    #BuecherAuflistung {
        min-width: 0 !important ;
        width: calc(100% - 2rem) ;
        margin: 1rem auto 0 ;
        table-layout: auto ;
    }

    #BuecherAuflistung th,
    #BuecherAuflistung td {
        font-size: 0.85rem ;
        padding: 0.4rem 0.25rem ;
        word-break: break-word ;
    }

    #BuecherAuflistung .buchSpalte {
        text-align: center ;
    }

    #BuecherAuflistung .cover-upload-form {
        align-items: stretch ;
    }

    #BuecherAuflistung .cover-file-input,
    #BuecherAuflistung .cover-submit {
        width: 100% ;
        max-width: none ;
    }

    #BuecherAuflistung img {
        max-width: 64px ;
        height: auto ;
    }

    /* Wunschliste am Handy: nur Titel, Preis und ET */
    .wunschliste-tabelle th:not(.spalte-titel):not(.spalte-preis):not(.spalte-erscheinungstermin):not(.spalte-loeschen),
    .wunschliste-tabelle td:not(.spalte-titel):not(.spalte-preis):not(.spalte-erscheinungstermin):not(.spalte-loeschen) {
        display: none !important ;
    }

    .wunschliste-tabelle .spalte-titel {
        width: auto ;
    }

    .wunschliste-tabelle .spalte-preis,
    .wunschliste-tabelle .spalte-erscheinungstermin {
        width: 22% ;
    }
}