body {
    margin:0;
    padding:0;
    min-width:100%;
    min-height:100;
    color:#b4b4b4;
    background-color:#000;
    scrollbar-width: thin;
        scrollbar-color: #6b7280 #0a0a0a;
        /* thumb, track (fast schwarz) */
}

.fog-background {
    display:block;
    position: fixed;
    width:100%;
    height:100%;
    z-index:-9999;
}

a {
    color:#b4b4b4 !important;
}

.begruesung {
    font-size:22pt;
    padding: 50px 0px 50px 0px;
}


.main {
    width:100%;
    height:100%;
    min-height:100%;
    z-index:9999;
}

.row > * {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
  }

.logo {
    padding-top:20px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    z-index:9999;
}

.footer {
    padding-top:20px;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgb(0, 0, 0) 30%, rgba(0,0,0,0) 100%);
    bottom: 30px;
    width: 100%;
    z-index:9999;
}

.logo img{
    padding-top:20px;
    width: 150px;
}

.foto {
    background-color: #252525;
    height: 250px !important;
    overflow: hidden !important;
        
}

.background-blur {
    backdrop-filter: blur(10px);
}

.icon-hg {
    width:60px;
    height:60px;
    margin-left:auto;
    margin-right:auto;
    border-radius:50%;
    background-color: #333;
}

.s-icon {
    padding-top:12px;
    font-size: 24pt;
    color:#b4b4b4;
}

.front-titel {
    margin-top:65px;
}

.back-content {

}

 /* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    background-color: transparent;
    /*width: 250px;*/
    width:100%;
    padding:0px;
    margin:0px;
    /*height: 250px;*/
    min-height:250px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.height-550 {
    min-height:550px;
}

.height-250 {
    height:250px;
}

.service-liste {
    color:#b4b4b4;

}

.service-liste-back {
    color:#666;
}

.service-liste-back img{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.service-liste-back img:hover{
    -webkit-filter: none; /* Safari 6.0 - 9.0 */
    filter: none;
}

  
/* This container is needed to position the front and back side */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    /*text-align: center;*/
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
  
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}
  
/* Position the front and back side */
.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
  
  /* Style the front side */
.flip-box-front {
    background-color: #252525;
    color: #b4b4b4;
    /*display: flex;
    align-items: center; 
    justify-content: center;*/
}
  
/* Style the back side */
.flip-box-back {
    color: #000;
    transform: rotateY(180deg);
} 

.flip-box-bg-1 {
    background-color: #c4ced1;
}

.flip-box-bg-2 {
    background-color: #efc6a9;
}

.flip-box-bg-3 {
    background-color: #badac9;
}

.flip-box-bg-4 {
    background-color: #e4e9e9;
}

.box-shadow {
    -webkit-box-shadow: 9px 11px 14px 5px rgba(0,0,0,0.1); 
    box-shadow: 9px 11px 14px 5px rgba(0,0,0,0.1);
}

input[type=text], input[type=email], input[type=tel]  {
    background-color: #252525 !important;
    color:#b4b4b4 !important;
    border-style: none !important;
    border-color: Transparent !important;
}

textarea {
    background-color: #252525 !important;
    color:#b4b4b4 !important;
    border-style: none !important;
    border-color: Transparent !important;
    overflow: auto !important; 
}

.danke-icon {
    font-size:120pt;
}

.danke-titel {
    text-transform: uppercase;;
}

.border-radius {
    border-radius: 25px;
}

.icon-30 {
    font-size: 30pt;
}

.impressum-tipp {
    background-color:#252525;
    color:#b4b4b4;
    border: #252525;
}



:root{
  --bubble-bot: #5C54A4;   /* Violett */
  --bubble-user: #2E7C68;  /* Grün */
  --text: #ffffff;
}







/* Chat-– Darkmode */
.chat-wrap{
  margin:2rem auto;
  background:var(--bg);
  overflow:hidden;
}

.chat-wrap label {
  display: block;
}

.small-hint {
    font-weight: bold;;
}


.messages{
  padding:1rem;
  height:35vh;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  scroll-behavior:smooth;
}

.msg{
  display:flex;
  gap:.5rem;
  align-items:flex-end;
}

.msg.user{justify-content:flex-end;}
.msg.bot{justify-content:flex-start;}

.bubble{
  max-width:80%;
  padding:.75rem 1rem;
  border-radius:18px;
  line-height:1.4;
  white-space:pre-wrap;
  word-wrap:break-word;
  border:1px solid transparent;
}

.msg.bot .bubble{
  background:var(--bubble-bot);
  color:var(--text);
  border-color:#5C54A4;;
}

.msg.user .bubble{
  background:var(--bubble-user);
  color:var(--text);
  border-color:#2E7C68;
}

.input-area{
  padding:1rem;
}

#chat-input{
  width:90%;
  min-height:3.5rem; /* zweizeilig */
  max-height:8rem;
  resize:vertical;
  padding:.75rem 1rem;
  outline:none;
  border-radius: 5px;
  margin-top: 10px;
}

#send-btn {
min-height: 4.5rem;
  max-height: 8rem;
  color: var(--text);
  border-color: #2E7C68;
  background: #2E7C68;
  display: block;
  float: inline-end;
  width: 10%;
  border-radius: 5px;
  margin-top: 10px;
}

#send-btn:hover {
    color: var(--text);
    background: #086e53;
}

#contact-btn, #email-btn {
    color: var(--text);
    background-color: #252525 !important;
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 10px 0px 0px;
}

#contact-btn:hover {
    color: var(--text);
    background-color: #444 !important;
    ;
}

#email-btn:hover {
    color: var(--text);
    background-color: #444 !important;
    ;
}

.submit-btn {
    color: var(--text);
    background: #2E7C68;
    padding: 15px !important;
}

.submit-btn:hover {
    color: var(--text);
    background: #086e53;
}


@media (max-width: 900px){
  .chat-wrap, .form-wrap{width:95%}
  .messages{height:50vh}
  #chat-input{width:70%;}
  #send-btn {width: 30%;}
}





/* === Layout: Footer immer unten, ohne sticky/fixed ======================= */

/* 1) Body wird Flex-Container über volle Viewport-Höhe */
html { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;           /* sichere volle Höhe, auch mobil */
  display: flex;
  flex-direction: column;
}

/* 2) Hintergrund bleibt hinten */
.fog-background {
  position: fixed;
  inset: 0;
  z-index: -9999;
}

/* 3) Hauptbereich füllt den verfügbaren Platz */
.main {
  flex: 1 0 auto;               /* nimmt Resthöhe ein */
  min-height: 0;                /* verhindert Überlauf-Probleme */
  height: auto;                 /* vorhandenes height:100%/min-height:100% neutralisieren */
}

/* 4) Footer wird durch margin-top:auto nach unten gedrückt */
.footer {
  margin-top: auto;             /* schiebt Footer an das untere Ende */
  position: relative;           /* z-index greift zuverlässig */
  bottom: auto;                 /* überschreibt evtl. alte Angaben */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;

  /* dein bestehender Stil – beibehalten/leicht gestrafft */
  padding-top: 20px;
  background: linear-gradient(0deg, rgb(0 0 0) 30%, rgba(0,0,0,0) 100%);
}

/* (Optional) Kleinigkeit: Scroll-Container im Chat müssen wachsen dürfen */
.messages { min-height: 0; }

/* WebKit (Chrome/Edge/Safari) – dunkel */
body[data-theme="dark"] #messages::-webkit-scrollbar {
    width: 12px;
}

body[data-theme="dark"] #messages::-webkit-scrollbar-track {
    background: #0a0a0a;
    /* nahezu Schwarz für Track */
    border-radius: 8px;
}

body[data-theme="dark"] #messages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6b7280 0%, #9ca3af 100%);
    border: 3px solid #0a0a0a;
    border-radius: 8px;
}

body[data-theme="dark"] #messages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #9ca3af 0%, #d1d5db 100%);
}