/* 1. FF DAX PRO (Primäre CI-Schrift) 
* @license
* MyFonts Webfont Build ID 764534
* The fonts listed in this notice are subject to the End User License
* Agreement(s) entered into by the website owner.
*/
@font-face {
    font-family: 'ff-dax-pro';
    src: url('../fonts/FFDaxPro-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; 
}
@font-face {
    font-family: 'ff-dax-pro';
    src: url('../fonts/FFDaxPro-Medium.woff2') format('woff2');
    font-weight: 500 600; 
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ff-dax-pro';
    src: url('../fonts/FFDaxPro-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 2. CALADEA (Hero-Überschrift) */
@font-face {
  font-family: 'Caladea';
  src: url('../fonts/Caladea-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 3. JOST (Fließtext Variable) */
@font-face {
  font-family: 'jost';
  src: url('../fonts/Jost-Regular.woff2') format('woff2-variations'),
       url('../fonts/Jost-Regular.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'jost';
  src: url('../fonts/Jost-Italic.woff2') format('woff2-variations'),
       url('../fonts/Jost-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
	
    /* Sets a 80px offset from the top edge for all scroll-related actions */
    scroll-padding-top: 180px;
}



/*"ff-dax","ff-dax-pro-wide"*/
body { 
  font-family: "jost", sans-serif;
	font-weight:400;
  line-height: 1.6;
  color: #2B2728;
  overflow-x: hidden;
  width: 100%;
}
 


}

* {
    -webkit-tap-highlight-color: transparent;
}


/*
altes burgundy #630922
neues burgundy #631010
*/
a {
  color: #4E7294;
	-webkit-tap-highlight-color: transparent;
  text-decoration: none;
  transition: color 0.3s;

	
}

a:hover {
  color: #630922;
	-webkit-tap-highlight-color: transparent;
  text-decoration: underline;
	
}
/*
Source - https://stackoverflow.com/a
Posted by Soham Grover, modified by community. See post 'Timeline' for change history
Retrieved 2025-11-27, License - CC BY-SA 4.0
*/

h1,h2, h3, h4 /* Try writing this only*/ {
font-family: "ff-dax", "ff-dax-pro" ;
	letter-spacing: 0.08rem;
	
}
h1 .styled-word {
  font-family: "ff-dax-pro";
	font-size:1.4rem;
border-left:#630922 solid 5px ;
	color: #fff;  
	 padding:0.5rem;
  font-weight: 600;
	   /*  background-color: rgba(255, 255, 255, 0.1); 

    
    backdrop-filter: blur(10px) brightness(90%); 
    -webkit-backdrop-filter: blur(0.1px) brightness(90%);*/
  
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0.8rem;
	
}

/* Header Styles - Now Sticky */
.header-wrapper {
  position: sticky; /* Changed from fixed to sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: #fff;
  transition: all 0.5s ease;
	
}




@media (min-width: 768px) {
.header-wrapper.scrolled .top-bar {
  padding: 0.2rem 0;
}
	}



.top-bar {
  background: #fff;
  padding: 0.5rem 0;
  transition: padding 0.3s ease;
}


/* 1. Globales Styling (Mobile-First / Unter 1210px) */
.burgundy-line {
  /* Erzeugt die volle Breite über den Viewport hinaus */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  
  /* Basis-Styles aus deinem Code */
  position: relative;
  background: #630922;
  height: 6px;
}

/* 2. Desktop-Anpassung (Ab 1210px) */
@media (min-width: 1210px) {
  /* Die Linie wird wieder in den normalen Fluss gezwungen und begrenzt */
  .burgundy-line {
    width: 100%;
    max-width: 1210px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Der Inhalt der Top-Bar wird ebenfalls auf das neue Maß erweitert */
  .top-bar .container {
    max-width: 1210px;
  }
}

.logo-section {
  background: linear-gradient(to bottom, 
              #ffffff 0%,           /* Start: Very Light Grey */
              rgb(253,253,252) 75%,          /* Middle: White */
              #ffffff 100%          /* End: Very Light Grey */
            );
  padding: 0.3rem 0 2rem;
	height: 5rem;
  transition: padding 0.5s ease, height 0.5s ease;
	
}

.logo-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: block;   /* make anchor behave like a block for control */
  text-align: right;
  transition: transform 0.5s ease;
	padding-top: 1rem;
	padding-bottom: 2rem;
	padding-left: 0.2rem;
}

/* Grundsätzliches Styling für das SVG-Logo */
.ffpv-svg-logo {
    height: 70px; /* Entspricht deiner bisherigen .logo img Höhe */
    width: auto;
    display: block;
	overflow: visible;
    transition: all 0.5s ease;
}

/* Unabhängige Steuerung der Farben */
.logo-ffpv {
    transition: all 0.5s ease;
	transform: scale(0.95) translate(0, 0);
    transform-origin: left center;
    
}

.logo-anwaelte {
    fill: #000; /* Deine Burgundy Farbe */
	stroke: #000;
    stroke-width: 1.75px;    /* Erhöhe diesen Wert (z.B. 1.5px), um es noch fetter zu machen */
    stroke-linejoin: round;
	/* x = 0 schiebt es nach ganz links unter das F */
    /* y = 60 (Beispielwert) schiebt es nach unten */
    /* scale(0.6) macht es kleiner, damit es als Untertitel passt */
   
    transform: translate(-30px);
    transform-origin: left top;
    transform-box: fill-box;
    transition: all 0.3s ease;
	
}


/* Scroll-Animation: Verkleinerung im sticky Header */
.header-wrapper.scrolled .ffpv-svg-logo {
    height: 56px;
}

/* Mobile Anpassungen (768px Media Query) */
@media (max-width: 768px) {
	
	.top-bar {
  padding: 0.2rem 0;
}
	}

@media (max-width: 768px) {
	 .logo-section {
        height: 4.5rem;
	}
	
    .ffpv-svg-logo {
        height: 42px;
		padding-top: -8px;
    }
	.logo-ffpv {
	transform: translate(0, -20px);
    transform-origin: left center;
    
}
	.logo-anwaelte {
         transform: translate(-421px, 90px) scale(1.2);
    }
    .header-wrapper.scrolled-light .ffpv-svg-logo {
        height: 38px;
		}
		
	 .header-wrapper.scrolled-deep .logo-anwaelte {
        opacity: 0;
		   
    }
	 .header-wrapper.scrolled-deep .logo-section {
        height: 4rem;
	}
	 .header-wrapper.scrolled-deep {
         box-shadow: 0px 4px 8px 0px rgba(248,248,245,0.8);
	}
	
	
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
   padding: 0 0.8rem 0.8rem 0.8rem;
}

.hamburger {
  display: block;
  width: 25px;
  height: 2px;
	top: -10px;
  background: #4E7294;
  position: relative;
	-webkit-tap-highlight-color: transparent;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background: #4E7294;
  left: 0;
	transition: background-color 0.3s ease;
}

.hamburger::before {
  top: -8px;
	transition: background-color 0.3s ease;
}

.hamburger::after {
  top: 8px;
	transition: background-color 0.3s ease;
}

/* Erläuterung: Wenn der Header-Wrapper ein Element mit der Klasse .active besitzt, 
   wird das darin liegende Hamburger-Icon rot. */
.header-wrapper:has(#mobileMenu.active) .hamburger,
.header-wrapper:has(#mobileMenu.active) .hamburger::before,
.header-wrapper:has(#mobileMenu.active) .hamburger::after {
  background-color: #630922 !important;
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  padding: 1rem 0;
	position: absolute; 
  left: 0;
  right: 0;
  z-index: 1001;
	box-shadow: 0 6px 8px rgba(245,245,245,0.8);
}

.mobile-menu.active {
  display: block;
}

.mobile-menu nav {
  font-family: "ff-dax-pro";
	display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu nav a {
  padding: 0.5rem 1rem;
  font-weight: 400;
  color: #4E7294;
}
.mobile-menu nav a:hover {
    text-decoration: none;
}

.mobile-menu nav a.active {
  color: #630922;
}

.mobile-menu .language-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid #e5e5e5;
  margin-top: 0.5rem;
}

/* Desktop Navigation - Positioned below Hero, becomes sticky below Logo Bar */
.desktop-nav {
  background: linear-gradient(to bottom, 
              #ffffff 0%,           /* Start: Very Light Grey */
              rgb(254,254,253) 40%,          /* Middle: White */
              #ffffff 100%          /* End: Very Light Grey */
            );
  /* Removed border-bottom: 1px solid #e5e5e5; to help remove the gap */
  display: none;
  position: sticky;
  top: 2rem; /* JS will overwrite this */
  z-index: 9001;
}


/* 1. Shadow Fix: Apply shadow when scrolled/sticky */
.desktop-nav.scrolled {
  box-shadow: 0px 4px 8px 0px rgba(248,248,245,0.8);
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
	
}

.nav-links {
	font-family: "ff-dax-pro";
  display: flex;
font-weight: 400;
  gap: 0.8rem;
	letter-spacing: 0.06rem;
	align-items: center; /* vertically centers children */
	

}
.nav-span {
  font-size: 0.43rem;
  color: #888;
	font-weight: 600;
	gap:0rem;
	vertical-align: middle; /* optional, but flex alignment is key */
}
.team-span {
  font-size: 0.73rem;
  color: #000;
	font-weight: 600;
	gap:1rem;
	vertical-align: middle; /* optional, but flex alignment is key */
}
.nav-links a {
  font-size: 1rem;
  color: #4E7294;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
	 
  color: #630922;

}

.language-selector {
	font-family: "ff-dax","ff-dax-pro";
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
	
}

.language-selector a {
  color: #4E7294;
  text-decoration: none;
}
.language-selector a:hover,
.language-selector a.active {
  font-weight: 400;
  color: #630922;
}

.language-selector span {
  color: #ccc;
}

/* Hero Section */
.hero-section {
  width: 100%;
  background: radial-gradient(circle at center, rgba(90,60,0,0.2), transparent);
  display: flex;
	margin-top: 1.5rem;
	margin-bottom: 1.8rem;
  justify-content: center;
}

/* Responsive Design */
@media (min-width: 768px) {
  .desktop-nav {
    display: block;
  }
}
@media (max-width: 768px) {
	.hero-section {
	margin-top: 0.8rem;
	margin-bottom: 0rem;
}}


/* 1. Standard: Mobile (0px bis 550px) */
.hero-container {
  position: relative;
  width: 100%;
  max-width: 1700px;
  height: 300px; /* Basis-Höhe für kleinste Geräte */
  overflow: hidden;
}

/* 2. Große Smartphones / kleine Tablets (ab 551px) */
@media (min-width: 551px) {
  .hero-container {
    height: 350px;
  }
}

/* 3. Tablets / kleine Laptops (ab 769px) */
@media (min-width: 769px) {
  .hero-container {
    height: 400px;
  }
}

/* 4. Desktop (ab 1200px) */
@media (min-width: 1048px) {
  .hero-container {
    height: 500px;
  }
}


.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
}


/* Bestehenden Teil suchen und so anpassen: */
.hero-slide,
.hero-static{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden; /* Verhindert, dass unsichtbare Bilder anklickbar sind */
  transition: opacity 1s ease-in-out, visibility 1s; /* Flüssiger Übergang */
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.hero-slide img,
.hero-static img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-static {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0rem;
  right: 0.5rem;
  bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
}


/* ========================================================= */
/* PURE CSS ALIGNMENT FIX (Using Viewport Reference) */
/* This aligns content with the 1200px centered grid */
/* ========================================================= */
/* ========================================================= */
/* PURE CSS WORKAROUND (Based on Max-Width Alignment) */
/* ========================================================= */

.hero-content {
  position: absolute;
  top: 50%;
  transform: translateY(-30%);
  z-index: 10;
  
  /* Temporarily set max-width to the alignment container width */
  max-width: 1200px; 
  
  /* 1. Alignment for Wide Screens (> 1200px) */
  /* Target the center of the image container (50% of 1700px width) */
  left: 50%; 
  
  /* Move the content left by half the width of the main content grid (600px) 
     to position the content block at the left edge of the 1200px grid.
     Then, add the required padding offset (0.8rem). */
  margin-left: calc(-600px + 4rem);
}


/* 2. Alignment for Small Screens (<= 1200px) */
@media (max-width: 1200px) {
  .hero-content {
    /* Reset wide screen alignment */
  
    margin-left: 0;
    
    /* Apply the standard small-screen offset: 0.8rem - 0.5rem = 0.3rem */
    left: 3rem; 
    
    /* Reset max-width if necessary, though 1200px is okay */
    
  }
}

@media (max-width: 767px) {
  .hero-content {
	  margin-left: 0;
    left: 0.5rem; 
  
  }
}
/* ========================================================= */

.hero-content h1 {
  font-size: 2.5rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.5rem;
  line-height: 1.2;
	font-family: "Caladea";
	padding: 30px;
	text-shadow: 0 0 17px rgba(100, 100, 100, 0.7);
}


.btn-primary {
	font-size: 1rem;
	font-family: "ff-dax", "ff-dax-pro";
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #4E7294;
  color: #fff;
  font-weight: 400;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  text-decoration: none;
  margin-top: 1rem;
	visibility: hidden;
}

.btn-primary:hover {
	color:#fff;
  background: #631010;
  text-decoration: none;
}


/* 2. Das "weiße Blatt Papier" 
.main-canvas {
display: block;
    width: 100%;
	height:100%;
    max-width: 1230px;
    margin: 0 auto;
	box-sizing: border-box;
    background-color: #FFFFFF !important; 
    position: relative;
overflow: visible;
   box-shadow: 
  -8px 0px 10px rgba(149, 157, 165, 0.02),
  8px 0px 10px rgba(149, 157, 165, 0.02);
}

*/

/* Sections */
.section {
  padding: 4rem 0;
}

.section-alt {
  
	 padding: 4rem 0;
}
.section-alt#expertise {
 background-image: linear-gradient(120deg, #f5f5f5 0%, #fcfcfc 30%, #ffffff 50%, #fcfcfc 70%, #f5f5f5 100%);
	 
}
.section-alt#news {
 background-image: linear-gradient(120deg, #f7f7f5 0%, #ffffff 50%, #f7f7f5 100%);
}


@media (max-width: 768px) {
  /* Reduziert den vertikalen Abstand der Standard-Sektionen von 4rem auf 2rem */
  .section, 
  .section-alt {
    padding: 2rem 0;
  }

  /* Reduziert den Abstand um die Hero-Sektion */
  .hero-section {
  }



  /* Optional: Verringert den Abstand unter dem Einleitungstext */
  .intro-text {
    margin-bottom: 1.5rem;
  }

  /* Verringert den Abstand zwischen den News-Tabs und dem Inhalt */
  #news .tab-btn {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
}

.content-wrapper {
  max-width: 900px;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 400;
  color: #630922;
  margin-bottom: 2rem;

}
.section-title-plain {
  font-size: 1.5rem;
  font-weight: 400;
  color: #630922;
  margin-bottom: 2rem;
	 
}

.subsection-title {
  font-size: 1.2rem;
  font-weight: 300;
  color: #000;
  margin-bottom: 1rem;
}

.text-content {
  color: #2B2728;
  line-height: 1.6;
	margin-left: 0rem;
	font-size: 1.05rem;
	font-weight: 420;
}

.text-content p {
  margin-bottom: 1.5rem;
}

/* Team Carousel */
#team.section{
  background: radial-gradient(circle at center, rgba(90,50,15,0.02), transparent) no-repeat;
	}



.team-carousel-section {
  position: relative;
  height: 400px;
  
background-color:#fff;
  overflow: hidden;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

/* Karussell Navigation Pfeile */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 800;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px); 
    
    color: #4E7294;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    /* LÖSUNGEN FÜR DIE GEISTER-BORDER: */
    border: none;               /* NEW: Entfernt Browser-Standards */
    background-clip: padding-box; /* NEW: Verhindert Ausfransen der Kante */
    outline: none;              /* NEW: Entfernt Fokus-Ringe */
    
    /* Optionaler Trick gegen Aliasing: */
    box-shadow: 0 0 1px rgba(255, 255, 255, 0); 
}
    

.carousel-nav:hover {
	
    color: #630922;
	
}

/* Positioniert die Pfeile relativ zur Bildschirmmitte basierend auf deiner Inhaltsbreite */
.carousel-nav.prev {
    left: calc(50% - 615px - 100px); /* Mitte - halbe Gridbreite - Puffer */
}

.carousel-nav.next {
    right: calc(50% - 615px - 80px);
}

/* Falls das Fenster schmaler als das Grid ist, rücken sie an den Rand */
@media (max-width: 1350px) {
    .carousel-nav.prev { left: 10px; }
    .carousel-nav.next { right: 10px; }
}

/* Auf Mobile kleiner und leicht transparent */
@media (max-width: 768px) {
  .carousel-nav {
    width: 35px;
    height: 35px;
 
  }
}

.team-carousel {
  position: relative;
	margin-left: -2rem;
	
  height: 100%;
	 transform: scale(0.9); 
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  perspective: none;
  transform-style: flat;
}

.team-member-card {
  position: absolute;
  width: 250px;
  height: 370px;
	transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              z-index 0.4s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transform-style:flat;
  will-change: transform, opacity,;
  overflow: hidden;
	border: inset;
	border-color: #fff;
	border-style: solid;
	border-width: 0.7rem;
}

.team-member-card.hidden-mobile {
  opacity: 0;
  
  transform: translateX(-100%) scale(0.5);
  transition: all 0.6s;/* Sofortiger Teleport */
  pointer-events: none;
}

.team-member-card img {
  width: 100%;
  height: 100%;
	
	
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.team-member-card .card-overlay {
  position: inherit;
  bottom:0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.4), transparent);
  padding: 1rem 1rem  ;
  transform: translateY(100%);
  transition: transform 0.5s ease;
}

.team-member-card:hover .card-overlay {
  transform: translateY(0);
	
}

.team-member-card .card-overlay h3 {
  color: #fff;
	
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
/* rote border links
.team-member-card .card-overlay h3::before {
    content: "";
    position: absolute;
    top: 50%;        
    transform: translateY(-50%); 
    width: 5px;            
    height: 70%;         
    background-color: #630922; 
}
*/
.team-member-card .card-overlay p {
  color: #fff;
  font-size: 0.875rem;
  margin: 0;
}

.team-member-card:hover img {
  transform: scale(1.04);
	transition: transform 0.6s ease;
}


/* 1. Äußerer Rahmen: Verhindert Scrollbars durch den Punkt-Trick */
.team-names {
    width: 100%;
    overflow: hidden; 
   padding: 1rem 0 1.5rem;
	
}


/* 3. Das P-Element als Flex-Box (Blocksatz-Ersatz) */
#teamNamesList {
  display: flex;
  flex-wrap: wrap;
  /* Space-between sorgt für den Blocksatz-Look */
  justify-content: space-between; 
  width: 100%;
  text-align: justify;
	padding-left: 0.3rem;
}

/* Dieser unsichtbare Balken am Ende verhindert, 
   dass die letzte Zeile auseinandergerissen wird */
#teamNamesList::after {
  content: "";
  flex: 999 1 auto; /* Dieser "Super-Spacer" nimmt alles an Restplatz ein */
}

/* 4. Die Buttons */
.team-names button {
    font-family: "ff-dax", "ff-dax-pro";
    background: none;
    border: none;
    color: #4E7294;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
	flex: 0 0 auto;
    letter-spacing: 0.05rem;
    white-space: nowrap; /* Kein Umbruch im Namen */
    padding: 0 0.2rem 0.2rem 0;
    transition: color 0.3s;
    -webkit-tap-highlight-color: transparent;
}

.team-names button.active,
.team-names button:hover {
    color: #630922;
}
/* NEU: Wenn eine Detailansicht offen ist, wird der automatische 
   Active-Status des Karussells unterdrückt */
.team-names.detail-view-active button.active {
    color: #4E7294; /* Zurück auf die Standardfarbe */
}

/* NEU: Nur der wirklich ausgewählte Name in der Detailansicht wird rot */
.team-names button.selected-member {
    color: #630922 !important;
}
/* 5. Der Separator (Punkt) - Absolut symmetrisch */
.team-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem 0.2rem 0; 
    color: #2B2728;
    font-size: 0.73rem;
    font-weight: 600;
    user-select: none;
   
}

@media (min-width: 1000px) {
  .team-names button {
     padding: 0 0.9rem 0.4rem 0.3rem;
  }
	.team-separator {
 padding: 0 0.9rem 0.4rem 0.3rem;
}}

@media (max-width: 768px) {
    #teamNamesList {
        justify-content: flex-start; /* Macht es linksbündig */
    } }
/* Team Member Details */
.team-member-details {
  max-width: 1200px;
  margin: 0rem 0rem 3rem;
  background: #fff;
  border: 0px solid #e5e5e5;
  border-radius: 4px;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  display: none;
	animation: fadeOut 2s ease;
}

.team-member-details.active {
  display: block;
  animation: fadeIn 1.1s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.team-member-image-large {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.team-member-image-large img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  display:flex;
}

.team-member-details-content {
	font-size:1.03rem;
  padding: 1rem 1rem 6rem;
	background-color:#fff;
	 line-height: 1.4;
	color: #2B2728;
	

}

.team-member-details-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4rem;
}

.team-member-details-header h2 {
  font-size: 1.8rem;
  font-weight: 600;
	letter-spacing: 0.05;
  color: #000;
	border-left: #630922 solid 4px;
  margin-bottom: 0.5rem;
	padding-left: 10px;
	margin-left: -14px;
}

.team-member-details-header p {
  font-size: 1rem;
	
	color:#630922;
  
}

.close-details-btn {
  background: none;
  border: none;
	font-family: "jost", sans-serif;
    font-size: 2rem; /* Passend zur Team-Sektion */
	font-weight: 340;
color: #4E7294;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.3s;
	margin-top: -0.8rem;   
}

.close-details-btn:hover {
  color:#630922;
}

.team-member-details-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

.team-member-contact h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: #111;
	visibility: hidden;
	margin-top: -6rem;
  margin-bottom: 1rem;
}

.team-member-contact p {
  color: #333;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
/* VCard Button Style */
.btn-vcard {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
	margin-bottom:1.5rem;
    padding: 0.3rem 0.7rem;
    background-color: transparent;
    border: 1px solid #4E7294;
	border-radius: 3px;
    color: #4E7294;
    font-family: "ff-dax-pro", sans-serif;
    font-size: 0.9rem;
    font-weight: 450;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-vcard:hover {
    background-color: #630922;
    border-color: #630922;
    color: #ffffff;
    text-decoration: none;
}

/* Optional: Icon vor den Text setzen (falls Sie ein Icon nutzen möchten) */
.btn-vcard::before {
    content: "↓"; /* Einfacher Pfeil oder ein Icon-Font-Symbol */
    margin-right: 8px;
    font-weight: bold;
}


.team-member-bio h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}

.team-member-bio p {
  color: #2B2728;
  line-height: 1.5;
  margin-bottom: 1rem;

}

.team-member-bio ul {
  list-style: disc;
  padding-left: 1rem;
  color: #2B2728;
  line-height: 1.5;
}

.team-member-bio ul li {
  margin-bottom: 0.5rem;
}
.team-member-bio ul li::marker {
  font-size: 0.8rem; /* Hier die gewünschte Größe einstellen */
  color: #2B2728;    /* Die Farbe muss hier oft explizit gesetzt werden */
}
/* Container für die gesamte Sektion */
#team-member-publications {
    margin-top: 2rem;
	
}

/* NEU: Unterüberschriften (Kategorien) */
#team-member-publications .publication-category-title {
    font-family: "jost", sans-serif;
    color: #2B2728;      /* Schwarz */
    font-size: 1.03rem;   /* Etwas größer */
    margin: 2.5rem 0 1.8rem -0.49rem; /* Mehr Abstand zur Liste */
    
    letter-spacing: 0.05rem;
    font-weight: 500;
	display: flex;
    align-items: center;
    position: relative;
}

#team-member-publications .publication-category-title::before {
    font-family: "ff-dax-pro", sans-serif;
	content: "•"; 
    color: #2B2728;
    font-size: 1.2rem;
    position: absolute;
    left: -12px; 
	top:-2px;
}

/* Abstandskorrektur für die erste Kategorie im Akkordeon */
#team-member-publications .publication-category-wrapper:first-child .publication-category-title {
    margin-top: 0.5rem;
}

/* DEIN ORIGINAL CSS AB HIER: */

/* Styling für die einzelnen Einträge im Akkordeon (Inspiration Screenshot) */
#team-member-publications .publication-entry {
    margin-bottom: 1.5rem;
	margin-left:0.5rem;
}

#team-member-publications .entry-title {
    font-family: "jost", sans-serif;
    color: #2B2728;
    font-size: 1.03rem;
    margin: 0.5rem 0 0.2rem 0;
    letter-spacing: 0rem;
    font-weight: 430;
    line-height: 1.2;
    border-left: 3px solid #630922; /* Die rote Linie aus deinem Screenshot */
    padding-left: 5px;
    margin-left: -12px; /* Zieht die Linie etwas nach links */
}

#team-member-publications .entry-details {
    font-size: 0.95rem;
    line-height: 1.2;
    color: #777; /* Etwas dezenter für die Quellenangaben */
    margin-left: -4px;
}

/* Akkordeon Design */
.publications-accordion-wrapper {
    margin-top: 1.5rem;
}

.accordion-trigger {
    width: 100%;
    background-color: #fff;
    border:none;
    display: flex;
    justify-content: flex-start; /* Schiebt Label nach links und Icon nach rechts */
    align-items: center; 
    
    cursor: pointer;
    text-align: left; /* Richtet den Textinhalt links aus */
}

.trigger-label {
    font-family: "ff-dax-pro", sans-serif;
	font-size: 1rem;
    font-weight: 700;
	letter-spacing: 0.04rem;
	margin-right:1.5rem;
	margin-top: 2rem;
	padding-left: 0.1rem;
	color: #4E7294;
}

.accordion-icon {
    color: #4E7294;
    font-size: 1.5rem;
	padding-left: 1.5rem;
	margin-top: 2rem;

}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.accordion-inner-container {
    padding: 1.5rem 0 1rem 1.5rem; /* Padding passend zur negativen Margin der Headline */
}




.team-member-section {
	
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 0px solid #630922;
}

@media (min-width: 1000px) {
  .team-member-details-content {
	  margin-right:8rem;
    
  }
	.close-details-btn {
 margin-right:-8rem;
 
		
}}


@media (max-width: 768px) {
  .team-member-image-large {
    height: 300px;
	  margin-bottom: -2rem;
  }
	.team-names {
 
 margin-bottom: 0.5rem;
  padding: 0.2rem 0;
		
}
}
@media (max-width: 768px) {
  .team-member-image-large img {
    width: 100%;
  height: 85%;
  object-fit:cover;
  display:block;
	 
  }
}

/* News Section */
 /* ---------- NEWS SECTION ---------- */

    #news {
      padding: 4rem 0;
      background: #ffffff;
    }

    /* Hauptüberschrift */
    #news .section-title {
      font-family: "ff-dax", "ff-dax-pro", sans-serif;
      color: #630922;
      font-size: 1.35rem;
      letter-spacing: 0.08rem;
      margin-bottom: 2rem;
      font-weight: 400;
      text-align: left;
    }

    /* Tabs */
    #news .tabs {
      display: flex;
      justify-content: flex-start;
      gap: 1.2rem;
      margin-bottom: 2rem;
      flex-wrap: wrap;
    }

    #news .tab-btn {
      font-family: "ff-dax", "ff-dax-pro", sans-serif;
		font-weight: 400;
      background: none;
      border: none;
      color: #4E7294;
      font-size: 1.1rem;
      letter-spacing: 0.05rem;
      cursor: pointer;
      padding-bottom: 0.2rem;
		margin-top: 1rem;
		margin-bottom:1.5rem;
      border-bottom: 2px solid transparent;
      transition: all 0.2s ease;
      text-align: left;
    }

    #news .tab-btn:hover {
      color: #630922;
    }

    #news .tab-btn.active {
      color: #630922;
      border-bottom: 2px solid #630922;
    }

    /* Tab-Content */
    #news .tab-content {
      display: none;
    }

    #news .tab-content.active {
      display: block;
    }

    /* Content-Spalte – ca. 45% Breite in voller Ansicht */
    #news .news-section {
      max-width: 900px;
      margin: 0;
      text-align: left;
    }

    #news .subsection-title {
      font-family: "ff-dax", "ff-dax-pro", sans-serif;
      color: #630922;
      font-size: 1.4rem;
      letter-spacing: 0.04rem;
      margin-bottom: 1rem;
      font-weight: 400;
    }

    #news .text-content {
      font-size: 1rem;
      line-height: 1.65;
      margin-bottom: 1.8rem;
    }

    /* Listen */
    #news .press-items,
    #news .event-items {
      display: grid;
      gap: 2rem;
    }

    #news .press-item,
    #news .event-item {
      
      padding-left: 1rem;
      text-align: left;
    }

    /* Event-Header: Datum links, Location rechts */
    #news .event-header {
      display: block;
  margin-bottom: 0;
    }

    /* JAHRESZAHL / DATUM – DAX, wie Fließtext, weight 400, schwarz */
    #news .press-date,
    #news .event-date {
      font-family: "jost", sans-serif;
      color: #333;
      font-weight: 400;
      font-size: 0.85rem;
      display: inline-block;
      margin-bottom: 0rem;
    }
#news .event-location {
  font-family: "jost", sans-serif;
  font-size: 0.95rem;
  color: #4E7294; /* Blau wie im Pressespiegel */
  margin-top: -0.2rem; /* Zieht den Ort näher an die h4-Überschrift */
  margin-bottom: 0.25rem;
  display: block;
}

    /* Blaue Unterüberschrift (Medium / Ort) */
    #news .press-publication{
      font-family: "jost";
		font-size: 0.95rem;
      color: #4E7294;
      margin-bottom: 0.25rem;
		margin-top: -0.2rem;
    }

    /* Titel */
    #news h4 {
      font-family: "ff-dax", "ff-dax-pro", sans-serif;
      color: #000;
      font-size: 1.1rem;
      margin: 0.2rem 0;
      letter-spacing: 0.04rem;
      font-weight: 600;
		line-height:1.5;
    }

    #news p {
      font-size: 0.98rem;
      line-height: 1.4;
    }

    /* Info-Box */
    #news .info-box {
      background: none;
      padding: 1.1rem 0rem 1.2rem;
      border-radius: 3px;
      margin-top: 3rem;
		
    }

    #news .info-box h4 {
     font-family: "ff-dax", "ff-dax-pro", sans-serif;
		font-weight: 400;
      background: none;
      border: none;
      color: #630922;
      font-size: 1.1rem;
      letter-spacing: 0.05rem;
      text-align: left;
		margin-bottom: 0.7rem;
    }

    #news .info-box a {
      color: #4E7294;
      text-decoration: none;
      font-weight: 430;
    }

    #news .info-box a:hover {
      color: #630922;
      text-decoration: underline;
    }

    /* NEU: "Mehr"-Links in Signature Blau / Hover Rot in den Posts */
    #news .press-item a,
    #news .event-item a {
      color: #4E7294;
    }

    #news .press-item a:hover,
    #news .event-item a:hover {
      color: #630922;
    }

/* 1. Den Container vorbereiten */
#news .press-item, 
#news .event-item {
  border-left: none; /* Die alte, starre Border entfernen */
  position: relative;
  padding-left: 0.8rem; /* Etwas mehr Platz für die neue Linie */
  text-align: left;
}

/* 2. Die neue, flexible Linie definieren */
#news .press-item::before,
#news .event-item::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.7rem; /* Startet leicht versetzt von oben (passend zur Jahreszahl) */
  
  /* HIER DIE LÄNGE BESTIMMEN */
  height: 1.7rem; /* Hier kannst du den Wert in px oder % genau festlegen */
  
  width: 3px; /* Die Dicke der Linie */
  background-color: #630922; /* Dein Burgundy-Rot */
}

    /* LINKEDIN ABSCHALTEN (falls noch vorhanden) */
    .tab-btn[data-tab="linkedin"] {
      display: none !important;
    }

    #linkedin {
      display: none !important;
    }

    /* "Mehr anzeigen" Button */
    #news .show-more-btn {
      margin-top: 2rem;
		margin-left:1rem;
      background: none;
      border: 1px solid #4E7294;
      color: #4E7294;
      font-family: "ff-dax", "ff-dax-pro", sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.04rem;
      padding: 0.3rem 0.7rem;
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.2s ease;
    }

    #news .show-more-btn:hover {
      border-color: #630922;
      color: #630922;
    }

    /* RESPONSIVE: Spalte auf voller Breite bei schmalen Screens */
    @media (max-width: 900px) {
      #news .news-section {
        max-width: 100%;
      }
    }
.intro-text {
  font-size: 1.06rem;
  color: #101010;
  margin-bottom: 3rem;
  max-width: 900px;
	font-weight: 420;
}

/* Rechtsgebiete */
/* =====================================================================
   RECHTSGEBIETE (EXPERTISE) SECTION STYLES
   - Interactive Tiled Grid Layout
   - Flat, Borderless Tiles with Muted Colors
   - Non-overlapping "Push Down" Expansion
   - Responsive (4/2/1 Column Layout)
   ===================================================================== */


/* ==========================================================================
    BASICS (UNVERÄNDERT & UPDATED)
   ========================================================================== */
#law-expertise-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 4rem 0;
    box-sizing: border-box;
}

#expertise-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 8px;
    position: relative;
    transition: all 0.8s ease;
}

.expertise-tile {
    background-color: #EFF3F6;
    padding: 5px; 
    box-shadow: none;
    cursor: pointer;
    position: relative;
    height: 50px; /* Deine ursprüngliche Höhe */
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
/* Aktiver Zustand (immer rot) */
.expertise-tile.active {
    background-color: #fff;
}
.expertise-tile.active .subject-title {
    color: #111111 !important;
}

/* --- Basis-Styling für den Titel in der Kachel --- */
.expertise-tile .subject-title {
    margin: 0;
    padding: 0 0 0 1rem;
	font-family:"ff-dax-pro";
	letter-spacing: 0.05rem;
    color: #111111;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    display: block;
	border-left: 4px solid transparent;
    transition: all 0.3s ease;
    pointer-events: none; /* Verhindert, dass der Text Klicks abfängt */
}


/* --- Desktop: Die echte H3 im Accordion (SEO Optimiert) --- */
.expertise-accordion-detail h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 2rem;
	margin-top: 2rem;
    padding-left:0.8rem;
    position: relative;
    line-height: 1.2;
}

/* Der vertikale Balken aus dem Screenshot */
.expertise-accordion-detail h3::before {
    content: "";
    position: absolute;
    left: -3px;
    top: -0.5rem;
    bottom: -0.5rem;
	
    width: 4px;
    background-color: #630922;
}

/* --- Mobile: Titel-Anpassung in der Kachel --- */
@media (max-width: 550px) {
    .expertise-tile.active .subject-title {
        font-size: 1.25rem;
        padding-left: 1rem;
        /* Weißer Balken auf rotem Grund */
        border-left: 4px solid #630922; 
        white-space: normal;
    }
	#expertise-grid {
  
    gap: 0px;
   
}

    /* Auf Mobile verstecken wir die H3 im Accordion, um Dopplungen zu vermeiden */
    .expertise-accordion-detail h3 {
        display: none;
    }
}


/* ==========================================================================
    ACCORDION ANIMATION
   ========================================================================== */
.expertise-accordion-detail {
    grid-column: 1 / -1;
    background-color: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    
    /* Animation via Grid-Rows für flüssiges Öffnen */
    display: grid;
    grid-template-rows: 0fr; 
    opacity: 0;
     
    transition: 
        grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.6s ease,
        padding 0.5s ease;
	 
}

/* Innerer Wrapper damit Inhalt nicht springt */
.expertise-accordion-detail > div {
    min-height: 0;
}

.expertise-accordion-detail.open {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: 25px 15px 100px 5px; 
}

/* ==========================================================================
    DEINE INHALTS-STYLES (UNVERÄNDERT)
   ========================================================================== */
.expertise-detail-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    padding-top: 10px;
	padding-left: 1rem;
}

.expertise-detail-grid h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2C2B2B;
    margin-bottom: 1rem;
    margin-top: 1rem;
	
}

.expertise-detail-main-bio p {
    font-size: 1.05em;
    line-height: 1.5;
  margin-bottom: 20px; /* Abstand nach unten */
  margin-top: 0;       /* Abstand nach oben entfernen für präzisere Kontrolle */
}


.expertise-detail-key-areas ul {
    list-style: disc;
    padding-left: 1.5rem;
    line-height: 1.2;
    color: #3D3839;
    font-size: 1rem;
	font-weight: 430;
	display: grid;
    gap: 0.7rem;
}
span.paragraphs {
font-size: 0.84em;
 color:#630922;
  display: inline-block;
    vertical-align: middle; /* oder top */
    position: relative;
    
}

.full-text {
    display: none;
}

/* Positionierung innerhalb der Expertise-Kachel */
.expertise-accordion-detail {
    position: relative;
}

/* Das blaue X */
.expertise-close-btn {
    position: absolute;
    top: 35px;
    right: 28px;
    background: none;
    border: none;
	font-family: "jost", sans-serif;
    font-size: 2rem; /* Passend zur Team-Sektion */
	font-weight: 340;
    color: #4E7294;    /* Dein Signature Blau */
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
    z-index: 7000;
    padding: 5px;
}

.expertise-close-btn:hover {
    color: #630922;    /* Dein Burgundy Rot beim Hover */
}



/* 1. HOVER NUR FÜR ECHTE MÄUSE */
/* (hover: hover) allein reicht nicht, wir brauchen (pointer: fine) */
@media (hover: hover) and (pointer: fine) {
    .expertise-tile:not(.empty):hover {
        background-color: #631010;
    }
    .expertise-tile:not(.empty):hover .subject-title {
        color: #ffffff !important;
    }
}

/* 2. MOBILE FIX FÜR TOUCH-GERÄTE */
/* Hier erzwingen wir, dass Hover-Zustände ignoriert werden */
@media (pointer: coarse) {
    .expertise-tile:hover {
        background-color: #EFF3F6 !important; /* Standard-Grau beibehalten */
    }
    
    /* Nur die aktive Kachel darf sich verändern */
    .expertise-tile.active {
        background-color: #ffffff !important;
    }
	 }

/* ==========================================================================
    RESPONSIVE
   ========================================================================== */
@media (min-width: 900px) {
    .expertise-detail-grid {
        display: grid;
        /* Die zweite Spalte (Text) wird begrenzt, dahinter bleibt Platz */
        grid-template-columns: 0.9fr 1.9fr 0.2fr; 
        gap: 3rem;
    }
}

@media (max-width: 900px) {
    #expertise-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .expertise-detail-grid { grid-template-columns: 1fr; 
	{
    
	padding-left: 0rem;
}
	}
}

/* ==========================================================================
    MOBILE OPTIMIERUNGEN (max-width: 550px)
   ========================================================================== */
@media (max-width: 550px) {
    /* 1. Abstände korrigieren */
    #expertise-grid { 
        grid-template-columns: 1fr; 
        gap: 0px; /* Grid gap entfernen */
    }

	.expertise-accordion-detail.open {
        /* Reihenfolge: Top Right Bottom Left */
        /* Wir ändern den letzten Wert (Links) von 30px auf 15px oder 10px */
        padding: 20px 10px 60px 5px !important; 
    }
    .expertise-tile { 
        height: 60px; 
        margin-top: 8px;
		position:relative;
    }


    /* Den Abstand bei der allerersten Kachel oben entfernen, falls gewünscht */
    .expertise-tile:first-child {
        margin-top: 0;
    }


    /* Die beiden Linien des Plus/X */
    .expertise-tile::before,
    .expertise-tile::after {
        content: "";
        position: absolute;
        right: 25px; /* Position vom rechten Rand */
        top: 50%;
        width: 12px;  /* Breite des Icons */
        height: 2px;  /* Dicke der Linien */
        background-color: #4E7294;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 2px;
    }

    /* Waagerechte Linie (Standard) */
    .expertise-tile::before {
        transform: translateY(-50%);
    }

    /* Senkrechte Linie (Standard) */
    .expertise-tile::after {
        transform: translateY(-50%) rotate(90deg);
    }

    /* --- ANIMATION WENN AKTIV --- */

    /* Waagerechte Linie dreht sich um 45 Grad */
    .expertise-tile.active::before {
        transform: translateY(-50%) rotate(45deg);
       
    }

    /* Senkrechte Linie dreht sich von 90 auf 135 Grad (ergibt das Kreuz) */
    .expertise-tile.active::after {
        transform: translateY(-50%) rotate(135deg);
        
    }


    /* 4. Das originale Schließen-X im Accordion-Inhalt auf Mobile verstecken */
    .expertise-close-btn {
        display: none !important;
    }

    /* Bestehende Titel-Anpassung beibehalten */
    .expertise-tile.active .subject-title {
        font-size: 1.2rem;
        padding-left: 0.8rem;
        border-left: 4px solid #630922; 
        white-space: normal;
    }

    /* Die H3 im Detail-Bereich ausblenden (hast du bereits) */
    .expertise-accordion-detail h3 {
        display: none;
    }
}

.expertise-tile.empty {
    visibility: hidden;
}



/* --- Contact Section --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
  margin-left: 0rem;
}

.contact-info h3,
.contact-directions h3 {
  letter-spacing: 0.2px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2B2728;
  margin-bottom: 0.7rem;
}

.contact-details {
  color: #2B2728;
  font-weight: 420;
  font-size: 1.05rem;
  line-height: 1.35;
}

/* Der Standard-Abstand für die Adresse oben */
.contact-details p {
  margin-bottom: 0.7rem;
}

/* Telefon & Fax Zeilen */
.contact-row {
  display: flex;
  align-items: baseline;
}

/* Da die E-Mail ein <p> nach den <divs> ist, erzwingen wir hier den Abstand nach oben */
/* Das ist der Ersatz für das "last-child", das wegen des Buttons nicht ging */
.contact-row + p {
  margin-top: 0.7rem;
}

/* Label-Breite für perfekte Ausrichtung */
.label {
  width: 2.3rem; 
  flex-shrink: 0;
}

/* Ziffern-Styling */
.number-style {
  white-space: nowrap; 
  letter-spacing: 0.2px;
  /* Erleichtert das Markieren/Erkennen per Touch */
  user-select: all;
}

/* Abstand für das Notfall-Button Element (phone-wrapper) */
#phone-wrapper {
  margin-top: 1rem;
}


.btn-notfall {
    /* Deine bestehenden Styles */
    font-size: 0.9rem;
    font-family: "jost";
    display: inline-block;
    padding: 0.3rem 0.7rem 0.3rem 0.4rem;
    background: none;
    color: #4E7294;
    font-weight: 410;
    
    cursor: pointer;
   
    text-decoration: none;
    margin-top: 1rem;
    transition: all 0.3s ease;
    /* Wichtig: Box-Sizing festlegen */
    box-sizing: border-box;
    line-height: 1.4; 
    vertical-align: middle;
	border: 1px solid #630922;
     border-radius: 3px;
}

.btn-notfall:hover {
    background: #631010;
	color:#fff;/* Etwas dunkler beim Drüberfahren */
}



/* Diese Klasse wird per JS hinzugefügt */
.btn-revealed {
    background: transparent !important;
    color: #630922 !important;
    font-weight: 430;
    cursor: default;
	 margin-left:-0.4rem;
    padding-left: 0.4rem; /* Optional: Nummer nach links rücken */
    font-size: 1.05rem;
	letter-spacing: 0.2px;
	 border: none;
	transition: all 0.3s ease-in;
}

.small-text {
  font-size: 0.875rem;
}
.footer-content {
    /* Top margin: 0, Right/Left: auto, Bottom margin: 4rem (adjust this value) */
   position: relative;
	margin: 0.8rem 0 1.2rem; 
	background-color: #fff;
	z-index: 12;
	white-space: nowrap;
}

.footer-links {
    /* NEU: Schriftgröße wird mobil kleiner (2.5% der Bildschirmbreite), 
       bleibt aber am Desktop bei deiner Standardgröße (ca. 0.9rem) */
    font-size: clamp(0.9rem, 3.5vw, 0.95rem);
    
    /* Sorgt dafür, dass die Zeile bei Überbreite am Handy 
       notfalls nach rechts rausrutscht statt das Layout zu sprengen */
    display: block;
}

.footer-links a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
	
	
}

.footer-links a:hover {
  color: #630922;
}

.footer-links span {
  color: #ccc;
}

.footer-button-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    /* Erbt die dynamische Größe von .footer-links */
    font-size: inherit; 
    color: #666;
    transition: color 0.3s;
    vertical-align: baseline;
}

.footer-button-link:hover {
    color: #630922;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

/* Responsive Design */
@media (min-width: 768px) {
  .desktop-nav { display: block; }
  .mobile-menu-toggle { display: none; }
  .hero-content h1 { font-size: 3rem; }
  .team-carousel-section { height: 420px; touch-action: pan-y; }

  .team-carousel { 
    transform: scale(0.9) translateX(100px); 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
  }
  
 .team-member-card { 
    width: 280px; 
    height: 380px; 
    position: absolute;
    left: 50%;
    margin-left: -140px;
    /* Langsame Automatik-Animation (0.9s) */
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                z-index 0.4s;
	 backface-visibility: hidden; /* Verhindert Zittern bei Skalierung */
    -webkit-font-smoothing: antialiased;
    transform-origin: center center; /* Wichtig für stabiles Skalieren */
    will-change: transform, opacity; /* Bereitet den Browser auf Animation vor */
  
  }

  /* --- SCHNELLERE HOVER-ANIMATION --- */
  /* Wenn die Karte gehovert wird, überschreiben wir die 0.9s mit 0.3s */
  .team-member-card:hover {
    transition: transform 0.7s cubic-bezier(0.2, 0, 0.2, 1), 
                opacity 0.7s ease,
                z-index 0s !important;
    transform: scale(1.04) !important; 
    z-index: 100 !important;
  }

  /* Auch die Rückkehr zur Normalgröße beim Verlassen des Hovers beschleunigen */
  .team-carousel:hover .team-member-card {
    transition: transform 0.5s ease;
  }

  /* --- BASIS POSITIONEN --- */
  .team-member-card.left1   { transform: translateX(-290px) scale(1.1); z-index: 50; opacity: 1; }
  .team-member-card.center  { transform: translateX(0) scale(1); z-index: 41; opacity: 1; }
  .team-member-card.right1  { transform: translateX(290px) scale(1); z-index: 40; opacity: 1; }
  .team-member-card.right2  { transform: translateX(580px) scale(1); z-index: 30; opacity: 1; }
  .team-member-card.left2   { transform: translateX(-580px) scale(1); z-index: 30; opacity: 1; }
  
.team-member-card.hidden-desktop { 
    opacity: 0;
    /* Wir erlauben die Transition, damit sie sanft ausfadet */
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.9s ease;
    z-index: 0;
    /* Wir parken sie an einer Stelle, die den Fluss nicht stört */
    transform: translateX(0) scale(0.6);
    pointer-events: none;
}
	
  /* Desktop-Automatik: Overlay für left1 */
  .team-member-card.left1 .card-overlay { transform: translateY(0); }

  /* Wenn Karussell gehovert: Automatische left1 schrumpft (ebenfalls schneller) */
  .team-carousel:hover .team-member-card.left1:not(:hover) {
    transform: translateX(-290px) scale(1) !important;
    z-index: 10;
    transition: transform 0.4s ease;
  }
  .team-carousel:hover .team-member-card.left1:not(:hover) .card-overlay {
    transform: translateY(100%) !important;
    transition: transform 0.5s ease;
  }

  /* Hover-Positionen fixieren */
  .team-member-card.left1:hover  { transform: translateX(-290px) scale(1.1) !important; }
  .team-member-card.center:hover { transform: translateX(0) scale(1.1) !important; }
  .team-member-card.right1:hover { transform: translateX(290px) scale(1.1) !important; }
  .team-member-card.right2:hover { transform: translateX(580px) scale(1.1) !important; }
  .team-member-card.left2:hover  { transform: translateX(-580px) scale(1.1) !important; }

  .team-member-card:hover .card-overlay { 
    transform: translateY(0) !important; 
    transition: transform 0.5s ease !important;
  }
}
/* Auf Desktop (ab 1025px) wird die Verschiebung wieder auf 0 gesetzt */
@media (min-width: 1025px) {
  .team-carousel { transform: scale(0.9) translateX(0px); }
}

@media (max-width: 767px) {
  .mobile-menu-toggle {
    display: block;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .hero-content h1 {
    font-size: 1.75rem;
	 
  }
	

h1 .styled-word {
    font-size: 1rem;

}
	.btn-primary {
	font-size: 0.8rem;
}


  .rechtsgebiet-subareas ul {
    grid-template-columns: 1fr;
  }

  .team-member-details-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .team-member-details {
    padding: 0rem;
  }

  .team-member-details-header h2 {
    font-size: 1.5rem;
	  letter-spacing: 0.05;
  }
	.team-member-card {
    width: 300px;
    height: 360px;
		border-width:0rem;
  }
	.team-member-card .card-overlay h3 {
  color: #fff;
	
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.team-member-card .card-overlay p {
  color: #fff;
  font-size: 0.875rem;
  margin: 0;
	}


  .team-member-card.left1 {
    transform: translateX(0) scale(1);
    z-index: 50;
    opacity: 1;
  }
  .team-member-card.center {
    transform: translateX(100%) scale(0.8);
    z-index: 40;
    opacity: 0.8;
  }
  .team-member-card.right1 {
    transform: translateX(200%) scale(0.8);
    z-index: 30;
    opacity: 0.4;
  }
  .team-member-card.left2 {
    transform: translateX(-100%) scale(0.8);
    z-index: 40;
    opacity: 0.8;
  }
  .team-member-card.right2 {
    transform: translateX(300%) scale(0.8);
    z-index: 20;
    opacity: 0;
  }
  .team-member-card.hidden {
    transform: translateX(-200%) scale(0.6);
    z-index: 10;
    opacity: 0;
  }

}

#ffpv-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9003;
  
  /* Volle Breite für den Schatten-Effekt */
  width: auto;
  background: #fff;
	max-width: 100vw;
	overflow-x: hidden;
  
  /* Schatten über die gesamte Breite */
  box-shadow: 0 -5px 34px rgba(165,165,165,0.3); 
 
  
  font-family: "jost", sans-serif;
  color: #000;
	

}


#ffpv-cookie-banner .topline {
  height: 6px;
  background: #630922;
  width: 100%;           /* Nutze 100% statt 100vw um Scrollbars zu vermeiden */
  max-width: 1200px;     /* Deckelung auf das Maß der Top-Bar */
  margin: 0 auto;        /* Zentrierung */
  display: block;        /* Sicherstellen, dass es ein Block-Element ist */
}

/* Der Inhalts-Container zentriert den Inhalt auf 1200px */
#ffpv-cookie-banner .inner {
  max-width: 1210px;
  margin: 0 auto;
  padding: 30px 24px 16px 17px;
  box-sizing: border-box;
	/* --- NEU: Begrenzung auf Mobilgeräten --- */
  max-height: 80vh; 
  overflow-y: auto;
}

#ffpv-cookie-banner .logo {
  display: block;
  width: 130px;
  height: auto;
  margin: 2px 0 30px;
}

#ffpv-cookie-banner .text {
  margin: 0 0 16px 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(0,0,0,0.75);
}

#ffpv-cookie-banner .actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

/* Vereinheitlichte Buttons (DSGVO-sicher) */
#ffpv-cookie-banner .btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: "jost", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.35rem 1.1rem; /* Kompakteres Padding */
  min-width: 110px;
  background: transparent;
  color: #4E7294;
  border: 1px solid #4E7294;
  transition: all 0.2s ease-in-out;
  border-radius: 3px;
}

/* Hover-Zustand: Rot mit weißer Schrift */
#ffpv-cookie-banner .btn:hover {
  background: #630922;
  color: #fff;
  border-color: #630922;
  text-decoration: none;
}

/* Falls die Klasse btn-primary noch im HTML ist, wird sie hier neutralisiert */
#ffpv-cookie-banner .btn-accept {
  background: transparent;
  color: #4E7294;
  border: 1px solid #4E7294;
	
}



/* Datenschutzerklärung – wie Footer (nur dafür) */
#ffpv-cookie-banner .small-text{
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
}
#ffpv-cookie-banner .footer-content{
  margin: 2rem 0 0.3rem;   /* gleich weit weg wie Logo nach oben, etwas mehr */
}
#ffpv-cookie-banner .footer-links a{
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
}
#ffpv-cookie-banner .footer-links a:hover{
  color: #631010;
}
#ffpv-cookie-banner .footer-links span{
  color: #ccc;
}

/* ===================== PREFERENZEN / EINSTELLUNGEN ===================== */

#ffpv-cookie-banner .preferences{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

#ffpv-cookie-banner .preferences-title{
  font-size: 0.95rem;
  font-weight: 550;
  margin-bottom: 6px;
}

#ffpv-cookie-banner .preferences-text{
  font-size: 0.85rem;
  color: rgba(0,0,0,0.7);
  margin-bottom: 10px;
}

#ffpv-cookie-banner .preferences-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

#ffpv-cookie-banner .pref-row{
  border: 1px solid rgba(0,0,0,0.06);
  padding: 6px 8px;
}

#ffpv-cookie-banner .pref-main{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

#ffpv-cookie-banner .pref-label{
  font-size: 0.9rem;
  font-weight: 500;
}

#ffpv-cookie-banner .pref-tag{
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.55);
}

#ffpv-cookie-banner .pref-desc{
  margin-top: 4px;
  font-size: 0.8rem;
  color: rgba(0,0,0,0.6);
}

/* Toggle-Switch für Analyse */
#ffpv-cookie-banner .toggle{
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
#ffpv-cookie-banner .toggle input{
  opacity: 0;
  width: 0;
  height: 0;
}
#ffpv-cookie-banner .toggle-slider{
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 22px;
}
#ffpv-cookie-banner .toggle-slider:before{
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

#ffpv-cookie-banner .toggle input:checked + .toggle-slider{
  background-color: #4E7294;
}
#ffpv-cookie-banner .toggle input:checked + .toggle-slider:before{
  transform: translateX(18px);
}

#ffpv-cookie-banner .preferences-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

#ffpv-cookie-banner .preferences-actions .btn{
  font-size: 0.9rem;
}

/* Responsiv */
@media (max-width: 550px){
  #ffpv-cookie-banner{
    bottom: 0px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  #ffpv-cookie-banner .inner{
    padding: 20px 16px 16px 20px;  
	  max-height: 75vh; /* Etwas weniger auf kleinen Bildschirmen, damit man sieht, dass es noch Website-Inhalt gibt */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Sorgt für flüssiges Scrollen auf iPhones */
  }

  #ffpv-cookie-banner .actions{
    gap: 16px;
  }

  #ffpv-cookie-banner .footer-content{
    margin-top: 2rem;      /* auch mobil gleich viel Platz nach oben */
  }
}