/*
Theme Name: Eva Christian Portfolio
Theme URI: https://eva-christian.de
Author: Eva Christian
Author URI: https://eva-christian.de
Description: Ein kreatives, frisches Portfolio-Theme für Kinderbuchautorin, Lektorin und Journalistin Eva Christian.
Version: 2.9.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eva-christian
Tags: portfolio, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ========================================
   CSS CUSTOM PROPERTIES
======================================== */
:root {
  /* Farbpalette */
  --sun:      #F5A623;
  --sun-l:    #FEF3DC;
  --sun-d:    #7a4f00;
  --sky:      #3AAEDC;
  --sky-l:    #E4F6FD;
  --sky-d:    #0a4f6e;
  --grass:    #5BBD72;
  --grass-l:  #E8F8ED;
  --grass-d:  #1e5c2d;
  --berry:    #E8527A;
  --berry-l:  #FDE8EE;
  --berry-d:  #6b1530;
  --plum:     #8B6DC8;
  --plum-l:   #F0EBFB;
  --plum-d:   #3d2773;
  --lilac:    #C8A8E8;
  --lilac-l:  #F5EEFF;
  --lilac-d:  #6b3da8;
  --ink:      #1C2B3A;
  --ink-soft: #3d5166;
  --ink-light:#7a92a6;
  --bg:       #FAFCFE;
  --bg-alt:   #F0F7FF;
  --bg-card:  #ffffff;
  --linie:    rgba(28,43,58,0.10);
  --linie-s:  rgba(28,43,58,0.20);

  /* Typografie */
  --ff: 'Fraunces', Georgia, serif;
  --fu: 'Nunito', system-ui, sans-serif;

  /* Abstände */
  --space-xs:  0.5rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Radien */
  --r4:  4px;
  --r8:  8px;
  --r12: 12px;
  --r20: 20px;
  --r99: 99px;

  /* Schatten */
  --shadow:   0 2px 12px rgba(28,43,58,0.09);
  --shadow-l: 0 6px 24px rgba(28,43,58,0.15);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   RESET & BASE
======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--fu);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sky); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--sky-d); }

/* Listen nur im Navigationsbereich und Theme-eigenen Bereichen zurücksetzen */
nav ul,
nav ol,
.main-navigation ul,
.footer-col ul,
.footer-legal,
.nav-links,
.tag-reihe,
.sprachen-badges,
.kauf-links,
.buecher-grid,
.kategorien-grid,
.zahlen-grid,
.stats-reihe,
.artikel-grid,
.lektorat-grid,
.illustration-gallery,
.rezensionen-liste,
.filter-wrap ul {
    list-style: none;
}

/* SEO-Meta-Block: nur für Crawler sichtbar */
.ec-seo-meta {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* ========================================
   GLOBALE BILD- UND OVERFLOW-FIXES
   Verhindert dass Bilder aus dem Viewport ragen
======================================== */
img {
  max-width: 100%;
  height: auto;
}

/* Entry-Content: alle Bilder responsiv */
.entry-content img,
.entry-content figure img,
.entry-content .wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Wortumbruch für langen Text */
.entry-content,
.ueber-grid,
.ueber-grid p,
.ueber-grid li,
.container--narrow p,
.container--narrow li {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Container nie breiter als Viewport */
.container,
.container--narrow,
.site-wrapper {
  max-width: 100%;
  box-sizing: border-box;
}

/* Seitenweiter overflow-x fix */
html {
  overflow-x: clip;  /* clip statt hidden – verhindert Scroll-Probleme auf iOS */
}

body {
  overflow-x: clip;
  max-width: 100vw;
}

/* Mobile: alle Float-Bilder im Content als Block */
@media (max-width: 768px) {
  .entry-content img,
  .entry-content figure,
  .entry-content .wp-block-image,
  .entry-content .alignright,
  .entry-content .alignleft,
  .entry-content .aligncenter {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    display: block;
  }
}

/* ========================================
   EDITOR-INHALT: Aufzählungen & Typografie
   (WordPress gibt Inhalte in .entry-content,
    the_content() direkt, oder in Containern aus)
======================================== */
.entry-content ul,
.entry-content ol,
.wp-block-list,
/* Alle ul/ol die NICHT in Theme-UI-Elementen sind */
.container--narrow ul:not([class]),
.container--narrow ol:not([class]),
.buch-detail ul:not([class]),
.buch-detail ol:not([class]),
[class*="detail"] ul:not([class]),
[class*="detail"] ol:not([class]),
.ueber-grid ul:not([class]),
.ueber-grid ol:not([class]) {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.2em;
}

.entry-content ol:not([class]),
.container--narrow ol:not([class]),
.buch-detail ol:not([class]),
.ueber-grid ol:not([class]) {
    list-style: decimal;
}

.entry-content li,
.container--narrow li,
.buch-detail li,
.ueber-grid li,
[class*="detail"] li {
    margin-bottom: 0.4em;
    line-height: 1.7;
    color: var(--ink-soft);
}

/* Verschachtelte Listen */
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

/* ========================================
   TYPOGRAFIE
======================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff);
  color: var(--ink);
  line-height: 1.2;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); }
h4 { font-size: 1.15rem; }

/* Abstände im Editorinhalt: nur gezielt wo nötig */
p { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }
.entry-content p   { margin-bottom: 1.2em; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child  { margin-bottom: 0; }

/* Abstand über Überschriften nur nach Fließtext */
.entry-content p  + h2,
.entry-content ul + h2,
.entry-content ol + h2 { margin-top: 1.5em; }

.entry-content p  + h3,
.entry-content ul + h3,
.entry-content ol + h3 { margin-top: 1.2em; }

.entry-content p  + h4,
.entry-content ul + h4,
.entry-content ol + h4 { margin-top: 1em; }

/* H3 direkt nach H2 oder H3: kompakter */
.entry-content h2 + h3 { margin-top: 0.35em; }
.entry-content h3 + h3 { margin-top: 0.25em; }


.lead {
  font-size: 1.1rem;
  color: var(--ink-soft);
  line-height: 1.8;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fu);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--r99);
}

.eyebrow--sun    { background: var(--sun-l);   color: var(--sun-d); }
.eyebrow--sky    { background: var(--sky-l);   color: var(--sky-d); }
.eyebrow--grass  { background: var(--grass-l); color: var(--grass-d); }
.eyebrow--berry  { background: var(--berry-l); color: var(--berry-d); }
.eyebrow--plum   { background: var(--plum-l);  color: var(--plum-d); }
.eyebrow--white  { background: rgba(255,255,255,.2); color: white; }

/* ========================================
   LAYOUT
======================================== */
.container        { width: min(100%, 1200px); margin-inline: auto; padding-inline: var(--space-l); }
.container--narrow{ width: min(100%, 800px);  margin-inline: auto; padding-inline: var(--space-l); }
.container--wide  { width: min(100%, 1400px); margin-inline: auto; padding-inline: var(--space-l); }

.section        { padding-block: var(--space-2xl); }
.section--alt   { background: var(--bg-alt); }
.section--sky   { background: var(--sky); }
.section--grass { background: var(--grass); }
.section--berry { background: var(--berry); }
.section--ink   { background: var(--ink); color: var(--bg); }

.section--ink h1,
.section--ink h2,
.section--ink h3 { color: var(--bg); }

/* ========================================
   BUTTONS
======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fu);
  font-size: 0.875rem;
  font-weight: 800;
  padding: 0.7rem 1.5rem;
  border-radius: var(--r99);
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.btn-primary   { background: var(--sky);  color: white; border-color: var(--sky); }
.btn-primary:hover { background: var(--sky-d); border-color: var(--sky-d); color: white; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(58,174,220,.3); }

.btn-outline   { background: transparent; color: var(--sky-d); border-color: var(--sky); }
.btn-outline:hover { background: var(--sky-l); transform: translateY(-2px); }

.btn-ghost     { background: transparent; color: white; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ========================================
   CHECKBOX-HACK NAVIGATION
   Funktioniert in allen Browsern ohne JS
======================================== */

/* Checkbox verstecken */
.nav-checkbox {
  display: none;
}

/* Hamburger-Button: nur auf Mobile */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  z-index: 200;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Overlay-Label: unsichtbar, überdeckt Seite wenn Menü offen */
.nav-overlay-label {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28,43,58,.45);
  z-index: 104;
  cursor: pointer;
}

@media (max-width: 768px) {

  /* Hamburger anzeigen – mit hellem Hintergrund für Dark Mode */
  .nav-hamburger {
    display: flex;
    background: var(--bg);
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 0 0 1px var(--linie);
  }

  /* Hamburger-Striche immer sichtbar */
  .nav-hamburger span {
    background: var(--ink);
  }

  /* Desktop-Toggle verstecken */
  .menu-toggle { display: none !important; }

  /* Menü-Panel: volle Höhe garantiert – auch in Safari iOS */
  .main-navigation {
    position: fixed;
    top: 0;
    right: 0;
    width: min(280px, 80vw);
    height: 100vh;              /* Fallback */
    height: 100dvh;             /* Safari iOS Fix – dynamic viewport height */
    background: var(--bg);
    box-shadow: -6px 0 32px rgba(28,43,58,.25);
    z-index: 105;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.75rem;
    transform: translateX(110%);
    transition: transform 0.3s ease;
    box-sizing: border-box;
  }

  /* Menü-Liste: Block statt Flex */
  .main-navigation ul {
    display: block !important;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .main-navigation li {
    display: block;
    width: 100%;
  }

  .main-navigation a {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;        /* Kompakter – alle 8 Punkte passen */
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .main-navigation a:hover {
    background: var(--sky-l);
    color: var(--sky-d);
  }

  /* Wenn Checkbox gecheckt: Menü einblenden */
  .nav-checkbox:checked ~ .nav-overlay-label {
    display: block;
  }

  .nav-checkbox:checked ~ .main-navigation {
    transform: translateX(0);
  }

  /* Hamburger → X wenn offen */
  .nav-checkbox:checked ~ .nav-hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav-checkbox:checked ~ .nav-hamburger span:nth-child(2) {
    opacity: 0;
  }
  .nav-checkbox:checked ~ .nav-hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

}

/* Dark Mode: Hamburger-Striche weiß */
@media (prefers-color-scheme: dark) {
  .nav-hamburger span {
    background: #ffffff;
  }
  .nav-hamburger {
    background: rgba(255,255,255,0.1);
    box-shadow: none;
  }
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,252,254,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--linie);
  padding-block: 0.75rem;
  transition: box-shadow var(--transition);
}

.site-header.scrolled { box-shadow: var(--shadow); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-mark {
  width: 38px;
  height: 38px;
  background: var(--sky);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff);
  font-size: 1rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  transition: background var(--transition);
}

.site-logo:hover .logo-mark { background: var(--sky-d); }

.logo-text { font-family: var(--ff); font-size: 1.1rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.logo-sub  { font-size: 0.68rem; font-weight: 600; color: var(--ink-light); letter-spacing: 0.07em; text-transform: uppercase; }

.main-navigation ul { display: flex; gap: 2px; }

.main-navigation a {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--r8);
  color: var(--ink-soft);
  transition: all var(--transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  background: var(--sky-l);
  color: var(--sky-d);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: all var(--transition);
  transform-origin: center;
  border-radius: 2px;
}

.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ========================================
   PAGE HERO (Innenseiten)
======================================== */
.page-hero {
  padding-block: var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero--sky   { background: var(--sky); }
.page-hero--grass { background: var(--grass); }
.page-hero--berry { background: var(--berry); }
.page-hero--plum  { background: var(--plum); }
.page-hero--ink   { background: var(--ink); }

.page-hero .deco-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}

.page-hero .container { position: relative; z-index: 1; }

/* Keine top-Margins bei Überschriften in UI-Komponenten */
.page-hero h1,
.leistungs-karte h3,
.buch-karte-titel,
.zahl-kachel .zahl,
.artikel-inhalt h3,
.rezension-karte h3,
.rezension-header h3,
.rez-meta h3,
.kategorie-kachel .kat-name,
.stats-streifen-text h2,
.footer-col h4,
.footer-brand .footer-logo-text,
.filter-label,
.logo-text,
.kontakt-info h2,
.kontakt-form h3,
.kami-info-box h4,
.section-header h2,
.lesungen-box h3 {
  margin-top: 0;
}

.page-hero h1    { color: white; margin-bottom: 0.5rem; }
.page-hero .lead { color: rgba(255,255,255,0.78); margin-inline: auto; max-width: 560px; }

/* ========================================
   HERO (STARTSEITE)
======================================== */
.hero {
  background: var(--bg-alt);
  padding-block: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-l);
  align-items: center; /* center statt stretch */
}

.hero-books-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  /* kein min-height:100% mehr */
}

/* Wenn ein echtes Foto eingebunden ist */
.hero-books-stack > img {
  width: 100%;
  height: auto;          /* KEIN height:100% */
  max-height: 560px;
  object-fit: contain;
  object-position: center center;
  border-radius: var(--r12);
  background: transparent;
  display: block;
}

/* Buchcover-Karten (Fallback ohne Foto) */
.hero-books-stack-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.hero-book {
  border-radius: var(--r12);
  box-shadow: var(--shadow-l);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-family: var(--ff);
  font-size: 0.75rem;
  color: rgba(255,255,255,.85);
  text-align: center;
  font-weight: 600;
  line-height: 1.3;
  transition: transform var(--transition);
  overflow: hidden;
}

.hero-book img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-book:first-child { aspect-ratio: 2/3; transform: rotate(-2.5deg); }
.hero-book:last-child  { aspect-ratio: 2/3; transform: rotate(2deg); margin-top: 20px; }
.hero-book:hover { transform: rotate(0) scale(1.04) !important; }

/* ========================================
   KATEGORIEN-KACHELN
======================================== */
.kategorien-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

.kategorie-kachel {
  border-radius: var(--r12);
  padding: 1.2rem 1rem;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  display: block;
}

.kategorie-kachel:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }

.kategorie-kachel .kat-icon  { font-size: 1.6rem; margin-bottom: 0.5rem; display: block; }
.kategorie-kachel .kat-name  { font-size: 0.9rem; font-weight: 800; margin-bottom: 3px; line-height: 1.2; }
.kategorie-kachel .kat-count { font-size: 0.82rem; font-weight: 700; opacity: 0.85; }
.kategorie-kachel .kat-sub   { font-size: 0.78rem; opacity: 0.75; line-height: 1.4; margin-top: 2px; font-weight: 400; }

.kat--sky   { background: var(--sky-l);   }  .kat--sky   .kat-name, .kat--sky   .kat-count, .kat--sky   .kat-sub { color: var(--sky-d); }
.kat--grass { background: var(--grass-l); }  .kat--grass .kat-name, .kat--grass .kat-count, .kat--grass .kat-sub { color: var(--grass-d); }
.kat--sun   { background: var(--sun-l);   }  .kat--sun   .kat-name, .kat--sun   .kat-count, .kat--sun   .kat-sub { color: var(--sun-d); }
.kat--berry { background: var(--berry-l); }  .kat--berry .kat-name, .kat--berry .kat-count, .kat--berry .kat-sub { color: var(--berry-d); }
.kat--lilac { background: var(--lilac-l); }  .kat--lilac .kat-name, .kat--lilac .kat-count, .kat--lilac .kat-sub { color: var(--lilac-d); }
.kat--plum  { background: var(--plum-l);  }  .kat--plum  .kat-name, .kat--plum  .kat-count, .kat--plum  .kat-sub { color: var(--plum-d); }

/* ========================================
   BUCHGRID – gemischte Formate
======================================== */
.buecher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-s);
}

.buch-karte {
  border-radius: var(--r12);
  overflow: hidden;
  background: white;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

.buch-karte:hover { transform: translateY(-5px) rotate(-0.5deg); box-shadow: var(--shadow-l); }

/* Kamishibai-Karten belegen 2 Spalten */
.buch-karte--kami,
.buch-item--kami  { grid-column: span 2; }

/* ========================================
   BUCHCOVER IM GRID
======================================== */

/* Das <img>-Tag selbst: natürliches Format, kein Beschnitt */
.buch-karte img.buch-cover-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Placeholder-Div (wenn kein Bild): einheitliches Format */
.buch-cover-placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-family: var(--ff);
  font-size: 0.75rem;
  color: rgba(255,255,255,.85);
  text-align: center;
  font-weight: 600;
  line-height: 1.35;
}

.buch-cover-placeholder--v { aspect-ratio: 2/3; }
.buch-cover-placeholder--h { aspect-ratio: 4/3; }

/* Alte Klassen – nur für Rückwärtskompatibilität, keine Verzerrung */
.buch-cover {
  width: 100%;
  display: block;
  font-family: var(--ff);
  font-size: 0.75rem;
  color: rgba(255,255,255,.85);
  text-align: center;
  font-weight: 600;
  line-height: 1.35;
}

.buch-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.buch-cover--v { aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; padding: 10px; }
.buch-cover--h { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; padding: 10px; }
/* WICHTIG: wenn .buch-cover--v/.buch-cover--h auf einem <img> landet → kein flex, kein Beschnitt */
img.buch-cover--v, img.buch-cover--h {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: unset;
  padding: 0;
}

.buch-karte-label { background: white; padding: 8px 10px; }
.buch-karte-titel { font-size: 0.78rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.buch-karte-meta  { font-size: 0.72rem; color: var(--ink-light); margin-top: 2px; }

.buch-badge-neu {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--berry);
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r99);
  z-index: 5;
}

/* ========================================
   FILTER-LEISTE (3 EBENEN)
======================================== */
.filter-wrap {
  background: white;
  border-radius: var(--r12);
  border: 1.5px solid #e0ecf6;
  margin-bottom: var(--space-l);
  overflow: hidden;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #e8f2fa;
}

.filter-row:last-child { border-bottom: none; }

.filter-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  min-width: 70px;
  flex-shrink: 0;
}

.filter-btn {
  font-family: var(--fu);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 13px;
  border: 2px solid #dde8f4;
  border-radius: var(--r99);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--transition);
}

.filter-btn:hover,
.filter-btn.aktiv {
  border-color: var(--sky);
  color: var(--sky-d);
  background: var(--sky-l);
}

/* ========================================
   EINZELNE BUCHSEITE
======================================== */
.buch-detail {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-xl);
  align-items: start;
  padding-block: var(--space-2xl);
}

.buch-detail--kami {
  grid-template-columns: 1fr;
}

.buch-detail--kami .buch-detail-cover-kami {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: var(--space-l);
}

.buch-detail-cover {
  position: sticky;
  top: calc(70px + var(--space-m));
}

/* Buchcover auf Einzelseiten – immer natürliches Format, kein weißes Feld */
.buch-cover-bild {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r12);
  box-shadow: var(--shadow-l);
  /* KEIN object-fit, KEIN aspect-ratio – Bild bestimmt seine eigene Höhe */
}

/* Placeholder-Divs (kein Bild vorhanden): dann festes Format */
div.buch-cover-bild--h { aspect-ratio: 4/3; }
div.buch-cover-bild--v { aspect-ratio: 2/3; }

.kauf-links { margin-top: var(--space-s); display: flex; flex-direction: column; gap: 6px; }

.kauf-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.6rem 1rem;
  border-radius: var(--r8);
  font-family: var(--fu);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  transition: all var(--transition);
  border: 2px solid transparent;
}

.kauf-link--amazon     { background: var(--sun);     color: var(--sun-d); }
.kauf-link--amazon:hover { background: #e8950d;      color: var(--sun-d); }
.kauf-link--thalia     { background: var(--sky);     color: white; }
.kauf-link--thalia:hover { background: var(--sky-d); color: white; }
.kauf-link--hugendubel { background: #b91c1c;        color: white; }
.kauf-link--hugendubel:hover { background: #991b1b;  color: white; }
.kauf-link--buecherde  { background: #166534;        color: white; }
.kauf-link--buecherde:hover  { background: #14532d;  color: white; }
.kauf-link--ebookde    { background: #1e3a5f;        color: white; }
.kauf-link--ebookde:hover    { background: #162d4a;  color: white; }
.kauf-link--galaxus    { background: #6d28d9;        color: white; }
.kauf-link--galaxus:hover    { background: #5b21b6;  color: white; }
.kauf-link--verlag     { background: var(--grass-l); color: var(--grass-d); border-color: var(--grass); }
.kauf-link--verlag:hover { background: var(--grass); color: white; }
.kauf-link--dnb        { background: white;          color: var(--ink); border-color: var(--linie-s); }
.kauf-link--dnb:hover  { border-color: var(--sky);   color: var(--sky-d); }

/* Tags */
.tag-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-s); }

.tag {
  font-family: var(--fu);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--r99);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tag--sky   { background: var(--sky-l);   color: var(--sky-d); }
.tag--grass { background: var(--grass-l); color: var(--grass-d); }
.tag--sun   { background: var(--sun-l);   color: var(--sun-d); }
.tag--berry { background: var(--berry-l); color: var(--berry-d); }
.tag--plum  { background: var(--plum-l);  color: var(--plum-d); }

/* Metadaten-Reihe */
.meta-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-s);
  border-bottom: 2px solid var(--linie);
}

.meta-item .meta-key {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
}

.meta-item .meta-val { font-size: 0.9rem; font-weight: 700; color: var(--ink); }

/* Co-Autorenschaft */
.co-autor-hinweis {
  background: var(--sun-l);
  border-radius: var(--r8);
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: var(--sun-d);
  font-weight: 700;
  margin-bottom: var(--space-s);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Mehrsprachig */
.sprachen-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-s); }
.sprache-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r4);
  background: var(--plum-l);
  color: var(--plum-d);
  border: 1px solid rgba(139,109,200,.2);
}

/* Kamishibai-Info */
.kami-info-box {
  background: var(--grass-l);
  border-radius: var(--r12);
  padding: var(--space-m);
  border: 1.5px solid var(--grass);
  margin-top: var(--space-m);
}

.kami-info-box h4 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grass-d); margin-bottom: 0.5rem; }
.kami-info-box p  { font-size: 0.88rem; color: var(--grass-d); line-height: 1.65; }

/* Rezensionen auf Buchseite */
.rezensionen-buch { margin-top: var(--space-l); }

.rezension-item {
  border-left: 3px solid var(--sun);
  border-radius: 0;
  padding: var(--space-s) var(--space-m);
  background: var(--sun-l);
  margin-bottom: var(--space-s);
}

.rezension-item--sky  { border-color: var(--sky);  background: var(--sky-l); }
.rezension-item--berry{ border-color: var(--berry); background: var(--berry-l); }

.rezension-item blockquote {
  font-family: var(--ff);
  font-size: 1rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 0.5rem;
}

/* Absätze innerhalb der Blockquote richtig darstellen */
.rezension-item blockquote p {
  margin-bottom: 0.65em;
  font-style: italic;
}
.rezension-item blockquote p:last-child { margin-bottom: 0; }

/* Headline vor dem Zitat */
.rez-headline {
  margin-bottom: 0.4rem;
}
.rez-headline strong {
  font-family: var(--ff);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

.rezension-item cite {
  font-family: var(--fu);
  font-size: 0.78rem;
  color: var(--sun-d);
  font-style: normal;
  font-weight: 700;
}

/* ========================================
   REZENSIONEN-ARCHIV
======================================== */
.rezensionen-liste { display: flex; flex-direction: column; gap: var(--space-m); }

.rezension-karte {
  background: white;
  border-radius: var(--r12);
  border: 1.5px solid #e0ecf6;
  padding: var(--space-l);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition);
}

.rezension-karte:hover { box-shadow: var(--shadow-l); }

.rezension-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-l);
  margin-bottom: var(--space-m);
}

/* Größeres Buchbild – natürliches Format, kein Beschnitt */
.rez-buch-thumb {
  width: 120px;
  flex-shrink: 0;
  border-radius: var(--r8);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.rez-buch-thumb img {
  width: 100%;
  height: auto;
  display: block;
  /* KEIN aspect-ratio, KEIN object-fit – natürliches Format */
}

.rez-buch-thumb-placeholder {
  width: 100%;
  aspect-ratio: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  font-family: var(--ff);
  font-size: 0.6rem;
  color: rgba(255,255,255,.8);
  text-align: center;
}

.rez-sterne { color: var(--sun); font-size: 1.1rem; margin-bottom: 6px; }

/* Quellen-Zeile mit Link und Autor */
.rez-meta-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 4px;
  font-family: var(--fu);
  font-size: 0.82rem;
  color: var(--ink-light);
}

.rez-quelle { color: var(--ink-light); }

.rez-quelle-link {
  color: var(--sky);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition);
}
.rez-quelle-link:hover { color: var(--sky-d); text-decoration: underline; }

.rez-autor {
  color: var(--ink-light);
}
.rez-autor::before { content: '· '; }

.rez-ueberschrift {
  font-family: var(--ff);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: var(--space-s) 0 0.25rem;
  line-height: 1.35;
}

.rez-karte-text {
  font-family: var(--ff);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.7;
  border-left: 2.5px solid var(--sky);
  padding-left: var(--space-s);
  margin-top: var(--space-s);
}

/* Link zur Buchseite am Ende */
.rez-buch-link-wrap {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--linie);
}

.rez-buch-link {
  font-family: var(--fu);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sky);
  text-decoration: none;
  transition: color var(--transition);
}

.rez-buch-link:hover { color: var(--sky-d); }

/* ========================================
   LEKTORAT PROJEKT-KARTEN
======================================== */
.lektorat-beispiele-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-l);
}

.lektorat-projekt-karte {
    background: white;
    border-radius: var(--r12);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
}

.lektorat-projekt-karte:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-l);
}

.lektorat-projekt-bild {
    width: 100%;
    overflow: hidden;
    background: var(--bg-alt);
}

.lektorat-projekt-bild img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    display: block;
    padding: 0.75rem;
    transition: transform var(--transition);
}

.lektorat-projekt-karte:hover .lektorat-projekt-bild img {
    transform: scale(1.03);
}

.lektorat-projekt-inhalt {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lektorat-projekt-inhalt h3 {
    font-size: 1.15rem;
    margin: 0;
}

.lektorat-projekt-inhalt h3 a {
    color: var(--ink);
    text-decoration: none;
    transition: color var(--transition);
}

.lektorat-projekt-inhalt h3 a:hover {
    color: var(--sky);
}

.lektorat-projekt-excerpt {
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.lektorat-projekt-link {
    font-family: var(--fu);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--grass-d);
    text-decoration: none;
    margin-top: auto;
    transition: color var(--transition);
}

.lektorat-projekt-link:hover {
    color: var(--grass);
}


/* ========================================
   LEKTORAT EINZELSEITE – Zweispaltenlayout
======================================== */
.lektorat-single-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--space-xl);
    align-items: start;
}

.lektorat-single-bild {
    position: sticky;
    top: calc(70px + var(--space-m));
}

.lektorat-single-bild img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r12);
    box-shadow: var(--shadow-l);
}

/* Beitragsbild MIT Kontur */
.lektorat-single-bild.mit-kontur img {
    outline: 3px solid var(--sky);
    outline-offset: 6px;
}

/* Eingebundene Bilder im Fließtext MIT Kontur */
.entry-content .mit-kontur img,
.entry-content img.mit-kontur {
    outline: 3px solid var(--sky);
    outline-offset: 5px;
    border-radius: var(--r8);
}

@media (max-width: 768px) {
    .lektorat-single-layout {
        grid-template-columns: 1fr;
    }
    .lektorat-single-bild {
        position: static;
        max-width: 240px;
        margin-inline: auto;
    }
}

/* ========================================
   LEKTORAT
======================================== */
/* lektorat-grid: flexibel für verschiedene Kontexte */
.lektorat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-m);
}

/* Startseite + Über-mich: immer 3 gleichbreite Spalten */
.lektorat-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Über-mich mit 4 Kacheln */
.lektorat-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .lektorat-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .lektorat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .lektorat-grid--3,
  .lektorat-grid--4 { grid-template-columns: 1fr; }
}

.leistungs-karte {
  background: white;
  padding: var(--space-l);
  border-radius: var(--r12);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--sky);
  transition: transform var(--transition), box-shadow var(--transition);
}

.leistungs-karte:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.leistungs-karte--grass { border-top-color: var(--grass); }
.leistungs-karte--sun   { border-top-color: var(--sun); }
.leistungs-karte--berry { border-top-color: var(--berry); }
.leistungs-karte--plum  { border-top-color: var(--plum); }

.leistungs-icon { font-size: 2rem; margin-bottom: var(--space-s); display: block; }

/* ========================================
   BUCH-ZITATKASTEN
======================================== */
.buch-zitat-kasten {
    background: var(--sky-l);
    border-left: 4px solid var(--sky);
    border-radius: 0 var(--r12) var(--r12) 0;
    padding: var(--space-l);
    padding-top: calc(var(--space-l) + 1.5rem); /* Platz für das Anführungszeichen */
    margin-bottom: var(--space-l);
    position: relative;
}

.buch-zitat-kasten::before {
    content: '\201E';
    font-family: var(--ff);
    font-size: 4rem;
    color: var(--sky);
    opacity: 0.4;
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    line-height: 1;
    pointer-events: none;
}

.buch-zitat-text {
    font-family: var(--ff);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--sky-d);
    line-height: 1.75;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ========================================
   JOURNALISMUS – LISTE (flexibles Bildformat)
======================================== */
.artikel-liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.artikel-listeneintrag {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-l);
    align-items: start;
    background: white;
    border-radius: var(--r12);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition);
}

.artikel-listeneintrag:hover {
    box-shadow: var(--shadow-l);
    transform: translateY(-3px);
}

.artikel-bild-wrap {
    display: block;
    overflow: hidden;
    /* Kein festes Seitenverhältnis – Bild bestimmt die Höhe */
    align-self: stretch;
}

.artikel-bild-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition);
}

.artikel-listeneintrag:hover .artikel-bild-wrap img {
    transform: scale(1.03);
}

.artikel-listeneintrag-inhalt {
    padding: var(--space-l) var(--space-l) var(--space-l) 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Wenn kein Bild: volle Breite */
.artikel-listeneintrag:not(:has(.artikel-bild-wrap)) {
    grid-template-columns: 1fr;
}

.artikel-listeneintrag:not(:has(.artikel-bild-wrap)) .artikel-listeneintrag-inhalt {
    padding: var(--space-l);
}

.artikel-listeneintrag-titel {
    font-family: var(--ff);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}

.artikel-listeneintrag-titel a {
    color: var(--ink);
    text-decoration: none;
    transition: color var(--transition);
}

.artikel-listeneintrag-titel a:hover { color: var(--sky); }

.artikel-listeneintrag-text {
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0;
}

.artikel-listeneintrag-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--linie);
    font-family: var(--fu);
    font-size: 0.8rem;
    color: var(--ink-light);
}

.artikel-weiter {
    font-weight: 700;
    color: var(--sky);
    text-decoration: none;
    transition: color var(--transition);
}

.artikel-weiter:hover { color: var(--sky-d); }

/* Alte Grid-Karten (Fallback, falls noch irgendwo referenziert) */
.artikel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-m); }
.artikel-karte { background: white; border-radius: var(--r12); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.artikel-karte:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.artikel-bild { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.artikel-inhalt { padding: var(--space-m); flex: 1; display: flex; flex-direction: column; }
.artikel-medium { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); margin-bottom: 0.4rem; }
.artikel-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--space-s); border-top: 1px solid var(--linie); font-size: 0.78rem; color: var(--ink-light); }

/* ========================================
   ILLUSTRATIONEN – KARTEN-GRID MIT OVERLAY
======================================== */
.illu-karten-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
}

.illu-karte {
    display: block;
    position: relative;
    border-radius: var(--r12);
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition);
    background: var(--bg-alt);
}

.illu-karte:hover {
    box-shadow: var(--shadow-l);
    transform: translateY(-3px);
}

.illu-karte-bild img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition);
}

.illu-karte:hover .illu-karte-bild img {
    transform: scale(1.04);
}

.illu-karte-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(26,16,37,.88) 0%, rgba(26,16,37,.5) 55%, transparent 100%);
    padding: var(--space-m);
    transform: translateY(3px);
    transition: transform var(--transition);
}

.illu-karte:hover .illu-karte-overlay {
    transform: translateY(0);
}

.illu-karte-titel {
    font-family: var(--ff);
    font-size: 1rem;
    font-weight: 700;
    color: white;
    line-height: 1.3;
    margin: 0 0 4px;
}

.illu-karte-sub {
    font-family: var(--fu);
    font-size: 0.78rem;
    color: rgba(255,255,255,.78);
    line-height: 1.4;
    margin: 0;
    font-style: italic;
}

@media (max-width: 900px) {
    .illu-karten-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .illu-karten-grid { grid-template-columns: 1fr; }
}

/* ========================================
   ILLUSTRATIONEN – EINZELSEITE (Bild + Text nebeneinander)
======================================== */
.illu-single-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
    margin-bottom: var(--space-l);
}

.illu-single-bild img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r12);
    box-shadow: var(--shadow-l);
}

@media (max-width: 768px) {
    .illu-single-layout {
        grid-template-columns: 1fr;
    }
}

/* Alte illu-liste Klassen als Fallback */
.illu-liste { display: flex; flex-direction: column; gap: var(--space-l); }
.illu-eintrag { display: grid; grid-template-columns: 1fr 1fr; gap:0; background:white; border-radius:var(--r12); overflow:hidden; box-shadow:var(--shadow); }
.illu-eintrag-bild { display:block; overflow:hidden; background:var(--bg-alt); }
.illu-eintrag-bild img { width:100%; height:auto; display:block; padding:var(--space-s); }
.illu-eintrag-inhalt { padding:var(--space-xl); display:flex; flex-direction:column; gap:var(--space-s); justify-content:center; }
.illu-eintrag-titel { font-family:var(--ff); font-size:1.4rem; font-weight:700; margin:0; }
.illu-eintrag-titel a { color:var(--ink); text-decoration:none; }
.illu-eintrag-text { font-size:.92rem; color:var(--ink-soft); line-height:1.7; margin:0; }
.illu-eintrag-link { font-family:var(--fu); font-size:.82rem; font-weight:700; color:var(--plum); text-decoration:none; margin-top:var(--space-s); }

/* ========================================
   ÜBER MICH
======================================== */
.ueber-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Bereits ab 900px einspaltig – verhindert Overflow auf Tablets und Phones */
@media (max-width: 900px) {
  .ueber-grid {
    grid-template-columns: 1fr;
  }
  .ueber-foto {
    position: static !important;
    max-width: 300px;
    margin-inline: auto;
    margin-bottom: var(--space-m);
  }
}

.ueber-foto {
  border-radius: var(--r20);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  position: sticky;
  top: calc(70px + var(--space-m)); /* unter dem sticky Header bleiben */
}

.ueber-foto img { width: 100%; height: auto; display: block; }

.zahlen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s); margin-top: var(--space-xl); }

.zahl-kachel {
  background: white;
  border-radius: var(--r12);
  padding: var(--space-m);
  text-align: center;
  box-shadow: var(--shadow);
}

.zahl-kachel .zahl { font-family: var(--ff); font-size: 2.5rem; font-weight: 700; color: var(--sky); display: block; line-height: 1; }
.zahl-kachel .zahl-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-light); margin-top: 0.4rem; display: block; }

/* Lesungen-Box */
.lesungen-box {
  background: var(--sky-l);
  border-radius: var(--r12);
  padding: var(--space-l);
  margin-top: var(--space-l);
  border: 1.5px solid rgba(58,174,220,.25);
}

.lesungen-box h3 { font-size: 1.1rem; color: var(--sky-d); margin-bottom: 0.5rem; }
.lesungen-box p  { font-size: 0.9rem; color: var(--sky-d); }

/* ========================================
   KONTAKT
======================================== */
.kontakt-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-l); align-items: start; }

.kontakt-info {
  background: var(--ink);
  border-radius: var(--r12);
  padding: var(--space-xl);
  color: white;
}

.kontakt-info h2 { color: white; margin-bottom: var(--space-s); }
.kontakt-info .lead { color: rgba(255,255,255,.65); margin-bottom: var(--space-l); }

.kontakt-details { border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--space-m); display: flex; flex-direction: column; gap: var(--space-m); }

.kontakt-detail-item { display: flex; gap: var(--space-s); align-items: flex-start; }
.kontakt-detail-item .k-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }

.kontakt-form {
  background: white;
  border-radius: var(--r12);
  padding: var(--space-xl);
  box-shadow: var(--shadow-l);
  border: 1.5px solid #e0ecf6;
}

.form-gruppe { margin-bottom: var(--space-m); }

.form-gruppe label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 0.4rem;
}

.form-gruppe input,
.form-gruppe select,
.form-gruppe textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid #dde8f4;
  border-radius: var(--r8);
  font-family: var(--fu);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--bg-alt);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-gruppe input:focus,
.form-gruppe select:focus,
.form-gruppe textarea:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(58,174,220,.15);
}

.form-gruppe textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }

/* ========================================
   BREADCRUMB
======================================== */
.breadcrumb {
  background: var(--bg-alt);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
}

.breadcrumb nav {
  font-family: var(--fu);
  font-size: 0.78rem;
  color: var(--ink-light);
}

.breadcrumb a { color: var(--ink-light); }
.breadcrumb a:hover { color: var(--sky); }
.breadcrumb .sep { margin-inline: 0.4rem; }

/* ========================================
   SECTION HEADER
======================================== */
.section-header { margin-bottom: var(--space-xl); }
.section-header--center { text-align: center; }
.section-header--center .section-sub { margin-inline: auto; }
.section-header .eyebrow { margin-bottom: var(--space-s); }
.section-header h2 { margin-bottom: 0.5rem; }
.section-sub { color: var(--ink-light); font-size: 0.95rem; max-width: 560px; }

/* ========================================
   STREIFEN (STATS)
======================================== */
.stats-streifen {
  background: var(--sky);
  padding-block: var(--space-l);
}

/* Innerer Wrapper – identisch mit .container */
.stats-streifen-inner {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding-inline: var(--space-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  flex-wrap: wrap;
}

.stats-streifen-text h2 { font-family: var(--ff); color: white; font-size: 1.5rem; margin-bottom: 0.4rem; }
.stats-streifen-text p  { color: rgba(255,255,255,.78); font-size: 0.9rem; max-width: 360px; }

.stats-reihe { display: flex; gap: var(--space-l); }
.stat-item { text-align: center; }
.stat-item .stat-zahl { font-family: var(--ff); font-size: 2.4rem; font-weight: 700; color: white; display: block; }
.stat-item .stat-label { font-size: 0.72rem; color: rgba(255,255,255,.7); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

/* ========================================
   FOOTER
======================================== */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.55);
  padding-block: var(--space-2xl);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: var(--space-m);
}

.footer-brand .footer-logo-text { font-family: var(--ff); font-size: 1.3rem; font-weight: 700; color: white; display: block; margin-bottom: 0.4rem; }
.footer-brand .footer-logo-text span { color: var(--sky); }
.footer-brand p { font-size: 0.82rem; color: rgba(255,255,255,.35); max-width: 220px; line-height: 1.6; }

.footer-col h4 { font-family: var(--fu); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: var(--space-s); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a { font-size: 0.85rem; color: rgba(255,255,255,.45); transition: color var(--transition); }
.footer-col a:hover { color: var(--sky); }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-s); }
.footer-bottom p { font-family: var(--fu); font-size: 0.72rem; color: rgba(255,255,255,.25); margin: 0; }
.footer-legal { display: flex; gap: var(--space-m); }
.footer-legal a { font-family: var(--fu); font-size: 0.72rem; color: rgba(255,255,255,.25); transition: color var(--transition); }
.footer-legal a:hover { color: var(--sky); }

/* ========================================
   UTILITIES
======================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.mt-l  { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }

/* ========================================
   ANIMATIONEN
======================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-in { animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-in--d1 { animation-delay: 0.1s; }
.animate-in--d2 { animation-delay: 0.2s; }
.animate-in--d3 { animation-delay: 0.3s; }

/* ========================================
   RESPONSIVE
======================================== */

/* Tablet (<=1024px) */
@media (max-width: 1024px) {
  /* Hero: einspaltig, Bild unter dem Text */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: start;  /* NICHT stretch – verhindert riesigen weißen Bereich */
  }
  .hero-books-stack {
    display: block;
    max-width: 340px;
    margin-inline: auto;
  }
  .hero-books-stack > img {
    width: 100%;
    height: auto !important;
    max-height: 340px;
    object-fit: contain;
    display: block;
  }

  /* Über mich: einspaltig, Foto oben scrollend */
  .ueber-grid {
    grid-template-columns: 1fr;
  }
  .ueber-foto {
    position: static !important;  /* Sticky aufheben */
    max-width: 320px;
    margin-inline: auto;
    margin-bottom: var(--space-m);
  }

  /* Rest */
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .buch-detail { grid-template-columns: 220px 1fr; }
  .kontakt-layout { grid-template-columns: 1fr; }
  .kategorien-grid { grid-template-columns: repeat(3, 1fr); }
  .lektorat-beispiele-grid { grid-template-columns: 1fr; }
  .illustration-gallery { columns: 2; }
  .illu-single-layout { grid-template-columns: 1fr; }
  .artikel-listeneintrag { grid-template-columns: 180px 1fr; }
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
  /* menu-toggle wird durch nav-hamburger ersetzt */

  /* Hero: Bild sichtbar, natürliches Format */
  .hero-books-stack {
    max-width: 260px;
    margin-inline: auto;
    margin-top: var(--space-m);
  }
  .hero-books-stack > img {
    width: 100% !important;
    height: auto !important;
    max-height: 320px;
    object-fit: contain !important;
    display: block !important;
  }

  /* Über mich: Foto oben, scrollt mit */
  .ueber-grid { grid-template-columns: 1fr; }
  .ueber-foto {
    position: static !important;
    max-width: 220px;
    margin-inline: auto;
    margin-bottom: var(--space-m);
  }

  /* Buch-Detail */
  .buch-detail { grid-template-columns: 1fr; }
  .buch-detail-cover { position: static; max-width: 200px; margin-inline: auto; }

  /* Lektorat + Journalismus Intro: alle zweispaltigen Divs einspaltig */
  .lektorat-intro-grid { grid-template-columns: 1fr !important; }

  /* Artikel */
  .artikel-listeneintrag { grid-template-columns: 1fr; }
  .artikel-bild-wrap { max-height: 200px; overflow: hidden; }
  .artikel-listeneintrag-inhalt { padding: var(--space-m); }

  /* Illustration */
  .illu-single-layout { grid-template-columns: 1fr; }
  .lektorat-single-layout { grid-template-columns: 1fr; }
  .lektorat-single-bild { position: static; max-width: 240px; margin-inline: auto; }

  /* Statistiken */
  .zahlen-grid { grid-template-columns: 1fr 1fr; }
  .stats-streifen-inner { flex-direction: column; text-align: center; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-l); }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Sonstiges */
  .illustration-gallery { columns: 1; }
  .illu-karten-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .kat-buch-eintrag, .kat-buch-eintrag.kat-buch-eintrag--kami { grid-template-columns: 1fr; }
  .kat-buch-bild { padding: var(--space-s) var(--space-s) 0; }
  .kat-buch-inhalt { padding: var(--space-m); }
}

/* Klein-Mobile (<=480px) */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-s); }
  .zahlen-grid { grid-template-columns: 1fr; }
  .buecher-grid { grid-template-columns: repeat(2, 1fr); }
  .buch-karte--kami,
  .buch-item--kami  { grid-column: span 2; }
  .kategorien-grid { grid-template-columns: repeat(2, 1fr); }
  .illu-karten-grid { grid-template-columns: 1fr; }
}

/* ========================================
   LEKTORAT INTRO GRID
======================================== */
.lektorat-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* ========================================
   BUCHKATEGORIE-TAXONOMIE-SEITEN
======================================== */
.kat-buecher-liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

.kat-buch-eintrag {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--space-l);
    align-items: start;
    background: white;
    border-radius: var(--r12);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition);
}

.kat-buch-eintrag:hover {
    box-shadow: var(--shadow-l);
    transform: translateY(-3px);
}

/* Kamishibai-Einträge: breiteres Bild */
.kat-buch-eintrag.kat-buch-eintrag--kami {
    grid-template-columns: 240px 1fr;
}

.kat-buch-bild {
    display: block;
    overflow: hidden;
    background: var(--bg-alt);
    padding: var(--space-s);
    flex-shrink: 0;
}

.kat-buch-bild img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r8);
    transition: transform var(--transition);
}

.kat-buch-eintrag:hover .kat-buch-bild img {
    transform: scale(1.03);
}

.kat-buch-placeholder {
    aspect-ratio: 2/3;
    background: linear-gradient(135deg, var(--sky), var(--sky-d));
    border-radius: var(--r8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-family: var(--ff);
    font-size: 0.8rem;
    color: rgba(255,255,255,.8);
    text-align: center;
}

.kat-buch-inhalt {
    padding: var(--space-l) var(--space-l) var(--space-l) 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kat-buch-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.kat-buch-titel {
    font-family: var(--ff);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}

.kat-buch-titel a {
    color: var(--ink);
    text-decoration: none;
    transition: color var(--transition);
}

.kat-buch-titel a:hover { color: var(--sky); }

.kat-buch-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-family: var(--fu);
    font-size: 0.8rem;
    color: var(--ink-light);
}

.kat-buch-meta span + span::before {
    content: '·';
    margin-right: 0.75rem;
}

.kat-buch-excerpt {
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0;
}

.kat-buch-link {
    font-family: var(--fu);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sky);
    text-decoration: none;
    margin-top: auto;
    transition: color var(--transition);
    align-self: flex-start;
}

.kat-buch-link:hover { color: var(--sky-d); }

/* Auch für verlag- und zielgruppe-Taxonomien */
.tax-buch-grid { display: flex; flex-direction: column; gap: var(--space-l); }

@media (max-width: 640px) {
    .kat-buch-eintrag,
    .kat-buch-eintrag.kat-buch-eintrag--kami {
        grid-template-columns: 1fr;
    }
    .kat-buch-bild {
        padding: var(--space-s) var(--space-s) 0;
    }
    .kat-buch-inhalt {
        padding: var(--space-m);
    }
}

/* ========================================
   HIGHLIGHT-BEREICH (Neuerscheinung)
======================================== */
.highlight-section {
  padding-block-start: var(--space-xl);
  padding-block-end: var(--space-l); /* ~2/3 des alten Abstands */
}

.highlight-wrap {
  border-radius: var(--r20);
  overflow: hidden;
  display: grid;
}

.highlight-wrap--buch { grid-template-columns: 1fr 1.1fr; }
.highlight-wrap--kami { grid-template-columns: 1.1fr 1fr; }

/* Text-Seite */
.highlight-text {
  background: #fde8b0;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Bilder-Seite Basis */
.highlight-bilder {
  background: #fef9ec;
  box-sizing: border-box;
}

/* Bild-Wrapper */
.hl-img-wrap {
  overflow: hidden;
  background: #fef9ec;
  border-radius: var(--r8);
  display: block;
}

.hl-img-wrap img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ── KAMISHIBAI: Cover in linker Spalte mit Abstand ── */
.highlight-bilder--kami {
  padding: 1.75rem 1.75rem 0 1.75rem; /* oben/rechts/links = wie Text; unten variabel */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hl-cover-kami {
  width: 100%;
  /* Kein aspect-ratio: Bild bestimmt die Höhe selbst → keine Letterbox */
  border-radius: var(--r8);
}

.hl-cover-kami img {
  width: 100% !important;
  height: auto !important;    /* natürliche Proportionen, kein Leerraum oben/unten */
  object-fit: unset !important;
  border-radius: var(--r8) !important;
  display: block !important;
}

/* Bildkarten in der Textspalte */
.hl-karten-row {
  display: flex;
  gap: 10px;
  margin-top: .9rem;
}

.hl-karte {
  flex: 1;
  aspect-ratio: 4 / 3;
}

/* ── BUCH: Cover füllt rechte Spalte ── */
.highlight-bilder--buch {
  position: relative;  /* Anker für absolutes Cover */
  overflow: hidden;
  /* Kein height, kein display:flex – Grid stretch gibt dieser Spalte
     automatisch die Höhe der Textspalte. Cover trägt nichts zur
     Grid-Höhen-Berechnung bei, weil es absolut positioniert ist. */
}

.hl-cover-buch {
  position: absolute;
  inset: 1.75rem;      /* gleicher Abstand wie Text-Padding */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hl-cover-buch img {
  max-height: 100% !important;  /* nie höher als die Textspalte */
  width: auto !important;        /* Breite aus 2:3-Verhältnis */
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: var(--r8) !important;
}

/* Innenseiten in der Textspalte */
.hl-innen-row {
  display: flex;
  gap: 10px;
  margin-top: .9rem;
}

.hl-innen {
  flex: 1;
  aspect-ratio: 3 / 2;
}

/* ── Badge (Verlagsname) ── */
.highlight-badge {
  display: inline-block;
  background: #6b4407;
  color: #fef9ec;
  font-family: var(--fu);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: .5rem;
}

/* ── Überschrift: wie Abschnitts-h2 auf der Startseite ── */
.highlight-heading {
  font-family: var(--ff);
  font-size: 1.75rem;
  font-weight: 700;
  color: #6b4407;
  line-height: 1.2;
  margin: 0 0 .85rem;
}

/* ── Stichpunkte ── */
.highlight-punkte {
  list-style: none;
  padding: 0;
  margin: 0 0 .15rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.highlight-punkt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--ff);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #6b4407;
}

.highlight-dot {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: #6b4407;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
}

.highlight-dot::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fef9ec;
  border-bottom: 2px solid #fef9ec;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* ── CTA-Button: nur so breit wie nötig ── */
.highlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #6b4407;
  color: #fef9ec;
  font-family: var(--fu);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 30px;
  text-decoration: none;
  width: fit-content;
  margin-top: .75rem;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
}

.highlight-cta:hover {
  background: #4a2d04;
  transform: translateY(-2px);
  color: #fef9ec;
}

.highlight-cta::after { content: '\2192'; margin-left: 4px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .highlight-wrap {
    grid-template-columns: 1fr !important;
  }
  /* Kamishibai: Cover oben, Text unten */
  .highlight-wrap--kami .highlight-bilder { order: -1; }
  /* Buch: Text oben, Cover unten */
  .highlight-wrap--buch .highlight-bilder { order: 1; }
  /* Mobile: Cover wird nicht mehr absolut positioniert,
     sondern normal mit aspect-ratio gesetzt */
  .highlight-bilder--buch {
    position: static;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hl-cover-buch {
    position: static;
    width: 160px;
    aspect-ratio: 2 / 3;
  }
  .hl-cover-buch img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }
}