/*
 * Google "Bevorzugte Quellen" (Preferred Sources) — Button, alle Portale.
 *
 * Bewusst ein eigenes, kleines Stylesheet statt Regeln in den Theme-Quellen:
 * bdf/editionf braeuchten dafuer einen Tailwind-Rebuild, landidee einen
 * SCSS-Recompile — und dessen Kompilat ist von der eingecheckten prod.css
 * weit abgedriftet, ein Rebuild wuerde ~1800 fremde Regeln mitaendern.
 * Gleiches Muster wie bdf/print.css: eigene Datei, kein Buildschritt.
 *
 * Aufbau:
 *   .google-preferred-link            gemeinsame Grundform (zentral)
 *   .google-preferred-link--<portal>  portalspezifische Optik
 *
 * Der Portal-Modifier kommt aus GooglePreferredSourceExtension und nutzt
 * dieselbe Portal-Erkennung wie der schema.org-Publisher.
 */

/* --- Grundform (alle Portale) ---------------------------------------- */

.google-preferred-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid #dcdcdc;
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Textfarbe bleibt in jedem Zustand schwarz — auch gegen die
   a:hover/a:visited-Regeln der Portale (Bootstrap/Tailwind). */
.google-preferred-link,
.google-preferred-link:link,
.google-preferred-link:visited,
.google-preferred-link:hover,
.google-preferred-link:focus,
.google-preferred-link:active {
    color: #000;
    text-decoration: none;
}

.google-preferred-link:hover,
.google-preferred-link:focus {
    background: #f5f5f5;
    border-color: #b5b5b5;
}

.google-preferred-link__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/* --- bdf: Pille ueber die volle Breite (Mockup-Referenz) -------------- */

/* 13px + schmales Padding, damit das Label auch in der schmalen Desktop-Sidebar
   (~316px) einzeilig bleibt — wie im Mockup. Bei 14px braucht der Text 260px,
   verfuegbar sind dort nur 252px. */
/* Rahmen im BDF-Rot (= primary.DEFAULT aus tailwind.bdf.config.js).
   Der Text bleibt schwarz, nur der Rahmen traegt die Markenfarbe. */
.google-preferred-link--bdf {
    display: flex;
    width: 100%;
    padding: 12px 14px;
    border-color: #ef0008;
    border-radius: 9999px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.google-preferred-link--bdf:hover,
.google-preferred-link--bdf:focus {
    background: #fcf3f3;
    border-color: #ef0008;
}

/* --- editionf: Pille in der Outline-Formensprache von .button-outline -- */

.google-preferred-link--editionf {
    padding: 12px 24px;
    border: 2px solid #191a23;
    border-radius: 32px;
    font-family: "Open Sans", sans-serif;
}

.google-preferred-link--editionf:hover,
.google-preferred-link--editionf:focus {
    background: #f4f4fb;
    border-color: #191a23;
}

/* --- landidee / donna / myself: eckig, passend zum Bootstrap-Bestand --- */
/* Dort hat .btn durchgaengig border-radius: 0 — eine Pille waere ein Bruch. */

.google-preferred-link--landidee,
.google-preferred-link--donna,
.google-preferred-link--myself {
    /* Nur nach unten Abstand: nach oben liefert das vorstehende Element
       (Lesezeit bzw. Autorenblock) bereits genug Luft. */
    margin-bottom: 24px;
    border-width: 2px;
    border-color: #000;
    border-radius: 0;
}

.google-preferred-link--landidee:hover,
.google-preferred-link--landidee:focus,
.google-preferred-link--donna:hover,
.google-preferred-link--donna:focus,
.google-preferred-link--myself:hover,
.google-preferred-link--myself:focus {
    background: #f2f2f2;
    border-color: #000;
}