/* style.css - Beispiele für Tagebuch-Styling */

h1,h2 {font-family: "roca", sans-serif;
font-weight: 400;
font-style: normal;}

h2 {font-size: 1.8em;}


/* --- Styling für die Listenansicht (Seite "Meine Einträge") --- */


/* --- Styling für die Listenansicht (Seite "Meine Einträge") --- */

/* Haupt-Container für einen Eintrag - JETZT FLEXBOX */
.tagebuch-liste .tagebuch-eintrag {
    background-color: #f8f8f8; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px;       
    padding: 20px;             /* Ggf. Innenabstand anpassen */
    margin-bottom: 30px;       
    display: flex;             /* <<< NEU: Aktiviert Flexbox */
    align-items: flex-start;   /* <<< NEU: Elemente oben ausrichten */
    gap: 25px;                 /* <<< NEU: Abstand zwischen Bild und Text */
}

/* Container für das Bild (linke Spalte) */
.tagebuch-liste .eintrag-bild-container {
    flex-basis: 250px; /* Feste Breite für die Bildspalte (anpassen nach Bedarf) */
    flex-shrink: 0;    /* Verhindert, dass Bild kleiner wird, wenn Text lang ist */
}



/* Bild im Listeneintrag - Normalzustand */
.tagebuch-liste .eintrag-bild-container img {
     max-width: 100%; 
     height: auto;
     display: block; 
     border-radius: 4px; 
     border: 1px solid #ddd; 
     
     /* --- NEU: Übergang für sanftes Skalieren hinzufügen --- */
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
     /* 0.3s ist die Dauer der Animation, 'ease-in-out' die Art der Animation */
}

/* Bild im Listeneintrag - Hover-Zustand (wenn man über den Link fährt) */
.tagebuch-liste .eintrag-bild-container a:hover img {
    /* --- NEU: Bild vergrößern --- */
    transform: scale(1.1); /* Beispiel: 10% größer. Werte wie 1.05, 1.15, 1.2 etc. testen */
    
    /* --- Optional: Schatten beim Hover hinzufügen --- */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); 
    
    /* Optional: Z-Index, falls Bild über Text liegen soll (selten nötig) */
    /* position: relative; */ /* Nötig für z-index */
    /* z-index: 10; */
}

/* Container für den Text (rechte Spalte) */
.tagebuch-liste .eintrag-text-content {
    flex-grow: 1; /* Nimmt den restlichen verfügbaren Platz ein */
    display: flex; /* Machen wir den Textcontainer AUCH zu Flex... */
    flex-direction: column; /* ...damit Titel und Meta sauber untereinander stehen */
}

/* Titel innerhalb des Text-Containers */
.tagebuch-liste .eintrag-text-content h2 {
    margin-top: 0; /* Kein Abstand oben für den Titel */
    margin-bottom: 10px;
    font-size: 1.3em; /* Ggf. Schriftgröße anpassen */
    line-height: 1.3;
    font-family: "roca", sans-serif; /* Deine Schriftart */
    font-weight: 400;
    font-style: normal;
}
.tagebuch-liste .eintrag-text-content h2 a {
    text-decoration: none; 
    color: #2fa7b7; 
}
.tagebuch-liste .eintrag-text-content h2 a:hover {
    color: #73adb5; 
}

/* Meta-Infos innerhalb des Text-Containers */
.tagebuch-liste .eintrag-text-content .eintrag-meta {
    font-size: 1.1em;
    color: #444;
    line-height: 1.6; 
    font-family: "ofelia-display", sans-serif; /* Deine Schriftart für p/li */
    font-weight: 400;
    font-style: normal;
}
/* Darstellung der einzelnen Meta-Infos (Datum, Zustand) */
.tagebuch-liste .eintrag-text-content .eintrag-meta span {
    display: block; /* Erzwingt neue Zeile für jedes Span */
    margin-bottom: 5px; 
    margin-right: 0; /* Nicht mehr nötig */
}
 .tagebuch-liste .eintrag-text-content .eintrag-meta span:last-of-type {
     margin-bottom: 0; /* Kein Abstand nach dem letzten Span vor dem Fokus */
 }

/* Trainingsfokus innerhalb des Meta-Containers */
.tagebuch-liste .eintrag-text-content .eintrag-meta .eintrag-fokus { /* Klasse aus PHP verwenden */
    margin-top: 15px; 
    color: #555;
    line-height: 1.5;
}
.tagebuch-liste .eintrag-text-content .eintrag-meta .eintrag-fokus strong {
    font-style: normal; 
    font-weight: 600; 
    display: block; 
    margin-bottom: 3px;
    color: #333;
}

/* ALTEN/ÜBERFLÜSSIGEN Bild-Style für innerhalb .eintrag-meta entfernen/auskommentieren */
/*
.tagebuch-liste .eintrag-meta img {
     display: block; 
     margin-top: 15px;
     border-radius: 4px; 
}
*/

/* --- (Restliches CSS für Einzelansicht, Paginierung etc. bleibt bestehen) --- */



/* --- Styling für die Paginierung (falls viele Einträge) --- */
.pagination {
    clear: both;
    margin-top: 40px;
    text-align: center;
}
.pagination .page-numbers {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 3px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #555;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: #555; /* Dunkler Hintergrund beim Hover/Aktiv */
    color: #fff; /* Weiße Schrift */
    border-color: #555;
}
.pagination .page-numbers.dots {
    border: none;
    padding: 8px 5px;
}

/* --- Header / Menu Styles (von dir) --- */

#top-menu-nav, /* Stil für den gesamten Navigationsbereich */
#top-menu-nav ul, /* Stil für die ungeordnete Liste */
#top-menu-nav li, /* Stil für Listenelemente */
#top-menu-nav a { /* Stil für die Links (wichtig!) */
  font-display: swap;
	font-family: "ofelia-display", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Optional: Unterschiedliche Formatierungen, falls gewünscht */
#top-menu-nav li.current_page_item a {
    font-weight: 400; /* Oder eine andere Schriftstärke, z.B., 700, wenn verfügbar */
}

#top-menu-nav a {
  /* color: #333;  Beispiel für eine dunkelgraue Farbe */
  /* text-decoration: none;  Entfernt Unterstreichungen, falls nicht erwünscht */
}

#top-menu-nav a:hover {
    /* color: #007bff; Beispiel für eine blaue Farbe beim Darüberfahren */
    /* text-decoration: underline;  Unterstreichung beim Darüberfahren */
}

#top-menu-nav a {
  /* font-size: 16px;  Beispielwert, passe ihn an deine Bedürfnisse an */
}

/* Submenü */
#et-info {
	font-display: swap;
  font-family: "ofelia-display", sans-serif;
  font-weight: 300; /* Light */
  font-style: normal;
  margin-bottom: 1rem; /* Optionaler Abstand */
	padding-top: 5px;
}

#et-info-email::before {
  content: none !important; /* Wichtig: Überschreibt die vorherige content-Eigenschaft */
}

#et-info a::before {
    content: "Hast du Fragen? ";
    margin-right: 0.5em;
}

#et-info a {
    text-decoration: none;
    /* color: blue; */ /* Optional: Linkfarbe */
}

#et-info a:hover {
    text-decoration: underline;
}

/* Topheader */
#top-header {
	height:45px;
    margin-bottom: -10px; /* Beispiel: Reduziere auf 10px, oder einen Wert, der passt */
    /* Entferne oder kommentiere padding-bottom aus, wenn es auf 0 gesetzt werden soll: */
    /* padding-bottom: 0; */
}

/* Border Heaeder */
#main-header {
	border-bottom: 6px solid #676768;
}

/* Globale Typo (von dir) */
p, li {font-display: swap;
  font-family: "ofelia-display", sans-serif;
  font-weight: 400; /* Entspricht 'normal' */
  font-style: normal;
	font-size: 20px;
}

/* Zusätzliche Regel NUR für li, um den Zeilenabstand zu erhöhen */
li {
  line-height: 1.6; /* Beispielwert: Erhöhe diesen Wert nach Bedarf */
}

/* CLS Fixes für spezifische Bilder durch aspect-ratio */
/* Beispiel - muss ggf. angepasst werden */


/* --- TESTWEISE AUSKOMMENTIERT --- */

body, h1, h2, h3, h4, h5, h6, .et_pb_button {
    font-display: swap !important;
}

/* --- ENDE AUSKOMMENTIERT --- */

/* ODER spezifischer für @font-face Regeln */



.et_pb_button.et_pb_button_0.et_pb_bg_layout_light {
    font-size: 20px;
    font-weight: 500;
    padding: .3em 1em;
    line-height: 1.7em !important;
    background-color: #007e89 !important;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 2px solid;
    border-radius: 3px;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: all !important;
    transition-property: all !important;
}


a:link {cursor: pointer;}






/* ================================================ */
/* Styling für das ACF Frontend Formular          */
/* (Seite "Neuer Tagebucheintrag")                */
/* ================================================ */

/* Optional: Formular etwas zentrieren und begrenzen */
/* .page-template-template-tagebuchform .entry-content form { max-width: 800px; margin: 20px auto; } */

/* Wrapper für jedes einzelne Feld im Formular */
.acf-field {
    margin-bottom: 28px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #eaeaea !important;
}
.acf-field:last-of-type {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Feld-Beschriftung (Label) im Formular */
.acf-field > .acf-label label {
	font-family: "roca", sans-serif;
    display: block;
    margin-bottom: 10px !important;
    font-weight: 600;
    font-size: 1.6em;
    color: #333;
}
.acf-field > .acf-label label .acf-required {
    color: #dc3232;
    margin-left: 4px;
    font-weight: normal;
}

/* Feld-Anweisungen im Formular */
.acf-field > .acf-input .acf-instructions {
    font-size: 1.8em;
    color: #777;
    margin-top: -5px;
    margin-bottom: 10px;
    font-style: italic;
}

/* Eingabefelder im Formular (basiert auf deinem Beispiel) */
.acf-field input[type="text"],
.acf-field input[type="email"],
.acf-field input[type="number"],
.acf-field input[type="url"],
.acf-field input[type="password"],
.acf-field input[type="search"],
.acf-field input[type="tel"],
.acf-field textarea,
.acf-field select,
.acf-field .acf-date-picker input[type="text"],
.acf-field .select2-container .select2-selection--single {
    background-color: #ffffff;
    color: #000000;
    font-family: "ofelia-display", sans-serif; /* Deine Wunsch-Schriftart */
    font-size: 20px; /* Deine Wunsch-Größe */
    font-weight: 400;
    font-style: normal;
    line-height: 1.4; /* Angepasst für 20px Schrift */
    padding: 16px;
    border-width: 0px;
    border-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: rgb(139, 103, 145); /* Deine Farbe */
    border-radius: 5px;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: text;
}

.acf-field input::placeholder,
.acf-field textarea::placeholder {
  color: #bbb; /* Etwas heller für Platzhalter */
  opacity: 1;
}

/* Fokus-Effekt für Eingabefelder */
.acf-field input[type="text"]:focus,
.acf-field input[type="email"]:focus,
.acf-field input[type="number"]:focus,
.acf-field input[type="url"]:focus,
.acf-field input[type="password"]:focus,
.acf-field input[type="search"]:focus,
.acf-field input[type="tel"]:focus,
.acf-field textarea:focus,
.acf-field select:focus,
.acf-field .select2-container--open .select2-selection--single {
    border-bottom-color: #0073aa; /* WordPress-Blau als Fokusfarbe */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06), 0 0 5px rgba(0, 115, 170, 0.2);
    outline: none;
}

/* Textarea spezielle Styles */
.acf-field textarea {
    min-height: 150px;
	font-size:20px !important;
    line-height: 1.6; /* Mehr Zeilenabstand für Textarea */
}

/* Bild-Upload-Feld im Formular */
.acf-field-image .acf-input .acf-image-uploader {
    border: 1px dashed #ccc;
    border-radius: 4px;
    padding: 15px;
    background-color: #fdfdfd;
    text-align: center;
}
 .acf-field-image .acf-input .acf-image-uploader .image-wrap img {
     border: 1px solid #ddd;
     border-radius: 3px;
     max-width: 200px;
     height: auto;
     display: inline-block;
     margin-bottom: 10px;
     vertical-align: middle;
 }
 .acf-field-image .acf-input .acf-image-uploader .acf-actions {
     display: inline-block;
     vertical-align: middle;
     margin-left: 15px;
 }

/* Sende-Button im Formular */
.acf-form-submit {
    margin-top: 30px;
    text-align: right;
}

.acf-form-submit .acf-button{
    background-color: #6F428B;
	font-family: "roca", sans-serif;
    color: #fff !important;
    border: none;
    padding: 28px 28px;
    font-size: 1.5em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-shadow: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    line-height: 1;
}

.acf-form-submit .acf-button:hover {
    background-color: #c8a3e0;
    color: #fff !important;
}


/* In tagebuch-style.css oder style.css */

@media (max-width: 767px) { 
    
    /* ... (deine anderen mobilen Styles für Liste, Formularfelder etc.) ... */

    .acf-form-submit { 
        text-align: center; /* Button-Container zentrieren */
    }
    
    .acf-form-submit .acf-button { 
        width: 100%; 
        max-width: 100%; /* Sicherstellen, dass er nicht breiter als 100% wird */
        box-sizing: border-box; 
        padding: 15px 10px; /* Vertikales Padding beibehalten, horizontales ggf. leicht reduziert */
        margin-left: 0; 
        margin-right: 0; 
        float: none; 
        display: block;

        /* --- NEU / ANPASSEN: Kleinere Schriftgröße für den Button --- */
        font-size: 16px; /* Beispielwert. Probiere hier kleinere Werte aus! z.B. 15px oder 0.9em */
        /* Optional: Schriftgewicht reduzieren, falls er immer noch zu 'fett' wirkt */
        /* font-weight: normal; */ 
        /* --------------------------------------------------------- */
    }

    /* ... (deine anderen mobilen Styles) ... */
}




/* Optional: Responsivität */
@media (max-width: 767px) { /* Breiterer Breakpoint für Responsivität */
     
     /* Formularfelder auf Mobilgeräten */
     .acf-field input[type="text"],
     .acf-field input[type="email"],
     .acf-field input[type="number"],
     .acf-field input[type="url"],
     .acf-field input[type="password"],
     .acf-field input[type="search"],
     .acf-field input[type="tel"],
     .acf-field textarea,
     .acf-field select {
         font-size: 18px; /* Ggf. Schriftgröße für Mobilgeräte anpassen */
         padding: 14px; /* Ggf. Padding anpassen */
     }
     
     /* Formular Button auf Mobilgeräten */
     .acf-form-submit { text-align: center; }
     .acf-form-submit .acf-button { width: 100%; padding: 15px; }
     
     /* Listenansicht auf Mobilgeräten untereinander */
     .tagebuch-liste .tagebuch-eintrag {
         flex-direction: column; /* Bild über Text */
         gap: 15px;
         padding: 15px;
     }
     .tagebuch-liste .eintrag-bild-container {
         flex-basis: auto; /* Breite automatisch */
         max-width: 250px; /* Max Breite für Bild, ggf. anpassen */
         margin: 0 auto 15px auto; /* Zentrieren und Abstand unten */
     }
     .tagebuch-liste .eintrag-text-content h2 {
         font-size: 1.4em; /* Titel etwas kleiner */
     }
      .tagebuch-liste .eintrag-text-content .eintrag-meta {
         font-size: 0.95em; /* Meta-Infos etwas kleiner */
     }

     /* Einzelansicht auf Mobilgeräten */
     .tagebuch-single-entry article {
          padding: 15px; /* Weniger Padding */
     }
     .tagebuch-single-entry .tagebuch-feld {
         padding: 15px;
         margin-bottom: 20px;
     }
      .tagebuch-single-entry .tagebuch-feld h2 {
         font-size: 1.1em;
     }
     .tagebuch-single-entry .tagebuch-feld img {
         max-width: 100%; /* Volle Breite auf Mobilgeräten */
     }

     /* Paginierung auf Mobilgeräten */
      .pagination .page-numbers {
        padding: 6px 10px;
        margin: 0 1px;
     }
}





/* --- Ende des Tagebuch-CSS --- */















/* --- VARIANTE 1: Hintergrund für den gesamten Inhaltsbereich der Formularseite --- */

/* Methode A: Über die Seiten-ID (Zuverlässiger) */
/* Ersetze page-id-XX mit deiner tatsächlichen Seiten-ID, z.B. page-id-22 */
#primary { /* Divi verwendet oft diese Struktur */
    background-color: #7CB1B9; /* Beispiel: Sehr helles, kühles Grau/Blau */
    padding: 40px 50px;       /* Innenabstand, damit Form nicht am Rand klebt */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07); /* Leichter Schatten für Tiefe */
    margin-top: 0;         /* Optional: Abstand nach oben */
    margin-bottom: 0;      /* Optional: Abstand nach unten */
}

/* Methode B: Über den Template-Namen (Falls ID nicht geht) */
/* body.page-template-template-tagebuchform #main-content .container { 
    background-color: #eef2f7; 
    padding: 40px 50px;  
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07); 
    margin-top: 30px;        
    margin-bottom: 30px;      
} */

/* Optional: Sicherstellen, dass der FORMULAR-Bereich selbst transparent ist,
   wenn der äußere Container die Farbe hat */
/* body.page-id-XX .entry-content form {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
} */


/* ================================================ */
/* Speziell das Titelfeld im ACF Formular höher machen */
/* ================================================ */
/* In tagebuch-style.css oder style.css hinzufügen */

#acf-_post_title { 
    /* Erhöhe den vertikalen Innenabstand, um das Feld höher zu machen */
    /* Passe die Werte an, bis die Höhe stimmt */

padding-top: 15px;    /* Beispiel: War vielleicht 16px, jetzt 20px */
    padding-bottom: 15px; /* Beispiel: War vielleicht 16px, jetzt 20px */
	 font-size: 1.1em;

    /* Optional könntest du auch NUR für dieses Feld die Schriftgröße ändern */
    /* font-size: 22px; */ 

    /* Wichtig: Die anderen Styles wie background-color, border-bottom, font-family etc. 
       sollte dieses Feld von der allgemeinen Regel für 
       '.acf-field input[type="text"]' erben, die wir vorher definiert haben.
       Falls nicht, müssten diese Styles hier wiederholt werden. */
}




.background-tagebucheintrag {
    background-color: #7cb1b9;}









/* In tagebuch-style.css oder style.css anpassen */

/* ================================================ */
/* Gemeinsames Styling für ACF Button & .button-start */
/* ================================================ */

/* Haupt-Styling */
 /* Bisheriger Selektor */
.button-start /* NEU: Dein Klassenname hinzugefügt */ { 
    /* Hier stehen alle deine Styles für den Button: */
    background-color: #2fa7b7; /* Beispiel-Farbe */
    color: #fff !important; 
    border: none;
    padding: 14px 28px; /* Beispiel-Padding */
    font-size: 30px;   /* Beispiel-Größe */
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-shadow: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    line-height: 1;
    text-align: center; /* Wichtig für Text im Button */
    display: inline-block; /* Standard für Buttons/Links */
    text-decoration: none; /* Falls .button-start ein Link ist */
    /* Füge hier ggf. weitere Styles deines ACF-Buttons ein */
}

/* Hover-Effekt */
 /* Bisheriger Selektor */
.button-start:hover /* NEU: Dein Klassenname hinzugefügt */ { 
    background-color: #73adb5; /* Beispiel: Dunkleres Blau */
    color: #fff !important;
    text-decoration: none; /* Falls .button-start ein Link ist */
	border-radius: 5px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-shadow: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    line-height: 1;
    text-align: center; /* Wichtig für Text im Button */
    display: inline-block; /* Standard für Buttons/Links */
    text-decoration: none; /* Falls .button-start ein Link ist */
    /* Füge hier ggf. weitere Styles deines ACF-Buttons ein */
}


/* ================================================ */
/* Responsive Anpassungen (Mobile)                 */
/* ================================================ */

@media (max-width: 767px) {
    /* ... deine anderen mobilen Styles ... */

    /* Responsive Styles für BEIDE Buttons */
   /* Bisheriger Selektor */
    .button-start /* NEU: Dein Klassenname hinzugefügt */ { 
        width: 100%; 
        max-width: 100%; 
        box-sizing: border-box; 
        padding: 15px 10px; 
        margin-left: 0; 
        margin-right: 0; 
        float: none; 
        display: block;
        font-size: 16px; /* Beispiel mobile Größe */
    }

    /* Ggf. Container für .button-start auch zentrieren? */
    /* .button-start-container { text-align: center; } */

     /* ... deine anderen mobilen Styles ... */
}

/* In tagebuch-style.css oder style.css anpassen */

/* Gemeinsamer Hover-Effekt */
.acf-form-submit .acf-button:hover,
.button-start:hover,
.et_pb_button.button-start:hover { /* Sicherer Selektor hinzugefügt */
    background-color: #73adb5; /* Beispiel: Dunkleres Blau */
    color: #fff !important;
    text-decoration: none; 
    
    /* --- NEU: Verhindern, dass sich Padding/Breite beim Hover ändert --- */
    /* Ersetze 28px mit dem tatsächlichen padding-right des Buttons im Normalzustand! */
    padding-right: 28px !important; 
    /* Falls sich auch padding-left ändert, hier auch den Normalwert eintragen: */
    /* padding-left: 28px !important; */
    /* Falls sich die Breite ändert, ggf. hier fixieren: */
    /* width: auto !important; */ /* Oder den ursprünglichen Breitenwert */
    /* ----------------------------------------------------------------- */
}

/* Standard Divi Hover-Icon für Buttons entfernen UND sicherstellen, dass es keinen Platz einnimmt*/
.button-start:hover::after,
.et_pb_button.button-start:hover::after, 
.acf-form-submit .acf-button:hover::after {
    display: none !important; 
    padding: 0 !important;    /* Sicherstellen, dass kein Innenabstand bleibt */
    margin: 0 !important;     /* Sicherstellen, dass kein Außenabstand bleibt */
    width: 0 !important;      /* Sicherstellen, dass keine Breite bleibt */
    content: none !important; /* Inhalt entfernen */
}

/* Optional: Auch im Normalzustand das ::after leeren, falls nötig */
/*
.button-start::after,
.et_pb_button.button-start::after, 
.acf-form-submit .acf-button::after {
    display: none !important; 
}
*/




/* ================================================ */
/* Styling für die WordPress Update-/Erfolgsmeldung */
/* (ID #message, Klasse .updated)                 */
/* ================================================ */
/* In tagebuch-style.css oder style.css hinzufügen/ersetzen */

/* Ziel: Das DIV mit ID "message" UND Klasse "updated" */
#message.updated,
div.updated#message { /* Zwei Schreibweisen für hohe Spezifität */
    background-color: #28a745; /* Beispiel: Erfolgs-Grün */
    border-color: #1e7e34;     /* Passender dunklerer Rand */
    border-left-width: 4px;  /* Standard WordPress: Dickerer linker Rand */
    padding: 15px 20px;       /* Innenabstand */
    margin: 25px 0;           /* Abstand oben/unten zur Umgebung */
    border-radius: 4px;       /* Leichte Abrundung */
    box-shadow: 0 1px 1px rgba(0,0,0,.04); /* Leichter Schatten */
}

/* Ziel: Der Absatz <p> INNERHALB der Box für Text-Styling */
#message.updated p {
    color: #ffffff !important;     /* Weiße Schriftfarbe (!important zur Sicherheit) */
    font-size: 1.2em;   /* Beispiel: Größere Schrift (Passe an: 18px, 1.1em...) */
    font-weight: 500; /* Etwas kräftiger als normaler Text */
    margin: 0;        /* Kein zusätzlicher Abstand für den Absatz selbst */
    padding: 0;       /* Kein zusätzlicher Innenabstand für den Absatz */
    line-height: 1.6; /* Gute Lesbarkeit */
}

 /* Optional: Links innerhalb der Nachricht stylen */
#message.updated p a {
    color: #ffffff; /* Weißer Link */
    text-decoration: underline; /* Unterstrichen */
    font-weight: bold; /* Fett */
}
#message.updated p a:hover {
     text-decoration: none; /* Unterstreichung beim Hover weg */
 }














/* ================================================ */
/* Styling für die Einzelansicht (single-tagebucheintrag.php) */
/* ================================================ */

/* Optional: Gesamtbreite des Inhaltsbereichs auf der Einzelseite begrenzen und zentrieren */
.single-tagebucheintrag #primary { /* Zielt speziell auf die Einzelansicht */
    max-width: auto; /* Beispiel: Maximale Breite */
}

/* Haupt-Artikel-Container (optional für Hintergrund/Rahmen) */
.tagebuch-single-entry article.tagebucheintrag { /* Klasse vom post_class() */
     background-color: #fff; /* Weißer Hintergrund für den Artikel */
     padding: 30px 40px; /* Innenabstand */
     border: 1px solid #e0e0e0; /* Leichter Rahmen */
     box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* Weicherer Schatten */
     border-radius: 8px; /* Abgerundete Ecken */
     margin-bottom: 30px; /* Abstand nach unten */
}

/* Header der Einzelansicht (Titel, Zurück-Link) */
.tagebuch-single-entry .entry-header {
    margin-bottom: 35px; 
    padding-bottom: 25px; 
    border-bottom: 1px solid #eee; /* Leichte Trennlinie */
}

 .tagebuch-single-entry .entry-header h1.entry-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-family: "roca", sans-serif; /* Deine Titelschriftart */
    font-size: 2.2em; /* Beispielgröße für Haupttitel */
    line-height: 1.3;
    color: #2c3e50; /* Dunkelblau-Grau */
 }
  .tagebuch-single-entry .entry-header p a { /* Zurück-Link */
    font-size: 0.9em;
    color: #555;
    text-decoration: none;
 }
  .tagebuch-single-entry .entry-header p a:hover {
    text-decoration: underline;
 }


.tagebuch-single-entry .entry-content {
    margin-top: 0; /* Kein extra Abstand nach dem Header */
}

/* Styling für jeden einzelnen Feldbereich */
.tagebuch-single-entry .tagebuch-feld {
    margin-bottom: 28px; /* Einheitlicher Abstand */
    padding: 20px;        
    border-bottom: none;  /* Keine gepunktete Linie mehr */
    background-color:#f5f8fa; /* Helles Grau statt dem lila #ecdcef? Anpassen! */
    border-radius: 5px; 
    border: 1px solid #e8e8e8; 
}

.tagebuch-single-entry .tagebuch-feld:last-child {
     margin-bottom: 0; /* Kein Abstand nach dem letzten Feld */
}

/* Styling für die Feld-Überschriften (h2) */
.tagebuch-single-entry .tagebuch-feld h2 {
    font-size: 1.15em; /* Etwas kleiner, dezenter */
    color: #485769; /* Passend zum Hintergrund */
    margin-top: 0; 
    margin-bottom: 12px; /* Mehr Abstand zum Inhalt */
    padding-bottom: 8px;
    border-bottom: 1px solid #d8dde4; /* Dezentere Linie */
    font-family: "roca", sans-serif; 
    font-weight: 600; /* Etwas fetter */
    font-style: normal;
    letter-spacing: 0.5px; /* Etwas mehr Buchstabenabstand */
}

/* Styling für den Feld-Inhalt (p oder div für nl2br) */
.tagebuch-single-entry .tagebuch-feld p,
.tagebuch-single-entry .tagebuch-feld div { 
    margin-top: 0;
    margin-bottom: 0; 
    line-height: 1.75; /* Hoher Zeilenabstand für Lesbarkeit */
    color: #333;
    font-family: "ofelia-display", sans-serif; /* Deine Textschriftart */
    font-size: 17px; /* Ggf. anpassen (war vorher 20px aus p,li) */
    font-weight: 400;
    font-style: normal;
}

/* Styling für das Bild */
.tagebuch-single-entry .tagebuch-feld img {
    border: 1px solid #ccc; 
    padding: 5px; 
    margin-top: 15px;
    max-width: 100%; /* Volle Breite des Containers erlauben */
    height: auto;
    display: block;
    margin-left: 0; /* Nicht mehr zentriert, linksbündig */
    margin-right: 0;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.1); 
    background-color: #fff;
    border-radius: 4px; /* Passend zu anderen Radien */
}

/* Footer der Einzelansicht (wo der Zurück-Link etc. ist) */
.tagebuch-single-entry .entry-footer {
     margin-top: 35px;
     padding-top: 25px;
     border-top: 1px solid #eee; /* Leichte Linie vor dem Footer */
}
 .tagebuch-single-entry .entry-footer p a { /* Zurück-Link im Footer */
      font-size: 0.9em;
      color: #555;
      text-decoration: none;
 }
  .tagebuch-single-entry .entry-footer p a:hover {
      text-decoration: underline;
 }

/* Responsive Anpassungen für Einzelansicht, falls nötig */
@media (max-width: 767px) {
    .single-tagebucheintrag #primary {
         margin: 20px auto; /* Weniger Abstand auf Mobilgeräten */
         padding: 0 15px; /* Weniger Seitenabstand */
    }
     .tagebuch-single-entry article.tagebucheintrag {
         padding: 20px; /* Weniger Innenabstand */
     }
     .tagebuch-single-entry .entry-header h1.entry-title {
         font-size: 1.8em; /* Titel kleiner */
     }
      .tagebuch-single-entry .tagebuch-feld h2 {
          font-size: 1.1em; /* Feld-Überschriften kleiner */
     }
     .tagebuch-single-entry .tagebuch-feld p,
     .tagebuch-single-entry .tagebuch-feld div {
         font-size: 16px; /* Text kleiner */
     }
}









/* Versteckt den Login-Link per CSS, wenn Benutzer eingeloggt ist */
body.logged-in .login-link {
    display: none !important; /* Versteckt den Menüpunkt nur für eingeloggte Benutzer */
} 










/* ================================================ */
/* Styling für den dynamischen Logout-Link        */
/* im Sekundär-Menü                               */
/* ================================================ */
/* In tagebuch-style.css oder style.css hinzufügen */

#et-secondary-nav .menu-item-logout a {
    /* Deine gewünschten Styles von .menu-item-147 a übernehmen: */
    font-family: "roca", sans-serif;
    font-weight: bold;      /* Fett */
    font-style: normal;
    font-size: 1.1em;       /* 10% größer */
    font-display: swap;     /* Kann nicht schaden */

    /* ACHTUNG: Negativer margin-top auf einem Link (<a> ist standardmäßig inline) 
       kann zu unerwarteten Layout-Verschiebungen führen oder gar nicht wirken. 
       Möglicherweise musst du display: inline-block hinzufügen oder den Margin 
       auf das umgebende <li> (.menu-item-logout) anwenden. Teste es! */
   

    /* Optional: Wenn du doch eine andere Farbe willst */
    /* color: #deine-farbe; */

    /* Optional: Um sicherzustellen, dass der Margin greift */
    display: inline-block; 
}

/* Optional: Separater Hover-Effekt für den Logout-Link, falls gewünscht */
/* #et-secondary-nav .menu-item-logout a:hover {
    color: #deine-hover-farbe;
    text-decoration: underline;
} */




/* Hintergrundfarbe für die Sektion mit der ID "hintergrund" */
#hintergrund {
    background-color: #73adb5 !important; /* Deine Wunschfarbe */



    /* Padding (Innenabstand) für die Sektion solltest du idealerweise 
       direkt in den Divi Sektions-Einstellungen setzen (Design -> Abstand), 
       nicht unbedingt hier im CSS, damit es im Builder sichtbar bleibt. */
    /* padding-top: 50px; */
    /* padding-bottom: 50px; */
}

#hintergrund-login {
    background-color: #6e428a !important; /* Deine Wunschfarbe */



    /* Padding (Innenabstand) für die Sektion solltest du idealerweise 
       direkt in den Divi Sektions-Einstellungen setzen (Design -> Abstand), 
       nicht unbedingt hier im CSS, damit es im Builder sichtbar bleibt. */
    /* padding-top: 50px; */
    /* padding-bottom: 50px; */
}






.pferd-daten .et_pb_image_wrap, /* Zentriert den Span, falls er nicht volle Breite hat */
.pferd-daten img { /* Zentriert das Bild selbst */
  display: block; /* Macht das Element zu einem Block-Element */
  margin-left: auto; /* Setzt den linken Rand automatisch */
  margin-right: auto; /* Setzt den rechten Rand automatisch */
}

/* Optional: Stellen Sie sicher, dass der Div selbst nicht unerwartet zentriert wird, falls er eine feste Breite hat */
.pferd-daten {
   margin-left: 0; 
   margin-right: 0;
}