/* ===================================================================== Bowen Moves – gemeinsames Stylesheet für alle Seiten --------------------------------------------------------------------- 1 SCHRIFTEN hier Schriftarten tauschen 2 GRÖSSEN/FARBEN hier Schriftgrößen und Farben anpassen 3 Grundlagen und gemeinsame Bausteine 4 Kontaktblock (alle Seiten) 5 Startseite (body class="bm seite-start") 6 Maria Bitschnau (body class="bm seite-maria") 7 Impressum (body class="bm seite-impressum") Die Seminarseite hat noch eigene Layout-Regeln in ihrer Datei, nutzt aber dieselben Schriften und Größen aus Abschnitt 1 und 2. ===================================================================== */ /* --------------------------------------------------------------------- 1 SCHRIFTEN Zum Tauschen: Google-Fonts-Zeile anpassen und unten bei --schrift-sans / --schrift-serif / --schrift-mono den Namen ändern. --------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,300;1,6..72,300&family=DM+Mono:wght@300;400&display=swap"); @font-face { font-family: "Sfizia"; src: url("sfizia-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sfizia"; src: url("sfizia-italic-no2.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } /* --------------------------------------------------------------------- 2 GRÖSSEN UND FARBEN --u ist die Grundeinheit wie im Original (Cargo): 1,44 % der Fensterhöhe, z. B. 12,96 px bei 900 px und 15,55 px bei 1080 px Höhe. Größe ändern = nur die Zahl hinter "var(--u) *" ändern. Darunter stehen die Werte fürs Handy. --------------------------------------------------------------------- */ :root { --schrift-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; /* Überschriften, Fließtext klein, Buttons (Original: Diatype) */ --schrift-serif: "Newsreader", Georgia, serif; /* kursiver Fließtext (Original: Gaisyr) */ --staerke-serif: 300; /* Light; Sfizia gäbe es nur in 400 */ --schrift-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace; /* Credits im Impressum (Original: Favorit Mono) */ --u: min(1.44vh, calc(8.852px + 0.7543vw)); /* wie Cargo: 1,44 % der Fensterhöhe, bei hohen Fenstern begrenzt */ --groesse-titel: calc(var(--u) * 6); /* große Überschriften ("Stay in touch", "FAQ") */ --groesse-titel2: calc(var(--u) * 3.75); /* Seminar-Überschriften, Kontakt, Adresse im Impressum */ --groesse-zwischen: calc(var(--u) * 2); /* Zwischenzeilen ("Osteopathische Bowen-Praxis in Schlins") */ --groesse-text: calc(var(--u) * 1.95); /* kursiver Fließtext */ --groesse-klein: calc(var(--u) * 1.1); /* kleiner Text: Seminarinhalte, FAQ-Antworten, Impressum */ --groesse-button: calc(var(--u) * .95); /* Buttons */ --groesse-mono: calc(var(--u) * 1.5); /* Credits im Impressum */ --farbe-hell: #d5cfc3; /* heller Hintergrund */ --farbe-sand: #d9c1ac; /* Hintergrund Behandlungen / Seminare auf der Startseite */ --farbe-braun: #ba9584; /* Hintergrund "Fundament" auf der Maria-Seite */ } @media (max-width: 760px) { :root { --groesse-titel: 13.4vw; --groesse-titel2: 8.4vw; --groesse-zwischen: 20px; --groesse-text: 20px; --groesse-klein: 15px; --groesse-button: 12px; --groesse-mono: 15px; } } /* --------------------------------------------------------------------- 3 GRUNDLAGEN UND GEMEINSAME BAUSTEINE (Seiten mit class="bm") --------------------------------------------------------------------- */ .bm, .bm * { box-sizing: border-box; } html:has(body.bm) { scroll-behavior: smooth; } body.bm { margin: 0; background: var(--farbe-hell); color: rgba(0,0,0,.85); font-family: var(--schrift-sans); -webkit-font-smoothing: antialiased; } .bm img { display: block; max-width: 100%; } .bm a { color: inherit; } /* Foto fest am Bildschirm; der Abschnitt schneidet es zu, beim Scrollen schiebt sich der nächste Abschnitt darüber */ .bm .reveal, .bm .hero { position: relative; clip-path: inset(0); -webkit-clip-path: inset(0); } .bm .fixed-img { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; max-width: none; object-fit: cover; object-position: center; } /* Textstile */ .bm .h1 { font-family: var(--schrift-sans); font-weight: 400; font-size: var(--groesse-titel); line-height: 1.05; letter-spacing: 0; color: rgba(0,0,0,.83); margin: 0; } .bm .h2 { font-family: var(--schrift-sans); font-weight: 400; font-size: var(--groesse-titel2); line-height: 1; color: rgba(0,0,0,.85); margin: 0; } .bm .h3 { font-family: var(--schrift-sans); font-weight: 400; font-size: var(--groesse-zwischen); line-height: 1.25; color: rgba(0,0,0,.75); margin: 0; } .bm .sub { font-family: var(--schrift-sans); font-weight: 400; font-size: var(--groesse-zwischen); line-height: 1.25; color: rgba(0,0,0,.75); margin: calc(var(--u) * .77) 0 0; } .bm .magma { font-family: var(--schrift-serif); font-style: italic; font-weight: var(--staerke-serif); font-size: var(--groesse-text); line-height: 1.35; letter-spacing: .041em; color: rgba(0,0,0,.75); margin: 0; } .bm .caption { font-family: var(--schrift-sans); font-weight: 400; font-size: var(--groesse-klein); line-height: 1.55; letter-spacing: .061em; color: rgba(0,0,0,.85); margin: 0; } /* Button */ .bm .btn { display: inline-block; font-family: var(--schrift-sans); font-weight: 500; font-size: var(--groesse-button); line-height: 1.3; letter-spacing: .126em; color: rgba(0,0,0,.85); text-decoration: none; text-transform: uppercase; border: calc(var(--u) * .2) solid rgba(0,0,0,.85); border-radius: 999px; padding: calc(var(--u) * .6) calc(var(--u) * 1.4) calc(var(--u) * .6) calc(var(--u) * 1.3); transition: opacity .2s; } .bm .btn:hover, .bm .btn:active { opacity: .7; } @media (max-width: 760px) { .bm .btn { letter-spacing: .09em; border-width: 2px; padding: 9px 16px 9px 15px; } } /* --------------------------------------------------------------------- 4 KONTAKTBLOCK (auf allen vier Seiten gleich) --------------------------------------------------------------------- */ html body .kontakt { box-sizing: border-box; background: var(--farbe-hell); min-height: 70.44vh; padding: calc(var(--u) * 5); position: relative; z-index: 5; } html body .kontakt * { box-sizing: border-box; } html body .kontakt p.kontakt-gross, html body .kontakt p.kontakt-gross a { font-family: var(--schrift-sans) !important; font-style: normal !important; font-weight: 400 !important; font-size: var(--groesse-titel2) !important; line-height: 1 !important; letter-spacing: normal !important; color: rgba(0,0,0,.75) !important; text-decoration: none; margin: 0; } html body .kontakt .kontakt-reihe2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u); margin-top: calc(var(--u) * 6.16); align-items: start; } html body .kontakt .kontakt-logo { display: block; width: calc(var(--u) * 5.71); height: calc(var(--u) * 5.71); } html body .kontakt .kontakt-reihe3 { display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(var(--u) * 13.64); } html body .kontakt p.klein, html body .kontakt p.klein a { font-family: var(--schrift-sans) !important; font-style: normal !important; font-weight: 400 !important; font-size: var(--groesse-klein) !important; line-height: 1.55 !important; letter-spacing: .061em !important; color: rgba(0,0,0,.85) !important; text-decoration: none; margin: 0; } html body .kontakt p.klein a:hover { text-decoration: underline; } html body .kontakt .rechts { text-align: right; } @media (max-width: 760px) { html body .kontakt { min-height: 0; padding: 10vw 6vw; } html body .kontakt .kontakt-reihe2 { grid-template-columns: 1fr; margin-top: 8vw; gap: 6vw; } html body .kontakt .kontakt-logo { width: 16vw; height: 16vw; } html body .kontakt .kontakt-reihe3 { grid-template-columns: 1fr; gap: 8px; margin-top: 12vw; } html body .kontakt .rechts { text-align: left; } } /* --------------------------------------------------------------------- 5 STARTSEITE --------------------------------------------------------------------- */ /* Startbild */ .seite-start .hero { height: calc(var(--u) * 25.72 + 15.49vw); } .seite-start .hero .fixed-img { object-position: 55.1613% 57.5538%; } /* Bildausschnitt wie im Original */ .seite-start .hero .wordmark { position: absolute; left: 50%; top: calc(var(--u) * 12.2); transform: translateX(-50%); width: calc(41.95% - var(--u) * 4.38); height: auto; } /* Stay in touch */ .seite-start .h1 { color: rgb(1,0,0); } .seite-start .intro { background: var(--farbe-hell); text-align: center; padding: calc(var(--u) * 10.6); } .seite-start .intro .logo { width: calc(var(--u) * 11.1); height: calc(var(--u) * 11.1); margin: 0 auto; } .seite-start .intro .h1 { margin-bottom: calc(var(--u) * 11.86); } .seite-start .intro .btn { margin-top: calc(var(--u) * 5.27); } /* Behandlungen und Seminare: Foto halbe Breite, Text daneben */ .seite-start .split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); background: var(--farbe-sand); } .seite-start .split .photo { position: relative; clip-path: inset(0); -webkit-clip-path: inset(0); } .seite-start .split .fixed-img { width: 50%; } .seite-start .split.photo-right .fixed-img { left: 50%; } .seite-start .split.photo-right .photo { order: 2; } .seite-start .split .text { padding: calc(var(--u) * 5); } .seite-start .split .h1 { font-size: min(var(--groesse-titel), calc((50vw - var(--u) * 10) / 6.9)); } /* "Behandlungen" passt immer in die halbe Breite */ .seite-start .split .magma { margin-top: calc(var(--u) * 2.5); } .seite-start .split .btn { margin-top: calc(var(--u) * 2.63); } .seite-start #behandlungen { min-height: 100vh; } .seite-start #behandlungen .fixed-img { object-position: 38.0645% 100%; } /* Bildausschnitt wie im Original */ .seite-start #behandlungen .text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .seite-start #seminare .fixed-img { object-position: 50% 50%; } .seite-start #seminare .text { display: flex; flex-direction: column; align-items: flex-start; } /* Bowen für alle */ .seite-start .alle { background: var(--farbe-hell); text-align: center; padding: calc(var(--u) * 11.6); } .seite-start .alle .h1 { font-weight: 700; color: rgba(0,0,0,.83); } .seite-start .alle .magma { margin-top: calc(var(--u) * 3.16); } .seite-start .alle .btn { margin-top: calc(var(--u) * 2.4); } @media (max-width: 760px) { .seite-start .hero { height: 94vw; } .seite-start .hero .fixed-img { object-position: 41.9355% 70.9512%; } .seite-start .hero .wordmark { width: 63.5%; top: 32.5vw; } .seite-start .intro { padding: 12vw 6vw; } .seite-start .intro .logo { width: 25vw; height: 25vw; } .seite-start .intro .h1 { margin-bottom: 9vw; } .seite-start .sub { margin-top: 8px; } .seite-start .intro .btn, .seite-start .alle .btn, .seite-start .split .btn { margin-top: 28px; } .seite-start .split { grid-template-columns: minmax(0,1fr); } .seite-start .split .h1 { font-size: calc(var(--groesse-titel) * .9); } /* "Behandlungen" muss in die Breite passen */ .seite-start .split .photo, .seite-start .split.photo-right .photo { order: 0; height: 50vh; } .seite-start .split .fixed-img, .seite-start .split.photo-right .fixed-img { width: 100%; left: 0; } .seite-start #behandlungen { min-height: 0; } .seite-start .split .text { padding: 10vw 6vw; } .seite-start .split .magma { margin-top: 20px; } .seite-start .alle { padding: 14vw 6vw; } .seite-start .alle .magma { margin-top: 24px; } } /* --------------------------------------------------------------------- 6 MARIA BITSCHNAU --------------------------------------------------------------------- */ .seite-maria .hero { height: calc(var(--u) * 53.16); } .seite-maria .hero .logo { position: absolute; left: 50%; top: calc(var(--u) * 17); transform: translateX(-50%); width: calc(var(--u) * 12); height: calc(var(--u) * 12); } .seite-maria .magma + .magma { margin-top: calc(var(--u) * 2.63); } .seite-maria .story { background: var(--farbe-hell); padding: calc(var(--u) * 10); text-align: center; } .seite-maria .story .intro { width: calc(100% * 11 / 12); } .seite-maria .story .intro .magma { margin-top: calc(var(--u) * 3.24); } .seite-maria .gallery { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--u); margin: calc(var(--u) * 9.1) 0 0; } .seite-maria .gallery img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; } .seite-maria .gallery.wide img { aspect-ratio: 3 / 2; } .seite-maria .story .h2 { margin-top: calc(var(--u) * 7.2); } .seite-maria .story .h2 + .magma { margin-top: calc(var(--u) * 6.1); } .seite-maria .story .gallery.after-text { margin-top: calc(var(--u) * 4.9); } .seite-maria .story .lebens.h2 { margin-top: calc(var(--u) * 8.55); } .seite-maria .story .lebens.h2 + .magma { margin-top: calc(var(--u) * 3.73); } .seite-maria .buttons { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.3); margin-top: calc(var(--u) * 4.8); } .seite-maria .story .gallery.last { margin-top: calc(var(--u) * 4.8); } .seite-maria .story .end-logo { width: calc(var(--u) * 9.8); height: calc(var(--u) * 9.8); margin: calc(var(--u) * 7.2) auto 0; } /* Fundament: zwei kleine Spalten auf braunem Grund */ .seite-maria .fundament { background: var(--farbe-braun); padding: calc(var(--u) * 7.33); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: calc(var(--u) * 4.8); align-items: start; } .seite-maria .fundament .col-left { text-align: right; } .seite-maria .fundament ul { list-style: none; padding: 0; margin: 0; } .seite-maria .fundament .h3 + .caption, .seite-maria .fundament .h3 + ul { margin-top: calc(var(--u) * .2); } .seite-maria .fundament .h3.next { margin-top: calc(var(--u) * 1.7); } .seite-maria .fundament .h3.next + ul { margin-top: calc(var(--u) * 1.7); } .seite-maria .fundament .col-right .h3 { margin-top: calc(var(--u) * 1.7); } .seite-maria .fundament .italic { font-style: italic; } @media (max-width: 760px) { .seite-maria .hero { height: 108vw; } .seite-maria .hero .logo { top: 32.5vw; width: 27vw; height: 27vw; } .seite-maria .story { padding: 12vw 6vw; } .seite-maria .story .intro { width: 100%; } .seite-maria .h1 { font-size: calc(var(--groesse-titel) * .86); } /* "Bowen-Osteopathin" muss in die Breite passen */ .seite-maria .magma + .magma { margin-top: 18px; } .seite-maria .story .intro .magma, .seite-maria .story .h2 + .magma, .seite-maria .story .lebens.h2 + .magma { margin-top: 24px; } .seite-maria .story .h2, .seite-maria .story .lebens.h2 { margin-top: 14vw; } .seite-maria .gallery, .seite-maria .story .gallery.after-text, .seite-maria .story .gallery.last { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 10vw; } .seite-maria .buttons { gap: 14px; margin-top: 28px; } .seite-maria .story .end-logo { width: 22vw; height: 22vw; margin-top: 12vw; } .seite-maria .fundament { grid-template-columns: minmax(0,1fr); padding: 12vw 6vw; row-gap: 10vw; } .seite-maria .fundament .col-left { text-align: left; } .seite-maria .fundament li { margin-bottom: 8px; } } /* --------------------------------------------------------------------- 7 IMPRESSUM --------------------------------------------------------------------- */ .seite-impressum .hero { height: calc(var(--u) * 53.16); } .seite-impressum .hero .fixed-img { object-position: 53.2258% 100%; } /* Bildausschnitt wie im Original */ .seite-impressum .hero .logo { position: absolute; left: 50%; top: calc(var(--u) * 17); transform: translateX(-50%); width: calc(var(--u) * 12); height: calc(var(--u) * 12); } .seite-impressum .legal { background: var(--farbe-hell); padding: calc(var(--u) * 5); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: calc(var(--u) * 6.7); row-gap: calc(var(--u) * 7.2); align-items: start; } /* Rechtstext beginnt auf Höhe von "Strategie und Redaktion:" (bewusst anders als im Original) */ .seite-impressum .legal .left { display: contents; } .seite-impressum .address { grid-column: 1; grid-row: 1; } .seite-impressum .credits { grid-column: 1; grid-row: 2; align-self: baseline; } .seite-impressum .text { grid-column: 2; grid-row: 2; align-self: baseline; } .seite-impressum .address { font-family: var(--schrift-sans); font-weight: 400; font-size: min(var(--groesse-titel2), calc((50vw - var(--u) * 8.35) / 7.2)); line-height: 1; color: rgba(0,0,0,.75); text-align: right; margin: 0; } .seite-impressum .address b { font-weight: 700; } .seite-impressum .address a { text-decoration: none; } .seite-impressum .address a:hover { opacity: .7; } .seite-impressum .credits { font-family: var(--schrift-mono); font-weight: 300; font-size: var(--groesse-mono); line-height: 1.6; letter-spacing: -0.015em; color: rgba(0,0,0,.75); text-align: right; margin: 0; } .seite-impressum .credits p { margin: 0 0 1.6em; } .seite-impressum .credits a { color: rgb(0,0,0); text-decoration: none; } .seite-impressum .credits a:hover { text-decoration: underline; } .seite-impressum .text { font-family: var(--schrift-sans); font-size: var(--groesse-klein); line-height: 1.55; letter-spacing: .061em; color: rgba(0,0,0,.85); } .seite-impressum .text p { margin: 0 0 1.55em; } .seite-impressum .text .head { margin: calc(var(--u) * 1.7) 0 0; } @media (max-width: 760px) { .seite-impressum .hero { height: 108vw; } .seite-impressum .hero .logo { top: 32.5vw; width: 27vw; height: 27vw; } .seite-impressum .legal { grid-template-columns: minmax(0,1fr); padding: 6vw; row-gap: 10vw; } .seite-impressum .text { grid-column: 1; grid-row: 3; } .seite-impressum .address { font-size: var(--groesse-titel2); } }