/* css/style.css */

/* Fonts - Pfade gehen eine Ebene nach oben zum fonts-Ordner */
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
}

/* Allgemeine Stile */
body { 
    font-family: 'Roboto', sans-serif; 
    color: #333; 
}

h1, h2, h3 { 
    font-family: 'Playfair Display', serif; 
    color: #1a2a40; /* Klassisches Dunkelblau des Freundeskreises */
}

/* Utility Klassen */
.bg-serioes { 
    background-color: #1a2a40 !important; 
    color: white; 
}

.hero-section { 
    padding: 60px 0; 
    background-color: #f8f9fa; 
    border-bottom: 3px solid #1a2a40; 
}

.btn-primary { 
    background-color: #1a2a40; 
    border: none; 
}

.btn-primary:hover { 
    background-color: #2c3e50; 
}

.card { 
    border: none; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}

/* Spezifische Anpassungen für die Satzung oder Berichte */
.satzung-text h3 { 
    font-size: 1.25rem; 
    margin-top: 2.5rem; 
    border-bottom: 1px solid #dee2e6; 
    padding-bottom: 0.5rem; 
}

.satzung-text p, .satzung-text li {
    margin-bottom: 1rem;
}

.section-number {
    font-weight: bold;
    color: #1a2a40;
}


/* Spezifische Stile für die Mitgliedschafts-Seite */
.iban-box { 
    background-color: #ffffff; 
    border: 1px dashed #1a2a40; 
    padding: 15px; 
    font-family: monospace; 
    font-size: 1.1rem;
    letter-spacing: 1px;
    display: inline-block;
}

.membership-card { 
    border: none; 
    border-top: 3px solid #1a2a40; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
}

.highlight-box { 
    border-left: 5px solid #1a2a40; 
    background-color: #f8f9fa; 
    padding: 25px; 
    margin: 40px 0;
    border-radius: 0 8px 8px 0;
}

/* Links im Vereins-Blau */
a { 
    color: #1a2a40; 
    text-decoration: underline; /* Optional für bessere Barrierefreiheit */
}

a:hover { 
    color: #2c3e50; 
}

/* Optimierung für das Vorstandsfoto */
.vorstands-foto {
    /* 1. Ihre gewünschte Höhe (Empfehlung: 300px bis 350px) */
    max-height: 300px; 
    
    /* 2. Breite auf Handys weiterhin flexibel halten */
    width: auto;
    max-width: 100%;
    
    /* 3. WICHTIG: 'contain' verhindert das Abschneiden der Köpfe/Seiten.
          Das Bild wird innerhalb der 300px eingepasst, ohne beschnitten zu werden. */
    object-fit: contain;
    
    /* Zentrierung, falls das Bild schmaler als der Container ist */
    display: block;
    margin-left: auto;
    margin-right: auto;

    /* Ihr Design-Element */
    border-top: 3px solid #1a2a40;
}