/* Tabelleninhalte ------------------------------------------------------------------------------------------- */

.inhalt {
	overflow-x: auto ;
}

#Buchvorschau {
	width: min(100%, 1200px) ;
	margin: 0 auto 4rem ;        /* Luft zum Seitenende */
	border-spacing: 0 ;
}

/* Titel über die volle Breite; der Bearbeiten-Stift liegt absolut am rechten Rand darüber */
#Buchtitel {
	position: relative ;
	font-size: clamp(1.8rem, 4vw, 4vh) ;
	font-weight: normal ;
	font-style: italic ;
	text-align: center ;
	padding: 1rem 5rem 1.5rem ;   /* links wie rechts Platz für den Stift, damit der Titel mittig bleibt */
}

/* Cover und Daten wie in der Filmvorschau: großes Cover mit weißem Rahmen, Daten in 2rem daneben */
#Buchcover {
	display: flex ;
	flex-direction: row ;
	align-items: flex-start ;
	max-width: 30rem ;
	padding: 0 1rem 1rem 2.5rem ;
	vertical-align: top ;
}

.buchcover {
	width: 25rem ;
	max-width: 100% ;
	height: auto ;
	aspect-ratio: 2 / 3 ;
	object-fit: cover ;
	border: none ;
	border-radius: 0.5rem ;
}

#TabelleBuchinfo {
	font-size: clamp(1.2rem, 2.4vw, 2rem) ;
	text-align: left ;
	padding-left: 1.5rem ;
	border-spacing: 1rem ;
	width: 100% ;
}

#TabelleBuchinfo th {
	display: flex ;
	font-weight: normal ;
	font-style: italic ;
	padding-right: 1rem ;
	white-space: nowrap ;
}

#TabelleBuchinfo td {
	vertical-align: top ;
}

#bearbeiten {
	position: absolute ;
	right: 1.25rem ;
	top: 50% ;
	transform: translateY(-50%) ;
	line-height: 0 ;
}

#suchbutton {
	width: 3.5rem ;
	height: auto ;
	transition: filter 0.15s ease ;
}

#bearbeiten:hover #suchbutton {
	filter: drop-shadow(0 0 6px #4d9fff) ;
}



#Buchreihe {
	text-align: center ;
	font-size: clamp(1.4rem, 2.5vw, 2.5rem) ;
	font-weight: normal ;
	font-style: italic ;
	padding: 3.5rem 1rem 0rem 1.5rem ;
}

#Buchreihecover {
	text-align: center ;
}

.buchreihe {
	width: min(20vw, 150px) ;
	height: auto ;
	margin: 1rem ;
    border-radius: 0.5rem ;
}

#TDGeschaut {
	font-size: clamp(1.2rem, 2vw, 2rem) ;
	padding-top: 2rem ;
	padding-bottom: 5rem ;
	text-align: center ;
}

#TabelleGeschaut {
	border-spacing: 0px ;
	width: 90% ;
	margin: 0 auto ;
	margin-top: 2.5rem ;
	margin-bottom: 5rem ;
}

.thGeschaut {
	text-align: center ;
	background-image: linear-gradient(#2379df 2%, #1b6bcd, #012a81, #001047, #00082b);
	border-bottom: solid 1px white ;
}

.tdGeschaut {
	background-color: var(--farbe-flaeche) ;
	text-align: center ;
}

/* Trennlinie zwischen zwei Lesedurchgängen (Buch wurde erneut gelesen) */
.durchgang-ende td {
	border-top: 3px solid #9999ff ;
}


/* Zurueck Button ------------------------------------------------------------------------------------------------------------------ */

/* Zurück: Link im Stil der Admin-Buttons */
.zurueck-zelle {
	text-align: right ;
	padding: 0.5rem 2rem 1rem ;
}

.zurueck {
	display: inline-block ;
	font-family: Text, Arial, Verdana ;
	letter-spacing: 0.15rem ;
	font-size: 1.3rem ;
	line-height: 1.2 ;
	padding: 0.45rem 1.6rem ;
	color: white ;
	text-decoration: none ;
	text-align: center ;
	background-image: linear-gradient(#2379df 2%, #1b6bcd, #012a81, #001047, #00082b);
	border: solid 1px #ffffff ;
	border-radius: 0.5rem ;
}

.zurueck:hover {
	filter: brightness(1.15) ;
	text-decoration: none ;
}

@media (max-width: 767px) {
    #Buchvorschau {
        width: 100% ;
    }

    #Buchtitel {
        padding: 1rem 0.75rem 1rem ;
        text-align: center ;
    }

    /* Handy wie in der Filmliste: kleines Cover links, Daten rechts daneben */
    #Buchcover {
        display: table-cell ;
        width: 36% ;
        max-width: none ;
        padding: 0 0.5rem 0.5rem 0.75rem ;
        vertical-align: top ;
    }

    .buchcover {
        width: 100% ;
        margin: 0 ;
    }

    #TabelleBuchinfo {
        font-size: 0.9rem ;
        padding-left: 0 ;
        border-spacing: 0.3rem 0.2rem ;
    }

    #TabelleBuchinfo th {
        display: table-cell ;
        padding-right: 0.4rem ;
        vertical-align: top ;
    }

    #TabelleBuchinfo td {
        padding: 0 ;
        overflow-wrap: anywhere ;
    }

    #Buchtitel {
        padding-left: 3rem ;
        padding-right: 3rem ;
    }

    #bearbeiten {
        right: 0.5rem ;
    }

    #suchbutton {
        width: 2.4rem ;
    }

    #Buchreihe {
        padding: 2rem 0.75rem 0 ;
    }

    .buchreihe {
        width: min(26vw, 110px) ;
        margin: 0.5rem ;
    }

    #TabelleGeschaut {
        width: 100% ;
    }

    .zurueck-zelle {
        text-align: right ;
        padding: 0.5rem 0.75rem 1rem ;
    }

    .zurueck {
        font-size: 0.95rem ;
        letter-spacing: 0.08rem ;
        padding: 0.3rem 1rem ;
    }
}