/* Autoren-Box: Karte mit Foto, LinkedIn-Badge, Rolle, Bio, optional Mehr erfahren */

.author-box {
    --author-accent: #2d7a3e;
    --author-ink: #14181f;
    --author-copy: #44505c;
    --author-line: rgba(20, 24, 31, 0.08);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: stretch;
    margin: 2.75rem 0 0;
    padding: 1.5rem 1.65rem;
    max-width: 100%;
    background: #fff;
    color: var(--author-ink);
    border: 1px solid var(--author-line);
    border-radius: 22px;
}

.author-box,
.author-box * {
    box-sizing: border-box;
}

.author-box--text {
    grid-template-columns: 1fr;
}

.author-photo {
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.author-avatar,
.entry-content .author-box .author-avatar,
.blog-article-content .author-box .author-avatar {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 210px;
    object-fit: cover;
    object-position: center 18%;
    border-radius: 16px;
    margin: 0;
    border: 0;
    background: #e8ecef;
}

.author-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.author-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    font-size: 1.35rem;
}

.author-networks {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28em;
    line-height: 0;
}

.author-net,
.entry-content .author-box .author-net,
.blog-article-content .author-box .author-net {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 0.95em;
    height: 0.95em;
    border: 0;
    border-radius: 0.2em;
    background: #3d4654;
    color: #fff;
    line-height: 0;
    text-decoration: none;
    box-shadow: none;
    overflow: hidden;
    vertical-align: middle;
}

.author-box .author-net svg,
.entry-content .author-box .author-net svg,
.blog-article-content .author-box .author-net svg {
    display: block;
    width: 55%;
    height: 55%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.author-net--linkedin,
.entry-content .author-box .author-net--linkedin,
.blog-article-content .author-box .author-net--linkedin {
    background: none;
    border-radius: 0.18em;
}

.author-box .author-net--linkedin svg,
.entry-content .author-box .author-net--linkedin svg,
.blog-article-content .author-box .author-net--linkedin svg {
    width: 100%;
    height: 100%;
}

.author-net--linkedin { background: none; }
.author-net--linkedin:hover { background: none; color: #fff; filter: brightness(0.9); }
.author-net--xing { background: #006567; }
.author-net--xing:hover { background: #004b4d; color: #fff; }
.author-net--x { background: #111; }
.author-net--x:hover { background: #000; color: #fff; }
.author-net--instagram {
    background: linear-gradient(45deg, #f58529, #dd2a7b 52%, #8134af);
}
.author-net--instagram:hover { color: #fff; filter: brightness(1.08); }
.author-net--facebook { background: #1877f2; }
.author-net--facebook:hover { background: #0d65d9; color: #fff; }
.author-net--github { background: #181717; }
.author-net--github:hover { background: #000; color: #fff; }
.author-net--youtube { background: #ff0000; }
.author-net--youtube:hover { background: #d40000; color: #fff; }
.author-net--medium { background: #111; }
.author-net--medium:hover { background: #000; color: #fff; }
.author-net--amazon { background: #ff9900; color: #111; }
.author-net--amazon:hover { background: #e68a00; color: #111; }
.author-net--tiktok { background: #111; }
.author-net--tiktok:hover { background: #000; color: #fff; }
.author-net--bluesky { background: #1185fe; }
.author-net--bluesky:hover { background: #0a6fe0; color: #fff; }
.author-net--web { background: #3d4654; }
.author-net--web:hover { background: #2a313c; color: #fff; }

.author-name,
.entry-content .author-box .author-name,
.blog-article-content .author-box .author-name {
    display: inline;
    margin: 0;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--author-ink);
}

.author-role,
.entry-content .author-box .author-role,
.blog-article-content .author-box .author-role {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--author-accent);
}

.author-bio,
.entry-content .author-box .author-bio,
.blog-article-content .author-box .author-bio {
    margin: 0.85rem 0 0;
    max-width: 62ch;
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--author-copy);
}

.author-more,
.entry-content .author-box .author-more,
.blog-article-content .author-box .author-more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.4em;
    margin-top: auto;
    padding: 1.35rem 0 0.12em;
    color: var(--author-ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border: 0;
    border-bottom: 2px solid var(--author-accent);
    box-shadow: none;
    background: none;
}

.author-more-arrow {
    display: block;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.author-more:hover .author-more-arrow {
    transform: translateX(3px);
}

.author-net:focus-visible,
.author-more:focus-visible {
    outline: 2px solid var(--author-accent);
    outline-offset: 3px;
}

.author-box ::selection {
    background: var(--author-accent);
    color: #fff;
}

@media (max-width: 640px) {
    .author-box {
        grid-template-columns: 1fr;
        gap: 1.15rem;
        padding: 1.15rem 1.15rem 1.25rem;
        border-radius: 18px;
    }

    .author-photo {
        height: auto;
    }

    .author-avatar,
    .entry-content .author-box .author-avatar,
    .blog-article-content .author-box .author-avatar {
        height: auto;
        min-height: 0;
        max-height: 240px;
        aspect-ratio: 16 / 11;
        object-position: center 18%;
    }

    .author-more,
    .entry-content .author-box .author-more,
    .blog-article-content .author-box .author-more {
        margin-top: 1.15rem;
        padding-top: 0;
    }

    .author-heading {
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .author-more-arrow {
        transition: none;
    }

    .author-net--instagram:hover {
        filter: none;
    }
}