/* ==========================================================================
   startpage.css
   Klassen für die Startpage-Editor-Templates (ajax/tpl/):
   themestartpage_row_edit, edit_themestartpageblocks,
   edit_themestartpagerows_api1, edit_homepageholders.
   Ersetzt die früheren style="..."-Attribute (sp- = startpage).
   ========================================================================== */

/* Spalten (Galerie-Kacheln nebeneinander) */
.sp-col-150 { width: 150px; float: left; }
.sp-col-155 { width: 155px; float: left; }
.sp-col-200 { width: 200px; float: left; }
.sp-col-250 { width: 250px; float: left; }
.sp-col-255 { width: 255px; float: left; }
.sp-ml5     { margin: 0 0 0 5px; }

/* Zeilen-Container */
.sp-w-400  { width: 400px; }
.sp-w-450  { width: 450px; }
.sp-pad-20 { padding: 20px; }

/* Kachel-Wrapper (Bild + Caption) */
.sp-tile    { position: relative; float: left; margin: 5px 0 0 5px; }
.sp-tile-m2 { position: relative; float: left; margin: 2px 0 0 5px; }

/* Info-Block rechts (Template/Id/Type/Published) */
.sp-float-right { float: right; }

/* Block-Bilder: feste Höhe, scale-to-fill */
.sp-img-147 { margin: 0; object-fit: cover; height: 147px; }
.sp-img-150 { margin: 0; object-fit: cover; height: 150px; }
.sp-img-190 { margin: 0; object-fit: cover; height: 190px; }
.sp-img-200 { margin: 0; object-fit: cover; height: 200px; }
.sp-img-250 { margin: 0; object-fit: cover; height: 250px; }
.sp-img-300 { margin: 0; object-fit: cover; height: 300px; }
.sp-img-400 { margin: 0; object-fit: cover; height: 400px; }

/* Holder-Ansicht (edit_homepageholders) */
.sp-img-holder-150 { float: left; margin: 0 20px; object-fit: cover; height: 150px; }

/* Slick-Dots ohne Hintergrund (zuvor Inline-<style> in startpages/index.php
   und startpages/themestartpage.php) */
.slick-dots {
    background-color: transparent;
}


/* ==========================================================================
   Neue Row anlegen (startpages/new-row.php)
   ========================================================================== */

/* --- Template-Vorschau --------------------------------------------------- */

.sp-new-info {
    background: #273e17;
    color: #fff;
    padding: 12px 16px;
    margin: 0 0 14px 0;
    line-height: 1.45;
}

.sp-new-info strong {
    display: block;
    margin-bottom: 6px;
}

.sp-new-holdercount {
    font-size: 1.4em;
    font-weight: bold;
}

/* Schematische Darstellung der Holder-Aufteilung */
.sp-new-preview {
    display: block;
    margin: 10px 0 0 0;
    background: #111;
    border: 1px solid #444;
    height: 90px;
    position: relative;
    overflow: hidden;
}

.sp-new-preview span {
    position: absolute;
    background: #4a6b35;
    border: 1px solid #7fa860;
    color: #fff;
    font-size: 11px;
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
    padding-top: 4px;
}

/* --- Ablauf-Log ---------------------------------------------------------- */

.sp-new-log {
    background: #1c1c1c;
    color: #ddd;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 1.6;
    padding: 12px 14px;
    margin: 6px 0 0;
    max-height: 420px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid #444;
}

.sp-new-log:empty::before {
    content: "Noch kein Testlauf gestartet.";
    color: #777;
}

.sp-new-logline { display: block; padding: 1px 0; }
.sp-new-logtime { color: #777; margin-right: 8px; }

.sp-new-log-info  { color: #9ecbff; }
.sp-new-log-ok    { color: #7fd97f; }
.sp-new-log-warn  { color: #ffc861; }
.sp-new-log-error { color: #ff8a80; }

/* --- Ergebnis-Zusammenfassung -------------------------------------------- */

.sp-new-result {
    margin-top: 14px;
    padding: 14px 16px;
    background: #273e17;
    color: #fff;
    line-height: 1.45;
}

.sp-new-result-error { background: #5c1f1f; }

.sp-new-result table {
    border-collapse: collapse;
    margin: 12px 0;
    width: 100%;
}

.sp-new-result th,
.sp-new-result td {
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 5px 8px;
    text-align: left;
    font-size: 12px;
}

/* Buttons in der Ergebnisbox: eigener Abstand statt margin-left-Kette */
.sp-new-result .realbutton {
    margin: 10px 8px 0 0;
}

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

.sp-new-hint {
    display: block;
    color: #ddd;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 4px;
}

.sp-new-group {
    background: #6b6b6b;
    padding: 12px 16px;
    margin-bottom: 14px;
}

.sp-new-group-inner {
    background: #273e17;
    padding: 10px 12px;
    margin: 10px 0 4px;
}

.sp-new-checkboxes input[type="checkbox"] {
    width: auto !important;
    margin-right: 6px;
}

.sp-new-checkboxes label {
    line-height: 1.6;
}

/* Aktionszeile: auf die Eingabespalte einrücken, damit der Button nicht
   unter den rechtsbuendigen Labels klebt (.tab1 = 35% + 4% Abstand) */
.sp-new-actions {
    margin-left: 39%;
    padding-top: 6px;
}

.sp-new-actions .realbutton {
    margin-left: 0;
}

/* Eingabefelder in den Gruppen etwas hoeher, sonst wirkt alles gedraengt */
.sp-new-group input[type="text"],
.sp-new-group input[type="number"],
.sp-new-group select {
    padding: 3px 5px;
}

.sp-new-danger { background: #7a2020 !important; }

/* Hinweistext auf dunklem Grund (Ergebnisbox) */
.sp-new-hint-light { color: #cfe3c4; }

/* Vorschau des verknuepften Headline-/Footer-Blocks in edit-startpagerow.php.
   Wird per jQuery .show() eingeblendet (setzt display inline und ueberschreibt
   damit das display:none hier). Zuvor Inline-style-Attribut. */
.sp-blockpreview {
    display: none;
    background: rgb(72, 145, 57);
    padding: 8px;
    margin-top: 5px;
}

/* Fehlermeldungen im .answer-Bereich (zuvor style="color:red") */
.sp-error { color: #c00; }

/* Template 10 = Slider: Hinweise an Feldern, die nur dort greifen.
   Standardmaessig unauffaellig, aktiv wenn das Feld gesperrt ist. */
.sp-slider-only-hint {
    display: block;
    font-size: 11px;
    color: #8a8a8a;
    margin-top: 3px;
}

.sp-slider-only-active {
    color: #d8b25a;
}

.sp-slider-note {
    display: block;
    font-size: 11px;
    color: #cfe3c4;
    margin-bottom: 4px;
    line-height: 1.4;
}

.sp-slider-note-warn {
    color: #ffc861;
    font-weight: bold;
}

/* Warnung an Headline-/Footer-Bloecken: sie koennen mehreren Rows
   zugewiesen sein, Aenderungen wirken dort mit. */
.sp-shared-warn {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: #ffc861;
    margin: 6px 0;
}

.sp-blockpreview .button {
    margin: 4px 0 0;
}

/* ==========================================================================
   Mehrsprachige Blockfelder (Konvention wie eingabe/edit-poi.php)
   ========================================================================== */

/* Sprachbloecke werden von languageSwitcher() per display umgeschaltet;
   ausser dem ersten sind sie zunaechst verborgen. */
.sp-lang-block {
    display: none;
}

.sp-lang-flag {
    width: 24px;
    vertical-align: -4px;
    margin-right: 6px;
}

/* Umschalter-Leiste. In der Button-Leiste rechts, in Formularen inline. */
.sp-lang-buttons {
    display: inline-block;
}

.button-leiste .sp-lang-buttons {
    float: right;
}

.sp-lang-buttons .langbutton {
    margin-left: 4px;
}

/* accessibleInformation und payload: vorhanden und wird mitgesendet, aber
   nicht zur Pflege gedacht. Zum Einblenden diese Regel entfernen.
   !important, weil languageSwitcher() display auf dem Elternblock setzt. */
.sp-lang-hidden {
    display: none !important;
}

/* Vorschaubild im Block-Editor (zuvor Inline-style in den vier
   ajax/tpl/block-*.html) */
.sp-block-thumb {
    max-width: 250px;
    max-height: 250px;
}

/* Ueberzaehlige Holder: vom Template nicht mehr beruecksichtigt, aber zum
   Aufraeumen einblendbar. Abgesetzt, damit sie nicht wie regulaere Holder
   wirken. */
.sp-hd-surplus {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px dashed #8a6d3b;
    opacity: 0.75;
}


/* ==========================================================================
   Holder verwalten (startpages/holders.php)
   ========================================================================== */

/* Innenabstand: #content .kasten.hell setzt padding:0 0 5px und gewinnt per
   ID-Spezifitaet, daher hier mit gleicher Staerke ueberschreiben – sonst
   kleben Bilder und Buttons an den Kanten. */
#content .kasten.hell.sp-hd-holder {
    padding: 0 18px 14px;
    margin-bottom: 18px;
}

/* Die Sortier-Leiste soll die Polsterung ignorieren und voll aufliegen */
.sp-hd-holder .sort_bar {
    margin: 0 -18px 12px;
}

.sp-hd-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.sp-hd-count {
    font-size: 11px;
    color: #555;
    white-space: nowrap;
}

/* Ein Block innerhalb eines Holders */
.sp-hd-block {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}

.sp-hd-block:last-of-type { border-bottom: none; }

/* Ziehgriff für die Block-Sortierung innerhalb eines Holders */
.sort_bar_block {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    cursor: move;
    opacity: 0.55;
}

.sort_bar_block:hover { opacity: 1; }

.sort_bar_block img { display: block; margin: 0; }

.sp-hd-thumb {
    flex: 0 0 auto;
    width: 90px;
    height: 60px;
    object-fit: cover;
    margin: 0;
}

.sp-hd-thumb-empty {
    background: #ddd;
    color: #777;
    font-size: 10px;
    text-align: center;
    line-height: 60px;
}

/* min-width:0 laesst langen Titel umbrechen statt die Zeile zu sprengen */
.sp-hd-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

.sp-hd-sub,
.sp-hd-meta {
    display: block;
    font-size: 11px;
}

.sp-hd-sub  { color: #444; }
.sp-hd-meta { color: #777; margin-top: 2px; }

/* Gewicht je Block (Summe je Holder muss 1.00 ergeben) */
.sp-hd-weight {
    flex: 0 0 auto;
    text-align: center;
}

.sp-hd-weight label {
    display: block;
    font-size: 10px;
    color: #777;
    margin-bottom: 2px;
}

.sp-hd-weight-input {
    width: 74px !important;
    margin: 0 !important;
    text-align: center;
}

.sp-hd-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

/* .button bringt margin-left mit; im Flex-Layout uebernimmt gap den Abstand */
.sp-hd-actions .button,
.sp-hd-btnrow .button,
.sp-hd-footer .button {
    margin: 0;
    padding: 5px 12px;
}

/* Zeile mit Summe und Verteil-Aktionen */
.sp-hd-weightbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
}

.sp-hd-btnrow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-hd-weightsum {
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.sp-hd-weightsum-ok  { color: #2f7d2f; }
.sp-hd-weightsum-bad { color: #b03030; }

/* Primaeraktion: gleiche Groesse wie die Nachbarn, nur betont.
   .realbutton waere mit font-size:1.5em deutlich zu wuchtig. */
.sp-hd-primary {
    font-weight: bold;
    background-color: #5f7a0a !important;
    color: #fff;
}

/* Fussleiste je Holder */
.sp-hd-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}