/* Leistungen: four uniform cards acting as tabs, with the detail opening
   FULL WIDTH beneath the row.

   The earlier version expanded each card in place, which made one column of a
   four-column grid three times taller than its neighbours. The row now never
   changes height; only the panel below it does.

   Progressive enhancement: without JavaScript, .service-tabs never gets the
   `is-enhanced` class, so every panel stays visible and the page reads as four
   headed sections. The tab buttons are only hidden once the script that makes
   them work has actually run. */

.service-tabs { margin-top: var(--space-xl); }

.service-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-md);
}

.service-card { display: flex; }

.service-tab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-lg);
    background: var(--steel-900);
    border: var(--hairline);
    border-top: 3px solid var(--steel-700);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.service-tab:hover { border-top-color: var(--accent); }
.service-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.service-tab.is-active {
    border-top-color: var(--accent);
    background: var(--steel-950);
}

.service-title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.service-teaser {
    display: block;
    margin-top: var(--space-xs);
    color: var(--text-on-dark-muted);
    font-size: var(--step--1);
}

/* Plus/minus marker */
.service-toggle {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
    border: 1px solid var(--accent);
    transition: background .2s ease;
}
.service-toggle::before,
.service-toggle::after {
    content: "";
    position: absolute;
    inset: 50% 5px auto 5px;
    height: 2px;
    background: var(--accent);
    transition: transform .25s ease, background .2s ease;
}
.service-toggle::after { transform: rotate(90deg); }

.service-tab.is-active .service-toggle { background: var(--accent); }
.service-tab.is-active .service-toggle::before,
.service-tab.is-active .service-toggle::after { background: #0d1a08; }
.service-tab.is-active .service-toggle::after { transform: rotate(0deg); }

/* The full-width panel */
.service-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-xl);
    align-items: start;
    margin-top: var(--space-md);
    padding: var(--space-lg);
    background: var(--steel-950);
    border: var(--hairline);
    border-top: 3px solid var(--accent);
}

/* Only once JS is running does the panel visibility become a choice. */
.service-tabs.is-enhanced .service-panel { display: none; }
.service-tabs.is-enhanced .service-panel.is-active {
    display: grid;
    animation: service-open .3s cubic-bezier(.22, .61, .36, 1);
}

@keyframes service-open {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.service-panel-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.service-panel-body h3 { font-size: var(--step-3); }
.service-detail { margin-top: var(--space-md); color: var(--text-on-dark-muted); }

.service-highlight {
    margin-top: var(--space-md);
    padding-left: var(--space-md);
    border-left: 2px solid var(--accent);
    color: var(--steel-100);
}

.service-points { list-style: none; margin-top: var(--space-lg); border-top: var(--hairline); }
.service-points li {
    padding: .5rem 0;
    border-bottom: var(--hairline);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--steel-300);
}
.service-points li:last-child { border-bottom: 0; }

.service-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }

@media (max-width: 860px) {
    .service-panel { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .service-tabs.is-enhanced .service-panel.is-active { animation: none; }
}

/* "bei Spezial das Titelbild vergrössern": bei dieser einen Leistung ist das
   Foto die Hauptsache. Die Bildspalte wird dafuer breiter als die Textspalte,
   statt schmaler, und der Rahmen etwas hoeher. */
/* Nur dort, wo das Feld ueberhaupt zweispaltig ist. Ohne die Abfrage
   ueberstimmt diese Regel (zwei Klassen) die Umbruchregel bei 860 px (eine
   Klasse), und der Bereich bliebe auf dem Telefon zweispaltig. */
@media (min-width: 861px) {
    .service-panel.bild-gross { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.service-panel.bild-gross .service-panel-media img { aspect-ratio: 1 / 1; }

/* Der Schlusssatz jeder Leistung: eigener Absatz, hervorgehoben. Er ist die
   Zusage an den Kunden, nicht Teil der Aufzaehlung davor. */
.service-slogan {
    display: block;
    margin-top: .55rem;
    font-weight: 600;
    color: var(--accent);
}