/* assets/style.css — helles Layout */
:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --text:#1d1f23;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#7FAA34;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.header{
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:10;
  max-width: 100vw;       /* nicht breiter als Bildschirm */
  overflow-x: hidden;     /* verhindert horizontales Scrollen */
  flex-wrap: wrap; /* <— erlaubt automatischen Zeilenumbruch */
}
.wrap{
  max-width:1100px; margin:0 auto; padding:16px;
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  flex-wrap: wrap; /* <— erlaubt automatischen Zeilenumbruch */
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:38px; width:auto; border-radius:8px}
.brand .title{font-weight:700; font-size:20px}

.nav{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  border:1px solid var(--line); background:var(--card); border-radius:10px;
  box-shadow:var(--shadow); color:var(--text); font-weight:600;
}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}
.btn.danger{background:#ef4444; color:#fff; border-color:transparent}
.btn:hover{transform:translateY(-1px)}

.main{max-width:1100px; margin:22px auto; padding:0 16px}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; margin-bottom:16px;
}
.list{display:grid; gap:12px}
.thread{display:grid; gap:8px}
.thread .title{font-size:18px; font-weight:700}
.meta{color:var(--muted); font-size:12px}

form.grid{
  display:grid; gap:12px;
}
input[type=text],input[type=password],input[type=email],textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--text);
}
textarea{min-height:140px; resize:vertical}

.thumb{
  max-width:250px; max-height:180px; border-radius:10px; border:1px solid var(--line);
  cursor:pointer;
}
.post-content{white-space:pre-wrap; line-height:1.5}

.footer{color:var(--muted); font-size:12px; padding:24px; text-align:center}

.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  display:none; align-items:center; justify-content:center;
}
.lightbox img{max-width:95vw; max-height:90vh; border-radius:12px; cursor: pointer;}
.lightbox.show{display:flex}


/* --- avatars + gallery --- */
.avatar{width:32px;height:32px;border-radius:20%;object-fit:cover;border:1px solid var(--line);background:#fff}
.userline{display:flex;align-items:center;gap:8px}
.badge{font-size:12px;color:var(--muted)}
.gallery{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.gallery .thumb{max-width:180px;max-height:140px}

a.mention{ color: var(--green, #7FAA34); text-decoration: none; font-weight: 600; }
a.mention:hover{ text-decoration: underline; }
.post-body br + br {
  display: none;
}

textarea[name="content"] {
  font-family: inherit;       /* gleiche Schrift wie body */
  font-size: 1rem;            /* gleiche Größe */
  line-height: 1.5;           /* wie Anzeige */
  color: var(--text);         /* gleiche Textfarbe */
  background: var(--bg2);     /* gleiche Hintergrundfarbe */
  border: 1px solid #333;     /* dezente Umrandung */
  padding: 8px;
  border-radius: var(--radius);
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  white-space: pre-wrap;      /* Zeilenumbrüche sichtbar */
  min-height: 250px;   /* Standardgröße beim Öffnen */
  resize: vertical;    /* Benutzer darf die Höhe verändern */
}