/**
 * fsf-base.css — Basis-Layout & Variablen für Finanzservice Flensburg.
 * Ersetzt die ehemals importierten FSF-Block-Library-Styles.
 */

:root {
    --fsf-content-size: 800px;
    --fsf-wide-size: 1200px;

    --fsf-fs-small: 13px;
    --fsf-fs-medium: 20px;
    --fsf-fs-regular: 18px;
    --fsf-fs-large: 36px;
    --fsf-fs-x-large: 42px;
}

/* === Spalten-Layout === */
.fsf-cols {
    display: flex;
    flex-wrap: nowrap;
    gap: 2em;
    margin-bottom: 1.75em;
}
.fsf-cols.fsf-flex { align-items: stretch; }
.fsf-cols > .fsf-col {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* Theme-Boxen innerhalb der Spalten füllen die Spaltenhöhe aus,
   damit nebeneinanderliegende Boxen symmetrisch wirken. */
.fsf-cols > .fsf-col > .ibox,
.fsf-cols > .fsf-col > .ibox2,
.fsf-cols > .fsf-col > .ibox3 { flex: 1 1 auto; }
@media (max-width: 740px) {
    .fsf-cols { flex-wrap: wrap; gap: 1em; }
    .fsf-cols > .fsf-col { flex-basis: 100% !important; }
}

/* === Layout-Helfer === */
.fsf-flex { display: flex; flex-wrap: wrap; align-items: center; }
.fsf-flex > * { margin: 0; }
.fsf-flow > .alignleft   { float: left;  margin: 0 2em 0 0; }
.fsf-flow > .alignright  { float: right; margin: 0 0 0 2em; }
.fsf-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }
.fsf-grid { display: grid; gap: 0.5em; }
.fsf-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--fsf-content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}
.fsf-constrained > .alignwide { max-width: var(--fsf-wide-size); }

/* === Standard-Alignment === */
.aligncenter { text-align: center; }
.alignleft   { float: left; margin: 0 2em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 2em; }
.alignwide   { max-width: var(--fsf-wide-size); margin-left: auto; margin-right: auto; }
.alignfull   { width: 100%; }

/* === Bilder === */
/* Global: kein Bild bricht je aus seinem Container aus. Verhindert horizontales Scrollen
   bei großen Bildern (z.B. Logos auf Unser_Netzwerk, Bilder auf Detail-Seiten). */
img { max-width: 100%; height: auto; }
.fsf-image { margin: 0 0 1em; }
.fsf-image img { max-width: 100%; height: auto; }
.fsf-resized img { max-width: 100%; }

/* === Spacer === */
.fsf-spacer { display: block; clear: both; }

/* === Separator === */
.fsf-separator { border: 0; border-top: 1px solid #d8dde2; margin: 2em 0; }
.fsf-separator.fsf-wide { width: 100%; }

/* === Buttons === */
.fsf-button {
    display: inline-block; color: #fff; background-color: #006883;
    border: 0; border-radius: 4px; padding: 10px 22px;
    font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer;
    transition: background 0.15s;
}
.fsf-button:hover { background-color: #005570; }

/* === Quote / Pullquote === */
.fsf-quote, .fsf-pullquote {
    border-left: 4px solid #006883; padding: 0.5em 1em;
    margin: 1.5em 0; font-style: italic; color: #51666f;
}

/* === Schriftgrößen-Utilities === */
.has-small-font-size   { font-size: var(--fsf-fs-small)   !important; }
.has-medium-font-size  { font-size: var(--fsf-fs-medium)  !important; }
.has-regular-font-size { font-size: var(--fsf-fs-regular) !important; }
.has-large-font-size   { font-size: var(--fsf-fs-large)   !important; }
.has-x-large-font-size { font-size: var(--fsf-fs-x-large) !important; }

/* === Form-Layout & Validierung === */
.fsf-form-container {
    background: #efefee;
    border-radius: 5px;
    padding: 24px;
    margin-bottom: 1.5em;
}
.fsf-form-wrap { position: relative; display: block; }
.fsf-form-control {
    width: 100%; padding: 10px 14px 10px 38px; border: 1px solid #d4d8dc;
    border-radius: 4px; background: #fff; font: inherit;
    box-sizing: border-box;
}
.fsf-form-control:focus { outline: none; border-color: #006883; }
.fsf-form-textarea { padding-left: 38px; min-height: 110px; resize: vertical; }
.fsf-form-submit {
    background: #006883; color: #fff; border: 0; border-radius: 4px;
    padding: 12px 24px; font-weight: 500; cursor: pointer; font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.05em;
    transition: background 0.15s;
}
.fsf-form-submit:hover { background: #005570; }
.fsf-form-response { margin: 1em 0 0; padding: 0.6em 1em; border: 0; }
.fsf-form-sent     { background: #e3f3e6; border: 1px solid #46b450; color: #2c4a30; }
.fsf-form-errors   { background: #fcf0f1; border: 1px solid #dc3232; color: #5a2222; }
.fsf-form-error-tip { color: #dc3232; font-size: 0.95em; display: block; }
.fsf-form-list-item { display: inline-block; margin-right: 1em; }
.fsf-form-list-label { display: inline-block; }
.formicon i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #006883; pointer-events: none; font-size: 16px;
}

/* === Screen reader only === */
.screen-reader-response {
    position: absolute; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; padding: 0; border: 0;
}