:root { --ink:        #161b21;
--ink-soft:   #3c444d;
--paper:      #f5f6f4;
--cloud:      #ffffff;
--line:       rgba(22, 27, 33, .14); --training:       #c2371c;
--training-deep:  #9c2b12; --training-tint:  #fae9e4; --moderation:      #c9901e;
--moderation-deep: #7d5a00; --moderation-tint: #faf1dd; --it:        #0e5e75;
--it-deep:   #0b4b5e;
--it-tint:   #e2eff3; --font-display: "Archivo Narrow", "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--radius: 14px;
--maxw: 72rem;
--focus: 3px solid #0e5e75;
} *, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.0625rem; line-height: 1.65;
color: var(--ink);
background: var(--paper);
-webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--it-deep); text-underline-offset: .18em; }
a:hover { color: var(--ink); } :focus-visible {
outline: var(--focus);
outline-offset: 3px;
border-radius: 4px;
} .skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--ink);
color: #fff;
padding: .75rem 1.25rem;
z-index: 1000;
font-weight: 700;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
}
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
white-space: nowrap;
} @media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
[data-parallax] { transform: none !important; }
}
.wrap {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 2.5rem);
} h1, h2, h3, .display {
font-family: var(--font-display);
line-height: 1.05;
letter-spacing: -.01em;
text-wrap: balance;
margin: 0 0 .6em;
}
h1 { font-size: clamp(2.6rem, 7.5vw, 5.4rem); font-weight: 800; text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; text-transform: uppercase; }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 700; }
.eyebrow {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .22em;
font-size: .85rem;
display: inline-flex;
align-items: center;
gap: .6rem;
margin-bottom: 1rem;
}
.eyebrow::before {
content: "";
width: 2.4rem; height: 3px;
background: currentColor;
border-radius: 2px;
}
.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink-soft); max-width: 46rem; }  @font-face {
font-family: "Avengeance Heroic Avenger";
src: url(//www.matthias-esser.de/wp-content/themes/vielseitig/assets/fonts/AvengeanceHeroicAvenger.woff2) format("woff2"),
url(//www.matthias-esser.de/wp-content/themes/vielseitig/assets/fonts/AvengeanceHeroicAvenger.ttf) format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(22,27,33,.92);
backdrop-filter: blur(8px);
color: #fff;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-header .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 4.25rem;
}
.brand {
font-family: "Avengeance Heroic Avenger", var(--font-display);
font-weight: 800;
letter-spacing: .04em;
color: #fff;
text-decoration: none;
font-size: 1.15rem;
transition: filter .25s ease;
} .brand:hover,
.brand:focus-visible {
background: linear-gradient(90deg, var(--training) 0%, var(--moderation) 50%, #2f97b5 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: brightness(1.15);
}
.brand small {
display: block;
font-family: var(--font-body);
font-weight: 400;
font-size: .72rem;
letter-spacing: .16em;
color: #c8cdd3;
text-transform: uppercase;
}
.brand:hover small,
.brand:focus-visible small {
color: transparent;
-webkit-text-fill-color: transparent;
}
.main-nav ul {
list-style: none;
margin: 0; padding: 0;
display: flex;
gap: .35rem;
}
.main-nav a {
display: inline-block;
color: #fff;
text-decoration: none;
font-weight: 600;
padding: .55rem .9rem;
border-radius: 999px;
border: 1px solid transparent;
}
.main-nav a:hover { border-color: rgba(255,255,255,.4); }
.main-nav a[aria-current="true"] { background: rgba(255,255,255,.14); } .main-nav a::before {
content: "";
display: inline-block;
width: .55em; height: .55em;
border-radius: 50%;
margin-right: .45em;
background: #fff;
vertical-align: baseline;
}
.main-nav a[data-lane="training"]::before,
.main-nav a[href*="#training"]::before,
.main-nav a[href*="personal-training"]::before   { background: var(--training); }
.main-nav a[data-lane="moderation"]::before,
.main-nav a[href*="#moderation"]::before,
.main-nav a[href*="/moderation"]::before { background: var(--moderation); }
.main-nav a[data-lane="it"]::before,
.main-nav a[href*="#it-service"]::before,
.main-nav a[href*="it-services"]::before         { background: var(--it); }
.main-nav a[data-lane="kontakt"]::before,
.main-nav a[href*="#kontakt"]::before    { display: none; }
.nav-toggle {
display: none;
background: none;
border: 2px solid rgba(255,255,255,.6);
color: #fff;
border-radius: 8px;
padding: .5rem .8rem;
font: inherit;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 820px) {
.nav-toggle { display: inline-flex; align-items: center; gap: .5rem; }
.main-nav {
position: absolute;
inset: 100% 0 auto 0;
background: #161b21;
border-bottom: 1px solid rgba(255,255,255,.15);
display: none;
}
.main-nav.is-open { display: block; }
.main-nav ul { flex-direction: column; padding: 1rem; }
.main-nav a { display: block; }
} .hero {
position: relative;
overflow: clip;
background: linear-gradient(165deg, #12161b 0%, #1b232c 60%, #14323d 100%);
color: #fff;
padding: clamp(5rem, 12vw, 9rem) 0 clamp(4rem, 9vw, 7rem);
} .lane {
position: absolute;
left: -10%;
width: 120%;
height: 6.2rem;
transform: rotate(-7deg);
opacity: .92;
will-change: transform;
pointer-events: none;
display: flex;
align-items: center;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.lane::after { content: "";
position: absolute;
inset: 50% 0 auto 0;
border-top: 3px dashed rgba(255,255,255,.22);
}
.lane--1 { top: 10%;  background: var(--training); }
.lane--2 { top: 38%;  background: var(--moderation); }
.lane--3 { top: 66%;  background: var(--it); } .lane-label {
display: flex;
white-space: nowrap;
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
font-size: 3.1rem;
letter-spacing: .14em;
line-height: 1;
color: rgba(255,255,255,.14);
-webkit-text-stroke: 1px rgba(255,255,255,.07);
animation: lane-drift 400s linear infinite;
}
.lane-label > span { padding-right: .5em; }
.lane-label--reverse { animation-direction: reverse; } @keyframes lane-drift {
from { transform: translate3d(0, 0, 0); }
to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 700px) {
.lane { height: 4.4rem; }
.lane-label { font-size: 2.1rem; }
}
.hero .wrap { position: relative; z-index: 2; } .hero-grid {
display: grid;
grid-template-columns: 1.4fr auto;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.hero-portrait {
justify-self: center;
width: clamp(11rem, 24vw, 20rem);
perspective: 1200px;
} .coin { appearance: none;
-webkit-appearance: none;
background: none;
border: 0;
padding: 0;
display: block;
width: 100%;
font: inherit;
color: inherit;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
position: relative;
transform-style: preserve-3d;
transition: transform .9s cubic-bezier(.25, .7, .25, 1);
cursor: pointer;
outline-offset: 8px;
} @media (hover: hover) {
.coin:hover { transform: rotateY(180deg); }
}
.coin:focus-visible,
.coin.is-flipped {
transform: rotateY(180deg);
}
.coin-front,
.coin-back {
display: block;
width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
}
.coin-back {
position: absolute;
inset: 0;
height: 100%;
transform: rotateY(180deg);
} .star-glow {
animation: star-pulse 3.5s ease-in-out infinite alternate;
}
.star-rays {
animation: star-pulse 3.5s ease-in-out infinite alternate-reverse;
}
@keyframes star-pulse {
from { opacity: .45; }
to   { opacity: 1; }
}
@media (max-width: 820px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-portrait { grid-row: 1; width: clamp(9rem, 45vw, 13rem); }
}
.hero-badge {
display: inline-block;
border: 1px solid rgba(255,255,255,.4);
border-radius: 999px;
padding: .4rem 1rem;
font-size: .85rem;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 2.1rem;
background: rgba(255,255,255,.06);
}
.hero h1 .name {
font-family: "Avengeance Heroic Avenger", var(--font-display);
text-transform: none;
}
.hero h1 span { display: block; }
.hero h1 .thin { font-weight: 400; letter-spacing: .06em; font-size: .38em; text-transform: none; color: #d6dbe0; }
.hero p.claim {
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
max-width: 44rem;
color: #e4e8ec;
}
.hero-lanes-cta {
display: flex;
flex-wrap: wrap;
gap: .8rem;
margin-top: 2.2rem;
}
.lane-chip {
display: inline-flex;
align-items: center;
gap: .6rem;
text-decoration: none;
color: #fff;
font-weight: 700;
padding: .8rem 1.3rem;
border-radius: 999px;
border: 2px solid transparent;
transition: transform .18s ease, box-shadow .18s ease;
}
.lane-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.35); color:#fff; }
.lane-chip .num {
font-family: var(--font-display);
background: rgba(255,255,255,.2);
border-radius: 50%;
width: 1.7rem; height: 1.7rem;
display: grid; place-items: center;
font-size: .9rem;
}
.lane-chip--training   { background: var(--training); }
.lane-chip--moderation {
background: var(--moderation); color: var(--ink); }
.lane-chip--moderation:hover { color: var(--ink); }
.lane-chip--moderation .num { background: rgba(22,27,33,.16); }
.lane-chip--it         { background: var(--it); } .stats {
background: var(--ink);
color: #fff;
padding: 2.6rem 0;
}
.stats .wrap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 2rem;
text-align: center;
}
.stat b {
display: block;
font-family: var(--font-display);
font-size: clamp(2.2rem, 5vw, 3.4rem);
font-weight: 800;
line-height: 1;
}
.stat span { color: #c8cdd3; font-size: .95rem; } .section {
position: relative;
padding: clamp(4rem, 9vw, 7rem) 0;
overflow: clip;
}
.section .wrap { position: relative; z-index: 2; }
.section--training   { background: linear-gradient(180deg, var(--paper), var(--training-tint)); }
.section--moderation { background: linear-gradient(180deg, var(--paper), var(--moderation-tint)); }
.section--it         { background: linear-gradient(180deg, var(--paper), var(--it-tint)); color-scheme: light; }
.section--training .eyebrow,   .section--training h2 span   { color: var(--training-deep); }
.section--moderation .eyebrow, .section--moderation h2 span { color: var(--moderation-deep); }
.section--it .eyebrow,         .section--it h2 span         { color: var(--it-deep); } .lane-number {
position: absolute;
top: 0; right: -1rem;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(12rem, 30vw, 24rem);
line-height: 1;
opacity: .09;
z-index: 1;
user-select: none;
will-change: transform;
animation: number-float 9s ease-in-out infinite alternate;
}
@keyframes number-float {
from { translate: 0 -2rem; }
to   { translate: 0 2.5rem; }
}
.section--training .lane-number   { color: var(--training); }
.section--moderation .lane-number { color: var(--moderation); }
.section--it .lane-number         { color: var(--it); }
.cols {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.card {
background: var(--cloud);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.6rem 1.8rem;
box-shadow: 0 14px 34px rgba(22,27,33,.08);
}
.card + .card { margin-top: 1.2rem; }
.card h3 { margin-top: 0; }
.card ul { margin: 0; padding-left: 1.2rem; }
.card li { margin: .35rem 0; }
.card li::marker { color: var(--ink-soft); }
.section--training .card li::marker   { color: var(--training-deep); }
.section--moderation .card li::marker { color: var(--moderation-deep); }
.section--it .card li::marker         { color: var(--it-deep); } .timeline {
list-style: none;
margin: 0; padding: 0;
border-left: 3px solid var(--training);
}
.timeline li {
position: relative;
padding: 0 0 1.1rem 1.4rem;
}
.timeline li::before {
content: "";
position: absolute;
left: -.55rem; top: .45rem;
width: .85rem; height: .85rem;
border-radius: 50%;
background: var(--training);
border: 3px solid var(--cloud);
box-shadow: 0 0 0 2px var(--training);
}
.timeline b { display: block; }
.timeline .gold::before { background: var(--moderation); box-shadow: 0 0 0 2px var(--moderation); }
.timeline small { color: var(--ink-soft); }
.btn {
display: inline-block;
font-weight: 700;
text-decoration: none;
color: #fff;
padding: .9rem 1.6rem;
border-radius: 999px;
margin-top: 1.4rem;
transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.22); color:#fff; }
.btn--training   { background: var(--training-deep); }
.btn--moderation {
background: var(--moderation); color: var(--ink); }
.btn--moderation:hover { color: var(--ink); }
.btn--it         { background: var(--it-deep); }
.btn--ink        { background: var(--ink); } .btn-row {
display: flex;
flex-wrap: wrap;
gap: .8rem;
margin-top: 1.4rem;
}
.btn-row .btn { margin-top: 0; } .btn--ghost {
background: transparent;
border: 2px solid currentColor;
padding: calc(.9rem - 2px) calc(1.6rem - 2px);
}
.btn--ghost-training   { color: var(--training-deep); }
.btn--ghost-training:hover   { background: var(--training-deep); color: #fff; }
.btn--ghost-moderation { color: var(--moderation-deep); }
.btn--ghost-moderation:hover { background: var(--moderation); color: var(--ink); border-color: var(--moderation); }
.btn--ghost-it         { color: var(--it-deep); }
.btn--ghost-it:hover         { background: var(--it-deep); color: #fff; } .section--instagram {
background: linear-gradient(180deg, var(--paper), #ffffff);
} .section--instagram .eyebrow::before {
background: linear-gradient(90deg, var(--training), var(--moderation), var(--it));
}
.insta-feed { margin-top: 1.5rem; } .insta-feed #sb_instagram,
.insta-feed #sbi_images {
padding: 0 !important;
}
.insta-feed #sb_instagram .sbi_photo img {
border-radius: var(--radius);
} .press { background: var(--ink); color: #fff; padding: clamp(4rem, 8vw, 6rem) 0; }
.press a { color: #9fd3e2; }
.press-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.2rem;
margin-top: 2rem;
}
.press-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--radius);
padding: 1.3rem 1.4rem;
}
.press-card cite { display: block; font-style: normal; color: #c8cdd3; font-size: .85rem; margin-bottom: .4rem; }
.press-card a { font-weight: 700; text-decoration: none; }
.press-card a:hover { text-decoration: underline; color: #fff; } .contact { padding: clamp(4rem, 8vw, 6rem) 0; text-align: center; }
.contact .lead { margin-inline: auto; }
.site-footer {
background: #0f1317;
color: #c8cdd3;
padding: 2.4rem 0;
font-size: .95rem;
}
.site-footer .wrap {
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
justify-content: space-between;
align-items: center;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus-visible { text-decoration: underline; }
.footer-nav ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; } .reveal { transition: opacity .6s ease, transform .6s ease; }
.reveal.reveal-armed:not(.is-visible) {
opacity: 0;
transform: translateY(24px);
}
@media (prefers-reduced-motion: reduce) {
.reveal.reveal-armed:not(.is-visible) { opacity: 1; transform: none; }
} p.reveal,
.lead.reveal,
.reveal p {
text-align: justify;
-webkit-hyphens: auto;
hyphens: auto;
} .page-content { padding: clamp(3rem, 7vw, 5rem) 0; } .page-content .wrap { max-width: var(--maxw); }
.entry-content a { text-decoration: underline; }
.wp-block-image img { border-radius: var(--radius); } .lane-training .page-content   { background: linear-gradient(180deg, var(--paper), var(--training-tint)); }
.lane-moderation .page-content { background: linear-gradient(180deg, var(--paper), var(--moderation-tint)); }
.lane-it .page-content         { background: linear-gradient(180deg, var(--paper), var(--it-tint)); }
.lane-training .page-content .eyebrow   { color: var(--training-deep); }
.lane-moderation .page-content .eyebrow { color: var(--moderation-deep); }
.lane-it .page-content .eyebrow         { color: var(--it-deep); }
.lane-training .entry-content a   { color: var(--training-deep); }
.lane-moderation .entry-content a { color: var(--moderation-deep); }
.lane-it .entry-content a         { color: var(--it-deep); } .entry-content .eyebrow { margin-bottom: .4rem; }
.entry-content h2 { margin-top: 2.5rem; }
.entry-content .card { margin: 1rem 0; height: 100%; }
.entry-content .card h3 { margin-top: 0; } .entry-content .wp-block-button__link {
border-radius: 999px;
border: 0;
font-weight: 700;
font-size: 1rem;
line-height: 1.65;
padding: .9rem 1.6rem;
background: var(--ink);
color: #fff;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease;
}
.entry-content .wp-block-button__link:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.lane-training .entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link   { background: var(--training-deep); color: #fff; }
.lane-moderation .entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--moderation); color: var(--ink); }
.lane-it .entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link         { background: var(--it-deep); color: #fff; } .entry-content .is-style-outline .wp-block-button__link {
background: transparent;
border: 2px solid currentColor;
padding: calc(.9rem - 2px) calc(1.6rem - 2px);
color: var(--ink);
}
.lane-training .entry-content .is-style-outline .wp-block-button__link   { color: var(--training-deep); }
.lane-moderation .entry-content .is-style-outline .wp-block-button__link { color: var(--moderation-deep); }
.lane-it .entry-content .is-style-outline .wp-block-button__link         { color: var(--it-deep); } .entry-content .is-style-outline .wp-block-button__link:hover { background: var(--ink); color: #fff; }
.lane-training .entry-content .is-style-outline .wp-block-button__link:hover   { background: var(--training-deep); border-color: var(--training-deep); color: #fff; }
.lane-moderation .entry-content .is-style-outline .wp-block-button__link:hover { background: var(--moderation); border-color: var(--moderation); color: var(--ink); }
.lane-it .entry-content .is-style-outline .wp-block-button__link:hover         { background: var(--it-deep); border-color: var(--it-deep); color: #fff; } .alignwide { max-width: var(--maxw); }
.alignfull { max-width: none; width: 100%; } .cv-timeline {
position: relative;
margin-top: 3.2rem;
display: flex;
flex-direction: column;
gap: 2.8rem;
padding-bottom: 1rem;
} .cv-timeline::before {
content: "";
position: absolute;
left: 1.05rem;
top: 0.4rem;
bottom: 0.4rem;
width: 4px;
border-radius: 2px;
background: linear-gradient(180deg, var(--training), var(--moderation) 50%, var(--it));
opacity: 0.3;
}
.cv-item {
position: relative;
padding-left: 3.4rem;
} .cv-item::before {
content: "";
position: absolute;
left: calc(1.05rem + 2px);
top: 0.55rem;
width: 14px;
height: 14px;
border-radius: 50%;
transform: translateX(-50%);
background: var(--training-deep);
box-shadow: 0 0 0 4px #fff;
} .cv-year {
display: inline-block;
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.04em;
padding: 0.28rem 0.9rem;
border-radius: 999px;
color: #fff;
background: var(--training-deep);
margin-bottom: 1rem;
}
.cv-item:nth-child(3n+2)::before,
.cv-item:nth-child(3n+2) .cv-year { background: var(--moderation-deep); }
.cv-item:nth-child(3n+2)::before { background: var(--moderation-deep); }
.cv-item:nth-child(3n)::before,
.cv-item:nth-child(3n) .cv-year { background: var(--it-deep); }
.cv-item:nth-child(3n)::before { background: var(--it-deep); }
.cv-grid {
display: grid;
gap: 1.4rem;
align-items: center;
} .cv-media {
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 0.9rem; }
.cv-photo {
position: relative;
display: inline-block;
padding: 0.75rem 0.75rem 2.9rem;
background: linear-gradient(160deg, #fdfcf7 0%, #f4efe2 100%);
border-radius: 3px;
box-shadow:
0 1px 2px rgba(35, 25, 10, 0.18),
0 14px 32px rgba(15, 23, 42, 0.2);
transform: rotate(-2deg);
transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.cv-item:nth-child(even) .cv-photo { transform: rotate(1.6deg); }
.cv-photo img {
display: block;
width: auto;
max-width: 100%;
height: auto !important;
object-fit: contain;
border-radius: 2px;
filter: sepia(0.38) contrast(1.04) saturate(0.82);
transition: filter 0.45s ease;
} .cv-photo::before {
content: "";
position: absolute;
inset: 0.75rem 0.75rem 2.9rem;
border-radius: 2px;
pointer-events: none;
background:
radial-gradient(ellipse at center, transparent 52%, rgba(62, 42, 18, 0.22) 100%),
linear-gradient(112deg, transparent 40.6%, rgba(255, 255, 255, 0.4) 41%, transparent 41.5%),
linear-gradient(78deg, transparent 67.2%, rgba(255, 255, 255, 0.28) 67.6%, transparent 68.1%),
linear-gradient(99deg, transparent 21.4%, rgba(255, 255, 255, 0.22) 21.7%, transparent 22.1%),
linear-gradient(171deg, transparent 84.1%, rgba(255, 255, 255, 0.18) 84.3%, transparent 84.6%);
} .cv-photo::after {
content: "";
position: absolute;
top: -0.85rem;
left: 50%;
width: 6.5rem;
height: 1.7rem;
transform: translateX(-50%) rotate(-3deg);
background: rgba(233, 227, 204, 0.82);
border-left: 1px dashed rgba(120, 100, 60, 0.25);
border-right: 1px dashed rgba(120, 100, 60, 0.25);
box-shadow: 0 2px 5px rgba(35, 25, 10, 0.12);
}
.cv-item:nth-child(even) .cv-photo::after { transform: translateX(-50%) rotate(2.5deg); } .cv-photo-year {
position: absolute;
left: 0;
right: 0;
bottom: 0.55rem;
text-align: center;
font-family: "Bradley Hand", "Segoe Script", "Snell Roundhand", "Comic Sans MS", cursive;
font-size: 1.35rem;
line-height: 1;
color: #6d5a3e;
transform: rotate(-1.5deg);
} @media (hover: hover) {
.cv-item:hover .cv-photo,
.cv-item:focus-within .cv-photo {
transform: rotate(0deg) scale(1.02);
box-shadow:
0 1px 2px rgba(35, 25, 10, 0.18),
0 20px 44px rgba(15, 23, 42, 0.26);
}
.cv-item:hover .cv-photo img,
.cv-item:focus-within .cv-photo img { filter: sepia(0) contrast(1) saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
.cv-photo,
.cv-photo img { transition: none; }
}
.cv-title {
font-size: clamp(1.3rem, 2.4vw, 1.6rem);
line-height: 1.25;
margin: 0 0 0.8rem;
}
.cv-body p {
margin: 0 0 1rem;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
.cv-body p:last-child { margin-bottom: 0; }
.cv-body ul,
.cv-body ol { margin: 0 0 1rem 1.2rem; } @media (min-width: 56rem) {
.cv-grid {
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: 2.2rem;
}
.cv-grid--noimage { grid-template-columns: minmax(0, 1fr); }
.cv-item:nth-child(even) .cv-grid:not(.cv-grid--noimage) .cv-media { order: 2; }
}