:root{
--f001: #c6c6c3; /*weiss*/
--f002: #1c1f1f; /*schwarz*/
--f003: #CE8E36; /*orange*/
--f004: #BCB499; /*beige*/
--f005: #5F4E5A; /*mauve*/
--f006: #9E788F; /*rose*/
--f007: #9e8123; /*gold*/
--f008: #494c4c; /*offblack*/
--f009: #292b2b; /*offblack schwarz*/
}

/* Gesuch 1*/

.cb{background:var(--f002);width:100%;max-width:700px;display:grid;grid-template-columns:210px 1fr;height:500px;}
.cb-img{position:relative;overflow:hidden;}
.cb-img .img-ph{width:100%;height:100%;}
.cb-img::after{content:"";position:absolute;top:0;right:0;bottom:0;width:90px;background:linear-gradient(to right,transparent,var(--f002));}
.cb-content{display:flex;flex-direction:column;overflow:hidden;padding:22px 22px 0 16px;}
.cb-name-block{flex-shrink:0;margin-bottom:12px;padding-bottom:12px;border-bottom:solid 1px var(--f004);}
.cb-subtitle{font:bold 10px var(--font-zalando);text-transform:uppercase;letter-spacing:2px;color:var(--f007);margin-bottom:4px;}
.cb-name{font:italic 800 24px var(--font-january);color:var(--f001);line-height:26px;margin-bottom:10px;}
.cb-tags{display:flex;flex-wrap:wrap;}
.cb-tag{border:solid 1px var(--f004);border-right:none;padding:6px 10px;font:bold 9px var(--font-zalando);letter-spacing:1px;color:var(--f001);line-height:12px;white-space:nowrap;}
.cb-tag:last-child{border-right:solid 1px var(--f004);}
.cb-tag b{color:var(--f007);margin-right:3px;}
.cb-scroll{flex:1;overflow-y:auto;padding-right:8px;padding-bottom:22px;}
.cb-scroll::-webkit-scrollbar{width:6px;}
.cb-scroll::-webkit-scrollbar-track{background:var(--f008);}
.cb-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--f007),var(--f003));border:1px solid var(--f008);}
.cb-section{border-left:solid 1px var(--f004);padding:6px 0 12px 16px;margin-left:6px;position:relative;}
.cb-section::before{content:"";width:9px;height:9px;border:solid 2px var(--f007);background:var(--f007);border-radius:100%;position:absolute;left:-6px;top:8px;}
.cb-section:last-child{border-left:solid 1px transparent;padding-bottom:0;}
.cb-section-title{font:bold 10px var(--font-zalando);text-transform:uppercase;letter-spacing:2px;color:var(--f007);margin-bottom:5px;}
.cb-section-text{font:12px var(--font-zalando);line-height:20px;color:var(--f001);text-align:justify;}

/*Gesuch 2*/ 

.ca { background: var(--f002); width: 100%; max-width: 650px; }

.ca-hero { width: 100%; height: 220px; position: relative; overflow: hidden; }
.ca-hero .img-ph { width: 100%; height: 100%; }
.ca-hero::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(to bottom, transparent, var(--f002));
  pointer-events: none;
}
.ca-hero-name {
  position: absolute; bottom: 18px; left: 24px; z-index: 2;
  font: italic 800 32px var(--font-january);
  color: var(--f001); line-height: 34px;
}
.ca-hero-name span {
  display: block;
  font: bold 10px var(--font-zalando);
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--f007); margin-bottom: 4px;
}

.ca-body { display: grid; grid-template-columns: 1fr 180px; padding: 20px 24px 24px; }

.ca-main { padding-right: 20px; border-right: solid 1px var(--f004); }
.ca-section { margin-bottom: 18px; }
.ca-section:last-child { margin-bottom: 0; }
.ca-section-title {
  font: bold 10px var(--font-zalando);
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--f007); margin-bottom: 6px;
}
.ca-section-text {
  font: 12px var(--font-zalando);
  line-height: 20px; color: var(--f001); text-align: justify;
}

.ca-sidebar { padding-left: 20px; display: flex; flex-direction: column; }
.ca-tag {
  border: solid 1px var(--f004); border-bottom: none;
  padding: 10px 12px;
  font: bold 10px var(--font-zalando);
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--f001); line-height: 14px;
}
.ca-tag:last-child { border-bottom: solid 1px var(--f004); }
.ca-tag b { color: var(--f007); display: block; margin-bottom: 2px; }

/*Gesuch 3*/

.cc { background: var(--f002); width: 100%; max-width: 650px; }

.cc-title-bar {
    background: var(--f001); padding: 14px 20px; display: flex; flex-direction: column; gap: 1px;}
.cc-title-bar h2 { font: 800 18px var(--font-january); color: var(--f007); text-transform: uppercase;}
.cc-title-bar span { font: 10px var(--font-zalando); letter-spacing: 2px; color: var(--f007); margin-top:-15px; }

.cc-group-desc { padding: 16px 20px; border-bottom: solid 1px var(--f004); border-left: solid 3px var(--f007); }
.cc-group-desc-title { font: bold 10px var(--font-zalando); text-transform: uppercase; letter-spacing: 2px; color: var(--f007); margin-bottom: 7px; }
.cc-group-desc-text { font: 12px var(--font-zalando); line-height: 20px; color: var(--f001); text-align: justify; }

.cc-divider { height: 2px; background: linear-gradient(90deg, var(--f007), var(--f003), transparent); }

.cc-entry { border-bottom: solid 1px var(--f004); }
.cc-entry:last-child { border-bottom: none; }

.cc-entry-header { padding: 10px 20px; border-bottom: solid 1px var(--f004); display: flex; align-items: baseline; flex-wrap: wrap; }
.cc-entry-name { font: italic 800 16px var(--font-january); color: var(--f001); margin-right: 14px; }
.cc-entry-meta { display: flex; flex-wrap: wrap; }
.cc-entry-tag { border-left: solid 1px var(--f004); padding: 0 10px; font: bold 9px var(--font-zalando); text-transform: uppercase; letter-spacing: 1px; color: var(--f007); line-height: 16px; }
.cc-entry-tag:first-child { border-left: none; padding-left: 0; }

.cc-entry-body { display: grid; align-items: center; }
.cc-entry-body.img-left  { grid-template-columns: 150px 1fr; }
.cc-entry-body.img-right { grid-template-columns: 1fr 150px; }

.cc-entry-img { position: relative; overflow: hidden; flex-shrink: 0; }
.cc-entry-img img { width: 150px; height: 150px; display: block; object-fit: cover; }


.cc-entry-body.img-right .cc-entry-img { order: 2; }
.cc-entry-body.img-right .cc-entry-text { order: 1; }

.cc-entry-text { padding: 14px 18px; border-left: solid 1px var(--f004); display: flex; flex-direction: column; justify-content: center; }
.cc-entry-body.img-right .cc-entry-text { border-left: none; border-right: solid 1px var(--f004); }

.cc-entry-text-title { font: bold 10px var(--font-zalando); text-transform: uppercase; letter-spacing: 2px; color: var(--f007); margin-bottom: 6px; }
.cc-entry-text-body { font: 12px var(--font-zalando); line-height: 20px; color: var(--f001); text-align: justify; }

.cc-entry-full { padding: 14px 20px; border-left: solid 3px var(--f007); }
.cc-entry-full-title { font: bold 10px var(--font-zalando); text-transform: uppercase; letter-spacing: 2px; color: var(--f007); margin-bottom: 7px; }
.cc-entry-full-text { font: 12px var(--font-zalando); line-height: 20px; color: var(--f001); text-align: justify; }

/*Button*/

.GW_wanted-buttons {
  display: flex;
  gap: 3px;
  background: var(--f007);
  border: 1px solid var(--f007);
}

.GW_wanted-btn {
  flex: 1;
  background: var(--f002);
  color: var(--f001);
  font-family: var(--font-zalando);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.8s, color 0.8s;
}

.GW_wanted-btn:hover {
  background: var(--f007);
  color: var(--f002);
}