/* ===== Apple-Badge-Box – Frontend-Styles =====
   Kachel im Querformat: Cover und Text als Gruppe mittig; im Text oben der Titel,
   darunter der Preis (Bücher, Filme – falls vorhanden) und mittig darunter das Badge.
   Die vielen !important sorgen dafür, dass kein Theme die Kachel verbiegt. */

.abb-wrap {
    /* Immer mittig: Die Hülle nimmt die volle Breite ein und zentriert die Kachel
       per Flexbox – das hält auch, wenn Theme oder Editor Ränder/Ausrichtung überschreiben */
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    clear: both;
    float: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 28px auto !important;
    padding: 0 !important;
    text-align: center !important;
    align-self: stretch !important;    /* falls das Theme den Inhalt als linksbündige Flex-Spalte anordnet */
    flex: 1 1 100% !important;
}

.abb-wrap .abb-box {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    /* Alle Kacheln gleich groß (370 px, auf schmalen Bildschirmen volle Breite).
       Passt ein Titel nicht, wird seine Schrift kleiner – die Kachel wächst nie. */
    width: 370px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 6px 12px !important;      /* schmaler weißer Rand – fest, damit das Badge überall gleich sitzt */
    background: #ffffff !important;
    border: 1px solid #e3e3e8 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    color: #000000 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Alle Hover-/Fokus-/Aktiv-Zustände einfrieren – Theme-Stile überschreiben */
.abb-wrap .abb-box:hover,
.abb-wrap .abb-box:focus,
.abb-wrap .abb-box:active,
.abb-wrap .abb-box:visited {
    background: #ffffff !important;
    color: #000000 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    border-color: #e3e3e8 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

/* Tastatur-Bedienung: sichtbarer Fokusrahmen */
.abb-wrap .abb-box:focus-visible {
    outline: 2px solid #0071e3 !important;
    outline-offset: 3px !important;
}

/* Manche Themes hängen Icons an externe Links – hier nicht */
.abb-wrap .abb-box::before,
.abb-wrap .abb-box::after {
    content: none !important;
    display: none !important;
}

/* Inhalt: Cover und Text als Gruppe mittig in der Kachel */
.abb-wrap .abb-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;    /* Cover senkrecht mittig */
    justify-content: flex-start !important;   /* Cover immer links – nichts rutscht hin und her */
    gap: 16px;
    min-height: 112px !important;      /* immer so hoch wie ein Cover – auch bei flachem Serienbild */
    margin: 0 !important;
    padding: 0 !important;
}

/* Cover – immer 112 px hoch, die Breite ergibt sich aus dem Format
   (Album quadratisch, Buch und Filmposter hoch, Serienbild breit).
   Feste Höhe + width/height-Angaben im HTML: Der Platz steht schon fest,
   bevor das Bild geladen ist – sonst rechnet das Layout kurz mit 0 × 0. */
.abb-wrap .abb-cover {
    display: block !important;
    flex: 0 0 auto;
    width: auto !important;
    height: 112px !important;
    max-width: 200px !important;      /* 16:9 → 199 × 112 px */
    max-height: none !important;
    object-fit: cover !important;     /* nur bei noch breiteren Bildern: Ränder abschneiden statt verzerren */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(0, 0, 0, 0.10) !important;
    background: #f0f0f3 !important;
    opacity: 1 !important;
    float: none !important;
}



/* Text: Titel, Preis und darunter mittig das Badge – als Block neben dem Cover zentriert */
.abb-wrap .abb-text {
    position: static !important;       /* Badge richtet sich an der Kachel aus, nicht am Text */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;   /* Titel + Preis mittig im Bereich über dem Badge */
    align-items: flex-start !important;
    align-self: stretch !important;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 0 44px !important;      /* unten Platz fürs Badge: 112 − 44 = 68 px für Titel + Preis */
}

/* Alle Bausteine fest auf die Apple-Schrift und durchsichtig – sonst greifen
   Theme-Regeln wie „.entry-content span { font-family: … }“ auf die Zwischen-Container */
.abb-wrap .abb-content,
.abb-wrap .abb-text,
.abb-wrap .abb-name,
.abb-wrap .abb-price {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    background: none !important;
    border: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-align: left !important;
}

/* Titel – frontend.js passt Schriftgröße und Zeilenzahl an,
   damit er immer vollständig in die Kachel passt (1 → 2 → 3 → 6 Zeilen, 19 → 11 px) */
.abb-wrap .abb-name {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000000 !important;   /* Titel immer schwarz */
    font-size: 19px;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: manual !important;  /* nur zwischen Wörtern umbrechen, keine Silbentrennung */
}

/* Nur wenn selbst 4 Zeilen mit 9 px nicht reichen: nach 4 Zeilen mit „…“ kürzen */
.abb-wrap .abb-name.abb-clamp {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
}

/* Preis – bei Büchern und Filmen (falls Apple einen liefert), direkt unter dem Titel */
.abb-wrap .abb-price {
    position: static !important;
    display: block !important;
    margin: -3px 0 0 !important;
    padding: 0 !important;
    color: #6e6e73 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* Angebot: Normalpreis durchgestrichen, Angebotspreis hervorgehoben */
.abb-wrap .abb-price-old,
.abb-wrap .abb-price-new {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: normal !important;
    line-height: inherit !important;
    background: none !important;
    border: 0 !important;
}
.abb-wrap .abb-price-old {
    margin-right: 5px !important;
    color: #8e8e93 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}
.abb-wrap .abb-price-new {
    color: #d70015 !important;      /* Apple-Rot */
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Badge – in jeder Kachel exakt an derselben Stelle: 12 px über dem unteren Rand,
   waagerecht mittig im Textbereich (rechts neben einem 112-px-Cover) */
.abb-wrap .abb-badge {
    position: absolute !important;
    left: calc(50% + 66px) !important;
    bottom: 12px !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    display: block !important;
    width: 118px !important;
    height: 34px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    opacity: 1 !important;
    float: none !important;
}

/* Schmale Bildschirme: kleineres Cover; Badge-Zeile auch ohne JavaScript */
/* ===== Dark Mode: Box bleibt immer hell, Titel immer schwarz =====
   Sehr hohe Spezifität (html body … a … span), damit auch Dark-Mode-Plugins
   mit eigenen !important-Regeln die Farben nicht überschreiben können.
   frontend.js setzt die Titelfarbe zusätzlich direkt am Element. */

html body .abb-wrap {
    color-scheme: only light !important;   /* Browser-eigener Dark Mode (z. B. Chrome) */
}

html body .abb-wrap a.abb-box,
html body .abb-wrap a.abb-box:hover,
html body .abb-wrap a.abb-box:focus,
html body .abb-wrap a.abb-box:active,
html body .abb-wrap a.abb-box:visited {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Innere Container und Badge bleiben durchsichtig – Dark-Mode-Regeln wie
   „* { background-color: #222 !important }“ würden sonst dunkle Flächen in die Kachel malen */
html body .abb-wrap a.abb-box span.abb-content,
html body .abb-wrap a.abb-box span.abb-text,
html body .abb-wrap a.abb-box span.abb-name,
html body .abb-wrap a.abb-box span.abb-price,
html body .abb-wrap a.abb-box img.abb-badge {
    background: transparent !important;
    background-color: transparent !important;
}

html body .abb-wrap a.abb-box span.abb-name,
html body .abb-wrap a.abb-box:hover span.abb-name,
html body .abb-wrap a.abb-box:visited span.abb-name {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body .abb-wrap a.abb-box span.abb-price {
    color: #6e6e73 !important;
    -webkit-text-fill-color: #6e6e73 !important;
}

/* ===== Größen theme-fest =====
   Manche Themes setzen auf Mobilgeräten Regeln wie „img { width: auto !important }“.
   Diese sehr spezifischen Regeln halten Badge und Cover trotzdem in ihrer Größe
   (das Badge hat seine Größe zusätzlich direkt im HTML). */

html body .abb-wrap a.abb-box img.abb-badge {
    width: 118px !important;
    height: 34px !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

html body .abb-wrap a.abb-box img.abb-cover {
    width: auto !important;
    height: 112px !important;
    min-width: 0 !important;
    max-width: 200px !important;
    max-height: none !important;
}


/* ===== Immer mittig – auch gegen Theme-Regeln =====
   z. B. „.entry-content > * { margin-left: 0 }“, linksbündige Flex-Layouts
   oder schwebende (float) Elemente */
html body .abb-wrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

html body .abb-wrap a.abb-box {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    flex: 0 1 auto !important;
}

/* Angebotsfarben auch gegen Dark-Mode-Regeln */
html body .abb-wrap a.abb-box s.abb-price-old {
    color: #8e8e93 !important;
    -webkit-text-fill-color: #8e8e93 !important;
    text-decoration: line-through !important;
}
html body .abb-wrap a.abb-box span.abb-price-new {
    color: #d70015 !important;
    -webkit-text-fill-color: #d70015 !important;
}

/* ===== Nur anklicken – nichts markieren, kopieren oder herausziehen =====
   Gilt für die Kachel und alles darin; auf iPhone/iPad auch kein Menü beim langen Antippen */
html body .abb-wrap a.abb-box,
html body .abb-wrap a.abb-box * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
}

/* ===== Block-Editor-Vorschau =====
   Im Editor läuft frontend.js nicht – lange Titel werden dort auf 3 Zeilen begrenzt,
   damit sie nicht unter das fest sitzende Badge laufen (im Artikel passt das Skript an) */
.wp-block-apple-badge-box-badge .abb-wrap .abb-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    font-size: 14px;
}