/*
 * HANDY DOKTOR – FIXIERTE BUTTON-GESTALTUNG
 * Diese Datei wird absichtlich nach allen anderen Styles geladen.
 * Ziel: exakt EIN roter Rahmen, kein Blau/Türkis, keine Doppelkontur.
 */

/* Echte Menü- und Aktionsbuttons auf der gesamten Website */
.navLinks > a,
.navCta,
a.button,
button.button,
.serviceLinks > a,
.filterTabs > button,
.otherRepairLinks > button,
.legalBack,
.serviceCTA a,
.emergencyCta a.button {
    border: 3px solid #e31b23 !important;
    border-top: 3px solid #e31b23 !important;
    border-right: 3px solid #e31b23 !important;
    border-bottom: 3px solid #e31b23 !important;
    border-left: 3px solid #e31b23 !important;
    border-radius: 999px !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
}

/* Alte Pseudo-Rahmen vollständig neutralisieren */
.navLinks > a::before,
.navLinks > a::after,
.navCta::before,
.navCta::after,
a.button::before,
a.button::after,
button.button::before,
button.button::after,
.serviceLinks > a::before,
.serviceLinks > a::after,
.filterTabs > button::before,
.filterTabs > button::after,
.otherRepairLinks > button::before,
.otherRepairLinks > button::after,
.legalBack::before,
.legalBack::after,
.serviceCTA a::before,
.serviceCTA a::after,
.emergencyCta a.button::before,
.emergencyCta a.button::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: none !important;
}

/* Hover, Tastaturfokus und Klick: weiterhin nur EIN roter Rahmen */
.navLinks > a:hover,
.navLinks > a:active,
.navLinks > a:focus,
.navLinks > a:focus-visible,
.navCta:hover,
.navCta:active,
.navCta:focus,
.navCta:focus-visible,
a.button:hover,
a.button:active,
a.button:focus,
a.button:focus-visible,
button.button:hover,
button.button:active,
button.button:focus,
button.button:focus-visible,
.serviceLinks > a:hover,
.serviceLinks > a:active,
.serviceLinks > a:focus,
.serviceLinks > a:focus-visible,
.filterTabs > button:hover,
.filterTabs > button:active,
.filterTabs > button:focus,
.filterTabs > button:focus-visible,
.otherRepairLinks > button:hover,
.otherRepairLinks > button:active,
.otherRepairLinks > button:focus,
.otherRepairLinks > button:focus-visible,
.legalBack:hover,
.legalBack:focus-visible,
.serviceCTA a:hover,
.serviceCTA a:focus-visible,
.emergencyCta a.button:hover,
.emergencyCta a.button:focus-visible {
    border-color: #e31b23 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-decoration: none !important;
}

/* Barrierefreiheitsmodus darf diese Button-Rahmen nicht blau/türkis überschreiben */
body.a11y-highlight-links .navLinks > a,
body.a11y-highlight-links .navCta,
body.a11y-highlight-links a.button,
body.a11y-highlight-links button.button,
body.a11y-highlight-links .serviceLinks > a,
body.a11y-highlight-links .filterTabs > button,
body.a11y-highlight-links .otherRepairLinks > button,
body.a11y-highlight-links .legalBack,
body.a11y-highlight-links .serviceCTA a,
body.a11y-highlight-links .emergencyCta a.button,
body.a11y-high-contrast .navLinks > a,
body.a11y-high-contrast .navCta,
body.a11y-high-contrast a.button,
body.a11y-high-contrast button.button {
    border: 3px solid #e31b23 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Mobile: Form bleibt sauber und einheitlich */
@media (max-width: 700px) {
    .navLinks > a,
    .navCta {
        border-radius: 18px !important;
    }
}


/* ==========================================================================
   v1.5.3 – FINALE KORREKTUR (wird als letzte Datei geladen)
   1) Hero-Bild: komplett sichtbar, exakt mittig, auf die Flaeche gestreckt
   2) Kein Blau/Tuerkis mehr – ueberall genau EIN roter Rahmen
   ========================================================================== */

/* --- 1) HERO: PANORAMA, ganzes Bild, unverzerrt, Rand links/rechts ------
   Regel: das Foto wird NIE gestreckt und NIE angeschnitten.
   Es steht mittig, mit ca. 2,5 cm (95 px) dunklem Rand links und rechts.
   Wichtig: KEIN overflow:hidden auf .scenicHero - die Section hat die
   Klasse "shell" (max. 1180 px) und wuerde das Vollbreiten-Bild abschneiden.
   -------------------------------------------------------------------- */
.scenicHero{
    overflow:visible !important;
    min-height:clamp(430px, calc((100vw - 190px) / 1.7768), 900px) !important;
    padding-block:64px 64px !important;
}
.scenicHero .salzburgVisual{
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    left:calc((100vw - 100%) / -2) !important;
    right:calc((100vw - 100%) / -2) !important;
    width:auto !important;
    background:#050b13 !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

/* Gilt fuer ALLE Bildschirmgroessen und ueberschreibt jeden frueheren
   Breakpoint (58% top / 61% center / 165% Breite / Blur usw.). */
.scenicHero .salzburgHeroPhoto,
.scenicHero img.salzburgHeroPhoto{
    content:url("../images/hero-shop-repair-v4-pano.webp") !important;
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    /* WICHTIG: Der Rand wird ueber padding erzeugt, NICHT ueber left/right.
       Bei einem Bild mit width:auto und gleichzeitig gesetztem left und
       right verankert der Browser das Bild links und laesst es rechts
       ueberlaufen - dadurch wanderte das Motiv aus der Mitte.
       Mit box-sizing:border-box und padding ist der linke Rand
       zwangslaeufig immer genauso gross wie der rechte. */
    box-sizing:border-box !important;
    padding:0 95px !important;
    object-fit:contain !important;   /* ganzes Bild, kein Beschnitt */
    object-position:center center !important;
    transform:none !important;
    filter:none !important;
    image-rendering:auto !important;
}

/* Abdunklung nur so weit, dass die Ueberschrift lesbar bleibt. */
.scenicHero .salzburgPhotoShade{
    background:
        linear-gradient(90deg, rgba(3,12,29,.60) 0%, rgba(3,13,30,.34) 24%, rgba(3,15,32,.10) 44%, rgba(3,15,32,0) 58%),
        linear-gradient(180deg, rgba(2,8,18,0) 58%, rgba(2,8,18,.30) 100%) !important;
    animation:none !important;
}

.scenicHero h1,
.scenicHero .heroLead,
.scenicHero .eyebrow{
    text-shadow:0 2px 18px rgba(2,8,18,.75), 0 1px 3px rgba(2,8,18,.60) !important;
}

/* --- 2) KEIN BLAU: genau ein roter Rahmen ------------------------------- */

/* Globaler Tastaturfokus: ein roter Ring, kein zweiter Schatten-Ring */
:where(a, button, [tabindex], input, select, textarea, summary):focus,
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible{
    outline:3px solid #e31b23 !important;
    outline-offset:0 !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
}

/* Menuepunkte und Buttons: der rote Rahmen ist der Fokus – kein zweiter Ring */
.navLinks > a:focus,
.navLinks > a:focus-visible,
.navCta:focus,
.navCta:focus-visible,
a.button:focus,
a.button:focus-visible,
button.button:focus,
button.button:focus-visible,
.serviceLinks > a:focus-visible,
.filterTabs > button:focus-visible,
.otherRepairLinks > button:focus-visible,
.legalBack:focus-visible{
    outline:0 !important;
    outline-offset:0 !important;
    border-color:#e31b23 !important;
    box-shadow:none !important;
}

/* Kein tuerkiser Schimmer im Menue-Button-Hintergrund */
.navCta{
    background:rgba(227,27,35,.10) !important;
}
.navCta:hover,
.navCta:focus-visible{
    background:rgba(227,27,35,.22) !important;
}

/* Karten und Slider: roter statt blauer Fokusrahmen */
.repairFeatureCard:focus-visible,
.otherRepairLinks button:focus-visible,
.brandCinemaGrid:focus-visible{
    outline:3px solid #e31b23 !important;
    outline-offset:0 !important;
    box-shadow:none !important;
}

/* Barrierefreiheits-Widget: rot statt blau */
.a11yToggle{
    border:2px solid #e31b23 !important;
    box-shadow:0 12px 34px rgba(0,0,0,.42) !important;
}
.a11yToggle:hover,
.a11yToggle:focus-visible{
    border-color:#e31b23 !important;
    outline:0 !important;
    box-shadow:0 12px 34px rgba(0,0,0,.42) !important;
}
.a11yPanel{
    border:1px solid rgba(227,27,35,.62) !important;
}
.a11yPanel button,
.a11yStatementLink{
    border:1px solid rgba(227,27,35,.45) !important;
    box-shadow:none !important;
}
.a11yPanel button:hover,
.a11yPanel button[aria-pressed="true"],
.a11yStatementLink:hover{
    color:#fff !important;
    background:#e31b23 !important;
    border-color:#e31b23 !important;
}

/* Modus "Links hervorheben": rot statt blau */
body.a11y-highlight-links main a:not(.button):not(.brand):not(.a11yToggle),
body.a11y-highlight-links footer a:not(.button):not(.brand):not(.a11yToggle){
    background:#5c0a10 !important;
    outline:2px solid #e31b23 !important;
}

/* Sicherheitsnetz: nirgends ein blauer/tuerkiser Rest-Rahmen */
.navLinks > a,
.navCta,
a.button,
button.button{
    -webkit-tap-highlight-color:rgba(227,27,35,.25);
}

/* --- Mobil: gleiches Prinzip, nur schmalerer Rand ---------------------- */
@media (max-width: 900px){
    .scenicHero .salzburgHeroPhoto,
    .scenicHero img.salzburgHeroPhoto{
        padding:0 34px !important;
        left:0 !important;
        right:0 !important;
    }
    .scenicHero{
        min-height:clamp(320px, calc((100vw - 68px) / 1.7768), 620px) !important;
    }
}
@media (max-width: 700px){
    .scenicHero{
        min-height:calc((100vw - 28px) / 1.7768 + 300px) !important;
        padding-block:40px 40px !important;
    }
    .scenicHero .salzburgVisual{
        bottom:auto !important;
        height:calc((100vw - 28px) / 1.7768 + 96px) !important;
    }
    .scenicHero .salzburgHeroPhoto,
    .scenicHero img.salzburgHeroPhoto{
        padding:0 14px !important;
        left:0 !important;
        right:0 !important;
        object-position:center top !important;
    }
    .scenicHero .salzburgPhotoShade{
        background:linear-gradient(180deg, rgba(2,10,24,.30) 0%, rgba(2,10,24,.10) 40%, rgba(2,8,18,.55) 100%) !important;
    }
}


/* ==========================================================================
   v1.5.3 - WARNDREIECK im Abschnitt "Warnzeichen und Selbsttest"
   Ersetzt das bisherige orange Ausrufezeichen. Reines SVG, transparent,
   kein Hintergrund, auf jedem Display gestochen scharf.
   Umschalten auf die vollflaechig rote Variante: unten bei "background"
   die Zeile mit --warn-solid statt --warn-outline verwenden.
   ========================================================================== */
.repairFacts .warningFact{
    --warn-outline:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2044%2040%27%3E%3Cpath%20d%3D%27M22%203.2%2041.2%2035.1a2.2%202.2%200%200%201-1.9%203.3H4.7a2.2%202.2%200%200%201-1.9-3.3Z%27%20fill%3D%27none%27%20stroke%3D%27%23e31b23%27%20stroke-width%3D%273.6%27%20stroke-linejoin%3D%27round%27%2F%3E%3Crect%20x%3D%2720.1%27%20y%3D%2714.5%27%20width%3D%273.8%27%20height%3D%2711.5%27%20rx%3D%271.9%27%20fill%3D%27%23e31b23%27%2F%3E%3Crect%20x%3D%2720.1%27%20y%3D%2729.2%27%20width%3D%273.8%27%20height%3D%273.8%27%20rx%3D%271.9%27%20fill%3D%27%23e31b23%27%2F%3E%3C%2Fsvg%3E");
    --warn-solid:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2044%2040%27%3E%3Cpath%20d%3D%27M22%202.4%2041.9%2035.6a2.5%202.5%200%200%201-2.1%203.8H4.2a2.5%202.5%200%200%201-2.1-3.8Z%27%20fill%3D%27%23e31b23%27%2F%3E%3Crect%20x%3D%2720.1%27%20y%3D%2713.8%27%20width%3D%273.8%27%20height%3D%2712.4%27%20rx%3D%271.9%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20x%3D%2720.1%27%20y%3D%2729.4%27%20width%3D%273.8%27%20height%3D%273.8%27%20rx%3D%271.9%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
}
.repairFacts .warningFact > span{
    display:block !important;
    width:44px !important;
    height:40px !important;
    margin:0 0 18px !important;
    padding:0 !important;
    font-size:0 !important;
    line-height:0 !important;
    color:transparent !important;
    background:var(--warn-outline) center / contain no-repeat !important;
    border:0 !important;
    box-shadow:none !important;
}

/* Der Warnhinweis-Kasten bekommt einen roten statt orangen Ton */
.repairFacts .warningFact{
    background:linear-gradient(135deg, rgba(227,27,35,.10), rgba(227,27,35,0) 62%) !important;
}
#leistungen .repairFacts .warningFact{
    border-color:rgba(227,27,35,.28) !important;
}

@media (max-width: 700px){
    .repairFacts .warningFact > span{
        width:38px !important;
        height:35px !important;
        margin-bottom:14px !important;
    }
}

/* ==========================================================================
   v1.5.7 - LEISTUNGSSPERRE ("die Seite darf nie wieder haengen")
   --------------------------------------------------------------------------
   Gemessen auf der Live-Seite:
   .fluidColorField ist position:fixed, fuellt das ganze Fenster (ca. 2,5
   Millionen Bildpunkte), hat filter:blur(96px) saturate(1.2) und
   mix-blend-mode:screen - und ANIMIERTE den Blur von 92px auf 105px,
   dazu border-radius und transform, 22 Sekunden im Dauerlauf.
   Ein animierter 96-Pixel-Weichzeichner ueber das gesamte Fenster muss in
   JEDEM Einzelbild neu berechnet und verrechnet werden. Das legt Haupt-
   strang und Grafikeinheit lahm: Klicks reagieren verzoegert, Scrollen
   ruckelt, die Seite wirkt eingefroren.
   .miniScanLine (8 Stueck) animierte zusaetzlich "top" - das loest bei
   jedem Einzelbild eine Neuberechnung des Layouts aus.

   Regel ab hier: Dauerlauf-Animationen duerfen ausschliesslich transform
   und opacity veraendern. Alles andere wird stillgelegt. Das Aussehen
   bleibt erhalten - der Weichzeichner wird eingefroren, nicht entfernt.
   ========================================================================== */

/* --- 1) Grossflaechige Farbfelder: Aussehen bleibt, Bewegung stoppt ----- */
.fluidColorField,
.fluidColorField::before,
.fluidColorField::after{
    animation:none !important;
    -webkit-animation:none !important;
    will-change:auto !important;
    transition:none !important;
}
.fluidColorField{
    filter:blur(96px) saturate(1.2) !important;   /* fester Wert statt Animation */
    contain:paint !important;
    pointer-events:none !important;
}

/* --- 2) Scanlinien: animierten "top"-Wert stilllegen -------------------- */
.miniScanLine{
    animation:none !important;
    -webkit-animation:none !important;
    will-change:auto !important;
}

/* --- 3) Weitere Zierebenen absichern ------------------------------------ */
.ambient,
.componentRain,
.componentAccents,
.accentChip,
.accentTransistor,
.sectionParts{
    animation:none !important;
    -webkit-animation:none !important;
    will-change:auto !important;
    pointer-events:none !important;
}

/* --- 4) Guenstige Animationen duerfen bleiben, aber sauber ausgelagert --
   waterField und miniPhoneTurn veraendern nur transform/opacity.
   Mit einer eigenen Ebene laufen sie auf der Grafikeinheit statt im
   Hauptstrang und stoeren Klicks nicht mehr. */
.waterField{
    will-change:transform, opacity !important;
    contain:paint !important;
    pointer-events:none !important;
}
.miniPhoneTurn{
    will-change:transform !important;
}

/* --- 5) Hero: keine Dauer-Neuberechnung des Farbverlaufs ---------------- */
.scenicHero .salzburgPhotoShade,
.heroRepairForeground,
.heroRepairForeground::after{
    animation:none !important;
    -webkit-animation:none !important;
}

/* --- 6) Systemeinstellung "Bewegung reduzieren" wird respektiert -------- */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:0.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.001ms !important;
        scroll-behavior:auto !important;
    }
}

/* --- 7) Bedienbarkeit hat Vorrang vor Zierde ---------------------------
   Kein Zierelement darf jemals einen Klick abfangen. */
.ambient,
.ambientOne,
.ambientTwo,
.fluidColorField,
.waterField,
.componentRain,
.componentAccents,
.sectionParts,
.salzburgPhotoShade,
.heroRepairForeground{
    pointer-events:none !important;
}
/* HINWEIS: Hier stand frueher eine Regel auf [aria-hidden="true"].
   Die war zu weit gefasst: Das Selbsthilfe-Bild sitzt in einer Huelle
   mit aria-hidden="true" und wurde dadurch unklickbar - das Grossbild
   liess sich nicht mehr oeffnen. Deshalb nur noch benannte Zierebenen. */
.navWrap,
.nav,
.navLinks,
.navLinks > a,
.navCta,
.siteFooter,
.footerLinks,
.footerLinks a,
.button,
.a11yToolbar,
.a11yToggle,
.emergencyDoctorVisual,
.emergencyDoctorVisual img,
.exactSelfHelpTrigger,
.exactSelfHelpLightbox,
.exactSelfHelpLightbox *,
.hdImageLightbox,
.hdImageLightbox *,
.offlineLegalDialog,
.offlineLegalDialog *,
.repairFeatureCard,
.filterTabs button,
.otherRepairLinks button,
.menuButton{
    pointer-events:auto !important;
    cursor:pointer;
}
.exactSelfHelpTrigger{
    cursor:zoom-in !important;
}
.navWrap{
    position:relative !important;
    z-index:9000 !important;
}

/* ==========================================================================
   v1.6.0 - GEBRAUCHTE HANDYS AUS WORDPRESS
   Die Karten werden aus dem Menuepunkt "Gebrauchte Handys" aufgebaut.
   Anders als frueher steht hier ein echtes Foto statt einer CSS-Zeichnung.
   ========================================================================== */
.hdGeraetBereich{
    margin-top:6px;
}
.hdGeraetFilter{
    margin-bottom:22px;
}
.hdGeraetBuehne{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:4 / 3;
    overflow:hidden;
    border-radius:16px;
    background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
}
.hdGeraetFoto{
    width:100%;
    height:100%;
    object-fit:contain;      /* ganzes Geraet sichtbar, nie beschnitten */
    object-position:center center;
    padding:14px;
    box-sizing:border-box;
    display:block;
}
.hdGeraetPreis{
    display:block;
    margin:2px 0 6px;
    color:#ff6b78;
    font-size:19px;
    font-weight:800;
    letter-spacing:-.01em;
}
.hdGeraetLeer{
    grid-column:1 / -1;
    margin:0;
    padding:26px 22px;
    color:#c3d3e0;
    font-size:14px;
    text-align:center;
    border:1px dashed rgba(227,27,35,.45);
    border-radius:14px;
}

/* Foto und Karte duerfen nicht von der Leistungssperre erfasst werden */
.hdGeraetKarte,
.hdGeraetKarte *,
.hdGeraetFilter,
.hdGeraetFilter button{
    pointer-events:auto !important;
}

@media (max-width: 700px){
    .hdGeraetBuehne{ aspect-ratio:1 / 1; }
    .hdGeraetPreis{ font-size:17px; }
}

/* Mehrere Fotos pro Geraet: Punkte zum Umschalten */
.hdGeraetPunkte{
    position:absolute;
    left:0; right:0; bottom:8px;
    display:flex;
    justify-content:center;
    gap:7px;
    z-index:2;
}
.hdGeraetPunkte button{
    width:9px; height:9px;
    min-width:9px; min-height:9px;
    padding:0;
    border:1px solid rgba(255,255,255,.75) !important;
    border-radius:50% !important;
    background:rgba(4,12,24,.55);
    cursor:pointer;
    pointer-events:auto !important;
}
.hdGeraetPunkte button.aktiv{
    background:#e31b23;
    border-color:#e31b23 !important;
}

/* Shop-Seite: Bestandsraster wie auf der Startseite */
.shopPage .shopBestand{ margin:34px 0 8px; }
.shopPage .shopBestand h2{ margin:0 0 6px; font-size:22px; }
.shopPage .shopHinweis{ margin:0 0 20px; color:#9db0c0; font-size:14px; }
.shopPage .shopGitter{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:18px;
}
@media (max-width: 700px){
    .shopPage .shopGitter{ grid-template-columns:1fr; }
}