@charset "UTF-8";

/* ================================================================
   BIRGIT ROLF BLOG — blog.css
   Block 1: CSS Custom Properties
   Block 2: @font-face
   Block 3: Nav + Footer (1:1 aus statischer Site)
   Block 4: Blog-spezifische Styles
   ================================================================ */

/* ----------------------------------------------------------------
   BLOCK 1 — CSS CUSTOM PROPERTIES
---------------------------------------------------------------- */
:root {
  /* Flächen */
  --bg:       #FAF6F4;
  --bg2:      #F0DDD4;
  --bg3:      #EDCFC0;

  /* Markenfarben */
  --rose:     #C47540;
  --mauve:    #BD8DAC;
  --mauve-hover: #A8789C;
  --mid:      #8A6B68;
  --deep:     #722858;
  --accent:   #722858;
  --card-dark: #34282D;

  /* Dunkel */
  --dark:     #34282D;
  --heading:  #34282D;
  --darkest:  #282828;
  --txt:      #282828;
  --txt2:     #5A4040;
  --line:     rgba(138, 107, 104, .15);

  /* RGB-Triplets */
  --on-dark-rgb:  250, 246, 244;
  --rose-rgb:     196, 117,  64;
  --dark-rgb:      52,  40,  45;
  --heading-rgb:   52,  40,  45;
  --deep-rgb:     114,  40,  88;
  --accent-rgb:   114,  40,  88;
  --card-dark-rgb: 52,  40,  45;
  --mid-rgb:      138, 107, 104;
  --bg3-rgb:      237, 207, 192;
  --darkest-rgb:   40,  40,  40;

  /* Abgeleitet */
  --on-dark:      #FAF6F4;
  --rose-hover:   #D09167;
  --deep-hover:   #4C1B3B;
  --accent-on-dark: #BD8DAC;
  --nav-glass:    rgba(250, 246, 244, .68);
  --mob-overlay:  rgba(250, 246, 244, .92);

  /* Typografie */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Outfit', system-ui, sans-serif;
}

/* ----------------------------------------------------------------
   BLOCK 2 — @font-face (lokal aus /assets/fonts/)
---------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces/static/Fraunces_72pt-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces/static/Fraunces_72pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces/static/Fraunces_72pt-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit/static/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit/static/Outfit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit/static/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

/* ----------------------------------------------------------------
   BLOCK 3 — NAV + FOOTER (1:1 aus statischer Site)
---------------------------------------------------------------- */

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; scroll-behavior: smooth; margin-top: 0 !important; }
body { background: var(--bg); color: var(--txt2); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; margin-bottom: 0 !important; }
#wpadminbar { display: none !important; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; font-family: var(--sans); }

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;background:transparent;padding:14px clamp(1rem,3vw,2rem)}
.nav-inner{max-width:1400px;margin:0 auto;padding:0 clamp(1rem,2vw,1.8rem);height:90px;display:flex;align-items:center;gap:2rem;background:var(--nav-glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.7);border-radius:50px;box-shadow:0 4px 28px rgba(var(--dark-rgb),.09),0 1px 4px rgba(var(--dark-rgb),.05)}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo-img{height:72px;width:auto;display:block}
.nav-links{display:flex;gap:1.8rem;list-style:none;margin:0 auto}
.nav-links a{font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--heading);transition:color .2s}
.nav-links a.nav-active{color:var(--deep);font-weight:700}
.nav-links a:hover{color:var(--deep)}
.btn-nav{background:var(--mauve);color:var(--on-dark);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1.4rem;border-radius:50px;white-space:nowrap;border:none;cursor:pointer}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:none;border:none;cursor:pointer;flex-shrink:0;margin-left:auto}
.nav-burger span{display:block;width:22px;height:2px;background:var(--dark);border-radius:2px;transition:transform .25s,opacity .25s}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--mob-overlay);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);z-index:90;flex-direction:column;align-items:center;justify-content:center;gap:2.8rem;padding:2rem}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--serif);font-size:1.7rem;font-weight:300;color:var(--heading);letter-spacing:.01em;transition:color .2s}
.mobile-menu a:hover{color:var(--deep)}
.mobile-menu .btn-nav{font-size:.9rem;padding:.9rem 2.5rem;margin-top:.8rem;color:var(--on-dark)}
.mobile-menu a.nav-active{color:var(--deep);font-weight:500}
.mobile-close{position:absolute;top:1.5rem;right:1.5rem;font-size:1.6rem;background:none;border:none;color:var(--heading);cursor:pointer;padding:.5rem}
@media(max-width:1024px){
  .nav-links{display:none}
  .btn-nav.btn-nav-desktop{display:none}
  .nav-burger{display:flex}
}
@media(max-width:640px){
  .nav{padding:10px clamp(.75rem,4vw,1rem)}
  .nav-inner{height:70px;border-radius:40px}
  .nav-logo-img{height:52px}
}

/* FOOTER */
.footer{padding:clamp(4rem,7vw,7rem) clamp(1.5rem,4vw,2.5rem) 2rem}
.footer-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(2rem,5vw,6rem);margin-bottom:3rem}
.fi-brand{font-size:.92rem;color:rgba(var(--on-dark-rgb),.65);line-height:1.7;margin-bottom:.8rem}
.fi-sub{font-size:.8rem;color:rgba(var(--on-dark-rgb),.38);line-height:1.7;max-width:340px}
.fi-h{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:rgba(var(--on-dark-rgb),.38);margin-bottom:1.2rem}
.fi-links{list-style:none}
.fi-links li{margin-bottom:.6rem}
.fi-links a{font-size:.9rem;color:rgba(var(--on-dark-rgb),.7);transition:color .2s}
.fi-links a:hover{color:var(--on-dark)}
.fi-contact p{font-size:.9rem;color:rgba(var(--on-dark-rgb),.7);margin-bottom:.5rem;line-height:1.5}
.fi-contact a{color:inherit;transition:color .2s}
.fi-contact a:hover{color:var(--on-dark)}
.footer-bottom{max-width:1400px;margin:0 auto;padding-top:1.5rem;border-top:1px solid rgba(var(--on-dark-rgb),.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.fi-copy{font-size:.78rem;color:rgba(var(--on-dark-rgb),.35)}
.fi-legal{list-style:none;display:flex;gap:1.6rem}
.fi-legal a{font-size:.78rem;color:rgba(var(--on-dark-rgb),.38);transition:color .2s}
.fi-legal a:hover{color:var(--on-dark)}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-inner{grid-template-columns:1fr;gap:2.5rem}.footer-bottom{flex-direction:column;align-items:flex-start}}

/* Sektion-Klassen (für Footer-Hintergrund) */
.sec-darkest{background:var(--darkest);color:var(--bg)}

/* ----------------------------------------------------------------
   BLOCK 4 — BLOG-SPEZIFISCHE STYLES
---------------------------------------------------------------- */

/* Layout-Helfer */
.wrap{max-width:1400px;margin:0 auto;position:relative;z-index:1;padding:0 clamp(1.5rem,4vw,2.5rem)}

/* Typografie-Helfer */
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--mid);margin-bottom:1.2rem;display:block}
.sec-h{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.12;margin-bottom:1.4rem;color:var(--heading)}
.sec-h em{font-style:italic;color:var(--accent)}

/* Button — 1:1 aus statischer Site */
.btn{display:inline-block;position:relative;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:.95rem 2.4rem;cursor:pointer;border:none;background:transparent;transition:transform .25s,color .25s;text-decoration:none;z-index:0;line-height:1}
.btn-p{color:var(--bg)}
.btn-p::before,.btn-p::after{content:'';position:absolute;inset:-7px -16px;background-size:100% 100%;background-repeat:no-repeat;z-index:-1;transition:opacity .4s;pointer-events:none}
.btn-p::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 56' preserveAspectRatio='none'%3E%3Cpath fill='%23BD8DAC' d='M8 18C6 11 18 5 40 3C66 1 102 0 138 2C174 4 214 0 244 5C262 8 274 14 272 22C270 31 260 42 246 47C230 54 196 57 156 56C108 55 60 56 28 53C12 51 4 46 2 37C0 28 2 24 8 18Z'/%3E%3C/svg%3E");opacity:1}
.btn-p::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 56' preserveAspectRatio='none'%3E%3Cpath fill='%23A8789C' d='M12 15C18 7 50 2 86 2C126 2 174 0 214 4C240 7 260 13 261 21C262 30 252 42 238 47C222 53 190 56 148 55C102 54 54 55 24 52C8 50 1 45 0 36C-1 27 4 21 12 15Z'/%3E%3C/svg%3E");opacity:0}
.btn-p:hover{transform:translateY(-2px)}
.btn-p:hover::before{opacity:0}
.btn-p:hover::after{opacity:1}

/* ---- ARCHIV ---- */
.blog-archive{min-height:auto}
.blog-archive-wrap{padding-bottom:clamp(3rem,6vw,5rem)}
.blog-archive-header{padding:clamp(1.5rem,4vw,3rem) 0 clamp(1.5rem,3vw,2.5rem)}

.post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-bottom:3.5rem;
}
@media(max-width:1024px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr}}

/* Post-Karte */
.post-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(var(--dark-rgb),.09)}
.post-card-thumb{display:block;aspect-ratio:3/2;overflow:hidden}
.post-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-card:hover .post-card-thumb img{transform:scale(1.04)}
.post-card-body{padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;flex:1;gap:0}
.post-card-cat{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mauve);text-decoration:none;margin-bottom:.55rem;display:block}
.post-card-cat:hover{color:var(--deep)}
.post-card-title{font-family:var(--serif);font-weight:300;font-size:1.18rem;line-height:1.3;color:var(--heading);margin-bottom:.7rem}
.post-card-title a{color:inherit;text-decoration:none;transition:color .2s}
.post-card-title a:hover{color:var(--deep)}
.post-card-excerpt{font-size:.9rem;color:var(--txt2);line-height:1.65;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-meta{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--mid);margin-bottom:1.2rem}
.post-card-meta-sep{opacity:.35}
.post-card-link{font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--deep);text-decoration:none;transition:color .2s;margin-top:auto;display:inline-flex;align-items:center;gap:.3rem}
.post-card-link::after{content:'→';transition:transform .2s}
.post-card-link:hover{color:var(--deep-hover)}
.post-card-link:hover::after{transform:translateX(3px)}

/* Pagination */
.blog-pagination{margin-top:2rem}
.blog-pagination .nav-links{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:0 .8rem;border-radius:50px;font-size:.85rem;color:var(--heading);border:1px solid var(--line);transition:background .2s,color .2s;text-decoration:none}
.blog-pagination .page-numbers.current,.blog-pagination .page-numbers:hover{background:var(--mauve);color:var(--on-dark);border-color:var(--mauve)}

.blog-empty{color:var(--txt2);font-size:1rem;padding:3rem 0}

/* ---- SINGLE POST ---- */
.single-post{min-height:auto;padding-bottom:0}

/* Breadcrumb */
.breadcrumb-wrap{padding:1rem clamp(1.5rem,4vw,2.5rem) 0}
.post-breadcrumb{font-size:.78rem;color:var(--mid)}
.post-breadcrumb a{color:var(--mid);text-decoration:none;transition:color .2s}
.post-breadcrumb a:hover{color:var(--deep)}

/* Post Header */
.post-header-wrap{padding:1.2rem clamp(1.5rem,4vw,2.5rem) 1.8rem;max-width:960px}
.post-cat-badge{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark);background:var(--mauve);padding:.3rem .9rem;border-radius:50px;margin-bottom:1rem;text-decoration:none}
.post-cat-badge:hover{background:var(--mauve-hover)}
.post-title{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.5vw,2.6rem);line-height:1.12;color:var(--heading);margin-bottom:.8rem}
.post-meta{display:flex;align-items:center;gap:.75rem;font-size:.82rem;color:var(--mid);margin-bottom:16px}
.post-sep{opacity:.4}
.post-teaser{font-family:var(--serif);font-weight:300;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--txt2);line-height:1.75;margin-top:1.1rem;max-width:680px}

/* Featured Image */
.post-hero{width:100%;max-height:460px;overflow:hidden;margin-bottom:0}
.post-hero-img{width:100%;height:100%;object-fit:cover;max-height:460px}

/* Content */
.post-content-wrap{max-width:960px;padding:0 clamp(1.5rem,4vw,2.5rem)}
.post-content{font-size:1rem;line-height:1.85;color:var(--txt);hyphens:auto}
.post-content h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.5vw,2rem);color:var(--heading);margin:2.5rem 0 1rem;line-height:1.2}
.post-content h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--heading);margin:2rem 0 .8rem}
.post-content p{margin-bottom:1.5rem}
.post-content a{color:var(--deep);text-decoration:underline;text-underline-offset:3px}
.post-content a:hover{color:var(--deep-hover)}
.post-content ul,.post-content ol{margin:0 0 1.5rem 0;padding:0}
.post-content li{margin-bottom:0}
.post-content blockquote{padding:.5rem 0 .5rem 1.5rem}
.post-content img{border-radius:10px;margin:2rem 0}
.post-content hr{border:none;border-top:1px solid var(--line);margin:2.5rem 0}


/* ================================================================
   LISTEN-STILE — passend zur statischen Site birgitrolf.de
   ================================================================ */

/* ul — Pfeil-Liste (SVG-Pfeil aus dem Brand-Design) */
.post-content ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}
.post-content ul > li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}
.post-content ul > li::before {
  content: '';
  display: block;
  width: 60px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg%20width%3D'60'%20height%3D'20'%20viewBox%3D'0%200%2060%2020'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M2%2010%20C16%209.5%2036%209%2052%2010'%20stroke%3D'%23C47540'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M52%2010%20C48%206%2044%204%2040%203'%20stroke%3D'%23C47540'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M52%2010%20C48%2014%2044%2016%2040%2017'%20stroke%3D'%23C47540'%20stroke-width%3D'1.3'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* ol — Nummerierung 01/02/03 im Flex-Layout */
.post-content ol {
  list-style: none;
  counter-reset: num-list;
  margin: 0 0 1.5rem 0;
  padding: 0;
}
.post-content ol > li {
  counter-increment: num-list;
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(196, 117, 64, .25);
  margin-bottom: 0;
  line-height: 1.7;
}
.post-content ol > li:last-child {
  border-bottom: 1px solid rgba(196, 117, 64, .25);
}
.post-content ol > li::before {
  content: counter(num-list, decimal-leading-zero);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--rose);
  font-size: 0.9rem;
  flex-shrink: 0;
  min-width: 1.8rem;
  padding-top: 0.1rem;
  line-height: 1.7;
}

/* Listen in dunklen Sections: Marker in --mauve */
.post-content .section-dark   ul > li::before,
.post-content .section-darkest ul > li::before,
.post-content .section-plum   ul > li::before { color: var(--mauve); }

.post-content .section-dark   ol > li::before,
.post-content .section-darkest ol > li::before,
.post-content .section-plum   ol > li::before { color: var(--mauve); }

.post-content .section-dark   ol > li,
.post-content .section-darkest ol > li,
.post-content .section-plum   ol > li {
  border-top-color: rgba(189, 141, 172, .35);
}
.post-content .section-dark   ol > li:last-child,
.post-content .section-darkest ol > li:last-child,
.post-content .section-plum   ol > li:last-child {
  border-bottom-color: rgba(189, 141, 172, .35);
}

/* Author Box */
.author-box{margin:2.5rem 0;padding:1.6rem;background:var(--bg2);border-radius:16px;border:1px solid var(--line)}
.author-box-inner{display:flex;gap:1.4rem;align-items:flex-start}
.author-avatar{flex-shrink:0;width:80px;height:80px;border-radius:50%;overflow:hidden}
.author-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.author-name{font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--heading);margin-bottom:.4rem}
.author-bio{font-size:.88rem;color:var(--txt2);line-height:1.7;margin-bottom:.6rem}
.author-link{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);text-decoration:none}
@media(max-width:500px){.author-box-inner{flex-direction:column}}

/* CTA Block */
.post-cta{margin:2rem 0;padding:2rem;background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);border-radius:16px;text-align:center}
.post-cta-text{font-family:var(--serif);font-weight:300;font-size:1.15rem;color:var(--heading);margin-bottom:1.6rem}

/* Related Posts */
.related-posts{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.related-title{font-family:var(--serif);font-weight:300;font-size:1.4rem;color:var(--heading);margin-bottom:1.8rem}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:700px){.related-grid{grid-template-columns:1fr}}
.related-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.related-thumb{display:block;aspect-ratio:16/9;overflow:hidden}
.related-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}

/* Related Posts */
.related-posts{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.related-title{font-family:var(--serif);font-weight:300;font-size:1.4rem;color:var(--heading);margin-bottom:1.8rem}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:700px){.related-grid{grid-template-columns:1fr}}
.related-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.related-thumb{display:block;aspect-ratio:16/9;overflow:hidden}
.related-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.related-card:hover .related-thumb img{transform:scale(1.04)}
.related-card-title{padding:.9rem 1rem;font-family:var(--serif);font-weight:300;font-size:.95rem;line-height:1.3;color:var(--heading)}
.related-card-title a{color:inherit;text-decoration:none}
.related-card-title a:hover{color:var(--deep)}

/* Archive description */
.archive-desc{font-size:.95rem;color:var(--txt2);max-width:560px;line-height:1.7;margin-top:.5rem}

/* ================================================================
   ABSCHNITT-STILE (TinyMCE Custom Formats)
   Bg + Text immer fest gepaart — kein dunkel auf dunkel moeglich.
   ================================================================ */

/* Gemeinsame Basis — Full Bleed (bricht aus dem 960px Container aus)
   Horizontales Padding: richtet Inhalts-Text exakt auf die 960px-Spalte aus.
   Formel: max(Mindest-Padding, (Viewport - 960px) / 2 + Spalten-Padding)
   → auf breiten Screens deckt sich der Textblock mit dem normalen Post-Inhalt. */
.post-content .section-peach,
.post-content .section-peach-deep,
.post-content .section-mauve,
.post-content .section-dark,
.post-content .section-darkest,
.post-content .section-plum {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-left: max(clamp(1.5rem, 4vw, 2.5rem), calc((100vw - 960px) / 2 + clamp(1.5rem, 4vw, 2.5rem)));
  padding-right: max(clamp(1.5rem, 4vw, 2.5rem), calc((100vw - 960px) / 2 + clamp(1.5rem, 4vw, 2.5rem)));
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
}


/* ================================================================
   TRENNELEMENTE
   Birgit wählt im Dropdown "Trennelemente" einen Stil.
   Auf eine leere Zeile klicken, dann Format anwenden.
   WICHTIG: Alle Farb/Typografie-Werte auf ::before, damit sie
   nicht auf Kindelemente kaskadieren, falls das Format versehentlich
   auf einen nicht-leeren Container angewendet wird.
   ================================================================ */

/* Feine horizontale Linie */
.post-content .divider-line {
  display: block;
  width: 100%;
  height: 0;
  border: none;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
  font-size: 0;
  line-height: 0;
}

/* Drei Punkte · · · */
.post-content .divider-dots {
  display: block;
  margin: 1.8rem 0;
  font-size: 0;
  line-height: 0;
}
.post-content .divider-dots::before {
  content: '· · ·';
  display: block;
  text-align: center;
  color: var(--mauve);
  font-size: 1.05rem;
  letter-spacing: 0.7em;
  padding-left: 0.7em;
  line-height: 1.4;
}

/* Herz ♡ */
.post-content .divider-heart {
  display: block;
  margin: 1.8rem 0;
  font-size: 0;
  line-height: 0;
}
.post-content .divider-heart::before {
  content: '♡';
  display: block;
  text-align: center;
  color: var(--mauve);
  font-size: 1.4rem;
  line-height: 1.4;
}

/* Blume / Ornament ✿ */
.post-content .divider-bloom {
  display: block;
  margin: 1.8rem 0;
  font-size: 0;
  line-height: 0;
}
.post-content .divider-bloom::before {
  content: '✿';
  display: block;
  text-align: center;
  color: var(--mauve);
  font-size: 1.2rem;
  line-height: 1.4;
}

/* Vertikaler Abstand (unsichtbarer Spacer) */
.post-content .divider-spacer {
  display: block;
  height: 2.5rem;
  font-size: 0;
  line-height: 0;
}

/* Pfirsich — #F0DDD4 / dunkel */
.post-content .section-peach { background: #F0DDD4; color: #34282D; }
.post-content .section-peach h2,
.post-content .section-peach h3 { color: #34282D; }
.post-content .section-peach a { color: #722858; }

/* Pfirsich Dunkel — #EDCFC0 / dunkel */
.post-content .section-peach-deep { background: #EDCFC0; color: #34282D; }
.post-content .section-peach-deep h2,
.post-content .section-peach-deep h3 { color: #34282D; }
.post-content .section-peach-deep a { color: #722858; }

/* Mauve Hell — #EDE0E9 / dunkel */
.post-content .section-mauve { background: #EDE0E9; color: #34282D; }
.post-content .section-mauve h2,
.post-content .section-mauve h3 { color: #34282D; }
.post-content .section-mauve a { color: #722858; }

/* Dunkel — #34282D / hell */
.post-content .section-dark { background: #34282D; color: #FAF6F4; }
.post-content .section-dark h2,
.post-content .section-dark h3 { color: #FAF6F4; }
.post-content .section-dark a { color: #BD8DAC; }
.post-content .section-dark p { color: #FAF6F4; }

/* Fast Schwarz — #282828 / hell */
.post-content .section-darkest { background: #282828; color: #FAF6F4; }
.post-content .section-darkest h2,
.post-content .section-darkest h3 { color: #FAF6F4; }
.post-content .section-darkest a { color: #BD8DAC; }
.post-content .section-darkest p { color: #FAF6F4; }

/* Pflaume — #722858 / hell */
.post-content .section-plum { background: #722858; color: #FAF6F4; }
.post-content .section-plum h2,
.post-content .section-plum h3 { color: #FAF6F4; }
.post-content .section-plum a { color: #F0DDD4; }
.post-content .section-plum p { color: #FAF6F4; }


/* ================================================================
   SCHUTZREGELN: section-* + deco-* auf demselben Element
   Falls Birgit ein Designelement-Format versehentlich auf eine
   Section anwendet, bleibt die Section korrekt dargestellt.
   !important nötig da deco-Regeln gleiche Spezifität haben.
   ================================================================ */
.post-content [class*="section-"][class*="deco-"]:not(.post-section-deco) {
  float: none !important;
  width: 100vw !important;
  height: auto !important;
  background-image: none !important;
  background-size: initial !important;
  background-repeat: initial !important;
  font-size: inherit !important;
  line-height: inherit !important;
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Hintergrundfarben wiederherstellen */
.post-content .section-peach[class*="deco-"]      { background-color: #F0DDD4 !important; }
.post-content .section-peach-deep[class*="deco-"] { background-color: #EDCFC0 !important; }
.post-content .section-mauve[class*="deco-"]      { background-color: #EDE0E9 !important; }
.post-content .section-dark[class*="deco-"]       { background-color: #34282D !important; }
.post-content .section-darkest[class*="deco-"]    { background-color: #282828 !important; }
.post-content .section-plum[class*="deco-"]       { background-color: #722858 !important; }

/* ================================================================
   DESIGNELEMENTE — Brand-SVG-Ornamente (Sparkle, Kreis, Blatt)
   Birgit fügt diese über "Formate → Designelemente" ein.
   Zum Entfernen: Element im Editor anklicken → Entf/Backspace.
   ================================================================ */

/* Basis-Float-Positionen */
/* Positions-Klassen: NUR Float/Margin — kein font-size/line-height
   (würde auf Kinder kaskadieren falls versehentlich auf eine Section gesetzt) */
.post-content .deco-right {
  float: right;
  margin: 0 0 1.5rem 2.5rem;
  clear: right;
}
.post-content .deco-left {
  float: left;
  margin: 0 2.5rem 1.5rem 0;
  clear: left;
}
.post-content .deco-center {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}

/* Clearfix nach floatenden Elementen */
.post-content .deco-clear {
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
}

/* Großes Funkeln ★ (82px, rose/gold) */
.post-content .deco-sparkle-lg {
  width: 82px;
  height: 82px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 3 C39 23 23 39 3 40 C23 41 39 57 40 77 C41 57 57 41 77 40 C57 39 41 23 40 3Z' fill='%23C47540'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Kleines Funkeln (40px, rose/gold) */
.post-content .deco-sparkle-sm {
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 2 C19 12 12 19 2 20 C12 21 19 28 20 38 C21 28 28 21 38 20 C28 19 21 12 20 2Z' fill='%23C47540'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Funkeln-Duo wie auf der Startseite (groß+klein, 110px) */
.post-content .deco-sparkle-duo {
  width: 110px;
  height: 110px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 110 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M45 5 C44 25 25 44 5 45 C25 46 44 65 45 85 C46 65 65 46 85 45 C65 44 46 25 45 5Z' fill='%23C47540'/%3E%3Cpath d='M88 62 C87.5 69 81 75.5 74 76 C81 76.5 87.5 83 88 90 C88.5 83 95 76.5 102 76 C95 75.5 88.5 69 88 62Z' fill='%23C47540'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Kreis (100px, mauve) */
.post-content .deco-circle {
  width: 160px;
  height: 160px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%23BD8DAC' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Blatt-Ornament (50×90px, mauve) */
.post-content .deco-leaf {
  width: 120px;
  height: 145px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 50 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 85 C8 68 8 22 25 5 C42 22 42 68 25 85Z' fill='none' stroke='%23BD8DAC' stroke-width='1.5'/%3E%3Cline x1='25' y1='5' x2='25' y2='85' stroke='%23BD8DAC' stroke-width='1' opacity='0.45'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* In dunklen Sections: Sparkle in mauve damit sichtbar */
.post-content .section-dark   .deco-sparkle-lg,
.post-content .section-darkest .deco-sparkle-lg,
.post-content .section-dark   .deco-sparkle-sm,
.post-content .section-darkest .deco-sparkle-sm,
.post-content .section-dark   .deco-sparkle-duo,
.post-content .section-darkest .deco-sparkle-duo {
  filter: brightness(0) saturate(100%) invert(60%) sepia(20%) saturate(400%) hue-rotate(280deg);
}

/* ================================================================
   CLAIM-SECTION (img-breaker) — Zitat-Block, volle Breite
   Verwendung über ACF block_type 'claim' (v1.3.0)
   oder direkt per Klasse im TinyMCE Content.
   ================================================================ */
.post-content .img-breaker {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg2);
  padding: clamp(3rem, 7vw, 5.5rem) max(clamp(1.5rem, 4vw, 2.5rem), calc((100vw - 960px) / 2 + clamp(1.5rem, 4vw, 2.5rem)));
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  box-sizing: border-box;
}
.post-content .img-breaker-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--heading);
  line-height: 1.45;
  font-style: italic;
  max-width: 760px;
  margin: 0 auto 1rem;
  display: block;
}
.post-content .img-breaker-cite {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  font-style: normal;
  display: block;
}

/* ================================================================
   FAQ-LISTE — Accordion mit CSS + JS
   JS in blog.js; CSS-Klassen: faq-list, faq-item, faq-q, faq-body, faq-a
   ================================================================ */
.post-content .faq-list {
  margin: 0 0 1.5rem;
}
.post-content .faq-item {
  border-top: 1px solid var(--line);
}
.post-content .faq-item:last-child {
  border-bottom: 1px solid var(--line);
}
.post-content .faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--heading);
  font-weight: 500;
  text-align: left;
  line-height: 1.5;
  transition: color .2s;
}
.post-content .faq-q:hover { color: var(--deep); }
.post-content .faq-icon {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--mauve);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  line-height: 1;
  display: inline-block;
}
.post-content .faq-q[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}
.post-content .faq-body {
  display: none;
  padding-bottom: 1.2rem;
}
.post-content .faq-body.faq-open {
  display: block;
}
.post-content .faq-a {
  font-size: 0.95rem;
  color: var(--txt2);
  line-height: 1.8;
  margin: 0;
}
.post-content .faq-a a { color: var(--deep); font-weight: 600; }


/* ================================================================
   ACF SEKTIONSSYSTEM — Sections + Deko-Ornamente v1.3.0
   post-section:      gemeinsame Basis fuer alle ACF-Abschnitte
   post-section-deco: absolut positioniertes Ornament-Element
   deco-tr/tl/br/bl:  Ecken-Positionen
   deco-light:        helle SVG-Farbe fuer dunkle Hintergruende
   ================================================================ */

/* Alle ACF-Sections: position:relative fuer Ornamente */
.post-content .post-section {
  position: relative;
}

/* Abstand auch bei weissem/transparentem Abschnitt */
.post-content .post-section-plain {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Ornament-Container: absolut in der Eltern-Section positioniert.
   Groesse + background-image kommen von den spezifischeren
   .post-content .deco-* Klassen (hoehere Spezifitaet). */
.post-section-deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* Vier Ecken — Abstand richtet sich nach dem Post-Inhaltsbereich */
.post-section-deco.deco-tr { top: -3.5rem;   right: calc((100vw - 960px) / 4); }
.post-section-deco.deco-tl { top: -3.5rem;   left:  calc((100vw - 960px) / 4); }
.post-section-deco.deco-br { bottom: -4.5rem; right: calc((100vw - 960px) / 4); }
.post-section-deco.deco-bl { bottom: -4.5rem; left:  calc((100vw - 960px) / 4); }

/* Ornament-Farbe: hell (Mauve-Ton) fuer dunkle Sektions-Hintergruende */
.post-section-deco.deco-light {
  filter: brightness(0) saturate(100%)
          invert(85%) sepia(10%) saturate(300%)
          hue-rotate(300deg) brightness(110%);
}


/* =========================================================
   creativecouch Fix 30.07.2026  ·  FAQ Sichtbarkeit + Sektionsabstand
   Additiv. Zum Rueckgaengigmachen diesen Block loeschen.
   ========================================================= */
.post-content .section-dark   .faq-q,
.post-content .section-darkest .faq-q,
.post-content .section-plum   .faq-q { color:#FAF6F4; }
.post-content .section-dark   .faq-q:hover,
.post-content .section-darkest .faq-q:hover,
.post-content .section-plum   .faq-q:hover { color:#BD8DAC; }

.post-content .post-section {
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}
.post-content .post-section > *:first-child,
.post-content .post-section > .post-section-deco + * { margin-top: 0; }
.post-content .post-section > *:last-child { margin-bottom: 0; }

.post-content .section-peach      + .section-peach,
.post-content .section-peach-deep + .section-peach-deep,
.post-content .section-mauve      + .section-mauve,
.post-content .section-plum       + .section-plum,
.post-content .section-dark       + .section-dark,
.post-content .section-darkest    + .section-darkest,
.post-content .post-section-plain + .post-section-plain { padding-top: 0; }


/* creativecouch 30.07.2026: Zitat/Image-Breaker uebernimmt die Hintergrundfarbe seiner Sektion statt fester Farbe */
.post-content .img-breaker{ background-color:inherit; }
.post-content .section-dark .img-breaker-quote,
.post-content .section-darkest .img-breaker-quote,
.post-content .section-plum .img-breaker-quote{ color:#FAF6F4; }
.post-content .section-dark .img-breaker-cite,
.post-content .section-darkest .img-breaker-cite,
.post-content .section-plum .img-breaker-cite{ color:#D8C4CE; }