/* ===== OSA Header: Avatar-Banner + klebende Leiste (Prefix hd-) ===== */
@import url(https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&family=Italiana&display=swap);

.hd{--navy:#4a3f8c;display:contents;color:var(--navy);font-family:'Archivo',sans-serif}
.hd *{box-sizing:border-box}
.hd-banner,.hd-bar{font-family:'Archivo',sans-serif}

/* Banner: Avatare nebeneinander, 8 Spalten x 2 Reihen */
.hd-top,.hd-banner,.hd-bar{width:1160px;max-width:calc(100% - 40px);margin-left:auto;margin-right:auto}
.hd-top{margin-top:20px;height:30px;
  border-top:7px solid #dbe3f1;border-bottom:7px solid #dbe3f1;
  background-color:#dedcf2;
  background-image:repeating-linear-gradient(135deg,#e8e6f7 0 16px,#dad8f0 16px 32px)}
.hd-banner{position:relative;overflow:hidden;background:#d9d4f3}
.hd-avas{display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
.hd-ava{display:block;aspect-ratio:1/1;overflow:hidden;margin:0!important;line-height:0}
.hd-ava img{width:100%;height:100%;object-fit:cover;display:block;margin:0!important;transition:transform .5s,filter .5s;filter:saturate(.92)}
.hd-ava:hover img{transform:scale(1.07);filter:none}
.hd-banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#e9e6fa33,#4a3f8c26 60%,#4a3f8c66)}

/* Titel: Archivo Black-Schnitt wie bei Spy x Anya (fett, eng, keine Versalien) */
.hd-title{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:0 16px;pointer-events:none}
.hd-title>div{pointer-events:auto;text-align:center;padding:14px 36px 14px;background:#f4f1fcd1;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative;
  border:1px solid #fff;box-shadow:0 12px 40px #4a3f8c33}
.hd-title>div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--navy)}
.hd-title h1,.hd-logo{text-transform:none!important}
.hd-title h1,.hd-title h1 a,.hd-title h1 span{background:none!important;background-color:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;text-shadow:none!important}
.hd-title h1{margin:0;font:900 clamp(22px,2.8vw,36px)/1.05 'Archivo',sans-serif;letter-spacing:-.025em;color:var(--navy)}
.hd-title h1 a{color:inherit;text-decoration:none}
.hd-title p{margin:6px 0 0;font:600 .64rem 'Archivo',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#655aa3}

/* Klebende Leiste (hellviolett mit Querstreifen wie Footer/Postbit) */
.hd-bar{position:sticky;top:0;z-index:900;color:var(--navy);
  border-top:7px solid #dbe3f1;border-bottom:7px solid #dbe3f1;
  background-color:#dedcf2;
  background-image:repeating-linear-gradient(135deg,#e8e6f7 0 16px,#dad8f0 16px 32px);
  box-shadow:0 6px 20px #4a3f8c22}
.hd-bar a{color:inherit;text-decoration:none}
.hd-nav{display:flex;align-items:center;gap:2px;padding:0 14px;min-height:50px;max-width:1400px;margin:0 auto}
.hd-logo{font:400 1.45rem 'Italiana',serif;letter-spacing:.08em;white-space:nowrap;flex:none}
.hd-ni{width:44px;height:44px;display:grid;place-items:center;font-size:1.15rem;position:relative;color:var(--navy)}
.hd-ni:hover{background:#ffffff80}
.hd-ni.act::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;background:var(--navy)}

/* Usermenü-Zeile */
.hd-user{background:#ffffffd9;border-top:1px solid #4a3f8c22;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:6px max(14px,calc((100% - 1400px)/2))}
.hd-user a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;color:var(--navy)}
.hd-user .sp{margin-left:auto}
.hd-badge{background:var(--navy);color:#fff;font-size:.62rem;letter-spacing:0;padding:1px 6px;border-radius:9px}

@media(max-width:900px){.hd-avas{grid-template-columns:repeat(4,minmax(0,1fr))}.hd-ava:nth-child(n+13){display:none}}
@media(max-width:560px){.hd-title>div{padding:12px 22px}.hd-logo{font-size:1.1rem}}

/* ===== Banner: Bento (zwei grosse Kacheln, Titel links) ===== */
.hd-banner{container-type:inline-size;background:#e4e0f5}
.hd-banner::after{background:linear-gradient(90deg,#4a3f8ccc,#4a3f8c66 28%,#4a3f8c00 52%)}
.hd-avas{gap:6px;padding:6px;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(3,calc((100cqw - 54px)/8));grid-auto-rows:0;grid-auto-flow:dense;overflow:hidden}
.hd-ava{aspect-ratio:auto;border-radius:10px;min-height:0}
.hd-ava.hd-big{border-radius:12px;box-shadow:0 10px 26px #1d165066}
.hd-ava.hd-big:nth-child(1){grid-column:3/6;grid-row:1/3}
.hd-ava.hd-big:nth-child(2){grid-column:6/9;grid-row:2/4}
.hd-title{place-items:center start;padding-left:44px}
.hd-title>div{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;padding:0;text-align:left}
.hd-title>div::before{display:none}
.hd-banner .hd-title h1{color:#fff!important;font-size:clamp(28px,4.2vw,52px);line-height:1;max-width:5.4em;text-shadow:0 4px 24px #1d1650aa!important}
.hd-title h1::after{content:"";display:block;width:64px;height:4px;background:#fff;margin-top:14px}
@media(max-width:900px){
 .hd-avas{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,calc((100cqw - 30px)/4))}
 .hd-ava.hd-big:nth-child(1),.hd-ava.hd-big:nth-child(2){grid-column:auto;grid-row:auto}
 .hd-ava:nth-child(n+13){display:none}
 .hd-title h1{max-width:none}
 .hd-title{padding-left:20px}
}

/* Titel im Banner ausgeblendet (fuer Screenreader/SEO bleibt er im Code) */
.hd-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;padding:0!important;pointer-events:none}
/* Weicher Farbschleier ueber allen Kacheln */
.hd-banner::after{display:block!important;content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(120deg,#5b4fb066,#8aa0d633 55%,#a9b9de66)}

/* Inhaltsbereich auf allen Seiten gleich breit (1100px Wrapper + 2x 20px Innenabstand = 1160px) */
#container > #header{width:100%;max-width:1160px;min-width:0;box-sizing:border-box}
#container #content{width:100%!important;max-width:100%;box-sizing:border-box}

/* Damit die Leiste ueber die ganze Seite kleben bleibt: Container waechst mit dem Inhalt (statt fest 100vh) */
#container{height:auto!important;min-height:100vh}

/* Icons (Font Awesome) in der Navigation */
.hd-ni i{font-size:1.1rem;line-height:1}

/* Usermenü: nur Icons, alle auf einer Linie */
.hd-user .welcomeblock{display:contents}
.hd-user{align-items:center}
.hm-i{display:inline-flex;align-items:center;position:relative;height:34px;margin:0;padding:0;background:none!important;border:0!important;float:none!important}
.hm-i:empty{display:none}
.hm-i>div{display:contents}
.hm-i a{display:inline-flex!important;align-items:center;justify-content:center;width:36px;height:34px;
  padding:0!important;margin:0!important;float:none!important;position:static!important;
  background:none;border:0;border-radius:0;box-shadow:none;
  color:var(--navy)!important;text-decoration:none;font-size:0!important;line-height:1!important}
.hm-i a i{display:block;font-size:1.12rem;line-height:1;margin:0!important;padding:0;color:var(--navy)!important}
.hm-pm .hd-badge,.hm-alerts .hd-badge{position:absolute;top:1px;right:3px;pointer-events:none;font-size:.58rem;line-height:1.35;padding:0 5px;min-width:16px;text-align:center}
/* Inplayszenen: Lesezeichen + Zaehler, ganzer Block ist der Link */
.hm-scenes a{width:auto;padding:0 10px!important;gap:6px;font-size:.72rem!important;font-weight:600;letter-spacing:.06em}
.hm-scenes .hm-count{font:600 .72rem 'Archivo',sans-serif;letter-spacing:.06em;color:var(--navy)}
.hm-raw{display:none!important}
.hm-admin{margin-left:auto}
.hm-admin:empty+.hm-logout{margin-left:auto}
.hd-user br{display:none}

/* Forennavigation (Breadcrumb) neben dem Titel */
.hd-crumb{flex:1;min-width:0;margin:0 12px 0 18px;padding-left:18px;border-left:1px solid #4a3f8c33;
  font:500 .8rem 'Archivo',sans-serif;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-crumb .navigation,.hd-crumb div{background:none!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important;display:inline;font:inherit;color:var(--navy)}
.hd-crumb a{color:var(--navy);opacity:.75;text-decoration:none;font-weight:500}
.hd-crumb a:hover{opacity:1;text-decoration:underline}
.hd-crumb .active,.hd-crumb strong{font-weight:700;color:var(--navy)}
.hd-crumb img{vertical-align:middle;margin:0 4px}
.hd-crumb br{display:none}
@media(max-width:760px){.hd-crumb{display:none}.hd-logo{margin-right:auto}}


/* ===== Alte Klassen, die evtl. in anderen Templates noch genutzt werden ===== */
.navititel {
	text-transform: uppercase;
    font-size: 25px;
    font-family: 'SF Buttacup Lettering', sans-serif;
    color: #1b5d6a;
    letter-spacing: 4px;
    padding: 10px 50px 20px 50px;
    margin-top: 10px;
    margin-bottom: 25px;
    font-weight: bold;
    text-align: center;
}

.navititel > a {
	color: #1b5d6a;
}

.navititel > a:hover {
	color: #bb6673;
}

.avatar_header {
	padding: 20px 40px;
    margin-top: -50px;
    display: flex;
}

.header_avatar > img {
	width: 160px;
    border: 4px solid #6a868c;
	display: flex;
}

.benutzer_cp_menu {
	float: left;
    padding: 25px;
    font-size: 20px;
}

.benutzer_cp_menu:hover {
  background-color: #6a868c;
  color: #bb6673;
}

.header_usernavi {
	width: 850px;
    background-color: #e1e8e9;
	float: right;
}

.usernavi_control {
	float: left;
    padding: 0px 10px 0px 10px;
    font-size: 15px;
    font-family: 'SF Buttacup Lettering', sans-serif;
    color: #ffffff;
}

.usernavi_control > a {
	text-transform: uppercase;
    font-size: 14px;
    font-family: 'SF Buttacup Lettering', sans-serif;
    color: #48304f;
    letter-spacing: 4px;
}

.usernavi_control:hover {
}