/*!
 * yourdevice.ch — eigenes CSS
 *
 * Umgezogen am 04.09.2026 aus dem Customizer ("Zusaetzliches CSS"), Inhalt
 * unveraendert. Dort stand es jahrelang, war aber nirgends versioniert und
 * schwer zu ueberblicken.
 *
 * WICHTIG, LADEREIHENFOLGE: diese Datei MUSS nach den Stylesheets von Theme
 * und Plugins geladen werden. Das Customizer-CSS stand ganz am Ende des
 * Kopfes und gewann dadurch jeden Gleichstand bei der Spezifitaet. Mindestens
 * die Cookie-Banner-Regel weiter unten benutzt denselben Selektor wie
 * Complianz und gewinnt NUR durch die Reihenfolge. Die Einbindung in
 * functions.php haengt deshalb an wp_enqueue_scripts mit Prioritaet 9999.
 * Wer sie auf die uebliche Prioritaet zuruecksetzt, bricht das Banner.
 *
 * Nicht hier drin, sondern weiterhin in mu-plugins:
 *   woocommerce-myaccount-styling.php  Mein-Konto-Seiten
 *   yd-shop-kategorietext.php          Shop-Kategorieseiten
 *   yd-tonline-warning.php             Kasse und Kontaktformular
 */

/* 1) Standard-Listen im Beitragstext sauber einrücken */
.entry-content :is(ul, ol),
.wp-block-post-content :is(ul, ol) {
  padding-inline-start: 1.5rem;
  margin: 0 0 1em;
  list-style-position: outside;
}

/* 2) Nur die Kadence-Posts-Block-Liste links bündig machen (keine Bullets) */
ul.kb-posts-list,
ul.kadence-posts-list,
.wp-block-kadence-posts ul.kb-posts-list,
.wp-block-kadence-posts ul.kadence-posts-list {
  padding-inline-start: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}

/* 3) (Optional) Abstand zwischen den Kacheln steuern */
.kb-posts-list > li.kb-post-list-item {
  margin: 0 0 1.25rem;
}

/* 4) Falls in den Kachel-Teasern echter Listen-Text vorkommt,
      dort wieder normale Einrückung zulassen */
.kb-posts-list li .entry-content-wrap :is(ul, ol) {
  padding-inline-start: 1.5rem;
  list-style: initial;
}


.splide__track {
    height: 450px !important;
}

.woocommerce-checkout #payment ul.payment_methods li img {
	margin: 6px;
}

.btcpay-form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Stellt sicher, dass das Formular die volle Breite des Containers einnimmt */
}

.sold-out-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.7); /* Hintergrundfarbe anpassen */
    color: #fff; /* Textfarbe anpassen */
    font-size: 30px;
	  font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6; /* Anpassen, um die Sichtbarkeit zu ändern */
    z-index: 2; /* Stellen Sie sicher, dass das Overlay über dem Bild liegt */
    pointer-events: none; /* Klicks auf das Overlay deaktivieren */
}

.woocommerce ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product:hover .sold-out-overlay {
    display: none; /* Das Overlay beim Hover ausblenden (optional) */
}

h2.entry-title a {
	color: #215387;
}

h2.entry-title a:hover {
	color: #e0631a;
	text-decoration: none;
}

.page-id-5 .entry.loop-entry,
.page-id-910 .entry.loop-entry,
.page-id-5249 .entry.loop-entry,
.page-id-1344 .entry.loop-entry,
.page-id-914 .entry.loop-entry,
.page-id-6479 .entry.loop-entry,
.page-id-11356 .entry.loop-entry,
.page-id-912 .entry.loop-entry
{
  min-height: 650px;
}


.entry.loop-entry a[rel="noopener noreferrer"] {
    display: none;
}

.entry.loop-entry {
	border: 0px solid #333;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover-Effekt der Karten: auf der Alt-Hardware-Seite 9106 bewusst aus */
body:not(.page-id-9106) .entry.loop-entry:hover {
	transform: scale(1.03);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}

.page-id-19856 .entry.single-entry {
	box-shadow: 0 0 0 0 transparent;
}

.page-id-5 .wp-block-image,
.page-id-8694 .wp-block-image {
	margin-top: 10px;
}

.wc-block-formatted-money-amount {
	min-width: 100px !important;
}

@media screen and (max-width: 1024px){
    .archive.has-sidebar .content-container {
        display: flex;
        flex-direction: column-reverse;
    }
}

.wc-block-product-categories {
  border: 2mm solid #EDF2F7; 
  padding: 10px;
  background-color: white;
  border-radius: 25px;
}

.page-id-9106 .entry {
	box-shadow: none;
}

code {
	color: blue;
	font-size: 17px;
}

.woocommerce-Price-amount {
	color: #6AED12;
}

body.single-post .content-wrap {
    display: flex;
    flex-direction: column;
}

body.single-post .content-wrap .entry-related {
    order: 10;
}

.comments-area {
	margin: 0px;
}

.page-id-9555 .wp-block-details summary {
	font-size: 20px;
}

.single-product .post-9948 .button[type="submit"] {
    display: none;
}

.woocommerce div.product form.cart .variations select {
	max-width: 90%;
}

.page-id-5 .wp-block-column,
.page-id-8694 .wp-block-column,
.page-id-9673 .wp-block-column,

.page-id-10712 .wp-block-column,
.page-id-9555 .wp-block-post,
.page-id-9389 .wp-block-post,
#block1, #block2, #block3, #block4, #block5, #block6 {
    border: 0px solid #333;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    padding: 15px;
}

.wc-block-product-categories-list-item__name {
    font-size: 16px;
    color: grey;
}

.wc-block-product-categories-list-item__name {
    color: #215387;
	  font-weight: bold;
}

.wc-block-product-categories-list-item__name:hover {
    color: #e0631a;
}

.hidden-honeypot {
    display: none !important;
    visibility: hidden !important;
}

/* --- "Wie läuft das ab?" – Prozess-Schritte --- */

body.page-id-20257 .entry-content ol {
  list-style: none;
  counter-reset: steps;
  padding-left: 0;
  max-width: 700px;
}

body.page-id-20257 .entry-content ol li {
  counter-increment: steps;
  position: relative;
  padding: 1.2rem 1.5rem 1.2rem 4.5rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.2s ease;
  min-height: 3.5rem;
}

body.page-id-20257 .entry-content ol li:hover {
  border-color: rgba(231, 76, 60, 0.3);
}

body.page-id-20257 .entry-content ol li::before {
  content: counter(steps);
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 2.2rem;
  text-align: center;
}

body.page-id-20257 .entry-content ol li strong {
  color: #e74c3c;
}

/* Verbindungslinie zwischen Steps */
body.page-id-20257 .entry-content ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 2.25rem;
  bottom: -1rem;
  width: 2px;
  height: 1rem;
  background: rgba(231, 76, 60, 0.25);
}


/* Produktkarten Seite 9106 */
/* Das Theme setzt .woocommerce .content-bg .product.entry.loop-entry auf box-shadow:none.
   Deshalb hier genug Spezifitaet, sonst wirken die Kacheln flach. */
body.page-id-9106 li.wc-block-product.entry.loop-entry.content-bg {
    display: flex;
    flex-direction: column;
    background: var(--global-palette9, #fff);
    border: 1px solid var(--global-palette7, #EDF2F7);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(26, 32, 44, 0.10);
}
/* Der Knopf sitzt sonst direkt unter dem Preis und damit je nach Titellaenge
   auf unterschiedlicher Hoehe. margin-top:auto schiebt ihn ans Kartenende. */
body.page-id-9106 li.wc-block-product.entry.loop-entry .wp-block-woocommerce-product-button {
    margin-top: auto;
    padding-top: 0.75rem;
}
body.page-id-9106 li.wc-block-product.entry.loop-entry .wc-block-components-product-button__button {
    width: 100%;
}

/* Gleiche Kartenhoehe in den drei Spalten */
/* Die Spalten sind durch das Flex-Layout schon gleich hoch. Die Karte darin
   war nur so hoch wie ihr Inhalt, deshalb war die rechte kuerzer. Die Hoehe
   muss durch jede Zwischenebene durchgereicht werden. */
body.page-id-9106 .wp-block-column {
    display: flex;
    flex-direction: column;
}
body.page-id-9106 .wp-block-column > .wp-block-woocommerce-product-collection,
body.page-id-9106 .wp-block-column .wc-block-product-template {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
body.page-id-9106 .wp-block-column li.wc-block-product {
    flex: 1 1 auto;
}

/* Bildunterschriften unter den drei Produkten gleich hoch */
/* Die drei Texte sind unterschiedlich lang und damit unterschiedlich hoch.
   Weil sie unter der Karte sitzen, blieb der Karte je Spalte anders viel Platz.
   Gemeinsame Mindesthoehe nur ab Tablet, mobil stehen die Spalten untereinander. */
@media (min-width: 768px) {
    body.page-id-9106 .wp-block-column > .wp-block-woocommerce-product-collection > p.has-background {
        min-height: 5.2em;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }
}

/* Hinweiskasten am Beitragsende */
/* Gleiche Optik wie der Einleitungskasten auf den Shop-Kategorien.
   Der Inhaltsbereich ist #fefefe, deshalb palette7 als Fuellung, sonst unsichtbar. */
.yd-hinweis {
    background: var(--global-palette7, #EDF2F7);
    border-left: 5px solid var(--global-palette1, #2B6CB0);
    border-radius: 6px;
    padding: 1.3rem 1.5rem 1.3rem 1.7rem;
    margin: 2.2rem 0 1.5rem;
    box-shadow: 0 1px 3px rgba(26, 32, 44, 0.07);
    color: var(--global-palette3, #1A202C);
    line-height: 1.6;
}
.yd-hinweis a {
    color: var(--global-palette1, #2B6CB0);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.yd-hinweis a:hover { color: var(--global-palette2, #215387); }
@media (max-width: 767px) {
    .yd-hinweis { padding: 1.1rem 1.1rem 1.1rem 1.3rem; margin: 1.7rem 0 1.2rem; }
}

/* --- Cookie-Banner: einblenden über transform statt bottom ---------------
   Chrome zählt Bewegungen über bottom/top/left/right als Layout-Verschiebung,
   Bewegungen über transform bewusst nicht. Das Banner fuhr eine Sekunde lang
   über eine halbe Bildschirmhöhe herein und war damit die einzige CLS-Quelle
   der Seite. Gemessen am 04.09.2026 mit yd-cls: 0.12 vorher, 0.0000 nachher,
   auf Start, Shop, Produkt, Infozentrale und Kontakt.
   Die Ruhelage bottom:0 entspricht dem, was die alte Animation am Ende
   ohnehin erreichte. Kein !important: das Zusätzliche CSS steht im Quelltext
   nach dem von Complianz und gewinnt schon dadurch. Auf transform darf
   ohnehin kein !important, sonst schlüge es die Animation und das Banner
   bliebe unsichtbar. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
    bottom: 0;
    transform: translateY(110%);
    animation: yd-cmplz-einblenden 1s forwards;
}
@keyframes yd-cmplz-einblenden { to { transform: translateY(0); } }

/* --- Liberapay-Spendenknopf im Fussbereich -------------------------------
   Bis zum 04.09.2026 lud dafuer ein Skript von liberapay.com, und zwar VOR
   jeder Zustimmung im Cookie-Banner. Es war in Complianz nicht als Dienst
   hinterlegt und stand auf keiner Blockierliste, jeder Besucher schickte
   also IP und Browser dorthin, bevor er etwas geklickt hatte. Das Skript
   erzeugte nur diesen Stil und einen Link mit eingebettetem SVG, beides
   statisch. Beides steht jetzt hier und im Widget block-44, die
   Fremdanfrage entfaellt. Uebernommen ist die Gestaltung von Liberapay
   unveraendert, damit der Knopf gleich aussieht. */
html > body .liberapay-btn {
    background-color: #f6c915;
    border-radius: 4px;
    color: #1a171b;
    display: inline-block;
    font-family: Helvetica Neue,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    padding: 5px 7px 3px;
    position: relative;
    text-decoration: none;
}
html > body .liberapay-btn:hover {
    background-color: #fbce1a;
}
.liberapay-btn > svg {
    position: absolute;
    left: 7px;
    top: 7px;
}
.liberapay-btn > span {
    margin-left: 19px;
}

/* Der Knopf erbte im Fussbereich die Linkfarbe des Themes und war blau und
   unterstrichen statt dunkel auf Gelb. Die Regeln von Kadence
   (.site-footer .site-middle-footer-wrap a) haben hoehere Spezifitaet als
   die von Liberapay (html > body .liberapay-btn), sie gewinnen also
   unabhaengig von der Reihenfolge. Das war schon vor dem Umbau am
   04.09.2026 so und ist hier gleich mit geradegezogen. */
.site-footer .site-middle-footer-wrap a.liberapay-btn,
.site-footer .site-middle-footer-wrap a.liberapay-btn span {
    color: #1a171b;
    text-decoration: none;
}

/* --- Produktkarten des Product-Collection-Blocks ------------------------
   Der Block setzt seine Kinder ohne Innenabstand direkt in die Karte, und
   eine Theme-Regel (.single-content ...:last-child) nimmt dem letzten Kind
   den unteren Abstand. Der Knopf "Ausfuehrung waehlen" klebte dadurch auf
   der Kartenkante, der Titel auf der linken. Zum Vergleich: im Shop-Archiv
   sorgt der Wrapper .product-details fuer 25 px seitlich und 33 px unten.
   Das Bild bleibt bewusst randbuendig, wie im Shop auch.
   Seitlich .5rem statt mehr, damit der Knopftext auf zweispaltigen
   Mobilkarten einzeilig bleibt. Gemessen am 04.09.2026: Karte 382 -> 423 px.
   Auf Seite 9106, die denselben Block nutzt, aendert sich nichts ausser dem
   Knopfeinzug — dort stehen die 16 px unten bereits. */
.wp-block-woocommerce-product-template .wc-block-product {
    padding-bottom: 1rem;
}
.wp-block-woocommerce-product-template .wc-block-product
  > :not(.wc-block-components-product-image) {
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Knoepfe einer Reihe auf gleiche Hoehe.
   Das Raster streckt die Karten einer Reihe bereits auf gleiche Hoehe, der
   Inhalt sitzt aber oben — bei fuenf gegen sechs Titelzeilen stand der Knopf
   deshalb 25 px hoeher als der daneben. Die Karte wird zur Flex-Spalte, der
   Knopf per margin-top:auto nach unten geschoben. Gemessen am 04.09.2026:
   mobil 2 von 5 Reihen unbuendig, am Desktop 2 von 3, danach jeweils keine.
   Kartenhoehen und Bildmasse bleiben unveraendert.
   Dieselbe Loesung steht weiter oben schon fuer Seite 9106, dort aber an
   die Seiten-ID UND an die Klassen .entry.loop-entry.content-bg gebunden,
   die der Beitrag an seinen Karten gar nicht traegt. Diese Regel hier gilt
   fuer den Block ueberall; auf 9106 ist sie wirkungsgleich zur dortigen. */
.wp-block-woocommerce-product-template .wc-block-product {
    display: flex;
    flex-direction: column;
}
.wp-block-woocommerce-product-template .wc-block-product
  > .wp-block-woocommerce-product-button {
    margin-top: auto;
}

/* --- Ähnliche Beiträge: Luft in der Slider-Spur -------------------------
   Die Karte war exakt so hoch wie die Spur (beides 450 px, siehe die Regel
   .splide__track weiter oben), und die Spur kappt mit overflow:hidden. Die
   Karte klebte damit an der Kante, und beim Hover wurde die um drei Prozent
   vergrösserte Karte samt Schatten abgeschnitten.

   Ein Abstand an der Karte selbst hilft nicht: sie wird per flex:1 auf die
   Spurhöhe gestreckt. Der Platz muss INNERHALB der Spur entstehen. Weil
   box-sizing auf border-box steht, bleibt die Spur 450 px hoch und die Karte
   wird kleiner — gemessen am 04.09.2026: Karte 450 auf 414 px, oben wie
   unten 18 px frei. Genug für die Vergrösserung beim Hover. */
.entry-related .splide__track {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* Dasselbe waagrecht, aber andersherum gelöst.
   Innen polstern geht hier nicht: Splide setzt Breite und Abstand der Slides
   inline (width: calc(33.3333% - 26.6667px), margin-right: 40px) und rechnet
   die Breite aus dem Abstand. Wer an der Spur zieht, verschiebt diese Rechnung
   und die Karten werden breiter.
   Deshalb bleibt die Spur unangetastet und hört auf zu kappen; geschnitten wird
   eine Ebene höher am Slider selbst, dessen Kappzone per negativem Aussenabstand
   14 px weiter nach links und rechts reicht. Das Polster gleicht den Versatz aus,
   die Karten stehen also exakt wie vorher.
   Gemessen am 04.09.2026: Kappkante von 85..940 auf 71..954, Spur unverändert
   85..940, Karte weiter 258 px breit, Abstand zwischen den Karten weiter 40 px,
   weiterhin genau drei Karten sichtbar. Bei 40 px Lücke wird dadurch kein
   Nachbar sichtbar. */
.entry-related .splide__track {
    overflow: visible;
}
.entry-related .entry-related-carousel {
    overflow: hidden;
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
}

/* Die Punkteleiste hängt absolut positioniert 25 px UNTER dem Slider und wurde
   durch dessen neue Kappzone unsichtbar. Der Slider bekommt deshalb unten
   30 px Polster, damit die Punkte innerhalb der Kappzone liegen, und gibt im
   Gegenzug seinen bisherigen Aussenabstand von 30 px ab. Die Punkte rücken um
   denselben Betrag zurück und landen exakt wieder da, wo sie waren.
   Gemessen am 04.09.2026: Punkte bei 750 wie vorher, Abstand Karte zu Punkten
   26 px wie vorher, Blockhöhe 662 px wie vorher. */
.entry-related .entry-related-carousel {
    padding-bottom: 30px;
    margin-bottom: 0;
}
.entry-related .splide__pagination {
    bottom: 5px;
}