/* Servicebereich */
.service-page{
    --s-blue:#005691;
    --s-blue-dark:#003f6b;
    --s-red:#dc3545;
    --s-text:#1a2530;
    --s-muted:#4a5568;
    --s-border:#dfe7ef;
    --s-soft:#f5f8fb;
    max-width:1200px;
    margin:0 auto;
    padding:20px 15px 56px;
    box-sizing:border-box;
    color:var(--s-text);
    font-family:var(--font-body,'Inter',Arial,sans-serif);
    line-height:1.6;
}

/* Seitenkopf */
.service-page-hero{
    position:relative;
    left:50%;
    right:50%;
    display:flex;
    align-items:center;
    width:100vw;
    min-height:clamp(360px,46vw,510px);
    margin-right:-50vw;
    margin-bottom:40px;
    margin-left:-50vw;
    overflow:hidden;
    border-bottom:1px solid #e2e8f0;
    background:
        linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.88) 30%,rgba(255,255,255,.42) 52%,rgba(255,255,255,.08) 76%),
        url('/bilder/css/header_hero_1200.webp') center center/cover no-repeat;
}
.service-page-hero-inner{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:clamp(54px,7vw,88px) 20px;
}
.service-page-hero-kicker{
    display:block;
    margin-bottom:12px;
    color:#dc3545;
    font-family:var(--font-display,'Oswald',Arial,sans-serif);
    letter-spacing:.12em;
    text-transform:uppercase;
}
.service-page-hero h1{
    margin:0 0 18px;
    color:#005691;
    font-family:var(--font-display,'Oswald',Arial,sans-serif);
    font-size:clamp(2.4rem,5.6vw,4.8rem);
    text-transform:uppercase;
}
.service-page-hero-divider,
.service-title-divider{
    width:78px;
    height:5px;
    border-radius:999px;
    background:var(--s-red,#dc3545);
}
.service-page-hero-divider{margin:0 0 20px}
.service-page-hero p{
    max-width:650px;
    color:#1a2530;
    font-weight:700;
    line-height:1.65;
}
.service-header-section{
    margin-bottom:30px;
    text-align:center;
}
.service-header-section h2{
    margin:0 0 15px;
    color:var(--s-blue);
    font-family:var(--font-display,'Oswald',Arial,sans-serif);
    font-size:clamp(1.9rem,4vw,3rem);
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.service-title-divider{
    width:80px;
    margin:0 auto 20px;
}
.service-header-section p{
    max-width:820px;
    margin:0 auto;
    color:var(--s-muted);
    font-size:16px;
}

/* Hervorgehobener Service-Link */
.service-feature{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:0 0 28px;
    padding:22px 24px;
    border:1px solid var(--s-border);
    border-left:5px solid var(--s-blue);
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 28px rgba(15,23,42,.06);
}
.service-feature-copy{min-width:0}
.service-feature-kicker{
    display:block;
    margin-bottom:4px;
    color:var(--s-red);
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.service-feature h2{margin:0 0 5px;color:var(--s-blue-dark)}
.service-feature p{margin:0;color:var(--s-muted)}
.service-feature-link{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:11px 17px;
    border-radius:10px;
    background:var(--s-blue);
    color:#fff;
    font-weight:850;
    text-decoration:none;
}
.service-feature-link:hover{background:var(--s-blue-dark);color:#fff}
.service-feature-link:focus-visible{outline:3px solid rgba(220,53,69,.35);outline-offset:3px}

/* Suche */
.service-search-wrap{
    position:relative;
    max-width:820px;
    margin:26px auto 34px;
}
.service-search-label{
    display:block;
    margin-bottom:8px;
    color:var(--s-blue);
    font-family:var(--font-display,'Oswald',Arial,sans-serif);
    font-weight:900;
    letter-spacing:.05em;
    text-align:left;
    text-transform:uppercase;
}
.service-search-control{position:relative}
.service-search-input{
    width:100%;
    padding:15px 48px 15px 16px;
    box-sizing:border-box;
    border:2px solid var(--s-border);
    border-radius:10px;
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    color:var(--s-text);
    font-size:16px;
}
.service-search-input:focus{
    border-color:var(--s-blue);
    outline:3px solid rgba(220,53,69,.22);
    outline-offset:2px;
}
.service-search-clear{
    position:absolute;
    top:50%;
    right:8px;
    width:38px;
    height:38px;
    transform:translateY(-50%);
    border:0;
    border-radius:999px;
    background:rgba(0,86,145,.08);
    color:var(--s-blue);
    font-size:20px;
    font-weight:900;
    cursor:pointer;
}
.service-search-hint{margin:7px 0 0;color:var(--s-muted);font-size:.88rem}

/* Kategorien und Inhaltsbereich */
.service-layout{
    display:grid;
    grid-template-columns:minmax(235px,285px) minmax(0,1fr);
    gap:28px;
    align-items:start;
}
.service-category-nav{
    position:sticky;
    top:105px;
    overflow:hidden;
    border:1px solid var(--s-border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 28px rgba(15,23,42,.07);
}
.service-category-button{
    display:grid;
    grid-template-columns:32px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    width:100%;
    min-height:62px;
    padding:12px 14px;
    border:0;
    border-bottom:1px solid var(--s-border);
    background:#fff;
    color:var(--s-text);
    font:inherit;
    font-weight:850;
    text-align:left;
    cursor:pointer;
}
.service-category-button:last-child{border-bottom:0}
.service-category-button:hover{background:var(--s-soft)}
.service-category-button[aria-selected="true"]{
    background:linear-gradient(90deg,rgba(0,86,145,.13),#fff);
    box-shadow:inset 5px 0 0 var(--s-blue);
    color:var(--s-blue);
}
.service-category-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:8px;
    background:rgba(0,86,145,.09);
    color:var(--s-blue);
    font-weight:900;
}
.service-category-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
    height:32px;
    padding:0 8px;
    border-radius:999px;
    background:var(--s-soft);
    color:var(--s-blue);
    font-size:.86rem;
}
.service-panel{display:none}
.service-panel.is-active{display:block}
.service-panel-header{
    margin-bottom:16px;
    padding:0 0 16px;
    border-bottom:1px solid var(--s-border);
}
.service-panel-header h3{
    margin:0 0 6px;
    color:var(--s-blue);
    font-family:var(--font-display,'Oswald',Arial,sans-serif);
    font-size:clamp(1.7rem,3vw,2.3rem);
    letter-spacing:.03em;
    text-transform:uppercase;
}
.service-panel-header p{margin:0;color:var(--s-muted)}

/* Dokumentenliste */
.service-document-list{
    overflow:hidden;
    border:1px solid var(--s-border);
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.055);
}
.service-document-head,
.service-document{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) 96px 66px 194px;
    column-gap:14px;
    align-items:center;
    width:100%;
    box-sizing:border-box;
}
.service-document-head{
    padding:12px 16px;
    border-bottom:1px solid var(--s-border);
    background:#f7f9fc;
    color:#5b6573;
    font-size:.75rem;
    font-weight:850;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.service-document{
    min-height:76px;
    padding:14px 16px;
    border-bottom:1px solid var(--s-border);
}
.service-document:last-child{border-bottom:0}
.service-document:hover{background:#fbfcfe}
.service-document-main{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:12px;
    align-items:center;
    min-width:0;
}
.service-file-icon{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    width:42px;
    height:46px;
    border-radius:8px;
    background:rgba(220,53,69,.09);
    color:var(--s-red);
    font-family:var(--font-display,'Oswald',Arial,sans-serif);
    font-size:.72rem;
    font-weight:900;
}
.service-document-title,
.service-document-desc,
.service-document-meta,
.service-document-size{min-width:0}
.service-document-title h4{
    margin:0;
    overflow-wrap:break-word;
    color:var(--s-blue-dark);
    font:inherit;
    font-size:.98rem;
    font-weight:900;
    line-height:1.28;
    hyphens:auto;
}
.service-document-desc{
    overflow-wrap:break-word;
    color:var(--s-muted);
    font-size:.9rem;
    line-height:1.4;
}
.service-document-meta{
    overflow-wrap:break-word;
    color:var(--s-muted);
    font-size:.84rem;
    font-weight:750;
    line-height:1.35;
}
.service-document-size{white-space:nowrap}
.service-muted-dash{color:#9aa4b2}
.service-file-missing{color:#7a2730;font-size:.86rem;font-weight:800}
.service-document-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    min-width:0;
    white-space:nowrap;
}
.service-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:8px 10px;
    box-sizing:border-box;
    border-radius:7px;
    font-family:var(--font-display,'Oswald',Arial,sans-serif);
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.04em;
    text-decoration:none!important;
    text-transform:uppercase;
    white-space:nowrap;
}
.service-action-view{
    min-width:78px;
    border:1px solid var(--s-blue);
    background:#fff;
    color:var(--s-blue)!important;
}
.service-action-download{
    min-width:96px;
    border:1px solid var(--s-red);
    background:var(--s-red);
    color:#fff!important;
}
.service-action:hover,
.service-action:focus-visible{
    transform:translateY(-1px);
    outline:3px solid rgba(0,86,145,.2);
    outline-offset:2px;
}
.service-empty,
.service-no-results{
    padding:24px;
    border:1px dashed var(--s-border);
    border-radius:12px;
    background:var(--s-soft);
    color:var(--s-muted);
    font-weight:800;
    text-align:center;
}
.service-no-results{display:none}

/* Sichtbarkeit und Barrierefreiheit */
.service-sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    padding:0!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    border:0!important;
    white-space:nowrap!important;
}
.service-category-button:focus-visible,
.service-panel:focus-visible,
.service-search-clear:focus-visible{
    outline:3px solid rgba(0,86,145,.28);
    outline-offset:2px;
}
.service-search-clear[hidden],
.service-no-results[hidden],
.service-document[hidden]{display:none!important}

/* Ohne JavaScript bleiben sämtliche Kategorien sichtbar. */
html:not(.js) .service-layout{display:block}
html:not(.js) .service-category-nav{display:none}
html:not(.js) .service-panel{display:block!important;margin-bottom:32px}

/* Mit JavaScript arbeitet die Seite als Kategorienansicht. */
html.js .service-panel{display:none}
html.js .service-panel.is-active{display:block}
html.js .service-panel[hidden],
html.js .service-category-button[hidden]{display:none!important}

/* Mittlere Desktopbreite */
@media(max-width:1180px) and (min-width:981px){
    .service-layout{grid-template-columns:minmax(220px,250px) minmax(0,1fr);gap:20px}
    .service-document-head,
    .service-document{
        grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr) 88px 60px 178px;
        column-gap:10px;
    }
    .service-document-head{padding:11px 12px;font-size:.7rem}
    .service-document{padding:13px 12px}
    .service-document-main{grid-template-columns:40px minmax(0,1fr);gap:10px}
    .service-file-icon{width:38px;height:42px}
    .service-document-title h4{font-size:.92rem}
    .service-document-desc,
    .service-document-meta{font-size:.8rem}
    .service-action{padding:7px 8px;font-size:.7rem}
    .service-action-view{min-width:70px}
    .service-action-download{min-width:88px}
}

/* Tablet */
@media(max-width:980px){
    .service-layout{grid-template-columns:1fr}
    .service-category-nav{
        position:relative;
        top:auto;
        display:flex;
        overflow-x:auto;
        border-radius:10px;
        scroll-snap-type:x proximity;
    }
    .service-category-button{
        grid-template-columns:28px auto auto;
        min-width:max-content;
        border-right:1px solid var(--s-border);
        border-bottom:0;
        scroll-snap-align:start;
    }
    .service-category-button[aria-selected="true"]{box-shadow:inset 0 -4px 0 var(--s-blue)}
    .service-document-head{display:none}
    .service-document{
        grid-template-columns:minmax(0,1fr) auto;
        gap:10px 16px;
        padding:16px;
    }
    .service-document-main,
    .service-document-desc{grid-column:1 / -1}
    .service-document-meta,
    .service-document-size{display:block;font-size:.84rem}
    .service-document-meta::before,
    .service-document-size::before{
        content:attr(data-label) ': ';
        color:#667085;
        font-weight:700;
    }
    .service-document-actions{
        grid-column:1 / -1;
        justify-content:flex-start;
        flex-wrap:wrap;
        padding-top:2px;
    }
}

@media(max-width:768px){
    .service-page-hero{
        align-items:flex-end;
        min-height:clamp(300px,72vw,420px);
        margin-bottom:30px;
        background:
            linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.92) 62%,rgba(255,255,255,.98) 100%),
            url('/bilder/css/header_hero_1200.webp') center center/cover no-repeat;
    }
    .service-page-hero-inner{padding:76px 18px 36px}
    .service-page{padding:12px 16px 44px}
}

@media(max-width:700px){
    .service-feature{align-items:stretch;flex-direction:column;padding:19px}
    .service-feature-link{width:100%;box-sizing:border-box}
}

/* Smartphone */
@media(max-width:560px){
    .service-document{
        grid-template-columns:1fr;
        gap:10px;
        padding:14px;
    }
    .service-document-main,
    .service-document-desc,
    .service-document-meta,
    .service-document-size,
    .service-document-actions{grid-column:1}
    .service-document-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }
    .service-document-actions .service-action:only-of-type{grid-column:1 / -1}
    .service-action{width:100%}
}

@media(prefers-reduced-motion:reduce){
    .service-action{transition:none}
}

@media(forced-colors:active){
    .service-category-button[aria-selected="true"],
    .service-action,
    .service-search-input{border:2px solid currentColor}
    .service-page-hero-divider,
    .service-title-divider{background:CanvasText}
}

@media print{
    header,
    nav,
    footer,
    .site-header,
    .site-footer,
    .service-page-hero,
    .service-search-wrap,
    .service-category-nav,
    .service-document-actions{display:none!important}
    .service-page{max-width:none;margin:0;padding:0;color:#000}
    .service-layout{display:block}
    .service-panel{display:block!important;margin-bottom:20px}
    .service-document-list{box-shadow:none}
    .service-document{display:block;break-inside:avoid;border-bottom:1px solid #bbb}
    .service-file-icon,
    .service-document-meta{display:none}
}