/* ==========================================================================
   MS Bruck/Mur - Zentrales Stylesheet (Radikal auf Roboto umgestellt)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBALER BODY & GLOBALE TYPOGRAFIE
   -------------------------------------------------------------------------- */
body {
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;                     /* Moderner Goldstandard für hervorragende Lesbarkeit */
    font-weight: normal;
    font-style: normal;
    color: rgb(0, 0, 0);
    background-color: rgb(203, 233, 254);
    background-image: url('hgblau.jpg');
    text-align: left;
}

/* NEU: Zwingt alle Texte innerhalb unserer Berichte und Absätze wie gewohnt linksbündig lesbar zu bleiben! */
p, li, .bericht-text, .termin-row, td {
    text-align: left;
}

h1, h2 {
    text-align: left;
}

/* NEU: Zieht alle Tabellen, Navigationszeilen, Container und die gelbe Kachel-Box auf Riesenmonitoren vollautomatisch in die goldene Mitte! */
table, .content-container, main, .nav-zeile, .termin-card, .schattierte-box {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* SCHUTZSCHILD: Erlaubt großen Fotos ihre volle Pracht, schützt aber mobile Geräte vor dem Umbrechen! */
img {
    max-width: 100%;
    height: auto;
}


html, input, option, pre, textarea { 
    font-size: 14px; 
}

/* --------------------------------------------------------------------------
   2. LINKS (A-TAGS) & ABSÄTZE
   -------------------------------------------------------------------------- */
a { 
    font-size: inherit;          /* Passt sich automatisch der Textgröße an! */
    text-decoration: underline;  /* Macht Links überall sofort als Klickelement erkennbar! */
}
a:link    { color: rgb(0, 0, 255); }
a:visited { color: rgb(0, 0, 255); }
a:active  { color: rgb(0, 0, 255); }
a:hover   { color: rgb(0, 0, 150); } /* Optional: Wird beim Drüberfahren mit der Maus edel dunkler */

p, td, th, tr { 
    font-size: 14px; 
    line-height: 150%; 
}

/* --------------------------------------------------------------------------
   3. ÜBERSCHRIFTEN & ELEMENTE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.content-container h1, 
.content-container h2, 
.content-container h3 {
    color: rgb(51, 0, 204) !important; /* Exakt unser originales Violett-Blau */
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1 { font-size: 34px; font-weight: bold; } /* alle Schriftgrößen gegenüber der */
h2 { font-size: 24px; font-weight: bold; } /* "alten" Homepage vergrößert! */
h3 { font-size: 19px; font-weight: bold; }
h4 { font-size: 14px; font-weight: bold; }
h5 { font-size: 11px; font-weight: bold; }
h6 { font-size: 11px; font-weight: normal; font-style: normal; }

hr { font-size: 14px; }

ul, ol { font-size: 16px; } /* Global auf 16px (gegenüber der alten Homepage) erhöht */
li { font-size: 16px; line-height: 150%; margin-bottom: 7px; } /* NEU: 7px Luft nach unten für alle Listenpunkte der Website! */

ul { list-style-image: url('bullet1.gif'); }
ul ul { list-style-image: url('wavbul2a.gif'); }
ul ul ul { list-style-image: url('wavbul3a.gif'); }

button { 
    background-color: rgb(51, 0, 204); 
    color: rgb(255, 255, 255); 
    border: 1pt solid; 
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 
    font-size: 14px; 
}

/* --------------------------------------------------------------------------
   4. HANDYFREUNDLICHE ERWEITERUNGEN (NEUES LAYOUT)
   -------------------------------------------------------------------------- */
.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;           /* Kein globaler Zwang mehr für Bilder */
    box-sizing: border-box;
}

/* Der Standard-Textfluss: Am PC-Monitor absolut bündig (0) mit den Bildrändern! */
.content-container h2 {
    padding: 0;
    box-sizing: border-box;
}

.bericht-text, .bericht-text p {
    font-size: 16px;                     
    line-height: 150%;
    margin-bottom: 25px;
    text-align: justify;                 /* Eleganter Blocksatz */
    padding: 0;                          /* Am PC-Monitor perfekt kantenbündig zum Bild! */
    box-sizing: border-box;
}

.autor-hinweis {
    text-align: right;
    font-size: 0.9em;
    font-style: italic;
    color: #555555;
    clear: both;         
    margin-top: -20px;   
    margin-bottom: 10px;
    padding-right: 0;                    /* Fluchtet am PC perfekt rechtsbündig */
}

/* Bilder-Grid: Zielsicher zentriert für den synchronen Abgleich */
.bilder-grid {
    display: block;
    width: 100%;
    max-width: 100%; /* Geöffnet, damit große Bilder (1500px und mehr) niemals stecken bleiben! */
    margin: 0 auto 30px auto;
    text-align: center; 
}

/* ==========================================================================
   HANDY-SCHUTZ-ZONE (Tritt vollautomatisch erst bei schmalen Bildschirmen in Kraft)
   ========================================================================== */
@media screen and (max-width: 1040px) {
    /* 1. Schutz für den allgemeinen Fließtext */
    .content-container h2 {
        padding: 0 15px;
    }
    .bericht-text, .bericht-text p {
        padding: 0 15px;          /* Schützt den Text auf Smartphones vor dem Displayrand! */
    }
    .autor-hinweis {
        padding-right: 15px;
    }

    /* 2. Automatisches, flüssiges Umbrechen für das Termin-Archiv */
    .term-text {
        flex: 1 1 100% !important;
        padding-right: 0;
        margin-bottom: 4px;
        font-weight: bold;
    }
    .term-datum {
        flex: 1 1 100% !important;
    }
    .term-hinweis-rot {
        margin-left: 0;
        display: block;
        margin-top: 2px;
    }
}


/* ==========================================================================
   BILDER-KLASSEN (ALT UND NEU FÜR DEN FLIEßENDEN ÜBERGANG)
   ========================================================================== */

/* --- DIE NEUEN FORMATKLASSEN --- */

/* Häufig verwendetes Hochformat untereinander zentriert (ehemals img-half) */
.img-598 {
    width: 100%;
    max-width: 598px; 
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 4px;
}

/* Häufig verwendetes Querformat bei älteren Schuljahren mit 800px Breite */
.img-800 {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 4px;
}

/* Häufig verwendetes Querformat bei älteren Schuljahren mit 900px Breite */
.img-900 {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 4px;
}

/* Häufig verwendetes Querformat bei älteren Schuljahren mit 1000px Breite */
.img-1000 {
    width: 100%;
    max-width: 1000px;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 4px;
}

/* Häufig verwendetes Querformat bei älteren Schuljahren mit 1100px Breite */
.img-1100 {
    width: 100%;
    max-width: 1100px;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 4px;
}

/* Standard-Querformat neuerer Berichte mit 1200px Breite */
.img-1200 {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 4px;
}

/* Häufig verwendetes Querformat bei den ganz großen neuen Team- und Klassenfotos */
.img-1500 {
    width: 100%; /* Zwingt das Riesenbild zur perfekten Anpassung im Grid */
    max-width: 1500px; /* Deckelt die maximale Pracht PC-seitig auf 1500px */
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 4px;
}


/* Das Schweizer Taschenmesser für alle Sondermaße & Panoramen */
.img-flex {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 4px;
}

/* Video-Player: Edel dunkelgrau gerahmt ohne Ausreißer */
video { 
    width: 100%;
    max-width: 100%;
    border: 4px solid #333333; 
    border-radius: 4px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE MENÜ-ZEILE (OBEN / UNTEN)
   -------------------------------------------------------------------------- */
.nav-zeile {
    display: flex;
    align-items: flex-end;    /* REPARIERT: Setzt alle Elemente felsenfest auf die Unterkante! */   
    flex-wrap: wrap;          
    margin: 15px 0 25px 0;
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;          /* Auch hier die neue Standardgröße gesetzt */
    font-weight: bold;
}

.nav-zeile a {
    color: #3300cc;
    text-decoration: none;
}

.nav-zeile a:hover {
    color: #c80000;
    text-decoration: underline;
}

.nav-block {
    display: flex;
    align-items: flex-end;    /* Setzt alle Elemente fest auf die Unterkante! */    
    margin-right: 35px;       
}

.nav-block img {
    margin-right: 8px;        
    display: block;           
}

/* Eigene Klasse für die zentrierten Bildbeschreibungen oberhalb eines Bildes */
.bild-info {
    text-align: center;
    font-style: italic;
    margin-top: 10px;
    margin-bottom: 3px;
}

/* ==========================================================================
   ZENTRALES DESIGN FÜR DIE TERMINKARTEN (NUR FEHLENDE PC-BASIS)
   ========================================================================== */
.termin-card {
    margin-bottom: 35px; 
    border: 1px solid #3300cc; 
    border-radius: 6px; 
    overflow: hidden; 
    background: transparent; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    font-family: Roboto, Arial, sans-serif;
}

.termin-banner {
    background-color: #99CCFF; 
    padding: 14px 16px; 
    font-weight: bold; 
    color: #333333; 
    font-size: 1.15em;
    letter-spacing: 0.5px;
}

.monats-balken {
    background-color: #FFF9D4; 
    padding: 10px 16px; 
    font-weight: bold; 
    color: #333333; 
    font-size: 1.05em;
    border-bottom: 1px solid rgba(51, 0, 204, 0.15);
    border-top: 1px solid rgba(51, 0, 204, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.termin-body {
    padding: 0 20px;
}

.termin-row {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid rgba(51, 0, 204, 0.08);
    font-size: 16px;
    align-items: baseline;
}

.termin-row:last-child {
    border-bottom: none;
}

/* PC-Breitenverteilung: Spaltet Text links (35%) und Datum rechts sauber auf */
.term-text {
    flex: 0 0 35%;
    color: #333333;
    font-weight: bold;
    padding-right: 15px;
    box-sizing: border-box;
}

.term-datum {
    flex: 1;
    color: #333333;
    font-weight: normal;
    text-align: left;
}


/* --------------------------------------------------------------------------
   6. SPEZIFISCHE FORMATIERUNGEN & ALTE CODERESTE (FÜR BESTANDSSEITEN)
   -------------------------------------------------------------------------- */
.content-container h2 {
    font-size: 24px;
    margin-top: 25px;       
    margin-bottom: 15px;    
}

.content-container h2 span {
    font-size: 14px !important;     
    font-weight: normal !important; 
    margin-left: 8px;               
    display: inline-block;          
}

/* Die Einrückungen bekommen ebenfalls die Standardschriftgröße */
.ez1 { font-size: 16px; line-height: 150%; margin: 0px 0px 0px 10px; }
.ez2 { font-size: 16px; line-height: 150%; margin: 0px 0px 0px 26px; }

.ueb01 { 
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12pt; 
    font-weight: bold; 
    margin: 0 0 2pt 0;  
}

table#tbl_a01 { border-collapse: separate; border-spacing: 0.1em; border-radius: 1em; box-shadow: 0 0 1em #666; margin: 0em 0em 0em 10px; padding: 0.5em 0.5em 0.5em 0.5em; }
p#p_a01 { font-size: 20px; }                 
p#p_a02 { font-size: 16px; } 
p#p_a03 { font-size: 14px; }  
               
a#a01 { font-size: 16px; }  
a#a01-alt01 { font-size: 16px; color: #04F; }   
a#a02 { font-size: 14px; }
a#a03 { font-size: 18px; color: red; }

span#span_a_01 { font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 24px; font-weight: bold; line-height: 200%; width: 450px; padding: 0; margin: 0pt; border-width: 0; background-color: #0070c0; } 
span#span_a_02 { font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 24px; font-weight: bold; line-height: 150%; width: 450px; } 
li#li_a_01 { font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14pt; line-height: 140%; padding: 3pt; }

table { table-border-color-light: rgb(255, 255, 255); table-border-color-dark: rgb(255, 255, 255); font-weight: normal; text-align: none; font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; font-style: normal; vertical-align: none; }
label, fieldset, legend, select, caption, th, textarea { color: rgb(0, 0, 0); }

/* Alte FrontPage-Klassen (Ebenfalls konsequent auf eure neue Haus-Schriftart Roboto umgestellt) */
.mstheme-bannertxt, .mstheme-bannertxt-g, .mstheme-bannertxt-s { font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: rgb(255, 255, 255); font-size: 6px; }
.mstheme-horiz-navtxt, .mstheme-horiz-navtxt-g, .mstheme-horiz-navtxt-gs { font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: rgb(0, 0, 0); font-size: 2px; font-weight: bold; }
.mstheme-vert-navtxt, .mstheme-vert-navtxt-g, .mstheme-vert-navtxt-gs { font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: rgb(255, 255, 255); font-size: 2px; font-weight: bold; }
.mstheme-navtxthome, .mstheme-navtxthome-g, .mstheme-navtxthome-gs, .mstheme-navtxtnext, .mstheme-navtxtnext-g, .mstheme-navtxtnext-gs, .mstheme-navtxtprev, .mstheme-navtxtprev-g, .mstheme-navtxtprev-gs, .mstheme-navtxtup, .mstheme-navtxtup-g, .mstheme-navtxtup-gs { font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: rgb(0, 0, 0); font-size: 1px; }