<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Author & Books</title>

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<style>
:root{
  --max-width:1100px;
  --accent:#4caf50;
  --muted:#555;
  --card-bg:#fff;
  --bg:#f0f8f5;
  --shadow-light: rgba(0,0,0,0.06);
  --shadow-medium: rgba(0,0,0,0.08);
}

*{box-sizing:border-box}

body{
  font-family: 'Inter', Arial, sans-serif;
  margin:0;
  color:#222;
  background:var(--bg);
  transition: background .5s ease;
}

header {
  background: var(--accent);
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 600;
}

main{
  max-width: var(--max-width);
  margin: 20px auto;
  padding: 0 15px;
}

/* Author Card */
.author-card{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
  background:linear-gradient(180deg,#fff,#eafaf1);
  border-radius:16px;
  box-shadow:0 8px 24px var(--shadow-light);
  margin:20px 0;
  transition: transform .4s ease, box-shadow .4s ease;
}

.author-card:hover{
  transform: translateY(-6px);
  box-shadow:0 12px 36px var(--shadow-medium);
}

.author-image-wrap{
  width:180px;
  height:180px;
  margin:0 auto 12px;
  overflow:hidden;
  border-radius:50%;
  border:6px solid #e0f1e9;
  transition: transform .3s ease, box-shadow .3s ease;
  perspective:1000px;
}

.author-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .4s ease;
}

.author-image-wrap:hover .author-image{
  transform: scale(1.05) rotateY(8deg) rotateX(3deg);
}

.author-name{
  margin:8px 0;
  font-size:2rem;
  color:var(--accent);
}

.author-bio{
  color:var(--muted);
  max-width:700px;
  margin:0 auto;
  line-height: 1.5;
}

.links-row{
  display:flex;
  gap:12px;
  justify-content:center;
  margin:18px 0;
  flex-wrap:wrap;
}

.link-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:#f7f9f7;
  text-decoration:none;
  color:#333;
  font-size:18px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.link-mini:hover{
  transform: translateY(-4px) scale(1.1);
  box-shadow:0 10px 22px var(--shadow-medium);
}

/* Carousel */
.carousel-wrap{
  width:100%;
  max-width:760px;
  margin:18px auto;
  overflow:visible;
  position:relative;
}

.carousel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  position:relative;
  height:260px;
}

.carousel-item{
  width:180px;
  transition: transform .5s ease, opacity .4s ease, box-shadow .4s ease;
  text-align:center;
  position:relative;
  border-radius:12px;
  cursor:pointer;
}

.carousel-item img{
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 8px 24px var(--shadow-light);
  transition: transform .4s ease, box-shadow .4s ease;
}

.carousel-item.center{
  transform: scale(1.15);
  z-index:3;
  opacity:1;
  box-shadow:0 14px 40px var(--shadow-medium);
}

.carousel-item.left{
  transform: translateX(-40px) scale(0.9);
  z-index:2;
  opacity:0.9;
}

.carousel-item.right{
  transform: translateX(40px) scale(0.9);
  z-index:2;
  opacity:0.9;
}

.carousel-item.hidden{
  transform: scale(0.85);
  opacity:0;
  z-index:1;
  pointer-events:none;
}

/* Books grid */
.books-grid-section{
  min-height:70vh;
  padding:24px;
  margin:20px 0;
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 24px var(--shadow-light);
  transition: transform .3s ease;
}

.books-grid-section:hover{
  transform: translateY(-4px);
}

.books-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:12px;
  justify-content:center;
}

.books-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:18px;
  padding:10px 0;
}

.book-card{
  background:var(--card-bg);
  border-radius:12px;
  padding:10px;
  text-align:center;
  box-shadow:0 6px 18px var(--shadow-light);
  transition: transform .25s ease, box-shadow .25s ease;
}

.book-card:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow:0 14px 36px var(--shadow-medium);
}

.book-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:8px;
  transition: transform .3s ease;
}

.book-card:hover img{
  transform: scale(1.05);
}

.book-title{
  font-size:1rem;
  margin:8px 0 6px;
  color:var(--accent);
}

.book-desc{
  font-size:0.85rem;
  color:var(--muted);
  margin:0;
}

/* Responsive */
@media (max-width:900px){
  .carousel{height:220px} 
  .carousel-item{width:140px} 
  .carousel-item.center{transform:scale(1.12)}
}
@media (max-width:700px){
  .author-image-wrap{width:140px;height:140px} 
  .carousel{height:200px} 
  .carousel-item{width:120px} 
  .book-card img{height:180px}
}

/* Leaf Animation */
#leaf-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.leaf {
  position: absolute;
  width: 24px;
  height: 24px;
  background: url('https://i.ibb.co/tmhfQ8K/leaf.png') no-repeat center/contain;
  opacity: 0.8;
  pointer-events: none;
  transform: translateY(0) rotate(0deg);
  animation: fall linear forwards;
}

@keyframes fall {
  0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* Footer */
footer {
  text-align: center;
  padding: 15px;
  background: #eee;
  font-size: 14px;
  border-top: 1px solid #ddd;
}
</style>
</head>
<body>

<header>📚 Meine Bücherwelt</header>

<main>

<div class="author-card">
  <div class="author-image-wrap">
    <img src="https://i.ibb.co/9N02gXp/avatar.jpg" alt="Author" class="author-image">
  </div>
  <div class="author-name">Ava Cobblewink</div>
  <div class="author-bio">Ich schreibe leidenschaftlich Bücher über Abenteuer, Fantasie und Kreativität. Hier zeige ich meine Werke!</div>
  <div class="links-row">
    <a href="#" class="link-mini">🌐</a>
    <a href="#" class="link-mini">📘</a>
    <a href="#" class="link-mini">🐦</a>
  </div>
</div>

<div class="books-grid-section">
  <div class="books-header"><h2>Meine Bücher</h2></div>
  <div class="books-grid">
    <div class="book-card"><img src="https://i.ibb.co/0sLQ6Vq/book1.jpg" alt="Book"><div class="book-title">Buch 1</div><div class="book-desc">Ein spannendes Abenteuer.</div></div>
    <div class="book-card"><img src="https://i.ibb.co/0sLQ6Vq/book1.jpg" alt="Book"><div class="book-title">Buch 2</div><div class="book-desc">Fantastische Geschichten.</div></div>
    <div class="book-card"><img src="https://i.ibb.co/0sLQ6Vq/book1.jpg" alt="Book"><div class="book-title">Buch 3</div><div class="book-desc">Magische Welten.</div></div>
  </div>
</div>

</main>

<footer>© 2025 Ava Cobblewink | Alle Rechte vorbehalten</footer>

<!-- Leaf Container -->
<div id="leaf-container"></div>

<script>
const leafContainer = document.getElementById('leaf-container');

function createLeaf() {
  const leaf = document.createElement('div');
  leaf.classList.add('leaf');
  
  leaf.style.left = Math.random() * window.innerWidth + 'px';
  const scale = Math.random() * 0.8 + 0.5;
  leaf.style.width = 24 * scale + 'px';
  leaf.style.height = 24 * scale + 'px';
  leaf.style.animationDuration = (3 + Math.random() * 3) + 's';
  leaf.style.filter = `hue-rotate(${Math.floor(Math.random() * 60 - 30)}deg)`;
  
  leafContainer.appendChild(leaf);
  leaf.addEventListener('animationend', () => leaf.remove());
}

// 1-3 Blätter pro Intervall für dichteres Laub
setInterval(() => { for(let i=0;i<Math.random()*2+1;i++) createLeaf(); }, 300);
</script>

</body>
</html>
