/**
 * Portfolio Elements: CONTACT Elements matrix.
 *
 * Grid model: .matrix spans --matrix-total columns (label column plus --matrix-columns element
 * columns). Every band spans a whole number of those columns and repeats the same track count
 * internally, so a tile is always exactly one grid column wide, no matter how wide its band is.
 * Column bands are bottom aligned, which produces the stepped top edge of the reference layout
 * without any calculation.
 */

/* Positioning context of the background image layer further down. */
.t11 .functions {
    position: relative;
    padding-top: 50px;
    padding-bottom: 60px;
    color: #fff;
}

.t11 .functions-headline {
    margin-bottom: 40px;
}

/* Description and call to action next to each other. The distance to the matrix moves from the
   description to the wrapper, because a flex item is a block formatting context: the bottom margin
   of the last paragraph can no longer collapse out of the description the way it did before. */
.t11 .functions-header-body {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 50px;
}

.t11 .functions-description {
    width: 70%;
}

.t11 .functions-description > *:last-child {
    margin-bottom: 0;
}

/* Placement only. The button itself stays the btn btn-primary of the site, the same component the
   page header and the ne/button element use, so it needs no own look. margin-left pushes it to the
   right edge of the section, which is where the matrix ends as well. */
.t11 .functions-cta {
    margin-left: auto;
    max-width: 30%;
    white-space: wrap;
}

@media (max-width: 767px) {
    .t11 .functions-header-body {
        display: block;
    }

    .t11 .functions-description {
        width: 100%;
    }

    .t11 .functions-cta {
        margin-top: 25px;
        max-width: 100%;
    }
}

/* Section background ---------------------------------------------------- */

/* Own layer between the theme color and the content. The background color of the section is
   painted below every descendant, so the image covers it without a negative z-index - which would
   need a stacking context on .functions to stay reliable. */
.t11 .functions-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* The view helper renders a <picture>, which is inline by default. */
.t11 .functions-media-obj,
.t11 .functions-media-obj > img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Fills the section in both directions, bgpos_anchor decides through object-position which part of
   the image survives the crop. Its default, center, is the CSS default as well, so a record
   without a maintained anchor needs no inline style. */
.t11 .functions-media-obj > img {
    object-fit: cover;
}

/* A positioned element paints above the in-flow content of its parent, so the content needs a
   layer of its own to stay above the image. */
.t11 .functions > .container {
    position: relative;
    z-index: 1;
}

/* Grid ------------------------------------------------------------------ */

.t11 .matrix {
    --matrix-gap: 10px;
    --tile-radius: 0;
    --tile-font-size: 13px;

    display: grid;
    grid-template-columns: repeat(var(--matrix-total, 12), 1fr);
    column-gap: var(--matrix-gap);
    row-gap: calc(var(--matrix-gap) * 2);
}

.t11 .matrix-phases,
.t11 .matrix-foundation {
    display: grid;
    gap: var(--matrix-gap);
}

/* The phase block leaves the label column of the foundation rows free. */
.t11 .matrix-phases {
    grid-column: 2 / -1;
    grid-template-columns: repeat(var(--matrix-columns, 11), 1fr);
    align-items: end;
}

.t11 .matrix-foundation {
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--matrix-total, 12), 1fr);
}

/* Bands ----------------------------------------------------------------- */

.t11 .matrix-band {
    display: grid;
    gap: var(--matrix-gap);
    min-width: 0;
}

.t11 .matrix-band--column {
    grid-column: span var(--band-columns);
    grid-template-columns: repeat(var(--band-columns), 1fr);
    align-self: end;
}

.t11 .matrix-band--row {
    grid-column: 1 / span var(--band-span);
    grid-template-columns: 1fr repeat(var(--band-columns), 1fr);
}

.t11 .matrix-band .matrix-tiles {
    display: grid;
    grid-template-columns: repeat(var(--band-columns), 1fr);
    gap: var(--matrix-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.t11 .matrix-band--column .matrix-tiles {
    grid-column: 1 / -1;
}

/* Label sits in column one, the tiles fill the rest of the row. */
.t11 .matrix-band--row .matrix-tiles {
    grid-column: 2 / -1;
}

/* Column bands fill from the bottom: a band whose tile count is not a multiple of its column count
   keeps the free cells at the top right instead of under the last tile, so the bottom edge of the
   matrix stays closed. The pseudo element holds those cells at the end of the first row, which
   sends the tile that would sit there into the next row; every row below is full. MatrixFactory
   hands the count out for column bands only and only when there is a remainder, so the class is
   never on a band with a span of zero. */
.t11 .matrix-tiles--lead-gap::before {
    content: '';
    grid-row: 1;
    grid-column: span var(--tiles-lead-gap) / -1;
}

/* Label and tiles share one square raster. Their content is taken out of the flow, otherwise a
   long title would stretch the row and the raster would stop being square. */
.t11 .matrix-label,
.t11 .matrix-tile {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    /* overflow: hidden; */
}

.t11 .matrix-label {
    background: #fff;
    border-radius: var(--tile-radius);
    color: var(--label-color, #003254);
}

.t11 .matrix-label-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 5px;
    font-size: var(--tile-font-size);
    font-weight: 700;
    line-height: 1.2;
    hyphens: auto;
    overflow-wrap: break-word;
    /* overflow: hidden; */
}

/* The stop list carries start color, both intermediate colors and end color including their
   positions. The fallback holds both plain colors, not just --band-from: a var() fallback may
   contain commas, so a cached template without --band-stops keeps the previous two-color gradient
   instead of degrading to a flat color. */
.t11 .matrix-label--filled {
    background: linear-gradient(var(--band-angle, -120deg), var(--band-stops, var(--band-from), var(--band-to)));
    color: #fff;
}

/* A band without a single active tile is taken back: the white area stays, at half opacity, and
   the label keeps its dark text so it remains readable over any section background. */
.t11 .matrix-band--empty .matrix-label {
    background: rgba(255, 255, 255, 0.5);
    color: #003254;
}

.t11 .matrix-label-icon {
    display: block;
    width: 68%;
    height: auto;
    margin-top: auto;
    /* Cancels the body padding so the star sits on the tile edge, as in the reference layout. */
    margin-left: -12px;
    margin-bottom: -2px;
    align-self: flex-start;
}

/* Tiles ----------------------------------------------------------------- */

/* Each tile carries the full band gradient, not a slice of it. */
.t11 .matrix-tile {
    background: linear-gradient(var(--band-angle, -120deg), var(--band-stops, var(--band-from), var(--band-to)));
    border-radius: var(--tile-radius);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.t11 .matrix-tile-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 6px;
    /* Light bands carry a maintained category color, everything else stays white. */
    color: var(--tile-text-color, #fff);
    font-size: var(--tile-font-size);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    hyphens: auto;
    overflow-wrap: break-word;
    overflow: hidden;
}

.t11 .functions a.matrix-tile-body,
.t11 .functions a.matrix-tile-body:hover,
.t11 .functions a.matrix-tile-body:focus {
    color: var(--tile-text-color, #fff);
    text-decoration: none;
}

/* Line clamp keeps a long title from pushing the short code out of the tile. Three lines is what a
   square tile holds next to the short code at every breakpoint, so a fourth would never be more
   than a sliver cut through the middle of its glyphs. */
.t11 .matrix-tile-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.t11 .matrix-tile-tag {
    flex: 0 0 auto;
    margin-top: auto;
    align-self: flex-end;
    /* Measured in Kacheln-alle-aktiv.png: same hue as the title at roughly 0.75 opacity. */
    color: inherit;
    opacity: 0.75;
    font-size: clamp(16px, 1.6vw, 28px);
    line-height: 1;
}

/* Hover and focus only on tiles that lead somewhere. The toggle is excluded: it keeps its outline
   box, a shadow around the bare icon would read as a second tile. */
.t11 .matrix-tile:has(a.matrix-tile-body):hover,
.t11 .matrix-tile:not(.matrix-tile--toggle):focus-within {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.t11 .matrix-tile-body:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Tiles outside the base selection of the element: no fill, the section background shows through,
   so the hole in the band is readable. A tile that only lost its link over the page field "Noch
   nicht in Swimlane verlinken" does not get this class: it belongs to the matrix and keeps the look
   of a linked tile, it just has no hover, see the :has(a) condition above. */
.t11 .matrix-tile--inactive {
    background: none;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* No fill behind the text here, so white stays readable over any section background. */
.t11 .matrix-tile--inactive .matrix-tile-body,
.t11 .functions a.matrix-tile--inactive .matrix-tile-body {
    color: #fff;
}

/* Toggle ---------------------------------------------------------------- */

/* Grid items need this, otherwise display: grid beats the hidden attribute. */
.t11 .matrix [hidden] {
    display: none !important;
}

.t11 .matrix-tile--toggle {
    background: none;
    box-shadow: none;
}

.t11 .matrix-toggle {
    display: flex;
    align-items: end;
    justify-content: end;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 6px;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
}

.t11 .matrix-toggle[aria-expanded="true"] {
    align-items: center;
    justify-content: center;
}

/* Keyboard focus stays visible as an outline, so dropping the shadow costs no accessibility. */
.t11 .matrix-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}

/* Measured in mobile-2.png: a single square of the icon is 5px on a 32.5px tile, so 15.4% of the
   tile width. The squares are 14 of 40 viewBox units, and a tile stays between 82 and 88px over the
   whole row layout, which puts the icon at 34px and makes a viewport-relative size pointless. */
.t11 .matrix-toggle-icon svg {
    display: block;
    width: 34px;
    height: auto;
    fill: currentColor;
}

/* Number of tiles still hidden. frontend.js fills it and hides it again once the band is open.
   Next to the icon, not on its corner: all four quadrants of the icon carry a square, so an
   overlapping badge reads as a broken icon. White fill, because the icon color alone would not
   separate the digits from a section background image. */
.t11 .matrix-toggle-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #fff;
    color: #003254;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-left: -5px;
    margin-bottom: 4px;
}

.t11 .matrix-toggle .matrix-toggle-minus,
.t11 .matrix-toggle[aria-expanded="true"] .matrix-toggle-plus {
    display: none;
}

.t11 .matrix-toggle[aria-expanded="true"] .matrix-toggle-minus {
    display: block;
}

/* Screen reader only, the icon carries the meaning visually. */
.t11 .matrix-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Peek tile ------------------------------------------------------------- */

/* Collapsed band: the first tile past the visible ones is not taken out, it stays in place as the
   faded backdrop of the toggle, as in Design-Overlay-Icon-Badge.png. Both cells are placed on the
   last column of the first row instead of following each other, because a collapsed band shows
   --mobile-visible tiles plus exactly this one cell. Explicit placement for the tile as well:
   auto placement skips a cell an explicitly placed item holds and would push the tile into a
   second row rather than stack the two. The toggle follows the tile in the template, so it paints
   over it without a z-index. Expanded, frontend.js drops the class and the toggle moves back to
   the end of the band. */
.t11 .matrix-tiles:has(.matrix-tile--peek) .matrix-tile--peek,
.t11 .matrix-tiles:has(.matrix-tile--peek) .matrix-tile--toggle {
    grid-row: 1;
    grid-column: -2 / -1;
}

/* Fades into whatever is behind the section, so the same value holds over the theme color and over
   a background image. Decorative in this state: the toggle covers it, frontend.js marks it inert,
   and pointer-events keeps hover and the scale transition off it where inert is unsupported. */
.t11 .matrix-tile--peek {
    opacity: 0.3;
    pointer-events: none;
}

/* The short code sits exactly where the icon does; the design shows the title alone. */
.t11 .matrix-tile--peek .matrix-tile-tag {
    display: none;
}

/* Row layout up to tablet landscape ------------------------------------- */

/* --mobile-visible is the number of tiles shown before the toggle. The script reads this value,
   so the staggering below is the single place that defines it. */
@media (max-width: 991px) {
    .t11 .matrix {
        display: block;
    }

    .t11 .matrix-phases,
    .t11 .matrix-foundation {
        display: block;
    }

    /* Tighter gaps here, the space belongs to the tiles. */
    .t11 .matrix {
        --matrix-gap: 4px;
    }

    .t11 .matrix-band,
    .t11 .matrix-band--column,
    .t11 .matrix-band--row {
        grid-column: auto;
        grid-template-columns: 1.15fr repeat(3, 1fr);
        margin-bottom: calc(var(--matrix-gap) * 2);
    }

    /* Two tiles plus the toggle: wider tiles, so long titles fit at this font size. */
    .t11 .matrix-band .matrix-tiles {
        grid-column: 2 / -1;
        grid-template-columns: repeat(3, 1fr);
    }

    /* Every band is one row here, cut off by the toggle, so there is no bottom edge to even out. */
    .t11 .matrix-tiles--lead-gap::before {
        content: none;
    }

    /* Reduced view: bands without a single active tile are not worth the space here. */
    .t11 .matrix-band--empty {
        display: none;
    }

    /* The label column is 1.15fr and a tile 1fr at aspect-ratio 1/1.15, so the label width equals
       one tile row height: a square label is exactly as high as one row of tiles. start instead of
       the default stretch keeps that height when the band is expanded over several rows. Its
       content is back in the flow, so a long title can still push the cell higher. */
    .t11 .matrix-label {
        align-self: start;
        aspect-ratio: 1.15;
    }

    .t11 .matrix-label-body {
        position: static;
        padding: 8px 6px;
        font-size: 14px;
    }

    .t11 .matrix-label-icon {
        width: 34px;
        margin-left: 0;
        margin-top: 8px;
    }

    .t11 .matrix-tile-body {
        font-size: 11px;
        padding: 8px 5px;
    }

    .t11 .matrix-tile-tag {
        font-size: 26px;
        font-weight: 700;
    }

    /* A shadow instead of the scale, and only on tiles that lead somewhere: same condition as the
       desktop rule, so a tile without a link stays without a hover effect after a tap as well. */
    .t11 .matrix-tile:has(a.matrix-tile-body):hover,
    .t11 .matrix-tile:not(.matrix-tile--toggle):focus-within {
        transform: none;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
}

/* Small phones keep two tiles, wider screens fit more before the toggle. */
@media (max-width: 991px) {
    .t11 .matrix {
        --mobile-visible: 2;
    }

    .t11 .matrix-band,
    .t11 .matrix-band--column,
    .t11 .matrix-band--row {
        grid-template-columns: 1.15fr repeat(3, 1fr);
    }

    .t11 .matrix-band .matrix-tiles {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .t11 .matrix {
        --mobile-visible: 4;
    }

    .t11 .matrix-band,
    .t11 .matrix-band--column,
    .t11 .matrix-band--row {
        grid-template-columns: 1.15fr repeat(5, 1fr);
    }

    .t11 .matrix-band .matrix-tiles {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .t11 .matrix {
        --mobile-visible: 6;
    }

    .t11 .matrix-band,
    .t11 .matrix-band--column,
    .t11 .matrix-band--row {
        grid-template-columns: 1.15fr repeat(7, 1fr);
    }

    .t11 .matrix-band .matrix-tiles {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* Compact matrix ------------------------------------------------------- */

/* A tile stays at about 74px over this whole range, so title and short code have to share 64px of
   inner height. The short code takes a fixed size instead of the vw based one of the base rule,
   which would grow to 23px towards 1440px and eat into the third title line. The title is the
   shrinking flex item, so the short code keeps its space in any case. */
@media (min-width: 992px) and (max-width: 1439px) {
    .t11 .matrix-tile-tag {
        font-size: 17px;
    }

    .t11 .matrix-tile-body,
    .t11 .matrix-label-body {
        padding: 5px;
    }
}

/* At 992px a tile is only about 71px wide. 14px would cut most titles, so this range steps down.
   The gap grows with the tile size: 4px in the row layout, then 5, 7 and 10px. */
@media (min-width: 992px) and (max-width: 1199px) {
    .t11 .matrix {
        --matrix-gap: 5px;
        --tile-font-size: 12px;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .t11 .matrix {
        --matrix-gap: 7px;
    }
}

/* Full matrix ---------------------------------------------------------- */

/* Automatic hyphenation is switched off from the width on where no word needs it any more. It buys
   nothing here, because every word of the data set fits a line at 13px - but it still splits words
   to pack a line tighter, and every engine picks its own point: Firefox turns "Data Management"
   into "Data Manage-" plus "ment" where Chrome keeps "Data" and "Management" on lines of their own,
   and a Chrome whose hyphenation dictionary never downloaded never hyphenates at all. With manual
   every browser breaks at the spaces alone; measured over the ten longest titles, Chrome 153 and
   Firefox 156 then come out line for line identical. Below 1440px the narrower tile does have words
   that outgrow their line, so auto keeps its place there - it is the difference between five and
   eight of those titles being cut off in Firefox. */
@media (min-width: 1440px) {
    .t11 .matrix-tile-body,
    .t11 .matrix-label-body {
        hyphens: manual;
    }
}