/* =========================================================
 * HANDY: KEIN QUERBALKEN, UND EIN RAND AN DEN SEITEN
 *
 * Angesehen am 14.10.2026 bei 375px. Drei Dinge waren kaputt,
 * und alle drei stammen aus Elementor, nicht aus dem Theme.
 * Diese Datei repariert sie von aussen.
 *
 *
 * 1. EIN BILD WAR BREITER ALS DER BILDSCHIRM
 *
 * Beim Bild wp-image-2894 ("Autoankauf Oesterreich") steht in
 * Elementor die Breite auf 110 Prozent (Startseite) und auf
 * 115 Prozent (Ueber uns). Bei 375px Bildschirm sind das 413
 * bzw. 410 Pixel - genau die 38 bzw. 35 Pixel, um die sich die
 * Seite seitlich schieben liess.
 *
 * Alles andere, was dabei zu breit aussah - die feste
 * Kopfzeile, der Cookie-Banner, der ganze Kopfbereich - war
 * nur die Folge. Sobald EIN Element die Seite breiter macht,
 * ziehen alle mit, die sich an der Seitenbreite orientieren.
 * Wer dort sucht, sucht am falschen Ende.
 *
 * !important ist hier ausnahmsweise richtig: Elementor
 * schreibt die Breite pro Element
 * (.elementor-465 .elementor-element-ef55fad img), und welche
 * Kennung das naechste Mal drinsteht, weiss man vorher nicht.
 *
 *
 * 2. DIE ABSCHNITTE HATTEN KEIN SEITLICHES POLSTER
 *
 * In der von Elementor erzeugten Seiten-CSS steht fuer Tablet
 * und Handy woertlich:
 *
 *     @media (max-width: 1024px) {
 *         .elementor-465 .elementor-element-2ef5ea1 {
 *             --padding-left: 0em; --padding-right: 0em;
 *         }
 *     }
 *
 * Auf der Startseite bei 9 von 10 Abschnitten, bei
 * Gebrauchtwagenankauf bei 5 von 6, bei Ueber uns bei 3 von 14.
 * Ueberschriften und Absaetze klebten dadurch ohne einen
 * einzigen Pixel Abstand am Bildschirmrand. Die Standortseiten
 * (Klagenfurt und die anderen zwoelf) sind davon nicht
 * betroffen - dort stimmt das Polster.
 *
 * 16px, weil der erste Abschnitt der Startseite genau das
 * schon hat. Das ist das Mass des Hauses, nicht meines.
 *
 * Das "body" vorne ist kein Zierrat: Die Regel von Elementor
 * hat drei Klassen, meine auch. Bei Gleichstand gewinnt die
 * spaetere - und in welcher Reihenfolge die Blaetter landen,
 * entscheidet WordPress, nicht ich. Mit dem zusaetzlichen
 * Element gewinnt sie immer.
 *
 *
 * 3. LANGE WOERTER WURDEN ABGESCHNITTEN
 *
 * "Nebenbeschaeftigung" braucht in der Ueberschrift auf
 * Gebrauchtwagenankauf 331px, der Kasten hat 283 - der Rest
 * war schlicht weg. Jetzt bricht das Wort um, statt zu
 * verschwinden.
 *
 * hyphens:auto steht davor, damit der Browser zuerst eine
 * richtige Trennstelle sucht. Findet er keine - bei
 * "Nebenbeschaeftigung" tut er das nicht - greift
 * overflow-wrap und bricht hart. Haesslich, aber lesbar; und
 * lesbar schlaegt abgeschnitten.
 *
 *
 * 4. DIE SEITENZAHLEN PASSTEN NICHT IN EINE ZEILE
 *
 * Unter Aktuelles steht die Blaetterleiste auf flex mit
 * nowrap. Bei 375px brauchen die Zahlen samt "weiter" 371
 * Pixel in einer 345 Pixel breiten Reihe - der letzte Knopf
 * ragte 11 Pixel hinaus. Diese Seite ist die einzige ohne
 * Elementor, deshalb half die Regel oben dort nicht.
 *
 * Umbrechen statt hinausragen: Bei vielen Beitraegen wandern
 * die hinteren Zahlen in eine zweite Zeile.
 *
 *
 * RICHTIG BEHOBEN WAERE ES IN ELEMENTOR SELBST: Bildbreite auf
 * 100 Prozent, das Polster der Abschnitte nicht auf 0, und bei
 * den paar sehr langen Ueberschriften eine kleinere Schrift
 * fuers Handy. Solange das nicht passiert ist, haelt diese
 * Datei die Seite lesbar.
 * ======================================================= */

@media (max-width: 767px) {

    /* 3 */
    body .elementor h1,
    body .elementor h2,
    body .elementor h3,
    body .elementor h4,
    body .elementor h5 {
        hyphens: auto;
        overflow-wrap: break-word;
    }

    /* 4 */
    body .clevercarsale-pagination ul.page-numbers {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/*
 * Regel 2 geht weiter als die anderen: bis 1024px.
 *
 * Genau dort steht Elementors eigene Null-Regel
 * (@media (max-width: 1024px)), und genau dort klebte der Text
 * auch auf dem Tablet und im schmalen Fenster am Rand - am
 * 14.10.2026 von Nikolay in einem rund 970px breiten Fenster
 * fotografiert. Gemessen beim inneren Kasten der obersten
 * Abschnitte der Startseite:
 *
 *     375px  ->  16px   (Regel greift)
 *     768px  ->  16px   (Regel greift)
 *     900px  ->   0px   <- hier fehlte er
 *    1024px  ->   0px   <- und hier
 *    1100px  ->  15px   (Elementors Desktop-Wert)
 *    1440px  ->  15px
 *
 * 16px passt in das Bild: Der erste Abschnitt hat auf dem Handy
 * 16, der Desktop hat 15. Die anderen drei Regeln bleiben beim
 * Handy, weil es die drei Probleme nur dort gab.
 */
@media (max-width: 1024px) {

    /* 2 */
    body .elementor > .e-con.e-parent {
        --padding-left: 16px;
        --padding-right: 16px;
    }
}


/* =========================================================
 * ZWEI STELLEN IN DER SEITENLEISTE, DIE IN JEDER BREITE
 * HINAUSRAGEN
 *
 * Beide gefunden am 14.10.2026 bei 1024px, beide nicht von
 * Elementor, sondern vom Theme bzw. von WordPress selbst.
 *
 *
 * 5. DER NEWS-KASTEN KONNTE NICHT SCHRUMPFEN
 *
 * Im Kasten "News" steht je Eintrag ein Bildchen und daneben
 * der Titel, nebeneinander als flex. Ein Flex-Element darf von
 * sich aus nicht schmaler werden als sein laengstes Wort -
 * das ist die Voreinstellung min-width:auto. Beim Eintrag
 * "Anhaengerkupplung, Dachbox, Traeger ..." sind das 143px in
 * einer 213px breiten Leiste neben einem 112px breiten Bild:
 * 37 Pixel ragten aus der Seite, auf 13 Seiten gleichzeitig.
 *
 * min-width:0 hebt genau diese Voreinstellung auf. Damit der
 * Titel dann auch irgendwo brechen darf, kommt
 * overflow-wrap dazu.
 *
 *
 * 6. DAS SUCHFELD HATTE EINE FESTE BREITE
 *
 * In den Beitraegen steht in der Seitenleiste ein Suchfeld von
 * WordPress mit width:280px in einem 208px breiten Formular -
 * 57 Pixel hinaus. Eine feste Breite in einer Leiste, deren
 * Breite sich aendert, kann nicht aufgehen.
 *
 * Ohne Medienabfrage: Beides ist in JEDER Breite falsch, nicht
 * nur auf dem Handy.
 * ======================================================= */

/* 5 */
.recent-news-item .news-content {
    min-width: 0;
}

.recent-news-item .news-title {
    overflow-wrap: break-word;
}

/* 6 */
.wp-block-search__input {
    max-width: 100%;
}


/*
 * 7. DER ABSENDEKNOPF DES BEWERBUNGSFORMULARS
 *
 * Auf der Karriereseite ist der Knopf von Contact Form 7 so
 * breit, wie seine Beschriftung plus zweimal 32px Polster es
 * verlangen: 296px. Sein Kasten ist bei einem 320er-Telefon
 * aber nur 209 breit - 41 Pixel ragten hinaus.
 *
 * Dieselbe Art Fehler wie beim Suchfeld: Eine Breite, die sich
 * aus dem Inhalt ergibt, ohne Deckel nach oben. Der Deckel
 * fehlt bei allen Feldern des Formulars, nicht nur beim Knopf.
 */
.wpcf7-form-control {
    max-width: 100%;
}


/*
 * 8. LANGE E-MAIL-ADRESSEN UND TELEFONNUMMERN
 *
 * Auf der Innsbrucker Standortseite steht
 * "innsbruck@clevercarsale.at" als Link - 193px breit, und bei
 * einem 320er-Telefon beginnt er erst bei 117. Neun Pixel
 * hinaus. Eine Adresse hat keine Stelle, an der ein Browser von
 * sich aus umbrechen duerfte.
 *
 * Nur fuer mailto und tel: Dort ist ein Umbruch mitten im Wort
 * das kleinere Uebel. Ueberall sonst waere er es nicht.
 */
a[href^="mailto:"],
a[href^="tel:"] {
    overflow-wrap: anywhere;
}


/* =========================================================
 * 9. AM DESKTOP NUR DEN QUERBALKEN WEG, SONST NICHTS
 *
 * Auf Ueber uns, LKW-/Transporterankauf und Wohnmobilankauf
 * schiebt die Seite auch am Desktop noch 2 bis 15 Pixel
 * (gemessen bei 1080, 1280 und 1440; bei 1920 ist Platz genug).
 * Ursache sind wieder die Bilder mit 110, 115 und 140 Prozent.
 *
 * Dort ist das aber ANDERS ZU BEWERTEN als auf dem Handy: Das
 * Bild ragt mit Absicht ueber seine Spalte hinaus, das ist ein
 * Gestaltungsmittel. Auf Ueber uns sind das rund 78 Pixel
 * Ueberstand - hinaus aus der SEITE davon nur 3. Die Startseite
 * macht dasselbe, ohne dass die Seite dadurch scrollt.
 *
 * Deckeln wuerde das Aussehen aendern. Deshalb hier der
 * umgekehrte Weg: Der Ueberstand bleibt, aber was ueber den
 * Fensterrand hinausgeht, wird abgeschnitten. Betroffen sind
 * genau die 2 bis 15 Pixel, die niemand sehen soll.
 *
 * clip und nicht hidden: hidden macht aus dem Element einen
 * Scrollbehaelter, und daran zerbricht jedes position:sticky
 * darin - die Kopfzeile klebt dann nicht mehr oben. clip tut
 * das nicht, dafuer gibt es clip.
 *
 * Am html und nicht am body: Beides verhindert das seitliche
 * Scrollen (vom body wandert die Angabe ohnehin an das
 * Fenster weiter). Nur am body gemessen meldet
 * documentElement.scrollWidth aber weiterhin die alte zu
 * grosse Zahl - und dann sucht beim naechsten Mal jemand einen
 * Fehler, den es nicht mehr gibt.
 * ======================================================= */

html {
    overflow-x: clip;
}


/* =========================================================
 * 10. DAS BILD BLEIBT IM FENSTER, BIS WIRKLICH PLATZ IST
 *
 * Nikolay am 14.10.2026: *"solang visuell nichts
 * abgeschnitten wird kann ich damit leben. wenn es
 * breakpoints gibt wo das element weggeschnitten wird oder
 * einen horizontalen scrollbalken verursacht, dann will ich
 * es gefixt haben"*.
 *
 * Also nachgemessen, wie weit die Bilder mit 110 bis 150
 * Prozent Breite ueber den FENSTERRAND stehen:
 *
 *            1100   1280   1440   1500   1530   1600
 *   LKW       16     18     20     16      1      0
 *   Wohnmobil 13     15     16      -      -      0
 *   Ueber uns  6      7      8      -      -      0
 *   Start      0      0      0      -      -      0
 *
 * Ab rund 1530 ist Luft: Der Inhaltsbereich hoert bei 1470
 * auf, der Rest ist Rand, und der Ueberstand passt hinein.
 * Darunter passt er nicht - dort wuerde er abgeschnitten.
 *
 * Deshalb bis 1540 auf 100 Prozent deckeln: Das Bild sitzt
 * dann buendig in seinem Kasten, nichts wird abgeschnitten,
 * nichts schiebt. Ab 1541 steht es wieder ueber, wie
 * eingestellt - dort ist der Platz dafuer da.
 *
 * Die Grenze ist gemessen, nicht geraten; sie haengt an der
 * Inhaltsbreite von 1470px. Aendert die sich, muss sie neu
 * gemessen werden.
 * ======================================================= */
@media (max-width: 1540px) {

    .elementor img {
        max-width: 100% !important;
    }
}


/* =========================================================
 * 11. DER PFEIL-NACH-OBEN-KNOPF DECKT AUF DEM TELEFON TEXT ZU
 *
 * Der runde Knopf unten rechts (aus dem Theme, footer.php)
 * steht fest im Fenster bei right:15px, bottom:100px und ist
 * 50 Pixel gross. Auf dem Telefon ist der Textblock aber die
 * volle Fensterbreite - der Knopf liegt damit IMMER auf dem
 * Text. Nachgemessen: Unter seiner Mitte liegt ein Absatz;
 * beim Durchblaettern der Startseite verdeckt er auf fast
 * jedem Bildschirm die letzten zwei bis drei Zeichen von zwei
 * bis drei Zeilen.
 *
 * Am Schreibtisch ist das kein Problem: Dort steht er im
 * weissen Rand neben dem Inhalt. Deshalb nur unter 768px weg.
 *
 * Zum Seitenanfang kommt man auf dem Telefon mit einem Wisch
 * oder - bei iPhones - mit einem Tippen auf die Statusleiste.
 * Wenn du ihn lieber behalten willst, kann er auch kleiner und
 * weiter in die Ecke; verdecken wird er dann immer noch etwas.
 * ======================================================= */
@media (max-width: 767px) {

    .go-top {
        display: none !important;
    }
}