:root {
    --hl-blau: #284980;
    --hl-gruen: #77b554;
}

.action-card {
    background: linear-gradient(135deg, var(--hl-blau), #1f355f);
    color: #fff;
    border-radius: 1.5rem;
    padding: 2rem 1.5rem 2.5rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}

.action-card:hover {
    transform: translateY(-6px) skewY(-0.4deg);
    box-shadow: 0 1.2rem 2rem rgba(0,0,0,.3);
}

.action-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 6px;
    background: var(--hl-gruen);
}

.action-card img {
    width: 80px;
    margin-bottom: 1rem;
}

.action-card h3 {
    font-size: 2rem;
    margin-bottom: .25rem;
}

/* Ergebnisbereich */
.ehrung {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.25);
}

.ehrung-head {

    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .75;
    margin-bottom: .6rem;
}

.ehrung-block {
    margin-bottom: .75rem;
}

.ehrung-name {
    font-weight: 500;
    line-height: 1.25;
    word-break: break-word;
}

.ehrung-zeit {
    margin-top: .2rem;
    font-weight: 700;
    color: var(--hl-gruen);
    letter-spacing: .02em;
}

.rekord-badge {
    margin-left: .4rem;
    cursor: help;
}

.finisher {
    margin-top: .75rem;
    opacity: .9;
}

/* Mobile */
@media (max-width: 575px) {
    .action-card {
        padding: 1rem 0.5rem;
    }
}

.action-card .btn {
    background: #fff;
    color: var(--hl-blau);
    border-radius: .75rem;
}
.foto-rueckblick {
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.1);
	border: 1px solid rgba(0, 0, 0, 0.1) !Important;
}

.foto-bild {
    flex: 0 0 45%;
}

.foto-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foto-text {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.foto-text h3 {
    margin-bottom: .75rem;
}

.foto-text p {
    margin-bottom: 1rem;
}

.foto-cta {
    font-weight: 600;
    color: var(--hl-blau);
}

/* Mobile */
@media (max-width: 767px) {
    .foto-rueckblick {
        flex-direction: column;
    }

    .foto-bild {
        flex: none;
        height: 220px;
    }
}

.rekord-erklaerung {
    font-size: .9rem;
    opacity: .85;
    padding: .75rem 1rem;
    border-top: 1px dashed var(--hl-gruen);
	border-bottom: 1px dashed var(--hl-blau);
}

/* Vorab-Info-Cards */
.info-card {
    display: flex;
    flex-direction: column;
}

.info-icon {
    font-size: 2.6rem;
    margin-bottom: .75rem;
}

.info-card p {
    flex-grow: 1;
    opacity: .9;
    margin-bottom: 1rem;
}

.info-card .btn {
    font-weight: 600;
    color: var(--hl-blau);
}

/* -------------------------------------------
   Feedback Easybook
------------------------------------------- */

.easylast .action-card {
    background: #ffffff;
    color: #212529;
    border-radius: 1.25rem;

    /* dünner Rahmen + Akzent */
    border: 1px solid rgba(0, 0, 0, 0.1) !Important;
    border-left: 6px solid var(--hl-gruen);

    /* dezenter Schatten */
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.06);
}

/* bewusst KEIN Hover-Effekt */
.easylast .action-card:hover {
    transform: none;
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.06);
}


/* -------------------------------------------
   Kopfbereich
------------------------------------------- */

.feedback-name {
    font-weight: 600;
    color: var(--hl-blau);
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.feedback-date {
    font-size: 0.85rem;
    color: #6c757d;
}

/* -------------------------------------------
   Titel & Text
------------------------------------------- */

.feedback-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.feedback-text {
    position: relative;
    line-height: 1.6;
    padding-left: 1rem;
    border-left: 3px solid rgba(40, 73, 128, 0.15);
}

/* -------------------------------------------
   Buttons
------------------------------------------- */

.easylast .btn-light {
    color: var(--hl-blau);
    border-radius: 0.75rem;
}

/* -------------------------------------------
   Optionale zusätzliche Trennung zwischen Einträgen
------------------------------------------- */

.easylast .action-card + .action-card {
    margin-bottom: 3rem;
}