/*
Theme Name:     masdemas
Theme URI:      n/a
Template:       kadence
Author:         Matthias Reinders
Author URI:     n/a
Description:    Child Theme fuer rc.masdemas.de (the rare collective)
Version:        1.1
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/


/* =============================================================
   1. GLOBAL: SCHRIFTEN
   Adobe Fonts (erbaum). Adobe-Webproject psu4aau wird via
   functions.php geladen.
   ============================================================= */
:root {
	--rc-font: "erbaum", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body,
p,
.entry-content,
.wp-block-kadence-advancedheading,
h1, h2, h3, h4, h5, h6,
.wp-block-kadence-singlebtn .kb-btn-text,
.wp-block-kadence-singlebtn a {
	font-family: var(--rc-font) !important;
}


/* =============================================================
   2. GLOBAL: TYPOGRAFIE-FEINJUSTIERUNG
   Body 200, Headlines 500, Letter-Spacing 1px ueberall.
   Line-Height 1.7em (≈ 29px bei 17px Body).
   ============================================================= */
body,
p,
.entry-content,
.entry-content p,
.wp-block-kadence-advancedheading,
h1, h2, h3, h4, h5, h6,
.wp-block-kadence-singlebtn .kb-btn-text,
.wp-block-kadence-singlebtn a {
	letter-spacing: 1px;
}

body,
p,
.entry-content,
.entry-content p {
	font-weight: 200;
	line-height: 1.7em;
}

h1, h2, h3, h4, h5, h6,
.wp-block-kadence-advancedheading {
	font-weight: 500;
}

/* Namen in Team-Sektion (Raphael Klein, Miriam Keller Rehbein, Pavel Ranck)
   Eigene Klasse .rc-team-name (im Editor an die Heading-Bloecke setzen).
   Fallback: Headings innerhalb der drei Team-Reihen. */
.rc-team-name,
.rc-team-name.wp-block-kadence-advancedheading,
.kb-row-layout-id2_tea021-s1 .wp-block-kadence-advancedheading,
.kb-row-layout-id2_tea022-t1 .wp-block-kadence-advancedheading,
.kb-row-layout-id2_tea023-u1 .wp-block-kadence-advancedheading {
	font-weight: 400;
}


/* =============================================================
   3. WPFORMS: Kontaktformular (Form-ID 146)
   ============================================================= */
button#wpforms-submit-146 {
	width: 380px;
	max-width: 100%;
	font-weight: 200;
}

label.wpforms-field-label-inline {
	font-weight: 200 !important;
}


/* =============================================================
   4. HEADING-STANDARDS (global, gelten fuer ALLE Pages)
   Greift bei jedem Kadence-Advanced-Heading, abhaengig vom Tag.
   Neue Pages brauchen kein eigenes CSS, nur den passenden Tag (h1/h2/h3/h6).
   ============================================================= */

/* Default: alle Kadence-Headings schwarz */
.wp-block-kadence-advancedheading { color: #000; }

/* H1 Hero-Headlines */
h1.wp-block-kadence-advancedheading { font-size: 64px; line-height: 1.05em; }
@media (max-width: 1024px) { h1.wp-block-kadence-advancedheading { font-size: 48px; } }
@media (max-width: 767px)  { h1.wp-block-kadence-advancedheading { font-size: 32px; line-height: 1.1em; } }

/* H2 Section-Headlines */
h2.wp-block-kadence-advancedheading { font-size: 42px; line-height: 1.15em; }
@media (max-width: 1024px) { h2.wp-block-kadence-advancedheading { font-size: 36px; } }
@media (max-width: 767px)  { h2.wp-block-kadence-advancedheading { font-size: 28px; line-height: 1.2em; } }

/* H3 Sub-Headlines (Team-Namen, Section-Subs) */
h3.wp-block-kadence-advancedheading { font-size: 28px; line-height: 1.2em; }
@media (max-width: 1024px) { h3.wp-block-kadence-advancedheading { font-size: 24px; } }
@media (max-width: 767px)  { h3.wp-block-kadence-advancedheading { font-size: 22px; line-height: 1.3em; } }

/* Vor-Headlines (H6 oder als <p> getagged) */
h6.wp-block-kadence-advancedheading,
p.wp-block-kadence-advancedheading { font-size: 14px; }
@media (max-width: 767px) {
	h6.wp-block-kadence-advancedheading,
	p.wp-block-kadence-advancedheading { font-size: 12px; }
}

/* Highlight innerhalb von Headlines */
.wp-block-kadence-advancedheading mark.kt-highlight { color: #1a9bd7; }


/* =============================================================
   4.a HEADING-OVERRIDES (dunkle Sektionen, Wort-Rotation, Club)
   Nur fuer die wenigen Sonderfaelle auf der Startseite.
   ============================================================= */

/* Dunkle Section-Hintergruende: Headings weiss */
.kb-row-layout-id2_1a8a93-72 .wp-block-kadence-advancedheading,
.kb-row-layout-id2_e1ab01-a1 .wp-block-kadence-advancedheading,
.kb-row-layout-id2_clm007-c1 .wp-block-kadence-advancedheading,
.kb-row-layout-id2_tea021-s1 .wp-block-kadence-advancedheading,
.kb-row-layout-id2_tea022-t1 .wp-block-kadence-advancedheading,
.kb-row-layout-id2_tea023-u1 .wp-block-kadence-advancedheading,
.kb-row-layout-id2_kon030-a1 .wp-block-kadence-advancedheading {
	color: #fff;
}

/* Wort-Rotation Hero: blau statt weiss (klar, echt, strategisch) */
.rc-rotate-wrap .wp-block-kadence-advancedheading { color: #1a9bd7; }

/* Club-Section H2 groesser (52px statt 42px) */
.kb-row-layout-id2_clm007-c1 h2.wp-block-kadence-advancedheading { font-size: 52px; }
@media (max-width: 1024px) { .kb-row-layout-id2_clm007-c1 h2.wp-block-kadence-advancedheading { font-size: 42px; } }
@media (max-width: 767px)  { .kb-row-layout-id2_clm007-c1 h2.wp-block-kadence-advancedheading { font-size: 32px; line-height: 1.2em; } }


/* =============================================================
   4. STARTSEITE (Page ID 2): Layout-spezifische Section-Styles
   ============================================================= */

/* ----- 4.1 Bento-Sektion: vier Boxen gleich hoch, Bilder fuellen Zelle ----- */
.kb-row-layout-id2_ben021-g1 > .kt-row-column-wrap,
.kb-row-layout-id2_ben022-i1 > .kt-row-column-wrap {
	min-height: 500px;
}
.kadence-column2_ben021-g2,
.kadence-column2_ben021-g3,
.kadence-column2_ben022-i2,
.kadence-column2_ben022-i3 {
	min-height: 500px;
	align-self: stretch;
}
.kadence-column2_ben021-g3 .wp-block-kadence-image,
.kadence-column2_ben022-i2 .wp-block-kadence-image,
.kadence-column2_ben022-i3 .wp-block-kadence-image,
.kadence-column2_ben021-g3 .wp-block-kadence-image figure,
.kadence-column2_ben022-i2 .wp-block-kadence-image figure,
.kadence-column2_ben022-i3 .wp-block-kadence-image figure {
	height: 100%;
	margin: 0;
}
.kadence-column2_ben021-g3 .wp-block-kadence-image img,
.kadence-column2_ben022-i2 .wp-block-kadence-image img,
.kadence-column2_ben022-i3 .wp-block-kadence-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ----- 4.2 Team-Sektion: drei Reihen vollbreit edge-to-edge ----- */
.kb-row-layout-id2_tea021-s1,
.kb-row-layout-id2_tea022-t1,
.kb-row-layout-id2_tea023-u1 {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	width: 100vw !important;
	max-width: 100vw !important;
}
.kb-row-layout-id2_tea021-s1 > .kt-row-column-wrap,
.kb-row-layout-id2_tea022-t1 > .kt-row-column-wrap,
.kb-row-layout-id2_tea023-u1 > .kt-row-column-wrap {
	min-height: 500px;
}
.kadence-column2_tea021-s2, .kadence-column2_tea021-s3,
.kadence-column2_tea022-t2, .kadence-column2_tea022-t3,
.kadence-column2_tea023-u2, .kadence-column2_tea023-u3 {
	min-height: 500px;
	align-self: stretch;
}
.kadence-column2_tea021-s2 .wp-block-kadence-image,
.kadence-column2_tea022-t3 .wp-block-kadence-image,
.kadence-column2_tea023-u2 .wp-block-kadence-image,
.kadence-column2_tea021-s2 .wp-block-kadence-image figure,
.kadence-column2_tea022-t3 .wp-block-kadence-image figure,
.kadence-column2_tea023-u2 .wp-block-kadence-image figure {
	height: 100%;
	margin: 0;
}
.kadence-column2_tea021-s2 .wp-block-kadence-image img,
.kadence-column2_tea022-t3 .wp-block-kadence-image img,
.kadence-column2_tea023-u2 .wp-block-kadence-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ----- 4.3 Akkordeon (eigenes, .rc-accordion-item): Browser-Pfeil aus, eigene Icons ----- */
.rc-accordion-item {
	border-top: 1px solid #e5e5e5;
	padding: 18px 0;
	margin: 0;
}
.rc-accordion-item:last-child {
	border-bottom: 1px solid #e5e5e5;
}
.rc-accordion-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 16px;
	font-weight: 700;
	color: #000;
}
.rc-accordion-item summary::-webkit-details-marker {
	display: none;
}
.rc-accordion-item .rc-acc-icon {
	flex-shrink: 0;
}

/* ----- 4.4 Image-Overlay-Detailfixes ----- */
.kt-image-overlay-message {
	border: none !important;
}
p.image-overlay-subtitle strong {
	font-size: 22px;
}

/* ----- 4.5 Kadence Accordion (Block 2_acc100-00): Titel mittig, Pfeil-Icon links ----- */
.kt-accordion-id2_acc100-00 .kt-blocks-accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.kt-accordion-id2_acc100-00 .kt-blocks-accordion-header::before {
	content: '';
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	background: url('/wp-content/uploads/2026/05/pfeil-akkordeon.png') no-repeat center / contain;
}
.kt-accordion-id2_acc100-00 .kt-blocks-accordion-title-wrap {
	flex: 1;
	text-align: center;
}
.kt-accordion-id2_acc100-00 .kt-accordion-inner-wrap::after {
	content: '';
	display: block;
	height: 2px;
	width: 100%;
	background: var(--global-palette3, #000);
}

/* ----- 4.6 Hero-Animation: klar -> echt -> strategisch.
   Drei einzelne Kadence-Headings in nested Column mit .rc-rotate-wrap.
   Jedes Heading hat .rc-word--1 / --2 / --3. Endzustand: "strategisch." bleibt. ----- */
.rc-rotate-wrap .kt-inside-inner-col {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 0;
}
.rc-rotate-wrap .wp-block-kadence-advancedheading {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(0.2em);
	will-change: opacity, transform;
	margin: 0;
}
.rc-rotate-wrap .rc-word--1 {
	animation: rcWord1 6s ease-out infinite;
}
.rc-rotate-wrap .rc-word--2 {
	animation: rcWord2 6s ease-out infinite;
}
.rc-rotate-wrap .rc-word--3 {
	animation: rcWord3 6s ease-out infinite;
}
@keyframes rcWord1 {
	0%   { opacity: 0; transform: translateY(0.2em); }
	5%   { opacity: 1; transform: translateY(0); }
	25%  { opacity: 1; transform: translateY(0); }
	30%  { opacity: 0; transform: translateY(-0.2em); }
	95%  { opacity: 0; transform: translateY(0.2em); }
	100% { opacity: 0; transform: translateY(0.2em); }
}
@keyframes rcWord2 {
	0%   { opacity: 0; transform: translateY(0.2em); }
	25%  { opacity: 0; transform: translateY(0.2em); }
	30%  { opacity: 1; transform: translateY(0); }
	48%  { opacity: 1; transform: translateY(0); }
	53%  { opacity: 0; transform: translateY(-0.2em); }
	95%  { opacity: 0; transform: translateY(0.2em); }
	100% { opacity: 0; transform: translateY(0.2em); }
}
@keyframes rcWord3 {
	0%   { opacity: 0; transform: translateY(0.2em); }
	48%  { opacity: 0; transform: translateY(0.2em); }
	53%  { opacity: 1; transform: translateY(0); }
	90%  { opacity: 1; transform: translateY(0); }
	95%  { opacity: 0; transform: translateY(-0.2em); }
	100% { opacity: 0; transform: translateY(0.2em); }
}


/* ----- 4.7 Leistungsbereiche: erste Kachel offen, Klick wechselt ----- */
.kb-row-layout-id2_ben021-g1 .wp-block-kadence-imageoverlay { cursor: pointer; }
.kb-row-layout-id2_ben021-g1 .rc-tile-open .kt-image-overlay-color-wrapper { opacity: 1 !important; }
.kb-row-layout-id2_ben021-g1 .rc-tile-open .kt-image-overlay-message .image-overlay-subtitle,
.kb-row-layout-id2_ben021-g1 .rc-tile-open .kt-image-overlay-message .image-overlay-title {
	opacity: 1;
	transform: translateZ(0);
}
.kb-row-layout-id2_ben021-g1 .rc-tile-open .kt-over-image-zoomin .kt-block-intrisic > img {
	transform: scale(1.05);
}


/* =============================================================
   5. MEDIA QUERIES
   ============================================================= */

/* ----- 5.1 Reduced Motion: Hero-Animation ohne Bewegung ----- */
@media (prefers-reduced-motion: reduce) {
	.rc-rotate-wrap .rc-word--1,
	.rc-rotate-wrap .rc-word--2 { display: none; }
	.rc-rotate-wrap .rc-word--3 {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ----- 5.2 Mobile / Tablet (max-width: 1024px) ----- */
@media (max-width: 1024px) {
	/* Outer Column waechst nicht mehr auf 500px -> kein weisser Streifen */
	.kadence-column2_tea021-s2, .kadence-column2_tea021-s3,
	.kadence-column2_tea022-t2, .kadence-column2_tea022-t3,
	.kadence-column2_tea023-u2, .kadence-column2_tea023-u3 {
		min-height: 0 !important;
	}
	/* Text-Spalten linksbuendig zur Theme-Kante */
	.kadence-column2_tea021-s3 > .kt-inside-inner-col,
	.kadence-column2_tea022-t2 > .kt-inside-inner-col,
	.kadence-column2_tea023-u3 > .kt-inside-inner-col {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	/* Hero-Headline + Wort-Animation kleiner auf Mobile.
	   Stabile Marker, nicht ueber seitenspezifische Block-IDs. */
	.entry-content h1.wp-block-kadence-advancedheading,
	.rc-rotate-wrap .wp-block-kadence-advancedheading {
		font-size: 32px !important;
		line-height: 1.1em !important;
	}
}

/* ----- 5.3 Mobile (max-width: 767px): Akkordeon-Titel linksbuendig ----- */
@media (max-width: 767px) {
	.kt-accordion-id2_acc100-00 .kt-blocks-accordion-title-wrap,
	.kt-accordion-id2_acc100-00 .kt-blocks-accordion-title {
		text-align: left;
	}
}