/* Racoon Elementor – kleine Layout-Anpassungen.
   Das eigentliche Styling (Farben, Karten, Buttons, Fonts) liefert das Racoon-Theme. */

/* Hero-Innenabstand im Elementor zähmen (Elementor steuert Außenabstände selbst) */
.rac-hero.rac-hero--el { padding-top: clamp(40px, 8vw, 90px); padding-bottom: clamp(40px, 8vw, 80px); }

/* Racoon-Widgets dürfen die volle Breite nutzen */
.elementor-widget-racoon_hero,
.elementor-widget-racoon_cards,
.elementor-widget-racoon_branches,
.elementor-widget-racoon_steps,
.elementor-widget-racoon_usp,
.elementor-widget-racoon_cta,
.elementor-widget-racoon_faq,
.elementor-widget-racoon_contact { width: 100%; }

/* Im Editor sind alle Inhalte sofort sichtbar (kein Scroll-Reveal, kein Übergang) */
.elementor-editor-active [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Fallback, falls das Racoon-Theme nicht aktiv ist: dunkler Hintergrund,
   damit der helle Text auf den Widgets lesbar bleibt. */
body:not(.rac-theme) .elementor-widget-racoon_hero,
body:not(.rac-theme) .elementor-widget-racoon_cards,
body:not(.rac-theme) .elementor-widget-racoon_branches,
body:not(.rac-theme) .elementor-widget-racoon_steps,
body:not(.rac-theme) .elementor-widget-racoon_usp,
body:not(.rac-theme) .elementor-widget-racoon_cta,
body:not(.rac-theme) .elementor-widget-racoon_faq,
body:not(.rac-theme) .elementor-widget-racoon_contact,
body:not(.rac-theme) .elementor-widget-racoon_heading,
body:not(.rac-theme) .elementor-widget-racoon_label,
body:not(.rac-theme) .elementor-widget-racoon_form { background: #000; }

/* ---- Racoon Überschrift (frei platzierbar, zweifarbig) ---- */
.rac-xhead {
	font-family: var(--rac-font-head, "Sora", sans-serif);
	font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
	color: #fff; margin: 0 0 .3em;
}
.rac-xhead--hero { font-size: var(--fs-hero, clamp(2.6rem, 6.2vw, 5.2rem)); line-height: 1.04; }
.rac-xhead--h1   { font-size: var(--fs-h1, clamp(2.1rem, 4.6vw, 3.4rem)); }
.rac-xhead--h2   { font-size: var(--fs-h2, clamp(1.7rem, 3.2vw, 2.5rem)); }
.rac-xhead--h3   { font-size: var(--fs-h3, clamp(1.25rem, 2vw, 1.55rem)); }
.rac-xhead--h4   { font-size: 1.25rem; }
.rac-xhead--h5   { font-size: 1.05rem; }
.rac-xhead--h6   { font-size: .95rem; }

/* Zweifarbiges Wort – global (das Theme-.grad ist auf den Hero beschränkt) */
.rac-grad {
	background: linear-gradient(120deg, var(--rac-accent, #00644B), var(--rac-green-300, #0a8a66) 60%, var(--rac-accent-soft, #0a8a66));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Contact Form 7 ----
   Das CF7-Styling (inkl. Dropdown/Select) liegt jetzt GLOBAL im Racoon-Theme
   (components.css → ".wpcf7-form"), damit ALLE CF7-Formulare einheitlich aussehen. */

/* ---- Bild & Text: Bild füllt den Rahmen ---- */
.rac-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Bild-Collage: verschachtelte Bilder ---- */
.rac-collage {
	position: relative; display: grid; gap: 0; width: 100%;
	aspect-ratio: 4 / 3.6;
}
.rac-collage::before {
	content: ""; position: absolute; inset: -6% -6% -6% -6%; z-index: 0;
	background: radial-gradient(circle at 72% 28%, rgba(0,100,75,.30), transparent 60%);
	filter: blur(34px); pointer-events: none;
}
.rac-collage__img {
	position: relative; overflow: hidden; border-radius: var(--rac-r-lg, 24px);
	border: 1px solid var(--rac-line-strong, rgba(0,100,75,.6));
	box-shadow: var(--rac-shadow, 0 18px 50px -20px rgba(0,0,0,.7));
	background: var(--rac-ink-800, #121313);
}
.rac-collage__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 2 Bilder: groß oben-links, kleiner überlappend unten-rechts */
.rac-collage--2 { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.rac-collage--2 .rac-collage__img:nth-child(1) { grid-area: 1 / 1 / 5 / 5; z-index: 1; }
.rac-collage--2 .rac-collage__img:nth-child(2) { grid-area: 3 / 3 / 7 / 7; z-index: 2; }

/* 3 Bilder: versetzt verschachtelt */
.rac-collage--3 { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.rac-collage--3 .rac-collage__img:nth-child(1) { grid-area: 1 / 1 / 5 / 5; z-index: 1; }
.rac-collage--3 .rac-collage__img:nth-child(2) { grid-area: 2 / 4 / 6 / 7; z-index: 3; }
.rac-collage--3 .rac-collage__img:nth-child(3) { grid-area: 4 / 2 / 7 / 5; z-index: 2; }

/* 1 Bild (Fallback) */
.rac-collage--1 { aspect-ratio: 4 / 3; }
.rac-collage--1 .rac-collage__img { grid-area: 1 / 1 / 2 / 2; }

/* Collage ohne Text: zentriert, begrenzte Breite */
.rac-collage-solo { max-width: 760px; margin-inline: auto; }

@media (max-width: 600px) {
	.rac-collage { aspect-ratio: 4 / 4; }
}

/* =========================================================================
   Racoon Animierte Überschrift
   ========================================================================= */
.rac-ahead__rot { position: relative; display: inline-block; vertical-align: bottom; }
.rac-ahead__item { position: absolute; left: 0; bottom: 0; white-space: nowrap; opacity: 0; }
.rac-ahead__item.is-active { position: relative; opacity: 1; }
.rac-ahead__ch { display: inline-block; white-space: pre; }

/* --- Objekt-Animationen (ganze Phrase) --- */
.rac-ahead__item.in-fade  { animation: rac-af-in  .5s  var(--rac-ease, ease) both; }
.rac-ahead__item.out-fade { animation: rac-af-out .45s var(--rac-ease, ease) both; }
.rac-ahead__item.in-slide  { animation: rac-sl-in  .55s var(--rac-ease, ease) both; }
.rac-ahead__item.out-slide { animation: rac-sl-out .45s var(--rac-ease, ease) both; }
.rac-ahead__item.in-zoom  { animation: rac-zo-in  .5s  var(--rac-ease, ease) both; }
.rac-ahead__item.out-zoom { animation: rac-zo-out .45s var(--rac-ease, ease) both; }
.rac-ahead__item.in-blur  { animation: rac-bl-in  .55s var(--rac-ease, ease) both; }
.rac-ahead__item.out-blur { animation: rac-bl-out .45s var(--rac-ease, ease) both; }
.rac-ahead__item.in-flip  { transform-origin: bottom center; animation: rac-fl-in  .6s  var(--rac-ease, ease) both; }
.rac-ahead__item.out-flip { transform-origin: top center;    animation: rac-fl-out .45s var(--rac-ease, ease) both; }

/* --- Buchstaben-Animationen (gestaffelt) --- */
.rac-ahead__item.in-letters  .rac-ahead__ch { animation: rac-af-in  .4s var(--rac-ease, ease) both; animation-delay: calc(var(--i) * .04s); }
.rac-ahead__item.out-letters .rac-ahead__ch { animation: rac-af-out .3s var(--rac-ease, ease) both; animation-delay: calc(var(--i) * .025s); }
.rac-ahead__item.in-drop  .rac-ahead__ch { animation: rac-drop-in  .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * .05s); }
.rac-ahead__item.out-drop .rac-ahead__ch { animation: rac-drop-out .4s  ease-in both; animation-delay: calc(var(--i) * .03s); }
.rac-ahead__item.in-typewriter  .rac-ahead__ch { animation: rac-af-in  .01s steps(1) both; animation-delay: calc(var(--i) * .06s); }
.rac-ahead__item.out-typewriter .rac-ahead__ch { animation: rac-af-out .01s steps(1) both; animation-delay: calc(var(--i) * .02s); }

@keyframes rac-af-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes rac-af-out  { from { opacity: 1; } to { opacity: 0; } }
@keyframes rac-sl-in   { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes rac-sl-out  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-.5em); } }
@keyframes rac-zo-in   { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes rac-zo-out  { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.15); } }
@keyframes rac-bl-in   { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes rac-bl-out  { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(12px); } }
@keyframes rac-fl-in   { from { opacity: 0; transform: rotateX(-90deg); } to { opacity: 1; transform: none; } }
@keyframes rac-fl-out  { from { opacity: 1; transform: none; } to { opacity: 0; transform: rotateX(90deg); } }
@keyframes rac-drop-in { from { opacity: 0; transform: translateY(-.9em); } to { opacity: 1; transform: none; } }
@keyframes rac-drop-out{ from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(.9em); } }

/* --- Lauftext (Marquee) --- */
.rac-ahead__rot.is-marquee { display: block; overflow: hidden; max-width: 100%; min-width: 0 !important; white-space: nowrap; }
.rac-ahead__track { display: inline-flex; white-space: nowrap; will-change: transform; animation: rac-marquee linear infinite; }
.rac-ahead__track .rac-ahead__item { position: static; opacity: 1; white-space: nowrap; }
.rac-ahead__sep { opacity: .5; padding: 0 .45em; }
@keyframes rac-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
	.rac-ahead__item, .rac-ahead__ch, .rac-ahead__track { animation: none !important; }
	.rac-ahead__item { position: absolute; opacity: 0; }
	.rac-ahead__item.is-active { position: relative; opacity: 1; }
}

/* --- Animierter Text: Block-Modus (ganze, mehrzeilige Texte) --- */
.rac-ahead--block .rac-ahead__rot { display: block; width: 100%; }
.rac-ahead--block .rac-ahead__item { left: 0; right: 0; top: 0; bottom: auto; white-space: normal; }
.rac-ahead--block .rac-ahead__item.is-active { position: relative; }
.rac-ahead--block.rac-ahead { max-width: 100%; }

/* Fließtext-Größen für den Text-Wechsler */
.rac-xhead--lead   { font-family: var(--rac-font-body, sans-serif); font-weight: 500; font-size: var(--fs-lead, 1.2rem); letter-spacing: 0; line-height: 1.6; color: var(--rac-text-muted, #a7b3af); }
.rac-xhead--normal { font-family: var(--rac-font-body, sans-serif); font-weight: 400; font-size: 1rem; letter-spacing: 0; line-height: 1.7; color: var(--rac-text, #eef2f1); }