/* ============================================================
   HOLO — Forum und weitere Module
   Copyright by gameserver-install.de — by rumpel

   Grundsatz: Nur Farben, Schriften, Rundungen und Abstände.
   Nichts wird positioniert oder umgerastert — das Forum bringt
   sein eigenes Raster mit, und Eingriffe dort zerlegen es.
   ============================================================ */

/* ---------- Knöpfe ----------
   Das Forum hat viele kleine Symbolknöpfe. Sie bekommen die Form
   des Layouts, aber nicht dessen Größe — sonst sprengen sie die
   Beitragsköpfe. */
.px-inhalt .btn,
.px-inhalt button:not(.px-btn):not(.px-icb):not(.px-kopf-feld),
.px-inhalt input[type="submit"]{
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  line-height:1.3;
  padding:9px 16px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--pane2);
  color:var(--txt);
  cursor:pointer;
  white-space:nowrap;
  vertical-align:middle;
  transition:background .18s, border-color .18s, color .18s, transform .18s;
}
.px-inhalt .btn:hover,
.px-inhalt button:not(.px-btn):not(.px-icb):not(.px-kopf-feld):hover{
  border-color:var(--line2);
  transform:translateY(-1px);
}
.px-inhalt .btn-sm,.px-inhalt .btn-xs{padding:6px 11px; font-size:12px}
.px-inhalt .btn i,.px-inhalt .btn .fa{margin-right:7px}
.px-inhalt .btn i:only-child,.px-inhalt .btn .fa:only-child{margin-right:0}
.px-inhalt .btn-group{display:inline-flex; gap:4px; vertical-align:middle}

.px-inhalt .btn-primary,
.px-inhalt input[type="submit"],
.px-inhalt button[type="submit"]:not(.px-btn){
  background:var(--acc); color:var(--auf-acc); border-color:transparent;
}
.px-inhalt .btn-primary:hover{box-shadow:0 8px 22px rgba(var(--acc-rgb),.3)}
.px-inhalt .btn-danger{background:#c0392b; color:#fff; border-color:transparent}
.px-inhalt .btn-success{background:#2e9e5b; color:#fff; border-color:transparent}
.px-inhalt .btn-link{background:none; border:none; color:var(--acc); padding:5px 7px}

/* Umflüsse sauber auflösen */
.px-inhalt .pull-right,.px-inhalt .float-right,.px-inhalt .float-end{float:right}
.px-inhalt .pull-left,.px-inhalt .float-left,.px-inhalt .float-start{float:left}
.px-inhalt .clearfix::after,.px-inhalt .row::after{content:''; display:table; clear:both}

/* ---------- Flächen ---------- */
.px-inhalt .panel,
.px-inhalt .card,
.px-inhalt .well,
.px-inhalt .list-group-item,
.px-inhalt [class*="forum"],
.px-inhalt [class*="topic"],
.px-inhalt [class*="thread"],
.px-inhalt [class*="board"]{
  background-color:var(--pane);
  border-color:var(--line);
  color:var(--txt);
}
.px-inhalt .panel,
.px-inhalt .card,
.px-inhalt .well{
  border-radius:16px;
  box-shadow:none;
  overflow:hidden;
}
.px-inhalt .panel-heading,
.px-inhalt .card-header{
  background-color:var(--pane2);
  border-color:var(--line);
  color:var(--txt);
  font-weight:700;
  font-size:15px;
  letter-spacing:-.01em;
  padding:14px 18px;
}
.px-inhalt .panel-body,.px-inhalt .card-body{padding:18px}
.px-inhalt .panel-footer,.px-inhalt .card-footer{
  background-color:var(--pane2); border-color:var(--line);
}

/* Weiße Reste aus dem Standard einfangen */
.px-inhalt .bg-white,
.px-inhalt .bg-light,
.px-inhalt [style*="background:#fff"],
.px-inhalt [style*="background: #fff"],
.px-inhalt [style*="background-color:#fff"],
.px-inhalt [style*="background-color: #fff"],
.px-inhalt [style*="#ffffff"]{
  background-color:var(--pane) !important;
  color:var(--txt) !important;
}
.px-inhalt [style*="color:#000"],
.px-inhalt [style*="color: #000"],
.px-inhalt [style*="color:#333"]{color:var(--txt) !important}

/* ---------- Tabellen ---------- */
.px-inhalt .table{background:transparent; color:var(--txt)}
.px-inhalt .table > thead > tr > th,
.px-inhalt .table thead th{
  background-color:var(--pane2); color:var(--dim);
  border-color:var(--line); font-weight:600; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase;
}
.px-inhalt .table > tbody > tr > td{border-color:var(--line)}
.px-inhalt .table-striped > tbody > tr:nth-of-type(odd){background-color:var(--pane2)}
.px-inhalt .table-hover > tbody > tr{transition:background .16s}
.px-inhalt .table-hover > tbody > tr:hover{background-color:var(--pane2)}

/* ---------- Beiträge ---------- */
.px-inhalt .post,
.px-inhalt .forum-post,
.px-inhalt .postbody{
  background-color:var(--pane);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .22s;
}
.px-inhalt .post:hover,
.px-inhalt .forum-post:hover{border-color:var(--line2)}
.px-inhalt .post-text,
.px-inhalt .postbody .content{
  font-size:15.5px; line-height:1.7; word-break:break-word;
}
.px-inhalt .post-text img{max-width:100%; height:auto; border-radius:12px}

.px-inhalt .postprofile,
.px-inhalt .post-author{background-color:var(--pane2); color:var(--dim)}
.px-inhalt .postprofile a,
.px-inhalt .post-author a{color:var(--txt); font-weight:600}
.px-inhalt .postprofile a:hover,
.px-inhalt .post-author a:hover{color:var(--acc)}
.px-inhalt .usergroup,
.px-inhalt .post-author .rank{
  display:inline-block; background:var(--acc); color:var(--auf-acc);
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; font-style:normal;
}

/* ---------- Avatare ---------- */
.px-inhalt .post img.avatar,
.px-inhalt .postprofile img,
.px-inhalt .post-author img,
.px-inhalt img[src*="avatar"],
.px-kommentare img{
  max-width:84px; height:auto;
  border-radius:50%;
  border:2px solid var(--line2);
  filter:grayscale(.5) contrast(1.03);
  transition:filter .34s ease, border-color .24s, box-shadow .34s;
  position:relative; z-index:1;
}
/* Kein Vergroessern beim Ueberfahren: Der Ring und die Skalierung
   liessen das Bild ueber seinen Platz hinauswachsen und schoben die
   Zeile an. Stattdessen wird nur die Farbe klarer und die Kante nimmt
   die Akzentfarbe an - das bleibt ruhig und verrutscht nichts. */
.px-inhalt .post img.avatar:hover,
.px-inhalt .postprofile img:hover,
.px-inhalt .post-author img:hover,
.px-inhalt img[src*="avatar"]:hover,
.px-kommentare img:hover{
  filter:none;
  border-color:var(--acc);
  box-shadow:0 4px 14px -4px rgba(var(--acc-rgb),.45);
  z-index:3;
}
.px-inhalt .post:hover img.avatar,
.px-inhalt .forum-post:hover img.avatar,
.px-inhalt .post:hover .postprofile img{filter:grayscale(.15); border-color:var(--acc)}
html[data-anim="0"] .px-inhalt img[src*="avatar"],
html[data-anim="0"] .px-kommentare img{filter:none; transition:none}
html[data-anim="0"] .px-inhalt img[src*="avatar"]:hover{transform:none; box-shadow:none}

/* ---------- Zitate und Code ---------- */
.px-inhalt blockquote,
.px-inhalt .quote,
.px-inhalt .quotecontent{
  background-color:var(--pane2);
  border:none;
  border-left:3px solid var(--acc);
  border-radius:0 12px 12px 0;
  padding:14px 18px;
  margin:16px 0;
  font-size:14.5px;
  color:var(--dim);
}
.px-inhalt .quotetitle,
.px-inhalt blockquote cite{
  display:block; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--acc); margin-bottom:8px; font-style:normal;
}
.px-inhalt pre,
.px-inhalt .codecontent,
.px-inhalt .code{
  background-color:var(--pane2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
  font-family:'JetBrains Mono',monospace;
  font-size:13px; line-height:1.7;
  overflow-x:auto; color:var(--txt);
}
.px-inhalt .codetitle{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:7px;
}
.px-inhalt code{
  background-color:var(--pane2); padding:2px 7px; border-radius:6px;
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--acc);
}
.px-inhalt pre code{background:none; padding:0; color:inherit}

/* ---------- Brotkrumen ---------- */
.px-inhalt .breadcrumb{
  background:transparent; padding:0 0 18px; margin:0; border-radius:0;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.05em;
}
.px-inhalt .breadcrumb a{color:var(--dim)}
.px-inhalt .breadcrumb a:hover{color:var(--acc)}

/* ---------- Formulare ---------- */
.px-inhalt .form-control{
  background-color:var(--pane2); border:1px solid var(--line);
  border-radius:11px; color:var(--txt); box-shadow:none;
}
.px-inhalt .form-control:focus{
  border-color:var(--acc); box-shadow:0 0 0 3px rgba(var(--acc-rgb),.15);
}
.px-inhalt .input-group-addon,.px-inhalt .input-group-text{
  background-color:var(--pane2); border:1px solid var(--line);
  border-radius:11px; color:var(--dim);
}
.px-inhalt .form-group{margin-bottom:18px}
.px-inhalt .help-block,.px-inhalt .form-text{font-size:13px; color:var(--dim); margin-top:5px}
/* Editoren bringen eigene Maße mit - nur die Ecken angleichen */
.px-inhalt .cke,.px-inhalt .cke_chrome,
.px-inhalt .CodeMirror,.px-inhalt .editor-toolbar{border-radius:12px; overflow:hidden}

/* ---------- Seitenblätterung ---------- */
.px-inhalt .pagination{display:flex; gap:5px; list-style:none; padding:0; flex-wrap:wrap}
.px-inhalt .pagination > li > a,
.px-inhalt .pagination > li > span,
.px-inhalt .page-link{
  display:block; padding:9px 14px; border-radius:10px;
  background-color:var(--pane2); border:1px solid var(--line);
  color:var(--txt); font-size:13.5px; transition:.18s;
}
.px-inhalt .pagination > li > a:hover{border-color:var(--acc); color:var(--acc)}
.px-inhalt .pagination > .active > a,
.px-inhalt .pagination > .active > span,
.px-inhalt .page-item.active .page-link{
  background-color:var(--acc); border-color:transparent; color:var(--auf-acc);
}

/* ---------- Kennzeichen und Meldungen ---------- */
.px-inhalt .label,.px-inhalt .badge{
  border-radius:99px; font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:.08em; padding:4px 10px;
}
.px-inhalt .label-primary,.px-inhalt .badge-primary,.px-inhalt .bg-primary{
  background-color:var(--acc); color:var(--auf-acc);
}
.px-inhalt .alert{
  border:1px solid var(--line); border-radius:14px;
  padding:15px 18px; background-color:var(--pane2); color:var(--txt);
}
.px-inhalt .alert-danger{border-color:#c0392b}
.px-inhalt .alert-success{border-color:#2e9e5b}
.px-inhalt .alert-info{border-color:var(--acc)}
.px-inhalt .alert-warning{border-color:#d99a1e}

/* ---------- Hilfstexte und Verweise ---------- */
.px-inhalt .text-muted,.px-inhalt .muted,
.px-inhalt [class*="meta"],.px-inhalt [class*="date"]{color:var(--dim)}
.px-inhalt hr,
.px-inhalt [class*="divider"]{border-color:var(--line); background-color:var(--line)}
/* Verweise in der Akzentfarbe - aber nicht die Kacheln des Layouts */
.px-inhalt a:not(.px-btn):not(.btn):not(.px-eintrag):not(.px-gross):not(.px-kopf-feld){color:var(--acc)}
.px-inhalt [class*="topic"] a,
.px-inhalt [class*="thread"] a,
.px-inhalt [class*="forum"] a{color:var(--txt)}
.px-inhalt [class*="topic"] a:hover,
.px-inhalt [class*="thread"] a:hover,
.px-inhalt [class*="forum"] a:hover{color:var(--acc)}

/* ---------- Weitere Module ---------- */
.px-inhalt .gallery a.thumbnail,
.px-inhalt .gallery-item{
  display:block; border:none; border-radius:14px; overflow:hidden;
  background-color:var(--pane2); padding:0;
}
.px-inhalt .gallery a.thumbnail img,
.px-inhalt .gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1); filter:grayscale(.25);
}
.px-inhalt .gallery a.thumbnail:hover img,
.px-inhalt .gallery-item:hover img{transform:scale(1.06); filter:none}
.px-inhalt .download-item{
  display:flex; align-items:center; gap:14px; padding:15px 18px;
  background-color:var(--pane); border:1px solid var(--line);
  border-radius:14px; margin-bottom:8px;
}
.px-inhalt .download-item:hover{border-color:var(--line2)}
.px-inhalt .calendar td,.px-inhalt .calendar th{
  border:1px solid var(--line); padding:9px; text-align:center; vertical-align:top;
}
.px-inhalt .calendar th{background-color:var(--pane2); font-size:12.5px; color:var(--dim)}
.px-inhalt .calendar .today{background-color:var(--acc); color:var(--auf-acc); font-weight:700}
.px-inhalt mark,.px-inhalt .highlight{
  background-color:var(--acc); color:var(--auf-acc); padding:0 4px; border-radius:4px;
}

/* Einblenden der Beiträge beim Scrollen */
.px-js .px-inhalt .post,
.px-js .px-inhalt .forum-post,
.px-js .px-inhalt .comment,
.px-js .px-kommentare .comment{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.px-js .px-inhalt .post.px-in,
.px-js .px-inhalt .forum-post.px-in,
.px-js .px-inhalt .comment.px-in,
.px-js .px-kommentare .comment.px-in{opacity:1; transform:none}
html[data-anim="0"] .px-js .px-inhalt .post,
html[data-anim="0"] .px-js .px-inhalt .forum-post,
html[data-anim="0"] .px-js .px-inhalt .comment{opacity:1 !important; transform:none !important}

/* ---------- Umbrüche ---------- */
@media(max-width:900px){
  .px-inhalt .btn{padding:8px 13px; font-size:12.5px}
  .px-inhalt .post img.avatar,
  .px-inhalt .postprofile img,
  .px-inhalt .post-author img{max-width:50px}
  .px-inhalt .pull-right,.px-inhalt .float-right{float:none}
}
@media(prefers-reduced-motion:reduce){
  .px-inhalt img[src*="avatar"],.px-kommentare img{transition:none; filter:none}
  .px-inhalt img[src*="avatar"]:hover{transform:none; box-shadow:none}
  .px-js .px-inhalt .post,.px-js .px-inhalt .forum-post,
  .px-js .px-inhalt .comment{opacity:1; transform:none}
}

/* ============================================================
   Blendschutz im dunklen Design

   ilch bringt eigene Flächen mit, die auf Weiß ausgelegt sind.
   Im dunklen Design leuchten die wie ein Scheinwerfer. Hier werden
   sie flächendeckend eingefangen — ausschließlich über Farbwerte,
   damit nichts verrutscht.
   ============================================================ */

html.dark .px-inhalt div,
html.dark .px-inhalt section,
html.dark .px-inhalt article,
html.dark .px-inhalt aside,
html.dark .px-inhalt table,
html.dark .px-inhalt tbody,
html.dark .px-inhalt tr,
html.dark .px-inhalt td,
html.dark .px-inhalt th,
html.dark .px-inhalt li,
html.dark .px-inhalt dl,
html.dark .px-inhalt dd{
  background-color:transparent;
}

/* Flächen, die eine eigene Farbe behalten sollen */
html.dark .px-inhalt .panel,
html.dark .px-inhalt .card,
html.dark .px-inhalt .well,
html.dark .px-inhalt .post,
html.dark .px-inhalt .forum-post,
html.dark .px-inhalt .postbody,
html.dark .px-inhalt .list-group-item,
html.dark .px-inhalt .alert,
html.dark .px-kommentare .comment{
  background-color:var(--pane) !important;
  color:var(--txt);
}
html.dark .px-inhalt .panel-heading,
html.dark .px-inhalt .card-header,
html.dark .px-inhalt .panel-footer,
html.dark .px-inhalt .card-footer,
html.dark .px-inhalt .postprofile,
html.dark .px-inhalt .post-author,
html.dark .px-inhalt .table thead th,
html.dark .px-inhalt .table-striped > tbody > tr:nth-of-type(odd),
html.dark .px-inhalt blockquote,
html.dark .px-inhalt .quote,
html.dark .px-inhalt .quotecontent,
html.dark .px-inhalt pre,
html.dark .px-inhalt .codecontent{
  background-color:var(--pane2) !important;
  color:var(--txt);
}

/* Helle Vorgaben aus Bootstrap und aus style-Angaben */
html.dark .px-inhalt .bg-white,
html.dark .px-inhalt .bg-light,
html.dark .px-inhalt .bg-body,
html.dark .px-inhalt .panel-default,
html.dark .px-inhalt .table-light,
html.dark .px-inhalt .thead-light th,
html.dark .px-inhalt [class*="bg-white"],
html.dark .px-inhalt [style*="background:#fff"],
html.dark .px-inhalt [style*="background: #fff"],
html.dark .px-inhalt [style*="background-color:#fff"],
html.dark .px-inhalt [style*="background-color: #fff"],
html.dark .px-inhalt [style*="#ffffff"],
html.dark .px-inhalt [style*="#FFFFFF"],
html.dark .px-inhalt [style*="rgb(255, 255, 255)"],
html.dark .px-inhalt [bgcolor]{
  background-color:var(--pane2) !important;
  color:var(--txt) !important;
}

/* Dunkle Schrift auf dunklem Grund waere unlesbar */
html.dark .px-inhalt [style*="color:#000"],
html.dark .px-inhalt [style*="color: #000"],
html.dark .px-inhalt [style*="color:#111"],
html.dark .px-inhalt [style*="color:#222"],
html.dark .px-inhalt [style*="color:#333"],
html.dark .px-inhalt [style*="color: #333"],
html.dark .px-inhalt [color]{color:var(--txt) !important}

/* Eingabefelder und Editoren - die groessten Blendquellen */
html.dark .px-inhalt input,
html.dark .px-inhalt textarea,
html.dark .px-inhalt select,
html.dark .px-inhalt .form-control,
html.dark .px-kommentare textarea{
  background-color:var(--pane2) !important;
  color:var(--txt) !important;
  border-color:var(--line) !important;
}
html.dark .px-inhalt .cke,
html.dark .px-inhalt .cke_chrome,
html.dark .px-inhalt .cke_inner,
html.dark .px-inhalt .cke_top,
html.dark .px-inhalt .cke_bottom,
html.dark .px-inhalt .cke_contents,
html.dark .px-inhalt .cke_wysiwyg_frame,
html.dark .px-inhalt .CodeMirror,
html.dark .px-inhalt .editor-toolbar,
html.dark .px-inhalt .editor-preview{
  background-color:var(--pane2) !important;
  border-color:var(--line) !important;
  color:var(--txt) !important;
}

/* Symbolleisten der Editoren */
html.dark .px-inhalt .cke_toolgroup,
html.dark .px-inhalt .cke_combo_button,
html.dark .px-inhalt .cke_button{
  background-color:var(--pane) !important;
  border-color:var(--line) !important;
}
html.dark .px-inhalt .cke_button_icon{filter:invert(.85)}

/* Tabellen mit fest gesetzten hellen Raendern */
html.dark .px-inhalt table[border],
html.dark .px-inhalt table[bordercolor]{border-color:var(--line) !important}

/* Smilies und kleine Grafiken nicht anfassen */
html.dark .px-inhalt img{filter:none}


/* ============================================================
   Lesbarkeit im dunklen Design

   Der Blendschutz oben hat die Flaechen abgedunkelt. Die Schriftfarben
   kommen aber weiter aus dem Stylesheet von ilch und sind fuer weissen
   Grund gemacht - dunkel auf dunkel ist unlesbar. Darum werden sie
   hier ausdruecklich gesetzt.
   ============================================================ */

html.dark .px-inhalt,
html.dark .px-inhalt p,
html.dark .px-inhalt div,
html.dark .px-inhalt span,
html.dark .px-inhalt li,
html.dark .px-inhalt dt,
html.dark .px-inhalt dd,
html.dark .px-inhalt td,
html.dark .px-inhalt th,
html.dark .px-inhalt label,
html.dark .px-inhalt strong,
html.dark .px-inhalt b,
html.dark .px-inhalt em,
html.dark .px-inhalt i,
html.dark .px-inhalt h1,
html.dark .px-inhalt h2,
html.dark .px-inhalt h3,
html.dark .px-inhalt h4,
html.dark .px-inhalt h5,
html.dark .px-inhalt h6,
html.dark .px-inhalt legend,
html.dark .px-inhalt caption,
html.dark .px-kommentare,
html.dark .px-kommentare *{
  color:var(--txt);
}

/* Zurueckhaltendes bleibt zurueckhaltend */
html.dark .px-inhalt small,
html.dark .px-inhalt .small,
html.dark .px-inhalt .text-muted,
html.dark .px-inhalt .muted,
html.dark .px-inhalt time,
html.dark .px-inhalt [class*="meta"],
html.dark .px-inhalt [class*="date"],
html.dark .px-inhalt [class*="time"],
html.dark .px-inhalt blockquote,
html.dark .px-inhalt .quote,
html.dark .px-inhalt .quotecontent,
html.dark .px-inhalt .help-block,
html.dark .px-inhalt .form-text,
html.dark .px-inhalt .breadcrumb a{
  color:var(--dim);
}

/* Verweise bleiben farbig */
html.dark .px-inhalt a:not(.px-btn):not(.btn):not(.px-eintrag):not(.px-gross):not(.px-kopf-feld),
html.dark .px-inhalt code,
html.dark .px-inhalt .quotetitle,
html.dark .px-inhalt .codetitle{
  color:var(--acc);
}
html.dark .px-inhalt [class*="topic"] a,
html.dark .px-inhalt [class*="thread"] a,
html.dark .px-inhalt [class*="forum"] a{color:var(--txt)}
html.dark .px-inhalt [class*="topic"] a:hover,
html.dark .px-inhalt [class*="thread"] a:hover,
html.dark .px-inhalt [class*="forum"] a:hover{color:var(--acc)}

/* Farbige Knoepfe behalten ihre eigene Schriftfarbe */
html.dark .px-inhalt .btn-primary,
html.dark .px-inhalt .btn-primary *,
html.dark .px-inhalt input[type="submit"],
html.dark .px-inhalt button[type="submit"]:not(.px-btn),
html.dark .px-inhalt .usergroup,
html.dark .px-inhalt .post-author .rank,
html.dark .px-inhalt .label-primary,
html.dark .px-inhalt .badge-primary,
html.dark .px-inhalt .pagination > .active > a,
html.dark .px-inhalt .page-item.active .page-link,
html.dark .px-inhalt mark,
html.dark .px-inhalt .highlight{
  color:var(--auf-acc);
}
html.dark .px-inhalt .btn-danger,
html.dark .px-inhalt .btn-danger *,
html.dark .px-inhalt .btn-success,
html.dark .px-inhalt .btn-success *{color:#fff}

/* Der Editor faerbt seinen Inhaltsrahmen selbst. Von aussen laesst
   sich das nicht erreichen - darum bleibt er hell und bekommt nur
   einen Rahmen, damit er nicht wie ein Loch wirkt. */
html.dark .px-inhalt .cke_wysiwyg_frame,
html.dark .px-inhalt iframe{
  background:#fff;
  border-radius:10px;
}

/* ============================================================
   Ränder im dunklen Design

   Die Flächen waren bereits abgedunkelt, die Ränder kamen aber
   weiter aus dem Stylesheet von ilch und sind für weißen Grund
   gedacht — helle Linien auf dunklem Grund stechen unangenehm.
   ============================================================ */

html.dark .px-inhalt *,
html.dark .px-inhalt *::before,
html.dark .px-inhalt *::after{
  border-color:var(--line);
}

/* Ausnahmen: Was farbig sein soll, bleibt farbig */
html.dark .px-inhalt blockquote,
html.dark .px-inhalt .quote,
html.dark .px-inhalt .quotecontent{border-left-color:var(--acc)}
html.dark .px-inhalt .btn-primary,
html.dark .px-inhalt input[type="submit"],
html.dark .px-inhalt .badge-primary,
html.dark .px-inhalt .label-primary,
html.dark .px-inhalt .pagination > .active > a,
html.dark .px-inhalt .page-item.active .page-link{border-color:transparent}
html.dark .px-inhalt .alert-danger{border-color:#c0392b}
html.dark .px-inhalt .alert-success{border-color:#2e9e5b}
html.dark .px-inhalt .alert-info{border-color:var(--acc)}
html.dark .px-inhalt img[src*="avatar"],
html.dark .px-inhalt .postprofile img,
html.dark .px-inhalt .post img.avatar{border-color:var(--line2)}
html.dark .px-inhalt img[src*="avatar"]:hover,
html.dark .px-inhalt .postprofile img:hover{border-color:var(--acc)}
html.dark .px-inhalt input:focus,
html.dark .px-inhalt textarea:focus,
html.dark .px-inhalt select:focus,
html.dark .px-inhalt .form-control:focus{border-color:var(--acc)}

/* Fest eingetragene helle Rahmen aus altem Markup */
html.dark .px-inhalt [border],
html.dark .px-inhalt [bordercolor],
html.dark .px-inhalt [style*="border:1px solid #"],
html.dark .px-inhalt [style*="border: 1px solid #"],
html.dark .px-inhalt [style*="border-color:#"],
html.dark .px-inhalt [style*="#ddd"],
html.dark .px-inhalt [style*="#ccc"],
html.dark .px-inhalt [style*="#eee"]{
  border-color:var(--line) !important;
}

/* Waagerechte Linien und Tabellenrahmen */
html.dark .px-inhalt hr{border-color:var(--line); background:var(--line)}
html.dark .px-inhalt table,
html.dark .px-inhalt table td,
html.dark .px-inhalt table th{border-color:var(--line) !important}

/* Schatten wirken im Dunkeln als heller Saum - entfernen */
html.dark .px-inhalt .panel,
html.dark .px-inhalt .card,
html.dark .px-inhalt .well,
html.dark .px-inhalt .dropdown-menu{box-shadow:none}

/* ============================================================
   Zweifarbige Überschriften im Inhaltsbereich

   Die Leseregel oben setzt em auf die Textfarbe und hat dieselbe
   Gewichtung wie die Akzentregel im Hauptstylesheet. Bei Gleichstand
   gewinnt die spätere Datei — also diese hier. Darum wird die
   Akzentfarbe an dieser Stelle ausdrücklich wiederhergestellt.
   ============================================================ */
html.dark .px-inhalt .px-skopf h2 em,
html.dark .px-inhalt .px-skopf h1 em,
html.dark .px-inhalt .px-weitere h2 em,
html.dark .px-weitere .px-skopf h2 em,
.px-inhalt .px-skopf h2 em,
.px-inhalt .px-skopf h1 em,
.px-weitere .px-skopf h2 em{
  color:var(--acc) !important;
  font-style:italic;
  font-weight:800;
}

/* ============================================================
   Forum in der Magazin-Anmutung

   Weniger runde Ecken, klarere Trennlinien, Ressortmarken statt
   Kacheln — passend zum übrigen Layout.
   ============================================================ */

/* Beitragskarten: kantiger, mit farbiger Marke an der Oberkante */
.px-inhalt .post,
.px-inhalt .forum-post,
.px-inhalt .postbody{
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
.px-inhalt .post::before,
.px-inhalt .forum-post::before{
  content:''; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--acc); transform:scaleX(0); transform-origin:left;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.px-inhalt .post:hover::before,
.px-inhalt .forum-post:hover::before{transform:scaleX(1)}

/* Themenlisten wie ein Inhaltsverzeichnis */
.px-inhalt .table > thead > tr > th,
.px-inhalt .table thead th{
  border-bottom:2px solid var(--txt);
  background:transparent;
  font-size:11.5px; letter-spacing:.14em;
}
.px-inhalt .table > tbody > tr > td{padding:14px}
.px-inhalt .table-hover > tbody > tr:hover{background:var(--pane2)}

/* Panels: Kopfzeile wie ein Ressortkopf */
.px-inhalt .panel,
.px-inhalt .card{border-radius:14px}
.px-inhalt .panel-heading,
.px-inhalt .card-header{
  background:transparent;
  border-bottom:2px solid var(--txt);
  font-size:15px; font-weight:800; letter-spacing:-.02em; text-transform:none;
}

/* Knöpfe kantiger, passend zu den Ressortmarken */
.px-inhalt .btn,
.px-inhalt button:not(.px-btn):not(.px-icb):not(.px-kopf-feld),
.px-inhalt input[type="submit"]{border-radius:9px}
.px-inhalt .btn-primary,
.px-inhalt input[type="submit"],
.px-inhalt button[type="submit"]:not(.px-btn){
  letter-spacing:.02em;
}

/* Rangabzeichen im Stil der Dachzeilen */
.px-inhalt .usergroup,
.px-inhalt .post-author .rank{
  border-radius:6px; font-size:10px; letter-spacing:.14em; padding:4px 9px;
}

/* Seitenblätterung als Zahlenreihe statt Pillen */
.px-inhalt .pagination > li > a,
.px-inhalt .pagination > li > span,
.px-inhalt .page-link{border-radius:8px; font-weight:600}

/* Zitate mit Anführungszeichen wie im gedruckten Heft */
.px-inhalt blockquote,
.px-inhalt .quote,
.px-inhalt .quotecontent{
  border-radius:0 12px 12px 0;
  position:relative;
}
.px-inhalt blockquote::before{
  content:'\\201E'; position:absolute; left:12px; top:2px;
  font-size:38px; line-height:1; color:var(--acc); opacity:.34;
}
.px-inhalt blockquote{padding-left:44px}

/* Avatare kantig gerundet statt kreisrund - passt zum Magazin */
.px-inhalt .post img.avatar,
.px-inhalt .postprofile img,
.px-inhalt .post-author img,
.px-inhalt img[src*="avatar"]{border-radius:12px}

/* ============================================================
   Feinschliff — hell und dunkel gleich sauber

   Die farbigen Schatten waren im hellen Erscheinungsbild zu kräftig
   und wirkten schmutzig. Sie werden dort zurückgenommen und durch
   eine klare Kante ersetzt.
   ============================================================ */

/* Statt eines geworfenen Schattens eine saubere Kante links.
   Sie verändert die Maße nicht, weil sie als Rand eingerechnet ist. */
.px-inhalt .panel,
.px-inhalt .card,
.px-inhalt .well,
.px-inhalt .post{
  border-left:3px solid transparent;
  box-shadow:0 10px 26px -18px var(--schatten);
  transition:border-left-color .28s cubic-bezier(.16,1,.3,1),
             box-shadow .28s cubic-bezier(.16,1,.3,1);
  transform:none;
}
.px-inhalt .panel:hover,
.px-inhalt .card:hover,
.px-inhalt .well:hover,
.px-inhalt .post:hover{
  border-left-color:var(--acc);
  box-shadow:0 16px 36px -20px var(--schatten);
  transform:none;
}

/* Im hellen Erscheinungsbild dürfen Schatten kaum sichtbar sein */
html:not(.dark) .px-inhalt .panel,
html:not(.dark) .px-inhalt .card,
html:not(.dark) .px-inhalt .well,
html:not(.dark) .px-inhalt .post{
  box-shadow:0 2px 8px -6px rgba(20,20,26,.5);
}
html:not(.dark) .px-inhalt .panel:hover,
html:not(.dark) .px-inhalt .card:hover,
html:not(.dark) .px-inhalt .post:hover{
  box-shadow:0 8px 20px -14px rgba(20,20,26,.55);
}

/* Der Strich an der Oberkante war doppelt gemoppelt - die Kante
   links genügt. */
.px-inhalt .post::before,
.px-inhalt .forum-post::before{display:none}

/* Tabellenzeilen: nur Fläche, kein Strich, der die Zeile anschiebt */
.px-inhalt .table > tbody > tr{
  box-shadow:none;
  transition:background .2s ease;
}
.px-inhalt .table > tbody > tr:hover{
  background:var(--pane2);
  box-shadow:none;
}
.px-inhalt .table > tbody > tr > td:first-child{
  border-left:3px solid transparent;
  transition:border-left-color .24s;
}
.px-inhalt .table > tbody > tr:hover > td:first-child{
  border-left-color:var(--acc);
}

/* Vorschaubilder in Listen: fester Platz, damit nichts springt */
.px-inhalt .table img,
.px-inhalt .media img,
.px-inhalt .thumbnail img{
  transform:none !important;
  transition:filter .3s ease, border-color .24s;
}
.px-inhalt .table img:hover,
.px-inhalt .media img:hover{filter:none; border-color:var(--acc)}

/* Gleiche Rundungen überall */
.px-inhalt .panel,
.px-inhalt .card,
.px-inhalt .well,
.px-inhalt .post,
.px-inhalt .alert{border-radius:14px}
.px-inhalt .btn,
.px-inhalt input,
.px-inhalt select,
.px-inhalt textarea{border-radius:10px}

/* ============================================================
   Schwarze Schrift ausräumen

   ilch und die Module bringen an vielen Stellen fest gesetzte
   Farben mit — im dunklen Erscheinungsbild sind das schwarze
   Buchstaben auf dunklem Grund. Hier werden sie eingefangen.
   ============================================================ */
.px-inhalt [style*="color:#000"],
.px-inhalt [style*="color: #000"],
.px-inhalt [style*="color:black"],
.px-inhalt [style*="color: black"],
.px-inhalt [style*="color:rgb(0, 0, 0)"],
.px-inhalt [style*="color:rgb(0,0,0)"]{
  color:var(--txt) !important;
}

/* Bootstrap-Farbklassen, die ilch verwendet */
.px-inhalt .text-dark,
.px-inhalt .text-body,
.px-inhalt .text-black,
.px-inhalt .text-secondary{color:var(--txt) !important}
.px-inhalt .text-muted{color:var(--dim) !important}

/* Flächen mit heller Vorgabe bekommen die Layoutfarben */
.px-inhalt .bg-white,
.px-inhalt .bg-light,
.px-inhalt [style*="background:#fff"],
.px-inhalt [style*="background: #fff"],
.px-inhalt [style*="background-color:#fff"],
.px-inhalt [style*="background-color: #fff"]{
  background:var(--pane) !important;
  color:var(--txt) !important;
}

/* Tabellen und Listengruppen von Bootstrap */
.px-inhalt .table,
.px-inhalt .table > tbody > tr > td,
.px-inhalt .table > tbody > tr > th,
.px-inhalt .list-group-item{
  color:var(--txt);
  background-color:transparent;
  border-color:var(--line);
}
.px-inhalt .list-group-item{background:var(--pane)}

/* Eingabefelder: helle Vorgaben überschreiben */
.px-inhalt input,
.px-inhalt select,
.px-inhalt textarea,
.px-inhalt .form-control,
.px-inhalt .custom-select{
  background:var(--pane2) !important;
  color:var(--txt) !important;
  border-color:var(--line) !important;
}
.px-inhalt input::placeholder,
.px-inhalt textarea::placeholder{color:var(--dim); opacity:1}
.px-inhalt .form-control:focus{
  border-color:var(--acc) !important;
  box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16) !important;
}

/* Ausklappmenüs */
.px-inhalt .dropdown-menu{
  background:var(--pane); border-color:var(--line);
  box-shadow:0 18px 44px -20px var(--schatten);
}
.px-inhalt .dropdown-item{color:var(--txt)}
.px-inhalt .dropdown-item:hover,
.px-inhalt .dropdown-item:focus{
  background:var(--pane2); color:var(--acc);
}

/* Beim Editor bleiben helle Flächen sinnvoll — dort nicht eingreifen */
.px-inhalt .cke_editable,
.px-inhalt .ck-editor__editable,
.px-inhalt iframe{color:initial}