*,
	*::before,
	*::after {
	  box-sizing: border-box;											/* neu 20260419 */
	}   
	
	@font-face { 														/* neu 20260522 */
		
		font-family: 'InterDisplay';
		src: url('../fonts/InterDisplay-Regular.woff2');				/* test 20260522 */
		format('woff2');
		 		
	}
	
	/* what */
    
	body {
		font-family: 'InterDisplay', system-ui, sans-serif;
		background: #ffffff;
		color: #111;
	}
	
	/* body ok */
	
	#app { border: 0px solid silver; height: 95vh; width:300px; max-width: 300px; }
	
	#app {
		max-width: 720px;
		margin: 40px auto;	/* 60 */
		margin-top:2px;		/* 10 */
		padding: 0 12px;	/* 0 24 o|u l|r [top] [right] [bottom] [left] */
	}
	
	/* app ok */
		
	.top {
		display: flex;
		flex-direction: column;
		/*gap: 28px;*/
	}

	.label {
		font-size: 0.7rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: #8a8a8a;
		margin-bottom: 6px;
	}
	
	.value {
		font-size: 1.05rem;
		line-height: 1.5;
		font-weight: 500;
		color: #111;
	}
	
	.middle {
		margin: 60px 0;
	}
	
	.bottom {
		display: flex;
		/*gap: 16px;*/
		margin-top: 40px;
	}
	
	.details {
		margin-top: 24px;
		margin-bottom: 24px;
		font-size: 0.8rem;
		letter-spacing: 0.12em;
		color: #6f6f6f;
	}
	
	.hidden {
		display: none;
	}
	
	/* top label value middle bottom details hidden ok */
	
	#inputArea { border: 0px solid skyblue; max-width: 300px; }
	
	.char-count {
	  text-align: right;
	  font-size: 0.9rem;
	  color: #666;
	  color: #6f6f6f;
	}
	
	#bUc {
		display: flex;
		align-items: center;   /* vertikal mittig */
	}
	
	/* claim */
	
	.claim {						
		flex: 1;
		text-align: center;

		font-size: 0.85rem;          
		font-weight: 500;

		letter-spacing: 0.18em;
		/*text-transform: uppercase;*/

		color: #6f6f6f; 
		
		color: #5c6b73;   /* kühles Grau-Blau */
					
	}
	
	.claim {
	  border: 1px solid transparent;
	  background: transparent;
	  border-radius: 4px; /* runde Ecken */
	  transition: 
		border-color 200ms ease,
		box-shadow 200ms ease,
		transform 100ms ease;
	}
	
	.claim[aria-disabled="true"] {
	  pointer-events: none;
	}

	.claim.is-active {
	  border-color: var(--accent);
	  background: rgba(0, 0, 0, 0.04); /* alternativ: deine Accent-Farbe mit 5–8% */
	  box-shadow: 0 0 6px rgba(255, 140, 0, 0.25);
	  box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.0);
	  cursor: pointer;
	}

	.claim.is-active:active {
	  transform: scale(0.98);
	  background: rgba(0, 0, 0, 0.08);
	  box-shadow: 0 0 4px rgba(255, 140, 0, 0.3);
	}

	.claim.is-active:focus-visible {
	  outline: 2px solid var(--accent);
	  outline-offset: 2px;
	}
	
	.claim.pulse {
	  animation: attract 600ms ease;
	}

	@keyframes pulse {
	  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); }
	  100% { box-shadow: 0 0 0 6px rgba(0,0,0,0); }
	}
	
	@keyframes attract {
	  0% {
		box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.0);
	  }
	  40% {
		box-shadow: 0 0 0 6px rgba(255, 140, 0, 0.25);
	  }
	  100% {
		box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.0);
	  }
	}
	
	@media (hover: hover) {
	  .claim.is-active:hover {
		background: rgba(0, 0, 0, 0.06);
		box-shadow: 0 0 10px rgba(255, 140, 0, 0.35);
		transform: translateY(-1px);
	  }
	}	
	
	/* inputArea ok */
	
	.middle input {
		width: 100%;
		border: none;
		border-bottom: 1px solid #ddd;

		font-size: 1.4rem;
		padding: 12px 4px;

		outline: none;
	}

	.middle input::placeholder {
		color: #9aa0a6;
		letter-spacing: 0.05em;
	}
	
	#input { font-size: 1.5rem; box-sizing: border-box; padding: 15px; width: 98%; margin: auto; text-align: cen_ter; display: block; }
	
	#input {
	  width: 98%;
	  /*height: 200px;*/
	  margin:auto;
	  box-sizing: border-box;
	  display: block; 
	  font-size: 1.2rem;
	  padding: 1rem;
	  resize: vertical;
	  border: 1px solid #ccc;
	  border-radius: 8px;
	  background-color: white;
	  color: #333;
	}
    
    /* input ok */
    
    #languageSwitcher {
	  display: flex;
	  justify-content: center;
	  font-size: 0.8rem;
	  color: #6e6e73;
	  letter-spacing: 0.04em;
	}

	#languageSwitcher > * {
	  margin: 0 5px; 			
	}


	#languageSwitcher .lang {
	  cursor: pointer;
	  opacity: 0.6;
	  transition: all 0.25s ease;
	  position: relative;
	}

	#languageSwitcher .lang:hover {
	  opacity: 1;
	  color: #1d1d1f;
	}

	#languageSwitcher .lang.active {
	  opacity: 1;
	  color: #1d1d1f;
	  font-weight: 500;
	}

	#languageSwitcher .lang::after {
	  content: "";
	  position: absolute;
	  left: 50%;
	  bottom: -4px;
	  width: 0%;
	  height: 1px;
	  background: #1d1d1f;
	  transform: translateX(-50%);
	  transition: width 0.25s ease;
	}

	#languageSwitcher .lang:hover::after,
	#languageSwitcher .lang.active::after {
	  width: 100%;
	}

	/* languageSwitcher ok */
	
	.autocomplete-box {
		border: 1px solid #ccc;
		max-width: 80%;
		background: white;
		position: absolute;
		z-index: 1000;
	}

	.autocomplete-item {
		padding: 5px 10px;
		cursor: pointer;
	}

	.autocomplete-item:hover {
		background-color: #eee;
	}
	
	/* autocomplete ok */
	
	#goalEl, #statusEl, #stepEl { margin: 10px 0; text-align: center; }
	
	/* goal ok */

	#statusEl { color: gray; }
	
	/* status ok */

	#stepEl { color: skyblue; margin-bottom: 10px; }
	
	/* step ok */
	
	/* modal | 20260409 */
    
    .modal {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;														
	  height: 100%;
	  background: rgba(0,0,0,0.7);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 9999;
	}

	.hidden {
	  display: none;
	}

	.modal-content {
	  background: white;
	  text-align: center;
	  width: 90%;
	  max-width: 500px;
      padding: 1rem;
      border-radius: 8px;
      box-sizing: border-box; 
	}

	.modal-actions {
	  margin-top: 20px;
	  display: flex;
	  justify-content: space-around;
	}
	
	/* modal | ok */
	
	button { 
		font-size: 1.2rem;
		padding: 10px 20px;
		margin: 5px;
		cursor: pointer; 
		background-color: #e74c3c;
		color: white;
		border: none;
		border-radius: 8px;
		padding: 1rem;
		/*margin-bottom:1rem;*/ 		
		text-transform: uppercase
		/*-webkit-tap-highlight-color: transparent;*/	/* neu test 20260423 */
	}
	
	button.active {					
	  background-color: #c0392b;
	  outline: none;
	  outline: red;						/* test 20260427 */
	}
	
	.cButton:active {
	   background-color: #c0392b;
	}
	
	#stepButtons button {
		width: 80%;
		padding: 10px;
		margin: 5px auto;
		border-radius: 10px;
		display: block;
		text-align: center;
		cursor: pointer;
		transition: background 0.2s;
	}
	
	/*#stepButtons button:hover { background: #ddd; }*/	/* off 20260427 */	
    
    #stepButtons { overflow-y: auto; flex: 1; }
	
	/* button | ok */
	
	#ratingEl { margin-top: 10px; width: 90%; display: block; flex-direction: column; align-items: center; }
	
	#topS button { width: 90%; margin: 5px auto; display: block; }
	
	#deepStep { font-family: 'Verdana'; font-weight: 500; font-size: 0.85rem; color: #5c6b73;} 	
	
	#deepStep {															/* neu 20260522 */
		font-family: 'InterDisplay', sans-serif;
	}
	
	/* media */
	
	@media (hover: hover) {
		button:hover {
			background-color: #c0392b
		}
	}