:root{
--cream:#FAF6F0;
--warm-white:#FEF9F4;
--coral:#E8563A;
--coral-dark:#C0392B;
--coral-light:#FDEAEA;
--sage:#4A7C6F;
--sage-light:#C8DDD9;
--sage-muted:#E8F2F0;
--sky:#5B8FA8;
--sky-light:#D6E8F0;
--text-dark:#2C2420;
--text-mid:#5A4A44;
--text-light:#8A7A74;
--border:#E8DDD8;
--shadow:0 8px 32px rgba(44,36,32,0.08);
--radius:22px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Lato',sans-serif;
background:var(--cream);
color:var(--text-mid);
font-size:18px;
line-height:1.75;
-webkit-font-smoothing:antialiased;
}

img{
max-width:100%;
display:block;
}

a{
color:inherit;
text-decoration:none;
}

.container{
width:min(1180px,92%);
margin:auto;
}

section{
padding:110px 0;
}

.fade{
opacity:0;
transform:translateY(30px);
transition:all .8s ease;
}

.fade.visible{
opacity:1;
transform:none;
}

header{
position:sticky;
top:0;
z-index:999;
background:rgba(254,249,244,.92);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
}

.navbar{
height:84px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}

.logo{
display:flex;
align-items:center;
gap:12px;
font-family:'Playfair Display',serif;
font-size:1.3rem;
font-weight:700;
color:var(--text-dark);
white-space:nowrap;
}

.logo-dot{
width:14px;
height:14px;
background:var(--coral);
border-radius:50%;
flex-shrink:0;
}

.nav-links{
display:flex;
align-items:center;
gap:24px;
font-size:1rem;
}

.nav-links a{
position:relative;
padding:8px 0;
transition:.2s;
}

.nav-links a:hover{
color:var(--coral);
}

.nav-links a::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0;
height:2px;
background:var(--coral);
transition:.3s;
}

.nav-links a:hover::after{
width:100%;
}

.menu-toggle{
display:none;
background:none;
border:none;
font-size:1.8rem;
cursor:pointer;
color:var(--text-dark);
}

.hero{
padding-top:70px;
}

.hero-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;
}

.hero h1{
font-family:'Playfair Display',serif;
font-size:clamp(3rem,7vw,5.3rem);
line-height:1.08;
margin-bottom:24px;
letter-spacing:-1px;
}

.hero .line1{
color:var(--coral);
display:block;
}

.hero .line2{
color:var(--sage);
display:block;
}

.hero p{
font-size:1.22rem;
max-width:620px;
color:var(--text-mid);
margin-bottom:38px;
}

.hero-actions{
display:flex;
flex-wrap:wrap;
gap:16px;
}

h1{
font-family:'Playfair Display',serif;
font-size:clamp(2.8rem,6vw,4.8rem);
line-height:1.1;
margin-bottom:24px;
color:var(--text-dark);
}

.book-cover{
text-align:center;
}

.book-cover img{
width:100%;
max-width:460px;
border-radius:28px;
box-shadow:0 20px 60px rgba(44,36,32,.16);
}

.badge{
display:inline-block;
padding:8px 14px;
border-radius:999px;
background:#FDEAEA;
color:var(--coral);
font-weight:700;
margin-bottom:22px;
}

.lead{
font-size:1.2rem;
margin-bottom:28px;
color:var(--text-light);
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 28px;
border-radius:999px;
font-weight:700;
transition:.25s ease;
border:none;
cursor:pointer;
font-size:1rem;
}

.btn-primary{
background:var(--coral);
color:white;
box-shadow:0 10px 28px rgba(232,86,58,.22);
}

.btn-primary:hover{
background:var(--coral-dark);
transform:translateY(-2px);
}

.btn-secondary{
background:var(--warm-white);
border:1px solid var(--border);
color:var(--text-dark);
}

.btn-secondary:hover{
transform:translateY(-2px);
box-shadow:var(--shadow);
}

.back-btn{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:30px;
padding:16px 24px;
border-radius:999px;
background:var(--coral);
color:white;
text-decoration:none;
font-weight:700;
transition:.25s;
}

.back-btn:hover{
background:var(--coral-dark);
transform:translateY(-2px);
}

.hero-books{
position:relative;
display:flex;
justify-content:center;
align-items:center;
min-height:500px;
}

.mockup{
position:absolute;
width:220px;
border-radius:24px;
padding:24px;
color:white;
box-shadow:0 18px 50px rgba(44,36,32,.18);
transition:.3s ease;
}

.mockup:hover{
transform:translateY(-6px);
}

.mockup small{
display:block;
font-size:.9rem;
opacity:.9;
margin-bottom:12px;
}

.mockup h3{
font-family:'Playfair Display',serif;
font-size:1.6rem;
line-height:1.2;
margin-bottom:14px;
color:white;
}

.mockup p{
font-size:1rem;
line-height:1.5;
color:rgba(255,255,255,.92);
}

.book1{
background:linear-gradient(135deg,#5B8FA8,#3A6B85);
transform:rotate(-7deg);
left:10%;
top:10%;
}

.book2{
background:linear-gradient(135deg,#4A7C6F,#2E5A52);
z-index:2;
}

.book3{
background:linear-gradient(135deg,#6C63CC,#4A3DAA);
transform:rotate(8deg);
right:8%;
bottom:8%;
}

.trust-strip{
margin-top:70px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;
}

.trust-item{
background:var(--warm-white);
padding:18px;
border-radius:18px;
border:1px solid var(--border);
display:flex;
align-items:center;
gap:12px;
box-shadow:var(--shadow);
}

.series-menu-wrap{
padding-top:0;
}

#baende{
scroll-margin-top:120px;
}

.series-menu{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
margin-top:20px;
}

.series-item{
height:100%;
display:flex;
flex-direction:column;
justify-content:flex-start;
min-width:260px;
background:var(--warm-white);
border:1px solid var(--border);
border-radius:24px;
padding:24px;
transition:.3s;
box-shadow:var(--shadow);
}

.series-item:hover{
transform:translateY(-4px);
}

.series-item h3{
font-size:1.3rem;
margin-bottom:10px;
}

.series-item p{
font-size:1rem;
color:var(--text-light);
}

.info{
background:var(--warm-white);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}

.section-title{
font-size:clamp(2.2rem,4vw,3.4rem);
margin-bottom:18px;
line-height:1.2;
}

.section-intro{
max-width:760px;
font-size:1.15rem;
color:var(--text-light);
margin-bottom:56px;
}

.info-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:28px;
}

.info-cardbook{
background:var(--warm-white);
padding:28px;
border-radius:24px;
box-shadow:var(--shadow);
border:1px solid var(--border);
margin-top:24px;
}

.info-cardbook h3{
font-family:'Playfair Display',serif;
margin-bottom:14px;
color:var(--text-dark);
}

.info-card{
background:var(--cream);
padding:30px;
border-radius:24px;
border:1px solid var(--border);
box-shadow:var(--shadow);
}

.info-card h3{
margin-bottom:12px;
font-size:1.4rem;
}

.info-card code{
display:block;
margin-top:18px;
background:white;
padding:16px;
border-radius:14px;
overflow:auto;
font-size:1rem;
color:var(--text-dark);
font-family:monospace;
border:1px solid rgba(44,36,32,0.04);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.03);
}

.qr-box{
margin-top:50px;
background:var(--coral-light);
border:1px solid rgba(232,86,58,.15);
padding:32px;
border-radius:24px;
}

.qr-box code{
display:block;
margin-top:18px;
background:white;
padding:16px;
border-radius:14px;
overflow:auto;
font-size:1rem;
color:var(--text-dark);
}

footer{
background:#221d1a;
color:#d8cbc4;
padding:70px 0 30px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
margin-bottom:40px;
}

.footer-grid h4{
font-family:'Playfair Display',serif;
margin-bottom:18px;
font-size:1.2rem;
color:white;
}

.footer-grid p,
.footer-grid a{
color:#d8cbc4;
font-size:1rem;
line-height:1.8;
}

.footer-bottom{
padding-top:28px;
border-top:1px solid rgba(255,255,255,.08);
display:flex;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
font-size:.95rem;
}

.impressum{
margin-top:20px;
padding:18px;
border-radius:18px;
background:rgba(255,255,255,.05);
}

@media(max-width:920px){

.hero-grid{
grid-template-columns:1fr;
}

.hero-books{
min-height:430px;
}

.footer-grid{
grid-template-columns:1fr;
}

}

@media(max-width:760px){

.nav-links{
position:absolute;
top:84px;
left:0;
right:0;
background:var(--warm-white);
flex-direction:column;
padding:24px;
display:none;
border-bottom:1px solid var(--border);
}

.nav-links.active{
display:flex;
}

.menu-toggle{
display:block;
}

.hero{
padding-top:40px;
}

.mockup{
width:180px;
}

.book1{
left:0;
}

.book3{
right:0;
}

Die einfachste und sauberste Lösung ist:

einen kleinen Wrapper für die Buchlinks
darin display:flex
mit flex-wrap

Dann laufen die Links automatisch nebeneinander und umbrechen sauber auf Mobile.

1. HTML ändern

ERSETZE:

<div>
<h4>Bücher</h4>

<p><a href="buecher/band1.html">Band 1</a></p>
<p><a href="buecher/band2.html">Band 2</a></p>
<p><a href="buecher/band3.html">Band 3</a></p>
<p><a href="buecher/band4.html">Band 4</a></p>
<p><a href="buecher/band5.html">Band 5</a></p>
<p><a href="buecher/band6.html">Band 6</a></p>
<p><a href="buecher/band7.html">Band 7</a></p>
</div>
DURCH:
<div>

<h4>Bücher</h4>

<div class="footer-books">

<a href="buecher/band1.html">Band 1</a>
<a href="buecher/band2.html">Band 2</a>
<a href="buecher/band3.html">Band 3</a>
<a href="buecher/band4.html">Band 4</a>
<a href="buecher/band5.html">Band 5</a>
<a href="buecher/band6.html">Band 6</a>
<a href="buecher/band7.html">Band 7</a>

</div>

</div>
2. CSS ergänzen

In deine style.css:

.footer-books{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:16px;
}

.footer-books a{
display:inline-flex;
padding:8px 14px;
border-radius:999px;

background:rgba(255,255,255,.06);

text-decoration:none;
color:#d8cbc4;

transition:.25s;
}

.footer-books a:hover{
background:rgba(255,255,255,.12);
transform:translateY(-2px);
}

body{
font-size:17px;
}

}