/****************************************************************************
 * easy4me allgemeines Styling (Werte der alten Live-Seite)
 * Hintergrund: STYLE-container_width.css, Farben/Groessen: ALPHA-variables.css
 ****************************************************************************/

/* Inhalts-Box (Inhalt + Seitenleiste): deckend weiss, runde Ecken */
.e4m_layout {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px #bbb; /* Rand wie alte Seite (#primary) */
}
/* Inhalts-Box + Footer-Box buendig mit dem Header-Inhalt (Logo/Kachel-Menue stehen in
   .columns mit gap_x = 1rem Innenabstand) -> Row-Breite minus 2rem, wie alte Seite (#primary) */
.e4m_layout,
.footer > .row { width: calc(100% - 2em - 2rem); }
@media screen and (min-width:40em) {
    .e4m_layout,
    .footer > .row { width: calc(100% - 4em - 2rem); }
}
@media screen and (min-width:64em) {
    .e4m_layout,
    .footer > .row { width: calc(100% - 8em - 2rem); }
    /* Text ~33px vom Box-Rand wie alt (Spalten bringen selbst keinen Innenabstand mit) */
    .e4m_layout { padding: 0 1rem; }
    .e4m_layout > .e4m_main.columns { padding-left: 1rem; } /* spezifischer als padding:0 in STYLE-e4m_sidebar.css */
    /* Seitenleiste schmal wie alt (174px), Inhalt bekommt den Rest -> alte 820px-Tabellen passen */
    .e4m_layout > .e4m_main.columns { flex: 0 0 calc(100% - 15rem); max-width: calc(100% - 15rem); }
    .e4m_layout > .e4m_sidebar.columns { flex: 0 0 15rem; max-width: 15rem; }
    .footer > .row { padding-left: 1rem; padding-right: 1rem; }
}

/* Seitentitel (Section-Titel) wie .entry-title der alten Seite */
.e4m_main .content_title > h1,
.e4m_main .content_title > h2 {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--e4m-color-blue);
    color: var(--e4m-color-blue);
    font-size: 1rem; line-height: 1.5;
}

/* Ueberschriften im migrierten Inhalt: fett, blau, ohne Zusatz-Abstand */
.content_inner h1,
.content_inner h2 {
    margin: 0;
    color: var(--e4m-color-blue);
}
.content_inner h3 {
    margin: 0;
    font-size: .625rem; line-height: 2.6em;
    letter-spacing: .1em; text-transform: uppercase;
}
.content_inner h4,
.content_inner h5,
.content_inner h6 { margin: 0; }

/* Footer-Box: hellgrau, oben abgerundet, Abstand zur Inhalts-Box */
.footer { padding-top: 3rem; padding-bottom: 0; }
.footer > .row {
    font-size: 1rem; /* Breite calc(100% - 8em) wie die Inhalts-Box */
    background-color: var(--e4m-color-box);
    border-top: 1px solid var(--e4m-color-border);
    border-radius: 8px 8px 0 0;
}
/* Schriftgroesse auf den Spalten, nicht auf der .row (deren Breite rechnet in em) */
.footer > .row > .columns { font-size: .8125rem; }
.footer p { line-height: 1.6; margin-bottom: .75rem; }
.e4m_footer_title { font-size: .875rem; font-weight: 700; }
.footer .vertical_menu .menu { gap: .25rem; }
.footer .menu > li { display: flex; gap: .5em; }
.footer .menu > li:before { content: "\25AA"; color: #777; }
.footer .menu a { font-weight: 700; }

/* Abstaende im migrierten Inhalt wie alte Seite (gemessen 2026-10-21):
   Zeilenhoehe 1.425, Absatz-Abstand 0.25em, Ueberschriften in Textgroesse,
   Listen wie twentyeleven, Inline-Bilder auf der Grundlinie */
.content_inner { line-height: 1.425; }
.content_inner p {
    margin: 0 0 .25em;
    line-height: inherit;
}
.content_inner h1,
.content_inner h2,
.content_inner h4,
.content_inner h5,
.content_inner h6 {
    font-size: 1em;
    line-height: inherit;
}
.content_inner ul,
.content_inner ol { margin: 0 0 1.625em 2.5em; padding: 0; }
.content_inner ul { list-style: square; }
.content_inner ol { list-style-type: decimal; }
.content_inner ul ul,
.content_inner ol ol,
.content_inner ul ol,
.content_inner ol ul { margin-bottom: 0; }
.content_inner img { vertical-align: baseline; }
/* <label> aus kopiertem Fremd-HTML im Inhalt (z. B. Socrative-Codes) inline lassen –
   die Formular-Regel des Themes (display:block) gilt nur fuer echte Formulare */
.content_inner label:not(.wpcf7-form label) {
    display: inline;
    margin: 0;
    line-height: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Mobil/Tablet (< large): Box so breit wie der Header-Inhaltsbereich, Text mit 1rem Innenabstand
   -> Text buendig mit dem Logo, kein Text direkt am Box-Rand, weniger verschenkter Rand aussen */
@media screen and (max-width:63.99875em) {
    .e4m_layout,
    .footer > .row { width: calc(100% - 2em); padding-left: 1rem; padding-right: 1rem; }
    .e4m_layout > .e4m_sidebar.columns { padding-left: 0; padding-right: 0; }
    .footer > .row { padding-left: 0; padding-right: 0; } /* Footer-Spalten haben selbst 1rem (gap) */
}
@media screen and (min-width:40em) and (max-width:63.99875em) {
    .e4m_layout,
    .footer > .row { width: calc(100% - 4em); }
}