/* ============================================
   Humberg-Hof – NEUSTART CSS (Version 04)
   Minimal, modern, ohne Altlasten
   ============================================ */





  /* ============================================
   GLOBAL – Reset, Typografie, Farben, Links
   ============================================ */
/* #region 🟥 GLOBAL / RESET / FUNDAMENT */
 /* ============================================
   GLOBAL / RESET / FUNDAMENT
   Basisregeln, Typografie, Farben, Links.
   Keine Layouts, keine Komponenten.
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
}



html, body {
    margin: 0;
    padding: 0;
    min-height: 100%; /* 👉 erlaubt Scrollen */

  /*   overflow-x: hidden; */
}



html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible;
}

html, body {
    width: auto;
    max-width: none;
}



html { font-size: 16px; /* 👉 Basis-REM – nur ändern, wenn alles größer/kleiner soll */ }

body {
    font-family: Arial, sans-serif;
    font-size: 1rem; /* 👉 Grundschrift – UR-Feeling */
    color: #441100;

    background-color: #fdedba; /* gleiche Farbe wie unten im Verlauf */
    background-image: linear-gradient(
        to bottom,
        #fffdf0 0px,
        #fffdf0 170px,
        #fdedba 170px,
        #fdedba 100%
    );
    background-repeat: no-repeat;
}


p  { font-size: 1rem; line-height: 1.45; margin: 0 0 0.7em 0; font-weight: normal; text-align: justify; }
h1 { font-size: 1.8rem; margin-top: 0; margin-bottom: 0.3em; font-weight: bold; font-style: italic; text-align:left; }
h2 { font-size: 1.4rem; margin-top: 0; margin-bottom: 0.4em; font-weight: bold; }
h3 { font-size: 1.2rem; margin-top: 0; margin-bottom: 0.4em; font-weight: bold;}


/*======================================= Schriftarten lokal einbinden =============================*/

/* Caveat Regular */
@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Caveat Bold */
@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}




/* 2026 dezente Linie */
a.dezent { text-decoration: none;  color: #881100;   border-bottom: 1px solid #cabaaa; } /*  color: inherit; */
a.dezent:hover { color: #993333; border-bottom-color: #993333; }



/* #endregion */



/* ============================================
   LAYOUT – Struktur, Container, Grids, Flex
   ============================================ */
/* #region 🟦 LAYOUT */
/* ============================================
   LAYOUT – Struktur & Container
   Page-Wrapper, Header-Grid, Content-Row,
   Sidebar-Positionierung, Abstände.
   ============================================ */

.huho-page {
    width: 950px; /* 👉 Hauptseitenbreite – zentrale Stellschraube */
    margin: 0 auto;

/*     display: flex;
    flex-direction: row;
    align-items: flex-start; */
}

#hamburger {
    display: none;
}





/* #endregion */



/* ============================================
   UTILITIES – kleine Helferklassen
   ============================================ */
/* #region 🟩 UTILITIES */
/* ============================================
   UTILITIES – kleine Helferklassen
   Spacing, Shadows, Boost, Tint, Display-Helfer.
   Keine Komponenten, keine Layouts.
   ============================================ */


.hyphens-on,
.silbentrennung-an {
    hyphens: auto !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}


/* dezenter Rand für Bild, zB. wenn Bild selbst keinen klaren Ränd hat */
.rand1, a img.rand1 { border:1px solid #ccc; }
.rand2, a img.rand2 { border:1px solid #660000; }

.horiline1  { margin:10px auto; text-align:center; border:solid #E6DAC9 1px; }

.center       { margin:0 auto; text-decoration:none; text-align:center; }

.block        { display:block; }
.block-auto   { display: block;  width: fit-content; }  /* width: auto; */
.inlineblock  { display: inline-block; }



/* ========================================================================
   Weiteres Universelles Werkzeug (Utility-Klassen) (Gegenstück ist unten) 
   ======================================================================== */
/* Universell: Element auf Desktop sichtbar, auf Mobile versteckt */
.hidden-mobile { display: block; }
/* Universell: Element auf Mobile sichtbar, auf Desktop versteckt */
.hidden-desktop { display: none; }





.no-break {
    white-space: nowrap;   /* verhindert jeden Umbruch */
    hyphens: none;         /* verhindert Silbentrennung */
}

.icon-lead {
    font-size: 1.55em;     /* dezent größer als Text */
    line-height: 0;        /* verhindert „Hochrutschen“ */
    display: inline-block; /* erlaubt präzise Positionierung */
    transform: translateY(2px); /* optische Grundlinienkorrektur */
}

.entsaettiger1  { filter: grayscale(30%) brightness(0.95); opacity: 0.6; }
.entsaettiger2  { filter: grayscale(50%) brightness(0.95); opacity: 0.6; }
.entsaettiger3  { filter: grayscale(70%) brightness(0.95); opacity: 0.6; }

.stauch01 { letter-spacing:-0.1px; }
.stauch02 { letter-spacing:-0.2px; }
.stauch05 { letter-spacing:-0.5px; }
.stauch10 { letter-spacing:-1px; }


.radius03 { border-radius: 3px;}
.radius05 { border-radius: 5px;}
.radius08 { border-radius: 8px;}




/*  Der universelle Zoom GRÖßEN BOOSTER (Text, Emoji, Bilder) */
/*  BEISPIELE:  <span class="boost" style="--boost:3">😧</span>   
                <img class="boost" style="--boost:1.8" src="images/EMOTI_Unmut_2.jpg" alt="">     */
.boost {
    display: inline-block;
    line-height: 1;
    font-size: calc(1em * var(--boost, 1));
}

img.boost {
    width: calc(1em * var(--boost, 1));
    height: auto;
}



/* Vergrößerungs-Faktor GLÜHBIRNE (Desktop) */
.iconbooster1 {
--boost:1.8
}

/* Vergrößerungs-Faktor ÄHRE (Desktop, Mobile geht mit p mit) */
.iconbooster2 { /* konkret beide icons mit span, da mit p nochmal andere größe gibt (ist kompliziert :-) */
--boost:4;
}





/* =========================== 
/* ===== Bilder Schatten =====
   =========================== */ 
.img-shadow       {  box-shadow: 4px 8px 10px rgba(0,0,0,0.2);}
.img-shadow-small {  box-shadow: 2px 4px 6px rgba(0,0,0,0.2);}
.img-shadow-big   {  box-shadow: 2px 4px 14px rgba(0,0,0,0.4);}

.img-glow-rot  {  box-shadow: 2px 4px 50px rgba(148, 0, 0, 0.4);}
.img-glow-gelb  {  box-shadow: 2px 4px 70px rgba(211, 190, 0, 0.2);}

.img-shadow-free1 { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.35));}
.img-shadow-free2 { filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.2)); }



/* ============================================
   Utility: auto-fit
   → Element passt sich automatisch dem Container an
   → ideal für Bilder, Flyer, QR-Codes, etc.
============================================ */
.auto-fit {
    max-width: 100%;   /* 👈 verhindert Überbreite */
    height: auto;      /* hält Proportionen stabil */
    display: block;    /* entfernt Inline-Lücke */
    margin: 0 auto;    /* zentriert das Element */
}




/* ===========================================================================
    Einfacher hover Zoom Effekt für Bilder, z.B für QR-Codes "Aktuelles" 
   =========================================================================== */

.hover-zoom             { transition:transform 0.3s ease; } /* Gemeinsame Basis für beide Bilder */
.hover-zoom-sanft:hover { transform: scale(1.02); }         /* Große Bilder – dezenter Hover */
.hover-zoom-stark:hover { transform: scale(1.05); }         /* Kleine Bilder – stärkerer Hover */

.hover-zoom-mega:hover {   transform: scale(1.5); }    /* VERGRÖßERUNG, um Bilder größer betrachten zu können - zB. in "Hofladen" */
.hover-zoom-ultra:hover {   transform: scale(1.7); }   /* VERGRÖßERUNG, um kleine Bilder größer betrachten zu können - zB. in "Hofladen" */
   


/* ACHTUNG zuvor .smart-zoom heißt jetzt .mobile-zoom >> siehe MOBILE Region*/





/* ---------------------------------------------------------
   SPACING SYSTEM (Utility-Klassen)
   Stufen: 10 / 20 / 40 / 60
   Desktop = Basis
   Mobile = optisch größer (weil engerer Viewport)
--------------------------------------------------------- */
/* Margin-Top (DESKTOP) */
.mato-00  { margin-top: 0; }   /* auf null */
.mato-05  { margin-top: 0.5rem; }   /* mini Stufe - kleiner als <p> */
.mato-10 { margin-top: 0.75rem; }   /* kleine Stufe */
.mato-20 { margin-top: 1.25rem; }   /* mittel */
.mato-30 { margin-top: 1.7rem; }   /* groß */
.mato-40 { margin-top: 2.4rem; }    /* größer */
.mato-50 { margin-top: 3.2rem; }    /* noch größer */
.mato-60 { margin-top: 4rem; }      /* sehr groß */

/* Margin-Bottom (DESKTOP) */
.mabo-05  { margin-bottom: 0.5rem; }   /* mini Stufe */
.mabo-10 { margin-bottom: 0.75rem; }
.mabo-20 { margin-bottom: 1.25rem; }
.mabo-30 { margin-bottom: 1.45rem; }   
.mabo-40 { margin-bottom: 2.5rem; }
.mabo-50 { margin-bottom: 3.2rem; }
.mabo-60 { margin-bottom: 4rem; }


/* Margin-Left (DESKTOP) */
.male-05  { margin-left: 0.45rem; }
.male-10 { margin-left: 0.75rem; }
.male-15 { margin-left: 1.0rem; }
.male-20 { margin-left: 1.25rem; }
.male-25 { margin-left: 1.45rem; }
.male-30 { margin-left: 1.7rem; }

/* Margin-Right (DESKTOP) */
.mari-05  { margin-right: 0.45rem; }
.mari-10 { margin-right: 0.75rem; }
.mari-15 { margin-right: 1.0rem; }
.mari-20 { margin-right: 1.25rem; }
.mari-25 { margin-right: 1.45rem; }
.mari-30 { margin-right: 1.7rem; }


.subnote { /* 2026 >> zB in Umweltschutz.html */
    font-size: 0.85em;      /* 👆 dezenter, kleiner - durch "em" keine mobileanpassung nötig*/
    opacity: 0.5;          /* 👆 zurückhaltend */
    display: inline-block;  /* 👆 sauberer Abstand */
    line-height: 1;
    margin-left: 0.2em;     /* 👆 kleine Luft vor der Klammer */
}








/* #endregion */



/* ============================================
   COMPONENTS – Module & UI‑Elemente
   ============================================ */
/* #region 🟡 HEADER */
/* ============================================
   COMPONENT – HEADER
   Banner, Logo, Positionierung, Hover-Effekte.
   ============================================ */


.huho-header {
    width: 100%;
    margin-top: 15px;
    display: flex;
    align-items: flex-end;

    position: relative;     /* wg. Hamburger-Menü Absolut-Positionierung */
}

/* Banner */
.huho-banner-box {
    width: 767px;                       /* 👉 Bannerbreite */
    margin-right: 10px;                 /* 👉 Abstand zum Logo – optische Balance */
    border-top: 4px solid #900000;
    border-radius: 6px;                 /* Rundung */

    box-shadow: 3px 5px 7px rgba(0,0,0,0.25);
    background: #fff;
    overflow: hidden;

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

.huho-banner {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Logo */
.huho-logo-box {
    width: 180px; /* 👉 Logo-Breite – kann man anpassen */
    margin-bottom: -8px; /* 👉 optische Korrektur – nicht positiv setzen */
    position: relative;
    left: 10px; /* 👉 leichte Verschiebung – Feintuning */
}

.huho-logo {
    width: 100%;
    filter: drop-shadow(3px 5px 5px rgba(0,0,0,0.25));
}
/* #endregion */


/* #region 🟥 ROTER QUERSTREIFEN */
/* ============================================
   COMPONENT – ROTER QUERSTREIFEN
   Hintergrundstreifen, linke/rechte Kappen.
   ============================================ */


.huho-redstripe {
    width: 100%;          /* volle Breite */
    min-width: 100%;      /* 👉 darf nicht schmaler werden als der Viewport */
    display: flex;
    margin-top: 6px;
}

.huho-red-left,
.huho-red-right {
    flex: 1 1 auto;       /* 👉 dürfen schrumpfen, aber bleiben flexibel */
    min-width: 0;         /* 👉 verhindert, dass sie die Breite erzwingen */
    background: linear-gradient(
        to bottom,
        #bb7777 0%,
        #900000 50%,
        #6e0000 100%
    );
}

.huho-red-left  { 
    margin-right: 6px;                  /* zuvor: border-right: 7px solid #fffdf0; */
    border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 
.huho-red-right { margin-left: 6px;     /* zuvor: border-left: 7px solid #fffdf0; */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* #endregion */


/* #region 🟫 QUERMENÜ */
/* ============================================
   COMPONENT – NAVIGATION (Desktop)
   Quermenü, horizontale Links, Hover.
   ============================================ */


.huho-quermenu {
    /* --- DEINE ORIGINALWERTE (NICHT ANGEFASST) --- */
    background: linear-gradient(
        to bottom,
        #eeccbb 0%,
        #e0c090 50%,
        #bb9988 100%
    );
    border-radius: 4px;
    padding: 0 15px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    /* --- ÄNDERUNG 1: feste Breite raus, sonst schrumpft der rote Streifen --- */
    /* width: 950px;  <-- NICHT löschen, sondern auskommentiert lassen */
    /* Grund: 950px erzwingt auf Mobile ein Schrumpfen des gesamten .huho-redstripe */

    /* --- ÄNDERUNG 2: stattdessen flexibel --- */
    width: 100%;        /* 👉 nimmt verfügbare Breite */
    max-width: 950px;   /* 👉 DEINE alte Breite bleibt als Obergrenze erhalten */
}

.huho-quermenu a {
    color: #990000;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    line-height: 25px;      /* 👉 definiert Menü-Höhe */
    padding: 0px 13px;      /* 👉 Breite der Menüpunkte */
    margin-top: -1px;       /* 👉 optische Grundlinienkorrektur */
    border: 1px solid transparent;
    border-bottom: none;
    transition: color 0.4s ease, background-color 0.4s ease; /* 👉 einblenden */   
}

/* Hover */
.huho-quermenu a:hover {
    color: #fff;
    background: #990000;
    border-radius: 4px;      /* 👉 rote HOVER leicht abgerundet */
}

/* Active-Lasche */
.huho-quermenu a.active {
    background: #fff;
    color: #900000;
    border: 1px solid #900000;
    border-bottom: none;
    border-radius: 4px 4px 0 0;

    position: relative;
    top: 10px;              /* 👉 Lasche nach unten drücken  */
    margin-top: -14px;      /* 👉 optischer Ausgleich */
    padding: 1px 15px 5px;  /* 👉 Innenabstand der Lasche */
}

.huho-quermenu a.active:hover {
    background: #fff;
    color: #900000;
}
/* #endregion */


/* #region 🟣 MENU-RECHTS >> SIDEBAR */
/* ============================================
   COMPONENT – SIDEBAR
   Sidebar-Boxen, Logos, Links, Typografie.
   ============================================ */

/* Spalte rechts */
.huho-sidebar {
    width: 180px;       /* 👉 Sidebar-Breite – zentrale Stellschraube */
    margin-left: 20px;  /* 👉 Abstand zum Text/Content >> EINZIGE Stellschraube */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* Boxen */
.sidebar-head {             /* Kopf - dunkler */
    height: 20px;
    background: #E8C79B;
    margin-bottom: 5px;
}

.sidebar-body {             /* Körper - heller */
    background: #F6EAD9;
    padding: 1px 10px 10px; /* Innenabstände der Boxen  */
    margin-bottom: 20px;
}

/* Gemeinsame Werte für BEIDE Boxen: 👉 Radius und Schatten*/
.sidebar-head, .sidebar-body { border-radius: 4px; box-shadow: 2px 2px 8px rgba(0,0,0,0.05); }

/* TEXT */
.sidebar-body p {
    font-size: 0.75rem;           /* 👉 Fließtextgröße in der Sidebar */
    line-height: 0.7rem;          /* 👉 Zeilenhöhe */
    margin-top: 10px;             /* 👉 Abstand TEXT nach oben */
    margin-bottom: 15px;  
}




/* Menü alias "Menü RECHTS" */
.sidebar-links {
    list-style: square;
    margin: 10px 0 15px 18px;           /* 👉 MENU Punkte-Liste verschieben  */
    padding: 0;
    color: #880000;
}

.sidebar-links li { margin: 3px 0; }

.sidebar-links a {
    display: block;
    padding: 3px 0 3px 20px;            /* 👉 Menüpunkte KLICKFLÄCHE >> Luft ringsum */                 
    margin-left: -20px;                 /* 👉 Menüpunkte OHNE Bullets verschieben */ 
    color: #990000;
    font-weight: bold; 
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 0.4s ease, background-color 0.4s ease; /* 👉 einblenden */   

    border-radius: 3px;                 /*    Ecken Rundungen */
    line-height: 1.4rem;                /*    Zeilenhöhe  */
    font-size: 0.9rem;                  /* 👉 SCHRIFTGRÖßE Menü RECHTS */
}

/* Hover (rot) */
.sidebar-links a:hover {
    background: #990000;
    color: #fff;
   /*  font-weight: bold; */
}

/* Active-Lasche (öffnet nach LINKS) */
.sidebar-links a.active {
    background: #fff;
    color: #900000;
    font-weight: bold;

    border: 1px solid #900000;
    border-left: none;              /* 👉 öffnet nach links */

    position: relative;
    left: -10px;                    /* 👉 LASCHE verschieben richtung Text/Content */
    padding-left: 34px;             /* 👉 TEXT >> optischer Ausgleich */
}



   /* BIO / DEMETER - LOGOS */
.sidebar-logo {
    display: block;
    margin: 5px auto 0px;
    max-width: 90px;                /* 👉 Logo-Größe */
    filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.25));
    margin-top: 10px;

}

.sidebar-more {
    color: #990000;
    text-decoration: none;
}

.sidebar-more:hover {
    text-decoration: underline;
}
/* #endregion */


/* #region 🍔 HAMBURGER-MENÜ (Mobile) */
/* ============================================
   COMPONENT – NAVIGATION (Mobile)
   Hamburger-Icon, Target-Hack, Menü-Box.
   ============================================ */

#hamburger {
    position: fixed;
    /* position: absolute;   */    /* hängt am Header → frei positionierbar */
    top: 180px;              /* 👈 vertikale Position im Banner */
    right: 55px;             /* 👈 Abstand vom rechten Rand */
    font-size: 5rem;         /* 👈 Größe des Hamburger-Symbols */
    color: #990000;         
    text-decoration: none;   /* keine Unterstreichung */
    z-index: 3000;           /* über allem → wichtig für Klickbarkeit */

    /* 🟡👉 Hintergrund-Pad */
    background: rgba(255, 255, 255, 0.65);   /* leicht milchig, kaum sichtbar */
    line-height: 5rem;                      /* 🟡👉 gleiche Höhe wie Font → optische Mitte */
    padding: 0.5rem 2.1rem;                  /* echte Touchfläche */
    border-radius: 8px;                     /* rundes Quadrat (modern) */
    backdrop-filter: blur(4px);              /* edler Glas-Effekt */
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);  /* leichte Tiefe */
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

#hamburger:hover {
    background: rgba(255, 255, 255, 0.9);    /* etwas heller beim Hover */
    box-shadow: 0 3px 14px rgba(0,0,0,0.25);
}


/* ============================================
   TARGET-ANKER (unsichtbar, verhindert Springen)
   ============================================ */
#mobile-nav {
    position: absolute;      /* muss absolut sein → kein Layout-Einfluss */
    top: 0;                  /* ganz oben → verhindert Scroll-Jump */
    left: 0;
    width: 1px;              /* minimal klein */
    height: 1px;
    overflow: hidden;        /* komplett unsichtbar */
}



/* AB HIER UMBAUAKTION >>> LOS :-) */

/* 🔵 Menü (geschlossen) */
.menu-box {
    position: fixed;
    top: 0;
    right: 0;

    width: 85%;               /* 🟡👉 Breite des Panels */
    max-width: 520px;         /* 🟡👉 maximale Breite */

    height: 100dvh;           /* 🟡👉 volle Bildschirmhöhe (für Scrollen nötig) */
    overflow-y: auto;         /* 🟡👉 Scrollen erlauben */
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */

    background: rgba(255, 253, 245, 0.90);
    border-left: 1px solid #995533;
    box-shadow: -4px 0 40px rgba(0,0,0,0.35);

    padding: 30px 40px;       /* Innenabstand */
    text-align: right;
    z-index: 3000;

    transform: translateX(100%); /* Start: komplett draußen */
    opacity: 0;                 /* weich ausblenden */
    visibility: hidden;         /* nicht sichtbar */
    pointer-events: none;       /* nicht klickbar */

    transition: transform 0.45s ease, opacity 0.45s ease;
}

/* 🔵 Menü (offen) */
#mobile-nav:target + .menu-box {
    transform: translateX(0);   /* reinfahren */
    opacity: 1;                 /* sichtbar */
    visibility: visible;        /* sichtbar */
    pointer-events: auto;       /* klickbar */
}




/* ============================================
   MENÜ-LINKS
   ============================================ */
.menu-box a {
    display: flex;               /* Text + Icon nebeneinander */
    justify-content: flex-end;   /* alles rechtsbündig */
    align-items: center;         /* vertikal sauber */
    gap: 1.6rem;                 /* 👈 Abstand Text ↔ Icon */
    margin: 6px 0;               /* vertikaler Abstand */
    padding: 1.8rem 1rem;        /* 👈 große Tap-Fläche für Mobile */
    color: #990000;              /* Humberg-Rot */
    text-decoration: none;       
    font-size: 2.7rem;           /* 👈 große Schrift für Fingerbedienung */
    font-weight: 400;            /* normaler Font-Weight */

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.85),   /* oben: helles Licht */
        rgba(220,210,190,0.35)    /* unten: warmer Schatten */
    );
    border-radius: 6px;
}

/* Hover (nur Desktop) */
.menu-box a:hover {
    background: #990000;         /* invertiert → rot */
    color: #fff;                 /* Text weiß */
    border-radius: 6px;      
    transition: background 0.2s ease, color 0.3s ease;
    
}

.menu-box a:active {
    background: rgba(153, 0, 0, 0.15);
}






/* ============================================
   CLOSE-BUTTON
   ============================================ */



#close-nav {
display: block;                 /* 🟡👉 zentrierbar */
    margin: 55px auto 0 auto;       /* 🟡👉 zentriert, aber NICHT volle Breite */
    width: fit-content;             /* 🟡👉 Button schrumpft auf Inhalt */

/*     background: rgba(95, 84, 32, 0.12);  */  /* 🟡👉 dunkler Ton-in-Ton */
/*     color: #990000;    */                     /* 🟡👉 etwas dunklerer Text */
     color: #900;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.85),   /* oben: helles Licht */
        rgba(220,210,190,0.35)    /* unten: warmer Schatten */
    );

    border: 2px solid #900;
    
    padding: 1.2rem 2rem;                    /* 🟡👉 gleiche Touchfläche wie Menü */
    border-radius: 6px;                    /* leicht abgerundet wie ein Button */

    font-size: 3.0rem;                     /* etwas größer als Menütext */
    text-align: center;                     /* wie deine Menülinks */

    transition: background 0.2s ease, color 0.2s ease;
}

#close-nav:hover {
    background: rgba(153, 85, 51, 0.18);   /* kleine Rückmeldung */
    color: #442211;
}












/* ============================================
   ICONS
   ============================================ */
.menu-box a i {
    font-size: 3rem;             /* 👈 Icon-Größe → harmoniert mit Text */
}

/* #endregion */


/* #region ⬆️ BUTTONS / INTERACTION – NACH-OBEN */
/* ============================================
   COMPONENTS – INTERACTION / BUTTONS
   --------------------------------------------
   Globale UI-Interaktionen wie Nach-oben-Button,
   Floating Buttons, Lightbox-Trigger, Modals.
   ============================================ */

   /* ===== nach oben Button ===== */
.backtotop-float {
    position: fixed;
    bottom: 20px;
    right: 20px;

    width: 52px;      /* feste Box */
    height: 52px;     /* gleiche Höhe → perfekt rund */
    line-height: 40px;/* vertikal zentriert */

    background: rgba(156, 0, 0);
    color: white;
    font-size: 28px;  /* Pfeilgröße */
    text-align: center;

    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
    z-index: 999;
}

.backtotop-float:hover {
    color: white;
    background: #bb0000;
}
.backtotop-float:visited {
    color: white;
}





/* ===== Universeller BUTTON (zB. Aktuelles WhatsApp) >> 2026 ===== */

.btn {
    display: inline-block;
    padding: 10px 38px;          /* 👉 Button-Größe */
    background: #660000;       /* 👉 Button-Farbe (WhatsApp-Grün) */
    color: white;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;          /* 👉 Rundung */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn:hover {
    background: #880000;       /* 👉 Hover-Farbe */
    transform: translateY(-2px); /* 👉 leichter Lift-Effekt */
}

.btn:link,
.btn:visited {
    color: white;              /* 👉 erzwingt weiße Schrift */
    text-decoration: none;
}



/* BUTTON Farb Varianten >> Beispiel: <a href="#" class="btn btn-wa">zum Kanal</a> */
.btn-wa   { background:#1fb456; }
.btn-wa:hover { background:#25c866; }

.btn-huho { background:#990000; }
.btn-huho:hover { background:#b30000; }

.btn-beige { background:#F6EAD9; color:#333; }
.btn-beige:hover { background:#fff3e8; }







/* #endregion */


/* #region ​🟥 HEADLINE */
/* ============================================
   COMPONENT – HEADLINE
   Doppelheadline, Vorder-/Hintertext.
   ============================================ */

.huho-headline {
    position: relative;
    margin-top: 20px; /* 👉 Abstand zum Menü */
    margin-bottom: 5px;
    height: 3.2rem; /* 👉 Gesamthöhe – Feintuning möglich */
}

.huho-headline .hl-back {
    position: absolute;
    top: -6px; /* 👉 Glow-Versatz */
    left: 20px;
    font-size: 3.2rem; /* 👉 große Hintergrundschrift */
    font-weight: 600;
    color: #f9f3f3;
    z-index: 1;
}

.huho-headline .hl-front {
    position: absolute;
    top: 8px; /* 👉 Vordertext-Versatz */
    left: 0;
    font-size: 1.7rem; /* 👉 Hauptschriftgröße */
    font-weight: bold;
    color: #990000;
    z-index: 2;
}
/* #endregion */


/* #region 🟢 CONTENT */
/* ============================================
   COMPONENT – CONTENT
   Fließtext, Bilder, Abstände, Bildlinks alias hauptbild.
   ============================================ */


.hauptbild  { float:left; margin:2px 12px 0 0; 
              shape-outside: inset(0 0 8px 0); /* DIE MAGIE: besserer Umfluss*/
              box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
              border-radius: 5px; }

.bildlinks  { float:left; margin:2px 12px 0 0; } 
.bildrechts { float:right; margin:2px 0 0 10px; }



/* ========= schöne Hervorhebung eines Textes zB. von Zeit oder Datum (Hofladen, Aktuelles) =========== */
.termin-hervor {
    background: #f3e9d8;      /* warmes, dezentes Papier-Beige */
    color:#661100;
    padding: 3px 8px;
    line-height: 1.8;           /* bisschen luft zur nächsten Zeile */
    border-radius: 5px;
    font-weight: 700;           /* leicht fett, nicht zu stark */

    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}







.site-wrapper {
    margin-top: 5px;
    width: 100%;
    background: #fff;
    border: 1px solid #900000;
    border-radius: 6px;;         /* Rundung */
    box-shadow: 3px 5px 7px rgba(0,0,0,0.25);
    padding: 0 40px 20px;       /* 👉 Innenabstand – Hauptstellschraube */
    display: flex;
    flex-direction: column;
    min-height: 100%;           /* 👉 Container darf nie kleiner als die Seite sein */
}










.content-row {
    display: flex;
    align-items: flex-start;
    align-items: stretch;       /* 👉 sorgt dafür, dass Content die Sidebar-Höhe mitzieht */
}

.site-content {
    flex: 1;
    margin-right: 0;         /* 👉 Abstand zur Sidebar >> an der Sidebar einstellen */
}


/* 2026  Liste >> ul muss nicht erwähnt werden */
.bullets-edel             { list-style: none; margin: 0 0 1em 0; padding: 0; }
.bullets-edel li          { position: relative; text-align: left; padding-left: 1.2em; margin: 0.35em 0; }
.bullets-edel li::before  { content: "✦"; position: absolute; left: 0; top: 0.05em; 
                          font-size: 0.8em; opacity: 0.7; color: #7a4a4a;  } /* warmes, dezentes Braunrot */

/* Zusatz */                        
.bullets-rot li::before { opacity: 0.9; color: #990000; } 






/* #endregion */


/* #region ⬜️ FOOTER */
/* ============================================
   COMPONENT – FOOTER
   Footer im Wrapper + globaler Footer.
   ============================================ */


.huho-footer {
    margin-top: 6px;
    width: 100%;
    background: linear-gradient(
        to bottom,
        #aa5555 0%,
        #900000 50%,
        #660000 100%
    );
    border-radius: 5px;
    box-shadow: 3px 5px 7px rgba(0,0,0,0.25);
    color: #fff;
    text-align: right;
    padding: 5px 40px 8px;
    font-size: 0.9rem; /* 👉 Footer-Schrift */
    margin-bottom: 40px;
}

.huho-footer a {
    color: #fff;
    font-size: 0.9rem; /* 👉 Footer-Schrift */
    text-decoration: none;
}

.huho-footer a:hover {
    text-decoration: underline;
}



/* #endregion */




/* ============================================
   MOBILE OVERRIDES >> Smartphone‑Anpassungen 
   ============================================ */
/* #region 🔶 MOBILE - SMARTPHONE */
/* ============================================
   MOBILE – SMARTPHONE
   Breakpoints, Sidebar ausblenden,
   Quermenü ausblenden, Hamburger einblenden,
   Content vollbreit.
   ============================================ */


@media (max-width: 1000px) {
   

    /* Sidebar ausblenden >> MOBILE */
    .huho-sidebar { display: none; }

    /* Desktop-Menü ausblenden */
    .huho-quermenu { display: none; }

    /* Hamburger einblenden */
    #hamburger { display: block; }

    /* Content vollbreit */
    .content-row { flex-direction: column; }
    .site-content { width: 100%; }



   /* Standard Text größer >> MOBILE */
  p         { font-size: 2.2rem; line-height: 1.4; margin-bottom: 1.0rem; }   /* bessere Lesbarkeit */
  ul, li    { font-size: 2.2rem; } /* wie p */  
  h2        { font-size: 2.8rem; }

  




  /* Rote, große Überschriften >> MOBILE */
  .huho-headline {
        margin-top: 2rem;              /* Abstand zu Header */
        margin-bottom: 2.2rem;          /* Abstand zu Content/Text */
        /* transform: scale(1.8);         */  /* Vergrößerung */        /* ⚠️⚠️⚠️ ÜBELTÄTER ⚠️⚠️⚠️ */
        transform-origin: left top;
    }

    .huho-headline .hl-back {
        font-size: 5.0rem;
        left: 10px;
    }
    .huho-headline .hl-front {
        font-size: 2.7rem;
        left: 0;
    }




                .huho-quermenu {
                    max-width: 100%;   /* 👉 verhindert Schrumpfen des roten Streifens */
                    flex: 0 1 auto;    /* 👉 darf schrumpfen */
                }








/* COPILOT Vorschlag >> BILD Volle Breite
 .bildlinks {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem 0;
 }
   */


/* ======= BILDER ZOOM >> MOBILE ======= */
 /* Bilder im Text etwas vergrößern zB. das Standardbild, links oben */
/* Zoom 1 */
.mobile-zoom1 {	width: 380px; height: 336px; }
/* Zoom 2 */
.mobile-zoom2 {	width: 400px; height: 290px; }
/* Zoom 3 */
.mobile-zoom3 {	width: 380px; height: 385px; }


/* Zoom Bio Logos */
.biologos { width: 280px;  height: auto; margin-right: 1.5rem; }








/* Footer >> MOBILE */
.huho-footer {
    margin-top: 6px;
    border-radius: 5px;
    padding: 0.6rem 0 0.8rem;   /* FOOTER evtl etwas luftiger machen */
    font-size: 1.8rem;          /* 👉 Footer-Schrift */
    margin-bottom: 40px;
}

.huho-footer a {
    color: #fff;
    font-size: 1.8rem; /* 👉 Footer-Schrift */
}






  /* nach oben Button >> MOBILE */
  /* ===== nach oben Button ===== */
.backtotop-float {
    bottom: 20px;
    right: 20px;
    width: 120px;      /* feste Box */
    height: 120px;     /* gleiche Höhe → perfekt rund */
    line-height: 85px;/* vertikal zentriert */

    font-size: 75px;     /* MOBILE größer */
    border: 1px solid rgb(255, 255, 255);
    background: rgba(156, 0, 0, 0.7);

    box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
}



  /* SPACING SYSTEM (Utility-Klassen) --------- MOBILE */
  /* Margin-Top (größer für mobile Optik) */
  .mato-00  { margin-top: 0; }        /* auf null */
  .mato-05  { margin-top: 0.6rem; }   /* mini Stufe - kleiner als <p> */
  .mato-10 { margin-top: 1.25rem; }
  .mato-20 { margin-top: 2rem; }
  .mato-30 { margin-top: 3.2rem; }   
  .mato-40 { margin-top: 5rem; } /* werte testen :-) */
  .mato-50 { margin-top: 6rem; }
  .mato-60 { margin-top: 7rem; }

  /* Margin-Bottom (größer für mobile Optik) */
  .mabo-05  { margin-bottom: 0.6rem; }   /* mini Stufe - kleiner als <p> */
  .mabo-10 { margin-bottom: 1.25rem; }
  .mabo-20 { margin-bottom: 2rem; }
  .mabo-30 { margin-bottom: 3.2rem; }   
  .mabo-40 { margin-bottom: 5rem; }
  .mabo-50 { margin-bottom: 6rem; }
  .mabo-60 { margin-bottom: 7rem; }


  /* Margin-Left (MOBILE) */
  .male-05  { margin-left: 0.9rem; }   /* ~5px mobile */
  .male-10 { margin-left: 1.25rem; }  /* 10px mobile */
  .male-15 { margin-left: 1.6rem; }   /* 15px mobile */
  .male-20 { margin-left: 2.0rem; }   /* 20px mobile */
  .male-25 { margin-left: 2.6rem; }   /* 25px mobile */
  .male-30 { margin-left: 3.2rem; }   /* 30px mobile */

  /* Margin-Right (MOBILE) */
  .mari-05  { margin-right: 0.9rem; }
  .mari-10 { margin-right: 1.25rem; }
  .mari-15 { margin-right: 1.6rem; }
  .mari-20 { margin-right: 2.0rem; }
  .mari-25 { margin-right: 2.6rem; }
  .mari-30 { margin-right: 3.2rem; }



/* Universell: Element auf Desktop sichtbar, auf Mobile versteckt (Gegenstück oben Utilities) */
  .hidden-mobile { display: none !important; }
/* Universell: Element auf Mobile sichtbar, auf Desktop versteckt */
  .hidden-desktop { display: block !important; }






/* #endregion */

 }