@font-face {
    font-family: "Roboto Local";
    src: url("/assets/legacy/templates/fragstan/font/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: "Roboto Local";
    src: url("/assets/legacy/templates/fragstan/font/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
}

:root {
    --ec-primary: #027e86;
    --ec-accent: #ebbd07;
    --ec-ink: #17272d;
    --ec-muted: #607178;
    --ec-surface: #ffffff;
    --ec-background: #f2f6f6;
    --ec-border: #d8e1e2;
}

* { box-sizing: border-box; }

body.ec-form-app {
    margin: 0;
    min-height: 100vh;
    color: var(--ec-ink);
    background: var(--ec-background);
    font-family: "Roboto Local", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    padding-top: var(--ec-header-height, 160px);
}

.ec-skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 10;
    padding: .65rem 1rem;
    color: #fff;
    background: var(--ec-primary);
}
.ec-skip-link:focus { top: 1rem; }

.ec-custom-header { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, .05); transition: transform .3s ease-in-out; }
.ec-header-logo { display: flex; justify-content: center; align-items: center; max-height: 120px; padding: 1rem 2rem; transition: padding .3s ease, max-height .3s ease; }
.ec-header-logo a { display: flex; justify-content: center; align-items: center; }
.ec-header-logo img { display: block; width: auto; height: auto; }
.ec-header-logo .ec-logo-with-slogan { display: block; max-height: 70px; }
.ec-header-logo .ec-logo-no-slogan { display: none; max-height: 40px; }
.ec-custom-header.ec-scrolled .ec-header-logo { max-height: 70px; padding: .4rem 2rem; }
.ec-custom-header.ec-scrolled .ec-logo-with-slogan { display: none; }
.ec-custom-header.ec-scrolled .ec-logo-no-slogan { display: block; }
.ec-header-nav { position: relative; z-index: 5; display: flex; justify-content: center; background: var(--ec-background); border-top: 1px solid rgba(0, 0, 0, .05); border-bottom: 2px solid rgba(2, 126, 134, .1); }
.ec-main-menu { display: flex; margin: 0; padding: 0; list-style: none; }
.ec-main-menu a { position: relative; z-index: 10; display: block; padding: 1.05rem 1.3rem 1.15rem; color: var(--ec-ink); font-size: .95rem; font-weight: 800; text-decoration: none; text-transform: uppercase; transition: color .3s ease; }
.ec-main-menu > li > a::before { position: absolute; z-index: -1; inset: 0; content: ""; background: var(--ec-primary); border-radius: 3px; transform: skewX(-15deg) scaleY(0); transform-origin: bottom; transition: transform .3s cubic-bezier(.2, 1, .3, 1); }
.ec-main-menu > li > a::after { position: absolute; z-index: 5; right: 15%; bottom: 0; left: 15%; height: 4px; content: ""; background: var(--ec-accent); transform: scaleX(0); transition: transform .3s ease; }
@media (min-width: 1101px) {
    .ec-main-menu li:hover > a, .ec-main-menu li.ec-active > a { color: #fff; }
    .ec-main-menu li:hover > a::before, .ec-main-menu li.ec-active > a::before { transform: skewX(-15deg) scaleY(1); }
    .ec-main-menu li:hover > a::after, .ec-main-menu li.ec-active > a::after { transform: scaleX(1); }
}
.ec-mobile-text-logo, .ec-hamburger { display: none; }

.ec-form-main { padding: clamp(2rem, 5vw, 4.5rem) 1.25rem; }
.ec-form-content { width: min(100%, 900px); margin: 0 auto; padding: clamp(1.75rem, 4vw, 3.5rem); background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: 1rem; box-shadow: 0 1.2rem 3.5rem rgba(23, 39, 45, .09); }
.ec-form-content h1, .ec-form-content h2, .ec-form-content h3 { color: var(--ec-primary); line-height: 1.15; }
.ec-form-content h1 { margin: 0 0 1.5rem; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.ec-form-content h2 { margin-top: 2rem; }
.ec-form-content h3 { margin: 2.5rem 0 .75rem; padding-left: .9rem; border-left: .3rem solid var(--ec-accent); font-size: 1.2rem; }
.ec-form-content h1 + h3, .ec-form-content p + h3 { margin-top: 1.75rem; }
.ec-form-content a { color: var(--ec-primary); }
.ec-form-content table { width: 100%; margin: 1.25rem 0 1.5rem; border-collapse: separate; border-spacing: 0 .35rem; }
.ec-form-content td { padding: .65rem .75rem; vertical-align: middle; }
.ec-form-content tr:not(:empty) td { background: #fbfcfc; border-top: 1px solid #edf1f1; border-bottom: 1px solid #edf1f1; }
.ec-form-content tr:not(:empty) td:first-child { border-left: 1px solid #edf1f1; border-radius: .55rem 0 0 .55rem; }
.ec-form-content tr:not(:empty) td:last-child { border-right: 1px solid #edf1f1; border-radius: 0 .55rem .55rem 0; }
.ec-form-content .mpform_title { width: 37%; color: var(--ec-ink); font-weight: 700; }
.ec-form-content .mpform_field { min-width: 0; }
.ec-form-content tr.mpform_error td { padding: 0; background: transparent; border: 0; }
.ec-form-content tr.mpform_headline td { padding: .8rem 1rem; color: var(--ec-primary); background: #f1f8f8; border-color: #d6e8e9; border-left: .28rem solid var(--ec-accent); border-radius: .55rem; font-size: 1.05rem; }
.ec-form-content tr.mpform_paragraph td { padding: 1rem 1.15rem; color: var(--ec-ink); background: #fffdf5; border-color: #f1e1a4; border-radius: .55rem; }
.ec-form-content tr.mpform_headline + tr.mpform_paragraph td { border-top-left-radius: 0; border-top-right-radius: 0; }
.ec-form-content tr.mpform_headline:has(+ tr.mpform_paragraph) td { margin-bottom: -.35rem; color: var(--ec-ink); background: #fff8df; border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.ec-form-content tr.mpform_paragraph ul { margin: .75rem 0 0; padding-left: 1.4rem; }
.ec-form-content tr.mpform_paragraph li + li { margin-top: .35rem; }
.ec-form-content tr.mpform_summary_row td { padding: .72rem .8rem; background: #fff; border-color: #e7eeee; border-radius: 0; }
.ec-form-content tr.mpform_summary_row td:first-child { width: 42%; border-left: 1px solid #e7eeee; border-radius: 0; }
.ec-form-content tr.mpform_summary_row td:last-child { border-right: 1px solid #e7eeee; border-radius: 0; }
.ec-form-content tr.mpform_summary_row + tr.mpform_headline td { margin-top: .85rem; }
.ec-form-content input[type="text"], .ec-form-content input[type="email"], .ec-form-content input[type="password"], .ec-form-content input[type="number"], .ec-form-content input[type="date"], .ec-form-content select, .ec-form-content textarea { width: 100%; max-width: 38rem; padding: .7rem .8rem; color: var(--ec-ink); background: #fff; border: 1px solid #aababe; border-radius: .35rem; font: inherit; }
.ec-form-content textarea { min-height: 8rem; resize: vertical; }
.ec-form-content input:focus, .ec-form-content select:focus, .ec-form-content textarea:focus { outline: 3px solid rgba(2, 126, 134, .24); border-color: var(--ec-primary); }
.ec-form-content input[type="submit"], .ec-form-content input[type="button"], .ec-form-content button { margin: .25rem .35rem .25rem 0; padding: .8rem 1.35rem; color: #fff; background: var(--ec-primary); border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.ec-form-content input[type="submit"]:hover, .ec-form-content input[type="button"]:hover, .ec-form-content button:hover { background: #01636a; }
.ec-form-content input[type="submit"]:hover, .ec-form-content input[type="button"]:hover, .ec-form-content button:hover { box-shadow: 0 .5rem 1rem rgba(2, 126, 134, .2); transform: translateY(-1px); }
.ec-form-content input[type="submit"][value="zurück"] { color: var(--ec-primary); background: #fff; border: 1px solid var(--ec-primary); }
.ec-form-content .mpform_radio_label, .ec-form-content .mpform_checkbox_label { display: inline-flex; align-items: center; gap: .45rem; margin: .15rem .45rem .15rem 0; padding: .45rem .7rem; color: var(--ec-ink); background: #fff; border: 1px solid #d9e4e5; border-radius: .45rem; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.ec-form-content .mpform_radio_label:hover, .ec-form-content .mpform_checkbox_label:hover { background: #f1f8f8; border-color: var(--ec-primary); }
.ec-form-content input[type="radio"], .ec-form-content input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ec-primary); }
.ec-form-content tr.mpform_required { color: inherit; }
.ec-form-content span.mpform_required { margin-left: .1rem; color: #b42318; }
.ec-form-content .error-message, .ec-form-content .error-field { color: #b42318; }
.ec-form-content .error-field { border-color: #b42318; }
.ec-form-content img { max-width: 100%; height: auto; }

.ec-form-content .admin-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .45rem 1rem; margin: 0 0 1.5rem; font-size: .94rem; }
.ec-form-content .admin-nav a { text-decoration: none; }
.ec-form-content .admin-nav a:hover { text-decoration: underline; }
.ec-form-content .admin-page-title { margin: 0 0 1.5rem; }
.ec-form-content .admin-alert { padding: .8rem 1rem; color: #8d1f1f; background: #fff2f2; border: 1px solid #e6bbbb; border-radius: .5rem; }
.ec-form-content .admin-sync { margin: 0 0 1.5rem; }
.ec-form-content .admin-sync-state { padding: 1rem 1.1rem; background: #f1f8f8; border: 1px solid #d6e8e9; border-left: .3rem solid var(--ec-primary); border-radius: .55rem; }
.ec-form-content .admin-sync-state button { margin-top: .7rem; }
.ec-form-content .admin-filter { display: flex; align-items: center; gap: .6rem; max-width: 48rem; margin: 1.5rem 0; }
.ec-form-content .admin-filter label { font-weight: 700; white-space: nowrap; }
.ec-form-content .admin-filter input { min-width: 0; flex: 1; }
.ec-form-content .admin-filter button { width: 3rem; height: 3rem; margin: 0; padding: 0; font-size: 1.4rem; line-height: 1; }
.ec-form-content .admin-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #e2ebec; border-radius: .7rem; }
.ec-form-content .admin-table { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
.ec-form-content .admin-table th, .ec-form-content .admin-table td { padding: .9rem .8rem; color: var(--ec-ink); text-align: left; vertical-align: top; background: #fff; border: 0; border-bottom: 1px solid #e7eeee; border-radius: 0; }
.ec-form-content .admin-table th { color: var(--ec-primary); background: #f1f8f8; font-size: .85rem; letter-spacing: .02em; text-transform: uppercase; }
.ec-form-content .admin-table tr:last-child td { border-bottom: 0; }
.ec-form-content .admin-table tbody tr:hover td { background: #fbfdfd; }
.ec-form-content .admin-table th:nth-child(1) { width: 34%; }
.ec-form-content .admin-table th:nth-child(2) { width: 22%; }
.ec-form-content .admin-table th:nth-child(3) { width: 21%; }
.ec-form-content .admin-table th:nth-child(4) { width: 23%; }
.ec-form-content .admin-customer strong, .ec-form-content .admin-customer span { display: block; overflow-wrap: anywhere; }
.ec-form-content .admin-customer span { margin-top: .25rem; color: var(--ec-muted); font-size: .9rem; }
.ec-form-content .admin-qr-toggle { margin: 0; padding: 0; color: var(--ec-primary); background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: .95rem; text-align: left; }
.ec-form-content .admin-qr-toggle::before { content: "▸ "; }
.ec-form-content .admin-qr-toggle[aria-expanded="true"]::before { content: "▾ "; }
.ec-form-content .admin-qr-toggle:hover { color: #01636a; background: transparent; box-shadow: none; transform: none; text-decoration: underline; }
.ec-form-content .admin-qr-row td { padding: 1rem; background: #f8fbfb; }
.ec-form-content .admin-qr-list { display: grid; grid-template-columns: repeat(3, minmax(9rem, 1fr)); gap: 1rem; font-size: .9rem; }
.ec-form-content .admin-qr-list img { display: block; width: 120px; margin-top: .4rem; cursor: pointer; image-rendering: pixelated; }
.ec-form-content .admin-actions { display: grid; justify-items: start; gap: .45rem; margin-top: .65rem; }
.ec-form-content .admin-actions button { margin: 0; padding: .42rem .7rem; color: var(--ec-primary); background: #fff; border: 1px solid #bdd4d7; border-radius: .4rem; box-shadow: none; font-size: .88rem; }
.ec-form-content .admin-actions button:hover { color: #fff; background: var(--ec-primary); border-color: var(--ec-primary); box-shadow: none; transform: none; }
.ec-form-content .admin-action-link { padding: .2rem 0; font-size: .9rem; font-weight: 700; }

.ec-site-footer { color: #fff; background: #17272d; }
.ec-site-footer__content { display: grid; grid-template-columns: 2fr 1fr 1fr; width: min(100%, 61rem); margin: 0 auto; padding: 3.5rem 2rem; }
.ec-site-footer__logo { display: block; width: 198px; height: 80px; margin-bottom: 1rem; object-fit: contain; object-position: left center; }
.ec-site-footer address { font-style: normal; }
.ec-site-footer a { display: block; color: #fff; text-decoration: none; }
.ec-site-footer a:hover { color: #fff; text-decoration: none; }
.ec-site-footer a:focus { color: #fff; text-decoration: none; outline: 2px solid #fff; outline-offset: 3px; }
.ec-site-footer nav { display: grid; align-content: start; gap: .35rem; }
.ec-site-footer nav strong, .ec-social-media > strong { color: var(--ec-primary); margin-bottom: .25rem; }
.ec-contact-list { display: grid; gap: .6rem; }
.ec-contact-list__item { display: inline-flex !important; align-items: center; gap: .8rem; width: fit-content; }
.ec-contact-list__item svg { width: 2.05rem; height: 2.05rem; flex: 0 0 auto; fill: var(--ec-accent); }
.ec-social-media { display: grid; align-content: start; gap: 1rem; }
.ec-social-media__links { display: flex; flex-wrap: wrap; gap: .55rem 1rem; max-width: 12rem; }
.ec-social-link { display: block !important; width: 2.65rem; height: 2.65rem; color: var(--ec-accent) !important; text-decoration: none !important; }
.ec-social-link:hover { color: var(--ec-accent) !important; outline: 0; }
.ec-social-link:focus { color: var(--ec-accent) !important; outline: 2px solid #fff; outline-offset: 3px; }
.ec-social-link svg { display: block; width: 100%; height: 100%; fill: currentColor; }

@media (max-width: 680px) {
    .ec-form-content { padding: 1.25rem; border-radius: .7rem; }
    .ec-form-content table, .ec-form-content tbody, .ec-form-content tr, .ec-form-content td { display: block; width: 100%; }
    .ec-form-content td { padding: .35rem 0; }
    .ec-form-content .mpform_title { width: auto; }
    .ec-site-footer__content { grid-template-columns: 1fr; gap: 2rem; }
    .ec-form-content .admin-nav { justify-content: flex-start; }
    .ec-form-content .admin-filter { flex-wrap: wrap; }
    .ec-form-content .admin-filter input { flex-basis: calc(100% - 4rem); }
}

@media (max-width: 1100px) {
    .ec-header-logo { display: none; }
    .ec-header-nav { justify-content: space-between; align-items: center; min-height: 70px; padding: 0 1.5rem; background: #fff; }
    .ec-mobile-text-logo { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 15px; color: var(--ec-primary); text-decoration: none; }
    .ec-logo-txt-main { color: var(--ec-primary); font-size: 1.5rem; letter-spacing: -.5px; line-height: 1; text-transform: lowercase; }
    .ec-logo-txt-main b { font-weight: 800; }
    .ec-logo-txt-main span { font-weight: 200; }
    .ec-logo-txt-sub { color: var(--ec-accent); font-size: .75rem; font-weight: 600; letter-spacing: .2px; line-height: 1; }
    .ec-hamburger { display: block; padding: 1.2rem 1rem; cursor: pointer; background: transparent; border: 0; }
    .ec-hamburger-lines span { display: block; width: 30px; height: 3px; margin-bottom: 6px; background: var(--ec-primary); border-radius: 3px; transition: all .3s ease; }
    .ec-main-menu { position: absolute; top: 100%; left: 0; flex-direction: column; width: 100%; max-height: 0; overflow: hidden; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .1); transition: max-height .4s ease; }
    .ec-custom-header.ec-mobile-open .ec-main-menu { max-height: 90vh; overflow-y: auto; border-top: 1px solid #eee; }
    .ec-main-menu > li > a { padding: 1.2rem 2rem; color: var(--ec-ink); border-bottom: 1px solid #eee; }
    .ec-main-menu > li > a::before, .ec-main-menu > li > a::after { display: none; }
    .ec-main-menu li.ec-active > a, .ec-main-menu li:hover > a { color: var(--ec-primary); background: #f9f9f9; }
    .ec-custom-header.ec-mobile-open .ec-hamburger-lines span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .ec-custom-header.ec-mobile-open .ec-hamburger-lines span:nth-child(2) { opacity: 0; }
    .ec-custom-header.ec-mobile-open .ec-hamburger-lines span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

@media (max-width: 600px) {
    .ec-mobile-text-logo { flex-direction: column; align-items: flex-start; gap: 2px; }
    .ec-logo-txt-main { font-size: 1.3rem; }
    .ec-logo-txt-sub { font-size: .65rem; }
}
