/*
 * OASE Kontaktbörse: neues Aussehen für den WebSite-X5-Blog.
 * Wird zusätzlich zu den X5-Stylesheets in blog/index.php geladen (siehe ANLEITUNG.txt).
 * Mobile-first: Grundregeln gelten fürs Handy, ab 700px / 1000px wird erweitert.
 * Keine externen Schriften oder Dienste (Datenschutz).
 */

:root {
  --bg: #0F0D12;
  --bg-2: #17141C;
  --karte: #1D1923;
  --karte-rand: #2C2633;
  --text: #F4F1F6;
  --text-2: #B9B1C2;
  --akzent: #FF3D8B;
  --akzent-2: #FF77AE;
  --gold: #E8B44C;
  --gruen: #57D68D;
  --radius: 16px;
  --schrift: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Sora", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Grundgerüst: X5-Hintergründe abschalten ---------- */

html, body {
  background: var(--bg) !important;
  color: var(--text);
}
body {
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  padding-bottom: 76px; /* Platz für die Leiste unten am Handy */
}
#imPageExtContainer {
  background: radial-gradient(120% 60% at 50% 0%, #2A1222 0%, var(--bg) 60%) !important;
  min-height: 100vh;
}
#imHeaderBg, #imFooterBg, #imContentGraphics, #imStickyBarContainer, #imSideBar {
  display: none !important;
}
#imPage {
  max-width: 760px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  display: block !important;
  min-height: 0 !important;
}
#imContent, #imBlogPage, #imBlogContent, #imHeader, #imFooter {
  width: auto !important;
  max-width: none !important;
  background: transparent !important;
  margin: 0 !important;
  float: none !important;
  position: static !important;
  height: auto !important;
}
#imBlogSidebar { display: none !important; }
#imPage a { color: var(--akzent-2); }

/* ---------- Kopf ---------- */

.oase-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.oase-logo {
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .06em;
  color: var(--text) !important;
  text-decoration: none;
}
.oase-logo span { color: var(--akzent); }
.oase-kopf-nav { display: none; gap: 6px; }
.oase-kopf-nav a {
  color: var(--text) !important;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 999px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.oase-kopf-nav a:hover { background: var(--karte); }
.oase-kopf-nav a.aktiv { background: var(--akzent); color: #fff !important; }

#imHeader {
  min-height: 0 !important;
  padding: 0 !important;
}
#imHeaderObjects {
  position: static !important;
  height: auto !important;
  width: auto !important;
}
#imHeader .template-object-wrapper,
#imHeader_imTextObject_01,
#imHeader .text-tab-content {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}
#imPage #imHeader #imHeader_imTextObject_01,
#imPage #imHeader #imHeader_imTextObject_01_tab0 {
  width: 100% !important;
  transform: none !important;
  margin: 0 !important;
  left: 0 !important;
}
/* X5-Spruch im Kopf wird zur Titelzeile */
#imHeader .text-inner { padding: 8px 0 4px !important; margin: 0 !important; }
#imHeader .text-tab-content { padding: 0 !important; margin: 0 !important; }
#imHeader .text-inner div { text-align: left !important; }
#imHeader .text-inner span {
  font-family: var(--schrift-titel) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2) !important;
}
#imHeader .text-inner i { font-style: normal; }

/* ---------- Seitentitel und Einleitung ---------- */

#imBlogContent > header { margin: 10px 0 6px; }
#imBlogContent .imPgTitle {
  font-family: var(--schrift-titel) !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
#imBlogContent .imBreadcrumb,
#imBlogContent .imBreadcrumb a {
  color: var(--text-2) !important;
  font-size: 14px !important;
}
#imBlogContent > .imBreadcrumb { display: none !important; } /* "Veröffentlicht von ... 20 Januar 2020" */

.imBlogPostBody {
  background: linear-gradient(160deg, #2A1424 0%, var(--karte) 70%);
  border: 1px solid var(--karte-rand);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin: 16px 0 20px;
}
.imBlogPostBody > br { display: none; }
.imBlogPostBody .imTACenter { text-align: left !important; }
.imBlogPostBody,
.imBlogPostBody span,
.imBlogPostBody b {
  font-family: var(--schrift) !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}
.imBlogPostBody [id^="imBlogPost_"] > div { margin: 0 0 10px; }
/* Farben aus WebSite X5 (cf1/cf2/cf3) auf die neuen Farben umlegen */
.imBlogPostBody .cf1,
.imBlogPostBody .cf1 * {
  font-family: var(--schrift-titel) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: var(--akzent-2) !important;
}
.imBlogPostBody .cf2,
.imBlogPostBody .cf2 * {
  color: var(--gold) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.imBlogPostBody .cf3,
.imBlogPostBody .cf3 * {
  color: var(--gruen) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* ---------- Zähler und Knopf "Beitrag schreiben" ---------- */

#blog-topic .topic-summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  background: none !important;
}
#blog-topic .topic-summary > div { float: none !important; width: auto !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
#blog-topic .topic-space, #blog-topic .fill { display: none !important; }
#blog-topic .topic-review-c { display: flex; align-items: baseline; gap: 8px; }
#blog-topic .topic-total-review, #blog-topic .topic-add-review { flex: 0 0 auto; text-align: left !important; }
#blog-topic .topic-number-review {
  font-family: var(--schrift-titel) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 800;
  color: var(--text) !important;
}
#blog-topic .label-review { color: var(--text-2) !important; font-size: 16px !important; }

.oase-knopf,
#blog-topic .topic-add-review-btn,
#blog-topic .topic-form input[type=submit],
#blog-topic .topic-form input[type=button] {
  -webkit-appearance: none;
  appearance: none;
  background: var(--akzent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--schrift) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  min-height: 48px;
  padding: 12px 22px !important;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 61, 139, .28);
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
.oase-knopf:hover,
#blog-topic .topic-add-review-btn:hover,
#blog-topic .topic-form input[type=submit]:hover { background: var(--akzent-2) !important; }
.oase-knopf:focus-visible,
#blog-topic input:focus-visible,
#blog-topic textarea:focus-visible {
  outline: 3px solid var(--akzent-2) !important;
  outline-offset: 2px;
}

/* ---------- Formular ---------- */

/* X5 klappt das Formular erst nach Klick auf "Beitrag schreiben" auf (Klasse .visible) */
#blog-topic .topic-form {
  background: var(--karte);
  border: 0 solid var(--karte-rand);
  border-radius: var(--radius);
  padding: 0 18px;
  margin: 0;
}
#blog-topic .topic-form { box-sizing: border-box; width: 100% !important; }
#blog-topic .topic-form form { width: auto !important; }
/* Unsichtbares Spam-Fallenfeld von X5 muss unsichtbar bleiben */
#blog-topic .prt_field { display: none !important; }
#blog-topic .topic-form.visible {
  max-height: 2500px;
  border-width: 1px;
  padding: 18px;
  margin: 0 0 20px;
}
#blog-topic .topic-form form { margin: 0 !important; padding: 0 !important; }
#blog-topic .topic-form-row { display: block !important; margin: 0 !important; }
#blog-topic .topic-form-item {
  display: block !important;
  width: auto !important;
  float: none !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
#blog-topic .topic-form label {
  display: block !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin: 0 0 6px !important;
  text-align: left !important;
  width: auto !important;
  float: none !important;
}
#blog-topic .topic-form input[type=text],
#blog-topic .topic-form input[type=email],
#blog-topic .topic-form textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100% !important;
  box-sizing: border-box;
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--karte-rand) !important;
  border-radius: 12px !important;
  font-family: var(--schrift) !important;
  font-size: 17px !important; /* ab 16px zoomt das iPhone nicht hinein */
  min-height: 48px;
  padding: 12px 14px !important;
  margin: 0 !important;
}
#blog-topic .topic-form textarea { min-height: 150px; resize: vertical; }
#blog-topic .topic-form input::placeholder,
#blog-topic .topic-form textarea::placeholder { color: #7D7487; }
/* Feld "Website im Internet" ausblenden: Links sind im Forum nicht erwünscht */
#blog-topic .topic-form-item:has(input[id$="-topic-form-url"]),
#blog-topic .oase-ohne-website { display: none !important; }
.oase-hinweis {
  color: var(--text-2);
  font-size: 15px;
  margin: 4px 0 14px;
}
.oase-hinweis b { color: var(--gold); font-weight: 600; }

/* ---------- Beiträge ---------- */

#blog-topic .topic-comments {
  display: grid !important;
  gap: 12px;
  height: auto !important;
  width: auto !important;
}
#blog-topic .topic-comment {
  position: static !important;
  width: auto !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 16px !important;
  background: var(--karte) !important;
  border: 1px solid var(--karte-rand) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
#blog-topic .topic-comment-info-body { display: block !important; }
/* Handy: Name oben, Datum darunter. Ab 700px: Datum rechts daneben */
#blog-topic .topic-comment-info {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  width: auto !important;
  float: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  text-align: left !important;
}
#blog-topic .topic-comment-avatar { margin: 0 !important; width: 40px !important; height: 40px; grid-row: span 2; }
#blog-topic .topic-comment-avatar img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  background: var(--bg-2);
}
#blog-topic .topic-comment-user,
#blog-topic .topic-comment-user span {
  font-family: var(--schrift-titel) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--text) !important;
  margin: 0 !important;
}
#blog-topic .topic-comment-user { overflow-wrap: anywhere; }
#blog-topic .topic-comment-date {
  margin: 0 !important;
  color: var(--text-2) !important;
  font-size: 16px !important;
}
@media (min-width: 700px) {
  #blog-topic .topic-comment-info { grid-template-columns: 40px minmax(0, 1fr) auto; }
  #blog-topic .topic-comment-avatar { grid-row: auto; }
  #blog-topic .topic-comment-date { white-space: nowrap; }
}
#blog-topic .topic-comment-body {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  color: var(--text) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere;
}
#blog-topic .topic-comment.oase-admin {
  border-color: rgba(255, 61, 139, .55) !important;
  background: linear-gradient(160deg, #2A1424 0%, var(--karte) 70%) !important;
}
#blog-topic .topic-comment.oase-admin .topic-comment-user span::after {
  content: "OASE-Team";
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-family: var(--schrift);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}
/* Links "Missbrauch melden" o. ä. dezent */
#blog-topic .topic-comment .topic-comment-abuse,
#blog-topic .topic-comment .topic-comment-abuse a { color: var(--text-2) !important; font-size: 13px !important; }

/* Seitenzahlen */
#blog-topic .pagination, #blog-topic .topic-pagination { text-align: center; margin: 18px 0; }
#blog-topic .pagination a, #blog-topic .topic-pagination a {
  display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--karte); color: var(--text) !important; margin: 2px;
}

/* ---------- Fuß ---------- */

#imFooter { padding: 24px 0 8px !important; min-height: 0 !important; }
#imFooterObjects, #imFooter .template-object-wrapper, #imFooter_imTextObject_01, #imFooter .text-tab-content {
  position: static !important; width: auto !important; height: auto !important;
}
#imFooter .text-inner span {
  color: var(--text-2) !important;
  background: none !important;
  font-size: 14px !important;
}

/* ---------- Leiste unten (Handy) ---------- */

.oase-leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: rgba(15, 13, 18, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--karte-rand);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.oase-leiste a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  color: var(--text) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
}
.oase-leiste a svg { width: 24px; height: 24px; }
.oase-leiste a.oase-anrufen { color: var(--akzent-2) !important; }
.oase-leiste a:active { background: var(--karte); }

#imPageToTop { bottom: 90px !important; }

/* Menü am Handy: klappt über der Leiste auf */
.oase-menue-mobil { display: none; }
@media (max-width: 699px) {
  body.oase-menue-offen .oase-menue-mobil {
    display: flex;
    gap: 2px;
    flex-direction: column;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    z-index: 1001;
    background: var(--bg-2);
    border: 1px solid var(--karte-rand);
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .6);
  }
  .oase-menue-mobil a {
    color: var(--text) !important;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
  .oase-menue-mobil a.aktiv { background: var(--akzent); color: #fff !important; }
  body.oase-menue-offen .oase-menue-mobil a { min-height: 52px; font-size: 18px; padding: 12px 16px; border-radius: 12px; }
}

/* ---------- Tablet ---------- */

@media (min-width: 700px) {
  body { padding-bottom: 0; }
  .oase-leiste { display: none; }
  .oase-kopf-nav { display: flex; }
  #imPage { padding: 0 24px !important; }
  #imBlogContent .imPgTitle { font-size: 44px !important; }
  .imBlogPostBody { padding: 28px; }
  #blog-topic .topic-form.visible { padding: 24px; }
  #blog-topic .topic-form-row { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  #blog-topic .topic-form-item.empty-column,
  #blog-topic .topic-form-item:has(textarea) { grid-column: 1 / -1; }
  #imPageToTop { bottom: 24px !important; }
}

/* ---------- Desktop ---------- */

@media (min-width: 1000px) {
  #imPage { max-width: 900px !important; }
  #blog-topic .topic-comments { grid-template-columns: 1fr 1fr; }
}

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