html,body{
	margin:0;
	padding:0;
	background:rgba(236,245,247,1.00);
	color:#222;
	font-family:Helvetica, Arial, "sans-serif";
	font-size:16px;
	line-height:1.5;
}
body{
	padding:24px
}
#logo{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
#hnc{
	margin-bottom: -20px;
}
#logo div {
	flex:1;
	text-align: center;
}
#logo div.text {
	flex:4;
	font-size: 32px;
	color: #000;
	vertical-align: bottom;
	font-family:Georgia,'Times New Roman',serif;
	font-weight: 500;
}
h1, h2, h3, h4 {
	font-weight: normal;
}
a{
	text-decoration: none;	
	color:rgba(46,99,111,1.00);
}
a:hover{
	text-decoration: underline;	
	color:rgba(46,99,111,1.00);
}
.wrap{
	max-width:1100px;
	margin:0 auto;
	padding: 5px 15px 15px 15px;
	background-color: rgba(255,255,255,0.8);
	border-radius: 10px;
}
.top{
	padding-bottom:10px;
	margin-top: 3px;
	margin-bottom:14px;
	font-size: 12px;
}

.top a,.links a{
	color:#0645ad;
	text-decoration:underline
}
.top a{
	text-decoration:none
}
.title{
	font-size:24px;
	font-weight:normal;
	margin:0px;
}
.subtitle{
	color:#555
}



.rankbar {
	border-bottom:1px solid #ccc;
	padding:6px 0;
	margin: 0px;
    border-top: 1px solid #ddd;
}
.rankbar p {
	margin: 0px;
}
.rankbar ol {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
}

.rankbar li {
    display: inline-block;
    align-items: center;
    flex: 0 0 auto;
}

/* Trenner */
.rankbar li.trenner {
    margin: 0 0.7rem;
    color: #aaa;
    font-size: 1.5rem;
}

/* Link */
.rankbar a {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    text-decoration: none;
    padding: .25rem 0;
}

/* Rang */
.rankbar .rank-link {
    font-size: .68rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
}

/* Taxon */
.rankbar .taxon-link {
    font-size: .95rem;
    line-height: 1.25;
    color: #222;
    font-weight: 600;
}

.rankbar a:hover .taxon {
    text-decoration: underline;
}


/* Smartphone */
@media (max-width: 600px) {

/*    .rankbar {
        margin: 0 -1rem 1rem;
        padding: .6rem 1rem;
    }*/

    .rankbar ol {
        /*
         * Wischen statt hässlichem Umbruch.
         */
        padding-right: 1rem;
        -webkit-overflow-scrolling: touch;
    }

    .rankbar li + li::before {
        margin: 0 .5rem;
        font-size: 1.15rem;
    }

    .rankbar .rank {
        font-size: .6rem;
    }

    .rankbar .taxon {
        font-size: .85rem;
    }
}

.section{
	margin:15px 0;
	font-family:Georgia,'Times New Roman',serif;
}
.section h2{
	font-size:18px;
	font-weight:normal;
	margin:0 0 6px;
	border-bottom:1px solid #bbb;
}

div.versteckt {
	max-height: 0;
	overflow: hidden;
	transition: 0.5s ease-out;
}
.sichtbar {
	display: block;
	cursor: pointer;
}
.sichtbar::after {
	content: 'weiter lesen';
	display: block;
	margin: -10px 0px 0px -10px;
	padding: 4px 10px;
	width: 100%;
	background-color: rgba(128,128,128,0.1);
}
.aktiv::after {
	content: 'ausblenden';
	display: block;
	margin: -10px 0px 0px -10px;
	padding: 10px;
	width: 100%;
}

.suche {
	margin: 30px 0px 30px 0px;
	text-align: center;
	font-size: 16px;
}
.suche input {
	width: 80%;
	margin-right: 10px;
	padding: 4px;
	max-width: 350px;
	font-size: 16px;
}
.suchebtn {
	font-size: 18px !important;
	height: 30px;
	margin-left: -100%;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	appearance: none;
}

.synonym{
	margin:3px 0
}
.media{
	display:inline-block;
	/*width:190px;*/
	vertical-align:top;
	margin:0 8px 8px 0
}
.media .ph{
	/*height:125px;*/
	background:#eee;
	border:1px solid #bbb;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#777;
	font:13px Arial
}
.media .cap{
	font-size:14px
}
.tree{
	margin:0;
	padding-left:0px
}
.tree li{
	margin-top:0px;
	margin-right:0px;
	margin-bottom:10px;
	list-style:none;
	text-indent: -30px;
	line-height: 1.2;
}
:root {
	--multpl: 1;
	--ausr: 30px;
}
.sys-0 { margin-left: var(--ausr); }
.sys-1 { margin-left: calc(var(--ausr) + 0px * var(--multpl)); }
.sys-2 { margin-left: calc(var(--ausr) + 4px * var(--multpl)); }
.sys-3 { margin-left: calc(var(--ausr) + 10px * var(--multpl)); }
.sys-4 { margin-left: calc(var(--ausr) + 18px * var(--multpl)); }
.sys-5 { margin-left: calc(var(--ausr) + 29px * var(--multpl)); }
.sys-6 { margin-left: calc(var(--ausr) + 43px * var(--multpl)); }
.sys-7 { margin-left: calc(var(--ausr) + 60px * var(--multpl)); }
.sys-8 { margin-left: calc(var(--ausr) + 79px * var(--multpl)); }
.sys-9 { margin-left: calc(var(--ausr) + 101px * var(--multpl)); }
.sys-10 { margin-left: calc(var(--ausr) + 126px * var(--multpl)); }
.sys-11 { margin-left: calc(var(--ausr) + 154px * var(--multpl)); }
.sys-12 { margin-left: calc(var(--ausr) + 185px * var(--multpl)); }
.sys-13 { margin-left: calc(var(--ausr) + 218px * var(--multpl)); }
.sys-14 { margin-left: calc(var(--ausr) + 255px * var(--multpl)); }
@media screen and (max-width: 768px) {
	:root {
		--multpl: 0.4;
		--ausr: 20px;
	}
	 .sys-0 { margin-left: 20px; }
	 .sys-1 { margin-left: calc(var(--ausr) + 0px * var(--multpl)); }
	 .sys-2 { margin-left: calc(var(--ausr) + 4px * var(--multpl)); }
	 .sys-3 { margin-left: calc(var(--ausr) + 10px * var(--multpl)); }
	 .sys-4 { margin-left: calc(var(--ausr) + 18px * var(--multpl)); }
	 .sys-5 { margin-left: calc(var(--ausr) + 29px * var(--multpl)); }
	 .sys-6 { margin-left: calc(var(--ausr) + 43px * var(--multpl)); }
	 .sys-7 { margin-left: calc(var(--ausr) + 60px * var(--multpl)); }
	 .sys-8 { margin-left: calc(var(--ausr) + 79px * var(--multpl)); }
	 .sys-9 { margin-left: calc(var(--ausr) + 101px * var(--multpl)); }
	 .sys-10 { margin-left: calc(var(--ausr) + 126px * var(--multpl)); }
	 .sys-11 { margin-left: calc(var(--ausr) + 154px * var(--multpl)); }
	 .sys-12 { margin-left: calc(var(--ausr) + 185px * var(--multpl)); }
	 .sys-13 { margin-left: calc(var(--ausr) + 218px * var(--multpl)); }
	 .sys-14 { margin-left: calc(var(--ausr) + 255px * var(--multpl)); }
}
.muted{
	color:#666
}
.footer{
	border-top:1px solid #aaa;
	margin-top:35px;
	padding-top:8px;
	font-size:12px;
	color:#666;
	font-family:Helvetica, Arial, "sans-serif";
}

/* Mobile-first responsive styles */
@media screen and (max-width: 768px) {
    body {
        padding: 0px;
    }
    
    #logo div.text {
        font-size: 24px;
    }
	.top br{
  		display: none;
	}
	#hnc {
		margin-bottom: 3px;
	}
	
    .title{
        font-size:20px;
    }
    
    .wrap {
        padding: 5px 10px 10px 10px;
        margin: 0 5px;
    }
    
    .rankbar dt a, 
    .rankbar dd a {
        width: 100%;
        min-height: 44px;
        padding: 12px 8px; /* Mehr Abstand für Touch */
    }
    
    .suche input {
        width: 90%;
        max-width: none;
        margin-right: 5px;
    }

	.tree li {
		margin-bottom: 6px;
		line-height: 1.2;
		text-indent: -20px;
	}
	
    .media {
        margin: 0 5px 5px 0;
		width: calc(100% - 10px);
    }
    
    .media .ph {
        height: 80px;
        font-size: 12px;
    }
    
    .media .cap {
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    #logo div.text {
        font-size: 20px;
    }
    
    .title{
        font-size:18px;
    }
    
    .section h2 {
        font-size: 16px;
    }
    
    .rankbar dt a, 
    .rankbar dd a {
        padding: 10px 8px;
        font-size: 14px;
    }
    
    .footer {
        font-size: 11px;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    .rankbar dt a,
    .rankbar dd a {
        min-height: 48px; /* Größere Klickfläche für Touch */
    }
}