/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #F0F3F5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Navigation */
header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
}

header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 70px;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo img {
    height: 55px;
    width: auto;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #80b7e0;
}

/* Hero Section */
.hero {
    background:
        radial-gradient(ellipse 70% 60% at 50% 120%, rgba(90, 40, 130, 0.55) 0%, transparent 60%),
        linear-gradient(160deg, #04254a 0%, #06183f 38%, #140832 72%, #0a0420 100%);
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 70px;
    position: relative;
    overflow: hidden;
}

/* Animierter Hintergrund – verschwommene, leuchtende Lichtstreifen (nahtlose Schleife) */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.streak {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.7;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

/* Blau */
.streak-1 {
    width: 60vw;
    height: 32vh;
    left: -10vw;
    top: 10%;
    background: radial-gradient(ellipse at center, rgba(56, 150, 255, 0.9) 0%, rgba(56, 150, 255, 0) 70%);
    transform: rotate(-18deg);
    animation: streak-drift-1 11s ease-in-out infinite;
    animation-delay: -2s;
}

/* Pink / Magenta */
.streak-2 {
    width: 55vw;
    height: 28vh;
    right: -12vw;
    top: 28%;
    background: radial-gradient(ellipse at center, rgba(232, 60, 160, 0.85) 0%, rgba(232, 60, 160, 0) 70%);
    transform: rotate(14deg);
    animation: streak-drift-2 13s ease-in-out infinite;
    animation-delay: -5s;
}

/* Violett */
.streak-3 {
    width: 65vw;
    height: 30vh;
    left: 5vw;
    bottom: 6%;
    background: radial-gradient(ellipse at center, rgba(140, 70, 255, 0.85) 0%, rgba(140, 70, 255, 0) 70%);
    transform: rotate(-8deg);
    animation: streak-drift-3 15s ease-in-out infinite;
    animation-delay: -9s;
}

/* Helles Cyan-Blau Highlight */
.streak-4 {
    width: 40vw;
    height: 18vh;
    left: 25vw;
    top: 38%;
    background: radial-gradient(ellipse at center, rgba(120, 200, 255, 0.8) 0%, rgba(120, 200, 255, 0) 70%);
    transform: rotate(22deg);
    animation: streak-drift-4 9s ease-in-out infinite;
    animation-delay: -4s;
}

/* Tiefes Pink-Violett unten */
.streak-5 {
    width: 50vw;
    height: 26vh;
    right: 8vw;
    bottom: -4%;
    background: radial-gradient(ellipse at center, rgba(190, 50, 200, 0.8) 0%, rgba(190, 50, 200, 0) 70%);
    transform: rotate(-12deg);
    animation: streak-drift-5 12s ease-in-out infinite;
    animation-delay: -7s;
}

@keyframes streak-drift-1 {
    0%   { transform: translate(0, 0) rotate(-18deg) scale(1); opacity: 0.5; }
    50%  { transform: translate(22vw, 10vh) rotate(-4deg) scale(1.35); opacity: 0.9; }
    100% { transform: translate(0, 0) rotate(-18deg) scale(1); opacity: 0.5; }
}

@keyframes streak-drift-2 {
    0%   { transform: translate(0, 0) rotate(14deg) scale(1.05); opacity: 0.45; }
    50%  { transform: translate(-24vw, 8vh) rotate(2deg) scale(1.4); opacity: 0.85; }
    100% { transform: translate(0, 0) rotate(14deg) scale(1.05); opacity: 0.45; }
}

@keyframes streak-drift-3 {
    0%   { transform: translate(0, 0) rotate(-8deg) scale(1); opacity: 0.45; }
    50%  { transform: translate(18vw, -12vh) rotate(6deg) scale(1.3); opacity: 0.8; }
    100% { transform: translate(0, 0) rotate(-8deg) scale(1); opacity: 0.45; }
}

@keyframes streak-drift-4 {
    0%   { transform: translate(0, 0) rotate(22deg) scale(0.9); opacity: 0.4; }
    50%  { transform: translate(-18vw, 12vh) rotate(38deg) scale(1.3); opacity: 0.8; }
    100% { transform: translate(0, 0) rotate(22deg) scale(0.9); opacity: 0.4; }
}

@keyframes streak-drift-5 {
    0%   { transform: translate(0, 0) rotate(-12deg) scale(1.1); opacity: 0.45; }
    50%  { transform: translate(20vw, -14vh) rotate(-28deg) scale(1.45); opacity: 0.85; }
    100% { transform: translate(0, 0) rotate(-12deg) scale(1.1); opacity: 0.45; }
}

/* Sanfter dunkler Verlauf, damit Logo & Text gut lesbar bleiben */
.hero-grain {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 55% at center 42%, rgba(4, 8, 30, 0.55) 0%, rgba(4, 8, 30, 0) 70%);
}



/* Die Regeln für .hero-wordmark und .hero-slogan sind entfallen: seit das Logo
   als Bild im Hero steht, gibt es beide Elemente nicht mehr. Mit ihnen entfielen
   die einzigen Verwendungen von Montserrat 500 und 800 — die beiden Schriftdateien
   sind deshalb ebenfalls entfernt. */
.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#typewriter {
    color: #80b7e0;
    border-right: 2px solid #80b7e0;
    padding-right: 2px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { border-color: #80b7e0; }
    51%, 100% { border-color: transparent; }
}

.hero-content p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    color: #ffffff;
    opacity: 0.95;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.cta-button {
    display: inline-block;
    padding: 14px 32px;
    background: #fff;
    color: #003b66;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cta-secondary {
    background: #003b66;
    color: #fff;
    border: 2px solid #003b66;
}

.cta-secondary:hover {
    background: #004d80;
    border-color: #004d80;
}

.cta-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.5);
}

.cta-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #ffffff;
    opacity: 0.95;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-tagline {
    font-size: 1.4rem;
    font-weight: 600;
    color: #80b7e0;
    margin-bottom: 30px;
}

/* Sections */
section {
    padding: 80px 0;
}

/* Für h1 gab es lange keine Regel: auf den sieben Seiten ohne eigenen Kontext
   (Übersicht, fünf Detailseiten, Über uns, Kontakt) fiel die Hauptüberschrift auf
   den Browser-Default zurück — linksbündig inmitten einer zentrierten Seite und
   mit 32px kleiner als die h2 darunter. Hero und Rechtsseiten bringen je eigene
   Regeln mit (0,1,1) und bleiben davon unberührt; beide setzen ihre Farbe selbst,
   sonst würde das #003b66 hier die weiße Hero-Überschrift überschreiben —
   geerbte Werte verlieren immer gegen eine direkt zutreffende Regel. */
h1 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 50px;
    color: #003b66;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #003b66;
}

/* Services Section */
.services {
    background: #fff;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.services-grid .service-card:nth-child(4),
.services-grid .service-card:nth-child(5) {
    grid-column: span 1;
}

.services-grid::after {
    content: '';
    grid-column: span 1;
}

@media (min-width: 769px) {
    .services-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .services-grid .service-card:nth-child(1),
    .services-grid .service-card:nth-child(2),
    .services-grid .service-card:nth-child(3) {
        grid-column: span 2;
    }

    .services-grid .service-card:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .services-grid .service-card:nth-child(5) {
        grid-column: 4 / span 2;
    }

    .services-grid::after {
        display: none;
    }
}

.service-card {
    background: #F0F3F5;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 59, 102, 0.1), transparent);
    transition: left 0.6s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.2) rotate(5deg);
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* Beide Ebenen, weil die Startseite h3 und die Übersichtsseite h2 verwendet —
   dort ist der Kartentitel unter der Seiten-H1 semantisch eine H2. Ohne den
   h2-Selektor greift die generische h2-Regel (2.5rem) und der Titel wird vom
   overflow:hidden der Karte abgeschnitten. */
.service-card h2,
.service-card h3 {
    font-family: 'Montserrat', sans-serif;
    color: #003b66;
    font-size: 1.4rem;
    margin-bottom: 15px;
    line-height: 1.2;
    min-height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.service-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Portfolio Section */
.portfolio {
    background: #F0F3F5;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.by-syventa {
    font-size: 0.8em;
    font-weight: 400;
    color: #888;
    font-style: italic;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.tag {
    background: rgba(128, 183, 224, 0.2);
    color: #003b66;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.project-link {
    color: #003b66;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.project-link:hover {
    color: #80b7e0;
}

/* Contact Section */
/* Kein eigener weißer Grund mehr: die Kontaktkarten sind weiß und standen dadurch
   auf gleicher Fläche. Der Abschnitt erbt jetzt das helle Grau des Bodys, wie auf
   allen anderen Seiten mit Karten. */
.contact {
    background: transparent;
}

.contact-info {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.contact-info p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #666;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    font-size: 1.1rem;
}

.contact-item strong {
    color: #003b66;
}

.contact-item a {
    color: #003b66;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: #80b7e0;
}

/* Footer */
footer {
    background: #003b66;
    color: #F0F3F5;
    text-align: center;
    padding: 30px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 50px;
        transition: left 0.3s ease;
        gap: 40px;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu li {
        width: 100%;
        text-align: center;
    }
    
    .nav-menu a {
        display: block;
        padding: 15px;
        font-size: 1.2rem;
    }
    
    .hero-content h2 {
        font-size: 2.2rem;
    }
    
    .hero-content p {
        font-size: 1.1rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .services-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-details {
        text-align: left;
    }
    
    section {
        padding: 50px 0;
    }
}

@media (max-width: 480px) {
    .hero-content h2 {
        font-size: 1.8rem;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .service-card {
        padding: 25px 20px;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Einblenden nur, wenn JavaScript läuft. Ohne JavaScript ist die Seite sofort sichtbar. */
.js body {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.js body.loaded {
    opacity: 1;
}

/* Scroll Animations */
.service-card,
.contact-info,
.step-card {
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.js .service-card,
.js .contact-info,
.js .step-card {
    opacity: 0;
    transform: translateY(30px);
}

.js .service-card.animate-in,
.js .contact-info.animate-in,
.js .step-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
}

/* Muss NACH der Basisregel stehen: ein @media erhöht die Spezifität nicht, eine
   frühere `display: flex` würde von dem `display: none` oben überstimmt — dann
   ist das Klappmenü auf keiner Breite mehr zu öffnen. */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #003b66;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
    z-index: 1000;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: #80b7e0;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 59, 102, 0.4);
}

/* Additional Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.cta-button:hover {
    animation: pulse 0.6s ease-in-out;
}

/* 3-Säulen Übersicht */
/* Process Section - So arbeitet Syventa */
.process-section {
    background: #fff;
    padding: 80px 0;
}

.section-intro {
    text-align: center;
    font-size: 1.15rem;
    color: #555;
    max-width: 800px;
    margin: -30px auto 50px;
    line-height: 1.7;
}

/* Der Sonderfall `h1 + .section-intro` von vorhin ist entfallen: seit h1 eine
   eigene Regel mit margin-bottom: 50px hat, rechnet das -30px oben dagegen genauso
   auf wie gegen h2 und ergibt überall dieselben 20px Abstand. */

/* ---------------------------------------------------------------------------
   Leistungs-Detailseiten

   Der Header ist `position: fixed` und 70px hoch; er nimmt keinen Platz im Fluss
   ein. Alle übrigen Seiten beginnen mit einem <section>, das über `section
   { padding: 80px 0 }` genug Luft mitbringt. Die Detailseiten beginnen dagegen mit
   einem <article class="leistung-detail">, für das es keine Regel gab — der Inhalt
   startete bei y=0 und der Brotkrumenpfad lag vollständig unter dem Header.
   --------------------------------------------------------------------------- */
.leistung-detail {
    padding: 80px 0;
}

/* Der Pfad hatte ebenfalls keine Regel: durch den `*`-Reset stand die <ol> ohne
   Innenabstand untereinander statt nebeneinander. */
.breadcrumb {
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.breadcrumb li + li::before {
    content: "›";
    margin-right: 8px;
    color: #8a97a3;
}

.breadcrumb [aria-current="page"] {
    color: #555;
}

/* Der übrige Inhalt der Detailseiten hatte ebenfalls keine einzige Regel: Listen
   und Absätze liefen über die volle Containerbreite am linken Rand, während alle
   Überschriften zentriert sind — rund 150 Zeichen je Zeile und optisch losgelöst.

   Eine gemeinsame Textspalte von 800px (dieselbe Breite wie .section-intro) bindet
   sie an das zentrierte Layout an. Der Text bleibt darin linksbündig: zentrierte
   Fließtexte und Listen fallen beim Umbruch auseinander und sind schlechter zu
   lesen — zentriert wird der Block, nicht die Zeile. */
.leistung-liste {
    max-width: 800px;
    margin: 0 auto 50px;
    padding-left: 24px;
    text-align: left;
}

.leistung-liste li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.leistung-liste li::marker {
    color: #005a9e;
}

/* Die Technologien sind Schlagworte, keine Fließliste — als Chips statt als
   Aufzählung gesetzt. */
.technologien {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.technologien li {
    background: #fff;
    border: 1px solid #d7dee4;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 0.95rem;
    color: #003b66;
}

.leistung-zielgruppe {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: left;
    line-height: 1.7;
    color: #555;
}

/* Hier stand eine Regel für den Standort-Absatz auf „Über uns". Sie ist entfallen,
   seit der Standort auf beiden Seiten in der gemeinsamen .standort-karte steckt. */

.faq {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0 0;
}

.faq-eintrag {
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 16px;
    text-align: left;
}

.faq-eintrag h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #003b66;
    margin-bottom: 10px;
}

.faq-eintrag p {
    color: #555;
    line-height: 1.7;
}

.leistung-cta {
    text-align: center;
    margin-top: 40px;
}

/* .cta-button ist für den dunklen Hero gezeichnet — weiß auf dunklem Verlauf. Auf
   dem hellen Seitengrund (#F0F3F5) verliert ein weißer Button seine Kontur; die
   wichtigste Handlungsaufforderung der Seite wird hier deshalb gefüllt gesetzt. */
.leistung-cta .cta-button {
    background: #003b66;
    color: #ffffff;
    border-color: #003b66;
}

.leistung-cta .cta-button:hover {
    background: #004d80;
}

.steps-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.step-card {
    flex: 1;
    max-width: 260px;
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 16px;
    padding: 40px 24px 30px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 59, 102, 0.13);
    border-color: #80b7e0;
}

.step-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #003b66, #005a9e);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 3px 10px rgba(0, 59, 102, 0.35);
}

.step-emoji {
    font-size: 2.4rem;
    margin-bottom: 14px;
    transition: transform 0.3s ease;
}

.step-card:hover .step-emoji {
    transform: scale(1.15);
}

.step-card h3 {
    font-family: 'Montserrat', sans-serif;
    color: #003b66;
    font-size: 1.05rem;
    margin-bottom: 10px;
    line-height: 1.3;
}

.step-card p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.step-arrow {
    flex-shrink: 0;
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.step-arrow svg {
    display: block;
    opacity: 0.65;
    transition: opacity 0.3s ease;
}

/* Dieselbe Zeichnung, an der Waagrechten gespiegelt. */
.step-arrow--runter svg {
    transform: scaleY(-1);
}

.steps-row:hover .step-arrow svg {
    opacity: 1;
}

/* Die Pfeile zeichnen sich beim Hereinscrollen von links nach rechts. Beide Pfade
   tragen pathLength="1", damit Kurve und Spitze trotz unterschiedlicher Länge mit
   derselben dasharray arbeiten. Nur unter `.js`: ohne JavaScript wird die Klasse
   `animate-in` nie gesetzt, dann müssen die Pfeile von Anfang an sichtbar sein. */
.js .step-arrow path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.js .step-arrow.animate-in path {
    animation: pfeil-zeichnen 0.5s ease forwards;
}

.js .step-arrow.animate-in .step-arrow-spitze {
    animation-delay: 0.35s;
}

@keyframes pfeil-zeichnen {
    to { stroke-dashoffset: 0; }
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt die Pfeile ohne Zeichen-Effekt. */
@media (prefers-reduced-motion: reduce) {
    .js .step-arrow path,
    .js .step-arrow.animate-in path {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* Testimonials / Kundenprojekte Section */
/* Testimonials / Kundenprojekte */
.testimonials-section {
    background: #F0F3F5;
    padding: 80px 0;
}

.testimonial-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.testimonial-track {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonial-slide {
    flex: 0 0 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 450px;
}

.testimonial-left {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #003b66 0%, #005a9e 100%);
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.testimonial-left::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.testimonial-screenshot {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    max-width: 420px;
    width: 100%;
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease;
}

.testimonial-slide:hover .testimonial-screenshot {
    transform: scale(1.02);
}

.testimonial-screenshot img {
    width: 100%;
    height: auto;
    display: block;
}

/* Placeholder wenn kein Screenshot vorhanden */
.testimonial-screenshot-placeholder {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 16/10;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

.testimonial-screenshot-placeholder span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
}

.testimonial-right {
    padding: 50px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-right h3 {
    font-family: 'Montserrat', sans-serif;
    color: #003b66;
    font-size: 1.5rem;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid #80b7e0;
    display: inline-block;
}

.testimonial-detail {
    margin-bottom: 20px;
}

.testimonial-detail h4 {
    font-family: 'Montserrat', sans-serif;
    color: #003b66;
    font-size: 1.05rem;
    margin-bottom: 8px;
    font-weight: 700;
}

.testimonial-detail p {
    color: #555;
    line-height: 1.7;
    font-size: 0.95rem;
}

.testimonial-highlights {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
    padding: 16px 20px;
    background: #f8f9fa;
    border-radius: 10px;
}

.testimonial-highlights span {
    color: #333;
    font-size: 0.92rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.testimonial-links {
    margin-top: 20px;
}

.testimonial-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    background: linear-gradient(135deg, #003b66, #005a9e);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 22px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.testimonial-links a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 59, 102, 0.3);
}

/* Controls */
.testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 0 25px;
    background: #fff;
}

.testimonial-prev,
.testimonial-next {
    background: #003b66;
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-prev:hover,
.testimonial-next:hover {
    background: #005a9e;
    transform: scale(1.1);
}

.testimonial-dots {
    display: flex;
    gap: 10px;
}

.testimonial-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d0d5da;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.testimonial-dot.active {
    background: #003b66;
    transform: scale(1.2);
}

.testimonial-dot:hover {
    background: #80b7e0;
}

.ideal-for,
.resource-goal {
    text-align: center;
    margin-top: 40px;
    padding: 25px;
    background: rgba(0, 59, 102, 0.05);
    border-radius: 15px;
    border-left: 4px solid #003b66;
}

.ideal-for p,
.resource-goal p {
    font-size: 1.1rem;
    color: #333;
    margin: 0;
}

/* Resources Section */
.resources {
    background: #fff;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
}

.resource-card {
    background: #F0F3F5;
    padding: 30px 25px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.resource-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.resource-card h3 {
    font-family: 'Montserrat', sans-serif;
    color: #003b66;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.resource-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Why Syventa Section */
.why-section {
    background: linear-gradient(135deg, #003b66 0%, #005580 100%);
    color: #fff;
    padding: 80px 0;
}

.why-section h2 {
    color: #fff;
}

/* `.why-headline` ist entfallen — im Markup gibt es kein solches Element. */

.why-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.why-content p {
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Die fünf Einträge sind die Fragen, mit denen Syventa in ein Projekt startet —
   keine Mängelliste. Sie trugen ein rotes ✗ als Marker, was das Gegenteil nahelegt
   (Rest einer früheren Fassung des Abschnitts).

   Als nummeriertes Kachelraster geben sie dem Abschnitt die Struktur, die er als
   einziger auf der Seite nicht hatte, und greifen das Kartenvokabular der übrigen
   Abschnitte auf — hier durchscheinend, weil der Grund ein Verlauf ist. */
.why-list {
    list-style: none;
    padding: 0;
    margin: 36px 0;
    /* Flexbox statt Grid: bei fünf Kacheln in drei Spalten bleibt eine Reihe
       angebrochen. `justify-content: center` zentriert im Grid nur das Spaltenraster
       als Ganzes — die zwei übrigen Kacheln säßen weiter in Spalte 1 und 2. Im
       umbrechenden Flexcontainer zentriert sich dagegen jede Reihe für sich. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    text-align: left;
    counter-reset: why-frage;
}

.why-list li {
    flex: 1 1 240px;
    max-width: 280px;
    counter-increment: why-frage;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 22px 20px;
    font-size: 1.05rem;
    line-height: 1.5;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.why-list li:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(128, 183, 224, 0.55);
}

.why-list li::before {
    content: counter(why-frage, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #80b7e0;
}

/* Zwei !important sind hier entfallen: `.why-content p` (0,1,1) schlug die alte
   Regel `.why-solution` (0,1,0). Mit dem Elternselektor gewinnt sie regulär. */
.why-content .why-solution {
    font-size: 1.5rem;
    font-weight: 700;
    color: #80b7e0;
    margin-top: 30px;
    margin-bottom: 24px;
}

/* About Section */
.about {
    background: #F0F3F5;
    padding: 80px 0;
}

.about-headline {
    text-align: center;
    font-size: 1.4rem;
    color: #80b7e0;
    font-weight: 600;
    margin-bottom: 30px;
    margin-top: -30px;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-intro {
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 40px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.team-member {
    background: #fff;
    padding: 35px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.team-member h2,
.team-member h3 {
    font-family: 'Montserrat', sans-serif;
    color: #003b66;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.team-role {
    color: #80b7e0;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 15px;
}

.team-member p:last-child {
    color: #666;
    line-height: 1.6;
}

.about-mission {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    color: #003b66;
    padding: 25px;
    background: rgba(0, 59, 102, 0.05);
    border-radius: 15px;
}

/* Contact Updates */
.contact-intro {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto 44px;
    color: #333;
    line-height: 1.7;
    text-align: center;
}

/* Zwei gleichwertige Karten nebeneinander statt einer Abfolge von Überschriften
   und Absätzen über die volle Breite. Unter ~800px untereinander. */
.kontakt-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
    max-width: 940px;
    margin: 0 auto;
    align-items: start;
}

.kontakt-karte {
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 16px;
    padding: 32px 30px;
    text-align: left;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Ohne eigene Regel greift die generische h2 (2.5rem, zentriert, 50px Abstand
   darunter) — in einer Karte deutlich zu groß. */
.kontakt-karte h2 {
    font-size: 1.35rem;
    text-align: left;
    margin-bottom: 18px;
}

.kontakt-fragen {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.kontakt-fragen li {
    padding: 9px 0 9px 28px;
    position: relative;
    color: #555;
}

.kontakt-fragen li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #005a9e;
}

.contact-promise {
    margin: 0;
    font-style: italic;
    color: #666;
    line-height: 1.6;
}

/* <address> ist voreingestellt kursiv, und die alte Regel machte daraus zusätzlich
   einen Flex-Container in Spaltenrichtung — dadurch wurde jede durch <br> getrennte
   Zeile zu einem eigenen Flex-Item mit 15px Abstand, die Anschrift fiel auseinander. */
.contact-details {
    display: block;
    font-style: normal;
    line-height: 1.7;
    margin-bottom: 18px;
}

.contact-details strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #003b66;
}

.kontakt-mail {
    margin-bottom: 22px;
    font-weight: 600;
}

.kontakt-gebiet {
    padding-top: 18px;
    border-top: 1px solid #e9edf1;
    color: #555;
    line-height: 1.6;
}

.kontakt-gebiet strong {
    color: #003b66;
}

.kontakt-cta {
    margin-top: 24px;
}

/* Der Abschnitt hat weißen Grund — ein weißer .cta-button verschwindet darauf
   vollständig. Wie auf den Detailseiten und beim Standort gefüllt gesetzt. */
.kontakt-cta .cta-button {
    background: #003b66;
    color: #ffffff;
    border-color: #003b66;
}

.kontakt-cta .cta-button:hover {
    background: #004d80;
}

/* Responsive Updates */
@media (max-width: 992px) {
    .steps-row {
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
    }

    .step-card {
        flex: 0 0 calc(50% - 40px);
        max-width: none;
    }

    .step-arrow {
        display: none;
    }

    .team-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto 40px;
    }
}

@media (max-width: 768px) {
    .step-card {
        flex: 0 0 100%;
        max-width: 400px;
    }

    .testimonial-slide {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .testimonial-left {
        padding: 25px;
    }

    .testimonial-right {
        padding: 25px;
    }

    .testimonial-right h3 {
        font-size: 1.3rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-tagline {
        font-size: 1.1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .cta-button {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .why-headline {
        font-size: 1.4rem;
    }

    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .resources-grid {
        grid-template-columns: 1fr;
    }
}

/* Startseite: Claim, Zielgruppen, Standort */
/* Der Claim ist ein <p> in .hero-content. `.hero-content p` (0,1,1) schlägt ein
   einfaches `.hero-claim` (0,1,0) unabhängig von der Quellreihenfolge — deshalb
   ist der Elternselektor hier nötig, sonst bleiben font-size, text-shadow und
   margin-bottom wirkungslos. */
.hero-content .hero-claim {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.8rem;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}

/* Muss NACH der Regel darüber stehen — gleiche Spezifität, ein @media erhöht sie
   nicht. Ohne das Herunterskalieren umbricht der Claim auf dem Telefon auf drei
   Zeilen und schiebt Überschrift und Buttons aus dem sichtbaren Bereich. */
@media (max-width: 768px) {
    .hero-content .hero-claim {
        font-size: 1.8rem;
    }
}

.zielgruppen,
.standort {
    padding: 80px 0;
}

/* Vier Einträge in einem auto-fit-Raster ergaben auf dem Desktop 3+1 — eine Reihe
   mit einer einzelnen Karte und großer Lücke daneben. Zwei feste Spalten teilen
   vier Einträge sauber auf und lassen zugleich längere, ruhigere Zeilen zu.
   Unter 720px bricht es auf eine Spalte um. */
.zielgruppen-liste {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
    max-width: 900px;
    margin: 32px auto 0;
}

/* Symbol und Text nebeneinander statt untereinander: das Auge findet die Zeile
   schneller, und die Karte wirkt als eine Einheit statt als Textblock. */
.zielgruppen-liste li {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 14px;
    padding: 22px 24px;
    line-height: 1.55;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.zielgruppen-liste li:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 59, 102, 0.12);
    border-color: #80b7e0;
}

.zielgruppen-liste strong {
    color: #003b66;
}

.zielgruppen-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F0F3F5;
    font-size: 1.6rem;
    line-height: 1;
}

/* Standort-Karte, gemeinsam von Startseite und „Über uns" genutzt. Greift die
   Kartenoptik der Prozess-Schritte und FAQ-Einträge auf, damit die Seite ein
   Formenvokabular behält statt für jeden Abschnitt ein neues zu erfinden. */
.standort-karte {
    max-width: 620px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 16px;
    padding: 40px 32px 36px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.standort-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 16px;
}

/* <address> ist voreingestellt kursiv — für eine Anschrift unerwünscht. */
.standort-adresse {
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    /* 700, nicht 600: Montserrat 600 wird nicht geladen — der Browser müsste
       das Gewicht sonst künstlich errechnen. */
    font-weight: 700;
    color: #003b66;
    line-height: 1.6;
    margin-bottom: 18px;
}

.standort-text {
    color: #555;
    line-height: 1.7;
    margin-bottom: 0;
}

.standort-cta {
    margin-top: 28px;
}

/* Wie auf den Detailseiten: .cta-button ist für den dunklen Hero gezeichnet und
   verliert auf hellem Grund seine Kontur. */
.standort-cta .cta-button {
    background: #003b66;
    color: #ffffff;
    border-color: #003b66;
}

.standort-cta .cta-button:hover {
    background: #004d80;
}

/* Die Karte ist zentriert, das Häkchen sitzt aber absolut am linken Rand des
   Listeneintrags — bei zentriertem Text klafft dazwischen eine Lücke. Die Liste
   ist deshalb linksbündig.

   Die Liste nimmt bewusst die volle Kartenbreite ein und wird NICHT nach ihrer
   Inhaltsbreite zentriert (`max-width: fit-content`): sonst beginnt jede Karte an
   einer anderen Stelle, je nachdem wie lang ihr längster Eintrag ist. Nebeneinander
   stehende Karten müssen dieselbe Kante haben. */
.qualifikationen {
    list-style: none;
    margin-top: 12px;
    text-align: left;
}

.qualifikationen li {
    padding: 4px 0 4px 22px;
    position: relative;
}

.qualifikationen li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #003b66;
    font-weight: 700;
}

/* Rechtsseiten (Impressum, Datenschutz) */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 100px 20px 50px;
    line-height: 1.8;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-top: 20px;
    margin-bottom: 40px;
}

.legal-content h1 {
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-align: center;
}

.legal-content h2 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: left;
}

.legal-content h3 {
    color: #2c3e50;
    font-size: 1.2rem;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
}

.legal-content p, .legal-content ul {
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.legal-content ul {
    padding-left: 30px;
}

.legal-content strong {
    color: #333;
}

.legal-content a {
    color: #005a9e;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.legal-content a:hover {
    color: #003b66;
}

.info-box {
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    padding: 15px;
    margin: 20px 0;
}
/* ---------------------------------------------------------------------------
   Links

   Bis hierher gab es keine globale a-Regel: alles, was nicht Navigation, Button
   oder .legal-content war, fiel auf das Browser-Blau (#0000EE) zurück — im Footer
   also blau auf dunkelblau. Betroffen waren Footer, Karten-Links, Brotkrumen und
   die E-Mail-Adresse auf /kontakt/.

   Die Basisregel steht bewusst am Dateiende und ist mit (0,0,1) die schwächste:
   .nav-menu a und .cta-button (je (0,1,1)) behalten ihre eigene Optik unabhängig
   von der Reihenfolge.
   --------------------------------------------------------------------------- */
a {
    color: #005a9e;
    text-decoration: underline;
    transition: color 0.3s ease;
}

a:hover {
    color: #003b66;
}

/* Karten-Links sind ein Call-to-Action, kein Fließtext-Link. */
.service-card a {
    color: #003b66;
    font-weight: 600;
    text-decoration: none;
}

/* Die ganze Karte ist klickbar.

   Die Karte trug schon immer `cursor: pointer` und hebt sich beim Überfahren an —
   klickbar war aber nur der Link darunter. Statt eines zweiten <a> um die Karte
   (das den Titel- und Fließtext in den Linknamen ziehen würde) spannt sich hier
   das ::before des vorhandenen Links über die gesamte Karte. Es bleibt genau ein
   Link mit genau einem Namen, und das aria-label beschreibt weiterhin das Ziel.

   ::after ist für den Pfeil belegt, deshalb ::before. Das z-index hebt die Fläche
   über den Glanzstreifen von .service-card::before.

   Nebeneffekt dieses Musters: Text in der Karte lässt sich nicht mehr markieren. */
.service-card a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Weil die Fläche zum Link gehört, greift `a:hover` beim Überfahren der ganzen
   Karte — Farbe und Pfeil reagieren dadurch auf die gesamte Fläche. Für die
   Tastatur bekommt die Karte den Fokusrahmen, nicht nur der kurze Linktext. */
.service-card a:focus-visible::before {
    outline: 2px solid #005a9e;
    outline-offset: -4px;
    border-radius: 15px;
}

/* Abstand über margin statt über ein Leerzeichen im content: bricht der Linktext
   auf eine neue Zeile um, würde das Leerzeichen am Zeilenanfang wegfallen und der
   Pfeil klebte am Wort. */
.service-card a::after {
    content: "→";
    display: inline-block;
    margin-left: 0.35em;
    transition: transform 0.3s ease;
}

.service-card a:hover {
    color: #005a9e;
}

.service-card a:hover::after {
    transform: translateX(4px);
}

/* Der Footer hat einen dunklen Grund (#003b66) und braucht den hellen Akzent. */
footer a {
    color: #80b7e0;
}

footer a:hover {
    color: #ffffff;
}

/* Querverweise auf verwandte Leistungen (Detailseiten) --------------------- */
.verwandte {
    max-width: 800px;
    margin: 0 auto;
    padding: 50px 0 0;
}

.verwandte-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.verwandte-liste a {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 14px;
    padding: 18px 20px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.verwandte-liste a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 59, 102, 0.12);
    border-color: #80b7e0;
}

.verwandte-icon {
    flex-shrink: 0;
    font-size: 1.7rem;
    line-height: 1;
}

.verwandte-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.verwandte-text strong {
    font-family: 'Montserrat', sans-serif;
    color: #003b66;
    line-height: 1.3;
}

.verwandte-text span {
    font-size: 0.93rem;
    color: #555;
    line-height: 1.5;
}

/* Fließtext-Block unter einer zentrierten Überschrift. Zentriert wird der Block,
   nicht die Zeile — zentrierte Absätze fallen beim Umbruch auseinander. */
.textblock {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.textblock p {
    line-height: 1.75;
    color: #555;
    margin-bottom: 18px;
}

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

/* Die generische h2-Regel bringt nur margin-bottom mit. Folgt eine Überschrift
   direkt auf einen Karten- oder Rasterblock, stoßen beide ohne Abstand
   aneinander — gemessen 0px. Bewusst über Nachbarselektoren statt über ein
   allgemeines margin-top an h2: das träfe auch alle Überschriften, die direkt
   unter einer H1 oder am Abschnittsanfang stehen, und würde dort Löcher reißen. */
.services-grid + h2,
.kontakt-raster + h2 {
    margin-top: 80px;
}

/* ---------------------------------------------------------------------------
   Logo in Kopfzeile und Hero
   --------------------------------------------------------------------------- */
.logo img {
    display: block;
}

/* Negativfassung auf dem dunklen Hero. Der Leuchtschein ersetzt den text-shadow,
   den die frühere Text-Wortmarke trug — bei einem Bild braucht es dafür
   drop-shadow, text-shadow greift nicht. */
.hero-logo {
    position: relative;
    z-index: 2;
    display: block;
    width: min(560px, 82vw);
    height: auto;
    margin: 0 auto 26px;
    filter:
        drop-shadow(0 0 60px rgba(128, 183, 224, 0.55))
        drop-shadow(0 4px 20px rgba(0, 0, 0, 0.4));
}

@media (max-width: 768px) {
    .hero-logo {
        width: min(340px, 78vw);
        margin-bottom: 20px;
    }
}