/*
Theme Name: Braeustueberl la Maria
Theme URI: https://braeustueberl-marktredwitz.de
Author: Haudegen Webdesign
Author URI: https://haudegen-webdesign.de
Description: Custom-codiertes Theme fuer das Braeustueberl la Maria in Marktredwitz. Uebertraegt die statische Seite 1:1 nach WordPress - kein Page Builder, keine Framework-Abhaengigkeit.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: braeustueberl
*/

* {
    margin: 0;
    padding: 0;
}

/* Die width/height-Attribute an den <img> stehen dort als Platzhalter, damit
   beim Laden kein Layoutsprung entsteht. Die tatsaechliche Groesse bestimmt
   das CSS. Ohne diese Regel diktiert das Attribut die zweite Dimension und das
   Bild wird verzerrt - sichtbar am Startbild (1080 breit statt 330) und an den
   Footer-Icons. Jede spezifischere Regel weiter unten schlaegt sie. */
img {
    width: auto;
    height: auto;
}

@font-face {
    font-family: 'Alex Brush';
    src: url('fonts/AlexBrush-Regular.woff2') format('woff2'),
        url('fonts/AlexBrush-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-ExtraLight.woff2') format('woff2'),
        url('fonts/Montserrat-ExtraLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Medium.woff2') format('woff2'),
        url('fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
     font-family: 'Montserrat', sans-serif;
     overflow-x: hidden;
}

body.fix {
    overflow: hidden;
}






/*--------------Typography-----------*/


h1, h2.brush {
    font-family: 'Alex Brush', serif;
    color: #333;
    font-weight: normal;
}



h2 {
    color: #555;
    margin-top: -10px;
    text-align: right;
    font-weight: 300;
}

h1, .brush {
    font-size: 30pt;
    text-align: left;
}

a {
    text-decoration: none;
    color: #333
}

p {
    font-weight: 300;
    line-height: 22pt;
}


/*--------------Besteckcontainer-----------*/




header .container {
    display: flex;
    justify-content: right;
    padding: 0;
}

.besteckcontainer-container {
    background-color: #F3EADE;
    height: 60px;
    width: 50px;
    margin: 20px 0;
    z-index: 4;
    padding: 10px;
}

#besteckcontainer {
    display: flex;
    justify-content: center;
    height: 45px;
    cursor: pointer;
}



#besteckcontainer.aktiv .fork {
    transform: rotate(45deg);
    margin-right: -5px;
    height: 50px;
    margin-top: 2px;
}

#besteckcontainer.aktiv .knife {
    transform: rotate(-45deg);
    margin-left: -10px;
    height: 50px;
}

#besteckcontainer div {
    transition: 0.5s;
}

#besteckcontainer div svg {
    height: 40px;
    transform-origin: center;
    transition: 0.5s;
    fill: #222;
}

svg .st0 {
    fill: transparent;
}





/*----------------Navi---------*/

#navismall {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 3;
    top: 0;
    left: 600px;
    background-color: #F3EADE;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s ease-in-out;
    opacity: 0;
}

#navismall.aktiv {
    left: 0;
    opacity: 1;
    height: 100%;
    overflow-y: hidden;
}

.navcontainer {
    display: grid;
    grid-template-columns: 1fr;
}

#navismall a {
    margin: auto;
}

#navismall hr {
    width: 60vw;
    margin: 40px 0px;

    color: #222;
}

.naviiconbox {
    display: flex;
    justify-content: center;
}

#navismall .naviiconbox a {
    margin: 0;
    padding: 10px;
}

.naviiconbox img{
    width: 25px;
}



/*----------------Layout-------------*/

.hülle {
    margin: 0 40px;
}

.container{
    padding: 80px 0 20px 0;
    background-image: url(../../uploads/2026/09/braeustueberl-streifen-hintergrund-klein.jpg);
    background-position: left;
    background-repeat: no-repeat;
}

.container.second {
    background-image: url(../../uploads/2026/09/braeustueberl-streifen-hintergrund-klein-right.jpg);
    background-position: right;
}

/* Die beiden Breitbilder liegen in zwei Zuschnitten vor: 1359x466 fuer schmale
   Bildschirme, 1920x437 ab 800px. Bei <picture> mit zwei Seitenverhaeltnissen
   koennen width/height am <img> nur eines davon abbilden - deshalb steht das
   Verhaeltnis hier im CSS. Ohne das springt das Layout, sobald das Bild kommt. */
.großbild img {
    width: 100vw;
    height: auto;
    aspect-ratio: 1359 / 466;
    margin: 0 -5px -5px 0;
}

.inhalt {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 20px;
}

.inhalt.zwei {
    background-image: url(../../uploads/2026/09/braeustueberl-streifen-hintergrund-klein-right.jpg), url(../../uploads/2026/09/braeustueberl-streifen-hintergrund-klein.jpg);
    background-position: right top, left bottom;
    background-repeat: no-repeat, no-repeat;
    padding: 80px 0;
}

.inhalt img {
    height: 180px;
    z-index: 2;
}

button,
.button {
    height: 40px;
    background-color: #F3EADE;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #000;
}

/* Grid-Item: wird auf die Spaltenbreite gestreckt - wie das <button> der
   Altseite. inline-flex wuerde auf Textbreite schrumpfen.
   min-width: 0 ist noetig, weil ein Grid-Item sonst nicht unter seine
   Inhaltsbreite schrumpft. Ohne das waere der Schalter unter 800px elf Pixel
   breiter als seine Spalte und schoebe den ganzen Textkasten aus der Huelle.
   Der Beschriftungstext laeuft dann unter 800px rechts aus dem Kasten heraus -
   genau wie auf der Altseite. */
.button.reservierung {
    display: flex;
    width: 100%;
    min-width: 0;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* <button> rechnet von Haus aus mit border-box. Ohne das kaeme das
       Innenabstand oben drauf und der Schalter waere zu breit und zu hoch. */
    box-sizing: border-box;
    padding: 0 6px;
    font-size: 13.333px;
    text-align: center;
}

button.zwei,
.button.zwei {
    padding: 5px 20px;
    height: 40px;
}

button.mini {
    padding: 0;
    height: unset;
    margin-left: 3px;
    cursor: pointer;
}

.text {
    background-color: #F3EADE;
    padding: 40px;

}

.textinhalt {
    grid-column: span 2;
    background-color: #F3EADE;
    padding: 160px 40px 40px 40px;
    margin-top: -120px;
}

.textinhalt.normal {
    margin-top: 0;
    padding: 40px;
}

.ma-bo {
    margin-bottom: 20px;
}




/*------------Bildergalerie-------------*/

#speisekarte {
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    background-color: #F3EADE;
}

.gallerie {
    width: 105px;
    transition: 0.5s;
}

.schliesser {
    display: none;
}

#speisekarte.expanded {
    position: relative;
    left: 0;
    top: 0;
    z-index: 3;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: 0.5s;
}

#speisekarte.expanded .gallerie:not(.gallerie.groß) {
    display: none;
}

.gallerie.groß {
    width: 90vw;
    position: absolute;
}

.schliesser img, .schalter img {
    width: 40px;
}

#speisekarte.expanded .schliesser {
    display: block;
    position: absolute;
    top: 80px;
    right: 5vw;
}

.schalter {
    display: none;
}

#speisekarte.expanded .schalter {
    display: block;
    position: absolute;
    top: 50%;
}

.schalter.links {
    left: 0;
}

.schalter.rechts {
    right: 0;
}


.content {
    transform: scale(0.1);
    transition: 0.5s;
    opacity: 0;

}

.content.aktiv {
    transform: scale(1);
    opacity: 1;
}






/*-----------------FOOTER----------------*/

footer {
    background-color:#F3EADE;
    padding: 60px 0;

}

.footerdiv {
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.footerdiv:nth-of-type(1), .footerdiv:nth-of-type(2) {
    border-bottom: solid 1px #222;
}


.naviiconbox.footer {
    justify-content: left;
}

.naviiconbox.footer a img{
    width: 20px;
    margin-right: 20px;
}

ul {
    list-style-type: none;
}

footer hr {
    margin: 30px 0;
}

ul li {
    margin-bottom: 20px;
}

ul li a {
    font-weight: 700;
}

.footerlogo {
    display: flex;
    justify-content: flex-end;
}
.footerlogo {
    width: 300px;
}





@media(min-width: 800px ) {
    .hülle {
        width: 400px;
        margin: auto;
    }

    .großbild img {
        aspect-ratio: 1920 / 437;
    }

    .inhalt.zwei {
        padding: 120px 0;
    }

    .container, .container.second {
        padding: 100px 0 20px 0;
    }

    .gallerie {
        height: 140px;
        width: auto;
    }

    .gallerie.groß {
        width: 90vw;
        height: auto;
    }
    
    .schliesser img, .schalter img {
        width: 60px;
    }

    .inhalt img {
        height: 220px;
    }

    .textinhalt {
        padding: 190px 40px 40px 40px;
        margin-top: -160px;
    }

    #speisekarte {
        grid-gap: 40px;
    }


    h2 {
        font-size: 25pt;
    }

    h1, .brush {
        font-size: 40pt;
    }

    
}

@media(min-width: 1200px ) {


    h1, .brush {
        font-size: 50pt;
    }

    .hülle {
        width: 600px;
        margin: auto;
    }

    #navismall {
        left: 70vw;
    }

    .inhalt .startbild {
        height: 330px;
    }

    .reservierung {
        margin-top: 110px;
    }

    .gallerie {
        height: 235px;
    }


    .gallerie.groß {
        width: 40vw;
        height: auto;
    }

    .schalter.links {
        left: 20%;
    }
    
    .schalter.rechts {
        right: 20%;
    }

    #speisekarte.expanded .schliesser {
        top: 50px;
        right: 30vw;
    }

    .container, .container.second {
        padding: 140px 0 20px 0;
    }

    .container {
        background-image: url(../../uploads/2026/09/braeustueberl-streifen-hintergrund.jpg);
    }  
    
    .container.second {
        background-image: url(../../uploads/2026/09/braeustueberl-streifen-hintergrund-right.jpg);
    }

    .inhalt.zwei {
        background-image: url(../../uploads/2026/09/braeustueberl-streifen-hintergrund-right.jpg), url(../../uploads/2026/09/braeustueberl-streifen-hintergrund.jpg);
    }
    
}


/*--------------Karte-------------*/
/* Lag in der Altseite als <style> mitten im Markup. */

.mapouter {
    position: relative;
    width: 250px;
    height: 200px;
}

.gmap_canvas {
    overflow: hidden;
    background: none !important;
    height: 200px;
    width: 250px;
}

.gmap_canvas iframe {
    border: 0;
}


/*--------------Zeiger-------------*/

.gallerie,
.schliesser,
.schalter {
    cursor: pointer;
}


/*--------------WordPress-Inhalte-------------*/
/* Greift auf Seiten, deren Text aus dem WP-Editor kommt (page.php). */

.text img,
.text iframe {
    max-width: 100%;
    height: auto;
}

/* Ueberschriften aus dem Editor tragen keine .brush-Klasse. Ohne diese Regeln
   erbt h2 die graue, duenne Untertitel-Optik der Startseite und h3 bleibt beim
   Browser-Default - in einer Speisekarte sieht beides nach Fremdkoerper aus.
   h2 sind die Kategorien und stehen deshalb in Alex Brush, kleiner als die
   Sektionsueberschrift des Templates. h3 gliedert darunter. */
/* :not(.brush), weil .text h2 sonst spezifischer waere als die .brush-Regel
   und die Sektionsueberschrift des Templates mitverkleinern wuerde. */
.text h2:not(.brush) {
    font-family: 'Alex Brush', serif;
    /* 24pt statt der 30-50pt von .brush: die Kategorien sollen der
       Sektionsueberschrift des Templates untergeordnet bleiben, auch unter
       800px, wo .brush selbst auf 30pt schrumpft. */
    font-size: 24pt;
    font-weight: normal;
    color: #333;
    text-align: left;
    margin-top: 40px;
    margin-bottom: 10px;
}

.text h3 {
    font-size: 12pt;
    font-weight: 700;
    color: #333;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* Die globale ul-Regel nimmt allen Listen die Punkte - gewollt fuer Menue und
   Footer, nicht fuer Editor-Inhalte. Hier zurueckdrehen. */
.text ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

.text ul li {
    margin-bottom: 5px;
}

.text p + p {
    margin-top: 20px;
}

.text a {
    text-decoration: underline;
}


/*--------------Formular-------------*/
/* Contact Form 7 ohne Plugin-CSS - der Look kommt komplett von hier.
   Der Formularbereich liegt im beigen .text-Kasten, die Felder sind deshalb
   weiss. Der Absende-Schalter kann nicht den beigen .button-Look tragen, weil
   er auf beigem Grund verschwinden wuerde - er wird dunkel. */

.formular label {
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
}

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular input[type="number"],
.formular textarea {
    box-sizing: border-box;
    width: 100%;
    margin-top: 5px;
    padding: 12px 14px;
    border: none;
    background-color: #fff;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 12pt;
}

.formular textarea {
    height: 140px;
    resize: vertical;
}

.formular p {
    margin-bottom: 20px;
}

/* Die Datenschutz-Zustimmung: Kaestchen und Text in einer Zeile, der Text
   bleibt am Kaestchen haengen statt darunter zu rutschen. */
.formular .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.formular input[type="checkbox"] {
    margin-right: 10px;
}

/* Der Zustimmungssatz liegt in einem <label> und wuerde sonst die
   Feldbeschriftung mit 700 erben. */
.formular .wpcf7-acceptance label,
.formular .wpcf7-list-item-label {
    font-weight: 300;
}

.formular .wpcf7-submit {
    height: 40px;
    margin-top: 10px;
    padding: 0 30px;
    border: none;
    background-color: #333;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    cursor: pointer;
}

/* Waehrend des Absendens setzt Contact Form 7 .submitting auf das Formular. */
.formular form.submitting .wpcf7-submit {
    opacity: 0.5;
}

.formular .wpcf7-spinner {
    display: none;
}

/* Rueckmeldungen. Ohne Plugin-CSS haben sie sonst gar keine Auszeichnung. */
.formular .wpcf7-not-valid-tip {
    margin-top: 5px;
    color: #b3261e;
    font-weight: 700;
    font-size: 11pt;
}

.formular .wpcf7-response-output {
    display: none;
    margin: 20px 0 0 0;
    padding: 15px 20px;
    border: solid 1px #333;
    line-height: 22pt;
}

.formular form.sent .wpcf7-response-output,
.formular form.invalid .wpcf7-response-output,
.formular form.unaccepted .wpcf7-response-output,
.formular form.spam .wpcf7-response-output,
.formular form.failed .wpcf7-response-output,
.formular form.aborted .wpcf7-response-output {
    display: block;
}

.formular form.sent .wpcf7-response-output {
    border-color: #2e6b2e;
    color: #2e6b2e;
}

.formular form.invalid .wpcf7-response-output,
.formular form.unaccepted .wpcf7-response-output,
.formular form.spam .wpcf7-response-output {
    border-color: #b3261e;
    color: #b3261e;
}

/* Contact Form 7 legt seine versteckten Felder in ein <fieldset>. Das bringt
   den Standardrahmen des Browsers mit - sichtbar als Strich ueber dem ersten
   Absatz. Das Plugin-CSS wuerde ihn verstecken, das laden wir aber nicht. */
.formular .hidden-fields-container {
    display: none;
}

/* Die Sammelmeldung am Formularanfang ist nur fuer Screenreader gedacht. */
.formular .screen-reader-response {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/*--------------Barrierefreiheit-------------*/
/* Sprunglink und Fokusring. Beide ohne Layoutwirkung: der Sprunglink liegt
   ausserhalb des Viewports bis er Fokus bekommt, outline belegt keinen Platz. */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 12px 20px;
    background-color: #F3EADE;
    color: #333;
    font-weight: 700;
}

.skip-link:focus {
    left: 0;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
}

/* Das Popup-Menue ist geschlossen nur verschoben und transparent, nicht
   entfernt. Ohne inert tabbt man hinein, ohne etwas zu sehen. Das Attribut
   setzt script.js - hier nur der Zeigerschutz fuer alte Browser. */
#navismall[inert] {
    pointer-events: none;
}