/* ========================================================================= Filmworkshop – Theme-CSS (Frontend + Editor) Masse stammen 1:1 aus dem Adobe-Muse-Layout (1024 px Raster, 994 px Inhalt). ========================================================================= */ /* ---- Farben & Seitenschlüssel --------------------------------------- */ :root { --fw-rot: #e54545; --fw-blau: #26657f; --fw-ocker: #e5b545; --fw-gruen: #36b28d; --fw-grau: #5f5f5f; --fw-color: var(--fw-rot); --fw-font-text: "Open Sans", sans-serif; --fw-font-titel: "Advent Pro", sans-serif; } body.fw-blau { --fw-color: var(--fw-blau); } body.fw-ocker { --fw-color: var(--fw-ocker); } body.fw-gruen { --fw-color: var(--fw-gruen); } /* Eigene Seitenfarbe (Seitenleiste → Seitenfarbe) wird als Inline-Variable auf gesetzt. */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--fw-color); color: #fff; font-family: var(--fw-font-text); font-weight: 300; font-size: 20px; line-height: 1.2; text-rendering: optimizeLegibility; font-feature-settings: "liga"; word-wrap: break-word; } strong, b { font-weight: 600; } a { color: inherit; } img { max-width: 100%; height: auto; } /* ---- Kopfbereich ----------------------------------------------------- */ .fw-header { position: relative; z-index: 5; height: 85px; background: #fff; } .fw-header__inner { position: relative; width: 994px; max-width: 100%; height: 85px; margin: 0 auto; } .fw-logo { position: absolute; left: 10px; top: 19px; display: block; width: 318px; height: 50px; background-color: var(--fw-color); -webkit-mask: url(../img/logo/logo-home.svg) no-repeat 0 0 / 318px 50px; mask: url(../img/logo/logo-home.svg) no-repeat 0 0 / 318px 50px; text-indent: -9999px; overflow: hidden; } .fw-nav { position: absolute; right: 9px; top: 13px; display: flex; gap: 10px; } .fw-nav__item, .fw-sidenav a { display: block; overflow: hidden; text-indent: -9999px; background-repeat: no-repeat; background-position: 0 0; text-decoration: none; } .fw-nav__item { width: 42px; height: 42px; background-size: 42px 42px; } .fw-nav__item--home { background-image: url(../img/nav/home.png); } .fw-nav__item--tatort { background-image: url(../img/nav/tatort.png); } .fw-nav__item--dokfilm { background-image: url(../img/nav/dokfilm.png); } .fw-nav__item--musikvideo { background-image: url(../img/nav/musikvideo.png); } .fw-nav__item--mail { background-image: url(../img/nav/mail.png); } .fw-nav__item--home:hover { background-image: url(../img/nav/home-hover.png); } .fw-nav__item--tatort:hover { background-image: url(../img/nav/tatort-hover.png); } .fw-nav__item--dokfilm:hover { background-image: url(../img/nav/dokfilm-hover.png); } .fw-nav__item--musikvideo:hover { background-image: url(../img/nav/musikvideo-hover.png); } .fw-nav__item--mail:hover { background-image: url(../img/nav/mail-hover.png); } body.fw-seite-home .fw-nav__item--home { background-image: url(../img/nav/home-active.png); } body.fw-seite-tatort .fw-nav__item--tatort { background-image: url(../img/nav/tatort-active.png); } body.fw-seite-dokfilm .fw-nav__item--dokfilm { background-image: url(../img/nav/dokfilm-active.png); } body.fw-seite-musikvideo .fw-nav__item--musikvideo { background-image: url(../img/nav/musikvideo-active.png); } /* ---- Seitliche Sprungleiste (fix am rechten Rand) -------------------- */ .fw-sidenav { position: fixed; right: 0; top: 343px; z-index: 50; width: 45px; height: 212px; background: #fff; border-radius: 3px 0 0 3px; } body.fw-seite-home .fw-sidenav { top: 298px; } /* Wie im Original: die Leiste liegt hinter dem 1024-px-Seiteninhalt. Sobald das Fenster so schmal ist, dass sie den Inhalt überlappen würde, ist sie nicht sichtbar. */ @media (max-width: 1113px) { .fw-sidenav { display: none; } } .fw-sidenav a { position: absolute; } .fw-sidenav__home { left: 7px; top: 13px; width: 34px; height: 30px; background-image: url(../img/nav/side-home.png); } .fw-sidenav__tatort { left: 3px; top: 55px; width: 42px; height: 30px; background-image: url(../img/nav/side-tatort.png); } .fw-sidenav__dokfilm { left: 3px; top: 93px; width: 42px; height: 30px; background-image: url(../img/nav/side-dokfilm.png); } .fw-sidenav__musikvideo { left: 3px; top: 130px; width: 41px; height: 30px; background-image: url(../img/nav/side-musikvideo.png); } .fw-sidenav__mail { left: 6px; top: 173px; width: 33px; height: 25px; background-image: url(../img/nav/side-mail.png); } .fw-sidenav__home:hover { background-image: url(../img/nav/side-home-hover.png); } .fw-sidenav__tatort:hover { background-image: url(../img/nav/side-tatort-hover.png); } .fw-sidenav__dokfilm:hover { background-image: url(../img/nav/side-dokfilm-hover.png); } .fw-sidenav__musikvideo:hover { background-image: url(../img/nav/side-musikvideo-hover.png); } .fw-sidenav__mail:hover { background-image: url(../img/nav/side-mail-hover.png); } body.fw-seite-tatort .fw-sidenav__tatort { background-image: url(../img/nav/side-tatort-active.png); } body.fw-seite-dokfilm .fw-sidenav__dokfilm { background-image: url(../img/nav/side-dokfilm-active.png); } body.fw-seite-musikvideo .fw-sidenav__musikvideo { background-image: url(../img/nav/side-musikvideo-active.png); } /* ---- Bänder (Gruppen mit Stil «Band») -------------------------------- */ .wp-block-group.is-style-fw-farbe { background: var(--fw-color); color: #fff; } .wp-block-group.is-style-fw-weiss { background: #fff; color: var(--fw-color); } .wp-block-group.is-style-fw-weiss a { color: var(--fw-color); } /* Sprung-Buttons ragen aus dem Band ins nächste hinein */ .fw-ragt-hinein { position: relative; z-index: 3; margin-bottom: -32px !important; } .fw-ragt-hinein-klein { position: relative; z-index: 3; margin-bottom: -20px !important; } /* ---- Überschriften --------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--fw-font-titel); font-weight: 600; line-height: 1.2; margin: 0; } .wp-block-heading.has-text-align-center { text-align: center; } /* Nie mitten im Wort umbrechen (Titel, Untermenü, Buttons, Labels) */ h1, h2, h3, h4, .fw-subnav h3, .wp-block-button__link, .fw-infos__liste strong, .fw-versicherung strong, .fw-ablauf__tage p, .fw-ablauf__zelle p { overflow-wrap: normal; word-break: keep-all; hyphens: none; } section.alignfull > h2.wp-block-heading, .fw-subnav h3, .wp-block-button__link { white-space: nowrap; } /* Muse setzt Abschnittstitel, Untermenü, Info-Labels und den Kontaktblock in Grossbuchstaben */ section.alignfull > h2.wp-block-heading, .fw-subnav h3, .fw-infos__liste strong, .fw-versicherung strong, .fw-kontakt__name, .fw-kontakt__daten { text-transform: uppercase; } /* ---- Startseite: Kacheln --------------------------------------------- */ /* Kachel = das

selbst (325 x 581 mit 10 px weissem Rand). Gleiche Regeln im Editor und auf der Website. Mehrere Kacheln teilen sich die Breite (3 = Original, 4+ werden kleiner). */ .fw-hero { padding-top: 57px; } .fw-kacheln { gap: 9.5px !important; } .wp-block-image.is-style-fw-kachel-tatort { --fw-tile: var(--fw-blau); --fw-tile-bild: url(../img/tiles/filmstreifen-tatort.svg); } .wp-block-image.is-style-fw-kachel-dokfilm { --fw-tile: var(--fw-ocker); --fw-tile-bild: url(../img/tiles/filmstreifen-dokfilm-2020.png); } .wp-block-image.is-style-fw-kachel-musikvideo { --fw-tile: var(--fw-gruen); --fw-tile-bild: url(../img/tiles/filmstreifen-musikvideo.svg); } .wp-block-image.is-style-fw-kachel-neu { --fw-tile: rgba(0, 0, 0, 0.35); --fw-tile-bild: none; } .wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"]) { position: relative; box-sizing: border-box; flex: 1 1 0 !important; max-width: 325px; min-width: 0; aspect-ratio: 325 / 581; margin: 0 !important; border: 10px solid #fff; overflow: hidden; background: var(--fw-tile); container-type: inline-size; } .wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"]) > a { display: block; } .wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"]) img { position: absolute; left: -0.3%; top: 0; width: 103.6%; height: 106.1%; max-width: none; object-fit: cover; transition: opacity 0.5s ease-out; } .wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"])::after { content: ""; position: absolute; inset: 0; background: var(--fw-tile) var(--fw-tile-bild) no-repeat -10px -10px; background-size: calc(100% + 20px) auto; transition: background-color 0.5s ease-out; pointer-events: none; } .wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"]):hover::after { background-color: transparent; } /* Muse: Foto bei Dokfilm und Musikvideo zu 60 % über der Kachelfarbe, bei Tatort voll */ .wp-block-image.is-style-fw-kachel-dokfilm img, .wp-block-image.is-style-fw-kachel-musikvideo img { opacity: 0.6; } /* Neue Kachel: Foto abgedunkelt, Label «Filmworkshop» und Kurstitel (Bildunterschrift) */ .wp-block-image.is-style-fw-kachel-neu::before { content: "Filmworkshop"; position: absolute; left: 50%; top: 34%; transform: translateX(-50%); z-index: 2; padding: 0 1.5cqw; border: 1px dotted #fff; font-family: var(--fw-font-titel); font-weight: 600; font-size: 7cqw; line-height: 1.3; color: #fff; white-space: nowrap; } .wp-block-image.is-style-fw-kachel-neu figcaption { position: absolute; left: 0; right: 0; top: 42%; z-index: 2; margin: 0; padding: 0 2cqw; font-family: var(--fw-font-titel); font-weight: 700; font-size: 20cqw; line-height: 1.1; text-align: center; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); white-space: normal; } /* Im Editor: Foto sichtbar (wie beim Überfahren auf der Website), Filmstreifen-Grafik darüber */ .editor-styles-wrapper .wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"])::after { background-color: transparent; } .editor-styles-wrapper .wp-block-image.is-style-fw-kachel-neu::after { background-color: rgba(0, 0, 0, 0.35); } /* ---- Untermenü unter dem Hero (Bilder / Kontakt bzw. Infos / …) ------- */ .fw-subnav { margin-top: 57px; } .fw-subnav .wp-block-heading { font-size: 25px; color: #fff; text-align: center; } .fw-subnav__item { align-items: center; } /* ---- Runde Pfeil-Buttons --------------------------------------------- */ .wp-block-button.is-style-fw-pfeil .wp-block-button__link { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 64px; height: 64px; padding: 0; border: 4px solid var(--fw-color); border-radius: 50%; background: #fff; color: var(--fw-color); font-size: 0; line-height: 1; text-decoration: none; box-shadow: none; } .wp-block-button.is-style-fw-pfeil .wp-block-button__link::after { content: ">"; display: block; transform: rotate(90deg); font-family: var(--fw-font-titel); font-weight: 700; font-size: 40px; color: var(--fw-color); padding-left: 2px; } .wp-block-button.is-style-fw-pfeil .wp-block-button__link:hover { background: var(--fw-color); border-color: #fff; } .wp-block-button.is-style-fw-pfeil .wp-block-button__link:hover::after { color: #fff; } .wp-block-button.is-style-fw-pfeil-hoch .wp-block-button__link { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 39px; height: 39px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: var(--fw-color); font-size: 0; line-height: 1; text-decoration: none; box-shadow: none; } .wp-block-button.is-style-fw-pfeil-hoch .wp-block-button__link::after { content: ">"; display: block; transform: rotate(-90deg); font-family: var(--fw-font-titel); font-weight: 700; font-size: 18px; color: #fff; padding-left: 1px; } .wp-block-button.is-style-fw-pfeil-hoch .wp-block-button__link:hover { background: #fff; border-color: var(--fw-color); } .wp-block-button.is-style-fw-pfeil-hoch .wp-block-button__link:hover::after { color: var(--fw-color); } /* Grosser Textbutton («Anmeldung», «Kontakt») */ .wp-block-button.is-style-fw-gross .wp-block-button__link { display: inline-block; padding: 6px 30px; border: 0; border-radius: 0; background: transparent; color: #fff; font-family: var(--fw-font-titel); font-weight: 600; font-size: 50px; line-height: 1.2; text-decoration: none; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; } .wp-block-button.is-style-fw-gross .wp-block-button__link:hover { background: #fff; color: var(--fw-color); } /* ---- Intro-Band ------------------------------------------------------ */ .fw-intro { padding-top: 80px; padding-bottom: 70px; } .fw-intro .wp-block-paragraph, .fw-intro p { font-size: 30px; line-height: 1.2; text-align: center; } /* ---- Bilder: Slideshow ----------------------------------------------- */ .fw-bilder { padding-top: 40px; } .fw-bilder h2.wp-block-heading { margin-bottom: 52px; } /* Rahmen 869 x 652 mit 10 px weissem Rand, Bild darin zentriert beschnitten (wie Muse) */ figure.wp-block-gallery.is-style-fw-slideshow { position: relative; display: block; box-sizing: border-box; width: 869px; height: 652px; margin: 0 auto; border: 10px solid #fff; overflow: visible; gap: 0; } figure.wp-block-gallery.is-style-fw-slideshow figure.wp-block-image { display: block; width: 849px; height: 632px; margin: 0; overflow: hidden; } figure.wp-block-gallery.is-style-fw-slideshow figure.wp-block-image img { display: block; width: 849px; height: 632px; max-width: none; object-fit: cover; object-position: center; } /* Vor dem JS: nur das erste Bild sichtbar; danach nur das aktive */ figure.wp-block-gallery.is-style-fw-slideshow:not(.fw-slideshow--ready) figure.wp-block-image:not(:first-child), figure.wp-block-gallery.is-style-fw-slideshow.fw-slideshow--ready figure.wp-block-image:not(.fw-aktiv) { display: none; } /* Pfeile ausserhalb des Rahmens */ .fw-slideshow__pfeil { position: absolute; top: 0; bottom: 0; z-index: 2; width: 40px; padding: 0; border: 0; background: transparent; color: #fff; font-family: var(--fw-font-titel); font-weight: 700; font-size: 40px; line-height: 1; cursor: pointer; } .fw-slideshow__pfeil--zurueck { left: -62px; text-align: left; padding-left: 14px; padding-bottom: 20px; } .fw-slideshow__pfeil--vor { right: -62px; text-align: right; padding-right: 13px; padding-bottom: 20px; } .fw-slideshow__pfeil:hover { color: rgba(255, 255, 255, 0.7); } .fw-slideshow__pfeil:focus-visible { outline: 2px solid #fff; outline-offset: -4px; } /* Vorschaubilder (werden per JS ins weisse Band verschoben): 60 x 45 mit 1 px Rand in 72-px-Zellen */ .fw-bilder-vorschau { padding-top: 47px; padding-bottom: 25px; min-height: 300px; box-sizing: border-box; } .fw-slideshow__vorschau { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 0; width: 936px; max-width: 100%; margin: 0 auto; padding: 0; list-style: none; } .fw-slideshow__vorschau li { margin: 0; width: 72px; display: flex; justify-content: center; } .fw-slideshow__vorschau button { display: block; box-sizing: border-box; width: 62px; height: 47px; padding: 0; border: 1px solid #fff; background: none; cursor: pointer; overflow: hidden; } .fw-slideshow__vorschau img { display: block; width: 100%; height: 100%; object-fit: cover; } .fw-slideshow__vorschau button:hover, .fw-slideshow__vorschau button.fw-aktiv { border: 2px solid var(--fw-color); } /* ---- Kontakt --------------------------------------------------------- */ .fw-kontakt { padding-top: 40px; } .fw-kontakt h2.wp-block-heading { margin-bottom: 96px; } /* Hinweistexte nur im Editor sichtbar */ .fw-hinweis { display: none; } .editor-styles-wrapper .fw-hinweis { display: block; opacity: 0.6; font-style: italic; } .fw-kontakt__name { font-size: 30px; text-align: center; margin-bottom: 25px; } .fw-kontakt__daten { font-size: 18px; font-weight: 600; line-height: 1.35; text-align: center; margin-bottom: 1px; } .fw-kontakt__daten a { text-decoration: none; } .fw-kontakt__daten a:hover { text-decoration: underline; } .fw-kontakt__bio { width: 393px; max-width: 100%; margin: 30px auto 0; font-size: 20px; line-height: 1.4; text-align: center; } .fw-kontakt__bio a { text-decoration: underline; } .fw-kontakt .fw-ragt-hinein-klein { margin-top: 183px; } .wp-block-image.is-style-fw-portrait { width: 245px; margin: 0 auto; } .wp-block-image.is-style-fw-portrait > a, .wp-block-image.is-style-fw-portrait > figure > a { position: relative; display: block; width: 225px; height: 225px; border: 10px solid #fff; background: #fff; transition: transform 0.5s ease; } .wp-block-image.is-style-fw-portrait img { display: block; width: 225px; height: 225px; object-fit: cover; } .wp-block-image.is-style-fw-portrait > a::after, .wp-block-image.is-style-fw-portrait > figure > a::after { content: ""; position: absolute; inset: 0; background: #fff url(../img/icons/mail.svg) no-repeat center / 90px 64px; opacity: 0; transition: opacity 0.5s ease; } .wp-block-image.is-style-fw-portrait > a:hover, .wp-block-image.is-style-fw-portrait > figure > a:hover { transform: scale(0.96); } .wp-block-image.is-style-fw-portrait > a:hover::after, .wp-block-image.is-style-fw-portrait > figure > a:hover::after { opacity: 1; } .editor-styles-wrapper .wp-block-image.is-style-fw-portrait img { border: 10px solid #fff; box-sizing: content-box; } /* ---- Fussbereich ----------------------------------------------------- */ .fw-footer { height: 35px; box-sizing: border-box; padding-top: 19px; background: #fff; color: var(--fw-color); font-size: 10px; font-weight: 600; line-height: 1.4; text-align: center; } .fw-footer p { margin: 0; font-size: 10px; letter-spacing: 0.03em; } .fw-footer a { color: var(--fw-color); text-decoration: none; } .fw-footer a:hover { text-decoration: underline; } .fw-footer__zeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 8px; row-gap: 4px; } .fw-footer__trenner { opacity: 0.6; } /* ---- Editor-Feinheiten ----------------------------------------------- */ .editor-styles-wrapper { background: var(--fw-color); } .editor-styles-wrapper .fw-sidenav { display: none; } /* ========================================================================= Kursseiten (Tatort / Dokfilm / Musikvideo) ========================================================================= */ /* Icons sind einfarbige Formen; sie werden per CSS-Maske in der Seitenfarbe eingefärbt (beliebige Farbe möglich). */ :root { --fw-pdf: url(../img/icons/pdf-tatort-off.svg); --fw-pdf-hover: url(../img/icons/pdf-tatort.svg); --fw-archiv: url(../img/icons/archiv-tatort-zu.svg); --fw-archiv-hover: url(../img/icons/archiv-tatort.svg); } body:not(.fw-seite-home) .fw-logo { top: 15px; } /* Hero: Kachel mit Foto links (325 x 581, 10 px Rand), drei Fotos rechts (je 10 px Rand) */ .fw-kurs-hero { padding-top: 57px; } .fw-kurs-hero__inhalt { align-items: flex-start; gap: 11px !important; } .fw-kurs-hero .fw-subnav__item { width: 135px; } .fw-hero .fw-subnav { padding-right: 42px; } .wp-block-image[class*="is-style-fw-kachel-foto"] { position: relative; box-sizing: border-box; width: 325px; height: 581px; flex: 0 0 325px; margin: 0 0 0 1px !important; border: 10px solid #fff; overflow: hidden; } .wp-block-image[class*="is-style-fw-kachel-foto"] img { display: block; width: 317px; height: 597px; max-width: none; object-fit: cover; margin: -8px 0 0 -3px; } .wp-block-image[class*="is-style-fw-kachel-foto"]::after { content: ""; position: absolute; left: -8px; top: -4px; width: 331px; height: 621px; background: var(--fw-tile-bild) no-repeat 0 0 / 331px 621px; pointer-events: none; } .wp-block-image.is-style-fw-kachel-foto-tatort { --fw-tile-bild: url(../img/tiles/filmstreifen-tatort.svg); } .wp-block-image.is-style-fw-kachel-foto-dokfilm { --fw-tile-bild: url(../img/tiles/filmstreifen-dokfilm.svg); } .wp-block-image.is-style-fw-kachel-foto-musikvideo { --fw-tile-bild: url(../img/tiles/filmstreifen-musikvideo.svg); } /* Kachel als Cover (neue Kursseiten): Foto mit editierbarem Titel statt Filmstreifen-Grafik */ .wp-block-cover.fw-kachel-cover { box-sizing: border-box; width: 325px; flex: 0 0 325px; height: 581px; min-height: 581px !important; margin: 0 0 0 1px !important; padding: 0 0 120px; border: 10px solid #fff; justify-content: center; } .wp-block-cover.fw-kachel-cover .wp-block-cover__inner-container { width: 100%; } .wp-block-cover.fw-kachel-cover .fw-kachel-cover__label { display: inline-block; margin: 0 auto 6px; padding: 0 4px; border: 1px dotted #fff; font-family: var(--fw-font-titel); font-weight: 600; font-size: 22px; line-height: 1.3; color: #fff; } .wp-block-cover.fw-kachel-cover p.fw-kachel-cover__label { text-align: center; } .wp-block-cover.fw-kachel-cover .fw-kachel-cover__titel { margin: 0; font-family: var(--fw-font-titel); font-weight: 700; font-size: 64px; line-height: 1.1; color: #fff; text-transform: none; white-space: normal; } .fw-kurs-fotos { width: 657px; flex: 0 0 657px; gap: var(--fw-foto-gap, 12px 10px) !important; } .fw-kurs-fotos .wp-block-image { margin: 0; border: 10px solid #fff; } .fw-kurs-fotos img { display: block; object-fit: cover; } /* Intro-Band Kursseiten */ .fw-kurs-intro { padding-top: 61px; padding-bottom: 40px; } .fw-kurs-intro p + p { padding-top: 10px; } /* Infos */ .fw-infos { padding-top: 40px; } .fw-infos h2.wp-block-heading { margin-bottom: 52px; } .fw-infos__liste { width: 873px; margin-left: 121px !important; margin-right: 0 !important; } .fw-infos__liste p { font-size: 25px; line-height: 1.2; margin-bottom: 30px; } .fw-infos__liste p a { text-decoration: underline; } .fw-infos__liste p:last-child { margin-bottom: 0; } /* Ablauf-Tabelle */ .fw-ablauf { margin-left: 118px !important; margin-right: 0 !important; margin-top: 16px; } .fw-ablauf__tage { padding-left: 43px; gap: 10px !important; } .fw-ablauf__tage p { width: 135px; font-size: 25px; line-height: 1.4; text-align: center; margin: 0; } .fw-ablauf__zeile { gap: 8px !important; margin-top: 6px; align-items: stretch !important; } .fw-ablauf__zeile + .fw-ablauf__zeile { margin-top: 10px; } .fw-ablauf__zeile > p:first-child { width: 35px; height: 137px; margin: 0; font-size: 25px; line-height: 1.4; text-align: center; writing-mode: vertical-rl; transform: rotate(180deg); } .fw-ablauf__zellen { gap: 10px !important; } .fw-ablauf__zelle { width: 135px; min-height: 137px; box-sizing: border-box; background: #fff; color: var(--fw-color); } .fw-ablauf__zelle p { font-size: 20px; font-weight: 600; line-height: 1.4; text-align: center; padding: 10px 0 0; margin: 0; } .fw-ablauf__zelle p.has-s-font-size { padding-top: 5px; } .fw-ablauf__zelle p.has-klein-16-font-size, .fw-ablauf__zelle p.has-klein-13-font-size { padding-top: 5px; } .fw-ablauf__zelle--frei { background: rgba(255, 255, 255, 0.5); color: #fff; } .fw-ablauf__stapel { width: 135px; gap: 9px !important; } .fw-ablauf__zellen { align-items: flex-start !important; } .fw-ablauf__stapel { align-self: flex-start; height: 137px; flex-wrap: nowrap !important; justify-content: space-between !important; } .fw-ablauf__stapel .fw-ablauf__zelle { min-height: 0; } .fw-ablauf__zelle.fw-ablauf__zelle--h68 { min-height: 68px; } .fw-ablauf__zelle.fw-ablauf__zelle--h60 { min-height: 60px; } .fw-ablauf__zelle.fw-ablauf__zelle--h63 { min-height: 63px; } .fw-ablauf__zelle.fw-ablauf__zelle--h64 { min-height: 64px; } .fw-versicherung { width: 802px; margin-left: 120px !important; margin-right: 0 !important; margin-top: 31px; font-size: 20px; line-height: 1.2; } .fw-infos .wp-block-buttons { margin-top: 15px; } /* Info-Blatt (Datei-Block) */ .fw-infoblatt { padding-top: 69px; padding-bottom: 44px; } .wp-block-file.is-style-fw-infoblatt { text-align: center; margin: 0; font-size: 30px; } .wp-block-file.is-style-fw-infoblatt a:first-of-type { position: relative; display: inline-block; padding-top: 152px; color: var(--fw-color); font-size: 30px; font-weight: 300; line-height: 1.2; text-decoration: none; } .wp-block-file.is-style-fw-infoblatt a:first-of-type::before { content: ""; position: absolute; left: 50%; top: 0; width: 100px; height: 123px; transform: translateX(-50%); background-color: var(--fw-color); -webkit-mask: var(--fw-pdf) no-repeat center top / contain; mask: var(--fw-pdf) no-repeat center top / contain; } .wp-block-file.is-style-fw-infoblatt a:first-of-type:hover::before { -webkit-mask-image: var(--fw-pdf-hover); mask-image: var(--fw-pdf-hover); } .wp-block-file.is-style-fw-infoblatt .wp-block-file__button, .wp-block-file.is-style-fw-infoblatt object { display: none; } /* FilmBeispiele (Vimeo) */ .fw-filmbeispiele { padding-top: 40px; } .fw-filmbeispiele h2.wp-block-heading { margin-bottom: 112px; } .fw-videos { width: 1014px; max-width: none; flex-wrap: wrap !important; gap: 15px 14px !important; } .fw-videos > .wp-block-embed { flex: 0 0 500px !important; width: 500px; max-width: none; margin: 0; border: 10px solid #fff; box-sizing: border-box; } .fw-videos .wp-block-embed__wrapper { position: relative; width: 480px; height: 274px; padding: 0; } .fw-videos .wp-block-embed__wrapper::before { display: none; } .fw-videos iframe { position: absolute; inset: 0; width: 480px; height: 270px; } /* Filmarchiv (Button mit Icon) */ .fw-filmarchiv { padding-top: 72px; padding-bottom: 56px; } .wp-block-button.is-style-fw-archiv .wp-block-button__link { position: relative; display: block; padding: 136px 0 0; border: 0; border-radius: 0; background: transparent; color: var(--fw-color); font-family: var(--fw-font-text); font-size: 30px; font-weight: 300; line-height: 1.2; text-decoration: none; box-shadow: none; } .wp-block-button.is-style-fw-archiv .wp-block-button__link::before { content: ""; position: absolute; left: 50%; top: 0; width: 160px; height: 121px; transform: translateX(-50%); background-color: var(--fw-color); -webkit-mask: var(--fw-archiv) no-repeat center top / auto 121px; mask: var(--fw-archiv) no-repeat center top / auto 121px; } .wp-block-button.is-style-fw-archiv .wp-block-button__link:hover::before { -webkit-mask-image: var(--fw-archiv-hover); mask-image: var(--fw-archiv-hover); } /* Anmelden */ .fw-anmelden { padding-top: 40px; } .fw-anmelden h2.wp-block-heading { margin-bottom: 128px; } .fw-anmelden__text { font-size: 30px; line-height: 1.4; text-align: center; } .fw-anmelden__text a { text-decoration: underline; } .wp-block-button.is-style-fw-gross .wp-block-button__link { display: block; box-sizing: content-box; width: 280px; height: 120px; padding: 4px 0 0; border: 10px solid #fff; border-radius: 0; background: transparent; color: #fff; font-family: var(--fw-font-titel); font-weight: 600; font-size: 50px; line-height: 60px; text-transform: uppercase; text-align: center; text-decoration: none; box-shadow: none; transition: background-color 0.5s ease, color 0.5s ease; } .wp-block-button.is-style-fw-gross .wp-block-button__link:hover { background: #fff; color: var(--fw-color); } .fw-schukulu-logo { margin: 45px auto 0; width: 206px; } .fw-schukulu-logo img { display: block; width: 206px; height: 130px; } .fw-schukulu-logo a:hover img { outline: 10px solid #fff; } /* ---- Dokfilm: abweichende Masse aus dokfilm.html ---------------------- */ body.fw-seite-dokfilm .fw-kurs-fotos { --fw-foto-gap: 11px 11px; } body.fw-seite-dokfilm .fw-kurs-hero__inhalt { gap: 12px !important; } body.fw-seite-dokfilm .wp-block-image[class*="is-style-fw-kachel-foto"] { margin-left: 0 !important; } body.fw-seite-dokfilm .wp-block-image[class*="is-style-fw-kachel-foto"] img { width: 325px; height: 612px; margin: -33px 0 0 -10px; } body.fw-seite-dokfilm .wp-block-image[class*="is-style-fw-kachel-foto"]::after { left: -17px; top: -15px; width: 329px; height: 617px; background-size: 329px 617px; } body.fw-seite-dokfilm .fw-infos { padding-top: 46px; } body.fw-seite-dokfilm .fw-infos h2.wp-block-heading { margin-bottom: 36px; } body.fw-seite-dokfilm .fw-ablauf { margin-top: -8px; } body.fw-seite-dokfilm .fw-versicherung { margin-top: 59px; } body.fw-seite-dokfilm .fw-infos .wp-block-buttons { margin-top: 60px; } body.fw-seite-dokfilm .fw-infoblatt { padding-top: 72px; padding-bottom: 41px; } body.fw-seite-dokfilm .fw-filmbeispiele h2.wp-block-heading { margin-bottom: 63px; } body.fw-seite-dokfilm .fw-filmarchiv { padding-top: 68px; padding-bottom: 62px; } body.fw-seite-dokfilm .wp-block-button.is-style-fw-archiv .wp-block-button__link { padding-top: 133px; } body.fw-seite-dokfilm .fw-anmelden { padding-top: 35px; } body.fw-seite-dokfilm .fw-schukulu-logo { margin-top: 44px; } /* ---- Musikvideo: abweichende Masse aus musikvideo.html ---------------- */ body.fw-seite-musikvideo .fw-kurs-fotos { --fw-foto-gap: 11px 11px; } body.fw-seite-musikvideo .fw-kurs-hero__inhalt { gap: 11px !important; } body.fw-seite-musikvideo .wp-block-image[class*="is-style-fw-kachel-foto"] { margin-left: 0 !important; width: 326px; flex-basis: 326px; } body.fw-seite-musikvideo .wp-block-image[class*="is-style-fw-kachel-foto"] img { width: 325px; height: 612px; margin: -6px 0 0 -10px; } body.fw-seite-musikvideo .wp-block-image[class*="is-style-fw-kachel-foto"]::after { left: -9px; top: -10px; width: 325px; height: 264px; background-size: 325px 611px; background-position: center top; } body.fw-seite-musikvideo .fw-kurs-intro { padding-top: 60px; padding-bottom: 50px; } body.fw-seite-musikvideo .fw-kurs-intro p { width: 1024px; max-width: 1024px !important; } body.fw-seite-musikvideo .fw-infos h2.wp-block-heading { margin-bottom: 29px; } body.fw-seite-musikvideo .fw-infos__liste { margin-left: 120px !important; } body.fw-seite-musikvideo .fw-ablauf { margin-top: -4px; } body.fw-seite-musikvideo .fw-versicherung { margin-top: 30px; } body.fw-seite-musikvideo .fw-infos .wp-block-buttons { margin-top: 48px; } body.fw-seite-musikvideo .fw-infoblatt { padding-top: 68px; padding-bottom: 44px; } body.fw-seite-musikvideo .fw-filmbeispiele h2.wp-block-heading { margin-bottom: 114px; } body.fw-seite-musikvideo .fw-filmarchiv { padding-top: 77px; padding-bottom: 41px; } body.fw-seite-musikvideo .wp-block-button.is-style-fw-archiv .wp-block-button__link { padding-top: 146px; } body.fw-seite-musikvideo .fw-anmelden { padding-top: 49px; } body.fw-seite-musikvideo .fw-anmelden h2.wp-block-heading { margin-bottom: 100px; } .wp-block-button.is-style-fw-gross.fw-gross--einzeilig .wp-block-button__link { width: 242px; height: 60px; } /* ---- Rechtsseiten (Impressum, Datenschutz) --------------------------- */ .fw-recht { padding: 60px 0 80px; } .fw-recht h2.wp-block-heading { margin-bottom: 40px; } .fw-recht h3 { margin: 30px 0 8px; font-size: 25px; } .fw-recht p { max-width: 760px; margin: 0 auto 12px; line-height: 1.5; } .fw-recht h3 { max-width: 760px; margin-left: auto; margin-right: auto; } .fw-recht a { text-decoration: underline; } /* ---- Feste Breite wie im Muse-Original (ab 1024 px: Desktop 1:1) ------ */ @media (min-width: 1024px) { body { min-width: 1024px; } .wp-block-group.alignfull, .fw-header, .fw-footer { min-width: 1024px; } } /* ========================================================================= /* ========================================================================= Mobile und Tablet (unter 1024 px): responsives Layout Abstände sind hier bewusst kleiner als im Desktop-Original (dort sind sie für 1024 px Breite gemessen und wirken auf dem Handy als Löcher). ========================================================================= */ @media (max-width: 1023px) { body { min-width: 0; } .wp-block-group.alignfull, .fw-header, .fw-footer { min-width: 0; } .is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) { max-width: 100% !important; } /* Rand kommt vom Band (16 px) */ .entry-content > .alignfull { padding-left: 16px; padding-right: 16px; box-sizing: border-box; } .fw-sidenav { display: none; } /* Einheitliche Abstände: Titel, Sprung-Buttons (Inline-Abstände der Blöcke überschreiben) */ section.alignfull > h2.wp-block-heading { margin-bottom: 28px !important; } .wp-block-buttons.fw-ragt-hinein { margin-top: 32px !important; } .wp-block-buttons.fw-ragt-hinein-klein { margin-top: 40px !important; } .fw-hero .fw-subnav, .fw-kurs-hero .fw-subnav { margin-top: 28px !important; } /* Kopfbereich */ .fw-header { height: auto; padding: 12px 16px; } .fw-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: auto; width: 100%; } .fw-logo { position: static; width: 220px; height: 35px; -webkit-mask-size: 220px 35px; mask-size: 220px 35px; flex: 0 0 auto; } body:not(.fw-seite-home) .fw-logo { top: auto; } .fw-nav { position: static; gap: 6px; } .fw-nav__item { width: 34px; height: 34px; background-size: 34px 34px; } /* Startseite: Kacheln zu zweit (Tablet) bzw. untereinander (Handy) */ .fw-hero { padding-top: 20px; } .fw-kacheln { flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; } .fw-kacheln .wp-block-image[class*="is-style-fw-kachel"] { flex: 0 0 calc(33.333% - 11px) !important; max-width: 325px; } /* Tablet: drei nebeneinander */ .fw-subnav { flex-wrap: wrap !important; gap: 24px !important; padding: 0 !important; } .fw-hero .fw-subnav { padding-right: 0 !important; } .fw-kurs-hero .fw-subnav__item { width: auto; } /* Intro */ .fw-intro { padding-top: 64px; padding-bottom: 36px; } /* Sprung-Button ragt 32 px hinein */ .fw-intro p, .fw-intro .wp-block-paragraph, body.fw-seite-musikvideo .fw-kurs-intro p { font-size: 21px; line-height: 1.35; width: auto; max-width: 100% !important; } .fw-intro p + p { padding-top: 12px !important; } /* Galerie */ .fw-bilder { padding-top: 32px; } figure.wp-block-gallery.is-style-fw-slideshow { width: 100%; height: auto; aspect-ratio: 869 / 652; } figure.wp-block-gallery.is-style-fw-slideshow figure.wp-block-image, figure.wp-block-gallery.is-style-fw-slideshow figure.wp-block-image img { width: 100%; height: 100%; } .fw-slideshow__pfeil--zurueck { left: 0; width: 44px; padding: 0 0 0 4px; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent); } .fw-slideshow__pfeil--vor { right: 0; width: 44px; padding: 0 4px 0 0; background: linear-gradient(270deg, rgba(0,0,0,.35), transparent); } .fw-bilder .wp-block-buttons.fw-ragt-hinein { margin-top: 28px !important; } .fw-bilder-vorschau { min-height: 0; padding: 52px 16px 24px; } .fw-slideshow__vorschau { width: 100%; justify-content: center; gap: 8px 0; } /* Kontakt */ .fw-kontakt { padding-top: 32px; } .fw-kontakt__name { margin-bottom: 12px; } .fw-kontakt__bio { width: auto; max-width: 100%; margin-top: 20px; font-size: 19px; } .fw-kontakt .wp-block-buttons.fw-ragt-hinein-klein { margin-top: 36px !important; } /* Kursseiten: Kopfbereich. Kachel skaliert mit (max. 325 px, Filmstreifen-Grafik in Prozent), darunter das grosse Foto, dann die zwei kleinen nebeneinander wie im Original. */ .fw-kurs-hero { padding-top: 20px; } .fw-kurs-hero__inhalt { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; } .wp-block-image[class*="is-style-fw-kachel-foto"], .wp-block-cover.fw-kachel-cover { margin: 0 auto !important; } .wp-block-image[class*="is-style-fw-kachel-foto"] { width: min(325px, 100%) !important; flex: 0 0 auto !important; height: auto !important; aspect-ratio: 325 / 581; } .wp-block-image[class*="is-style-fw-kachel-foto"] > a { display: block; position: absolute; inset: 0; } .wp-block-image[class*="is-style-fw-kachel-foto"] img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; } .wp-block-image[class*="is-style-fw-kachel-foto"]::after { left: -2.5% !important; top: -0.7% !important; width: 102% !important; height: 107% !important; background-size: 100% 100% !important; background-position: 0 0 !important; } body.fw-seite-dokfilm .wp-block-image[class*="is-style-fw-kachel-foto"], body.fw-seite-musikvideo .wp-block-image[class*="is-style-fw-kachel-foto"] { margin: 0 auto !important; width: min(325px, 100%) !important; flex-basis: auto !important; } body.fw-seite-musikvideo .wp-block-image[class*="is-style-fw-kachel-foto"]::after { height: 45.5% !important; background-size: 100% auto !important; background-position: center top !important; } .wp-block-cover.fw-kachel-cover { width: min(325px, 100%); flex: 0 0 auto; height: auto; min-height: 0 !important; aspect-ratio: 325 / 581; padding-bottom: 20%; } .wp-block-cover.fw-kachel-cover .fw-kachel-cover__titel { font-size: clamp(40px, 19vw, 64px); } .fw-kurs-fotos { width: 100% !important; flex: 1 1 100% !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; } .fw-kurs-fotos .wp-block-image { flex: 1 1 100% !important; min-width: 0; box-sizing: border-box; } .fw-kurs-fotos .wp-block-image.fw-foto-links, .fw-kurs-fotos .wp-block-image.fw-foto-rechts { flex: 1 1 calc(50% - 6px) !important; } .fw-kurs-fotos img { width: 100% !important; height: auto !important; aspect-ratio: 295 / 248; } .fw-kurs-fotos .fw-foto-gross img { aspect-ratio: 637 / 282; } /* Infos: Label auf eigener Zeile, kompakter Text */ .fw-infos { padding-top: 32px !important; } .fw-infos__liste, body.fw-seite-musikvideo .fw-infos__liste { width: auto !important; margin-left: 0 !important; } /* Musikvideo hat am Desktop 120 px !important */ .fw-infos__liste p { font-size: 17px; line-height: 1.4; margin-bottom: 14px; } .fw-infos__liste p strong { display: block; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 2px; } .fw-infos__liste p:last-child strong { margin-bottom: 0; } .fw-versicherung { width: auto !important; margin: 20px 0 0 !important; font-size: 16px; line-height: 1.4; } .fw-versicherung strong { display: block; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 2px; } .fw-infos .wp-block-buttons.fw-ragt-hinein { margin-top: 28px !important; } /* Ablauf: unter 1024 px als Tabelle «Tag | Vormittag | Nachmittag» (Tage untereinander). Die Original-Zeilen werden per display:contents aufgelöst und die Zellen im Grid platziert. */ .fw-ablauf { display: grid !important; grid-template-columns: max-content 1fr 1fr; gap: 6px 6px; align-items: stretch; margin: 8px 0 0 !important; padding: 0; overflow: visible; min-width: 0; } .fw-ablauf__tage, .fw-ablauf__zeile, .fw-ablauf__zellen { display: contents !important; } .fw-ablauf__tage p { width: auto; grid-column: 1; align-self: center; padding-right: 4px; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: left; margin: 0; } .fw-ablauf__zeile > p:first-child { grid-row: 1; width: auto; height: auto; margin: 0; padding: 0 0 2px; writing-mode: horizontal-tb; transform: none; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; } .fw-ablauf > :nth-child(2) > p:first-child { grid-column: 2; } .fw-ablauf > :nth-child(3) > p:first-child { grid-column: 3; } .fw-ablauf__tage p:nth-child(1) { grid-row: 2; } .fw-ablauf__tage p:nth-child(2) { grid-row: 3; } .fw-ablauf__tage p:nth-child(3) { grid-row: 4; } .fw-ablauf__tage p:nth-child(4) { grid-row: 5; } .fw-ablauf__tage p:nth-child(5) { grid-row: 6; } .fw-ablauf__tage p:nth-child(6) { grid-row: 7; } .fw-ablauf__tage p:nth-child(7) { grid-row: 8; } .fw-ablauf > :nth-child(2) .fw-ablauf__zellen > * { grid-column: 2; } .fw-ablauf > :nth-child(3) .fw-ablauf__zellen > * { grid-column: 3; } .fw-ablauf__zellen > :nth-child(1) { grid-row: 2; } .fw-ablauf__zellen > :nth-child(2) { grid-row: 3; } .fw-ablauf__zellen > :nth-child(3) { grid-row: 4; } .fw-ablauf__zellen > :nth-child(4) { grid-row: 5; } .fw-ablauf__zellen > :nth-child(5) { grid-row: 6; } .fw-ablauf__zellen > :nth-child(6) { grid-row: 7; } .fw-ablauf__zellen > :nth-child(7) { grid-row: 8; } .fw-ablauf__zelle { width: auto; min-height: 0 !important; height: auto !important; display: flex; flex-direction: column; justify-content: center; padding: 8px 6px; } .fw-ablauf__zelle p { font-size: 15px; line-height: 1.3; padding: 0 !important; } .fw-ablauf__zelle p.has-s-font-size, .fw-ablauf__zelle p.has-klein-16-font-size, .fw-ablauf__zelle p.has-klein-13-font-size { font-size: 14px !important; } .fw-ablauf__stapel { display: flex !important; flex-direction: column; width: auto; height: auto !important; gap: 6px !important; align-self: stretch; } .fw-ablauf__stapel .fw-ablauf__zelle { flex: 1 1 auto; } /* Info-Blatt und Filmarchiv */ .fw-infoblatt { padding: 64px 0 40px !important; } .wp-block-file.is-style-fw-infoblatt a:first-of-type { padding-top: 130px; font-size: 24px; } .wp-block-file.is-style-fw-infoblatt a:first-of-type::before { width: 84px; height: 104px; } .fw-filmarchiv { padding: 64px 0 40px !important; } .wp-block-button.is-style-fw-archiv .wp-block-button__link { padding-top: 116px !important; font-size: 24px; } .wp-block-button.is-style-fw-archiv .wp-block-button__link::before { height: 104px; -webkit-mask-size: auto 104px; mask-size: auto 104px; } /* Videos */ .fw-filmbeispiele { padding-top: 32px; } .fw-videos { width: 100% !important; max-width: 100%; gap: 16px !important; } .fw-videos > .wp-block-embed { flex: 1 1 100% !important; width: 100%; max-width: 500px; margin: 0 auto; } .fw-videos .wp-block-embed__wrapper { width: 100%; height: auto; aspect-ratio: 16 / 9; } .fw-videos iframe { width: 100%; height: 100%; } /* Anmelden */ .fw-anmelden { padding-top: 32px !important; } .fw-anmelden__text { width: auto; max-width: 100%; font-size: 21px; line-height: 1.35; } .fw-anmelden__text br { display: none; } /* fester Umbruch aus dem Original passt nicht zur schmalen Breite */ .fw-anmelden .wp-block-buttons { margin-top: 28px !important; } .fw-schukulu-logo { margin-top: 28px !important; } .fw-anmelden .wp-block-buttons.fw-ragt-hinein-klein { margin-top: 36px !important; } /* Rechtsseiten und Fussbereich */ .fw-recht { padding: 40px 0 56px; } .fw-recht h3 { margin-top: 24px; font-size: 22px; } .fw-recht p, .fw-recht h3 { max-width: 100%; } .fw-footer { height: auto; padding: 18px 16px 22px; line-height: 1.6; } .fw-footer p { font-size: 12px; } .fw-footer__copy { flex: 0 0 100%; text-align: center; } .fw-footer__copy + .fw-footer__trenner { display: none; } } /* Handy */ @media (max-width: 600px) { section.alignfull > h2.wp-block-heading { font-size: 28px; white-space: normal; margin-bottom: 22px !important; } .fw-header__inner { flex-wrap: wrap; justify-content: center; } .fw-kacheln .wp-block-image[class*="is-style-fw-kachel"] { flex: 0 0 100% !important; max-width: 325px; } /* Handy: untereinander */ .fw-slideshow__vorschau li { width: 25%; } .fw-slideshow__vorschau button { width: calc(100% - 8px); height: auto; aspect-ratio: 62 / 47; } .fw-subnav { gap: 12px 10px !important; } .fw-subnav .wp-block-heading { font-size: 18px !important; } /* Preset-Klasse hat !important */ .fw-kurs-hero .fw-subnav .wp-block-heading { font-size: 16px !important; } .fw-intro { padding-top: 56px; padding-bottom: 32px; } .fw-intro p, .fw-intro .wp-block-paragraph, body.fw-seite-musikvideo .fw-kurs-intro p { font-size: 18px; line-height: 1.4; } .wp-block-file.is-style-fw-infoblatt a:first-of-type, .wp-block-button.is-style-fw-archiv .wp-block-button__link { font-size: 21px; } .fw-infoblatt, .fw-filmarchiv { padding-bottom: 32px !important; } .fw-kontakt__bio { font-size: 18px; } .fw-infos__liste p { font-size: 16px; } .fw-anmelden__text { font-size: 18px; } .fw-ablauf__tage p { font-size: 14px; } .fw-ablauf__zelle p { font-size: 14px; } .fw-ablauf__zelle p.has-s-font-size, .fw-ablauf__zelle p.has-klein-16-font-size, .fw-ablauf__zelle p.has-klein-13-font-size { font-size: 13px !important; } .wp-block-button.is-style-fw-gross .wp-block-button__link { width: auto; height: auto; min-height: 60px; padding: 4px 20px 0; font-size: 36px; line-height: 1.4; white-space: normal; } .fw-kontakt__name { font-size: 26px; } .fw-kontakt__daten { font-size: 16px; } }