/* AS Formular frontend styles
   Copy this file to themes/<active-theme>/as_formular.css to override it per theme. */

.as-formular-frontend {
    max-width: 720px;
    margin: 18px 0;
    padding: 15px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 7px;
    color: #000000;
    font-family: Arial, sans-serif;
    clear: both;
    overflow: hidden;
}

.as-formular-frontend,
.as-formular-frontend * {
    box-sizing: border-box;
}

.as-formular-frontend h3 {
    margin: 0 0 12px 0;
    color: #007ACC;
    line-height: 1.25;
}

.as-formular-frontend form {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.as-formular-beschreibung {
    margin: 0 0 14px 0;
    line-height: 1.5;
}

.as-formular-feld {
    display: block;
    grid-column: span 12;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    clear: both;
}

.as-formular-breite-100 { grid-column: span 12; }
.as-formular-breite-75 { grid-column: span 9; }
.as-formular-breite-66 { grid-column: span 8; }
.as-formular-breite-50 { grid-column: span 6; }
.as-formular-breite-33 { grid-column: span 4; }
.as-formular-breite-25 { grid-column: span 3; }

.as-formular-feld > label {
    display: block;
    margin: 0 0 4px 0;
    padding: 0;
    font-weight: bold;
    line-height: 1.35;
    color: #000000;
}

.as-formular-feld input[type="text"],
.as-formular-feld input[type="email"],
.as-formular-feld input[type="date"],
.as-formular-feld input[type="time"],
.as-formular-feld input[type="file"],
.as-formular-feld textarea,
.as-formular-feld select {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0;
    padding: 8px 9px;
    border: 1px solid #BBBBBB;
    border-radius: 5px;
    background: #FFFFFF;
    color: #000000;
    font: inherit;
    line-height: 1.35;
}

.as-formular-feld textarea {
    min-height: 90px;
    resize: vertical;
}

.as-formular-checkbox,
.as-formular-radio {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 4px 0;
    font-weight: normal !important;
    line-height: 1.35;
}

.as-formular-checkbox input,
.as-formular-radio input {
    flex: 0 0 auto;
    width: auto !important;
    margin: 2px 0 0 0 !important;
    padding: 0;
}

.as-formular-hilfe {
    display: block;
    margin-top: 4px;
    color: #666666;
    font-size: 12px;
    line-height: 1.35;
}

.as-formular-button {
    grid-column: span 12;
    justify-self: start;
    margin-top: 2px;
    padding: 9px 16px;
    border: 0;
    border-radius: 5px;
    background: #007ACC;
    color: #FFFFFF;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.2;
}

.as-formular-button:hover {
    background: #769FCF;
}

.as-formular-erfolg,
.as-formular-fehler {
    margin: 0 0 12px 0;
    padding: 10px;
    border-radius: 6px;
    line-height: 1.4;
}

.as-formular-erfolg {
    background: #DFF2BF;
    border: 1px solid #8FBC8F;
    color: #2E5E2E;
}

.as-formular-fehler {
    background: #FFD6D6;
    border: 1px solid #CC7777;
    color: #8A0000;
}

@media (max-width: 640px) {
    .as-formular-frontend {
        max-width: 100%;
        margin: 12px 0;
        padding: 12px;
    }

    .as-formular-button {
        width: 100%;
    }
}
/* Trumbowyg Editor gestalltung */
/*************************************************
 AS-CMS Formular Plugin
 Datei: frontend_editor.css
 Beschreibung:
 Einheitliches Frontend-Design für Trumbowyg
*************************************************/

/* Trumbowyg Icons / Symbolleiste */
.trumbowyg-button-pane {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #cccccc !important;
}

.trumbowyg-button-pane button {
    background: #f5f5f5 !important;
    color: #222222 !important;
    border: none !important;
    box-shadow: none !important;
}

.trumbowyg-button-pane button:hover {
    background: #e0e0e0 !important;
    color: #000000 !important;
}

.trumbowyg-button-pane button.trumbowyg-active {
    background: #d5d5d5 !important;
    color: #000000 !important;
}

.trumbowyg-button-pane button svg,
.trumbowyg-button-pane button svg path {
    fill: #222222 !important;
}


/* ============================================================
   Übernommene CSS-Datei
   Quelle: frontend_editor.css
   ============================================================ */

/*************************************************
 AS-CMS Formular Plugin
 Datei: frontend_editor.css
 Beschreibung:
 Einheitliches Frontend-Design für Trumbowyg
*************************************************/

/* Gesamter Editor */
.trumbowyg-box,
.trumbowyg-editor {
    border: 1px solid #cccccc !important;
    border-radius: 4px;
    background: #ffffff;
}

/* Buttonleiste */
.trumbowyg-button-pane {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #cccccc !important;
}

/* Einzelne Buttons */
.trumbowyg-button-pane button {
    background: transparent !important;
    color: #222222 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px !important;
    margin: 0 !important;
    border-radius: 3px;
    transition: background 0.2s ease;
}

/* Hover */
.trumbowyg-button-pane button:hover {
    background: #e8e8e8 !important;
    color: #000000 !important;
}

/* Aktive Buttons */
.trumbowyg-button-pane button.trumbowyg-active {
    background: #dcdcdc !important;
    color: #000000 !important;
}

/* SVG-Icons */
.trumbowyg-button-pane svg {
    fill: #222222 !important;
}

.trumbowyg-button-pane svg path {
    fill: #222222 !important;
}

/* Dropdowns */
.trumbowyg-button-pane select {
    background: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #cccccc !important;
}

/* Eingabebereich */
.trumbowyg-editor {
    min-height: 250px;
    color: #222222;
    background: #ffffff;
}

/* Links im Editor */
.trumbowyg-editor a {
    color: #0066cc;
}

/* Vollbildmodus */
.trumbowyg-fullscreen .trumbowyg-editor,
.trumbowyg-fullscreen .trumbowyg-box {
    background: #ffffff !important;
}

/* Responsive */
@media screen and (max-width: 768px) {

    .trumbowyg-button-pane button {
        padding: 4px !important;
    }

    .trumbowyg-editor {
        min-height: 180px;
    }
}


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: formular_bearbeiten.php
   ============================================================ */

.formular-bearbeiten-box {
    background: #FAFAFA;
    border: 1px solid #BBBBBB;
    border-radius: 7px;
    padding: 12px;
    box-shadow: 0 3px 7px rgba(52,152,219,0.5);
}

.formular-bearbeiten-box h4 {
    margin-top: 0;
    color: #007ACC;
}

.formular-formular-zeile {
    margin-bottom: 12px;
}

.formular-formular-zeile label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}

.formular-formular-zeile input[type="text"],
.formular-formular-zeile select,
.formular-formular-zeile textarea {
    width: 96%;
    padding: 7px;
    border: 1px solid #BBBBBB;
    border-radius: 5px;
}

.formular-formular-zeile textarea {
    min-height: 80px;
}

.formular-kleiner-hinweis {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #666666;
}

.formular-shortcode-box {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 8px;
    background: #FDEAB3;
    border: 1px solid #D6B85A;
    border-radius: 5px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    color: #000000;
}

.formular-checkbox-zeile {
    margin-bottom: 8px;
}

.formular-button {
    background-color: #007ACC;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: bold;
}

.formular-button:hover {
    background-color: #769FCF;
}

.formular-abbrechen {
    display: inline-block;
    margin-left: 8px;
    padding: 8px 14px;
    background: #DDDDDD;
    color: #000000;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.formular-abbrechen:hover {
    background: #BBBBBB;
}

.formular-hinweis-ok {
    padding: 10px;
    background: #DFF2BF;
    border: 1px solid #8FBC8F;
    border-radius: 6px;
    margin-bottom: 12px;
    color: #2E5E2E;
}

.formular-hinweis-fehler {
    padding: 10px;
    background: #FFD6D6;
    border: 1px solid #CC7777;
    border-radius: 6px;
    margin-bottom: 12px;
    color: #8A0000;
}

.formular-meta {
    font-size: 12px;
    color: #666666;
    margin-bottom: 12px;
}

.formular-editor-feldliste {
    margin-top: 8px;
    padding: 10px;
    background: #F4F8FC;
    border: 1px solid #C8D8E8;
    border-radius: 6px;
}

.formular-editor-feld-eintrag {
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #DDE8F2;
}

.formular-editor-feld-eintrag:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.formular-editor-feld-eintrag label {
    display: block;
    font-weight: normal;
    margin-bottom: 0;
}

.formular-editor-feldname {
    font-weight: bold;
}


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: formular_eingabe_ansehen.php
   ============================================================ */

.formular-eingabe-box { background:#FAFAFA; border:1px solid #BBBBBB; border-radius:7px; padding:12px; box-shadow:0 3px 7px rgba(52,152,219,0.5); }
.formular-eingabe-box h4 { margin-top:0; color:#007ACC; }
.formular-eingabe-meta, .formular-mail-meta { background:#FFFFFF; border:1px solid #CCCCCC; border-radius:6px; padding:10px; margin-bottom:12px; font-size:13px; color:#555555; }
.formular-eingabe-tabelle { width:100%; border-collapse:collapse; margin-top:10px; }
.formular-eingabe-tabelle th, .formular-eingabe-tabelle td { border:1px solid #CCCCCC; padding:8px; text-align:left; vertical-align:top; }
.formular-eingabe-tabelle th { background:#007ACC; color:#FFFFFF; width:220px; }
.formular-eingabe-tabelle tr:nth-child(even) { background:#F5F5F5; }
.formular-button, .formular-abbrechen { display:inline-block; margin-top:12px; margin-right:8px; padding:8px 14px; background:#007ACC; color:#FFFFFF; border:0; border-radius:5px; text-decoration:none; font-weight:bold; cursor:pointer; }
.formular-abbrechen { background:#DDDDDD; color:#000000; }
.formular-button:hover { background:#769FCF; }
.formular-abbrechen:hover { background:#BBBBBB; }
.formular-hinweis-ok { padding:10px; background:#DFF2BF; border:1px solid #8FBC8F; border-radius:6px; margin-bottom:12px; color:#2E5E2E; }
.formular-hinweis-fehler { padding:10px; background:#FFD6D6; border:1px solid #CC7777; border-radius:6px; margin-bottom:12px; color:#8A0000; }


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: formular_eingaben.php
   ============================================================ */

.formular-eingaben-box { background:#FAFAFA; border:1px solid #BBBBBB; border-radius:7px; padding:12px; box-shadow:0 3px 7px rgba(52,152,219,0.5); }
.formular-eingaben-box h4 { margin-top:0; color:#007ACC; }
.formular-eingaben-tabelle { width:100%; border-collapse:collapse; margin-top:10px; }
.formular-eingaben-tabelle th, .formular-eingaben-tabelle td { border:1px solid #CCCCCC; padding:8px; text-align:left; vertical-align:top; }
.formular-eingaben-tabelle th { background:#007ACC; color:#FFFFFF; }
.formular-eingaben-tabelle tr:nth-child(even) { background:#F5F5F5; }
.formular-aktionen a { display:inline-block; padding:6px 9px; background:#007ACC; color:#FFFFFF; border-radius:5px; text-decoration:none; font-size:12px; font-weight:bold; }
.formular-aktionen a:hover { background:#769FCF; }
.formular-status-neu { font-weight:bold; color:#B00000; }
.formular-status-gelesen { color:#2E5E2E; }
.formular-mail-gesendet { color:#2E5E2E; font-weight:bold; }
.formular-mail-fehler, .formular-mail-ungueltiger_empfaenger { color:#B00000; font-weight:bold; }
.formular-mail-wartet, .formular-mail-nicht_gesendet { color:#666666; }
.formular-hinweis { padding:10px; background:#FDEAB3; border:1px solid #D6B85A; border-radius:6px; }


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: formular_einstellungen.php
   ============================================================ */

.formular-einstellungen-box { background:#FAFAFA; border:1px solid #BBBBBB; border-radius:7px; padding:12px; box-shadow:0 3px 7px rgba(52,152,219,0.5); }
.formular-einstellungen-box h4 { margin-top:0; color:#007ACC; }
.formular-einstellungen-box fieldset { margin:0 0 16px; padding:14px; background:#FFFFFF; border:1px solid #CCCCCC; border-radius:6px; }
.formular-einstellungen-box legend { padding:0 6px; color:#007ACC; font-weight:bold; }
.formular-einstellungen-zeile { margin-bottom:12px; }
.formular-einstellungen-zeile label { display:block; margin-bottom:4px; font-weight:bold; }
.formular-einstellungen-zeile input[type="text"],
.formular-einstellungen-zeile input[type="email"],
.formular-einstellungen-zeile input[type="number"],
.formular-einstellungen-zeile select,
.formular-einstellungen-zeile textarea { width:96%; max-width:700px; box-sizing:border-box; padding:7px; border:1px solid #BBBBBB; border-radius:5px; }
.formular-einstellungen-zeile textarea { min-height:75px; }
.formular-kleiner-hinweis { display:block; margin-top:4px; color:#666666; font-size:12px; }
.formular-button { padding:8px 14px; background:#007ACC; color:#FFFFFF; border:0; border-radius:5px; font-weight:bold; cursor:pointer; }
.formular-button:hover { background:#769FCF; }
.formular-hinweis-ok { padding:10px; margin-bottom:12px; color:#2E5E2E; background:#DFF2BF; border:1px solid #8FBC8F; border-radius:6px; }
.formular-hinweis-fehler { padding:10px; margin-bottom:12px; color:#8A0000; background:#FFD6D6; border:1px solid #CC7777; border-radius:6px; }
.formular-label-mit-info { position:relative; display:flex; align-items:center; gap:6px; width:fit-content; max-width:100%; margin-bottom:5px; }
.formular-label-mit-info label { margin:0; }
.formular-info-button { flex:0 0 22px; width:22px; height:22px; padding:0; border:1px solid #4F87B8; border-radius:50%; background:#FFFFFF; color:#356D9D; font-size:14px; font-weight:bold; line-height:20px; text-align:center; cursor:pointer; }
.formular-info-button:hover,
.formular-info-button:focus { color:#FFFFFF; background:#4F87B8; outline:none; }
.formular-info-popover { display:none; position:absolute; z-index:20; top:calc(100% + 7px); left:0; width:min(330px, calc(100vw - 54px)); box-sizing:border-box; padding:10px 12px; border:1px solid #B9C9D8; border-radius:5px; background:#FFFFFF; color:#333333; box-shadow:0 4px 14px rgba(0,0,0,.18); font-size:13px; font-weight:normal; line-height:1.45; }
.formular-label-mit-info:hover .formular-info-popover,
.formular-label-mit-info:focus-within .formular-info-popover,
.formular-info-popover.offen { display:block; }


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: formular_feldauswahl.php
   ============================================================ */

.formular-feldauswahl { background:#FAFAFA; border:1px solid #BBBBBB; border-radius:7px; padding:12px; box-shadow:0 3px 7px rgba(52,152,219,.5); }
.formular-feldauswahl h4 { margin-top:0; color:#007ACC; }
.formular-feldauswahl-liste { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
.formular-feldauswahl-karte { padding:12px; border:1px solid #CCCCCC; border-radius:6px; background:#FFFFFF; }
.formular-feldauswahl-karte h5 { margin:0 0 5px; color:#005B96; font-size:15px; }
.formular-feldauswahl-meta { margin:0 0 10px; color:#666666; font-size:12px; }
.formular-feldauswahl-button { display:inline-block; padding:7px 10px; border-radius:5px; color:#FFFFFF; background:#007ACC; text-decoration:none; font-size:12px; font-weight:bold; }
.formular-feldauswahl-button:hover { background:#769FCF; }


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: formular_felder.php
   ============================================================ */

.as-formular-plugin .content-area { min-width:0; }
.formular-felder-box { width:100%; max-width:100%; min-width:0; box-sizing:border-box; overflow:hidden; background:#FAFAFA; border:1px solid #BBBBBB; border-radius:7px; padding:10px; box-shadow:0 3px 7px rgba(52,152,219,0.5); }
.formular-felder-box h4 { margin-top:0; color:#007ACC; }
.formular-felder-einleitung { margin-bottom:10px; color:#555555; font-size:13px; }
.formular-felder-tabelle { width:100%; border-collapse:collapse; table-layout:fixed; margin-top:10px; }
.formular-felder-tabelle th, .formular-felder-tabelle td { padding:5px 6px; border:1px solid #CCCCCC; text-align:left; vertical-align:middle; overflow-wrap:anywhere; font-size:12px; }
.formular-felder-tabelle th { color:#FFFFFF; background:#007ACC; }
.formular-felder-tabelle tr:nth-child(even) { background:#F5F5F5; }
.formular-felder-tabelle .spalte-sortierung { width:34px; text-align:center; }
.formular-felder-tabelle .spalte-typ { width:82px; }
.formular-felder-tabelle .spalte-eigenschaften { width:130px; }
.formular-felder-tabelle .spalte-aktionen { width:116px; }
.formular-feld-label { display:block; font-weight:bold; }
.formular-feld-name { display:block; margin-top:1px; color:#666666; font-size:11px; }
.formular-eigenschaft { display:inline-block; margin:1px 2px 1px 0; padding:2px 4px; background:#EAF4FB; border:1px solid #B7D8EF; border-radius:4px; font-size:10px; white-space:nowrap; }
.formular-eigenschaft.inaktiv { color:#8A0000; background:#FFD6D6; border-color:#CC7777; }
.formular-formular-zeile { margin-bottom:12px; }
.formular-formular-zeile label { display:block; margin-bottom:4px; font-weight:bold; }
.formular-formular-zeile input[type="text"], .formular-formular-zeile select, .formular-formular-zeile textarea { width:100%; box-sizing:border-box; padding:7px; border:1px solid #BBBBBB; border-radius:5px; }
.formular-formular-zeile select[multiple] { min-height:190px; }
.formular-formular-zeile textarea { min-height:75px; resize:vertical; }
.formular-formular-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 16px; }
.formular-formular-breit { grid-column:1 / -1; }
.formular-checkboxen { display:flex; flex-wrap:wrap; gap:14px; margin:4px 0 14px; }
.formular-checkboxen label { display:inline-flex; align-items:center; gap:5px; }
.formular-button, .formular-abbrechen, .formular-aktionen button, .formular-aktionen a { display:inline-block; box-sizing:border-box; margin:2px 3px 2px 0; padding:7px 10px; border:0; border-radius:5px; color:#FFFFFF; background:#007ACC; text-decoration:none; font-size:12px; font-weight:bold; cursor:pointer; }
.formular-button:hover, .formular-aktionen button:hover, .formular-aktionen a:hover { background:#769FCF; }
.formular-abbrechen { color:#000000; background:#DDDDDD; }
.formular-abbrechen:hover { background:#BBBBBB; }
.formular-loeschen { background:#B00000 !important; }
.formular-loeschen:hover { background:#D00000 !important; }
.formular-aktionen { white-space:normal; }
.formular-aktionen form { display:inline; margin:0; }
.formular-aktionen button, .formular-aktionen a { width:100%; margin-right:0; text-align:center; }
.formular-hinweis-ok { padding:10px; margin-bottom:12px; color:#2E5E2E; background:#DFF2BF; border:1px solid #8FBC8F; border-radius:6px; }
.formular-hinweis-fehler { padding:10px; margin-bottom:12px; color:#8A0000; background:#FFD6D6; border:1px solid #CC7777; border-radius:6px; }
.formular-hinweis { padding:10px; margin-bottom:12px; background:#FDEAB3; border:1px solid #D6B85A; border-radius:6px; }
.formular-formular-schalter { width:100%; margin-top:14px; padding:10px 12px; border:1px solid #0069A8; border-radius:6px; color:#FFFFFF; background:#007ACC; font-weight:bold; text-align:left; cursor:pointer; }
.formular-formular-schalter:hover { background:#0069A8; }
.formular-formular-schalter::after { content:"+"; float:right; font-size:18px; line-height:14px; }
.formular-formular-schalter[aria-expanded="true"]::after { content:"-"; }
.formular-feld-wrapper { display:none; }
.formular-feld-wrapper.offen { display:block; }
.formular-feld-formular { width:100%; max-width:760px; box-sizing:border-box; margin-top:8px; padding:14px; background:#FFFFFF; border:1px solid #CCCCCC; border-radius:7px; }
.formular-kleiner-hinweis { display:block; margin-top:4px; color:#666666; font-size:12px; }
@media (max-width:800px) {
    .formular-felder-tabelle, .formular-felder-tabelle tbody, .formular-felder-tabelle tr, .formular-felder-tabelle td { display:block; width:100%; box-sizing:border-box; }
    .formular-felder-tabelle thead { display:none; }
    .formular-felder-tabelle tr { margin-bottom:12px; border:1px solid #CCCCCC; border-radius:6px; overflow:hidden; }
    .formular-felder-tabelle td { border-width:0 0 1px; }
    .formular-felder-tabelle td:last-child { border-bottom:0; }
    .formular-felder-tabelle .spalte-sortierung, .formular-felder-tabelle .spalte-typ, .formular-felder-tabelle .spalte-eigenschaften, .formular-felder-tabelle .spalte-aktionen { width:100%; text-align:left; }
    .formular-formular-grid { grid-template-columns:1fr; }
    .formular-formular-breit { grid-column:auto; }
    .formular-formular-schalter { position:sticky; bottom:6px; z-index:2; }
}


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: formular_feldtypen.php
   ============================================================ */

.formular-feldtypen-box { background:#FAFAFA; border:1px solid #BBBBBB; border-radius:7px; padding:12px; box-shadow:0 3px 7px rgba(52,152,219,.5); }
.formular-feldtypen-box h4 { margin-top:0; color:#007ACC; }
.formular-feldtypen-tabelle { width:100%; border-collapse:collapse; margin:12px 0; }
.formular-feldtypen-tabelle th, .formular-feldtypen-tabelle td { padding:7px; border:1px solid #CCCCCC; text-align:left; }
.formular-feldtypen-tabelle th { color:#FFFFFF; background:#007ACC; }
.formular-feldtypen-formular { max-width:700px; padding:12px; background:#FFFFFF; border:1px solid #CCCCCC; border-radius:6px; }
.formular-feldtypen-zeile { margin-bottom:10px; }
.formular-feldtypen-zeile label { display:block; margin-bottom:4px; font-weight:bold; }
.formular-feldtypen-zeile input[type="text"], .formular-feldtypen-zeile select, .formular-feldtypen-zeile textarea { width:100%; box-sizing:border-box; padding:7px; border:1px solid #BBBBBB; border-radius:5px; }
.formular-feldtypen-zeile textarea { min-height:65px; }
.formular-feldtypen-button { display:inline-block; padding:7px 10px; border:0; border-radius:5px; color:#FFFFFF; background:#007ACC; text-decoration:none; font-weight:bold; cursor:pointer; }
.formular-feldtypen-loeschen { background:#B00000; }
.formular-hinweis-ok { padding:10px; margin-bottom:12px; color:#2E5E2E; background:#DFF2BF; border:1px solid #8FBC8F; border-radius:6px; }
.formular-hinweis-fehler { padding:10px; margin-bottom:12px; color:#8A0000; background:#FFD6D6; border:1px solid #CC7777; border-radius:6px; }
@media (max-width:700px) {
    .formular-feldtypen-tabelle, .formular-feldtypen-tabelle tbody, .formular-feldtypen-tabelle tr, .formular-feldtypen-tabelle td { display:block; width:100%; box-sizing:border-box; }
    .formular-feldtypen-tabelle thead { display:none; }
    .formular-feldtypen-tabelle tr { margin-bottom:10px; border:1px solid #CCCCCC; }
}


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: formular_gestalten.php
   ============================================================ */

.formular-gestalten-box {
    background: #FAFAFA;
    border: 1px solid #BBBBBB;
    border-radius: 7px;
    padding: 12px;
    box-shadow: 0 3px 7px rgba(52,152,219,0.5);
}

.formular-gestalten-box h4 {
    margin-top: 0;
    color: #007ACC;
}

.formular-gestalten-meta {
    font-size: 13px;
    color: #555555;
    margin-bottom: 12px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
}

.formular-gestalten-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.formular-gestalten-links,
.formular-gestalten-rechts {
    flex: 1;
    min-width: 0;
}

.formular-gestalten-hinweis {
    padding: 10px;
    background: #FDEAB3;
    border: 1px solid #D6B85A;
    border-radius: 6px;
    margin-bottom: 12px;
}

.formular-hinweis-ok {
    padding: 10px;
    background: #DFF2BF;
    border: 1px solid #8FBC8F;
    border-radius: 6px;
    margin-bottom: 12px;
    color: #2E5E2E;
}

.formular-hinweis-fehler {
    padding: 10px;
    background: #FFD6D6;
    border: 1px solid #CC7777;
    border-radius: 6px;
    margin-bottom: 12px;
    color: #8A0000;
}

.formular-sortier-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.formular-sortier-eintrag {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: move;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12);
}

.formular-sortier-eintrag.dragging {
    opacity: 0.5;
}

.formular-sortier-griff {
    display: inline-block;
    margin-right: 8px;
    color: #007ACC;
    font-weight: bold;
}

.formular-feldname {
    font-size: 12px;
    color: #666666;
}

.formular-button {
    background-color: #007ACC;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

.formular-button:hover {
    background-color: #769FCF;
}

.formular-abbrechen {
    display: inline-block;
    margin-left: 8px;
    padding: 8px 14px;
    background: #DDDDDD;
    color: #000000;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.formular-abbrechen:hover {
    background: #BBBBBB;
}

.formular-vorschau {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 7px;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
}

.formular-vorschau h4,
.formular-vorschau p,
.formular-vorschau .formular-button {
    grid-column: span 12;
}

.formular-vorschau h4 {
    color: #007ACC;
    margin-top: 0;
}

.formular-vorschau-feld {
    grid-column: span 12;
    margin-bottom: 0;
}

.formular-vorschau-breite-100 { grid-column: span 12; }
.formular-vorschau-breite-75 { grid-column: span 9; }
.formular-vorschau-breite-66 { grid-column: span 8; }
.formular-vorschau-breite-50 { grid-column: span 6; }
.formular-vorschau-breite-33 { grid-column: span 4; }
.formular-vorschau-breite-25 { grid-column: span 3; }

.formular-vorschau-feld label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}

.formular-vorschau-feld input,
.formular-vorschau-feld textarea,
.formular-vorschau-feld select {
    width: 96%;
    padding: 7px;
    border: 1px solid #BBBBBB;
    border-radius: 5px;
}

.formular-vorschau-feld textarea {
    min-height: 70px;
}

.formular-vorschau-hilfe {
    display: block;
    margin-top: 3px;
    color: #666666;
    font-size: 12px;
}

.formular-shortcode-box {
    display: inline-block;
    padding: 5px 7px;
    background: #FDEAB3;
    border: 1px solid #D6B85A;
    border-radius: 5px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    color: #000000;
}

@media (max-width: 850px) {
    .formular-gestalten-layout {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .formular-vorschau-feld,
    .formular-vorschau-breite-100,
    .formular-vorschau-breite-75,
    .formular-vorschau-breite-66,
    .formular-vorschau-breite-50,
    .formular-vorschau-breite-33,
    .formular-vorschau-breite-25 {
        grid-column: span 12;
    }
}


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: formular_liste.php
   ============================================================ */

.formular-liste-box {
    background: #FAFAFA;
    border: 1px solid #BBBBBB;
    border-radius: 7px;
    padding: 12px;
    box-shadow: 0 3px 7px rgba(52,152,219,0.5);
}

.formular-liste-box h4 {
    margin-top: 0;
    color: #007ACC;
}

.formular-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.formular-tabelle th,
.formular-tabelle td {
    border: 1px solid #CCCCCC;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.formular-tabelle th {
    background: #007ACC;
    color: #FFFFFF;
}

.formular-tabelle tr:nth-child(even) {
    background: #F5F5F5;
}

.formular-aktionen a {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 5px 8px;
    background: #007ACC;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
}

.formular-aktionen a:hover {
    background: #769FCF;
}

.formular-aktionen a.formular-gestalten-button {
    background: #6A8F2A;
}

.formular-aktionen a.formular-gestalten-button:hover {
    background: #86A83A;
}

.formular-aktionen a.formular-loeschen-button {
    background: #B00000;
}

.formular-aktionen a.formular-loeschen-button:hover {
    background: #D00000;
}

.formular-status-aktiv {
    color: green;
    font-weight: bold;
}

.formular-status-inaktiv {
    color: red;
    font-weight: bold;
}

.formular-shortcode {
    display: inline-block;
    padding: 5px 7px;
    background: #FDEAB3;
    border: 1px solid #D6B85A;
    border-radius: 5px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    color: #000000;
}

.formular-shortcode-hinweis {
    font-size: 12px;
    color: #666666;
    margin-top: 4px;
}

.formular-hinweis {
    padding: 10px;
    background: #FDEAB3;
    border: 1px solid #D6B85A;
    border-radius: 6px;
    margin-bottom: 12px;
}

.formular-hinweis-ok {
    padding: 10px;
    background: #DFF2BF;
    border: 1px solid #8FBC8F;
    border-radius: 6px;
    margin-bottom: 12px;
    color: #2E5E2E;
}

.formular-hinweis-fehler {
    padding: 10px;
    background: #FFD6D6;
    border: 1px solid #CC7777;
    border-radius: 6px;
    margin-bottom: 12px;
    color: #8A0000;
}


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: formular_neu.php
   ============================================================ */

.formular-neu-box {
    background: #FAFAFA;
    border: 1px solid #BBBBBB;
    border-radius: 7px;
    padding: 12px;
    box-shadow: 0 3px 7px rgba(52,152,219,0.5);
}

.formular-neu-box h4 {
    margin-top: 0;
    color: #007ACC;
}

.formular-formular-zeile {
    margin-bottom: 12px;
}

.formular-formular-zeile label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}

.formular-formular-zeile input[type="text"],
.formular-formular-zeile select,
.formular-formular-zeile textarea {
    width: 96%;
    padding: 7px;
    border: 1px solid #BBBBBB;
    border-radius: 5px;
}

.formular-formular-zeile textarea {
    min-height: 80px;
}

.formular-kleiner-hinweis {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #666666;
}

.formular-shortcode-vorschau {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 7px;
    background: #FDEAB3;
    border: 1px solid #D6B85A;
    border-radius: 5px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    color: #000000;
}

.formular-checkbox-zeile {
    margin-bottom: 8px;
}

.formular-button {
    background-color: #007ACC;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: bold;
}

.formular-button:hover {
    background-color: #769FCF;
}

.formular-abbrechen {
    display: inline-block;
    margin-left: 8px;
    padding: 8px 14px;
    background: #DDDDDD;
    color: #000000;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.formular-abbrechen:hover {
    background: #BBBBBB;
}

.formular-hinweis-ok {
    padding: 10px;
    background: #DFF2BF;
    border: 1px solid #8FBC8F;
    border-radius: 6px;
    margin-bottom: 12px;
    color: #2E5E2E;
}

.formular-hinweis-fehler {
    padding: 10px;
    background: #FFD6D6;
    border: 1px solid #CC7777;
    border-radius: 6px;
    margin-bottom: 12px;
    color: #8A0000;
}


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: hilfe_formular.php
   ============================================================ */

.formular-hilfe-box { background:#FAFAFA; border:1px solid #BBBBBB; border-radius:7px; padding:16px; box-shadow:0 3px 7px rgba(52,152,219,0.5); line-height:1.55; }
.formular-hilfe-box h4 { margin-top:0; color:#007ACC; }
.formular-hilfe-box h5 { margin:22px 0 8px; color:#005B96; font-size:16px; }
.formular-hilfe-box h6 { margin:16px 0 6px; color:#333333; font-size:14px; }
.formular-hilfe-box ul, .formular-hilfe-box ol { padding-left:24px; }
.formular-hilfe-box li { margin-bottom:6px; }
.formular-hilfe-nav { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 18px; }
.formular-hilfe-nav a { padding:6px 9px; color:#FFFFFF; background:#007ACC; border-radius:4px; text-decoration:none; font-weight:bold; font-size:12px; }
.formular-hilfe-nav a:hover { background:#769FCF; }
.formular-hilfe-hinweis { padding:10px; margin:10px 0; background:#FDEAB3; border:1px solid #D6B85A; border-radius:6px; }
.formular-hilfe-beispiel { padding:12px; margin:10px 0; background:#FFFFFF; border:1px solid #CCCCCC; border-radius:6px; }
.formular-hilfe-code { display:inline-block; padding:4px 7px; background:#FDEAB3; border:1px solid #D6B85A; border-radius:4px; font-family:Consolas, Monaco, monospace; }
.formular-hilfe-tabelle { width:100%; border-collapse:collapse; margin:10px 0; }
.formular-hilfe-tabelle th, .formular-hilfe-tabelle td { padding:8px; border:1px solid #CCCCCC; text-align:left; vertical-align:top; }
.formular-hilfe-tabelle th { color:#FFFFFF; background:#007ACC; }
.formular-hilfe-tabelle tr:nth-child(even) { background:#F3F3F3; }


/* ============================================================
   Übernommenes Inline-CSS aus PHP-Datei
   Quelle: manage.php
   ============================================================ */

.as-formular-plugin {
    font-family: Arial, sans-serif;
    color: #000000;
    background: #fff;
    padding: 15px;
}

.as-formular-header {
    margin-bottom: 1em;
    border-bottom: 2px solid #007ACC;
}

.as-formular-header h3 {
    margin: 0;
    color: #007ACC;
}

.container-flex {
    display: flex;
    gap: 20px;
}

.sidebar {
    width: 200px;
    background: #f5f5f5;
    padding: 15px;
    border-radius: 6px;
}

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

.sidebar ul li {
    margin-bottom: 1em;
}

.sidebar ul li a {
    display: block;
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    background-color: #007ACC;
    color: #FFFFFF;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar ul li a:hover {
    background-color: #769FCF;
    color: #FFFFFF;
}

.sidebar ul li a:visited {
    background-color: #769FCF;
    color: #000000;
}

.sidebar ul li a.active {
    background-color: #FDEAB3;
    color: #000000;
}

.sidebar .formular-kontext {
    margin-top: -5px;
    padding: 8px;
    background: #EAF4FB;
    border: 1px solid #B7D8EF;
    border-radius: 5px;
}

.sidebar .formular-kontext strong {
    display: block;
    margin-bottom: 7px;
    color: #005B96;
}

.sidebar .formular-kontext a {
    margin-bottom: 6px;
    padding: 6px 8px;
    font-size: 12px;
}

.suchformular {
    background-color: #FAFAFA;
    padding: 10px;
    border: 1px solid #BBBBBB;
    border-radius: 7px;
    box-shadow: 0 3px 7px rgba(52,152,219,0.5);
    margin-bottom: 15px;
}

.suchformular input[type="text"] {
    width: 90%;
    padding: 6px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.suchformular .suchbutton {
    background-color: #DDDDDD;
    border-radius: 5px;
    box-shadow: 0 3px 7px rgba(52,152,219,0.5);
    color: black;
    border: none;
    padding: 7px 12px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
}

.suchformular .suchbutton:hover {
    background-color: #BBBBBB;
}

.content-area {
    flex: 1 1 auto;
}

.as-formular-footer {
    margin-top: 2em;
    text-align: center;
    font-size: 0.9em;
    color: #666;
}

@media (max-width: 720px) {
    .container-flex {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        margin-bottom: 15px;
    }
}