/* ==========================================================================
   TXT; – Stylesheet
   Modernes Dark Cottagecore / Dark Academia / Botanical Editorial
   Schriftarten: Cormorant Garamond (Headlines) · Lora (Fließtext) · Inter (UI)
   Sidebar rechts · dunkles, warmes Farbschema mit Burgundy-Akzent
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ---------- Primärfarben – Flächen & Hintergründe ---------- */
  --color-charcoal: #313131;
  --color-deep-teal: #213f3f;
  --color-olive: #444c41;
  --color-dark-brown: #584330;
  --color-slate: #3b4c56;
  --color-burgundy: #68303d;

  /* ---------- Helle Farben – Text & Akzente ---------- */
  --color-cream: #edece7;
  --color-warm-white: #e5ddd0;
  --color-taupe: #c2b19f;
  --color-dusty-rose: #bd9b99;

  /* ---------- Abgeleitete Töne ---------- */
  --color-bg: var(--color-charcoal); /* dunkelste Farbe der Palette */
  --color-bg-deep: #262626;          /* noch etwas tiefer für Verläufe */
  --color-surface: var(--color-deep-teal);
  --color-surface-alt: var(--color-olive);
  --color-border: rgba(229, 221, 208, 0.14);
  --color-border-soft: rgba(229, 221, 208, 0.08);

  --color-text: var(--color-warm-white);
  --color-text-strong: var(--color-cream);
  --color-text-muted: var(--color-taupe);

  --color-accent: var(--color-burgundy);
  --color-accent-hover: var(--color-dusty-rose);
  --color-heart: #e2596b;
  --color-heart-hover: #f07f8c;

  --font-headline: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-icon: 'Font Awesome 6 Free';

  scrollbar-color: var(--color-burgundy) var(--color-charcoal);
  scrollbar-width: thin;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  background-color: var(--color-bg);
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  background-image: none;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 0 20px 48px;
  letter-spacing: normal;
}

::selection {
  background-color: var(--color-burgundy);
  color: var(--color-cream);
}

/* ---------- Layout: Content links, Sidebar rechts ---------------------- */

.main-content {
  width: 100%;
  max-width: 680px;
  padding: 0;
}

.container {
  width: 100%;
}

.sidebar {
  width: 250px;
  flex: 0 0 250px;
  padding: 28px 24px;
  background-color: var(--color-deep-teal);
  background-image: linear-gradient(160deg, rgba(88, 67, 48, 0.12), transparent 60%);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(237, 236, 231, 0.03), 0 12px 30px rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 28px;
}

/* ---------- Site-Header (vollbreite Kopfzeile) -------------------------- */

.site-header {
  flex: 0 0 100%;
  order: -1;
  background-color: var(--color-bg-deep);
  margin: 0 -20px 24px;
  padding: 28px 20px 22px;
}

.site-header-inner {
  max-width: 970px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* ---------- Wortmarke: immer identischer Style (H1 oder span) ---------- */

.sitename,
h1.sitename,
span.sitename {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-cream);
}

.sitename a {
  color: inherit;
  text-decoration: none;
}

.sitename a:hover {
  color: var(--color-dusty-rose);
  text-decoration: none;
}

/* ---------- Suche ------------------------------------------------------- */

.search-box {
  margin-bottom: 24px;
  position: relative;
}

.search-box::before {
  content: "\f002";                 /* fa-magnifying-glass */
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 12px;
  color: var(--color-taupe);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.8;
}

.search-box input {
  width: 100%;
  padding: 10px 12px 10px 32px;
  border: 1px solid var(--color-border);
  background-color: var(--color-charcoal);
  color: var(--color-warm-white);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box input::placeholder {
  color: var(--color-taupe);
  opacity: 0.85;
}

.search-box input:focus {
  outline: none;
  border-color: var(--color-burgundy);
  box-shadow: 0 0 0 2px rgba(104, 48, 61, 0.35);
}

/* ---------- Sidebar-Listen --------------------------------------------- */

.stats {
  margin-bottom: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-taupe);
}

.recent-posts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent-posts ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 9px;
  line-height: 1.45;
  font-family: var(--font-ui);
  font-size: 12px;
  padding-left: 0;
}

.recent-posts ul li::before {
  content: "\f0da";                 /* fa-caret-right */
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 11px;
  flex: 0 0 auto;
  line-height: 1.45;
  color: var(--color-heart);
  transition: transform 0.2s ease, color 0.2s ease;
}

.recent-posts ul li:hover::before {
  color: var(--color-heart-hover);
  transform: translateX(3px);
}

.recent-posts ul li a {
  color: var(--color-warm-white);
}

.recent-posts ul li a:hover {
  color: var(--color-dusty-rose);
  text-decoration: none;
}

/* ---------- Links, Typografie ------------------------------------------ */

a {
  text-decoration: none;
  color: var(--color-warm-white);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-dusty-rose);
}

h1,
h2,
h3,
.sitename,
.post-title {
  font-family: var(--font-headline);
  color: var(--color-cream);
  letter-spacing: 0.01em;
  line-height: 1.2;
  font-weight: 500;
  margin: 0;
}

.meta,
.stats,
.pagination {
  font-family: var(--font-ui);
  color: var(--color-taupe);
  letter-spacing: 0;
  line-height: 1.4;
  font-weight: 500;
  margin: 0;
}

h1.post-title {
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 12px;
}

h2.post-title {
  font-size: 26px;
  margin-bottom: 10px;
}

h2.post-title a,
h1.post-title a {
  color: inherit;
}

/* Bewusst kein Farbwechsel beim Hover über eine Beitrags-Headline */
h2.post-title a:hover,
h1.post-title a:hover {
  color: inherit;
}

.post-content h2,
.post-content h3 {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 500;
  margin: 30px 0 12px 0;
}

strong,
b {
  color: var(--color-cream);
  font-weight: 700;
}

em,
i {
  color: var(--color-dusty-rose);
  font-style: italic;
}

/* ---------- Beiträge --------------------------------------------------- */

.post {
  padding-bottom: 4px;
  border-bottom: 0 none;
}

.post-header {
  margin-bottom: 14px;
}

.post-content {
  font-family: var(--font-body);
  color: var(--color-warm-white);
  line-height: 1.8;
}

.post-content p {
  margin: 0 0 28px 0;
}

.post-content ul {
  list-style-type: none;
  margin: 0 0 20px 0;
  padding: 0;
}

.post-content ul li {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.post-content ul li > ul,
.post-content ul li > ol,
.post-content ol li > ul,
.post-content ol li > ol {
  flex: 1 0 100%;
}

.post-content ul li:before {
  content: "\f06c";                 /* fa-leaf */
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 0.72em;
  color: var(--color-dusty-rose);
  flex-shrink: 0;
  margin-right: 12px;
  margin-top: 0.45em;
  line-height: 1;
  opacity: 0.9;
  transition: color 0.2s ease, transform 0.2s ease;
}

.post-content ul li:hover:before {
  color: var(--color-taupe);
  transform: rotate(-12deg);
}

/* Verschachtelte Listen bekommen eine zartere Ranke */
.post-content ul ul {
  margin: 6px 0 6px 6px;
  padding-left: 14px;
  border-left: 1px solid var(--color-border-soft);
}

.post-content ul ul li:before {
  content: "\f4d8";                 /* fa-seedling */
  color: var(--color-taupe);
  opacity: 0.7;
}

/* Nummerierte Listen: Ziffern in burgunderfarbenen Medaillons */
.post-content ol {
  list-style: none;
  counter-reset: cottage-counter;
  margin: 0 0 20px 0;
  padding: 0;
}

.post-content ol li {
  counter-increment: cottage-counter;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.post-content ol li::before {
  content: counter(cottage-counter);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 12px;
  margin-top: 0.32em;
  text-align: center;
  border-radius: 50%;
  color: var(--color-cream);
  background-color: var(--color-burgundy);
  box-shadow: 0 0 0 1px rgba(229, 221, 208, 0.12);
}

/* Aufgabenlisten (Markdown-Checkboxen) */
.post-content ul li input[type="checkbox"] {
  display: none;
}

.post-content ul li.task-list-item:before,
.post-content ul li:has(> input[type="checkbox"]):before {
  content: "\f0c8";                 /* fa-square */
  font-weight: 400;
  color: var(--color-taupe);
}

.post-content ul li:has(> input[type="checkbox"]:checked):before {
  content: "\f14a";                 /* fa-square-check */
  font-weight: 900;
  color: var(--color-dusty-rose);
}

/* Definitionslisten */
.post-content dl {
  margin: 0 0 20px 0;
}

.post-content dt {
  font-family: var(--font-headline);
  font-size: 1.1em;
  color: var(--color-cream);
}

.post-content dd {
  margin: 2px 0 14px 0;
  padding-left: 16px;
  border-left: 1px solid var(--color-border-soft);
  color: var(--color-taupe);
}

.post-content a {
  color: var(--color-warm-white);
  background-color: transparent;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: rgba(189, 155, 153, 0.55);
  text-underline-offset: 3px;
}

.post-content a:hover {
  color: var(--color-dusty-rose);
  background-color: transparent;
  text-decoration-color: var(--color-dusty-rose);
}

/* Teaser-Pfeil auf der Startseite – ohne Rahmen, ohne Unterstrich */
.teaser-more {
  color: var(--color-taupe) !important;
  background-color: transparent;
  border: 0 none !important;
  border-radius: 0;
  padding: 0;
  margin-left: 8px;
  display: inline-block;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  vertical-align: baseline;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease;
}

.teaser-more i,
.teaser-more::before {
  display: inline-block;
  transition: transform 0.25s ease;
}

/* Fallback, falls im Markup kein Icon-Element steht */
.teaser-more:empty::before {
  content: "\f178";             /* fa-arrow-right-long */
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 13px;
}

.teaser-more:hover,
.teaser-more:focus-visible {
  color: var(--color-dusty-rose) !important;
  background-color: transparent;
  border: 0 none !important;
  text-decoration: none !important;
}

.teaser-more:hover i,
.teaser-more:hover::before {
  transform: translateX(4px);
}

/* ---------- Meta ------------------------------------------------------- */

.meta {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--color-taupe);
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta a {
  color: var(--color-taupe);
}

.meta a:hover {
  color: var(--color-dusty-rose);
  text-decoration: none;
}

button {
  background: none;
  border: 0 none;
  color: var(--color-burgundy);
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}

button:hover {
  color: var(--color-dusty-rose);
}

/* Like-Herz */
.like-btn {
  font-size: 14px;
  line-height: 1;
  color: var(--color-heart);
}

.like-btn:hover {
  color: var(--color-heart-hover);
  transform: scale(1.15);
}

.like-btn.liked {
  color: var(--color-heart-hover);
  animation: heartbeat 0.45s ease;
}

@keyframes heartbeat {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.4); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-burgundy);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Verwandte Beiträge (dunkel integriert) ---------------------- */

.related-posts {
  margin-top: 40px;
  padding: 24px;
  background-color: var(--color-deep-teal);
  background-image: linear-gradient(160deg, rgba(104, 48, 61, 0.08), transparent 65%);
  color: var(--color-warm-white);
  border: 1px solid rgba(229, 221, 208, 0.12);
  border-radius: 6px;
}

.related-posts h2::before,
.related-posts h3::before {
  content: "\f4d8";                 /* fa-seedling */
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 13px;
  color: var(--color-dusty-rose);
  margin-right: 9px;
  vertical-align: 2px;
}

.related-posts h2,
.related-posts h3 {
  color: var(--color-cream);
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 14px;
}

.related-posts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-posts li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 9px;
  line-height: 1.45;
  font-family: var(--font-ui);
  font-size: 14px;
  padding-left: 0;
}

.related-posts li::before {
  content: "\f02d";                 /* fa-book */
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 11px;
  flex: 0 0 auto;
  line-height: 1.45;
  color: var(--color-taupe);
  opacity: 0.7;
}

.related-posts a {
  color: var(--color-warm-white);
  text-decoration: underline;
  text-decoration-color: rgba(189, 155, 153, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.related-posts a:hover {
  color: var(--color-dusty-rose);
  text-decoration-color: var(--color-dusty-rose);
}

.related-posts p {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-taupe);
}

/* ---------- Blättern --------------------------------------------------- */

.pagination {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 28px;
  font-family: var(--font-ui);
  font-size: 13px;
}

.pagination a,
.pagination .active {
  padding: 5px 11px;
  border-radius: 4px;
  background-color: var(--color-deep-teal);
  border: 1px solid rgba(229, 221, 208, 0.15);
  color: var(--color-warm-white);
}

.pagination a:hover {
  background-color: var(--color-dark-brown);
  text-decoration: none;
}

.pagination .active {
  background-color: var(--color-burgundy);
  border-color: var(--color-burgundy);
  color: var(--color-cream);
  font-weight: 600;
}

.pointer {
  cursor: help;
}

/* ---------- Scrollbar -------------------------------------------------- */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-charcoal);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-burgundy);
  border-radius: 4px;
}

/* ---------- Code, Bilder, Zitate -------------------------------------- */

pre,
code {
  background-color: var(--color-charcoal);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--color-taupe);
}

pre {
  overflow-x: auto;
  margin-bottom: 18px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid rgba(229, 221, 208, 0.12);
}

blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border: 0 none;
  border-left: 2px solid var(--color-burgundy);
  color: var(--color-taupe);
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
}

blockquote::before {
  content: "\f10d";                 /* fa-quote-left */
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 12px;
  color: var(--color-burgundy);
  position: absolute;
  left: -7px;
  top: -10px;
  background-color: var(--color-bg);
  padding: 2px 0;
}

/* ---------- Mobil ------------------------------------------------------ */

@media (max-width: 980px) {
  body {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 0 16px 24px;
  }

  .site-header {
    margin: 0 -16px 20px;
    padding: 20px 16px 18px;
  }

  .sidebar {
    width: 100%;
    flex: 1 1 auto;
    position: relative;
    top: 0;
  }

  .main-content {
    max-width: 100%;
  }

  .search-box input {
    width: 100%;
  }

  h1.post-title {
    font-size: 26px;
  }

  h2.post-title {
    font-size: 22px;
  }

  .sitename {
    font-size: 22px;
  }

  .meta-divider .meta-items {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* In der Mobilansicht keine Liste der neuesten Beiträge */
  .recent-posts,
  .stats {
    display: none;
  }
}

/* ---------- Feinschliff -------------------------------------------------- */

/* Beitragsliste: Headline bleibt beim Überfahren farblich unverändert */
.main-content .post {
  transition: border-color 0.2s ease;
}

.main-content .post:hover h2.post-title a,
.main-content .post h2.post-title a:hover {
  color: var(--color-cream);
}

/* Metazeile ruhiger, Trennstriche neutral */
.meta {
  font-variant-numeric: tabular-nums;
}

/* Sidebar & verwandte Beiträge: ohne Trennlinien, nur Abstände */
.recent-posts ul li + li,
.related-posts li + li {
  border-top: none;
  padding-top: 0;
}

/* ---------- Meta als Trennlinie (Übersicht) ---------------------------- */

.meta-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 12px;
  color: var(--color-taupe);
}

.meta-divider::before,
.meta-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--color-border-soft);
}

.meta-divider .meta-items {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.meta-divider .meta-items .like-btn {
  font-size: 13px;
}

.post:last-of-type .meta-divider {
  margin-bottom: 4px;
}


/* ==========================================================================
   Icon-Feinschliff & Ornamente (Dark Cottagecore)
   ========================================================================== */

.icon {
  font-family: var(--font-icon);
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  line-height: 1;
}

/* Metazeile: Icons statt nackter Zahlen */
.meta .meta-icon {
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 10.5px;
  color: var(--color-taupe);
  opacity: 0.75;
  margin-right: 3px;
}

.meta .like-btn .meta-icon,
.like-btn i {
  color: inherit;
  opacity: 1;
  margin: 0;
}

/* Trennzeichen der Metazeile dezenter */
.meta-items .sep {
  color: var(--color-border);
  opacity: 0.9;
  padding: 0 2px;
}

/* Ornament zwischen Beiträgen der Übersicht */
.main-content .post + .post {
  position: relative;
}

.main-content .post + .post::before {
  content: "\f06c";
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 10px;
  color: var(--color-burgundy);
  opacity: 0.5;
  display: block;
  text-align: center;
  margin: 0 0 8px 0;
}

/* Blättern mit Pfeil-Icons */
.pagination .page-prev::before {
  content: "\f104";
  font-family: var(--font-icon);
  font-weight: 900;
  margin-right: 5px;
}

.pagination .page-next::after {
  content: "\f105";
  font-family: var(--font-icon);
  font-weight: 900;
  margin-left: 5px;
}

/* Externe Links im Fließtext markieren */
.post-content a[target="_blank"]::after {
  content: "\f35d";                 /* fa-arrow-up-right-from-square */
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 0.62em;
  margin-left: 5px;
  vertical-align: 1px;
  color: var(--color-taupe);
  opacity: 0.8;
}

/* Suchergebnisseite: Trefferzeile */
.search-summary {
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--color-taupe);
  border-bottom: 1px solid var(--color-border-soft);
  padding-bottom: 12px;
  margin-bottom: 26px;
}

.search-summary::before {
  content: "\f002";
  font-family: var(--font-icon);
  font-weight: 900;
  font-size: 11px;
  margin-right: 8px;
  color: var(--color-burgundy);
}