/*body {
	background-color: #fcfbf1;
	background:url("https://silflay.de/wp-content/uploads/2022/02/guck13.png") no-repeat fixed right top, url("https://silflay.de/wp-content/uploads/2022/02/figurensammlu2ng.png") repeat-x fixed left bottom, url("https://silflay.de/wp-content/uploads/2022/02/back.jpg") repeat fixed !important;
	background-position: right top, left bottom;
		}
		*/
		
		
		@media only screen and (max-width: 600px) {
		  



    /* Zieht den gesamten Inhaltsbereich 50px nach oben */
    .wp-site-blocks > main, 
    .wp-site-blocks > .entry-content,
    .wp-site-blocks > .post-content {
        margin-top: -25px !important;
        position: relative;
        z-index: 5;
    }

    /* Falls die Überschrift direkt der erste Block ist, ziehen wir sie extra hoch */
    h1:first-of-type, 
    .wp-block-heading:first-of-type {
        margin-top: -25px !important;
    }
}



		
		/* =========================================
   SÜßES TICKET-MENÜ FÜR MOBILE
========================================= */
/* 1. DESKTOP-SICHERUNG: Ticket auf großen Bildschirmen komplett verbieten */
@media (min-width: 601px) {
    button.wp-block-navigation__responsive-container-open,
    button.wp-block-navigation__responsive-container-close {
        display: none !important;
    }
}

/* 2. MOBILE-VERSION: Das Ticket-Design NUR für Handys */
@media (max-width: 600px) {
    button.wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important; /* Mittige Ausrichtung */
        background-color: #FAF0DC !important; 
        color: #7c0000 !important; 
        padding: 8px 20px 8px 16px !important;
        border: 2px dashed #cea7a7 !important; 
        border-radius: 12px !important;
        box-shadow: 2px 3px 8px rgba(0,0,0,0.08) !important;
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        width: fit-content !important;
    }

    /* Das Wort "Menü" hinzufügen */
    button.wp-block-navigation__responsive-container-open::after {
        content: "Menü" !important;
        font-family: "Love Ya Like A Sister", cursive !important;
        font-size: 22px !important;
        margin-left: 10px !important;
    }

    /* Icon-Größe im Ticket */
    button.wp-block-navigation__responsive-container-open svg {
        width: 24px !important;
        height: 24px !important;
        fill: currentColor !important;
    }
}

button.wp-block-navigation__responsive-container-close svg {
    width: 32px !important;
    height: 32px !important;
    fill: currentColor !important;
}

button.wp-block-navigation__responsive-container-close:hover {
    transform: scale(1.1) rotate(90deg) !important; /* Sanftes Drehen beim Schließen */
    background: transparent !important;
}

		
		
		
		/* =========================================
   ZAUBER-HOVER FÜR BILDER
========================================= */

/* Der Grundzustand: bereitet das Bild auf die weiche Animation vor */
.bild-schweben {
    /* Die cubic-bezier Kurve sorgt für den coolen, leicht federnden "Plopp"-Effekt */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease !important;
    border-radius: 8px !important; /* Macht die Ecken minimal runder, passend zum Rest */
    display: inline-block !important; /* Verhindert, dass unsichtbare Ränder mitwackeln */
}

/* Der Effekt bei Mouseover */
.bild-schweben:hover {
    /* Hebt das Bild an, vergrößert es minimal und kippt es leicht nach links */
    transform: translateY(-6px) scale(1.03) rotate(-1.5deg) !important;
    /* Macht den Schatten größer und weicher, damit es "schwebend" wirkt */
    box-shadow: 8px 14px 24px rgba(0,0,0,0.12) !important;
    z-index: 10 !important;
}

/* Erzwingt die runden Ecken auch auf dem Bild selbst */
.bild-schweben,
.bild-schweben img {
    border-radius: 16px !important; /* Hier kannst du die Rundung anpassen (z.B. 12px, 16px oder 24px) */
    overflow: hidden !important; /* Schneidet die spitzen Ecken des Originalbildes ab */
}

		/* =========================================
   COLORBOX LIGHTBOX BUTTON RESET
========================================= */

/* 1. Alles Grüne entfernen, große Klickfläche schaffen & unsichtbar machen */
#colorbox.advgb_lightbox #cboxPrevious,
#colorbox.advgb_lightbox #cboxNext {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0 !important; /* Versteckt eventuellen Button-Text */
    color: transparent !important;
    transform: none !important;
    opacity: 0 !important; /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease !important;
    width: 15% !important; /* Schöne breite Klickfläche an den Rändern */
    height: 100% !important;
    top: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    cursor: pointer !important;
}

/* 2. Bei Mouseover sanft einblenden */
#colorbox.advgb_lightbox #cboxPrevious:hover,
#colorbox.advgb_lightbox #cboxNext:hover {
    opacity: 1 !important;
    background: transparent !important; /* Verhindert das grüne Hover-Verhalten */
    box-shadow: none !important;
    transform: none !important;
}

/* 3. Eigene, schicke Pfeile generieren (Weiß mit weichem dunklen Schatten) */
#colorbox.advgb_lightbox #cboxPrevious::after,
#colorbox.advgb_lightbox #cboxNext::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 24px !important;
    height: 24px !important;
    border-top: 4px solid #ffffff !important;
    border-right: 4px solid #ffffff !important;
    margin-top: -12px !important;
    margin-left: -12px !important;
    display: block !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)) !important;
}

/* 4. Pfeile in die korrekte Richtung drehen */
#colorbox.advgb_lightbox #cboxPrevious::after {
    transform: rotate(-135deg) !important; /* Zeigt nach links */
}
#colorbox.advgb_lightbox #cboxNext::after {
    transform: rotate(45deg) !important; /* Zeigt nach rechts */
}
		
		
		/* ============================================================
   GÄSTESTIMMEN – Zettelwand
============================================================ */

/* Grid der Zettel */
/* Container - Jetzt als Masonry/Spalten-Layout */
/* Container - Jetzt als Masonry/Spalten-Layout */
/* Container - Jetzt als Masonry/Spalten-Layout */
.gaeste-grid {
    box-sizing: border-box !important; /* Zwingt den Container in seine Grenzen */
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 20px !important; 
    column-width: 280px !important; 
    column-gap: 25px !important; 
}

/* Einzelner Zettel */
/* Einzelner Zettel */
.gaeste-card {
    box-sizing: border-box !important; /* Verhindert, dass das Padding die Karte verbreitert */
    background: #FAF0DC !important;
    padding: 30px 25px 25px !important;
    border-radius: 4px !important;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.08) !important;
    transition: transform 0.3s ease !important;
    position: relative !important;
    display: inline-block !important; 
    width: 100% !important; 
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin-bottom: 25px !important;
}

/* Klebeband oben (inklusive Fallback-Farbe) */
.gaeste-card::before {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 45px !important;
    height: 18px !important;
    background: var(--sil-gold, #e0c878) !important; 
    opacity: 0.7 !important;
    border-radius: 2px !important;
    z-index: 5 !important;
}

/* Endlos wiederholende Rotation pro Zettel (6er Rhythmus) */
.gaeste-card:nth-child(6n+1) { transform: rotate(-1.5deg); }
.gaeste-card:nth-child(6n+2) { transform: rotate(1deg); }
.gaeste-card:nth-child(6n+3) { transform: rotate(-0.5deg); }
.gaeste-card:nth-child(6n+4) { transform: rotate(1.5deg); }
.gaeste-card:nth-child(6n+5) { transform: rotate(-1deg); }
.gaeste-card:nth-child(6n+6) { transform: rotate(0.8deg); }

/* Hover-Effekt: Zettel wird gerade und kommt nach vorne */
.gaeste-card:hover {
    transform: rotate(0deg) scale(1.03) !important;
    z-index: 10 !important;
}

/* Schriftformatierung */
.gaeste-card p {
    font-size: 17px !important;
    line-height: 1.55 !important;
    color: var(--sil-ink) !important;
    margin-bottom: 0 !important;
}

/* Formatierung für den Autor */
.gaeste-card .gaeste-author {
    margin-top: 12px !important;
    font-size: 14px !important;
    color: var(--sil-brown, #8a705a) !important; 
}

/* Auf Handys die Rotation abschalten, damit es nicht über den Rand ragt */
@media (max-width: 600px) {
    .gaeste-card:nth-child(n) { transform: rotate(0deg); }
}
/* 1. Die Variable (Der Platzhalter) für das Guck-Bild definieren */

/* === STÜCKE STORY CARDS === */

/* ===== STORY CARDS – erhöhte Spezifität ===== */

html, body {
    overflow-x: hidden !important;
}
.section-full {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}


.wp-block-media-text.story-card {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.07), 0 8px 30px rgba(0,0,0,0.06) !important;
    margin-bottom: 30px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    align-items: stretch !important;
}

.wp-block-media-text.story-card:hover {
    transform: translateY(-5px) rotate(-0.3deg);
    box-shadow: 6px 10px 0 rgba(0,0,0,0.09), 0 16px 40px rgba(0,0,0,0.09) !important;
}

.wp-block-media-text.story-card > figure.wp-block-media-text__media {
    overflow: hidden !important;
    align-self: stretch !important;
    margin: 0 !important;
}

.wp-block-media-text.story-card > figure.wp-block-media-text__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    display: block !important;
    min-height: 280px !important;
}

.wp-block-media-text.story-card > .wp-block-media-text__content {
    padding: 36px 40px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    background: transparent !important;
}

.wp-block-media-text.story-card .wp-block-media-text__content .wp-block-heading,
.wp-block-media-text.story-card .wp-block-media-text__content h2,
.wp-block-media-text.story-card .wp-block-media-text__content h3 {
    font-size: 26px !important;
    margin-bottom: 12px !important;
    margin-top:5px!important;
    line-height: 1.2 !important;
}

.wp-block-media-text.story-card .wp-block-media-text__content p {
    font-size: 17px !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
}

.wp-block-media-text.story-card .card-link a,
.wp-block-media-text.story-card .wp-block-media-text__content a:not([class]) {
    font-size: 17px !important;
    text-decoration: none !important;
    display: inline-block;
    transition: transform 0.2s ease;
}

.wp-block-media-text.story-card .card-link a:hover,
.wp-block-media-text.story-card .wp-block-media-text__content a:hover {
    transform: translateX(6px);
    text-decoration: none !important;
}

/* Farben */
.wp-block-media-text.story-card.card-color-1 .wp-block-heading,
.wp-block-media-text.story-card.card-color-1 h3,
.wp-block-media-text.story-card.card-color-1 .card-link a { color: #E8634A !important;  }

.wp-block-media-text.story-card.card-color-2 .wp-block-heading,
.wp-block-media-text.story-card.card-color-2 h3,
.wp-block-media-text.story-card.card-color-2 .card-link a { color: #4A8B5C !important; }

.wp-block-media-text.story-card.card-color-3 .wp-block-heading,
.wp-block-media-text.story-card.card-color-3 h3,
.wp-block-media-text.story-card.card-color-3 .card-link a { color: #4A9AB8 !important; }

.wp-block-media-text.story-card.card-color-4 .wp-block-heading,
.wp-block-media-text.story-card.card-color-4 h3,
.wp-block-media-text.story-card.card-color-4 .card-link a { color: #B8872E !important; }

.wp-block-media-text.story-card.card-color-5 .wp-block-heading,
.wp-block-media-text.story-card.card-color-5 h3,
.wp-block-media-text.story-card.card-color-5 .card-link a { color: #E88BA7 !important; }

@media (max-width: 780px) {
    .wp-block-media-text.story-card,
    .wp-block-media-text.story-card.has-media-on-the-right {
        grid-template-columns: 1fr !important;
    }
    .wp-block-media-text.story-card > figure.wp-block-media-text__media img {
        min-height: 220px !important;
    }
    .wp-block-media-text.story-card > .wp-block-media-text__content {
        padding: 28px 24px !important;
    }
}


/* Zuweisung der Emojis basierend auf deinen Karten-Klassen */
.wp-block-media-text.story-card.card-color-1 > figure.wp-block-media-text__media::after { 
    content: "🦊" !important; 
}
.wp-block-media-text.story-card.card-color-2 > figure.wp-block-media-text__media::after { 
    content: "🐹" !important; 
}
.wp-block-media-text.story-card.card-color-3 > figure.wp-block-media-text__media::after { 
    content: "🐢" !important; 
}
.wp-block-media-text.story-card.card-color-4 > figure.wp-block-media-text__media::after { 
    content: "🐺" !important; 
}
.wp-block-media-text.story-card.card-color-5 > figure.wp-block-media-text__media::after { 
    content: "🐧" !important; 
}

/* Container vorbereiten, damit das Emoji nicht ausbricht */
.wp-block-media-text.story-card > figure.wp-block-media-text__media {
    position: relative !important;
}

/* Das Grund-Design für alle Emojis */
.wp-block-media-text.story-card > figure.wp-block-media-text__media::after {
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    font-size: 45px !important;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)) !important;
    animation: floatEmoji 3s ease-in-out infinite !important;
    z-index: 5 !important;
}

/* Die Schwebe-Animation */
@keyframes floatEmoji {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}


:root {
    --guck-bild: url("https://silflay.de/wp-content/uploads/2022/02/guck13.png"); /* Standard-Bild */
}

/* 2. Den Hintergrund für die ganze Seite festlegen (mit Variable) */
html {
    background: url("https://silflay.de/wp-content/uploads/2022/02/back1.jpg") repeat fixed !important;
}

body.wp-theme-twentytwentytwo, body {
    /* Transparenz über dem Back-Bild */
    background-color: rgba(255, 255, 255, 0.4) !important;
    
    /* Hier laden wir die Variable und die feste Figurenleiste */
    background-image: 
        var(--guck-bild), 
        url("https://silflay.de/wp-content/uploads/2022/02/figurensamml_none_ung.png") !important;
        
    background-position: right top, left bottom !important;
    background-repeat: no-repeat, repeat-x !important;
    background-attachment: fixed, fixed !important;
}

/* 3. Theme-Container durchsichtig machen (falls nötig) */
#page, .site, .site-content, #content, .site-main {
    background-color: transparent !important;
}

@media only screen and (max-width: 600px) {
    body.wp-theme-twentytwentytwo, body {
        /* Wir laden hier NUR noch das Bild für die Figurenleiste unten */
        background-image: url("https://silflay.de/wp-content/uploads/2022/02/figurensamml_none_ung.png") !important;
        
        /* Position und Größe werden wieder auf dieses eine Bild reduziert */
        background-position: left bottom !important;
        background-size: auto !important;
    }
    
    /* (Dein restlicher mobiler Code bleibt hier unverändert...) */
    
    /* 1. Halbiert den riesigen Innenabstand der Sektionen auf dem Handy */
    .section-full {
        padding-top: 40px !important; 
        padding-bottom: 40px !important;
    }

    /* 2. Zwingt den allerersten Block auf der Seite, nicht durch Block-Gap nach unten gedrückt zu werden */
    .wp-site-blocks > *:first-child,
    .topabstand {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 3. Zieht das Gruppenbild & die Schrift wieder eng an die Icons/Menü ran */
    .titelbild {
        margin-top: -150px !important; /* Taste dich hier an den perfekten Wert ran! */
        z-index: -10;
    }

    .titelschrift {
        margin-top: -180px !important; /* Muss immer etwas höher sein als das Bild */
        z-index: -10;
    }
}


.float-tag {
  position: absolute;
  padding: 10px 18px;
  font-size: 15px;
  border-radius: 50px;
  color: white;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.12);
  animation: bobTag 4s ease-in-out infinite;
  z-index: 5;
    font-family: "Love Ya Like A Sister", cursive !important;
}

.float-tag2 {
  position: absolute;
  padding: 10px 18px;
  font-size: 15px;
  border-radius: 50px;
  color: white;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.12);
  animation: bobTag 4s ease-in-out infinite;
  z-index: 5;
  animation-delay: 1.8s;
    font-family: "Love Ya Like A Sister", cursive !important;
}

.float-tag-down20 {
margin-top:-20px;
}

.float-tag-down10 {
margin-top:-10px;
}

.float-tag-down30 {
margin-top:-30px;
}

.float-tag-down20 {
margin-top:-20px;
}

.float-tag-down10 {
margin-top:-10px;
}

.float-tag-down50 {
margin-top:-50px;
}


@keyframes bobTag {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-8px) rotate(2deg); }
}

.btn-leaf {
  display: inline-block;
  padding: 15px 35px;
  font-size: 22px;
  color: white;
  background: #4A8B5C;
  border: none;
  border-radius: 50px;
  box-shadow: 0 5px 0 #357244, 0 7px 15px rgba(0,0,0,0.1);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-leaf:hover  { transform: translateY(-2px); box-shadow: 0 7px 0 #357244, 0 9px 18px rgba(0,0,0,0.12); }
.btn-leaf:active { transform: translateY(3px);  box-shadow: 0 2px 0 #357244; }


/* =========================================
   LINK EXPLORE (Text-Link mit Pfeil)
========================================= */

.link-explore {
    /* 1. Schriftart erzwingen (Deine Überschriften-Schrift) */
    font-family: "Love Ya Like A Sister", cursive !important; 
    font-size: 20px !important;
    
    /* 2. Farbe erzwingen (Dein Standard-Dunkelrot, falls du es lieber Grün #4A8B5C willst, hier ändern) */
    color: #7c0000 !important; 
    
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
}

/* 3. Den Pfeil automatisch generieren */
.link-explore::after {
    content: ' \2192' !important; /* Unicode für den "→" Pfeil */
    display: inline-block !important;
    margin-left: 5px !important;
    transition: transform 0.2s ease !important;
}

/* 4. Der Hover-Effekt: Der ganze Link rutscht sanft nach rechts */
.link-explore:hover { 
    transform: translateX(6px) !important; 
}

/* Optional: Wenn nur der Pfeil beim Hover wegrutschen soll (sieht oft cooler aus), 
   lösche die .link-explore:hover Regel darüber und nutze stattdessen diese hier: */
/*
.link-explore:hover::after {
    transform: translateX(5px) !important;
}
*/


/* 1. Das Leaf-Design auf ALLE WordPress-Standard-Buttons übertragen */
button, 
.button, 
.wp-block-button__link, 
input[type="submit"] {
    display: inline-block !important;
    padding: 12px 30px !important; /* Etwas kompakter als das Original */
    font-family: "Love Ya Like A Sister", cursive !important;
    font-size: 20px !important;
    color: white !important;
    background: #4A8B5C !important; /* Dein Blatt-Grün */
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 5px 0 #357244, 0 7px 15px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
    appearance: none;
    line-height: 1.2 !important;
}

/* 2. Hover-Effekt (Das typische "Anheben") */
button:hover, 
.button:hover, 
.wp-block-button__link:hover, 
input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 0 #357244, 0 9px 18px rgba(0,0,0,0.12) !important;
    background: #569d6a !important; /* Ein klein wenig heller beim Hover */
}

/* 3. Active-Effekt (Das "Eindrücken") */
button:active, 
.button:active, 
.wp-block-button__link:active, 
input[type="submit"]:active {
    transform: translateY(3px) !important;
    box-shadow: 0 2px 0 #357244 !important;
}




/* Basis-Regel für alle deine Sektions-Gruppen */
/* Basis für alle Sektionen: Bricht aus dem Container aus */
.section-full {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    box-sizing: border-box !important;
    /* Das hier ist der Trick für das Guck-Bild: */
    z-index: -1; 
}

/* Damit die Texte und Buttons INNERHALB der Sektion wieder klickbar sind */
.section-full > * {
    position: relative;
    z-index: 2;
    max-width: 1100px; /* Damit der Text nicht an den Bildschirmrand klatscht */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Deine Farb-Varianten (jetzt mit Transparenz-Option) */
.section-theater {
    background-color: #7d121d !important;
}

.section-nature {
    background-color: rgba(74, 139, 92, 0.15) !important;
}

.section-light {
    background-color: rgba(255, 255, 255, 0.4) !important;
}








		#date-field {
    font-family: "Love Ya Like A Sister" !important;
    font-size: 30px;
}
		
		button, .button, input, select, textarea, .wp-block-button, .wp-block-button__link {
    font-family: "Love Ya Like A Sister" !important;
    font-size: 18px;
}

.whiterow{
background:rgba(255, 255, 255, 0.5);
  
}
.wp-block-button .wp-block-button__link {
  width: 100%;
}

.buttonwide{
  width:500px!important;

}

	h1,h2,h3,h4 {
    font-family: "love-ya-like-a-sister"!important; 
    font-style: normal;
    
    font-weight: 400;
    color: #000;
    hyphenate-limit-chars: auto 5;
   hyphenate-limit-lines: 2;

}

.menubg {
  z-index: auto;
  
}

	h5 {
	  text-transform: none;
    font-family: "lato"!important; 
    font-size: 18px!important;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    color: #000;
    hyphenate-limit-chars: auto 5;
   hyphenate-limit-lines: 2;

}

	h6 {
    font-family: "lato"!important; 
    font-size: 18px!important;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    color: #000;
    hyphenate-limit-chars: auto 5;
   hyphenate-limit-lines: 2;

}

.whitelink {
color:#fff!important;
}


.titelbild {
    margin-top:-220px!important;
    z-index:-10;
    
}

.titelschrift {
    margin-top:-120px!important;
    z-index:-10;
    
}

.wp-block-separator.has-alpha-channel-opacity {
    opacity: 0.3;
}



.wp-block-table thead {
    border-bottom: 2px solid;
    background-color: #cea7a7;
}

/*.grow {
    transition: all .2s ease-in-out;
}

.grow:hover { transform: scale(1.05); }*/



.wp-container-621bcd0932eb1 {
    display: flex;
    gap: var( --wp--style--block-gap, 0.5em );
    flex-wrap: wrap;
    align-items: center;
    align-items: center;
    justify-content: flex-start;
       padding-top: 0px!important;
}

.topabstand {
    padding-top: 0px!important;
}

.fullwidth {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.entry-content p {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;
    color:#000!important;
}

p {
    color:#000!important;
    font-size:19px;
}

.wp-container  {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;
}


.wp-container-621ac60fa1314 {
    max-width: 1000px!important;
    margin-left: auto !important;
    margin-right: auto !important;
}

h1 {
  font-size:50px;
  hyphens: auto; 
}

.wp-container-621abc2762a0d .wp-block-group .alignfull  {

  padding-bottom:1px!important;
  
}

.entry-content, .entry-content p, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt, .excerpt, .excerpt p, .type-post p, .type-page p {
    font-family: "Lato" !important;
    color: #7c0000;
}


a {
   font-family: "Love Ya Like A Sister" !important;
    color: #7c0000;
}


.wp-site-blocks > *:not(.section-full) {
    width: auto !important;
    max-width: 1536px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 3vw, 48px);
    padding-right: clamp(16px, 3vw, 48px);
}
		
		
/* Deine bestehende Regel für den Content 
.wp-site-blocks > * + * {
    margin-top: var(--wp--style--block-gap);
    background-color: rgba(255, 255, 255, 0.0);
    border: 0px solid #7c0000;
    width: 95%;
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
}*/


.wp-site-blocks {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    overflow: visible !important; /* Wichtig, damit nichts abgeschnitten wird */
}

/* Da jetzt alles an den Rand klatscht, geben wir dem normalen Content (ohne Klasse) das Padding zurück */
.wp-site-blocks > *:not(.section-full) {
    max-width: 1536px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 95%;
}

/* 1. Der Footer selbst: Breite & Hintergrund */
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part-footer {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    background-color: transparent !important;
    background-image: url('https://silflay.de/wp-content/uploads/2022/02/figurensammlung.png') !important;
    background-position: bottom center !important;
    background-repeat: repeat-x !important;
    background-size: auto !important;
    padding-bottom: 150px !important;
    padding-top: 20px !important;
    box-sizing: border-box !important;
    text-align: center; /* Zentriert den Text über der Linie */
}

/* 2. Die zentrierte graue Linie */
.wp-site-blocks > footer::before,
.wp-site-blocks > .wp-block-template-part-footer::before {
    content: "";
    display: block;
    width: 150px; 
    height: 1.5px; 
    background-color: #b0abaa; 
    margin: 0 auto 30px auto; 
}

/* 3. SCHRIFTVERKLEINERUNG: Greift direkt die Elemente im Footer an */
.wp-site-blocks > footer p,
.wp-site-blocks > footer a,
.wp-site-blocks > .wp-block-template-part-footer p,
.wp-site-blocks > .wp-block-template-part-footer a,
.wp-site-blocks > .wp-block-template-part-footer span {
    font-size: 13px !important; /* Festwert statt % ist hier sicherer gegen Überschreiben */
    
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
}

/* 4. Speziell für die Links im Footer */
.wp-site-blocks > footer a,
.wp-site-blocks > .wp-block-template-part-footer a {
    text-decoration: underline !important;
    display: inline-block;
}

.wp-site-blocks > footer a:hover,
.wp-site-blocks > .wp-block-template-part-footer a:hover {
    color: #E8634A !important;
}



/* ══════════════════════════════════════
   NEUES MENÜ: "STEMPEL"-LOOK
   Zusammengefasst & Korrigiert
   ══════════════════════════════════════ */

/* 1. Grundzustand: Das Menü-Inhalt-Paket ist standardmäßig unsichtbar (für Mobile) */
.wp-block-navigation__responsive-container-content {
    display: none;
}

/* 2. DESKTOP: Menü immer anzeigen (ab 601px) */
@media (min-width: 601px) {
    .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        background: #4A7A56 !important;
        padding: 0.55rem 1.8rem 0.55rem 1.6rem !important;
        clip-path: polygon(0% 0%, 100% 5%, 98% 100%, 2% 95%);
        gap: 0.15rem 0.3rem !important;
        max-width: fit-content !important;
        margin: 40px auto 0 auto !important;
    }
}

/* 3. MOBILE: Menü nur anzeigen, wenn das Sandwich-Menü OFFEN ist */
@media (max-width: 600px) {
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: column !important;
        background-color: #4A7A56 !important;
        padding: 20px !important;
        width: 100% !important;
        clip-path: none !important; /* Kein schiefer Rand auf Mobile für bessere Lesbarkeit */
        border-radius: 8px !important;
    }
    
    /* Das Hamburger-Icon selbst (der Button) */
    .wp-block-navigation__responsive-container-open {
        display: flex !important; /* Sicherstellen, dass das Sandwich-Icon da ist */
    }
    
    /* Entfernt den automatischen Abstand über dem ersten Inhalts-Element */
.wp-site-blocks > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Speziell für die Gruppen-Blöcke, falls diese oben kleben */
.wp-block-group.alignfull:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Falls der Header selbst den Abstand nach unten drückt */
header.wp-block-template-part {
    margin-bottom: 0 !important;
}
}

/* 4. Die Links (Bleiben für beide gleich) */
.wp-block-navigation-item a,
.wp-block-navigation__responsive-container-content a {
    font-family: 'Love Ya Like A Sister', cursive !important;
    font-size: 25px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    padding: 0.15rem 0.55rem !important;
    border-radius: 999px !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.wp-block-navigation-item a:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #F6C135 !important;
    transform: rotate(-2deg) scale(1.05) !important;
}

@media (min-width: 601px) {
    /* Versteckt den Hamburger-Button (und das Schließen-X) auf dem Desktop */
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close {
        display: none !important;
    }
}


/* ══════════════════════════════════════
   OPTIONAL: DAS GROßE LOGO
══════════════════════════════════════ */
/* Damit das WordPress-Logo auch den coolen Wackel-Effekt und die richtige Größe aus deinem Entwurf bekommt */
.wp-block-site-logo img {
    height: 288px !important;
    width: auto !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)) !important;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important;
}

.wp-block-site-logo a:hover img {
    transform: scale(1.06) rotate(-2deg) !important;
}

/* ══════════════════════════════════════
   MOBILE ANSICHT ANPASSEN
══════════════════════════════════════ */

/* Mobiles Menü: nur zeigen wenn offen oder auf Desktop */
@media (max-width: 600px) {
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__responsive-container-content {
        display: none !important;
    }
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: column !important;
    }
}
@media (min-width: 601px) {
    .wp-block-navigation__responsive-container
    .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
}


@media only screen and (max-width: 600px) {
    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
        /* Auf dem Handy entfernen wir den harten Anschnitt, damit das Menü beim Ausklappen gut aussieht */
        clip-path: none !important; 
        background-color: #4A7A56 !important;
        padding: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 8px !important;
        
        /* Falls du hier wieder dein altes Hintergrundbild einfügen willst, kannst du es hier entkommentieren: */
        /* background: url("http://silflay.local/wp-content/uploads/2022/02/guck-menu2.png"), #4A7A56 !important; */
        /* background-position: right 0px bottom 0px !important; */
        /* background-size: 50% !important; */
        /* background-repeat: no-repeat !important; */
    }
    
    .wp-block-site-logo img {
        height: 100px !important; /* Auf dem Handy etwas kleiner */
    }
}


@media only screen and (max-width: 600px) {
  
.titelbild {
    margin-top:-40px!important;
    z-index:-10;
    
}

.titelschrift {
    margin-top:-70px!important;
    z-index:-10;
    
}


  .wp-site-blocks, body > .is-root-container, .edit-post-visual-editor__post-title-wrapper, .wp-block-group.alignfull, .wp-block-group.has-background, .wp-block-cover.alignfull, .is-root-container .wp-block[data-align="full"] > .wp-block-group, .is-root-container .wp-block[data-align="full"] > .wp-block-cover {
    padding-left: 1%!important;
    padding-right: 1%!important;
}


  .fullwidth {
    max-width: 98%;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wp-block-site-logo a, .wp-block-site-logo img {
    border-radius: inherit;
    width: 100px;
}



.entry-content p {
    max-width: 98%;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wp-container  {
    max-width: 98%;
    margin-left: auto !important;
    margin-right: auto !important;
}


.wp-container-621ac60fa1314 {
    max-width: 98%!important;
    margin-left: auto !important;
    margin-right: auto !important;
}

h1 {
  font-size:30px!important;
}

h2 {
  font-size:30px!important;
}

		.wp-site-blocks > * + * {
    margin-top: var( --wp--style--block-gap );
    background-color: rgba(255,255,255,0.0);
    border: 0px solid #7c0000;
        width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background-color: rgba(0,0,0, 0.8);
    color: #7c0000;
}




}