/* =========================================================
   WIKINGER-SAGA × PURITY 4 – Inbuilt CSS (Alles zentriert)
   ========================================================= */

/* ========== HEADER ========== */
<style>
  /* Kompakter Inline-Figure-Stil mit umlaufendem Text */
  .ws-figure-inline{margin:.2rem 0 1rem;max-width:340px;line-height:1.45}
  .ws-figure-inline.align-right{float:right;margin-left:1rem}
  .ws-figure-inline.align-left{float:left;margin-right:1rem}
  .ws-figure-inline .ws-frame{
    border-radius:16px;overflow:hidden;border:1px solid #e3ddd5;
    background:#f3f1ee;box-shadow:0 8px 24px rgba(0,0,0,.08)
  }
  .ws-figure-inline figcaption{font-size:.95rem;color:#5b534a;margin-top:.45rem}
  @media (max-width:780px){
    .ws-figure-inline{float:none!important;max-width:100%}
    .ws-figure-inline.align-right,.ws-figure-inline.align-left{margin:.25rem 0 .75rem 0}
  }
</style>


<style>
  /* Kompakter Inline-Figure-Stil (helle Optik, runde Ecken, umlaufender Text) */
  .ws-figure-inline {
    margin: .2rem 0 1rem;
    max-width: 340px;            /* Zielbreite Bildblock */
    line-height: 1.45;
  }
  .ws-figure-inline.align-right { float: right; margin-left: 1rem; }
  .ws-figure-inline.align-left  { float: left;  margin-right: 1rem; }

  .ws-figure-inline .ws-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e3ddd5;   /* hell, wie im Baukasten */
    background: #f3f1ee;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
  }
  .ws-figure-inline img {
    display:block; width:100%; height:auto;
    filter: brightness(1.03) contrast(0.98);  /* „nicht zu dunkel“ */
  }
  .ws-figure-inline figcaption {
    font-size: .95rem; color: #5b534a;
    margin-top: .45rem;
  }
  /* Auf schmalen Screens Bild über dem Text, keine Floats */
  @media (max-width: 780px){
    .ws-figure-inline { float:none !important; max-width: 100%; }
    .ws-figure-inline.align-right,
    .ws-figure-inline.align-left { margin: .25rem 0 .75rem 0; }
  }
</style>


/* Logo wirklich mittig – keine Offsets/Positionstricks */
.header-block-3 .navbar-brand.logo-text{
  position: static !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;    /* zentriert in seiner Spalte */
  display: inline-block;
}

/* Megamenu mittig in der Leiste */
.header-block-3 .t4-navbar{
  display: flex;
  align-items: center;
  justify-content: center;      /* ganze Leiste mittig */
  min-height: 64px;
}
.header-block-3 .t4-navbar .navbar,
.header-block-3 .t4-navbar .container > nav,
.header-block-3 .t4-navbar .container > div.navbar{
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;      /* Nav mittig */
}
.header-block-3 .t4-navbar .navbar-nav{
  padding-left: 0 !important;
  margin: 0 auto !important;    /* UL mittig */
}

/* ========== ARTIKEL – BLOCK zentriert, Text links ==========
   (wir benutzen deine bestehende 9/12-Spalte und zentrieren sie) */
.item-page.no-sidebar .bottom-article-info .article-inner .row > .col-md-3{
  display: none;                /* linke Sidebar aus */
}
@media (min-width: 768px){
  .item-page.no-sidebar .bottom-article-info .article-inner .row > .col-md-9{
    margin-left: auto;          /* 9/12-Spalte zentrieren */
    margin-right: auto;
    float: none;
  }
}
/* Sicherheit: alles, was sich aus Versehen zentriert, bleibt im Text links */
.item-page .article-body,
.item-page .article-introtext,
.item-page .page-header,
.item-page .page-header h1,
.item-page .article-details{ text-align: left !important; }
.item-page .text-center,
.item-page [style*="text-align:center"]{ text-align: left !important; }

/* ========== INTRO-SECTION (Startseite) – Block zentriert, Text links ========== */
.ws-intro{
  max-width: 72ch;
  margin: clamp(16px, 4vw, 48px) auto;   /* zentriert */
  padding: 0 clamp(12px, 2vw, 24px);
}
.ws-intro h1{ text-align: center; margin: 0 0 .6em; }
.ws-intro p{ margin: 0 0 1em; }
.ws-iconrow{
  display:flex; gap:clamp(12px,2vw,20px);
  justify-content:center; align-items:center; flex-wrap:wrap;
  margin-bottom:clamp(12px,2.2vw,18px);
}
.ws-iconrow img{ width:clamp(56px,8vw,90px); height:auto; }
.ws-runes{
  display:flex; gap:clamp(6px,1.2vw,12px);
  justify-content:center; align-items:center; flex-wrap:wrap;
  margin-bottom:clamp(10px,2vw,20px);
}
.ws-runes img{ height:clamp(22px,2.8vw,32px); width:auto; }

/* ========== CHRONIK – Look (keine Größenkollisionen) ========== */
:root{
  --font-head: "Cinzel", serif;
  --font-body: "EB Garamond", serif;
  --font-accent:"Caudex", serif;
}
.ws-chronik{
  font-family: var(--font-body);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}
.ws-chronik h1, .ws-chronik h2, .ws-chronik h3{
  font-family: var(--font-head);
  letter-spacing: .3px;
  line-height: 1.2;
  margin: .6em 0 .35em;
}
.ws-chronik .dropcap::first-letter{
  initial-letter: 2; -webkit-initial-letter: 2;
  font-family: var(--font-accent);
  font-weight: 400; line-height: .9; margin-right: .06em; color: inherit;
}
@supports not (initial-letter: 2){
  .ws-chronik .dropcap::first-letter{
    float: left; font-family: var(--font-accent);
    font-size: 3.1em; line-height: .85; margin-right: .12em; margin-top: .02em;
  }
}

/* ========== TYPO – überall gleich (H1 ok, H2/H3 kleiner) ========== */
.item-page .article-body p,
.item-page .article-body li,
.item-page .article-introtext p,
.item-page .article-introtext li,
.com-content-article p,
.com-content-article li,
.ws-intro p, .ws-intro li,
.ws-chronik p, .ws-chronik li{
  font-size: clamp(1rem, 0.12vw + 0.98rem, 1.0625rem) !important;
  line-height: 1.65;
}
.item-page .article-body h1,
.item-page .page-header h1,
.ws-intro h1, .ws-chronik h1{
  font-size: clamp(1.8rem, 1.6vw + 1rem, 2.4rem) !important;
  line-height: 1.2; font-weight:700; letter-spacing:.3px; margin:.6em 0 .35em;
}
.item-page .article-body h2,
.ws-intro h2, .ws-chronik h2{
  font-size: clamp(1.3rem, 1.1vw + 0.85rem, 1.75rem) !important;
  line-height: 1.25; font-weight:700; letter-spacing:.22px; margin:.6em 0 .35em;
}
.item-page .article-body h3,
.ws-intro h3, .ws-chronik h3{
  font-size: clamp(1.1rem, 0.8vw + 0.65rem, 1.35rem) !important;
  line-height: 1.28; font-weight:700; letter-spacing:.18px; margin:.6em 0 .35em;
}
.item-page .article-body h1 strong,
.item-page .article-body h2 strong,
.item-page .article-body h3 strong,
.ws-intro h1 strong, .ws-intro h2 strong, .ws-intro h3 strong{
  font-weight: inherit;
}

/* ========== Media Basics ========== */
.ws-figure{ margin:1.2rem 0; }
.ws-figure img{ width:100%; height:auto; display:block; border-radius:12px; }
.ws-figure figcaption{ font-size:.95rem; opacity:.8; margin-top:.4rem; }
.ws-grid{ display:grid; gap:clamp(10px,2vw,18px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }

/* ========== Accessibilty ========== */
@media (prefers-reduced-motion: reduce){
  .ws-chronik *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
/* =========================================================
   WIKINGER-SAGA × PURITY 4 – Inbuilt CSS (Alles zentriert)
   ========================================================= */

/* ========== HEADER ========== */

/* Logo wirklich mittig – keine Offsets/Positionstricks */
.header-block-3 .navbar-brand.logo-text{
  position: static !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;    /* zentriert in seiner Spalte */
  display: inline-block;
}

/* Megamenu mittig in der Leiste */
.header-block-3 .t4-navbar{
  display: flex;
  align-items: center;
  justify-content: center;      /* ganze Leiste mittig */
  min-height: 64px;
}
.header-block-3 .t4-navbar .navbar,
.header-block-3 .t4-navbar .container > nav,
.header-block-3 .t4-navbar .container > div.navbar{
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;      /* Nav mittig */
}
.header-block-3 .t4-navbar .navbar-nav{
  padding-left: 0 !important;
  margin: 0 auto !important;    /* UL mittig */
}

/* ========== ARTIKEL – BLOCK zentriert, Text links ==========
   (wir benutzen deine bestehende 9/12-Spalte und zentrieren sie) */
.item-page.no-sidebar .bottom-article-info .article-inner .row > .col-md-3{
  display: none;                /* linke Sidebar aus */
}
@media (min-width: 768px){
  .item-page.no-sidebar .bottom-article-info .article-inner .row > .col-md-9{
    margin-left: auto;          /* 9/12-Spalte zentrieren */
    margin-right: auto;
    float: none;
  }
}
/* Sicherheit: alles, was sich aus Versehen zentriert, bleibt im Text links */
.item-page .article-body,
.item-page .article-introtext,
.item-page .page-header,
.item-page .page-header h1,
.item-page .article-details{ text-align: left !important; }
.item-page .text-center,
.item-page [style*="text-align:center"]{ text-align: left !important; }

/* ========== INTRO-SECTION (Startseite) – Block zentriert, Text links ========== */
.ws-intro{
  max-width: 72ch;
  margin: clamp(16px, 4vw, 48px) auto;   /* zentriert */
  padding: 0 clamp(12px, 2vw, 24px);
}
.ws-intro h1{ text-align: center; margin: 0 0 .6em; }
.ws-intro p{ margin: 0 0 1em; }
.ws-iconrow{
  display:flex; gap:clamp(12px,2vw,20px);
  justify-content:center; align-items:center; flex-wrap:wrap;
  margin-bottom:clamp(12px,2.2vw,18px);
}
.ws-iconrow img{ width:clamp(56px,8vw,90px); height:auto; }
.ws-runes{
  display:flex; gap:clamp(6px,1.2vw,12px);
  justify-content:center; align-items:center; flex-wrap:wrap;
  margin-bottom:clamp(10px,2vw,20px);
}
.ws-runes img{ height:clamp(22px,2.8vw,32px); width:auto; }

/* ========== CHRONIK – Look (keine Größenkollisionen) ========== */
:root{
  --font-head: "Cinzel", serif;
  --font-body: "EB Garamond", serif;
  --font-accent:"Caudex", serif;
}
.ws-chronik{
  font-family: var(--font-body);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}
.ws-chronik h1, .ws-chronik h2, .ws-chronik h3{
  font-family: var(--font-head);
  letter-spacing: .3px;
  line-height: 1.2;
  margin: .6em 0 .35em;
}
.ws-chronik .dropcap::first-letter{
  initial-letter: 2; -webkit-initial-letter: 2;
  font-family: var(--font-accent);
  font-weight: 400; line-height: .9; margin-right: .06em; color: inherit;
}
@supports not (initial-letter: 2){
  .ws-chronik .dropcap::first-letter{
    float: left; font-family: var(--font-accent);
    font-size: 3.1em; line-height: .85; margin-right: .12em; margin-top: .02em;
  }
}

/* ========== TYPO – überall gleich (H1 ok, H2/H3 kleiner) ========== */
.item-page .article-body p,
.item-page .article-body li,
.item-page .article-introtext p,
.item-page .article-introtext li,
.com-content-article p,
.com-content-article li,
.ws-intro p, .ws-intro li,
.ws-chronik p, .ws-chronik li{
  font-size: clamp(1rem, 0.12vw + 0.98rem, 1.0625rem) !important;
  line-height: 1.65;
}
.item-page .article-body h1,
.item-page .page-header h1,
.ws-intro h1, .ws-chronik h1{
  font-size: clamp(1.8rem, 1.6vw + 1rem, 2.4rem) !important;
  line-height: 1.2; font-weight:700; letter-spacing:.3px; margin:.6em 0 .35em;
}
.item-page .article-body h2,
.ws-intro h2, .ws-chronik h2{
  font-size: clamp(1.3rem, 1.1vw + 0.85rem, 1.75rem) !important;
  line-height: 1.25; font-weight:700; letter-spacing:.22px; margin:.6em 0 .35em;
}
.item-page .article-body h3,
.ws-intro h3, .ws-chronik h3{
  font-size: clamp(1.1rem, 0.8vw + 0.65rem, 1.35rem) !important;
  line-height: 1.28; font-weight:700; letter-spacing:.18px; margin:.6em 0 .35em;
}
.item-page .article-body h1 strong,
.item-page .article-body h2 strong,
.item-page .article-body h3 strong,
.ws-intro h1 strong, .ws-intro h2 strong, .ws-intro h3 strong{
  font-weight: inherit;
}

/* ========== Media Basics ========== */
.ws-figure{ margin:1.2rem 0; }
.ws-figure img{ width:100%; height:auto; display:block; border-radius:12px; }
.ws-figure figcaption{ font-size:.95rem; opacity:.8; margin-top:.4rem; }
.ws-grid{ display:grid; gap:clamp(10px,2vw,18px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }

/* ========== Accessibilty ========== */
@media (prefers-reduced-motion: reduce){
  .ws-chronik *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
/* === Feinabstimmung Headlines – kompaktere Skala (H1/H2/H3) === */
/* maximale Spezifität + !important, damit Template-Regeln sicher übersteuert werden */

html body .item-page .page-header h1,
html body .item-page .article-body h1,
html body .com-content-article h1,
html body .ws-intro h1,
html body .ws-chronik h1{
  font-size: clamp(1.4rem, 1vw + 0.9rem, 1.9rem) !important;  /* vorher 2.1–2.4rem */
  line-height: 1.18 !important;
  letter-spacing: .22px !important;
  font-weight: 700 !important;
  margin: .55em 0 .32em !important;
}

html body .item-page .article-body h2,
html body .com-content-article h2,
html body .ws-intro h2,
html body .ws-chronik h2{
  font-size: clamp(1.2rem, 0.8vw + 0.75rem, 1.4rem) !important;  /* vorher ~1.55–1.75rem */
  line-height: 1.22 !important;
  letter-spacing: .18px !important;
  font-weight: 700 !important;
  margin: .55em 0 .32em !important;
}

html body .item-page .article-body h3,
html body .com-content-article h3,
html body .ws-intro h3,
html body .ws-chronik h3{
  font-size: clamp(1.05rem, 0.6vw + 0.65rem, 1.2rem) !important; /* vorher ~1.25–1.35rem */
  line-height: 1.24 !important;
  letter-spacing: .16px !important;
  font-weight: 700 !important;
  margin: .55em 0 .30em !important;
}

/* Kein Doppelfett, falls <strong> in der Überschrift steckt */
html body h1 strong, 
html body h2 strong, 
html body h3 strong{ 
  font-weight: inherit !important; 
}
/* === Headlines Feinschliff: H2/H3 kleiner (H1 unverändert) === */

html body .item-page .article-body h2,
html body .com-content-article h2,
html body .ws-intro h2,
html body .ws-chronik h2{
  font-size: clamp(1.15rem, 0.7vw + 0.70rem, 1.30rem) !important;
  line-height: 1.22 !important;
  letter-spacing: .18px !important;
  font-weight: 700 !important;
  margin: .5em 0 .3em !important;
}

html body .item-page .article-body h3,
html body .com-content-article h3,
html body .ws-intro h3,
html body .ws-chronik h3{
  font-size: clamp(1.02rem, 0.5vw + 0.62rem, 1.12rem) !important;
  line-height: 1.22 !important;
  letter-spacing: .15px !important;
  font-weight: 700 !important;
  margin: .5em 0 .28em !important;
}

/* Strong in Überschriften nicht doppelt fett */
html body h2 strong, 
html body h3 strong{ 
  font-weight: inherit !important; 
}