/*--------------------------------------------------------------------
	Author: {ths} Thomas Schostok Design
	Version: 1.0-uikit
---------------------------------------------------------------------*/
/*@import url("ths_fonts_static.css");*/
@import url("ths_fonts_vf.css");
@view-transition {
	navigation: auto;
}
/* Swatch Variables */
:root{
--thsBG: #f7f7f7;
--thsBGNavbar: #f7f7f7;
--thsFooterBg: #f2f2f2;
--thsTextfarbe: #2f2f2f;
--thsBU:#949494;
--thsRahmen: #2f2f2f;
--thsRahmenHover: #2f2f2f;
--thsLinks: #cb3c62;
--thsLinksHover: #2f2f2f;
--thsLinksNav:#2f2f2f;
--thsLinksNavHover:#cb3c62;
--thsFooterLinks: #2f2f2f;
--thsFooterLinksHover: #cb3c62;
--thsToggler: #2f2f2f;
--thsDivider: #2f2f2f;
--thsGray: #d6d6d6;
--thsB:#e3f1f7;
--thsSelect: #eaedee;
--cape-toggle-color:         var(--thsRahmen);
--cape-toggle-color-hover:   var(--thsRahmen);
--cape-toggle-opacity:       1;
--cape-toggle-opacity-hover: 0.5;
--uk-column-divider: #838383;	/* Spaltentrenner */


/* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1500,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

/* Step -2: 11.1111px → 10.24px */
  --fluid--2: clamp(0.64rem, 0.7116rem + -0.0764vw, 0.6944rem);
  /* Step -1: 13.3333px → 12.8px */
  --fluid--1: clamp(0.8rem, 0.8439rem + -0.0468vw, 0.8333rem);
  /* Step 0: 16px → 16px */
  --fluid-0: clamp(1rem, 1rem + 0vw, 1rem);
  /* Step 1: 19.2px → 20px */
  --fluid-1: clamp(1.2rem, 1.1842rem + 0.0702vw, 1.25rem);
  /* Step 2: 23.04px → 25px */
  --fluid-2: clamp(1.44rem, 1.4013rem + 0.1719vw, 1.5625rem);
  /* Step 3: 27.648px → 31.25px */
  --fluid-3: clamp(1.728rem, 1.6569rem + 0.316vw, 1.9531rem);
  /* Step 4: 33.1776px → 39.0625px */
  --fluid-4: clamp(2.0736rem, 1.9575rem + 0.5162vw, 2.4414rem);
  /* Step 5: 39.8131px → 48.8281px */
  --fluid-5: clamp(2.4883rem, 2.3104rem + 0.7908vw, 3.0518rem);
  /* Step 6: 47.7757px → 61.0352px */
  --fluid-6: clamp(2.986rem, 2.7243rem + 1.1631vw, 3.8147rem);
}

.uk-background-secondary {
	background-color: var(--thsFooterBg) !important;
}
p a:not([href*="cape-arcona.com"]):not([href^="#"]):not([href^="/"]):not([href^="mailto:"]):not([role="button"]):not(.uk-button):not(.no-icon):not([href^="tel:"]):not([id])::after {
  content: '\2197';
  display: inline-block;
  margin-left: 5px;
  font-size: var(--fluid--0)!important;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family:"Familyname";
	min-height: 100vh;	/*footer at bottom*/
	display: grid;	/*footer at bottom*/
	grid-template-rows: auto 1fr auto;	/*footer at bottom*/
	background-color: var(--thsBG);

}
html {
	color:var(--thsTextfarbe);
	scroll-behavior: smooth;
	scroll-padding-top: 120px; /* Offset für die gesamte Seite */
}
html:has(#searchInput:focus) {
	scroll-padding-top: 0;
}
body, html {font-size: var(--fluid-0)!important;}
.fs-1, h1 {font-size: var(--fluid-6)!important; font-weight: 400!important;}
.fs-2, h2 {font-size: var(--fluid-5)!important; font-weight: 400!important;}
.fs-4, h4 {font-size: var(--fluid-3)!important; font-weight: 400!important;}
.fs-3, h3 {font-size: var(--fluid-4)!important; font-weight: 400!important;}
.fs-5, h5 {font-size: var(--fluid-2)!important; font-weight: 400!important;}
.fs-6, h6 {font-size: var(--fluid-1)!important; font-weight: 400!important;}

.ths-bg {
	background-color: var(--thsB)!important;
}

/* CAPE COLORS - - - - - - - - - - -  */
.fill-grad0 {
	background-color: #e3e52e;
  }
  .fill-grad1 {
	background-color: #e7e8e3;
  }
  .fill-grad2 {
	background-color: #EBECE8;
  }
  .fill-grad3 {
	background-color: #EFF0EC;
  }
  .fill-grad4 {
	background-color: #F3F4F1;
  } 
.ths-container { /*breite eines containers*/
	max-width: 960px;
	/* margin: 0 auto !important; */
}
a {
	color:var(--thsLinks)!important;
	transition: color .2s ease-out, text-decoration-color .2s ease-out;
	text-decoration: none!important;
	cursor: pointer!important;
}
a:hover {
	color:var(--thsLinksHover)!important;
	text-decoration: underline!important;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--thsLinksHover);
	text-underline-offset: 4px;
	text-decoration-skip-ink: none;
}
a.famselector-card {
	display: block;
	overflow: hidden;
	color: var(--thsTextfarbe)!important;
	text-decoration: none!important;
	transition: background-color .5s ease-out;
	border-bottom: 2px solid var(--thsRahmen);
	padding-top: 50px;
	padding-bottom: 50px;

	width: 100%;
    box-sizing: border-box; /* Padding wird in die Breite eingerechnet */
    overflow-wrap: break-word;
    word-wrap: break-word;
}
a.famselector-card:hover {
	background-color: var(--thsSelect)!important;
	text-decoration: none!important;
}
.famselector {
	color: var(--thsTextfarbe)!important;
	text-decoration: none!important;
	transition: color .2s ease-out;

	display: inline-block;
    max-width: 100%;
}

em {color: inherit !important;}
.caicon {
	width: 36px;
	height: 36px;
}
footer {
	background-color: var(--thsFooterBg)!important;
}
footer a {
	color:var(--thsFooterLinks)!important;
	transition: color .2s ease-out, text-decoration-color .2s ease-out;
	text-decoration: none!important;
	cursor: pointer;
	font-size: 0.875rem;
}
footer a:hover, .footer-text a:hover {
	color:var(--thsLinks)!important;
	text-decoration: underline!important;
	text-decoration-thickness: 0.05em;
	text-decoration-color: var(--thsLinks);
	text-underline-offset: 4px;
	text-decoration-skip-ink: none;
}
.footer-link {
	color:var(--thsFooterLinks)!important;
	text-decoration: underline!important;
	text-decoration-thickness: 0.05em;
	text-decoration-color: var(--thsFooterLinks)!important;
	text-underline-offset: 5px;
	text-decoration-skip-ink: none;
}
.footer-link:hover {
	text-decoration-thickness: 0.05em;
	text-decoration-color: var(--thsLinks);
	text-underline-offset: 5px;
	text-decoration-skip-ink: none;
	color:var(--thsFooterLinksHover)!important;
}
.footer-text a {
	color:var(--thsFooterLinks)!important;
	transition: all .2s ease-out;
	text-decoration: underline!important;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--thsLinks);
	text-underline-offset: 4px;
	text-decoration-skip-ink: none;
}
h1,h2,h3,h4,h5,h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-3xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge {
	font-family:"cape_headline"!important;
	text-transform: uppercase;
	margin: 0 !important;
	line-height: 1.2!important;
	font-weight: normal!important;
  margin-top: -0.3em!important; /* kompensiert den zusätzlichen Abstand durch die Großbuchstaben */
  padding-bottom: 10px;
  color: var(--thsTextfarbe)!important;
}
p{
	margin-top: 0 !important;
}
.ths-dark {color: rgb(0, 0, 0)!important; opacity:1!important;}
.ths-light {color: rgb(255, 255, 255,1)!important; opacity:1!important;}

.uk-hr, hr {
	border-top: 2px solid var(--thsDivider)!important;
}
.text {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	/*letter-spacing: 0.00625em;*/
	opacity: 1!important;
}
.text p:last-child {
	margin-bottom: 0;
}
.text a{
	color: var(--thsLinks);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--thsLinks);
	text-underline-offset: 4px;
	text-decoration-skip-ink: none;
	transition: all .2s ease-out;
}
.text a:hover{
	color: var(--thsLinksHover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--thsLinksHover);
	text-underline-offset: 4px;
	text-decoration-skip-ink: none;
}

blockquote {
	font-size: var(--fluid--0)!important;
	color:var(--thsTextfarbe);
	display: grid;
	grid-template-columns: 50px auto; /* Eine Spalte für das Icon (50px breit), eine für den Text (restliche Breite) */
	grid-gap: 1rem; /* Abstand zwischen den Spalten */
}
blockquote p {
	font-style: italic;
	margin: 0; /* Remove default margins */
	grid-column: 2; /* Platziere alle <p>-Elemente in der zweiten Spalte */
}
blockquote::before {
	content: "";
	width: 36px;
	height: 36px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"/><path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.text-muted {color: var(--thsGray)!important;}
.text-white {color: white!important;}

.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6
{ color: var(--thsTextfarbe)!important; }
.text-white {color:white!important;
}
/* Images inside Text */
.align_left {float: left; margin: 0 15px 0 0;}
.align_right {float: right; margin: 0 0 0 15px;}
.align_center{margin: 0px auto; margin-bottom:15px;display:block; text-align: center;}

p.align_left {text-align: left;}
p.align_center {text-align: center;}
p.align_right {text-align: right;}
.ths-button,
.ths-button a {
	font-weight: 500!important;
	background-color: transparent;
	color: var(--thsRahmen)!important;
	border: 2px solid var(--thsRahmen);
	text-decoration: none!important;
	cursor:pointer;
  line-height: 1.2;
  padding-top:10px; padding-bottom:10px;
      margin-bottom: 10px;
    vertical-align: top; /* verhindert das Baseline-Springen */
}
.ths-button a:hover {
	color: white!important;
}
.ths-button {
	background-color: transparent;
	color: var(--thsRahmen)!important;
	text-decoration: none!important;
}

/* Border nur für direkte <a> Buttons, nicht für Spans */
a.ths-button {
	border: 2px solid var(--thsRahmen);
	cursor: pointer !important;
}
a.ths-button * {
	cursor: pointer !important;
}

/* Styles für Links innerhalb von .ths-button Spans */
.ths-button a {
	color: var(--thsRahmen)!important;
	text-decoration: none!important;
}
/* Hover für direkte <a> Buttons */
a.ths-button:hover,
button.ths-button:hover,
a.ths-button.active {
	color: white!important;
	background-color: var(--thsRahmenHover)!important;
	border-color: var(--thsRahmenHover)!important;
	text-decoration: none!important;
}
button.ths-button:disabled {
	color: #999!important;
	cursor:not-allowed!important;
}
button.ths-button:disabled:hover {
	color: #999!important;
	background-color: transparent!important;
	border-color: #e5e5e5!important;
	outline: none!important;
	box-shadow: none!important;
}
/* Hover für Span-Buttons */
span.ths-button:hover {
	background-color: var(--thsRahmenHover)!important;
	border-color: var(--thsRahmenHover)!important;
}
span.ths-button:hover a {
	color: white!important;
	text-decoration: none!important;
}
/* Border für Span-Buttons */
span.ths-button {
	border: 2px solid var(--thsRahmen);
	display: inline-block;
}
span.ths-button a {
	border: none!important;
}
span.ths-button a:hover{
	color: white!important;
}
.style-button {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	margin-bottom: 4px;
}
a.color-toggle {
	color: var(--thsToggler)!important;
}
/* Logo */
.navbar-brand img { width:auto; height:36px;transition: all .2s ease-out;}
@media (min-width:420px) { /* ab MD */
	.navbar-brand img { height:60px;}
}
/* navigation */
.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {font-family: "Familyname"!important;}
.uk-navbar-nav > li > a {
	color: var(--thsLinksNav)!important;
	transition: all .2s ease-out;
}
.uk-navbar-nav > li > a:hover {
	color: var(--thsLinksNavHover)!important;
	transition: all .2s ease-out;
	text-decoration: none!important;
}
.uk-navbar-dropdown .uk-navbar-dropdown-nav a {
	color: var(--thsLinksNav)!important;
}
.uk-navbar-dropdown .uk-navbar-dropdown-nav a:hover {
	color: var(--thsLinksNavHover)!important;
	text-decoration: none!important;
}
.uk-navbar-dropdown .uk-navbar-dropdown-nav .uk-active a {
	color: var(--thsLinksNavHover)!important;
}
.uk-navbar-left { /* fix für schrumpfendes logo */
    min-width: fit-content;
    flex-shrink: 0;
}
.uk-navbar-right .uk-navbar-nav {
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: 30px;   /* horizontal */
	row-gap: 10px;      /* vertikal */
}
.uk-navbar-nav > li > a { /* Hoehe eines Menueeintrages */
	min-height: 20px; 
}
.uk-navbar-container:not(.uk-navbar-transparent) {
    background: var(--thsBGNavbar) !important;
}
.uk-navbar-nav>li>a {
  text-transform: inherit !important;
  font-size: 16px;

}

.searchbutton [uk-icon], 
.searchbutton svg { /* fix für schrumpfendes icon */
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
}
/*off canvas */
.ths-offcanvas {
	background: white!important;
	color: var(--thsTextfarbe)!important;
	width: 95% !important;
	max-width: 600px;
	text-transform: uppercase;
}
/* Close-Button auch anpassen */
.ths-offcanvas .uk-offcanvas-close {
	color: var(--thsTextfarbe)!important;
}
.ths-offcanvas .uk-offcanvas-close svg {
	fill: var(--thsTextfarbe)!important;
}
.ths-offcanvas a,
.ths-offcanvas a:link,
.ths-offcanvas a:visited {
	color: var(--thsTextfarbe)!important;
	font-size: 1.1475rem;
	line-height: 1.3;
}
.ths-offcanvas .uk-nav-default > li > a {
color: var(--thsTextfarbe)!important;
}
.ths-offcanvas .uk-nav-default > li > a:hover {
/* Hier kannst du die übliche hover-Farbe einsetzen, z. B. primary oder eine andere */
color: var(--thsLinks)!important;
text-decoration: none!important;
}
.ths-offcanvas .uk-nav-default > li.uk-active > a {
color: var(--thsLinks)!important; 
}
/* Subnav-Links: active */
.ths-offcanvas .uk-nav-sub > li.uk-active > a {
	color: var(--thsLinks)!important; 
}
.ths-offcanvas .uk-nav-sub > li > a:hover
{
	color: var(--thsLinks)!important;
	text-decoration: none!important;
}
.hroffcanvas {
	margin: 8px 0 8px 0;
}
.uk-nav-default .uk-nav-divider {
	border-top: 1px solid var(--thsDivider)!important;
}
.uk-search-navbar .uk-search-input {
	border: 1px solid var(--thsRahmen)!important;
	scroll-margin-top: 0;
}
.uk-search-icon {
	color: var(--thsToggler)!important;
}
/*footer icon links*/
/* Mobile: nur margin-right */
.scm {
	margin-right: 10px; /* small = ca. 10px */
}
.scm  svg { /* fix für schrumpfendes icon */
    width:20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}
/* Ab Small-Breakpoint: nur margin-left */
@media (min-width: 960px) {
	.scm {
		margin-right: 0;
		margin-left: 10px;
	}
}
/* Images */
.imgmaxH {
	max-height: 70vh;
	width: auto;
}
.imgmaxHsmall {
	max-height: 150px;
	width: auto;
}
/* News-Blog */
.blog_thumbnail {
	width:400px; max-height:400px;
	max-width:100%;
	object-fit: cover;
}
@media (max-width: 640px) {
	.blog_thumbnail {
		width:100%; max-height:400px;
		max-width:100%;
		object-fit: cover;
	}
}

.BU{
	color:var(--thsBU);
	font-size: 0.875rem;
}
/*new hero */
.herohero {
    border-radius: 1.2rem;
	background-color: var(--thsBG);
}

/* capes own hero LEGACY */
#intro{
	display: table;
	width: 100%;
	height: 400px;
  	min-height:400px;
  	max-height: 610px;
  	margin-top: 10px;
  /*	margin-bottom: 20px;*/
background: #d6d6d6 no-repeat fixed;
background-size: cover;
background-position: 50% 50%;
}
.intro_overlay {
	display: block;
	width: 100%;
	height: auto;
	max-height: 610px;
	margin: 0 auto;
	overflow: hidden;
	min-height:400px;
}
@media (max-width: 740px) {
#intro {
	max-height: 310px;
	min-height:310px;
}
.intro_overlay {
	max-height: 310px;
	min-height:310px;
}
}
/* Textaufklapper */
.text-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}
.text-clamp.expanded {
	-webkit-line-clamp: unset;
	line-clamp: unset;
}
.uk-column-divider {
	column-rule: 1px solid var(--uk-column-divider)!important;
}
/* Zitate */
.zitat {font-size: var(--fluid-2)!important;font-style: italic; padding-bottom: 5px;}
.zitat_person {font-weight: bold;}
.zitat_quelle {font-style: italic;}
/* Accordion */
a.ths-accordion-title {
	text-decoration: none!important;
	color: var(--thsRahmen)!important;
	transition: all .2s ease-out;
	font-size: var(--fluid-0)!important;
	font-weight: 700!important;
}
a.ths-accordion-title:hover {
	color: var(--thsLinks)!important;
}
/* lightbox */
.uk-lightbox {
	background-color: rgb(243, 243, 243)!important;  /* Weißer Hintergrund statt schwarz */
}
.uk-lightbox-caption, .uk-lightbox-counter {
	padding-top: 0;
	background: transparent!important;
	color: white!important;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8));
	padding: 1rem;
}
.uk-lightbox-close, .uk-drop-close {
	color: var(--thsToggler)!important;
}
.uk-lightbox-slidenav {
	color: white!important;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 8));
}
/* slideshow */
.uk-slideshow-items img {
	object-fit: contain; /* Zeigt das komplette Bild mit korrekter Ratio */
	width: 100%;
	height: 100%;
}
.uk-slideshow .uk-slidenav {
	color: var(--thsToggler)!important;
}
#slideshow-caption {
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* superhero */
.halfscreen {
	min-height: 50vh!important;
}
.bgimage {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
.ths-ken-burns {
	position: relative;
	overflow: hidden;
}
.ths-ken-burns::before {
	content: '';
	position: absolute;
	top: -10%;
	left: -10%;
	width: 120%;
	height: 120%;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	animation: kenBurns 15s ease alternate infinite;
	-webkit-animation: kenBurns 15s ease alternate infinite;
	z-index: 0;
}
.ths-ken-burns > * {
	position: relative;
	z-index: 1;
}
@keyframes kenBurns {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.1);
	}
}
@-webkit-keyframes kenBurns {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.1);
	}
}
.uk-light *,.uk-dark *  {
  opacity: 1 !important;
}

/* Scroll to top button */
.scrollToTop {
	width:36px;
	height:36px;
	position:fixed;
	bottom:14px;
	right:20px;
	padding-left: 0; padding-right: 0;
	opacity:0;
	z-index:50;
	transition: all .3s ease-in-out;
	pointer-events:none;
	line-height: 34px
}
@media (min-width: 640px) { /*ab small*/
	.scrollToTop {
		bottom:14px;
	}
}
.scrollToTop, .scrollToTop:hover, .scrollToTop:focus {
	color: var(--thsTextfarbe);
	background-color: rgba(255, 255, 255, 1);
	border: 1px solid var(--thsGray);
	box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
}
.scrollToTop:hover {
	opacity: 0.8;
}
.showScrollTop{
	opacity: 1;
	pointer-events:all;
}
.uk-accordion-content {
	padding-right:1.875rem;
}
/* Deaktiviert das Icon für alle Links innerhalb von .noicon */
.no-icon a::after {
	content: none !important;
}
.uk-background-white{background-color:#ffffff}

/* style previews  */
.style_image {
	height: 100px;
	width: 100%;
}
@media (max-width: 740px) {
	.style_image { height: 80px; }
}
.style_image a {
	display: block;
	height: 100%;
}
.style_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}
.nolink, .nolink:hover {
	text-decoration: none!important;
}
/* ths ----------------------------------------- styles */
.editme {
	z-index:90000;
	color: #ff0946a1;
	background-color: rgba(247, 255, 14, 0.6);
	position: fixed;
	width:36px;
	height:36px;
	top: 5px; left: 5px;
	/*top: 105px; left: 5px;*/
	box-shadow: 5px 5px 5px rgba(169, 169, 169, 0.51);
	transition: all .2s ease-out;line-height: 34px;
	padding-left: 0; padding-right: 0;
	line-height: 34px
}
.editme:hover {
	background-color: rgba(247, 255, 14, 1);
}

/* ── Cape Toggle ──────────────────────────────────────────── */

.cape-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cape-title-row h4 {
  margin: 0;
}
.cape-toggle-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--cape-toggle-color);
  opacity: var(--cape-toggle-opacity);
  transition: opacity .15s, color .15s;
  padding-bottom: 10px;
}
.cape-toggle-btn:hover {
  color: var(--cape-toggle-color-hover);
  opacity: var(--cape-toggle-opacity-hover);
}
.cape-toggle-btn .cape-chevron {
  display: flex;
  align-items: center;
  line-height: 0;
  transition: transform .2s ease;
}
.cape-toggle-btn .cape-chevron svg {
  display: block;
}
.cape-toggle-btn.cape-is-collapsed .cape-chevron {
  transform: rotate(-90deg);
}
/* ↑ end Cape Toggle ────────────────────────────────────────── */

/* ↓ Custom Typefaces row link ───────────────────────────────── */
a.ths-row-link {
  color: var(--thsTextfarbe)!important;
  text-decoration: none!important;
  border-radius: 6px;
  transition: background-color 0.5s ease;
  padding: 16px;
  margin: -16px;
}
a.ths-row-link:hover {
  color: var(--thsTextfarbe)!important;
  text-decoration: none!important;
  background-color: var(--thsSelect);
}
/* ↑ end Custom Typefaces row link ───────────────────────────── */

/* ↓ Order style preview tooltip ─────────────────────────────── */
.cape-order-tooltip {
    position: relative;
    cursor: default;
}
.cape-order-tooltip::before,
.cape-order-tooltip::after {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.cape-order-tooltip::after {
    content: attr(data-preview);
    font-family: var(--cape-font), sans-serif;
    font-size: 30px;
    bottom: calc(100% + 18px);
    left: 0;
    background: var(--thsBG);
    color: var(--thsTextfarbe);
    border: 2px solid var(--thsRahmen);
    padding: 8px 14px;
    white-space: nowrap;
    z-index: 1000;
}
.cape-order-tooltip::before {
    content: '';
    width: 10px;
    height: 10px;
    bottom: calc(100% + 11px);
    left: 16px;
    background: var(--thsBG);
    border-right: 2px solid var(--thsRahmen);
    border-bottom: 2px solid var(--thsRahmen);
    transform: rotate(45deg);
    z-index: 1001;
}
.cape-order-tooltip:hover::before,
.cape-order-tooltip:hover::after {
    opacity: 1;
}
/* ↑ end Order style preview tooltip ─────────────────────────── */

/* ↓ Order checkbox spacing ──────────────────────────────────── */
.cape-product-checkbox {
    margin-right: 5px;
    border: 1px solid var(--thsRahmen);
}
#shop-eula-checkbox {
    border: 1px solid var(--thsRahmen);
}
/* ↑ end Order checkbox spacing ──────────────────────────────── */

/* ↓ Type Tester ─────────────────────────────────────────────── */
/* ─── Design Tokens ─────────────────────────────────────── */
:root {
  --tt-bg:         transparent;
  --tt-btn-active: #ff0080;
  --tt-radius:     2px;
  --tt-track-h:    2px;
  --tt-thumb-size: 14px;
  --tt-font-size:  16px;
  --tt-transition: 0.18s ease;
}
/* ─── Controls Bar ──────────────────────────────────────── */
.tt-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: 2px solid var(--thsRahmen);
  border-bottom: 2px solid var(--thsRahmen);
  margin-bottom: 0;
}
.tt-controls-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 0;
}
.tt-controls-row + .tt-controls-row {
  border-top: 2px solid var(--thsRahmen);
}

/* Style Select */
.tt-style-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tt-style-select {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 30px 4px 11px;
  border: 2px solid var(--thsRahmen);
  border-radius: var(--tt-radius);
  background: transparent;
  color: var(--thsTextfarbe);
  cursor: pointer;
  line-height: 1;
  transition: border-color var(--tt-transition);
  outline: none;
}

.tt-style-select:hover,
.tt-style-select:focus {
  border-color: var(--thsRahmenHover);
}

.tt-select-arrow {
  position: absolute;
  right: 10px;
  pointer-events: none;
  display: flex;
  align-items: center;
  color: var(--thsTextfarbe);
  transition: color var(--tt-transition);
}

/* Info Icon */
.tt-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  cursor: default;
  transition: opacity var(--tt-transition);
}
.tt-info-icon:hover { opacity: 0.3; }

@keyframes tt-info-flash {
  0%   { background-color: transparent; color: inherit; opacity: 0.8; }
  15%  { background-color: #e00;        color: #fff;    opacity: 1;   }
  85%  { background-color: #e00;        color: #fff;    opacity: 1;   }
  100% { background-color: transparent; color: inherit; opacity: 0.8; }
}
.tt-info-icon.is-flashing {
  animation: tt-info-flash 0.45s ease forwards;
  transition: none;
  border-radius: 50%;
}

/* Reset Button */
.tt-reset {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--thsTextfarbe);
  cursor: pointer;
  padding: 5px 0 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--tt-transition);
  flex-shrink: 0;
}
.tt-reset:hover { color: var(--thsTextfarbe); }

/* Slider Area */
.tt-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.tt-slider-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--thsTextfarbe);
  white-space: nowrap;
}

.tt-size-display {
  font-size: 11px;
  color: var(--thsTextfarbe);
  min-width: 32px;
  text-align: right;
}

/* Custom Slider */
input[type="range"].tt-range {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: var(--tt-track-h);
  background: var(--thsRahmen);
  border-radius: 0;
  outline: none;
  cursor: pointer;
  position: relative;
}
input[type="range"].tt-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--tt-thumb-size);
  height: var(--tt-thumb-size);
  border-radius: 50%;
  background: var(--thsTextfarbe);
  cursor: pointer;
  transition: transform 0.12s ease;
}
input[type="range"].tt-range::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}
input[type="range"].tt-range::-moz-range-thumb {
  width: var(--tt-thumb-size);
  height: var(--tt-thumb-size);
  border-radius: 50%;
  background: var(--thsTextfarbe);
  border: none;
  cursor: pointer;
}

/* ─── Preview Area ──────────────────────────────────────── */
.tt-preview {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  column-gap: 20px;
  max-height: 300px;
  overflow: hidden;
  max-width: 100%;
}
.tt-preview.is-multi {
  column-count: 2;
}
.tt-preview.is-single {
  column-count: 1;
  overflow: hidden;
}
.tt-preview p {
  font-size: var(--tt-font-size);
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition: font-size var(--tt-transition);
  outline: none;
  min-width: 0;
}
.tt-preview p[contenteditable]:focus {
  outline: none;
}

/* Show All Button */
.tt-show-all {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--thsTextfarbe);
  cursor: pointer;
  padding: 5px 0 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--tt-transition);
  flex-shrink: 0;
}
.tt-show-all:hover { color: var(--thsTextfarbe); }
.tt-show-all.is-active { color: var(--tt-btn-active); }

/* All Styles Container */
.tt-all-styles:not(:empty) {
  border-top: 1px solid var(--thsRahmen);
}

/* Style Rows */
.tt-style-row {
  border-bottom: 1px solid var(--thsRahmen);
}
.tt-style-row-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--thsTextfarbe);
  padding-bottom: 0px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 0;
  opacity: 0.6;
}
.tt-extra-preview {
  padding-top: 8px;
}

/* ─── Divider ───────────────────────────────────────────── */
.tt-divider {
  width: 1px;
  height: 18px;
  background: var(--thsRahmen);
  flex-shrink: 0;
}

/* ─── Preview Theme Toggle ──────────────────────────────── */
.tt-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--thsTextfarbe);
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.6;
  transition: opacity var(--tt-transition);
  flex-shrink: 0;
  line-height: 1;
  margin-left: auto;
}
.tt-theme-toggle:hover { opacity: 1; }

/* ─── Preview Dark / Light ──────────────────────────────── */
#tt-preview-area {
  transition: background var(--tt-transition), color var(--tt-transition);
}
#tt-preview-area.is-light {
  background: transparent;
  color: rgba(36, 36, 36, 1);
}
#tt-preview-area.is-dark {
  background: rgba(36, 36, 36, 1);
  color: #efefef;
}
#tt-preview-area.is-dark .tt-style-row,
#tt-preview-area.is-dark .tt-all-styles:not(:empty) {
  border-color: rgba(255, 255, 255, 0.656);
}
#tt-preview-area.is-dark .tt-style-row-label {
  color: #efefef;
}
/* ↑ end Type Tester ──────────────────────────────────────────── */

/* ↓ Glyph Browser ───────────────────────────────────────────── */
:root {
  --cols-desktop:  12;
  --cols-mobile:   5;
  --cell-bg:       #FBFBFB;
  --cell-border:   #e0ddd8;
  --accent:        #c8c8c8;
  --glyphbadge:    var(--thsRahmen);
  --glyphbadgebg:  #f0f0ee;
  --muted:         #5c5c5c;
  --glyph-color:   var(--thsTextfarbe);
}

.gb-header {
  border-top: 2px solid var(--thsRahmen);
  border-bottom: 2px solid var(--thsRahmen);
  padding: 10px 10px 10px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
}

.gb-count {
  font-size: 13px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.gb-search {
  height: 30px;
  padding: 0 10px;
  border: 2px solid var(--thsRahmen);
  background: transparent;
  font-family: 'Familyname', monospace;
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--thsTextfarbe) !important;
  outline: none;
  width: 200px;
  transition: border-color .15s;
}
.gb-search:focus { border-color: var(--thsRahmen); }
.gb-search::placeholder { color: var(--thsRahmen); }

#progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  gap: 14px;
}

.progress-label {
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

#grid-wrap {
  display: none;
  padding: 16px;
}

.glyph-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop), 1fr);
  gap: 3px;
}

@media (max-width: 720px) {
  .glyph-grid { grid-template-columns: repeat(var(--cols-mobile), 1fr); }
}

@media (min-width: 721px) and (max-width: 1280px) {
  .glyph-grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(100% / var(--cols-desktop)), 1fr));
  }
}

.glyph-cell {
  position: relative;
  background: var(--cell-bg);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background .1s;
  border-radius: 15px;
  padding: 14%;
}

.glyph-cell svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.glyph-cell svg path {
  fill: var(--glyph-color);
}

.glyph-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-family: "Familyname";
  font-size: 11px;
  letter-spacing: .04em;
  background: var(--glyphbadgebg);
  color: var(--glyphbadge);
  padding: 2px 4px;
  line-height: 1;
  pointer-events: none;
  border-radius: 5px;
}

.glyph-cell::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
  z-index: 20;
}
.glyph-cell:hover::after { opacity: 1; }

.gb-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ccc;
}

.gb-filters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding-top: 10px;
  border-top: 2px solid var(--thsRahmen);
}

.gb-filter-btn {
  height: 24px;
  padding: 0 9px;
  border: 2px solid var(--thsRahmen);
  background: transparent;
  font-family: 'Familyname', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--thsTextfarbe);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  line-height: 1;
}

.gb-filter-btn:hover {
  background: var(--cell-bg);
}

.gb-filter-btn.active {
  background: var(--thsTextfarbe);
  color: var(--cell-bg);
  border-color: var(--thsTextfarbe);
}

.gb-no-db {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gb-over-limit { display: none; }

#gb-expand-wrap {
  padding: 0 16px 12px;
  display: none;
}

.gb-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  border: none;
  border-top: 2px solid var(--thsRahmen);
  background: transparent;
  cursor: pointer;
  font-family: 'Familyname', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .12s;
}
.gb-expand-btn:hover { color: var(--thsTextfarbe); }
/* ↑ end Glyph Browser ───────────────────────────────────────── */