/* ========= Basis ========= */
:root{
  --container: 1100px;
  --radius: 12px;
  --bg-card: #f7f7f9;
  --bd-card: #e7e7ee;
  --text: #222;
  --muted: #666;
  --brand: #0b6bff;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  line-height:1.6;
  background:#fff;
}
h1,h2,h3{margin:0 0 .6rem}
.muted{color:var(--muted)}
.visually-hidden{position:absolute;left:-9999px}

/* ========= Layout ========= */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 2rem 2.5rem;
}
.section{padding-top:.5rem}

/* ========= Buttons ========= */
.btn{
  display:inline-block;
  padding:.65rem 1rem;
  border:1px solid var(--bd-card);
  border-radius:8px;
  color:#111;
  background:#fff;
  text-decoration:none;
}
.btn-primary{
  background: var(--brand);
  color:#fff;
  border-color: var(--brand);
}
.btn + .btn{margin-left:.5rem}

/* ========= Hero ========= */
.hero{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  align-items:center;
}
.hero img{
  width:240px;
  max-width:100%;
  border-radius:10px;
  border:1px solid #ddd;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* ========= Karten / Dropdown ========= */
.card{
  background: var(--bg-card);
  border:1px solid var(--bd-card);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

/* <details> Styling */
.card > summary{
  list-style:none;
  cursor:pointer;
  font-weight:600;
  padding:1rem 1.1rem;
  position:relative;
}
.card > summary::-webkit-details-marker{display:none}
.card > summary::after{
  content:"▸";
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  color:#555;
  transition: transform .15s ease;
}
.card[open] > summary::after{transform:translateY(-50%) rotate(90deg)}

.card-body{
  padding: .6rem 1.1rem 1.2rem;
  border-top:1px solid var(--bd-card);
}

/* Grids */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:14px;
}

/* ========= Bücher ========= */
.books{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:8px;
}
.book-card{
  text-align:center;
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  padding:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.book-card img{
  width:160px; /* dezenter */
  height:auto;
  border-radius:6px;
  border:1px solid #ddd;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  margin:4px auto 10px;
}
.book-card h4{margin:.25rem 0 .35rem}

/* ========= ZOE-Info ========= */
.zoe-info{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
}
.zoe-cover{
  width:140px;         /* klein und ruhig */
  height:auto;
  border-radius:8px;
  border:1px solid #ccc;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}

/* ========= Formular ========= */
.signup-form{
  margin:1.2rem 0 0;
  padding:1.2rem;
  border:1px solid var(--bd-card);
  border-radius: var(--radius);
  background:#fafafa;
}
.checkbox{display:block;margin:.5rem 0}
.checkbox input{margin-right:.5rem}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.signup-form label{font-weight:600}
.signup-form input[type="text"],
.signup-form input[type="email"]{
  width:100%;
  padding:.6rem .7rem;
  border:1px solid #ccc;
  border-radius:8px;
  margin-top:.25rem;
}
.actions{margin-top:.6rem}

/* ========= Über mich ========= */
.about{
  display:grid;
  grid-template-columns:260px 1fr; /* Bild links, Text rechts */
  gap:24px;
  align-items:start;
  margin-top:6px;
}
.about-photo{
  width:260px;
  max-width:100%;
  border-radius:12px;
  border:1px solid #ddd;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* ========= Footer ========= */
.footer{
  margin-top:2.4rem;
  text-align:center;
  color:#555;
  font-size:.95rem;
}

/* ========= Responsiv ========= */
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr 1fr}
  .books{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .grid-3, .books{grid-template-columns:1fr}
  .zoe-info{grid-template-columns:1fr}
  .zoe-cover{width:160px}
  .about{grid-template-columns:1fr}
  .about-photo{width:260px}
  .form-row{grid-template-columns:1fr}
}