.sg-app{max-width:1180px;margin:28px auto 55px;color:#26384f;font-family:Arial,sans-serif;line-height:1.5}
.sg-app *{box-sizing:border-box}.sg-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
.sg-head h1{margin:0 0 7px;font-size:32px;line-height:1.15;color:#172235}.sg-head p{margin:0;color:#607085}
.sg-templatebar,.sg-panel{background:#fff;border:1px solid #dde4ec;border-radius:16px;box-shadow:0 8px 28px rgba(34,55,82,.07)}
.sg-templatebar{padding:18px;margin-bottom:20px}.sg-search input{width:100%;padding:12px 14px;border:1px solid #ccd6e1;border-radius:10px;font-size:15px}
.sg-categories{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}.sg-cat{border:1px solid #d6dfe8;background:#f7f9fb;color:#36516e;border-radius:999px;padding:7px 11px;cursor:pointer}
.sg-cat.active{background:#26384f;color:#fff;border-color:#26384f}.sg-template-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;max-height:248px;overflow:auto;padding-right:3px}
.sg-template{min-height:64px;border:1px solid #dde4ec;background:#fff;border-radius:10px;padding:10px;text-align:left;cursor:pointer;color:#26384f}
.sg-template:hover,.sg-template.active{border-color:#4b7cae;background:#f1f7fd}.sg-template strong{display:block;font-size:13px;line-height:1.25}.sg-template small{display:block;margin-top:4px;color:#8290a1}
.sg-workspace{display:grid;grid-template-columns:390px minmax(0,1fr);gap:20px}.sg-panel{padding:20px}.sg-panel h2{font-size:20px;margin:0 0 17px}.sg-panel h3{font-size:15px;margin:0 0 13px}
.sg-field{display:block;margin-bottom:13px}.sg-field>span{display:block;font-size:13px;font-weight:700;margin-bottom:5px}.sg-field small{font-weight:400;color:#8290a1}
.sg-field input[type=text],.sg-field select{width:100%;height:42px;padding:8px 10px;border:1px solid #cbd5df;border-radius:9px;background:#fff;color:#26384f;font-size:14px}
.sg-field input[type=color]{width:100%;height:42px;padding:3px;border:1px solid #cbd5df;border-radius:9px;background:#fff}
.sg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}.sg-check{display:flex;gap:8px;align-items:center;font-size:14px;margin:5px 0 10px}.sg-separator{height:1px;background:#e8edf2;margin:17px 0}
.sg-preview-panel{min-width:0}.sg-preview-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.sg-preview-head h2{margin-bottom:2px}.sg-preview-head p{margin:0;color:#748398;font-size:13px}
.sg-paper-wrap{background:#eef2f6;border-radius:12px;padding:18px;display:flex;justify-content:center;overflow:auto}
#sgCanvas{display:block;width:min(100%,620px);height:auto;background:#fff;box-shadow:0 3px 18px rgba(23,34,53,.15)}
.sg-actions{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:10px;margin-top:13px}.sg-primary,.sg-download,.sg-secondary{border:0;border-radius:10px;min-height:43px;padding:10px 14px;font-weight:700;cursor:pointer}
.sg-primary{background:#26384f;color:#fff}.sg-download{background:#eef6ff;color:#215b91;border:1px solid #bdd7ef}.sg-download:disabled{opacity:.42;cursor:not-allowed}
.sg-secondary{background:#f4f6f8;color:#36516e;border:1px solid #d6dfe8}.sg-small{min-height:36px;padding:7px 10px;font-size:12px}
.sg-status{margin-top:13px;padding:10px 12px;border-radius:9px;background:#fff7df;color:#765a10;font-size:13px}.sg-status.saved{background:#eaf8ef;color:#23643b}
.sg-download-note,.sg-note{font-size:12px;color:#7a899b;margin:8px 0 0}.sg-wifi{background:#f8fafc;border-radius:10px;padding:0 12px 12px;margin-top:6px}
@media(max-width:930px){.sg-workspace{grid-template-columns:1fr}.sg-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sg-controls{order:2}.sg-preview-panel{order:1}}
@media(max-width:600px){.sg-app{margin:14px auto 35px}.sg-head{display:block}.sg-head .sg-secondary{margin-top:12px}.sg-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-grid2{grid-template-columns:1fr}.sg-actions{grid-template-columns:1fr}.sg-paper-wrap{padding:8px}}

.sg-symbol-picker{width:100%;height:42px;border:1px solid #cbd5df;border-radius:9px;background:#fff;color:#26384f;display:flex;align-items:center;gap:9px;padding:5px 9px;cursor:pointer;text-align:left}
.sg-symbol-current{width:29px;height:29px;display:flex;align-items:center;justify-content:center;flex:0 0 29px}
.sg-symbol-current img{max-width:27px;max-height:27px;display:block}
.sg-symbol-picker #sgSymbolLabel{flex:1}
.sg-symbol-caret{color:#7d8b9b}
.sg-symbol-popover{margin-top:7px;border:1px solid #d5dee8;background:#fff;border-radius:11px;padding:10px;box-shadow:0 10px 25px rgba(31,50,74,.13);position:relative;z-index:15}
.sg-symbol-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;max-height:260px;overflow:auto}
.sg-symbol-option{height:48px;border:1px solid #e0e6ed;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:7px}
.sg-symbol-option:hover,.sg-symbol-option.active{border-color:#4b7cae;background:#eef6fd}
.sg-symbol-option img{width:30px;height:30px;object-fit:contain}
.sg-symbol-option[data-symbol="none"]{font-size:20px;color:#9aa5b1}
@media(max-width:600px){.sg-symbol-grid{grid-template-columns:repeat(5,1fr)}}

/* V4 – leichtere Font-Awesome-Regular/Outline-Anmutung */
.sg-symbol-current img{max-width:24px;max-height:24px}
.sg-symbol-option img{width:26px;height:26px}
.sg-symbol-option{background:#fff}

.sg-wifi-hint{
    margin-top:12px;
    padding:10px 12px;
    border:1px solid #dbe7ef;
    border-radius:9px;
    background:#fff;
    font-size:12px;
    line-height:1.5;
    color:#526477;
}
.sg-wifi-hint strong{color:#26384f}
.sg-wifi input:disabled{
    background:#eef2f5;
    color:#8a97a5;
    cursor:not-allowed;
}

/* WebsiteBaker / Code2 Einbindung */
.sg-embedded{
    margin-top:0;
}
.sg-embed-tools{
    display:flex;
    justify-content:flex-end;
    margin:0 0 12px;
}

.sg-categories[hidden]{display:none !important;}

/* V10 – Icon-Auswahl: WebsiteBaker-Styles sicher überschreiben */
.sg-app .sg-symbol-grid .sg-symbol-option{
    width:100% !important;
    min-width:42px !important;
    height:52px !important;
    padding:8px !important;
}
.sg-app .sg-symbol-grid .sg-symbol-option img{
    display:block !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    max-width:30px !important;
    max-height:30px !important;
    margin:0 auto !important;
    padding:0 !important;
    object-fit:contain !important;
    transform:none !important;
}
.sg-app .sg-symbol-current img{
    display:block !important;
    width:25px !important;
    height:25px !important;
    min-width:25px !important;
    min-height:25px !important;
    max-width:25px !important;
    max-height:25px !important;
    object-fit:contain !important;
}

/* v11 – hochwertigere Schildgestaltung */
.sg-accent-hint small{display:block;color:#6b7785;line-height:1.35;padding-top:8px}