:root {
  /* Brand — literary crimson, ink, paper */
  --c-accent:        #b91d36;            /* crimson, evoking book covers */
  --c-accent-dark:   #8e1428;
  --c-accent-soft:   rgba(185, 29, 54, 0.08);
  --c-accent-glow:   rgba(185, 29, 54, 0.18);
  --c-ink:           #1a1814;            /* near-black, warm */
  --c-ink-soft:      #3a3530;
  --c-text:          #2a2520;
  --c-muted:         #6b6258;
  --c-soft:          #948a7e;
  --c-paper:         #f7f3ec;            /* off-white, warm */
  --c-paper-2:       #efe8da;
  --c-card:          #ffffff;
  --c-line:          rgba(26, 24, 20, 0.10);
  --c-line-strong:   rgba(26, 24, 20, 0.20);
  --c-rule:          rgba(26, 24, 20, 0.06);

  /* Type */
  --f-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body:    'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Layout */
  --container-max:   1100px;
  --container-pad:   28px;
  --col-gap:         40px;
  --col-right-w:     280px;
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Effects */
  --shadow-sm: 0 2px 6px rgba(26, 24, 20, 0.06);
  --shadow-md: 0 16px 36px -14px rgba(26, 24, 20, 0.22);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
a:hover { color: var(--c-accent-dark); }

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }

button, input { font: inherit; color: inherit; }
input:focus, button:focus { outline: none; }

/* Screen-reader text helper */
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Suppress the floating "wp-image" badges so we don't crowd photos */
.wp-smiley, .emoji { vertical-align: middle; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; }
h2 { font-size: 1.6rem; font-weight: 500; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 0.95rem; }
h6 {
  font-size: 0.78rem;
  font-family: var(--f-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-accent);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   4. STAGE — outer page container
   -------------------------------------------------------------------------- */
#stage {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  background: var(--c-paper);
}

/* --------------------------------------------------------------------------
   5. HEADER — logo + event titles + main menu
   -------------------------------------------------------------------------- */
#header {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 36px var(--container-pad) 30px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo  text"
    "menu  menu";
  gap: 24px 36px;
  align-items: start;
  position: relative;
}
#header::after {
  content: "";
  position: absolute;
  left: var(--container-pad);
  right: var(--container-pad);
  bottom: 0;
  height: 1px;
  background: var(--c-line);
}

/* Logo block */
#header > a:first-child {
  grid-area: logo;
  display: block;
}
#logo-top {
  width: 200px;
  height: 90px;
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.04em;
  position: relative;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
  overflow: hidden;
}
#logo-top::before {
  content: "BUCH WIEN";
  position: relative;
  z-index: 2;
}
#logo-top::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 4px;
  background: var(--c-accent);
  z-index: 1;
}
#header > a:first-child:hover #logo-top {
  background: var(--c-accent);
  transform: translateY(-2px);
}
#header > a:first-child:hover #logo-top::after {
  background: var(--c-paper);
}

/* Header text — three event titles */
#headertext {
  grid-area: text;
  padding-top: 6px;
}
#headertext h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.55rem;
  color: var(--c-ink);
  margin: 0 0 2px;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
#headertext h1:first-child {
  font-size: 1.85rem;
  font-style: normal;
  font-weight: 600;
}
#headertext p {
  margin: 0 0 14px;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}
#headertext p:empty,
#headertext br { display: none; }
/* The third title's date is a bare text node (not wrapped in <p>); add some spacing under each title via the heading itself */
#headertext h1 + p:not(:empty) {
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   6. MAIN NAVIGATION
   -------------------------------------------------------------------------- */
.menu-wrapper {
  grid-area: menu;
  width: 100%;
  margin-top: 14px;
}
#menu-hauptmenue {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
#menu-hauptmenue > li {
  position: relative;
}
#menu-hauptmenue > li > a {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  position: relative;
  transition: color 0.2s var(--ease);
}
#menu-hauptmenue > li > a::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px;
  bottom: 6px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
#menu-hauptmenue > li.current-menu-item > a,
#menu-hauptmenue > li:hover > a {
  color: var(--c-accent);
}
#menu-hauptmenue > li.current-menu-item > a::after,
#menu-hauptmenue > li:hover > a::after {
  transform: scaleX(1);
}

/* Caret on parents */
#menu-hauptmenue > li.menu-item-has-children > a {
  padding-right: 32px;
}
#menu-hauptmenue > li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.25s var(--ease);
  opacity: 0.65;
}
#menu-hauptmenue > li.menu-item-has-children:hover > a::before {
  transform: translateY(-30%) rotate(-135deg);
  opacity: 1;
}

/* Submenus */
#menu-hauptmenue .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #fff;
  border-top: 3px solid var(--c-accent);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  z-index: 50;
}
#menu-hauptmenue > li:hover > .sub-menu,
#menu-hauptmenue .sub-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear;
}
#menu-hauptmenue .sub-menu a {
  display: block;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), padding-left 0.2s var(--ease);
}
#menu-hauptmenue .sub-menu a:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  padding-left: 28px;
}

/* Nested submenus open to the right */
#menu-hauptmenue .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  border-top: 0;
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Indicate parents in submenus */
#menu-hauptmenue .sub-menu .menu-item-has-children > a {
  padding-right: 32px;
  position: relative;
}
#menu-hauptmenue .sub-menu .menu-item-has-children > a::after {
  content: "›";
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-soft);
  font-size: 16px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   7. HEADER-BELOW — search + social icons strip
   -------------------------------------------------------------------------- */
#header-below {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  position: relative;
  border-bottom: 1px solid var(--c-rule);
}
#naviheadline-lev2 { flex: 1; }
#searchwrapper {
  display: flex;
  align-items: center;
  gap: 18px;
}
#search { display: flex; }
#searchform {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #fff;
  padding: 3px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
#searchform:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-glow);
}
#suchfeld { flex: 1; }
#suchfeld input[type="text"] {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  font-size: 14px;
  width: 240px;
  color: var(--c-ink);
  font-family: var(--f-body);
}
#suchfeld input[type="text"]::placeholder { color: var(--c-soft); }
#searchsubmit {
  background: var(--c-ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 7px 18px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
#searchsubmit:hover { background: var(--c-accent); }

/* Social/Newsletter icons */
#links ul {
  display: flex;
  gap: 8px;
}
#links li { display: inline-flex; }
#links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink);
  font-size: 0;
  border: 1px solid var(--c-line);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
#links a:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  transform: translateY(-2px);
}
#links a::before {
  font-size: 15px;
  line-height: 1;
  font-family: var(--f-body);
  font-weight: 700;
}
.icons-newsletter::before { content: "✉"; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 13px; }
.icons-facebook::before   { content: "f"; font-family: Georgia, serif; }
.icons-twitter::before    { content: "𝕏"; font-family: 'Segoe UI', sans-serif; font-size: 13px; }

/* --------------------------------------------------------------------------
   8. CONTENT — two-column layout (col-left + col-right)
   -------------------------------------------------------------------------- */
#content {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px var(--container-pad) 60px;
  display: grid;
  grid-template-columns: 1fr var(--col-right-w);
  grid-template-areas:
    "intro intro"
    "left  right";
  gap: 30px var(--col-gap);
}

/* --------------------------------------------------------------------------
   9. INTRO / PULL QUOTE BLOCK
   -------------------------------------------------------------------------- */
#introtext {
  grid-area: intro;
  padding: 30px 0 36px;
  border-bottom: 1px solid var(--c-line);
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
#introtext::before {
  content: "\201C";
  display: block;
  font-family: var(--f-display);
  font-size: 5rem;
  font-weight: 600;
  color: var(--c-accent);
  line-height: 0.5;
  margin-bottom: 8px;
  opacity: 0.6;
}
#introtext p {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--c-ink);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
#introtext h6 {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0;
  font-weight: 500;
}
#introtext h6::before {
  content: "— ";
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   10. ARTICLE CARDS — .content-start
   -------------------------------------------------------------------------- */
#col-left {
  grid-area: left;
  min-width: 0;
}
.content-start {
  background: var(--c-card);
  border-radius: var(--r-lg);
  padding: 32px 36px 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.content-start:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.content-start h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.18;
  color: var(--c-ink);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
}
.content-start > a:first-child {
  display: block;
  text-decoration: none;
}
.content-start > a:first-child:hover h1 {
  color: var(--c-accent);
}
.content-start > a:first-child h1 {
  cursor: pointer;
}

/* Article image */
.content-start img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin: 0 0 18px;
  display: block;
  transition: transform 0.5s var(--ease);
}
.content-start > a:first-child:hover img {
  transform: scale(1.01);
}

.content-start p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text);
  margin: 0 0 0.85em;
}
.content-start p:last-of-type { margin-bottom: 16px; }

/* "Weiter lesen" continuation link */
.content-start > a:last-child:not(:first-child) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  padding: 8px 0;
  position: relative;
  transition: color 0.2s var(--ease), letter-spacing 0.2s var(--ease);
}
.content-start > a:last-child:not(:first-child)::after {
  content: "→";
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 400;
  transition: transform 0.25s var(--ease);
}
.content-start > a:last-child:not(:first-child):hover {
  color: var(--c-accent-dark);
}
.content-start > a:last-child:not(:first-child):hover::after {
  transform: translateX(4px);
}

/* Inline "Weiter lesen" links inside paragraphs (e.g. Familienprogramm) */
.content-start p a {
  color: var(--c-accent);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.content-start p a:hover {
  border-bottom-color: var(--c-accent);
}

/* "Older entries" pagination link */
#breadcrumb-bottom {
  margin: 30px 0 0;
  padding: 18px 0;
  text-align: center;
  border-top: 1px solid var(--c-line);
}
#breadcrumb-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
#breadcrumb-bottom a:hover {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
}
#breadcrumb-bottom a::before {
  content: "←";
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   11. RIGHT SIDEBAR — info boxes
   -------------------------------------------------------------------------- */
#col-right {
  grid-area: right;
  min-width: 0;
}
.info-box {
  background: var(--c-card);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--c-accent);
}
.info-box h6 {
  font-family: var(--f-display);
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  margin: 0 0 12px;
}
.info-box > a:first-child {
  text-decoration: none;
}
.info-box > a:first-child:hover h6 {
  color: var(--c-accent);
}
.info-box p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0 0 14px;
}
.info-box p:last-child { margin-bottom: 0; }
.info-box > a:last-child:not(:first-child) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.info-box > a:last-child:not(:first-child)::after {
  content: "→";
  transition: transform 0.25s var(--ease);
}
.info-box > a:last-child:not(:first-child):hover::after {
  transform: translateX(3px);
}

/* Info box that contains only an image (Ö-Töne ad) — looser padding */
.info-box:has(> p > a > img) {
  padding: 0;
  background: transparent;
  border-top: 0;
  box-shadow: none;
}
.info-box:has(> p > a > img) p {
  margin: 0;
}
.info-box:has(> p > a > img) img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.info-box:has(> p > a > img) a:hover img {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
#footer {
  background: var(--c-ink);
  color: rgba(247, 243, 236, 0.75);
  margin-top: 60px;
}
#footer-top {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 60px var(--container-pad) 40px;
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-areas:
    "menu  imprint"
    "links social";
  gap: 30px 50px;
}

/* Footer menu — flatten into single row of top-level items */
.menu-footer-wrapper {
  grid-area: menu;
}
#menu-hauptmenue-1 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-bottom: 18px;
}
#menu-hauptmenue-1 > li > a {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--c-paper);
  transition: color 0.2s var(--ease);
  position: relative;
}
#menu-hauptmenue-1 > li > a:hover {
  color: var(--c-accent);
}
#menu-hauptmenue-1 > li.current-menu-item > a {
  color: var(--c-accent);
}
#menu-hauptmenue-1 > li.current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-accent);
}
/* Hide the deep sub-menus in the footer — keep it clean */
#menu-hauptmenue-1 .sub-menu { display: none; }

/* Bottom links + social */
#bottomlinks {
  grid-area: links;
}
#bottomlinks ul {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
#bottomlinks a {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, 0.5);
  transition: color 0.2s var(--ease);
}
#bottomlinks a:hover { color: var(--c-accent); }

#social {
  grid-area: social;
  align-self: end;
}
#social ul {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
#social a {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, 0.65);
  transition: color 0.2s var(--ease);
}
#social a:hover { color: var(--c-accent); }

/* Imprint */
#imprint {
  grid-area: imprint;
  border-left: 1px solid rgba(247, 243, 236, 0.1);
  padding-left: 30px;
}
#imprint p {
  font-family: var(--f-body);
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(247, 243, 236, 0.65);
  margin: 0;
}

/* --------------------------------------------------------------------------
   13. FOOTER BOTTOM — large logo + event titles+dates
   -------------------------------------------------------------------------- */
#footer-bottom {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px var(--container-pad) 50px;
  border-top: 1px solid rgba(247, 243, 236, 0.1);
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 24px 40px;
  align-items: center;
}
#footer-bottom > a:first-child {
  grid-column: 1;
  grid-row: 1 / span 4;
  display: block;
}
#logo-bottom {
  width: 200px;
  height: 90px;
  background: var(--c-paper);
  color: var(--c-ink);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
  transition: background 0.25s var(--ease);
}
#logo-bottom::before {
  content: "BUCH WIEN";
  z-index: 2;
}
#logo-bottom::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 4px;
  background: var(--c-accent);
}
#footer-bottom > a:first-child:hover #logo-bottom {
  background: var(--c-accent);
  color: #fff;
}

#footer-bottom h1 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--c-paper);
  margin: 0;
  line-height: 1.15;
}
#footer-bottom h1:first-of-type { font-style: normal; font-weight: 600; }
#footer-bottom p {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 4px 0 0;
}
#footer-bottom br[clear="all"] {
  /* allow the bare line breaks the markup uses to add some breathing room */
  display: block;
  height: 4px;
  content: "";
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  :root { --col-gap: 28px; --col-right-w: 240px; }

  #header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "text"
      "menu";
    gap: 20px;
  }
  #headertext { padding-top: 0; }

  #menu-hauptmenue { justify-content: flex-start; }

  #footer-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "menu"
      "imprint"
      "links"
      "social";
    gap: 24px;
  }
  #imprint { border-left: 0; padding-left: 0; border-top: 1px solid rgba(247,243,236,0.08); padding-top: 20px; }
  #social ul { justify-content: flex-start; }

  #footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }
  #footer-bottom > a:first-child { grid-column: 1; grid-row: 1; margin: 0 auto 20px; }
  #logo-bottom { margin: 0 auto; }
}

@media (max-width: 720px) {
  :root { --container-pad: 18px; }
  body { font-size: 15px; }

  #header { padding: 24px var(--container-pad) 20px; }
  #logo-top { width: 160px; height: 70px; font-size: 1.6rem; }
  #headertext h1, #headertext h1:first-child { font-size: 1.4rem; }

  /* Main nav: stack vertically as accordion-style links */
  #menu-hauptmenue {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #menu-hauptmenue > li {
    border-bottom: 1px solid var(--c-line);
  }
  #menu-hauptmenue > li > a {
    width: 100%;
    padding: 14px 0;
    font-size: 15px;
  }
  #menu-hauptmenue > li > a::after,
  #menu-hauptmenue > li.menu-item-has-children > a::before { display: none; }
  /* Hide submenus on mobile (too deep) — main nav becomes flat */
  #menu-hauptmenue .sub-menu { display: none; }

  #header-below { flex-direction: column; align-items: stretch; gap: 14px; }
  #searchwrapper { flex-direction: column; align-items: stretch; }
  #searchform { width: 100%; }
  #suchfeld input[type="text"] { width: 100%; }
  #links ul { justify-content: flex-start; }

  /* Content: single column */
  #content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "left"
      "right";
    padding: 28px var(--container-pad) 40px;
    gap: 24px;
  }

  .content-start { padding: 24px 22px 20px; }
  .content-start h1 { font-size: 1.4rem; }

  #footer-top { padding: 40px var(--container-pad) 30px; }
  #footer-bottom { padding: 30px var(--container-pad) 40px; }
  #footer-bottom h1 { font-size: 1.1rem; }
}

@media (max-width: 420px) {
  #introtext p { font-size: 1.1rem; }
  #introtext::before { font-size: 4rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .content-start:hover { transform: none; }
}

/* End of stylesheet */