.portrait-hero{position:relative;isolation:isolate;min-height:690px;background:#103d39;color:#fff;overflow:hidden}
.portrait-images{position:absolute;inset:0 0 0 40%;z-index:-3}
.portrait-images .portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 40%;opacity:0;transition:opacity 1.4s ease}
.portrait-images .portrait.active{opacity:1}
.portrait-images .portrait[data-portrait="1"]{object-position:38% 42%}
.portrait-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#103d39 0%,#103d39 35%,rgba(16,61,57,.96) 42%,rgba(16,61,57,.68) 51%,rgba(16,61,57,.12) 68%,rgba(16,61,57,.04) 100%),linear-gradient(0deg,rgba(5,32,29,.65),transparent 35%)}
.portrait-copy{position:relative;padding:65px var(--gx) 35px;width:62%;max-width:940px;box-sizing:border-box}
.portrait-copy h1{font-size:13px;font-weight:600;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:#a8d9ce;max-width:520px;margin:0 0 24px}
.portrait-headline{font-family:Newsreader,Georgia,serif;font-size:clamp(42px,4.7vw,76px);line-height:1.02;font-weight:500;margin:0 0 24px;letter-spacing:-.025em}
.portrait-headline span{color:#c3e4db}
.portrait-intro{max-width:540px;font-size:18px;line-height:1.6;color:#edf5f2;margin:0 0 28px}
.portrait-actions{display:flex;gap:12px;flex-wrap:wrap}
.portrait-actions a{display:inline-flex;gap:24px;justify-content:space-between;align-items:center;text-decoration:none;font-size:16px;font-weight:600;padding:17px 22px;border-radius:8px;min-height:54px}
.portrait-primary{background:#bce6d7;color:#103d39}
.portrait-secondary{color:#fff;border:1px solid #8bb5ad}
.portrait-actions a:focus-visible,.portrait-controls button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.portrait-trust{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid #638a82;margin-top:30px;padding-top:20px;font-size:13px;color:#c3d9d2}
.portrait-trust span::before{content:'•';color:#a9dac9;margin-right:8px}
.portrait-controls{position:absolute;right:var(--gx);bottom:28px;display:flex;gap:10px;align-items:center}
.portrait-controls button{font:inherit;cursor:pointer;color:#fff;border:1px solid #ffffff70;background:#103d39c9;backdrop-filter:blur(10px);border-radius:7px;min-height:46px;padding:9px 13px;font-size:12px}
.portrait-controls button span{margin-left:8px;font-size:14px}
.portrait-controls button[aria-pressed="true"]{background:#d6eee5;color:#103d39;border-color:#d6eee5}
.portrait-controls .portrait-pause{font-size:20px;min-width:46px}
.portrait-award{padding:30px var(--gx) 44px}
.portrait-award .fc-prize-card{max-width:1100px;margin:auto}
@media(max-width:1100px){.portrait-copy{width:68%;padding-top:48px}.portrait-hero{min-height:740px}.portrait-controls{bottom:20px}}
@media(max-width:700px){.portrait-hero{display:flex;flex-direction:column;min-height:0;overflow:visible}.portrait-images{position:relative;inset:auto;order:0;height:340px;z-index:0}.portrait-shade{inset:0 0 auto;height:340px;z-index:1;background:linear-gradient(0deg,#103d39,transparent 40%)}.portrait-images .portrait{object-position:55% 35%}.portrait-images .portrait[data-portrait="1"]{object-position:38% 25%}.portrait-copy{width:100%;max-width:none;order:1;padding:12px var(--gx) 28px}.portrait-headline{font-size:44px}.portrait-copy h1{font-size:11px;margin-bottom:18px}.portrait-intro{font-size:17px}.portrait-actions a{flex:1 1 100%;font-size:16px}.portrait-trust{gap:12px;font-size:12px}.portrait-controls{position:relative;order:2;right:auto;bottom:auto;padding:0 var(--gx) 24px;flex-wrap:wrap}.portrait-award{padding-top:24px}.portrait-controls button{min-height:46px}}
@media(prefers-reduced-motion:reduce){.portrait-images .portrait{transition:none}}

/* Gemeinsames KI-Portraet statt Bildwechsel, lokaler Entwurf. */
.portrait-images .portrait{object-position:50% 35%;transition:none}
@media(max-width:700px){.portrait-images{height:300px}.portrait-shade{height:300px}.portrait-images .portrait{object-position:center 30%}}

/* Zwei Motive mit ruhiger Ueberblendung. */
.portrait-images .portrait{transition:opacity 1.4s ease}
.portrait-images .portrait[data-scene="autumn"]{object-position:80% center}
@media(max-width:700px){.portrait-images .portrait[data-scene="autumn"]{object-position:75% center}}
@media(prefers-reduced-motion:reduce){.portrait-images .portrait{transition:none}}

/* Kochmotiv: beide Gesichter sichtbar halten. */
.portrait-images .portrait[data-scene="cooking"]{object-position:70% center}
@media(max-width:700px){.portrait-images .portrait[data-scene="cooking"]{object-position:65% center}}

/* Fuenf Motive: Auswahl unterhalb des Textes, ohne Ueberlappung. */
.portrait-controls{position:relative;right:auto;bottom:auto;justify-content:flex-end;padding:0 var(--gx) 24px;flex-wrap:wrap}
.portrait-images .portrait[data-scene="shopping"],.portrait-images .portrait[data-scene="appointment"]{object-position:70% center}
@media(max-width:700px){.portrait-controls{justify-content:flex-start}.portrait-images .portrait[data-scene="shopping"],.portrait-images .portrait[data-scene="appointment"]{object-position:65% center}}

.portrait-images .portrait[data-scene="cafe"]{object-fit:contain;object-position:center;background:#493d2c}

.portrait-images:has([data-scene=cafe].active){left:30%}
.portrait-images .portrait[data-scene=cafe]{object-fit:cover;background:transparent}
@media(max-width:700px){.portrait-images:has([data-scene=cafe].active){left:auto}.portrait-images .portrait[data-scene=cafe]{object-fit:contain;background:#103d39}}

/* Portraetbeispiel v2: Lina bleibt vor dem Verlauf gut sichtbar. */
@media(min-width:701px){.portrait-hero:has(.portrait:first-child.active) .portrait-shade{background:linear-gradient(90deg,#103d39 0%,#103d39 38%,rgba(16,61,57,.95) 43%,rgba(16,61,57,.25) 51%,transparent 57%),linear-gradient(0deg,rgba(5,32,29,.45),transparent 30%)}}

@font-face{font-family:PortraitHand;src:url('/assets/fonts/herr-von-muellerhoff-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.portrait-note{position:absolute;z-index:1;right:3%;top:70%;width:82%;margin:0;text-align:center;font-family:PortraitHand,cursive;font-size:clamp(46px,4vw,64px);line-height:.95;font-weight:400;color:#124e47;text-shadow:0 1px 3px #fff;opacity:0;pointer-events:none;transform:rotate(-3deg)}
.portrait-images:has(.portrait:first-child.active) .portrait-note{opacity:1}
@media(max-width:700px){.portrait-note{top:auto;bottom:5px;right:2%;width:96%;font-size:42px;line-height:.95;text-shadow:0 1px 4px white,0 0 8px white}}

@media(min-width:701px){.portrait-note{top:62%;font-size:clamp(44px,3.5vw,56px)}}

.portrait-budget{font-size:15px;line-height:1.55;color:#d6e9e2;max-width:535px;margin:-8px 0 26px;border-left:2px solid #9acdbc;padding-left:13px}
.portrait-note{font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-weight:400;transform:rotate(-3deg);text-shadow:0 1px 2px #fff;line-height:1.25}
@media(min-width:701px){.portrait-note{top:76%;right:1%;width:67%;font-size:clamp(32px,2.65vw,43px)}}
@media(max-width:700px){.portrait-note{font-size:25px;line-height:1.25;width:83%;right:1%;bottom:8px}.portrait-budget{font-size:14px}}

/* Erklaerfilm links, Auszeichnung rechts. */
.film-award-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;padding:48px var(--gx) 64px;align-items:start}
.film-award-intro{margin-bottom:22px}
.film-award-intro h2{font-family:Newsreader,Georgia,serif;font-size:clamp(28px,2.6vw,40px);font-weight:500;line-height:1.12;margin:0 0 12px}
.film-award-intro p{font-size:18px;line-height:1.55;color:#3f4b4a;max-width:640px;margin:0}
.film-award-layout video{width:100%;height:auto}
.film-award-prize .fc-prize-card{margin:0;height:100%;grid-template-columns:minmax(150px,.85fr) minmax(0,1fr)}
.film-award-prize{min-width:0;padding-top:3px}
@media(max-width:1000px){.film-award-layout{grid-template-columns:1fr;gap:28px}.film-award-prize .fc-prize-card{grid-template-columns:minmax(130px,.8fr) minmax(0,1fr)}}
@media(max-width:600px){.film-award-layout{padding-top:30px;padding-bottom:40px}.film-award-intro p{font-size:17px}.film-award-prize .fc-prize-card{grid-template-columns:1fr}}

/* Video und Preiskasten haben gemeinsame Ober- und Unterkante. */
@media(min-width:1001px){
 .film-award-layout{row-gap:22px;align-items:stretch}
 .film-award-film{display:contents}
 .film-award-intro{grid-column:1;grid-row:1;margin:0}
 .film-award-layout video{grid-column:1;grid-row:2;align-self:start}
 .film-award-prize{grid-column:2;grid-row:2;align-self:stretch;padding-top:0}
 .film-award-prize .fc-prize-card{height:100%;padding:26px;gap:20px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;align-items:center}
 .film-award-prize .fc-prize-photo img{width:100%;height:auto;aspect-ratio:4/3;max-height:240px;object-fit:cover}
 .film-award-prize .fc-prize-card-copy strong{font-size:clamp(23px,2vw,30px);overflow-wrap:anywhere;hyphens:auto}
 .film-award-prize .fc-prize-card h2{font-size:clamp(26px,2.5vw,36px);overflow-wrap:anywhere}
}
@media(max-width:1000px){.film-award-prize{padding-top:0}.film-award-prize .fc-prize-card{height:auto}.film-award-prize .fc-prize-photo img{width:100%;height:auto;max-width:280px;aspect-ratio:4/3;object-fit:cover}.film-award-prize .fc-prize-card-copy strong{overflow-wrap:anywhere;hyphens:auto}}

/* Preisfoto nutzt die Kartenbreite staerker, kurzer Bericht daneben. */
@media(min-width:1001px){
 .film-award-prize .fc-prize-card{padding:22px;gap:16px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
 .film-award-prize .fc-prize-photo img{height:100%;min-height:210px;max-height:270px;aspect-ratio:auto;object-fit:cover}
 .film-award-prize .fc-prize-photo{height:100%;max-height:270px;min-height:210px}
 .film-award-prize .fc-prize-card-copy strong{font-size:clamp(22px,1.8vw,28px)}
 .film-award-prize .fc-prize-card-copy p{font-size:15px;line-height:1.45;margin:0 0 14px}
}
@media(max-width:600px){.film-award-prize .fc-prize-photo img{max-width:none;width:100%;height:auto;aspect-ratio:4/3}.film-award-prize .fc-prize-card-copy p{font-size:15px;line-height:1.5}}

.film-award-prize .prize-subheading{grid-column:1/-1;margin:0;text-align:center;font-family:Newsreader,Georgia,serif;font-size:27px;line-height:1.15;font-weight:500;color:#1d3f3b;overflow-wrap:anywhere}
@media(min-width:1001px){
 .film-award-prize .fc-prize-card{grid-template-rows:auto auto minmax(0,1fr);row-gap:10px;height:100%}
 .film-award-prize .fc-prize-photo{height:100%;min-height:0;max-height:none}
 .film-award-prize .fc-prize-photo img{height:100%;min-height:0;max-height:none;width:100%;aspect-ratio:auto}
 .film-award-prize .fc-prize-card-copy p{font-size:15px;line-height:1.45}
}
@media(max-width:600px){.film-award-prize .prize-subheading{font-size:25px}}

/* Publishing QA: readable mobile caption and compact intermediate layout. */
.portrait-image-credit{color:#c3d9d2;font-size:11px;margin:0;padding:0 var(--gx) 15px;text-align:right}
@media(min-width:1001px) and (max-width:1250px){
 .film-award-prize .fc-prize-card{padding:16px;gap:8px}
 .film-award-prize .fc-prize-card h2{font-size:25px}
 .film-award-prize .prize-subheading{font-size:22px}
 .film-award-prize .fc-prize-card-copy p{font-size:13px;line-height:1.4;margin-bottom:9px}
 .film-award-prize .fc-prize-card-copy a{font-size:14px}
}
@media(max-width:700px){
 .portrait-note{bottom:35px;right:1%;width:80%;font-size:24px;line-height:1.25;color:#123f39;text-shadow:0 1px 4px white,0 0 8px white}
 .portrait-hero:has(.portrait:first-child.active) .portrait-shade{background:linear-gradient(0deg,#103d39,transparent 23%)}
}
@media(max-width:1100px){
 .film-award-layout{grid-template-columns:1fr;gap:28px;align-items:start}
 .film-award-film{display:block}
 .film-award-intro{margin-bottom:22px}
 .film-award-prize{grid-column:auto;grid-row:auto;height:auto;padding:0}
 .film-award-prize .fc-prize-card{height:auto;grid-template-rows:auto auto auto}
 .film-award-prize .fc-prize-photo{height:auto;min-height:0}
 .film-award-prize .fc-prize-photo img{width:100%;height:auto;min-height:0;max-height:280px;aspect-ratio:4/3}
}