/*
 * bears-layout.css 
 * Zentrales Design (soweit möglich) für die Website
 * ------------------------------------------------------------
 * 
 * Definiert vorrangig CSS für eigene PHP-Erweiterungen
 * (home|archive|single-post.php etc.) sowie Scripte im
 * Unterordner bears-addons.
 * 
 * Nutzt ausschließlich Variablen aus bears-colors.css.
 * 
 * c.schmidt@skatingbears.de
 */


/* ------------------------------------------------------------
   1. GRUNDLAYOUT / TYPOGRAFIE-BASIS
------------------------------------------------------------ */

/* 
 *  Schriftart, Word-Wrapping und deutsche Silbentrennung für die 
 * gesamte Site 
 */

html, body, * {
/* 6   font-family: 'Comic Neue', sans-serif !important; */
/* 5   font-family: 'Fira Sans', sans-serif !important; */
/* 4   font-family: 'Kanit', sans-serif !important; */
/* 4   font-family: 'Lato', sans-serif !important; */
/* 2   font-family: 'Libre Franklin', sans-serif !important; */
/* 2,5 alternative font-family: 'Mali', sans-serif !important; */
/* 2   font-family: 'Open Sans', sans-serif !important;  */
/* 2   font-family: 'Poppins', sans-serif !important; */
/* 2,5   font-family: 'Prompt', sans-serif !important;  */
/* 1,8   font-family: 'Raleway', sans-serif !important;  */
/* 1,9   font-family: 'Roboto', sans-serif !important;  */
/* 3   font-family: 'Taviraj', sans-serif !important; */
/* 1,7   font-family: 'Titillium Web', sans-serif !important;  */
/* 1,6   font-family: 'Tomorrow', sans-serif !important;  */
/* 2,5   font-family: 'Ubuntu', sans-serif !important;  */
/* 2   font-family: 'Zalando Sans', sans-serif !important; */

    font-family: 'Raleway', sans-serif !important;
    hyphens: auto;
    overflow-wrap: normal;
    word-wrap: normal; 
    scroll-behavior: smooth;
}

/* Nur echte Textlinks im Content-Bereich erhalten bei Links einen orangenen Hover */
.content a[href]:not([class*="btn"]):not([class*="button"]):not([role="button"]):not(.menu-item a):hover {
    color: var(--bears-color-amber) !important;
}





/* Überschriften-Typografie */

h1 { padding-top: 0px; padding-bottom: 5px; line-height: 1.4; margin:0; font-size: 28px; }
h2 { padding-top: 0px; padding-bottom: 5px; line-height: 1.4; margin:0; font-size: 24px; }
h3 { padding-top: 0px; padding-bottom: 5px; line-height: 1.4; margin:0; font-size: 20px; }
h4 { padding-top: 0px; padding-bottom: 5px; line-height: 1.4; margin:0; font-size: 18px; }
h5 { padding-top: 0px; padding-bottom: 5px; line-height: 1.4; margin:0; font-size: 16px; }
h6 { padding-top: 0px; padding-bottom: 5px; line-height: 1.4; margin:0; font-size: 14px; }

div {
    line-height: 1.4 !important;
}

/* Pfeil nach oben (Wird in "Site Gesamt Seitenfuß" gesetzt und definiert 
 * Hier erfolgt nur die positionierung unten Rechts
 */

p.pfeil-nach-oben {
    all: unset;
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 99999;

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

    width: 30px;
    height: 30px;

    background: var(--bears-color-white) !important;
    border: 2px solid var(--bears-color-light-blue) !important;
    border-radius: 50%;

    cursor: pointer;
}

p.pfeil-nach-oben a {
    all: unset;
    color: var(--bears-color-blue) !important;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}


.pfeil-nach-oben a {
    text-decoration: none;
    color: var(--bears-color-white) !important;
    display: block;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------
   2. EIGENE WRAPPER IM CONTENT-BEREICH
      margin: [oben] [rechts] [unten] [links]
------------------------------------------------------------ */

/* ------------------------------------------------------------
   2a. LAYOUT für NEWS Bereich(e) in Wrapper .bears-news-wrapper
   Theme Dateien home|archive|single-post.php
------------------------------------------------------------ */

.bears-news-wrapper {
    margin: 0 !important;
    background: var(--bears-color-white); /* überschreibbar */
    padding: 5px !important;
}

.bears-news-left {
    flex-basis: 33% !important;
    margin: 0 0 0 0 !important;
}

.bears-news-right {
    flex-basis: 66% !important;
    margin: 0 0 0 0 !important;
}

.bears-news-content {
    flex-basis: 100% !important;
    margin: 0 !important;
}

.bears-news-controls {
    background: var(--bears-color-white);
    padding: 20px;
    margin: 0;
    border: 5px solid var(--bears-color-blue); 
}
.bears-news-row-center {
    text-align: center;
/*    margin-top: 5px; */
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

.bears-news-row-space-between {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;   /* ← zentriert */
    text-align: center;
}

/*
.bears-news-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 42px;
    background: var(--bears-color-blue);
    color: var(--bears-color-white);
    font-weight: normal !important;
    font-size: 16px !important;
    border-radius: 48px !important;
    text-align: center;
    padding: 0 !important; 
}
*/

.bears-news-button {
    text-decoration: none !important;
    color: var(--bears-color-white) !important;
    background: var(--bears-color-blue);
    border-radius: 24px;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    height: 48px;
    width: 240px;
    max-width: 240px;
    box-sizing: border-box;
    transition: all 0.2s;
    cursor: pointer;
    margin: 0 auto;
}

.bears-news-button a {
    display: flex;                     /* statt block */
    align-items: center;               /* vertikal zentrieren */
    justify-content: center;           /* horizontal zentrieren */
    width: 100%;
    height: 100%;
    color: inherit !important;
    text-decoration: none !important;
}


.bears-news-button:hover {
    background: var(--bears-color-amber);
}

/* Pagination Numbers Styling */
.bears-news-pagination-numbers {
    display: inline-flex;
    gap: 5px;
    padding-bottom: 15px; 
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.bears-news-pagination-numbers .page-numbers {
    padding: 4px 8px;
    min-width: 28px;
    text-align: center;
    background: var(--bears-color-white);
    color: var(--bears-color-blue);
    text-decoration: none;
    border-radius: 24px;
    font-size: 10px;
    border: 2px solid var(--bears-color-amber); 
}

.bears-news-pagination-numbers .page-numbers.current {
    font-weight: 700;
    background: var(--bears-color-light-blue);
}

.bears-news-pagination-numbers .page-numbers:hover {
    background: var(--bears-color-amber);
}

.bears-news-pagination-label {
    width: 100%;
    flex-basis: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 16px;
    color: var(--bears-color-blue);
}

/* Kleiner vertikaler Abstand zwischen Post-Elementen */
.bears-news-spacer {
    height: 5px;
}

/* Großer vertikaler Abstand zwischen Post-Elementen */
.bears-news-spacer-big {
    height: 20px;
}

.bears-hr-dots {
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

.bears-hr-dots::before {
	content: "■ ■ ■ ■ ■";
    font-size: 14px;
    letter-spacing: 8px;
    color: var(--bears-color-blue); 
}

/* Archiv-Bereich (Überschrift + Dropdown zentriert) */
.bears-news-archive {
    /* margin-top: 20px; */
    /* background: var(--debug-blue) !important; */
    /* padding: 10px; */
    text-align: center;
}

/* ------------------------------------------------------------
   2b. LAYOUT für Gutenberg Seiten (single-gutenberg.php)
------------------------------------------------------------ */

/* Wrapper für Gutenberg-Layouts */
.bears-gutenberg-wrapper {
    margin: 0 !important;
    background: var(--bears-color-white); 
    padding: 5px !important;
}

/* ------------------------------------------------------------
   2c. LAYOUT für Gutenberg Seiten (single-gutenberg.php)
------------------------------------------------------------ */

/* Wrapper für WPBakery-Layouts – äußere Hülle */
.bears-wpbakery-wrapper {
    margin: 0 !important;
    background: var(--bears-color-blue) !important;
    padding: 0 !important;
}

/* Innerer Wrapper: stabiler Rahmen + Box-Sizing */
.bears-wpbakery-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Alle WPBakery-Elemente innerhalb des inneren Wrappers */
.bears-wpbakery-inner * {
    box-sizing: border-box !important;
}

/* WPBakery Full-Width neutralisieren (ohne Padding zu zerstören)
   innerhalb des eigenen inneren Wrappers */
.bears-wpbakery-inner .vc_section {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
}

/* ------------------------------------------------------------
   7. HERO / TITELBEREICH — FINAL
------------------------------------------------------------ */

.bears-hero-spacer {
    height: 20px;
    width: 100%;
    display: block;
    background: var(--bears-color-blue) !important;
}

/* Hero */
.bears-hero {
    position: relative;
    min-height: 196px; /* darf wachsen */
    background-size: cover;
    background-position: 80% 75%;
    overflow: visible;
    padding-top: 20px;
}

/* Container vertikal mittig ausrichten */
.bears-hero .container {
    display: flex;
    align-items: center;   /* vertikale Mitte */
    min-height: 196px;     /* darf wachsen */
}

/* Overlay-Box selbst: gerade, nur Container für die schräge Fläche */
.bears-hero-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    /* Desktop: etwas breiter als H1 */
    width: 45%;
    z-index: 0;
    overflow: visible;
}

/* Schräge Fläche wie im alten Theme */
.bears-hero-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;

    /* Fläche ragt links und rechts über */
    left: -40%;   /* ragt links raus → linker Rand bleibt gerade */
    right: -10%;  /* ragt rechts raus → Schräge sichtbar */

    background-color: color-mix(in srgb, var(--bears-color-amber) 65%, transparent);

    transform: skewX(-12deg);
    z-index: -1; /* hinter H1, über dem Bild */
}

/* Mobile: H1 breiter → Overlay auch breiter */
@media (max-width: 1023px) {
    .bears-hero-overlay {
        width: 95%;
    }
    .bears-hero-overlay::before {
        left: -10%;
        right: 10%;
    }
}

/* H1 sitzt im Container */
.bears-hero-inner {
    position: relative;
    z-index: 1;

    /* WICHTIG: padding-top entfernen, sonst keine echte Zentrierung */
    padding-top: 0;

    /* Desktop: 30–50% */
    width: 50%;
}

/* Mobile: 80–85% */
@media (max-width: 1023px) {
    .bears-hero-inner {
        width: 85%;
    }
}

/* H1 wie im alten Theme */
.bears-hero-inner h1 {
    font-size: 28px;
    line-height: 1.4;
    margin: 0;
    padding: 5px;
    color: var(--bears-color-white);
    text-shadow:
        -1px -1px 0 var(--bears-color-blue),
         0   -1px 0 var(--bears-color-blue),
         1px -1px 0 var(--bears-color-blue),
        -1px  0   0 var(--bears-color-blue),
         1px  0   0 var(--bears-color-blue),
        -1px  1px 0 var(--bears-color-blue),
         0    1px 0 var(--bears-color-blue),
         1px  1px 0 var(--bears-color-blue);
}

/* Mobile: H1 breiter → Overlay auch breiter */
@media (max-width: 1023px) {
	.bears-hero-inner h1 {
		font-size: 24px;
    }
}


/* Umbrüche undSilbentrennung bei Namen in den Heros verhindern! 
 * Layout von Name, Position und Nummer
 */

.staff-box .info .name {
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important; 
    padding: 0px !important;
    font-size: 14px !important;
    font-weight: bold;
    margin-left: -10px !important;
    width: 200px;
    text-shadow:
        -1px -1px 0 var(--bears-color-blue),
         0   -1px 0 var(--bears-color-blue),
         1px -1px 0 var(--bears-color-blue),
        -1px  0   0 var(--bears-color-blue),
         1px  0   0 var(--bears-color-blue),
        -1px  1px 0 var(--bears-color-blue),
         0    1px 0 var(--bears-color-blue),
         1px  1px 0 var(--bears-color-blue);
}    

.staff-box .info .position {
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important; 
    padding: 0px !important;
    font-size: 12px !important;
    font-weight: bold;
    margin-left: -10px !important;
    color: var(--bears-color-amber) !Important;
    width: 200px;
}    

.staff-box .info .number {
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important; 
    padding: 0px !important;
    font-size: 32px !important;
    font-weight: bold;
    margin-left: -10px !important;
    color: var(--bears-color-amber) !Important;
}    

.staff-box .info::before {
    inset: 0px -15px 0px -50% !important;
}
.staff-box .item img {
    margin-left: 70px;
    object-position: top;
}

.breadcrumbs + h1 {
    color: var(--bears-color-white) !important;
    font-weight: bold !important;
    overflow-wrap: break-word;
    word-wrap: break-word; 
}