/* ===================================================================
   Spinnenbuch – Buchklub styles.css
   Amatic-Theme wie Hauptseite + kompakte Topbar + Avatar-Fix
   =================================================================== */

:root{
  --ink:#1f2330; --muted:#525b6b;
  --glass: rgba(255,255,255,.65); --card: rgba(255,255,255,.88);
  --accent:#8d62ff; --accent2:#ffcf6a;
  --radius:22px; --radius-sm:16px;
  --shadow: 0 18px 40px rgba(20,20,40,.20), 0 3px 12px rgba(20,20,40,.12);
  --max: 960px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:18px; line-height:1.6; color:var(--ink);
  overflow-x:hidden; scroll-behavior:smooth;
}

/* Hintergrund wie Hauptseite */
.page-bg{position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 700px at 50% -220px, rgba(255,245,225,.90), rgba(255,245,225,0) 70%),
    linear-gradient(to bottom, rgba(255,231,183,.65) 0 280px, rgba(255,231,183,.28) 280px 60%, rgba(255,231,183,.16) 60% 100%),
    url('/hintergrund.png') center/cover no-repeat fixed;
  mix-blend-mode: soft-light;
}

.wrap{max-width:var(--max); margin:0 auto; padding:clamp(16px,5vw,28px)}
section{margin:clamp(22px,5vw,56px) 0}

/* Typo an Hauptseite anlehnen */
h1,h2,h3,.brand,.hero-title,.btn.amatic{ font-family:"Amatic SC",cursive; font-weight:700; letter-spacing:.6px }
h1{ font-size:clamp(40px,7.8vw,72px); line-height:1.06; margin:0 0 .2rem; text-shadow:0 2px 0 rgba(255,255,255,.5) }
h2{ font-size:clamp(30px,5.2vw,44px); line-height:1.1; margin:.1rem 0 .5rem }
h3{ font-size:clamp(26px,4.2vw,34px); line-height:1.1; margin:.1rem 0 .5rem }
p{ margin:.35rem 0 }

/* Karten im „Glass“-Stil */
.card{ background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(18px,3vw,28px) }
.card.alt{ background:linear-gradient(108deg,#fff7ee 70%,#f7f6ff 100%); border:1.2px solid #ede8f4; box-shadow:0 4px 16px rgba(110,80,160,.09) }

/* ================= Topbar kompakt & einzeilig ================= */
.topbar{ position:sticky; top:0; z-index:10; backdrop-filter: blur(10px) saturate(120%); background:var(--glass); border-bottom:1px solid rgba(255,255,255,.55) }
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:nowrap; padding-top:10px; padding-bottom:10px;
}
.brand{
  display:flex; align-items:center; gap:8px;
  font-size:clamp(22px, 3.2vw, 32px); line-height:1; padding:0; margin:0; color:#4b2aa5;
}
.brand img,.brand svg{ width:28px; height:28px; flex:0 0 auto; filter:drop-shadow(0 1px 0 rgba(255,255,255,.4)) }
.nav{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap }

/* Buttons im Pill-Stil der Hauptseite */
.btn{ display:inline-flex; align-items:center; gap:.45em; padding:.55rem 1rem; border-radius:999px; border:1px solid rgba(120,80,200,.25); font-weight:700; text-decoration:none; cursor:pointer; transition:transform .12s ease, filter .15s ease }
.btn.primary{ background:linear-gradient(180deg,#efe6ff,#e2d6ff); color:#4b2aa5; font-family:"Amatic SC",cursive; letter-spacing:.3px; font-size:1.05rem; box-shadow:0 6px 18px rgba(141,98,255,.18) }
.btn.link{ background:#fff; color:#5f3ef0 }
.btn:hover{ filter:brightness(1.04); transform:translateY(-1px) }
.btn.danger{ background:#fff0f0; border-color:#ffd0d0; color:#b42318 }
.btn.success{ background:#f0fff6; border-color:#c8f2db; color:#107a3a }
.btn.warning{ background:#fff9e6; border-color:#ffe9a6; color:#7a5a10 }

/* User-Pill */
.userpill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.06) }
.userpill img{ width:26px; height:26px; border-radius:50%; object-fit:cover; filter:drop-shadow(0 1px 0 rgba(255,255,255,.4)) }
.userpill .name{ font-weight:600; color:#4b2aa5 }

/* Grids/Listen */
.grid{ display:grid; gap:22px }
.grid.grid-2{ grid-template-columns:1fr 1fr }
@media (max-width:860px){ .grid.grid-2{ grid-template-columns:1fr } }

.stack{ display:flex; flex-direction:column; gap:12px }
.list{ padding-left:18px }
.list li{ margin:.25rem 0 }

/* Formulare */
.input, select, textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #e6defa; background:#fff; font:inherit }
.input:focus, select:focus, textarea:focus{ outline:2px solid #d5c8ff }
label{ font-weight:600 }

/* Tabellen */
.table{ overflow:auto }
.table table{ width:100%; border-collapse:collapse; background:#fff; border-radius:16px; overflow:hidden }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid #eee; text-align:left }
.table th{ background:#faf7ff; color:#4b2aa5; font-weight:700; font-family:"Amatic SC",cursive; letter-spacing:.3px; font-size:1.05rem }
.table tr:last-child td{ border-bottom:none }

/* Hero */
.hero{ display:grid; place-items:center; min-height:24vh; padding-top:clamp(12px,4vw,24px) }
.hero-card{ backdrop-filter: blur(10px) saturate(120%); background:var(--glass); border:1px solid rgba(255,255,255,.55); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(16px,3vw,28px); text-align:center; position:relative; overflow:hidden }
.hero-card::after{ content:""; position:absolute; inset:auto 0 0 0; height:8px; background:linear-gradient(90deg, transparent, var(--accent2), var(--accent), transparent); opacity:.5 }

/* Footer */
footer{ margin:clamp(34px,6vw,80px) 0 22px; text-align:center; color:#4c4f59 }
footer a{ color:#5f3ef0; text-decoration:none }
footer a:hover{ text-decoration:underline }

/* ================= Profilseite: Avatar sauber begrenzen ================= */
.profile-layout{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,0.9fr); gap:22px; align-items:start }
@media (max-width: 960px){ .profile-layout{ grid-template-columns: 1fr } }

/* Verhindert Layout-Overflow */
.grid.grid-2 > div:first-child{ min-width:0 }

/* Greift für <img class="avatar-lg"> UND zusätzlich fallback über .profile-layout .left img */
.avatar-lg,
.profile-layout .left img{
  display:block;
  max-width: min(100%, 520px);
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

/* — Alternative, falls du quadratisch willst:
.avatar-lg{ width: 240px; height: 240px; object-fit: cover; border-radius: 16px }
.profile-layout .left img{ width: 240px; height: 240px; object-fit: cover; border-radius: 16px }
*/

/* Mobile: sanfter Umbrauch in der Topbar */
@media (max-width: 640px){
  .topbar .wrap{ flex-wrap:wrap; gap:8px }
  .topbar .nav{ width:100%; display:flex; gap:8px; flex-wrap:wrap }
  .topbar .btn{ flex:0 0 auto }
}



/* ===== Admin: hübsches Link-Menü ===== */
.admin .hero-card .hero-title{ margin-bottom:.1rem }
.admin .card.alt{ padding:clamp(16px,2.6vw,24px) }

.admin-links{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
}
.admin-link{
  display:grid;
  grid-template-columns: 28px 1fr 14px;
  align-items:center;
  gap:12px;
  padding:.75rem .9rem;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(120,80,200,.22);
  text-decoration:none;
  box-shadow:0 6px 12px rgba(141,98,255,.08);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  color:inherit;
}
.admin-link .icon{ font-size:22px; line-height:1 }
.admin-link .txt .title{
  font-weight:700; color:#4b2aa5; font-family:"Amatic SC",cursive; letter-spacing:.3px; font-size:1.25rem;
}
.admin-link .txt .desc{ color:#534f63; font-size:.98rem }
.admin-link .chev{ color:#7a6ad6; font-weight:700 }
.admin-link:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px rgba(141,98,255,.14);
  background:#f8f6ff;
}