/*
Theme Name: KJP Luebbenau Editor 2.3
Theme URI: https://karstenpaetz.de
Author: Karsten Paetz
Description: Ruhiges, mobiles Onepager-Theme fuer Kinder- und Jugendlichenpsychotherapie Luebbenau mit harmonisierter Typografie. Inhalte bleiben vollständig im normalen WordPress-Block-Editor bearbeitbar.
Version: 2.3
License: GNU General Public License v2 or later
Text Domain: kjp-luebbenau-editor
*/

html{
scroll-behavior:smooth;
scroll-padding-top:82px;
}

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
color:#263238;
line-height:1.68;
font-size:16px;
background:#fff;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}

.kjp-page,
.kjp-page *{
box-sizing:border-box;
}

.kjp-page{
--blue:#12385A;
--green:#4F7A3A;
--light:#F6F9FB;
--purple:#9B4B86;
--sky:#3C8DBC;
--yellow:#F3C84D;
--orange:#F28A35;
--text:#263238;
--muted:#5F6B73;
--line:#DCE5EB;
--soft-blue:#EDF4F8;
--soft-orange:#FFF7EA;
width:100%;
max-width:100%;
}

.kjp-page > *{
margin-block-start:0;
margin-block-end:0;
}

.kjp-page section,
.kjp-page .kjp-section{
max-width:940px;
margin:0 auto;
padding:58px 22px;
scroll-margin-top:96px;
}

.kjp-copy{
max-width:730px;
margin-left:auto!important;
margin-right:auto!important;
}

/* Navigation */
.kjp-nav{
position:sticky;
top:0;
z-index:9999;
background:rgba(255,255,255,.96);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid rgba(18,56,90,.10);
box-shadow:0 2px 10px rgba(0,0,0,.035);
text-align:center;
padding:10px 12px;
white-space:nowrap;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}

.kjp-nav::-webkit-scrollbar{
display:none;
}

.kjp-nav a{
display:inline-block;
margin:2px 13px;
color:var(--blue);
text-decoration:none;
font-weight:600;
font-size:.94rem;
line-height:1.5;
}

.kjp-nav a:hover,
.kjp-nav a:focus-visible{
color:var(--green);
}

/* Hero */
.kjp-hero{
text-align:center;
background:#fff;
padding:62px 20px 48px!important;
max-width:940px;
margin:0 auto;
}

.kjp-logo,
.custom-logo,
.kjp-logo-block{
max-width:270px;
width:78%;
height:auto;
margin:0 auto 22px;
display:block;
}

.kjp-logo-block img{
width:100%;
height:auto;
display:block;
}

.kjp-hero h1{
max-width:760px;
margin:0 auto;
color:var(--blue);
font-family:inherit;
font-size:2rem;
font-weight:650;
letter-spacing:-.022em;
line-height:1.16;
overflow-wrap:anywhere;
hyphens:auto;
}

.kjp-hero .kjp-subline{
color:var(--green);
letter-spacing:.015em;
text-transform:none;
font-size:.95rem;
font-weight:600;
margin:12px 0 0;
}

.kjp-hero .kjp-intro{
max-width:680px;
margin:20px auto 0;
color:var(--muted);
font-size:1.04rem;
}

.kjp-accent{
width:210px;
max-width:65%;
height:5px;
margin:26px auto 0;
border-radius:99px;
background:linear-gradient(90deg,var(--purple),var(--sky),var(--yellow),var(--orange));
}

/* Buttons */
.kjp-actions,
.kjp-contact-actions{
display:flex!important;
flex-wrap:wrap;
justify-content:center;
gap:10px!important;
margin-top:26px!important;
}

.kjp-actions .wp-block-button,
.kjp-contact-actions .wp-block-button{
margin:0!important;
}

.kjp-actions .wp-block-button__link,
.kjp-contact-actions .wp-block-button__link{
border-radius:999px;
padding:11px 19px;
font-weight:650;
font-size:.95rem;
text-decoration:none;
transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.kjp-actions .wp-block-button__link{
background:var(--blue);
color:#fff;
box-shadow:0 4px 14px rgba(18,56,90,.16);
}

.kjp-actions .is-style-outline .wp-block-button__link{
background:#fff;
color:var(--blue);
border:1.5px solid var(--blue);
box-shadow:none;
}

.kjp-actions .wp-block-button__link:hover,
.kjp-contact-actions .wp-block-button__link:hover{
transform:translateY(-1px);
}

.kjp-actions .wp-block-button__link:focus-visible,
.kjp-contact-actions .wp-block-button__link:focus-visible,
.kjp-nav a:focus-visible,
.kjp-footer a:focus-visible{
outline:3px solid rgba(60,141,188,.35);
outline-offset:3px;
}

/* Sichtbarkeitsschalter fuer vorbereitete Hinweise.
   Die Klasse bleibt im WordPress-Editor bearbeitbar,
   wird aber auf der oeffentlichen Website ausgeblendet. */
.kjp-page .kjp-hidden{
display:none!important;
}

/* Aktueller Praxishinweis */
.kjp-status-wrap{
max-width:none!important;
width:100%;
background:var(--soft-orange);
padding:0!important;
border-top:1px solid #F1D5B8;
border-bottom:1px solid #F1D5B8;
}

.kjp-status{
max-width:760px;
margin:0 auto;
padding:16px 22px;
text-align:center;
color:#5D4632;
font-size:.96rem;
}

.kjp-status p{
margin:0;
}

/* Sections */
.kjp-light{
background:var(--light);
max-width:none!important;
width:100%;
}

.kjp-inner{
max-width:940px;
margin:0 auto;
}

.kjp-page h2{
color:var(--blue);
font-family:inherit;
font-size:1.62rem;
font-weight:650;
letter-spacing:-.018em;
line-height:1.22;
margin-top:0;
margin-bottom:22px;
border-bottom:2px solid rgba(18,56,90,.11);
padding-bottom:9px;
overflow-wrap:anywhere;
hyphens:auto;
}

.kjp-page h3{
color:var(--blue);
font-size:1.08rem;
font-weight:650;
letter-spacing:-.008em;
line-height:1.34;
margin-top:0;
margin-bottom:8px;
overflow-wrap:anywhere;
hyphens:auto;
}

.kjp-page p,
.kjp-page li{
overflow-wrap:anywhere;
hyphens:auto;
}

.kjp-lead{
font-size:1.05rem;
color:#3D4A52;
max-width:730px;
}

/* Karten */
.kjp-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px!important;
margin-top:24px;
}

.kjp-grid > *{
margin:0!important;
min-width:0;
}

.kjp-box{
background:#fff;
padding:22px 21px;
border:1px solid var(--line);
border-radius:14px;
border-top:5px solid var(--sky);
box-shadow:0 4px 16px rgba(18,56,90,.045);
}

.kjp-box:nth-child(2){
border-top-color:var(--purple);
}

.kjp-box:nth-child(3){
border-top-color:var(--orange);
}

.kjp-box p:last-child{
margin-bottom:0;
}

.kjp-diagnostik-grid .kjp-box{
border-top-width:1px;
border-left:5px solid var(--sky);
}

.kjp-diagnostik-grid .kjp-box:nth-child(2){
border-left-color:var(--purple);
}

.kjp-diagnostik-grid .kjp-box:nth-child(3){
border-left-color:var(--green);
}

/* Ablauf */
.kjp-steps{
list-style:none;
padding:0!important;
margin:26px 0 0!important;
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
counter-reset:kjp-step;
}

.kjp-steps li{
counter-increment:kjp-step;
position:relative;
background:#fff;
border:1px solid var(--line);
border-radius:12px;
padding:45px 14px 15px;
text-align:center;
font-size:.91rem;
line-height:1.4;
}

.kjp-steps li::before{
content:counter(kjp-step);
position:absolute;
top:12px;
left:50%;
transform:translateX(-50%);
width:25px;
height:25px;
border-radius:50%;
background:var(--blue);
color:#fff;
display:grid;
place-items:center;
font-weight:650;
font-size:.82rem;
}

.kjp-wartezeit{
max-width:730px;
margin:20px auto 0;
text-align:center;
color:var(--muted);
font-size:.94rem;
}

/* Kontakt */
.kjp-contact{
background:var(--blue);
color:#fff;
padding:34px;
border-radius:16px;
border-top:6px solid var(--green);
box-shadow:0 8px 24px rgba(18,56,90,.14);
}

.kjp-contact h2{
color:#fff;
border-bottom:1px solid rgba(255,255,255,.24);
}

.kjp-contact a{
color:#fff;
font-weight:700;
}

.kjp-contact .kjp-contact-actions .wp-block-button__link{
background:#fff;
color:var(--blue);
}

.kjp-contact .kjp-contact-actions .is-style-outline .wp-block-button__link{
background:transparent;
color:#fff;
border:1.5px solid rgba(255,255,255,.85);
}

.kjp-region{
margin-top:22px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.18);
font-size:.91rem;
color:rgba(255,255,255,.88);
}

/* Urlaub */
#urlaub{
max-width:none!important;
background:var(--soft-orange);
border-top:1px solid #F3D2B5;
border-bottom:1px solid #F3D2B5;
scroll-margin-top:96px;
}

#urlaub .kjp-inner{
max-width:940px;
margin:0 auto;
padding:50px 22px;
}

#urlaub.kjp-urlaub-editor .kjp-inner{
padding:0;
}

#urlaub h2{
color:var(--blue);
border-bottom:2px solid rgba(242,138,53,.30);
}

.kjp-urlaub-list{
columns:2;
column-gap:44px;
padding-left:20px;
max-width:720px;
}

.kjp-urlaub-note{
background:#fff;
border-left:5px solid var(--orange);
padding:16px 18px;
margin-top:22px;
border-radius:8px;
max-width:760px;
}

.kjp-urlaub-note p:first-child{
margin-top:0;
}

.kjp-urlaub-note p:last-child{
margin-bottom:0;
}

/* Rechtliches bewusst visuell nachgeordnet */
.kjp-legal{
max-width:760px!important;
padding-top:40px!important;
padding-bottom:40px!important;
font-size:.9rem;
color:#4E5A61;
}

.kjp-legal h2{
font-size:1.35rem;
}

.kjp-legal p{
margin-top:.7em;
margin-bottom:.7em;
}

/* Footer */
.kjp-footer{
text-align:center;
padding:26px 18px 34px;
border-top:1px solid #ddd;
font-size:.86rem;
color:#5D6870;
background:#fff;
}

.kjp-footer a{
color:var(--blue);
text-decoration:none;
margin:0 6px;
}

body.admin-bar .kjp-nav{
top:32px;
}

@media screen and (max-width:782px){
body.admin-bar .kjp-nav{
top:46px;
}
}

@media(max-width:780px){
.kjp-grid{
grid-template-columns:1fr;
}

.kjp-steps{
grid-template-columns:1fr;
max-width:620px;
margin-left:auto!important;
margin-right:auto!important;
}

.kjp-steps li{
text-align:left;
padding:14px 15px 14px 50px;
}

.kjp-steps li::before{
left:23px;
top:50%;
transform:translate(-50%,-50%);
}
}

@media(max-width:650px){
html{
scroll-padding-top:74px;
}

.kjp-page section,
.kjp-page .kjp-section{
padding:42px 18px;
scroll-margin-top:82px;
}

.kjp-nav{
text-align:left;
padding:9px 8px;
}

.kjp-nav a{
font-size:.91rem;
margin:2px 10px;
}

.kjp-hero{
padding:46px 18px 38px!important;
}

.kjp-logo,
.custom-logo,
.kjp-logo-block{
max-width:220px;
}

.kjp-hero h1{
font-size:1.43rem;
line-height:1.22;
}

.kjp-hero .kjp-subline{
font-size:.82rem;
letter-spacing:.9px;
}

.kjp-hero .kjp-intro{
font-size:.98rem;
line-height:1.55;
}

.kjp-actions,
.kjp-contact-actions{
flex-direction:column;
align-items:stretch;
}

.kjp-actions .wp-block-button,
.kjp-contact-actions .wp-block-button{
width:100%;
}

.kjp-actions .wp-block-button__link,
.kjp-contact-actions .wp-block-button__link{
display:block;
width:100%;
text-align:center;
}

.kjp-status{
padding:14px 18px;
font-size:.91rem;
}

.kjp-page h2{
font-size:1.32rem;
}

.kjp-page h3{
font-size:1.04rem;
}

.kjp-page p,
.kjp-page li{
font-size:.97rem;
}

.kjp-box{
padding:19px;
}

.kjp-contact{
padding:25px 20px;
border-radius:13px;
}

.kjp-urlaub-list{
columns:1!important;
}

#urlaub .kjp-inner{
padding:42px 18px;
}

#urlaub.kjp-urlaub-editor .kjp-inner{
padding:0;
}
}