/*

Personalrat Survey Theme
Modernes Behörden-Theme mit dezentem Glassmorphism
*/

/* =========================================================

Design Tokens
========================================================= */

:root {
--pr-color-primary: #155eef;
--pr-color-primary-hover: #004eeb;
--pr-color-primary-active: #0040c1;

--pr-color-secondary: #344054;
--pr-color-accent: #0e9384;

--pr-color-text: #101828;
--pr-color-text-muted: #475467;
--pr-color-border: rgba(255, 255, 255, 0.45);

--pr-color-success: #067647;
--pr-color-warning: #b54708;
--pr-color-danger: #b42318;

--pr-glass-background: rgba(255, 255, 255, 0.72);
--pr-glass-background-strong: rgba(255, 255, 255, 0.88);
--pr-glass-border: rgba(255, 255, 255, 0.55);

--pr-shadow-sm:
        0 1px 2px rgba(16, 24, 40, 0.05);

--pr-shadow-md:
        0 8px 24px rgba(16, 24, 40, 0.10);

--pr-shadow-lg:
        0 20px 48px rgba(16, 24, 40, 0.14);

--pr-radius-sm: 8px;
--pr-radius-md: 14px;
--pr-radius-lg: 22px;

--pr-content-width: 1120px;

--pr-transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;

}

/* =========================================================
2. Grundseite
========================================================= */

html {
min-height: 100%;
background-color: #eaf1f8;
}

body {
min-height: 100vh;
margin: 0;

color: var(--pr-color-text);
font-family:
        Inter,
        "Noto Sans",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

line-height: 1.55;

background:
        radial-gradient(
                circle at 10% 10%,
                rgba(21, 94, 239, 0.18),
                transparent 34rem
        ),
        radial-gradient(
                circle at 90% 20%,
                rgba(14, 147, 132, 0.14),
                transparent 30rem
        ),
        linear-gradient(
                145deg,
                #edf4fb 0%,
                #dfeaf5 48%,
                #eef5f8 100%
        );

background-attachment: fixed;

}

/* Dezente dekorative Fläche im Hintergrund */

body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;

background:
        linear-gradient(
                120deg,
                rgba(255, 255, 255, 0.38),
                rgba(255, 255, 255, 0.08)
        );

}

/* =========================================================
3. Hauptcontainer
========================================================= */

.container,
.container-fluid {
position: relative;
}

.fruity .survey-container,
.survey-container,
#outerframeContainer,
.outerframe {
width: min(
calc(100% - 2rem),
var(--pr-content-width)
);

margin-inline: auto;

}

/* =========================================================
4. Glassmorphism-Flächen
========================================================= */

.group-container,
.question-container,
.welcome-container,
.completed-wrapper,
.survey-list,
.card,
.panel,
.alert {
background: var(--pr-glass-background);
border: 1px solid var(--pr-glass-border);
border-radius: var(--pr-radius-lg);

box-shadow:
        var(--pr-shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);

backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);

}

/* Fallback für Browser ohne backdrop-filter */

@supports not (
(backdrop-filter: blur(1px)) or
(-webkit-backdrop-filter: blur(1px))
) {
.group-container,
.question-container,
.welcome-container,
.completed-wrapper,
.survey-list,
.card,
.panel,
.alert {
background: rgba(255, 255, 255, 0.94);
}
}

/* =========================================================
5. Fragengruppen
========================================================= */

.group-container {
margin-block: 1.5rem;
padding: clamp(1.25rem, 3vw, 2.25rem);
}

.group-title,
.group-name,
.survey-name {
color: var(--pr-color-text);
font-weight: 700;
letter-spacing: -0.025em;
margin-top: 2.5rem;
}

.group-description,
.survey-description {
color: var(--pr-color-text-muted);
}

/* =========================================================
6. Einzelne Fragen
========================================================= */

.question-container {
margin-block: 0.9rem;
padding: clamp(1rem, 2vw, 1.35rem);

background: var(--pr-glass-background-strong);
border-radius: var(--pr-radius-md);

box-shadow:
        var(--pr-shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);

transition: var(--pr-transition);

}

.question-container:hover {
border-color: rgba(21, 94, 239, 0.22);
box-shadow:
0 12px 30px rgba(16, 24, 40, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.question-title-container,
.question-text {
color: var(--pr-color-text);
}

.question-text {
font-size: 1.05rem;
font-weight: 650;
line-height: 1.45;
}

.question-help-container,
.question-help,
.ls-questionhelp {
color: var(--pr-color-text-muted);
font-size: 0.825rem;
margin-top: 0.2rem;
margin-bottom: 0.45rem;
line-height: 1.35;
}

/* =========================================================
7. Formulare
========================================================= */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
min-height: 42px;
padding: 0.6rem 0.8rem;

color: var(--pr-color-text);
background: rgba(255, 255, 255, 0.84);

border: 1px solid rgba(52, 64, 84, 0.22);
border-radius: var(--pr-radius-sm);

box-shadow:
        var(--pr-shadow-sm),
        inset 0 1px 2px rgba(16, 24, 40, 0.03);

transition: var(--pr-transition);

}

textarea.form-control,
textarea {
min-height: 105px;
resize: vertical;
}

.form-control:hover,
.form-select:hover,
input:hover,
textarea:hover,
select:hover {
border-color: rgba(21, 94, 239, 0.42);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
color: var(--pr-color-text);
background: #ffffff;

border-color: var(--pr-color-primary);

box-shadow:
        0 0 0 4px rgba(21, 94, 239, 0.16),
        var(--pr-shadow-sm);

outline: none;

}

/* =========================================================
8. Checkboxen und Radiobuttons
========================================================= */

.form-check-input {
width: 1.2rem;
height: 1.2rem;
margin-top: 0.1rem;

border: 1px solid rgba(52, 64, 84, 0.35);

transition: var(--pr-transition);

}

.form-check-input:checked {
background-color: var(--pr-color-primary);
border-color: var(--pr-color-primary);
}

.form-check-input:focus {
border-color: var(--pr-color-primary);
box-shadow: 0 0 0 4px rgba(21, 94, 239, 0.16);
}

.form-check-label,
.radio-item label,
.checkbox-item label {
color: var(--pr-color-text);
line-height: 1.35;
}

/* =========================================================
9. Buttons
========================================================= */

.btn {
min-height: 44px;
padding: 0.65rem 1.15rem;

font-weight: 650;
border-radius: var(--pr-radius-sm);

transition: var(--pr-transition);

}

.btn:hover {
transform: translateY(-1px);
}

.btn:active {
transform: translateY(0);
}

.btn-primary,
.ls-move-next-btn,
.ls-move-submit-btn {
color: #ffffff;
background:
linear-gradient(
135deg,
var(--pr-color-primary),
#2970ff
);

border-color: transparent;

box-shadow:
        0 8px 18px rgba(21, 94, 239, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);

}

.btn-primary:hover,
.ls-move-next-btn:hover,
.ls-move-submit-btn:hover {
color: #ffffff;
background:
linear-gradient(
135deg,
var(--pr-color-primary-hover),
var(--pr-color-primary)
);

box-shadow:
        0 10px 22px rgba(21, 94, 239, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);

}

.btn-secondary,
.btn-outline-secondary,
.ls-move-previous-btn {
color: var(--pr-color-secondary);
background: rgba(255, 255, 255, 0.72);

border-color: rgba(52, 64, 84, 0.22);

box-shadow:
        var(--pr-shadow-sm),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);

}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.ls-move-previous-btn:hover {
color: var(--pr-color-text);
background: rgba(255, 255, 255, 0.94);
border-color: rgba(52, 64, 84, 0.35);
}

/* =========================================================
11. Fortschrittsanzeige
========================================================= */

.progress {
height: 10px;

overflow: hidden;

background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;

box-shadow: inset 0 1px 3px rgba(16, 24, 40, 0.08);

}

.progress-bar {
background:
linear-gradient(
90deg,
var(--pr-color-primary),
var(--pr-color-accent)
);

border-radius: 999px;

}

/* =========================================================
12. Meldungen und Validierung
========================================================= */

.alert {
padding: 1rem 1.15rem;
border-radius: var(--pr-radius-md);
}

.alert-danger,
.emtip.error,
.invalid-feedback {
color: var(--pr-color-danger);
}

.alert-success {
color: var(--pr-color-success);
}

.has-error .form-control,
.form-control.is-invalid {
border-color: var(--pr-color-danger);
box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.12);
}

/* =========================================================
13. Barrierefreiheit
========================================================= */

a {
color: var(--pr-color-primary);
text-underline-offset: 0.18em;
}

a:hover {
color: var(--pr-color-primary-hover);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid rgba(21, 94, 239, 0.5);
outline-offset: 3px;
}

/* =========================================================

/* =========================================================
15. Reduzierte Animation
========================================================= */

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}

/* =========================================================
16. Feinschliff für das Personalrat-Theme
========================================================= */

/* ---------------------------------------------------------
Inaktive Umfrage / allgemeine Systemhinweise
--------------------------------------------------------- */

.alert-warning {
color: #533f03;
background: rgba(255, 250, 230, 0.88);
border-color: rgba(181, 113, 8, 0.22);

box-shadow:
        0 12px 28px rgba(71, 45, 5, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);

}

.alert-warning .btn-close {
opacity: 0.55;
}

.alert-warning .btn-close:hover,
.alert-warning .btn-close:focus {
opacity: 0.85;
}

/* ---------------------------------------------------------
Umfragetitel und Einleitung
--------------------------------------------------------- */

.survey-name {
margin-top: 1.5rem;
margin-bottom: 1rem;

font-size: clamp(1.8rem, 3vw, 2.5rem);
line-height: 1.2;
text-align: center;

}

.survey-description,
.survey-welcome,
.number-of-questions {
max-width: 760px;
margin-inline: auto;

color: var(--pr-color-text-muted);

}

/* ---------------------------------------------------------
Gruppenüberschriften kompakter gestalten
--------------------------------------------------------- */

.group-container {
padding-top: clamp(1.25rem, 2.5vw, 2rem);
}

.group-title,
.group-name {
margin-top: 0;
margin-bottom: 1.5rem;

font-size: clamp(1.45rem, 2.4vw, 2rem);
line-height: 1.25;
text-align: center;

}

/* ---------------------------------------------------------
Fragekarten mit etwas stärkerem Glaseffekt
--------------------------------------------------------- */

.question-container {
background: rgba(255, 255, 255, 0.82);
border-color: rgba(255, 255, 255, 0.64);
}

.question-container:hover {
background: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------------------------
Abstände innerhalb der Fragen
--------------------------------------------------------- */

.question-title-container {
margin-bottom: 0.45rem;
}

.question-text {
margin-bottom: 0.2rem;
line-height: 1.35;
}

.answer-container {
margin-top: 0.55rem;
}

/* ---------------------------------------------------------
Auswahloptionen besser anklickbar machen
--------------------------------------------------------- */

.checkbox-item,
.radio-item,
.form-check {
position: relative;

margin-bottom: 0.15rem;
padding: 0.3rem 0.45rem;

border-radius: var(--pr-radius-sm);

transition: var(--pr-transition);

}

.checkbox-item:hover,
.radio-item:hover,
.form-check:hover {
background: rgba(21, 94, 239, 0.06);
}

.checkbox-item label,
.radio-item label,
.form-check-label {
cursor: pointer;
}

/* ---------------------------------------------------------
Matrizen
--------------------------------------------------------- */

.table-responsive {
overflow-x: auto;
overscroll-behavior-inline: contain;

border: 1px solid rgba(52, 64, 84, 0.12);
border-radius: var(--pr-radius-sm);

background: rgba(255, 255, 255, 0.62);

box-shadow: var(--pr-shadow-sm);

}

table {
margin-bottom: 0;
}

.table > :not(caption) > * > * {
padding: 0.7rem 0.8rem;
vertical-align: middle;

border-color: rgba(52, 64, 84, 0.12);

}

.table thead th {
color: var(--pr-color-text);
font-weight: 650;

background: rgba(234, 241, 248, 0.85);

}

.table tbody tr {
transition: background-color 140ms ease;
}

.table tbody tr:hover {
background: rgba(21, 94, 239, 0.045);
}

/* =========================================================
18. Fester Behörden-Header
========================================================= */

:root {
--pr-agency-bar-height: 34px;
--pr-navbar-height: 92px;
--pr-header-height: calc(
var(--pr-agency-bar-height) + var(--pr-navbar-height)
);
--pr-header-content-width: 1320px;
}

body {
padding-top: calc(var(--pr-header-height) + 1.25rem);
}

#outerframeContainer,
.outerframe,
#main-col,
main {
scroll-margin-top: calc(var(--pr-header-height) + 1rem);
}

.pr-site-header {
z-index: 1030;
width: 100%;
}

.pr-site-header .pr-agency-bar,
.pr-site-header .navbar {
position: relative;
inset: auto;
}

/* Behördenleiste */

.pr-agency-bar {
min-height: var(--pr-agency-bar-height);
padding: 0.4rem 1.25rem;

color: #ffffff;
background:
        linear-gradient(
                90deg,
                #062b5c 0%,
                #08427f 55%,
                #062b5c 100%
        );

border-bottom: 1px solid rgba(255, 255, 255, 0.14);

}

.pr-agency-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;

width: min(calc(100% - 1rem), var(--pr-header-content-width));
margin-inline: auto;

}

.pr-agency-bar__identity {
display: flex;
align-items: center;
min-width: 0;
}

.pr-agency-bar__authority {
font-size: 0.82rem;
font-weight: 700;
white-space: nowrap;
}

.pr-agency-bar__separator {
width: 1px;
height: 16px;
margin-inline: 0.85rem;
background: rgba(255, 255, 255, 0.55);
}

.pr-agency-bar__slogan {
overflow: hidden;

font-size: 0.8rem;
font-weight: 450;
text-overflow: ellipsis;
white-space: nowrap;

opacity: 0.92;

}

.pr-agency-bar__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;

color: #ffffff;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;

}

.pr-agency-bar__link:hover,
.pr-agency-bar__link:focus-visible {
color: #ffffff;
text-decoration: underline;
}

/* Hauptnavigation */

.pr-site-header .navbar {
min-height: var(--pr-navbar-height);
padding-block: 0.8rem;

background: rgba(255, 255, 255, 0.88);
border-bottom: 1px solid rgba(15, 46, 86, 0.10);

box-shadow:
        0 10px 30px rgba(16, 24, 40, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);

backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);

}

.pr-site-header .navbar > .container,
.pr-site-header .navbar > .container-fluid {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 1rem;

width: min(calc(100% - 2rem), var(--pr-header-content-width));
min-height: auto;
margin-inline: auto;
padding-inline: 0;

}

/* Menübutton */

.pr-site-header .navbar-toggler,
#navbar-toggler,
.navbar-toggle,
.btn-navbar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;

width: 42px;
min-width: 42px;
height: 42px;
min-height: 42px;
margin-right: 0.25rem;
padding: 0;

color: #17324d;
background: rgba(255, 255, 255, 0.64);

border: 1px solid rgba(23, 50, 77, 0.16);
border-radius: 10px;

box-shadow:
        0 2px 8px rgba(16, 24, 40, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);

transition: var(--pr-transition);

}

.pr-site-header .navbar-toggler:hover {
color: var(--pr-color-primary);
background: rgba(255, 255, 255, 0.92);
border-color: rgba(21, 94, 239, 0.28);
transform: translateY(-1px);
}

.pr-site-header .navbar-toggler:focus {
box-shadow: 0 0 0 4px rgba(21, 94, 239, 0.16);
}

.navbar-toggler-icon {
width: 1.25rem;
height: 1.25rem;
background-size: 1.25rem;
}

/* Logo und Behördenname */

.pr-agency-brand,
.navbar-brand {
display: inline-flex;
align-items: center;
gap: 0.85rem;
flex: 0 1 auto;

min-width: 0;
margin-right: auto;
padding: 0;

color: #0f2742;
text-decoration: none;

}

.pr-agency-brand:hover,
.pr-agency-brand:focus,
.navbar-brand:hover,
.navbar-brand:focus {
color: #0f2742;
}

.pr-agency-brand__logo {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}

.pr-agency-logo,
.navbar-brand img {
display: block;
flex: 0 0 auto;

width: auto;
max-width: 150px;
height: 58px;
object-fit: contain;

}

.pr-agency-title {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.1;
}

.pr-agency-title__eyebrow {
margin-bottom: 0.2rem;

color: var(--pr-color-text-muted);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.045em;
text-transform: uppercase;

}

.pr-agency-title__name {
color: #102a47;
font-size: clamp(1.1rem, 1.7vw, 1.45rem);
font-weight: 750;
letter-spacing: -0.02em;
}

.pr-agency-title__department {
margin-top: 0.15rem;

color: var(--pr-color-text-muted);
font-size: 0.86rem;
font-weight: 500;

}

/* Header-Links */

.pr-header-actions {
display: flex;
align-items: center;
margin-left: auto;
}

.pr-header-action,
.pr-header-links > li > a,
.pr-header-links .nav-link,
.pr-header-links .dropdown-toggle,
.navbar a[href*="save"],
.navbar a[href*="load"],
.navbar a[href*="resume"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;

min-height: 42px;
padding: 0.55rem 0.75rem;

color: #174f9c;
font-size: 0.88rem;
font-weight: 650;
line-height: 1.2;
text-decoration: none;

background: transparent;
border: 1px solid transparent;
border-radius: 9px;

transition: var(--pr-transition);

}

.pr-header-action:hover,
.pr-header-links > li > a:hover,
.pr-header-links .nav-link:hover,
.pr-header-links .dropdown-toggle:hover,
.navbar a[href*="save"]:hover,
.navbar a[href*="load"]:hover,
.navbar a[href*="resume"]:hover {
color: #0b3f85;
background: rgba(21, 94, 239, 0.07);
border-color: rgba(21, 94, 239, 0.12);
}

.pr-header-links {
display: flex;
align-items: center;
gap: 0.25rem;
margin-left: auto;
}

.pr-header-links > li {
display: flex;
align-items: center;
}

/* Nur ein eventuell verbliebenes altes LimeSurvey-Logo ausblenden */
.logo-container:not(.pr-agency-brand__logo) img[alt="LimeSurvey"] {
display: none !important;
}

/* =========================================================
19. Hinweisbox
========================================================= */

.alert {
position: relative;
z-index: 1;

width: min(calc(100% - 2rem), var(--pr-content-width));
margin: 0 auto 1.5rem;
padding: 1rem 3rem 1rem 1.15rem;

}

.alert .btn-close {
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
}

/* =========================================================
20. Untere Navigation
========================================================= */

.navigator,
#navigator-container,
.navigator-wrapper {
position: relative;

display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;

width: min(calc(100% - 2rem), var(--pr-content-width));
min-height: 72px;
margin: 1.75rem auto 3rem;
padding: 0.85rem 1rem;

background: rgba(255, 255, 255, 0.76);
border: 1px solid rgba(255, 255, 255, 0.62);
border-radius: var(--pr-radius-md);

box-shadow:
        0 14px 32px rgba(16, 24, 40, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);

backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);

}

.navigator .row,
#navigator-container .row,
.navigator-wrapper .row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;

width: 100%;
margin: 0;

}

.navigator [class*="col-"],
#navigator-container [class*="col-"],
.navigator-wrapper [class*="col-"] {
width: auto;
padding: 0;
}

.ls-move-previous-btn {
margin-right: auto;
}

.ls-move-next-btn,
.ls-move-submit-btn,
button[name="move"][value="movesubmit"] {
min-width: 120px;
min-height: 46px;
margin-left: auto;
padding-inline: 1.4rem;

font-size: 0.95rem;
font-weight: 700;
border-radius: 10px;

}

/* =========================================================
21. Responsive Anpassungen
========================================================= */

@media (max-width: 991.98px) {
:root {
--pr-agency-bar-height: 30px;
--pr-navbar-height: 82px;
}

body {
    padding-top: calc(var(--pr-header-height) + 1rem);
}

.pr-agency-bar {
    padding-block: 0.32rem;
    padding-inline: 0.75rem;
}

.pr-agency-bar__inner {
    width: 100%;
}

.pr-agency-bar__authority {
    font-size: 0.75rem;
}

.pr-agency-bar__slogan {
    font-size: 0.73rem;
}

.pr-site-header .navbar {
    padding-block: 0.6rem;
}

.pr-site-header .navbar > .container,
.pr-site-header .navbar > .container-fluid {
    width: calc(100% - 1.5rem);
    gap: 0.7rem;
}

.pr-agency-logo,
.navbar-brand img {
    max-width: 50px;
    height: 48px;
}

.pr-agency-title__department {
    display: none;
}

}

@media (max-width: 767.98px) {
:root {
--pr-navbar-height: 78px;
}

body {
    padding-top: calc(var(--pr-header-height) + 1rem);
    background-attachment: scroll;
}



.pr-agency-bar__separator,
.pr-agency-bar__slogan {
    display: none;
}

.pr-site-header .navbar > .container-fluid {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 0.6rem;
}

.pr-site-header .navbar-toggler {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

.pr-agency-brand,
.navbar-brand {
    grid-column: 2;
    grid-row: 1;

    gap: 0.6rem;
    margin: 0;
}

.pr-agency-logo,
.navbar-brand img {
    max-width: 42px;
    height: 42px;
}

.pr-agency-title__eyebrow,
.pr-agency-title__department {
    display: none;
}

.pr-agency-title__name {
    font-size: 1rem;
}

.pr-header-actions {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
}

.pr-header-action {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
}

.pr-header-action span:last-child {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#navbar {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}

.pr-header-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    margin-top: 0.6rem;
    padding: 0.65rem;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(52, 64, 84, 0.10);
    border-radius: 12px;

    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.13);
}

.pr-header-links > li,
.pr-header-links > li > a,
.pr-header-links .nav-link,
.pr-header-links .dropdown-toggle {
    width: 100%;
}

.pr-header-links > li > a,
.pr-header-links .nav-link,
.pr-header-links .dropdown-toggle {
    justify-content: flex-start;
}

.alert {
    width: calc(100% - 1.5rem);
    margin-bottom: 1.25rem;
    padding: 1rem 2.75rem 1rem 1rem;
}

.table-responsive table {
    min-width: 680px;
}

.navigator,
#navigator-container,
.navigator-wrapper {
    flex-direction: column;
    align-items: stretch;

    width: calc(100% - 1.5rem);
    min-height: auto;
    margin: 1rem auto 1.5rem;
    padding: 0.75rem;
}

.navigator .row,
#navigator-container .row,
.navigator-wrapper .row {
    flex-direction: column;
    align-items: stretch;
}

.navigator .btn,
#navigator-container .btn,
.navigator-wrapper .btn {
    width: 100%;
    margin: 0;
}

}

@media (max-width: 575.98px) {
.pr-agency-bar__authority {
max-width: 75%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.pr-site-header .navbar > .container-fluid {
    grid-template-columns: 40px minmax(0, 1fr) auto;
}

.pr-site-header .navbar-toggler,
#navbar-toggler,
.navbar-toggle,
.btn-navbar {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
}

.pr-agency-logo,
.navbar-brand img {
    max-width: 40px;
    height: 40px;
}

.pr-agency-title__name {
    display: -webkit-box;
    overflow: hidden;

    font-size: 0.95rem;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

}

/* =========================================================
22. Primärer Aktionsbutton
========================================================= */

.ls-move-submit-btn,
.ls-move-next-btn,
.btn-primary {

min-width: 150px;
min-height: 48px;

padding: 0.75rem 1.6rem;

color: #ffffff;
font-size: 0.95rem;
font-weight: 650;
letter-spacing: .015em;

background: #155eef;

border: 1px solid #155eef;
border-radius: 10px;

box-shadow:
        0 6px 14px rgba(21,94,239,.18);

transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;

}

/* Hover */

.ls-move-submit-btn:hover,
.ls-move-next-btn:hover,
.btn-primary:hover {

color: #ffffff;

background: #0f57ea;
border-color: #0f57ea;

box-shadow:
        0 8px 18px rgba(21,94,239,.24);

transform: translateY(-1px);

}

/* Aktiv */

.ls-move-submit-btn:active,
.ls-move-next-btn:active,
.btn-primary:active {

background: #0a49cb;
border-color: #0a49cb;

transform: translateY(0);

box-shadow:
        0 3px 8px rgba(21,94,239,.18);

}

/* Tastaturbedienung */

.ls-move-submit-btn:focus-visible,
.ls-move-next-btn:focus-visible,
.btn-primary:focus-visible {

outline: none;

box-shadow:
        0 0 0 4px rgba(21,94,239,.18),
        0 6px 14px rgba(21,94,239,.18);

}

/* Deaktiviert */

.ls-move-submit-btn:disabled,
.ls-move-next-btn:disabled,
.btn-primary:disabled {

background: #94a3b8;
border-color: #94a3b8;

box-shadow: none;

cursor: not-allowed;

}

/* =========================================================
23. Umfragebeschreibung
========================================================= */

.survey-description,
.survey-welcome,
.survey-description *,
.survey-welcome * {

color: var(--pr-color-text-muted) !important;

font-size: 1.05rem;
font-weight: 400;
line-height: 1.6;

text-align: center;

max-width: 760px;

margin: 0.65rem auto 1.5rem;

}

/* Links innerhalb der Beschreibung */

.survey-description a,
.survey-welcome a {

color: var(--pr-color-primary);
font-weight: 500;
text-decoration: underline;

}

.survey-description a:hover,
.survey-welcome a:hover {

color: var(--pr-color-primary-hover);

}

/* =========================================================
Mehr Abstand zwischen Header und Umfrage
========================================================= */

.survey-name {
margin-top: 2.5rem;
}

/* Falls oberhalb eine Warnung oder Beschreibung angezeigt wird */

.alert:first-child {
margin-top: 1.5rem;
}

.survey-description,
.survey-welcome {
margin-bottom: 2.25rem;
}

.alert-warning::before {

content: "ℹ";

display: inline-flex;
align-items: center;
justify-content: center;

width: 28px;
height: 28px;

margin-right: .9rem;

font-size: 1rem;
font-weight: 700;

color: #8a6500;

background: rgba(255,255,255,.55);

border-radius: 50%;

}

/* =========================================================
Abschlussseite / Completed Wrapper
========================================================= */

.completed-wrapper {
margin-top: 40px;

padding: 1.5rem 1.75rem;

color: var(--pr-color-text);
font-size: 1rem;
line-height: 1.6;

text-align: left;

}

/* Absätze innerhalb des Abschlussbereichs */

.completed-wrapper p {
margin: 0 0 0.85rem;
}

.completed-wrapper p:last-child {
margin-bottom: 0;
}

/* Überschriften innerhalb des Abschlussbereichs */

.completed-wrapper h1,
.completed-wrapper h2,
.completed-wrapper h3,
.completed-wrapper h4 {
margin-top: 0;
margin-bottom: 0.75rem;

color: var(--pr-color-text);
line-height: 1.3;

}

/* Links innerhalb des Abschlussbereichs */

.completed-wrapper a {
color: var(--pr-color-primary);
font-weight: 600;
}

.completed-wrapper a:hover {
color: var(--pr-color-primary-hover);
}

/* =========================================================
   FINALE ANPASSUNGEN – LANDKREIS BAMBERG
   ========================================================= */


/* ---------------------------------------------------------
   1. Antwortoptionen:
      Hover nur hinter dem Text, nicht über die ganze Zeile
   --------------------------------------------------------- */

.checkbox-item,
.radio-item,
.form-check {
    position: relative;
    margin-bottom: 0.15rem;
    padding: 0;
    background: transparent;
    border-radius: var(--pr-radius-sm);
    transition: none;
}

.checkbox-item:hover,
.radio-item:hover,
.form-check:hover {
    background: transparent;
}

.checkbox-item label,
.radio-item label,
.form-check-label {
    display: inline;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    color: var(--pr-color-text);
    line-height: 1.35;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        color 160ms ease;
}

.checkbox-item label:hover,
.radio-item label:hover,
.form-check-label:hover {
    background: rgba(21, 94, 239, 0.08);
}


/* ---------------------------------------------------------
   2. Landkreis-Bamberg-Logo:
      größer und präsenter im Header
   --------------------------------------------------------- */

.pr-agency-logo,
.navbar-brand img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 185px;
    height: 72px;
    object-fit: contain;
}


/* ---------------------------------------------------------
   3. Fachbereich / Abteilung im Header
      Die Klasse ist bereits für den späteren Twig-Einbau
      vorbereitet.
   --------------------------------------------------------- */

.pr-agency-title__department {
    display: block;
    margin-top: 0.15rem;
    color: var(--pr-color-text-muted);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   4. Navigationsbuttons:
      größere und besser lesbare Schrift
   --------------------------------------------------------- */

#navigator-container .btn,
.navigator .btn,
.navigator-wrapper .btn,
.ls-move-next-btn,
.ls-move-previous-btn,
.ls-move-submit-btn {
    min-height: 48px;
    padding: 0.7rem 1.5rem;
    font-family: inherit;
    font-size: 1rem !important;
    font-weight: 650 !important;
    line-height: 1.25;
    letter-spacing: 0;
    border-radius: 10px;
}


/* Weiter / Absenden */

#navigator-container .ls-move-next-btn,
#navigator-container .ls-move-submit-btn,
.navigator .ls-move-next-btn,
.navigator .ls-move-submit-btn,
.navigator-wrapper .ls-move-next-btn,
.navigator-wrapper .ls-move-submit-btn {
    min-width: 150px;
}


/* Zurück */

#navigator-container .ls-move-previous-btn,
.navigator .ls-move-previous-btn,
.navigator-wrapper .ls-move-previous-btn {
    min-width: 120px;
}


/* ---------------------------------------------------------
   5. Tablet:
      Logo etwas kompakter, Fachbereich weiterhin sichtbar
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    .pr-agency-logo,
    .navbar-brand img {
    max-width: 185px;
    height: 72px;
    }

    .pr-agency-title__department {
        display: block;
    }

    #navigator-container .btn,
    .navigator .btn,
    .navigator-wrapper .btn,
    .ls-move-next-btn,
    .ls-move-previous-btn,
    .ls-move-submit-btn {
        min-height: 50px;
        font-size: 1rem !important;
    }
}


/* ---------------------------------------------------------
   6. Smartphone:
      Logo noch etwas kompakter
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    .pr-agency-logo,
    .navbar-brand img {
    max-width: 185px;
    height: 72px;
    }
}


/* ---------------------------------------------------------
   7. Sehr kleine Smartphones:
      Fachbereich ausblenden, damit der Header nicht
      zu breit wird
   --------------------------------------------------------- */

@media (max-width: 575.98px) {

    .pr-agency-logo,
    .navbar-brand img {
    max-width: 185px;
    height: 72px;
    }

    .pr-agency-title__department {
        display: none;
    }
}