/* Google Font Lato einbinden */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/*
 Theme Name: Anwaltskanzlei Astra Child
 Theme URI: https://example.com/
 Description: Child-Theme für eine Anwaltskanzlei auf Basis von Astra.
 Author: G L
 Template: astra
 Version: 1.0
 Text Domain: anwaltskanzlei-astra-child
*/

/* Grundfarben (nur als Kommentar-Referenz)
   Primär: #1F2937 (dunkles Blau/Anthrazit)
   Akzent: #C4A574 (Gold)
   Hellgrau-Sektion: #F7F7F7
   Text: #111111
*/

/* Body / Grundschrift */
body {
    color: #111111;
    background-color: #ffffff;
}

/* Links */
a {
    color: #1F2937;
}

a:hover,
a:focus {
    color: #C4A574;
}

/* Buttons allgemein */
button,
input[type="submit"],
.ast-button,
.button,
.wp-block-button__link {
    background-color: #F6B092;
    color: #ffffff;
    border-radius: 2px;
    border: none;
    padding: 0.75em 1.5em;
    text-transform: none;
    letter-spacing: 0.03em;
}

button:hover,
input[type="submit"]:hover,
.ast-button:hover,
.button:hover,
.wp-block-button__link:hover {
    background-color: #F5EBE0;
    color: #ffffff;
}

/* Header / Menü */
.main-header-bar,
.ast-primary-header-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.main-header-menu a,
.ast-builder-menu .menu-item > a {
    color: #1F2937;
    font-weight: 500;
}

.main-header-menu a:hover,
.ast-builder-menu .menu-item > a:hover {
    color: #C4A574;
}

/* Footer */
.site-footer,
.ast-footer-overlay {
    background-color: #1F2937;
    color: #ffffff;
}

.site-footer a {
    color: #ffffff;
}

.site-footer a:hover {
    color: #C4A574;
}

/* --------- Layout-Helfer für deine Sektionen --------- */

/* Hero-Bereich (oben, 2-Spalten: Text + Bild)
   ? diese Klasse in Gutenberg an den obersten Abschnitt geben (Zusätzliche CSS-Klasse: hero-section)
*/
.hero-section {
    padding: 80px 0;
}

.hero-section .wp-block-columns {
    align-items: center;
}

.hero-section h1,
.hero-section h2 {
    color: #1F2937;
    font-size: clamp(2.3rem, 3vw, 3rem);
    margin-bottom: 0.5em;
}

.hero-section p {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Sektion mit hellgrauem Hintergrund
   ? Klasse: section-gray
*/
.section-gray {
    background-color: #F7F7F7;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Normale Sektion (weißer Hintergrund)
   ? Klasse: section-white
*/
.section-white {
    background-color: #ffffff;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Kachel-Layout für Rechtsgebiete
   ? Outer Group/Columns: class "leistungen-grid"
*/
.leistungen-grid .wp-block-column,
.leistungen-grid .wp-block-group {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.leistungen-grid h3 {
    color: #1F2937;
    margin-bottom: 0.5em;
}

.leistungen-grid p {
    margin-bottom: 0;
    color: #4B5563;
    font-size: 0.95rem;
}

/*  Linie / Divider
   ? an Separator-Block: class "gold-divider"
*/
.gold-divider {
    border-top: 2px solid #F6B092 !important;
    max-width: 60px;
    margin-left: 0;
}

/* Kontaktblock 2-Spalten
   ? Gruppe: class "kontakt-section"
*/
.kontakt-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.kontakt-section h2 {
    color: #1F2937;
}

/* Formularfelder etwas edler */
.kontakt-section input[type="text"],
.kontakt-section input[type="email"],
.kontakt-section textarea {
    border-radius: 2px;
    border: 1px solid #d1d5db;
    padding: 0.6em 0.8em;
}

/* Kleinere Typografie-Optimierungen */
h1, h2, h3, h4 {
    letter-spacing: 0.02em;
}

/* ===== Farbsetup laut Vorgabe ===== */

/* HEADER / MENÜLEISTE
   Hintergrund: #375566, Schrift: weiß
*/
.main-header-bar,
.ast-primary-header-bar {
    background-color: #F6B092;
    border-bottom: none;
}

.main-header-menu a,
.ast-builder-menu .menu-item > a {
    color: #ffffff;
    font-weight: 500;
}

.main-header-menu a:hover,
.ast-builder-menu .menu-item > a:hover {
    color: #f4f4f4;
}

/* "Über mich" – Bereich
   Hintergrund: #29404d, Schrift: schwarz
*/
#ueber-mich {
    background-color: #F5EBE0;
    color: #ffffff;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Texte im Über-mich-Bereich auf schwarz setzen */
#ueber-mich h1,
#ueber-mich h2,
#ueber-mich h3,
#ueber-mich p,
#ueber-mich li {
    color: #5d5b53;
}

#ueber-mich a {
    color: #ffffff;
    text-decoration: underline;
}

/* "Leistungen" – Bereich
   Hintergrund: #f4f4f4, Schrift: schwarz
*/
#leistungen {
    background-color: #f4f4f4;
    color: #5d5b53;
    padding-top: 60px;
    padding-bottom: 60px;
}

#leistungen h1,
#leistungen h2,
#leistungen h3,
#leistungen p,
#leistungen li {
    color: #5d5b53;
}

/* Karten innerhalb von Leistungen bleiben weiß (leicht abgesetzt) */
#leistungen .leistungen-grid .wp-block-column,
#leistungen .leistungen-grid .wp-block-group {
    background-color: #ffffff;
}

/* "Fotos" – Bereich
   Hintergrund: #ffffff, Schrift: schwarz
*/
#galerie {
    background-color: #ffffff;
    color: #5d5b53;
    padding-top: 60px;
    padding-bottom: 60px;
}

<!-- wp:group {"tagName":"section","className":"section-white","anchor":"galerie"} -->
<section class="wp-block-group section-white" id="galerie">
	<!-- wp:heading {"level":2} -->
	<h2>Galerie</h2>
	<!-- /wp:heading -->

	<!-- wp:separator {"className":"gold-divider"} -->
	<hr class="wp-block-separator gold-divider"/>
	<!-- /wp:separator -->

	<!-- wp:gallery {"columns":3,"linkTo":"none"} -->
	<figure class="wp-block-gallery has-nested-images columns-3 is-cropped">
		<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
		<figure class="wp-block-image size-large">
			<img src="https://via.placeholder.com/800x600?text=Bild+1" alt="Kanzleifoto 1"/>
		</figure>
		<!-- /wp:image -->

		<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
		<figure class="wp-block-image size-large">
			<img src="https://via.placeholder.com/800x600?text=Bild+2" alt="Kanzleifoto 2"/>
		</figure>
		<!-- /wp:image -->

		<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
		<figure class="wp-block-image size-large">
			<img src="https://via.placeholder.com/800x600?text=Bild+3" alt="Kanzleifoto 3"/>
		</figure>
		<!-- /wp:image -->
	</figure>
	<!-- /wp:gallery -->
</section>
<!-- /wp:group -->


/* "Kontakt" – Bereich
   Hintergrund: #f4f4f4, Schrift: schwarz
*/
#kontakt {
    background-color: #f4f4f4;
    color: #5d5b53;
    padding-top: 60px;
    padding-bottom: 60px;
}

#kontakt h1,
#kontakt h2,
#kontakt h3,
#kontakt p,
#kontakt li {
    color: #5d5b53;
}

/* FOOTER
   Hintergrund: #cecece, Schrift: schwarz
*/
.site-footer,
.ast-footer-overlay {
    background-color: #cecece;
    color: #5d5b53;
}

.site-footer a {
    color: #5d5b53;
}

.site-footer a:hover {
    color: #375566;
}

/* Menü – Schriftfarbe immer weiß erzwingen */
.main-header-menu a,
.main-header-menu a:visited,
.ast-builder-menu .menu-item > a,
.ast-header-break-point .main-header-menu a,
.ast-builder-menu .menu-item > a .menu-link,
.main-header-menu .menu-link,
.ast-header-navigation .menu-item > a {
    color: #ffffff !important;
}

/* Hover-Farbe */
.main-header-menu a:hover,
.ast-builder-menu .menu-item > a:hover,
.main-header-menu .menu-link:hover {
    color: #f4f4f4 !important;
}

/* Site Title links neben dem Menü – weiß + kleinere Schrift */
.site-title a,
.site-title a:visited {
    color: #ffffff !important;
    font-size: 20px !important; /* gewünschte Größe anpassen */
    font-weight: 400 !important; /* etwas schlanker/stilvoller */
    text-decoration: none !important;
	font-weight: 700 !important;
}

/* Hover-Farbe (leicht heller) */
.site-title a:hover {
    color: #f4f4f4 !important;
}

/* ===== Schriftart LATO global erzwingen ===== */

body,
button,
input,
select,
textarea,
.site-title a,
.main-header-menu a,
.ast-builder-menu .menu-item > a,
.ast-header-navigation .menu-item > a,
h1, h2, h3, h4, h5, h6,
p,
li {
    font-family: 'Lato', sans-serif !important;
}

/* Seitentitel ausblenden (Astra Theme) */
.entry-title {
    display: none !important;
}

/* Über-mich-Bereich direkt unter dem Menü starten */
#ueber-mich {
    padding-top: 20px !important; /* 20px oder auf Wunsch 0 */
}

/* Abstand zwischen Header und Inhalt auf der Startseite entfernen */
.home .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.home .site-content > .ast-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.home .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Erstes Element im Inhalt darf keinen zusätzlichen oberen Rand haben */
.home .entry-content > *:first-child {
    margin-top: 0 !important;
}

/* Über-mich-Bereich mit definiertem Abstand unter dem Menü */
#ueber-mich {
    padding-top: 100px !important;  /* kannst du nach Geschmack auf 20/40 anpassen */
}

/* "Galerie" – Bereich
   Hintergrund: #ffffff, Schrift: schwarz
*/
#galerie {
    background-color: #ffffff;
    color: #5d5b53;
    padding-top: 60px;
    padding-bottom: 60px;
}

#galerie h1,
#galerie h2,
#galerie h3,
#galerie p,
#galerie li {
    color: #5d5b53;
}

/* Innenbreite der Sektionen begrenzen, aber Trenner (gold-divider) NICHT anfassen */
#ueber-mich > :not(.gold-divider),
#leistungen > :not(.gold-divider),
#galerie > :not(.gold-divider),
#kontakt > :not(.gold-divider) {
    max-width: 1100px;        /* gewünschte Inhaltsbreite */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Kontaktbereich sicher auf #f4f4f4 setzen */
section#kontakt,
#kontakt.wp-block-group,
.kontakt-section {
    background-color: #f4f4f4 !important;
}

/* Innere Blöcke im Kontaktbereich transparent halten */
#kontakt .wp-block-group {
    background-color: transparent !important;
}

/* Footer Hintergrund & Textfarbe */
.site-footer,
.ast-footer-overlay,
.ast-small-footer {
    background-color: #5d5b53 !important;
    color: #ffffff !important;
}

/* Links im Footer auch weiß */
.site-footer a {
    color: #ffffff !important;
}

/* Hover leicht heller */
.site-footer a:hover {
    color: #eaeaea !important;
}

/* Copyright Text */
.ast-footer-copyright {
    color: #ffffff !important;
}

/* ===== FOOTER-FARBEN ERZWINGEN ===== */

/* Astra Footer-Container (Builder + klassisch) */
footer,
.ast-footer-bar,
.ast-footer-bar .ast-footer-section,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-small-footer,
.ast-small-footer .ast-footer-overlay,
.ast-builder-footer-grid,
.ast-builder-footer-element {
    background-color: #5d5b53 !important;
    color: #ffffff !important;
}

/* Text im Footer */
footer p,
footer span,
footer div,
.ast-footer-copyright {
    color: #ffffff !important;
}

/* Links im Footer */
footer a,
.ast-footer-bar a,
.ast-small-footer a {
    color: #ffffff !important;
}

/* Hover etwas heller */
footer a:hover,
.ast-footer-bar a:hover,
.ast-small-footer a:hover {
    color: #f0f0f0 !important;
}

/* ============================================
   Leistungen: zweispaltige Liste mit dynamischer Nummerierung
   ============================================ */

/* Gemeinsamer Zähler für beide Spalten innerhalb des Spalten-Blocks */
#leistungen .leistungen-liste {
    counter-reset: leistung-counter;
}

/* Beide nummerierten Listen in den Spalten: Standardzahlen ausblenden */
#leistungen .leistungen-liste ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Hauptebene der Liste (nur direkte li-Kinder der ol) */
#leistungen .leistungen-liste ol > li {
    counter-increment: leistung-counter;  /* zählt 1,2,3,... durch */
    position: relative;
    padding-left: 40px;
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 600;
}

/* Zahlen-Styling (für beide Spalten identisch) */
#leistungen .leistungen-liste ol > li::before {
    content: counter(leistung-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: #F6B092;      /* deine gewünschte Farbe */
    font-weight: 700;
    font-size: 18px;
}

/* Unterpunkte (innere ul-Listen) sollen normale Bullets haben */
#leistungen .leistungen-liste li ul {
    list-style: disc;
    padding-left: 22px;
    margin-top: 6px;
}

#leistungen .leistungen-liste li ul li {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 4px;
    padding-left: 0;
}

/* Abstand zwischen den beiden Spalten */
#leistungen .leistungen-liste.wp-block-columns {
    gap: 40px;
}

/* ==== BACK TO TOP BUTTON – ERZWUNGENE FARBE ==== */

/* Alle Behälter, die Astra für den Scroll-To-Top nutzt */
.ast-scroll-top,
.ast-scroll-top-icon,
.ast-scroll-to-top,
.ast-scroll-top-button,
.ast-scroll-top-wrap,
.ast-scroll-top-wrap .ast-scroll-top {
    background-color: #5d5b53 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    border-color: #5d5b53 !important;
}

/* Das Icon selbst (SVG oder Font-Icon) */
.ast-scroll-top svg,
.ast-scroll-to-top svg,
.ast-scroll-top-icon svg,
.ast-scroll-top-wrap svg,
.ast-scroll-top i,
.ast-scroll-to-top i {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Hover-Zustand */
.ast-scroll-top:hover,
.ast-scroll-to-top:hover,
.ast-scroll-top-button:hover {
    background-color: #4b4a44 !important; /* etwas dunkler */
    border-color: #4b4a44 !important;
}

/* ===========================
   MOBILES MENÜ – FARBSCHEMA
   =========================== */

/* Mobile Header / Leiste oben */
.ast-header-break-point .main-header-bar,
.ast-header-break-point .ast-mobile-header-wrap {
    background-color: #F5EBE0 !important; /* gleiche Farbe wie Desktop-Menü */
}

/* Hamburger-Icon (öffnen/schließen) */
.ast-header-break-point .ast-mobile-menu-trigger-minimal,
.ast-header-break-point .ast-mobile-menu-trigger-minimal .ast-mobile-svg,
.ast-header-break-point .ast-button-wrap .menu-toggle,
.ast-header-break-point .ast-button-wrap .menu-toggle .ast-mobile-svg {
    color: #5d5b53 !important;
    fill: #5d5b53 !important;
}

/* Hintergrund des aufgeklappten Menüs */
.ast-header-break-point .ast-mobile-popup-drawer,
.ast-header-break-point .main-header-menu,
.ast-header-break-point .ast-builder-menu {
    background-color: #F5EBE0 !important;
}

/* Links im mobilen Menü */
.ast-header-break-point .ast-builder-menu .menu-item > a,
.ast-header-break-point .main-header-menu .menu-item > a {
    color: #5d5b53 !important;
}

/* Hover / aktiver Menüpunkt im mobilen Menü */
.ast-header-break-point .ast-builder-menu .menu-item > a:hover,
.ast-header-break-point .main-header-menu .menu-item > a:hover,
.ast-header-break-point .ast-builder-menu .current-menu-item > a,
.ast-header-break-point .main-header-menu .current-menu-item > a {
    color: #5d5b53 !important; /* leicht dunkler Ton */
}

/* DESKTOP Header-Hintergrund */
.main-header-bar,
.ast-primary-header-bar {
    background-color: #F6B092 !important;
}

/* MOBILE Header-Hintergrund */
.ast-header-break-point .main-header-bar,
.ast-header-break-point .ast-mobile-header-wrap,
.ast-header-break-point .ast-builder-menu-toggle {
    background-color: #F6B092 !important;
}

/* Mobiles Menü - Icon */
.ast-header-break-point .ast-mobile-menu-trigger-minimal,
.ast-header-break-point .ast-mobile-menu-trigger-minimal .ast-mobile-svg,
.ast-header-break-point .ast-button-wrap .menu-toggle,
.ast-header-break-point .ast-button-wrap .menu-toggle .ast-mobile-svg {
    color: #5d5b53 !important;
    fill: #5d5b53 !important;
}

/* Farbkorrektur für den Details-/Summary-Text im Bereich Über mich */
#ueber-mich details summary {
    color: #5d5b53 !important;
    cursor: pointer;
}

/* Optional: Hover-Farbe */
#ueber-mich details summary:hover {
    color: #4a4842 !important;
}

/* =====================================
   Allgemeines Dropdown-Menü im Header
   (z. B. Sprachmenü) hübsch machen
   ===================================== */

/* Dropdown-Container (alle Untermenüs im Hauptmenü) */
.main-header-menu .sub-menu,
.ast-header-break-point .main-header-menu .sub-menu {
    background-color: #F6B092 !important;   /* dein Menü-Ton */
    border-radius: 4px;
    padding: 4px 0 !important;
    margin-top: 6px !important;
    min-width: 70px !important;
    max-width: 90px !important;
    border: 1px solid rgba(0,0,0,0.15);
}

/* Links im Dropdown */
.main-header-menu .sub-menu a,
.ast-header-break-point .main-header-menu .sub-menu a {
    background-color: #F6B092 !important;
    color: #ffffff !important;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: none !important;
}

/* Hover im Dropdown – kein Blau mehr, nur leicht dunkler */
.main-header-menu .sub-menu a:hover,
.main-header-menu .sub-menu a:focus,
.ast-header-break-point .main-header-menu .sub-menu a:hover,
.ast-header-break-point .main-header-menu .sub-menu a:focus {
    background-color: #e89d80 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Oberer Sprachmenü-Punkt etwas kompakter */
.main-header-menu > .lang-item > a,
.ast-header-break-point .main-header-menu > .lang-item > a {
    padding-right: 4px !important;
    padding-left: 4px !important;
    background-color: transparent !important;
}

/* Eventuelle blaue Highlight-Balken von Astra entfernen */
.main-header-menu .menu-item.lang-item > a,
.main-header-menu .menu-item.lang-item > a:hover,
.main-header-menu .menu-item.lang-item > a:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Aktuelle Sprache im Polylang-Dropdown ausblenden */

/* Im Hauptmenü: Unterpunkt der aktuellen Sprache verstecken */
.main-header-menu .sub-menu .current-lang,
.main-header-menu .sub-menu .current-lang-item,
.main-header-menu .sub-menu .lang-item.current-lang,
.main-header-menu .sub-menu .lang-item.current-lang-item {
    display: none !important;
}

/* Für mobiles Menü sicherheitshalber genauso */
.ast-header-break-point .main-header-menu .sub-menu .current-lang,
.ast-header-break-point .main-header-menu .sub-menu .current-lang-item,
.ast-header-break-point .main-header-menu .sub-menu .lang-item.current-lang,
.ast-header-break-point .main-header-menu .sub-menu .lang-item.current-lang-item {
    display: none !important;
}

/* Kontaktbereich – Liste mit farbigen Haken erzwingen */
.kontakt-checklist {
    padding: 0;
    margin-top: 20px;
    list-style: none !important;
}

.kontakt-checklist li {
    position: relative;
    list-style: none !important; /* Astra-Bullets überschreiben */
    padding-left: 32px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
}

/* Haken in #F6B092 */
.kontakt-checklist li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #F6B092 !important;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

/* Accordion (Details) im Bereich Leistungen */
#leistungen details {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-left: 4px solid #F6B092;
  border-radius: 6px;
  padding: 0;
  margin: 12px 0;
  overflow: hidden;
}

/* Klickbarer Titel */
#leistungen details > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  background: transparent;
}


/* Standard-Pfeil ausblenden (Browser) */
#leistungen details > summary::-webkit-details-marker {
  display: none;
}

/* eigener Pfeil */
#leistungen details > summary::after {
  content: "▾";
  float: right;
  font-weight: 700;
}

/* Pfeil drehen wenn offen */
#leistungen details[open] > summary::after {
  content: "▴";
}

/* Inhalt */
#leistungen details > *:not(summary) {
  padding: 12px 16px 16px 16px;
}

/* Leistungen: Accordion schmaler + zentriert (robust) */
#leistungen .wp-block-details,
#leistungen details {
  max-width: 900px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* RTL (Farsi): Hakenliste im Kontakt rechts ausrichten */
html[lang="fa-IR"] .kontakt-checklist li {
  padding-left: 0 !important;
  padding-right: 32px !important;
}

html[lang="fa-IR"] .kontakt-checklist li::before {
  left: auto !important;
  right: 0 !important;
}

/* ==============================
   RTL (Farsi): Accordion fix
   ============================== */

/* Farbstreifen von links nach rechts verschieben */
html[lang="fa-IR"] #leistungen details {
  border-left: none !important;
  border-right: 4px solid #F6B092 !important;
}

/* Pfeil von rechts nach links verschieben */
html[lang="fa-IR"] #leistungen details > summary::after {
  float: left !important;
}

/* Optional: etwas Abstand links für den Pfeil */
html[lang="fa-IR"] #leistungen details > summary {
  padding-left: 16px;
  padding-right: 16px;
}

html[lang="fa-IR"] .wpcf7 {
  direction: rtl;
  text-align: right;
}

html[lang="fa-IR"] .wpcf7 input,
html[lang="fa-IR"] .wpcf7 textarea {
  direction: rtl;
  text-align: right;
}