/*
Theme Name: Author Blog Theme
Theme URI: https://example.com
Author: Dein Name
Author URI: https://example.com
Description: Elegantes, minimalistisches Theme für einen Autoren-Blog mit Modal-Post-Preview und Dark Theme.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: author-blog-theme
*/

:root{
  --bg: #ffffff;
  --text: #121212;
  --muted: #6b6b6b;
  --accent: #9b8c7a;
  --max-width: 900px;
}

body{
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  background: var(--bg);
  color: var(--text);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:var(--accent); text-decoration:none }

.container{ max-width:var(--max-width); margin:0 auto; padding:1rem; }

.header-portrait{
  display:flex; gap:1rem; align-items:center; margin:2rem 0;
}
.header-portrait img{ width:140px; height:140px; object-fit:cover; border-radius:8px }
.header-portrait .author-intro{ flex:1 }

/* Blog list */
.post-list{ display:grid; gap:1.5rem }
.post-card{ padding:1.25rem; border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,0.03); background:transparent }
.post-card h2{ margin:0 0 .5rem }
.post-card .preview{ color:var(--muted); }

/* Modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:9999 }
.modal{ background:var(--bg); color:var(--text); max-width:900px; width:calc(100% - 2rem); max-height:90vh; overflow:auto; border-radius:8px; padding:1.5rem }
.modal .close{ float:right; cursor:pointer }

/* Dark theme */
body.dark{ --bg:#0f0f10; --text:#ffffff; --muted:#bdbdbd; --accent:#c9bfae }

/* Responsive */
@media (max-width:768px){
  .header-portrait{ flex-direction:column; align-items:flex-start }
  .header-portrait img{ width:100%; height:auto; border-radius:6px }
}

/* Accessibility focus */
a:focus, button:focus{ outline:2px solid var(--accent); outline-offset:2px }