/*
Theme Name: jugendberatung
Theme URI:
Description:
Author:
Author URI:
Template: generatepress
Version: 0.1
*/
/* THEME TWEAKS */
/* Header padding with responsive clamp */
.site-header {
padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}
.site-content .content-area {
width: 100%;
}
/* Typography wrapping */
/* Balance headings and elements with `.balance` class */
:is(h1, h2, h3, h4, h5, h6),
.balance {
text-wrap: balance;
}
/* Use pretty wrapping for body text elements */
p,
blockquote,
li {
text-wrap: pretty;
}
ol, ul.liste, ul.wp-block-list {
margin: 0 0 0 1em ;
}
ul:not(#menu-footer1):not(#menu-footer2):not(#menu-footer3):not(#menu-hauptmenue) {
}
ul:not(#menu-footer1):not(#menu-footer2):not(#menu-footer3):not(#menu-hauptmenue) li {
line-height: clamp(25px, 24.1818px + 0.2273vw, 30px);
padding-bottom: clamp(5px, 2.6923px + 0.641vw, 15px);
line-height: clamp(22px, 20.8462px + 0.3205vw, 27px);
}
ul.liste, ul.wp-block-list {
list-style: none;
padding: 0;
}
ul.liste li, ul.wp-block-list li {
--bullet-color: #e6701c; /* Standardfarbe */
--bullet-size: 16px; /* Standardgröße */
position: relative;
padding-left: 30px;
margin-bottom: 5px;
}
ul.liste li::before, ul.wp-block-list li::before {
content: "";
position: absolute;
left: 0;
top: 14px;
transform: translateY(-50%);
/* Runder Punkt */
width: var(--bullet-size);
height: var(--bullet-size);
background-color: var(--bullet-color);
border-radius: 50%;
}
ul.liste li:hover::before, ul.wp-block-list li:hover::before {
background-color:#920b55;
}
/* Remove bottom margin from final paragraph */
p:last-child:last-of-type {
margin-bottom: 0px;
}
/* UTILITIES */
/* Line Clamping */
.line-limit-3,
.line-limit-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-limit-3 {
-webkit-line-clamp: 3;
}
.line-limit-2 {
-webkit-line-clamp: 2;
}
/* Visually Hidden (accessible to screen readers) */
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* Smooth Transition Utility */
.transition {
transition: all 0.25s ease-in-out;
}
/* GP MENU ACCESSIBILITY TWEAKS */
#site-navigation ul.sub-menu {
display: block;
}
#site-navigation li:hover .gp-icon svg {
transform: rotate(180deg);
}
#site-navigation li:hover .sub-menu {
visibility: visible;
}
/*
STRETCH LINK (from Bootstrap)
Source: https://youtu.be/HBriBrnRlQE?si=DLiSXEiBHt6lw91l
Note: Only use ONE link per card or this breaks!
*/
.stretch-link {
position: relative;
}
.stretch-link a::after {
content: '';
position: absolute;
inset: 0;
}
.stretch-link a:is(:focus-visible)::after {
outline: 2px solid;
}
.stretch-link a:is(:hover, :focus) {
outline: none;
}
/* CONTAINER WRAPPER */
.site-wrapper {
margin-inline: auto;
}
/* TYPOGRAPHY */
/* Font Family Utilities */
.ff-body {
font-family: var(--gp-font--open-sans);
}
.ff-heading {
font-family: var(--gp-font--nunito);
}
/* Heading and utility class font assignment */
h1, h2, h3, h4, h5, h6,
[class^="fs-"] {
font-family: var(--gp-font--nunito);
color: var(--brand-secondary);
}
:root {
--fluid-body-font: clamp(18px, 17.0568px + 0.262vw, 24px); /* 18 - 24px */
--fluid-body-font: clamp(1.125rem, 1.0673rem + 0.2564vw, 1.375rem); /* 18 - 22px */
}
body {
font-size: var(--fluid-body-font);
}
h1, .fs-h1 {
font-size: clamp(3.75rem, 2.1635rem + 7.0513vw, 10.625rem); /* 60 - 170px */
line-height: clamp(55px, 36.5385px + 5.1282vw, 135px);
}
h2, .fs-h2 {
font-size: clamp(2.1875rem, 1.9318rem + 1.1364vw, 3.75rem); /* 35 - 60px */
line-height: clamp(2.5rem, 2.2955rem + 0.9091vw, 3.75rem); /* 40 - 60px */
font-weight: 800;
}
h3, .fs-h3 {
font-size: clamp(2.1875rem, 2.075rem + 0.5vw, 2.875rem); /* 35 - 46px */
line-height: clamp(2.25rem, 2.1068rem + 0.6364vw, 3.125rem); /* 36 - 50px */
font-weight: 300;
}
p, .fs-p {
font-size: var(--fluid-body-font);
font-weight: 400;
}
/* Navigation */
.pill {
align-items: center;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-top-style: solid;
border-top-width: 1px;
color: var(--neutral-700);
display: inline-flex;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.25s ease-in-out 0s;
border-radius: 100vw;
padding: .5em 1.5em;
}
body {
background: #FF8822;
background: linear-gradient(90deg,rgba(255, 136, 34, 1) 0%, rgba(227, 28, 137, 1) 100%);
background: radial-gradient(circle,rgba(255, 136, 34, 1) 52%, rgba(227, 28, 137, 1) 87%);
background: linear-gradient(90deg,rgba(255, 136, 34, 1) 30%, rgba(227, 28, 137, 1) 87%);
}
@media screen and (max-width: 768px) {
body {
background: radial-gradient(circle,rgba(227, 28, 137, 1) 0%, rgba(255, 136, 34, 1) 100%);
background: linear-gradient(100deg,rgba(255, 136, 34, 1) 30%, rgba(227, 28, 137, 1) 87%);
}
}
/* Header Navigation */
.logo_small {
display: none !important;
}
.scrolldown .logo_small {
display: block !important;
}
.scrolldown .logo_big {
display: none !important;
}
@media screen and (max-width: 771px) {
.logo_small {
display: block !important;
}
.logo_big {
display: none !important;
}
}
.gb-site-header {
align-items: center;
color: var(--neutral-0);
display: flex;
justify-content: space-between;
position: fixed;
top: 0px;
width: 100%;
z-index: 100000;
padding: 0px clamp(1rem,0.848rem + 0.758vw,1.5rem) 16px clamp(1rem,0.848rem + 0.758vw,1.5rem);
}
@media screen and (max-width: 768px) {
.gb-site-header {
padding-left: 10px;
padding-right: 10px;
}
}
.scrolldown .header_inner {
margin-top: 10px;
border-radius: 100px;
}
.scrolldown #menu-hauptmenue li a {
padding-bottom: 0;
padding-top: 0;
line-height: 1.8;
}
.scrolldown .header_inner {
padding: 10px 30px;
padding: 10px clamp(10px,-4.5946px + 1.3514vw,30px);
}
.gb-menu-toggle--clone {
display: none !important;
}
.gb-menu-container--mobile {
padding-top: 25px;
}
:where(.gb-menu-container--mobile) {
bottom: auto !important;
}
.gb-menu-container--mobile ul li {
font-size: clamp(1.5625rem, 1.2868rem + 1.2255vw, 1.875rem);
}
.gb-menu-container--mobile ul li a {
padding: 15px 0px !important;
margin-left: 15px;
margin-right: 15px;
}
.gb-menu-container--mobile ul li:not(:last-child) a {
border-bottom: 2px solid var(--brand-secondary);
}
button:hover, button:focus {
background-color: transparent;
}
.gb-submenu-toggle {
margin-right: 5px;
font-size: 35px;
}
@media screen and (max-width: 768px) {
/* Mobile Navigation Styles */
.menu-item-has-children ul.sub-menu {
}
.gb-sub-menu--open a {
border-bottom: none !important;
}
.gb-sub-menu--open ul li a {
padding-left: 10px !important;
}
.gb-sub-menu--open ul li:last-child a {
border-bottom: 2px solid var(--brand-secondary) !important;
padding-bottom: 40px !important;
}
}
.gb-menu-link {
position: relative;
}
/* hover Effekt menu */
@media screen and (min-width: 768px) {
@media (hover: hover) {
:is(#menu-hauptmenue li:hover)::before {
opacity: 1;
transform: scale(1);
}
}
@media (hover: hover) {
#menu-hauptmenue li:active::before {
transition-duration: .2s,.1s;
transform: scale(.9) !important;
}
}
.current_page_item::before {
opacity: 1 !important;
transform: scale(1) !important;
}
#menu-hauptmenue > li::before {
content: "";
background-color: white;
transition-property: transform,opacity;
transition-duration: .4s,.1s;
transition-timing-function: cubic-bezier(.17,.67,.3,1.33),cubic-bezier(.5,0,0,1);;
opacity: 0;
border-radius: 50px;
position: absolute;
inset: 0;
transform: scale(.8);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
}
}
/* Header Navigation ENDE */
:root {
--spacing-fluid-xs: clamp(.5rem, .4565rem + .2174vw, .625rem);
--spacing: .25rem;
--menu-bar-height: calc(var(--spacing)*16);
}
.hero-home {
padding-top: clamp(3.125rem, 2.7159rem + 1.8182vw, 5.625rem); /* 50 - 90px */
}
#menu-footer1 li, #menu-footer2 li, #menu-footer3 li {
opacity: 1 !important;
}
.footer_inner {
background-position: right bottom;
background-repeat: no-repeat;
background-size: clamp(25.5rem, 14.9318rem + 33.6364vw, 68.75rem);
background-image: url('data:image/svg+xml;utf8,');
}
.footer_box_1 {
background-position: clamp(230px, 211.1354px + 5.2402vw, 350px) clamp(120px, 118.4279px + 0.4367vw, 130px);
background-repeat: no-repeat;
background-size: clamp(80px, 98.7273px + 5.9091vw, 200px);
/*
background-size: clamp(120px, 98.7273px + 5.9091vw, 250px);
background-image: url('data:image/svg+xml;utf8,');
background-image: url('data:image/svg+xml;utf8,');
*/
}
/* Slider */
.gb-carousel-control--next { right: -26px;}
.gb-carousel-control--previous { left: -26px; }
.gb-carousel-control--next,
.gb-carousel-control--previous {
position: absolute;
transform: translateY(-50%);
z-index: 20;
}
/* Slider Ende */
/* CSS für die Hand Animation */
#hand {
filter: drop-shadow(4px 0px 2px rgba(0,0,0,0.4));
cursor: pointer;
transition: filter 0.3s ease; /* Fallback für Browser ohne GSAP */
}
#donation {
width: 220px;
height: auto;
margin-top: -60px;
}
/* CSS für die Hand Animation ENDE */
/* Button get in Touch */
a.btn_getInTouch {
background-color: var(--gelb);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
backface-visibility: hidden;
width: 160px;
height: 160px;
top: 80%;
right: 2rem;
overflow-x: hidden;
overflow-y: hidden;
background-image: url(/wp-content/uploads/2026/02/smiley-3.svg);
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-box-shadow: 0px 0px 18px -2px rgba(0,0,0,0.38);
box-shadow: 0px 0px 18px -2px rgba(0,0,0,0.38);
transition: all .3s ease-out;
z-index: 10000;
}
.btn_getInTouch {
align-items: center;
background-color: var(--orange);
flex-direction: column;
flex-wrap: wrap;
height: 158px;
justify-content: flex-end;
position: absolute;
right: 30px;
top: 130px;
width: 158px;
z-index: 1000000;
border-radius: 50%;
}
a.btn_getInTouch:hover {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
box-shadow: none;
background-color: white;
}
.btn_getInTouch_typo .gb-icon {
line-height: 0;
color: var(--accent);
}
.btn_getInTouch_typo .gb-icon svg {
width: 160px;
height: 160px;
fill: #e31c89;
}
@media screen and (max-width: 768px) {
.btn_getInTouch {
xdisplay: none !important;
}
}
@media screen and (max-width: 1080px) {
a.btn_getInTouch {
transform: scale(0.8); /* Verkleinert auf 80% */
transform-origin: top left; /* Optional: Ursprungspunkt festlegen */
right: -1rem;
}
a.btn_getInTouch:hover {
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
}
}
/* Button get in Touch ENDE */
.opening {
}
.opening table {
width: 80%;
border-collapse: collapse;
font-family: inherit;
border: none;
}
/* Visuell versteckte Caption für Screenreader */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Header ausblenden, aber für Screenreader verfügbar */
.opening thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
border: none;
}
/* Zebra-Streifen mit ausreichendem Kontrast (WCAG AA) */
.opening tbody tr:nth-child(odd) {
background-color: rgba(0,0,0,0.02); /* Hellgrau */
}
.opening tbody tr:nth-child(even) {
background-color: rgba(255,255,255,0.35); /* Weiß */
}
.opening td,
.opening th {
padding: 0.25rem 1rem;
vertical-align: top;
border: none;
}
/* Erste Spalte (Wochentage) optional hervorheben */
.opening td:first-child {
font-weight: 600;
}
/* Hover-Effekt für bessere Interaktion */
.opening tbody tr:hover {
background-color:rgba(255,255,255,0.65);;
}
/* Fokus-Styles für Tastaturnavigation */
.opening:focus-within {
outline: 2px solid rgba(0,0,0,0.08);
outline-offset: 2px;
}
/* OPen Maps Iframe Seite Termine */
.openMaps_iframe iframe {
border: none;
line-height: 1;
margin: 0;
max-width: 100%;
width: 100%;
}
/* Über uns Pulldown Abstand */
header.scrolldown .gb-element-e5662f2a {
margin-top: 23px !important;
}