/* ==========================================================================
   Transparenzseite
   Loaded only by page-transparenz.php (template "Transparenz").
   Every rule is scoped to .page-template-page-transparenz, so nothing in
   here can leak into other pages even if the file were enqueued globally.
   Palette/typography follow main.dist.css: DM Serif Display headings,
   Montserrat body, petrol #007c8e (quiet accent), navy #003c61, red #b2191c.
   ========================================================================== */

/* --- Breadcrumbs (rendered by the template on subpages) -------------------
   main.dist.css positions .breadcrumbs absolutely at the top-left in red;
   here they sit in the flow, in the 770px text column, grey with a light
   "/" separator and the current page in dark. */
.page-template-page-transparenz .breadcrumbs{font-size:14px;left:auto;line-height:22px;margin:0 auto;max-width:770px;padding:28px 20px 0;position:relative;top:auto}
.page-template-page-transparenz .breadcrumbs a{color:#777c8a;padding-right:22px;text-decoration:none;transition:color .3s cubic-bezier(.25,.46,.45,.94)}
.page-template-page-transparenz .breadcrumbs a:hover{color:#007c8e;text-decoration:none}
.page-template-page-transparenz .breadcrumbs a:after{background:none;color:#c4c7cf;content:"/";font-size:14px;height:auto;line-height:1;right:7px;top:50%;transform:translateY(-50%);width:auto}
.page-template-page-transparenz .breadcrumbs .breadcrumb_last{color:#0c090a;font-weight:600}
/* header follows the (now in-flow) breadcrumbs: less top padding than the theme's 70px */
.page-template-page-transparenz .breadcrumbs+.page-header{padding-top:36px}
@media(max-width:767px){
  .page-template-page-transparenz .breadcrumbs{font-size:12px;padding-top:20px}
  .page-template-page-transparenz .breadcrumbs+.page-header{padding-top:24px}
}

/* --- Page header (rendered from the page title by the template) --------- */
.page-template-page-transparenz .page-header{margin-bottom:56px;padding-top:70px}
.page-template-page-transparenz .page-header h1{font-size:3rem;line-height:1.167;margin:0;padding-top:22px;position:relative}
.page-template-page-transparenz .page-header h1:before{background:#007c8e;content:"";height:3px;left:0;position:absolute;top:0;width:56px}
@media(max-width:767px){
  .page-template-page-transparenz .page-header{margin-bottom:36px;padding-top:40px}
  .page-template-page-transparenz .page-header h1{font-size:32px;line-height:1.19}
}

/* --- Section heading: infobox without text and link ---------------------
   (class .infobox--heading is added in template-parts/blocks/infobox.php) */
.page-template-page-transparenz .infobox.infobox--heading{background:none;color:#0c090a;margin:72px 0 28px;padding:0!important}
.page-template-page-transparenz .infobox.infobox--heading h4{font-family:"DM Serif Display";font-size:2rem;line-height:1.188;margin:0;padding-top:20px;position:relative}
.page-template-page-transparenz .infobox.infobox--heading h4:before{background:#007c8e;content:"";height:3px;left:0;position:absolute;top:0;width:48px}
.page-template-page-transparenz .page-header+.infobox--heading,
.page-template-page-transparenz .intro+.infobox--heading{margin-top:0}
@media(max-width:767px){
  .page-template-page-transparenz .infobox.infobox--heading{margin:48px 0 20px}
  .page-template-page-transparenz .infobox.infobox--heading h4{font-size:24px;line-height:1.33}
}

/* --- FAQ heading: a section heading directly followed by an accordion ----
   Detected in CSS via :has() so the block markup stays untouched; the
   editor class "faq" works as a fallback for browsers without :has().
   The two selectors are kept in separate rules on purpose: an unsupported
   :has() would otherwise invalidate the whole rule. */
.page-template-page-transparenz .infobox.infobox--heading.faq{margin:48px 0 8px}
.page-template-page-transparenz .infobox.infobox--heading:has(+.accordion){margin:48px 0 8px}
.page-template-page-transparenz .infobox.infobox--heading.faq h4{color:#007c8e;font-family:Montserrat,sans-serif;font-size:.875rem;font-weight:600;letter-spacing:.08em;line-height:1.714;padding-top:0;text-transform:uppercase}
.page-template-page-transparenz .infobox.infobox--heading:has(+.accordion) h4{color:#007c8e;font-family:Montserrat,sans-serif;font-size:.875rem;font-weight:600;letter-spacing:.08em;line-height:1.714;padding-top:0;text-transform:uppercase}
.page-template-page-transparenz .infobox.infobox--heading.faq h4:before{display:none}
.page-template-page-transparenz .infobox.infobox--heading:has(+.accordion) h4:before{display:none}

/* --- Lists: main.dist.css sizes p (14px/1.714) but not li, which inherits
   body's 16px/1.5. Align lists in text, accordion and infobox blocks with p. */
.page-template-page-transparenz .basic-content ul,
.page-template-page-transparenz .basic-content ol,
.page-template-page-transparenz .accordion__item__text ul,
.page-template-page-transparenz .accordion__item__text ol,
.page-template-page-transparenz .infobox ul,
.page-template-page-transparenz .infobox ol{font-size:.875rem;line-height:1.714}

/* --- Real infobox (with text, e.g. "Noch Fragen?") -----------------------
   All blocks on these pages have "Abstand nach unten entfernen" set, so the
   box needs its own distance to the block above it. */
.page-template-page-transparenz .infobox:not(.infobox--heading){margin-top:72px}
@media(max-width:767px){.page-template-page-transparenz .infobox:not(.infobox--heading){margin-top:48px}}
/* grey instead of the theme's turquoise (#007c8e), as in the design; button keeps its navy */
.page-template-page-transparenz .infobox:not(.infobox--heading):not(.white){background:#f1f1f0;color:#0c090a;padding:48px 36px!important}
@media(max-width:900px){.page-template-page-transparenz .infobox:not(.infobox--heading):not(.white){padding:32px 20px!important}}
.page-template-page-transparenz .infobox:not(.infobox--heading):not(.white) .btn{background:#003c61;color:#fff}

/* --- Content width ---------------------------------------------------------
   The intro block is narrower by design (.intro .center-wrapper max-width 770px),
   everything else uses the 1150px center-wrapper. Two ways to unify this;
   exactly one should be active. To swap: wrap the active rule in a comment
   and move the other one out of the comment.

   Option A (inactive) – intro as wide as the rest (1150px):
   .page-template-page-transparenz .intro .center-wrapper{max-width:1150px}

   Option B (active) – page header, text, accordion and infobox blocks as
   narrow as the intro (770px); only the cards keep the full 1150px:       */
.page-template-page-transparenz .page-header .center-wrapper,
.page-template-page-transparenz .basic-content .center-wrapper,
.page-template-page-transparenz .accordion .center-wrapper,
.page-template-page-transparenz .infobox .center-wrapper{max-width:770px}

/* --- Subpage cards (acf/subpage-cards) ---------------------------------- */
.page-template-page-transparenz .subpage-cards{margin-bottom:80px;margin-top:72px}
.page-template-page-transparenz .subpage-cards__grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1023px){.page-template-page-transparenz .subpage-cards__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.page-template-page-transparenz .subpage-cards__grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.page-template-page-transparenz .subpage-cards{margin-bottom:40px;margin-top:48px}}

.page-template-page-transparenz .card{background:#fff;border:1px solid #ebebeb;border-radius:2px;box-shadow:0 8px 14px 0 rgba(216,221,230,.5);color:#0c090a;display:flex;flex-direction:column;padding:28px 24px 24px;text-decoration:none;transition:box-shadow .3s cubic-bezier(.25,.46,.45,.94),transform .3s cubic-bezier(.25,.46,.45,.94)}
.page-template-page-transparenz .card:hover{box-shadow:0 23px 24px 2px rgba(0,0,0,.1);transform:translateY(-2px)}
.page-template-page-transparenz .card:focus-visible{outline:2px solid #007c8e;outline-offset:2px}
.page-template-page-transparenz .card__head{align-items:center;display:flex;gap:16px;margin-bottom:12px}
.page-template-page-transparenz .card__icon{flex:none;height:48px;width:48px}
.page-template-page-transparenz .card__icon img{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}
.page-template-page-transparenz .card h3{font-size:1.5rem;line-height:1.2;margin:0}
.page-template-page-transparenz .card p{font-size:.875rem;line-height:1.714;margin:0 0 20px;padding-left:64px}
/* "Mehr erfahren →" reuses .btn--text from main.dist.css, recoloured navy */
.page-template-page-transparenz .card .btn.btn--text{color:#003c61;font-size:12px;font-weight:600;letter-spacing:.06em;margin-top:auto;padding:0 0 0 64px;text-transform:uppercase}
.page-template-page-transparenz .card .btn.btn--text:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='12'%3E%3Cpath d='m83.154 6.192-4.409 4.722a.281.281 0 0 1-.392.013.294.294 0 0 1-.013-.395l3.97-4.254H1.276A.277.277 0 0 1 1 6.001c0-.154.123-.278.276-.278H82.31l-3.97-4.254a.292.292 0 0 1 .013-.395.278.278 0 0 1 .392.013l4.409 4.723a.3.3 0 0 1 0 .382z' fill='%23003c61' fill-rule='nonzero' stroke='%23003c61'/%3E%3C/svg%3E")}
.page-template-page-transparenz .card .btn.btn--text:active{color:#003c61}
.page-template-page-transparenz .card--no-icon p,
.page-template-page-transparenz .card--no-icon .btn.btn--text{padding-left:0}

/* --- Table (core/table, allowed only on the Transparenz template) ---------
   From the design canvas "Transparenzseite Tabelle": uppercase petrol
   header row on light grey with a 2px petrol rule, hairline rows, muted
   caption below. The theme dequeues WordPress's block CSS, so everything
   the table needs is here. Editor options that map to this:
   "Header section" toggle -> thead styling; caption -> footnote;
   block style "Erste Spalte fett" -> bold first column;
   "Fixed width table cells" -> table-layout fixed. */
.page-template-page-transparenz .wp-block-table{margin:56px auto;max-width:770px;padding:0 20px;width:100%}
@media(max-width:767px){.page-template-page-transparenz .wp-block-table{margin:40px auto}}
.page-template-page-transparenz .wp-block-table table{border-collapse:collapse;font-size:.875rem;line-height:1.714;width:100%}
.page-template-page-transparenz .wp-block-table table.has-fixed-layout{table-layout:fixed}
.page-template-page-transparenz .wp-block-table thead th,
.page-template-page-transparenz .wp-block-table thead td{background:#f6f7f8;border-bottom:2px solid #007c8e;color:#007c8e;font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1.5;padding:12px 16px;text-align:left;text-transform:uppercase;vertical-align:bottom}
.page-template-page-transparenz .wp-block-table tbody td,
.page-template-page-transparenz .wp-block-table tbody th{border-bottom:1px solid #ebebeb;padding:14px 16px;text-align:left;vertical-align:top}
.page-template-page-transparenz .wp-block-table tfoot td,
.page-template-page-transparenz .wp-block-table tfoot th{background:#f1f1f0;font-weight:600;padding:14px 16px;text-align:left}
/* right-aligned cells (editor: cell alignment) get tabular figures */
.page-template-page-transparenz .wp-block-table .has-text-align-right{font-variant-numeric:tabular-nums;white-space:nowrap}
.page-template-page-transparenz .wp-block-table .has-text-align-center{text-align:center}
.page-template-page-transparenz .wp-block-table .has-text-align-right{text-align:right}
.page-template-page-transparenz .wp-block-table.is-style-first-col-bold tbody td:first-child,
.page-template-page-transparenz .wp-block-table.is-style-first-col-bold tbody th:first-child{font-weight:600}
.page-template-page-transparenz .wp-block-table figcaption{color:#777c8a;font-size:12px;line-height:1.5;margin-top:12px;text-align:left}
/* narrow screens: keep the table intact and let it scroll sideways */
@media(max-width:767px){
  .page-template-page-transparenz .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .page-template-page-transparenz .wp-block-table table{min-width:520px}
  .page-template-page-transparenz .wp-block-table thead th,
  .page-template-page-transparenz .wp-block-table thead td,
  .page-template-page-transparenz .wp-block-table tbody td,
  .page-template-page-transparenz .wp-block-table tbody th,
  .page-template-page-transparenz .wp-block-table tfoot td,
  .page-template-page-transparenz .wp-block-table tfoot th{padding:10px 12px}
}

/* --- Button (acf/button-link): centered navy button ---------------------- */
.page-template-page-transparenz .button-link{margin:40px 0 56px;text-align:center}
.page-template-page-transparenz .button-link .center-wrapper{max-width:770px}
.page-template-page-transparenz .button-link .btn{background:#003c61;color:#fff}
.page-template-page-transparenz .button-link .btn:hover{background:#007c8e}
@media(max-width:767px){.page-template-page-transparenz .button-link{margin:32px 0 40px}}

/* --- Accordion mit Symbol (acf/accordion-icons) --------------------------
   From the design "360 Traineeship – Collapsible Blocks": rounded panels
   (1px border, 8px radius, 16px apart), tinted header with a 5px accent
   border-left, 44px symbol circle, serif title, +/− in the accent colour.
   Accents: i = petrol (theme #007c8e), § = #4d4a8c, € = #a8572a.
   Not scoped to the template class: the block only exists for these pages
   and this file is only loaded by the Transparenz template.
   The +/− reuses the theme's :before (horizontal) / :after (vertical) bars. */
.accordion-icons .accordion__list{display:flex;flex-direction:column;gap:16px}
.accordion-icons .accordion__item{--ai-accent:#007c8e;--ai-bg:#f2f8f9;--ai-bg-hover:#e7f1f3;--ai-border:#dfe7e8;border:1px solid var(--ai-border);border-radius:8px;overflow:hidden}
.accordion-icons .accordion__item--legal{--ai-accent:#4d4a8c;--ai-bg:#f5f4f9;--ai-bg-hover:#ecebf3;--ai-border:#e3e1ea}
.accordion-icons .accordion__item--finance{--ai-accent:#a8572a;--ai-bg:#faf6f2;--ai-bg-hover:#f3ece5;--ai-border:#e9e2dc}
.accordion-icons .accordion__item .accordion__item__hl{align-items:center;background:var(--ai-bg);border-left:5px solid var(--ai-accent);color:#0c090a;display:flex;gap:18px;padding:20px 64px 20px 22px;transition:background .3s cubic-bezier(.25,.46,.45,.94)}
.accordion-icons .accordion__item .accordion__item__hl:hover{background:var(--ai-bg-hover)}
.accordion-icons .accordion__item input:checked+.accordion__item__hl{color:#0c090a}
.accordion-icons .accordion__icon{align-items:center;background:var(--ai-accent);border-radius:50%;color:#fff;display:flex;flex:none;font-family:"DM Serif Display";font-size:22px;height:44px;justify-content:center;line-height:1;width:44px}
.accordion-icons .accordion__item .accordion__item__hl h4{font-size:24px;line-height:1.2;margin:0}
.accordion-icons .accordion__item .accordion__item__hl:before,
.accordion-icons .accordion__item .accordion__item__hl:after,
.accordion-icons .accordion__item input:checked+.accordion__item__hl:before{background:var(--ai-accent)}
.accordion-icons .accordion__item .accordion__item__hl:before{height:2px;right:22px;width:18px}
.accordion-icons .accordion__item .accordion__item__hl:after{height:18px;margin-top:-9px;right:30px;width:2px}
.accordion-icons .accordion__item .accordion__item__text{padding:8px 24px 24px 27px}
.accordion-icons .accordion__item .accordion__item__text p{margin:0 0 14px}
.accordion-icons .accordion__item .accordion__item__text>:last-child{margin-bottom:0}
@media(max-width:767px){
  .accordion-icons .accordion__item .accordion__item__hl{gap:14px;padding:16px 52px 16px 16px}
  .accordion-icons .accordion__icon{font-size:18px;height:36px;width:36px}
  .accordion-icons .accordion__item .accordion__item__hl h4{font-size:20px}
  .accordion-icons .accordion__item .accordion__item__hl:before{right:16px}
  .accordion-icons .accordion__item .accordion__item__hl:after{right:24px}
  .accordion-icons .accordion__item .accordion__item__text{padding:4px 16px 20px 21px}
}
/* visually hidden label for the symbol ("Rechtliche Grundlagen: …") */
.screen-reader-text{clip:rect(0,0,0,0);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}

/* Editor/preview only: shown when the page has no child pages yet */
.page-template-page-transparenz .subpage-cards__empty,
.subpage-cards__empty{border:1px dashed #d8d8d8;border-radius:2px;color:#777c8a;font-size:.875rem;padding:20px;text-align:center}