/* DeLeDi-SpuK: Anpassungen für das Block-Markup von WordPress.
   site.css enthält das Gestaltungssystem, diese Datei übersetzt Blöcke darauf. */

/* Abstände der Blöcke kommen aus dem Gestaltungssystem, nicht aus WordPress */
.startseite p + h3, .startseite .wp-block-list + h3 { margin-top: 1.4em; }
.startseite .wp-block-group > .wp-block-list { margin-top: 1em; }
.startseite h2 + p, .startseite h2 + .wp-block-group { margin-top: 20px; }
.startseite h3 { margin-bottom: 10px; }
.startseite p:last-child { margin-bottom: 0; }
.wp-block-group.abschnitt { margin: 0; }

/* Buttons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.wp-block-buttons.knoepfe { margin-top: 28px; }
.wp-block-button__link, .btn--formular {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 12px 28px; border-radius: 999px !important;
  font: 600 var(--step--1)/1.2 var(--font); text-decoration: none;
  border: 2px solid var(--blau); background: var(--blau); color: var(--weiss);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--schatten); color: var(--weiss); }
.is-style-leer .wp-block-button__link { background: var(--weiss); color: var(--blau); }
.is-style-leer .wp-block-button__link:hover { background: var(--hell); color: var(--blau); }
.blau .wp-block-button__link { background: var(--weiss); color: var(--blau); border-color: var(--weiss); }
.blau .is-style-leer .wp-block-button__link { background: transparent; color: var(--weiss); }
.btn--formular { cursor: pointer; }
.blau .formular .btn { background: var(--blau); color: var(--weiss); border-color: var(--blau); }

/* Menü aus WordPress */
.nav ul { display: flex; }
.nav .current-menu-item > a::after, .nav .current_page_parent > a::after { transform: scaleX(1); }
.nav__cta { margin: 0; }
@media (max-width: 1020px) {
  .nav ul { flex-direction: column; }
  .nav .nav__cta { display: block; padding: 0 var(--gutter) 24px; }
}

/* Einstieg */
.einstieg__text p { max-width: 40ch; }
.zahlkasten .quelle-klein { display: block; margin-top: 14px; font-size: .85rem; }
.einfach > p, .einfach > :not(summary) { padding: 0 24px 22px; line-height: 1.8; margin: 0; }

/* Für wen */
.wege__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
@media (max-width: 860px) { .wege__liste { grid-template-columns: 1fr; } }
.weg a { font-weight: 600; }

/* Worum es geht: großes Verb */
.verb, .is-style-verb { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem); font-weight: 700; line-height: 1.3; display: block; margin-bottom: 18px; letter-spacing: -0.02em; color: var(--weiss); }
.vorhaben__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: 32px; }
@media (max-width: 860px) { .vorhaben__liste { grid-template-columns: 1fr; } }

/* Lernplattform: Symbole für „So lernen Sie“ */
.lernen { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.lernen li { position: relative; padding-left: 58px; min-height: 44px; display: flex; align-items: center; }
.lernen li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--weiss) no-repeat center / 26px 26px;
}
.lernen li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318418A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v10H9l-5 4z'/%3E%3Cpath d='M10 9.2a2 2 0 1 1 2.6 1.9c-.4.2-.6.5-.6.9'/%3E%3Cpath d='M12 13.2v.1'/%3E%3C/svg%3E"); }
.lernen li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318418A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M10 9.5v5l4.5-2.5z'/%3E%3C/svg%3E"); }
.lernen li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318418A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M8.5 10l1.5 1.5 3-3M8.5 15.5h7'/%3E%3C/svg%3E"); }
.lernen li:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318418A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E"); }
.lernen li:nth-child(n+5)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318418A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2h5.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }

/* Werte */
.werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 52px) clamp(32px, 6vw, 96px); margin-top: clamp(32px, 4vw, 56px); }
.werte .wert { position: relative; padding-left: 40px; }
.werte .wert::before { content: ""; position: absolute; left: 6px; top: .5em; width: 14px; height: 14px; border-radius: 50%; background: var(--blau); box-shadow: 0 0 0 5px var(--hell-2); }
.werte .wert h3 { margin-bottom: 8px; }
.werte .wert.hervor { grid-column: 1 / -1; background: var(--hell-2); border-radius: var(--radius-gross); padding: clamp(28px, 3.5vw, 48px) clamp(28px, 3.5vw, 48px) clamp(28px, 3.5vw, 48px) clamp(80px, 8vw, 112px); }
.werte .wert.hervor::before { left: clamp(34px, 3.4vw, 50px); top: clamp(38px, 4.2vw, 58px); background: var(--weiss); box-shadow: 0 0 0 5px var(--blau); }
.werte .wert.hervor h3 { font-size: var(--step-2); }
@media (max-width: 860px) { .werte { grid-template-columns: 1fr; } }

/* Arbeitspakete */
.pakete { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 56px); }
.paket .paket__nr { font-size: var(--step-3); font-weight: 700; color: var(--violett); line-height: 1; margin-bottom: 14px; }
@media (max-width: 1020px) { .pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pakete { grid-template-columns: 1fr; } }

/* Zeitstrahl als Liste: <strong> ist das Datum, <em> markiert „Hier stehen wir“ */
.zeitstrahl-liste { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.zeitstrahl-liste li { position: relative; padding: 64px 10px 0 0; font-size: var(--step--1); }
.zeitstrahl-liste li::before { content: ""; position: absolute; top: 0; left: 0; right: 6px; height: 40px; border-bottom: var(--bogen-dicke) solid var(--gold); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.zeitstrahl-liste li:has(em)::before { border-color: var(--koralle); }
.zeitstrahl-liste strong { display: block; font-weight: 650; color: var(--blau); margin-bottom: 4px; }
.zeitstrahl-liste em { display: table; margin-top: 8px; font-style: normal; font-size: .8rem; font-weight: 600; color: var(--blau); background: var(--weiss); border-radius: 999px; padding: 4px 12px; }
@media (max-width: 1020px) {
  .zeitstrahl-liste { grid-template-columns: 1fr; }
  .zeitstrahl-liste li { padding: 0 0 26px 64px; }
  .zeitstrahl-liste li::before { top: 2px; left: 0; right: auto; width: 40px; height: 20px; }
}

/* Konsortium */
.laender { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 72px); }
.land__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.land__kopf h3 { margin: 0; font-size: var(--step-0); }
.partner { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.partner li { position: relative; display: block; min-height: 62px; padding: 12px 14px 12px 64px; background: var(--weiss); border-radius: 16px; font-size: var(--step--1); line-height: 1.4; hyphens: auto; overflow-wrap: break-word; }
.partner li::before { content: ""; position: absolute; left: 14px; top: 12px; width: 38px; height: 38px; border-radius: 10px; border: 2px dashed var(--hell-2); }
.partner li:has(img)::before { display: none; }
.partner li img { position: absolute; left: 14px; top: 12px; width: 38px; height: 38px; object-fit: contain; }
.partner em { display: block; font-style: normal; color: var(--violett); font-weight: 600; font-size: .82rem; }
@media (max-width: 1020px) { .laender { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .laender { grid-template-columns: 1fr; } }

/* Aus dem Projekt */
.beitrag-karte img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; height: auto; }
.blog-kopf .wp-block-buttons.knoepfe { margin-top: 0; }

/* Fragen: Block „Details“ */
.wp-block-details.frage > :not(summary) { padding: 0 0 24px; margin: 0; }
.fragen__raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); }
@media (max-width: 860px) { .fragen__raster { grid-template-columns: 1fr; } }

/* Kontakt */
.kontakt .gross { margin-top: 20px; font-size: var(--step-1); }
.kontakt__mail p { margin-top: 10px; }

/* Inhalt einfacher Seiten und Beiträge */
.inhalt > * + * { margin-top: 1em; }
.inhalt h2 { margin-top: 2em; }
.inhalt img { border-radius: var(--radius); height: auto; }
.inhalt .wp-block-image figcaption, .inhalt figcaption { font-size: var(--step--1); margin-top: 10px; }
.inhalt .wp-block-quote { border: 0; margin: 2em 0; padding: 28px 32px; background: var(--hell); border-radius: var(--radius); font-size: var(--step-1); color: var(--blau); }

/* Seitennavigation im Blog */
.pagination, .navigation.pagination { margin-top: 48px; }
.nav-links { display: flex; gap: 12px; flex-wrap: wrap; }
.nav-links a, .nav-links span { display: inline-flex; min-width: 48px; min-height: 48px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 999px; border: 2px solid var(--blau); text-decoration: none; font-weight: 600; }
.nav-links .current { background: var(--blau); color: var(--weiss); }

/* Ausrichtung für Bilder im Inhalt */
.alignwide { max-width: var(--maxbreite); }
.aligncenter { margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }