@font-face {
    font-family:'Bookmania';
    src: url('fnt/bookmania-regular.woff') format('woff');
}

@font-face {
    font-family:'ABKStuttgart';
    src: url('fnt/ABKStuttgartWeb-Regular.woff2') format('woff2');
}


.return {
position:fixed;
left: 30px;
top: 20px;
width: 30px;   
z-index: 9997; 
}





.choice {
  display: flex;
  flex-direction: row;      /* côte à côte */
  justify-content: center;  /* centre horizontalement */
  align-items: center;      /* centre verticalement */
  height: 85vh;            /* hauteur de l’écran */
  gap: 2rem;                /* espace entre les boutons (optionnel) */
}


button{
  min-height:200px
}

.title-1 { 
  width: 400px; 
  position: relative; 
  display: inline-block; 
  z-index: 999; 
  padding: 10px;
  background: rgba(0, 0, 0, 0);
  border: 0px;
}

/* toutes les images superposées */
.title-1 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  pointer-events: none; /* important */
}

/* état initial */
.title-1 .title-1-hover {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* hover */
.title-1:hover .title-1-hover {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.title-1:hover .title-1-normal {
  opacity: 0;
  transition: opacity 0.3s ease;
}


.language-toggle{
	position:fixed;
	top:10px;
	right:20px;
	z-index: 99;
}

.language-toggle button {
  	background-color: rgba(255, 255, 255, 0);   /* Fond transparent */
	border: 0px solid #00000000;           /* Bordure noire */
	color: #ff0000;                      /* Texte en noir */
	font-size: 20px; 
	padding: 1em;
  font-family: 'ABKStuttgart', sans-serif;                 /* Taille de police */                 /* Espacement interne */
  min-height:0px;
  cursor: pointer;                  /* Le curseur devient une main lorsqu'on survole */      /* Transition fluide */
}

iframe{
    width: 100%;
    min-width: 315px;
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    height: 90vh;
    border: none;
    display: block;
}

body {

	font-family: 'ABKStuttgart', sans-serif;
	background: #ffffff;
	padding: 2rem;
	color: #ff0000;
  
}

body::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

.pres{
  display:flex;
  flex-direction: row-reverse;
  align-items: center;
}

.pres .title {
  width: 400px;
  position: absolute;      
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 10px;
  align-items: center;
}

.pres p{
  position:relative;
  align-items: center;
  border: #ff0000 dotted 2px;
  padding:15px;
  border-radius:5px;
    margin-bottom: 35px;
}

.idee {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  overflow-y: visible;
  white-space: normal;
  user-select: none;
  padding: 20px 0px;
  scrollbar-width: none; /* Firefox */

  align-items: center;
  cursor: ew-resize;
}

.idee::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}



.question-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 20px;
  border-top: 2.5px dotted #ff0000;
font-size: 20px;
}

.ja-nein {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  overflow-y: visible;
  white-space: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
}

.answer-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: visible;
  overflow-y: visible;
  white-space: normal;
  padding: 40px 0px;
  scrollbar-width: none; /* Firefox */
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
}

.answer-container .idee.is-dragging * {
  pointer-events: none;
}

.answer-container::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

.answer-container:active {
  cursor: grabbing;
}

.answer-container span{
	transition: padding 1s, font-size 1s, background 0.6s;
}

.answer-container span:hover{
	background: #ff0000;
	border: 3px dotted #ffffff ;
	color: #ffffff;
	cursor:pointer;
	/* animation:shake 2s infinite ;  */
	transition: padding 1s, font-size 1s, background 0.6s;
}

.answer-container .idee span:hover {
  border: 2px dotted rgb(255, 255, 255);
  padding: 2em
}

.gruppe {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  overflow-y: visible;
  white-space: normal;
  user-select: none;
  padding: 20px 0px;
  scrollbar-width: none; /* Firefox */

  align-items: center;
}

.answer-container .gruppe span:hover {
  border: 2px dotted rgb(255, 255, 255);
  padding: 2em
}

.answer-container .gruppe span {
  border: 2px dotted rgb(255, 255, 255);
  padding: 1em
}

.answer-container .idee span {
  display: inline-flex;
  padding: 1rem;
  border: 2px dotted red;
  border-radius: 1em;

  max-width: 40ch;
  width: fit-content;

  white-space: normal;
  overflow-wrap: break-word;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  flex-shrink: 0;  /* regle d'or typooooo*/
}

.answer-container .ja-nein span{
  border: red dotted 2px;
  border-radius: 1em;
  margin:1px;
  padding:1rem;
  height:fit-content;
  transition: padding 1s, font-size 1s, background 0.6s;
}

.answer-container .gruppe span{
  border: red dotted 2px;
  border-radius: 1em;
  margin:1px;
  padding:1rem;
  height:fit-content;
  transition: padding 1s, font-size 1s, background 0.6s;
}


/*GEFALLEN*/

.answer-container #gefallen.ja-nein:hover .ja{
  z-index: 10;
  font-size: 20px;
  padding:4.756rem;
  transition: padding 1.2s, font-size 1.2s, background 0.6s;
}

.answer-container #gefallen:hover .nein{
  z-index: 10;
  font-size: 20px;
  padding:0.244rem;
  transition: padding 1.2s, font-size 1.2s, background 0.6s;
}

/*VERLASST*/

.answer-container #verlasst.ja-nein:hover .ja{
z-index: 10;
font-size: 20px;
padding:0.244rem;
transition: padding 1.2s, font-size 1.2s, background 0.6s;
}

.answer-container #verlasst.ja-nein:hover .nein{
z-index: 10;
font-size: 20px;
padding:0.244rem;
transition: padding 1.2s, font-size 1.2s, background 0.6s;
}

/*Enno*/

.answer-container #Enno.ja-nein:hover .ja{
z-index: 10;
font-size: 20px;
padding:4.634rem;
transition: padding 1s, font-size 1s, background 0.6s;
}

.answer-container #Enno.ja-nein:hover .nein{
z-index: 10;
font-size: 20px;
padding:0,366rem;
transition: padding 1s, font-size 1s, background 0.6s;
}

/*Wahrnehmung*/

.answer-container #Wahrnehmung.ja-nein:hover .ja{
z-index: 10;
font-size: 20px;
padding:2.5rem;
transition: padding 1s, font-size 1s, background 0.6s;
}

.answer-container #Wahrnehmung.ja-nein:hover .nein{
z-index: 10;
font-size: 20px;
padding:2.5rem;
transition: padding 1s, font-size 1s, background 0.6s;
}

/*BLEIBEN*/
.answer-container #bleiben.ja-nein:hover .ja{
z-index: 10;
font-size: 20px;
padding:4.939rem;
transition: padding 1.2s, font-size 1.2s, background 0.6s;
}

.answer-container #bleiben.ja-nein:hover .nein{
z-index: 10;
font-size: 20px;
padding:0.061rem;
transition: padding 1s, font-size 1s, background 0.6s;
}

/*PFLEGE*/
.answer-container #Pflege.ja-nein:hover .ja{
z-index: 10;
font-size: 20px;
padding:1.89rem;
transition: padding 1.2s, font-size 1.2s, background 0.6s;
}

.answer-container #Pflege.ja-nein:hover .nein{
z-index: 10;
font-size: 20px;
padding:3.11rem;
transition: padding 1s, font-size 1s, background 0.6s;
}

/*TOOLTIP*/

#tooltip {
    font-family: 'ABKStuttgart', sans-serif;
    font-weight: normal;
    font-style: normal;
    position: fixed;
    pointer-events: none;
    background: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
    border:solid rgb(255, 255, 255) 2px;
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 1px;
    transform: translate(0%, -120%);
    transition: opacity 0.7s ease-in-out;
    white-space: nowrap;
    z-index: 9999;
    display: none;
}

	/* ======================== CURSOR ======================== */
@media (pointer: fine) {
  body.custom-cursor-enabled * {
    cursor: none !important; /* masque le curseur système */
  }

  
  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px; /* adapte à la taille de ton PNG */
    height: 32px;
    background-image: url("img/custom_cursor/cursor.svg");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
  }

  .cursor-visible {
    opacity: 1;
  }

  .cursor-pointer {
    background-image: url("img/custom_cursor/pointer.svg");
  }

    .cursor-active {
    background-image: url("img/custom_cursor/pointer-click.svg");
    transform: scale(0.9);
  }

  .cursor-ew {
  background-image: url("img/custom_cursor/double-cursor.svg") !important;
}

}

@media (max-width: 600px) {

body {
	padding: 0.5rem;
  padding-top: 1em;
}

  .return {
position:fixed;
left: 30px;
top: 20px;
width: 20px;   
z-index: 9997; 
}

.choice {
  display: flex;
  flex-direction: column;      /* côte à côte */
  justify-content: center;  /* centre horizontalement */
  align-items: center;      /* centre verticalement */
  height: 90vh;            /* hauteur de l’écran */
  gap: 2rem;                /* espace entre les boutons (optionnel) */
}

.title-1 { 
  width: 250px; 
  padding: 10px;

}

.pres{
  display: flex;
  flex-direction: column;  /* ou row */
}

.pres .title {
  position: relative;
  width: 250px;
  padding: 20px;    
  left: 40%;
  order: 1;
  align-items: center;
  padding-bottom:0px
}

.pres p{
  align-items: center;
  order: 2;
  padding:10px;
  font-size: 16px;
  margin-bottom: 35px;
  border: #ff0000 dotted 2px;
}

.question-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 20px;
  border-top: 2.5px dotted #ff0000;
  font-size: 1em;
}

.language-toggle {
  position: fixed;
  inset: 10px 10px auto auto;
  max-width: 100vw;
}

.language-toggle button {
  font-size: 15px; 
}

}

@keyframes shake {
    0% {
        -webkit-transform: translate(1px, 1px) rotate(0deg);
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        -webkit-transform: translate(-1px, -2px) rotate(-1deg);
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        -webkit-transform: translate(-3px, 0px) rotate(1deg);
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        -webkit-transform: translate(3px, 2px) rotate(0deg);
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        -webkit-transform: translate(1px, -1px) rotate(1deg);
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        -webkit-transform: translate(-1px, 2px) rotate(-1deg);
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        -webkit-transform: translate(-3px, 1px) rotate(0deg);
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        -webkit-transform: translate(3px, 1px) rotate(-1deg);
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        -webkit-transform: translate(-1px, -1px) rotate(1deg);
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        -webkit-transform: translate(1px, 2px) rotate(0deg);
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg);
        transform: translate(1px, -2px) rotate(-1deg);
    }}