/* kurz.dr-nassan.at – Gestaltung wie www.dr-nassan.at */

/* Schrift lokal eingebunden (keine Verbindung zu Google) */
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/josefin-sans-latin-100-normal.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/josefin-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/josefin-sans-latin-400-normal.woff2') format('woff2'); }

:root {
  --color-text: #3a3a3a;
  --color-light: #7a7a7a;
  --color-line: #d0ccc8;
  --color-bg: #ffffff;
  --color-soft: #faf9f7;
  --color-danger: #9a3b33;
  --font: 'Josefin Sans', 'Century Gothic', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-text); text-decoration: none; }
img, video { max-width: 100%; }
p { margin: 0; }

.wrap { max-width: 600px; margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 420px; padding-top: 4rem; }

/* Navigation (wie Hauptseite) */
nav.top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line);
}
nav.top ul {
  list-style: none; margin: 0;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: .4rem 2.5rem; padding: 1rem 1.5rem;
}
nav.top a, .navbtn {
  color: var(--color-light);
  font-family: var(--font); font-weight: 300; font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase;
  transition: color .2s;
}
nav.top a:hover, nav.top a.active, .navbtn:hover { color: var(--color-text); }
.navbtn { background: none; border: 0; padding: 0; cursor: pointer; }

/* Kopf */
header.site { text-align: center; padding: 3rem 1.5rem 1rem; }
.photo { width: 120px; height: 146px; object-fit: cover; object-position: top center; display: block; margin: 0 auto 1.6rem; background: var(--color-soft); }
.name-title {
  font-weight: 100; font-size: clamp(1.2rem, 4vw, 1.7rem);
  letter-spacing: .25em; text-transform: uppercase; margin-bottom: .9rem;
}
.divider { width: 40px; height: 1px; background: var(--color-text); margin: 0 auto 1.2rem; }
.tagline { font-size: .95rem; color: var(--color-light); }

/* Überschriften */
.h {
  font-weight: 100; font-size: clamp(1.1rem, 3vw, 1.4rem);
  letter-spacing: .2em; text-transform: uppercase; text-align: center;
  margin: 2.5rem 0 1.5rem;
}
.h::after { content: ''; display: block; width: 40px; height: 1px; background: var(--color-text); margin: .75rem auto 0; }
.h2 {
  font-weight: 400; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem 1rem; background: var(--color-text); color: #fff; margin: 2.2rem 0 0;
}

/* Beiträge */
.timeline { margin-top: 1rem; }
.post { padding: 1.6rem 0; border-bottom: 1px solid var(--color-line); }
.post.current { background: var(--color-soft); margin: 0 -1.5rem; padding: 1.6rem 1.5rem; }
.thread .post:not(:last-child) { border-bottom-style: dashed; }
.meta { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-light); margin-bottom: .5rem; }
.meta a { color: var(--color-light); }
.meta a:hover { color: var(--color-text); }
.edited { text-transform: none; letter-spacing: 0; font-style: italic; }
.pin, .cont { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-light); margin-bottom: .4rem; }
.pin { color: var(--color-text); font-weight: 400; }
.cont a { text-transform: none; letter-spacing: 0; color: var(--color-light); border-bottom: 1px solid var(--color-line); }
.text { font-size: 1.05rem; line-height: 1.75; overflow-wrap: anywhere; }
.text a.ext { border-bottom: 1px solid var(--color-line); }
.text a.ext:hover { border-bottom-color: var(--color-text); }
.text a.tag { font-weight: 400; }
.text a.tag:hover { border-bottom: 1px solid var(--color-text); }

.media { display: grid; gap: 3px; margin-top: 1rem; }
.media-2, .media-3, .media-4 { grid-template-columns: 1fr 1fr; }
.media-3 > :first-child { grid-row: span 2; }
.media img, .media video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-soft); }
.media-1 img, .media-1 video { height: auto; max-height: 620px; object-fit: contain; }
.media-2 img, .media-3 img, .media-4 img, .media-2 video, .media-4 video { aspect-ratio: 1 / 1; }
.media a { display: block; }

.actions { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-top: .9rem; }
.actions a, .actions button, button.link {
  font-family: var(--font); font-weight: 300; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-light); background: none; border: 0; padding: 0; cursor: pointer; transition: color .2s;
}
.actions a:hover, .actions button:hover, button.link:hover { color: var(--color-text); }

.empty, .back { color: var(--color-light); padding: 1.5rem 0; text-align: center; }
.back a { color: var(--color-light); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.notice { background: var(--color-soft); border-left: 2px solid var(--color-text); padding: .7rem 1rem; margin: 1rem 0; }
.notice.err { border-left-color: var(--color-danger); color: var(--color-danger); }

.pager { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-light); }
.pager a { color: var(--color-text); }

/* Archiv, Hashtags */
.archive, .plain, .list { list-style: none; padding: 0; margin: 0; }
.archive li { display: flex; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--color-line); color: var(--color-light); }
.archive li a { color: var(--color-light); }
.archive li a:hover { color: var(--color-text); }
.archive span { color: var(--color-text); font-weight: 400; }
.tags { line-height: 2.2; padding: 1rem; }
.tags a { font-weight: 400; }
.tags span { color: var(--color-light); font-size: .8rem; margin-right: .6rem; }
.plain li { padding: .3rem 0; color: var(--color-light); }

/* Formulare */
input[type=text], input[type=password], input[type=search], input[type=datetime-local], textarea {
  width: 100%; font-family: var(--font); font-weight: 300; font-size: 1rem; color: var(--color-text);
  background: #fff; border: 1px solid var(--color-line); border-radius: 0; padding: .7rem .9rem;
  -webkit-appearance: none; appearance: none;
}
input:focus, textarea:focus { outline: none; border-color: var(--color-text); }
textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
label { display: block; margin: .9rem 0; font-size: .9rem; color: var(--color-light); }
label input[type=text], label input[type=password] { margin-top: .3rem; }
label.small, .small { font-size: .85rem; color: var(--color-light); }
label.small input, .when input[type=radio] { margin-right: .4rem; accent-color: var(--color-text); }
input[type=checkbox] { accent-color: var(--color-text); }
button { font-family: var(--font); cursor: pointer; }
button.primary {
  background: var(--color-text); color: #fff; border: 0; border-radius: 0;
  padding: .75rem 1.6rem; font-weight: 400; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
button.primary:hover { background: #222; }
button.primary:disabled { opacity: .6; }
button.del { background: none; border: 1px solid var(--color-danger); color: var(--color-danger); border-radius: 0; padding: .6rem 1.4rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.row { display: flex; align-items: center; gap: 1.4rem; margin-top: 1rem; }
.row a { color: var(--color-light); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.inline { display: inline; margin: 0; }
.box { border: 1px solid var(--color-line); padding: 0 1.2rem 1.2rem; margin: 1.5rem 0; }
.box .h2 { margin: 0 -1.2rem 1rem; }
.box p { color: var(--color-light); margin-bottom: 1rem; }
.danger { margin: 2rem 0; text-align: center; }

.search { display: flex; gap: .5rem; margin: 0 0 1rem; }
.search button { border: 0; background: var(--color-text); color: #fff; padding: 0 1.2rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }

.compose { border: 1px solid var(--color-line); padding: 1.2rem; margin: 2rem 0 .5rem; background: var(--color-soft); }
.counter { text-align: right; font-size: .75rem; color: var(--color-light); margin-top: .2rem; }
.counter.over { color: var(--color-danger); font-weight: 400; }
.hint { font-size: .85rem; color: var(--color-light); margin: 0 0 .6rem; }
.file { font-size: .85rem; }
.file input { display: block; margin-top: .4rem; font-family: var(--font); font-size: .85rem; max-width: 100%; }
.altnew input { margin: .25rem 0; font-size: .9rem; }
.when { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin: .8rem 0; font-size: .9rem; }
.when label { margin: 0; color: var(--color-text); }
.when input[type=datetime-local] { width: auto; padding: .35rem .6rem; font-size: .9rem; }
.when.no-later input[type=datetime-local] { display: none; }

.existing { border: 1px solid var(--color-line); margin: .8rem 0; padding: .4rem .9rem .8rem; background: #fff; }
.existing legend { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-light); padding: 0 .3rem; }
.mrow { display: flex; align-items: center; gap: .7rem; margin: .4rem 0; }
.mrow img, .mrow .vid { width: 54px; height: 54px; object-fit: cover; flex: none; background: var(--color-line); }
.mrow .vid { display: flex; align-items: center; justify-content: center; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-light); }
.mrow label { margin: 0; white-space: nowrap; }

/* Verwaltung: Listen */
.list li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--color-line); }
.li-main { min-width: 0; }
.li-main a { display: block; overflow-wrap: anywhere; }
.li-main small { color: var(--color-light); font-size: .8rem; }
.li-act { display: flex; gap: 1rem; white-space: nowrap; align-items: flex-start; }
.li-act a { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-light); }
.li-act a:hover { color: var(--color-text); }

/* Fußzeile (wie Hauptseite) */
footer.site-foot { text-align: center; padding: 2rem 1.5rem; margin-top: 3rem; font-size: .75rem; color: var(--color-line); border-top: 1px solid var(--color-line); }
footer.site-foot .disclaimer { color: var(--color-light); margin-bottom: .8rem; font-size: .85rem; }
footer.site-foot a { color: var(--color-light); letter-spacing: .08em; text-transform: uppercase; transition: color .2s; }
footer.site-foot a:hover { color: var(--color-text); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--color-text); color: #fff; padding: .5rem 1.2rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 600px) {
  nav.top ul { gap: .4rem 1.2rem; }
  .wrap { padding: 0 1.2rem; }
  .post.current { margin: 0 -1.2rem; padding: 1.6rem 1.2rem; }
  .li-act { flex-direction: column; gap: .3rem; }
}