/* =================================================================== */
/* PHARMASPEKTRUM-STYLES.CSS - General typography and utility styles   */
/* =================================================================== */

/* 1. Typography
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
    line-height: var(--lh-tight);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.005em;
}

p, ul, ol, table {
    margin: 0 0 var(--sp-4);
}

/* 2. Crawler-Obfuscation for Impressum/Datenschutz
   ------------------------------------------------------------ */
.a { font-style: italic; display: none; }
.b { font-style: normal; display: none; }

@media (min-width: 128px) {
    .page-body .a {
        font-style: italic;
        color: rgba(255, 255, 255, 0.05);
        position: absolute;
        display: inline;
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        width: 1px;
        overflow: hidden;
    }

    .page-body .b {
        font-style: normal;
        display: inline;
    }
}

/* 3. Buttons
   ------------------------------------------------------------ */
.btn-primary {
    display: inline-block;
    background: var(--accent);
    color: var(--ui-white);
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--r-sm);
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: var(--fs-base);
}

.btn-primary:hover {
    background: var(--accent-hover);
    color: var(--ui-white);
}

.btn-primary[aria-busy="true"] {
    opacity: 0.8;
    cursor: progress;
}

.btn-primary[aria-busy="true"]::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.5em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Ohne Drehung bleibt der Ring als statischer Zustandsanzeiger stehen. */
@media (prefers-reduced-motion: reduce) {
    .btn-primary[aria-busy="true"]::before {
        animation: none;
    }
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--accent);
    text-decoration: none;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    font-weight: 600;
    transition: background 0.15s ease;
}

.btn-secondary:hover {
    background: var(--accent-faint);
}

/* 4. Tastatur-Fokus
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}