@font-face{
  font-family:'Carlito';
  src:url('/fonts/carlito-v4-latin-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Carlito';
  src:url('/fonts/carlito-v4-latin-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Gelasio';
  src:url('/fonts/gelasio-v14-latin-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Gelasio';
  src:url('/fonts/gelasio-v14-latin-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Gelasio';
  src:url('/fonts/gelasio-v14-latin-italic.woff2') format('woff2');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
:root{
  --plum:#3A2229;
  --sage:#4F5C42;
  --terracotta:#7A4530;
  --sand:#7A5F35;
  --cream:#F7F1EA;
  --cream-2:#EFE6D8;
  --white:#FFFDF9;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* Sprungziele (z.B. Fußnoten, #preis) landen sonst unter dem sticky Header */
:target{scroll-margin-top:100px;}
body{
  font-family:'Gelasio',serif;
  color:var(--plum);
  background:var(--cream);
  line-height:1.65;
  font-size:17px;
  overflow-x:hidden;
  overflow-wrap:break-word;
}
h1,h2,h3,.brand{
  font-family:'Carlito',sans-serif;
  font-weight:700;
  color:var(--plum);
}
a{color:inherit;}
.wrap{max-width:880px;margin:0 auto;padding:0 24px;}

/* --- nav (identisch zur Sales-Page) --- */
.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(247,241,234,0.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(58,34,41,0.08);
}
.site-nav .wrap{
  max-width:1040px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:16px;
  padding-bottom:16px;
}
.site-nav .brand-link{
  font-family:'Carlito',sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--plum);
  text-decoration:none;
  letter-spacing:0.2px;
  display:flex;
  align-items:center;
}
.site-nav .brand-link img{
  display:block;
  height:52px;
  width:auto;
}
.site-nav .nav-links{display:flex;align-items:center;gap:28px;}
.site-nav .nav-links a{
  font-family:'Carlito',sans-serif;
  font-size:14.5px;
  font-weight:700;
  color:var(--plum);
  text-decoration:none;
  opacity:0.75;
  transition:opacity 0.15s ease;
}
.site-nav .nav-links a:hover{opacity:1;}
.site-nav .nav-links a.nav-cta{
  background:var(--terracotta);
  color:var(--white);
  opacity:1;
  padding:10px 20px;
  border-radius:100px;
  box-shadow:0 4px 14px rgba(122,69,48,0.24);
}
.site-nav .nav-dropdown{
  position:relative;
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  width:auto;
}
.site-nav .nav-dropdown summary{
  display:inline-flex;
  align-items:center;
  background:none;
  border:0;
  padding:0;
  margin:0;
  border-radius:0;
  font-family:'Carlito',sans-serif;
  font-size:14.5px;
  font-weight:700;
  color:var(--plum);
  opacity:0.75;
  cursor:pointer;
  list-style:none;
  transition:opacity 0.15s ease;
}
.site-nav .nav-dropdown summary::-webkit-details-marker{display:none;}
.site-nav .nav-dropdown summary::after{content:"\25BE";font-size:11px;margin-left:7px;}
.site-nav .nav-dropdown summary:hover,
.site-nav .nav-dropdown[open] summary{opacity:1;}
.site-nav .nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 14px);
  right:0;
  background:var(--white);
  border-radius:14px;
  box-shadow:0 16px 36px rgba(58,34,41,0.18);
  padding:8px;
  display:flex;
  flex-direction:column;
  min-width:190px;
  z-index:60;
}
.site-nav .nav-dropdown-menu a{
  transition:none;
  opacity:0.85;
  padding:9px 12px;
  border-radius:9px;
  font-size:14px;
  white-space:nowrap;
}
.site-nav .nav-dropdown-menu a:hover{opacity:1;background:var(--cream-2);}
@media(max-width:600px){
  .site-nav .nav-links{gap:14px;}
  .site-nav .nav-links a:not(.nav-cta){font-size:13px;}
  .site-nav .nav-links a.nav-cta{padding:9px 16px;font-size:13px;}
  .site-nav .nav-dropdown summary{font-size:13px;}
  .site-nav .nav-dropdown-menu{right:-14px;min-width:170px;}
}

/* --- generic section / cta / footer (aus Sales-Page übernommen) --- */
section{position:relative;padding:64px 0;overflow:hidden;}
.bg-cream2{background:var(--cream-2);}
.bg-white{background:var(--white);}
.cta{
  display:inline-block;
  background:var(--terracotta);
  color:var(--white);
  font-family:'Carlito',sans-serif;
  font-weight:700;
  font-size:17px;
  padding:17px 38px;
  border-radius:100px;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(122,69,48,0.28);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(122,69,48,0.34);}
.notice{
  background:var(--cream-2);
  border-left:4px solid var(--sand);
  padding:22px 26px;
  border-radius:8px;
  font-size:14.5px;
  opacity:0.85;
  max-width:680px;
}
footer{
  background:var(--sage);
  color:var(--cream);
  text-align:center;
  padding:36px 0;
  font-size:13px;
  font-family:'Carlito',sans-serif;
  opacity:0.9;
}
footer a{text-decoration:none;}
footer a:hover{text-decoration:underline;}
footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  text-align:left;
}
footer .footer-copyright{font-size:11.5px;opacity:0.75;}
footer .footer-links{font-size:13px;}
footer .footer-links .sep{margin:0 14px;opacity:0.5;}
@media(max-width:480px){
  footer .wrap{flex-direction:column;justify-content:center;text-align:center;}
}

/* --- blog: article header --- */
.article-header{padding:92px 0 40px;}
.article-header .eyebrow{
  font-family:'Carlito',sans-serif;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:12.5px;
  color:var(--terracotta);
  font-weight:700;
  margin-bottom:16px;
}
.article-header h1{font-size:38px;line-height:1.2;margin-bottom:18px;max-width:720px;}
.article-header .meta{font-size:14px;opacity:0.65;font-family:'Carlito',sans-serif;}
.article-header .dek{font-size:19px;opacity:0.85;max-width:640px;margin-top:14px;}

/* --- blog: article body typography --- */
.article-body{padding-top:44px;}
.article-body h2{font-size:24px;margin:36px 0 14px;max-width:680px;}
.article-body h3{font-size:19px;margin:28px 0 10px;max-width:680px;}
.article-body p{margin-bottom:18px;max-width:680px;}
.article-body ul,.article-body ol{margin:0 0 18px 22px;max-width:680px;}
.article-body li{margin-bottom:8px;}
.article-body strong{color:var(--plum);}
/* Fliesstext auf volle Wrap-Breite (Ueber-mich-Seite) */
.article-body.wide h2,
.article-body.wide h3,
.article-body.wide p,
.article-body.wide ul,
.article-body.wide ol,
.article-body.wide .lead{max-width:none;}
.article-body .lead{font-size:19px;opacity:0.9;max-width:680px;}
.article-body blockquote{
  border-left:3px solid var(--sage);
  padding:4px 0 4px 20px;
  margin:24px 0;
  font-style:italic;
  opacity:0.85;
  max-width:640px;
}
.sources-toggle{
  background:var(--cream-2);
  border-radius:12px;
  padding:16px 20px;
  margin:24px 0;
  font-size:14px;
  max-width:680px;
}
.sources-toggle summary{cursor:pointer;font-family:'Carlito',sans-serif;font-weight:700;font-size:14px;}
.sources-toggle ul{margin-top:12px;}
.sources-toggle .src-meta{display:block;font-size:12.5px;opacity:0.65;}

/* --- blog: inline CTA box --- */
.blog-cta{
  background:var(--white);
  border:1px solid rgba(58,34,41,0.1);
  border-radius:20px;
  padding:32px;
  text-align:center;
  max-width:680px;
  margin:40px 0;
}
.blog-cta h3{font-size:20px;margin-top:0;margin-bottom:8px;}
.blog-cta p{max-width:none;margin-bottom:20px;opacity:0.85;}

/* --- blog: weiterlesen / related articles --- */
.related-articles{
  background:var(--cream-2);
  border-radius:16px;
  padding:18px 32px 26px;
  margin:40px 0;
  max-width:680px;
}
.related-articles h3{font-size:18px;margin-top:0;margin-bottom:14px;}
.related-articles ul{list-style:none;margin:0;padding:0;max-width:none;}
.related-articles li{margin-bottom:12px;}
.related-articles li:last-child{margin-bottom:0;}
.related-articles a{
  font-family:'Carlito',sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--terracotta);
  text-decoration:none;
}
.related-articles a::before{content:"\2192";margin-right:8px;}
.related-articles a:hover{text-decoration:underline;}

/* --- blog: overview grid --- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:32px;
}
.blog-card{
  background:var(--white);
  border-radius:16px;
  padding:26px;
  text-decoration:none;
  border:1px solid rgba(58,34,41,0.08);
  display:block;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(58,34,41,0.1);}
.blog-card .eyebrow{
  font-family:'Carlito',sans-serif;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:11.5px;
  color:var(--terracotta);
  font-weight:700;
  margin-bottom:10px;
}
.blog-card h2{font-size:19px;margin-bottom:8px;line-height:1.3;}
.blog-card p{font-size:14.5px;opacity:0.8;margin-bottom:0;}

@media(max-width:700px){
  .blog-grid{grid-template-columns:1fr;}
  .article-header{padding:64px 0 28px;}
  .article-header h1{font-size:27px;}
  section{padding:44px 0;}
}

/* ===== Blogartikel: Tabellen, Kennzahl, FAQ, Datum (ergänzt 31.08.2026) ===== */
.table-scroll{max-width:680px;overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch;}
.article-table{
  border-collapse:collapse;
  width:100%;
  min-width:460px;
  font-family:'Carlito',sans-serif;
  font-size:14.5px;
}
.article-table caption{
  caption-side:top;
  text-align:left;
  font-size:13px;
  opacity:0.65;
  padding-bottom:8px;
}
.article-table th,.article-table td{
  text-align:left;
  padding:10px 14px;
  border-bottom:1px solid rgba(58,34,41,0.12);
  vertical-align:top;
}
.article-table thead th{
  background:var(--cream-2);
  font-weight:700;
  border-bottom:2px solid var(--sand);
}
.article-table tbody tr:last-child td{border-bottom:none;}
.article-table td.num{white-space:nowrap;font-variant-numeric:tabular-nums;}

.keyfigure{
  max-width:680px;
  background:var(--cream-2);
  border-radius:8px;
  padding:22px 26px;
  margin:0 0 24px;
}
.keyfigure .figure{
  font-family:'Gelasio',serif;
  font-size:38px;
  line-height:1.1;
  color:var(--terracotta);
  display:block;
  margin-bottom:6px;
}
.keyfigure .figure-label{
  font-family:'Carlito',sans-serif;
  font-size:14.5px;
  opacity:0.8;
  display:block;
  max-width:none;
}

.faq{max-width:680px;margin:32px 0;}
.faq h2{margin-bottom:16px;}
.faq-item{
  border-bottom:1px solid rgba(58,34,41,0.14);
  padding:0;
}
.faq-item summary{
  cursor:pointer;
  font-family:'Carlito',sans-serif;
  font-weight:700;
  font-size:15.5px;
  padding:16px 0;
  list-style:none;
  position:relative;
  padding-right:28px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  position:absolute;
  right:4px;
  top:14px;
  font-size:20px;
  color:var(--terracotta);
  line-height:1;
}
.faq-item[open] summary::after{content:"\2013";}
.faq-item p{padding-bottom:16px;margin-bottom:0;max-width:none;}

.article-header .meta .updated{opacity:0.85;}

@media(max-width:700px){
  .keyfigure .figure{font-size:31px;}
  .article-table{font-size:14px;}
  .article-table th,.article-table td{padding:9px 11px;}
}

/* Auf sehr schmalen Displays reicht das Logo als Weg zur Startseite (ergänzt 31.08.2026) */
@media(max-width:440px){
  .site-nav .brand-link img{height:44px;}
  .site-nav .nav-links a.nav-home{display:none;}
  .site-nav .nav-links{gap:12px;}
}

/* ===== Blog-Übersicht: Suche und Filter (ergänzt 31.08.2026) ===== */
.blog-controls{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:30px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(58,34,41,0.10);
}
.blog-search-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.blog-search{
  font-family:'Carlito',sans-serif;
  font-size:15px;
  color:var(--plum);
  flex:1 1 280px;
  min-width:0;
  padding:11px 18px;
  border:1px solid rgba(58,34,41,0.18);
  border-radius:100px;
  background:var(--white);
  -webkit-appearance:none;
  appearance:none;
}
.blog-search::placeholder{color:var(--plum);opacity:0.45;}
.blog-search:focus{outline:2px solid var(--terracotta);outline-offset:1px;border-color:transparent;}
.blog-count{
  font-family:'Carlito',sans-serif;
  font-size:14px;
  opacity:0.6;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.blog-reset{
  font-family:'Carlito',sans-serif;
  font-size:14px;
  background:none;
  border:none;
  color:var(--terracotta);
  cursor:pointer;
  padding:6px 2px;
  text-decoration:underline;
}
.blog-filter-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.blog-filter-label{
  font-family:'Carlito',sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  opacity:0.5;
  flex:0 0 84px;
}
.blog-chip{
  font-family:'Carlito',sans-serif;
  font-size:14px;
  color:var(--plum);
  background:var(--white);
  border:1px solid rgba(58,34,41,0.18);
  border-radius:100px;
  padding:7px 15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.blog-chip:hover{border-color:var(--terracotta);}
.blog-chip:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;}
.blog-chip .chip-n{font-size:12.5px;opacity:0.5;font-variant-numeric:tabular-nums;}
.blog-chip[aria-pressed="true"]{
  background:var(--terracotta);
  border-color:var(--terracotta);
  color:var(--white);
}
.blog-chip[aria-pressed="true"] .chip-n{opacity:0.8;}
.blog-card[hidden]{display:none;}
.blog-empty{
  font-size:16px;
  opacity:0.7;
  padding:34px 0 8px;
  max-width:520px;
}

@media(max-width:700px){
  .blog-filter-label{flex:1 0 100%;margin-bottom:-2px;}
  .blog-chip{font-size:13.5px;padding:6px 13px;}
  .blog-controls{gap:14px;}
}

/* =====================================================================
   Mobile-Überarbeitung (01.09.2026)
   1. Burger-Navigation auf schmalen Displays
   2. Über-mich: engerer Anschluss an den Autorenblock
   3. Blog-Filter: größere Tippflächen, Rückmeldung direkt unter den Chips
   4. Blogartikel: Tabellen, FAQ, CTA und Boxen für kleine Displays
   ===================================================================== */

/* --- 1. Burger-Navigation ------------------------------------------- */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  margin-right:-8px;
  padding:0;
  background:none;
  border:0;
  color:var(--plum);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;border-radius:8px;}
.nav-burger{position:relative;display:block;width:22px;height:2px;border-radius:2px;background:currentColor;}
.nav-burger::before,
.nav-burger::after{
  content:"";
  position:absolute;
  left:0;
  display:block;
  width:22px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform 0.18s ease;
}
.nav-burger::before{top:-7px;}
.nav-burger::after{top:7px;}
.site-nav.nav-open .nav-burger{background:transparent;}
.site-nav.nav-open .nav-burger::before{transform:translateY(7px) rotate(45deg);}
.site-nav.nav-open .nav-burger::after{transform:translateY(-7px) rotate(-45deg);}

@media(max-width:760px){
  html.has-js-nav .nav-toggle{display:flex;}
  html.has-js-nav .site-nav .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:4px 0 8px;
    background:var(--white);
    border-bottom:1px solid rgba(58,34,41,0.10);
    box-shadow:0 18px 34px rgba(58,34,41,0.16);
    max-height:calc(100vh - 88px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  html.has-js-nav .site-nav.nav-open .nav-links{display:flex;}
  html.has-js-nav .site-nav .nav-links > a,
  html.has-js-nav .site-nav .nav-dropdown > summary{
    display:flex;
    align-items:center;
    font-size:16px;
    opacity:1;
    padding:14px 24px;
    border-bottom:1px solid rgba(58,34,41,0.07);
  }
  html.has-js-nav .site-nav .nav-links a.nav-home{display:flex;}
  html.has-js-nav .site-nav .nav-links > a:last-child{border-bottom:none;}
  html.has-js-nav .site-nav .nav-dropdown{width:100%;}
  html.has-js-nav .site-nav .nav-dropdown > summary::after{margin-left:auto;font-size:13px;}
  html.has-js-nav .site-nav .nav-dropdown-menu{
    position:static;
    min-width:0;
    padding:2px 0 6px;
    border-radius:0;
    background:var(--cream);
    box-shadow:none;
  }
  html.has-js-nav .site-nav .nav-dropdown-menu a{
    padding:13px 24px 13px 40px;
    border-radius:0;
    font-size:15.5px;
    opacity:1;
    white-space:normal;
  }
}

/* --- 2. Über-mich: Autorenblock und Fließtext gehören zusammen ------- */
.author-intro{padding-bottom:44px;}
.article-body.wide{padding-top:0;}
.article-body > .wrap > h2:first-child{margin-top:0;}

/* --- 3. Blog-Filter: Tippflächen und Rückmeldung --------------------- */
.blog-chip{min-height:38px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(122,69,48,0.10);}
.blog-chip:active{transform:scale(0.97);}
.blog-search{touch-action:manipulation;}
.blog-search-row{max-width:460px;}
/* feste Höhe: sonst schiebt der auftauchende Zurücksetzen-Button
   die Trennlinie und alle Artikelkarten nach unten */
.blog-status-row{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  min-height:38px;
}
.blog-reset{min-height:38px;touch-action:manipulation;}

/* --- 4. Blogartikel: FAQ und Quellen-Toggle -------------------------- */
.faq-item:first-of-type{border-top:1px solid rgba(58,34,41,0.14);}
/* auf .article-body begrenzt, damit die Sales-Pages ihr eigenes
   Quellen-Layout aus home.css behalten */
.article-body .sources-toggle summary{
  display:flex;
  align-items:center;
  gap:12px;
  list-style:none;
}
.article-body .sources-toggle summary::-webkit-details-marker{display:none;}
.article-body .sources-toggle summary::before{
  content:"\25B8";
  flex:0 0 auto;
  font-size:12px;
  line-height:1;
  color:var(--terracotta);
}
.article-body .sources-toggle[open] summary::before{content:"\25BE";}

/* --- Mobile: Blogartikel-Bausteine ---------------------------------- */
@media(max-width:700px){
  /* Kopfbereich kompakter, damit Inhalt früher sichtbar wird */
  .article-header{padding:52px 0 26px;}
  .article-header .dek{font-size:17px;}
  .blog-search-row{max-width:none;}

  /* Chips größer und leichter zu treffen */
  .blog-chip{font-size:14px;padding:9px 15px;min-height:42px;}
  .blog-filter-row{gap:10px;}
  /* 16px verhindert, dass iOS beim Antippen in das Suchfeld hineinzoomt */
  .blog-search{font-size:16px;padding:12px 18px;}
  .blog-controls{gap:16px;padding-bottom:24px;}
  .blog-status-row{gap:14px;}

  /* Tabellen bleiben in der Textspalte, brauchen aber kein Schieben mehr */
  .article-table{min-width:0;}
  .article-table th,
  .article-table td{padding:10px 12px;hyphens:auto;-webkit-hyphens:auto;}

  /* FAQ */
  .faq{margin:28px 0;}
  .faq-item summary{font-size:15.5px;padding:15px 32px 15px 0;}
  .faq-item summary::after{top:13px;right:2px;}
  .faq-item p{padding-bottom:15px;}

  /* CTA-Box im Artikel */
  .blog-cta{padding:26px 20px;border-radius:16px;margin:32px 0;}
  .blog-cta h3{font-size:19px;}
  .blog-cta p{margin-bottom:18px;}
  .cta{
    display:block;
    width:100%;
    max-width:340px;
    margin:0 auto;
    padding:16px 22px;
    font-size:16px;
    text-align:center;
    box-sizing:border-box;
  }

  /* Weiterlesen, Quellen, Hinweis-Box */
  .related-articles{padding:16px 20px 22px;border-radius:14px;margin:32px 0;}
  .sources-toggle{padding:14px 18px;}
  .notice{padding:18px 20px;font-size:14px;}
  .keyfigure{padding:18px 20px;}
  .article-body blockquote{padding-left:16px;margin:20px 0;}

  /* lange deutsche Komposita brechen sonst aus den Boxen heraus */
  .article-body p,
  .article-body li,
  .notice,
  .blog-card p,
  .blog-card h2{hyphens:auto;-webkit-hyphens:auto;}
}

@media(max-width:400px){
  .wrap{padding:0 18px;}
  .article-body h2{font-size:22px;}
  .cta{padding:15px 18px;font-size:15.5px;}
}