/* =========================================================
TRAUERSEITE
Gedenkkarte für Werner Wenzl
Schrift: Outfit
========================================================= */

/* =========================================================
OUTFIT
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* =========================================================
SEITENBEREICH
========================================================= */

.mourning-page {
width: 100%;
min-height: 100%;

display: flex;
align-items: flex-start;
justify-content: center;

padding: 3rem 1.25rem 4rem;

box-sizing: border-box;

background:
linear-gradient(
135deg,
#f3f4f3 0%,
#e7e9e8 50%,
#f5f5f4 100%
);

font-family: "Outfit", sans-serif;
}

/* =========================================================
GEDENKKARTE
========================================================= */

.mourning-card {
position: relative;

width: min(100%, 700px);

overflow: hidden;

background: #ffffff;

border: 1px solid rgba(30, 35, 35, 0.10);

border-radius: 12px;

box-shadow:
0 30px 80px rgba(0, 0, 0, 0.14),
0 10px 30px rgba(0, 0, 0, 0.07);

box-sizing: border-box;
}

/* dezenter oberer Akzent */

.mourning-card::before {
content: "";

position: absolute;

top: 0;
left: 50%;

z-index: 5;

width: 90px;
height: 3px;

transform: translateX(-50%);

background: #555;
}

/* =========================================================
OBERES GEDENKBILD
========================================================= */

.mourning-card__header-image {
position: relative;

width: 100%;
height: 230px;

overflow: hidden;

background: #dedfdd;
}

.mourning-card__header-image-img {
width: 100%;
height: 100%;

display: block;

object-fit: cover;
object-position: center;

filter:
grayscale(25%)
contrast(92%)
brightness(88%);

transform: scale(1.01);
}

/* dezenter Verlauf über dem Bild */

.mourning-card__header-overlay {
position: absolute;

inset: 0;

background:
linear-gradient(
to bottom,
rgba(20, 24, 24, 0.04) 0%,
rgba(20, 24, 24, 0.08) 55%,
rgba(20, 24, 24, 0.30) 100%
);

pointer-events: none;
}

/* =========================================================
KARTENINHALT
========================================================= */

.mourning-card__content {
padding: 3.5rem 4rem 3rem;

text-align: center;

box-sizing: border-box;
}

/* =========================================================
TAUBE
========================================================= */

.mourning-card__flourish {
margin-bottom: 1.1rem;

font-size: 2.4rem;
line-height: 1;

opacity: 0.55;

filter: grayscale(1);
}

/* =========================================================
PORTRÄT
========================================================= */

.mourning-card__portrait {
width: 130px;
height: 130px;

margin: 0 auto 1.5rem;

overflow: hidden;

border-radius: 50%;

border: 5px solid #ffffff;

box-shadow:
0 5px 20px rgba(0, 0, 0, 0.14),
0 0 0 1px rgba(0, 0, 0, 0.08);

background: #eee;

box-sizing: border-box;
}

.mourning-card__portrait-image {
width: 100%;
height: 100%;

display: block;

object-fit: cover;

filter:
grayscale(20%)
contrast(95%);
}

/* =========================================================
EINLEITUNG
========================================================= */

.mourning-card__eyebrow {
margin: 0 0 0.7rem;

color: #777;

font-size: 0.78rem;
font-weight: 500;

letter-spacing: 0.22em;

text-transform: uppercase;
}

/* =========================================================
NAME
========================================================= */

.mourning-card h1 {
margin: 0;

color: #242727;

font-size: clamp(2.35rem, 6vw, 3.4rem);

font-weight: 500;

line-height: 1.1;

letter-spacing: -0.02em;
}

/* =========================================================
FUNKTION
========================================================= */

.mourning-card__role {
margin: 0.55rem 0 0;

color: #707474;

font-size: 1rem;
font-weight: 400;

line-height: 1.5;
}

.mourning-card__role--honor {
max-width: 500px;

margin-left: auto;
margin-right: auto;

font-size: 0.9rem;

color: #858888;
}

/* =========================================================
TODESDATUM
========================================================= */

.mourning-card__date {
display: flex;

align-items: center;
justify-content: center;

gap: 0.65rem;

margin-top: 1.5rem;

color: #555b5a;
}

.mourning-card__date-symbol {
font-family: Georgia, serif;

font-size: 1.25rem;

color: #666c6b;
}

.mourning-card__date-text {
font-size: 0.95rem;
font-weight: 500;

letter-spacing: 0.04em;
}

.mourning-card__date-caption {
margin: 0.35rem 0 0;

color: #999;

font-size: 0.75rem;
font-weight: 300;

letter-spacing: 0.08em;

text-transform: uppercase;
}

/* =========================================================
TRENNLINIE
========================================================= */

.mourning-card__divider {
width: 70px;
height: 1px;

margin: 2rem auto 2rem;

background:
linear-gradient(
to right,
transparent,
#aeb1b0,
transparent
);
}

/* =========================================================
TEXTBEREICH
========================================================= */

.mourning-card__text {
max-width: 540px;

margin: 0 auto;

color: #555a59;

font-size: 1rem;

font-weight: 300;

line-height: 1.8;

text-align: center;
}

.mourning-card__text p {
margin: 0 0 1.3rem;
}

.mourning-card__text p:last-child {
margin-bottom: 0;
}

/* =========================================================
ERSTER ABSATZ
========================================================= */

.mourning-card__text p:first-child {
margin-bottom: 1.6rem;

color: #363b3a;

font-size: 1.08rem;

font-weight: 400;

line-height: 1.7;
}

.mourning-card__text strong {
color: #202423;

font-weight: 600;
}

/* =========================================================
ABSCHIED
========================================================= */

.mourning-card__farewell {
display: flex;

align-items: center;
justify-content: center;

gap: 0.8rem;

margin: 2.6rem auto 1.8rem;

color: #888;

text-align: center;
}

.mourning-card__farewell span {
color: #c0c2c1;

font-size: 0.65rem;

line-height: 1;

white-space: nowrap;
}

.mourning-card__farewell p {
margin: 0;

color: #626766;

font-size: 0.95rem;

font-weight: 400;

font-style: italic;

white-space: nowrap;
}

/* =========================================================
FOOTER-BEREICH DER KARTE
========================================================= */

.mourning-card__signature {
margin-top: 0.5rem;

padding-top: 1.6rem;

border-top: 1px solid #e3e5e4;

color: #777d7b;

font-size: 0.82rem;

font-weight: 300;

line-height: 1.6;

text-align: center;
}

.mourning-card__signature p {
margin: 0;
}

.mourning-card__signature p + p {
margin-top: 0.15rem;
}

/* =========================================================
NAVIGATION / FOOTER BUTTONS
========================================================= */

.mourning-card__actions {
display: flex;

align-items: center;
justify-content: center;

flex-wrap: wrap;

gap: 0.7rem;

margin-top: 2rem;
}

.mourning-card__button {
min-height: 44px;

display: inline-flex;

align-items: center;
justify-content: center;

gap: 0.5rem;

padding: 0.65rem 1.1rem;

border-radius: 6px;

box-sizing: border-box;

font-family: "Outfit", sans-serif;

font-size: 0.85rem;
font-weight: 500;

text-decoration: none;

cursor: pointer;

transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}

.mourning-card__button i {
font-size: 1rem;
}

/* Hauptbutton */

.mourning-card__button--primary {
background: #3f4544;

color: #fff;

border: 1px solid #3f4544;
}

.mourning-card__button--primary:hover {
background: #292e2d;

color: #fff;

border-color: #292e2d;

transform: translateY(-1px);

box-shadow:
0 5px 15px rgba(0, 0, 0, 0.12);
}

/* Sekundärer Button */

.mourning-card__button--secondary {
background: #fff;

color: #555b59;

border: 1px solid #d2d5d4;
}

.mourning-card__button--secondary:hover {
background: #f3f4f3;

color: #303534;

border-color: #aeb2b0;

transform: translateY(-1px);
}

/* Fokus */

.mourning-card__button:focus-visible {
outline: 3px solid rgba(70, 80, 78, 0.35);

outline-offset: 3px;
}

/* =========================================================
SCHLUSSWORT
========================================================= */

.mourning-card__closing {
margin: 2rem 0 0;

padding-top: 1.5rem;

border-top: 1px solid #e7e8e7;

color: #8a8f8d;

font-size: 0.82rem;

font-weight: 300;

font-style: italic;

letter-spacing: 0.03em;

text-align: center;
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

.mourning-page {
align-items: flex-start;

padding:
  1.5rem 0.75rem 3rem;

}

.mourning-card {
width: 100%;

border-radius: 10px;

}

.mourning-card__header-image {
height: 190px;
}

.mourning-card__content {
padding:
3rem 1.4rem 2.5rem;
}

.mourning-card__portrait {
width: 115px;
height: 115px;
}

.mourning-card h1 {
font-size: 2.35rem;
}

.mourning-card__text {
font-size: 0.98rem;

line-height: 1.75;

}

.mourning-card__text p:first-child {
font-size: 1.04rem;
}

.mourning-card__farewell {
gap: 0.45rem;
}

.mourning-card__farewell span {
display: none;
}

.mourning-card__farewell p {
font-size: 0.95rem;
}

.mourning-card__actions {
flex-direction: column;

width: 100%;

}

.mourning-card__button {
width: 100%;
}
}

/* =========================================================
SEHR KLEINE GERÄTE
========================================================= */

@media (max-width: 400px) {

.mourning-page {
padding:
1rem 0.5rem 2rem;
}

.mourning-card__header-image {
height: 160px;
}

.mourning-card__content {
padding:
2.5rem 1.1rem 2.2rem;
}

.mourning-card__portrait {
width: 105px;
height: 105px;
}

.mourning-card h1 {
font-size: 2rem;
}

.mourning-card__eyebrow {
font-size: 0.7rem;

letter-spacing: 0.16em;

}

.mourning-card__role--honor {
font-size: 0.82rem;
}
}

/* =========================================================
REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

.mourning-card__button {
transition: none;
}

}