/*
 * AStA der FH Westküste - Mitgliederverwaltung - Pixel-Design "Tag" (Heide)
 * Helles Design mit Heidekraut, Windrädern und der St.-Jürgen-Kirche.
 * Wird nach asta.css geladen, wenn tagsüber oder "Immer Tag" gilt (siehe helper::themeLinks()).
 * Umschalten: Dein Profil > Design.
 *
 * Schrift "AStA Pixel": selbst gebaut (fonts/asta-pixel.*), nur für Überschriften und Zahlen.
 * Sie ist auf 12px-Schritte ausgelegt: 24px = jedes Schrift-Pixel ist 2 Bildschirm-Pixel, 36px = 3 usw.
 * Fließtext, Tabellen und Formulare bleiben in einer gut lesbaren Festbreitenschrift.
 */

@font-face {
    font-family: "AStA Pixel";
    src: url("../fonts/asta-pixel.woff") format("woff"), url("../fonts/asta-pixel.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --sky: #dff0ff;
    --bg0: #f6f1fc;
    --card: #fffaff;
    --card2: #efe6fa;
    --ink: #3a1f66;            /* dunkles Violett: Linien, Text, Navigationsleiste */
    --edge: #3a1f66;           /* Rahmen der Kästen */
    --edge-soft: #cbb8e6;
    --edge-hi: #7a5fd8;
    --field: #3a1f66;
    --text: #3a1f66;
    --dim: #6d5a90;
    --accent: #9b3fc8;         /* Heidekraut */
    --accent-hi: #b25fdc;
    --link: #5a3fb0;
    --gold: #9a6a00;
    --danger: #b32d6a;
    --green: #3f8f3a;
    --green-hi: #57a852;
    --line: #e3d6f3;
    --px: 3px;

    --font-px: "AStA Pixel", "Courier New", monospace;
    --font-mono: "Cascadia Mono", "JetBrains Mono", "SF Mono", Consolas, "DejaVu Sans Mono", Menlo, "Liberation Mono", monospace;
}

html {
    background: linear-gradient(180deg, var(--sky) 0, var(--bg0) 420px) no-repeat, var(--bg0);
    color-scheme: light;
}

body {
    background: transparent;
    image-rendering: pixelated;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.6;
    padding-top: 60px;
}

::selection { background: var(--accent); color: #fff; }

a { color: var(--link); }
a:hover, a:focus { color: var(--ink); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

hr { border-top: 3px dotted var(--edge-soft); }
code { background: var(--card2); color: #7a2a9a; border-radius: 0; padding: 1px 6px; }
h1, h2, h3, h4 { color: var(--ink); }
.muted, .help-block, .text-muted { color: var(--dim); }
.required-mark { color: var(--danger); }

/* ---------- Navigation ---------- */

.navbar-inverse {
    background: var(--ink);
    border: 0;
    border-bottom: 4px solid var(--accent);
    box-shadow: 0 4px 0 0 var(--edge-soft);
    min-height: 52px;
}
.navbar-inverse .navbar-nav > li > a {
    color: #e6dcf7;
    font-size: 13px;
    padding-top: 16px;
    padding-bottom: 16px;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus { color: #fff; background: #52367f; text-decoration: none; }
.navbar-inverse .navbar-nav > li.active > a,
.navbar-inverse .navbar-nav > li.active > a:hover { color: #fff; background: var(--accent); }
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus { color: #fff; background: #52367f; }
.navbar-inverse .navbar-toggle { border: 3px solid #b9a4e8; border-radius: 0; }
.navbar-inverse .navbar-toggle .icon-bar { background: #e6dcf7; border-radius: 0; }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background: #52367f; }
.navbar-inverse .navbar-collapse { border-color: #52367f; }
.navbar-inverse .brand-ref { color: #e6dcf7; font-size: 13px; height: 52px; padding: 17px 10px; margin-left: 0; }

.dropdown-menu {
    background: var(--card);
    border: 0;
    border-radius: 0;
    margin-top: 0;
    box-shadow: 0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge);
}
.dropdown-menu > li > a { color: var(--ink); padding: 8px 18px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--accent); color: #fff; text-decoration: none; }
.dropdown-menu .divider { background: var(--edge-soft); }

/* ---------- Seitenkopf: Terminal-Zeile ---------- */

.page-header.term {
    border: 0;
    margin: 30px 0 8px;
    padding: 0;
    font-family: var(--font-px);
    font-weight: normal;
    font-size: 36px;
    line-height: 1.25;
    color: var(--ink);
    -webkit-font-smoothing: none;
    overflow-wrap: anywhere;
}
.term .t-prompt { color: var(--accent); }
.term .t-cmd { color: var(--dim); }
.term .t-arg { color: var(--ink); }
.term .t-cursor {
    display: inline-block;
    width: 18px;
    height: 30px;
    margin-left: 8px;
    background: var(--link);
    vertical-align: -3px;
    animation: px-blink 1.1s steps(1) infinite;
}
@keyframes px-blink { 50% { opacity: 0; } }

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--dim);
}
.breadcrumb > li + li:before { content: "\00a0/\00a0"; color: var(--edge-soft); padding: 0; }
.breadcrumb > .active { color: var(--dim); }

footer { color: var(--dim); font-size: 12px; margin: 40px 0 0; }
footer hr { margin-bottom: 14px; }

/* ---------- Kästen ---------- */

.panel-asta,
.ref-card,
.action-tile,
.ref-tile,
.alert,
.dropzone,
.table-wrap,
.hero {
    border: 0;
    border-radius: 0;
    box-shadow: 0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge);
    margin-left: var(--px);
    margin-right: var(--px);
}
.panel-asta, .ref-card, .table-wrap { background: var(--card); color: var(--text); }
.panel-asta { padding: 22px 24px; margin-bottom: 26px; }
.panel-asta h2 { font-size: 18px; font-weight: 700; color: var(--ink); }
.panel-asta h3 { font-size: 15px; font-weight: 700; color: var(--link); }
.lead-small { color: var(--dim); font-size: 14px; margin-top: 0; }

.ref-card { border-top: 0; padding: 18px 22px; --edge: var(--green); margin-bottom: 26px; }
.ref-card h3 { font-family: var(--font-px); font-weight: normal; font-size: 24px; color: var(--ink); -webkit-font-smoothing: none; }

.table-wrap { padding: 14px 16px; margin-bottom: 28px; overflow-x: auto; }

/* ---------- Hero (Startseite) ---------- */

.hero {
    --k: 4;                              /* Vergrößerung: das Bild ist 56 Pixel hoch, 4x = 224px */
    position: relative;
    display: flex;
    align-items: flex-start;
    height: calc(var(--k) * 56px);
    margin-top: 28px;
    margin-bottom: 30px;
    padding: 0 28px;
    overflow: hidden;
    background: #b9e0fb;
    image-rendering: pixelated;
}
.hero .hero-scene { position: absolute; inset: 0; }
.hero-text { position: relative; z-index: 2; max-width: 52%; min-width: 0; padding-top: 26px; }
.hero .hello { font-family: var(--font-px); font-weight: normal; font-size: 36px; line-height: 1.2; margin: 0 0 6px; color: var(--ink); -webkit-font-smoothing: none; overflow-wrap: anywhere; }
.hero .hello .t-prompt { color: var(--accent); }
.hero p { margin: 0; color: #3a2a80; }
@media (max-width: 1199px) { .hero { --k: 3; } }
@media (max-width: 767px)  {
    .hero { --k: 2; height: auto; flex-direction: column; align-items: stretch; padding: 0; background: var(--card); }
    .hero .hero-scene { position: relative; inset: auto; height: calc(var(--k) * 56px); }
    .hero-text { max-width: none; padding: 16px 18px 20px; }
    .hero .hello, .page-header.term { font-size: 24px; }
}

/* ---------- Bewegte Pixelszene (Hero + Anmeldung) ----------
   Ebenen von unten nach oben, alle rechts ausgerichtet, damit die Kirche immer sichtbar bleibt.
   Bewegung nur in Pixelschritten (steps), nichts läuft weich. */
.px-scene { position: relative; overflow: hidden; background: #b9e0fb; image-rendering: pixelated; }
.px-scene .ps {
    position: absolute; inset: 0;
    background-repeat: no-repeat; background-position: right bottom; background-size: auto 100%;
    image-rendering: pixelated; pointer-events: none;
}
.px-scene .ps-sky  { background-image: url("../img/tag-scene-sky.png"); }
.px-scene .ps-land { background-image: url("../img/tag-scene-land.png"); }
.px-scene .ps-clouds {
    background-image: url("../img/tag-scene-clouds.png"); background-repeat: repeat-x; background-position: 0 0; background-size: calc(var(--k) * 340px) 100%;
    animation: px-clouds 680s steps(340) infinite;
}
.px-scene .ps-rays {
    background-image: url("../img/tag-scene-rays.png"); background-position: 100% 0; background-size: calc(var(--k) * 340px) calc(var(--k) * 112px);
    animation: px-rays 2.4s steps(2) infinite;
}
.px-scene .ps-blades-a, .px-scene .ps-blades-b { background-position: 100% 0; background-size: calc(var(--k) * 340px) calc(var(--k) * 224px); }
.px-scene .ps-blades-a { background-image: url("../img/tag-scene-blades-a.png"); animation: px-blades 1.6s steps(4) infinite; }
.px-scene .ps-blades-b { background-image: url("../img/tag-scene-blades-b.png"); animation: px-blades 2.2s steps(4) infinite; }
.px-scene .ps-heath {
    background-image: url("../img/tag-scene-heath.png"); background-position: 100% 0; background-size: calc(var(--k) * 340px) calc(var(--k) * 168px);
    animation: px-rustle 3s steps(3) infinite;
}
.px-scene .ps-fly {
    inset: auto; background: none;
    right: calc(var(--k) * 30px); bottom: calc(var(--k) * 9px);
    width: calc(var(--k) * 7px); height: calc(var(--k) * 5px);
    animation: px-fly 44s steps(140) infinite, px-fly-fade 44s steps(1) infinite;
}
.px-scene .ps-fly::before {
    content: ""; position: absolute; inset: 0;
    background: url("../img/tag-scene-butterfly.png") 0 0 / calc(var(--k) * 14px) 100% no-repeat; image-rendering: pixelated;
    animation: px-flap .5s steps(2) infinite, px-flit 3.2s steps(1) infinite;
}

@keyframes px-clouds { from { background-position: 0 0; } to { background-position: calc(var(--k) * -340px) 0; } }
@keyframes px-rays   { from { background-position: 100% 0; } to { background-position: 100% calc(var(--k) * -112px); } }
@keyframes px-blades { from { background-position: 100% 0; } to { background-position: 100% calc(var(--k) * -224px); } }
@keyframes px-rustle { from { background-position: 100% 0; } to { background-position: 100% calc(var(--k) * -168px); } }
@keyframes px-fly      { from { transform: translateX(0); } to { transform: translateX(calc(var(--k) * -140px)); } }
@keyframes px-fly-fade { 0% { opacity: 0; } 3% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; } }
@keyframes px-flap     { from { background-position: 0 0; } to { background-position: calc(var(--k) * -14px) 0; } }
@keyframes px-flit     { 0% { transform: translateY(0); } 25% { transform: translateY(calc(var(--k) * -2px)); } 50% { transform: translateY(calc(var(--k) * 1px)); } 75% { transform: translateY(calc(var(--k) * -3px)); } }

/* ---------- Startseite: Kacheln, Zahlen ---------- */

.numbers { gap: 32px; }
.numbers div { color: var(--dim); font-size: 13px; }
.numbers b { font-family: var(--font-px); font-weight: normal; font-size: 48px; line-height: 1.1; color: var(--gold); -webkit-font-smoothing: none; }
.numbers div:nth-child(2) b { color: var(--green); }
.numbers div:nth-child(3) b { color: var(--link); }

.action-tiles { gap: 22px; margin: 6px 0 30px; }
.action-tile { background: var(--card); color: var(--text); border-left: 0; padding: 18px 20px; --edge: var(--edge-hi); }
.action-tile:hover, .action-tile:focus { background: var(--card2); --edge: var(--accent); color: var(--ink); text-decoration: none; }
.action-tile .fa { color: var(--link); font-size: 22px; }
.action-tile strong { color: var(--ink); font-size: 15px; }
.action-tile span { color: var(--dim); }
.action-tile.green { --edge: var(--green); }
.action-tile.green:hover, .action-tile.green:focus { --edge: var(--green-hi); }
.action-tile.green .fa { color: var(--green); }

/* ---------- Referate-Kacheln: jedes Referat ein Marktstand mit Markise ---------- */

.ref-grid { gap: 22px; margin-top: 8px; }
.ref-tile { position: relative; background: var(--card); color: var(--text); padding: 42px 20px 16px; gap: 8px; --awc: #ffffff; }
.ref-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: repeating-linear-gradient(90deg, var(--aw) 0 14px, var(--awc) 14px 28px); }
.ref-tile::after  { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 6px; background: repeating-linear-gradient(90deg, var(--aw) 0 14px, transparent 14px 28px); }
.ref-tile:nth-child(4n+1) { --aw: #b34fd8; } .ref-tile:nth-child(4n+2) { --aw: #6a5fd8; }
.ref-tile:nth-child(4n+3) { --aw: #ee6aae; } .ref-tile:nth-child(4n+4) { --aw: #7fb04a; }
.ref-tile:hover, .ref-tile:focus { background: var(--card2); --edge: var(--accent); color: var(--ink); text-decoration: none; }
.ref-tile strong { font-family: var(--font-px); font-weight: normal; font-size: 24px; line-height: 1.2; color: var(--ink); -webkit-font-smoothing: none; overflow-wrap: anywhere; }
.ref-counts .n-aktiv { color: var(--green); }
.ref-counts .n-inaktiv { color: var(--dim); }
.ref-bar { height: 6px; background: var(--line); border-radius: 0; }
.ref-bar span { background: var(--green); }
.ref-lead { color: var(--dim); }
.ref-tile.ref-tile-muted { background: var(--card2); --aw: #cbb8e6; --awc: #f6f1fc; }

.back-link a { color: var(--link); }
.ref-title { font-family: var(--font-px); font-weight: normal; font-size: 36px; color: var(--ink); -webkit-font-smoothing: none; overflow-wrap: anywhere; }
.section-title { font-family: var(--font-px); font-weight: normal; font-size: 24px; color: var(--ink); -webkit-font-smoothing: none; }

/* Reiter Aktiv / Inaktiv / Alle */
.seg { border: 0; border-radius: 0; background: var(--card); box-shadow: 0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge); margin-left: var(--px); margin-bottom: 22px; }
.seg a { color: var(--ink); border-right: 3px solid var(--edge); padding: 8px 18px; }
.seg a b { color: var(--dim); }
.seg a:hover { background: var(--card2); text-decoration: none; color: var(--ink); }
.seg a.on { background: var(--accent); color: #fff; }
.seg a.on b { color: #fff; }

/* ---------- Toolbar, Suche ---------- */

.member-search .fa { color: var(--dim); top: 12px; }
.member-search input.form-control { padding-left: 36px; }

/* ---------- Schritte ---------- */

.steps li { color: var(--dim); }
.steps li::before { border-radius: 0; background: var(--card2); color: var(--dim); box-shadow: inset 0 -3px 0 rgba(58,31,102,.18); }
.steps li.current { color: var(--ink); }
.steps li.current::before { background: var(--accent); color: #fff; }
.steps li.done::before { background: var(--green); color: #fff; }

/* ---------- Formulare ---------- */

label { color: var(--text); }
.form-control {
    background: #fff;
    color: var(--ink);
    border: 3px solid var(--field);
    border-radius: 0;
    box-shadow: none;
    height: 40px;
    font-family: var(--font-mono);
}
textarea.form-control { height: auto; line-height: 1.5; }
.form-control:focus { border-color: var(--accent); box-shadow: none; background: #fff; outline: 0; }
.form-control::placeholder { color: #a897c8; opacity: 1; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background: var(--card2); color: var(--dim); opacity: 1; }
select.form-control option { background: #fff; color: var(--ink); }
.input-sm { height: 32px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.radio-inline, .checkbox-inline, .checkbox label { color: var(--text); }
.input-group-btn .btn { margin: 0; }

.dropzone { background: var(--card); border: 3px dashed var(--edge-hi); box-shadow: none; margin: 0; color: var(--text); }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--card2); }
.dropzone .fa { color: var(--accent); }
.dropzone .filename { color: var(--gold); }

.paste-hint { background: #fff3cf; color: var(--ink); border-radius: 0; box-shadow: inset 4px 0 0 #e0a800; padding: 10px 14px; }

.quick-grid th { color: var(--link); }
.quick-grid td.row-no { color: var(--dim); }
.quick-grid .remove-row { color: var(--dim); }
.quick-grid .remove-row:hover { color: var(--danger); }
.mapping-grid label { color: var(--dim); }

/* ---------- Buttons: abgestufte Ecken + Kante unten ---------- */

.btn {
    border: 0;
    border-radius: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 9px 16px;
    color: var(--ink);
    background: var(--card2);
    text-shadow: none;
    box-shadow: inset 0 -4px 0 rgba(58,31,102,.2);
    clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px,
                       100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%,
                       3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
    transition: none;
}
.btn:hover, .btn:focus { color: var(--ink); background: #e3d6f7; text-decoration: none; }
.btn:active, .btn.active { box-shadow: inset 0 4px 0 rgba(58,31,102,.22); padding-top: 11px; padding-bottom: 7px; outline: 0; }
.btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px var(--gold); }
.btn-default { background: var(--card2); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 -4px 0 rgba(58,31,102,.15); }
.btn-default:hover, .btn-default:focus { background: #e3d6f7; color: var(--ink); box-shadow: inset 0 0 0 3px var(--edge-hi), inset 0 -4px 0 rgba(58,31,102,.15); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--accent-hi); color: #fff; }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: var(--green-hi); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: #cc4a85; color: #fff; }
.btn[disabled], .btn.disabled { background: #e5ddf0; color: #a897c8; opacity: 1; box-shadow: none; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-sm { padding: 5px 10px; }
.btn-link-danger { color: var(--danger); background: none; font-family: var(--font-mono); }
.btn-link-danger:hover { color: #8a1f50; }
.btn-plain { color: var(--link); font-family: var(--font-mono); }
.btn-plain:hover { color: var(--ink); }
.btn-link-danger, .btn-plain { clip-path: none; box-shadow: none; padding: 0; font-weight: 400; }

/* ---------- Status-Marken ---------- */

.status { border-radius: 0; font-size: 12px; font-weight: 700; padding: 1px 8px; box-shadow: inset 0 0 0 2px currentColor; }
.status-aktiv { background: #e3f4df; color: #2c6a28; }
.status-inaktiv, .status-gleich { background: #ece6f5; color: var(--dim); }
.status-neu { background: #e3e7fb; color: #3a2a80; }
.status-fehler { background: #fbe0ec; color: #a1245a; }
.ref-chip { color: var(--text); }
a.ref-chip { color: var(--text); }
a.ref-chip:hover { color: var(--accent); }
.ref-chip.inaktiv, a.ref-chip.inaktiv { color: var(--dim); }

/* ---------- Meldungen ---------- */

.alert { background: var(--card); color: var(--text); padding: 14px 18px; margin-bottom: 22px; text-shadow: none; }
.alert a { color: var(--link); }
.alert .close { color: var(--ink); opacity: .7; text-shadow: none; }
.alert-success { --edge: var(--green); }
.alert-info    { --edge: var(--edge-hi); }
.alert-warning { --edge: #e0a800; }
.alert-danger  { --edge: var(--danger); }
.alert strong { color: var(--ink); }

/* ---------- Reiter ---------- */

.nav-tabs { border-bottom: 3px solid var(--edge); }
.nav-tabs > li > a { border: 0; border-radius: 0; color: var(--dim); margin-right: 4px; }
.nav-tabs > li > a:hover { background: var(--card2); color: var(--ink); border: 0; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    background: var(--card2); color: var(--ink); border: 0; box-shadow: inset 0 -4px 0 var(--accent);
}

/* ---------- Tabellen ---------- */

.table { color: var(--text); background: transparent; }
.table > thead > tr > th { color: var(--link); border-bottom: 3px solid var(--edge); font-size: 12.5px; }
.table > tbody > tr > td, .table > tbody > tr > th { border-top: 1px solid var(--line); }
.table-striped > tbody > tr:nth-of-type(odd), .table-striped > tbody > tr:nth-child(odd) { background: rgba(58,31,102,.04); }
.table-hover > tbody > tr:hover { background: rgba(122,95,216,.10); }
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > td { padding: 6px 8px; }
table.table-card { background: transparent !important; }
tr.group-row th { background: var(--ink) !important; color: #fff !important; font-size: 13px !important; }

table.dataTable { background: transparent !important; color: var(--text); }
table.dataTable tbody tr, table.dataTable tbody tr.odd, table.dataTable tbody tr.even { background-color: transparent !important; }
table.dataTable.table-striped tbody tr.odd { background-color: rgba(58,31,102,.04) !important; }
table.dataTable tbody tr:hover { background-color: rgba(122,95,216,.10) !important; }
table.dataTable thead th, table.dataTable thead td { border-bottom: 3px solid var(--edge) !important; color: var(--link); }
table.dataTable.no-footer { border-bottom: 3px solid var(--edge); }
table.dataTable tbody th, table.dataTable tbody td { padding: 8px 8px; }
table.dataTable thead th, table.dataTable thead td { padding: 10px 8px; }
.table, table.dataTable { font-size: 13px; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled { background-image: none !important; position: relative; padding-right: 20px; }
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { position: absolute; right: 5px; top: 10px; font-size: 10px; }
table.dataTable thead .sorting:after { content: "\25C6"; color: #b9a4d8; }
table.dataTable thead .sorting_asc:after { content: "\25B2"; color: var(--accent); }
table.dataTable thead .sorting_desc:after { content: "\25BC"; color: var(--accent); }
table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { cursor: default; }

.dataTables_wrapper { color: var(--dim); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate { color: var(--dim) !important; font-size: 13px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: #fff; color: var(--ink); border: 3px solid var(--field); border-radius: 0; padding: 4px 8px; font-family: var(--font-mono); outline: 0;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--accent); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--ink) !important; border: 0 !important; border-radius: 0; background: transparent !important; padding: 4px 10px; margin-left: 4px; box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--card2) !important; color: var(--ink) !important; border: 0 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--accent) !important; color: #fff !important; border: 0 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: #b9a4d8 !important; background: transparent !important; }

.preview-table tr.row-error td { background: rgba(179,45,106,.08); }
.preview-table .notes { color: var(--gold); }
.preview-table tr.row-error .notes { color: var(--danger); }

.sticky-actions { background: rgba(246,241,252,.96); border-top: 3px solid var(--edge); }

/* ---------- Anmeldung / Referats-Zugang ---------- */

body.login-body { padding-top: 0; background: transparent; }
.login-page { padding: 24px 16px 60px; }
.login-box {
    background: var(--card);
    color: var(--text);
    border: 0;
    border-radius: 0;
    max-width: 400px;
    padding: 24px 24px 22px;
    box-shadow: 0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge), 0 12px 0 0 rgba(58,31,102,.22);
    --edge: var(--accent);
}
.login-logo { display: block; margin: 2px auto 16px; height: 96px; width: auto; }
.login-scene { --k: 2; width: 352px; max-width: 100%; height: calc(var(--k) * 56px); margin: 0 auto 18px; }
.login-box h1 { font-family: var(--font-px); font-weight: normal; font-size: 24px; line-height: 1.25; color: var(--ink); -webkit-font-smoothing: none; margin: 0 0 8px; }
.login-box h1 .t-prompt { color: var(--accent); }
.login-box p { color: var(--dim); }
.login-box hr { border-top-color: var(--edge-soft); }
.login-box .form-control { height: 42px; }

/* ---------- Fußstreifen: Heide mit drehenden Windrädern ---------- */

.deich {
    --k: 4;                                  /* Bild ist 40 Pixel hoch, 4x = 160px */
    position: relative;
    height: calc(var(--k) * 40px);
    margin-top: 30px;
    overflow: hidden;
    background: url("../img/tag-deich-base.png") repeat-x left bottom / calc(var(--k) * 240px) 100%;
    image-rendering: pixelated;
}
.deich i { position: absolute; inset: 0; background-repeat: repeat-x; background-position: 0 0; image-rendering: pixelated; }
.d-blades-a { background-image: url("../img/tag-deich-blades-a.png"); background-size: calc(var(--k) * 240px) calc(var(--k) * 160px); animation: px-spin 1.6s steps(4) infinite; }
.d-blades-b { background-image: url("../img/tag-deich-blades-b.png"); background-size: calc(var(--k) * 240px) calc(var(--k) * 160px); animation: px-spin 2.2s steps(4) infinite; }
@keyframes px-spin { from { background-position: 0 0; } to { background-position: 0 calc(var(--k) * -160px); } }

.deich-base { background: var(--ink); color: #d9cdef; font-size: 12px; padding: 4px 16px 28px; text-align: center; margin-top: -1px; }
.deich-base a { color: #d9cdef; text-decoration: underline; }
.deich-base a:hover { color: #fff; }
body.login-body .deich { margin-top: 0; position: fixed; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
body.login-body .login-page { position: relative; z-index: 1; }

@media (max-width: 767px) {
    .deich { --k: 2; }
    .panel-asta { padding: 18px 16px; }
}

/* Wer Bewegung abgeschaltet hat (Systemeinstellung), bekommt ein ruhiges Standbild */
@media (prefers-reduced-motion: reduce) {
    .px-scene .ps, .px-scene .ps-fly::before, .deich i, .term .t-cursor { animation: none !important; }
}