/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Nunito+Sans:wght@400;600;700&display=swap");

:root {
  --font-fraunces: "Fraunces", Georgia, serif;
  --font-nunito: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --kj-accent: #2f5e4e;
  --kj-accent-soft: #eef4f1;
  --kj-text: #2b2b2b;
  --kj-muted: #5c5c5c;
  --kj-radius: 16px;
  --kj-display: var(--font-fraunces);
  --kj-body: var(--font-nunito);
}

/* Font utilities: set these classes in markdown/html where needed. */
.font-fraunces,
.font-display {
  font-family: var(--font-fraunces);
}

.font-nunito,
.font-body {
  font-family: var(--font-nunito);
}

/* Global content typography (Stellenausschreibung style). */
.content-item :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--kj-display);
  color: var(--kj-accent);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.content-item h1 {
  font-size: clamp(2.2rem, 5vw + 1rem, 3.75rem);
  font-weight: 700;
}

.content-item h2 {
  font-size: clamp(1.4rem, 2.5vw + 0.5rem, 1.9rem);
  font-weight: 600;
}

.content-item h2::before {
  content: none;
  display: none;
}

.content-item :is(p, li) {
  font-family: var(--kj-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--kj-text);
}

.content-item :is(ul, ol) {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.content-item :is(ul, ol) > li {
  position: relative;
  list-style: none;
  padding-left: 1.5rem;
  margin-bottom: .6rem;
}

.content-item :is(ul, ol) > li::marker {
  content: "";
}

.content-item :is(ul, ol) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--kj-accent);
}

/* Reusable content box with the same look as kita-job intro/cta. */
.info-box {
  background: var(--kj-accent-soft, #eef4f1);
  border-radius: var(--kj-radius, 16px);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin: 1.25rem 0;
  color: var(--kj-text, #2b2b2b);
}

.info-box :first-child {
  margin-top: 0;
}

.info-box h2 {
  margin-top: 0;
  color: var(--kj-accent, #2f5e4e);
  font-family: var(--kj-display, var(--font-fraunces));
}

.info-box h2::before {
  content: none;
  display: none;
}

.info-box-small {
  background: var(--kj-accent-soft, #eef4f1);
  border-radius: var(--kj-radius, 16px);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin: 0 0 1.25rem;
  color: var(--kj-text, #2b2b2b);
  display: block;
  width: fit-content;
  max-width: min(100%, 28rem);
}

.info-box-small :first-child {
  margin-top: 0;
}

.info-box-small h2 {
  margin-top: 0;
  color: var(--kj-accent, #2f5e4e);
  font-family: var(--kj-display, var(--font-fraunces));
}

.info-box-small h2::before {
  content: none;
  display: none;
}

/* Grav markdown image helper classes: ?classes=float-right / float-left */
.content-item::after {
	content: "";
	display: table;
	clear: both;
}

.float-right {
	float: right;
	margin: 0 0 3rem 3rem;
}

.float-left {
	float: left;
	margin: 0 3rem 3rem 0;
}

.content-item img.float-right,
.content-item img.float-left {
	border-radius: 12px;
}

/* Keep text readable on narrow screens. */
@media (max-width: 700px) {
	.float-right,
	.float-left {
		float: none;
		display: block;
		margin: 0 auto 1rem;
	}
}

/* Manual two-slide carousel for Einrichtung page content. */
.foto-carousel {
	position: relative;
	width: min(500px, 100%);
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
	background: #fff;
	margin: 1rem 0 1rem 3rem;
}

.foto-carousel input {
	display: none;
}

.foto-carousel-track {
	display: flex;
	width: 200%;
	transition: transform 220ms ease;
  position: relative;
  z-index: 1;
}

.foto-carousel-slide {
	flex: 0 0 50%;
	margin: 0;
}

.foto-carousel-slide img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
}

#foto-slide-1:checked ~ .foto-carousel-track {
	transform: translateX(0);
}

#foto-slide-2:checked ~ .foto-carousel-track {
	transform: translateX(-50%);
}

.foto-carousel-controls {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	padding: 0 0.45rem;
	display: none;
	justify-content: space-between;
	pointer-events: none;
  z-index: 6;
}

.foto-carousel-controls label {
	pointer-events: auto;
  position: relative;
  z-index: 7;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.58);
	color: #fff;
	cursor: pointer;
	font-size: 1.3rem;
	line-height: 1;
	user-select: none;
}

#foto-slide-1:checked ~ .controls-1,
#foto-slide-2:checked ~ .controls-2 {
	display: flex;
}

.foto-carousel-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.5rem;
	display: flex;
	justify-content: center;
	gap: 0.45rem;
  z-index: 5;
}

.foto-carousel-dots label {
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.62);
	cursor: pointer;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
}

#foto-slide-1:checked ~ .foto-carousel-dots label[for="foto-slide-1"],
#foto-slide-2:checked ~ .foto-carousel-dots label[for="foto-slide-2"] {
	background: #fff;
}

@media (max-width: 700px) {
	.foto-carousel {
		width: min(100%, 560px);
		margin: 0 auto 1rem;
	}
}

 /* ====== Styles für Stellenausschreibungen ====== */
  /* ====== Anpassbare Variablen ====== */
  .kita-job {
    --kj-accent: #2f5e4e;        /* Hauptfarbe (Überschriften, Akzente) */
    --kj-accent-soft: #eef4f1;   /* zarter Hintergrund für Boxen */
    --kj-text: #2b2b2b;
    --kj-muted: #5c5c5c;
    --kj-bg: #ffffff;
    --kj-radius: 16px;
    --kj-display: "Fraunces", Georgia, serif;
    --kj-body: "Nunito Sans", system-ui, sans-serif;
  }

  /* ====== Layout ====== */
  .kita-job {
    box-sizing: border-box;
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: var(--kj-bg);
    color: var(--kj-text);
    font-family: var(--kj-body);
    line-height: 1.6;
  }
  .kita-job *, .kita-job *::before, .kita-job *::after { box-sizing: border-box; }

  .kita-job__eyebrow {
    font-size: .95rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kj-muted);
    margin: 0 0 .05rem;
    line-height: 1.2;
  }
  .kita-job p.kita-job__eyebrow {
    margin: 0 0 .05rem;
  }
  .kita-job__title {
    font-family: var(--kj-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 7vw, 4rem);
    line-height: 1.05;
    color: var(--kj-accent);
    margin: 0 0 .35rem;
    margin-top: 0;
  }
  .kita-job .kita-job__eyebrow + .kita-job__title {
    margin-top: 0 !important;
  }
  .kita-job__subtitle {
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    color: var(--kj-muted);
    margin: 0 0 2.5rem;
  }

  .kita-job__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  @media (max-width: 720px) {
    .kita-job__grid { grid-template-columns: 1fr; }
  }

  .kita-job h2 {
    font-family: var(--kj-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 1.7rem);
    color: var(--kj-accent);
    margin: 0 0 .75rem;
  }
  .kita-job h2::before {
    content: none;
    display: none;
  }
  .kita-job section { margin-bottom: 2rem; }
  .kita-job p { margin: 0 0 1rem; color: var(--kj-text); }

  .kita-job ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .kita-job li {
    position: relative;
    list-style: none;
    padding-left: 1.5rem;
    margin-bottom: .6rem;
  }
  .kita-job li::marker {
    content: "";
  }
  .kita-job li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--kj-accent);
  }

  .kita-job__intro {
    background: var(--kj-accent-soft);
    border-radius: var(--kj-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2.5rem;
  }

  /* ====== Kontakt / CTA ====== */
  .kita-job__cta {
    background: var(--kj-accent-soft, #eef4f1);
    border-radius: var(--kj-radius, 16px);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    margin-top: 1rem;
    color: var(--kj-text, #2b2b2b);
  }
  .kita-job__cta h2 {
    margin-top: 0;
    color: var(--kj-accent, #2f5e4e);
    font-family: var(--kj-display, var(--font-fraunces));
  }
  .kita-job__cta h2::before {
    content: none;
    display: none;
  }
  .kita-job__cta p {
    color: var(--kj-text, #2b2b2b);
  }
  .kita-job__contact {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
  }
  .kita-job__contact li {
    padding-left: 2rem;
    margin-bottom: .75rem;
  }
  .kita-job__contact li::before { display: none; }
  .kita-job__contact a { color: var(--kj-accent); font-weight: 700; text-decoration: none; }
  .kita-job__contact a:hover { text-decoration: underline; }
  .kita-job__icon {
    position: absolute;
    left: 0;
    top: .15em;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--kj-accent);
  }

  .kita-job__apply {
    display: inline-block;
    margin-top: 1.25rem;
    background: var(--kj-accent, #2f5e4e);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    padding: .85rem 1.75rem;
    border-radius: 999px;
    transition: transform .15s ease, opacity .15s ease;
  }
  .kita-job__apply:hover { transform: translateY(-2px); opacity: .92; }