/*
 * Eigenes CSS.
 *
 * Diese Datei wird nach allen anderen Stylesheets geladen, auch nach Elementor.
 * Deshalb gehoeren Ueberschreibungen hierher und nicht in die style.css.
 *
 * Nach dem Aendern die Version im style.css-Header hochzaehlen, sonst liefert
 * der Browser die alte Fassung aus dem Cache.
 */

/* header */
#site-header.sticky {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Typo */

strong {
	font-weight: 800 !important;
}


/* Card Items */

.card-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    aspect-ratio: 1/1;
    /* Kinder koennen per @container card auf die Kartenbreite reagieren. */
    container: card / inline-size;
}

/* Das HTML-Widget um die Karte immer auf volle Breite und Hoehe ziehen.
   Durch "container: inline-size" hat die Karte keine eigene Breite mehr. Sitzt
   sie in einem Flex-Container mit Reihen-Layout (z. B. Amis, Living Room
   Session), rechnet WebKit (Safari und alle iPhone-Browser) sie sonst auf
   0 px herunter: Bild sichtbar, Plus-Button und Overlay unsichtbar. */
.elementor-widget-html:has(> .card-wrapper) {
    flex: 1 1 100%;
    width: 100%;
    align-self: stretch;
}

.card-btn {
    position: absolute;
    width: 48px;
    height: 48px;
    background: #222;
    right: 24px;
    top: 24px;
    border-radius: 50%;
    transition: .6s;
    display: flex;
    align-items: center;    
    justify-content: center;
    z-index: 12; /* ueber .card-content (11), damit man die Karte schliessen kann */
    cursor: pointer;
}

.card-btn span{
    position: absolute;
    z-index: 100;
    width: 2px;
    height: 20px;
    background: #fff;
    rotate: 90deg;
    transform: translateY(-0px);
}

.card-btn span{
    transition: .6s;
}

.card-btn span:nth-child(2){
    background: #fff;
    rotate: 0deg;
}

/* Hover nur mit echter Maus — auf Touch-Geraeten bliebe :hover nach einem
   Tipp sonst haengen. Offen-Zustand kommt per .is-active aus main.js. */
.card-btn.is-active{
    transform: scale(1.2);
}

.card-btn.is-active span:nth-child(1){
    rotate: 0deg;
}

.card-btn.is-active span:nth-child(2){
    rotate: 90deg;
}

@media (hover: hover) {
    .card-btn:hover{
        transform: scale(1.2);
    }

    .card-btn:hover span:nth-child(1){
        rotate: 0deg;
    }

    .card-btn:hover span:nth-child(2){
        rotate: 90deg;
    }
}

.card-btn:focus-visible{
    outline: 2px solid #222;
    outline-offset: 4px;
}

.card-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 4em;
    justify-content: center;
    position: relative;
    z-index: 11; /* deckt offen Badges (10) und Datum ab */
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s;
}
.card-content.is-visible {
    opacity: 1;
}

/* Schmale Karte (nicht schmaler Bildschirm) — greift auch im Raster am Desktop. */
@container card (max-width: 499px) {
    .card-content {
        padding: 24px;
    }
}

.card-title {
    font-size: clamp(20px, 7cqw, 46px); /* wächst mit der Karte, min. 20px, max. 36px */
    font-weight: 900;
    line-height: 1.1em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.card-excerpt {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7em;
    letter-spacing: 1px;
}


.card-badge-wrapper {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    top: 24px;
    left: 24px;
    gap: 10px;
    z-index: 10;
    width: calc(100% - 100px);
}

.card-badge-item {
    font-family: 'IBM Plex Mono';
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #222;
    padding: 4px 6px;
    border-radius: 4px;
}

/* Mobil (Elementor-Breakpoint): kleinere Badges, damit sie nicht die halbe Karte füllen. */
@media (max-width: 767px) {
    .card-badge-wrapper {
        gap: 6px;
    }

    .card-badge-item {
        font-size: 10px;
        line-height: 12px;
        letter-spacing: .5px;
        padding: 3px 5px;
        border-radius: 3px;
    }
}

.card-date {
    position: absolute;
    display: flex;
    bottom: 24px;
    right: 24px;
    font-weight: 300;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 1px;
    /* Enger Schatten fuer die Kontur, weicher fuer helle Flaechen. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 8px rgba(0, 0, 0, .25);
}


/* Soundbar */

.sound-animation {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 30px;
}
.sound-item {
    width: 6px;
    background: #0900FF;
    border-radius: 5px;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
	transition: background .9s;
}

.sound-item:hover{
    background: #38FFE4;
}
.sound-item:nth-child(1) { animation: sound-1 2.6s infinite; animation-delay: -0.9s; }
.sound-item:nth-child(2) { animation: sound-2 2.1s infinite; animation-delay: -1.4s; }
.sound-item:nth-child(3) { animation: sound-3 2.8s infinite; animation-delay: -0.3s; }
.sound-item:nth-child(4) { animation: sound-1 2.3s infinite; animation-delay: -1.8s; }
.sound-item:nth-child(5) { animation: sound-2 2.5s infinite; animation-delay: -0.6s; }

@keyframes sound-1 {
    0%   { height: 25%; }
    30%  { height: 90%; }
    55%  { height: 40%; }
    80%  { height: 100%; }
    100% { height: 25%; }
}
@keyframes sound-2 {
    0%   { height: 90%; }
    25%  { height: 30%; }
    50%  { height: 70%; }
    75%  { height: 20%; }
    100% { height: 90%; }
}
@keyframes sound-3 {
    0%   { height: 40%; }
    35%  { height: 100%; }
    60%  { height: 15%; }
    85%  { height: 60%; }
    100% { height: 40%; }
}

/* Formular */

.elementor-field-option  {
	 display: flex !important;
	 align-items: flex-start;

}

 .elementor-field-option label {
	 font-weight: 300 !important;
	 line-height: 20px !important;
	font-size: 14px !important;
	text-transform: initial !important;
	 display: inline !important;
	 padding: 2px 10px;
	 display: inline-block;
}

.elementor-field-option input[type="checkbox"].elementor-acceptance-field {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 24px;
	height: 24px;
	min-width: 18px;
	min-height: 18px;
	margin: 0;
	border: 2px solid #333;
	border-radius: 0;
	background: #fff;
	position: relative;
	flex-shrink: 0;
	cursor: pointer;
}

.elementor-field-option input[type="checkbox"].elementor-acceptance-field:checked::before,
.elementor-field-option input[type="checkbox"].elementor-acceptance-field:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 18px;
	background-color: #fff;
}

.elementor-field-option input[type="checkbox"].elementor-acceptance-field:checked::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.elementor-field-option input[type="checkbox"].elementor-acceptance-field:checked::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.elementor-field-type-textarea textarea {
	padding-top: 20px !important;
}

/* Passwortseite (Bewerbungsseiten)
   WordPress gibt das Formular ohne Elementor-Container direkt zwischen Header
   und Footer aus. 200px oben und unten halten es auch im Querformat vom Rand weg. */


.post-password-form {
  max-width: 420px;
  margin: 0 auto;
  padding: 160px 32px;
  text-align: left;
  color: var(--e-global-color-text, #01001C);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* wpautop erzeugt vor dem Formular ein leeres <p>. */
.post-password-form p:empty {
	display: none;
}

.post-password-form p {
	margin: 0 0 32px;
}

/* Feld und Button untereinander, beide volle Breite. */
.post-password-form p:last-child {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 0;
}

.post-password-form label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-weight: 700;
    width: 100%;
}

.post-password-form input[type="password"] {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--e-global-color-primary, #01001C);
	border-radius: 4;
	background: #fff;
	font-size: 16px;
	text-align: left;

}

.post-password-form input[type="password"]:focus {
	outline: 1px solid var(--e-global-color-accent, #0900FF);
}


.post-password-form input[type="submit"] {
  width: 100%;
  padding: 20px 16px;
  border: 1px;
  border-radius: 4px;
  background: var(--e-global-color-accent, #0900FF);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .3s;
}

.post-password-form input[type="submit"]:hover,
.post-password-form input[type="submit"]:focus-visible {
	background: #38FFE4;
    border-radius: 4px;
}


/* Lebenslauf auf den Bewerbungsseiten: dunkler Hintergrund, Texte und Linien weiß.
   Gilt für den Abschnitt f655a9c (Seite "Template Bewerbung" und ihre Kopien).
   Achtung: Farben, die im Elementor-Editor für diesen Abschnitt gesetzt werden,
   werden hiervon überschrieben. Die Datums-Badges bleiben blau mit weißer Schrift. */

/* "body .elementor" vorneweg, weil Elementor Überschriftenfarben mit
   .elementor-1858 .elementor-element.elementor-element-xyz setzt. */
body .elementor .elementor-element.elementor-element-f655a9c {
	background-color: var(--black, #01001C);
	color: var(--white, #fff);
}

body .elementor .elementor-element.elementor-element-f655a9c .elementor-heading-title,
body .elementor .elementor-element.elementor-element-f655a9c .elementor-widget-text-editor {
	color: var(--white, #fff);
}

/* Zeitstrahl: Container mit der globalen Elementor-Klasse "mi-timeline".
   Die Linie selbst bleibt die border-left aus Elementor, border-image legt einen
   Verlauf darüber: oben und unten laufen je 30px weich ins Dunkelblau aus. */
body .elementor .mi-timeline {
	border-color: var(--white, #fff);
	border-image: linear-gradient(
		to bottom,
		transparent 0,
		var(--white, #fff) 100px,
		var(--white, #fff) calc(100% - 1000px),
		transparent 100%
	) 1;
}

/* Punkte auf der Linie (Div-Blöcke am Ende jeder Station). */
body .elementor .elementor-element.elementor-element-f655a9c .e-div-block-base {
	background-color: var(--white, #fff);
}


/* Sprechblase wie auf der Figma-Visitenkarte ("Hello zusammen").
   Klasse mi-bubble an den Container hängen, darin eine Überschrift.
   Werte aus Figma: Blau #0900FF, Ecken 10px, Innenabstand 20/21px,
   Schrift Archivo Black 17px in Ocean, Spitze unten rechts. */
body .elementor .mi-bubble {
	position: absolute;
    top: -55px;
    left: 32px;
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	padding: 20px 21px;
	border-radius: 10px;
	background: var(--blue, #0900FF);
	box-shadow: 0 16px 32px -8px rgba(16, 17, 43, .5);
}

/* Spitze: rechtwinkliges Dreieck, senkrechte Kante rechts, ~25px vom Rand. */
body .elementor .mi-bubble::after {
	content: "";
	position: absolute;
	right: 25px;
	bottom: -16px;
	width: 22px;
	height: 18px;
	background: inherit;
	clip-path: polygon(100% 0, 100% 100%, 0 0);
}

body .elementor .mi-bubble .elementor-heading-title {
	margin: 0;
	font-family: "Archivo Black", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--ocean, #38FFE4);
	-webkit-text-stroke: 0;
	text-stroke: 0;
}


/* ==========================================================================
   Mobil (bis 767px, wie Elementors Mobil-Breakpoint)
   ========================================================================== */
@media (max-width: 767px) {

	/* Sprechblase: Position und Größe für kleine Bildschirme */
	body .elementor .mi-bubble {
		top: -72px;
		left: 24px;
		padding: 20px 20px;
	}

}