/* ====================================================================
   SEITEN-DESIGN DER HAUPTSITE

   Dieses Regelwerk ist zuerst fuer "Digitalisation & IA" entstanden und
   gilt jetzt fuer alle Unterseiten der Hauptsite, damit sie nicht jede
   fuer sich aussehen. Alle Klassen tragen das Praefix "mt-", damit
   nichts aus dem gekauften Vorlagen-CSS dazwischenfunkt.

   Farben: #00a8ff (Akzent), #0f2440 (Navy), #f6f9fc (heller Grund).

   Die Kachelreihen liegen in CSS-Grid und NICHT im Bootstrap-Raster:
   Bootstrap-Spalten haben unterschiedliche Hoehen, dadurch reisst eine
   Luecke in die Reihe, sobald ein Text laenger ist als der daneben.
   ==================================================================== */
.mt-head          { background: linear-gradient(135deg, #020810 0%, #061226 55%, #0a1a3a 100%);
                     padding: 58px 0 62px; color: #fff; }
.mt-breadcrumb    { font-size: 14px; color: #7fa5c9; margin-bottom: 18px; }
.mt-breadcrumb a  { color: #00a8ff; text-decoration: none; }
.mt-breadcrumb span { margin: 0 8px; color: #456; }
.mt-head h1       { color: #fff; font-size: 38px; font-weight: 700; margin: 0 0 16px; line-height: 1.25; }
.mt-lead          { color: #b9cfe4; font-size: 18px; line-height: 1.75; max-width: 860px; margin: 0; }
.mt-lead strong   { color: #fff; }

.mt-section       { padding: 62px 0; }
.mt-alt           { background: #f6f9fc; }
.mt-center        { text-align: center; max-width: 820px; margin: 0 auto 46px; }
.mt-h2            { font-size: 30px; font-weight: 700; color: #0f2440; margin: 0 0 16px; line-height: 1.3; }
.mt-sub           { font-size: 17px; color: #495664; line-height: 1.75; margin: 0; }
.mt-p             { font-size: 16.5px; color: #475769; line-height: 1.8; margin-bottom: 16px; }
.mt-row-mid       { display: flex; flex-wrap: wrap; align-items: center; }

.mt-badge         { display: inline-block; padding: 9px 18px; border-radius: 25px;
                     background: #e6f5ff; color: #00588a; font-weight: 600; font-size: 14px;
                     margin-bottom: 16px; }
.mt-badge i       { margin-right: 8px; }

/* Kernaussage */
.mt-claimbox      { background: #0f2440; border-radius: 14px; padding: 28px; }
.mt-claim-item    { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; }
.mt-claim-item + .mt-claim-item { border-top: 1px solid rgba(255,255,255,.12); }
.mt-claim-item i  { color: #00a8ff; font-size: 22px; margin-top: 3px; min-width: 24px; }
.mt-claim-item strong { color: #fff; display: block; font-size: 16px; margin-bottom: 4px; }
.mt-claim-item span   { color: #a8bed2; font-size: 14.5px; line-height: 1.65; }

/* Raster */
.mt-grid          { display: grid; gap: 24px; }
.mt-grid-3        { grid-template-columns: repeat(3, 1fr); }
.mt-grid-4        { grid-template-columns: repeat(4, 1fr); }

.mt-step, .mt-card, .mt-proof {
    background: #fff; border: 1px solid #e4ebf2; border-radius: 14px; padding: 28px 24px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mt-step:hover, .mt-card:hover, .mt-proof:hover {
    transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,36,64,.10); border-color: #cfe6f7;
}
.mt-step          { position: relative; }
.mt-step-num      { position: absolute; top: 16px; right: 20px; font-size: 26px; font-weight: 800; color: #eef4fa; }
/* Flach statt Farbverlauf: dieselbe Symbolsprache wie bei den Kacheln
   darunter. Zwei konkurrierende Stile wirken zusammengesetzt. */
.mt-step-icon     { width: 48px; height: 48px; border-radius: 11px; display: flex;
                     align-items: center; justify-content: center; margin-bottom: 16px;
                     background: #e6f5ff; }
.mt-step-icon i   { color: #0072b0; font-size: 20px; }
.mt-card-icon     { width: 48px; height: 48px; border-radius: 11px; background: #e6f5ff;
                     display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.mt-card-icon i   { color: #0072b0; font-size: 20px; }
/* Die Belege stehen bewusst OHNE Karte und ohne Symbol: drei Abschnitte mit
   derselben Kachel hintereinander sehen nach Baukasten aus. Hier traegt der
   Text, nicht der Rahmen. */
.mt-proof         { background: transparent; border: 0; border-left: 3px solid #00a8ff;
                     border-radius: 0; padding: 6px 0 6px 22px; }
.mt-proof:hover   { transform: none; box-shadow: none; border-color: #00a8ff; }
.mt-proof i       { display: none; }
.mt-grid-2        { grid-template-columns: repeat(2, 1fr); gap: 30px 44px; }
.mt-step h3, .mt-card h3, .mt-proof h3 { font-size: 18px; font-weight: 700; color: #0f2440; margin: 0 0 10px; line-height: 1.4; }
.mt-step p, .mt-card p, .mt-proof p    { font-size: 15.5px; color: #495664; line-height: 1.75; margin: 0; }

/* Schulungen */
.mt-list          { list-style: none; padding: 0; margin: 22px 0 0; }
.mt-list li       { padding: 9px 0; color: #475769; font-size: 16px; }
.mt-list li i     { color: #00a8ff; margin-right: 10px; }
.mt-two           { display: grid; gap: 20px; }
.mt-topic         { background: #fff; border: 1px solid #e4ebf2; border-radius: 14px; padding: 24px; }
.mt-topic-head    { font-size: 17px; font-weight: 700; color: #0f2440; margin-bottom: 14px; }
.mt-topic-head i  { color: #00a8ff; margin-right: 9px; }
.mt-topic ul      { list-style: none; padding: 0; margin: 0; }
.mt-topic li      { position: relative; padding: 7px 0 7px 20px; color: #495664; font-size: 15.5px; line-height: 1.65; }
.mt-topic li:before { content: ''; position: absolute; left: 0; top: 15px; width: 7px; height: 7px;
                     border-radius: 50%; background: #00a8ff; }

/* Knoepfe */
.mt-actions       { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.mt-btn           { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px;
                     border-radius: 9px; font-weight: 600; font-size: 15.5px; text-decoration: none;
                     transition: transform .15s, box-shadow .15s, background .15s; }
.mt-btn:hover     { transform: translateY(-2px); text-decoration: none; }
.mt-btn-main      { background: linear-gradient(135deg, #0079b8, #005a8c); color: #fff; }
.mt-btn-main:hover{ color: #fff; box-shadow: 0 10px 24px rgba(0,90,140,.34); }
.mt-btn-ghost     { background: #fff; color: #0072b0; border: 1px solid #cfe6f7; }
.mt-btn-ghost:hover { color: #0072b0; background: #f2faff; }
.mt-btn-light     { background: #fff; color: #0f2440; }
.mt-btn-light:hover { color: #0f2440; }
.mt-btn-outline   { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.mt-btn-outline:hover { color: #fff; background: rgba(255,255,255,.13); }

/* Abschluss */
.mt-cta-wrap      { padding: 0 0 70px; }
.mt-cta           { background: linear-gradient(135deg, #0f2440, #005a8c); border-radius: 16px;
                     padding: 54px 40px; text-align: center; }
.mt-cta h2        { color: #fff; font-size: 28px; font-weight: 700; margin: 0 0 14px; }
.mt-cta p         { color: #dceaf6; font-size: 17px; max-width: 720px; margin: 0 auto 8px; line-height: 1.75; }
.mt-cta .mt-actions { justify-content: center; }

@media (max-width: 991px) {
    .mt-grid-4    { grid-template-columns: repeat(2, 1fr); }
    .mt-grid-2    { grid-template-columns: 1fr; gap: 24px; }
    .mt-grid-3    { grid-template-columns: repeat(2, 1fr); }
    .mt-row-mid   { display: block; }
    .mt-claimbox  { margin-top: 30px; }
}
@media (max-width: 600px) {
    .mt-grid-4, .mt-grid-3, .mt-grid-2 { grid-template-columns: 1fr; }
    .mt-head h1   { font-size: 27px; }
    .mt-h2        { font-size: 23px; }
    .mt-section   { padding: 42px 0; }
    .mt-cta       { padding: 38px 22px; }
    .mt-cta h2    { font-size: 22px; }
    .mt-actions   { justify-content: center; }
}

/* ====================================================================
   ERGAENZUNGEN FUER "A PROPOS"

   Markenleiste und Karten, die unten einen Knopf tragen. Die Karte wird
   zur Flex-Spalte, damit der Knopf in allen drei Karten auf derselben
   Linie sitzt, auch wenn die Texte unterschiedlich lang sind.
   ==================================================================== */
.mt-card {
    display: flex;
    flex-direction: column;
}
.mt-card p        { flex: 1; }
.mt-card .mt-actions { margin-top: 20px; }
.mt-card .mt-btn  { padding: 11px 21px; font-size: 15px; }

.mt-marken {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 26px 56px;
}
.mt-marke img {
    max-height: 38px;
    width: auto;
    filter: grayscale(100%);
    opacity: .55;
    transition: filter .2s, opacity .2s;
}
.mt-marke:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@media (max-width: 600px) {
    .mt-marken   { gap: 22px 34px; }
    .mt-marke img { max-height: 28px; }
}

/* Zeile unter der Themenueberschrift: Niveau, Dauer, Gruppengroesse. */
.mt-topic-meta {
    margin: -6px 0 12px;
    font-size: 14px;
    color: #67747f;
    font-variant-numeric: tabular-nums;
}
.mt-topic .mt-actions { margin-top: 18px; }
.mt-topic .mt-btn     { padding: 11px 21px; font-size: 15px; }