/* Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Premium Tabellenlayout und Personenbild-Galerie */

/* .screen-steckbrief-layout | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Seitencontainer | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mobile-Overflow-Schutz */
.screen-steckbrief-layout {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0.75rem 0 2.5rem;
    overflow-x: hidden;
}

/* .screen-steckbrief-hero | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Hero mit Galerie | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mobile kompakter */
.screen-steckbrief-hero {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #061320 0%, #0f2740 40%, #173c63 100%);
    color: #f6f9ff;
    margin-bottom: 1.5rem;
    min-width: 0;
}

/* .screen-steckbrief-hero-content | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Linke Hero-Spalte | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Textumbruch Mobile */
.screen-steckbrief-hero-content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* .screen-steckbrief-role | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Rollenbeschreibung | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-change-provenance | Hero-Kicker und Bildquellen-Link entfernt */
.screen-steckbrief-role {
    margin: 0;
    color: #dce9ff;
}

/* .screen-steckbrief-role .screen-steckbrief-external-link-on-dark | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Firmenname eigene Zeile unter Rolle */
.screen-steckbrief-role .screen-steckbrief-external-link-on-dark {
    display: block;
    margin-top: 0.35rem;
    overflow-wrap: normal;
    word-break: normal;
}

/* .screen-steckbrief-hero-intro | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Introtext */
.screen-steckbrief-hero-intro {
    margin: 0;
    color: #eff5ff;
}

/* .screen-steckbrief-hero-gallery | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Portrait zentriert statt Vollbreiten-Banner */
.screen-steckbrief-hero-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-width: 0;
}

/* .screen-steckbrief-hero-portrait-frame | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Festes Portrait-Seitenverhältnis für Gesichtsfokus */
.screen-steckbrief-hero-portrait-frame {
    position: relative;
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.28);
}

/* .screen-steckbrief-hero-image-main | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Cover mit Kopf-Fokus im Portrait-Rahmen */
.screen-steckbrief-hero-image-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* .screen-steckbrief-media-grid | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Karten-Grid Berichte/Interviews */
.screen-steckbrief-media-grid {
    display: grid;
    gap: 1rem;
    margin-top: 0.85rem;
}

/* .screen-steckbrief-media-video-wrapper | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | 16:9 Video-Container, nur Videos in WOXOW-Sektion */
.screen-steckbrief-media-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 0.9rem;
    border: 1px solid #d7e1ef;
    background: #000000;
    margin-top: 0.85rem;
}

/* .screen-steckbrief-media-video-iframe | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | WOXOW-Imagefilm */
.screen-steckbrief-media-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* .screen-steckbrief-section | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Standard-Sektion */
.screen-steckbrief-section {
    margin-bottom: 2rem;
}

/* .screen-steckbrief-table-wrapper | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Tabellen-Container | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mobile ohne horizontales Scrollen */
.screen-steckbrief-table-wrapper {
    margin-top: 0.85rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    border-radius: 0.85rem;
    border: 1px solid #d7e1ef;
    background: #ffffff;
}

/* .screen-steckbrief-profile-table-wrapper | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Kurzprofil mit hohem Kontrast auf hellem Kartenhintergrund */
.screen-steckbrief-profile-table-wrapper {
    background: #ffffff;
    border-color: #c5d4ea;
}

/* .screen-steckbrief-profile-table | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Zweispaltiges Kurzprofil ohne Textduplikate */
.screen-steckbrief-profile-table,
.screen-steckbrief-competence-key-value-table {
    table-layout: fixed;
}

/* .screen-steckbrief-strengths-list | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Stärken als Premium-Karten-Grid */
.screen-steckbrief-strengths-list {
    display: grid;
    gap: 0.85rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

/* .screen-steckbrief-strength-item | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Einzelne Stärken-Karte mit Checkmark */
.screen-steckbrief-strength-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
    margin: 0;
    padding: 1rem 1.1rem 1rem 1.15rem;
    border: 1px solid #c5d4ea;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    color: #1a2332;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    overflow-wrap: anywhere;
    box-shadow: 0 1px 4px color-mix(in srgb, #0f2740 6%, transparent);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* .screen-steckbrief-strength-item::before | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Linke Akzentleiste */
.screen-steckbrief-strength-item::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 0;
    width: 0.22rem;
    border-radius: 0 0.2rem 0.2rem 0;
    background: linear-gradient(180deg, #1c7a7e 0%, #173c63 100%);
}

/* .screen-steckbrief-strength-item::after | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Checkmark-Kreis */
.screen-steckbrief-strength-item::after {
    content: '';
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    background-color: #e8f4f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.25L6.75 11L12 5.5' stroke='%231c7a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.85rem 0.85rem;
    border: 1px solid rgba(28, 122, 126, 0.25);
    order: -1;
}

/* .screen-steckbrief-services-list | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Kernkompetenzen als Premium-Karten-Grid */
.screen-steckbrief-services-list {
    display: grid;
    gap: 0.75rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

/* .screen-steckbrief-services-item | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Einzelne Kernkompetenz-Kachel mit Layer-Icon */
.screen-steckbrief-services-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    margin: 0;
    padding: 1.05rem 1rem 0.95rem 1.1rem;
    border: 1px solid #c5d4ea;
    border-radius: 0.75rem;
    background: linear-gradient(145deg, #ffffff 0%, #f3f8ff 55%, #eaf2fc 100%);
    color: #0a1628;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-height-relaxed);
    overflow-wrap: anywhere;
    box-shadow: 0 2px 8px color-mix(in srgb, #0f2740 7%, transparent);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* .screen-steckbrief-services-item::before | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Obere Akzentleiste */
.screen-steckbrief-services-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.65rem;
    right: 0.65rem;
    height: 0.2rem;
    border-radius: 0 0 0.15rem 0.15rem;
    background: linear-gradient(90deg, #173c63 0%, #1c7a7e 50%, #3b82f6 100%);
}

/* .screen-steckbrief-services-item::after | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Layer-Icon für Kernkompetenz */
.screen-steckbrief-services-item::after {
    content: '';
    flex-shrink: 0;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.4rem;
    background-color: #e8f0fa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2.25L2.75 5.25L8 8.25l5.25-3L8 2.25z' stroke='%23173c63' stroke-width='1.35' stroke-linejoin='round'/%3E%3Cpath d='M2.75 8.25L8 11.25l5.25-3' stroke='%231c7a7e' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.75 10.75L8 13.75l5.25-3' stroke='%233b82f6' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.95rem 0.95rem;
    border: 1px solid rgba(23, 60, 99, 0.18);
    order: -1;
}

/* .screen-steckbrief-competence-group | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Abstand zwischen Kernkompetenzen und Stärken */
.screen-steckbrief-competence-group {
    margin-top: 1.35rem;
}

/* .screen-steckbrief-competence-group .base-headline-h3 | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Unterüberschrift kompakt */
.screen-steckbrief-competence-group .base-headline-h3 {
    margin-bottom: 0.55rem;
}

/* .screen-steckbrief-profile-table th | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Kurze Label-Spalte mit klarer Lesbarkeit */
.screen-steckbrief-profile-table th,
.screen-steckbrief-competence-key-value-table th {
    width: 32%;
    background: #edf3fb;
    color: #0a1628;
    font-weight: 700;
}

/* .screen-steckbrief-profile-table td | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Wert-Spalte mit dunklem Text auf Weiß */
.screen-steckbrief-profile-table td,
.screen-steckbrief-competence-key-value-table td {
    background: #ffffff;
    color: #111111;
}

/* .screen-steckbrief-profile-stat | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Kennzahl hervorgehoben */
.screen-steckbrief-profile-stat {
    display: inline-block;
    margin-right: 0.35rem;
    color: #1c7a7e;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: 1.2;
}

/* .screen-steckbrief-profile-table tbody tr:nth-child(even) td | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Zebra für bessere Zeilenführung */
.screen-steckbrief-profile-table tbody tr:nth-child(even) td,
.screen-steckbrief-competence-key-value-table tbody tr:nth-child(even) td {
    background: #f8fbff;
}

/* .screen-steckbrief-profile-table tbody tr:nth-child(even) th | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Zebra Label-Spalte */
.screen-steckbrief-profile-table tbody tr:nth-child(even) th,
.screen-steckbrief-competence-key-value-table tbody tr:nth-child(even) th {
    background: #e4edf9;
}

/* .screen-steckbrief-table | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Einheitliches Tabellenformat */
.screen-steckbrief-table {
    width: 100%;
    border-collapse: collapse;
}

/* .screen-steckbrief-table th | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Tabellenkopf und Label-Zellen */
.screen-steckbrief-table th {
    text-align: left;
    background: #eef4fc;
    color: #0f2740;
    font-weight: 600;
}

/* .screen-steckbrief-table th,.screen-steckbrief-table td | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Tabellenzellen | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mobile kompakter */
.screen-steckbrief-table th,
.screen-steckbrief-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #e4ecf7;
    vertical-align: top;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* .screen-steckbrief-table tbody tr:last-child td | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Letzte Zeile ohne Rand */
.screen-steckbrief-table tbody tr:last-child td {
    border-bottom: none;
}

/* .screen-steckbrief-career-grid | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Responsives Karten-Grid Referenzen/Speaker/Bildung */
.screen-steckbrief-career-grid {
    display: grid;
    gap: 1rem;
    margin-top: 0.85rem;
    grid-template-columns: minmax(0, 1fr);
}

/* .screen-steckbrief-info-grid | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Info-Grid Legacy */
.screen-steckbrief-info-grid {
    display: grid;
    gap: 1rem;
    margin-top: 0.85rem;
}

/* .screen-steckbrief-info-item | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Infobox | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Einheitliche Karriere-Karten */
.screen-steckbrief-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #c5d4ea;
    border-radius: 0.85rem;
    background: #ffffff;
    padding: 1.1rem 1.15rem;
}

/* .screen-steckbrief-info-item-title | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Kartenüberschrift H3 */
.screen-steckbrief-info-item-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.35;
    color: #0a1628;
}

/* .screen-steckbrief-career-card .screen-steckbrief-body-text | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Lesbarer Fließtext in Karriere-Karten */
.screen-steckbrief-career-card .screen-steckbrief-body-text {
    color: #1a2332;
}

/* .screen-steckbrief-body-text | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Fließtext */
.screen-steckbrief-body-text {
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* .screen-steckbrief-weblinks-section | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-change-provenance | Weblinks statt Sales-CTA | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Abschluss-Sektion aufgeräumt */
.screen-steckbrief-weblinks-section {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.35rem;
    border-radius: 0.85rem;
    border: 1px solid #c5d4ea;
    background: #f8fbff;
}

/* .screen-steckbrief-weblinks-intro | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules | Weblinks-Einleitung */
.screen-steckbrief-weblinks-intro {
    margin: 0.75rem 0 1rem;
}

/* .screen-steckbrief-weblinks-list | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Icon-Leiste horizontal */
.screen-steckbrief-weblinks-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

/* .screen-steckbrief-weblinks-item | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Icon-Listenpunkt */
.screen-steckbrief-weblinks-item {
    margin: 0;
    padding: 0;
}

/* .screen-steckbrief-weblink-icon-link | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Icon-Link mit Tooltip */
.screen-steckbrief-weblink-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #d7e1ef;
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--color-link);
    text-decoration: none;
    box-shadow: 0 1px 4px color-mix(in srgb, #0f2740 8%, transparent);
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* .screen-steckbrief-weblink-icon-link:hover | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Icon-Link Hover */
.screen-steckbrief-weblink-icon-link:hover {
    border-color: var(--color-link);
    background: #f0f7ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px color-mix(in srgb, #0f2740 12%, transparent);
}

/* .screen-steckbrief-weblink-icon | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | SVG-Icon Groesse */
.screen-steckbrief-weblink-icon {
    display: block;
    width: 22px;
    height: 22px;
}

/* .screen-steckbrief-weblink-icon-link--linkedin | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | LinkedIn Markenfarbe */
.screen-steckbrief-weblink-icon-link--linkedin {
    color: #0a66c2;
}

/* .screen-steckbrief-weblink-icon-link--google | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Google Profilfarbe */
.screen-steckbrief-weblink-icon-link--google {
    color: #34a853;
}

/* .screen-steckbrief-weblink-icon-link--website | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Website Iconfarbe */
.screen-steckbrief-weblink-icon-link--website {
    color: #0f2740;
}

/* .screen-steckbrief-external-link | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules | Externe Links auf hellem Hintergrund | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Lesbarkeit Weblinks */
.screen-steckbrief-external-link {
    color: var(--color-link);
    overflow-wrap: anywhere;
}

/* .screen-steckbrief-external-link-on-dark | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Kontrastreicher Firmenlink im dunklen Hero */
.screen-steckbrief-external-link-on-dark {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #f39324;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.12em;
}

/* .screen-steckbrief-external-link-on-dark:hover | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Hover-Feedback Firmenlink Hero */
.screen-steckbrief-external-link-on-dark:hover {
    color: #f39324;
    text-decoration-color: #ffffff;
}

/* .screen-steckbrief-media-intro | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Einleitung Medien-Sektion */
.screen-steckbrief-media-intro {
    margin: 0.65rem 0 1rem;
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    overflow-wrap: anywhere;
}

/* .screen-steckbrief-media-card | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Medien-Karte | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mobile volle Breite */
.screen-steckbrief-media-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    border: 1px solid #d7e1ef;
    border-radius: 0.85rem;
    background: #ffffff;
    padding: 0.9rem;
    box-sizing: border-box;
}

/* .screen-steckbrief-media-badge | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Typ-Badge */
.screen-steckbrief-media-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #e8f1ff;
    color: #0f2740;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* .screen-steckbrief-media-card-title | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Kartentitel | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mobile Umbruch */
.screen-steckbrief-media-card-title {
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: 1.35;
    color: #0f2740;
    overflow-wrap: anywhere;
}

/* .screen-steckbrief-media-card-summary | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Inhaltszusammenfassung Referenzliste */
.screen-steckbrief-media-card-summary {
    margin: 0.5rem 0 0;
    line-height: var(--line-height-relaxed);
    color: #334155;
}

/* .screen-steckbrief-media-card-text | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Kartentext */
.screen-steckbrief-media-card-text {
    margin: 0.75rem 0 0;
    line-height: var(--line-height-relaxed);
    color: #1a2332;
}

/* .screen-steckbrief-press-media-section | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Medien-Sektion mit klarer Trennung */
.screen-steckbrief-press-media-section {
    padding-top: 0.25rem;
}

/* .screen-steckbrief-media-image-link | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Screenshot-Link */
.screen-steckbrief-media-image-link {
    display: block;
    text-decoration: none;
}

/* .screen-steckbrief-press-phone-preview | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | iPhone-Rahmen-Wrapper PR-Screenshots | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | 3D-Perspektive für iPhone-Hover */
.screen-steckbrief-press-phone-preview {
    display: flex;
    justify-content: center;
    margin: 0.15rem 0 0.35rem;
    padding: 0.85rem 0 0.35rem;
    perspective: 75rem;
}

/* .screen-steckbrief-press-phone-frame | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | iPhone-Gerätrahmen analog screen-seotool-suche | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | 3D-Hover-Basis und Shine-Overlay */
.screen-steckbrief-press-phone-frame {
    position: relative;
    width: 8.05rem;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.315rem 0.315rem 0.455rem;
    border-radius: 1.155rem;
    background: linear-gradient(145deg, #2b2b2f 0%, #111114 55%, #1d1d22 100%);
    border: 2px solid #3a3a40;
    box-shadow:
        0 14px 28px rgba(15, 17, 17, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform-origin: center bottom;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.45s ease,
        filter 0.45s ease;
    will-change: transform;
}

/* .screen-steckbrief-press-phone-frame::after | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Lichtreflex über dem Display beim Hover */
.screen-steckbrief-press-phone-frame::after {
    content: '';
    position: absolute;
    top: 0.315rem;
    right: 0.315rem;
    bottom: 0.924rem;
    left: 0.315rem;
    border-radius: 0.84rem;
    pointer-events: none;
    opacity: 0;
    z-index: 3;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 36%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 64%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-position: 130% 0;
}

/* .screen-steckbrief-press-phone-notch | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | iPhone-Notch */
.screen-steckbrief-press-phone-notch {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 0.294rem;
    border-radius: 999px;
    background: #0a0a0c;
    z-index: 2;
}

/* .screen-steckbrief-press-phone-screen | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | iPhone-Screen-Bereich */
.screen-steckbrief-press-phone-screen {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.84rem;
    background: #0a0a0c;
    width: 100%;
    aspect-ratio: 375 / 812;
}

/* .screen-steckbrief-press-phone-image | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mobile-Screenshot im iPhone-Rahmen */
.screen-steckbrief-press-phone-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* .screen-steckbrief-press-phone-home-indicator | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | iPhone Home-Indicator */
.screen-steckbrief-press-phone-home-indicator {
    width: 34%;
    height: 0.154rem;
    margin: 0.315rem auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
}

/* .screen-steckbrief-table-stack-mobile | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mobile Tabellen als Kartenstapel */
.screen-steckbrief-table-stack-mobile thead {
    display: none;
}

/* .screen-steckbrief-table-stack-mobile tbody tr | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Zeilenblock Mobile */
.screen-steckbrief-table-stack-mobile tbody tr {
    display: block;
    border-bottom: 1px solid #e4ecf7;
}

/* .screen-steckbrief-table-stack-mobile tbody tr:last-child | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Letzte Zeile ohne Rand */
.screen-steckbrief-table-stack-mobile tbody tr:last-child {
    border-bottom: none;
}

/* .screen-steckbrief-table-stack-mobile th,.screen-steckbrief-table-stack-mobile td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Zellen untereinander */
.screen-steckbrief-table-stack-mobile th,
.screen-steckbrief-table-stack-mobile td {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* .screen-steckbrief-table-stack-mobile th | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Label-Zelle kompakt */
.screen-steckbrief-table-stack-mobile th {
    padding-bottom: 0.2rem;
    border-bottom: none;
}

/* .screen-steckbrief-table-stack-mobile td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Wert-Zelle mit Abstand */
.screen-steckbrief-table-stack-mobile td {
    padding-top: 0.2rem;
    border-bottom: none;
}

/* .screen-steckbrief-table-stack-mobile tbody tr td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mehrspaltige Zeilen trennen */
.screen-steckbrief-table-stack-mobile tbody tr td + td {
    margin-top: 0.45rem;
    padding-top: 0.55rem;
    border-top: 1px solid #edf2fa;
}

/* .screen-steckbrief-weblinks-intro | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Weblinks-Einleitung */
.screen-steckbrief-weblinks-intro {
    margin: 0.65rem 0 0.85rem;
    line-height: var(--line-height-relaxed);
    overflow-wrap: anywhere;
}

/* .screen-steckbrief-weblinks-list | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Icon-Leiste Mobile */
.screen-steckbrief-weblinks-list {
    gap: 0.65rem;
}

/* .screen-steckbrief-weblinks-item | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Icon-Item Mobile */
.screen-steckbrief-weblinks-item {
    margin: 0;
    padding: 0;
}

/* .screen-steckbrief-press-media-grid | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Presse-Liste vertikal, eine Karte pro Zeile */
.screen-steckbrief-press-media-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.85rem;
}

/* .screen-steckbrief-press-media-section .screen-steckbrief-media-card | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Karte mit Textumfluss um iPhone links */
.screen-steckbrief-press-media-section .screen-steckbrief-media-card {
    display: block;
    overflow: hidden;
}

/* .screen-steckbrief-press-media-section .screen-steckbrief-media-image-link | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | iPhone links, Text fließt rechts und unten */
.screen-steckbrief-press-media-section .screen-steckbrief-media-image-link {
    float: left;
    margin: 0 1.15rem 0.75rem 0;
    max-width: 42%;
}

/* .screen-steckbrief-press-media-section .screen-steckbrief-press-phone-preview | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Kein Zentrieren im Float-Layout */
.screen-steckbrief-press-media-section .screen-steckbrief-press-phone-preview {
    display: block;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

/* .screen-steckbrief-press-media-section .screen-steckbrief-media-badge | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Badge im Textfluss neben Handy */
.screen-steckbrief-press-media-section .screen-steckbrief-media-badge {
    margin-bottom: 0.35rem;
}

/* .screen-steckbrief-press-media-section .screen-steckbrief-media-card-title | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Titel im Textfluss */
.screen-steckbrief-press-media-section .screen-steckbrief-media-card-title {
    margin-bottom: 0.5rem;
}

/* .screen-steckbrief-profile-table th,.screen-steckbrief-profile-table td | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Mobile Kurzprofil als Label-Wert-Block */
.screen-steckbrief-profile-table th,
.screen-steckbrief-profile-table td,
.screen-steckbrief-competence-key-value-table th,
.screen-steckbrief-competence-key-value-table td {
    display: block;
    width: 100%;
}

/* .screen-steckbrief-profile-table th | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Mobile Label kompakt */
.screen-steckbrief-profile-table th,
.screen-steckbrief-competence-key-value-table th {
    padding-bottom: 0.25rem;
    border-bottom: none;
    font-size: var(--font-size-sm);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* .screen-steckbrief-profile-table td | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Mobile Wert mit Abstand */
.screen-steckbrief-profile-table td,
.screen-steckbrief-competence-key-value-table td {
    padding-top: 0;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #dbe5f3;
}

/* .screen-steckbrief-profile-table tbody tr:last-child td | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Letzte Zeile ohne Rand */
.screen-steckbrief-profile-table tbody tr:last-child td,
.screen-steckbrief-competence-key-value-table tbody tr:last-child td {
    border-bottom: none;
    padding-bottom: 0.65rem;
}

@media (min-width: 600px) {
    /* .screen-steckbrief-layout | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tablet Padding */
    .screen-steckbrief-layout {
        padding: 1rem 0 3rem;
    }

    /* .screen-steckbrief-strengths-list | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Stärken zweispaltig ab Tablet */
    .screen-steckbrief-strengths-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    /* .screen-steckbrief-services-list | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Kernkompetenzen zweispaltig ab Tablet */
    .screen-steckbrief-services-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
    }

    /* .screen-steckbrief-services-item | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Kernkompetenz-Kachel Tablet */
    .screen-steckbrief-services-item {
        padding: 1.1rem 1.05rem 1rem 1.15rem;
        min-height: 100%;
    }

    /* .screen-steckbrief-strength-item | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Stärken-Karte Tablet */
    .screen-steckbrief-strength-item {
        padding: 1.1rem 1.15rem 1.1rem 1.2rem;
        min-height: 100%;
    }

    /* .screen-steckbrief-hero | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Hero zwei Spalten ab Tablet */
    .screen-steckbrief-hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: center;
        gap: 1.25rem;
        padding: 1.25rem;
        margin-bottom: 2rem;
        border-radius: 1rem;
    }

    /* .screen-steckbrief-hero-portrait-frame | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Portrait größer ab Tablet */
    .screen-steckbrief-hero-portrait-frame {
        max-width: 22rem;
    }

    /* .screen-steckbrief-career-grid | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Referenzen volle Breite, Speaker/Bildung zweispaltig */
    .screen-steckbrief-career-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* #steckbrief-detail-career-references | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Referenzen-Karte über volle Grid-Breite */
    #steckbrief-detail-career-references {
        grid-column: 1 / -1;
    }

    /* .screen-steckbrief-info-grid | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Info-Grid zwei Spalten */
    .screen-steckbrief-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* .screen-steckbrief-profile-table th,.screen-steckbrief-profile-table td | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Kurzprofil ab Tablet zweispaltig */
    .screen-steckbrief-profile-table th,
    .screen-steckbrief-profile-table td,
    .screen-steckbrief-competence-key-value-table th,
    .screen-steckbrief-competence-key-value-table td {
        display: table-cell;
        width: auto;
    }

    /* .screen-steckbrief-profile-table th | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Label-Spalte ab Tablet */
    .screen-steckbrief-profile-table th,
    .screen-steckbrief-competence-key-value-table th {
        width: 28%;
        padding-bottom: 0.75rem;
        font-size: inherit;
        letter-spacing: normal;
        text-transform: none;
    }

    /* .screen-steckbrief-profile-table td | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Wert-Spalte ab Tablet */
    .screen-steckbrief-profile-table td,
    .screen-steckbrief-competence-key-value-table td {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #e4ecf7;
    }

    /* .screen-steckbrief-table-stack-mobile thead | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tabellenkopf ab Tablet */
    .screen-steckbrief-table-stack-mobile:not(.screen-steckbrief-table-stack-until-desktop) thead {
        display: table-header-group;
    }

    /* .screen-steckbrief-table-stack-mobile tbody tr | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tabellenzeilen ab Tablet */
    .screen-steckbrief-table-stack-mobile:not(.screen-steckbrief-table-stack-until-desktop) tbody tr {
        display: table-row;
        border-bottom: none;
    }

    /* .screen-steckbrief-table-stack-mobile th,.screen-steckbrief-table-stack-mobile td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tabellenzellen ab Tablet */
    .screen-steckbrief-table-stack-mobile:not(.screen-steckbrief-table-stack-until-desktop) th,
    .screen-steckbrief-table-stack-mobile:not(.screen-steckbrief-table-stack-until-desktop) td {
        display: table-cell;
        width: auto;
    }

    /* .screen-steckbrief-table-stack-mobile th | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Label-Zelle ab Tablet */
    .screen-steckbrief-table-stack-mobile:not(.screen-steckbrief-table-stack-until-desktop) th {
        padding-bottom: 0.65rem;
    }

    /* .screen-steckbrief-table-stack-mobile td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Wert-Zelle ab Tablet */
    .screen-steckbrief-table-stack-mobile:not(.screen-steckbrief-table-stack-until-desktop) td {
        padding-top: 0.65rem;
        border-bottom: 1px solid #e4ecf7;
    }

    /* .screen-steckbrief-table-stack-mobile tbody tr td + td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mehrspaltige Zeilen ab Tablet */
    .screen-steckbrief-table-stack-mobile:not(.screen-steckbrief-table-stack-until-desktop) tbody tr td + td {
        margin-top: 0;
        padding-top: 0.65rem;
        border-top: none;
    }

    /* .screen-steckbrief-table th,.screen-steckbrief-table td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tabellen-Padding Tablet */
    .screen-steckbrief-table th,
    .screen-steckbrief-table td {
        padding: 0.75rem 0.85rem;
    }
}

@media (min-width: 1024px) {
    /* .screen-steckbrief-layout | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Desktop Container */
    .screen-steckbrief-layout {
        max-width: 78rem;
        padding: 1.5rem 0 4rem;
    }

    /* .screen-steckbrief-hero-portrait-frame | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Portrait Desktop */
    .screen-steckbrief-hero-portrait-frame {
        max-width: 24rem;
    }

    /* .screen-steckbrief-table-stack-until-desktop thead | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Referenz-Tabelle Desktop-Kopf */
    .screen-steckbrief-table-stack-until-desktop thead {
        display: table-header-group;
    }

    /* .screen-steckbrief-table-stack-until-desktop tbody tr | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Referenz-Tabelle Desktop-Zeilen */
    .screen-steckbrief-table-stack-until-desktop tbody tr {
        display: table-row;
        border-bottom: none;
    }

    /* .screen-steckbrief-table-stack-until-desktop th,.screen-steckbrief-table-stack-until-desktop td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Referenz-Tabelle Desktop-Zellen */
    .screen-steckbrief-table-stack-until-desktop th,
    .screen-steckbrief-table-stack-until-desktop td {
        display: table-cell;
        width: auto;
    }

    /* .screen-steckbrief-table-stack-until-desktop td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Referenz-Tabelle Desktop-Werte */
    .screen-steckbrief-table-stack-until-desktop td {
        padding-top: 0.85rem;
        border-bottom: 1px solid #e4ecf7;
    }

    /* .screen-steckbrief-table-stack-until-desktop tbody tr td + td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Referenz-Tabelle Desktop-Mehrspalten */
    .screen-steckbrief-table-stack-until-desktop tbody tr td + td {
        margin-top: 0;
        padding-top: 0.85rem;
        border-top: none;
    }

    /* .screen-steckbrief-table th,.screen-steckbrief-table td | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tabellen-Padding Desktop */
    .screen-steckbrief-table th,
    .screen-steckbrief-table td {
        padding: 0.85rem 0.9rem;
    }

    /* .screen-steckbrief-media-card | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Medien-Karte Desktop */
    .screen-steckbrief-media-card {
        padding: 1rem;
    }

    /* .screen-steckbrief-press-phone-frame | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | iPhone-Rahmen größer auf Desktop */
    .screen-steckbrief-press-phone-frame {
        width: 9.5rem;
    }

    /* .screen-steckbrief-career-grid | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Drei gleich breite Karriere-Karten */
    .screen-steckbrief-career-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* #steckbrief-detail-career-references | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Referenzen-Karte gleiche Spaltenbreite */
    #steckbrief-detail-career-references {
        grid-column: auto;
    }

    /* .screen-steckbrief-weblinks-list | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Weblinks zentriert auf Desktop */
    .screen-steckbrief-weblinks-list {
        justify-content: center;
    }

    /* .screen-steckbrief-services-list | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Kernkompetenzen dreispaltig ab Desktop */
    .screen-steckbrief-services-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* .screen-steckbrief-weblink-icon-link[data-tooltip] | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Hover-Tooltip Weblink-Icons */
@media (hover: hover) and (pointer: fine) {
    .screen-steckbrief-weblink-icon-link[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        z-index: 200;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: 16rem;
        padding: 6px 10px;
        border-radius: 6px;
        background: #1a1a1a;
        color: var(--color-white);
        font-size: 0.75rem;
        font-weight: var(--font-weight-normal);
        line-height: 1.35;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        box-sizing: border-box;
        box-shadow: 0 4px 14px color-mix(in srgb, #000000 28%, transparent);
    }

    .screen-steckbrief-weblink-icon-link[data-tooltip]:hover,
    .screen-steckbrief-weblink-icon-link[data-tooltip]:focus-visible {
        z-index: 201;
    }

    .screen-steckbrief-weblink-icon-link[data-tooltip]:hover::after,
    .screen-steckbrief-weblink-icon-link[data-tooltip]:focus-visible::after {
        opacity: 1;
        visibility: visible;
    }

    /* .screen-steckbrief-press-phone-frame:hover | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | 3D-Lift, Glow und Shine beim iPhone-Hover */
    .screen-steckbrief-press-phone-frame:hover {
        transform: perspective(56.25rem) rotateY(-11deg) rotateX(7deg) scale(1.1) translateY(-0.8rem);
        border-color: #5a9fe8;
        filter: brightness(1.06);
        box-shadow:
            0 1.85rem 3.75rem rgba(15, 39, 64, 0.44),
            0 0.85rem 2rem rgba(28, 122, 126, 0.4),
            0 0 2.75rem rgba(23, 60, 99, 0.28),
            inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }

    /* .screen-steckbrief-press-phone-frame:hover::after | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Shine-Sweep über Display beim Hover */
    .screen-steckbrief-press-phone-frame:hover::after {
        animation: screen-steckbrief-press-phone-shine 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* .screen-steckbrief-strength-item:hover | Änderungsprotokoll: 2026-07-10 | assistant | @skill-css-rules, @skill-change-provenance | Stärken-Karte Hover */
    .screen-steckbrief-strength-item:hover {
        border-color: #1c7a7e;
        box-shadow:
            0 6px 18px color-mix(in srgb, #0f2740 10%, transparent),
            0 0 0 1px rgba(28, 122, 126, 0.12);
        transform: translateY(-2px);
    }

    /* .screen-steckbrief-services-item:hover | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Kernkompetenz-Kachel Hover */
    .screen-steckbrief-services-item:hover {
        border-color: #3b82f6;
        box-shadow:
            0 8px 20px color-mix(in srgb, #0f2740 11%, transparent),
            0 0 0 1px rgba(59, 130, 246, 0.14);
        transform: translateY(-2px);
    }
}

/* @keyframes screen-steckbrief-press-phone-shine | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Lichtreflex-Animation iPhone-Display */
@keyframes screen-steckbrief-press-phone-shine {
    0% {
        background-position: 130% 0;
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    100% {
        background-position: -35% 0;
        opacity: 0;
    }
}

/* @media (prefers-reduced-motion: reduce) .screen-steckbrief-press-phone-frame | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Reduzierte Bewegung für iPhone-Hover */
@media (prefers-reduced-motion: reduce) {
    .screen-steckbrief-press-phone-frame {
        transition: box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .screen-steckbrief-press-phone-frame:hover {
        transform: none;
        filter: none;
    }

    .screen-steckbrief-press-phone-frame:hover::after {
        animation: none;
        opacity: 0;
    }
}

/* .screen-steckbrief-skills-cloud | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tech-Tag-Cloud Container */
.screen-steckbrief-skills-cloud {
    position: relative;
    min-height: 14rem;
    padding: 1.35rem 1rem 1.5rem;
    border-radius: 0.85rem;
    overflow: hidden;
    background: linear-gradient(145deg, #050d18 0%, #0b1f36 45%, #102a4a 100%);
    border: 1px solid rgba(96, 165, 250, 0.22);
    box-shadow:
        inset 0 0 0 1px rgba(56, 189, 248, 0.08),
        0 12px 28px rgba(4, 12, 24, 0.35);
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

/* .screen-steckbrief-skills-cloud:hover | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Container-Glow bei Hover */
.screen-steckbrief-skills-cloud:hover {
    border-color: rgba(125, 211, 252, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(56, 189, 248, 0.14),
        0 16px 36px rgba(4, 12, 24, 0.45),
        0 0 32px rgba(56, 189, 248, 0.12);
}

/* .screen-steckbrief-skills-cloud-grid | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Animiertes Raster-Hintergrund */
.screen-steckbrief-skills-cloud-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(56, 189, 248, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.55;
    pointer-events: none;
    animation: screen-steckbrief-skills-grid-drift 18s linear infinite;
}

/* .screen-steckbrief-skills-cloud-scan | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Horizontale Scan-Linie */
.screen-steckbrief-skills-cloud-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.15) 20%, rgba(125, 211, 252, 0.95) 50%, rgba(56, 189, 248, 0.15) 80%, transparent 100%);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.55);
    opacity: 0.75;
    pointer-events: none;
    animation: screen-steckbrief-skills-scan 5.5s ease-in-out infinite;
}

/* .screen-steckbrief-skills-cloud-inner | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tag-Layout zentriert */
.screen-steckbrief-skills-cloud-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.55rem 0.65rem;
    min-height: 10rem;
}

/* .screen-steckbrief-skills-tag | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Einzelner Skill-Chip */
.screen-steckbrief-skills-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.28rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.35);
    background: rgba(8, 24, 44, 0.72);
    color: #d9f2ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
    line-height: 1.35;
    white-space: nowrap;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    animation: screen-steckbrief-skills-tag-float 7s ease-in-out infinite;
    cursor: default;
}

/* .screen-steckbrief-skills-cloud[data-skills-cloud-state="hidden"] .screen-steckbrief-skills-tag | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Ausgangszustand vor Scroll-Reveal */
.screen-steckbrief-skills-cloud[data-skills-cloud-state="hidden"] .screen-steckbrief-skills-tag {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    animation: none;
}

/* .screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Gestaffeltes Einblenden */
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* .screen-steckbrief-skills-tag-prefix | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Hash-Prefix technisch */
.screen-steckbrief-skills-tag-prefix {
    color: rgba(56, 189, 248, 0.85);
    font-weight: 700;
}

/* .screen-steckbrief-skills-tag--tier-1 | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Kleine Tags */
.screen-steckbrief-skills-tag--tier-1 {
    font-size: 0.78rem;
}

/* .screen-steckbrief-skills-tag--tier-2 | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Mittlere Tags */
.screen-steckbrief-skills-tag--tier-2 {
    font-size: 0.9rem;
}

/* .screen-steckbrief-skills-tag--tier-3 | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Große Tags */
.screen-steckbrief-skills-tag--tier-3 {
    font-size: 1.02rem;
    font-weight: 600;
}

/* .screen-steckbrief-skills-tag--accent-1 | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Cyan-Akzent */
.screen-steckbrief-skills-tag--accent-1 {
    border-color: rgba(56, 189, 248, 0.45);
    color: #b9ecff;
}

/* .screen-steckbrief-skills-tag--accent-2 | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Blau-Akzent */
.screen-steckbrief-skills-tag--accent-2 {
    border-color: rgba(96, 165, 250, 0.45);
    color: #c7ddff;
}

/* .screen-steckbrief-skills-tag--accent-3 | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Violett-Akzent */
.screen-steckbrief-skills-tag--accent-3 {
    border-color: rgba(129, 140, 248, 0.45);
    color: #d5d9ff;
}

/* .screen-steckbrief-skills-tag--accent-4 | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Teal-Akzent */
.screen-steckbrief-skills-tag--accent-4 {
    border-color: rgba(45, 212, 191, 0.4);
    color: #c6fff4;
}

/* .screen-steckbrief-skills-tag:hover | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Hover-Glow */
.screen-steckbrief-skills-tag:hover {
    border-color: rgba(125, 211, 252, 0.85);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35), inset 0 0 12px rgba(56, 189, 248, 0.12);
    color: #f0fbff;
    animation-play-state: paused;
}

/* .screen-steckbrief-skills-tag:nth-child | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Gestaffelte Delays */
.screen-steckbrief-skills-tag:nth-child(3n+1) {
    animation-delay: 0s;
}

.screen-steckbrief-skills-tag:nth-child(3n+2) {
    animation-delay: -2.3s;
}

.screen-steckbrief-skills-tag:nth-child(3n) {
    animation-delay: -4.6s;
}

.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(1) { transition-delay: 0.04s; }
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(2) { transition-delay: 0.08s; }
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(3) { transition-delay: 0.12s; }
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(4) { transition-delay: 0.16s; }
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(5) { transition-delay: 0.2s; }
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(6) { transition-delay: 0.24s; }
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(7) { transition-delay: 0.28s; }
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(8) { transition-delay: 0.32s; }
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(9) { transition-delay: 0.36s; }
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(10) { transition-delay: 0.4s; }
.screen-steckbrief-skills-cloud[data-skills-cloud-state="visible"] .screen-steckbrief-skills-tag:nth-child(n+11) { transition-delay: 0.44s; }

@keyframes screen-steckbrief-skills-grid-drift {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 28px 28px, 28px 28px;
    }
}

@keyframes screen-steckbrief-skills-scan {
    0% {
        top: 0;
        opacity: 0;
    }

    8% {
        opacity: 0.85;
    }

    92% {
        opacity: 0.85;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes screen-steckbrief-skills-tag-float {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (min-width: 768px) {
    /* .screen-steckbrief-skills-cloud | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | iPad höher */
    .screen-steckbrief-skills-cloud {
        min-height: 16rem;
        padding: 1.65rem 1.35rem 1.85rem;
    }

    /* .screen-steckbrief-skills-cloud-inner | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | iPad mehr Luft */
    .screen-steckbrief-skills-cloud-inner {
        gap: 0.65rem 0.85rem;
        min-height: 11rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* .screen-steckbrief-skills-cloud | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Statisch bei reduzierter Bewegung */
    .screen-steckbrief-skills-cloud {
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* .screen-steckbrief-skills-cloud-grid | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Kein Raster-Drift */
    .screen-steckbrief-skills-cloud-grid,
    .screen-steckbrief-skills-cloud-scan {
        animation: none;
    }

    /* .screen-steckbrief-skills-tag | Änderungsprotokoll: 2026-07-10 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tags sofort sichtbar */
    .screen-steckbrief-skills-tag {
        opacity: 1;
        transform: none;
        animation: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }
}