/* ==========================================
   1. SCHRIFTEN LOKAL EINBINDEN (Webfonts)
   ========================================== */

/* --- MONTSERRAT (Überschriften) --- */

/* 1. Aufrechter Text (Regular, Bold, etc. in einem) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  /* Wir sagen dem Browser, dass diese Schrift alle Stärken von 100 bis 900 abdeckt: */
  font-weight: 100 900; 
  font-display: swap;
  src: url('fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
}

/* 2. Kursiver Text (Italic) */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
}


/* --- OPEN SANS (Fließtext) --- */

/* Open Sans Regular (400) */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
}

/* Open Sans Bold (700) */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
}

/* ==========================================================================
   Apple-inspired Design System
   Clean, minimal, with elegant typography and subtle animations #020258
   ========================================================================== */

:root {
	/* Apple-inspired color palette */
	--color-primary: #36428F;
	--color-primary-hover: #0077ed;
	--color-secondary: #86868b;
	--color-text: #36428F;
	--color-head:  #36428F;
	--color-text-muted: #6e6e73;
	--color-background: #ffffff;
	--color-background-secondary: #fbfbfd;
	--color-background-tertiary: #f5f5f7;
	--color-border: #d2d2d7;
	--color-border-light: #e8e8ed;
	--color-success: #34c759;
	--color-warning: #ff9f0a;
	--color-error: #ff3b30;

	/* Typography */
	--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family: 'Inter', sans-serif;
	--font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Font sizes - fluid and responsive */
	--font-size-base: 1.4rem;        /* 17px - improved readability */
	--font-size-sm: 0.9375rem;          /* 15px */
	--font-size-xs: 0.875rem;           /* 14px */
	--font-size-lg: 1.1875rem;          /* 19px */
	--font-size-xl: 1.375rem;           /* 22px */
	--font-size-h1: clamp(2.25rem, 5vw, 3.5rem);   /* 36px-56px - responsive */
	--font-size-h2: clamp(1.55rem, 4vw, 2.5rem);  /* 30px-40px */
	--font-size-h3: clamp(1.5rem, 3vw, 2rem);      /* 24px-32px */
	--font-size-h4: clamp(1.25rem, 2.5vw, 1.5rem); /* 20px-24px */
	--font-size-h5: 1.125rem;           /* 18px */
	--font-size-h6: 1rem;               /* 16px */

	/* Line heights for better readability */
	--line-height-base: 1.6;
	--line-height-tight: 1.3;
	--line-height-loose: 1.8;

	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;
	--spacing-3xl: 4rem;


	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-normal: 0.25s ease;
	--transition-slow: 0.4s ease;
}



html {
	position: relative;
	min-height: 100%;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	color: var(--color-text);
	background-color: var(--color-background);
	padding-top: 56px;
	margin-bottom: 100px;
	line-height: var(--line-height-base);
	letter-spacing: -0.022em;
}

/* Skip link for accessibility */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--color-primary);
	color: #fff;
	padding: 8px 16px;
	z-index: 9999;
	transition: top var(--transition-normal);
	border-radius: 0 0 var(--radius-sm) 0;
}

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

section {
	padding: 80px 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* Links */
a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
	color: var(--color-primary-hover);
}

a:focus {}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-weight-semibold);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-family: "Montserrat", sans-serif;

	letter-spacing: -0.022em;
    letter-spacing: 0.02em;
	color: var(--color-head);
}

h1.title {
	font-size: var(--font-size-h1);
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-bold);
	margin-bottom: 1.5rem;
}

h2.title {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-semibold);
	margin-bottom: 1rem;
}

h2.title a {
	color: var(---color-head);
	text-decoration: none;
	transition: color var(--transition-fast);
}

h2.title a:hover {
	color: var(---color-head);
}




/* Tables */
table {
	empty-cells: show;
	width: 100%;
	font-size: var(--font-size-base);
	margin-bottom: 0px;
	border-collapse: collapse;
	overflow: hidden;
}

thead {
	background-color: var(--color-background-tertiary);
	color: var(--color-text);
	text-align: left;
	vertical-align: bottom;
	font-weight: var(--font-weight-medium);
}

tr {
	display: table-row;
	vertical-align: inherit;
    background-color: #e1f0fc;
}

tbody tr:nth-child(even) {
	background-color: var(--color-background-secondary);
}

tbody tr:hover {
	background-color: hsl(200,80%,50%);color:#fff;
}

th,
td {
	padding: 0.75em 1em;border:0;
}

/* Blockquote */
blockquote {
	padding: var(--spacing-md) var(--spacing-lg);
	margin: var(--spacing-lg) 0;
	border-left: 4px solid var(--color-primary);
	font-style: italic;
	background-color: var(--color-background-secondary);
	color: var(--color-text-muted);
}

.bi {
	margin-right: 0.5rem !important;
}

/* Buttons */
.btn {
	font-weight: var(--font-weight-medium);
	border-radius: var(--radius-xl);
	padding: 0.5rem 1.25rem;
	transition: all var(--transition-fast);
	border: none;
}

.btn-primary {
	background: var(--color-primary);
	color: #fff;
}

.btn-primary:hover {
	background: var(--color-primary-hover);
	transform: scale(1.02);
}

.btn-outline-primary {
	background: transparent;
	color: var(--color-primary);
	border: 1.5px solid var(--color-primary);
}

.btn-outline-primary:hover {
	background: var(--color-primary);
	color: #fff;
}

.btn:focus {
	box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.3);
}

/* Paginator */
.paginator {
	margin-top: var(--spacing-2xl);
	margin-bottom: var(--spacing-3xl);
}

.paginator .pagination {
	gap: var(--spacing-sm);
}

.paginator .page-item .page-link {
	border: none;
	background: var(--color-background-tertiary);
	color: var(--color-text);
	border-radius: var(--radius-xl);
	padding: 0.5rem 1rem;
	font-weight: var(--font-weight-medium);
	transition: all var(--transition-fast);
}

.paginator .page-item .page-link:hover {
	background: var(--color-primary);
	color: #fff;
}

.paginator .page-item.disabled .page-link {
	background: var(--color-background-secondary);
	color: var(--color-text-muted);
}

.paginator .page-link:focus {
	box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.3);
}

/* ==========================================================================
   Navbar - Apple style frosted glass effect
   ========================================================================== */

.navbar {
		background: #36428F !important;
}

.navbar-brand {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-h4);
	letter-spacing: -0.01em;
}


img.nav-svg-icon {
	width: 1rem;
	height: 1rem;
	padding-bottom: 2px;
	transition: opacity var(--transition-fast);
	filter: brightness(0) invert(1);
}

img.nav-svg-icon:hover {
	opacity: 0.7;
}

.nav-link {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.02em;
	transition: color var(--transition-fast);
	padding: 0.5rem 0.75rem !important;
    color:#fff!important;
}

.nav-item.active .nav-link {
	font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer.footer {
	position: absolute;
	position: relative;
    margin: 0 0 -40px 0!important;    
    padding:0!important;
	bottom: 0;
	width: 100%;
	min-height: 60px;
	padding: var(--spacing-lg) 0;
	font-size: 0.75rem;
	background-color: #fff !important;
	color: var(--color-text-muted);
}


footer.footer .text-white {
	color: var(--color-text-muted) !important;
}

footer.footer a {
	color: var(--color-primary) !important;
}

footer.footer a:hover {
	color: var(--color-primary-hover) !important;
}





/* ==========================================================================
   Home - Articles List
   ========================================================================== */

article.home-page {
	padding: var(--spacing-2xl) 0;
	border-bottom: 1px solid var(--color-border-light);
	position: relative;
	background: var(--color-background);
}




article.home-page:nth-child(even) {
	background: var(--color-background);
}

article.home-page:last-child {
	border-bottom: none;
}

article.home-page header {
	margin-bottom: var(--spacing-sm);
}

article.home-page h2.title {
	margin-bottom: var(--spacing-xs);
}

/* Fix: Article footer should not be positioned absolutely */
article.home-page footer.mt-3 {
	position: static;
	background: transparent !important;
	padding: 0;
	min-height: auto;
	width: auto;
	margin-top: var(--spacing-md) !important;
}

article.home-page footer.mt-3 small {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Page article styles
   ========================================================================== */

article.page {
	padding: var(--spacing-2xl) 0;
}

.page-header {
	margin-bottom: var(--spacing-xl);
}

.page-meta {
	font-size: var(--font-size-base);
	color: var(--color-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
}

.page-meta span {
	display: inline-flex;
	align-items: center;
}

.page-cover-image-wrapper {
	margin-bottom: var(--spacing-xl);
}

.page-cover-image {
	box-shadow: var(--shadow-lg);
}

.page-description {
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-loose);
	margin-bottom: var(--spacing-lg);
}

.page-content {
	font-size: var(--font-size-base);
	line-height: var(--line-height-loose);
}

.page-content img {
	margin: var(--spacing-lg) 0;
}

.page-content p {
	margin-bottom: var(--spacing-lg);
}

.page-content h2,
.page-content h3,
.page-content h4 {
	margin-top: var(--spacing-2xl);
	margin-bottom: var(--spacing-md);
}

.page-excerpt {
	color: var(--color-text);
	line-height: var(--line-height-base);
}



/* ==========================================================================
   Screen reader only - for accessibility
   ========================================================================== */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	padding: inherit;
	margin: inherit;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
	.navbar,
	footer.footer,
	.paginator,
	.btn,
	.search-form {
		display: none !important;
	}

	body {
		padding-top: 0;
		margin-bottom: 0;
		color: #000;
		background: #fff;
	}

	article.page,
	article.home-page {
		padding: 0;
	}

	a {
		color: #000;
		text-decoration: underline;
	}
}

/* ==========================================================================
   Reduce motion for users who prefer it
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Utility classes
   ========================================================================== */

.text-muted {
	color: var(--color-text-muted) !important;
}

.text-primary {
	color: var(--color-primary) !important;
}

/* ==========================================================================
   Breadcrumb Navigation (SEO)
   ========================================================================== */

.breadcrumb-nav {
	padding: var(--spacing-md) 0;
	background-color: #D1EBF6;
	border-bottom: 1px solid #36428F;
    margin:0;
}

.breadcrumb {
	font-size: var(--font-size-sm);
	margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
	content: "›";
	color: var(--color-text-muted);
}

.breadcrumb-item a {
	color: var(--color-primary);
	text-decoration: none;
}

.breadcrumb-item a:hover {
	text-decoration: underline;
}

.breadcrumb-item.active {
	color: #36428F;font-weight: 700;
}

/* ==========================================================================
   Article Footer Fix (not the main footer)
   ========================================================================== */

.article-footer,
article.home-page footer.article-footer {
	position: static !important;
	background: transparent !important;
	padding: 0 !important;
	min-height: auto !important;
	width: auto !important;
	font-size: inherit !important;
}







        

h1 {line-height:  1.13em;}

.hero-title {
    font-size: 54px;
	font-weight: 600;
	color: var(--color-head);
	letter-spacing: 0.01em;
     text-transform: uppercase; 
  
}
.hero-h2{
    font-size: 42px;
	letter-spacing: 0em;

}

.hero-subtitle {
	color: var(--color-head);
	font-size: 30px!important;
    letter-spacing: 0.04em;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    line-height: 1.1em;
}

#infobox h2 {display:none;}
 

.boxen {
    margin:0;padding:0;
  display: flex; /* Aktiviert das Flexbox-Layout */
  gap: 25px;     /* Abstand zwischen den Blöcken (z.B. 20px) */
}
#info.boxen {
    margin:25px;
  display: flex; /* Aktiviert das Flexbox-Layout */
  gap: 25px;     /* Abstand zwischen den Blöcken (z.B. 20px) */
}


.box {
  flex: 1;             /* Alle Blöcke nehmen gleich viel Platz ein */
  padding: 0;       /* Innenabstand */
  box-sizing: border-box;
}
#info .box {        
  padding: 25px 25px 35px 25px;       /* Innenabstand */
}
#box1   {background: #5c9dc4;background: #36428F }
#box2   {background: #577996; background: hsl(200,80%,50%)}
#box3   {background: #c04469; }
    
#box1,  #box2,  #box3, #box1 h4,  #box2 h4,  #box3 h4, #info a {color:#fff;}
#info a:hover {color:#D1EBF6;text-decoration: none}
  


 .meine-tabelle {
  width: 100%;
  border-collapse: collapse; /* Lässt doppelte Rahmen verschwinden */
     border:0; margin: 0;padding:0;
}

.meine-tabelle th, .meine-tabelle td {
  padding:0 3px 0 0px; /* Abstand zwischen Text und Zellenrand */
  background:#c04469!important;
     vertical-align: top;
border:0;
}




.accordion .panel {
  margin: 0 auto;
  height: 0;
  overflow:hidden;
  background-color: white;
  line-height: 1.4;
  padding: 0 40px;
  box-sizing: border-box;
  transition: all 0.5s;
}

.accordion input:checked~.panel {
  height: auto;
  padding: 30px 40px 30px 40px;
  transition: all 0.5s;
}

.accordion label {
  cursor: pointer;
  background-color: hsl(200,80%,80%);          /* Hellblau */
  display: block;
  padding: 15px;
  width: 100%;
  font-weight: bold;
  box-sizing: border-box;
  z-index: 100;
}

.accordion input{
  display: none;
}

.accordion input:checked+label {
  background-color: hsl(200,80%,50%);  
      color: #fff; /* Dunkelblau */
}

.accordion input:checked+label:before {
  transition: 0.5s;
}
    
.panel li{padding-bottom:20px;
}
    
    
    
  



/* Grund-Layout: 50:50 Aufteilung */
/* Grund-Layout: Spaltenverhältnis auf 3/8 zu 5/8 geändert */
    
.raum-gallery, .team-gallery {
  display: flex;
  gap: 30px;
  margin: 20px auto;
  align-items: stretch;
}


/* Linke Spalte (Großes Bild - nimmt 3/8 bzw. 37.5% ein) */
.main-column {
  flex: 4; /* flex: 1;  Steuert das 3/8 Verhältnis */
  display: flex;
  align-items: center;
}
    
.main-view {
  width: 100%;
  aspect-ratio: 1 / 1; /* Absolut quadratisch */
  background-size: cover;
  background-position: center;
    transition: background-image 0.3s ease-in-out; /* Weicher Übergang */
    border: 20px solid #fff;
}

.raum-gallery .main-view {
  /* --- DAS STANDARDBILD (solange kein Hover stattfindet) --- */
      background-image: url('../img/raum.jpg'); /* Standard-Bild beim Laden */
}
    
    .team-gallery .main-view {
  /* --- DAS STANDARDBILD (solange kein Hover stattfindet) --- */
      background-image: url('../img/doktor.jpg'); /* Standard-Bild beim Laden */
}
   
    
     /* Rechte Spalte (Liste - nimmt 5/8 bzw. 62.5% ein) */
.list-column {
  flex: 4; /* Steuert das 5/8 Verhältnis */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* background-color: #f0f7fd; */
  padding: 0px;
}
    

.thumbnails-list {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Abstand zwischen den Team-Mitgliedern */
}

/* Einzelne Zeile (Kombination aus Bild und Text) */

  .thumb-row {
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  padding: 8px;
  background: white;
  transition: all 0.2s ease;
  border: 1px solid transparent;
            
padding:0;margin:0;
background:transparent;
}



  /* Die kleinen Bilder */
.thumb-img {
  width: 80px; /* Feste Breite */
  aspect-ratio: 1 / 1; /* Absolut quadratisch */
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  border:10px solid #fff;
}

/* Hover-Effekt auf die ganze Zeile */
.thumb-row:hover, .thumb-row:focus {
  background-color: #e1f0fc; /* Highlight-Farbe */
  border-color: #bde0fe;
  border-color: #fff;
}  
        
  /* Der Textbereich */
.thumb-text h3 {
  margin: 0 0 4px 0; font-size:0.8em;
}      
        
      
.thumb-text p {
  margin: 0;font-size:0.8em;
}
/* --- HOVER-BILDWECHSEL-LOGIK --- */
/* Ändert das große Hauptbild, wenn man über die jeweilige Zeile hovert */

.raum-gallery:has(.thumb-row:nth-child(1):hover) .main-view,
.raum-gallery:has(.thumb-row:nth-child(1):focus) .main-view {
  background-image: url('../img/raum.jpg');
}

.raum-gallery:has(.thumb-row:nth-child(2):hover) .main-view,
.raum-gallery:has(.thumb-row:nth-child(2):focus) .main-view {
  background-image: url('../img/raum1.jpg');
}

.raum-gallery:has(.thumb-row:nth-child(3):hover) .main-view,
.raum-gallery:has(.thumb-row:nth-child(3):focus) .main-view {
  background-image: url('../img/raum2.jpg');
}

.raum-gallery:has(.thumb-row:nth-child(4):hover) .main-view,
.raum-gallery:has(.thumb-row:nth-child(4):focus) .main-view {
  background-image: url('../img/raum3.jpg');
}

.raum-gallery:has(.thumb-row:nth-child(5):hover) .main-view,
.raum-gallery:has(.thumb-row:nth-child(5):focus) .main-view {
  background-image: url('../img/raum4.jpg');
}

/* --- HOVER-BILDWECHSEL-LOGIK --- */
/* Ändert das große Hauptbild, wenn man über die jeweilige Zeile hovert */

.team-gallery:has(.thumb-row:nth-child(1):hover) .main-view,
.team-gallery:has(.thumb-row:nth-child(1):focus) .main-view {
  background-image: url('../img/doktor.jpg');
}

.team-gallery:has(.thumb-row:nth-child(2):hover) .main-view,
.team-gallery:has(.thumb-row:nth-child(2):focus) .main-view {
  background-image: url('../img/dame1.jpg');
}

.team-gallery:has(.thumb-row:nth-child(3):hover) .main-view,
.team-gallery:has(.thumb-row:nth-child(3):focus) .main-view {
  background-image: url('../img/dame2.jpg');
}

.team-gallery:has(.thumb-row:nth-child(4):hover) .main-view,
.team-gallery:has(.thumb-row:nth-child(4):focus) .main-view {
  background-image: url('../img/dame3.jpg');
}

.team-gallery:has(.thumb-row:nth-child(5):hover) .main-view,
.team-gallery:has(.thumb-row:nth-child(5):focus) .main-view {
  background-image: url('../img/dame4.jpg');
}


/* Mobile responsive Anpassung */
@media (max-width: 850px) {
  .raum-gallery, .team-gallery {
    flex-direction: column; /* Auf Handys untereinander */
  }
}


.eins, #aktuelles, #team, #praxis {background: #D1EBF6!important;}
#aktuelles {padding:0 0 0px 0!important;}

/* BOX ID #aktuelles enthält */
.eins h2,  #neuraltherapie h2.title, #akupunktur h2.title, #praxis h2.title, #team h2.title {background-color:#36428F!important; color:#fff!important;}

#page h2.title  {background-color:#36428F!important;text-align:center; color:#fff!important;display:block;padding:25px!important;margin:0!important}


.home-page {margin:0!important;padding:0 0 40px 0!important;}

.home-page h2 {text-align: center;margin:0px 0 30px 0 !important;padding:25px!important}
.home-page.zwei h2 {background: hsl(200,80%,50%)!important;color:#fff!important; }
#aktuelles.eins h2{background: #D1EBF6!important;border-bottom:2px solid #fff!important;color:#36428F!important; }
 #page .page h2 {border-bottom:2px solid #D1EBF6!important;padding-bottom:15px;}

 .footer{background: #fff!important; }
#foot  {margin-top:-25px;padding:0px 0 40px 0 ;
  background-color: #36428F!important;  
      color: #fff; /* Dunkelblau */
}
   
     #foot h5,  #foot a, #foot p {  color: #fff!important;}
     #foot h5 {margin:30px 0 30px 0;}
     #foot a {display:block;width:100%;font-size:1.2rem;padding-bottom:15px;line-height: 0.1em!important;}
        
        
     #foot li {list-style: none}
    #foot li a, #foot li a:hover  {border-bottom:0;}
    #foot a:hover, #foot li a:hover  {text-decoration: none;border:none;color:#D1EBF6!important}
    
#footnavi {padding-top:50px }
        #copy{background: #fff!important;padding:20px; }
       .copy span {color:#36428F;font-size:1.2rem;}
    
    
        

#notruf{border:20px solid #fff!important; margin: 0;padding:0;}
#notruf td {border:1px solid #D1EBF6!important;}
#notruf tbody tr:hover a {color:#fff }
#notruf tbody tr:hover a:hover {color:#D1EBF6;text-decoration:none }

.hero {background:#fff url("../img/dr-rappold.jpg") repeat-x;  background-size: auto 100%;
  background-repeat: no-repeat;position:relative;margin:0;height:350px;padding:0;}

.transparent {background:#fff; opacity: 0.8;position:relative; margin:0 6% 0 35%;height:100%}

.hero-content {padding: 115px 0px 0 0!important; margin:0 0 0 130px!important;position:relative;	max-width: 600px;}

.hero .zertifikat {position:absolute; top:30px; left:31%;z-index: 250}
.hero .zertifikat img {width: 120px}
.hero .logo {width: 65px; position:absolute; right:0%; bottom:0px}
.hero .logo img {width: 65px}

body {margin:0;padding:0; }
#navi     {position:absolute; right:0; top:0;z-index: 300;position: fixed;}
html {
  scroll-behavior: smooth;
}
  
    
/*  Menu   CSSResult Skip Results Iframe   EDIT ON 

*/  
.burger-wrapper {cursor: pointer;}
#meny {
    background: #36428F;
    width: 20rem;
    height: 100vh;
    height: auto;
    position: fixed;
    right: 0;
    transition-timing-function: cubic-bezier(10,2,3,1);
    transform: translateX(50rem);
    top: 0;
    z-index: 0;
    transition: 0.5s;
    list-style: none;
    opacity: 0.9;
}
#menyAvPaa {display: none;}

#menyAvPaa:checked ~ #meny {
    transform: translateX(0rem);
}

#burger {
    position: absolute;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    right: 1rem;
    top: 1rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

#burger > div {
    height: 4px;
    background-color: #36428F;
    transition: 0.5s;
    z-index: 999;
     opacity: 1;
}

#menyAvPaa:checked ~ #burger > div {
  background-color: #fff;
}

#menyAvPaa:checked ~ #burger > div:nth-child(1) {
    transform: translateY(15px) rotate(45deg);
}
#menyAvPaa:checked ~ #burger > div:nth-child(2) {
    opacity: 0;
}
#menyAvPaa:checked ~ #burger > div:nth-child(3) {
    transform: translateY(-15px) rotate(-45deg);
}
#meny li {display:block;padding:0;margin:0;}
#meny a {font-weight: bold;color:#D1EBF6; display:block; padding:15px 40px;}

#meny a:hover {background: hsl(200,80%,50%);
   text-decoration:none;color:#fff ;
}

@media (max-width: 1300px) { 
.hero-content {margin-left: 70px!important;	} 
    body, table {font-size: 1.2rem;} 
}

@media (max-width: 1180px) { 
.hero-content {padding-top:140px!important;margin-left:30px!important;	} 
    h1 {line-height:  1.02em;}
.hero-title {font-size: 51px;} 
.hero-h2 {font-size: 40px;} 
.hero-subtitle {font-size: 29px!important;}
    .hero .zertifikat {top:20px; left:30%;}
.hero .zertifikat img {width: 110px}
     body, table {font-size: 1.1rem!important;} 
}



@media (max-width: 1090px) {  
    .hero-title {font-size: 45px;} 
   .hero-h2 {font-size: 35px;} 
.hero-subtitle {font-size: 25px!important; line-height: 1.1em;}
#info.boxen {margin:15px;
   gap: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;}

    #box1, #box3 {
    flex: 1 1 calc(50% - 8px);
    order: 1; /* Rutschen nach vorne */
  }

/* Box 2 wandert nach unten und nimmt volle Breite ein */
  #box2 {
    flex: 1 1 100%;
    order: 2; /* Rutscht nach ganz hinten */
  }
}


@media (max-width: 968px) {
    .hero-content {padding-top:150px!important;max-width: 480px;} 
    .hero .zertifikat {top:20px; left:60%;}
    .hero .zertifikat img {width: 100px} 
    .transparent {margin:0 0 0 39%;}
     h1 {line-height:  0.9em;}
    .hero-title {font-size: 40px} 
   .hero-h2 {font-size: 31px;} 
.hero-subtitle {font-size: 22px!important;}

#footnavi a {font-size:1.2em!important;line-height: 1.1em!important;text-align: left}
}

@media (max-width: 888px) {
    .hero-title {font-size: 33px} 
   .hero-h2 {font-size: 25px;} 
.hero-subtitle {font-size: 18px!important;}
    
 .hero-title {font-size: 36px;margin-bottom: 6px;} 
.hero-h2 {font-size: 28px;	margin-bottom: 10px;} 
.hero-subtitle {font-size: 20px!important;}

}


/* Mobile-Ansicht (bis 768px) */
@media (max-width: 768px) {
 #info .box {padding: 15px;} 
  #dr-rappold .boxen,  #anfahrt .boxen  {display: block; /* Deaktiviert das Flexbox-Layout */}

    
    
.hero {background:url("../img/dr-rappold-web.jpg");  background-size: auto 100%;
  background-repeat: no-repeat;height:350px;padding:0;}
    .transparent {background:none;margin:0 0 0 28%;height:100%}
    .hero-content {padding: 150px 20px 0 0!important;}
    #footnavi li {display: block; width:100%!important;}
    #footnavi a {font-size:1.5em!important;line-height: 1.1em!important}
}
    
@media (max-width: 710px) { 
    .logo { display: none}
    .page-excerpt, .page-content {margin-left:15px!important; margin-right:15px!important;}
    

    }
    
@media (max-width: 650px) { 
.hero {background:url("../img/dr-rappold-min.jpg");  background-size: auto 100%;
  background-repeat: no-repeat;height:350px!important;padding:0;}
.hero .zertifikat img {width: 80px}  
.hero {height:250px;padding:0;}
  
.hero-content h1 {line-height:0.6em!important } 
.hero-title {font-size: 29px;} 
.hero-h2 {font-size: 22.2px; } 
.hero-subtitle {font-size: 15.7px!important;}
    
    

.transparent {background:none; margin:0px;padding:205px 0 0 0;height:200px}
.hero-content {padding: 0!important; margin:0 0 0 15px!important;max-width: 400px;}
    #anfahrt .box {}

    
      

}