/* Kuzey Balık: Abschnitt „Kuzey'de bir akşam“, drei stumme Video-Schleifen in Bogenform. Eigene Datei von Helfer G. Nutzt nur die Farb- und Schrift-Variablen aus styles.css. Aufbau je Bogen: Standbild (picture) liegt unten, das Video liegt unsichtbar darüber und wird erst eingeblendet, wenn es wirklich läuft. Ohne JavaScript, bei „weniger Bewegung“ und im Datensparmodus bleibt also einfach das Standbild stehen. */ .film{padding:clamp(60px,8vw,108px) 0 clamp(44px,6vw,84px);overflow:hidden} .film .bolum__bas{margin-bottom:clamp(34px,4.6vw,58px)} /* Reihe: bewusst schmaler als die Seite (920 statt 1180 px), damit der Abschnitt leicht bleibt */ .film__serit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.6vw,48px);align-items:start;width:min(920px,100% - 64px);margin-inline:auto} .film__oge{margin:0;min-width:0} /* Triptychon: der mittlere Bogen sitzt eine Stufe tiefer */ .film__oge:nth-child(2){margin-top:clamp(26px,3.6vw,46px)} /* Feiner Messingrahmen mit Abstand, wie beim Bogen im Einstieg */ .film__cerceve{position:relative} .film__cerceve::before{content:"";position:absolute;inset:-9px;border:1px solid var(--pirinc);border-radius:999px 999px 13px 13px;opacity:.5;pointer-events:none} /* Bogen. aspect-ratio reserviert den Platz sofort: kein Springen beim Laden. translateZ: Safari schneidet Videos sonst nicht rund ab. */ .film__kemer{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 6px 6px;background:var(--kum);box-shadow:0 40px 70px -46px rgba(17,39,92,.55);transform:translateZ(0)} .film__kemer picture,.film__kemer img,.film__kemer video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} .film__kemer img,.film__kemer video{object-fit:cover;object-position:50% 50%} .film__kemer video{opacity:0;pointer-events:none;background:transparent;transition:opacity .7s var(--yay)} .film__oge.oynuyor video{opacity:1} /* iPhone im Stromsparmodus blendet sonst einen grossen Abspielknopf ein */ .film__kemer video::-webkit-media-controls,.film__kemer video::-webkit-media-controls-start-playback-button,.film__kemer video::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none;opacity:0} .film__oge figcaption{margin-top:26px;text-align:center;font:500 .74rem/1 var(--sans);letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--pirinc-koyu)} /* Anhalten/Abspielen (WCAG 2.2.2). Der Platz ist immer reserviert, der Knopf erscheint erst mit JavaScript. */ /* position+z-index: der Knopf liegt sicher über allem, was mit Schatten in diese Zeile ragt */ .film__alt{position:relative;z-index:1;display:flex;justify-content:center;min-height:44px;margin:clamp(20px,2.6vw,32px) 0 0} .film__dugme{display:inline-flex;align-items:center;gap:11px;min-height:44px;min-width:44px;padding:0 18px;border:0;border-radius:999px;background:none;font:500 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--metin-acik);cursor:pointer;transition:color .25s} .film__dugme[hidden]{display:none} .film__dugme:hover{color:var(--lacivert)} .film__dugme::before{content:"";flex:none;box-sizing:border-box;width:9px;height:11px;border:solid currentColor;border-width:0 2.5px} .film__dugme[data-durum="duruyor"]::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent currentColor} /* ---------- Handy (bis 760 px): drei Varianten zum Ausprobieren ---------- Umschalten per Adresse: ?film=1, ?film=2, ?film=3. film.js setzt dazu data-film="N" am . Ohne Parameter und ohne JavaScript gilt Variante 1. Über 760 px bleibt immer das Triptychon. 1 „Hero“: Video läuft im grossen Bogen des Einstiegs, der Film-Abschnitt entfällt (Seite wird kürzer). 2 „Band“: ein flaches, vollbreites Filmband mit Wellenkante, alle Motive nacheinander in einem Clip. 3 „Zwei Bögen“: zwei kleine Bögen (Sofra, Lezzet) nebeneinander, unten bündig, der Mekân-Bogen entfällt. */ /* Bausteine der Varianten, ausserhalb ihrer Variante unsichtbar (und damit auch nie geladen) */ .film__bant{display:none} .film-hero{position:relative;display:block} /* Höhe 2 px kleiner als das Foto: Chrome wertet sonst das Video (gleich gross, Rundung minimal grösser) als „grösstes Bild“ und die gemessene Ladezeit (LCP) würde bis zum Videostart verlängert. So bleibt sicher das Foto das LCP-Bild. */ .film-hero__video{display:none;position:absolute;left:0;top:0;width:100%;height:calc(100% - 2px);max-width:none;object-fit:cover;object-position:50% 50%;border-radius:999px 999px 6px 6px;-webkit-clip-path:inset(0 round 999px 999px 6px 6px);clip-path:inset(0 round 999px 999px 6px 6px);opacity:0;pointer-events:none;background:transparent;transition:opacity .9s var(--yay)} .film-hero.oynuyor .film-hero__video{opacity:1} .film-hero__video::-webkit-media-controls,.film-hero__video::-webkit-media-controls-start-playback-button,.film-hero__video::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none;opacity:0} .film-hero__dugme{display:none} @media (max-width:760px){ /* Variante 1: Hero */ html:not([data-film="2"]):not([data-film="3"]) .film{display:none} html:not([data-film="2"]):not([data-film="3"]) .film-hero__video{display:block} html:not([data-film="2"]):not([data-film="3"]) .film-hero__dugme{position:absolute;right:2px;bottom:2px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--pirinc-cizgi);border-radius:50%;background:rgba(255,253,248,.92);color:var(--lacivert);cursor:pointer;box-shadow:0 10px 22px -14px rgba(17,39,92,.6)} /* Das Video ist 2 px niedriger als das Foto (siehe oben). Damit darunter kein dunkler Fotostreifen stehen bleibt, deckt ihn eine Linie in der Hintergrundfarbe ab, sobald das Video eingeblendet ist. */ html:not([data-film="2"]):not([data-film="3"]) .film-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#fbf6ec;opacity:0;pointer-events:none;transition:opacity .9s var(--yay)} html:not([data-film="2"]):not([data-film="3"]) .film-hero.oynuyor::after{opacity:1} .film-hero__dugme[hidden]{display:none!important} .film-hero__dugme::before{content:"";box-sizing:border-box;width:9px;height:11px;border:solid currentColor;border-width:0 2.5px} .film-hero__dugme[data-durum="duruyor"]::before{width:0;height:0;margin-left:3px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent currentColor} /* Variante 2: Band */ html[data-film="2"] .film{padding:40px 0 18px} html[data-film="2"] .film .bolum__bas{margin-bottom:22px} html[data-film="2"] .film h2{font-size:1.8rem} html[data-film="2"] .film .ust-yazi{margin-bottom:12px} html[data-film="2"] .film__serit{display:none} html[data-film="2"] .film__bant{position:relative;display:block;width:100%;aspect-ratio:16/10;max-height:300px;overflow:hidden;background:var(--kum);transform:translateZ(0)} .film__bant picture,.film__bant img,.film__bant video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} .film__bant img,.film__bant video{object-fit:cover;object-position:50% 50%} .film__bant video{opacity:0;pointer-events:none;background:transparent;transition:opacity .7s var(--yay)} .film__bant.oynuyor video{opacity:1} .film__bant video::-webkit-media-controls,.film__bant video::-webkit-media-controls-start-playback-button,.film__bant video::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none;opacity:0} .film__dalga{position:absolute;left:0;z-index:1;display:block;width:100%;height:16px;fill:var(--krem);pointer-events:none} .film__dalga--alt{bottom:-1px} .film__dalga--ust{top:-1px;transform:rotate(180deg)} html[data-film="2"] .film__alt{margin-top:4px} /* Variante 3: zwei Bögen */ html[data-film="3"] .film{padding:30px 0 8px} html[data-film="3"] .film .ust-yazi{display:none} html[data-film="3"] .film .bolum__bas{margin-bottom:26px} html[data-film="3"] .film h2{font-size:1.7rem} html[data-film="3"] .film__serit{grid-template-columns:repeat(2,min(44vw,230px));justify-content:center;gap:min(4vw,24px);width:auto} html[data-film="3"] .film__oge:nth-child(2){margin-top:0} /* Mobil entfällt der Mekân-Bogen (nicht der dritte): der gelbe Aufsteller soll auf dem Handy kein Hauptmotiv sein. Es bleiben Sofra und Lezzet. */ html[data-film="3"] .film__oge:nth-child(1){display:none} html[data-film="3"] .film__cerceve::before{inset:-6px;border-radius:999px 999px 10px 10px} html[data-film="3"] .film__oge figcaption{margin-top:18px;font-size:.68rem} html[data-film="3"] .film__alt{margin-top:2px} } @media print{ .film__kemer video,.film__alt{display:none} }