/* ==========================================================
FELDENKRAISMETODEN.DK — Responsive Stylesheet
Separate Datei — style.css bleibt unverändert.
Jede HTML-Seite braucht im :
Jede HTML-Seite braucht im nach :
Jede HTML-Seite braucht vor :
Breakpoints:
1100px — Navigation wird eng (font-size reduzieren)
900px — Tablet: Layout-Umbruch, Hamburger-Menü, Grids stapeln
600px — Mobile: Schriftgrößen, Abstände, Formulare
========================================================== */
/* ----------------------------------------------------------
HAMBURGER BUTTON — auf Desktop versteckt
---------------------------------------------------------- */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
background: transparent;
border: none;
cursor: pointer;
gap: 6px;
padding: 0;
z-index: 1010;
position: relative;
flex-shrink: 0;
}
.nav-toggle span {
display: block;
width: 26px;
height: 1.5px;
background: var(--color-white);
transition: transform 0.3s ease, opacity 0.2s ease;
transform-origin: center;
}
/* Geöffnet — Striche zu X */
.nav-open .nav-toggle span:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
.nav-open .nav-toggle span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-open .nav-toggle span:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
}
/* ----------------------------------------------------------
MOBILE NAVIGATION OVERLAY
---------------------------------------------------------- */
@media (max-width: 900px) {
/* Hamburger-Button einblenden */
.nav-toggle {
display: flex;
}
/* Nav als Vollbild-Overlay */
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-header-bg);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(100%);
transition: transform 0.35s ease;
overflow-y: auto;
}
/* Nav öffnet sich */
.nav-open .main-nav {
transform: translateX(0);
}
/* Nav-Liste vertikal zentriert */
.main-nav ul {
flex-direction: column;
align-items: center;
gap: 0;
padding: 40px 0;
width: 100%;
text-align: center;
}
/* Haupt-Links größer */
.main-nav ul li a {
font-size: 22px;
line-height: 1;
padding: 16px 32px;
letter-spacing: 0.5px;
display: block;
}
/* Dropdown-Menü immer sichtbar, als Teil der Liste */
.main-nav .dropdown-menu {
position: static;
display: block !important;
background: transparent;
padding: 0;
min-width: 0;
box-shadow: none;
}
/* Dropdown-Links kleiner und gedämpft */
.main-nav .dropdown-menu li a {
font-size: 18px;
padding: 8px 32px;
opacity: 0.6;
letter-spacing: 0.3px;
}
/* Dropdown-Pfeil ausblenden */
.main-nav .dropdown > a::after {
display: none;
}
/* Body-Scroll sperren wenn Nav offen */
body.nav-open {
overflow: hidden;
}
}
/* ----------------------------------------------------------
HEADER — Padding und Höhe auf kleinen Screens
---------------------------------------------------------- */
@media (max-width: 1100px) {
.site-header {
padding: 0 24px;
height: 90px;
}
.main-nav ul li a {
padding: 0 10px;
font-size: 17px;
line-height: 90px;
}
.main-nav .dropdown > a::after {
font-size: 10px;
}
}
@media (max-width: 900px) {
.site-header {
height: 72px;
padding: 0 20px;
}
.site-logo img {
height: 32px;
}
}
/* ----------------------------------------------------------
DESIGN-TOKENS — Abstände für Tablet/Mobile
---------------------------------------------------------- */
@media (max-width: 900px) {
:root {
--spacing-section: 50px;
--spacing-hero: 80px;
}
}
@media (max-width: 600px) {
:root {
--spacing-section: 36px;
}
}
/* ----------------------------------------------------------
STARTSEITE — CONTENT-BLOCK (Abstand zwischen Blöcken)
---------------------------------------------------------- */
@media (max-width: 900px) {
.content-block {
margin-bottom: 80px;
}
}
@media (max-width: 600px) {
.content-block {
margin-bottom: 40px;
}
}
/* ----------------------------------------------------------
STARTSEITE — INTRO-BLOCK (weißer Textblock)
Desktop: padding 75px 200px 75px 0 (asymmetrisch)
---------------------------------------------------------- */
@media (max-width: 1100px) {
.intro-block {
padding: 60px 80px 60px 40px;
}
}
@media (max-width: 900px) {
.intro-block {
padding: 60px 40px;
}
}
@media (max-width: 600px) {
.intro-block {
padding: 48px 20px;
}
.intro-block > p {
font-size: clamp(22px, 5.5vw, 36px);
line-height: 1.25;
}
}
/* ----------------------------------------------------------
STARTSEITE — TWO-COL (Hold, Workshops, Sessioner Sektionen)
---------------------------------------------------------- */
@media (max-width: 900px) {
.two-col {
grid-template-columns: 1fr;
min-height: auto;
}
/* Bild immer oben — egal ob reversed oder nicht */
.two-col .col-image {
height: 300px;
min-height: 300px;
order: -1;
}
.two-col.reversed .col-image {
order: -1;
}
.two-col .col-text {
padding: 48px 32px;
}
.two-col .col-text-inner {
padding-top: 0;
gap: 16px;
}
}
@media (max-width: 600px) {
.two-col .col-image {
height: 220px;
min-height: 220px;
}
.two-col .col-text {
padding: 36px 20px;
}
}
/* ----------------------------------------------------------
STARTSEITE — SECTION-TWO-COL (ältere Klasse, Homepage-Sektionen)
---------------------------------------------------------- */
@media (max-width: 900px) {
.section-two-col {
grid-template-columns: 1fr;
min-height: auto;
}
.section-two-col .col-image {
height: 280px;
order: -1;
}
.section-two-col.reversed .col-image {
order: -1;
}
.col-text {
padding: 48px 32px;
}
}
@media (max-width: 600px) {
.col-text {
padding: 36px 20px;
}
}
/* ----------------------------------------------------------
TESTIMONIALS-BLOCK
---------------------------------------------------------- */
@media (max-width: 900px) {
.testimonials-block {
padding: 48px 32px;
}
.testimonials-section {
padding: 50px 0;
}
.testimonial {
padding: 0 24px;
}
}
@media (max-width: 600px) {
.testimonials-block {
padding: 40px 20px;
}
.testimonial-quote {
font-size: clamp(16px, 4.5vw, 24px);
}
}
/* ----------------------------------------------------------
ALLGEMEINE SEKTIONEN — section-inner, full-bleed
---------------------------------------------------------- */
@media (max-width: 900px) {
.section-inner {
padding: 0 32px;
}
.section.full-bleed {
margin-bottom: 80px;
}
}
@media (max-width: 600px) {
.section-inner {
padding: 0 20px;
}
.section.full-bleed {
margin-bottom: 40px;
}
}
/* ----------------------------------------------------------
HERO SEKTIONEN — allgemein (page-hero)
---------------------------------------------------------- */
@media (max-width: 900px) {
.page-hero {
min-height: 500px;
}
.page-hero .hero-title {
padding: 0 24px;
}
.hero-separator {
height: 80px;
}
}
@media (max-width: 600px) {
.hero-separator {
height: 60px;
margin-top: 20px;
}
}
/* ----------------------------------------------------------
WORKSHOPS ÜBERSICHTSSEITE — /workshops.html
---------------------------------------------------------- */
/* iOS Safari: background-attachment: fixed → scroll */
@media (max-width: 900px) {
.workshops-bg {
background-attachment: scroll;
}
.workshops-hero {
padding-top: 180px;
height: auto;
min-height: 80vh;
}
.workshops-hero-title {
font-size: clamp(36px, 8vw, 60px);
text-align: center;
padding: 0 20px;
}
.workshops-hero-sep {
height: 80px;
margin-top: 32px;
}
.workshops-intro-section {
padding: 60px 32px;
}
.workshops-intro-section h2 {
font-size: clamp(36px, 6vw, 56px);
line-height: 1.1;
margin-bottom: 24px;
}
.workshops-entries {
padding: 0 32px 60px;
}
.workshop-entry {
grid-template-columns: 1fr;
gap: 12px;
}
.workshop-entry-body h3 {
font-size: clamp(22px, 5vw, 32px);
}
.workshops-bottom-spacer {
height: 60px;
}
}
@media (max-width: 600px) {
.workshops-hero {
padding-top: 120px;
min-height: 70vh;
}
.workshops-hero-title {
font-size: clamp(28px, 8vw, 44px);
}
.workshops-intro-section {
padding: 48px 20px;
}
.workshops-intro-section h2 {
font-size: 32px;
line-height: 1.1;
}
.workshops-entries {
padding: 0 20px 48px;
}
.workshop-entry-date {
font-size: 22px;
}
.workshop-entry-body h3 {
font-size: 24px;
}
.workshop-entry-body .workshop-entry-subtitle {
font-size: 19px;
margin-bottom: 20px;
}
}
/* ----------------------------------------------------------
HOLD SIDE — /hold.html
---------------------------------------------------------- */
@media (max-width: 900px) {
.hold-bg {
background-attachment: scroll;
}
.hold-hero {
padding-top: 180px;
height: auto;
min-height: 80vh;
}
.hold-hero-title {
font-size: clamp(36px, 8vw, 60px);
text-align: center;
padding: 0 20px;
}
.hold-hero-sep {
height: 80px;
margin-top: 32px;
}
.hold-intro-section {
padding: 60px 32px;
}
.hold-intro-heading {
font-size: clamp(36px, 6vw, 56px);
line-height: 1.1;
margin-bottom: 24px;
}
.hold-classes {
padding: 0 32px 40px;
}
.hold-class {
grid-template-columns: 1fr;
gap: 16px;
justify-items: start;
}
.hold-tilmelding {
padding: 60px 32px 80px;
}
.hold-tilmelding h2 {
font-size: clamp(32px, 5vw, 48px);
}
.hold-bottom-spacer {
height: 60px;
}
}
@media (max-width: 600px) {
.hold-hero {
padding-top: 120px;
min-height: 70vh;
}
.hold-hero-title {
font-size: clamp(28px, 8vw, 44px);
}
.hold-intro-section {
padding: 48px 20px;
}
.hold-intro-heading {
font-size: 32px;
}
.hold-classes {
padding: 0 20px 32px;
}
.hold-class-text h3 {
font-size: 24px;
}
.hold-tilmelding {
padding: 48px 20px 60px;
}
.hold-tilmelding h2 {
font-size: 28px;
}
/* Formulare: max-width aufheben auf Mobile */
.hold-form input[type="text"],
.hold-form input[type="email"],
.hold-form input[type="tel"],
.hold-form textarea {
max-width: 100%;
}
}
/* ----------------------------------------------------------
INDIVIDUELLE SESSIONER — /individuelle-sessioner.html
---------------------------------------------------------- */
@media (max-width: 900px) {
.sessioner-bg {
background-attachment: scroll;
}
.sessioner-hero {
padding-top: 180px;
height: auto;
min-height: 80vh;
}
.sessioner-hero-title {
font-size: clamp(36px, 8vw, 60px);
text-align: center;
padding: 0 20px;
}
.sessioner-hero-sep {
height: 80px;
margin-top: 32px;
}
.sessioner-intro-section {
padding: 60px 32px;
}
.sessioner-intro-heading {
font-size: clamp(36px, 6vw, 56px);
line-height: 1.1;
margin-bottom: 24px;
}
.sessioner-intro-sub {
font-size: clamp(22px, 4vw, 38px);
line-height: 1.2;
}
.sessioner-body-section {
padding: 0 32px 40px;
}
.sessioner-tilmelding {
padding: 60px 32px 80px;
}
.sessioner-bottom-spacer {
height: 60px;
}
}
@media (max-width: 600px) {
.sessioner-hero {
padding-top: 120px;
min-height: 70vh;
}
.sessioner-hero-title {
font-size: clamp(28px, 8vw, 44px);
}
.sessioner-intro-section {
padding: 48px 20px;
}
.sessioner-intro-heading {
font-size: 32px;
}
.sessioner-intro-sub {
font-size: 22px;
}
.sessioner-body-section {
padding: 0 20px 40px;
}
.sessioner-tilmelding {
padding: 48px 20px 60px;
}
.sessioner-form input[type="text"],
.sessioner-form input[type="email"],
.sessioner-form input[type="tel"],
.sessioner-form textarea {
max-width: 100%;
}
}
/* ----------------------------------------------------------
ESSENTIEL LÆRINGS STUDIO — /essentiel-laerings-studio.html
---------------------------------------------------------- */
@media (max-width: 900px) {
.els-bg {
background-attachment: scroll;
}
.els-hero {
height: auto;
min-height: 80vh;
padding-top: 100px;
padding-bottom: 60px;
}
.els-title {
font-size: clamp(36px, 8vw, 60px);
margin-bottom: 24px;
}
.els-hero-sep {
height: 80px;
}
.els-content-box {
padding: 60px 32px;
}
.els-content-box h2,
.els-content-box .els-h2 {
font-size: clamp(36px, 6vw, 56px);
line-height: 1.1;
margin-bottom: 40px;
}
.els-bottom-spacer {
height: 60px;
}
}
@media (max-width: 600px) {
.els-hero {
min-height: 70vh;
padding-top: 80px;
}
.els-title {
font-size: clamp(28px, 8vw, 44px);
}
.els-content-box {
padding: 48px 20px;
}
.els-content-box h2,
.els-content-box .els-h2 {
font-size: 32px;
line-height: 1.1;
margin-bottom: 28px;
}
.els-subtitle {
font-size: 18px;
max-width: 100%;
padding: 0 20px;
}
}
/* ----------------------------------------------------------
COMING SOON SEITEN — om-metoderne, om-nana, boern
---------------------------------------------------------- */
@media (max-width: 900px) {
.comingsoon-bg {
background-attachment: scroll;
}
.page-comingsoon-hero {
height: 100vh;
}
.page-comingsoon-sep {
height: 80px;
}
}
@media (max-width: 600px) {
.page-comingsoon-title {
font-size: clamp(32px, 10vw, 56px);
}
}
/* ----------------------------------------------------------
KONTAKT SIDE — /kontakt.html
---------------------------------------------------------- */
@media (max-width: 900px) {
.kontakt-bg {
background-attachment: scroll;
}
.kontakt-hero {
min-height: 600px;
}
.kontakt-hero-sep {
height: 80px;
}
.kontakt-info-box {
padding: 60px 32px 48px 32px;
max-width: 100%;
}
.kontakt-info-box p {
font-size: clamp(18px, 3.5vw, 28px);
line-height: 1.55;
}
.kontakt-info-section {
padding: 0 0 40px;
}
.kontakt-layout {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 600px) {
.kontakt-title {
font-size: clamp(38px, 10vw, 60px);
}
.kontakt-info-box {
padding: 48px 20px 40px 20px;
}
.kontakt-info-box p {
font-size: 22px;
line-height: 1.65;
}
}
/* ----------------------------------------------------------
KONTAKTFORMULAR — allgemein (alle Seiten)
---------------------------------------------------------- */
@media (max-width: 900px) {
.contact-form-section {
padding: 60px 32px;
}
}
@media (max-width: 600px) {
.contact-form-section {
padding: 48px 20px;
}
/* Zweispaltiger Form-Row → einspaltig */
.form-row {
grid-template-columns: 1fr;
}
}
/* ----------------------------------------------------------
WORKSHOP DETAIL-SEITEN
---------------------------------------------------------- */
@media (max-width: 900px) {
.workshop-detail {
padding: 60px 32px;
}
.workshop-detail-inner {
max-width: 100%;
}
.workshop-detail-content {
padding: 60px 32px;
max-width: 100%;
}
}
@media (max-width: 600px) {
.workshop-detail {
padding: 48px 20px;
}
.workshop-detail h1 {
font-size: clamp(26px, 7vw, 40px);
}
.workshop-detail .ws-subtitle {
font-size: 19px;
}
.workshop-detail p {
font-size: 19px;
}
.workshop-detail blockquote {
padding-left: 18px;
font-size: 19px;
}
.workshop-detail-content {
padding: 48px 20px;
}
}
/* ----------------------------------------------------------
HOLD SCHEDULE GRIDS (ältere Layout-Klassen)
---------------------------------------------------------- */
@media (max-width: 900px) {
.hold-schedule {
padding: 48px 32px;
}
.hold-tider {
padding: 48px 32px;
}
.hold-priser {
padding: 48px 32px;
}
}
@media (max-width: 600px) {
.hold-schedule {
padding: 40px 20px;
}
/* Tider-Grid: 3 Spalten → 2 Spalten (Tilmeld fällt weg) */
.tider-grid {
grid-template-columns: 1fr 1fr;
}
.tider-row .tilmeld-link {
display: none;
}
/* Hold-Day: 2 Spalten → 1 Spalte */
.hold-day {
grid-template-columns: 1fr;
gap: 4px;
}
.hold-day-label {
font-size: 16px;
letter-spacing: 0.5px;
}
.hold-entry {
grid-template-columns: 1fr;
gap: 2px;
}
.hold-tider {
padding: 40px 20px;
}
.hold-priser {
padding: 40px 20px;
}
.hold-intro {
padding: 40px 20px;
}
}
/* ----------------------------------------------------------
TAK SIDE — /tak.html
---------------------------------------------------------- */
@media (max-width: 600px) {
.tak-inner h1 {
font-size: clamp(36px, 10vw, 56px);
}
.tak-inner p {
font-size: 20px;
}
}
/* ----------------------------------------------------------
FOOTER
---------------------------------------------------------- */
@media (max-width: 900px) {
/* Beide Footer-Grid-Klassen */
.footer-inner,
.footer-top {
grid-template-columns: 1fr;
gap: 40px;
padding: 48px 32px;
}
/* Footer-Formular: 2 Spalten → 1 Spalte */
.footer-form .form-row {
grid-template-columns: 1fr;
gap: 10px;
}
.footer-bottom {
padding: 16px 20px;
}
}
@media (max-width: 600px) {
.footer-inner,
.footer-top {
padding: 40px 20px;
gap: 32px;
}
}
/* ----------------------------------------------------------
VIDEO-HERO — Startseite
Auf kleinen Screens: Video ausblenden, Poster-Bild verwenden
---------------------------------------------------------- */
@media (max-width: 600px) {
.video-bg-fixed video {
/* Poster wird automatisch gezeigt wenn video nicht geladen */
display: none;
}
.video-bg-fixed {
background: url('/images/workshop-hero.jpg') center center / cover no-repeat;
}
/* Home-Hero etwas kleiner */
.home-hero .hero-name {
font-size: clamp(40px, 11vw, 80px);
}
.home-hero .hero-label,
.home-hero .hero-neuro {
font-size: clamp(18px, 5vw, 28px);
letter-spacing: 2px;
}
}