/* === Mainstream Outside – Comments Pro Overrides === */
:root {
  --mo-green: #1c6c45;        /* Standard-Grün */
  --mo-green-hover: #1a9c60;  /* Hover/Active-Grün */
  --latest-thumb-w: 400px;   /* falls noch nicht gesetzt */
  --thumb-border: 3px;       /* 3px Rahmen in beiden Spalten */
  --latest-gap: 36px;     /* etwas mehr Abstand für die Trennlinie */
  --latest-divider: #ecddbe; /* beige, gut sichtbar */
}

@font-face {
  font-family: 'Varela Round';
  src: url('../fonts/VarelaRound-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STENCIL';
  src: url('../fonts/STENCIL.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  background-image: url('https://mainstream-outside.com/user/themes/quark-open-publishing/images/mainstream-outside-site-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #000;
  z-index: 0;
  font-family: 'Varela Round', sans-serif;
  font-size: 17px;
  color: #ecddbe;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  display: block !important;
}

p {
  margin-bottom: 1.4em;
  line-height: 1.6;
}

h1, h2, h3, h4, h5 {
  font-family: 'Varela Round', sans-serif;
  color: #ecddbe;
}

/* Icon in der H2 sauber layouten + Hover aktivieren */
.mo-section-title .mo-social{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
}

.mo-section-title .mo-social img{
  display:block;
  width:27px; height:27px;
  transition: brightness .15s ease, border-color .15s ease, transform .05s ease;
}

.mo-section-title .mo-social:hover img{
  display:block;
  width:27px; height:27px;
  transition: brightness .15s ease, filter .15s ease;
  filter: brightness(1.6);
  transform: translateY(-1px);
}

a, a:visited {
  color: #1c6c45;
  font-weight: normal;
  text-decoration: none;
}

a:hover {
  color: #1a9c60;
  font-weight: normal;
  text-decoration: none;
}

.is-category .page-title { display: none; }

.mo-mobile-slogan { display: none; }

.main-nav {
  font-family: 'STENCIL', sans-serif;
  font-size: 22px;
  font-weight: normal;
  background-color: #000;
  text-align: center;
  margin-top: 0;
  margin: 0 auto;
  max-width: 960px;
  white-space: nowrap;
  border-radius: 0 0 10px 10px;
  padding: 10px 0;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 16px;
}

.main-nav li {
  position: relative;
}

.main-nav a {
  color: #ecddbe;
  text-decoration: none;
  padding: 5px 10px;
}

.main-nav a:hover {
  color: #fff;
  background-color: #1c6c45;
  border-radius: 6px;
  padding: 5px 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #000;
  padding: 10px;
  z-index: 10;
}

.main-nav li:hover > ul {
  display: block;
}

.container.custom-container {
  max-width: 960px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 10px;
  padding: 0 20px;
  margin: 0 auto;
  margin-bottom: -30px;
}

.container.nav-container, .container.header-container {
  max-width: 960px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 10px;
  padding: 0 20px;
  margin: 0 auto;
}

/* Header-Container Desktop */
.desktop-header {
  width: 100%;
  height: auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

/* Header-Container Mobile (Platzhalter) */
.mobile-header {
  display: none;
  width: 100%;
  height: 250px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.header-frame {
  background-color: #000;
  max-width: 960px;
  margin: 0 auto;
  height: auto;
  padding: 22px 5px 0px 5px;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 25px auto 0 auto;
}

.header-bg {
  /* background-image: url('/user/themes/quark-open-publishing/images/mainstream-outside-header-bg.webp'); */
  background-image: url('https://mainstream-outside.com/user/themes/quark-open-publishing/images/mainstream-outside-header-bg.webp');
  background-size: cover;
  background-position: center;
  background-color: #1c6c45;
  width: 100%;
  height: auto;
  max-height: 186.5px;
  max-width: var(--page-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.header-content {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.header-logo-link {
  display: flex;
  align-items: center;
  max-width: 25%;
  width: 100%;
}

/* Logo */
.header-logo {
  height: auto;
  max-height: 187px;
  width: 100%;
  object-fit: contain;
  padding-left: 3%;
}

/* Textblock */
.header-textblock {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 40%;
  max-width: 60%;
  max-height: 187px;
  text-align: center;
  color: #ecddbe;
  padding: 0 10px;
}

.header-textblock h1 {
  font-family: 'Varela Round', sans-serif;
  font-size: 1.65em;
  font-weight: normal;
  line-height: 1.1;
  text-shadow: 2px 2px 4px #000f03,
  5px 5px 7px #000f03;
}

.header-textblock p {
  font-family: 'Varela Round', sans-serif;
  font-size: 1.4em;
  margin-top: 0.6em;
  opacity: 0.8;
  text-shadow: 2px 2px 4px #000f03,
  5px 5px 7px #000f03;
}

/* Punk-Grafik rechts */
.header-right-img {
  height: auto;
  max-height: 187px;
  width: 100%;
  max-width: 25%;
  align-self: flex-end;
  display: block;
  object-fit: contain;
  padding-top: 0.15%;
  padding-right: 1.5%;
}

/* Patreon box in Latest (right column) */
#latest2 .patreon{
  width: var(--latest-thumb-w);     /* folgt deiner Kartenbreite (400px / 100% mobil) */
  max-width: 100%;
  margin: 16px auto 4px;           /* leicht näher an den Titel rücken */
  text-align: center;
  padding: 12px 14px;
  background: #111;
  border: 1px solid #1c6c45;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Standard: Desktop zeigt die rechte-Spalten-Version, Mobile-Version ausblenden */
.patreon--mobile { display: none; }
.patreon--desktop { display: block; }

#latest2 .patreon p{
  margin: 0 0 8px;
  line-height: 1.4;
}

#latest2 .patreon img{
  display: block;
  margin: 8px auto 0;
  max-width: 115px;                 /* dein Originalmaß */
  height: auto;
  border: 0 !important;             /* Rahmen sicher killen */
  box-shadow: none !important;
}

/* Link-Style im Kasten (falls du den Text verlinkst) */
#latest2 .patreon a{
  color: var(--mo-green);
  text-decoration: none;
  font-weight: 700;
}
#latest2 .patreon a:hover{ color: var(--mo-green-hover); }

#latest2 .patreon--mobile{
  margin-top: 25px;
  margin-bottom: 20px;
}

#body-wrapper {
  background-color: #000;
  max-width: 960px;
  margin: 30px auto 30px auto;
  border: 8px solid #1c6c45;
  border-radius: 12px;
  box-sizing: border-box;
}

#body-wrapper p > img {
  border: 5px solid #ecddbe;
  margin-top: 0;
  max-width: 100%;
  height: auto;
}

#body-wrapper h2{
  display: flow-root;
  /* padding-right: 14px;  // optional, wenn du überall den Abstand willst */
}
@supports not (display: flow-root){
  #body-wrapper h2{ overflow: hidden; }
}

/* Bilder ohne Rahmen – zielt nur auf Content-Bereich */
.no-border {
  border: 0 !important;
  box-shadow: none !important;
}

/* Bilder ohne Rahmen – zielt nur auf Content-Bereich */
.no-border-margin {
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: -22px;
}

img.linkborder {
  border: 5px solid #ecddbe !important;
}

/* Author box */
.author-box{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px; border:1px solid rgba(236,221,190,.35);
  border-radius:10px; background:#111; /* dunkles Grün-Schwarz vom Theme */
}

.author-photo{
  width:96px; height:96px; object-fit:cover;
  border-radius:10px; border:4px solid #ecddbe;
  flex:0 0 auto;
}

.author-bio{ flex:1 1 auto; min-width:0; color:#ecddbe; }
.author-name{ margin:0 0 6px 0; font-size:1.05rem; color:#ecddbe; }
.author-links a{ color:#ecddbe; opacity:.9; text-decoration:none; }
.author-links a:hover{ text-decoration:underline; }

.header-frame { padding-bottom: 0px; }

.page-title,
.register-page h2:first-of-type,
#latest.container.custom-container { 
  margin-top: -90px !important;
}

.mo-mobile-slogan{
  display: none;
}

.mo-mobile-slogan p{
  margin: 40px 0 -20px 0;
  text-align: center;
  font-family: 'Varela Round', sans-serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: normal;
  line-height: 1.5;
  color: #ecddbe;
}

#hero-featured,
#latest2.cat-page,
#latest2.tag-page {
  margin-top: -170px;
}

#body-wrapper h2 {
  font-size: 1.6em;
  font-weight: bold;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  color: #ecddbe;
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
}

#body-wrapper h3 {
  font-size: 1.3em;
  font-weight: bold;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  color: #ecddbe;
}

#body-wrapper h4 {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  color: #ecddbe;
}

 .page-title {
  font-size: 1.8em;
  font-weight: bold;
  }
  
.image-caption {
  font-size: 0.9em;
  color: #888;
  text-align: center !important;
  margin-top: -5px;
  margin-bottom: 24px;
  font-style: italic;
}

.custom-container blockquote {
  color: #888;
  font-style: italic;
}

.cat-h2-mob {
  display: none !important;
}

/* ===================== */
/* Grundlayout der Sektion */
/* ===================== */
.comments-header {
  margin-top: -60px;
}

.comments-section {
  background-color: #000;
  border: 2px solid #1c6c45;
  padding: 40px 30px;
  border-radius: 12px;
  margin: 60px auto;
  color: #ecddbe;
  box-sizing: border-box;
  max-width: 960px;
  font-size: 1em;
}

/* Überschrift ("Comments") */
.comments-section h3 {
  color: #ecddbe;
  font-size: 1.8em;
  margin-bottom: 1.2em;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Benachrichtigungs-Button */
.btn-notifications {
  background-color: #1c6c45;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
}

/* Sortierung: Label + Dropdown */
.sort-container {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.comments-section select {
  background-color: #000;
  color: #ecddbe;
  border: 1px solid #444;
  padding: 6px 12px;
  border-radius: 4px;
}

/* ===================== */
/* Kommentarlisten-Layout */
/* ===================== */
.comment-container {
  background-color: #000 !important;
  color: #ecddbe !important;
  padding: 18px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #1c6c45;
}

.comment-text {
  background-color: #000 !important;
  color: #ecddbe !important;
  padding: 18px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #1c6c45;
}

.comment-body {
  background-color: #000 !important;
  color: #ecddbe !important;
  padding: 18px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #1c6c45;
}

.comment-date {
  font-size: 0.85em;
  color: #ecddbe !important;
  margin-top: 5px;
}

.comment-author-info,
.comment-author-info strong {
  font-size: 0.95em;
  color: #ecddbe !important;
  margin-top: 5px;
}

/* Buttons: Reply / Quote */
.btn.btn-reply,
.btn.btn-quote {
  background-color: #ecddbe;
  color: #000;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.85em;
  margin-left: 8px;
  cursor: pointer;
}

.btn.btn-reply:hover,
.btn.btn-quote:hover {
  background-color: #fff !important;
}

/* ===================== */
/* Antwortformular / Replies */
/* ===================== */
.reply-form-container {
  background-color: #222 !important;
  border: none !important;
}

.reply-form {
  margin-top: 20px;
  background-color: #0b0b0b;
  border: 1px solid #1c6c45;
  padding: 20px;
  border-radius: 8px;
}

/* ===================== */
/* Eingabefelder und Formular */
/* ===================== */
.comment-form-section {
  margin-top: 30px;
  margin-bottom: -5px;
}

.comments-section input,
.comments-section textarea {
  background-color: #000;
  border: 1px solid #444;
  color: #ecddbe;
  padding: 10px 12px;
  width: 100%;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 12px;
}

/* Buttons: Post, Login etc. */
.comments-section button,
.btn-auth-mode,
.btn.btn-primary,
.btn-logout {
  background-color: #1c6c45;
  border: none;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
  margin-top: 15px;
}

.comments-section button:hover,
.btn-auth-mode:hover,
.btn.btn-primary:hover,
.btn-logout:hover,
.markdown-btn:hover,
.btn-notifications:hover {
  background-color: #1a9c60 !important;
}

/* Cancel-Button separat stylen */
.btn.btn-secondary {
  background-color: transparent !important;
  color: #aaa !important;
  border: 1px solid #444 !important;
  padding: 10px 16px;
  font-size: 1em;
  border-radius: 6px;
  margin-left: 10px;
}

.btn.btn-secondary:hover {
  background-color: #333 !important;
  color: #fff !important;
}

/* Umschaltleiste: Login / Guest */
.auth-mode-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border: none;
}

.btn-auth-mode.active {
  background-color: #1c6c45;
}

/* Primary-Aktionen: "Post Reply", "Login"-Submit */
.comments-section .btn-primary {
  background: var(--mo-green) !important;
  border-color: var(--mo-green) !important;
  color: #fff !important;
}
.comments-section .btn-primary:hover,
.comments-section .btn-primary:focus,
.comments-section .btn-primary:active {
  background: var(--mo-green-hover) !important;
  border-color: var(--mo-green-hover) !important;
}

/* Edit-Button */
.comments-section .btn-edit {
  background: var(--mo-green) !important;
  border-color: var(--mo-green) !important;
  color: #fff !important;
}

.comments-section .btn-edit:hover,
.comments-section .btn-edit:focus,
.comments-section .btn-edit:active {
  background: var(--mo-green-hover) !important;
  border-color: var(--mo-green-hover) !important;
}

/* Moderator-Aktionen Toggle */
.comments-section .btn-moderator-toggle {
  background: var(--mo-green) !important;
  color: #fff !important;
}

/* Moderator-Aktionen Toggle */
.comments-section .btn-moderator-toggle:hover,
.comments-section .btn-moderator-toggle:focus,
.comments-section .btn-moderator-toggle.active {
  background: var(--mo-green-hover) !important;
  color: #fff !important;
}

/* Login/Register Tabs – aktiver Tab grün */
.auth-mode-toggle .btn-auth-mode.active {
  background: var(--mo-green) !important;
  color: #fff !important;
}

/* Optional: Blaue Focus-Schatten auf Buttons killen */
.comments-section .btn:focus { box-shadow: none !important; }

/* Markdown Toolbar */
.markdown-toolbar {
  background-color: #000 !important;
  padding: 8px 10px;
  border-radius: 6px;
  margin-top: 10px;
  display: flex;
  gap: 6px;
}

.markdown-btn {
  background-color: #1c6c45 !important;
  color: #fff !important;
  border: none;
  font-weight: bold;
  font-size: 0.95em;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

/* Kommentar-Eingabefeld (Markdown Editor) */
.markdown-editor textarea {
  background-color: #000 !important;
  color: #ecddbe;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 12px;
  width: 100%;
  margin-top: 10px;
}

/* Zeichenanzahl + Moderationsinfo */
.char-counter,
.comment-length-counter {
  color: #777 !important;
  font-size: 0.85em;
  margin-top: 10px;
}

.char-counter.within-limit {
  color: #1c6c45;
}

.char-counter.over-limit {
  color: #c62828;
}

.form-notice {
  margin-top: 20px;
  font-size: 0.85em;
  color: #888;
}

/* Formularfelder: Name, Mail */
.form-field input,
.form-field textarea {
  background-color: #000;
  border: 1px solid #444;
  color: #ecddbe;
  padding: 10px;
  border-radius: 5px !important;
  margin-top: 12px;
}

.comment-auth-section,
.login-form,
.comment-form,
.markdown-editor {
  background-color: #222 !important;
}

.markdown-toolbar,
.login-form {
  border: none;
}

.comment-form .form-help {
  color: #777 !important;
}

.registration-link {
  color: #777 !important;
}

.registration-link a {
  color: #1c6c45 !important;
}

.registration-link a:hover {
  color: #1a9c60 !important;
}

.comment-actions {
  border-top: 1px solid #444 !important;
}

.comment-actions hr {
  color: #444 !important;
  border: none !important; 
}

.form-field input {
	border: 2px #444 solid !important;
}

/* Info: Login erforderlich */
.comment-auth-required {
  background-color: #111;
  color: #ecddbe;
  padding: 20px;
  border: 1px solid #1c6c45;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 30px;
  font-size: 1em;
}

/* Placeholder im Markdown-Kommentar-Feld */
.markdown-editor textarea::placeholder {
  color: #777;
}

/* Umschaltleiste Login / Guest */
.auth-mode-toggle .btn-auth-mode {
  background-color: #444;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.auth-mode-toggle .btn-auth-mode:hover {
  background-color: #666;
}

.auth-mode-toggle .btn-auth-mode.active {
  background-color: #1c6c45;
}

.auth-mode-toggle .btn-auth-mode.active:hover {
  background-color: #1a9c60;
}

/* Hover für Like-/Dislike-Buttons */
.btn-downvote:hover,
.btn-upvote:hover {
  background-color: #333 !important;
  color: #fff !important;
  border-radius: 4px;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #444 !important;
  border-color: #000 !important;
}

/* Für beide möglichen Wrapper – je nach Plugin-Version */
.comments-section .markdown-toolbar,
.comments-section .markdown-editor,
.comments-section .markdown-editor-container {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 8px;
}

/* --- Fix 1: weißer Rahmen um das Formular --- */
.comments-section .auth-form,
.comments-section .comment-form,
.comments-section .comment-auth-section,
.comments-section .login-form {
  border: none !important;   /* oder border: none; wenn du gar keinen Rand willst */
  box-shadow: none !important;
  outline: none !important;
  border-radius: 8px;                   /* optisch konsistent zum Rest */
}

/* Eingeloggter Benutzerblock */
.comment-user-info {
  background-color: #111;
  color: #ecddbe;
  padding: 15px;
  border-left: 4px solid #1c6c45;
  margin-top: 20px;
  border-radius: 6px;
}

.comment-user-info .user-name {
  font-weight: bold;
  font-size: 1em;
}

/* Fokuszustand: Input/Select/Textarea dunkel statt weiß */
.register-page input.form-input:focus,
.register-page input[type="text"]:focus,
.register-page input[type="email"]:focus,
.register-page input[type="password"]:focus,
.register-page select:focus,
.register-page textarea:focus {
  background-color: #222 !important;
  color: #ecddbe;
  border-color: #1a9c60;   /* dezenter grüner Rand beim Fokus */
  box-shadow: none;        /* evtl. blaue/helle Focus-Glows killen */
}

/* Buttons im Formular: Register + Reset (haben nur .btn) */
.register-page .btn {
  background: #1c6c45 !important;
  border-color: #1c6c45 !important;
  color: #fff !important;
}

.register-page .btn:hover,
.register-page .btn:focus,
.register-page .btn:active {
  background: #1a9c60 !important;
  border-color: #1a9c60 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* === Register-Seite: Autofill-Flash eliminieren === */
.register-page input,
.register-page select,
.register-page textarea {
  transition: none !important;            /* keine Crossfades */
  background-clip: padding-box;           /* stoppt teils visuelle Artefakte */
}

/* Hover darf nichts aufhellen */
.register-page input:hover,
.register-page select:hover,
.register-page textarea:hover {
  background-color: #222 !important;
  box-shadow: none !important;
}

/* Chromium/Chrome/Brave/Edge */
.register-page input:-webkit-autofill,
.register-page select:-webkit-autofill,
.register-page textarea:-webkit-autofill,
.register-page input:-webkit-autofill:hover,
.register-page select:-webkit-autofill:hover,
.register-page textarea:-webkit-autofill:hover,
.register-page input:-webkit-autofill:focus,
.register-page select:-webkit-autofill:focus,
.register-page textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #ecddbe; !important;
  caret-color: #fff;
  border-color: #1a9c60 !important;
  /* überschreibt das gelbe/weiße Autofill-Overlay */
  -webkit-box-shadow: 0 0 0 1000px #222 inset !important;
  box-shadow: 0 0 0 1000px #222 inset !important;
  background-color: #222 !important; /* falls nötig */
}

/* Firefox */
.register-page input:-moz-autofill,
.register-page select:-moz-autofill,
.register-page textarea:-moz-autofill,
.register-page input:-moz-autofill:focus,
.register-page select:-moz-autofill:focus,
.register-page textarea:-moz-autofill:focus {
  color: #ecddbe !important;
  caret-color: #fff;
  background-color: #222 !important;
  box-shadow: 0 0 0 1000px #222 inset !important;
  border-color: #1a9c60 !important;
}

.article-meta {
  margin-top: -5px;
  margin-bottom: -20px;
  font-size: 0.9em;
  color: #888;
}

/* Nur auf /07-about-us */
body.about-page .page-title {
  /* wie deine article-meta-Regel */
  margin-top: -5px;
  margin-bottom: -20px;
}

.article-meta span {
  display: inline;
}

.article-tags {
  margin-top: 40px;
  margin-bottom: 10px;
}

.tags-used {
  font-size: 0.9em;
  color: #888;
  padding-top: 7px;
  padding-bottom: 11px;
}

.article-tags .tag-label {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  margin: 5px 5px 0 0;
  font-size: 0.9em;
  border-radius: 3px;
  border: 1px solid #888;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.article-tags .tag-label:hover {
  background-color: #555;
  border-color: #aaa;
}

.footer-wrapper {
  background-color: #000;
  border: 8px solid #1c6c45;
  border-radius: 10px;
  margin: 30px auto 0 auto;
  max-width: 960px;
  box-sizing: border-box;
  border: 8px solid #000;
}

.footer-inner {
  background-color: #1c6c45;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px;
  border-radius: 2px;
  box-sizing: border-box;
  color: #ecddbe;
}

.footer-col {
  flex: 1 1 200px;
  margin: 10px;
  min-width: 200px;
}

.footer-col h4 {
  margin-bottom: 10px;
  font-size: 1.2em;
  border-bottom: 1px solid #ecddbe;
  padding-bottom: 5px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 5px;
}

.footer-col a {
  color: #ecddbe;
  text-decoration: none;
}

.footer-col a:hover {
  text-decoration: underline;
}

.footer-bottom {
  text-align: center;
  padding: 15px;
  font-size: 0.9em;
  background-color: #000;
  border-top: 1px solid #1c6c45;
  border-radius: 0 0 2px 2px;
}

/* === Register-Seite: finale, schlanke Regeln === */

/* 1) Reihenfolge fest: H2 -> Intro-P -> Meldungen -> Formular */
body.register-page section.container.custom-container {
  display: flex;
  flex-direction: column;
}

body.register-page section.container.custom-container > h2:first-of-type { order: 0; }
body.register-page section.container.custom-container > h2:first-of-type + p { order: 1; }
body.register-page section.container.custom-container > #messages { order: 2; }
body.register-page section.container.custom-container > form { order: 3; }

/* 2) Nur EINEN Erfolgs-Toast anzeigen */
body.register-page section.container.custom-container > .toast.toast-success { 
  display: none !important;  /* Duplikat außerhalb von #messages verstecken */
}
body.register-page #messages .toast.toast-success ~ .toast.toast-success {
  display: none !important;  /* mehrere innerhalb #messages -> nur den ersten lassen */
}

/* 3) Layout + Farben der Meldungen */
body.register-page #messages,
body.register-page #messages .toast,
body.register-page .toast.toast-error {
  position: static !important;
  transform: none !important;
  display: block !important;
  width: 100%;
  clear: both !important;
  margin: 0.75rem 0 1.25rem !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Erfolg (grün) */
body.register-page #messages .toast.toast-success {
  background-color: #1c6c45 !important;
  border: 1px solid #1a9c60 !important;
  color: #fff !important;
}

/* Fehler (orange lassen, nur Typografie/Border angleichen) */
body.register-page .toast.toast-error {
  color: #fff !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
}

/* Mini-Luft unterm Intro-Absatz */
body.register-page h2 + p { margin-bottom: .5rem !important; }

  .mobile-header {
    display: block;
    text-align: center;
    background-color: #000;
    color: white;
    padding: 20px;
  }

  .mobile-header h1 {
    font-size: 1.8em;
    margin: 0;
  }

  .mobile-header p {
    font-size: 1em;
    opacity: 0.8;
    margin-top: 0.4em;
  }

  .mobile-header img {
    max-height: 80px;
    margin-bottom: 10px;
  }
}

/* === Corner badges (Eckbinden) === */
.has-corner{
  position: relative;
  display: block;
  line-height: 0;
  overflow: visible;
}

.has-corner::before{
  content:"";
  position: absolute;
  margin-top: -5px;
  margin-left: -5px;
  z-index: 10;
  pointer-events: none;
  top: var(--hero-border, 0);
  left: var(--hero-border, 0);
  width: clamp(74px, 22%, 160px);
  aspect-ratio: 1;
  background: var(--corner-img) no-repeat 0 0 / cover;
}

.corner--sm::before { width: clamp(56px, 18%, 120px); }
.corner--xs::before { width: clamp(48px, 16%, 100px); }
/* .corner-right::before { left: auto; right: var(--hero-border, 0); transform: scaleX(-1); } */

/* === Featured Slider (scroll-snap, restored) =============================== */
#hero-featured .mo-slider { position: relative; max-width: 800px; margin: 0 auto; }
#hero-featured .mo-slides {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  gap: 12px;
  scroll-behavior: smooth;
}

#hero-featured .mo-slide {
  flex: 0 0 100%;
  position: relative;
  margin-top: 15px;
  scroll-snap-align: start;
  overflow: visible;
  background: #000;
}

#hero-featured .mo-slides::-webkit-scrollbar{
  display: none; height: 0; width: 0;  /* Chrome/Safari/Edge */
}

#hero-featured .mo-slide-img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
}

/* Bild-Link exakt auf Bildhöhe + 5px Rahmen */
#hero-featured .mo-media-link {
  position: relative;
  display: block;
  line-height: 0;
  border: 5px solid #ecddbe;
  overflow: visible;
  margin-bottom: 8px;
  box-sizing: border-box;
}

#hero-featured .mo-slide-body {
  background: #000;
  padding: 12px 14px 14px;
  margin-top: 8px;
}

/* --- Latest: Container clippt ebenfalls nicht; stacking safe --- */
#latest .media { position: relative; overflow: visible; }

/* Kategorie-Badge + Title + Teaser Typo */
#hero-featured .mo-tag{ background:#1c6c45; color:#fff; padding:2px 8px; border-radius: 999px; font-size:12px; display:inline-block; margin:0 8px 6px 0; }
#hero-featured .mo-slide-title{ margin:6px 0 6px; font-weight:700; font-size:22px; }
#hero-featured .mo-slide-title a{ color:#1c6c45; font-weight:bold; text-decoration:none; }
#hero-featured .mo-slide-title a:hover{ color:#1a9c60; }
#hero-featured .mo-slide-teaser{ margin:0; color:#ecddbe; }

/* Navigation */
#hero-featured .mo-nav{
  position:absolute;
  top: 225px; /* 450px / 2 */
  transform: translateY(-50%);
  border:0;
  background:#000;
  color:#fff;
  width:36px;
  height:36px;
  border-radius:999px;
  z-index: 3;
}

#hero-featured .mo-nav.prev{ left:8px; }
#hero-featured .mo-nav.next{ right:8px; }
/* Dots */
#hero-featured .mo-dots{ display:flex; gap:8px; justify-content:center; margin-top:8px; }
#hero-featured .mo-dot{ width:10px; height:10px; border-radius:999px; border:1px solid #1a9c60; background:transparent; }
#hero-featured .mo-dot.is-active{ background:#1a9c60; }
/* Responsive */

/* Doppel-Headline über den beiden Spalten */
#latest2 .latest-head{
  margin-top: -20px;
  display: grid;
  grid-template-columns: 1fr 1fr;       /* exakt wie die Spalten */
  column-gap: var(--latest-gap);
  align-items: baseline;
  margin-bottom: 10px;
}
#latest2 .latest-head .mo-section-title{ margin: 0; }
#latest2 .latest-head .mo-head-right{ text-align: right; }

/* Grid + Divider */
#latest2 .latest-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--latest-gap);
}
#latest2 .latest-grid::before{
  content:"";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-1px);
  width: 2px;
  background: var(--latest-divider);
  opacity: .85;           /* bei Bedarf anpassen */
}

/* Spalten-Innenabstand neben der Trennlinie */
#latest2 .latest-left{  display:flex; flex-direction:column; gap:22px; padding-right: 18px; align-items: center; }
#latest2 .latest-right{ display:flex; flex-direction:column; gap:22px; padding-left: 18px; align-items: center; }

#latest2 .rcat-items{ display:flex; flex-direction:column; gap:18px; }

/* Karten: exakt so breit wie die Thumbs */
#latest2 .rc-card{
	margin-top: -15px;
}

#latest2 .ll-card,
#latest2 .rc-card{
  width: var(--latest-thumb-w);
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Titel & Teaser: nicht breiter als die Karte */
#latest2 .ll-title,
#latest2 .rcat-title{
  font-weight: 700;
  font-size: 18px;
  color: var(--mo-green);
  text-decoration: none;
}

#latest2 .ll-title:hover,
#latest2 .rcat-title:hover{ color: var(--mo-green-hover); }

#latest2 .ll-teaser,
#latest2 .rcat-teaser{
  margin: 6px 0 0;
  font-size: 15px;
  color: #ecddbe;
  opacity: .95;
}

/* Medienrahmen + Corner on top */
#latest2 .thumb,
#latest2 .rcat-media{
  position: relative;
  display: block;
  line-height: 0;
  margin: 0 auto;                 /* von dir gewünscht */
  width: var(--latest-thumb-w);
}

#latest2 .ll-thumb,
#latest2 .rcat-thumb{
  display:block;
  width:100%;
  height:auto;
  border: 3px solid #ecddbe !important;
  box-sizing: border-box;
}

/* „Show more“ */
#latest2 .col-more{ display:flex; justify-content:center; }
#latest2 .col-more{ width: var(--latest-thumb-w); }
#latest2 .show-more{ color: var(--mo-green); text-decoration: none; }
#latest2 .show-more:hover{ color: var(--mo-green-hover); }

/* Latest: rechte Spalte 15px nach oben (mobil wieder neutral) */
#latest2 .latest-right{ margin-top: 0; }

/* Rechte Spalte: Kistenbreite an Karten angleichen */
#latest2 .rcat{
  width: var(--latest-thumb-w);
  max-width: 100%;
  margin: 0 auto;
}

/* Kategorie-Heading als Badge */
#latest2 .rcat-h3{
  margin: 0 0 10px;
  display: inline-block;
  padding: 6px 12px;
  background: var(--mo-green);
  color: #fff;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1;
}

#latest2 .rcat-h3 + .rcat-items{ margin-top: 10px; } /* kleiner Abstand unter dem Badge */

#latest2 .has-corner::before{
  width: clamp(56px, 20%, 96px);
  aspect-ratio: 1;
  /* Corner „über“ den Rahmen schieben -> Eselsohr-Effekt */
  top: calc(-1 * var(--thumb-border));
  left: calc(-1 * var(--thumb-border));
  z-index: 10;
}

/* Corner */
#latest2 .has-corner::before{
  /* Corner „über“ den Rahmen schieben -> Eselsohr-Effekt */
  margin-top: 3px;
  margin-left: 3px;
}

/* Container clippt nicht (wichtig für die Ecke) */
#latest2 .thumb,
#latest2 .rcat-media{
  position: relative;
  overflow: visible;
  width: var(--latest-thumb-w);
  margin: 0 auto;
}

/* Bild-Rahmen sicher erzwingen (falls ein Theme-Reset dazwischenfunkt) */
#latest2 .ll-thumb,
#latest2 .rcat-thumb{
  display:block;
  width:100%;
  height:auto;
  border: var(--thumb-border) solid #ecddbe;
  box-sizing: border-box;
}

/* Fallback (nur in Latest), falls mal eine Klasse fehlt */
#latest2 .latest-left img,
#latest2 .latest-right img{
  border: var(--thumb-border) solid #ecddbe;
  box-sizing: border-box;
}

#hero-featured .mo-media-link:hover {
  border: 5px solid #fff;
  transition: border-color .15s ease, filter .15s ease;
  filter: brightness(1.1);
  box-sizing: border-box;
}

#latest2 .latest-left img:hover,
#latest2 .latest-right img:hover {
  border: var(--thumb-border) solid #fff;
  transition: border-color .15s ease, filter .15s ease;
  filter: brightness(1.2);
  box-sizing: border-box;
}

#latest2 .latest-left{  padding-right: 6px; }
#latest2 .latest-right{ padding-left: 6px; }

/* Featured: Unterstreichung auf die gesamte Head-Zeile legen */
#hero-featured .mo-section-head{
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
}

/* …und nicht zusätzlich an der H2 in diesem Block */
#hero-featured .mo-section-head .mo-section-title{
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Featured: Head-Zeile mit Actions rechts */
#hero-featured .mo-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

/* Icon-Leiste rechtsbündig + kleiner rechter Puffer */
#hero-featured .mo-actions{
  margin-left:auto;
  display:flex;
  gap:10px;
  padding-right:0;
}

#hero-featured .mo-social{
  width:27px; height:27px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#000;
  text-decoration:none;
  line-height:1;
  margin-top: 43px;
  transition: brightness .15s ease, border-color .15s ease, transform .05s ease;
}

#hero-featured .mo-social img{
  display:block;
  width:27px; height:27px;
}

#hero-featured .mo-social img:hover{
  display:block;
  width:27px; height:27px;
  transition: brightness .15s ease, filter .15s ease;
  filter: brightness(1.6);
  transform: translateY(-1px);
}

/* nur der Container direkt VOR dem Teaser */
.container.custom-container:has(+ .also-interesting){
  margin-bottom: -90px;     /* oder 4–8px, wie eng du's willst */
  padding-bottom: 0;    /* falls der Container unten Innenabstand hat */
  /* optional, um Doppellinien zu vermeiden:
  border-bottom: 0;
  */
}

.also-interesting{
  /* bisherige Linie entfernen */
  border-bottom: 0;
  position: relative;
  padding-top: 10px;
  padding-bottom: 12px;
  margin-top: 26px;
  margin-bottom: 16px;
}

.also-interesting::after{
  content:"";
  position:absolute;
  left: 0px;    /* Abstand von der runden Containerkante */
  right: 0px;   /* bei Bedarf auf 10–14px feinjustieren */
  bottom: 0;
  height: 1px;
  background: #444;
  opacity: .85;
}

.also-interesting .mo-section-title{
  margin: 0 0 10px 0;
  border-bottom: 0;          /* Titel ohne eigene Linie, Linie steckt in Section */
  padding-bottom: 0;
}

.ai-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* zwei nebeneinander */
  gap: 22px;
  align-items: start;
  justify-items: center;
  margin-bottom: -20px;
}

.ai-card{
  width: var(--latest-thumb-w, 400px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-title{
  margin-top: 2px;
  font-weight: 700;
  font-size: 18px;
  color: var(--mo-green);
  text-decoration: none;
}
.ai-title:hover{ color: var(--mo-green-hover); }

.ai-media{
  position: relative;
  display: block;
  line-height: 0;
  width: var(--latest-thumb-w, 400px);
  margin: 0 auto;
  overflow: visible;
}

.ai-thumb{
  display:block;
  width:100%;
  height:auto;
  box-sizing: border-box;
}

.ai-media:hover{
  filter: brightness(1.2);
  transition: brightness .15s ease, border-color .15s ease, transform .05s ease;
}

.also-interesting .has-corner::before{
  width: clamp(56px, 20%, 96px);
  top: calc(-1 * var(--thumb-border, 3px));
  left: calc(-1 * var(--thumb-border, 3px));
  margin-top: 3px;           /* wie in Latest2 */
  margin-left: 3px;
}

.ai-teaser{
  margin: 6px 0 0;
  font-size: 15px;
  color: #ecddbe;
  opacity: .95;
}

/* Kategorie-Seiten: Latest-Layout ohne Mittel-Divider */
#latest2.cat-page .latest-grid::before { display: none; }
/* Spalten ohne Innenpadding neben (ehem.) Divider */
#latest2.cat-page .latest-left,
#latest2.cat-page .latest-right { padding: 0; }
/* "Show more" mittig unter dem Grid */
#latest2.cat-page .col-more { display: flex; justify-content: center; }

#latest2.tag-page .latest-grid::before { display: none; }
#latest2.tag-page .latest-left,
#latest2.tag-page .latest-right { padding: 0; }
#latest2.tag-page .col-more { display: flex; justify-content: center; }

/* Oben halten, damit nichts drüber liegt */
.mobile-topbar{ position: relative; z-index: 30; }

/* Standardzustand: Topbar nur mobil sichtbar */
.mobile-topbar{ display: none; }

/* Wrapper: nimmt die Contentbreite an, bleibt zentriert */
.video-embed{
  width: 100%;
  max-width: 100%;
  margin: 16px auto;
}

/* Iframe: immer volle Wrapperbreite, Höhe per aspect-ratio */
.video-embed iframe{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* Default */
  border: 0;
  border-radius: 10px;    /* optional */
}

/* 21:9 oder 4:3 gezielt setzen */
.video-embed.is-21x9 iframe{ aspect-ratio: 21 / 9; }
.video-embed.is-4x3  iframe{ aspect-ratio: 4 / 3; }

/* Nur Absätze, die Lightbox-Thumbs enthalten, werden zur zentrierten Reihe */
#body-wrapper .custom-container p:has(> a[rel="lightbox"]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* zentriert */
  gap: 12px;                /* Abstand zwischen Thumbs */
  margin: 12px 0;
}

/* saubere Boxen/Thumbnails */
#body-wrapper .custom-container p:has(> a[rel="lightbox"]) a { 
  display: block;
}
#body-wrapper .custom-container p:has(> a[rel="lightbox"]) img.linkborder {
  display: block;           /* keine Inline-Lücken/Baseline-Krimskrams */
}

@media screen and (max-width: 960px){
  .patreon--mobile { display: block; }
  .patreon--desktop { display: none; }
	
  .main-nav { font-size: 18px; }
  .main-nav ul { gap: 12px; }
  .main-nav a { padding: 4px 8px; font-size: 18px; }
	
  .header-textblock h1 { font-size: 1.5em; }
  .header-textblock p { font-size: 1.4em; }
	
  #hero-featured .mo-slide-img{ height: 280px; }
  #hero-featured .mo-nav{ top: 140px; }
	
  #latest2 .latest-head{ grid-template-columns: 1fr; row-gap: 6px; }
  #latest2 .latest-head .mo-head-right{ text-align: left; }
  #latest2 .latest-grid{ grid-template-columns: 1fr; }
  #latest2 .latest-grid::before{ display: none; }

  #latest2 .latest-grid{
	grid-template-columns: 1fr;
    justify-items: center;
    padding-left: var(--hero-sidepad, 23px);
    padding-right: var(--hero-sidepad, 23px);
    box-sizing: border-box;
  }
	
  #latest2 .latest-left, #latest2 .latest-right{ padding: 0; }
  #latest2 .latest-head{
	display: block; /* statt 2-Spalten-Grid */
	margin-bottom: 10px;
  }

  #latest2 .latest-head .mo-head-right{ display: none !important; /* rechte Überschrift verstecken */ }

  #hero-featured .mo-actions{ display:none; }
	
  .ai-grid { grid-template-columns: 1fr; }
  
  /* Karten und Medien-Container selbst auch an Containerbreite koppeln */
  #latest2 .ll-card,
  #latest2 .rc-card,
  #latest2 .rcat,
  #latest2 .thumb,
  #latest2 .rcat-media{
  width: 100%;
  max-width: calc(100% - 2 * var(--hero-sidepad, 0)); /* Innenabstand abziehen */
  margin: 0 auto;
  box-sizing: border-box;
  }

  /* ▼ Bilder sicher auf Kartenbreite ziehen (ohne Überstand) */
  #latest2 .thumb img,
  #latest2 .rcat-media img{
    display:block;
    width:100% !important;
    height:auto;
  }
  
  /* Categories-H2 in der rechten Spalte für 960–801 px aktivieren */
.cat-h2-mob{
  display: block !important;
  width: 100%;
  text-align: left;
  margin: 0 0 12px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #888; /* gleiche Unterstreichung wie gewünscht */
  box-sizing: border-box;
  }
}
	
@media screen and (max-width: 860px){
  .patreon--mobile { display: block; }
  .patreon--desktop { display: none; }
	
  .header-textblock h1 { font-size: 1.3em; }
  .header-textblock p { font-size: 1.2em; }
}

@media (max-width: 800px){
  :root{ --mobile-page: 92vw; }
  
  .desktop-header{ display:flex !important; }
  .mobile-topbar{ display:block; }
  .mo-mobile-slogan { display: block; }
  .cat-h2-mob{ display: block !important; margin-left: 0 !important; width: 100% !important; margin-bottom: -8px !important; }
  .comment-text{ padding: 0; border: none; }
  
  .patreon--mobile { display: block; }
  .patreon--desktop { display: none; }
  
  .video-embed{
  max-width: var(--mobile-page, 92vw);
  }
  
  .mobile-topbar .social-icons{
    display: inline-flex;
	margin-top: -15px;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 6px;
    padding: 5px;              /* gleichmäßig rundum */
  }
  
  .mobile-topbar .social-icons .mo-social{
    display: block;            /* kein inline-Baseline-Layout */
    line-height: 0;            /* killt Descender-Luft */
  }
  
  .mobile-topbar .social-icons .mo-social img{
    display: block;            /* ebenfalls kein inline */
    width: 25px; height: 25px; /* wie im Markup */
    margin: 0;                 /* sicherheitshalber */
  }
  
  h1.page-title { 
  margin-top: -75px !important;
  }
  
  .container.custom-container,
  .container.header-container{
    padding-left: 10px;
    padding-right: 10px;
  }

  .container.nav-container,
  .main-nav{
  display: none;
  }
  
  /* Header-Frame, Body und Topbar auf die gleiche Breite ziehen */
  .header-frame,
  #body-wrapper,
  .mobile-topbar{
    max-width: var(--mobile-page);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
/* äußere Wrapper zentrieren */
  #page-wrapper{
    max-width: var(--mobile-page);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .has-corner::before{
  margin-top: -5px;
  }
  
/* Content-Breite exakt an den mobilen Seitenrahmen koppeln */
  #latest2{
    /* 92vw  – 20px (10+10 Container-Padding) – 2px (1px Card-Border je Seite) */
    --latest-thumb-w: calc(var(--mobile-page, 92vw) - 100px);
    /* overflow-x: hidden;  <- entfernen, sonst werden rechte Kanten abgeschnitten */
  }

  /* 1 Spalte ohne Spaltbreite */
  #latest2 .latest-grid{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  /* Karten, Medienrahmen & Patreon exakt auf --latest-thumb-w, zentriert */
  #latest2 .ll-card,
  #latest2 .rc-card,
  #latest2 .rcat,
  #latest2 .thumb,
  #latest2 .rcat-media,
  #latest2 > .patreon--mobile{
    width: var(--latest-thumb-w);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;  /* Border wird mitgerechnet -> kein Überstand */
  }

  /* Bilder sauber einpassen */
  #latest2 .thumb img,
  #latest2 .rcat-media img{
    display: block;
    width: 100%;
    height: auto;
  }

  /* Patreon: nur Mobile-Version zeigen, gleiche Breite wie Karten */
  .patreon--mobile{ display: block; }
  .patreon--desktop{ display: none; }

  #latest2 > .patreon--mobile{
    width: var(--latest-thumb-w);
    max-width: 100%;
    margin: 16px auto 12px;
    box-sizing: border-box;
  }

  /* (Optional) Überschriften/Badges in der rechten Spalte an Kartenbreite anpassen,
     falls dort Blöcke außerhalb der Card laufen */
  #latest2 .latest-right > *:not(.patreon){
    max-width: var(--latest-thumb-w);
    margin-left: auto;
    margin-right: auto;
  }
  
  #hero-featured .mo-section-head .mo-actions{ display:none; }
  
  .page-title,
  .register-page h2:first-of-type,
  #latest.container.custom-container{
    margin-top: -30px !important;
  }
  
  #body-wrapper{
    margin-top: 8px;
  }
  
  #hero-featured,
  #latest2.cat-page,
  #latest2.tag-page{
    margin-top: -150px;
  }
  
  /* === Mobile-Fix: "Auch interessant" (kein Überstand) === */
.also-interesting{ 
  --latest-thumb-w: 100%;               /* Breitenvariable lokal neutralisieren */
  max-width: var(--mobile-page);        /* an deine mobile Seitenbreite koppeln */
  margin-left: auto; margin-right: auto;
}

.also-interesting .ai-grid{
  grid-template-columns: 1fr;           /* eine Spalte mobil */
}

.also-interesting .ai-card,
.also-interesting .ai-media{
  width: 100%;
  max-width: 100%;
  margin-left: 0; 
  margin-right: 0;
  box-sizing: border-box;
}

.also-interesting .ai-thumb{
  display: block;                        /* kein inline-gap */
  width: 100%;
  height: auto;
  box-sizing: border-box;                /* Rahmen mitrechnen */
}

/* optional: minimaler Innenabstand, damit Rahmen nicht am Rand klebt */
.also-interesting .ai-card{ padding: 0; }
  
  .mobile-topbar{
    max-width: 960px;
    margin: 8px auto 0 auto;
    padding: 8px 10px 0;
  }
  
  .mobile-actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;                 /* Abstand zwischen Icon-Block und Burger */
    flex-wrap: wrap;
  }
  
  /* Icon-Leiste kann deine vorhandenen .mo-social-Regeln nutzen */
  .mobile-actions .mo-actions{
    display: inline-flex;
    gap: 12px;
  }

  .burger-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
	margin-top: -15px;
    font-size: 22px; line-height: 1;
    border-radius: 8px;
    border: 1px solid #444;
    background: #000;
    color: #ecddbe;
    cursor: pointer;
  }
  
  .patreon--mobile{
    width: 100%;
    max-width: var(--mobile-page, 92vw); /* = Seitenbreite minus Container-Padding */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  
  .burger-btn:hover{ background:#111; }

/* === Mobile Overlay: Sichtbar & über allem ============================= */
  /* Topbar bleibt klickbar, Overlay liegt darüber */
  .mobile-topbar{ position: relative; z-index: 30; }

  body.menu-open{ overflow: hidden; }

/* 1) Alte Regeln sicher überstimmen (unabhängig von .mobile-container) */
  #overlay{
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    z-index: 2147483647 !important;               /* über wirklich allem */
    background: #1c6c45 !important;
    display: flex; opacity: 0; visibility: hidden; pointer-events: none;
	overflow-y: hidden;
	align-items: center;                /* horizontal zentrieren */
    justify-content: flex-end;
	transition: opacity .18s ease-out, visibility .18s ease-out;
  }
  
  body.menu-open #overlay{
    display: flex !important;
    opacity: 1 !important; 
	visibility: visible !important;
	pointer-events: auto !important;
  }
  
  #overlay .overlay-inner{
  width: min(720px, 85vw);
  height: auto;
  max-height: 90vh;
  max-width: var(--mobile-page, 92vw);
  margin: 0 auto;
  overflow: visible;
  transform: translate3d(100%,0,0);   /* Start: rechts außerhalb */
  transition: transform .22s ease-out;
  will-change: transform;
  }
  
  body.menu-open #overlay .overlay-inner{
  transform: translate3d(0,0,0);
  }
  
  /* Barrierearm: Animationen respektieren */
  @media (prefers-reduced-motion: reduce){
  #overlay, #overlay .overlay-inner{ transition: none !important; }
}
  
  .toggler{ display:none; }

  /* 2) Während das Overlay offen ist, alles darunter niedriger stapeln */
  body.menu-open #page-wrapper,
  body.menu-open .header-frame,
  body.menu-open .header-bg,
  body.menu-open .mobile-topbar{
    position: relative !important;
    z-index: 1 !important;
    transform: none !important;        /* nimmt evtl. erzeugte Stacking-Kontexte weg */
    filter: none !important;
  }

  /* Container des Menüs */
  #overlay .overlay-menu{
  width: 100%;
  display: grid;
  place-items: center;                /* Menü mittig */
  padding: 8px 0;
  }

#overlay .overlay-menu a{
  color: #fff !important;
  width:90%;
}
#overlay .overlay-menu a:hover{
  color:#ecddbe;
}

  #overlay .overlay-menu .treemenu{
  margin-top: 0;
}

/* Tree-/Menu-Defaults aus dem Theme überschreiben */
#overlay .overlay-menu .treemenu,
#overlay .overlay-menu .tree,
#overlay .overlay-menu ul{
  margin-top: 15px;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;        /* keine Mini-Box */
  overflow: visible !important;       /* kein Scrollbalken neben den Links */
  margin-left: 0;
  padding: 0;
  list-style: none;
}

/* Einzelne Items: große Tap-Ziele, zentriert */
#overlay .overlay-menu li{
  border-bottom: 1px solid #222 !important;
}
#overlay .overlay-menu li:last-child{ border-bottom: 0; }

#overlay .overlay-menu a{
  display: block;
  padding: 22px 24px;
  text-align: center;
  color: #ecddbe;
  text-decoration: none;
  /* Font skaliert mit Viewport: ~18–28px */
  font-size: clamp(18px, 4.8vw, 28px);
  line-height: 1.2;
}
#overlay .overlay-menu a:hover{
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
}

#overlay .overlay-menu [style*="overflow"]{ overflow: visible !important; }
#overlay .overlay-menu [style*="max-height"]{ max-height: none !important; }

/* Comments-Header mobil: Reihenfolge erzwingen */
.comments-header .comments-title{
  display: flex;
  flex-wrap: wrap;        /* erlaubt Umbruch */
  align-items: center;
  column-gap: .5rem;
  row-gap: 8px;
  margin: 0;              /* h2-Defaults neutralisieren */
}

/* Counter rechts in der ersten Zeile */
.comments-header .comments-title .comments-count{
  order: 2;               /* nach Icon+Text */
  margin-left: auto;      /* an rechten Rand schieben */
  flex: 0 0 auto;         /* nicht stretchen */
}

/* Notify-Button in die zweite Zeile und linksbündig */
.comments-header .comments-title .enable-notifications-btn{
  order: 3;               /* unter Titel/Counter */
  flex: 0 0 100%;         /* volle Zeile belegen */
  align-self: flex-start; /* links ausrichten; für mittig -> center */
  margin-left: -5px;
}

/* Auth-Buttons (Login / Guest) mobil untereinander */
.auth-mode-toggle{
  display: flex;
  flex-direction: column;   /* untereinander statt nebeneinander */
  gap: 10px;                /* Abstand zwischen den Buttons */
}

.auth-mode-toggle .btn-auth-mode{
  width: 100%;               /* volle Breite für bessere Touch-Fläche */
  text-align: center;
}

/* Alle übrigen Kinder (Icon + nackter Titeltext) bleiben in natürlicher Reihenfolge = erste Zeile links */

  /* Header-Frame kompakter und unten abschließend */
  .header-frame{
    padding: 12px 0 12px 0;
    margin: 16px auto 16px auto;
  }

  /* Header-Hintergrund mobil: kompakte Höhe, keine Umbrüche */
  .header-bg{
    min-height: 140px;
    max-height: 260px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
  }

  /* Textblock: für SEO unsichtbar, nimmt aber keinen Platz mehr weg */
  .header-textblock{
    position: absolute !important;
    width: 1px; height: 1px; 
    padding: 0; margin: -1px;
    overflow: hidden; 
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
    color: transparent !important; 
    text-shadow: none !important;
    pointer-events: none;
  }

  /* Logo-Container: feste Breite links */
  .header-logo-link{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46%;
    max-width: 46%;
  }

  /* Logo selbst */
  .header-logo{
    padding: 0;
    width: auto;
    height: auto;
    max-height: 92%;
    object-fit: contain;
  }

  /* Punk-Grafik: feste Breite rechts */
  .header-right-img{
    flex: 0 0 46%;
    max-width: 46%;
    align-self: center;
	margin-right: 1.5%;
    padding: 0;
    display: block;
    width: auto;
    height: auto;
    max-height: 92%;
    object-fit: contain;
  }
  
  /* gleiche Breite wie Header/Body/Topbar */
  .footer-wrapper,
  .footer-bottom{
    max-width: var(--mobile-page);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Innenleben etwas kompakter, kein Überstand */
  .footer-inner{
    padding: 18px 14px;
    box-sizing: border-box;
  }

  /* klare Border-Farbe (überschreibt das doppelte border in der Basisregel) */
  .footer-wrapper{
  border: 8px solid #000;
  border-radius: 10px;
  }

  /* Desktop-Nav verstecken; Burger nutzen */
  .main-nav{ display: none !important; }
  
  /* keine versehentlichen horizontalen Überläufe */
  html, body{ overflow-x: hidden; }
  
  .author-box{ flex-direction:column; text-align:center; }
  .author-photo{ margin:0 auto 10px; }
}

.custom-container .note{
  font-size: 0.9em;
  color: #888;
  font-style: italic;
  text-align: justify;
  padding:14px;
  border:1px solid #1c6c45;
  border-radius:10px;
  background:#111;
  margin-bottom: 20px;
}

.custom-container .note-hl{
  font-size: 0.9em;
  color: #888;
  font-style: italic;
  text-align: justify;
  padding:14px;
  padding-top: 0px;
  border:1px solid #1c6c45;
  border-radius:10px;
  background:#111;
  margin-bottom: 20px;
}

/* Info-Box (rechts, Textumlauf) */
.review-infobox{
  font-size: 10px;
  display:block; float:right; width:min(340px,28%);
  margin:0 0 14px 18px; padding:14px;
  border:1px solid rgba(236,221,190,.35);
  border-radius:10px; background:#111; color:#ecddbe;
}
.review-infobox .ibox-title{ margin:0 0 8px 0; font-size:1.05rem; color:#ecddbe; }
.review-infobox .ibox-list{ margin:0; font-size:0.70rem; }
.review-infobox .ibox-list div{
  display:flex; gap:10px; align-items:baseline; padding:6px 0;
  border-bottom:1px dashed rgba(236,221,190,.18);
}
.review-infobox .ibox-list div:last-child{ border-bottom:0; }
.review-infobox dt{ flex:0 0 44%; font-weight:600; color:#ecddbe; opacity:.95; }
.review-infobox dd{ flex:1 1 auto; margin:0; color:#ecddbe; opacity:.9; }

/* Rating + Punk-Quadrat */
.review-rating-wrap{
  display:grid; grid-template-columns:140px 1fr; gap:14px; align-items:start;
  margin:18px 0;
}
.punk-badge{
  margin:0; padding:0; border:1px solid rgba(236,221,190,.35);
  border-radius:10px; background:#111; width:140px; height:140px;
  display:flex; align-items:center; justify-content:center;
}
.punk-badge img{ max-width:92%; max-height:92%; display:block; }

.review-rating{
  padding:14px; border:1px solid rgba(236,221,190,.35);
  border-radius:10px; background:#111; color:#ecddbe;
}
.review-rating .rating-head{
  display:flex; gap:14px; align-items:center; margin-bottom:10px;
}
.review-rating .final-score{
  min-width:78px; text-align:center; font-size:2.2rem; font-weight:800; line-height:1;
  padding:10px 12px; border-radius:10px; border:4px solid #ecddbe;
}
.review-rating .verdict p{ margin:0; }
.review-rating .verdict p + p{ margin-top:4px; opacity:.95; }

.review-rating .rating-bars{
  list-style:none; margin:12px 0 6px 0; padding:0; display:grid; gap:8px;
}
.review-rating .rating-bars li{
  display:grid; grid-template-columns:120px 1fr 58px; gap:10px; align-items:center;
}
.review-rating .cat{ white-space:nowrap; }
.review-rating .num{ text-align:right; font-variant-numeric: tabular-nums; }

/* Balken: Breite via --val (0–100) */
.review-rating .bar{
  position:relative; display:block; height:12px; background:#1a1a1a;
  border:1px solid rgba(236,221,190,.25); border-radius:7px; overflow:hidden;
}
.review-rating .bar::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:calc(var(--val,0) * 1%); background:linear-gradient(90deg,#1c6c45,#1a9c60);
}

.review-rating .value-box{ margin-top:12px; display:flex; gap:8px; align-items:center; }
.review-rating .pill{
  display:inline-block; padding:4px 8px; border-radius:999px;
  border:1px solid rgba(236,221,190,.35); background:#0e0e0e;
}

/* Responsive */
@media (max-width:900px){
  .review-infobox{ float:none; width:auto; margin:0 0 14px 0; }
  .review-rating-wrap{ grid-template-columns:1fr; }
  .punk-badge{ width:100%; height:auto; padding:10px; }
  .punk-badge img{ max-height:120px; margin-inline:auto; }
  .review-rating .rating-bars li{ grid-template-columns:110px 1fr 52px; }
}