:root { font-size: 17px; --wp--preset--font-size--normal: 17px; -webkit-text-size-adjust: 100%; box-sizing: border-box; --ras: #d13773; --yel: #f4a700; --blu: #0098be; --gre: #639305; --bla: #000000; --whi: #ffffff; --typ: #000000; } *::before, *::after {box-sizing: inherit;} body { margin: 0; padding: 0; background: #fff; color: var(--typ); font-family: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1rem; line-height: 1.5; position: relative; } /* ================== Eigene Bullet-Points NUR im Inhalt von Beiträgen und Seiten =========================== */ .entry-content ul, .wp-block-post-content ul, .type-page ul, .type-post ul {list-style: none; padding-left: 2em; margin: 1em 0;} .entry-content ul li, .wp-block-post-content ul li, .type-page ul li, .type-post ul li {position: relative; padding-left: 0.5em;} .entry-content ul li::before, .wp-block-post-content ul li::before, .type-page ul li::before, .type-post ul li::before { content: ""; position: absolute; left: -1em; top: 0.45em; /* vertikale Ausrichtung – ggf. leicht anpassen */ width: .7em; /* Größe deines Icons */ height: .7em; background-color: #000000; /* immer schwarz */ -webkit-mask: url('/wp-content/themes/sia-oe/images/SIA-Pfeil_black.svg') no-repeat center / contain; mask: url('/wp-content/themes/sia-oe/images/SIA-Pfeil_black.svg') no-repeat center / contain; } .entry-content ul li::before { transform: rotate(45deg); } .page-id-2 .entry-content ul li::before, .page-id-29 .entry-content ul li::before, .page-id-47 .entry-content ul li::before, .page-id-49 .entry-content ul li::before, .page-id-32 .entry-content ul li::before {display: none;} .page-id-25 .entry-content ul li::before {width: 17px; height: 17px;} /*=================Hintergrundstreifen oben ==========================*/ div.top-bg {position: absolute; top: 1; left: 1; height: clamp(300px, calc(300px + (350 - 300) * (100vw - 900px) / (1600 - 900)), 350px); width: 99.8vw; border-radius: 0 0 37px 37px; } @media screen and (max-width: 412px) {div.top-bg {height: 350px;}} @media screen and (max-width: 412px) {.page-id-15 div.top-bg {height: 330px;}} @media screen and (max-width: 412px) {.page-id-58 div.top-bg, .page-id-49 div.top-bg {height: 300px;}} @media screen and (max-width: 440px) {.page-id-13 div.top-bg {height: 400px;} .page-id-13 iframe {margin-bottom: -50px;}} @media screen and (max-width: 440px) {.page-id-32 div.top-bg, .page-id-51 div.top-bg, .page-id-25 div.top-bg {height: 400px;}} .entry-content {padding-top: 70px;} .page-id-2 .entry-content {padding-top: 0;} @media screen and (max-width: 786px) {.page-id-29 div.top-bg {height: 400px;}} @media screen and (min-width: 440px) and (max-width: 786px) {.page-id-19 div.top-bg {height: 400px;}} @media screen and (max-width: 440px) {.page-id-19 div.top-bg {height: 500px;}} .page-id-13 div.top-bg, .page-id-15 div.top-bg, .page-id-17 div.top-bg, .page-id-19 div.top-bg, .page-id-25 div.top-bg {background-color: var(--gre);} .page-id-27 div.top-bg, .page-id-29 div.top-bg, .page-id-32 div.top-bg, .page-id-35 div.top-bg, .single-post div.top-bg, .category-43 div.top-bg {background-color: var(--blu);} .page-id-54 div.top-bg, .page-id-47 div.top-bg, .page-id-49 div.top-bg, .page-id-51 div.top-bg, .page-id-54 div.top-bg {background-color: var(--ras);} .page-id-58 div.top-bg {background-color: var(--yel);} button, input, select, optgroup, textarea { color: var(--typ); font-family: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1rem; line-height: 1.5; } /*========================================Ausblender============================================*/ .no {display: none !important;} .mitte {text-align: center;} .normal {font-weight: normal;} r, .ras {color: #d13773;} y, .yel {color: #f4a700;} bl, .blu {color: #0098be;} gr, .gre {color: #639305;} .ras-bg {background-color: #d13773 !important;} .yel-bg {background-color: #f4a700 !important;} .blu-bg {background-color: #0098be !important;} .gre-bg {background-color: #639305 !important;} .gra {color: gray;} .bla {color: #000000;} .whi {color: #ffffff;} p {padding: 0; margin: 0;} a {color: var(--blu); text-decoration: none;} a:hover {text-decoration: underline;} a.arr::before { content: ''; display: inline-block; width: 12px; height: 12px; background: url('/wp-content/themes/sia-oe/images/SIA-Pfeil_blue.svg') no-repeat center; background-size: contain; margin: -1px 6px 0; overflow: visible; vertical-align: middle; } hr { box-sizing: content-box; height: 1px; overflow: visible; background-color: #ccc; border: 0; margin-bottom: 1.5em; } ul {list-style: disc;} ol {list-style: decimal;} h1, h2, h3, h4, h5, h6 {clear: both;} h1 {font-size: 3rem; margin-top: 40px;} h2 {font-size: 2.8rem; margin-top: 40px;} h3 {font-size: 2.5rem; margin-top: 40px;} h4 {font-size: 2.2rem; margin-top: 40px;} h5 {font-size: 1.7rem; margin-top: 40px;} h6 {font-size: 1rem; margin-top: 40px;} /*======Ausnahmen von h1 - h6 ==============*/ .single-post h1 {margin-bottom: 0;} .single-post h5 {margin-top: 130px;} .category-43 h1.page-title {color: white} .page-id-35 h5 {font-size: 1.7rem; margin-top: 45px; margin-bottom: 25px;} .page-id-13 h5 {margin-top: 70px; margin-bottom: 30px;} img {height: auto; max-width: 100%;} embed, iframe, object {max-width: 100%;} .bigtext {font-size: 150%; max-width: 800px; margin: 0 auto;} .bighx {max-width: 800px; margin-left: auto; margin-right: auto;} /*=========================Logo auf einigen Seiten anders================*/ body.page-id-2 .custom-logo { content: url("/wp-content/uploads/SiA_oe_Logo_2025.png");} /*=========================Überschrift der einzelnen Seiten innerhalb des Farbblocks================*/ header>h1.entry-title {color: var(--whi)} /*===============================================LOGO===============================================*/ /*Logo vom Rand einrücken*/ .custom-logo-link img, img.custom-logo {position: relative; left: 2.458vw; width: 14vw; min-width: 173px !important; margin-top: 25px;} @media screen and (max-width: 768px) {.custom-logo-link img, img.custom-logo {min-width: 170px !important; margin-top: 3px; margin-left: 3px;}} /*===============================================MENÜ===============================================*/ /* Menü Container */ #masthead { height: 8.854vw; min-height: 84px; max-height: 170px; display: flex; align-items: center; } .main-navigation { display: block; width: 100%; } .menu-hauptmenue-container { margin-right: 6px; } /* Menü Toggle */ .menu-toggle, .main-navigation.toggled ul { display: block; } .menu-toggle { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--typ); position: relative; margin: 0; background-color: white; cursor: pointer; align-items: center; justify-content: center; overflow: hidden; text-indent: -9999px; background-image: url('/wp-content/themes/sia-oe/images/toggle-bg.png'); background-size: contain; background-position: center; background-repeat: no-repeat; } .main-navigation.toggled .menu-toggle { display: none; } /* Menü Listen */ .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; justify-content: flex-end; } .main-navigation li { position: relative; } .lib-menu { list-style: none; margin: 0; padding: 0; } .lib-menu li { float: left; } /* Menü Submenü */ .main-navigation ul ul { display: none; float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; } .main-navigation ul ul li { float: none; display: block; width: 100%; } .main-navigation ul li.focus > ul { display: flex; left: auto; flex-flow: column; } .main-navigation ul ul ul { left: -999em; top: 0; } /* Menü Buttons */ .main-navigation a, .lib-menu a { display: flex; justify-content: center; align-items: center; text-align: center; line-height: 1.1; text-decoration: none; text-transform: uppercase; font-weight: 600; font-size: clamp(14px, calc(14px + (16 - 14) * (100vw - 1600px) / (1920 - 1600)), 16px); margin: 4px 8px; padding: 0 8px; border-color: var(--bla); border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px); border-style: solid; min-width: 100px; width: 9.896vw; height: clamp(45px, calc(45px + (54 - 45) * (100vw - 1600px) / (1920 - 1600)), 54px); } .main-navigation ul ul a { min-width: 190px; } /* ======= Menü Farben (Basis & Hover) ======= */ /*================= Seiten - Nummern ==========================*/ /* .page-id-2 {startseite} .page-id-13 {Was ist Schule im Aufbruch} .page-id-15 {Wer wir sind} .page-id-17 {Wirkung} .page-id-19 {Partner und Unterstützung} .page-id-25 {Häufige Fragen} -- .page-id-13 #site-navigation .menu-item-83 a:hover, .page-id-15 #site-navigation .menu-item-83 a:hover, .page-id-16 #site-navigation .menu-item-83 a:hover, .page-id-19 #site-navigation .menu-item-83 a:hover, .page-id-25 #site-navigation .menu-item-83 a:hover {border-color: var(--whi);} .page-id-27 {Kino Filme von Schulen} .page-id-29 {Inspirationsorte} .page-id-32 {Webinare} .page-id-35 {Potenzialentfaltung} .page-id-37 {Elternzusammenarbeit} .page-id-39 {FREI DAY} .category-43 {Publikationen} -- .page-id-27 #site-navigation .menu-item-83 a:hover, .page-id-29 #site-navigation .menu-item-83 a:hover, .page-id-32 #site-navigation .menu-item-83 a:hover, .page-id-35 #site-navigation .menu-item-83 a:hover, .page-id-37 #site-navigation .menu-item-83 a:hover, .page-id-39 #site-navigation .menu-item-83 a:hover, .category-43 #site-navigation .menu-item-83 a:hover {border-color: var(--gre);} .page-id-47 {Newsletter} .page-id-49 {Termine} .page-id-51 {Multi-Schulen-Programm} .page-id-54 {Schule mit SPIN} -- .page-id-27 #site-navigation .menu-item-83 a:hover, .page-id-29 #site-navigation .menu-item-83 a:hover, .page-id-32 #site-navigation .menu-item-83 a:hover, .page-id-35 #site-navigation .menu-item-83 a:hover, .page-id-37 #site-navigation .menu-item-83 a:hover, .page-id-39 #site-navigation .menu-item-83 a:hover, .category-43 #site-navigation .menu-item-83 a:hover, .page-id-47 #site-navigation .menu-item-83 a:hover, .page-id-49 #site-navigation .menu-item-83 a:hover, .page-id-51 #site-navigation .menu-item-83 a:hover, .page-id-54 #site-navigation .menu-item-83 a:hover {border-color: var(--gre);} .page-id-58 {Kontakt} */ /*===== INITIAITVE =====*/ .menu-item-83 a { background: var(--whi); border-color: var(--bla); color: var(--bla); transition: all 0.1s ease; } .menu-item-83 > a { margin: 8px; } .menu-item-83 a:hover { background: var(--gre); border-color: var(--gre); color: var(--whi); } /*===== INSPIRATION =====*/ .menu-item-84 a { background: var(--whi); border-color: var(--bla); color: var(--bla); transition: all 0.1s ease; } .menu-item-84 > a { margin: 8px; } .menu-item-84 a:hover { background: var(--blu); border-color: var(--blu); color: var(--whi); } /*===== MITMACHEN =====*/ .menu-item-85 a { background: var(--whi); border-color: var(--bla); color: var(--bla); transition: all 0.1s ease; } .menu-item-85 > a { margin: 8px; } .menu-item-85 a:hover { background: var(--ras); border-color: var(--ras); color: var(--whi); } /*===== KONTAKT =====*/ /*=== KONTAKT Menü generell in weißer Farbe bei Pfeil und Schrift ===*/ .menu-item-86 a { background: transparent; border: 3px solid transparent; border-radius: 18px; color: var(--whi); } .menu-item-86 > a { margin: 8px; } .menu-item-86 a::before {content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: middle; background: url('/wp-content/themes/sia-oe/images/SIA-Pfeil_white.svg') no-repeat center / contain; transition: transform 0.35s ease;} .menu-item-86 a::before {transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);} .menu-item-86 a:hover::before { background: url('/wp-content/themes/sia-oe/images/SIA-Pfeil_white.svg') no-repeat center; background-size: contain; } .menu-item-86 a:hover::before {transform: rotate(45deg);} /* == ... aber mit Ausnahme der Startseite, dort sind Pfeil und Schrift schwarz. ==*/ .page-id-2 .menu-item-86 a { background: transparent; border: 3px solid transparent !important; border-radius: 18px; color: var(--typ); } .page-id-2 .menu-item-86 > a {margin: 8px; } .page-id-2 .menu-item-86 a:hover {border: transparent; } .page-id-2 .menu-item-86 a::before {content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: middle; background: url('/wp-content/themes/sia-oe/images/SIA-Pfeil_black.svg') no-repeat center / contain; transition: transform 0.35s ease;} .page-id-2 .menu-item-86 a::before {transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);} .page-id-2 .menu-item-86 a:hover::before {transform: rotate(45deg);} /* Desktop Fixes (min-width 768px) */ @media screen and (min-width: 768px) { .menu-toggle { display: none; } .main-navigation ul { display: flex; } } /* Hover/Focus Fixes (Desktop) */ @media (hover: hover) and (pointer: fine) { #site-navigation .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { display: block; left: auto; } #site-navigation .main-navigation ul li:hover > ul { display: flex; left: auto; flex-flow: column; } #site-navigation .menu-item-86 a:hover { color: var(--whi); background: transparent; } .page-id-2 #site-navigation .menu-item-86 a:hover { color: var(--bla) !important; } #site-navigation .menu-item-83 a:hover { background: var(--gre); color: var(--whi); } .page-id-2 #site-navigation .menu-item-83 a:hover {border-color: var(--gre);} .page-id-13 #site-navigation .menu-item-83 a:hover, .page-id-15 #site-navigation .menu-item-83 a:hover, .page-id-16 #site-navigation .menu-item-83 a:hover, .page-id-19 #site-navigation .menu-item-83 a:hover, .page-id-25 #site-navigation .menu-item-83 a:hover {border-color: var(--whi);} .page-id-27 #site-navigation .menu-item-83 a:hover, .page-id-29 #site-navigation .menu-item-83 a:hover, .page-id-32 #site-navigation .menu-item-83 a:hover, .page-id-35 #site-navigation .menu-item-83 a:hover, .page-id-37 #site-navigation .menu-item-83 a:hover, .page-id-39 #site-navigation .menu-item-83 a:hover, .category-43 #site-navigation .menu-item-83 a:hover, .page-id-47 #site-navigation .menu-item-83 a:hover, .page-id-49 #site-navigation .menu-item-83 a:hover, .page-id-51 #site-navigation .menu-item-83 a:hover, .page-id-54 #site-navigation .menu-item-83 a:hover {border-color: var(--gre);} #site-navigation .menu-item-84 a:hover { background: var(--blu); color: var(--whi); } .page-id-2 #site-navigation .menu-item-84 a:hover {border-color: var(--blu);} .page-id-13 #site-navigation .menu-item-84 a:hover, .page-id-15 #site-navigation .menu-item-84 a:hover, .page-id-16 #site-navigation .menu-item-84 a:hover, .page-id-19 #site-navigation .menu-item-84 a:hover, .page-id-25 #site-navigation .menu-item-84 a:hover {border-color: var(--blu);} .page-id-27 #site-navigation .menu-item-84 a:hover, .page-id-29 #site-navigation .menu-item-84 a:hover, .page-id-32 #site-navigation .menu-item-84 a:hover, .page-id-35 #site-navigation .menu-item-84 a:hover, .page-id-37 #site-navigation .menu-item-84 a:hover, .page-id-39 #site-navigation .menu-item-84 a:hover, .category-43 #site-navigation .menu-item-84 a:hover {border-color: var(--whi);} .page-id-47 #site-navigation .menu-item-84 a:hover, .page-id-49 #site-navigation .menu-item-84 a:hover, .page-id-51 #site-navigation .menu-item-84 a:hover, .page-id-54 #site-navigation .menu-item-84 a:hover {border-color: var(--blu);} #site-navigation .menu-item-85 a:hover { background: var(--ras); color: var(--whi); } .page-id-2 #site-navigation .menu-item-85 a:hover {border-color: var(--ras);} .page-id-13 #site-navigation .menu-item-85 a:hover, .page-id-15 #site-navigation .menu-item-85 a:hover, .page-id-16 #site-navigation .menu-item-85 a:hover, .page-id-19 #site-navigation .menu-item-85 a:hover, .page-id-25 #site-navigation .menu-item-85 a:hover, .page-id-27 #site-navigation .menu-item-85 a:hover, .page-id-29 #site-navigation .menu-item-85 a:hover, .page-id-32 #site-navigation .menu-item-85 a:hover, .page-id-35 #site-navigation .menu-item-85 a:hover, .page-id-37 #site-navigation .menu-item-85 a:hover, .page-id-39 #site-navigation .menu-item-85 a:hover, .category-43 #site-navigation .menu-item-85 a:hover {border-color: var(--ras);} .page-id-47 #site-navigation .menu-item-85 a:hover, .page-id-49 #site-navigation .menu-item-85 a:hover, .page-id-51 #site-navigation .menu-item-85 a:hover, .page-id-54 #site-navigation .menu-item-85 a:hover {border-color: var(--whi);} } /* Mobile Fixes */ @media (max-width: 768px) { #masthead { height: auto; align-items: flex-start; padding-top: 12px; padding-right: 6px; max-height: 1000px; min-height: 1px; border: 0px solid red; } .main-navigation { display: flex; justify-content: flex-end; } .lib-menu { display: flex; flex-direction: column; margin-top: 30px; } .page-id-15 .lib-menu { margin-top: -15px 0 15px; } .lib-menu a { margin: 8px 0; } .main-navigation a, .lib-menu a { width: 200px; font-size: 16px; border-radius: 18px; border-width: 3px; height: 54px; } .sub-menu { margin-top: 4px !important; right: clamp(120px, calc(120px + (200 - 120) * (100vw - 360px) / (480 - 360)), 200px); } .main-navigation ul li.focus > ul { right: clamp(148px, calc(148px + (230 - 148) * (100vw - 360px) / (480 - 360)), 230px); } .page-id-2 .menu-item-86 a { background: white !important; } .menu-hauptmenue-container .main-navigation ul ul { float: none !important; } .menu-hauptmenue-container .lib-menu li { float: none !important; } .menu-hauptmenue-container .main-navigation li, .menu-hauptmenue-container .main-navigation ul ul li, .menu-hauptmenue-container .lib-menu li { max-width: 100% !important; box-sizing: border-box !important; width: auto; } .menu-hauptmenue-container .main-navigation ul ul { max-width: 100vw !important; overflow: hidden !important; } .menu-hauptmenue-container .sub-menu { right: auto; left: -1500px; } .main-navigation ul ul a { min-width: 175px; } .menu-hauptmenue-container .sub-menu a {max-width: 175px;} .menu-hauptmenue-container .main-navigation a, .menu-hauptmenue-container .lib-menu a { max-width: 100% !important; } .menu-hauptmenue-container .menu-item-83.focus > a { background: var(--gre); border-color: var(--gre); color: var(--whi); transition: all 0.1s ease; } .menu-hauptmenue-container .menu-item-84.focus > a { background: var(--blu); border-color: var(--blu); color: var(--whi); transition: all 0.1s ease; } .menu-hauptmenue-container .menu-item-85.focus > a { background: var(--ras); border-color: var(--ras); color: var(--whi); transition: all 0.1s ease; } .menu-hauptmenue-container .menu-item-86.focus > a { color: var(--bla); background: transparent; transition: all 0.1s ease; } .menu-hauptmenue-container .page-id-2 .menu-item-86.focus > a { border: var(--bla); } .menu-hauptmenue-container .menu-item-83 ul.sub-menu li.focus > a { background: var(--gre); border-color: var(--gre); color: var(--whi); transition: all 0.1s ease; } .menu-hauptmenue-container .menu-item-84 ul.sub-menu li.focus > a { background: var(--blu); border-color: var(--blu); color: var(--whi); transition: all 0.1s ease; } .menu-hauptmenue-container .menu-item-85 ul.sub-menu li.focus > a { background: var(--ras); border-color: var(--ras); color: var(--whi); transition: all 0.1s ease; } .menu-hauptmenue-container .menu-item-86.focus > a::before { background: url('/wp-content/themes/sia-oe/images/SIA-Pfeil_black.svg') no-repeat center !important; background-size: contain !important; } .menu-hauptmenue-container .page-id-2 .menu-item-86.focus > a::before { background: url('/wp-content/themes/sia-oe/images/SIA-Pfeil_black.svg') no-repeat center !important; background-size: contain !important; } } /* Small Mobile Fixes */ @media (max-width: 480px) { .main-navigation a { padding: clamp(1px, calc(1px + (8 - 1) * (100vw - 360px) / (480 - 360)), 8px); width: clamp(120px, calc(120px + (200 - 120) * (100vw - 360px) / (480 - 360)), 200px); } .sub-menu { right: clamp(140px, calc(140px + (230 - 140) * (100vw - 360px) / (480 - 360)), 230px); } } /* ================== FIX FÜR CHROME & SAFARI DESKTOP ================== */ /* Untermenü bleibt offen, solange ein Link darin fokussiert ist (Klick oder Tab) */ .main-navigation ul li:focus-within > ul, .main-navigation ul li.focus > ul {display: flex !important; left: auto !important; flex-flow: column !important;} /* Für tiefere Ebenen (Sub-Sub-Menüs) – falls du welche hast */ .main-navigation ul ul li:focus-within > ul, .main-navigation ul ul li.focus > ul {display: block !important; left: auto !important;} /*=======MENÜ GELB SECTION=======*/ #wer a {background: var(--whi); border-color: var(--whi); color: var(--yel); transition: all 0.1s ease;} #wer a {margin-left: 0; width: clamp(170px, calc(170px + (208 - 170) * (100vw - 1600px) / (1920 - 1600)),208px);} #wer a:hover {background: var(--yel); border-color: var(--whi); color: var(--whi); cursor: pointer;} #akt a {background: var(--yel); border-color: var(--whi); color: var(--whi); transition: all 0.1s ease;} #akt a {width: clamp(213px, calc(213px + (260 - 213) * (100vw - 1600px) / (1920 - 1600)), 260px);} #akt a:hover {background: var(--whi); border-color: var(--whi); color: var(--yel); cursor: pointer;} /*=======MENÜ KARTE SECTION=======*/ #km1, #km2, #km3, #km4 {display: flex;} @media (min-width: 768px) and (max-width: 1600px) {#km1, #km2, #km3, #km4 {margin: 8px 0;}} @media (max-width: 768px) {#km1, #km2, #km3, #km4 {margin: 8px 0;}} .km-wrap {display: flex; flex-flow: row wrap;} @media (min-width: 768px) and (max-width: 1600px) {.km-wrap {flex-flow: column;}} @media (max-width: 768px) {.km-wrap {flex-flow: column; margin-bottom: 25px;} } .mdot {display: inline-block; border-radius:50%;} .mdot {width: clamp(20px, calc(20px + (24 - 20) * (100vw - 1600px) / (1920 - 1600)), 24px);} .mdot {height: clamp(20px, calc(20px + (24 - 20) * (100vw - 1600px) / (1920 - 1600)), 24px);} .mdot {margin-right: clamp(10px, calc(10px + (13 - 10) * (100vw - 1600px) / (1920 - 1600)), 13px);} .k-cat {text-transform: uppercase; font-weight: 600; margin-right: 38px; font-size: 14px;} .k-cat {margin-right: clamp(41px, calc(41px + (70 - 41) * (100vw - 1600px) / (1920 - 1600)), 70px);} #mit a {background: var(--ras); border-color: var(--ras); color: var(--whi); transition: all 0.1s ease;} #mit a {margin-left: 0; width: clamp(243px, calc(243px + (2905 - 243) * (100vw - 1600px) / (1920 - 1600)), 290px);} #mit a:hover {background: var(--whi); border-color: var(--bla); color: var(--bla); cursor: pointer;} #vol a {background: var(--whi); border-color: var(--bla); color: var(--bla); transition: all 0.1s ease;} #vol a {width: clamp(324px, calc(324px + (385 - 324) * (100vw - 1600px) / (1920 - 1600)), 385px);} #vol a:hover {background: var(--ras); border-color: var(--ras); color: var(--whi); cursor: pointer;} /*=======MENÜ FOOTER =======*/ .footer-nav-menu .menu-item-86 a::before {content: '' !important;} /*===============================================BUNTE CONTAINER ALLGEMEIN===============================================*/ .cont {display: flex; flex-flow: column; justify-content: center; align-items: center; } .cont {background-position: center top; background-repeat: no-repeat; } .implink {color: white; text-decoration: none; cursor: pointer;} /*-------START FELD-------*/ .start {justify-content: flex-start; padding-top: clamp(125px, calc(125px + (263 - 125) * (100vw - 1150px) / (1920 - 1150)), 263px); line-height: 1.2; } .start {height: clamp(545px, calc(545px + (910 - 545) * (100vw - 1150px) / (1920 - 1150)), 910px); position: relative; z-index: 2;} .start {padding-top: 0px;} @media (min-width: 768px) and (max-width: 1150px) { .start { padding-top: clamp(50px, calc(50px + (125 - 50) * (100vw - 768px) / (1149 - 768)), 125px); height: clamp(350px, calc(350px + (545 - 350) * (100vw - 768px) / (1149 - 768)), 545px); } } .slogan {font-size: clamp(54px, calc(54px + (75 - 54) * (100vw - 1366px) / (1920 - 1366)), 75px); letter-spacing: 1px; font-weight: 600; text-align: center; width: fit-content; color: black; padding-top: 9vw;} /* .slogan {text-shadow: 0 0 30px white, 0 0 20px white;} */ @media (min-width: 768px) and (max-width: 1366px) { .slogan { font-size: clamp(40px, calc(40px + (54 - 40) * (100vw - 768px) / (1366 - 768)), 54px); } } .slogan-sub {font-size: clamp(18px, calc(18px + (22 - 18) * (100vw - 1366px) / (1920 - 1366)), 22px); line-height: 1.4; font-weight: 600; color: black; text-align: center; padding-top: clamp(5px, calc(5px + (36 - 5) * (100vw - 900px) / (1920 - 900)), 36px);} @media (min-width: 768px) and (max-width: 1366px) { .slogan-sub { font-size: clamp(15px, calc(15px + (18 - 15) * (100vw - 768px) / (1366 - 768)), 18px); padding-top: clamp(1px, calc(1px + (5 - 1) * (100vw - 768px) / (1920 - 768)), 5px); } } @media (max-width: 768px) {.slogan-sub {visibility: hidden;} .slogan {visibility: hidden;} .start { height: clamp(600px, calc(600px + (1460 - 600) * (100vw - 340px) / (768 - 340)), 1460px); }} .front-page .entry-header {display: none;}/*Artikel-Header der Startseite entfernen*/ /*---------Hintergrundbild von 768px aufwärts-------------*/ /* #bg-container { position: absolute; display: flex; justify-content: center; align-items: flex-start; width: 100vw;} #bg {min-width: 1100px; position: relative; */ /* } */ /* @media (max-width: 768px) { #bg-container {display: none;}} */ /*---------Hintergrundbild von 768px abwärts-------------*/ /* #bg-container-klein { position: absolute; display: none; justify-content: center; align-items: flex-start; width: 100vw} img #bg-kl { width: 100vw;} */ /* @media (max-width: 768px) {#bg-container-klein {display: flex; position: absolute; z-index: -100;}} */ /*===================Hintergrundbilder============================*/ /*---------Hintergrundbild von 768px aufwärts-------------*/ #bg-container { position: absolute; display: flex; justify-content: center; align-items: flex-start; width: 100vw; } #bg { min-width: 1100px; position: relative; } @media (max-width: 768px) { #bg-container { display: none; } } /*---------Hintergrundbild von 768px abwärts-------------*/ #bg-container-klein { position: absolute; display: none; justify-content: center; align-items: flex-start; width: 100vw; } #bg-kl { width: 100vw; } /* Geändert von "img #bg-kl" zu "#bg-kl" */ @media (max-width: 768px) { #bg-container-klein { display: flex; position: absolute; z-index: -100; } } /*-------GELBES FELD-------*/ .cont.gelb { background-color: var(--yel); height: 34.1vw; height: 36vw; max-height: 667px; min-height: 368px; border-radius: 0 0 37px 37px; color: var(--whi); font-size: 22px; font-weight: 600; } @media (max-width: 768px) {.cont.gelb {height: clamp(625px, calc(625px + (724 - 625) * (100vw - 400px) / (768 - 400)), 724px); }} .cont-wrap-gelb {width: 77%; height: 100%; border: 0px solid gainsboro;} .cont-wrap-gelb {margin-top: clamp(131px, calc(131px + (153 - 131) * (100vw - 1600px) / (1920 - 1600)), 153px);} @media (min-width: 768px) and (max-width: 1600px) { .cont-wrap-gelb {margin-top: clamp(60px, calc(60px + (131 - 60) * (100vw - 768px) / (1600 - 768)), 131px);}} @media (max-width: 768px) {.cont-wrap-gelb {width: 90%; margin-top: clamp(60px, calc(60px + (129 - 60) * (100vw - 320px) / (768 - 320)), 129px);}} .cont-wrap-gelb-1 {font-size: clamp(18px, calc(18px + (21 - 18) * (100vw - 1600px) / (1920 - 1600)), 21px); font-weight: 600; line-height: 1;} .cont-wrap-gelb-1 {margin-bottom: clamp(27px, calc(27px + (33 - 27) * (100vw - 1600px) / (1920 - 1600)), 33px);} @media (max-width: 768px) {.cont-wrap-gelb-1 {font-size: clamp(18px, calc(18px + (33 - 18) * (100vw - 320px) / (768 - 320)), 33px); margin-bottom: clamp(27px, calc(27px + (40 - 27) * (100vw - 320px) / (768 - 320)), 40px);}} .cont-wrap-gelb-2 {font-size: clamp(35.5px, calc(35.5px + (43 - 35.5) * (100vw - 1600px) / (1920 - 1600)), 43px); line-height: 1.4; font-weight: 600; margin-bottom: 2vw;} @media (max-width: 768px) {.cont-wrap-gelb-2 {font-size: clamp(25px, calc(25px + (45 - 25) * (100vw - 320px) / (768 - 320)), 45px);}} @media (min-width: 768px) and (max-width: 1600px) { .cont-wrap-gelb-2 { font-size: clamp(26px, calc(26px + (35.5 - 26) * (100vw - 768px) / (1600 - 768)), 35.5px); } } /*-------LANDKARTE FELD-------*/ .cont.karte { height: clamp(1100px, calc(1100px + (1308 - 1100) * (100vw - 1600px) / (1920 - 1600)), 1308px); } @media (min-width: 768px) and (max-width: 1600px) { .cont.karte {height: clamp(1030px, calc(1030px + (1100 - 1030) * (100vw - 768px) / (1600 - 768)), 1100px);}} @media (max-width: 768px) {.cont.karte {height: clamp(1140px, calc(1140px + (1180 - 1140) * (100vw - 400px) / (768 - 400)), 1180px);}} .cont-wrap-karte {width: 77%; height: 100%; border: 0px solid gainsboro;} .cont-wrap-karte {margin-top: clamp(139px, calc(139px + (165 - 139) * (100vw - 1600px) / (1920 - 1600)), 165px); } @media (min-width: 768px) and (max-width: 1600px) { .cont-wrap-karte {margin-top: clamp(80px, calc(80px + (139 - 80) * (100vw - 768px) / (1600 - 768)), 139px);}} @media (max-width: 768px) {.cont-wrap-karte {width: 90%; margin-top: clamp(60px, calc(60px + (129 - 60) * (100vw - 320px) / (768 - 320)), 129px);}} .cont-wrap-karte-1 {font-size: 2.23vw; line-height: 1; font-weight: 600;} .cont-wrap-karte-1 {margin-bottom: clamp(62px, calc(62px + (76 - 62) * (100vw - 1600px) / (1920 - 1600)), 76px);} @media (min-width: 768px) and (max-width: 1600px) {.cont-wrap-karte-1 {font-size: 26px; margin-bottom: 20px;}} @media (max-width: 768px) {.cont-wrap-karte-1 {font-size: clamp(30px, calc(30px + (33 - 30) * (100vw - 450px) / (768 - 450)), 33px); margin-bottom: 32px; line-height: 1.3;}} #karten-menu {height: clamp(65px, calc(65px + (73 - 65) * (100vw - 1600px) / (1920 - 1600)), 73px);} @media (min-width: 768px) and (max-width: 1600px) { #karten-menu {height: clamp(180px, calc(180px + (65 - 180) * (100vw - 768px) / (1600 - 768)), 56px);}} @media (max-width: 768px) {#karten-menu {height: auto;}} #karte {background-color: gainsboro; border-radius: 1vw; background-image: url('/wp-content/themes/sia-oe/images/austria.jpg'); background-size: cover;} #karte {height: clamp(550px, calc(550px + (655 - 550) * (100vw - 1600px) / (1920 - 1600)), 655px); border: 1px solid gainsboro;} #karte {margin-bottom: clamp(45px, calc(45px + (62 - 45) * (100vw - 1600px) / (1920 - 1600)), 62px);} /*-------BLUE NEWLSETTER FELD-------*/ .cont.blue { height: clamp(825px, calc(825px + (990 - 825) * (100vw - 1600px) / (1920 - 1600)), 990px); background-color: var(--blu); color: var(--whi); border-radius: 37px; justify-content: flex-start; } @media (min-width: 768px) and (max-width: 1024px) { .cont.blue {height: clamp(1200px, calc(1200px + (825 - 1200) * (100vw - 768px) / (1024 - 768)), 825px);}} @media (max-width: 768px) { .cont.blue {height: auto}} .cont-wrap-blue {width: 77%; height: 100%; border: 0px solid gainsboro;} .cont-wrap-blue {margin-top: clamp(153px, calc(153px + (185 - 153) * (100vw - 1600px) / (1920 - 1600)), 185px); } @media (min-width: 768px) and (max-width: 1600px) { .cont-wrap-blue {margin-top: clamp(80px, calc(80px + (153 - 80) * (100vw - 768px) / (1600 - 768)), 153px);}} @media (max-width: 768px) {.cont-wrap-blue {width: 90%; margin-top: clamp(60px, calc(60px + (129 - 60) * (100vw - 320px) / (768 - 320)), 129px);}} .cont-wrap-blue-1 {line-height: 1; font-weight: 600;} .cont-wrap-blue-1 {font-size: clamp(36px, calc(36px + (43 - 36) * (100vw - 1600px) / (1920 - 1600)), 43px);} .cont-wrap-blue-1 {margin-bottom: clamp(58px, calc(58px + (68 - 58) * (100vw - 1600px) / (1920 - 1600)), 68px); line-height: 1.2;} #mc_embed_signup_scroll {font-weight: 600; line-height: 1;} #mc_embed_signup_scroll {font-size: clamp(18px, calc(18px + (22 - 18) * (100vw - 1600px) / (1920 - 1600)), 22px);} #interesse {list-style: none; margin: 12px 0 0 0; padding: 0;} #interesse {margin-top: clamp(8px, calc(8px + (12 - 8) * (100vw - 1600px) / (1920 - 1600)), 12px);} #eingabefelder {display: flex; flex-flow: row wrap; gap: 12px;} @media (min-width: 768px) and (max-width: 1024px) {#eingabefelder {flex-flow: column;}} @media (max-width: 768px) {#eingabefelder {flex-flow: column;}} .fgf {margin-bottom: 8px;} .mfg1 {width: 30%;} .mfg2 {width: 30%;} .mfg3 {width: 38%;} .mfg4 {width: 30%;} .mfg5 {width: 30%;} .mfg6 {width: 38%;} @media (min-width: 1024px) and (max-width: 1600px) { .mfg1 {width: 32%;} .mfg2 {width: 32%;} .mfg3 {width: 32%;} .mfg4 {width: 32%;} .mfg5 {width: 32%;} .mfg6 {width: 32%;} } @media (min-width: 1024px) and (max-width: 1420px) { .hl {display: inline-block; height: 40px;} } @media (min-width: 768px) and (max-width: 1024px) { .mfg1 {width: 100%;} .mfg2 {width: 100%;} .mfg3 {width: 100%;} .mfg4 {width: 100%;} .mfg5 {width: 100%;} .mfg6 {width: 100%;} .hl {display: inline-block; height: 20px;} } @media (max-width: 768px) { .mfg1 {width: 100%;} .mfg2 {width: 100%;} .mfg3 {width: 100%;} .mfg4 {width: 100%;} .mfg5 {width: 100%;} .mfg6 {width: 100%;} /* .hl {display: inline-block; height: 20px;} */ } /*Weiße Eingabefelder im formular*/ input.required, input.button { height: clamp(45px, calc(45px + (54 - 45) * (100vw - 1600px) / (1920 - 1600)), 54px); border-color: var(--whi); border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px); border-style: solid; line-height: 1.1; text-align: left; font-size: clamp(14px, calc(14px + (16 - 14) * (100vw - 1600px) / (1920 - 1600)), 16px); font-weight: normal; margin: 13px 0 25px 0; margin-top: clamp(10px, calc(10px + (13 - 10) * (100vw - 1600px) / (1920 - 1600)), 13px); margin-bottom: clamp(21px, calc(21px + (22 - 21) * (100vw - 1600px) / (1920 - 1600)), 22px); padding-left: 20px; display:flex; justify-content: flex-start; align-items: center; width: clamp(275px, calc(275px + (330 - 275) * (100vw - 1600px) / (1920 - 1600)), 330px); } input.required {width: 98%;} @media (max-width: 768px) {input.button { font-size: 16px; border-radius: 18px; border-width: 3px; height: 54px; margin: 10px 0;} } #inter-list {font-size: clamp(18px, calc(18px + (22 - 18) * (100vw - 1600px) / (1920 - 1600)), 22px)} .mc-field-group.input-group {font-size: 16px; font-weight: 500;} input.button {padding-left: 0px; background: var(--blu); color: var(--whi); font-weight: 600; text-align: center; transition: all 0.1s ease;} input.button {width: clamp(275px, calc(275px + (330 - 275) * (100vw - 1600px) / (1920 - 1600)), 330px);} input.button:hover {background: var(--whi); color: var(--blu);} #anmel-up {position: relative; top: -120px; width: fit-content;} @media (min-width: 768px) and (max-width: 1024px) {#anmel-up {float: right; top: 0px; display: flex; flex-direction: column; align-items: flex-end;}} @media (max-width: 768px) {#anmel-up {top: 20px; margin-bottom: 50px;}} @media (max-width: 768px) { html body.wp-singular.page.page-id-2.logged-in.wp-custom-logo.wp-theme-sia-oe.front-page.page-template-front-page.schule-im-aufbruch-austria div#page.site main#primary.site-main article#post-2.post-2.page.type-page.status-publish.hentry div.entry-content div.cont.blue div.cont-wrap-blue div#nl div#mc_embed_shell div#mc_embed_signup form#mc-embedded-subscribe-form.validate div#mc_embed_signup_scroll div#anmel-up div.mc-field-group.input-group ul li label {line-height: 1.2; margin-top: 10px; border: 0px solid red;}} #interesse li {position: relative; display: flex; align-items: center; font-weight: 500; margin: 9px 0 0 0; line-height: 1;} #interesse li {font-size: clamp(14px, calc(14px + (16 - 14) * (100vw - 1600px) / (1920 - 1600)), 16px);} #interesse li {margin-top: clamp(4px, calc(4px + (8 - 4) * (100vw - 1600px) / (1920 - 1600)), 8px);} /*Modal für Datenschutzerklärung*/ .openmodal {text-decoration: underline;} .openmodal:hover {cursor: pointer;} .closemodal {display: block; text-align: right; font-size: 300%; color: var(--blu); font-weight: bold; line-height: .5} .closemodal:hover {cursor: pointer; color: #0086a7;} .modalwrapdaten {display: none;} #foowrap {width: 1000px;max-width: 90vw;color: #3c3b3b;text-align: left;color: #3c3b3b;} .modalwrap {display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 100;overflow: auto;background: black;background: rgba(0,0,0,.4);} .modalcontent {background: white;margin: 100px auto; padding: 37px;border: 1px solid #888;border-radius: 37px;box-shadow: 5px 5px 40px rgba(0,0,0,.2);width: 80%;-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s;} #mc_embed_signup div.mce_inline_error {margin: 0 0 1em 0;padding: 7px 12px;background-color:var(--ras);font-weight: 400 ;z-index: 1; color:#fff; border-radius: 15px; width: 95%;} /*Radio Buttons ersetzen*/ #interesse input[type="checkbox"] {opacity: 0; position: absolute; width: 20px; height: 20px; cursor: pointer; padding-left: 30px;} #interesse label {padding-left: clamp(27px, calc(27px + (30 - 27) * (100vw - 1600px) / (1920 - 1600)), 30px); padding-top: 8px;} #interesse label::before { content: ""; position: absolute; left: 0; top: 2px; border: 3px solid var(--whi); border-radius: 50%; background: var(--blu); box-sizing: border-box; cursor: pointer; width: clamp(20px, calc(20px + (23 - 20) * (100vw - 1600px) / (1920 - 1600)), 23px); height: clamp(20px, calc(20px + (23 - 20) * (100vw - 1600px) / (1920 - 1600)), 23px); border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px);} #interesse input[type="checkbox"]:hover + label::before {background: var(--whi);} #interesse input[type="checkbox"]:checked + label::before {background: var(--whi);} #interesse input[type="checkbox"]:checked + label::after {content: "✔"; position: absolute; left: clamp(4px, calc(4px + (6 - 4) * (100vw - 1600px) / (1920 - 1600)), 6px); top: clamp(5px, calc(5px + (7 - 5) * (100vw - 1600px) / (1920 - 1600)), 7px); color: var(--blu); font-size: 14px;} /*---------------Variation für Newsletteranmeldung übers Menü--------------------------*/ .post-47 div.cont.blue {background-color: var(--whi); color: var(--typ) !important;} .post-47 .cont-wrap-blue { margin-top: clamp(123px, calc(123px + (155 - 123) * (100vw - 1600px) / (1920 - 1600)), 155px); } .page-id-47 input.required {border-color: black !important; border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px);} .page-id-47 input.button {background: var(--whi); color: var(--typ); border-color: black; border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px);} .page-id-47 input.button:hover { background: var(--ras); color: var(--whi); border-color: var(--ras);} .page-id-47 #interesse label::before {border: 2px solid var(--bla); background: var(--whi);} .page-id-47 #interesse input[type="checkbox"]:checked + label::after {color: var(--whi);} .page-id-47 #interesse input[type="checkbox"]:checked + label::before {background: var(--ras);} /*-------SLIDER TESTIMONIALS FELD-------*/ .cont.testimonials {justify-content: flex-start;} .cont.testimonials {height: clamp(707px, calc(707px + (849 - 707) * (100vw - 1600px) / (1920 - 1600)), 849px);} @media (min-width: 1600px) { .cont.testimonials {max-width: 1500px; margin:auto;}} @media (min-width: 768px) and (max-width: 1600px) { .cont.testimonials {height: clamp(590px, calc(590px + (707 - 590) * (100vw - 768px) / (1600 - 768)), 707px); }} @media (max-width: 768px) {.cont.testimonials {height: clamp(1100px, calc(1100px + (1200 - 1100) * (100vw - 320px) / (768 - 320)), 1200px);}} .home-slider {box-sizing: border-box; margin-top: clamp(157px, calc(157px + (190 - 157) * (100vw - 1600px) / (1920 - 1600)), 190px);} .home-slider {width: 93.5%; overflow: hidden; position: relative; height: 500px;} @media (min-width: 768px) and (max-width: 1600px) { .home-slider {margin-top: clamp(90px, calc(90px + (157 - 90) * (100vw - 768px) / (1600 - 768)), 157px);}} @media (max-width: 768px) {.home-slider {height: auto; margin-top: clamp(60px, calc(60px + (100 - 60) * (100vw - 400px) / (768 - 400)), 100px);}} .wrapper {box-sizing: border-box; width: 100%; height: 100%; display: flex; transition: transform 0.5s ease-in-out;} .slide-prev, .slide-next {z-index: 10; cursor: pointer; background-size: contain; position: absolute; width: clamp(45px, calc(45px + (50 - 45) * (100vw - 1600px) / (1920 - 1600)), 50px); height: clamp(45px, calc(45px + (50 - 45) * (100vw - 1600px) / (1920 - 1600)), 50px); top: 30%; } .slide-prev {background-image: url('/wp-content/themes/sia-oe/images/arr-prev.png'); left: 0; } .slide-next {background-image: url('/wp-content/themes/sia-oe/images/arr-next.png'); right: 0; } @media (max-width: 768px) {.slide-prev, .slide-next {display: none;}} /*Slides layout*/ .slide {box-sizing: border-box; width: 100%; height: 100%; flex-shrink: 0; padding: 0 clamp(124px, calc(124px + (143 - 124) * (100vw - 1600px) / (1920 - 1600)), 143px); display: flex; justify-content: space-around; align-items: flex-start; min-width: 100%;} @media (max-width: 768px) {.slide {flex-direction: column; padding: 30px;}} .slide-text {flex: 5; display: flex; flex-flow: column; justify-content: space-between; height: 100%; min-height: 100%;} .slide-text div:first-child {font-weight: 600; color: black; text-indent: -20px;} @media (max-width: 768px) {.slide-text div:first-child {text-indent: -13px;}} .slide-text div:first-child {font-size: clamp(35px, calc(35px + (40 - 35) * (100vw - 1600px) / (1920 - 1600)), 40px);} .slide-text div:first-child {line-height: clamp(50px, calc(50px + (60 - 50) * (100vw - 1600px) / (1920 - 1600)), 60px);} @media (min-width: 768px) and (max-width: 1600px) { .slide-text div:first-child {font-size: clamp(26px, calc(26px + (35 - 26) * (100vw - 768px) / (1600 - 768)), 35px);} .slide-text div:first-child {line-height: clamp(30px, calc(30px + (50 - 30) * (100vw - 768px) / (1600 - 768)), 50px);} } @media (max-width: 768px) { .slide-text div:first-child {font-size: clamp(26px, calc(26px + (36 - 26) * (100vw - 320px) / (768 - 320)), 36px);} .slide-text div:first-child {line-height: clamp(30px, calc(30px + (45 - 30) * (100vw - 320px) / (768 - 320)), 45px);} } .slide-text div:nth-child(2) {font-weight: 600; color: black; line-height: 1.3; text-align: bottom; margin-top: auto;} @media (min-width: 768px) and (max-width: 1600px) {.slide-text div:nth-child(2) {margin-top: 10px;}} @media (max-width: 768px) {.slide-text div:nth-child(2) {margin-top: 30px;}} .slide-text div:nth-child(2) { font-size: clamp(18px, calc(18px + (22 - 18) * (100vw - 1600px) / (1920 - 1600)), 22px); } .slide-image {flex: 1.75; display: flex; justify-content: center; align-items: flex-start; left: 12px; position: relative;} .slide-text {order: 1;} @media (max-width: 768px) {.slide-text {order: 2; margin-top: 45px; align-items: flex-start; justify-content: flex-start; height: auto; min-height: auto;}} .slide-image {order: 2;} @media (max-width: 768px) {.slide-image {order: 1; width: 100%; justify-content: center;}} /*-------FOOTER FELD-------height footer bei weiten Bildschirmen height: 667px; */ .site-footer {display: flex; flex-flow: column; justify-content: start; align-items: center;} .site-footer {padding-top: clamp(50px, calc(50px + (57 - 50) * (100vw - 1600px) / (1920 - 1600)), 57px);} .site-footer {background-color: var(--gre); border-radius: 37px 37px 0 0 ; color:var(--whi);} .site-footer {height: clamp(540px, calc(540px + (640 - 540) * (100vw - 1600px) / (1920 - 1600)), 640px);} @media (min-width: 768px) and (max-width: 1024px) { .site-footer {height: clamp(800px, calc(800px + (540 - 800) * (100vw - 768px) / (1024 - 768)), 540px);}} @media (max-width: 768px) { .site-footer {height: clamp(1400px, calc(1400px + (540 - 1400) * (100vw - 450px) / (768 - 450)), 540px);}} /*-------Ende: FOOTER FELD-------height footer bei weiten Bildschirmen height: 667px; */ .footer-container {height: clamp(462px, calc(462px + (530 - 462) * (100vw - 1600px) / (1920 - 1600)), 530px);} .footer-container {display: flex; justify-content: space-between; width: 94vw; margin: 0 auto;} @media (min-width: 768px) and (max-width: 1024px) { .footer-container {flex-direction: column;} .footer-container {height: 750px;} } @media (max-width: 768px) { .footer-container {flex-direction: column; height: 1350; justify-content: flex-start;} } .footer-left, .footer-right {width: 50%; position: relative;} .footer-left {font-size: clamp(58px, calc(58px + (71 - 58) * (100vw - 1600px) / (1920 - 1600)), 71px);} .footer-left {font-weight: 600; line-height: 1.3; letter-spacing: 3px; padding-left: 16px;} @media (min-width: 1024px) and (max-width: 1600px) { .footer-left {font-size: clamp(44px, calc(44px + (58 - 44) * (100vw - 1024px) / (1600 - 1024)), 58px);} } @media (max-width: 1024px) { .footer-left {font-size: clamp(44px, calc(44px + (58 - 44) * (100vw - 1024px) / (1600 - 1024)), 58px);}} @media (max-width: 768px) { .footer-left {font-size: clamp(34px, calc(34px + (47 - 34) * (100vw - 450px) / (768 - 450)), 47px); letter-spacing: 1px;}} .footer-right {padding: 13px 0 0 14px;} @media (min-width: 768px) and (max-width: 1024px) { .footer-left {width: 90vw;} .footer-right {width: 90vw; padding: 23px 0 0 24px;} } @media (max-width: 768px) { .footer-left {width: 90vw;} .footer-right {width: 90vw; padding: 23px 0 0 24px;} } /* Footer Menu Styling */ .footer-nav-menu {margin: clamp(-5px, calc(-5px + (0 + 5) * (100vw - 1600px) / (1920 - 1600)), 0px);} .footer-nav-menu {display: flex; justify-content: space-between; list-style: none; padding: 0;} @media (max-width: 768px) {.footer-nav-menu {flex-direction: column;}} @media (min-width: 768px) and (max-width: 1024px) { .footer-nav-menu {margin: 20px 0 ;} } @media (max-width: 768px) { .footer-nav-menu {margin: 20px 0 ;} } .footer-nav-menu > li {flex: 1; margin-right: 20px;} .footer-nav-menu > li:last-child {margin-right: 0; flex: 0;} @media (max-width: 1024px) {.footer-nav-menu > li:last-child {display: none;}} .footer-nav-menu > li > a {font-size: clamp(18px, calc(18px + (22 - 18) * (100vw - 1600px) / (1920 - 1600)), 22px);} .footer-nav-menu > li > a {font-weight: 600; text-decoration: none; display: block; margin-bottom: 10px;} .footer-nav-menu .sub-menu {list-style: none; margin: 0; padding: 0; display: block;} .footer-nav-menu .sub-menu li {margin-bottom: clamp(7px, calc(7px + (13.7 - 7) * (100vw - 1600px) / (1920 - 1600)), 13.7px);} @media (max-width: 768px) {.footer-nav-menu > li {margin-bottom: 40px;}} .footer-nav-menu .menu-item-83 a, .footer-nav-menu .menu-item-84 a, .footer-nav-menu .menu-item-85 a {border: none; color: var(--whi); background: transparent;} .footer-nav-menu .menu-item-86 a { position: absolute; right: 0; bottom: 0;} @media (min-width: 768px) and (max-width: 1024px) {.footer-nav-menu .menu-item-86 a {right: 100px;}} @media (max-width: 768px) {.footer-nav-menu .menu-item-86 a {right: 100px;}} .footer-nav-menu .sub-menu li a { font-size: 14px; text-decoration: none; /* padding-left: 20px; background: url('/wp-content/themes/sia-oe/images/SIA-Pfeil_white.svg') no-repeat left center; background-size: 12px; display: inline-block; */ text-transform: uppercase; font-weight: 600; } @media (min-width: 1024px) and (max-width: 1600px) { .footer-nav-menu .sub-menu li a {font-size: clamp(12px, calc(12px + (14 - 12) * (100vw - 1024px) / (1600 - 1024)), 14px);}} .footer-nav-menu .sub-menu li a:hover {color: var(--whi);} .footer-nav-menu > li.menu-item-86 a { text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1.1; font-size: clamp(14px, calc(14px + (16 - 14) * (100vw - 1600px) / (1920 - 1600)), 16px); font-weight: 600; background: var(--whi); color: var(--gre); border-color: var(--gre); border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px); border-style: solid; width: 14.5vw; min-width: 100px; height: clamp(45px, calc(45px + (54 - 45) * (100vw - 1600px) / (1920 - 1600)), 54px); max-height: 54px; display:flex; justify-content: center; align-items: center; margin: 15px 19px 132px 0; margin-right: clamp(14px, calc(14px + (19 - 14) * (100vw - 1600px) / (1920 - 1600)), 19px); padding: 0 8px; transition: all 0.1s ease; } /*====================*/ .footer-nav-menu .sub-menu li a { font-size: 14px; text-decoration: none; padding-left: 20px; /* Platz für den Pfeil */ display: inline-block; text-transform: uppercase; font-weight: 600; position: relative; /* für das ::before nötig */ background: none !important; /* entfernt den alten Hintergrund-Pfeil */ } /* Der neue, animierbare Pfeil */ .footer-nav-menu .sub-menu li a::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; background: url('/wp-content/themes/sia-oe/images/SIA-Pfeil_white.svg') no-repeat center / contain; transform: translateY(-50%); transition: transform 0.35s ease; } /* Hover → nur dieser eine Pfeil dreht sich */ .footer-nav-menu .sub-menu li a:hover::before { transform: translateY(-50%) rotate(45deg); } /* Dein Textfarben-Hover bleibt erhalten */ .footer-nav-menu .sub-menu li a:hover { color: var(--whi); } /*======================*/ .footer-nav-menu > li.menu-item-86 a:hover {background: var(--gre); border: 3px solid var(--whi) !important; color: var(--whi); cursor: pointer;} .page-id-2 .footer-nav-menu .menu-item-86 a:hover, .footer-nav-menu .menu-item-86 a:hover, .footer-nav-menu .menu-item-86 a {border: 3px solid var(--whi) !important;} .footer-nav-menu .menu-item-86 a::before {content: ""; display: none; width: 14px; height: 14px; margin-right: 8px; vertical-align: middle; background: none; transition: none;} .footer-nav-menu .menu-item-86 a::before {transition: none;} .footer-nav-menu .menu-item-86 a:hover::before { background: none; background-size: contain; } .footer-nav-menu .menu-item-86 a:hover::before {transform: none;} /* Ensure no dropdown behavior */ .footer-nav-menu .sub-menu { position: static; visibility: visible; opacity: 1; } .copyright, .mail-und-socialmedia { display: block; position: absolute; bottom:0; left:0; font-size: 22px; letter-spacing:normal; height: 80px; width: 100%; padding-left: 14px; display: flex; align-items: center; justify-content: space-between; } .copyright-small { display: none; font-size: 22px; letter-spacing:normal; height: 80px; width: 100%; padding-left: 14px; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 1024px) and (max-width: 1600px) { .copyright, .mail-und-socialmedia {font-size: clamp(18px, calc(18px + (22 - 18) * (100vw - 1024px) / (1600 - 1024)), 22px);} .footer-nav-menu > li.menu-item-86 a {margin-right: clamp(22px, calc(22px + (19 - 22) * (100vw - 1024px) / (1600 - 1024)), 19px);} } @media (min-width: 768px) and (max-width: 1024px) { .copyright-small {display: flex; justify-content: center; font-size: 16px;} .copyright {display: none;} .mail-und-socialmedia {position: relative; padding-left: 0px; padding-top: 15px; display: flex; flex-direction: column; align-items: center;} } @media (max-width: 768px) { .copyright-small {display: flex; justify-content: flex-start; align-items: flex-end; font-size: 16px; height: 130px; padding-left: 12px;} .copyright {display: none;} .mail-und-socialmedia {position: relative; padding-left: 0px; padding-top: 15px; display: flex; flex-direction: column; align-items: flex-start;} } @media (min-width: 1024px) {.copyright {display: flex;} .copyright-small {display: none;}} .mail-und-socialmedia a {text-decoration: none; color: var(--whi); font-weight: 600;} .mail-und-socialmedia a:hover {cursor: pointer;} .socialmedia {padding-right: clamp(104px, calc(104px + (124 - 104) * (100vw - 1600px) / (1920 - 1600)), 124px); margin-left: auto;} @media (min-width: 768px) and (max-width: 1024px) { .socialmedia {margin-left: 0px; padding-right: 0px; margin-top: 10px;} } @media (max-width: 768px) { .socialmedia {margin-left: 0px; padding-right: 0px; margin-top: 10px; position: relative; bottom: -120px; }} @media (min-width: 1024px) and (max-width: 1600px) { .socialmedia {padding-right: clamp(28px, calc(28px + (104 - 28) * (100vw - 1024px) / (1600 - 1024)), 104px);} } .socialmedia img {width: clamp(62px, calc(62px + (78 - 62) * (100vw - 1600px) / (1920 - 1600)), 78px);} /*==============================Was ist Schule im Aufbruch?=============================*/ .was-film {outline-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px); outline-color: vad(--bla); outline-style: solid; border: 60px solid white; border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px);; margin-bottom: 40px;} .was-film {max-width: 90vw !important; margin-top: 80px;} @media (max-width: 850px) {.was-film {border: 0px solid transparent; outline: 0px solid transparent; margin-top: -50px;}} @media only screen and (min-width: 769px) and (max-width: 900px) { .was-film {margin-top: 40px;} } /*==============================Wer Wir Sind=============================*/ .wws-container1 {display: flex; flex-wrap: wrap; justify-content: flex-start; max-width: 100vw; gap: 40px;} .mb1 {margin-bottom: 10px;} .fleftx {float: left;} .cl {clear: both;} .w100 {width: 100%;} .fon {font-size: 1rem;} .kern-img, .init-img {border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px);;} .wws {min-width: 200px; margin-bottom: 7vw;} @media only screen and (min-width: 769px) and (max-width: 1600px) { .wws {flex: 0;} .wws-container1 {justify-content: flex-start; gap: 40px;} } .wws-img {border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); box-shadow: inset 0 0 10px gray; margin-bottom: 15px; } .wws-mail {max-width: 200px !important; padding: 0px !important; color: var(--whi); background: var(--gre) !important; border: 3px solid var(--gre) !important;} .wws-mail:hover {color: var(--bla); background: var(--whi) !important; border: 3px solid var(--bla) !important;} @media only screen and (max-width: 390px) {.wws-mail {max-width: 150px !important;}} .wnam1 { font-weight: bold; font-size: 1.5rem; /* margin: 3px 0 7px; */ /* display: inline-block; */ line-height: 2rem; margin: 20px 0 !important; } .wnam { font-weight: bold; font-size: 1.5rem; } .wws-kernteam {position: relative; z-index: 1; color: var(--whi);} .wws-kernteam::before { content: ""; position: absolute; top: 0; left: calc(50% - 49.6vw); width: 99vw; height: 100%; background-color: var(--blu); z-index: -1; border-radius: 37px; padding-bottom: 80px; } .kernteam, .initiatoren {display: flex; align-items: center; justify-content: flex-start; align-items: flex-start; gap: 50px;} .kern-img-div, .init-img-div {flex: 0 0 120px; margin-top: 10px;} .kern-img, .init-img {width: 100%; height: 100%; object-fit: cover;} @media only screen and (max-width: 767px) { .mb1 { margin-bottom: 30px; } .page-id-15 .lib-menu {margin-top: -27px;} .wws {text-align: center;} .wws-mail {margin: 30px auto 0 !important;} } @media only screen and (max-width: 464px) { .kernteam, .initiatoren { flex-wrap: wrap; gap: 5px; } } /*===============================Wirkung=====================================*/ .pdfemb-viewer {border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px) !important; border-color: var(--bla) !important; border-style: solid !important; border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px) !important;} .wirkung {min-height: 700px; margin-top: 63px;} @media only screen and (max-width: 900px) { .wirkung {min-height: auto;} } /*================================PARTNER=====================================*/ .partner-container {display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 10px;} .partner-container a {display: flex; justify-content: center; align-items: center; height: 250px; width: 250px;} .partner-container a img {max-width: 200px; max-height: 250px; } @media only screen and (max-width: 767px) { .page-id-19 p {margin: auto;} .page-id-19 .top-bg {height: 300px;} } /*============================Widgetkit Akkordeon============================*/ /*====Plus am Ende ausblenden start=============*/ .uk-scope .uk-accordion-title::before {background-image: none;} /*====Plus am Ende ausblenden ende=============*/ .h6d { font-size: 22px; font-weight: bold; color: black; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1); margin-bottom: 12px; display: inline-block;} .uk-margin h4 {font-size: 30px; font-weight: bold;} .stab, .stabw {max-width: 1700px; box-sizing: border-box; font-size: 18px !important; } .stab > span, .stabw > span {display: inline-block; padding: 20px 3px 20px 18px; margin: 0;} .stab > span:first-child, .stabw > span:first-child {width: 0%;} .stab > span:nth-child(2) { width: 20%; letter-spacing: .7px; border-top-left-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px); border-color: var(--bla); border-style: solid; } .stab > span:nth-child(3) { width: 52%; font-weight: bold; border-radius: 0px; border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px); border-color: var(--bla); border-style: solid; border-left: 0px solid white; border-right: 0px solid white; } .stab > span:nth-child(4) { width: 15%; min-width: 200px; color: white; font-weight: 600; text-align: center; background-color: var(--ras); border-top-left-radius: 0px; border-top-right-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-bottom-right-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-bottom-left-radius: 0px; border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px); border-color: var(--ras); border-style: solid; border-left: 0px solid white; text-transform: uppercase; font-weight: 600; } .stab > span:nth-child(4):hover {color: var(--whi)} .stabw > span:nth-child(2) { width: 55%; letter-spacing: .7px; font-weight: bold; border-top-left-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px); border-color: var(--bla); border-style: solid; } .stabw > span:nth-child(3) { width: 19%; border-radius: 0px; border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px); border-color: var(--bla); border-style: solid; border-left: 0px solid white; border-right: 0px solid white; } .stabw > span:nth-child(4) { width: 16%; color: white; font-weight: 600; text-align: center; padding: 20px 10px 20px 10px; background-color: var(--ras); border-top-left-radius: 0px; border-top-right-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-bottom-right-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-bottom-left-radius: 0px; border-width: clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px); border-color: var(--gre); border-style: solid; border-left: 0px solid white; text-transform: uppercase; font-weight: 600; } .stabw > span:nth-child(4):hover {color: var(--bla)} .bgg {background-color: var(--gre) !important; border: 0px solid var(--gre);} .bgr {background-color: var(--ras) !important; border: 0px solid var(--ras);} @media only screen and (max-width: 1320px) { .stab, .stabw {padding: 15px; text-align: center;} .stab > span, .stabw > span {padding: 8px;} .stab > span, .stabw > span {border: none !important;} .stab > span:nth-child(4), .stabw > span:nth-child(4) { border-top-left-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border-bottom-left-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); min-width: 200px;} .stab > span:nth-child(4) {padding: 20px; text-align: center;} .stabw > span:nth-child(4) {padding: 20px; text-align: center;} .stab > span:nth-child(3) {padding: 20px;} .stabw > span:nth-child(3) {min-width: 200px;} .stab > span:nth-child(2) {width: 100%; min-width: 80vw;} .stabw > span:nth-child(2) {width: 100%; min-width: 80vw; font-size: 130%;} } /*====================Webinare Archiv================================*/ .webinar-akkordeon {margin-top: 50px;} .webiaufcont { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; } .webiaufcont div:first-child {max-width: 5450px; min-width: 530px; margin: 0 30px 10px 0} .webiaufcont div:nth-child(2) {max-width: 450px; min-width: 290px;} a.fern {font-size: 16px; margin: 10px 0 0 0; padding: 8px 16px 8px 16px; height: 38px; float: none; text-align: center;} .bb {color: var(--blu); font-size: 120%;} .cen {align-items: center;} .webiaufcont img, .mbt1 img{ position: relative; margin-top: -35px;} .webiaufcont iframe {max-width: 90vw;} .webiaufcont a.anmel-b, .webiaufcont a.anmel-r {float: left !important;} /* .webiaufcont div {max-width: 90vw !important;} */ @media (max-width: 900px) { .webiaufcont img {max-width: 80%; margin-top: 0px;} .uk-accordion-title {margin-bottom: 50px;}} .mbt1 p {margin: 0 0 1em;} .uk-scope .uk-accordion-title:hover {color: var(--bla)} /*====================================Bilder Positionen==========================*/ .fleftx { display: block; max-width: 100%; margin-bottom: 0.5em; float: left; margin-right: 1.7em; font-size: 1rem; } .frightx { display: block; max-width: 100%; margin-bottom: 0.5em; float: right; margin-left: 1.7em; font-size: 1 rem; } .fleft { display: block; width: 58%; max-width: 600px; margin-bottom: 0.5em; float: left; margin-right: 1.7em; font-size: 1rem; } .fright { display: block; width: 58%; max-width: 600px; margin-bottom: 0.5em; float: right; margin-left: 1.7em; font-size: 1rem; } /*===================================Buttons==============================*/ /* Roter Button zur Anmeldung: */ a.anmel, a.anmel-r { display: block; min-height: 35px; background-color: var(--ras); color: floralwhite; font-size: 21px; font-weight: bold; float: right; border: 0px solid var(--ras); border-radius: 18px; text-decoration: none; padding: 16px 35px 12px 35px; margin: 10px 0 20px; background-color: var(--ras); } a.anmel-l, a.anmel-rl {float: left; margin: 25px 0 120px;} a.anmel-r:hover, a.anmel:hover {color: var(--typ)} /* Blauer Button zur Anmeldung: */ a.anmel-b { display: block; min-height: 35px; background-color: var(--blu); color: floralwhite; font-size: 21px; font-weight: bold; float: right; border: 0px solid var(--blu); border-radius: 18px; text-decoration: none; padding: 16px 35px 12px 35px; margin: 10px 0 20px; background-color: var(--blu); } a.anmel-bl {float: left; margin: 25px 0 120px;} a.anmel-b:hover {color: var(--typ)} /* Grüner Button zur Anmeldung: */ a.anmel-g { display: block; min-height: 35px; background-color: var(--gre); color: floralwhite; font-size: 21px; font-weight: bold; float: right; border: 0px solid var(--blu); border-radius: 18px; text-decoration: none; padding: 16px 35px 12px 35px; margin: 10px 0 20px; background-color: var(--gre); } a.anmel-gl {float: left; margin: 25px 0 120px;} a.anmel-g:hover {color: var(--typ)} /* Gelber Button zur Anmeldung: */ a.anmel-y { display: block; min-height: 35px; background-color: var(--yel); color: floralwhite; font-size: 21px; font-weight: bold; float: right; border: 0px solid var(--blu); border-radius: 18px; text-decoration: none; padding: 16px 35px 12px 35px; margin: 10px 0 20px; background-color: var(--yel); } a.anmel-yl {float: left; margin: 25px 0 120px;} a.anmel-y:hover {text-decoration: none; color: var(--typ)} /*================================ELTERN=================================*/ .page-id-37 .site-header, .page-id-37 .entry-header, .page-id-37 .site-footer, .page-id-37 .site-content-contain {display: none !important;} .page-id-37 main {width: 100% !important; max-width: 100vw !important; margin: 0 !important; } .page-id-37 .sectionwrap > div { margin: 0px; } /*=====ELTERN Anfang Übertrag aus dem alten stylesheet=====*/ /*---------------------Elterzusammenarbeit Seite (final)-----------------------*/ form.post-password-form {padding: 15px;} .page-id-2715 .site-content {padding-top: 0px; padding-bottom: 0px !important;} .page-id-2715 h1.entry-title {display: none;} .page-id-2715 .wrap {width: 100%; max-width: 100%; padding-left: 0em; padding-right: 0em;} .page-id-2715 main.site-main {margin: 0px;} /* .page-id-2715 li.uk-active {} */ .page-id-2715 .uk-thumbnav > * > * { border-radius: 8px;} /*Gesamtseite Wrapper*/ .elttotal { position: relative; width: 100%; max-width: 100%; height: 100%; top: 0px; left: 0px; display: flex; flex-direction: column; margin-top: 0px; box-sizing: border-box; } .elttotal * {box-sizing: border-box;} .elttotal > div:target {padding-top: 40px;} .page-id-2715 hr {width: 100%; margin: 0px;} /*Menuburger*/ #menub { display: block; font-size: 220%; color: var(--blu); position: fixed; right: 23px; top: 10px; font-weight: bold; } #menub:hover {text-decoration: none;} /*MENÜ*/ .eltmenu { display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; background-color: var(--blu); width: 100vw; max-width: 100vw; min-height: 52px; color: whitesmoke; font-size: 120%; padding: 5px; box-shadow: 0px 15px 10px -15px rgba(0,0,0,.5); box-shadow: 0 0 15px rgba(0,0,0,.5); z-index: 1000; } .eltmenu a { display: inline-block; padding: 5px 12px; color: floralwhite !important; transition: color 1s;} .eltmenu a:hover {color: white;} /* @media (max-width: 900px) { .eltmenu a.beibei {display: none;} } @media (min-width: 900px) { .eltmenu a.beimm {display: none;} } */ /*Wrapper für die Sektionen*/ .sectionwrap { display: flex; flex-direction: column; align-items: center; width: 100%; color: black; padding: 5vw 0 3vw; } /*Formatierung für alle Divs in den Sektionen*/ .sectionwrap > div {margin: 20px;} #planer.sectionwrap > div {margin: 2px 33px;} .sectionwrap div {max-width: 100%;} hr + p {display: none;} .sectiontitel { font-size: 230%; margin-bottom: 70px !important; text-shadow: 3px 3px 22px rgba(0,0,0,.2), 1px 1px 5px rgba(0,0,0,.2);} .sectiontitel-p { font-size: 230%; text-shadow: 3px 3px 22px rgba(0,0,0,.2), 1px 1px 5px rgba(0,0,0,.2); } @media (max-width: 600px) { .sectiontitel {margin-bottom: 33px !important;} } /*Formatierung SEKTION 0*/ #start { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 100%; min-height: 470px; background-color: #287CA1; position: relative; margin-top: -51px;} .startimg {position: relative; margin-top: -100px; max-width: 100%;} @media (max-width: 500px) { #start {height: 200px; min-height: 100px;} .startimg {margin-top: -10px;} } /*Iframe*/ .outerwrap { width: 70%; min-width: 616px; } @media (max-width: 616px) { .outerwrap { width: 100%; min-width: 230px; } } .zusammenarbei {background-image: none;} .ifr { position: relative; padding-bottom: 56.25%; overflow: hidden; height: 0; border-radius: 4px; } .outerwrap > .ifr iframe, .outerwrap > .ifr iframe, .erfwrap > div .ifr iframe, .erfwrap > div .ifr iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .ezasiframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; box-shadow: 6px 7px 15px rgba(0,0,0,.3); } .outerwrap > .ifr img, .outerwrap > .ifr img, .erfwrap > .ifr img, .erfwrap > .ifr img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; } .ifr img:hover { filter: brightness(75%); -webkit-filter: brightness(75%); } .ifr .play { height: 80px; width: 80px; left: 85%; top: 75%; margin-left: -40px; margin-top: -40px; position: absolute; background: url("/wp-content/themes/sia-oe/images/go1.png") no-repeat; cursor: pointer; } /*SEKTION 1 Worum geht's? Hörndler*/ .worum {width: 75%; margin: auto; display: flex; flex-flow: column nowrap; padding-left: 30px;} .wowas {display: flex; flex-flow: row nowrap;} .woimg {width: 180px; height: 190px; margin-right: 30px; box-shadow: 5px 5px 15px rgba(0,0,0,.4); border-radius: 8px; background-image: url("http://www.schule-im-aufbruch.at/wp-content/uploads/Hernler.jpg");} .wozit { width: 70%; font-size: 200%; color: slategray; font-style: italic; line-height: 50px;} .wower {font-size: 21px; font-weight: bold; padding-top: 25px; padding-left: 216px;} .apos {margin: 10px 20px 0;} @media (max-width: 600px) { .worum {padding-left: 0px;} .wowas {display: flex; flex-flow: column nowrap;} .wozit {width: 70vw; font-size: 150%; line-height: 32px; margin-top: 38px;} .wower {width: 80vw; padding-left: 0px; font-size: 90%;} } /*Formatierung SEKTION 2 (Beispiele und Ideen)*/ .wimg1 {display: none;} @media (max-width: 899px) {#beispiele {display: none;}} /*Würfel*/ .wwrap {display: block; position: relative; width: 276px; height: 269px; box-shadow: 0 0 0 white; margin-bottom: 80px !important; margin-top: 60px !important;} .gelbe {clip-path: polygon(76% 74%, 100% 49%, 100% 76%, 76% 100%, 0 100%, 0 74%);} .bluee {clip-path: polygon(75% 49%, 100% 25%, 100% 49%, 76% 74%, 0 74%, 0 49%);} .greene {clip-path: polygon(24% 0, 100% 0, 100% 25%, 75% 49%, 0 49%, 0 24%);} .gelbe, .bluee, .greene {position: absolute; box-shadow: 0 0 0 white !important; filter: saturate(0); top: 0; left:0; } .gelbe:hover, .bluee:hover, .greene:hover {filter: saturate(1);} .bmobile {display: none;} .bdesk {display: block;} .beispmobile {display: none;} @media (max-width: 900px) { .thumbsc, .beisp {display: none !important;} .wwrap {display: none;} .wimg1 {display: block;} .bmobile {display: block;} .beispmobile {display: block;} } /*Galerien*/ .kenntab {border-radius: 8px; background: white; padding: 10px 20px; width: 253px; color: black; box-shadow: 4px 4px 9px rgba(56, 56, 56, .4) !important; height: 85px;} #kenngal > div:nth-child(1) > ul:nth-child(1) {border: 0px solid black; width: 810px; margin: auto; padding-bottom: 10px;} /* #slider_3599 {border: 0px dotted green;} #slider_3599 .owl-item {border: 0px dotted hotpink;} #slider_3599 .owl-item img, #slider_4227 .owl-item img, #slider_4228 .owl-item img { border: 0px dotted orange; box-shadow: 0 0 25px rgba(0,0,0,.5); margin-top: 25px; border-radius: 8px; } */ #divzusammen { background-color: var(--gre); /* background-image: url('http://www.schule-im-aufbruch.at/wp-content/uploads/Bild.jpg'); background-size: cover; */ } #divvision { background-color: var(--blu); /* background-image: url('http://www.schule-im-aufbruch.at/wp-content/uploads/Bilda.jpg'); background-size: cover; */ } #kenngal {width: 900px; margin: auto; border: 0px solid blue;} #divkennen { background-color: var(--yel); border-radius: 8px; height: 100%; box-shadow: 4px 4px 9px rgba(56, 56, 56, .4) !important; } .beiwrap {display: flex; flex-direction: column; justify-content: center; max-width: 1000px; width: 1000px; } .headingc, .headingm { text-align: center; font-size: 180%; font-weight: bold; padding: 55px 0 10px 0; } .headingm {display:none;} div#kennenlernen .thumbsc {background-color: var(--yel);} div#zusammenarbeit .thumbsc {background-color: var(--gre);} div#vision_buendnis .thumbsc {background-color: var(--blu);} /* .thumbsc { display: flex; flex-flow: row wrap; justify-content: space-evenly; background-color: var(--gre); padding: 25px 70px 0 70px; border-radius: 8px 8px 0 0; } .thumbsc div { width: 30%; flex-grow: 1; display: flex; flex-direction: column; border: 1px solid gainsboro; border-radius: 8px; margin: 10px; height: 80px; background: white; box-shadow: 4px 4px 9px rgba(56, 56, 56, .4); padding: 12px 14px; } */ /*Slideshow*/ /* .econt, .econt_a, .econt_b { /* padding: 1vh; margin: 1vh; */ /* width: 800px; height: 562px; display: none; box-shadow: 4px 4px 9px rgba(56, 56, 56, .4); */ */ /* } */ /* .econt img {height: 75.5vh; } */ /* .econt2 img {height: 75.5vh; filter: hue-rotate(180deg); } .econt3 img {height: 75.5vh; filter: hue-rotate(290deg); } */ .beisp { box-sizing: border-box; padding: 30px 5px; color: white; /* height: 622px; */ border-radius: 0 0 8px 8px; width: 960px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .zurueck, .weiter { cursor: pointer; padding: 16px; font-size: 75px; transition: .6s ease; user-select: none; color: rgba(56, 56, 56, .4); text-shadow: 4px 4px 9px rgba(56, 56, 56, .4); } /* .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } */ /*Master Edition*/ .slif { color: black; border: 0px solid gray; border-radius: 8px; width: 100%; /* height: 630px; */ height: 1200px; font-size: 35px; position: relative; } .slifus { color: black; border: 0px solid gray; border-radius: 8px; width: 100%; height: 1200px; font-size: 35px; /* display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;*/ position: relative; } .thumbsc1, .thumbsc2, .thumbsc3 { /* width: 900px; */ max-width: 97.5%; margin: 50px auto 10px auto; display: grid; grid-template-columns: 310px 310px 310px; grid-template-rows: 92px 92px; grid-gap: 14px; } .thuu div { font-size: 20px; font-weight: bold; letter-spacing: .5px; margin: 5px; padding: 10px 15px; border-radius: 18px; background-color: var(--yel); color: floralwhite; /* box-shadow: 2px 2px 8px rgba(100, 100, 100, 0.5); -moz-box-shadow: 2px 2px 8px rgba(100, 100, 100, 0.5); -webkit-box-shadow: 2px 2px 8px rgba(100, 100, 100, 0.5); background-size: 100% 100%; text-shadow: 0 0 5px rgba(0,0,0,.3) */ } .thumbsc1 div {background-color: var(--yel);} .thumbsc2 div {background-color: var(--blu);} .thumbsc3 div {background-color: var(--gre);} .thumbsc1 div:hover, .thumbsc2 div:hover, .thumbsc3 div:hover { /* text-decoration: underline; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.2); */ color: white !important; text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);} .item img { box-shadow: 2px 2px 8px rgba(100, 100, 100, 0.5); -moz-box-shadow: 2px 2px 8px rgba(100, 100, 100, 0.5); -webkit-box-shadow: 2px 2px 8px rgba(100, 100, 100, 0.5); border-radius: 8px; /* border: 7px solid #317B9E; */ } .ifmobcont, .ifmobcont * {box-sizing: border-box;} .ifmobcont {display:none; width: 100%; height: 0%; padding-bottom: 74%; position: relative;} .ifmob {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid white;} @media (max-width: 900px) { .beiwrap {display: none;} .ifmobcont, .headingm {display: block;} } /*Anpassung der A4 Slides auf Bildschirmhöhe*/ #zusafram, #visifram, #kennifram {height: 100vh;} .item img {height: 95vh;} /*Formatierung SEKTION 6 (Planer)*/ @media (max-width: 1200px) { #onplan, #plan, #planhr, #pla, .noplanmob {display: none;} } .plat { margin-top: 50px; border: 50px solid white; outline: 3px solid black; border-radius: 18px; margin-bottom: 120px; } .plat:hover {cursor: pointer;} .planwrap { box-sizing: content-box; position: relative; /* widt:1100px; */ width:1500px; max-width: 100%; /* heig: 1236px; */ height: 760px; /* bor: 1px solid gainsboro; */ border: 1px solid gray; border-radius: 8px; box-shadow: 4px 4px 25px rgba(0,0,0,.8); /*statt 3*/ background-color: white; /* background-imag: url('http://www.schule-im-aufbruch.at/wp-content/uploads/ver_ele_2.jpg'); */ } #planer.sectionwrap {padding: 0px !important} .planwrap2 { box-sizing: content-box; position: relative; width: 1566px; height: 815px; border: 1px solid transparent; border-radius: 8px; box-shadow: 4px 25px 25px rgba(0,0,0,.3); /* background-color: white; */ background-image: url('http://www.schule-im-aufbruch.at/wp-content/uploads/planer_bg_modal_01.gif'); background-repeat: no-repeat; background-color: white; } .planwrap2>div { display: flex; justify-content: center; align-items: center; box-sizing: content-box; height: 33px; width: 420px; background-size: 100% 100%; border-radius: 8px; background-color: #999; box-shadow: 3px 3px 8px rgba(0,0,0,.4); margin: 3px 5px; color: white; font-size: 18px; } .planwrap2:hover {cursor: -webkit-grab; cursor: grab;} .planwrap2 > div:hover {cursor: -webkit-grab; cursor: grab;} #div01 {position: absolute; left:6px; top:138px;} #div02 {position: absolute; left:6px; top:171px;} #div03 {position: absolute; left:6px; top:204px;} #div04 {position: absolute; left:6px; top:237px;} #div05 {position: absolute; left:6px; top:270px;} #div06 {position: absolute; left:6px; top:303px;} #div07 {position: absolute; left:6px; top:336px;} #div08 {position: absolute; left:6px; top:369px;} #div09 {position: absolute; left:6px; top:402px;} #div10 {position: absolute; left:6px; top:435px;} #div11 {position: absolute; left:6px; top:468px;} #div12 {position: absolute; left:6px; top:501px;} #div13 {position: absolute; left:6px; top:534px;} #div14 {position: absolute; left:6px; top:567px;} #div15 {position: absolute; left:6px; top:600px;} #div16 {position: absolute; left:6px; top:633px;} #div17 {position: absolute; left:1130px; top:39px;} #div18 {position: absolute; left:1130px; top:72px;} #div19 {position: absolute; left:1130px; top:105px;} #div20 {position: absolute; left:1130px; top:138px;} #div21 {position: absolute; left:1130px; top:171px;} #div22 {position: absolute; left:1130px; top:204px;} #div23 {position: absolute; left:1130px; top:237px;} #div24 {position: absolute; left:1130px; top:270px;} #div25 {position: absolute; left:1130px; top:303px;} #div26 {position: absolute; left:1130px; top:336px;} #div27 {position: absolute; left:1130px; top:369px;} #div28 {position: absolute; left:1130px; top:435px;} #div29 {position: absolute; left:1130px; top:468px;} #div30 {position: absolute; left:1130px; top:501px;} #div31 {position: absolute; left:1130px; top:534px;} #div32 {position: absolute; left:1130px; top:567px;} #div33 {position: absolute; left:1130px; top:600px;} #div34 {position: absolute; left:1130px; top:633px;} #div35 {position: absolute; left:1130px; top:666px;} #div36 {position: absolute; left:1130px; top:699px;} #div37 {position: absolute; left:1130px; top:732px;} #div38 {position: absolute; left:1130px; top:765px;} #div01, #div02, #div03, #div04, #div05, #div06, #div07, #div08, #div09, #div10, #div11, #div12, #div13, #div14, #div15, #div16 {background-color: var(--yel);} #div17, #div18,#div19, #div20, #div21, #div22, #div23, #div24, #div25, #div26, #div27 {background-color: var(--blu);} #div28, #div29, #div30, #div31, #div32, #div33, #div34, #div35, #div36, #div37, #div38{background-color: var(--gre);} /* cursor: -webkit-grab; cursor: grab; */ /*Formatierung SEKTION 3 (Download)*/ /*Gesamte Box*/ .downl { display: flex; flex-direction: column; } /*Reihen*/ .downl div { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin: 15px 0; } .downl > div {min-height: 170px;} @media (max-width: 700px) { .downl div { flex-flow: row wrap; } } a img.lin { box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); border-radius: 7px;} /*Einrichten der Bilder in Reihe 2 - 4*/ .downl div:nth-child(2) img, .downl div:nth-child(3) img, .downl div:nth-child(4) img { box-sizing: content-box; margin-left: 20px; } /*Bild Spalte*/ .downl div div:first-child { width: 50%; display: flex; flex-direction: row; justify-content: center; } @media (max-width: 700px) { .downl div div:first-child { width: 85%; } } /*Button-Spalte*/ .downl div div:nth-child(2) { display: flex; flex-direction: row; justify-content: flex-start; width: 500px; max-width: 90vw; padding: 0 30px; } a.anmd:hover {text-decoration: underline;} /* .ansm {height: 50px !important; padding: 10px 35px 10px 35px !important;} */ .answ {height: 50px !important; padding: 5px 35px 10px 35px !important;} @media (max-width: 500px) { .ansm {height: 100% !important} } .downl div div:nth-child(2) a { text-align: center; display: block; width: 360px;} a .urr:hover {text-decoration: underline;} .downl img {max-height: 163px; } /*Formatierung SEKTION 4 (Erfahrungen)*/ .erfwrap { /* position: relative; */ max-width: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; border: 0px solid blue; } .erfwrap > div { width: 370px; max-width: 100%; border: 0px solid red; margin: 2vw 4vw; } .erfwrap img {position: relative; margin-top: -35px;} .erfwrap img {position: relative; margin-top: -35px;} .ifr iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .erf { height: 36px; background-color: var(--yel); color: floralwhite; font-size: 21px; font-weight: bold; border-radius: 8px; /* box-shadow: 2px 2px 8px rgba(100, 100, 100, 0.5); -moz-box-shadow: 2px 2px 8px rgba(100, 100, 100, 0.5); -webkit-box-shadow: 2px 2px 8px rgba(100, 100, 100, 0.5); */ text-decoration: none; padding: 3px 17px 6px 17px; background-size: 100% 100%; margin: 24px 0 10px 0; text-align: center; } .erfy {border-bottom: 1px solid var(--yel);} .erfb {border-bottom: 1px solid var(--blu);} .erfg {border-bottom: 1px solid var(--gre);} .erf:hover {box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.2); color: white !important; text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);} .erft {margin: 0 0 35px 8px;} /*Formatierung SEKTION 5 ("Und Jetzt?" - Steps)*/ .ujef { font-weight: bold; letter-spacing: .5px; font-size: 110%; text-shadow: 0 0 3px rgba(0,0,0,.1); text-decoration: none !important; } .ujef:hover {text-decoration: none;} .ves {vertical-align: sub; font-size: 170%;} .steps div {text-align: center;} .steps {display: flex; flex-flow: row wrap; justify-content: center;} .steps>div {width: 19.8%; min-width: 180px; display: flex; flex-direction: column; padding: 10px;} @media (max-width: 1100px) {.steps>div {min-width: 24%;}} @media (max-width: 1050px) {.steps>div {min-width: 33%;}} @media (max-width: 970px) {.steps>div {min-width: 50%;}} @media (max-width: 900px) {.steps>div {min-width: 100%; margin-bottom:30px;}} .steps>div>div:first-child { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 5px auto 10px auto; width: 90px; height: 50px; border-radius: 50%; color: floralwhite; font-family: Consolas, Helvetica, Sans Serif, Verdana; font-size: 200%; font-weight: bold; box-shadow: 3px 3px 14px rgba(0,0,0,.3); } .steps>div>div:nth-child(2) {font-size: 120%; font-weight: bold; text-align: center;} .steps>div:first-child div:first-child {background-color: var(--blu); margin-top: 160px;} .steps>div:nth-child(2) div:first-child {background-color: #b10054; margin-top: 120px;} .steps>div:nth-child(3) div:first-child {background-color: var(--gre); margin-top: 80px;} .steps>div:nth-child(4) div:first-child {background-color: var(--yel); margin-top: 40px;} .steps>div:nth-child(5) div:first-child {background-color: #b10054; margin-top: 0px;} @media (max-width: 970px) { .steps>div:first-child div:first-child {margin-top: 35px;} .steps>div:nth-child(2) div:first-child {margin-top: 35px;} .steps>div:nth-child(3) div:first-child {margin-top: 35px;} .steps>div:nth-child(4) div:first-child {margin-top: 35px;} .steps>div:nth-child(5) div:first-child {margin-top: 35px;} } .steps>div:first-child div:nth-child(2) {color: var(--blu);} .steps>div:nth-child(2) div:nth-child(2){color: var(--ras);} .steps>div:nth-child(3) div:nth-child(2) {color: var(--gre);} .steps>div:nth-child(4) div:nth-child(2) {color: var(--yel);} .steps>div:nth-child(5) div:nth-child(2) {color: var(--ras);} .steps>div div:nth-child(2) {margin-top: 10px;} .steps>div div:nth-child(4) {text-align: left;} .steps ul {list-style: unset; margin-left: -10px;} .steps ul li {margin-bottom: 15px;} .steps, .steps div {border: 0px dotted blue;} .steps {display: flex; flex-flow: row wrap; justify-content: center;} .steps>div {width: 19.8%; min-width: 180px; display: flex; flex-direction: column; padding: 10px 25px; max-width: 90px;} @media (max-width: 1100px) {.steps>div {min-width: 24%;}} @media (max-width: 1050px) {.steps>div {min-width: 33%;}} @media (max-width: 970px) {.steps>div {min-width: 50%;}} @media (max-width: 900px) {.steps>div {min-width: 100%;}} /*Gesamtcontainer für Fragenblöcke*/ .frag {display: flex; flex-flow: row-reverse wrap; justify-content: center; color: floralwhite;} /*Einzelner länglicher Container*/ .frag>div {width: 30%; display: flex; flex-direction: column; border-radius: 18px; margin: 0 7px 0 7px; border: 3px solid black;} .frag>div:first-child {background-color: var(--ras);} .frag>div:nth-child(2) {background-color: var(--gre);} .frag>div:nth-child(3) {background-color: var(--blu);} /*weisser block mit Symbol*/ .frag>div>div:first-child {height: 180px; background-color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 18px 18px 0 0;} /*erster farbiger Block mit Titel*/ .frag>div>div:nth-child(2) {font-size: 120%; font-weight: bold; text-align: center; text-transform: uppercase; padding: 35px 20px 20px; } /*zweiter farbiger Block mit Punkten*/ .frag>div>div:nth-child(3) ul {list-style: inside; text-align: left; padding:10px 20px 0 25px; flex: 0 1 auto;} /*dritter farbiger Block mit Hinweis*/ .frag>div>div:nth-child(4) ul {/* margin:0 10px; */ padding: 10px 20px; text-align: left;} /*Formatierung SEKTION 5a (Fragen 1)*/ #fragentab {display: none;} .nopadding-bottom {padding: 3vw 3vx 0vw 3vw !important;} .nopadding-both {padding: 0vw 3vw 0vw 3vw !important;} .nopadding-top {padding: 0vw 3vw 3vw 3vw !important;} .frag a.anmel-g { padding: 16px 35px 18px 35px; height: auto;} @media (max-width: 700px) { .frag>div {min-width: 80%;} .frag>div>div:first-child {height: 150px; padding-top:35px;} .frag>div:first-child>div:first-child {padding-top:0px;} .nopadding-both {padding: 0vw 0vw 0vw 0vw !important;} .frag > div {width: 100%;} .modalcontent .sectionwrap {padding: 0vw;} #fragentab .nopadding-top {padding: 0vw 0vw 3vw 0vw !important;} } @media (max-width: 400px) { .frag>div>div:nth-child(3) {height: 160px;} .frag>div:nth-child(3)>div:first-child {height: 180px;} #fragentab .nopadding-top {padding: 0vw 0vw 3vw 0vw !important;} } .frag>div>div:nth-child(4) {padding: 0 20px 30px;} .frag ul li {margin-bottom: 10px;} /* .frag > div + div {border-radius: 8px 8px 0 0;} */ /*Formatierung SEKTION 5b (Fragen 2)*/ .sprach { box-sizing: border-box; display: flex; flex-direction: column; margin: auto; background-color: var(--gre); padding: 30px 20px 20px 20px; width: 900px; max-width: 95%; color: floralwhite; border-radius: 8px; box-shadow: 4px 4px 20px rgba(0,0,0,.3); } .sprach div {outline: 0px solid white; background-color: var(--gre);} .sprach > div {display: flex; flex-flow: row wrap;} .sprach > div div {padding: 1%;} .sprach > div div:first-child {width: 30%; align-items: center; font-size: 120%;} .sprach > div div:nth-child(2) {width: 70%;} @media (max-width: 430px) { .sprach > div div:first-child {width: 42%; font-size: 110%;} .sprach > div div:nth-child(2) {width: 58%;} } div.sprach img {margin-top: 25px;} .ebutta {border: 1px solid gray; height: 100px; width: 160px; border-radius: 8px; display: flex; justify-content: center; align-items: center;} /*Formatierung SEKTION 7 Unterstuetzung Tabellen*/ /*Unterstützung Tabelle*/ .uwrap {margin-bottom: 80px !important; box-sizing: border-box; display:flex; flex-flow:column nowrap; width: 1200px; max-width: 100%;} .uline{display: flex; flex-flow: row nowrap; align-items: stretch;} .line01, .line11 {padding: 0 0 0 0; height: 50px; margin-bottom: 23px; color: white; font-weight: bold; font-size: 150%;} /*Überschriftenleisten mit farbigem Hintergrund versehen*/ .line01 div {background-color: var(--blu); color: white;} .line11 div {background-color: var(--gre); color: white;} /*Borderlinie unter den Überschriftenleisten entfernen*/ .ul01.f2, .ul01.f3, .ul11.f2, .ul11.f3 {border-bottom: 0px solid gainsboro;} /*Wien, Steiermark und Oberösterreich Titel nach unten verschieben*/ .ul02.f1, .ul06.f1, .ul10.f1 {position: relative; margin-bottom: -64px;} .wien, .steiermark , .oberoesterreich{display: block; position: relative;} /*Kärnten dritte Zelle für zwei EInträge vorbereiten*/ .ul08.f3 {flex-direction: column; align-items: flex-start; justify-content: center;} .kae {line-height: 22px;} /*Braucehn wir das zur Formatierung der Kärnten Adressen?*/ /* NEIN. .ul08.f3 span {display: block; text-align: center;} */ /*Obere Ecken an den Überschriftenleisten abrunden*/ .ul01.f1, .ul11.f1 {border-top-left-radius: 18px; border-bottom-left-radius: 18px;} .ul01.f3, .ul11.f3 {border-top-right-radius: 18px; border-bottom-right-radius: 18px;} /*Alle einzelnen Zellen ohne Margin und mit Höhe 70 formatieren*/ .f1, .f2, .f3 {margin: 0; height: 70px;} /*Erste Spalte für die Ländernamen formatieren*/ .f1 {width:25%; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; font-weight: bold; font-weight: 110%; padding-right: 25px;} /*Zwischenlinien in der ersten Spalte selektiv zuweisen*/ .f2, .f3, .ul03.f1,.ul04.f1,.ul05.f1,.ul07.f1,.ul08.f1,.ul10a.f1,.ul11a.f1,.ul12.f1,.ul13.f1,.ul15.f1,.ul16.f1 {border-bottom: 1px solid gainsboro;} /*Zweite Spalte für die Logos, sowie Logobilder formatieren*/ .f2 {width: 17%; display: flex; flex-direction: column; align-items: center; justify-content: center;} .f2 img { width: 100px !important; height: 35px !important; box-shadow: 0 0 20px rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); border-radius: 3px;} /*Dritte Spalte für die Namen udn Adressen formatieren*/ .f3 {width:70%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;} .f3 strong {color: var(--blu);} /*Ränder der Titel aufbauen*/ #unterstuetzunge.sectiontitel, #unterstuetzung .sectiontitel {padding-left: 40px; padding-right: 40px;} .linex, .liney {display: none; width: 100%; height: 70px; text-align: center; color: white; box-shadow: 3px 3px 14px rgba(0,0,0,.3); border-radius: 8px; padding: 21px; font-size: 120%;} .linex {background-color: var(--blu);} .liney {background-color: var(--gre);} @media (max-width: 630px) { /*Am Handy wird alles in Zeilen gelegt*/ .uline {flex-flow: column nowrap; width: 100%;} /*Ausblenden der ersten beiden Spalten der Titelleiste am handy*/ .line01, .line11 {display: none;} .linex, .liney {display: block;} /*Formatieren der dritten Spalte der Titelleiste am Handy*/ /* .ul01.f3, .ul11.f3 {width: 100%; line-height: 50px; border-radius: 8px; color: white;} .ul01.f3 {background-color: var(--blu) !important; background: var(--blu) !important;} .ul11.f3 {background-color: var(--gre) !important; background: var(--gre) !important;} */ /*Brauchen wir das??*/ .ul02.f1, .ul06.f1 {margin-bottom: 0px;} .ul08.f2 img {margin-bottom: 0px;} .ul03.f1, .ul07.f1 {margin: 0 !important; padding: 0; height: 30px !important;} .uwrap a{white-space: nowrap;} /*Spalten usw. auf Seitnbreite usw bringen*/ .f1 {width:100%; height: 40px !important; justify-content: center; font-size: 120%; padding-left: 0; margin-left: 0; padding-right: 0; margin-bottom: 27px; margin-top: 70px !important; border-bottom: 0px solid gainsboro !important;} .f2, .f3 {width:100%; border-bottom: 0px solid gainsboro;} .f3 {flex-direction: column; margin-bottom: 25px;} /*Formatieren der dritten Spalte der Titelleiste am Handy II*/ .ul01.f3, .ul11.f3 {width: 100%; line-height: 50px; border-radius: 8px; color: white;} .ul01.f3 {background-color: var(--blu) !important; background: var(--blu) !important;} .ul11.f3 {background-color: var(--gre) !important; background: var(--gre) !important;} div#paemobil {background-color: var(--blu) !important; background: var(--blu) !important;} div#landmobil {background-color: var(--gre) !important; background: var(--gre) !important;} .wien, .steiermark {margin-bottom: 0px;} } /**=======================Unterstützung NEU===============================*/ .hilfecontainer {display: flex; flex-direction: column; width: 100%; padding: 0 50px !important;} .ueberschrift {font-weight: bold;} .row {display: flex; width: 100%;} .blank {max-height: 35px;} .cell1, .cell2, .cell3 {padding: 10px; box-sizing: border-box; border: 0px dotted gainsboro;} .cell1 {flex: 2; font-weight: bold;} .cell2 {flex: 1.5; padding: 4px;} .cell3 {flex: 12;} .cell2 img {float: left; max-height: 40px;} @media (max-width: 900px) { .ueberschrift {display: none;} .row {flex-direction: column;} .cell1, .cell2, .cell3 {flex: 1; text-align: center;} .cell2 img {float: none; max-height: 50px;} .cell1, .cell3 {padding: 0px;} div.blank {min-height: 60px;} .ctilt {max-height: 5px;} } /*Footer*/ .folog img {margin: 25px auto; width: 1100px; max-width: 90vw;} .folog {text-align: center; width: 100%;} .folog1 {padding-top: 33px;} .folog2 {font-size: 80%;} .folog3 {margin-top: 20px;} .folog3 img {width: 36vw; min-width: 220px; max-width: 400px;} #foooter {background-color: gainsboro; width: 100vw; max-width: 100%; display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center; margin-bottom: 0px; padding: 70px 0;} #foowrap {width: 1000px; max-width: 90vw; color: #3c3b3b;} #foowrap, #footwrap div {text-align: center;} #dat, #imp, #konta {margin-bottom: 25px;} #impplus, #datplus, #kontaplus {font-size: 85%; margin: 40px; text-align: left;} .footwrap {display: flex; flex-direction: row; width: 1400px; max-width: 100%; padding: 0 30px;} .foo1, .foo2, .foo3, .foo4 {display: flex; flex-direction: column; width: 25%;} .fo a {color: black;} .fo {border: 0px solid black; padding: 5px 20px 5px 7px;} .fo0 {font-weight: bold; padding: 10px 7px 10px;} @media (max-width: 600px) { .footwrap {display: flex; flex-direction: column; width: 100%;} .foo1, .foo2, .foo3, .foo4 {width: 100%;} .fo0 {padding: 35px 20px 5px 7px; font-size: 120%;} } li#menu-item-951, li#menu-item-728, li#menu-item-723, li#menu-item-7854 {line-height:22px !important;} /*=====ELTERN Ende Übertrag aus dem alten stylesheet======*/ .elttotal { position: relative; width: 100%; } .eltmenu { position: fixed; top: 0; left: 0; width: 100%; background: #287ca1; z-index: 1000; padding: 10px 0; text-align: center; } .page-id-39 .eltmenu { width: 300px; right: 0; background: #ea4c86; border-radius: 0 0 18px 18px; } .eltmenu a { margin: 0 10px; font-size: 16px; color: #000; text-decoration: none; } .beibei { display: none; } .beimm { display: none; } #menub { display: none; position: fixed; top: 10px; right: 10px; font-size: 24px; color: #000; text-decoration: none; } .sectionwrap { padding: 40px 0; max-width: 1200px; margin: 0 auto; } .startimg { width: 100%; height: auto; } .no { margin: 0; } .worum { margin: 40px 0; } .wowas { display: table; width: 100%; max-width: 800px; margin: 0 auto; } .woimg { display: table-cell; width: 50%; background: url(/wp-content/themes/sia/images/woimg.jpg) no-repeat center center; background-size: cover; } .wozit { display: table-cell; vertical-align: middle; width: 50%; padding: 20px; font-size: 18px; line-height: 1.5; } .apos { display: inline-block; width: 20px; height: 20px; vertical-align: middle; } .wower { text-align: right; font-size: 16px; margin: 10px 0 0 0; } .wimg1 { text-align: center; } .mappi { margin: 0 auto; } .uno, .due, .tre { cursor: pointer; } .wwrap { text-align: center; margin: 20px 0; } /* .greene, .bluee, .gelbe { width: 100px; height: 100px; margin: 0 10px; } */ .beiwrap { margin: 40px 0; } .headingc { font-size: 24px; font-weight: bold; text-align: center; margin: 0 0 20px 0; } /* .thuu { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0; } */ .thumbsc1, .thumbsc2, .thumbsc3 { margin: 0 10px; padding: 10px; /* background: #f5f5f5; */ cursor: pointer; } .slif { width: 100%; height: 450px; border: none; } .ifmobcont { max-width: 100%; padding: 20px 0; } .ifmob { width: 100%; height: 400px; border: none; } .headingm { font-size: 20px; font-weight: bold; text-align: center; margin: 20px 0; } .downl { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0; } .downl div { margin: 0 20px; text-align: center; } .lin { width: 100px; height: auto; } .anmd { display: block; margin: 10px 0; font-size: 16px; text-decoration: none; } .ansm { color: #000; } .anmel-y { color: #FFC107; } .anmel-yw { color: #FFC107; } .anmel-r { color: #E30613; } .anmel-g { color: #009440; } .erfwrap { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0; } .ifr { width: 400px; height: 200px; background: #000; } .erf { font-size: 18px; font-weight: bold; margin: 10px 0; } .erfy { color: #FFC107; } .erfg { color: #009440; } .erft { font-size: 14px; } /* .steps { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0; } */ /* .steps div { width: 200px; margin: 0 20px; text-align: center; } */ /* .steps div div:nth-child(1) { width: 40px; height: 40px; border-radius: 50%; background: #003087; color: #fff; line-height: 40px; font-size: 20px; font-weight: bold; margin: 0 auto 10px; } */ /* .steps div div:nth-child(2) { font-size: 16px; font-weight: bold; margin: 0 0 10px 0; } .steps div img { width: 100px; height: auto; margin: 10px 0; } .ves { font-size: 18px; margin: 0 5px; } .g { color: #009440; } .y { color: #FFC107; } .r { color: #E30613; } */ .ujef { font-weight: bold; } .openmodal { cursor: pointer; text-decoration: underline; } .modalcontent-p { background: transparent; max-width: 90%; margin: 50px auto; padding: 20px; position: relative; } .closemodal-x { position: absolute; top: 0px; right: 20px; font-size: 50px; cursor: pointer; color: var(--typ); z-index: 10000; } .frag { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0; gap: 18px,;} /* .frag div { width: 200px; margin: 0 20px; text-align: center; } */ .frag div div:nth-child(1) img { width: 100px; height: auto; } .frag div div:nth-child(2) { font-size: 150%; font-weight: bold; margin: 10px 0; } .sprach { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0; } .sbut {border: 3px solid white; border-radius: 18px; padding: 12px;} #sprachknopf:hover {cursor: pointer;} .sprach div { width: 300px; margin: 0 20px; text-align: center; } .sprach div div:nth-child(1) { font-size: 16px; font-weight: bold; margin: 0 0 10px 0; } .sprach div div:nth-child(1) img { width: 90px; height: auto; margin: 10px 0; } .aligncenter { display: block; margin: 0 auto; } /* .planwrap2 { display: flex; flex-wrap: wrap; justify-content: center; margin: 20px 0; } .planwrap2 div { width: 200px; margin: 10px; padding: 10px; background: #f5f5f5; cursor: move; } */ /* .plat { width: 200px; height: auto; margin: 20px auto; } */ .folog { text-align: center; } /* .folog1 img { width: 100%; height: auto; } */ .folog2 { font-size: 16px; margin: 10px 0; } .folog3 img { width: 520px; max-width: 80vw; height: auto; } .footwrap { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0; } .foo1, .foo2, .foo3, .foo4 { width: 250px; margin: 0 20px; } .fo { margin: 10px 0; } .fo0 { font-weight: bold; } .fo a { color: white; text-decoration: none; } #imp, #dat, #konta { font-size: 24px; font-weight: bold; margin: 0 0 20px 0; } #impplus, #datplus, #kontaplus { font-size: 16px; line-height: 1.5; } .nopadding-bottom { padding-bottom: 0; } .nopadding-both { padding: 0; } .nopadding-top { padding-top: 0; } .uwrap { max-width: 800px; margin: 0 auto; } .linex, .liney { font-size: 20px; font-weight: bold; margin: 20px 0; } .uline { display: flex; align-items: center; margin: 10px 0; } .ul01, .ul02, .ul03, .ul04, .ul05, .ul06, .ul07, .ul08, .ul10, .ul10a, .ul11, .ul11a, .ul12, .ul13, .ul15, .ul16 { flex: 1; } .f1 { width: 150px; } .f2 { width: 100px; } .f2 img { width: 80px; height: auto; } .f3 { flex: 2; } .wien, .steiermark, .oberoesterreich { font-weight: bold; } /* @media only screen and (max-width: 767px) { .eltmenu { display: none; } */ .eltmenu.active { display: block; position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 1000; padding: 20px 0; } .eltmenu a { display: block; margin: 10px 0; text-align: center; } @media (max-width: 786px) { #men {font-size: 180%; padding: 18px 0 20px 0;} #men a {margin: 0px 0;} .page-id-37 #start {margin-top: 10px !important;} } .beibei { display: inline-block; } #menub { display: block; } .sectionwrap { padding: 20px 10px; } .wowas { display: block; } .woimg { display: none; } .wozit { display: block; width: 100%; padding: 10px; } .wimg1 img { width: 100%; } .wwrap { display: none; } .beimm { display: inline-block; margin: 0 10px; } /* .downl { display: block; } .downl div { margin: 0; } .erfwrap { display: block; } */ .ifr { width: 100%; margin: 0 0 20px 0; } /* .steps { display: block; } .steps div { width: 100%; margin: 20px 0; } */ .frag { display: block; } /* .frag div { width: 100%; margin: 20px 0; } */ .sprach { display: block; } .sprach div { width: 100%; margin: 20px 0; } .planwrap2 { display: block; } /* .planwrap2 div { width: 100%; margin: 10px 0; } */ .uwrap { display: block; } /* .uline { display: block; margin: 20px 0; } */ .ul01, .ul02, .ul03, .ul04, .ul05, .ul06, .ul07, .ul08, .ul10, .ul10a, .ul11, .ul11a, .ul12, .ul13, .ul15, .ul16 { margin: 10px 0; } .f1 { width: 100%; } .f2 { width: 100%; text-align: center; } .f3 { width: 100%; } .footwrap { display: block; } .foo1, .foo2, .foo3, .foo4 { width: 100%; margin: 20px 0; } /*(neue Formatierung des ELTERN-Footers:*/ .fo { border: none; color: var(--whi); background: transparent; transition: all 0.1s ease; font-size: 14px; text-decoration: none; padding-left: 20px; background: url('/wp-content/themes/sia-oe/images/pfeil_wx.png') no-repeat left center; background-size: auto; background-size: 23px; display: inline-block; text-transform: uppercase; font-weight: 600;} .fo0 a { font-weight: 600; color: var(--whi); text-transform: uppercase; text-decoration: none; display: block; margin-bottom: 10px; font-size: clamp(18px, calc(18px + (22 - 18) * (100vw - 1600px) / (1920 - 1600)), 22px); } /*===============================Potenzialentfaltung=================================*/ .gridcontainer {width: 100%; padding: 1rem; box-sizing: border-box;} .gridpot {display: flex; flex-wrap: wrap; gap: 4rem;} .full-width {width: 100%;} .gridpot div {flex: 1 1 100%;} .gridpot div[style*="background-image"] {min-height: 300px; border-radius: 18px;} .ball { width: 40px; height: 40px; border-radius: 50%; color: #fff; text-align: center !important; line-height: 40px; font-size: 20px; font-weight: bold; } @media (max-width: 700px) { .gridpot div {text-align: left;} .ball {text-align: center !important;} .rig {float: left;} .lef {float: left;} } @media (min-width: 700px) { .gridpot div {flex: 1 1 calc(50% - 2rem);} .gridpot div:nth-child(odd) {text-align: right;} .gridpot div:nth-child(even) {text-align: left;} .rig {float: right;} .lef {float: left;} } .abteilen {display: none;} @media (max-width: 450px) { .abteilen {display: inline-block;} } .abteilen-1 {display: none;} @media (max-width: 590px) { .abteilen-1 {display: inline-block;} } .abteilen-2 {display: none;} @media (max-width: 540px) { .abteilen-2 {display: inline-block;} } /*=============================FREI DAY LANDINGPAGE============================*/ .page-id-39 .site-header, .page-id-39 .site-footer, .page-id-39 .site-content-contain {display: none !important;} /*================== Menubutton zurück zur Startseite =====================*/ .freimenucontainer {text-align: center; width: 260px; position: absolute; top: -30px; right: 5px; height: 50px; background-color: transparent;} .freimenu { display: flex; justify-content: center; align-items: center; margin: auto; height: 48px; width: 200px; background-color: transparent; border: 0px solid black; border-radius: 23px; } .freimenu a {color: var(--whi); text-decoration: none; } /*Gesamte Seite*/ .freidaytotal { position: absolute; width: 100%; max-width: 100%; top: 0px; left: 0px; display: flex; flex-direction: column; margin-top: 0px; box-sizing: border-box; } .fdblock, .fditem, .subfditem { width: 100%; max-width: 100vw; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; } .subfditemc {width: 25%;} @media (max-width: 830px) { .subfditemc {width: 90vw; max-width: 90vw;} } /*Jeder Block über die Seitenbreite*/ .fdblock { width: 100vw; min-width: 100vw; max-width: 100vw;} /*Ihnalt pro Block zentriert Maximal*/ .fditem {width: 1300px; max-width: 1300px; } @media (max-width: 500px) { .fditem {max-width: 90vw;} } /*Subitems des Inhalts*/ .subfditem {justify-content: flex-start; gap: 1vw;} /*--------Rosa Block - Header mit FREI DAY Logo --------*/ .fdrosa {background-color: #ea4c86; height: 400px; max-height: 45vw;} /*--------Weißer Block -----(padding: 3vw 0 3.5vw; max-width: 89vw;)---*/ .fdwhite {background-color: white; min-height: 600px; justify-content: flex-start;} .subfditemwh {font-size: 150%; padding: 3vw 0 3.5vw} @media (max-width: 500px) { .subfditemwh {font-size: 130%; padding: 5vw 0;} } /*--------Erklärung--------*/ /* @media (max-width: 500px) { .fder {width: 100vw;} } */ /*--------Vier Spalten--------*/ .fdcolumns {flex-direction: row; align-items: flex-start; gap: 1vw; max-width: 90vw;} .fdcolpic {text-align: center; margin-bottom: 10px;} .fdcolpic, .fdcoltext {flex:1;} .fdcolue {display: inline-block; font-size: 95%; font-weight: bold; letter-spacing: 1px; margin-bottom: 18px;} .fdcoltext {position: relative; padding: 24px; max-width: 100vw; } .gbtext {min-height: 250px; width: 100%; max-width: 90vw; } .gruenborder {position: absolute; border-radius: 12px 0 0 0; border-top: 2px solid #b9c494; border-left: 2px solid #b9c494; height: 270px; top: 0; left: 0; width: 100%; max-width: 90vw; } @media (max-width: 830px) { .fdcolumns {flex-direction: column; max-width: 90vw;} .fdcoltext {width: 600px; margin: auto;} .gbtext {max-width: 80vw;} .fdform {margin-bottom: 28px;} } /*--------Video --------*/ .fdvideo {background-color: #b3496d;} .freivid {border-radius: 12px; max-width: 96vw; width: 900px; height: 506px;} @media (max-width: 700px) { .freivid {width: 450px; height: 253px;} } /*--------Grüner Block-----(padding: 3vw 0 3.5vw; max-width: 89vw;)---*/ .fdgreen {background-color: #94c11e; font-size: 150%; max-width: 90vw; padding: 3vw 0;} .subfditemsm {font-size: 150%;} /*--------Formular--------*/ .fdform {background-color: #b3496d;} .fdformular {height: auto; margin: 2.4vw 0; color: black; max-width: 90vw;} /*--------Blauer Block--------*/ .fdblue {background-color: #5c6b8c;} .fdblu {flex-wrap: wrap; justify-content: space-between; width: 100%; min-width: 250px; margin: 0 auto; padding: 20px; box-sizing: border-box;} .contfd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; max-width: 1700px; min-width: 250px; margin: 0 auto; padding: 20px; box-sizing: border-box;} .text-field { flex: 1 1 160px; text-align: center; font-size: 1.5rem; font-weight: bold; padding: 10px; min-width: 150px; display: inline-block; color: white; } .logofd { height: 140px; width: auto; margin: 0 15px; object-fit: contain; display: inline-block; border-radius: 13px; } /* Responsive Design für kleinere Bildschirme */ @media screen and (max-width: 1300px) { .contfd { justify-content: space-around; gap: 10px; } .logofd { margin: 7px 10px; } } @media screen and (max-width: 500px) { .contfd { flex-direction: column; align-items: center; gap: 20px; } .text-field { flex: 1 1 100%; margin-bottom: 20px; } .logofd { margin: 7; height: 100px; } } .fdlo {height: 178px; width: 300px; background-size: contain; } /*--------Dunkelrosa Block--------*/ .fddrosa {background-color: #b3496d;} @media (max-width: 500px) { .subfditemsm {font-size: 130%;} .fdgreen {padding: 8vw 0; margin: 0 0 30px; } .fdformular {margin-bottom: 30px;} } /*--------------------Follow us!-----------------*/ .contfol { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1300px; min-width: 250px; margin: 0 auto; padding: 20px; box-sizing: border-box; } .flex-wrapperfol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; max-width: 650px; /* 250px + 120px + 250px */ } .left-divfol { width: 250px; height: 120px; /* Für vertikale Zentrierung */ color: white; display: flex; justify-content: flex-end; align-items: center; padding-right: 20px; font-size: 1.5rem; font-weight: bold; margin: 0; } .center-divfol { width: 100px; height: 120px; display: flex; justify-content: center; align-items: center; margin: 0; } .center-divfol img { width: 70px; height: 70px; object-fit: contain; } .right-divfol { width: 250px; height: 120px; color: white; display: flex; justify-content: flex-start; align-items: center; padding-left: 12px; font-size: 1.5rem; font-weight: bold; margin: 0; } @media screen and (max-width: 500px) { .flex-wrapperfol { flex-direction: column; gap: 15px; } .left-divfol, .center-divfol, .right-divfol { width: 100%; max-width: 250px; /* Begrenzt die Breite für Konsistenz */ } .left-divfol { justify-content: center; /* Optional: Zentriert Text für bessere mobile Ansicht */ padding-right: 0; } .right-divfol { justify-content: center; /* Optional: Zentriert Text für bessere mobile Ansicht */ padding-left: 0; } } /*================================Publikationen=============================*/ .category-43 main, .single-post main {width: 1200px; max-width: 90vw; margin: auto;} .category-43 .widget-area, .single-post .widget-area {display: none;} .category-43 .entry-meta, .single-post .entry-meta {display: none;} .category-43 .cat-links, .single-post .cat-links {display: none;} .category-43 .post-navigation, .single-post .post-navigation {display: none;} .category-43 .comments-area, .single-post .comments-area {display: none;} article.post img {border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); border: 1px solid gainsboro;} .category-43 .entry-content, .single-post .entry-content {padding-top: 0px;} .category-43 .entry-title a:hover {text-decoration: none;} .category-43 .page-header {margin-bottom: 120px;} .single-post .entry-title y, .single-post .entry-title r, .single-post .entry-title gr, .single-post .entry-title bl {color: white !important;} .comments-link {display: none;} /*================================KINO=============================*/ .page-id-27 iframe {width: 100%; height: 210px;} .kinotitel {display: flex; font-size: 120%; font-weight: bold; height: 70px; align-items: center; justify-content: center; margin: 15px 0; text-align: center; } .kinoschule {background-color: var(--yel); color: var(--whi); font-weight: bold; border-radius: 28px;text-decoration: none; padding: 9px 20px; margin: 20px 0; text-align: center; height: 57px; min-height: 57px; display: flex; justify-content: center; align-items: center;} div.mbt1>em {display:inline-block; height: 45px; vertical-align: bottom;} .ifr { position: relative; padding-bottom: 56.25%; overflow: hidden; height: 0; border-radius: 4px; margin-top: 20px; } .page-id-27 .ifr {width: 100%; max-width: 373.333px; padding-bottom: 210px; margin-left: auto; margin-right: auto;} .mbt1 img { position: relative; margin-top: -35px; } @media only screen and (min-width: 1200px) and (max-width: 1380px) { .mbt1 img {scale: 1.3; margin-top: -18px;} } @media only screen and (min-width: 690px) and (max-width: 950px) { .mbt1 img {width: 600px; margin-top: -65px;} .page-id-27 .ifr {max-width: 600px; padding-bottom: 325px;} } @media only screen and (max-width: 690px) { .mbt1 img {scale: 1.3} } .gra {margin-top: 20px !important; font-weight: bold !important;} .ifr .play { height: 80px; width: 80px; left: 85%; top: 75%; margin-left: -40px; margin-top: -40px; position: absolute; background: url("/wp-content/themes/sia-oe/images/go1.png") no-repeat; cursor: pointer; } /*===================Häufige Fragen===============*/ .faq {color: white; font-size: 25px; font-weight: bold; padding: 15px 26px; border-radius: 0 clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px) clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px) 0; display: inline-block; max-height: 65px; position: relative;} .faq-1 {background-color: var(--ras);} .faq-2 {background-color: var(--yel);} .faq-3 {background-color: var(--gre);} .faq-4 {background-color: var(--blu);} .faq-5 {background-color: var(--ras);} .faq-6 {background-color: var(--yel);} .faq-7 {background-color: var(--gre);} .harr {font-size: 30px; display: inline-flex; transform: rotate(0deg); transition: transform 0s ease; border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px) 0 0 clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); height: 66px; width: 66px; left: 1px; justify-content: center; align-items: center; position: relative; top: 2px; color: white;} .harr:hover {transform: rotate(90deg); border-radius: 0 0 clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px) clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); left: 1px;} .hf-text {margin-left: 60px; padding: 25px 32px; border: 3px solid black; border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); margin-bottom: 40px; width: 500px; max-width: 90vw;} /*----- Höhe der Zeilen-----*/ .uk-scope .uk-accordion-title::before {height: 65px; background-image: none !important; width: 0em; height: 0em; margin-left: 0px;} /*====================NEWSLETTER============================*/ .page-id-47 [type="checkbox"], [type="radio"] { margin-right: 12px; border: 3px solid red; } .page-id-47 main {width: 100% !important; max-width: 100vw !important; margin: 0 !important; } .page-id-47 .entry-title {width: 88%; max-width: 1200px; margin: 40px auto;} .page-id-47 input.required { width: 88%; } .page-id-47 #mc_embed_signup div.mce_inline_error {background-color: var(--ras);} @media only screen and (max-width: 1377px) { .page-id-25 .faq {max-height: inherit !important; border-radius: 15px;} .harr {display: none;} .hf-text {margin-left: inherit; max-width: 70vw;} .uk-accordion-title {margin-bottom: 15px;} .page-id-25 .top-bg {height: 300px;} } /*====================LANDKARTE============================*/ .page-id-29 main {width: 100% !important; max-width: 100vw !important; margin: 0 !important; } .page-id-29 .entry-title {width: 88%; max-width: 1200px; margin: 40px auto;} .page-id-29 .cont-wrap-karte {height: auto; margin-top: -80px;} /* .page-id-29 .cont.karte {margin-bottom: -100px;} */ .tabelle {width: 88%; max-width: 88vw; margin: auto auto 150px auto;} /*===============MULTI SCHULEN=========================*/ #b-container {display: flex; flex-flow: row nowrap; justify-items: center; gap: 20px; padding: 20px 0;} @media screen and (max-width: 500px){ #b-container {flex-flow: row wrap;} } /*=================================KALENDER und PADLET=======================================*/ .termin-akkordeon {display: block; margin-top: 50px; margin-bottom: 30px;} .padl {border: 7px solid white; outline:clamp(2px, calc(2px + (3 - 2) * (100vw - 1600px) / (1920 - 1600)), 3px) solid var(--bla); border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); margin-bottom: 100px; padding-bottom: 20px;} /*==============Mobile Ansicht desaktivieren==================*/ /* @media only screen and (max-width: 768px) { body { display: none; } body.logged-in { display: block; } } */ /*====================*Bildschirmbreiten Label===========================*/ /* .seitenbreite {width: 140px; height: 70px; background: gray; color:white; padding: 12px; position: fixed; top: 320px; right: 0px; border: 1px solid black; display: none; opacity: .75; font-size: 18px;} .logged-in .seitenbreite {display: block;} @media only screen and (max-width: 768px) { .seitenbreite::before {content: 'unter 768px'} .seitenbreite {background: rgb(70, 127, 176)} } @media only screen and (min-width: 769px) and (max-width: 900px) { .seitenbreite::before {content: '769px bis 900px'} .seitenbreite {background: rgb(75, 113, 75)} } @media only screen and (min-width: 901px) and (max-width: 1600px) { .seitenbreite::before {content: '901px bis 1600px'} .seitenbreite {background: rgb(201, 120, 28)} } @media only screen and (min-width: 1601px) and (max-width: 1920px) { .seitenbreite::before {content: '1601px bis 1920px'} .seitenbreite {background: rgb(52, 81, 209)} } @media only screen and (min-width: 1921px) { .seitenbreite::before {content: 'über 1920px'} .seitenbreite {background: rgb(215, 35, 65)} } */ /* Safari macOS + Chrome macOS: Submenü bleibt offen, wenn man auf einen Untermenü-Link klickt */ .main-navigation ul li.menu-item-has-children:focus-within > ul, .main-navigation ul li.page_item_has_children:focus-within > ul, .main-navigation ul li.menu-item-has-children.focus > ul, .main-navigation ul li.page_item_has_children.focus > ul { display: flex !important; left: auto !important; } /*=========================TEST===========================*/ .akkordeon { max-width: 1600px; margin: 40px auto; } /* Grid für den Inhalt */ .akk-inhalt-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; } .akkordeon-item.open .akk-inhalt-grid { grid-template-rows: 1fr; } /* ==================== TITEL ==================== */ /* Ruhezustand (geschlossen + kein Hover) */ .akk-titel { height: clamp(45px, calc(45px + (54 - 45) * (100vw - 1600px) / (1920 - 1600)), 54px); width: fit-content; padding: 0 30px; margin: 15px 0; border-radius: clamp(15px, calc(15px + (18 - 15) * (100vw - 1600px) / (1920 - 1600)), 18px); /* Hell am Anfang */ background-color: white; color: black; border: 3px solid black; font-size: 150%; display: flex; justify-content: flex-start; align-items: center; cursor: pointer; user-select: none; /* Sanfte Übergänge für alles */ transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* Hover-Zustand (egal ob offen oder geschlossen) → rot */ .akk-titel.akk-ras:hover {background-color: var(--ras); color: white; border-color: var(--ras);} /* Geöffneter Zustand → bleibt rot (auch ohne Hover) */ .akkordeon-item.open .akk-titel.akk-ras {background-color: var(--ras); color: white; border-color: var(--ras);} /* Hover-Zustand (egal ob offen oder geschlossen) → grün */ .akk-titel.akk-gre:hover {background-color: var(--gre); color: white; border-color: var(--gre);} /* Geöffneter Zustand → bleibt grün (auch ohne Hover) */ .akkordeon-item.open .akk-titel.akk-gre {background-color: var(--gre); color: white; border-color: var(--gre);} /* Hover-Zustand (egal ob offen oder geschlossen) → blau */ .akk-titel.akk-blu:hover {background-color: var(--blu); color: white; border-color: var(--blu);} /* Geöffneter Zustand → bleibt blau (auch ohne Hover) */ .akkordeon-item.open .akk-titel.akk-blu {background-color: var(--blu); color: white; border-color: var(--blu);} /* Hover-Zustand (egal ob offen oder geschlossen) → orange */ .akk-titel.akk-yel:hover {background-color: var(--yel); color: white; border-color: var(--yel);} /* Geöffneter Zustand → bleibt orange (auch ohne Hover) */ .akkordeon-item.open .akk-titel.akk-yel {background-color: var(--yel); color: white; border-color: var(--yel);} /* ==================== PFEIL ==================== */ .akk-pfeil { width: 17px; height: 17px; margin-right: 13px; transition: transform 0.4s ease, filter 0.35s ease; /* Start: schwarz + 45° */ transform: rotate(45deg); filter: brightness(0); } /* Hover über Titel → weiß + 135° */ .akk-titel:hover .akk-pfeil { transform: rotate(135deg); filter: brightness(0) invert(1); } /* Wenn Item offen → bleibt weiß + 135° */ .akkordeon-item.open .akk-pfeil { transform: rotate(135deg); filter: brightness(0) invert(1); } /* Hover während offen → kurz zurück: schwarz + 45° */ .akkordeon-item.open .akk-titel:hover .akk-pfeil { transform: rotate(45deg); filter: brightness(0); } /* ==================== INHALT ==================== */ .akk-inhalt { min-height: 0; overflow: hidden; padding: 0 27px; margin: 0; border: 3px solid transparent; border-radius: 18px; font-size: 140%; color: black; background: white; transition: padding 0.5s ease, margin 0.5s ease, border-color 0.1s ease; } .akkordeon-item.open .akk-inhalt { padding: 30px; /* margin: 30px; */ /* border: 3px solid black; */ max-width: 800px; }