/* Webbaukasten – Inhalts-Elemente, Unterseiten, Social Media, Teilen */

/* Unterseiten */
.wbk-subpages ul { list-style: none; margin: 0; padding: 0; }
.wbk-subpages--liste ul { display: grid; gap: .6rem; }
.wbk-subpages--liste li a {
	display: flex; flex-direction: column; gap: .2rem; padding: 1rem 3rem 1rem 1.2rem; position: relative; text-decoration: none; color: inherit;
	border: var(--wbk-card-border, 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent));
	border-radius: var(--wbk-radius, 10px); background: var(--wbk-card-bg, var(--wp--preset--color--base));
	transition: border-color .15s, transform .15s;
}
.wbk-subpages--liste li a::after { content: "→"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--wp--preset--color--primary); font-weight: 700; }
.wbk-subpages--liste li a:hover, .wbk-subpages--liste li a:focus-visible { border-color: var(--wp--preset--color--primary); transform: translateX(3px); }
.wbk-sp-title { font-weight: 700; font-size: 1.08em; color: var(--wp--preset--color--contrast); }
.wbk-sp-text { font-size: .95em; color: var(--wp--preset--color--contrast-2, inherit); }

.wbk-subpages--karten ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(1rem, 2.5vw, 1.6rem); }
.wbk-sp-card { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.wbk-sp-card h3 { margin: 0; font-size: var(--wp--preset--font-size--large, 1.25rem); }
.wbk-sp-card h3 a { color: inherit; text-decoration: none; }
.wbk-sp-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wbk-sp-card p { margin: 0; }
.wbk-sp-card:focus-within { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }
.wbk-sp-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--primary-soft, #e4eef5); color: var(--wp--preset--color--primary); }
.wbk-sp-more { margin-top: auto; font-weight: 700; color: var(--wp--preset--color--primary); }

.wbk-subpages--bildtext ul { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.wbk-sp-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 4vw, 3rem); align-items: center; }
.wbk-sp-row.is-flipped .wbk-sp-media { order: 2; }
.wbk-sp-media img, .wbk-sp-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wbk-img-radius, var(--wbk-radius, 12px)); display: block; }
.wbk-sp-ph { display: grid; place-items: center; background: var(--wp--preset--color--primary-soft, #e4eef5); color: var(--wp--preset--color--primary); }
.wbk-sp-body h3 { margin: 0 0 .6rem; font-size: var(--wp--preset--font-size--x-large, 1.6rem); }
.wbk-sp-body p { margin: 0 0 1.1rem; }
@media (max-width: 700px) {
	.wbk-sp-row { grid-template-columns: 1fr; }
	.wbk-sp-row.is-flipped .wbk-sp-media { order: 0; }
}
.wbk-subpages-empty { padding: 1rem; border: 1px dashed #c3c4c7; border-radius: 8px; color: #50575e; }

/* Social-Media-Kanäle */
.wbk-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wbk-social a { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; color: var(--wp--preset--color--primary); text-decoration: none; transition: transform .15s, background .15s, color .15s; }
.wbk-social--kreis a, .wbk-social--quadrat a { width: 42px; height: 42px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary, #fff); }
.wbk-social--kreis a { border-radius: 50%; }
.wbk-social--quadrat a { border-radius: calc(var(--wbk-radius, 10px) * .6); }
.wbk-social--schlicht a { width: 36px; height: 36px; }
.wbk-social--text a { padding: .45rem .9rem; border: 1px solid currentColor; border-radius: 999px; font-weight: 600; font-size: .92em; }
.wbk-social a:hover, .wbk-social a:focus-visible { transform: translateY(-2px); }
.wbk-band .wbk-social--kreis a, .wbk-band .wbk-social--quadrat a { background: var(--wp--preset--color--on-primary); color: var(--wp--preset--color--primary); }
.wbk-band .wbk-social--schlicht a, .wbk-band .wbk-social--text a { color: inherit; }

/* Teilen */
.wbk-share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.wbk-share-label { font-weight: 700; }
.wbk-share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.wbk-share a, .wbk-share button {
	display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px; font: inherit; font-size: .9em; font-weight: 600; cursor: pointer;
	background: var(--wp--preset--color--base-2, #f2f4f7); color: var(--wp--preset--color--contrast); border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent); text-decoration: none;
}
.wbk-share a:hover, .wbk-share button:hover, .wbk-share a:focus-visible, .wbk-share button:focus-visible { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary, #fff); border-color: transparent; }
@media (max-width: 600px) { .wbk-share a span, .wbk-share button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wbk-share a, .wbk-share button { padding: .6rem; } }
.wbk-band .wbk-share a, .wbk-band .wbk-share button { background: rgba(255,255,255,.14); color: inherit; border-color: rgba(255,255,255,.3); }

/* Elemente */
.wbk-el .wp-block-image img { border-radius: var(--wbk-img-radius, var(--wbk-radius, 12px)); box-shadow: var(--wbk-img-shadow, none); }
.wbk-el > .wp-block-heading + .wp-block-buttons, .wbk-el > p + .wp-block-buttons { margin-top: 1.4rem; }
.wbk-media-card .is-style-wbk-card { padding: clamp(1.4rem, 3vw, 2.2rem); }
.wbk-glossary { list-style: none; padding-left: 0; }
.wbk-glossary li { padding: .6rem 0; border-bottom: 1px solid var(--wbk-border-color, #e2e5ea); }
.wbk-glossary strong { color: var(--wp--preset--color--primary); }
.wbk-gallery-ph .wbk-illustration { max-width: 220px; }
.wbk-el .wbk-stat { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--wp--preset--color--primary); margin-bottom: .2rem; }
.wbk-band .wbk-stat { color: inherit; }
@media (max-width: 781px) { .wbk-media-text > .wp-block-column:has(.wbk-hero-art), .wbk-media-text > .wp-block-column:has(.wp-block-image) { order: -1; } }
.wbk-social-label { font-weight: 700; margin: 0 0 .5rem; }
.wbk-social-block + .wbk-share-block { margin-top: 1.4rem; }
.wbk-el-head { margin-bottom: 1.6rem; }
.wbk-el-foot { margin-top: 1.6rem; }

/* Social Media im Kopf-, Menü-, Handy- und Fußbereich */
.wbk-hd-social { display: flex; align-items: center; margin-right: .4rem; }
.wbk-hd-social .wbk-social a, .wbk-hd-social-li .wbk-social a { width: 34px; height: 34px; color: inherit; }
.wbk-hd-social-li { display: flex; align-items: center; margin-left: .4rem; }
.wbk-hd-social-li .wbk-social { gap: .1rem; }
.wbk-mnav-social { margin-top: 1.2rem; }
.wbk-ft-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; padding: 1.2rem 1rem; border-top: 1px solid rgba(127,127,127,.25); }
.wbk-ft-social-label { font-weight: 700; }
footer .wbk-social--schlicht a, footer .wbk-social--text a { color: inherit; }
/* Teilen automatisch / schwebend */
.wbk-share-auto { max-width: var(--wp--style--global--content-size, 760px); margin: 2.5rem auto; padding: 1.2rem var(--wp--style--root--padding-left, 1rem); border-top: 1px solid var(--wbk-border-color, #e2e5ea); }
.wbk-share--float { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); z-index: 9990; flex-direction: column; background: var(--wp--preset--color--base, #fff); padding: .5rem; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.wbk-share--float .wbk-share-label { font-size: .7rem; }
.wbk-share--float ul { flex-direction: column; }
.wbk-share--float a span, .wbk-share--float button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wbk-share--float a, .wbk-share--float button { padding: .55rem; }
@media (max-width: 782px) {
	.wbk-share--float { top: auto; bottom: 0; left: 0; right: 0; transform: none; flex-direction: row; justify-content: center; border-radius: 14px 14px 0 0; }
	.wbk-share--float ul { flex-direction: row; }
	body:has(.wbk-share--float) { padding-bottom: 64px; }
}
.wbk-ft-social-wrap .wbk-ft-social { justify-content: flex-start; padding: 1rem 0; border-top: 1px solid rgba(127,127,127,.3); }
.wbk-more a { font-weight: 700; text-decoration: none; }
.wbk-more a:hover { text-decoration: underline; }

/* Startbereich mit großem Foto */
.wbk-hero-photo { position: relative; isolation: isolate; min-height: clamp(420px, 68vh, 680px); display: flex; flex-direction: column; justify-content: center; padding-top: clamp(4rem, 10vw, 7.5rem) !important; padding-bottom: clamp(4rem, 10vw, 7.5rem) !important; color: #fff; }
.wbk-hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8, 16, 28, .78) 0%, rgba(8, 16, 28, .55) 50%, rgba(8, 16, 28, .25) 100%); }
.wbk-hero-photo > * { width: 100%; max-width: var(--wp--style--global--content-size, 760px); margin-left: auto !important; margin-right: auto !important; }
.wbk-hero-photo h1, .wbk-hero-photo p, .wbk-hero-photo .wbk-eyebrow, .wbk-hero-photo .wbk-lead { color: #fff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.wbk-hero-photo .wbk-eyebrow { opacity: .9; }
.wbk-hero-photo .wp-block-button.is-style-outline .wp-block-button__link { color: #fff !important; border-color: rgba(255, 255, 255, .85) !important; background: transparent !important; }