/* ---------------------------------------------------
BASIS (Nur zur Veranschaulichung für diesen Baukasten)
--------------------------------------------------- */
.m75-baukasten {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: #e8e8eb;
padding: 40px;
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
}
/* ---------------------------------------------------
1. DAS HAUPT-BOARD (Das helle Holzbrett)
--------------------------------------------------- */
.m75-part-board {
width: 100%;
max-width: 900px;
min-height: 200px;
background-color: #f4f4f5;
border: 15px solid #ffffff;
border-radius: 8px;
box-shadow: 0 30px 60px rgba(0,0,0,0.1), inset 0 0 20px rgba(0,0,0,0.03);
padding: 30px;
position: relative;
text-align: center;
color: #888;
}
/* ---------------------------------------------------
2. DAS RUNDE HISTORY BADGE (Oben Mitte)
--------------------------------------------------- */
.m75-part-badge {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 15px 25px rgba(0,0,0,0.15), inset 0 -4px 8px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: bold;
color: #333;
font-size: 12px;
}
/* ---------------------------------------------------
3. DER MASSIVE FOTORAHMEN (Mitte Oben)
--------------------------------------------------- */
.m75-part-photoframe {
max-width: 500px;
background: #ffffff;
padding: 12px;
border-radius: 4px;
/* Die dicke Metall-Umrandung */
border-top: 2px solid #fff;
border-left: 2px solid #f0f0f0;
border-bottom: 4px solid #b0b0b0;
border-right: 4px solid #cccccc;
box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}
.m75-part-photoframe-inner {
width: 100%;
height: 250px;
background-color: #ddd; /* Hier kommt später das
![]()
rein */
box-shadow: inset 0 5px 15px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
color: #666;
}
/* ---------------------------------------------------
4. DIE SCHWEBENDE GLAS-PLAKETTE (Die Textboxen)
--------------------------------------------------- */
.m75-part-glass {
width: 100%;
max-width: 400px;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 3px;
padding: 25px;
/* Die Glaskanten */
border-top: 2px solid rgba(255,255,255,1);
border-left: 2px solid rgba(255,255,255,0.8);
border-bottom: 1px solid rgba(0,0,0,0.05);
border-right: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 15px 30px rgba(0,0,0,0.08);
color: #333;
font-size: 14px;
}
/* ---------------------------------------------------
5. DIE METALL-KLAMMERN (Für das Komitee links)
--------------------------------------------------- */
.m75-part-list-with-pins {
list-style: none;
padding: 0;
margin: 0;
}
.m75-part-list-with-pins li {
position: relative;
padding-left: 45px;
margin-bottom: 15px;
}
.m75-part-list-with-pins li::before {
content: '';
position: absolute;
left: -10px;
top: 2px;
width: 40px;
height: 14px;
/* Der Metall-Look der Stifte */
background: linear-gradient(to bottom, #ffffff 0%, #a0a0a0 100%);
border-radius: 2px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.25), inset 1px 1px 2px #fff;
border: 1px solid #999;
}
/* ---------------------------------------------------
6. DER MASSIVE METALL-SOCKEL (Für die Logos unten)
--------------------------------------------------- */
.m75-part-metalbase {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #f8f8f8 0%, #e0e0e0 40%, #c0c0c0 50%, #e0e0e0 60%, #f8f8f8 100%);
border-radius: 4px;
/* Starker 3D Block-Effekt */
border-top: 2px solid #fff;
border-left: 2px solid #eee;
border-bottom: 8px solid #888;
border-right: 6px solid #aaa;
box-shadow: 0 20px 30px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* ---------------------------------------------------
7. DIE UNTERE COPYRIGHT-PLAKETTE (Eisenschild)
--------------------------------------------------- */
.m75-part-copyright {
max-width: 350px;
background: linear-gradient(to bottom, #e8e8e8, #c4c4c4);
padding: 10px 30px;
border-radius: 2px;
border: 1px solid #999;
box-shadow: 0 10px 15px rgba(0,0,0,0.15), inset 1px 1px 0 #fff;
text-align: center;
font-size: 11px;
color: #444;
position: relative;
}
/* Die "Schrauben" an den Ecken */
.m75-part-copyright::before, .m75-part-copyright::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 6px; height: 6px;
background: #888;
border-radius: 50%;
box-shadow: inset 1px 1px 2px #333, 1px 1px 1px #fff;
}
.m75-part-copyright::before { left: 10px; }
.m75-part-copyright::after { right: 10px; }
1. Das Haupt-Board
Das ist der Container für den Hintergrund. Er hat den weißen, dicken Rahmen und den weichen Schattenwurf.
2. Das runde History-Badge
HISTORY
HANDBALL
3. Der Fotomasken-Rahmen
Hier kommt dein <img> Tag rein.
Bildunterschrift
4. Die schwebenden Glasplaketten (für Text)
1975, 8. Februar
Gouf eisen Handballveräi Miersch offiziell an d’Lëscht vun der Handballfamill opgeholl…
5. Text-Plakette mit den Metall-Klammern (Komitee)
- Goergen (President)
- Albert (Vizepresident)
- Wilwers (Sekretär)
6. Der massive Metall-Sockel (Für die Logos)
7. Die Copyright-Plakette unten
All correct contact info
RCS details · MCS 20224 · Tél. +223 22 77 96
Copyright © 2026