/* =========================================================================
   Kloster Wonnental — 1:1-Nachbau des Original-Designs (GeneratePress/WordPress).
   Farben, Maße und Struktur aus kloster-wonnental.de übernommen.
   ========================================================================= */

:root {
  --link:       #1e73be;
  --link-hover: #000000;
  --text:       #3a3a3a;
  --page-bg:    #efefef;
  --dark:       #222222;
  --dark-hover: #3f3f3f;
  --dark-hover-2:#4f4f4f;
  --frame:      1500px;
  --sans: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; }
img { max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }

body {
  font-family: var(--sans);
  font-size: 1rem; line-height: 1.5;
  color: var(--text); background: var(--page-bg);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
.entry-content a:hover { text-decoration: underline; }
a:hover, a:focus, a:active { color: var(--link-hover); }

.skip { position: absolute; left: -999px; top: 0; z-index: 30; background: var(--dark); color: #fff; padding: .5rem .9rem; text-decoration: none; }
.skip:focus { left: .5rem; top: .5rem; }

.grid-container { max-width: var(--frame); margin: 0 auto; padding: 0 20px; }

/* ---------- Kopf ---------- */
.site-header { background: #ffffff; color: var(--text); }
.site-header .inside-header {
  max-width: var(--frame); margin: 0 auto; padding: 17px 20px 20px;
  display: flex; flex-direction: column; align-items: flex-start; gap: .5em;
}
.main-title { margin: 0; font-size: 35px; font-weight: 700; line-height: 1.2; }
.main-title a, .main-title a:hover { color: #222222; text-decoration: none; }
.site-logo { display: inline-block; }
.site-logo a { display: block; }
.header-image { display: block; width: 400px; max-width: 100%; height: auto; }

/* ---------- Navigation (dunkle Leiste) ---------- */
.main-navigation { background: var(--dark); }
.main-navigation .inside-navigation { max-width: var(--frame); margin: 0 auto; padding: 0 20px; position: relative; }
.main-navigation a { text-decoration: none; }

.menu-toggle {
  display: none; width: 100%; padding: 0 20px; line-height: 60px; margin: 0;
  font: inherit; font-size: 15px; font-weight: 400; color: #fff;
  background: transparent; border: 0; text-align: center; cursor: pointer;
}

.main-nav > ul.menu { display: flex; flex-wrap: wrap; }
.main-nav ul.menu > li { position: relative; }
.main-nav ul.menu > li > a {
  display: block; padding: 0 20px; line-height: 60px; color: #fff; font-size: 15px; font-weight: 400;
}
.main-nav li.menu-item-has-children > a::after {
  content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .5em; margin-bottom: .15em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.main-nav li:not(.current-menu-item):hover > a,
.main-nav li:not(.current-menu-item):focus-within > a { background: var(--dark-hover); color: #fff; }
.main-nav li.current-menu-item > a { background: var(--dark-hover); color: #fff; }

/* Untermenü: Flyout nach rechts, wie im Original (sub-menu-right) */
.main-nav ul.children {
  position: absolute; top: 0; left: -99999px; width: 200px; z-index: 999;
  background: var(--dark-hover); box-shadow: 1px 1px 0 rgba(0,0,0,.1);
  opacity: 0; pointer-events: none; height: 0; overflow: hidden;
  transition: opacity 80ms linear;
}
.main-nav li.menu-item-has-children:hover > ul.children,
.main-nav li.menu-item-has-children:focus-within > ul.children {
  left: 100%; opacity: 1; pointer-events: auto; height: auto; overflow: visible; transition-delay: 150ms;
}
.main-nav ul.children li { width: 100%; }
.main-nav ul.children a { display: block; padding: 10px 20px; font-size: 14px; color: #fff; }
.main-nav ul.children li:not(.current-menu-item):hover > a { background: var(--dark-hover-2); }
.main-nav ul.children li.current-menu-item > a { background: var(--dark-hover-2); }

/* ---------- Inhalt: zweispaltig (Content + Sidebar) ---------- */
.site { padding-top: 40px; padding-bottom: 40px; }
.site-content { display: flex; flex-wrap: wrap; gap: 0 40px; align-items: flex-start; }

.content-area { flex: 1 1 70%; min-width: 0; }
.site-main .inside-article { background: #ffffff; padding: 24px 40px 40px; }

/* Wie im Original: normale Blöcke bekommen 1.5em Abstand, Überschriften sind davon
   ausgenommen (eigene, kleinere margin unten) — kein Spezifitätskonflikt, weil Überschriften
   hier komplett aus der generischen Regel rausfallen statt sie zu überschreiben. */
.entry-content > *:not(:last-child):not(h1):not(h2):not(h3) { margin-bottom: 1.5em; }
.entry-content h1, .entry-content h2, .entry-content h3 { margin: 0 0 .3em; }
.entry-content h1 { font-weight: 300; font-size: 40px; }
.entry-content h2 { font-weight: 300; font-size: 30px; }
.entry-content h3 { font-size: 20px; }
.entry-content h1:not(:last-child):has(+ :not(h1):not(h2):not(h3)),
.entry-content h2:not(:last-child):has(+ :not(h1):not(h2):not(h3)),
.entry-content h3:not(:last-child):has(+ :not(h1):not(h2):not(h3)) {
  margin-bottom: 1em;
}
.entry-content img { display: block; }
.entry-content figure { margin: 0 0 1em; }
.entry-content figure.aligncenter { width: fit-content; margin-left: auto; margin-right: auto; text-align: center; }
.entry-content figcaption { text-align: left; font-size: .85rem; color: #595959; margin-top: .4em; }
.entry-content pre {
  background: rgba(0,0,0,.05); font-family: inherit; font-size: inherit; line-height: normal;
  padding: 20px; overflow: auto; max-width: 100%; white-space: pre-wrap; word-break: break-word;
}

.entry-content .wp-block-table { overflow-x: auto; margin: 0 0 1em; }
.entry-content table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  border: 1px solid rgba(0,0,0,.1); border-width: 1px 0 0 1px;
}
.entry-content th, .entry-content td { padding: 8px; border-width: 0 1px 1px 0; border-style: solid; border-color: rgba(0,0,0,.1); text-align: left; }
.entry-content th { font-weight: 700; }
.entry-content .wp-block-table.is-style-stripes table { border: none; border-collapse: collapse; }
.entry-content .wp-block-table.is-style-stripes th,
.entry-content .wp-block-table.is-style-stripes td { border: none; }
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: rgba(0,0,0,.04); }

.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.wp-block-spacer { display: block; }

.page-title { font-weight: 300; font-size: 40px; margin: 0 0 .6em; }

/* ---------- Sidebar ---------- */
.widget-area.sidebar { flex: 0 0 300px; max-width: 300px; }
.widget-area .widget {
  background: #ffffff; padding: 20px; margin-bottom: 20px; font-size: 17px;
}
.widget-title { color: #000000; font-size: 1.1rem; margin: 0 0 .7em; }
.widget_pages ul ul { margin-left: 1.1em; margin-top: .3em; }
.widget_pages li { margin-bottom: .3em; }
.widget_pages a, .widget_search a { text-decoration: none; }
.widget_pages a:hover { text-decoration: underline; }

.search-form { position: relative; }
.search-field {
  width: 100%; box-sizing: border-box; color: #666; background: #fafafa; border: 1px solid #ccc;
  padding: .5em .6em; font: inherit;
}
.search-field:focus { background: #fff; border-color: #bfbfbf; outline: none; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px);
}

.search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: .4em; z-index: 50;
  background: #fff; border: 1px solid #ddd; box-shadow: 0 4px 14px rgba(0,0,0,.12);
  max-height: 60vh; overflow-y: auto;
}
.search-results__item {
  display: block; padding: .6em .8em; text-decoration: none; border-bottom: 1px solid #eee;
}
.search-results__item:last-child { border-bottom: 0; }
.search-results__item:hover, .search-results__item:focus { background: #f4f4f4; }
.search-results__title { display: block; color: var(--link); font-weight: 600; font-size: .95rem; }
.search-results__excerpt { display: block; color: #666; font-size: .82rem; margin-top: .15em; }
.search-results__empty { margin: 0; padding: .7em .8em; color: #666; font-size: .9rem; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.notfound { padding: 1rem 0 3rem; }
.notfound__code { font-size: 3rem; font-weight: 700; color: #6a6862; margin: 0 0 .5rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Mobil ---------- */
@media (max-width: 46em) {
  .site-header .inside-header { justify-content: center; text-align: center; }

  .menu-toggle { display: block; }
  .main-nav { display: none; }
  .main-navigation.toggled .main-nav { display: block; }
  .main-nav > ul.menu { display: block; }
  .main-nav ul.menu > li { display: block; }
  .main-nav ul.menu > li > a { line-height: normal; padding: .7rem 20px; }

  .main-nav ul.children {
    position: static; width: 100%; opacity: 1; height: 0; overflow: hidden; pointer-events: none;
    box-shadow: none; transition: none;
  }
  .main-nav li.toggled-on > ul.children { height: auto; overflow: visible; pointer-events: auto; }
  .main-nav ul.children a { padding-left: 40px; }

  .site-content { display: block; }
  .content-area, .widget-area.sidebar { width: 100%; max-width: none; flex: none; }
  .widget-area.sidebar { margin-top: 40px; }
  .site-main .inside-article { padding: 30px; }
  .header-image { width: 260px; }
}

/* ---------- Druck ---------- */
@media print {
  .site-header, .main-navigation, .widget-area.sidebar { display: none !important; }
  body { background: #fff; color: #000; }
  .site-content { display: block; }
  .site-main .inside-article { padding: 0; }
  .entry-content a { color: #000; text-decoration: none; }
}