/********** Issler - auf Basis von CarServ (HTML Codex), umgebaut fuer Automobile Ralph Issler e.K. **********/

:root {
    --primary: #2A4B9A;        /* Issler-Blau, belegt aus der Logo-SVG */
    --secondary: #152653;      /* dunkles Blau fuer Baender */
    --signal: #FFD400;         /* Issler-Gelb, nur als Signal */
    --aktion: #D1000A;         /* Aktionsrot, sparsam */
    --light: #EEF1F7;
    --dark: #0F1726;
    --linie: #D6DDE9;

    --bs-primary: #2A4B9A;
    --bs-primary-rgb: 42, 75, 154;
}

body {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #515E78;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5 {
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    color: var(--dark);
    letter-spacing: -.015em;
}

.text-primary { color: var(--primary) !important; }
.bg-primary   { background-color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.bg-secondary  { background-color: var(--secondary) !important; }
.bg-light      { background-color: var(--light) !important; }
.border-primary { border-color: var(--primary) !important; }

.fw-medium { font-weight: 600 !important; }

a { text-decoration: none; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.back-to-top {
    position: fixed;
    display: none;
    right: 28px;
    bottom: 150px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}
#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Knoepfe ***/
.btn {
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .18s ease, background-color .18s, border-color .18s, color .18s;
    border-radius: 3px;
}
.btn:hover { transform: translateY(-2px); }
.btn.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.btn-primary:hover { background: #223E82; border-color: #223E82; color: #fff; }
.btn.btn-aktion { background: var(--aktion); border-color: var(--aktion); color: #fff; }
.btn.btn-aktion:hover { background: #B30009; border-color: #B30009; color: #fff; }
.btn.btn-outline-light:hover { border-color: var(--signal); color: #fff; background: transparent; }

.btn-square, .btn-sm-square, .btn-lg-square {
    padding: 0; display: flex; align-items: center; justify-content: center;
    font-weight: normal; border-radius: 3px;
}
.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }


/*** Infozeile ***/
.topbar { background: var(--primary); color: #fff; font-size: 13.5px; }
.topbar a { color: #fff; }
.topbar .trenner { opacity: .45; }
.topbar-mobil { background: var(--primary); color: #fff; font-size: 13px; }
.topbar-mobil a { color: #fff; }


/*** Kein Querlauf, auf keinem Geraet ***/
/* Bewusst KEIN overflow-x: hidden auf html oder body: das wuerde
   position: sticky fuer alle Kindelemente ausser Kraft setzen und die
   Navigationsleiste beim Scrollen mitlaufen lassen. Die Breiten sind
   stattdessen an der Quelle begrenzt. */
html, body { max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }


/*** Navigation ***/
.navbar-issler {
    background: var(--secondary);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.navbar-issler { padding-block: .75rem; }
.navbar-issler .navbar-brand { margin-right: 0; padding-block: 0; }
/* Logo-Stapel: vier Blaetter liegen deckungsgleich uebereinander, nur die
   Deckkraft wechselt. Die Buehne haelt das Seitenverhaeltnis fest, damit beim
   Wechsel nichts springt. */
.navbar-issler .navbar-brand .logo-stapel {
    position: relative; display: block;
    height: clamp(40px, 4.4vw, 56px);
    aspect-ratio: 300 / 101;
    max-width: 62vw;
    transition: height .22s ease;
}
.navbar-issler .navbar-brand .logo-blatt {
    position: absolute; inset: 0;
    height: 100%; width: 100%;
    object-fit: contain; object-position: left center;
    opacity: 0;
    transform: scale(.985);
    transition: opacity .55s ease, transform .55s ease;
    pointer-events: none;
}
.navbar-issler .navbar-brand .logo-blatt.sichtbar {
    opacity: 1; transform: none;
}
/* Nur das Grundlogo ist eine blaue SVG und muss aufgehellt werden.
   Die drei Bereichslogos liegen bereits in Weiss vor. */
.navbar-issler .navbar-brand .logo-blatt[data-bereich="grund"] {
    filter: brightness(0) invert(1);
}
.navbar-issler .navbar-brand .logo-wort {
    font-size: clamp(10px, 1vw, 12px); letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.62); border-left: 1px solid rgba(255,255,255,.25);
    padding-left: clamp(9px, 1.2vw, 14px); margin-left: clamp(9px, 1.2vw, 14px);
    white-space: nowrap;
    /* Breite der laengsten Variante, damit der Wechsel nichts verschiebt */
    min-width: 7.6em; display: inline-block;
}
.navbar-issler .navbar-brand .logo-wort-text {
    display: inline-block;
}
/* Beim Wechsel blendet das neue Wort kurz auf */
.navbar-issler .navbar-brand .logo-wort-text.wechselt {
    animation: wortAuf .42s ease both;
}
@keyframes wortAuf {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}
/* Beim Scrollen wird die Leiste etwas flacher, damit mehr Inhalt sichtbar bleibt */
.navbar-issler.geschrumpft { padding-block: .4rem; }
.navbar-issler.geschrumpft .navbar-brand .logo-stapel { height: clamp(34px, 3.4vw, 42px); }
@media (max-width: 575.98px) {
    .navbar-issler .navbar-brand .logo-stapel { height: 42px; }
    .navbar-issler.geschrumpft .navbar-brand .logo-stapel { height: 36px; }
}
.navbar-issler .nav-link {
    color: rgba(255,255,255,.82);
    font-size: 14.5px; font-weight: 500;
    padding: 10px 0; margin-right: 26px;
    position: relative;
}
.navbar-issler .nav-link:hover,
.navbar-issler .nav-link.active { color: #fff; }

/* mitlaufende Linie unter der Navigation */
.nav-linie {
    position: absolute; bottom: 0; height: 3px; border-radius: 2px;
    background: var(--signal); width: 0; left: 0;
    transition: left .34s cubic-bezier(.22,.7,.3,1), width .34s cubic-bezier(.22,.7,.3,1), opacity .2s;
    opacity: 0; pointer-events: none;
}
.nav-linie.sichtbar { opacity: 1; }
/* Der letzte Punkt braucht rechts keinen Abstand mehr. */
.navbar-issler .navbar-nav .nav-link:last-of-type { margin-right: 0; }

/* Zwischen 992 und 1199px wird die Leiste eng: Marke, sechs Punkte und der
   Anfrage-Knopf brauchen dort mehr Platz, als vorhanden ist. Abstaende und
   Innenabstand zurueckziehen, statt den Umbruchpunkt nach oben zu schieben. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-issler { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .navbar-issler .nav-link { margin-right: 14px; font-size: 13.5px; }
    .navbar-issler .navbar-brand .logo-stapel { height: clamp(38px, 4vw, 46px); }
    .navbar-issler .btn-aktion {
        margin-left: 1rem !important;
        padding-left: 1rem !important; padding-right: 1rem !important;
    }
}

@media (max-width: 991.98px) {
    .nav-linie { display: none; }
    .navbar-issler .nav-link { margin-right: 0; padding: 9px 0; }
    .navbar-issler .navbar-nav { border-top: 1px solid rgba(255,255,255,.15); padding-top: 10px; }
    .navbar-issler .nav-link.active { color: var(--signal); }
}


/*** Kopfbereich ***/
.carousel-caption { top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; }
.carousel-caption::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(21,38,83,.94) 0%, rgba(21,38,83,.80) 48%, rgba(21,38,83,.45) 100%);
}
.carousel-caption .inhalt { position: relative; z-index: 2; }
.carousel-item img { object-fit: cover; }
.hero-bild { width: 100%; height: clamp(430px, 66vh, 720px); object-fit: cover; }
.carousel-control-prev, .carousel-control-next { width: 8%; }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 2.6rem; height: 2.6rem; }
@media (max-width: 575.98px) {
    .hero-bild { height: clamp(400px, 76vh, 580px); }
    .carousel-caption .inhalt h1 { font-size: 2rem; }
    .carousel-caption .inhalt .fs-5 { font-size: 1rem !important; }
    .carousel-caption .btn { width: 100%; margin-bottom: 10px; }
    .carousel-control-prev, .carousel-control-next { display: none; }
}
@media (max-width: 991.98px) {
    .carousel-caption .inhalt { padding-block: 24px; }
}
.augenbraue { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--signal); font-weight: 600; }
.augenbraue-blau { color: var(--primary); }

@media (max-width: 768px) {
    #kopf-karussell .carousel-item { position: relative; min-height: 460px; }
    #kopf-karussell .carousel-item img { position: absolute; width: 100%; height: 100%; }
}


/*** Merkmale ***/
.merkmal { position: relative; }
.merkmal .kennung { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .14em; color: var(--signal); }
.merkmal + .merkmal::before {
    content: ""; position: absolute; left: 0; top: 18px; bottom: 18px;
    width: 1px; background: rgba(255,255,255,.22);
}
@media (max-width: 991.98px) {
    .merkmal + .merkmal::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
}


/*** Leistungskacheln, einheitliche Bildgroessen ***/
.kachel {
    background: #fff; border: 1px solid var(--linie); border-radius: 4px; overflow: hidden;
    height: 100%; display: flex; flex-direction: column;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kachel:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 10px 28px rgba(21,38,83,.09); }
.kachel-bild { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; flex: 0 0 auto; background: var(--light); }
.kachel-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kachel-text { padding: 22px 22px 26px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 9px; }
.kachel-text h4 { font-size: 19px; margin: 0; }
.kachel-text p { font-size: 14.5px; margin: 0; }
.strich { display: block; width: 30px; height: 3px; background: var(--signal); border-radius: 2px; }


/*** Bildrahmen mit festem Verhaeltnis ***/
.bild-3-2, .bild-4-3, .bild-3-4 { position: relative; width: 100%; overflow: hidden; border-radius: 4px; background: var(--light); }
.bild-3-2 { aspect-ratio: 3 / 2; }
.bild-4-3 { aspect-ratio: 4 / 3; }
.bild-3-4 { aspect-ratio: 3 / 4; }
.bild-3-2 img, .bild-4-3 img, .bild-3-4 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/*** Zahlen ***/
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; }
.zahl-feld { background: #fff; padding: 20px 18px; min-width: 0; }
.bg-light .zahl-feld { background: #fff; }
.zahl-feld b { display: block; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 29px; line-height: 1.08; color: var(--primary); font-variant-numeric: tabular-nums; }
.zahl-feld span { display: block; margin-top: 5px; font-size: 13px; color: #66728c; }


/*** Punkteliste ***/
.punkte { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.punkte li { position: relative; padding-left: 24px; font-size: 15.5px; }
.punkte li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 3px; background: var(--signal); border-radius: 2px; }


/*** Markenband, immer auf Weiss ***/
/* Die Logos sind in den Bilddateien bereits angeschnitten. Die Seite erzeugt
   deshalb keinen zusaetzlichen Ueberhang, sondern zentriert die Reihe sauber. */
.marken-band { background: #FFFFFF; color: var(--dark); }
.marken-band h2, .marken-band p { color: var(--dark); }
.marken-band .hinweis { color: #7b879f; font-size: 13px; }
.marken-reihe {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: clamp(12px, 2.6vw, 34px);
    margin-top: clamp(22px, 3vw, 34px);
}
.marken-reihe img {
    height: clamp(42px, 6.4vw, 78px);
    width: auto; max-width: 100%;
    flex: 0 0 auto;
    /* Ruhezustand leicht zurueckgenommen, beim Ueberfahren volle Farbe */
    filter: grayscale(.45) opacity(.78);
    transition: filter .32s ease, transform .32s cubic-bezier(.22, .7, .3, 1);
}
.marken-reihe img:hover {
    filter: grayscale(0) opacity(1) drop-shadow(0 10px 18px rgba(15, 23, 38, .22));
    transform: translateY(-7px) scale(1.07);
}
/* BBS ist ein reines Logo ohne Weissraum und wirkt sonst zu gross */
.marken-reihe .marke-logo-pur { height: clamp(32px, 4.6vw, 56px); }
/* Ohne Ueberfahren gibt es keinen Hover: dort von Anfang an volle Farbe */
@media (hover: none) {
    .marken-reihe img { filter: none; }
    .marken-reihe img:hover { transform: none; }
}

/* ---- Dogwash: Rassenband ---- */
.rassen-band {
    margin-top: clamp(30px, 4vw, 48px);
    background: #FFFFFF;
    border: 1px solid var(--linie);
    border-radius: 8px;
    padding: clamp(18px, 2.4vw, 28px) clamp(14px, 2vw, 26px) clamp(10px, 1.4vw, 16px);
}
.rassen-titel {
    margin: 0 0 clamp(10px, 1.4vw, 16px);
    text-align: center;
    font-family: 'Barlow', sans-serif; font-weight: 600;
    font-size: clamp(14px, 1.7vw, 18px);
    color: var(--dark);
}
.rassen-bild {
    overflow: hidden;
    /* Weiche Kanten links und rechts, damit das Band nicht hart abbricht */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rassen-bild img {
    display: block; width: 100%; height: auto;
    transition: transform .45s cubic-bezier(.22, .7, .3, 1);
}
.rassen-band:hover .rassen-bild img { transform: scale(1.03); }
/* Auf schmalen Geraeten waeren die Hunde winzig: Mindestbreite erzwingen
   und das Band langsam hin und her wandern lassen. */
@media (max-width: 820px) {
    .rassen-bild img {
        width: auto; min-width: 760px;
        animation: rassenWandern 26s ease-in-out infinite alternate;
    }
    .rassen-band:hover .rassen-bild img { transform: none; }
}
@keyframes rassenWandern {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * (760px - 100%))); }
}
@media (prefers-reduced-motion: reduce) {
    .rassen-bild img { animation: none; transition: none; }
    .rassen-band:hover .rassen-bild img { transform: none; }
}

/* ---- Ausgang zu mobile.de ---- */
.mobile-zeile { display: flex; justify-content: center; }
.mobile-chip {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center;
    gap: clamp(12px, 2vw, 22px);
    margin-top: clamp(26px, 3.4vw, 40px);
    padding: clamp(11px, 1.5vw, 16px) clamp(18px, 2.4vw, 28px);
    background: #fff; color: var(--dark);
    border: 1px solid var(--linie); border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(15, 23, 38, .07);
    transition: transform .3s cubic-bezier(.22, .7, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
/* Glanz, der beim Ueberfahren einmal durchlaeuft */
.mobile-chip::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -65%; width: 55%;
    background: linear-gradient(100deg, transparent, rgba(42, 75, 154, .13), transparent);
    transform: skewX(-18deg); transition: left .65s ease; pointer-events: none;
}
.mobile-chip:hover, .mobile-chip:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(42, 75, 154, .22);
    border-color: var(--primary);
}
.mobile-chip:hover::before { left: 115%; }
.mobile-chip:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.mobile-chip-haupt { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mobile-chip-oben { font-size: clamp(11px, 1.1vw, 12.5px); letter-spacing: .08em; text-transform: uppercase; color: #7b879f; }
.mobile-chip-haupt img { height: clamp(17px, 2vw, 23px); width: auto; display: block; }
.mobile-chip-trenner { width: 1px; align-self: stretch; background: var(--linie); }
.mobile-chip-wert { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.mobile-sterne { color: var(--signal); font-size: clamp(13px, 1.4vw, 15px); letter-spacing: .06em; line-height: 1; }
.mobile-chip-unten { font-size: clamp(12px, 1.2vw, 13.5px); color: #7b879f; white-space: nowrap; }
.mobile-chip-unten strong { color: var(--dark); font-size: 1.12em; }
.mobile-chip-pfeil {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary); display: grid; place-items: center;
    transition: transform .3s cubic-bezier(.22, .7, .3, 1);
}
.mobile-chip-pfeil svg { width: 16px; height: 16px; fill: #fff; }
.mobile-chip:hover .mobile-chip-pfeil { transform: translateX(4px); }
@media (max-width: 420px) {
    .mobile-chip { gap: 10px; padding: 11px 15px; }
    .mobile-chip-trenner, .mobile-chip-pfeil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .marken-reihe img, .mobile-chip, .mobile-chip::before, .mobile-chip-pfeil { transition: none; }
    .marken-reihe img:hover, .mobile-chip:hover { transform: none; }
}
@media (max-width: 575.98px) {
    .marken-reihe { gap: 14px 18px; }
    .marken-reihe img { height: 40px; }
}


/*** Fussbereich ***/
.footer { background: var(--secondary); }
.footer .btn.btn-link { display: block; margin-bottom: 5px; padding: 0; text-align: left; color: rgba(255,255,255,.85); font-size: 15px; font-weight: 400; text-transform: none; transition: .25s; }
.footer .btn.btn-link::before { position: relative; content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 10px; }
.footer .btn.btn-link:hover { color: #fff; letter-spacing: .4px; box-shadow: none; }
.footer .copyright { padding: 22px 0; font-size: 13.5px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.6); }
.footer .copyright a { color: rgba(255,255,255,.85); }
.footer .footer-menu a { margin-right: 15px; padding-right: 15px; border-right: 1px solid rgba(255,255,255,.3); }
.footer .footer-menu a:last-child { margin-right: 0; padding-right: 0; border-right: none; }


/*** Einblenden beim Scrollen ***/
/* Grundzustand ist sichtbar. Nur was beim Laden unterhalb des Fensters liegt,
   wird per Skript kurz versteckt. Ohne JavaScript bleibt alles lesbar. */
.reveal.wartet { opacity: 0; transform: translateY(18px); }
.reveal.kommt  { opacity: 1; transform: none;
                 transition: opacity .55s ease, transform .55s cubic-bezier(.22,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.wartet, .reveal.kommt { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/*** Kontaktformular ***/
.formbox { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 4px; }
.formbox .form-control, .formbox .form-select {
    background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.26); color: #fff;
}
.formbox .form-control::placeholder { color: rgba(255,255,255,.45); }
.formbox .form-control:focus, .formbox .form-select:focus {
    background: rgba(0,0,0,.3); border-color: var(--signal); color: #fff; box-shadow: none;
}
.formbox label { color: rgba(255,255,255,.72); font-size: 13px; }
.formbox .hinweis { color: rgba(255,255,255,.6); font-size: 13px; }
.formbox .meldung { color: var(--signal); font-size: 14px; font-weight: 600; }


/*** Rueckmeldung des Kontaktformulars ***/
.formbox .meldung {
    border-left: 3px solid var(--signal);
    padding: 10px 14px;
    border-radius: 3px;
    background: rgba(0,0,0,.22);
}
.formbox .meldung.erfolg { color: #BFF3C6; border-left-color: #35C759; background: rgba(53,199,89,.14); }
.formbox .meldung.fehler { color: #FFD9DB; border-left-color: var(--aktion); background: rgba(209,0,10,.16); }
.formbox .hinweis a { color: var(--signal); text-decoration: underline; }
.formbox .hinweis a:hover { color: #FFFFFF; }


/*** Saetze in Ueberschriften zusammenhalten ***/
/* Jeder Satz bleibt ein Block. Der Umbruch faellt damit zwischen die Saetze
   statt mitten hinein. Auf sehr schmalen Geraeten darf ein Satz weiterhin
   umbrechen, sonst wuerde er ueber den Rand laufen. */
h1 .satz { display: inline-block; }
@media (max-width: 400px) {
    h1 .satz { display: inline; }
}


/* =================================================================
   Ankerpunkte: die klebende Leiste darf den Abschnittsanfang nicht
   verdecken. Der Wert entspricht der Leistenhoehe samt Luft.
   ================================================================= */
#leistungen, #fahrzeuge, #waschen, #werkstatt, #raeder, #dogwash, #ueberuns, #kontakt {
    scroll-margin-top: 96px;
}
@media (max-width: 991.98px) {
    #leistungen, #fahrzeuge, #waschen, #werkstatt, #raeder, #dogwash, #ueberuns, #kontakt {
        scroll-margin-top: 78px;
    }
}

/* =================================================================
   mobile.de in der Navigation
   ================================================================= */
/* Sitzt in der Navigation direkt neben Fahrzeuge, weil dort der Bestand liegt.
   Etwas schmaler gehalten, damit die Leiste nicht auseinanderlaeuft. */
.nav-mobilede {
    display: inline-flex; align-items: center; gap: 7px;
    align-self: center;
    padding: 5px 10px;
    margin-right: 26px;
    border: 1px solid rgba(255,255,255,.26); border-radius: 4px;
    background: rgba(255,255,255,.06);
    text-decoration: none;
    transition: background .22s ease, border-color .22s ease;
}
.nav-mobilede img { height: 13px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.nav-mobilede-pfeil { width: 13px; height: 13px; fill: rgba(255,255,255,.7); transition: transform .22s ease; }
.nav-mobilede:hover {
    background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5);
}
.nav-mobilede:hover img { opacity: 1; }
.nav-mobilede:hover .nav-mobilede-pfeil { transform: translateX(3px); fill: var(--signal); }
@media (max-width: 991.98px) {
    .nav-mobilede { align-self: flex-start; margin: 8px 0 10px; }
}

/* Mehr Punkte in der Leiste: Abstaende weiter zuruecknehmen,
   damit die waagerechte Navigation auf Laptops erhalten bleibt. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar-issler .nav-link { margin-right: 15px; font-size: 13.5px; }
    .navbar-issler .logo-wort { display: none !important; }
    .nav-mobilede { padding: 5px 9px; margin-right: 15px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-issler .nav-link { margin-right: 11px; font-size: 13px; }
    .nav-mobilede img { height: 11px; }
    .nav-mobilede { margin-right: 11px; padding: 4px 7px; }
}

/* =================================================================
   Portalanlage: das Fahrzeug faehrt hinein und wird kleiner
   ================================================================= */
.portal-buehne {
    position: relative; overflow: hidden;
    margin-top: clamp(28px, 4vw, 48px);
    border-radius: 6px;
    background: #0b1422;
    aspect-ratio: 1024 / 600;
}
.portal-bild {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.06);
    transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.portal-buehne.faehrt .portal-bild { transform: scale(1); }

/* Lichtschein der Trockner, wird beim Einfahren staerker */
.portal-schein {
    position: absolute; left: 50%; top: 46%;
    width: 34%; height: 46%;
    transform: translate(-50%, -50%) scale(.7);
    background: radial-gradient(ellipse at center,
                rgba(255,186,74,.68) 0%, rgba(255,140,30,.34) 44%, rgba(255,120,0,0) 74%);
    opacity: 0; pointer-events: none;
    transition: opacity 1s ease .25s, transform 1.4s ease .2s;
}
.portal-buehne.faehrt .portal-schein { opacity: 1; transform: translate(-50%, -50%) scale(1); }


.portal-text {
    position: absolute; left: clamp(16px, 3vw, 34px); bottom: clamp(14px, 2.6vw, 28px);
    color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.75);
}
.portal-augenbraue {
    font-family: 'Barlow', sans-serif; font-weight: 700;
    font-size: clamp(10px, 1.1vw, 12px); letter-spacing: .22em; text-transform: uppercase;
    color: var(--signal); margin: 0 0 2px;
}
.portal-zeile {
    font-family: 'Barlow', sans-serif; font-weight: 700;
    font-size: clamp(16px, 2.2vw, 26px); margin: 0;
}

/* =================================================================
   Pflege von Hand: Detailbild blendet auf
   ================================================================= */
.pflege-bild { position: relative; }
/* Das Detail ragt bewusst ueber die Bildkante, der Rahmen darf es nicht abschneiden */
.pflege-bild > .bild-3-2 { overflow: hidden; border-radius: 4px; }
.pflege-detail {
    position: absolute; right: -10px; bottom: -22px; z-index: 2;
    width: clamp(150px, 42%, 240px);
    margin: 0;
    background: #fff;
    border: 4px solid #fff;
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(15,23,38,.3);
    opacity: 0; transform: translateY(16px) rotate(-2.5deg) scale(.96);
    transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
    overflow: hidden;
}
.pflege-detail.kommt { opacity: 1; transform: rotate(-2.5deg); }
.pflege-detail img { display: block; width: 100%; height: auto; }
.pflege-detail figcaption {
    font-size: 11.5px; line-height: 1.4; color: #5d6a85;
    padding: 7px 8px 5px; background: #fff;
}
@media (max-width: 575.98px) {
    .pflege-detail { right: 0; bottom: -10px; width: 52%; }
    .pflege-detail figcaption { font-size: 10.5px; }
}

/* =================================================================
   Raeder und Reifen
   ================================================================= */
.raeder-band {
    background: linear-gradient(160deg, var(--secondary) 0%, #0d1830 58%, #0a1326 100%);
    color: rgba(255,255,255,.78);
    position: relative; overflow: hidden;
    margin: clamp(48px, 6vw, 80px) 0;
}
.raeder-band .augenbraue { color: var(--signal); }
.raeder-band h2 { color: #fff; }
.hinweis-hell { color: rgba(255,255,255,.45); font-size: 13px; }

/* Umschalter Winter und Sommer */
.saison-schalter {
    position: relative; display: inline-flex; gap: 4px;
    padding: 4px; margin-bottom: 22px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
}
.saison-knopf {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 22px; border: 0; background: none;
    color: rgba(255,255,255,.66);
    font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 14px;
    letter-spacing: .04em; text-transform: uppercase;
    border-radius: 999px; cursor: pointer;
    transition: color .3s ease;
}
.saison-knopf svg {
    width: 17px; height: 17px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .5s ease;
}
.saison-knopf.aktiv { color: var(--dark); }
.saison-knopf.aktiv svg { transform: rotate(180deg); }
.saison-laeufer {
    position: absolute; top: 4px; left: 4px; z-index: 0;
    height: calc(100% - 8px);
    border-radius: 999px; background: var(--signal);
    transition: transform .42s cubic-bezier(.22,.61,.36,1), width .42s cubic-bezier(.22,.61,.36,1);
}
.saison-feld { display: none; }
.saison-feld.aktiv { display: block; animation: saisonAuf .5s ease both; }
.saison-feld p { color: rgba(255,255,255,.8); max-width: 54ch; margin-bottom: 0; }
@keyframes saisonAuf {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.raeder-punkte {
    display: grid; gap: 14px; margin-top: 30px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.raeder-punkt {
    padding: 15px 17px;
    background: rgba(255,255,255,.055);
    border-left: 3px solid var(--signal);
    border-radius: 3px;
    transition: background .25s ease, transform .25s ease;
}
.raeder-punkt:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.raeder-punkt b {
    display: block; color: #fff;
    font-family: 'Barlow', sans-serif; font-size: 16px; margin-bottom: 3px;
}
.raeder-punkt span { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.62); }

/* Das Rad dreht sich beim Scrollen */
.rad-buehne {
    position: relative; display: grid; place-items: center;
    padding: clamp(10px, 3vw, 30px);
}
.rad-grafik {
    width: min(100%, 420px); height: auto;
    opacity: .9;
    will-change: transform;
}
.rad-ring {
    position: absolute; inset: clamp(4px, 2vw, 18px);
    border-radius: 50%;
    border: 1px dashed rgba(255,212,0,.22);
    pointer-events: none;
    animation: ringDreht 34s linear infinite;
}
@keyframes ringDreht { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
    .portal-bild, .portal-schein,
    .pflege-detail, .saison-feld { transition: none; animation: none; }
    .rad-ring { animation: none; }
}

/* =================================================================
   EasyCarWash: waschen per App
   ================================================================= */
.app-band {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    position: relative; overflow: hidden;
    margin-top: clamp(40px, 5vw, 66px);
    padding: clamp(26px, 3.4vw, 46px);
    border-radius: 8px;
    background: linear-gradient(150deg, var(--secondary) 0%, #0d1830 56%, #0a1326 100%);
    color: rgba(255,255,255,.76);
}
.app-band::after {
    content: ""; position: absolute; right: -8%; top: -34%;
    width: 46%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(42,75,154,.5) 0%, rgba(42,75,154,0) 68%);
    pointer-events: none;
}
.app-text, .app-geraet { position: relative; z-index: 1; }
.app-band .augenbraue { color: var(--signal); }
.app-band h2 { color: #fff; }
.app-vorspann { color: rgba(255,255,255,.78); max-width: 52ch; }

/* Die vier Schritte, der laufende leuchtet mit dem Bildschirm */
.app-schritte { list-style: none; margin: 26px 0 28px; padding: 0; display: grid; gap: 9px; }
.app-schritt {
    display: flex; align-items: center; gap: 13px;
    padding: 9px 13px;
    background: rgba(255,255,255,.045);
    border-left: 3px solid rgba(255,255,255,.14);
    border-radius: 3px;
    transition: background .4s ease, border-color .4s ease, transform .4s ease;
}
.app-schritt b {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 25px; height: 25px; border-radius: 50%;
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
    font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 700;
    transition: background .4s ease, color .4s ease;
}
.app-schritt span { font-size: 14px; line-height: 1.45; }
.app-schritt.aktiv {
    background: rgba(255,255,255,.1);
    border-left-color: var(--signal);
    transform: translateX(3px);
}
.app-schritt.aktiv b { background: var(--signal); color: var(--dark); }
.app-schritt.aktiv span { color: #fff; }
@media (hover: hover) { .app-schritt { cursor: pointer; } }

/* Store-Knoepfe im Seitenstil, bewusst keine fremde Badge-Grafik */
.app-knoepfe { display: flex; flex-wrap: wrap; gap: 11px; }
.app-knopf {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 10px 19px 10px 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px;
    color: #fff; text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.app-knopf:hover, .app-knopf:focus-visible {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.4);
    color: #fff; transform: translateY(-2px);
}
.app-knopf i { font-size: 23px; line-height: 1; }
.app-knopf span {
    display: flex; flex-direction: column; line-height: 1.14;
    font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 15.5px;
}
.app-knopf small {
    font-weight: 400; font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; color: rgba(255,255,255,.6);
}

/* Das Telefon */
.app-geraet { display: grid; place-items: center; }
.app-telefon {
    position: relative;
    width: min(100%, 248px);
    aspect-ratio: 248 / 380;
    padding: 11px 10px;
    border-radius: 30px;
    background: #1b2538;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 26px 56px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
}
.app-kerbe {
    position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 78px; height: 15px; border-radius: 0 0 11px 11px;
    background: #1b2538; z-index: 3;
}
.app-schirm {
    position: relative; height: 100%; overflow: hidden;
    border-radius: 21px; background: #f4f6fa;
}
.app-karte {
    position: absolute; inset: 0;
    padding: 32px 15px 15px;
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
}
.app-karte.aktiv { opacity: 1; transform: none; }
.app-kopf {
    font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--primary); margin: 0 0 11px;
}

/* Bildschirm 1: Standort */
.app-mini-karte {
    position: relative; height: 132px; border-radius: 7px; overflow: hidden;
    background:
        linear-gradient(transparent 44px, rgba(255,255,255,.95) 44px 51px, transparent 51px),
        linear-gradient(90deg, transparent 56px, rgba(255,255,255,.95) 56px 63px, transparent 63px),
        linear-gradient(118deg, transparent 38%, rgba(255,255,255,.62) 38% 42%, transparent 42%),
        #dbe2ee;
}
.app-pin {
    position: absolute; left: 50%; top: 44%;
    width: 15px; height: 15px; margin: -8px 0 0 -8px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--aktion);
    animation: pinPuls 2.4s ease-out infinite;
}
@keyframes pinPuls {
    0%   { box-shadow: 0 0 0 0 rgba(209,0,10,.45); }
    70%  { box-shadow: 0 0 0 13px rgba(209,0,10,0); }
    100% { box-shadow: 0 0 0 0 rgba(209,0,10,0); }
}
.app-ort { margin: 11px 0 0; font-size: 12px; line-height: 1.45; color: #5d6a85; }
.app-ort b { display: block; font-family: 'Barlow', sans-serif; font-size: 13.5px; color: var(--dark); }

/* Bildschirm 2: Anmelden */
.app-feld {
    height: 34px; display: flex; align-items: center;
    padding: 0 11px; margin-bottom: 9px;
    background: #fff; border: 1px solid #dbe2ee; border-radius: 6px;
    font-size: 12px; color: #97a2b8;
}
.app-aktion {
    height: 36px; display: grid; place-items: center;
    margin-top: 13px; border-radius: 6px;
    background: var(--primary); color: #fff;
    font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 13px;
}
.app-fuss { margin: 11px 0 0; text-align: center; font-size: 11.5px; color: #97a2b8; }

/* Bildschirm 3: Tarif */
.app-tarif {
    padding: 9px 11px; margin-bottom: 8px;
    background: #fff; border: 1px solid #dbe2ee; border-radius: 6px;
}
.app-tarif b { display: block; font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--dark); }
.app-tarif span { font-size: 11px; color: #97a2b8; }
.app-tarif.gewaehlt { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(42,75,154,.14); }

/* Bildschirm 4: Programm */
.app-prog {
    display: flex; align-items: center; justify-content: space-between;
    height: 33px; padding: 0 11px; margin-bottom: 8px;
    background: #fff; border: 1px solid #dbe2ee; border-radius: 6px;
    font-size: 12.5px; color: #515e78;
}
.app-prog.gewaehlt { border-color: var(--primary); color: var(--dark); }
.app-prog i { font-style: normal; color: var(--primary); font-size: 13px; }

@media (max-width: 991.98px) {
    .app-band { grid-template-columns: 1fr; gap: 30px; }
    .app-geraet { order: -1; }
    .app-telefon { width: min(100%, 214px); }
}
@media (max-width: 575.98px) {
    .app-schritt span { font-size: 13px; }
    .app-knopf { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .app-karte, .app-schritt, .app-knopf { transition: none; }
    .app-pin { animation: none; }
}


/* =================================================================
   Zeitband: der Tag von 0 bis 24 Uhr, mit Marke auf der Jetzt-Zeit
   ================================================================= */
.zeitband {
    margin-bottom: clamp(34px, 4vw, 50px);
    padding: clamp(20px, 3vw, 32px);
    border-radius: 8px;
    background: var(--dark);
    border: 1px solid rgba(255,255,255,.08);
}
.zeitband-kopf {
    display: flex; flex-wrap: wrap; gap: 13px;
    align-items: center; justify-content: space-between;
    margin-bottom: clamp(20px, 2.6vw, 30px);
}
.zeitband-kopf h3 {
    margin: 0; color: #fff;
    font-size: clamp(20px, 2.5vw, 29px);
}
.zeit-pille {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px; border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    font-size: 13px; color: rgba(255,255,255,.8);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.zeit-punkt {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--signal); flex: 0 0 auto;
    animation: zeitPuls 2.6s ease-in-out infinite;
}
@keyframes zeitPuls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.zeit-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zeit-zeile, .zeit-achse {
    display: grid;
    grid-template-columns: minmax(140px, 185px) 1fr minmax(94px, 126px);
    gap: clamp(12px, 2vw, 26px);
    align-items: center;
}
.zeit-name b {
    display: block; color: #fff;
    font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.25;
}
.zeit-name span { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.42); }

.zeit-balken {
    position: relative; height: 26px; border-radius: 4px;
    background: rgba(255,255,255,.06);
}
.zeit-offen {
    position: absolute; top: 0; bottom: 0;
    border-radius: 4px;
    background: linear-gradient(180deg, #7E9CF0 0%, #6181DF 100%);
    transform: scaleX(0); transform-origin: left;
    transition: transform .95s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.zeitband.kommt .zeit-offen { transform: scaleX(1); }
.zeit-zeile.heute-zu .zeit-offen { opacity: .28; }
.zeit-marke {
    position: absolute; top: -4px; bottom: -4px; width: 2px;
    border-radius: 2px; background: var(--aktion);
    box-shadow: 0 0 8px rgba(209,0,10,.85);
    opacity: 0; transition: opacity .5s ease .75s;
}
.zeitband.kommt .zeit-marke { opacity: 1; }

.zeit-status { text-align: right; font-size: 12.5px; line-height: 1.35; }
.zeit-status b {
    display: block; font-weight: 400; color: rgba(255,255,255,.82);
    font-variant-numeric: tabular-nums;
}
.zeit-zustand { color: rgba(255,255,255,.4); }
.zeit-zustand.auf { color: #8FB0FF; }

.zeit-achse { margin-top: 10px; }
.zeit-skala {
    grid-column: 2; position: relative; height: 15px;
    font-size: 11px; color: rgba(255,255,255,.33);
    font-variant-numeric: tabular-nums;
}
.zeit-skala span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.zeit-skala span:nth-child(1) { left: 0;   transform: none; }
.zeit-skala span:nth-child(2) { left: 25%; }
.zeit-skala span:nth-child(3) { left: 50%; }
.zeit-skala span:nth-child(4) { left: 75%; }
.zeit-skala span:nth-child(5) { left: 100%; transform: translateX(-100%); }

.zeit-fuss {
    margin: clamp(18px, 2.4vw, 26px) 0 0;
    font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.4);
}

@media (max-width: 767.98px) {
    .zeit-zeile { grid-template-columns: 1fr auto; gap: 5px 12px; }
    .zeit-name   { grid-row: 1; grid-column: 1; }
    .zeit-status { grid-row: 1; grid-column: 2; align-self: start; }
    .zeit-balken { grid-row: 2; grid-column: 1 / -1; height: 21px; margin-top: 4px; }
    .zeit-liste  { gap: 17px; }
    .zeit-achse  { grid-template-columns: 1fr; }
    .zeit-skala  { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .zeit-offen, .zeit-marke { transition: none; }
    .zeit-punkt { animation: none; }
    .zeitband .zeit-offen { transform: scaleX(1); }
    .zeitband .zeit-marke { opacity: 1; }
}

.feld-oder { font-size: 11.5px; color: rgba(255,255,255,.4); font-weight: 400; }