/*
Theme Name: Dillenberg Warm
Theme URI: https://dillenberg.net
Author: H.G.O. Dillenberg
Description: Kopie von Dillenberg mit warmer, analoger Palette (Honig/Salbei auf warmem Braun) und Foto-Hintergrund. Aufbau und Schriften unverändert.
Version: 1.1.4-warm.1
License: GPL-2.0-or-later
Text Domain: dillenberg
*/

/* ─────────────────────────────────────────────────────────────────────
   DESIGN TOKENS — alle Werte ableitbar aus diesen Variables.
   Keine magic numbers im restlichen Stylesheet (außer Border-Radien
   und 1px-Linien).
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* Farben */
  --d-bg:    #1e1611;
  --d-fg:    #f1e6d6;
  --d-fg-2:  #c6bdb3;
  --d-muted: #837363;
  --d-line:  #2f261e;
  --d-acc:   #f2a65a;
  --d-acc-soft: rgba(242,166,90,.5);
  --d-acc-bg:   rgba(242,166,90,.04);

  /* Typografie-Skala (modular, ratio ≈ 1.2) */
  --fs-xs:   0.7rem;     /* eyebrow / meta */
  --fs-sm:   0.82rem;    /* code, kleine UI */
  --fs-md:   0.95rem;    /* mobile body, alt-content */
  --fs-base: 1.05rem;    /* body text */
  --fs-lg:   1.18rem;    /* h3 */
  --fs-xl:   1.45rem;    /* h2 */
  --fs-2xl:  1.85rem;    /* großes Element */

  /* Spacing-Skala (geometrisch, base 0.4rem) */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.6rem;
  --sp-5: 2.4rem;
  --sp-6: 3.2rem;
  --sp-7: 4.8rem;

  /* Layout-Constraints */
  --w-content: 720px;   /* Lesbarkeit Body */
  --w-wide:    1100px;  /* Hero-Image / Container */
  --w-meta:    880px;   /* Hero-Title-Container */

  /* Typografie-Familien */
  --ff-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;
}

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL: Text-Selection — bright green + glow + body-Aura-Pulse
   ───────────────────────────────────────────────────────────────────── */
::selection      { background:#f2a65a; color:#1e1611; text-shadow:0 0 10px rgba(242,166,90,.85); }
::-moz-selection { background:#f2a65a; color:#1e1611; text-shadow:0 0 10px rgba(242,166,90,.85); }
body.has-selection::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  box-shadow:inset 0 0 0 1px rgba(242,166,90,.5), inset 0 0 60px rgba(242,166,90,.18);
  animation:dilSelPulse 1.6s ease-in-out infinite;
}
@keyframes dilSelPulse{
  0%,100% { box-shadow:inset 0 0 0 1px rgba(242,166,90,.35), inset 0 0 40px rgba(242,166,90,.10); }
  50%     { box-shadow:inset 0 0 0 1px rgba(242,166,90,.75), inset 0 0 90px rgba(242,166,90,.28); }
}
@media (prefers-reduced-motion: reduce){
  body.has-selection::after { animation:none; }
}

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL: Cursor — alle interaktiven Elemente bekommen pointer
   ───────────────────────────────────────────────────────────────────── */
button,
[role="button"],
[type="button"],
[type="submit"],
[type="reset"],
summary,
label[for],
.btn,
a[href]:not([href=""]) {
  cursor: pointer;
}
button:disabled, [disabled] { cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────────────
   GLOBALS — gilt für alle Posts/Pages/Archives
   ───────────────────────────────────────────────────────────────────── */
body.single-post,
body.page,
body.archive,
body.blog {
  background: var(--d-bg);
  color: var(--d-fg);
  font-family: var(--ff-mono);
  font-size: var(--fs-base);
  line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────────────────
   HERO (single posts) — Padding & Container, Title bleibt vom Theme
   ───────────────────────────────────────────────────────────────────── */
.crt-hero {
  position: relative;
  padding: clamp(var(--sp-6), 7vw, var(--sp-7)) var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--d-line);
  overflow: hidden;
}
.crt-hero .crt-inner {
  max-width: var(--w-meta);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.crt-meta {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  flex-wrap: wrap !important;
  font-size: var(--fs-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,250,242,.55);
  margin-bottom: var(--sp-3) !important;
  font-weight: 500;
}
.crt-meta .wp-block-post-date,
.crt-meta .wp-block-post-terms {
  margin: 0 !important;
  font-size: var(--fs-sm);
}
.crt-meta .wp-block-post-date {
  color: #fffaf2;
  text-shadow: 0 0 8px rgba(242,166,90,.35), 0 0 18px rgba(242,166,90,.12);
  font-weight: 600;
}
.crt-meta .wp-block-post-terms {
  color: var(--d-acc);
}
.crt-meta .wp-block-post-terms a {
  color: var(--d-acc);
  text-decoration: none;
  border-bottom: 1px dotted var(--d-acc);
  text-shadow: 0 0 6px rgba(242,166,90,.3);
}
.crt-meta .wp-block-post-terms a:hover { color:#fffaf2; border-bottom-color: var(--d-acc); text-shadow:0 0 10px rgba(242,166,90,.6) }

/* CRT-Effekt nur dezent */
.crt-scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(255,250,242,.015) 3px, transparent 4px);
}
.crt-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(30,22,17,.5) 100%);
}

/* ─────────────────────────────────────────────────────────────────────
   CONTENT-CONTAINER
   ───────────────────────────────────────────────────────────────────── */
body.single-post main.wp-block-group,
body.page main.wp-block-group {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 var(--sp-4) var(--sp-7);
}

/* Featured Image */
body.single-post .wp-block-post-featured-image,
body.page .wp-block-post-featured-image {
  max-width: var(--w-wide);
  margin: var(--sp-3) auto var(--sp-6) !important;
  border: 1px solid var(--d-line);
  background: #1e1611;
}
body.single-post .wp-block-post-featured-image img,
body.page .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

/* ─────────────────────────────────────────────────────────────────────
   ENTRY-CONTENT — Lesbarkeit, einheitliche Typografie
   ───────────────────────────────────────────────────────────────────── */
.entry-content,
.wp-block-post-content {
  max-width: var(--w-content) !important;
  margin: 0 auto !important;
  font-size: var(--fs-base);
  color: var(--d-fg);
}
.entry-content p,
.wp-block-post-content p {
  margin: 0 0 var(--sp-3);
  line-height: 1.75;
  font-size: var(--fs-base);
}
.entry-content h2,
.wp-block-post-content h2 {
  font-family: inherit;
  font-size: var(--fs-xl);
  font-weight: 500;
  color: #fffaf2;
  letter-spacing: 0.01em;
  margin: var(--sp-6) 0 var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--d-line);
}
.entry-content h3,
.wp-block-post-content h3 {
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--d-acc);
  letter-spacing: 0.04em;
  margin: var(--sp-5) 0 var(--sp-1);
}
.entry-content h4,
.wp-block-post-content h4 {
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  color: #fffaf2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: var(--sp-4) 0 var(--sp-1);
}
.entry-content a,
.wp-block-post-content a {
  color: var(--d-acc);
  text-decoration: none;
  border-bottom: 1px dotted var(--d-acc-soft);
}
.entry-content a:hover,
.wp-block-post-content a:hover { border-bottom-color: var(--d-acc); }

.entry-content ul,
.entry-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol {
  margin: 0 0 var(--sp-3) var(--sp-3);
  padding: 0;
  font-size: var(--fs-base);
  line-height: 1.75;
}
.entry-content li,
.wp-block-post-content li { margin-bottom: var(--sp-1); }

.entry-content img,
.wp-block-post-content img {
  max-width: 100%;
  height: auto;
  margin: var(--sp-5) auto var(--sp-1);
  display: block;
  border: 1px solid var(--d-line);
}

/* Bild-Caption / Quellen-Credit (ComfyUI-Prompt etc.) */
.entry-content figure.wp-block-image,
.wp-block-post-content figure.wp-block-image { margin: var(--sp-5) 0; }
.entry-content figcaption,
.wp-block-post-content figcaption,
.entry-content .wp-element-caption,
.wp-block-post-content .wp-element-caption {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  line-height: 1.55;
  color: var(--d-muted);
  text-align: left;
  margin: 0 auto;
  padding: var(--sp-1) 0 0;
  border-top: 1px solid var(--d-line);
  font-style: normal;
  max-width: var(--w-content);
}
.entry-content .img-credit em,
.wp-block-post-content .img-credit em {
  color: #a49586;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.85em;
  margin-right: 0.4em;
}

.entry-content blockquote,
.wp-block-post-content blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-2) var(--sp-4);
  border-left: 2px solid var(--d-acc);
  background: var(--d-acc-bg);
  font-style: italic;
  color: var(--d-fg-2);
  font-size: var(--fs-base);
}

.entry-content code,
.wp-block-post-content code {
  background: #1e1611;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--d-line);
  font-size: var(--fs-sm);
  color: #e4d0bc;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.entry-content pre,
.wp-block-post-content pre {
  background: #1e1611;
  border: 1px solid var(--d-line);
  padding: var(--sp-3);
  overflow-x: auto;
  margin: var(--sp-5) 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  max-width: 100%;
}
.entry-content pre code,
.wp-block-post-content pre code { word-break: normal; overflow-wrap: normal; }

/* ─────────────────────────────────────────────────────────────────────
   POST-FOOTER (Tags, Separator)
   ───────────────────────────────────────────────────────────────────── */
body.single-post .wp-block-post-terms {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--d-muted);
  margin-top: var(--sp-6) !important;
}
body.single-post .wp-block-post-terms a {
  color: var(--d-acc);
  text-decoration: none;
  margin-right: var(--sp-1);
}

body.single-post .wp-block-separator {
  border: none;
  border-top: 1px solid var(--d-line);
  margin: var(--sp-6) 0;
}

/* ─────────────────────────────────────────────────────────────────────
   MOBILE — 720px / 480px / 360px
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root {
    --fs-base: var(--fs-md);
    --fs-xl:   var(--fs-lg);
    --fs-2xl:  var(--fs-xl);
  }
  .crt-hero { padding: var(--sp-5) var(--sp-3) var(--sp-3); }
  body.single-post main.wp-block-group,
  body.page main.wp-block-group { padding: 0 var(--sp-3) var(--sp-6); }
  body.single-post .wp-block-post-featured-image img,
  body.page .wp-block-post-featured-image img { max-height: 45vh; }
  .entry-content pre,
  .wp-block-post-content pre { padding: var(--sp-2); font-size: var(--fs-xs); }
}

@media (max-width: 480px) {
  :root {
    --sp-4: 1.2rem;
    --sp-5: 1.8rem;
    --sp-6: 2.4rem;
    --sp-7: 3.2rem;
  }
  .crt-meta { gap: var(--sp-2); font-size: var(--fs-xs); }
}

@media (max-width: 360px) {
  :root {
    --fs-xl:  1.18rem;
    --fs-2xl: 1.38rem;
    --sp-3:   0.7rem;
    --sp-4:   1rem;
  }
  .crt-hero { padding: var(--sp-4) var(--sp-2) var(--sp-2); }
  body.single-post main.wp-block-group,
  body.page main.wp-block-group { padding: 0 var(--sp-2) var(--sp-5); }
  .crt-meta { font-size: 0.6rem; letter-spacing: .15em; }
}

/* ═════════════════════════════════════════════════════════════════════
   CUSTOM TEMPLATES — Auswählbar im Block-Editor unter „Vorlage"
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Long-Form (kompakt, lange Texte, scannbar) ─────────────────────── */
.tmpl-longform { padding: var(--sp-5) 0 var(--sp-7); }
.tmpl-longform .longform-header { max-width: 720px; margin: 0 auto var(--sp-5); padding: 0 var(--sp-3); }
.tmpl-longform .longform-meta { gap: var(--sp-2); font-size: var(--fs-xs); letter-spacing: .15em; text-transform: uppercase; color: var(--d-fg-2); margin-bottom: var(--sp-3); }
.tmpl-longform .longform-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--sp-4); }
.tmpl-longform .longform-featured { max-width: 720px; margin: 0 auto var(--sp-5); padding: 0 var(--sp-3); }
.tmpl-longform .longform-content { max-width: 720px !important; margin: 0 auto; padding: 0 var(--sp-3); font-size: 0.92rem; line-height: 1.62; }
.tmpl-longform .longform-content > * { margin-block: var(--sp-3); }
.tmpl-longform .longform-content h2 { font-size: 1.25rem; line-height: 1.3; margin-top: var(--sp-6); margin-bottom: var(--sp-2); position: relative; padding-left: 1.2em; }
.tmpl-longform .longform-content h2::before { content: "§"; position: absolute; left: 0; color: var(--d-acc-soft); font-weight: 400; }
.tmpl-longform .longform-content h3 { font-size: 1.05rem; margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
.tmpl-longform .longform-content p { margin-block: var(--sp-2); }
.tmpl-longform .longform-content figure.wp-block-image { max-width: 560px; margin: var(--sp-4) auto; }
.tmpl-longform .longform-content figure.wp-block-image figcaption { font-size: var(--fs-xs); color: var(--d-fg-2); text-align: center; font-style: italic; }
.tmpl-longform .longform-content blockquote.wp-block-quote { border-left: 2px solid var(--d-acc-soft); padding: var(--sp-1) var(--sp-3); font-size: 0.88rem; color: var(--d-fg-2); }
.tmpl-longform .longform-content table { font-size: 0.85rem; }
.tmpl-longform .longform-content ul, .tmpl-longform .longform-content ol { padding-left: 1.4em; }
.tmpl-longform .longform-content li { margin-block: 0.3em; }

/* ─── Editorial (Magazin, Hero-Bild, große Akzente) ──────────────────── */
.tmpl-editorial .editorial-hero { margin: 0 0 var(--sp-5); }
.tmpl-editorial .editorial-hero img { width: 100%; height: clamp(280px, 50vh, 560px); object-fit: cover; }
.tmpl-editorial .editorial-headline { max-width: 880px; margin: 0 auto var(--sp-6); padding: 0 var(--sp-3); }
.tmpl-editorial .editorial-meta { gap: var(--sp-2); font-size: var(--fs-xs); letter-spacing: .15em; text-transform: uppercase; color: var(--d-fg-2); margin-bottom: var(--sp-3); }
.tmpl-editorial .editorial-title { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -.025em; margin: 0 0 var(--sp-4); }
.tmpl-editorial .editorial-lead { font-size: 1.18rem; line-height: 1.5; color: var(--d-fg-2); font-style: italic; max-width: 700px; }
.tmpl-editorial .editorial-content { max-width: 760px !important; margin: 0 auto; padding: 0 var(--sp-3); font-size: 1.05rem; line-height: 1.7; }
.tmpl-editorial .editorial-content h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin-top: var(--sp-6); margin-bottom: var(--sp-3); color: var(--d-fg); }
.tmpl-editorial .editorial-content h3 { font-size: 1.25rem; color: var(--d-acc); margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
.tmpl-editorial .editorial-content figure.wp-block-image { margin: var(--sp-5) calc(-1 * var(--sp-3)); }
.tmpl-editorial .editorial-content figure.wp-block-image figcaption { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--d-fg-2); border-left: 2px solid var(--d-acc); }
.tmpl-editorial .editorial-content blockquote.wp-block-quote { border-left: 4px solid var(--d-acc); padding: var(--sp-2) var(--sp-4); font-size: 1.18rem; line-height: 1.5; color: var(--d-fg); font-style: italic; margin: var(--sp-5) 0; }

/* ─── Terminal (Tech, Monospace, Phosphor) ───────────────────────────── */
.tmpl-terminal { font-family: var(--ff-mono); padding: var(--sp-4) 0 var(--sp-7); background: #1e1611; }
.tmpl-terminal .terminal-header { max-width: 880px; margin: 0 auto var(--sp-4); padding: 0 var(--sp-3); }
.tmpl-terminal .terminal-prompt { font-family: var(--ff-mono); color: var(--d-acc); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); opacity: 0.7; }
.tmpl-terminal .terminal-prompt::before { content: ""; }
.tmpl-terminal .terminal-title { font-family: var(--ff-mono); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; color: var(--d-acc); text-shadow: 0 0 14px var(--d-acc-soft); margin: 0 0 var(--sp-3); letter-spacing: -.01em; }
.tmpl-terminal .terminal-meta { gap: var(--sp-2); font-size: var(--fs-xs); color: var(--d-fg-2); }
.tmpl-terminal .terminal-separator { border: 0; border-top: 1px dashed var(--d-acc-soft); margin: var(--sp-4) auto; max-width: 880px; }
.tmpl-terminal .terminal-content { max-width: 880px !important; margin: 0 auto; padding: 0 var(--sp-3); font-family: var(--ff-mono); font-size: var(--fs-sm); line-height: 1.65; color: var(--d-fg); }
.tmpl-terminal .terminal-content h2 { font-family: var(--ff-mono); color: var(--d-acc); text-shadow: 0 0 8px var(--d-acc-soft); font-size: 1.1rem; margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.tmpl-terminal .terminal-content h2::before { content: "## "; opacity: .5; }
.tmpl-terminal .terminal-content h3 { font-family: var(--ff-mono); color: var(--d-acc); font-size: 0.95rem; margin-top: var(--sp-4); }
.tmpl-terminal .terminal-content h3::before { content: "### "; opacity: .5; }
.tmpl-terminal .terminal-content pre, .tmpl-terminal .terminal-content code { background: #1e1611; border: 1px solid var(--d-line); padding: var(--sp-2); font-size: 0.82rem; }
.tmpl-terminal .terminal-content blockquote.wp-block-quote { border-left: 2px solid var(--d-acc); padding: var(--sp-1) var(--sp-3); color: var(--d-fg-2); font-size: 0.85rem; }
.tmpl-terminal .terminal-content blockquote.wp-block-quote p::before { content: "> "; color: var(--d-acc); opacity: .6; }
.tmpl-terminal .terminal-content figure.wp-block-image { max-width: 720px; margin: var(--sp-4) auto; border: 1px solid var(--d-line); padding: 4px; }
.tmpl-terminal .terminal-content figure.wp-block-image figcaption { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--d-acc-soft); text-align: left; padding: var(--sp-1) 0 0; }
.tmpl-terminal .terminal-content figure.wp-block-image figcaption::before { content: "// "; }
.tmpl-terminal .terminal-featured { max-width: 880px; margin: 0 auto var(--sp-4); padding: 0 var(--sp-3); }
.tmpl-terminal .terminal-featured img { width: 100%; border: 1px solid var(--d-line); padding: 4px; }